/* ═══════════════════════════════════════════════════════
   Studio Shamaro Admin & Portal — Theme System
   Donker (standaard) + Licht thema
   Accentkleur: #f5c518  (goud/geel)
   Versie: 1.0
═══════════════════════════════════════════════════════ */

/* ── Transitie bij wisselen ─────────────────────────── */
*, *::before, *::after {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}
/* Geen transitie op animaties en transformaties */
[class*="transition"], [class*="animate"],
.toast, iframe { transition: none !important; }

/* ── Licht thema (standaard als geen voorkeur) ────────── */
:root, [data-theme="light"] {
    --bg:              #f4f4f5;
    --bg-alt:          #ebebec;
    --surface:         #ffffff;
    --surface-raised:  #f9f9f9;
    --border:          #e4e4e7;
    --border-subtle:   #f0f0f0;
    --text-primary:    #111111;
    --text-secondary:  #52525b;
    --text-muted:      #a1a1aa;
    --accent:          #f5c518;
    --accent-dark:     #d4a800;
    --accent-light:    rgba(245,197,24,0.12);
    --accent-fg:       #111111;
    --sidebar-bg:      #111118;
    --sidebar-border:  #1e1e28;
    --sidebar-text:    rgba(255,255,255,0.55);
    --sidebar-active:  rgba(245,197,24,0.15);
    --sidebar-active-text: #f5c518;
    --sidebar-hover:   rgba(255,255,255,0.06);
    --sidebar-section: rgba(255,255,255,0.25);
    --header-bg:       #ffffff;
    --header-border:   #e4e4e7;
    --input-bg:        #ffffff;
    --input-border:    #d4d4d8;
    --shadow-sm:       0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card:     0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg:       0 8px 24px rgba(0,0,0,0.12);
}

/* ── Donker thema ──────────────────────────────────── */
[data-theme="dark"] {
    --bg:              #0c0c0d;
    --bg-alt:          #111113;
    --surface:         #18181b;
    --surface-raised:  #1e1e22;
    --border:          #27272a;
    --border-subtle:   #222226;
    --text-primary:    #f4f4f5;
    --text-secondary:  #a1a1aa;
    --text-muted:      #52525b;
    --accent:          #f5c518;
    --accent-dark:     #ffd000;
    --accent-light:    rgba(245,197,24,0.1);
    --accent-fg:       #111111;
    --sidebar-bg:      #0c0c0d;
    --sidebar-border:  #1a1a1d;
    --sidebar-text:    rgba(255,255,255,0.45);
    --sidebar-active:  rgba(245,197,24,0.12);
    --sidebar-active-text: #f5c518;
    --sidebar-hover:   rgba(255,255,255,0.04);
    --sidebar-section: rgba(255,255,255,0.18);
    --header-bg:       #111113;
    --header-border:   #27272a;
    --input-bg:        #1e1e22;
    --input-border:    #32323a;
    --shadow-sm:       0 1px 3px rgba(0,0,0,0.4);
    --shadow-card:     0 2px 8px rgba(0,0,0,0.5);
    --shadow-lg:       0 8px 24px rgba(0,0,0,0.7);
}

/* ══════════════════════════════════════════════════════
   GLOBAL RESETS
══════════════════════════════════════════════════════ */
body {
    background-color: var(--bg) !important;
    color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════
   ACHTERGROND OVERRIDES (Tailwind bg-*)
══════════════════════════════════════════════════════ */
[data-theme="dark"] .bg-white             { background-color: var(--surface) !important; }
[data-theme="dark"] .bg-gray-50           { background-color: var(--bg-alt) !important; }
[data-theme="dark"] .bg-gray-100          { background-color: var(--surface-raised) !important; }
[data-theme="dark"] .bg-gray-200          { background-color: var(--surface-raised) !important; }
[data-theme="dark"] body,
[data-theme="dark"] .min-h-screen         { background-color: var(--bg) !important; }
[data-theme="dark"] .h-full               { background-color: var(--bg) !important; }

/* ══════════════════════════════════════════════════════
   RAND OVERRIDES (Tailwind border-*)
══════════════════════════════════════════════════════ */
[data-theme="dark"] .border,
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-l,
[data-theme="dark"] .border-r            { border-color: var(--border) !important; }
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300     { border-color: var(--border) !important; }
[data-theme="dark"] .divide-y > * + *    { border-color: var(--border-subtle) !important; }
[data-theme="dark"] .divide-gray-100 > * + *,
[data-theme="dark"] .divide-gray-50 > * + * { border-color: var(--border-subtle) !important; }

/* ══════════════════════════════════════════════════════
   TEKST OVERRIDES (Tailwind text-*)
══════════════════════════════════════════════════════ */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800       { color: var(--text-primary) !important; }
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600       { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400       { color: var(--text-muted) !important; }
[data-theme="dark"] .text-gray-300       { color: rgba(255,255,255,0.3) !important; }

/* ══════════════════════════════════════════════════════
   INVOERVELDEN
══════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="color"],
select,
textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
    border-radius: 0.625rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    box-shadow: var(--shadow-sm) !important;
}
input[type="color"] {
    padding: 0.125rem !important;
    height: 2.25rem !important;
    width: 3.5rem !important;
    cursor: pointer !important;
}
/* Uitzondering: header zoekbalk heeft links ruimte nodig voor het vergrootglas-icoon */
.shamaro-header input[type="text"] {
    padding-left: 2rem !important;
}
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(245,197,24,0.2) !important;
}
select option {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
}
textarea {
    resize: vertical !important;
    min-height: 2.5rem !important;
}
/* Auto-grow textareas */
textarea.auto-grow {
    overflow: hidden !important;
    resize: none !important;
}

/* ══════════════════════════════════════════════════════
   KAARTEN & OPPERVLAKKEN
══════════════════════════════════════════════════════ */
.bg-white.rounded-xl,
.bg-white.rounded-lg {
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .bg-white.rounded-xl,
[data-theme="dark"] .bg-white.rounded-lg {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow    { box-shadow: var(--shadow-sm) !important; }
[data-theme="dark"] .shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ══════════════════════════════════════════════════════
   KNOPPEN — Consistente grootte & Accent stijl
══════════════════════════════════════════════════════ */

/* Primaire knop (was indigo → nu accent geel) */
.btn-primary,
.bg-indigo-600,
button.bg-indigo-600,
a.bg-indigo-600 {
    background-color: var(--accent) !important;
    color: var(--accent-fg) !important;
    font-weight: 600 !important;
    border: none !important;
    min-height: 2.375rem !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.625rem !important;
    box-shadow: 0 1px 3px rgba(245,197,24,0.25) !important;
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease !important;
}
.bg-indigo-600:hover,
button.bg-indigo-600:hover,
a.bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
    background-color: var(--accent-dark) !important;
    box-shadow: 0 4px 12px rgba(245,197,24,0.3) !important;
    transform: translateY(-1px) !important;
}
.bg-indigo-600:active,
button.bg-indigo-600:active {
    transform: translateY(0) !important;
}

/* Indigo 700 */
.bg-indigo-700,
button.bg-indigo-700,
a.bg-indigo-700,
.hover\:bg-indigo-700 {
    background-color: var(--accent-dark) !important;
    color: var(--accent-fg) !important;
}

/* Secondaire knop (grijs) */
.bg-gray-100,
button.bg-gray-100,
a.bg-gray-100 {
    background-color: var(--surface-raised) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.625rem !important;
    min-height: 2.375rem !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 500 !important;
    transition: background-color 0.15s ease !important;
}
[data-theme="dark"] .bg-gray-100:hover,
[data-theme="dark"] button.bg-gray-100:hover,
[data-theme="dark"] a.bg-gray-100:hover,
.bg-gray-100:hover,
button.bg-gray-100:hover,
a.bg-gray-100:hover {
    background-color: var(--bg-alt) !important;
    color: var(--text-primary) !important;
}

/* Witte knop met border */
.bg-white.border.border-gray-300,
button.bg-white.border,
a.bg-white.border {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .bg-white.border.border-gray-300:hover,
.bg-white.border.border-gray-300:hover {
    background-color: var(--surface-raised) !important;
}

/* Consistente knophoogte — alle submit knoppen */
button[type="submit"],
input[type="submit"] {
    min-height: 2.375rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* ══════════════════════════════════════════════════════
   INDIGO PALET → ACCENT OVERRIDES
══════════════════════════════════════════════════════ */
[data-theme="dark"] .text-indigo-600,
[data-theme="dark"] .text-indigo-700,
[data-theme="dark"] a.text-indigo-600,
[data-theme="dark"] a.text-indigo-700 { color: var(--accent) !important; }
[data-theme="dark"] .bg-indigo-50      { background-color: var(--accent-light) !important; }
[data-theme="dark"] .border-indigo-200 { border-color: rgba(245,197,24,0.2) !important; }
[data-theme="dark"] .text-indigo-800   { color: var(--accent) !important; }
[data-theme="dark"] .bg-indigo-100     { background-color: var(--accent-light) !important; }
[data-theme="dark"] .focus\:ring-indigo-400:focus,
[data-theme="dark"] .focus\:ring-indigo-500:focus { box-shadow: 0 0 0 3px rgba(245,197,24,0.25) !important; }

/* Licht thema indigo → ook accent geel */
.text-indigo-600,
.text-indigo-700,
a.text-indigo-600,
a.text-indigo-700           { color: var(--accent-dark) !important; }
.bg-indigo-50               { background-color: rgba(245,197,24,0.08) !important; }
.focus\:ring-indigo-400:focus,
.focus\:ring-indigo-500:focus { box-shadow: 0 0 0 3px rgba(245,197,24,0.25) !important; }

/* Actieve tab met indigo border */
.border-indigo-600          { border-color: var(--accent) !important; }

/* ══════════════════════════════════════════════════════
   HOVER ACTIES
══════════════════════════════════════════════════════ */
[data-theme="dark"] .hover\:bg-gray-50:hover  { background-color: var(--surface-raised) !important; }
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--surface-raised) !important; }
[data-theme="dark"] .hover\:bg-indigo-50:hover { background-color: var(--accent-light) !important; }
[data-theme="dark"] a:hover .text-gray-700,
[data-theme="dark"] tr:hover .text-gray-700    { color: var(--text-primary) !important; }

/* ══════════════════════════════════════════════════════
   TABEL
══════════════════════════════════════════════════════ */
[data-theme="dark"] table thead th,
[data-theme="dark"] .bg-gray-50.text-xs {
    background-color: var(--surface-raised) !important;
    color: var(--text-muted) !important;
}
[data-theme="dark"] tbody tr:hover {
    background-color: var(--surface-raised) !important;
}
[data-theme="dark"] .divide-y tbody tr + tr {
    border-top-color: var(--border-subtle) !important;
}

/* ══════════════════════════════════════════════════════
   SIDEBAR — Admin & Portal
══════════════════════════════════════════════════════ */
.shamaro-sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right-color: var(--sidebar-border) !important;
}
.shamaro-sidebar .sidebar-section-label {
    color: var(--sidebar-section) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.75rem 0.75rem 0.25rem !important;
}
.sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--sidebar-text) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    margin-bottom: 1px !important;
}
.sidebar-link:hover {
    background-color: var(--sidebar-hover) !important;
    color: rgba(255,255,255,0.9) !important;
}
.sidebar-link.active {
    background-color: var(--sidebar-active) !important;
    color: var(--sidebar-active-text) !important;
    font-weight: 600 !important;
}
.sidebar-link.active svg {
    color: var(--sidebar-active-text) !important;
    opacity: 1 !important;
}
.sidebar-link svg {
    opacity: 0.7 !important;
}
.sidebar-link:hover svg {
    opacity: 1 !important;
}

/* Portal sidebar (indigo based → override with dark) */
.shamaro-sidebar .text-indigo-200,
.shamaro-sidebar .text-indigo-300 { color: var(--sidebar-text) !important; }
.shamaro-sidebar .bg-indigo-700,
.shamaro-sidebar .bg-indigo-800   { background-color: var(--sidebar-active) !important; }
.shamaro-sidebar .bg-indigo-700 a,
.shamaro-sidebar a.bg-indigo-700  { color: var(--sidebar-active-text) !important; }
.shamaro-sidebar .hover\:bg-indigo-800:hover { background-color: var(--sidebar-hover) !important; }
.shamaro-sidebar .border-indigo-800 { border-color: var(--sidebar-border) !important; }
.shamaro-sidebar .text-white { color: rgba(255,255,255,0.85) !important; }
/* Portal nav items */
.shamaro-sidebar nav a {
    color: var(--sidebar-text) !important;
}
.shamaro-sidebar nav a:hover {
    background-color: var(--sidebar-hover) !important;
    color: rgba(255,255,255,0.9) !important;
}
.shamaro-sidebar nav a.bg-indigo-700 {
    background-color: var(--sidebar-active) !important;
    color: var(--sidebar-active-text) !important;
}

/* ══════════════════════════════════════════════════════
   HEADER / TOPBAR
══════════════════════════════════════════════════════ */
.shamaro-header {
    background-color: var(--header-bg) !important;
    border-bottom-color: var(--header-border) !important;
}
[data-theme="dark"] .shamaro-header {
    background-color: var(--header-bg) !important;
}

/* ══════════════════════════════════════════════════════
   THEMA TOGGLE KNOP
══════════════════════════════════════════════════════ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    border: 1px solid var(--border);
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease !important;
    white-space: nowrap;
}
.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    background: var(--accent-light);
}
.theme-toggle .toggle-track {
    width: 2rem;
    height: 1.125rem;
    border-radius: 1rem;
    background: var(--border);
    position: relative;
    transition: background 0.2s ease !important;
}
.theme-toggle .toggle-thumb {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--text-muted);
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    transition: transform 0.2s ease, background 0.2s ease !important;
}
[data-theme="dark"] .toggle-track {
    background: var(--accent-light) !important;
}
[data-theme="dark"] .toggle-thumb {
    background: var(--accent) !important;
    transform: translateX(0.875rem) !important;
}

/* ══════════════════════════════════════════════════════
   BADGES EN STATUS — kleuren blijven
══════════════════════════════════════════════════════ */
/* Status badges blijven kleurrijk, maar in dark mode iets aanpassen */
[data-theme="dark"] .bg-green-100  { background-color: rgba(16,185,129,0.12) !important; }
[data-theme="dark"] .bg-green-50   { background-color: rgba(16,185,129,0.08) !important; }
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-700 { color: #34d399 !important; }
[data-theme="dark"] .border-green-200 { border-color: rgba(16,185,129,0.2) !important; }

[data-theme="dark"] .bg-red-100    { background-color: rgba(239,68,68,0.12) !important; }
[data-theme="dark"] .bg-red-50     { background-color: rgba(239,68,68,0.08) !important; }
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-600  { color: #f87171 !important; }
[data-theme="dark"] .border-red-200 { border-color: rgba(239,68,68,0.2) !important; }

[data-theme="dark"] .bg-amber-100,
[data-theme="dark"] .bg-yellow-100 { background-color: rgba(245,158,11,0.12) !important; }
[data-theme="dark"] .bg-amber-50,
[data-theme="dark"] .bg-yellow-50  { background-color: rgba(245,158,11,0.08) !important; }
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-yellow-800 { color: #fbbf24 !important; }
[data-theme="dark"] .border-amber-200 { border-color: rgba(245,158,11,0.2) !important; }

[data-theme="dark"] .bg-blue-100   { background-color: rgba(59,130,246,0.12) !important; }
[data-theme="dark"] .bg-blue-50    { background-color: rgba(59,130,246,0.08) !important; }
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-600 { color: #60a5fa !important; }
[data-theme="dark"] .border-blue-200 { border-color: rgba(59,130,246,0.2) !important; }

[data-theme="dark"] .bg-purple-100 { background-color: rgba(139,92,246,0.12) !important; }
[data-theme="dark"] .text-purple-800,
[data-theme="dark"] .text-purple-600 { color: #a78bfa !important; }

[data-theme="dark"] .bg-orange-100 { background-color: rgba(249,115,22,0.12) !important; }
[data-theme="dark"] .text-orange-800,
[data-theme="dark"] .text-orange-600 { color: #fb923c !important; }

/* ══════════════════════════════════════════════════════
   TOAST MELDINGEN
══════════════════════════════════════════════════════ */
[data-theme="dark"] .toast {
    background-color: var(--surface-raised) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════
   DROPDOWN / MODAL
══════════════════════════════════════════════════════ */
[data-theme="dark"] [x-show] > .absolute.bg-white,
[data-theme="dark"] .absolute.bg-white.rounded-xl,
[data-theme="dark"] .absolute.bg-white.rounded-lg,
[data-theme="dark"] .absolute.bg-white.border {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] [x-show] .hover\:bg-gray-50:hover {
    background-color: var(--surface-raised) !important;
}

/* ══════════════════════════════════════════════════════
   MODAL OVERLAY
══════════════════════════════════════════════════════ */
[data-theme="dark"] .fixed.inset-0.bg-black\/50,
[data-theme="dark"] .fixed.inset-0.bg-gray-900\/50 {
    background-color: rgba(0,0,0,0.75) !important;
}

/* ══════════════════════════════════════════════════════
   ZOEKBALK HEADER
══════════════════════════════════════════════════════ */
[data-theme="dark"] .bg-gray-50.focus\:bg-white:focus {
    background-color: var(--input-bg) !important;
}

/* ══════════════════════════════════════════════════════
   LOGO ZONE SIDEBAR
══════════════════════════════════════════════════════ */
.sidebar-logo-zone {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.875rem;
    border-bottom: 1px solid var(--sidebar-border);
    min-height: 4rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background-color: var(--sidebar-bg);
    transition: none !important;
}

/* Wanneer een header-afbeelding aanwezig is */
.sidebar-logo-zone.has-header-image {
    min-height: 7.5rem;
    align-items: flex-end;
    padding-bottom: 0.875rem;
}
.sidebar-header-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    /* Subtiele uitfading onderaan zodat logo goed leesbaar is */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.95) 50%, rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.95) 50%, rgba(0,0,0,1) 100%);
}
/* Donkere laag over de afbeelding zodat tekst leesbaar blijft */
.sidebar-logo-zone.has-header-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.15) 40%,
        rgba(0,0,0,0.65) 80%,
        rgba(0,0,0,0.85) 100%
    );
    z-index: 1;
}
.sidebar-logo-zone-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.sidebar-logo-img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 0.375rem;
    /* Lichte schaduw voor leesbaarheid op afbeelding */
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.sidebar-logo-text {
    line-height: 1.2;
}
.sidebar-logo-text strong {
    display: block;
    color: rgba(255,255,255,0.95);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.sidebar-logo-text small {
    color: rgba(255,255,255,0.6);
    font-size: 0.6875rem;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════════════════════
   ONLINE WIDGET
══════════════════════════════════════════════════════ */
.online-widget {
    padding: 0.375rem 0.75rem 0.5rem;
    border-top: 1px solid var(--sidebar-border);
}
.online-widget-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: var(--sidebar-text);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: left;
}
.online-widget-btn:hover,
.online-widget-btn--open {
    background: var(--sidebar-hover);
    color: rgba(255,255,255,0.8);
}
.online-widget-indicator {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}
.online-widget-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: var(--sidebar-text);
}
.online-widget-tag {
    font-size: 0.6875rem;
    color: var(--sidebar-section);
    flex-shrink: 0;
}
.online-widget-empty {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--sidebar-section);
}

/* ══════════════════════════════════════════════════════
   FOOTER SIDEBAR (gebruikerszone)
══════════════════════════════════════════════════════ */
.sidebar-user-zone {
    border-top: 1px solid var(--sidebar-border);
    padding: 0.875rem 1rem;
}
.sidebar-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent-light);
    border: 1.5px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   ANIMATIE SPINNER
══════════════════════════════════════════════════════ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

/* ══════════════════════════════════════════════════════
   SCROLLEN VERBERGEN IN SIDEBAR
══════════════════════════════════════════════════════ */
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--sidebar-section);
    border-radius: 2px;
}

/* ══════════════════════════════════════════════════════
   FOCUS RING OVERAL GEEL
══════════════════════════════════════════════════════ */
*:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════
   RESPONSIEF
══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .sidebar-logo-text { display: none; }
}