/* /ui/css/theme.css — shared dark theme for ALL pages (start & stages)
  Goal: provide a uniform, Splunk-like, professional dark UI across the app.
*/

:root{
  /* Core surfaces */
  --bg:#0b0f14;           /* Splunk-like deep charcoal */
  --panel:#111827;        /* panel surface */
  --panel-2:#0b1222;      /* input surface */
  --panel-elevated:#1a2332; /* elevated cards */

  /* Typography */
  --text:#e5e7eb;
  --text-bright:#f8fafc;
  --muted:#94a3b8;

  /* Chrome */
  --border:#1f2937;
  --border-focus:#334155;
  --radius:12px;
  --radius-lg:16px;
  --shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.34);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.05) inset, 0 20px 50px rgba(0,0,0,.5), 0 0 80px rgba(56,189,248,.08);
  --shadow-btn:0 2px 8px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4);
  --shadow-btn-hover:0 4px 16px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.5), 0 0 20px rgba(56,189,248,.15);
  --shadow-primary:0 4px 16px rgba(56,189,248,.25), 0 2px 8px rgba(0,0,0,.4);
  --shadow-primary-hover:0 6px 24px rgba(56,189,248,.35), 0 4px 12px rgba(0,0,0,.5);

  /* Accents */
  --accent:#38bdf8;
  --accent-2:#0ea5e9;
  --accent-dark:#0284c7;
  --ring:linear-gradient(135deg,#1e3a5f,#2d4a6f);
  --ring-hover:linear-gradient(135deg,#254561,#365875);
  --success:#22c55e;
  --success-dark:#16a34a;
  --danger:#ef4444;
  --danger-dark:#dc2626;

  /* Convenience */
  --focus:0 0 0 3px rgba(56,189,248,.3);
  --transition:all .18s cubic-bezier(.4,0,.2,1);
}

/* ========== Accordion Component ========== */
.accordion{margin:24px 0}
.accordion-item{margin-bottom:12px}
.accordion-header{
  background:var(--panel-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:var(--transition);
  box-shadow:var(--shadow-btn);
}
.accordion-header:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  border-color:var(--border-focus);
  box-shadow:var(--shadow-btn-hover);
}
.accordion-title{
  font-size:16px;
  font-weight:600;
  color:var(--text-bright);
  margin:0;
}
.accordion-icon{
  font-size:20px;
  color:var(--accent);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  font-weight:bold;
}
.accordion-item.open .accordion-icon{
  transform:rotate(180deg);
}
.accordion-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1);
  background:var(--panel);
  border:1px solid transparent;
  border-radius:0 0 var(--radius) var(--radius);
}
.accordion-item.open .accordion-content{
  max-height:5000px; /* Large enough for any content */
  border-color:var(--border);
  border-top:none;
  padding:20px;
  margin-top:-12px;
}
/* Expand/Collapse All Controls */
.accordion-controls{
  display:flex;
  gap:12px;
  margin-bottom:16px;
}
.accordion-controls button{
  padding:8px 16px;
  font-size:13px;
  background:var(--panel-elevated);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  cursor:pointer;
  transition:var(--transition);
}
.accordion-controls button:hover{
  color:var(--text-bright);
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(56,189,248,.08) 0%, rgba(56,189,248,.04) 100%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.5 system-ui, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Stage pages historically use .wrap; landing page uses .shell */
.wrap,.shell{max-width:1100px;margin:0 auto;padding:28px 16px 64px}
.shell{padding:28px 20px}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

/* Header layout helpers
   Use `.header-left` to stack title + meta under it,
   and `.header-right` for actions aligned to the right.
*/
.header-left{display:flex;flex-direction:column;gap:6px;min-width:0}
.header-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.header-right{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Page shell */
.shell{max-width:1100px;margin:28px auto;padding:0 20px}

/* Headings - Professional hierarchy */
h1{
  font-size:24px;
  font-weight:700;
  margin:0 0 10px;
  color:var(--text-bright);
  letter-spacing:-.3px;
}
h2{
  font-size:19px;
  font-weight:700;
  margin:0 0 12px;
  color:var(--text-bright);
  letter-spacing:-.2px;
}
.sub{
  color:var(--muted);
  margin:0 0 18px;
  font-weight:500;
}

/* Form field containers - Professional layout */
.form-container{
  padding:20px 0;
}
.form-field{
  margin-bottom:32px;
}
.subtitle{
  font-size:14px;
  font-weight:700;
  color:var(--accent);
  margin:0 0 8px 0;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.question{
  font-size:16px;
  font-weight:600;
  color:var(--text-bright);
  margin:0 0 8px 0;
  line-height:1.5;
}
.help{
  font-size:13px;
  color:var(--muted);
  margin:0 0 12px 0;
  line-height:1.6;
  font-weight:400;
}

/* Form labels and fieldsets */
label{
  display:block;
  color:var(--muted);
  margin-bottom:8px;
  font-weight:600;
  font-size:13px;
}
fieldset{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:32px;
  background:rgba(255,255,255,.02);
}
fieldset legend{
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:.3px;
  padding:0 8px;
}

/* Panels / cards */
.card{
  background:var(--panel-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:20px;
  box-shadow:var(--shadow-lg);
  transition:var(--transition);
}
.card:hover{
  border-color:var(--border-focus);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 24px 60px rgba(0,0,0,.6), 0 0 100px rgba(56,189,248,.12);
}

/* Some stage pages historically used .panel instead of .card */
.panel{
  background:var(--panel-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-lg);
  transition:var(--transition);
}

/* Pills (stage badges / metadata) - Professional depth */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:var(--muted);
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(15,23,42,.8) 100%);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.6px;
  box-shadow:0 2px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
  transition:var(--transition);
}
.pill:hover{
  border-color:rgba(255,255,255,.18);
  box-shadow:0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Progress - Award-winning animated bar */
.progress{
  height:12px;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
  margin:0 0 16px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
.bar{
  height:100%;
  width:0;
  background:var(--ring);
  box-shadow:0 0 12px rgba(56,189,248,.5), inset 0 1px 0 rgba(255,255,255,.3);
  transition:width .4s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.bar::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%);
  animation:shimmer 2s infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}

  color:var(--muted);
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(15,23,42,.8) 100%);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.6px;
  box-shadow:0 2px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
  transition:var(--transition);
}
.pill:hover{
  border-color:rgba(255,255,255,.18);
  box-shadow:0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Progress */
.progress{height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin:0 0 14px}
.bar{height:100%;width:0;background:var(--ring);transition:width .3s ease}

/* Grid helpers */
.grid{display:grid;gap:12px}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid-3{grid-template-columns:1fr} }

.row{display:flex;gap:12px;align-items:center}
.row.right{justify-content:flex-end}

/* Form controls */
label{display:block;font-size:12px;color:var(--muted);margin:4px 0 6px}

/* Style text-like inputs only (avoid forcing checkbox/range/file to 100% width) - Premium design */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input:not([type]),
textarea,
select{
  width:100%;
  background:linear-gradient(180deg, rgba(11,18,34,.9) 0%, rgba(11,18,34,1) 100%);
  color:var(--text-bright);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:13px 14px;
  outline:none;
  transition:var(--transition);
  box-shadow:0 2px 4px rgba(0,0,0,.2), inset 0 1px 2px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.02);
  font-weight:500;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input:not([type]),
select{height:48px}
textarea{min-height:120px;height:auto;resize:vertical}
input::placeholder{color:#6b7280;font-weight:400}
select option{
  background:var(--panel);
  color:var(--text-bright);
  padding:10px;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus{
  border-color:rgba(56,189,248,.5);
  background:linear-gradient(180deg, rgba(11,18,34,.85) 0%, rgba(11,18,34,1) 100%);
  box-shadow:0 0 0 3px rgba(56,189,248,.2), 0 4px 12px rgba(0,0,0,.3), inset 0 1px 2px rgba(0,0,0,.3);
}

input[type="checkbox"],
input[type="radio"]{
  width:auto;
  height:auto;
  accent-color:var(--accent-2);
}

input[type="range"]{width:100%}

/* Buttons - Award-winning premium design */
.btn{
  appearance:none;
  position:relative;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
  color:var(--text-bright);
  border-radius:var(--radius);
  padding:11px 20px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.3px;
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-btn);
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 50%);
  opacity:0;
  transition:var(--transition);
  pointer-events:none;
}
.btn:hover:not(:disabled){
  border-color:rgba(56,189,248,.3);
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%);
  transform:translateY(-1px);
  box-shadow:var(--shadow-btn-hover);
}
.btn:hover:not(:disabled)::before{opacity:1}
.btn:active:not(:disabled){
  transform:translateY(0);
  box-shadow:var(--shadow-btn);
}
.btn:disabled{opacity:.45;cursor:not-allowed}

.btn-primary{
  background:var(--ring);
  border:none;
  color:#e5e7eb;
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.btn-primary::before{
  background:linear-gradient(180deg, rgba(255,255,255,.2) 0%, transparent 60%);
}
.btn-primary:hover:not(:disabled){
  background:var(--ring-hover);
  box-shadow:var(--shadow-primary-hover);
  transform:translateY(-2px);
}

.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.btn-ghost:hover:not(:disabled){
  background:rgba(255,255,255,.06);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}

/* Stage pages use plain <button> with optional .primary - Premium design */
button{
  position:relative;
  padding:11px 18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  color:var(--text-bright);
  font-family:inherit;
  font-size:inherit;
  font-weight:600;
  letter-spacing:.3px;
  cursor:pointer;
  transition:var(--transition);
  box-shadow:var(--shadow-btn);
}
button::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 50%);
  opacity:0;
  transition:var(--transition);
  pointer-events:none;
}
button:hover:not(:disabled){
  border-color:rgba(56,189,248,.3);
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 100%);
  transform:translateY(-1px);
  box-shadow:var(--shadow-btn-hover);
}
button:hover:not(:disabled)::before{opacity:1}
button:active:not(:disabled){
  transform:translateY(0);
  box-shadow:var(--shadow-btn);
}
button:disabled{opacity:.45;cursor:not-allowed}

button.primary{
  background:var(--ring);
  border:none;
  color:#e5e7eb;
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
button.primary::before{
  background:linear-gradient(180deg, rgba(255,255,255,.2) 0%, transparent 60%);
}
button.primary:hover:not(:disabled){
  background:var(--ring-hover);
  box-shadow:var(--shadow-primary-hover);
  transform:translateY(-2px);
}

/* Primary nav menu (requested: Home + Module 1–6)
   Must come after the base button rule so it isn't overridden.
   Award-winning pill design with depth.
*/
nav.menu{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
nav.menu button{
  position:relative;
  padding:9px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.4px;
  line-height:1.2;
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition:var(--transition);
}
nav.menu button::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 60%);
  opacity:0;
  transition:var(--transition);
  pointer-events:none;
}
nav.menu button:hover:not(:disabled){
  border-color:rgba(56,189,248,.4);
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 100%);
  box-shadow:0 4px 12px rgba(0,0,0,.3), 0 0 20px rgba(56,189,248,.15), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-1px);
}
nav.menu button:hover:not(:disabled)::before{opacity:1}
nav.menu button.active{
  background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(167,139,250,.18));
  border-color:rgba(56,189,248,.7);
  box-shadow:0 0 0 3px rgba(56,189,248,.2), 0 4px 12px rgba(56,189,248,.25), inset 0 1px 0 rgba(255,255,255,.1);
  color:var(--text-bright);
}
nav.menu button.active::before{opacity:1}

/* Ghost look used by Stage 4 (buttons - Premium design */
label.fileBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
  color:var(--text-bright);
  font-weight:600;
  letter-spacing:.3px;
  cursor:pointer;
  user-select:none;
  box-shadow:var(--shadow-btn);
  transition:var(--transition);
}
label.fileBtn::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 50%);
  opacity:0;
  transition:var(--transition);
  pointer-events:none;
}
label.fileBtn:hover{
  border-color:rgba(56,189,248,.5);
  background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.08) 100%);
  transform:translateY(-1px);
  box-shadow:var(--shadow-btn-hover);
}
label.fileBtn:hover::before{opacity:1}
label.fileBtn:active{
  transform:translateY(0);
  box-shadow:var(--shadow-btn);

  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  user-select:none;
}
label.fileBtn:hover{border-color:rgba(14,165,233,.55);background:rgba(255,255,255,.08)}

/* Notice / toast */
.notice{
  position:fixed;right:16px;bottom:16px;
  background:var(--panel);border:1px solid var(--border);
  color:var(--text);pa- Premium depth */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.badge{
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.12);
  padding:5px 11px;
  border-radius:12px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.4px;
  color:var(--muted);
  box-shadow:0 2px 4px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
  transition:var(--transition);
}
.badge:hover{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 100%);
  transform:translateY(-1px);
  box-shadow:0 3px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);

/* Card header & helper text */
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.card-head h2{margin:0}
.card-help{color:var(--muted);font-size:13px}

/* Stage copy blocks */
.explain{font-size:.9rem;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);padding:12px;line-height:1.55}
.status{font-size:.75rem;color:var(--muted);margin-top:6px;white-space:pre-wrap}
.help,.guidance{font-size:.68rem;color:var(--muted);margin-bottom:10px;white-space:pre-wrap;line-height:1.35}
.subtitle{font-size:.9rem;font-weight:650;margin-top:4px;color:#fff}
.question{font-size:.9rem;margin:2px 0 6px;color:var(--text)}

/* Review summary */
.summary pre{background:rgba(255,255,255,.05);padding:14px;border-radius:var(--radius);white-space:pre-wrap;font-size:.7rem;margin:0}

/* Inline error */
.error{color:#fca5a5;font-size:.65rem;margin-top:4px;display:none;white-space:pre-wrap}

/* Small echo block */
.echo{font-size:.75rem;color:var(--muted);margin-top:6px;white-space:pre-wrap}

/* Subtle divider */
.hr{height:1px;background:var(--border);margin:16px 0}

/* Footer spacing for small text */
.small{font-size:13px;color:var(--muted)}

/* NEW: generic action bar used by stage pages */
.actions{
  display:flex; 
  flex-wrap:wrap; 
  gap:14px; 
  align-items:center;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:24px;
}
.actions .push{flex:1 1 auto}           /* spacer pushes items to right */
.actions-right{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}

/* Stage 2 / 5 helper grids (used by multiple pages) */
.wish-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:10px}
.balance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px;margin-top:10px}
.errs-list{margin-top:6px;font-size:.7rem;color:#fca5a5;white-space:pre-wrap}

/* Badges (stage 5/6) */
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);padding:4px 8px;border-radius:10px;font-size:.72rem;color:var(--muted)}

/* Stage 3 style toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.toolbar h1{margin:0;font-size:1.1rem;font-weight:650;flex:1 1 auto}

/* Monospace log panel */
.log{
  font:13px/1.7 ui-monospace,Consolas,monospace;
  white-space:pre-wrap;
  background:#0d1423;
  border:1px solid rgba(255,255,255,.08);
  padding:16px 20px;
  border-radius:var(--radius);
  max-height:520px;
  overflow:auto;
  overflow-x:auto;
  color:#e5e7eb;
  word-break:break-word;
}

/* Images */
.compass-img{max-width:100%;display:block;margin:8px auto 4px;border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);background:#0f1d32}

/* ========== Admin Panel Components ========== */
.admin-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 260px;
  background: var(--panel-elevated);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 0.24s ease, opacity 0.18s ease, visibility 0.18s ease;
  z-index: 1000;
  overflow-y: auto;
  box-shadow: none;
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.admin-sidebar.visible {
  display: block !important;
}
.admin-sidebar.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  box-shadow: 8px 0 24px rgba(0,0,0,.35);
}
.admin-sidebar-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}
.admin-sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--text-bright);
  font-weight: 600;
}
.admin-sidebar .admin-sidebar-menu {
  padding: 12px 0;
}
.admin-sidebar .admin-sidebar-menu button {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border-left: 3px solid transparent;
  border-radius: 10px;
  margin: 2px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: none;
}
.admin-sidebar .admin-sidebar-menu button:hover {
  background: rgba(56,189,248,.10);
  color: var(--text-bright);
  border-left-color: var(--accent);
}
.admin-sidebar .admin-sidebar-menu button:focus-visible {
  outline: 2px solid rgba(56,189,248,.55);
  outline-offset: 2px;
}
.admin-sidebar .admin-sidebar-menu button.active {
  background: rgba(56,189,248,.15);
  color: var(--accent);
  border-left-color: var(--accent);
}
/* Admin toggle button */
.admin-menu-toggle {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(56,189,248,.4), 0 2px 6px rgba(0,0,0,.5);
  transition: all 0.3s ease;
  z-index: 1001;
  display: none !important;
  align-items: center;
  justify-content: center;
}
.admin-menu-toggle.visible {
  display: flex !important;
}
.admin-menu-toggle:hover {
  box-shadow: 0 6px 20px rgba(56,189,248,.5), 0 4px 8px rgba(0,0,0,.6);
  transform: translateY(-2px);
}
.admin-menu-toggle:focus-visible {
  outline: 2px solid rgba(56,189,248,.55);
  outline-offset: 3px;
}
/* Overlay when sidebar is open */
.admin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: none !important;
}
.admin-overlay.visible {
  display: block !important;
  opacity: 1;
  pointer-events: all;
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar,
  .admin-menu-toggle,
  .admin-overlay {
    transition: none;
  }
}