/* XMADE Design Upgrade v2 (additiv)
 * Polished sidebar like new.xmade-systems.com:
 * - Rounded sidebar items, smoother hover, gradient active state
 * - Bigger, clearer icons (18-20px)
 * - Refined section labels (uppercase, spaced, muted)
 * - Badges with glow
 * - Stat/KPI card top-accent + hover lift
 * - Login card polish
 * - Command Palette (⌘K) styling
 */

:root {
    --xup-accent:    #4F8EF7;
    --xup-accent-2:  #8B5CF6;
    --xup-success:   #10B981;
    --xup-warn:      #F59E0B;
    --xup-danger:    #EF4444;
    --xup-bg-deep:   #0A0E14;
    --xup-bg-side:   #0D1117;
    --xup-border:    rgba(255,255,255,0.06);
}

/* ───── Sidebar container ───── */
.sidebar {
    background: linear-gradient(180deg, var(--xup-bg-side) 0%, var(--xup-bg-deep) 100%) !important;
    border-right: 1px solid var(--xup-border) !important;
}

/* ───── Sidebar header / logo ───── */
.sidebar-header {
    border-bottom: 1px solid var(--xup-border) !important;
}
.sidebar-logo,
.logo {
    background: linear-gradient(135deg, var(--xup-accent-2), var(--xup-accent)) !important;
    box-shadow: 0 6px 18px rgba(79,142,247,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
}

/* ───── Section titles ───── */
.nav-section-title {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    color: rgba(148,163,184,0.55) !important;
    padding: 14px 22px 8px !important;
    display: block;
}

.nav-section + .nav-section {
    border-top: 1px solid rgba(255,255,255,0.04);
    margin-top: 6px;
    padding-top: 4px;
}

/* ───── Nav items (admin uses .nav-item > a, dash uses .nav-link) ───── */
.sidebar .nav-item > a,
.sidebar .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 2px 10px !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    border-left: 0 !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease !important;
    position: relative;
}

.sidebar .nav-item > a:hover,
.sidebar .nav-link:hover {
    background: rgba(255,255,255,0.04) !important;
    color: #E2E8F0 !important;
}

/* Active state */
.sidebar .nav-item.active > a,
.sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(139,92,246,0.18), rgba(79,142,247,0.10)) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Icons */
.sidebar .nav-item > a > svg,
.sidebar .nav-link > svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    stroke-width: 2 !important;
    color: #94a3b8;
    transition: color .15s ease;
}
.sidebar .nav-link > i {
    font-size: 16px !important;
    width: 18px !important;
    text-align: center;
    flex-shrink: 0;
    color: #94a3b8;
}

.sidebar .nav-item > a:hover > svg,
.sidebar .nav-link:hover > svg,
.sidebar .nav-link:hover > i { color: #cbd5e1; }

.sidebar .nav-item.active > a > svg,
.sidebar .nav-link.active > svg,
.sidebar .nav-link.active > i {
    color: var(--xup-accent) !important;
}

/* Active accent bar on the left */
.sidebar .nav-item.active > a::before,
.sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, var(--xup-accent-2), var(--xup-accent));
    border-radius: 0 3px 3px 0;
}

/* ───── Nav badges (counts on the right) ───── */
.nav-badge,
.sidebar .nav-link .badge {
    margin-left: auto !important;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--xup-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(79,142,247,0.18);
}
.nav-badge[hidden] { display: none !important; }
.nav-badge:empty   { display: none !important; }
.nav-badge.danger  { background: var(--xup-danger); box-shadow: 0 0 0 2px rgba(239,68,68,0.20); }
.nav-badge.warn    { background: var(--xup-warn); color: #1f1300; box-shadow: 0 0 0 2px rgba(245,158,11,0.20); }
.nav-badge.success { background: var(--xup-success); box-shadow: 0 0 0 2px rgba(16,185,129,0.20); }
.nav-badge.muted   { background: rgba(148,163,184,0.30); color: #cbd5e1; box-shadow: none; }

.notification-badge {
    background: var(--xup-danger) !important;
    box-shadow: 0 0 0 2px var(--xup-bg-side);
}

/* ───── Sidebar footer (user) ───── */
.sidebar-footer {
    border-top: 1px solid var(--xup-border) !important;
}
.user-avatar {
    background: linear-gradient(135deg, var(--xup-accent-2), var(--xup-accent)) !important;
    box-shadow: 0 4px 12px rgba(79,142,247,0.30), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}

/* ───── Stat / KPI cards ───── */
.stat-card,
.kpi-card {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card::after,
.kpi-card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--xup-accent-2), var(--xup-accent));
    opacity: .85;
}
.stat-card[data-accent="success"]::after,
.kpi-card.success::after { background: linear-gradient(90deg, #10B981, #059669); }
.stat-card[data-accent="warn"]::after,
.kpi-card.warning::after { background: linear-gradient(90deg, #F59E0B, #D97706); }
.stat-card[data-accent="danger"]::after,
.kpi-card.danger::after  { background: linear-gradient(90deg, #EF4444, #DC2626); }
.stat-card[data-accent="blue"]::after,
.kpi-card.accent::after  { background: linear-gradient(90deg, #3B82F6, #2563EB); }

.stat-card:hover,
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.45), 0 4px 10px -4px rgba(0,0,0,0.30);
    border-color: rgba(255,255,255,0.12);
}

/* ───── Login polish ───── */
.login-card,
.login-container .card {
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;
    border: 1px solid var(--xup-border);
}

/* ───── Command Palette (⌘K) ───── */
.cmdk-backdrop {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(8,12,20,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.cmdk-backdrop.open { display: flex; }
.cmdk-modal {
    width: min(640px, 92vw);
    background: #0F1623;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
    overflow: hidden;
    color: #e2e8f0;
    font-family: inherit;
}
.cmdk-input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #f1f5f9;
    font-size: 15px;
    padding: 16px 18px;
    outline: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cmdk-list {
    max-height: 50vh;
    overflow-y: auto;
    padding: 6px;
}
.cmdk-group-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(148,163,184,0.55);
    padding: 10px 12px 6px;
}
.cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #cbd5e1;
}
.cmdk-item.active {
    background: linear-gradient(90deg, rgba(139,92,246,0.22), rgba(79,142,247,0.10));
    color: #fff;
}
.cmdk-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: #94a3b8;
}
.cmdk-item.active .cmdk-icon { color: var(--xup-accent); }
.cmdk-footer {
    display: flex;
    gap: 16px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 11px;
    color: #64748b;
}
.kbd {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #cbd5e1;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 10px;
    margin-right: 6px;
}

/* ───── Skeleton ───── */
@keyframes xup-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.xup-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 37%, rgba(255,255,255,0.04) 63%);
    background-size: 800px 100%;
    animation: xup-shimmer 1.4s linear infinite;
    border-radius: 6px;
}

/* ───── Reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
    .sidebar .nav-item > a,
    .sidebar .nav-link,
    .stat-card, .kpi-card { transition: none !important; }
    .xup-skeleton { animation: none; }
}