/* =====================================================================
   ShiftPocket v0.4 - ADMIN CONSOLE LAYOUT
   DESIGN PROTOTYPE ONLY. Not production code.

   Desktop-oriented layout built on the same tokens as the mobile app, so
   a theme change restyles both surfaces at once.
   RULE: no literal colour, radius or timing value.
   ===================================================================== */

.admin { min-height: 100vh; background: var(--bg); }

.admin-shell { display: grid; grid-template-columns: var(--admin-rail) minmax(0, 1fr); min-height: 100vh; }

/* ---- Rail ---- */
.rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface); border-right: var(--hairline) solid var(--line);
}
.rail-brand { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); margin-bottom: var(--sp-4); }
.rail-mark {
  display: flex; align-items: center; justify-content: center;
  width: 1.875rem; height: 1.875rem; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-fg);
}
.rail-name { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.rail-sub { font-size: var(--fs-micro); color: var(--fg-muted); }
.rail-nav { display: grid; gap: var(--sp-1); }
.rail-item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap); padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-md); background: transparent;
  color: var(--fg-2); font-size: var(--fs-body); font-weight: var(--fw-medium);
  text-align: left; cursor: pointer; width: 100%;
}
.rail-item:hover { background: var(--surface-muted); }
.rail-item[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: var(--fw-semibold); }
.rail-item[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.rail-item .icon { width: 1.125rem; height: 1.125rem; }
.rail-foot { margin-top: auto; padding-top: var(--sp-4); }

/* ---- Main ---- */
.admin-main { min-width: 0; max-width: 100%; display: flex; flex-direction: column; }
.admin-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: var(--hairline) solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur-overlay)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--blur-overlay)) saturate(var(--glass-sat));
}
.admin-body { padding: var(--sp-5); max-width: var(--admin-max); width: 100%; min-width: 0; }
.admin-title { font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.admin-sub { font-size: var(--fs-sub); color: var(--fg-muted); }

/* ---- Role pill ---- */
.role-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: 0 var(--sp-3);
  border-radius: var(--r-pill); border: var(--hairline) solid var(--line);
  background: var(--surface); font-size: var(--fs-label); font-weight: var(--fw-semibold);
}
.role-pill .icon { width: 1rem; height: 1rem; color: var(--fg-muted); }

/* ---- Metric tiles ---- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--sp-3); }
.metric {
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface); border: var(--hairline) solid var(--line);
}
.metric-key { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); }
.metric-value { margin-top: var(--sp-2); font-size: var(--fs-amount); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); }
.metric-note { margin-top: var(--sp-1); font-size: var(--fs-sub); color: var(--fg-muted); }

/* ---- Data table ---- */
.table-wrap { border-radius: var(--r-lg); border: var(--hairline) solid var(--line); background: var(--surface); overflow: hidden; min-width: 0; }
.table-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }
.dtable { width: 100%; border-collapse: collapse; min-width: 40rem; }
.dtable th, .dtable td {
  padding: var(--sp-3) var(--sp-4); text-align: left;
  border-bottom: var(--hairline) solid var(--line);
  font-size: var(--fs-sub); white-space: nowrap;
}
.dtable thead th {
  font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-wide); color: var(--fg-muted); background: var(--surface-muted);
}
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { cursor: pointer; }
.dtable tbody tr:hover { background: var(--surface-muted); }
.dtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable .cell-main { font-weight: var(--fw-semibold); color: var(--fg); }
.dtable .cell-sub { display: block; font-size: var(--fs-micro); color: var(--fg-muted); font-weight: var(--fw-regular); }

/* ---- Search ---- */
.search {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-3);
  border: var(--hairline) solid var(--line); border-radius: var(--r-md);
  background: var(--surface); max-width: 24rem; width: 100%;
}
.search input { border: 0; background: transparent; outline: none; width: 100%; font-size: var(--fs-body); }
.search .icon { color: var(--fg-muted); }

/* ---- Detail grid ---- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(min(16rem, 100%), 1fr); gap: var(--sp-4); }
.detail-grid > section { min-width: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sub); }
.kv dt { color: var(--fg-muted); }
.kv dd { margin: 0; color: var(--fg); font-weight: var(--fw-medium); }

/* ---- Audit ---- */
.audit-row {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--hairline) solid var(--line);
}
.audit-row:last-child { border-bottom: 0; }
.audit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.audit-action { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.audit-meta { font-size: var(--fs-micro); color: var(--fg-muted); }
.audit-reason { font-size: var(--fs-sub); color: var(--fg-2); }

/* ---- Impact summary before a consequential change ---- */
.impact { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-muted); }
.impact-row { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sub); }
.impact-row .icon { width: 0.9375rem; height: 0.9375rem; flex: none; margin-top: 0.125rem; color: var(--fg-muted); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: static; height: auto; min-width: 0;
    flex-direction: row; align-items: center; gap: var(--sp-2);
    overflow-x: auto; border-right: 0; border-bottom: var(--hairline) solid var(--line);
  }
  .rail-brand, .rail-foot { flex: none; }
  .rail-brand { margin-bottom: 0; }
  .rail-nav { grid-auto-flow: column; gap: var(--sp-1); }
  .rail-item { white-space: nowrap; }
  .rail-foot { margin-top: 0; padding-top: 0; margin-left: auto; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-body { padding: var(--sp-4); }
}

/* Rail "Soon" tag for destinations not built in this preview */
.rail-tag {
  margin-left: auto; padding: 0.0625rem var(--sp-2);
  border-radius: var(--r-xs); background: var(--surface-sunken);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--fg-muted);
}
.metric-accent { border-color: var(--accent); }
/* The admin overlay is page-fixed, not inside a device frame. */
.overlay-fixed { position: fixed; }