/* CaribeCore design system (https://dev.caribe.app), the same brand: taken as-is on 2026-10-21 so CaribeTek and
   CaribeCore look like one product. Change it in CaribeCore first and copy it here. CaribeTek additions: portal.css. */
    /* ------------------------------------------------------------------
       Design tokens.

       Dark first. The first pass was a grey admin template and was rejected
       for it: a construction platform is judged in four seconds against the
       software people already pay for, and most of that judgement is colour,
       contrast and whether the page feels alive. So: deep navy ground,
       saturated accents, a colour per section, and cards that carry a hue.

       Light is an override, not the base. No framework, no icon font, no CDN.
       ------------------------------------------------------------------ */
    :root {
      --bg:           #0b1220;
      --bg-2:         #0f1729;
      --sidebar:      #0c1426;
      --surface:      #131c31;
      --surface-2:    #192440;
      --surface-3:    #21305a;
      --border:       rgba(148,163,184,.10);
      --border-solid: #253252;
      --ink:          #eef2ff;
      --ink-soft:     #a9b4cf;
      --ink-faint:    #6f7d9c;

      --accent:       #6366f1;   /* indigo */
      --accent-2:     #22d3ee;   /* cyan   */
      --accent-ink:   #ffffff;
      --accent-soft:  rgba(99,102,241,.18);
      --grad:         linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);

      --ok:           #34d399;
      --ok-soft:      rgba(52,211,153,.16);
      --warn:         #fbbf24;
      --warn-soft:    rgba(251,191,36,.16);
      --bad:          #fb7185;
      --bad-soft:     rgba(251,113,133,.16);
      --info:         #60a5fa;
      --info-soft:    rgba(96,165,250,.16);

      /* section hues - one per part of the product, used on nav, headers,
         stat cards and empty states so a page is recognisable by colour */
      --c-projects:   #60a5fa;
      --c-rfis:       #fbbf24;
      --c-submittals: #c084fc;
      --c-schedule:   #22d3ee;
      --c-drawings:   #fb923c;
      --c-photos:     #f472b6;
      --c-docs:       #a3e635;
      --c-money:      #34d399;
      --c-reports:    #818cf8;
      --c-punch:#f472b6;--c-daily:#34d399;--c-directory:  #2dd4bf;

      --shadow:       0 1px 2px rgba(0,0,0,.35), 0 10px 30px -18px rgba(0,0,0,.6);
      --radius:       12px;
      --radius-sm:    8px;
      --sidebar-w:    262px;
    }
    :root[data-theme="light"] {
      --bg: #f4f6fb; --bg-2: #eef1f8; --sidebar: #ffffff;
      --surface: #ffffff; --surface-2: #f3f5fa; --surface-3: #e8ecf6;
      --border: #e3e8f2; --border-solid: #dfe4ee;
      --ink: #101828; --ink-soft: #475467; --ink-faint: #8a94a8;
      --accent-soft: rgba(99,102,241,.10);
      --ok: #0f9d6a; --ok-soft: rgba(15,157,106,.10);
      --warn: #b7791f; --warn-soft: rgba(183,121,31,.12);
      --bad: #d9364c; --bad-soft: rgba(217,54,76,.10);
      --info: #2563eb; --info-soft: rgba(37,99,235,.10);
      --c-projects: #2563eb; --c-rfis: #b7791f; --c-submittals: #7c3aed;
      --c-schedule: #0891b2; --c-drawings: #ea580c; --c-photos: #db2777;
      --c-docs: #4d7c0f; --c-money: #0f9d6a; --c-reports: #4f46e5; --c-directory: #0d9488; --c-punch: #db2777; --c-daily: #059669;
      --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -16px rgba(16,24,40,.18);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; color: var(--ink);
      background:
        radial-gradient(900px 500px at 8% -10%, rgba(99,102,241,.16), transparent 60%),
        radial-gradient(700px 400px at 95% 0%, rgba(34,211,238,.10), transparent 55%),
        var(--bg);
      font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
            "Helvetica Neue", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--accent-2); text-decoration: none; }
    a:hover { text-decoration: none; filter: brightness(1.12); }
    svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none;
            stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

    /* ---------- layout ---------- */
    .layout { display: flex; min-height: 100vh; }
    .sidebar {
      width: var(--sidebar-w); flex: none; background: var(--sidebar);
      border-right: 1px solid var(--border); display: flex; flex-direction: column;
      position: sticky; top: 0; height: 100vh; overflow-y: auto;
    }
    .sidebar::-webkit-scrollbar { width: 6px; }
    .sidebar::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
    .content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

    /* ---------- brand + profile ---------- */
    .brand {
      padding: 20px 20px 12px; display: flex; align-items: center; gap: 10px;
      font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
    }
    .brand .mark {
      width: 30px; height: 30px; border-radius: 9px; background: var(--grad);
      display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 14px;
      box-shadow: 0 6px 18px -6px rgba(99,102,241,.8);
    }
    .brand .tag { background: var(--accent-soft); color: var(--accent-2); font-size: 9.5px;
                  font-weight: 800; padding: 2px 6px; border-radius: 4px; letter-spacing: .08em; }
    .profile { margin: 4px 14px 12px; padding: 10px 12px; display: flex; gap: 11px;
               align-items: center; background: var(--surface); border: 1px solid var(--border);
               border-radius: var(--radius-sm); }
    .avatar {
      width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--grad);
      color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px;
    }
    .profile .nm { font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.2; }
    .profile .rl { font-size: 11.5px; color: var(--ink-faint); }

    /* ---------- sidebar nav ---------- */
    .nav-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
                   color: var(--ink-faint); padding: 14px 22px 6px; font-weight: 700; }
    .sidebar nav a {
      display: flex; align-items: center; gap: 11px; padding: 8px 14px; margin: 1px 10px;
      color: var(--ink-soft); font-size: 13.5px; font-weight: 500; border-radius: var(--radius-sm);
    }
    .sidebar nav a .ic { width: 26px; height: 26px; border-radius: 7px; display: grid;
                         place-items: center; color: #fff; background: var(--hue, var(--accent));
                         opacity: .85; flex: none; }
    .sidebar nav a .ic svg { width: 14px; height: 14px; stroke: #fff; }
    .sidebar nav a:hover { color: var(--ink); background: var(--surface); }
    .sidebar nav a:hover .ic { opacity: 1; }
    .sidebar nav a.active { color: var(--ink); background: var(--surface-2);
                            box-shadow: inset 3px 0 0 var(--hue, var(--accent)); }
    .sidebar nav a.active .ic { opacity: 1; box-shadow: 0 6px 16px -6px var(--hue, var(--accent)); }
    .sidebar nav a .badge-n { margin-left: auto; background: var(--bad); color: #fff;
                              font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 9px; }
    .sidebar .foot { margin-top: auto; padding: 14px 20px 20px; }

    /* ---------- topbar ---------- */
    .topbar {
      height: 60px; background: color-mix(in srgb, var(--sidebar) 82%, transparent);
      backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 12px; padding: 0 22px;
      position: sticky; top: 0; z-index: 20;
    }
    .search { display: flex; align-items: center; gap: 8px; background: var(--surface);
              border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px;
              width: 340px; max-width: 42vw; color: var(--ink-faint); }
    .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .search input { border: 0; background: transparent; color: var(--ink); outline: none;
                    font-size: 13.5px; width: 100%; }
    .search input::placeholder { color: var(--ink-faint); }
    .topbar .spacer { flex: 1; }
    .icon-btn { position: relative; width: 36px; height: 36px; border-radius: 10px;
                display: grid; place-items: center; color: var(--ink-soft); background: transparent;
                border: 1px solid transparent; cursor: pointer; }
    .icon-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--border); }
    .icon-btn .dot { position: absolute; top: 5px; right: 4px; min-width: 15px; height: 15px;
                     background: var(--bad); color: #fff; border-radius: 8px; font-size: 9.5px;
                     font-weight: 700; display: grid; place-items: center; padding: 0 3px; }

    /* quick-create menu */
    .quick { position: relative; }
    .quick > .btn { padding: 7px 13px; }
    .quick-menu { position: absolute; right: 0; top: 44px; width: 260px; background: var(--surface);
                  border: 1px solid var(--border-solid); border-radius: var(--radius); box-shadow: var(--shadow);
                  padding: 6px; z-index: 30; }
    .quick-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
                    border-radius: var(--radius-sm); color: var(--ink); font-size: 13.5px; }
    .quick-menu a:hover { background: var(--surface-2); }
    .quick-menu .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
                      background: var(--hue, var(--accent)); color: #fff; }
    .quick-menu .ic svg { width: 14px; height: 14px; stroke: #fff; }

    /* ---------- page ---------- */
    main { padding: 24px 26px 60px; flex: 1; }
    .page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
    .page-head h1 { font-size: 24px; margin: 0; letter-spacing: -.025em; font-weight: 500; }
    .page-head h1 b { font-weight: 800; background: var(--grad); -webkit-background-clip: text;
                      background-clip: text; color: transparent; }
    .page-head .lede { margin: 5px 0 0; color: var(--ink-soft); font-size: 13.5px; max-width: 760px; }
    .page-head .actions { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }
    .page-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
                          text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
                          color: var(--hue, var(--ink-faint)); margin-bottom: 4px; }
    .page-head .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--hue, var(--accent)); }

    .btn { background: var(--grad); color: var(--accent-ink); border: 1px solid transparent;
           padding: 8px 15px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
           cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
           box-shadow: 0 8px 20px -10px rgba(99,102,241,.9); }
    .btn:hover { filter: brightness(1.08); }
    .btn.ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--border-solid);
                 box-shadow: none; }
    .btn.ghost:hover { color: var(--ink); background: var(--surface-2); }
    .btn.danger { background: var(--bad); box-shadow: none; }
    .btn.sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }

    /* ---------- cards ---------- */
    .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
    .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
            box-shadow: var(--shadow); grid-column: span 6; display: flex; flex-direction: column;
            position: relative; overflow: hidden; }
    .card.tint::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
                         background: var(--hue, var(--grad)); }
    .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
    .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
    .c12 { grid-column: span 12; }
    @media (max-width: 1100px) { .c3, .c4, .c5 { grid-column: span 6; } }
    @media (max-width: 780px)  { .card, .c3, .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; } }

    .card-head { padding: 16px 20px 12px; display: flex; align-items: flex-start; gap: 12px; }
    .card-head h2 { font-size: 14.5px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
    .card-head p { margin: 3px 0 0; font-size: 12px; color: var(--ink-faint); }
    .card-head .tools { margin-left: auto; display: flex; gap: 6px; }
    .card-body { padding: 0 20px 18px; }

    /* ---------- stat card ---------- */
    .stat-card { background: linear-gradient(160deg, color-mix(in srgb, var(--hue, var(--accent)) 14%, var(--surface)) 0%, var(--surface) 55%); }
    .stat-card .card-body { padding: 4px 20px 18px; }
    .stat-top { display: flex; align-items: flex-start; }
    .stat-title { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
    .stat-icon { margin-left: auto; width: 40px; height: 40px; border-radius: 11px;
                 background: var(--hue, var(--accent)); color: #fff; display: grid; place-items: center;
                 box-shadow: 0 10px 22px -10px var(--hue, var(--accent)); }
    .stat-icon.ok   { --hue: var(--ok); }   .stat-icon.warn { --hue: var(--warn); }
    .stat-icon.bad  { --hue: var(--bad); }  .stat-icon.info { --hue: var(--info); }
    .stat-value { font-size: 32px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
                  margin: 10px 0 8px; font-variant-numeric: tabular-nums; }
    .stat-foot { font-size: 12.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

    /* ---------- pills & tables ---------- */
    .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px;
            font-weight: 700; white-space: nowrap; letter-spacing: .01em; }
    .pill.ok { background: var(--ok-soft); color: var(--ok); }
    .pill.warn { background: var(--warn-soft); color: var(--warn); }
    .pill.bad { background: var(--bad-soft); color: var(--bad); }
    .pill.info { background: var(--info-soft); color: var(--info); }
    .pill.flat { background: var(--surface-2); color: var(--ink-soft); }
    .pill.accent { background: var(--accent-soft); color: var(--accent-2); }

    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th { text-align: left; font-weight: 700; color: var(--ink-faint); font-size: 10.5px;
         text-transform: uppercase; letter-spacing: .08em; padding: 8px 10px;
         border-bottom: 1px solid var(--border-solid); }
    td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
    tr:last-child td { border-bottom: none; }
    tbody tr:hover td, tr:hover td { background: var(--surface-2); }
    td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
    .scroll { overflow-x: auto; }
    .mono { font-variant-numeric: tabular-nums; }
    .sub { color: var(--ink-faint); font-size: 11.5px; }
    .empty { color: var(--ink-faint); font-size: 13px; padding: 14px 0; }
    .row-link { color: var(--ink); font-weight: 600; }
    .row-link:hover { color: var(--accent-2); }

    .role-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
    .role-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
                 padding: 4px 12px; font-size: 12px; color: var(--ink-soft); }
    .role-chip b { color: var(--ink); font-weight: 700; }

    /* ---------- forms ---------- */
    /* Forms: a 12-column grid. form.html uses .field-row (half width) and
       .full; inline forms use .f.cN for an explicit span. */
    .form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
    .form-grid > .field-row { grid-column: span 6; }
    .form-grid .full { grid-column: 1 / -1; }
    .form-grid > .f { grid-column: span 12; margin-bottom: 14px; min-width: 0; }
    .form-grid > .f.c1 { grid-column: span 1; } .form-grid > .f.c2 { grid-column: span 2; }
    .form-grid > .f.c3 { grid-column: span 3; } .form-grid > .f.c4 { grid-column: span 4; }
    .form-grid > .f.c5 { grid-column: span 5; } .form-grid > .f.c6 { grid-column: span 6; }
    .form-grid > .f.c7 { grid-column: span 7; } .form-grid > .f.c8 { grid-column: span 8; }
    .form-grid > .f.c9 { grid-column: span 9; } .form-grid > .f.c10 { grid-column: span 10; }
    .form-grid > .f.c11 { grid-column: span 11; } .form-grid > .f.c12 { grid-column: span 12; }
    .f > label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft);
                 margin-bottom: 6px; letter-spacing: .01em; }
    .f > label.check { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--ink);
                       font-size: 13px; text-transform: none; margin-top: 26px; }
    .f > label.check input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
    .f .field { width: 100%; }
    .f .help { font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; }
    .f .err { font-size: 11.5px; color: var(--bad); margin-top: 5px; }
    .f .btn + .btn { margin-left: 6px; }
    .form-grid .flash { grid-column: 1 / -1; }
    @media (max-width: 720px) { .form-grid > .field-row, .form-grid > .f[class*="c"] { grid-column: 1 / -1; } }

    /* Checkbox lists (CheckboxSelectMultiple) */
    .checklist ul, .field-row ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 14px;
                                   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .checklist li label, .field-row ul li label { display: flex; align-items: center; gap: 8px; font-size: 13px;
                                                   font-weight: 500; color: var(--ink); text-transform: none; margin: 0; }
    .checklist input[type=checkbox], .field-row ul input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }

    /* Login */
    .login-card label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft);
                        margin: 14px 0 6px; letter-spacing: .01em; }
    .login-card input[type=email], .login-card input[type=password] { width: 100%; }
    .login-card .errors { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad);
                          border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent);
                          border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 6px; }
    .login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; }
    .login-brand .mark { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); color: #fff;
                         display: grid; place-items: center; font-weight: 800; font-size: 18px;
                         box-shadow: 0 8px 20px -8px rgba(99,102,241,.9); }
    .login-shell > .sub { max-width: 400px; text-align: center; margin-top: 14px; }
    .field-row { margin-bottom: 16px; }
    .field-row label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft);
                       margin-bottom: 6px; letter-spacing: .02em; }
    .field-row .help { font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; }
    .field-row .err { font-size: 11.5px; color: var(--bad); margin-top: 5px; }
    .field, input.field, select.field, textarea.field {
      width: 100%; padding: 9px 12px; border: 1px solid var(--border-solid); border-radius: 10px;
      background: var(--bg-2); color: var(--ink); font-size: 13.5px; font-family: inherit;
      outline: none; transition: border-color .12s, box-shadow .12s; }
    .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .field:disabled { opacity: .55; cursor: not-allowed; }
    select.field { appearance: none; padding-right: 32px; background-repeat: no-repeat;
      background-position: right 10px center; background-size: 15px;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7d9c' stroke-width='2' stroke-linecap='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e"); }
    input[type=color].field { padding: 3px; height: 40px; width: 80px; }
    .field-row.check { display: flex; align-items: flex-start; gap: 9px; }
    .field-row.check input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent); }
    .field-row.check label { margin: 0; font-weight: 500; color: var(--ink); font-size: 13px; }
    .form-actions { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--border);
                    margin-top: 8px; padding-top: 18px; }
    .form-actions .spacer { flex: 1; }

    /* ---------- breadcrumbs, tabs, detail ---------- */
    .crumbs { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ink-faint); margin-bottom: 8px; }
    .crumbs a { color: var(--ink-faint); } .crumbs a:hover { color: var(--ink); }
    .crumbs .sep { opacity: .5; }
    .tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
    .tabs a { padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
              border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; }
    .tabs a i { width: 8px; height: 8px; border-radius: 50%; background: var(--hue, var(--ink-faint)); opacity: .7; }
    .tabs a:hover { color: var(--ink); }
    .tabs a.active { color: var(--ink); border-bottom-color: var(--hue, var(--accent)); }
    .tabs a.active i { opacity: 1; }
    .kv { display: grid; grid-template-columns: 150px 1fr; gap: 9px 16px; font-size: 13.5px; }
    .kv dt { color: var(--ink-faint); font-size: 12.5px; } .kv dd { margin: 0; }

    .flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: 10px;
             font-size: 13.5px; margin-bottom: 18px; border: 1px solid transparent; }
    .flash.success { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
    .flash.error   { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
    .flash.warning { background: var(--warn-soft); color: var(--warn); }
    .flash.info    { background: var(--info-soft); color: var(--info); }

    .empty-state { text-align: center; padding: 44px 20px; color: var(--ink-faint); }
    .empty-state .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--hue, var(--accent));
                       display: grid; place-items: center; margin: 0 auto 14px; color: #fff;
                       box-shadow: 0 14px 30px -14px var(--hue, var(--accent)); }
    .empty-state h3 { margin: 0 0 5px; font-size: 15px; color: var(--ink); font-weight: 700; }
    .empty-state p { margin: 0 auto 16px; font-size: 13px; max-width: 420px; line-height: 1.55; }

    .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
    .photo-tile { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
    .photo-tile img { width: 100%; height: 130px; object-fit: cover; display: block; }
    .photo-tile .meta { padding: 8px 10px; font-size: 11.5px; color: var(--ink-faint); }
    .photo-tile .meta b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }

    .toolbar { display: flex; gap: 10px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .toolbar .spacer { flex: 1; }
    .toolbar input[type=search], .toolbar select { padding: 7px 11px; font-size: 13px; border: 1px solid var(--border-solid);
      border-radius: 9px; background: var(--bg-2); color: var(--ink); outline: none; }

    /* section hue helpers */
    .hue-projects { --hue: var(--c-projects); } .hue-rfis { --hue: var(--c-rfis); }
    .hue-submittals { --hue: var(--c-submittals); } .hue-schedule { --hue: var(--c-schedule); }
    .hue-drawings { --hue: var(--c-drawings); } .hue-photos { --hue: var(--c-photos); }
    .hue-docs { --hue: var(--c-docs); } .hue-money { --hue: var(--c-money); }
    .hue-reports { --hue: var(--c-reports); } .hue-directory { --hue: var(--c-directory); }
    .hue-punch { --hue: var(--c-punch); } .hue-daily { --hue: var(--c-daily); }
    .hue-ok { --hue: var(--ok); } .hue-warn { --hue: var(--warn); } .hue-bad { --hue: var(--bad); }

    .login-shell { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
    /* Public pages (privacy, support): the sign-in layout, wider, for reading. */
    .public-card { width: 100%; max-width: 760px; background: var(--surface); border: 1px solid var(--border);
                   border-radius: 18px; padding: 32px clamp(20px, 5vw, 44px); line-height: 1.65; }
    .public-card h1 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 4px; }
    .public-card h2 { font-size: 16px; margin: 26px 0 6px; }
    .public-card p, .public-card li { color: var(--ink-soft); }
    .public-card ul { padding-left: 20px; }
    .public-card .login-brand { justify-content: flex-start; }
    .login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border);
                  border-radius: 16px; padding: 30px; box-shadow: var(--shadow); }

    .fab { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%;
           background: var(--grad); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer;
           box-shadow: 0 10px 24px -8px rgba(99,102,241,.9); z-index: 30; }
    @media (max-width: 780px) {
      .sidebar { position: fixed; left: -100%; z-index: 40; transition: left .18s; }
      .sidebar.open { left: 0; }
      .search { width: 160px; }
    }
  /* Two cards sharing one grid column, stacked. A grid places items left to
     right, so a right-hand column of several cards has to be one item. */
  .grid > .stack { display: flex; flex-direction: column; gap: 18px; }
  .grid > .stack > .card { margin: 0; }