/* ════════════════════════════════════════════════════════════════════
   SymposiON · tartarus.css   —  admin panel
   "Control room of the underworld." Load after theme-obsidian.css +
   mediterranean.css. Layout: a fixed left rail + a main column.
   Wrap the admin page in <div class="trt"> … </div>.
   ════════════════════════════════════════════════════════════════════ */
.trt {
  display: grid; grid-template-columns: 236px 1fr;
  min-height: 100vh; background: var(--sym-bg); color: var(--sym-fg);
  position: relative;
}
/* When .trt is placed directly on a .page element (e.g. #page-admin),
   .page.active { display: block } would clobber the grid layout.
   These two rules restore correct SPA visibility behaviour. */
.page.trt:not(.active) { display: none; }
.page.trt.active       { display: grid; }

/* ─── Rail ──────────────────────────────────────────────────────── */
.trt-rail {
  border-right: 1px solid var(--sym-hairline); padding: 24px 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sym-gold) 5%, transparent), transparent 40%);
}
.trt-brand { display: flex; align-items: center; gap: 11px; padding: 0 22px 22px;
  border-bottom: 1px solid var(--sym-hairline); margin-bottom: 14px; }
.trt-brand .sig { width: 30px; height: 30px; flex-shrink: 0; }
.trt-brand .nm  { font-family: var(--sym-font-serif); font-size: 20px; font-weight: 600; line-height: 1; }
.trt-brand .nm b{ color: var(--sym-terra); text-shadow: 0 0 12px rgba(224,132,86,.5); }
.trt-brand .sub { display: block; font-family: var(--sym-font-mono); font-size: 8px; letter-spacing: 2.4px; color: var(--sym-fg-muted); margin-top: 3px; }

.trt-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.trt-nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer;
  color: var(--sym-fg-muted); font-size: 13px; text-decoration: none;
  border-left: 2px solid transparent; transition: color .2s, background .2s, border-color .2s;
}
.trt-nav a:hover { color: var(--sym-fg); background: color-mix(in srgb, var(--sym-gold) 6%, transparent); }
.trt-nav a.on {
  color: var(--sym-gold); background: color-mix(in srgb, var(--sym-gold) 10%, transparent);
  border-left-color: var(--sym-gold);
}
.trt-nav a svg, .trt-nav a img { width: 18px; height: 18px; color: currentColor; opacity: .9; }
.trt-rail .trt-meander {
  margin-top: auto; height: 30px; color: var(--sym-gold); opacity: .18;
  background-image: url('../images/bg-symbols/meander-band.svg');
  background-repeat: repeat-x; background-size: auto 30px;
}

/* ─── Main ──────────────────────────────────────────────────────── */
.trt-main { padding: 24px 30px 40px; position: relative; overflow: visible; }
.trt-guard { position: absolute; right: -50px; bottom: -40px; width: 320px;
  color: var(--sym-gold); opacity: .05; pointer-events: none; z-index: 0; }
/* z-index:1 only on the decorative guard — not on all children, which would
   create stacking contexts that trap dropdown/overlay descendants. */
.trt-guard { z-index: 0; }

.trt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.trt-top h2 { font-family: var(--sym-font-serif); font-weight: 500; font-size: 30px; margin: 0; }
.trt-top h2 small { display: block; font-family: var(--sym-font-mono); font-size: 9px; letter-spacing: 2.4px;
  color: var(--sym-fg-muted); text-transform: uppercase; margin-top: 4px; }
.trt-actions { display: flex; align-items: center; }
.trt-search { display: flex; align-items: center; gap: 10px; background: var(--sym-bg-card);
  border: 1px solid var(--sym-hairline); padding: 9px 14px; min-width: 230px; }
.trt-search input { background: none; border: none; color: var(--sym-fg); font-family: inherit; font-size: 12px; outline: none; width: 100%; }
.trt-search input::placeholder { color: var(--sym-fg-muted); }
.trt-avatar { width: 34px; height: 34px; border-radius: 50%; margin-left: 14px;
  border: 1px solid color-mix(in srgb, var(--sym-gold) 45%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', var(--sym-font-serif); font-size: 13px; color: var(--sym-gold); }

/* Stat cards */
.trt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.trt-stat { background: var(--sym-bg-card); border: 1px solid var(--sym-hairline);
  padding: 18px; position: relative; overflow: hidden; }
.trt-stat::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--ac, var(--sym-gold)); opacity: .7; }
.trt-stat .k { font-family: var(--sym-font-mono); font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--sym-fg-muted); }
.trt-stat .v { font-family: var(--sym-font-serif); font-size: 38px; font-weight: 500; line-height: 1; margin-top: 8px; color: var(--ac, var(--sym-gold)); }
.trt-stat .d { font-size: 10.5px; margin-top: 7px; color: var(--sym-fg-muted); }
.trt-stat .d b { color: var(--med-olive); }
/* accent helpers */
.trt-stat.is-gold  { --ac: var(--sym-gold); }
.trt-stat.is-terra { --ac: var(--sym-terra); }
.trt-stat.is-olive { --ac: var(--med-olive); }
.trt-stat.is-aegean{ --ac: var(--med-aegean); }

/* Cards / tables / feed */
.trt-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.trt-card { background: var(--sym-bg-card); border: 1px solid var(--sym-hairline); overflow: hidden; }
.trt-card .hd { padding: 14px 18px; border-bottom: 1px solid var(--sym-hairline);
  display: flex; justify-content: space-between; align-items: center; }
.trt-card .hd .t { font-family: var(--sym-font-serif); font-size: 18px; font-weight: 500; }
.trt-card .hd .more { font-family: var(--sym-font-mono); font-size: 9px; letter-spacing: 1.6px;
  color: var(--sym-gold); text-transform: uppercase; cursor: pointer; }

.trt-table { width: 100%; border-collapse: collapse; }
.trt-table th, .trt-table td { text-align: left; padding: 11px 18px; font-size: 12.5px;
  border-bottom: 1px solid var(--sym-hairline-soft); }
.trt-table th { font-family: var(--sym-font-mono); font-size: 9px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--sym-fg-muted); font-weight: 400; }
.trt-table .who { display: flex; align-items: center; gap: 9px; }
.trt-table .who .a { width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--sym-gold) 14%, transparent); border: 1px solid var(--sym-hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', var(--sym-font-serif); font-size: 10px; color: var(--sym-gold); }
.trt-table .muted { color: var(--sym-fg-muted); font-family: var(--sym-font-mono); font-size: 9px; }
.trt-bar { height: 5px; width: 80px; background: var(--sym-bg); border: 1px solid var(--sym-hairline); position: relative; }
.trt-bar i { position: absolute; inset: 0; width: var(--p, 0%); background: var(--sym-gold); }
.trt-live { font-family: var(--sym-font-mono); font-size: 8.5px; letter-spacing: 1.4px;
  color: var(--med-olive); text-transform: uppercase; }

.trt-feed { display: flex; flex-direction: column; }
.trt-feed .row { display: flex; gap: 11px; padding: 11px 18px; align-items: flex-start;
  border-bottom: 1px solid var(--sym-hairline-soft); font-size: 12px; }
.trt-feed .dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.trt-feed .tx { color: var(--sym-fg-muted); line-height: 1.4; }
.trt-feed .tx b { color: var(--sym-fg); }
.trt-feed .tm { margin-left: auto; font-family: var(--sym-font-mono); font-size: 9px; color: var(--sym-fg-muted); flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) {
  .trt { grid-template-columns: 1fr; }
  .trt-rail { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .trt-rail .trt-meander { display: none; }
  .trt-nav { flex-direction: row; flex-wrap: wrap; }
  .trt-stats { grid-template-columns: repeat(2, 1fr); }
  .trt-cols { grid-template-columns: 1fr; }
}