/* ══════════════════════════════════════════════════════════
   ScholarStack Labs — Shared Stylesheet
   https://lab.scholarstack.cloud
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Theme: Dark (default) ── */
:root{
  --bg:#060910;
  --bg2:#0b0f18;
  --bg3:#090d16;
  --border:#1e2d44;
  --border2:#15202f;
  --text:#d4dae6;
  --text-dim:#b0b8c8;
  --text-faint:#7a8698;
  --text-vfaint:#506070;
  --accent:#22c55e;
  --accent-dim:rgba(34,197,94,0.35);
  --svg-bg:#070a12;
  --panel-bg:#0a0e17;
  --nav-bg:#080c14;
  --nav-border:#141e30;
  --menu-bg:#0c1220;
  --menu-hover:#111a2a;
  --red:#ef4444;
  --amber:#f59e0b;
  --blue:#3b82f6;
  --purple:#a78bfa;
  --cyan:#06b6d4;
  --pink:#ec4899;
  --l7:#ec4899;
  --l6:#a78bfa;
  --l5:#f59e0b;
  --l4:#06b6d4;
  --l3:#3b82f6;
  --l2:#22c55e;
  --l1:#ef4444;
  --grid-opacity:0.025;
  --log-bg:#070a12;
  --floor-bg:#0d1220;
  --wall-color:#4a6080;
}

/* ── Theme: Light ── */
[data-theme="light"]{
  --bg:#f4f6f9;
  --bg2:#fff;
  --bg3:#f0f2f5;
  --border:#d0d8e4;
  --border2:#dde3ec;
  --text:#1a2030;
  --text-dim:#374151;
  --text-faint:#5a6578;
  --text-vfaint:#7a8598;
  --accent:#16a34a;
  --accent-dim:rgba(22,163,74,0.4);
  --svg-bg:#fff;
  --panel-bg:#f8fafb;
  --nav-bg:#fff;
  --nav-border:#d8e0ea;
  --menu-bg:#fff;
  --menu-hover:#f0f4f8;
  --red:#dc2626;
  --amber:#d97706;
  --blue:#2563eb;
  --purple:#7c3aed;
  --cyan:#0891b2;
  --pink:#db2777;
  --l7:#db2777;
  --l6:#7c3aed;
  --l5:#d97706;
  --l4:#0891b2;
  --l3:#2563eb;
  --l2:#16a34a;
  --l1:#dc2626;
  --grid-opacity:0.04;
  --log-bg:#fff;
  --floor-bg:#f0f2f5;
  --wall-color:#6b7280;
}

/* ── Base ── */
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);
  font-family:'JetBrains Mono','Fira Code',monospace;
  color:var(--text);
  transition:background .3s,color .3s;
}
.grid-bg{
  position:fixed;inset:0;
  opacity:var(--grid-opacity,.025);
  pointer-events:none;
  background-image:
    linear-gradient(rgba(128,128,128,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(128,128,128,.15) 1px,transparent 1px);
  background-size:48px 48px;
}

/* ── App Shell ── */
.app{position:relative;z-index:2;height:100vh;display:flex;flex-direction:column}

/* ── Top Navigation ── */
.top-nav{
  display:flex;align-items:center;padding:0 16px;height:44px;
  background:var(--nav-bg);border-bottom:1px solid var(--nav-border);
  flex-shrink:0;gap:8px;z-index:50;
  transition:background .3s,border-color .3s;
}
.nav-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);margin-right:8px}
.nav-brand-icon{
  width:24px;height:24px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#000;
}
.nav-brand-text{font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--text-dim)}
.nav-brand-text strong{color:var(--text)}
.nav-sep{width:1px;height:22px;background:var(--border);margin:0 4px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.theme-toggle{
  background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:5px 10px;cursor:pointer;font-family:inherit;font-size:12px;
  color:var(--text-dim);display:flex;align-items:center;gap:5px;
  transition:all .3s;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* ── Nav Dropdown ── */
.nav-dropdown{position:relative}
.nav-dropdown-btn{
  display:flex;align-items:center;gap:6px;padding:6px 10px;
  background:transparent;border:1px solid transparent;border-radius:6px;
  color:var(--accent);font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;letter-spacing:.3px;transition:all .2s;
}
.nav-dropdown-btn:hover,.nav-dropdown-btn.open{background:var(--menu-hover);border-color:var(--border)}
.nav-dropdown-btn .arrow{font-size:12px;color:var(--text-dim);transition:transform .2s}
.nav-dropdown-btn.open .arrow{transform:rotate(180deg)}
.nav-dropdown-btn .current-icon{font-size:14px}

.nav-menu{
  position:absolute;top:calc(100% + 6px);left:0;width:580px;
  background:var(--menu-bg);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);display:none;z-index:100;padding:0;
}
[data-theme="light"] .nav-menu{box-shadow:0 12px 40px rgba(0,0,0,.12)}
.nav-menu.open{display:block;animation:menuIn .15s ease}

@keyframes menuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.nav-menu-header{
  padding:10px 14px 8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-dim);border-bottom:1px solid var(--border2);font-weight:600;
}

/* ── Nav Grid ── */
.nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.nav-grid .nav-item:nth-child(odd){border-right:1px solid var(--border2)}
.nav-item{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  cursor:pointer;transition:background .15s;
  border-bottom:1px solid var(--border2);text-decoration:none;color:inherit;
}
.nav-grid .nav-item:nth-last-child(-n+2){border-bottom:none}
.nav-grid .nav-item:last-child:nth-child(odd){grid-column:1}
.nav-item:hover{background:var(--menu-hover)}
.nav-item.active{background:var(--accent);color:#000!important}
.nav-item.active .ni-title{color:#000}
.nav-item.active .ni-badge{background:rgba(0,0,0,.2)!important;color:#000!important}
.ni-icon{font-size:18px;flex-shrink:0}
.ni-content{flex:1;min-width:0}
.ni-title{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;white-space:nowrap}
.ni-badge{font-size:9px;padding:2px 5px;border-radius:3px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.ni-badge.live{background:rgba(34,197,94,.15);color:#22c55e}
.ni-badge.new{background:rgba(59,130,246,.15);color:#3b82f6}

/* ── Common Panels ── */
.info-card{
  padding:12px;background:var(--panel-bg);border:1px solid var(--border);
  border-radius:8px;flex-shrink:0;transition:background .3s,border-color .3s;
}
.info-card h3{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.info-card p{font-size:12px;color:var(--text-dim);line-height:1.6}
.info-card p strong{color:var(--text)}

.side-panel{display:flex;flex-direction:column;gap:8px;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}

.log-panel{
  flex:1;min-height:0;overflow-y:auto;background:var(--panel-bg);
  border:1px solid var(--border);border-radius:8px;padding:0;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  transition:background .3s,border-color .3s;
}
.log-header{
  padding:7px 12px 5px;font-size:12px;color:var(--text-faint);
  letter-spacing:2px;text-transform:uppercase;
  border-bottom:1px solid var(--border2);
  position:sticky;top:0;background:var(--panel-bg);z-index:1;
}
.log-row{padding:4px 12px;font-size:12px;border-bottom:1px solid var(--border2);animation:typeIn .2s ease}

.stat-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:12px}
.stat-label{color:var(--text-dim)}
.stat-val{font-weight:700;font-variant-numeric:tabular-nums}
.stat-val.red{color:var(--red)}.stat-val.green{color:var(--accent)}.stat-val.amber{color:var(--amber)}.stat-val.blue{color:var(--blue)}

/* ── Common Controls ── */
.ctrl-btn{
  padding:7px 14px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg2);color:var(--text-dim);font-family:inherit;
  font-size:12px;font-weight:600;letter-spacing:.5px;cursor:pointer;
  transition:all .2s;text-transform:uppercase;display:flex;align-items:center;gap:6px;
}
.ctrl-btn:hover{border-color:var(--accent);color:var(--accent)}
.ctrl-btn.active{background:var(--accent);border-color:var(--accent);color:#000}
.ctrl-btn.primary{
  background:linear-gradient(135deg,#22c55e,#16a34a);border-color:transparent;
  color:#000;font-weight:700;letter-spacing:1px;
}
.ctrl-btn.primary:hover{opacity:.9}

/* ── Common Animations ── */
@keyframes typeIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════
   Mobile Responsive
   ══════════════════════════════════════ */

/* ── Mobile Menu (hidden by default) ── */
.mobile-menu{display:none}

/* ── Hamburger Button ── */
.nav-hamburger{
  display:none;background:none;border:1px solid var(--border);border-radius:6px;
  padding:6px 8px;cursor:pointer;color:var(--text-dim);font-size:18px;line-height:1;
  transition:all .2s;margin-left:auto;
}
.nav-hamburger:hover{border-color:var(--accent);color:var(--accent)}

/* ── Tablet (≤900px) ── */
@media(max-width:900px){
  .nav-menu{width:min(580px,calc(100vw - 32px))}
}

/* ── Mobile (≤768px) ── */
@media(max-width:768px){
  /* Show hamburger, hide desktop nav items */
  .nav-hamburger{display:flex;align-items:center;justify-content:center}
  .nav-dropdown,.nav-sep,.top-nav>a[href="api-explorer.html"]{display:none}
  .nav-right>a[href*="scholarstack.cloud"]{display:none}
  .nav-right{margin-left:auto}

  /* Mobile slide-out menu */
  .mobile-menu{
    display:none;position:fixed;top:44px;left:0;right:0;bottom:0;
    background:var(--bg);z-index:99;overflow-y:auto;
    padding:12px 16px 24px;
    border-top:1px solid var(--border);
    animation:fadeSlideIn .2s ease;
  }
  .mobile-menu.open{display:block}
  .mobile-menu-section{margin-bottom:16px}
  .mobile-menu-header{
    font-size:10px;letter-spacing:2px;text-transform:uppercase;
    color:var(--text-faint);font-weight:600;padding:8px 0 6px;
    border-bottom:1px solid var(--border2);margin-bottom:4px;
  }
  .mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .mobile-menu-grid .nav-item{
    padding:10px;border-radius:8px;border:1px solid var(--border2);
    font-size:11px;gap:6px;
  }
  .mobile-menu-grid .nav-item:hover{background:var(--menu-hover)}
  .mobile-menu-grid .nav-item.active{background:var(--accent);color:#000!important;border-color:var(--accent)}
  .mobile-menu-links{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
  .mobile-menu-links a{
    display:flex;align-items:center;gap:8px;padding:10px 12px;
    border-radius:8px;border:1px solid var(--border2);
    text-decoration:none;color:var(--text-dim);font-size:12px;font-weight:600;
    transition:all .2s;
  }
  .mobile-menu-links a:hover{border-color:var(--accent);color:var(--accent)}

  /* Nav menu dropdown still works if opened from desktop breakpoint */
  .nav-menu{width:calc(100vw - 32px);left:-60px}
  .nav-grid{grid-template-columns:1fr}
  .nav-grid .nav-item:nth-child(odd){border-right:none}

  /* App shell allows scroll */
  html,body{overflow:auto}
  .app{height:auto;min-height:100vh}

  /* Common layout fixes */
  .info-card p{font-size:11px}
  .ctrl-btn{padding:8px 12px;font-size:11px}
}

/* ── Small Phone (≤480px) ── */
@media(max-width:480px){
  .top-nav{padding:0 10px;gap:6px}
  .nav-brand-text{font-size:11px}
  .theme-toggle{padding:4px 8px;font-size:11px}
  .theme-toggle span:last-child{display:none}
  .mobile-menu-grid{grid-template-columns:1fr}
}