/* ========================================================================== 
   KVPL Executive Medical Claims — Product UI 3.0
   A single authoritative SCREEN design layer.
   Inspired by compact enterprise banking/operations products: light workspace,
   narrow colour rail, restrained pastel states and high information density.
   ========================================================================== */
@media screen {
  :root{
    --ui-rail:112px;
    --ui-violet:#6258DA;
    --ui-violet-deep:#3F35B5;
    --ui-violet-soft:#F0EFFF;
    --ui-cyan:#27B8D6;
    --ui-cyan-soft:#ECFAFD;
    --ui-green:#5DBE68;
    --ui-green-soft:#EDF9EF;
    --ui-amber:#D99A2B;
    --ui-amber-soft:#FFF7E7;
    --ui-rose:#DF6D8B;
    --ui-rose-soft:#FFF0F4;
    --ui-red:#C64F5B;
    --ui-red-soft:#FFF0F1;
    --ui-blue:#4A6FD2;
    --ui-blue-soft:#EEF3FF;
    --ui-canvas:#F3F6FB;
    --ui-surface:#FFFFFF;
    --ui-surface-soft:#F8FAFD;
    --ui-surface-tint:#F3F5FC;
    --ui-text:#293243;
    --ui-text-2:#556176;
    --ui-muted:#8B95A8;
    --ui-line:#E4EAF3;
    --ui-line-2:#D6DFEC;
    --ui-shadow:0 8px 24px rgba(46,58,91,.075);
    --ui-shadow-lg:0 18px 42px rgba(46,58,91,.11);
    --ui-radius:16px;
    --ui-radius-sm:11px;
    --control-height:42px;
    --control-radius:10px;
  }

  *{box-sizing:border-box}
  html{background:var(--ui-canvas);color:var(--ui-text);color-scheme:light}
  body{margin:0;background:var(--ui-canvas)!important;color:var(--ui-text);font-size:13px;line-height:1.45}
  body:not(.auth-body){background:linear-gradient(180deg,#F7F9FD 0%,#F3F6FB 58%,#F0F4F9 100%)!important;background-attachment:fixed!important}
  body:not(.auth-body)::before{display:none!important}
  ::selection{background:#DCD8FF;color:#302A7D}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#C7D0DE;border:3px solid transparent;border-radius:999px;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:#AEB9CA;border:3px solid transparent;background-clip:padding-box}

  a{color:#4D61BE;text-decoration:none}
  a:hover{color:#3A49A6}
  h1,h2,h3{color:var(--ui-text);letter-spacing:-.018em}
  h1{font-size:1.72rem;line-height:1.16;font-weight:720;margin-bottom:6px}
  h2{font-size:1rem;font-weight:700}
  h3{font-size:.9rem}
  p{color:var(--ui-text-2)}
  .muted{color:var(--ui-muted)!important}
  .cell-sub,.optional,.field-help{color:var(--ui-muted)!important}
  .eyebrow{color:#5263A6!important;font-size:.61rem!important;letter-spacing:.135em!important;font-weight:800!important}
  .money{font-variant-numeric:tabular-nums;text-align:right!important}

  /* ----- Application rail ----- */
  .app-shell{min-height:100vh}
  .sidebar{
    left:18px!important;top:18px!important;bottom:18px!important;width:var(--ui-rail)!important;
    border:0!important;border-radius:22px!important;overflow:hidden!important;
    background:linear-gradient(180deg,#7261E5 0%,#5B4AD5 46%,#4235B5 100%)!important;
    box-shadow:0 18px 42px rgba(62,52,157,.24)!important;
  }
  .brand-panel{
    min-height:104px!important;padding:13px 8px 10px!important;display:flex!important;justify-content:center!important;align-items:center!important;
    border-bottom:1px solid rgba(255,255,255,.13)!important;background:transparent!important;
  }
  .brand-mark{width:58px!important;height:58px!important;flex:0 0 58px!important;border:0!important;border-radius:50%!important;background:#fff!important;box-shadow:0 7px 18px rgba(40,31,124,.22)!important}
  .brand-mark img{width:50px!important;height:42px!important;object-fit:contain}
  .brand-copy{display:none!important}
  .nav-menu{padding:9px 8px 14px!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
  .nav-label{padding:13px 2px 5px!important;text-align:center!important;color:rgba(255,255,255,.55)!important;font-size:.48rem!important;letter-spacing:.08em!important;line-height:1.2!important}
  .nav-menu a{
    min-height:63px!important;margin:3px 0!important;padding:8px 4px!important;border:0!important;border-radius:15px!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:5px!important;
    color:rgba(255,255,255,.79)!important;font-size:.61rem!important;font-weight:650!important;text-align:center!important;line-height:1.12!important;
    transition:background .16s ease,color .16s ease,transform .16s ease!important;
  }
  .nav-menu a:hover{background:rgba(255,255,255,.10)!important;color:#fff!important;transform:none!important}
  .nav-menu a.active{background:rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)!important}
  .nav-menu a.active::after{display:none!important}
  .nav-icon{width:32px!important;height:30px!important;flex:0 0 30px!important;border-radius:10px!important;background:transparent!important;color:inherit!important;box-shadow:none!important}
  .nav-icon svg{width:20px!important;height:20px!important}
  .nav-menu a:hover .nav-icon,.nav-menu a.active .nav-icon{background:transparent!important;color:inherit!important;box-shadow:none!important}
  .sidebar-footer{padding:10px 8px!important;justify-content:center!important;gap:8px!important;border-top:1px solid rgba(255,255,255,.13)!important;background:rgba(22,17,93,.08)!important}
  .sidebar-footer .user-avatar{width:36px!important;height:36px!important;flex:0 0 36px!important;background:rgba(255,255,255,.18)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
  .sidebar-footer .user-meta{display:none!important}
  .sidebar-footer .icon-button{width:34px!important;height:34px!important;background:rgba(255,255,255,.09)!important;color:#fff!important;border:0!important}
  .sidebar-footer .icon-button:hover{background:rgba(255,255,255,.18)!important;color:#fff!important}

  /* ----- Main shell ----- */
  .main-area{margin-left:calc(var(--ui-rail) + 36px)!important;min-width:0!important}
  .topbar{
    height:64px!important;margin:18px 18px 0 0!important;padding:0 18px!important;top:18px!important;
    border:1px solid var(--ui-line)!important;border-radius:16px!important;background:rgba(255,255,255,.94)!important;
    box-shadow:0 5px 18px rgba(47,59,91,.055)!important;backdrop-filter:blur(16px)!important;
  }
  .topbar-title span{color:#9AA4B6!important;font-size:.58rem!important}
  .topbar-title strong{color:#344054!important;font-size:.78rem!important;font-weight:700!important}
  .security-pill{min-height:30px!important;padding:0 10px!important;background:#F0F8F1!important;border:1px solid #DDEEE1!important;color:#617867!important;font-size:.61rem!important}
  .security-dot{width:6px!important;height:6px!important;background:#5EAD69!important;box-shadow:0 0 0 4px #E5F3E8!important}
  .topbar-user{border-left:1px solid var(--ui-line)!important;padding-left:12px!important}
  .topbar-user strong{color:#374151!important;font-size:.67rem!important}.topbar-user span{color:#98A2B3!important;font-size:.57rem!important}
  .topbar-user .user-avatar{background:#EEF1FC!important;color:#5260AA!important;border-color:#DAE0F4!important}
  .content-wrap{max-width:1540px!important;padding:26px 28px 36px 12px!important}
  .app-footer{padding-left:12px!important;color:#A1AAB8!important}

  /* ----- Page composition ----- */
  .page-heading{margin-bottom:18px!important;padding:0 2px!important;align-items:center!important}
  .page-heading>div:first-child{max-width:800px!important}
  .page-heading p:last-child{font-size:.75rem!important;color:#778399!important}
  .heading-actions{gap:8px!important}
  .card{
    margin-bottom:16px!important;padding:17px 18px!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;
    background:#fff!important;box-shadow:var(--ui-shadow)!important;
  }
  .card:hover{border-color:#DCE3EE!important;box-shadow:0 10px 28px rgba(46,58,91,.085)!important}
  .card-heading{margin-bottom:13px!important}.card-heading h2{font-size:.94rem!important}.card-heading p{font-size:.69rem!important;color:#8A94A7!important}
  .section-heading{border-bottom-color:var(--ui-line)!important}
  .dashboard-grid{grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr)!important;gap:16px!important}

  /* ----- Metrics ----- */
  .metric-grid{gap:12px!important}
  .metric-card{
    min-height:101px!important;padding:15px 16px!important;border:1px solid var(--ui-line)!important;border-radius:15px!important;
    background:#fff!important;box-shadow:0 5px 18px rgba(46,58,91,.055)!important;overflow:hidden!important;
  }
  .metric-card::after{display:none!important}
  .metric-card::before{content:"";position:absolute;left:16px;top:15px;width:7px;height:7px;border-radius:50%;background:#7A77DF;box-shadow:0 0 0 5px #F0EFFF}
  .metric-card>span{padding-left:17px!important;color:#818CA0!important;font-size:.58rem!important;font-weight:750!important;letter-spacing:.07em!important}
  .metric-card strong{margin-top:14px!important;color:#293243!important;font-size:1.05rem!important;font-weight:730!important}
  .metric-card small{margin-top:4px!important;color:#99A3B5!important;font-size:.61rem!important}
  .metric-card.positive::before{background:var(--ui-green);box-shadow:0 0 0 5px var(--ui-green-soft)}
  .metric-card.positive strong{color:#3E7D4B!important}
  .metric-card.attention::before{background:var(--ui-cyan);box-shadow:0 0 0 5px var(--ui-cyan-soft)}
  .metric-card.danger::before{background:var(--ui-rose);box-shadow:0 0 0 5px var(--ui-rose-soft)}
  .metric-card.danger strong{color:#B5546E!important}
  .metric-grid .metric-card:nth-child(2):not(.positive):not(.attention):not(.danger)::before{background:#778AE4;box-shadow:0 0 0 5px #F0F2FF}

  /* ----- Buttons ----- */
  .btn{min-height:39px!important;padding:0 14px!important;border-radius:10px!important;font-size:.68rem!important;font-weight:700!important;letter-spacing:0!important;box-shadow:none!important;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease!important}
  .btn:hover{transform:translateY(-1px)!important}
  .btn-primary{color:#fff!important;background:#5864D9!important;border:1px solid #5864D9!important;box-shadow:0 7px 15px rgba(88,100,217,.18)!important}
  .btn-primary:hover{background:#4D58CC!important;border-color:#4D58CC!important;box-shadow:0 9px 18px rgba(88,100,217,.24)!important}
  .btn-secondary{color:#4D5BAA!important;background:#F0F2FF!important;border:1px solid #D9DDF7!important}
  .btn-secondary:hover{background:#E7EAFF!important;border-color:#CED4F5!important}
  .btn-ghost{color:#657086!important;background:#F7F9FC!important;border:1px solid var(--ui-line)!important}
  .btn-ghost:hover{background:#F0F3F8!important;color:#4C5668!important}
  .btn-danger{color:#B94E5B!important;background:#FFF1F2!important;border:1px solid #F3D2D6!important}
  .btn-danger:hover{background:#FCE5E8!important;border-color:#EDC2C7!important}
  .btn-small{min-height:34px!important;padding:0 11px!important;font-size:.63rem!important}
  .button-link,.table-action{color:#5263B6!important;font-weight:700!important}
  .button-link:hover,.table-action:hover{color:#39499B!important}

  /* ----- Controls: one border, one focus ring ----- */
  label{color:#566176!important;font-size:.67rem!important;font-weight:650!important}
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),select,textarea){
    width:100%!important;max-width:100%!important;min-height:var(--control-height)!important;padding:0 12px!important;
    border:1px solid #DCE3ED!important;border-radius:var(--control-radius)!important;background:#fff!important;color:#344054!important;
    box-shadow:none!important;outline:0!important;font-size:.71rem!important;
  }
  textarea{padding:10px 12px!important;line-height:1.45!important}
  :where(input,select,textarea)::placeholder{color:#A4ADBC!important;opacity:1!important}
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),select,textarea):hover{border-color:#C9D2E0!important}
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),select,textarea):is(:focus,:focus-visible){border-color:#7771DD!important;box-shadow:0 0 0 3px rgba(103,95,218,.12)!important;background:#fff!important}
  :where(input,select,textarea):disabled{background:#F5F7FA!important;color:#8A94A7!important;border-color:#E5EAF1!important;opacity:1!important}
  input[type="checkbox"],input[type="radio"]{width:16px!important;height:16px!important;min-height:0!important;accent-color:#6159D8!important;box-shadow:none!important}
  .search-box,.review-search-box,.decision-money-input{
    min-height:var(--control-height)!important;border:1px solid #DCE3ED!important;border-radius:var(--control-radius)!important;background:#fff!important;box-shadow:none!important;
  }
  .search-box:focus-within,.review-search-box:focus-within,.decision-money-input:focus-within{border-color:#7771DD!important;box-shadow:0 0 0 3px rgba(103,95,218,.12)!important}
  .search-box input,.review-search-box input,.decision-money-input input,.input-with-icon input,.password-wrap input{border:0!important;box-shadow:none!important;background:transparent!important;outline:0!important;border-radius:0!important}
  .search-box input:focus,.review-search-box input:focus,.decision-money-input input:focus,.input-with-icon input:focus,.password-wrap input:focus{border:0!important;box-shadow:none!important;background:transparent!important}
  .decision-money-input{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;overflow:hidden!important}
  .decision-money-input>span{padding-left:12px!important;color:#8A94A7!important;font-size:.62rem!important}
  .decision-money-input input{text-align:right!important;font-variant-numeric:tabular-nums!important;padding-right:12px!important}
  .input-with-icon{border:1px solid #DCE3ED!important;border-radius:var(--control-radius)!important;background:#fff!important;box-shadow:none!important}
  .input-with-icon:focus-within{border-color:#7771DD!important;box-shadow:0 0 0 3px rgba(103,95,218,.12)!important}
  .input-with-icon>svg{color:#A3ACBC!important}
  .password-toggle{background:#F4F6FA!important;color:#687386!important;border:0!important;border-left:1px solid #E5EAF1!important;border-radius:0 9px 9px 0!important}

  /* ----- Filter bars ----- */
  .filter-card{padding:14px 16px!important;background:rgba(255,255,255,.92)!important;border-color:var(--ui-line)!important}
  .filter-row{gap:10px!important;align-items:end!important}
  .filter-row label{gap:5px!important}
  .review-control-bar{padding:13px 14px!important;gap:10px!important;background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:15px!important;box-shadow:var(--ui-shadow)!important}
  .review-search-box{display:flex!important;align-items:center!important;gap:8px!important;padding:0 11px!important;overflow:hidden!important}
  .review-search-box svg{width:17px!important;height:17px!important;flex:0 0 17px!important;color:#A0AABC!important}
  .review-search-box input{padding:0!important;min-width:0!important}
  .review-progress-panel{background:#F8FAFD!important;border-color:#E4EAF3!important}

  /* ----- Tables as soft enterprise rows ----- */
  .table-card{background:#fff!important;border-color:var(--ui-line)!important}
  .table-wrap{overflow:auto!important;scrollbar-color:#C5CEDB transparent}
  table{width:100%!important;border-collapse:separate!important;border-spacing:0 7px!important}
  thead th{padding:5px 12px 8px!important;background:transparent!important;border:0!important;color:#7B879B!important;font-size:.57rem!important;font-weight:800!important;letter-spacing:.07em!important;box-shadow:none!important;white-space:nowrap!important}
  tbody td{padding:10px 12px!important;background:#F8FAFD!important;border-top:1px solid #F1F4F8!important;border-bottom:1px solid #F1F4F8!important;color:#4B576B!important;font-size:.69rem!important;vertical-align:middle!important}
  tbody tr td:first-child{border-left:1px solid #F1F4F8!important;border-radius:12px 0 0 12px!important}
  tbody tr td:last-child{border-right:1px solid #F1F4F8!important;border-radius:0 12px 12px 0!important}
  tbody tr:nth-child(4n+1) td{background:#F7F7FF!important}
  tbody tr:nth-child(4n+2) td{background:#F6FBFD!important}
  tbody tr:hover td{background:#F0F2FF!important;color:#354052!important;border-color:#E5E6FB!important}
  tbody td strong{color:#344054!important}
  .empty-state{background:#FAFBFD!important;color:#98A2B3!important;text-align:center!important;border-radius:12px!important}
  .table-actions{gap:9px!important}
  .table-input{background:#fff!important}
  .history-transactions-table tbody td,.balance-report-table tbody td{font-size:.66rem!important}

  /* ----- Status language ----- */
  .status,.review-readiness,.review-save-state,.spectacle-state{
    display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:27px!important;padding:0 9px!important;border-radius:999px!important;
    border:1px solid #E0E5EE!important;background:#F5F7FA!important;color:#667085!important;font-size:.58rem!important;font-weight:750!important;white-space:nowrap!important;
  }
  .status::before,.review-readiness::before{content:""!important;width:6px!important;height:6px!important;border-radius:50%!important;background:#9AA4B5!important;box-shadow:none!important}
  .status.active,.status.approved,.status.completed,.status.paid,.review-readiness.ready{background:var(--ui-green-soft)!important;color:#4E7D56!important;border-color:#D7ECD9!important}
  .status.active::before,.status.approved::before,.status.completed::before,.status.paid::before,.review-readiness.ready::before{background:var(--ui-green)!important}
  .status.submitted,.status.under-review,.status.pending-approval,.status.payment-in-progress{background:var(--ui-cyan-soft)!important;color:#3B7F8D!important;border-color:#D3F0F5!important}
  .status.submitted::before,.status.under-review::before,.status.pending-approval::before,.status.payment-in-progress::before{background:var(--ui-cyan)!important}
  .status.returned,.status.partially-approved,.review-readiness.adjusted{background:var(--ui-amber-soft)!important;color:#9B6B22!important;border-color:#F5E6C3!important}
  .status.returned::before,.status.partially-approved::before,.review-readiness.adjusted::before{background:var(--ui-amber)!important}
  .status.rejected,.status.inactive,.review-readiness.attention{background:var(--ui-rose-soft)!important;color:#A9536A!important;border-color:#F4D8E1!important}
  .status.rejected::before,.status.inactive::before,.review-readiness.attention::before{background:var(--ui-rose)!important}
  .review-save-state.saved{background:#F0F8F1!important;color:#4F7D57!important;border-color:#DCECDF!important}
  .review-save-state.unsaved{background:#F6F7FA!important;color:#7C8799!important;border-color:#E5E9F0!important}
  .flash{border-radius:12px!important;border:1px solid var(--ui-line)!important;box-shadow:var(--ui-shadow)!important}
  .flash.success{background:#F1F9F2!important;color:#4B7453!important;border-color:#DCEEDF!important}
  .flash.error,.flash.danger{background:#FFF2F4!important;color:#A14E63!important;border-color:#F2D6DD!important}
  .flash.warning{background:#FFF8EA!important;color:#946A2A!important;border-color:#F2E2C3!important}

  /* ----- Lists, utilisation and panels ----- */
  .utilisation-list{gap:8px!important}.util-row{padding:11px 12px!important;border:1px solid #EEF2F6!important;border-radius:13px!important;background:#FAFBFD!important}
  .util-row:nth-child(3n+1){background:#F7F7FF!important}.util-row:nth-child(3n+2){background:#F5FBFD!important}.util-row:nth-child(3n){background:#F7FBF7!important}
  .progress,.mini-progress{height:5px!important;background:#E9EDF4!important}.progress i,.mini-progress i{background:#6D68DA!important;box-shadow:none!important}
  .submit-panel,.alert-panel{border-radius:15px!important;border:1px solid var(--ui-line)!important;box-shadow:var(--ui-shadow)!important;background:#fff!important}
  .submit-panel{border-left:4px solid #6B63D9!important}.alert-panel.danger{border-left:4px solid var(--ui-rose)!important;background:#FFF8FA!important}
  .report-note{color:#8C96A8!important;font-size:.62rem!important}

  /* ----- Employee summary / data strips ----- */
  .employee-summary-strip{background:#fff!important;box-shadow:var(--ui-shadow)!important}
  .employee-summary-strip>div:not(:last-child){border-right-color:#EDF1F6!important}
  .avatar-small,.user-avatar{background:#EEF1FC!important;color:#5861A9!important;border-color:#DDE1F5!important}
  .spectacle-stack strong{color:#344054!important}.spectacle-stack span{color:#8993A6!important}
  .balance-healthy{color:#4A8554!important}.balance-warning{color:#A57226!important}.balance-negative{color:#B65160!important}

  /* ----- Admin review: quiet, task-focused ----- */
  .review-decision-stack{gap:13px!important}
  .claim-decision-card{border:1px solid var(--ui-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:var(--ui-shadow)!important;overflow:hidden!important}
  .claim-decision-card[data-review-saved="1"]{border-color:#D9E9DC!important}
  .claim-decision-header{padding:14px 16px!important;background:#FBFCFE!important;border-bottom:1px solid #EEF2F6!important}
  .claim-avatar{background:#F0EFFF!important;color:#5B55BD!important;border-color:#DEDAFB!important}
  .claim-person strong{font-size:.78rem!important;color:#344054!important}.claim-person span{font-size:.6rem!important;color:#919BAD!important}
  .claim-total-summary span{color:#99A2B2!important}.claim-total-summary strong{color:#344054!important;font-size:.92rem!important}
  .review-line-selector{border-radius:999px!important;background:#F5F7FA!important;border:1px solid #E6EAF1!important;color:#667085!important}
  .review-line-selector.is-saved{background:#EFF8F1!important;border-color:#D9ECDC!important;color:#52775A!important}
  .claim-entitlement{margin:13px 16px 0!important;border:1px solid #E8EDF4!important;border-radius:13px!important;overflow:hidden!important;background:#FAFBFD!important}
  .claim-entitlement>div{padding:11px 13px!important;border-color:#E8EDF4!important}.claim-entitlement span{font-size:.54rem!important;color:#929CAD!important}.claim-entitlement strong{font-size:.72rem!important;color:#374151!important}.claim-entitlement .available{background:#F7F7FF!important}
  .claim-review-section{margin:12px 16px!important;padding:14px!important;border:1px solid #E9EDF3!important;border-radius:14px!important;background:#fff!important}
  .claim-section-kicker{color:#778399!important}.claim-section-title h2{font-size:.86rem!important}
  .decision-readonly,.decision-balance{border-radius:12px!important;border:1px solid #E8EDF4!important;background:#FAFBFD!important}
  .decision-readonly strong,.decision-balance strong{color:#344054!important}.decision-balance.healthy{background:#F1F9F2!important;border-color:#DDEEE0!important}.decision-balance.warning{background:#FFF8EA!important;border-color:#F2E4C7!important}.decision-balance.danger{background:#FFF2F4!important;border-color:#F2D9DF!important}
  .claimable-action-feedback{color:#5E7A65!important;font-size:.6rem!important}
  .spectacle-review-section{background:#FBFCFF!important}.spectacle-rule-note{background:#F6F8FC!important;border-color:#E6EAF2!important;color:#596579!important}.spectacle-rule-note.danger{background:#FFF3F5!important;border-color:#F1D8DE!important;color:#9C5567!important}
  .no-spectacle-section{margin:12px 16px!important;border-radius:13px!important;border:1px dashed #DDE4ED!important;background:#FAFBFD!important;color:#667085!important}
  .review-impact{margin:0 16px 12px!important;border-radius:12px!important;background:#FFF8EB!important;border-color:#F0E1C0!important}
  .review-remarks{margin:0 16px 15px!important;border:1px solid #E8EDF4!important;border-radius:12px!important;background:#FBFCFE!important}
  .sticky-action-bar{border:1px solid #DEE5EE!important;background:rgba(255,255,255,.96)!important;box-shadow:0 -8px 24px rgba(46,58,91,.08)!important;backdrop-filter:blur(16px)!important}
  .review-live-summary strong{color:#344054!important}.review-live-summary span{color:#8993A6!important}

  /* ----- Typeahead ----- */
  .employee-typeahead,.field-typeahead{min-width:0!important}
  .employee-typeahead-menu{border:1px solid #E0E6EF!important;border-radius:13px!important;background:#fff!important;box-shadow:0 16px 34px rgba(46,58,91,.15)!important;padding:6px!important}
  .employee-typeahead-option{border:0!important;border-radius:10px!important;background:#fff!important;color:#485568!important}
  .employee-typeahead-option:hover,.employee-typeahead-option.active{background:#F1F2FF!important;color:#344054!important}
  .employee-code{color:#5F61C2!important;background:#F0EFFF!important;border-radius:999px!important;padding:3px 7px!important}

  /* ----- Authentication ----- */
  .auth-body{background:#F4F6FB!important;color:var(--ui-text)!important}
  .auth-layout{min-height:100vh!important;background:#F4F6FB!important;display:grid!important;grid-template-columns:minmax(380px,.95fr) minmax(420px,1.05fr)!important;overflow:hidden!important}
  .auth-brand{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:56px!important;background:linear-gradient(145deg,#7160E5 0%,#5E4FD8 44%,#4035B5 100%)!important;color:#fff!important;overflow:hidden!important}
  .auth-brand::before,.auth-brand::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
  .auth-brand::before{width:520px;height:520px;left:-260px;bottom:-260px}.auth-brand::after{width:330px;height:330px;right:-160px;top:-120px}
  .auth-brand-inner{position:relative;z-index:2;max-width:520px!important}
  .auth-logo-tile{width:70px!important;height:70px!important;border-radius:20px!important;background:#fff!important;border:0!important;box-shadow:0 14px 32px rgba(37,28,116,.22)!important}
  .auth-domain{color:rgba(255,255,255,.68)!important}.auth-brand h1{color:#fff!important;font-size:2.15rem!important}.auth-brand>*,.auth-brand p{color:rgba(255,255,255,.83)!important}
  .auth-feature-grid{grid-template-columns:1fr!important;gap:9px!important;margin-top:28px!important}.auth-feature-grid>div{background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:13px!important;box-shadow:none!important}.auth-feature-grid strong{color:#fff!important}.auth-feature-grid small{color:rgba(255,255,255,.65)!important}.feature-icon{background:rgba(255,255,255,.14)!important;color:#fff!important;border:0!important}
  .auth-form-side{display:flex!important;align-items:center!important;justify-content:center!important;padding:48px!important;background:#F6F8FC!important}
  .auth-card{width:min(440px,100%)!important;padding:34px!important;border:1px solid #E5EAF2!important;border-radius:20px!important;background:#fff!important;box-shadow:0 20px 48px rgba(49,60,91,.10)!important}
  .auth-card-icon{background:#F0EFFF!important;color:#5B55BD!important;border-color:#DEDAFB!important}.auth-card h2{font-size:1.45rem!important}.auth-help{color:#9AA3B4!important}
  .auth-submit{min-height:44px!important}
  .auth-orbit{display:none!important}

  /* ----- Dense form pages ----- */
  .form-grid{gap:13px!important}.stack-form{gap:13px!important}
  .field-section,.banking-card{border-color:var(--ui-line)!important;background:#fff!important}
  .danger-zone{background:#FFF8FA!important;border-color:#F2DCE1!important}



  /* ----- Compact review mode (v4.0.6) ----- */
  .review-page-heading p:last-child{max-width:780px!important}
  .review-batch-summary{margin-bottom:14px!important}
  .review-batch-summary>div{padding:10px 13px!important}
  .review-batch-summary>div>span{font-size:.56rem!important}
  .review-batch-summary>div>strong{margin-top:3px!important;font-size:.82rem!important}
  .review-batch-guidance{gap:9px!important}
  .review-batch-guidance .review-guidance-icon{width:24px!important;height:24px!important;flex-basis:24px!important;border-radius:8px!important;font-size:.68rem!important}
  .review-batch-guidance p strong{font-size:.68rem!important}
  .review-batch-guidance p small{font-size:.59rem!important;line-height:1.28!important}

  .review-control-bar{padding:10px 12px!important;gap:8px!important}
  .review-progress-panel{padding:8px 10px!important}
  .review-progress-panel strong{font-size:.69rem!important}
  .review-progress-panel span{font-size:.61rem!important}

  .review-decision-stack{gap:14px!important}
  .claim-decision-card{border-radius:18px!important}
  .claim-decision-header{padding:12px 16px 10px!important;gap:12px!important}
  .claim-person{gap:10px!important}
  .claim-avatar,.claim-avatar-profile{width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:12px!important}
  .claim-person strong{font-size:.93rem!important;line-height:1.15!important}
  .claim-person span{margin-top:2px!important;font-size:.64rem!important}
  .claim-header-actions{gap:10px!important;flex-wrap:wrap!important}
  .claim-total-summary span{font-size:.53rem!important}
  .claim-total-summary strong{font-size:.88rem!important;margin-top:1px!important}
  .review-line-selector{min-height:28px!important;padding:0 10px!important;font-size:.58rem!important}
  .review-line-selector [data-review-check-label]{line-height:1.05!important}
  .review-save-state{min-height:25px!important;padding:0 8px!important;font-size:.55rem!important}
  .review-readiness{min-height:25px!important;min-width:76px!important;padding:0 8px!important;font-size:.56rem!important}

  .claim-entitlement{margin:10px 14px 0!important;border-radius:12px!important}
  .claim-entitlement>div{padding:9px 11px!important}
  .claim-entitlement span{font-size:.5rem!important;line-height:1.2!important}
  .claim-entitlement strong{margin-top:3px!important;font-size:.68rem!important;line-height:1.15!important}
  .claim-entitlement .available strong{font-size:.8rem!important}

  .claim-review-section{margin:10px 14px 0!important;padding:11px 12px!important;border-radius:13px!important}
  .claim-section-title{margin-bottom:10px!important;gap:10px!important}
  .claim-section-kicker{margin-bottom:2px!important;font-size:.54rem!important}
  .claim-section-title h2{font-size:.82rem!important;line-height:1.16!important}
  .claim-section-title .btn-small{min-height:30px!important;padding:0 9px!important;font-size:.58rem!important}
  .claimable-action{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
  .claimable-action-feedback{font-size:.56rem!important;line-height:1.2!important;max-width:220px!important}

  .claim-decision-grid{grid-template-columns:minmax(150px,.72fr) minmax(220px,1.15fr) minmax(170px,.8fr)!important;gap:10px!important}
  .decision-readonly,.decision-balance{padding:10px 12px!important;border-radius:11px!important}
  .decision-readonly span,.decision-balance span{font-size:.57rem!important}
  .decision-readonly strong,.decision-balance strong{margin-top:3px!important;font-size:.98rem!important;line-height:1.08!important}
  .decision-readonly small,.decision-balance small{margin-top:3px!important;font-size:.57rem!important;line-height:1.28!important}
  .decision-input-label{gap:5px!important;font-size:.63rem!important}
  .decision-input-label>small{font-size:.57rem!important;line-height:1.28!important}
  .decision-money-input{min-height:42px!important;border-radius:11px!important}
  .decision-money-input>span{padding-left:10px!important;font-size:.59rem!important}
  .decision-money-input input{min-height:40px!important;font-size:.84rem!important;padding-right:10px!important}

  .spectacle-review-section{padding-bottom:1px!important}
  .spectacle-title{margin-bottom:8px!important}
  .spectacle-state{min-height:24px!important;padding:0 8px!important;font-size:.55rem!important}
  .spectacle-rule-note{margin-bottom:10px!important;padding:7px 9px!important;border-radius:10px!important;font-size:.58rem!important;line-height:1.32!important}
  .spectacle-rule-note strong{font-size:.58rem!important}
  .spectacle-decision-grid{grid-template-columns:minmax(200px,1fr) minmax(220px,1fr)!important;gap:10px!important;max-width:none!important}
  .spectacle-date-field small{font-size:.57rem!important;line-height:1.28!important}
  .spectacle-date-field input{min-height:42px!important}

  .no-spectacle-section{margin:10px 14px 0!important;padding:8px 11px!important;border-radius:12px!important;gap:8px!important}
  .no-spectacle-icon{width:22px!important;height:22px!important;flex-basis:22px!important;border-radius:8px!important;font-size:.72rem!important}
  .no-spectacle-section strong{font-size:.64rem!important}
  .no-spectacle-section div span{font-size:.58rem!important;line-height:1.25!important}

  .review-impact{margin:10px 14px 0!important;padding:9px 11px!important;border-radius:11px!important;gap:12px!important}
  .review-impact>div{min-width:145px!important}
  .review-impact>div>span{font-size:.53rem!important}
  .review-impact>div>strong{font-size:.72rem!important}
  .review-impact p{font-size:.58rem!important;line-height:1.28!important}

  .review-remarks{margin:10px 14px 14px!important;border-radius:11px!important}
  .review-remarks summary{padding:9px 11px!important;font-size:.62rem!important}
  .review-remarks summary small{font-size:.55rem!important}
  .review-remarks label{padding:9px 11px 11px!important}
  .review-remarks label>span{font-size:.61rem!important}
  .review-remarks textarea{min-height:54px!important}

  .review-sticky-bar{min-height:58px!important;margin-top:14px!important;padding:9px 11px 9px 13px!important}
  .review-live-summary strong{font-size:.71rem!important}
  .review-live-summary span{font-size:.6rem!important}

  @media (max-width:980px){
    .claim-decision-grid{grid-template-columns:1fr 1.1fr!important}
    .decision-balance{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important}
    .decision-balance strong{grid-column:2!important;grid-row:1/3!important;margin:0!important}
    .decision-balance small{grid-column:1!important}
  }
  @media (max-width:720px){
    .claim-decision-header{padding:11px 13px 10px!important}
    .claim-header-actions{width:100%!important;justify-content:flex-start!important;gap:8px!important}
    .claim-entitlement,.claim-review-section,.no-spectacle-section,.review-impact,.review-remarks{margin-left:12px!important;margin-right:12px!important}
    .claim-entitlement{margin-top:9px!important}
    .claim-review-section{padding:10px!important}
    .claim-decision-grid,.spectacle-decision-grid{grid-template-columns:1fr!important}
    .review-batch-summary>div{padding:9px 11px!important}
    .review-control-bar{padding:10px!important}
  }



  /* ----- Review accordion & polish (v4.0.7) ----- */
  .claim-decision-body{display:block!important}
  .claim-decision-card.is-collapsed .claim-decision-body{display:none!important}
  .claim-decision-card.is-collapsed .claim-decision-header{border-bottom:0!important}
  .claim-decision-header{cursor:pointer!important}
  .claim-decision-header :where(button,input,label,a,select,textarea){cursor:auto!important}
  .claim-decision-header button,.claim-decision-header label{cursor:pointer!important}
  .claim-decision-card.is-collapsed{box-shadow:0 5px 16px rgba(46,58,91,.055)!important}
  .claim-decision-card.is-collapsed:hover{border-color:#D4DCEA!important}

  .review-card-toggle{
    width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important;
    display:grid!important;place-items:center!important;border:1px solid #E1E6EE!important;border-radius:9px!important;
    background:#F7F9FC!important;color:#697589!important;box-shadow:none!important;cursor:pointer!important;
  }
  .review-card-toggle:hover{background:#F0F2FF!important;border-color:#D9DDF7!important;color:#4D5BAA!important}
  .review-card-toggle span{display:block!important;font-size:.83rem!important;line-height:1!important;transition:transform .16s ease!important}
  .claim-decision-card.is-collapsed .review-card-toggle span{transform:rotate(180deg)!important}

  /* Saved rows previously showed an oversized disabled checkbox plus a second
     Saved badge. Keep one compact Reviewed pill; if the row is edited the
     normal save selector appears again automatically. */
  .review-line-selector.is-saved{min-height:26px!important;padding:0 9px!important;background:#EFF8F1!important;border-color:#D9ECDC!important;color:#52775A!important}
  .review-line-selector.is-saved input[disabled]{display:none!important}
  .review-line-selector.is-saved [data-review-check-label]::before{content:"✓";margin-right:5px;font-weight:800!important}
  .claim-decision-card[data-review-saved="1"][data-review-dirty="0"] .review-save-state.saved{display:none!important}

  /* Screenshot polish: spectacle amount is a short money field; bill date gets
     the horizontal space it actually needs. */
  .spectacle-decision-grid{grid-template-columns:minmax(230px,360px) minmax(360px,1fr)!important;max-width:none!important}

  .review-card-nav{display:flex!important;align-items:center!important;gap:6px!important;margin-left:auto!important;margin-right:0!important;white-space:nowrap!important}
  .review-card-nav .btn{width:auto!important;min-height:32px!important;padding:0 9px!important}
  .review-card-position{min-width:44px!important;text-align:center!important;color:#7C8799!important;font-size:.59rem!important;font-weight:750!important;font-variant-numeric:tabular-nums!important}
  .review-card-nav .btn:disabled{opacity:.45!important;transform:none!important;cursor:not-allowed!important}

  @media (max-width:980px){
    .review-card-nav{order:2!important;margin-left:0!important}
  }
  @media (max-width:720px){
    .spectacle-decision-grid{grid-template-columns:1fr!important}
    .review-card-nav{width:100%!important;justify-content:center!important;order:1!important}
    .review-card-nav .btn{width:auto!important;flex:1 1 0!important}
    .review-card-position{min-width:54px!important}
  }



  /* ----- Single-review action workflow (v4.0.8) ----- */
  .review-line-check{display:none!important}
  .claim-header-actions .review-save-state{
    min-height:24px!important;padding:0 8px!important;border-radius:999px!important;
    font-size:.55rem!important;font-weight:760!important;
  }
  .review-save-state.saved{background:#F0F8F1!important;color:#4F7D57!important;border-color:#DCECDF!important}
  .review-save-state.unsaved{background:#F6F7FA!important;color:#788496!important;border-color:#E4E9F0!important}
  .review-save-state.dirty{background:#FFF8EA!important;color:#936A28!important;border-color:#F0E1C3!important}
  .claim-decision-card[data-review-saved="1"][data-review-dirty="0"] .review-save-state.saved{display:inline-flex!important}

  .review-card-save-row{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important;
    margin:10px 14px 14px!important;padding-top:10px!important;border-top:1px solid #EDF1F5!important;
  }
  .review-card-save-copy{
    margin-right:auto!important;color:#788496!important;font-size:.59rem!important;line-height:1.3!important;
  }
  .review-card-save-button{
    min-width:112px!important;min-height:36px!important;padding:0 14px!important;font-size:.64rem!important;
  }
  .review-card-save-button[hidden]{display:none!important}
  .claim-decision-card[data-review-saved="1"][data-review-dirty="0"] .review-card-save-row{display:none!important}

  /* The per-employee action replaces bulk checkbox controls. */
  .review-select-visible,.review-save-progress{display:none!important}
  .review-control-bar{grid-template-columns:minmax(0,1fr) 190px minmax(280px,.8fr)!important}
  .review-progress-panel{grid-column:auto!important;min-height:var(--control-height)!important;align-self:end!important}

  @media(max-width:980px){
    .review-control-bar{grid-template-columns:minmax(0,1fr) 180px!important}
    .review-progress-panel{grid-column:1/-1!important}
  }
  @media(max-width:720px){
    .review-control-bar{grid-template-columns:1fr!important}
    .review-progress-panel{grid-column:auto!important}
    .review-card-save-row{align-items:stretch!important;flex-direction:column!important;gap:8px!important}
    .review-card-save-button{width:100%!important}
  }

  /* ----- Responsive ----- */
  @media (max-width:1180px){
    :root{--ui-rail:104px}
    .content-wrap{padding-right:20px!important}
    .dashboard-grid{grid-template-columns:1fr!important}
    .metric-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  }
  @media (max-width:980px){
    .sidebar{left:12px!important;top:12px!important;bottom:12px!important;width:min(300px,calc(100vw - 24px))!important;transform:translateX(calc(-100% - 24px))!important;border-radius:18px!important;z-index:80!important}
    .sidebar.open{transform:translateX(0)!important}
    .sidebar .brand-copy{display:block!important}.sidebar .brand-panel{justify-content:flex-start!important;padding:13px 15px!important;min-height:82px!important}.sidebar .brand-mark{width:50px!important;height:50px!important;flex-basis:50px!important;border-radius:15px!important}.sidebar .brand-copy strong{color:#fff!important}.sidebar .brand-copy span{color:rgba(255,255,255,.65)!important}
    .sidebar .nav-label{text-align:left!important;padding-left:12px!important}.sidebar .nav-menu a{min-height:44px!important;flex-direction:row!important;justify-content:flex-start!important;text-align:left!important;padding:6px 10px!important;font-size:.72rem!important}.sidebar .nav-icon{width:31px!important;height:31px!important;flex-basis:31px!important}.sidebar-footer{justify-content:flex-start!important;padding:10px 14px!important}.sidebar-footer .user-meta{display:block!important}.sidebar-footer .user-meta strong{color:#fff!important}.sidebar-footer .user-meta span{color:rgba(255,255,255,.65)!important}
    .sidebar-backdrop{z-index:70!important}.sidebar.open~.sidebar-backdrop{display:block!important;background:rgba(32,37,55,.28)!important;backdrop-filter:blur(2px)!important}
    .main-area{margin-left:0!important;width:100%!important}
    .topbar{margin:12px 12px 0!important;top:12px!important}
    .menu-toggle{display:grid!important;background:#F3F5FA!important;border:1px solid #E5EAF2!important}
    .content-wrap{padding:22px 14px 30px!important;max-width:none!important}
    .app-footer{padding-left:14px!important;padding-right:14px!important}
    .review-control-bar{grid-template-columns:minmax(0,1fr) 180px!important}.review-progress-panel{grid-column:1/-1!important}
  }
  @media (max-width:720px){
    h1{font-size:1.42rem!important}.page-heading{align-items:flex-start!important;gap:12px!important}.page-heading,.heading-actions{flex-direction:column!important}.heading-actions{width:100%!important;align-items:stretch!important}.heading-actions .btn{width:100%!important}
    .metric-grid,.metric-grid.four,.metric-grid.three,.metric-grid.two{grid-template-columns:1fr!important}
    .metric-card{min-height:88px!important}
    .filter-row{grid-template-columns:1fr!important;display:grid!important}.filter-row>*{width:100%!important}
    .review-control-bar{grid-template-columns:1fr!important}.review-progress-panel{grid-column:auto!important}
    .claim-decision-header{align-items:flex-start!important;gap:10px!important}.claim-header-actions{width:100%!important;justify-content:flex-start!important;flex-wrap:wrap!important}
    .claim-entitlement{grid-template-columns:1fr!important}.claim-entitlement>div{border-right:0!important;border-bottom:1px solid #E8EDF4!important}.claim-entitlement>div:last-child{border-bottom:0!important}
    .claim-decision-grid,.spectacle-decision-grid{grid-template-columns:1fr!important}
    .sticky-action-bar{left:10px!important;right:10px!important;bottom:10px!important;flex-wrap:wrap!important;border-radius:14px!important}.review-live-summary{width:100%!important}
    table{min-width:720px!important}
    .topbar-actions .security-pill{display:none!important}
  }
  @media (max-width:520px){
    .topbar{height:58px!important;padding:0 12px!important}.topbar-title span{display:none!important}.topbar-user>div:last-child{display:none!important}.topbar-user{border:0!important;padding-left:0!important}
    .content-wrap{padding:18px 10px 26px!important}.card{padding:14px!important;border-radius:14px!important}.page-heading{margin-bottom:14px!important}
    .auth-layout{display:block!important}.auth-brand{display:none!important}.auth-form-side{min-height:100vh!important;padding:22px!important}.auth-card{padding:26px 22px!important;border-radius:18px!important}
    .sidebar{width:calc(100vw - 20px)!important;left:10px!important;top:10px!important;bottom:10px!important}
  }
}

/* ========================================================================== 
   Product UI 3.0.1 — Readability, Apple typography & compact authentication
   This is intentionally appended to win over legacy high-specificity rules.
   ========================================================================== */
@media screen {
  :root{
    --ui-text:#172033;
    --ui-text-2:#3F4B60;
    --ui-muted:#667085;
    --ui-line:#DCE3ED;
    --ui-line-2:#C8D2E0;
  }

  html,body,button,input,select,textarea,table{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Arial,sans-serif!important;
  }
  h1,h2,h3,h4,h5,h6{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Arial,sans-serif!important;
    color:var(--ui-text)!important;
  }
  body{color:var(--ui-text)!important;font-size:13.5px!important;line-height:1.5!important}
  p{color:var(--ui-text-2)!important}
  .muted,.cell-sub,.optional,.field-help,.micro-copy,.security-note{color:var(--ui-muted)!important}
  .page-heading p:last-child,.card-heading p,.section-heading p{color:#5D697D!important}
  .eyebrow{color:#445AA3!important}

  /* Restore deliberate contrast to legacy components that previously stayed pale. */
  .card-heading h2,.section-heading h2,.claim-section-title h2,
  .security-step h2,.dashboard-panel h2{color:#1D2939!important}
  .card-heading p,.section-heading p{opacity:1!important}
  label,.decision-input-label{color:#344054!important;font-weight:650!important}
  .detail-list dt{color:#667085!important}
  .detail-list dd{color:#1F2937!important;font-weight:650!important}
  .detail-list .total dd{color:#263F87!important}
  .account-number{color:#1F2937!important}
  .info-box,.alert-panel{color:#475467!important}
  .info-box strong,.alert-panel strong{color:#263244!important}

  thead th{color:#475467!important;font-weight:750!important}
  tbody td{color:#344054!important}
  tbody td strong,td strong{color:#1D2939!important}
  .empty-state{color:#667085!important}
  .table-action{color:#4055AF!important}

  .metric-card>span{color:#667085!important}
  .metric-card strong{color:#1D2939!important}
  .metric-card small{color:#667085!important}
  .topbar-title span{color:#667085!important}
  .topbar-title strong{color:#253044!important}
  .topbar-user strong{color:#253044!important}
  .topbar-user span{color:#667085!important}

  input,select,textarea{
    color:#1D2939!important;
    background:#FFFFFF!important;
    border-color:#CED7E4!important;
  }
  input::placeholder,textarea::placeholder{color:#8A96A8!important;opacity:1!important}
  input:hover,select:hover,textarea:hover{background:#FFFFFF!important;border-color:#AEBBCD!important}
  input:focus,select:focus,textarea:focus{
    background:#FFFFFF!important;border-color:#6D73DB!important;
    box-shadow:0 0 0 3px rgba(98,88,218,.12)!important;
  }
  input:disabled,select:disabled,textarea:disabled{
    background:#F2F4F7!important;color:#5E6A7D!important;border-color:#D8DFE8!important;opacity:1!important;
  }
  select{color-scheme:light!important}
  .search-box>span,.input-with-icon>svg{color:#667085!important}
  .password-toggle{color:#4653A7!important;background:#F3F4FF!important}

  /* The rail stays colourful, but navigation copy is now fully legible. */
  .nav-menu a{color:rgba(255,255,255,.94)!important;font-weight:680!important}
  .nav-label{color:rgba(255,255,255,.72)!important}
  .sidebar .brand-copy span,.sidebar-footer .user-meta span{color:rgba(255,255,255,.78)!important}

  /* Admin review fields were designed during the old dark theme; normalize them. */
  .decision-input-label{color:#344054!important}
  .decision-input-label>small{color:#667085!important}
  .decision-money-input{background:#fff!important;border-color:#CED7E4!important}
  .decision-money-input:focus-within{background:#fff!important;border-color:#6D73DB!important;box-shadow:0 0 0 3px rgba(98,88,218,.12)!important}
  .decision-money-input>span{color:#667085!important}
  .decision-money-input input{background:transparent!important;color:#1D2939!important}
  .spectacle-date-field input{background:#fff!important;border-color:#CED7E4!important;color:#1D2939!important}
  .review-remarks summary{color:#344054!important}
  .review-remarks summary small{color:#667085!important}
  .review-remarks textarea{background:#fff!important;border-color:#CED7E4!important;color:#1D2939!important}

  /* Minimal sign-in: identity + credentials only. */
  .auth-body{background:#F4F6FA!important;min-height:100vh!important}
  .login-shell{
    min-height:100vh;display:grid;place-items:center;padding:28px;
    background:linear-gradient(180deg,#F8F9FC 0%,#F2F5F9 100%);
  }
  .login-panel{
    width:min(390px,100%);padding:34px 34px 28px;border:1px solid #E0E6EE;border-radius:18px;
    background:#fff;box-shadow:0 18px 46px rgba(36,48,77,.10);
  }
  .login-brandmark{
    width:64px;height:64px;display:grid;place-items:center;margin:0 auto 16px;border:1px solid #E6EAF0;
    border-radius:18px;background:#fff;box-shadow:0 7px 18px rgba(46,58,91,.08);
  }
  .login-brandmark img{width:54px;height:44px;object-fit:contain}
  .login-heading{text-align:center;margin-bottom:25px}
  .login-heading h1{margin:0 0 5px!important;font-size:1.28rem!important;font-weight:730!important;letter-spacing:-.025em!important}
  .login-heading p{margin:0!important;color:#667085!important;font-size:.74rem!important}
  .login-form{display:flex;flex-direction:column;gap:15px}
  .login-form label{gap:7px!important;font-size:.72rem!important;color:#344054!important}
  .login-form input{min-height:46px!important;border-radius:10px!important;padding:10px 12px!important}
  .login-password-wrap{position:relative}
  .login-password-wrap input{padding-right:62px!important}
  .login-password-wrap .password-toggle{top:7px!important;right:7px!important;min-height:32px!important;border-radius:7px!important}
  .login-submit{min-height:45px!important;margin-top:2px!important;border-radius:10px!important;font-size:.75rem!important}
  .login-security{margin:19px 0 0!important;padding-top:15px;border-top:1px solid #E8ECF2;text-align:center;color:#7A8597!important;font-size:.62rem!important}
  .login-panel .flash{margin-bottom:16px!important}

  /* Employee master: status help needs to remain readable in dense forms. */
  .form-grid label .field-help{display:block;margin-top:1px;line-height:1.35;font-size:.61rem!important;font-weight:500!important}

  @media(max-width:520px){
    .login-shell{padding:18px!important}
    .login-panel{padding:28px 22px 24px!important;border-radius:16px!important}
  }
}

/* ========================================================================== 
   Product UI 3.0.2 — Global contrast & action-language normalization
   Removes remaining dark-theme text leaks from legacy components and maps
   legacy brand tokens to the Product UI palette. Screen-only; PDF unaffected.
   ========================================================================== */
@media screen {
  :root{
    /* Legacy app.css still references these names in some components. Keep
       them mapped to Product UI tokens so old rules cannot reintroduce green
       actions, dark surfaces or washed-out text. */
    --brand:#5367D9;
    --brand-strong:#4054B8;
    --brand-deep:#302A7D;
    --brand-bright:#7182E8;
    --brand-soft:#EEF1FF;
    --brand-soft-2:#F6F7FF;
    --ink:#172033;
    --ink-soft:#3F4B60;
    --muted:#667085;
    --muted-2:#8A96A8;
    --line:#DCE3ED;
    --line-strong:#C8D2E0;
    --canvas:#F3F6FB;
    --surface:#FFFFFF;
    --surface-2:#F8FAFD;
    --surface-3:#F3F5FC;
  }

  /* Employee identity and financial list values must never inherit the old
     dark-theme white-on-navy colours. */
  .util-row>div:first-child strong,
  .employee-cell strong,
  .employee-summary-strip>div strong,
  .batch-live-totals strong,
  .review-claim-total strong,
  .review-stats strong,
  .review-batch-summary>div>strong,
  .claim-person strong,
  .claim-total-summary strong,
  .decision-readonly strong,
  .review-live-summary strong,
  .detail-list dd,
  .account-number{
    color:#1D2939!important;
    opacity:1!important;
  }

  .util-value strong{
    color:#344054!important;
    opacity:1!important;
  }
  .util-row>div:first-child strong{font-weight:730!important}
  .util-value strong{font-weight:730!important}

  .util-row>div:first-child span,
  .util-value span,
  .employee-cell span,
  .employee-summary-strip>div span,
  .batch-live-totals span,
  .review-claim-total,
  .review-stats span,
  .review-batch-summary>div>span,
  .claim-person span,
  .claim-total-summary span,
  .decision-readonly span,
  .decision-readonly small,
  .review-live-summary span,
  .detail-list dt{
    color:#667085!important;
    opacity:1!important;
  }

  /* Typeahead menus are rendered as floating layers and can sit outside
     .main-area, so their contrast rules must be global. */
  .employee-typeahead-menu{
    background:#FFFFFF!important;
    border-color:#D9E1EC!important;
  }
  .employee-typeahead-option{
    color:#344054!important;
    background:#FFFFFF!important;
  }
  .employee-typeahead-option strong{
    color:#1D2939!important;
    font-weight:720!important;
    opacity:1!important;
  }
  .employee-typeahead-option small{
    color:#667085!important;
    opacity:1!important;
  }
  .employee-typeahead-option .employee-code,
  .employee-code{
    color:#4557B7!important;
    font-weight:720!important;
  }
  .employee-typeahead-option:hover,
  .employee-typeahead-option.active{
    color:#1D2939!important;
    background:#F1F3FF!important;
  }
  .employee-typeahead-option:hover strong,
  .employee-typeahead-option.active strong{color:#172033!important}
  .employee-typeahead-option:hover small,
  .employee-typeahead-option.active small{color:#536075!important}
  .employee-typeahead-empty,
  .employee-typeahead-loading::after{
    color:#667085!important;
    background:#FFFFFF!important;
  }

  /* Secondary report/navigation actions should look like quiet product links,
     not status colours. This also eliminates the old bright-green Full report. */
  .card-heading>a:not(.btn),
  .section-heading>a:not(.btn),
  a.table-action{
    color:#4658B6!important;
    font-weight:700!important;
    opacity:1!important;
  }
  .card-heading>a:not(.btn){
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    padding:3px 0!important;
    background:transparent!important;
    border:0!important;
    border-bottom:1px solid transparent!important;
    border-radius:0!important;
    font-size:.68rem!important;
    white-space:nowrap!important;
  }
  .card-heading>a:not(.btn)::after{content:"→";font-size:.72rem;line-height:1}
  .card-heading>a:not(.btn):hover,
  .section-heading>a:not(.btn):hover,
  a.table-action:hover{
    color:#33459B!important;
    border-bottom-color:#AEB8EA!important;
  }

  /* Common legacy copy that was hard-coded for the old dark skin. */
  .clean-list{color:#475467!important}
  .clean-list li{border-bottom-color:#E7ECF3!important}
  .review-batch-guidance p strong{color:#253044!important}
  .review-batch-guidance p small{color:#667085!important}
  .review-batch-guidance .review-guidance-icon{background:#EEF1FF!important;color:#5367D9!important}
  .no-spectacle-section strong{color:#344054!important}
  .no-spectacle-section div span{color:#667085!important}
  .review-remarks label{color:#344054!important}

  /* Preserve semantic meaning without using neon/low-contrast values. */
  .mini-success{color:#3F7F4A!important}
  .mini-muted{color:#667085!important}
  .mini-danger{color:#A84F61!important}
  #draftAutosaveStatus[data-state="saving"]{color:#9A6A23!important}
  #draftAutosaveStatus[data-state="saved"]{color:#3F7F4A!important}
  #draftAutosaveStatus[data-state="expired"]{color:#A84F61!important}
}

/* ========================================================================== 
   v3.0.5 — Financial hierarchy + employee identity
   ========================================================================== */
@media screen {
  /* Dashboard/KPI figures read like financial summaries: prominent and aligned. */
  .metric-card strong{
    width:100%!important;
    text-align:right!important;
    font-size:clamp(1.28rem,1.55vw,1.62rem)!important;
    line-height:1.12!important;
    font-weight:760!important;
    letter-spacing:-.025em!important;
    font-variant-numeric:tabular-nums lining-nums!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .metric-grid.compact .metric-card strong{font-size:clamp(1.2rem,1.35vw,1.48rem)!important}
  .metric-card small{text-align:right!important}

  /* Optional employee photo / initials. Photos never change row/card geometry. */
  .employee-profile-avatar{
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    width:28px!important;
    height:28px!important;
    border-radius:50%!important;
    overflow:hidden!important;
    background:#EEF1FF!important;
    border:1px solid #DCE2F4!important;
    color:#4D5AAE!important;
    font-size:.62rem!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:.02em!important;
    box-shadow:none!important;
    vertical-align:middle!important;
  }
  .employee-profile-avatar-sm{width:28px!important;height:28px!important}
  .employee-profile-avatar-md{width:34px!important;height:34px!important;font-size:.68rem!important}
  .employee-profile-avatar-lg{width:44px!important;height:44px!important;font-size:.78rem!important}
  .employee-profile-avatar img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  .employee-cell{display:flex!important;align-items:center!important;gap:9px!important}
  .employee-cell>div{min-width:0!important}
  .employee-page-identity{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important}
  .employee-page-identity h1{margin-bottom:4px!important}
  .claim-avatar-profile{margin:0!important}
  .util-identity{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important}
  .util-identity>div{min-width:0!important}

  /* Typeahead uses the same identity treatment without making the menu taller. */
  .employee-typeahead-option{
    grid-template-columns:30px minmax(0,1fr) auto!important;
    align-items:center!important;
    min-height:52px!important;
    gap:4px 9px!important;
  }
  .employee-typeahead-option .employee-option-main{min-width:0!important}
  .employee-typeahead-option .employee-code{grid-column:3!important;grid-row:1!important;align-self:center!important}
  .employee-option-avatar{
    grid-column:1!important;
    grid-row:1!important;
    width:28px!important;height:28px!important;border-radius:50%!important;overflow:hidden!important;
    display:grid!important;place-items:center!important;background:#EEF1FF!important;border:1px solid #DCE2F4!important;
    color:#4D5AAE!important;font-size:.61rem!important;font-weight:800!important;line-height:1!important;
  }
  .employee-option-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}

  /* Admin photo control is compact and does not disturb the existing form grid. */
  .employee-photo-editor{
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    padding:11px 13px!important;
    margin:0 0 14px!important;
    border:1px solid var(--ui-line)!important;
    border-radius:13px!important;
    background:var(--ui-surface-soft)!important;
  }
  .employee-photo-fields{display:flex!important;align-items:center!important;gap:12px!important;flex:1!important;min-width:0!important;flex-wrap:wrap!important}
  .employee-photo-fields>label:first-child{min-width:240px!important;flex:0 1 360px!important}
  .employee-photo-fields input[type="file"]{min-height:38px!important;height:auto!important;padding:6px 8px!important;background:#fff!important}
  .employee-photo-fields .field-help{flex:1 1 280px!important;margin:0!important}
  .compact-check{display:inline-flex!important;align-items:center!important;gap:7px!important;white-space:nowrap!important;color:#596579!important;font-size:.7rem!important}
  .compact-check input{width:16px!important;height:16px!important;min-height:0!important;margin:0!important}

  @media (max-width:720px){
    .metric-card strong{font-size:1.28rem!important}
    .employee-photo-editor{align-items:flex-start!important}
    .employee-photo-fields{display:block!important}
    .employee-photo-fields .field-help{display:block!important;margin-top:6px!important}
    .compact-check{margin-top:8px!important}
  }
}

/* ========================================================================== 
   v3.0.6 — Form presentation & required-field standard
   Final component rules: one visual language for selects, file pickers and
   mandatory-field indicators across every data-entry screen.
   ========================================================================== */
@media screen {
  .required-mark{
    color:#D6455D!important;
    font-size:.78em!important;
    font-weight:900!important;
    line-height:1!important;
    margin-left:3px!important;
    vertical-align:top!important;
  }
  .conditional-required-note{
    color:var(--ui-muted)!important;
    font-size:.64rem!important;
    font-weight:600!important;
    margin-left:5px!important;
  }

  /* Consistent select field — removes the old browser/legacy-theme styling. */
  select:not([multiple]){
    -webkit-appearance:none!important;
    appearance:none!important;
    padding-right:40px!important;
    background-color:#fff!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235B6680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:right 12px center!important;
    background-size:16px 16px!important;
    cursor:pointer!important;
  }
  select:not([multiple]):hover{background-color:#FBFCFE!important}
  select:not([multiple]):focus{background-color:#fff!important}
  select option{
    background:#fff!important;
    color:#293243!important;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Arial,sans-serif!important;
    font-size:13px!important;
  }
  select option:checked{background:#6258DA!important;color:#fff!important}

  /* Native file inputs anywhere else in the product get a restrained fallback. */
  input[type="file"]{
    width:100%!important;
    min-height:42px!important;
    padding:5px!important;
    border:1px solid #D5DDE9!important;
    border-radius:11px!important;
    background:#fff!important;
    color:#69758A!important;
    font-size:.72rem!important;
  }
  input[type="file"]::file-selector-button{
    min-height:30px!important;
    margin-right:10px!important;
    padding:6px 12px!important;
    border:0!important;
    border-radius:8px!important;
    background:#F0EFFF!important;
    color:#4D46B7!important;
    font:700 .7rem/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Arial,sans-serif!important;
    cursor:pointer!important;
  }
  input[type="file"]::file-selector-button:hover{background:#E7E4FF!important}

  /* Employee photo upload: intentionally compact and product-like. */
  .employee-photo-editor{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    align-items:center!important;
    gap:13px!important;
    padding:12px 14px!important;
    background:#F8FAFD!important;
    border:1px solid #E1E7F0!important;
    border-radius:13px!important;
  }
  .employee-photo-fields{
    display:grid!important;
    grid-template-columns:minmax(300px,480px) minmax(240px,1fr) auto!important;
    align-items:end!important;
    gap:8px 14px!important;
    min-width:0!important;
  }
  .employee-photo-upload{min-width:0!important}
  .employee-photo-label{
    display:block!important;
    margin:0 0 6px!important;
    color:#3D485B!important;
    font-size:.72rem!important;
    font-weight:750!important;
  }
  .file-picker{
    display:flex!important;
    align-items:center!important;
    min-height:42px!important;
    padding:5px!important;
    overflow:hidden!important;
    background:#fff!important;
    border:1px solid #D5DDE9!important;
    border-radius:11px!important;
    transition:border-color .15s ease,box-shadow .15s ease!important;
  }
  .file-picker:focus-within{border-color:#7771DD!important;box-shadow:0 0 0 3px rgba(103,95,218,.11)!important}
  .file-picker-input{
    position:absolute!important;
    width:1px!important;height:1px!important;
    opacity:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  .file-picker-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    min-height:30px!important;
    padding:0 12px!important;
    margin:0!important;
    border-radius:8px!important;
    background:#F0EFFF!important;
    color:#4D46B7!important;
    font-size:.7rem!important;
    font-weight:800!important;
    cursor:pointer!important;
    transition:background .14s ease,color .14s ease!important;
  }
  .file-picker-button:hover{background:#E7E4FF!important;color:#4039A8!important}
  .file-picker-name{
    min-width:0!important;
    padding:0 10px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    color:#737E91!important;
    font-size:.7rem!important;
    font-weight:600!important;
  }
  .employee-photo-fields>.field-help{
    align-self:center!important;
    margin:0!important;
    line-height:1.45!important;
  }
  .photo-remove-check{
    align-self:center!important;
    min-height:34px!important;
    padding:6px 9px!important;
    border-radius:9px!important;
    background:#fff!important;
    border:1px solid #E1E7F0!important;
  }

  /* Required control error presentation stays subtle until browser validation. */
  :where(input,select,textarea):required:invalid:not(:placeholder-shown){border-color:#D9AAB2}

  @media (max-width:980px){
    .employee-photo-fields{grid-template-columns:minmax(240px,1fr) auto!important}
    .employee-photo-fields>.field-help{grid-column:1/-1!important}
  }
  @media (max-width:680px){
    .employee-photo-editor{grid-template-columns:38px minmax(0,1fr)!important;align-items:start!important;padding:11px!important}
    .employee-photo-fields{display:block!important}
    .employee-photo-fields>.field-help{display:block!important;margin-top:7px!important}
    .photo-remove-check{display:inline-flex!important;margin-top:8px!important}
  }
}

/* ========================================================================== 
   v3.0.7 — Employee identity scale + custom product dropdowns
   ========================================================================== */
@media screen {
  /* Employee identity is deliberately more visible while preserving the
     existing row/card dimensions. */
  .employee-profile-avatar{
    width:40px!important;
    height:40px!important;
    font-size:.74rem!important;
  }
  .employee-profile-avatar-sm{width:40px!important;height:40px!important;font-size:.74rem!important}
  .employee-profile-avatar-md{width:46px!important;height:46px!important;font-size:.80rem!important}
  .employee-profile-avatar-lg{width:58px!important;height:58px!important;font-size:.94rem!important}
  .employee-cell{gap:11px!important}
  .employee-page-identity{gap:14px!important}
  .util-identity{gap:11px!important}

  .employee-typeahead-option{
    grid-template-columns:42px minmax(0,1fr) auto!important;
    min-height:56px!important;
    gap:4px 10px!important;
  }
  .employee-option-avatar{
    width:40px!important;
    height:40px!important;
    font-size:.72rem!important;
  }

  /* Native select remains in the form for validation/submission, while the
     visible control is a consistent product component rendered by app.js. */
  .product-select{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
  }
  .product-select-native{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    min-height:1px!important;
    padding:0!important;
    margin:0!important;
    opacity:0!important;
    pointer-events:none!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    clip-path:inset(50%)!important;
    border:0!important;
  }
  .product-select-button{
    width:100%!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:9px 12px 9px 13px!important;
    border:1px solid #D4DDEA!important;
    border-radius:11px!important;
    background:#FFFFFF!important;
    color:#293243!important;
    font:700 .75rem/1.25 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Arial,sans-serif!important;
    text-align:left!important;
    cursor:pointer!important;
    box-shadow:0 1px 1px rgba(26,38,61,.02)!important;
    transition:border-color .14s ease,box-shadow .14s ease,background .14s ease!important;
  }
  .product-select-button:hover{background:#FBFCFE!important;border-color:#B8C4D5!important}
  .product-select-button:focus-visible,
  .product-select.is-open .product-select-button{
    outline:none!important;
    background:#fff!important;
    border-color:#7169DE!important;
    box-shadow:0 0 0 3px rgba(98,88,218,.12)!important;
  }
  .product-select.is-invalid .product-select-button{border-color:#D56B7D!important;box-shadow:0 0 0 3px rgba(213,107,125,.09)!important}
  .product-select-button:disabled{cursor:not-allowed!important;background:#F5F7FA!important;color:#8A94A7!important;border-color:#E4E9F1!important}
  .product-select-value{
    min-width:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  .product-select-value.is-placeholder{color:#8994A8!important;font-weight:650!important}
  .product-select-chevron{
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
    display:grid!important;
    place-items:center!important;
    color:#657188!important;
    transition:transform .14s ease!important;
  }
  .product-select-chevron svg{width:16px!important;height:16px!important;display:block!important}
  .product-select.is-open .product-select-chevron{transform:rotate(180deg)!important}

  .product-select-menu{
    position:fixed!important;
    z-index:10050!important;
    max-height:290px!important;
    overflow:auto!important;
    padding:6px!important;
    border:1px solid #DDE4EE!important;
    border-radius:12px!important;
    background:#FFFFFF!important;
    box-shadow:0 18px 46px rgba(32,44,72,.16),0 4px 12px rgba(32,44,72,.08)!important;
    scrollbar-width:thin!important;
    scrollbar-color:#CBD4E1 transparent!important;
  }
  .product-select-menu[hidden]{display:none!important}
  .product-select-option{
    width:100%!important;
    min-height:38px!important;
    display:flex!important;
    align-items:center!important;
    padding:8px 10px!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    color:#30394A!important;
    font:650 .74rem/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Arial,sans-serif!important;
    text-align:left!important;
    cursor:pointer!important;
    transition:background .12s ease,color .12s ease!important;
  }
  .product-select-option:hover,
  .product-select-option.is-active{background:#F1F0FF!important;color:#433BA9!important}
  .product-select-option.is-selected{background:#E9E7FF!important;color:#3F37A7!important;font-weight:800!important}
  .product-select-option:disabled{color:#A8B0BF!important;cursor:not-allowed!important;background:transparent!important}
  .product-select-empty{padding:10px!important;color:#8994A8!important;font-size:.72rem!important}

  @media (max-width:680px){
    .employee-profile-avatar{width:38px!important;height:38px!important}
    .employee-profile-avatar-sm{width:38px!important;height:38px!important}
    .employee-profile-avatar-md{width:44px!important;height:44px!important}
    .employee-profile-avatar-lg{width:54px!important;height:54px!important}
    .product-select-button{min-height:43px!important}
  }
}

/* ========================================================================== 
   v3.0.8 — Strict UI QA / alignment hardening
   Final screen-only guardrails applied after all product component layers.
   ========================================================================== */
@media screen {
  /* Page and component overflow must be contained locally, never at body level. */
  html,body{max-width:100%;overflow-x:hidden!important}
  .app-shell,.main-area,.content-wrap,.page-heading,.card,.table-card,.filter-card,
  .dashboard-grid,.grid-two,.grid-sidebar,.finance-layout,.metric-grid,
  .claim-decision-card,.review-control-bar,.employee-summary-strip{min-width:0!important;max-width:100%}

  /* Headings/actions: same vertical rhythm whether the action is wrapped or direct. */
  .page-heading{min-height:44px!important}
  .page-heading>.btn{flex:0 0 auto!important}
  .heading-actions{align-items:center!important}
  .heading-actions>.status{align-self:center!important}

  /* Tables: predictable baselines, readable density and clean action columns. */
  .table-wrap{width:100%!important;max-width:100%!important;border-radius:0!important}
  .table-wrap>table{border-collapse:separate!important;border-spacing:0!important}
  thead th{
    height:42px!important;
    padding:10px 12px!important;
    vertical-align:middle!important;
    line-height:1.25!important;
    white-space:nowrap!important;
  }
  tbody td{
    padding:11px 12px!important;
    vertical-align:middle!important;
    line-height:1.4!important;
  }
  tbody td>.cell-sub{margin-top:3px!important;line-height:1.3!important}
  th.money,td.money{text-align:right!important}
  th.action-col{width:1%!important;min-width:76px!important;text-align:right!important}
  tbody td:last-child{text-align:right}
  .table-actions,.action-menu{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
    white-space:nowrap!important;
  }
  .table-actions form,.action-menu form,.role-form{margin:0!important}
  .table-action{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:30px!important;line-height:1.2!important}
  .table-input{min-height:36px!important;height:36px!important;padding-top:6px!important;padding-bottom:6px!important}
  .audit-details{min-width:240px!important;max-width:520px!important;white-space:normal!important;overflow-wrap:anywhere!important}

  /* In-table editable controls: keep custom dropdowns compact and aligned. */
  td .product-select{min-width:112px!important}
  td .product-select-button{min-height:36px!important;height:36px!important;padding:6px 9px 6px 10px!important;font-size:.7rem!important}
  .role-form{display:grid!important;grid-template-columns:minmax(112px,1fr) auto!important;align-items:center!important;gap:8px!important;min-width:178px!important}
  .role-form .product-select{width:100%!important;min-width:0!important}

  /* Form grids and inline forms align on a shared baseline. */
  .stack-form>label,.form-grid>label,.filter-row>label{min-width:0!important}
  .form-grid{align-items:start!important}
  .inline-form{align-items:end!important;flex-wrap:wrap!important}
  .inline-form>input,.inline-form>label{min-width:220px!important;flex:1 1 320px!important}
  .inline-form>.btn{flex:0 0 auto!important}
  .form-actions{align-items:center!important}
  .form-actions>.btn{min-width:100px!important}

  /* Search/composite controls: exactly one visual border and stable icon alignment. */
  .search-box,.review-search-box,.employee-typeahead.field-typeahead{
    min-width:0!important;
    max-width:100%!important;
  }
  .search-box>span{flex:0 0 22px!important;text-align:center!important}
  .search-box>input,.review-search-box>input,.employee-typeahead.field-typeahead>input[type="search"]{
    min-width:0!important;width:100%!important;
  }

  /* Identity blocks: prevent long names/designations from distorting rows. */
  .employee-cell,.util-identity,.claim-person,.employee-page-identity{min-width:0!important}
  .employee-cell>div,.util-identity>div,.claim-person>div,.employee-page-identity>div{min-width:0!important}
  .employee-cell strong,.util-identity strong,.claim-person strong{
    overflow-wrap:anywhere!important;
  }
  .employee-cell span,.util-identity span,.claim-person span{
    overflow-wrap:anywhere!important;
  }

  /* Cards/details: consistent separators and no accidental low-contrast nested text. */
  .detail-list>div{min-width:0!important}
  .detail-list dd{min-width:0!important;overflow-wrap:anywhere!important}
  .employee-summary-strip>div{min-width:0!important}
  .employee-summary-strip strong{overflow-wrap:anywhere!important}
  .status{vertical-align:middle!important}

  /* Review workflow: keep controls aligned even with long employee names / messages. */
  .claim-decision-header{gap:12px!important}
  .claim-person{min-width:220px!important;flex:1 1 340px!important}
  .claim-header-actions{flex:0 1 auto!important;min-width:0!important}
  .claim-total-summary{min-width:150px!important;text-align:right!important}
  .claimable-action{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;justify-content:flex-end!important}
  .claimable-action-feedback{max-width:320px!important;line-height:1.3!important}
  .review-control-bar>*{min-width:0!important}

  /* Product dropdown portal: never exceed viewport and keep long option labels usable. */
  .product-select-menu{overscroll-behavior:contain!important}
  .product-select-option{white-space:normal!important;overflow-wrap:anywhere!important}
  .product-select-value{line-height:1.3!important}

  /* File/photo editor alignment under long helper copy. */
  .employee-photo-editor{min-width:0!important}
  .employee-photo-fields{min-width:0!important}
  .file-picker{width:100%!important;min-width:0!important}
  .file-picker-name{flex:1 1 auto!important}

  /* Flash and informational surfaces should not stretch controls or overflow. */
  .flash,.info-box,.alert-panel,.submit-panel{overflow-wrap:anywhere!important}
  .flash-stack{max-width:100%!important}

  /* Keep sticky review footer clear of viewport edges and page footer. */
  .review-sticky-bar{max-width:calc(100vw - 36px)!important}

  @media (max-width:980px){
    .grid-sidebar,.grid-two,.finance-layout{grid-template-columns:1fr!important}
    .page-heading>.btn{align-self:flex-start!important}
    .review-sticky-bar{max-width:calc(100vw - 24px)!important}
  }

  @media (max-width:720px){
    .page-heading>.btn{width:100%!important;justify-content:center!important}
    .heading-actions{align-items:stretch!important}
    .table-actions,.action-menu{justify-content:flex-start!important}
    .inline-form{display:grid!important;grid-template-columns:1fr!important}
    .inline-form>input,.inline-form>label,.inline-form>.btn{width:100%!important;min-width:0!important}
    .claim-person{min-width:0!important;width:100%!important}
    .claim-header-actions{width:100%!important}
    .claim-total-summary{text-align:left!important;min-width:0!important}
    .claimable-action{justify-content:flex-start!important}
    .role-form{min-width:0!important;grid-template-columns:minmax(120px,1fr) auto!important}
    .review-sticky-bar{max-width:calc(100vw - 20px)!important}
  }

  @media (max-width:520px){
    .page-heading>.btn,.heading-actions>.btn{width:100%!important}
    .form-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
    .form-actions>.btn{width:100%!important}
    .employee-photo-fields>label:first-child{min-width:0!important;width:100%!important}
  }
}


/* ========================================================================== 
   v3.0.9 — Authentication control integrity + required-marker placement
   Fixes the audit regression where password composites lost their visible
   field boundary and mandatory stars became separate rows in flex labels.
   ========================================================================== */
@media screen {
  .field-label-title{
    display:inline-flex!important;
    align-items:baseline!important;
    gap:0!important;
    width:max-content!important;
    max-width:100%!important;
    color:inherit!important;
    font:inherit!important;
    line-height:1.25!important;
  }
  .required-mark{
    display:inline!important;
    flex:none!important;
    width:auto!important;
    margin:0 0 0 3px!important;
    color:#C9364D!important;
    font-size:.82em!important;
    font-weight:850!important;
    line-height:1!important;
    vertical-align:super!important;
    transform:translateY(-1px)!important;
  }

  /* Login is intentionally simple: logo, identity and credentials. */
  .login-shell{padding:24px!important}
  .login-panel{
    width:min(380px,100%)!important;
    padding:32px 32px 26px!important;
    border:1px solid #DDE4EE!important;
    border-radius:18px!important;
    box-shadow:0 16px 42px rgba(34,48,76,.09)!important;
  }
  .login-brandmark{margin-bottom:15px!important}
  .login-heading{margin-bottom:22px!important}
  .login-form{gap:14px!important}
  .login-form label{display:flex!important;flex-direction:column!important;gap:6px!important}
  .login-form .field-label-title{color:#253047!important;font-size:.72rem!important;font-weight:760!important}

  /* Username is a normal single control. */
  .login-form>label>input{
    min-height:46px!important;
    padding:0 13px!important;
    border:1px solid #D5DDE9!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#202A3C!important;
    box-shadow:none!important;
  }
  .login-form>label>input:hover{border-color:#C5CFDE!important}
  .login-form>label>input:focus,
  .login-form>label>input:focus-visible{
    border-color:#7169DB!important;
    box-shadow:0 0 0 3px rgba(98,88,218,.12)!important;
    outline:0!important;
  }

  /* Password is one composite field: one border, one focus ring. */
  .login-password-wrap{
    position:relative!important;
    display:flex!important;
    align-items:stretch!important;
    width:100%!important;
    min-height:46px!important;
    overflow:hidden!important;
    border:1px solid #D5DDE9!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:none!important;
    transition:border-color .14s ease,box-shadow .14s ease!important;
  }
  .login-password-wrap:hover{border-color:#C5CFDE!important}
  .login-password-wrap:focus-within{
    border-color:#7169DB!important;
    box-shadow:0 0 0 3px rgba(98,88,218,.12)!important;
  }
  .login-password-wrap input{
    flex:1 1 auto!important;
    min-width:0!important;
    min-height:44px!important;
    padding:0 12px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#202A3C!important;
    box-shadow:none!important;
    outline:0!important;
  }
  .login-password-wrap .password-toggle{
    position:static!important;
    flex:0 0 auto!important;
    align-self:stretch!important;
    min-width:58px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 11px!important;
    border:0!important;
    border-left:1px solid #E5EAF1!important;
    border-radius:0!important;
    background:#F7F8FC!important;
    color:#4B4DB2!important;
    font-size:.66rem!important;
    font-weight:760!important;
  }
  .login-password-wrap .password-toggle:hover{background:#F0F1FB!important;color:#373A98!important}
  .login-submit{margin-top:3px!important}

  @media (max-width:520px){
    .login-shell{padding:16px!important}
    .login-panel{padding:27px 20px 23px!important}
  }
}


/* ==========================================================================
   Product UI 3.0.10 — Optional field label convention
   Optional status stays on the same line as the field name: NIC (Optional).
   ========================================================================== */
@media screen {
  .field-label-title{
    display:inline-flex!important;
    align-items:baseline!important;
    gap:4px!important;
    min-width:0!important;
    line-height:1.25!important;
  }
  .field-label-title .optional{
    display:inline!important;
    margin:0!important;
    color:#7A8699!important;
    font-size:.92em!important;
    font-weight:500!important;
    line-height:inherit!important;
    text-transform:none!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
  }
}


/* =========================================================
   v3.0.11 — Standalone Google Authenticator experience
   ========================================================= */
.standalone-auth-main{
  min-height:100vh;
  width:100%;
  background:
    radial-gradient(circle at 16% 12%,rgba(98,88,218,.08),transparent 28rem),
    radial-gradient(circle at 86% 86%,rgba(79,145,224,.07),transparent 26rem),
    #f5f7fb;
}
.auth-flash-stack{
  position:fixed;
  z-index:20;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:min(520px,calc(100% - 32px));
}
.mfa-auth-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 18px;
}
.mfa-auth-card{
  width:min(100%,440px);
  padding:34px 32px 28px;
  border:1px solid #e2e7f0;
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 64px rgba(32,43,68,.10);
}
.mfa-auth-card-wide{width:min(100%,500px)}
.mfa-auth-brand{
  width:72px;
  height:72px;
  margin:0 auto 20px;
  display:grid;
  place-items:center;
  border:1px solid #e6eaf2;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 24px rgba(35,46,72,.06);
}
.mfa-auth-brand img{width:50px;height:50px;object-fit:contain}
.mfa-auth-heading{text-align:center;margin-bottom:24px}
.mfa-auth-kicker{
  margin:0 0 7px;
  color:#6258da;
  font-size:11px;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.mfa-auth-heading h1{
  margin:0 0 9px;
  color:#202a3b;
  font-size:28px;
  line-height:1.18;
  font-weight:760;
  letter-spacing:-.025em;
}
.mfa-auth-heading p:not(.mfa-auth-kicker){
  margin:0 auto;
  max-width:390px;
  color:#667287;
  font-size:14px;
  line-height:1.55;
}
.mfa-auth-form{display:grid;gap:12px}
.mfa-auth-field{display:grid;gap:8px}
.mfa-auth-field .field-label-title{color:#344056;font-size:13px;font-weight:680}
.mfa-auth-code{
  width:100%;
  height:58px;
  padding:0 18px;
  border:1px solid #cdd5e3 !important;
  border-radius:15px !important;
  background:#fbfcfe !important;
  color:#1f2a3d !important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",sans-serif !important;
  font-size:24px !important;
  font-weight:720 !important;
  letter-spacing:.25em;
  text-align:center;
  outline:none;
  box-shadow:none !important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.mfa-auth-code::placeholder{color:#aab3c2;opacity:1}
.mfa-auth-code:focus{
  border-color:#6258da !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(98,88,218,.12) !important;
}
.mfa-auth-help{margin:-1px 1px 2px;color:#7b8699;font-size:12px;line-height:1.5}
.mfa-auth-submit{height:52px;margin-top:4px;border-radius:14px;font-size:14px;font-weight:720}
.mfa-auth-footer{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #e8ecf3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:#7b8699;
  font-size:11.5px;
  line-height:1.45;
  text-align:center;
}
.mfa-auth-footer form{margin:0}
.mfa-auth-text-button{
  appearance:none;
  border:0;
  background:transparent;
  padding:2px 4px;
  color:#5148c8;
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}
.mfa-auth-text-button:hover{text-decoration:underline}
.mfa-setup-key{
  margin:0 0 20px;
  padding:16px;
  border:1px solid #e2e7f0;
  border-radius:16px;
  background:#f8f9fd;
  text-align:center;
}
.mfa-setup-key>span{
  display:block;
  margin-bottom:7px;
  color:#707b8f;
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.mfa-setup-key>strong{
  display:block;
  padding:11px 12px;
  border:1px dashed #c8d0df;
  border-radius:12px;
  background:#fff;
  color:#202a3b;
  font-size:16px;
  font-weight:760;
  letter-spacing:.07em;
  overflow-wrap:anywhere;
}
.mfa-setup-key>small{display:block;margin-top:8px;color:#7b8699;font-size:11.5px}
@media(max-width:560px){
  .mfa-auth-shell{align-items:flex-start;padding:24px 12px}
  .mfa-auth-card{padding:28px 20px 24px;border-radius:20px}
  .mfa-auth-heading h1{font-size:25px}
  .mfa-auth-code{height:56px;font-size:22px !important;letter-spacing:.20em}
}


/* ========================================================================== 
   v3.0.12 — Batch-entry scroll stability + dashboard employee lookup
   ========================================================================== */
@media screen {
  /* The legacy dark-mode batch total cards must never leak into Product UI. */
  .batch-live-totals>div{
    background:#FFFFFF!important;
    border:1px solid #DFE5EF!important;
    box-shadow:0 3px 10px rgba(46,58,91,.045)!important;
  }
  .batch-live-totals>div:last-child{
    background:#F2F3FF!important;
    border-color:#DDE0FA!important;
  }
  .batch-live-totals span{
    color:#667085!important;
    opacity:1!important;
  }
  .batch-live-totals strong,
  .batch-live-totals>div:last-child strong{
    color:#1D2939!important;
    opacity:1!important;
  }

  /* Batch entry owns an opaque sticky header. Transparent global table headers
     allowed employee content to remain visible underneath while scrolling. */
  .batch-entry-card .table-wrap.tall{
    position:relative!important;
    isolation:isolate!important;
    scrollbar-gutter:stable!important;
  }
  .batch-entry-table{
    border-spacing:0 7px!important;
  }
  .batch-entry-table thead{
    position:relative!important;
    z-index:20!important;
  }
  .batch-entry-table thead th{
    position:sticky!important;
    top:0!important;
    z-index:21!important;
    height:44px!important;
    padding:10px 12px!important;
    background:#F8FAFD!important;
    color:#526075!important;
    border-top:1px solid #E4EAF3!important;
    border-bottom:1px solid #DCE3ED!important;
    box-shadow:0 8px 12px -12px rgba(31,42,61,.42)!important;
    background-clip:padding-box!important;
  }
  .batch-entry-table thead th:first-child{border-left:1px solid #E4EAF3!important;border-radius:12px 0 0 12px!important}
  .batch-entry-table thead th:last-child{border-right:1px solid #E4EAF3!important;border-radius:0 12px 12px 0!important}
  .batch-entry-table tbody{position:relative!important;z-index:1!important}
  .batch-entry-table tbody td{position:relative!important;z-index:1!important}

  /* Compact dashboard employee lookup. Selecting a suggestion submits directly
     to Employee Claim History; no extra button or dashboard height is needed. */
  .dashboard-employee-search-card{
    margin:0 0 14px!important;
    padding:10px 12px!important;
    border:1px solid var(--ui-line)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 4px 14px rgba(46,58,91,.045)!important;
  }
  .dashboard-employee-search-form{
    display:grid!important;
    grid-template-columns:auto minmax(260px,520px)!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
  }
  .dashboard-employee-search-copy{display:flex!important;flex-direction:column!important;gap:1px!important;min-width:0!important}
  .dashboard-search-kicker{color:#78849A!important;font-size:.56rem!important;font-weight:800!important;letter-spacing:.09em!important;text-transform:uppercase!important}
  .dashboard-employee-search-copy strong{color:#253044!important;font-size:.76rem!important;font-weight:720!important}
  .dashboard-employee-typeahead{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
  }
  .dashboard-employee-typeahead>input[type="search"]{
    padding-left:39px!important;
  }
  .dashboard-search-icon{
    position:absolute!important;
    left:13px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:17px!important;
    height:17px!important;
    color:#8390A6!important;
    pointer-events:none!important;
    z-index:2!important;
  }
  .dashboard-search-icon svg{display:block!important;width:100%!important;height:100%!important}

  @media (max-width:760px){
    .dashboard-employee-search-form{grid-template-columns:1fr!important;gap:8px!important}
    .dashboard-employee-search-copy{display:none!important}
  }
}

/* ============================================================
   v3.0.13 — Linked user profile + dashboard greeting
   ============================================================ */
.user-avatar{overflow:hidden!important}
.user-avatar img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}
.user-profile-cell{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:180px!important;
}
.user-profile-cell>div{min-width:0!important}
.user-profile-cell strong,.user-profile-cell .cell-sub{display:block!important}
.user-employee-link-form{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:250px!important;
}
.user-employee-link-form>.product-select,
.user-employee-link-form>select{min-width:210px!important;flex:1 1 210px!important}
.users-table td{vertical-align:middle!important}
.page-heading [data-dashboard-greeting]{letter-spacing:-.025em!important}
@media(max-width:760px){
  .user-employee-link-form{min-width:220px!important}
  .user-employee-link-form>.product-select,.user-employee-link-form>select{min-width:180px!important}
}


/* ============================================================
   v3.0.14 — Compact utility header
   The product identity already lives in the sidebar and each page heading.
   Keep only session/user utilities in a slim, non-card header so working
   pages start materially higher on screen.
   ============================================================ */
.topbar.compact-topbar{
  height:44px!important;
  min-height:44px!important;
  margin:8px 18px 0 0!important;
  padding:0 2px 0 0!important;
  top:8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.topbar.compact-topbar .topbar-spacer{flex:1 1 auto!important;min-width:0!important}
.topbar.compact-topbar .topbar-actions{margin-left:auto!important;gap:8px!important;align-items:center!important}
.topbar.compact-topbar .compact-security{
  min-height:26px!important;
  height:26px!important;
  padding:0 7px!important;
  border:0!important;
  background:transparent!important;
  color:#6F7B8F!important;
  font-size:.58rem!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.topbar.compact-topbar .security-dot{
  width:6px!important;
  height:6px!important;
  box-shadow:0 0 0 3px #E8F5EA!important;
}
.topbar.compact-topbar .topbar-user{
  min-height:36px!important;
  height:36px!important;
  gap:7px!important;
  padding:3px 8px 3px 4px!important;
  border:1px solid #E3E8F1!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 3px 10px rgba(46,58,91,.045)!important;
}
.topbar.compact-topbar .topbar-user .user-avatar.mini{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  font-size:.62rem!important;
}
.topbar.compact-topbar .topbar-user strong{
  font-size:.64rem!important;
  line-height:1.05!important;
}
.topbar.compact-topbar .topbar-user span{
  font-size:.53rem!important;
  line-height:1.05!important;
}
.content-wrap{
  padding-top:10px!important;
}

@media(max-width:980px){
  .topbar.compact-topbar{
    height:44px!important;
    min-height:44px!important;
    margin:6px 10px 0!important;
    padding:0!important;
    top:6px!important;
  }
  .topbar.compact-topbar .menu-toggle{
    width:36px!important;
    height:36px!important;
    border-radius:11px!important;
  }
  .content-wrap{padding-top:10px!important}
}
@media(max-width:720px){
  .topbar.compact-topbar .compact-security{display:none!important}
}
@media(max-width:520px){
  .topbar.compact-topbar{
    height:42px!important;
    min-height:42px!important;
    margin:5px 8px 0!important;
  }
  .topbar.compact-topbar .topbar-user{
    width:34px!important;
    height:34px!important;
    min-height:34px!important;
    padding:3px!important;
    border-radius:50%!important;
  }
  .topbar.compact-topbar .topbar-user>div:last-child{display:none!important}
  .content-wrap{padding-top:8px!important}
}


/* ==========================================================================
   Product UI 3.0.15 — Video sign-in background
   Uses the supplied KVPL login video as a full-screen muted background while
   preserving a simple, high-contrast authentication card. MFA pages remain
   standalone and do not use this video layer.
   ========================================================================== */
@media screen {
  .auth-body:has(.login-video-shell){
    background:#11182B!important;
    overflow:hidden!important;
  }
  .login-video-shell{
    position:relative!important;
    isolation:isolate!important;
    min-height:100vh!important;
    min-height:100svh!important;
    padding:24px!important;
    overflow:hidden!important;
    background:#11182B url('../img/login-background-poster.jpg') center/cover no-repeat!important;
  }
  .login-bg-video{
    position:absolute!important;
    inset:0!important;
    z-index:-3!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    pointer-events:none!important;
  }
  .login-video-overlay{
    position:absolute!important;
    inset:0!important;
    z-index:-2!important;
    pointer-events:none!important;
    background:
      linear-gradient(90deg,rgba(8,15,33,.48),rgba(8,15,33,.30) 48%,rgba(8,15,33,.46)),
      linear-gradient(180deg,rgba(7,14,31,.18),rgba(7,14,31,.42))!important;
  }
  .login-video-panel{
    position:relative!important;
    z-index:1!important;
    width:min(382px,100%)!important;
    padding:30px 32px 25px!important;
    border:1px solid rgba(255,255,255,.70)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 24px 64px rgba(4,10,24,.30)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }
  .login-video-panel .login-brandmark{
    background:rgba(255,255,255,.98)!important;
  }
  .login-video-panel .login-heading h1{color:#172033!important}
  .login-video-panel .login-heading p{color:#667085!important}

  @media(max-width:520px){
    .login-video-shell{padding:16px!important}
    .login-video-panel{padding:27px 20px 23px!important}
  }

  @media(prefers-reduced-motion:reduce){
    .login-bg-video{display:none!important}
    .login-video-overlay{
      background:linear-gradient(180deg,rgba(8,15,33,.38),rgba(8,15,33,.58))!important;
    }
  }
}

/* ========================================================================== 
   v3.0.17 — Cross-browser table stability + guaranteed dashboard lookup
   ========================================================================== */
@media screen {
  /* Employee identity must keep a usable width. Earlier overflow-wrap:anywhere
     rules allowed names to collapse to one character per line on some browser/
     zoom combinations. Long tables should scroll instead of crushing identity. */
  .employee-cell{
    min-width:168px!important;
    max-width:100%!important;
    flex-wrap:nowrap!important;
  }
  .employee-cell>div{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  .employee-cell strong,
  .employee-cell span{
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
  }

  /* Balance-report column sizing is owned by ui-components.css. */
  /* Apply the same no-character-stack rule to other employee tables without
     forcing every table to the Balance Check width. */
  .utilisation-report-table .employee-cell,
  .batch-entry-table .employee-cell,
  .table-wrap table .employee-cell{min-width:160px!important}

  /* Dashboard employee lookup must remain visible for every dashboard role and
     at every supported viewport. This final layer intentionally overrides any
     legacy display/visibility rules. */
  .dashboard-employee-search-card{
    display:grid!important;
    grid-template-columns:auto minmax(280px,560px)!important;
    align-items:center!important;
    gap:16px!important;
    visibility:visible!important;
    opacity:1!important;
    min-height:58px!important;
    margin:0 0 14px!important;
    padding:10px 12px!important;
  }
  .dashboard-employee-search-card .dashboard-employee-search-copy{
    display:flex!important;
    visibility:visible!important;
  }
  .dashboard-employee-search-form{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  .dashboard-employee-typeahead,
  .dashboard-employee-typeahead>input[type="search"]{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    visibility:visible!important;
    opacity:1!important;
  }

  @media (max-width:760px){
    .dashboard-employee-search-card{
      grid-template-columns:1fr!important;
      gap:7px!important;
      min-height:0!important;
    }
    .dashboard-employee-search-card .dashboard-employee-search-copy{
      display:flex!important;
    }
  }

  @media (max-width:520px){
    .dashboard-employee-search-card{padding:9px!important}
    .dashboard-search-kicker{display:none!important}
    .dashboard-employee-search-copy strong{font-size:.72rem!important}
  }
}

/* ========================================================================== 
   v3.1.0 — Finance table isolation and batch payment workflow
   ========================================================================== */
@media screen {
  .finance-payments-wrap{
    position:relative!important;
    isolation:isolate!important;
    scrollbar-gutter:stable!important;
  }
  .finance-payments-table{
    min-width:920px!important;
    border-spacing:0!important;
  }
  .finance-payments-table thead{position:relative!important;z-index:20!important}
  .finance-payments-table thead th{
    position:sticky!important;
    top:0!important;
    z-index:21!important;
    height:44px!important;
    padding:10px 12px!important;
    background:#F8FAFD!important;
    color:#475467!important;
    border-top:1px solid #E4EAF3!important;
    border-bottom:1px solid #DCE3ED!important;
    box-shadow:0 8px 12px -12px rgba(31,42,61,.42)!important;
    background-clip:padding-box!important;
  }
  .finance-payments-table tbody{position:relative!important;z-index:1!important}
  .finance-payments-table tbody td{position:relative!important;z-index:1!important;border-radius:0!important}
  .finance-payments-table tbody tr+tr td{border-top-color:#E8EDF4!important}
  .payment-actions{min-width:190px!important}
  .batch-payment-preview .table-wrap{max-height:46vh!important}

  @media(max-width:760px){
    .finance-payments-table{min-width:820px!important}
    .payment-actions{min-width:176px!important}
  }
}

/* ========================================================================== 
   v3.2.1 — Employee photo editor isolation + Apple typography guardrail
   This final layer intentionally wins over all earlier compatibility rules.
   ========================================================================== */
@media screen {
  html,body,button,input,select,textarea,table,option{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",system-ui,sans-serif!important;
  }

  /* The large avatar is 58 px in the final identity layer. Reserve its real
     footprint so it cannot overlap the label or file picker. */
  .employee-photo-editor{
    grid-template-columns:64px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:14px!important;
    overflow:hidden!important;
  }
  .employee-photo-editor>.employee-profile-avatar-lg{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    margin:0!important;
    align-self:center!important;
    position:relative!important;
    z-index:1!important;
  }
  .employee-photo-fields{width:100%!important;min-width:0!important}
  .employee-photo-upload,.employee-photo-label,.file-picker{min-width:0!important}

  @media(max-width:680px){
    .employee-photo-editor{
      grid-template-columns:58px minmax(0,1fr)!important;
      column-gap:10px!important;
      align-items:start!important;
    }
    .employee-photo-editor>.employee-profile-avatar-lg{
      width:54px!important;height:54px!important;min-width:54px!important;
    }
  }
}

/* ========================================================================== 
   v3.2.2 — Hard isolation for employee photo and utilisation table header
   This is the final cascade layer and must remain at the end of this file.
   ========================================================================== */
@media screen {
  /* Use a dedicated avatar slot so no legacy grid/flex sizing rule can place
     the upload controls underneath the image. */
  .employee-photo-editor{
    display:flex!important;
    align-items:center!important;
    gap:20px!important;
    overflow:hidden!important;
  }
  .employee-photo-avatar-slot{
    display:grid!important;
    place-items:center!important;
    flex:0 0 72px!important;
    width:72px!important;
    min-width:72px!important;
    align-self:center!important;
  }
  .employee-photo-avatar-slot>.employee-profile-avatar-lg{
    width:58px!important;height:58px!important;min-width:58px!important;
    margin:0!important;position:relative!important;z-index:1!important;
  }
  .employee-photo-fields{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
  }

  /* A transparent sticky header allowed the first employee row to remain
     visible underneath it. Isolate the scroll region and give every header
     cell a fully opaque surface at a higher stacking level. */
  .utilisation-report-wrap{
    position:relative!important;
    isolation:isolate!important;
    overflow:auto!important;
    scrollbar-gutter:stable!important;
  }
  .utilisation-report-table{
    border-spacing:0!important;
    border-collapse:separate!important;
  }
  .utilisation-report-table thead{position:relative!important;z-index:40!important}
  .utilisation-report-table thead th{
    position:sticky!important;
    top:0!important;
    z-index:41!important;
    height:44px!important;
    padding:10px 12px!important;
    background:#F8FAFD!important;
    background-clip:padding-box!important;
    border-top:1px solid #E4EAF3!important;
    border-bottom:1px solid #DCE3ED!important;
    box-shadow:0 8px 12px -12px rgba(31,42,61,.42)!important;
  }
  .utilisation-report-table tbody{position:relative!important;z-index:1!important}
  .utilisation-report-table tbody td{position:relative!important;z-index:1!important}

  @media(max-width:680px){
    .employee-photo-editor{gap:12px!important;align-items:flex-start!important}
    .employee-photo-avatar-slot{flex-basis:60px!important;width:60px!important;min-width:60px!important}
    .employee-photo-avatar-slot>.employee-profile-avatar-lg{
      width:54px!important;height:54px!important;min-width:54px!important;
    }
  }
}


/* ============================================================
   v4.0.10 — Compact monthly batch spectacle entry alignment
   Amount first, then a short bill-date control. The two controls use the
   same baseline and each keeps its own helper line.
   ============================================================ */
@media screen {
  .batch-entry-card{border-radius:14px!important}
  .batch-entry-card .table-wrap.tall{max-height:72vh!important}
  .batch-entry-table{border-spacing:0 5px!important;font-size:.70rem!important}
  .batch-entry-table thead th{height:38px!important;padding:7px 10px!important;font-size:.56rem!important;line-height:1.15!important;vertical-align:middle!important}
  .batch-entry-table tbody td{padding:7px 10px!important;vertical-align:middle!important;line-height:1.28!important}
  .batch-entry-table tbody tr td:first-child{border-radius:10px 0 0 10px!important}
  .batch-entry-table tbody tr td:last-child{border-radius:0 10px 10px 0!important}
  .batch-entry-table .employee-cell{min-width:175px!important;gap:8px!important}
  .batch-entry-table .employee-profile-avatar-sm{width:34px!important;height:34px!important;font-size:.65rem!important}
  .batch-entry-table .employee-cell strong{font-size:.70rem!important;line-height:1.15!important}
  .batch-entry-table .employee-cell span{margin-top:2px!important;font-size:.60rem!important;line-height:1.15!important}
  .batch-entry-table .mini-danger,.batch-entry-table .cell-sub{font-size:.59rem!important;line-height:1.28!important}
  .batch-entry-table td>strong{font-size:.69rem!important}

  .batch-entry-table .general-claim-col{min-width:155px!important;width:155px!important}
  .batch-entry-table .general-entry-cell{min-width:155px!important;width:155px!important}
  .batch-entry-table .spectacle-entry-col{min-width:332px!important;width:332px!important}
  .batch-entry-table .spectacle-entry-cell{min-width:332px!important;width:332px!important}
  .batch-entry-table .claim-entry-control{display:flex!important;flex-direction:column!important;gap:3px!important}
  .batch-entry-table .claim-entry-control small{font-size:.56rem!important;line-height:1.2!important;white-space:nowrap!important}
  .batch-entry-table input{min-height:36px!important;height:36px!important;padding:0 9px!important;border-radius:9px!important;font-size:.68rem!important}

  .spectacle-entry-compact{
    display:grid!important;
    grid-template-columns:126px 178px!important;
    align-items:start!important;
    justify-content:end!important;
    gap:10px!important;
  }
  .spectacle-entry-field{display:flex!important;flex-direction:column!important;gap:3px!important;min-width:0!important;margin:0!important}
  .spectacle-entry-field>span{display:flex!important;align-items:center!important;min-height:14px!important;color:#657086!important;font-size:.55rem!important;font-weight:700!important;line-height:1.1!important;white-space:nowrap!important}
  .spectacle-entry-field input{width:100%!important;min-width:0!important;max-width:none!important}
  .spectacle-amount-field input{text-align:right!important;font-variant-numeric:tabular-nums!important}
  .spectacle-entry-field small{display:block!important;height:14px!important;margin:0!important;color:#788397!important;font-size:.51rem!important;line-height:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .spectacle-amount-field small{text-align:right!important}
  .spectacle-bill-field small{text-align:left!important}
  .spectacle-bill-field .required-mark{margin-left:3px!important;color:#C15C6C!important;font-size:.62rem!important;font-weight:800!important}
  .spectacle-bill-field:not(.is-required) .required-mark{opacity:.30!important}
  .spectacle-bill-field.is-required input:invalid{border-color:#DFAAB5!important;background:#FFF9FA!important}

  @media(max-width:1050px){
    .batch-entry-table .spectacle-entry-col,.batch-entry-table .spectacle-entry-cell{min-width:314px!important;width:314px!important}
    .spectacle-entry-compact{grid-template-columns:120px 166px!important;gap:8px!important}
  }
  @media(max-width:760px){
    .batch-entry-table thead th{height:36px!important;padding:6px 9px!important}
    .batch-entry-table tbody td{padding:7px 9px!important}
    .batch-entry-table .spectacle-entry-col,.batch-entry-table .spectacle-entry-cell{min-width:280px!important;width:280px!important}
    .spectacle-entry-compact{grid-template-columns:108px 145px!important;gap:7px!important;justify-content:start!important}
  }
}

/* ============================================================
   v4.0.9 — Review spectacle field alignment polish
   Keep the amount and bill-date controls compact, equal-height and aligned.
   ============================================================ */
@media screen and (min-width:761px){
  .spectacle-review-section .spectacle-decision-grid{
    grid-template-columns:280px 380px!important;
    gap:16px!important;
    width:auto!important;
    max-width:676px!important;
    justify-content:start!important;
    align-items:start!important;
  }
  .spectacle-review-section .spectacle-decision-grid>.decision-input-label{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
  }
  .spectacle-review-section .spectacle-decision-grid>.decision-input-label>span{
    display:flex!important;
    align-items:flex-end!important;
    min-height:18px!important;
    line-height:1.15!important;
    margin:0!important;
  }
  .spectacle-review-section .decision-money-input{
    width:280px!important;
    max-width:280px!important;
    min-height:42px!important;
    height:42px!important;
  }
  .spectacle-review-section .decision-money-input input{
    min-height:40px!important;
    height:40px!important;
  }
  .spectacle-review-section .spectacle-date-field{
    width:380px!important;
    max-width:380px!important;
  }
  .spectacle-review-section .spectacle-date-field input{
    width:380px!important;
    max-width:380px!important;
    min-height:42px!important;
    height:42px!important;
  }
  .spectacle-review-section .spectacle-date-field small{
    max-width:380px!important;
    margin-top:0!important;
  }
}

@media screen and (max-width:760px){
  .spectacle-review-section .spectacle-decision-grid{
    grid-template-columns:1fr!important;
    max-width:none!important;
  }
  .spectacle-review-section .decision-money-input,
  .spectacle-review-section .spectacle-date-field,
  .spectacle-review-section .spectacle-date-field input{
    width:100%!important;
    max-width:none!important;
  }
}


/* ============================================================
   v4.0.10 — Review spectacle amount/date compact alignment
   ============================================================ */
@media screen and (min-width:761px){
  .spectacle-review-section .spectacle-decision-grid{
    grid-template-columns:220px 290px!important;
    gap:14px!important;
    width:524px!important;
    max-width:524px!important;
    justify-content:start!important;
    align-items:start!important;
  }
  .spectacle-review-section .spectacle-decision-grid>.decision-input-label{width:100%!important;min-width:0!important;margin:0!important}
  .spectacle-review-section .decision-money-input,
  .spectacle-review-section .spectacle-date-field,
  .spectacle-review-section .spectacle-date-field input{width:100%!important;max-width:none!important}
  .spectacle-review-section .decision-money-input,
  .spectacle-review-section .spectacle-date-field input{min-height:40px!important;height:40px!important}
  .spectacle-review-section .decision-money-input input{min-height:38px!important;height:38px!important}
  .spectacle-review-section .spectacle-decision-grid>.decision-input-label>span{min-height:17px!important;align-items:center!important}
  .spectacle-review-section .spectacle-date-field small{max-width:290px!important}
}

/* v4.2.0 — per-employee Finance correction workflow */
.status.correction-requested,
.status.requested{
  display:inline-flex!important;align-items:center!important;min-height:24px!important;padding:0 8px!important;
  border-radius:999px!important;background:#FFF7E8!important;border:1px solid #F4D9A6!important;
  color:#8A5B16!important;font-size:.58rem!important;font-weight:780!important;white-space:nowrap!important;
}
.row-correction-requested>td{background:#FFFCF5!important}
.correction-request-popover{position:relative!important}
.correction-request-menu{width:320px!important;padding:12px!important}
.correction-request-menu .stack-form{display:grid!important;gap:9px!important}
.correction-request-menu label{display:grid!important;gap:5px!important;font-size:.58rem!important;font-weight:760!important;color:#5A6577!important}
.correction-request-menu textarea{width:100%!important;min-height:76px!important;resize:vertical!important;border:1px solid #DDE3EC!important;border-radius:9px!important;padding:8px 9px!important;font:inherit!important;font-size:.66rem!important;color:#344054!important;background:#fff!important}
.correction-request-menu button{justify-content:center!important;background:#FFF2F4!important;color:#A14E63!important;border:1px solid #F2D6DD!important}
.finance-correction-section{margin-top:16px!important}
.finance-correction-section .card-heading{align-items:flex-start!important}
.finance-correction-section table td{vertical-align:top!important}
.correction-reason{max-width:360px!important;white-space:normal!important;line-height:1.35!important}
.correction-heading{align-items:flex-start!important}
.correction-record-summary,.correction-form-card,.correction-request-history{margin-top:14px!important}
.correction-fieldset{border:0!important;padding:0!important;margin:0!important;min-width:0!important}
.correction-fieldset:disabled{opacity:.62!important}
.correction-submit-row{display:flex!important;justify-content:flex-end!important;padding-top:4px!important}
.correction-request-panel small{display:block!important;margin-top:4px!important;color:#7A6540!important}
.correction-workflow-card .card-heading{align-items:center!important}
.correction-workflow-card .card-heading p{max-width:760px!important}
.inline-actions{display:flex!important;gap:8px!important;margin-top:9px!important}
.correction-queue-table td{vertical-align:top!important}
.batch-employee-table-v420 .action-col,.correction-queue-table .action-col{width:1%!important;white-space:nowrap!important}
@media screen and (max-width:760px){
  .correction-request-menu{width:min(300px,calc(100vw - 34px))!important}
  .correction-submit-row{justify-content:stretch!important}
  .correction-submit-row .btn{width:100%!important}
}
.finance-request-correction-card{margin-bottom:14px!important}
.correction-inline-form{align-items:flex-end!important}
.correction-inline-form input[name="reason"]{min-width:min(520px,60vw)!important}
@media screen and (max-width:760px){.correction-inline-form input[name="reason"]{min-width:0!important;width:100%!important}}