/* SalesSync Premium V4 — material depth, reflection, glare and motion
   ------------------------------------------------------------------
   Additive visual layer on top of Nachtblauw. No layout or business logic.
   The existing tokens remain the source of truth; this file only composes them.
*/

:root {
    --ss-v4-reflect: linear-gradient(152deg,
        rgba(255,255,255,.12) 0%,
        rgba(255,255,255,.035) 28%,
        transparent 54%,
        rgba(127,184,220,.035) 78%,
        rgba(255,255,255,.055) 100%);
    --ss-v4-edge: linear-gradient(90deg,
        rgba(216,189,121,.28),
        rgba(255,255,255,.10) 28%,
        rgba(127,184,220,.18) 72%,
        rgba(255,255,255,.06));
    --ss-v4-contact: 0 16px 32px -22px rgba(0,0,0,.82);
    --ss-v4-float: 0 22px 48px -28px rgba(0,0,0,.88);
    --ss-v4-gold-soft: rgba(216,189,121,.18);
    --ss-v4-blue-soft: rgba(127,184,220,.14);
    --ss-v4-steel: #7fb8dc;
}

/* Application shell: the page remains Nachtblauw, but the chrome now reads
   as two elevated glass plates instead of flat dark rectangles. */
html.glas-aan .sidebar {
    background:
        linear-gradient(180deg, rgba(10,18,31,.94), rgba(7,13,23,.90)),
        var(--ss-v4-reflect);
    box-shadow:
        18px 0 44px -34px rgba(0,0,0,.88),
        inset -1px 0 0 rgba(255,255,255,.06),
        inset 0 1px 0 rgba(255,255,255,.08);
}

html.glas-aan .topbar {
    background:
        linear-gradient(180deg, rgba(21,36,54,.72), rgba(10,18,31,.84)),
        var(--ss-v4-reflect);
    box-shadow:
        0 16px 32px -30px rgba(0,0,0,.90),
        inset 0 1px 0 rgba(255,255,255,.11),
        inset 0 -1px 0 rgba(255,255,255,.05);
}

/* Premium material card. The JS layer adds .ss-premium-glare only to existing
   card families; no DOM restructuring is required. */
html.glas-aan .ss-premium-glare {
    position: relative;
    isolation: isolate;
    --ss-mx: 50%;
    --ss-my: 0%;
    transform-style: preserve-3d;
    background:
        linear-gradient(145deg, rgba(27,46,67,.64), rgba(13,23,37,.88)),
        var(--glas-1);
    box-shadow:
        var(--ss-v4-contact),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(0,0,0,.28),
        inset 1px 0 0 rgba(255,255,255,.025),
        inset -1px 0 0 rgba(127,184,220,.035),
        0 0 0 1px rgba(255,255,255,.075);
    transition:
        transform var(--ss-dur-2, .2s) var(--ss-ease, cubic-bezier(.22,1,.36,1)),
        box-shadow var(--ss-dur-2, .2s) var(--ss-ease, cubic-bezier(.22,1,.36,1)),
        background var(--ss-dur-3, .25s) ease,
        border-color var(--ss-dur-1, .15s) ease;
}

/* Mirror highlight. At rest it is a faint, static top light on every material
   card. WQ-180: only small clickable tiles (.ss-glans, see premium-v4.js) let it
   follow the pointer; on large blocks it stays put. It never leaves the card:
   inset 1px with the card's own radius. */
html.glas-aan .ss-premium-glare::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(360px circle at var(--ss-mx) var(--ss-my),
            rgba(255,255,255,.115),
            rgba(127,184,220,.045) 28%,
            transparent 62%),
        linear-gradient(154deg,
            rgba(255,255,255,.075) 0%,
            rgba(255,255,255,.018) 36%,
            transparent 56%);
    opacity: .58;
    mix-blend-mode: screen;
    transition: opacity var(--ss-dur-2, .2s) ease;
}

/* De veeg: een lichtstreep van links naar rechts bij het aanwijzen.
   WQ-180 (Nico 05-10-2026): "Op kleine tegeltjes, leuk. Maar dit is echt lelijk
   en druk. Het loopt ook buiten de blokken."
   - Alleen nog op .ss-glans (kleine aanklikbare cijfertegels), niet meer op elke
     kaart, grafiek of tabel.
   - Altijd binnen de rand: de laag IS de tegel (inset 0, dezelfde afronding) en
     alleen het verloop schuift erin. Vroeger stak de laag 22% boven en onder de
     kaart uit en schoof hij tot 620% naar rechts, zonder dat de kaart afknipte.
   - Rustiger: half zo fel en trager. */
html.glas-aan .ss-glans::after,
html.glas-aan .ss-glans:hover::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transform: none;
    filter: none;
    transition: none;
    background: linear-gradient(105deg,
        transparent 40%,
        rgba(255,255,255,.11) 50%,
        rgba(216,189,121,.05) 55%,
        transparent 62%) no-repeat;
    background-size: 250% 100%;
    background-position: 100% 0;
}

html.beweging-aan.glas-aan .ss-glans:hover::after {
    animation: ss-v4-sheen .9s ease-out 1;
}

/* background-size 250%: op 100% ligt de streep links naast de tegel, op 0%
   rechts ernaast. Ertussen gaat hij erdoor; erbuiten wordt niets getekend. */
@keyframes ss-v4-sheen {
    0%   { opacity: 0; background-position: 100% 0; }
    25%  { opacity: 1; }
    100% { opacity: 0; background-position: 0% 0; }
}

/* Alleen een kleine aanklikbare tegel komt bij het aanwijzen een tikje omhoog,
   met een dunne gouden rand en zonder lichtwolk rondom. Grote blokken
   (.ss-premium-glare zonder .ss-glans) staan stil: zie WQ-180 onderaan. */
html.glas-aan .ss-glans:hover {
    transform: translateY(-1px);
    background:
        linear-gradient(145deg, rgba(29,49,71,.68), rgba(13,24,39,.90)),
        var(--glas-2);
    box-shadow:
        var(--ss-v4-contact),
        inset 0 1px 0 rgba(255,255,255,.17),
        inset 0 -1px 0 rgba(0,0,0,.28),
        0 0 0 1px rgba(216,189,121,.16);
}

/* Selected/active cards earn a stronger gold edge without filling the card. */
html.glas-aan .ss-premium-glare.is-active,
html.glas-aan .ss-premium-glare[aria-current="true"] {
    box-shadow:
        var(--ss-v4-float),
        inset 0 1px 0 rgba(255,255,255,.20),
        0 0 0 1px rgba(216,189,121,.32),
        0 0 26px -18px rgba(216,189,121,.44);
}

/* A thin spectral edge gives the plate a physical top/side boundary. */
html.glas-aan .ss-premium-glare > .ss-v4-edge {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 1px 0 0 rgba(216,189,121,.045),
        inset -1px 0 0 rgba(127,184,220,.045);
}

/* Progress/goal bars become recessed instruments with a lit material fill. */
html.glas-aan .dash-progress {
    border: 1px solid rgba(255,255,255,.055);
    background:
        linear-gradient(180deg, rgba(2,7,13,.56), rgba(8,14,24,.74));
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,.58),
        inset 0 -1px 0 rgba(255,255,255,.055),
        0 1px 0 rgba(255,255,255,.025);
}

html.glas-aan .dash-progress-fill {
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%),
        linear-gradient(90deg, #4d779f, var(--ss-v4-steel));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -1px 0 rgba(0,0,0,.20),
        0 0 14px -5px rgba(127,184,220,.55);
}

html.glas-aan .dash-progress-fill::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 14px;
    border-radius: inherit;
    background: radial-gradient(circle at 72% 50%,
        rgba(255,255,255,.72), rgba(127,184,220,.28) 32%, transparent 70%);
    opacity: .58;
}

html.glas-aan .dash-progress-fill.is-primair {
    background:
        linear-gradient(180deg, rgba(255,255,255,.22), transparent 42%),
        linear-gradient(90deg, var(--merk-diep), var(--merk));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.40),
        inset 0 -1px 0 rgba(0,0,0,.20),
        0 0 16px -5px rgba(216,189,121,.62);
}

html.glas-aan .dash-progress-fill.is-primair::after {
    background: radial-gradient(circle at 72% 50%,
        rgba(255,255,255,.78), rgba(216,189,121,.34) 32%, transparent 72%);
}

/* Charts get a dark recessed well so the 2.5D drawing from Chart.js has a
   visual surface to sit on. No perspective is applied to the data itself. */
html.glas-aan .dash-card canvas,
html.glas-aan .rtl-blok canvas,
html.glas-aan .adm-card canvas {
    filter: drop-shadow(0 9px 11px rgba(0,0,0,.20));
}

html.glas-aan .dash-card:has(canvas),
html.glas-aan .rtl-blok:has(canvas) {
    background:
        radial-gradient(85% 55% at 50% 100%, rgba(127,184,220,.045), transparent 70%),
        linear-gradient(145deg, rgba(26,45,66,.64), rgba(13,23,37,.90));
}

/* Retail cards are the first operational analytics pilot. Keep the status
   left edge, but give the inner data region more depth without changing grid. */
html.glas-aan .rtl-blok {
    border-top-color: rgba(255,255,255,.08);
    border-right-color: rgba(255,255,255,.06);
    border-bottom-color: rgba(0,0,0,.34);
}

html.glas-aan .rtl-statchip {
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 30%),
        linear-gradient(180deg, rgba(4,9,16,.66), rgba(10,17,30,.46));
    box-shadow:
        inset 0 3px 9px rgba(0,0,0,.54),
        inset 0 -1px 0 rgba(255,255,255,.055),
        0 1px 0 rgba(255,255,255,.025);
}

/* Buttons and navigation use the same reflection language, but with less
   intensity than data cards. */
html.glas-aan .btn:hover,
html.glas-aan .sidebar nav a:hover,
html.glas-aan .sidebar nav a.active {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 10px 22px -18px rgba(0,0,0,.82),
        0 0 0 1px rgba(216,189,121,.12);
}

/* Reduced motion: preserve final material state, remove decorative travel. */
html.beweging-uit .ss-premium-glare::after,
html:not(.beweging-aan) .ss-premium-glare::after {
    animation: none !important;
    opacity: 0 !important;
}
html.beweging-uit .ss-glans:hover,
html:not(.beweging-aan) .ss-glans:hover {
    transform: none;
}

@media (max-width: 900px) {
    /* Mobile/tablet: less bloom, same material language. */
    html.glas-aan .ss-premium-glare,
    html.glas-aan .ss-glans:hover {
        box-shadow:
            0 10px 24px -20px rgba(0,0,0,.82),
            inset 0 1px 0 rgba(255,255,255,.12),
            inset 0 -1px 0 rgba(0,0,0,.24),
            0 0 0 1px rgba(255,255,255,.065);
    }
    html.glas-aan .ss-premium-glare::before { opacity: .38; }
}

/* WQ-180 - GROTE BLOKKEN STAAN STIL (Nico 05-10-2026)
   "Als je hoover effecten maakt, gebruik dan dat subtiel hier en daar maar
   zeker niet overal." Gemeten op elk tabblad (admin, verkoper, administratie):
   naast de veeg en de muisgloed wipte ook elke kaart omhoog bij het aanwijzen,
   ook de grote blokken, grafieken en tabellen die je niet kunt openen. Dat
   brak de huisregel uit style.css ("Alleen wat je kunt aanklikken komt
   omhoog") en maakte het scherm druk.
   Een kaart die je niet kunt aanklikken, beweegt dus niet meer en krijgt geen
   gouden gloed (die laatste kwam uit .glas:hover in glas.css, daar ook weg;
   de lift van .adm-card is in style.css weg). Aanklikbare kaarten houden hun
   rustige lift uit style.css; kleine aanklikbare tegels krijgen daarbovenop
   de zachte glans (.ss-glans). */
.dash-card:not([onclick]):not(.dash-klikbaar):hover,
.dash-card-hero:not([onclick]):not(.dash-klikbaar):hover {
    transform: none;
}
/* De goudkleurige draaigloed die in het donkere thema over een dashboardkaart
   kwam bij het aanwijzen (style.css, .dash-grid-container .dash-card::before):
   een muisgloed over een blok van een scherm breed, ook over een aanklikbare
   rij. Die rij houdt zijn rustige rand- en kleurwissel. */
[data-theme="dark"] .dash-grid-container .dash-card:hover::before {
    opacity: 0;
}