/* ═══════════════════════════════════════════════════════
   KledingDirect Workspace — Liquid Glass shared styles
   Included on every page via glass.css
═══════════════════════════════════════════════════════ */

/* ── Soft Glass tokens ── */
:root {
  --lg-blur: blur(6px) saturate(108%);
  --lg-shadow: 0 1px 6px rgba(10,15,44,.07);
  --lg-shadow-hover: 0 2px 12px rgba(10,15,44,.09);
}

/* ── Aurora background ── */
body {
  background:
    radial-gradient(ellipse 90% 60% at 8% 10%,  rgba(139,92,246,.06)  0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 92% 6%,  rgba(38,103,255,.05)  0%, transparent 52%),
    radial-gradient(ellipse 55% 55% at 50% 0%,  rgba(135,191,255,.07) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 18% 85%, rgba(59,40,204,.04)   0%, transparent 58%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(139,92,246,.04)  0%, transparent 52%),
    radial-gradient(ellipse 100% 40% at 50% 50%,rgba(200,218,255,.08) 0%, transparent 65%),
    #eef0f7 !important;
}

/* ── Background blobs (injected by glass-init.js) ── */
.bg-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .40;
}
.bg-blob-1 {
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(38,103,255,.08), rgba(59,40,204,.04));
  top: -200px; right: -150px;
  animation: lgBlob1 18s ease-in-out infinite;
}
.bg-blob-2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(139,92,246,.07), rgba(38,103,255,.03));
  bottom: -100px; left: -100px;
  animation: lgBlob2 22s ease-in-out infinite;
}
.bg-blob-3 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(16,185,129,.06), transparent);
  top: 40%; left: 38%;
  animation: lgBlob3 14s ease-in-out infinite;
}
@keyframes lgBlob1 {
  0%,100% { border-radius:60% 40% 30% 70%/60% 30% 70% 40%; transform:translate(0,0); }
  40%      { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; transform:translate(-30px,20px); }
}
@keyframes lgBlob2 {
  0%,100% { border-radius:50% 50% 70% 30%/40% 60% 40% 60%; transform:translate(0,0); }
  50%      { border-radius:70% 30% 50% 50%/60% 40% 60% 40%; transform:translate(20px,-25px); }
}
@keyframes lgBlob3 {
  0%,100% { transform:translate(0,0) scale(1); }
  50%      { transform:translate(-20px,20px) scale(1.1); }
}

/* ── Ensure page content sits above blobs ── */
body > *:not(.bg-blobs):not(.modal-overlay):not(.kd-sidebar):not(.kd-sb-backdrop):not(.toast):not(.kd-conn-error) { position: relative; z-index: 1; }

/* ── Nav — glass override ── */
.topnav {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: rgba(238,240,252,.80) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
  border-bottom: 1px solid rgba(210,215,235,.50) !important;
  box-shadow: 0 1px 6px rgba(10,15,44,.05) !important;
}
.topnav.scrolled {
  background: rgba(238,240,252,.92) !important;
  box-shadow: 0 1px 8px rgba(10,15,44,.07) !important;
}

/* ── Nav dropdown — glass ── */
.nav-dropdown-menu {
  background: rgba(240,243,255,.88) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
  box-shadow: 0 4px 20px rgba(10,15,44,.09), 0 1px 4px rgba(10,15,44,.05) !important;
  border-radius: 14px !important;
}
.nav-dropdown-item:hover { background: rgba(255,255,255,.55) !important; }

/* ── Toast — altijd bovenop, óók boven modals (modal-overlay = 1000) ── */
.toast { position: fixed !important; z-index: 2000 !important; }

/* ── Verbindingsfout-banner (geïnjecteerd door supabase.js) ── */
.kd-conn-error {
  position: fixed;
  top: calc(var(--kd-nav-h, 57px) + 11px); left: 50%;
  transform: translateX(-50%);
  z-index: 1900;
  max-width: min(92vw, 560px);
  padding: 12px 18px;
  border-radius: 12px;
  font: 600 13px/1.45 'Gantari', sans-serif;
  color: #b91c1c;
  background: rgba(254,242,242,.95);
  border: 1px solid rgba(239,68,68,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(185,28,28,.15);
}
[data-theme="dark"] .kd-conn-error {
  color: #fca5a5;
  background: rgba(42,18,18,.95);
  border-color: rgba(248,113,113,.35);
}

/* ── Gedeelde laad-indicator ── */
.kd-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 16px;
  font: 600 13px/1 'Gantari', sans-serif;
  color: var(--muted, #6b7290);
}
.kd-spin {
  width: 18px; height: 18px;
  border: 2.5px solid var(--line, #e5eaf5);
  border-top-color: var(--blue, #2667FF);
  border-radius: 50%;
  animation: kdSpin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes kdSpin { to { transform: rotate(360deg); } }

/* ── Nav icon buttons — glass ── */
.kd-theme-toggle,
.kd-drive-nav-btn,
.kd-settings-btn {
  background: rgba(255,255,255,.50) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 1px 4px rgba(10,15,44,.06) !important;
  color: var(--ink-soft, #4a5170) !important;
  transition: all .2s !important;
}
.kd-theme-toggle:hover,
.kd-drive-nav-btn:hover,
.kd-settings-btn:hover {
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 2px 8px rgba(38,103,255,.10) !important;
  color: var(--blue, #2667FF) !important;
}

/* ═══ Sidebar (geïnjecteerd door nav.js) ═══ */
:root { --kd-sb-w: 228px; }

.kd-sb-toggle {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--blue, #2667FF), var(--blue-deep, #3B28CC));
  border: none; border-radius: 9px;
  display: grid; place-items: center;
  color: white; cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(38,103,255,.35);
  transition: all .2s;
}
.kd-sb-toggle:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(38,103,255,.45); }

.kd-sidebar {
  position: fixed;
  top: var(--kd-nav-h, 57px); left: 0; bottom: 0;
  width: var(--kd-sb-w);
  box-sizing: border-box;
  z-index: 300;
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  overflow-y: auto;
  background: rgba(244,246,255,.88);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-right: 1px solid rgba(210,215,235,.55);
  box-shadow: 0 1px 6px rgba(10,15,44,.05);
  transform: translateX(-100%);
  transition: transform .25s ease;
}
html.kd-sb-open .kd-sidebar { transform: translateX(0); }

.kd-sb-label {
  font: 700 10px/1 'Gantari', sans-serif;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted, #6b7290);
  padding: 16px 12px 6px;
}
.kd-sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font: 600 13px/1 'Gantari', sans-serif;
  color: var(--ink-soft, #4a5170);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.kd-sb-link svg { flex-shrink: 0; }
.kd-sb-link:hover { background: rgba(255,255,255,.70); color: var(--ink, #0A0F2C); }
.kd-sb-link.active {
  background: var(--blue, #2667FF);
  color: white;
  box-shadow: 0 2px 8px rgba(38,103,255,.30);
}

.kd-sb-backdrop {
  position: fixed;
  top: var(--kd-nav-h, 57px); left: 0; right: 0; bottom: 0;
  z-index: 290;
  background: rgba(10,15,44,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}

/* Desktop: content schuift mee met de sidebar; topbar blijft volle breedte */
@media (min-width: 901px) {
  body { transition: padding-left .25s ease; }
  html.kd-sb-open body { padding-left: var(--kd-sb-w); }
  .topnav { transition: margin-left .25s ease !important; }
  html.kd-sb-open .topnav { margin-left: calc(-1 * var(--kd-sb-w)) !important; }
}

/* Mobiel/tablet: sidebar als overlay met backdrop */
@media (max-width: 900px) {
  html.kd-sb-open .kd-sb-backdrop { opacity: 1; pointer-events: auto; }
}

/* Printen: navigatie volledig weg en geen content-verschuiving */
@media print {
  .kd-sidebar, .kd-sb-backdrop, .kd-sb-toggle, .topnav, .toast, .kd-conn-error { display: none !important; }
  html.kd-sb-open body { padding-left: 0 !important; }
}

/* Dark mode */
[data-theme="dark"] .kd-sidebar {
  background: rgba(14,19,32,.92);
  border-right-color: var(--line, #252c46);
}
[data-theme="dark"] .kd-sb-link { color: var(--muted, #7b84ad); }
[data-theme="dark"] .kd-sb-link:hover { background: var(--line-soft, #1b2238); color: var(--ink, #dce2f7); }
[data-theme="dark"] .kd-sb-link.active { background: var(--blue, #5b8fff); color: white; }
[data-theme="dark"] .kd-sb-toggle { box-shadow: 0 2px 8px rgba(91,143,255,.25); }

/* Canonieke topbar-layout (markup komt uit nav.js) */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topnav-brand { display: flex; align-items: center; gap: 10px; }
.kd-logo-link { display: flex; align-items: center; text-decoration: none; }
.kd-logo-full { height: 28px; width: auto; }
.kd-logo-full .kd-blue   { fill: var(--blue, #2667FF); }
.kd-logo-full .kd-purple { fill: var(--blue-deep, #3B28CC); }
.topnav-tools { display: flex; gap: 6px; align-items: center; }

/* ── Glass card mixin ── */
.toolbar,
.table-wrap,
.orders-wrap,
.list-wrap,
.modal-content,
.modal-box,
.doel-card,
.sum-card,
.section-card,
.instellingen-card,
.card,
.stat-card,
.activity-card,
.detail-panel,
.detail-card,
.sheet-card,
.designer-panel,
.huisstijl-card,
.account-card,
.lev-card {
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(210,215,235,.55) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  box-shadow: var(--lg-shadow) !important;
}

/* subtle hover for interactive cards */
.doel-card:hover,
.card:hover,
.stat-card:hover,
.lev-card:hover {
  box-shadow: var(--lg-shadow-hover) !important;
  background: rgba(255,255,255,.88) !important;
  transition: box-shadow .2s ease, background .2s ease;
}

/* Keep table row hover on transparent bg */
.order-row:hover,
.recent-row:hover,
.table-row:hover,
tr:hover td { background: rgba(255,255,255,.35) !important; }

/* ═══ Dark mode — overrides voor de !important glass-regels hierboven ═══ */
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 90% 60% at 8% 10%,  rgba(139,92,246,.08) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 92% 6%,  rgba(38,103,255,.07) 0%, transparent 52%),
    radial-gradient(ellipse 80% 60% at 18% 85%, rgba(59,40,204,.06)  0%, transparent 58%),
    #0e1320 !important;
}
[data-theme="dark"] .bg-blob { opacity: .18; }

[data-theme="dark"] .topnav {
  background: rgba(14,19,32,.85) !important;
  border-bottom: 1px solid rgba(37,44,70,.80) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.30) !important;
}
[data-theme="dark"] .topnav.scrolled { background: rgba(14,19,32,.94) !important; }

[data-theme="dark"] .kd-theme-toggle,
[data-theme="dark"] .kd-drive-nav-btn,
[data-theme="dark"] .kd-settings-btn {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--muted, #7b84ad) !important;
}
[data-theme="dark"] .kd-theme-toggle:hover,
[data-theme="dark"] .kd-drive-nav-btn:hover,
[data-theme="dark"] .kd-settings-btn:hover {
  background: rgba(255,255,255,.12) !important;
  color: var(--blue, #5b8fff) !important;
}

[data-theme="dark"] .toolbar,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .orders-wrap,
[data-theme="dark"] .list-wrap,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .doel-card,
[data-theme="dark"] .sum-card,
[data-theme="dark"] .section-card,
[data-theme="dark"] .instellingen-card,
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .activity-card,
[data-theme="dark"] .detail-panel,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .sheet-card,
[data-theme="dark"] .designer-panel,
[data-theme="dark"] .huisstijl-card,
[data-theme="dark"] .account-card,
[data-theme="dark"] .lev-card {
  background: rgba(22,29,48,.88) !important;
  border-color: rgba(37,44,70,.80) !important;
}
[data-theme="dark"] .doel-card:hover,
[data-theme="dark"] .card:hover,
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .lev-card:hover { background: rgba(28,36,58,.92) !important; }

[data-theme="dark"] .order-row:hover,
[data-theme="dark"] .recent-row:hover,
[data-theme="dark"] .table-row:hover,
[data-theme="dark"] tr:hover td { background: rgba(255,255,255,.04) !important; }

[data-theme="dark"] .nav-dropdown-menu {
  background: rgba(22,29,48,.95) !important;
  border-color: rgba(37,44,70,.80) !important;
}
[data-theme="dark"] .nav-dropdown-item:hover { background: rgba(255,255,255,.06) !important; }

/* Keep modal overlay dark and correctly positioned */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,15,44,.35) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.modal-overlay.show,
.modal-overlay.open { display: flex !important; }