/* ═══════════════════════════════════════════════════════
   LAYOUT: Shell, Sidebar, Main Content, Classification Bar
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
  font-family: var(--font-primary);
  background: var(--bg-deep);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

/* Classification Bar */
.cls-bar {
  height: var(--classification-height);
  background: var(--fp-red-dim);
  border-bottom: 1px solid var(--fp-red-glow);
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-heading); font-size: 0.65rem; font-weight: 600;
  color: var(--fp-red); letter-spacing: 0.1em; text-transform: uppercase;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
}

/* Sidebar */
.sidebar {
  position: fixed; top: var(--classification-height); left: 0; bottom: 0;
  width: var(--sidebar-width); background: var(--bg-primary);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 90;
  transition: transform var(--transition-normal);
}
.sidebar-brand {
  padding: 1.2rem 1rem 0.8rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.6rem;
}
.sidebar-brand img { height: 32px; width: auto; }
.sidebar-brand-text { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.sidebar-brand-sub { font-size: 0.6rem; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar-nav { flex: 1; padding: 0.6rem 0; overflow-y: auto; }
.sidebar-user {
  padding: 0.8rem 1rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.6rem;
}
.user-avatar {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.75rem;
  background: var(--fp-red-dim); color: var(--fp-red); flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-weight: 600; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.65rem; color: var(--text-muted); }

/* Nav Item */
.nav-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 1rem; margin: 2px 0.5rem; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-secondary); font-size: 0.82rem; font-weight: 500;
  transition: all var(--transition-fast); position: relative; border: none; background: none; width: calc(100% - 1rem);
  text-align: left; font-family: var(--font-primary);
}
.nav-item:hover { background: var(--fp-red-dim); color: var(--text-primary); }
.nav-item.active { background: var(--fp-red-dim); color: var(--fp-red); }
.nav-item.active::before {
  content: ''; position: absolute; left: -0.5rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 55%; background: var(--fp-red); border-radius: 0 3px 3px 0;
}
.nav-item i { width: 18px; text-align: center; font-size: 0.9rem; }
.nav-badge {
  margin-left: auto; background: var(--fp-red); color: var(--fp-white);
  font-size: 0.6rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}

/* Main Content */
.main-content {
  margin-left: var(--sidebar-width); margin-top: var(--classification-height);
  padding: var(--space-lg); min-height: calc(100vh - var(--classification-height));
  background: var(--bg-deep);
}

/* Mobile */
.mobile-toggle {
  display: none; position: fixed; top: calc(var(--classification-height) + 6px); left: 0.6rem; z-index: 95;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); cursor: pointer;
  align-items: center; justify-content: center; font-size: 0.95rem;
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0; top: var(--classification-height);
  background: rgba(0,0,0,0.5); z-index: 85;
}
@media (max-width: 768px) {
  .mobile-toggle { display: flex; }
  .sidebar { transform: translateX(-100%); z-index: 95; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .main-content { margin-left: 0; padding: var(--space-md); padding-top: 3.5rem; }
}

/* View Animation */
.view-enter { animation: viewIn 0.25s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Login Layout */
.login-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--space-md); position: relative; overflow: hidden;
}
.login-bg { position: fixed; inset: 0; z-index: 0; background: var(--bg-deep); }
.blob {
  position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.2;
  animation: blobFloat 22s ease-in-out infinite;
}
.blob-1 { width: 500px; height: 500px; background: var(--fp-red); top: -180px; right: -100px; }
.blob-2 { width: 350px; height: 350px; background: var(--info); bottom: -100px; left: -60px; animation-delay: -7s; }
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.08); }
  66% { transform: translate(-25px,35px) scale(0.95); }
}
.login-card {
  position: relative; z-index: 1; max-width: 400px; width: 94%;
  padding: 2rem 1.8rem; background: rgba(26,31,42,0.9);
  backdrop-filter: blur(20px); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
}
.login-logo { height: 44px; margin: 0 auto 1rem; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}