/* ==========================================================================

   HECTOR ATELIER OS - SLEUTEL SCHERM & BOODSCHAPPENLIJST

   Volledig interactief werkplaatsscherm met Aanhaalmomenten (Nm),

   Bouten & Moeren specificaties en live Boodschappen-/Bestellijst.

   ========================================================================== */



:root {

    --sl-bg: #07090e;

    --sl-surface: #0e121b;

    --sl-card: #141a27;

    --sl-card-hover: #1b2334;

    --sl-border: rgba(255, 255, 255, 0.08);

    --sl-border-accent: rgba(197, 160, 89, 0.35);

    --sl-accent: #c5a059;

    --sl-accent-bright: #dfba74;

    --sl-accent-glow: rgba(197, 160, 89, 0.25);

    --sl-text: #f3f4f6;

    --sl-text-muted: #94a3b8;

    --sl-success: #10b981;

    --sl-warning: #f59e0b;

    --sl-danger: #ef4444;

    --sl-info: #38bdf8;

    --sl-font-mono: 'JetBrains Mono', monospace;

    --sl-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    --sl-font-serif: 'Cinzel', Georgia, serif;

}



/* --- KNOP IN DE PROJECTEN PAGINA (Trigger) --- */

.btn-open-sleutel-modal {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 13px 22px;

    background: #0f172a;

    color: #f8fafc;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    border-radius: 4px;

    border: 1.5px solid rgba(197, 160, 89, 0.5);

    cursor: pointer;

    font-family: var(--sl-font-sans);

    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);

    position: relative;

    overflow: hidden;

}



.btn-open-sleutel-modal::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.2), transparent);

    transition: left 0.6s ease;

}



.btn-open-sleutel-modal:hover::before {

    left: 100%;

}



.btn-open-sleutel-modal:hover {

    background: #c5a059;

    color: #09090b;

    border-color: #dfba74;

    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.35);

    transform: translateY(-2px);

}



.btn-open-sleutel-modal i {

    color: var(--sl-accent);

    transition: transform 0.3s ease, color 0.3s ease;

}



.btn-open-sleutel-modal:hover i {

    color: #09090b;

    transform: rotate(45deg);

}



/* Grote trigger in filterbalk */

.btn-sleutel-filterbar {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    background: linear-gradient(135deg, #10141f, #1e2638);

    color: #ffffff;

    font-size: 0.74rem;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    border-radius: 999px;

    border: 1px solid rgba(197, 160, 89, 0.45);

    cursor: pointer;

    font-family: var(--sl-font-sans);

    transition: all 0.25s ease;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);

}



.btn-sleutel-filterbar:hover {

    background: #c5a059;

    color: #0b0f17;

    border-color: #c5a059;

    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.4);

    transform: translateY(-1px);

}



.btn-sleutel-filterbar .sleutel-pulse-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #10b981;

    box-shadow: 0 0 10px #10b981;

    animation: pulseDot 2s infinite;

}



@keyframes pulseDot {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.4; transform: scale(0.85); }

}



/* --- HET SLEUTEL SCHERM OVERLAY / MODAL --- */

.sleutel-overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(4, 6, 10, 0.88);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    z-index: 10000;

    display: none;

    opacity: 0;

    align-items: center;

    justify-content: center;

    padding: 20px;

    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.sleutel-overlay.active {

    display: flex;

    opacity: 1;

}



.sleutel-modal-window {

    width: 100%;

    max-width: 1320px;

    height: 92vh;

    background: var(--sl-bg);

    border: 1px solid var(--sl-border-accent);

    border-radius: 16px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(197, 160, 89, 0.12);

    overflow: hidden;

    position: relative;

    color: var(--sl-text);

    font-family: var(--sl-font-sans);

}



.sleutel-modal-window.fullscreen {

    max-width: 100vw;

    height: 100vh;

    border-radius: 0;

    border: none;

}



/* --- HEADER VAN SLEUTEL SCHERM --- */

.sleutel-header {

    background: linear-gradient(180deg, #141a27 0%, #0e121b 100%);

    border-bottom: 1px solid var(--sl-border);

    padding: 16px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

    flex-shrink: 0;

}



.sleutel-header-left {

    display: flex;

    align-items: center;

    gap: 16px;

}



.sleutel-brand-pill {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 12px;

    background: rgba(197, 160, 89, 0.12);

    border: 1px solid rgba(197, 160, 89, 0.35);

    border-radius: 6px;

    color: var(--sl-accent-bright);

    font-family: var(--sl-font-mono);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}



.sleutel-header-titles h2 {

    font-family: var(--sl-font-serif);

    font-size: 1.25rem;

    color: #ffffff;

    letter-spacing: 1px;

    margin: 0;

    display: flex;

    align-items: center;

    gap: 10px;

}



.sleutel-header-titles p {

    font-size: 0.76rem;

    color: var(--sl-text-muted);

    margin: 2px 0 0 0;

}



.sleutel-header-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}



.sleutel-icon-btn {

    width: 38px;

    height: 38px;

    border-radius: 8px;

    background: var(--sl-card);

    border: 1px solid var(--sl-border);

    color: var(--sl-text-muted);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 0.95rem;

}



.sleutel-icon-btn:hover {

    background: var(--sl-card-hover);

    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.2);

}



.sleutel-close-btn {

    width: 38px;

    height: 38px;

    border-radius: 8px;

    background: rgba(239, 68, 68, 0.12);

    border: 1px solid rgba(239, 68, 68, 0.3);

    color: #fca5a5;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

    font-size: 1.1rem;

}



.sleutel-close-btn:hover {

    background: #ef4444;

    color: #ffffff;

    border-color: #ef4444;

}



/* --- TOOLBAR: PROJECTEN KIEZER & TABBALK --- */

.sleutel-toolbar {

    background: #0b0f17;

    border-bottom: 1px solid var(--sl-border);

    padding: 12px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

    flex-shrink: 0;

}



.sleutel-projects-selector {

    display: flex;

    align-items: center;

    gap: 8px;

    overflow-x: auto;

    padding-bottom: 4px;

}



.sleutel-proj-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    background: var(--sl-surface);

    border: 1px solid var(--sl-border);

    border-radius: 8px;

    color: var(--sl-text-muted);

    font-size: 0.75rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    white-space: nowrap;

}



.sleutel-proj-btn:hover {

    background: var(--sl-card);

    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.2);

}



.sleutel-proj-btn.active {

    background: rgba(197, 160, 89, 0.15);

    border-color: var(--sl-accent);

    color: var(--sl-accent-bright);

    box-shadow: 0 0 14px rgba(197, 160, 89, 0.2);

}



.sleutel-view-tabs {

    display: inline-flex;

    background: #07090e;

    padding: 4px;

    border-radius: 10px;

    border: 1px solid var(--sl-border);

}



.sleutel-tab-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 16px;

    border-radius: 7px;

    border: none;

    background: transparent;

    color: var(--sl-text-muted);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.8px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.sleutel-tab-btn.active {

    background: var(--sl-card);

    color: #ffffff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

}



.sleutel-tab-btn .tab-badge {

    background: #ef4444;

    color: #ffffff;

    font-size: 0.65rem;

    padding: 2px 6px;

    border-radius: 999px;

    font-weight: 800;

    font-family: var(--sl-font-mono);

}



/* --- ZOEKBALK & CATEGORIE FILTERBALK --- */

.sleutel-filterbar {

    padding: 12px 24px;

    background: rgba(14, 18, 27, 0.6);

    border-bottom: 1px solid var(--sl-border);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

    flex-shrink: 0;

}



.sleutel-search-wrap {

    position: relative;

    flex: 1;

    min-width: 260px;

    max-width: 460px;

}



.sleutel-search-wrap i {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--sl-text-muted);

    font-size: 0.85rem;

}



.sleutel-search-input {

    width: 100%;

    padding: 9px 14px 9px 38px;

    background: var(--sl-surface);

    border: 1px solid var(--sl-border);

    border-radius: 8px;

    color: #ffffff;

    font-size: 0.82rem;

    font-family: var(--sl-font-sans);

    outline: none;

    transition: all 0.2s ease;

}



.sleutel-search-input:focus {

    border-color: var(--sl-accent);

    box-shadow: 0 0 12px rgba(197, 160, 89, 0.25);

    background: var(--sl-card);

}



.sleutel-cats-pills {

    display: flex;

    align-items: center;

    gap: 6px;

    overflow-x: auto;

}



.sleutel-cat-pill {

    padding: 6px 12px;

    background: transparent;

    border: 1px solid var(--sl-border);

    border-radius: 999px;

    color: var(--sl-text-muted);

    font-size: 0.72rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    white-space: nowrap;

}



.sleutel-cat-pill:hover {

    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.25);

}



.sleutel-cat-pill.active {

    background: var(--sl-accent);

    color: #0b0f17;

    border-color: var(--sl-accent);

    font-weight: 700;

}



/* --- CONTENT AREA (SCROLLABLE) --- */

.sleutel-body {

    flex: 1;

    overflow-y: auto;

    padding: 24px;

    display: grid;

    gap: 20px;

}



/* Stand 1: Torque & Bouten View */

.torque-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));

    gap: 16px;

}



.torque-card {

    background: var(--sl-card);

    border: 1px solid var(--sl-border);

    border-radius: 12px;

    padding: 18px 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 14px;

    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

    position: relative;

    overflow: hidden;

}



.torque-card:hover {

    border-color: var(--sl-border-accent);

    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);

}



.torque-card-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

}



.torque-cat-tag {

    font-family: var(--sl-font-mono);

    font-size: 0.65rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--sl-accent-bright);

    background: rgba(197, 160, 89, 0.12);

    padding: 3px 8px;

    border-radius: 4px;

    font-weight: 700;

    display: inline-block;

    margin-bottom: 6px;

}



.torque-card-title {

    font-size: 0.98rem;

    font-weight: 700;

    color: #ffffff;

    line-height: 1.35;

    margin: 0;

}



/* HET GROTE NM AANHAALMOMENT BADGE - UITERST LEESBAAR ONDER DE AUTO */

.torque-badge-huge {

    text-align: right;

    flex-shrink: 0;

    background: #090c13;

    border: 1.5px solid rgba(197, 160, 89, 0.4);

    padding: 8px 14px;

    border-radius: 10px;

    min-width: 95px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);

}



.torque-badge-huge .val {

    font-family: var(--sl-font-mono);

    font-size: 1.6rem;

    font-weight: 800;

    color: #ffffff;

    line-height: 1;

    display: block;

    text-shadow: 0 0 12px rgba(197, 160, 89, 0.5);

}



.torque-badge-huge .unit {

    font-family: var(--sl-font-mono);

    font-size: 0.72rem;

    font-weight: 700;

    color: var(--sl-accent-bright);

    letter-spacing: 1.5px;

    text-transform: uppercase;

}



.torque-specs-list {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;

    background: #0a0d15;

    padding: 10px 14px;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.04);

}



.torque-spec-row {

    display: flex;

    flex-direction: column;

}



.torque-spec-lbl {

    font-size: 0.65rem;

    color: var(--sl-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.torque-spec-val {

    font-size: 0.78rem;

    font-weight: 600;

    color: #e2e8f0;

    font-family: var(--sl-font-mono);

}



.torque-notes {

    font-size: 0.74rem;

    color: #cbd5e1;

    line-height: 1.45;

    background: rgba(56, 189, 248, 0.06);

    border-left: 3px solid var(--sl-info);

    padding: 7px 10px;

    border-radius: 0 6px 6px 0;

}



.torque-notes i {

    color: var(--sl-info);

    margin-right: 4px;

}



/* OOH DIT HEB IK NOG NODIG KNOP OP ELKE BOUT */

.btn-nodig-trigger {

    width: 100%;

    height: 34px;

    padding: 0 14px;

    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 8px;

    color: #cbd5e1;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.6px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

    font-family: var(--sl-font-sans);

}



.btn-nodig-trigger:hover {

    background: rgba(197, 160, 89, 0.16);

    color: #ffffff;

    border-color: rgba(197, 160, 89, 0.4);

    transform: translateY(-1px);

}



.btn-nodig-trigger:hover {

    background: var(--sl-accent);

    color: #09090b;

    border-color: var(--sl-accent);

    box-shadow: 0 4px 14px rgba(197, 160, 89, 0.3);

}



.btn-nodig-trigger.added {

    background: rgba(16, 185, 129, 0.15);

    border-color: #10b981;

    color: #34d399;

}



/* --- BOODSCHAPPENLIJST WEERGAVE ("OOH DIT HEB IK NOG NODIG") --- */

.boodschappen-container {

    display: grid;

    grid-template-columns: 1fr 340px;

    gap: 24px;

    align-items: start;

}



@media (max-width: 960px) {

    .boodschappen-container {

        grid-template-columns: 1fr;

    }

}



.boodschappen-main-panel {

    background: var(--sl-surface);

    border: 1px solid var(--sl-border);

    border-radius: 14px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



/* Snelle Toevoeging balk */

.boodschappen-add-bar {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    background: #090c13;

    padding: 14px;

    border-radius: 10px;

    border: 1px solid var(--sl-border);

}



.boodschappen-input-main {

    flex: 2;

    min-width: 220px;

    padding: 10px 14px;

    background: var(--sl-card);

    border: 1px solid var(--sl-border);

    border-radius: 6px;

    color: #ffffff;

    font-size: 0.85rem;

    font-family: var(--sl-font-sans);

    outline: none;

}



.boodschappen-input-main:focus {

    border-color: var(--sl-accent);

}



.boodschappen-qty-input {

    width: 75px;

    padding: 10px;

    background: var(--sl-card);

    border: 1px solid var(--sl-border);

    border-radius: 6px;

    color: #ffffff;

    font-size: 0.85rem;

    font-family: var(--sl-font-mono);

    text-align: center;

    outline: none;

}



.boodschappen-cat-select {

    padding: 10px 14px;

    background: var(--sl-card);

    border: 1px solid var(--sl-border);

    border-radius: 6px;

    color: #ffffff;

    font-size: 0.82rem;

    font-family: var(--sl-font-sans);

    outline: none;

    cursor: pointer;

}



.btn-add-item-submit {

    padding: 10px 20px;

    background: var(--sl-accent);

    color: #09090b;

    border: none;

    border-radius: 6px;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.8px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s ease;

}



.btn-add-item-submit:hover {

    background: var(--sl-accent-bright);

    box-shadow: 0 4px 14px rgba(197, 160, 89, 0.4);

}



/* Snelle Atelier Knoppen Pills */

.quick-picks-row {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-items: center;

}



.quick-pick-lbl {

    font-size: 0.7rem;

    color: var(--sl-text-muted);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.btn-quick-chip {

    padding: 5px 12px;

    background: var(--sl-card);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 999px;

    color: #cbd5e1;

    font-size: 0.72rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.btn-quick-chip:hover {

    background: var(--sl-card-hover);

    color: #ffffff;

    border-color: var(--sl-accent);

    transform: translateY(-1px);

}



/* De lijst met items */

.boodschappen-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.boodschap-item-row {

    background: var(--sl-card);

    border: 1px solid var(--sl-border);

    border-radius: 10px;

    padding: 14px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    transition: all 0.2s ease;

}



.boodschap-item-row:hover {

    border-color: rgba(255, 255, 255, 0.16);

    background: var(--sl-card-hover);

}



.boodschap-item-row.is-done {

    opacity: 0.55;

    background: rgba(14, 18, 27, 0.5);

    border-color: rgba(16, 185, 129, 0.2);

}



.boodschap-item-row.is-done .boodschap-title {

    text-decoration: line-through;

}



.boodschap-left {

    display: flex;

    align-items: center;

    gap: 14px;

    flex: 1;

}



.boodschap-check {

    width: 22px;

    height: 22px;

    border-radius: 6px;

    border: 1.5px solid var(--sl-border);

    background: var(--sl-surface);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: transparent;

    transition: all 0.2s ease;

}



.boodschap-item-row.is-done .boodschap-check {

    background: #10b981;

    border-color: #10b981;

    color: #ffffff;

}



.boodschap-info {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.boodschap-title {

    font-size: 0.92rem;

    font-weight: 700;

    color: #ffffff;

}



.boodschap-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.72rem;

    color: var(--sl-text-muted);

}



.boodschap-qty-badge {

    font-family: var(--sl-font-mono);

    color: var(--sl-accent-bright);

    background: rgba(197, 160, 89, 0.12);

    padding: 2px 7px;

    border-radius: 4px;

    font-weight: 700;

}



.boodschap-right {

    display: flex;

    align-items: center;

    gap: 12px;

}



/* Status Wisselaar: Nodig -> Besteld -> Binnen */

.boodschap-status-pill {

    padding: 5px 12px;

    border-radius: 999px;

    font-size: 0.68rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    cursor: pointer;

    border: 1px solid transparent;

    transition: all 0.2s ease;

}



.boodschap-status-pill.status-nodig {

    background: rgba(239, 68, 68, 0.15);

    color: #fca5a5;

    border-color: rgba(239, 68, 68, 0.35);

}



.boodschap-status-pill.status-besteld {

    background: rgba(245, 158, 11, 0.15);

    color: #fde68a;

    border-color: rgba(245, 158, 11, 0.35);

}



.boodschap-status-pill.status-binnen {

    background: rgba(16, 185, 129, 0.15);

    color: #a7f3d0;

    border-color: rgba(16, 185, 129, 0.35);

}



.btn-item-del {

    width: 32px;

    height: 32px;

    border-radius: 6px;

    background: transparent;

    border: none;

    color: var(--sl-text-muted);

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

}



.btn-item-del:hover {

    color: #ef4444;

    background: rgba(239, 68, 68, 0.1);

}



/* ZIJBALK ACTIES (WhatsApp, Kopiëren, Afdrukken) */

.boodschappen-side-panel {

    background: var(--sl-surface);

    border: 1px solid var(--sl-border);

    border-radius: 14px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.side-panel-title {

    font-size: 0.85rem;

    font-weight: 700;

    color: #ffffff;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.side-kpi-box {

    background: #090c13;

    padding: 16px;

    border-radius: 10px;

    border: 1px solid var(--sl-border);

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    text-align: center;

}



.kpi-digit {

    font-family: var(--sl-font-mono);

    font-size: 1.5rem;

    font-weight: 800;

    color: #ffffff;

    display: block;

}



.kpi-text {

    font-size: 0.65rem;

    color: var(--sl-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.side-action-buttons {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.btn-side-act {

    width: 100%;

    padding: 11px 16px;

    border-radius: 8px;

    font-size: 0.76rem;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    transition: all 0.25s ease;

    border: 1px solid var(--sl-border);

    text-decoration: none;

    font-family: var(--sl-font-sans);

}



.btn-side-act.whatsapp {

    background: #128c7e;

    color: #ffffff;

    border-color: #25d366;

}



.btn-side-act.whatsapp:hover {

    background: #25d366;

    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);

    transform: translateY(-1px);

}



.btn-side-act.copy {

    background: var(--sl-card);

    color: #ffffff;

}



.btn-side-act.copy:hover {

    background: var(--sl-card-hover);

    border-color: var(--sl-accent);

}



.btn-side-act.print {

    background: var(--sl-card);

    color: #cbd5e1;

}



.btn-side-act.print:hover {

    background: var(--sl-card-hover);

    color: #ffffff;

}



.btn-side-act.magazijn {

    background: rgba(197, 160, 89, 0.12);

    color: var(--sl-accent-bright);

    border-color: rgba(197, 160, 89, 0.35);

}



.btn-side-act.magazijn:hover {

    background: var(--sl-accent);

    color: #09090b;

}



.btn-side-act.clean {

    background: transparent;

    color: var(--sl-text-muted);

    border-color: transparent;

    font-size: 0.7rem;

}



.btn-side-act.clean:hover {

    color: #ef4444;

}



/* --- ISO CALCULATOR PANEL --- */

.iso-calculator-card {

    background: var(--sl-surface);

    border: 1px solid var(--sl-border-accent);

    border-radius: 14px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.iso-controls-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 16px;

}



.iso-field {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.iso-field label {

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--sl-text-muted);

    letter-spacing: 1px;

}



.iso-select {

    padding: 10px 14px;

    background: var(--sl-card);

    border: 1px solid var(--sl-border);

    border-radius: 8px;

    color: #ffffff;

    font-size: 0.88rem;

    font-family: var(--sl-font-mono);

    outline: none;

    cursor: pointer;

}



.iso-result-banner {

    background: linear-gradient(135deg, #090d16 0%, #151e2e 100%);

    border: 1.5px solid var(--sl-accent);

    border-radius: 12px;

    padding: 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

}



.iso-result-left h3 {

    font-size: 1.15rem;

    color: #ffffff;

    margin: 0 0 6px 0;

}



.iso-result-left p {

    font-size: 0.78rem;

    color: var(--sl-text-muted);

    margin: 0;

}



.iso-result-nm {

    text-align: right;

    background: #07090e;

    padding: 12px 20px;

    border-radius: 10px;

    border: 1px solid rgba(197, 160, 89, 0.4);

}



.iso-result-nm .nm-digit {

    font-family: var(--sl-font-mono);

    font-size: 2.2rem;

    font-weight: 800;

    color: var(--sl-accent-bright);

    line-height: 1;

}



.iso-table-wrap {

    overflow-x: auto;

}



.iso-ref-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.76rem;

    text-align: left;

}



.iso-ref-table th {

    background: #090c13;

    padding: 10px 14px;

    color: var(--sl-accent-bright);

    font-family: var(--sl-font-mono);

    text-transform: uppercase;

    font-size: 0.7rem;

    border-bottom: 1px solid var(--sl-border);

}



.iso-ref-table td {

    padding: 9px 14px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

    font-family: var(--sl-font-mono);

    color: #cbd5e1;

}



.iso-ref-table tr:hover td {

    background: var(--sl-card);

    color: #ffffff;

}



/* Empty state */

.sleutel-empty-state {

    text-align: center;

    padding: 60px 20px;

    color: var(--sl-text-muted);

}



.sleutel-empty-state i {

    font-size: 3rem;

    color: var(--sl-accent);

    margin-bottom: 14px;

    opacity: 0.6;

}



.sleutel-empty-state h3 {

    color: #ffffff;

    font-size: 1.1rem;

    margin-bottom: 6px;

}



.sleutel-empty-state p {

    font-size: 0.8rem;

    max-width: 420px;

    margin: 0 auto;

}



/* Toast melding */

.sleutel-toast {

    position: fixed;

    bottom: 24px;

    right: 24px;

    background: #0b0f17;

    border: 1px solid var(--sl-accent);

    color: #ffffff;

    padding: 12px 20px;

    border-radius: 8px;

    font-size: 0.8rem;

    font-weight: 600;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);

    z-index: 10001;

    display: flex;

    align-items: center;

    gap: 10px;

    transform: translateY(30px);

    opacity: 0;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    pointer-events: none;

}



.sleutel-toast.active {

    transform: translateY(0);

    opacity: 1;

}



/* --- BOUWTEKENINGEN & TECHNISCHE SCHEMA'S STIJLEN --- */

.tekening-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));

    gap: 20px;

}



@media (max-width: 600px) {

    .tekening-grid {

        grid-template-columns: 1fr;

    }

}



.tekening-card {

    background: linear-gradient(180deg, #0e1422 0%, #090d16 100%);

    border: 1px solid rgba(56, 189, 248, 0.22);

    border-radius: 14px;

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 16px;

    transition: all 0.25s ease;

    position: relative;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);

}



.tekening-card:hover {

    border-color: rgba(56, 189, 248, 0.55);

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.12);

    transform: translateY(-2px);

}



.tekening-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

}



.tekening-code-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(56, 189, 248, 0.12);

    border: 1px solid rgba(56, 189, 248, 0.4);

    color: #38bdf8;

    font-family: var(--sl-font-mono);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 1.5px;

    padding: 4px 10px;

    border-radius: 6px;

    text-transform: uppercase;

}



.tekening-card-title {

    font-size: 1.05rem;

    font-weight: 700;

    color: #ffffff;

    margin: 8px 0 4px 0;

    line-height: 1.3;

}



.tekening-card-desc {

    font-size: 0.76rem;

    color: var(--sl-text-muted);

    line-height: 1.45;

    margin: 0;

}



/* TECHNISCHE BLAUWDRUK / EXPLODED VIEW KADER */

.tekening-blueprint-box {

    background: #060911;

    border: 1px solid rgba(56, 189, 248, 0.2);

    border-radius: 10px;

    padding: 16px;

    position: relative;

    overflow: hidden;

    background-image: 

        linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),

        linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);

    background-size: 20px 20px;

}



.tekening-blueprint-box::before {

    content: 'HECTOR TECHNICAL CAD • EXPLODED ASSEMBLY';

    position: absolute;

    top: 8px;

    right: 10px;

    font-family: var(--sl-font-mono);

    font-size: 0.6rem;

    color: rgba(56, 189, 248, 0.45);

    letter-spacing: 1px;

}



.tekening-callouts-row {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;

}



.tekening-callout-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(14, 20, 32, 0.85);

    border: 1px solid rgba(197, 160, 89, 0.35);

    border-radius: 6px;

    padding: 4px 8px;

    font-size: 0.72rem;

    color: #e2e8f0;

}



.tekening-callout-num {

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--sl-accent);

    color: #07090e;

    font-size: 0.62rem;

    font-weight: 800;

    font-family: var(--sl-font-mono);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.tekening-callout-nm {

    font-family: var(--sl-font-mono);

    color: var(--sl-accent-bright);

    font-weight: 700;

}



/* ONDERDELENSTUKLIJST (B.O.M.) TABEL OP DE TEKENING */

.tekening-parts-list {

    display: flex;

    flex-direction: column;

    gap: 6px;

    background: rgba(9, 13, 22, 0.7);

    border: 1px solid var(--sl-border);

    border-radius: 8px;

    padding: 10px;

}



.tekening-part-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 6px 8px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.02);

    font-size: 0.74rem;

    transition: background 0.15s ease;

}



.tekening-part-item:hover {

    background: rgba(255, 255, 255, 0.06);

}



.tekening-part-name {

    color: #f1f5f9;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 8px;

}



.tekening-part-spec {

    font-family: var(--sl-font-mono);

    font-size: 0.68rem;

    color: var(--sl-text-muted);

}



.tekening-part-qty {

    font-family: var(--sl-font-mono);

    color: var(--sl-accent-bright);

    font-weight: 700;

    background: rgba(197, 160, 89, 0.12);

    padding: 2px 6px;

    border-radius: 4px;

    font-size: 0.7rem;

}



.btn-part-quick-add {

    background: rgba(197, 160, 89, 0.12);

    border: 1px solid rgba(197, 160, 89, 0.35);

    border-radius: 4px;

    color: var(--sl-accent-bright);

    font-size: 0.68rem;

    font-weight: 700;

    padding: 3px 8px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    transition: all 0.2s ease;

}



.btn-part-quick-add:hover {

    background: var(--sl-accent);

    color: #0b0f17;

}



.tekening-card-footer {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 4px;

}



.btn-import-bom {

    flex: 1;

    min-width: 200px;

    padding: 10px 14px;

    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(197, 160, 89, 0.2));

    border: 1px solid rgba(56, 189, 248, 0.45);

    border-radius: 8px;

    color: #ffffff;

    font-size: 0.74rem;

    font-weight: 700;

    letter-spacing: 0.8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    cursor: pointer;

    transition: all 0.25s ease;

    font-family: var(--sl-font-sans);

}



.btn-import-bom:hover {

    background: linear-gradient(135deg, #38bdf8, #c5a059);

    color: #07090e;

    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4);

    transform: translateY(-1px);

}



/* --- STAP-VOOR-STAP MONTAGEVOLGORDE & TIMELINE --- */

.procedure-drawer {

    display: none;

    background: #080c14;

    border: 1px solid rgba(197, 160, 89, 0.35);

    border-radius: 10px;

    padding: 16px;

    margin-top: 14px;

    animation: fadeInProc 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



.procedure-drawer.active {

    display: block;

}



@keyframes fadeInProc {

    from { opacity: 0; transform: translateY(-6px); }

    to { opacity: 1; transform: translateY(0); }

}



.procedure-timeline {

    display: flex;

    flex-direction: column;

    gap: 12px;

    position: relative;

    padding-left: 12px;

}



.procedure-timeline::before {

    content: '';

    position: absolute;

    left: 20px;

    top: 10px;

    bottom: 10px;

    width: 2px;

    background: rgba(197, 160, 89, 0.2);

}



.procedure-step-item {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    position: relative;

    padding: 8px 10px;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.04);

    transition: all 0.2s ease;

}



.procedure-step-item:hover {

    background: rgba(255, 255, 255, 0.05);

    border-color: rgba(197, 160, 89, 0.3);

}



.procedure-step-item.is-done {

    opacity: 0.5;

}



.procedure-step-item.is-done .proc-step-title {

    text-decoration: line-through;

}



.proc-node {

    width: 26px;

    height: 26px;

    border-radius: 50%;

    background: #141a27;

    border: 2px solid var(--sl-accent);

    color: var(--sl-accent-bright);

    font-size: 0.72rem;

    font-weight: 800;

    font-family: var(--sl-font-mono);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    z-index: 1;

    box-shadow: 0 0 10px rgba(197, 160, 89, 0.35);

}



.proc-step-content {

    flex: 1;

}



.proc-step-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 2px;

}



.proc-step-title {

    font-size: 0.82rem;

    font-weight: 700;

    color: #ffffff;

}



.proc-step-nm-badge {

    font-family: var(--sl-font-mono);

    font-size: 0.68rem;

    font-weight: 800;

    color: #0b0f17;

    background: var(--sl-accent);

    padding: 2px 7px;

    border-radius: 4px;

    letter-spacing: 0.5px;

}



.proc-step-desc {

    font-size: 0.74rem;

    color: #cbd5e1;

    line-height: 1.45;

    margin: 0;

}



.proc-step-warn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 0.7rem;

    color: #fde68a;

    background: rgba(245, 158, 11, 0.12);

    border-left: 2px solid #f59e0b;

    padding: 3px 8px;

    border-radius: 0 4px 4px 0;

    margin-top: 4px;

}



.btn-toggle-procedure {

    background: rgba(14, 20, 32, 0.9);

    border: 1px solid rgba(197, 160, 89, 0.35);

    border-radius: 6px;

    color: var(--sl-accent-bright);

    font-size: 0.72rem;

    font-weight: 700;

    padding: 7px 12px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition: all 0.2s ease;

    font-family: var(--sl-font-sans);

}



.btn-toggle-procedure:hover {

    background: rgba(197, 160, 89, 0.2);

    border-color: var(--sl-accent);

    color: #ffffff;

}



/* --- HECTOR AI WERKPLAATS ASSISTENT STIJLEN --- */

.ai-assistant-container {

    background: var(--sl-surface);

    border: 1px solid rgba(139, 92, 246, 0.35);

    border-radius: 14px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    gap: 20px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(139, 92, 246, 0.1);

}



.ai-header-bar {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

    border-bottom: 1px solid var(--sl-border);

    padding-bottom: 16px;

}



.ai-pill-brand {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(139, 92, 246, 0.15);

    border: 1px solid rgba(139, 92, 246, 0.4);

    color: #c4b5fd;

    font-family: var(--sl-font-mono);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 1.5px;

    padding: 4px 10px;

    border-radius: 6px;

    text-transform: uppercase;

}



.ai-pill-brand .ai-pulse-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #a855f7;

    box-shadow: 0 0 8px #a855f7;

    animation: pulseDot 2s infinite;

}



.ai-prompt-box {

    display: flex;

    flex-direction: column;

    gap: 10px;

    background: #090c13;

    padding: 16px;

    border-radius: 10px;

    border: 1px solid var(--sl-border);

}



.ai-input-row {

    display: flex;

    gap: 10px;

    align-items: center;

}



.ai-text-input {

    flex: 1;

    padding: 12px 16px;

    background: var(--sl-card);

    border: 1px solid var(--sl-border);

    border-radius: 8px;

    color: #ffffff;

    font-size: 0.85rem;

    font-family: var(--sl-font-sans);

    outline: none;

    transition: all 0.2s ease;

}



.ai-text-input:focus {

    border-color: #a855f7;

    box-shadow: 0 0 14px rgba(168, 85, 247, 0.3);

}



.btn-ai-ask {

    padding: 12px 22px;

    background: linear-gradient(135deg, #7c3aed, #a855f7);

    color: #ffffff;

    border: none;

    border-radius: 8px;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.25s ease;

    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);

    white-space: nowrap;

}



.btn-ai-ask:hover {

    background: linear-gradient(135deg, #6d28d9, #9333ea);

    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);

    transform: translateY(-1px);

}



/* Prompt suggestie chips */

.ai-chips-list {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-items: center;

}



.btn-ai-chip {

    padding: 5px 12px;

    background: rgba(139, 92, 246, 0.1);

    border: 1px solid rgba(139, 92, 246, 0.25);

    border-radius: 999px;

    color: #ddd6fe;

    font-size: 0.72rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.btn-ai-chip:hover {

    background: rgba(139, 92, 246, 0.25);

    border-color: #a855f7;

    color: #ffffff;

    transform: translateY(-1px);

}



/* AI Antwoord Card */

.ai-response-card {

    background: linear-gradient(180deg, #101625 0%, #0b0f19 100%);

    border: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: 12px;

    padding: 22px;

    display: flex;

    flex-direction: column;

    gap: 18px;

    position: relative;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

}



.ai-response-title {

    font-size: 1.1rem;

    font-weight: 700;

    color: #ffffff;

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

}



.ai-steps-flow {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.ai-step-block {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 12px 14px;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 8px;

}



.ai-step-num {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: #7c3aed;

    color: #ffffff;

    font-size: 0.72rem;

    font-weight: 800;

    font-family: var(--sl-font-mono);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.ai-step-text {

    flex: 1;

    font-size: 0.8rem;

    color: #e2e8f0;

    line-height: 1.5;

}



.ai-step-text strong {

    color: #ffffff;

}



.ai-step-nm-highlight {

    font-family: var(--sl-font-mono);

    font-weight: 800;

    color: var(--sl-accent-bright);

    background: rgba(197, 160, 89, 0.15);

    padding: 1px 6px;

    border-radius: 4px;

}



.ai-response-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    padding-top: 14px;

}



/* Print styling */

@media print {

    body * {

        visibility: hidden;

    }

    .boodschappen-container, .boodschappen-container * {

        visibility: visible;

    }

    .boodschappen-container {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        background: #ffffff !important;

        color: #000000 !important;

    }

    .boodschappen-add-bar, .side-action-buttons, .quick-picks-row, .sleutel-header-actions, .sleutel-toolbar {

        display: none !important;

    }

}







/* ==========================================================================

   HECTOR SLEUTEL SCHERM 2.0 - UITBREIDINGEN & OPTIMALISATIES

   ========================================================================== */



/* Header actieknoppen pills */

.sleutel-btn-pill {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--sl-border);

    color: #e2e8f0;

    font-size: 0.73rem;

    font-weight: 700;

    border-radius: 6px;

    cursor: pointer;

    font-family: var(--sl-font-sans);

    transition: all 0.2s ease;

    white-space: nowrap;

}



.sleutel-btn-pill:hover {

    background: rgba(255, 255, 255, 0.1);

    border-color: rgba(255, 255, 255, 0.2);

    color: #ffffff;

}



.sleutel-btn-pill.active {

    background: rgba(197, 160, 89, 0.18);

    border-color: var(--sl-accent);

    color: var(--sl-accent-bright);

    box-shadow: 0 0 12px rgba(197, 160, 89, 0.25);

}



.sleutel-btn-pill.active.pulse {

    animation: slPulseGlow 2s infinite ease-in-out;

}



@keyframes slPulseGlow {

    0%, 100% {

        box-shadow: 0 0 6px rgba(197, 160, 89, 0.2);

    }

    50% {

        box-shadow: 0 0 16px rgba(197, 160, 89, 0.5);

    }

}



/* Eenheden Switcher (Nm, lb-ft, lbf-in, kg-m) */

.torque-unit-switcher {

    display: inline-flex;

    align-items: center;

    background: rgba(0, 0, 0, 0.35);

    border: 1px solid var(--sl-border);

    border-radius: 6px;

    padding: 3px;

    gap: 2px;

}



.unit-switch-btn {

    background: transparent;

    border: none;

    color: var(--sl-text-muted);

    font-family: var(--sl-font-mono);

    font-size: 0.68rem;

    font-weight: 700;

    padding: 4px 9px;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.18s ease;

}



.unit-switch-btn:hover {

    color: #ffffff;

}



.unit-switch-btn.active {

    background: var(--sl-accent);

    color: #07090e;

    font-weight: 800;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

}



/* Digitale Gradenschijf / Angle Gauge Modal */

.graden-overlay {

    position: fixed;

    inset: 0;

    background: rgba(7, 9, 14, 0.88);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 100050;

    padding: 20px;

}



.graden-overlay.active {

    display: flex;

    animation: slFadeIn 0.25s ease-out;

}



.graden-modal-card {

    background: #0f1523;

    border: 1.5px solid var(--sl-border-accent);

    border-radius: 12px;

    width: 100%;

    max-width: 520px;

    padding: 24px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px var(--sl-accent-glow);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    position: relative;

}



.graden-dial-wrap {

    position: relative;

    width: 260px;

    height: 260px;

    margin: 16px 0;

}



.graden-svg-dial {

    width: 100%;

    height: 100%;

    transform: rotate(-90deg);

}



.graden-needle {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 4px;

    height: 110px;

    background: linear-gradient(to top, var(--sl-accent), #ffffff);

    transform-origin: 50% 100%;

    margin-left: -2px;

    margin-top: -110px;

    border-radius: 4px;

    box-shadow: 0 0 12px var(--sl-accent-bright);

    transition: transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);

}



.graden-center-pin {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 22px;

    height: 22px;

    background: var(--sl-card);

    border: 3px solid var(--sl-accent);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);

    z-index: 2;

}



.graden-current-badge {

    position: absolute;

    top: 68%;

    left: 50%;

    transform: translateX(-50%);

    font-family: var(--sl-font-mono);

    font-size: 1.6rem;

    font-weight: 800;

    color: #ffffff;

    background: rgba(0, 0, 0, 0.6);

    padding: 2px 14px;

    border-radius: 8px;

    border: 1px solid var(--sl-border);

}



.graden-presets-row {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    justify-content: center;

    margin-top: 12px;

}



.btn-graden-preset {

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid var(--sl-border);

    color: #ffffff;

    font-family: var(--sl-font-mono);

    font-size: 0.78rem;

    font-weight: 700;

    padding: 8px 14px;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.18s ease;

}



.btn-graden-preset:hover {

    background: var(--sl-accent);

    color: #07090e;

    border-color: var(--sl-accent);

}



.graden-phases-stepper {

    display: flex;

    width: 100%;

    margin: 16px 0 8px 0;

    border: 1px solid var(--sl-border);

    border-radius: 8px;

    overflow: hidden;

    background: rgba(0, 0, 0, 0.3);

}



.graden-step-item {

    flex: 1;

    padding: 8px 6px;

    font-size: 0.72rem;

    color: var(--sl-text-muted);

    border-right: 1px solid var(--sl-border);

    cursor: pointer;

    transition: all 0.2s ease;

}



.graden-step-item:last-child {

    border-right: none;

}



.graden-step-item.active {

    background: rgba(197, 160, 89, 0.2);

    color: var(--sl-accent-bright);

    font-weight: 700;

}



.graden-step-item.done {

    color: #10b981;

}



/* Gereedschapskist Drawer / Checklist Panel */

.toolbox-panel-card {

    background: rgba(15, 21, 35, 0.95);

    border: 1px solid var(--sl-border-accent);

    border-radius: 10px;

    padding: 18px 22px;

    margin-bottom: 20px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

}



.toolbox-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 16px;

    margin-top: 14px;

}



.toolbox-col {

    background: rgba(0, 0, 0, 0.25);

    border: 1px solid var(--sl-border);

    border-radius: 8px;

    padding: 12px;

}



.toolbox-col-title {

    font-size: 0.75rem;

    font-weight: 800;

    color: var(--sl-accent-bright);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.toolbox-items-list {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}



.toolbox-chip {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid var(--sl-border);

    padding: 4px 8px;

    border-radius: 5px;

    font-family: var(--sl-font-mono);

    font-size: 0.72rem;

    color: #e2e8f0;

    cursor: pointer;

    user-select: none;

    transition: all 0.16s ease;

}



.toolbox-chip.checked {

    background: rgba(16, 185, 129, 0.18);

    border-color: #10b981;

    color: #34d399;

    text-decoration: line-through;

    opacity: 0.75;

}



/* Inch & Metrisch Paswijzer Tabel */

.passingen-container {

    padding: 10px 0;

}



.passingen-header-banner {

    background: linear-gradient(135deg, rgba(14, 21, 35, 0.95), rgba(20, 27, 45, 0.85));

    border: 1px solid var(--sl-border-accent);

    border-radius: 10px;

    padding: 20px 24px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

}



.passingen-search-wrap {

    display: flex;

    align-items: center;

    gap: 10px;

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid var(--sl-border);

    border-radius: 8px;

    padding: 8px 14px;

    width: 100%;

    max-width: 380px;

}



.passingen-search-input {

    background: transparent;

    border: none;

    outline: none;

    color: #ffffff;

    font-family: var(--sl-font-sans);

    font-size: 0.82rem;

    width: 100%;

}



.passingen-table-wrap {

    background: var(--sl-card);

    border: 1px solid var(--sl-border);

    border-radius: 10px;

    overflow-x: auto;

}



.passingen-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.8rem;

    text-align: left;

}



.passingen-table th {

    background: #090e18;

    color: #ffffff;

    font-weight: 700;

    padding: 12px 16px;

    border-bottom: 1px solid var(--sl-border);

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.passingen-table td {

    padding: 12px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    color: #cbd5e1;

}



.passingen-table tr:hover td {

    background: rgba(255, 255, 255, 0.02);

}



.fit-tag {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 3px 8px;

    border-radius: 4px;

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.fit-tag.good {

    background: rgba(16, 185, 129, 0.15);

    color: #34d399;

    border: 1px solid rgba(16, 185, 129, 0.4);

}



.fit-tag.warning {

    background: rgba(245, 158, 11, 0.15);

    color: #fbbf24;

    border: 1px solid rgba(245, 158, 11, 0.4);

}



.fit-tag.danger {

    background: rgba(239, 68, 68, 0.15);

    color: #f87171;

    border: 1px solid rgba(239, 68, 68, 0.4);

}



/* Aantrekvolgorde Diagrammen */

.volgorde-container {

    padding: 10px 0;

}



.volgorde-selector-row {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 20px;

}



.volgorde-diagram-card {

    background: var(--sl-card);

    border: 1px solid var(--sl-border-accent);

    border-radius: 12px;

    padding: 24px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}



.diagram-interactive-stage {

    position: relative;

    background: #090e18;

    border: 1px solid var(--sl-border);

    border-radius: 10px;

    padding: 30px 20px;

    margin: 20px 0;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow-x: auto;

}



.bolt-pin-circle {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: #141b2b;

    border: 2px solid var(--sl-border-accent);

    color: #ffffff;

    font-family: var(--sl-font-mono);

    font-weight: 800;

    font-size: 0.9rem;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;

}



.bolt-pin-circle:hover {

    transform: scale(1.15);

    border-color: #ffffff;

    box-shadow: 0 0 16px var(--sl-accent-glow);

}



.bolt-pin-circle.completed {

    background: #10b981;

    border-color: #34d399;

    color: #07090e;

    box-shadow: 0 0 14px rgba(16, 185, 129, 0.5);

}



.bolt-pin-circle.active-target {

    border-color: var(--sl-accent-bright);

    animation: slTargetPulse 1.2s infinite ease-in-out;

}



@keyframes slTargetPulse {

    0%, 100% {

        box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.6);

    }

    50% {

        box-shadow: 0 0 0 10px rgba(197, 160, 89, 0);

    }

}



/* Knoppen op boutkaartjes */

.btn-graden-trigger {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    background: rgba(56, 189, 248, 0.12);

    border: 1px solid rgba(56, 189, 248, 0.35);

    color: #38bdf8;

    font-size: 0.72rem;

    font-weight: 700;

    border-radius: 5px;

    cursor: pointer;

    margin-top: 10px;

    transition: all 0.2s ease;

}



.btn-graden-trigger:hover {

    background: rgba(56, 189, 248, 0.25);

    color: #ffffff;

}



/* Boodschappenlijst aantal aanpassen knoppen */

.boodschap-qty-controls {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    margin-right: 6px;

}



.btn-qty-adj {

    width: 22px;

    height: 22px;

    border-radius: 4px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid var(--sl-border);

    color: #ffffff;

    font-size: 0.75rem;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.15s ease;

}



.btn-qty-adj:hover {

    background: var(--sl-accent);

    color: #07090e;

    border-color: var(--sl-accent);

}





/* ==========================================================================

   HECTOR ATELIER OS - SMARTPHONE & TOUCH WORKBENCH RESPONSIVENESS (< 768px & < 480px)

   Volledig geoptimaliseerd voor bediening op smartphones naast het voertuig.

   ========================================================================== */

@media (max-width: 768px) {

    /* Standalone body en wrapper */

    body {

        overflow-x: hidden !important;

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;

    }



    .standalone-top-bar {

        padding: 8px 12px !important;

        gap: 8px !important;

        flex-wrap: wrap !important;

    }



    .standalone-brand {

        gap: 8px !important;

    }



    .standalone-brand img {

        height: 22px !important;

    }



    .standalone-brand span {

        font-size: 0.85rem !important;

        letter-spacing: 1px !important;

    }



    .hotkey-pill {

        display: none !important; /* Geen desktop sneltoetsen op smartphone */

    }



    .atelier-clock-badge {

        font-size: 0.68rem !important;

        padding: 3px 8px !important;

    }



    .btn-nav-back {

        padding: 5px 10px !important;

        font-size: 0.68rem !important;

    }



    /* Modal venster vult het hele telefoonscherm */

    .sleutel-overlay {

        padding: 0 !important;

        background: var(--sl-bg) !important;

    }



    .sleutel-modal-window {

        width: 100vw !important;

        max-width: 100vw !important;

        height: 100vh !important;

        height: 100dvh !important;

        border-radius: 0 !important;

        border: none !important;

        box-shadow: none !important;

    }



    /* Sleutel Scherm Header */

    .sleutel-header {

        padding: 10px 12px !important;

        gap: 8px !important;

    }



    .sleutel-header-left {

        gap: 8px !important;

        width: 100% !important;

        justify-content: space-between !important;

    }



    .sleutel-brand-pill {

        font-size: 0.65rem !important;

        padding: 4px 8px !important;

    }



    .sleutel-header-titles h2 {

        font-size: 0.92rem !important;

        margin: 0 !important;

        line-height: 1.2 !important;

    }



    .sleutel-header-titles p {

        display: none !important; /* Bespaart kostbare schermruimte op mobiel */

    }



    .sleutel-header-actions {

        width: 100% !important;

        display: flex !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        gap: 6px !important;

        padding-bottom: 2px !important;

        scrollbar-width: none !important;

    }



    .sleutel-header-actions::-webkit-scrollbar {

        display: none !important;

    }



    .sleutel-btn-pill {

        flex-shrink: 0 !important;

        padding: 5px 9px !important;

        font-size: 0.68rem !important;

        gap: 5px !important;

    }



    .sleutel-icon-btn,

    .sleutel-close-btn {

        flex-shrink: 0 !important;

        width: 32px !important;

        height: 32px !important;

        font-size: 0.85rem !important;

    }



    /* Project/Voertuig Selector */

    .sleutel-project-nav {

        padding: 8px 12px !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        gap: 6px !important;

        scrollbar-width: none !important;

        width: 100% !important;

        box-sizing: border-box !important;

    }



    .sleutel-project-nav::-webkit-scrollbar {

        display: none !important;

    }



    .project-pill {

        flex-shrink: 0 !important;

        padding: 6px 12px !important;

        font-size: 0.72rem !important;

    }



    /* Tabs Bar */

    .sleutel-tabs-bar {

        padding: 0 12px !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        gap: 4px !important;

        scrollbar-width: none !important;

        width: 100% !important;

        box-sizing: border-box !important;

    }



    .sleutel-tabs-bar::-webkit-scrollbar {

        display: none !important;

    }



    .sleutel-tab-btn {

        flex-shrink: 0 !important;

        padding: 8px 12px !important;

        font-size: 0.72rem !important;

        gap: 6px !important;

    }



    /* Filter Bar */

    .torque-filter-bar {

        padding: 8px 12px !important;

        flex-direction: column !important;

        gap: 8px !important;

    }



    .torque-search-wrap {

        width: 100% !important;

        min-width: 100% !important;

    }



    .torque-search-input {

        width: 100% !important;

        box-sizing: border-box !important;

        font-size: 0.8rem !important;

        padding: 8px 12px 8px 34px !important;

    }



    .torque-cat-pills {

        width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;

        flex-wrap: nowrap !important;

        padding-bottom: 4px !important;

        scrollbar-width: none !important;

    }



    .torque-cat-pills::-webkit-scrollbar {

        display: none !important;

    }



    .torque-cat-btn {

        flex-shrink: 0 !important;

        padding: 4px 10px !important;

        font-size: 0.68rem !important;

    }



    /* Torque Kaarten Grid (1 Kolom op Mobiel) */

    .torque-grid {

        grid-template-columns: 1fr !important;

        padding: 10px 12px !important;

        gap: 12px !important;

    }



    .torque-card {

        padding: 16px !important;

        border-radius: 12px !important;

    }



    .torque-main-val .val-num {

        font-size: 1.85rem !important;

    }



    .btn-nodig-trigger {

        width: 100% !important;

        justify-content: center !important;

        min-height: 42px !important;

        font-size: 0.76rem !important;

    }



    /* Boodschappenlijst Mobiel */

    .boodschappen-container {

        grid-template-columns: 1fr !important;

        padding: 10px 12px !important;

        gap: 16px !important;

    }



    .boodschappen-main-panel {

        padding: 16px !important;

        border-radius: 12px !important;

    }



    .boodschappen-add-bar {

        padding: 10px !important;

        gap: 8px !important;

    }



    .boodschappen-input-main {

        min-width: 100% !important;

        width: 100% !important;

        box-sizing: border-box !important;

    }



    .boodschappen-qty-input {

        flex: 1 !important;

    }



    .boodschappen-cat-select {

        flex: 2 !important;

        width: auto !important;

    }



    .btn-add-item-submit {

        width: 100% !important;

        justify-content: center !important;

        min-height: 42px !important;

    }



    .boodschap-item-row {

        padding: 12px 14px !important;

        flex-wrap: wrap !important;

        gap: 10px !important;

    }



    .boodschap-left {

        width: 100% !important;

    }



    .boodschap-right {

        width: 100% !important;

        justify-content: space-between !important;

        padding-top: 8px !important;

        border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;

    }



    /* Digitale Gradenschijf Dial */

    .graden-modal-content {

        max-width: 95vw !important;

        padding: 18px 14px !important;

        border-radius: 14px !important;

    }



    .graden-dial-wrap {

        width: 260px !important;

        height: 260px !important;

        margin: 10px auto !important;

    }



    .graden-dial-svg {

        width: 260px !important;

        height: 260px !important;

    }



    /* Aantrekvolgordes */

    .volgorde-grid {

        grid-template-columns: 1fr !important;

        padding: 10px 12px !important;

    }



    .volgorde-card {

        padding: 16px !important;

    }



    /* Toolbox Drawer */

    .toolbox-drawer {

        width: 100% !important;

        max-width: 100vw !important;

    }

}



@media (max-width: 480px) {

    .sleutel-brand-pill span {

        display: none !important;

    }

    .torque-main-val .val-num {

        font-size: 1.65rem !important;

    }

    .torque-card-header {

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 6px !important;

    }

    .torque-fastener-badge {

        align-self: flex-start !important;

    }

}





/* =========================================================================

   HECTOR SLEUTEL SCHERM - INTERACTIEVE VOERTUIG KIEZER HUB

   ========================================================================= */



.sleutel-picker-wrapper {

    max-width: 1360px;

    margin: 0 auto;

    padding: 32px 24px 60px;

    display: flex;

    flex-direction: column;

    gap: 32px;

    width: 100%;

    animation: fadeInPicker 0.3s ease-out;

}



@keyframes fadeInPicker {

    from { opacity: 0; transform: translateY(8px); }

    to { opacity: 1; transform: translateY(0); }

}



.sleutel-picker-hero {

    text-align: center;

    max-width: 780px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

}



.sleutel-picker-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 14px;

    background: rgba(197, 160, 89, 0.1);

    border: 1px solid rgba(197, 160, 89, 0.3);

    border-radius: 999px;

    color: var(--sl-accent-bright, #e5c378);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    font-family: var(--sl-font-mono, monospace);

}



.sleutel-picker-title {

    font-family: 'Cinzel', serif;

    font-size: 2.1rem;

    font-weight: 700;

    color: #ffffff;

    margin: 0;

    letter-spacing: 0.5px;

    line-height: 1.25;

}



.sleutel-picker-subtitle {

    font-size: 0.92rem;

    color: var(--sl-text-muted, #94a3b8);

    line-height: 1.6;

    margin: 0;

}



.sleutel-picker-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));

    gap: 22px;

    width: 100%;

}



.sleutel-picker-card {

    background: linear-gradient(180deg, #0e131f 0%, #090d16 100%);

    border: 1px solid rgba(197, 160, 89, 0.22);

    border-radius: 14px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    cursor: pointer;

    position: relative;

    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);

}



.sleutel-picker-card:hover {

    transform: translateY(-5px);

    border-color: #c5a059;

    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.6), 0 0 20px rgba(197, 160, 89, 0.25);

}



.sleutel-picker-card:focus-visible {

    outline: 2px solid #c5a059;

    outline-offset: 3px;

}



.sleutel-picker-card-media {

    position: relative;

    height: 175px;

    background: #05070b;

    overflow: hidden;

}



.sleutel-picker-card-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.sleutel-picker-card:hover .sleutel-picker-card-media img {

    transform: scale(1.05);

}



.sleutel-picker-card-media::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(9, 13, 22, 0.95) 100%);

    pointer-events: none;

}



.sleutel-picker-card-badge {

    position: absolute;

    top: 12px;

    left: 12px;

    background: rgba(9, 13, 22, 0.85);

    border: 1px solid rgba(197, 160, 89, 0.4);

    backdrop-filter: blur(8px);

    color: #e5c378;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    padding: 4px 10px;

    border-radius: 6px;

    z-index: 2;

}



.sleutel-picker-card-chassis {

    position: absolute;

    top: 12px;

    right: 12px;

    background: rgba(0, 0, 0, 0.75);

    border: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(8px);

    color: #94a3b8;

    font-family: var(--sl-font-mono, monospace);

    font-size: 0.68rem;

    padding: 4px 9px;

    border-radius: 6px;

    z-index: 2;

}



.sleutel-picker-card-content {

    padding: 20px 22px 18px;

    display: flex;

    flex-direction: column;

    flex: 1;

    gap: 14px;

}



.sleutel-picker-card-header {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.sleutel-picker-card-title {

    font-family: 'Cinzel', serif;

    font-size: 1.15rem;

    font-weight: 700;

    color: #ffffff;

    margin: 0;

    line-height: 1.3;

    letter-spacing: 0.3px;

    transition: color 0.2s ease;

}



.sleutel-picker-card:hover .sleutel-picker-card-title {

    color: #e5c378;

}



.sleutel-picker-card-engine {

    font-size: 0.78rem;

    color: #94a3b8;

    margin: 0;

    line-height: 1.45;

    display: flex;

    align-items: center;

    gap: 6px;

}



.sleutel-picker-card-engine i {

    color: #c5a059;

    font-size: 0.82rem;

}



.sleutel-picker-card-features {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}



.picker-feat-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(255, 255, 255, 0.08);

    padding: 4px 9px;

    border-radius: 6px;

    font-size: 0.72rem;

    color: #cbd5e1;

    font-weight: 500;

}



.picker-feat-pill i {

    color: #10b981;

    font-size: 0.68rem;

}



.sleutel-picker-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 14px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);

    margin-top: auto;

}



.sleutel-picker-spec-count {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 0.76rem;

    color: #94a3b8;

}



.sleutel-picker-spec-count i {

    color: #c5a059;

}



.sleutel-picker-spec-count strong {

    color: #ffffff;

    font-weight: 800;

    font-family: var(--sl-font-mono, monospace);

}



.sleutel-picker-action-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    background: linear-gradient(135deg, #c5a059 0%, #b38e46 100%);

    border: none;

    border-radius: 7px;

    color: #07090e;

    font-size: 0.74rem;

    font-weight: 800;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    cursor: pointer;

    transition: all 0.2s ease;

}



.sleutel-picker-card:hover .sleutel-picker-action-btn {

    background: #d4af6a;

    box-shadow: 0 4px 14px rgba(197, 160, 89, 0.35);

    transform: translateX(2px);

}



/* --- TOOLBAR ACTIEVE VOERTUIG CONTROLS --- */

.sleutel-unselected-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(197, 160, 89, 0.1);

    border: 1px dashed rgba(197, 160, 89, 0.4);

    padding: 7px 14px;

    border-radius: 8px;

    font-size: 0.74rem;

    color: #e5c378;

    font-weight: 700;

    letter-spacing: 0.5px;

}



.sleutel-selected-container {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}



.sleutel-active-car-chip {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: rgba(197, 160, 89, 0.12);

    border: 1px solid rgba(197, 160, 89, 0.35);

    padding: 6px 12px;

    border-radius: 8px;

}



.active-car-pulse {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #10b981;

    box-shadow: 0 0 8px #10b981;

    animation: pulseCarDot 2s infinite ease-in-out;

}



@keyframes pulseCarDot {

    0%, 100% { transform: scale(1); opacity: 1; }

    50% { transform: scale(1.3); opacity: 0.6; }

}



.active-car-label {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 0.78rem;

    color: #ffffff;

}



.active-car-label i {

    color: #c5a059;

}



.active-car-chassis-pill {

    font-family: var(--sl-font-mono, monospace);

    font-size: 0.66rem;

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 2px 6px;

    border-radius: 4px;

    color: #94a3b8;

}



.sleutel-switch-car-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 5px 12px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 6px;

    color: #ffffff;

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    cursor: pointer;

    transition: all 0.2s ease;

    margin-left: 4px;

}



.sleutel-switch-car-btn:hover {

    background: #c5a059;

    color: #07090e;

    border-color: #c5a059;

}



.sleutel-quick-switch-pills {

    display: flex;

    align-items: center;

    gap: 6px;

}



.sleutel-tabs-dimmed {

    opacity: 0.45;

    pointer-events: auto;

}



/* Standalone top bar active car pill */

.standalone-active-veh-pill {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(0, 0, 0, 0.45);

    border: 1px solid rgba(197, 160, 89, 0.25);

    padding: 4px 12px;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.standalone-active-veh-pill:hover {

    border-color: #c5a059;

    background: rgba(197, 160, 89, 0.1);

}



.top-switch-badge {

    font-size: 0.65rem;

    font-weight: 700;

    background: rgba(197, 160, 89, 0.18);

    color: #e5c378;

    border: 1px solid rgba(197, 160, 89, 0.35);

    padding: 2px 7px;

    border-radius: 4px;

    text-transform: uppercase;

}



@media (max-width: 768px) {

    .sleutel-picker-grid {

        grid-template-columns: 1fr;

    }

    .sleutel-picker-title {

        font-size: 1.6rem;

    }

    .sleutel-picker-card-media {

        height: 140px;

    }

    .sleutel-quick-switch-pills {

        display: none;

    }

}



/* ==========================================================================

   ACTIEF VOERTUIG BANNER & VERFIJNDE BOUTKAARTEN

   ========================================================================== */

.active-vehicle-banner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    background: linear-gradient(135deg, rgba(197, 160, 89, 0.08) 0%, rgba(15, 23, 42, 0.6) 100%);

    border: 1px solid rgba(197, 160, 89, 0.3);

    border-radius: 12px;

    padding: 12px 18px;

    margin-bottom: 12px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);

    flex-wrap: wrap;

}



.active-vehicle-left {

    display: flex;

    align-items: center;

    gap: 14px;

}



.active-dot-live {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #10b981;

    box-shadow: 0 0 10px #10b981;

    display: inline-block;

    flex-shrink: 0;

}



.active-vehicle-names {

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.active-vehicle-title {

    font-size: 1.02rem;

    font-weight: 800;

    color: #ffffff;

    letter-spacing: 0.3px;

}



.active-vehicle-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}



.active-chassis-chip,

.active-engine-chip,

.active-specs-chip {

    font-family: var(--sl-font-mono);

    font-size: 0.68rem;

    padding: 2px 8px;

    border-radius: 4px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #cbd5e1;

}



.active-chassis-chip {

    color: var(--sl-accent-bright);

    border-color: rgba(197, 160, 89, 0.25);

}



.btn-change-vehicle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    height: 32px;

    padding: 0 14px;

    background: rgba(197, 160, 89, 0.15);

    border: 1px solid rgba(197, 160, 89, 0.45);

    border-radius: 8px;

    color: #ffffff;

    font-size: 0.72rem;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.2s ease;

    white-space: nowrap;

}



.btn-change-vehicle:hover {

    background: var(--sl-accent);

    color: #07090e;

    box-shadow: 0 4px 14px rgba(197, 160, 89, 0.35);

    transform: translateY(-1px);

}