/* Overgenomen uit het Quicke-thema (quicke-theme.css, tokens + liquid glass), ongewijzigd.
   Eigen kopie: het Q Tax-portaal deelt niets met de Quicke-server. */
/* ==========================================================================
   Quicke-thema — gedeelde kleuren voor alle apps (licht + donker)
   data-theme="light|dark" op <html> wordt gezet door qkThemeHead() (auth/theme.php).
   Apps gebruiken deze tokens; hun eigen :root-variabelen verwijzen hiernaar.
     --qk-*-rgb   → voor doorschijnende varianten: rgba(var(--qk-ov-rgb), .08)
     --qk-ov-rgb  → "laag" over de achtergrond (wit in donker, leisteen in licht)
   ========================================================================== */

:root {
  color-scheme: dark;
  --qk-bg:          #0f1424;
  --qk-bg-rgb:      15, 20, 36;
  --qk-surface:     #151b2e;
  --qk-surface-rgb: 21, 27, 46;
  --qk-surface-2:   #1a2135;
  --qk-surface-3:   #222a40;
  --qk-ov-rgb:      255, 255, 255;
  --qk-card-rgb:    255, 255, 255;  --qk-card-k: 1;   /* glazen kaarten: wit-doorschijnend */
  --qk-text:        #eef2fb;
  --qk-text-rgb:    238, 242, 251;
  --qk-text-2:      #c5cde0;
  --qk-muted:       #8e9ab4;
  --qk-muted-rgb:   142, 154, 180;

  --qk-accent:      #60a5fa;  --qk-accent-rgb:  96, 165, 250;
  --qk-accent2:     #a78bfa;  --qk-accent2-rgb: 167, 139, 250;
  --qk-accent-ink:  #93c5fd;  /* accentkleur voor tekst op een accent-tint */
  --qk-on-accent:   #ffffff;
  --qk-danger:      #f87171;  --qk-danger-rgb:  248, 113, 113;
  --qk-success:     #34d399;  --qk-success-rgb: 52, 211, 153;
  --qk-warning:     #fbbf24;  --qk-warning-rgb: 251, 191, 36;
  --qk-orange:      #fb923c;  --qk-orange-rgb:  251, 146, 60;

  --qk-shadow-rgb:  0, 0, 0;     --qk-shadow-k: 1;    /* schaduwen */
  --qk-shade-rgb:   0, 0, 0;     --qk-shade-k:  1;    /* donkere vlakken/overlays */
  --qk-sink-rgb:    0, 0, 0;     --qk-sink-k:   1;    /* verzonken vlakken (zijbalk, invoer) */
  --qk-veil-rgb:    10, 14, 28;                       /* sluier over een achtergrondfoto */
  --qk-glow:        .1;                               /* sterkte van de kleurgloed in de achtergrond */
}

:root[data-theme="light"] {
  color-scheme: light;
  --qk-bg:          #f2f4f9;
  --qk-bg-rgb:      242, 244, 249;
  --qk-surface:     #ffffff;
  --qk-surface-rgb: 255, 255, 255;
  --qk-surface-2:   #f8fafd;
  --qk-surface-3:   #eef1f7;
  --qk-ov-rgb:      30, 41, 72;
  --qk-card-rgb:    255, 255, 255;  --qk-card-k: 8;   /* kaarten worden (bijna) wit */
  --qk-text:        #131a2e;
  --qk-text-rgb:    19, 26, 46;
  --qk-text-2:      #3b4660;
  --qk-muted:       #66718a;
  --qk-muted-rgb:   102, 113, 138;

  --qk-accent:      #2563eb;  --qk-accent-rgb:  37, 99, 235;
  --qk-accent2:     #7c3aed;  --qk-accent2-rgb: 124, 58, 237;
  --qk-accent-ink:  #1d4ed8;
  --qk-on-accent:   #ffffff;
  --qk-danger:      #dc2626;  --qk-danger-rgb:  220, 38, 38;
  --qk-success:     #059669;  --qk-success-rgb: 5, 150, 105;
  --qk-warning:     #b45309;  --qk-warning-rgb: 217, 119, 6;
  --qk-orange:      #ea580c;  --qk-orange-rgb:  234, 88, 12;

  /* pastel tekst op getinte labels (in donker geldt de oorspronkelijke kleur als fallback) */
  --qk-ink-blue: #1d4ed8; --qk-ink-green: #047857; --qk-ink-red: #b91c1c;
  --qk-ink-amber: #92400e; --qk-ink-orange: #c2410c; --qk-ink-violet: #6d28d9;

  --qk-shadow-rgb:  30, 41, 72;  --qk-shadow-k: .32;
  --qk-shade-rgb:   30, 41, 72;  --qk-shade-k:  .4;
  --qk-sink-rgb:    255, 255, 255; --qk-sink-k: 2.6;
  --qk-veil-rgb:    242, 244, 249;
  --qk-glow:        .16;
}

/* ── Liquid glass ──────────────────────────────────────────────────────────
   Panelen, kaarten, menu's en balken zijn doorschijnend glas: sterke vervaging met
   extra verzadiging, een glansrand (licht van boven-links), een binnengloed, een
   lichtreflectie die de muis volgt (--qk-mx/--qk-my, gezet door quicke-theme.js)
   en een zachte schaduw. De kleurrijke achtergrond (--qk-backdrop) schemert erdoor.
   Niveaus via data-glass: subtle | on (normaal) | strong | off (effen). */
:root {
  --qk-backdrop:
    radial-gradient(58% 55% at 6% 8%,   rgba(59, 130, 246, .38) 0%, transparent 70%),
    radial-gradient(50% 50% at 94% 6%,  rgba(139, 92, 246, .34) 0%, transparent 70%),
    radial-gradient(55% 55% at 88% 96%, rgba(236, 72, 153, .20) 0%, transparent 70%),
    radial-gradient(55% 50% at 8% 94%,  rgba(20, 184, 166, .22) 0%, transparent 70%),
    linear-gradient(160deg, #0c1222 0%, #121433 55%, #0b1925 100%);
  --qk-glass-a:      .46;                                   /* dekking van glazen panelen */
  --qk-glass-blur:   blur(24px) saturate(210%) brightness(1.06);
  --qk-glass-rim:    rgba(255, 255, 255, .16);
  --qk-glass-sheen:  linear-gradient(140deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.035) 30%, rgba(255,255,255,0) 52%, rgba(255,255,255,0) 78%, rgba(255,255,255,.05) 100%);
  --qk-glass-hl:     inset 0 1px 0 0 rgba(255,255,255,.24), inset 1px 0 0 0 rgba(255,255,255,.08),
                     inset 0 -1px 0 0 rgba(255,255,255,.05), inset 0 0 22px -8px rgba(255,255,255,.14);
  --qk-glass-shadow: var(--qk-glass-hl), 0 18px 40px -14px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .2);
  --qk-glare-a:      .11;                                   /* lichtreflectie onder de muis */
  --qk-glare-r:      280px;
  --qk-btn-hl:       inset 0 1px 0 0 rgba(255,255,255,.32), inset 0 -1px 0 0 rgba(0,0,0,.12), 0 6px 18px -6px rgba(var(--qk-accent-rgb), .55);
  --qk-ctl-hl:       inset 0 1px 0 0 rgba(255,255,255,.14), inset 0 -1px 0 0 rgba(0,0,0,.12);
  --qk-ctl-sheen:    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 60%);
  --qk-field-hl:     inset 0 1px 3px 0 rgba(0,0,0,.28), inset 0 -1px 0 0 rgba(255,255,255,.05);
  --qk-overlay-blur: blur(10px) saturate(140%);
  --qk-float-a:      .86;                                   /* menu's, meldingen, dialogen */
  --qk-scrim:        rgba(4, 7, 16, .52);                   /* verduistering achter vensters */
  --qk-side-a:       .5;                                    /* zijbalken */
  --qk-panel-a:      .6;                                    /* grote inhoudspanelen (kalender, verkenner…) */
  --qk-text-min:     .58;                                   /* minimale dekking van grijze tekst */
}
:root[data-theme="light"] {
  --qk-backdrop:
    radial-gradient(58% 55% at 6% 8%,   rgba(96, 165, 250, .55) 0%, transparent 70%),
    radial-gradient(50% 50% at 94% 6%,  rgba(167, 139, 250, .5) 0%, transparent 70%),
    radial-gradient(55% 55% at 88% 96%, rgba(244, 114, 182, .36) 0%, transparent 70%),
    radial-gradient(55% 50% at 8% 94%,  rgba(45, 212, 191, .38) 0%, transparent 70%),
    linear-gradient(160deg, #e9effb 0%, #efeafa 55%, #e8f3f5 100%);
  --qk-glass-a:      .42;
  --qk-glass-blur:   blur(22px) saturate(190%) brightness(1.05);
  --qk-glass-rim:    rgba(255, 255, 255, .85);
  --qk-glass-sheen:  linear-gradient(140deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.16) 30%, rgba(255,255,255,0) 54%, rgba(255,255,255,0) 76%, rgba(255,255,255,.26) 100%);
  --qk-glass-hl:     inset 0 1px 0 0 rgba(255,255,255,1), inset 1px 0 0 0 rgba(255,255,255,.55),
                     inset 0 -1px 0 0 rgba(255,255,255,.35), inset 0 0 24px -6px rgba(255,255,255,.65);
  --qk-glass-shadow: var(--qk-glass-hl), 0 16px 36px -14px rgba(30, 41, 72, .3), 0 2px 6px rgba(30, 41, 72, .07);
  --qk-glare-a:      .6;
  --qk-btn-hl:       inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(0,0,0,.1), 0 6px 16px -6px rgba(var(--qk-accent-rgb), .5);
  --qk-ctl-hl:       inset 0 1px 0 0 rgba(255,255,255,.95), 0 1px 2px 0 rgba(30,41,72,.08);
  --qk-ctl-sheen:    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12) 70%);
  --qk-field-hl:     inset 0 1px 2px 0 rgba(30,41,72,.1), inset 0 -1px 0 0 rgba(255,255,255,.7);
  --qk-card-k:       4.4;                                   /* kaarten doorschijnender */
  --qk-float-a:      .88;
  --qk-panel-a:      .58;
  --qk-scrim:        rgba(30, 41, 72, .26);
  --qk-side-a:       .5;
  --qk-text-min:     .62;
}
/* Subtiel: meer dekking, minder vervaging */
:root[data-glass="subtle"] { --qk-panel-a: .8; --qk-side-a: .72; --qk-float-a: .93; --qk-glass-a: .7; --qk-glass-blur: blur(16px) saturate(160%); --qk-glare-a: .06; }
:root[data-glass="subtle"][data-theme="light"] { --qk-glass-a: .66; --qk-card-k: 6.5; --qk-glare-a: .35; }
/* Sterk: heel doorschijnend, felle glans */
:root[data-glass="strong"] {
  --qk-side-a: .34; --qk-panel-a: .42; --qk-float-a: .8; --qk-text-min: .64;
  --qk-glass-a: .26; --qk-glass-blur: blur(30px) saturate(240%) brightness(1.1); --qk-glare-a: .16;
  --qk-glass-sheen: linear-gradient(140deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 76%, rgba(255,255,255,.08) 100%);
}
:root[data-glass="strong"][data-theme="light"] {
  --qk-side-a: .34; --qk-panel-a: .42; --qk-float-a: .84; --qk-text-min: .68;
  --qk-glass-a: .24; --qk-card-k: 3; --qk-glare-a: .75;
  --qk-glass-blur: blur(26px) saturate(220%) brightness(1.07);
  --qk-glass-sheen: linear-gradient(140deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.18) 30%, rgba(255,255,255,0) 54%, rgba(255,255,255,0) 76%, rgba(255,255,255,.3) 100%);
}
/* Telefoons: lichtere vervaging (sneller) */
@media (pointer: coarse) { :root[data-glass] { --qk-glass-blur: blur(16px) saturate(180%); --qk-glare-a: 0; } }
/* Glaseffect uit: effen panelen, rustige achtergrond */
:root[data-glass="off"] {
  --qk-backdrop: radial-gradient(ellipse 80% 60% at 15% 20%, rgba(var(--qk-accent-rgb), .1) 0%, transparent 60%),
                 radial-gradient(ellipse 60% 80% at 85% 80%, rgba(var(--qk-accent2-rgb), .08) 0%, transparent 55%), var(--qk-bg);
  --qk-glass-a: 1; --qk-glass-blur: none; --qk-glass-sheen: none; --qk-glare-a: 0;
  --qk-glass-rim: rgba(var(--qk-ov-rgb), .1);
  --qk-glass-hl: 0 0 0 0 transparent;
  --qk-glass-shadow: 0 1px 2px rgba(var(--qk-shadow-rgb), calc(.12 * var(--qk-shadow-k)));
  --qk-btn-hl: 0 0 0 0 transparent; --qk-ctl-hl: 0 0 0 0 transparent; --qk-ctl-sheen: none;
  --qk-field-hl: 0 0 0 0 transparent; --qk-overlay-blur: none;
  --qk-float-a: 1; --qk-side-a: 1; --qk-panel-a: 1; --qk-text-min: .5;
}
:root[data-glass="off"][data-theme="light"] { --qk-card-k: 8; }
/* Lichtreflectie uit */
:root[data-glare="off"] { --qk-glare-a: 0 !important; }
/* Animaties verminderen */
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* Vloeiende overgang, enkel tijdens het wisselen van thema */
html.qk-theme-switching,
html.qk-theme-switching *,
html.qk-theme-switching *::before,
html.qk-theme-switching *::after {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease,
              fill .35s ease, stroke .35s ease, box-shadow .35s ease !important;
}

::selection { background: rgba(var(--qk-accent-rgb), .28); }

/* Lichte modus: native onderdelen en afbeeldingen netjes houden */
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: rgba(var(--qk-text-rgb), .42); }
:root[data-theme="light"] select option { background: #fff; color: var(--qk-text); }
:root[data-theme="dark"] select option { background: var(--qk-surface-2); color: var(--qk-text); }

/* ── Themaschakelaar (navigatiebalk, instellingen) ─────────────────────── */
.qk-switch {
  position: relative; display: inline-flex; flex-shrink: 0;
  width: 38px; height: 22px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--qk-ov-rgb), .16);
  border: 1px solid rgba(var(--qk-ov-rgb), .12);
  transition: background .2s, border-color .2s;
}
.qk-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .22s cubic-bezier(.3, .7, .4, 1.2);
}
.qk-switch.on { background: var(--qk-accent); border-color: transparent; }
.qk-switch.on::after { transform: translateX(16px); }

.qk-theme-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 14px; cursor: pointer; user-select: none;
  background: none; border: none; text-align: left; font: inherit;
  color: rgba(var(--qk-text-rgb), .75); transition: background .15s, color .15s;
}
.qk-theme-row:hover { background: rgba(var(--qk-ov-rgb), .07); color: var(--qk-text); }
.qk-theme-row .qk-theme-ico { width: 18px; text-align: center; font-size: .95rem; line-height: 1; }
.qk-theme-row .qk-theme-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.qk-theme-row .qk-theme-txt b { font-weight: 500; font-size: .875rem; white-space: nowrap; }
.qk-theme-row .qk-theme-txt small { font-size: .7rem; color: rgba(var(--qk-text-rgb), .45); margin-top: 2px; }
.qk-theme-auto {
  display: none; margin: -4px 14px 6px 42px; padding: 0; border: none; background: none;
  font: inherit; font-size: .72rem; color: var(--qk-accent); cursor: pointer;
}
.qk-theme-auto:hover { text-decoration: underline; }
.qk-theme-auto.show { display: inline-block; }
/* Accountmenu's iets breder zodat de themaregel op één lijn past */
.snav-drop, .account-dropdown { min-width: 236px; }