/* ============================================================
   DEADFRAME v5 — Shell CSS
   Structural layout only — zero color values here.
   All color comes from the theme file (noc/life/arcade × dark/light).
   Theme files must define: --hover-bg, --hover-bg-danger, and all
   color tokens listed in the theme spec.
   ============================================================ */

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

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg);
}

body {
  font-family: var(--body-font, 'Inter', sans-serif);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
}

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

[x-cloak] { display: none !important; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Topbar ─────────────────────────────────────────────────── */
.uni-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h, 50px);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px 0 0;
  z-index: 100;
  gap: 6px;
}

/* Brand section — matches sidebar width */
.uni-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.2s ease;
  min-width: 0;
}

.uni-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--accent-dim);
  border-radius: var(--r-sm);
  color: var(--accent);
  flex-shrink: 0;
}
.uni-brand-icon svg, .uni-brand-icon i { width: 14px; height: 14px; stroke: currentColor; }

.uni-brand-name {
  font-family: var(--heading-font, 'Orbitron', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* Sidebar toggle button */
.uni-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.uni-toggle:hover { background: var(--hover-bg); color: var(--text-dim); }

/* Topbar center and right slots */
.uni-topbar-center { flex: 1; display: flex; align-items: center; min-width: 0; padding: 0 4px; }
.uni-topbar-right  { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.uni-sidebar {
  position: fixed;
  top: var(--topbar-h, 50px);
  left: 0; bottom: 0;
  width: var(--sidebar-w, 224px);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 90;
  transition: width 0.2s ease;
  padding-top: 6px;
  padding-bottom: 12px;
}
.uni-sidebar.collapsed { width: var(--sidebar-w-col, 58px); }

/* ── Main Content ────────────────────────────────────────────── */
.uni-main {
  margin-left: var(--sidebar-w, 224px);
  margin-top: var(--topbar-h, 50px);
  overflow-y: auto;
  overflow-x: hidden;
  transition: margin-left 0.2s ease;
  min-height: calc(100vh - var(--topbar-h, 50px));
}
.uni-main.sidebar-collapsed { margin-left: var(--sidebar-w-col, 58px); }

/* ── Navigation Items ───────────────────────────────────────── */
.uni-nav-section {
  padding: 12px 10px 2px;
}
.uni-sidebar.collapsed .uni-nav-section { padding: 8px 6px 2px; }

.uni-nav-label {
  font-family: var(--mono-font, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 6px;
  white-space: nowrap;
  opacity: 0.75;
}
.uni-sidebar.collapsed .uni-nav-label { opacity: 0; pointer-events: none; height: 0; overflow: hidden; }

/* Section label variant used in Arcade and Life sidebars (no wrapper div needed) */
.uni-nav-section-label {
  font-family: var(--mono-font, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 18px 2px;
  white-space: nowrap;
  opacity: 0.75;
}
.uni-sidebar.collapsed .uni-nav-section-label { display: none; }

.uni-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin: 1px 8px;
  border-radius: var(--r-md);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.12s, background 0.12s;
  position: relative;
}
.uni-nav-item:hover { color: var(--text); background: var(--hover-bg); text-decoration: none; }
.uni-nav-item.active { color: var(--accent); background: var(--accent-dim); }
.uni-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.uni-nav-item svg, .uni-nav-item i {
  flex-shrink: 0;
  width: 17px; height: 17px;
  stroke: currentColor;
}
.uni-nav-item span { overflow: hidden; text-overflow: ellipsis; }

.uni-sidebar.collapsed .uni-nav-item span { display: none; }
.uni-sidebar.collapsed .uni-nav-item { justify-content: center; padding: 8px 6px; margin: 1px 6px; }
.uni-sidebar.collapsed .uni-nav-label { display: none; }

.uni-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 14px;
  opacity: 0.4;
}

/* Sidebar footer / version */
.uni-sidebar-footer {
  padding: 8px 14px;
  margin-top: auto;
}
.uni-version {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono-font, monospace);
  opacity: 0.5;
  white-space: nowrap;
}
.uni-sidebar.collapsed .uni-sidebar-footer { display: none; }

/* ── Platform Switcher ──────────────────────────────────────── */
.platform-switcher {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--surface-2, var(--hover-bg));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  flex-shrink: 0;
  margin: 0 6px;
}
.plat-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
  line-height: 1;
}
.plat-btn svg, .plat-btn i { width: 12px; height: 12px; flex-shrink: 0; stroke: currentColor; }
.plat-btn:hover { color: var(--text-dim); background: var(--hover-bg); text-decoration: none; }
.plat-btn.plat-active.plat-noc    { color: var(--noc-accent,    #c4602c); background: var(--noc-accent-dim,    rgba(196,96,44,0.13)); }
.plat-btn.plat-active.plat-life   { color: var(--life-accent,   #c97c3a); background: var(--life-accent-dim,   rgba(201,124,58,0.13)); }
.plat-btn.plat-active.plat-arcade { color: var(--arcade-accent, #e040fb); background: var(--arcade-accent-dim, rgba(224,64,251,0.13)); }
.plat-btn.plat-active.plat-admin  { color: var(--admin-accent,  #7c6cf6); background: var(--admin-accent-dim,  rgba(124,108,246,0.13)); }

/* ── Theme Toggle Button ────────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--hover-bg); color: var(--text-dim); }
.theme-toggle svg, .theme-toggle i { width: 15px; height: 15px; stroke: currentColor; display: block; }

/* ── User Dropdown ──────────────────────────────────────────── */
.uni-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  border-radius: var(--r-md);
  transition: background 0.12s;
}
.uni-user-btn:hover { background: var(--hover-bg); }
.uni-username {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}

.uni-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 210px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.uni-dropdown-header {
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
}
.uni-dropdown-name   { font-size: 13px; font-weight: 600; color: var(--text); }
.uni-dropdown-role   {
  font-size: 10px;
  color: var(--accent);
  font-family: var(--mono-font, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.uni-dropdown-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  font-size: 13px; color: var(--text-dim);
  text-decoration: none; cursor: pointer;
  background: none; border: none; width: 100%;
  text-align: left; transition: background 0.12s, color 0.12s;
}
.uni-dropdown-item:hover { background: var(--hover-bg); color: var(--text); text-decoration: none; }
.uni-dropdown-item svg, .uni-dropdown-item i { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
.uni-dropdown-danger      { color: var(--down) !important; }
.uni-dropdown-danger:hover { background: var(--hover-bg-danger) !important; color: var(--down) !important; }
.uni-dropdown-divider { height: 1px; background: var(--border); margin: 2px 0; opacity: 0.4; }

/* ── Mobile Backdrop ────────────────────────────────────────── */
.uni-mobile-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 89;
  backdrop-filter: blur(2px);
}

/* ── Mobile (≤768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .uni-sidebar {
    width: var(--sidebar-w, 224px) !important;
    left: calc(-1 * var(--sidebar-w, 224px));
    transition: left 0.2s ease;
  }
  .uni-sidebar.mobile-open { left: 0; box-shadow: var(--shadow-lg); }
  .uni-main, .uni-main.sidebar-collapsed { margin-left: 0; }

  /* Restore full nav when mobile sidebar is open */
  .uni-sidebar.collapsed .uni-nav-item span { display: inline; }
  .uni-sidebar.collapsed .uni-nav-item { justify-content: flex-start; padding: 7px 10px; margin: 1px 4px; }
  .uni-sidebar.collapsed .uni-nav-label { display: block; opacity: 0.75; height: auto; }
  .uni-sidebar.collapsed .uni-sidebar-footer { display: block; }

  .plat-btn span { display: none; }
  .plat-btn { padding: 4px 7px; }
  .uni-username { display: none; }
}

/* ── Tablet (769–1024px) ─────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .uni-sidebar { width: var(--sidebar-w-col, 58px); }
  .uni-sidebar .uni-nav-item span { display: none; }
  .uni-sidebar .uni-nav-item { justify-content: center; padding: 8px 6px; margin: 1px 4px; }
  .uni-sidebar .uni-nav-label { display: none; }
  .uni-sidebar .uni-sidebar-footer { display: none; }
  .uni-main { margin-left: var(--sidebar-w-col, 58px); }
}