/* ============================================================
   portal.css — extracted verbatim from novapave_dashboard_v11.html
   Block 1: lines 11–1163 | Block 2: lines 4486–4624
   DO NOT EDIT — regenerated by Phase F1
============================================================ */

/* ============================================================
   NOVAPAVE STAFF PORTAL — HSBC-INSPIRED DESIGN SYSTEM v3
   Primary Red: #DB0011 | Dark: #1C1C1C | Font: Arial
============================================================ */
:root {
  --red: #DB0011;
  --red-dark: #A8000D;
  --red-light: #FFF0F0;
  --red-mid: #F5C6C6;
  --dark: #1C1C1C;
  --dark-mid: #333333;
  --dark-light: #555555;
  --grey: #767676;
  --grey-light: #999999;
  --border: #D8D8D8;
  --border-light: #EBEBEB;
  --bg: #F5F5F5;
  --bg-mid: #FAFAFA;
  --white: #FFFFFF;
  --green: #007A4C;
  --green-bg: #E6F3EE;
  --amber: #D4781A;
  --amber-bg: #FEF3E3;
  --blue: #0044CC;
  --blue-bg: #E8EEFF;
  --nav1-h: 40px;
  --nav2-h: 64px;
  --nav-total: 104px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial,'Helvetica Neue',Helvetica,sans-serif; background:var(--bg); color:var(--dark-mid); font-size:14px; line-height:1.5; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:#f0f0f0; }
::-webkit-scrollbar-thumb { background:#ccc; }

/* ============================================================ LOGIN */
#loginScreen { min-height:100vh; display:flex; flex-direction:column; background:var(--white); }

/* Login tier 1 */
.login-t1 {
  background:var(--dark); border-bottom:none;
  height:var(--nav1-h); display:flex; align-items:center;
  justify-content:center; font-size:12px;
}
.login-t1-inner {
  max-width:1400px; width:100%; margin:0 auto; padding:0 48px;
  display:flex; align-items:center; justify-content:space-between; height:100%;
}
.login-t1-tabs { display:flex; gap:0; height:100%; }
.login-t1-tab {
  padding:0 18px; height:100%; display:flex; align-items:center;
  font-size:12px; color:rgba(255,255,255,0.65); cursor:pointer; border-bottom:2px solid transparent;
  font-weight:700; letter-spacing:0.3px;
}
.login-t1-tab.active { color:white; border-bottom-color:var(--red); }
.login-t1-right { display:flex; align-items:center; gap:16px; color:rgba(255,255,255,0.65); }
.login-t1-right a { color:rgba(255,255,255,0.65); text-decoration:none; }
.login-t1-right a:hover { color:var(--red); }

/* Login tier 2 */
.login-t2 {
  background:var(--white); border-bottom:1px solid var(--border);
  height:var(--nav2-h); display:flex; align-items:center;
  justify-content:center;
}
.login-t2-inner {
  max-width:1400px; width:100%; margin:0 auto; padding:0 48px;
  display:flex; align-items:center; justify-content:space-between; height:100%;
}
.login-logo { display:flex; align-items:center; gap:14px; }
.login-logo img { height:36px; object-fit:contain; }
.login-logo-text { font-size:20px; font-weight:900; color:var(--dark); letter-spacing:2px; }
.login-t2-nav { display:flex; gap:28px; }
.login-t2-nav span { font-size:13px; color:var(--dark-mid); cursor:pointer; }
.login-t2-nav span:hover { color:var(--red); }

/* Login body */
.login-body { flex:1; padding:48px; max-width:1400px; margin:0 auto; width:100%; box-sizing:border-box; }
.login-form-wrap { max-width:680px; }
.login-page-title { font-size:28px; font-weight:300; color:var(--dark); margin-bottom:28px; line-height:1.3; }

/* Important notice box */
.login-notice {
  border:1px solid #C8D8E8; background:#F0F5FA;
  padding:16px 20px; margin-bottom:28px;
  display:flex; gap:14px; position:relative;
}
.notice-icon {
  width:28px; height:28px; background:#0044CC; color:white;
  border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:700;
  flex-shrink:0; margin-top:2px;
}
.notice-content { flex:1; }
.notice-label { font-size:12px; font-weight:700; color:var(--dark); letter-spacing:0.5px; margin-bottom:6px; }
.notice-text { font-size:13px; color:var(--dark-mid); line-height:1.6; }
.notice-close {
  position:absolute; top:10px; right:12px;
  background:none; border:none; font-size:18px;
  color:var(--grey); cursor:pointer; line-height:1; padding:2px;
}
.notice-close:hover { color:var(--dark); }

/* Login form */
.login-field-label { font-size:14px; color:var(--dark); margin-bottom:8px; }
.login-input-wrap {
  display:flex; align-items:center;
  border:1px solid var(--border); background:white;
  margin-bottom:16px; max-width:480px;
}
.login-input-wrap:focus-within { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.login-input-wrap input {
  flex:1; padding:11px 14px; border:none; outline:none;
  font-size:14px; color:var(--dark); background:transparent;
}
.login-input-icon { padding:0 14px; font-size:15px; color:var(--grey); }
.login-helper { font-size:12px; color:var(--blue); cursor:pointer; margin-bottom:16px; display:flex; align-items:center; gap:4px; }
.login-helper:hover { text-decoration:underline; }
.login-remember { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--dark-mid); cursor:pointer; margin-bottom:20px; }
.login-remember input[type=checkbox] { width:16px; height:16px; accent-color:var(--red); cursor:pointer; }
.login-error { background:#FFF0F0; border-left:3px solid var(--red); padding:10px 14px; font-size:12px; color:var(--red); margin-bottom:16px; display:none; max-width:480px; }
.login-continue-btn {
  padding:12px 32px; background:#999; color:white; border:none;
  font-size:14px; font-weight:700; cursor:not-allowed;
  letter-spacing:0.3px; transition:background 0.15s;
  display:block; margin-bottom:20px;
}
.login-continue-btn.active { background:var(--red); cursor:pointer; }
.login-continue-btn.active:hover { background:var(--red-dark); }
.login-not-reg { font-size:13px; color:var(--blue); cursor:pointer; display:flex; align-items:center; gap:4px; }
.login-not-reg:hover { text-decoration:underline; }
.login-connect { margin-top:40px; padding-top:24px; border-top:1px solid var(--border); }
.login-connect-title { font-size:15px; font-weight:700; color:var(--dark); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.login-connect-text { font-size:12px; color:var(--grey); }
.login-footer {
  background:var(--dark); color:#aaa; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.login-footer-inner {
  max-width:1400px; width:100%; margin:0 auto; padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.login-footer-links { display:flex; gap:0; }
.login-footer-links span {
  padding:0 14px; border-right:1px solid #444;
  cursor:pointer; color:#aaa;
}
.login-footer-links span:first-child { padding-left:0; }
.login-footer-links span:last-child { border-right:none; }
.login-footer-links span:hover { color:white; }

/* ============================================================ APP SHELL */
#app { display:none; min-height:100vh; }

/* NAV TIER 1 — thin utility bar */
.app-t1 {
  position:fixed; top:0; left:0; right:0; height:var(--nav1-h);
  background:var(--dark); border-bottom:none;
  display:flex; align-items:center; justify-content:center;
  z-index:400; font-size:12px;
}
.app-t1-left { display:flex; align-items:center; gap:0; height:100%; }
.cw {
  max-width:1400px; margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  height:100%; padding:0 48px;
}

.t1-tab {
  height:100%; padding:0 16px; display:flex; align-items:center;
  font-size:12px; font-weight:700; color:rgba(255,255,255,0.65); cursor:pointer;
  border-bottom:2px solid transparent; transition:all 0.1s; letter-spacing:0.3px;
}
.t1-tab.active { color:white; border-bottom-color:var(--red); }
.t1-tab:hover:not(.active) { color:white; }
.app-t1-right { display:flex; align-items:center; gap:16px; color:rgba(255,255,255,0.65); }
.t1-date { font-size:12px; color:rgba(255,255,255,0.55); }
.t1-user { font-size:12px; font-weight:700; color:rgba(255,255,255,0.85); }
.t1-sep { color:rgba(255,255,255,0.2); }
.t1-signout {
  background:var(--red); border:none; font-size:11px; color:white;
  cursor:pointer; font-weight:700; padding:4px 14px; letter-spacing:0.3px;
  transition:background 0.15s;
}
.t1-signout:hover { background:#a80009; }
/* NOTIFICATION BELL */
.notif-bell-wrap { position:relative; }
.t1-bell { background:none; border:none; cursor:pointer; font-size:16px; padding:2px 4px; position:relative; line-height:1; color:rgba(255,255,255,0.85); }
.t1-bell:hover { color:#fff; }
.notif-badge { position:absolute; top:-4px; right:-6px; background:#DB0011; color:#fff; font-size:9px; font-weight:900; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; pointer-events:none; border:1.5px solid #1C1C1C; }
.notif-dropdown { position:absolute; top:calc(100% + 10px); right:0; width:320px; background:#fff; border:1px solid var(--border); box-shadow:0 8px 32px rgba(0,0,0,.18); z-index:900; }
.notif-drop-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 10px; border-bottom:1px solid var(--border); }
.notif-drop-header span { font-size:13px; font-weight:800; color:var(--dark); }
.notif-drop-header button { background:none; border:none; font-size:11px; color:var(--red); cursor:pointer; font-weight:700; padding:0; }
.notif-item { display:flex; gap:10px; align-items:flex-start; padding:10px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; }
.notif-item:hover { background:var(--bg); }
.notif-item.unread { background:#FFF5F5; }
.notif-item-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.notif-item-body { flex:1; min-width:0; }
.notif-item-text { font-size:12px; color:var(--dark); line-height:1.4; }
.notif-item-time { font-size:10px; color:var(--grey); margin-top:2px; }
.notif-drop-footer { padding:10px 16px; text-align:center; }
.notif-drop-footer a { font-size:12px; color:var(--red); font-weight:700; cursor:pointer; text-decoration:none; }
.notif-drop-footer a:hover { text-decoration:underline; }
.notif-empty { padding:24px 16px; text-align:center; font-size:12px; color:var(--grey); }
/* MESSAGE CENTRE */
.msg-filter-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; }
.msg-filter-tab { padding:9px 20px; font-size:12px; font-weight:700; color:var(--grey); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s,border-color .15s; }
.msg-filter-tab.active,.msg-filter-tab:hover { color:var(--red); border-bottom-color:var(--red); }
.msg-thread-item { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; }
.msg-thread-item:hover { background:var(--red-light); }
.msg-thread-item.unread { background:#FFF8F8; border-left:3px solid var(--red); }
.msg-thread-item.unread .msg-thread-subject { font-weight:900; color:var(--dark); }
.msg-thread-avatar { width:36px; height:36px; border-radius:50%; background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.msg-thread-avatar.system { background:var(--red); }
.msg-thread-body { flex:1; min-width:0; }
.msg-thread-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.msg-thread-from { font-size:12px; font-weight:700; color:var(--dark); }
.msg-thread-time { font-size:10px; color:var(--grey); white-space:nowrap; flex-shrink:0; }
.msg-thread-subject { font-size:13px; font-weight:700; color:var(--dark); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-thread-preview { font-size:12px; color:var(--grey); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-unread-dot { width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; margin-top:6px; }
.msg-bubble-wrap { margin-bottom:16px; }
.msg-bubble-wrap.mine { text-align:right; }
.msg-bubble { display:inline-block; max-width:80%; padding:10px 14px; font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.msg-bubble.theirs { background:var(--bg); border:1px solid var(--border); color:var(--dark); border-radius:0 12px 12px 12px; text-align:left; }
.msg-bubble.mine { background:var(--dark); color:#fff; border-radius:12px 0 12px 12px; }
.msg-bubble.system-bubble { background:#FFF0F0; border:1px solid var(--red); color:var(--dark); border-radius:8px; text-align:left; }
.msg-bubble-meta { font-size:10px; color:var(--grey); margin-top:4px; }
.msg-reply-box { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.msg-compose-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:800; justify-content:center; align-items:center; padding:20px; }
.msg-compose-overlay.open { display:flex; }
.msg-compose-box { background:#fff; max-width:560px; width:100%; padding:28px; position:relative; max-height:90vh; overflow-y:auto; }
.msg-empty { text-align:center; padding:48px 20px; color:var(--grey); }
.msg-empty-icon { font-size:40px; margin-bottom:12px; }
.msg-empty-text { font-size:15px; font-weight:700; }

/* NAV TIER 2 — main nav with logo */
.app-t2 {
  position:fixed; top:var(--nav1-h); left:0; right:0; height:var(--nav2-h);
  background:var(--white); border-bottom:2px solid var(--border);
  z-index:400; display:flex; align-items:stretch;
}
.app-t2-inner {
  display:flex; align-items:stretch; width:100%; padding:0 48px;
  max-width:1400px; margin:0 auto;
}
.app-logo-wrap {
  display:flex; align-items:center; gap:12px;
  padding-right:32px; border-right:1px solid var(--border);
  margin-right:8px; flex-shrink:0;
}
.app-logo-wrap img { height:30px; object-fit:contain; }
.app-logo-text { font-size:16px; font-weight:900; color:var(--dark); letter-spacing:2px; }

/* Main nav items */
.app-main-nav { display:flex; align-items:stretch; flex:1; }
.hn-item {
  padding:0 18px; display:flex; align-items:center;
  font-size:13px; font-weight:700; color:var(--dark-mid);
  cursor:pointer; border-bottom:3px solid transparent;
  letter-spacing:0.2px; transition:all 0.1s; white-space:nowrap;
  text-decoration:none; border-top:3px solid transparent;
}
.hn-item:hover { color:var(--dark); background:#FAFAFA; }
.hn-item.active { color:var(--red); border-bottom-color:var(--red); }
.hn-dropdown { position:relative; display:flex; align-items:stretch; }
.hn-dropdown > .hn-item { gap:5px; }
.hn-drop-arrow { font-size:9px; opacity:0.6; }
.hn-drop-menu {
  display:none; position:absolute; top:100%; left:0;
  background:var(--white); border:1px solid var(--border);
  border-top:3px solid var(--red); min-width:200px;
  box-shadow:0 4px 16px rgba(0,0,0,0.12); z-index:500;
}
.hn-dropdown:hover > .hn-drop-menu { display:block; }

/* Nav item sub-label (HSBC style) */
.hn-item-inner { display:flex; flex-direction:column; justify-content:center; line-height:1; }
.hn-item-sublabel { font-size:9.5px; color:var(--grey); font-weight:400; letter-spacing:0; margin-top:2px; white-space:nowrap; }
.hn-item:hover .hn-item-sublabel { color:var(--dark-mid); }
.hn-item.active .hn-item-sublabel { color:var(--red); }
.hn-drop-item {
  display:block; padding:11px 18px; font-size:13px;
  color:var(--dark-mid); cursor:pointer; border-bottom:1px solid var(--border-light);
  transition:all 0.1s; text-decoration:none; font-weight:400;
}
.hn-drop-item:last-child { border-bottom:none; }
.hn-drop-item:hover { background:var(--red-light); color:var(--red); padding-left:22px; }
.hn-drop-item.active { background:var(--red-light); color:var(--red); font-weight:700; border-left:3px solid var(--red); }
.hn-drop-sep { height:1px; background:var(--border); margin:4px 0; }
/* Flat icon sizing */
.bi { font-size:14px; vertical-align:-1px; margin-right:5px; }
.hn-drop-item .bi { font-size:13px; }
.mob-nav-item .bi { font-size:15px; margin-right:8px; }
/* Role-gated visibility */
.supervisor-plus-only { display:none; }

/* Avatar */
.app-t2-right { display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.app-avatar {
  width:36px; height:36px; background:var(--red); color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0;
}
.app-user-name { font-size:12px; font-weight:700; color:var(--dark); white-space:nowrap; }
.app-user-role { font-size:11px; color:var(--grey); white-space:nowrap; }

/* MAIN CONTENT */

/* Dark footer */
#appFooter {
  background:var(--dark); color:rgba(255,255,255,0.45);
  padding:18px 0; font-size:11px; letter-spacing:0.2px;
  display:flex; align-items:center; flex-shrink:0;
}
#appFooter .cw { justify-content:space-between; height:auto; align-items:center; }
#appFooter a { color:rgba(255,255,255,0.45); text-decoration:none; }
#appFooter a:hover { color:rgba(255,255,255,0.8); }
.footer-sep { color:rgba(255,255,255,0.15); margin:0 8px; }
#mainContent { margin-top:var(--nav-total); min-height:calc(100vh - var(--nav-total)); display:flex; flex-direction:column; }
#subHeader {
  background:var(--white); border-bottom:1px solid var(--border);
  height:40px; display:flex; align-items:center; justify-content:center;
  position:sticky; top:var(--nav-total); z-index:100;
}
.sh-breadcrumb { font-size:12px; color:var(--grey); }
.sh-breadcrumb span { color:var(--dark-mid); font-weight:700; }
.sh-date { font-size:12px; color:var(--grey); }
#contentArea { flex:1; padding:28px 48px; max-width:1400px; margin:0 auto; width:100%; box-sizing:border-box; }
.section-view { display:none; }
.section-view.active { display:block; }

/* ============================================================ CLAIM FORM */
.fin-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:24px; }
.fin-tab { padding:10px 22px; font-size:13px; font-weight:700; color:var(--grey); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; }
.fin-tab.active { color:var(--red); border-bottom-color:var(--red); }
.fin-tab-content { display:none; }
.fin-tab-content.active { display:block; }
.claim-form-wrap { max-width:920px; }
.claim-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
@media(max-width:600px){ .claim-meta-grid{grid-template-columns:1fr;} }
.claim-field { display:flex; flex-direction:column; gap:5px; }
.claim-field label { font-size:11px; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:.05em; }
.claim-field input, .claim-field select { padding:9px 12px; border:1px solid var(--border); font-size:13px; outline:none; font-family:inherit; background:white; }
.claim-field input:focus, .claim-field select:focus { border-color:var(--red); }
.claim-items-table { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:12px; }
.claim-items-table th { background:var(--dark); color:white; padding:9px 10px; text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.claim-items-table td { padding:6px 6px; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.claim-items-table tr:hover td { background:var(--red-light); }
.claim-items-table input { width:100%; padding:6px 8px; border:1px solid var(--border); font-size:12px; outline:none; font-family:inherit; box-sizing:border-box; background:white; }
.claim-items-table input:focus { border-color:var(--red); }
.claim-total-row { display:flex; flex-direction:column; align-items:flex-end; gap:0; padding:14px 0; border-top:2px solid var(--dark); margin-bottom:20px; }
.claim-total-line { display:flex; align-items:center; justify-content:flex-end; gap:20px; width:100%; }
.claim-total-line+.claim-total-line { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.claim-total-label { font-size:13px; font-weight:700; color:var(--grey); }
.claim-total-val { font-size:24px; font-weight:900; color:var(--dark); min-width:160px; text-align:right; font-variant-numeric:tabular-nums; }
.claim-approved-label { font-size:13px; font-weight:700; color:var(--green); }
.claim-approved-val { font-size:18px; font-weight:900; color:var(--green); min-width:160px; text-align:right; font-variant-numeric:tabular-nums; }
/* Required field asterisk */
.req { color:var(--red); margin-left:2px; }
/* Per-row attachment */
.claim-attach-wrap { position:relative; display:inline-block; }
.claim-attach-btn { background:none; border:1px solid var(--border); padding:3px 7px; cursor:pointer; font-size:11px; border-radius:2px; color:var(--grey); white-space:nowrap; transition:border-color .15s,color .15s; }
.claim-attach-btn:hover,.claim-attach-btn.has-files { border-color:var(--red); color:var(--red); }
.claim-attach-sheet { position:absolute; top:100%; right:0; background:#fff; border:1px solid var(--border); box-shadow:0 4px 16px rgba(0,0,0,.12); z-index:200; min-width:170px; padding:4px 0; }
.claim-attach-opt { display:flex; align-items:center; gap:8px; padding:9px 14px; font-size:12px; cursor:pointer; color:var(--dark); transition:background .1s; white-space:nowrap; }
.claim-attach-opt:hover { background:var(--red-light); color:var(--red); }
/* 3-option main attachment bar */
.attach-option-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.attach-opt-btn { display:flex; align-items:center; gap:7px; padding:10px 16px; border:2px dashed var(--border); background:none; cursor:pointer; font-size:12px; color:var(--grey); transition:border-color .15s,color .15s,background .15s; flex:1; justify-content:center; min-width:120px; }
.attach-opt-btn:hover { border-color:var(--red); color:var(--red); background:var(--red-light); }
/* RFP MODULE */
.rfp-items-table { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:12px; }
.rfp-items-table th { background:var(--dark); color:white; padding:9px 10px; text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.rfp-items-table td { padding:6px 6px; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.rfp-items-table tr:hover td { background:var(--red-light); }
.rfp-items-table input,.rfp-items-table select { width:100%; padding:6px 8px; border:1px solid var(--border); font-size:12px; outline:none; font-family:inherit; box-sizing:border-box; background:white; }
.rfp-items-table input:focus { border-color:var(--red); }
.rfp-total-row { display:flex; justify-content:flex-end; align-items:center; gap:20px; padding:14px 0; border-top:2px solid var(--dark); margin-bottom:20px; }
.rfp-total-label { font-size:13px; font-weight:700; color:var(--grey); }
.rfp-total-val { font-size:22px; font-weight:900; color:var(--dark); min-width:160px; text-align:right; font-variant-numeric:tabular-nums; }
.rfp-priority-badge { padding:2px 10px; font-size:11px; font-weight:700; border-radius:2px; }
.rfp-priority-badge.urgent { background:#FFF0F0; color:var(--red); border:1px solid var(--red); }
.rfp-priority-badge.normal { background:var(--bg); color:var(--grey); border:1px solid var(--border); }
.rfp-detail-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:700; justify-content:center; align-items:flex-start; padding:40px 20px; overflow-y:auto; }
.rfp-detail-overlay.open { display:flex; }
.rfp-detail-box { background:white; max-width:860px; width:100%; padding:32px; position:relative; }
.claim-receipt-upload { border:2px dashed var(--border); padding:18px; text-align:center; cursor:pointer; font-size:13px; color:var(--grey); transition:border-color .2s,background .2s; margin-bottom:10px; }
.claim-receipt-upload:hover { border-color:var(--red); background:var(--red-light); }
.claim-receipt-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.claim-receipt-item { display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); padding:5px 10px; font-size:12px; max-width:260px; }
.claim-receipt-item span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.claim-receipt-item button { background:none; border:none; color:var(--red); cursor:pointer; font-size:15px; line-height:1; padding:0; flex-shrink:0; }
.claim-action-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.claim-hist-card { background:var(--white); border:1px solid var(--border); border-left:3px solid var(--border); padding:14px 18px; margin-bottom:10px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; cursor:pointer; transition:border-color .15s; }
.claim-hist-card:hover { border-left-color:var(--red); background:var(--red-light); }
.claim-hist-info { flex:1; min-width:0; }
.claim-hist-ref { font-size:11px; color:var(--grey); font-weight:700; letter-spacing:.05em; }
.claim-hist-name { font-size:14px; font-weight:700; color:var(--dark); }
.claim-hist-meta { font-size:12px; color:var(--grey); margin-top:2px; }
.claim-hist-amount { font-size:18px; font-weight:900; color:var(--dark); white-space:nowrap; }
.claim-hist-status { padding:3px 12px; font-size:11px; font-weight:700; white-space:nowrap; }
.claim-hist-status.pending { background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber); }
.claim-hist-status.approved { background:var(--green-bg); color:var(--green); border:1px solid var(--green); }
.claim-mgmt-stats { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.cms-card { flex:1; min-width:120px; background:var(--white); border:1px solid var(--border); border-top:3px solid var(--border); padding:12px 16px; }
.cms-card.red { border-top-color:var(--red); }
.cms-card.amber { border-top-color:var(--amber); }
.cms-card.green { border-top-color:var(--green); }
.cms-card.dark { border-top-color:var(--dark); }
.cms-label { font-size:11px; font-weight:700; color:var(--grey); letter-spacing:.04em; text-transform:uppercase; }
.cms-val { font-size:22px; font-weight:900; color:var(--dark); margin-top:4px; }
.claim-hist-status.rejected { background:#FFF0F0; color:var(--red); border:1px solid var(--red); }
.claim-detail-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:700; justify-content:center; align-items:flex-start; padding:40px 20px; overflow-y:auto; }
.claim-detail-overlay.open { display:flex; }
.claim-detail-box { background:white; max-width:820px; width:100%; padding:32px; position:relative; }
@media print {
  #loginScreen,#app>.app-t1,#app>.app-t2,#mobileMenu,#subHeader,#appFooter,.fin-tabs,.claim-action-bar,.btn,.btn-outline,.btn-red,.claim-receipt-upload,.claim-receipt-list,.claim-no-hist { display:none !important; }
  .section-view { display:none !important; }
  #sec-claim { display:block !important; }
  #mainContent { margin-top:0 !important; }
  .claim-print-header { display:flex !important; }
  .claim-form-wrap { max-width:100%; }
  body,html { background:white !important; }
}
.claim-print-header { display:none; align-items:center; justify-content:space-between; margin-bottom:24px; padding-bottom:16px; border-bottom:3px solid #1C1C1C; }
.claim-print-logo { font-size:20px; font-weight:900; letter-spacing:2px; }
.claim-print-title { font-size:16px; font-weight:700; text-align:right; }
.claim-print-subtitle { font-size:12px; color:#666; text-align:right; margin-top:2px; }
.claim-sig-row { display:flex; gap:40px; margin-top:32px; }
.claim-sig-box { flex:1; border-top:1px solid #333; padding-top:8px; font-size:11px; color:#666; }

/* ============================================================ FINANCE MODULE */
.finance-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.finance-kpi { background:var(--white); border:1px solid var(--border); padding:16px; }
.finance-kpi .fk-label { font-size:11px; color:var(--grey); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.finance-kpi .fk-value { font-size:22px; font-weight:700; }
.finance-kpi.green .fk-value { color:var(--green); }
.finance-kpi.red .fk-value { color:var(--red); }
.finance-kpi.amber .fk-value { color:var(--amber); }
.finance-kpi.blue .fk-value { color:var(--blue); }
.fin-server-msg { background:var(--amber-bg); border:1px solid var(--amber); padding:16px 20px; margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.fin-server-msg .fsm-icon { font-size:20px; }
.fin-server-msg .fsm-text { font-size:13px; color:var(--dark-mid); line-height:1.6; }
.fin-server-msg .fsm-text b { color:var(--dark); }
.fin-server-msg code { background:var(--bg); padding:2px 6px; font-size:12px; }
.fin-open-btn { background:var(--red); color:white; border:none; padding:8px 20px; font-size:13px; font-weight:700; cursor:pointer; letter-spacing:.3px; }
.fin-open-btn:hover { background:var(--red-dark); }

/* ============================================================ EXCEL LOADER */
.xl-dropzone { border:2px dashed var(--border); padding:40px; text-align:center; cursor:pointer; margin-bottom:20px; transition:border-color .2s,background .2s; }
.xl-dropzone:hover { border-color:var(--red); background:var(--red-light); }
.xl-dropzone input[type=file] { display:none; }
.xl-dropzone .xl-icon { font-size:36px; margin-bottom:10px; }
.xl-dropzone .xl-title { font-size:15px; font-weight:700; color:var(--dark); margin-bottom:4px; }
.xl-dropzone .xl-hint { font-size:12px; color:var(--grey); }
.xl-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:20px; }
.xl-stat { background:var(--white); border:1px solid var(--border); border-left:3px solid var(--red); padding:14px; }
.xl-stat .xs-label { font-size:11px; color:var(--grey); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.xl-stat .xs-val { font-size:20px; font-weight:700; color:var(--dark); }
.xl-sheet-tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:2px solid var(--border); overflow-x:auto; }
.xl-sheet-tab { padding:8px 18px; font-size:12px; font-weight:700; color:var(--grey); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; }
.xl-sheet-tab.active { color:var(--red); border-bottom-color:var(--red); }
.xl-table-wrap { overflow-x:auto; border:1px solid var(--border); max-height:480px; overflow-y:auto; }
.xl-table-wrap table { border-collapse:collapse; font-size:12px; width:100%; }
.xl-table-wrap th { background:var(--bg); border:1px solid var(--border); padding:7px 10px; font-weight:700; font-size:11px; color:var(--grey); white-space:nowrap; position:sticky; top:0; z-index:2; }
.xl-table-wrap td { border:1px solid var(--border-light); padding:6px 10px; white-space:nowrap; }
.xl-table-wrap tr:hover td { background:var(--red-light); }
.xl-loaded-name { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:10px 16px; background:var(--green-bg); border:1px solid var(--green); }
.xl-loaded-name .xl-fname { font-size:13px; font-weight:700; color:var(--green); flex:1; }
.xl-change-btn { font-size:12px; color:var(--grey); cursor:pointer; background:none; border:none; text-decoration:underline; }
.xl-change-btn:hover { color:var(--dark); }

/* ============================================================ HR ATTENDANCE */
.att-date-bar { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.att-date-bar input[type=date] { padding:8px 12px; border:1px solid var(--border); font-size:13px; outline:none; }
.att-date-bar input[type=date]:focus { border-color:var(--red); }
.att-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-bottom:20px; }
.att-card { background:var(--white); border:1px solid var(--border); padding:14px; }
.att-card .att-name { font-size:13px; font-weight:700; color:var(--dark); margin-bottom:2px; }
.att-card .att-role { font-size:11px; color:var(--grey); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border-light); }
.att-btn-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.att-btn { padding:5px 10px; border:none; font-size:11px; font-weight:700; cursor:pointer; border-radius:2px; transition:opacity .1s; }
.att-btn.present { background:var(--green-bg); color:var(--green); border:1px solid var(--green); }
.att-btn.absent { background:#FFF0F0; color:var(--red); border:1px solid var(--red); }
.att-btn.leave { background:var(--amber-bg); color:var(--amber); border:1px solid var(--amber); }
.att-btn.half { background:var(--blue-bg); color:var(--blue); border:1px solid var(--blue); }
.att-btn.active-st { opacity:1; box-shadow:0 0 0 2px currentColor; }
.att-btn:not(.active-st) { opacity:0.45; }
.att-status-badge { display:inline-block; padding:2px 8px; font-size:11px; font-weight:700; }
.att-status-badge.present { background:var(--green-bg); color:var(--green); }
.att-status-badge.absent { background:#FFF0F0; color:var(--red); }
.att-status-badge.leave { background:var(--amber-bg); color:var(--amber); }
.att-status-badge.half { background:var(--blue-bg); color:var(--blue); }
.att-status-badge.none { background:var(--bg); color:var(--grey); }
.att-summary-table { width:100%; border-collapse:collapse; font-size:13px; }
.att-summary-table th { background:var(--bg); padding:9px 12px; text-align:left; font-size:11px; color:var(--grey); font-weight:700; border-bottom:2px solid var(--border); }
.att-summary-table td { padding:9px 12px; border-bottom:1px solid var(--border-light); }
.att-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; }
.att-tab { padding:10px 20px; font-size:13px; font-weight:700; color:var(--grey); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.att-tab.active { color:var(--red); border-bottom-color:var(--red); }
.att-tab-content { display:none; }
.att-tab-content.active { display:block; }

/* ============================================================ LEAVE MANAGEMENT */
.leave-bal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:20px;}
.leave-bal-card{background:var(--white);border:1px solid var(--border);padding:16px 14px;text-align:center;}
.leave-bal-card .lbc-type{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);margin-bottom:6px;}
.leave-bal-card .lbc-num{font-size:28px;font-weight:800;color:var(--dark);line-height:1;}
.leave-bal-card .lbc-sub{font-size:11px;color:var(--grey-light);margin-top:4px;}
.leave-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border-light);background:var(--white);}
.leave-row:last-child{border-bottom:none;}
.leave-row-avatar{width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.leave-row-info{flex:1;min-width:0;}
.leave-row-name{font-size:13px;font-weight:700;color:var(--dark);}
.leave-row-meta{font-size:11px;color:var(--grey);margin-top:2px;}
.leave-status-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:2px;letter-spacing:.4px;text-transform:uppercase;flex-shrink:0;}
.leave-status-badge.pending{background:var(--amber-bg);color:var(--amber);}
.leave-status-badge.approved{background:var(--green-bg);color:var(--green);}
.leave-status-badge.rejected{background:var(--red-light);color:var(--red);}
.leave-type-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:2px;background:var(--blue-bg);color:var(--blue);flex-shrink:0;}

/* ============================================================ OVERTIME */
.ot-summary-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.ot-summary-card{flex:1;min-width:130px;background:var(--white);border:1px solid var(--border);padding:14px 16px;}
.ot-summary-card .osc-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);}
.ot-summary-card .osc-val{font-size:22px;font-weight:800;color:var(--dark);margin-top:4px;}
.ot-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border-light);background:var(--white);}
.ot-row:last-child{border-bottom:none;}
.ot-row-info{flex:1;min-width:0;}
.ot-row-name{font-size:13px;font-weight:700;color:var(--dark);}
.ot-row-meta{font-size:11px;color:var(--grey);margin-top:2px;}
.ot-hours-badge{font-size:12px;font-weight:800;color:var(--blue);background:var(--blue-bg);padding:4px 10px;border-radius:2px;flex-shrink:0;}

/* ============================================================ EMPLOYEE MANAGEMENT */
/* ── Stats bar ── */
.emp-stats-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:stretch;}
.emp-stat-box{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:14px 20px;min-width:80px;text-align:center;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.emp-stat-box.active-box{border-left:3px solid #007a4c;}
.emp-stat-box.total-box{border-left:3px solid var(--red);}
.emp-stat-box.ex-box{border-left:3px solid #aaa;}
.emp-stat-box.mgmt-box{border-left:3px solid #7b3fa8;}
.emp-stat-box .esb-num{font-size:26px;font-weight:900;line-height:1.1;}
.emp-stat-box .esb-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--grey);margin-top:4px;}
.emp-dept-strip{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:12px 16px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;flex:1;min-width:200px;}
.emp-dept-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
/* ── Toolbar ── */
.emp-toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
.emp-toolbar select{padding:8px 14px;border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:600;background:var(--white);color:var(--dark);outline:none;cursor:pointer;transition:border-color .15s;}
.emp-toolbar select:focus{border-color:var(--red);}
/* ── Cards grid ── */
.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;}
.emp-card{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:box-shadow .18s,transform .16s;display:flex;flex-direction:column;}
.emp-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.11);transform:translateY(-2px);}
/* Card accent strip by dept */
.emp-card-strip{height:4px;flex-shrink:0;}
.emp-card-inner{padding:16px 16px 0;}
.emp-card-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;}
.emp-card-avatar{width:46px;height:46px;border-radius:10px;color:#fff;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.5px;}
.emp-card-info{flex:1;min-width:0;}
.emp-card-name{font-size:13px;font-weight:800;color:var(--dark);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.emp-card-role{font-size:11px;color:var(--grey);margin-top:1px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.emp-card-tier{display:inline-block;font-size:9px;font-weight:800;padding:2px 7px;border-radius:20px;margin-top:5px;letter-spacing:.4px;text-transform:uppercase;}
.emp-card-tier.mgmt{background:rgba(200,16,46,.1);color:var(--red);}
.emp-card-tier.sup{background:rgba(230,92,0,.1);color:#e65c00;}
.emp-card-tier.op{background:rgba(45,106,79,.1);color:#2d6a4f;}
.emp-card-divider{height:1px;background:var(--border);margin:0 -16px;}
.emp-card-meta{display:grid;grid-template-columns:1fr 1fr;padding:10px 0 0;}
.emp-card-meta-item{display:flex;flex-direction:column;gap:2px;padding:8px 0;}
.emp-card-meta-item:nth-child(odd){padding-right:10px;border-right:1px solid var(--border-light);}
.emp-card-meta-item:nth-child(even){padding-left:10px;}
.emp-card-meta-item label{font-size:9px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.5px;}
.emp-card-meta-item span{font-size:12px;font-weight:700;color:var(--dark);}
.emp-card-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;margin-top:10px;background:var(--bg);border-top:1px solid var(--border);}
.emp-status-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;padding:4px 10px;border-radius:20px;letter-spacing:.3px;}
.emp-status-pill.active{background:rgba(0,122,76,.1);color:#007a4c;}
.emp-status-pill.active::before{content:'';width:6px;height:6px;border-radius:50%;background:#007a4c;display:inline-block;}
.emp-status-pill.ex{background:rgba(0,0,0,.06);color:#777;}
/* ── Profile overlay ── */
.emp-profile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:3000;overflow-y:auto;padding:24px 16px;}
.emp-profile-overlay.open{display:flex;align-items:flex-start;justify-content:center;}
.emp-profile-box{background:var(--white);width:100%;max-width:700px;border-radius:16px;overflow:hidden;position:relative;margin:auto;box-shadow:0 32px 80px rgba(0,0,0,.3);}
.emp-profile-head{padding:24px 24px 20px;display:flex;align-items:flex-start;gap:18px;position:relative;}
.emp-profile-avatar{width:72px;height:72px;border-radius:16px;color:#fff;font-weight:900;font-size:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.emp-profile-head-info{flex:1;min-width:0;}
.emp-tab-bar{display:flex;border-bottom:2px solid var(--border);background:var(--white);overflow-x:auto;}
.emp-tab{padding:11px 20px;font-size:12px;font-weight:700;color:var(--grey);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s;white-space:nowrap;}
.emp-tab.active{color:var(--red);border-bottom-color:var(--red);}
.emp-tab-pane{display:none;}
.emp-tab-pane.active{display:block;}
.emp-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px;}
@media(max-width:500px){.emp-detail-grid{grid-template-columns:1fr;}}
.emp-detail-field{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--bg);border-radius:8px;border:1px solid var(--border);}
.emp-detail-field label{font-size:9px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.6px;}
.emp-detail-field span{font-size:13px;font-weight:700;color:var(--dark);}
/* History & docs */
.emp-doc-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-light);}
.emp-doc-row:last-child{border-bottom:none;}
.emp-doc-icon{font-size:20px;flex-shrink:0;}
.emp-doc-name{font-size:13px;font-weight:700;color:var(--dark);flex:1;}
.emp-doc-date{font-size:11px;color:var(--grey);}
.emp-hist-row{padding:11px 0;border-bottom:1px solid var(--border-light);}
.emp-hist-row:last-child{border-bottom:none;}
.emp-hist-title{font-size:13px;font-weight:700;color:var(--dark);}
.emp-hist-meta{font-size:11px;color:var(--grey);margin-top:3px;}

/* ============================================================ PAYROLL */
.payroll-month-bar{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap;}
.payroll-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px;}
.payroll-stat-card{background:var(--white);border:1px solid var(--border);padding:14px 16px;}
.payroll-stat-card .psc-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);}
.payroll-stat-card .psc-val{font-size:20px;font-weight:800;color:var(--dark);margin-top:4px;}
.payroll-table{width:100%;border-collapse:collapse;background:var(--white);font-size:12px;}
.payroll-table th{background:var(--dark);color:#fff;padding:10px 12px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.3px;white-space:nowrap;}
.payroll-table th.num,.payroll-table td.num{text-align:right;}
.payroll-table td{padding:10px 12px;border-bottom:1px solid var(--border-light);vertical-align:middle;}
.payroll-table tr:last-child td{border-bottom:none;}
.payroll-table tr:hover td{background:var(--bg);}
.payroll-table .name-cell{font-weight:700;color:var(--dark);}
.payroll-table .dept-cell{color:var(--grey);font-size:11px;}
.payroll-table .gross-cell{font-weight:700;color:var(--dark);}
.payroll-table .net-cell{font-weight:800;color:var(--green);}
.payroll-slip-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:3000;overflow-y:auto;padding:30px 16px;}
.payroll-slip-overlay.open{display:flex;align-items:flex-start;justify-content:center;}
.payroll-slip-box{background:var(--white);width:100%;max-width:600px;position:relative;padding:0;margin:auto;}
.payroll-slip-head{background:var(--dark);color:#fff;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;}
.payroll-slip-body{padding:24px;}
.payroll-slip-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border-light);font-size:13px;}
.payroll-slip-row:last-child{border-bottom:none;}
.payroll-slip-row.total{font-weight:800;color:var(--dark);font-size:14px;border-top:2px solid var(--dark);margin-top:4px;padding-top:10px;}
.payroll-slip-row.deduction{color:var(--red);}
.payroll-slip-row.net{font-weight:800;color:var(--green);font-size:16px;border-top:2px solid var(--green);margin-top:4px;padding-top:10px;}
.payroll-slip-section-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--grey);margin:16px 0 8px;}
.payroll-status-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:2px;text-transform:uppercase;letter-spacing:.4px;}
.payroll-status-badge.draft{background:var(--amber-bg);color:var(--amber);}
.payroll-status-badge.approved{background:var(--green-bg);color:var(--green);}
.payroll-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; }
.payroll-tab { padding:9px 20px; font-size:13px; font-weight:700; cursor:pointer; border:none; background:none; color:var(--grey); border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .15s; }
.payroll-tab.active { color:var(--dark); border-bottom-color:var(--red); }
.payroll-tab:hover:not(.active) { color:var(--dark); }
.payroll-pane { display:none; }
.payroll-pane.active { display:block; }
.pr-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.pr-breakdown-table { width:100%; border-collapse:collapse; font-size:12px; }
.pr-breakdown-table th { background:var(--bg); padding:8px 12px; text-align:left; font-size:11px; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--border); }
.pr-breakdown-table td { padding:8px 12px; border-bottom:1px solid var(--border-light); }
.pr-breakdown-table tr.total-row td { font-weight:800; background:#fff8e1; border-top:2px solid var(--border); }
.pr-breakdown-table tr.highlight-row td { background:#f0fdf4; font-weight:800; color:var(--green); }
.pr-notes-area { width:100%; min-height:80px; padding:10px 12px; border:1px solid var(--border); border-radius:6px; font-size:12px; font-family:inherit; resize:vertical; box-sizing:border-box; }
.bulk-bonus-panel { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:16px; }

/* ── Borang EA Print Styles ─────────────────────────────────────── */
@media print {
  body > *:not(#eaPrintRoot) { display:none !important; }
  #eaPrintRoot { display:block !important; position:static !important; width:100% !important; background:#fff !important; }
  @page { size:A4 portrait; margin:15mm 12mm 15mm 18mm; }
}
.ea-no-print { }
/* CP8A form table styles */
.cp8a-wrap { font-family:'Arial',sans-serif; font-size:10pt; color:#000; background:#fff; }
.cp8a-title { text-align:center; border:2px solid #000; padding:6px 4px; margin-bottom:0; }
.cp8a-title h1 { font-size:12pt; font-weight:900; margin:0 0 2px; letter-spacing:.5px; }
.cp8a-title h2 { font-size:9pt; font-weight:400; margin:0; }
.cp8a-table { width:100%; border-collapse:collapse; margin-bottom:0; }
.cp8a-table td, .cp8a-table th { border:1px solid #000; padding:3px 5px; font-size:9pt; vertical-align:top; }
.cp8a-table th { background:#e8e8e8; font-weight:700; font-size:8.5pt; }
.cp8a-section-head { background:#d0d0d0; font-weight:900; font-size:9pt; padding:4px 5px; border:1px solid #000; letter-spacing:.3px; }
.cp8a-ref { font-size:7.5pt; color:#444; display:block; }
.cp8a-amount { text-align:right; font-weight:700; font-family:monospace; font-size:9pt; white-space:nowrap; }
.cp8a-total-row td { background:#f0f0f0; font-weight:900; }
.cp8a-sign-box { border:1px solid #000; padding:6px 8px; }
.cp8a-note { font-size:7.5pt; color:#555; font-style:italic; padding:2px 4px; }

/* ── EA Form Cards ──────────────────────────────────────────────── */
.ea-card {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:box-shadow .18s, transform .18s;
  position:relative;
  display:flex;
  flex-direction:column;
}
.ea-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.10); transform:translateY(-2px); }
.ea-card-strip { height:4px; background:var(--ea-col,#C8102E); flex-shrink:0; }
.ea-card-head {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px 10px;
}
.ea-card-avatar {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--ea-col,#C8102E); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; letter-spacing:.5px;
}
.ea-card-info { flex:1; min-width:0; }
.ea-card-name { font-size:14px; font-weight:800; color:var(--dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ea-card-sub { font-size:11px; color:var(--grey); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ea-card-dept-pill {
  font-size:10px; font-weight:700; padding:2px 9px; border-radius:20px;
  white-space:nowrap; flex-shrink:0; letter-spacing:.3px;
}
.ea-card-year-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:0 16px 8px; font-size:11px;
}
.ea-card-year-badge {
  background:#f5f5f5; color:#555; font-weight:700;
  padding:2px 8px; border-radius:4px; font-size:10.5px; letter-spacing:.3px;
}
.ea-card-empid { color:var(--grey); font-size:10.5px; font-weight:600; }

/* Composition bar */
.ea-card-bar-wrap {
  display:flex; height:5px; margin:0 16px 4px; border-radius:3px; overflow:hidden; background:#eee; gap:1px;
}
.ea-card-bar-seg { height:100%; transition:width .3s; }
.ea-card-bar-legend {
  display:flex; gap:10px; padding:0 16px 10px; font-size:9.5px; color:#aaa;
}

/* Figures grid */
.ea-card-figures {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
  margin:0;
}
.ea-card-fig {
  padding:10px 14px;
  border-right:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
}
.ea-card-fig:nth-child(2n) { border-right:none; }
.ea-card-fig:nth-child(3), .ea-card-fig:nth-child(4) { border-bottom:none; }
.ea-card-fig-label { font-size:10px; color:var(--grey); font-weight:600; margin-bottom:3px; }
.ea-card-fig-val { font-size:13px; font-weight:800; color:var(--dark); font-variant-numeric:tabular-nums; }

/* Extras */
.ea-card-extras { display:flex; gap:6px; flex-wrap:wrap; padding:10px 16px 0; }
.ea-card-tag {
  font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px;
  display:flex; align-items:center; gap:4px;
}
.ea-card-tag.blue { background:#e3f2fd; color:#1565c0; }
.ea-card-tag.green { background:#e8f5e9; color:#2e7d32; }

/* Footer */
.ea-card-footer {
  display:flex; gap:8px; padding:12px 16px;
  border-top:1px solid var(--border-light);
  margin-top:auto;
}
.ea-card-btn { flex:1; font-size:11px; justify-content:center; }
.ea-card-btn:last-child { flex:0 0 36px; padding:0; }

/* Mobile drawer (tablet/mobile fallback) */
#mobileMenu {
  display:none; position:fixed; inset:0; z-index:600;
}
#mobileMenuOverlay {
  position:absolute; inset:0; background:rgba(0,0,0,0.5);
}
#mobileMenuDrawer {
  position:absolute; top:0; left:0; bottom:0; width:280px;
  background:var(--dark); overflow-y:auto; transform:translateX(-100%);
  transition:transform 0.25s;
}
#mobileMenu.open { display:block; }
#mobileMenu.open #mobileMenuDrawer { transform:translateX(0); }
.mob-user { padding:20px 18px; border-bottom:1px solid #2E2E2E; }
.mob-user-name { color:white; font-size:14px; font-weight:700; }
.mob-user-role { color:#888; font-size:12px; margin-top:2px; }
.mob-nav-group { padding:10px 0; border-bottom:1px solid #2A2A2A; }
.mob-nav-label { padding:10px 18px 4px; font-size:10px; font-weight:700; color:#555; text-transform:uppercase; letter-spacing:1.5px; }
.mob-nav-item { display:block; padding:11px 18px; font-size:13px; color:#B0B0B0; cursor:pointer; transition:all 0.1s; }
.mob-nav-item:hover, .mob-nav-item.active { color:white; background:rgba(219,0,17,0.15); border-left:3px solid var(--red); padding-left:15px; }
.hamburger { display:none; background:none; border:none; cursor:pointer; color:white; font-size:22px; padding:0 4px; }

/* ============================================================ COMPONENTS */

/* SECTION HEADER */
.section-header { margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.section-header-row { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.section-title-main { font-size:22px; font-weight:700; color:var(--dark); letter-spacing:0.2px; border-left:4px solid var(--red); padding-left:12px; }
.section-subtitle { font-size:13px; color:var(--grey); margin-top:3px; }

/* CARDS */
.card {
  background:var(--white); border:1px solid var(--border);
  overflow:hidden; transition:box-shadow 0.15s;
}
.card:hover { box-shadow:0 2px 14px rgba(0,0,0,0.07); }
.card-header {
  padding:14px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  background:var(--white); border-left:3px solid var(--red);
}
.card-header-red { background:var(--red); border-left:none; }
.card-header-red .card-title { color:white; }
.card-title { font-size:13px; font-weight:700; color:var(--dark); text-transform:uppercase; letter-spacing:0.5px; }
.card-body { padding:20px; }
.card-red-bar { border-top:3px solid var(--red); }

/* STAT CARDS */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; margin-bottom:24px; border:1px solid var(--border); }
.stat-card {
  background:var(--white); padding:20px 22px;
  border-right:1px solid var(--border); position:relative;
}
.stat-card:last-child { border-right:none; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--red); }
.stat-label { font-size:11px; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:8px; }
.stat-value { font-size:30px; font-weight:700; color:var(--dark); line-height:1; font-variant-numeric:tabular-nums; }
.stat-sub { font-size:11px; color:var(--grey-light); margin-top:5px; }
.stat-icon { position:absolute; right:18px; bottom:16px; font-size:24px; opacity:0.12; }

/* BUTTONS */
.btn {
  padding:8px 18px; border:1px solid transparent;
  font-size:13px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  letter-spacing:0.3px; transition:all 0.15s; text-decoration:none;
  font-family: Arial, sans-serif;
}
.btn-red { background:var(--red); color:white; border-color:var(--red); }
.btn-red:hover { background:var(--red-dark); border-color:var(--red-dark); }
.btn-dark { background:var(--dark); color:white; border-color:var(--dark); }
.btn-dark:hover { background:#2E2E2E; }
.btn-outline { background:white; color:var(--dark); border-color:var(--border); }
.btn-outline:hover { border-color:var(--dark); }
.btn-outline-red { background:white; color:var(--red); border-color:var(--red); }
.btn-outline-red:hover { background:var(--red); color:white; }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn-xs { padding:3px 9px; font-size:11px; }
.btn-danger { background:white; color:var(--red); border-color:var(--red); }
.btn-danger:hover { background:var(--red); color:white; }
.btn-success { background:var(--green); color:white; border-color:var(--green); }

/* BADGES */
.badge { display:inline-flex; align-items:center; padding:2px 9px; font-size:11px; font-weight:700; letter-spacing:0.3px; }
.badge-red { background:var(--red-light); color:var(--red); border:1px solid var(--red-mid); }
.badge-green { background:var(--green-bg); color:var(--green); border:1px solid #B3D9C8; }
.badge-amber { background:var(--amber-bg); color:var(--amber); border:1px solid #F5D5A8; }
.badge-grey { background:#F0F0F0; color:var(--grey); border:1px solid var(--border); }
.badge-blue { background:var(--blue-bg); color:var(--blue); border:1px solid #BFD0FF; }
.badge-dark { background:var(--dark); color:white; }
.badge-success { background:var(--green-bg); color:var(--green); border:1px solid #B3D9C8; }
.badge-danger  { background:var(--red-light); color:var(--red); border:1px solid var(--red-mid); }
.badge-warning { background:var(--amber-bg); color:var(--amber); border:1px solid #F5D5A8; }

/* TABLES */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead tr { background:var(--dark); }
thead th { padding:10px 14px; font-size:11px; font-weight:700; color:white; text-transform:uppercase; letter-spacing:0.8px; text-align:left; }
tbody tr { border-bottom:1px solid var(--border-light); }
tbody tr:hover { background:#FAFAFA; }
td { padding:11px 14px; font-size:13px; color:var(--dark-mid); vertical-align:middle; }
tbody tr:last-child { border-bottom:none; }

/* SUB TABS (within sections) */
.sub-tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:22px; }
.sub-tab {
  padding:10px 22px; font-size:13px; font-weight:700; color:var(--grey);
  cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px;
  letter-spacing:0.3px; transition:all 0.15s;
}
.sub-tab:hover { color:var(--dark); }
.sub-tab.active { color:var(--red); border-bottom-color:var(--red); }
.sub-tab-content { display:none; }
.sub-tab-content.active { display:block; }

/* CATEGORY PILLS */
.cat-pills { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.cat-pill {
  padding:6px 16px; font-size:12px; font-weight:700; cursor:pointer;
  border:1px solid var(--border); background:white; color:var(--grey);
  letter-spacing:0.3px; transition:all 0.15s;
}
.cat-pill.active { background:var(--red); color:white; border-color:var(--red); }
.cat-pill:hover:not(.active) { border-color:var(--dark); color:var(--dark); }

/* GRID */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }

/* ANNOUNCEMENTS */
.announcement {
  border-left:4px solid #1D6FA4; background:#EBF4FF;
  padding:13px 16px; margin-bottom:12px; border:1px solid #C5DFF2;
  border-left-width:4px;
}
.ann-title { font-size:13px; font-weight:700; color:#0C4A75; margin-bottom:4px; }
.ann-title::before { content:"ⓘ "; font-weight:400; }
.ann-body { font-size:12px; color:#2D5F82; line-height:1.6; }
.ann-meta { font-size:11px; color:#5A8BAA; margin-top:6px; }
.announcement.urgent {
  border-left-color:var(--red); background:#FFF0F0;
  border-color:#FFCDD2;
}
.announcement.urgent .ann-title { color:#8B0000; }
.announcement.urgent .ann-body { color:#A0202A; }
.announcement.urgent .ann-title::before { content:"⚠ "; }

/* TASK SYSTEM — 3 LAYER */
.task-layer-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; }
.task-layer-tab {
  padding:10px 22px; font-size:12px; font-weight:700; letter-spacing:0.5px;
  cursor:pointer; color:var(--grey); border-bottom:3px solid transparent; margin-bottom:-2px;
  transition:all 0.15s; display:flex; align-items:center; gap:7px;
}
.task-layer-tab.active { color:var(--red); border-bottom-color:var(--red); }
.task-layer-tab:hover:not(.active) { color:var(--dark); }
.task-layer-badge {
  background:var(--red); color:white; border-radius:2px;
  padding:1px 6px; font-size:10px; font-weight:700; min-width:18px; text-align:center;
}
.task-layer-badge.grey { background:var(--grey); }
.task-layer-badge.amber { background:var(--amber); }
.task-layer-badge.green { background:var(--green); }
.task-layer-panel { display:none; }
.task-layer-panel.active { display:block; }
/* Master list table */
.master-task-row {
  display:grid; grid-template-columns:1fr 90px 90px 100px 90px 110px 88px;
  gap:0; border-bottom:1px solid var(--border); align-items:center;
}
.master-task-row.header {
  background:var(--bg); font-size:11px; font-weight:700; letter-spacing:0.5px;
  color:var(--grey); text-transform:uppercase; border-bottom:2px solid var(--border);
}
.master-task-row:hover:not(.header) { background:#fafafa; }
.mtr-cell { padding:9px 12px; font-size:12px; color:var(--dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mtr-cell.title-cell { white-space:normal; font-weight:600; }
.mtr-cell.routine { color:var(--amber); }
.routine-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; background:#FFF3E0; color:var(--amber); border:1px solid #F5D5A8; margin-right:5px; }
.assigned-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; background:var(--red-light); color:var(--red); border:1px solid var(--red-mid); margin-right:5px; }
.self-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; background:#E8F5E9; color:var(--green); border:1px solid #B3D9C8; margin-right:5px; }
.pri-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.pri-dot.high { background:var(--red); }
.pri-dot.medium { background:var(--amber); }
.pri-dot.low { background:var(--green); }
/* Week & Today cards */
.task-week-grid { display:flex; flex-direction:column; gap:8px; }
.task-wcard {
  background:white; border:1px solid var(--border); border-left:4px solid var(--border);
  padding:12px 14px; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:start;
}
.task-wcard.high { border-left-color:var(--red); }
.task-wcard.medium { border-left-color:var(--amber); }
.task-wcard.low { border-left-color:var(--green); }
.task-wcard.done-card { opacity:0.55; }
.wcard-title { font-size:13px; font-weight:700; color:var(--dark); margin-bottom:3px; }
.wcard-meta { font-size:11px; color:var(--grey); display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.wcard-actions { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.wcard-btn {
  font-size:10px; font-weight:700; padding:4px 10px; border:1px solid var(--border);
  background:white; cursor:pointer; color:var(--grey); transition:all 0.1s; white-space:nowrap;
}
.wcard-btn:hover { background:var(--dark); color:white; border-color:var(--dark); }
.wcard-btn.red { border-color:var(--red-mid); color:var(--red); background:var(--red-light); }
.wcard-btn.red:hover { background:var(--red); color:white; border-color:var(--red); }
.wcard-btn.green { border-color:#B3D9C8; color:var(--green); background:#E8F5E9; }
.wcard-btn.green:hover { background:var(--green); color:white; border-color:var(--green); }
.wcard-btn.amber { border-color:#F5D5A8; color:var(--amber); background:#FFF3E0; }
.task-status-chip {
  display:inline-block; font-size:10px; font-weight:700; padding:2px 8px;
  border:1px solid var(--border);
}
.task-status-chip.todo { background:#f5f5f5; color:var(--grey); }
.task-status-chip.inprogress { background:#FFF3E0; color:var(--amber); border-color:#F5D5A8; }
.task-status-chip.done { background:#E8F5E9; color:var(--green); border-color:#B3D9C8; }
/* Kanban (kept for Today layer) */
.kanban-board { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.kanban-col { background:var(--bg); border:1px solid var(--border); }
.kanban-col-header {
  padding:11px 15px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--white);
}
.kanban-col-title { font-size:12px; font-weight:700; color:var(--dark); text-transform:uppercase; letter-spacing:0.8px; display:flex; align-items:center; gap:8px; }
.kanban-tasks { padding:10px; display:flex; flex-direction:column; gap:8px; min-height:80px; }
.task-card {
  background:white; border:1px solid var(--border); padding:12px;
  cursor:grab; transition:box-shadow 0.1s; border-top:3px solid var(--border);
}
.task-card.high { border-top-color:var(--red); }
.task-card.medium { border-top-color:var(--amber); }
.task-card.low { border-top-color:var(--green); }
.task-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.task-card.dragging { opacity:0.4; }
.task-card-title { font-size:13px; font-weight:700; color:var(--dark); margin-bottom:4px; }
.task-card-meta { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.task-assignee { font-size:11px; color:var(--grey); }
.task-priority { font-size:10px; font-weight:700; padding:2px 7px; }
.priority-high { background:var(--red-light); color:var(--red); border:1px solid var(--red-mid); }
.priority-medium { background:var(--amber-bg); color:var(--amber); border:1px solid #F5D5A8; }
.priority-low { background:var(--green-bg); color:var(--green); border:1px solid #B3D9C8; }
.task-dept { font-size:11px; color:var(--grey-light); margin-top:4px; }
.task-actions { display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }
.task-move-btn {
  font-size:10px; padding:3px 8px; border:1px solid var(--border);
  background:white; cursor:pointer; color:var(--grey); font-weight:700; letter-spacing:0.3px;
  transition:all 0.1s;
}
.task-move-btn:hover { background:var(--dark); color:white; border-color:var(--dark); }
.task-delete-btn {
  font-size:10px; padding:3px 8px; border:1px solid var(--red-mid);
  background:var(--red-light); cursor:pointer; color:var(--red); font-weight:700;
}
/* Add-to-week selector */
.week-select-empty { padding:40px; text-align:center; color:var(--grey); font-size:13px; }
.today-empty { padding:40px; text-align:center; color:var(--grey); font-size:13px; }
/* The One Thing card */
.one-thing-card { background:#FFF8F8 !important; border-left-color:var(--red) !important; }
/* Highlight card */
.highlight-card { background:#FFF8F8 !important; }
/* master-task-row expanded columns for v9 */
.master-task-row { grid-template-columns: 1fr 80px 110px 90px 110px 100px 90px; }

/* KPI */
.kpi-role-block { margin-bottom:24px; border:1px solid var(--border); }
.kpi-role-header {
  background:var(--dark); color:white; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.kpi-role-name { font-size:13px; font-weight:700; letter-spacing:0.3px; }
.kpi-role-dept { font-size:11px; color:#888; margin-top:2px; }
.kpi-score-big { font-size:22px; font-weight:700; }
.kpi-row { display:grid; grid-template-columns:1fr 100px 55px 75px 80px; align-items:center; border-bottom:1px solid var(--border-light); }
.kpi-row:last-child { border-bottom:none; }
.kpi-row.kpi-thead { background:#F5F5F5; }
.kpi-cell { padding:10px 14px; font-size:12px; }
.kpi-cell.hd { font-size:10px; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:0.8px; }
.kpi-name { font-weight:700; color:var(--dark); }
.kpi-target { font-size:11px; color:var(--grey); }
.kpi-score-input {
  width:58px; padding:5px 8px; border:1px solid var(--border);
  font-size:12px; text-align:center; outline:none;
}
.kpi-score-input:focus { border-color:var(--red); }
.rag-pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; font-size:10px; font-weight:700; }
.rag-green { background:var(--green-bg); color:var(--green); border:1px solid #B3D9C8; }
.rag-amber { background:var(--amber-bg); color:var(--amber); border:1px solid #F5D5A8; }
.rag-red { background:var(--red-light); color:var(--red); border:1px solid var(--red-mid); }
.rag-grey { background:#F0F0F0; color:var(--grey); border:1px solid var(--border); }
.kpi-bar { background:#E8E8E8; height:5px; overflow:hidden; margin-top:4px; }
.kpi-bar-fill { height:100%; transition:width 0.4s; }
.kpi-filter-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:20px; flex-wrap:wrap; }
.kpi-ftab {
  padding:8px 18px; font-size:12px; font-weight:700; color:var(--grey);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  text-transform:uppercase; letter-spacing:0.5px; transition:all 0.1s;
}
.kpi-ftab:hover { color:var(--dark); }
.kpi-ftab.active { color:var(--red); border-bottom-color:var(--red); }

/* STAFF DIRECTORY */
.staff-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.staff-card { background:var(--white); border:1px solid var(--border); border-top:4px solid var(--red); cursor:pointer; transition:box-shadow .15s; }
.staff-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); }
.staff-card.ex-staff { border-top-color:var(--grey); opacity:.75; }
.staff-card-top { padding:16px 14px 12px; text-align:center; }
.staff-avatar-lg { width:48px; height:48px; background:var(--red); color:white; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
.staff-card.ex-staff .staff-avatar-lg { background:var(--grey); }
.staff-card-name { font-size:13px; font-weight:700; color:var(--dark); }
.staff-card-role { font-size:11px; color:var(--grey); margin-top:2px; }
.staff-card-dept { font-size:10px; color:var(--grey-light); margin-top:1px; }
.staff-card-body { padding:8px 14px 12px; border-top:1px solid var(--border-light); font-size:11px; color:var(--grey); }
.staff-card-body a { color:var(--dark-mid); text-decoration:none; }
/* Staff profile overlay */
.staff-profile-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:800; justify-content:center; align-items:flex-start; padding:40px 16px; overflow-y:auto; }
.staff-profile-overlay.open { display:flex; }
.staff-profile-box { background:#fff; max-width:620px; width:100%; position:relative; }
.staff-profile-head { background:var(--dark); color:#fff; padding:24px 28px; display:flex; align-items:center; gap:16px; }
.staff-profile-head.ex { background:var(--grey); }
.spa-avatar { width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; flex-shrink:0; }
.spa-name { font-size:18px; font-weight:700; }
.spa-role { font-size:12px; opacity:.75; margin-top:2px; }
.spa-badge { display:inline-block; font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px; margin-top:6px; }
.staff-profile-body { padding:24px 28px; }
.spb-section { margin-bottom:20px; }
.spb-section-title { font-size:10px; font-weight:800; color:var(--grey); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.spb-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.spb-field { }
.spb-label { font-size:10px; color:var(--grey); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.spb-val { font-size:13px; color:var(--dark-mid); font-weight:500; }
.spb-val.sensitive { font-family:monospace; font-size:12px; }
.spb-input { width:100%; padding:7px 10px; border:1px solid var(--border); font-size:13px; font-family:inherit; outline:none; box-sizing:border-box; }
.spb-input:focus { border-color:var(--red); }
.staff-profile-footer { padding:16px 28px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }
/* staff info row */
.staff-info-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border-light); font-size:12px; }
.staff-info-row:last-child { border-bottom:none; }
.staff-info-label { color:var(--grey); font-weight:700; text-transform:uppercase; font-size:10px; letter-spacing:0.5px; align-self:center; }
.staff-info-val { color:var(--dark-mid); font-weight:400; text-align:right; font-size:12px; }

/* KNOWLEDGE CENTRE */
.kc-items-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.kc-item {
  background:var(--white); border:1px solid var(--border); border-left:4px solid var(--red);
  padding:15px; display:flex; gap:12px; cursor:pointer; transition:box-shadow 0.1s;
}
.kc-item:hover { box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.kc-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; background:var(--bg); }
.kc-item-title { font-size:13px; font-weight:700; color:var(--dark); margin-bottom:3px; }
.kc-item-meta { font-size:11px; color:var(--grey); }
.kc-item-restricted { font-size:10px; font-weight:700; color:var(--amber); background:var(--amber-bg); padding:1px 7px; display:inline-block; margin-top:4px; border:1px solid #F5D5A8; }

/* QUICK LINKS */
.ql-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.ql-card {
  background:var(--white); border:1px solid var(--border); border-top:4px solid var(--red);
  padding:22px 18px; text-align:center; cursor:pointer;
  transition:box-shadow 0.15s; text-decoration:none; display:block; color:inherit;
}
.ql-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.1); }
.ql-icon { font-size:32px; margin-bottom:10px; }
.ql-label { font-size:13px; font-weight:700; color:var(--dark); }
.ql-url { font-size:11px; color:var(--grey); margin-top:3px; }

/* ADMIN */
.admin-tab-panel { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:22px; }
.admin-tab-btn {
  padding:10px 22px; font-size:13px; font-weight:700; color:var(--grey);
  cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px; letter-spacing:0.3px;
  transition:all 0.1s;
}
.admin-tab-btn.active { color:var(--red); border-bottom-color:var(--red); }
.admin-tab-content { display:none; }
.admin-tab-content.active { display:block; }
.user-row {
  display:grid; grid-template-columns:1fr 1fr 110px 110px 90px;
  gap:0; align-items:center; border-bottom:1px solid var(--border-light); background:white;
}
.user-row:hover { background:#FAFAFA; }
.user-row > div { padding:11px 14px; font-size:13px; }
.user-row.hd { background:#F5F5F5; }
.user-row.hd > div { font-size:10px; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:0.8px; }

/* JD SECTION */
/* Inline document embed — isolates the loaded JD HTML from dashboard styles */
.jd-embed { display:block; }
/* Jump-nav sticky offset adjusted for dashboard fixed header (104px) */
.jd-embed .jump-nav { position:sticky !important; top:var(--nav-total) !important; z-index:50 !important; }
/* List styles for Manual content (Simple uses custom focus-list) */
.jd-embed ul, .jd-embed ol { margin:8px 0 12px 20px !important; }
.jd-embed li { margin-bottom:6px !important; line-height:1.65 !important; color:#333 !important; font-size:10.5pt !important; }
@keyframes spin { to { transform:rotate(360deg); } }


/* === JD Embed styles (v11 line 1167) === */
/* JD embed styles */
.jd-embed *{margin:0;padding:0;box-sizing:border-box}.jd-embed{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Arial,sans-serif;font-size:10.5pt;color:#1A1A1A;background:#D8D8D8}@media print{.jd-embed{background:white;font-size:10pt}.jd-embed .no-print{display:none!important}.jd-embed .page{box-shadow:none;margin:0;padding:18mm 18mm 14mm 22mm;page-break-after:always}.jd-embed *{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.jd-embed .phase-banner{background:#1B3A5C;color:white;text-align:center;padding:10px 0;font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;position:sticky;top:0;z-index:500}.jd-embed .nav{background:white;padding:0 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:38px;z-index:400;border-bottom:1px solid #E0E0E0;height:52px;box-shadow:0 1px 4px rgba(0,0,0,.06)}.jd-embed .nav-brand{color:#1A1A1A;font-size:13px;font-weight:800;letter-spacing:2px}.jd-embed .nav-sub{color:#999;font-size:9px;margin-top:1px;letter-spacing:.5px}.jd-embed .nav-actions{display:flex;gap:8px;align-items:center}.jd-embed .btn{padding:6px 16px;border:none;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.5px;font-family:inherit}.jd-embed .btn-red{background:#C8102E;color:white}.jd-embed .btn-outline{background:transparent;color:#666;border:1px solid #CCC}.jd-embed .jump-nav{background:white;border-bottom:1px solid #E5E5E5;padding:7px 32px;display:flex;flex-wrap:wrap;gap:4px;position:sticky;top:90px;z-index:300}.jd-embed .jump-nav a{font-size:9px;font-weight:600;color:#555;text-decoration:none;padding:3px 10px;border:1px solid #DDD;letter-spacing:.3px;transition:all .15s}.jd-embed .jump-nav a:hover{background:#C8102E;color:white;border-color:#C8102E}.jd-embed .page{background:white;max-width:210mm;margin:24px auto;padding:22mm 22mm 18mm 24mm;box-shadow:0 1px 12px rgba(0,0,0,.10)}.jd-embed .cover{min-height:240mm;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.jd-embed .cover-top{height:5px;background:#C8102E;position:absolute;top:0;left:-24mm;right:-22mm}.jd-embed .cover-body{padding:60px 0 40px 0;flex:1;display:flex;flex-direction:column;justify-content:center}.jd-embed .cover-eyebrow{font-size:8pt;letter-spacing:3.5px;text-transform:uppercase;color:#C8102E;font-weight:700;margin-bottom:18px}.jd-embed .cover-company{font-size:40pt;font-weight:900;color:#1A1A1A;line-height:1;margin-bottom:4px}.jd-embed .cover-company-sub{font-size:9pt;color:#999;letter-spacing:4px;text-transform:uppercase;margin-bottom:36px;padding-bottom:20px;border-bottom:1px solid #E5E5E5}.jd-embed .cover-doc-title{font-size:19pt;font-weight:800;color:#1A1A1A;margin-bottom:6px}.jd-embed .cover-doc-sub{font-size:10.5pt;color:#666;margin-bottom:28px;line-height:1.6}.jd-embed .cover-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}.jd-embed .cover-tag{background:white;border:1px solid #CCC;color:#444;padding:4px 14px;font-size:8.5pt;font-weight:600;letter-spacing:.3px}.jd-embed .cover-tag.red{border-color:#C8102E;color:#C8102E}.jd-embed .cover-tag.blue{border-color:#1B3A5C;color:#1B3A5C}.jd-embed .cover-bottom{padding-top:16px;border-top:1px solid #E5E5E5}.jd-embed .cover-bottom-text{font-size:8pt;color:#AAA;letter-spacing:.5px}.jd-embed .section-eyebrow{font-size:8.5pt;letter-spacing:2.5px;text-transform:uppercase;color:#C8102E;font-weight:700;margin-bottom:5px}.jd-embed .section-title{font-size:17pt;font-weight:800;color:#1A1A1A;padding-bottom:10px;margin-bottom:18px;border-bottom:2px solid #1A1A1A}.jd-embed .sub-title{font-size:9pt;font-weight:800;color:#1A1A1A;margin:22px 0 10px 0;text-transform:uppercase;letter-spacing:1.5px;padding-bottom:6px;border-bottom:1.5px solid #EBEBEB}.jd-embed p{margin-bottom:10px;line-height:1.75;color:#333;font-size:10.5pt}.jd-embed .role-card{border-top:4px solid #C8102E;margin-bottom:0}.jd-embed .role-card.eng{border-top-color:#2D8A50}.jd-embed .role-card.rev{border-top-color:#1A5FA8}.jd-embed .role-card.prod{border-top-color:#E07B00}.jd-embed .role-card.ops{border-top-color:#7B3FA8}.jd-embed .role-card.future{border-top-color:#534AB7}.jd-embed .role-card.fin{border-top-color:#0A7B7B}.jd-embed .role-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin:14px 0 10px}.jd-embed .role-tag{font-size:8pt;font-weight:600;padding:2px 10px;border:1px solid #CCC;color:#666;letter-spacing:.3px}.jd-embed .role-tag.dept{color:white;border:none}.jd-embed .role-tag.dept-lead{background:#C8102E}.jd-embed .role-tag.dept-eng{background:#2D8A50}.jd-embed .role-tag.dept-rev{background:#1A5FA8}.jd-embed .role-tag.dept-prod{background:#E07B00}.jd-embed .role-tag.dept-ops{background:#7B3FA8}.jd-embed .role-tag.dept-future{background:#534AB7}.jd-embed .role-tag.dept-fin{background:#0A7B7B}.jd-embed .role-tag.vacant{background:#FBE9EC;color:#A32D2D;border-color:#F5C4B3}.jd-embed .role-tag.pt{background:#FFF8E1;color:#8A6A00;border-color:#FAC775}.jd-embed .role-tag.probation{background:#E8F4E8;color:#2D6A2D;border-color:#A8D8A8}.jd-embed .role-title{font-size:20pt;font-weight:900;color:#1A1A1A;line-height:1.1;margin-bottom:3px}.jd-embed .role-name-line{font-size:11pt;font-weight:700;color:#C8102E;margin-bottom:8px}.jd-embed .role-name-line.eng{color:#2D8A50}.jd-embed .role-name-line.rev{color:#1A5FA8}.jd-embed .role-name-line.prod{color:#E07B00}.jd-embed .role-name-line.ops{color:#7B3FA8}.jd-embed .role-name-line.future{color:#534AB7}.jd-embed .role-name-line.fin{color:#0A7B7B}.jd-embed .role-purpose{font-size:10pt;color:#444;line-height:1.75;padding:12px 16px;background:#FAFAFA;border-left:3px solid #C8102E;font-style:italic;margin-bottom:18px}.jd-embed .role-purpose.eng{border-left-color:#2D8A50}.jd-embed .role-purpose.rev{border-left-color:#1A5FA8}.jd-embed .role-purpose.prod{border-left-color:#E07B00}.jd-embed .role-purpose.ops{border-left-color:#7B3FA8}.jd-embed .role-purpose.future{border-left-color:#534AB7}.jd-embed .role-purpose.fin{border-left-color:#0A7B7B}.jd-embed .sc-block{margin-bottom:22px}.jd-embed .sc-label{font-size:8pt;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#888;margin-bottom:8px;padding-bottom:5px;border-bottom:1.5px solid #EBEBEB}.jd-embed .sc-label span{color:#C8102E}.jd-embed .sc-label span.eng{color:#2D8A50}.jd-embed .sc-label span.rev{color:#1A5FA8}.jd-embed .sc-label span.prod{color:#E07B00}.jd-embed .sc-label span.ops{color:#7B3FA8}.jd-embed .sc-label span.future{color:#534AB7}.jd-embed .sc-label span.fin{color:#0A7B7B}.jd-embed .mission-text{font-size:11pt;color:#1A1A1A;font-style:italic;line-height:1.7;border-left:3px solid #C8102E;padding-left:14px;margin-top:6px}.jd-embed .mission-text.eng{border-left-color:#2D8A50}.jd-embed .mission-text.rev{border-left-color:#1A5FA8}.jd-embed .mission-text.prod{border-left-color:#E07B00}.jd-embed .mission-text.ops{border-left-color:#7B3FA8}.jd-embed .mission-text.future{border-left-color:#534AB7}.jd-embed .mission-text.fin{border-left-color:#0A7B7B}.jd-embed .seat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;margin-top:6px}.jd-embed .seat-row{display:flex;gap:8px;align-items:baseline;font-size:10pt;padding:3px 0;border-bottom:.5px solid #F5F5F5}.jd-embed .seat-key{font-weight:700;color:#888;font-size:8.5pt;text-transform:uppercase;letter-spacing:.5px;min-width:80px}.jd-embed .seat-val{color:#1A1A1A;line-height:1.5}.jd-embed .focus-list{margin:8px 0 0 0;padding:0;list-style:none}.jd-embed .focus-list li{padding:7px 0 7px 20px;position:relative;border-bottom:.5px solid #F5F5F5;font-size:10.5pt;color:#333;line-height:1.6}.jd-embed .focus-list li:last-child{border-bottom:none}.jd-embed .focus-list li::before{content:"→";position:absolute;left:0;font-weight:800;font-size:9pt;color:#C8102E}.jd-embed .role-card.eng .focus-list li::before{color:#2D8A50}.jd-embed .role-card.rev .focus-list li::before{color:#1A5FA8}.jd-embed .role-card.prod .focus-list li::before{color:#E07B00}.jd-embed .role-card.ops .focus-list li::before, .jd-embed .role-card.future .focus-list li::before{color:#534AB7}.jd-embed .role-card.fin .focus-list li::before{color:#0A7B7B}.jd-embed .manual-note{margin-top:24px;padding:12px 16px;background:#EAF2FB;border-left:4px solid #1B3A5C;font-size:9.5pt;color:#1B3A5C;line-height:1.6}.jd-embed .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:12px 0 20px}.jd-embed .value-item{border-top:3px solid #C8102E;padding:14px 0 0}.jd-embed .value-num{font-size:7.5pt;letter-spacing:2px;text-transform:uppercase;color:#999;font-weight:700;margin-bottom:4px}.jd-embed .value-name{font-size:11pt;font-weight:800;color:#1A1A1A;margin-bottom:6px}.jd-embed .value-desc{font-size:9.5pt;color:#555;line-height:1.6}.jd-embed .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #E5E5E5;margin:12px 0}.jd-embed .stat-item{padding:16px;text-align:center;border-right:1px solid #E5E5E5}.jd-embed .stat-item:last-child{border-right:none}.jd-embed .stat-num{font-size:22pt;font-weight:900;color:#C8102E;line-height:1}.jd-embed .stat-label{font-size:8.5pt;color:#888;font-weight:600;letter-spacing:.5px;margin-top:4px}.jd-embed .dept-section-header{background:#F5F5F5;border-left:4px solid #1A1A1A;padding:10px 16px;margin:20px 0 10px;font-size:10pt;font-weight:800;color:#1A1A1A;letter-spacing:1px;text-transform:uppercase}.jd-embed .dept-section-header.eng{border-left-color:#2D8A50;color:#2D8A50}.jd-embed .dept-section-header.rev{border-left-color:#1A5FA8;color:#1A5FA8}.jd-embed .dept-section-header.prod{border-left-color:#E07B00;color:#E07B00}.jd-embed .dept-section-header.future{border-left-color:#534AB7;color:#534AB7}.jd-embed .dept-section-header.fin{border-left-color:#0A7B7B;color:#0A7B7B}.jd-embed .kpi-table{width:100%;border-collapse:collapse;font-size:9.5pt;margin:10px 0}.jd-embed .kpi-table th{background:#1A1A1A;color:white;padding:6px 10px;text-align:left;font-weight:700;font-size:8.5pt}.jd-embed .kpi-table td{padding:6px 10px;border-bottom:1px solid #EBEBEB;color:#333}


/* === Block 2: Finance / Product extras (v11 lines 4486–4624) === */

/* Finance / HR-Admin dept colour variant — teal */
.fin { color: #0A7B7B !important; }
.kpi-ref.fin-bg { background: #0A7B7B; }
.nn-box.fin { border-left-color: #0A7B7B; }
.nn-title.fin { color: #0A7B7B; }
.nn-num.fin { background: #0A7B7B; }
.acc-box.fin { border-color: #0A7B7B; }
.acc-title.fin { background: #0A7B7B; color: #fff; }
.role-purpose.fin { border-left-color: #0A7B7B; }
.outcomes-list.fin li::before { background: #0A7B7B; }
.dept-tag.fin-tag { background: #0A7B7B; color: #fff; }

/* ============================================================ MODALS */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 800;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--white);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,.22);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 15px; font-weight: 700; color: var(--dark); }
.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--grey);
  padding: 0 2px;
}
.modal-close:hover { color: var(--dark); }
.modal-body { padding: 20px 24px; }
.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-mid);
}
.mfg { margin-bottom: 14px; }
.mfg label { display: block; font-size: 12px; font-weight: 700; color: var(--dark); margin-bottom: 6px; letter-spacing: .02em; }
.mfg input, .mfg select, .mfg textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--white);
  color: var(--dark);
  box-sizing: border-box;
}
.mfg input:focus, .mfg select:focus, .mfg textarea:focus { border-color: var(--red); }
.mfg textarea { resize: vertical; min-height: 80px; }
.mfg-row { display: flex; gap: 14px; }
.mfg-row .mfg { flex: 1; }

/* ── EMPLOYEE MODAL ─────────────────────────────────────────── */
.emp-modal-label{font-size:11px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:5px;}
.emp-modal-input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;outline:none;box-sizing:border-box;background:var(--white);color:var(--dark);}
.emp-modal-input:focus{border-color:var(--red);box-shadow:0 0 0 2px rgba(200,16,46,.1);}
.emp-modal-tab{color:var(--grey);transition:color .15s;}
.emp-modal-tab.active{color:var(--red);border-bottom-color:var(--red)!important;}

/* ── PRODUCT LIBRARY CARDS ─────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 4px;
}
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.product-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border-color: var(--red);
}
.product-card-top {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 16px 12px;
  align-items: flex-start;
}
.product-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 4px;
  line-height: 1.35;
}
.product-meta {
  font-size: 11px;
  color: var(--grey);
  margin-bottom: 6px;
  font-weight: 600;
}
.product-desc {
  font-size: 12px;
  color: #555;
  line-height: 1.5;
}
.product-version-toggle {
  padding: 7px 16px;
  background: var(--bg);
  border-top: 1px solid var(--border-light);
  font-size: 11px;
  font-weight: 700;
  color: var(--grey);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.product-version-toggle:hover { background: #efefef; color: var(--dark); }