/* ===== shell.css part 1 — was ui/index.html inline <style> at line 31 ===== */
    :root {
      --navy: #0a0f1e;
      --navy2: #0f172a;
      --navy3: #1e293b;
      --blue: #3b82f6;
      --blue-soft: rgba(59,130,246,0.12);
      --green: #22c55e;
      --orange: #f97316;
      --red: #ef4444;
      --amber: #f59e0b;
      --bg1: #f7f9fc;
      --bg2: #eef2f8;
      --card2: #ffffff;
      --border: #e2e8f0;
      --text: #0f172a;
      --faint: #94a3b8;
      --btn: #0f172a;
      --btn2: #1e293b;
      --accent: #334155;
      --accent2: #1f2937;
      --accentSoft: rgba(51, 65, 85, 0.12);
      --shadow: none;
      --radius2: 12px;
      --maxw: 1040px;
      --font: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    html,
    body {
      height: 100%;
      font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    body {
      margin: 0;
      color: var(--text);
      background: var(--bg);
    }

    /* Top-of-page progress bar — shown during Cognito redirects + token exchange so
       users get visible feedback that something is happening on slow networks. */
    .globalProgressBar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      width: 0%;
      z-index: 99999;
      background: linear-gradient(to right, #3b82f6, #60a5fa, #93c5fd);
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.55);
      opacity: 0;
      pointer-events: none;
      transition: width 0.3s ease, opacity 0.2s ease;
    }
    .globalProgressBar.active { opacity: 1; }

    .topbar {
      min-height: 60px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      background: var(--navy);
      border-bottom: none;
      box-shadow: none;
      padding: 0 28px;
      gap: 12px;
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .navLeft {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Topbar logo */
    .topbarLogo {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .topbarLogoMark {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      background: #000;
    }
    .topbarLogoMark img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .topbarLogoText {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }
    .topbarLogoName {
      font-size: 19px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.2px;
    }
    .topbarLogoSub {
      font-size: 13px;
      color: rgba(191,219,254,0.95);
      letter-spacing: 0.9px;
      font-weight: 600;
      text-transform: uppercase;
    }

    /* Topbar center nav tabs */
    /* Topbar user info (right side) */
    .topbarUserInfo {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .topbarUserInfo.hidden { display: none !important; }
    .topbarPill {
      padding: 5px 13px;
      border-radius: 99px;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      letter-spacing: 0.1px;
    }
    .topbarPillOk {
      background: rgba(34,197,94,0.2);
      color: #4ade80;
    }
    .topbarPillRole {
      background: rgba(59,130,246,0.2);
      color: #93c5fd;
    }
    .topbarAvatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      flex-shrink: 0;
    }

    @media (max-width: 700px) {
      .topbarLogoText { display: none; }
      .topbarPill { display: none; }
    }

    .navTitleWrap {
      text-align: center;
      justify-self: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .mainNav {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 12px 14px;
    }

    .mainNav button {
      width: 100%;
      text-align: left;
      border: none;
      background: transparent;
      color: rgba(255,255,255,0.92);
      padding: 11px 14px;
      border-radius: 10px;
      font-size: 15px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      gap: 12px;
      letter-spacing: 0.1px;
    }
    .mainNav button .sdot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.4;
      flex-shrink: 0;
    }
    .mainNav button.active .sdot {
      opacity: 1;
      background: #3b82f6;
    }

    .mainNav button:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
      transform: none;
    }

    .mainNav button:active {
      transform: none;
    }

    .mainNav button.active {
      background: rgba(59,130,246,0.2);
      border-color: transparent;
      color: #fff;
      box-shadow: 0 0 0 1px rgba(59,130,246,0.35) inset;
      font-weight: 600;
    }



    .navRight {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-self: end;
    }

    .profileMenu {
      position: relative;
    }

    .profileButton {
      border: none;
      background: transparent;
      color: rgba(255,255,255,0.6);
      padding: 0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: none !important;
    }

    .profileButton:hover {
      background: transparent;
      color: #fff;
    }

    .topbarRoleLabel {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,0.85);
    }

    .profileDropdown {
      position: absolute;
      right: 0;
      top: calc(100% + 6px);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px;
      min-width: 220px;
      box-shadow: var(--shadow);
      z-index: 10;
      color: var(--text);
    }

    .profileRow {
      font-size: 12px;
      color: var(--text);
      margin-bottom: 6px;
      overflow-wrap: anywhere;
    }

    .wrap {
      max-width: var(--maxw);
      margin: 38px auto 60px;
      padding: 0 16px;
    }

    /* Full-width pages: remove max-width constraint. (Was a nine-member list:
       the other pages in it were deleted 2026-08-16, and the body.pageIs*
       classes were never set by any JS — CSS waiting for code that never
       came. Purged 2026-08-18.) */
    .wrap:has(> #pageMyTasks) {
      max-width: none;
      margin: 0;
      padding: 0;
    }

    /* ⚠️ THESE PAGES USED TO DEFAULT TO `opacity: 0` AND FADE IN. That is a
       FAIL-INVISIBLE default, and it produced a blank screen with the nav
       still highlighted and nothing in the console — Talha hit it clicking
       "The lab".
       Two separate mechanisms had to cooperate for a page to become visible:
       a requestAnimationFrame callback, and then a CSS transition. NEITHER
       runs while the tab is not painting (backgrounded, bfcache restore,
       mid-switch), so the page stayed at opacity 0 indefinitely. Measured on
       the live page: `.isVisible` present, specificity correct, computed
       opacity still 0 four hundred milliseconds later.
       A 200ms entrance fade is not worth a class of bug where the whole app
       renders blank. Pages are now visible by default and the entrance
       animation is gone; `.isVisible` is kept because setActivePage and a few
       other rules still toggle it, but nothing depends on it to be SEEN.
       If an entrance animation ever comes back, it must degrade to visible —
       never to invisible. */
    #pageSettings {
      opacity: 1;
    }


    #pageSettings.isVisible {
      opacity: 1;
      transform: translateY(0);
    }

    .appShell {
      display: block;
      min-height: calc(100vh - 64px);
    }

    /* My Tasks (technician landing) */
    .mtPage {
      width: 100%;
      padding: 28px 32px 36px;
      box-sizing: border-box;
      background: #f1f5f9;
      min-height: calc(100vh - var(--topbarH, 64px));
      display: flex;
      flex-direction: column;
      gap: 18px;
      color: #0f172a;
    }
    @media (max-width: 900px) {
      .mtPage { padding: 18px 14px 28px; }
    }
    .mtHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .mtTitle { font-size: 24px; font-weight: 700; color: #0f172a; letter-spacing: -0.3px; }
    .mtSub { font-size: 13px; color: #64748b; margin-top: 4px; }




    .sideNav {
      background: var(--navy);
      border-right: none;
      box-shadow: none;
      min-height: calc(100vh - 60px);
      position: fixed;
      top: 60px;
      left: 0;
      width: 220px;
      transform: translateX(0);
      transition: transform 0.2s ease;
      z-index: 30;
    }


    /* Friendly portal-load error card (replaces the stretched .statusBox).
       Use !important on the centering margin because the markup ships with an
       inline `margin: 14px 16px` (left over from the .statusBox era) that we
       can't easily strip from every render path. */
    .portalErrorCard {
      max-width: 460px;
      margin: 80px auto !important;
      padding: 36px 40px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
      text-align: center;
    }
    .portalErrorIcon {
      width: 56px;
      height: 56px;
      margin: 0 auto 18px;
      border-radius: 50%;
      background: #fef3c7;
      color: #b45309;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 600;
    }
    .portalErrorTitle {
      font-size: 18px;
      font-weight: 600;
      color: #0f172a;
      margin-bottom: 8px;
      letter-spacing: -0.2px;
    }
    .portalErrorBody {
      font-size: 14px;
      color: #64748b;
      line-height: 1.55;
      margin-bottom: 22px;
    }
    .portalErrorBtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 22px;
      background: #0f172a;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s ease;
    }
    .portalErrorBtn:hover { background: #1e293b; }

    .portalErrorActions {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .portalErrorBtnSecondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 11px 20px;
      background: #fff;
      color: #0f172a;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .portalErrorBtnSecondary:hover { background: #f8fafc; border-color: #cbd5e1; }
    .mainContent {
      width: calc(100% - 220px);
      margin-left: 220px;
      padding: 16px 0;
      overflow-x: hidden;
      box-sizing: border-box;
    }
    .hamburgerBtn {
      display: none;
      border: none;
      background: rgba(255,255,255,0.1);
      color: #fff;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }

    .hamburgerBtn:hover {
      background: rgba(255,255,255,0.18);
      color: #fff;
    }

    .sideNav.open {
      transform: translateX(0);
    }

    .sideNavOverlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 25;
    }

    .sideNavOverlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    @media (max-width: 900px) {
      .appShell {
        grid-template-columns: 1fr;
      }
      .mainContent {
        padding: 12px 0;
        width: 100%;
        margin-left: 0;
      }
      .sideNav {
        transform: translateX(-110%);
      }
      .sideNav.open {
        transform: translateX(0);
      }
      .hamburgerBtn {
        display: inline-flex;
      }
    }

    body.signedOut .navTitleWrap { display: none; }
    body.signedOut .topbar { display: none; }
    body.signedOut .navLeft { display: none; }
    body.signedOut .navRight { display: none; }


    .card {
      background: var(--card);
      border: 0.5px solid var(--border);
      border-radius: 16px;
      box-shadow: none;
      padding: 24px 26px;
      backdrop-filter: none;
    }

    .card+.card {
      margin-top: 16px;
    }

    .signedOutHero {
      position: fixed;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* Layered wash instead of a flat fill: two soft brand-tinted glows over
         a diagonal gradient, plus barely-there strata lines (a nod to soil
         layers). All CSS — no image request on the first paint. */
      background:
        repeating-linear-gradient(
          158deg,
          rgba(15, 23, 42, 0.022) 0px,
          rgba(15, 23, 42, 0.022) 1px,
          transparent 1px,
          transparent 22px
        ),
        radial-gradient(1100px 720px at 76% 16%, rgba(59, 130, 246, 0.11), transparent 62%),
        radial-gradient(880px 620px at 58% 96%, rgba(15, 23, 42, 0.075), transparent 64%),
        linear-gradient(158deg, #f9fbfd 0%, #eef2f8 48%, #e4ecf6 100%);
      z-index: 40;
      pointer-events: auto;
      overflow-y: auto;
    }

    body.signedIn .signedOutHero { display: none; }
    body.signedOut .signedOutHero { display: grid; }
    body.signedOut .appShell { display: none; }
    body.signedOut #sideNavOverlay { display: none; }
    body.signedOut #sideNav { display: none; }

    /* LEFT BRAND PANEL */
    .authBrandPanel {
      background: #0a0f1e;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 52px 56px;
      min-height: 100vh;
      box-sizing: border-box;
    }
    .authBrandHeader {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .authBrandHeader .authLogoLeftPanel {
      height: 44px;
      width: auto;
      display: block;
      flex-shrink: 0;
    }
    .authBrandHeaderText .authBrandTitle {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.2px;
      line-height: 1.1;
    }
    .authBrandHeaderText .authBrandSub {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      letter-spacing: 0.5px;
      margin-top: 2px;
    }
    .authBrandHero {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px 0 40px;
    }
    .authBrandTitleBig {
      font-size: 38px;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.8px;
      line-height: 1.15;
      margin-bottom: 18px;
    }
    .authBrandTitleBig span { color: #3b82f6; }
    .authBrandSubText {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.5);
      line-height: 1.75;
      max-width: 420px;
    }
    .authBrandFeatures {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 44px;
    }
    .authBrandFeature {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .authBrandFeatureDot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #3b82f6;
      flex-shrink: 0;
    }
    .authBrandFeatureText {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.5;
    }
    .authBrandFooter {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.25);
      line-height: 1.5;
    }

    /* RIGHT FORM PANEL */
    .authFormPanel {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48px 40px;
      min-height: 100vh;
      box-sizing: border-box;
    }

    #authCard {
      width: 100%;
      max-width: 460px;
      height: auto;
      border-radius: 20px;
      padding: 40px 44px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      overflow: visible;
      background: #fff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 8px 40px rgba(15, 23, 42, 0.08);
      backdrop-filter: none;
    }

    .authBrand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      margin-bottom: 6px;
    }

    .authLogo {
      width: auto;
      display: block;
    }

    .authLogoMobileOnly {
      display: none;
      height: 56px;
      margin-bottom: 12px;
    }

    .authAppName {
      font-weight: 600;
      font-size: 24px;
      color: #0f172a;
      letter-spacing: -0.3px;
      text-align: left;
    }

    @media (max-width: 900px) {
      .signedOutHero { grid-template-columns: 1fr; }
      .authBrandPanel { display: none; }
      .authFormPanel { padding: 32px 20px; }
      .authLogoMobileOnly { display: block; }
    }

    @media (max-width: 520px) {
      #authCard { padding: 28px 24px; }
    }

    #authCard .row {
      margin-top: 6px;
    }

    #authCard .statusBox {
      background: rgba(15, 23, 42, 0.06);
      border: 1px solid rgba(15, 23, 42, 0.10);
      color: #0f172a;
    }

    .authMiniPill {
      width: fit-content;
      max-width: 86%;
      margin: 12px auto 0;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #authCard input[readonly] {
      background: rgba(255, 255, 255, 0.70);
    }

    #authCard .btnRow {
      justify-content: center;
    }

    .row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .col {
      flex: 1 1 260px;
      min-width: 240px;
    }

    .col2 {
      flex: 1 1 520px;
      min-width: 320px;
    }

    .label {
      font-size: 11px;
      color: var(--faint);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      font-weight: 500;
      margin-bottom: 5px;
    }

    button,
    input,
    select,
    textarea,
    table {
      font-family: inherit;
    }

    input,
    textarea,
    select {
      width: 100%;
      box-sizing: border-box;
      border-radius: 10px;
      border: 0.5px solid var(--border);
      background: #f8fafc;
      color: var(--text);
      font-weight: 400;
      padding: 10px 14px;
      font-size: 14px;
      outline: none;
      font-family: inherit;
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: var(--blue);
      background: #fff;
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--muted);
    }

    body.themeLight input,
    body.themeLight textarea,
    body.themeLight select {
      background: #f3f4f6;
      color: #111827;
      border: 1px solid rgba(17, 24, 39, 0.18);
    }

    textarea {
      min-height: 120px;
      resize: vertical;
    }

    .btnRow {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    /* ⚠️ THE BUG THIS SPLIT EXISTS TO KILL — read before merging it back.
       This used to be ONE rule painting every <button> navy, including its
       colours. `button:hover` scores (0,1,1), which OUTRANKS a bare component
       class at (0,1,0) — so any palette component built as a <button> looked
       right at rest and flipped to near-black the moment it was hovered or
       focused. Talha reported it twice: first on The lab's stage cards, then
       on Client submissions' filter cards, where the selected card went dark
       navy with dark text and became unreadable.
       Fixing `.labStage` alone fixed a symptom. A sweep then found FIVE more
       (.idStat, .tdTab, .backToLab, .rd-btn-refresh) — the class of bug, not
       the instance.
       STRUCTURE stays at normal specificity so no button loses its padding or
       radius. COLOUR drops into :where(), which contributes ZERO — so any
       component class beats it unconditionally, at rest and on hover, without
       depending on stylesheet order.
       Safe because it was MEASURED, not assumed: across all seven screens,
       39 visible buttons, ZERO were relying on this rule for their background.
       Re-run that check before widening it again. */
    button,
    .btn,
    a.btn {
      border: none;
      border-radius: 10px;
      padding: 10px 22px;
      cursor: pointer;
      font-weight: 500;
      box-shadow: none;
      text-decoration: none;
      font-size: 13px;
      font-family: inherit;
    }

    :where(button, .btn, a.btn) {
      color: #ffffff;
      background: var(--navy2);
    }

    :where(button:hover, .btn:hover, a.btn:hover) {
      background: var(--navy3);
    }

    button.secondary{
      background: #f8fafc;
      border: 0.5px solid var(--border);
      color: var(--text);
      box-shadow: none;
    }

    button.secondary:hover{
      background: var(--border);
    }
    button.danger {
      background: #b91c1c;
      border: 1px solid #991b1b;
      color: #ffffff;
    }

    button.danger:hover {
      background: #991b1b;
    }

    button:disabled {
      opacity: 0.75;
      background: #e5e7eb;
      border: 1px solid #d1d5db;
      color: #111827;
      cursor: not-allowed;
    }
    .pill {
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 99px;
      background: rgba(148, 163, 184, 0.18);
      border: none;
      color: #1f2937;
      font-weight: 500;
      white-space: nowrap;
    }

    .pill.ok {
      background: rgba(34, 197, 94, 0.2);
      border-color: transparent;
      color: #4ade80;
    }

    .pill.warn {
      background: rgba(245, 158, 11, 0.15);
      border-color: transparent;
      color: #92400e;
    }

    .statusBox {
      margin-top: 12px;
      background: #eff6ff;
      border: 0.5px solid #bfdbfe;
      border-radius: 10px;
      padding: 12px 16px;
      font-size: 13px;
      color: #1e40af;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
      min-height: 40px;
    }
    .authUserRoleRow {
      display: none;
    }

    .note {
      margin-top: 10px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }
    .hidden {
      display: none !important;
    }

    body.themeDark {
      --bg1: #0f172a;
      --bg2: #111827;
      --card: #111827;
      --card2: #0f172a;
      --text: #e5e7eb;
      --muted: #94a3b8;
      --border: rgba(148, 163, 184, 0.2);
      color: var(--text);
    }

    body.themeDark .card,
    body.themeDark .card *{
      color: var(--text);
    }

    body.themeDark .label,
    body.themeDark .sub,
    body.themeDark .note {
      color: rgba(226, 232, 240, 0.78);
    }

    body.themeDark input,
    body.themeDark select,
    body.themeDark textarea {
      background: rgba(15, 23, 42, 0.55);
      color: var(--text);
      border-color: rgba(148, 163, 184, 0.22);
    }

    body.themeDark input::placeholder,
    body.themeDark textarea::placeholder {
      color: rgba(226, 232, 240, 0.55);
    }

    body.themeDark .statusBox {
      background: rgba(148, 163, 184, 0.08);
      border-color: rgba(148, 163, 184, 0.18);
      color: var(--text);
    }

    body.themeDark .mainNav button:hover {
      background: rgba(255,255,255,0.05);
    }

    body.themeDark .card {
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    }

    body.themeDark .label {
      color: var(--muted);
    }

    body.themeDark .topbar {
      background: var(--navy);
      border-color: transparent;
    }

    body.themeDark .sideNav {
      background: var(--navy);
      border-color: transparent;
    }

    body.themeDark .profileDropdown {
      background: var(--card);
      border-color: var(--border);
      color: var(--text);
    }

    body.themeDark .mainNav button {
      color: rgba(255,255,255,0.45);
    }


    body.themeDark.signedOut #authCard,
    body.themeDark .signedOutHero #authCard {
      background: #fff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 8px 40px rgba(15, 23, 42, 0.12);
      color: #0f172a;
    }

    body.themeDark.signedOut #authCard .authAppName,
    body.themeDark.signedOut #authCard .label,
    body.themeDark.signedOut #authCard .h,
    body.themeDark.signedOut #authCard .sub,
    body.themeDark.signedOut #authCard .note {
      color: #0f172a;
    }

    body.themeDark.signedOut #authCard input,
    body.themeDark.signedOut #authCard select,
    body.themeDark.signedOut #authCard textarea {
      background: rgba(255, 255, 255, 0.78);
      color: #0f172a;
      border: 1px solid rgba(17, 24, 39, 0.18);
    }

    body.themeDark.signedOut #authCard input::placeholder,
    body.themeDark.signedOut #authCard textarea::placeholder {
      color: rgba(15, 23, 42, 0.55);
    }

    body.themeDark.signedOut #authLogPill {
      background: rgba(245, 158, 11, 0.16);
      border: 1px solid rgba(245, 158, 11, 0.28);
      color: rgba(120, 53, 15, 1);
    }

    body.themeDark.signedOut #authCard .label,
    body.themeDark.signedOut #authCard .sub,
    body.themeDark.signedOut #authCard .note {
      color: #0f172a;
    }

    body.themeDark button.secondary,
    body.themeDark .btn.secondary{
      background: rgba(15, 23, 42, 0.55);
      color: rgba(226, 232, 240, 0.95);
      border: 1px solid rgba(148, 163, 184, 0.22);
    }

    body.themeDark button.secondary:hover{
      background: rgba(148, 163, 184, 0.10);
    }

    /* ===== Sign-in / Sign-up landing card ===== */
    .authIntro {
      text-align: left;
      font-size: 14px;
      color: #64748b;
      line-height: 1.55;
      margin: 4px 0 28px;
    }
    .authActions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 18px;
    }
    .authBtnPrimary {
      width: 100%;
      padding: 12px 16px;
      border-radius: 11px;
      background: #0f172a;
      color: #fff;
      border: 1px solid #0f172a;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s ease;
    }
    .authBtnPrimary:hover { background: #1e293b; }
    .authBtnPrimary:disabled { opacity: .55; cursor: not-allowed; }
    .authBtnSecondary {
      width: 100%;
      padding: 12px 16px;
      border-radius: 11px;
      background: #fff;
      color: #0f172a;
      border: 1px solid rgba(17,24,39,.18);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s ease, border-color .15s ease;
    }
    .authBtnSecondary:hover {
      background: #f8fafc;
      border-color: rgba(59,130,246,.55);
    }
    .authDivider {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #94a3b8;
      font-size: 12px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin: 4px 0;
    }
    .authDivider::before,
    .authDivider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #e2e8f0;
    }
    .authHelpBlocks {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 4px;
    }
    .authHelpBlock {
      padding: 12px 14px;
      border: 1px solid rgba(17,24,39,.08);
      border-radius: 10px;
      background: #f8fafc;
    }
    .authHelpTitle {
      font-size: 12.5px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
    }
    .authHelpBody {
      font-size: 12.5px;
      color: #475569;
      line-height: 1.5;
    }
    .authHelpBody strong { color: #0f172a; }

    /* ===== Client Pending (self-registered, awaiting approval) ===== */
    #pageClientPending { display: none; }
    .cpPendingWrap {
      max-width: 760px;
      margin: 0 auto;
      padding: 24px 20px 60px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .cpPendingHero {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 22px 24px;
      background: #0f172a;
      color: #fff;
      border-radius: 16px;
    }
    .cpPendingLogo { width: 52px; height: 52px; border-radius: 10px; background: #000; padding: 4px; }
    .cpPendingTitle { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; }
    .cpPendingSub { font-size: 13.5px; color: rgba(255,255,255,0.65); margin-top: 4px; }
    .cpPendingSignOut {
      margin-left: auto;
      padding: 8px 14px;
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,0.18);
      background: transparent;
      color: rgba(255,255,255,0.85);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }
    .cpPendingSignOut:hover { background: rgba(255,255,255,0.08); }

    .cpPendingStatus { padding: 14px 18px; border-radius: 12px; font-size: 13.5px; }
    .cpPendingStatusOk { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
    .cpPendingStatusErr { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
    .cpPendingStatusTitle { font-weight: 700; margin-bottom: 4px; }
    .cpPendingStatusBody { font-weight: 500; line-height: 1.5; }

    .cpPendingCard {
      background: #fff;
      border: 1px solid rgba(17,24,39,.08);
      border-radius: 14px;
      padding: 22px 24px;
      box-shadow: 0 1px 2px rgba(15,23,42,.04);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .cpPendingCardTitle {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: rgba(15,23,42,.55);
    }
    .cpPendingGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 700px) { .cpPendingGrid { grid-template-columns: 1fr; } }
    .cpPendingField { display: flex; flex-direction: column; gap: 6px; }
    .cpPendingLabel { font-size: 12.5px; font-weight: 600; color: #334155; }
    .cpPendingReq { color: #ef4444; }
    .cpPendingField input,
    .cpPendingField textarea {
      border: 1px solid rgba(17,24,39,.14);
      border-radius: 9px;
      padding: 10px 12px;
      font-size: 14px;
      font-family: inherit;
      color: #0f172a;
      background: #f8fafc;
    }
    .cpPendingField input:focus,
    .cpPendingField textarea:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59,130,246,.15);
      background: #fff;
    }
    .cpPendingField input[readonly] { background: #f1f5f9; color: #64748b; }
    .cpPendingActions { display: flex; justify-content: flex-end; }
    .cpPendingSubmit {
      padding: 11px 22px;
      border-radius: 11px;
      background: #16a34a;
      border: none;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s ease;
    }
    .cpPendingSubmit:hover:not(:disabled) { background: #15803d; }
    .cpPendingSubmit:disabled { opacity: .55; cursor: not-allowed; }




    /* ========================================================================
       STAFF CHROME — repainted 2026-08-13 into the approved Clay/Harbor system
       (Talha: repaint the whole staff shell, not just the technician screens).

       This is an OVERRIDE LAYER on purpose, and it is the design swap point:
       the navy rules above are untouched, so this whole block can be deleted to
       revert, and colour changes happen HERE (or in palette.css) rather than
       being hunted through 3,700 lines. Every value is a var() from
       palette.css — no literal colours below this line.

       Scope: the FRAME only (topbar, sidebar, home, shell panes). The mounted
       dashboards keep their own styling until each is rebuilt in turn.
       ======================================================================== */

    /* The page ground AND the default text colour. `color` was missing here:
       the base rule far above is `body { color: var(--text) }` with
       `--text: #0f172a`, so every descendant that did not set its own colour
       inherited Tailwind slate — including the React mount points, and through
       them anything the dashboards did not explicitly paint. Invisible while
       each app set its own colour on its wrapper, and a slate anchor the moment
       one did not. Found by walking computed styles up from #intakeRoot, not
       by looking at the screen. */
    body { background: var(--bg); color: var(--ink); }

    /* ---- topbar ---- */
    .topbar {
      background: var(--card);
      border-bottom: 1px solid var(--line);
      min-height: 64px;
    }
    .topbarLogoMark { background: transparent; }
    .topbarLogoName {
      font-family: var(--serif);
      font-weight: 600;
      letter-spacing: -0.2px;
      color: var(--ink);
    }
    .topbarLogoSub {
      color: var(--muted);
      letter-spacing: 0.4px;
    }
    .hamburgerBtn { color: var(--ink); }
    .hamburgerBtn:hover { background: var(--panel); }
    /* Status pills: quieter than the old neon-on-navy, still scannable. */
    .topbarPill {
      border-radius: 99px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid transparent;
    }
    .topbarPillOk {
      background: var(--greenSoft);
      color: var(--green);
      border-color: var(--greenSoft);
    }
    .topbarPillRole {
      background: var(--primarySoft);
      color: var(--primaryDeep);
      border-color: var(--primarySoft);
    }
    .topbarAvatar {
      background: var(--primarySoft);
      color: var(--avatarInk);
      font-weight: 600;
    }
    .topbarRoleLabel { color: var(--ink); }
    .profileButton:hover { background: var(--panel); }
    .profileDropdown {
      background: var(--card);
      border: 1px solid var(--line);
      color: var(--ink);
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
    }
    .profileRow { color: var(--muted); }

    /* ---- topbar contents ----
       The right side carried FOUR things that said two: a "Signed In" pill
       (you are looking at the app — you are signed in), a role pill, and then
       the same role again next to the avatar. Role + avatar is the whole
       message. The client portal already hid these for the same reason. */
    .topbarPill { display: none; }

    /* The hamburger kept its dark-chrome colours — white text on a white
       translucent pad — which on the cream topbar made it invisible, and
       invisible again on hover. It is the only way to reach the navigation
       below 900px. */
    .hamburgerBtn {
      background: transparent;
      border: 1px solid var(--ghostLine);
      color: var(--ink);
    }
    .hamburgerBtn:hover { background: var(--panel); color: var(--ink); }

    /* ---- side navigation ---- */
    .sideNav {
      background: var(--panel);
      border-right: 1px solid var(--line);
      /* Was hardcoded to 60px while the topbar is 64px, so the sidebar sat 4px
         under it. --topbarH is measured from the real topbar at runtime. */
      top: var(--topbarH, 64px);

      /* THE BUG: `min-height` let the nav grow past the viewport while
         `position: fixed` meant page scrolling never moved it and it had no
         scroll of its own. On a 700px-tall laptop the supervisor's list ran
         107px below the fold, so the last items in the list
         were simply unreachable — no scrollbar, no way down. A fixed sidebar
         must be exactly viewport-tall and scroll its own overflow. */
      height: calc(100vh - var(--topbarH, 64px));
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;   /* don't scroll the page at the ends */
      padding-bottom: 18px;
    }
    /* A quiet scrollbar — the default is a grey slab against the warm panel. */
    .sideNav::-webkit-scrollbar { width: 10px; }
    .sideNav::-webkit-scrollbar-thumb {
      background: var(--ghostLine); border-radius: 99px;
      border: 3px solid var(--panel);
    }
    .sideNav::-webkit-scrollbar-track { background: transparent; }
    .sideNavOverlay { background: rgba(46, 39, 35, 0.35); }

    /* Decorative bullets in front of every nav item. They marked nothing. */
    .mainNav button .sdot { display: none; }
    .sideNav .mainNav button { padding-left: 14px; }

    /* ---- top-bar navigation (technicians) ----
       Replaces the sidebar entirely for roles with a handful of destinations.
       The rail was rigid (fixed while the page scrolled), sat tight against
       the content, and spent 220px on two links. */
    .topbarNav { display: none; }
    body.topNavMode .topbarNav {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: 22px;
    }
    body.topNavMode .topbarNav button {
      background: none;
      border: none;
      border-radius: 9px;
      padding: 8px 14px;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--muted);
      white-space: nowrap;
      cursor: pointer;
    }
    body.topNavMode .topbarNav button:hover { background: var(--panel); color: var(--ink); }
    body.topNavMode .topbarNav button.active {
      background: var(--primarySoft);
      color: var(--primaryDeep);
      font-weight: 600;
    }
    body.topNavMode .topbarNav button:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
    /* The rail is gone, so the page reclaims its width — and the content stops
       starting hard against a border. */
    body.topNavMode .sideNav,
    body.topNavMode .sideNavOverlay,
    body.topNavMode .hamburgerBtn { display: none !important; }
    body.topNavMode .mainContent {
      width: 100%;
      margin-left: 0;
      padding: 16px 30px;
    }
    body.topNavMode.signedIn:not(.clientMode) { background: var(--bg); }
    @media (max-width: 720px) {
      body.topNavMode .topbarNav { margin-left: 8px; gap: 0; }
      body.topNavMode .topbarNav button { padding: 8px 10px; font-size: 14px; }
      body.topNavMode .mainContent { padding: 12px 16px; }
      body.topNavMode .topbarLogoSub { display: none; }
    }
    /* The 220px rail stripe on the body background went with the rail itself
       (2026-08-16). `body { background: var(--bg) }` now paints the whole
       ground — leaving the gradient in place drew a grey column down the left
       of every supervisor screen for a sidebar that no longer exists. */
    /* Nav items are bare <button>s inside .mainNav (not links). */
    .sideNav .mainNav button {
      color: var(--inkSoft);
      background: none;
      border-radius: 8px;
      font-weight: 500;
      box-shadow: none;
    }
    .sideNav .mainNav button .sdot { background: var(--arrow); }
    .sideNav .mainNav button:hover { background: var(--lineSoft); color: var(--ink); }
    .sideNav .mainNav button.active {
      background: var(--primarySoft);
      color: var(--primaryDeep);
      font-weight: 600;
    }
    .sideNav .mainNav button.active .sdot { background: var(--primary); }

    /* ---- Settings ----
       Flat sections divided by a hairline, not cards inside cards inside
       cards. Two settings do not need three levels of container. */
    .setPage { max-width: 720px; padding: 34px 4px 80px; }
    .setTitle {
      font-family: var(--serif); font-size: 32px; font-weight: 600;
      letter-spacing: -0.7px; margin: 0 0 8px; color: var(--ink);
    }
    .setBack {
      display: inline-flex; align-items: center; gap: 6px;
      margin: 0 0 14px; padding: 0; border: none; background: none;
      font: inherit; font-size: 14px; color: var(--muted); cursor: pointer;
    }
    /* Technicians view Settings inside topNavMode, whose layout rules pad
       .mainContent; a supervisor views it outside that mode, where the
       horizontal padding is 0 — leaving the page 4px from the viewport
       edge. Pad the page itself for that case only. */
    body:not(.topNavMode) .setPage { padding-left: 28px; padding-right: 28px; }
    .setBack:hover { color: var(--ink); }
    .setBack:focus-visible {
      outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px;
    }
    .setSection { padding: 26px 0; border-bottom: 1px solid var(--line); }
    .setSection:last-child { border-bottom: none; }
    .setLabel {
      margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.9px;
      text-transform: uppercase; color: var(--fainter);
    }
    .setHint { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }

    .setAccount { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
    .setAccountEmail { font-family: var(--mono); font-size: 15px; color: var(--ink); }
    .setAccountRole { font-size: 13.5px; color: var(--muted); }
    #pageSettings select {
      font: inherit; font-size: 14px; color: var(--ink); background: var(--card);
      border: 1px solid var(--inputLine); border-radius: 9px; padding: 10px 12px;
    }
    #pageSettings select:focus-visible {
      outline: 2px solid var(--primary); outline-offset: -1px;
    }

    /* Three accent choices on one neutral application frame. */
    .setPalette { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
    .setSwatch {
      display: flex; align-items: center; gap: 11px;
      padding: 12px 16px; cursor: pointer;
      border: 1.5px solid var(--line); border-radius: 11px;
      background: var(--card) !important; color: var(--ink) !important;
      font-weight: 500 !important;
    }
    .setSwatch:hover { border-color: var(--ghostLine); }
    .setSwatch.on { border-color: var(--primary); background: var(--primarySoft) !important; }
    .setSwatch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    .setSwatchDots { display: flex; gap: 4px; }
    .setSwatchDot { width: 18px; height: 18px; border-radius: 99px; }
    .setSwatchName { font-size: 14.5px; font-weight: 600; display: block; }
    .setSwatchHint { font-size: 12.5px; color: var(--muted); display: block; font-weight: 400; }

/* ===== shell.css part 2 — was ui/index.html inline <style> at line 1751 ===== */
    /* Clay chrome while the client portal is mounted — clients only ever see
       this surface. Values mirror the scoped --cp* palette in
       ui/client-portal/src/styles.css; lift BOTH into tokens.css :root when
       Talha approves Clay app-wide. Signed-out and staff chrome untouched. */
    /* The React Supervisor owns its complete signed-in frame. The legacy shell
       still authenticates and routes Settings, but contributes no visible
       header, rail, padding, or constrained wrapper while this page is active. */
    body.isSupervisorMounted { overflow: hidden; }
    body.isSupervisorMounted > .topbar { display: none; }
    body.isSupervisorMounted .appShell { min-height: 100vh; min-height: 100dvh; }
    body.isSupervisorMounted .sideNav { display: none !important; }
    body.isSupervisorMounted .mainContent { width: 100%; min-width: 0; padding: 0; }
    body.isSupervisorMounted .mainContent > .wrap,
    body.isSupervisorMounted #pageSupervisor,
    body.isSupervisorMounted #supervisorRoot { width: 100%; max-width: none; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 0; }

    body.isClientPortalMounted { background: var(--bg); }
    body.isClientPortalMounted .topbar { background: var(--card); border-bottom: 1px solid var(--line); box-shadow: none; }
    .cpProfileOnly { display: none; }
    .staffProfileOnly { display: none; }
    body.signedIn:not(.clientMode) .staffProfileOnly { display: flex; }
    body.isClientPortalMounted .cpProfileOnly { display: flex; }
    /* Email + role live on the portal's Profile page for clients — the menu
       itself stays a menu. Staff chrome keeps both rows. */
    body.isClientPortalMounted #profileEmail,
    body.isClientPortalMounted #profileRole { display: none; }
    body.isClientPortalMounted .topbarLogoMark { background: transparent; }
    body.isClientPortalMounted .topbarLogoName { color: var(--ink); }
    body.isClientPortalMounted .topbarLogoSub { color: var(--muted); }
    body.isClientPortalMounted .hamburgerBtn { color: var(--ink); }
    /* The design's header is quiet: logo + person. The status pills are
       staff-chrome noise for a client — hide them here, keep the avatar menu. */
    body.isClientPortalMounted .topbarPill { display: none; }
    body.isClientPortalMounted .topbarAvatar { background: var(--primarySoft); color: var(--avatarInk); }
    body.isClientPortalMounted .topbarRoleLabel { color: var(--ink); }
    body.isClientPortalMounted .profileDropdown { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
    body.isClientPortalMounted .profileRow { color: var(--muted); }

/* ===== shell.css part 3 — was ui/index.html inline <style> at line 1792 ===== */
    /* The absorbed destinations still exist so their pages stay routable and
       their React apps keep mounting — they are simply not a rail any more. */
    .navAbsorbed { display: none !important; }