:root{--bg-base:#0a1330;--bg-deep:#060b1e;--panel:rgba(21,35,74,0.46);--panel-solid:#101c3f;--panel-hover:rgba(28,45,92,0.62);
--line:rgba(226,232,248,0.14);--line-strong:rgba(226,232,248,0.26);--gold:#cba86e;--gold-soft:#e6d5ab;--ink:#f1f3f9;
--ink-muted:#9aa7c7;--ink-faint:#69759a;--good:#57d6ac;--good-ink:#08351f;--warn:#e5b84b;--danger:#e2645b;
--shadow:0 24px 60px -24px rgba(0,0,0,0.65);--radius:14px;--radius-sm:9px;--maxw:1180px;}
*{box-sizing:border-box;}html{color-scheme:dark;}
body{margin:0;min-height:100vh;background:linear-gradient(180deg, rgba(6,11,30,0.35) 0%, rgba(6,11,30,0.72) 55%, rgba(6,11,30,0.92) 100%), url("assets/bg.jpg");
background-size:cover;background-position:top center;background-attachment:fixed;background-color:var(--bg-base);color:var(--ink);
font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
@media (prefers-reduced-motion: reduce){*{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}}
a{color:inherit;}h1,h2,h3{margin:0;text-wrap:balance;}p{margin:0;}button{font-family:inherit;}
::selection{background:rgba(203,168,110,0.35);}:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-radius:6px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(20px,4vw,40px) clamp(18px,5vw,40px) 64px;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:14px;}.brand img{height:28px;width:auto;display:block;}
.brand-divider{width:1px;height:24px;background:var(--line-strong);}
.brand-sub{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);font-weight:600;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.identity-chip{font-size:12.5px;color:var(--ink-muted);display:flex;align-items:center;gap:8px;}
.identity-chip strong{color:var(--gold-soft);font-weight:600;}
.identity-chip a, .identity-chip button.link{color:var(--ink-faint);text-decoration:underline;cursor:pointer;background:none;border:0;font:inherit;padding:0;}

.tabbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:28px;position:sticky;top:0;z-index:5;padding:8px 0;background:linear-gradient(180deg, rgba(6,11,30,0.94), rgba(6,11,30,0.7) 80%, transparent);backdrop-filter:blur(4px);}
.tabbtn{flex:1 1 150px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-muted);background:var(--panel);border:1px solid var(--line);padding:9px 16px;border-radius:100px;cursor:pointer;transition:all .15s ease;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tabbtn:hover{color:var(--ink);border-color:var(--line-strong);}
.tabbtn.active{color:var(--bg-deep);background:var(--gold-soft);border-color:transparent;}
.panel[hidden]{display:none;}
.hero{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;}
.hero-compact{margin-bottom:24px;}
.eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;}
.hero h1{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(28px,4.6vw,44px);letter-spacing:.01em;line-height:1.1;}
.hero p{max-width:68ch;color:var(--ink-muted);font-size:clamp(14px,1.5vw,16px);line-height:1.6;}
.level-list{display:flex;flex-direction:column;gap:6px;}
.level-row{display:flex;gap:8px;flex-wrap:wrap;max-width:68ch;color:var(--ink-muted);font-size:clamp(13.5px,1.4vw,15px);line-height:1.5;}
.level-row strong{color:var(--ink);font-weight:600;flex-shrink:0;}
.setup-banner{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;background:linear-gradient(180deg, rgba(229,184,75,0.13), rgba(229,184,75,0.05));border:1px solid rgba(229,184,75,0.32);border-radius:var(--radius-sm);margin-top:4px;}
.setup-banner[hidden]{display:none;}.setup-banner svg{flex-shrink:0;margin-top:2px;color:var(--warn);}
.setup-banner .t{font-size:14px;font-weight:600;color:var(--gold-soft);margin-bottom:3px;}
.setup-banner .d{font-size:13.5px;color:var(--ink-muted);line-height:1.55;max-width:70ch;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:34px 0 16px;}
.section-head h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(20px,2.4vw,24px);letter-spacing:.01em;}
.section-head span{font-size:12.5px;color:var(--ink-faint);letter-spacing:.03em;}
/* 2026-09-29: Portal Settings — collapsed-by-default section, click the
   heading to reveal its controls, so a tile with many sections (or many
   forms within one) shows only headings at first instead of every
   setting stacked open. .admin-section = a top-level settings section
   within a tile-view (e.g. "Update Staff Information"); .admin-collapsible
   = one item in a list of many (per-form access rows, per-info-type
   blocks) — same mechanism, denser presentation to suit a list context. */
.admin-section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin:14px 0;overflow:hidden;}
.admin-section summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:19px;color:var(--ink);letter-spacing:.01em;}
.admin-section summary::-webkit-details-marker{display:none;}
.admin-section summary::after{content:'+';font-family:inherit;font-size:20px;color:var(--ink-faint);flex:none;}
.admin-section[open] summary::after{content:'\2212';}
.admin-section summary:hover{color:var(--gold-soft);}
.admin-section summary:hover::after{color:var(--gold-soft);}
.admin-section-body{padding:0 18px 18px;display:flex;flex-direction:column;gap:12px;}
.admin-collapsible{background:var(--panel-solid);}
.admin-collapsible summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;font-size:13.5px;color:var(--ink);}
.admin-collapsible summary::-webkit-details-marker{display:none;}
.admin-collapsible summary::after{content:'+';font-size:15px;color:var(--ink-faint);flex:none;}
.admin-collapsible[open] summary::after{content:'\2212';}
.admin-collapsible summary:hover{color:var(--gold-soft);}
.admin-collapsible-body{padding:0 16px 14px;display:flex;flex-direction:column;gap:10px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:16px;margin-bottom:8px;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 18px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;gap:12px;}
.card:hover,.card:focus-visible{background:var(--panel-hover);border-color:var(--line-strong);transform:translateY(-2px);box-shadow:var(--shadow);}
.card-top{display:flex;align-items:center;justify-content:space-between;}
.mini-icon{border-radius:50%;display:block;}
.card-status{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:100px;color:var(--ink-faint);background:rgba(255,255,255,0.06);border:1px solid var(--line);}
.card-status.is-live{color:var(--good-ink);background:var(--good);border-color:transparent;}
.card-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:21px;color:var(--gold-soft);letter-spacing:.01em;}
.card-blurb{font-size:13.5px;line-height:1.55;color:var(--ink-muted);flex-grow:1;}
.card-stats{display:flex;gap:16px;padding-top:6px;border-top:1px solid var(--line);flex-wrap:wrap;}
.stat{display:flex;flex-direction:column;gap:2px;}.stat-v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);}
.stat-l{font-size:10.5px;color:var(--ink-faint);letter-spacing:.02em;}
.card-cta{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:var(--gold-soft);padding-top:4px;}
.card-cta svg{transition:transform .18s ease;}.card:hover .card-cta svg{transform:translate(2px,-2px);}
.entity-card{display:flex;align-items:center;gap:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;flex-wrap:wrap;}
.entity-card:hover,.entity-card:focus-visible{background:var(--panel-hover);border-color:var(--line-strong);transform:translateY(-2px);}
.entity-card img{height:44px;width:auto;flex-shrink:0;}.entity-text{flex-grow:1;min-width:220px;}
.entity-text h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:20px;color:var(--gold-soft);margin-bottom:4px;}
.entity-text p{font-size:13.5px;color:var(--ink-muted);line-height:1.55;max-width:60ch;}
.card-admin{width:100%;display:flex;gap:8px;align-items:center;margin-top:6px;padding-top:12px;border-top:1px dashed var(--line);cursor:default;}
.card-admin label{font-size:11px;color:var(--ink-faint);flex-shrink:0;}
.embed-input{flex-grow:1;min-width:0;background:rgba(0,0,0,0.25);border:1px solid var(--line);color:var(--ink);font-size:12px;padding:6px 9px;border-radius:6px;}

.form-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-bottom:8px;align-items:start;}
.panel-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:12px;backdrop-filter:blur(6px);}
.panel-card-wide{margin-bottom:18px;}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px 22px;}
.kv-item{display:flex;flex-direction:column;gap:4px;min-width:0;}
.kv-item .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
.kv-item .v{font-size:14px;color:var(--ink);word-break:break-word;}
.my-details-card[hidden],.my-details-empty[hidden]{display:none!important;}
.field{display:flex;flex-direction:column;gap:5px;}
/* Same recurring bug as .btn[hidden]/.verify-card[hidden] above: .field sets
   its own display, so without this override "hidden" silently does nothing.
   Found while adding the verify.html resend field — it was already live on
   the Reminders form's audience department/user pickers (#reminderDeptField,
   #reminderUserField), which were always visible regardless of the chosen
   audience. Fixed here for every .field at once, not just the new one. */
.field[hidden]{display:none!important;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* Project Reporting (2026-10-02) — Bernard: make the on-screen form match
   the first page of the exported PDF/Word doc, i.e. a bordered label/value
   table (drawFieldRow's look in the PDF), not plain stacked fields. Same
   "1px gap + line-colour background = hairline borders" trick .repeater
   already uses, so it stays visually consistent with every other table
   this app draws, just in the app's own dark theme rather than a literal
   white page. */
.doc-field-table{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:12px;}
.doc-field-table.cols-1{grid-template-columns:1fr;}
.doc-field-cell{background:var(--panel-solid);padding:8px 12px;display:flex;flex-direction:column;gap:3px;}
.doc-field-cell label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);}
.doc-field-cell input,.doc-field-cell select{border:none!important;background:transparent!important;padding:2px 0;font-size:14px;color:var(--ink);border-radius:0;}
.doc-field-cell input:focus,.doc-field-cell select:focus{outline:1px solid var(--gold-soft);outline-offset:2px;}
@media (max-width:640px){.doc-field-table{grid-template-columns:1fr;}}
label{font-size:12.5px;color:var(--ink-muted);font-weight:600;}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=email],input[type=password],input[type=search],input:not([type]),textarea,select{
background:rgba(0,0,0,0.22);border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:14px;padding:9px 11px;border-radius:8px;width:100%;}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold-soft);outline-offset:1px;border-color:transparent;}
textarea{resize:vertical;font-family:inherit;}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-muted);font-weight:400;}
.check input{width:auto;}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;}
.btn{font-family:inherit;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:opacity .15s ease,background .15s ease;align-self:flex-start;text-decoration:none;display:inline-block;}
.btn[hidden]{display:none!important;}
.btn-primary{background:var(--gold-soft);color:var(--bg-deep);}.btn-primary:hover{opacity:.88;}
.btn-primary:disabled{opacity:.5;cursor:default;}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink-muted);}.btn-ghost:hover{color:var(--ink);border-color:var(--gold-soft);}
.btn-sm{padding:6px 13px;font-size:12px;}
.form-result{font-size:13px;min-height:1px;}
.form-result.ok{color:var(--good);}.form-result.err{color:var(--danger);}
.canteen-snapshot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:10px;}
.canteen-snapshot-stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:6px;}
.canteen-snapshot-stat-highlight{border-color:rgba(203,168,110,0.45);}
.canteen-snapshot-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);}
.canteen-snapshot-value{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:26px;color:var(--gold-soft);}
.canteen-snapshot-stat input{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:22px;color:var(--gold-soft);background:transparent;border:none;border-bottom:1px solid var(--line-strong);border-radius:0;padding:2px 0;}
.canteen-snapshot-stat input:focus{outline:none;border-bottom-color:var(--gold-soft);}
.privacy-note{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--ink-faint);line-height:1.5;margin:0;padding-top:6px;border-top:1px dashed var(--line);}
.table-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--panel-solid);padding:12px 16px;flex-wrap:wrap;}
.row[hidden]{display:none;}
.row-btn{width:100%;box-sizing:border-box;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .15s ease;}
.row-btn:hover{background:rgba(255,255,255,0.05);}
.field label em{font-style:normal;font-weight:400;font-size:11px;color:var(--ink-faint);margin-left:4px;}
.row-main{display:flex;flex-direction:column;gap:2px;min-width:0;}.row-main strong{font-size:13.5px;color:var(--ink);}
.row-main span{font-size:12.5px;color:var(--ink-muted);}
.row-side{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-muted);flex-wrap:wrap;}
.form-number-badge{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--gold-soft);background:rgba(203,168,110,0.12);border:1px solid rgba(203,168,110,0.35);border-radius:4px;padding:1px 6px;}
.leave-card-details .form-number-badge{align-self:flex-start;margin-bottom:2px;}
.leave-card{display:flex;gap:20px;background:var(--panel-solid);padding:14px 16px;flex-wrap:wrap;}
.leave-card-details{flex:1 1 260px;min-width:200px;display:flex;flex-direction:column;gap:4px;}
.leave-card-details strong{font-size:13.5px;color:var(--ink);}
.leave-card-details span{font-size:12.5px;color:var(--ink-muted);}
.leave-card-details .badge{align-self:flex-start;margin-top:2px;}
.leave-card-actions{flex:1 1 260px;min-width:220px;display:flex;flex-direction:column;gap:8px;justify-content:center;}
/* 2026-09-29: the full application layout (renderLeaveRequestLayout) inlined
   on a Leave Approvals card — boxed off from the compact badges above it so
   the two don't visually run together. */
.leave-card-layout{background:rgba(0,0,0,0.16);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;margin:4px 0;}
.leave-card-layout .submission-field-row{font-size:12.5px;}
.leave-card-layout .submission-subtable{font-size:12px;}
.leave-action-line{display:flex;gap:8px;align-items:center;}
.leave-action-line input{flex:1;min-width:0;}
.leave-action-line button{flex-shrink:0;}
.leave-trail{display:flex;flex-direction:column;gap:2px;margin-top:2px;}
.leave-trail span{font-size:12px;color:var(--ink-faint);}
.muted{color:var(--ink-faint);}
.badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:100px;background:rgba(255,255,255,0.08);color:var(--ink-muted);border:1px solid var(--line);white-space:nowrap;}
.badge.tag-green{background:rgba(87,214,172,0.16);color:var(--good);border-color:transparent;}
.badge.tag-yellow{background:rgba(229,184,75,0.18);color:var(--warn);border-color:transparent;}
.badge.tag-red{background:rgba(226,100,91,0.18);color:var(--danger);border-color:transparent;}
.progress{width:70px;height:6px;border-radius:100px;background:rgba(255,255,255,0.1);overflow:hidden;}
.progress-fill{height:100%;background:var(--gold-soft);}
.empty-row{padding:16px;font-size:13px;color:var(--ink-faint);background:var(--panel-solid);border:1px dashed var(--line);border-radius:var(--radius-sm);}
/* owner-only = admin (not dept_admin) only. JS sets [hidden] on these based on
   role; [hidden] loses to these elements' own unconditional display rules
   (same cascade gotcha as .row[hidden]/.gr-line-row[hidden] elsewhere —
   author CSS always beats the browser's own "[hidden]{display:none}") unless
   restated here with higher specificity. */
.owner-only[hidden]{display:none!important;}
.card-admin[hidden]{display:none!important;}
.card[hidden]{display:none!important;}
.users-row{align-items:center;}
.users-row select{width:auto;padding:8px 10px;font-size:13px;}
.users-row .row-side{flex-wrap:wrap;gap:8px;}
.you-tag{font-size:11px;color:var(--ink-faint);font-weight:600;letter-spacing:.02em;}
.form-notif-block{display:flex;flex-direction:column;gap:8px;width:100%;}
.form-notif-block>strong{font-size:13.5px;color:var(--ink);}
.form-notif-access{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;}
.form-notif-access select{width:auto;padding:6px 9px;font-size:12.5px;}
.form-notif-recipients{display:flex;flex-direction:column;gap:6px;}
.form-notif-recipient-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,0.04);border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 10px;font-size:12.5px;flex-wrap:wrap;}
.field-suggest-anchor{position:relative;}

/* Save buttons on both the level row and the departments row line up on
   the same right edge (2026-09-24) instead of sitting immediately after
   whatever width their own row's content happens to be. */
.form-notif-save-btn{margin-left:auto;flex:none;}

/* Per-department access restriction (2026-09-12), a checklist sitting under
   the existing level dropdown on the same .form-notif-access-style row.
   2026-09-24: a fixed-column grid (6 columns -> 3 even rows for the 17
   departments) so checkboxes line up cleanly instead of ragged flex-wrap. */
.access-dept-row{align-items:flex-start;}
.access-dept-checks{display:grid;grid-template-columns:repeat(6,minmax(0,auto));gap:6px 16px;flex:1 1 auto;}
.access-dept-check{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:400;color:var(--ink);cursor:pointer;white-space:nowrap;}
.access-dept-check input{margin:0;}
@media (max-width:900px){
  .access-dept-checks{grid-template-columns:repeat(3,minmax(0,auto));}
}
@media (max-width:560px){
  .access-dept-checks{grid-template-columns:repeat(2,minmax(0,auto));}
}

/* On-screen signature capture (2026-09-08) */
.signature-block{display:flex;flex-direction:column;gap:8px;margin:14px 0;}
.signature-block>label{font-size:13px;font-weight:600;color:var(--ink);}
.signature-block .req-mark{color:var(--danger);}
.signature-pad-wrap{border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;display:inline-block;max-width:100%;}
.signature-pad-canvas{display:block;width:100%;max-width:480px;height:150px;touch-action:none;cursor:crosshair;border-radius:var(--radius-sm);}
.signature-pad-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.signature-pad-hint{font-size:12px;}
.submission-signature-image{max-width:280px;max-height:110px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:4px;}
.submission-attachment-list{display:flex;flex-direction:column;gap:4px;}
.submission-attachment-link{color:var(--gold);text-decoration:underline;cursor:pointer;}
/* Uploaded photos on a submission (2026-10-14) */
.submission-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:6px;}
.submission-photo-thumb{display:block;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,0.04);overflow:hidden;cursor:zoom-in;}
.submission-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.submission-photo-thumb.missing{cursor:default;opacity:.5;}
.submission-photo-thumb.missing img{visibility:hidden;}
.photo-lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.88);display:flex;align-items:center;justify-content:center;padding:24px;}
.photo-lightbox[hidden]{display:none;}
.photo-lightbox figure{margin:0;max-width:calc(100vw - 120px);max-height:calc(100vh - 48px);display:flex;flex-direction:column;align-items:center;gap:8px;}
.photo-lightbox img{max-width:100%;max-height:calc(100vh - 100px);object-fit:contain;border-radius:6px;background:#111;}
.photo-lightbox figcaption{color:#e8e8e8;font-size:13px;}
.photo-lightbox-close{position:absolute;top:12px;right:16px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;}
.photo-lightbox-nav{background:rgba(255,255,255,0.12);border:0;color:#fff;font-size:34px;line-height:1;width:44px;height:64px;border-radius:10px;cursor:pointer;flex:none;}
.photo-lightbox-nav:hover{background:rgba(255,255,255,0.22);}
@media (max-width:640px){.photo-lightbox{padding:8px;}.photo-lightbox figure{max-width:calc(100vw - 96px);}.photo-lightbox-nav{width:34px;height:52px;font-size:28px;}.submission-photo-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}}
.viewer{margin-top:36px;border-top:1px solid var(--line);padding-top:24px;}.viewer[hidden]{display:none;}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.viewer-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-muted);background:none;border:1px solid var(--line);padding:8px 14px;border-radius:100px;cursor:pointer;}
.viewer-back:hover{color:var(--ink);border-color:var(--line-strong);}
.viewer-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:500;color:var(--ink);flex-grow:1;text-align:center;}
.viewer-open{font-size:13px;font-weight:600;color:var(--gold-soft);border:1px solid rgba(203,168,110,0.35);padding:8px 14px;border-radius:100px;text-decoration:none;}
.viewer-open[hidden]{visibility:hidden;}
.viewer-frame-wrap{position:relative;width:100%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel-solid);aspect-ratio:16/10;}
.viewer-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.viewer-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:24px;}
.viewer-empty svg{color:var(--ink-faint);}.viewer-empty .t{font-size:15px;font-weight:600;color:var(--ink-muted);}
.viewer-empty .d{font-size:13px;color:var(--ink-faint);max-width:44ch;line-height:1.6;}
footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);}footer p{font-size:12px;color:var(--ink-faint);line-height:1.6;max-width:80ch;}
details.admin summary{cursor:pointer;font-weight:600;color:var(--ink-muted);list-style:none;display:inline-flex;align-items:center;gap:6px;margin-top:8px;}
details.admin summary::-webkit-details-marker{display:none;}details.admin summary:hover{color:var(--ink);}
.admin-panel{margin-top:14px;padding:18px 20px;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius-sm);max-width:640px;font-size:13px;line-height:1.65;color:var(--ink-muted);}
.admin-panel h4{font-size:13px;color:var(--ink);margin:16px 0 6px;}.admin-panel h4:first-child{margin-top:0;}
.admin-panel ol{margin:0 0 6px;padding-left:20px;}.admin-panel code{background:rgba(255,255,255,0.08);padding:1px 6px;border-radius:5px;font-size:12px;}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel-solid);border:1px solid var(--line-strong);color:var(--ink);padding:12px 20px;border-radius:100px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);z-index:50;}
.toast[hidden]{display:none;}.toast.err{border-color:rgba(226,100,91,0.5);color:#ffd3cf;}
.update-banner{position:fixed;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:var(--panel-solid);border:1px solid var(--gold-soft);color:var(--ink);padding:12px 16px;border-radius:14px;box-shadow:var(--shadow);z-index:60;max-width:calc(100vw - 32px);}
.update-banner[hidden]{display:none;}
.update-banner svg{color:var(--gold-soft);flex:none;}
.update-banner-text{min-width:0;}
.update-banner-text .t{font-size:13.5px;font-weight:600;}
.update-banner-text .d{font-size:12px;color:var(--ink-muted);}
.update-banner .btn{flex:none;align-self:center;}
@media (max-width:640px){.update-banner{left:16px;right:16px;transform:none;max-width:none;}}
/* Push-notification prompt — same look as the update banner; sits just below it if both are showing */
.push-banner{z-index:59;}
.update-banner:not([hidden]) ~ .push-banner{top:84px;}
.push-banner .push-banner-actions{display:flex;gap:8px;flex:none;align-self:center;}
@media (max-width:640px){.push-banner{flex-wrap:wrap;}.push-banner .update-banner-text{flex:1 1 180px;}.push-banner .push-banner-actions{width:100%;justify-content:flex-end;}.update-banner:not([hidden]) ~ .push-banner{top:132px;}}
@media (max-width:640px){.field-row{grid-template-columns:1fr;}.entity-card{justify-content:flex-start;}.viewer-title{order:-1;width:100%;text-align:left;}.topbar-right{width:100%;justify-content:space-between;}}

.doc-ref{font-size:11px;letter-spacing:.03em;color:var(--ink-faint);text-transform:uppercase;font-weight:600;margin-bottom:2px;}
.jsa-section{border-top:1px dashed var(--line);padding-top:16px;margin-top:4px;display:flex;flex-direction:column;gap:12px;}
.jsa-section h4{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:17px;color:var(--ink);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.jsa-section h4 span{font-family:"Inter",sans-serif;font-weight:400;font-size:11.5px;color:var(--ink-faint);text-transform:none;letter-spacing:0;}
.jsa-declaration{font-size:13px;color:var(--ink-muted);line-height:1.6;font-style:italic;}
.yn-table{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.yn-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--panel-solid);padding:10px 14px;flex-wrap:wrap;}
.yn-row span{font-size:13px;color:var(--ink-muted);flex:1;min-width:200px;}
.yn-pair{display:flex;gap:14px;flex-shrink:0;}
.yn-pair-labelled{flex-direction:column;gap:8px;align-items:flex-start;}
.yn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;}
.yn input{width:auto;}
.ltt{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.ltt-row{display:grid;grid-template-columns:1fr 110px 110px;gap:10px;align-items:center;background:var(--panel-solid);padding:8px 14px;}
.ltt-row.ltt-head{background:rgba(255,255,255,0.04);font-size:11px;font-weight:600;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;padding:8px 14px;}
.ltt-label{font-size:13px;color:var(--ink-muted);}.ltt-label em{color:var(--ink-faint);font-style:normal;font-size:11.5px;}
.ltt-autocalc-check{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:inherit;color:inherit;font-weight:400;}
.ltt-autocalc-check input{width:auto;flex:none;}
.ltt-row input{padding:6px 8px;font-size:13px;}
.ltt-cell{display:contents;}.ltt-mobile-label{display:none;}
.approval-note{background:rgba(255,255,255,0.03);border:1px dashed var(--line);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:8px;}
.approval-note strong{font-size:12px;color:var(--ink-muted);font-weight:600;}
.approval-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-faint);}
.repeater{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.repeater-head{display:grid;gap:8px;background:rgba(255,255,255,0.04);padding:8px 12px;font-size:11px;font-weight:600;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;}
.repeater-head span:last-child{width:26px;}
.repeater-head.cols-3{grid-template-columns:1fr 1fr 1fr 26px;}.repeater-head.cols-2{grid-template-columns:1fr 1fr 26px;}
.repeater-head.cols-4{grid-template-columns:1fr 1fr 1fr 1fr 26px;}
.repeater-head.cols-6{grid-template-columns:.5fr .8fr 1fr 1.2fr 1fr 1.4fr 26px;}
.repeater-rows{display:flex;flex-direction:column;gap:1px;}
.repeater-row{display:grid;gap:8px;background:var(--panel-solid);padding:8px 12px;align-items:center;}
.repeater-row.cols-3{grid-template-columns:1fr 1fr 1fr 26px;}.repeater-row.cols-2{grid-template-columns:1fr 1fr 26px;}
.repeater-row.cols-4{grid-template-columns:1fr 1fr 1fr 1fr 26px;}
.repeater-row.cols-6{grid-template-columns:.5fr .8fr 1fr 1.2fr 1fr 1.4fr 26px;}
.repeater-row input,.repeater-row select{padding:7px 9px;font-size:13px;}
.repeater .btn{margin:10px 12px 12px;align-self:flex-start;}
.row-remove{background:none;border:1px solid var(--line);color:var(--ink-faint);width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}
.row-remove:hover{color:var(--danger);border-color:var(--danger);}
@media (max-width:640px){.repeater-head,.repeater-row{grid-template-columns:1fr !important;} .repeater-head span:last-child{display:none;} .ltt-row{grid-template-columns:1fr;} .ltt-row.ltt-head{display:none;} .ltt-row input{margin-top:2px;}
.ltt-cell{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;} .ltt-mobile-label{display:inline;font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;} .ltt-cell input{flex:0 0 90px;}}

/* JSA crew "everyone listed must physically sign" (2026-09-12) */
.crew-sign-note{margin:0 0 8px;font-size:12.5px;}
.crew-sig-cell{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.crew-sig-thumb{height:28px;max-width:76px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:4px;padding:2px;}
.crew-sig-status{font-size:12px;white-space:nowrap;}
.crew-sig-status.ok{color:var(--good);font-weight:600;}
.crew-row.crew-row-missing{box-shadow:inset 3px 0 0 var(--danger);}
.crew-row.crew-row-missing .crew-sig-status{color:var(--danger);font-weight:600;}

/* HSE tile grid */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:8px;}
.tile-grid[hidden]{display:none!important;}
.tile-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .15s ease,transform .1s ease;}
.tile-card:hover{border-color:var(--gold-soft);transform:translateY(-1px);}
.tile-card-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:17px;}
.tile-card-sub{font-size:11.5px;color:var(--ink-faint);}
.tile-card[hidden]{display:none!important;}
.tile-view[hidden]{display:none!important;}
.tile-back{margin-bottom:14px;}

/* Reminder banner */
.reminder-banner{display:flex;flex-direction:column;gap:8px;padding:12px 24px;background:rgba(229,184,75,0.1);border-bottom:1px solid rgba(229,184,75,0.3);}
.reminder-banner[hidden]{display:none!important;}
.reminder-item{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink);}
.reminder-item strong{font-weight:600;}
.reminder-item .muted{font-size:12px;}
.reminder-item-actions{display:flex;gap:8px;flex-shrink:0;}

.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;}
.auth-screen[hidden]{display:none;}
.auth-card{width:100%;max-width:420px;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow);}
.auth-brand{display:flex;justify-content:center;padding-bottom:10px;}.auth-brand img{height:56px;width:auto;max-width:100%;}
.auth-tabs{display:flex;gap:6px;background:rgba(0,0,0,0.22);border-radius:100px;padding:4px;}.auth-tabs[hidden]{display:none!important;}
.auth-tabbtn{flex:1;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-muted);background:transparent;border:0;padding:9px 10px;border-radius:100px;cursor:pointer;transition:all .15s ease;}
.auth-tabbtn.active{color:var(--bg-deep);background:var(--gold-soft);}
.oauth-row{display:flex;flex-direction:column;gap:8px;}
.btn-oauth{display:flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:rgba(255,255,255,0.03);border:1px solid var(--line-strong);padding:10px 14px;border-radius:100px;cursor:pointer;transition:background .15s ease,border-color .15s ease;}
.btn-oauth:hover{background:rgba(255,255,255,0.07);border-color:var(--gold-soft);}
.btn-oauth:disabled{opacity:.6;cursor:default;}
.btn-oauth svg{flex:none;}
.oauth-divider{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-faint);}
.oauth-divider::before,.oauth-divider::after{content:'';flex:1;height:1px;background:var(--line);}
.auth-form{display:flex;flex-direction:column;gap:12px;}.auth-form[hidden]{display:none;}
.auth-form .btn{align-self:stretch;text-align:center;}
.auth-error{font-size:12.5px;color:var(--danger);min-height:1px;}
.auth-error.ok{color:var(--good);}
.auth-card .privacy-note{border-top:1px dashed var(--line);padding-top:12px;}
.home-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(203,168,110,0.12);color:var(--gold-soft);border:1px solid rgba(203,168,110,0.3);}
.home-icon img{border-radius:50%;width:22px;height:22px;}
.identity-chip .logout-btn{color:var(--ink-faint);text-decoration:underline;cursor:pointer;background:none;border:0;font:inherit;padding:0;font-size:inherit;}
.auth-card .install-btn{align-self:center;}
.auth-legal-link{align-self:center;margin-top:4px;padding-top:14px;border-top:1px dashed var(--line);width:100%;text-align:center;color:var(--ink-faint);text-decoration:none;font-weight:600;border-radius:0;background:none;}
.auth-legal-link:hover{color:var(--gold-soft);}
@media (max-width:480px){.auth-card{padding:24px 18px;}}

.verify-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;margin:4px auto 6px;}
.verify-icon.ok{background:rgba(87,214,172,0.14);color:var(--good);}
.verify-icon.err{background:rgba(226,100,91,0.14);color:var(--danger);}
.verify-icon.pending{background:rgba(203,168,110,0.14);color:var(--gold-soft);}
.verify-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:24px;text-align:center;color:var(--ink);}
.verify-body{font-size:14px;line-height:1.6;color:var(--ink-muted);text-align:center;}
.verify-card .btn{align-self:center;margin-top:6px;}
.verify-card{display:flex;flex-direction:column;gap:6px;}.verify-card[hidden]{display:none!important;}

.auth-eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);text-align:center;font-weight:700;}
.verify-banner{border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;line-height:1.55;text-align:left;}
.verify-banner.ok{background:rgba(87,214,172,0.14);color:var(--good);border:1px solid rgba(87,214,172,0.3);}
.verify-banner.err{background:rgba(226,100,91,0.14);color:var(--danger);border:1px solid rgba(226,100,91,0.3);}
.auth-link-back{align-self:center;margin-top:2px;color:var(--gold-soft);text-decoration:underline;font-weight:600;font-size:13.5px;}
.auth-link-back:hover{color:var(--gold);}
/* Same [hidden]-override pattern as .auth-form/.verify-card above — this row
   sets display:flex, so it needs its own [hidden] rule or it'll silently stay
   visible even while "hidden" (see the install-button and leave-card bugs). */
.login-resend-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.login-resend-row[hidden]{display:none!important;}
.auth-subnote{font-size:12.5px;line-height:1.5;color:var(--ink-muted);text-align:center;background:rgba(226,232,248,0.05);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;margin:0 0 2px;}
.auth-subnote strong{color:var(--gold-soft);}
.field-hint{font-size:11.5px;color:var(--ink-faint);}

/* ---- 2026-09-01: Vehicle Checking, Production, ISO 9001 / Work
   Instructions, Shipyard Closing. Every new element below that carries a
   `hidden` attribute AND its own non-block `display` gets an explicit
   [hidden] override next to it — the same silent-override-of-hidden bug
   class has bitten this codebase five separate times already (install
   button, leave-card rows, auth form, verify card, Reminders .field), so
   every new one is paired deliberately rather than left to be found live. */

.vehicle-check-preview{display:flex;align-items:center;gap:14px;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;margin:4px 0 8px;}
.vehicle-check-preview[hidden]{display:none!important;}
.vehicle-check-preview img{width:96px;height:auto;flex:none;}
.vehicle-check-preview-info strong{font-size:14px;}
.vehicle-check-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line);}
.vehicle-check-row:last-child{border-bottom:0;}
.vehicle-check-row-label{flex:1 1 180px;font-size:13px;color:var(--ink);}
.vehicle-check-row select{padding:6px 8px;font-size:13px;}
.vehicle-check-comment{flex:1 1 220px;padding:6px 8px;font-size:12.5px;}

.production-log-list .row{align-items:flex-start;}
.production-log-thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--radius-sm);background:var(--panel-solid);border:1px solid var(--line);flex:none;}
.production-log-thumb:not([src]){opacity:0;}

/* Compact two-line layout (2026-09-24): line 1 is name/number/revision/
   status, line 2 is just the department — replaces the earlier 4-line
   grid so each row takes noticeably less vertical space in the list. */
.iso-doc-row{cursor:pointer;display:flex;flex-direction:column;gap:4px;background:var(--panel-solid);padding:10px 16px;}
.iso-doc-row:hover{background:rgba(255,255,255,0.05);}
.iso-doc-line1{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.iso-doc-line2{display:flex;}
.iso-doc-col-title{font-size:13.5px;font-weight:600;color:var(--ink);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.iso-doc-col-number{font-size:12px;font-weight:600;color:var(--ink-muted);flex:none;}
.iso-doc-col-revision{font-size:12px;color:var(--ink-muted);flex:none;}
.iso-doc-col-status{flex:none;margin-left:auto;}
.iso-doc-col-department{font-size:12px;}
@media (max-width:520px){
  .iso-doc-col-title{flex:1 1 100%;white-space:normal;order:-1;}
  .iso-doc-col-status{margin-left:0;}
}
.iso-doc-frame{width:100%;height:70vh;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;}
.iso-doc-file-input{font-size:12px;max-width:180px;}

.iso-doc-html{max-height:70vh;overflow:auto;padding:24px 28px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:#1a1a1a;font-size:14.5px;line-height:1.6;}
.iso-doc-html img{max-width:100%;height:auto;}
.iso-doc-html table{border-collapse:collapse;margin:12px 0;}
.iso-doc-html table td,.iso-doc-html table th{border:1px solid #ccc;padding:6px 10px;}
.iso-doc-html h1,.iso-doc-html h2,.iso-doc-html h3{color:#111;}
.iso-doc-html a{color:#1554b3;}

.iso-doc-xlsx{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden;}
.iso-doc-sheet-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:12px 12px 0;background:var(--panel-solid);}
.iso-doc-sheet-tabs .cs-pill{padding:6px 14px;font-size:12px;}
.iso-doc-table-wrap{max-height:65vh;overflow:auto;padding:12px;}
.iso-doc-table{border-collapse:collapse;font-size:13px;color:#1a1a1a;}
.iso-doc-table td,.iso-doc-table th{border:1px solid #ddd;padding:5px 10px;white-space:nowrap;}
.iso-doc-table tr:first-child{font-weight:600;background:#f2f2f2;}

.vessel-closing-row{display:flex !important;flex-wrap:wrap;gap:8px 12px;align-items:center;}
.vessel-closing-row select{padding:6px 8px;font-size:12.5px;}
.vessel-closing-row .vehicle-check-row-label{flex:none;font-size:12px;}

/* Goods Receiving — order list rows, and the review/receiving line-item
   grids (thumbnail + description + editable quantity). */
.gr-order-row{cursor:pointer;}
.gr-order-row:hover{background:rgba(255,255,255,0.05);}
.gr-lines{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);margin:8px 0;}
.gr-line-row{display:flex;align-items:center;gap:12px;background:var(--panel-solid);padding:10px 14px;flex-wrap:wrap;}
.gr-line-row[hidden]{display:none;}
.gr-line-thumb{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--line);flex:none;}
.gr-line-thumb:not([src]){opacity:0;}
.gr-line-desc{flex:1 1 260px;min-width:0;font-size:12.5px;color:var(--ink);white-space:pre-line;}
.gr-line-desc textarea{width:100%;min-height:44px;font-size:12.5px;}
.gr-line-qty{flex:none;display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--ink-faint);}
.gr-line-qty input{width:72px;padding:6px 8px;font-size:13px;}
.gr-line-remove{flex:none;}
.gr-line-progress{font-size:11.5px;color:var(--ink-muted);}
.gr-line-thumb{cursor:zoom-in;}
.gr-line-quote-qty{flex:none;display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--ink-faint);text-align:center;}
.gr-line-quote-qty strong{font-size:15px;color:var(--ink);font-weight:600;}

.gr-lightbox{position:fixed;inset:0;background:rgba(10,10,12,0.86);display:flex;align-items:center;justify-content:center;z-index:80;padding:32px;}
.gr-lightbox[hidden]{display:none!important;}
.gr-lightbox img{max-width:min(90vw,900px);max-height:86vh;object-fit:contain;background:#fff;border-radius:var(--radius-sm);box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.gr-lightbox-close{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:100px;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);color:#fff;font-size:22px;line-height:1;cursor:pointer;}
.gr-lightbox-close:hover{background:rgba(255,255,255,0.18);}
@media (max-width:640px){
  .gr-line-row{flex-direction:column;align-items:flex-start;}
  .gr-line-thumb{width:64px;height:64px;}
}

/* --- view / re-download past form submissions (2026-09-07) --- */
.row-actions{display:flex;gap:6px;}
.row-action-btn{font-family:inherit;font-size:11.5px;font-weight:600;color:var(--ink-muted);background:transparent;border:1px solid var(--line-strong);padding:4px 10px;border-radius:100px;cursor:pointer;transition:all .15s ease;white-space:nowrap;}
.row-action-btn:hover{color:var(--ink);border-color:var(--gold-soft);}
.row-action-btn:disabled{opacity:.5;cursor:default;}

.submission-modal-overlay{position:fixed;inset:0;background:rgba(6,11,30,0.72);display:flex;align-items:center;justify-content:center;z-index:80;padding:24px;}
.submission-modal-overlay[hidden]{display:none!important;}
.submission-modal{background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:var(--radius);width:min(640px,100%);max-height:86vh;display:flex;flex-direction:column;box-shadow:var(--shadow);}
.submission-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line);}
.submission-modal-head h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:19px;color:var(--gold-soft);margin:0 0 2px;}
.submission-modal-actions{display:flex;align-items:center;gap:8px;flex:none;}
.submission-modal-close{width:32px;height:32px;border-radius:100px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-muted);font-size:18px;line-height:1;cursor:pointer;}
.submission-modal-close:hover{color:var(--ink);border-color:var(--gold-soft);}
.submission-modal-body{padding:16px 20px 20px;overflow-y:auto;}
.submission-field-row{display:flex;gap:14px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px;}
.submission-field-row:last-child{border-bottom:none;}

/* Form approval routing (2026-09-15) */
.submission-modal-footer{padding:14px 20px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;flex:none;}
.approval-banner-title{font-weight:600;font-size:13px;color:var(--gold-soft);}
.approval-routing-block{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px dashed var(--line);}
.approval-sign-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* --- full-screen signature capture (2026-09-12: "the signature must be a
   pop up screen that cover the entire tablet screen for better signature")
   Deliberately edge-to-edge with no padding or rounded card like the other
   modals above — every pixel of the tablet screen should be usable for the
   actual signature, with only a slim dark header/footer for controls
   around a plain white "paper" drawing surface in between. z-index is
   higher than every other overlay on the site so it always wins even if
   somehow triggered from within another modal. */
body.signature-modal-open{overflow:hidden;}
.signature-modal-overlay{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:#fff;}
.signature-modal{flex:1;display:flex;flex-direction:column;min-height:0;}
.signature-modal-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--panel-solid);border-bottom:1px solid var(--line-strong);}
.signature-modal-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:18px;color:var(--gold-soft);}
.signature-modal-canvas-wrap{flex:1;min-height:0;position:relative;background:#fff;touch-action:none;}
.signature-modal-canvas{position:absolute;inset:0;display:block;cursor:crosshair;}
.signature-modal-msg{flex:none;min-height:20px;padding:6px 18px 0;font-size:12.5px;color:var(--danger);background:var(--panel-solid);}
.signature-modal-footer{flex:none;display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--panel-solid);border-top:1px solid var(--line-strong);}
.signature-modal-hint{flex:1;text-align:center;font-size:12.5px;}
@media (max-width:640px){
  .signature-modal-footer{flex-wrap:wrap;}
  .signature-modal-hint{order:3;width:100%;}
}
/* Reuse-a-saved-signature shortcut and "type instead" mode (2026-09-16) —
   see openSignatureModal() in app.js. Reuse panel replaces the pad until
   "Draw a new one instead" is clicked; the type tab swaps the canvas pad
   for a text input rendered in a cursive font, same PNG export either way. */
.signature-modal-reuse{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 18px;background:#fff;}
.signature-modal-reuse-img{max-width:320px;max-height:130px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;padding:10px;object-fit:contain;}
.signature-modal-reuse-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.signature-modal-pad-section{flex:1;min-height:0;display:flex;flex-direction:column;}
.signature-modal-mode-tabs{flex:none;display:flex;background:var(--panel-solid);border-bottom:1px solid var(--line-strong);}
.signature-modal-mode-tab{flex:1;padding:10px;border:none;background:transparent;color:var(--ink-faint,#888);font-size:13px;cursor:pointer;border-bottom:2px solid transparent;}
.signature-modal-mode-tab.is-active{color:var(--gold-soft);border-bottom-color:var(--gold-soft);font-weight:600;}
.signature-modal-type-section{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:18px;background:#fff;}
.signature-modal-type-input{font-size:20px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:6px;}
.signature-modal-type-preview{flex:1;min-height:0;width:100%;border:1px dashed var(--line-strong);border-radius:6px;background:#fff;}
/* 2026-10-01: each of these four sections sets its own "display:flex" with
   no [hidden] override, and an author stylesheet rule always beats the
   browser's built-in "[hidden]{display:none}" regardless of order — so
   setting .hidden = true in JS (openSignatureModal's reuse/pad/type
   switching) was never actually hiding them. All three could render at
   once, stacked as flex:1 siblings each claiming a share of the modal's
   height: the reuse prompt, the draw pad, AND the typed-name input (pre-
   filled with the signer's name) all visible together instead of one
   clean full-height pad — reported as the signing screen feeling cramped/
   broken rather than the intended full-screen draw area. */
.signature-modal-reuse[hidden],
.signature-modal-pad-section[hidden],
.signature-modal-type-section[hidden],
.signature-modal-canvas-wrap[hidden]{display:none;}
.submission-field-row .k{flex:0 0 42%;color:var(--ink-faint);}
.submission-field-row .v{flex:1;color:var(--ink);word-break:break-word;white-space:pre-wrap;}
.submission-subtable-title{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin:16px 0 8px;}
.submission-subtable{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:6px;}
.submission-subtable th,.submission-subtable td{border:1px solid var(--line);padding:6px 8px;text-align:left;color:var(--ink-muted);}
.submission-subtable th{color:var(--ink-faint);font-weight:600;background:rgba(255,255,255,0.03);}

/* "My Team" leave overview (2026-09-24) — a real table, not the usual
   row-list pattern, since Bernard specifically asked for one with fixed
   name/surname/department/leave-type columns. */
.my-team-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px;background:var(--panel-solid);}
.my-team-table th,.my-team-table td{border:1px solid var(--line);padding:8px 12px;text-align:left;color:var(--ink);overflow-wrap:break-word;}
.my-team-table th{color:var(--ink-faint);font-weight:600;background:rgba(255,255,255,0.04);font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
.my-team-table tbody tr:hover{background:rgba(255,255,255,0.03);}
@media (max-width:760px){
  .my-team-table{display:block;overflow-x:auto;}
}
/* Finance -> Project Snapshot (2026-10-01) — ten columns of mostly
   currency/date data never fits a narrow panel, so unlike my-team-table
   this one always scrolls horizontally rather than trying table-layout:
   fixed's equal-width columns, which would crush "Contract Price" down to
   an unreadable sliver. */
.finance-projects-table-wrap{overflow-x:auto;}
.finance-projects-table{width:100%;min-width:1100px;border-collapse:collapse;font-size:13px;background:var(--panel-solid);}
.finance-projects-table th,.finance-projects-table td{border:1px solid var(--line);padding:8px 12px;text-align:left;color:var(--ink);white-space:nowrap;}
.finance-projects-table th{color:var(--ink-faint);font-weight:600;background:rgba(255,255,255,0.04);font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
.finance-projects-table tbody tr:hover{background:rgba(255,255,255,0.03);}
.finance-projects-table td.num{text-align:right;font-variant-numeric:tabular-nums;}
@media (max-width:640px){
  .submission-field-row{flex-direction:column;gap:2px;}
  .submission-field-row .k{flex:none;}
}
.vessel-closing-row [data-vessel-select]{flex:1 1 160px;font-weight:600;}

/* --- Docusign (2026-09-12) --- */
/* 2026-09-28: dashboard header (action cards + stat banners + side-by-side
   lists) styled after OpenSign's dashboard layout, reskinned to this app's
   dark/gold design tokens rather than OpenSign's light-blue look. */
.ds-actions-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:16px;}
.ds-action-card{display:flex;align-items:flex-start;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;cursor:pointer;text-decoration:none;color:inherit;font-family:inherit;text-align:left;transition:transform .18s ease,border-color .18s ease,background .18s ease;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.ds-action-card:hover,.ds-action-card:focus-visible{background:var(--panel-hover);border-color:var(--line-strong);transform:translateY(-2px);}
.ds-action-icon{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(203,168,110,0.14);color:var(--gold-soft);}
.ds-action-text{display:flex;flex-direction:column;gap:4px;}
.ds-action-text strong{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:18px;color:var(--ink);letter-spacing:.01em;}
.ds-action-text span{font-size:12.5px;line-height:1.5;color:var(--ink-muted);}

.ds-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:26px;}
.ds-stat-banner{display:flex;align-items:center;gap:14px;border-radius:var(--radius);padding:18px 20px;background:var(--panel-solid);border:1px solid var(--line);}
.ds-stat-banner-primary{background:linear-gradient(135deg,#1b2d63,#0f1a3c);border-color:rgba(203,168,110,0.35);}
.ds-stat-icon{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);color:var(--gold-soft);}
.ds-stat-text{display:flex;flex-direction:column;gap:2px;}
.ds-stat-text strong{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-muted);}
.ds-stat-value{font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;font-weight:600;color:var(--ink);line-height:1.15;}

.ds-tables-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start;}
.ds-table-head{margin:0 0 14px;flex-wrap:wrap;}
.ds-table-search{width:auto;min-width:0;flex:0 1 200px;font-size:12.5px;padding:7px 11px;}
.ds-envelope-row[hidden]{display:none;}

.ds-envelope-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);margin-bottom:8px;}
.ds-envelope-list:empty{display:none;}
.ds-envelope-row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--panel-solid);padding:12px 16px;flex-wrap:wrap;cursor:pointer;transition:background .15s ease;}
.ds-envelope-row:hover{background:rgba(255,255,255,0.05);}
.ds-envelope-row.ds-envelope-row-readonly{cursor:default;}
.ds-envelope-row.ds-envelope-row-readonly:hover{background:var(--panel-solid);}
.ds-envelope-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ds-envelope-row-main strong{font-size:13.5px;color:var(--ink);}
.ds-envelope-row-main span{font-size:12px;color:var(--ink-muted);}
.ds-envelope-row-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;}
.ds-status{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:100px;border:1px solid var(--line);color:var(--ink-faint);background:rgba(255,255,255,0.05);}
.ds-status-draft{color:var(--ink-muted);}
.ds-status-sent{color:var(--warn);border-color:rgba(229,184,75,0.35);background:rgba(229,184,75,0.12);}
.ds-status-viewed{color:var(--warn);border-color:rgba(229,184,75,0.35);background:rgba(229,184,75,0.12);}
.ds-status-completed{color:var(--good);border-color:transparent;background:rgba(87,214,172,0.16);}
.ds-status-declined,.ds-status-voided{color:var(--danger);border-color:transparent;background:rgba(226,100,91,0.16);}
.ds-status-changes_requested{color:var(--warn);border-color:rgba(229,184,75,0.4);background:rgba(229,184,75,0.16);}

.ds-document-area{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;}
.ds-document-list{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;min-width:0;}
.ds-document-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px;}
.ds-document-row-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ds-document-remove{flex:none;background:none;border:1px solid var(--line);color:var(--ink-faint);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}
.ds-document-remove:hover{color:var(--danger);border-color:var(--danger);}
.ds-document-remove.is-confirming{background:var(--danger);color:#fff;border-color:var(--danger);}

.ds-recipient-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.ds-signing-order-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted);margin-bottom:12px;cursor:pointer;}
.ds-signing-order-toggle input{margin:0;}
.ds-reminder-field{max-width:260px;margin-top:16px;}
.ds-recipient-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;}
.ds-recipient-order{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(203,168,110,0.16);color:var(--gold-soft);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.ds-recipient-row input[type=text],.ds-recipient-row input[type=email]{flex:1 1 160px;min-width:0;padding:7px 9px;font-size:13px;}
.ds-recipient-row-actions{display:flex;gap:4px;flex:none;}
.ds-recipient-name-wrap{position:relative;flex:1 1 160px;min-width:0;}
.ds-recipient-name-wrap input[type=text]{width:100%;}
.ds-recipient-order-cc{background:rgba(120,120,120,0.16);color:var(--muted);font-size:10.5px;letter-spacing:0.02em;}
.ds-recipient-role{flex:none;width:auto;padding:7px 9px;font-size:12.5px;border-radius:var(--radius-sm);}
.ds-recipient-row-cc{opacity:0.9;}
.ds-recipient-suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow);max-height:220px;overflow-y:auto;}
.ds-recipient-suggest-item{padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid var(--line);}
.ds-recipient-suggest-item:last-child{border-bottom:none;}
.ds-recipient-suggest-item:hover{background:var(--panel-hover);}
.ds-recipient-suggest-item strong{font-size:13px;color:var(--ink);font-weight:600;}
.ds-recipient-suggest-item span{font-size:11.5px;color:var(--ink-faint);}
.ds-recipient-move,.ds-recipient-remove{background:none;border:1px solid var(--line);color:var(--ink-faint);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}
.ds-recipient-move:hover{color:var(--ink);border-color:var(--gold-soft);}
.ds-recipient-remove:hover{color:var(--danger);border-color:var(--danger);}
.ds-recipient-move:disabled{opacity:.3;cursor:default;}

.ds-field-palette{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;}
.ds-field-palette select{width:auto;padding:7px 9px;font-size:12.5px;}
.ds-palette-btn{font-family:inherit;font-size:12px;font-weight:600;color:var(--ink-muted);background:var(--panel);border:1px solid var(--line);padding:7px 12px;border-radius:100px;cursor:pointer;transition:all .15s ease;}
.ds-palette-btn:hover{color:var(--ink);border-color:var(--line-strong);}
.ds-palette-btn.active{color:var(--bg-deep);background:var(--gold-soft);border-color:transparent;}

/* 2026-09-16: recipient/field-type panel + Delete/Send used to sit above
   the document — scrolling a long multi-page document meant scrolling all
   the way back up just to change the armed recipient or field type. Now a
   sticky sidebar beside the document instead; falls back to a plain
   stacked (non-sticky) layout on narrow screens. */
.ds-fields-layout{display:flex;gap:24px;align-items:flex-start;}
.ds-fields-sidebar{flex:0 0 260px;position:sticky;top:calc(var(--tabbar-h,130px) + 16px);display:flex;flex-direction:column;gap:14px;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius);padding:16px;max-height:calc(100vh - var(--tabbar-h,130px) - 32px);overflow-y:auto;}
.ds-fields-sidebar .ds-field-palette{margin-bottom:0;}
.ds-fields-sidebar .ds-field-palette select{width:100%;}
.ds-fields-sidebar .ds-builder-actions{margin-top:0;flex-direction:column;align-items:stretch;}
.ds-fields-main{flex:1;min-width:0;}
@media (max-width:900px){
  .ds-fields-layout{flex-direction:column;}
  .ds-fields-sidebar{position:static;flex:1 1 auto;width:100%;max-height:none;}
}

.ds-pdf-pages{display:flex;flex-direction:column;gap:28px;}
.ds-pdf-doc{display:flex;flex-direction:column;gap:18px;align-items:center;}
.ds-pdf-doc-title{width:100%;max-width:720px;font-size:13px;font-weight:700;color:var(--ink-muted);text-align:left;border-bottom:1px solid var(--line);padding-bottom:6px;margin:0;}
.ds-pdf-page{position:relative;background:#fff;box-shadow:var(--shadow);max-width:100%;}
.ds-pdf-page canvas{display:block;max-width:100%;height:auto;}
.ds-pdf-page-num{position:absolute;top:-22px;left:0;font-size:11px;color:var(--ink-faint);}
/* 2026-09-16: copy a page's fields, then paste them onto another page at
   the exact same relative position (x/y/width/height are already fractions
   of the page, so no coordinate math is needed) — drag from there into
   final place instead of placing every field from scratch on every page. */
.ds-pdf-page-toolbar{position:absolute;top:-24px;right:0;display:flex;gap:6px;}
.ds-pdf-page-toolbar .btn{padding:2px 9px;font-size:10.5px;color:var(--ink-faint);border-color:var(--line);}
.ds-pdf-page-toolbar .btn:disabled{opacity:.35;cursor:default;}

.ds-field-box{position:absolute;border:1.5px dashed var(--gold-soft);background:rgba(203,168,110,0.16);border-radius:4px;cursor:move;display:flex;align-items:center;justify-content:center;padding:2px;box-sizing:border-box;min-width:24px;min-height:16px;}
.ds-field-box.ds-field-filled{border-style:solid;background:rgba(87,214,172,0.18);border-color:var(--good);}
.ds-field-box.ds-field-readonly{cursor:default;border-style:solid;border-color:var(--line-strong);background:rgba(255,255,255,0.08);}
.ds-field-box-label{font-size:9.5px;font-weight:700;color:var(--bg-deep);text-transform:uppercase;letter-spacing:.02em;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;text-align:center;}
.ds-field-box img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;}
.ds-field-remove{position:absolute;top:-9px;right:-9px;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;border:1.5px solid var(--panel-solid);font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.ds-recipient-remove.is-confirming,.ds-field-remove.is-confirming{background:var(--danger);color:#fff;border-color:var(--danger);}
.ds-field-resize{position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;background:var(--gold-soft);border:1.5px solid var(--panel-solid);border-radius:2px;cursor:nwse-resize;}
.ds-field-box.is-selected{border-style:solid;border-color:#5b8dee;box-shadow:0 0 0 2px rgba(91,141,238,0.4);background:rgba(91,141,238,0.22);}
.ds-selection-panel{position:fixed;right:20px;bottom:20px;z-index:150;display:flex;align-items:center;gap:10px;background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:100px;padding:10px 14px;box-shadow:var(--shadow);}
.ds-selection-panel-title{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;}
.ds-selection-panel select{font-size:12.5px;padding:5px 8px;}
.ds-selection-panel-close{background:none;border:none;color:var(--ink-faint);font-size:16px;line-height:1;cursor:pointer;padding:0 2px;}
.ds-selection-panel-close:hover{color:var(--ink);}

.ds-builder-actions{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap;}

/* 2026-09-16: builder header row (back + reuse/resume/cancel) and the two
   "where is this stuck" banners above the title field. */
.ds-builder-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.ds-builder-header-actions{display:flex;gap:8px;flex-wrap:wrap;}
.ds-waiting-banner,.ds-changes-banner{margin-top:14px;border-radius:var(--radius-sm);padding:12px 16px;font-size:13px;line-height:1.55;}
.ds-waiting-banner{background:rgba(229,184,75,0.12);border:1px solid rgba(229,184,75,0.35);color:var(--ink);}
.ds-waiting-banner p{margin:0;}
.ds-changes-banner{background:rgba(226,100,91,0.1);border:1px solid rgba(226,100,91,0.32);color:var(--ink);}
.ds-changes-banner p{margin:0 0 6px;}
.ds-changes-banner p:last-child{margin-bottom:0;}
.ds-changes-comment{font-style:italic;color:var(--ink-muted);white-space:pre-wrap;}
.ds-download-section{margin-top:14px;background:rgba(87,214,172,0.08);border:1px solid rgba(87,214,172,0.3);border-radius:var(--radius);padding:16px;}
.ds-download-section .section-head{margin-bottom:2px;}
.ds-download-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);margin-top:12px;}
.ds-download-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel-solid);padding:10px 14px;font-size:13.5px;}
#dsCancelEnvelopeBtn.is-confirming{background:var(--danger);color:#fff;border-color:var(--danger);}

/* Standalone token-gated signing screen — a sibling of authScreen/appShell,
   not nested inside either (see the comment on #dsSignScreen in
   index.html). Same dark shell/topbar language as the rest of the portal,
   but with no tabbar/nav at all — nothing here should look like it needs
   an account. */
.ds-sign-screen{min-height:100vh;background:var(--bg-deep);}
.ds-sign-screen[hidden]{display:none!important;}
.ds-sign-topbar{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line);background:rgba(6,11,30,0.6);}
.ds-sign-topbar img{height:26px;width:auto;}
.ds-sign-topbar span{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);font-weight:600;}
.ds-sign-body{max-width:840px;margin:0 auto;padding:28px 20px 64px;}
.ds-sign-status-card{background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;max-width:520px;margin:40px auto 0;}
.ds-sign-status-card h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:24px;color:var(--ink);}
.ds-sign-status-card p{color:var(--ink-muted);font-size:14px;line-height:1.6;}
.ds-sign-recipients{display:flex;flex-direction:column;gap:4px;margin-top:8px;width:100%;text-align:left;}
.ds-sign-recipient-item{display:flex;justify-content:space-between;font-size:13px;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,0.03);}
.ds-sign-recipient-item.is-you{border:1px solid rgba(203,168,110,0.4);}
.ds-sign-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.ds-sign-toolbar h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:26px;color:var(--ink);}
.ds-sign-toolbar-actions{display:flex;gap:10px;}
.ds-field-box.ds-field-mine{border-color:var(--gold-soft);cursor:pointer;}
.ds-field-box.ds-field-mine.ds-field-required:not(.ds-field-filled){box-shadow:0 0 0 2px rgba(226,100,91,0.35);}
.ds-decline-row{margin-top:18px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;text-align:center;}
.ds-decline-row>button{background:none;border:0;color:var(--ink-faint);text-decoration:underline;cursor:pointer;font:inherit;font-size:12.5px;}
.ds-decline-row textarea{font-size:13px;padding:7px 9px;resize:vertical;}
.ds-text-field-popover{position:fixed;z-index:210;background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;min-width:220px;}
.ds-text-field-popover input{font-size:13px;padding:7px 9px;}
.ds-text-field-popover-actions{display:flex;gap:8px;justify-content:flex-end;}

/* 2026-09-16: a persistent floating "go to the next thing to fill in"
   button — like Docusign's own left-edge Sign/Next pill — plus the brief
   pulse a field gets when scrolled to, so a signer never has to hunt
   around a long multi-page/multi-document envelope for what's left. */
.ds-sign-nav-btn{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:150;background:var(--gold-soft);color:var(--bg-deep);border:none;border-radius:100px;padding:12px 20px;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.35);transition:transform .15s ease;}
.ds-sign-nav-btn:hover{transform:translateY(-50%) scale(1.04);}
.ds-sign-nav-btn.ds-sign-nav-finish{background:var(--good);}
.ds-field-box.ds-field-pulse{animation:dsFieldPulse 1.6s ease-out 2;}
@keyframes dsFieldPulse{
  0%{box-shadow:0 0 0 0 rgba(203,168,110,0.7);}
  70%{box-shadow:0 0 0 14px rgba(203,168,110,0);}
  100%{box-shadow:0 0 0 0 rgba(203,168,110,0);}
}
@media (max-width:640px){
  .ds-sign-toolbar{flex-direction:column;align-items:flex-start;}
  .ds-sign-nav-btn{left:10px;padding:10px 14px;font-size:12.5px;}
}

/* ---------------- Company Stats (New) — trial dashboard, 2026-09-13 ---------------- */
.cs-dept-pills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px;}
.cs-pill{font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:100px;background:var(--panel);border:1px solid var(--line);color:var(--ink-muted);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;}
.cs-pill:hover{border-color:var(--line-strong);color:var(--ink);}
.cs-pill.active{background:var(--gold-soft);border-color:var(--gold-soft);color:#1a1204;}
.cs-header-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.cs-header-row h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:24px;}
.cs-period-controls{display:flex;gap:14px;flex-wrap:wrap;}
.cs-period-controls label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;}
.cs-period-controls select{font-family:inherit;font-size:13px;color:var(--ink);background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;}
.cs-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:24px;}
.cs-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.cs-tile-icon{border-radius:50%;background:rgba(255,255,255,0.06);padding:6px;}
.cs-tile-label{font-size:11.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;}
.cs-tile-value{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:600;color:var(--ink);}
.cs-tile-sub{font-size:12px;color:var(--gold-soft);font-weight:600;}
.cs-chart-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;}
.cs-chart-wrap h3{font-size:14px;color:var(--ink-muted);margin-bottom:14px;font-weight:600;}
.cs-chart-canvas-holder{position:relative;height:340px;}
.cs-last-imported{font-size:12px;margin-bottom:20px;}
.cs-import-block input[type=file]{display:block;margin:10px 0;font-size:12.5px;color:var(--ink-muted);}

/* ---------------- Company Stats (New) — per-department report layouts, 2026-09-13 ---------------- */
/* Self-hosted Prata (headline serif) + Raleway (body), the exact fonts the
   real Power BI report uses — no CDN dependency, files live alongside the
   other icon/logo assets already in assets/. */
@font-face{font-family:"CS Prata";src:url("assets/company-stats/fonts/Prata-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"CS Raleway";src:url("assets/company-stats/fonts/Raleway-Variable.ttf") format("truetype-variations");font-weight:100 900;font-style:normal;font-display:swap;}

.cs2-dept-layout{font-family:"CS Raleway",inherit;background:linear-gradient(180deg, rgba(6,11,30,0.55) 0%, rgba(6,11,30,0.8) 100%), url("assets/company-stats/bg.jpg");background-size:cover;background-position:top center;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3.5vw,40px);display:flex;flex-direction:column;gap:28px;margin-bottom:16px;}
.cs2-dept-layout h3,.cs2-dept-layout h4{font-family:"CS Prata",Georgia,serif;font-weight:400;color:var(--ink);}
.cs2-dept-layout h3{font-size:16px;margin-bottom:12px;}
.cs2-dept-layout h4{font-size:14.5px;margin-bottom:10px;}

/* 2026-09-14: page header — logo + wordmark + "<Dept> Department Statistics"
   title, matching the real Power BI export's own masthead (see the Feb 2026
   PDF Bernard sent) exactly rather than the plain department-pill nav the
   rest of the tab already provides above this box. Shared by every
   department layout via csPageHeader(). */
/* 2026-09-15: sizes/gaps below were re-derived from pixel measurements taken
   against a same-scale render of the real PDF export (grid-overlay method —
   see project findings doc) after Bernard flagged the layout as still not
   matching in spacing/size. Values are CSS px (viewport ~900px wide). */
.cs2-page-header{display:flex;flex-direction:column;gap:90px;margin-bottom:100px;}
.cs2-page-brand{display:flex;align-items:center;gap:22px;}
.cs2-page-logo{width:100px;height:100px;border-radius:50%;flex:none;display:block;}
.cs2-page-wordmark{font-family:"CS Prata",Georgia,serif;font-size:clamp(26px,4vw,36px);letter-spacing:.14em;color:var(--ink);text-transform:uppercase;}
.cs2-page-title{font-family:"CS Prata",Georgia,serif;font-weight:400;font-size:clamp(24px,3.8vw,38px);color:var(--ink);margin:0;line-height:1.25;}
.cs2-page-title-accent{color:var(--gold-soft);}

.cs2-tile-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.cs2-tile-row-2{grid-template-columns:repeat(2,1fr);}
.cs2-tile-row-3{grid-template-columns:repeat(3,1fr);}
.cs2-tile-row-2x2{grid-template-columns:repeat(2,1fr);}
.cs2-tile-row-6{grid-template-columns:repeat(6,1fr);}
@media (max-width:760px){.cs2-tile-row,.cs2-tile-row-2,.cs2-tile-row-3,.cs2-tile-row-2x2,.cs2-tile-row-6{grid-template-columns:repeat(2,1fr);}}
/* 2026-09-15: position:relative + overflow:visible + extra padding-top lets
   the icon (see .cs2-tile-icon-wrap below) sit absolutely positioned so it
   straddles the tile's own top border, matching the real report — the icon
   pokes up above the box rather than sitting fully inside it. */
.cs2-tile{background:rgba(10,19,48,0.5);border:1px solid var(--line);border-radius:var(--radius-sm);padding:88px 16px 30px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;min-width:0;position:relative;overflow:visible;}
.cs2-tile-wide{grid-column:span 1;}
.cs2-tile-accent{background:rgba(203,168,110,0.12);border-color:rgba(203,168,110,0.35);}
/* 2026-09-14: the VM-dept-*.png icon set Bernard sent already bakes its own
   coloured circle into each PNG (alternating blue-grey/light-grey, matching
   the real report exactly) — this wrapper used to also paint a faint circle
   of its own behind it, which just muddied the baked-in colour, so it's
   transparent now and only handles sizing/spacing.
   2026-09-15: the PNGs' baked-in circle only fills ~57% of the canvas, so to
   get a ~77px CSS visible circle (matching the real report) the wrapper box
   itself needs to be ~135px CSS. It's absolutely positioned, centered
   horizontally, so it overlaps the tile's top border by half its own height
   (see .cs2-tile above) — the real report centers the icon over the tile,
   not left-aligned. */
.cs2-tile-icon-wrap{width:148px;height:148px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;top:-74px;left:50%;transform:translateX(-50%);}
.cs2-icon{display:block;object-fit:contain;}
/* 2026-09-15: the real report's tile labels are title-case ("Purchase
   Orders"), not uppercase — removed the transform so labels render exactly
   as authored in the csTile() call sites instead of being force-capitalized. */
.cs2-tile-label{font-size:22px;color:var(--ink-faint);letter-spacing:.01em;line-height:1.3;}
.cs2-tile-sup{font-size:11.5px;color:var(--ink-muted);}
.cs2-tile-value{font-family:"CS Prata",Georgia,serif;font-size:34px;color:var(--ink);line-height:1.1;word-break:break-word;}
.cs2-tile-sub{font-size:11.5px;color:var(--gold-soft);font-weight:600;}

.cs2-split-row{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:stretch;}
.cs2-split-row-reverse{grid-template-columns:1fr 1.1fr;}
@media (max-width:760px){.cs2-split-row,.cs2-split-row-reverse{grid-template-columns:1fr;}}
.cs2-exec-summary{background:rgba(10,19,48,0.5);border:1px solid var(--line);border-radius:var(--radius-sm);padding:24px;}
.cs2-exec-summary p{font-size:13px;color:var(--ink-muted);line-height:1.75;}

.cs2-chart-card{background:rgba(10,19,48,0.5);border:1px solid var(--line);border-radius:var(--radius-sm);padding:24px;display:flex;flex-direction:column;}
.cs2-chart-holder{position:relative;height:300px;}
.cs2-chart-holder-sm{height:150px;}
/* Legend row above a bar chart — matches the real report's dot+label strip;
   Chart.js's own legend doesn't apply cleanly to a single-dataset bar chart
   with one colour per bar, so this is a small plain HTML row instead. */
.cs2-chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px;}
.cs2-chart-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-muted);}
.cs2-chart-legend-dot{width:11px;height:11px;border-radius:50%;flex:none;}

.cs2-donut-card{background:rgba(10,19,48,0.5);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;}
.cs2-donut-card-wide{grid-column:span 1;}
.cs2-donut-holder{position:relative;width:100%;max-width:180px;height:150px;}
.cs2-donut-caption{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;text-align:center;}
.cs2-donut-figure{font-family:"CS Prata",Georgia,serif;font-size:20px;color:var(--ink);}
.cs2-donut-label{font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;max-width:90px;}
.cs2-donut-caption-2{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--ink-muted);text-align:center;}

.cs2-gauge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;}
.cs2-gauge-row-col{grid-template-columns:1fr;align-items:stretch;}
.cs2-gauge-row-split{grid-template-columns:2fr 1fr;align-items:stretch;}
@media (max-width:760px){.cs2-gauge-row{grid-template-columns:repeat(2,1fr);}.cs2-gauge-row-split{grid-template-columns:1fr;}}
.cs2-gauge{background:rgba(10,19,48,0.5);border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.cs2-gauge-ring{width:130px;height:65px;border-radius:130px 130px 0 0;position:relative;overflow:hidden;}
.cs2-gauge-fill{width:130px;height:130px;position:absolute;top:0;left:0;border-radius:50%;}
.cs2-gauge-mask{position:absolute;left:15px;right:15px;top:15px;bottom:0;border-radius:115px 115px 0 0;background:rgba(10,19,48,0.92);}
.cs2-gauge-value{font-family:"CS Prata",Georgia,serif;font-size:26px;color:var(--ink);margin-top:4px;}
/* 2026-09-15: matches .cs2-tile-label — the real report's gauge captions
   are title-case ("Before Discount"), not uppercase. */
.cs2-gauge-label{font-size:11px;color:var(--ink-faint);letter-spacing:.04em;text-align:center;}

/* A single navy card holding two or more gauges side by side, no divider
   between them — matches the real report's "Before/After Discount" pairing
   (as opposed to .cs2-gauge, which is one gauge in its own bordered card). */
.cs2-gauge-group{background:rgba(10,19,48,0.5);border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px;display:flex;align-items:flex-end;justify-content:space-around;gap:16px;}
.cs2-gauge-group-item{display:flex;flex-direction:column;align-items:center;gap:10px;}

/* The light "Total Saving %" style card: white background, dark text, value
   sits inside its own gray rounded box — visually distinct from the navy
   cs2-tile-accent card used everywhere else on the page. */
.cs2-saving-card{background:#f2f2f3;border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-sm);padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.cs2-saving-label{font-size:16px;color:#23262f;text-align:center;}
.cs2-saving-value-box{background:#c3c4c9;border-radius:8px;padding:14px 16px;width:100%;display:flex;align-items:center;justify-content:center;}
.cs2-saving-value{font-family:"CS Prata",Georgia,serif;font-size:34px;color:#181a20;line-height:1;}

/* 2026-09-22 fix: the real report's 2-capsule case (Engineering's PO's
   Requested / Quotes Requested) sits side by side, not stacked full-width
   rows — a responsive grid gets that right while still wrapping sanely
   for the longer capsule lists elsewhere (Quality's RT/PT mini-tables). */
.cs2-capsule-card{background:rgba(10,19,48,0.5);border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-content:start;}
.cs2-capsule{display:flex;align-items:center;gap:16px;}
.cs2-capsule-pill{flex:1;background:rgba(255,255,255,0.08);border-radius:100px;padding:12px 22px;min-width:0;}
.cs2-capsule-label{font-size:15px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.cs2-capsule-value{font-family:"CS Prata",Georgia,serif;font-size:26px;color:var(--ink);flex:none;}

.cs2-mini-table{background:rgba(10,19,48,0.5);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;display:flex;flex-direction:column;gap:7px;}

.cs2-prod-section{display:flex;flex-direction:column;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.cs2-prod-section:last-of-type{border-bottom:none;}

.cs2-overflow{background:rgba(10,19,48,0.35);border:1px dashed var(--line-strong);border-radius:var(--radius-sm);padding:14px 16px;display:flex;flex-direction:column;gap:6px;}
.cs2-overflow-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;}
.cs2-overflow-label{color:var(--ink-muted);}
.cs2-overflow-value{color:var(--ink);font-weight:600;}

.cs2-staffbar{display:flex;flex-direction:column;gap:10px;}
.cs2-staffbar-row{display:flex;align-items:center;gap:10px;}
.cs2-staffbar-label{font-size:11.5px;color:var(--ink-muted);flex:0 0 130px;}
.cs2-staffbar-track{flex:1;height:10px;border-radius:100px;background:rgba(255,255,255,0.08);overflow:hidden;}
.cs2-staffbar-fill{height:100%;border-radius:100px;}
.cs2-staffbar-value{font-size:12.5px;color:var(--ink);font-weight:600;flex:0 0 40px;text-align:right;}

/* Bulk import — drag & drop all workbooks at once */
.cs2-dropzone{border:1.5px dashed var(--line-strong);border-radius:var(--radius-sm);padding:26px 16px;text-align:center;font-size:13px;color:var(--ink-muted);cursor:pointer;transition:border-color .15s ease,background .15s ease;margin:12px 0;}
.cs2-dropzone:hover,.cs2-dropzone:focus-visible{border-color:var(--gold-soft);color:var(--ink);}
.cs2-dropzone.dragover{border-color:var(--gold-soft);background:rgba(203,168,110,0.08);color:var(--ink);}

/* 2026-09-14: generic drag-and-drop dropzone, reused everywhere a single
   document/PDF is uploaded (Goods Receiving, per-row ISO/Work Instruction
   attachments) — same look as the Company Stats bulk-import dropzone above,
   just under a name that isn't tied to that one feature. */
.app-dropzone{border:1.5px dashed var(--line-strong);border-radius:var(--radius-sm);padding:18px 16px;text-align:center;font-size:13px;color:var(--ink-muted);cursor:pointer;transition:border-color .15s ease,background .15s ease;margin:6px 0;}
.app-dropzone:hover,.app-dropzone:focus-visible{border-color:var(--gold-soft);color:var(--ink);}
.app-dropzone.dragover{border-color:var(--gold-soft);background:rgba(203,168,110,0.08);color:var(--ink);}
/* A drop target that wraps existing controls (a whole row, a whole panel)
   rather than being its own empty dashed box — a background/outline tint
   on drag instead of a border, so it doesn't fight the element's own look. */
.drop-target.dragover{outline:1.5px dashed var(--gold-soft);outline-offset:-2px;background:rgba(203,168,110,0.08);border-radius:var(--radius-sm);}
.cs2-bulk-results{display:flex;flex-direction:column;gap:4px;margin:12px 0;font-size:12px;max-height:220px;overflow-y:auto;}
.cs2-bulk-line{color:var(--ink-muted);}
.cs2-bulk-line-err{color:var(--danger);}
.cs2-lastupdated-heading{margin-top:18px !important;}
.cs2-lastupdated-table{display:flex;flex-direction:column;gap:4px;}
.cs2-lastupdated-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,0.03);}
.cs2-lastupdated-dept{color:var(--ink-muted);}
.cs2-lastupdated-stamp{color:var(--ink);font-weight:600;}

/* 2026-09-22: responsiveness pass — every cs2-* grid above only ever had
   ONE breakpoint (max-width:760px), jumping straight from the desktop
   column count to the phone one. A tablet-width screen (iPad portrait,
   ~768-1024px) got squeezed into the same grid as a desktop, and a phone
   inherited masthead/icon sizes that were pixel-matched to a ~900px-wide
   desktop render (see the 2026-09-15 comment on .cs2-page-header above),
   leaving little room for the tile content itself once shrunk into a
   2-column phone grid. */
@media (min-width:761px) and (max-width:1024px){
  .cs2-tile-row,.cs2-tile-row-2x2,.cs2-tile-row-6{grid-template-columns:repeat(3,1fr);}
  .cs2-gauge-row{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .cs2-page-header{gap:20px;margin-bottom:28px;}
  .cs2-page-brand{gap:14px;}
  .cs2-page-logo{width:56px;height:56px;}
  .cs2-page-wordmark{letter-spacing:.08em;}
  .cs2-tile{padding:52px 10px 14px 10px;}
  .cs2-tile-icon-wrap{width:90px;height:90px;top:-45px;}
  .cs2-tile-label{font-size:16px;}
  .cs2-tile-value{font-size:22px;}
  .cs2-donut-holder{max-width:140px;height:120px;}
  .cs2-chart-holder{height:180px;}
}

/* 2026-10-09: HR-004/007/008/009 + HSE-023 forms (checklist rows, ladder register cards) */
.chk-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.chk-item{display:flex;align-items:center;gap:10px;background:var(--panel-solid);padding:10px 14px;font-size:13px;color:var(--ink-muted);font-weight:400;cursor:pointer;}
.chk-item input{width:auto;flex:none;}
.chk-item.chk-sub{padding-left:40px;font-size:12.5px;}
.ladder-rows{display:flex;flex-direction:column;gap:8px;}
.ladder-card{background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;}
.ladder-card summary{cursor:pointer;font-size:13px;color:var(--ink);}
.ladder-card[open] summary{margin-bottom:10px;}
.ladder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 12px;}
.ladder-grid .ladder-comments{grid-column:1/-1;}

/* HSE forms batch 2026-10-09: extra repeater column layouts */
.repeater-head.cols-7,.repeater-row.cols-7{grid-template-columns:.9fr .6fr 1.4fr 1fr 1fr .6fr .8fr 26px;}
.repeater-row textarea{padding:7px 9px;font-size:13px;width:100%;resize:vertical;}
.hse-chk .yn-row select{width:auto;min-width:150px;flex:none;}
.hse-chk .yn-row input:not([type=checkbox]):not([type=radio]){width:auto;flex:none;}
.hse-chk .yn-row input[name$=Remarks]{width:220px;}

/* --- uniform "Recent …" list rows (2026-10-12) ---
   Title/description take the flexible left column and wrap inside it; the
   form number, status, details, date and buttons each have a fixed column so
   they line up on every row of every list. */
.table-list{container-type:inline-size;}
.row-cols{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;}
.row-cols>.row-main{align-self:center;}
.row-side-cols{display:grid;grid-template-columns:62px 128px 150px 124px 156px;column-gap:10px;align-items:center;flex-wrap:nowrap;}
.row-side-cols .cell{min-width:0;display:flex;align-items:center;gap:6px;}
.row-side-cols .cell-status{justify-content:flex-start;}
.row-side-cols .cell-info{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;line-height:1.35;overflow-wrap:anywhere;}
.row-side-cols .cell-date{line-height:1.35;}
.row-side-cols .cell-actions{justify-content:flex-end;flex-wrap:wrap;}
.row-side-cols .cell-actions .row-actions{flex-wrap:nowrap;}
@container (max-width:860px){
  .row-cols{grid-template-columns:minmax(0,1fr);row-gap:8px;}
}
@container (max-width:700px){
  .row-side-cols{grid-template-columns:62px minmax(0,1fr) auto;grid-template-areas:"no status status" "info info info" "date date actions";row-gap:6px;}
  .row-side-cols .cell-no{grid-area:no;}
  .row-side-cols .cell-status{grid-area:status;}
  .row-side-cols .cell-info{grid-area:info;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:2px 10px;}
  .row-side-cols .cell-info:empty{display:none;}
  .row-side-cols .cell-date{grid-area:date;}
  .row-side-cols .cell-actions{grid-area:actions;}
}


/* ---- HR disciplinary warnings + employee profile (2026-10-13) ---- */
.sign-slot{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px dashed var(--line);}
.sign-slot:first-of-type{border-top:0;}
.sign-slot > label{font-size:13px;color:var(--ink);}
input.picked{border-color:var(--good);}
.charge-list{display:flex;flex-direction:column;gap:6px;}
.charge-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13px;}
.charge-row button{background:none;border:0;color:var(--danger);cursor:pointer;font-size:18px;line-height:1;}
.profile-head{display:flex;flex-direction:column;gap:4px;}
.profile-head h3{margin:0;}
.profile-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:14px 0 6px;}
.profile-stat{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius-sm);}
.profile-stat .n{font-size:26px;font-weight:700;color:var(--ink);line-height:1.1;}
.profile-stat .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
.profile-stat .s{font-size:12px;color:var(--ink-muted);}
.profile-stat.warn .n{color:var(--warn);}
.profile-stat.bad .n{color:var(--danger);}
.profile-stat.good .n{color:var(--good);}
.profile-section{margin-top:18px;}
.profile-scroll{overflow-x:auto;}
.profile-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel-solid);min-width:640px;}
.profile-table th,.profile-table td{border:1px solid var(--line);padding:8px 12px;text-align:left;color:var(--ink);vertical-align:top;overflow-wrap:anywhere;}
.profile-table th{color:var(--ink-faint);font-weight:600;background:rgba(255,255,255,0.04);font-size:12px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
.profile-table td.act{white-space:nowrap;}
.profile-table td.act .btn{margin-right:4px;}
.profile-note{font-size:12px;color:var(--ink-faint);margin:6px 0 0;}
.profile-table td.nw{white-space:nowrap;}

.users-filter{margin:0 0 12px;}
.users-filter input{width:100%;max-width:460px;}

/* ---- Admin "View as" preview — compact dropdown beside the brand (2026-10-15) ---- */
.topbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0;}
.viewas-bar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;}
.viewas-bar[hidden]{display:none;}
.viewas-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap;}
.viewas-select{padding:5px 20px 5px 9px;border:1px solid var(--line-strong);border-radius:9px;background-color:var(--panel-solid);color:var(--ink);font:inherit;font-size:12px;font-weight:600;max-width:100%;cursor:pointer;flex:none;}
.viewas-select{width:184px;}
.viewas-select{color-scheme:dark;}
/* the open list gets a solid dark panel with light text — the translucent amber 'previewing' fill made the list white-on-white */
.viewas-select option{background-color:#101c3f;color:#f1f3f9;}
.viewas-select option:checked{background-color:#e6d5ab;color:#0a1330;}
#viewAsDept.viewas-select{width:128px;}
.viewas-select[hidden]{display:none;}
.viewas-select:hover{border-color:var(--gold-soft);}
.viewas-bar.viewas-active .viewas-title{color:#e5b84b;}
.viewas-bar.viewas-active .viewas-select{border-color:#d9a21b;background-color:rgba(217,162,27,.16);}
@media (max-width:640px){.topbar-left{gap:10px;}.viewas-select,#viewAsDept.viewas-select{width:auto;max-width:44vw;}}

/* ---- Saved drafts on QC forms (2026-10-15) ---- */
.draft-bar{margin:0 0 14px;padding:12px 14px;border:1px solid var(--gold-soft);border-radius:14px;background:rgba(230,213,171,.07);}
.draft-bar[hidden]{display:none;}
.draft-bar-head{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px;}
.draft-current{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink);margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--line);}
.draft-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line);}
.draft-row:first-of-type{border-top:0;}
.draft-row.is-open .draft-row-title::after{content:" · open";color:var(--gold-soft);font-weight:500;font-size:12px;}
.draft-row-title{font-size:14px;font-weight:600;color:var(--ink);}
.draft-row-meta{font-size:12px;color:var(--ink-muted);}
.draft-actions{display:flex;gap:8px;flex:none;}
.draft-save-btn{margin-left:10px;}
.draft-files{margin-top:6px;font-size:12.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.draft-files[hidden]{display:none;}
.tile-draft-badge{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:100px;background:var(--gold-soft);color:var(--bg-deep);font-size:11px;font-weight:700;letter-spacing:.02em;}
@media (max-width:640px){.draft-save-btn{margin:10px 0 0;width:100%;}.draft-actions{width:100%;}.draft-actions .btn{flex:1;}}

/* ---- Leave application: attachments + "Applying for" (2026-10-15) ---- */
.leave-att-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.leave-att-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.leave-att-list:empty{display:none;}
.leave-att-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel);}
.leave-att-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:none;}
.leave-att-icon{width:44px;height:44px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--panel-hover);color:var(--gold-soft);font-size:11px;font-weight:700;}
.leave-att-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}