/*
  SVS ERP — Clean Aqua Enterprise
  R103.11.51.16.21.98-UI1
  Frontend-only visual system.
  Goals: uniform light theme, low visual weight, flat/soft enterprise surfaces,
  fast-feeling interactions, SVS teal/aqua brand identity.
*/

:root{
  color-scheme:light;
  --svs-bg:#f6fbfb;
  --svs-bg-2:#eef8f8;
  --svs-panel:#ffffff;
  --svs-panel-soft:#f8fcfc;
  --svs-teal-950:#073a43;
  --svs-teal-900:#084954;
  --svs-teal-800:#0a5c68;
  --svs-teal-700:#0d7580;
  --svs-teal-600:#0f8f99;
  --svs-teal-500:#13a8ad;
  --svs-aqua:#73d9d5;
  --svs-aqua-soft:#dff7f5;
  --svs-text:#10233f;
  --svs-muted:#6f8096;
  --svs-border:#dfe9ec;
  --svs-border-strong:#cbdcdf;
  --svs-success:#0aa968;
  --svs-warning:#e99a16;
  --svs-danger:#e94d58;
  --svs-info:#2287d7;
  --svs-shadow:0 8px 24px rgba(18,59,74,.065);
  --svs-shadow-sm:0 3px 12px rgba(18,59,74,.055);
  --svs-radius:14px;
  --svs-radius-sm:10px;
}

/* Permanent light system */
html,body{background:var(--svs-bg)!important;color:var(--svs-text)!important;}
body.dark{background:var(--svs-bg)!important;color:var(--svs-text)!important;}
html body,
html body:not(.dark),
html body.dark{
  --background:var(--svs-bg)!important;
  --surface:var(--svs-panel)!important;
  --panel:var(--svs-panel)!important;
  --text:var(--svs-text)!important;
  --muted:var(--svs-muted)!important;
  --border:var(--svs-border)!important;
}

/* Reset heavy neumorphism / blur */
html body:not(.dark) .app-shell,
html body:not(.dark) .main-content,
html body:not(.dark) .page,
html body:not(.dark) .page-content{
  background:var(--svs-bg)!important;
}
html body:not(.dark) .panel,
html body:not(.dark) .kpi-card,
html body:not(.dark) .metric-card,
html body:not(.dark) .summary-card,
html body:not(.dark) .today-summary-card,
html body:not(.dark) .case-summary-card,
html body:not(.dark) .settings-item,
html body:not(.dark) .content-kpis article,
html body:not(.dark) .staff-360-box,
html body:not(.dark) .staff-360-kpis article,
html body:not(.dark) .staff-360-mini-kpis article,
html body:not(.dark) .daily-summary-row,
html body:not(.dark) .daily-detail,
html body:not(.dark) .mh-kpi,
html body:not(.dark) .mh-pane,
html body:not(.dark) .command-shift-lane,
html body:not(.dark) .command-funnel-board,
html body:not(.dark) .command-ranking,
html body:not(.dark) .command-pending-breakdown,
html body:not(.dark) .command-monthly-workers,
html body:not(.dark) .command-cfpb-assignment-guide,
html body:not(.dark) .command-cfpb-load-grid{
  background:var(--svs-panel)!important;
  border:1px solid var(--svs-border)!important;
  border-radius:var(--svs-radius)!important;
  box-shadow:var(--svs-shadow-sm)!important;
  color:var(--svs-text)!important;
}
html body:not(.dark) .panel:hover,
html body:not(.dark) .kpi-card:hover,
html body:not(.dark) .today-summary-card:hover{
  box-shadow:var(--svs-shadow)!important;
}

/* Sidebar */
html body:not(.dark) .sidebar{
  background:
    radial-gradient(circle at 35% 100%,rgba(115,217,213,.12),transparent 28%),
    linear-gradient(180deg,var(--svs-teal-950) 0%,#06434c 55%,#073c45 100%)!important;
  border-right:0!important;
  box-shadow:8px 0 28px rgba(7,58,67,.09)!important;
  color:#fff!important;
}
html body:not(.dark) .brand{
  padding-bottom:18px!important;
  border-bottom:1px solid rgba(255,255,255,.11)!important;
}
html body:not(.dark) .brand-mark,
html body:not(.dark) .sidebar-card-logo{
  background:linear-gradient(145deg,#55d8d2,#0e9da5)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:none!important;
}
html body:not(.dark) .brand-name{color:#fff!important;font-weight:800!important;letter-spacing:.035em!important;}
html body:not(.dark) .brand-subtitle{color:#9dd7d7!important;}
html body:not(.dark) .nav-item{
  color:#d9eeee!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:background .12s ease,color .12s ease,transform .12s ease!important;
}
html body:not(.dark) .nav-item:hover{
  background:rgba(115,217,213,.10)!important;
  color:#fff!important;
  transform:translateX(1px)!important;
}
html body:not(.dark) .nav-item.active{
  color:#fff!important;
  background:linear-gradient(135deg,#0f929b,#12b5b4)!important;
  box-shadow:0 5px 14px rgba(5,148,155,.18)!important;
}
html body:not(.dark) .nav-icon{color:inherit!important;}
html body:not(.dark) .sidebar-footer{
  border-top:1px solid rgba(255,255,255,.10)!important;
}
html body:not(.dark) .sidebar-card{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#dff5f4!important;
}
html body:not(.dark) .sidebar-card-title{color:#fff!important;}
html body:not(.dark) .sidebar-card-subtitle,
html body:not(.dark) .sidebar-card-quote{color:#a9d6d5!important;}

/* Topbar */
html body:not(.dark) .topbar{
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid var(--svs-border)!important;
  box-shadow:0 2px 12px rgba(24,64,78,.045)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body:not(.dark) .topbar input,
html body:not(.dark) .global-search,
html body:not(.dark) .search-input{
  background:#f5f9fa!important;
  color:var(--svs-text)!important;
  border:1px solid var(--svs-border)!important;
  box-shadow:none!important;
}
html body:not(.dark) .icon-button{
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  color:#496279!important;
}
html body:not(.dark) .icon-button:hover{
  background:var(--svs-aqua-soft)!important;
  color:var(--svs-teal-700)!important;
}

/* Page headings + subtle branded wave */
html body:not(.dark) .page-header,
html body:not(.dark) .content-hero,
html body:not(.dark) .settings-hero{
  position:relative!important;
}
html body:not(.dark) .page-header::after,
html body:not(.dark) .content-hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  right:0;
  top:0;
  width:min(38vw,520px);
  height:100%;
  min-height:64px;
  opacity:.55;
  background:
    radial-gradient(120% 70% at 100% 100%,rgba(115,217,213,.28),transparent 60%),
    linear-gradient(160deg,transparent 48%,rgba(19,168,173,.07) 49%,rgba(115,217,213,.13) 72%,transparent 73%);
  border-radius:0 0 0 44px;
}
html body:not(.dark) h1,
html body:not(.dark) h2,
html body:not(.dark) h3,
html body:not(.dark) h4{
  color:var(--svs-text)!important;
}
html body:not(.dark) .eyebrow{
  color:var(--svs-teal-700)!important;
}

/* Cards / KPIs */
html body:not(.dark) .kpi-card,
html body:not(.dark) .metric-card,
html body:not(.dark) .today-summary-card{
  min-height:unset!important;
}
html body:not(.dark) .kpi-icon,
html body:not(.dark) .metric-icon,
html body:not(.dark) .svs-home-icon,
html body:not(.dark) .svs-announcement-badge,
html body:not(.dark) .svs-event-date,
html body:not(.dark) .svs-person-avatar{
  background:var(--svs-aqua-soft)!important;
  color:var(--svs-teal-700)!important;
  border:0!important;
  box-shadow:none!important;
}
html body:not(.dark) [data-counter],
html body:not(.dark) .kpi-value,
html body:not(.dark) .metric-value{
  color:var(--svs-text)!important;
}

/* Forms */
html body:not(.dark) input,
html body:not(.dark) select,
html body:not(.dark) textarea,
html body:not(.dark) .client-filter-menu>summary{
  background:#fff!important;
  color:var(--svs-text)!important;
  border:1px solid var(--svs-border-strong)!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
html body:not(.dark) input:focus,
html body:not(.dark) select:focus,
html body:not(.dark) textarea:focus,
html body:not(.dark) .client-filter-menu[open]>summary{
  border-color:#55bebf!important;
  box-shadow:0 0 0 3px rgba(19,168,173,.10)!important;
  outline:none!important;
}
html body:not(.dark) input::placeholder,
html body:not(.dark) textarea::placeholder{color:#9aabb9!important;}
html body:not(.dark) .client-filter-checks,
html body:not(.dark) .client-filter-actions{
  background:#fff!important;
  color:var(--svs-text)!important;
  border-color:var(--svs-border)!important;
}

/* Buttons */
html body:not(.dark) .button,
html body:not(.dark) .primary-button,
html body:not(.dark) .secondary-button,
html body:not(.dark) button{
  box-shadow:none!important;
}
html body:not(.dark) .button.primary,
html body:not(.dark) .primary-button{
  background:linear-gradient(135deg,#0f8f99,#15b4b3)!important;
  color:#fff!important;
  border:1px solid #0f8f99!important;
  border-radius:9px!important;
}
html body:not(.dark) .button.primary:hover,
html body:not(.dark) .primary-button:hover{
  filter:brightness(1.03)!important;
  transform:translateY(-1px)!important;
  box-shadow:0 5px 14px rgba(15,143,153,.15)!important;
}
html body:not(.dark) .button.secondary,
html body:not(.dark) .secondary-button,
html body:not(.dark) .button:not(.primary):not(.danger){
  background:#fff!important;
  color:var(--svs-teal-800)!important;
  border:1px solid var(--svs-border-strong)!important;
  border-radius:9px!important;
}
html body:not(.dark) .button.secondary:hover,
html body:not(.dark) .secondary-button:hover{
  background:#f1fbfa!important;
  border-color:#74caca!important;
}

/* Tables */
html body:not(.dark) .table-wrap,
html body:not(.dark) .content-table-wrap,
html body:not(.dark) .mh-bulk-preview{
  background:#fff!important;
  border:1px solid var(--svs-border)!important;
  border-radius:12px!important;
  box-shadow:none!important;
  overflow:auto!important;
}
html body:not(.dark) table{color:var(--svs-text)!important;}
html body:not(.dark) thead th{
  background:#f1f7f8!important;
  color:#60758a!important;
  border-bottom:1px solid var(--svs-border)!important;
  font-weight:700!important;
}
html body:not(.dark) tbody td{border-bottom:1px solid #edf2f3!important;}
html body:not(.dark) tbody tr:hover td{background:#f7fcfc!important;}

/* Tabs / filters / status controls */
html body:not(.dark) .quick-filter-chip,
html body:not(.dark) .worker-queue-tab,
html body:not(.dark) .command-view-tab,
html body:not(.dark) .settings-tab,
html body:not(.dark) .mh-tab,
html body:not(.dark) .social-task-tab,
html body:not(.dark) .staff-360-tabs button{
  background:#fff!important;
  color:#5e7387!important;
  border:1px solid var(--svs-border)!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
html body:not(.dark) .quick-filter-chip.active,
html body:not(.dark) .worker-queue-tab.active,
html body:not(.dark) .command-view-tab.active,
html body:not(.dark) .settings-tab.active,
html body:not(.dark) .mh-tab.active,
html body:not(.dark) .social-task-tab.active,
html body:not(.dark) .staff-360-tabs button.active{
  background:var(--svs-aqua-soft)!important;
  color:var(--svs-teal-800)!important;
  border-color:#94d8d5!important;
  box-shadow:none!important;
}

/* Letter Generator stays functionally identical; visual flattening only */
html body:not(.dark) .letter-access-badge,
html body:not(.dark) .letter-option-strip,
html body:not(.dark) .letter-preflight,
html body:not(.dark) .letter-generation-progress,
html body:not(.dark) .letter-generation-results,
html body:not(.dark) .letter-generation-hint,
html body:not(.dark) .aiw-field,
html body:not(.dark) .aiw-legend-col,
html body:not(.dark) .aiw-shot-meta,
html body:not(.dark) .template-default-toggle{
  background:#fff!important;
  border:1px solid var(--svs-border)!important;
  border-radius:11px!important;
  box-shadow:none!important;
}
html body:not(.dark) .letter-generation-progress-track{
  background:#e7f1f2!important;
  box-shadow:none!important;
}
html body:not(.dark) .letter-section-divider{border-color:var(--svs-border)!important;}

/* Modals / drawers / notifications */
html body:not(.dark) .modal-card,
html body:not(.dark) dialog,
html body:not(.dark) .notification-panel,
html body:not(.dark) .case-drawer{
  background:#fff!important;
  color:var(--svs-text)!important;
  border:1px solid var(--svs-border)!important;
  border-radius:14px!important;
  box-shadow:0 20px 55px rgba(18,59,74,.16)!important;
}
html body:not(.dark) .modal-header,
html body:not(.dark) .modal-actions,
html body:not(.dark) .settings-form-actions{
  border-color:var(--svs-border)!important;
}

/* Chat */
html body:not(.dark) .chat-search,
html body:not(.dark) .chat-list,
html body:not(.dark) .chat-float-panel,
html body:not(.dark) .chat-float-rail,
html body:not(.dark) .chat-float-main,
html body:not(.dark) .chat-float-convo-head,
html body:not(.dark) .chat-float-composer{
  background:#fff!important;
  color:var(--svs-text)!important;
  border-color:var(--svs-border)!important;
}
html body:not(.dark) .chat-float-panel{
  box-shadow:0 18px 45px rgba(18,59,74,.14)!important;
}

/* Home / quote / announcements */
html body:not(.dark) .svs-birthday-poster,
html body:not(.dark) .quote-card,
html body:not(.dark) .home-quote{
  border:1px solid #d8eeed!important;
  box-shadow:none!important;
}
html body:not(.dark) .svs-announcement,
html body:not(.dark) .svs-new-joiner,
html body:not(.dark) .svs-event-item{
  border-color:#e7eff0!important;
}

/* Status colors */
html body:not(.dark) .danger,
html body:not(.dark) .status-pill.danger{color:#c33f4d!important;}
html body:not(.dark) .warning,
html body:not(.dark) .status-pill.warning{color:#a76a0b!important;}
html body:not(.dark) .done,
html body:not(.dark) .status-pill.done{color:#087e68!important;}
html body:not(.dark) .overdue{color:#c34553!important;}

/* Login — same SVS Clean Aqua system */
html body:not(.dark) .login-screen{
  min-height:100vh!important;
  background:
    radial-gradient(circle at 82% 12%,rgba(115,217,213,.18),transparent 29%),
    linear-gradient(180deg,#fbfefe 0%,#f2fbfa 100%)!important;
  color:var(--svs-text)!important;
  padding:clamp(20px,4vw,56px)!important;
  gap:0!important;
}
html body:not(.dark) .login-screen>.login-brand-panel{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 88% 78%,rgba(155,237,232,.42),transparent 34%),
    linear-gradient(145deg,#07525c 0%,#0d7881 48%,#4fc8c6 100%)!important;
  color:#fff!important;
  border:0!important;
  border-radius:22px 0 0 22px!important;
  box-shadow:0 18px 52px rgba(18,59,74,.12)!important;
}
html body:not(.dark) .login-screen>.login-brand-panel::before{
  content:""!important;
  position:absolute!important;
  inset:auto -12% -14% -18%!important;
  height:48%!important;
  background:
    radial-gradient(130% 90% at 50% 100%,rgba(219,250,248,.34),transparent 62%),
    linear-gradient(168deg,transparent 20%,rgba(190,247,244,.28) 21%,rgba(115,217,213,.18) 48%,transparent 49%)!important;
  transform:rotate(-3deg)!important;
  border-radius:50%!important;
  opacity:1!important;
}
html body:not(.dark) .login-screen>.login-brand-panel::after{
  content:""!important;
  position:absolute!important;
  right:-12%!important;
  bottom:9%!important;
  width:78%!important;
  height:33%!important;
  background:linear-gradient(164deg,transparent 44%,rgba(255,255,255,.15) 45%,rgba(255,255,255,.08) 65%,transparent 66%)!important;
  border-radius:50%!important;
  opacity:1!important;
}
html body:not(.dark) .login-brand-lockup,
html body:not(.dark) .login-brand-message,
html body:not(.dark) .login-brand-panel blockquote,
html body:not(.dark) .login-brand-foot{position:relative!important;z-index:2!important;}
html body:not(.dark) .login-brand-logo{
  background:#fff!important;
  color:var(--svs-teal-800)!important;
  border:0!important;
  box-shadow:none!important;
}
html body:not(.dark) .login-brand-copy strong,
html body:not(.dark) .login-brand-message h2,
html body:not(.dark) .login-brand-message h2 em{color:#fff!important;}
html body:not(.dark) .login-brand-copy span,
html body:not(.dark) .login-brand-message p,
html body:not(.dark) .login-brand-panel blockquote,
html body:not(.dark) .login-brand-panel blockquote small,
html body:not(.dark) .login-brand-foot{color:#d8f2f0!important;}
html body:not(.dark) .login-feature-grid{display:none!important;}
html body:not(.dark) .login-brand-message h2{
  font-size:clamp(34px,4vw,58px)!important;
  line-height:1.06!important;
  letter-spacing:-.035em!important;
  max-width:620px!important;
}
html body:not(.dark) .login-brand-message h2 em{font-style:normal!important;}
html body:not(.dark) .login-brand-message p{
  max-width:520px!important;
  font-size:15px!important;
  line-height:1.7!important;
}
html body:not(.dark) .login-screen>.login-card{
  background:#fff!important;
  color:var(--svs-text)!important;
  border:0!important;
  border-radius:0 22px 22px 0!important;
  box-shadow:0 18px 52px rgba(18,59,74,.12)!important;
}
html body:not(.dark) .login-screen>.login-card .login-brand-mark{
  width:auto!important;
  height:auto!important;
  padding:0!important;
  background:transparent!important;
  color:var(--svs-teal-700)!important;
  border:0!important;
  box-shadow:none!important;
  font-size:30px!important;
  font-weight:800!important;
}
html body:not(.dark) .login-screen>.login-card .login-brand-mark::after{
  content:" ERP";
  color:var(--svs-text);
  font-weight:500;
}
html body:not(.dark) .login-screen>.login-card .eyebrow{
  color:#8aa0b1!important;
  letter-spacing:.18em!important;
}
html body:not(.dark) .login-screen>.login-card h1{
  color:var(--svs-text)!important;
  font-size:30px!important;
}
html body:not(.dark) .login-screen>.login-card>p{color:var(--svs-muted)!important;}
html body:not(.dark) .login-screen>.login-card .field>span{
  color:#29445b!important;
  font-weight:700!important;
}
html body:not(.dark) .login-screen>.login-card input{
  background:#fff!important;
  border:1px solid var(--svs-border-strong)!important;
  box-shadow:none!important;
  color:var(--svs-text)!important;
  min-height:48px!important;
}
html body:not(.dark) .login-screen>.login-card #loginButton{
  min-height:50px!important;
  background:linear-gradient(135deg,#0c8c96,#25bebb)!important;
  border:0!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
html body:not(.dark) .login-divider:before,
html body:not(.dark) .login-divider:after{background:var(--svs-border)!important;}

/* Keep overlays readable without heavy blur */
html body:not(.dark) .modal-backdrop,
html body:not(.dark) .drawer-backdrop,
html body:not(.dark) .pending-drill-backdrop{
  background:rgba(7,36,48,.46)!important;
  backdrop-filter:none!important;
}

/* Compact everyday ERP spacing */
html body:not(.dark) .panel{padding:clamp(12px,1.2vw,18px)!important;}
html body:not(.dark) .kpi-grid,
html body:not(.dark) .content-kpis,
html body:not(.dark) .settings-dashboard-grid{
  gap:12px!important;
}

/* Responsive */
@media(max-width:980px){
  html body:not(.dark) .login-screen>.login-brand-panel{display:none!important;}
  html body:not(.dark) .login-screen>.login-card{
    border-radius:18px!important;
    width:min(520px,100%)!important;
    margin:auto!important;
  }
}
@media(max-width:760px){
  html body:not(.dark) .sidebar{box-shadow:10px 0 28px rgba(7,58,67,.18)!important;}
  html body:not(.dark) .panel,
  html body:not(.dark) .modal-card{border-radius:12px!important;}
  html body:not(.dark) .page-header::after,
  html body:not(.dark) .content-hero::after{display:none!important;}
}
@media(prefers-reduced-motion:reduce){
  html body:not(.dark) *,
  html body:not(.dark) *::before,
  html body:not(.dark) *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}