/*
 SEMHOS V1 Professional+
 Premium Control Center Theme
*/
:root {
  --sp-bg:#07111f;
  --sp-panel:#0e2035;
  --sp-panel2:#112940;
  --sp-border:#24415d;
  --sp-text:#f0f7ff;
  --sp-muted:#aac2da;
  --sp-accent:#268bff;
  --sp-cyan:#31cbf5;
  --sp-green:#22d3a2;
  --sp-orange:#ffb65c;
  --sp-radius:16px;
}

html {
  scroll-behavior:smooth;
}

body {
  background:
    radial-gradient(
      ellipse 75% 40% at 75% -10%,
      rgba(22,104,190,.19),transparent
    ),
    var(--sp-bg) !important;
  color:var(--sp-text);
  font-family:Inter,system-ui,-apple-system,
    "Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Premium surfaces */
body :is(
 .card,.section-card,.metric,.metric-card,
 .stat-card,.panel,.widget
) {
  border:1px solid var(--sp-border);
  border-radius:var(--sp-radius);
  box-shadow:0 10px 32px rgba(0,0,0,.13);
}

body :is(.card,.section-card,.panel,.widget) {
  background-color:var(--sp-panel);
}

body :is(.card,.metric-card,.stat-card,.panel) {
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

@media (hover:hover) {
  body :is(.card,.metric-card,.stat-card,.panel):hover {
    border-color:#3a638a;
    box-shadow:0 14px 38px rgba(0,0,0,.2);
  }
}

/* Typography */
body h1,body h2,body h3 {
  color:#f5f9ff;
  letter-spacing:-.025em;
}

body h1 {
  font-weight:800;
}

body h2 {
  font-weight:750;
}

body :is(small,.muted,.subtle,.text-muted) {
  color:var(--sp-muted);
}

body a {
  transition:color .2s ease;
}

body a:hover {
  color:#65d4ff;
}

/* Side navigation */
body :is(.sidebar,.side-nav,aside.sidebar) {
  border-right:1px solid #1d3852;
  background:linear-gradient(
    180deg,#0d2036 0%,#091727 100%
  );
}

body :is(.sidebar,.side-nav) a {
  border-radius:11px;
  transition:background .2s,color .2s;
}

body :is(.sidebar,.side-nav) a:hover {
  background:rgba(45,137,255,.13);
  color:#fff;
}

body :is(.sidebar,.side-nav) a:is(
  .active,[aria-current="page"]
) {
  background:linear-gradient(
    110deg,#1262b5,#123b69
  );
  color:#fff;
  border-left:3px solid #36cafa;
}

/* Controls */
body :is(
 button,.btn,input:not([type="checkbox"]),
 select,textarea
) {
  border-radius:10px;
}

body :is(button,.btn) {
  transition:
    filter .18s ease,
    transform .18s ease;
}

@media (hover:hover) {
  body :is(button,.btn):hover {
    filter:brightness(1.12);
  }
}

body :is(
 input:not([type="checkbox"]),
 select,textarea
) {
  border:1px solid #35536e;
  color:#f2f7ff;
}

body :is(input,select,textarea,button,a):focus-visible {
  outline:2px solid #56c9ff;
  outline-offset:3px;
}

/* Data tables */
body table {
  border-collapse:separate;
  border-spacing:0;
}

body th {
  color:#b9d9f2;
  font-size:12px;
  font-weight:700;
  letter-spacing:.025em;
}

body td {
  color:#e5f0fb;
}

body :is(th,td) {
  border-bottom-color:#263f57;
}

body tbody tr {
  transition:background .2s ease;
}

body tbody tr:hover {
  background:rgba(41,124,205,.085);
}

/* Charts and the existing SEMHOS components */
body :is(
 #semhos-charts-v1,
 #semhos-insights-v1,
 #semhos-inventory-history-v1,
 #semhos-site-inventory-v1,
 #semhos-alert-center-v1
) {
  border:1px solid #2b5373 !important;
  border-radius:18px !important;
  box-shadow:0 18px 46px rgba(0,0,0,.16);
}

body :is(
 #semhos-charts-v1,
 #semhos-insights-v1,
 #semhos-inventory-history-v1
) h2 {
  font-weight:800;
  letter-spacing:-.03em;
}

body :is(
 #semhos-charts-v1,
 #semhos-insights-v1,
 #semhos-inventory-history-v1
) h3 {
  font-weight:750;
}

/* Scrollbars */
@supports selector(::-webkit-scrollbar) {
  body ::-webkit-scrollbar {
    width:9px;
    height:9px;
  }
  body ::-webkit-scrollbar-thumb {
    background:#31536d;
    border-radius:20px;
  }
  body ::-webkit-scrollbar-track {
    background:#0a1a2b;
  }
}

/* Mobile and tablet */
@media(max-width:768px) {
  body h1 {
    font-size:clamp(23px,6vw,32px);
    line-height:1.2;
  }

  body h2 {
    font-size:clamp(18px,5vw,24px);
    line-height:1.3;
  }

  body :is(
    #semhos-charts-v1,
    #semhos-insights-v1,
    #semhos-inventory-history-v1
  ) {
    padding:16px !important;
    border-radius:13px !important;
  }

  body :is(button,.btn,select) {
    min-height:40px;
  }

  body :is(.card,.metric-card,.stat-card) {
    box-shadow:0 7px 18px rgba(0,0,0,.13);
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}