/* ═══════════════════════════════════════════════════════════════
   VerseWorks — Console layout CSS (tech-preview redesign)
   Holo-cyan palette + sidebar/statusbar shell shared by redesigned
   pages. Load AFTER theme.css and app.css so body.holo wins over the
   localStorage-applied manufacturer theme class and the old header
   auth styles.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ HOLO-CYAN TERMINAL — signature palette ═══ */
body.holo {
  /* text colour used on top of solid --accent fills */
  --accent-contrast: #021016;
  --bg: #04080d; --surface: #0a121c; --surface2: #101c2a; --surface3: #16263a;
  --border: rgba(77,222,255,0.16); --border-hover: rgba(77,222,255,0.45); --border-hard: rgba(77,222,255,0.6);
  --text: #cfe6ee; --text-muted: #56788c; --text-dim: #1f3344;
  --accent: #4adeff; --accent2: #9af1ff; --accent-dim: rgba(77,222,255,0.08); --accent-glow: rgba(77,222,255,0.22);
  --header-bg: rgba(4,8,13,0.95);
  --radius: 2px; --radius-lg: 3px;
  /* Status colours */
  --green: #50fa7b; --green-dim: rgba(80,250,123,0.12);
  --yellow: #e8c060; --yellow-dim: rgba(232,192,96,0.10);
  --orange: #ffb86c; --orange-dim: rgba(255,184,108,0.12);
  --red: #ff5555; --red-dim: rgba(255,85,85,0.12);
  --green-bg: rgba(80,250,123,0.1);
  --yellow-bg: rgba(232,192,96,0.08);
  --red-bg: rgba(255,85,85,0.1);
  --gold: #f1fa8c;
  /* Quality grades */
  --legendary-color: #e8a80b; --legendary-bg: rgba(232,168,11,0.1);
  --epic-color: #c47dd4; --epic-bg: rgba(196,125,212,0.1);
  --rare-color: #3ab0d4; --rare-bg: rgba(58,176,212,0.1);
  --uncommon-color: #a8e0c0; --uncommon-bg: rgba(168,224,192,0.08);
  --common-color: #56788c; --common-bg: rgba(86,120,140,0.12);
  /* Fonts */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  font-family: var(--font-body);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 45% at 30% 0%, rgba(77,222,255,0.06) 0%, transparent 65%),
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(77,222,255,0.03) 47px, rgba(77,222,255,0.03) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(77,222,255,0.03) 47px, rgba(77,222,255,0.03) 48px);
}

/* Subtle CRT scanlines over everything */
body.holo::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px);
}

/* ═══ DAYLIGHT MODE — light variant of the holo console ═══ */
body.holo.light {
  --bg: #eef3f6; --surface: #ffffff; --surface2: #e2ebf0; --surface3: #d3e1e9;
  --border: rgba(10,120,150,0.2); --border-hover: rgba(10,120,150,0.45); --border-hard: rgba(10,120,150,0.55);
  --text: #16323e; --text-muted: #5b7787; --text-dim: #b9cbd6;
  --accent: #0a90b4; --accent2: #066c88; --accent-dim: rgba(10,144,180,0.09); --accent-glow: rgba(10,144,180,0.16);
  --accent-contrast: #ffffff;
  --header-bg: rgba(255,255,255,0.92);
  --green: #189a4a; --green-dim: rgba(24,154,74,0.1);
  --yellow: #9a7b0a; --yellow-dim: rgba(154,123,10,0.1);
  --orange: #c46a10; --orange-dim: rgba(196,106,16,0.1);
  --red: #cc3340; --red-dim: rgba(204,51,64,0.1);
  --green-bg: rgba(24,154,74,0.1);
  --yellow-bg: rgba(154,123,10,0.08);
  --red-bg: rgba(204,51,64,0.1);
  --gold: #9a7b0a;
  --legendary-color: #b07708; --legendary-bg: rgba(176,119,8,0.1);
  --epic-color: #9c4fb0; --epic-bg: rgba(156,79,176,0.1);
  --rare-color: #1180a8; --rare-bg: rgba(17,128,168,0.1);
  --uncommon-color: #3d8a62; --uncommon-bg: rgba(61,138,98,0.08);
  --common-color: #5b7787; --common-bg: rgba(91,119,135,0.12);
  background-image:
    radial-gradient(ellipse 70% 45% at 30% 0%, rgba(10,144,180,0.05) 0%, transparent 65%),
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(10,144,180,0.04) 47px, rgba(10,144,180,0.04) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(10,144,180,0.04) 47px, rgba(10,144,180,0.04) 48px);
}
/* No CRT scanlines in daylight */
body.holo.light::after { background: none; }
/* Re-tint the few hardcoded cyan glows / dark gradients */
body.holo.light .sb-logo { box-shadow: 0 0 14px var(--accent-glow), inset 0 0 8px rgba(10,144,180,0.08); }
body.holo.light .module { background: linear-gradient(160deg, var(--surface) 0%, rgba(226,235,240,0.55) 100%); }
body.holo.light .module-icon { box-shadow: inset 0 0 12px rgba(10,144,180,0.05); }
body.holo.light a.module:hover { box-shadow: 0 0 22px rgba(10,144,180,0.12), inset 0 0 24px rgba(10,144,180,0.02); }
body.holo.light a.module:hover .module-icon { box-shadow: inset 0 0 12px rgba(10,144,180,0.1), 0 0 12px var(--accent-glow); }
body.holo.light .sb-tag { color: #9a7b0a; border-color: rgba(154,123,10,0.4); }
body.holo.light .sb-tag.lock { color: var(--text-muted); border-color: var(--border); }
body.holo.light .chip-status.ok { color: #189a4a; }
body.holo.light .chip-status.pending { color: #9a7b0a; }
body.holo.light .sys-dot { background: #189a4a; box-shadow: 0 0 6px rgba(24,154,74,0.5); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ═══ SHELL ═══ */
.console { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px; flex-shrink: 0; position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
  background: var(--header-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 20px 0;
  backdrop-filter: blur(14px);
}
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 0 18px 18px; border-bottom: 1px solid var(--border); }
.sb-brand-link { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.sb-logo {
  width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hard); background: var(--accent-dim); border-radius: var(--radius);
  font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow), inset 0 0 8px rgba(77,222,255,0.08);
  text-shadow: 0 0 8px var(--accent-glow);
}
.sb-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; color: var(--text); }
.sb-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); opacity: 0.75; margin-top: 2px; }

.sb-section { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); opacity: 0.7; padding: 18px 18px 8px; }

.sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.sb-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius);
  text-decoration: none; color: var(--text-muted); border: 1px solid transparent; border-left: 2px solid transparent;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: all 0.15s; position: relative; cursor: pointer; background: none;
}
.sb-link svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sb-link:hover { color: var(--text); background: var(--surface2); border-left-color: var(--border-hover); }
.sb-link.active { color: var(--accent); background: var(--accent-dim); border-left-color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
.sb-link.locked { opacity: 0.38; pointer-events: none; }
.sb-tag { margin-left: auto; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; color: #e8a80b; border: 1px solid rgba(232,168,11,0.35); padding: 2px 5px; border-radius: var(--radius); }
.sb-tag.lock { color: var(--text-muted); border-color: var(--border); }

/* ═══ SIDEBAR AUTH ═══ */
.sb-auth { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--border); }
.sb-auth .btn-discord {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  background: #5865F2; color: #fff; border: none; padding: 10px 14px; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius); transition: filter 0.15s, box-shadow 0.15s; opacity: 1;
}
.sb-auth .btn-discord:hover { filter: brightness(1.12); box-shadow: 0 0 16px rgba(88,101,242,0.4); opacity: 1; }
.sb-auth .btn-discord svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.sb-auth .discord-chip { display: none; align-items: center; gap: 10px; background: transparent; border: none; padding: 0; }
.sb-auth .discord-chip img { width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--border-hard); flex-shrink: 0; object-fit: cover; }
.chip-info { min-width: 0; flex: 1; }
.chip-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; margin: 0; }
.chip-status { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.chip-status.ok { color: #50fa7b; }
.chip-status.admin { color: var(--accent); }
.chip-status.pending { color: #e8a80b; }
.btn-signout {
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: all 0.15s; padding: 0;
}
.btn-signout:hover { border-color: rgba(255,85,85,0.5); color: #ff5555; }
.btn-signout svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ═══ SIDEBAR FOOTER ═══ */
.sb-bottom { padding: 14px 18px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.sb-row-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); opacity: 0.7; margin-bottom: 5px; }
.sb-display-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mode-toggle { display: flex; gap: 2px; }
.mode-btn { background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); cursor: pointer; width: 26px; height: 24px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; }
.mode-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode-btn:hover { border-color: var(--border-hover); color: var(--text); }
.mode-btn.active { border-color: var(--accent); color: var(--accent); }
.sb-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; }
.sb-links a { color: var(--text-muted); text-decoration: none; }
.sb-links a:hover { color: var(--accent); }
.sb-credit { font-size: 10px; color: var(--text-muted); opacity: 0.65; line-height: 1.5; }

/* ═══ MAIN ═══ */
.main { flex: 1; margin-left: 232px; padding: 26px 38px 40px; }
.main-inner { max-width: 1200px; margin: 0 auto; }
/* Ultrawide: let content breathe */
@media (min-width: 1800px) {
  .main-inner { max-width: 1680px; }
}

.statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 28px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.statusbar .crumb { color: var(--accent); opacity: 0.8; }
/* min-height matches the statusbar buttons (admin/help) some pages have,
   so pages without them render the bar at the same height */
.status-right { display: flex; align-items: center; gap: 18px; min-height: 26px; }
.status-item { display: flex; align-items: center; gap: 6px; }
.sys-dot { width: 6px; height: 6px; border-radius: 50%; background: #50fa7b; box-shadow: 0 0 8px rgba(80,250,123,0.7); animation: pulse 2.4s ease-in-out infinite; }

/* ═══ PAGE HEADER ═══ */
.page-header { margin-bottom: 26px; }
.page-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1; color: var(--text); text-shadow: 0 0 20px var(--accent-glow); }
.page-title .tick { color: var(--accent); }
.page-tagline { font-size: 13px; color: var(--text-muted); max-width: 520px; line-height: 1.6; margin-top: 6px; }

.console-foot { margin-top: 30px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }

/* ═══ MOBILE — sidebar becomes top bar ═══ */
@media (max-width: 760px) {
  .sidebar { position: static; width: 100%; flex-direction: column; padding: 12px 0 0; border-right: none; border-bottom: 1px solid var(--border); }
  .console { flex-direction: column; }
  .sb-nav { flex-direction: row; flex-wrap: wrap; padding: 8px 10px 10px; }
  .sb-link { border-left: 1px solid transparent; padding: 7px 9px; font-size: 12px; }
  .sb-link .sb-tag { display: none; }
  .sb-section, .sb-bottom { display: none; }
  .sb-auth { margin-top: 0; padding: 10px 16px; }
  .main { margin-left: 0; padding: 20px 16px 40px; }
  .page-title { font-size: 24px; }
  .mobile-foot { display: block !important; }
}
.mobile-foot { display: none; padding: 14px 16px 24px; font-size: 11px; color: var(--text-muted); text-align: center; }
.mobile-foot a { color: var(--text-muted); }