:root {
  --sm-c1:#dc3545; --sm-c2:#0d6efd; --sm-c3:#198754; --sm-c4:#ffc107; --sm-c5:#6f42c1;
  --sm-c6:#fd7e14; --sm-c7:#20c997; --sm-c8:#d63384; --sm-c9:#0dcaf0; --sm-c10:#6610f2;
  --sb-bg:#1f2937; --sb-fg:#cbd5e1; --sb-active:#dc2626; --sb-hover:#334155;
  --sidebar-w: 248px;
  --topbar-h: 56px;
}
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:#f5f7fb; }

.app-shell { display:flex; min-height:100vh; }
.app-sidebar {
  width: var(--sidebar-w); background: var(--sb-bg); color: var(--sb-fg);
  flex-shrink:0; padding: 14px 10px; display:flex; flex-direction:column; gap: 14px;
  position: sticky; top:0; height:100vh; overflow-y:auto;
}
.app-sidebar .brand { display:flex; align-items:center; gap:10px; padding: 4px 8px 12px; border-bottom:1px solid #334155; }
.app-sidebar .brand-logo {
  width:38px; height:38px; border-radius:8px; background: linear-gradient(135deg,var(--sm-c2),var(--sm-c10));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;
}
.app-sidebar .brand-title { color:#fff; font-weight:600; line-height:1.1; }
.app-sidebar .brand-subtitle { font-size:.72rem; color:#94a3b8; }
.app-sidebar .nav-group .group-label {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#64748b;
  padding: 8px 10px 4px;
}
.app-sidebar a {
  display:flex; align-items:center; gap:10px; padding:.5rem .75rem; border-radius:6px;
  color: var(--sb-fg); text-decoration:none; font-size:.9rem; margin: 1px 0;
}
.app-sidebar a i { width:16px; text-align:center; color:#94a3b8; }
.app-sidebar a:hover { background: var(--sb-hover); color:#fff; }
.app-sidebar a.active { background: var(--sb-active); color:#fff; }
.app-sidebar a.active i { color:#fff; }

.app-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topbar {
  height: var(--topbar-h); background:#fff; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; gap:12px; padding: 0 18px; position:sticky; top:0; z-index:10;
}
.topbar-title { font-weight:600; font-size:1rem; }
.avatar {
  width:26px; height:26px; border-radius:50%; background:var(--sm-c2); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600;
}
.app-content { padding: 20px; }

.stat-card { border-left:4px solid var(--sm-c2); }
.stat-card.c1 { border-left-color: var(--sm-c1); }
.stat-card.c3 { border-left-color: var(--sm-c3); }
.stat-card.c4 { border-left-color: var(--sm-c4); }
.stat-card.c5 { border-left-color: var(--sm-c5); }
.stat-card.c6 { border-left-color: var(--sm-c6); }
.stat-card.c7 { border-left-color: var(--sm-c7); }

.badge-soft-primary { background:#cfe2ff; color:#084298; }
.badge-soft-success { background:#d1e7dd; color:#0f5132; }
.badge-soft-warning { background:#fff3cd; color:#664d03; }
.badge-soft-danger  { background:#f8d7da; color:#842029; }
.badge-soft-info    { background:#cff4fc; color:#055160; }

.table thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:#64748b; }

@media (max-width: 991px) {
  .app-sidebar { position:fixed; left:-100%; z-index:1030; transition: left .2s; }
  body.sidebar-open .app-sidebar { left:0; }
}

/* ========== Dark Mode (Batch 5.3B) ========== */
[data-bs-theme="light"] body { background: #f5f7fb; }
[data-bs-theme="dark"]  body { background: #0f172a; color: #e2e8f0; }

[data-bs-theme="dark"] .app-topbar { background: #1e293b; border-bottom-color:#334155; }
[data-bs-theme="dark"] .topbar-title { color:#e2e8f0; }
[data-bs-theme="dark"] .app-topbar .btn-light { background:#334155; color:#e2e8f0; border-color:#475569; }
[data-bs-theme="dark"] .app-topbar .text-muted { color:#94a3b8 !important; }

[data-bs-theme="dark"] .card { background:#1e293b; border-color:#334155; color:#e2e8f0; }
[data-bs-theme="dark"] .card .text-muted { color:#94a3b8 !important; }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; color:#e2e8f0; }
[data-bs-theme="dark"] .table thead th { color:#94a3b8; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background:#0f172a; color:#e2e8f0; border-color:#334155; }
[data-bs-theme="dark"] .form-control:disabled { background:#1e293b; color:#64748b; }
[data-bs-theme="dark"] .nav-tabs { border-bottom-color:#334155; }
[data-bs-theme="dark"] .nav-tabs .nav-link { color:#94a3b8; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { background:#0f172a; color:#e2e8f0; border-color:#334155 #334155 #0f172a; }
[data-bs-theme="dark"] .dropdown-menu { background:#1e293b; border-color:#334155; }
[data-bs-theme="dark"] .dropdown-item { color:#e2e8f0; }
[data-bs-theme="dark"] .dropdown-item:hover { background:#334155; }

.avatar { transition: transform .1s; }
.avatar:hover { transform: scale(1.08); }

/* Avatar color palette (Batch 5.3B) */
.avatar-c1  { background: #EF4444 !important; }
.avatar-c2  { background: #F97316 !important; }
.avatar-c3  { background: #EAB308 !important; }
.avatar-c4  { background: #22C55E !important; }
.avatar-c5  { background: #06B6D4 !important; }
.avatar-c6  { background: #3B82F6 !important; }
.avatar-c7  { background: #8B5CF6 !important; }
.avatar-c8  { background: #EC4899 !important; }
.avatar-c9  { background: #10B981 !important; }
.avatar-c10 { background: #F59E0B !important; }

/* === Collapsible sidebar group === */
.app-sidebar .group-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a1a1aa;
    transition: color 0.15s;
}
.app-sidebar .group-toggle:hover { color: #fff; }
.app-sidebar .group-toggle .chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.app-sidebar .group-toggle.collapsed .chevron { transform: rotate(-90deg); }
.app-sidebar .group-toggle:focus { outline: none; box-shadow: none; }
.app-sidebar .collapse:not(.show) { display: none; }

/* === Section header with icon === */
.app-sidebar .group-label-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.app-sidebar .group-label-text i {
    font-size: 0.85rem;
    opacity: 0.75;
}

.app-sidebar .group-toggle:hover .group-label-text i {
    opacity: 1;
}

/* Sub-menu items visual indent indicator */
.app-sidebar .collapse a {
    position: relative;
    padding-left: 1.5rem;
}

.app-sidebar .collapse a i:not(.chevron) {
    font-size: 0.95rem;
    width: 1.1rem;
    text-align: center;
}

/* === Section header with icon === */
.app-sidebar .group-label-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.app-sidebar .group-label-text i {
    font-size: 0.85rem;
    opacity: 0.75;
}

.app-sidebar .group-toggle:hover .group-label-text i {
    opacity: 1;
}

/* Sub-menu items visual indent indicator */
.app-sidebar .collapse a {
    position: relative;
    padding-left: 1.5rem;
}

.app-sidebar .collapse a i:not(.chevron) {
    font-size: 0.95rem;
    width: 1.1rem;
    text-align: center;
}