*, *::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; }
  .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-card { background:var(--white); 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:52px; height:52px; background:var(--navy); border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
  .login-logo svg { width:28px; height:28px; }
  .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; }

  /* ── 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); }

  /* ── 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; }
  .success-toast { display:none; background:var(--green-l); border:1.5px solid var(--teal-m); border-radius:8px; padding:12px 16px; margin-bottom:18px; font-size:13px; color:var(--green); font-weight:600; }
  .success-toast.show { display:flex; align-items:center; gap:10px; }
  .error-toast { display:none; background:var(--red-l); border:1.5px solid var(--red); border-radius:8px; padding:12px 16px; margin-bottom:18px; font-size:13px; color:var(--red); font-weight:600; }
  .error-toast.show { display:flex; align-items:center; gap:10px; }

  /* ── 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); }
  .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); }
  .tile-row { display:grid; grid-template-columns:repeat(6,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-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; }


  /* 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:var(--gray-m); }
  .report-meta { text-align:right; font-size:12px; color:var(--gray-m); 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(5,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:var(--gray-m); margin-top:2px; font-weight:600; }
  /* Monthly section table */
  .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:var(--gray); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; border-radius:6px; margin-bottom:4px; }
  @media print {
    body > *:not(#screen-supervisor) { display:none !important; }
    #screen-supervisor { display:block !important; }
    .sup-topbar, .tile-row, .sup-tabs, .doctype-tabs, .sup-panel:not(#sup-summary), .month-controls, .summary-tabs { display:none !important; }
    #sup-summary { display:block !important; }
    .summary-sub-panel { display:none !important; }
    #summary-monthly { display:block !important; }
    .monthly-report { box-shadow:none; padding:0; }
    @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; }
    .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; }
  }