
/* === LMS Pro Compact Theme — v6 (consolidated: Navbar + Tables + Headings) === */
:root{
  --bg:#0b1020; --panel:#11162a; --panel-2:#0e1427; --text:#dce3f1; --muted:#95a1bd;
  --primary:#6ea8fe; --accent:#b48bff; --ok:#5cd08d; --warn:#ffd981; --bad:#ff7b7b;
  --radius:14px; --radius-sm:10px; --gap:10px; --shadow:0 6px 18px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.18);
  --thead-bg: rgba(255,255,255,.08);
  --thead-fg: #f3f6ff;
  --title-fg: #ecf2ff;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --panel:#ffffff; --panel-2:#ffffff; --text:#0b1020; --muted:#64718d;
    --primary:#2d6cdf; --accent:#6d42d8; --ok:#1ba97f; --warn:#bf8f00; --bad:#cc3b3b;
    --thead-bg:#eef2fa; --thead-fg:#0b1020; --title-fg:#0b1020;
  }
}

/* BACKGROUND & TYPOGRAPHY */
body.app-compact{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(110,168,254,.16), transparent 60%),
              radial-gradient(900px 500px at 100% 10%, rgba(180,139,255,.14), transparent 70%), var(--bg);
  color:var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.app-compact .container, body.app-compact .container-fluid{ max-width: 1100px; }
h1,h2,h3,h4{ color: var(--title-fg); font-weight: 700; letter-spacing:.2px; }

/* NAVBAR — high contrast always */
.navbar.navbar-dark{
  background: linear-gradient(180deg, rgba(7,10,22,.96), rgba(7,10,22,.92)) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.navbar .navbar-brand{ color:#fff; letter-spacing:.2px; font-weight:600; }
.navbar .nav-link{ color: rgba(255,255,255,.88) !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color:#fff !important; }
.navbar .nav-link.active{ color:#fff !important; position:relative; }
.navbar .nav-link.active::after{
  content:""; position:absolute; left:.6rem; right:.6rem; bottom:.35rem;
  height:2px; background:linear-gradient(90deg, var(--primary), var(--accent)); border-radius:2px;
}
.dropdown-menu{
  background: #0f1426; border:1px solid rgba(255,255,255,.12); border-radius:12px; box-shadow: var(--shadow);
}
.dropdown-menu .dropdown-item{ color:#dfe6f6; }
.dropdown-menu .dropdown-item:hover{ background: rgba(255,255,255,.06); color:#fff; }

/* CARDS */
.card, .card-compact{
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  color:var(--text);
}
.card .card-body{ padding:14px 16px; }

/* TABLES — readable headers on light/dark, zebra, hover */
.table{ color:var(--text); font-size:.94rem; background: transparent; border-collapse: separate; border-spacing: 0; }
.table thead{ background: var(--thead-bg) !important; }
.table thead th{
  color: var(--thead-fg) !important; font-weight:600; letter-spacing:.28px; text-transform: none;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.table tbody td, .table tbody th{ border-top: 1px solid rgba(0,0,0,.05); }
@media (prefers-color-scheme: dark){
  .table thead th{ border-bottom-color: rgba(255,255,255,.10); }
  .table tbody td, .table tbody th{ border-top-color: rgba(255,255,255,.06); }
}
.table-striped>tbody>tr:nth-of-type(odd){ background-color: rgba(255,255,255,.02) !important; }
.table-striped>tbody>tr:nth-of-type(even){ background-color: transparent !important; }
.table-hover tbody tr:hover{ background-color: rgba(110,168,254,.10) !important; }
.card .table{ border-radius: 12px; overflow: hidden; }
.card .table thead th:first-child{ border-top-left-radius: 12px; }
.card .table thead th:last-child{ border-top-right-radius: 12px; }
.table thead th a, .table thead th .badge, .table thead th .btn{
  background: transparent !important; box-shadow: none !important; border:0 !important; padding:0 !important; color:var(--thead-fg) !important;
}
.table a{ color:var(--primary); text-decoration:none; }
.table a:hover{ text-decoration:underline; }
.table-sm> :not(caption)>*>*{ padding: .44rem .66rem; }
td.text-end, th.text-end{ text-align:right; }

/* FORMS */
.form-control, .form-select{
  border-radius: var(--radius-sm); background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); color:var(--text);
}
.form-control::placeholder{ color: var(--muted); }
.compact-form .form-control, .compact-form .form-select{
  height: calc(1.9rem + 2px); padding: .32rem .6rem; font-size:.9rem;
}

/* BUTTONS */
.btn{ border-radius: 12px; }
.btn-primary{ background: linear-gradient(180deg, var(--primary), #3f7df5); border: none; color:#fff; }
.btn-primary:hover{ filter: brightness(1.02); }
.btn-outline-secondary{ border-color: rgba(255,255,255,.28); color: var(--muted); }
.btn-outline-secondary:hover{ background: rgba(255,255,255,.08); color:#fff; }
.btn-outline-primary{ border-color: var(--primary); color: var(--primary); }
.btn-outline-primary:hover{ background: rgba(110,168,254,.15); }
.btn-danger{ background: linear-gradient(180deg, #ff7b7b, #df4a4a); border:none; }
.btn-danger:hover{ filter:brightness(1.02); }
.btn-soft{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#dfe6f6; }
.btn-soft:hover{ background: rgba(255,255,255,.12); color:#fff; }
.btn-ghost{ background: transparent; border:1px solid rgba(255,255,255,.22); color:#cfd7ee; }
.btn-ghost:hover{ background: rgba(255,255,255,.08); color:#fff; }

/* MISC */
.text-muted{ color: var(--muted)!important; }
small, .small{ color: var(--muted); }
hr{ border-color: rgba(255,255,255,.10); opacity: 1; }
.alert{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--text); }

/* CHIPS */
.chip{ display:inline-block; padding:.16rem .54rem; font-size:.74rem; border-radius:999px;
  background:rgba(255,255,255,.1); color:var(--text); }
.chip-success{ background: rgba(27,169,127,.18); color: #32d29f; }
.chip-info{ background: rgba(110,168,254,.18); color: var(--primary); }
.chip-muted{ background: rgba(255,255,255,.10); color: var(--muted); }

/* SPARK CHART */
.chart-spark{ width:100%; height:90px; }
