/* Copyright 2026 Adibyte Ltd. SPDX-License-Identifier: Apache-2.0 */
/* Shell for the admin and account pages, built only from the design-system tokens and materials.
   The short names below keep the page templates readable; each one aliases a design token. */
:root {
  --bg: var(--ab-surface-page);
  --panel: var(--ab-glass-fill-default);
  --line: var(--ab-border-control);
  --text: var(--ab-text-primary);
  --muted: var(--ab-text-help);
  --brand: var(--ab-accent-solid);
  --brand-hi: var(--ab-accent-light);
  --err: var(--ab-danger);
  --ok: var(--ab-success);
}
[hidden] { display: none !important; }
a { color: var(--ab-accent-light); }
h1, h2 { font-family: var(--ab-font-display); }

/* Controls shared by the admin pages and the plain account forms (zero specificity on purpose). */
:where(input[type=text], input[type=email], input[type=password], input[type=number], textarea, select) {
  display: block;
  width: 100%;
  margin-top: var(--ab-space-sm);
  padding: 0 var(--ab-space-md);
  height: var(--ab-field-height);
  border: 1px solid var(--ab-field-border);
  border-radius: var(--ab-radius-sm);
  background: var(--ab-field-fill);
  color: var(--ab-text-primary);
  box-shadow: var(--ab-field-well);
  font: inherit;
}
:where(textarea) { height: auto; min-height: 90px; padding: var(--ab-space-sm) var(--ab-space-md); font-family: var(--ab-font-mono); font-size: var(--ab-text-body-sm); }
:where(input, textarea, select):focus { outline: var(--ab-focus-outline); outline-offset: 2px; border-color: var(--ab-field-border-focus); }
:where(.btn, button) {
  display: inline-block;
  padding: var(--ab-space-sm) var(--ab-space-lg);
  min-height: 40px;
  color: var(--ab-on-accent);
  background: var(--ab-accent-solid);
  border: 1px solid transparent;
  border-radius: var(--ab-radius-sm);
  font-family: var(--ab-font-display);
  font-size: var(--ab-text-button);
  font-weight: var(--ab-weight-semibold);
  letter-spacing: var(--ab-tracking-button);
  text-decoration: none;
  cursor: pointer;
}
:where(.btn, button):hover { background: var(--ab-accent-deep); }
:where(.btn.ghost, button.ghost, button.secondary) {
  color: var(--ab-text-primary);
  background: var(--ab-surface-glass);
  border-color: var(--ab-border-outlined);
}
:where(.btn.ghost, button.ghost, button.secondary):hover { background: var(--ab-glass-fill-hover); border-color: var(--ab-border-accent-strong); }
:where(.btn.danger, button.danger) { background: var(--ab-danger); color: var(--ab-on-accent); }
.btn:focus-visible, button:focus-visible { outline: var(--ab-focus-outline); outline-offset: 2px; }

/* Admin shell: glass navigation and glass content cards. */
.shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--ab-space-lg);
  min-height: 100svh;
  padding: var(--ab-space-lg);
  position: relative;
  isolation: isolate;
  color: var(--ab-text-primary);
  font-size: var(--ab-text-body-sm);
  line-height: var(--ab-leading-body);
}
.shell::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ab-backdrop-aurora); }
.side {
  display: flex;
  flex-direction: column;
  gap: var(--ab-space-lg);
  padding: var(--ab-space-lg);
  position: sticky;
  top: var(--ab-space-lg);
  height: calc(100svh - 2 * var(--ab-space-lg));
  overflow-y: auto;
}
.admin-logo { display: block; width: 140px; height: auto; }
.side nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.side nav a {
  display: block;
  padding: var(--ab-space-sm) var(--ab-space-md);
  border: 1px solid transparent;
  border-radius: var(--ab-radius-sm);
  color: var(--ab-text-primary);
  font-family: var(--ab-font-display);
  text-decoration: none;
}
.side nav a:hover { background: var(--ab-glass-fill-hover); }
.side nav a.active { background: var(--ab-glass-fill-hover); border-color: var(--ab-border-accent-strong); }
.who { color: var(--ab-text-help); font-size: var(--ab-text-body-sm); overflow-wrap: anywhere; }
.main { min-width: 0; }
.main main { max-width: 1000px; }
.main h1 { font-size: var(--ab-text-heading); font-weight: var(--ab-weight-semibold); margin: 0 0 var(--ab-space-xs); }
.main h2 { font-size: var(--ab-text-title); font-weight: var(--ab-weight-semibold); margin: 0 0 var(--ab-space-md); }
.muted { color: var(--ab-text-help); margin: 0 0 var(--ab-space-lg); }
.bar { display: flex; gap: var(--ab-space-md); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--ab-space-md); }
.card { padding: var(--ab-space-lg); margin-bottom: var(--ab-space-lg); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ab-space-md); margin-bottom: var(--ab-space-lg); }
.stat { display: block; padding: var(--ab-space-lg); color: var(--ab-text-primary); text-decoration: none; }
.stat:hover { border-color: var(--ab-border-accent-strong); }
.stat b { display: block; font-family: var(--ab-font-display); font-size: var(--ab-text-display-md); line-height: 1.2; }
.stat span { color: var(--ab-text-help); }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--ab-space-sm) var(--ab-space-md); border-bottom: 1px solid var(--ab-border-control); vertical-align: top; }
th { color: var(--ab-text-help); font-size: var(--ab-text-eyebrow); font-weight: var(--ab-weight-semibold); letter-spacing: var(--ab-tracking-eyebrow); text-transform: uppercase; }
.badge { display: inline-block; padding: 1px 9px; border: 1px solid var(--ab-border-control); border-radius: 99px; color: var(--ab-text-help); font-size: var(--ab-text-eyebrow); }
.badge.on { color: var(--ab-success); border-color: var(--ab-success-border); }
.badge.off { color: var(--ab-danger); border-color: var(--ab-danger-border); }
form.stack label, .auth-card label { display: block; margin: var(--ab-space-md) 0 0; color: var(--ab-text-help); font-size: var(--ab-text-body-sm); font-weight: var(--ab-weight-medium); }
.check { display: flex !important; gap: var(--ab-space-sm); align-items: center; color: var(--ab-text-primary) !important; }
.check input { width: auto; margin: 0; height: auto; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.checks label { margin: 0 !important; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--ab-space-md); }
.hint { margin: var(--ab-space-xs) 0 0; color: var(--ab-text-help); font-size: var(--ab-text-eyebrow); }
.actions { display: flex; gap: var(--ab-space-sm); flex-wrap: wrap; margin-top: var(--ab-space-lg); }
.alert, .error { margin: 0 0 var(--ab-space-md); padding: var(--ab-space-md); border: 1px solid var(--ab-danger-border); border-radius: var(--ab-radius-sm); background: var(--ab-danger-fill); color: var(--ab-danger); font-size: var(--ab-text-body-sm); }
.alert.ok, .ok { margin: 0 0 var(--ab-space-md); padding: var(--ab-space-md); border: 1px solid var(--ab-success-border); border-radius: var(--ab-radius-sm); background: var(--ab-success-fill); color: var(--ab-success); font-size: var(--ab-text-body-sm); }
code.secret { display: block; padding: var(--ab-space-md); border: 1px solid var(--ab-border-accent-strong); border-radius: var(--ab-radius-sm); background: var(--ab-field-fill); font-family: var(--ab-font-mono); overflow-wrap: anywhere; user-select: all; }

/* Account pages: the plain forms inside the sign-in card use the same control recipes as the sign-in. */
.auth-card h1 { margin: 0 0 var(--ab-space-sm); font-family: var(--ab-font-display); font-size: var(--ab-text-display-md); font-weight: var(--ab-weight-semibold); letter-spacing: var(--ab-tracking-display-md); line-height: var(--ab-leading-snug); }
.auth-card h2 { font-size: var(--ab-text-title); margin: 0 0 var(--ab-space-sm); }
.auth-card .muted { margin: 0 0 var(--ab-space-lg); font-size: var(--ab-text-body-sm); }
.auth-card form > button:not([class]), .auth-card .actions > button:not([class]) { width: 100%; }
.auth-card button.link { width: 100%; margin-top: var(--ab-space-sm); color: var(--ab-accent-light); background: none; border: 0; }
.auth-card button.link:hover { color: var(--ab-text-primary); text-decoration: underline; text-underline-offset: var(--ab-space-xs); }
.auth-card .error { display: flex; }
.reveal-button .eye-off, .reveal-button.is-revealed .eye { display: none; }
.reveal-button.is-revealed .eye-off { display: block; }
.mail-sent-note { margin: 0 0 var(--ab-space-md); color: var(--ab-text-help); font-size: var(--ab-text-body-sm); }
.mail-sent-note strong { color: var(--ab-text-primary); }

/* Signed-in pages use one wide card and keep only the logo of the story panel. */
.single .auth-layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: var(--ab-space-lg); align-content: center; }
.single .auth-story { align-self: auto; align-items: center; }
.single .auth-story > :not(.brand-logo) { display: none; }
.single .brand-logo { margin-bottom: 0; }
.single .auth-card { justify-self: center; max-width: none; }

@media (max-width: 800px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: var(--ab-space-md); }
  .side { position: static; height: auto; }
  .side nav { flex-direction: row; overflow-x: auto; flex: none; }
  .side nav a { white-space: nowrap; }
  .grid2 { grid-template-columns: 1fr; }
}