/*
============================================================
SVS ERP — F15.21.1
GLOBAL SHELL + DASHBOARD REFINEMENT
Visual-only layer.
============================================================
*/

/* =========================================================
   APP WIDTH / PAGE RHYTHM
========================================================= */

html body:not(.dark) .main-content,
html body:not(.dark) .content-area,
html body:not(.dark) main{
  min-width:0;
}

html body:not(.dark) .page{
  padding-top:22px;
}

html body:not(.dark) .page > .page-header,
html body:not(.dark) .page > .executive-hero,
html body:not(.dark) .page > .staff-toolbar,
html body:not(.dark) .page > .calendar-toolbar,
html body:not(.dark) .page > .system-hero{
  margin-bottom:18px;
}

/* =========================================================
   SIDEBAR — PREMIUM ENTERPRISE SHELL
========================================================= */

html body:not(.dark) .sidebar{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(248,252,252,.98)
    ) !important;
}

html body:not(.dark) .sidebar-header,
html body:not(.dark) .brand,
html body:not(.dark) .sidebar-brand{
  border-bottom-color:#edf2f5 !important;
}

html body:not(.dark) .nav-item{
  position:relative;
  min-height:38px;
  margin:2px 7px;
  padding-top:8px;
  padding-bottom:8px;
  font-weight:650;
  letter-spacing:-.005em;
}

html body:not(.dark) .nav-item svg,
html body:not(.dark) .nav-item i{
  opacity:.72;
}

html body:not(.dark) .nav-item.active{
  font-weight:760;
}

html body:not(.dark) .nav-item.active::after{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 8px 8px 0;
  background:linear-gradient(
    180deg,
    #14b8a6,
    #0ea5e9
  );
}

html body:not(.dark) .nav-item.active svg,
html body:not(.dark) .nav-item.active i{
  opacity:1;
}

/* =========================================================
   TOP BAR
========================================================= */

html body:not(.dark) .topbar{
  min-height:64px;
  padding-top:9px;
  padding-bottom:9px;
}

html body:not(.dark) .topbar input,
html body:not(.dark) .topbar .search-input{
  background:#f8fafc !important;
  border-color:#e0e7ed !important;
  border-radius:11px !important;
}

html body:not(.dark) .topbar input:focus,
html body:not(.dark) .topbar .search-input:focus{
  background:#fff !important;
}

html body:not(.dark) .notification-button,
html body:not(.dark) .icon-button{
  border-radius:10px !important;
}

/* =========================================================
   PAGE HEADERS
========================================================= */

html body:not(.dark) .executive-hero,
html body:not(.dark) .staff-toolbar,
html body:not(.dark) .calendar-toolbar,
html body:not(.dark) .system-hero{
  min-height:58px;
}

html body:not(.dark) .executive-hero h2,
html body:not(.dark) .staff-toolbar h2,
html body:not(.dark) .calendar-toolbar h2,
html body:not(.dark) .system-hero h2{
  font-size:25px !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
  color:#102235 !important;
}

html body:not(.dark) .executive-hero p,
html body:not(.dark) .staff-toolbar p,
html body:not(.dark) .calendar-toolbar p,
html body:not(.dark) .system-hero p{
  margin-top:6px !important;
  color:#718397 !important;
  font-size:11px !important;
  line-height:1.45;
}

/* =========================================================
   DASHBOARD KPI GRID
========================================================= */

html body:not(.dark) #page-dashboard .executive-kpis,
html body:not(.dark) .executive-kpis{
  gap:12px !important;
  margin:18px 0 !important;
}

html body:not(.dark) #page-dashboard .executive-kpis article,
html body:not(.dark) .executive-kpis article{
  position:relative;
  overflow:hidden;
  min-height:104px;
  padding:16px 17px !important;
  border-top:1px solid var(--svs-border) !important;
  border-radius:15px !important;
  background:
    linear-gradient(180deg,#ffffff 0%,#fbfdfd 100%) !important;
  box-shadow:
    0 1px 2px rgba(15,34,53,.03),
    0 6px 18px rgba(15,34,53,.035) !important;
}

html body:not(.dark) #page-dashboard .executive-kpis article::before,
html body:not(.dark) .executive-kpis article::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg,#14b8a6,#38bdf8);
}

html body:not(.dark) #page-dashboard .executive-kpis article.warning::before,
html body:not(.dark) .executive-kpis article.warning::before{
  background:linear-gradient(90deg,#f59e0b,#fbbf24);
}

html body:not(.dark) #page-dashboard .executive-kpis article.danger::before,
html body:not(.dark) .executive-kpis article.danger::before{
  background:linear-gradient(90deg,#ef5965,#fb7185);
}

html body:not(.dark) #page-dashboard .executive-kpis article span,
html body:not(.dark) .executive-kpis article span{
  color:#74869a !important;
  font-size:8px !important;
  font-weight:850 !important;
  letter-spacing:.055em !important;
}

html body:not(.dark) #page-dashboard .executive-kpis article strong,
html body:not(.dark) .executive-kpis article strong{
  margin-top:7px !important;
  color:#102235 !important;
  font-size:27px !important;
  line-height:1 !important;
  letter-spacing:-.03em;
}

/* =========================================================
   DASHBOARD CONTENT GRID
========================================================= */

html body:not(.dark) #page-dashboard .executive-grid,
html body:not(.dark) .executive-grid{
  gap:14px !important;
}

html body:not(.dark) #page-dashboard .panel,
html body:not(.dark) #page-dashboard .card{
  border-radius:15px !important;
  border-color:#e1e9ef !important;
  box-shadow:
    0 1px 2px rgba(15,34,53,.025),
    0 5px 16px rgba(15,34,53,.028) !important;
}

html body:not(.dark) #page-dashboard .panel-header{
  min-height:54px;
  padding-top:13px;
  padding-bottom:13px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.98),
    rgba(250,252,253,.95)
  );
}

html body:not(.dark) #page-dashboard .panel-header h2,
html body:not(.dark) #page-dashboard .panel-header h3{
  font-size:13px !important;
  font-weight:800 !important;
  color:#152a3d !important;
}

html body:not(.dark) #page-dashboard .panel-header p{
  margin-top:3px;
  font-size:9px !important;
}

/* =========================================================
   ANNOUNCEMENTS / PEOPLE
========================================================= */

html body:not(.dark) .svs-people-list{
  background:#fff;
}

html body:not(.dark) .svs-person-row{
  transition:background .14s ease;
}

html body:not(.dark) .svs-person-row:hover{
  background:#f7fcfb;
}

html body:not(.dark) .svs-person-avatar{
  border:1px solid #dfe8ee !important;
  box-shadow:0 2px 7px rgba(15,34,53,.055);
}

html body:not(.dark) .svs-person-copy strong{
  color:#20374b;
  font-weight:760;
}

html body:not(.dark) .svs-person-copy span{
  color:#7a8ba0 !important;
}

html body:not(.dark) .svs-date-tile{
  background:#fff2f5 !important;
  border:1px solid #f5d8df;
}

html body:not(.dark) .svs-anniversary-years{
  padding:4px 7px;
  border-radius:999px;
  background:#f4f0ff;
  color:#7052ca !important;
}

/* =========================================================
   TEAM PERFORMANCE
========================================================= */

html body:not(.dark) .performance-card{
  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

html body:not(.dark) .performance-card:hover{
  transform:translateY(-1px);
  border-color:#cfe6e3 !important;
  box-shadow:0 8px 22px rgba(15,34,53,.06) !important;
}

html body:not(.dark) .performance-head strong{
  color:#20374b;
  font-weight:800;
}

html body:not(.dark) .performance-progress{
  height:6px !important;
  background:#edf3f6 !important;
}

html body:not(.dark) .performance-progress i{
  background:linear-gradient(
    90deg,
    #14b8a6,
    #0ea5e9
  ) !important;
}

/* =========================================================
   DASHBOARD CHARTS
========================================================= */

html body:not(.dark) .executive-chart{
  padding:26px 4px 4px;
}

html body:not(.dark) .exec-bar{
  background:linear-gradient(
    180deg,
    #2dd4bf 0%,
    #0ea5e9 100%
  ) !important;
  box-shadow:0 4px 10px rgba(14,165,233,.10);
}

html body:not(.dark) .exec-bar span{
  color:#5d7186;
  font-weight:700;
}

/* =========================================================
   DASHBOARD PORTFOLIO CARDS
========================================================= */

html body:not(.dark) .client-portfolio-grid{
  gap:10px !important;
}

html body:not(.dark) .client-portfolio-grid article{
  background:#fff !important;
  border-color:#e2e9ef !important;
  border-radius:12px !important;
  transition:
    background .14s ease,
    border-color .14s ease;
}

html body:not(.dark) .client-portfolio-grid article:hover{
  background:#f7fcfb !important;
  border-color:#cce3df !important;
}

/* =========================================================
   GLOBAL TABLE REFINEMENT
========================================================= */

html body:not(.dark) .table-panel{
  box-shadow:0 2px 12px rgba(15,34,53,.025) !important;
}

html body:not(.dark) .table-panel table{
  font-size:10px;
}

html body:not(.dark) .table-panel thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f8fafc !important;
  text-transform:uppercase;
  letter-spacing:.035em;
  font-size:8px !important;
  font-weight:820;
}

html body:not(.dark) .table-panel tbody td{
  padding-top:10px;
  padding-bottom:10px;
}

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

/* =========================================================
   STATUS PILLS — MORE COMPACT
========================================================= */

html body:not(.dark) .status-badge,
html body:not(.dark) .status-pill{
  min-height:22px;
  padding:4px 8px !important;
  font-size:8px !important;
  line-height:1.1;
  letter-spacing:.005em;
}

/* =========================================================
   FILTER / TOOLBAR TREATMENT
========================================================= */

html body:not(.dark) .filter-panel,
html body:not(.dark) .audit-filter-panel{
  background:#fff !important;
  border:1px solid #e0e8ee !important;
  border-radius:13px !important;
  box-shadow:0 1px 4px rgba(15,34,53,.025);
}

html body:not(.dark) .field > span{
  color:#64788d;
  font-weight:700;
}

/* =========================================================
   NOTIFICATIONS
========================================================= */

html body:not(.dark) .notification-header{
  background:#fbfdfd;
}

html body:not(.dark) .notification-count{
  box-shadow:0 0 0 2px #fff;
}

html body:not(.dark) .notification-item strong{
  color:#20374b;
}

/* =========================================================
   MODAL / WORKSPACE SURFACE
========================================================= */

html body:not(.dark) .mh-center-modal{
  background:rgba(16,34,53,.38) !important;
  backdrop-filter:blur(5px) !important;
}

html body:not(.dark) .mh-center-card{
  border:1px solid rgba(203,216,226,.92) !important;
}

/* =========================================================
   EMPTY / LOW-EMPHASIS STATES
========================================================= */

html body:not(.dark) .preview-empty,
html body:not(.dark) .google-access-empty{
  background:#fafcfd;
  border-color:#dce6ed !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){
  html body:not(.dark) .executive-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:900px){
  html body:not(.dark) .executive-grid{
    grid-template-columns:1fr !important;
  }

  html body:not(.dark) .client-portfolio-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:650px){
  html body:not(.dark) .executive-kpis,
  html body:not(.dark) .client-portfolio-grid{
    grid-template-columns:1fr !important;
  }

  html body:not(.dark) .executive-hero h2,
  html body:not(.dark) .staff-toolbar h2,
  html body:not(.dark) .calendar-toolbar h2,
  html body:not(.dark) .system-hero h2{
    font-size:21px !important;
  }
}

/*
============================================================
END F15.21.1
============================================================
*/