/*
============================================================
SVS ERP — F15.21.0 GLOBAL UI FOUNDATION
Visual-only additive layer.
No workflow logic.
============================================================
*/

:root{
  --svs-bg:#f5f8fb;
  --svs-bg-soft:#f8fafc;
  --svs-surface:#ffffff;
  --svs-surface-soft:#f8fbfc;
  --svs-surface-hover:#f2fbfa;

  --svs-text:#102235;
  --svs-text-soft:#42576d;
  --svs-muted:#718397;

  --svs-border:#dfe7ee;
  --svs-border-strong:#cfdbe5;

  --svs-teal:#14b8a6;
  --svs-teal-dark:#0f766e;
  --svs-teal-soft:#eafaf7;

  --svs-blue:#2563eb;
  --svs-blue-soft:#eff6ff;

  --svs-green:#16a36a;
  --svs-green-soft:#ecfdf5;

  --svs-amber:#d9910b;
  --svs-amber-soft:#fff8e7;

  --svs-red:#dc4c59;
  --svs-red-soft:#fff1f3;

  --svs-purple:#7c5ce4;
  --svs-purple-soft:#f4f0ff;

  --svs-gray-soft:#f1f5f9;

  --svs-radius-xs:7px;
  --svs-radius-sm:9px;
  --svs-radius-md:12px;
  --svs-radius-lg:16px;
  --svs-radius-xl:20px;

  --svs-shadow-xs:0 1px 2px rgba(15,34,53,.035);
  --svs-shadow-sm:0 4px 14px rgba(15,34,53,.055);
  --svs-shadow-md:0 10px 28px rgba(15,34,53,.075);
  --svs-shadow-lg:0 22px 55px rgba(15,34,53,.12);

  --svs-space-1:4px;
  --svs-space-2:8px;
  --svs-space-3:12px;
  --svs-space-4:16px;
  --svs-space-5:20px;
  --svs-space-6:24px;
  --svs-space-7:32px;

  /* Map legacy shared tokens into the new system. */
  --panel:var(--svs-surface);
  --surface:var(--svs-surface);
  --surface-soft:var(--svs-surface-soft);
  --text:var(--svs-text);
  --muted:var(--svs-muted);
  --border:var(--svs-border);
  --primary:var(--svs-teal);
  --accent:var(--svs-teal);

  --shadow:var(--svs-shadow-sm);

  --teal-500:var(--svs-teal);
  --green-500:var(--svs-green);
  --amber-500:var(--svs-amber);
  --red-500:var(--svs-red);
  --blue-500:var(--svs-blue);
}

/* ---------------------------------------------------------
   GLOBAL DOCUMENT
--------------------------------------------------------- */

html{
  background:var(--svs-bg);
}

html body:not(.dark){
  background:
    radial-gradient(circle at 100% 0%,rgba(20,184,166,.045),transparent 28%),
    linear-gradient(180deg,#f8fafc 0%,var(--svs-bg) 100%) !important;
  color:var(--svs-text) !important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html body:not(.dark) *{
  box-sizing:border-box;
}

html body:not(.dark) ::selection{
  background:rgba(20,184,166,.18);
  color:var(--svs-text);
}

/* ---------------------------------------------------------
   APP SHELL
--------------------------------------------------------- */

html body:not(.dark) .app-shell,
html body:not(.dark) .main-shell{
  background:transparent;
}

html body:not(.dark) .sidebar{
  background:rgba(255,255,255,.94) !important;
  border-right:1px solid var(--svs-border) !important;
  box-shadow:4px 0 20px rgba(15,34,53,.025);
}

html body:not(.dark) .topbar,
html body:not(.dark) .app-header,
html body:not(.dark) .main-header{
  background:rgba(255,255,255,.91) !important;
  border-bottom:1px solid var(--svs-border) !important;
  backdrop-filter:blur(14px);
}

/* ---------------------------------------------------------
   NAVIGATION
--------------------------------------------------------- */

html body:not(.dark) .nav-item{
  border-radius:10px !important;
  color:var(--svs-text-soft) !important;
  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

html body:not(.dark) .nav-item:hover{
  background:var(--svs-surface-hover) !important;
  color:var(--svs-teal-dark) !important;
}

html body:not(.dark) .nav-item.active{
  background:linear-gradient(
    135deg,
    rgba(20,184,166,.13),
    rgba(14,165,233,.07)
  ) !important;
  color:var(--svs-teal-dark) !important;
  box-shadow:inset 3px 0 0 var(--svs-teal);
}

/* ---------------------------------------------------------
   PAGE TYPOGRAPHY
--------------------------------------------------------- */

html body:not(.dark) h1,
html body:not(.dark) h2,
html body:not(.dark) h3{
  color:var(--svs-text);
  letter-spacing:-.015em;
}

html body:not(.dark) h1{
  font-weight:800;
}

html body:not(.dark) h2{
  font-weight:750;
}

html body:not(.dark) .muted,
html body:not(.dark) .muted-text{
  color:var(--svs-muted) !important;
}

/* ---------------------------------------------------------
   PANELS / CARDS
--------------------------------------------------------- */

html body:not(.dark) .panel,
html body:not(.dark) .card,
html body:not(.dark) .performance-card,
html body:not(.dark) .audit-summary-card{
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--svs-border) !important;
  border-radius:var(--svs-radius-lg) !important;
  box-shadow:var(--svs-shadow-xs) !important;
}

html body:not(.dark) .panel{
  overflow:clip;
}

html body:not(.dark) .panel-header{
  border-bottom:1px solid var(--svs-border);
}

html body:not(.dark) .panel-header h2,
html body:not(.dark) .panel-header h3{
  color:var(--svs-text);
}

html body:not(.dark) .panel-header p{
  color:var(--svs-muted);
}

/* KPI / metric cards */
html body:not(.dark) .executive-kpis article,
html body:not(.dark) .system-health-grid article,
html body:not(.dark) .today-summary-card{
  border:1px solid var(--svs-border) !important;
  border-top:3px solid var(--svs-teal) !important;
  border-radius:var(--svs-radius-md) !important;
  background:var(--svs-surface) !important;
  box-shadow:var(--svs-shadow-xs) !important;
}

html body:not(.dark) .executive-kpis article.warning,
html body:not(.dark) .system-health-grid article.warning{
  border-top-color:var(--svs-amber) !important;
}

html body:not(.dark) .executive-kpis article.danger,
html body:not(.dark) .system-health-grid article.danger{
  border-top-color:var(--svs-red) !important;
}

/* ---------------------------------------------------------
   BUTTON SYSTEM
--------------------------------------------------------- */

html body:not(.dark) .button{
  border-radius:10px !important;
  font-weight:700 !important;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

html body:not(.dark) .button.primary{
  background:linear-gradient(
    135deg,
    var(--svs-teal),
    #0ea5a4
  ) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 5px 13px rgba(20,184,166,.18) !important;
}

html body:not(.dark) .button.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 7px 17px rgba(20,184,166,.23) !important;
}

html body:not(.dark) .button:not(.primary):not(.danger){
  background:#fff !important;
  color:var(--svs-text-soft) !important;
  border:1px solid var(--svs-border-strong) !important;
  box-shadow:none !important;
}

html body:not(.dark) .button:not(.primary):not(.danger):hover{
  background:var(--svs-surface-hover) !important;
  border-color:#b7dcd7 !important;
  color:var(--svs-teal-dark) !important;
}

html body:not(.dark) .button.danger{
  background:#fff !important;
  color:var(--svs-red) !important;
  border-color:#efc6cb !important;
}

html body:not(.dark) .button.danger:hover{
  background:var(--svs-red-soft) !important;
}

/* ---------------------------------------------------------
   FORMS
--------------------------------------------------------- */

html body:not(.dark) input,
html body:not(.dark) select,
html body:not(.dark) textarea{
  border-color:var(--svs-border-strong);
}

html body:not(.dark) .field input,
html body:not(.dark) .field select,
html body:not(.dark) .field textarea,
html body:not(.dark) .search-input{
  background:#fff !important;
  color:var(--svs-text) !important;
  border:1px solid var(--svs-border-strong) !important;
  border-radius:10px !important;
  box-shadow:inset 0 1px 2px rgba(15,34,53,.025);
  transition:border-color .15s ease,box-shadow .15s ease;
}

html body:not(.dark) .field input:focus,
html body:not(.dark) .field select:focus,
html body:not(.dark) .field textarea:focus,
html body:not(.dark) .search-input:focus{
  outline:none !important;
  border-color:#72cfc2 !important;
  box-shadow:0 0 0 3px rgba(20,184,166,.10) !important;
}

/* ---------------------------------------------------------
   TABLES
--------------------------------------------------------- */

html body:not(.dark) .table-panel,
html body:not(.dark) .table-wrap{
  border:1px solid var(--svs-border) !important;
  border-radius:var(--svs-radius-md) !important;
  background:var(--svs-surface) !important;
  overflow:auto;
}

html body:not(.dark) table{
  color:var(--svs-text-soft);
}

html body:not(.dark) table thead th{
  color:#5c7086;
  font-weight:750;
  background:#f7fafc;
  border-bottom:1px solid var(--svs-border) !important;
}

html body:not(.dark) table tbody td{
  border-bottom-color:#edf2f6 !important;
}

html body:not(.dark) table tbody tr{
  transition:background .12s ease;
}

html body:not(.dark) table tbody tr:hover{
  background:#f7fcfb !important;
}

/* ---------------------------------------------------------
   STATUS SYSTEM
--------------------------------------------------------- */

html body:not(.dark) .status-badge,
html body:not(.dark) .status-pill,
html body:not(.dark) .ar-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px !important;
  font-weight:800 !important;
  border:1px solid transparent;
  white-space:nowrap;
}

html body:not(.dark) .status-badge.done,
html body:not(.dark) .status-pill.done,
html body:not(.dark) .status-badge.success,
html body:not(.dark) .status-pill.success{
  background:var(--svs-green-soft) !important;
  color:#087856 !important;
  border-color:#c8eadc !important;
}

html body:not(.dark) .status-badge.progress,
html body:not(.dark) .status-pill.progress,
html body:not(.dark) .status-badge.processing,
html body:not(.dark) .status-pill.processing{
  background:var(--svs-blue-soft) !important;
  color:#2c5eb9 !important;
  border-color:#d5e3fb !important;
}

html body:not(.dark) .status-badge.waiting,
html body:not(.dark) .status-pill.waiting,
html body:not(.dark) .status-badge.warning,
html body:not(.dark) .status-pill.warning{
  background:var(--svs-amber-soft) !important;
  color:#9a6509 !important;
  border-color:#f1dfb5 !important;
}

html body:not(.dark) .status-badge.danger,
html body:not(.dark) .status-pill.danger,
html body:not(.dark) .status-badge.issue,
html body:not(.dark) .status-pill.issue{
  background:var(--svs-red-soft) !important;
  color:#bd3f4b !important;
  border-color:#efcbd0 !important;
}

html body:not(.dark) .status-badge.review,
html body:not(.dark) .status-pill.review,
html body:not(.dark) .status-badge.audit,
html body:not(.dark) .status-pill.audit{
  background:var(--svs-purple-soft) !important;
  color:#6845ca !important;
  border-color:#ddd2fa !important;
}

/* F15.20.17+ system terminal duplicate state. */
html body:not(.dark) .status-badge.superseded,
html body:not(.dark) .status-pill.superseded,
html body:not(.dark) [data-status="SUPERSEDED"] .status-badge,
html body:not(.dark) [data-status="SUPERSEDED"] .status-pill{
  background:var(--svs-gray-soft) !important;
  color:#64748b !important;
  border-color:#dbe3ea !important;
}

/* Existing left-row semantic accent, softened. */
html body:not(.dark) .table-panel tbody tr.row-done td:first-child{
  border-left-color:var(--svs-green) !important;
}

html body:not(.dark) .table-panel tbody tr.row-waiting td:first-child{
  border-left-color:var(--svs-amber) !important;
}

html body:not(.dark) .table-panel tbody tr.row-progress td:first-child{
  border-left-color:#7890a5 !important;
}

/* ---------------------------------------------------------
   NOTIFICATIONS
--------------------------------------------------------- */

html body:not(.dark) .notification-panel{
  background:#fff !important;
  border:1px solid var(--svs-border) !important;
  border-radius:var(--svs-radius-lg) !important;
  box-shadow:var(--svs-shadow-lg) !important;
}

html body:not(.dark) .notification-item:hover{
  background:var(--svs-surface-hover) !important;
}

/* ---------------------------------------------------------
   MODALS / DRAWERS
--------------------------------------------------------- */

html body:not(.dark) .modal-card,
html body:not(.dark) .drawer,
html body:not(.dark) .drawer-panel,
html body:not(.dark) .mh-center-card{
  background:#fff !important;
  border-color:var(--svs-border) !important;
  box-shadow:var(--svs-shadow-lg) !important;
}

html body:not(.dark) .mh-center-card{
  border-radius:var(--svs-radius-xl) !important;
}

/* ---------------------------------------------------------
   AUDIT / ACTIVITY
--------------------------------------------------------- */

html body:not(.dark) .audit-log-item{
  border-color:var(--svs-border) !important;
  border-radius:var(--svs-radius-md) !important;
  background:#fff;
}

html body:not(.dark) .audit-log-item:hover{
  background:#f8fcfb !important;
}

/* ---------------------------------------------------------
   SCROLLBARS
--------------------------------------------------------- */

html body:not(.dark) *{
  scrollbar-width:thin;
  scrollbar-color:#cbd8e2 transparent;
}

html body:not(.dark) *::-webkit-scrollbar{
  width:8px;
  height:8px;
}

html body:not(.dark) *::-webkit-scrollbar-thumb{
  background:#cad8e2;
  border-radius:999px;
}

html body:not(.dark) *::-webkit-scrollbar-track{
  background:transparent;
}

/* ---------------------------------------------------------
   RESPONSIVE FOUNDATION
--------------------------------------------------------- */

@media(max-width:900px){
  html body:not(.dark) .panel,
  html body:not(.dark) .card{
    border-radius:var(--svs-radius-md) !important;
  }
}

@media(max-width:700px){
  html body:not(.dark) .panel-header{
    align-items:flex-start;
  }

  html body:not(.dark) .button{
    min-height:38px;
  }
}

/*
============================================================
END F15.21.0
============================================================
*/