*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --navy:      #1B3A6B; --navy-l:    #E8EEF7; --navy-m:    #3D5F9A;
    --teal:      #0F6E56; --teal-l:    #E1F5EE; --teal-m:    #5DCAA5;
    --purple:    #4A2D8C; --purple-l:  #EDE8F7;
    --gold:      #7A5C00; --gold-l:    #FFF8E1; --gold-m:    #F0C040;
    --red:       #A32D2D; --red-l:     #FCEBEB;
    --green:     #27500A; --green-l:   #EAF3DE;
    --orange:    #8B4500; --orange-l:  #FFF0E0;
    --blue:      #0C447C; --blue-l:    #E6F1FB;
    --gray:      #3D4354; --gray-l:    #F7F4FC; --gray-m:    #9896A8;
    --white:     #FFFFFF;
    --radius: 10px; --shadow: 0 4px 20px rgba(27,58,107,0.10); --shadow-sm: 0 2px 8px rgba(27,58,107,0.08);
  }
  body { font-family:'Segoe UI',system-ui,sans-serif; background:#F0F4FA; color:var(--gray); min-height:100vh; }

  /* ── Test watermark — toggled via TEST_WATERMARK_ENABLED in script.js ── */
  .test-watermark {
    display: none;
    position: fixed; inset: 0; z-index: 9998; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280'%3E%3Cg transform='rotate(-30 210 140)'%3E%3Ctext x='40' y='130' font-size='26' font-family='Segoe UI,system-ui,sans-serif' font-weight='800' fill='rgba(163,45,45,0.28)'%3ENOT FOR%3C/text%3E%3Ctext x='40' y='165' font-size='26' font-family='Segoe UI,system-ui,sans-serif' font-weight='800' fill='rgba(163,45,45,0.28)'%3EOFFICIAL USE%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
  }
  .test-watermark.show { display: block; }
  .screen { display:none; min-height:100vh; }
  .screen.active { display:flex; flex-direction:column; }

  /* ── Setup screen ─────────────────────────────────────────────── */
  #screen-setup {
    align-items:center; justify-content:center;
    background:linear-gradient(145deg,#0d1f3c 0%,var(--navy) 60%,#1a4d3a 100%);
  }
  .setup-card {
    background:var(--white); border-radius:18px; padding:40px 44px;
    width:560px; max-height:90vh; overflow-y:auto;
    box-shadow:0 24px 60px rgba(0,0,0,0.3);
  }
  .setup-step {
    display:flex; align-items:flex-start; gap:16px;
    padding:16px 0; border-bottom:1px solid var(--navy-l);
  }
  .setup-step:last-of-type { border-bottom:none; }
  .step-num {
    width:32px; height:32px; border-radius:50%; background:var(--navy);
    color:var(--white); font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .step-content h4 { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:6px; }
  .step-content p  { font-size:13px; color:var(--gray); line-height:1.6; }
  .code-block {
    background:#1e1e2e; color:#a6e3a1; font-family:monospace; font-size:11px;
    padding:12px 16px; border-radius:8px; margin-top:8px; overflow-x:auto;
    white-space:pre; line-height:1.8;
  }
  .setup-card h2 { font-size:20px; color:var(--navy); font-weight:700; margin-bottom:4px; }
  .setup-card > p { font-size:13px; color:var(--gray-m); margin-bottom:24px; }
  .setup-input { width:100%; padding:11px 14px; border:1.5px solid #DDD; border-radius:8px; font-size:14px; color:var(--gray); outline:none; margin-top:8px; transition:border-color 0.2s; }
  .setup-input:focus { border-color:var(--navy); }
  .btn-primary { width:100%; padding:13px; background:var(--navy); color:var(--white); border:none; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; margin-top:20px; transition:background 0.2s; }
  .btn-primary:hover { background:var(--navy-m); }
  .setup-note { background:var(--gold-l); border:1px solid var(--gold-m); border-radius:8px; padding:10px 14px; font-size:12px; color:var(--gold); margin-top:12px; }

  /* ── Login screen ─────────────────────────────────────────────── */
  #screen-login {
    align-items:center; justify-content:center;
    background:linear-gradient(145deg,var(--navy) 0%,#2C5282 60%,var(--teal) 100%);
    position:relative; overflow:hidden;
  }
  #screen-login::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:rgba(255,255,255,0.04); top:-200px; right:-150px; }
  .login-watermark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1100px; height:1100px; max-width:none; object-fit:contain; opacity:0.14; pointer-events:none; z-index:0; }
  .login-card { background:rgba(255,255,255,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:18px; padding:44px 48px; width:420px; box-shadow:0 24px 60px rgba(0,0,0,0.24); position:relative; z-index:1; }
  .login-logo { width:64px; height:64px; display:block; object-fit:contain; margin-bottom:20px; }
  .login-card h1 { font-size:22px; color:var(--navy); font-weight:700; margin-bottom:4px; }
  .login-card > p { font-size:13px; color:var(--gray-m); margin-bottom:28px; }
  .role-tabs { display:flex; gap:8px; margin-bottom:24px; background:var(--gray-l); border-radius:var(--radius); padding:4px; }
  .role-tab { flex:1; padding:9px 0; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; background:transparent; color:var(--gray-m); transition:all 0.2s; }
  .role-tab.active { background:var(--white); color:var(--navy); box-shadow:var(--shadow-sm); }
  .form-group { margin-bottom:16px; }
  .form-group label { display:block; font-size:12px; font-weight:600; color:var(--gray); margin-bottom:6px; letter-spacing:0.4px; }
  .form-group input, .form-group select { width:100%; padding:11px 14px; border:1.5px solid #DDD; border-radius:8px; font-size:14px; color:var(--gray); outline:none; transition:border-color 0.2s; background:var(--white); }
  .form-group input:focus, .form-group select:focus { border-color:var(--navy); }
  .btn-login { width:100%; padding:13px; background:var(--navy); color:var(--white); border:none; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; transition:background 0.2s; margin-top:4px; }
  .btn-login:hover { background:var(--navy-m); }
  .login-hint { font-size:11px; color:var(--gray-m); text-align:center; margin-top:14px; padding:10px; background:var(--gold-l); border-radius:7px; border:1px solid var(--gold-m); }
  .login-error { font-size:12px; color:var(--red); background:var(--red-l); border-radius:6px; padding:8px 12px; margin-bottom:12px; display:none; }
  .btn-change-setup { width:100%; margin-top:8px; padding:8px; background:transparent; border:1px solid #ddd; border-radius:8px; font-size:12px; color:var(--gray-m); cursor:pointer; }
  .btn-change-setup:hover { background:var(--gray-l); }

  /* ── Spinner overlay ──────────────────────────────────────────── */
  .spinner-overlay { display:none; position:fixed; inset:0; background:rgba(255,255,255,0.85); z-index:9999; align-items:center; justify-content:center; flex-direction:column; gap:16px; }
  .spinner-overlay.show { display:flex; }
  .spinner { width:42px; height:42px; border:4px solid var(--navy-l); border-top:4px solid var(--navy); border-radius:50%; animation:spin 0.8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .spinner-text { font-size:14px; color:var(--navy); font-weight:600; }

  /* ── Inline loading indicator (tables / lists while fetching) ──── */
  .inline-spinner { width:30px; height:30px; border:3.5px solid var(--navy-l); border-top:3.5px solid var(--navy); border-radius:50%; display:inline-block; animation:spin 0.7s linear infinite; flex:none; }
  .loading-inline { display:inline-flex; align-items:center; gap:12px; color:var(--gray-m); font-size:15px; }

  /* ── Button loading state (every save/edit/return/etc. action) ──── */
  .btn-inline-spinner { width:12px; height:12px; border:2px solid currentColor; border-top-color:transparent; opacity:0.85; border-radius:50%; display:inline-block; animation:spin 0.7s linear infinite; vertical-align:-2px; margin-right:7px; }
  button:disabled { opacity:0.65; cursor:not-allowed; }

  /* ── Toast notifications (success/error popups after an action) ─── */
  .toast-stack { position:fixed; top:20px; right:20px; z-index:99999; display:flex; flex-direction:column; gap:10px; max-width:360px; }
  .toast { padding:14px 18px; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.18); font-size:13px; font-weight:600; line-height:1.4; opacity:1; transform:translateX(0); transition:opacity 0.3s, transform 0.3s; animation:toast-in 0.25s ease; }
  .toast-success { background:var(--green-l); color:var(--green); border:1.5px solid var(--teal-m); }
  .toast-error   { background:var(--red-l);   color:var(--red);   border:1.5px solid var(--red); }
  @keyframes toast-in { from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:translateX(0);} }

  /* ── Topbar ───────────────────────────────────────────────────── */
  .topbar { background:var(--white); border-bottom:2px solid var(--navy-l); padding:0 32px; height:60px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:100; }
  .topbar-brand { display:flex; align-items:center; gap:12px; }
  .brand-icon { width:36px; height:36px; background:var(--navy); border-radius:9px; display:flex; align-items:center; justify-content:center; }
  .brand-icon svg { width:20px; height:20px; }
  .brand-name { font-size:15px; font-weight:700; color:var(--navy); }
  .brand-sub  { font-size:11px; color:var(--gray-m); }
  .topbar-user { display:flex; align-items:center; gap:12px; }
  .user-badge { font-size:12px; color:var(--teal); font-weight:600; background:var(--teal-l); padding:4px 12px; border-radius:20px; }
  .sync-badge { font-size:11px; color:var(--green); font-weight:600; background:var(--green-l); padding:4px 10px; border-radius:20px; display:flex; align-items:center; gap:5px; }
  .sync-badge.syncing { color:var(--orange); background:var(--orange-l); }
  .btn-logout { padding:7px 16px; font-size:12px; font-weight:600; background:transparent; color:var(--red); border:1.5px solid var(--red-l); border-radius:7px; cursor:pointer; transition:all 0.2s; }
  .btn-logout:hover { background:var(--red-l); }

  /* ── Notifications ──────────────────────────────────────────────── */
  .notif-wrap { position:relative; }
  .notif-bell { position:relative; width:36px; height:36px; border-radius:50%; border:1.5px solid #ddd; background:var(--white); cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center; transition:background 0.2s; transform-origin:50% 20%; }
  .notif-bell:hover { background:var(--gray-l); }
  .notif-bell.on-dark { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.25); }
  .notif-bell.on-dark:hover { background:rgba(255,255,255,0.22); }
  .notif-bell.has-items { animation:notif-glow 2s ease-in-out infinite; }
  .notif-bell.ring { animation-name:notif-ring; animation-duration:0.7s; animation-timing-function:ease-in-out; animation-iteration-count:2; }
  .notif-bell.has-items.ring { animation-name:notif-glow, notif-ring; animation-duration:2s, 0.7s; animation-timing-function:ease-in-out, ease-in-out; animation-iteration-count:infinite, 2; }
  @keyframes notif-glow {
    0%,100% { box-shadow:0 0 0 0 rgba(163,45,45,0.4); }
    50%     { box-shadow:0 0 0 7px rgba(163,45,45,0); }
  }
  @keyframes notif-ring {
    0%,100% { transform:rotate(0deg); }
    15%     { transform:rotate(-20deg); }
    30%     { transform:rotate(16deg); }
    45%     { transform:rotate(-12deg); }
    60%     { transform:rotate(8deg); }
    75%     { transform:rotate(-4deg); }
  }
  .notif-count { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:10px; background:var(--red); color:var(--white); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid var(--white); box-shadow:0 1px 4px rgba(0,0,0,0.25); }
  .notif-bell.on-dark .notif-count { border-color:var(--navy); }
  .notif-bell.has-items .notif-count { animation:notif-pulse 1.6s ease-in-out infinite; }
  @keyframes notif-pulse {
    0%,100% { transform:scale(1); }
    50%     { transform:scale(1.22); }
  }
  .notif-panel { display:none; position:absolute; top:calc(100% + 10px); right:0; width:340px; max-height:420px; overflow-y:auto; background:var(--white); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,0.2); z-index:500; border:1px solid #eee; }
  .notif-panel.open { display:block; }
  .notif-panel-hdr { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eee; }
  .notif-panel-hdr strong { font-size:13px; color:var(--navy); }
  .notif-refresh { font-size:11px; color:var(--teal); background:none; border:none; cursor:pointer; font-weight:600; }
  .notif-item { display:flex; gap:10px; padding:11px 16px; border-bottom:1px solid #f4f4f4; cursor:pointer; text-align:left; }
  .notif-item:hover { background:var(--gray-l); }
  .notif-item:last-child { border-bottom:none; }
  .notif-item-dot { flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--teal); margin-top:5px; }
  .notif-item-dot.urgent { background:var(--red); }
  .notif-item-text { font-size:12.5px; color:var(--gray); line-height:1.4; }
  .notif-item-ref { font-size:10.5px; color:var(--gray-m); margin-top:2px; font-weight:600; }
  .notif-empty { padding:28px 16px; text-align:center; font-size:12px; color:var(--gray-m); }

  /* ── Staff layout ─────────────────────────────────────────────── */
  .staff-main { display:flex; flex:1; }
  .sidebar { width:240px; min-height:calc(100vh - 60px); background:var(--white); border-right:2px solid var(--navy-l); padding:24px 16px; flex-shrink:0; }
  .sidebar-label { font-size:10px; font-weight:700; letter-spacing:1.2px; color:var(--gray-m); margin-bottom:8px; padding:0 8px; }
  .nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; font-size:13px; font-weight:500; color:var(--gray); cursor:pointer; transition:all 0.18s; margin-bottom:2px; border:none; background:none; width:100%; text-align:left; }
  .nav-item:hover { background:var(--navy-l); color:var(--navy); }
  .nav-item.active { background:var(--navy); color:var(--white); }
  .content { flex:1; padding:28px 32px; overflow-x:auto; }
  .page-view { display:none; }
  .page-view.active { display:block; }
  .page-hdr { margin-bottom:24px; }
  .page-hdr h2 { font-size:22px; font-weight:700; color:var(--navy); margin-bottom:4px; }
  .page-hdr p  { font-size:13px; color:var(--gray-m); }

  /* ── Form ─────────────────────────────────────────────────────── */
  .form-card { background:var(--white); border-radius:var(--radius); padding:28px 32px; box-shadow:var(--shadow); max-width:760px; }
  .form-card h3 { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--navy-l); }
  .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .form-grid .span2 { grid-column:span 2; }
  .form-group textarea { width:100%; padding:11px 14px; border:1.5px solid #DDD; border-radius:8px; font-size:14px; color:var(--gray); resize:vertical; min-height:80px; font-family:inherit; outline:none; transition:border-color 0.2s; }
  .form-group textarea:focus { border-color:var(--navy); }
  .form-actions { display:flex; gap:12px; margin-top:22px; padding-top:16px; border-top:1.5px solid var(--gray-l); }
  .btn-submit { padding:11px 28px; background:var(--teal); color:var(--white); border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; transition:background 0.2s; }
  .btn-submit:hover { background:#0d5e49; }
  .btn-reset  { padding:11px 20px; background:var(--gray-l); color:var(--gray); border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }

  /* ── Doc list ─────────────────────────────────────────────────── */
  .doc-list { display:flex; flex-direction:column; gap:10px; }
  .doc-item { background:var(--white); border-radius:var(--radius); padding:16px 20px; box-shadow:var(--shadow-sm); border-left:4px solid var(--navy); display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  .doc-item-title { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:4px; }
  .doc-item-meta  { font-size:12px; color:var(--gray-m); display:flex; gap:14px; flex-wrap:wrap; }
  .doc-item-remarks { font-size:12px; color:var(--purple); background:var(--purple-l); padding:6px 10px; border-radius:6px; margin-top:8px; max-width:500px; }
  .status-badge { padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
  .status-pending  { background:var(--orange-l); color:var(--orange); }
  .status-review   { background:var(--blue-l);   color:var(--blue); }
  .status-approved { background:var(--green-l);  color:var(--green); }
  .status-returned { background:var(--red-l);    color:var(--red); }
  .status-completed{ background:var(--teal-l);   color:var(--teal); }
  /* Outgoing two-stage approval statuses (Phase 1) */
  .status-pending-section-head    { background:var(--orange-l); color:var(--orange); }
  .status-returned-to-staff       { background:var(--red-l);    color:var(--red); }
  .status-pending-chief           { background:var(--blue-l);   color:var(--blue); }
  .status-returned-to-section-head{ background:var(--purple-l); color:var(--purple); }
  .status-released                { background:var(--teal-l);   color:var(--teal); }
  .priority-high   { background:var(--red-l);  color:var(--red);   padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; }
  .priority-medium { background:var(--gold-l); color:var(--gold);  padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; }
  .priority-low    { background:var(--green-l);color:var(--green); padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; }

  /* ── Supervisor ───────────────────────────────────────────────── */
  .sup-topbar { background:var(--navy); padding:0 32px; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
  .sup-brand { display:flex; align-items:center; gap:12px; }
  .sup-brand-name { font-size:15px; font-weight:700; color:var(--white); }
  .sup-badge { background:var(--gold-m); color:var(--navy); font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; }
  .sup-content { padding:28px 32px; }
  .doctype-tabs { display:flex; gap:8px; margin-bottom:20px; background:var(--gray-l); border-radius:var(--radius); padding:5px; width:fit-content; }
  .doctype-tab { padding:9px 20px; font-size:13px; font-weight:700; color:var(--gray-m); cursor:pointer; border:none; border-radius:8px; background:transparent; transition:all 0.18s; }
  .doctype-tab.active { background:var(--navy); color:var(--white); box-shadow:var(--shadow-sm); }
  .dockind-title { font-size:20px; font-weight:800; color:var(--navy); margin:16px 0 14px; }
  .tile-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:28px; }
  .tile { background:var(--white); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); text-align:center; border-top:3px solid transparent; }
  .tile-num { font-size:32px; font-weight:800; margin-bottom:4px; }
  .tile-lbl { font-size:11px; color:var(--gray-m); font-weight:600; }
  .tile-total   { border-color:var(--navy);  } .tile-total   .tile-num { color:var(--navy); }
  .tile-pending { border-color:var(--orange);} .tile-pending .tile-num { color:var(--orange); }
  .tile-review  { border-color:var(--blue);  } .tile-review  .tile-num { color:var(--blue); }
  .tile-approved{ border-color:var(--green); } .tile-approved .tile-num{ color:var(--green); }
  .tile-returned{ border-color:var(--red);   } .tile-returned .tile-num { color:var(--red); }
  .tile-done    { border-color:var(--teal);  } .tile-done    .tile-num { color:var(--teal); }
  .sup-tabs { display:flex; gap:4px; margin-bottom:20px; border-bottom:2px solid var(--navy-l); }
  .sup-tab { padding:10px 20px; font-size:13px; font-weight:600; color:var(--gray-m); cursor:pointer; border:none; background:none; border-bottom:3px solid transparent; transition:all 0.18s; margin-bottom:-2px; }
  .sup-tab.active { color:var(--navy); border-bottom-color:var(--navy); }
  .sup-panel { display:none; }
  .sup-panel.active { display:block; }
  .filter-bar { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; background:var(--white); padding:14px 18px; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
  .filter-bar label { font-size:12px; font-weight:600; color:var(--gray); margin-right:4px; }
  .filter-bar select, .filter-bar input { padding:7px 12px; border:1.5px solid #DDD; border-radius:7px; font-size:13px; color:var(--gray); outline:none; min-width:160px; }
  .filter-bar select:focus, .filter-bar input:focus { border-color:var(--navy); }
  .btn-refresh { padding:7px 16px; background:var(--navy-l); color:var(--navy); border:none; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background 0.2s; }
  .btn-refresh:hover { background:var(--navy); color:var(--white); }
  .sup-table-wrap { overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow); }
  /* Pagination */
  .pager { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; }
  .pager-info { font-size:12px; color:var(--gray-m); font-weight:600; }
  .pager-btns { display:flex; gap:4px; flex-wrap:wrap; }
  .pg-btn { min-width:34px; padding:6px 11px; font-size:13px; font-weight:600; border:1.5px solid var(--navy-l); background:var(--white); color:var(--navy); border-radius:7px; cursor:pointer; transition:all 0.15s; }
  .pg-btn:hover:not(:disabled) { background:var(--navy); color:var(--white); }
  .pg-btn.active { background:var(--navy); color:var(--white); border-color:var(--navy); }
  .pg-btn:disabled { opacity:0.4; cursor:default; }
  .pg-ellipsis { padding:6px 4px; color:var(--gray-m); }
  .sup-table { width:100%; border-collapse:separate; border-spacing:0; background:var(--white); }
  .sup-table thead th { background:var(--navy); color:var(--white); font-size:11px; font-weight:700; padding:12px 14px; text-align:left; white-space:nowrap; border-right:1px solid rgba(255,255,255,0.15); }
  .sup-table thead th:first-child { border-radius:10px 0 0 0; } .sup-table thead th:last-child { border-radius:0 10px 0 0; border-right:none; }
  .sup-table tbody tr:nth-child(even) td { background:#FAFBFF; }
  .sup-table tbody tr:hover td { background:var(--navy-l); }
  .sup-table tbody td { padding:11px 14px; font-size:13px; color:var(--gray); border-bottom:1px solid #EEECF8; border-right:1px solid #F0EEF8; vertical-align:middle; }
  .sup-table tbody td:last-child { border-right:none; }
  .section-tag { padding:3px 9px; border-radius:12px; font-size:11px; font-weight:700; white-space:nowrap; }
  .tag-pps  { background:var(--blue-l);   color:var(--blue); }
  .tag-elec { background:var(--teal-l);   color:var(--teal); }
  .tag-mech { background:var(--gold-l);   color:var(--gold); }
  .tag-pm   { background:var(--purple-l); color:var(--purple); }
  .tag-admin{ background:var(--orange-l); color:var(--orange); }
  .action-btn { padding:5px 12px; font-size:12px; font-weight:600; border:none; border-radius:6px; cursor:pointer; transition:all 0.15s; margin-right:4px; }
  .btn-review  { background:var(--blue-l);  color:var(--blue);  } .btn-review:hover { background:var(--blue); color:var(--white); }
  .btn-assign  { background:var(--purple-l); color:var(--purple); } .btn-assign:hover  { background:var(--purple); color:var(--white); }
  .btn-claim   { background:var(--teal-l);   color:var(--teal);   } .btn-claim:hover   { background:var(--teal);   color:var(--white); }
  .btn-complete{ background:var(--green-l);  color:var(--green);  } .btn-complete:hover{ background:var(--green);  color:var(--white); }
  .btn-delete  { background:var(--red-l);    color:var(--red);    } .btn-delete:hover  { background:var(--red);    color:var(--white); }
  .btn-instruction { padding:10px 22px; background:var(--purple); color:var(--white); border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:background 0.2s; display:flex; align-items:center; gap:8px; }
  .btn-instruction:hover { background:#3a2270; }
  .badge-delay { padding:3px 10px; border-radius:12px; font-size:11px; font-weight:700; white-space:nowrap; display:inline-block; }
  .badge-delay.ok   { background:var(--teal-l); color:var(--teal); }
  .badge-delay.warn { background:var(--gold-l); color:var(--gold); }
  .badge-delay.late { background:var(--red-l);  color:var(--red);  }
  .breakdown-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .breakdown-card { background:var(--white); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm); }
  .breakdown-card h4 { font-size:13px; font-weight:700; color:var(--navy); margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--navy-l); }
  .breakdown-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid #F0EEF8; font-size:13px; }
  .breakdown-row:last-child { border-bottom:none; }
  .breakdown-bar-wrap { width:100px; height:6px; background:var(--gray-l); border-radius:3px; margin:0 12px; }
  .breakdown-bar { height:6px; border-radius:3px; background:var(--navy); transition:width 0.4s; }
  .breakdown-count { font-weight:700; color:var(--navy); min-width:28px; text-align:right; }
  .btn-export { padding:10px 22px; background:var(--teal); color:var(--white); border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; transition:background 0.2s; display:flex; align-items:center; gap:8px; }
  .btn-export:hover { background:#0d5e49; }
  .export-bar { display:flex; justify-content:flex-end; gap:10px; margin-bottom:14px; }

  /* Modal */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1000; align-items:center; justify-content:center; }
  .modal-overlay.open { display:flex; }
  .modal { background:var(--white); border-radius:14px; padding:32px 36px; width:560px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
  .modal h3 { font-size:17px; font-weight:700; color:var(--navy); margin-bottom:18px; }
  .modal-field { margin-bottom:12px; font-size:13px; }
  .modal-field strong { color:var(--navy); display:inline-block; min-width:140px; }
  .modal-divider { border:none; border-top:2px solid var(--navy-l); margin:18px 0; }
  .modal-actions { display:flex; gap:10px; margin-top:20px; }
  .btn-modal-approve { flex:1; padding:11px; background:var(--green); color:var(--white); border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; }
  .btn-modal-return  { flex:1; padding:11px; background:var(--red);   color:var(--white); border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; }
  .btn-modal-cancel  { padding:11px 20px; background:var(--gray-l); color:var(--gray); border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }


  /* ── Official letterhead — shared heading for every print output
     (monthly report + release list). Text is real markup (not a raster
     screenshot) so it stays crisp at any print resolution; the UP seal and
     UP-PGH logo are embedded as base64 data URIs from OFFICIAL_LETTERHEAD_HTML
     in script.js (see notes there on why they can't just be <img src="...">
     pointing at the root-folder files). ── */
  .official-letterhead { display:flex; align-items:center; gap:18px; padding-bottom:14px; margin-bottom:22px; border-bottom:1px solid #ddd; }
  .letterhead-logos { display:flex; align-items:center; gap:14px; flex-shrink:0; }
  .letterhead-logo { height:64px; width:auto; display:block; flex-shrink:0; }
  .letterhead-copy { flex:1; min-width:0; }
  .letterhead-titles { padding-bottom:6px; border-bottom:2px solid #333; margin-bottom:6px; }
  .letterhead-office { font-size:15px; color:#333; letter-spacing:0.2px; }
  .letterhead-org { font-size:19px; font-weight:800; color:#111; margin-top:2px; }
  .letterhead-address, .letterhead-contact { font-size:12px; color:#555; line-height:1.5; }

  /* Monthly report */
  .summary-tabs { display:flex; gap:4px; margin-bottom:20px; border-bottom:2px solid var(--navy-l); }
  .summary-tab  { padding:9px 18px; font-size:13px; font-weight:600; color:var(--gray-m); cursor:pointer; border:none; background:none; border-bottom:3px solid transparent; transition:all 0.18s; margin-bottom:-2px; }
  .summary-tab.active { color:var(--navy); border-bottom-color:var(--navy); }
  .summary-sub-panel { display:none; }
  .summary-sub-panel.active { display:block; }
  .month-controls { display:flex; gap:12px; align-items:center; background:var(--white); padding:14px 18px; border-radius:var(--radius); box-shadow:var(--shadow-sm); margin-bottom:18px; flex-wrap:wrap; }
  .month-controls label { font-size:12px; font-weight:600; color:var(--gray); }
  .month-controls select { padding:7px 12px; border:1.5px solid #DDD; border-radius:7px; font-size:13px; color:var(--gray); outline:none; }
  .month-controls select:focus { border-color:var(--navy); }
  .btn-print { padding:8px 18px; background:var(--purple); color:var(--white); border:none; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background 0.2s; }
  .btn-print:hover { background:var(--navy); }
  .monthly-report { background:var(--white); border-radius:var(--radius); padding:28px 32px; box-shadow:var(--shadow); }
  .report-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; padding-bottom:20px; border-bottom:3px solid var(--navy); }
  .report-title h2 { font-size:20px; font-weight:800; color:var(--navy); margin-bottom:4px; }
  .report-title p  { font-size:13px; color:#000; }
  .report-meta { text-align:right; font-size:12px; color:#000; line-height:2; }
  .report-meta strong { color:var(--navy); }
  .report-section { margin-bottom:28px; }
  .report-section-title { font-size:13px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:12px; padding-bottom:6px; border-bottom:2px solid var(--navy-l); }
  /* Summary stat row */
  .report-stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; margin-bottom:24px; }
  .report-stat { background:var(--navy-l); border-radius:8px; padding:14px; text-align:center; }
  .report-stat .num { font-size:28px; font-weight:800; color:var(--navy); }
  .report-stat .lbl { font-size:11px; color:#000; margin-top:2px; font-weight:600; }
  /* Monthly section table — Section-by-Type/Status matrices can run to 20+
     columns (one per document type), so they need their own horizontal
     scroller rather than squeezing the whole report page. */
  .report-table-wrap { overflow-x:auto; }
  .report-table { width:100%; border-collapse:collapse; font-size:13px; }
  .report-table th { background:var(--navy); color:var(--white); padding:9px 12px; text-align:left; font-size:11px; font-weight:700; border-right:1px solid rgba(255,255,255,0.15); }
  .report-table th:first-child { border-radius:6px 0 0 0; } .report-table th:last-child { border-radius:0 6px 0 0; border-right:none; }
  .report-table td { padding:9px 12px; border-bottom:1px solid #EEECF8; border-right:1px solid #F0EEF8; vertical-align:middle; }
  .report-table td:last-child { border-right:none; }
  .report-table tbody tr:nth-child(even) td { background:#FAFBFF; }
  .report-table .total-row td { background:var(--navy-l); font-weight:700; color:var(--navy); }
  /* Per-section card */
  .sec-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .sec-card { border-radius:8px; padding:16px 18px; }
  .sec-card-pps  { background:var(--blue-l);   border-left:4px solid var(--blue); }
  .sec-card-elec { background:var(--teal-l);   border-left:4px solid var(--teal); }
  .sec-card-mech { background:var(--gold-l);   border-left:4px solid var(--gold); }
  .sec-card-pm   { background:var(--purple-l); border-left:4px solid var(--purple); }
  .sec-card-admin{ background:var(--orange-l); border-left:4px solid var(--orange); }
  .sec-card h4 { font-size:13px; font-weight:700; margin-bottom:10px; }
  .sec-card-pps h4  { color:var(--blue); } .sec-card-elec h4 { color:var(--teal); }
  .sec-card-mech h4 { color:var(--gold); } .sec-card-pm h4   { color:var(--purple); }
  .sec-card-admin h4 { color:var(--orange); }
  .sec-card-row { display:flex; justify-content:space-between; font-size:12px; padding:4px 0; border-bottom:1px solid rgba(0,0,0,0.06); }
  .sec-card-row:last-child { border-bottom:none; }
  /* Doc list in report */
  .report-doc-list { font-size:12px; }
  .report-doc-row { display:grid; grid-template-columns:40px 90px 1fr 160px 80px 90px; gap:8px; padding:7px 10px; border-bottom:1px solid #F0EEF8; align-items:center; }
  .report-doc-row:nth-child(even) { background:#FAFBFF; }
  .report-doc-row.hdr { background:var(--gray-l); font-weight:700; color:#000; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; border-radius:6px; margin-bottom:4px; }
  @media print {
    /* Letter/A4's printable width (after @page margins) lands under 768px in
       some browsers' print engines, so the max-width:768px tablet breakpoint
       further down — which stacks .official-letterhead into a column — was
       incorrectly matching during print and pushing the logos above the
       text. Force the row layout back regardless of that breakpoint. */
    .official-letterhead { flex-direction:row !important; text-align:left !important; }
    /* Grey text (var(--gray)/var(--gray-m)) can read faint once printed or
       scanned, so darken it to solid black for every print. Redefining the
       variables themselves — rather than overriding each grey-colored rule
       one at a time — means every current use gets darkened automatically,
       including the ones set via inline style in the monthly report's
       JS-built HTML (report meta, stat labels, doc-list rows, signature
       captions, etc.). --gray-l (a light-gray background fill, not text)
       is deliberately left alone, as is every other color — navy, red,
       teal, gold, status/priority badges — none of that is touched. */
    :root { --gray:#000; --gray-m:#000; }
    /* These two letterhead lines use hardcoded hex grays, not the variables
       above (so the on-screen letterhead preview keeps its own distinct
       tone) — darken them separately for print only. */
    .letterhead-office, .letterhead-address, .letterhead-contact { color:#000; }
    body.printing-report > *:not(#screen-supervisor) { display:none !important; }
    body.printing-report #screen-supervisor { display:block !important; }
    body.printing-report .sup-topbar, body.printing-report .tile-row, body.printing-report .sup-tabs, body.printing-report .doctype-tabs, body.printing-report .btn-instruction-wrap, body.printing-report .dockind-title, body.printing-report .sup-panel:not(#sup-summary), body.printing-report .month-controls, body.printing-report .summary-tabs { display:none !important; }
    body.printing-report #sup-summary { display:block !important; }
    body.printing-report .summary-sub-panel { display:none !important; }
    body.printing-report #summary-monthly { display:block !important; }
    body.printing-report .monthly-report { box-shadow:none; padding:0; }
    /* Chrome/Edge don't print background-color by default unless the user
       has ticked "Background graphics" in the print dialog — most people
       never do. Dropped, that leaves the .report-table th's white text
       floating with no navy fill behind it, which reads as faint/grey on
       the page instead of the crisp white-on-navy shown on screen. Forcing
       color-adjust here makes the navy header (and every other filled
       background in the report — stat tiles, section cards, badges) print
       exactly as it renders on screen, regardless of that checkbox. */
    body.printing-report .monthly-report { -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
    /* Section-by-Type is now transposed (document type as rows, section as
       columns — 7 columns instead of 20+), and Section-by-Status tops out
       around 7-8 columns too, so neither needs the paper itself to change
       size. On screen they scroll inside .report-table-wrap if a narrow
       viewport ever needs it, but print has no scrolling — a clipped
       overflow:auto container would print only whatever was visible on
       screen and cut off the rest, so force it back to visible. A modest
       shrink keeps both comfortably within standard portrait paper. */
    body.printing-report .report-table-wrap { overflow-x:visible; }
    body.printing-report .report-table-wrap .report-table { font-size:10px; }
    /* overflow-wrap (not word-break:break-word) so a long section header only
       breaks mid-word as a last resort — it prefers the natural break points
       already in "Elec/Biomed/PABX" (the slashes, from shortSec()) over
       chopping arbitrarily wherever the column happens to run out of room. */
    body.printing-report .report-table-wrap th, body.printing-report .report-table-wrap td { padding:4px 5px; overflow-wrap:break-word; word-break:normal; }
    /* @page is declared once, below, near the Release print rules — it's a
       global at-rule not actually scoped by body.printing-report/-release,
       so declaring it twice just means whichever comes last in the
       stylesheet silently wins; keeping one shared rule avoids that trap. */
  }

  /* ── Print: release-ready documents table ─────────────────────── */
  .print-only { display:none; }
  @media print {
    /* #release-print-area is a top-level sibling of the .screen divs (see
       index.html) specifically so this can be display:none — which removes
       elements from layout entirely — rather than visibility:hidden, which
       still occupies space and was paginating several blank pages of
       invisible leftover height after the real content. */
    body.printing-release > *:not(#release-print-area) { display:none !important; }
    body.printing-release #release-print-area { display:block !important; }
    /* Same row-layout override as the report print block above — declared
       there is enough (it's unscoped by body class, so it already wins here
       too via !important), restated here so this block reads correctly on
       its own if it's ever split out or reordered. */
    .official-letterhead { flex-direction:row !important; text-align:left !important; }
    .print-header { margin-bottom:18px; }
    .print-header h2 { font-size:19px; color:var(--navy); font-weight:700; margin-bottom:4px; }
    .print-header p { font-size:12px; color:var(--gray-m); margin:2px 0; }
    .print-table { width:100%; border-collapse:collapse; font-size:12px; }
    .print-table th, .print-table td { border:1px solid #ccc; padding:6px 8px; text-align:left; vertical-align:top; }
    .print-table th { background:var(--gray-l); color:var(--gray); font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:0.4px; }
    .print-table td.print-sig-col { min-width:110px; height:38px; }
    .print-footer { display:flex; justify-content:flex-end; margin-top:40px; }
    .sig-block { width:44%; font-size:12px; color:var(--gray-m); text-align:center; }
    .sig-line { border-top:1px solid var(--gray); margin-bottom:6px; height:36px; }
    @page { margin:1.5cm; }
  }

  /* ── Responsive: tablet ───────────────────────────────────────── */
  @media(max-width:1024px){
    .tile-row{ grid-template-columns:repeat(3,1fr); }
    .content{ padding:24px 22px; }
    .sup-content{ padding:24px 22px; }
  }

  /* ── Responsive: small tablet / large phone ───────────────────── */
  @media(max-width:768px){
    /* Auth + modal cards fill the screen */
    .setup-card{ width:100%; max-width:100%; padding:28px 22px; border-radius:14px; }
    .login-card{ width:100%; max-width:100%; padding:32px 24px; }
    #screen-setup, #screen-login{ padding:16px; }
    .modal{ width:100%; max-width:100%; padding:26px 22px; }

    /* Top bars wrap instead of overflowing */
    .topbar, .sup-topbar{ height:auto; min-height:56px; padding:8px 16px; flex-wrap:wrap; gap:8px; }
    .topbar-user{ flex-wrap:wrap; gap:8px; row-gap:6px; }
    .brand-sub{ display:none; }

    /* Sidebar becomes a horizontal nav bar */
    .staff-main{ flex-direction:column; }
    .sidebar{ width:100%; min-height:auto; border-right:none; border-bottom:2px solid var(--navy-l); padding:10px 12px; }
    .sidebar > div:first-child{ margin-bottom:0 !important; display:flex; gap:8px; overflow-x:auto; }
    .sidebar .sidebar-label{ display:none; }
    .sidebar > div:last-child{ display:none; }
    .nav-item{ width:auto; margin-bottom:0; white-space:nowrap; }

    .content, .sup-content{ padding:18px 14px; }

    /* Forms collapse to a single column */
    .form-card{ padding:22px 18px; }
    .form-grid{ grid-template-columns:1fr; }
    .form-grid .span2{ grid-column:span 1; }

    /* Dashboards */
    .tile-row{ grid-template-columns:repeat(3,1fr); gap:8px; }
    .tile{ padding:12px 10px; }
    .tile-num{ font-size:24px; }
    .breakdown-grid, .sec-cards{ grid-template-columns:1fr; }
    .report-stat-row{ grid-template-columns:repeat(2,1fr); }

    /* Filter bars: each control full width */
    .filter-bar, .month-controls{ flex-direction:column; align-items:stretch; }
    .filter-bar > div, .month-controls{ width:100%; }
    .filter-bar select, .filter-bar input,
    .month-controls select{ width:100%; min-width:0; }
    .btn-refresh, .btn-print{ justify-content:center; }

    /* My Documents cards stack */
    .doc-item{ flex-direction:column; }

    /* Monthly report */
    .monthly-report{ padding:20px 16px; }
    .official-letterhead{ flex-direction:column; text-align:center; gap:10px; }
    .report-header{ flex-direction:column; gap:12px; }
    .report-meta{ text-align:left; }
    .report-doc-list{ overflow-x:auto; }
    .report-doc-row{ min-width:560px; }
  }

  /* ── Responsive: phone ────────────────────────────────────────── */
  @media(max-width:480px){
    .tile-row{ grid-template-columns:repeat(2,1fr); }
    .login-card h1{ font-size:19px; }
    .page-hdr h2, .report-title h2{ font-size:18px; }
    .form-actions, .modal-actions{ flex-direction:column; }
    .form-actions button, .modal-actions button{ width:100%; }
    .sup-tabs, .summary-tabs, .role-tabs, .doctype-tabs{ overflow-x:auto; max-width:100%; }
    .sup-tab, .summary-tab{ white-space:nowrap; padding:10px 14px; }
    .export-bar{ justify-content:stretch; }
    .btn-export{ width:100%; justify-content:center; }
    .sup-badge{ display:none; }
  }