/* ── Auth pages (login / two-factor) ──────────────────────────────────────── */
.auth-page {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  background:      var(--c-bg-secondary);
}

.auth-box {
  width:           360px;
  background:      var(--c-bg);
  border:          var(--border);
  border-radius:   var(--radius);
  overflow:        hidden;
}

.auth-box__header {
  padding:         14px 20px;
  background:      var(--c-text);
  color:           #fff;
}

.auth-box__header h1 {
  font-size:       15px;
  font-weight:     600;
  color:           #fff;
  margin:          0;
}

.auth-box__header p {
  font-size:       12px;
  color:           #ccc;
  margin-top:      2px;
}

.auth-box__body {
  padding:         22px 20px;
}

.auth-box__footer {
  padding:         10px 20px;
  background:      var(--c-bg-secondary);
  border-top:      var(--border);
  font-size:       11px;
  color:           var(--c-text-faint);
}

/* ── Admin shell ──────────────────────────────────────────────────────────── */
.shell {
  display:         grid;
  grid-template-rows:    var(--header-h) 1fr;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main";
  min-height:      100vh;
}

/* Header */
.shell__header {
  grid-area:       header;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--c-text);
  color:           #fff;
  padding:         0 16px;
  border-bottom:   1px solid #000;
  position:        sticky;
  top:             0;
  z-index:         100;
}

.shell__header .brand {
  font-weight:     700;
  font-size:       13px;
  letter-spacing:  0.03em;
  color:           var(--c-accent);
  text-transform:  uppercase;
}

.shell__header .header-right {
  display:         flex;
  align-items:     center;
  gap:             14px;
  font-size:       12px;
}

.shell__header .header-right span {
  color:           #ccc;
}

.shell__header .header-right a {
  color:           #aaa;
  font-size:       12px;
}
.shell__header .header-right a:hover { color: var(--c-accent-3); }

/* Sidebar */
.shell__sidebar {
  grid-area:       sidebar;
  background:      var(--c-bg-secondary);
  border-right:    var(--border);
  padding:         8px 0;
  overflow-y:      auto;
}

.nav-section {
  margin-bottom:   4px;
}

.nav-section__label {
  font-size:       10px;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.06em;
  color:           var(--c-text-faint);
  padding:         8px 14px 4px;
}

.nav-item {
  display:         block;
  padding:         6px 14px;
  font-size:       13px;
  color:           var(--c-text);
  border-left:     3px solid transparent;
  transition:      background 0.1s;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}
.nav-item:hover {
  background:      var(--c-bg-tertiary);
  text-decoration: none;
  color:           var(--c-text);
}
.nav-item.active {
  border-left-color: var(--c-accent);
  background:      #fff;
  color:           var(--c-accent);
  font-weight:     600;
}

/* Main content */
.shell__main {
  grid-area:       main;
  overflow-y:      auto;
  padding:         var(--content-pad);
  background:      var(--c-bg);
}

/* Page header bar */
.page-header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  padding-bottom:  10px;
  margin-bottom:   14px;
  border-bottom:   var(--border);
}

.page-header h1 {
  font-size:       15px;
  font-weight:     700;
}

.page-header .page-header__sub {
  font-size:       12px;
  color:           var(--c-text-muted);
  margin-top:      2px;
}

/* ── Grid helpers ─────────────────────────────────────────────────────────── */
.row {
  display:         flex;
  gap:             14px;
  flex-wrap:       wrap;
}

.col-half { flex: 0 0 calc(50% - 7px); min-width: 240px; }
.col-full { flex: 1 1 100%; }

/* ── Card / panel ─────────────────────────────────────────────────────────── */
.card {
  border:          var(--border);
  border-radius:   var(--radius);
  background:      var(--c-bg);
  margin-bottom:   14px;
}

.card__head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         8px 12px;
  background:      var(--c-bg-secondary);
  border-bottom:   var(--border);
  font-weight:     600;
  font-size:       12px;
}

.card__body {
  padding:         12px;
}

.card__body.no-pad { padding: 0; }

/* ── Stat boxes ──────────────────────────────────────────────────────────── */
.stat-row {
  display:         grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:             10px;
  margin-bottom:   14px;
}

.stat-box {
  border:          var(--border);
  border-radius:   var(--radius);
  padding:         10px 14px;
  background:      var(--c-bg-secondary);
}

.stat-box__label {
  font-size:       11px;
  color:           var(--c-text-muted);
  text-transform:  uppercase;
  letter-spacing:  0.04em;
  margin-bottom:   4px;
}

.stat-box__value {
  font-size:       22px;
  font-weight:     700;
  color:           var(--c-text);
  line-height:     1.1;
}

.stat-box__sub {
  font-size:       11px;
  color:           var(--c-text-faint);
  margin-top:      3px;
}