past the viewport regardless of overflow rules on inner scroll containers. body { overflow-x: hidden } above is the second line of defense. */ min-width: 0; } @media (min-width: 900px) { .layout { grid-template-columns: 240px 1fr; grid-template-rows: 1fr; } .topbar { display: none; } /* Sidebar pinned to the viewport with its own scroll context so the theme-toggle + sign-out always stay reachable, even when the Investments parent is expanded with all six children. */ .sidebar { display: flex; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; } main { padding: 48px 56px 80px; } } /* ─── Typography ─── */ h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0.3px; margin: 0 0 16px 0; color: var(--text); } h1 { font-size: 36px; line-height: 1.1; margin-bottom: 4px; } h2 { font-size: 24px; } h3 { font-size: 18px; } .section-eyebrow { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 6px; font-weight: 600; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); font-size: 12px; } .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; } .serif { font-family: var(--serif); } /* ─── Tiles ─── */ .tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 28px; } @media (min-width: 600px) { .tile-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } } .tile { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--radius-lg); padding: 18px 20px; position: relative; } .tile.accent { border-left: 3px solid var(--accent); } .tile.positive { border-left: 3px solid var(--positive); } .tile.warning { border-left: 3px solid var(--warning); } .tile.danger { border-left: 3px solid var(--negative); } .tile.gold { border-left: 3px solid var(--gold); } .tile .label { text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-size: 10px; font-weight: 600; } .tile .value { font-family: var(--serif); font-size: 28px; font-weight: 600; margin-top: 6px; word-break: break-word; line-height: 1.1; } .tile .sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; } /* ─── Cards ─── */ .card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } .card-header h2, .card-header h3 { margin: 0; } /* ─── Buttons ─── */ .btn { background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius); padding: 11px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--sans); letter-spacing: 0.6px; text-transform: uppercase; transition: background 0.15s; } .btn:hover { background: var(--accent-hover); } .btn:active { transform: translateY(1px); } .btn:disabled { background: var(--text-faint); cursor: not-allowed; } .btn-secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn-secondary:hover { background: var(--accent-bg); } .btn-danger { background: var(--negative); } .btn-danger:hover { background: #6e2020; } .btn-sm { padding: 6px 12px; font-size: 11px; } .btn-block { display: block; width: 100%; } /* ─── Forms ─── */ .input, .select, textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; font-family: var(--sans); background: var(--bg-input, #fffefa); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } .input:focus, .select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .label-row { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; } .field { margin-bottom: 16px; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .row > * { flex: 1 1 auto; } /* ─── Tables ─── */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -22px; padding: 0 22px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-weight: 600; padding: 12px 12px; background: transparent; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 14px 12px; border-bottom: 1px solid var(--border-faint); vertical-align: top; } tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.012); } :root[data-theme="dark"] tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); } tbody tr:hover td { background: var(--row-alt); } tfoot tr td { background: var(--accent-bg); font-weight: 600; } .amount-pos { color: var(--positive); font-variant-numeric: tabular-nums; } .amount-neg { color: var(--negative); font-variant-numeric: tabular-nums; } .amount { font-variant-numeric: tabular-nums; font-family: var(--sans); } /* ─── Chips & status ─── */ .chip { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--accent-bg); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; } .chip-warning { background: var(--warning-bg); color: var(--warning); } .chip-positive { background: var(--positive-bg, #e3eed5); color: var(--positive); } .chip-danger { background: var(--negative-bg, #f3dada); color: var(--negative); } /* Conviction pill — used on /admin/support and /support/track. Same bands so operator + reporter read identical signals: ≥85 high (green dot), 50-84 medium (amber), <50 low (muted). */ .conv { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .conv-dot { width: 8px; height: 8px; border-radius: 50%; } .conv-high { background: var(--positive-bg, rgba(74, 124, 42, 0.12)); color: var(--positive); } .conv-high .conv-dot { background: var(--positive); } .conv-med { background: var(--warning-bg, rgba(199, 138, 42, 0.14)); color: var(--warning, #c78a2a); } .conv-med .conv-dot { background: var(--warning, #c78a2a); } .conv-low { background: var(--bg-alt); color: var(--text-muted); } .conv-low .conv-dot { background: var(--text-muted); } .empty { padding: 48px 16px; text-align: center; color: var(--text-muted); font-style: italic; font-family: var(--serif); font-size: 17px; } .error { padding: 12px 16px; background: var(--negative-bg, #f3dada); border-left: 3px solid var(--negative); border-radius: var(--radius); color: var(--negative); font-size: 14px; margin-bottom: 16px; } .success { padding: 12px 16px; background: var(--positive-bg, #e3eed5); border-left: 3px solid var(--positive); border-radius: var(--radius); color: var(--positive); font-size: 14px; margin-bottom: 16px; } /* ─── Floating toast stack ───────────────────────────────────────── Pinned to the top-right of the viewport, above all other chrome. Each toast is a self-contained card so multiple notifications stack vertically. Slides in from the right; fades out on dismiss. */ #toastStack { position: fixed; top: 16px; right: 16px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; /* Container is click-through; toasts re-enable */ } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); font-size: 14px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); cursor: pointer; /* Slide-in animation: start off-screen, transparent. */ transform: translateX(110%); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; } .toast.toast-in { transform: translateX(0); opacity: 1; } .toast.toast-leaving { transform: translateX(110%); opacity: 0; } .toast-text { flex: 1; word-break: break-word; } .toast-close { appearance: none; background: transparent; border: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: 0.7; } .toast-close:hover { opacity: 1; } .toast-success { background: var(--positive-bg, #e3eed5); border-left: 3px solid var(--positive); color: var(--positive); } .toast-error { background: var(--negative-bg, #f3dada); border-left: 3px solid var(--negative); color: var(--negative); } .toast-warn { background: var(--warning-bg, #fff3cd); border-left: 3px solid var(--warning, #b58105); color: var(--warning, #b58105); } .toast-info { background: var(--surface); border-left: 3px solid var(--accent); color: var(--text); } @media (max-width: 540px) { #toastStack { top: 12px; right: 12px; left: 12px; max-width: none; } .toast { font-size: 13px; } } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Login ─── */ .login-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: radial-gradient(ellipse at top, rgba(45, 74, 48, 0.06), transparent 60%), var(--bg); } .login-card { background: var(--surface); border-radius: var(--radius-lg); padding: 44px 32px 36px; width: 100%; max-width: 400px; box-shadow: var(--shadow); border: 1px solid var(--border-faint); } .login-logo { text-align: center; margin-bottom: 28px; } .login-logo .badge { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 24px; margin-bottom: 16px; letter-spacing: 1px; } .login-logo h1 { margin: 0; font-size: 28px; } .login-logo .tag { margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-weight: 600; } .divider { border: none; border-top: 1px solid var(--border-faint); margin: 24px 0; } .kbd { background: var(--bg-alt); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, "SF Mono", monospace; font-size: 12px; color: var(--text-muted); } .demo-banner { background: var(--gold); color: var(--bg); padding: 8px 16px; font-size: 13px; text-align: center; letter-spacing: 0.4px; } .demo-banner strong { font-weight: 600; margin-right: 6px; } .demo-banner a { color: var(--bg); text-decoration: underline; margin-left: 12px; border: none; } .demo-banner a:hover { border: none; } /* License-status banner: surfaces trial countdown + paid-license expiry warnings on every authenticated page. Fetched from /version (auth-exempt) once on shell render. Hidden when the license is a long-lived paid one with > 30 days remaining. Three urgency levels keyed off the .urgent / .warn modifier. */ .license-banner { background: var(--accent-bg); color: var(--accent); padding: 8px 16px; font-size: 13px; text-align: center; letter-spacing: 0.3px; border-bottom: 1px solid var(--border-faint); } .license-banner.warn { background: var(--warning-bg); color: var(--warning); } .license-banner.urgent { background: var(--negative); color: var(--bg); } .license-banner strong { font-weight: 600; margin-right: 6px; } .license-banner a { color: inherit; text-decoration: underline; margin-left: 8px; border: none; font-weight: 500; } .license-banner a:hover { border: none; opacity: 0.85; } /* ─── Polish: hover, focus, motion ─── */ .tile { transition: border-color 0.15s, box-shadow 0.18s, transform 0.18s; } .tile:hover { border-color: var(--border); box-shadow: var(--shadow); transform: translateY(-1px); } .card { transition: box-shadow 0.18s; } /* Visible focus ring for keyboard nav. The :focus-visible pseudo-class means mouse clicks don't get a ring (would be visual noise) but tab navigation does, which is what accessibility expects. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } .btn:focus-visible { outline-offset: 3px; } /* Sticky-ish table headers — when the user scrolls a long table the header line stays pinned to the top of the scroll container. Pages that want this just don't have to do anything; everything inside .table-scroll picks it up. */ .table-scroll thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; box-shadow: 0 1px 0 var(--border); } /* Horizontal-scroll affordance on overflowing tables. The right-edge gradient hints there's more to scroll into view; iOS already shows nothing on its own. */ .table-scroll { position: relative; background: linear-gradient(to right, var(--surface) 0%, transparent 6px), linear-gradient(to left, var(--surface) 0%, transparent 6px), linear-gradient(to right, rgba(42, 37, 32, 0.10), transparent 12px), linear-gradient(to left, rgba(42, 37, 32, 0.10), transparent 12px); background-attachment: local, local, scroll, scroll; background-repeat: no-repeat; background-position: 0 0, 100% 0, 0 0, 100% 0; background-size: 12px 100%, 12px 100%, 12px 100%, 12px 100%; } /* ─── Mobile (<600px): density + readability ─── Phone screens need: - tighter card / table padding so columns fit without horizontal scroll - smaller h1 / tile value so the headline doesn't wrap awkwardly - rows stack instead of squeezing flex-1 children - modal cards go edge-to-edge (max-width 480px is wider than most phones) - 44x44 minimum tap targets on buttons (Apple HIG / WCAG 2.2) */ @media (max-width: 599px) { main { padding: 16px 14px 60px; } h1 { font-size: 28px; } h2 { font-size: 20px; } h3 { font-size: 16px; } .card { padding: 16px 14px; margin-bottom: 14px; border-radius: 8px; } .card-header { margin-bottom: 12px; gap: 6px; } /* Drop the negative margin trick on phones — tables overflow into the page padding, which made the gradient affordance look broken and pushed the scroll indicators offscreen. */ .table-scroll { margin: 0 -14px; padding: 0 14px; } table { font-size: 13px; } th { padding: 10px 8px; font-size: 9.5px; letter-spacing: 0.6px; } td { padding: 10px 8px; font-size: 13px; } .tile { padding: 14px 16px; border-radius: 8px; } .tile .value { font-size: 22px; } .tile .label { font-size: 9.5px; letter-spacing: 0.7px; } .tile-grid { /* Single column — splitting tile values on phones makes them unreadable. This trumps the 1fr 1fr default at the top. */ grid-template-columns: 1fr; gap: 8px; margin: 14px 0 18px; } /* Phones: full-width inputs but let chip / button groups keep their horizontal wrap behaviour from the base .row rule. Targeting only .field children means input rows stack while a row of preset buttons still wraps inline. !important is needed because almost every page sets inline min-width / max-width on .field divs (e.g. min-width: 240px, max-width: 110px) which would otherwise pin them to fixed sizes on small screens. We force them to span the row instead. */ .row > .field { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; } .row > .grow { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; } /* Generic divs sitting between fields (action buttons wrapped in

) — give them their own row so the button doesn't crowd a field above it. */ .row > div[style*="flex: 0 0 auto"] { flex: 0 0 100% !important; } /* Bare button children of .row (no wrapper) — same treatment so 'Apply' / 'Add' end up on their own line below the inputs. */ .row > button { flex: 0 0 100% !important; } /* Tap-friendly buttons. 11px font + 11px padding gave ~36px height which is below the 44px tap-target floor. */ .btn:not(.btn-sm) { padding: 13px 16px; min-height: 44px; } .btn-sm { min-height: 36px; } .input, .select, textarea { font-size: 16px; padding: 12px 14px; } /* font-size: 16px on inputs prevents the iOS Safari auto-zoom-on-focus dance that yanks the user out of the form. */ .field { margin-bottom: 12px; } /* Modal overlays — leave a small inset so the user can tap the backdrop to dismiss without having to find a 1px border. */ .modal-card, [style*="position: fixed"][style*="inset: 0"] > .card, [style*="position:fixed"][style*="inset:0"] > .card { max-width: 100% !important; margin: 0 !important; border-radius: 10px !important; } } /* ─── Tablet (600-899px) tightening ─── */ @media (min-width: 600px) and (max-width: 899px) { main { padding: 24px 24px 60px; } h1 { font-size: 32px; } } /* ─── Reduced-motion users keep static UI ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ─── Role-aware UI ─────────────────────────────────────────── * `body.is-viewer` is set by app.js after /api/auth/me returns role * != 'manager'. Any element tagged data-write (add forms, edit/delete * buttons inside modals, refresh-prices buttons, etc.) is hidden. * Backend already returns 403 on writes from viewers; this just keeps * the UI from offering buttons that would always fail. */ body.is-viewer [data-write] { display: none !important; } /* ─── Hide-values privacy toggle ────────────────────────────── * `body.hide-values` is set by app.js when the user clicks the eye * icon in the topbar. Blurs anything tagged `.value` (tile values), * `.amount` (table cells), `.tnum` (tabular-numeric cells in monthly * reports), and `.balance`. Cursor pointer hints that hovering won't * actually unblur — the user has to click the topbar toggle to flip * it back. Click-to-peek-then-restore would be nicer but every page * sets innerHTML on its own schedule and re-binding hover handlers * is fragile; topbar toggle is the simpler, predictable surface. */ body.hide-values .value, body.hide-values .amount, body.hide-values .tnum, body.hide-values .balance { filter: blur(8px); user-select: none; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════ * Dark-theme sidebar & surface refresh (v2) * ─────────────────────────────────────────────────────────────────── * Everything below is scoped to [data-theme="dark"] — the light theme * is completely untouched. These rules extend the palette variables * above with structural changes that CSS variables alone can't express: * * 0. Link transition — adds box-shadow so the inset left-bar * animates in smoothly rather than snapping. * 1. Sidebar depth — right-edge shadow separates it from the deeper * page background. * 2. Active state — replaces solid brass fill with a subtle tinted * background + a 3 px inset left-bar accent. * Uses box-shadow: inset so padding & layout are * unaffected. * 3. Hover state — warm micro-tint + faint left-bar echo. * 4. Icon pill — top-level nav icons get a small rounded * container background so each emoji reads as a * deliberate UI element rather than inline text. * Scale micro-animation on hover/active. * 5. Child icons — chevron characters (›) stay flat but are more * visible: opacity raised, accent-tinted on * active. * 6. Brand stripe — soft brass glow on the vertical accent bar. * 7. Sidebar footer — subtle upward shadow to float it above the nav. * 8. Caret toggles — brass tint on hover. * 9. Scrollbar — thin, warm scrollbar track on WebKit. * 10. Cards — deeper drop-shadow for better layer separation. * 11. Tiles — stronger hover lift. * 12. Help dropdown — uses --surface-raised so it floats above the * sidebar surface. * 13. Login gradient — brass-toned radial replaces the green one. * ═══════════════════════════════════════════════════════════════════ */ /* 0. Sidebar link transition — extend to include box-shadow so the inset left-bar animates in on hover rather than snapping. ────── */ :root[data-theme="dark"] .sidebar a { transition: background 0.12s, color 0.12s, box-shadow 0.12s; } /* 1. Sidebar depth ────────────────────────────────────────────────── */ :root[data-theme="dark"] .sidebar { box-shadow: 4px 0 28px rgba(0, 0, 0, 0.45); } /* 2. Active nav item — inset left-bar + tinted bg ─────────────────── */ :root[data-theme="dark"] .sidebar a.active { background: rgba(200, 184, 122, 0.13); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); /* font-weight inherited from base rule */ } /* 3. Hover — warm micro-tint + faint echo bar ──────────────────────── */ :root[data-theme="dark"] .sidebar a:hover { background: rgba(200, 184, 122, 0.07); color: var(--text); box-shadow: inset 3px 0 0 rgba(200, 184, 122, 0.28); } /* 4. Top-level icon pill ───────────────────────────────────────────── */ :root[data-theme="dark"] .sidebar a:not(.sidebar-child):not(.sidebar-grandchild) .icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); opacity: 1; /* lift from the default 0.65 */ font-size: 14px; flex-shrink: 0; transition: background 0.15s, transform 0.15s, opacity 0.15s; } :root[data-theme="dark"] .sidebar a:not(.sidebar-child):not(.sidebar-grandchild):hover .icon { background: rgba(200, 184, 122, 0.14); transform: scale(1.07); opacity: 1; } :root[data-theme="dark"] .sidebar a:not(.sidebar-child):not(.sidebar-grandchild).active .icon { background: rgba(200, 184, 122, 0.22); transform: scale(1.04); opacity: 1; } /* 5. Child / grandchild icons (chevron characters) ─────────────────── */ :root[data-theme="dark"] .sidebar a.sidebar-child .icon, :root[data-theme="dark"] .sidebar a.sidebar-grandchild .icon { opacity: 0.45; transition: opacity 0.12s; } :root[data-theme="dark"] .sidebar a.sidebar-child:hover .icon, :root[data-theme="dark"] .sidebar a.sidebar-grandchild:hover .icon { opacity: 0.75; } :root[data-theme="dark"] .sidebar a.sidebar-child.active .icon, :root[data-theme="dark"] .sidebar a.sidebar-grandchild.active .icon { opacity: 0.9; color: var(--accent); } /* 6. Brand accent stripe glow ─────────────────────────────────────── */ :root[data-theme="dark"] .sidebar-brand::before { box-shadow: 0 0 10px rgba(200, 184, 122, 0.5), 0 0 22px rgba(200, 184, 122, 0.18); } /* 7. Sidebar footer — upward shadow ──────────────────────────────── */ :root[data-theme="dark"] .sidebar-footer { background: var(--surface); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4); } /* 8. Caret toggles ───────────────────────────────────────────────── */ :root[data-theme="dark"] .sidebar .sidebar-caret { color: var(--text-faint); transition: color 0.12s, background 0.12s, transform 0.15s; } :root[data-theme="dark"] .sidebar .sidebar-caret:hover { color: var(--accent); background: rgba(200, 184, 122, 0.1); } /* 9. Scrollbar (WebKit) ──────────────────────────────────────────── */ :root[data-theme="dark"] .sidebar::-webkit-scrollbar { width: 4px; } :root[data-theme="dark"] .sidebar::-webkit-scrollbar-track { background: transparent; } :root[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } :root[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* Theme-toggle button: explicit colour anchors so it reads against the sidebar surface rather than inheriting muted nav text. */ :root[data-theme="dark"] .theme-toggle { color: var(--text-muted); border-color: var(--border); } :root[data-theme="dark"] .theme-toggle:hover { background: rgba(200, 184, 122, 0.09); color: var(--accent); border-color: var(--accent-fg); } /* 10. Cards — deeper shadow ──────────────────────────────────────── */ :root[data-theme="dark"] .card { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); } /* 11. Tiles — stronger hover lift ────────────────────────────────── */ :root[data-theme="dark"] .tile:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65); border-color: var(--border); } /* 12. Help dropdown — raised surface ─────────────────────────────── */ :root[data-theme="dark"] .help-menu { background: var(--surface-raised, #22201a); border-color: var(--border); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65); } :root[data-theme="dark"] .help-menu a:hover { background: rgba(200, 184, 122, 0.08); color: var(--accent); } /* 13. Login page — brass radial gradient ─────────────────────────── */ :root[data-theme="dark"] .login-page { background: radial-gradient(ellipse at top, rgba(200, 184, 122, 0.05), transparent 55%), var(--bg); } /* Focus ring — brass-tinted halo in dark mode ───────────────────── */ :root[data-theme="dark"] :focus-visible { outline-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 184, 122, 0.2); } /* ════════════════════════════════════════════════════════════════ * Minha Obra — componentes específicos (por cima do design herdado) * ════════════════════════════════════════════════════════════════ */ /* Estados das tarefas */ .status { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.3px; } .status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .status-unassigned { background:var(--bg-alt); color:var(--text-muted); } .status-open { background:var(--accent-bg); color:var(--accent); } .status-in_progress { background:var(--warning-bg); color:var(--warning); } .status-needs_verification { background:rgba(160,124,42,.14); color:var(--gold); } .status-closed { background:var(--positive-bg,#e3eed5); color:var(--positive); } /* Prioridades */ .prio { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; } .prio::before { content:""; width:8px; height:8px; border-radius:2px; } .prio-urgent { color:var(--negative); } .prio-urgent::before { background:var(--negative); } .prio-high { color:var(--warning); } .prio-high::before { background:var(--warning); } .prio-medium { color:var(--gold); } .prio-medium::before { background:var(--gold); } .prio-low { color:var(--text-faint); } .prio-low::before { background:var(--text-faint); } /* Lista de tarefas em cartões */ .task-list { display:flex; flex-direction:column; gap:10px; } .task-card { display:block; background:var(--surface); border:1px solid var(--border-faint); border-radius:var(--radius-lg); padding:14px 16px; color:var(--text); border-left:3px solid transparent; transition:box-shadow .15s, transform .15s, border-color .15s; } .task-card:hover { box-shadow:var(--shadow); transform:translateY(-1px); border-bottom-color:var(--border-faint); } .task-card.p-urgent { border-left-color:var(--negative); } .task-card.p-high { border-left-color:var(--warning); } .task-card.p-medium { border-left-color:var(--gold); } .task-card.p-low { border-left-color:var(--border); } .task-card .tc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .task-card h3 { font-family:var(--sans); font-size:15px; font-weight:600; margin:0 0 4px; line-height:1.35; } .task-card .tc-meta { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:12px; color:var(--text-muted); margin-top:8px; } .task-card .tc-meta .icon { opacity:.6; margin-right:3px; } .tc-overdue { color:var(--negative); font-weight:600; } /* Barra de filtros */ .filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; align-items:center; } .filters .select, .filters .input { width:auto; flex:0 0 auto; min-width:120px; font-size:13px; padding:8px 12px; } .filters .input.search { flex:1 1 200px; min-width:160px; } /* Segmented / chips seletores */ .seg { display:inline-flex; flex-wrap:wrap; gap:6px; } .seg button { background:var(--surface); border:1px solid var(--border); color:var(--text-muted); border-radius:999px; padding:6px 13px; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans); transition:all .12s; } .seg button:hover { border-color:var(--accent-fg); color:var(--text); } .seg button.on { background:var(--accent); border-color:var(--accent); color:var(--bg); } /* Galeria de fotos */ .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; } .gallery figure { margin:0; position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--border-faint); background:var(--bg-alt); } .gallery img { width:100%; height:120px; object-fit:cover; display:block; cursor:pointer; } .gallery .phase { position:absolute; top:6px; left:6px; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; background:rgba(0,0,0,.6); color:#fff; } .gallery .att-del { position:absolute; top:6px; right:6px; width:22px; height:22px; border:none; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; font-size:13px; line-height:1; display:none; } .gallery figure:hover .att-del { display:block; } /* Documentos / orçamentos */ .doc-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-faint); } .doc-row:last-child { border-bottom:none; } .doc-icon { width:38px; height:38px; border-radius:8px; background:var(--negative-bg,#f3dada); color:var(--negative); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; } .doc-main { flex:1; min-width:0; } .doc-main .name { font-weight:600; font-size:13.5px; word-break:break-word; } .doc-main .sub { font-size:12px; color:var(--text-muted); } /* Comentários */ .comment { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-faint); } .comment:last-child { border-bottom:none; } .avatar { width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; flex-shrink:0; font-family:var(--serif); } .comment-body { flex:1; min-width:0; } .comment-body .who { font-weight:600; font-size:13px; } .comment-body .when { color:var(--text-faint); font-size:11px; margin-left:8px; } .comment-body .text { font-size:14px; margin-top:3px; white-space:pre-wrap; word-break:break-word; } /* Feed de atividade */ .activity-feed { list-style:none; margin:0; padding:0; } .activity-feed li { display:flex; gap:10px; font-size:12.5px; color:var(--text-muted); padding:7px 0; border-bottom:1px dashed var(--border-faint); } .activity-feed li:last-child { border-bottom:none; } .activity-feed .a-when { color:var(--text-faint); white-space:nowrap; } /* Dropzone de upload */ .dropzone { border:2px dashed var(--border); border-radius:10px; padding:22px; text-align:center; color:var(--text-muted); cursor:pointer; transition:border-color .15s, background .15s; font-size:13px; } .dropzone:hover, .dropzone.drag { border-color:var(--accent); background:var(--accent-bg); color:var(--text); } /* Modal */ .modal-backdrop { position:fixed; inset:0; background:rgba(20,16,10,.5); display:none; align-items:flex-start; justify-content:center; z-index:1000; padding:24px 16px; overflow-y:auto; } .modal-backdrop.open { display:flex; } .modal { background:var(--surface); border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); width:100%; max-width:560px; padding:26px; margin:auto 0; } .modal h2 { margin-top:0; } .modal-close { float:right; background:transparent; border:none; font-size:22px; color:var(--text-muted); cursor:pointer; line-height:1; } /* Checkbox alinhada */ .check-row { display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; } .check-row input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); } /* Notificações — sino */ .bell { position:relative; background:transparent; border:none; cursor:pointer; font-size:18px; padding:4px 8px; color:var(--text); } .bell .dot { position:absolute; top:2px; right:4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--negative); color:#fff; font-size:10px; font-weight:700; display:none; align-items:center; justify-content:center; } .bell .dot.show { display:flex; } .notif-panel { position:absolute; right:12px; top:52px; width:min(340px,calc(100vw - 24px)); background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); z-index:50; display:none; max-height:60vh; overflow-y:auto; } .notif-panel.open { display:block; } .notif-item { padding:12px 14px; border-bottom:1px solid var(--border-faint); font-size:13px; } .notif-item.unread { background:var(--accent-bg); } .notif-item .when { color:var(--text-faint); font-size:11px; margin-top:3px; } /* Grelha de campos 2-col em ecrãs largos */ .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } @media (max-width:560px){ .grid2 { grid-template-columns:1fr; } } /* Detalhe: cabeçalho */ .detail-head { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:6px; } .progress-track { height:8px; border-radius:999px; background:var(--bg-alt); overflow:hidden; } .progress-fill { height:100%; background:var(--accent); border-radius:999px; } /* ─── Painel / dashboard ─── */ .dash-hero { display:flex; gap:26px; align-items:center; flex-wrap:wrap; } .ring-wrap { position:relative; width:132px; height:132px; flex:0 0 auto; } .ring-wrap svg { width:132px; height:132px; transform:rotate(-90deg); } .ring-bg { fill:none; stroke:var(--border-faint); stroke-width:11; } .ring-fg { fill:none; stroke:var(--accent); stroke-width:11; stroke-linecap:round; transition:stroke-dashoffset .6s ease; } .ring-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .ring-label .pct { font-family:var(--serif); font-size:34px; font-weight:600; line-height:1; } .ring-label .cap { font-size:9.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-muted); margin-top:2px; } .hero-figs { display:flex; flex-wrap:wrap; gap:10px 26px; flex:1; min-width:200px; } .hero-fig .n { font-family:var(--serif); font-size:24px; font-weight:600; line-height:1; } .hero-fig .n.warn { color:var(--warning); } .hero-fig .n.bad { color:var(--negative); } .hero-fig .n.good { color:var(--positive); } .hero-fig .l { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-top:5px; } /* Barra empilhada por estado */ .stack { display:flex; height:15px; border-radius:999px; overflow:hidden; background:var(--bg-alt); margin-bottom:14px; } .stack span { display:block; height:100%; } .stack-legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--text-muted); } .stack-legend i { width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:6px; vertical-align:middle; } /* Linhas de prioridade */ .prio-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .prio-row:last-child { margin-bottom:0; } .prio-row .lbl { width:78px; flex:0 0 auto; font-size:12px; font-weight:600; } .prio-row .n { width:26px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; } /* Carga da equipa (workload) */ .wl-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px dashed var(--border-faint); } .wl-row:last-child { border-bottom:none; } .wl-row.zero { opacity:.5; } .wl-name { flex:0 0 auto; width:104px; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wl-bar-track { flex:1; height:9px; background:var(--bg-alt); border-radius:999px; overflow:hidden; } .wl-bar { height:100%; background:var(--accent); border-radius:999px; } .wl-count { flex:0 0 auto; width:24px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; } .mini-badge { font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px; } .mini-badge.bad { background:var(--negative-bg,#f3dada); color:var(--negative); } .mini-badge.warn { background:var(--warning-bg); color:var(--warning); } /* Linhas de divisão */ .room-row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px dashed var(--border-faint); font-size:13px; } .room-row:last-child { border-bottom:none; } .room-row .rn { flex:1; } .room-row .rc { color:var(--text-muted); font-variant-numeric:tabular-nums; } /* Vídeo/áudio nos anexos */ .media-item video { width:100%; max-height:300px; border-radius:8px; background:#000; border:1px solid var(--border-faint); display:block; } .media-bar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:5px; font-size:12px; } .doc-row audio { max-width:100%; } /* ID sequencial da tarefa (#12) */ .task-id { color:var(--text-faint); font-family:ui-monospace,"SF Mono",Menlo,monospace; font-weight:600; font-size:.82em; } /* Caixas clicáveis no painel */ a.tile, a.hero-fig, a.wl-row, a.room-row { color:inherit; text-decoration:none; border:none; cursor:pointer; } a.tile:hover, a.hero-fig:hover, a.wl-row:hover, a.room-row:hover { border:none; border-bottom:none; } a.hero-fig { border-radius:6px; padding:4px 8px; margin:-4px -8px; transition:background .12s; } a.hero-fig:hover { background:var(--accent-bg); } a.wl-row:hover, a.room-row:hover { background:var(--accent-bg); } a.wl-row, a.room-row { border-radius:6px; margin:0 -6px; padding-left:6px; padding-right:6px; }