/* ============================================================ WBSync — design tokens + component styles Built on Tailwind (CDN) with custom CSS for polish. ============================================================ */ /* WCAG — screen-reader-only utility (clip-rect pattern) */ .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; } :root { --color-primary: #4F46E5; --color-primary-dk: #4338CA; --color-primary-lt: #EEF2FF; --color-primary-lt-solid: #EEF2FF; /* opaque twin of primary-lt for sticky/occluding surfaces (frozen WBS cells); identical here since light primary-lt is already opaque */ --color-accent: #F59E0B; --color-success: #10B981; --color-danger: #F43F5E; --color-ink: #0F172A; --color-ink-soft: #334155; --color-muted: #64748B; --color-line: #E2E8F0; --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-surface-alt: #F8FAFC; /* table head / hover stripe */ --color-hover: #F1F5F9; /* row hover, soft-grey chips */ --color-pop: #FFFFFF; /* popovers / modals */ --color-overlay: rgba(15,23,42,0.55); --sidebar-bg: #0F172A; /* sidebar stays dark in light mode */ --sidebar-text: #E2E8F0; --pill-draft-bg: #F1F5F9; --pill-draft-fg: #475569; --pill-submitted-bg: #FEF3C7; --pill-submitted-fg: #92400E; --pill-approved-bg: #D1FAE5; --pill-approved-fg: #065F46; --pill-rejected-bg: #FEE2E2; --pill-rejected-fg: #991B1B; --pill-purple-bg: #EDE9FE; --pill-purple-fg: #5B21B6; --pill-pink-bg: #FCE7F3; --pill-pink-fg: #9D174D; /* Warn / pending highlight (banners + strips, matches clash triad pattern) */ --color-warn-bg: #FFFBEB; --color-warn-border: #FDE68A; --color-warn-fg: #92400E; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.10), 0 2px 4px -1px rgba(15, 23, 42, 0.04); --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.15); } /* ============================================================ DARK THEME — applied via . The boot script in base.html resolves user pref (system|light|dark) and writes the attribute before paint, preventing FOUC. Brand hue stays indigo; surfaces are derived from the slate neutral scale, not by inverting the brand. ============================================================ */ :root[data-theme="dark"] { --color-primary: #818CF8; /* indigo-400 — bumped for contrast on dark */ --color-primary-dk: #6366F1; --color-primary-lt: rgba(129,140,248,0.16); --color-primary-lt-solid: #232B48; /* opaque twin: primary-lt (16% indigo) pre-composited over --color-surface (#111827). Use on sticky/occluding tree surfaces so horizontally-scrolled cells can't ghost through. */ --color-success: #34D399; --color-danger: #FB7185; --color-ink: #F1F5F9; --color-ink-soft: #CBD5E1; --color-muted: #94A3B8; --color-line: #1E293B; --color-bg: #0B1220; --color-surface: #111827; --color-surface-alt: #0F172A; --color-hover: #1E293B; --color-pop: #111827; --color-overlay: rgba(0,0,0,0.65); --sidebar-bg: #060B16; /* slightly deeper than --color-bg */ --sidebar-text: #E2E8F0; --pill-draft-bg: #1E293B; --pill-draft-fg: #CBD5E1; --pill-submitted-bg: rgba(245,158,11,0.18); --pill-submitted-fg: #FCD34D; --pill-approved-bg: rgba(16,185,129,0.18); --pill-approved-fg: #6EE7B7; --pill-rejected-bg: rgba(244,63,94,0.18); --pill-rejected-fg: #FDA4AF; --pill-purple-bg: rgba(139,92,246,0.20); --pill-purple-fg: #C4B5FD; --pill-pink-bg: rgba(236,72,153,0.20); --pill-pink-fg: #F9A8D4; --color-warn-bg: rgba(245,158,11,0.12); --color-warn-border: rgba(245,158,11,0.40); --color-warn-fg: #FCD34D; --shadow-xs: 0 1px 2px rgba(0,0,0,0.30); --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 16px -2px rgba(0,0,0,0.55), 0 2px 4px -1px rgba(0,0,0,0.40); --shadow-lg: 0 20px 40px -12px rgba(0,0,0,0.70); color-scheme: dark; } :root { color-scheme: light; } /* Theme transitions — animate surface/text/border changes only. `body { transition: background … }` would whole-page-flash on toggle, which looks cheap. Targeting components keeps it crisp. */ @media (prefers-reduced-motion: no-preference) { body, .card, .kpi, .topbar, .sidebar, .input, .select, textarea.input, .table th, .table td, .pill, .progress, .auth-card, .mobile-nav, .tree-node, .tree-node.l1, .tree-node.l2, .tree-node.l3, .btn-ghost { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } } /* Soft chart-grid token — Chart.js axes/grid in both modes. */ :root { --color-chart-grid: rgba(15,23,42,0.06); --color-chart-tick: #64748B; } :root[data-theme="dark"] { --color-chart-grid: rgba(255,255,255,0.06); --color-chart-tick: #94A3B8; } /* Clash / danger highlights — used by approval rows, clash banners, over-budget warnings. Stronger than `--color-danger` (which is the solid-fill rose), softer than the pill background. */ :root { --color-clash-bg: #FEF2F2; --color-clash-border: #DC2626; --color-clash-fg: #B91C1C; } :root[data-theme="dark"] { --color-clash-bg: rgba(220,38,38,0.16); --color-clash-border: #F87171; --color-clash-fg: #FCA5A5; } /* Tokens that must NOT invert with theme. `--color-ink` flips light-on-dark in dark mode, so anywhere we want "always-dark surface with light text" (toasts, brand mark backdrop, command-palette overlay) needs its own. */ :root { --color-toast-bg: #0F172A; --color-toast-fg: #F8FAFC; --color-brand-mark-bg: #FFFFFF; } :root[data-theme="dark"] { --color-toast-bg: #1E293B; --color-toast-fg: #F1F5F9; --color-brand-mark-bg: #0F172A; } /* Selection + custom scrollbars — dark-aware. */ ::selection { background: var(--color-primary-lt); color: var(--color-ink); } :root[data-theme="dark"] ::selection { background: rgba(129,140,248,0.32); color: #F8FAFC; } * { scrollbar-color: var(--color-line) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--color-muted); border: 2px solid transparent; background-clip: padding-box; } *, *::before, *::after { box-sizing: border-box; } /* Alpine.js x-cloak — hide elements decorated with x-cloak until Alpine has booted. Without this rule, modals/popovers carrying inline `display:flex` inline styles flash visible on load (or stick visible forever if Alpine fails to load — which is what happened to the stuck ⌘K palette). */ [x-cloak] { display: none !important; } html, body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; color: var(--color-ink); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv02","cv03","cv04","cv11"; margin: 0; } /* Shell layout: fixed sidebar + main */ .app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; } /* min-width:0 lets the content column shrink; overflow-x:clip stops any stray-wide child (e.g. a wide data table that lost its .table-scroll wrapper) from scrolling the WHOLE page horizontally on desktop. Clip leaves the vertical axis visible (so dropdowns/menus still open), real scroll regions keep their own scrollbars, and the sticky sidebar (sibling) is untouched. Mobile already does the same on .app-shell. */ .app-shell > *:nth-child(2) { min-width: 0; overflow-x: clip; } /* NOTE: mobile overrides for .app-shell and .sidebar live at the bottom of this file, AFTER the .sidebar base rules. CSS cascade requires them to come last. */ .sidebar { background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; /* children handle their own scrolling */ } /* Logo stays pinned at the top */ .sidebar > .brand { flex-shrink: 0; padding: 20px 16px 12px; background: var(--sidebar-bg); border-bottom: 1px solid rgba(255,255,255,0.06); } /* Middle scroll zone holds everything between brand and user-foot */ .sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; } .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; } /* User foot stays pinned at the bottom */ .sidebar > .user-foot { flex-shrink: 0; margin-top: 0; padding: 10px 16px 12px; background: var(--sidebar-bg); border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 8px; } /* Switcher takes its natural width (3 × 32px segs + 3px padding both sides = 102px) and centres in the user-foot column. Stretching to fill the column would desync the pill, which positions absolutely from the container's left edge — a 228px-wide container leaves the pill stranded on the system slot when "dark" is selected. */ .sidebar > .user-foot > .theme-switcher { align-self: center; } .sidebar > .user-foot > .user-foot-row { display: flex; align-items: center; gap: 10px; } .app-shell.collapsed .sidebar > .user-foot > .theme-switcher { display: none; } .sidebar .brand { display:flex; align-items:center; gap:10px; } .sidebar .brand-mark { width: 32px; height: 32px; border-radius: 8px; display: block; object-fit: contain; background: var(--color-brand-mark-bg); padding: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 4px 8px rgba(79,70,229,0.35); flex-shrink: 0; } .sidebar .brand-name { font-weight: 700; font-size: 16px; color: #fff; letter-spacing: -0.01em; } .sidebar .brand a, .sidebar .brand a:hover { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .sidebar .section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.10em; color: #475569; text-transform: uppercase; margin: 18px 10px 4px; } .sidebar a, .sidebar a:visited { text-decoration: none; } .sidebar a.nav-item { position: relative; display:flex; align-items:center; gap:10px; padding: 8px 10px; border-radius: var(--radius-sm); color: rgba(203, 213, 225, 0.72); font-size: 13.5px; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; text-decoration: none; } .sidebar a.nav-item:hover { background: rgba(255,255,255,0.06); color:#fff; } .sidebar a.nav-item:hover svg { opacity: 1; } .sidebar a.nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } .sidebar a.nav-item.active { background: linear-gradient(135deg, rgba(79,70,229,0.20), rgba(139,92,246,0.10)); color: #fff; box-shadow: inset 0 0 0 1px rgba(139,92,246,0.25); } .sidebar a.nav-item.active::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; background: var(--color-primary); border-radius: 0 2px 2px 0; } .sidebar a.nav-item.active svg { opacity: 1; color: #C7D2FE; } .sidebar a.nav-item svg { width: 16px; height: 16px; opacity: 0.65; flex-shrink: 0; transition: opacity 0.15s ease; } .sidebar a.nav-item-locked { color: #475569; opacity: 0.55; cursor: not-allowed; } .sidebar a.nav-item-locked:hover { background: transparent; color: #64748B; } .sidebar a.nav-item-locked svg { opacity: 0.5; } /* Command palette trigger (Cmd/Ctrl-K) */ .sidebar .cmdk-trigger { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 4px 0 4px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm); color: rgba(203, 213, 225, 0.70); font-size: 12.5px; cursor: pointer; width: 100%; text-align: left; transition: background 0.15s ease, border-color 0.15s ease; } .sidebar .cmdk-trigger:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color:#fff; } .sidebar .cmdk-trigger svg { width:14px; height:14px; opacity:0.7; flex-shrink:0; } .sidebar .cmdk-trigger .cmdk-label { flex:1; } .sidebar .cmdk-trigger kbd { font-family: inherit; font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.08); color: rgba(203,213,225,0.85); padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.06); } /* Project switcher (in-project dropdown) */ .sidebar .project-switcher-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; margin-bottom: 8px; background: rgba(79,70,229,0.14); border: 1px solid rgba(139,92,246,0.18); border-radius: var(--radius-sm); color: #CBD5E1; cursor: pointer; text-align: left; transition: background 0.15s ease, border-color 0.15s ease; } .sidebar .project-switcher-btn:hover { background: rgba(79,70,229,0.22); border-color: rgba(139,92,246,0.30); } .sidebar .project-switcher-btn .ps-meta { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600; color: rgba(203,213,225,0.65); } .sidebar .project-switcher-btn .ps-code { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar .project-switcher-btn svg { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; } .sidebar .project-switcher-pop { position: absolute; left: 16px; right: 16px; top: 64px; background: #0B1220; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); padding: 6px; z-index: 50; max-height: 360px; overflow-y: auto; } .sidebar .project-switcher-pop .ps-section { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.10em; color: #64748B; padding: 6px 8px 2px; font-weight: 600; } .sidebar .project-switcher-pop a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: rgba(203,213,225,0.85); font-size: 12.5px; text-decoration: none; } .sidebar .project-switcher-pop a:hover { background: rgba(255,255,255,0.08); color: #fff; } .sidebar .project-switcher-pop a svg { width:12px; height:12px; flex-shrink:0; } .sidebar .project-switcher-pop .ps-divider { height:1px; background: rgba(255,255,255,0.08); margin: 4px 4px; } /* Sidebar collapse toggle — sits inside the brand header row */ .sidebar-collapse-toggle { flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; background: transparent; border: 1px solid rgba(255,255,255,0.10); color: rgba(226,232,240,0.75); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; } .sidebar-collapse-toggle:hover { background: rgba(124,58,237,0.18); border-color: rgba(124,58,237,0.55); color: #fff; } .sidebar-collapse-toggle:active { transform: scale(0.94); } .sidebar-collapse-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .sidebar-collapse-toggle svg { width: 17px; height: 17px; transition: transform 0.2s; } .app-shell.collapsed .sidebar-collapse-toggle svg { transform: scaleX(-1); } /* When collapsed, brand row stacks: logo on top, toggle below — both centred */ .app-shell.collapsed .sidebar .brand { flex-direction: column; gap: 12px; } .app-shell.collapsed .sidebar .brand a { flex: 0 0 auto; } .app-shell.collapsed { grid-template-columns: 64px minmax(0, 1fr); } .app-shell.collapsed .sidebar { overflow: visible; } /* Collapsed workspace chip: show just the company avatar, centred. */ .app-shell.collapsed .workspace-chip-wrap { padding: 6px 8px 0; } .app-shell.collapsed .workspace-chip { justify-content: center; padding: 7px; } .app-shell.collapsed .workspace-chip__text, .app-shell.collapsed .workspace-chip__chev { display: none; } .app-shell.collapsed .sidebar-nav { padding: 8px 8px; overflow-x: hidden; } .app-shell.collapsed .sidebar .brand-name, .app-shell.collapsed .sidebar .section-label, .app-shell.collapsed .sidebar .cmdk-trigger .cmdk-label, .app-shell.collapsed .sidebar .cmdk-trigger kbd, .app-shell.collapsed .sidebar .user-foot-info, .app-shell.collapsed .sidebar .ps-meta, .app-shell.collapsed .sidebar .ps-code, .app-shell.collapsed .sidebar .nav-folder-body, .app-shell.collapsed .sidebar .nav-folder-toggle { display: none; } .app-shell.collapsed .sidebar a.nav-item { justify-content: center; padding: 9px; gap: 0; font-size: 0; } .app-shell.collapsed .sidebar a.nav-item svg { width: 18px; height: 18px; } .app-shell.collapsed .sidebar a.nav-item.active::before { left: -8px; } .app-shell.collapsed .sidebar .brand { justify-content: center; padding: 18px 0 12px; } .app-shell.collapsed .sidebar .project-switcher-btn { justify-content: center; padding: 9px; } .app-shell.collapsed .sidebar .cmdk-trigger { justify-content: center; padding: 8px; } .app-shell.collapsed .sidebar .user-foot { justify-content: center; padding: 12px 0; } /* User foot — clickable card with avatar */ .sidebar .user-foot { gap: 10px; } .sidebar .user-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--color-primary), #7C3AED); color: #fff; font-weight: 600; font-size: 11.5px; display: flex; align-items: center; justify-content: center; letter-spacing: 0.02em; } .topbar { height: 60px; background: var(--color-surface); border-bottom: 1px solid var(--color-line); display: flex; align-items:center; justify-content:space-between; padding: 0 24px; position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(180%) blur(8px); /* Query container: the page-actions collapse into the hamburger based on the topbar's OWN width (see @container below), so a collapsed sidebar that frees up room keeps the actions inline — unlike a viewport media query. */ container-type: inline-size; container-name: topbar; } .topbar h1 { font-size: 15px; font-weight: 600; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Topbar page-actions (the per-page {% block topbar_actions %}). On desktop the wrap + panel are display:contents so the buttons flow inline into the topbar exactly as before, and the hamburger toggle is hidden. On mobile they collapse behind the hamburger — see the override in the mobile media query below. */ .topbar-actions-wrap { display: contents; } .topbar-actions { display: contents; } /* Scoped under .topbar so this beats the equal-specificity .btn { display:inline-flex } the toggle also carries — otherwise the hamburger would show on desktop. */ .topbar .topbar-actions-toggle { display: none; } .main { padding: 24px; max-width: 1400px; margin: 0 auto; width: 100%; } /* Cards */ .card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow-xs); transition: box-shadow 0.15s ease, transform 0.15s ease; } .card:hover { box-shadow: var(--shadow-sm); } .card-body { padding: 18px; } .card-header { padding: 16px 18px; border-bottom: 1px solid var(--color-line); display:flex; justify-content:space-between; align-items:center; } .card-header h3 { font-size: 13px; font-weight: 600; color: var(--color-ink-soft); letter-spacing: -0.01em; } /* KPI card */ .kpi { padding: 18px; display: flex; flex-direction: column; gap: 6px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); position: relative; overflow: hidden; } .kpi .kpi-label { font-size: 12px; font-weight: 500; color: var(--color-muted); letter-spacing: 0.01em; } .kpi .kpi-value { font-size: 26px; font-weight: 700; color: var(--color-ink); letter-spacing: -0.02em; line-height: 1.1; } .kpi .kpi-sub { font-size: 12px; color: var(--color-muted); display: flex; align-items: center; gap: 4px; } .kpi .kpi-trend.up { color: var(--color-success); } .kpi .kpi-trend.down { color: var(--color-danger); } .kpi.primary { background: linear-gradient(135deg, var(--color-primary) 0%, #7C3AED 100%); color: #fff; border: none; } .kpi.primary .kpi-label, .kpi.primary .kpi-value, .kpi.primary .kpi-sub { color: #fff; } .kpi.primary .kpi-label { opacity: 0.8; } /* Buttons */ .btn { display:inline-flex; align-items:center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 500; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all 0.12s ease; line-height: 1; white-space: nowrap; } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,0.2); } .btn-primary:hover { background: var(--color-primary-dk); box-shadow: 0 2px 6px rgba(79,70,229,0.35); } .btn-ghost { background: transparent; color: var(--color-ink-soft); border-color: var(--color-line); } .btn-ghost:hover { background: var(--color-hover); } .btn-success { background: var(--color-success); color: #fff; } .btn-danger { background: var(--color-danger); color: #fff; } .btn-sm { padding: 6px 10px; font-size: 12px; } /* Constrain inline button icons. SVGs authored with a 24x24 viewBox but no explicit width/height stretch to fill the flex line — on a full-width mobile button (e.g. the "New project" CTA on /settings) that blows the glyph up to fill the card. Pin every button icon to a sensible size, as the sidebar/nav rules already do for their own SVGs. */ .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-sm svg { width: 14px; height: 14px; } /* Badges / pills */ .pill { display:inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .pill-draft { background: var(--pill-draft-bg); color: var(--pill-draft-fg); } .pill-submitted { background: var(--pill-submitted-bg); color: var(--pill-submitted-fg); } .pill-approved { background: var(--pill-approved-bg); color: var(--pill-approved-fg); } .pill-rejected { background: var(--pill-rejected-bg); color: var(--pill-rejected-fg); } /* Progress bar */ .progress { height: 6px; background: var(--color-hover); border-radius: 999px; overflow: hidden; } .progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), #8B5CF6); border-radius: 999px; transition: width 0.3s ease; } .progress.warn > span { background: linear-gradient(90deg, var(--color-accent), #EA580C); } .progress.over > span { background: linear-gradient(90deg, var(--color-danger), #BE185D); } /* Tables */ .table { width: 100%; border-collapse: separate; border-spacing: 0; } .table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-line); background: var(--color-surface-alt); } .table td { padding: 12px; border-bottom: 1px solid var(--color-line); font-size: 14px; color: var(--color-ink); } .table tr:hover td { background: var(--color-hover); } /* Inputs */ .input, .select, textarea.input { width: 100%; padding: 9px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-size: 14px; background: var(--color-surface); color: var(--color-ink); transition: border-color 0.12s, box-shadow 0.12s; } .input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); } .label { display:block; font-size:12px; font-weight: 600; color: var(--color-ink-soft); margin-bottom: 5px; } /* WBS tree nodes Level hierarchy uses indentation + weight + a thin left accent — never an inverted dark background. The old `.l1 { background: var(--sidebar-bg) }` fought the .is-selected state in light mode (L1 looked permanently "selected" because it inherited the dark sidebar colour). */ .tree-node { display: grid; grid-template-columns: 24px 1fr 100px 140px; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--color-line); align-items: center; font-size: 14px; border-left: 3px solid transparent; } .tree-node:hover { background: var(--color-hover); } .tree-node.l1 { background: var(--color-surface-alt); color: var(--color-ink); font-weight: 700; border-left-color: var(--color-primary); } .tree-node.l2 { background: var(--color-primary-lt-solid); color: var(--color-primary-dk); font-weight: 600; padding-left: 28px; border-left-color: rgba(79,70,229,0.4); } .tree-node.l3 { background: var(--color-surface-alt); color: var(--color-ink-soft); font-weight: 500; padding-left: 44px; } /* L4 (leaf) rows need an explicit opaque background. Without it the row is transparent, which (a) lets the horizontally-scrolling cells ghost/overlap through the row behind the sticky frozen column, and (b) leaves leaves looking see-through. Surface matches the frozen Name cell so the two align. */ .tree-node.l4 { background: var(--color-surface); padding-left: 60px; } .tree-node .tree-caret { cursor: pointer; width: 16px; height: 16px; color: currentColor; opacity: 0.6; } /* Heatmap cell */ .heat { width: 32px; height: 32px; border-radius: 4px; display:inline-block; } .heat-0 { background: #F1F5F9; } .heat-1 { background: #C7D2FE; } .heat-2 { background: #818CF8; } .heat-3 { background: #4F46E5; } .heat-4 { background: #3730A3; } /* Auth layout */ .auth-shell { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 10% 10%, var(--color-primary-lt), transparent), radial-gradient(800px 600px at 90% 90%, rgba(245,158,11,0.10), transparent), var(--color-bg); } .auth-card { width: 100%; max-width: 420px; padding: 32px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ============================================================ THEME TOGGLE — 3-segment pill: System / Light / Dark. Designed against Linear / Vercel / Stripe references. • 32px segments → comfortable hit target (WCAG 2.5.5). • Active segment: indigo→violet gradient pill with brand glow, subtle inner highlight + soft drop shadow for depth. • Inactives: muted neutral with hover fade-up. • Active icon scales 105% with a 220ms spring. • Dedicated rest icon (1.0) and active icon (1.05 + brighter) so the chosen mode reads at a glance. • Sun icon's rays gain a soft glow when active. ============================================================ */ .theme-switcher { display: inline-flex; align-items: center; gap: 0; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); position: relative; } .theme-switcher__seg { appearance: none; background: transparent; border: 0; padding: 0; width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: rgba(226,232,240,0.50); cursor: pointer; transition: color 160ms ease, transform 160ms cubic-bezier(0.32,0.72,0.32,1.2); position: relative; z-index: 1; } .theme-switcher__seg:hover { color: rgba(255,255,255,0.95); transform: translateY(-0.5px); } .theme-switcher__seg:active { transform: translateY(0) scale(0.94); } .theme-switcher__seg:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .theme-switcher__seg svg { width: 15px; height: 15px; transition: transform 220ms cubic-bezier(0.32,0.72,0.32,1.2), filter 200ms ease; } .theme-switcher__seg[aria-checked="true"] { color: #fff; } .theme-switcher__seg[aria-checked="true"] svg { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(255,255,255,0.35)); } /* Sliding pill indicator. Width matches one segment (32px). Pill grows from 90% on click → 100% to suggest physicality. */ .theme-switcher__pill { position: absolute; top: 3px; left: 3px; width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, var(--color-primary) 0%, #7C3AED 100%); box-shadow: 0 2px 10px rgba(79,70,229,0.55), 0 1px 2px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 1px 1px rgba(255,255,255,0.18); transition: transform 260ms cubic-bezier(0.32, 0.72, 0.32, 1.25), box-shadow 200ms ease; z-index: 0; pointer-events: none; } .theme-switcher:hover .theme-switcher__pill { box-shadow: 0 3px 14px rgba(79,70,229,0.65), 0 1px 2px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 1px rgba(255,255,255,0.22); } @media (prefers-reduced-motion: reduce) { .theme-switcher__pill, .theme-switcher__seg, .theme-switcher__seg svg { transition: none; } } :root[data-theme-pref="system"] .theme-switcher__pill { transform: translateX(0); } :root[data-theme-pref="light"] .theme-switcher__pill { transform: translateX(32px); } :root[data-theme-pref="dark"] .theme-switcher__pill { transform: translateX(64px); } :root:not([data-theme-pref]) .theme-switcher__pill { transform: translateX(0); } /* Fallback active-state when JS hasn't run aria-checked yet. */ :root:not([data-theme-pref]) .theme-switcher__seg[data-theme-set="system"], :root[data-theme-pref="system"] .theme-switcher__seg[data-theme-set="system"], :root[data-theme-pref="light"] .theme-switcher__seg[data-theme-set="light"], :root[data-theme-pref="dark"] .theme-switcher__seg[data-theme-set="dark"] { color: #fff; } :root:not([data-theme-pref]) .theme-switcher__seg[data-theme-set="system"] svg, :root[data-theme-pref="system"] .theme-switcher__seg[data-theme-set="system"] svg, :root[data-theme-pref="light"] .theme-switcher__seg[data-theme-set="light"] svg, :root[data-theme-pref="dark"] .theme-switcher__seg[data-theme-set="dark"] svg { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(255,255,255,0.35)); } /* Landing */ .hero-gradient { background: radial-gradient(1200px 600px at 10% 10%, rgba(79,70,229,0.15), transparent), radial-gradient(800px 600px at 90% 50%, rgba(245,158,11,0.12), transparent), linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%); } /* Utilities */ .focus-ring:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .divider { height: 1px; background: var(--color-line); margin: 16px 0; } .muted { color: var(--color-muted); } .stack > * + * { margin-top: 12px; } .hide-mobile { /* visible on desktop — hidden via media query below */ } .show-mobile { display: none; } /* hidden on desktop, shown via media query below */ /* Toast (used via Alpine) */ .toast { position: fixed; bottom: 24px; right: 24px; z-index: 100; background: var(--color-toast-bg); color: var(--color-toast-fg); padding: 12px 18px; border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 14px; } /* Mobile bottom nav */ .mobile-nav { display: none; background: var(--color-surface); } /* Table scroll wrapper — wrap any .table in this div for horizontal scrolling on small screens */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ============================================================ TOPBAR ACTIONS COLLAPSE — container query on the topbar's own width Collapse the per-page actions into the hamburger when the topbar gets too narrow to hold the title + buttons + icons (worst case is the WBS page with six actions, ~820px of content). Querying the topbar container — not the viewport — means a collapsed sidebar that frees up width keeps the actions inline, and an expanded sidebar collapses them sooner. No magic viewport number, and it adapts per layout. ============================================================ */ @container topbar (max-width: 840px) { /* overflow:visible so the absolutely-positioned dropdown isn't clipped. */ .topbar > div { overflow: visible; } /* The wrap becomes the positioning context so the dropdown anchors under the toggle (display:contents on wider screens lets the buttons run inline). */ .topbar-actions-wrap { display: block; position: relative; } .topbar .topbar-actions-toggle { display: inline-flex; } .topbar-actions { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; flex-direction: column; align-items: stretch; gap: 4px; min-width: 210px; max-width: min(78vw, 320px); max-height: calc(100vh - 80px); overflow-y: auto; padding: 8px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.3); } .topbar-actions.is-open { display: flex; } /* Full-width, left-aligned action buttons inside the dropdown. */ .topbar-actions > .btn { width: 100%; justify-content: flex-start; } /* Hide the hamburger when the page renders no actions to collapse. */ .topbar-actions-wrap:not(:has(.topbar-actions > *)) .topbar-actions-toggle { display: none; } } /* ============================================================ MOBILE OVERRIDES — max-width: 768px IMPORTANT: These MUST stay at the bottom of the file so they win the CSS cascade over the base component rules above. ============================================================ */ @media (max-width: 768px) { /* 1. Layout: collapse sidebar, expand main to full width. Clamp body/shell to viewport width — prevents Chart.js canvases initialised at desktop size from inflating the scroll width. */ html { overflow-x: hidden; max-width: 100vw; } /* clip (not hidden) on the intermediate boxes: it clamps horizontal overflow identically but does NOT establish a scroll container, so position:sticky keeps working for the topbar and the dashboard section-nav. (overflow-x:hidden here forced overflow-y to compute to auto, which broke all descendant sticky.) */ body { overflow-x: clip; max-width: 100vw; } /* CSS grid "blowout" fix: grid items default min-width to auto (content size). Setting min-width:0 lets the 1fr track enforce the viewport width. */ .app-shell { grid-template-columns: 1fr; max-width: 100vw; overflow-x: clip; } .app-shell > * { min-width: 0; max-width: 100vw; } .sidebar { display: none; } /* Force Chart.js canvases to fit their container width. Do NOT override height — Chart.js uses fixed height (maintainAspectRatio:false) and overriding it causes an infinite resize loop. */ canvas { width: 100% !important; max-width: 100% !important; } /* Prevent inner grids/flex items from expanding their track */ .main > *, .card, .card-body, .chart-row > *, .seg-grid > * { min-width: 0; } /* 2. Bottom nav */ .mobile-nav { display: grid; /* Auto-flow columns so the bar adapts to its item count: 3 (portfolio), 4 (project), or 5 (project + planning). minmax(0,1fr) keeps every tab an equal, content-independent width and prevents label-driven blowout. */ grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-surface); border-top: 1px solid var(--color-line); z-index: 30; } .mobile-nav a { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; font-size: 10px; color: var(--color-muted); gap: 2px; } .mobile-nav a.active { color: var(--color-primary); } .mobile-nav a svg { width: 20px; height: 20px; } /* 3. Main content padding — extra bottom so content clears the fixed nav */ .main { padding: 16px 16px 90px; } /* 4. Topbar — compact padding. The page actions already collapsed into the hamburger at ≤1024px (block above); here we just tighten spacing and let the button group (hamburger + persistent icons) shrink to fit. */ .topbar { height: auto; min-height: 52px; padding: 6px 12px; gap: 6px; } .topbar h1 { font-size: 14px; } .topbar > div { flex-shrink: 1; min-width: 0; } /* 5. KPI labels — truncate long text that would overflow narrow cards */ .kpi .kpi-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi .kpi-value { font-size: 22px; } /* 6. Utility: show/hide elements on mobile */ .hide-mobile { display: none !important; } .show-mobile { display: block !important; } /* 7. Chart range filter — custom date row breaks to its own full-width line */ .range-filter { flex-direction: column; align-items: flex-start; gap: 6px; } .range-filter .range-btns { display: flex; flex-wrap: wrap; gap: 6px; } .range-filter .range-custom { margin-left: 0 !important; width: 100%; flex-wrap: wrap; } .range-filter .range-custom input { flex: 1; min-width: 100px; } /* 8. At-risk WBS code — truncate so long codes don't break layout */ .at-risk-code { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 9. Productivity table wrapper already has overflow-x:auto via .table-wrap */ /* 6. Base tree-node — collapse to 2 columns (caret + name), hide numeric columns */ .tree-node { grid-template-columns: 24px 1fr; } .tree-node .tree-col-num { display: none; } /* 7. Auth card — reduce padding on small screens */ .auth-card { padding: 24px 18px; } /* 8. Toast — float above the mobile nav instead of overlapping it */ .toast { bottom: 76px; right: 12px; left: 12px; text-align: center; } /* 9. Btn-sm touch target — ensure minimum tap size */ .btn-sm { padding: 8px 12px; } /* 10. Crew log — the crew entry grid and the Already-logged list own their own responsive rules in templates/crew_log.html (nonce'd