/* =====================================================================
   Googline admin dashboard.
   Minimal, dense layout. No remote assets, no inline scripts.
===================================================================== */

/* Force every numeric input on the admin to render with Latin digits
   and left-to-right text flow, even when the OS/browser would otherwise
   substitute Arabic-Indic (٠-٩) or Devanagari (०-९) numerals as the
   operator types. The JS normalizer in admin.js mirrors this on the
   data side (it rewrites localized digits in the value), so the input
   stays a valid <number> regardless of keyboard. */
input[type="number"],
input[inputmode="numeric"],
input[inputmode="decimal"] {
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  /* Latin-only digit shaping when the engine offers it. */
  font-feature-settings: "lnum" 1, "tnum" 1;
}

:root {
  color-scheme: light dark;
  --blue: #4285f4;
  --red: #ea4335;
  --yellow: #fbbc05;
  --green: #34a853;
  --ink: #152033;
  --muted: #66738b;
  --soft: #f3f6fb;
  --line: rgba(40, 55, 85, 0.11);
  --line-strong: rgba(40, 55, 85, 0.18);
  --panel: rgba(255, 255, 255, 0.92);
  --panel-deep: rgba(255, 255, 255, 0.98);
  --shadow: 0 16px 40px rgba(61, 86, 122, 0.14);
  --shadow-soft: 0 6px 18px rgba(61, 86, 122, 0.08);
  --radius: 12px;
  --radius-lg: 18px;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7ecf5;
    --muted: #98a4ba;
    --soft: #1a2030;
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.2);
    --panel: rgba(28, 36, 54, 0.88);
    --panel-deep: rgba(28, 36, 54, 0.96);
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.32);
  }
}

* { box-sizing: border-box; }
*:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

html, body { height: 100%; margin: 0; }
body {
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(66, 133, 244, 0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(234, 67, 53, 0.07), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(52, 168, 83, 0.08), transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}
@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(1200px 600px at 0% 0%, rgba(66, 133, 244, 0.18), transparent 60%),
      radial-gradient(900px 500px at 100% 0%, rgba(234, 67, 53, 0.12), transparent 60%),
      radial-gradient(700px 500px at 100% 100%, rgba(52, 168, 83, 0.12), transparent 60%),
      linear-gradient(180deg, #0d1320 0%, #131a2a 100%);
  }
}

button { cursor: pointer; font: inherit; color: inherit; border: 0; background: transparent; }
input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden], .hidden { display: none !important; }

.admin-shell { min-height: 100vh; min-height: 100dvh; }

/* === Logo === */
.logo {
  width: 38px; height: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  padding: 6px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel-deep); box-shadow: var(--shadow-soft); flex: 0 0 auto;
}
.logo span { border-radius: 999px; }
.blue { background: var(--blue); }
.red { background: var(--red); }
.yellow { background: var(--yellow); }
.green { background: var(--green); }

/* === Boot screen === */
.admin-boot {
  min-height: 100dvh; display: grid; place-items: center; gap: 12px;
  color: var(--muted);
}

/* === Sign-in gate === */
.admin-gate {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
}
.admin-gate-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.admin-gate-head h1 { margin: 0; font-size: 20px; font-weight: 900; }
.admin-gate-copy { color: var(--muted); max-width: 380px; line-height: 1.5; text-align: center; margin: 0 0 16px; }
.admin-gate-cta {
  min-height: 48px; display: inline-flex; align-items: center; gap: 12px;
  padding: 0 18px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--panel-deep); color: var(--ink); font-weight: 700;
  box-shadow: var(--shadow-soft);
}
.admin-gate-cta:hover { box-shadow: var(--shadow); }
.admin-gate-foot { color: #8a1f17; min-height: 18px; margin-top: 12px; font-weight: 700; font-size: 13px; }
@media (prefers-color-scheme: dark) {
  .admin-gate-foot { color: #ffb4ab; }
}

/* === App layout === */
.admin-app {
  min-height: 100dvh; display: grid; grid-template-columns: 248px minmax(0, 1fr);
}
@media (max-width: 800px) {
  .admin-app { grid-template-columns: 1fr; }
}

/* Sidebar is a single calm column. Three rows: brand header → scrollable
   nav → account footer. Scroll lives inside the nav region so the
   footer stays anchored to the bottom of the viewport even when the
   list is long. */
.admin-sidebar {
  position: sticky; top: 0; height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 14px 12px;
  border-right: 1px solid var(--line);
  background: var(--panel-deep);
}
@media (max-width: 800px) {
  .admin-sidebar { position: static; height: auto; }
}

.admin-sidebar-head {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.admin-sidebar-title { display: grid; line-height: 1.15; min-width: 0; }
.admin-sidebar-title strong { font-size: 15px; font-weight: 900; letter-spacing: -0.2px; }
.admin-sidebar-title span {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--muted);
}

/* === Nav: groups of compact items === */
.admin-nav {
  display: grid; gap: 12px;
  padding: 8px 0 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.admin-nav::-webkit-scrollbar { width: 6px; }
.admin-nav::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 4px;
}

.admin-nav-group { display: grid; gap: 2px; }
.admin-nav-group-label {
  padding: 0 10px; margin-bottom: 2px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--muted);
  opacity: 0.7;
}

.admin-nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 600; font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.admin-nav a:hover {
  background: rgba(66, 133, 244, 0.08);
  color: var(--ink);
}
.admin-nav a:hover .admin-nav-icon { color: var(--ink); }

/* Accent-colored icon by destination. Subtle in the resting state —
   the icon is the only color the eye picks up, so each section gets
   its own brand-tint without screaming. */
.admin-nav-icon {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  transition: background 140ms ease, color 140ms ease;
  flex: 0 0 auto;
}
.admin-nav a[data-accent="blue"]   .admin-nav-icon { color: var(--blue); }
.admin-nav a[data-accent="red"]    .admin-nav-icon { color: var(--red); }
.admin-nav a[data-accent="yellow"] .admin-nav-icon { color: #c08a00; }
.admin-nav a[data-accent="green"]  .admin-nav-icon { color: var(--green); }
@media (prefers-color-scheme: dark) {
  .admin-nav a[data-accent="yellow"] .admin-nav-icon { color: var(--yellow); }
}

.admin-nav-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Active row: soft tinted background + bold ink text + a 3px accent
   bar pinned to the inline-start edge. Far quieter than the old full-
   width blue/green gradient, but unmistakable. */
.admin-nav a.is-active {
  background: rgba(66, 133, 244, 0.12);
  color: var(--ink); font-weight: 800;
}
.admin-nav a.is-active::before {
  content: ""; position: absolute;
  inset-block: 6px; inset-inline-start: 0;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--blue), var(--green));
}
.admin-nav a.is-active .admin-nav-icon {
  background: rgba(66, 133, 244, 0.18);
}
.admin-nav a.is-active[data-accent="red"] {
  background: rgba(234, 67, 53, 0.10);
}
.admin-nav a.is-active[data-accent="red"]::before {
  background: linear-gradient(180deg, var(--red), #c2241a);
}
.admin-nav a.is-active[data-accent="red"] .admin-nav-icon {
  background: rgba(234, 67, 53, 0.16);
}
.admin-nav a.is-active[data-accent="yellow"] {
  background: rgba(251, 188, 5, 0.12);
}
.admin-nav a.is-active[data-accent="yellow"]::before {
  background: linear-gradient(180deg, var(--yellow), #c08a00);
}
.admin-nav a.is-active[data-accent="yellow"] .admin-nav-icon {
  background: rgba(251, 188, 5, 0.20);
}
.admin-nav a.is-active[data-accent="green"] {
  background: rgba(52, 168, 83, 0.12);
}
.admin-nav a.is-active[data-accent="green"]::before {
  background: linear-gradient(180deg, var(--green), #0f6f3f);
}
.admin-nav a.is-active[data-accent="green"] .admin-nav-icon {
  background: rgba(52, 168, 83, 0.16);
}

/* === Footer: account card + sign-out === */
.admin-sidebar-foot {
  display: grid; gap: 8px;
  padding-top: 12px; margin-top: 6px;
  border-top: 1px solid var(--line);
}
.admin-me {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.admin-me img {
  width: 30px; height: 30px; border-radius: 999px;
  flex: 0 0 auto; object-fit: cover;
}
.admin-me-text { display: grid; min-width: 0; line-height: 1.2; }
.admin-me-text strong,
.admin-me strong {
  font-size: 13px; font-weight: 800; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-me-text span,
.admin-me span {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.admin-link-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(234, 67, 53, 0.18);
  background: rgba(234, 67, 53, 0.06);
  color: #8a1f17;
  font-weight: 800; font-size: 12.5px;
  text-align: start;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.admin-link-button:hover {
  background: rgba(234, 67, 53, 0.12);
  border-color: rgba(234, 67, 53, 0.30);
  transform: translateY(-1px);
}
.admin-link-button svg { flex: 0 0 auto; }
@media (prefers-color-scheme: dark) {
  .admin-link-button { color: #ffb4ab; }
}

/* === Main === */
.admin-main {
  min-width: 0; padding: 18px;
  display: grid; gap: 16px;
  align-content: start;     /* anchor everything to the top — without this
                               grid centers its children when content is
                               shorter than the viewport, which is why the
                               Users page used to render in the lower half */
}
@media (max-width: 800px) { .admin-main { padding: 12px; } }

.admin-topbar { position: relative; }

.admin-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; min-height: 42px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-deep);
  box-shadow: var(--shadow-soft);
}
.admin-search input {
  width: 100%; min-height: 42px; padding: 0 4px; border: 0; outline: none;
  background: transparent;
}
.admin-search svg { color: var(--muted); }

.admin-search-results {
  position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 5;
  max-height: 320px; overflow: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-deep); box-shadow: var(--shadow);
}
.admin-search-results section {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.admin-search-results section:last-child { border-bottom: 0; }
.admin-search-results h4 {
  margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted);
}
.admin-search-results a {
  display: block; padding: 8px 10px; border-radius: 8px;
}
.admin-search-results a:hover { background: rgba(66, 133, 244, 0.08); }

/* === Sections === */
.admin-section {
  display: grid; gap: 14px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow-soft);
}
.admin-section h2 { margin: 0; font-size: 22px; font-weight: 900; }
.admin-section h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--muted); }

.admin-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

.admin-hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }

/* === Hero === */
.admin-hero {
  display: grid; gap: 18px; grid-template-columns: minmax(260px, 1fr) auto;
  padding: 22px; border-radius: 18px; align-items: center;
  background:
    linear-gradient(135deg, rgba(66, 133, 244, 0.18), rgba(52, 168, 83, 0.10) 50%, rgba(251, 188, 5, 0.10)),
    var(--panel-deep);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.admin-hero-large {
  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
  padding: 28px;
}
.admin-hero-pulse {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(52, 168, 83, 0.18);
  animation: live-pulse 1.6s ease-out infinite;
  margin-inline-end: 6px;
  vertical-align: 2px;
}
.admin-hero::before {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 260px; height: 260px; border-radius: 999px;
  background: conic-gradient(from 0deg, var(--blue), var(--red), var(--yellow), var(--green), var(--blue));
  filter: blur(60px); opacity: 0.55; pointer-events: none;
}
.admin-hero-eyebrow {
  margin: 0 0 4px; color: #2d5f9e; font-weight: 900; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.admin-hero-title { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -0.3px; }
.admin-hero-sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (prefers-color-scheme: dark) {
  .admin-hero-eyebrow { color: #b9d2ff; }
}
.admin-hero-live {
  display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-hero-live-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
@media (max-width: 700px) {
  .admin-hero { grid-template-columns: 1fr; }
}
.admin-live-card {
  position: relative; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel-deep);
  display: grid; gap: 4px; min-width: 130px;
  transition: transform 160ms ease, box-shadow 160ms ease;
  overflow: hidden;
}
.admin-live-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue);
}
.admin-live-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.admin-live-card strong {
  font-size: 24px; font-weight: 900; letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}
.admin-live-card span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.admin-live-card-blue::before   { background: var(--blue); }
.admin-live-card-green::before  { background: var(--green); }
.admin-live-card-yellow::before { background: var(--yellow); }
.admin-live-card-red::before    { background: var(--red); }
.admin-live-dot {
  position: absolute; right: 10px; top: 12px; width: 8px; height: 8px; border-radius: 999px;
  background: var(--green); box-shadow: 0 0 0 6px rgba(52, 168, 83, 0.18);
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(52, 168, 83, 0.18); }
  50% { box-shadow: 0 0 0 10px rgba(52, 168, 83, 0.05); }
}

/* === Stats === */
.admin-stats {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.admin-stat {
  position: relative; overflow: hidden;
  padding: 14px; border-radius: 12px; background: var(--panel-deep);
  border: 1px solid var(--line); display: grid; gap: 4px;
}
.admin-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--muted);
}
.admin-stat-blue::before { background: var(--blue); }
.admin-stat-red::before { background: var(--red); }
.admin-stat-yellow::before { background: var(--yellow); }
.admin-stat-green::before { background: var(--green); }
.admin-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.admin-stat-value { font-size: 24px; font-weight: 900; letter-spacing: -0.3px; }
.admin-stat-big { font-size: 32px; font-weight: 900; }
.admin-stat-sub { color: var(--muted); font-size: 12px; }

/* Card accents */
.admin-card-accent-blue   { border-top: 3px solid var(--blue); }
.admin-card-accent-red    { border-top: 3px solid var(--red); }
.admin-card-accent-yellow { border-top: 3px solid var(--yellow); }
.admin-card-accent-green  { border-top: 3px solid var(--green); }

/* Activity feed */
.admin-activity { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.admin-activity li {
  display: grid; grid-template-columns: 12px minmax(0, auto) 1fr auto; gap: 10px;
  align-items: center; padding: 8px 10px; border-radius: 10px;
  background: rgba(66, 133, 244, 0.05); border: 1px solid var(--line);
}
.admin-activity-empty { color: var(--muted); padding: 12px !important; text-align: center; background: transparent !important; border: 1px dashed var(--line) !important; }
.admin-activity-dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--blue);
}
.admin-activity-dot.red { background: var(--red); }
.admin-activity-dot.yellow { background: var(--yellow); }
.admin-activity-dot.green { background: var(--green); }
.admin-activity strong { font-size: 13px; }
.admin-activity .admin-activity-detail { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-activity time { color: var(--muted); font-size: 11px; white-space: nowrap; }

/* Notes */
.admin-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.admin-notes li {
  padding: 10px 12px; border-radius: 10px;
  background: rgba(251, 188, 5, 0.08); border: 1px solid rgba(251, 188, 5, 0.22);
}
.admin-notes li p { margin: 0 0 6px; line-height: 1.45; font-size: 13px; }
.admin-notes li time { color: var(--muted); font-size: 11px; }
.admin-notes-empty { color: var(--muted); padding: 12px !important; text-align: center; background: transparent !important; border: 1px dashed var(--line) !important; }

/* === Cards layout (sessions by user) === */
.admin-cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.admin-user-card {
  position: relative; padding: 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel-deep);
  display: grid; gap: 10px; cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.admin-user-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.admin-user-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-user-card-head img,
.admin-user-card-head .admin-avatar-fallback {
  width: 36px; height: 36px; border-radius: 999px; flex: 0 0 auto;
}
.admin-avatar-fallback {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--green));
  color: white; font-weight: 900;
}
.admin-user-card-head strong { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-card-head span { font-size: 12px; color: var(--muted); }

.admin-user-card-stats {
  display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-user-card-stats > div {
  padding: 8px 10px; border-radius: 10px; background: rgba(66, 133, 244, 0.06);
}
.admin-user-card-stats strong { display: block; font-size: 16px; font-weight: 900; }
.admin-user-card-stats span { font-size: 11px; color: var(--muted); }

/* === Permissions matrix on Admins === */
.admin-perms { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.admin-perms li {
  position: relative; padding-inline-start: 22px; font-size: 12px; line-height: 1.4;
}
.admin-perms li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 4px;
  width: 14px; height: 14px; border-radius: 999px;
}
.admin-perms-yes li::before { background: rgba(52, 168, 83, 0.18); box-shadow: inset 0 0 0 4px var(--green); }
.admin-perms-no li::before  { background: rgba(234, 67, 53, 0.16); box-shadow: inset 0 0 0 4px var(--red); }
.admin-perms-no li { color: var(--muted); }

/* === Site Settings form === */
.admin-form-field {
  display: grid; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--muted);
}
.admin-form-field input,
.admin-form-field select {
  min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--panel); color: var(--ink);
}

.admin-pricing-grid {
  display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px;
}

.admin-switch {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  font-size: 13px; cursor: pointer;
}
.admin-switch input { display: none; }
.admin-switch span {
  width: 36px; height: 20px; border-radius: 999px;
  background: rgba(40, 55, 85, 0.18); position: relative; transition: background 200ms;
  flex: 0 0 auto;
}
.admin-switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 999px;
  background: white; transition: transform 200ms;
}
.admin-switch input:checked + span { background: var(--green); }
.admin-switch input:checked + span::after { transform: translateX(16px); }

.admin-theme-row {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
}
.admin-theme-row label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px;
}
.admin-theme-row .swatch {
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--line); flex: 0 0 auto;
}
/* === Site Settings: subsection blocks === */
.admin-settings-block {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(66, 133, 244, 0.04);
  border: 1px solid var(--line);
}
.admin-settings-block-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.admin-settings-block-head h3 {
  margin: 0; font-size: 16px; font-weight: 900; color: var(--ink);
}
.admin-settings-block-head span {
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--muted);
}
.admin-settings-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.admin-plans-editor {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 4px;
}
.admin-plan-card {
  display: grid; gap: 12px;
  border-radius: 14px; padding: 14px;
}
.admin-plan-free  { border-top: 3px solid var(--blue);   }
.admin-plan-plus  { border-top: 3px solid var(--yellow); }
.admin-plan-pro   { border-top: 3px solid var(--green);  }
.admin-plan-team  { border-top: 3px solid var(--red);    }
.admin-plan-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.admin-plan-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 16px; font-weight: 900;
  border: 0; background: transparent; color: var(--ink);
  border-bottom: 1px dashed var(--line); padding: 4px 0;
}
.admin-plan-grid {
  display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-plan-features h4 {
  margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.admin-plan-features ul {
  list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px;
}
.admin-plan-feature {
  display: flex; gap: 6px; align-items: center;
}
.admin-plan-feature input {
  flex: 1; min-height: 32px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: 13px;
}
.admin-plan-feature button {
  width: 32px; min-height: 32px; padding: 0;
}

.swatch-default { background: linear-gradient(135deg, var(--blue), var(--green)); }
.swatch-ocean   { background: linear-gradient(135deg, #4285f4, #00b4d8); }
.swatch-sunset  { background: linear-gradient(135deg, #ea4335, #fbbc05); }
.swatch-forest  { background: linear-gradient(135deg, #34a853, #166534); }

/* === User detail file breakdown === */
.admin-files-bars {
  display: grid; gap: 6px; margin-top: 10px;
}
.admin-files-bar {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 8px;
  align-items: center; font-size: 12px;
}
.admin-files-bar .track {
  height: 6px; border-radius: 999px; background: rgba(66, 133, 244, 0.12);
  overflow: hidden;
}
.admin-files-bar .track > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

/* === Summary cards (Dashboard / Subscriptions / Teams) ================== */
.admin-summary-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.admin-summary-card {
  position: relative; overflow: hidden;
  padding: 18px 18px 16px; border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 50%),
    var(--panel-deep);
  border: 1px solid var(--line);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.admin-summary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.admin-summary-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--blue);
}
.admin-summary-card::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 140px; height: 140px; border-radius: 999px;
  background: radial-gradient(circle, currentColor 0%, transparent 60%);
  opacity: 0.06; pointer-events: none; color: var(--blue);
}
.admin-summary-blue::before   { background: var(--blue); }
.admin-summary-blue::after    { color: var(--blue); }
.admin-summary-green::before  { background: var(--green); }
.admin-summary-green::after   { color: var(--green); }
.admin-summary-yellow::before { background: var(--yellow); }
.admin-summary-yellow::after  { color: var(--yellow); }
.admin-summary-red::before    { background: var(--red); }
.admin-summary-red::after     { color: var(--red); }
.admin-summary-label {
  display: block; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 800;
}
.admin-summary-value {
  display: block; margin: 6px 0 4px;
  font-size: 28px; font-weight: 900; letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums; unicode-bidi: isolate;
}
.admin-summary-sub { display: block; font-size: 12px; color: var(--muted); }

/* === Toolbar (search + view toggle) ===================================== */
.admin-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-inline-start: auto;
}
.admin-toolbar-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; min-height: 36px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-deep);
  min-width: 240px; box-shadow: var(--shadow-soft);
}
.admin-toolbar-search input {
  width: 100%; min-height: 36px; border: 0; outline: none; background: transparent;
}
.admin-toolbar-search svg { color: var(--muted); }
.admin-toolbar-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel-deep);
}
.admin-toolbar-toggle .admin-chip { padding: 4px 14px; min-height: 28px; }

.admin-filters-rich .admin-chip-divider {
  width: 1px; height: 22px; background: var(--line); margin: 0 6px;
}
.admin-filters-rich .admin-chip.plan-free   { color: white; background: linear-gradient(135deg, #6b778c, #455467); border: 0; opacity: 0.55; }
.admin-filters-rich .admin-chip.plan-plus   { color: #1f1500; background: linear-gradient(135deg, var(--yellow), #d99a00); border: 0; opacity: 0.55; }
.admin-filters-rich .admin-chip.plan-pro    { color: white; background: linear-gradient(135deg, var(--blue), #1a4a96); border: 0; opacity: 0.55; }
.admin-filters-rich .admin-chip.plan-team   { color: white; background: linear-gradient(135deg, #9c27b0, #5b2786); border: 0; opacity: 0.55; }
.admin-filters-rich .admin-chip.plan-free.is-active,
.admin-filters-rich .admin-chip.plan-plus.is-active,
.admin-filters-rich .admin-chip.plan-pro.is-active,
.admin-filters-rich .admin-chip.plan-team.is-active { opacity: 1; transform: scale(1.04); }
.admin-filters-rich .admin-chip.is-status-active    { color: white; background: linear-gradient(135deg, var(--green), #1f7a3f); border: 0; opacity: 0.55; }
.admin-filters-rich .admin-chip.is-status-suspended { color: white; background: linear-gradient(135deg, var(--red), #8a1f17); border: 0; opacity: 0.55; }
.admin-filters-rich .admin-chip.is-status-cancelled { color: #1f1500; background: linear-gradient(135deg, var(--yellow), #b07c00); border: 0; opacity: 0.55; }
.admin-filters-rich .admin-chip.is-status-expired   { color: white; background: linear-gradient(135deg, var(--red), #8a1f17); border: 0; opacity: 0.55; }
.admin-filters-rich .admin-chip.is-active { opacity: 1; transform: scale(1.04); }

.admin-hint-empty {
  text-align: center; padding: 22px;
  border: 1px dashed var(--line); border-radius: 14px;
  background: rgba(66, 133, 244, 0.03);
  color: var(--muted);
}

/* === Users filter rows ================================================= */
.admin-filter-rows {
  display: grid; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(66, 133, 244, 0.04);
}
.admin-filter-row {
  display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: center;
}
@media (max-width: 700px) {
  .admin-filter-row { grid-template-columns: 1fr; }
}
.admin-filter-label {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.6px; font-weight: 800;
}

/* === Users cards layout — bullet-proof grid (no overlap) =============== */
.admin-cards-users { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.admin-user-list-card {
  padding: 16px;
  display: grid; gap: 12px;
}
.admin-user-card-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.admin-user-card-avatar {
  position: relative;
  width: 44px; height: 44px;
}
.admin-user-card-avatar img,
.admin-user-card-avatar .admin-avatar-fallback {
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 900;
}
.admin-user-card-online {
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--panel-deep), 0 0 0 4px var(--green);
  animation: live-pulse 1.6s ease-out infinite;
}
.admin-user-card-identity {
  min-width: 0;
}
.admin-user-card-identity strong {
  display: block; font-size: 14px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-user-card-identity span {
  display: block; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-user-card-tags {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
  flex: 0 0 auto;
}
.admin-user-card-stats {
  display: grid; gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(66, 133, 244, 0.06);
}
.admin-user-card-stats > div {
  text-align: center; min-width: 0;
}
.admin-user-card-stats strong {
  display: block; font-size: 12px; font-weight: 800;
  /* tabular-nums + isolate keeps ISO dates from being mangled by RTL bidi.
     No nowrap/ellipsis — at this width "2026-05-09" must show in full,
     not as "2026-…". Wrap is allowed if the cell is ever genuinely tight. */
  font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr;
  white-space: normal; word-break: keep-all; line-height: 1.2;
}
.admin-user-card-stats span {
  display: block; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px;
}
.admin-user-card-free::before  { background: linear-gradient(180deg, #6b778c, #455467) !important; }
.admin-user-card-plus::before  { background: linear-gradient(180deg, var(--yellow), #d99a00) !important; }
.admin-user-card-pro::before   { background: linear-gradient(180deg, var(--blue), #1a4a96) !important; }
.admin-user-card-team::before  { background: linear-gradient(180deg, #9c27b0, #5b2786) !important; }
.admin-user-card { position: relative; overflow: hidden; }
.admin-user-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue);
}
.admin-user-card.is-connected {
  box-shadow: 0 0 0 1px rgba(52, 168, 83, 0.4), var(--shadow-soft);
}

/* === Compact view ====================================================== */
.admin-compact { display: grid; gap: 4px; }
.admin-compact-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 2fr) 70px 90px 110px;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-deep);
  text-align: start;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  position: relative; overflow: hidden;
}
.admin-compact-row:hover { transform: translateX(2px); box-shadow: var(--shadow-soft); }
.admin-compact-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.admin-compact-free::before { background: linear-gradient(180deg, #6b778c, #455467); }
.admin-compact-plus::before { background: linear-gradient(180deg, var(--yellow), #d99a00); }
.admin-compact-pro::before  { background: linear-gradient(180deg, var(--blue), #1a4a96); }
.admin-compact-team::before { background: linear-gradient(180deg, #9c27b0, #5b2786); }
.admin-compact-row.is-connected { box-shadow: inset 0 0 0 1px rgba(52, 168, 83, 0.32); }
.admin-compact-avatar {
  position: relative; width: 36px; height: 36px;
}
.admin-compact-avatar img {
  width: 36px; height: 36px; border-radius: 999px;
}
.admin-compact-avatar-fallback {
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--green));
  color: white; font-weight: 900; font-size: 14px;
}
.admin-compact-online {
  position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--panel-deep);
  animation: live-pulse 1.6s ease-out infinite;
}
.admin-compact-name { min-width: 0; }
.admin-compact-name strong {
  display: block; font-size: 13px; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-compact-name em {
  display: block; font-style: normal; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-compact-pill { display: flex; justify-content: flex-end; }
.admin-compact-meta { text-align: end; min-width: 0; }
.admin-compact-meta strong {
  display: block; font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums; unicode-bidi: isolate;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-compact-meta em {
  display: block; font-style: normal; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
@media (max-width: 700px) {
  .admin-compact-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }
  .admin-compact-row .admin-compact-meta:nth-of-type(2),
  .admin-compact-row .admin-compact-pill { display: none; }
}

/* Inline online dot for the table view */
.admin-online-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: var(--green); margin-inline-start: 6px; vertical-align: 1px;
  animation: live-pulse 1.6s ease-out infinite;
}

/* === Notes row actions ================================================= */
.admin-notes li { display: grid; gap: 6px; }
.admin-notes-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.admin-notes-actions { display: flex; gap: 4px; }
.admin-notes-actions button { min-height: 28px; padding: 0 10px; font-size: 11px; }

/* === Subscription cards ================================================= */
.admin-cards-subs { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.admin-sub-card {
  position: relative; padding: 16px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel-deep);
  display: grid; gap: 12px; overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.admin-sub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.admin-sub-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.admin-sub-card-free::before { background: linear-gradient(180deg, #6b778c, #455467); }
.admin-sub-card-plus::before { background: linear-gradient(180deg, var(--yellow), #d99a00); }
.admin-sub-card-pro::before  { background: linear-gradient(180deg, var(--blue), #1a4a96); }
.admin-sub-card-team::before { background: linear-gradient(180deg, #9c27b0, #5b2786); }
.admin-sub-card-head {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
}
.admin-sub-card-owner strong { font-size: 14px; font-weight: 800; display: block; }
.admin-sub-card-owner span { font-size: 11px; color: var(--muted); }
.admin-sub-card-pills { display: grid; gap: 4px; justify-items: end; }
.admin-sub-card-body {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  font-size: 12px; padding: 10px 12px;
  background: rgba(66, 133, 244, 0.04); border-radius: 10px;
}
.admin-sub-card-body span { display: block; color: var(--muted); margin-bottom: 2px; }
.admin-sub-card-body strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.admin-sub-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-sub-status-cancelled { opacity: 0.92; }
.admin-sub-status-expired { opacity: 0.7; }

/* === Team cards ========================================================= */
.admin-cards-teams { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.admin-team-card {
  position: relative; padding: 16px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel-deep);
  display: grid; gap: 12px; cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
  overflow: hidden;
}
.admin-team-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.admin-team-card::before {
  content: ""; position: absolute; right: -50px; top: -50px;
  width: 160px; height: 160px; border-radius: 999px;
  background: conic-gradient(from 0deg, var(--blue), var(--red), var(--yellow), var(--green), var(--blue));
  filter: blur(50px); opacity: 0.18; pointer-events: none;
}
.admin-team-card-head { display: flex; align-items: center; gap: 12px; }
.admin-team-card-mark {
  width: 38px; height: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 6px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel);
  flex: 0 0 auto;
}
.admin-team-card-mark span { border-radius: 999px; }
.admin-team-card-mark span:nth-child(1) { background: var(--blue); }
.admin-team-card-mark span:nth-child(2) { background: var(--red); }
.admin-team-card-mark span:nth-child(3) { background: var(--yellow); }
.admin-team-card-mark span:nth-child(4) { background: var(--green); }
.admin-team-card-name { min-width: 0; }
.admin-team-card-name strong { display: block; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-team-card-name span { font-size: 12px; color: var(--muted); }
.admin-team-card-pills { margin-inline-start: auto; display: grid; gap: 4px; justify-items: end; }
.admin-team-card-body {
  display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr);
}
.admin-team-card-stat {
  padding: 10px; text-align: center;
  background: rgba(66, 133, 244, 0.05); border-radius: 10px;
}
.admin-team-card-stat strong { display: block; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.admin-team-card-stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.admin-team-card-bar {
  position: relative; height: 8px;
  background: rgba(40, 55, 85, 0.12); border-radius: 999px; overflow: visible;
}
.admin-team-card-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}
.admin-team-card-bar em {
  position: absolute; right: 0; top: 12px;
  font-style: normal; font-size: 11px; color: var(--muted);
}
.admin-team-card-foot { display: flex; justify-content: flex-end; }

/* === Recent activity card (counters instead of repeating list) ========== */
.admin-activity-card { padding: 18px; }
.admin-activity-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.admin-activity-total {
  font-size: 36px; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--blue), var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  unicode-bidi: isolate; font-variant-numeric: tabular-nums;
}
.admin-activity-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.admin-activity-tile {
  position: relative; padding: 14px 16px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.admin-activity-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.admin-activity-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.admin-activity-tile span {
  display: block; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 800;
}
.admin-activity-tile strong {
  display: block; margin: 4px 0 2px;
  font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums; unicode-bidi: isolate;
}
.admin-activity-tile em {
  display: block; font-style: normal; font-size: 11px; color: var(--muted);
}
.admin-activity-blue::before   { background: var(--blue); }
.admin-activity-green::before  { background: var(--green); }
.admin-activity-yellow::before { background: var(--yellow); }
.admin-activity-red::before    { background: var(--red); }

.admin-activity-details {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.admin-activity-details summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted);
  list-style: none; user-select: none;
  padding: 6px 0;
}
.admin-activity-details summary::-webkit-details-marker { display: none; }
.admin-activity-details summary::after {
  content: " ›"; transition: transform 160ms ease;
  display: inline-block;
}
.admin-activity-details[open] summary::after { transform: rotate(90deg); }
.admin-activity-details .admin-activity { margin-top: 10px; }

/* === Logins / logouts (auth) card ====================================== */
.admin-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.admin-card-head h3 { margin: 0; font-size: 14px; font-weight: 900; }
.admin-auth-card { padding: 18px; }
.admin-auth-stats {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 14px;
}
.admin-auth-hours-grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 110px;
  padding: 6px 0 0;
  border-top: 1px dashed var(--line);
}
.admin-auth-hour {
  position: relative; display: grid; align-items: end; gap: 4px;
  height: 100%;
  padding-bottom: 18px;
}
.admin-auth-hour > span {
  display: block; width: 100%;
  background: linear-gradient(180deg, var(--blue), rgba(66, 133, 244, 0.4));
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: filter 120ms ease;
}
.admin-auth-hour:hover > span { filter: brightness(1.18); }
.admin-auth-hour > em {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 9px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.admin-auth-hour.is-peak > span {
  background: linear-gradient(180deg, var(--green), rgba(52, 168, 83, 0.4));
  box-shadow: 0 0 0 1px var(--green);
}
.admin-auth-hour.is-peak > em { color: var(--green); font-weight: 800; }

/* === Top 10 Countries card ============================================= */
.admin-countries-card { padding: 18px; }
.admin-countries-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
  counter-reset: country;
}
.admin-countries-list li {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 32px 32px minmax(110px, 1fr) minmax(60px, 1.2fr) auto;
  padding: 8px 10px;
  border-radius: 10px; border: 1px solid var(--line);
  background: rgba(66, 133, 244, 0.04);
  transition: transform 160ms ease, background 160ms ease;
}
.admin-countries-list li:hover {
  transform: translateX(4px);
  background: rgba(66, 133, 244, 0.10);
}
.admin-countries-list li:nth-child(1) { background: linear-gradient(90deg, rgba(251, 188, 5, 0.18), transparent 60%); border-color: rgba(251, 188, 5, 0.4); }
.admin-countries-list li:nth-child(2) { background: linear-gradient(90deg, rgba(150, 162, 184, 0.20), transparent 60%); }
.admin-countries-list li:nth-child(3) { background: linear-gradient(90deg, rgba(213, 124, 24, 0.18), transparent 60%); }

.admin-countries-rank {
  font-size: 13px; font-weight: 900; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: center;
}
.admin-countries-list li:nth-child(1) .admin-countries-rank { color: #d99a00; }
.admin-countries-list li:nth-child(2) .admin-countries-rank { color: #6b778c; }
.admin-countries-list li:nth-child(3) .admin-countries-rank { color: #c54c00; }
.admin-countries-flag { font-size: 22px; line-height: 1; text-align: center; }
.admin-countries-name strong { display: block; font-size: 13px; font-weight: 800; }
.admin-countries-name em {
  display: block; font-style: normal; font-size: 11px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.admin-countries-bar {
  height: 8px; border-radius: 999px;
  background: rgba(40, 55, 85, 0.12); overflow: hidden;
}
.admin-countries-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 999px;
}
.admin-countries-meta {
  font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: end;
  white-space: nowrap;
}
.admin-countries-empty {
  color: var(--muted); padding: 16px; text-align: center;
  border: 1px dashed var(--line); border-radius: 12px;
}

/* === Reports (printable PDF style) ====================================== */

.admin-report { display: grid; gap: 16px; }
/* Report page: a strongly branded document, not a flat white sheet.
   Four faint corner auras of the Googline palette + a thin gradient
   border up top so the page reads as a "branded document". */
.admin-report-page {
  position: relative;
  display: grid; gap: 28px;
  padding: 32px;
  border-radius: 18px;
  border: 1px solid var(--line);
  color: var(--ink);
  background:
    radial-gradient(circle at 0% 0%,   rgba(66, 133, 244, 0.16), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(52, 168, 83, 0.13), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(251, 188, 5, 0.11), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(234, 67, 53, 0.10), transparent 55%),
    var(--panel-deep);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.admin-report-page::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--red), var(--yellow), var(--green));
  border-radius: 18px 18px 0 0;
}
.admin-report-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 6px 0 16px;
  border-bottom: 1px dashed var(--line);
}
.admin-report-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  color: #2d5f9e; font-weight: 900;
}
.admin-report-head h1 { margin: 6px 0 4px; font-size: 22px; font-weight: 900; letter-spacing: -0.3px; line-height: 1.25; }
.admin-report-head p { margin: 0; color: var(--muted); font-size: 12px; }
.admin-report-brand { display: flex; align-items: center; gap: 8px; font-weight: 900; }
/* Make sure the brand logo dots actually print as their brand color —
   browsers strip background fills by default unless we opt in. */
.admin-report-brand .logo,
.admin-report-brand .logo span {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
@media (prefers-color-scheme: dark) {
  .admin-report-eyebrow { color: #b9d2ff; }
}

/* ===== KPI strip =====
   Six infographic cards: large icon chip, label, big number, sub-line.
   Auto-fits 2–6 across based on available width. */
.admin-report-kpis {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.admin-kpi {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  display: grid; gap: 4px;
  align-content: start;
  overflow: hidden;
  /* Per-tier background overridden below; this is the fallback. */
  background: var(--panel-deep);
}
.admin-kpi-blue {
  background: linear-gradient(160deg, rgba(66, 133, 244, 0.14), rgba(66, 133, 244, 0.02) 70%), var(--panel-deep);
  border-color: rgba(66, 133, 244, 0.28);
}
.admin-kpi-green {
  background: linear-gradient(160deg, rgba(52, 168, 83, 0.14), rgba(52, 168, 83, 0.02) 70%), var(--panel-deep);
  border-color: rgba(52, 168, 83, 0.28);
}
.admin-kpi-yellow {
  background: linear-gradient(160deg, rgba(251, 188, 5, 0.18), rgba(251, 188, 5, 0.02) 70%), var(--panel-deep);
  border-color: rgba(251, 188, 5, 0.32);
}
.admin-kpi-red {
  background: linear-gradient(160deg, rgba(234, 67, 53, 0.14), rgba(234, 67, 53, 0.02) 70%), var(--panel-deep);
  border-color: rgba(234, 67, 53, 0.28);
}
.admin-kpi::after {
  content: ""; position: absolute; inset: auto -10% -55% auto;
  width: 160px; height: 160px; border-radius: 999px;
  filter: blur(45px); opacity: 0.16; pointer-events: none;
}
.admin-kpi-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  margin-bottom: 8px;
}
.admin-kpi-label {
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); font-weight: 800;
}
.admin-kpi strong {
  font-size: 34px; font-weight: 900; line-height: 1.05; letter-spacing: -0.6px;
  color: var(--ink);
}
.admin-kpi small {
  color: var(--muted); font-size: 11.5px; line-height: 1.4;
  margin-top: 2px;
}
.admin-kpi-blue   .admin-kpi-icon { color: var(--blue);  background: rgba(66, 133, 244, 0.14); }
.admin-kpi-green  .admin-kpi-icon { color: var(--green); background: rgba(52, 168, 83, 0.14); }
.admin-kpi-yellow .admin-kpi-icon { color: #b78600;      background: rgba(251, 188, 5, 0.18); }
.admin-kpi-red    .admin-kpi-icon { color: var(--red);   background: rgba(234, 67, 53, 0.14); }
.admin-kpi-blue::after   { background: var(--blue); }
.admin-kpi-green::after  { background: var(--green); }
.admin-kpi-yellow::after { background: var(--yellow); }
.admin-kpi-red::after    { background: var(--red); }
@media (prefers-color-scheme: dark) {
  .admin-kpi-yellow .admin-kpi-icon { color: var(--yellow); }
}

/* ===== Block headers (title left + accent stat right) ===== */
.admin-report-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.admin-report-block-head h3 { margin: 0; }
.admin-report-block-stat {
  font-size: 18px; font-weight: 900; color: var(--ink); letter-spacing: -0.2px;
}

/* ===== Fat bars: bigger track + wider value column =====
   Value column was 96px which forced "54.2% of sessions" to wrap onto
   three lines. 130px keeps it on a single line. */
.admin-report-bars-fat li {
  grid-template-columns: 88px minmax(0, 1fr) 130px;
  gap: 16px;
  font-size: 13px;
}
.admin-report-bars-fat .admin-report-bar-track {
  height: 14px;
}
.admin-report-bars-fat .admin-report-bar-label {
  text-transform: capitalize; font-weight: 700; color: var(--ink);
}
.admin-report-bars-fat .admin-report-bar-value strong {
  font-size: 15px; font-weight: 900; color: var(--ink);
}
.admin-report-bars-empty {
  grid-template-columns: 1fr !important;
  color: var(--muted); font-style: italic; text-align: center;
  padding: 18px 0;
}

/* Donut yellow variant (heaviest-type share callout) */
.admin-report-donut-yellow {
  background: rgba(251, 188, 5, 0.10);
}
.admin-report-donut-green {
  background: rgba(52, 168, 83, 0.08);
}

/* ===== Comparison strip =====
   Three side-by-side cards: time-of-day split, week pattern, growth.
   Each card has a label, two compared values with a divider, and a
   single horizontal bar showing the ratio between them. */
.admin-report-compare { gap: 12px; }
.admin-compare-card {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-deep);
  display: grid; gap: 10px;
}
.admin-compare-tag {
  font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); font-weight: 800;
}
.admin-compare-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.admin-compare-split > div { display: grid; gap: 2px; min-width: 0; }
.admin-compare-split strong {
  font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -0.3px;
}
.admin-compare-split small {
  font-size: 11px; color: var(--muted); line-height: 1.3;
}
.admin-compare-split > div:last-child { text-align: end; }
.admin-compare-vs {
  font-size: 11px; font-weight: 900; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0 2px;
}
.admin-compare-track {
  display: block; width: 100%;
  height: 6px; border-radius: 999px;
  background: rgba(40, 55, 85, 0.10);
  overflow: hidden;
}
.admin-compare-fill {
  display: block; height: 100%;
  width: var(--bar-w, 50%);
  background: var(--bar-c, var(--blue));
  border-radius: 999px;
}
.admin-compare-blue   .admin-compare-tag { color: var(--blue); }
.admin-compare-green  .admin-compare-tag { color: var(--green); }
.admin-compare-yellow .admin-compare-tag { color: #b78600; }
@media (prefers-color-scheme: dark) {
  .admin-compare-yellow .admin-compare-tag { color: var(--yellow); }
}

/* ===== Plan tier breakdown grid =====
   Six columns: tier label, users bar, users count, sessions bar,
   sessions count, avg/user. A real infographic table. */
.admin-plan-grid {
  display: grid;
  gap: 6px;
}
.admin-plan-grid-head,
.admin-plan-grid-row {
  display: grid;
  grid-template-columns:
    72px              /* Tier label */
    minmax(0, 1.4fr)  /* Users bar */
    72px              /* Users count */
    minmax(0, 1.4fr)  /* Sessions bar */
    78px              /* Sessions count */
    72px;             /* Avg / user */
  gap: 12px;
  align-items: center;
}
.admin-plan-grid-head {
  font-size: 10px; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--muted); font-weight: 800;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--line);
}
.admin-plan-grid-head .admin-plan-grid-bar { text-align: start; }
.admin-plan-grid-row {
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.admin-plan-grid-row:last-child { border-bottom: 0; }
.admin-plan-tier {
  text-transform: capitalize; font-weight: 800; color: var(--ink);
  font-size: 14px;
}
.admin-plan-num {
  display: grid; gap: 2px; line-height: 1.15;
  text-align: end;
}
.admin-plan-num strong {
  font-size: 15px; font-weight: 900; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.admin-plan-num small {
  font-size: 11px; color: var(--muted); font-weight: 700;
}
/* Plan grid row owns the layout; the SVG bar inside each row sits
   in its grid cell, vertically centered. Height comes from the SVG's
   own inline style (8px for plan rows) — no need for a CSS height
   override here. */
.admin-plan-grid-row .admin-report-bar-svg {
  align-self: center;
  min-width: 0;
}

/* ===== Highlights / computed insights ===== */
.admin-report-insights {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(66, 133, 244, 0.08), rgba(52, 168, 83, 0.06) 60%, rgba(251, 188, 5, 0.06)),
    var(--panel-deep);
  display: grid; gap: 12px;
}
.admin-insight-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.admin-insight {
  position: relative; overflow: hidden;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: grid; gap: 4px;
}
.admin-insight-tag {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.7px;
  font-weight: 800; color: var(--muted);
}
.admin-insight strong {
  font-size: 20px; font-weight: 900; color: var(--ink); letter-spacing: -0.2px;
  display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.admin-insight strong small {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.admin-insight-foot {
  font-size: 11.5px; color: var(--muted); line-height: 1.4;
}
.admin-insight::before {
  content: ""; position: absolute;
  inset: 0 auto 0 0; width: 3px;
  background: var(--blue);
}
.admin-insight-blue::before   { background: var(--blue); }
.admin-insight-green::before  { background: var(--green); }
.admin-insight-yellow::before { background: var(--yellow); }
.admin-insight-red::before    { background: var(--red); }

/* Legacy 4-card stat grid (kept for any callers still using it). */
.admin-report-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.admin-report-card {
  position: relative; padding: 14px 16px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line);
  display: grid; gap: 4px;
}
.admin-report-card span { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.6px; }
.admin-report-card strong { font-size: 28px; font-weight: 900; line-height: 1.05; }
.admin-report-card small { color: var(--muted); font-size: 11px; }
.admin-report-card-blue   { border-top: 4px solid var(--blue); }
.admin-report-card-green  { border-top: 4px solid var(--green); }
.admin-report-card-yellow { border-top: 4px solid var(--yellow); }
.admin-report-card-red    { border-top: 4px solid var(--red); }

.admin-report-row {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.admin-report-block {
  padding: 18px 20px; border-radius: 14px;
  background: var(--panel-deep);
  border: 1px solid var(--line);
  color: var(--ink);
}
.admin-report-block h3 { margin: 0 0 8px; font-size: 13px; font-weight: 900; color: var(--ink); }
.admin-report-block-full { grid-column: 1 / -1; }
.admin-report-block-row {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: center;
}
/* Chart inherits ink color so axis ticks / value labels stay theme-aware
   (currentColor in the SVG). Aspect-ratio keeps text labels undistorted
   at any container width. */
.admin-report-chart {
  width: 100%; height: auto;
  aspect-ratio: 600 / 180;
  max-height: 220px;
  display: block;
  color: var(--ink);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.admin-report-meta { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.admin-report-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.admin-report-bars li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 90px;
  gap: 14px;
  align-items: center;
  font-size: 12px;
}
.admin-report-bar-label { text-transform: capitalize; color: var(--muted); }
/* Track is a real block container, not an inline span. The fill uses
   CSS custom properties (--bar-w, --bar-c) instead of inline style="
   width:X%;background:Y" because some PDF renderers ignore inline
   width on inline-flow children — switching to custom-property-driven
   sizing makes the bar geometry consistent in screen + print + PDF. */
.admin-report-bar-track {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(40, 55, 85, 0.10);
  overflow: hidden;
}
.admin-report-bar-track > span {
  display: block;
  height: 100%;
  width: var(--bar-w, 0%);
  background: var(--bar-c, var(--blue));
  border-radius: 999px;
  transition: none;
}
.admin-report-bar-value {
  text-align: right;
  font-weight: 800;
  display: grid;
  gap: 2px;
  line-height: 1.15;
  align-content: center;
}
.admin-report-bar-value small {
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
}

.admin-report-donut {
  display: grid; place-items: center; gap: 4px; padding: 8px;
  background: rgba(66, 133, 244, 0.05); border-radius: 12px; color: var(--ink);
  font-size: 11px;
}
.admin-report-donut-red { background: rgba(234, 67, 53, 0.06); }
.admin-report-stat {
  padding: 12px 14px; background: rgba(52, 168, 83, 0.06);
  border-radius: 12px; display: grid; gap: 4px;
}
.admin-report-stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.admin-report-stat strong { font-size: 16px; font-weight: 900; }

.admin-report-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-report-table th { text-align: start; padding: 6px 8px; font-size: 11px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.admin-report-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.admin-report-table .empty { text-align: center; color: var(--muted); padding: 12px; }

/* Document footer reads as the legitimating block of the PDF: a
   deterministic document ID, issuance metadata, and a confidentiality
   line. This is what the user looks for to verify the report came
   from the admin console (the browser's auto URL footer is a separate
   thing that the print dialog controls via "Headers and footers"). */
.admin-report-foot {
  display: grid; gap: 4px;
  padding: 14px 16px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(66, 133, 244, 0.08), rgba(52, 168, 83, 0.04) 50%, rgba(251, 188, 5, 0.04)),
    var(--panel-deep);
  font-size: 11.5px;
  color: var(--muted);
}
.admin-report-foot-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.admin-report-foot-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  font-weight: 800; color: var(--muted);
}
.admin-report-foot-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 900;
  color: var(--ink);
  letter-spacing: 0.5px;
}

/* ===== SVG bar — used everywhere there's a horizontal proportional bar.
   The width is a real <rect width="N"/> in the SVG, not a CSS percentage,
   so it renders identically across screen, print preview, and PDF
   regardless of how the renderer handles inline CSS.
   Height is pinned via inline style by svgBar() to prevent the
   preserveAspectRatio="none" + width:100% combo from auto-scaling the
   bar into a giant balloon shape. */
.admin-report-bar-svg {
  display: block;
  width: 100%;
  /* No height: auto here — inline style on each SVG carries the
     definitive pixel height. */
}

/* ===== Section divider — vibrant numbered badge + title + subtitle.
   Inserted between major report sections to add infographic rhythm
   and make each section feel like its own chapter. */
.admin-report-section-divider {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  padding: 4px 0 6px;
  margin-top: 6px;
}
.admin-report-section-num {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  color: white;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px -4px rgba(66, 133, 244, 0.45);
}
.admin-report-section-divider h2 {
  margin: 0; font-size: 19px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.3px;
}
.admin-report-section-divider p {
  margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.4;
}
.admin-report-section-divider[data-accent="blue"] .admin-report-section-num {
  background: linear-gradient(135deg, #4285f4, #1a73e8);
  box-shadow: 0 6px 14px -4px rgba(66, 133, 244, 0.45);
}
.admin-report-section-divider[data-accent="red"] .admin-report-section-num {
  background: linear-gradient(135deg, #ea4335, #c5221f);
  box-shadow: 0 6px 14px -4px rgba(234, 67, 53, 0.45);
}
.admin-report-section-divider[data-accent="yellow"] .admin-report-section-num {
  background: linear-gradient(135deg, #fbbc05, #f29900);
  box-shadow: 0 6px 14px -4px rgba(251, 188, 5, 0.45);
}
.admin-report-section-divider[data-accent="green"] .admin-report-section-num {
  background: linear-gradient(135deg, #34a853, #1e8e3e);
  box-shadow: 0 6px 14px -4px rgba(52, 168, 83, 0.45);
}

/* Print stylesheet — kicks in for window.print() / Save as PDF.
   Hides the admin chrome and lays the report out on A4.
   Critically: forces print-color-adjust so the accent backgrounds,
   logo dots, chart bars, and insight rails all render in color
   (browsers strip background colors from print by default).

   The @page margin-box rules below are a best-effort attempt to
   suppress the browser-injected URL / date / page-number footer.
   Firefox honors these; Chrome ignores them (the user still has to
   uncheck "Headers and footers" in More settings — which is why we
   show the pre-print gate modal). */
@page {
  size: A4;
  margin: 12mm;
  @top-left      { content: ""; }
  @top-center    { content: ""; }
  @top-right     { content: ""; }
  @bottom-left   { content: ""; }
  @bottom-center { content: ""; }
  @bottom-right  { content: ""; }
}
@media print {
  /* === Performance fix ===
     The on-screen report deliberately uses 4 radial-gradient corner
     auras on the page + ::after blur(45px) glows on every KPI card
     + semi-transparent panels — all great looking on a monitor.
     But at 300 DPI print resolution those effects make the renderer
     spike (audible fan + visible scroll lag in the print preview).
     This block REPLACES every heavy effect with cheap flat-color
     equivalents, and limits print-color-adjust:exact to just the
     ~16 selectors that carry meaning through a CSS background
     (browsers strip those by default). The universal `body *`
     version was the single biggest contributor to the slowdown.

     The screen view (sections above this @media print rule) is
     untouched — the operator sees the same rich page they liked. */

  /* Force light theme for the printed page, regardless of the
     operator's prefers-color-scheme. Variables are scoped to the
     report page; the rest of the admin chrome is hidden anyway. */
  body.admin-printing .admin-report-page {
    --ink: #1a2233;
    --muted: #5a6677;
    --panel: #ffffff;
    --panel-deep: #ffffff;
    --line: #e1e7f1;
    --line-strong: #c9d3e2;
    color: #1a2233;
    background: #ffffff;
    border-color: #e1e7f1;
    box-shadow: none;
    padding: 22px;
  }
  /* Kill expensive effects */
  body.admin-printing .admin-kpi::after { display: none !important; }
  body.admin-printing .admin-report-page,
  body.admin-printing .admin-report-block,
  body.admin-printing .admin-kpi,
  body.admin-printing .admin-insight,
  body.admin-printing .admin-report-insights,
  body.admin-printing .admin-report-foot,
  body.admin-printing .admin-report-donut {
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body.admin-printing .admin-report-page,
  body.admin-printing .admin-report-page * { filter: none !important; }

  /* Hide admin chrome */
  body.admin-printing .admin-sidebar,
  body.admin-printing .admin-topbar,
  body.admin-printing .admin-section-head,
  body.admin-printing .admin-modal,
  body.admin-printing .admin-toast,
  /* Old print-gate modal was removed entirely; nothing to hide. */
  body.admin-printing .admin-section:not([data-section="reports"]),
  body.admin-printing .admin-section[data-section="reports"] > p,
  body.admin-printing .admin-section[data-section="reports"] .admin-section-head { display: none !important; }
  body.admin-printing .admin-app { grid-template-columns: 1fr; }
  body.admin-printing .admin-main { padding: 0; }
  body.admin-printing .admin-section { border: 0; padding: 0; box-shadow: none; background: transparent; }

  /* Keep the cheap top brand bar — it's a simple linear-gradient */
  body.admin-printing .admin-report-page::before {
    background: linear-gradient(90deg, #4285f4, #ea4335, #fbbc05, #34a853);
  }

  /* KPI cards: SOLID light tints (was: linear-gradient + glow).
     Same identity per tier, ~10× cheaper to rasterize at 300 DPI. */
  body.admin-printing .admin-kpi        { background: #ffffff; border-color: #e1e7f1; color: #1a2233; }
  body.admin-printing .admin-kpi-blue   { background: #eef4fe; border-color: #c5dafd; }
  body.admin-printing .admin-kpi-green  { background: #effaf2; border-color: #b6e6c5; }
  body.admin-printing .admin-kpi-yellow { background: #fff8e5; border-color: #f6dba0; }
  body.admin-printing .admin-kpi-red    { background: #fdf1f0; border-color: #f4c2bb; }
  body.admin-printing .admin-kpi strong { color: #111827; }
  body.admin-printing .admin-kpi small,
  body.admin-printing .admin-kpi-label  { color: #5a6677; }

  /* Blocks + insights: white panels, soft borders */
  body.admin-printing .admin-report-block    { background: #ffffff; border-color: #e1e7f1; color: #1a2233; }
  body.admin-printing .admin-report-insights { background: #fafbfd; border-color: #e1e7f1; }
  body.admin-printing .admin-insight         { background: #ffffff; border-color: #e1e7f1; color: #1a2233; }
  body.admin-printing .admin-insight-tag,
  body.admin-printing .admin-insight-foot,
  body.admin-printing .admin-report-meta     { color: #5a6677; }

  /* Donut wrappers: solid pale tints */
  body.admin-printing .admin-report-donut-blue   { background: #f1f6fe; }
  body.admin-printing .admin-report-donut-green  { background: #f1f9f4; }
  body.admin-printing .admin-report-donut-yellow { background: #fff8e6; }
  body.admin-printing .admin-report-donut-red    { background: #fdf2f1; }

  /* Document footer: light tint, monospace doc-id stays sharp */
  body.admin-printing .admin-report-foot    { background: #f5f7fb; border-color: #e1e7f1; color: #5a6677; }
  body.admin-printing .admin-report-foot-id { color: #1a2233; }

  /* Targeted print-color-adjust — only what carries meaning through a
     CSS background. NOT the universal `*` selector; that was the
     biggest perf hog. */
  body.admin-printing .admin-report-brand .logo span,
  body.admin-printing .admin-report-page::before,
  body.admin-printing .admin-kpi-blue,
  body.admin-printing .admin-kpi-green,
  body.admin-printing .admin-kpi-yellow,
  body.admin-printing .admin-kpi-red,
  body.admin-printing .admin-kpi-icon,
  body.admin-printing .admin-insight,
  body.admin-printing .admin-insight::before,
  body.admin-printing .admin-report-block,
  body.admin-printing .admin-report-insights,
  body.admin-printing .admin-report-foot,
  body.admin-printing .admin-report-bar-track,
  body.admin-printing .admin-report-bar-track > span,
  body.admin-printing .admin-report-donut,
  body.admin-printing .admin-report-donut-blue,
  body.admin-printing .admin-report-donut-green,
  body.admin-printing .admin-report-donut-yellow,
  body.admin-printing .admin-report-donut-red,
  body.admin-printing .admin-report-stat {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Keep KPI / insight cards from splitting across a page break */
  body.admin-printing .admin-kpi,
  body.admin-printing .admin-insight,
  body.admin-printing .admin-report-block,
  body.admin-printing .admin-report-foot { break-inside: avoid; page-break-inside: avoid; }

  /* ===== Explicit page boundaries =====
     The renderReport() template tags the rows that should start a
     fresh page with .admin-report-page-break. Force the break here
     so the export looks like:
       PAGE 1 — Header · KPI strip · Trend charts
       PAGE 2 — Behavior · File composition · Plan tiers · Plan dist
       PAGE 3 — Highlights · Footer
     Without these, A4 chops sections mid-row and orphans titles. */
  body.admin-printing .admin-report-page-break {
    break-before: page;
    page-break-before: always;
  }

  /* ===== Tighten print density =====
     Screen has generous 28px page gaps for the rich gradient look.
     On paper the same spacing wastes real estate — pull it in so
     every page fills with content instead of trailing whitespace. */
  body.admin-printing .admin-report-page { gap: 16px; padding: 22px; }
  body.admin-printing .admin-report-row,
  body.admin-printing .admin-report-kpis,
  body.admin-printing .admin-insight-grid { gap: 10px; }
  body.admin-printing .admin-report-block { padding: 14px 16px; }
  body.admin-printing .admin-kpi { padding: 14px 14px 12px; }
  body.admin-printing .admin-insight { padding: 10px 12px; }
  body.admin-printing .admin-report-insights { padding: 14px 16px; }
  body.admin-printing .admin-report-foot { padding: 12px 14px; }

  /* ===== Stronger cover title =====
     The header is the user's first visual impression. Bump the size
     and tighten the breathing room so it reads as a formal document
     header, not a dashboard panel. */
  body.admin-printing .admin-report-head h1 { font-size: 24px; line-height: 1.2; }
  body.admin-printing .admin-report-head { padding: 4px 0 14px; }
  body.admin-printing .admin-report-eyebrow { color: #2d5f9e; }

  /* ===== Trim secondary content on paper =====
     1) Hide the two extra stat cards in the donut row (Average
        session + Last 24h) — both numbers already appear in the
        KPI strip on page 1, so repeating them on page 2 is noise.
     2) Hide highlights 7–10 — the FIRST 6 are the headline insights
        and fit cleanly above the document footer on page 3. The
        on-screen view keeps showing all 10. */
  body.admin-printing .admin-report-block-row .admin-report-stat { display: none !important; }
  body.admin-printing .admin-insight-grid .admin-insight:nth-child(n+7) { display: none !important; }

  /* Single-data-point chart edge case: if a chart has 1 bar, the
     SVG centers it (svgBars caps barW at 56px). Keep chart blocks
     left-anchored so the lone bar reads as a measurement, not a
     decorative shape. */
  body.admin-printing .admin-report-chart {
    max-height: 160px;
  }

  /* Comparison strip + Plan tier grid: solid panels, no shadows,
     borders only. Same shape as on-screen, just lighter to render. */
  body.admin-printing .admin-compare-card {
    background: #ffffff;
    border-color: #e1e7f1;
    color: #1a2233;
  }
  body.admin-printing .admin-compare-blue   { background: #f1f6fe; border-color: #c5dafd; }
  body.admin-printing .admin-compare-green  { background: #f1f9f4; border-color: #b6e6c5; }
  body.admin-printing .admin-compare-yellow { background: #fff8e6; border-color: #f6dba0; }
  body.admin-printing .admin-compare-track,
  body.admin-printing .admin-compare-fill,
  body.admin-printing .admin-plan-grid-row .admin-report-bar-track,
  body.admin-printing .admin-plan-grid-row .admin-report-bar-track > span,
  body.admin-printing .admin-report-bar-track,
  body.admin-printing .admin-report-bar-track > span {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.admin-printing .admin-plan-grid-row { padding: 6px 0; }

  /* Section dividers print with their colored badge intact. */
  body.admin-printing .admin-report-section-num {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
  }
  body.admin-printing .admin-report-section-divider {
    padding: 2px 0 4px;
    margin-top: 4px;
  }
  body.admin-printing .admin-report-section-divider h2 {
    color: #1a2233;
  }

  /* SVG bars need print-color-adjust on the SVG itself so the fill
     attribute renders (Chrome strips SVG fill in print otherwise on
     some configurations). */
  body.admin-printing .admin-report-bar-svg,
  body.admin-printing .admin-report-bar-svg rect {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* === Connectivity / diagnostic banner === */
.admin-diag-banner {
  display: grid; gap: 8px; grid-template-columns: 1fr auto;
  align-items: center;
  padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(234, 67, 53, 0.10), rgba(251, 188, 5, 0.10));
  border: 1px solid rgba(234, 67, 53, 0.28);
  color: var(--ink);
  font-size: 13px; line-height: 1.55;
}
.admin-diag-banner strong { color: #8a1f17; display: block; font-size: 13px; margin-bottom: 4px; }
.admin-diag-banner span { display: block; color: var(--ink); }
@media (prefers-color-scheme: dark) {
  .admin-diag-banner strong { color: #ffb4ab; }
}
@media (max-width: 700px) {
  .admin-diag-banner { grid-template-columns: 1fr; }
}

.admin-grid-2 {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.admin-card {
  padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-deep); display: grid; gap: 6px;
}
.admin-card-full { grid-column: 1 / -1; }

.admin-bars {
  display: flex; align-items: flex-end; gap: 6px; height: 140px;
  padding: 26px 4px 6px; border-bottom: 1px dashed var(--line);
  position: relative;
}
.admin-bars > span {
  flex: 1 1 0; min-width: 6px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--blue), rgba(66, 133, 244, 0.4));
  position: relative; transition: filter 120ms ease;
}
.admin-bars > span::after {
  content: attr(data-value);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 4px; font-size: 10px; font-weight: 800; color: var(--muted);
  white-space: nowrap;
}
.admin-bars > span:hover { filter: brightness(1.1); }
.admin-bars-green > span { background: linear-gradient(180deg, var(--green), rgba(52, 168, 83, 0.4)); }

/* === Filters === */
.admin-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center;     /* prevent chips stretching into tall capsules
                              when a flex row wraps next to a taller sibling */
}
.admin-chip {
  flex: 0 0 auto;          /* never let a chip grow vertically */
  height: 32px;            /* explicit pill height */
  padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--line); background: var(--panel-deep); color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}
.admin-chip.is-active { color: white; background: linear-gradient(90deg, var(--blue), var(--green)); border-color: transparent; }

/* === Table === */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.admin-table thead th {
  text-align: start; padding: 10px 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted); border-bottom: 1px solid var(--line);
}
.admin-table tbody td {
  padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle;
  /* Keep numeric / date columns LTR even when the browser inherits RTL from
     a parent (some viewers force RTL globally). */
  unicode-bidi: isolate;
}
.admin-table { direction: ltr; }
.admin-table tbody tr:hover { background: rgba(66, 133, 244, 0.04); }
.admin-table tbody tr { cursor: pointer; }
.admin-table tbody tr.is-readonly { cursor: default; }

.admin-pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 1.4;
}
/* Solid pills with high contrast in both light and dark themes. */
.admin-pill.free      { color: white; background: linear-gradient(135deg, #6b778c, #455467); }
.admin-pill.plus      { color: #1f1500; background: linear-gradient(135deg, var(--yellow), #d99a00); }
.admin-pill.pro       { color: white; background: linear-gradient(135deg, var(--blue), #1a4a96); }
.admin-pill.team      { color: white; background: linear-gradient(135deg, #9c27b0, #5b2786); }
.admin-pill.active    { color: white; background: linear-gradient(135deg, var(--green), #1f7a3f); }
.admin-pill.cancelled { color: #1f1500; background: linear-gradient(135deg, var(--yellow), #b07c00); }
.admin-pill.expired   { color: white; background: linear-gradient(135deg, var(--red), #8a1f17); }
.admin-pill.suspended { color: white; background: linear-gradient(135deg, var(--red), #8a1f17); }

.admin-pagination {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
}
.admin-pagination button {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-deep); font-size: 12px; font-weight: 700;
}

/* === Modal === */
.admin-modal {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  padding: 24px; background: rgba(21, 32, 51, 0.4); backdrop-filter: blur(12px);
}
.admin-modal-panel {
  position: relative; width: min(640px, 100%);
  max-height: calc(100dvh - 48px); overflow: auto;
  padding: 22px; border-radius: 18px;
  background: var(--panel-deep); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.admin-modal-wide { width: min(900px, 100%); }
.admin-modal-close {
  position: absolute; top: 12px; inset-inline-end: 12px; width: 30px; height: 30px;
  border-radius: 999px; background: rgba(66, 133, 244, 0.12); font-size: 18px; font-weight: 900;
}

.admin-detail-head {
  display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.admin-detail-head strong { font-size: 18px; }
.admin-detail-head span { color: var(--muted); font-size: 13px; }

.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-action-button,
.admin-primary-button,
.admin-danger-button,
.admin-ghost-button {
  min-height: 36px; padding: 0 12px; border-radius: 10px; font-weight: 800; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.admin-primary-button { color: white; background: linear-gradient(90deg, var(--blue), var(--green)); }
.admin-action-button { color: #17396f; background: rgba(66, 133, 244, 0.12); border: 1px solid rgba(66, 133, 244, 0.18); }
.admin-danger-button { color: #8a1f17; background: rgba(234, 67, 53, 0.12); border: 1px solid rgba(234, 67, 53, 0.22); }
.admin-ghost-button  { color: var(--ink); background: transparent; border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) {
  .admin-action-button { color: #cad9ff; }
  .admin-danger-button { color: #ffb4ab; }
}

.admin-form {
  display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(66, 133, 244, 0.04); margin-top: 12px;
}
.admin-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.admin-form input,
.admin-form select,
.admin-form textarea {
  min-height: 36px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--panel);
}
.admin-form textarea { min-height: 70px; resize: vertical; }

/* === Toast === */
.admin-toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: 10px 16px; border-radius: 12px; background: var(--panel-deep);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 700; z-index: 50;
}
.admin-toast.error { color: #8a1f17; border-color: rgba(234, 67, 53, 0.22); }
.admin-toast.ok    { color: #0f6f3f; border-color: rgba(52, 168, 83, 0.22); }
@media (prefers-color-scheme: dark) {
  .admin-toast.error { color: #ffb4ab; }
  .admin-toast.ok    { color: #b8f3cf; }
}