/* Sarvam Sentinel — Skand-sarvam theme
 * Near-black ink on white, soft dual radial wash, serif headings over a clean
 * sans body, mono labels, and a small set of card / pill / state primitives.
 * Built to sit on top of Bootstrap (we override its look via these tokens).
 *
 * Proprietary fonts (Season Mix / Matter / Matter Mono) are listed first and
 * fall back to the agreed Google families (Fraunces / Inter / IBM Plex Mono).
 */

:root {
  /* ink + surface (space-separated RGB triples -> rgb(var(--token) / a)) */
  --ink: 20 20 20;
  --ink2: 102 102 102;
  --ink3: 153 153 153;
  --ink4: 179 179 179;
  --border: 235 235 235;
  --border2: 225 225 225;
  --card: 255 255 255;
  --surface: 250 250 250;
  --black: 26 26 26;

  /* state families — bg / mid / deep */
  --green: 110 163 53;   --green-d: 56 84 24;   --green-bg: 242 248 235;
  --red: 184 21 20;      --red-d: 140 18 18;    --red-bg: 253 231 226;
  --indigo: 66 80 213;                          --indigo-bg: 232 239 252;
  --yellow: 162 114 36;                         --yellow-bg: 255 248 230;

  /* accent — Sarvam orange */
  --accent: 230 101 27;  --accent-d: 180 70 15; --accent-bg: 254 237 230;
  --accent-bright: 240 120 60;

  /* fonts */
  --season: "Season Mix", "Fraunces", Georgia, serif;
  --matter: "Matter", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Matter Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shadows */
  --l1: 0 1px 2px rgb(20 20 20 / .03), 0 8px 32px rgb(20 20 20 / .04);
  --l2: 0 2px 6px rgb(20 20 20 / .05), 0 16px 48px rgb(20 20 20 / .07);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--matter);
  color: rgb(var(--ink));
  font-size: 16px;
  line-height: 1.5;
  background:
    radial-gradient(120% 80% at 100% 0%, rgb(var(--accent-bg) / .5) 0%, transparent 42%),
    radial-gradient(100% 70% at 0% 100%, rgb(var(--green-bg) / .45) 0%, transparent 46%),
    #fff;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Type ---------- */
h1, h2, h3, .season {
  font-family: var(--season);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.06;
  color: rgb(var(--ink));
  margin: 0 0 .4em;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }

.text-ink2 { color: rgb(var(--ink2)); }
.text-ink3 { color: rgb(var(--ink3)); }

a { color: rgb(var(--accent-d)); text-decoration: none; }
a:hover { color: rgb(var(--accent)); text-decoration: underline; }

/* Signature mono kicker: uppercase label + trailing hairline rule */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: rgb(var(--ink2));
  margin-bottom: 1rem;
}
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(var(--border2));
}

code, .mono {
  font-family: var(--mono);
  background: rgb(var(--surface));
  padding: 2px 7px;
  border-radius: 6px;
  font-size: .86em;
  color: rgb(var(--ink));
  word-break: break-all;
}

/* ---------- Layout shell ---------- */
.app {
  display: grid;
  grid-template-columns: 256px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: rgb(var(--black));
  color: #fff;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--season);
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.brand i { color: rgb(var(--accent-bright)); font-size: 1.4rem; }
.brand-sub {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .62rem;
  color: rgb(255 255 255 / .5);
  margin-bottom: 26px;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: rgb(255 255 255 / .72);
  font-size: .95rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.side-nav a i { font-size: 1.05rem; width: 18px; text-align: center; }
.side-nav a:hover { background: rgb(255 255 255 / .08); color: #fff; text-decoration: none; }
.side-nav a.active {
  background: rgb(var(--accent) / .18);
  color: #fff;
  box-shadow: inset 2px 0 0 rgb(var(--accent-bright));
}
.side-foot { margin-top: auto; padding-top: 22px; }
.side-user {
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .82rem;
  color: rgb(255 255 255 / .8);
}
.side-user .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--green)); display: inline-block; margin-right: 6px;
}
.side-user a { color: rgb(var(--accent-bright)); }

/* min-width:0 lets this grid item shrink below its content's min-content, so wide
   tables scroll inside their .table-wrap card instead of widening the whole page. */
.main { padding: 36px 40px 64px; max-width: 1320px; min-width: 0; }
.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: 2rem; margin-bottom: 6px; }
.page-head p { color: rgb(var(--ink2)); margin: 0; }

@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: column; }
  .main { padding: 24px 18px 48px; }
}

/* ---------- sb card ---------- */
.sb {
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
  border-radius: 20px;
  padding: 26px;
  box-shadow: var(--l1);
}
.sb-tight { padding: 18px 20px; }
.sb h2, .sb h3 { margin-top: 0; }
.sb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* ---------- Stat cards ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat {
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: var(--l1);
  position: relative;
}
.stat .label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  color: rgb(var(--ink2));
}
.stat .value {
  font-family: var(--season);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  margin-top: 10px;
  color: rgb(var(--ink));
}
.stat .sub { font-size: .8rem; color: rgb(var(--ink3)); margin-top: 6px; }
.stat .icn {
  position: absolute; top: 18px; right: 20px;
  font-size: 1.2rem; color: rgb(var(--ink4));
}
.stat.good .value { color: rgb(var(--green-d)); }
.stat.bad .value { color: rgb(var(--red-d)); }
.stat.warn .value { color: rgb(var(--yellow)); }
.stat.accent .value { color: rgb(var(--accent-d)); }

/* ---------- Pills / chips ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid rgb(var(--border2));
  background: rgb(var(--surface));
  color: rgb(var(--ink2));
  white-space: nowrap;
}
.pill .pdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.green  { background: rgb(var(--green-bg));  color: rgb(var(--green-d));  border-color: rgb(var(--green) / .3); }
.pill.red    { background: rgb(var(--red-bg));    color: rgb(var(--red-d));    border-color: rgb(var(--red) / .3); }
.pill.indigo { background: rgb(var(--indigo-bg)); color: rgb(var(--indigo));   border-color: rgb(var(--indigo) / .3); }
.pill.yellow { background: rgb(var(--yellow-bg)); color: rgb(var(--yellow));   border-color: rgb(var(--yellow) / .35); }
.pill.accent { background: rgb(var(--accent-bg)); color: rgb(var(--accent-d)); border-color: rgb(var(--accent) / .3); }

/* ---------- Tinted state boxes ---------- */
.state-box { border-radius: 16px; padding: 18px 20px; border: 1px solid; }
.state-box h3 { margin: 0 0 6px; font-size: 1.05rem; }
.state-box.green  { background: rgb(var(--green-bg));  border-color: rgb(var(--green) / .3); }
.state-box.green h3  { color: rgb(var(--green-d)); }
.state-box.red    { background: rgb(var(--red-bg));    border-color: rgb(var(--red) / .3); }
.state-box.red h3    { color: rgb(var(--red-d)); }
.state-box.indigo { background: rgb(var(--indigo-bg)); border-color: rgb(var(--indigo) / .3); }
.state-box.indigo h3 { color: rgb(var(--indigo)); }
.state-box.yellow { background: rgb(var(--yellow-bg)); border-color: rgb(var(--yellow) / .35); }
.state-box.yellow h3 { color: rgb(var(--yellow)); }
.state-box.accent { background: rgb(var(--accent-bg)); border-color: rgb(var(--accent) / .3); }
.state-box.accent h3 { color: rgb(var(--accent-d)); }

/* ---------- Dark inset (code / payload) ---------- */
.inset {
  background: rgb(var(--black));
  color: rgb(255 255 255 / .92);
  border-radius: 14px;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.55;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.inset .k { color: rgb(var(--accent-bright)); }

/* ---------- Buttons (override Bootstrap look) ---------- */
.btn {
  border-radius: 11px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: .9rem;
  border: 1px solid transparent;
  transition: filter .15s, background .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.btn:focus { box-shadow: 0 0 0 3px rgb(var(--accent) / .2); outline: none; }
.btn-primary { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: #fff; }
.btn-primary:hover { background: rgb(var(--accent-d)); border-color: rgb(var(--accent-d)); color: #fff; }
.btn-secondary { background: rgb(var(--ink)); border-color: rgb(var(--ink)); color: #fff; }
.btn-secondary:hover { filter: brightness(1.2); color: #fff; }
.btn-success { background: rgb(var(--green)); border-color: rgb(var(--green)); color: #fff; }
.btn-success:hover { background: rgb(var(--green-d)); color: #fff; }
.btn-danger { background: rgb(var(--red)); border-color: rgb(var(--red)); color: #fff; }
.btn-danger:hover { background: rgb(var(--red-d)); color: #fff; }
.btn-outline {
  background: transparent; border-color: rgb(var(--border2)); color: rgb(var(--ink));
}
.btn-outline:hover { background: rgb(var(--surface)); border-color: rgb(var(--ink3)); }
.btn-sm { padding: 5px 11px; font-size: .8rem; border-radius: 9px; }
.btn-ghost { background: transparent; border-color: transparent; color: rgb(var(--ink2)); padding: 5px 9px; }
.btn-ghost:hover { color: rgb(var(--ink)); background: rgb(var(--surface)); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Forms ---------- */
label, .form-label {
  font-size: .82rem; font-weight: 600; color: rgb(var(--ink2)); margin-bottom: 5px; display: block;
}
.form-control, .form-select, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=datetime-local], textarea, select {
  width: 100%;
  border: 1px solid rgb(var(--border2));
  border-radius: 11px;
  padding: 10px 13px;
  font-family: var(--matter);
  font-size: .92rem;
  color: rgb(var(--ink));
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgb(var(--accent) / .55);
  box-shadow: 0 0 0 3px rgb(var(--accent) / .14);
}
.field { margin-bottom: 16px; }
.field .hint { font-size: .76rem; color: rgb(var(--ink3)); margin-top: 4px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
/* Keep rows on one line; the .table-wrap scrolls horizontally rather than letting
   long tokens (license keys, slugs, ids) break character-by-character. */
table.tbl th, table.tbl td { white-space: nowrap; }
table.tbl th {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .68rem;
  color: rgb(var(--ink2));
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgb(var(--border2));
  white-space: nowrap;
}
table.tbl td {
  padding: 13px 14px;
  border-bottom: 1px solid rgb(var(--border));
  vertical-align: middle;
  color: rgb(var(--ink));
}
table.tbl tbody tr:hover { background: rgb(var(--surface)); }
table.tbl tbody tr:last-child td { border-bottom: none; }
.empty {
  text-align: center; color: rgb(var(--ink3));
  padding: 40px 20px; font-size: .92rem;
}

/* ---------- Banners / alerts ---------- */
.banner {
  border-radius: 14px; padding: 14px 18px; border: 1px solid;
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.banner.yellow { background: rgb(var(--yellow-bg)); border-color: rgb(var(--yellow) / .35); color: rgb(var(--yellow)); }
.banner.red { background: rgb(var(--red-bg)); border-color: rgb(var(--red) / .3); color: rgb(var(--red-d)); }
.banner.green { background: rgb(var(--green-bg)); border-color: rgb(var(--green) / .3); color: rgb(var(--green-d)); }
.banner i { font-size: 1.25rem; }

/* ---------- Toasts (lightweight, no sound/animation gimmicks) ---------- */
#toasts { position: fixed; top: 18px; right: 18px; z-index: 1080; display: flex; flex-direction: column; gap: 10px; }
.toast-msg {
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border2));
  border-left: 4px solid rgb(var(--ink3));
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--l2);
  font-size: .88rem;
  max-width: 360px;
}
.toast-msg.success { border-left-color: rgb(var(--green)); }
.toast-msg.danger { border-left-color: rgb(var(--red)); }
.toast-msg.warning { border-left-color: rgb(var(--yellow)); }
.toast-msg.info { border-left-color: rgb(var(--indigo)); }

/* ---------- Modal (Bootstrap-compatible restyle) ---------- */
.modal-content {
  border: 1px solid rgb(var(--border));
  border-radius: 20px;
  box-shadow: var(--l2);
}
.modal-header, .modal-footer { border-color: rgb(var(--border)); }
.modal-title { font-family: var(--season); }

/* ---------- Utilities ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Grid items default to min-width:auto; reset so cards with wide tables/charts shrink. */
.grid-2 > *, .grid-3 > * { min-width: 0; }
/* Chart.js canvases carry an explicit pixel width; clamp so they never spill the card. */
canvas { max-width: 100%; }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.mt-0 { margin-top: 0; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.muted { color: rgb(var(--ink3)); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.w-100 { width: 100%; }
.truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Toolbar (filters above tables) ---------- */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.toolbar .grow { flex: 1; min-width: 220px; max-width: 460px; }
.toolbar .col { min-width: 150px; }

/* ---------- Sortable table headers ---------- */
table.tbl th.th-sort { cursor: pointer; user-select: none; }
table.tbl th.th-sort:hover { color: rgb(var(--ink)); }
table.tbl th.th-sort::after { content: "\2195"; opacity: .3; margin-left: 6px; }
table.tbl th.th-sort[data-dir="asc"]::after { content: "\2191"; opacity: .85; color: rgb(var(--accent-d)); }
table.tbl th.th-sort[data-dir="desc"]::after { content: "\2193"; opacity: .85; color: rgb(var(--accent-d)); }

/* ---------- Pager ---------- */
.tt-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.tt-count { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--ink2)); }
.tt-pages { display: flex; align-items: center; gap: 8px; }

/* ---------- Utilization bar ---------- */
.util { display: flex; align-items: center; gap: 8px; }
.util .pct { font-size: .78rem; color: rgb(var(--ink2)); min-width: 40px; }
.bar { height: 8px; width: 90px; border-radius: 999px; background: rgb(var(--surface)); border: 1px solid rgb(var(--border2)); overflow: hidden; }
.bar > span { display: block; height: 100%; background: rgb(var(--green)); }
.bar.warn > span { background: rgb(var(--yellow)); }
.bar.bad > span { background: rgb(var(--red)); }

/* grey/neutral pill (e.g. dormant containers) */
.pill.grey { background: rgb(var(--surface)); color: rgb(var(--ink3)); border-color: rgb(var(--border2)); }

/* ---------- Summary chips ---------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 12px;
  border: 1px solid rgb(var(--border)); background: rgb(var(--card));
  box-shadow: var(--l1); font-size: .85rem; color: rgb(var(--ink2));
}
.chip b { font-family: var(--season); font-size: 1.1rem; color: rgb(var(--ink)); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--ink4)); }
.chip .dot.green { background: rgb(var(--green)); }
.chip .dot.yellow { background: rgb(var(--yellow)); }
.chip .dot.red { background: rgb(var(--red)); }
.chip .dot.accent { background: rgb(var(--accent)); }

/* ---------- RBAC: role badges, admin nav, user controls ---------- */
.banner.blue { background: rgb(var(--indigo-bg)); border-color: rgb(var(--indigo) / .3); color: rgb(var(--indigo)); }

/* Role badge — compact, color-coded by privilege */
.role-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.role-badge.role-super_admin { background: rgb(var(--accent-bg)); color: rgb(var(--accent-d)); border-color: rgb(var(--accent) / .3); }
.role-badge.role-admin       { background: rgb(var(--green-bg));  color: rgb(var(--green-d));  border-color: rgb(var(--green) / .3); }
.role-badge.role-viewer      { background: rgb(var(--surface));   color: rgb(var(--ink3));     border-color: rgb(var(--border2)); }

/* Sidebar section divider above the admin-only links */
.side-nav-sep {
  margin: 14px 12px 6px; padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / .1);
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgb(255 255 255 / .4);
}

/* Sidebar user identity: keep long emails from blowing out the rail */
.side-user-id { display: flex; align-items: center; }
.side-user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Compact inline <select> used in the Users table action column */
.inline-select {
  height: 30px; padding: 2px 8px; font-size: .8rem;
  border: 1px solid rgb(var(--border)); border-radius: 8px;
  background: rgb(var(--card)); color: rgb(var(--ink)); vertical-align: middle;
}