:root {
      /* ── Refined Graphite — layered neutral surfaces, one signature accent ── */
      --bg: #0b0d13; --surface: #13161e; --card: #191d27; --elev-3: #20242f;
      --bg-secondary: #13161e;
      --border: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.12);
      --text: #eaeef7; --text-primary: #eaeef7; --text-secondary: #98a2ba; --text-muted: #828ea8;
      --accent: #3b82f6; --accent-hover: #2563eb;
      --accent-soft: rgba(59,130,246,0.12); --accent-edge: rgba(59,130,246,0.45);
      --accent-line: linear-gradient(90deg, #3b82f6, #60a5fa);
      --supply: #3b82f6; --return-color: #8b5cf6; --fresh: #22c55e; --exhaust: #f59e0b;
      --danger: #ef4444; --radius: 12px;
      /* crisp top-light edge + layered depth */
      --edge-light: inset 0 1px 0 rgba(255,255,255,0.06);
      --shadow-1: 0 1px 2px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
      --shadow-2: 0 8px 24px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.06);
      --shadow-3: 0 18px 44px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.07);
      --card-shadow:       var(--shadow-1);
      --card-shadow-hover: var(--shadow-3);
      --spring: cubic-bezier(.2,.8,.2,1);
      --font-mono: 'JetBrains Mono','SF Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
      --glow-blue:   0 0 14px rgba(59,130,246,0.40);
      --glow-purple: 0 0 14px rgba(139,92,246,0.35);
      --glow-green:  0 0 14px rgba(34,197,94,0.35);
      --glow-amber:  0 0 14px rgba(245,158,11,0.35);
      --glow-red:    0 0 14px rgba(239,68,68,0.35);
      color-scheme: dark;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
      background: var(--bg); color: var(--text); height: 100vh; overflow: hidden;
    }

    /* ── Auth overlay ── */
    #authOverlay {
      position: fixed; inset: 0; background: var(--bg);
      display: flex; align-items: center; justify-content: center; z-index: 9999;
    }
    .spinner {
      width: 32px; height: 32px;
      /* ring base follows the active theme accent (ice-blue under airflow) rather
         than a hardcoded old blue-500 — keeps the auth overlay on-theme */
      border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
      border-top-color: var(--accent); border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .spin, .ti-spin { display: inline-block; animation: spin 0.8s linear infinite; }
    @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
    @keyframes bell-ring { 0%,100%{transform:rotate(0)} 15%{transform:rotate(18deg)} 30%{transform:rotate(-14deg)} 45%{transform:rotate(10deg)} 60%{transform:rotate(-6deg)} 75%{transform:rotate(3deg)} }
    .bell-pulse { animation: bell-ring 0.55s ease; }
    .bell-pulse .notif-badge { animation: fadeIn 0.2s ease; }

    /* ── Layout ── */
    .dash-layout { display: grid; grid-template-columns: 60px 1fr; height: 100vh; }

    /* ── Sidebar ── */
    .sidebar {
      background: var(--surface); border-right: 1px solid var(--border);
      display: flex; flex-direction: column; overflow: hidden;
    }
    .sidebar-brand {
      padding: 18px var(--sp-4) var(--sp-3_5); display: flex; align-items: center; gap: var(--sp-2_5);
      border-bottom: 1px solid var(--border);
    }
    .brand-icon {
      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
      background: linear-gradient(135deg, #3b82f6, #60a5fa);
      display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); color: #fff;
    }
    .brand-text { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; }
    .brand-badge {
      font-size: 9px; font-weight: 600; color: #22c55e;
      background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2);
      padding: 1px var(--sp-1_5); border-radius: 10px; display: block; margin-top: var(--sp-0_5);
    }
    .sidebar-user {
      padding: 13px var(--sp-4); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: var(--sp-2_5); cursor: pointer; transition: background 0.15s;
    }
    .sidebar-user:hover { background: rgba(255,255,255,0.03); }
    .user-avatar {
      width: 34px; height: 34px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: var(--text-base); font-weight: 700; color: #fff;
    }
    .user-info { flex: 1; min-width: 0; }
    .user-name { font-size: var(--text-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-sub { font-size: var(--text-xs); color: var(--text-muted); }
    .sidebar-nav { flex: 1; min-height: 0; padding: var(--sp-2_5) var(--sp-2); overflow-y: auto; }
    .nav-label {
      font-size: var(--text-2xs); font-weight: 700; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase; padding: var(--sp-2) var(--sp-2_5) var(--sp-1); margin-top: var(--sp-1);
      display: flex; align-items: center; justify-content: space-between;
      cursor: pointer; user-select: none;
    }
    .nav-label:hover { color: var(--text); }
    .nav-chevron { font-size: var(--text-sm); transition: transform 0.2s; margin-right: var(--sp-0_5); }
    .nav-group.collapsed .nav-chevron { transform: rotate(-90deg); }
    .nav-group-items { overflow: hidden; max-height: 300px; transition: max-height var(--dur-3) var(--ease-standard); }
    .nav-group.collapsed .nav-group-items { max-height: 0; }
    .nav-item {
      display: flex; align-items: center; gap: var(--sp-2_5); padding: 9px var(--sp-2_5); border-radius: 8px;
      font-size: var(--text-base); font-weight: 500; color: var(--text-muted); cursor: pointer;
      transition: all 0.15s; margin-bottom: var(--sp-0_5);
    }
    .nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
    .nav-item.active { background: rgba(59,130,246,0.12); color: var(--accent); }
    .nav-item i { font-size: 17px; flex-shrink: 0; }
    .sidebar-footer { padding: var(--sp-3) var(--sp-2); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-1_5); }
    .btn-sidebar {
      display: flex; align-items: center; gap: var(--sp-2); padding: 9px var(--sp-3); border-radius: 8px;
      font-size: var(--text-base); font-weight: 600; cursor: pointer; border: none; font-family: inherit;
      width: 100%; transition: all 0.15s;
    }
    .btn-open-app { background: var(--accent); color: #fff; }
    .btn-open-app:hover { background: var(--accent-hover); }
    .btn-signout { background: transparent; color: var(--text-muted); }
    .btn-signout:hover { background: rgba(239,68,68,0.08); color: #f87171; }

    /* ── Main ── */
    .dash-main { overflow-y: auto; }
    .dash-section { padding: var(--sp-7) var(--sp-8); animation: fadeIn 0.2s ease; }
    .section-title {
      position: relative; padding-left: var(--sp-4);
      font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 7px;
      background: linear-gradient(118deg, var(--text) 35%, var(--accent) 125%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .section-title::before {
      content: ""; position: absolute; left: 0; top: 5px; bottom: 5px;
      width: 4px; border-radius: 4px;
      background: linear-gradient(180deg, var(--accent), var(--brand-secondary, #60a5fa));
      box-shadow: 0 0 14px -2px var(--accent);
    }
    .section-subtitle { font-size: var(--text-md); color: var(--text-muted); margin-bottom: 26px; padding-left: var(--sp-4); }

    /* ── Buttons ── */
    .btn {
      display: inline-flex; align-items: center; gap: var(--sp-1_5); padding: var(--sp-2) var(--sp-3_5);
      border-radius: 8px; font-size: var(--text-base); font-weight: 600; cursor: pointer;
      border: none; font-family: inherit; transition: all 0.15s;
    }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: var(--accent-hover); }
    .btn-secondary { background: rgba(255,255,255,0.07); color: var(--text); border: 1px solid var(--border); }
    .btn-secondary:hover { background: rgba(255,255,255,0.11); }
    .btn-sm { padding: 5px var(--sp-2_5); font-size: var(--text-sm); }
    .btn-danger-sm {
      display: inline-flex; align-items: center; gap: var(--sp-1);
      background: rgba(239,68,68,0.1); color: #f87171;
      border: 1px solid rgba(239,68,68,0.2); padding: 5px var(--sp-2_5); font-size: var(--text-sm);
      border-radius: 8px; cursor: pointer; font-family: inherit; font-weight: 600; transition: all 0.15s;
    }
    .btn-danger-sm:hover { background: rgba(239,68,68,0.2); }

    /* ── Welcome banner ── */
    .welcome-banner {
      background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(99,102,241,0.06));
      border: 1px solid rgba(59,130,246,0.18); border-radius: var(--radius);
      padding: var(--sp-5) var(--sp-6); margin-bottom: 22px;
      display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    }
    .welcome-text h2 { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--sp-1); }
    .welcome-text p { font-size: var(--text-base); color: var(--text-muted); }
    .welcome-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

    /* ── Stats ── */
    .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3_5); margin-bottom: var(--sp-3_5); }
    .stats-row-2 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--sp-3_5); margin-bottom: 22px; }
    .stat-card {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px var(--sp-5);
    }
    .stat-label {
      font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase;
      letter-spacing: 0.06em; margin-bottom: var(--sp-2_5); display: flex; align-items: center; gap: var(--sp-2);
    }
    .stat-icon {
      width: 26px; height: 26px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center; font-size: var(--text-md);
    }
    .si-blue   { background: rgba(59,130,246,0.12); color: var(--accent); }
    .si-purple { background: rgba(139,92,246,0.12); color: #8b5cf6; }
    .si-green  { background: rgba(34,197,94,0.12);  color: #22c55e; }
    .si-amber  { background: rgba(245,158,11,0.12); color: #f59e0b; }
    .si-red    { background: rgba(239,68,68,0.12);  color: #f87171; }
    .stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
    .stat-value.sm { font-size: var(--text-2xl); padding-top: 5px; }
    .stat-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 5px; }

    /* ── Compliance card ── */
    .compliance-card { display: flex; flex-direction: column; }
    .compliance-card.has-violations { border-color: rgba(239,68,68,0.25); }
    .compliance-card.no-violations  { border-color: rgba(34,197,94,0.2); }
    .compliance-violation-list { display: flex; flex-direction: column; gap: 5px; margin-top: var(--sp-1_5); max-height: 90px; overflow-y: auto; }
    .compliance-violation-item {
      display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--text-sm);
    }
    .compliance-violation-name {
      color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
    }
    .compliance-violation-meta { display: flex; align-items: center; gap: var(--sp-1_5); flex-shrink: 0; }

    /* ── Skeleton ── */
    .skeleton {
      background: linear-gradient(90deg, var(--card) 0%, rgba(255,255,255,0.06) 50%, var(--card) 100%);
      background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px;
    }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* ── Quick actions ── */
    .quick-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: 22px; }

    /* ── Pinned section ── */
    .pinned-section-label {
      display: flex; align-items: center; gap: 7px; font-size: var(--text-md); font-weight: 700;
      margin-bottom: var(--sp-2_5);
    }
    .pinned-section-label i { color: #f59e0b; font-size: var(--text-lg); }

    /* ── Projects grid ── */
    .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2_5); }
    .section-header h3 { font-size: var(--text-md); font-weight: 700; }
    /* auto-fit (not auto-fill): with few cards, auto-fill still reserves empty
       240px tracks sized for the full desktop width, so the real cards stay
       pinned at the minimum width on the left instead of growing to fill the
       row. auto-fit collapses the empty tracks so existing cards share the
       full row width — same wrapping behaviour once there are enough cards
       to fill every column either way. */
    .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3_5); align-items: start; }
    /* Cap how far a single card stretches: with auto-fit + 1fr, one project on a
       wide monitor would otherwise span the whole row, and because the thumb is
       aspect-ratio 3/2 the card balloons to a giant tile. max-width pins a lone
       card to a normal size (aligned left via justify-self); once there are
       enough cards to fill the row, every track is already <= this cap so it has
       no visible effect. */
    .projects-grid > .project-card { max-width: 420px; }
    .projects-grid > .project-card:only-child { justify-self: start; }
    .project-card {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
      overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; display: flex; flex-direction: column;
      min-width: 0; /* grid items default to a content-based min-width; without this the 5-button
                       action row below forced every card (and the whole grid) wider than a phone
                       viewport, so the Overview page had to be scrolled sideways to see it. */
    }
    .project-card:hover { border-color: rgba(59,130,246,0.28); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
    .project-card-thumb {
      width: 100%; aspect-ratio: 3/2; object-fit: cover;
      background: linear-gradient(135deg, #1e2535, #161b27);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); font-size: 28px; flex-shrink: 0;
    }
    .project-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .project-card-body { padding: var(--sp-3_5); flex: 1; display: flex; flex-direction: column; }
    .project-card-top {
      display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: 5px;
    }
    .project-card-name {
      font-size: var(--text-md); font-weight: 600;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
    }
    .project-card-meta {
      font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--sp-2);
      display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
    }
    .project-card-meta i { font-size: var(--text-xs); }
    .badge {
      display: inline-block; background: rgba(59,130,246,0.1); color: var(--accent);
      font-size: var(--text-2xs); font-weight: 700; padding: var(--sp-0_5) 7px; border-radius: 10px;
      border: 1px solid rgba(59,130,246,0.18);
    }
    .project-card-badges { display: flex; align-items: center; gap: var(--sp-1_5); margin-bottom: var(--sp-2_5); flex-wrap: wrap; }
    .project-card-actions { display: flex; gap: var(--sp-1_5); flex-wrap: wrap; }
    .empty-state { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--text-muted); }
    .empty-state i { font-size: 40px; display: block; margin-bottom: var(--sp-2_5); opacity: 0.4; }
    .empty-state p { font-size: var(--text-md); margin-bottom: var(--sp-3_5); }

    /* ── Star button ── */
    .btn-star {
      background: transparent; border: none; cursor: pointer; color: var(--text-muted);
      font-size: 17px; padding: 0; line-height: 1; transition: color 0.15s; flex-shrink: 0;
    }
    .btn-star:hover { color: #f59e0b; }
    .btn-star.pinned { color: #f59e0b; }

    /* ── Status select ── */
    .status-select {
      border: 1px solid; font-family: inherit; font-size: var(--text-2xs); font-weight: 700;
      padding: var(--sp-0_5) var(--sp-1_5); border-radius: 10px; cursor: pointer; letter-spacing: 0.02em;
      appearance: none; -webkit-appearance: none;
    }
    .status-select:focus { outline: none; }
    .status-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .status-select.draft       { background: rgba(139,92,246,0.1); color: #a78bfa; border-color: rgba(139,92,246,0.25); }
    .status-select.in-progress { background: rgba(245,158,11,0.1); color: #fbbf24; border-color: rgba(245,158,11,0.25); }
    .status-select.submitted   { background: rgba(59,130,246,0.1);  color: #60a5fa; border-color: rgba(59,130,246,0.25); }
    .status-select.complete    { background: rgba(34,197,94,0.1);   color: #4ade80; border-color: rgba(34,197,94,0.25); }

    /* ── Project filter bar ── */
    .project-filters {
      display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; align-items: center;
    }
    .filter-search-wrap {
      flex: 1; min-width: 200px; display: flex; align-items: center; gap: var(--sp-2);
      background: var(--card); border: 1px solid var(--border); border-radius: 8px;
      padding: 7px var(--sp-3);
    }
    .filter-search-wrap i { color: var(--text-muted); font-size: var(--text-lg); flex-shrink: 0; }
    .filter-search-wrap input {
      flex: 1; background: transparent; border: none; color: var(--text);
      font-size: var(--text-base); font-family: inherit;
    }
    .filter-search-wrap input:focus { outline: none; }
    .filter-search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .filter-search-wrap input::placeholder { color: var(--text-muted); }
    .filter-select {
      background: var(--card); border: 1px solid var(--border); border-radius: 8px;
      color: var(--text); font-family: inherit; font-size: var(--text-sm); padding: 7px var(--sp-2_5); cursor: pointer;
      width: auto; flex-shrink: 0;
    }
    .filter-select:focus { outline: none; border-color: var(--accent); }

    /* ── Analytics ── */
    .analytics-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3_5); margin-bottom: 22px; }
    .charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-bottom: 22px; }
    .chart-card {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5);
    }
    .chart-title { font-size: var(--text-base); font-weight: 700; margin-bottom: 3px; }
    .chart-subtitle { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--sp-3_5); }
    .chart-wrap { position: relative; height: 200px; }
    .chart-wrap-tall { position: relative; height: 260px; }

    /* ── Tables ── */
    .table-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
    th {
      text-align: left; padding: 11px var(--sp-4); font-size: var(--text-2xs); font-weight: 700;
      color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
      border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    td { padding: 11px var(--sp-4); border-bottom: 1px solid rgba(255,255,255,0.04); }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: rgba(255,255,255,0.02); }

    /* ── Admin ── */
    .role-badge {
      display: inline-block; font-size: var(--text-2xs); font-weight: 700;
      padding: var(--sp-0_5) var(--sp-2); border-radius: 10px;
    }
    .role-badge.admin { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.2); }
    .role-badge.user  { background: rgba(139,92,246,0.1);  color: #a78bfa; border: 1px solid rgba(139,92,246,0.18); }
    .activity-feed { display: flex; flex-direction: column; gap: var(--sp-2); }
    .activity-item {
      background: var(--card); border: 1px solid var(--border); border-radius: 8px;
      padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-base);
    }
    .activity-icon {
      width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
      background: rgba(59,130,246,0.1); color: var(--accent);
      display: flex; align-items: center; justify-content: center;
    }
    .activity-text { flex: 1; }
    .activity-time { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

    /* ── Admin Notifications ── */
    .notif-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 17px; height: 17px; padding: 0 var(--sp-1); border-radius: 9px;
      background: var(--danger); color: #fff; font-size: var(--text-2xs); font-weight: 700;
      vertical-align: middle; margin-left: var(--sp-1); line-height: 1;
    }
    .admin-tab .notif-badge { font-size: 9px; min-width: 15px; height: 15px; }
    .admin-notif-panel {
      /* min(...) so the panel never exceeds the viewport between 769–820px,
         before the ≤768px full-width override kicks in. */
      position: fixed; left: 72px; top: 64px; width: min(340px, calc(100vw - 88px)); max-height: 480px;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      box-shadow: 0 8px 32px rgba(0,0,0,0.45); z-index: 900; overflow: hidden;
      display: flex; flex-direction: column;
    }
    .admin-notif-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
      font-size: var(--text-base); font-weight: 700; flex-shrink: 0;
    }
    .admin-notif-header .btn-link {
      background: none; border: none; color: var(--accent); font-size: var(--text-sm);
      cursor: pointer; padding: 0;
    }
    .admin-notif-header .btn-link:hover { text-decoration: underline; }
    .admin-notif-header-actions { display: flex; align-items: center; gap: var(--sp-2); }
    .admin-notif-close {
      width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer;
      background: transparent; color: var(--text-muted);
      display: flex; align-items: center; justify-content: center; font-size: var(--text-lg);
      transition: background 0.15s, color 0.15s;
    }
    .admin-notif-close:hover { background: rgba(255,255,255,0.07); color: var(--text); }
    .admin-notif-list { overflow-y: auto; flex: 1; }
    .admin-notif-item {
      padding: 11px var(--sp-4); border-bottom: 1px solid rgba(255,255,255,0.04);
      display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
      font-size: var(--text-base); transition: background 0.12s;
    }
    .admin-notif-item:last-child { border-bottom: none; }
    .admin-notif-item:hover { background: rgba(255,255,255,0.04); }
    .admin-notif-item.unread { background: rgba(59,130,246,0.06); }
    .admin-notif-item.unread .admin-notif-icon { background: rgba(59,130,246,0.18); color: var(--accent); }
    .admin-notif-icon {
      width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
      background: rgba(255,255,255,0.06); color: var(--text-muted);
      display: flex; align-items: center; justify-content: center; font-size: var(--text-md);
    }
    .admin-notif-body { flex: 1; min-width: 0; }
    .admin-notif-title { font-weight: 600; margin-bottom: var(--sp-0_5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .admin-notif-sub { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .admin-notif-time { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; padding-top: var(--sp-px); }
    .admin-notif-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-muted); font-size: var(--text-base); }
    .user-notif-panel { top: auto; bottom: 14px; left: 72px; }

    /* ── Customer directory ── */
    .customer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3_5); }
    .customer-card {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 18px var(--sp-5); transition: border-color 0.15s;
    }
    .customer-card:hover { border-color: rgba(59,130,246,0.28); }
    .customer-card-name { font-size: var(--text-lg); font-weight: 700; margin-bottom: 3px; }
    .customer-card-address { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--sp-2_5); min-height: 16px; }
    .customer-card-meta {
      font-size: var(--text-xs); color: var(--text-muted); font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.05em; margin-bottom: var(--sp-2);
    }
    .customer-project-list { display: flex; flex-direction: column; gap: var(--sp-1); }
    .customer-project-item {
      display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
      font-size: var(--text-sm); padding: 5px var(--sp-2); background: rgba(255,255,255,0.03);
      border-radius: 6px; border: 1px solid transparent;
    }
    .customer-project-item:hover { border-color: var(--border); }
    .customer-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

    /* ── Profile modal ── */
    .modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center; z-index: 1000;
    }
    .modal-box {
      background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
      padding: var(--sp-7); width: 100%; max-width: 440px; box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    }
    .modal-box h3 { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--sp-5); display: flex; align-items: center; gap: var(--sp-2); }
    .form-group { margin-bottom: var(--sp-3_5); }
    label { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-1_5); }
    /* Canonical form control. Covers date/tel/textarea too — these were
       previously re-declared via per-element inline styles (and drifted to
       13px vs the 14px siblings); folding them in unifies the look. */
    input[type=text], input[type=email], input[type=number], input[type=password],
    input[type=date], input[type=tel], select, textarea {
      width: 100%; padding: 9px var(--sp-3); background: var(--bg);
      border: 1px solid var(--border); border-radius: 8px;
      color: var(--text); font-size: var(--text-md); font-family: inherit; transition: border-color 0.15s;
    }
    select { cursor: pointer; }
    textarea { resize: vertical; }
    input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
    .modal-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); }
    /* ── Inline field validation ── */
    input.input-invalid, select.input-invalid { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }
    .field-error-msg { display: none; margin-top: 5px; font-size: var(--text-xs); font-weight: 600; color: #f87171; }
    /* Centred muted text for table loading/empty cells and inline placeholders.
       Replaces a repeated inline `text-align:center;padding:28px;color:var(--text-muted)`. */
    .nd-cell-empty { text-align: center; padding: var(--sp-7); color: var(--text-muted); }

    /* ── Toast (canonical — shared with editor via /js/core/toast.js) ── */
    /* bottom raised to clear the fixed beta-feedback FAB at bottom-right (#betaFeedbackBtn) */
    .toast-container { position: fixed; bottom: 76px; right: 24px; display: flex; flex-direction: column; gap: var(--sp-2); z-index: 9999; pointer-events: none; }
    .toast {
      background: var(--card); border: 1px solid var(--border); border-radius: 10px;
      padding: 11px var(--sp-4); font-size: var(--text-base); display: flex; align-items: center; gap: var(--sp-2_5);
      box-shadow: 0 8px 24px rgba(0,0,0,0.4); max-width: 320px;
      pointer-events: auto; cursor: pointer;
      opacity: 0; transform: translateX(24px) scale(0.96);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .toast.visible { opacity: 1; transform: none; }
    .toast.exiting { opacity: 0; transform: translateX(24px) scale(0.96); }
    .toast:hover { border-color: rgba(255,255,255,0.14); }
    .toast i { font-size: var(--text-xl); flex-shrink: 0; }
    .toast-success { border-color: rgba(34,197,94,0.3); }
    .toast-success i { color: #22c55e; }
    .toast-error   { border-color: rgba(239,68,68,0.3); }
    .toast-error i { color: #f87171; }
    .toast-info i    { color: var(--accent); }
    .toast-warning i { color: #fbbf24; }
    .toast-msg { flex: 1; }
    .toast-actions { display: flex; gap: var(--sp-1); margin-left: var(--sp-1); }
    .toast-action {
      padding: 3px 9px; font-size: var(--text-xs); font-weight: 600; border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08);
      color: var(--text); cursor: pointer; white-space: nowrap;
    }
    .toast-action:hover { background: rgba(255,255,255,0.16); }

    /* ── Admin tabs ── */
    .admin-tabs {
      display: flex; gap: var(--sp-0_5); margin-bottom: 22px; flex-wrap: wrap;
      border-bottom: 1px solid var(--border); padding-bottom: 0;
    }
    .admin-tab {
      padding: 9px var(--sp-4); background: transparent; border: none; border-bottom: 2px solid transparent;
      color: var(--text-muted); font-size: var(--text-base); font-weight: 600; cursor: pointer;
      font-family: inherit; transition: all 0.15s; margin-bottom: -1px; display: flex; align-items: center; gap: var(--sp-1_5);
    }
    .admin-tab:hover { color: var(--text); }
    .admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    /* Mobile-only stand-in for .admin-tabs, injected by mobilizeAdminTabs(). */
    .admin-tabs-select { display: none; margin-bottom: var(--sp-5); font-weight: 600; }

    /* ── Announcement banner ── */
    #announcementBanners { padding: 0; }
    .announcement-banner {
      border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) var(--sp-8) 0;
      display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-base);
      animation: fadeIn 0.3s ease;
    }
    .announcement-banner.info     { background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.25); }
    .announcement-banner.warning  { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.25); }
    .announcement-banner.critical { background: rgba(239,68,68,0.1);   border: 1px solid rgba(239,68,68,0.3); }
    .announcement-banner-text { flex: 1; }
    .announcement-banner.info i     { color: var(--accent); }
    .announcement-banner.warning i  { color: #f59e0b; }
    .announcement-banner.critical i { color: #f87171; }
    .announcement-dismiss {
      background: transparent; border: none; color: var(--text-muted);
      cursor: pointer; font-size: var(--text-xl); padding: 0; line-height: 1; flex-shrink: 0;
    }
    .announcement-dismiss:hover { color: var(--text); }

    /* ── Settings layout ── */
    .settings-layout {
      display: flex; gap: 0; min-height: 500px;
    }
    .settings-sidebar {
      width: 160px; flex-shrink: 0; border-right: 1px solid var(--border);
      padding: var(--sp-2) 0; position: sticky; top: 0; align-self: flex-start;
    }
    .settings-sidebar-link {
      display: block; padding: 7px var(--sp-3_5); font-size: var(--text-sm); font-weight: 600;
      color: var(--text-muted); cursor: pointer; border-radius: 0;
      border-left: 2px solid transparent; transition: all 0.15s;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .settings-sidebar-link:hover { color: var(--text); background: rgba(255,255,255,0.04); }
    .settings-sidebar-link.active { color: var(--accent); border-left-color: var(--accent); background: rgba(255,255,255,0.04); }
    .settings-content { flex: 1; min-width: 0; }

    /* ── Search ── */
    .settings-search-wrap { padding: var(--sp-2_5) var(--sp-3_5) var(--sp-2); border-bottom: 1px solid var(--border); }
    .settings-search {
      width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
      color: var(--text); font-size: var(--text-base); font-family: inherit; padding: var(--sp-1_5) var(--sp-2_5) var(--sp-1_5) 30px;
      box-sizing: border-box;
    }
    .settings-search:focus { outline: none; border-color: var(--accent); }
    .settings-search-wrap { position: relative; padding: var(--sp-2_5) var(--sp-3_5) var(--sp-2); border-bottom: 1px solid var(--border); }
    .settings-search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-md); pointer-events: none; }

    /* ── Accordion sections ── */
    .settings-accordion { border-bottom: 1px solid var(--border); }
    .settings-accordion:last-child { border-bottom: none; }
    .settings-accordion-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px var(--sp-4); cursor: pointer; user-select: none;
      background: var(--bg-secondary);
    }
    .settings-accordion-header:hover { background: rgba(255,255,255,0.04); }
    .settings-accordion-title {
      font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--text-muted);
    }
    .settings-accordion-chevron { color: var(--text-muted); font-size: var(--text-base); transition: transform 0.2s; }
    .settings-accordion.open .settings-accordion-chevron { transform: rotate(180deg); }
    .settings-accordion-body { display: none; }
    .settings-accordion.open .settings-accordion-body { display: block; }

    /* ── Settings rows ── */
    .settings-row {
      display: grid; grid-template-columns: 1fr auto auto;
      align-items: center; gap: var(--sp-4); padding: var(--sp-3_5) 18px;
      border-bottom: 1px solid var(--border);
    }
    .settings-row:last-child { border-bottom: none; }
    .settings-row.hidden-by-search { display: none; }
    .settings-section-header {
      padding: var(--sp-2) var(--sp-4) var(--sp-1); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border);
      margin-top: var(--sp-3); background: var(--bg-secondary);
    }
    .settings-section-header:first-child { margin-top: 0; }
    .settings-key  { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
    .settings-key-code { font-size: var(--text-2xs); font-weight: 400; font-family: monospace; color: var(--accent); opacity: 0; margin-left: 7px; transition: opacity 0.15s; vertical-align: middle; }
    .settings-row:hover .settings-key-code { opacity: 0.7; }
    .settings-desc { font-size: var(--text-sm); color: var(--text-muted); margin-top: 3px; }
    .settings-val-input {
      background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
      color: var(--text); font-size: var(--text-base); font-family: inherit; padding: var(--sp-1_5) var(--sp-2_5); width: 160px;
      box-sizing: border-box;
    }
    .settings-val-input:focus { outline: none; border-color: var(--accent); }
    .settings-saved-flash { font-size: var(--text-xs); color: #4ade80; white-space: nowrap; }
    .settings-default-label { font-size: var(--text-xs); color: var(--text-muted); opacity: 0.5; white-space: nowrap; }
    .settings-child-row { padding-left: 36px; background: rgba(255,255,255,0.015); }
    .settings-child-row .settings-key { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
    .settings-no-results { padding: var(--sp-6) var(--sp-4); color: var(--text-muted); font-size: var(--text-base); text-align: center; display: none; }

    /* ── Feature toggle switch ── */
    .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
    .toggle-slider {
      position: absolute; cursor: pointer; inset: 0;
      background: rgba(255,255,255,0.08); border-radius: 22px;
      border: 1px solid var(--border); transition: background 0.2s, border-color 0.2s;
    }
    .toggle-slider::before {
      content: ''; position: absolute; height: 16px; width: 16px; left: 2px; bottom: 2px;
      background: var(--text-muted); border-radius: 50%; transition: transform 0.2s, background 0.2s;
    }
    .toggle-switch input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: #fff; }

    /* ── Pagination ── */
    .pagination {
      display: flex; align-items: center; gap: 5px; padding: var(--sp-3) var(--sp-4);
      border-top: 1px solid var(--border); justify-content: flex-end;
    }
    .page-btn {
      padding: 5px var(--sp-2_5); background: rgba(255,255,255,0.06); border: 1px solid var(--border);
      border-radius: 6px; color: var(--text-muted); font-size: var(--text-sm); font-weight: 600;
      cursor: pointer; font-family: inherit; transition: all 0.15s;
    }
    .page-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: var(--text); }
    .page-btn.active  { background: var(--accent); color: #fff; border-color: var(--accent); }
    .page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    /* ── Equipment sub-tabs ── */
    /* flex-wrap matters here: with the default `nowrap` these filter pills
       overflowed the row with no scrollbar (dash-section clips overflow-x on
       mobile), so on a phone the last pill(s) were simply unreachable. Only
       3-5 short labels, so wrapping to a 2nd line reads fine — no dropdown
       needed, unlike the heavier `.admin-tabs` / `.tab-sub-nav` bars. */
    .equip-type-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1_5); margin-bottom: var(--sp-3_5); }
    .equip-type-tab {
      padding: var(--sp-1_5) var(--sp-3_5); background: rgba(255,255,255,0.06); border: 1px solid var(--border);
      border-radius: 20px; color: var(--text-muted); font-size: var(--text-sm); font-weight: 600;
      cursor: pointer; font-family: inherit; transition: all 0.15s;
    }
    .equip-type-tab.active { background: rgba(59,130,246,0.15); color: var(--accent); border-color: rgba(59,130,246,0.3); }
    .equip-type-tab:hover { color: var(--text); }

    /* ── Status badges ── */
    .inline-badge {
      display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-2xs); font-weight: 700;
      padding: var(--sp-0_5) 7px; border-radius: 10px;
    }
    .inline-badge.active   { background: rgba(34,197,94,0.1);  color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
    .inline-badge.inactive { background: rgba(239,68,68,0.1);  color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
    .inline-badge.builtin  { background: rgba(139,92,246,0.1); color: #a78bfa; border: 1px solid rgba(139,92,246,0.2); }

    /* ── Setup info box ── */
    .setup-box {
      background: rgba(59,130,246,0.07); border: 1px solid rgba(59,130,246,0.2);
      border-radius: var(--radius); margin-bottom: var(--sp-3_5);
      font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6;
    }
    .setup-box strong { color: var(--text); }
    .setup-box code {
      background: rgba(255,255,255,0.08); padding: var(--sp-px) 5px; border-radius: 4px;
      font-size: var(--text-xs); word-break: break-all;
    }
    .setup-box-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: var(--sp-2_5) var(--sp-4); cursor: pointer; user-select: none;
    }
    .setup-box-header:hover { background: rgba(59,130,246,0.06); border-radius: var(--radius); }
    .setup-box-chevron { font-size: var(--text-md); transition: transform 0.2s; flex-shrink: 0; }
    .setup-box.open .setup-box-chevron { transform: rotate(180deg); }
    .setup-box-body { padding: 0 var(--sp-4) var(--sp-3_5); }

    /* ── Bulk action toolbar ── */
    .bulk-toolbar {
      display: none; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
      background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2);
      border-radius: 8px; margin-bottom: var(--sp-2_5);
    }
    .bulk-toolbar.visible { display: flex; }
    .bulk-count { font-size: var(--text-sm); color: var(--text-muted); flex: 1; }

    /* ── Canvas hero card ── */
    .canvas-hero-card {
      position: relative; display: flex; align-items: center; gap: var(--sp-6);
      background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(99,102,241,0.05));
      border: 1px solid rgba(59,130,246,0.22); border-radius: var(--radius);
      padding: 22px var(--sp-6); margin-bottom: 22px; overflow: hidden;
    }
    .canvas-hero-card.dismissed { display: none; }
    .canvas-hero-close {
      position: absolute; top: 10px; right: 10px;
      width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer;
      background: transparent; color: var(--text-muted);
      display: flex; align-items: center; justify-content: center; font-size: var(--text-lg);
      transition: background 0.15s, color 0.15s;
    }
    .canvas-hero-close:hover { background: rgba(255,255,255,0.07); color: var(--text); }
    .canvas-hero-info { flex: 1; min-width: 0; }
    .canvas-hero-info h3 { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--sp-1_5); }
    .canvas-hero-info p { font-size: var(--text-base); color: var(--text-muted); line-height: 1.6; max-width: 460px; }
    .canvas-hero-thumb {
      flex-shrink: 0; width: 340px; border-radius: 8px; overflow: hidden;
      border: 1px solid var(--border); opacity: 0.9;
    }
    .canvas-hero-thumb img { width: 100%; display: block; }
    @media (max-width: 900px) {
      .canvas-hero-card { flex-direction: column; }
      .canvas-hero-thumb { width: 100%; }
    }

    /* ── Canvas nav item — always accented ── */
    .nav-item.nav-canvas { color: var(--accent) !important; background: rgba(59,130,246,0.08); }
    .nav-item.nav-canvas:hover { background: rgba(59,130,246,0.14) !important; }

    /* ── Projects section ── */
    .projects-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); gap:var(--sp-3); flex-wrap:wrap; }
    .projects-count { font-size:var(--text-sm); color:var(--text-muted); }

    /* View toggle */
    .view-toggle { display:flex; gap:var(--sp-0_5); }
    .view-toggle-btn { padding:var(--sp-1_5) var(--sp-2); background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:6px; color:var(--text-muted); cursor:pointer; font-size:var(--text-md); transition:all 0.15s; line-height:1; }
    .view-toggle-btn.active { background:rgba(59,130,246,0.15); color:var(--accent); border-color:rgba(59,130,246,0.3); }

    /* Compliance badge on card */
    .compliance-badge { display:inline-flex; align-items:center; gap:3px; font-size:var(--text-2xs); font-weight:700; padding:var(--sp-0_5) 7px; border-radius:10px; }
    .compliance-badge.pass { background:rgba(34,197,94,0.1); color:#4ade80; border:1px solid rgba(34,197,94,0.2); }
    .compliance-badge.warn { background:rgba(245,158,11,0.1); color:#fbbf24; border:1px solid rgba(245,158,11,0.2); }
    .compliance-badge.fail { background:rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.2); }

    /* List view row */
    .project-list-item { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2_5) var(--sp-3_5); background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:var(--sp-1_5); transition:border-color 0.15s; }
    .project-list-item:hover { border-color:rgba(59,130,246,0.28); }
    .project-list-thumb { width:48px; height:34px; border-radius:4px; background:var(--surface); border:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--text-xl); color:var(--text-muted); overflow:hidden; }
    .project-list-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .project-list-info { flex:1; min-width:0; }
    .project-list-name { font-size:var(--text-base); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
    .project-list-name:hover { color:var(--accent); }
    .project-list-sub { font-size:var(--text-xs); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:var(--sp-px); }
    .project-list-col { font-size:var(--text-sm); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 0 80px; }
    .project-list-actions { display:flex; gap:5px; flex:0 0 160px; }

    /* Load more */
    .load-more-wrap { text-align:center; margin-top:var(--sp-4); }
    /* ── Support system ── */
    .ticket-status { display:inline-flex;align-items:center;gap:3px;font-size:var(--text-2xs);font-weight:700;padding:var(--sp-0_5) 7px;border-radius:10px;border:1px solid; }
    .ticket-status.open        { background:rgba(59,130,246,0.1);color:#60a5fa;border-color:rgba(59,130,246,0.25); }
    .ticket-status.in-progress { background:rgba(245,158,11,0.1);color:#fbbf24;border-color:rgba(245,158,11,0.25); }
    .ticket-status.resolved    { background:rgba(34,197,94,0.1);color:#4ade80;border-color:rgba(34,197,94,0.2); }
    .ticket-priority            { font-size:var(--text-xs);font-weight:600;padding:1px var(--sp-1_5);border-radius:8px;background:rgba(255,255,255,0.05); }
    .ticket-priority.low        { color:var(--text-muted); }
    .ticket-priority.normal     { color:var(--accent); }
    .ticket-priority.high       { color:#f59e0b; }
    .ticket-priority.urgent     { color:#f87171; }
    .ticket-card { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3_5) var(--sp-4);margin-bottom:var(--sp-2);cursor:pointer;transition:border-color 0.15s; }
    .ticket-card:hover { border-color:rgba(59,130,246,0.28); }
    .ticket-card-title { font-size:var(--text-md);font-weight:600;margin-bottom:var(--sp-1_5); }
    .ticket-card-meta  { display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap; }
    .comment-bubble       { background:var(--card);border:1px solid var(--border);border-radius:10px;padding:var(--sp-3) var(--sp-3_5);font-size:var(--text-base); }
    .comment-bubble.staff { border-color:rgba(59,130,246,0.3);background:rgba(59,130,246,0.05); }
    .comment-meta         { font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--sp-1_5);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2); }
    .faq-card             { background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4) 18px;margin-bottom:var(--sp-2);cursor:pointer;transition:border-color 0.15s; }
    .faq-card:hover       { border-color:rgba(59,130,246,0.28); }
    .faq-card-title       { font-size:var(--text-md);font-weight:600;margin-bottom:var(--sp-1);display:flex;align-items:center;gap:var(--sp-2);justify-content:space-between; }
    .faq-card-body        { font-size:var(--text-base);color:var(--text-muted);display:none;margin-top:var(--sp-2_5);line-height:1.6;white-space:pre-wrap; }
    .faq-card.open .faq-card-body { display:block; }
    .admin-tickets-table { width:100%;border-collapse:collapse;font-size:var(--text-base); }
    .admin-tickets-table th { text-align:left;padding:var(--sp-2) var(--sp-2_5);font-size:var(--text-xs);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border); }
    .admin-tickets-table td { padding:var(--sp-2_5);border-bottom:1px solid rgba(255,255,255,0.04);vertical-align:middle; }
    .admin-tickets-table tr:hover td { background:rgba(255,255,255,0.02); }

/* ── Mobile topbar (hidden on desktop) ── */
.mobile-topbar {
  display: none;
  align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4); height: 52px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200; flex-shrink: 0;
}
.mobile-hamburger {
  background: none; border: none; color: var(--text); cursor: pointer;
  font-size: 22px; padding: var(--sp-1); display: flex; align-items: center; line-height: 1;
}
.mobile-topbar-title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }

/* ── Sidebar overlay ── */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 299;
}
.sidebar-overlay.visible { display: block; }

/* ── Small-laptop breakpoint ── */
@media (max-width: 1200px) {
  /* 6-col admin stats and 5-col subscription stats become unreadable at ~800–1000px
     content width (220px sidebar subtracted). Collapse to 3-col. */
  [style*="grid-template-columns:repeat(6"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="grid-template-columns:repeat(5"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Responsive breakpoints ── */
@media (max-width: 768px) {
  body { overflow: auto; }
  .mobile-topbar { display: flex; }

  /* iOS zooms the viewport when focusing an input rendered <16px. Force ≥16px
     across the dashboard so focusing a field never triggers that zoom. */
  input, select, textarea { font-size: 16px !important; }

  /* 2-column grid collapses to 1-column; let body scroll */
  .dash-layout { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .dash-main   { overflow-y: unset; }

  /* Sidebar slides in as fixed overlay */
  .sidebar {
    position: fixed; left: -240px; top: 0;
    width: 220px; height: 100vh; z-index: 300;
    transition: left 0.25s ease; overflow-y: auto;
  }
  .sidebar.open { left: 0; }

  /* Section padding */
  .dash-section { padding: var(--sp-5) var(--sp-4); }
  .section-title { font-size: 23px; padding-left: 13px; }
  .section-subtitle { padding-left: 13px; }

  /* Stats grids → 2-col (using !important so inline style overrides are defeated) */
  .stats-row         { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-row-2       { grid-template-columns: 1fr !important; }
  .analytics-metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .charts-grid       { grid-template-columns: 1fr !important; }
  .customer-grid     { grid-template-columns: 1fr; }

  /* Welcome banner: stack */
  .welcome-banner   { flex-direction: column; align-items: flex-start; }
  .welcome-actions  { flex-shrink: unset; flex-wrap: wrap; }

  /* Notifications: full-width */
  .admin-notif-panel { left: 12px; right: 12px; width: auto; }

  /* Modals: full-width (!important overrides inline max-width values on each modal) */
  .modal-box { margin: var(--sp-4); max-width: calc(100% - 32px) !important; }

  /* Announcement banners */
  .announcement-banner { margin: var(--sp-2) var(--sp-3) 0; }

  /* Settings rows: stack columns */
  .settings-row { grid-template-columns: 1fr !important; gap: var(--sp-2); }
  .settings-sidebar { display: none; }
  .settings-layout { flex-direction: column; }

  /* Admin tabs: swiping through 12 tabs to find one is worse than a dropdown.
     mobilizeAdminTabs() (dashboard.js) injects an .admin-tabs-select right
     after every .admin-tabs row; show that and hide the button row instead
     of letting it scroll sideways. */
  .admin-tabs { display: none; }
  .admin-tabs-select { display: block; }

  /* ── Override inline grid-template-columns on anonymous divs ──
     Many sections use inline style="grid-template-columns:..." which beats external CSS.
     Attribute selectors + !important are the only way to override these without touching HTML. */

  /* 3-col grids (charts, some stats) → 2-col at tablet */
  [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* 4- and 5-col grids (admin stats, thermal load) → 2-col at tablet */
  [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Admin overview 6-stat row → 2-col (not 3) so mono numbers don't truncate at 481–768px */
  [style*="grid-template-columns:repeat(6"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Explicit 3-col (quote builder input row) → 2-col at tablet */
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }

  /* Fixed-pixel sidebar grids (calculators, quote builder, scheduler) → stack */
  [style*="grid-template-columns:320px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:340px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 320px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 280px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:220px 1fr"] { grid-template-columns: 1fr !important; }

  /* Billing content max-width: let it fill mobile screen */
  #billingContent { max-width: 100% !important; }

  /* Prevent horizontal overflow in all sections */
  .dash-section { overflow-x: hidden; }
  .dash-main    { overflow-x: hidden; }

  /* ── Touch targets: small icon controls get a ≥40px hit area on mobile ──────
     The rail unpin ✕ stays a 16px badge visually but its tappable area is
     expanded via a transparent ::after overlay so it's grabbable on touch. */
  .rail-unpin::after { content: ''; position: absolute; inset: -12px; }

  /* Project list view: hide extra metadata columns, keep name + actions */
  .project-list-col { display: none; }
  .project-list-item { gap: var(--sp-2); }

  /* ── Dense admin tables (Users, Projects, …) → stacked cards ──────────────
     Scrolling an 8-column table sideways with a wall of action buttons per
     row is unusable on a phone. Opt a table into card mode with
     `.table-cards-mobile` on its `.table-card` wrapper; each <td> needs a
     `data-label` attribute (the row's JS renderer sets these) so its value
     can carry its own column label inline. The select-all checkbox column
     doesn't need a label — give it `.td-select` to pin it top-right instead. */
  .table-cards-mobile table  { display: block; }
  .table-cards-mobile thead  { display: none; }
  .table-cards-mobile tbody  { display: block; }
  .table-cards-mobile tr {
    display: block; position: relative;
    background: var(--elev-2, var(--card)); border: 1px solid var(--border);
    border-radius: 12px; padding: var(--sp-3) var(--sp-3_5); margin-bottom: var(--sp-2_5);
    padding-right: 38px; /* gutter so the absolutely-positioned select checkbox never overlaps row text */
  }
  .table-cards-mobile td {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-3); padding: 5px 0; border: none; text-align: right;
  }
  .table-cards-mobile td::before {
    content: attr(data-label); flex-shrink: 0; text-align: left;
    font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-muted); padding-top: var(--sp-0_5);
  }
  .table-cards-mobile td[data-label="Actions"] {
    flex-direction: column; align-items: stretch; text-align: left;
    margin-top: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--border);
  }
  .table-cards-mobile td[data-label="Actions"]::before { padding-top: 0; margin-bottom: var(--sp-1); }
  .table-cards-mobile td.td-select {
    position: absolute; top: var(--sp-2); right: var(--sp-2); padding: 0; display: block;
  }
  .table-cards-mobile td.td-select::before { content: none; }
}

@media (max-width: 480px) {
  .stats-row         { grid-template-columns: 1fr !important; }
  .analytics-metrics { grid-template-columns: 1fr !important; }
  .stat-value        { font-size: 22px; }

  /* 2-col form grids → single column on phones */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(5"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(6"] { grid-template-columns: 1fr !important; }
}

/* ── Account section ── */
.account-panel { max-width: 640px; animation: fadeIn 0.15s ease; }
.account-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px var(--sp-6); margin-bottom: var(--sp-4);
}
.account-card-title {
  font-size: var(--text-base); font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3_5);
}
.account-card-title i { color: var(--accent); font-size: var(--text-lg); }
.account-card-sub {
  font-size: var(--text-xs); color: var(--text-muted); margin-top: -10px; margin-bottom: var(--sp-3_5); line-height: 1.5;
}

/* ── Theme picker (Settings → Appearance) ──────────────────────────────────── */
.theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2_5); }
@media (max-width: 720px) { .theme-pick { grid-template-columns: 1fr; } }
.theme-pick-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2_5);
  padding: var(--sp-3_5); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-secondary); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.theme-pick-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.theme-pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-pick-card.selected { border-color: var(--accent); background: var(--accent-soft, rgba(59,130,246,0.12)); }

/* Mini preview swatch: a surface block + accent line + two muted lines. */
.theme-pick-swatch {
  height: 54px; border-radius: 9px; padding: 9px; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--border);
}
.theme-pick-swatch b { height: 8px; width: 60%; border-radius: 3px; display: block; }
.theme-pick-swatch i { height: 6px; width: 100%; border-radius: 3px; display: block; opacity: 0.55; }
.theme-pick-swatch i:last-child { width: 75%; }
/* Classic: near-black graphite + blue accent */
.tp-classic { background: #0b0d13; }
.tp-classic b { background: #3b82f6; } .tp-classic i { background: #2a2f3b; }
/* Calm: warm glass + blue accent */
.tp-calm { background: #16171c; }
.tp-calm b { background: #3b82f6; } .tp-calm i { background: #2c2f39; }
/* Hybrid: warm base + duct-colour accents */
.tp-hybrid { background: #14161d; }
.tp-hybrid b { background: linear-gradient(90deg, #3b82f6 55%, #22d3ee); }
.tp-hybrid i:first-of-type { background: #f59e0b; opacity: 0.5; }
.tp-hybrid i:last-child { background: #a78bfa; opacity: 0.5; }
/* Light: bright surface + blue accent */
.tp-light { background: #f4f6fb; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.10); }
.tp-light b { background: #3b82f6; } .tp-light i { background: #d4dae6; opacity: 1; }
/* Airflow (default): warm paper + hot/cold accent — matches the hub */
.tp-airflow { background: #f4f6fa; box-shadow: inset 0 0 0 1px rgba(19,23,34,0.08); }
.tp-airflow b { background: #1493e6; }
.tp-airflow i:first-of-type { background: #e23b3b; opacity: 0.5; }
.tp-airflow i:last-child { background: #d5dce8; opacity: 1; }

.theme-pick-meta { display: flex; flex-direction: column; gap: 3px; }
.tp-name { font-size: var(--text-base); font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: var(--sp-1_5); }
.tp-desc { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }
.theme-pick-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.28);
  padding: var(--sp-px) var(--sp-1_5); border-radius: 10px;
}
.theme-pick-tick {
  position: absolute; top: var(--sp-2_5); right: var(--sp-2_5); font-size: var(--text-lg);
  color: var(--accent); opacity: 0; transform: scale(0.8); transition: opacity 0.15s, transform 0.15s;
}
.theme-pick-card.selected .theme-pick-tick { opacity: 1; transform: scale(1); }
.account-panel-actions {
  display: flex; justify-content: flex-end; margin-bottom: var(--sp-6);
}

/* ── Account section: shared field/toggle/card utilities ──
   Replaces the repeated one-off inline styles that used to be copy-pasted
   across the Profile/Notifications/Preferences/Team panels. */
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field-label { font-size: var(--text-xs); color: var(--text-muted); display: block; margin-bottom: var(--sp-1); }
.form-group.form-group-tight { margin-bottom: 0; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); cursor: pointer; }
.toggle-row-title { font-size: var(--text-sm); font-weight: 600; }
.toggle-row-desc { font-size: 11px; color: var(--text-muted); }

/* Reusable bordered panel card (Team sub-panels: members/notices/activity/etc) */
.panel-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-card + .panel-card { margin-top: var(--sp-4); }
.panel-card-header-stack { padding: var(--sp-3_5) var(--sp-5); border-bottom: 1px solid var(--border); }
.panel-card-header-flex { padding: var(--sp-3_5) var(--sp-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.panel-card-header-simple { padding: var(--sp-3_5) var(--sp-5); border-bottom: 1px solid var(--border); font-size: var(--text-sm); font-weight: 700; }
.panel-card-header-title { font-size: var(--text-sm); font-weight: 700; }
.panel-card-header-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--sp-0_5); }

/* Secondary (nested) tab strip — a deliberately smaller, pill/segmented look
   so a tab-within-a-tab (e.g. Team's Members/Notices/Activity/...) reads as
   nested under the primary underline-style .admin-tabs above it, instead of
   as a second identical row of tabs. */
.tab-sub-nav {
  display: flex; gap: var(--sp-1); margin-bottom: var(--sp-5); padding: var(--sp-1); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  width: fit-content;
}
.tab-sub {
  padding: var(--sp-1_5) var(--sp-3_5); background: transparent; border: none; border-radius: 7px;
  color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.15s; display: flex; align-items: center; gap: var(--sp-1_5);
}
.tab-sub:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.tab-sub.active { color: #fff; background: var(--accent); }
/* Below 768px — matching the .admin-tabs breakpoint, so the two don't
   disagree on when to swap — even the wrapped pill strip eats too much
   vertical space for a 4-6 item nav (e.g. Team's Members/Notices/Activity/
   Projects/Settings/Billing). Swap to the same .admin-tabs-select dropdown
   pattern used for the top-level admin tabs (mobilizeAdminTabs() in
   dashboard.js); the global `.admin-tabs-select { display: block }` rule in
   the ≤768px block below already shows it once this hides the strip. */
@media (max-width: 768px) {
  .tab-sub-nav { display: none; }
}

/* ── Team section ──────────────────────────────────────────────────────────
   Org identity hero — reuses the .account-hero gradient/ring treatment so the
   org header reads as a peer of the personal Account hero, not a plain row. */
.team-hero { margin-bottom: var(--sp-5); }
.team-hero-logo {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.25), 0 4px 12px rgba(59,130,246,0.3);
}
.team-hero-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.team-hero-seats { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1_5); min-width: 120px; }
.team-hero-seat-label { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.team-hero-seat-bar { height: 5px; width: 100%; min-width: 90px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.team-hero-seat-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), #818cf8); border-radius: 3px; transition: width 0.3s; }

/* Reusable list row (members / invitations / shared projects) — replaces the
   copy-pasted "flex + justify-between + padding + border-bottom" inline style
   that was duplicated across every list in team.js. */
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); transition: background 0.15s;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: rgba(255,255,255,0.025); }
.list-row-title { font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: var(--sp-1_5); }
.list-row-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--sp-px); }
.list-row-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* Small circular initials avatar for member/invitation rows */
.list-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #818cf8);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.list-row-main { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }

/* Status/role pill — color variants layered on the existing .badge base */
.badge-amber  { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.28); }
.badge-indigo { background: rgba(99,102,241,0.12); color: #818cf8; border-color: rgba(99,102,241,0.28); }
.badge-red    { background: rgba(239,68,68,0.12);  color: #f87171; border-color: rgba(239,68,68,0.28); }
.badge-muted  { background: rgba(255,255,255,0.06); color: var(--text-muted); border-color: var(--border); }

/* Design thread: downstream-state pills on a design card (Quoted · Scheduled ·
   Invoiced), layered on .badge. Colour comes from a single lifecycle token per
   state (the tokens.css doc/st status families); the tint is color-mixed from it,
   so there's one source of truth and no raw hex — same grammar as ui.css badge. */
.dt-state           { --_c: var(--doc-sent); display: inline-flex; align-items: center; gap: var(--sp-1); text-transform: none;
                      color: var(--_c); background: color-mix(in srgb, var(--_c) 14%, transparent); border-color: color-mix(in srgb, var(--_c) 30%, transparent); }
.dt-state i         { font-size: var(--text-sm); }
.dt-state.quoted    { --_c: var(--doc-sent); }
.dt-state.scheduled { --_c: var(--st-scheduled); }
.dt-state.invoiced  { --_c: var(--doc-paid); }

/* Notice board cards */
.notice-card { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.notice-card:last-child { border-bottom: none; }
.notice-card--pinned { background: rgba(59,130,246,0.05); }
.notice-card-body { font-size: var(--text-sm); line-height: 1.55; margin-top: var(--sp-2); white-space: pre-wrap; word-break: break-word; }

/* Activity feed rows */
.activity-row { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); }
.activity-row:last-child { border-bottom: none; }
.activity-row-icon {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05);
}

/* Compact summary row (Org Billing → Member Activity list) — the parent
   container already applies a flex `gap`, so no margin needed here. */
.mini-row { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border-radius: 8px; padding: var(--sp-2_5) var(--sp-3_5); }

/* Sidebar user card — looks like a nav destination now */
.sidebar-user { transition: background 0.15s; }
.sidebar-user:hover { background: rgba(255,255,255,0.05) !important; }

/* ── Fix 3: Nav group subtitles (visible when group is collapsed) ── */
.nav-group-subtitle {
  font-size: var(--text-2xs); color: var(--text-muted); padding: 0 var(--sp-2_5) var(--sp-1_5);
  line-height: 1.3; display: none; opacity: 0.75;
}
.nav-group.collapsed .nav-group-subtitle { display: block; }

/* ── Fix 4: Getting Started card ── */
.getting-started-card {
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(99,102,241,0.06));
  border: 1px solid rgba(59,130,246,0.2); border-radius: 12px;
  padding: 18px var(--sp-5); margin-bottom: 22px;
}
.getting-started-card .gs-title {
  font-size: var(--text-base); font-weight: 700; color: var(--text); margin-bottom: var(--sp-3_5);
  display: flex; align-items: center; justify-content: space-between;
}
.getting-started-card .gs-title i { color: var(--accent); margin-right: 7px; }
.getting-started-card .gs-dismiss {
  background: none; border: none; cursor: pointer; font-size: var(--text-md);
  color: var(--text-muted); padding: 0; line-height: 1;
}
.getting-started-card .gs-dismiss:hover { color: var(--text); }
.gs-steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.gs-step {
  display: flex; align-items: center; gap: var(--sp-2_5); font-size: var(--text-base); color: var(--text-muted);
}
.gs-step.done { color: #22c55e; }
.gs-step .gs-num {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); font-weight: 700; flex-shrink: 0;
}
.gs-step.done .gs-num { background: #22c55e; border-color: #22c55e; color: #fff; }
.gs-step.active .gs-num { border-color: var(--accent); color: var(--accent); }
.gs-step.active { color: var(--text); }
.gs-bar-wrap { background: rgba(255,255,255,0.06); border-radius: 4px; height: 4px; margin-top: var(--sp-3_5); }
.gs-bar { background: var(--accent); border-radius: 4px; height: 100%; transition: width 0.4s ease; }

/* ── Fix 9: Sidebar footer topbar row for secondary actions ── */
.sidebar-footer-toprow {
  display: flex; gap: var(--sp-1); margin-bottom: var(--sp-0_5);
}
.btn-sidebar-icon {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-2); border-radius: 8px; font-size: var(--text-lg); cursor: pointer;
  border: none; background: transparent; color: var(--text-muted);
  transition: all 0.15s; position: relative;
}
.btn-sidebar-icon:hover { background: rgba(255,255,255,0.06); color: var(--text); }

/* ── Fix 10: Breadcrumb bar ── */
.dash-breadcrumb {
  padding: var(--sp-2_5) var(--sp-8) 0; display: flex; align-items: center; gap: var(--sp-1_5);
  font-size: var(--text-xs); color: var(--text-muted);
}
.dash-breadcrumb span { opacity: 0.6; }
.dash-breadcrumb .bc-current { color: var(--text); font-weight: 500; opacity: 1; }
@media (max-width: 768px) {
  .dash-breadcrumb { padding: var(--sp-2_5) 18px 0; }
}

/* ── Fix 12: Floating shortcuts help button ── */
.shortcut-help-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; font-size: var(--text-md); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35); transition: all 0.15s;
  font-family: inherit;
}
.shortcut-help-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Fix 12: Shortcuts modal ── */
.shortcuts-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2_5) var(--sp-6);
}
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-base); padding: var(--sp-1) 0; border-bottom: 1px solid var(--border);
}
.shortcut-keys {
  display: flex; gap: var(--sp-1);
}
.kbd {
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: var(--sp-0_5) var(--sp-1_5); font-size: var(--text-xs); font-weight: 600; color: var(--text);
  font-family: monospace;
}

/* ── Fix 17: Coming soon badge on nav items ── */
.nav-coming-soon {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted); border-radius: 10px; padding: 1px var(--sp-1_5); margin-left: auto;
}

/* ── Fix 13: Plan badge in sidebar ── */
.user-plan-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--sp-px) 7px; border-radius: 10px; display: inline-block; margin-top: var(--sp-0_5);
}
.user-plan-badge.plan-beta { background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); color: #a5b4fc; }

/* ── Visual Polish ─────────────────────────────────────────── */

/* Card depth */
.stat-card, .chart-card, .table-card { box-shadow: var(--card-shadow); }
.stat-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.stat-card:hover .si-blue   { box-shadow: var(--glow-blue);   }
.stat-card:hover .si-purple { box-shadow: var(--glow-purple); }
.stat-card:hover .si-green  { box-shadow: var(--glow-green);  }
.stat-card:hover .si-amber  { box-shadow: var(--glow-amber);  }
.stat-card:hover .si-red    { box-shadow: var(--glow-red);    }

/* Instrument numerics — mono + tabular figures read like a measuring tool */
.stat-value, .stat-value.sm {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* Inline unit suffix on a readout (e.g. 84.2 kW, 2,140 L/s). */
.stat-unit {
  font-family: var(--font); font-size: 0.46em; font-weight: 500;
  color: var(--text-muted); letter-spacing: 0; margin-left: 3px;
  vertical-align: baseline;
}

/* Colored top strip per stat card */
.stat-card { position: relative; overflow: hidden; }
.stat-card[data-color]::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.stat-card[data-color="blue"]::before   { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.stat-card[data-color="purple"]::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.stat-card[data-color="green"]::before  { background: linear-gradient(90deg, #22c55e, #4ade80); }
.stat-card[data-color="amber"]::before  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* Stats row 2 tinted backgrounds */
.stats-row-2 .stat-card:nth-child(1) { background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, var(--card) 50%); }
.stats-row-2 .stat-card:nth-child(2) { background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, var(--card) 50%); }

/* Welcome banner */
.welcome-banner {
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(99,102,241,0.13) 0%, transparent 70%),
    linear-gradient(135deg, rgba(59,130,246,0.14) 0%, rgba(99,102,241,0.08) 60%, transparent 100%);
  border-color: rgba(99,102,241,0.22);
  position: relative;
  overflow: hidden;
}
.welcome-banner::before {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  border: 1px solid rgba(99,102,241,0.12); pointer-events: none;
}
.welcome-banner::after {
  content: ''; position: absolute; right: -25px; top: -25px;
  width: 150px; height: 150px; border-radius: 50%;
  border: 1px solid rgba(59,130,246,0.1); pointer-events: none;
}
.welcome-text h2 {
  background: linear-gradient(120deg, #ffffff 0%, #93c5fd 45%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sidebar */
.sidebar { background: linear-gradient(180deg, #1a1e29 0%, var(--surface) 60%); }
.nav-item.active {
  border-left: 3px solid var(--accent);
  padding-left: 7px;
  background: var(--accent-soft);
}
.nav-item.active i { filter: drop-shadow(0 0 5px var(--accent-edge)); }
@keyframes brand-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(59,130,246,0.3); }
  50%       { box-shadow: 0 0 18px rgba(124,155,255,0.5); }
}
.brand-icon { animation: brand-glow 3.5s ease-in-out infinite; }
.user-avatar { transition: box-shadow 0.2s; }
.sidebar-user:hover .user-avatar { box-shadow: 0 0 0 2px rgba(59,130,246,0.5) !important; }
.btn-open-app:hover { box-shadow: 0 0 18px rgba(59,130,246,0.4); }

/* Nav group label color coding */
#navGroup-admin       .nav-label i { color: #f87171; }
#navGroup-workspace   .nav-label i { color: #3b82f6; }
#navGroup-engineering .nav-label i { color: #a78bfa; }
#navGroup-business    .nav-label i { color: #4ade80; }
#navGroup-compliance  .nav-label i { color: #f59e0b; }
#navGroup-support     .nav-label i { color: #22d3ee; }

/* Project cards */
.project-card { transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; }
.project-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(59,130,246,0.1);
}
.project-card-name { transition: color 0.15s; }
.project-card:hover .project-card-name { color: var(--accent); }
.project-card-thumb {
  background: linear-gradient(135deg, #1e2535 0%, #161b27 40%, rgba(59,130,246,0.06) 70%, #161b27 100%);
}

/* Section fade-up transition */
@keyframes sectionFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-section { animation: sectionFadeUp 0.28s ease both; }

/* Compliance card states */
.compliance-card.no-violations {
  background: linear-gradient(135deg, rgba(34,197,94,0.07) 0%, var(--card) 55%);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.08), var(--card-shadow);
}
.compliance-card.no-violations::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #22c55e, #4ade80);
}
.compliance-card.has-violations {
  background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, var(--card) 55%);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,0.08), var(--card-shadow);
}
.compliance-card.has-violations::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Section headers */
.section-header {
  border-left: 3px solid var(--accent);
  padding-left: var(--sp-2_5);
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: var(--sp-4);
}
.section-header h3 { font-size: var(--text-base); font-weight: 700; letter-spacing: 0.01em; }
.section-header h3 i { color: var(--accent); opacity: 0.8; font-size: var(--text-lg) !important; }

/* Button & breadcrumb */
.btn-primary:hover { box-shadow: 0 0 16px rgba(59,130,246,0.4); }
.dash-breadcrumb .bc-current {
  background: linear-gradient(90deg, var(--text), rgba(232,236,244,0.65));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600; opacity: 1;
}

/* Account hero card */
.account-hero {
  display: flex; align-items: center; gap: 18px;
  background:
    radial-gradient(ellipse 50% 100% at 90% 50%, rgba(99,102,241,0.12) 0%, transparent 70%),
    linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(99,102,241,0.07) 60%, transparent 100%);
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-5);
  position: relative; overflow: hidden;
}
.account-hero::after {
  content: ''; position: absolute; right: -50px; top: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  border: 1px solid rgba(99,102,241,0.1); pointer-events: none;
}
.account-hero-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.25), 0 4px 12px rgba(59,130,246,0.3);
}
.account-hero-info { flex: 1; min-width: 0; }
.account-hero-name { font-size: 17px; font-weight: 700; color: var(--text); }
.account-hero-email { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--sp-0_5); }
.account-hero-badges { display: flex; gap: var(--sp-1_5); margin-top: 7px; align-items: center; flex-wrap: wrap; }
.account-hero-role {
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); background: rgba(255,255,255,0.06);
  border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-px) 7px;
}

/* Profile avatar upload */
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar-preview {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
  overflow: hidden; border: 2px solid rgba(59,130,246,0.3);
}
.profile-avatar-btn {
  position: absolute; bottom: 0; right: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: var(--text-xs);
  border: 2px solid var(--card); transition: background 0.15s;
}
.profile-avatar-btn:hover { background: var(--accent-hover); }

/* Account card polish */
.account-card {
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.18s;
}
.account-card-title i {
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 6px; padding: var(--sp-1) 5px;
  font-size: var(--text-md) !important;
}

/* Quick action icon colors */
.quick-actions .btn i.ti-folder      { color: #60a5fa; }
.quick-actions .btn i.ti-settings    { color: #94a3b8; }
.quick-actions .btn i.ti-chart-bar   { color: #a78bfa; }
.quick-actions .btn i.ti-users-group { color: #4ade80; }
.quick-actions .btn i.ti-help        { color: #22d3ee; }
.quick-actions .btn i                { transition: filter 0.15s; }
.quick-actions .btn:hover i          { filter: brightness(1.3); }
.user-plan-badge.plan-pro  { background: rgba(34,197,94,0.12);  border: 1px solid rgba(34,197,94,0.25); color: #4ade80; }
.user-plan-badge.plan-business { background: rgba(59,130,246,0.14); border: 1px solid rgba(59,130,246,0.3); color: #60a5fa; }
.user-plan-badge.plan-free { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   REFINED GRAPHITE — elevation depth, edges, instrument type, motion
   (loaded last so it layers over the base component styles above)
   ══════════════════════════════════════════════════════════════ */

/* Layered elevation: panels/cards float on the L0 page with a top-light edge */
.account-card, .customer-card, .ticket-card, .faq-card, .activity-item,
.comment-bubble, .project-list-item, .chart-card, .table-card {
  box-shadow: var(--shadow-2);
}
.customer-card, .ticket-card, .faq-card {
  transition: transform .18s var(--spring), box-shadow .18s var(--spring), border-color .15s;
}
.customer-card:hover, .ticket-card:hover, .faq-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: var(--accent-edge);
}
/* Modals/panels sit on the top elevation tier */
.modal-box, .admin-notif-panel { background: var(--elev-3); box-shadow: var(--shadow-3); }

/* Tabular/mono figures across data readouts (counts, money, metrics, kbd) */
.analytics-metrics .stat-value, .project-list-col, .kbd,
.settings-key-code, .ticket-card-meta, td .badge { font-variant-numeric: tabular-nums; }

/* One decisive accent: gradient underline on active tabs */
.admin-tab.active {
  border-bottom-color: transparent;
  background-image: var(--accent-line);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 2px;
}

/* Primary buttons get the milled top-light edge */
.btn-primary, .btn-open-app, .page-btn.active { box-shadow: var(--edge-light); }
.btn-primary:hover { box-shadow: var(--edge-light), 0 0 16px var(--accent-edge); }

/* Focus rings keyed to the signature accent, legible on the deep L0 base */
input:focus, select:focus, textarea:focus,
.settings-search:focus, .settings-val-input:focus, .filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Respect reduced-motion: kill lifts, glows-in-motion, and section fades */
@media (prefers-reduced-motion: reduce) {
  .stat-card, .customer-card, .ticket-card, .faq-card, .project-card { transition: none; }
  .stat-card:hover, .customer-card:hover, .ticket-card:hover,
  .faq-card:hover, .project-card:hover { transform: none; }
  .brand-icon { animation: none; }
  .dash-section { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   ICON RAIL + COMMAND BAR SHELL  (replaces the labeled sidebar)
   ══════════════════════════════════════════════════════════════ */

/* ── Activity rail ── */
.app-rail {
  background: linear-gradient(180deg, #1a1e29 0%, var(--surface) 60%);
  border-right: 1px solid var(--border);
  box-shadow: var(--edge-light);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-2_5) 0 var(--sp-3); gap: var(--sp-1_5); overflow: visible; z-index: 300;
}
.rail-brand {
  position: relative; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-1);
}
.rail-brand-icon { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; display: block; }
.rail-nav, .rail-footer { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1_5); width: 100%; }
.rail-nav { position: relative; }

/* Single sliding highlight that follows the active rail item (box + accent line) */
.rail-indicator {
  position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-edge); box-shadow: var(--edge-light);
  opacity: 0; pointer-events: none; z-index: 0; will-change: transform;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.rail-indicator.show { opacity: 1; }
.rail-indicator.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .rail-indicator { transition: opacity .2s ease; } }
.rail-indicator::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 2px; background: var(--accent);
}
.rail-spacer { flex: 1; }
.rail-item {
  position: relative; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
  cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s;
}
.rail-item i { font-size: 20px; line-height: 1; position: relative; z-index: 1; }
.rail-item:hover { background: rgba(255,255,255,0.06); color: var(--text); }
/* Box/line are drawn by .rail-indicator; the active item only changes colour (smoothly). */
.rail-item.active { color: var(--accent); }
.rail-item.active:hover { background: transparent; }
.rail-canvas { color: var(--accent); }
.rail-canvas:hover { background: var(--accent-soft); color: var(--accent); }
.rail-avatar {
  position: relative; width: 42px; height: 42px; border-radius: 50%; border: none;
  background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
}
.rail-avatar .user-avatar { width: 34px; height: 34px; transition: box-shadow .2s; }
.rail-avatar:hover .user-avatar { box-shadow: 0 0 0 2px var(--accent-edge); }

/* Rail tooltips */
.rail-item[data-tip]:hover::after,
.rail-avatar[data-tip]:hover::after,
.rail-brand[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--elev-3); color: var(--text); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2); padding: 5px var(--sp-2_5); border-radius: 8px;
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 500;
}

/* ── Command bar ── */
.command-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 11px var(--sp-7); height: 60px;
  background: rgba(11,13,19,0.85); backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border); box-shadow: var(--edge-light);
}
.cmd-bar-left { display: flex; align-items: center; gap: 9px; flex-shrink: 0; min-width: 180px; }
.cmd-wordmark { font-size: var(--text-md); font-weight: 700; letter-spacing: -0.02em; }
.cmd-ctx-sep { color: var(--text-muted); opacity: 0.5; }

/* Personal greeting (replaces the static wordmark/breadcrumb) */
.cmd-greeting { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-0_5); line-height: 1.2; }
.cmd-greet-top { display: flex; align-items: baseline; gap: var(--sp-2); }
.cmd-greet-hi {
  font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(110deg, var(--text) 45%, var(--accent) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cmd-greet-date { font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.cmd-greet-date::before { content: "·"; margin-right: var(--sp-2); opacity: 0.45; }
.cmd-greet-sub { display: flex; align-items: center; gap: var(--sp-1_5); font-size: 11.5px; color: var(--text-muted); }
.cmd-greet-sub .cmd-wordmark { font-size: 11.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.cmd-greet-sub .cmd-ctx-sep { font-size: 11.5px; }
.cmd-greet-dot { opacity: 0.45; }
.command-bar .bc-current { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }

/* Live mini-stats chip */
.cmd-stats-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1_5);
  padding: 5px 11px; border-radius: 99px;
  font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
  background: rgba(255,255,255,0.045); border: 1px solid var(--border);
  white-space: nowrap;
}
.cmd-stats-chip strong { color: var(--text); font-weight: 700; }
.cmd-stats-chip i { font-size: var(--text-base); color: var(--accent); }
.cmd-chip-sep { width: 1px; height: 12px; background: var(--border); margin: 0 var(--sp-px); }
.cmd-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 7px -1px #4ade80; }
@media (max-width: 1180px) { .cmd-stats-chip { display: none !important; } }
.cmd-trigger {
  flex: 1; max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: var(--sp-2_5);
  padding: var(--sp-2) var(--sp-3); border-radius: 10px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--edge-light);
  color: var(--text-muted); font-family: inherit; font-size: var(--text-base); transition: border-color .15s, background .15s;
}
.cmd-trigger:hover { border-color: var(--border-strong); background: var(--elev-3); }
.cmd-trigger i { font-size: var(--text-lg); }
.cmd-trigger-label { flex: 1; text-align: left; }
.cmd-kbd {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; color: var(--text-muted);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 5px; padding: 1px var(--sp-1_5);
}
.cmd-bar-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* ── Command palette (⌘K) ── */
.cmd-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
}
/* Short phone viewports (landscape phones, small Androids): 12vh wastes too much
   vertical space above the palette, crowding the result list. */
@media (max-height: 600px) {
  .cmd-overlay { padding-top: var(--sp-4); }
}
.cmd-box {
  width: 100%; max-width: 560px; background: var(--elev-3);
  border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-3);
  overflow: hidden; animation: cmdIn .16s var(--spring);
}
@keyframes cmdIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.cmd-input-wrap { display: flex; align-items: center; gap: var(--sp-2_5); padding: var(--sp-3_5) var(--sp-4); border-bottom: 1px solid var(--border); }
.cmd-input-wrap i { font-size: var(--text-2xl); color: var(--text-muted); }
.cmd-input-wrap input { flex: 1; background: transparent; border: none; color: var(--text); font-size: var(--text-lg); font-family: inherit; }
.cmd-input-wrap input:focus { outline: none; box-shadow: none; }
.cmd-list { max-height: 52vh; overflow-y: auto; padding: var(--sp-1_5); }
.cmd-item {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px var(--sp-3); border-radius: 9px;
  background: transparent; border: none; cursor: pointer; color: var(--text); font-family: inherit; font-size: var(--text-base); text-align: left;
}
.cmd-item i { font-size: var(--text-xl); color: var(--text-muted); width: 18px; text-align: center; flex-shrink: 0; }
.cmd-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item-group { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); opacity: 0.7; }
.cmd-item.active { background: var(--accent-soft); }
.cmd-item.active i { color: var(--accent); }
.cmd-item.active .cmd-item-group { color: var(--accent); opacity: 0.9; }
.cmd-empty { padding: var(--sp-7); text-align: center; color: var(--text-muted); font-size: var(--text-base); }
.cmd-foot { display: flex; gap: var(--sp-4); padding: 9px var(--sp-4); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-muted); }
.cmd-foot kbd { font-family: var(--font-mono); background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 4px; padding: 0 var(--sp-1); margin-right: var(--sp-0_5); }

/* ── Rail flyouts (Tools + profile) ── */
.rail-flyout {
  position: fixed; left: 70px; z-index: 400;
  background: var(--elev-3); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: var(--shadow-3); animation: flyIn .14s var(--spring);
}
@keyframes flyIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.tools-flyout { top: 60px; width: 252px; max-width: calc(100vw - 88px); max-height: 74vh; overflow-y: auto; padding: var(--sp-3); }
.flyout-title { font-size: var(--text-base); font-weight: 700; padding: var(--sp-1) var(--sp-2) var(--sp-2_5); }
.flyout-group { margin-bottom: var(--sp-2_5); }
.flyout-group:last-child { margin-bottom: 0; }
.flyout-label { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: var(--sp-1) var(--sp-2); }
.flyout-item {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px var(--sp-2); border-radius: 8px;
  background: transparent; border: none; cursor: pointer; color: var(--text); font-family: inherit; font-size: var(--text-base); text-align: left;
}
.flyout-item i { font-size: var(--text-xl); color: var(--text-muted); width: 18px; text-align: center; flex-shrink: 0; }
.flyout-item:hover { background: rgba(255,255,255,0.06); }
.flyout-ext { margin-left: auto; font-size: var(--text-xs) !important; opacity: 0.6; }

/* ── Customizable rail: pin toggles in the flyout ───────────────────────── */
.flyout-item-pinnable { position: relative; }
.flyout-pin {
  margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); opacity: 0; cursor: pointer; transition: opacity .12s, background .12s, color .12s;
}
.flyout-pin i { font-size: var(--text-base) !important; width: auto !important; color: inherit !important; }
.flyout-item:hover .flyout-pin, .flyout-pin:focus-visible { opacity: 1; }
.flyout-pin.on { opacity: 1; color: var(--accent); }
.flyout-pin:hover { background: var(--accent-soft); color: var(--accent); }

/* Flyout footer "Customize rail" action */
.flyout-foot { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.flyout-customize { font-weight: 600; }
.flyout-foot-hint { margin-left: auto; font-size: var(--text-2xs); color: var(--text-muted); opacity: 0.8; }

/* ── Pinned rail items + edit mode ──────────────────────────────────────── */
.rail-item-pinned { position: relative; }
.rail-unpin {
  position: absolute; top: -3px; right: -3px; width: 16px; height: 16px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; z-index: 3;
  background: var(--danger, #ef4444); color: #fff; box-shadow: var(--shadow-1); cursor: pointer;
}
.rail-unpin i { font-size: 11px !important; }
/* In edit mode every rail icon (fixed + pinned) can be dragged/reordered;
   only pinned tools also show the unpin ✕. */
.rail-customizing .rail-item.rail-editing { cursor: grab; animation: railWiggle .5s ease-in-out infinite; }
.rail-customizing .rail-item-pinned .rail-unpin { display: flex; }
.rail-item.rail-dragging { opacity: 0.4; cursor: grabbing; animation: none; }
@keyframes railWiggle {
  0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); }
}
@media (prefers-reduced-motion: reduce) { .rail-customizing .rail-item.rail-editing { animation: none; } }

/* Floating "Done" affordance while customizing */
.rail-done-pill {
  position: fixed; left: 84px; bottom: 22px; z-index: 600;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px var(--sp-3);
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  font-family: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-3); animation: flyIn .16s var(--spring);
}
.rail-done-pill:hover { filter: brightness(1.06); }
@media (max-width: 768px) { .rail-done-pill { left: 50%; transform: translateX(-50%); } }

.profile-popover { bottom: 14px; width: 232px; padding: var(--sp-2); }
.pp-head { padding: var(--sp-2) var(--sp-2_5) var(--sp-2_5); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-1_5); }
.pp-name { font-size: var(--text-md); font-weight: 700; }
.pp-role { font-size: var(--text-sm); color: var(--text-muted); }
.pp-item {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: var(--sp-2) var(--sp-2_5); border-radius: 8px;
  background: transparent; border: none; cursor: pointer; color: var(--text); font-family: inherit; font-size: var(--text-base); text-align: left;
}
.pp-item i { font-size: var(--text-xl); color: var(--text-muted); width: 18px; text-align: center; flex-shrink: 0; }
.pp-item:hover { background: rgba(255,255,255,0.06); }
.pp-danger { color: #f87171; }
.pp-danger i { color: #f87171; }
.pp-danger:hover { background: rgba(239,68,68,0.1); }
.pp-divider { height: 1px; background: var(--border); margin: var(--sp-1_5) 0; }
.pp-ver { text-align: center; font-size: var(--text-2xs); color: var(--text-muted); opacity: 0.4; padding-top: var(--sp-1_5); letter-spacing: 0.04em; user-select: none; }

/* ══════════════════════════════════════════════════════════════
   OVERVIEW WORKSPACE  (resume hero + recent · instrument side panel)
   ══════════════════════════════════════════════════════════════ */
/* At-a-glance metric strip — both stat groups flow as one wrapping flex row */
.ov-stats { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: 22px; align-items: flex-start; }
.ov-stats .stats-row,
.ov-stats .stats-row-2 { display: contents; }
.ov-stats .stat-card { flex: 1 1 150px; min-width: 140px; margin-bottom: 0; }
.ov-stats .compliance-card { flex: 1 1 220px; }

/* Quick actions row beneath recent projects */
.ov-quick-actions { margin-top: var(--sp-5); }

/* Resume hero */
.resume-hero { margin-bottom: var(--sp-5); }
.resume-greeting h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 3px;
  background: linear-gradient(120deg, #ffffff, #93c5fd 60%, #a5b4fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.resume-greeting p { font-size: var(--text-base); color: var(--text-muted); margin-bottom: var(--sp-3_5); }
.resume-card {
  display: flex; align-items: center; gap: 18px; padding: var(--sp-4);
  background: radial-gradient(ellipse 60% 120% at 88% 50%, rgba(59,130,246,0.10) 0%, transparent 70%), var(--card);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-2);
  cursor: pointer; transition: transform .18s var(--spring), box-shadow .18s, border-color .15s;
}
.resume-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: var(--accent-edge); }
.resume-thumb {
  width: 132px; height: 84px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--elev-3), var(--surface)); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 28px;
}
.resume-thumb img { width: 100%; height: 100%; object-fit: cover; }
.resume-meta { flex: 1; min-width: 0; }
.resume-eyebrow { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.resume-name { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--sp-2); }
.resume-readouts { display: flex; flex-wrap: wrap; gap: var(--sp-3_5); font-size: var(--text-sm); color: var(--text-muted); }
.resume-readout b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; font-size: var(--text-base); }
.resume-edited { opacity: 0.8; }
.resume-cta { flex-shrink: 0; }
.resume-empty { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-2); }
.resume-empty-icon { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.resume-empty-text { flex: 1; }
.resume-empty-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--sp-0_5); }
.resume-empty-sub { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }

/* ── Rail/workspace responsive ── */
@media (max-width: 768px) {
  .app-rail {
    position: fixed; left: -76px; top: 0; width: 64px; height: 100vh;
    z-index: 300; transition: left .25s ease;
  }
  .app-rail.open { left: 0; box-shadow: var(--shadow-3); width: 220px; align-items: stretch; }
  .command-bar { display: none; }
  /* Hover tooltips can't be reached by touch. When the rail is open on mobile,
     widen it into a labelled list instead (icon + visible label per row) so
     items stay identifiable without relying on hover. */
  .rail-item[data-tip]:hover::after,
  .rail-avatar[data-tip]:hover::after,
  .rail-brand[data-tip]:hover::after { display: none; }
  .app-rail.open .rail-nav,
  .app-rail.open .rail-footer { align-items: stretch; padding: 0 var(--sp-2); }
  .app-rail.open .rail-item,
  .app-rail.open .rail-avatar {
    width: 100%; justify-content: flex-start; gap: var(--sp-3); padding: 0 var(--sp-2_5);
  }
  .app-rail.open .rail-item[data-tip]::after,
  .app-rail.open .rail-avatar[data-tip]::after {
    content: attr(data-tip); position: static; transform: none;
    background: none; border: none; box-shadow: none; padding: 0; margin-left: 0;
    font-size: var(--text-sm); font-weight: 600; color: inherit; white-space: nowrap;
  }
  .cmd-box { max-width: calc(100% - 24px); }
  .rail-flyout { left: 72px; }
  .admin-notif-panel, .user-notif-panel { left: 12px; right: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-box, .rail-flyout { animation: none; }
  .resume-card { transition: none; }
  .resume-card:hover { transform: none; }
}
/* ══════════════════════════════════════════════════════════════
   Job Scheduler — multi-view calendar
   ══════════════════════════════════════════════════════════════ */
.sched-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-5); flex-wrap:wrap; }
.sched-toolbar-controls { display:flex; gap:var(--sp-2_5); align-items:center; flex-wrap:wrap; }
.sched-nav { display:flex; gap:var(--sp-1_5); align-items:center; }
.sched-label { font-size:14px; font-weight:700; min-width:160px; text-align:center; }

/* View switcher (segmented control) */
.sched-viewswitch { display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:3px; gap:var(--sp-0_5); }
.sched-viewbtn { border:0; background:transparent; color:var(--text-muted); font-size:12px; font-weight:600; font-family:inherit; padding:var(--sp-1_5) var(--sp-3); border-radius:6px; cursor:pointer; transition:background .12s,color .12s; }
.sched-viewbtn:hover { color:var(--text); }
.sched-viewbtn.active { background:var(--accent); color:#fff; }

/* Layout */
.sched-layout { display:grid; grid-template-columns:1fr 260px; gap:var(--sp-5); align-items:start; }
.sched-main { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; min-height:420px; }
.sched-sidebar { display:flex; flex-direction:column; gap:var(--sp-4); }
.sched-rail { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-3); }
.sched-rail-head { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:var(--sp-2_5); }
.sched-rail-add { border:0; background:var(--bg); color:var(--text); width:24px; height:24px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sched-rail-add:hover { background:var(--accent); color:#fff; }
.sched-rail-empty { color:var(--text-muted); font-size:12px; padding:var(--sp-1) 0; }

/* Technician rail */
.sched-tech-item { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1_5) var(--sp-2); border-radius:8px; cursor:pointer; font-size:13px; }
.sched-tech-item:hover { background:var(--bg); }
.sched-tech-item.active { background:rgba(59,130,246,0.12); }
.sched-tech-item.inactive { opacity:.45; }
.sched-tech-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.sched-tech-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sched-tech-edit { color:var(--text-muted); opacity:0; transition:opacity .12s; }
.sched-tech-item:hover .sched-tech-edit { opacity:1; }
.sched-tech-edit:hover { color:var(--accent); }

/* Upcoming cards */
.sched-upcoming-card { background:var(--bg); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:var(--sp-2_5) var(--sp-3); margin-bottom:var(--sp-2); cursor:pointer; }
.sched-upcoming-card:hover { border-color:var(--accent); }
.sched-up-cust { font-size:12px; font-weight:700; }
.sched-up-meta { font-size:11px; color:var(--text-muted); margin-top:var(--sp-0_5); }

/* Month view */
.sched-month-head { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--border); }
.sched-month-head > div { padding:var(--sp-2) var(--sp-1); text-align:center; font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; }
.sched-month-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.sched-month-cell { min-height:84px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:var(--sp-1); cursor:pointer; overflow:hidden; }
.sched-month-cell:hover:not(.is-blank) { background:var(--bg); }
.sched-month-cell.is-blank { cursor:default; background:transparent; }
.sched-month-cell.is-offday { background:rgba(148,163,184,0.06); }
.sched-tg-headcell.is-offday { background:rgba(148,163,184,0.06); color:var(--text-muted); }
.sched-daynum { font-size:11px; font-weight:500; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.sched-month-cell.is-today .sched-daynum { font-weight:700; color:var(--accent); background:rgba(59,130,246,0.15); }
.sched-more { font-size:9px; color:var(--text-muted); margin-top:var(--sp-0_5); }

/* Chips (month + all-day) */
.sched-chip { color:#fff; font-size:9px; border-radius:3px; padding:var(--sp-0_5) 5px; margin-top:var(--sp-0_5); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
.sched-chip b { font-weight:700; }
.sched-chip.is-complete { opacity:.5; text-decoration:line-through; }

/* Status legend + list tag */
.sched-legend { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-3); font-size:11px; color:var(--text-muted); }
.sched-legend:empty { display:none; }
.sched-legend-item { display:inline-flex; align-items:center; gap:var(--sp-1); }
.sched-legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.sched-status-tag { font-weight:600; }

/* Time grid (week/day) */
.sched-tg { display:flex; flex-direction:column; }
.sched-tg-head { display:grid; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--card); z-index:2; }
.sched-tg-corner { border-right:1px solid var(--border); }
.sched-tg-headcell { padding:var(--sp-1_5) var(--sp-1); text-align:center; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:var(--sp-px); }
.sched-tg-dow { font-size:10px; font-weight:700; text-transform:uppercase; color:var(--text-muted); }
.sched-tg-dnum { font-size:16px; font-weight:700; }
.sched-tg-headcell.is-today .sched-tg-dnum { color:var(--accent); }
.sched-allday-row { display:grid; border-bottom:1px solid var(--border); min-height:26px; }
.sched-allday-label { font-size:9px; color:var(--text-muted); text-transform:uppercase; padding:var(--sp-1); border-right:1px solid var(--border); display:flex; align-items:center; }
.sched-allday-cell { border-right:1px solid var(--border); padding:var(--sp-0_5); cursor:pointer; min-width:0; }
.sched-tg-body { display:grid; max-height:560px; overflow-y:auto; position:relative; }
.sched-tg-gutter { border-right:1px solid var(--border); }
.sched-tg-hour { position:relative; border-bottom:1px solid var(--border); }
.sched-tg-hour span { position:absolute; top:-7px; right:6px; font-size:10px; color:var(--text-muted); background:var(--card); padding:0 var(--sp-0_5); }
.sched-tg-col { position:relative; border-right:1px solid var(--border); }
.sched-tg-cell { border-bottom:1px solid var(--border); cursor:pointer; }
.sched-tg-cell:hover { background:var(--bg); }
.sched-event { position:absolute; color:#fff; border-radius:5px; padding:var(--sp-0_5) 5px; font-size:10px; overflow:hidden; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.2); box-sizing:border-box; display:flex; flex-direction:column; gap:var(--sp-px); }
.sched-event-time { font-weight:700; opacity:.9; }
.sched-event-title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sched-event.is-complete { opacity:.5; text-decoration:line-through; }
/* Drag & drop + resize */
.sched-event { touch-action:none; }
.sched-chip { touch-action:none; }
.sched-event-resize { position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize; }
.sched-event:hover .sched-event-resize { background:rgba(255,255,255,.35); }
.sched-dragging, .sched-resizing { opacity:.4; pointer-events:none; }
.sched-drag-ghost { pointer-events:none; z-index:9999; opacity:.92; box-shadow:0 6px 18px rgba(0,0,0,.4); border-radius:5px; overflow:hidden; color:#fff; transform:rotate(1deg); }
.sched-drop-active { outline:2px dashed var(--accent); outline-offset:-2px; background:rgba(59,130,246,0.10) !important; }
body.sched-dnd-active { cursor:grabbing; user-select:none; }
.sched-nowline { position:absolute; left:0; right:0; height:2px; background:#ef4444; z-index:3; pointer-events:none; }
.sched-nowline::before { content:''; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:#ef4444; }

/* List view */
.sched-list { padding:var(--sp-3) var(--sp-4); }
.sched-list-group { margin-bottom:18px; }
.sched-list-date { font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; padding-bottom:var(--sp-1_5); border-bottom:1px solid var(--border); margin-bottom:var(--sp-2); }
.sched-list-card { display:flex; align-items:center; gap:var(--sp-2_5); padding:var(--sp-2); border-radius:8px; cursor:pointer; }
.sched-list-card:hover { background:var(--bg); }
.sched-list-card.is-complete { opacity:.5; }
.sched-list-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.sched-list-cust { font-size:13px; font-weight:600; }
.sched-list-meta { font-size:11px; color:var(--text-muted); margin-top:var(--sp-px); }
.sched-empty { padding:var(--sp-10); text-align:center; color:var(--text-muted); font-size:13px; }
.sched-empty-hint { margin-top:var(--sp-2); font-size:12px; opacity:0.85; display:flex; align-items:center; justify-content:center; gap:var(--sp-1_5); }
.sched-list-check { width:16px; height:16px; flex-shrink:0; cursor:pointer; accent-color:var(--accent); }
.sched-list-card.is-selected { background:rgba(59,130,246,0.10); outline:1px solid var(--accent); }

/* Day map */
.day-map-body { display:grid; grid-template-columns:1fr 260px; gap:12px; }
#dayMap { height:60vh; min-height:320px; border-radius:10px; overflow:hidden; background:var(--bg); }
#dayMapList { max-height:60vh; overflow-y:auto; }
@media (max-width:760px) {
  .day-map-body { grid-template-columns:1fr; }
  #dayMap { height:48vh; min-height:260px; }
  #dayMapList { max-height:none; }
}
.day-map-pin span { display:flex; align-items:center; justify-content:center; width:26px; height:26px; background:var(--accent); color:#fff; border-radius:50%; font-size:12px; font-weight:700; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.day-map-stop { display:flex; gap:10px; align-items:center; padding:8px; border-radius:8px; cursor:pointer; }
.day-map-stop:hover { background:var(--bg); }
.day-map-num { display:flex; align-items:center; justify-content:center; width:24px; height:24px; background:var(--accent); color:#fff; border-radius:50%; font-size:12px; font-weight:700; flex-shrink:0; }

/* History view */
.sched-history { padding:var(--sp-3) var(--sp-4); }
.sched-history-search { width:100%; max-width:340px; margin-bottom:var(--sp-3); padding:9px 12px; background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:13px; font-family:inherit; }
.sched-hist-card { display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-2); border-radius:8px; }
.sched-hist-card:hover { background:var(--bg); }
.sched-hist-main { flex:1; min-width:0; cursor:pointer; }
.sched-hist-head { font-size:13px; display:flex; align-items:center; gap:8px; }

/* Job media (owner view) */
.job-media-strip { display:flex; flex-wrap:wrap; gap:6px; }
.job-media-thumb { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border); display:block; }

/* Job checklist (modal) */
.job-checklist { display:flex; flex-direction:column; gap:4px; }
.job-checklist-item { display:flex; align-items:center; gap:8px; font-size:13px; }
.job-checklist-item span { flex:1; }
.job-checklist-x { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:2px; font-size:14px; }
.job-checklist-x:hover { color:#ef4444; }

/* Booking requests */
.sched-req-badge { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#ef4444; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.booking-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.booking-head { font-size:14px; margin-bottom:4px; }
.booking-meta { font-size:12px; color:var(--text-muted); margin-top:2px; }
.booking-msg { font-size:13px; margin-top:8px; padding:8px 10px; background:var(--bg); border-radius:8px; }
.booking-dep { font-size:10px; font-weight:700; padding:1px 7px; border-radius:9px; }
.booking-dep--paid { background:rgba(34,197,94,0.12); color:#4ade80; }
.booking-dep--pending { background:rgba(245,158,11,0.12); color:#fbbf24; }
.booking-actions { display:flex; gap:8px; margin-top:12px; }

/* Bulk-assign bar */
.sched-bulkbar { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-2_5); margin-bottom:var(--sp-3); background:var(--bg); border:1px solid var(--accent); border-radius:8px; flex-wrap:wrap; position:sticky; top:0; z-index:4; }
.sched-bulk-count { font-size:12px; font-weight:700; }

/* Swimlane / dispatch view */
.sched-swim { display:flex; flex-direction:column; gap:var(--sp-2); }
.sched-swim-actions { display:flex; justify-content:flex-end; }
.sched-swim-scroll { overflow-x:auto; border:1px solid var(--border); border-radius:8px; }
.sched-swim-head { display:flex; border-bottom:1px solid var(--border); background:var(--card); position:sticky; top:0; z-index:3; }
.sched-swim-corner { width:170px; flex-shrink:0; position:sticky; left:0; background:var(--card); z-index:2; border-right:1px solid var(--border); }
.sched-swim-hours { display:flex; }
.sched-swim-hour { flex-shrink:0; font-size:10px; color:var(--text-muted); padding:var(--sp-1) var(--sp-1); border-left:1px solid var(--border); }
.sched-swim-row { display:flex; border-bottom:1px solid var(--border); }
.sched-swim-label { width:170px; flex-shrink:0; padding:var(--sp-2); position:sticky; left:0; background:var(--card); z-index:2; border-right:1px solid var(--border); }
.sched-swim-tech { display:flex; align-items:center; gap:var(--sp-1_5); font-size:12px; font-weight:600; }
.sched-swim-util { display:flex; align-items:center; gap:var(--sp-1_5); margin-top:var(--sp-1); }
.sched-swim-bar { flex:1; height:5px; border-radius:3px; background:var(--border); overflow:hidden; }
.sched-swim-bar > span { display:block; height:100%; background:var(--accent); }
.sched-swim-util.is-over .sched-swim-bar > span { background:#ef4444; }
.sched-swim-pct { font-size:10px; color:var(--text-muted); }
.sched-swim-util.is-over .sched-swim-pct { color:#ef4444; font-weight:700; }
.sched-swim-untimed { display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-1); }
.sched-swim-chip { font-size:9px; color:#fff; border-radius:3px; padding:1px 5px; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sched-swim-track { position:relative; touch-action:none; }
.sched-swim-gridline { position:absolute; top:0; bottom:0; width:1px; background:var(--border); }
.sched-swim-event { position:absolute; color:#fff; font-size:10px; border-radius:4px; padding:1px 5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.2); touch-action:none; box-sizing:border-box; }
.sched-swim-event.is-complete { opacity:.5; text-decoration:line-through; }

/* Modal extras */
.sched-newtech { font-size:11px; font-weight:600; color:var(--accent); float:right; cursor:pointer; }
.sched-recur-opts { display:flex; flex-direction:column; gap:var(--sp-2); background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:var(--sp-2_5); }
.sched-recur-row { display:flex; align-items:center; gap:var(--sp-2); font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
.sched-recur-row input { padding:var(--sp-1_5) var(--sp-2); background:var(--card); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; font-family:inherit; }
.sched-recur-hint { font-size:10px; color:var(--text-muted); }
.sched-weekdays { display:flex; gap:var(--sp-1); }
.sched-wd { width:30px; height:30px; border:1px solid var(--border); background:var(--card); color:var(--text-muted); border-radius:6px; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }
.sched-wd.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.sched-scope-row { display:flex; align-items:center; gap:var(--sp-3_5); flex-wrap:wrap; font-size:12px; color:var(--text-muted); background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:var(--sp-2) var(--sp-2_5); }
.sched-scope-row label { display:flex; align-items:center; gap:5px; cursor:pointer; color:var(--text); }

/* Job modal footer — a secondary action toolbar above the Cancel/Save row */
.sched-modal-footer { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.sched-editactions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--border); }
.sched-editactions .sched-btn-danger { margin-left:auto; color:#ef4444; }
.sched-primaryactions { display:flex; justify-content:flex-end; gap:8px; }

@media (max-width: 860px) {
  .sched-layout { grid-template-columns:1fr; }
  .sched-sidebar { flex-direction:row; flex-wrap:wrap; }
  .sched-sidebar > .sched-rail { flex:1; min-width:200px; }
  .sched-tg-week .sched-tg-body, .sched-tg-week .sched-tg-head, .sched-tg-week .sched-allday-row { min-width:640px; }
  .sched-main { overflow-x:auto; }
}