/* ===================================
   Dark Theme Custom Styles
   Modern Professional Dark Mode
   =================================== */

:root {
    /* Aethium merkkleuren — bron: public/assets/brand/aethium-v1.
       De grijstrap en de accent-tekstkleur volgen console-brand.css uit
       LasseHoutenbosSite, zodat beide apps hetzelfde systeem delen. */
    --brand-obsidian: #0A0D12;
    --brand-steel: #8B949E;
    --brand-blue: #0066FF;
    --brand-white: #FFFFFF;

    --bg-primary: #0A0D12;
    --bg-secondary: #10151c;
    --bg-tertiary: #171e27;
    --bg-elevated: #252e39;
    --text-primary: #e9edf2;
    --text-secondary: #aab3bd;
    --text-muted: #8B949E;
    --accent-primary: #0066FF;
    /* Vullingen met #0066FF halen maar 3,8:1 als tekstkleur op donker — te
       weinig voor WCAG AA. Accentkleurige tekst, iconen en links gebruiken
       daarom --accent-text (8,9:1); #0066FF blijft voor vlakken met witte
       tekst erop en voor randen en balkjes. */
    --accent-text: #9AB8E2;
    --accent-secondary: #4da3ff;
    --accent-hover: #0052cc;
    /* Tekst op een accentvlak; blauw vraagt om wit, niet om donker. */
    --accent-contrast: #FFFFFF;
    /* Losse kanalen zodat rgba()-highlights het accent volgen. */
    --accent-rgb: 0, 102, 255;
    --border-color: #2b3541;
    --border-light: #45515e;
    --success: #52b788;
    --warning: #ffd60a;
    --danger: #e63946;
    --info: #4cc9f0;

    /* Semantische acties. Een vulling draagt witte tekst, dus die is net
       donker genoeg voor 4,5:1; de losse -text-variant is juist lichter,
       omdat dezelfde kleur als tekst op obsidian anders wegvalt. Hover gaat
       op een donkere UI omhoog in helderheid: donkerder leest als "uit". */
    --danger-fill: #d62839;
    --danger-hover: #f04a57;
    --danger-text: #ff8a93;
    --danger-rgb: 214, 40, 57;

    --success-fill: #27804f;
    --success-hover: #33a466;
    --success-text: #6fd89b;
    --success-rgb: 39, 128, 79;

    --warning-fill: #ffd60a;
    --warning-hover: #ffe14d;
    --warning-text: #ffd60a;
    --warning-rgb: 255, 214, 10;
}

/* Global Overrides */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sidebar Styling */
.sidebar {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    flex-shrink: 0;
    min-height: 100vh;
    background-color: var(--bg-secondary);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Collapsed sidebar on desktop */
@media (min-width: 992px) {
    .sidebar.collapsed {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
    }

    .sidebar.collapsed .sidebar-header h4 span,
    .sidebar.collapsed .sidebar-header h5,
    .sidebar.collapsed .sidebar-header small {
        display: none !important;
    }

    .sidebar.collapsed .sidebar-header h4 i {
        margin-right: 0 !important;
    }

    .sidebar.collapsed .sidebar-header {
        justify-content: center !important;
        padding: 0.75rem !important;
    }

    .sidebar.collapsed .sidebar-logo {
        height: 32px !important;
    }

    .sidebar.collapsed .sidebar-nav .nav-link {
        text-align: center;
        padding: 0.75rem 0;
        justify-content: center;
        border-left: none;
        border-bottom: 2px solid transparent;
    }

    .sidebar.collapsed .sidebar-nav .nav-link span {
        display: none;
    }

    .sidebar.collapsed .sidebar-nav .nav-link i {
        margin-right: 0 !important;
        font-size: 1.15rem;
    }

    .sidebar.collapsed .sidebar-nav .nav-link:hover,
    .sidebar.collapsed .sidebar-nav .nav-link.active {
        border-left: none;
        border-bottom-color: var(--accent-primary);
    }

    .sidebar.collapsed .sidebar-footer {
        padding: 0.5rem !important;
    }

    .sidebar.collapsed .sidebar-footer small {
        display: none;
    }

    .sidebar.collapsed .nav-divider {
        margin: 0.5rem 0.5rem;
    }

    .sidebar.collapsed #sidebarCollapseBtn i::before {
        content: "\f101"; /* fa-angle-double-right */
    }

    /* Tooltip for collapsed sidebar nav items */
    .sidebar.collapsed .nav-link {
        position: relative;
    }

    .sidebar.collapsed .nav-link[title]:hover::after {
        content: attr(title);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        background: var(--bg-tertiary);
        color: var(--text-primary);
        padding: 0.35rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.85rem;
        white-space: nowrap;
        z-index: 1050;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        margin-left: 8px;
        pointer-events: none;
    }
}

#sidebarCollapseBtn {
    transition: transform 0.3s ease;
}

.sidebar.collapsed #sidebarCollapseBtn {
    transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed !important;
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        left: -280px;
        top: 0;
        height: 100vh;
        z-index: 1040;
        transition: left 0.3s ease;
        box-shadow: 4px 0 10px rgba(0,0,0,0.3);
    }
}

.bg-dark-custom {
    background-color: var(--bg-secondary) !important;
}

.sidebar-header {
    border-bottom: 1px solid var(--border-color);
}

.text-accent {
    color: var(--accent-text) !important;
}

.sidebar-nav {
    padding: 1rem 0;
}

.sidebar-nav .nav-link {
    /* Inactieve items op --text-primary: --text-secondary zakte onder de
       leesbaarheidsgrens zodra de achtergrond naar obsidian ging. */
    color: var(--text-primary);
    padding: 0.7rem 1.5rem;
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    line-height: 1.4;
}

.sidebar-nav .nav-link i {
    /* Vaste kolom voor de iconen zodat de labels uitlijnen. */
    width: 1.35rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.sidebar-nav .nav-link:hover {
    color: var(--brand-white);
    background-color: rgba(var(--accent-rgb), 0.12);
    border-left-color: var(--accent-primary);
}

.sidebar-nav .nav-link:hover i {
    color: var(--accent-text);
}

.sidebar-nav .nav-link.active {
    color: var(--brand-white);
    background-color: rgba(var(--accent-rgb), 0.18);
    border-left-color: var(--accent-primary);
    font-weight: 600;
}

.sidebar-nav .nav-link.active i {
    color: var(--accent-text);
}

/* Toetsenbordfocus moet zichtbaar blijven boven het accentvlak. */
.sidebar-nav .nav-link:focus-visible,
.navbar .btn:focus-visible,
.navbar a:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: -2px;
}

.nav-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 1rem 0;
}

/* Sidebar nav groups (collapsible submenus) */
.sidebar-nav .nav-group-toggle {
    display: flex;
    align-items: center;
}

.sidebar-nav .nav-group-toggle .nav-group-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    margin-left: auto;
    opacity: 0.7;
}

.sidebar-nav .nav-group-toggle.collapsed .nav-group-chevron {
    transform: rotate(-90deg);
}

.sidebar-nav .nav-submenu {
    padding-left: 0;
    margin: 0;
    list-style: none;
    background-color: rgba(0, 0, 0, 0.15);
}

.sidebar-nav .nav-submenu .nav-link {
    padding-left: 2.6rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.sidebar-nav .nav-submenu .nav-link:hover,
.sidebar-nav .nav-submenu .nav-link.active {
    color: var(--brand-white);
}

.sidebar.collapsed .nav-group-chevron {
    display: none;
}

.sidebar.collapsed .nav-submenu .nav-link {
    padding-left: 1rem;
}

.sidebar.collapsed .nav-submenu .nav-link span {
    display: none;
}

.sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid var(--border-color);
}

/* Navbar */
.navbar {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Bootstrap zet .navbar-dark-links op een gedempt wit; op obsidian is dat
   te weinig scheiding tussen actief en inactief. */
.navbar .nav-link,
.navbar .btn-link {
    color: var(--text-primary);
}

.navbar .nav-link:hover,
.navbar .btn-link:hover {
    color: var(--accent-text);
}

.navbar .navbar-text,
.navbar small {
    color: var(--text-secondary) !important;
}

.breadcrumb {
    background: transparent;
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-item a:hover {
    color: var(--accent-text);
}

.breadcrumb-item.active {
    color: var(--text-primary);
}

/* Cards */
.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.card-header {
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

/* KPI Cards */
.kpi-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-left: 4px solid var(--accent-primary);
}

.kpi-card .kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.kpi-card .kpi-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-card .kpi-icon {
    font-size: 2.5rem;
    color: var(--accent-primary);
    opacity: 0.3;
}

/* Buttons */
.btn-accent {
    background-color: var(--accent-primary);
    color: var(--accent-contrast);
    border: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-accent:hover {
    background-color: var(--accent-hover);
    color: var(--accent-contrast);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

/* Bootstrap's .btn:disabled weegt zwaarder dan .btn-accent en zet de
   achtergrond op transparant; dan blijft er alleen zwevende tekst over. */
.btn-accent:disabled,
.btn-accent.disabled {
    background-color: var(--accent-primary);
    color: var(--accent-contrast);
    opacity: 0.55;
}

.btn-outline-accent {
    border-color: var(--accent-primary);
    color: var(--accent-text);
}

.btn-outline-accent:disabled,
.btn-outline-accent.disabled {
    border-color: var(--border-light);
    color: var(--text-muted);
    opacity: 0.8;
}

.btn-outline-accent:hover {
    background-color: var(--accent-primary);
    color: var(--accent-contrast);
}

/* --- Semantische knoppen ---------------------------------------------
   Bootstrap maakt een vulling donkerder bij hover. Dat werkt op een licht
   thema, maar op obsidian lijkt de knop dan uitgeschakeld. Hier gaat hover
   juist omhoog, en de focusring neemt de kleur van de actie over in plaats
   van Bootstrap-blauw. */

.btn-danger {
    background-color: var(--danger-fill);
    border-color: var(--danger-fill);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus-visible {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
    color: #fff;
}

.btn-danger:active,
.btn-danger.active {
    background-color: var(--danger-fill) !important;
    border-color: var(--danger-text) !important;
    color: #fff !important;
}

.btn-outline-danger {
    border-color: var(--danger-fill);
    color: var(--danger-text);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    background-color: var(--danger-fill);
    border-color: var(--danger-fill);
    color: #fff;
}

.btn-success {
    background-color: var(--success-fill);
    border-color: var(--success-fill);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus-visible {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
    color: #fff;
}

.btn-outline-success {
    border-color: var(--success-fill);
    color: var(--success-text);
}

.btn-outline-success:hover,
.btn-outline-success:focus-visible {
    background-color: var(--success-fill);
    border-color: var(--success-fill);
    color: #fff;
}

/* Geel draagt altijd donkere tekst; hier blijft hover dus oplichten. */
.btn-warning {
    background-color: var(--warning-fill);
    border-color: var(--warning-fill);
    color: var(--brand-obsidian);
}

.btn-warning:hover,
.btn-warning:focus-visible {
    background-color: var(--warning-hover);
    border-color: var(--warning-hover);
    color: var(--brand-obsidian);
}

.btn-outline-warning {
    border-color: var(--warning-fill);
    color: var(--warning-text);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus-visible {
    background-color: var(--warning-fill);
    border-color: var(--warning-fill);
    color: var(--brand-obsidian);
}

/* Neutrale knoppen: Bootstrap's #6c757d haalt op obsidian geen 4,5:1. */
.btn-secondary {
    background-color: var(--bg-elevated);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: #303b48;
    border-color: var(--text-muted);
    color: var(--brand-white);
}

.btn-outline-secondary {
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background-color: var(--bg-elevated);
    border-color: var(--text-muted);
    color: var(--brand-white);
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
    background-color: var(--bg-elevated);
    border-color: var(--brand-white);
    color: var(--brand-white);
}

/* De focusring moet de kleur van de actie dragen, niet Bootstrap-blauw:
   anders ziet een gefocuste verwijderknop eruit als een gewone knop. */
.btn-danger:focus-visible,
.btn-outline-danger:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--danger-rgb), 0.4);
}

.btn-success:focus-visible,
.btn-outline-success:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--success-rgb), 0.4);
}

.btn-warning:focus-visible,
.btn-outline-warning:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--warning-rgb), 0.4);
}

/* Losse tekst en icoonknoppen, zoals het prullenbakje in een tabelrij. */
.text-danger {
    color: var(--danger-text) !important;
}

.text-success {
    color: var(--success-text) !important;
}

.btn-link.text-danger:hover,
a.text-danger:hover {
    color: var(--danger-hover) !important;
}

/* Een verwijderregel in een dropdown kleurt mee in plaats van grijs te
   worden, zodat de gevolgen zichtbaar blijven tot het laatste moment. */
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    background-color: rgba(var(--danger-rgb), 0.18);
    color: var(--danger-text) !important;
}

/* Tables */
.table {
    color: var(--text-primary);
}

.table-dark {
    --bs-table-bg: var(--bg-secondary);
    --bs-table-border-color: var(--border-color);
}

.table-hover tbody tr {
    transition: background-color 0.2s ease;
}

.table-hover tbody tr:hover {
    background-color: rgba(var(--accent-rgb), 0.08);
}

/* Badges */
.badge {
    font-weight: 600;
    padding: 0.4em 0.8em;
    border-radius: 6px;
}

.badge-sm {
    font-size: 0.7rem;
    padding: 0.25em 0.6em;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
}

.badge.bg-success {
    background-color: var(--success) !important;
}

.badge.bg-warning {
    background-color: var(--warning) !important;
    color: var(--brand-obsidian) !important;
}

.badge.bg-danger {
    background-color: var(--danger) !important;
}

.badge.bg-info {
    background-color: var(--info) !important;
    color: var(--brand-obsidian) !important;
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.15);
}

.form-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.form-text {
    color: var(--text-muted) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* Input Group */
.input-group-text {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Bootstrap bg-light override for dark theme - CRITICAL */
.card.bg-light,
.bg-light,
div.bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.card.bg-light .card-header,
.bg-light .card-header,
div.bg-light .card-header {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.card.bg-light .card-body,
.bg-light .card-body,
div.bg-light .card-body {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Bootstrap bg-primary override for dark theme */
.bg-primary,
.card-header.bg-primary {
    background-color: var(--accent-primary) !important;
    color: var(--brand-obsidian) !important;
}

.bg-primary.text-white,
.text-white {
    color: var(--brand-obsidian) !important;
}

/* Ensure all text elements in bg-light cards are visible */
.bg-light .form-label,
.bg-light label,
.card.bg-light .form-label,
.card.bg-light label {
    color: var(--text-primary) !important;
}

.bg-light h6,
.card.bg-light h6 {
    color: var(--text-primary) !important;
}

.bg-light .text-muted,
.bg-light .form-text,
.card.bg-light .text-muted,
.card.bg-light .form-text {
    color: var(--text-secondary) !important;
}

.bg-light p,
.card.bg-light p {
    color: var(--text-primary) !important;
}

.bg-light small,
.card.bg-light small {
    color: var(--text-secondary) !important;
}

/* File Upload Zone */
.upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    background-color: var(--bg-tertiary);
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--accent-primary);
    background-color: rgba(var(--accent-rgb), 0.05);
}

/* Project file folders: drop target while dragging a file/folder row */
.folder-row[draggable="true"],
[data-drag-file] {
    cursor: grab;
}

.folder-drop-active,
.list-group-item.folder-drop-active {
    outline: 2px dashed var(--accent-primary);
    outline-offset: -2px;
    background-color: rgba(var(--accent-rgb), 0.08);
}

.upload-zone i {
    font-size: 3rem;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

/* Recursive Parts Tree */
.parts-tree {
    list-style: none;
    padding-left: 0;
}

.parts-tree ul {
    list-style: none;
    padding-left: 1.5rem;
    border-left: 2px solid var(--border-color);
    margin-left: 0.5rem;
}

.parts-tree li {
    position: relative;
    padding: 0.5rem 0;
}

.parts-tree li::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 1.25rem;
    width: 1rem;
    height: 2px;
    background-color: var(--border-color);
}

.parts-tree .part-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background-color: var(--bg-tertiary);
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.parts-tree .part-item:hover {
    background-color: rgba(var(--accent-rgb), 0.1);
    transform: translateX(4px);
}

.parts-tree .part-icon {
    margin-right: 0.75rem;
    color: var(--accent-text);
}

.parts-tree .part-name {
    flex-grow: 1;
    font-weight: 500;
}

.parts-tree .part-code {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-right: 1rem;
}

.parts-tree .part-price {
    color: var(--accent-text);
    font-weight: 600;
}

/* Tab Navigation Styling */
.nav-tabs {
    border-bottom: 2px solid var(--border-color) !important;
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    color: var(--accent-text);
    background-color: rgba(var(--accent-rgb), 0.05);
    border-bottom-color: var(--accent-primary);
}

.nav-tabs .nav-link.active {
    color: var(--accent-text);
    background-color: transparent;
    border-bottom-color: var(--accent-primary) !important;
    box-shadow: inset 0 -3px 0 var(--accent-primary);
}

.tab-content {
    animation: fadeIn 0.3s ease-in;
}

.tab-pane {
    display: none;
}

.tab-pane.active,
.tab-pane.show {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 3D Viewer Container */
.viewer-container {
    background-color: #0a0a0a;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.viewer-placeholder {
    text-align: center;
    color: var(--text-muted);
}

.viewer-placeholder i {
    font-size: 4rem;
    margin-bottom: 1rem;
}

/* Modals */
.modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
}

/* Alerts */
.alert {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* Quick Action Buttons */
.quick-action-btn {
    padding: 2rem;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.quick-action-btn:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.2);
}

.quick-action-btn i {
    font-size: 3rem;
    color: var(--accent-text);
    margin-bottom: 1rem;
}

.quick-action-btn .btn-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.quick-action-btn .btn-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
}

.status-badge i {
    font-size: 0.75rem;
}

.status-active {
    background-color: rgba(82, 183, 136, 0.2);
    color: var(--success);
    border: 1px solid var(--success);
}

.status-concept {
    background-color: rgba(128, 128, 128, 0.2);
    color: var(--text-muted);
    border: 1px solid var(--text-muted);
}

.status-finished {
    background-color: rgba(76, 201, 240, 0.2);
    color: var(--info);
    border: 1px solid var(--info);
}

/* Responsive
   NOTE: the off-canvas sidebar (hidden/shown) state for < 992px is owned by the
   authoritative rule at the top of this file (position: fixed; left: -280px) and
   the `.sidebar.show { left: 0 }` rule. Do NOT redeclare .sidebar width/position
   here — forcing min/max-width:100% used to leave the menu permanently on screen. */
@media (max-width: 768px) {
    #page-content-wrapper {
        width: 100%;
    }
}

/* Paneel met eigen verticale scroll (kolommen naast elkaar even hoog
   houden). Op mobiel wordt deze cap opgeheven — zie mobile.css: een
   scrollgebied binnen een scrollende pagina werkt daar tegen je. */
.panel-scroll {
    max-height: 700px;
    overflow-y: auto;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

/* Collapsible Parts Tree */
.toggle-collapse {
    padding: 0.25rem 0.5rem;
    color: var(--text-secondary);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
}

.toggle-collapse:hover {
    color: var(--accent-text);
    background-color: rgba(var(--accent-rgb), 0.1);
    border-radius: 4px;
}

.toggle-collapse i {
    transition: transform 0.3s ease;
    font-size: 0.875rem;
}

.toggle-collapse:not(.collapsed) i {
    transform: rotate(90deg);
}

/* Collapse animation */
.collapse {
    transition: all 0.3s ease;
}

.collapse.show {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* Nested parts styling */
.nested-parts {
    margin-left: 1rem;
    border-left: 2px solid var(--accent-primary);
}

/* Hierarchy tree in tables */
.collapse-row > td {
    padding: 0 !important;
    border: none !important;
}
.collapse-row .table {
    margin-bottom: 0 !important;
    border-collapse: collapse;
}
.collapse-row .table td {
    border-top: 1px solid rgba(255,255,255,0.05);
}

.nested-parts .list-group-item {
    background-color: rgba(var(--accent-rgb), 0.05);
}

.nested-parts .list-group-item:hover {
    background-color: rgba(var(--accent-rgb), 0.08);
}

/* ===================================
   Sortable Table Headers
   =================================== */

th.sortable {
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

th.sortable:hover {
    color: var(--accent-text);
    background-color: rgba(var(--accent-rgb), 0.06);
}

/* ===================================
   Catalog Accordion Headers
   =================================== */

.catalog-acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-right: 0.5rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.catalog-acc-title {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
    flex-shrink: 0;
}

.catalog-acc-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .catalog-acc-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .catalog-acc-meta {
        margin-top: 0.25rem;
    }
}

/* ===================================
   Mobile Catalog Cards (< 768px)
   =================================== */

.catalog-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin: 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.catalog-card:active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}

.catalog-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

.catalog-card-body {
    padding: 0.4rem 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.catalog-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    font-size: 0.875rem;
}

.catalog-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    min-width: 70px;
}

.catalog-card-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
}

/* ===================================
   Responsive Sidebar & Mobile Styles
   =================================== */

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1035; /* Below sidebar (1040) but above everything else */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 991.98px) {
    .sidebar.show {
        left: 0;
    }
    
    /* Adjust main content padding if needed, but flex-fill handles it usually */
    #page-content-wrapper {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Adjust navbar padding for the toggle button */
    .navbar .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ===================================
   Mobile First Responsive Design (Phones 320px - 480px)
   =================================== */

@media (max-width: 480px) {
    /* Root font sizing for smaller screens */
    html {
        font-size: 13px;
    }
    
    /* Sidebar adjustments */
    .sidebar-header h4 {
        font-size: 1rem;
    }
    
    /* Typography */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
    h4 { font-size: 1rem !important; }
    h5 { font-size: 0.95rem !important; }
    h6 { font-size: 0.9rem !important; }
    
    /* Navbar adjustments */
    .navbar {
        padding: 0.5rem !important;
    }
    
    .navbar-dark .navbar-text {
        font-size: 0.85rem;
    }
    
    /* KPI Cards */
    .kpi-card {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .kpi-card .kpi-value {
        font-size: 1.5rem;
    }
    
    .kpi-card .kpi-label {
        font-size: 0.8rem;
    }
    
    .kpi-card .kpi-icon {
        font-size: 2rem;
    }
    
    /* Cards */
    .card {
        margin-bottom: 0.75rem !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
    
    /* Tables */
    .table {
        font-size: 0.85rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem !important;
    }
    
    /* Responsive table: Stack on mobile */
    .table-responsive-mobile {
        display: block;
        overflow-x: auto;
    }
    
    /* Forms */
    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }
    
    .form-control,
    .form-select {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 0.5rem !important;
    }
    
    /* Buttons */
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem;
        min-height: 44px; /* Touch-friendly size */
        min-width: 44px;
    }
    
    .btn-sm {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem;
    }
    
    /* Input groups */
    .input-group-text {
        padding: 0.5rem !important;
        font-size: 0.85rem;
    }
    
    /* Badges */
    .badge {
        font-size: 0.7rem;
        padding: 0.3em 0.6em;
    }
    
    /* Upload zone */
    .upload-zone {
        padding: 1.5rem !important;
    }
    
    .upload-zone i {
        font-size: 2rem;
    }
    
    /* Modals */
    .modal-body {
        padding: 1rem !important;
    }
    
    /* Collapse/Accordion */
    .accordion-button {
        padding: 0.75rem !important;
        font-size: 0.9rem;
    }
    
    /* Tabs */
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem;
    }
    
    /* Quick action buttons */
    .quick-action-btn {
        padding: 1rem !important;
    }
    
    .quick-action-btn i {
        font-size: 2rem;
    }
    
    .quick-action-btn .btn-title {
        font-size: 1rem;
    }
    
    /* Lists and spacing */
    .list-group-item {
        padding: 0.75rem !important;
    }
    
    /* Breadcrumbs */
    .breadcrumb {
        padding: 0.5rem 0 !important;
    }
    
    .breadcrumb-item {
        font-size: 0.8rem;
    }
}

/* ===================================
   Small Phones (481px - 576px)
   =================================== */

@media (max-width: 576px) {
    html {
        font-size: 14px;
    }
    
    /* Tables: Convert to card layout on very small screens */
    .table-stack tbody {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .table-stack tbody tr {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 0.75rem;
        background-color: var(--bg-tertiary);
    }
    
    .table-stack th {
        display: none;
    }
    
    .table-stack td {
        display: block;
        text-align: right;
        padding: 0.5rem 0 !important;
        border: none;
        padding-left: 50%;
        position: relative;
    }
    
    .table-stack td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: var(--text-secondary);
    }
    
    /* Reduce padding on smaller screens */
    main.container-fluid {
        padding: 1rem 0.5rem !important;
    }
    
    /* Row columns */
    .row > * {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ===================================
   Tablets (577px - 768px)
   =================================== */

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    /* NB: hier stonden .col-md-* overrides met !important. Onder 768px is
       col-md-* al niet actief, dus die regels overschreven juist de
       bewust gekozen col-6/col-4 klassen van de pagina's zelf. Verwijderd
       zodat Bootstrap zijn eigen breekpunten weer bepaalt. */

    /* KPI cards in 2-column layout */
    .kpi-card {
        margin-bottom: 1rem !important;
    }
    
    /* Navbar adjustments */
    .navbar {
        padding: 0.75rem 0.5rem !important;
    }
    
    /* Form groups */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    /* Tables: Responsive scroll on tablet */
    .table-responsive {
        margin: -0.75rem -0.75rem 0 -0.75rem;
    }
    
    /* Responsive tabs */
    .nav-tabs {
        flex-wrap: wrap;
    }
    
    .nav-tabs .nav-link {
        flex-grow: 1;
        text-align: center;
        border-radius: 8px 8px 0 0;
    }
}

/* ===================================
   Medium Screens (769px - 991px)
   =================================== */

@media (max-width: 991px) {
    /* Sidebar hidden/shown state is handled by the authoritative rules above
       (left: -280px / .sidebar.show { left: 0 }). Don't redeclare it here. */
    #page-content-wrapper {
        width: 100%;
    }

    /* Zie de opmerking bij het 768px-blok: ook deze .col-lg-* overrides
       vochten met de col-6/col-md-* klassen van de pagina's zelf. */

    /* Hide breadcrumbs on smaller screens */
    .breadcrumb {
        font-size: 0.85rem;
    }
}

/* ===================================
   Large Screens (992px+)
   =================================== */

@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: 0;
        left: auto;
        height: 100vh;
        z-index: auto;
    }
    
    #page-content-wrapper {
        width: auto;
        /* Flex items default to min-width:auto, which lets a wide table (e.g. the
           parts catalog) stretch this column past the viewport and give the whole
           page a horizontal scrollbar. min-width:0 keeps it inside the flex row so
           wide tables scroll within their own .table-responsive card instead. */
        min-width: 0;
    }

    .navbar {
        position: sticky;
        top: 0;
        z-index: 1030;
    }
}

/* ===================================
   Touch-friendly Enhancements
   =================================== */

/* Larger touch targets */
@media (hover: none) and (pointer: coarse) {
    /* Mobile/touch devices */
    
    /* Alleen echte bedienelementen krijgen een tapdoel van 44px. Eerder
       gold dit voor élke <a> en <button>, waardoor inline tekstlinks,
       breadcrumb-items en badges als blokken gingen renderen en rijen in
       tabellen onnodig hoog werden. */
    .btn:not(.btn-sm):not(.btn-link),
    .nav-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Kleine knoppen (tabelacties, kaartvoeten) blijven compact maar
       houden een bruikbaar tapdoel. */
    .btn-sm {
        min-height: 34px;
        min-width: 34px;
    }

    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Increase tap targets */
    .dropdown-item {
        padding: 0.75rem 1.5rem !important;
    }
    
    /* Better spacing for touch */
    .list-group-item {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    
    .table tbody tr {
        min-height: 44px;
    }
}

/* ===================================
   Landscape Mode
   =================================== */

@media (max-height: 500px) and (min-width: 992px) {
    /* Reduce vertical padding in landscape */
    .sidebar {
        min-height: auto;
        height: auto;
        max-height: 100vh;
    }
    
    main {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    
    .card {
        margin-bottom: 0.5rem !important;
    }
}

/* ===================================
   Print Styles
   =================================== */

@media print {
    .sidebar,
    .navbar,
    .sidebar-overlay,
    .btn-close,
    .breadcrumb {
        display: none !important;
    }
    
    #page-content-wrapper {
        width: 100%;
    }
    
    body {
        background-color: white;
        color: black;
    }
    
    .card {
        page-break-inside: avoid;
    }
    
    .table {
        page-break-inside: avoid;
    }
}

/* ===================================
   Scrollbar - Mobile friendly
   =================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* Better scrolling on touch devices */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}