/* ============================================================
   ADMIN layout & components — Hydralada design system
   ============================================================ */

.adm-shell { min-height: 100dvh; overflow-x: clip; }

/* ---------- Sidebar ---------- */
.adm-side {
  position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: 252px;
  display: flex; flex-direction: column;
  padding: 22px 16px 18px;
  background:
    radial-gradient(140% 110% at 90% -10%, var(--glow-a) 0%, rgba(255, 183, 27, 0) 50%),
    var(--grad-dark);
  border-right: 1px solid rgba(255, 255, 255, .06);
  transition: transform .35s cubic-bezier(.25, .8, .25, 1);
}
.adm-side .side-logo { padding: 0 10px 20px; }
.adm-side .side-logo img { height: 24px; }

.adm-side .side-cap {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38); padding: 14px 12px 8px;
}
.adm-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 3px;
  border-radius: 14px; cursor: pointer; border: none; background: none; width: 100%;
  color: rgba(255, 255, 255, .62); text-align: left;
  transition: all .25s ease;
}
.adm-nav-item .material-icons { font-size: 20px; }
.adm-nav-item span { font-size: 13.5px; font-weight: 650; letter-spacing: .01em; }
.adm-nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.adm-nav-item.on {
  background: var(--grad-amber); color: var(--on-accent);
  box-shadow: 0 10px 24px -8px var(--glow);
}
.adm-side .side-foot { margin-top: auto; }
.adm-side .side-user {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px; padding: 11px 12px;
}
.adm-side .side-user .t-sub { color: rgba(255, 255, 255, .55); }

/* ---------- Main column ---------- */
.adm-main { margin-left: 252px; min-width: 0; min-height: 100dvh; }

.adm-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 30px;
  background: rgba(245, 243, 238, .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.adm-topbar .t-sub { white-space: nowrap; }
.adm-burger { display: none; }

.adm-content { padding: 28px 30px 70px; max-width: 1240px; margin: 0 auto; }

@media (max-width: 1020px) {
  .adm-side { transform: translateX(-105%); box-shadow: var(--shadow-float); }
  .adm-side.open { transform: none; }
  .adm-main { margin-left: 0; }
  .adm-topbar { padding: 12px 16px; }
  .adm-content { padding: 20px 16px 70px; }
  .adm-burger { display: inline-flex; }
}

/* ---------- KPI & stat ---------- */
.kpi { display: flex; align-items: center; gap: 15px; }
.kpi .kpi-ico {
  width: 50px; height: 50px; border-radius: 17px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-accent-bg); color: var(--amber-deep);
}
.kpi .kpi-ico .material-icons { font-size: 25px; }
.kpi .kpi-ico.dark { background: var(--ink); color: var(--amber); }

/* ---------- Tables ---------- */
.tbl-card { padding: 6px 0; overflow: hidden; }
.tbl {
  display: grid; align-items: center;
  padding: 13px 20px;
  font-size: 13.5px;
}
.tbl + .tbl { border-top: 1px solid var(--line); }
.tbl-head {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-40);
  background: rgba(29, 37, 44, .03);
  border-top: none;
}
.tbl-row:hover { background: rgba(255, 183, 27, .05); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .strong { font-weight: 750; color: var(--ink); }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 750;
}
.status-pill.green { background: rgba(46, 201, 142, .13); color: #17855C; }
.status-pill.amber { background: var(--chip-tint-bg); color: var(--chip-tint-text); }
.status-pill.red { background: rgba(255, 90, 95, .11); color: #D93A3F; }
.status-pill.gray { background: rgba(29, 37, 44, .07); color: var(--ink-60); }
.status-pill .dot { width: 7px; height: 7px; }

/* ---------- Hero (admin header) ---------- */
.adm-hero {
  position: relative; overflow: hidden;
  border-radius: 0 0 34px 34px;
  margin: -28px 0 0;
  margin-bottom: 24px;
  padding: 30px 36px 30px;
}
@media (max-width: 1020px) {
  .adm-hero { margin: -20px 0 0; padding: 24px 18px 26px; }
}
.adm-hero .hero-bg { position: absolute; inset: 0; }
.adm-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
.adm-hero .hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(172deg, rgba(18, 23, 29, .5) 0%, rgba(18, 23, 29, .86) 55%, rgba(18, 23, 29, .97) 100%),
              radial-gradient(120% 90% at 90% 0%, var(--glow-a), transparent 55%);
}
.adm-hero .hero-content { position: relative; z-index: 1; color: #fff; }
.adm-hero .t-cap { color: rgba(255, 255, 255, .55); }
.adm-hero .t-sub { color: rgba(255, 255, 255, .66); }

/* ---------- Inputs (inline targets) ---------- */
.tbl .q-field__control { border-radius: 11px; background: rgba(29, 37, 44, .05); height: 38px; min-height: 38px; }
.tbl .q-field__native { font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: right; }
.tbl .q-field__control:before { border: none; }
.tbl .q-field__control:after { border: none; }

/* ---------- Settings rows reuse ---------- */
.adm-set-card { padding: 4px 0; }

/* Section caption inside content */
.adm-sec { margin-top: 26px; }
.adm-sec .sec-head { margin-bottom: 12px; }

/* Two-column layout for wide screens */
.adm-cols { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1021px) {
  .adm-cols-2 { grid-template-columns: 1fr 1fr; }
  .adm-cols-31 { grid-template-columns: 2fr 1fr; }
}