/* ═══════════════════════════════════════════════════════════
   navigation.css — Sidebar, topbar, app-level nav
   ═══════════════════════════════════════════════════════════ */

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  width:          var(--sidebar-w);
  min-height:     100vh;
  background:     var(--bg2);
  border-right:   1px solid var(--border);
  display:        flex;
  flex-direction: column;
  position:       fixed;
  top: 0; left: 0; bottom: 0;
  z-index:        200;
  transition:     transform var(--transition), background 0.25s ease, border-color 0.25s ease;
  overflow-y:     auto;
}

.sidebar-logo {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       18px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink:   0;
}

.logo-mark {
  width:           34px;
  height:          34px;
  background:      var(--accent);
  border-radius:   9px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       17px;
  box-shadow:      0 0 20px rgba(59,130,246,0.3);
  flex-shrink:     0;
}

.logo-name {
  font-family:    'Times New Roman', sans-serif;
  font-size:      16px;
  font-weight:    800;
  letter-spacing: -0.3px;
  white-space:    nowrap;
}

.sidebar-nav {
  flex:           1;
  padding:        12px 8px;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.nav-item {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         9px 12px;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  font-size:       13px;
  font-weight:     500;
  color:           var(--text2);
  text-decoration: none;
  transition:      all var(--transition);
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
}
.nav-item:hover  { background: var(--bg3); color: var(--text); }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-icon        { font-size: 14px; flex-shrink: 0; }

/* ── SIDEBAR FOOTER ──────────────────────────────────────── */
.sidebar-footer {
  padding:        12px;
  border-top:     1px solid var(--border);
  display:        flex;
  flex-direction: column;
  gap:            8px;
  flex-shrink:    0;
}

.user-pill {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       8px 10px;
}

.user-avatar {
  width:           28px;
  height:          28px;
  background:      var(--accent);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  font-weight:     700;
  color:           #fff;
  flex-shrink:     0;
}

.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }

.logout-btn {
  background:  none;
  border:      none;
  color:       var(--text3);
  cursor:      pointer;
  font-size:   14px;
  padding:     4px;
  transition:  color var(--transition);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.logout-btn:hover { color: var(--red); }

/* ── THEME TOGGLE ROW ────────────────────────────────────── */
.sidebar-bottom-row {
  display:     flex;
  align-items: center;
  gap:         6px;
}

/* The toggle button itself */
.theme-toggle-btn {
  flex:            1;
  display:         flex;
  align-items:     center;
  gap:             8px;
  background:      var(--bg3);
  border:          1px solid var(--border);
  border-radius:   var(--radius-sm);
  padding:         7px 10px;
  cursor:          pointer;
  font-size:       12px;
  font-weight:     500;
  color:           var(--text2);
  font-family:     'Times New Roman', sans-serif;
  transition:      all var(--transition);
  -webkit-tap-highlight-color: transparent;
  white-space:     nowrap;
  overflow:        hidden;
}
.theme-toggle-btn:hover {
  background:   var(--bg4);
  border-color: var(--border2);
  color:        var(--text);
}

/* The sliding pill track */
.theme-toggle-track {
  width:         32px;
  height:        18px;
  background:    var(--border2);
  border-radius: 99px;
  position:      relative;
  flex-shrink:   0;
  transition:    background 0.25s ease;
}
[data-theme="light"] .theme-toggle-track {
  background: var(--accent);
}

/* The sliding pill thumb */
.theme-toggle-thumb {
  width:         12px;
  height:        12px;
  background:    #fff;
  border-radius: 50%;
  position:      absolute;
  top:           3px;
  left:          3px;
  transition:    transform 0.25s ease;
  box-shadow:    0 1px 3px rgba(0,0,0,0.25);
}
[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(14px);
}

/* Icon + label inside the button */
.theme-toggle-icon  { font-size: 13px; flex-shrink: 0; }
.theme-toggle-label { flex: 1; text-align: left; }

/* ── STATUS PILL ─────────────────────────────────────────── */
.status-pill {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   11px;
  color:       var(--text3);
  padding:     0 2px;
  font-family: 'Times New Roman', monospace;
}

.status-dot {
  width:         7px;
  height:        7px;
  background:    var(--amber);
  border-radius: 50%;
  flex-shrink:   0;
}
.status-dot.pulse { animation: pulse 2s infinite; }

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

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.6);
  z-index:         190;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }


/* ── TOPBAR ──────────────────────────────────────────────── */
.topbar {
  height:          var(--topbar-h);
  background:      var(--bg2);
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 20px;
  position:        sticky;
  top:             0;
  z-index:         100;
  gap:             12px;
  transition:      background 0.25s ease, border-color 0.25s ease;
}

.topbar-left  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.menu-btn {
  background:    none;
  border:        none;
  color:         var(--text2);
  cursor:        pointer;
  font-size:     18px;
  padding:       4px 6px;
  border-radius: var(--radius-sm);
  transition:    all var(--transition);
  display:       none;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn:hover { background: var(--bg3); color: var(--text); }

.breadcrumb {
  font-family:   'Times New Roman', sans-serif;
  font-size:     15px;
  font-weight:   700;
  color:         var(--text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.topbar-date {
  font-family: 'Times New Roman', monospace;
  font-size:   11px;
  color:       var(--text3);
  white-space: nowrap;
}