/*
 * SEDERO Helpdesk: alle eigen opmaak op één plek (voorheen <style>-blokken in de Blade-views).
 * Geregistreerd in App\Providers\SederoServiceProvider via FilamentAsset; na een wijziging (en bij elke deploy):
 *   php artisan filament:assets
 * Volgorde: eerst het thema (kleuren, zijbalk, algemene onderdelen), daarna per scherm, op voorvoegsel.
 */

/* ===== filament/theme.blade.php ===== */
:root {
    /* Huisstijl sedero.nl: oranje #E84B0F, petrol #05333B, tekst #1E293B */
    --sd-orange: #e84b0f;
    --sd-petrol: #05333b;
    --sd-sidebar: #05333b;            /* zijbalk: petrol, zoals de footer van sedero.nl */
    --sd-sidebar-2: #032a30;          /* onderkant van het verloop */
    --sd-sidebar-text: #d5e3e5;
    --sd-sidebar-muted: #84a7ac;
    --sd-sidebar-active: rgb(255 255 255 / .10);
    --sd-accent: var(--sd-orange);    /* streepje bij het actieve menu-item */
    --sd-bg: #f3f6f6;                 /* achtergrond van de pagina's: licht, met een vleugje petrol */
    --sd-header-line: var(--sd-orange);
    --sd-stat-1: var(--sd-orange);    /* kleuren van de kerncijfers op het dashboard */
    --sd-stat-2: var(--sd-petrol);
    --sd-stat-3: #0f766e;
    --sd-stat-4: #475569;
    --sd-content-width: 120rem;       /* maximale breedte van de inhoud; 'none' = altijd volledig */
}

/*
 * Knoppen en links in het oranje van het logo (#E84B0F); petrol blijft voor de zijbalk,
 * koppen en tabellen. Overschrijft de primaire kleur van het panel.
 */
:root {
    --primary-50: #fff4ed;
    --primary-100: #ffe5d4;
    --primary-200: #fec7a8;
    --primary-300: #fd9f71;
    --primary-400: #f8763d;
    --primary-500: #f25c1e;
    --primary-600: #e84b0f;
    --primary-700: #c13a0a;
    --primary-800: #9a3010;
    --primary-900: #7c2a11;
    --primary-950: #431206;
}
.dark {
    --primary-400: #fb8a55;
    --primary-500: #f26a2e;
}

/* ---- Pagina ---------------------------------------------------------------- */
.fi-body { background: var(--sd-bg); }
.dark .fi-body { background: var(--gray-950); }

/* Breedte: de hele ruimte gebruiken (tot 1920px, daarna wordt lezen lastig) en minder lucht */
.fi-main { max-width: var(--sd-content-width) !important; }
@media (min-width: 1024px) { .fi-main { padding-inline: 1.5rem; } }
.fi-page-header-main-ctn { padding-block: 1.25rem 1.5rem; row-gap: 1.25rem; }
.fi-page-content { row-gap: 1.25rem; }
.fi-header { gap: .75rem; }
.fi-wi { gap: 1.25rem; }

/* ---- Bovenbalk: wit met een gekleurde lijn -------------------------------- */
.fi-topbar { box-shadow: 0 1px 0 rgb(5 51 59 / .06); position: relative; }
.fi-topbar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--sd-header-line);
}

/* ---- Zijbalk: petrol ------------------------------------------------- */
.fi-sidebar,
.fi-body-has-topbar .fi-sidebar {
    background: linear-gradient(180deg, var(--sd-sidebar) 0%, var(--sd-sidebar-2) 100%);
}
@media (min-width: 1024px) {
    .fi-sidebar, .dark .fi-sidebar { background: linear-gradient(180deg, var(--sd-sidebar) 0%, var(--sd-sidebar-2) 100%); }
}
.dark .fi-sidebar { background: linear-gradient(180deg, #02232a 0%, #05333b 100%); }
.fi-sidebar-header { background: transparent !important; box-shadow: none !important; }
.fi-sidebar-nav { padding-top: 1rem; }

.fi-sidebar-group-label {
    color: var(--sd-sidebar-muted);
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.fi-sidebar-group-btn .fi-icon { color: var(--sd-sidebar-muted); }

.fi-sidebar-item-label { color: var(--sd-sidebar-text); }
.fi-sidebar-item-btn > .fi-icon { color: var(--sd-sidebar-muted); }
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background: rgb(255 255 255 / .07);
}
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: #fff; }

/* Actief menu-item: lichte balk met een gekleurd streepje links */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--sd-sidebar-active);
    box-shadow: inset 3px 0 0 var(--sd-accent);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: #fff; font-weight: 600; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--sd-accent); }
.fi-sidebar-item-grouped-border-part { background: var(--sd-sidebar-muted); }
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part { background: var(--sd-accent); }

/* Tellers in het menu (bijv. "mijn open tickets") */
.fi-sidebar-item-badge-ctn .fi-badge { box-shadow: none; }

/* Knoppen onderaan de zijbalk (inklappen e.d.) */
.fi-sidebar-footer, .fi-sidebar .fi-icon-btn { color: var(--sd-sidebar-muted); }

/* ---- Compacte blokken (details en bijlagen op een ticket) ----------------- */
.sd-compact > .fi-section-header { padding: .75rem 1rem; }
.sd-compact .fi-section-content { padding: .75rem 1rem !important; }
.sd-compact .fi-sc-has-gap { gap: .45rem !important; }
.sd-compact .fi-in-entry { row-gap: .15rem; }
.sd-compact .fi-in-entry-has-inline-label { grid-template-columns: minmax(6.5rem, 38%) 1fr !important; column-gap: .75rem; align-items: center; }
.sd-compact .fi-in-entry-has-inline-label .fi-in-entry-content-col { grid-column: auto !important; }
.sd-compact .fi-in-entry-label { font-weight: 500; color: var(--gray-500); font-size: .8125rem; }
.dark .sd-compact .fi-in-entry-label { color: var(--gray-400); }
.sd-compact .fi-in-entry-content { font-size: .8125rem; }

/* ---- Paginakop ----------------------------------------------------------- */
.fi-header-heading { letter-spacing: -.01em; }

/* ---- Kaarten en tabellen ------------------------------------------------- */
.fi-section, .fi-ta-ctn {
    box-shadow: 0 1px 2px rgb(5 51 59 / .06), 0 1px 1px rgb(5 51 59 / .03);
}
.fi-section-header { border-bottom: 1px solid rgb(5 51 59 / .06); }
.dark .fi-section-header { border-bottom-color: rgb(255 255 255 / .06); }
.fi-section-header-heading { color: var(--sd-sidebar); }
.dark .fi-section-header-heading { color: #fff; }

.fi-ta-header-cell {
    background: color-mix(in oklab, var(--sd-petrol) 5%, #fff);
    color: var(--sd-sidebar);
    text-transform: uppercase; font-size: .6875rem; letter-spacing: .05em;
}
.dark .fi-ta-header-cell { background: rgb(255 255 255 / .03); color: var(--gray-300); }
.fi-ta-row:hover { background: color-mix(in oklab, var(--sd-petrol) 4%, transparent); }

/* Actief tabblad (Mijn open tickets, Alle open, …) */
.fi-tabs-item.fi-active {
    background: color-mix(in oklab, var(--primary-500) 12%, #fff);
    color: var(--primary-700);
}
.dark .fi-tabs-item.fi-active { background: color-mix(in oklab, var(--primary-500) 20%, transparent); color: var(--primary-300); }

/* ---- Dashboard: kerncijfers met elk een eigen kleur ----------------------- */
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; }
.fi-wi-stats-overview-stat::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--sd-stat-c, var(--sd-stat-1));
}
.fi-wi-stats-overview-stat::after {
    content: ''; position: absolute; right: -2.5rem; top: -2.5rem; width: 7rem; height: 7rem; border-radius: 9999px;
    background: var(--sd-stat-c, var(--sd-stat-1)); opacity: .07; pointer-events: none;
}
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value { color: var(--sd-stat-c, var(--sd-stat-1)); }
.fi-wi-stats-overview-stat:nth-child(4n + 1) { --sd-stat-c: var(--sd-stat-1); }
.fi-wi-stats-overview-stat:nth-child(4n + 2) { --sd-stat-c: var(--sd-stat-2); }
.fi-wi-stats-overview-stat:nth-child(4n + 3) { --sd-stat-c: var(--sd-stat-3); }
.fi-wi-stats-overview-stat:nth-child(4n + 4) { --sd-stat-c: var(--sd-stat-4); }
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value { filter: brightness(1.35); }

/* ---- Eigen onderdelen (board, schema tree) volgen het thema --------------- */
.kb-col { background: #e3e9f3; }
.dark .kb-col { background: rgb(255 255 255 / .04); }
.st-card, .kb-card { box-shadow: 0 1px 2px rgb(5 51 59 / .08); }

/* ---- Afdrukken (handleidingen): geen menu en kleuren ------------------------ */
@media print {
    .fi-sidebar, .fi-topbar, .fi-header .fi-ac { display: none !important; }
    .fi-body { background: #fff; }
    .fi-main-ctn { margin: 0 !important; padding: 0 !important; }
}

/* Assets: eenvoudige weergave (label → waarde in rijen, zoals Jira Assets) */
.sd-asset-details .fi-sc-has-gap { gap: 0 !important; }
.sd-asset-details .fi-in-entry-has-inline-label { grid-template-columns: minmax(9rem, 36%) 1fr !important; column-gap: 1.25rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--gray-100); }
.dark .sd-asset-details .fi-in-entry-has-inline-label { border-color: rgb(255 255 255 / .06); }
.sd-asset-details .fi-in-entry-has-inline-label:last-child { border-bottom: 0; }
.sd-asset-details .fi-in-entry-label { color: var(--gray-600); font-weight: 500; }
.sd-asset-side .fi-in-entry-has-inline-label { grid-template-columns: minmax(6.5rem, 40%) 1fr !important; column-gap: .75rem; }
.sd-asset-side .fi-sc-has-gap { gap: .65rem !important; }

/* Brede inhoud (code, logregels, lange URL's) mag een kolom niet oprekken:
   grid-items krijgen min-width 0, codeblokken scrollen binnen hun eigen vak. */
.fi-grid-col, .fi-sc > *, .fi-sc-component, .fi-section, .fi-section-content-ctn, .fi-section-content, .sd-desc, .sd-desc-view { min-width: 0; }
.fi-prose { overflow-wrap: anywhere; }
.fi-prose pre { max-width: 100%; overflow-x: auto; white-space: pre; overflow-wrap: normal; }
.fi-prose pre code { white-space: inherit; }
.fi-prose table { display: block; max-width: 100%; overflow-x: auto; }
.fi-prose img { max-width: 100%; height: auto; }

/* Tekstkleuren uit de editor (span.color met --color of data-color) ook in de weergave tonen */
.fi-prose span.color, .sd-rich span.color { color: var(--color, inherit); }
.dark .fi-prose span.color, .dark .sd-rich span.color { color: var(--dark-color, var(--color, inherit)); }
.fi-prose span.color[data-color="groen"] { --color: #15803d; --dark-color: #4ade80; }
.fi-prose span.color[data-color="oranje"] { --color: #c2410c; --dark-color: #fb923c; }
.fi-prose span.color[data-color="rood"] { --color: #b91c1c; --dark-color: #f87171; }
.fi-prose span.color[data-color="blauw"] { --color: #1d4ed8; --dark-color: #60a5fa; }
.fi-prose span.color[data-color="grijs"] { --color: #6b7280; --dark-color: #9ca3af; }
.dark .fi-prose span.color[data-color="groen"] { color: #4ade80 !important; }
.dark .fi-prose span.color[data-color="oranje"] { color: #fb923c !important; }
.dark .fi-prose span.color[data-color="rood"] { color: #f87171 !important; }
.dark .fi-prose span.color[data-color="blauw"] { color: #60a5fa !important; }
.dark .fi-prose span.color[data-color="grijs"] { color: #9ca3af !important; }
.fi-prose mark { background: #fef08a; color: inherit; padding: 0 .1em; border-radius: .15em; }
.dark .fi-prose mark { background: rgb(234 179 8 / .35); }

/* Tags en labels (App\Support\Tags) */
.sd-tags { display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.sd-tag { display: inline-flex; align-items: center; max-width: 12rem; padding: .05rem .45rem; border-radius: 9999px; font-size: .72rem; font-weight: 500; line-height: 1.35rem;
    background: var(--sd-tag-bg); color: var(--sd-tag-fg); border: 1px solid var(--sd-tag-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.sd-tag:hover { filter: brightness(.96); text-decoration: none; }
.sd-tag-more { --sd-tag-bg: transparent; --sd-tag-fg: var(--gray-500); --sd-tag-border: var(--gray-300); cursor: default; }
.dark .sd-tag { background: color-mix(in oklab, var(--sd-tag-fg) 22%, transparent); color: color-mix(in oklab, var(--sd-tag-fg) 45%, white); border-color: color-mix(in oklab, var(--sd-tag-fg) 40%, transparent); }
.dark .sd-tag-more { background: transparent; color: var(--gray-400); border-color: rgb(255 255 255 / .15); }

/* Ticketpagina (opzet 2): titel over de volle breedte, knoppen eronder */
.sd-ticket-view .fi-header { flex-direction: column; align-items: stretch; gap: .85rem; }
.sd-ticket-view .fi-header > div:first-child { min-width: 0; }
.sd-ticket-view .fi-header-actions-ctn { width: 100%; }
.sd-ticket-view .fi-header-actions-ctn .fi-ac { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.sd-ticket-view .sd-push-right, .sd-ticket-view .sd-push-right-fallback { margin-inline-start: auto; }
.sd-ticket-view .sd-push-right ~ .sd-push-right-fallback { margin-inline-start: 0; }
.sd-ticket-heading { display: flex; align-items: flex-start; gap: .75rem; max-width: 72rem; }
.sd-ticket-key { flex: none; margin-top: .3rem; display: inline-flex; align-items: center; gap: .35rem; height: 1.75rem; padding: 0 .6rem; border-radius: .5rem;
    border: 1px solid var(--gray-300); background: #fff; font-family: ui-monospace, monospace; font-size: .875rem; font-weight: 700; color: var(--gray-900); cursor: copy; }
.sd-ticket-key svg { color: var(--gray-500); }
.dark .sd-ticket-key { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .15); color: #fff; }
.sd-ticket-title-wrap { min-width: 0; flex: 1; }
/* Bijlagen slepen op het ticket */
.sd-drop-zone { margin-top: .5rem; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .5rem .75rem; border: 1.5px dashed var(--gray-300); border-radius: .625rem; color: var(--gray-500); font-size: .8125rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.sd-drop-zone:hover, .sd-drop-zone.is-over { border-color: var(--primary-400); background: var(--primary-50); color: var(--primary-700); }
.sd-drop-zone.is-busy { cursor: progress; }
.dark .sd-drop-zone { border-color: rgb(255 255 255 / .15); }
.dark .sd-drop-zone:hover, .dark .sd-drop-zone.is-over { background: rgb(232 75 15 / .1); }
.sd-drop-page { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgb(5 51 59 / .35); pointer-events: none; }
.sd-drop-page > div { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2rem 2.5rem; border: 2px dashed var(--primary-400); border-radius: 1rem; background: #fff; color: var(--primary-700); font-size: 1rem; font-weight: 600; box-shadow: 0 20px 50px rgb(5 51 59 / .25); }
.dark .sd-drop-page > div { background: var(--gray-900); }
/* Klant kiezen in Details (dubbelklik) */
.sd-client-pick { position: relative; display: block; font-size: .875rem; }
.sd-client-pick-value { display: inline-block; min-width: 3rem; cursor: pointer; user-select: none; }
.sd-client-pick-value:hover { text-decoration: underline; }
.sd-client-pick-open { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin-left: .25rem; vertical-align: middle; border-radius: .375rem; color: var(--gray-400); }
.sd-client-pick-open:hover { color: var(--primary-600); background: var(--primary-50); }
.dark .sd-client-pick-open:hover { color: var(--primary-400); background: rgb(255 255 255 / .06); }
.sd-client-pick-open svg { width: 1rem; height: 1rem; }
.sd-client-pick-box { position: relative; display: block; }
.sd-client-pick-box input { width: 100%; height: 2rem; padding: 0 .5rem; border: 1px solid var(--primary-400); border-radius: .5rem; font: inherit; font-size: .875rem; background: #fff; color: inherit; outline: none; box-shadow: 0 0 0 3px rgb(232 75 15 / .15); }
/* In de flow (niet zwevend): Filament snijdt zwevende lijstjes in een infolist-blok af */
.sd-client-pick-list { position: static; margin-top: .25rem; max-height: 14rem; overflow-y: auto; display: flex; flex-direction: column; padding: .25rem; border-radius: .5rem; background: #fff; box-shadow: 0 10px 30px rgb(15 23 42 / .15), 0 0 0 1px rgb(15 23 42 / .08); }
.sd-client-pick-list button { text-align: left; padding: .375rem .5rem; border: 0; border-radius: .375rem; background: none; font: inherit; font-size: .875rem; color: inherit; cursor: pointer; }
.sd-client-pick-list button.is-sel { background: var(--primary-50); color: var(--primary-700); }
.sd-client-pick-list .sd-client-pick-clear { margin-top: .25rem; border-top: 1px solid var(--gray-100); border-radius: 0 0 .375rem .375rem; color: var(--gray-500); }
.sd-client-pick-none { padding: .375rem .5rem; color: var(--gray-500); }
.dark .sd-client-pick-box input, .dark .sd-client-pick-list { background: var(--gray-900); }
.sd-ticket-pin { flex: none; margin-top: .3rem; width: 2rem; height: 1.75rem; border-radius: .5rem; border: 1px solid var(--gray-300); background: #fff; color: var(--gray-500); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sd-ticket-pin:hover { color: var(--primary-600); border-color: var(--primary-300); }
.sd-ticket-pin.is-pinned { color: var(--primary-700); background: var(--primary-50); border-color: var(--primary-400); }
.dark .sd-ticket-pin { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .15); color: var(--gray-400); }
.dark .sd-ticket-pin.is-pinned { color: var(--primary-400); border-color: var(--primary-500); }
.sd-ticket-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: text; border-radius: .375rem; padding: 0 .25rem; margin: 0 -.25rem; }
.sd-ticket-title:hover { background: rgb(0 0 0 / .04); }
.dark .sd-ticket-title:hover { background: rgb(255 255 255 / .05); }
.sd-ticket-title-input { display: block; font: inherit; line-height: inherit; width: 100%; max-width: 100%; padding: .1rem .4rem; border: 1px solid var(--primary-400); border-radius: .375rem; outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 20%, transparent); background: #fff; color: inherit;
    resize: none; overflow: hidden; }   /* breedte en hoogte zet sdTicketTitle.fit() */

/* ---- Met voorrang doorgezet: lichtoranje regel (ticketlijst, dashboardblok) ---- */
.sd-urgent-row { background: #fff8f3 !important; }
.sd-urgent-row:hover { background: #fff1e6 !important; }
.dark .sd-urgent-row { background: rgb(232 75 15 / .10) !important; }

/* ===== filament/activities/changes.blade.php ===== */
.ac-row { border: 1px solid var(--gray-200); border-radius: .75rem; overflow: hidden; }
.dark .ac-row { border-color: rgb(255 255 255 / .1); }
.ac-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .85rem; background: var(--gray-50); }
.dark .ac-head { background: rgb(255 255 255 / .04); }
.ac-cols { display: grid; grid-template-columns: 1fr 1fr; }
.ac-cols > div { padding: .65rem .85rem; min-width: 0; overflow-wrap: anywhere; max-height: 22rem; overflow: auto; }
.ac-cols > div + div { border-left: 1px solid var(--gray-200); }
.dark .ac-cols > div + div { border-color: rgb(255 255 255 / .1); }
.ac-tag { display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
.ac-old .ac-tag { color: #b91c1c; } .ac-new .ac-tag { color: #15803d; }
.ac-old { background: rgb(254 226 226 / .35); } .ac-new { background: rgb(220 252 231 / .35); }
.dark .ac-old { background: rgb(127 29 29 / .15); } .dark .ac-new { background: rgb(20 83 45 / .15); }
.ac-note { font-size: .75rem; color: var(--gray-500); }
@media (max-width: 640px) { .ac-cols { grid-template-columns: 1fr; } .ac-cols > div + div { border-left: 0; border-top: 1px solid var(--gray-200); } }

/* ===== filament/assets/object-view-styles.blade.php ===== */
.sd-asset-details .fi-sc-has-gap, .sd-asset-details .fi-sc { gap: 0 !important; row-gap: 0 !important; }
.sd-asset-details .fi-in-entry,
.sd-asset-side .fi-in-entry {
    display: grid !important;
    grid-template-columns: minmax(9rem, 34%) minmax(0, 1fr) !important;
    column-gap: 1.25rem !important;
    row-gap: 0 !important;
    align-items: baseline;
}
.sd-asset-details .fi-in-entry { padding: .5rem 0; border-bottom: 1px solid var(--gray-100); }
.dark .sd-asset-details .fi-in-entry { border-color: rgb(255 255 255 / .06); }
.sd-asset-details .fi-grid-col:last-child .fi-in-entry, .sd-asset-details .fi-in-entry:last-child { border-bottom: 0; }
.sd-asset-details .fi-in-entry-label-col, .sd-asset-side .fi-in-entry-label-col { grid-column: 1 !important; }
.sd-asset-details .fi-in-entry-content-col, .sd-asset-side .fi-in-entry-content-col { grid-column: 2 !important; min-width: 0; }
.sd-asset-details .fi-in-entry-label { color: var(--gray-600); font-weight: 500; }
.dark .sd-asset-details .fi-in-entry-label { color: var(--gray-400); }
.sd-asset-details .fi-in-text-item, .sd-asset-details .fi-in-entry-content { overflow-wrap: anywhere; }
.sd-asset-side .fi-in-entry { grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr) !important; column-gap: .75rem !important; }
.sd-asset-side .fi-sc-has-gap { gap: .55rem !important; }
/* "Verwijst naar" en "Gebruikt in" hebben veel inhoud: daar label boven de waarde */
.sd-asset-links .fi-in-entry { display: grid !important; grid-template-columns: 1fr !important; row-gap: .35rem !important; }
.sd-asset-links .fi-in-entry-label-col, .sd-asset-links .fi-in-entry-content-col { grid-column: 1 !important; }

/* ===== filament/assets/preview.blade.php ===== */
.ap-rows { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .4rem 1rem; font-size: .875rem; }
.ap-rows dt { color: var(--gray-500); }
.ap-rows dd { margin: 0; word-break: break-word; }
.ap-h { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); margin-bottom: .5rem; }
.ap-photos { display: flex; gap: .5rem; flex-wrap: wrap; }
.ap-photos img { width: 96px; height: 96px; object-fit: cover; border-radius: .5rem; outline: 1px solid rgb(0 0 0 / .08); }
.ap-list { display: grid; gap: .3rem; font-size: .875rem; }
.ap-list a { color: var(--primary-600); }
.ap-muted { color: var(--gray-500); font-size: .75rem; }

/* ===== filament/assets/tree-styles.blade.php ===== */
/* Schema tree: eigen CSS op Filament-kleurvariabelen, werkt zonder eigen Tailwind-build */
.st-card { background: #fff; border-radius: .75rem; box-shadow: 0 1px 2px rgb(0 0 0 / .05); outline: 1px solid rgb(3 7 18 / .05); }
.dark .st-card { background: var(--gray-900, #111827); outline-color: rgb(255 255 255 / .1); }
@media (min-width: 1024px) { .st-card { position: sticky; top: 5rem; } }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200, #e5e7eb); }
.dark .st-head { border-color: rgb(255 255 255 / .1); }
.st-title { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500, #6b7280); }
.st-link { font-size: .75rem; color: var(--primary-600); background: none; border: 0; cursor: pointer; padding: 0; }
.st-link:hover { text-decoration: underline; }
.dark .st-link { color: var(--primary-400); }
.st-search { padding: .75rem .75rem 0; }
.st-search input { width: 100%; font-size: .875rem; padding: .375rem .75rem; border-radius: .5rem; border: 1px solid var(--gray-300, #d1d5db); background: #fff; color: inherit; }
.dark .st-search input { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); }
.st-search input:focus { outline: 2px solid var(--primary-500); outline-offset: -1px; }
.st-nav { max-height: 70vh; overflow-y: auto; padding: .5rem; font-size: .875rem; }
.st-list { list-style: none; margin: 0; padding: 0; }
.st-row { display: flex; align-items: center; border-radius: .5rem; padding-right: .5rem; }
.st-row:hover { background: var(--gray-50, #f9fafb); }
.dark .st-row:hover { background: rgb(255 255 255 / .05); }
.st-row.is-selected { background: var(--primary-50); }
.dark .st-row.is-selected { background: color-mix(in oklab, var(--primary-500) 12%, transparent); }
.st-toggle { flex-shrink: 0; width: 1.375rem; height: 1.375rem; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; color: var(--gray-400, #9ca3af); border-radius: .25rem; }
.st-toggle:hover { color: var(--gray-600, #4b5563); }
.st-toggle svg { width: .875rem; height: .875rem; transition: transform .15s; }
.st-toggle.is-open svg { transform: rotate(90deg); }
.st-spacer { flex-shrink: 0; width: 1.375rem; }
.st-item { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .375rem 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--gray-700, #374151); }
.dark .st-item { color: var(--gray-200, #e5e7eb); }
.st-item.is-group { font-weight: 600; }
.st-row.is-selected .st-item { color: var(--primary-700); font-weight: 600; }
.dark .st-row.is-selected .st-item { color: var(--primary-400); }
.st-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-count { flex-shrink: 0; font-size: .75rem; font-variant-numeric: tabular-nums; padding: 0 .375rem; border-radius: .375rem; background: var(--gray-100, #f3f4f6); color: var(--gray-600, #4b5563); }
.dark .st-count { background: rgb(255 255 255 / .1); color: var(--gray-300, #d1d5db); }

/* ===== filament/forms/asset-block-picker.blade.php ===== */
.sd-ap { border: 1px solid var(--gray-200); border-radius: .75rem; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.dark .sd-ap { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .1); }
.sd-ap-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .85rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); border-radius: .75rem .75rem 0 0; }
.dark .sd-ap-head { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .06); }
.sd-ap-title { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.sd-ap-icon { width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: #05333b; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sd-ap-icon img { filter: brightness(0) invert(1); }
.sd-ap-count { font-size: .75rem; color: var(--gray-500); }
.sd-ap-picked { font-size: .75rem; font-weight: 600; color: var(--primary-700); white-space: nowrap; }
.sd-ap-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: .6rem .85rem 0; }
.sd-ap-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .3rem .1rem .5rem; border-radius: 9999px; background: color-mix(in oklab, var(--primary-500) 10%, #fff); border: 1px solid color-mix(in oklab, var(--primary-500) 35%, #fff); color: var(--primary-800); font-size: .75rem; font-weight: 500; }
.dark .sd-ap-chip { background: color-mix(in oklab, var(--primary-500) 20%, transparent); color: var(--primary-200); border-color: color-mix(in oklab, var(--primary-500) 40%, transparent); }
.sd-ap-chip button { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 9999px; color: inherit; }
.sd-ap-chip button:hover { background: rgb(0 0 0 / .06); }
.sd-ap-tools { padding: .6rem .85rem; display: flex; flex-direction: column; gap: .5rem; }
.sd-ap-search { display: flex; align-items: center; gap: .5rem; height: 2.4rem; padding: 0 .65rem; border-radius: .5rem; border: 1px solid var(--gray-300); color: var(--gray-500); background: #fff; }
.dark .sd-ap-search { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .12); }
.sd-ap-search:focus-within { border-color: var(--primary-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 18%, transparent); }
.sd-ap-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .8125rem; color: var(--gray-900); padding: 0; box-shadow: none; }
.dark .sd-ap-search input { color: #fff; }
.sd-ap-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.sd-ap-pill { height: 1.75rem; padding: 0 .65rem; border-radius: 9999px; border: 1px solid var(--gray-300); background: #fff; color: var(--gray-700); font-size: .75rem; font-weight: 500; display: inline-flex; align-items: center; gap: .3rem; }
.dark .sd-ap-pill { background: transparent; border-color: rgb(255 255 255 / .15); color: var(--gray-300); }
.sd-ap-pill.is-on { background: #05333b; border-color: #05333b; color: #fff; }
.sd-ap-pill select { border: 0; background: transparent; color: inherit; font-size: .75rem; padding: 0 1.2rem 0 0; height: 100%; box-shadow: none; cursor: pointer; }
.sd-ap-list { list-style: none; margin: 0; padding: 0 .5rem .5rem; max-height: 17rem; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; }
.sd-ap-row { display: flex; align-items: center; gap: .65rem; padding: .45rem .5rem; border-radius: .5rem; cursor: pointer; }
.sd-ap-row:hover { background: var(--gray-50); }
.dark .sd-ap-row:hover { background: rgb(255 255 255 / .04); }
.sd-ap-row.is-picked { background: color-mix(in oklab, var(--primary-500) 7%, #fff); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-500) 30%, #fff); }
.dark .sd-ap-row.is-picked { background: color-mix(in oklab, var(--primary-500) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-500) 35%, transparent); }
.sd-ap-row input[type=checkbox] { width: 1rem; height: 1rem; margin: 0; flex: none; accent-color: var(--primary-600); }
.sd-ap-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sd-ap-label { font-size: .8125rem; font-weight: 600; color: var(--gray-900); }
.dark .sd-ap-label { color: #fff; }
.sd-ap-key { font-weight: 400; color: var(--gray-500); font-family: ui-monospace, monospace; font-size: .6875rem; margin-left: .25rem; }
.sd-ap-sub { font-size: .75rem; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-ap-status { font-size: .6875rem; font-weight: 600; padding: .05rem .5rem; border-radius: 9999px; background: var(--gray-100); color: var(--gray-700); white-space: nowrap; }
.sd-ap-status.is-ok { background: #dcfce7; color: #166534; }
.sd-ap-status.is-bad { background: #fee2e2; color: #991b1b; }
.sd-ap-empty { padding: .9rem; text-align: center; font-size: .8125rem; color: var(--gray-500); }
.sd-ap-foot { padding: .45rem .85rem; border-top: 1px solid var(--gray-100); font-size: .75rem; color: var(--gray-500); }
.dark .sd-ap-foot { border-color: rgb(255 255 255 / .06); }

/* ===== filament/pages/invoicing.blade.php ===== */
.fx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border-radius: .75rem; padding: 12px 16px; box-shadow: 0 1px 2px rgb(5 51 59 / .06); outline: 1px solid rgb(5 51 59 / .05); }
.dark .fx-bar, .dark .fx-card { background: var(--gray-900); outline-color: rgb(255 255 255 / .08); }
.fx-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-nav { display: flex; align-items: center; border: 1px solid var(--gray-300); border-radius: .5rem; min-height: 38px; }
.fx-nav button { border: 0; background: none; width: 38px; height: 38px; cursor: pointer; color: var(--gray-600); display: inline-flex; align-items: center; justify-content: center; }
.fx-nav button:hover { color: var(--primary-600); }
.fx-nav button:disabled { opacity: .3; cursor: default; }
.fx-period { padding: 0 12px; border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); font-size: .875rem; font-weight: 600; white-space: nowrap; height: 38px; display: inline-flex; align-items: center; min-width: 9rem; justify-content: center; }
.fx-seg { display: inline-flex; border: 1px solid var(--gray-300); border-radius: .5rem; padding: 3px; gap: 2px; }
.dark .fx-seg, .dark .fx-nav { border-color: rgb(255 255 255 / .1); }
.fx-seg button { border: 0; background: none; border-radius: .375rem; padding: 5px 12px; font-size: .8125rem; font-weight: 500; color: var(--gray-600); cursor: pointer; white-space: nowrap; }
.fx-seg button.is-on { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }
.dark .fx-seg button.is-on { background: color-mix(in oklab, var(--primary-500) 20%, transparent); color: var(--primary-300); }
.fx-emp { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 4px 0 10px; border: 1px solid var(--gray-300); border-radius: .5rem; color: var(--gray-500); }
.fx-emp select { border: 0; background: transparent; font-size: .875rem; font-weight: 600; color: var(--gray-800); padding: 0 1.75rem 0 2px; height: 36px; box-shadow: none; cursor: pointer; }
.fx-emp:has(select:focus) { border-color: var(--primary-500); }
.dark .fx-emp { border-color: rgb(255 255 255 / .1); } .dark .fx-emp select { color: var(--gray-100); }
.fx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.fx-card { background: #fff; border-radius: .75rem; padding: .8rem 1rem; outline: 1px solid rgb(5 51 59 / .06); box-shadow: 0 1px 2px rgb(5 51 59 / .05); position: relative; }
.fx-card::before { content: ''; position: absolute; left: 0; top: .8rem; bottom: .8rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--fx, var(--gray-300)); }
.fx-card strong { display: block; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--fx-text, inherit); }
.fx-card span { font-size: .75rem; color: var(--gray-500); }
.fx-card small { display: block; font-size: .75rem; color: var(--gray-500); margin-top: .1rem; }
.fx-card.clickable { cursor: pointer; }
.fx-card.clickable:hover { outline-color: var(--primary-400); }

/* ===== filament/pages/monitor.blade.php ===== */
.mo-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mo-seg { display: inline-flex; border: 1px solid var(--gray-300); border-radius: .5rem; padding: 3px; gap: 2px; }
.dark .mo-seg { border-color: rgb(255 255 255 / .1); }
.mo-seg button { border: 0; background: none; border-radius: .375rem; padding: 5px 12px; font-size: .8125rem; color: var(--gray-600); cursor: pointer; }
.mo-seg button.is-on { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }
.mo-sum { font-size: .8125rem; color: var(--gray-500); display: flex; gap: .9rem; flex-wrap: wrap; }
.mo-down { display: inline-flex; align-items: center; gap: .5rem; padding: 6px 12px; border-radius: .5rem; border: 1px solid #fecaca;
    background: #fef2f2; color: #991b1b; font-size: .8125rem; font-weight: 600; cursor: pointer; }   /* down volgens UptimeRobot */
.mo-down.is-on { background: #dc2626; border-color: #dc2626; color: #fff; }
.mo-down.is-on .sd-up-pulse { background: #fff; box-shadow: none; }
/* Uptime-balk op de monitorkaart: 30 dagen, per dag (App\Support\UptimeHistory) */
.mo-avg { color: var(--sd-petrol); font-variant-numeric: tabular-nums; }
.mo-uptime { display: flex; flex-direction: column; gap: 3px; margin-top: .5rem; }
.mo-uptime-row { display: flex; align-items: center; gap: .6rem; }
.mo-uptime-bars { flex: 1; display: flex; gap: 2px; min-width: 0; }
.mo-uptime-bar { flex: 1; height: 20px; border-radius: 2px; background: #e5e7eb; cursor: default; }
.mo-uptime-bar.is-up { background: #10b981; }
.mo-uptime-bar.is-minor { background: #f59e0b; }
.mo-uptime-bar.is-down { background: #e11d48; }
.mo-uptime-bar:hover { outline: 2px solid var(--sd-petrol); outline-offset: 1px; }
.mo-uptime-pct { width: 3.5rem; text-align: right; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #047857; }
.mo-uptime-pct.is-bad { color: #be123c; }
.mo-uptime-pct.is-none { color: var(--gray-400); font-weight: 500; }
.mo-uptime-scale { display: flex; justify-content: space-between; padding-right: 4.1rem; font-size: .6875rem; color: var(--gray-500); }
.mo-down-other { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: #991b1b; }
.mo-sum b { font-variant-numeric: tabular-nums; }
.mo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.mo-card { background: #fff; border-radius: .85rem; overflow: hidden; outline: 1px solid rgb(5 51 59 / .08); box-shadow: 0 1px 2px rgb(5 51 59 / .06); display: flex; flex-direction: column; }
.dark .mo-card { background: var(--gray-900); outline-color: rgb(255 255 255 / .08); }
.mo-card.is-error { outline: 2px solid var(--danger-500, #f43f5e); }
.mo-card.is-warning { outline: 2px solid var(--warning-400, #fbbf24); }
.mo-shot { position: relative; aspect-ratio: 16 / 10; background: var(--gray-100); cursor: zoom-in; overflow: hidden; border: 0; padding: 0; display: block; width: 100%; }
.dark .mo-shot { background: rgb(255 255 255 / .04); }
.mo-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mo-shot .mo-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8125rem; color: var(--gray-400); }
.mo-change { position: absolute; right: .5rem; top: .5rem; font-size: .6875rem; font-weight: 700; padding: .1rem .45rem; border-radius: 9999px; background: rgb(0 0 0 / .65); color: #fff; }
.mo-body { padding: .7rem .85rem .8rem; display: grid; gap: .35rem; flex: 1; }
.mo-title { display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .9rem; min-width: 0; }
.mo-title a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-title a:hover { color: var(--primary-600); }
.mo-dot { width: .6rem; height: .6rem; border-radius: 9999px; flex-shrink: 0; }
.mo-url { font-size: .75rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-url a { color: inherit; }
.mo-msg { font-size: .75rem; line-height: 1.4; }
.mo-meta { display: flex; gap: .7rem; flex-wrap: wrap; font-size: .6875rem; color: var(--gray-500); margin-top: auto; padding-top: .3rem; }
.mo-ur { padding: 0 .4rem; border-radius: 999px; background: #dcfce7; color: #166534; font-weight: 600; }   /* bereikbaarheid via UptimeRobot */
.mo-ur.is-down { background: #fee2e2; color: #991b1b; }
.mo-ur.is-off { background: var(--gray-100); color: var(--gray-500); }
.mo-actions { display: flex; gap: .75rem; padding: .5rem .85rem; border-top: 1px solid var(--gray-100); font-size: .75rem; }
.dark .mo-actions { border-color: rgb(255 255 255 / .06); }
.mo-actions button { background: none; border: 0; padding: 0; color: var(--gray-600); cursor: pointer; font-size: .75rem; }
.mo-actions button:hover { color: var(--primary-600); }

/* ===== filament/pages/projects.blade.php ===== */
.pjo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.pjo-bar input[type=search] { flex: 1 1 14rem; max-width: 22rem; }
.pjo-seg { display: inline-flex; border-radius: .5rem; overflow: hidden; outline: 1px solid rgb(5 51 59 / .12); }
.pjo-seg button { padding: .35rem .75rem; font-size: .8125rem; background: #fff; color: var(--gray-700); border-right: 1px solid rgb(5 51 59 / .08); }
.pjo-seg button:last-child { border-right: 0; }
.pjo-seg button.on { background: var(--primary-600); color: #fff; }
.dark .pjo-seg button { background: var(--gray-900); color: var(--gray-300); border-color: rgb(255 255 255 / .08); }
.dark .pjo-seg button.on { background: var(--primary-600); color: #fff; }
.pjo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.pjo-stat { padding: .7rem .9rem; border-radius: .75rem; background: #fff; outline: 1px solid rgb(5 51 59 / .08); }
.dark .pjo-stat { background: var(--gray-900); outline-color: rgb(255 255 255 / .08); }
.pjo-stat strong { display: block; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pjo-stat span { font-size: .75rem; color: var(--gray-500); }
.pjo-group { margin: 1.25rem 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); }

/* ===== filament/pages/search.blade.php ===== */
.sr { --sr-card: #fff; --sr-line: #e2e8f0; --sr-line-soft: #eef2f5; --sr-text: #0f172a; --sr-muted: #64748b; --sr-label: #475569; --sr-key: #1a5c67; }
.dark .sr { --sr-card: var(--gray-900); --sr-line: rgb(255 255 255 / .1); --sr-line-soft: rgb(255 255 255 / .06); --sr-text: var(--gray-100); --sr-muted: var(--gray-400); --sr-label: var(--gray-300); --sr-key: #7db5be; }
.sr { display: flex; flex-direction: column; gap: 1.25rem; color: var(--sr-text); }
.sr mark { background: #fde3d3; color: #7c2d12; border-radius: 3px; padding: 0 1px; }
.dark .sr mark { background: rgb(232 75 15 / .3); color: #fed7c3; }
.sr-muted { color: var(--sr-muted); }

/* Zoekbalk */
.sr-bar { display: flex; flex-wrap: wrap; gap: .625rem; }
.sr-field { flex: 1 1 30rem; height: 3.25rem; display: flex; align-items: center; gap: .75rem; padding: 0 1rem; background: var(--sr-card); border: 2px solid var(--primary-600); border-radius: .75rem; }
.sr-field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 25%, transparent); }
.sr-field svg { flex: none; color: var(--primary-600); }
.sr-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.125rem; color: inherit; box-shadow: none; padding: 0; }
.sr-field input::-webkit-search-cancel-button { cursor: pointer; }
.sr-go { height: 3.25rem; padding: 0 1.375rem; border: 0; border-radius: .75rem; background: var(--primary-600); color: #fff; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.sr-go:hover { background: var(--primary-700); }
.sr-go:focus-visible { outline: 3px solid color-mix(in oklab, var(--primary-500) 40%, transparent); outline-offset: 2px; }

/* Filters + resultaten */
.sr-body { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.sr-filters { flex: 1 1 15rem; max-width: 17.5rem; background: var(--sr-card); border-radius: .75rem; padding: 1.125rem; display: flex; flex-direction: column; gap: 1.125rem; box-shadow: 0 1px 2px rgb(5 51 59 / .06); }
@media (max-width: 52rem) { .sr-filters { max-width: none; } }
.sr-filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.sr-legend { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sr-label); margin-bottom: .375rem; padding: 0; }
.sr-opt { display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; }
.sr-opt input { accent-color: var(--primary-600); width: 1rem; height: 1rem; margin: 0; }
.sr-opt .sr-n { margin-left: auto; color: var(--sr-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.sr-select { display: flex; flex-direction: column; gap: .375rem; }
.sr-select select { height: 2.375rem; border: 1px solid #cbd5e1; border-radius: .5rem; font: inherit; font-size: .875rem; padding: 0 2rem 0 .5rem; background-color: var(--sr-card); color: inherit; }
.dark .sr-select select { border-color: rgb(255 255 255 / .15); }

.sr-results { flex: 999 1 35rem; min-width: 0; background: var(--sr-card); border-radius: .75rem; overflow: hidden; box-shadow: 0 1px 2px rgb(5 51 59 / .06); }
.sr-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .875rem 1.125rem; border-bottom: 1px solid var(--sr-line); }
.sr-head strong { font-size: .9375rem; }
.sr-sort { font-size: .8125rem; color: var(--sr-label); display: inline-flex; align-items: center; gap: .5rem; }
.sr-sort select { height: 2.125rem; border: 1px solid #cbd5e1; border-radius: .5rem; font: inherit; font-size: .8125rem; padding: 0 2rem 0 .4rem; background-color: var(--sr-card); color: inherit; }
.dark .sr-sort select { border-color: rgb(255 255 255 / .15); }

.sr-scroll { overflow-x: auto; }
.sr-table { width: 100%; min-width: 47.5rem; border-collapse: collapse; font-size: .875rem; }
.sr-table th { text-align: left; color: var(--sr-label); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding: .625rem .5rem; white-space: nowrap; }
.sr-table th:first-child, .sr-table td:first-child { padding-left: 1.125rem; }
.sr-table th:last-child, .sr-table td:last-child { padding-right: 1.125rem; text-align: right; }
.sr-table td { padding: .75rem .5rem; border-top: 1px solid var(--sr-line-soft); vertical-align: middle; white-space: nowrap; }
.sr-table td:first-child { white-space: normal; width: 55%; }
.sr-table td:last-child { color: var(--sr-muted); }
.sr-table tbody tr:hover { background: color-mix(in oklab, var(--sd-petrol, #05333b) 4%, transparent); }
.sr-link { display: flex; flex-direction: column; gap: .2rem; color: inherit; text-decoration: none; }
.sr-link:hover .sr-title { text-decoration: underline; text-underline-offset: 2px; }
.sr-link:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 3px; border-radius: .25rem; }
.sr-key { font-family: ui-monospace, monospace; font-size: .8125rem; font-weight: 700; color: var(--sr-key); margin-right: .5rem; }
.sr-title { font-weight: 600; }
.sr-sub { font-size: .8125rem; color: var(--sr-muted); }

.sr-pill { height: 1.5rem; padding: 0 .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.sr-pill-new { background: #e2e8f0; color: #1e293b; }
.sr-pill-busy { background: #d6eaed; color: #05333b; }
.sr-pill-hold { background: #fde3d3; color: #7c2d12; }
.sr-pill-done { background: #dcfce7; color: #14532d; }

.sr-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1.125rem; border-top: 1px solid var(--sr-line); font-size: .8125rem; color: var(--sr-label); }
.sr-pager { display: flex; gap: .375rem; }
.sr-pager button { height: 2.125rem; padding: 0 .75rem; border-radius: .5rem; border: 1px solid #cbd5e1; background: var(--sr-card); color: inherit; font: inherit; font-size: .8125rem; cursor: pointer; }
.sr-pager button:hover:not(:disabled) { border-color: var(--primary-600); color: var(--primary-700); }
.sr-pager button:disabled { opacity: .45; cursor: default; }
.dark .sr-pager button { border-color: rgb(255 255 255 / .15); }
.sr-empty { padding: 2.5rem 1.125rem; text-align: center; color: var(--sr-muted); font-size: .875rem; }

/* ===== filament/pages/timesheet.blade.php ===== */
.ts-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border-radius: .75rem; padding: 12px 16px; box-shadow: 0 1px 2px rgb(5 51 59 / .06); outline: 1px solid rgb(5 51 59 / .05); }
.dark .ts-bar, .dark .ts-card { background: var(--gray-900); outline-color: rgb(255 255 255 / .08); }
.ts-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-select { min-height: 38px; border: 1px solid var(--gray-300); border-radius: .5rem; padding: 0 2rem 0 .75rem; font-size: .875rem; font-weight: 600; background-color: #fff; color: inherit; }
.dark .ts-select { background-color: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); }
.ts-nav { display: flex; align-items: center; border: 1px solid var(--gray-300); border-radius: .5rem; min-height: 38px; }
.dark .ts-nav, .dark .ts-seg { border-color: rgb(255 255 255 / .1); }
.ts-nav button { border: 0; background: none; width: 38px; height: 38px; cursor: pointer; color: var(--gray-600); display: inline-flex; align-items: center; justify-content: center; }
.ts-nav button:hover { color: var(--primary-600); }
.ts-nav .ts-period { padding: 0 12px; border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200); font-size: .875rem; font-weight: 600; white-space: nowrap; height: 38px; display: inline-flex; align-items: center; }
.ts-today-btn { font-size: .8125rem; font-weight: 600; color: var(--primary-600); background: none; border: 0; cursor: pointer; padding: 0 4px; }
.ts-seg { display: inline-flex; border: 1px solid var(--gray-300); border-radius: .5rem; padding: 3px; gap: 2px; }
.ts-seg button { border: 0; background: none; border-radius: .375rem; padding: 5px 12px; font-size: .8125rem; font-weight: 500; color: var(--gray-600); cursor: pointer; }
.ts-seg button.is-on { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }
.dark .ts-seg button.is-on { background: color-mix(in oklab, var(--primary-500) 20%, transparent); color: var(--primary-300); }
.ts-progress { min-width: 260px; flex: 0 1 320px; }
.ts-progress-label { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--gray-500); margin-bottom: 6px; }
.ts-progress-label strong { color: var(--gray-950); font-size: .9375rem; }
.dark .ts-progress-label strong { color: #fff; }
.ts-progress-track { height: 8px; border-radius: 9999px; background: var(--gray-200); overflow: hidden; }
.dark .ts-progress-track { background: rgb(255 255 255 / .1); }
.ts-progress-track > div { height: 100%; background: var(--primary-600); border-radius: 9999px; }

.ts-card { background: #fff; border-radius: .75rem; box-shadow: 0 1px 2px rgb(5 51 59 / .06); outline: 1px solid rgb(5 51 59 / .05); overflow: hidden; }
/* Scrollen binnen de kaart (beide richtingen), zodat kop, totaal en ticketkolom kunnen blijven staan */
.ts-scroll { overflow: auto; max-height: max(22rem, calc(100dvh - 15rem)); overscroll-behavior: contain; }
.ts-row { display: grid; border-bottom: 1px solid var(--gray-100); --ts-row-bg: #fff; }
.dark .ts-row { --ts-row-bg: var(--gray-900); }

/* Ticket- en totaalkolom blijven links staan bij horizontaal scrollen */
.ts-row > :nth-child(1), .ts-row > :nth-child(2) { position: sticky; z-index: 2; background: var(--ts-row-bg); }
.ts-row > :nth-child(1) { left: 0; }
.ts-row > :nth-child(2) { left: 380px; box-shadow: 1px 0 0 var(--gray-200), 6px 0 8px -6px rgb(5 51 59 / .18); }
.dark .ts-row > :nth-child(2) { box-shadow: 1px 0 0 rgb(255 255 255 / .1), 6px 0 8px -6px rgb(0 0 0 / .5); }

/* Dagenrij bovenaan en Totaal per dag onderaan blijven staan bij verticaal scrollen */
.ts-row.ts-head { position: sticky; top: 0; z-index: 4; }
/* Koptekst links over de volle hoogte, zodat de dagnummers er niet doorheen schijnen */
.ts-head > :nth-child(1), .ts-head > :nth-child(2) { align-self: stretch; display: flex; align-items: flex-end; }
.ts-head > :nth-child(2) { justify-content: flex-end; }
.ts-row.ts-row-total { position: sticky; bottom: 0; z-index: 4; box-shadow: 0 -1px 0 var(--gray-200), 0 -6px 8px -6px rgb(5 51 59 / .15); }
.dark .ts-row.ts-row-total { box-shadow: 0 -1px 0 rgb(255 255 255 / .1); }
.dark .ts-row { border-color: rgb(255 255 255 / .05); }
.ts-head { --ts-row-bg: color-mix(in oklab, var(--primary-500) 5%, #fff); background: var(--ts-row-bg); border-bottom: 1px solid var(--gray-200); align-items: end; padding-top: 6px; }
.dark .ts-head, .dark .ts-row-group, .dark .ts-row-total { --ts-row-bg: color-mix(in oklab, #fff 3%, var(--gray-900)); background: var(--ts-row-bg); }
.ts-hlabel { padding: 0 16px 12px; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-600); }
.ts-hday { height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--gray-100); font-size: .8125rem; font-weight: 600; line-height: 1.1; }
.ts-hday small { font-size: .625rem; font-weight: 600; letter-spacing: .04em; color: var(--gray-500); }
.ts-hday.ts-weekend { background: var(--gray-100); }
.dark .ts-hday.ts-weekend, .dark .ts-cell.ts-weekend { background: rgb(255 255 255 / .04); }
.ts-hday.ts-today { background: var(--primary-600); color: #fff; border-radius: 6px 6px 0 0; }
.ts-hday.ts-today small { color: var(--primary-100); }
.ts-row-group { --ts-row-bg: var(--gray-50); background: var(--ts-row-bg); }
.ts-row-total { --ts-row-bg: var(--gray-50); background: var(--ts-row-bg); border-bottom: 0; }
.ts-label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; min-width: 0; font-size: .8125rem; }
.ts-label .ts-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gray-700); }
.dark .ts-label .ts-title { color: var(--gray-300); }
.ts-badge { min-width: 24px; height: 22px; padding: 0 5px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .625rem; font-weight: 700; color: #fff; background: var(--primary-600); flex-shrink: 0; }
.ts-sum { display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; white-space: nowrap; font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-cell { height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--gray-100); background: transparent; font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: inherit; padding: 0 2px; white-space: nowrap; overflow: hidden; text-align: center; }
.dark .ts-cell { border-color: rgb(255 255 255 / .05); }
.ts-cell.ts-weekend { background: var(--gray-100); }
.ts-cell.ts-today { background: color-mix(in oklab, var(--primary-500) 7%, transparent); box-shadow: inset 1px 0 0 var(--primary-500), inset -1px 0 0 var(--primary-500); }
button.ts-cell { cursor: pointer; }
button.ts-cell:hover { background: var(--primary-50); outline: 1px solid var(--primary-300); outline-offset: -1px; }
.dark button.ts-cell:hover { background: color-mix(in oklab, var(--primary-500) 15%, transparent); }
.ts-cell.ts-strong { font-weight: 700; }
.ts-cell.ts-under { color: var(--warning-600, #d97706); }
.ts-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; font-size: .8125rem; color: var(--gray-500); border-top: 1px solid var(--gray-100); }
.ts-empty { padding: 32px 16px; text-align: center; color: var(--gray-500); font-size: .875rem; }
.ts-person { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--primary-600); cursor: pointer; text-align: left; }
.ts-person:hover { text-decoration: underline; }

/* ===== filament/partials/project-cards-style.blade.php ===== */
.pj-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.pj-card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: .7rem .85rem .7rem; border-radius: .75rem;
    background: #fff; text-decoration: none; color: inherit; outline: 1px solid rgb(5 51 59 / .08);
    box-shadow: 0 1px 2px rgb(5 51 59 / .06); transition: transform .12s, box-shadow .12s, outline-color .12s; }
.pj-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgb(5 51 59 / .10); outline-color: var(--primary-400); }
.dark .pj-card { background: var(--gray-900, #111827); outline-color: rgb(255 255 255 / .08); }
.pj-card::before { content: ''; position: absolute; left: 0; top: .9rem; bottom: .9rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary-500); }
.pj-card.has-high::before { background: var(--danger-500, #f43f5e); }
.pj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.pj-name { font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--gray-950, #030712); }
.dark .pj-name { color: #fff; }
.pj-sub { margin-top: .1rem; font-size: .75rem; color: var(--gray-500, #6b7280); }
.pj-count { text-align: right; line-height: 1; flex-shrink: 0; }
.pj-count strong { display: block; font-size: 1.625rem; font-weight: 700; color: var(--primary-600); font-variant-numeric: tabular-nums; }
.dark .pj-count strong { color: var(--primary-400); }
.pj-count span { font-size: .6875rem; color: var(--gray-500, #6b7280); }
.pj-bar { display: flex; height: .45rem; border-radius: 9999px; overflow: hidden; background: var(--gray-100, #f3f4f6); }
.dark .pj-bar { background: rgb(255 255 255 / .08); }
.pj-bar i { display: block; height: 100%; }
.pj-bar .high { background: var(--danger-500, #f43f5e); }
.pj-bar .medium { background: var(--warning-400, #fbbf24); }
.pj-bar .low { background: var(--gray-300, #cbd5e1); }
.pj-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .75rem; color: var(--gray-600, #4b5563); }
.dark .pj-foot { color: var(--gray-300, #d1d5db); }
.pj-legend { display: flex; gap: .6rem; font-variant-numeric: tabular-nums; }
.pj-legend b { font-weight: 600; }
.pj-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 9999px; margin-right: .25rem; vertical-align: middle; }
.pj-mine { font-weight: 600; color: var(--primary-600); }
.dark .pj-mine { color: var(--primary-400); }
.pj-avatar { width: 1.5rem; height: 1.5rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: .625rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.pj-empty { font-size: .875rem; color: var(--gray-500, #6b7280); }
.pj-extra { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .6875rem; }
.pj-extra span { padding: .1rem .45rem; border-radius: 9999px; background: var(--gray-100, #f3f4f6); color: var(--gray-700, #374151); }
.pj-extra .warn { background: rgb(251 191 36 / .18); color: #92400e; }
.dark .pj-extra span { background: rgb(255 255 255 / .08); color: var(--gray-300); }
.pj-tag { display: inline-block; margin-right: .3rem; padding: 0 .35rem; border-radius: .25rem; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; background: var(--info-100, #e0f2fe); color: var(--info-700, #0369a1); vertical-align: 1px; }
.dark .pj-tag { background: rgb(14 165 233 / .2); color: #7dd3fc; }
.pj-more { margin-top: .75rem; font-size: .8125rem; text-align: right; }

/* ===== filament/projects/board.blade.php ===== */
/* Kanban-board: eigen CSS op Filament-kleurvariabelen (werkt zonder eigen Tailwind-build) */
.kb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.kb-search { width: 16rem; max-width: 100%; font-size: .875rem; padding: .45rem .75rem; border-radius: .5rem; border: 1px solid var(--gray-300, #d1d5db); background: #fff; color: inherit; }
.dark .kb-search { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); }
.kb-search:focus { outline: 2px solid var(--primary-500); outline-offset: -1px; }
.kb-people { display: flex; align-items: center; }
.kb-avatar { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 600; color: #fff; flex-shrink: 0; border: 2px solid #fff; }
.dark .kb-avatar { border-color: var(--gray-900, #111827); }
.kb-people .kb-avatar { margin-left: -.35rem; cursor: pointer; transition: transform .1s; }
.kb-people .kb-avatar:first-child { margin-left: 0; }
.kb-people .kb-avatar:hover { transform: translateY(-2px); }
.kb-people .kb-avatar.is-active { outline: 2px solid var(--primary-500); outline-offset: 1px; z-index: 1; }
.kb-avatar.is-none { background: var(--gray-200, #e5e7eb); color: var(--gray-600, #4b5563); }
.kb-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--gray-600, #4b5563); cursor: pointer; }
.dark .kb-check { color: var(--gray-300, #d1d5db); }

.kb-board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.kb-col { flex: 0 0 17rem; display: flex; flex-direction: column; max-height: calc(100vh - 14rem); border-radius: .75rem; background: var(--gray-100, #f3f4f6); border-top: 3px solid var(--gray-300, #d1d5db); }
.dark .kb-col { background: rgb(255 255 255 / .04); }
.kb-col.cat-in_progress { border-top-color: var(--primary-500); }
.kb-col.cat-done { border-top-color: var(--success-500, #22c55e); }
.kb-col-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem .4rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600, #4b5563); }
.dark .kb-col-head { color: var(--gray-300, #d1d5db); }
.kb-col-count { font-weight: 500; color: var(--gray-500, #6b7280); }
.kb-list { flex: 1; overflow-y: auto; padding: .25rem .5rem .5rem; display: flex; flex-direction: column; gap: .5rem; min-height: 3.5rem; border-radius: .5rem; transition: background .1s; }
.kb-list.is-over { background: color-mix(in oklab, var(--primary-500) 8%, transparent); }

.kb-card { display: block; background: #fff; border-radius: .5rem; padding: .65rem .75rem; box-shadow: 0 1px 2px rgb(0 0 0 / .08); outline: 1px solid rgb(3 7 18 / .05); color: inherit; text-decoration: none; cursor: grab; }
.dark .kb-card { background: var(--gray-800, #1f2937); outline-color: rgb(255 255 255 / .08); }
.kb-card:hover { outline-color: var(--primary-400); }
.kb-card.is-dragging { opacity: .45; }
.kb-card-title { font-size: .875rem; line-height: 1.35; color: var(--gray-950, #030712); word-break: break-word; }
.dark .kb-card-title { color: #fff; }
.kb-card-hold { display: inline-block; margin-top: .3rem; padding: .05rem .4rem; border-radius: .375rem; font-size: .7rem; font-weight: 600; background: #fef3c7; color: #92400e; }
.kb-card-labels { margin-top: .35rem; }
.kb-card-client { margin-top: .2rem; font-size: .75rem; color: var(--gray-500, #6b7280); }
.kb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; }
.kb-card-meta { display: flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--gray-500, #6b7280); }
.kb-key { font-weight: 500; }
.kb-prio { color: var(--danger-600, #dc2626); font-weight: 700; }
.kb-due.is-late { color: var(--danger-600, #dc2626); font-weight: 600; }
.kb-more { font-size: .75rem; text-align: center; padding: .25rem; }
.kb-more a { color: var(--primary-600); }

.kb-add { padding: 0 .5rem .5rem; }
.kb-add-btn { width: 100%; border: 1px dashed var(--gray-300, #d1d5db); background: transparent; border-radius: .5rem; padding: .3rem; color: var(--gray-500, #6b7280); cursor: pointer; font-size: 1rem; line-height: 1; }
.kb-add-btn:hover { background: #fff; color: var(--primary-600); }
.dark .kb-add-btn:hover { background: rgb(255 255 255 / .05); }
.kb-add textarea { width: 100%; font-size: .875rem; padding: .5rem; border-radius: .5rem; border: 1px solid var(--primary-500); resize: none; background: #fff; color: inherit; }
.dark .kb-add textarea { background: var(--gray-800, #1f2937); }
.kb-add-hint { font-size: .6875rem; color: var(--gray-500, #6b7280); margin-top: .25rem; }

/* ===== filament/widgets/activity-stream.blade.php ===== */
.as-list { list-style: none; margin: 0; padding: 0; }
.as-item { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
.dark .as-item { border-color: rgb(255 255 255 / .06); }
.as-item:last-child { border-bottom: 0; }
.as-avatar { width: 2rem; height: 2rem; border-radius: 9999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 700; color: #fff; }
.as-body { min-width: 0; flex: 1; font-size: .875rem; line-height: 1.4; }
.as-who { font-weight: 600; color: var(--gray-950, #030712); }
.dark .as-who { color: #fff; }
.as-what { color: var(--gray-700, #374151); }
.dark .as-what { color: var(--gray-300, #d1d5db); }
.as-what a { color: inherit; text-decoration: none; }
.as-what a:hover { color: var(--primary-600); text-decoration: underline; }
.as-context { color: var(--gray-500, #6b7280); }
.as-meta { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; font-size: .75rem; color: var(--gray-500, #6b7280); }
.as-more { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-top: .75rem; }
.as-empty { font-size: .875rem; color: var(--gray-500, #6b7280); }

/* ===== filament/widgets/bookmarks.blade.php ===== */
.bm-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.bm-group h3 { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; }
.bm-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; font-size: .875rem; }
.bm-group li { display: flex; align-items: flex-start; gap: .5rem; }
.bm-group a { color: var(--primary-600); text-decoration: none; }
.bm-group a:hover { text-decoration: underline; }
.dark .bm-group a { color: var(--primary-400); }
.bm-key { font-weight: 600; }
.bm-empty { font-size: .875rem; color: var(--gray-500, #6b7280); }

/* ===== filament/widgets/pinned-tickets.blade.php ===== */
.sd-pw-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .625rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-600); }
.dark .sd-pw-head { color: var(--gray-400); }
.sd-pw-head svg { color: var(--primary-600); }
.sd-pw-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.sd-pw-card { position: relative; display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: .75rem .875rem; border-radius: .75rem; background: #fff; box-shadow: 0 0 0 1px rgb(15 23 42 / .07); color: inherit; text-decoration: none; }
.sd-pw-card:hover { box-shadow: 0 0 0 1px var(--primary-300), 0 4px 12px rgb(232 75 15 / .08); }
.dark .sd-pw-card { background: rgb(255 255 255 / .04); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.sd-pw-card.is-done { opacity: .65; }
.sd-pw-top { display: flex; align-items: center; gap: .5rem; padding-right: 1.5rem; }
.sd-pw-dot { flex: none; width: .5rem; height: .5rem; border-radius: 999px; background: #94a3b8; }
.sd-pw-dot.is-busy { background: #0ea5e9; } .sd-pw-dot.is-hold { background: #f59e0b; } .sd-pw-dot.is-done { background: #22c55e; }
.sd-pw-key { font-family: ui-monospace, monospace; font-size: .8125rem; font-weight: 700; color: var(--primary-700); }
.dark .sd-pw-key { color: var(--primary-400); }
.sd-pw-status { margin-left: auto; font-size: .6875rem; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.sd-pw-title { font-size: .875rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-pw-meta { font-size: .75rem; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-pw-x { position: absolute; top: .5rem; right: .5rem; width: 1.5rem; height: 1.5rem; border: 0; border-radius: .375rem; background: none; color: var(--gray-400); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sd-pw-x:hover { color: var(--gray-700); background: var(--gray-100); }

/* ===== livewire/asset-sidebar.blade.php ===== */
.sd-as { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: .75rem; display: flex; flex-direction: column; max-height: calc(100dvh - 9rem); position: sticky; top: 5rem; }
.dark .sd-as { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .08); }
.sd-as-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem .9rem .5rem; font-size: .875rem; color: var(--gray-700); }
.dark .sd-as-head { color: var(--gray-300); }
.sd-as-head a { color: var(--gray-500); display: inline-flex; }
.sd-as-head a:hover { color: var(--primary-600); }
.sd-as-search { padding: 0 .75rem .6rem; display: flex; gap: .4rem; }
.sd-as-search select { height: 2.25rem; padding: 0 1.6rem 0 .5rem; border: 1px solid var(--gray-300); border-radius: .5rem; background-color: #fff; font-size: .75rem; color: var(--gray-700); flex: none; }
.dark .sd-as-search select { background-color: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); color: var(--gray-200); }
.sd-as-search input { width: 100%; height: 2.25rem; padding: 0 .7rem; border: 1px solid var(--gray-300); border-radius: .5rem; background: #fff; font-size: .8125rem; color: var(--gray-900); }
.dark .sd-as-search input { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); color: #fff; }
.sd-as-search input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 20%, transparent); }
.sd-as-list { list-style: none; margin: 0; padding: 0 .6rem .6rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.sd-as-item a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; background: #fff; border: 1px solid var(--gray-200); border-radius: .5rem; font-size: .8125rem; color: var(--gray-800); text-decoration: none; box-shadow: 0 1px 1px rgb(0 0 0 / .03); }
.dark .sd-as-item a { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .08); color: var(--gray-200); }
.sd-as-item a:hover { border-color: var(--primary-300); }
.sd-as-item.is-current a { background: color-mix(in oklab, var(--primary-500) 10%, #fff); border-color: var(--primary-400); color: var(--primary-700); font-weight: 600; }
.dark .sd-as-item.is-current a { background: color-mix(in oklab, var(--primary-500) 18%, transparent); color: var(--primary-300); }
.sd-as-item .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sd-as-item .key { font-size: .6875rem; color: var(--gray-400); font-family: ui-monospace, monospace; }
.sd-as-empty { padding: 1rem; font-size: .8125rem; color: var(--gray-500); text-align: center; }
.sd-as-foot { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-top: 1px solid var(--gray-200); font-size: .75rem; color: var(--gray-600); }
.dark .sd-as-foot { border-color: rgb(255 255 255 / .08); color: var(--gray-400); }
.sd-as-foot button { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .375rem; color: var(--gray-600); }
.sd-as-foot button:hover:not(:disabled) { background: var(--gray-200); }
.sd-as-foot button:disabled { opacity: .35; cursor: default; }
@media (max-width: 1023px) { .sd-as { position: static; max-height: 22rem; } }

/* ===== livewire/pinned-sidebar.blade.php ===== */
.sd-pins { margin: 0 0 1rem; padding: .375rem; border-radius: .75rem; background: rgb(255 255 255 / .05); }
.sd-pins-head { width: 100%; display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border: 0; background: none; cursor: pointer; color: #fdba8c; font: inherit; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sd-pins-head .sd-pins-count { margin-left: auto; color: var(--sd-sidebar-muted, #84a7ac); font-weight: 600; letter-spacing: 0; }
.sd-pins-head .sd-pins-chev { color: var(--sd-sidebar-muted, #84a7ac); transition: transform .15s; }
.sd-pins-row { display: flex; align-items: center; gap: .25rem; min-height: 2.125rem; padding: 0 .125rem 0 .5rem; border-radius: .5rem; color: var(--sd-sidebar-text, #d5e3e5); }
.sd-pins-row:hover { background: rgb(255 255 255 / .06); }
.sd-pins-row.is-current { background: rgb(232 75 15 / .20); color: #fff; }
.sd-pins-row.is-done { opacity: .6; }
.sd-pins-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.sd-pins-dot { flex: none; width: .5rem; height: .5rem; border-radius: 999px; background: #94a3b8; }
.sd-pins-dot.is-busy { background: #38bdf8; } .sd-pins-dot.is-hold { background: #fbbf24; } .sd-pins-dot.is-done { background: #4ade80; }
.sd-pins-key { flex: none; font-family: ui-monospace, monospace; font-size: .75rem; font-weight: 700; color: #fdba8c; }
.sd-pins-title { flex: 1; min-width: 0; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-pins-x { flex: none; width: 1.625rem; height: 1.625rem; border: 0; border-radius: .375rem; background: none; color: var(--sd-sidebar-muted, #84a7ac); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; }
.sd-pins-row:hover .sd-pins-x, .sd-pins-x:focus-visible { opacity: 1; }
.sd-pins-x:hover { color: #fff; background: rgb(255 255 255 / .08); }
.sd-pins-empty { display: block; padding: .25rem .5rem .5rem; font-size: .75rem; line-height: 1.5; color: var(--sd-sidebar-muted, #84a7ac); }

/* ===== livewire/quick-search.blade.php ===== */
.qs { --qs-card: #fff; --qs-line: #e2e8f0; --qs-soft: #f8fafb; --qs-text: #0f172a; --qs-muted: #64748b; --qs-label: #475569; --qs-key: #1a5c67; }
.dark .qs { --qs-card: var(--gray-900); --qs-line: rgb(255 255 255 / .1); --qs-soft: rgb(255 255 255 / .03); --qs-text: var(--gray-100); --qs-muted: var(--gray-400); --qs-label: var(--gray-300); --qs-key: #7db5be; }
.qs-backdrop { position: fixed; inset: 0; z-index: 60; background: rgb(5 30 36 / .5); }
.qs-dialog { position: fixed; z-index: 61; top: 3rem; left: 50%; transform: translateX(-50%); width: min(67.5rem, calc(100vw - 2rem)); height: min(47.75rem, calc(100vh - 6rem)); background: var(--qs-card); color: var(--qs-text); border-radius: 1rem; box-shadow: 0 24px 60px rgb(2 31 36 / .35); display: flex; flex-direction: column; overflow: hidden; font-size: .875rem; }
@media (max-width: 40rem) { .qs-dialog { top: .5rem; height: calc(100vh - 1rem); } }
.qs mark { background: #fde3d3; color: #7c2d12; border-radius: 3px; padding: 0 1px; }
.dark .qs mark { background: rgb(232 75 15 / .3); color: #fed7c3; }
.qs kbd { font-family: ui-monospace, monospace; font-size: .6875rem; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; background: var(--qs-card); color: var(--qs-label); }

.qs-top { display: flex; align-items: center; gap: .875rem; padding: 0 1.5rem; height: 4.5rem; border-bottom: 1px solid var(--qs-line); flex: none; }
.qs-top svg { flex: none; color: var(--primary-600); }
.qs-top input { flex: 1; min-width: 0; border: 0; outline: 0; box-shadow: none; padding: 0; background: transparent; font: inherit; font-size: 1.375rem; font-weight: 500; color: inherit; }
.qs-top input::placeholder { color: var(--qs-muted); font-weight: 400; }
.qs-count { font-size: .8125rem; color: var(--qs-muted); white-space: nowrap; }
.qs-esc { height: 1.875rem; padding: 0 .5rem; border-radius: .375rem; border: 1px solid #cbd5e1; background: var(--qs-card); font: inherit; font-size: .75rem; color: var(--qs-label); cursor: pointer; }

.qs-tabs { display: flex; align-items: center; gap: .375rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--qs-line); flex: none; flex-wrap: wrap; }
.qs-tab { height: 2.125rem; padding: 0 .75rem; border-radius: 999px; font: inherit; font-size: .875rem; font-weight: 600; display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; border: 1px solid var(--qs-line); background: var(--qs-card); color: var(--qs-label); }
.qs-tab span { font-size: .75rem; color: var(--qs-muted); }
.qs-tab.is-empty:not(.is-on) { color: var(--qs-muted); font-weight: 500; border-style: dashed; }
.qs-tab.is-on { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.qs-tab.is-on span { color: #ffe5d4; }
.qs-done { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--qs-label); cursor: pointer; }
.qs-done input { width: 1rem; height: 1rem; accent-color: var(--primary-600); margin: 0; }

.qs-body { flex: 1; display: flex; min-height: 0; }
.qs-list { flex: 1 1 38rem; min-width: 0; overflow-y: auto; padding: .5rem .75rem; display: flex; flex-direction: column; gap: .25rem; border-right: 1px solid var(--qs-line); }
/* Niet laten krimpen: anders schuiven regels met een tekstfragment over elkaar als de lijst scrolt */
.qs-list > * { flex-shrink: 0; }
.qs-group { display: flex; align-items: center; justify-content: space-between; padding: .625rem .75rem .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--qs-label); }
.qs-group a { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--primary-700); text-decoration: none; }
.qs-group a:hover { text-decoration: underline; }
.qs-item { display: flex; align-items: center; gap: .875rem; min-height: 3.25rem; padding: .5rem .75rem; border-radius: .625rem; color: inherit; text-decoration: none; }
.qs-item.is-sel { background: var(--primary-50); box-shadow: inset 0 0 0 1px var(--primary-200); }
.dark .qs-item.is-sel { background: rgb(232 75 15 / .12); box-shadow: inset 0 0 0 1px rgb(232 75 15 / .35); }
.qs-key { flex: none; width: 5.75rem; font-family: ui-monospace, monospace; font-size: .8125rem; font-weight: 700; color: var(--qs-key); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-key.is-kind { font-family: inherit; font-size: .75rem; font-weight: 600; color: var(--qs-label); }
.qs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.qs-title { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-meta { font-size: .8125rem; color: var(--qs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-match { font-size: .75rem; font-style: italic; }
.qs-main mark { background: #fde3d3; color: inherit; border-radius: .2rem; padding: 0 .1rem; }
.dark .qs-main mark { background: rgb(232 75 15 / .3); }
.qs-date { flex: none; width: 4.75rem; text-align: right; font-size: .75rem; color: var(--qs-muted); }
.qs-pill { flex: none; height: 1.5rem; padding: 0 .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.qs-pill-new { background: #e2e8f0; color: #1e293b; }
.qs-pill-busy { background: #d6eaed; color: #05333b; }
.qs-pill-hold { background: #fde3d3; color: #7c2d12; }
.qs-pill-done { background: #dcfce7; color: #14532d; }
.qs-empty { padding: 2.5rem 1rem; text-align: center; color: var(--qs-muted); }
.qs-empty a { color: var(--primary-700); font-weight: 600; }

.qs-preview { flex: 0 0 25rem; background: var(--qs-soft); padding: 1.375rem 1.5rem; overflow-y: auto; }
@media (max-width: 56rem) { .qs-preview { display: none; } .qs-list { border-right: 0; } }
.qs-pv { display: flex; flex-direction: column; gap: 1rem; min-height: 100%; }
.qs-chip { font-family: ui-monospace, monospace; font-size: .8125rem; font-weight: 700; color: var(--qs-key); border: 1px solid #b9dbe0; background: #eef6f7; border-radius: .375rem; padding: 2px 8px; }
.dark .qs-chip { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .15); }
.qs-pv h2 { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; }
.qs-pv dl { margin: 0; display: grid; grid-template-columns: 7.5rem 1fr; row-gap: .5625rem; }
.qs-pv dt { color: var(--qs-muted); }
.qs-pv dd { margin: 0; overflow-wrap: anywhere; }
.qs-pv dd:first-of-type { font-weight: 600; }
.qs-pv dd.is-empty { color: var(--qs-muted); font-weight: 400; }
.qs-note { background: var(--qs-card); border: 1px solid var(--qs-line); border-radius: .625rem; padding: .75rem .875rem; font-size: .8125rem; line-height: 1.5; color: var(--qs-label); }
.qs-note small { display: block; font-size: .75rem; color: var(--qs-muted); margin-bottom: .25rem; }
.qs-actions { margin-top: auto; display: flex; gap: .5rem; }
.qs-btn:not(.qs-btn-primary):hover { border-color: var(--primary-600); color: var(--primary-700); }
.qs-btn { height: 2.625rem; padding: 0 .875rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; border: 1px solid #cbd5e1; color: var(--qs-label); background: var(--qs-card); }
.qs-btn-icon { flex: none; width: 2.625rem; padding: 0; box-sizing: border-box; }
.qs-btn-primary { flex: 1; background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.qs-btn-primary:hover { background: var(--primary-700); }
.qs-btn-primary kbd { background: transparent; color: #fff; border-color: rgb(255 255 255 / .55); }
.qs-btn-accent { border-color: var(--primary-600); color: var(--primary-700); }
.qs-btn:focus-visible, .qs-item:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }

.qs-foot { height: 2.875rem; flex: none; border-top: 1px solid var(--qs-line); display: flex; align-items: center; gap: 1.125rem; padding: 0 1.5rem; font-size: .75rem; color: var(--qs-label); white-space: nowrap; overflow: hidden; }
.qs-foot .qs-tip { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 56rem) { .qs-foot span:not(.qs-tip) { display: none; } .qs-foot .qs-tip { margin-left: 0; } }

/* ===== livewire/ticket-description.blade.php ===== */
.sd-desc { position: relative; }
.sd-desc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.sd-desc-label { font-size: .875rem; font-weight: 500; color: var(--gray-950); }
.dark .sd-desc-label { color: #fff; }
.sd-desc-tools { display: flex; align-items: center; gap: .75rem; }
.sd-desc-view { border-radius: .5rem; padding: .35rem .5rem; margin: 0 -.5rem; cursor: text; transition: background-color .12s, box-shadow .12s; }
.sd-desc-view:hover { background: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-200); }
.dark .sd-desc-view:hover { background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.sd-desc-empty { color: var(--gray-400); font-style: italic; font-size: .875rem; }
.sd-desc-hint { font-size: .75rem; color: var(--gray-400); }
.sd-desc-actions { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.sd-desc-conflict { font-size: .8125rem; color: #b45309; }
/* Tekstkleuren uit de editor (span.color met --color of data-color) ook in de weergave tonen */
.fi-prose span.color, .sd-rich span.color { color: var(--color, inherit); }
.dark .fi-prose span.color, .dark .sd-rich span.color { color: var(--dark-color, var(--color, inherit)); }
.fi-prose span.color[data-color="groen"] { --color: #15803d; --dark-color: #4ade80; }
.fi-prose span.color[data-color="oranje"] { --color: #c2410c; --dark-color: #fb923c; }
.fi-prose span.color[data-color="rood"] { --color: #b91c1c; --dark-color: #f87171; }
.fi-prose span.color[data-color="blauw"] { --color: #1d4ed8; --dark-color: #60a5fa; }
.fi-prose span.color[data-color="grijs"] { --color: #6b7280; --dark-color: #9ca3af; }
.fi-prose mark { background: #fef08a; color: inherit; padding: 0 .1em; border-radius: .15em; }
.dark .fi-prose mark { background: rgb(234 179 8 / .35); }


/* ===== Ticketpagina (ronde 1: voorheen inline styles in TicketResource en ViewTicket) ===== */
/* Algemene hulpclasses */
.sd-muted { color: var(--gray-500); }
.sd-faint { color: var(--gray-400); }
.sd-link { color: var(--primary-600); text-decoration: none; }
.sd-link:hover { text-decoration: underline; }
.dark .sd-link { color: var(--primary-400); }
.sd-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-min0 { min-width: 0; }
.sd-none { flex-shrink: 0; }
.sd-tnum { font-variant-numeric: tabular-nums; }
.sd-chip { flex: none; display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; background: var(--bg, var(--gray-100)); color: var(--fg, var(--gray-700)); }
.sd-avatar { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .5625rem; font-weight: 700; color: #fff; background: var(--c, #94a3b8); }
.sd-avatar-lg { width: 2.25rem; height: 2.25rem; font-size: .75rem; }
/* Balkje: <div class="sd-bar"><span style="--w:40%"></span></div>, kleur via --c op een ouder */
.sd-bar { flex: 1; display: flex; height: .4rem; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.sd-bar > span { height: 100%; width: var(--w, 0); background: var(--c, var(--success-500)); }
.sd-bar > span.is-light { opacity: .4; }
.sd-bar-sm { height: .25rem; background: var(--gray-100); }
.sd-bar-lg { height: .45rem; }
.dark .sd-bar { background: rgb(255 255 255 / .1); }

.sd-t-statuschip { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: .3rem; font-size: .6875rem; font-weight: 600; line-height: 1.35rem; vertical-align: 1px; background: var(--bg); color: var(--fg); }
.sd-t-empty { color: var(--gray-500); font-size: .8125rem; }
.sd-t-more { display: inline-block; margin-top: .4rem; font-size: .8125rem; color: var(--primary-600); }
.sd-t-trashed { color: #b91c1c; font-weight: 600; }

/* Keuzelijsten in Details: zien eruit als tekst, onderstreept bij hover */
.sd-t-select { appearance: auto; border: 0; background: transparent; padding: 0 1.25rem 0 0; margin: 0; font: inherit; font-size: .875rem; color: inherit; cursor: pointer; max-width: 100%; box-shadow: none; }
.sd-t-select:hover { text-decoration: underline; }
.dark .sd-t-select option { background: var(--gray-900); }

/* Melder bovenaan de aanvraag */
.sd-t-requester { display: flex; gap: .75rem; align-items: flex-start; padding: .25rem 0 .75rem; border-bottom: 1px solid rgb(15 31 61 / .08); }
.dark .sd-t-requester { border-color: rgb(255 255 255 / .08); }
.sd-t-requester-text { font-size: .875rem; line-height: 1.45; }
.sd-t-requester-contact { font-size: .8125rem; }
.sd-t-requester-type { margin-top: .2rem; font-size: .8125rem; color: var(--gray-600); }
.dark .sd-t-requester-type { color: var(--gray-400); }

/* Met voorrang: banner op het ticket en label in de lijst */
.sd-t-urgent-banner { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .3rem .65rem; border-radius: .5rem; background: #fff4ed; color: #7c2d12; font-size: .875rem; }
.sd-t-urgent-title { color: #c13a0a; }
.sd-t-overdue { color: #b91c1c; }
.dark .sd-t-urgent-banner { background: rgb(232 75 15 / .15); color: #fed7aa; }
.dark .sd-t-urgent-title { color: #fdba74; }
.sd-t-urgent { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sd-t-urgent-badge { padding: 0 .45rem; border-radius: 999px; background: #e84b0f; color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1.25rem; }
.sd-t-urgent-text { color: #9a3010; }
.dark .sd-t-urgent-text { color: #fdba74; }

/* Primaire asset en het kopje Assets in het formulier */
.sd-t-asset-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.sd-t-asset-name { font-weight: 600; line-height: 1.3; }
.sd-t-asset-key { font-size: .75rem; color: var(--gray-500); }
.sd-t-asset-row { display: flex; gap: .5rem; font-size: .8125rem; line-height: 1.5; }
.sd-t-asset-label { flex-shrink: 0; min-width: 6.5rem; color: var(--gray-500); }
.sd-t-asset-value { min-width: 0; word-break: break-word; }
.sd-t-assets-title { font-size: .875rem; font-weight: 600; }
.sd-t-assets-sub { font-size: .75rem; color: var(--gray-500); }

/* Urencontract */
.sd-t-contract-head { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; font-size: .8125rem; }
.sd-t-contract-left { color: var(--c); }

/* Gekoppelde tickets */
.sd-t-link { display: flex; align-items: flex-start; gap: .5rem; padding: .15rem 0; font-size: .8125rem; line-height: 1.4; }
.sd-t-link-label { flex: none; min-width: 5.5rem; color: var(--gray-500); }
.sd-t-link-ticket { flex: 1; min-width: 0; color: var(--primary-600); }
.dark .sd-t-link-ticket { color: var(--primary-400); }
.sd-t-link-x { padding: 0 .2rem; color: var(--gray-400); }
.sd-t-link-x:hover { color: var(--danger-600); }

/* Subtaken */
.sd-t-sub-progress { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.sd-t-sub-pct { font-size: .75rem; color: var(--gray-500); }
.sd-t-sub { display: flex; align-items: center; gap: .6rem; padding: .4rem .25rem; border-top: 1px solid rgb(15 31 61 / .06); font-size: .875rem; color: inherit; text-decoration: none; }
.sd-t-sub:hover { background: var(--gray-50); }
.dark .sd-t-sub { border-color: rgb(255 255 255 / .06); }
.dark .sd-t-sub:hover { background: rgb(255 255 255 / .03); }
.sd-t-sub-check { flex-shrink: 0; width: 1rem; height: 1rem; border-radius: .25rem; display: inline-flex; align-items: center; justify-content: center; font-size: .6875rem; color: #fff; border: 1.5px solid var(--gray-300); }
.sd-t-sub.is-done .sd-t-sub-check { background: var(--success-500); border-color: var(--success-500); }
.sd-t-sub-key { flex-shrink: 0; font-weight: 500; color: var(--primary-600); }
.sd-t-sub-title { flex: 1; }
.sd-t-sub.is-done .sd-t-sub-title { text-decoration: line-through; color: var(--gray-500); }
.sd-t-sub-who { flex-shrink: 0; font-size: .75rem; color: var(--gray-500); }
.sd-t-sub-time { flex-shrink: 0; min-width: 3rem; text-align: right; font-size: .75rem; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.sd-t-sub-status { flex-shrink: 0; padding: .1rem .45rem; border-radius: .375rem; font-size: .6875rem; font-weight: 600; color: var(--gray-500); background: var(--gray-100); }
.sd-t-sub-status.is-in_progress, .sd-t-sub-status.is-indeterminate { color: var(--primary-600); background: var(--primary-50); }
.sd-t-sub-status.is-done { color: var(--success-600); background: var(--success-50); }
.dark .sd-t-sub-status { background: rgb(255 255 255 / .06); }

/* Uren per persoon en per subtaak */
.sd-t-estimate-line { margin-top: .25rem; font-size: .8125rem; }
.sd-t-person { display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: center; gap: .5rem; padding: .2rem 0; font-size: .8125rem; }
.sd-t-person-sub { font-size: .75rem; color: var(--gray-500); }
.sd-t-person-bar { margin-top: .15rem; }
.sd-t-split { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgb(15 31 61 / .08); font-size: .8125rem; }
.dark .sd-t-split { border-color: rgb(255 255 255 / .08); }
.sd-t-split-row { display: flex; justify-content: space-between; gap: .5rem; padding: .1rem 0; color: inherit; text-decoration: none; }
.sd-t-over { color: var(--danger-600); font-weight: 600; }

/* Bijlagen in het blok rechts */
.sd-t-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .4rem; }
.sd-t-thumbs.has-files { margin-bottom: .75rem; }
.sd-t-thumb { display: block; aspect-ratio: 1; border-radius: .4rem; overflow: hidden; outline: 1px solid rgb(15 31 61 / .1); }
.sd-t-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sd-t-file { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .8125rem; }
.sd-t-file-icon { flex-shrink: 0; color: var(--gray-400); }
.sd-t-file-name { flex: 1; color: var(--primary-600); }
.dark .sd-t-file-name { color: var(--primary-400); }
.sd-t-file-size { flex-shrink: 0; color: var(--gray-500); }
.sd-t-file-dl { flex-shrink: 0; color: var(--gray-400); }

/* Wachtwoordlinks op het ticket */
.sd-t-sl-list { margin-top: -.4rem; }
.sd-t-sl { display: flex; flex-direction: column; gap: .15rem; padding: .4rem 0; border-top: 1px solid var(--gray-100); }
.dark .sd-t-sl { border-color: rgb(255 255 255 / .06); }
.sd-t-sl-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sd-t-sl-label { font-size: .875rem; font-weight: 600; }
.sd-t-sl-meta { font-size: .75rem; color: var(--gray-500); }


/* ===== Assets (ronde 2: voorheen inline styles in AssetFields, AssetObjectResource, ObjectType) ===== */
.sd-icon-label { display: inline-flex; align-items: center; gap: .5rem; }
.sd-indent { display: inline-block; width: 1.25rem; }
.sd-type-icon { display: inline-block; flex-shrink: 0; vertical-align: -3px; object-fit: contain; }
.sd-type-icon.is-default { opacity: .55; }

/* Link naar een asset of relatie: icoon, naam en key op één lijn */
.sd-asset-link { display: inline-flex; align-items: center; flex-wrap: wrap; column-gap: .45rem; row-gap: .1rem; max-width: 100%; vertical-align: middle; }
.sd-asset-link-a { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; line-height: 1.35; color: var(--primary-600); }
.dark .sd-asset-link-a { color: var(--primary-400); }
.sd-asset-link-key { font-size: .75rem; line-height: 1; color: var(--gray-500); }
.sd-asset-inbound { display: flex; flex-direction: column; gap: .45rem; }
.sd-asset-inbound-meta { margin-top: .1rem; padding-left: 1.4rem; font-size: .75rem; color: var(--gray-500); }
.sd-asset-outbound { display: flex; flex-direction: column; gap: .7rem; }
.sd-asset-outbound-label { margin-bottom: .2rem; font-size: .75rem; line-height: 1.2; color: var(--gray-500); }
.sd-asset-outbound-list { display: flex; flex-direction: column; gap: .25rem; }

/* Waarden */
.sd-asset-status { display: inline-block; padding: 0 .45rem; border-radius: .375rem; font-size: .75rem; font-weight: 600; line-height: 1.35rem; background: var(--primary-50); color: var(--primary-700); }
.sd-asset-status.is-plain { line-height: inherit; background: var(--gray-100); color: inherit; }
.dark .sd-asset-status { background: rgb(232 75 15 / .15); color: var(--primary-300); }
.dark .sd-asset-status.is-plain { background: rgb(255 255 255 / .08); color: inherit; }
.sd-asset-tv { display: inline-flex; align-items: center; gap: .2rem; margin-left: .4rem; font-size: .75rem; font-weight: 600; color: var(--primary-600); }

/* Direct aanpassen (dubbelklik) */
.sd-asset-inline { min-height: 1.25rem; cursor: text; }
.sd-asset-inline .is-saving { opacity: .5; }
.sd-asset-input { width: 100%; box-sizing: border-box; padding: .3rem .5rem; border: 1px solid var(--primary-500); border-radius: .375rem; font: inherit; font-size: .875rem; background: transparent; color: inherit; box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 18%, transparent); outline: none; }
.dark .sd-asset-input option { background: var(--gray-900); }
.sd-asset-input-hint { margin-top: .2rem; font-size: .6875rem; color: var(--gray-500); }

/* Geheim veld tonen */
.sd-reveal { display: flex; gap: .5rem; align-items: center; }
.sd-reveal-code { flex: 1; padding: .6rem .75rem; border-radius: .5rem; background: var(--gray-100); font-size: .875rem; word-break: break-all; }
.dark .sd-reveal-code { background: rgb(255 255 255 / .06); }
.sd-reveal-copy { height: 2.25rem; padding: 0 .75rem; border: 1px solid var(--gray-300); border-radius: .5rem; font-size: .8125rem; font-weight: 600; }
.sd-reveal-copy:hover { border-color: var(--primary-400); color: var(--primary-700); }
.sd-reveal-note { margin-top: .5rem; font-size: .75rem; color: var(--gray-500); }
.sd-icon-label.is-heading { gap: .6rem; }


/* ===== Vensters en lijstjes (ronde 3) ===== */
.sd-nowrap { white-space: nowrap; }
.sd-strong { font-weight: 600; }

/* Verwijdervensters (App\Support\DeletePreview en bijlagen) */
.sd-dp-list { list-style: none; margin: .25rem 0 .5rem; padding: 0; max-height: 18rem; overflow-y: auto; text-align: left; }
.sd-dp-row { padding: .4rem 0; border-top: 1px solid var(--gray-100); }
.sd-dp-row.is-file { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.dark .sd-dp-row { border-color: rgb(255 255 255 / .08); }
.sd-dp-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--gray-900); }
.dark .sd-dp-title { color: var(--gray-100); }
.sd-dp-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--gray-500); }
.sd-dp-more { color: var(--gray-500); }
.sd-dp-footer { font-size: .8125rem; }
.sd-dp-footer.is-block, .sd-dp-intro { display: block; text-align: left; }
.sd-dp-facts { margin: .4rem 0 .6rem; padding: .6rem .9rem; border-radius: .5rem; list-style: none; text-align: left; background: #fff7ed; color: #7c2d12; }
.sd-dp-facts li { padding: .1rem 0; }
.dark .sd-dp-facts { background: rgb(232 75 15 / .12); color: #fed7aa; }
.sd-dp-thumb { flex: none; width: 2.25rem; height: 2.25rem; border-radius: .375rem; object-fit: cover; }
.sd-dp-thumb.is-ext { display: inline-flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-500); font-size: .625rem; font-weight: 700; text-transform: uppercase; }
.dark .sd-dp-thumb.is-ext { background: rgb(255 255 255 / .08); }

/* Licenties */
.sd-lic-expires { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.sd-lic-pill { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; background: var(--bg); color: var(--fg); }

/* Wachtwoordlink klaar */
.sd-sl-done { display: flex; flex-direction: column; gap: .75rem; }
.sd-sl-done-row { display: flex; gap: .5rem; }
.sd-sl-done-url { flex: 1; min-width: 0; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--gray-300); border-radius: .5rem; font: inherit; font-size: .8125rem; font-family: ui-monospace, monospace; background: var(--gray-50); }
.dark .sd-sl-done-url { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .15); }
.sd-sl-done-copy { flex: none; height: 2.5rem; padding: 0 1rem; border: 0; border-radius: .5rem; background: var(--primary-600); color: #fff; font-weight: 600; cursor: pointer; }
.sd-sl-done-copy:hover { background: var(--primary-700); }
.sd-sl-done-note { margin: 0; font-size: .8125rem; color: var(--gray-500); }

/* Profiel: vertrouwde apparaten */
.sd-device { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--gray-100); font-size: .8125rem; }
.dark .sd-device { border-color: rgb(255 255 255 / .08); }
.sd-device-current { color: var(--success-600); font-weight: 600; }

/* Kennisbank: Mogelijk handig op een ticket */
.sd-kb-hint { display: flex; gap: .4rem; align-items: baseline; margin-bottom: .25rem; font-size: .8125rem; line-height: 1.45; }
.sd-kb-hint-icon { color: var(--warning-500); }

/* Dashboard: Met voorrang voor jou */
.sd-urgent-head { display: inline-flex; align-items: center; gap: .5rem; color: #7c2d12; }
.dark .sd-urgent-head { color: #fdba74; }
.sd-urgent-count { min-width: 1.4rem; height: 1.4rem; padding: 0 .45rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #e84b0f; color: #fff; font-size: .75rem; font-weight: 700; }
.sd-flex1 { flex: 1; }


/* ===== Views (ronde 4: voorheen inline styles in de Blade-views) ===== */
.sd-hidden { display: none; }
.sd-contents { display: contents; }
.sd-row-gap { display: flex; align-items: center; gap: .5rem; }
.sd-row-gap.is-wide { gap: .6rem; }
.sd-row-gap.is-wrap { flex-wrap: wrap; }
.sd-icon-label.is-tight { gap: .45rem; }
.sd-icon-1 { width: 1rem; height: 1rem; }
.sd-c-primary { color: var(--primary-600); }
.sd-c-warning { color: #b45309; }
.sd-c-danger { color: var(--danger-600); }
.sd-c-success { color: var(--success-600); }
.dark .sd-c-primary { color: var(--primary-400); }
.dark .sd-c-warning { color: #fbbf24; }
.dark .sd-c-danger { color: var(--danger-400); }
.dark .sd-c-success { color: var(--success-400); }
.sd-topbar-buttons { display: inline-flex; gap: .4rem; margin-inline-end: .5rem; }

/* Versiegeschiedenis (omschrijving en kennisbank) */
.sd-hist { display: flex; flex-direction: column; gap: 1rem; }
.sd-hist-intro { font-size: .8125rem; color: var(--gray-500); }
.sd-hist-item { border: 1px solid var(--gray-200); border-radius: .75rem; overflow: hidden; }
.sd-hist-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .85rem; background: var(--gray-50); font-size: .8125rem; }
.sd-hist-body { padding: .75rem .85rem; max-height: 18rem; overflow: auto; font-size: .875rem; }
.dark .sd-hist-item { border-color: rgb(255 255 255 / .1); }
.dark .sd-hist-head { background: rgb(255 255 255 / .05); }

/* Wie kijkt mee op een ticket */
.sd-presence { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .85rem; border-radius: .75rem; font-size: .8125rem; background: rgb(224 242 254); color: #075985; }
.sd-presence.is-editing { background: rgb(254 243 199); color: #92400e; }
.dark .sd-presence { background: rgb(14 165 233 / .15); color: #bae6fd; }
.dark .sd-presence.is-editing { background: rgb(245 158 11 / .15); color: #fde68a; }
.sd-presence-people { display: inline-flex; }
.sd-presence-avatar { font-size: .625rem; outline: 2px solid #fff; }
.sd-presence-avatar + .sd-presence-avatar { margin-left: -.35rem; }
.dark .sd-presence-avatar { outline-color: var(--gray-900); }

/* Monitor: vergelijken */
.sd-mc { display: grid; gap: .75rem; }
.sd-mc-error { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: .5rem; background: #fef2f2; color: #991b1b; font-size: .875rem; }
.dark .sd-mc-error { background: rgb(239 68 68 / .12); color: #fecaca; }
.sd-mc-summary { font-size: .875rem; }
.sd-mc-changed { color: #b45309; }
.sd-mc-err { color: #b91c1c; }
.dark .sd-mc-changed { color: #fbbf24; } .dark .sd-mc-err { color: #fca5a5; }
.sd-mc-shots { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.sd-mc-shots.is-pair { grid-template-columns: 1fr 1fr; }
@media (max-width: 52rem) { .sd-mc-shots.is-pair { grid-template-columns: 1fr; } }
.sd-mc-fig { margin: 0; }
.sd-mc-cap { margin-bottom: .35rem; font-size: .75rem; color: var(--gray-500); }
.sd-mc-cap-title { color: inherit; }
.sd-mc-shot { display: block; max-height: 70vh; overflow: auto; border-radius: .5rem; outline: 1px solid rgb(0 0 0 / .1); }
.sd-mc-shot img { display: block; width: 100%; }

/* Monitor en projecten: zoekveld, legenda */
.mo-search { flex: 0 1 18rem; }
.mo-empty { font-size: .875rem; color: var(--gray-500); }
.pjo-search { flex: 1 1 14rem; max-width: 22rem; }
.pjo-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; }
.pj-dot.is-high { background: var(--danger-500); }
.pj-dot.is-medium { background: var(--warning-400); }
.pj-dot.is-low { background: var(--gray-300); }
.pj-group-title { margin: 1rem 0 .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.pj-group-title.is-first { margin-top: 0; }

/* Assets */
.ap { display: grid; gap: 1.25rem; }
.sd-ap-name { font-size: .875rem; }
.sd-ap-list.is-loading { opacity: .6; }

/* Logboek: wijzigingen */
.ac { display: grid; gap: 1rem; font-size: .875rem; }
.ac-fields { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .35rem 1rem; padding: .65rem .85rem; }
.ac-value { min-width: 0; overflow-wrap: anywhere; }

/* Urenoverzicht */
.ts-loading { font-size: .8125rem; color: var(--gray-500); }
.ts-hlabel.is-total { text-align: right; padding-right: 12px; }
.ts-label.is-ticket { padding-left: 40px; }
.ts-key { flex-shrink: 0; font-weight: 600; color: var(--primary-600); }
.dark .ts-key { color: var(--primary-400); }
.ts-sum.is-ticket { font-weight: 600; }
.ts-under-word { color: var(--warning-600); font-weight: 600; }

/* Pinnen */
.sd-pins-chev.is-closed { transform: rotate(-90deg); }
.sd-pw-item { position: relative; min-width: 0; }

/* Klantkiezer: lijst onder het zoekveld, ook in donkere modus */
.sd-client-pick, .sd-client-pick-box { overflow: visible; }
.sd-client-pick-list .sd-client-pick-clear { position: sticky; bottom: 0; background: inherit; }
.dark .sd-client-pick-list { box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.dark .sd-client-pick-list button.is-sel { background: rgb(232 75 15 / .15); color: var(--primary-300); }

/* Ticketlijst: tickets van een collega bekijken */
.sd-viewing { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .25rem; padding: .6rem .85rem; border-radius: .625rem; background: #e0f2fe; color: #075985; font-size: .875rem; }
.sd-viewing-back { flex: none; padding: .3rem .75rem; border: 1px solid #7dd3fc; border-radius: .5rem; background: #fff; color: #075985; font-size: .8125rem; font-weight: 600; }
.sd-viewing-back:hover { background: #f0f9ff; }
.dark .sd-viewing { background: rgb(14 165 233 / .15); color: #bae6fd; }
.dark .sd-viewing-back { background: transparent; border-color: rgb(125 211 252 / .4); color: #bae6fd; }

/* Uren-timer bovenaan */
.sd-timer { height: 2.125rem; padding: 0 .3rem 0 .75rem; border-radius: 999px; background: #fff4ed; border: 1px solid #fec7a8; display: inline-flex; align-items: center; gap: .55rem; font-size: .8125rem; }
.sd-timer-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #e84b0f; animation: sd-timer-pulse 1.6s ease-in-out infinite; }
@keyframes sd-timer-pulse { 50% { opacity: .35; } }
.sd-timer-key { font-weight: 700; color: #c13a0a; }
.sd-timer-clock { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gray-900); }
.sd-timer-stop { width: 1.625rem; height: 1.625rem; border-radius: 999px; background: #e84b0f; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sd-timer-stop:hover { background: #c13a0a; }
.dark .sd-timer { background: rgb(232 75 15 / .15); border-color: rgb(232 75 15 / .4); }
.dark .sd-timer-key { color: #fdba74; } .dark .sd-timer-clock { color: #fff; }
@media (max-width: 640px) { .sd-timer-key { display: none; } }

/* Klantoverzicht bovenaan de relatiepagina */
.sd-co { display: flex; flex-direction: column; gap: 1rem; }
.sd-co-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .875rem; }
@media (max-width: 64rem) { .sd-co-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sd-co-stat, .sd-co-card { background: #fff; border-radius: .75rem; box-shadow: 0 0 0 1px rgb(15 23 42 / .06); }
.dark .sd-co-stat, .dark .sd-co-card { background: var(--gray-900); box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
.sd-co-stat { display: flex; flex-direction: column; gap: .3rem; padding: .875rem 1rem; }
.sd-co-stat strong { font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sd-co-label { font-size: .8125rem; color: var(--gray-500); }
.sd-co-sub { font-size: .75rem; color: var(--gray-500); }
.sd-co-sub.is-accent { color: #c13a0a; font-weight: 600; }
.sd-co-sub.is-warning { color: #b45309; font-weight: 600; }
.sd-co-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .sd-co-grid { grid-template-columns: 1fr; } }
.sd-co-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sd-co-card { padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: .35rem; }
.sd-co-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.sd-co-head strong { font-size: .9375rem; color: var(--sd-sidebar, #05333b); }
.dark .sd-co-head strong { color: var(--gray-100); }
.sd-co-more { font-size: .8125rem; font-weight: 600; }
.sd-co-ticket { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto 8rem; gap: .75rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--gray-100); font-size: .875rem; color: inherit; }
.sd-co-ticket:hover .sd-co-title { color: var(--primary-600); }
.dark .sd-co-ticket { border-color: rgb(255 255 255 / .06); }
.sd-co-key { font-weight: 700; color: var(--primary-600); }
.sd-co-status { font-size: .75rem; border: 1px solid var(--gray-200); border-radius: .375rem; padding: .1rem .4rem; white-space: nowrap; }
.sd-co-who { font-size: .8125rem; color: var(--gray-500); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-co-title .sd-t-urgent-badge { margin-left: .35rem; }
.sd-co-row { display: flex; align-items: center; gap: .6rem; font-size: .875rem; min-width: 0; padding: .15rem 0; }
.sd-co-right, .sd-co-note { margin-left: auto; flex: none; }
.sd-co-note { font-size: .75rem; color: var(--gray-500); }
.sd-co-plain { color: inherit; }
.sd-co-plain:hover { color: var(--primary-600); }
.sd-co-dot { flex: none; width: .5625rem; height: .5625rem; border-radius: 999px; background: var(--gray-300); }
.sd-co-dot.is-ok { background: #16a34a; } .sd-co-dot.is-warning { background: #d97706; } .sd-co-dot.is-error { background: #dc2626; }
.sd-co-sl { font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--gray-100); color: var(--gray-600); }
.sd-co-sl.is-open { background: #fff4ed; color: #9a3412; }
.sd-co-sl.is-opened { background: #ecfdf5; color: #047857; }
.sd-co-empty { margin: 0; font-size: .8125rem; color: var(--gray-500); }
.sd-co-foot { margin-top: .5rem; padding-top: .6rem; border-top: 1px solid var(--gray-100); font-size: .8125rem; color: var(--gray-500); }
.sd-paused { opacity: .55; }

/* Relatie bekijken: soort en actief onder de naam */
.sd-client-meta { display: inline-flex; align-items: center; gap: .5rem; }
.sd-client-type { padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--gray-100); color: var(--gray-700); }
.sd-client-type.is-klant { background: #dcfce7; color: #166534; }
.sd-client-type.is-leverancier { background: #e0f2fe; color: #075985; }
.sd-client-type.is-partner { background: #fef3c7; color: #92400e; }
.sd-client-inactive { font-size: .75rem; font-weight: 600; color: var(--gray-500); }
.dark .sd-client-type { background: rgb(255 255 255 / .08); color: var(--gray-200); }

/* Facturatie: snelweergave rechts */
.sd-fx-peeked > td { background: #fff4ed !important; }
.sd-fx-peeked > td:first-child { box-shadow: inset 3px 0 0 #e84b0f; }
.dark .sd-fx-peeked > td { background: rgb(232 75 15 / .12) !important; }
.sd-fx-peek { position: fixed; z-index: 40; top: 4rem; right: 0; bottom: 0; width: min(30rem, 100vw); display: flex; flex-direction: column; background: #fff; box-shadow: -18px 0 40px rgb(5 51 59 / .16); }
.dark .sd-fx-peek { background: var(--gray-900); box-shadow: -18px 0 40px rgb(0 0 0 / .5); }
.sd-fx-peek-head { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.25rem .85rem; border-bottom: 1px solid var(--gray-100); }
.sd-fx-peek-key { font-family: ui-monospace, monospace; font-size: .8125rem; font-weight: 700; color: #1a5c67; border: 1px solid #b9dbe0; background: #eef6f7; border-radius: .375rem; padding: .1rem .5rem; }
.sd-fx-peek-nav { margin-left: auto; display: flex; gap: .25rem; }
.sd-fx-peek-nav button { width: 2rem; height: 2rem; border: 1px solid var(--gray-200); border-radius: .5rem; background: transparent; cursor: pointer; }
.sd-fx-peek-nav button:hover { border-color: var(--primary-400); color: var(--primary-700); }
.sd-fx-peek-nav button.is-close { border: 0; background: var(--gray-100); }
.sd-fx-peek-title { font-size: 1.0625rem; line-height: 1.3; }
.sd-fx-peek-body { flex: 1; overflow: auto; padding: .9rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.sd-fx-peek-block { display: flex; flex-direction: column; gap: .35rem; }
.sd-fx-peek-label { display: flex; justify-content: space-between; gap: .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.sd-fx-peek-text { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--gray-700); }
.dark .sd-fx-peek-text { color: var(--gray-300); }
.sd-fx-entry { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) 3.25rem; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--gray-100); font-size: .8125rem; }
.sd-fx-entry > strong { text-align: right; }
.sd-fx-entry.is-outside { opacity: .5; }
.sd-fx-entry-text { display: block; color: var(--gray-600); }
.dark .sd-fx-entry, .dark .sd-fx-peek-head { border-color: rgb(255 255 255 / .08); }
.sd-fx-peek-foot { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px solid var(--gray-100); background: var(--gray-50); }
.dark .sd-fx-peek-foot { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .08); }
.sd-fx-peek-open { margin-left: auto; font-size: .875rem; }

/* Facturatie snelweergave: klant */
.sd-fx-peek-client { display: flex; align-items: flex-start; gap: .6rem; padding: .35rem .6rem; border-radius: .5rem; background: var(--gray-50); font-size: .875rem; }
.sd-fx-peek-client.is-missing { background: #fff7ed; box-shadow: inset 0 0 0 1px #fed7aa; }
.dark .sd-fx-peek-client { background: rgb(255 255 255 / .04); }
.dark .sd-fx-peek-client.is-missing { background: rgb(232 75 15 / .12); box-shadow: inset 0 0 0 1px rgb(232 75 15 / .35); }
.sd-fx-peek-client-label { flex: none; padding-top: .1rem; font-size: .75rem; font-weight: 700; color: var(--gray-500); }
.sd-fx-peek-client-hint { flex: none; padding-top: .15rem; font-size: .75rem; color: #b45309; }

/* ===== UptimeRobot: storingen bovenaan het dashboard (UptimeAlerts) ===== */
.sd-up-alerts.is-empty { display: none; }   /* geen lege rij in het raster; verversen gaat gewoon door */
.sd-up-box { border-radius: .875rem; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #fecaca, 0 6px 18px rgb(220 38 38 / .08); }
.dark .sd-up-box { background: rgb(255 255 255 / .04); box-shadow: 0 0 0 2px rgb(220 38 38 / .45); }
.sd-up-head { display: flex; align-items: center; gap: .625rem; padding: .75rem 1.25rem; background: #fef2f2; border-bottom: 1px solid #fee2e2; color: #7f1d1d; }
.dark .sd-up-head { background: rgb(220 38 38 / .14); border-color: rgb(220 38 38 / .25); color: #fecaca; }
.sd-up-head strong { font-size: 1rem; }
.sd-up-via { font-size: .75rem; color: #991b1b; }
.dark .sd-up-via { color: #fca5a5; }
.sd-up-pulse { width: .625rem; height: .625rem; border-radius: 999px; background: #dc2626; box-shadow: 0 0 0 4px rgb(220 38 38 / .18); animation: sd-up-pulse 1.6s ease-in-out infinite; }
@keyframes sd-up-pulse { 50% { box-shadow: 0 0 0 7px rgb(220 38 38 / .05); } }
@media (prefers-reduced-motion: reduce) { .sd-up-pulse { animation: none; } }
.sd-up-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .875rem 1.25rem; }
.sd-up-row + .sd-up-row { border-top: 1px solid var(--gray-100); }
.dark .sd-up-row + .sd-up-row { border-color: rgb(255 255 255 / .08); }
.sd-up-main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.sd-up-line { display: flex; align-items: center; flex-wrap: wrap; gap: .625rem; }
.sd-up-site { font-size: .9375rem; font-weight: 700; color: inherit; text-decoration: none; }
.sd-up-site:hover { text-decoration: underline; }
.sd-up-badge { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .5rem; border-radius: 999px; background: #fee2e2; color: #991b1b; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.dark .sd-up-badge { background: rgb(220 38 38 / .2); color: #fecaca; }
.sd-up-ticket { font-size: .8125rem; font-weight: 700; color: var(--primary-700); }
.dark .sd-up-ticket { color: var(--primary-400); }
.sd-up-meta { font-size: .8125rem; color: var(--gray-600); }
.dark .sd-up-meta { color: var(--gray-300); }
.sd-up-meta a { color: var(--primary-700); }
.dark .sd-up-meta a { color: var(--primary-400); }
.sd-up-note { font-size: .75rem; color: var(--gray-500); }
.sd-up-actions { display: flex; gap: .5rem; }
@media (max-width: 640px) { .sd-up-row { grid-template-columns: 1fr; } }

/* ===== Rechterkolom: Helpdesk per medewerker + Uptime (DashboardSideColumn / UptimeOverview) ===== */
.sd-side-col { display: flex; flex-direction: column; gap: 1.5rem; }
.sd-uo-src { font-size: .75rem; color: var(--gray-500); }
.sd-uo-stats { display: flex; gap: .5rem; margin-bottom: .75rem; }
.sd-uo-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: .5rem .625rem; border-radius: .5rem; background: var(--gray-50); }
.dark .sd-uo-stat { background: rgb(255 255 255 / .05); }
.sd-uo-stat strong { font-size: 1.125rem; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-uo-stat span { font-size: .75rem; color: var(--gray-500); }
.sd-uo-stat.is-ok { background: #f0fdf4; } .sd-uo-stat.is-ok strong, .sd-uo-stat.is-ok span { color: #15803d; }
.sd-uo-stat.is-down { background: #fef2f2; } .sd-uo-stat.is-down strong, .sd-uo-stat.is-down span { color: #b91c1c; }
.dark .sd-uo-stat.is-ok { background: rgb(22 163 74 / .14); } .dark .sd-uo-stat.is-ok strong, .dark .sd-uo-stat.is-ok span { color: #86efac; }
.dark .sd-uo-stat.is-down { background: rgb(220 38 38 / .16); } .dark .sd-uo-stat.is-down strong, .dark .sd-uo-stat.is-down span { color: #fca5a5; }
.sd-uo-empty { margin: 0; font-size: .8125rem; color: var(--gray-500); }
.sd-uo-list { list-style: none; margin: 0; padding: 0; }
.sd-uo-item { display: grid; grid-template-columns: .625rem minmax(0, 1fr) auto; gap: .625rem; align-items: center; padding: .375rem 0; border-top: 1px solid var(--gray-100); font-size: .8125rem; }
.dark .sd-uo-item { border-color: rgb(255 255 255 / .08); }
.sd-uo-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #94a3b8; }
.sd-uo-dot.is-down { background: #dc2626; } .sd-uo-dot.is-up { background: #16a34a; }
.sd-uo-body { display: flex; flex-direction: column; min-width: 0; }
.sd-uo-site { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-uo-text { font-size: .75rem; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-uo-when { font-size: .75rem; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.sd-up-account { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .5rem; border-radius: .375rem; background: var(--gray-100); color: var(--gray-600); font-size: .6875rem; font-weight: 600; }
.dark .sd-up-account { background: rgb(255 255 255 / .08); color: var(--gray-300); }
.sd-uo-warn { margin: 0 0 .5rem; padding: .375rem .5rem; border-radius: .375rem; background: #fffbeb; color: #92400e; font-size: .75rem; }
.dark .sd-uo-warn { background: rgb(245 158 11 / .12); color: #fcd34d; }

/* ===== Mobiele weergave (/m): resources/views/mobile/layout.blade.php en livewire/mobile/* ===== */
.sd-m {
    --sd-m-top-h: 3.25rem;
    --sd-m-tabs-h: 3.75rem;
    --sd-m-card: #fff;
    --sd-m-line: var(--gray-200);
    --sd-m-text-2: var(--gray-600);
    min-height: 100dvh;
    color: #1e293b;
    -webkit-tap-highlight-color: transparent;
}
.dark .sd-m { --sd-m-card: rgb(255 255 255 / .04); --sd-m-line: rgb(255 255 255 / .1); --sd-m-text-2: var(--gray-400); color: var(--gray-100); }
.sd-m-ic { width: 1.375rem; height: 1.375rem; flex: none; }
.sd-m-muted { color: var(--gray-400); }

/* Kop */
.sd-m-top {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: .5rem;
    height: calc(var(--sd-m-top-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) .5rem 0;
    background: var(--sd-petrol); color: #fff;
    border-bottom: 2px solid var(--sd-orange);
}
.sd-m-brand, .sd-m-top-back, .sd-m-top-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; color: inherit; border-radius: .625rem; }
.sd-m-top-back:active, .sd-m-top-btn:active { background: rgb(255 255 255 / .12); }
.sd-m-logo { height: 1.5rem; width: auto; }
.sd-m-top-title { flex: 1; min-width: 0; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inhoud en tabbalk */
.sd-m-main { padding: .875rem 1rem calc(var(--sd-m-tabs-h) + env(safe-area-inset-bottom) + 1.5rem); max-width: 40rem; margin: 0 auto; }
.sd-m-tabs {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(var(--sd-m-tabs-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--sd-m-card); border-top: 1px solid var(--sd-m-line);
    box-shadow: 0 -4px 16px rgb(5 51 59 / .06);
}
.dark .sd-m-tabs { background: var(--gray-900); }
.sd-m-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; font-size: .6875rem; font-weight: 600; color: var(--gray-500); text-decoration: none; }
.sd-m-tab.is-active { color: var(--primary-600); }
.dark .sd-m-tab.is-active { color: var(--primary-400); }
.sd-m-tab.is-active::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--sd-orange); }
.sd-m-badge { position: absolute; top: .375rem; left: calc(50% + .375rem); min-width: 1.125rem; height: 1.125rem; padding: 0 .3rem; border-radius: 999px; background: var(--sd-orange); color: #fff; font-size: .625rem; font-weight: 700; line-height: 1.125rem; text-align: center; }
.sd-m-badge.is-red { background: #dc2626; }

/* Blokken */
.sd-m-page { display: flex; flex-direction: column; gap: 1rem; }
.sd-m-section { display: flex; flex-direction: column; gap: .5rem; }
.sd-m-h { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 0; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sd-petrol); }
.dark .sd-m-h { color: var(--gray-300); }
.sd-m-h.is-urgent { color: #c13a0a; }
.sd-m-h-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sd-m-count { font-weight: 600; color: var(--gray-400); letter-spacing: 0; }
.sd-m-empty { margin: 0; padding: .75rem 0; font-size: .875rem; color: var(--sd-m-text-2); }
.sd-m-foot { margin: .5rem 0 0; font-size: .75rem; color: var(--gray-500); text-align: center; }
.sd-m-more { align-self: center; min-height: 2.75rem; padding: 0 1.25rem; border: 1px solid var(--sd-m-line); border-radius: 999px; background: var(--sd-m-card); font-size: .875rem; font-weight: 600; color: var(--primary-700); }
.dark .sd-m-more { color: var(--primary-400); }

/* Melding bovenaan (storing) */
.sd-m-alert { display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; border-radius: .75rem; background: #fef2f2; color: #7f1d1d; box-shadow: 0 0 0 1px #fecaca; text-decoration: none; }
.dark .sd-m-alert { background: rgb(220 38 38 / .14); color: #fecaca; box-shadow: 0 0 0 1px rgb(220 38 38 / .35); }
.sd-m-alert-go { margin-left: auto; }

/* Ticketkaartje */
.sd-m-card { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .875rem; border-radius: .75rem; background: var(--sd-m-card); box-shadow: 0 0 0 1px var(--sd-m-line); color: inherit; text-decoration: none; }
.sd-m-card:active { background: var(--gray-50); }
.dark .sd-m-card:active { background: rgb(255 255 255 / .08); }
.sd-m-card.is-urgent { box-shadow: 0 0 0 2px #fdba74; background: #fff7ed; }
.dark .sd-m-card.is-urgent { background: rgb(232 75 15 / .12); box-shadow: 0 0 0 2px rgb(232 75 15 / .5); }
.sd-m-card-top { display: flex; align-items: center; gap: .375rem; }
.sd-m-card-top .sd-m-status { margin-left: auto; }
.sd-m-card-title { font-weight: 600; font-size: .9375rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-m-card-meta { font-size: .75rem; color: var(--sd-m-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-m-card-note { font-size: .8125rem; color: #9a3412; }
.dark .sd-m-card-note { color: #fdba74; }
.sd-m-urgent { display: flex; flex-direction: column; gap: .375rem; }
.sd-m-urgent-btn { align-self: flex-end; }

/* Labels */
.sd-m-key { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .5rem; border-radius: .375rem; background: var(--sd-petrol); color: #fff; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-m-prio { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .5rem; border-radius: .375rem; background: #fee2e2; color: #991b1b; font-size: .6875rem; font-weight: 700; }
.dark .sd-m-prio { background: rgb(220 38 38 / .2); color: #fecaca; }
.sd-m-status, .sd-m-tag { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; background: var(--gray-100); color: var(--gray-700); }
.dark .sd-m-status, .dark .sd-m-tag { background: rgb(255 255 255 / .08); color: var(--gray-200); }
.sd-m-status.is-busy { background: #ccfbf1; color: #115e59; }
.sd-m-status.is-hold { background: #fef3c7; color: #92400e; }
.sd-m-status.is-done { background: #dcfce7; color: #166534; }
.dark .sd-m-status.is-busy { background: rgb(20 184 166 / .18); color: #5eead4; }
.dark .sd-m-status.is-hold { background: rgb(245 158 11 / .18); color: #fcd34d; }
.dark .sd-m-status.is-done { background: rgb(22 163 74 / .18); color: #86efac; }
.sd-m-tag.is-red { background: #fee2e2; color: #991b1b; }
.sd-m-tag.is-green { background: #dcfce7; color: #166534; }
.sd-m-tag.is-orange { background: #ffedd5; color: #9a3412; }

/* Keuze Open / On hold en tabbladen bij zoeken */
/* Mobiel niet zoomen: geen dubbeltik-zoom; velden op 16px zodat iOS niet inzoomt bij typen */
body.sd-m { touch-action: manipulation; }
.sd-m input, .sd-m textarea, .sd-m select { font-size: max(16px, 1em); }
.sd-m-seg.is-full { display: flex; width: 100%; }
.sd-m-seg.is-full button { flex: 1 1 auto; padding: 0 .5rem; white-space: nowrap; }
.sd-m-seg { display: inline-flex; padding: .1875rem; border-radius: 999px; background: var(--gray-100); }
.dark .sd-m-seg { background: rgb(255 255 255 / .06); }
.sd-m-seg button { min-height: 2.25rem; padding: 0 .875rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--gray-600); }
.sd-m-seg button span, .sd-m-chip span { margin-left: .25rem; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.sd-m-seg button.is-active { background: var(--sd-m-card); color: var(--sd-petrol); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.dark .sd-m-seg button.is-active { background: var(--gray-800); color: #fff; }
.sd-m-chips { display: flex; gap: .375rem; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem .125rem; scrollbar-width: none; }
.sd-m-chips::-webkit-scrollbar { display: none; }
.sd-m-chip { flex: none; min-height: 2.25rem; padding: 0 .875rem; border-radius: 999px; background: var(--sd-m-card); box-shadow: inset 0 0 0 1px var(--sd-m-line); font-size: .8125rem; font-weight: 600; color: var(--gray-700); }
.dark .sd-m-chip { color: var(--gray-200); }
.sd-m-chip.is-active { background: var(--sd-petrol); color: #fff; box-shadow: none; }
.sd-m-chip.is-active span { color: rgb(255 255 255 / .7); }

/* Lijsten (zoekresultaten, subtaken, bijlagen, assets, storingen) */
.sd-m-list { list-style: none; margin: 0; padding: 0; border-radius: .75rem; background: var(--sd-m-card); box-shadow: 0 0 0 1px var(--sd-m-line); overflow: hidden; }
.sd-m-list > li + li { border-top: 1px solid var(--sd-m-line); }
.sd-m-list-row { display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .625rem .875rem; color: inherit; text-decoration: none; }
a.sd-m-list-row:active { background: var(--gray-50); }
.dark a.sd-m-list-row:active { background: rgb(255 255 255 / .08); }
.sd-m-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.sd-m-list-title { font-weight: 600; font-size: .9375rem; line-height: 1.35; overflow-wrap: anywhere; }
.sd-m-list-title mark, .sd-m-list-match mark { background: #fde68a; color: inherit; border-radius: .125rem; }
.dark .sd-m-list-title mark, .dark .sd-m-list-match mark { background: rgb(234 179 8 / .35); }
.sd-m-list-meta { font-size: .75rem; color: var(--sd-m-text-2); overflow-wrap: anywhere; }
.sd-m-list-match { font-size: .75rem; font-style: italic; color: var(--sd-m-text-2); }
.sd-m-list-when { flex: none; font-size: .75rem; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.sd-m-dot { flex: none; width: .625rem; height: .625rem; border-radius: 999px; background: #94a3b8; }
.sd-m-dot.is-busy { background: #0d9488; }
.sd-m-dot.is-hold { background: #f59e0b; }
.sd-m-dot.is-done { background: #16a34a; }

/* Ticketpagina */
.sd-m-t-head { display: flex; flex-direction: column; gap: .375rem; }
.sd-m-t-chips { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; }
.sd-m-t-chips .sd-m-status { max-width: none; }
.sd-m-t-title { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sd-m-t-parent { font-size: .8125rem; color: var(--primary-700); text-decoration: none; }
.dark .sd-m-t-parent { color: var(--primary-400); }
.sd-m-t-urgent { padding: .625rem .875rem; border-radius: .75rem; background: #fff7ed; color: #7c2d12; box-shadow: 0 0 0 1px #fdba74; font-size: .875rem; }
.dark .sd-m-t-urgent { background: rgb(232 75 15 / .12); color: #fed7aa; box-shadow: 0 0 0 1px rgb(232 75 15 / .45); }
.sd-m-t-urgent strong { color: #c13a0a; }
.dark .sd-m-t-urgent strong { color: #fb8a55; }
.sd-m-t-urgent-msg { display: block; margin-top: .25rem; font-style: italic; }
/* Knoppen op het ticket: gelijke tegels naast elkaar, icoon boven de tekst */
.sd-m-t-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); gap: .5rem; }   /* past niet = tweede rij */
.sd-m-t-actions > * { min-width: 0; }
.sd-m-t-actions .fi-btn {
    width: 100%; min-height: 4rem; padding: .625rem .25rem;
    grid-auto-flow: row; justify-items: center; align-content: center; gap: .3rem;
    border-radius: .75rem; font-size: .75rem; font-weight: 600; line-height: 1.1;
}
.sd-m-t-actions .fi-btn .fi-icon { width: 1.375rem; height: 1.375rem; }
.sd-m-t-actions .fi-btn.fi-color-gray { background: var(--sd-m-card); color: var(--gray-700); }
.dark .sd-m-t-actions .fi-btn.fi-color-gray { color: var(--gray-200); }
.sd-m-t-actions .fi-btn.fi-color-gray .fi-icon { color: var(--primary-600); }
.dark .sd-m-t-actions .fi-btn.fi-color-gray .fi-icon { color: var(--primary-400); }
.sd-m-t-facts { margin: 0; padding: .25rem .875rem; border-radius: .75rem; background: var(--sd-m-card); box-shadow: 0 0 0 1px var(--sd-m-line); }
.sd-m-t-facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding: .5rem 0; font-size: .875rem; }
.sd-m-t-facts > div + div { border-top: 1px solid var(--sd-m-line); }
.sd-m-t-facts dt { color: var(--sd-m-text-2); }
.sd-m-t-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.sd-m-t-facts a { color: var(--primary-700); }
.dark .sd-m-t-facts a { color: var(--primary-400); }
.sd-m-t-desc { position: relative; max-height: 11rem; overflow: hidden; padding: .75rem .875rem; border-radius: .75rem; background: var(--sd-m-card); box-shadow: 0 0 0 1px var(--sd-m-line); font-size: .9375rem; overflow-wrap: anywhere; }
.sd-m-t-desc:not(.is-clamped) { max-height: none; }   /* kort, of uitgeklapt: alles tonen */
.sd-m-t-desc.is-clamped::after { content: ''; position: absolute; inset: auto 0 0; height: 2.5rem; border-radius: 0 0 .75rem .75rem; background: linear-gradient(rgb(255 255 255 / 0), #fff); pointer-events: none; }
.dark .sd-m-t-desc.is-clamped::after { background: linear-gradient(transparent, var(--gray-900)); }
.sd-m-t-desc img, .sd-m-comment-body img { max-width: 100%; height: auto; }
.sd-m-t-desc pre, .sd-m-comment-body pre { white-space: pre-wrap; }

/* Reacties */
.sd-m-comment { padding: .625rem .875rem; border-radius: .75rem; background: var(--sd-m-card); box-shadow: 0 0 0 1px var(--sd-m-line); }
.sd-m-comment.is-internal { background: #fffbeb; box-shadow: 0 0 0 1px #fde68a; border-left: 3px solid #fbbf24; }
.dark .sd-m-comment.is-internal { background: rgb(251 191 36 / .08); box-shadow: 0 0 0 1px rgb(251 191 36 / .25); }
.sd-m-comment.is-client { border-left: 3px solid var(--sd-orange); }
.sd-m-comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .5rem; margin-bottom: .25rem; font-size: .8125rem; }
.sd-m-comment-head span:not(.sd-m-tag) { color: var(--gray-500); }
.sd-m-comment-body { font-size: .9375rem; overflow-wrap: anywhere; }

/* Notitie-knop vast onderin, boven de tabbalk */
.sd-m-t-compose { position: fixed; z-index: 25; right: 1rem; bottom: calc(var(--sd-m-tabs-h) + env(safe-area-inset-bottom) + .75rem); }
.sd-m-t-compose .fi-btn { min-height: 3rem; padding-inline: 1.25rem; border-radius: 999px; box-shadow: 0 6px 18px rgb(5 51 59 / .25); }
.sd-m-ticket { padding-bottom: 3.5rem; }

/* Zoeken */
.sd-m-search { position: sticky; top: calc(var(--sd-m-top-h) + env(safe-area-inset-top) + .5rem); z-index: 20; display: flex; align-items: center; gap: .5rem; padding: 0 .875rem; min-height: 3rem; border-radius: .75rem; background: var(--sd-m-card); box-shadow: 0 0 0 1px var(--sd-m-line), 0 4px 12px rgb(5 51 59 / .06); }
.dark .sd-m-search { background: var(--gray-900); }
.sd-m-search-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1rem; color: inherit; outline: none; }
.sd-m-search:focus-within { box-shadow: 0 0 0 2px var(--primary-500); }

/* Monitor en asset */
.sd-m-allgood { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 2rem 1rem; border-radius: .75rem; background: #f0fdf4; color: #166534; text-align: center; }
.dark .sd-m-allgood { background: rgb(22 163 74 / .12); color: #86efac; }
.sd-m-allgood-ic { width: 2.5rem; height: 2.5rem; }
.sd-m-allgood span { font-size: .875rem; }
.sd-m .sd-up-row { grid-template-columns: 1fr; padding: .875rem 1rem; }
.sd-m .sd-up-actions .fi-btn { min-height: 2.5rem; }
.sd-m-asset-facts > div { grid-template-columns: 8.5rem minmax(0, 1fr); }
.sd-m-asset-inbound { padding: .625rem .875rem; border-radius: .75rem; background: var(--sd-m-card); box-shadow: 0 0 0 1px var(--sd-m-line); font-size: .875rem; }

/* Vensters (Status, Doorzetten, Notitie): op de telefoon over de volle breedte */
@media (max-width: 640px) {
    .sd-m .fi-modal-window { max-width: 100% !important; }
}
.sd-m-type-ic { flex: none; display: inline-flex; width: 1.25rem; height: 1.25rem; color: var(--gray-400); }

/* Mobiel: knop Bijlage/Foto (label met verborgen bestandskiezer) en foto's als tegels */
.sd-m-upload {
    position: relative; display: grid; grid-auto-flow: row; justify-items: center; align-content: center; gap: .3rem;
    min-height: 4rem; padding: .625rem .25rem; border-radius: .75rem; cursor: pointer;
    background: var(--sd-m-card); box-shadow: 0 0 0 1px var(--sd-m-line);
    font-size: .75rem; font-weight: 600; line-height: 1.1; color: var(--gray-700); text-align: center;
}
.sd-m-upload:active { background: var(--gray-50); }
.sd-m-upload.is-busy { pointer-events: none; opacity: .75; }
.sd-m-upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sd-m-upload:focus-within { box-shadow: 0 0 0 2px var(--primary-500); }
.sd-m-upload-ic { width: 1.375rem; height: 1.375rem; color: var(--primary-600); }
.sd-m-upload.is-wide { grid-auto-flow: column; justify-content: center; gap: .5rem; min-height: 3rem; margin-top: .5rem; font-size: .9375rem; }
.sd-m-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; }
.sd-m-photo { display: block; aspect-ratio: 1; border-radius: .625rem; overflow: hidden; background: var(--gray-100); box-shadow: 0 0 0 1px var(--sd-m-line); }
.sd-m-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-m-has-fab { padding-bottom: 3.5rem; }   /* ruimte onder de laatste kaart voor de zwevende knop (Nieuw ticket) */

/* Mobiel: paneel van onderen (Status wijzigen op het ticket) */
.sd-m-sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; }
.sd-m-sheet-backdrop { position: absolute; inset: 0; background: rgb(5 51 59 / .45); }
.sd-m-sheet { position: relative; max-height: 80dvh; display: flex; flex-direction: column; border-radius: 1rem 1rem 0 0; background: #fff;
    padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 30px rgb(5 51 59 / .2); }
.sd-m-sheet-in { transition: transform .2s ease-out; }
.sd-m-sheet-from { transform: translateY(100%); }
.sd-m-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1rem .5rem; font-size: 1rem; color: var(--sd-petrol); }
.sd-m-sheet-x { width: 2.75rem; height: 2.75rem; border-radius: 999px; font-size: 1.5rem; line-height: 1; color: var(--gray-500); }
.sd-m-sheet-list { overflow-y: auto; padding: 0 .75rem .75rem; display: flex; flex-direction: column; gap: .375rem; }
.sd-m-sheet-opt { display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: 0 1rem; border-radius: .75rem;
    background: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-200); font-size: 1rem; font-weight: 500; color: #1e293b; text-align: left; }
.sd-m-sheet-opt:active { background: var(--gray-100); }
.sd-m-sheet-opt.is-current { background: #fff7ed; box-shadow: inset 0 0 0 2px #fdba74; font-weight: 700; }
.sd-m-sheet-label { flex: 1; min-width: 0; }
.sd-m-sheet-check { color: var(--primary-600); }
/* Tegel met een eigen omhulsel (Status + paneel): knop vult de hele cel, net als de andere tegels */
.sd-m-tile-wrap { display: grid; min-width: 0; }
.sd-m-tile-wrap > .sd-m-upload { width: 100%; box-sizing: border-box; }

/* Mobiel: pushmeldingen (/m/meldingen) */
.sd-m-push-card { display: flex; flex-direction: column; gap: .75rem; padding: .875rem; border-radius: .75rem; background: var(--sd-m-card); box-shadow: 0 0 0 1px var(--sd-m-line); }
.sd-m-push-status { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--sd-petrol); }
.sd-m-push-help { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--gray-700); }
.sd-m-push-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.sd-m-push-actions .fi-btn { min-height: 2.75rem; }
.sd-m-push-note { padding: .75rem .875rem; border-radius: .75rem; font-size: .875rem; line-height: 1.45; }
.sd-m-push-note.is-warn { background: #fffbeb; color: #92400e; box-shadow: 0 0 0 1px #fde68a; }
.sd-m-push-note code { font-size: .8125rem; }
.sd-m-push-dev { display: flex; align-items: center; gap: .75rem; }
.sd-m-push-remove { width: 2.75rem; height: 2.75rem; border-radius: 999px; font-size: 1.375rem; color: var(--gray-500); }
.sd-m-push-toggle { display: flex; align-items: flex-start; gap: .75rem; min-height: 2.75rem; padding: .5rem 0; border-top: 1px solid var(--sd-m-line); font-size: .9375rem; cursor: pointer; }
.sd-m-push-toggle input { flex: none; width: 1.375rem; height: 1.375rem; margin-top: .1rem; accent-color: var(--sd-orange); }
.sd-m-push-toggle small { font-size: .8125rem; color: var(--sd-m-text-2); }
/* Mobiel: knoppen bovenin de assetpagina (Foto of bestand · Nieuw ticket) */
.sd-m-asset-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .5rem; }
.sd-m-asset-actions > .sd-m-upload.is-wide { margin-top: 0; width: 100%; box-sizing: border-box; }

/* Video-bijlagen (x-sd-video): tegel met afspeelknop, afspelen in een venster over de pagina */
.sd-video { position: relative; padding: 0; }
.sd-video-tile { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #0f1f3d; cursor: pointer; }
.sd-video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sd-video-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; }
.sd-video-play svg { margin-left: 2px; }
.sd-video-tile:hover .sd-video-play { background: var(--sd-petrol, #05333b); }
.sd-video-lb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / .8); }
.sd-video-lb-box { display: flex; flex-direction: column; gap: .5rem; width: min(64rem, 100%); max-height: 100%; }
.sd-video-lb-bar { display: flex; align-items: center; gap: .75rem; color: #fff; font-size: .875rem; }
.sd-video-lb-bar > span { flex: 1; min-width: 0; }
.sd-video-lb-btn { flex: none; padding: .375rem .75rem; border-radius: .5rem; background: rgb(255 255 255 / .12); color: #fff; font-weight: 600; }
.sd-video-lb-btn:hover { background: rgb(255 255 255 / .22); }
.sd-video-lb-video { width: 100%; max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); border-radius: .5rem; background: #000; }

/* Sleepvak onderaan handleiding/kennisbank (AcceptsDroppedAttachments) */
.sd-drop-footer .sd-drop-zone { margin-top: 1rem; }

/* Verborgen gegevens op een ticket */
.sd-hidden-dots { letter-spacing: .15em; color: var(--gray-500); }
.sd-reveal-block { align-items: flex-start; }
.sd-hidden-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height: 50vh; overflow: auto; }