/* ============================================================================
   WeiiGo Admin — console design system (WYG-admin-redesign)
   Built as a scalable foundation (dashboards, metrics, data tables, forms) that
   stays consistent with the WeiiGo brand. Preserves the existing class names so
   every page inherits the new look; adds reusable primitives (.stat-card,
   .panel, .table-wrap, .badge, .page-head) for future dashboard work.
   ========================================================================== */

/* ── Tokens (aligned with the marketing site's Daybreak palette) ─────────────*/
:root {
  --navy: #0B2550;
  --navy-600: #123A74;
  --navy-deep: #071A3C;
  --blue: #1D4ED8;
  --blue-soft: #EAF1FD;
  --gold: #C0902E;
  --gold-bright: #DCB152;
  --gold-soft: #FBF1D9;
  --gold-text: #8C6312;
  --ink: #0C2347;         /* primary text */
  --mist: #5A6B85;        /* secondary text */
  --faint: #8A98AD;       /* tertiary */
  --paper: #FFFFFF;
  --bg: #F4F7FC;          /* app background */
  --wash: #F6F8FC;        /* subtle fills */
  --line: #E2E8F2;        /* hairline */
  --line-strong: #CBD6E6;
  --success: #1F9D57; --success-text: #147A43; --success-soft: #E3F4EA;
  --danger: #C53A28;  --danger-text: #B0341F;  --danger-soft: #FBE7E3;
  --warn-text: #7A5212; --warn-soft: #FCEFD0;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(11,37,80,.05), 0 1px 3px rgba(11,37,80,.08);
  --shadow: 0 6px 18px rgba(11,37,80,.10);
  --sidebar-w: 236px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Base ────────────────────────────────────────────────────────────────────*/
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .35rem; color: var(--ink); }
h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; color: var(--ink); }
.admin-muted { color: var(--mist); margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  background: var(--wash); padding: 1px 6px; border-radius: 5px; color: var(--navy-600); }

/* Accessibility: real focus rings for keyboard users… */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
/* …but suppress the visible ring on the page heading that Blazor <FocusOnNavigate>
   focuses programmatically after each nav (a -1 heading is never tabbed to). */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }

/* ── App shell ───────────────────────────────────────────────────────────────*/
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: var(--sidebar-w); flex: none; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; padding: 20px 14px;
  position: sticky; top: 0; height: 100vh;
}
.admin-brand {
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; color: #fff;
  padding: 4px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.10);
  display: flex; align-items: center; gap: 9px;
}
.admin-brand::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 0 4px rgba(220,177,82,.18);
}
.admin-sidebar a {
  color: #C6D2E6; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm); font-weight: 500;
  margin-top: 2px; transition: background .12s, color .12s;
}
.admin-sidebar a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.admin-sidebar a.active {
  background: rgba(255,255,255,.10); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold-bright);
}
.admin-logout { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.10); }
.admin-logout button {
  width: 100%; background: transparent; color: #C6D2E6; border: 1px solid rgba(255,255,255,.22);
  padding: 9px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-weight: 600;
  transition: background .12s, color .12s;
}
.admin-logout button:hover { background: rgba(255,255,255,.10); color: #fff; }
.admin-main { flex: 1; min-width: 0; padding: 28px clamp(20px, 3vw, 40px); }
.admin-main > * { max-width: 1180px; }

/* ── Page header ─────────────────────────────────────────────────────────────*/
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px; }
.page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Cards / panels / stat tiles (dashboard primitives) ─────────────────────*/
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 20px 22px; }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; margin-top: 20px; }
.admin-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 20px; color: inherit; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; display: block; }
.admin-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); text-decoration: none; }
.admin-card h2 { display: flex; align-items: center; gap: 9px; }
.admin-card h2::before { content: ''; width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--blue-soft); box-shadow: inset 0 0 0 1px rgba(29,78,216,.12); }
.admin-card p { color: var(--mist); margin: 0; font-size: .92rem; }

/* KPI stat tiles — ready for the future dashboard ("at a glance" metrics). */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.stat-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 16px 18px; }
.stat-card__label { color: var(--mist); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stat-card__value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; color: var(--navy); }
.stat-card__delta { font-size: .82rem; font-weight: 600; margin-top: 2px; }
.stat-card__delta.up { color: var(--success-text); } .stat-card__delta.down { color: var(--danger-text); }

/* Inline-SVG metric chart (MetricChart.razor) */
.metric-chart { width: 100%; height: auto; display: block; }
.mc-grid { stroke: var(--line); stroke-width: 1; }
.mc-ylabel { fill: var(--faint); font-size: 11px; font-family: var(--font); }
.mc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: .85rem; color: var(--mist); }
.mc-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.mc-legend__item b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mc-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ── Data tables ─────────────────────────────────────────────────────────────*/
.table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; background: var(--paper); }
table.admin-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--wash); color: var(--mist);
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
table.admin-table tbody tr:last-child td { border-bottom: 0; }
table.admin-table tbody tr:hover td { background: var(--wash); }
table.admin-table td.num, table.admin-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-empty { padding: 40px 20px; text-align: center; color: var(--mist); }

/* ── Toolbar (search / filter row) ──────────────────────────────────────────*/
.admin-toolbar { display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; align-items: center; }
.admin-toolbar input, .admin-toolbar select {
  font: inherit; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); min-height: 40px;
}
.admin-toolbar input { min-width: 240px; }
.admin-toolbar input:focus, .admin-toolbar select:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(29,78,216,.15); }

/* ── Forms (field rows / editable cells) ────────────────────────────────────*/
.field-row { display: flex; gap: 16px; align-items: center; margin: 12px 0; }
.field-row label { width: 220px; color: var(--mist); font-weight: 600; font-size: .9rem; }
input, select, textarea { font-family: inherit; }
input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea {
  padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--blue); }

/* ── Buttons ─────────────────────────────────────────────────────────────────*/
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; line-height: 1; cursor: pointer;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #1740b8; text-decoration: none; }
.btn-secondary { background: var(--paper); color: var(--navy); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--wash); border-color: var(--navy); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a72f20; }
.btn-ghost { background: transparent; color: var(--mist); }
.btn-ghost:hover { background: var(--wash); color: var(--ink); }
.btn-primary:disabled, .btn-secondary:disabled { opacity: .55; cursor: default; }

/* ── Badges / pills (plans, status) ─────────────────────────────────────────*/
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.badge--free  { background: var(--wash); color: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.badge--pro   { background: var(--blue-soft); color: var(--blue); }
.badge--proai { background: var(--gold-soft); color: var(--gold-text); }
.badge--ok    { background: var(--success-soft); color: var(--success-text); }
.badge--off   { background: var(--danger-soft); color: var(--danger-text); }

/* ── Alerts ──────────────────────────────────────────────────────────────────*/
.alert-error, .alert-success, .alert-info {
  padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; border: 1px solid; font-size: .92rem;
}
.alert-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-text); }
.alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success-text); }
.alert-info { background: var(--gold-soft); border-color: var(--gold); color: var(--warn-text); }

/* ── Pagination ──────────────────────────────────────────────────────────────*/
.pager { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--mist); font-size: .9rem; }
.pager button, .pager .btn-secondary { min-height: 34px; padding: 6px 12px; }

/* ── Login ───────────────────────────────────────────────────────────────────*/
.login-shell { display: flex; min-height: 100vh; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-600) 60%, var(--navy-deep) 100%); padding: 24px; }
.login-card { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 34px 32px; width: 380px; max-width: 100%; }
.login-card h1 { font-size: 1.35rem; display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.login-card h1::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 4px var(--gold-soft); }
.login-card label { display: block; margin: 14px 0 5px; font-size: .88rem; font-weight: 600; color: var(--navy); }
.login-card input { width: 100%; padding: 10px 12px; }
.login-card .btn-primary { width: 100%; margin-top: 20px; padding: 11px; }

/* ── Responsive: sidebar → top bar; content full width ──────────────────────*/
@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 4px; padding: 12px 16px; }
  .admin-brand { border-bottom: 0; margin: 0 12px 0 0; padding: 0; }
  .admin-sidebar a { padding: 8px 10px; margin: 0; }
  .admin-sidebar a.active { box-shadow: inset 0 -3px 0 var(--gold-bright); }
  .admin-logout { margin: 0 0 0 auto; padding: 0; border: 0; }
  .admin-logout button { width: auto; padding: 8px 14px; }
  .admin-main { padding: 20px 16px; }
  .field-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .field-row label { width: auto; }
}