/* =====================================================================
   AssetSphere — theming
   Brand tokens below are DEFAULTS. The active theme is injected by the
   layout as a :root override (data-driven from app_setting('ui_theme')),
   so changing the theme in Administration → Appearance re-skins the whole
   app without touching this file.
   Semantic status colours stay constant across themes for readability.
   ===================================================================== */
:root {
  --as-accent: #5E3A5D;
  --as-accent-dark: #472C46;
  --as-soft: #F0E6EF;
  --as-paper: #F8F4F7;
  --as-ink: #2C1F2C;
  --as-muted: #7c6f7b;
  --as-line: #ECE2EB;
  --as-grad-a: #6E2C6C;
  --as-grad-b: #472C46;
  --as-success: #3E7C4F;
  --as-warn: #B07818;
  --as-danger: #B0382F;
  --as-sidebar-w: 64px;   /* icon rail */
  --as-fly-w: 236px;      /* flyout panel */
}

html, body { height: 100%; }
body {
  background: var(--as-paper);
  color: var(--as-ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  font-size: .925rem;
}

/* ---------- Sidebar ---------- */
/* ---------- Icon rail ---------- */
.as-rail {
  width: var(--as-sidebar-w);
  background: linear-gradient(180deg, var(--as-grad-a) 0%, var(--as-accent) 55%, var(--as-grad-b) 100%);
  color: #F6E7E2;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1046;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .6rem 0 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.as-rail::-webkit-scrollbar { display: none; }
.rail-brand {
  width: 40px; height: 40px;
  border-radius: .7rem;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: .7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.rail-brand:hover { background: rgba(255,255,255,.26); color: #fff; }
.rail-nav { display: flex; flex-direction: column; gap: .3rem; align-items: center; width: 100%; }
.rail-btn {
  width: 44px; height: 44px;
  border: 0;
  border-radius: .7rem;
  background: transparent;
  color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.12rem;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  flex-shrink: 0;
}
.rail-btn .rail-lbl { display: none; }
.rail-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.rail-btn.fly-on { background: rgba(255,255,255,.14); color: #fff; }
.rail-btn.active {
  background: rgba(255,255,255,.22);
  color: #fff;
}
.rail-btn.active::before {
  content: "";
  position: absolute;
  left: -10px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 3px;
  background: #fff;
}

/* ---------- Flyout panels (overlay, accordion) ---------- */
.as-fly {
  position: fixed;
  left: var(--as-sidebar-w);
  top: 0; bottom: 0;
  width: var(--as-fly-w);
  background: linear-gradient(180deg, var(--as-accent-dark) 0%, var(--as-grad-b) 100%);
  z-index: 1045;
  padding: .8rem .6rem 1rem;
  overflow-y: auto;
  box-shadow: 10px 0 28px rgba(0,0,0,.22);
  display: none;
}
.as-fly.open { display: block; }
.as-fly .fly-head {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
  font-weight: 700;
  padding: .35rem .65rem .7rem;
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: .5rem;
}
.as-fly .fly-head i { font-size: .95rem; color: rgba(255,255,255,.85); }
.as-fly .fly-link {
  color: #F3E2DC;
  border-radius: .5rem;
  padding: .48rem .65rem;
  font-size: .875rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  margin-bottom: 1px;
}
.as-fly .fly-link i { width: 1.1rem; text-align: center; font-size: .95rem; opacity: .85; }
.as-fly .fly-link:hover { background: rgba(255,255,255,.10); color: #fff; }
.as-fly .fly-link.active { background: rgba(255,255,255,.20); color: #fff; font-weight: 600; }
.as-fly .fly-group {
  font-size: .6rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  font-weight: 700;
  padding: .7rem .65rem .2rem;
}

.as-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1044;
  display: none;
}
.as-backdrop.show { display: block; }
@media (min-width: 992px) { .as-backdrop { display: none !important; } }

/* ---------- Main / topbar ---------- */
.as-main { margin-left: var(--as-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.as-topbar {
  background: #fff;
  border-bottom: 1px solid var(--as-line);
  padding: .55rem 1.1rem;
  position: sticky;
  top: 0;
  z-index: 1020;
}
.as-content { padding: 1.1rem 1.2rem 2rem; flex: 1; }
.page-title { font-size: 1.18rem; font-weight: 700; margin: 0; }
.page-sub { color: var(--as-muted); font-size: .8rem; }

/* Mobile: the rail (and its flyouts) become an off-canvas drawer behind the ☰ button */
@media (max-width: 991.98px) {
  .as-rail { transform: translateX(-100%); transition: transform .22s ease; }
  .as-rail.show { transform: translateX(0); }
  .as-fly.open { display: none; }               /* flyouts only visible while the drawer is out */
  .as-rail.show ~ .as-fly.open { display: block; }
  .as-main { margin-left: 0; }
}

/* ---------- Cards / KPI tiles ---------- */
.card { border: 1px solid var(--as-line); border-radius: .8rem; }
.card-header { background: #fff; border-bottom: 1px solid var(--as-line); font-weight: 600; }
.kpi-tile { background: #fff; border: 1px solid var(--as-line); border-radius: .8rem; padding: .9rem 1rem; height: 100%; }
.kpi-tile .kpi-icon {
  width: 40px; height: 40px; border-radius: .65rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--as-soft); color: var(--as-accent); font-size: 1.15rem;
}
.kpi-tile .kpi-value { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.kpi-tile .kpi-label { font-size: .76rem; color: var(--as-muted); }
a.kpi-tile { color: var(--as-ink); }
a.kpi-tile:hover { border-color: var(--as-accent); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.kpi-sparkbox { min-height: 36px; min-width: 110px; }

/* ---------- Buttons ---------- */
.btn-maroon { background: var(--as-accent); border-color: var(--as-accent); color: #fff; }
.btn-maroon:hover, .btn-maroon:focus { background: var(--as-accent-dark); border-color: var(--as-accent-dark); color: #fff; }
.btn-outline-maroon { border-color: var(--as-accent); color: var(--as-accent); }
.btn-outline-maroon:hover { background: var(--as-accent); color: #fff; }

/* ---------- Tables / DataTables ---------- */
.table thead th {
  background: var(--as-soft);
  color: var(--as-accent-dark);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--as-line) !important;
  white-space: nowrap;
}
.table td { vertical-align: middle; font-size: .875rem; }
div.dataTables_wrapper div.dataTables_filter input { margin-left: .4rem; }
.dt-buttons .btn { font-size: .78rem; }
.small-dot { font-size: .45rem; vertical-align: 1px; }

/* ---------- Forms ---------- */
.form-label { font-size: .78rem; font-weight: 600; color: var(--as-muted); margin-bottom: .25rem; }
.required::after { content: " *"; color: var(--as-danger); }
.select2-container .select2-selection--single { height: 38px; border-color: #ced4da; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--as-grad-a) 0%, var(--as-accent) 45%, var(--as-grad-b) 100%);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.auth-card { width: 100%; max-width: 420px; border-radius: 1rem; border: 0; box-shadow: 0 18px 50px rgba(60,20,12,.35); }
.auth-brand { color: var(--as-accent); font-weight: 800; letter-spacing: .01em; }

/* ---------- Matrix ---------- */
.matrix-table th.rot { font-size: .72rem; }
.matrix-table td, .matrix-table th { text-align: center; }
.matrix-table td:first-child, .matrix-table th:first-child { text-align: left; white-space: nowrap; }
.matrix-module td { background: var(--as-soft); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--as-accent-dark); }

/* ---------- Misc ---------- */
.badge-phase { background: var(--as-soft); color: var(--as-accent); font-weight: 600; }
.text-maroon { color: var(--as-accent) !important; }
.bg-soft { background: var(--as-soft) !important; }
.avatar-sm {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--as-soft); color: var(--as-accent);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.toast-container { z-index: 2000; }
pre.json-view { background: #2B2523; color: #F5E9E6; border-radius: .5rem; padding: .7rem .8rem; font-size: .78rem; max-height: 300px; overflow: auto; }

/* ---------- Kinetic Pulse (dashboard motion) ---------- */
.kpi-tile { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; position: relative; overflow: hidden; }
.kt-shimmer { position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  animation: as-sweep 3.4s ease-in-out infinite; }
@keyframes as-sweep { 0%, 55% { left: -60%; } 100% { left: 135%; } }
.as-pulsedot { width: 8px; height: 8px; border-radius: 50%; background: var(--as-warn); display: inline-block; position: relative; vertical-align: 1px; }
.as-pulsedot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--as-warn); animation: as-ripple 1.7s ease-out infinite; }
@keyframes as-ripple { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.feed-in { opacity: 0; animation: as-feedin .45s ease forwards; }
@keyframes as-feedin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Reports: breadcrumb, summary strip, filter chips ---------- */
.as-bc { font-size: .76rem; color: var(--as-muted); margin-bottom: .55rem; }
.as-bc a { color: var(--as-accent); text-decoration: none; font-weight: 600; }
.as-bc a:hover { text-decoration: underline; }
.as-bc i.bi-chevron-right { font-size: .58rem; margin: 0 .3rem; }
.rsum { border: 1px solid var(--as-line); border-radius: 10px; padding: .5rem .75rem; background: var(--as-soft); height: 100%; }
.rsum .v { font-weight: 800; font-size: 1.02rem; line-height: 1.15; color: var(--as-ink); }
.rsum .l { font-size: .64rem; color: var(--as-muted); letter-spacing: .04em; }
.fchip { display: inline-flex; align-items: center; gap: .32rem; background: var(--as-soft); color: var(--as-accent);
  font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .2rem .6rem; margin: 0 .3rem .3rem 0; border: 1px solid var(--as-line); }
.fchip i { cursor: pointer; font-size: .72rem; }
.fchip i:hover { color: var(--as-danger); }