/* SmartDisc Admin — reuses the design tokens from SmartDisc-Application's
   src/assets/tokens.css so the backend admin panel reads as the same
   product, not a bolted-on tool. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  --sd-paper:  #f2eae2;
  --sd-ink-900: #0a1c3d;
  --sd-ink-800: #102a57;
  --sd-ink-700: #1d3d72;
  --sd-azure:  #6f93b5;

  --sd-gold-100: #f0e3c0;
  --sd-gold-300: #dec38c;
  --sd-gold-500: #b8924f;
  --sd-gold-grad: linear-gradient(135deg, #f0e3c0 0%, #dec38c 38%, #cfb276 64%, #b8924f 100%);

  --sd-fg1: #0e2348;
  --sd-fg2: #3d5478;
  --sd-fg3: #6f87a6;
  --sd-fg-on-dark: #eef3fa;
  --sd-fg2-on-dark: #b6c6dd;

  --sd-danger:  #c0584e;
  --sd-success: #3f9d6d;

  --sd-r-sm: 10px;
  --sd-r-md: 14px;
  --sd-r-pill: 999px;

  --sd-shadow-sm: 0 1px 2px rgba(10,28,61,.06);
  --sd-shadow-md: 0 8px 24px rgba(10,28,61,.18);

  --sd-font-display: 'Space Grotesk', system-ui, sans-serif;
  --sd-font-body:    'Spectral', Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sd-paper);
  color: var(--sd-fg1);
  font-family: var(--sd-font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── Shell: fixed dark sidebar + editorial content column ────────────── */

.admin-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.admin-side {
  flex: none;
  width: 232px;
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  background: linear-gradient(160deg, var(--sd-ink-800), var(--sd-ink-900));
  color: var(--sd-fg-on-dark);
}

.admin-side__brand {
  display: flex;
  flex-direction: column;
  padding: 0 8px 28px;
}
.admin-side__brand-text {
  display: block;
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--sd-fg-on-dark);
}
.admin-side__brand-eyebrow {
  display: block;
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sd-gold-300);
}

.admin-side__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-side__link {
  display: block;
  padding: 10px 12px 10px 14px;
  border-left: 2px solid transparent;
  font-family: var(--sd-font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--sd-fg2-on-dark);
  text-decoration: none;
  border-radius: 0 var(--sd-r-sm) var(--sd-r-sm) 0;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.admin-side__link:hover {
  color: var(--sd-fg-on-dark);
  background: rgba(238, 243, 250, .06);
}
.admin-side__link.is-active {
  color: var(--sd-fg-on-dark);
  border-left-color: var(--sd-gold-300);
  background: rgba(238, 243, 250, .06);
}

.admin-side__foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(238, 243, 250, .12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-side__user {
  padding: 0 8px;
  font-family: var(--sd-font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--sd-fg2-on-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-side__signout {
  padding: 8px 12px;
  font-family: var(--sd-font-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--sd-fg2-on-dark);
  text-decoration: none;
  border-radius: var(--sd-r-sm);
}
.admin-side__signout:hover {
  color: var(--sd-fg-on-dark);
  background: rgba(238, 243, 250, .06);
}

.admin-main {
  flex: 1;
  min-width: 0;
  padding: 48px 56px 72px;
  max-width: 880px;
}

@media (max-width: 760px) {
  .admin-shell { flex-direction: column; }
  .admin-side {
    width: auto;
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
    gap: 16px;
  }
  .admin-side__brand { padding: 0; }
  .admin-side__brand-eyebrow { display: none; }
  .admin-side__nav { flex-direction: row; gap: 4px; }
  .admin-side__link { border-left: none; border-bottom: 2px solid transparent; border-radius: var(--sd-r-sm); }
  .admin-side__link.is-active { border-left-color: transparent; border-bottom-color: var(--sd-gold-300); }
  .admin-side__foot { margin-top: 0; margin-left: auto; padding-top: 0; border-top: none; flex-direction: row; align-items: center; }
  .admin-side__user { display: none; }
  .admin-main { padding: 32px 20px 56px; max-width: none; }
}

/* ── Page header: eyebrow, title, editorial meta line ─────────────────── */

.admin-eyebrow {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sd-azure);
  margin: 0 0 8px;
}
.admin-title {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.015em;
  color: var(--sd-fg1);
  margin: 0 0 28px;
}
.admin-header__meta {
  font-family: var(--sd-font-body);
  font-style: italic;
  font-size: 15px;
  color: var(--sd-fg3);
  margin: 0 0 28px;
}

.admin-flash {
  border-radius: var(--sd-r-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-family: var(--sd-font-body);
  font-size: 14px;
  border: 1px solid transparent;
}
.admin-flash--error {
  background: rgba(192, 88, 78, .08);
  color: var(--sd-danger);
  border-color: rgba(192, 88, 78, .25);
}
.admin-flash--success {
  background: rgba(63, 157, 109, .08);
  color: var(--sd-success);
  border-color: rgba(63, 157, 109, .25);
}

/* ── Cards & tables: hairlines over drop shadows ───────────────────────── */

.admin-card {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(16,42,87,.10);
  border-radius: var(--sd-r-md);
  box-shadow: var(--sd-shadow-sm);
  padding: 24px;
  margin-bottom: 28px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 13px 4px;
  font-size: 14px;
  border-bottom: 1px solid rgba(16,42,87,.10);
}
.admin-table th {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-fg3);
  border-bottom-color: rgba(16,42,87,.18);
  padding-bottom: 12px;
}
.admin-table td { color: var(--sd-fg2); font-family: var(--sd-font-body); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--sd-fg1);
}
.admin-table__actions { display: flex; gap: 14px; justify-content: flex-end; }
.admin-table__actions a { font-family: var(--sd-font-display); font-weight: 500; font-size: 13px; color: var(--sd-azure); text-decoration: none; }
.admin-table__actions a:hover { text-decoration: underline; }
.admin-empty {
  padding: 32px 0;
  text-align: center;
  font-family: var(--sd-font-body);
  font-style: italic;
  color: var(--sd-fg3);
  font-size: 15px;
  border-top: 1px solid rgba(16,42,87,.10);
  border-bottom: 1px solid rgba(16,42,87,.10);
}

.admin-actions-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}
.admin-actions-row .admin-title { margin-bottom: 0; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

form.admin-form { display: flex; flex-direction: column; gap: 16px; }
.admin-form label {
  display: block;
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sd-fg2);
  margin-bottom: 6px;
}
.admin-form input[type="text"],
.admin-form input[type="password"],
.admin-form input[type="email"],
.admin-form select,
.admin-form textarea {
  width: 100%;
  font-family: var(--sd-font-body);
  font-size: 15px;
  color: var(--sd-fg1);
  background: #fff;
  border: 1px solid rgba(16,42,87,.16);
  border-radius: var(--sd-r-sm);
  padding: 10px 14px;
}
.admin-form textarea { resize: vertical; min-height: 96px; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
  outline: none;
  border-color: var(--sd-azure);
  box-shadow: 0 0 0 3px rgba(111,147,181,.20);
}
.admin-form select[multiple] { min-height: 96px; }
.admin-form .form-help { font-size: 12px; color: var(--sd-fg3); margin-top: 4px; }
.admin-form .form-errors { color: var(--sd-danger); font-size: 12px; margin-top: 4px; list-style: none; padding: 0; }

/* ── Buttons: gold is the primary action, same as the mobile app's CTA ── */

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: var(--sd-r-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: var(--sd-gold-grad);
  color: #4a3417;
  transition: filter .15s ease, transform .1s ease;
}
.admin-btn:hover { filter: brightness(1.04); }
.admin-btn:active { transform: scale(.98); }

.admin-btn--ghost {
  background: transparent;
  color: var(--sd-fg2);
  border: 1px solid rgba(16,42,87,.2);
}
.admin-btn--ghost:hover { background: rgba(16,42,87,.05); filter: none; }

.admin-btn--danger {
  background: transparent;
  color: var(--sd-danger);
  border: 1px solid rgba(192, 88, 78, .35);
  padding: 8px 18px;
  font-size: 13px;
}
.admin-btn--danger:hover { background: rgba(192, 88, 78, .08); filter: none; }

.admin-inline-form { display: inline; }

/* ── Login: same dark, bloom-lit stage as the app's welcome screen ─────── */

.admin-login-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--sd-ink-900);
  padding: 24px;
}
.admin-login-blooms {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.admin-login-blooms::before,
.admin-login-blooms::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.admin-login-blooms::before {
  width: 480px;
  height: 480px;
  left: -160px;
  top: -160px;
  background: radial-gradient(circle, rgba(111, 147, 181, .30), transparent 65%);
}
.admin-login-blooms::after {
  width: 420px;
  height: 420px;
  right: -160px;
  bottom: -140px;
  background: radial-gradient(circle, rgba(222, 195, 140, .26), transparent 60%);
}

.admin-login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: rgba(238, 243, 250, .06);
  border: 1px solid rgba(238, 243, 250, .14);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--sd-r-md);
  box-shadow: var(--sd-shadow-md);
  padding: 36px 32px;
}
.admin-login-brand {
  margin-bottom: 28px;
}
.admin-login-brand__text {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--sd-fg-on-dark);
}
.admin-login-title {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--sd-fg-on-dark);
  margin: 0 0 6px;
}
.admin-login-sub {
  font-family: var(--sd-font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--sd-fg2-on-dark);
  margin: 0 0 26px;
}
.admin-login-card .admin-form label { color: var(--sd-fg2-on-dark); }
.admin-login-card .admin-form input {
  background: rgba(10, 28, 61, .35);
  border-color: rgba(238, 243, 250, .18);
  color: var(--sd-fg-on-dark);
}
.admin-login-card .admin-form input::placeholder { color: var(--sd-fg2-on-dark); opacity: .6; }
.admin-login-card .admin-form input:focus {
  border-color: var(--sd-gold-300);
  box-shadow: 0 0 0 3px rgba(222, 195, 140, .18);
}
.admin-login-card .admin-btn { width: 100%; margin-top: 4px; }
.admin-login-card .admin-flash--error {
  background: rgba(192, 88, 78, .14);
  border-color: rgba(192, 88, 78, .35);
}

/* ── Reveal (disc-created) & QR panel ───────────────────────────────────── */

.admin-reveal { margin-bottom: 20px; }
.admin-reveal__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(16,42,87,.08);
}
.admin-reveal__row:last-child { border-bottom: none; }
.admin-reveal__label {
  flex: none;
  width: 90px;
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sd-fg3);
}
.admin-reveal__value {
  font-family: ui-monospace, monospace;
  font-size: 15px;
  color: var(--sd-fg1);
  word-break: break-all;
}

.admin-qr {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(16,42,87,.08);
}
.admin-qr__image {
  width: 160px;
  height: 160px;
  border-radius: var(--sd-r-sm);
  border: 1px solid rgba(16,42,87,.1);
  background: #fff;
  flex: none;
}
.admin-qr__body { display: flex; flex-direction: column; gap: 10px; }
.admin-qr__hint {
  font-family: var(--sd-font-body);
  font-size: 13px;
  color: var(--sd-fg3);
  margin: 0;
  max-width: 360px;
}