/* === Streeser NewUI v1 (2025-08-12) ===
   - Modern dark-first theme with light toggle
   - Subtle 3D depth, glass panels, micro-interactions
   - Fully responsive, respects prefers-reduced-motion
   - Works on top of existing Bootstrap markup
*/
:root {
  --bg: #0b0f14;
  --bg-soft: #0e141b;
  --surface: rgba(255,255,255,0.06);
  --text: #e6eef7;
  --muted: #9fb2c8;
  --brand: #000000;
  --brand-2: #393939;
  --accent: #757575;
  --danger: #ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --radius: 18px;
  --blur: 14px;
}
[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-soft: #ffffff;
  --surface: rgba(0,0,0,0.06);
  --text: #0e1420;
  --muted: #4a5568;
  --brand: #2453ff;
  --brand-2: #8a2be2;
  --accent: #0ea5a5;
  --danger: #d90429;
  --shadow: 0 8px 24px rgba(2,10,30,0.12);
}

html, body {
  background: radial-gradient(1200px 800px at 80% -10%, rgba(106, 227, 255, 0.08), transparent 60%),
              radial-gradient(600px 400px at 10% 10%, rgba(138, 125, 255, 0.10), transparent 60%),
              var(--bg);
  color: var(--text);
  min-height: 100%;
}
/* Keep Bootstrap layout but re-skin */
.navbar, .navbar-default, .navbar-inverse {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.navbar a, .navbar-brand, .navbar-nav>li>a { color: var(--text) !important; }
.navbar .navbar-brand { font-weight: 700; letter-spacing: .3px; }

/* Cards & panels */
.panel, .panel-default, .card, .well, .list-group, .modal-content, .dropdown-menu {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  color: var(--text);
}
.table {
  color: var(--text);
  background: transparent;
}
.table > thead > tr > th { border-color: rgba(255,255,255,0.15); color: var(--muted); }
.table > tbody > tr > td { border-color: rgba(255,255,255,0.08); }
hr { border-color: rgba(255,255,255,0.12); }

/* Buttons */
.btn {
  border-radius: calc(var(--radius) - 8px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  color: var(--text) !important;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,0.28); }
.btn-primary, .btn-success, .btn-info {
  background: radial-gradient(120% 100% at 80% -10%, var(--brand), var(--brand-2)) !important;
  border-color: transparent !important;
}
.btn-success { background: radial-gradient(120% 100% at 80% -10%, var(--accent), var(--brand)) !important; }
.btn-danger { background: radial-gradient(120% 100% at 80% -10%, var(--danger), #ff8a8a) !important; }

/* Inputs */
input, select, textarea {
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.15));
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text);
  border-radius: calc(var(--radius) - 10px);
  box-shadow: inset 0 6px 12px rgba(0,0,0,0.15);
}
input::placeholder, textarea::placeholder { color: rgba(230,238,247,0.55); }

/* 3D tilt on cards */
.card, .panel, .well, .list-group {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.card:hover, .panel:hover, .well:hover {
  transform: translateZ(0) rotateX(1deg) rotateY(-1deg);
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.65,.3,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Fixed animated background canvas */
#st-3d-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Toggles & chips */
.st-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  user-select: none;
}
.st-chip { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }

/* Utility */
.glass { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(var(--blur)); }
.gradient-text { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hidden-motion * { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* === NewUI v2.2 — Cohesive palette & layout blend === */
:root {
  --bg-0: #0b1016;   /* page */
  --bg-1: #0f1520;   /* content */
  --bg-2: #001116;   /* components */
  --stroke: rgba(255,255,255,.08);
  --stroke-strong: rgba(255,255,255,.14);
  --shadow-strong: 0 16px 44px rgba(0,0,0,.45);
}
[data-theme="light"] {
  --bg-0: #f4f6fa;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --stroke: rgba(2,10,30,.08);
  --stroke-strong: rgba(2,10,30,.12);
  --shadow-strong: 0 14px 36px rgba(2,10,30,.12);
}

/* Page + content wrapper */
html, body { background: var(--bg-0); }
body, .container, .container-fluid, #main, .main, .page-content, .content, .content-wrapper {
  background: var(--bg-1) !important;
}

/* Top navbar unified with components */
.navbar, .navbar-default, .navbar-inverse {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)), var(--bg-2) !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: var(--shadow-strong);
}

/* Sidebar (robust selector to catch common names) */
[class*="sidebar"], [id*="sidebar"], .side, .side-nav, .nav-side, .left-nav, .navmenu {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--bg-2) !important;
  border-right: 1px solid var(--stroke) !important;
}
[class*="sidebar"] .nav>li>a,
.side-nav .nav>li>a,
.navmenu .nav>li>a {
  color: var(--muted) !important;
}
[class*="sidebar"] .nav>li.active>a,
[class*="sidebar"] .nav>li>a:focus,
[class*="sidebar"] .nav>li>a:hover {
  color: var(--text) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-left: 2px solid var(--brand);
}

/* Panels/cards/tables unified */
.panel, .panel-default, .card, .well, .list-group, .modal-content, .dropdown-menu {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), var(--bg-2) !important;
  border: 1px solid var(--stroke-strong) !important;
  box-shadow: var(--shadow-strong);
}

/* Headings & breadcrumbs */
.page-header, .breadcrumb, .panel-heading {
  background: transparent !important;
  border-color: var(--stroke) !important;
  color: var(--muted) !important;
}

/* Stat cards harmonize */
.stat, .metric, .info-box, .small-box {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--bg-2) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--radius) !important;
}

/* Inputs consistent on bg-2 */
input, select, textarea { background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.18)), var(--bg-2); }

/* Section separators */
hr { border-color: var(--stroke) !important; }

/* Make subtle background texture consistent (remove overly bright gradients) */
html, body {
  background-image:
    radial-gradient(1200px 800px at 80% -10%, rgba(93,243,255,.05), transparent 60%),
    radial-gradient(800px 500px at 10% 20%, rgba(138,125,255,.06), transparent 60%);
}

/* === NewUI v2.3 — Header Blend === */
:root {
  --header-bg: #020d13;          /* header and surfaces align */
  --header-shadow: 0 10px 28px rgba(0,0,0,.28);
}
[data-theme="light"] {
  --header-bg: #ffffff;
  --header-shadow: 0 8px 20px rgba(2,10,30,.10);
}

/* Make navbar color the anchor tone */
.navbar, .navbar-default, .navbar-inverse {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)), var(--header-bg) !important;
  border-color: var(--stroke) !important;
  box-shadow: var(--header-shadow) !important;
}

/* Bring page and content to the same family as header */
html, body { background: var(--bg-0) !important; }
body, .container, .container-fluid, #main, .main, .page-content, .content, .content-wrapper {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)), var(--header-bg) !important;
}

/* Cards / panels slightly lifted from the same tone */
.panel, .panel-default, .card, .well, .list-group, .modal-content, .dropdown-menu {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), var(--header-bg) !important;
  border: 1px solid var(--stroke-strong) !important;
}

/* Sidebar aligns to header tone (no abrupt seam) */
[class*="sidebar"], [id*="sidebar"], .side, .side-nav, .nav-side, .left-nav, .navmenu {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--header-bg) !important;
  border-right: 1px solid var(--stroke) !important;
}

/* Reduce global top glows so header and body fuse better */
html, body {
  background-image: none !important;
}

/* Gentle section separators */
.page-header, .breadcrumb, .panel-heading, hr {
  background: transparent !important;
  border-color: var(--stroke) !important;
}