/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    --brand-black: #000;
    --brand-orange: #eb5e28;
    --brand-green: #4CAF50;
    --border-color: #ccc;
    --hover-bg: #f9f9f9;
    --nav-height: 60px;
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #fff; 
    color: var(--brand-black); 
    margin: 0; 
    padding: 0; 
}

/* =========================================
   2. SIDEBAR
   ========================================= */
:root {
    --sb-width-expanded: 220px;
    --sb-width-collapsed: 58px;
    --header-height: 48px;
}

body { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sb-width-expanded);
    min-width: var(--sb-width-expanded);
    height: 100vh;
    position: sticky; top: 0;
    background: var(--brand-black);
    color: #aaa;
    display: flex; flex-direction: column;
    overflow-x: hidden; overflow-y: auto;
    transition: width 0.2s ease, min-width 0.2s ease;
    z-index: 1001;
}
.sidebar.collapsed { width: var(--sb-width-collapsed); min-width: var(--sb-width-collapsed); }
.sidebar.collapsed .sb-logo-full,
.sidebar.collapsed .sb-label,
.sidebar.collapsed .sb-section-label { display: none; }
.sidebar.collapsed .sb-logo { display: flex; }
.sidebar.collapsed .sb-item { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .sb-icon { margin: 0; }

/* Sidebar tooltip (appended to body via JS) */
.sb-tooltip {
    position: fixed; background: #222; color: #fff; font-size: 12px; font-weight: 600;
    padding: 5px 10px; border-radius: 4px; white-space: nowrap; z-index: 9999;
    pointer-events: none; opacity: 0; transition: opacity 0.12s;
}
.sb-tooltip.visible { opacity: 1; }
.sb-tooltip::before {
    content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
    border: 5px solid transparent; border-right-color: #222;
}

.sb-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid #222;
    flex-shrink: 0;
}
.sb-logo {
    display: none;
    font-family: 'Anton', sans-serif; font-size: 22px; color: white;
    text-decoration: none; align-items: center; justify-content: center;
}
.sb-logo span { color: var(--brand-orange); }
.sb-logo-full {
    display: block;
    font-family: 'Anton', sans-serif; font-size: 20px; color: white;
    text-decoration: none; letter-spacing: 0.5px;
}
.sb-logo-full span { color: var(--brand-orange); }

.sb-section-label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.2px; color: #555; padding: 18px 16px 6px;
}

.sb-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px; cursor: pointer;
    transition: all 0.15s; font-size: 13px; font-weight: 500;
    color: #888; text-decoration: none;
    border-left: 3px solid transparent;
}
.sb-item:hover { color: #ddd; background: rgba(255,255,255,0.05); }
.sb-item.active { color: white; background: rgba(255,255,255,0.08); border-left-color: var(--brand-orange); }

.sb-icon {
    width: 18px; height: 18px; min-width: 18px;
    stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    fill: none;
}

.sb-footer {
    margin-top: auto;
    border-top: 1px solid #222;
    padding: 6px 0;
}
.sb-toggle { color: #555; }
.sb-toggle:hover { color: #999; }

/* Right side wrapper */
#main-content {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}

/* =========================================
   2b. TOP HEADER
   ========================================= */
.top-header {
    height: var(--header-height);
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px;
    position: sticky; top: 0; z-index: 1000;
    flex-shrink: 0;
}
.th-left { display: flex; align-items: center; gap: 10px; }
.th-right { display: flex; align-items: center; gap: 10px; }

.th-quick-btns { display: flex; gap: 4px; }
.th-qbtn {
    width: 32px; height: 32px; border-radius: 6px;
    background: transparent; border: 1px solid #ddd; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; padding: 0;
}
.th-qbtn svg {
    width: 16px; height: 16px; stroke: #666; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.th-qbtn:hover { background: #eee; border-color: #bbb; }
.th-qbtn:hover svg { stroke: #333; }

/* Header Save Status & Button */
.header-save-status {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    margin-right: 10px; line-height: 1.3; font-size: 10px;
    font-family: 'Inter', sans-serif; color: #999; text-transform: uppercase; letter-spacing: 0.5px;
}
.header-save-status span { color: #333; font-weight: 600; margin-left: 4px; }

.btn-global-save {
    background-color: var(--brand-green); color: white; border: none;
    height: 32px; font-size: 11px; letter-spacing: 0.5px; font-weight: 700;
    padding: 0 14px; border-radius: 6px; cursor: pointer;
}
.btn-global-save:hover { background-color: #43a047; }

/* =========================================
   3. LAYOUT & TYPOGRAPHY
   ========================================= */
.view-section { display: none; padding: 20px 30px; max-width: 100%; flex: 1; }
.view-section.active { display: block; }
.narrow-container { width: 50%; min-width: 600px; }

h1 { 
    font-family: 'Anton', sans-serif; font-size: 64px; margin: 0; line-height: 0.9; 
    text-transform: uppercase; letter-spacing: 1px; 
}
.subtitle { 
    font-size: 16px; color: var(--brand-orange); font-weight: 700; 
    text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px; 
}
.page-header { 
    margin-bottom: 20px; border-bottom: 4px solid var(--brand-black); 
    padding-bottom: 15px; display: flex; justify-content: space-between; align-items: flex-end; 
}
.header-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

/* =========================================
   4. UI COMPONENTS (Buttons, Inputs, etc)
   ========================================= */
/* Buttons */
button {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase;
    padding: 0 16px; height: 38px; cursor: pointer;
    border: 2px solid var(--brand-black); background: white; transition: all 0.2s;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap;
}
button:hover { background: var(--brand-black); color: white; }
.btn-icon-only { padding: 0 12px; font-size: 16px; }

.btn-trash {
    background: #ffebee; border: 1px solid #ef5350; color: #c62828; 
    font-size: 18px; width: 40px; height: 40px; border-radius: 4px;
}
.btn-trash:hover { background: #ef5350; color: white; }

.tools-row { display: flex; align-items: flex-end; gap: 20px; }
.action-bar { display: flex; gap: 8px; }
.vertical-divider { width: 1px; height: 24px; background-color: #ddd; margin: 0 10px; }

/* Save Indicators */
.save-info { font-size: 10px; color: #999; font-style: italic; display: flex; align-items: center; gap: 5px; height: 14px; }
.save-indicator { width: 6px; height: 6px; background-color: #ccc; border-radius: 50%; display: inline-block; }
.save-indicator.local { background-color: var(--brand-orange); }
.save-indicator.cloud { background-color: var(--brand-green); }
.save-indicator.loading { background-color: #2196F3; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Inputs & Forms */
input[type="number"], input[type="text"], select { 
    width: 100%; padding: 6px 0; border: 1px solid transparent; 
    text-align: center; font-family: 'Inter', sans-serif; font-size: 13px; background: transparent; 
}
input:focus, select:focus { outline: none; background-color: #e3f2fd; font-weight: bold; }
input::placeholder { color: #ccc; }
select { text-align: left; }

.form-row { display: flex; align-items: flex-start; margin-bottom: 15px; }
.form-row label { width: 30%; font-weight: 500; font-size: 14px; padding-top: 8px; }
.form-row select, .form-row input { width: 70%; border: 1px solid #999; padding: 8px; border-radius: 4px; font-family: inherit; font-size: 14px; background-color: #fff; }

.days-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.days-checkboxes label { display: flex; align-items: center; gap: 6px; font-size: 13px; background: #f5f5f5; border: 1px solid #ddd; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
.days-checkboxes input:checked + span { font-weight: bold; color: var(--brand-orange); }
.days-checkboxes label:hover { background: #eee; }
.days-checkboxes label.disabled { opacity: 0.3; pointer-events: none; background: #eee; }

/* Toggle Switch */
.switch { position: relative; display: inline-block; width: 34px; height: 20px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--brand-orange); }
input:checked + .slider:before { transform: translateX(14px); }
.toggle-wrapper { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #555; }

/* Modals */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; justify-content: center; align-items: center; }
.modal-box { background: white; padding: 25px; border-radius: 8px; width: 400px; max-width: 90%; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 20px; }
.modal-header h3 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; }
.close-modal { font-size: 24px; color: #aaa; cursor: pointer; line-height: 1; font-weight: bold; }
.close-modal:hover { color: black; }

/* =========================================
   5. VIEW: DASHBOARD
   ========================================= */
.dashboard-list { display: flex; flex-direction: column; gap: 10px; max-width: 600px; }
.week-card { display: flex; align-items: center; justify-content: space-between; background: white; border: 1px solid #ddd; border-radius: 8px; padding: 15px 20px; cursor: pointer; transition: all 0.2s; border-left: 5px solid transparent; }
.week-card:hover { transform: translateX(5px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-color: #bbb; }
.week-info { display: flex; flex-direction: column; gap: 4px; }
.week-number { font-size: 11px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.week-dates { font-family: 'Anton', sans-serif; font-size: 24px; color: var(--brand-black); font-weight: 400; }
.week-status { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 6px 12px; border-radius: 20px; letter-spacing: 0.5px; }

/* Month Accordion Styling */
.month-accordion { margin-bottom: 20px; }
.month-header { 
    display: flex; align-items: center; justify-content: space-between; 
    background: var(--brand-black); color: white; padding: 12px 20px; 
    cursor: pointer; border-radius: 6px; margin-bottom: 2px;
    transition: all 0.2s;
}
.month-header:hover { background: #333; }
.month-header h2 { 
    font-family: 'Anton', sans-serif; font-size: 20px; 
    margin: 0; letter-spacing: 1px; text-transform: uppercase; 
}
.month-toggle { font-size: 18px; transition: transform 0.3s; }
.month-accordion.collapsed .month-toggle { transform: rotate(-90deg); }
.month-weeks { 
    display: flex; flex-direction: column; gap: 8px; 
    padding: 10px 0; transition: all 0.3s;
}
.month-accordion.collapsed .month-weeks { display: none; }

/* Dashboard Status Colors */
.status-empty { border-left-color: #ccc; background: #f9f9f9; }
.status-empty .week-status { background: #eee; color: #999; }
.status-active { border-left-color: var(--brand-orange); }
.status-active .week-status { background: #fff3e0; color: var(--brand-orange); }
.status-final { border-left-color: var(--brand-green); }
.status-final .week-status { background: #e8f5e9; color: var(--brand-green); }

/* =========================================
   6. VIEW: PLANNING
   ========================================= */
.week-nav-buttons { display: flex; gap: 5px; }
.week-nav-buttons button { width: 28px; height: 28px; font-size: 14px; padding: 0; line-height: 28px; background: #eee; color: #333; border-radius: 4px; }
.week-nav-buttons button:hover { background: #ddd; }
#view-planning .table-week-matrix { max-height: calc(100vh - 160px); }

/* =========================================
   7. ADMIN TABS & GENERAL
   ========================================= */
.admin-tabs { display: flex; gap: 10px; border-bottom: 1px solid #ddd; margin-bottom: 25px; }
.admin-tab { padding: 10px 20px; cursor: pointer; font-weight: 600; color: #666; border-bottom: 3px solid transparent; }
.admin-tab:hover { color: black; background: #f9f9f9; }
.admin-tab.active { color: black; border-bottom-color: var(--brand-orange); }

.admin-content { display: none; }
.admin-content.active { display: block; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; background: #f9f9f9; padding: 10px; border-radius: 4px; border: 1px solid #eee; }

/* =========================================
   8. TABLES (BASE)
   ========================================= */
.table-container { width: 100%; overflow-x: auto; border: 1px solid var(--border-color); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
th, td { border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color); padding: 6px 4px; text-align: center; }

/* Sticky Headers & Columns (Base Logic) */
th { background-color: #f4f4f4; font-weight: 700; vertical-align: middle; height: 45px; border-top: 1px solid var(--border-color); position: sticky; top: 0; z-index: 10; }
th:first-child, td:first-child { 
    position: sticky; left: 0; z-index: 11; 
    border-right: 1px solid #ddd; background-color: #fff; 
    min-width: 200px; width: 200px; max-width: 200px; 
}
th:first-child { z-index: 12; background-color: #f4f4f4; }

/* Sorting */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background-color: #eaeaea; }
.sort-icon { font-size: 10px; margin-left: 5px; color: #999; }

/* =========================================
   9. TABLES (COMPACT - ADMIN TABS)
   ========================================= */
.compact-table th, .compact-table td { padding: 4px; height: 34px; }

/* Tab: Klanten - Specifieke Breedtes */
#tab-klanten .compact-table th:nth-child(1) { width: 40%; } /* Naam */
#tab-klanten .compact-table th:nth-child(2) { width: 100px; } /* Betaalwijze */
#tab-klanten .compact-table th:nth-child(3) { width: 50px; text-align: center; } /* Prio */
#tab-klanten .compact-table th:nth-child(4) { width: 40px; text-align: center; } /* # (Sort) */
#tab-klanten .compact-table th:nth-child(5) { width: 50px; text-align: center; } /* Actief */

/* Tab: Broden - Specifieke Breedtes */
#tab-broden .compact-table th:nth-child(1) { width: 50px; } /* # */
#tab-broden .compact-table th:nth-child(2) { width: 150px; } /* Weergavenaam */
#tab-broden .compact-table th:nth-child(3) { width: auto; } /* Volledige Naam - flex */
#tab-broden .compact-table th:nth-child(4) { width: 55px; text-align: center; } /* Groep */
#tab-broden .compact-table th:nth-child(5) { width: 55px; text-align: center; } /* Actief */

/* =========================================
   10. TABLES (WEEK MATRIX)
   ========================================= */
/* Gebruikt in Admin 'Weekschema' en Planning 'Dagplanning' */
.table-week-matrix { max-height: 75vh; overflow: auto; border: 1px solid #000; }
.week-matrix-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; }

/* Matrix Cell Reset & Style */
.week-matrix-table th, .week-matrix-table td {
    text-align: center;
    border-right: 1px solid #ccc !important;
    border-left: 0;
    border-bottom: 1px solid #ccc;
    font-size: 13px;
    padding: 0;
    height: 36px;
    box-sizing: border-box;
    background-clip: padding-box; 
    transition: background-color 0.05s; 
}

/* Vaste breedte voor dag-kolommen (input cellen) */
.week-matrix-table th:not(:first-child), 
.week-matrix-table td:not(:first-child) {
    width: 45px; min-width: 45px; max-width: 45px;
}

/* Header Rij 1: Broodnamen */
.week-matrix-table thead tr:first-child th {
    position: sticky; top: 0; z-index: 20;
    height: 32px; background: #f4f4f4;
    border-bottom: 1px solid #999;
    font-family: 'Inter', sans-serif; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; color: black;
    width: 225px !important; min-width: 225px !important;
}

/* Header Rij 2: Dagen */
.week-matrix-table thead tr:nth-child(2) th {
    position: sticky; top: 33px; z-index: 20;
    height: 24px; background: #fff;
    border-bottom: 2px solid #000;
    font-size: 13px; font-weight: 800; color: #333;
    transition: color 0.1s, background-color 0.1s;
}

/* Kolom 1: Klanten (Sticky Links) */
.week-matrix-table th:first-child, 
.week-matrix-table td:first-child {
    position: sticky; left: 0; z-index: 30;
    background: #fff;
    border-right: 1px solid #ccc;
    width: 330px !important; min-width: 330px !important; max-width: 330px !important;
    text-align: center; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color 0.1s, color 0.1s;
    padding-left: 5px; padding-right: 5px;
}
/* Zorg dat de header linksboven ("KLANT") bovenop blijft */
.week-matrix-table thead tr:first-child th:first-child {
    z-index: 40; background: #f4f4f4; vertical-align: bottom; padding-bottom: 5px;
    font-family: 'Inter', sans-serif; font-weight: 700;
}

/* Highlighting Logic (Ruler Effect) */
.highlight-hover { background-color: #f5f5f5 !important; }
.highlight-focus { background-color: #fff3e0 !important; color: var(--brand-orange); }

.week-matrix-table td.is-active-cell {
    border: 1px solid var(--brand-orange) !important;
    z-index: 50; position: relative;
    background-color: #fff !important;
}

/* Visuele scheiding tussen broden */
.bread-group-start { border-left: 2px solid #000 !important; }

/* Matrix Inputs */
.week-matrix-table input {
    width: 100%; height: 100%; border: none;
    text-align: center; font-size: 13px;
    background: transparent; padding: 0; margin: 0;
    font-family: 'Inter', sans-serif; color: #000;
}
.week-matrix-table input:focus { outline: none; }
.week-matrix-table input:not([value=""]):not([value="0"]) { font-weight: 600; }

/* =========================================
   11. TABLES (PRODUCTIESCHEMA)
   ========================================= */
#tab-productieschema .matrix-table {
    width: auto !important;
    min-width: 800px;
    table-layout: fixed;
    border-collapse: collapse;
}

.matrix-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.matrix-table th, .matrix-table td { border: 1px solid #ddd; text-align: center; height: 36px; padding: 4px; }
.matrix-table th { background: #f4f4f4; }
.matrix-table .bread-row { background-color: #fff; font-weight: bold; text-align: left; padding-left: 15px; }
.matrix-table .batch-row:hover { background-color: #fafafa; cursor: pointer; }

/* Production Columns Overrides */
#tab-productieschema .matrix-table th:not(:first-child),
#tab-productieschema .matrix-table td:not(:first-child) {
    width: 130px !important; min-width: 130px !important; max-width: 130px !important;
    text-align: center; border: 1px solid #ddd;
}
#tab-productieschema .matrix-table th:first-child,
#tab-productieschema .matrix-table td:first-child {
    width: 250px !important;
    text-align: left; padding-left: 15px; border: 1px solid #ddd;
}

/* Badges */
.badge-de { background-color: #fff9c4; color: #fbc02d; font-weight:bold; padding: 2px 6px; border-radius: 4px; border:1px solid #fbc02d; display:inline-block;}
.badge-dr { background-color: #e3f2fd; color: #1976d2; font-weight:bold; padding: 2px 6px; border-radius: 4px; border:1px solid #1976d2; display:inline-block;}
.badge-ba { background-color: #ffccbc; color: #d84315; font-weight:bold; padding: 2px 6px; border-radius: 4px; border:1px solid #d84315; display:inline-block;}

/* =========================================
   12. TAB: RECEPTUREN
   ========================================= */
.recipe-wrapper { display: grid; grid-template-columns: 250px 1fr; gap: 20px; height: 600px; }
.recipe-list { border: 1px solid #ccc; overflow-y: auto; background: #fafafa; }
.recipe-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 13px; font-weight: 500; }
.recipe-item:hover { background: #eee; }
.recipe-item.active { background: white; border-left: 4px solid var(--brand-orange); font-weight: 700; }
.recipe-detail { border: 1px solid #ccc; padding: 0; overflow-y: auto; background: white; }


/* --- VIEW: PRODUCTIELIJST (CARDS) --- */
.prod-list-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 50px;
}

.prod-card {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Header van de kaart (Zwart) */
.prod-header {
    background: var(--brand-black);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prod-title {
    font-family: 'Anton', sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.prod-subtitle {
    font-size: 13px;
    color: #ccc;
    margin-top: 2px;
}
.prod-total-badge {
    background: var(--brand-orange);
    color: white;
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
}

/* Stats Row (De invulvelden) */
.prod-stats {
    background: #f9f9f9;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 20px;
}
.stat-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.stat-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
}
.stat-group input {
    background: white;
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
}

/* Recept Tabel in de kaart */
.prod-recipe-table {
    width: 100%;
    border-collapse: collapse;
}
.prod-recipe-table th, .prod-recipe-table td {
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    text-align: left;
    font-size: 14px;
}
.prod-recipe-table th {
    background: #fff;
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    border-bottom: 2px solid #eee;
}
.prod-recipe-table tr:last-child td {
    border-bottom: none;
}
/* Checkbox kolom */
.col-check { width: 40px; text-align: center !important; }
.big-checkbox { transform: scale(1.5); cursor: pointer; }

/* Subtiele 'per stuk' weergave */
.unit-hint {
    font-size: 11px;
    color: #999;
    margin-left: 5px;
}

/* =========================================
   13. VIEW: PRODUCTIELIJST (NIEUWE TAB)
   ========================================= */
.pl-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;
}

#view-productielijst .prod-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
}

#view-productielijst .prod-card {
    width: 100%;
}

#view-productielijst .prod-header {
    padding: 10px 15px;
}

#view-productielijst .prod-title {
    font-size: 16px;
}

#view-productielijst .prod-total-badge {
    font-size: 14px;
    padding: 4px 10px;
}

/* Recipe table in productielijst: wider ingredient, narrower totaal */
.pl-recipe-table th:first-child,
.pl-recipe-table td:first-child {
    position: static;
    width: auto;
    min-width: unset;
    max-width: unset;
    border-right: none;
}
.pl-recipe-table th,
.pl-recipe-table td {
    position: static;
}

/* Download Excel button hover */
#plExportBtn:hover {
    background: #333 !important;
}

@media (max-width: 1000px) {
    .pl-two-col {
        grid-template-columns: 1fr;
    }
}