*{box-sizing:border-box;margin:0;padding:0}
:root{
--navy:#1E3A8A;--navy-l:#DBEAFE;--navy-m:#60A5FA;--navy-d:#1E40AF;
--steel:#475569;--steel-l:#F1F5F9;--steel-m:#94A3B8;--steel-d:#334155;
--safety-orange:#EA580C;--safety-orange-l:#FFEDD5;
--success:#15803D;--success-l:#DCFCE7;
--warning:#CA8A04;--warning-l:#FEF9C3;
--danger:#B91C1C;--danger-l:#FEE2E2;
--slate-50:#F8FAFC;--slate-100:#F1F5F9;--slate-200:#E2E8F0;--slate-300:#CBD5E1;
--slate-400:#94A3B8;--slate-500:#64748B;--slate-600:#475569;--slate-700:#334155;
--slate-800:#1E293B;--slate-900:#0F172A;
--bg:#F8FAFC;--bg2:#FFFFFF;--bg3:#F1F5F9;
--border:#E2E8F0;--text:#0F172A;--text2:#475569;--text3:#94A3B8;
--sidebar:220px;
--purple:#7C3AED;--purple-l:#EDE9FE;--purple-m:#A78BFA;
--amber:#D97706;--amber-l:#FEF3C7;--amber-m:#FCD34D;
--teal:#0F766E;--teal-l:#CCFBF1;
--red:#B91C1C;--red-l:#FEE2E2;
--green:#15803D;--green-l:#DCFCE7;
--coral:#EA580C;
}
body.dark-mode{
--navy:#60A5FA;--navy-l:#1E2D40;--navy-m:#3B82F6;--navy-d:#93C5FD;
--steel:#A3A3A3;--steel-l:#262626;--steel-m:#737373;--steel-d:#D4D4D4;
--safety-orange:#FB923C;--safety-orange-l:#2C1A0E;
--success:#4ADE80;--success-l:#14261E;
--warning:#FACC15;--warning-l:#271E06;
--danger:#F87171;--danger-l:#2C1515;
--slate-50:#262626;--slate-100:#2F2F2F;--slate-200:#3A3A3A;--slate-300:#525252;
--slate-400:#737373;--slate-500:#A3A3A3;--slate-600:#D4D4D4;--slate-700:#E5E5E5;
--slate-800:#F5F5F5;--slate-900:#FAFAFA;
--bg:#1A1A1A;--bg2:#212121;--bg3:#2A2A2A;
--border:#383838;--text:#ECECEC;--text2:#A3A3A3;--text3:#6B6B6B;
--purple:#A78BFA;--purple-l:#2D1F4A;--purple-m:#7C3AED;
--amber:#FCD34D;--amber-l:#2C1E06;--amber-m:#F59E0B;
--teal:#2DD4BF;--teal-l:#0D2E2B;
--red:#F87171;--red-l:#2C1515;
--green:#4ADE80;--green-l:#14261E;
--coral:#FB923C;
}
body.dark-mode .logo-icon,body.dark-mode .btn-primary{box-shadow:0 0 0 1px rgba(255,255,255,.05)}
body.dark-mode .panel,body.dark-mode .stat-card,body.dark-mode .kpi-card,body.dark-mode .sidebar,body.dark-mode .topbar{box-shadow:none}
body.dark-mode .user-actions-menu{box-shadow:0 16px 36px rgba(0,0,0,.45)}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{color-scheme:dark}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.app{display:flex;height:100vh}
.sidebar{width:var(--sidebar);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.logo{padding:20px 16px 16px;border-bottom:1px solid var(--border);text-align:center}
.logo-row{display:flex;align-items:center;justify-content:center}
.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-d) 100%);border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(30,58,138,0.15)}
.logo-icon svg{width:20px;height:20px;color:white}
.logo-icon svg{width:18px;height:18px;fill:white}
.logo-name{font-family:'Fugaz One',cursive !important;font-size:38px;font-weight:400;color:var(--text);letter-spacing:0px;line-height:1}
.logo-qhse{font-family:'Inter',sans-serif;font-size:11px;color:var(--text3);letter-spacing:3px;font-weight:700;margin-top:6px;text-transform:uppercase;text-align:center}
.logo-tag{font-family:'Inter',sans-serif;font-size:8.5px;color:var(--text3);letter-spacing:1.8px;font-weight:600;margin-top:3px;text-transform:uppercase}
.nav-group{padding:12px 8px 4px}
.nav-label{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:1.2px;padding:0 8px;margin-bottom:4px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--text2);transition:all 0.12s;margin-bottom:2px;user-select:none}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:var(--navy-l);color:var(--navy);font-weight:600}
.nav-icon{width:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0.8;transition:opacity 0.18s,color 0.18s;color:var(--text)}
.nav-icon svg{width:16px;height:16px;stroke-width:1.75;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover .nav-icon{opacity:1;color:var(--text)}
.nav-item.active .nav-icon{opacity:1;color:var(--navy)}
.s-vnav-icon{width:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0.8;transition:opacity 0.18s,color 0.18s;color:var(--text)}
.s-vnav-icon svg{width:15px;height:15px;stroke-width:1.75;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s-vnav-item:hover .s-vnav-icon,.s-vnav-item.active .s-vnav-icon{opacity:1;color:var(--navy)}
.ua-icon{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0.7;color:var(--text2)}
.ua-icon svg{width:15px;height:15px;stroke-width:1.75;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.user-action:hover .ua-icon{opacity:1;color:var(--text)}
.user-action.danger .ua-icon{color:var(--coral);opacity:0.85}
.nav-badge{margin-left:auto;background:var(--safety-orange);color:white;font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;min-width:18px;text-align:center}
.nav-beta{margin-left:auto;background:var(--navy-l);color:var(--navy);font-size:8.5px;font-weight:700;letter-spacing:.4px;padding:1px 5px;border-radius:4px;text-align:center;text-transform:uppercase}
/* ══════════════════════════════════════
NOTIFICATION SYSTEM
══════════════════════════════════════ */
.notif-bell{position:relative;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);transition:background .15s,color .15s;flex-shrink:0}
.notif-bell:hover,.notif-bell.active{background:var(--bg3);color:var(--text)}
.notif-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;background:var(--safety-orange);color:#fff;font-size:10px;font-weight:700;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;pointer-events:none}
.notif-panel{position:fixed;top:60px;right:16px;width:360px;max-height:520px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.14);display:flex;flex-direction:column;z-index:9999;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .18s,transform .18s}
.notif-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.notif-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.notif-mark-all{font-size:13px;color:var(--text2);background:none;border:1px solid var(--border);border-radius:8px;padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .12s}
.notif-mark-all:hover{background:var(--navy-l);color:var(--navy);border-color:var(--navy-m)}
.notif-list{overflow-y:auto;flex:1;padding:6px 0}
.notif-list::-webkit-scrollbar{width:4px}
.notif-list::-webkit-scrollbar-track{background:transparent}
.notif-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.notif-empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:14px}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;cursor:pointer;transition:background .12s;position:relative}
.notif-item:hover{background:var(--bg3)}
.notif-item-unread{background:color-mix(in oklab,var(--navy) 5%,transparent)}
.notif-item-unread:hover{background:color-mix(in oklab,var(--navy) 8%,transparent)}
.notif-icon-wrap{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-content{flex:1;min-width:0}
.notif-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:2px}
.notif-body{font-size:13px;color:var(--text2);line-height:1.4;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-time{font-size:12px;color:var(--text3)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--navy);flex-shrink:0;margin-top:4px}
/* Toast popup */
.notif-toast{position:fixed;bottom:24px;right:24px;width:320px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.16);display:flex;align-items:flex-start;gap:12px;padding:14px 16px;z-index:99999;transform:translateY(16px);opacity:0;transition:transform .3s ease,opacity .3s ease;cursor:pointer}
.notif-toast.show{transform:translateY(0);opacity:1}
.notif-toast-icon{flex-shrink:0;margin-top:2px}
.notif-toast-body{flex:1;min-width:0}
.notif-toast-title{font-size:14px;font-weight:700;color:var(--text);line-height:1.4}
.notif-toast-sub{font-size:13px;color:var(--text2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-toast-close{flex-shrink:0;background:none;border:none;color:var(--text3);font-size:18px;line-height:1;cursor:pointer;padding:0 0 0 4px;align-self:flex-start}
.notif-toast-close:hover{color:var(--text)}
/* ===== CUSTOMISABLE LEFT NAVIGATION ===== */
.sidebar-customizer{display:flex;gap:6px;padding:10px 8px 4px;border-bottom:1px solid var(--border)}
.nav-customize-btn,.nav-reset-btn{border:1px solid var(--border);background:var(--bg3);color:var(--text2);border-radius:9px;padding:7px 9px;font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .12s}
.nav-customize-btn{flex:1}
.nav-customize-btn:hover,.nav-reset-btn:hover{background:var(--navy-l);color:var(--navy);border-color:var(--navy-m)}
.sidebar.nav-editing .nav-customize-btn{background:var(--navy);color:white;border-color:var(--navy)}
#nav-groups{display:flex;flex-direction:column}
.nav-label{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.nav-caret{font-size:11px;transition:transform .15s;color:var(--text3)}
.nav-group.collapsed .nav-caret{transform:rotate(-90deg)}
.nav-group.collapsed .nav-items{display:none}
.nav-items{min-height:6px}
.drag-handle,.nav-eye{display:none}
.sidebar.nav-editing .drag-handle{display:inline-flex;color:var(--text3);cursor:grab;font-size:13px;line-height:1}
.sidebar.nav-editing .nav-eye{display:inline-flex;margin-left:auto;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:13px;padding:2px;border-radius:6px}
.sidebar.nav-editing .nav-eye:hover{background:var(--bg3);color:var(--navy)}
.sidebar.nav-editing .nav-item{outline:1px dashed transparent}
.sidebar.nav-editing .nav-item:hover{outline-color:var(--navy-m)}
.nav-item.dragging{opacity:.45;transform:scale(.98)}
.nav-items.drag-over{background:var(--navy-l);border-radius:10px;padding:3px}
.nav-item.nav-hidden{opacity:.42}
.nav-item.nav-hidden .nav-text{text-decoration:line-through}
body:not(.nav-show-hidden) .nav-item.nav-hidden{display:none}
.sidebar.nav-editing .nav-item.nav-hidden{display:flex}
.sidebar.nav-editing .nav-badge{margin-left:0}
.nav-item .nav-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer{margin-top:auto;padding:12px 8px;border-top:1px solid var(--border)}
.user-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:background 0.12s}
.user-row:hover{background:var(--bg3)}
.user-row:hover{background:var(--bg3)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;color:white;font-size:12px;font-weight:700;flex-shrink:0;overflow:hidden}
.user-name{font-size:13px;font-weight:600;color:var(--text)}
.user-role{font-size:11px;color:var(--text3)}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:58px;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
.page-title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-0.3px}
.topbar-right{display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;border:none;transition:all 0.12s;font-family:'Poppins',sans-serif;white-space:nowrap}
.btn-primary{background:var(--navy);color:white}
.btn-primary:hover{background:var(--navy-d)}
.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--border)}
.btn-sm{padding:6px 11px;font-size:12.5px}
.content{flex:1;overflow-y:auto;padding:24px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:22px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.stat-label{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:0.8px;text-transform:uppercase;margin-bottom:8px;line-height:1.25;min-height:2.5em}
.stat-value{font-size:28px;font-weight:700;line-height:1;letter-spacing:-1px}
.stat-sub{font-size:11.5px;margin-top:6px;font-weight:500}
.stat-sub.up{color:var(--teal)}.stat-sub.dn{color:var(--coral)}
.stat-bar{height:3px;border-radius:2px;margin-top:10px;background:var(--bg3)}
.stat-fill{height:100%;border-radius:2px}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:16px;margin-bottom:22px}
/* ──────────────────────────────────────────────
LOADING SPINNER — unified loading indicator
──────────────────────────────────────────────
Use .app-loader anywhere data is being fetched.
For table cells: … | */
@keyframes app-spin { to { transform: rotate(360deg); } }
.app-spinner{
display:inline-block;
width:16px;height:16px;
border:2px solid var(--border);
border-top-color:var(--navy);
border-radius:50%;
animation:app-spin .7s linear infinite;
vertical-align:middle;
flex-shrink:0;
}
.app-spinner.lg{width:22px;height:22px;border-width:2.5px}
.app-loader{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:40px 20px;
color:var(--text3);
font-size:13px;
text-align:center;
}
.app-loader.sm{padding:20px 12px;font-size:12.5px}
/* ──────────────────────────────────────────────
PAGE HEADER — unified pattern for every module
──────────────────────────────────────────────
Use this on every page that has a title at the top, so the visual
hierarchy is identical across the whole app. The right-side slot
holds the primary action button (eg. "+ New Incident"). */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.page-header-text{flex:1;min-width:0}
.page-header-title{margin:0;font-size:22px;font-weight:800;color:var(--text);line-height:1.2;letter-spacing:-0.3px}
.page-header-subtitle{margin:4px 0 0;font-size:13.5px;color:var(--text3);line-height:1.45}
.page-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
@media (max-width:768px){
.page-header-title{font-size:19px}
.page-header-subtitle{font-size:12.5px}
}
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:18px;min-width:0;overflow:hidden}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.panel-title{font-size:14.5px;font-weight:700;color:var(--text)}
.panel-link{font-size:12.5px;color:var(--navy);cursor:pointer;font-weight:500}
.panel-link:hover{text-decoration:underline}
.tbl{width:100%;border-collapse:collapse;min-width:600px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px}
.tbl th{text-align:left;padding:7px 12px;font-size:11px;font-weight:700;color:var(--text3);letter-spacing:0.8px;text-transform:uppercase;border-bottom:1px solid var(--border)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text);font-size:13.5px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--bg)}
/* Closed / done records — lightly de-emphasised so live work stands out.
Restored to full opacity on hover so they stay readable. The .row-closed
class is added by the Incidents / NCR / CAPA row renderers. */
.tbl tbody tr.row-closed{opacity:.72;transition:opacity .12s ease}
.tbl tbody tr.row-closed:hover{opacity:1}
.tbl-ref{color:var(--navy);font-weight:600;cursor:pointer}
.tbl-ref:hover{text-decoration:underline}
.bdg{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap}
.b-danger{background:var(--danger-l);color:var(--danger)}
.b-warning{background:var(--warning-l);color:var(--warning)}
.b-success{background:var(--success-l);color:var(--success)}
.b-info{background:var(--steel-l);color:var(--steel)}
.b-primary{background:var(--navy-l);color:var(--navy)}
.b-orange{background:var(--safety-orange-l);color:var(--safety-orange)}
.b-gray{background:var(--slate-100);color:var(--slate-600)}
/* Legacy color classes mapped to industrial palette */
.b-red{background:var(--danger-l);color:var(--danger)}
.b-amb{background:var(--warning-l);color:var(--warning)}
.b-grn{background:var(--success-l);color:var(--success)}
.b-blu{background:var(--steel-l);color:var(--steel)}
.b-pur{background:var(--navy-l);color:var(--navy)}
.b-gry{background:var(--slate-100);color:var(--slate-600)}
.b-cor{background:var(--safety-orange-l);color:var(--safety-orange)}
.act{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.act:last-child{border-bottom:none}
.act-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.act-text{font-size:13px;line-height:1.5;color:var(--text)}
.act-time{font-size:11.5px;color:var(--text3);margin-top:2px}
.pbar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;min-width:80px}
.pfill{height:100%;border-radius:3px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-bottom:16px}
.fg{display:flex;flex-direction:column;gap:5px}
.fg.full{grid-column:1/-1}
.flbl{font-size:12.5px;font-weight:600;color:var(--text2)}
.finput,.fsel,.fta{padding:8px 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg2);font-size:13.5px;font-family:'Poppins',sans-serif;color:var(--text);outline:none;width:100%;transition:border-color 0.12s}
.finput:focus,.fsel:focus,.fta:focus{border-color:var(--navy)}
.fta{resize:vertical;min-height:80px}
/* Compact scope dropdowns in the header — auto-size to content instead of
the default full-width .fsel, sized to sit next to the search/buttons. */
.app-scope-sel{width:auto;min-width:130px;max-width:190px;padding:6px 26px 6px 10px;font-size:12.5px;font-weight:500;border-radius:8px;background-color:var(--bg);cursor:pointer;transition:border-color .12s,background-color .12s}
.app-scope-sel:hover{border-color:var(--navy);background-color:var(--bg2)}
/* When a non-Global scope is active, tint the control so it's obvious a
filter is on (avoids the "where did my data go?" confusion). */
.app-scope-active .app-scope-sel{border-color:var(--safety-orange);background-color:rgba(234,88,12,0.06)}
.app-scope-active > i[data-lucide]{color:var(--safety-orange)!important}
.upload-zone{display:block;border:1.5px dashed var(--border);border-radius:10px;padding:24px 16px;text-align:center;cursor:pointer;transition:all 0.12s;margin-bottom:0;width:100%;box-sizing:border-box}
.upload-zone:hover{border-color:var(--navy);background:var(--navy-l)}
.upload-txt{font-size:13px;color:var(--text3)}
.check-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;margin-bottom:6px;background:var(--bg2);border:1px solid var(--border);transition:all 0.15s}
.check-item.pass-done{border-color:var(--teal);background:var(--teal-l)}
.check-item.fail-done{border-color:var(--red);background:var(--red-l)}
.check-item.na-done{border-color:var(--border);background:var(--gray-l)}
.check-label{font-size:13.5px;flex:1}
.check-btns{display:flex;gap:5px;margin-left:auto}
.cbtn{padding:4px 10px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:'Poppins',sans-serif;transition:all 0.12s}
.cbtn.p{background:var(--green-l);color:var(--green)}.cbtn.p.on{background:var(--teal);color:white}
.cbtn.f{background:var(--red-l);color:var(--red)}.cbtn.f.on{background:var(--red);color:white}
.cbtn.n{background:var(--gray-l);color:var(--gray)}.cbtn.n.on{background:var(--gray);color:white}
.risk-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.rc{padding:8px 4px;border-radius:6px;text-align:center;font-size:11px;font-weight:700;cursor:pointer;transition:transform 0.1s}
.rc:hover{transform:scale(1.08)}
.rl{background:#D3EDBB;color:#2D5A0E}.rm{background:#FDDFA0;color:#92570A}
.rh{background:#FDC9B0;color:#B83D16}.rk{background:#FCBABA;color:#8B1A1A}
.risk-task-pill{display:inline-flex;align-items:center;background:#EBEBEB;color:#1a1a1a;font-size:13px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap;transition:background 0.12s;cursor:pointer;user-select:none}
.risk-task-pill:hover{background:#D9D9D9}
.risk-task-pill.active{background:#4B5563;color:#fff}
.rm-chip{display:inline-flex;align-items:center;gap:5px;background:#FFE4E6;color:#BE123C;font-size:13px;font-weight:600;padding:3px 8px 3px 10px;border-radius:20px;white-space:nowrap}
.rm-chip button{background:none;border:none;cursor:pointer;color:#BE123C;font-size:14px;line-height:1;padding:0;display:flex;align-items:center;opacity:0.7}
.rm-chip button:hover{opacity:1}
/* Task Library */
.tl-task-row{display:flex;align-items:center;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background 0.12s;gap:10px;user-select:none}
.tl-task-row:hover{background:var(--navy-l)}
.tl-task-row.active{background:var(--navy-l);border-left:3px solid var(--navy)}
.tl-task-name{flex:1;font-size:14px;font-weight:500;color:var(--text);line-height:1.3}
.tl-task-row.active .tl-task-name{color:var(--navy);font-weight:700}
.tl-task-count{flex-shrink:0;background:var(--bg3);color:var(--text2);font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px;min-width:26px;text-align:center;border:1px solid var(--border)}
.tl-task-row.active .tl-task-count{background:var(--navy);color:#fff;border-color:var(--navy)}
@media(max-width:768px){
.tl-left-panel{width:100%!important;min-width:0!important;border-right:none!important;border-bottom:1px solid var(--border)!important;max-height:200px;overflow-y:auto}
#task-library-overlay>[style*="display:flex"]:last-of-type,#task-library-overlay>div:last-of-type{flex-direction:column!important}
#tl-task-detail{padding:16px!important}
}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tab{padding:6px 13px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--bg2);color:var(--text2);transition:all 0.12s}
.tab:hover{background:var(--bg3)}
.tab.active{background:var(--navy-l);color:var(--navy);border-color:var(--navy-m);font-weight:600}
.sec-div{font-size:11.5px;font-weight:700;color:var(--text3);letter-spacing:0.8px;text-transform:uppercase;margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
/* Column resize handle (injected by js/table-resize.js).
8px-wide strip on the right edge of every resizable , with a 1px
visible tick mark by default so users can SEE where to grab. The full
strip tints brand-orange on hover/active. Double-click resets the column. */
.tbl-col-resize{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;user-select:none;z-index:5;background:transparent;transition:background .12s ease}
.tbl-col-resize::before{content:'';position:absolute;top:30%;right:3px;width:1px;height:40%;background:currentColor;opacity:.35;transition:background .12s ease, opacity .12s ease, width .12s ease}
.tbl-col-resize:hover{background:rgba(255,138,61,.10)}
.tbl-col-resize:hover::before{background:var(--brand-orange);opacity:1;width:2px;right:3px}
.tbl-col-resize:active{background:rgba(255,138,61,.18)}
.tbl-col-resize:active::before{background:var(--brand-orange);opacity:1;width:2px}
/* QR-poster button — small icon-only companion to "+ New X" primary CTAs.
Sits to the right of the main button, subtle gray, lifts on hover. */
.qr-btn{padding:8px 10px;display:inline-flex;align-items:center;justify-content:center;color:var(--text2);transition:color .15s ease, transform .15s ease}
.qr-btn:hover{color:var(--brand-orange);transform:translateY(-1px)}
.qr-btn svg{display:block}
/* Help button — circle "?" companion that sits next to the QR button.
Same outer size (32x32) so the topbar action group stays aligned. */
.help-btn{
width:32px;height:32px;padding:0;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--border);border-radius:50%;
background:transparent;color:var(--text2);
font-weight:700;font-size:13px;line-height:1;
text-decoration:none;cursor:pointer;
transition:color .15s ease, border-color .15s ease, transform .15s ease;
}
.help-btn:hover{color:var(--brand-orange);border-color:var(--brand-orange);transform:translateY(-1px)}
.help-btn:focus{outline:2px solid var(--brand-orange);outline-offset:2px}
/* Page transitions — 140ms fade-in with a 6px "settle" rise.
Old page snaps to display:none; the new page's animated entrance
covers the disappearance perceptually. Out-expo easing (the
cubic-bezier below) decelerates fast at the start, eases to a
stop — same curve Linear / Raycast use on micro-interactions. */
.page{display:none}
.page.active{display:block;animation:pageIn 140ms cubic-bezier(.16,1,.3,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.page.active{animation:none}}
.notif{position:fixed;bottom:24px;right:24px;background:#1A1A18;color:white;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:500;z-index:9999;opacity:0;transform:translateY(10px);transition:all 0.25s;pointer-events:none}
.notif.show{opacity:1;transform:translateY(0)}
.notif.error{background:var(--danger)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
/* ===== MOBILE RESPONSIVE ===== */
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);z-index:1000;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.mob-nav-inner{display:flex;justify-content:space-around;align-items:center}
.mob-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:10px;cursor:pointer;transition:all 0.15s;min-width:52px;position:relative}
.mob-nav-item.active{background:var(--navy-l)}
.mob-nav-item .mni{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:0;line-height:0}
.mob-nav-item .mni svg{width:22px;height:22px;stroke:var(--text3);stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke 0.15s}
.mob-nav-item.active .mni svg{stroke:var(--navy)}
.mob-nav-item .mnl{font-size:10px;font-weight:600;color:var(--text3)}
.mob-nav-item.active .mnl{color:var(--navy)}
.mob-nav-item .mnb{position:absolute;top:4px;right:6px;background:var(--safety-orange);color:white;font-size:8px;font-weight:700;padding:1px 4px;border-radius:10px;min-width:14px;text-align:center}
.mob-menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:998;backdrop-filter:blur(2px)}
.mob-menu-overlay.open{display:block}
.mob-drawer{position:fixed;left:0;top:0;bottom:0;width:80%;max-width:300px;background:var(--bg2);z-index:999;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;display:flex;flex-direction:column}
.mob-drawer.open{transform:translateX(0)}
.mob-header-btn{display:none;width:36px;height:36px;border-radius:9px;background:var(--bg3);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:18px}
.mob-fab{display:none;position:fixed;bottom:90px;right:20px;width:52px;height:52px;border-radius:50%;background:var(--navy);color:white;border:none;font-size:24px;cursor:pointer;box-shadow:0 4px 16px rgba(30,58,138,0.4);z-index:100;align-items:center;justify-content:center;transition:transform 0.15s}
.mob-fab:active{transform:scale(0.92)}
/* Tablet breakpoints for better responsive behavior */
@media (max-width: 1200px) {
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important}
.two-col{grid-template-columns:repeat(auto-fit,minmax(350px,1fr)) !important}
}
@media (max-width: 900px) {
.stat-grid{grid-template-columns:repeat(2,1fr) !important}
.two-col{grid-template-columns:1fr !important}
.form-grid{grid-template-columns:1fr !important}
}
@media (max-width: 768px) {
body{overflow:auto;height:auto}
.app{flex-direction:column;height:auto;min-height:100vh}
.sidebar{display:none}
.mob-nav{display:block}
.mob-header-btn{display:flex}
.mob-fab{display:flex}
.main{min-height:100vh;overflow:visible}
.topbar{padding:0 16px;height:54px;position:sticky;top:0;z-index:100}
.page-title{font-size:15px}
.topbar-right .btn-secondary{display:none}
.topbar-right .btn-primary{padding:7px 12px;font-size:13px}
.content{padding:14px;padding-bottom:90px;overflow:visible}
/* Stats grid - 2 cols on mobile */
.stat-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.stat-value{font-size:22px}
/* Two col becomes single col */
.two-col{grid-template-columns:1fr;gap:12px}
/* Tables become scrollable */
.panel{padding:14px;border-radius:12px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px}
.tbl{min-width:500px}
/* Forms */
.form-grid{grid-template-columns:1fr;gap:10px}
.fg.full{grid-column:1}
/* Stepper on mobile */
#capa-stepper{overflow-x:auto;padding-bottom:8px;gap:0}
/* Cards */
.scard-mobile{padding:14px}
/* Tabs scrollable */
.tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;gap:6px}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap;flex-shrink:0}
/* Training grid */
#course-grid{grid-template-columns:1fr 1fr !important;gap:10px}
/* Hide some table columns on mobile */
.hide-mob{display:none}
/* Better touch targets */
.btn{min-height:40px}
.nav-item{padding:11px 10px}
.check-item{padding:12px}
.cbtn{padding:8px 12px;font-size:13px}
/* Full width buttons on mobile */
.mob-full-btn{width:100%;justify-content:center}
/* Upload zone */
.upload-zone{padding:20px 16px}
/* CAPA detail */
#capa-step-content .two-col{grid-template-columns:1fr}
/* CAPA action rows - stack on mobile */
#action-rows-capa > div,
div[id^="carow"]{
grid-template-columns:1fr !important;
}
#action-rows-capa input[placeholder*="Owner"],
#action-rows-capa input[placeholder*="May"]{
width:100% !important;
min-width:0 !important;
}
}
/* ===== MOBILE CAPA STEPPER ===== */
@media (max-width: 768px) {
#capa-stepper {
flex-direction: column !important;
gap: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.capa-step-row {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 10px 0 !important;
position: relative !important;
cursor: pointer !important;
}
.capa-step-icon {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 18px !important;
flex-shrink: 0 !important;
border: 2px solid !important;
transition: all 0.2s !important;
}
.capa-step-info {
flex: 1 !important;
}
.capa-step-label {
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
}
.capa-step-sub {
font-size: 11px !important;
margin-top: 2px !important;
}
.capa-step-connector {
width: 2px !important;
height: 20px !important;
margin-left: 21px !important;
border-radius: 2px !important;
}
}
@media (max-width: 400px) {
.stat-grid{grid-template-columns:repeat(2,1fr)}
#course-grid{grid-template-columns:1fr !important}
.stat-value{font-size:20px}
}
/* ===== GHS PICTOGRAMS ===== */
.ghs-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:4px}
.ghs-icon{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:default}
.ghs-diamond{width:54px;height:54px;background:white;border:2px solid #cc0000;border-radius:4px;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.ghs-diamond-inner{transform:rotate(-45deg);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;width:38px;height:38px}
.ghs-label{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:0.3px;text-align:center;max-width:60px;line-height:1.2}
.ghs-sm .ghs-diamond{width:36px;height:36px}
.ghs-sm .ghs-diamond-inner{font-size:14px;width:24px;height:24px}
.ghs-sm .ghs-label{font-size:8px;max-width:42px}
/* ===== STEPPER FIXED ===== */
.sg-stepper {
display: flex;
align-items: flex-start;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 4px;
}
.sg-step {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
min-width: 80px;
}
.sg-step-row {
display: flex;
align-items: center;
width: 100%;
}
.sg-step-line {
flex: 1;
height: 1px;
min-width: 20px;
}
.sg-step-dot {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
flex-shrink: 0;
border: 1.5px solid;
transition: all 0.2s;
cursor: pointer;
z-index: 1;
background: var(--bg1);
}
.sg-step-label {
font-size: 11px;
font-weight: 500;
white-space: nowrap;
margin-top: 8px;
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 4px;
letter-spacing: .01em;
}
/* Modern monochrome — done steps are quiet navy outlines (not saturated
green fills). Only the active step gets a filled dot. This keeps the
goal-gradient signal but kills the early-2010s wizard look. */
.sg-step-dot.done { background: var(--bg1); border-color: var(--navy); color: var(--navy); }
.sg-step-dot.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; box-shadow: 0 0 0 3px rgba(30,58,138,.12); }
.sg-step-dot.pending{ background: var(--bg1); border-color: var(--border); color: var(--text3); cursor: default; }
.sg-step-label.done { color: var(--text2); font-weight: 500; }
.sg-step-label.active { color: var(--navy); font-weight: 600; }
.sg-step-label.pending{ color: var(--text3); }
.sg-line-done { background: var(--navy); opacity: .35; }
.sg-line-pending { background: var(--border); }
/* ===== BARE DOT-ROW STEPPER (desktop) =====
Per user spec: just a tight row of dots, top-left, no card, no
labels. Done = filled black, otherwise = white with a black
border. Hover for the step name (native tooltip). */
.sg-dots {
display: inline-flex;
align-items: center;
gap: 8px;
}
.sg-dots-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
border: 1.5px solid var(--text);
background: #fff;
flex-shrink: 0;
transition: background .12s ease, transform .12s ease;
cursor: default;
}
.sg-dots-dot[role="button"] { cursor: pointer; }
.sg-dots-dot[role="button"]:hover { transform: scale(1.15); }
.sg-dots-dot.done { background: var(--text); }
.sg-dots-dot.pending { background: #fff; }
/* Active is an OVERLAY on top of done/pending — adds the brand-orange
outer ring without changing the fill, so a completed step you're
reviewing still looks completed (black dot + orange ring). */
.sg-dots-dot.active { box-shadow: 0 0 0 2.5px var(--safety-orange); }
.sg-dots-label {
margin-left: 8px;
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
/* Chevron "path" stepper (desktop) — interlocking arrows, one per step.
The arrow shape lives on a clipped .sg-path-fill layer so the step box
itself stays rectangular and unclipped — which lets the current step
carry a straight orange line a little below the chevron. Steps overlap
so each tip nests into the next notch; the container background shows
through a thin diagonal seam so adjacent steps stay distinguishable. */
.sg-path {
display: flex;
width: 100%;
align-items: stretch;
background: var(--bg2);
border-radius: 8px;
margin: 2px 0 12px;
}
.sg-path-step {
position: relative;
flex: 1 1 0;
min-width: 0;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 20px;
margin-left: -13px;
color: var(--text3);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
cursor: default;
}
.sg-path-step:first-child { margin-left: 0; }
/* Clipped arrow background — sits behind the label. */
.sg-path-fill {
position: absolute;
inset: 0;
z-index: 0;
background: var(--bg3);
transition: background .15s ease, filter .12s ease;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
}
.sg-path-step:first-child .sg-path-fill {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}
.sg-path-step:last-child .sg-path-fill {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
}
.sg-path-step.done { color: #fff; }
.sg-path-step.done .sg-path-fill { background: #0A5E00; }
.sg-path-step.clickable { cursor: pointer; }
.sg-path-step.clickable:hover .sg-path-fill { filter: brightness(.95); }
/* Current step: a straight orange line a little below the chevron. The
step box is unclipped, so the line can sit outside the arrow. Lifted
above neighbours so the overlap can't hide it. */
.sg-path-step.viewing { z-index: 2; }
.sg-path-step.viewing::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 44px;
bottom: -6px;
height: 3px;
border-radius: 2px;
background: var(--safety-orange);
}
.sg-path-text {
position: relative;
z-index: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.sg-path-num {
position: relative;
z-index: 1;
width: 18px;
height: 18px;
flex-shrink: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
background: rgba(255, 255, 255, .2);
}
.sg-path-step.pending .sg-path-num { background: rgba(0, 0, 0, .05); color: var(--text3); }
/* ===== HSE KPI hero cards & collapsible table =====
Replaces the 6-card rainbow strip with a 2-card hero row
(LTFR + Days since last LTI) and a small inline stat strip
underneath. The monthly table hides its 12 raw-count columns
by default — Pareto: the 3 rate columns get 80% of attention. */
/* ── KPI hero row — 2 emphasis cards spanning full container width ── */
.kpi-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
width: 100%;
}
.kpi-hero-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 140px;
transition: border-color .15s, box-shadow .15s;
}
.kpi-hero-card:hover {
border-color: rgba(15,23,42,0.18);
box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}
.kpi-hero-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text3);
}
.kpi-hero-val {
font-size: 44px;
font-weight: 800;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: 8px;
}
.kpi-hero-unit { font-size: 13px; font-weight: 500; color: var(--text3); }
.kpi-hero-sub { font-size: 13px; color: var(--text2); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.kpi-hero-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; }
.kpi-hero-delta.up { color: var(--danger); } /* LTFR went up = bad */
.kpi-hero-delta.down { color: var(--success); } /* LTFR went down = good */
.kpi-hero-bench {
color: var(--text3);
font-size: 12.5px;
}
.kpi-hero-bench strong { color: var(--text2); font-weight: 600; }
/* ── KPI secondary stat strip — proper cards matching the hero
style, evenly distributed across the full container width.
Was a labelless inline strip — that read as a stranded second-
class row. Now it's a unified dashboard. */
.kpi-mini-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 14px;
width: 100%;
}
.kpi-mini {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
min-height: 88px;
transition: border-color .15s, box-shadow .15s;
}
.kpi-mini:hover {
border-color: rgba(15,23,42,0.18);
box-shadow: 0 2px 6px rgba(15,23,42,0.05);
}
.kpi-mini-label {
font-size: 11px;
font-weight: 700;
color: var(--text3);
letter-spacing: .06em;
text-transform: uppercase;
}
.kpi-mini-val {
font-size: 26px;
font-weight: 800;
line-height: 1.1;
color: var(--text);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
.kpi-mini-sub {
font-size: 12px;
color: var(--text3);
margin-top: auto;
}
@media (max-width: 700px) {
.kpi-hero { grid-template-columns: 1fr; }
.kpi-hero-val { font-size: 36px; }
.kpi-mini-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kpi-mini-val { font-size: 22px; }
}
/* Monthly table — hide raw-count columns when collapsed.
HSE has 12 raw cols (positions 2–13). QA has 15 raw cols (positions
2–16). Separate class names so each table hides its own range. */
.kpi-tbl-collapsed thead th:nth-child(n+2):nth-child(-n+13),
.kpi-tbl-collapsed tbody td:nth-child(n+2):nth-child(-n+13) {
display: none;
}
.qakpi-tbl-collapsed thead th:nth-child(n+2):nth-child(-n+16),
.qakpi-tbl-collapsed tbody td:nth-child(n+2):nth-child(-n+16) {
display: none;
}
/* QA KPI grid: centre every header + numeric cell so each label sits
directly over its column. (Single-digit values left-aligned inside
wide, header-text-sized columns read as ragged / "misaligned".) The
first column — Month/Year — stays left. */
#qakpi-monthly-table th,
#qakpi-monthly-table td { text-align: center; }
#qakpi-monthly-table th:first-child,
#qakpi-monthly-table td:first-child { text-align: left; }
/* Top-align headers so every first line sits on the same row; the second
line (✓ / Σ / %) wraps centred beneath its word instead of pushing the
single-line headers down to the vertical middle. */
#qakpi-monthly-table thead th { vertical-align: top; }
/* ===== STEP PAGER — pinned to the viewport bottom =====
Floats at the bottom of the main content column regardless of
how short the page content is. Page padding-bottom keeps content
from hiding behind it. */
.sg-pager {
position: fixed;
bottom: 0;
left: var(--sidebar);
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 14px 24px;
background: var(--bg1);
border-top: 1px solid var(--border);
z-index: 20;
}
/* Make space at the bottom of the detail page so the last bit of
content doesn't sit behind the fixed pager. */
#inc-detail,
#capa-detail,
#ncr-detail { padding-bottom: 80px; }
@media (max-width: 768px) {
.sg-pager {
left: 0;
padding: 12px 14px;
}
}
/* ===== EXPANDABLE STATUS CHIP STEPPER (desktop) =====
Replaces the wizard stepper with a compact pill that shows the
current state at a glance and reveals the full step list on click.
Same UI pattern Linear uses for issue status, Notion for page
properties, GitHub for PR review state. */
.sg-chip-wrap {
position: relative;
display: inline-block;
margin-bottom: 20px;
}
.sg-chip {
appearance: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 10px 7px 12px;
background: var(--bg1);
border: 1px solid var(--border);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: var(--text);
cursor: pointer;
transition: background .12s ease, border-color .12s ease;
white-space: nowrap;
}
.sg-chip:hover { background: var(--bg2); border-color: var(--text3); }
.sg-chip[aria-expanded="true"] { background: var(--bg2); border-color: var(--navy); }
.sg-chip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.sg-chip-name { font-weight: 600; color: var(--text); }
.sg-chip-sep { color: var(--text3); margin: 0 -2px; }
.sg-chip-ratio { color: var(--text3); font-variant-numeric: tabular-nums; }
.sg-chip-chev { color: var(--text3); margin-left: 2px; transition: transform .15s ease; }
.sg-chip[aria-expanded="true"] .sg-chip-chev { transform: rotate(180deg); }
.sg-chip-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 280px;
background: var(--bg1);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(15, 23, 42, .12), 0 2px 4px rgba(15, 23, 42, .04);
padding: 12px;
z-index: 50;
}
.sg-chip-menu[hidden] { display: none; }
.sg-chip-progress {
height: 4px;
background: var(--border);
border-radius: 999px;
overflow: hidden;
margin-bottom: 6px;
}
.sg-chip-progress-fill {
height: 100%;
background: var(--navy);
border-radius: 999px;
transition: width .25s ease;
}
.sg-chip-progress-label {
font-size: 11px;
font-weight: 500;
color: var(--text3);
letter-spacing: .02em;
margin-bottom: 10px;
}
.sg-chip-list { display: flex; flex-direction: column; gap: 2px; }
.sg-chip-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 8px;
border-radius: 6px;
font-size: 13px;
cursor: default;
transition: background .1s ease;
}
.sg-chip-row[role="menuitem"] { cursor: pointer; }
.sg-chip-row[role="menuitem"]:hover { background: var(--bg2); }
.sg-chip-row-icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sg-chip-row-name { flex: 1; }
.sg-chip-row.done { color: var(--text2); }
.sg-chip-row.done .sg-chip-row-icon { color: var(--navy); }
.sg-chip-row.active { color: var(--navy); font-weight: 600; background: rgba(30,58,138,.06); }
.sg-chip-row.active .sg-chip-row-icon { color: var(--navy); }
.sg-chip-row.pending { color: var(--text3); }
.sg-chip-row.pending .sg-chip-row-icon { color: var(--border); }
/* Mobile stepper — proper vertical timeline (dot + connector below it,
label to the right). Replaces a broken layout where each connector
sat to the LEFT of its dot instead of between dots.
Used by CAPA, Incidents, NCR — fixing this once fixes all three. */
@media (max-width: 768px) {
.sg-stepper {
flex-direction: column;
width: auto;
overflow-x: visible;
overflow-y: visible;
padding: 4px 0;
gap: 0;
}
.sg-step {
flex-direction: row;
align-items: flex-start;
flex: none;
width: 100%;
gap: 14px;
padding: 0;
min-width: 0;
}
.sg-step-rail {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
min-width: 28px;
}
.sg-step-rail .sg-step-line {
width: 2px;
height: 22px;
min-width: 0;
flex: none;
margin: 4px 0;
border-radius: 2px;
}
.sg-step-dot { width: 28px; height: 28px; font-size: 11px; }
.sg-step-label {
margin: 0;
font-size: 13.5px;
font-weight: 600;
text-align: left;
padding: 5px 0 0 0;
flex: 1;
white-space: normal;
line-height: 1.35;
cursor: pointer;
}
.sg-step-label.active { font-size: 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
USER PROFILE PAGES (#p-profile and #p-people)
═══════════════════════════════════════════════════════════════════════════ */
.profile-header { margin-bottom: 14px; }
.prof-hdr-row {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.prof-avatar-wrap { position: relative; flex-shrink: 0; }
.prof-avatar {
width: 88px; height: 88px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--navy-l, #E0E7FF); color: var(--navy, #1E3A8A);
font-size: 30px; font-weight: 700;
overflow: hidden; border: 3px solid var(--border, #E2E8F0);
background-size: cover; background-position: center;
}
.prof-avatar-edit {
position: absolute; bottom: 2px; right: 2px;
width: 28px; height: 28px; border-radius: 50%;
background: var(--navy, #1E3A8A); color: #fff;
border: 2px solid var(--bg1, #fff);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.prof-hdr-info { flex: 1; min-width: 200px; }
.prof-name { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--text, #0F172A); }
.prof-meta { font-size: 13.5px; color: var(--text2, #475569); margin-top: 4px; }
.prof-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prof-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 999px;
background: var(--bg3, #F1F5F9);
border: 1px solid var(--border, #E2E8F0);
font-size: 12px; font-weight: 600;
color: var(--text2, #475569);
}
.prof-pill i { width: 12px; height: 12px; }
.prof-hdr-actions { display: flex; gap: 8px; flex-shrink: 0; }
.prof-tabs {
display: flex; gap: 4px;
margin-bottom: 14px;
border-bottom: 1px solid var(--border, #E2E8F0);
overflow-x: auto;
scrollbar-width: none;
}
.prof-tabs::-webkit-scrollbar { display: none; }
.prof-tab {
background: none; border: none;
padding: 10px 16px;
font-size: 13.5px; font-weight: 600;
color: var(--text3, #64748B);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
white-space: nowrap;
}
.prof-tab:hover { color: var(--text, #0F172A); }
.prof-tab.active { color: var(--navy, #1E3A8A); border-bottom-color: var(--navy, #1E3A8A); }
.prof-row {
display: grid; grid-template-columns: 180px 1fr;
gap: 12px; padding: 10px 0;
border-bottom: 1px solid var(--border, #E2E8F0);
font-size: 13.5px;
}
.prof-row:last-child { border-bottom: none; }
.prof-row-lbl { color: var(--text3, #64748B); font-weight: 600; }
.prof-row-val { color: var(--text, #0F172A); }
.prof-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prof-list { display: flex; flex-direction: column; }
.prof-list-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 10px 0;
border-bottom: 1px solid var(--border, #E2E8F0);
font-size: 13.5px;
}
.prof-list-row:last-child { border-bottom: none; }
.prof-activity-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.prof-act-card {
background: var(--bg1, #fff); border: 1px solid var(--border, #E2E8F0);
border-radius: 12px; padding: 18px;
cursor: pointer;
transition: background .15s, border-color .15s, transform .1s;
}
.prof-act-card:hover { background: var(--bg2, #F8FAFC); border-color: var(--navy, #1E3A8A); }
.prof-act-card:active { transform: scale(0.99); }
.prof-act-ico {
width: 32px; height: 32px; border-radius: 8px;
background: color-mix(in oklab, var(--navy, #1E3A8A) 10%, transparent);
color: var(--navy, #1E3A8A);
display: flex; align-items: center; justify-content: center;
margin-bottom: 10px;
}
.prof-act-ico i { width: 18px; height: 18px; }
.prof-act-val { font-size: 28px; font-weight: 800; line-height: 1.05; color: var(--text, #0F172A); }
.prof-act-lbl { font-size: 12px; color: var(--text3, #64748B); margin-top: 2px; }
/* People list */
.people-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--border, #E2E8F0);
cursor: pointer;
transition: background .12s;
}
.people-row:last-child { border-bottom: none; }
.people-row:hover { background: var(--bg2, #F8FAFC); }
.people-av {
width: 38px; height: 38px; border-radius: 50%;
background: var(--navy-l, #E0E7FF); color: var(--navy, #1E3A8A);
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
flex-shrink: 0;
}
.people-info { flex: 1; min-width: 0; }
.people-name { font-size: 14.5px; font-weight: 700; color: var(--text, #0F172A); }
.people-sub { font-size: 12px; color: var(--text3, #64748B); margin-top: 2px; }
@media (max-width: 768px) {
.prof-row { grid-template-columns: 1fr; gap: 2px; }
.prof-row-lbl { font-size: 11.5px; }
.prof-form { grid-template-columns: 1fr; }
.prof-name { font-size: 18px; }
.prof-avatar { width: 72px; height: 72px; font-size: 24px; }
.prof-hdr-actions { width: 100%; }
.prof-hdr-actions .btn { flex: 1; justify-content: center; }
.prof-act-val { font-size: 24px; }
}
/* ===== USER ACTION MENU + KPI CARD BOARD ===== */
.sidebar-footer{position:relative}
.user-row.user-action-row{justify-content:space-between;gap:8px}
.user-identity{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.user-gear{color:var(--text3);font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;background:none;border:none;cursor:pointer;padding:4px}
.user-row:hover .user-gear{color:var(--text)}
.user-gear:hover,.user-gear.active{background:var(--navy-l);color:var(--navy);border-color:var(--navy-m)}
.user-actions-menu{display:none;position:absolute;left:8px;right:8px;bottom:58px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.12);padding:7px;z-index:1002}
.user-actions-menu.open{display:block}
.user-action{display:flex;align-items:center;gap:9px;width:100%;border:none;background:transparent;color:var(--text2);padding:9px 10px;border-radius:9px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.user-action:hover{background:var(--bg3);color:var(--text)}
.user-action.danger{color:var(--coral)}
.user-action.theme-action{justify-content:flex-start}
.theme-switch{margin-left:auto;width:34px;height:20px;border-radius:20px;background:var(--bg3);border:1px solid var(--border);position:relative;transition:all .18s;flex-shrink:0}
.theme-switch span{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--text3);transition:all .18s}
.theme-switch.on{background:var(--navy);border-color:var(--navy)}
.theme-switch.on span{left:16px;background:white}
.kpi-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.kpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;transition:transform .12s,box-shadow .12s,border-color .12s}
.kpi-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.06);border-color:var(--navy-m)}
.kpi-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.kpi-name{font-size:14.5px;font-weight:700;line-height:1.35;color:var(--text)}
.kpi-category{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.7px;text-transform:uppercase;margin-top:3px}
.kpi-metric-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.kpi-value{font-size:30px;font-weight:700;line-height:.95;letter-spacing:-1px;color:var(--text)}
.kpi-unit{font-size:11.5px;font-weight:600;color:var(--text3);margin-left:3px}
.kpi-target{text-align:right;font-size:12px;color:var(--text2);line-height:1.45}
.kpi-target strong{display:block;color:var(--text);font-size:13px}
.kpi-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:2px}
.kpi-meta-box{background:var(--bg);border-radius:9px;padding:8px 9px;min-width:0}
.kpi-meta-label{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.6px;text-transform:uppercase;margin-bottom:2px}
.kpi-meta-value{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-card.on-track .kpi-value{color:var(--teal)}
.kpi-card.watch .kpi-value{color:var(--amber)}
.kpi-card.off-track .kpi-value{color:var(--coral)}
.kpi-card-empty{grid-column:1/-1;text-align:center;padding:28px;background:var(--bg2);border:1px dashed var(--border);border-radius:14px;color:var(--text3);font-size:13.5px}
@media (max-width:768px){.user-actions-menu{bottom:62px}.kpi-board{grid-template-columns:1fr}.kpi-meta{grid-template-columns:1fr 1fr}}
/* ===== SDS PDF READER ===== */
.sds-reader-wrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg2)}
.sds-reader-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--bg3);flex-wrap:wrap}
.sds-reader-title{font-size:13.5px;font-weight:700;color:var(--text)}
.sds-reader-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sds-reader{width:100%;height:520px;border:0;background:var(--bg3)}
.sds-reader-empty{height:360px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--text2);background:linear-gradient(135deg,var(--bg2),var(--bg3))}
.sds-reader-empty-icon{font-size:36px;margin-bottom:8px}
.sds-reader-note{font-size:12.5px;color:var(--text3);line-height:1.5;margin-top:6px}
@media (max-width:768px){.sds-reader{height:420px}.sds-reader-toolbar{align-items:flex-start}.sds-reader-actions{width:100%}.sds-reader-actions .btn{flex:1;justify-content:center}}
/* ── CAPA table: sortable + selectable ── */
.capa-sort-hd { cursor:pointer; user-select:none; white-space:nowrap; transition:background 0.15s; }
.capa-sort-hd:hover { background:var(--bg2); }
/* Per-column sort indicator now lives on the | ::after — see "COLUMN
FILTERS" block in app.html. The old *-sort-icon span inside each header
is kept as an empty placeholder for backwards-compat. The previous
navy-fill on the active sort column is gone — the ▲/▼ glyph carries the
signal now and the fill made the header look highlighted/disabled. */
#capa-table tbody tr .capa-row-cb { opacity:0; transition:opacity 0.12s; cursor:pointer; accent-color:var(--navy); }
#capa-table tbody tr:hover .capa-row-cb,
#capa-table tbody tr.capa-row-selected .capa-row-cb { opacity:1; }
#capa-table tbody tr.capa-row-selected { background:var(--navy-l) !important; }
/* PTW row checkbox — same hover-to-reveal pattern as CAPA. Always
visible once checked so the user can see what's selected even when
their pointer is elsewhere. */
#ptw-tbody tr .ptw-row-cb { opacity:0; transition:opacity 0.12s; cursor:pointer; accent-color:var(--navy); }
#ptw-tbody tr:hover .ptw-row-cb,
#ptw-tbody tr .ptw-row-cb:checked,
#ptw-tbody tr .ptw-row-cb:focus { opacity:1; }
/* ── NCR table: sortable + selectable ── */
.ncr-sort-hd { cursor:pointer; user-select:none; white-space:nowrap; transition:background 0.15s; }
.ncr-sort-hd:hover { background:var(--bg2); }
#ncr-table tbody tr .ncr-row-cb { opacity:0; transition:opacity 0.12s; cursor:pointer; accent-color:var(--navy); }
#ncr-table tbody tr:hover .ncr-row-cb,
#ncr-table tbody tr.ncr-row-selected .ncr-row-cb { opacity:1; }
#ncr-table tbody tr.ncr-row-selected { background:var(--navy-l) !important; }
/* ── Inspections table: selectable rows (mirrors NCR) ── */
#ins-table-body tr .ins-row-cb { opacity:0; transition:opacity 0.12s; cursor:pointer; accent-color:var(--navy); }
#ins-table-body tr:hover .ins-row-cb,
#ins-table-body tr.ins-row-selected .ins-row-cb { opacity:1; }
#ins-table-body tr.ins-row-selected { background:var(--navy-l) !important; }
/* ── Contractors table: selectable rows (mirrors NCR) ── */
#co-tbody tr .co-row-cb { opacity:0; transition:opacity 0.12s; cursor:pointer; accent-color:var(--navy); }
#co-tbody tr:hover .co-row-cb,
#co-tbody tr.co-row-selected .co-row-cb { opacity:1; }
#co-tbody tr.co-row-selected { background:var(--navy-l) !important; }
/* Short vertical tick divider between header columns — mirrors the
look of the table-resize handle's ::before (1px wide, ~40% height,
centered vertically, 0.35 opacity). Sits on the LEFT of every
sortable header AFTER the first. Independent of table-resize so it
always renders. Scoped to the contractors page. */
#p-contractors table.tbl thead th.co-sort-hd { position: relative; }
#p-contractors table.tbl thead th.co-sort-hd + th.co-sort-hd::before {
content: '';
position: absolute;
left: 0;
top: 30%;
height: 40%;
width: 1px;
background: currentColor;
opacity: 0.35;
pointer-events: none;
}
/* Suppress the table-resize handle's own ::before tick on this page so
we don't double up where table-resize wired (e.g. between Type and
Status). The handle div itself stays — drag-to-resize still works. */
#p-contractors .tbl-col-resize::before { display: none; }
/* ── Actions table: sortable columns ── */
.act-sort-hd { cursor:pointer; user-select:none; white-space:nowrap; transition:background 0.15s; }
.act-sort-hd:hover { background:var(--bg2); }
/* ── Module filter dropdown (shared across all modules) ── */
.mod-filter-menu { display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,0.13);padding:6px;min-width:178px;z-index:600; }
.mod-filter-item { display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--text2);transition:background 0.1s;user-select:none;white-space:nowrap; }
.mod-filter-item:hover { background:var(--bg3); }
.mod-filter-item.mfi-active { color:var(--navy);font-weight:600;background:var(--navy-l); }
.mfi-dot { width:14px;height:14px;border-radius:3px;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent; }
.mod-filter-item.mfi-active .mfi-dot { background:var(--navy);border-color:var(--navy);color:#fff; }
/* ── Font Scale (Accessibility) ──
body is height:100vh + overflow:hidden (internal scroll model), so a plain
`zoom` renders the body taller/shorter than the viewport and the bottom gets
clipped (zoom up) or leaves a gap (zoom down). Counter-scale the height by the
same factor so the zoomed box still equals exactly one viewport. */
body.font-90 { zoom: 0.90; height: calc(100vh / 0.90); }
body.font-95 { zoom: 0.95; height: calc(100vh / 0.95); }
body.font-110 { zoom: 1.10; height: calc(100vh / 1.10); }
body.font-115 { zoom: 1.15; height: calc(100vh / 1.15); }
body.font-125 { zoom: 1.25; height: calc(100vh / 1.25); }
/* The flex shell (.app) also pins to 100vh, so under zoom it renders oversized
and the bottom gets clipped by body's overflow:hidden. Counter-scale it by the
same factor so it fits exactly one viewport and inner scroll works. */
body.font-90 .app { height: calc(100vh / 0.90); }
body.font-95 .app { height: calc(100vh / 0.95); }
body.font-110 .app { height: calc(100vh / 1.10); }
body.font-115 .app { height: calc(100vh / 1.15); }
body.font-125 .app { height: calc(100vh / 1.25); }
/* Font-scale picker in Settings */
.fs-swatch { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 14px;border-radius:10px;border:2px solid var(--border);cursor:pointer;transition:border-color 0.15s,background 0.15s;background:var(--bg);user-select:none;flex:1 }
.fs-swatch:hover { border-color:var(--navy-m);background:var(--navy-l); }
.fs-swatch.fs-active { border-color:var(--navy);background:var(--navy-l); }
.fs-swatch .fs-letter { font-weight:700;color:var(--text);line-height:1; }
.fs-swatch .fs-label { font-size:11px;font-weight:600;color:var(--text3);letter-spacing:0.4px;text-transform:uppercase; }
.fs-swatch.fs-active .fs-label { color:var(--navy); }
/* Topbar font-scale quick buttons */
.fs-quick { display:flex;align-items:center;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:2px; }
.fs-quick-btn { border:none;background:transparent;cursor:pointer;border-radius:6px;padding:4px 7px;font-weight:700;color:var(--text2);transition:background 0.12s,color 0.12s;line-height:1; }
.fs-quick-btn:hover { background:var(--bg);color:var(--navy); }
.fs-quick-btn.fs-q-active { background:var(--navy);color:#fff; }
/* ── Table Row Density ── */
body.density-compact .tbl td, body.density-compact .tbl th { padding:3px 10px; }
body.density-comfortable .tbl td, body.density-comfortable .tbl th { padding:12px 12px; }
/* ── Compact Sidebar ── */
body.sidebar-compact .sidebar { width:60px;transition:width 0.2s ease;overflow-x:hidden;overflow-y:auto; }
body.sidebar-compact .sidebar:hover { width:var(--sidebar); }
/* Collapse text/action elements to zero width so the icon is truly centred */
body.sidebar-compact .sidebar .nav-text,
body.sidebar-compact .sidebar .nav-eye,
body.sidebar-compact .sidebar .drag-handle,
body.sidebar-compact .sidebar .logo-name,
body.sidebar-compact .sidebar .logo-qhse,
body.sidebar-compact .sidebar .logo-tag {
max-width:0;overflow:hidden;opacity:0;pointer-events:none;
white-space:nowrap;transition:max-width 0.2s ease,opacity 0.15s;flex-shrink:1;
}
/* On hover, reveal item names AND the full ENSURE wordmark (all horizontal).
Group headers / group padding stay collapsed so nothing shifts vertically —
the logo area is a fixed height in both states (see logo rules below). */
body.sidebar-compact .sidebar:hover .nav-text,
body.sidebar-compact .sidebar:hover .nav-eye,
body.sidebar-compact .sidebar:hover .drag-handle,
body.sidebar-compact .sidebar:hover .logo-name {
max-width:300px;opacity:1;pointer-events:auto;
}
/* Notification badge: has min-width and padding that resist max-width:0, so
we need display:none to remove it from the flex flow entirely. Restore on hover. */
body.sidebar-compact .sidebar .nav-badge { display:none; }
body.sidebar-compact .sidebar:hover .nav-badge { display:inline-block; }
/* Nav item: remove gap so collapsed items take no space; icon centres perfectly */
body.sidebar-compact .sidebar .nav-item { justify-content:center;padding:9px 0;gap:0; }
body.sidebar-compact .sidebar:hover .nav-item { justify-content:flex-start;padding:9px 10px;gap:9px; }
/* Group labels are fully collapsed (zero height) in compact mode AND stay
collapsed on hover — so the icon column is tight (no gaps) and never reflows
vertically when hovering. The full sidebar still shows the headers. */
body.sidebar-compact .sidebar .nav-label { opacity:0;max-height:0;overflow:hidden;padding:0;margin:0;pointer-events:none; }
/* Uniform icon spacing — no section padding in either state, so groups don't
add vertical gaps in compact and don't reflow on hover. Each nav-item's own
9px vertical padding gives even spacing. */
body.sidebar-compact .sidebar .nav-group { padding:0 8px; }
body.sidebar-compact .sidebar:hover .nav-group { padding:0 8px; }
/* Hide neutral-skin's "forest sliver" active indicator in compact mode — it
sits at left:-4px and visually shifts the centred icon to the right */
body.sidebar-compact .sidebar .nav-item.active::before { display:none; }
body.sidebar-compact .sidebar:hover .nav-item.active::before { display:block; }
/* Constrain nav-item width to a 40px square centered in the 60px sidebar,
so the active background pill is icon-sized and clearly centered */
body.sidebar-compact .sidebar .nav-item { width:40px;margin-left:auto;margin-right:auto; }
body.sidebar-compact .sidebar:hover .nav-item { width:auto;margin-left:0;margin-right:0; }
/* User row at bottom: show only the gear, hide avatar + name */
body.sidebar-compact .sidebar .user-identity { display:none; }
body.sidebar-compact .sidebar .user-row { justify-content:center; }
body.sidebar-compact .sidebar .user-gear { margin:0; }
body.sidebar-compact .sidebar:hover .user-identity { display:flex; }
body.sidebar-compact .sidebar:hover .user-row { justify-content:space-between; }
/* Logo area — keep the compact "E." mark (same height) on hover too, so the
header never changes height between states. */
body.sidebar-compact .sidebar .logo { padding:18px 0;display:flex;align-items:center;justify-content:center;position:relative; }
/* On hover, lay the logo out like the full sidebar (block) so the ENSURE
wordmark renders properly. Padding keeps it the same 75px height as the
collapsed "E." state, so nothing shifts vertically. */
body.sidebar-compact .sidebar:hover .logo { padding:20px 16px 16px;display:block;text-align:center; }
/* Compact-only "E." mark: "E" in text colour, "." in safety orange. Hidden on hover. */
body.sidebar-compact .sidebar .logo::before,
body.sidebar-compact .sidebar .logo::after {
font-family:'Fugaz One',cursive;
font-weight:400;
font-size:26px;
line-height:1;
letter-spacing:0;
}
body.sidebar-compact .sidebar .logo::before { content:"E"; color:var(--text); }
body.sidebar-compact .sidebar .logo::after { content:"."; color:var(--safety-orange); }
/* On hover the full ENSURE wordmark is shown, so hide the compact "E." mark. */
body.sidebar-compact .sidebar:hover .logo::before,
body.sidebar-compact .sidebar:hover .logo::after { display:none; }
/* Footer / user row */
body.sidebar-compact .sidebar .user-row { padding:10px 0;justify-content:center; }
body.sidebar-compact .sidebar:hover .user-row { padding:10px 8px;justify-content:flex-start; }
/* ── Auth / Login ── */
#auth-screen {
display:none;
position:fixed;
inset:0;
z-index:9999;
overflow:hidden;
}
#auth-screen.visible { display:flex; }
/* ── Left panel: hero image ── */
.auth-left {
flex:0 0 58%;
position:relative;
overflow:hidden;
}
.auth-left-img {
position:absolute;
inset:0;
background:url('../images/hero-worker.jpg') 85% center/cover no-repeat;
transform:scaleX(-1);
}
.auth-left-fade {
position:absolute;
inset:0;
background:linear-gradient(to right, transparent 45%, #ffffff 100%);
pointer-events:none;
z-index:2;
}
/* ── Right panel: login ── */
.auth-right {
flex:1;
background:#ffffff;
display:flex;
align-items:center;
justify-content:center;
padding:40px 48px;
overflow-y:auto;
}
/* ── Animated background blobs (confined to left panel) ── */
.auth-bg-shapes { position:absolute; inset:0; pointer-events:none; z-index:1; }
.auth-shape {
position:absolute;
border-radius:50%;
filter:blur(100px);
}
.auth-shape-1 {
width:100%; height:100%;
background:radial-gradient(circle, rgba(234,88,12,0.32) 0%, transparent 60%);
top:-20%; left:-20%;
animation:authFloat1 26s ease-in-out infinite;
}
.auth-shape-2 {
width:90%; height:90%;
background:radial-gradient(circle, rgba(234,88,12,0.24) 0%, transparent 60%);
bottom:-20%; right:-20%;
animation:authFloat2 32s ease-in-out infinite;
}
.auth-shape-3 {
width:80%; height:80%;
background:radial-gradient(circle, rgba(30,30,60,0.22) 0%, transparent 60%);
top:-20%; right:-20%;
animation:authFloat3 22s ease-in-out infinite;
}
.auth-shape-4 {
width:80%; height:80%;
background:radial-gradient(circle, rgba(30,30,60,0.18) 0%, transparent 60%);
bottom:-20%; left:-20%;
animation:authFloat2 36s ease-in-out infinite reverse;
}
@keyframes authFloat1 {
0%,100% { transform:translate(0,0) scale(1); }
33% { transform:translate(60px,45px) scale(1.06); }
66% { transform:translate(-30px,60px) scale(0.94); }
}
@keyframes authFloat2 {
0%,100% { transform:translate(0,0) scale(1); }
33% { transform:translate(-50px,-35px) scale(1.08); }
66% { transform:translate(40px,-50px) scale(0.93); }
}
@keyframes authFloat3 {
0%,100% { transform:translate(0,0) scale(1); }
50% { transform:translate(-40px,35px) scale(1.1); }
}
.auth-card {
background:#FFFFFF;
border:1px solid var(--border);
border-radius:20px;
padding:40px;
width:100%;
max-width:400px;
box-shadow:0 8px 40px rgba(0,0,0,0.08);
position:relative;
z-index:1;
}
/* ── Responsive: hide image panel on small screens ── */
@media (max-width:860px) {
.auth-left { display:none; }
.auth-right { padding:24px; background:var(--bg); }
}
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-logo .logo-qhse { font-size:11px; color:var(--text3); letter-spacing:3px; font-weight:700; margin-top:4px; text-transform:uppercase; text-align:center; }
.auth-title { font-size:18px; font-weight:700; color:var(--text); margin-bottom:6px; }
.auth-sub { font-size:13.5px; color:var(--text3); margin-bottom:24px; }
.auth-err { display:none; background:var(--danger-l); color:var(--danger); border:1px solid #fca5a5; border-radius:8px; padding:10px 14px; font-size:13.5px; margin-bottom:16px; }
.auth-err.visible { display:block; }
.auth-sso-btn {
width:100%; display:flex; align-items:center; gap:10px;
padding:10px 14px; margin-bottom:8px;
background:#fff; border:1px solid var(--border); border-radius:10px;
font-size:13.5px; font-weight:500; color:var(--text2);
cursor:not-allowed; opacity:0.65;
transition:border-color .15s, box-shadow .15s;
}
.auth-sso-btn:not([disabled]) { cursor:pointer; opacity:1; }
.auth-sso-btn:not([disabled]):hover { border-color:var(--navy); box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.auth-sso-btn span:first-of-type { flex:1; text-align:left; }
.auth-sso-soon {
font-size:10.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
color:#fff; background:var(--text3); border-radius:4px; padding:2px 6px;
}
/* ── Incident table: sortable headers ── */
.inc-sort-hd {
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: background 0.15s;
}
.inc-sort-hd:hover { background: var(--bg2); }
/* ── Incident table: row selection ── */
#incidents-table tbody tr { position: relative; }
#incidents-table tbody tr td:first-child { width: 32px; padding: 8px 6px; }
#incidents-table tbody tr .inc-row-cb { opacity: 0; transition: opacity 0.12s; cursor: pointer; accent-color: var(--navy); }
#incidents-table tbody tr:hover .inc-row-cb,
#incidents-table tbody tr.inc-row-selected .inc-row-cb { opacity: 1; }
#incidents-table tbody tr.inc-row-selected { background: var(--navy-l) !important; }
#incidents-table tbody tr.inc-row-selected td { border-color: var(--navy-m, #b8cee8); }
/* ── Bulk action bar ── */
#inc-bulk-bar { transition: opacity 0.2s; }
/* ===== SETTINGS MODULE ===== */
.settings-tab { display: block; }
/* Vertical settings nav */
.s-vnav-item { display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--text2);transition:all 0.12s;margin-bottom:2px; }
.s-vnav-item:hover { background:var(--bg3);color:var(--text); }
.s-vnav-item.active { background:var(--navy-l);color:var(--navy);font-weight:600; }
.s-vnav-icon { font-size:14px;width:20px;text-align:center;flex-shrink:0; }
/* Toggle switch */
.s-toggle-row { display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);gap:12px; }
.s-toggle-row:last-child { border-bottom:none; }
.s-toggle-label { font-size:13.5px;font-weight:600;color:var(--text); }
.s-toggle-desc { font-size:12.5px;color:var(--text3);margin-top:2px; }
.s-toggle { position:relative;display:inline-flex;width:38px;height:22px;flex-shrink:0;cursor:pointer; }
.s-toggle input { opacity:0;width:0;height:0; }
.s-toggle span { position:absolute;inset:0;border-radius:11px;background:var(--slate-300);transition:background .2s; }
.s-toggle span::before { content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:white;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2); }
.s-toggle input:checked + span { background:var(--navy); }
.s-toggle input:checked + span::before { transform:translateX(16px); }
/* Colour swatches */
.colour-swatch { width:26px;height:26px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .15s;flex-shrink:0; }
.colour-swatch.active,.colour-swatch:hover { border-color:var(--text);transform:scale(1.12); }
/* Alert rule row */
.alert-rule-row { background:var(--bg3);border-radius:8px;padding:10px 12px; }
/* ══════════════════════════════════════
JHA — JOB HAZARD ANALYSIS
══════════════════════════════════════ */
.jha-step-card { background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:14px;transition:box-shadow .15s; }
.jha-step-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.08); }
.jha-step-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.jha-step-num { font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.6px;text-transform:uppercase;background:var(--navy-l);padding:3px 10px;border-radius:20px; }
.jha-risk-row { background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px; }
.jha-risk-row:last-child { margin-bottom:0; }
.jha-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100;display:none;align-items:flex-start;justify-content:center;padding:48px 16px 16px;overflow-y:auto; }
.jha-picker-box { background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:22px 24px;width:100%;max-width:620px;box-shadow:0 8px 40px rgba(0,0,0,.18); }
.jha-picker-list { max-height:360px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg1); }
.jha-picker-row { padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s; }
.jha-picker-row:last-child { border-bottom:none; }
.jha-picker-row:hover { background:var(--navy-l); }
.jha-doc-item { display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s; }
.jha-doc-item:last-child { border-bottom:none; }
.jha-doc-item:hover { background:var(--bg3); }
.jha-doc-item input[type=checkbox] { margin-top:2px;flex-shrink:0; }
.jha-doc-chip { display:inline-flex;align-items:center;gap:4px;background:var(--navy-l);color:var(--navy);border:1px solid #c7d2fe;border-radius:20px;padding:4px 10px 4px 8px;font-size:13px;font-weight:600; }
/* ══════════════════════════════════════
MODULE LOCK / UPGRADE GATE
══════════════════════════════════════ */
/* Locked sidebar nav item */
.nav-item.nav-locked { opacity: 0.55; cursor: pointer; position: relative; }
.nav-item.nav-locked:hover { opacity: 0.75; background: var(--bg3); }
.nav-item.nav-locked .nav-lock-badge {
display: inline-flex; align-items: center; gap: 2px;
margin-left: auto; flex-shrink: 0;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white; border-radius: 20px;
padding: 2px 6px; font-size: 10px; font-weight: 700;
white-space: nowrap; letter-spacing: 0.3px;
}
.nav-lock-badge svg { width:10px;height:10px;display:inline-block;vertical-align:middle;flex-shrink:0; }
/* Hide the lock badge in compact sidebar (icon-only mode) */
body.sidebar-compact .sidebar .nav-item.nav-locked:not(:hover) .nav-lock-badge { display:none; }
/* Upgrade modal */
.upgrade-overlay {
position: fixed; inset: 0; z-index: 2200;
background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center;
padding: 24px; opacity: 0; pointer-events: none;
transition: opacity 0.2s;
}
.upgrade-overlay.open { opacity: 1; pointer-events: all; }
.upgrade-modal {
background: var(--bg2); border: 1px solid var(--border);
border-radius: 20px; padding: 40px 36px 32px;
max-width: 420px; width: 100%; text-align: center;
box-shadow: 0 24px 80px rgba(0,0,0,0.22);
transform: translateY(16px); transition: transform 0.25s;
}
.upgrade-overlay.open .upgrade-modal { transform: translateY(0); }
.upgrade-crown {
width: 64px; height: 64px; border-radius: 18px;
background: linear-gradient(135deg,#fef3c7,#fde68a);
border: 2px solid #f59e0b;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px; font-size: 30px;
}
.upgrade-modal h2 { font-size: 20px; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.upgrade-modal p { font-size: 13.5px; color: var(--text3); margin: 0 0 24px; line-height: 1.5; }
.upgrade-modal .upgrade-mod-name {
display: inline-block; background: var(--navy-l); color: var(--navy);
border-radius: 8px; padding: 4px 12px; font-weight: 700;
font-size: 13px; margin-bottom: 20px;
}
.upgrade-actions { display: flex; gap: 10px; justify-content: center; }
/* In-app confirm dialog — replaces native window.confirm() */
.confirm-overlay {
/* Sits above every other modal in the app (SA modals are z-index 9000,
onboarding modals 9998). A confirm dialog spawned from inside another
modal must be reachable, so this lives at the top of the stack. */
position: fixed; inset: 0; z-index: 10050;
background: rgba(0,0,0,0.45); backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center;
padding: 24px; opacity: 0; pointer-events: none;
transition: opacity 0.18s;
}
.confirm-overlay.open { opacity: 1; pointer-events: all; }
.confirm-modal {
background: var(--bg2); border: 1px solid var(--border);
border-radius: 14px; padding: 24px 26px 20px;
max-width: 440px; width: 100%;
box-shadow: 0 24px 64px rgba(0,0,0,0.22);
transform: translateY(12px); transition: transform 0.22s;
}
.confirm-overlay.open .confirm-modal { transform: translateY(0); }
.confirm-title {
font-size: 16px; font-weight: 700; color: var(--text);
margin: 0 0 8px; letter-spacing: -0.01em;
}
.confirm-message {
font-size: 13.5px; color: var(--text2); line-height: 1.55;
margin: 0 0 20px;
}
.confirm-actions {
display: flex; gap: 8px; justify-content: flex-end;
}
.confirm-actions .btn { padding: 9px 16px; }
.btn-danger {
background: var(--danger); color: #fff;
}
.btn-danger:hover { background: #9F1818; }
/* ── Risk Register row hover-actions ──
Quick-action buttons (edit / mark-reviewed / delete) are absolutely
positioned at the right edge of each row, hidden until hover. */
.risk-row .risk-actions { display: none !important; }
.risk-row:hover .risk-actions { display: inline-flex !important; }
.risk-row:hover { background: var(--bg1); }
/* ── Action Tracker row hover-actions ──
Quick-action buttons (mark complete / reopen / edit) absolutely
positioned at the right edge of each row, hidden until hover. */
.act-row .act-row-actions { display: none !important; }
.act-row:hover .act-row-actions { display: inline-flex !important; }
.act-row:hover { background: var(--bg1); }
/* ── Action Tracker — Things-3-style grouped list ──
Personal task inbox, vertical list grouped by time bucket. */
.act-list { display: flex; flex-direction: column; gap: 18px; padding: 12px 4px; }
.act-section { }
.act-section-header {
display: flex; align-items: center; gap: 8px;
width: 100%;
padding: 6px 4px 8px;
font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
color: var(--text2);
background: none; border: none; cursor: pointer;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.act-section-header:hover { color: var(--text); }
.act-section-caret { color: var(--text3); font-size: 10px; }
.act-section-label { }
.act-section-count {
margin-left: auto;
background: var(--bg3); color: var(--text3);
padding: 1px 8px; border-radius: 10px;
font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.act-section-body { display: flex; flex-direction: column; }
.act-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 11px 8px;
border-bottom: 1px solid var(--bg1);
cursor: pointer;
position: relative;
transition: background .1s ease;
}
.act-row:hover { background: var(--bg1); }
.act-row.done { opacity: .5; }
.act-row.done .act-row-title { text-decoration: line-through; }
/* Big circle checkbox on the LEFT — Things 3 / Reminders pattern. */
.act-check {
flex-shrink: 0;
width: 22px; height: 22px; border-radius: 50%;
border: 1.5px solid var(--text3);
background: var(--bg2);
color: var(--success);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; line-height: 1;
padding: 0; margin-top: 2px;
transition: all .12s ease;
}
.act-check:hover { border-color: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, .12); }
.act-row.done .act-check { background: var(--success); border-color: var(--success); color: #fff; }
.act-row-body { flex: 1; min-width: 0; }
.act-row-title {
font-size: 14px; font-weight: 500; color: var(--text);
line-height: 1.35;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.act-row-meta {
margin-top: 4px;
display: flex; gap: 8px; align-items: center;
font-size: 12px; color: var(--text3); flex-wrap: wrap;
}
.act-src {
font-size: 11px; font-weight: 600;
background: var(--bg3); color: var(--text2);
padding: 2px 7px; border-radius: 4px;
cursor: pointer;
transition: background .12s ease;
}
.act-src:hover { background: var(--navy-l); color: var(--navy); }
.act-due { font-size: 12px; color: var(--text3); }
.act-due.late { color: var(--danger); font-weight: 600; }
/* Hover-only quick actions. */
.act-row-actions {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
display: none; gap: 4px;
background: var(--bg2); padding: 3px 5px; border-radius: 6px;
box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.act-row:hover .act-row-actions { display: inline-flex; }
.act-row-actions button {
background: none; border: none; cursor: pointer;
padding: 3px 7px; border-radius: 4px;
font-size: 14px; color: var(--text2); line-height: 1;
}
.act-row-actions button:hover { background: var(--bg3); }
.act-empty {
text-align: center; padding: 60px 20px;
color: var(--text3); font-size: 13px;
}
|