/* ─── Reset & base ───────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Make the HTML `hidden` attribute bulletproof. Without this, any author rule that sets `display` (like .btn or .fullscreen-overlay) silently overrides the UA stylesheet's `[hidden] { display: none }`. */ [hidden] { display: none !important; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; color: #1a2332; background: #f5f7f8; -webkit-font-smoothing: antialiased; min-height: 100vh; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: 15px; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: 28px; } h2 { font-size: 17px; } h3 { font-size: 15px; } /* ─── Colors ─────────────────────────────────── */ :root { --bg: #f5f7f8; --surface: #ffffff; --border: #e6ebed; --text: #1a2332; --text-dim: #6b7785; --text-faint: #9ba6b2; --primary: #0f9d8e; --primary-dark: #0a7d72; --primary-soft: #e6f5f3; --accent: #f59e0b; --danger: #dc2626; --success: #16a34a; --warn: #f59e0b; --shadow-sm: 0 1px 2px rgba(15, 30, 45, 0.04); --shadow: 0 1px 3px rgba(15, 30, 45, 0.06), 0 1px 2px rgba(15, 30, 45, 0.04); --shadow-lg: 0 10px 30px rgba(15, 30, 45, 0.12); --radius: 12px; --radius-sm: 8px; } /* Dark mode — toggled by adding class "dark" to from JS. The variables get redefined; everything else (cards, buttons, calendar cells…) automatically adopts the new palette because the whole stylesheet already references the var()s. The primary teal is brightened slightly so it stays legible on a dark surface; soft variants flip from near-white to deep teal. */ body.dark { --bg: #0f172a; --surface: #1e293b; --border: #334155; --text: #f1f5f9; --text-dim: #94a3b8; --text-faint: #64748b; --primary: #2dd4bf; --primary-dark: #14b8a6; --primary-soft: #134e4a; --accent: #fbbf24; --danger: #f87171; --success: #4ade80; --warn: #fbbf24; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* Hard-coded white backgrounds need to follow the theme too. */ body.dark .dash-day-shift, body.dark .modal-card, body.dark .card, body.dark .fullscreen-card { background: var(--surface); } /* The smooth-scroll page also has body bg via the html selector. */ body.dark { background: var(--bg); color: var(--text); } /* ─── Top bar (mobile) ───────────────────────── */ .topbar { display: none; align-items: center; justify-content: space-between; padding: 12px 16px; /* Add the iOS status-bar height so the hamburger isn't trapped behind it when launched as a standalone PWA. env() is 0 on desktop / Android so this is a no-op there. */ padding-top: calc(12px + env(safe-area-inset-top)); padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .topbar-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; flex: 1; text-align: center; /* Long titles like "Tax (EOFY)" stay on one line and ellipsize if needed */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; } /* Brightness toggle (sun/moon icon) — present in both the mobile topbar and a floating desktop pill so the user can flip themes from anywhere. */ .theme-toggle { background: transparent; border: none; font-size: 20px; padding: 6px 10px; border-radius: 8px; color: var(--text); min-width: 40px; min-height: 40px; cursor: pointer; -webkit-tap-highlight-color: rgba(15, 157, 142, 0.2); touch-action: manipulation; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle:hover { background: var(--primary-soft); } /* On mobile (where the topbar is visible) hide the sidebar version so we don't double-up. The sidebar button is the desktop home for the toggle. */ @media (max-width: 720px) { #themeToggleBtnSidebar { display: none; } } .topbar-brand-text { font-weight: 700; } .menu-btn, .quick-add-btn { background: transparent; border: none; font-size: 22px; padding: 6px 10px; border-radius: 8px; color: var(--text); /* Ensure a proper Apple-recommended 44x44 touch target on mobile so the hamburger isn't a frustrating tap target inside an iOS PWA. */ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2; -webkit-tap-highlight-color: rgba(15, 157, 142, 0.2); cursor: pointer; touch-action: manipulation; } .quick-add-btn { background: var(--primary); color: white; font-weight: 700; font-size: 20px; width: 36px; height: 36px; padding: 0; } /* ─── Sidebar ────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; z-index: 60; } .brand { display: flex; flex-direction: column; align-items: stretch; gap: 6px; /* Negative horizontal margins so the logo can break out of the sidebar's padding and span fully from the left edge to the right edge. */ margin: -20px -14px 12px; padding: 0 0 8px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); } .brand-logo { width: 100%; height: auto; display: block; } .brand-logo.hidden { display: none; } .brand-logo.hidden ~ .brand-text { padding-top: 6px; } .brand-name { font-weight: 700; font-size: 16px; text-align: center; } .brand-sub { font-size: 11px; color: var(--text-dim); text-align: center; line-height: 1.35; margin-top: 2px; } /* When the logo image is present, the in-app text becomes redundant — hide it but keep for screen readers and graceful fallback. */ .brand:not(:has(.brand-logo.hidden)) .brand-name { display: none; } .brand:not(:has(.brand-logo.hidden)) .brand-sub { display: none; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; font-weight: 500; transition: background 0.1s, color 0.1s; } .nav-item:hover { background: #f1f4f5; color: var(--text); } .nav-item.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; } .nav-ico { width: 18px; display: inline-flex; justify-content: center; font-size: 14px; opacity: 0.8; } .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .feedback-btn { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text-dim); text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .feedback-btn:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); } .fy-pill { display: inline-block; padding: 4px 10px; background: #f1f4f5; color: var(--text-dim); border-radius: 99px; font-size: 12px; font-weight: 500; } /* ─── Sync status pill ─────────────────────── */ .sync-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 500; margin-bottom: 6px; border: 1px solid transparent; background: #f1f4f5; color: var(--text-dim); cursor: default; transition: background 0.2s, color 0.2s, border-color 0.2s; } .sync-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .sync-pill.state-idle { background: #dcfce7; color: #15803d; } .sync-pill.state-pending { background: #e0e7ff; color: #4338ca; } .sync-pill.state-saving { background: #e0e7ff; color: #4338ca; } .sync-pill.state-saving .sync-pill-dot, .sync-pill.state-pending .sync-pill-dot { animation: syncPulse 1s ease-in-out infinite; } .sync-pill.state-error { background: #fee2e2; color: #b91c1c; cursor: pointer; border-color: #fca5a5; } .sync-pill.state-error:hover { background: #fecaca; } .sync-pill.state-offline { background: #f3f4f6; color: var(--text-dim); } @keyframes syncPulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.2); } } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 55; display: none; } .sidebar-backdrop.show { display: block; } /* Lock background scrolling while the mobile menu is open. The JS also adds a touchmove guard for iOS (where overflow:hidden alone still scrolls). */ body.menu-open { overflow: hidden; } /* ─── Invoice settings → per-client billing frequency ─── */ .inv-freq-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; } .inv-freq-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; } .inv-freq-name { font-size: 14px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inv-freq-row select, .inv-freq-row input { padding: 6px 8px; font-size: 13px; } .inv-freq-custom { font-size: 12px; color: var(--text-dim); white-space: nowrap; } .inv-freq-custom input { width: 56px; } /* ─── Main ───────────────────────────────────── */ .main { margin-left: 240px; padding: 32px 36px 80px; min-height: 100vh; } .view-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .view-sub { color: var(--text-dim); font-size: 14px; } /* ─── Cards ──────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .card.pad-0 { padding: 0; } .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .card.pad-0 .card-head { padding: 16px 20px 0; margin-bottom: 0; } .link { color: var(--primary); font-size: 13px; font-weight: 500; } .link:hover { text-decoration: underline; } /* ─── Stat grid ──────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .stat-grid-3 { grid-template-columns: repeat(3, 1fr); } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); } .stat-card.highlight { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; border-color: transparent; } .stat-label { font-size: 12px; color: var(--text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .stat-card.highlight .stat-label { color: rgba(255,255,255,0.85); } .stat-value { font-size: 28px; font-weight: 700; margin-top: 6px; letter-spacing: -0.02em; } .stat-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .stat-card.highlight .stat-sub { color: rgba(255,255,255,0.8); } /* ─── Two-col row ────────────────────────────── */ .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* ─── Calendar grid ──────────────────────────── */ .cal-weekday-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; /* match .cal-grid below so columns line up */ background: var(--border); border-bottom: 1px solid var(--border); } .cal-weekday-header > div { background: #fafbfc; } .cal-weekday-header > div { padding: 10px 12px; font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--border); gap: 1px; /* Container queries let the pills react to the actual grid width, not just the viewport — so a narrow desktop window with the sidebar still showing gets compact pills too. */ container-type: inline-size; container-name: cal-grid; } /* Compact pill mode: when each cell becomes narrow (grid <=700px wide, ~100px per cell), drop the end time and last name, and lay the pill out horizontally so 2-3 pills fit comfortably in a 70px cell instead of just one. The user keeps seeing at least 2 shifts per day at any window size. */ @container cal-grid (max-width: 700px) { .cal-shift { flex-direction: row !important; align-items: baseline; gap: 4px; white-space: nowrap; } .cal-shift .t-sep, .cal-shift .t-end, .cal-shift .n-rest { display: none; } .cal-shift .cal-shift-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } } .cal-cell { background: var(--surface); min-height: 110px; min-width: 0; /* lets flex/grid children shrink, prevents column overflow */ padding: 6px 8px; cursor: pointer; position: relative; transition: background 0.1s; display: flex; flex-direction: column; gap: 3px; overflow: hidden; /* defensive — keep long content inside the cell */ } .cal-cell.drop-target { background: #fef3c7; box-shadow: inset 0 0 0 2px #d97706; } .cal-cell:hover { background: #fafbfc; } .cal-cell.other-month { background: #fafbfc; } .cal-cell.other-month .cal-date { color: var(--text-faint); } .cal-cell.today { background: var(--primary-soft); } .cal-cell.today .cal-date { color: var(--primary-dark); } .cal-cell.weekend { background: #fcfdfd; } .cal-cell.weekend:hover { background: #f5f9fa; } /* Dark-mode overrides — the variants above use slight off-whites that look wrong on a dark surface, so retune them with the dark vars. */ body.dark .cal-cell:hover, body.dark .cal-cell.other-month, body.dark .cal-cell.weekend { background: color-mix(in srgb, var(--surface) 75%, var(--bg) 25%); } body.dark .cal-cell.weekend:hover { background: color-mix(in srgb, var(--surface) 60%, var(--bg) 40%); } body.dark .cal-cell.today { background: var(--primary-soft); } body.dark .cal-cell.today .cal-date { color: var(--primary); } body.dark .cal-shift.completed { background: #052e16; color: #4ade80; border-left-color: #22c55e; } body.dark .cal-shift.cancelled { background: #1e293b; color: var(--text-dim); border-left-color: #64748b; } body.dark .cal-shift.note-only { background: #422006; color: #fbbf24; border-left-color: #f59e0b; } body.dark .cal-cell.drop-target { background: #422006; box-shadow: inset 0 0 0 2px #f59e0b; } /* Retune the rest of the components that hardcode pale backgrounds. */ body.dark .toggle-label { background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%); } body.dark .scheduled-card { background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%); } body.dark .scheduled-card.note-card .note-mood-badge.scheduled-badge { background: #334155; color: var(--text-dim); } body.dark .scheduled-pill.status-scheduled { background: #334155; color: var(--text-dim); } body.dark .scheduled-pill.status-ready { background: #422006; color: #fbbf24; } body.dark .note-tag { background: #1e293b; color: var(--text-dim); } body.dark .ai-summary-block { background: linear-gradient(135deg, #0f3a36, #0c2f44); border: 1px solid #14b8a6; } body.dark .shift-summary .billed-pill { background: var(--bg); } body.dark .dash-day-shift { /* inline styles from JS set the bg; this is the fallback */ background: var(--surface); } /* ─── Dark-mode polish pass — hardcoded light backgrounds ─── */ /* Sidebar nav hover was hardcoded #f1f4f5 → unreadable on dark */ body.dark .nav-item:hover { background: var(--primary-soft); color: var(--text); } /* Calendar weekday header strip */ body.dark .cal-weekday-header > div { background: color-mix(in srgb, var(--surface) 80%, var(--bg) 20%); } /* Data table header strip + row hover */ body.dark .data-table th { background: color-mix(in srgb, var(--surface) 80%, var(--bg) 20%); } body.dark .data-table th.sortable-col:hover { background: var(--primary-soft); color: var(--text); } body.dark .data-table tbody tr:hover { background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%); } body.dark .data-table th.sorted-asc, body.dark .data-table th.sorted-desc { background: var(--primary-soft); color: var(--primary); } body.dark .data-table th.sorted-asc .sort-ind::after, body.dark .data-table th.sorted-desc .sort-ind::after { color: var(--primary); } /* NDIS billing code rows + professional contact rows (client form) */ body.dark .ndis-row, body.dark .ndis-line, body.dark .contact-row { background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%); } body.dark .contact-row .remove-contact:hover, body.dark .ndis-row .remove-ndis:hover, body.dark .ndis-line .remove-ndis:hover, body.dark .line-row .remove-line:hover { background: var(--surface); } /* Profile-view (read-only) contact cards */ body.dark .profile-contact-card { background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%); } body.dark .profile-contact-role { color: var(--primary); } /* Dashboard "this week" cells were hardcoded #fafbfc → unreadable on dark */ body.dark .dash-day { background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%); } body.dark .dash-day:hover { background: var(--surface); } body.dark .dash-day.today { background: var(--primary-soft); border-color: var(--primary); } body.dark .dash-day.today .dash-day-num { color: var(--primary); } /* Shift note "bubbles" had a hardcoded light gradient → too bright on dark */ body.dark .note-block { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, var(--bg) 30%) 0%, var(--surface) 100%); border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.25); } body.dark .note-block-area { background: var(--surface); color: var(--text); } body.dark .note-block-area::placeholder { color: var(--text-faint); } /* Invoice line-item rows on the invoice modal */ body.dark .line-row { background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%); } /* Incident "Reported to" quick-pick chips */ .reported-to-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .reported-to-chip { padding: 5px 12px; border-radius: 14px; background: var(--bg); color: var(--text-dim); font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); user-select: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .reported-to-chip:hover { border-color: var(--primary); color: var(--text); } .reported-to-chip.active { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); } body.dark .reported-to-chip.active { color: var(--primary); } .reported-to-empty { color: var(--text-faint); font-size: 12px; font-style: italic; } .reported-to-mail { margin-left: 6px; font-size: 11px; opacity: 0.65; } .reported-to-chip:hover .reported-to-mail { opacity: 1; } /* Dashboard onboarding to-do list */ .todo-list { list-style: none; margin: 0; padding: 0 4px 0 0; /* Plain block-flow — sections stack as normal divs / uls. No flex on the outer container; that was creating an interaction with nested flex sections that caused the "Completed" section to visually intrude on "To do" in some browsers. */ display: block; max-height: 260px; overflow-y: auto; } .todo-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s; } .todo-item:hover:not(.done) { background: var(--primary-soft); border-color: var(--primary); } .todo-item:active:not(.done) { transform: scale(0.99); } .todo-item.done { cursor: default; opacity: 0.7; background: color-mix(in srgb, var(--success) 8%, var(--surface) 92%); border-color: color-mix(in srgb, var(--success) 30%, var(--border) 70%); } .todo-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white; flex-shrink: 0; } .todo-item.done .todo-check { background: var(--success); border-color: var(--success); } .todo-label { flex: 1; min-width: 0; font-weight: 500; color: var(--text); } .todo-item.done .todo-label { text-decoration: line-through; color: var(--text-dim); } .todo-arrow { color: var(--text-faint); font-size: 18px; flex-shrink: 0; } .todo-item:hover:not(.done) .todo-arrow { color: var(--primary); } body.dark .todo-item.done { background: color-mix(in srgb, var(--success) 12%, var(--surface) 88%); } .todo-delete { background: transparent; border: none; color: var(--text-faint); font-size: 14px; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; } .todo-item:hover .todo-delete, .todo-item.user-todo .todo-delete { opacity: 0.7; } /* always show on user items, esp. mobile */ .todo-delete:hover { color: var(--danger); background: var(--bg); opacity: 1; } .todo-add { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .todo-add input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; } .todo-add input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .todo-add .btn { flex-shrink: 0; } /* To-do sections + drag */ .todo-section-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); padding: 8px 4px; margin: 0; display: block; } .todo-section-head-done { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .todo-section { list-style: none; padding: 0; margin: 0; display: block; /* plain block flow inside the section too */ min-height: 0; } .todo-section > .todo-item { margin-bottom: 8px; } .todo-section > .todo-item:last-child { margin-bottom: 0; } .todo-section.todo-drop-target { background: var(--primary-soft); border-radius: var(--radius-sm); padding: 4px; } .todo-empty { color: var(--text-faint); font-size: 12px; font-style: italic; padding: 8px 4px; } /* CSS-rendered drag grip — six dots in a 2×3 grid drawn via radial gradient. Avoids relying on Braille glyphs (⠿) which some fonts either don't have or render as invisible. */ .todo-drag { display: inline-block; width: 10px; height: 16px; cursor: grab; flex-shrink: 0; padding: 0 2px; background-image: radial-gradient(circle, var(--text-faint) 1.2px, transparent 1.6px), radial-gradient(circle, var(--text-faint) 1.2px, transparent 1.6px); background-size: 4px 4px; background-position: 0 2px, 4px 2px; background-repeat: repeat-y; background-origin: content-box; font-size: 0; /* hide the inline ⠿ fallback */ color: transparent; user-select: none; opacity: 0.7; } .todo-drag:hover { opacity: 1; } .todo-drag:active { cursor: grabbing; } .todo-item.dragging { opacity: 0.4; } .todo-item.todo-drop-target { box-shadow: 0 -3px 0 var(--primary) inset, 0 3px 0 var(--primary) inset; } /* Editing an existing shift → simplified form. Hide everything except client, date, repeat, start, end (+ the action buttons). Inputs remain in the DOM so saveShift preserves their values. */ #shiftModal.shift-simple #shiftFormSummary, #shiftModal.shift-simple #shiftAlsoOnLabel, #shiftModal.shift-simple #shiftForm label:has(#shiftNdisCode), #shiftModal.shift-simple #shiftForm label:has(#shiftTravelTime), #shiftModal.shift-simple #shiftForm label:has(#shiftNotes) { display: none !important; } /* "Create incident report" mode — strip the note modal down to client + date + the incident block, so the standalone reports flow doesn't feel like a half-empty shift note. Toggled by adding .incident-only to #noteModal (set in openNoteModal when opts.asReport === true). */ #noteModal.incident-only .shift-summary, #noteModal.incident-only .cancellation-block, #noteModal.incident-only #noteOptionalSections { display: none !important; } #noteModal.incident-only #noteForm label:has(#noteNdisCode), #noteModal.incident-only #noteForm label:has(#noteKm), #noteModal.incident-only #noteForm label:has(#noteStart), #noteModal.incident-only #noteForm label:has(#noteEnd), #noteModal.incident-only #noteForm label:has(#noteTravelTime), #noteModal.incident-only #noteForm label:has(#noteNotesTime), #noteModal.incident-only #noteForm label:has(#noteTravelFromTime) { display: none !important; } .cal-date { font-weight: 600; font-size: 13px; color: var(--text); } .cal-shift { font-size: 10.5px; padding: 3px 6px; border-radius: 4px; cursor: pointer; line-height: 1.25; border-left: 3px solid; background: var(--primary-soft); color: var(--primary-dark); display: flex; flex-direction: column; gap: 1px; min-width: 0; /* let it shrink to column width */ overflow: hidden; } .cal-shift .cal-shift-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-shift[draggable="true"] { user-select: none; } .cal-shift.dragging { opacity: 0.4; } .cal-shift.completed { background: #dcfce7; color: #15803d; border-left-color: #15803d; } .cal-shift.cancelled { background: #f1f4f5; color: var(--text-dim); text-decoration: line-through; border-left-color: #9ca3af; } .cal-shift.note-only { background: #fef3c7; color: #92400e; border-left-color: #d97706; } .cal-shift-time { font-weight: 600; font-size: 10px; opacity: 0.9; } .cal-recurring-icon { font-size: 9px; opacity: 0.7; margin-left: 2px; } .cal-needs-notes { display: inline-grid; place-items: center; width: 14px; height: 14px; background: #dc2626; color: white; border-radius: 50%; font-size: 10px; font-weight: 800; line-height: 1; margin-right: 4px; vertical-align: middle; } .cal-shift.needs-notes { box-shadow: inset 0 0 0 1px #dc2626; } .dash-day-shift.needs-notes { box-shadow: inset 0 0 0 1px #dc2626; } /* ─── Dashboard week strip ──────────────────── */ .dash-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .dash-day { background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 8px; min-height: 110px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color 0.1s, background 0.1s; } .dash-day:hover { background: var(--surface); border-color: var(--primary); } .dash-day.today { background: var(--primary-soft); border-color: var(--primary); } .dash-day-header { display: flex; align-items: baseline; justify-content: space-between; } .dash-day-label { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; } .dash-day-num { font-weight: 700; font-size: 18px; color: var(--text); } .dash-day.today .dash-day-num { color: var(--primary-dark); } .dash-day-shifts { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .dash-day-shift { font-size: 11px; padding: 3px 5px; background: white; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 3px; line-height: 1.3; cursor: pointer; text-align: left; width: 100%; white-space: normal; /* allow client name + times to wrap rather than clip */ word-break: break-word; } .dash-day-shift.completed { border-left-color: #15803d; } .dash-day-empty { color: var(--text-faint); font-size: 11px; font-style: italic; margin-top: auto; text-align: center; } /* ─── Recurring rules list ──────────────────── */ .recurring-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; } .recurring-info { flex: 1; min-width: 0; } .recurring-info strong { display: block; font-size: 14px; } .recurring-info .meta { color: var(--text-dim); font-size: 12px; margin-top: 2px; } .recurring-empty { color: var(--text-faint); padding: 20px; text-align: center; font-size: 14px; } /* ─── Calendar mobile ───────────────────────── */ @media (max-width: 720px) { .cal-cell { min-height: 70px; padding: 4px 5px; font-size: 12px; } .cal-date { font-size: 11px; } .cal-shift { font-size: 10px; padding: 2px 4px; } .cal-weekday-header > div { padding: 6px 4px; font-size: 10px; } .dash-week { grid-template-columns: 1fr; gap: 6px; } .dash-day { min-height: 60px; flex-direction: row; align-items: center; gap: 12px; } .dash-day-header { flex-direction: row; gap: 8px; align-items: baseline; flex-shrink: 0; width: 70px; } .dash-day-shifts { flex-direction: row; flex-wrap: wrap; flex: 1; margin-top: 0; } } /* ─── Segmented control (calendar view toggle) ──────────────── */ .seg-ctrl { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; } .seg-btn { background: transparent; border: none; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--text-dim); border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; } .seg-btn:hover { color: var(--text); } .seg-btn.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(0,0,0,0.06); } /* ─── 3-day calendar view ─────────────────────────────────── */ .cal-3day-grid { display: flex; gap: 1px; background: var(--border); /* Native horizontal scroll with momentum — no JS gesture handlers needed. The browser gives us a buttery pan with inertia + flick that no custom touch-event code can match for smoothness. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: smooth; } .cal-3day-grid::-webkit-scrollbar { display: none; } .cal-3day-grid > .cal-3day-cell { /* Each cell takes exactly 1/3 of the visible container so 3 days are visible at a time. The rest stay just off-screen and pan into view as the user scrolls. */ flex: 0 0 calc((100% - 2px) / 3); } .cal-3day-cell { background: var(--surface); display: flex; flex-direction: column; min-height: 380px; padding: 10px; } .cal-3day-cell.today { background: var(--primary-soft); } .cal-3day-cell.weekend { background: color-mix(in srgb, var(--bg) 60%, var(--surface) 40%); } .cal-3day-cell.today.weekend { background: var(--primary-soft); } .cal-3day-header { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .cal-3day-dow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); } .cal-3day-cell.today .cal-3day-dow { color: var(--primary); } .cal-3day-date { font-size: 22px; font-weight: 700; line-height: 1; } .cal-3day-shifts { display: flex; flex-direction: column; gap: 6px; } .cal-3day-shift { border-left: 3px solid var(--primary); border-radius: 6px; padding: 6px 8px; font-size: 12px; cursor: pointer; user-select: none; } .cal-3day-shift-time { font-weight: 700; font-size: 12px; display: flex; align-items: center; gap: 4px; } .cal-3day-shift-name { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; } .cal-3day-shift.needs-notes::after { content: ' • notes pending'; font-size: 10px; color: var(--danger); font-weight: 600; } .cal-3day-empty { color: var(--text-faint); font-size: 12px; font-style: italic; padding: 6px 0; } @media (max-width: 720px) { .cal-3day-cell { min-height: 280px; padding: 8px; } .cal-3day-date { font-size: 18px; } .cal-3day-dow { font-size: 10px; } .cal-3day-shift { padding: 5px 6px; } } /* ─── Year grid ──────────────────────────────── */ .year-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .year-label { font-size: 12px; color: var(--text-dim); font-weight: 500; } .year-val { font-size: 18px; font-weight: 600; margin-top: 2px; } /* ─── List thin (dashboard) ──────────────────── */ .list-thin { display: flex; flex-direction: column; gap: 2px; } .list-thin-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .list-thin-item:last-child { border-bottom: none; } .list-thin-item .meta { color: var(--text-dim); font-size: 12px; } .list-thin-empty { color: var(--text-faint); padding: 16px 0; font-size: 14px; } /* ─── Buttons ────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); border: 1px solid var(--border); font-weight: 500; font-size: 14px; transition: background 0.1s, border-color 0.1s, transform 0.05s; } .btn:hover { background: #f1f4f5; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--primary); color: white; border-color: var(--primary); } .btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); } .btn.ghost:hover { background: #f1f4f5; color: var(--text); } .btn.danger { color: var(--danger); border-color: #fecaca; } .btn.danger:hover { background: #fef2f2; } .btn.small { padding: 5px 10px; font-size: 13px; } .file-btn { cursor: pointer; } .icon-btn { background: transparent; border: none; color: var(--text-dim); padding: 6px; border-radius: 6px; font-size: 16px; cursor: pointer; } .icon-btn:hover { background: #f1f4f5; color: var(--text); } /* ─── Filter bar ─────────────────────────────── */ .filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .filter-bar input, .filter-bar select { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .filter-bar input[type="search"] { flex: 1; min-width: 200px; } /* ─── Data table ─────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th, .data-table td { padding: 12px 20px; text-align: left; border-bottom: 1px solid var(--border); } .data-table th { font-size: 12px; font-weight: 500; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; background: #fafbfc; } .data-table th.sortable-col { cursor: pointer; user-select: none; position: relative; transition: background 0.1s, color 0.1s; } .data-table th.sortable-col:hover { background: #f1f4f5; color: var(--text); } .data-table th .sort-ind { display: inline-block; width: 12px; margin-left: 4px; color: var(--text-faint); font-size: 10px; } .data-table th.sortable-col:not(.sorted-asc):not(.sorted-desc) .sort-ind::after { content: '↕'; opacity: 0.35; } .data-table th.sorted-asc { color: var(--primary-dark); background: var(--primary-soft); } .data-table th.sorted-asc .sort-ind::after { content: '↑'; color: var(--primary-dark); opacity: 1; } .data-table th.sorted-desc { color: var(--primary-dark); background: var(--primary-soft); } .data-table th.sorted-desc .sort-ind::after { content: '↓'; color: var(--primary-dark); opacity: 1; } .data-table tbody tr:hover { background: #fafbfc; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; } .row-actions { display: flex; gap: 4px; justify-content: flex-end; } .status-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; white-space: nowrap; } .status-paid { background: #dcfce7; color: #15803d; } .status-unpaid { background: #fef3c7; color: #b45309; } .status-overdue { background: #fee2e2; color: #b91c1c; } .status-draft { background: #e2e8f0; color: #475569; } .status-unsent { background: #e0e7ff; color: #4338ca; } /* File-attachment thumbnails — incident photos/PDFs + client companion card */ .attach-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; } .attach-tile { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); cursor: pointer; flex: none; padding: 0; } .attach-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .attach-tile.pdf { display: grid; place-items: center; font-size: 10px; line-height: 1.2; color: var(--text-dim); text-align: center; padding: 4px; } .attach-tile.pdf .ico { font-size: 22px; } .attach-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; } /* ─── Empty state ────────────────────────────── */ .empty { text-align: center; padding: 60px 20px; color: var(--text-faint); font-size: 14px; } /* ─── Forms ──────────────────────────────────── */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); font-weight: 500; } .form-grid .span-2 { grid-column: span 2; } /* Fixed-column rows that can sit alongside (or replace) a .form-grid. Re-applies the form-grid label/input styling so they look identical despite living in a separate grid container. Used on the note modal to put Date/Start/End in a 3-up row, KM/Notes in a 2-up row, etc. */ .form-row { display: grid; gap: 14px 12px; margin-top: 14px; } .form-row-3 { grid-template-columns: repeat(3, 1fr); } .form-row-2 { grid-template-columns: repeat(2, 1fr); } .form-row label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); font-weight: 500; } .form-row input, .form-row select, .form-row textarea { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 400; transition: border-color 0.1s; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* On narrow viewports, fall back to single-column to avoid cramped inputs. */ @media (max-width: 540px) { .form-row-3, .form-row-2 { grid-template-columns: 1fr; } } .form-grid input, .form-grid select, .form-grid textarea { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 400; transition: border-color 0.1s; } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .form-grid textarea { resize: vertical; min-height: 70px; } /* Small leading icon on a form-field label (e.g. KM driven, notes time). */ .field-ico { font-size: 13px; margin-right: 1px; } /* Stacked field label used outside the form-grid (e.g. the feedback modal). Mirrors .form-grid label + its inputs so it looks native instead of the unstyled, cramped default. */ .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); font-weight: 500; margin-bottom: 14px; } .field input, .field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 400; transition: border-color 0.1s; } .field textarea { resize: vertical; min-height: 110px; font-family: inherit; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* "View PDF" link shown in the service-agreement preview when the upload is a PDF (an can't render one). */ .agreement-pdf-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--primary-dark); font-weight: 600; font-size: 14px; } .agreement-pdf-link:hover { border-color: var(--primary); } .toggle-label { flex-direction: row !important; align-items: center; justify-content: space-between; background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-weight: 500; color: var(--text) !important; } .toggle-label input { width: auto; } .hint { font-size: 13px; color: var(--text-dim); margin: 8px 0 0; } /* ─── "Essential" client fields ────────────────────────────────── Fields that unlock Supportal features (invoicing, NDIS exports, etc.) get a colored border + faint amber tint so users notice them. The intro hint at the top of the modal explains the convention. */ .essential-hint { background: linear-gradient(135deg, #fef3c7, #fef9e7); border: 1px solid #f59e0b; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: #78350f; margin: 0 0 18px; line-height: 1.5; } body.dark .essential-hint { background: linear-gradient(135deg, #422006, #1c1917); color: #fbbf24; border-color: #f59e0b; } .essential-field { position: relative; border-radius: var(--radius-sm); padding: 12px 12px 10px !important; background: #fffbeb; box-shadow: inset 0 0 0 2px #f59e0b; } body.dark .essential-field { background: rgba(245, 158, 11, 0.08); box-shadow: inset 0 0 0 2px #f59e0b; } .essential-field > input, .essential-field > select, .essential-field > textarea { background: var(--surface); } .essential-block { border-radius: var(--radius-sm); padding: 12px 14px 14px; background: #fffbeb; box-shadow: inset 0 0 0 2px #f59e0b; margin: 8px 0; } /* Data security card — bulleted explanation of how notes are stored. */ .security-list { margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; } .security-list li { padding-left: 4px; } .security-list code { background: var(--bg); padding: 1px 6px; border-radius: 4px; font-size: 12px; } /* Service agreement scan preview (client modal) */ .agreement-photo-block { display: flex; flex-direction: column; gap: 10px; } .agreement-photo-preview { width: 100%; min-height: 100px; max-height: 240px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .agreement-photo-preview img { max-width: 100%; max-height: 240px; display: block; } /* Service agreement: NDIS codes mirror (read-only summary of client's codes) */ .agree-ndis-block { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin: 12px 0; } .agree-ndis-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .agree-ndis-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .agree-ndis-empty { color: var(--text-faint); font-size: 13px; font-style: italic; } .agree-goals-list { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--text); } .agree-goals-list li { margin: 3px 0; } .agree-goals-list li.agree-ndis-empty { list-style: none; margin-left: -20px; } .agree-ndis-row { display: flex; gap: 12px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; } .agree-ndis-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--primary-dark); flex-shrink: 0; } body.dark .agree-ndis-code { color: var(--primary); } .agree-ndis-meta { flex: 1; min-width: 0; } .agree-ndis-rate { font-size: 12px; color: var(--text-dim); margin-top: 2px; } /* ─── Single-line stacked-bar breakdown ─── */ .stack-bar { display: flex; height: 36px; border-radius: 8px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); gap: 1px; } .stack-seg { height: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; color: white; font-size: 12px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.25); min-width: 0; overflow: hidden; white-space: nowrap; } .stack-seg .seg-ico { font-size: 13px; } .stack-seg .seg-pct { font-size: 11px; } .stack-legend { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .stack-legend-item { display: flex; align-items: center; gap: 10px; } .stack-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .stack-icon { display: inline-block; width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; line-height: 1; } .stack-legend-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .stack-legend-amt { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } /* ─── Address autocomplete (Nominatim) ─── */ .addr-ac-wrap { position: relative; display: block; width: 100%; } /* The wrapping div breaks the natural flex-stretch parent → input chain in .form-grid label, so the input would otherwise collapse to its default (~150px). Force full-width here. box-sizing keeps padding inside. */ .addr-ac-wrap > input { width: 100%; box-sizing: border-box; } .addr-ac-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; } .addr-ac-item { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 10px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); white-space: normal; /* let long addresses wrap to two lines */ line-height: 1.4; } .addr-ac-item:hover { background: var(--primary-soft); color: var(--primary-dark); } body.dark .addr-ac-item:hover { color: var(--primary); } .addr-ac-item:last-child { border-bottom: none; } .addr-ac-empty { padding: 10px 12px; font-size: 13px; color: var(--text-faint); font-style: italic; } .addr-ac-use-typed { background: var(--primary-soft) !important; color: var(--primary-dark) !important; font-size: 13px !important; border-bottom: 1px solid var(--primary) !important; } .addr-ac-use-typed strong { color: var(--text); } body.dark .addr-ac-use-typed { color: var(--primary) !important; } body.dark .addr-ac-use-typed strong { color: var(--text); } .addr-ac-hint { padding: 8px 12px; font-size: 11px; color: var(--text-faint); background: var(--bg); border-top: 1px solid var(--border); } body.dark .essential-block { background: rgba(245, 158, 11, 0.08); } .mt { margin-top: 14px; } .sub-h { margin: 22px 0 10px; color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } /* ─── Modals ─────────────────────────────────── */ .modal { position: fixed; inset: 0; background: rgba(15, 30, 45, 0.4); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .modal[hidden] { display: none; } .modal-card { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); padding: 22px; margin: auto; } .modal-card.wide { max-width: 720px; } .modal-card.narrow { max-width: 360px; } .modal-card.pdf-preview { max-width: 900px; width: 100%; height: calc(100vh - 80px); display: flex; flex-direction: column; padding: 18px 18px 14px; } .pdf-preview-frame { flex: 1; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #f5f7f8; min-height: 0; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .x { background: transparent; border: none; color: var(--text-dim); font-size: 18px; padding: 4px 8px; border-radius: 6px; } .x:hover { background: #f1f4f5; color: var(--text); } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } /* Vertical action stack — used by the shift modal so the Complete-shift hero button + supporting buttons all fit within the modal width on any screen and read as a clear hierarchy top→bottom. */ .modal-actions-stacked { flex-direction: column; align-items: stretch; gap: 8px; } .modal-actions-stacked .btn { width: 100%; } .shift-action-group { display: flex; flex-direction: column; gap: 8px; } .shift-action-subprompt { padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); } .shift-action-prompt { font-size: 13px; color: var(--text-dim); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .modal-actions-stacked .btn.ghost-danger { background: transparent; color: var(--danger); border: 1px solid #fca5a5; } .modal-actions-stacked .btn.ghost-danger:hover { background: #fee2e2; } /* Hero button — visually loudest action in a stacked modal. */ .btn-hero { padding: 18px 20px !important; font-size: 16px !important; font-weight: 700 !important; display: flex !important; align-items: center; gap: 14px; text-align: left; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border: none; color: white; box-shadow: 0 4px 14px rgba(15, 157, 142, 0.35); min-height: 64px; } .btn-hero:hover { box-shadow: 0 6px 20px rgba(15, 157, 142, 0.45); filter: brightness(1.05); } .btn-hero-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); display: grid; place-items: center; font-size: 20px; font-weight: 800; flex-shrink: 0; } .btn-hero-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; } .btn-hero-title { font-size: 16px; font-weight: 700; } .btn-hero-sub { font-size: 12.5px; font-weight: 500; opacity: 0.85; } /* ─── Line items (invoice) ───────────────────── */ .line-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .line-row { background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; position: relative; } .line-row .li-top { display: grid; grid-template-columns: 160px 1fr; gap: 8px; margin-bottom: 8px; } .line-row .li-bot { display: grid; grid-template-columns: 130px 80px 80px 100px 1fr; gap: 8px; align-items: center; } .line-row label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .line-row input, .line-row select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 14px; color: var(--text); text-transform: none; letter-spacing: normal; } .line-row .line-total { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--text); align-self: end; padding-bottom: 6px; } .line-row .remove-line { position: absolute; top: 6px; right: 8px; background: transparent; border: none; color: var(--text-faint); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .line-row .remove-line:hover { color: var(--danger); background: white; } /* ─── Totals ─────────────────────────────────── */ .totals { margin: 18px 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; } .totals > div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--text-dim); } .totals > div.grand { font-size: 18px; font-weight: 600; color: var(--text); margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); } /* ─── Clients grid ───────────────────────────── */ .client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; } .client-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; cursor: pointer; transition: border-color 0.15s, transform 0.08s, box-shadow 0.15s; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-height: 220px; } .client-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .client-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } .client-avatar { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; display: grid; place-items: center; font-weight: 700; font-size: 20px; letter-spacing: 0.5px; overflow: hidden; } .client-avatar.has-photo { background: var(--border); } .client-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .client-photo-row { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; } .client-photo-preview { width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%; background: var(--bg); border: 1px dashed var(--border); display: grid; place-items: center; overflow: hidden; color: var(--text-dim); font-size: 12px; } .client-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .client-photo-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .profile-photo-wrap { display: flex; justify-content: center; margin-bottom: 16px; } .profile-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .client-card-title { flex: 1; min-width: 0; } .client-name { font-weight: 600; font-size: 19px; line-height: 1.2; } .client-sub { color: var(--text-dim); font-size: 13px; margin-top: 4px; } .client-info-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); margin-bottom: 14px; } .client-info-list .info-row { display: flex; gap: 8px; } .client-info-list .info-row .label { width: 80px; flex-shrink: 0; font-weight: 500; } .client-info-list .info-row .value { color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .client-trend { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--primary-soft); border-radius: 8px; margin-bottom: 14px; } .client-trend-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; color: var(--primary-dark); } .client-trend-text { font-size: 12.5px; color: var(--text); line-height: 1.45; } .client-card.is-birthday { border-color: #fcd34d; box-shadow: 0 0 0 2px #fde68a, var(--shadow-sm); } .client-birthday-banner { margin: -20px -20px 14px; padding: 6px 16px; background: linear-gradient(135deg, #fef3c7, #ffedd5); color: #92400e; font-size: 12.5px; font-weight: 600; text-align: center; border-bottom: 1px solid #fcd34d; } .client-birthday-cake { font-size: 18px; } .client-stats { display: flex; gap: 0; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); } .client-stats > div { flex: 1; text-align: center; padding: 0 4px; } .client-stats > div + div { border-left: 1px solid var(--border); } .client-stats strong { color: var(--text); font-size: 18px; display: block; font-weight: 700; margin-bottom: 2px; } .client-card-meta { color: var(--text-dim); font-size: 12px; } .client-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .client-tag-row .tag-mini { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; background: var(--primary-soft); color: var(--primary-dark); font-size: 11px; font-weight: 500; } /* ─── Notes list ─────────────────────────────── */ .notes-list { display: flex; flex-direction: column; gap: 12px; } .note-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: border-color 0.1s, box-shadow 0.1s; } .note-card.expanded { border-color: var(--primary-soft); box-shadow: var(--shadow); } .note-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; cursor: pointer; user-select: none; } .note-head-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; } .note-head-info { flex: 1; min-width: 0; } .note-head-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .note-toggle { font-size: 14px; color: var(--text-dim); padding: 6px 8px; background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: transform 0.15s, color 0.1s, background 0.1s; } .note-toggle:hover { background: #f1f4f5; color: var(--text); } .note-card.expanded .note-toggle { transform: rotate(180deg); color: var(--primary); } .note-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .note-mood-badge { width: 32px; height: 32px; display: grid; place-items: center; background: var(--primary-soft); border-radius: 50%; font-size: 16px; } .scheduled-card { border-left: 4px solid #94a3b8; background: #f8fafc; } .scheduled-card.note-card .note-mood-badge.scheduled-badge { background: #e2e8f0; color: #475569; } .scheduled-pill { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; vertical-align: middle; } .scheduled-pill.status-scheduled { background: #e2e8f0; color: #475569; } .scheduled-pill.status-ready { background: #fef3c7; color: #b45309; } .note-client { font-weight: 600; } .note-date { color: var(--text-dim); font-size: 13px; } .note-body { font-size: 14px; color: var(--text); white-space: pre-wrap; } .note-section { margin-top: 10px; } .note-section-label { font-size: 12px; color: var(--text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .note-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .note-tag { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; background: #f1f4f5; color: var(--text-dim); } .note-tag.like { background: #dcfce7; color: #15803d; } .note-tag.trigger { background: #fee2e2; color: #b91c1c; } .note-tag.goal { background: var(--primary-soft); color: var(--primary-dark); font-weight: 500; } .note-tag.cancelled { background: #fee2e2; color: #b91c1c; font-weight: 600; } /* ─── Cancellation block ─────────────────────── */ .cancellation-block { margin: 12px 0; padding: 14px 16px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--radius-sm); } .cancellation-toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .cancellation-toggle input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; accent-color: #d97706; flex-shrink: 0; } .cancellation-title { font-weight: 600; color: #9a3412; font-size: 14.5px; line-height: 1.3; } .cancellation-sub { font-size: 12.5px; color: #b45309; margin-top: 2px; line-height: 1.4; } .cancellation-active-banner { margin-top: 10px; padding: 10px 12px; background: #fef3c7; border-radius: 6px; font-size: 13px; color: #92400e; } .note-cancelled #noteOptionalSections { opacity: 0.4; pointer-events: none; } /* ─── Auto-finalise banner on dashboard ──────── */ .auto-finalise-banner { display: flex; gap: 16px; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #fef3c7, #fef9c3); border: 1px solid #fcd34d; flex-wrap: wrap; } .auto-finalise-text { display: flex; flex-direction: column; gap: 2px; color: #92400e; } .auto-finalise-text strong { font-size: 15px; } .auto-finalise-text span { font-size: 13.5px; } .auto-finalise-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ─── Trial banner on dashboard ──────────────── */ .trial-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, var(--primary-soft), #e6fff8); border: 1px solid var(--primary); flex-wrap: wrap; } .trial-banner-text { display: flex; flex-direction: column; gap: 2px; color: var(--primary-dark); } .trial-banner-text strong { font-size: 15px; } .trial-banner-text span { font-size: 13.5px; } /* ─── Full-screen overlays (auth / paywall / setup) ─── */ .fullscreen-overlay { position: fixed; inset: 0; background: linear-gradient(135deg, #f5f7f8 0%, #e6f5f3 100%); display: grid; place-items: center; padding: 24px; z-index: 1000; overflow-y: auto; } /* The global [hidden] { display: none !important; } in the reset above handles the cascade override. No per-class rule needed here. */ .fullscreen-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 36px 32px; width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12); text-align: center; } .fullscreen-logo { width: 160px; max-width: 70%; height: auto; margin: 0 auto 16px; display: block; } .fullscreen-card h1 { font-size: 22px; margin-bottom: 10px; } .fullscreen-card p { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0 0 14px; } .fullscreen-card code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 12.5px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .setup-steps { text-align: left; padding-left: 20px; color: var(--text); font-size: 14px; line-height: 1.65; margin: 14px 0; } .setup-steps li { margin-bottom: 6px; } /* ─── Auth screen ─── */ .auth-card { max-width: 420px; padding: 32px 28px; } .auth-tagline { color: var(--text-dim); font-size: 13.5px; margin-bottom: 20px; } .auth-tabs { display: flex; gap: 4px; background: var(--bg); padding: 4px; border-radius: 10px; margin-bottom: 20px; } .auth-tab { flex: 1; background: transparent; border: none; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-dim); cursor: pointer; transition: background 0.15s, color 0.15s; } .auth-tab:hover { color: var(--text); } .auth-tab.active { background: var(--surface); color: var(--primary-dark); box-shadow: var(--shadow-sm); } .auth-form { display: flex; flex-direction: column; gap: 12px; text-align: left; } .auth-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-dim); font-weight: 500; } .auth-form input { padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 15px; color: var(--text); } .auth-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .auth-submit { margin-top: 8px; padding: 12px 16px; font-size: 14.5px; font-weight: 600; } .auth-submit:disabled { opacity: 0.6; cursor: wait; } .auth-error { background: #fee2e2; color: #b91c1c; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-top: 4px; } .auth-fineprint { font-size: 12px; margin-top: 8px; text-align: center; color: var(--text-faint); } .auth-link { display: inline-block; color: var(--primary); font-size: 13px; margin-top: 8px; text-align: center; } .auth-legal { font-size: 12px; margin-top: 16px; text-align: center; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: 14px; } .auth-legal a { color: var(--primary); font-weight: 500; } /* ─── Paywall screen ─── */ .paywall-card { max-width: 480px; } .paywall-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--bg); padding: 16px; border-radius: 12px; margin: 18px 0; } .paywall-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; } .paywall-stats strong { font-size: 22px; color: var(--primary-dark); font-weight: 700; } .paywall-stats span { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; } .paywall-cta { width: 100%; padding: 14px 16px; font-size: 15px; font-weight: 600; } .paywall-stub-hint { background: #fef3c7; color: #92400e; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; margin-top: 12px; } .paywall-actions { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } /* ─── Account card on Settings ─── */ .account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .account-grid > div { display: flex; flex-direction: column; gap: 4px; } .account-label { font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .account-value { font-size: 15px; color: var(--text); font-weight: 500; word-break: break-word; } .account-status-pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; } .account-status-pill.status-trialing { background: var(--primary-soft); color: var(--primary-dark); } .account-status-pill.status-active { background: #dcfce7; color: #15803d; } .account-status-pill.status-past_due, .account-status-pill.status-canceled, .account-status-pill.status-incomplete { background: #fee2e2; color: #b91c1c; } .gcal-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; } .gcal-status-pill.connected { background: #dcfce7; color: #15803d; } .gcal-status-pill.disconnected { background: #f1f4f5; color: var(--text-dim); } .gcal-status-pill.error { background: #fee2e2; color: #b91c1c; } .gcal-status-pill.syncing { background: #e0e7ff; color: #4338ca; } /* While a full-screen overlay is visible, hide the app chrome. */ body.has-overlay .topbar, body.has-overlay .sidebar, body.has-overlay .sidebar-backdrop, body.has-overlay .main { display: none !important; } @media (max-width: 540px) { .paywall-stats { grid-template-columns: 1fr; } } /* ─── Auto-backup history ────────────────────── */ .auto-backup-badge { font-size: 13px; color: var(--text-dim); align-self: center; } .auto-backup-badge strong { color: var(--primary-dark); font-weight: 600; } .auto-backup-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 380px; overflow-y: auto; } .auto-backup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; } .auto-backup-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .auto-backup-meta strong { font-size: 13.5px; font-weight: 500; color: var(--text); } .auto-backup-ago { font-size: 11.5px; color: var(--text-dim); } .auto-backup-actions { display: flex; gap: 6px; flex-wrap: wrap; } .auto-backup-actions .btn.small { padding: 4px 10px; font-size: 12px; } /* ─── Tag input ──────────────────────────────── */ .tag-section { margin-top: 14px; } .tag-section.flat { margin-top: 4px; } .tag-section.in-block { margin-top: 0; } .tag-section.in-block .tag-input-wrap input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 15px; font-family: inherit; line-height: 1.5; transition: border-color 0.15s ease; } .tag-section.in-block .tag-input-wrap input:focus { outline: none; border-color: var(--primary); } .tag-section.in-block .tag-input-wrap input::placeholder { color: #a8b2c1; } .tag-section.in-block .tag-chips { margin-top: 10px; } .tag-section > label { display: block; font-size: 13px; color: var(--text-dim); font-weight: 500; margin-bottom: 6px; } /* ─── Note block (What we did / Observations) ── */ .note-block { margin-top: 16px; background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .note-block:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .note-block-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .note-block-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; } .note-block-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .note-block-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.35; } .note-block-area { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 15px; font-family: inherit; line-height: 1.5; resize: vertical; min-height: 92px; transition: border-color 0.15s ease; } .note-block-area:focus { outline: none; border-color: var(--primary); } /* "What we did today" — three short keyword inputs in a row with chip-style suggestions pulled from this client's past notes. */ .what-tag-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .what-tag-input { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 15px; font-family: inherit; width: 100%; box-sizing: border-box; transition: border-color 0.15s ease; } .what-tag-input:focus { outline: none; border-color: var(--primary); } .what-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .what-suggestion-chip { display: inline-flex; align-items: stretch; border-radius: 14px; background: var(--primary-soft); border: 1px solid transparent; overflow: hidden; user-select: none; } .what-suggestion-chip:hover { border-color: var(--primary); } .what-suggestion-chip .wsc-add { padding: 5px 8px 5px 12px; background: none; border: none; color: var(--primary-dark); font-size: 12px; font-weight: 600; cursor: pointer; } .what-suggestion-chip .wsc-x { padding: 0 9px 0 5px; background: none; border: none; border-left: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); color: var(--primary-dark); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0.6; } .what-suggestion-chip .wsc-x:hover { opacity: 1; color: var(--danger); } body.dark .what-suggestion-chip .wsc-add, body.dark .what-suggestion-chip .wsc-x { color: var(--primary); } @media (max-width: 540px) { .what-tag-row { grid-template-columns: 1fr; } } .what-tag-cell { position: relative; } .what-tag-remove { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; font-size: 16px; line-height: 1; color: var(--text-faint); cursor: pointer; padding: 4px 6px; border-radius: 50%; } .what-tag-remove:hover { color: var(--danger); background: var(--bg); } .what-tag-cell .what-tag-input { padding-right: 28px; } .what-tag-controls { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .btn.small { padding: 4px 10px; font-size: 12px; } /* Travel-rules info button + the rules block it toggles */ .travel-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; vertical-align: middle; } .travel-info-btn:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); } .travel-rules-block { background: color-mix(in srgb, var(--accent) 12%, var(--surface) 88%); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border) 60%); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 8px; font-size: 13px; line-height: 1.5; } .travel-rules-block ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .travel-rules-block a { color: var(--primary-dark); } body.dark .travel-rules-block { background: color-mix(in srgb, var(--accent) 16%, var(--surface) 84%); } body.dark .travel-rules-block a { color: var(--primary); } .note-block-area::placeholder { color: #a8b2c1; } /* ─── Full-width label (outside grid) ────────── */ .full-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); font-weight: 500; margin-bottom: 4px; } .full-label textarea, .full-label input { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 400; font-size: 15px; font-family: inherit; resize: vertical; } .full-label textarea:focus, .full-label input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* ─── Professional contacts list ─────────────── */ .contact-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .contact-row { background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; position: relative; } .contact-row .remove-contact { position: absolute; top: 6px; right: 8px; background: transparent; border: none; color: var(--text-faint); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .contact-row .remove-contact:hover { color: var(--danger); background: white; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .contact-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); font-weight: 500; } .contact-grid label.span-2 { grid-column: span 2; } .contact-grid input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); } /* ─── NDIS items list (client form) ──────────── */ .ndis-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .ndis-row { background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 12px 12px 12px; position: relative; } .ndis-row .remove-ndis { position: absolute; top: 6px; right: 8px; background: transparent; border: none; color: var(--text-faint); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .ndis-row .remove-ndis:hover { color: var(--danger); background: white; } .ndis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ndis-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); font-weight: 500; } .ndis-grid label.span-2 { grid-column: span 2; } .ndis-grid input, .ndis-grid select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); } .ndis-rate-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-weight: 400; } .ndis-rate-hint.over-max { color: #b91c1c; font-weight: 500; } /* ─── Compact NDIS billing-code lines (client modal) ─── */ #cliNdisItemsList { display: flex; flex-direction: column; gap: 6px; } .ndis-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px 9px 12px; cursor: pointer; transition: border-color 0.1s, background 0.1s; } .ndis-line:hover { border-color: var(--primary); background: var(--primary-soft); } .ndis-line:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .ndis-line-info { min-width: 0; } .ndis-line-title { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ndis-line-sub { display: flex; gap: 8px; align-items: center; margin-top: 2px; flex-wrap: wrap; } .ndis-line-day { font-size: 11px; font-weight: 600; color: var(--primary-dark); background: var(--primary-soft); padding: 1px 7px; border-radius: 99px; } .ndis-line-code { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .ndis-line-rate { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; } .ndis-line-rate.over-max { color: #b91c1c; } .ndis-line-unit { font-size: 11px; font-weight: 500; color: var(--text-dim); } .ndis-line .remove-ndis { background: transparent; border: none; color: var(--text-faint); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1; } .ndis-line .remove-ndis:hover { color: var(--danger); background: var(--surface); } .ndis-empty { margin: 4px 0; } /* The single-code editor stacks above the client modal */ #ndisItemModal { z-index: 110; } /* Inline work-% editor in the expenses table. Fixed-width column so changing pct from 100 doesn't widen the cell and shift the input. The note row below is always rendered (text varies) so vertical layout doesn't shift either. */ .exp-pct-col, .exp-pct-cell { width: 130px; min-width: 130px; white-space: nowrap; } .exp-pct-row { display: flex; justify-content: flex-end; align-items: center; gap: 4px; } .exp-pct-input { width: 64px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; text-align: right; } .exp-pct-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); } .work-pct-note { font-size: 11px; color: var(--text-dim); font-weight: 400; display: inline-block; margin-top: 2px; } @keyframes overCapFlash { 0%, 100% { background: var(--surface); box-shadow: none; } 20%, 60% { background: #fee2e2; box-shadow: 0 0 0 3px #fca5a5; } } .ndis-row.over-cap-flash, .ndis-line.over-cap-flash { animation: overCapFlash 2.4s ease; } /* ─── Incident block ─────────────────────────── */ .incident-block { margin-top: 10px; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-sm); padding: 14px; } .sub-h-warn { color: #b91c1c !important; } .incident-badge { display: inline-block; background: #dc2626; color: white; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 8px; } .incident-display { margin-top: 10px; background: #fef2f2; border-left: 3px solid #dc2626; border-radius: 4px; padding: 10px 12px; } .incident-display .incident-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #991b1b; font-weight: 500; margin-bottom: 6px; } .incident-display .incident-meta span { text-transform: capitalize; } /* ─── AI trend summary ──────────────────────── */ .ai-summary-block { background: linear-gradient(135deg, #f0fdfa, #ecfeff); border: 1px solid #bae6fd; border-radius: var(--radius); padding: 18px 20px; } .ai-summary-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px 16px; } .ai-summary-empty-icon { font-size: 28px; width: 56px; height: 56px; background: var(--primary-soft); color: var(--primary-dark); border-radius: 50%; display: grid; place-items: center; } .ai-summary-empty-text { color: var(--text-dim); font-size: 14px; max-width: 360px; line-height: 1.5; } .ai-summary-text { font-size: 15px; line-height: 1.6; color: var(--text); white-space: pre-wrap; } .ai-summary-text p { margin: 0 0 10px; } .ai-summary-text p:last-child { margin-bottom: 0; } .ai-summary-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #bae6fd; font-size: 12px; color: var(--text-dim); } .ai-summary-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; color: var(--text-dim); font-size: 14px; } .ai-summary-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .ai-summary-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 10px; } /* ─── Profile modal: card scrolls internally so the action buttons stick to the top of the modal "bubble", not the top of the page. ─── */ #profileModal { overflow: hidden; align-items: center; padding: 20px 16px; } #profileModal .modal-card { max-height: calc(100vh - 40px); display: flex; flex-direction: column; padding: 0; overflow: hidden; } #profileModal .modal-head { padding: 20px 22px 12px; flex-shrink: 0; margin: 0; } #profileModal #profileBody { overflow-y: auto; flex: 1; min-height: 0; padding: 0 22px 22px; } /* ─── Profile sections ───────────────────────── */ .profile-actions-top { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 5; } .profile-actions-top .btn { flex: 1; min-width: 0; } .profile-meta-list { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; font-size: 14px; } .profile-meta-list dt { color: var(--text-dim); font-weight: 500; } .profile-meta-list dd { margin: 0; } .profile-contacts { display: flex; flex-direction: column; gap: 8px; } .profile-contact-card { background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; } .profile-contact-role { font-weight: 600; font-size: 13px; color: var(--primary-dark); margin-bottom: 2px; } .profile-contact-meta { color: var(--text-dim); font-size: 13px; } .profile-goals-list { padding-left: 18px; margin: 0; font-size: 14px; } .profile-goals-list li { margin-bottom: 4px; } .tag-input-wrap { position: relative; } .tag-input-wrap input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .tag-input-wrap input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .tag-suggest { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); margin-top: 4px; z-index: 10; max-height: 180px; overflow-y: auto; display: none; } .tag-suggest.show { display: block; } .tag-suggest-item { padding: 8px 12px; cursor: pointer; font-size: 14px; } .tag-suggest-item:hover, .tag-suggest-item.active { background: var(--primary-soft); } .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 13px; } .tag-chip.like { background: #dcfce7; color: #15803d; } .tag-chip.trigger { background: #fee2e2; color: #b91c1c; } .tag-chip button { background: transparent; border: none; font-size: 14px; padding: 0 0 0 2px; cursor: pointer; color: inherit; opacity: 0.6; } .tag-chip button:hover { opacity: 1; } /* ─── Shift summary (inside note modal) ──────── */ .shift-summary { margin: 12px 0 4px; padding: 10px 14px; background: var(--primary-soft); border-radius: var(--radius-sm); font-size: 14px; color: var(--primary-dark); font-weight: 500; display: flex; gap: 16px; flex-wrap: wrap; } .shift-summary strong { font-weight: 700; } .shift-summary .billed-pill { display: inline-block; padding: 2px 8px; background: white; border-radius: 99px; font-size: 12px; } .field-disabled { opacity: 0.55; pointer-events: none; } .field-disabled select, .field-disabled input { background: var(--bg) !important; cursor: not-allowed; } .color-picker-label { display: flex; flex-direction: column; } .color-palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 6px; margin-top: 8px; max-width: 460px; } .color-swatch { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease; padding: 0; position: relative; } .color-swatch:hover { transform: scale(1.08); } .color-swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px white inset; } .color-swatch.color-swatch-custom { background: conic-gradient(from 0deg, #FFB3BA, #FFDFBA, #FFFFBA, #BAFFC9, #BAE1FF, #C9C9FF, #FFC6FF, #FFB3BA); color: var(--text); font-weight: 700; font-size: 20px; display: grid; place-items: center; line-height: 1; } .color-swatch.color-swatch-custom.selected { color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } .color-picker-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .color-picker-row input[type="color"] { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .color-picker-row .btn.small { padding: 6px 10px; font-size: 12px; } .color-picker-hint { font-size: 12px; color: var(--text-dim); } /* ─── Per-client colour palette on the Clients page ─── */ .client-color-row { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .client-color-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; } .client-color-palette { display: flex; flex-wrap: wrap; gap: 5px; } .client-color-swatch { width: 18px; height: 18px; border-radius: 5px; border: 2px solid transparent; padding: 0; cursor: pointer; transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .client-color-swatch:hover { transform: scale(1.15); } .client-color-swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; } .client-color-swatch.client-color-custom { background: conic-gradient(from 0deg, #FFB3BA, #FFDFBA, #FFFFBA, #BAFFC9, #BAE1FF, #C9C9FF, #FFC6FF, #FFB3BA); color: var(--text); font-weight: 700; font-size: 13px; line-height: 1; display: grid; place-items: center; } .client-color-swatch.client-color-auto { background: var(--bg); color: var(--text-dim); font-size: 12px; line-height: 1; display: grid; place-items: center; } /* ─── KM import modal ───────────────────────── */ .km-import-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 16px; } .km-import-status { font-size: 13px; color: var(--text-dim); } .km-import-status.error { color: #b91c1c; } .km-import-status.success { color: #15803d; } .km-import-table-wrap { max-height: 380px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; } .km-import-table-wrap .data-table { margin: 0; } .km-import-table-wrap .data-table th, .km-import-table-wrap .data-table td { font-size: 12.5px; padding: 6px 8px; } .km-import-table-wrap tr.skip td { opacity: 0.4; } .km-import-table-wrap tr.invalid td { background: #fee2e2; } /* ─── Day-of-week checkboxes (shift modal) ───── */ .day-checkboxes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; } .day-checkboxes > label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--surface); transition: border-color 0.15s, background 0.15s; font-size: 12px; } .day-checkboxes > label:hover { border-color: var(--primary); } .day-checkboxes > label > span { font-weight: 600; color: var(--text-dim); } .day-checkboxes > label > input[type="checkbox"] { accent-color: var(--primary); } .day-checkboxes > label:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); } .day-checkboxes > label:has(input:checked) > span { color: var(--primary-dark); } /* ─── Goals checklist on note modal ─────────── */ .goals-checklist { display: flex; flex-direction: column; gap: 6px; } .goal-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 14px; line-height: 1.4; transition: border-color 0.15s, background 0.15s; } .goal-check:hover { border-color: var(--primary); } .goal-check input[type="checkbox"] { margin-top: 2px; accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; } .goal-check.checked { background: var(--primary-soft); border-color: var(--primary); } .goal-check.checked .goal-text { color: var(--primary-dark); font-weight: 500; } .goal-add-row { display: flex; gap: 8px; margin-top: 10px; } .goal-add-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; } .goal-add-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .goal-add-row .btn { flex-shrink: 0; } .shift-started-banner { margin: 12px 0 8px; padding: 12px 14px; background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.4; } /* ─── Expenses: "things you can claim" guide ── */ .claim-guide { padding: 0; overflow: hidden; } .claim-guide-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: transparent; border: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text); text-align: left; } .claim-guide-head:hover { background: var(--bg); } .claim-guide-title { font-size: 16px; } .claim-guide-chev { transition: transform 0.18s ease; color: var(--text-dim); } .claim-guide[data-open="true"] .claim-guide-chev { transform: rotate(180deg); } .claim-guide-body { padding: 0 20px 20px; } .claim-guide-body p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--text); } .claim-guide-body a { color: var(--primary); } .claim-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 14px 0 12px; } .claim-guide-section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .claim-guide-section h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; color: var(--primary-dark); } .claim-guide-section ul { padding-left: 18px; margin: 0; font-size: 13px; line-height: 1.55; color: var(--text); } .claim-guide-section li { margin-bottom: 4px; } .claim-guide-tip { background: var(--primary-soft); border-left: 3px solid var(--primary); padding: 10px 14px; border-radius: 6px; font-size: 13px; } /* ─── KM tracker: guide & method picker ──────── */ .km-guide { padding: 0; overflow: hidden; } .km-guide-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: transparent; border: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text); text-align: left; } .km-guide-head:hover { background: var(--bg); } .km-guide-title { font-size: 16px; } .km-guide-chev { transition: transform 0.18s ease; color: var(--text-dim); } .km-guide[data-open="true"] .km-guide-chev { transform: rotate(180deg); } .km-guide-body { padding: 0 20px 20px; } .km-guide-body p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--text); } .km-guide-body ul { padding-left: 18px; margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text); } .km-guide-body ul li { margin-bottom: 6px; } .km-guide-body a { color: var(--primary); } .km-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 12px; } .km-method-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .km-method-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .km-method-card-head h3 { font-size: 16px; margin: 0; font-weight: 600; } .km-method-card-tag { display: inline-block; padding: 2px 10px; background: #dcfce7; color: #15803d; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .km-method-card-tag.tag-detailed { background: #e0e7ff; color: #4338ca; } .km-guide-tip { background: var(--primary-soft); border-left: 3px solid var(--primary); padding: 10px 14px; border-radius: 6px; font-size: 13px; } .km-method-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .km-method-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .km-method-option:hover { border-color: var(--primary); } .km-method-option input[type="radio"] { margin-top: 3px; accent-color: var(--primary); width: 18px; height: 18px; flex-shrink: 0; } .km-method-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); } .km-method-option-title { font-weight: 600; font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .km-method-option-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; } .km-recommended-badge { display: inline-block; padding: 2px 8px; background: #fef3c7; color: #b45309; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; } .km-method-purpose { font-size: 13px; color: var(--text-dim); font-weight: 400; } .km-claim-summary { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; background: var(--bg); padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .km-claim-summary > div { display: flex; flex-direction: column; gap: 4px; } .km-claim-label { font-size: 12px; color: var(--text-dim); } .km-claim-summary strong { font-size: 18px; font-weight: 700; color: var(--text); } .km-claim-total strong { color: var(--primary-dark); font-size: 22px; } .km-cap-warning { color: #b91c1c; font-weight: 600; } .km-trip-type { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 500; } .km-trip-type.business { background: #dcfce7; color: #15803d; } .km-trip-type.private { background: #fef3c7; color: #92400e; } .km-trip-type.shift { background: #e0e7ff; color: #4338ca; } /* Category labels: claimable (deductible, green), reimbursed (shift, indigo), personal (grey). */ .km-trip-type.claimable { background: #dcfce7; color: #15803d; } .km-trip-type.reimbursed { background: #e0e7ff; color: #4338ca; } .km-trip-type.personal { background: #f1f5f9; color: #64748b; } /* ─── Expense receipt upload ─────────────────── */ .receipt-block { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; padding: 14px; background: var(--bg); border-radius: var(--radius-sm); border: 1px dashed var(--border); } .receipt-preview { width: 110px; height: 140px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: grid; place-items: center; color: var(--text-dim); font-size: 11px; text-align: center; padding: 6px; cursor: default; } .receipt-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .receipt-preview.has-image { cursor: pointer; } .receipt-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; flex: 1; min-width: 0; } .scan-status { font-size: 12.5px; color: var(--primary-dark); padding: 6px 10px; background: var(--primary-soft); border-radius: 6px; width: 100%; box-sizing: border-box; } .scan-status.error { color: #b91c1c; background: #fee2e2; } .scan-status.success { color: #15803d; background: #dcfce7; } .scan-status.warn { color: #92400e; background: #fef3c7; } /* ─── Client cards (profile grid + quick viewer) ─── */ .client-card-tile { display: flex; flex-direction: column; gap: 4px; align-items: center; } .client-card-tile-label { font-size: 11.5px; color: var(--text-dim); max-width: 96px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-add-row { display: flex; gap: 8px; margin-top: 10px; align-items: center; } .card-add-row input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--card, #fff); color: inherit; } .card-add-row .btn { white-space: nowrap; } .cards-viewer-client + .cards-viewer-client { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; } .cards-viewer-name { font-weight: 600; margin-bottom: 8px; } .dash-cards-btn { margin-left: auto; flex: none; } @media (max-width: 720px) { .view-head .dash-cards-btn { margin-left: 0; } } /* ─── Day summary modal ─── */ .day-summary-text { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 13.5px; line-height: 1.55; background: var(--card, #fff); color: inherit; resize: vertical; } /* ─── Emailed-receipts hint (Expenses view head) ─── */ .receipts-email-hint { margin-bottom: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; border-radius: 8px; background: var(--primary-soft); color: var(--text); } .email-copy-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--primary-dark); cursor: pointer; text-decoration: underline dotted; } .email-copy-btn:hover { text-decoration: underline; } .exp-range-inputs { display: flex; align-items: center; gap: 6px; } .exp-range-inputs input[type="date"] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; background: var(--card, #fff); color: inherit; } /* ─── Possible-duplicate expense flagging ─── */ .dup-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; font-size: 13.5px; line-height: 1.4; border-radius: 8px; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); color: var(--text); } .dup-banner.active { background: var(--primary-soft); border-color: transparent; } .dup-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .dup-badge { display: inline-block; font-size: 11px; font-weight: 600; white-space: nowrap; padding: 1px 7px; border-radius: 999px; background: rgba(245, 158, 11, 0.16); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.4); vertical-align: middle; } .receipt-row-icon { font-size: 14px; color: var(--text-dim); } @media (max-width: 540px) { .receipt-block { flex-direction: column; align-items: stretch; } .receipt-preview { width: 100%; height: 200px; } } @media (max-width: 700px) { .km-guide-grid { grid-template-columns: 1fr; } .km-method-picker { grid-template-columns: 1fr; } .km-claim-summary { grid-template-columns: 1fr; } } /* ─── Note shift meta (in card) ──────────────── */ .note-shift-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); margin-top: 4px; } .note-shift-meta strong { color: var(--text); font-weight: 600; } .note-billed { display: inline-flex; align-items: center; padding: 2px 8px; background: #dcfce7; color: #15803d; border-radius: 99px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 8px; } /* ─── Gen invoice preview ────────────────────── */ .gen-preview { margin: 16px 0; } .gen-preview-empty { padding: 24px; text-align: center; color: var(--text-faint); background: #fafbfc; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 14px; } .gen-shift-row { display: grid; grid-template-columns: 110px 1fr 90px 70px 90px; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; align-items: center; } .gen-shift-row:last-child { border-bottom: none; } .gen-shift-row .gen-num { text-align: right; font-variant-numeric: tabular-nums; } .gen-shift-head { font-size: 12px !important; color: var(--text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; background: #fafbfc; } .gen-totals { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .gen-totals > div { display: flex; justify-content: space-between; color: var(--text-dim); } .gen-totals > div.grand { font-size: 17px; color: var(--text); font-weight: 600; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; } .gen-table { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .gen-warning { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13px; } .gen-warning > div + div { margin-top: 4px; } /* ─── Mood row ───────────────────────────────── */ .mood-row { display: flex; gap: 4px; padding: 4px; background: #fafbfc; border: 1px solid var(--border); border-radius: var(--radius-sm); } .mood-btn { flex: 1; background: transparent; border: none; font-size: 22px; padding: 6px 4px 4px; border-radius: 6px; cursor: pointer; opacity: 0.45; transition: opacity 0.1s, background 0.1s; display: flex; flex-direction: column; align-items: center; gap: 2px; } .mood-btn .mood-lbl { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: lowercase; } .mood-btn:hover { opacity: 0.75; } .mood-btn.active { opacity: 1; background: var(--surface); box-shadow: var(--shadow-sm); } .mood-btn.active .mood-lbl { color: var(--primary-dark); } /* ─── Category breakdown ─────────────────────── */ .cat-breakdown { display: flex; flex-direction: column; gap: 10px; } .cat-row { display: grid; grid-template-columns: 140px 1fr 90px; gap: 12px; align-items: center; font-size: 14px; } .cat-bar-bg { background: #f1f4f5; height: 10px; border-radius: 99px; overflow: hidden; } .cat-bar { background: var(--primary); height: 100%; border-radius: 99px; } .cat-amount { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); } /* ─── Profile ────────────────────────────────── */ .profile-section { margin-bottom: 20px; } .profile-section h3 { margin-bottom: 8px; } .mood-trend { display: flex; gap: 4px; align-items: flex-end; height: 60px; } .mood-bar { flex: 1; background: var(--primary); border-radius: 3px 3px 0 0; opacity: 0.7; min-width: 8px; position: relative; } .mood-bar:hover { opacity: 1; } .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .profile-tag-list { display: flex; flex-wrap: wrap; gap: 6px; } .profile-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: 13px; } .profile-tag.like { background: #dcfce7; color: #15803d; } .profile-tag.trigger { background: #fee2e2; color: #b91c1c; } .profile-tag .count { background: rgba(0,0,0,0.08); padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 600; } /* ─── Quick add tiles ────────────────────────── */ .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .quick-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; color: var(--text); transition: border-color 0.1s, background 0.1s; } .quick-tile:hover { border-color: var(--primary); background: var(--primary-soft); } .quick-tile span { font-size: 24px; color: var(--primary); } /* ─── Export grid ────────────────────────────── */ .export-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } /* ─── Toast ──────────────────────────────────── */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1a2332; color: white; padding: 12px 20px; border-radius: 8px; box-shadow: var(--shadow-lg); z-index: 200; font-size: 14px; font-weight: 500; } /* ─── Responsive ─────────────────────────────── */ @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .stat-grid-3 { grid-template-columns: 1fr; } .row-2 { grid-template-columns: 1fr; } .year-grid { grid-template-columns: repeat(3, 1fr); } .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: span 1; } .profile-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .topbar { display: flex; } .sidebar { transform: translateX(-100%); transition: transform 0.2s; width: 280px; } .sidebar.open { transform: translateX(0); } .main { margin-left: 0; padding: 20px 16px 80px; } h1 { font-size: 22px; } .stat-value { font-size: 22px; } .data-table { font-size: 13px; } .data-table th, .data-table td { padding: 10px 12px; } .modal-card { padding: 18px; } .line-row .li-top { grid-template-columns: 1fr; gap: 6px; } .line-row .li-bot { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "d d q q" "u u r r" "t t t t"; gap: 6px; } .line-row .li-bot label:nth-child(1) { grid-area: d; } .line-row .li-bot label:nth-child(2) { grid-area: q; } .line-row .li-bot label:nth-child(3) { grid-area: u; } .line-row .li-bot label:nth-child(4) { grid-area: r; } .line-row .li-bot .line-total { grid-area: t; text-align: right; } .line-row input, .line-row select { font-size: 13px; padding: 6px 8px; } .ndis-grid { grid-template-columns: 1fr; } .ndis-grid label.span-2 { grid-column: span 1; } .cat-row { grid-template-columns: 100px 1fr 70px; } } /* ─── Status pill colour variants used in About me → Documents ─── */ .status-pill.status-ok { background: #dcfce7; color: #15803d; } .status-pill.status-warn { background: #fef3c7; color: #b45309; } .status-pill.status-danger { background: #fee2e2; color: #b91c1c; } /* ─── About me → My documents — collapsible list ─── */ .doc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); } .doc-row + .doc-row { border-top: 1px solid var(--border); } .doc-row-head { display: grid; grid-template-columns: 20px 1fr auto 14px; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: none; border: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); } .doc-row-head:hover { background: var(--bg); } .doc-row.open .doc-row-head { background: var(--bg); } .doc-row-icon { font-size: 13px; color: var(--text-dim); text-align: center; } .doc-row-title { font-weight: 500; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-row-caret { font-size: 11px; color: var(--text-faint); } .doc-row-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); } .doc-hint { font-size: 12px; color: var(--text-dim); margin: 0; line-height: 1.4; } .doc-card-grid { gap: 8px 10px; } .doc-card-grid label { font-size: 12px; } .doc-card-grid input { padding: 6px 8px; font-size: 13px; } .doc-row-file { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .doc-thumb { display: block; width: 100%; max-width: 320px; max-height: 200px; overflow: hidden; border-radius: 8px; border: 1px solid var(--border); padding: 0; background: none; cursor: pointer; } .doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .doc-file-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* "Remove from my list" — subtle danger link at the foot of an open row. */ .doc-removetype-link { display: inline-block; margin-top: 12px; padding: 4px 0; background: none; border: none; color: var(--danger, #dc2626); font-size: 13px; cursor: pointer; opacity: 0.75; } .doc-removetype-link:hover { opacity: 1; text-decoration: underline; } /* Customise the list: add-your-own row + restore-removed link. */ .doc-customize { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .doc-add-row { display: flex; gap: 8px; align-items: center; } .doc-add-row input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--card, #fff); color: inherit; } .doc-add-row .btn { white-space: nowrap; } .doc-restore-link { align-self: flex-start; background: none; border: none; color: var(--muted, #64748b); font-size: 13px; cursor: pointer; padding: 2px 0; } .doc-restore-link:hover { color: var(--text, inherit); text-decoration: underline; } @media (max-width: 560px) { .doc-row-head { grid-template-columns: 18px 1fr auto; padding: 10px 12px; } .doc-row-caret { display: none; } .doc-row-head .status-pill { font-size: 11px; padding: 2px 7px; } } /* ─── Calendar public-holiday styling ─── */ .cal-cell.cal-holiday { background: linear-gradient(180deg, rgba(220, 38, 38, 0.06), transparent 30%); } .cal-holiday-label { display: block; font-size: 10.5px; color: #b91c1c; font-weight: 600; letter-spacing: 0.02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .holiday-banner { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 0 0 12px; } .holiday-banner strong { color: #78350f; }