/* =============================================================
   CIAW Werfregistratie — VDV Vloerwerken
   Auto-generated from demo/vdv_ciaw_index.html (do not edit by hand).
   Design tokens, layout, shared components, then per-screen rules.
   ============================================================= */

/* --- Global tokens, base, layout, shared components --- */
:root {
      /* Brand */
      --color-primary:        #1B3A57;
      --color-primary-hover:  #14304A;
      --color-primary-light:  #E6EDF3;
      --color-accent:         #C8762B;
      --color-accent-hover:   #B0651E;

      /* Surfaces */
      --color-bg:             #F7F5F1;
      --color-surface:        #FFFFFF;
      --color-surface-alt:    #F1EEE8;
      --color-border:         #E2DED5;
      --color-border-strong:  #C9C3B6;

      /* Text */
      --color-text:           #1A1F2B;
      --color-text-muted:     #5C6473;
      --color-text-faint:     #8A8F9A;
      --color-text-on-dark:   #FFFFFF;

      /* Status */
      --color-success:        #2E7D4F;
      --color-success-bg:     #E5F2EB;
      --color-warning:        #B5731A;
      --color-warning-bg:     #FBF1E2;
      --color-error:          #B23A3A;
      --color-error-bg:       #F8E5E5;
      --color-info:           #2B6CB0;
      --color-info-bg:        #E5F0FB;

      /* Typography */
      --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
      --font-body:    'Manrope', system-ui, sans-serif;

      /* Spacing */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --space-7: 48px;
      --space-8: 64px;

      /* Radius */
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 16px;

      /* Shadow */
      --shadow-sm: 0 1px 2px rgba(26, 31, 43, 0.06);
      --shadow-md: 0 4px 12px rgba(26, 31, 43, 0.08);
      --shadow-lg: 0 12px 28px rgba(26, 31, 43, 0.12);
    }

    /* ============================================================
       Base
       ============================================================ */
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: var(--font-body);
      color: var(--color-text);
      background: var(--color-bg);
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, .display {
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--color-text);
      margin: 0;
    }
    h1 { font-size: 1.75rem; line-height: 1.15; }
    h2 { font-size: 1.375rem; line-height: 1.2; }
    h3 { font-size: 1.125rem; line-height: 1.25; }
    @media (min-width: 992px) {
h1 { font-size: 2.25rem; }
      h2 { font-size: 1.75rem; }
}
    .text-lg   { font-size: 1.0625rem; }
    .text-base { font-size: 1rem; line-height: 1.5; }
    .text-sm   { font-size: 0.875rem; line-height: 1.45; }
    .text-xs   { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; }
    .text-tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
    .text-muted-2 { color: var(--color-text-muted); }
    .text-faint { color: var(--color-text-faint); }
    a { color: var(--color-primary); text-decoration: none; }
    a:hover { color: var(--color-primary-hover); text-decoration: underline; }

    :focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* Skip link */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 8px;
      background: var(--color-primary);
      color: var(--color-text-on-dark);
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-weight: 600;
      z-index: 10001;
      transition: top 0.2s;
    }
    .skip-link:focus { top: 8px; color: var(--color-text-on-dark); text-decoration: none; }

    /* ============================================================
       Demo banner
       ============================================================ */
    
    

    /* ============================================================
       Demo screen picker
       ============================================================ */
    
    
    
    
    
    
    
    

    /* ============================================================
       App screens
       ============================================================ */
    
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    
    

    /* ============================================================
       Icon sizes
       ============================================================ */
    .icon-sm { width: 16px; height: 16px; stroke-width: 2; }
    .icon-md { width: 20px; height: 20px; stroke-width: 2; }
    .icon-lg { width: 24px; height: 24px; stroke-width: 2; }
    .icon-xl { width: 32px; height: 32px; stroke-width: 1.75; }
    .icon-2xl { width: 48px; height: 48px; stroke-width: 1.5; }

    /* ============================================================
       Buttons
       ============================================================ */
    .btn {
      font-family: var(--font-body);
      font-weight: 600;
      border-radius: var(--radius-sm);
      padding: 10px 18px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.15s ease;
      border: 1px solid transparent;
      font-size: 0.9375rem;
      letter-spacing: 0;
    }
    .btn-primary {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-text-on-dark);
    }
    .btn-primary:hover, .btn-primary:focus {
      background: var(--color-primary-hover);
      border-color: var(--color-primary-hover);
      color: var(--color-text-on-dark);
    }
    .btn-accent {
      background: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-text-on-dark);
    }
    .btn-accent:hover, .btn-accent:focus {
      background: var(--color-accent-hover);
      border-color: var(--color-accent-hover);
      color: var(--color-text-on-dark);
    }
    .btn-outline {
      background: var(--color-surface);
      border-color: var(--color-border-strong);
      color: var(--color-text);
    }
    .btn-outline:hover, .btn-outline:focus {
      background: var(--color-surface-alt);
      border-color: var(--color-text-muted);
      color: var(--color-text);
    }
    .btn-ghost {
      background: transparent;
      border-color: transparent;
      color: var(--color-text-muted);
    }
    .btn-ghost:hover, .btn-ghost:focus {
      background: var(--color-surface-alt);
      color: var(--color-text);
    }
    .btn-danger {
      background: var(--color-surface);
      border-color: var(--color-error);
      color: var(--color-error);
    }
    .btn-danger:hover, .btn-danger:focus {
      background: var(--color-error-bg);
      color: var(--color-error);
    }
    .btn-sm { padding: 6px 12px; min-height: 36px; font-size: 0.8125rem; }
    .btn-lg { padding: 14px 22px; min-height: 52px; font-size: 1rem; }
    .btn-block { width: 100%; }
    .btn-icon { padding: 10px; min-width: 44px; min-height: 44px; }

    /* ============================================================
       Cards
       ============================================================ */
    .card-flat {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: var(--space-5);
    }
    .card-elevated {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      box-shadow: var(--shadow-md);
    }

    .status-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-left: 4px solid var(--color-border-strong);
      border-radius: var(--radius-md);
      padding: var(--space-4) var(--space-5);
      transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
    .status-card:hover { box-shadow: var(--shadow-sm); }
    .status-card.is-complete { border-left-color: var(--color-success); }
    .status-card.is-partial  { border-left-color: var(--color-warning); }

    /* ============================================================
       Status badges
       ============================================================ */
    .badge-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .badge-status.is-complete { background: var(--color-success-bg); color: var(--color-success); }
    .badge-status.is-partial  { background: var(--color-warning-bg); color: var(--color-warning); }
    .badge-status.is-info     { background: var(--color-info-bg);    color: var(--color-info); }
    .badge-status.is-neutral  { background: var(--color-surface-alt); color: var(--color-text-muted); }

    /* ============================================================
       Forms
       ============================================================ */
    .form-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: 6px;
    }
    .form-control, .form-select {
      width: 100%;
      background: var(--color-surface);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sm);
      padding: 11px 14px;
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--color-text);
      min-height: 44px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(27, 58, 87, 0.12);
      outline: none;
    }
    .form-error { color: var(--color-error); font-size: 0.8125rem; margin-top: 4px; }

    /* ============================================================
       Admin sidebar (desktop) + mobile topbar
       ============================================================ */
    .admin-shell {
      display: flex;
      min-height: 100vh;
      min-height: 100dvh;
    }
    .admin-sidebar {
      width: 240px;
      flex-shrink: 0;
      background: var(--color-surface);
      border-right: 1px solid var(--color-border);
      padding: var(--space-5) var(--space-3);
      display: flex;
      flex-direction: column;
    }
    .admin-sidebar .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 var(--space-3) var(--space-5);
      border-bottom: 1px solid var(--color-border);
      margin-bottom: var(--space-4);
    }
    .admin-sidebar .brand-logo {
      width: 36px;
      height: 36px;
      background: var(--color-primary);
      color: var(--color-text-on-dark);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: -0.02em;
    }
    .admin-sidebar .brand-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.9375rem;
      color: var(--color-text);
      line-height: 1.2;
    }
    .admin-sidebar .brand-sub {
      font-size: 0.6875rem;
      color: var(--color-text-faint);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 600;
    }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      color: var(--color-text-muted);
      font-weight: 500;
      font-size: 0.9375rem;
      cursor: pointer;
      margin-bottom: 2px;
      min-height: 44px;
      border: none;
      background: transparent;
      width: 100%;
      text-align: left;
      transition: all 0.15s ease;
      font-family: var(--font-body);
    }
    .nav-item:hover {
      background: var(--color-surface-alt);
      color: var(--color-text);
    }
    .nav-item.active {
      background: var(--color-primary-light);
      color: var(--color-primary);
      font-weight: 600;
    }
    .nav-item .icon-md { color: inherit; }
    .admin-sidebar .user-pill-wrap {
      margin-top: auto;
      position: relative;
      border-top: 1px solid var(--color-border);
      padding-top: var(--space-4);
    }
    .admin-sidebar .user-pill {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      text-align: left;
      cursor: pointer;
      color: inherit;
    }
    .admin-sidebar .user-pill:hover,
    .admin-sidebar .user-pill[aria-expanded="true"] {
      background: var(--color-surface-alt);
    }
    .admin-sidebar .user-pill img,
    .admin-sidebar .user-pill .avatar-monogram {
      width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
      object-fit: cover;
    }
    .admin-sidebar .user-pill .avatar-monogram { font-size: 0.8125rem; }
    .admin-sidebar .user-pill-text { flex: 1; min-width: 0; }
    .admin-sidebar .user-pill .name {
      font-weight: 600; font-size: 0.875rem; color: var(--color-text);
      line-height: 1.2;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .admin-sidebar .user-pill .role {
      font-size: 0.75rem; color: var(--color-text-faint);
    }
    .admin-sidebar .user-pill-caret {
      flex-shrink: 0;
      color: var(--color-text-faint);
      transition: transform 150ms ease;
    }
    .admin-sidebar .user-pill[aria-expanded="true"] .user-pill-caret {
      transform: rotate(180deg);
    }
    .admin-sidebar .user-pill-menu {
      position: absolute;
      left: 0; right: 0; bottom: calc(100% - var(--space-3));
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      z-index: 20;
    }
    .admin-sidebar .user-pill-menu[hidden] { display: none; }
    .admin-sidebar .user-pill-menu-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      color: var(--color-text);
      text-decoration: none;
    }
    .admin-sidebar .user-pill-menu-item:not(.is-disabled):hover,
    .admin-sidebar .user-pill-menu-item:not(.is-disabled):focus {
      background: var(--color-surface-alt);
    }
    .admin-sidebar .user-pill-menu-item.is-disabled {
      color: var(--color-text-faint);
      cursor: default;
    }
    .admin-sidebar .user-pill-menu-item .icon-md {
      color: var(--color-text-faint);
    }

    .admin-content {
      flex: 1;
      padding: var(--space-5);
      max-width: 1200px;
    }
    @media (min-width: 1200px) {
.admin-content { padding: var(--space-6) var(--space-7); }
}

    .admin-mobile-topbar {
      display: none;
      align-items: center;
      gap: 12px;
      background: var(--color-surface);
      border-bottom: 1px solid var(--color-border);
      padding: 10px 16px;
    }
    @media (max-width: 991.98px) {
.admin-shell { display: block; position: relative; }
      .admin-sidebar {
        display: flex;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 9500;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 16px rgba(26, 31, 43, 0.16);
      }
      .admin-shell.is-menu-open .admin-sidebar { transform: translateX(0); }
      .admin-mobile-topbar { display: flex; }
      .admin-content { padding: var(--space-4); max-width: 100%; }
      .admin-mobile-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(26, 31, 43, 0.5);
        z-index: 9400;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }
      .admin-shell.is-menu-open .admin-mobile-backdrop {
        opacity: 1;
        pointer-events: auto;
      }
}

    /* Subcontractor mobile shell */
    .sub-shell {
      max-width: 560px;
      margin: 0 auto;
      min-height: 100vh;
      min-height: 100dvh;
      background: var(--color-bg);
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .sub-topbar {
      background: var(--color-surface);
      border-bottom: 1px solid var(--color-border);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      position: sticky;
      top: 76px;
      z-index: 50;
    }
    .sub-topbar .title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.125rem;
      line-height: 1.2;
    }
    .sub-topbar .sub {
      font-size: 0.75rem;
      color: var(--color-text-muted);
      margin-top: 2px;
    }
    .sub-content {
      flex: 1;
      padding: var(--space-4);
      padding-bottom: 96px;
    }
    .sub-tabbar {
      position: sticky;
      bottom: 0;
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      display: flex;
      justify-content: space-around;
      padding: 8px 8px env(safe-area-inset-bottom);
      box-shadow: 0 -2px 12px rgba(26, 31, 43, 0.06);
    }
    .tabbar-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px 8px;
      background: transparent;
      border: none;
      color: var(--color-text-faint);
      cursor: pointer;
      min-height: 56px;
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      border-radius: var(--radius-sm);
      transition: color 0.15s ease;
    }
    .tabbar-item:hover { color: var(--color-text-muted); }
    .tabbar-item.active { color: var(--color-primary); }
    .tabbar-item .icon-md { width: 22px; height: 22px; }

    /* ============================================================
       Skeleton
       ============================================================ */
    .skeleton {
      background: linear-gradient(90deg, var(--color-surface-alt) 0%, #EAE6DD 50%, var(--color-surface-alt) 100%);
      background-size: 200% 100%;
      animation: shimmer 1.4s ease-in-out infinite;
      border-radius: var(--radius-sm);
    }
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ============================================================
       Floating demo control panel
       ============================================================ */
    
    
    
    
    

    
    
    

    
    

    
    
    

    /* ============================================================
       Empty state shell
       ============================================================ */
    .empty {
      text-align: center;
      padding: var(--space-7) var(--space-4);
      color: var(--color-text-muted);
    }
    .empty .icon-2xl { color: var(--color-text-faint); margin-bottom: var(--space-3); }
    .empty h3 { color: var(--color-text); margin-bottom: var(--space-2); }
    .empty p { max-width: 360px; margin: 0 auto var(--space-4); }

    /* ============================================================
       Responsive guards
       ============================================================ */
    

    main { display: block; }
  
    /* Functional filter dropdown for admin overview */
    .filter-group { display: inline-flex; gap: 4px; flex-wrap: wrap; }
    .filter-chip .chip-count { color: inherit; opacity: 0.85; margin-left: 2px; }
    .filter-dropdown { position: relative; }
    .filter-dropdown .chev { transition: transform 0.15s ease; opacity: 0.6; margin-left: 2px; }
    .filter-dropdown .filter-chip[aria-expanded="true"] .chev { transform: rotate(180deg); }
    .filter-dropdown-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      min-width: 240px;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      padding: 8px;
      z-index: 200;
    }
    .filter-dropdown-menu[hidden] { display: none; }
    .sub-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 0.875rem;
      color: var(--color-text);
      min-height: 36px;
      user-select: none;
    }
    .sub-option:hover { background: var(--color-surface-alt); }
    .sub-option input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--color-primary);
      flex-shrink: 0;
    }
    .sub-option.is-all { font-weight: 600; }
    .sub-divider { height: 1px; background: var(--color-border); margin: 4px 2px; }
    .filter-clear {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      background: transparent;
      border: 1px dashed var(--color-border-strong);
      border-radius: 999px;
      color: var(--color-text-muted);
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      min-height: 36px;
      transition: all 0.15s ease;
    }
    .filter-clear:hover { color: var(--color-text); border-color: var(--color-text-muted); }
    .ovr-section[hidden] { display: none; }
    .ovr-no-results {
      grid-column: 1 / -1;
      padding: var(--space-7) var(--space-5);
      text-align: center;
      color: var(--color-text-muted);
      background: var(--color-surface);
      border: 2px dashed var(--color-border);
      border-radius: var(--radius-lg);
    }
    .ovr-no-results .icon-2xl { color: var(--color-text-faint); margin-bottom: var(--space-2); }


/* ============================================================
   Login
   ============================================================ */
.login-layout { display: grid; grid-template-columns: 1fr; min-height: 100vh; min-height: 100dvh; background: var(--color-surface); }
        @media (min-width: 992px) {
.login-layout { grid-template-columns: 0.9fr 1.1fr; }
}
        .login-brand { display: none; position: relative; background: var(--color-primary); color: var(--color-text-on-dark); overflow: hidden; }
        @media (min-width: 992px) {
.login-brand { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-7); }
}
        .login-brand::before { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(27,58,87,0.78) 0%, rgba(27,58,87,0.96) 60%, rgba(20,48,74,1) 100%); z-index: 1; }
        .login-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
        .login-brand-inner { position: relative; z-index: 2; }
        .login-deadline-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(200,118,43,0.18); color: var(--color-accent); border: 1px solid rgba(200,118,43,0.4); border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
        .login-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 4.5rem; line-height: 0.9; letter-spacing: -0.04em; margin: var(--space-6) 0 var(--space-3); }
        .login-tagline { font-size: 1.25rem; line-height: 1.4; max-width: 32ch; color: rgba(255,255,255,0.9); font-weight: 500; }
        .login-fineprint { position: relative; z-index: 2; font-size: 0.8125rem; color: rgba(255,255,255,0.65); border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--space-4); }
        .login-form-panel { display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); }
        .login-form-inner { width: 100%; max-width: 400px; }
        .login-mobile-brand { text-align: center; margin-bottom: var(--space-6); }
        @media (min-width: 992px) {
.login-mobile-brand { display: none; }
}
        .login-mobile-brand .wm { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -0.03em; color: var(--color-primary); }
        .login-mobile-brand small { display: block; margin-top: 4px; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); font-weight: 600; }
        .login-header { margin-bottom: var(--space-5); }
        .login-header p { color: var(--color-text-muted); margin: 4px 0 0; }
        .login-form .form-group + .form-group { margin-top: var(--space-4); }
        .login-password-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
        .login-password-row a { font-weight: 600; }
        .login-remember { display: flex; align-items: center; gap: 8px; margin: var(--space-4) 0 var(--space-5); font-size: 0.875rem; color: var(--color-text-muted); cursor: pointer; }
        .login-remember input { width: 18px; height: 18px; accent-color: var(--color-primary); }
        
        
        
         
        
        
        
        
        
        
        
        
        
        .logout-cancel { margin-top: var(--space-3); text-align: center; }
        .login-error-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--color-error-bg); color: var(--color-error); border: 1px solid rgba(178,58,58,0.25); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.875rem; margin-bottom: var(--space-4); font-weight: 500; }
        .login-error-banner .icon-md { flex-shrink: 0; margin-top: 1px; }
        .form-control.is-error { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(178,58,58,0.12); }
        .login-success { text-align: center; padding: var(--space-7) var(--space-4); }
        .login-success-mark { width: 72px; height: 72px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
        .login-success-mark .icon-xl { stroke-width: 2.4; }
        .login-success h2 { margin-bottom: var(--space-2); }
        .login-success-user { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px; margin: var(--space-4) 0 var(--space-5); }
        .login-success-user img { width: 28px; height: 28px; border-radius: 50%; }
        .login-success-user strong { font-weight: 600; font-size: 0.875rem; }
        .login-success-user small { color: var(--color-text-muted); font-size: 0.8125rem; }

/* ============================================================
   Subcontractor home (My sites today)
   ============================================================ */
.sub-greeting { display: flex; align-items: center; gap: 12px; padding: var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
        .sub-greeting img,
        .sub-greeting .avatar-monogram { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
        .sub-greeting .avatar-monogram { font-size: 1rem; }
        .sub-greeting .greet-name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.15; }
        .sub-greeting .greet-co { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
        .sub-greeting .greet-action { margin-left: auto; }


        .sites-list { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-2); }
        .site-row { display: flex; align-items: stretch; gap: 12px; padding: 14px 16px; cursor: pointer; }
        .site-row .site-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-surface-alt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-text-muted); }
        .site-row .site-meta { flex: 1; min-width: 0; }
        .site-row .site-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; margin-bottom: 4px; color: var(--color-text); }
        .site-row .site-loc { font-size: 0.8125rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; }
        .site-row .site-status-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
        .site-row .site-cta { display: flex; align-items: center; align-self: center; color: var(--color-text-faint); }
        .site-row:hover .site-cta { color: var(--color-primary); }

        .sites-section-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); font-weight: 700; margin: var(--space-5) 0 var(--space-2); padding: 0 4px; }
        .sites-section-label:first-of-type { margin-top: var(--space-3); }

        .skel-line { height: 12px; margin-bottom: 8px; }
        .skel-card { padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 10px; background: var(--color-surface); }

/* ============================================================
   Subcontractor — My workers
   ============================================================ */
.sub-page-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: sticky; top: 0; z-index: 50; }
        .sub-page-header h1 { font-size: 1.375rem; }
        .sub-page-header .count { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; font-weight: 500; }
        .sub-page-header .btn-icon { background: var(--color-primary); color: var(--color-text-on-dark); border-radius: 50%; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: none; cursor: pointer; transition: background 0.15s ease; }
        .sub-page-header .btn-icon:hover { background: var(--color-primary-hover); }

        .worker-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 8px; transition: border-color 0.15s ease; }
        .worker-row:hover { border-color: var(--color-border-strong); }
        .worker-row .avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
        /* Monogram fallback shown when a worker has no uploaded photo.
           Sizing is inherited from the .avatar / .row-avatar size class
           the partial is invoked with; this rule only handles
           typography + centering + the per-size font-size overrides. */
        .avatar-monogram { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; user-select: none; }
        .worker-row .avatar.avatar-monogram { font-size: 1rem; }
        .check-row .row-avatar.avatar-monogram,
        .sd-worker-row .row-avatar.avatar-monogram { font-size: 0.8125rem; }
        /* sd-worker-row used to style the avatar via a tag selector;
           give the new monogram <span> the same dimensions. */
        .sd-worker-row .row-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
        .worker-row .meta { flex: 1; min-width: 0; }
        .worker-row .name { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.2; color: var(--color-text); }
        .worker-row .role-pill { display: inline-block; margin-top: 4px; font-size: 0.6875rem; padding: 2px 8px; background: var(--color-surface-alt); color: var(--color-text-muted); border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; }
        .worker-row .role-pill.is-floorlayer { background: var(--color-primary-light); color: var(--color-primary); }
        .worker-row .role-pill.is-sander { background: rgba(200,118,43,0.12); color: var(--color-accent); }
        .worker-row .cred-tag { display: inline-block; margin-top: 4px; margin-left: 6px; font-size: 0.625rem; padding: 1px 6px; background: var(--color-surface-alt); color: var(--color-text-muted); border-radius: 999px; font-family: 'SF Mono', Menlo, monospace; letter-spacing: 0.02em; }
        .worker-row .row-actions { display: flex; gap: 4px; flex-shrink: 0; }
        .worker-row .row-actions .btn-ghost { padding: 8px; min-width: 36px; min-height: 36px; }

        .workers-list-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); font-weight: 700; margin: 0 4px var(--space-2); }

        /* Modal — bottom sheet on mobile, centered on desktop */
        .modal-backdrop { position: fixed; inset: 0; background: rgba(26,31,43,0.45); z-index: 9000; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.15s ease; }
        @media (min-width: 768px) {
.modal-backdrop { align-items: center; }
}
        .modal-sheet { background: var(--color-surface); width: 100%; max-width: 520px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-5); box-shadow: var(--shadow-lg); animation: slideUp 0.25s ease; max-height: 92vh; overflow-y: auto; }
        @media (min-width: 768px) {
.modal-sheet { border-radius: var(--radius-lg); margin: var(--space-5); }
}
        @keyframes slideUp { from { transform: translateY(20%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .modal-grabber { width: 36px; height: 4px; background: var(--color-border-strong); border-radius: 2px; margin: 0 auto var(--space-4); }
        @media (min-width: 768px) {
.modal-grabber { display: none; }
}
        .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
        .modal-header h2 { font-size: 1.25rem; }
        .modal-footer { display: flex; gap: 8px; margin-top: var(--space-5); }
        .modal-footer .btn { flex: 1; }

        .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: var(--color-surface-alt); border-radius: var(--radius-sm); margin-top: var(--space-4); }
        .toggle-row .toggle-info strong { display: block; font-weight: 600; font-size: 0.9375rem; }
        .toggle-row .toggle-info small { font-size: 0.8125rem; color: var(--color-text-muted); }
        .toggle-row { cursor: pointer; }
        .toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
        .toggle-switch { position: relative; width: 46px; height: 26px; background: var(--color-border-strong); border-radius: 999px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
        .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: white; border-radius: 50%; transition: left 0.2s; box-shadow: var(--shadow-sm); }
        .toggle-input:checked ~ .toggle-switch { background: var(--color-success); }
        .toggle-input:checked ~ .toggle-switch::after { left: 22px; }
        .toggle-input:focus-visible ~ .toggle-switch { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ============================================================
   Subcontractor — Daily staffing input
   ============================================================ */
.si-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 50; }
        .si-topbar .back { width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-alt); border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; color: var(--color-text); }
        .si-topbar .back:hover { background: var(--color-border); }
        .si-topbar .title { flex: 1; min-width: 0; }
        .si-topbar .title h1 { font-size: 1.0625rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .si-topbar .title small { font-size: 0.75rem; color: var(--color-text-muted); }

        .si-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px; margin: 0 var(--space-4); position: sticky; top: 61px; z-index: 49; box-shadow: var(--shadow-sm); }
        .si-segment button { background: transparent; border: none; padding: 9px 12px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; color: var(--color-text-muted); cursor: pointer; min-height: 40px; transition: all 0.15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
        .si-segment button.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }

        .si-day-strip { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); }
        .si-day-strip .nav { background: transparent; border: 1px solid var(--color-border); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); cursor: pointer; }
        .si-day-strip .day-label { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
        .si-day-strip .day-sub { font-size: 0.75rem; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

        .si-bulk { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
        .si-bulk .label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); font-weight: 700; }
        .si-bulk .actions { display: flex; gap: 4px; }
        .si-bulk .actions .btn-sm { min-height: 32px; padding: 4px 12px; font-weight: 600; }

        .check-row { display: flex; align-items: center; gap: 12px; padding: 12px var(--space-4); min-height: 64px; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background 0.15s ease; user-select: none; }
        .check-row:hover { background: var(--color-surface-alt); }
        .check-row.is-checked { background: var(--color-primary-light); }
        .check-row.is-checked:hover { background: #DCE5EE; }
        /* Hide the native checkbox; the .big-check / .week-cell is the
           visible affordance. Keep it focusable & screen-reader-readable. */
        .check-row-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
        .check-row-input:focus-visible ~ .big-check { outline: 2px solid var(--color-primary); outline-offset: 2px; }
        .big-check { width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--color-border-strong); background: var(--color-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s ease; color: transparent; }
        .check-row.is-checked .big-check { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-dark); }
        .check-row .meta { flex: 1; min-width: 0; }
        .check-row .name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
        .check-row .role { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 2px; }
        .check-row .row-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }

        .si-savebar { position: sticky; bottom: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 12px var(--space-4) calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(26, 31, 43, 0.08); z-index: 60; }
        .si-savebar .btn-primary { width: 100%; min-height: 52px; font-size: 1rem; }
        .si-savebar .savebar-hint { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 8px; }
        .si-savebar .savebar-hint .deadline-mini { color: var(--color-warning); font-weight: 600; }

        /* Week grid */
        .week-wrap { padding: var(--space-3) var(--space-4) 0; }
        .week-grid { display: grid; grid-template-columns: minmax(110px, 1.4fr) repeat(7, minmax(34px, 1fr)); gap: 2px; align-items: center; }
        .week-grid .head-cell { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-faint); font-weight: 700; text-align: center; padding: 6px 0; }
        .week-grid .head-cell.weekend { color: var(--color-border-strong); }
        .week-grid .head-cell .num { display: block; font-size: 0.875rem; color: var(--color-text); font-family: var(--font-display); margin-top: 2px; }
        .week-grid .name-cell { padding: 8px 0; }
        .week-grid .name-cell .nm { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.15; }
        .week-grid .name-cell .rl { font-size: 0.6875rem; color: var(--color-text-muted); margin-top: 2px; }
        .week-cell { aspect-ratio: 1; min-height: 36px; border-radius: 6px; background: var(--color-surface-alt); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; color: transparent; }
        .week-cell:hover { border-color: var(--color-text-muted); }
        .week-cell.is-checked { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-dark); }
        .week-cell.is-weekend { background: transparent; border-style: dashed; }

        .si-success, .si-error { padding: var(--space-7) var(--space-5); text-align: center; }
        .si-success-mark { width: 96px; height: 96px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
        .si-success-mark .icon-2xl { stroke-width: 2.5; }
        .si-success h2 { margin-bottom: var(--space-2); }
        .si-success-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-success); border-radius: var(--radius-md); padding: var(--space-4); text-align: left; max-width: 400px; margin: var(--space-5) auto; }
        .si-success-summary .row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
        .si-success-summary .row + .row { border-top: 1px solid var(--color-border); }
        .si-actions-row { display: flex; gap: 8px; max-width: 400px; margin: 0 auto; }
        .si-actions-row .btn { flex: 1; }

        .si-error-mark { width: 80px; height: 80px; border-radius: 50%; background: var(--color-error-bg); color: var(--color-error); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }

/* ============================================================
   Admin — Live overview
   ============================================================ */
.ovr-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-5); }
        .ovr-header .crumb { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); font-weight: 700; }
        .ovr-header h1 { margin-top: 4px; }
        .ovr-header .header-actions { display: flex; gap: 8px; }
        .ovr-date-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; }
        .ovr-date-pill small { color: var(--color-text-faint); font-weight: 500; }

        /* Hero readiness card */

        .filters-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
        .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); cursor: pointer; min-height: 36px; transition: all 0.15s ease; }
        .filter-chip:hover { border-color: var(--color-text-muted); color: var(--color-text); }
        .filter-chip.active { background: var(--color-primary-light); color: var(--color-primary); border-color: rgba(27,58,87,0.2); font-weight: 600; }

        .ovr-section-label { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); font-weight: 700; margin: var(--space-5) 0 var(--space-3); padding-left: 4px; }

        .ovr-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
        @media (min-width: 768px) {
.ovr-grid { grid-template-columns: 1fr 1fr; }
}
        @media (min-width: 1280px) {
.ovr-grid { grid-template-columns: 1fr 1fr 1fr; }
}

        .ovr-site { padding: var(--space-4); cursor: pointer; transition: all 0.15s ease; }
        .ovr-site:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
        .ovr-site .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
        .ovr-site .nm { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
        .ovr-site .loc { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
        .ovr-site .subs-list { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--color-border); }
        .ovr-site .sub-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8125rem; }
        .ovr-site .sub-line .co { font-weight: 600; color: var(--color-text); }
        .ovr-site .sub-line .stat-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; }
        .ovr-site .sub-line .stat-mini.ok { color: var(--color-success); }
        .ovr-site .sub-line .stat-mini.wait { color: var(--color-warning); }
        .ovr-site .sub-line .stat-mini.no { color: var(--color-error); }

        .empty-overview { background: var(--color-surface); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-5); text-align: center; }
        .empty-overview .icon-2xl { color: var(--color-info); margin-bottom: var(--space-3); }
        .empty-overview h3 { margin-bottom: var(--space-2); }
        .empty-overview p { max-width: 480px; margin: 0 auto; color: var(--color-text-muted); }

        .skel-hero { height: 180px; border-radius: var(--radius-lg); margin-bottom: var(--space-5); }
        .skel-card { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: 10px; }
        .skel-line { height: 12px; margin-bottom: 8px; }

/* ============================================================
   Admin — Sites
   ============================================================ */
.sites-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
        .sites-toolbar .search-wrap { position: relative; flex: 1; max-width: 320px; min-width: 200px; }
        .sites-toolbar .search-wrap .icon-sm { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-faint); pointer-events: none; }
        .sites-toolbar .search-wrap input { padding-left: 36px; min-height: 40px; }

        .site-row-card { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px var(--space-5); align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 8px; cursor: pointer; transition: all 0.15s ease; }
        .site-row-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
        @media (min-width: 992px) {
.site-row-card { grid-template-columns: 2.2fr 1.2fr 1.4fr 0.6fr auto; gap: var(--space-4); }
}

        .site-row-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .site-row-name .ico { width: 40px; height: 40px; border-radius: 8px; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .site-row-name .nm { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
        .site-row-name .ciaw, .ovr-site .ciaw { font-size: 0.6875rem; color: var(--color-text-faint); margin-top: 4px; letter-spacing: 0.04em; font-family: 'SF Mono', Menlo, monospace; text-transform: uppercase; }
        .site-row-name .ad { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 2px; }

        .col-label { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); font-weight: 700; margin-bottom: 2px; }
        @media (min-width: 992px) {
.col-label { display: none; }
}

        .sub-avatars { display: flex; gap: -6px; align-items: center; }
        .sub-avatars .stack { display: flex; }
        .sub-avatars .stack img,
        .sub-avatars .stack .avatar-monogram { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-surface); margin-left: -8px; box-shadow: var(--shadow-sm); object-fit: cover; }
        .sub-avatars .stack img:first-child,
        .sub-avatars .stack .avatar-monogram:first-child { margin-left: 0; }
        .sub-avatars .stack .avatar-monogram { font-size: 0.625rem; }
        .sub-avatars .more-text { font-size: 0.8125rem; color: var(--color-text-muted); margin-left: 6px; }

        .site-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
        .site-row-actions .btn-ghost { padding: 8px; min-width: 36px; min-height: 36px; }

        /* Edit form */
        .edit-shell { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
        @media (max-width: 991.98px) {
.edit-shell { padding: var(--space-4); }
}
        .edit-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
        @media (min-width: 768px) {
.edit-grid { grid-template-columns: 1fr 1fr; }
}
        .edit-section { padding-top: var(--space-5); margin-top: var(--space-5); border-top: 1px solid var(--color-border); }
        .edit-section h3 { margin-bottom: 4px; }
        .edit-section .help { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: var(--space-4); }

        .link-sub-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 6px; cursor: pointer; transition: all 0.15s ease; }
        .link-sub-row:hover { border-color: var(--color-border-strong); }
        .link-sub-row.is-linked { background: var(--color-primary-light); border-color: rgba(27,58,87,0.25); }
        .link-sub-row img,
        .link-sub-row .avatar-monogram { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
        .link-sub-row .avatar-monogram { font-size: 0.8125rem; }
        .link-sub-row .info { flex: 1; min-width: 0; }
        .link-sub-row .info strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; }
        .link-sub-row .info small { font-size: 0.8125rem; color: var(--color-text-muted); }
        .link-sub-row .link-toggle { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--color-border-strong); background: var(--color-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; transition: all 0.15s ease; }
        .link-sub-row.is-linked .link-toggle { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-dark); }

        .edit-actions-bar { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); flex-wrap: wrap; }
        .edit-actions-bar .left-side { margin-right: auto; }

        /* Sticky page header */
        .admin-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: var(--space-5); }
        .admin-page-header .crumb { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); font-weight: 700; }
        .admin-page-header h1 { margin-top: 4px; }

/* ============================================================
   Admin — Subcontractors
   ============================================================ */
.sc-row { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px var(--space-5); align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 8px; cursor: pointer; transition: all 0.15s ease; }
        .sc-row:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
        @media (min-width: 992px) {
.sc-row { grid-template-columns: 2fr 1.6fr 0.8fr 0.8fr auto; gap: var(--space-4); }
}
        .sc-row .person { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .sc-row .person img,
        .sc-row .person .avatar-monogram { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
        .sc-row .person .avatar-monogram { font-size: 1rem; }
        .sc-row .person .nm { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
        .sc-row .person .resp { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 2px; }
        .sc-row .contact { font-size: 0.875rem; color: var(--color-text); }
        .sc-row .contact small { display: block; font-size: 0.75rem; color: var(--color-text-faint); margin-top: 2px; }
        .sc-row .stat-num { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--color-text); }
        .sc-row .stat-num small { display: block; font-size: 0.6875rem; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-top: 4px; font-family: var(--font-body); }


        .sent-card { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-success); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 520px; margin: var(--space-5) auto; }
        @media (max-width: 575.98px) {
.sent-card { padding: var(--space-4); }
}
        .sent-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
        .sent-mark .icon-xl { stroke-width: 2.4; }
        .sent-summary { padding: var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-sm); margin: var(--space-4) 0; }
        .sent-summary .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; }
        .sent-summary .row + .row { border-top: 1px solid var(--color-border); }
        .sent-summary .row .label { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ============================================================
   Admin — Site detail
   ============================================================ */
.sd-detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
        @media (min-width: 992px) {
.sd-detail-grid { grid-template-columns: 1.6fr 1fr; gap: var(--space-6); align-items: flex-start; }
}

        .sd-status-hero { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 6px solid var(--color-warning); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); }
        .sd-status-hero .eyebrow { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-warning); font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
        .sd-status-hero h2 { font-size: 1.5rem; }
        .sd-status-hero .stats { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
        .sd-status-hero .stat .num { font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1; letter-spacing: -0.02em; }
        .sd-status-hero .stat .lbl { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: 600; margin-top: 4px; }

        .sub-block { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 0; margin-bottom: var(--space-4); overflow: hidden; }
        .sub-block.is-saved { border-left-color: var(--color-success); }
        .sub-block.is-awaiting { border-left-color: var(--color-warning); }

        .sub-block-head { display: flex; align-items: center; gap: 12px; padding: 14px var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
        .sub-block.is-awaiting .sub-block-head { background: var(--color-warning-bg); border-bottom-color: rgba(181,115,26,0.2); }
        .sub-block-head img,
        .sub-block-head .avatar-monogram { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
        .sub-block-head .avatar-monogram { font-size: 0.875rem; }
        .sub-block-head .who { flex: 1; min-width: 140px; }
        .sub-block-head .who strong { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; display: block; }
        .sub-block-head .who small { font-size: 0.8125rem; color: var(--color-text-muted); }

        .sd-worker-row { display: flex; align-items: center; gap: 12px; padding: 12px var(--space-4); border-bottom: 1px solid var(--color-border); }
        .sd-worker-row:last-child { border-bottom: none; }
        .sd-worker-row img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
        .sd-worker-row .info strong { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.15; display: block; }
        .sd-worker-row .info small { font-size: 0.75rem; color: var(--color-text-muted); }
        .sd-worker-row .info { flex: 1; min-width: 0; }
        .sd-check-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--color-success-bg); color: var(--color-success); font-size: 0.75rem; font-weight: 600; }

        .sd-awaiting-body { padding: var(--space-5) var(--space-4); display: flex; gap: 14px; align-items: flex-start; }
        .sd-awaiting-body .icon-lg { color: var(--color-warning); flex-shrink: 0; margin-top: 2px; }
        .sd-awaiting-body .info { flex: 1; }
        .sd-awaiting-body .info strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; }
        .sd-awaiting-body .info p { color: var(--color-text-muted); font-size: 0.875rem; margin: 4px 0 var(--space-3); }
        .sd-awaiting-body .info .btn { margin-right: 6px; }

        .sd-rail-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); }
        .sd-rail-card h3 { font-size: 0.9375rem; margin-bottom: var(--space-3); }
        .sd-info-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 0.875rem; }
        .sd-info-row:last-child { border-bottom: none; }
        .sd-info-row .lbl { color: var(--color-text-muted); flex-shrink: 0; min-width: 88px; }
        .sd-info-row .val { color: var(--color-text); font-weight: 500; }

        .timeline { position: relative; padding-left: 22px; }
        .timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--color-border); }
        .timeline-event { position: relative; padding-bottom: 12px; }
        .timeline-event::before { content: ''; position: absolute; left: -19px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-strong); }
        .timeline-event.is-saved::before { background: var(--color-success); border-color: var(--color-success); }
        .timeline-event.is-pending::before { background: var(--color-warning); border-color: var(--color-warning); }
        .timeline-event .when { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; }
        .timeline-event .what { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 2px; }

/* ============================================================
   Production-only additions (a.nav-item is a real link in Django)
   ============================================================ */
.nav-item, a.nav-item { text-decoration: none; color: var(--color-text-muted); }
a.nav-item:hover { color: var(--color-text); text-decoration: none; }
a.nav-item.active { color: var(--color-primary); }

.tabbar-item, a.tabbar-item { text-decoration: none; }

/* Site/status cards rendered as <a href> (Django screens use real anchors for keyboard nav) */
/* All status-card anchors: kill underline + inherit text colour. */
a.status-card { color: var(--color-text); text-decoration: none; display: block; }
a.status-card:hover { color: var(--color-text); text-decoration: none; }
a.status-card .site-name, a.status-card .nm { color: var(--color-text); }
/* The row-style variant (.site-row, screen 2) lays out horizontally. */
a.site-row { display: flex; }

/* Django messages framework — slot inside main */
/* Custom name to avoid clashing with Bootstrap 5's .toast (display:none unless .show). */
.app-toast-stack {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: calc(100vw - var(--space-5));
  width: 360px;
  pointer-events: none;
}
.app-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface);
  animation: app-toast-slide-in 180ms ease-out;
}
.app-toast.is-dismissing { animation: app-toast-slide-out 180ms ease-in forwards; }
.app-toast-msg { flex: 1; min-width: 0; }
.app-toast-close {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 0; background: transparent;
  font-size: 1.25rem; line-height: 1;
  color: currentColor; opacity: 0.55; cursor: pointer;
  padding: 0;
}
.app-toast-close:hover, .app-toast-close:focus { opacity: 1; }
.app-toast.alert-success { background: var(--color-success-bg); color: var(--color-success); border-color: rgba(46,125,79,0.2); }
.app-toast.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: rgba(181,115,26,0.2); }
.app-toast.alert-danger  { background: var(--color-error-bg);   color: var(--color-error);   border-color: rgba(178,58,58,0.2); }
.app-toast.alert-info    { background: var(--color-info-bg);    color: var(--color-info);    border-color: rgba(43,108,176,0.2); }

@keyframes app-toast-slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes app-toast-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}

@media (max-width: 575px) {
  .app-toast-stack { left: var(--space-3); right: var(--space-3); width: auto; top: var(--space-3); }
}

/* Field-level form errors (rendered by app.js showFormErrors) */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(178,58,58,0.12); }
.field-error { color: var(--color-error); font-size: 0.8125rem; margin-top: 4px; }
.image-uploader {
  display: flex;
  gap: 14px;
  align-items: center;
}
.image-uploader .image-preview-wrap {
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.image-uploader .image-preview { width: 100%; height: 100%; object-fit: cover; }
.image-uploader .image-placeholder { color: var(--color-text-faint); }
.image-uploader .image-actions { flex: 1; min-width: 0; }
.form-nonfield-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid rgba(178,58,58,0.2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.875rem;
  margin-bottom: var(--space-3);
}