/* ═══════════════════════════════════════════════════════════════
   TWF PORTAL — UX POLISH LAYER v2.0
   Premium feel, app-like transitions, refined micro-interactions
   ═══════════════════════════════════════════════════════════════ */

/* ── GLOBAL SMOOTHING ── */
*{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{scroll-behavior:smooth}
body{overscroll-behavior-y:contain}

/* ── PAGE TRANSITION — fade + slide on navigate ── */
#pagesContainer{animation:pageIn .3s ease-out}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── REFINED CARD SYSTEM ── */
.panel{background:var(--white);border:1px solid rgba(12,18,32,.09);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.03),0 1px 2px rgba(0,0,0,.02);transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.panel:hover{box-shadow:0 4px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04)}

/* ── ELEVATED CARDS — clickable feel ── */
.card-lift{transition:all .2s cubic-bezier(.4,0,.2,1)}
.card-lift:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.card-lift:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,.04)}

/* ── BUTTON REFINEMENTS ── */
.topbar-btn{transition:all .2s cubic-bezier(.4,0,.2,1);font-weight:600;letter-spacing:.2px}
.topbar-btn--gold{background:linear-gradient(135deg,#C9A84C 0%,#D4B85C 100%);box-shadow:0 2px 8px rgba(201,168,76,.25)}
.topbar-btn--gold:hover{background:linear-gradient(135deg,#D4B85C 0%,#DEC86C 100%);box-shadow:0 4px 16px rgba(201,168,76,.35);transform:translateY(-1px)}
.topbar-btn--gold:active{transform:translateY(0);box-shadow:0 1px 4px rgba(201,168,76,.2)}
.topbar-btn--ghost{backdrop-filter:blur(4px);transition:all .2s ease}
.topbar-btn--ghost:hover{background:rgba(12,18,32,.04);border-color:var(--gold)}

/* ── SIDEBAR REFINEMENTS ── */
.sidebar{background:linear-gradient(180deg,#0C1220 0%,#0a0f1a 100%);box-shadow:2px 0 20px rgba(0,0,0,.15)}
.sidebar-link{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px;margin:1px 0}
.sidebar-link:hover{background:rgba(255,255,255,.06);transform:translateX(2px)}
.sidebar-link.active{background:rgba(201,168,76,.12);box-shadow:inset 0 0 0 1px rgba(201,168,76,.08)}
.sidebar-link.active::before{width:3px;background:linear-gradient(180deg,#C9A84C,#D4B85C);border-radius:0 4px 4px 0;box-shadow:0 0 8px rgba(201,168,76,.3)}
.sidebar-section{margin-bottom:12px}
.sidebar-section-label{color:rgba(255,255,255,.25);font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;padding:12px 12px 4px;margin-bottom:2px}

/* ── SIDEBAR USER CARD ── */
.sidebar-user{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.02)}
.sidebar-avatar{box-shadow:0 0 0 2px rgba(201,168,76,.2);transition:all .3s ease}
.sidebar-avatar:hover{box-shadow:0 0 0 3px rgba(201,168,76,.4);transform:scale(1.08)}

/* ── LOGIN SCREEN POLISH ── */
.login-screen{background:linear-gradient(135deg,#0C1220 0%,#111a2e 30%,#0a0e18 100%)}
.login-card{box-shadow:0 32px 100px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.03);border:1px solid rgba(201,168,76,.06);backdrop-filter:blur(20px)}
.login-btn{background:linear-gradient(135deg,#C9A84C 0%,#D4B85C 100%)!important;box-shadow:0 4px 16px rgba(201,168,76,.3);transition:all .25s ease;font-weight:700;letter-spacing:.5px;border-radius:10px!important;padding:14px!important;font-size:14px!important}
.login-btn:hover{box-shadow:0 6px 24px rgba(201,168,76,.4);transform:translateY(-1px)}
.login-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(201,168,76,.2)}
.login-field{border-radius:10px!important;padding:14px 16px!important;border:1px solid rgba(12,18,32,.08)!important;background:rgba(250,248,243,.8)!important;transition:all .25s ease!important}
.login-field:focus{border-color:var(--gold)!important;box-shadow:0 0 0 4px rgba(201,168,76,.1)!important;background:var(--white)!important}

/* ── TABLE REFINEMENTS ── */
table{border-collapse:separate;border-spacing:0}
thead tr{background:rgba(12,18,32,.02)}
th{font-size:11px!important;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);border-bottom:2px solid rgba(12,18,32,.06)}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:rgba(201,168,76,.03)!important}
.clickable-row{cursor:pointer}
.clickable-row:hover{background:rgba(201,168,76,.05)!important}
.clickable-row:active{background:rgba(201,168,76,.08)!important}

/* ── BADGE SYSTEM REFINEMENTS ── */
.badge{font-weight:600;letter-spacing:.3px;border-radius:20px;padding:5px 12px;font-size:11px;min-height:28px;display:inline-flex;align-items:center}
.badge-green{background:rgba(34,197,94,.1);color:#15803d}
.badge-amber,.badge-gold{background:rgba(201,168,76,.1);color:#92710d}
.badge-red{background:rgba(220,38,38,.08);color:#b91c1c}

/* ── ROLE PILLS ── */
.role-pill{background:rgba(12,18,32,.04);color:var(--navy);padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;min-height:28px}

/* ── LOADING STATES — skeleton pulse ── */
.loading-spinner{width:24px;height:24px;border:3px solid rgba(201,168,76,.12);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,rgba(12,18,32,.04) 25%,rgba(12,18,32,.08) 50%,rgba(12,18,32,.04) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── FORM ELEMENTS — refined ── */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="search"],select,textarea{border:1px solid rgba(12,18,32,.1);border-radius:8px;padding:10px 12px;font-family:'DM Sans',sans-serif;font-size:14px;transition:all .2s ease;background:var(--white);color:var(--navy)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.08);outline:none}
select{cursor:pointer;appearance:auto}

/* ── SCROLLBAR STYLING (webkit) ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(12,18,32,.12);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(12,18,32,.2)}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08)}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15)}

/* ── TOAST NOTIFICATIONS — refined ── */
.toast{border-radius:12px!important;box-shadow:0 8px 32px rgba(0,0,0,.15)!important;backdrop-filter:blur(12px);animation:toastIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── MENU TOGGLE BUTTON — premium grid icon ── */
#mobileMenuBtn{background:linear-gradient(135deg,#0C1220,#1a2944)!important;border:1px solid rgba(201,168,76,.15)!important;box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 0 1px rgba(201,168,76,.08)!important;transition:all .2s ease}
#mobileMenuBtn{pointer-events:auto!important}
#mobileMenuBtn:active{transform:scale(.92)}
#mobileMenuBtn svg{transition:transform .2s ease}
#mobileMenuBtn:active svg{transform:scale(.9)}

/* ── FOOTER — minimal, hugs bottom ── */
footer{margin-top:8px!important;padding:4px 16px 6px!important;border-top:none!important}
footer p{font-size:9px!important;color:rgba(12,18,32,.72)!important;margin:0!important}

/* ── MODAL OVERLAYS — refined ── */
.modal-overlay,[style*="position:fixed"][style*="background:rgba(0,0,0"]{backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important}

/* ── STAT CARDS — premium feel ── */
.stat-card{border-radius:12px;border:1px solid rgba(12,18,32,.04);transition:all .25s ease;overflow:hidden;position:relative}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.2),transparent);opacity:0;transition:opacity .3s}
.stat-card:hover::after{opacity:1}
.stat-card:hover{border-color:rgba(201,168,76,.1)}

/* ── KPI CARDS — refined ── */
.kpi-card{border-radius:12px;border:1px solid rgba(12,18,32,.04);position:relative;overflow:hidden}

/* ── PAGE HEADERS — premium typography ── */
.page-header h1,[style*="font-family:'Playfair Display'"]{letter-spacing:-.5px}

/* ── ANNOUNCEMENT CARDS ── */
.announcement{border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.03);transition:all .2s ease}
.announcement:hover{box-shadow:0 3px 12px rgba(0,0,0,.06)}

/* ── HANDBOOK SECTIONS — refined collapse ── */
.handbook-section{border-radius:10px;border:1px solid rgba(12,18,32,.05);overflow:hidden;transition:all .2s ease}
.handbook-section:hover{border-color:rgba(12,18,32,.1)}
.handbook-section.open{border-color:rgba(201,168,76,.15);box-shadow:0 2px 8px rgba(201,168,76,.05)}

/* ── SIGNATURE CANVAS ── */
canvas[id*="Sig"],canvas[id*="sig"]{background:rgba(250,248,243,.5);border:1px dashed rgba(12,18,32,.15)!important;border-radius:10px!important}

/* ── PROGRESS BARS ── */
.progress-track{background:rgba(12,18,32,.06);border-radius:4px;overflow:hidden}
.progress-track div{transition:width .6s cubic-bezier(.4,0,.2,1)}

/* ── GOLD ACCENT DIVIDERS ── */
.gold-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.2),transparent);margin:20px 0}

/* ── EMPTY STATES ── */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted)}
.empty-state-icon{font-size:40px;margin-bottom:12px;opacity:.4}
.empty-state-text{font-size:14px;line-height:1.6}

/* ── FOCUS VISIBLE — accessibility ── */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ── SELECTION COLOR ── */
::selection{background:rgba(201,168,76,.2);color:var(--navy)}

/* ── PWA STANDALONE — app-specific fixes ── */
@media(display-mode:standalone){
  #mobileMenuBtn{top:calc(14px + env(safe-area-inset-top))!important}
  .sidebar{padding-top:env(safe-area-inset-top)}
  .main{padding-top:calc(20px + env(safe-area-inset-top))!important}
  .login-screen{padding-top:env(safe-area-inset-top)}
  footer{padding-bottom:calc(4px + env(safe-area-inset-bottom))!important}
  body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
}

/* ── MOBILE REFINEMENTS ── */
@media(max-width:768px){
  .panel{border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
  .panel:hover{box-shadow:0 1px 2px rgba(0,0,0,.03);transform:none}
  .stat-card:hover::after{opacity:0}
  #pagesContainer{animation:pageInMobile .25s ease-out}
  @keyframes pageInMobile{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
  .sidebar{box-shadow:4px 0 30px rgba(0,0,0,.3)}
  tbody tr:hover{background:transparent!important}
  .clickable-row:hover{background:transparent!important}
  .clickable-row:active{background:rgba(201,168,76,.06)!important}
}

/* ── PRINT STYLES ── */
@media print{
  .sidebar,#mobileMenuBtn,.sidebar-backdrop,footer,.toast-container{display:none!important}
  .main{margin-left:0!important;padding:0!important}
  .panel{box-shadow:none!important;border:1px solid #ddd!important;break-inside:avoid}
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN CRITIQUE REMEDIATION — DC-xxx fixes
   ═══════════════════════════════════════════════════════════════ */

/* DC-009 + DC-044: Design tokens — spacing & radius scale */
:root{--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:24px;--spacing-2xl:32px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px}

/* DC-011: Semantic color tokens */
:root{--success:#22c55e;--success-bg:rgba(34,197,94,.08);--warning:#eab308;--warning-bg:rgba(234,179,8,.08);--error:#ef4444;--error-bg:rgba(239,68,68,.06);--info:#3b82f6;--info-bg:rgba(59,130,246,.08)}

/* DC-002 + DC-013: Button state hierarchy — disabled + loading */
.topbar-btn:disabled,.topbar-btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;transform:none!important;box-shadow:none!important}
.topbar-btn--gold:disabled{background:linear-gradient(135deg,#b8a060 0%,#c0aa68 100%)}
.btn-loading{position:relative;color:transparent!important}
.btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}

/* DC-008: Interactive KPI cards — hover affordance */
.kpi-card[onclick],.kpi-card.interactive{cursor:pointer;transition:all .25s ease}
.kpi-card[onclick]:hover,.kpi-card.interactive:hover{border-color:rgba(201,168,76,.2);box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-2px)}
.kpi-card[onclick]::after,.kpi-card.interactive::after{content:'↗';position:absolute;top:12px;right:12px;font-size:14px;color:var(--gold);opacity:.4;transition:opacity .2s}
.kpi-card[onclick]:hover::after,.kpi-card.interactive:hover::after{opacity:.8}

/* DC-021: Staff name links */
.staff-name-link{color:var(--navy);text-decoration:none;cursor:pointer;border-bottom:1px solid rgba(12,18,32,.15);transition:all .2s ease;font-weight:500}
.staff-name-link:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* DC-027: Text truncation utility */
.text-truncate{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}
.text-truncate-sm{max-width:120px}
.text-truncate-lg{max-width:300px}

/* DC-028: Toast container positioning */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;min-width:280px;max-width:400px}
@media(max-width:768px){.toast-container{bottom:16px;left:16px;right:16px}.toast{min-width:auto;width:100%}}

/* DC-029: Skip link enhancement */
.sr-only-focusable:focus,.sr-only-focusable:active{position:fixed!important;top:8px;left:8px;z-index:100000;width:auto!important;height:auto!important;padding:12px 24px!important;margin:0!important;overflow:visible!important;clip:auto!important;white-space:nowrap!important;background:var(--navy);color:var(--gold);font-size:14px;font-weight:600;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.3);text-decoration:none}

/* DC-033 + DC-036: Respect reduced motion preference */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}#pagesContainer{animation:none}}

/* DC-022: Mobile hover states — only apply on hover-capable devices */
@media(hover:hover){.clickable-row:hover{background:rgba(201,168,76,.05)!important}}
@media(hover:none){.clickable-row:hover{background:transparent!important}.sidebar-link:hover{background:transparent;transform:none}}

/* DC-040: Firefox scrollbar styling */
*{scrollbar-width:thin;scrollbar-color:rgba(12,18,32,.12) transparent}
.sidebar{scrollbar-color:rgba(255,255,255,.08) transparent}

/* DC-042: Announcement critical variant */
.announcement.critical{border-left:4px solid var(--error);background:var(--error-bg)}
.announcement.urgent{border-left:4px solid var(--warning);background:var(--warning-bg)}

/* DC-046: Custom checkbox/radio styling */
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;accent-color:var(--gold);cursor:pointer;min-width:20px}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* DC-016: Status indicators — pattern + color (not color alone) */
.status-indicator{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:11px}
.status-indicator::before{font-size:14px}
.status-green::before{content:'✓'}
.status-yellow::before{content:'⚠'}
.status-red::before{content:'✕'}

/* DC-038: Focus outline variant for gold/light backgrounds */
.topbar-btn--gold:focus-visible,.badge-gold:focus-visible,[style*="background"][style*="gold"]:focus-visible{outline-color:var(--navy)!important}

/* DC-045: Expanded print styles */
@media print{.topbar,.top-bar,#mobileMenuBtn,.modal,.modal-overlay,.toast-container,nav,footer,.sidebar,.sidebar-backdrop{display:none!important}.main{margin-left:0!important;width:100%!important;padding:20px!important}a[href]:after{content:none!important}.panel{page-break-inside:avoid}}

/* ═══════════════════════════════════════════════════════════════
   DESIGN CRITIQUE REMEDIATION — Additional DC Fixes
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   TWF Portal Design System v1.0
   ══════════════════════════════════════════
   Colors:     --navy, --gold, --cream, --white
   Semantic:   --success, --warning, --error, --info (+ -bg variants)
   Typography: --font-display (Playfair Display), --font-body (DM Sans)
   Spacing:    --spacing-xs (4px) through --spacing-2xl (48px)
   Radii:      --radius-sm (6px) through --radius-xl (16px)
   Shadows:    .shadow-sm, .shadow-md
   Easing:     --ease-out
   ══════════════════════════════════════════ */

/* DC-007: Unified empty state design component */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted)}
.empty-state-icon{font-size:48px;margin-bottom:16px;opacity:.5}
.empty-state-title{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--navy);margin-bottom:8px}
.empty-state-text{font-size:14px;line-height:1.5;max-width:360px;margin:0 auto 16px}
.empty-state-action{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:var(--gold);color:var(--navy);border-radius:var(--radius-md);font-weight:600;cursor:pointer;border:none;transition:all .2s ease}
.empty-state-action:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(201,168,76,.25)}

/* DC-012: Form label improvements — accessible labels & consistent styling */
.form-label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:4px}
.form-label .required{color:var(--error);margin-left:2px}
.form-input{width:100%;padding:10px 12px;border:1px solid rgba(12,18,32,.15);border-radius:var(--radius-sm);font-size:14px;transition:border-color .2s;font-family:'DM Sans',sans-serif}
.form-input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(201,168,76,.15)}
.form-input.error{border-color:var(--error)}
.form-helper{font-size:12px;color:var(--text-muted);margin-top:4px}
.form-error{font-size:12px;color:var(--error);margin-top:4px}

/* DC-017: Modal close improvements — visual affordance & interaction */
.modal-overlay{cursor:pointer}
.modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:none;cursor:pointer;font-size:18px;color:var(--text-muted);transition:background .2s ease}
.modal-close:hover{background:rgba(12,18,32,.08)}
.modal-close:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* DC-020: Mobile sidebar — responsive hide/show with animation */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);transition:transform .3s var(--ease-out);z-index:1000;position:fixed;top:0;left:0;bottom:0;right:auto;width:280px}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999}
  .sidebar.open ~ .sidebar-overlay,.sidebar-overlay.active{display:block}
  .hamburger-btn{display:flex!important}
}
@media(min-width:769px){
  .hamburger-btn{display:none!important}
}

/* DC-023: Search/filter input for large lists */
.list-search{position:relative;margin-bottom:16px}
.list-search input{width:100%;padding:10px 12px 10px 36px;border:1px solid rgba(12,18,32,.12);border-radius:var(--radius-md);font-size:14px;background:var(--white);font-family:'DM Sans',sans-serif}
.list-search::before{content:'🔍';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.5}
.list-search input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(201,168,76,.15)}

/* DC-034: Utility classes for common layout patterns */
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.gap-xs{gap:var(--spacing-xs)}
.gap-sm{gap:var(--spacing-sm)}
.gap-md{gap:var(--spacing-md)}
.gap-lg{gap:var(--spacing-lg)}
.text-center{text-align:center}
.text-right{text-align:right}
.text-muted{color:var(--text-muted)}
.text-sm{font-size:13px}
.text-lg{font-size:18px}
.font-bold{font-weight:600}
.font-display{font-family:var(--font-display)}
.p-sm{padding:var(--spacing-sm)}
.p-md{padding:var(--spacing-md)}
.p-lg{padding:var(--spacing-lg)}
.mt-sm{margin-top:var(--spacing-sm)}
.mt-md{margin-top:var(--spacing-md)}
.mb-sm{margin-bottom:var(--spacing-sm)}
.mb-md{margin-bottom:var(--spacing-md)}
.rounded{border-radius:var(--radius-md)}
.shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,.08)}
.shadow-md{box-shadow:0 4px 12px rgba(0,0,0,.1)}
.w-full{width:100%}
.hidden{display:none!important}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* BUGFIX 2026-05-04: Sidebar items rendered by polish.js as <button> were inheriting
   the browser's default light-gray button background, making the white text unreadable.
   Force transparent background on non-active sidebar buttons. */
button.sidebar-link {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,.78);  /* lift base contrast above the previous 0.5 alpha */
  font-family: inherit;
  text-align: left;
  width: 100%;
}
button.sidebar-link:hover {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.95);
}
button.sidebar-link.active {
  background: rgba(201,168,76,.16) !important;
  color: var(--gold, #C9A84C) !important;
}


/* BUGFIX 2026-05-04: Wide tables (leaderboard, gold-star-leaderboard, ratings, awards,
   workforce-intel, etc.) had content wider than the viewport, pushing the entire page
   layout off-screen. Add horizontal scroll containment so wide content stays within
   the page bounds — table itself still scrolls horizontally within its container. */

.main {
  min-width: 0;
  max-width: 100vw;
  overflow-x: hidden;
}
#pagesContainer {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
/* Allow horizontal scroll inside content panels for wide tables */
#lbContent,
#pagesContainer .panel-body,
#pagesContainer table {
  max-width: 100%;
}
#lbContent {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Wide tables: let them scroll inside their container instead of pushing the page */
#pagesContainer table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
/* Keep sticky table headers if any */
#pagesContainer table thead {
  display: table-header-group;
}
#pagesContainer table tbody {
  display: table-row-group;
}
#pagesContainer table tr {
  display: table-row;
}


/* RESPONSIVE TABLE-TO-CARD PATTERN — 2026-05-04
   Auto-applied to any #pagesContainer table tagged with .twf-responsive-table by polish.js.
   Mobile (≤768px): tables become stacked cards. Each <td> shows label + value pair.
   Desktop (>768px): tables render normally as horizontal grids.
   Native-app feel on phones, tabular density on desktop. */

@media (max-width: 768px) {
  #pagesContainer table.twf-responsive-table {
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
    white-space: normal !important;
    width: 100% !important;
  }
  #pagesContainer table.twf-responsive-table thead {
    display: none;
  }
  #pagesContainer table.twf-responsive-table tbody {
    display: block;
  }
  #pagesContainer table.twf-responsive-table tr {
    display: block !important;
    background: var(--white, #fff);
    border: 1px solid rgba(12,18,32,.09);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
    transition: box-shadow .2s ease, transform .15s ease;
  }
  #pagesContainer table.twf-responsive-table tr:active {
    transform: scale(0.99);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }
  #pagesContainer table.twf-responsive-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid rgba(12,18,32,.05) !important;
    text-align: right !important;
    min-height: auto !important;
    font-size: 13px !important;
  }
  #pagesContainer table.twf-responsive-table td:last-child {
    border-bottom: none !important;
  }
  #pagesContainer table.twf-responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted, #666);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 14px;
    flex-shrink: 0;
    text-align: left;
  }
  /* Skip pseudo-element for cells without data-label (avoids empty :before) */
  #pagesContainer table.twf-responsive-table td:not([data-label])::before {
    display: none;
  }
  /* First cell (usually rank/name) gets primary card-header treatment */
  #pagesContainer table.twf-responsive-table td:first-child {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--navy, #0C1220) !important;
    padding-bottom: 10px !important;
    margin-bottom: 6px !important;
    border-bottom: 2px solid rgba(201,168,76,.25) !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  #pagesContainer table.twf-responsive-table td:first-child::before {
    display: none;
  }
}


/* CPS BADGE — 2026-05-04
   Compact colored numeric badge for star/CPS ratings. Replaces 1/2/3 stars with a
   clearly-coded severity pill. Native-app pattern: scan the column, see the colors,
   instantly identify the risk distribution. Color-blind safe (number is also visible). */

.cps-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 9px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.cps-badge--3 { background: #2E7D32; color: #fff; }     /* green - 3-Star, exceeds */
.cps-badge--2 { background: #F59E0B; color: #1F1F1F; }  /* amber - 2-Star, meets */
.cps-badge--1 { background: #E53935; color: #fff; }     /* red   - 1-Star, below */
.cps-badge--0,
.cps-badge--unrated {
  background: rgba(12,18,32,.06);
  color: rgba(12,18,32,.55);
  border: 1px dashed rgba(12,18,32,.15);
}
.cps-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.cps-badge-label {
  font-size: 11px;
  color: var(--text-muted, #6A6C70);
  font-weight: 500;
  letter-spacing: 0.2px;
}
/* On mobile cards, just show the badge — drop the verbose label */
@media (max-width: 768px) {
  #pagesContainer table.twf-responsive-table .cps-badge-label {
    display: none;
  }
}