/* ============================================================================ THEME LAYER — white-label Three independent axes, deliberately kept orthogonal: 1. BASE one neutral palette. Every install shares it. No per-tenant palettes — a tenant is not a theme. 2. ACCENT ONE stored colour (--p-accent). Everything else accent-shaped (hover ink, tint background, borders) is DERIVED from it with color-mix, so a tenant configures a single value and the whole UI follows. Set inline on by the layout. 3. MODE light / dark. Explicit via [data-mode], or follow the OS when the user chooses System (no attribute -> prefers-color-scheme). Tier 1 (--p-*) are primitives; Tier 2 are semantic tokens named for the job the colour does. Components consume ONLY Tier 2 — that is what lets accent and mode change underneath without touching a single component rule. ============================================================================ */ /* --- Tier 1: base primitives, LIGHT ------------------------------------- */ :root { /* Accent. Overridden inline per install; this default is only a fallback. */ --p-accent: #4f46e5; --p-canvas: #f7f7f5; --p-raised: #fbfbf9; --p-panel: #ffffff; --p-sunken: #f1f0ec; --p-ink: #1b1a18; --p-ink-2: #57564f; --p-ink-3: #6c6a64; --p-muted: #9b998f; --p-faint: #b3b1a7; --p-line: #ecebe6; --p-line-soft: #f1f0ec; --p-line-softer: #f6f5f1; --p-control-line: #e7e6e1; --p-btn-line: #e0ded7; --p-nav-hover-bg: #f3f2ee; --p-nav-badge-bg: #efeee9; /* Inverse surface: a dark block with light text (Outlook events, the login overlay). Stays dark in light mode; lifts in dark mode so it still reads as a distinct block against a dark panel. */ --p-inverse-bg: #1b2b38; --p-inverse-fg: #ffffff; --p-inverse-bg-hover: #101c26; /* Status hues. Backgrounds are mixed against --p-panel below, so these work in both modes from one definition. */ --p-ok: #16a34a; --p-warn: #d97706; --p-danger: #dc2626; --p-info: #1d4ed8; --p-teal: #0f766e; --p-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --p-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --p-mix-soft: 12%; /* accent/status tint strength against the panel */ --p-mix-line: 35%; } /* --- Tier 1: base primitives, DARK -------------------------------------- */ /* Applied when the user picks Dark explicitly... */ [data-mode="dark"] { --p-canvas: #141312; --p-raised: #1b1a18; --p-panel: #211f1d; --p-sunken: #2a2825; --p-ink: #f5f4f1; --p-ink-2: #c9c7bf; --p-ink-3: #a9a79d; --p-muted: #8c8a83; --p-faint: #6c6a64; --p-line: #33322e; --p-line-soft: #2a2825; --p-line-softer: #232120; --p-control-line: #3a3835; --p-btn-line: #43413d; --p-nav-hover-bg: #2a2825; --p-nav-badge-bg: #2a2825; --p-inverse-bg: #33322e; --p-inverse-fg: #ffffff; --p-inverse-bg-hover: #43413d; /* Tints need more punch against a dark panel to stay visible. */ --p-mix-soft: 22%; --p-mix-line: 45%; } /* ...and when they pick System (no [data-mode]) and the OS is dark. */ @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]):not([data-mode="dark"]) { --p-canvas: #141312; --p-raised: #1b1a18; --p-panel: #211f1d; --p-sunken: #2a2825; --p-ink: #f5f4f1; --p-ink-2: #c9c7bf; --p-ink-3: #a9a79d; --p-muted: #8c8a83; --p-faint: #6c6a64; --p-line: #33322e; --p-line-soft: #2a2825; --p-line-softer: #232120; --p-control-line: #3a3835; --p-btn-line: #43413d; --p-nav-hover-bg: #2a2825; --p-nav-badge-bg: #2a2825; --p-inverse-bg: #33322e; --p-inverse-fg: #ffffff; --p-inverse-bg-hover: #43413d; --p-mix-soft: 22%; --p-mix-line: 45%; } } /* --- Tier 2: semantic tokens — the only ones components may consume ------ */ :root { /* surfaces */ --bg: var(--p-canvas); --panel: var(--p-panel); --raised: var(--p-raised); --sunken: var(--p-sunken); /* text */ --ink: var(--p-ink); --ink-2: var(--p-ink-2); --ink-3: var(--p-ink-3); /* Supporting copy, table headers, stat labels. Points at --p-ink-3, not --p-muted: the design's #9b998f only scores 2.86:1 on white, and this token carries real content. #6c6a64 is the design's own secondary-text colour and reaches ~4.6:1. --faint stays for decorative text only. */ --muted: var(--p-ink-3); --faint: var(--p-faint); /* lines */ --line: var(--p-line); --line-soft: var(--p-line-soft); --line-softer: var(--p-line-softer); --control-line: var(--p-control-line); --btn-line: var(--p-btn-line); /* accent — all derived from the single stored --p-accent */ --accent: var(--p-accent); /* Readable accent, for accent-coloured TEXT (on a panel or an accent tint). Mixed toward --p-ink, not toward black: in light mode that darkens the accent, in dark mode it lightens it, so a light accent (orange, amber) stays legible in both. Using the raw --accent here scores ~2.6:1. */ --accent-ink: color-mix(in srgb, var(--p-accent) 72%, var(--p-ink)); --accent-soft: color-mix(in srgb, var(--p-accent) var(--p-mix-soft), var(--p-panel)); --accent-line: color-mix(in srgb, var(--p-accent) var(--p-mix-line), var(--p-panel)); /* Text ON a solid accent fill. Can't be fixed: white works on indigo but fails on a light accent, so the server picks #fff or near-black from the accent's luminance and sets --p-accent-contrast inline. */ --accent-contrast: var(--p-accent-contrast, #fff); /* A barely-there accent tint for highlighted rows (unread, mine, hover). Was a hardcoded warm #fff8f4 back when the brand was always orange. */ --accent-wash: color-mix(in srgb, var(--p-accent) 5%, var(--p-panel)); /* navigation shell — neutral surface, accent only for the active item */ --nav-bg: var(--p-raised); --nav-fg: var(--p-ink-2); --nav-fg-strong: var(--p-ink); --nav-hover-bg: var(--p-nav-hover-bg); --nav-active-bg: var(--accent-soft); --nav-active-fg: var(--accent-ink); --nav-heading: var(--p-muted); --nav-line: var(--p-line); --nav-badge-bg: var(--p-nav-badge-bg); --nav-chip-bg: var(--accent-soft); --nav-chip-fg: var(--accent-ink); /* inverse surface */ --inverse-bg: var(--p-inverse-bg); --inverse-fg: var(--p-inverse-fg); --inverse-bg-hover: var(--p-inverse-bg-hover); /* status — one hue each, tint + ink derived so both modes work */ --ok: var(--p-ok); --ok-bg: color-mix(in srgb, var(--p-ok) var(--p-mix-soft), var(--p-panel)); --ok-ink: color-mix(in srgb, var(--p-ok) 80%, var(--p-ink)); --warn: var(--p-warn); --warn-bg: color-mix(in srgb, var(--p-warn) var(--p-mix-soft), var(--p-panel)); --warn-ink: color-mix(in srgb, var(--p-warn) 80%, var(--p-ink)); --danger: var(--p-danger); --danger-bg: color-mix(in srgb, var(--p-danger) var(--p-mix-soft), var(--p-panel)); --danger-ink: color-mix(in srgb, var(--p-danger) 80%, var(--p-ink)); --info: var(--p-info); --info-bg: color-mix(in srgb, var(--p-info) var(--p-mix-soft), var(--p-panel)); --teal: var(--p-teal); --teal-bg: color-mix(in srgb, var(--p-teal) var(--p-mix-soft), var(--p-panel)); --teal-line: color-mix(in srgb, var(--p-teal) var(--p-mix-line), var(--p-panel)); --mute-bg: var(--p-sunken); --mute-ink: var(--p-muted); /* type */ --font: var(--p-font); --font-mono: var(--p-font-mono); /* shape — the design nests radii: controls 10, stat cards 14, panels 16 */ --radius: 10px; --radius-card: 14px; --radius-panel: 16px; --shadow: 0 1px 2px rgba(30,29,26,.05); --shadow-pop: 0 18px 44px -14px rgba(30,29,26,.3); /* --- Legacy aliases ------------------------------------------------- Pre-redesign rules still reference these brand-named tokens. They now resolve through the accent, so they stay correct for any tenant. Do not add new uses; they retire as each screen is re-skinned. --ocean and --eggshell are deliberately absent. Each did two unrelated jobs in the old Pelican palette (sidebar AND dark contrast chip; accent tint AND light-text-on-dark), which only worked because that sidebar happened to be its dark colour. Their old call sites now point at --nav-*, --inverse-* or --accent-soft depending on the job they do. */ --brand: var(--accent); --brand-ink: var(--accent-ink); --brand-light: var(--accent-line); } * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; } /* Tabular figures for money/hours/IDs — Foundry sets these in JetBrains Mono */ .num, .mono, .stat-num, .income-num, .kc-num, .totp-secret, .code-input, .recovery-grid li { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.5rem; margin: 0; } h2 { font-size: 1.05rem; margin: 0 0 .75rem; } .muted { color: var(--muted); } .small { font-size: .85rem; } .num { text-align: right; font-variant-numeric: tabular-nums; } /* Layout shell */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 248px; background: var(--nav-bg); color: var(--nav-fg); flex-shrink: 0; display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; align-self: flex-start; border-right: 1px solid var(--nav-line); } .brand { color: var(--nav-fg-strong); padding: .35rem .5rem 1rem; display: flex; align-items: center; gap: .5rem; } .brand-link { display: inline-flex; align-items: center; gap: 11px; color: var(--nav-fg-strong); min-width: 0; } .brand-link:hover { text-decoration: none; } /* Design's brand block: logo tile + workspace name (+ optional tagline) */ .brand-tile-sm { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--accent-contrast); font-weight: 700; font-size: 16px; overflow: hidden; flex-shrink: 0; } .brand-tile-sm img { width: 100%; height: 100%; object-fit: contain; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .brand-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-tag { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-lg { padding: 0 0 .25rem; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 0; } /* Foundry groups the nav under Main / Work / Finance headings */ .nav-group { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--nav-heading); padding: 18px 10px 6px; } .nav-group:first-child { padding-top: 8px; } .sidebar nav a { color: var(--nav-fg); padding: .55rem .625rem; border-radius: 8px; display: flex; align-items: center; gap: 11px; font-size: 14px; transition: background-color .18s ease, color .18s ease; } .sidebar nav a:hover { background: var(--nav-hover-bg); text-decoration: none; color: var(--nav-fg-strong); } .sidebar nav a.active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 600; } .sidebar nav a svg { flex-shrink: 0; } .nav-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--nav-badge-bg); padding: 1px 7px; border-radius: 6px; } /* Sub-items under a nav entry (Calendar → Overview / Plan Mode). Rendered only while their section is open, so they read as an expanded tree. */ .nav-sub { display: flex; flex-direction: column; gap: 1px; padding-left: 30px; animation: subIn .22s ease both; } @keyframes subIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .nav-sub a { color: var(--nav-fg); padding: .38rem .625rem; border-radius: 7px; font-size: 13px; display: flex; align-items: center; transition: background-color .18s ease, color .18s ease; } .nav-sub a:hover { background: var(--nav-hover-bg); color: var(--nav-fg-strong); text-decoration: none; } .nav-sub a.active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 600; } /* Inline logo (uses currentColor) */ .brand-logo svg, .portal-brand svg, .auth-logo svg { width: auto; display: block; } .brand-logo svg { height: 24px; } /* An uploaded logo is an ; the bundled fallback is an inline . Both need to sit on the same 24px baseline and not overflow the 248px sidebar. */ .brand-logo img, .portal-brand img { height: 24px; width: auto; max-width: 100%; display: block; } .auth-logo img { height: 34px; width: auto; max-width: 100%; display: block; } .la-logo img { height: 46px; width: auto; display: block; } /* Last-resort mark when a tenant has no logo file at all. */ .logo-initial { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--accent-contrast); font-weight: 700; font-size: 16px; } .auth-logo { color: var(--brand); margin-bottom: .5rem; } .auth-logo svg { height: 34px; } /* Sidebar user block (replaces the old top bar) */ /* The first nav soaks up the free space, so Settings and the user block sit at the foot. Doing it here rather than with margin-top:auto on each of them — flex splits free space between multiple auto margins, which would strand a gap between the two. Works whether or not .nav-foot renders (contractors). */ .sidebar nav:first-of-type { margin-bottom: auto; } .nav-foot { display: flex; flex-direction: column; gap: 2px; } .sidebar-foot { padding: .75rem .5rem .25rem; border-top: 1px solid var(--nav-line); } .sidebar-user { display: flex; align-items: center; gap: .69rem; } .avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--nav-hover-bg); display: inline-flex; align-items: center; justify-content: center; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-initials { color: var(--nav-fg-strong); font-size: .8rem; font-weight: 700; } .su-meta { flex: 1; min-width: 0; } .su-name { color: var(--nav-fg-strong); font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .su-role { color: var(--nav-heading); font-size: .72rem; } .su-signout { color: var(--nav-fg); } .avatar-lg { width: 64px; height: 64px; } .avatar-lg .avatar-initials { font-size: 1.3rem; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---- App header -------------------------------------------------------- */ .appbar { height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 24px; background: var(--raised); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .appbar-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius); border: 1px solid var(--control-line); background: var(--panel); color: var(--ink-2); flex-shrink: 0; } .appbar-bell:hover { background: var(--nav-hover-bg); text-decoration: none; } /* A dot, not a count — the design shows unread as presence only. */ .appbar-bell .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--danger); border: 1.5px solid var(--panel); } /* A real search field with inline results underneath (⌘K focuses it). */ .appbar-search { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; max-width: 460px; height: 38px; margin: 0 auto; padding: 0 12px; background: var(--sunken); border: 1px solid var(--control-line); border-radius: var(--radius); color: var(--muted); font: inherit; font-size: 13.5px; text-align: left; transition: border-color .15s ease, background .15s ease; } .appbar-search:hover { border-color: var(--btn-line); } .appbar-search:focus-within { border-color: var(--accent); background: var(--panel); } .appbar-search input { flex: 1; min-width: 0; border: 0; background: none; margin: 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--ink); } .appbar-search input:focus { outline: none; } .appbar-search input::placeholder { color: var(--muted); } .appbar-search kbd { font-family: var(--font-mono); font-size: 11px; color: var(--faint); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; flex-shrink: 0; } .appbar-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70; list-style: none; margin: 0; padding: .25rem; max-height: 55vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); animation: overlayIn .15s ease both; } .appbar-results[hidden] { display: none; } .appbar-results a { display: flex; align-items: baseline; gap: .6rem; padding: .5rem .7rem; border-radius: 8px; color: var(--ink); } .appbar-results a.active, .appbar-results a:hover { background: var(--accent-soft); text-decoration: none; } .qa { position: relative; flex-shrink: 0; } .qa-btn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border: none; border-radius: var(--radius); background: var(--accent); color: var(--accent-contrast); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .qa-btn:hover { background: var(--accent-ink); } /* Fades down open, fades away closed — visibility keeps it untabbable when shut. */ .qa-menu { position: absolute; top: 46px; right: 0; z-index: 60; width: 226px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transform: translateY(-7px); pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1), visibility .18s; } .qa.open .qa-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .qa-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); } .qa-menu a:hover { background: var(--nav-hover-bg); text-decoration: none; } .qa-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; } .qa-ic svg { width: 15px; height: 15px; } .qa-ic.job { background: var(--accent-soft); color: var(--accent-ink); } .qa-ic.time { background: var(--ok-bg); color: var(--ok-ink); } .qa-ic.inv { background: var(--info-bg); color: var(--info); } /* Visually hidden but announced by screen readers. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .topbar { display: flex; align-items: center; gap: 1rem; background: var(--panel); border-bottom: 1px solid var(--line); padding: .6rem 1.5rem; } .topbar-spacer { flex: 1; } .bell { position: relative; color: var(--ink); display: inline-flex; align-items: center; } .bell .badge { position: absolute; top: -6px; right: -8px; margin: 0; } .badge { background: var(--accent); color: var(--accent-contrast); border-radius: 999px; font-size: .7rem; padding: 0 .4rem; margin-left: .35rem; font-weight: 700; line-height: 1.4; } .icon-btn { display: inline-flex; align-items: center; padding: 2px; color: var(--ink); } .user { display: flex; align-items: center; gap: .75rem; } .tag { display: inline-block; background: var(--mute-bg); color: var(--mute-ink); font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; } .content { padding: 1.5rem; width: 100%; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } /* Panels & cards */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; box-shadow: var(--shadow); } .stat:hover { text-decoration: none; border-color: var(--control-line); } .stat-num { font-size: 1.8rem; font-weight: 800; } .stat-label { color: var(--muted); font-size: .85rem; } /* Tables */ .table { width: 100%; border-collapse: collapse; } .table th, .table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; } .table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .table tbody tr:hover, .table tr:hover { background: var(--line-softer); } .row-actions { text-align: right; white-space: nowrap; } /* Pills / status */ .pill { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; } .pill.ok { background: var(--ok-bg); color: var(--ok-ink); } .pill.mute { background: var(--mute-bg); color: var(--mute-ink); } /* Status chips carry one hue each in --h; the tint and ink are derived from it against the current panel, so a single definition works in light and dark. Listed explicitly rather than [class*="status-"] — that would also catch .job-status-form and .jobs-status-filter and tint their backgrounds. */ .status-request, .status-briefed, .status-in_progress, .status-client_review, .status-awaiting_changes, .status-finalised, .status-invoiced, .status-on_hold, .status-archived { background: color-mix(in srgb, var(--h) var(--p-mix-soft), var(--panel)); color: color-mix(in srgb, var(--h) 80%, var(--ink)); } .status-request { --h: #475467; } .status-briefed { --h: #1d4ed8; } .status-in_progress { --h: #b8420f; } .status-client_review { --h: #7e22ce; } .status-awaiting_changes { --h: #92760a; } .status-finalised { --h: #1a7f43; } .status-invoiced { --h: #0e7490; } .status-on_hold { --h: #b42318; } .status-archived { --h: #98a2b3; } /* Filters / chips */ .filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; } .chip { padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: .85rem; cursor: pointer; font-family: inherit; transition: background .15s ease, color .15s ease, border-color .15s ease; } .chip:hover { text-decoration: none; border-color: var(--control-line); } .chip.active { background: var(--ink); color: var(--panel); border-color: var(--ink); } /* Forms */ label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .15rem; } label.inline { display: flex; align-items: center; gap: .5rem; font-weight: 500; } input, select, textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--control-line); border-radius: 8px; font: inherit; color: var(--ink); background: var(--panel); margin-top: .15rem; } label.inline input { width: auto; margin: 0; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } input:disabled, select:disabled, textarea:disabled { background: var(--sunken); color: var(--muted); cursor: not-allowed; } .stack { display: flex; flex-direction: column; gap: .9rem; } .stack.narrow { max-width: none; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } .fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; } .fieldset legend { font-weight: 700; padding: 0 .4rem; } .form-actions { display: flex; gap: .6rem; align-items: center; } /* Buttons */ .btn { display: inline-block; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--btn-line); background: var(--panel); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; } .btn:hover { text-decoration: none; border-color: var(--ink-3); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn.primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); } .btn.small { padding: .3rem .6rem; font-size: .85rem; } /* A disabled button must look disabled — "Push to Outlook" with nothing pending was still rendering full-strength and reading as clickable. */ .btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn.primary:disabled:hover, .btn.primary[disabled]:hover { background: var(--accent); } .link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; } .link.danger { color: var(--danger-ink); } /* Job detail columns */ .cols { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; align-items: start; } .time-add { display: grid; grid-template-columns: 160px 130px 1fr auto; gap: .5rem; margin-bottom: 1rem; } .time-add input { margin-top: 0; } .total { color: var(--brand-ink); font-size: 1.05rem; } .meta { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin: 0; } .meta dt { color: var(--muted); font-weight: 600; } .meta dd { margin: 0; } .over { color: var(--danger-ink); font-weight: 600; } .under { color: var(--ok-ink); font-weight: 600; } /* Alerts */ .alert { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-weight: 500; } .alert.success { background: var(--ok-bg); color: var(--ok-ink); } .alert.error { background: var(--danger-bg); color: var(--danger-ink); } /* Auth */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--accent-soft); } .auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 2rem; width: 100%; max-width: 380px; box-shadow: var(--shadow); } .auth-card.center { text-align: center; } .auth-card .brand { color: var(--ink); padding: 0 0 .25rem; } /* Two-factor authentication */ .auth-card-wide { max-width: 440px; } .auth-title { font-size: 1.25rem; margin: .25rem 0 .35rem; } .twofa-steps { margin: 1rem 0; padding-left: 1.1rem; color: var(--ink); font-size: .9rem; line-height: 1.5; } .twofa-steps li { margin-bottom: .35rem; } .qr-box { display: flex; justify-content: center; padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: .5rem auto 1rem; width: max-content; } .qr-box img, .qr-box canvas { display: block; } .totp-secret { text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.1rem; letter-spacing: .12em; background: var(--accent-soft); border-radius: 8px; padding: .6rem; margin: .25rem 0 1rem; word-break: break-all; } .code-input { text-align: center; font-size: 1.4rem; letter-spacing: .35em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .twofa-cancel { text-align: center; margin-top: 1rem; } .linkish { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .85rem; text-decoration: underline; padding: .25rem; } .linkish:hover { color: var(--ink); } .recovery-grid { list-style: none; margin: 1rem 0; padding: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .75rem; background: var(--accent-soft); border-radius: 10px; } .recovery-grid li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; letter-spacing: .05em; text-align: center; } .twofa-recovery-actions { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1rem; } .check-line { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; color: var(--ink); } .check-line input { width: auto; margin-top: .15rem; } .twofa-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; } /* Timesheet / calendar reconcile */ .date-nav { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; } .date-nav .btn { padding: .3rem .6rem; } /* Segmented day stepper: ‹ date › in one bordered control, as the design has it. */ .date-stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--control-line); border-radius: var(--radius); padding: 3px; } .date-stepper a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; border-radius: 7px; color: var(--ink-2); } .date-stepper a:hover { background: var(--nav-hover-bg); text-decoration: none; } .date-stepper strong { font-size: 13.5px; padding: 0 12px; } .today-chip { display: inline-flex; align-items: center; height: 38px; font-size: 13px; font-weight: 600; padding: 0 14px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-ink); } .today-chip:hover { text-decoration: none; background: var(--accent-line); } .today-chip.is-today { background: var(--sunken); color: var(--muted); } .event-card { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: .75rem; margin-bottom: .75rem; background: var(--accent-wash); } .event-dismiss { position: absolute; top: 6px; right: 6px; margin: 0; } .event-x { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.25rem; line-height: 1; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .event-x:hover { background: var(--danger-bg); color: var(--danger-ink); } .event-head { display: flex; flex-direction: column; margin-bottom: .5rem; } .event-form { display: flex; flex-direction: column; gap: .5rem; } .event-form select { margin-top: 0; } .event-row { display: grid; grid-template-columns: 90px 1fr auto; gap: .4rem; } .event-row input { margin-top: 0; } /* Notifications */ .notif-list { list-style: none; margin: 0; padding: 0; } .notif-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem .25rem; border-bottom: 1px solid var(--line); } .notif-list li.unread { background: var(--accent-wash); } .notif-main { display: flex; flex-direction: column; } .notif-meta { text-align: right; white-space: nowrap; display: flex; flex-direction: column; gap: .2rem; } /* Comments */ .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list li { padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .5rem; background: var(--line-softer); } .comment-list li.mine { background: var(--accent-wash); } .comment-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; flex-wrap: wrap; } .comment-body { white-space: pre-wrap; } /* Inline forms inside table cells */ .inline-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .inline-form select, .inline-form input { margin-top: 0; width: auto; } /* Client portal */ body.portal { background: var(--bg); } .portal-bar { display: flex; align-items: center; gap: 1.5rem; background: var(--nav-bg); color: var(--nav-fg-strong); padding: .85rem 1.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--nav-line); } .portal-brand { color: var(--nav-fg-strong); display: flex; align-items: center; } .portal-brand svg { height: 26px; } .portal-brand:hover { text-decoration: none; } .portal-nav { display: flex; gap: 1rem; flex: 1; } .portal-nav a { color: var(--nav-fg); } .portal-nav a:hover, .portal-nav a.active { color: var(--nav-fg-strong); text-decoration: none; } .portal-user { display: flex; align-items: center; gap: .75rem; } .portal-user .link { color: var(--nav-fg); } .portal-content { max-width: none; margin: 0; padding: 1.5rem; } .portal-user .bell { color: var(--nav-fg); } .portal-user .icon-btn { color: var(--nav-fg); } /* List table sort */ table.sortable thead th { user-select: none; } .sort-ind { color: var(--brand); font-size: .8em; } /* Collapsible search */ .search { display: inline-flex; align-items: center; vertical-align: middle; margin-bottom: .75rem; } .search-btn { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 5px; display: inline-flex; border-radius: 8px; } .search-btn:hover { color: var(--ink); background: var(--mute-bg); } .search input { width: 0; padding: 0; border: 1px solid transparent; opacity: 0; margin: 0; transition: width .25s ease, opacity .2s ease, padding .2s ease; } .search.open input { width: 240px; opacity: 1; padding: .45rem .6rem; border-color: var(--control-line); margin-left: .35rem; } .head-actions .search { margin-bottom: 0; } /* Segmented view toggle (list / board) */ .view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); } .view-toggle button { border: 0; background: var(--panel); padding: .4rem .85rem; font: inherit; cursor: pointer; color: var(--muted); transition: background .15s ease, color .15s ease; } .view-toggle button.active { background: var(--accent); color: var(--accent-contrast); } /* Multi-select dropdown (custom) */ .multiselect { position: relative; display: inline-block; } .ms-btn { border: 1px solid var(--control-line); background: var(--panel); border-radius: 8px; padding: .45rem .7rem; font: inherit; cursor: pointer; min-width: 140px; text-align: left; } .ms-btn::after { content: '▾'; float: right; margin-left: .5rem; color: var(--muted); } .ms-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 210px; max-height: 300px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(16,24,40,.14); padding: .35rem; display: none; } .multiselect.open .ms-menu { display: block; } .ms-menu label { display: flex; align-items: center; gap: .5rem; font-weight: 500; padding: .35rem .4rem; border-radius: 6px; cursor: pointer; white-space: nowrap; } .ms-menu label:hover { background: var(--mute-bg); } .ms-menu input { width: auto; margin: 0; } /* Portal soft animations */ body.portal .panel { transition: box-shadow .2s ease, transform .15s ease; } body.portal .panel:hover { box-shadow: 0 4px 16px rgba(16,24,40,.08); } body.portal .table tbody tr { transition: background .15s ease; } body.portal .table tbody tr:hover { background: var(--accent-wash); } body.portal .btn, body.portal .portal-nav a, body.portal .pill { transition: background .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease; } body.portal .btn:active { transform: translateY(1px) scale(.99); } body.portal a { transition: color .12s ease; } /* Financial-year income */ /* Kanban board */ .kanban { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; } .kanban-col { background: var(--sunken); border-radius: 10px; padding: .5rem; min-width: 250px; width: 250px; flex-shrink: 0; } .kanban-col-head { font-weight: 700; font-size: .85rem; padding: .25rem .25rem .5rem; } .kanban-list { min-height: 50px; display: flex; flex-direction: column; gap: .5rem; } .kanban-list.drag-over { outline: 2px dashed var(--brand); outline-offset: -3px; border-radius: 8px; } .kanban-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .6rem; cursor: grab; box-shadow: var(--shadow); } .kanban-card.dragging { opacity: .4; } .kc-num { font-weight: 700; color: var(--accent); } .kc-name { font-weight: 500; margin: .15rem 0; } /* Financial-year income */ .income-panel { display: flex; flex-direction: column; gap: .15rem; } .income-num { font-size: 2rem; font-weight: 800; color: var(--brand-ink); } /* Header action buttons */ .head-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } /* Billing type cards */ .billing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .75rem; } .billing-card { display: flex; flex-direction: column; gap: .2rem; border: 1px solid var(--line); border-radius: 10px; padding: .75rem; cursor: pointer; } .billing-card input { position: absolute; opacity: 0; pointer-events: none; } .billing-card .bc-title { font-weight: 700; } .billing-card .bc-desc { font-size: .8rem; color: var(--muted); } .billing-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } /* ============================ DASHBOARD ================================= */ .dash-head { margin-bottom: 22px; } .dash-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 5px; } .dash-head p { margin: 0; font-size: 14.5px; } .t-danger { color: var(--danger); } .t-warn { color: var(--warn); } .t-ok { color: var(--ok); } .mono { font-family: var(--font-mono); } /* Stat cards */ .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; color: var(--ink); } a.stat-card:hover { text-decoration: none; border-color: var(--control-line); } .sc-label { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; font-weight: 600; margin-bottom: 12px; } .sc-label svg { width: 16px; height: 16px; flex-shrink: 0; } .sc-num { font-family: var(--font-mono); font-size: 32px; font-weight: 500; line-height: 1; } .sc-num-sub { font-size: 17px; color: var(--muted); } /* Money runs longer than a job count, so it needs to shrink to fit the card. */ .sc-money { font-size: 26px; word-break: break-word; } .sc-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; } .dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; } .dash-rail { display: flex; flex-direction: column; gap: 20px; } /* A panel whose children run edge to edge (rows carry their own padding). */ .panel-flush { padding: 0; overflow: hidden; } .panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .panel-flush .panel-bar { padding: 18px 20px; border-bottom: 1px solid var(--line-soft); } .panel-bar h2 { margin: 0; font-size: 16px; font-weight: 700; } .link-arrow { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent-ink); } .link-arrow:hover { text-decoration: none; color: var(--accent); } /* Deadlines */ .dl-empty { padding: 22px 20px; margin: 0; } .dl-group { padding: 12px 20px 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .dl-group.overdue { color: var(--danger); } .dl-group.due { color: var(--warn); } .dl-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; color: var(--ink); border-left: 3px solid transparent; border-top: 1px solid var(--line-softer); } .dl-row.overdue { border-left-color: var(--danger); } .dl-row.due { border-left-color: var(--warn); } .dl-row:hover { text-decoration: none; background: var(--line-softer); } .dl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dl-name { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dl-client { font-size: 12.5px; color: var(--muted); } /* The design's type chips are one word ("Web"); real project-type names run to "Web Design & Development" and would swamp the row. Cap and ellipsis — the full name is on the row's title attribute. */ .dl-type { flex-shrink: 0; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* An empty track means "no estimate" — deliberately blank rather than 0%. */ .dl-bar { width: 64px; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; flex-shrink: 0; } .dl-bar > span { display: block; height: 100%; background: var(--accent); } .dl-due { width: 82px; text-align: right; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink-2); flex-shrink: 0; } .dl-more { display: block; padding: 14px 20px; font-size: 13px; font-weight: 600; color: var(--ink-3); border-top: 1px solid var(--line-softer); } .dl-more:hover { color: var(--accent-ink); text-decoration: none; } .avatar-sm { width: 36px; height: 36px; } .avatar-sm .avatar-initials { font-size: 12px; color: var(--ink-2); } /* My time */ .mt-total { display: flex; align-items: baseline; gap: 8px; margin: 16px 0; } .mt-num { font-family: var(--font-mono); font-size: 30px; font-weight: 500; line-height: 1; } .mt-chart { display: flex; align-items: flex-end; gap: 10px; height: 74px; margin-bottom: 8px; } .mt-day { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; } .mt-bar { width: 100%; background: var(--accent); border-radius: 5px; } .mt-bar.today { background: var(--accent-line); } .mt-letter { font-size: 11px; color: var(--muted); } .mt-letter.today { color: var(--accent-ink); font-weight: 600; } .btn-soft { border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); } .btn-soft:hover { border-color: var(--accent); text-decoration: none; } .mt-log { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; height: 40px; } .mt-log svg { width: 16px; height: 16px; } /* Team capacity */ .cap-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .cap-row { display: flex; align-items: center; gap: 12px; } .cap-row .avatar-sm { width: 30px; height: 30px; } .cap-row .avatar-initials { font-size: 11.5px; } .cap-meta { flex: 1; min-width: 0; } .cap-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 4px; } .cap-pct { color: var(--muted); } .cap-pct.high, .cap-pct.over { color: var(--warn); } .cap-track { display: block; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; } .cap-fill { display: block; height: 100%; background: var(--ok); } .cap-fill.high { background: var(--warn); } .cap-fill.over { background: var(--danger); } @media (max-width: 1100px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } .dash-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .stat-cards { grid-template-columns: 1fr; } /* The type chip and progress bar go first when space is tight. */ .dl-type, .dl-bar { display: none; } } /* ============================ CALENDAR PLANNER ========================== */ /* One compact toolbar row: month label + stepper + Today left, zoom right. The old page heading and Overview/Plan switch live in the sidebar now. The appbar→toolbar gap matches the toolbar→grid gap (14px each), so the calendar pages trim the content's default 24px top padding. */ .content:has(.cal-top) { padding-top: 14px; } .cal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .cal-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; } .cal-title.label-in { animation: calLabel .35s cubic-bezier(.22, 1, .36, 1) both; } @keyframes calLabel { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .cal-actions { display: flex; align-items: center; gap: 10px; } /* Segmented control (Overview/Plan, Month/Week/Day) */ .seg { position: relative; display: inline-flex; gap: 2px; background: var(--panel); border: 1px solid var(--control-line); border-radius: var(--radius); padding: 3px; } .seg a { position: relative; z-index: 1; padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: color .18s ease, background-color .18s ease; } .seg a:hover { text-decoration: none; background: var(--nav-hover-bg); } .seg a.active { background: var(--accent-soft); color: var(--accent-ink); } /* JS floats a pill under the active option and slides it on click; the links' own active background steps aside so the pill is the highlight. */ .seg-pill { position: absolute; top: 3px; height: calc(100% - 6px); border-radius: 7px; background: var(--accent-soft); z-index: 0; transition: left .22s cubic-bezier(.22, 1, .36, 1), width .22s cubic-bezier(.22, 1, .36, 1); } .seg.has-pill a.active { background: transparent; } .seg.has-pill a:hover:not(.active) { background: var(--nav-hover-bg); } .cal-sub { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .cal-nav { display: flex; align-items: center; gap: 12px; } .cal-nav h2 { margin: 0; font-size: 17px; font-weight: 700; } .cal-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); } .lg { display: inline-flex; align-items: center; gap: 6px; } .lg-dot { width: 10px; height: 10px; border-radius: 3px; } /* Queue + lanes side by side; overview drops the queue entirely. */ .plan-wrap { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; } .plan-wrap.has-queue { grid-template-columns: 300px 1fr; } .queue-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft); } .queue-head .panel-bar { margin-bottom: 3px; } .queue-head h2 { font-size: 15px; } .queue-list { max-height: 620px; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .queue-empty { padding: 12px 4px; } .queue-card { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); padding: 11px 12px; cursor: grab; } .queue-card:hover { border-color: var(--accent-line); box-shadow: 0 2px 8px -3px rgba(30,29,26,.15); } .queue-card.dragging { opacity: .4; } .qc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .qc-name { font-size: 13px; font-weight: 600; line-height: 1.3; } .qc-hint { margin-top: 6px; } /* (Bars in the month and week grids share the .mgrip handles and drag styles defined with the month grid below.) */ /* --- Month grid --------------------------------------------------------- */ /* The month view locks to the window: the page doesn't scroll, the grid fills whatever height is left under the appbar and toolbar, and only the campaign queue scrolls inside itself. :has() scopes this to pages that mount .cal-app, so every other screen keeps the normal document flow. */ .content:has(.cal-app) { height: calc(100dvh - 64px); display: flex; flex-direction: column; overflow: hidden; } .content:has(.cal-app) .cal-top { flex-shrink: 0; } .cal-app { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* Soft entry: every calendar view fades in as it loads. */ .cal-top, .cal-app { animation: calViewIn .28s ease both; } @keyframes calViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .cal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; } .cal-body.has-queue { grid-template-columns: 300px 1fr; } /* Queue column: header fixed, list scrolls within the viewport. */ .cal-queue { display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; transition: box-shadow .15s ease; } .cal-queue .queue-head { flex-shrink: 0; } .cal-queue .queue-list { flex: 1; min-height: 0; max-height: none; transition: background .15s ease; } .cal-queue .queue-card { touch-action: none; } .queue-card.lifting { opacity: .35; } /* A bar carried over the queue: dropping it here clears its dates. */ .cal-queue.queue-hot { box-shadow: inset 0 0 0 2px var(--accent-line); border-color: var(--accent-line); } .cal-queue.queue-hot .queue-list { background: var(--accent-wash); } /* A drag surface, not a document: stray drags must never turn into text selection. */ .month-panel, .cal-queue { user-select: none; -webkit-user-select: none; } .month-panel { display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; } .month-wdays { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line-soft); flex-shrink: 0; } .month-wdays span { padding: 9px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } /* The viewport clips month transitions; the grids are absolute so an outgoing and incoming month can slide past each other. --mday-head is the room the day number keeps above the bars; --lane-h is one campaign line. month.js reads both to know how many lanes fit a row. */ .month-viewport { --mday-head: 27px; --lane-h: 22px; position: relative; flex: 1; min-height: 0; overflow: hidden; } .month-grid { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(var(--mrows, 5), 1fr); transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; will-change: transform, opacity; } .month-grid.slide-in-up { transform: translateY(52px); opacity: 0; } .month-grid.slide-in-down { transform: translateY(-52px); opacity: 0; } .month-grid.slide-settle { transform: none; opacity: 1; } .month-grid.slide-out-up { transform: translateY(-52px); opacity: 0; } .month-grid.slide-out-down { transform: translateY(52px); opacity: 0; } .mrow { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line-softer); min-height: 0; } .mrow:last-child { border-bottom: 0; } .mday { position: relative; border-right: 1px solid var(--line-softer); padding: 3px 5px; min-width: 0; transition: background .15s ease, box-shadow .15s ease; } .mday:last-child { border-right: 0; } .mday.wkend { background: var(--raised); } /* Spillover days of the previous/next month: present, droppable, but greyed. */ .mday.out { background: color-mix(in srgb, var(--sunken) 45%, var(--panel)); } .mday.out .mday-num { color: var(--faint); } .mday.drop-hot { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-line); } .mday-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin: 2px; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-2); } .mday-num:hover { background: var(--nav-hover-bg); text-decoration: none; } .mday.is-today .mday-num { background: var(--accent); color: var(--accent-contrast); font-weight: 600; } /* Campaign bars: one line each — number + name. Absolute over the week row so a span can run across several day columns; the lanes layer passes pointer events through everywhere except the bars themselves, keeping the tiles droppable. */ .mlanes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .mlanes .mbar, .mlanes .mbar-more { pointer-events: auto; } .mbar { position: absolute; height: 20px; display: flex; align-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 6px; overflow: hidden; touch-action: none; transition: box-shadow .15s ease; } .mbar.editable { cursor: grab; } .mbar.editable:hover { box-shadow: 0 2px 10px -3px rgba(30, 29, 26, .35); } .mbar.dragging { box-shadow: 0 6px 18px -4px rgba(30, 29, 26, .4); z-index: 5; } /* A bar continuing past this week keeps going — square the cut edge. */ .mbar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 1px; border-left-style: dashed; } .mbar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; } .mbar-txt { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 0 7px; font-size: 11.5px; line-height: 1; white-space: nowrap; } .mbar-no { font-family: var(--font-mono); font-size: 10px; color: var(--accent-ink); flex-shrink: 0; } .mbar-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; } .mbar.pop-in { animation: barPop .35s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes barPop { from { transform: scale(.86); opacity: 0; } to { transform: none; opacity: 1; } } .mbar-more { position: absolute; left: 6px; height: 20px; display: flex; align-items: center; padding: 0 6px; font-size: 10.5px; font-weight: 600; color: var(--muted); } /* Resize grips on either end of a bar; the coloured nub appears on hover. */ .mgrip { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 2; touch-action: none; } .mgrip.start { left: -2px; } .mgrip.end { right: -2px; } .mgrip::after { content: ''; position: absolute; top: 4px; bottom: 4px; left: 3px; width: 3px; border-radius: 2px; background: var(--accent); opacity: 0; transition: opacity .12s ease; } .mbar:hover .mgrip::after { opacity: .75; } /* While anything is being dragged, bars must not swallow the hit-test: the drop target is always the day tile underneath. */ .cal-app.is-dragging .mbar, .cal-app.is-dragging .mbar-more { pointer-events: none; } .cal-app.is-dragging .mday-num { pointer-events: none; } body.no-select { user-select: none; -webkit-user-select: none; cursor: grabbing; } /* The queue card that follows the cursor. */ .drag-ghost { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; margin: 0; opacity: .95; box-shadow: 0 18px 40px -12px rgba(30, 29, 26, .45); transform-origin: top left; } /* Floating date readout while placing or resizing. */ .drag-tip { position: fixed; left: 0; top: 0; z-index: 10001; pointer-events: none; background: var(--inverse-bg); color: var(--inverse-fg); font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; border-radius: 6px; opacity: 0; transition: opacity .12s ease; white-space: nowrap; } .drag-tip.show { opacity: 1; } /* Save feedback (errors roll the change back and explain here). */ .cal-toast { position: fixed; bottom: 22px; left: 50%; z-index: 10002; background: var(--inverse-bg); color: var(--inverse-fg); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 10px; box-shadow: var(--shadow-pop); opacity: 0; transform: translate(-50%, 12px); transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1); } .cal-toast.show { opacity: 1; transform: translate(-50%, 0); } .cal-toast.error { background: var(--danger); color: #fff; } @media (max-width: 900px) { /* Not enough width for a queue column: it becomes a short strip above the grid, which then takes the rest of the height. */ .cal-body.has-queue { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; } } /* --- Week: job bars in lanes ACROSS the day grid ------------------------ */ /* The panel is the positioning context: the seven columns lay out normally, and the bars overlay them in lanes just below the day headers. --wlanes (set by plan.js) is how the columns know to leave headroom for the bars. */ .week-panel { position: relative; --wd-head-h: 42px; --wlane-h: 27px; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; } .week-days { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 0; } .week-day { border-right: 1px solid var(--line-softer); min-height: 140px; min-width: 0; transition: background .15s ease, box-shadow .15s ease; } .week-day:last-child { border-right: 0; } .week-day.weekend { background: var(--raised); } .week-day.is-today { background: var(--accent-wash); } .week-day.is-today .wd-label { color: var(--accent-ink); } .week-day.drop-hot { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-line); } .wd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; height: var(--wd-head-h); padding: 10px 12px; border-bottom: 1px solid var(--line-softer); } .wd-head:hover { text-decoration: none; background: var(--nav-hover-bg); } .wd-label { font-size: 13px; font-weight: 600; color: var(--ink); } .wd-label .mono { font-weight: 400; color: var(--faint); } .wd-total { font-size: 10.5px; color: var(--muted); } /* Chips start below the bar lanes; the padding animates as lanes come and go. */ .wd-body { padding: 8px; padding-top: calc(var(--wlanes, 0) * var(--wlane-h) + 8px); display: flex; flex-direction: column; gap: 6px; transition: padding-top .2s cubic-bezier(.22, 1, .36, 1); } .wd-chip { border-radius: 9px; padding: 7px 8px; background: var(--sunken); border-left: 3px solid var(--faint); } .wd-chip-name { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25; margin: 2px 0; } .wd-chip-h { font-size: 10px; color: var(--ink-3); } .week-lanes { position: absolute; top: var(--wd-head-h); left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; } .week-lanes .wbar { pointer-events: auto; } .wbar { position: absolute; height: 23px; margin-top: 5px; display: flex; align-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 7px; overflow: hidden; touch-action: none; transition: box-shadow .15s ease; } .wbar.editable { cursor: grab; } .wbar.editable:hover { box-shadow: 0 2px 10px -3px rgba(30, 29, 26, .35); } .wbar.dragging { box-shadow: 0 6px 18px -4px rgba(30, 29, 26, .4); z-index: 5; } .wbar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 1px; border-left-style: dashed; } .wbar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; } .wbar.pop-in { animation: barPop .35s cubic-bezier(.34, 1.56, .64, 1) both; } .wbar .mbar-txt { font-size: 12px; } .wbar:hover .mgrip::after { opacity: .75; } #week-app.is-dragging .wbar { pointer-events: none; } #week-app.is-dragging .wd-head, #week-app.is-dragging .wd-chip { pointer-events: none; } /* Sidebar: campaign folders with their unplaced jobs, then loose jobs. */ .qfolder { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--raised); } .qf-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 11px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); } .qf-head:hover { background: var(--nav-hover-bg); } .qf-chev { display: inline-flex; color: var(--muted); transition: transform .2s cubic-bezier(.22, 1, .36, 1); flex-shrink: 0; } .qfolder.open .qf-chev { transform: rotate(90deg); } .qf-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .qf-name { font-size: 13px; font-weight: 600; line-height: 1.25; } .qf-count { flex-shrink: 0; } .qf-jobs { display: none; flex-direction: column; gap: 6px; padding: 0 8px 8px; } .qfolder.open .qf-jobs { display: flex; animation: subIn .2s ease both; } .qf-jobs .queue-card { background: var(--panel); } .q-heading { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 4px 0; } .queue-card.pop-in { animation: barPop .3s cubic-bezier(.34, 1.56, .64, 1) both; } /* Any sidebar panel that accepts a drag-back glows the same way. */ .queue.queue-hot, .day-queue.queue-hot { box-shadow: inset 0 0 0 2px var(--accent-line); } .queue.queue-hot .queue-list, .day-queue.queue-hot .queue-list { background: var(--accent-wash); } /* A contractor's week draws their campaigns above the jobs, a shade stronger. */ .wbar.camp { background: var(--accent-line); border-color: var(--accent-line); } .wbar.camp .mbar-name { font-weight: 700; } /* Contractor calendars are read-only: clicks land on the day, not the bar. */ .is-contractor .wbar, .is-contractor .mbar { pointer-events: none; } .is-contractor .week-day, .cal-app.is-contractor .mday { cursor: pointer; } /* Hand-off zone at the sidebar's foot: drop a job to assign it. */ .drop-assign { margin: 10px; padding: 16px 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1.5px dashed var(--control-line); border-radius: 11px; color: var(--muted); font-size: 12.5px; font-weight: 600; transition: border-color .15s ease, background .15s ease, color .15s ease; } .drop-assign.zone-hot { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); } /* Assign-to-contractor modal: searchable person list. */ #assign-modal .modal-box { max-width: 400px; } .assign-list { max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .assign-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; border: 1px solid transparent; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; } .assign-person:hover { background: var(--nav-hover-bg); } .assign-person.selected { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); font-weight: 600; } /* Read-only day detail sheet (contractor click-through / admin team view). */ .info-sheet { max-width: 420px; } .info-row { padding: 10px 2px; border-top: 1px solid var(--line-softer); } .info-row .qc-top { margin-bottom: 3px; } /* Team day detail: each contractor's rows carry their colour. */ .who-heading { display: flex; align-items: center; gap: 7px; padding-top: 14px; } .who-row { border-left: 3px solid var(--who, transparent); padding-left: 10px; } /* Audit log page */ .audit-search { display: flex; align-items: center; gap: 8px; } .audit-search input { width: 320px; margin: 0; } .pill.audit-fail { background: var(--danger-bg); color: var(--danger-ink); } .audit-details { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1100px) { .plan-wrap.has-queue { grid-template-columns: 1fr; } .queue-list { max-height: 260px; } /* Seven columns can't survive a narrow screen; scroll them instead. */ .week-panel { overflow-x: auto; } .week-days { min-width: 780px; } } /* ---- Detail-page headers (job, campaign, client) ----------------------- */ .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: 14px; } .back-link:hover { color: var(--accent-ink); text-decoration: none; } .detail-title { font-size: 23px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 7px; } .detail-no { font-family: var(--font-mono); color: var(--accent-ink); font-size: 19px; margin-right: 9px; } .detail-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 13.5px; color: var(--ink-3); } .detail-meta .sep { color: var(--faint); } /* ============================ Job detail ============================ */ .jd-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 20px; align-items: start; } .jd-pad { padding: 18px 20px; } .panel-sub { margin: 2px 0 0; } .btn-bar { display: inline-flex; align-items: center; gap: 6px; padding: .35rem .8rem; font-size: 12.5px; } .link.small { font-size: .85rem; } .jd-rail-h { font-size: 15px; font-weight: 700; margin: 0 0 12px; } /* Grid rows shared by the Deliverables and Files panels */ .jd-cols-head { display: grid; gap: 14px; padding: 10px 20px; border-bottom: 1px solid var(--line-soft); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--p-muted); } .jd-row { display: grid; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line-softer); align-items: start; } .jd-row:first-of-type { border-top: 0; } .jd-del-cols { grid-template-columns: minmax(0, 1fr) 76px 70px 160px; } .jd-file-cols { grid-template-columns: minmax(0, 1fr) 76px 200px 170px; align-items: center; } /* Deliverable rows */ .jd-del-main { min-width: 0; } .deliv-title { font-size: 14px; font-weight: 600; color: var(--ink); } .deliv-title:hover { color: var(--accent-ink); text-decoration: none; } .jd-del-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .jd-del-actions .btn { padding: .3rem .6rem; font-size: .85rem; } .jd-del-actions form { margin: 0; } /* File chips on deliverables: eye = client visibility */ .jd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .jd-chip-form { display: inline; margin: 0; } .jd-chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; border: 1px solid; cursor: pointer; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jd-chip.is-shared { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); } .jd-chip.is-hidden { background: var(--sunken); color: var(--muted); border-color: var(--control-line); } .jd-chip.is-hidden svg { opacity: .45; } button.jd-chip:hover { border-color: var(--accent); } span.jd-chip { cursor: default; } /* Files panel: folder bar + upload + rows */ .jd-folder { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line-softer); background: var(--raised); } .jd-folder-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--info-bg); color: var(--info); flex-shrink: 0; } .jd-folder-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; } .jd-folder-label { font-size: 11px; font-weight: 600; color: var(--p-muted); letter-spacing: .03em; text-transform: uppercase; } .jd-folder-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jd-upload { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line-softer); } .jd-upload input[type="file"] { flex: 1; min-width: 0; font-size: .85rem; } .jd-file-main { display: flex; align-items: center; gap: 11px; min-width: 0; } .jd-ext { display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 40px; padding: 0 6px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-mono); font-size: 10px; font-weight: 600; flex-shrink: 0; } .jd-file-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jd-link-form { display: flex; gap: 6px; margin: 0; } .jd-link-form select { flex: 1; min-width: 0; font-size: 12px; padding: .3rem .4rem; } .jd-file-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; } .jd-file-actions form { margin: 0; } .jd-vis { display: inline-flex; align-items: center; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 7px; border: 1px solid transparent; cursor: pointer; } .jd-vis.is-on { background: var(--ok-bg); color: var(--ok-ink); } .jd-vis.is-off { background: var(--sunken); color: var(--muted); border-color: var(--control-line); } button.jd-vis:hover { border-color: var(--accent); } span.jd-vis { cursor: default; } /* Comments: internal/client segmented toggle (CSS-only radios) */ .seg-toggle { display: flex; gap: 2px; background: var(--sunken); border: 1px solid var(--control-line); border-radius: 9px; padding: 2px; width: fit-content; } .seg-toggle label { cursor: pointer; } .seg-toggle input { position: absolute; opacity: 0; pointer-events: none; } .seg-toggle span { display: inline-block; font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-radius: 7px; color: var(--ink-2); } .seg-toggle input:checked + span { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); } .jd-comment-row { display: flex; gap: 10px; align-items: flex-start; } .jd-comment-row textarea { flex: 1; min-width: 0; } .jd-tag-internal { background: var(--warn-bg); color: var(--warn-ink); } .comment-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Rail: key/value details */ .jd-kv-list { display: flex; flex-direction: column; gap: 12px; } .jd-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .jd-kv-label { font-size: 13px; color: var(--ink-3); } .jd-kv-val { font-size: 13px; font-weight: 500; text-align: right; } .jd-kv-total { padding-top: 12px; border-top: 1px solid var(--line-soft); } .jd-kv-total .jd-kv-label { font-weight: 600; } .jd-billable { font-size: 14px; font-weight: 600; color: var(--accent-ink); } .jd-status-select { width: 100%; height: 40px; font-weight: 600; } /* Rail: "Client sees" card */ .jd-client-sees { background: var(--accent-wash); border-color: var(--accent-line); } .jd-cs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .jd-cs-head h3 { margin: 0; font-size: 14px; font-weight: 700; } .jd-cs-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--accent-contrast); flex-shrink: 0; } .jd-cs-rows { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--ink-2); } .jd-cs-row { display: flex; justify-content: space-between; gap: 8px; } .jd-cs-hint { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; } @media (max-width: 980px) { .jd-grid { grid-template-columns: 1fr; } .jd-file-cols { grid-template-columns: minmax(0, 1fr) 76px; } .jd-file-cols .jd-link-form, .jd-file-cols .jd-file-actions { grid-column: 1 / -1; justify-content: flex-start; } } /* ============================ Clients ============================ */ /* Source chip: where the record is owned (Xero-synced vs local-only) */ .src-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--mute-bg); color: var(--mute-ink); text-transform: uppercase; letter-spacing: .03em; } .src-chip.is-xero { background: var(--teal-bg); color: var(--teal); } /* Card view */ .client-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* display:grid outranks the UA's [hidden] rule — restate it or the List toggle can't hide the cards. */ .client-cards[hidden] { display: none; } .cc-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 16px 18px; box-shadow: var(--shadow); cursor: pointer; } .cc-card:hover { border-color: var(--accent-line); } .cc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .cc-name { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-stats { display: flex; gap: 24px; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 13px; } .cc-stat { display: flex; flex-direction: column; min-width: 0; } .cc-num { font-size: 18px; font-weight: 500; line-height: 1.2; } .cc-label { font-size: 11.5px; color: var(--muted); } .cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } @media (max-width: 1100px) { .client-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .client-cards { grid-template-columns: 1fr; } } /* Detail header + stat strip */ .cd-head { display: flex; align-items: center; gap: 14px; min-width: 0; } .cd-stats { margin-bottom: 20px; } .btn-xero { display: inline-flex; align-items: center; gap: 6px; background: var(--teal-bg); border-color: var(--teal-line); color: var(--teal); font-weight: 600; } .btn-xero:hover { border-color: var(--teal); color: var(--teal); } /* Invoices rows on the client page */ .cd-inv-cols { grid-template-columns: 130px 1fr 130px 150px; align-items: center; } .cd-inv-row { color: inherit; } .cd-inv-row:hover { background: var(--accent-wash); text-decoration: none; } .cd-inv-amount { font-size: 13px; font-weight: 500; text-align: right; } /* Rail: contacts + notes */ .cd-contacts { display: flex; flex-direction: column; gap: 12px; } .cd-contact { display: flex; align-items: center; gap: 11px; min-width: 0; } .cd-contact-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; } .cd-contact-name { font-size: 13.5px; font-weight: 600; } .cd-contact-meta .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cd-manage { display: block; width: 100%; text-align: center; margin-top: 14px; font-size: 12.5px; } .cd-notes { background: var(--raised); } .cd-notes h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; } .cd-notes textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .88rem; } /* ======================= LIST TABLES (jobs, clients …) =================== */ /* A table inside a flush panel: the design's list views are cards with rows, but these stay real s so the existing sort/filter JS keeps working. */ /* Scroll rather than wrap when narrow — the design gives its list views a min-width for the same reason. Squeezing these columns turns a date into two lines and a status pill into three. */ .table-panel { overflow-x: auto; } .table-panel .table { min-width: 940px; } .table-panel .table td.mono, .table-panel .table td .pill { white-space: nowrap; } .table-panel .table th { padding: 12px 20px; border-bottom: 1px solid var(--line-soft); border-top: 0; font-size: 11.5px; letter-spacing: .04em; } .table-panel .table td { padding: 13px 20px; border-bottom: 0; border-top: 1px solid var(--line-softer); } .table-panel .table tbody tr:first-child td { border-top: 0; } .job-no { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--accent-ink); } .job-name { font-size: 14px; font-weight: 600; color: var(--ink); } .job-name:hover { color: var(--accent-ink); } /* Assignee cell: avatar + name */ .who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .who-name { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .avatar-xs { width: 26px; height: 26px; flex-shrink: 0; } .avatar-xs .avatar-initials { font-size: 10px; color: var(--ink-2); } /* Jobs "Priority" view — deadline buckets. Overdue gets a red heading. */ .pri-bucket { margin-bottom: 16px; } .pri-bucket.is-overdue .panel-bar h2 { color: var(--danger-ink); } .pri-bucket .panel-bar .pri-count { margin: 0; } /* Fixed layout + one shared colgroup keeps every bucket table's columns equal. The name column is the flexible one; long content truncates, not wraps. */ .pri-table { table-layout: fixed; } .pri-table .c-no { width: 92px; } .pri-table .c-client { width: 16%; } .pri-table .c-type { width: 13%; } .pri-table .c-urg { width: 128px; } .pri-table .c-due { width: 132px; } .pri-table .c-who { width: 160px; } .pri-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Whole-row navigation on the jobs tables */ #jobs-list-view tbody tr[data-href], #jobs-priority-view tbody tr[data-href] { cursor: pointer; } #jobs-list-view tbody tr[data-href]:hover, #jobs-priority-view tbody tr[data-href]:hover { background: var(--accent-wash); } /* Inline cell editing: a pencil appears when the cell is hovered. It is absolutely positioned so it takes no layout space — cell content never shifts or truncates to make room for it. */ td[data-edit] { position: relative; } .cell-pencil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: var(--panel); padding: 3px; color: var(--muted); opacity: 0; cursor: pointer; border-radius: 5px; line-height: 0; box-shadow: var(--shadow); } td[data-edit]:hover .cell-pencil { opacity: 1; } .cell-pencil:hover, .cell-pencil:focus-visible { color: var(--accent-ink); background: var(--accent-soft); opacity: 1; } td.editing .cell-display, td.editing .cell-pencil { display: none; } .cell-editor input, .cell-editor select { width: 100%; max-width: 230px; padding: .3rem .45rem; font: inherit; font-size: .85rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--panel); color: var(--ink); } /* Client marks are square-ish, to read as an org rather than a person. */ .client-avatar { border-radius: 8px; background: var(--accent-soft); } .client-avatar .avatar-initials { color: var(--accent-ink); font-weight: 700; } a.who:hover { text-decoration: none; } a.who:hover .job-name { color: var(--accent-ink); } /* "Synced with Xero" status chip (Clients, Invoicing) */ .sync-chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border: 1px solid var(--teal-line); border-radius: var(--radius); background: var(--teal-bg); color: var(--teal); font-size: 12.5px; font-weight: 600; } .sync-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; } .sync-chip.is-off { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn); } a.sync-chip.is-off:hover { text-decoration: none; filter: brightness(.97); } /* Flush-panel form footer (e.g. Invoicing's "Send selected to Xero") */ .panel-foot { padding: 14px 20px; border-top: 1px solid var(--line-soft); } /* Generic clickable table rows (anywhere a row carries data-href) */ tr.row-link { cursor: pointer; } tr.row-link:hover { background: var(--accent-wash); } /* Campaigns index: card columns grouped Active / Upcoming / Complete */ .camp-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; } .camp-groups[hidden] { display: none; } .camp-group { display: flex; flex-direction: column; gap: 12px; } .camp-group-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; } .camp-dot { width: 9px; height: 9px; border-radius: 999px; } .dot-active { background: var(--accent); } .dot-upcoming { background: var(--warn); } .dot-complete { background: var(--ok); } .camp-group-label { font-size: 13px; font-weight: 700; } .camp-group-count { font-size: 12px; color: var(--muted); } .camp-group-empty { margin: 2px; } .camp-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .camp-card-name { font-size: 15px; font-weight: 600; line-height: 1.3; } .camp-card-sub { margin-bottom: 12px; } .camp-progress-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; } .camp-bar { height: 6px; background: var(--sunken); border-radius: 3px; overflow: hidden; } .camp-bar span { display: block; height: 100%; background: var(--accent); } .camp-bar span.is-done { background: var(--ok); } .camp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; } .camp-avatars { display: flex; } .camp-avatars .avatar { margin-left: -6px; border: 2px solid var(--panel); } .camp-avatars .avatar:first-child { margin-left: 0; } .camp-done-note { color: var(--ok-ink); font-weight: 600; } @media (max-width: 1100px) { .camp-groups { grid-template-columns: 1fr; } } /* Campaign detail: billing rail card */ .cmp-stage-btn { width: 100%; margin-top: 4px; } .cmp-stage-list { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid var(--line-soft); } .cmp-stage-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line-softer); color: inherit; } .cmp-stage-row:hover { background: var(--accent-wash); text-decoration: none; } /* ---- Kanban board ------------------------------------------------------ */ .kanban-col { border: 1px solid var(--line); border-radius: var(--radius-card); } .kanban-col-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 6px 6px 8px; } .kc-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; background: currentColor; } .kc-count-wrap { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; } .kanban-card { border-radius: 11px; padding: 12px; } .kc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; } .kc-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--accent-ink); } .kc-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; margin: 0 0 10px; } .kc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kc-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Appearance: white-label branding ---------------------------------- */ .brand-assets { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 1.5rem; } .brand-asset-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; } .brand-tile { width: 72px; height: 72px; border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--accent); color: var(--accent-contrast); font-size: 30px; font-weight: 700; } .brand-tile img { width: 100%; height: 100%; object-fit: contain; } .brand-tile.empty { background: var(--raised); border: 1px dashed var(--control-line); color: var(--muted); } .brand-field { flex: 1; min-width: 240px; } .brand-readonly { height: 40px; border: 1px solid var(--control-line); border-radius: var(--radius); background: var(--raised); display: flex; align-items: center; padding: 0 14px; font-size: 14px; color: var(--ink-3); } .brand-readonly strong { color: var(--ink); font-weight: 500; } /* Accent swatches. Each swatch paints itself from its own inline --sw value, so adding a preset is a one-line markup change with no new CSS. */ .accent-swatches { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .accent-sw { position: relative; display: inline-flex; cursor: pointer; } .accent-sw input { position: absolute; opacity: 0; pointer-events: none; } .accent-sw span { width: 34px; height: 34px; border-radius: 999px; background: var(--sw); display: block; } .accent-sw:has(input:checked) span { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--sw); } .accent-custom { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; } .accent-custom input[type="color"] { width: 42px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid var(--control-line); background: var(--panel); cursor: pointer; margin: 0; } .accent-custom input[type="text"] { width: 110px; font-family: var(--font-mono); text-transform: uppercase; margin: 0; } /* Light / Dark / System cards — previews are pure CSS, no assets */ .mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .mode-card { border: 1px solid var(--control-line); border-radius: 12px; padding: 14px; cursor: pointer; font-weight: 400; position: relative; } .mode-card input { position: absolute; opacity: 0; pointer-events: none; } .mode-card:has(input:checked) { border-color: var(--accent); border-width: 1.5px; background: var(--accent-soft); } .mode-card:has(input:checked) .mc-name { color: var(--accent); } /* display:block is load-bearing — these are s, and an inline box ignores height, collapsing the preview to its border. */ .mc-prev { display: block; height: 56px; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--line); } .mc-prev.light { background: linear-gradient(135deg, #ffffff 60%, #f1f0ec); } .mc-prev.dark { background: linear-gradient(135deg, #1b1a18 60%, #33322e); border-color: transparent; } .mc-prev.system { background: linear-gradient(135deg, #ffffff 50%, #1b1a18 50%); } .mc-row { display: flex; align-items: center; gap: 8px; } .mc-dot { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--control-line); flex-shrink: 0; } .mode-card:has(input:checked) .mc-dot { border: 5px solid var(--accent); } .mc-name { font-size: 13.5px; font-weight: 600; } /* Estimated vs actual bars (green = estimate, red overlay = actual) */ /* Estimated vs actual: ONE bar, chunked — a segment per deliverable with time tracked, then a grey segment for job-level time (no deliverable), against a target tick at the estimate. Segment colours are an accent ramp (color-mix) so the chart stays white-label under any accent. */ .ea-track { position: relative; display: flex; height: 16px; background: var(--sunken); border-radius: 8px; } .ea-seg { height: 100%; min-width: 3px; } .ea-seg:first-child { border-radius: 8px 0 0 8px; } .ea-seg:last-of-type { border-radius: 0 8px 8px 0; } .ea-seg:first-child:last-of-type { border-radius: 8px; } .ea-seg + .ea-seg { box-shadow: inset 1px 0 0 var(--panel); } /* hairline between chunks */ .ea-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 2px; } .ea-seg-1 { background: var(--accent); } .ea-seg-2 { background: color-mix(in srgb, var(--accent) 62%, var(--panel)); } .ea-seg-3 { background: color-mix(in srgb, var(--accent) 36%, var(--panel)); } .ea-seg-4 { background: color-mix(in srgb, var(--accent) 68%, var(--ink)); } .ea-seg-5 { background: color-mix(in srgb, var(--accent) 38%, var(--ink)); } .ea-seg-job { background: var(--faint); } .ea-legend { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: .65rem; font-size: .85rem; } .ea-legend strong.mono { font-weight: 600; margin-left: .15rem; } .ea-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: .3rem; } .ea-key-marker { width: 3px; background: var(--ink); border-radius: 2px; } /* Expense add row */ .expense-add { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .expense-add input[type=text] { flex: 1; min-width: 160px; } .expense-add input { margin-top: 0; } /* Login footer */ .auth-foot { position: fixed; bottom: 1rem; left: 0; right: 0; text-align: center; color: var(--muted); font-size: .8rem; } /* Login screen: background stays eggshell (seamless with the sign-out fade); UI elements fade in */ .login-screen .auth-card { animation: cardIn .5s ease both; } .login-screen .auth-foot { animation: cardIn .6s ease both; } @keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Login animation overlay */ .login-anim { position: fixed; inset: 0; z-index: 9999; background: var(--inverse-bg); color: var(--inverse-fg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; opacity: 1; animation: laFade 2.2s ease forwards; } .la-logo svg { height: 46px; width: auto; } .la-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--inverse-fg) 30%, transparent); border-top-color: var(--inverse-fg); animation: laSpin .8s linear infinite; } @keyframes laSpin { to { transform: rotate(360deg); } } @keyframes laFade { 0%, 72% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } /* Sign-out fade overlay (eggshell) */ .fade-ocean { position: fixed; inset: 0; z-index: 9999; background: var(--accent-soft); opacity: 0; transition: opacity .45s ease; pointer-events: none; } .fade-ocean.show { opacity: 1; } /* "I'M OVERWHELMED" button + experience */ .overwhelmed-btn { background: var(--inverse-bg); border-color: var(--inverse-bg); color: var(--inverse-fg); font-weight: 800; letter-spacing: .04em; } .overwhelmed-btn:hover { background: var(--inverse-bg-hover); border-color: var(--inverse-bg-hover); color: var(--inverse-fg); text-decoration: none; } /* Fade-to-static when leaving the dashboard */ .tv-fade { position: fixed; inset: 0; z-index: 9999; background: #050505; opacity: 0; transition: opacity .5s ease; pointer-events: none; } .tv-fade.show { opacity: 1; } /* TV-static reception overlay on the overwhelmed page */ .tv-static { position: fixed; inset: 0; z-index: 9998; background: #050505; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .8s ease; } .tv-static.fade-out { opacity: 0; pointer-events: none; } .tv-static canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .8; } .tv-static .tv-caption { position: relative; z-index: 1; color: #fff; font-size: 1.4rem; font-weight: 700; letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0,0,0,.8); animation: owCaption 1.5s ease both; } @keyframes owCaption { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 1; } } /* The grouped list fades in once the static clears */ .overwhelmed-list { animation: owListIn 1s ease .4s both; } @keyframes owListIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .ow-bucket h2 { font-size: 1rem; } /* Urgency badge (1 = highest). u-1 hot, then cooling down. */ .urgency { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); } .urgency.u-1 { background: #d92d20; color: #fff; } .urgency.u-2 { background: #f36c21; color: #fff; } .urgency.u-3 { background: #f5a623; color: #3a2a00; } .urgency.u-4 { background: #fad000; color: #3a3000; } .urgency.u-5 { background: #cfe3d4; color: #14532d; } /* Modal overlays (new job / new campaign / add deliverable / review calendar). Every overlay fades in on open; JS adds .closing before hiding so dismissal fades out too. */ body.modal-open { overflow: hidden; } .modal-overlay { position: fixed; inset: 0; z-index: 9997; background: rgba(0, 39, 47, .55); display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; overflow-y: auto; } .modal-overlay[hidden] { display: none; } .modal-overlay, .confirm-modal, .spotlight { animation: overlayIn .18s ease both; } .modal-overlay.closing, .confirm-modal.closing, .spotlight.closing { animation: overlayOut .16s ease both; pointer-events: none; } @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } } .modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); width: 100%; max-width: 460px; padding: 1.5rem; animation: modalIn .25s ease both; } .modal-box-wide { max-width: 860px; } @keyframes modalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; } .modal-head h2 { margin: 0; } .modal-x { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 .25rem; } .modal-x:hover { color: var(--ink); } /* Review Calendar: square cards, 3 across, scrolling within the modal */ .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .btn-badge { display: inline-flex; align-items: center; gap: .4rem; } .btn-badge .pill { margin: 0; } .review-card { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-wash); padding: .7rem; display: flex; flex-direction: column; gap: .35rem; overflow: hidden; } .review-dismiss { position: absolute; top: 4px; right: 4px; margin: 0; } .review-head { display: flex; flex-direction: column; gap: .15rem; padding-right: 1.2rem; } .review-form { display: flex; flex-direction: column; gap: .4rem; flex: 1; } .review-form select, .review-form input { width: 100%; box-sizing: border-box; padding: .28rem .4rem; font-size: .82rem; } .review-card .review-head strong { font-size: .85rem; line-height: 1.2; } .review-card .qa-btn, .review-card .review-row .btn { padding: .28rem .5rem; font-size: .82rem; } .qa-row { display: flex; gap: .3rem; } .qa-row .qa-input { flex: 1; min-width: 0; } .review-row { display: flex; gap: .3rem; margin-top: auto; } .review-row input { flex: 1; min-width: 0; } @media (max-width: 760px) { .review-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================ Timesheet ============================ */ /* Toolbar: date stepper on the left, Outlook calendar-source card on the right. */ .ts-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .cal-source { display: flex; align-items: center; gap: 10px; margin-left: auto; height: 44px; padding: 0 12px 0 10px; background: var(--panel); border: 1px solid var(--control-line); border-radius: var(--radius); } .cal-source.is-off { opacity: .85; } .cal-source-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: var(--info-bg); color: var(--info); flex-shrink: 0; } .cal-source.is-off .cal-source-icon { background: var(--mute-bg); color: var(--muted); } .cal-source-meta { display: flex; flex-direction: column; line-height: 1.25; } .cal-source-meta strong { font-size: 12.5px; } .cal-source-meta .small { font-size: 11px; } .cal-source-sep { width: 1px; height: 24px; background: var(--line-soft); } .cal-source-refresh { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); } .cal-source-refresh:hover { text-decoration: none; color: var(--accent); } /* Two-column layout: calendar review (main) + logged today (rail). */ .ts-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } .ts-rail { display: flex; flex-direction: column; gap: 20px; } .ts-rail .panel, .ts-grid .panel { margin-bottom: 0; } .ts-pad { padding: 18px 20px; } /* Inline calendar review — overrides the square modal cards. */ .ts-review-list { display: flex; flex-direction: column; } .ts-review-list .review-card { position: static; aspect-ratio: auto; border: 0; border-top: 1px solid var(--line-softer); border-radius: 0; background: none; padding: 16px 20px; gap: .5rem; } .ts-review-list .review-head { flex-direction: row; align-items: flex-start; gap: 10px; padding-right: 0; } .ts-review-list .review-head-main { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; } .ts-review-list .review-head strong { font-size: .92rem; } .ts-review-list .review-dismiss { position: static; margin: 0; } .ts-review-list .review-auto { align-self: center; } .ts-review-list .review-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .ts-review-list .review-form [data-job-select] { grid-column: 1 / -1; } .ts-review-list .review-form .qa-row { grid-column: 1 / -1; } .ts-review-list .review-row { grid-column: 1 / -1; margin-top: 0; } .ts-review-list .review-form select, .ts-review-list .review-form input { padding: .4rem .5rem; font-size: .86rem; } /* Logged today summary card. */ .ts-logged-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 14px 0 10px; } .ts-logged-num { display: flex; align-items: baseline; gap: 8px; } .ts-logged-num .mono { font-size: 30px; font-weight: 500; line-height: 1; } .ts-split-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 10px; } .ts-split-legend strong { color: var(--ink); } .ts-split-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .dot-bill { background: var(--accent); } .dot-nonbill { background: var(--faint); } .ts-split-bar { display: flex; height: 10px; background: var(--sunken); border-radius: 5px; overflow: hidden; } .ts-seg-bill { background: var(--accent); } .ts-seg-nonbill { background: var(--faint); } /* Logged entries list. */ .ts-entries { list-style: none; margin: 0; padding: 0; } .ts-entry { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line-softer); } .ts-entry-main { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; } .ts-entry-job { color: var(--ink); font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ts-entry-job .mono { color: var(--accent-ink); font-weight: 500; } .ts-entry-job:hover { text-decoration: none; color: var(--accent-ink); } .ts-entry-hrs { font-size: .9rem; } .ts-entry-del { margin: 0; flex-shrink: 0; } @media (max-width: 900px) { .ts-grid { grid-template-columns: 1fr; } .ts-rail { flex-direction: column; } } /* Click-the-title filter */ .title-search { display: flex; align-items: center; gap: .75rem; } .title-search .page-title { cursor: pointer; } .title-search .page-title:hover { color: var(--brand-ink); } .title-search-input { padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; max-width: 220px; } /* Settings: sticky sub-nav on the left, a stacked-card column on the right */ .settings-layout { display: grid; grid-template-columns: 236px 1fr; gap: 2rem; align-items: start; } .settings-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; } .settings-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: background .15s ease, color .15s ease; } .settings-nav a svg { flex-shrink: 0; } .settings-nav a:hover { background: var(--line-softer); color: var(--ink); text-decoration: none; } .settings-nav a.active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 600; } .settings-content { max-width: 880px; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; } .settings-content > .panel, .settings-content > form > .panel { margin-bottom: 0; border-radius: var(--radius-panel); padding: 1.5rem; } .settings-content .panel > h2, .scard-head h2 { margin: 0 0 4px; font-size: 1.05rem; } .settings-content .panel > h2 + .muted { margin: 0 0 1.25rem; } /* Card head: title + description left, an action on the right */ .scard-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .scard-head p { margin: 2px 0 0; } .scard-head .btn { white-space: nowrap; } /* Full-bleed row lists inside a card (statuses, members, integrations…) */ .srows { margin: 0 -1.5rem -1.5rem; } .srow { display: flex; align-items: center; gap: 12px; padding: .7rem 1.5rem; border-top: 1px solid var(--line-soft); } .srow:hover { background: var(--line-softer); } .srows .srow:last-child { border-radius: 0 0 calc(var(--radius-panel) - 1px) calc(var(--radius-panel) - 1px); } /* Integration rows: letter icon + name/status/description + action button */ .intg-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-ink); } /* Per-integration settings, nested under the connection row and indented past its icon */ .intg-sub { padding: .9rem 1.5rem 1.1rem calc(1.5rem + 38px + 12px); border-top: 1px solid var(--line-soft); background: var(--line-softer); } /* An integration row that expands in place (Harvest CSV import) */ .intg-details > summary { list-style: none; cursor: pointer; } .intg-details > summary::-webkit-details-marker { display: none; } .intg-details[open] summary .btn { background: var(--line-softer); } .intg-meta { flex: 1; min-width: 0; } .intg-name { display: flex; align-items: center; gap: 10px; font-weight: 700; } /* Numbering preview well */ .num-preview { display: flex; align-items: center; gap: 14px; padding: .85rem 1.1rem; border-radius: 12px; background: var(--accent-wash); border: 1px solid var(--accent-line); } .num-preview strong { font-family: var(--font-mono); font-size: 1.15rem; color: var(--accent-ink); } @media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; } } /* Per-day working hours editor */ .wh-row { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; } .wh-day { width: 90px; font-size: .9rem; } .wh-row input[type="time"] { width: 120px; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; } /* Mark-deliverable-done button */ .done-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .done-btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--accent-contrast); } .done-btn.is-done { background: var(--ok); border-color: var(--ok); color: #fff; } .deliv-complete .deliv-title { text-decoration: line-through; opacity: .55; } /* Calendar day view */ .cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .cal-hours { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; } .cal-hours .cal-hours-label { white-space: nowrap; } .cal-hours input[type="time"] { width: 120px; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; } .cal-legend { display: flex; gap: 1rem; font-size: .85rem; } .cal-key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 0; padding: 0; vertical-align: middle; margin-right: .3rem; } .cal-key.key-outlook { background: var(--inverse-bg); } .cal-key.key-planned { background: var(--accent-soft); border: 1px solid var(--accent-line); } .cal-key.key-pushed { background: var(--accent); } .cal-wrap { overflow-x: hidden; } .cal-grid { position: relative; } .cal-hour { position: absolute; left: 56px; right: 0; border-top: 1px solid var(--line); height: 0; } .cal-hour-label { position: absolute; top: -0.6em; left: -56px; width: 48px; font-size: .72rem; color: var(--muted); text-align: right; padding-right: 8px; background: var(--panel); } /* left/right are a fallback — the view sets left+width inline so overlapping blocks can share the row. Padding and line-height are tight because a 15-minute meeting is only ~13px tall and otherwise clips its own text. */ .cal-block { position: absolute; left: 60px; right: 8px; border-radius: 8px; padding: .15rem .5rem; overflow: hidden; font-size: .8rem; line-height: 1.25; box-sizing: border-box; } .cal-block .cal-time { font-size: .72rem; opacity: .85; } .cal-block strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Outlook events are context, not plan — dark, flat, untouchable. */ .cal-imported { background: var(--inverse-bg); color: var(--inverse-fg); display: flex; align-items: baseline; gap: .45rem; white-space: nowrap; } /* Planned blocks are Nest's own: accent-tinted, draggable, removable. */ .cal-planned { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--ink); touch-action: none; } .cal-planned.draggable { cursor: grab; } .cal-planned.dragging { cursor: grabbing; opacity: .85; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 5; } /* Held over the sidebar: about to leave the plan. */ .cal-planned.for-side { opacity: .45; } .cal-planned.block-out { opacity: 0; transform: scale(.94); transition: opacity .18s ease, transform .18s ease; } /* Top/bottom resize handles: drag to grow or shrink in 15-minute steps. */ .vgrip { position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize; z-index: 2; touch-action: none; } .vgrip.top { top: -3px; } .vgrip.bottom { bottom: -3px; } .vgrip::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 3px; margin: -1.5px 0 0 -15px; border-radius: 2px; background: var(--accent); opacity: 0; transition: opacity .12s ease; } .cal-planned:hover .vgrip::after { opacity: .7; } .cal-planned .cb-x { position: relative; z-index: 3; } /* Already in Outlook — solid, so you can see at a glance what's published. */ .cal-planned.is-pushed { background: color-mix(in srgb, var(--accent) 30%, var(--panel)); border-color: var(--accent); } .cb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } /* Both are block, or they run together into "CLIQ Marketing ContentIN OUTLOOK". */ .cb-sub { display: block; font-size: .72rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-flag { display: block; margin-top: 2px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-ink); } .cb-x { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 1rem; line-height: 1; opacity: .6; padding: 0 .2rem; } .cb-x:hover { opacity: 1; color: var(--danger); } .cal-x { position: absolute; top: 2px; right: 4px; background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; opacity: .6; padding: 0 .2rem; } .cal-x:hover { opacity: 1; } /* Day planner queue: same panel dress as the month/week sidebars. */ /* The day grid panel: legend pinned, the hour grid scrolls inside. */ .day-panel { display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; } .day-panel .cal-toolbar { flex-shrink: 0; margin-bottom: 0; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); } .day-panel .cal-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 18px 18px; } /* Planned for today already, just not given a time — distinguish it from something that isn't on the plan at all. */ .day-queue .queue-card.is-unslotted { border-color: var(--accent-line); background: var(--accent-wash); } /* The grid sits beside the queue, so it can't be a bare block. */ .plan-wrap .cal-wrap { min-width: 0; } /* Click-the-title filter */ .spotlight { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 39, 47, .5); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem 1rem; } .spotlight[hidden] { display: none; } .spotlight-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); width: 100%; max-width: 560px; overflow: hidden; animation: modalIn .2s ease both; } #spotlight-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 1rem 1.1rem; font-size: 1.1rem; box-sizing: border-box; } #spotlight-input:focus { outline: none; } .spotlight-results { list-style: none; margin: 0; padding: .25rem; max-height: 50vh; overflow-y: auto; } .spotlight-results a { display: flex; align-items: baseline; gap: .6rem; padding: .55rem .8rem; border-radius: 8px; color: var(--ink); text-decoration: none; } .spotlight-results a.active, .spotlight-results a:hover { background: var(--accent-soft); } .sp-type { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-contrast); background: var(--accent); border-radius: 999px; padding: .08rem .45rem; flex-shrink: 0; } .sp-label { font-weight: 600; } .sp-sub { margin-left: auto; } .spotlight-empty { padding: .8rem; list-style: none; } .spotlight-hint { padding: .5rem .9rem; border-top: 1px solid var(--line); } .spotlight-hint kbd { background: var(--accent-soft); border-radius: 4px; padding: 0 .3rem; margin: 0 .1rem; } /* Confirm modal */ .confirm-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,39,47,.45); display: flex; align-items: center; justify-content: center; padding: 1rem; } .confirm-modal[hidden] { display: none; } .confirm-box { background: var(--panel); border-radius: 14px; padding: 1.5rem; max-width: 380px; width: 100%; box-shadow: 0 10px 40px rgba(16,24,40,.25); text-align: center; animation: modalIn .22s ease both; } .confirm-msg { margin: 0 0 1.2rem; font-size: 1rem; } .confirm-actions { display: flex; gap: .6rem; justify-content: center; } /* Responsive */ @media (max-width: 860px) { .billing-cards { grid-template-columns: 1fr; } /* Sidebar collapses to an icon rail. The nav items are flex rows at full width, so restack them icon-over-label and drop the group headings — "FINANCE" does not fit in 64px. */ .sidebar { width: 64px; padding: 20px 8px; } .sidebar .brand, .sidebar-foot { display: none; } .sidebar .nav-group, .sidebar .nav-sub { display: none; } .sidebar nav a { flex-direction: column; gap: 3px; text-align: center; font-size: .68rem; padding: .5rem .2rem; } .nav-count { margin-left: 0; } /* The header keeps the bell and Quick actions; the search collapses to its icon. */ .appbar { padding: 0 12px; gap: 10px; } .appbar-search span, .appbar-search kbd { display: none; } .appbar-search { max-width: 38px; justify-content: center; padding: 0; } .qa-btn { padding: 0 12px; } .cols { grid-template-columns: 1fr; } .grid-2, .time-add { grid-template-columns: 1fr; } } /* ---- Campaign timeline (read-only gantt) ---------------------------------- */ .gantt-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; font-size: .85rem; color: var(--muted); } .gantt-key { display: inline-flex; align-items: center; gap: .35rem; } .gantt-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } .gantt { position: relative; overflow-x: auto; } .gantt-axis { position: relative; height: 22px; margin-left: 180px; border-bottom: 1px solid var(--line); } .gantt-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); } .gantt-tick-label { position: absolute; top: 3px; left: 4px; font-size: .72rem; color: var(--muted); white-space: nowrap; } .gantt-ms-flag { position: absolute; top: -1px; transform: translateX(-50%); font-size: .68rem; line-height: 1.35; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 4px; padding: 0 .3rem; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; z-index: 2; } .gantt-body { position: relative; padding-top: .4rem; } .gantt-guides { position: absolute; left: 180px; right: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none; } .gantt-vline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--brand-light); } .gantt-vline.gantt-today { border-left: 2px solid var(--brand); } .gantt-row { position: relative; z-index: 1; display: flex; align-items: center; height: 30px; } .gantt-label { flex: 0 0 180px; width: 180px; padding-right: .6rem; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gantt-track { position: relative; flex: 1 1 auto; align-self: stretch; } .gantt-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 16px; border-radius: 5px; min-width: 3px; box-shadow: var(--shadow); } .gantt-diamond { position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; box-shadow: var(--shadow); } .gantt-ms-list { margin-top: 1rem; } .gantt-ms-list h3 { margin: 0 0 .4rem; } /* ================= Expenses (Finance) ================= */ .stat-cards-3 { grid-template-columns: repeat(3, 1fr); } .qa-ic.exp { background: var(--warn-bg); color: var(--warn-ink); } .btn.danger-soft { background: var(--danger-bg); border-color: var(--danger-bg); color: var(--danger-ink); } .btn.danger-soft:hover { border-color: var(--danger); } .exp-chip { display: inline-block; padding: .15rem .6rem; border-radius: 7px; font-size: .74rem; font-weight: 600; white-space: nowrap; } .exp-chip.k-contractor { background: var(--accent-soft); color: var(--accent-ink); } .exp-chip.k-hard { background: var(--info-bg); color: var(--info); } .exp-chip.s-review { background: var(--warn-bg); color: var(--warn-ink); } .exp-chip.s-done { background: var(--ok-bg); color: var(--ok-ink); } .exp-name { display: block; font-weight: 600; } .exp-date { display: block; } /* Review queue rows */ .exp-review-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-top: 1px solid var(--line-softer); } .exp-review-row:first-of-type { border-top: 0; } .exp-file-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; } .exp-review-meta { flex: 1 1 auto; min-width: 0; } .exp-review-meta .exp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .exp-review-row .btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; } .exp-amount { flex-shrink: 0; min-width: 96px; text-align: right; font-weight: 600; } .exp-file-link { color: var(--muted); } .exp-file-link:hover { color: var(--accent-ink); } /* Review & allocate screen */ .exp-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; align-items: start; } .exp-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .exp-preview-bar .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .exp-preview-body { background: var(--mute-bg); min-height: 520px; display: flex; align-items: stretch; justify-content: center; } .exp-preview-body iframe { width: 100%; min-height: 640px; border: 0; display: block; } .exp-preview-body img { max-width: 100%; align-self: flex-start; padding: 22px; box-sizing: border-box; } .exp-preview-empty { align-self: center; text-align: center; color: var(--muted); padding: 2rem; } .exp-line { display: grid; grid-template-columns: 1fr 1.25fr 96px 28px 30px; gap: 8px; align-items: center; padding: 4px 0; } .exp-line-head { text-transform: uppercase; font-size: 11px; letter-spacing: .04em; font-weight: 600; padding-bottom: 4px; } .exp-line input[type="checkbox"] { justify-self: center; margin: 0; } .exp-line select { min-width: 0; } /* Searchable job/campaign picker (combo = search input + hidden value + list) */ .combo { position: relative; min-width: 0; } .combo-input { width: 100%; box-sizing: border-box; } .combo-list { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: 480px; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); z-index: 40; } .combo-group { padding: 6px 10px 3px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .combo-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; } .combo-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .combo-item:hover, .combo-item.is-active { background: var(--accent-soft); color: var(--accent-ink); } /* Closed-job / archived-campaign flag on a picker row */ .combo-chip { flex-shrink: 0; margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--mute-bg); color: var(--mute-ink); } .combo-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); } /* Match Xero bills: one row per unmatched bill, controls on the right */ .xm-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: .85rem 1.25rem; border-top: 1px solid var(--line-soft); flex-wrap: wrap; } .xm-row:first-child { border-top: 0; } .xm-bill { min-width: 220px; } .xm-name { display: flex; align-items: center; gap: 8px; font-weight: 600; flex-wrap: wrap; } .xm-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .xm-actions select { max-width: 340px; } .exp-line-x { color: var(--muted); } .exp-line-x:hover { color: var(--danger-ink); } .exp-add-line { margin-top: 8px; font-weight: 600; } .exp-totals { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; } .exp-totals > div { display: flex; justify-content: space-between; font-size: .9rem; color: var(--muted); } .exp-totals .mono { color: var(--ink); font-weight: 600; } .exp-totals .t-ok { color: var(--ok-ink); } .exp-totals .t-danger { color: var(--danger-ink); } @media (max-width: 1100px) { .exp-grid { grid-template-columns: 1fr; } .stat-cards-3 { grid-template-columns: 1fr; } }