/* --- GOLD THEME (V175) --- */
:root { --triw-cyan:#00A99D; --triw-dark:#2C3E50; --bg-grey:#F4F7F6; --status-green:#2ecc71; --status-red:#e74c3c; --status-yellow:#f1c40f; --status-black:#333; }
body { font-family:'Segoe UI',sans-serif; background:var(--bg-grey); margin:0; display:flex; height:100vh; color:#333; overflow: hidden; }
.sidebar { width:250px; background:var(--triw-dark); color:white; display:flex; flex-direction:column; flex-shrink:0; }
.logo-area { padding:20px; background:white; text-align:center; border-bottom:1px solid #ddd; }
.nav-btn { 
    margin: 4px 12px; 
    padding: 12px 15px; 
    cursor: pointer; 
    color: #bdc3c7; 
    border-radius: 8px; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex;
    align-items: center;
    font-weight: 500;
}
.nav-btn:hover { background: rgba(255,255,255,0.08); color: white; }
.nav-btn.active { 
    background: #2563eb; /* Professional SaaS Blue */
    color: white; 
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4); 
}
.role-box { padding: 15px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: auto; }
.role-select { width: 100%; padding: 5px; background: rgba(0,0,0,0.2); color: white; border: 1px solid #555; border-radius: 4px; }
.content { flex:1; padding:25px; overflow-y:auto; display:flex; flex-direction:column; position: relative; }
.container { max-width:1920px; margin:0 auto; width:100%; height:100%; display:flex; flex-direction:column; }
.tab-panel { display:none; height:100%; flex-direction:column; }
.tab-panel.active { display:flex; animation:fadeIn 0.3s; }
.two-columns { 
    display: grid; 
    grid-template-columns: 55fr 35fr; /* Matches your exact 55/35 visual ratio */
    gap: 25px; 
    height: 100%; 
}

.col-half { 
    display: flex; 
    flex-direction: column; 
    min-height: 0;
    min-width: 0; /* This is the magic rule that stops wide inputs from breaking the layout! */
}
.card { background:white; padding:20px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.05); border:1px solid #eee; display:flex; flex-direction:column; height:100%; }
.card-header { font-size:1.1rem; font-weight:bold; margin-bottom:15px; color:var(--triw-dark); border-bottom:2px solid var(--triw-cyan); padding-bottom:10px; display:flex; justify-content:space-between; align-items:center; }

.category-box { background: #fdfdfd; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px 15px 45px 15px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); position: relative; }
.category-header { font-weight: bold; color: var(--triw-dark); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 5px; }

.grid-quality { display: grid; grid-template-columns: 1fr 1fr 1fr 50px; gap: 15px; align-items: end; }
.grid-bio { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 50px; gap: 15px; align-items: end; }

.btn-save-inline {
    background: transparent;
    border: none;
    font-size: 2.0rem;
    cursor: pointer;
    color: #95a5a6;
    transition: all 0.2s ease;
    padding: 0;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-save-inline:hover { color: var(--triw-cyan); transform: scale(1.1); }
.btn-save-inline:disabled { color: #eee; cursor: not-allowed; }

.assign-row { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
.checkbox-stack { display: flex; flex-direction: column; gap: 8px; }
.chk-label { display: flex; align-items: center; cursor: pointer; font-size: 0.9rem; color: #333; margin: 0; padding: 0; }
.chk-label input { margin: 0 8px 0 0; }

.form-group { margin-bottom: 15px; }
.form-label { display:block; margin-bottom:5px; font-weight:600; font-size:0.9rem; color:#555; }
.form-input, .form-select { width:100%; padding:10px; border:1px solid #ddd; border-radius:4px; box-sizing:border-box; background: white; }
.form-input:disabled, .form-select:disabled { background: #f0f0f0; color: #777; border-color:#ccc; cursor: default; }

.parent-display { padding:10px; background:#e0f7fa; border-left:4px solid var(--triw-cyan); border-radius:4px; font-size:0.9rem; margin-bottom:15px; }

.btn-action { background:var(--triw-cyan); color:white; border:none; padding:12px 25px; border-radius:6px; font-weight:bold; cursor:pointer; width:100%; }
.btn-action:hover { background:#008e84; }
.btn-action:disabled { background: #ccc; cursor: not-allowed; }
.btn-master { background: var(--triw-dark); margin-top: auto; font-size: 1.1rem; }
.btn-master:hover { background: #1a252f; }
.btn-small { padding: 5px 10px; font-size: 0.8rem; border-radius: 4px; border: none; cursor: pointer; background: #eee; color: #333; margin-left: 5px;}

.search-wrapper { position: relative; margin-bottom: 5px; }
.org-search { width: 100%; padding: 8px 35px 8px 8px; border: 1px solid #eee; border-radius: 4px; font-size: 0.9rem; background: #fdfdfd; box-sizing: border-box; }
.search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--status-red); font-weight: bold; font-size: 1.1rem; display: none; }
.search-clear:hover { color: #c0392b; }
.search-status { font-size: 0.8rem; color: #888; margin-bottom: 10px; text-align: right; min-height: 1.2em; font-style: italic; }
.search-match { background-color: #fffcc9 !important; transition: background 0.3s; }
.search-active { background-color: #fff59d !important; font-weight: bold !important; color: #000 !important; border-left: 4px solid var(--triw-cyan); }
.search-hidden { display: none !important; }
.tree-container { overflow-y:auto; overflow-x:hidden; flex:1; padding-right:5px; }
details, summary { margin: 0; padding: 0; }
summary { list-style:none; cursor: default; min-height: 24px; display:flex; align-items:center; width:100%; overflow:hidden; }
summary::-webkit-details-marker { display:none; }
details > .content { margin: 0; padding: 0 0 0 20px; }
.tree-row { display: flex; align-items: center; width: 100%; padding: 0; overflow: hidden; box-sizing: border-box; border-bottom: 1px solid transparent; position: relative; }
.tree-row:hover { border-bottom-color: #f5f5f5; }
.tree-toggle { width: 20px; min-width: 20px; text-align: center; cursor: pointer; color: #ccc; font-size: 0.7em; transition: transform 0.2s; margin-right: 2px; flex-shrink: 0; }
.tree-toggle:hover { color: var(--triw-cyan); }
details[open] > summary > .tree-row > .tree-toggle { transform: rotate(90deg); color: #999; }
.tree-spacer { width: 20px; min-width: 20px; margin-right: 2px; flex-shrink: 0; }
.tree-checkbox { margin: 0 6px 0 0; cursor: pointer; flex-shrink: 0; }
.tree-bullet { margin-right: 5px; font-size: 1.6em; line-height: 0.7; display: inline-block; vertical-align: middle; position: relative; top: -1px; flex-shrink: 0; }
.bullet-RED { color: var(--status-red); } .bullet-YELLOW { color: var(--status-yellow); } .bullet-GREEN { color: var(--status-green); } .bullet-BLACK { color: var(--status-black); }
.tree-text-group { flex: 1; min-width: 0; display: grid; grid-template-columns: 50% 1fr; gap: 10px; align-items: center; cursor: pointer; padding: 2px 5px; border-radius: 4px; }
.tree-text-group:hover { background: #f0f8ff; color: var(--triw-cyan); }
.tree-text-group.selected { background: #e0f7fa; font-weight: bold; color: var(--triw-dark); }
.tree-main-text { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-sub-text { font-size: 0.85em; color: #888; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-content-flex { flex: 1; min-width: 0; display: grid; grid-template-columns: 40% 40% 20%; gap: 5px; align-items: center; cursor: pointer; padding: 2px 5px; border-radius: 4px; }
.org-content-flex:hover { background: #f0f8ff; color: var(--triw-cyan); }
.org-content-flex.selected { background: #e0f7fa; font-weight: bold; color: var(--triw-dark); }
.org-main-text { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:flex; align-items:center; }
.org-role-text { font-size: 0.85em; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-level-DOMEIN { font-weight: bold; margin-top: 15px; border-top: 1px solid #eee; padding-top: 5px; }
.org-level-DOMEIN .org-main-text { color: var(--triw-dark); font-size: 1rem; }
.tree-actions { display: flex; justify-content: flex-end; gap: 5px; } 
.tree-icon-btn { cursor:pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius:4px; transition:background 0.2s; }
.tree-icon-btn:hover { background: rgba(0,0,0,0.05); }

/* --- UNIFORM TREE ICONS (Dark/Light Grey Hierarchy) --- */

/* Force all tree icons to the exact same size */
.tree-icon-btn svg {
    width: 16px !important;
    height: 16px !important;
    transition: all 0.2s ease;
}

/* ACTIVE STATE: Solid icons (Pen, Trash, Plus, Report) */
.icon-plus svg, .icon-edit svg, .icon-trash svg, .icon-report svg {
    fill: #64748b; 
    stroke: none;
}

/* ACTIVE STATE: Line icons (Info) - Mag GEEN 'fill' hebben! */
.icon-info svg {
    fill: none !important; 
    stroke: #64748b;
}

/* HOVER STATE: Solid icons turn Cyan */
.tree-icon-btn:not(.icon-info):not(.is-disabled):hover svg {
    fill: var(--triw-cyan) !important;
}

/* HOVER STATE: Line icons turn Cyan */
.icon-info:not(.is-disabled):hover svg {
    stroke: var(--triw-cyan) !important;
}

/* INACTIVE STATE: Non-functional icons are Light Grey (#e2e8f0) */
.tree-icon-btn.is-disabled {
    cursor: not-allowed !important;
}

.tree-icon-btn.is-disabled:not(.icon-info) svg {
    fill: #e2e8f0 !important;
}

.icon-info.is-disabled svg {
    stroke: #e2e8f0 !important;
}

/* Disable background hover effects for inactive icons */
.tree-icon-btn.is-disabled:hover {
    background: transparent !important;
}

.modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999; display:none; justify-content:center; align-items:center; }
.modal { background:white; padding:25px; border-radius:8px; width:400px; box-shadow:0 4px 15px rgba(0,0,0,0.2); text-align:center; }
.modal h3 { margin-top:0; color:var(--triw-dark); }
.modal-btn { width:100%; margin-bottom:10px; padding:12px; border:none; border-radius:4px; font-weight:bold; cursor:pointer; transition:all 0.2s; }
#loading-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background:white; z-index:2000; display:flex; justify-content:center; align-items:center; flex-direction:column; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid var(--triw-cyan); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom:15px; }
.dash-charts { display:flex; gap:10px; height: 220px; margin-bottom: 15px; }
.dash-chart-box { flex:1; min-width: 0; background:#fff; border-radius:8px; border:1px solid #eee; padding:10px; display:flex; flex-direction:column; align-items:center; position: relative; }
.dash-chart-box h3 { font-size: 0.9rem; margin:0 0 5px 0; color:var(--triw-dark); text-align:center; }
.chart-container { position: relative; width: 100%; height: 100%; }
.center-text { position: absolute; top:55%; left:50%; transform:translate(-50%, -50%); font-size:1.1rem; font-weight:bold; color:#555; pointer-events:none; }
.dash-tables { display:flex; gap:20px; flex:1; }
.dash-table-box { flex:1; background:#fff; border-radius:8px; border:1px solid #eee; padding:15px; }
.tiny-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.tiny-table th { text-align:left; border-bottom:2px solid #eee; padding:5px; color:#777; }
.tiny-table td { border-bottom:1px solid #f5f5f5; padding:8px 5px; }
.tiny-table tr:last-child td { border-bottom:none; }
.log-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.log-table th { background: #eee; padding: 10px; text-align: left; border-bottom: 2px solid #ddd; }
.log-table td { padding: 8px 10px; border-bottom: 1px solid #eee; }
.badge { padding: 2px 6px; border-radius: 4px; font-size: 0.8em; font-weight: bold; }
.badge-CREATE { background: #e0f7fa; color: #006064; } .badge-UPDATE { background: #fff3e0; color: #e65100; } .badge-DELETE { background: #ffebee; color: #c62828; } .badge-ASSIGN { background: #e8f5e9; color: #1b5e20; } .badge-UNASSIGN { background: #ffebee; color: #c62828; } .badge-UPDATE_PROPS { background: #f3e5f5; color: #7b1fa2; }
@keyframes fadeIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.qual-header { font-size: 0.8rem; color: #888; font-style: italic; float: right; }

/* --- TOAST NOTIFICATIONS --- */
.toast-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    min-width: 250px;
    padding: 16px 20px;
    border-radius: 6px;
    color: white;
    font-size: 0.95rem;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    animation: slideInRight 0.3s ease-out forwards;
    opacity: 1;
    transition: opacity 0.4s ease-out;
}

.toast.hiding {
    opacity: 0;
}

.toast-icon { margin-right: 12px; font-size: 1.2rem; }
.toast-success { background: var(--triw-cyan); border-left: 5px solid #008e84; }
.toast-error { background: #e74c3c; border-left: 5px solid #c0392b; }
.toast-info { background: var(--triw-dark); border-left: 5px solid #1a252f; }
.toast-warning { background: #f59e0b; border-left: 5px solid #b45309; }

@keyframes slideInRight {
    from { transform: translateX(120%); }
    to { transform: translateX(0); }
}

/* --- EMPTY STATES --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #95a5a6;
    text-align: center;
    padding: 20px;
}
.empty-state svg {
    width: 72px;
    height: 72px;
    fill: #ecf0f1;
    margin-bottom: 15px;
}
.empty-state h3 {
    margin: 0 0 10px 0;
    color: #7f8c8d;
    font-size: 1.2rem;
}
.empty-state p {
    margin: 0;
    font-size: 0.95rem;
    max-width: 320px;
    line-height: 1.5;
}
.form-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* --- UI UPDATES & FIXES --- */
.logo-area { padding: 20px; background: var(--bg-grey); text-align: center; border-bottom: 1px solid #ddd; }

/* Asset Tree Row Fixes (Restoring Visual Columns) */
.asset-content-flex { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 2px 8px; border-radius: 4px; }
.asset-content-flex:hover { background: #f0f8ff; color: var(--triw-cyan); }
.asset-content-flex.selected { background: #e0f7fa; font-weight: bold; color: var(--triw-dark); }

/* The Grid Column Fix */
.tree-text-info { display: grid; grid-template-columns: 50% 1fr; gap: 10px; align-items: center; flex: 1; min-width: 0; }
.tree-sub-text { text-align: left; } 

/* --- SKELETON LOADERS --- */
.skeleton-row { display: flex; align-items: center; padding: 8px 10px; gap: 10px; }
.skeleton-box { height: 16px; background: #e0e0e0; border-radius: 4px; animation: pulse 1.5s infinite ease-in-out; }
@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }

/* --- TIGHTER TREE SPACING --- */
summary { min-height: 20px; }
.tree-text-group { padding: 1px 5px; }
.org-content-flex { padding: 1px 5px; }
.category-box { padding: 10px 15px 15px 15px; } 

/* --- WCAG 2.1 ACCESSIBILITY (Fixed Focus Rings) --- */
summary:focus { outline: none; } 
.asset-content-flex:focus, .org-content-flex:focus { 
    outline: 2px solid var(--triw-cyan); 
    outline-offset: -2px; 
}
input:focus, select:focus, button:focus {
    outline: 2px solid var(--triw-cyan);
    outline-offset: 1px;
}
.form-input, .form-select, .card {
    border-color: #e2e8f0;
}
/* --- DUAL STATUS BULLETS --- */
.bullet-group { 
    display: flex; 
    gap: 4px; 
    margin-right: 8px; 
    align-items: center;
}
.tree-bullet { 
    margin-right: 0; /* Override the old margin */
    font-size: 1.65em;
}
/* --- MODERN SaaS DASHBOARD GRID --- */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.asset-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
}
.asset-card h3 { margin: 0 0 15px 0; color: var(--triw-dark); text-align: center; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.asset-card .chart-pair { display: flex; justify-content: space-around; gap: 10px; }
.mini-chart-box { display: flex; flex-direction: column; align-items: center; width: 45%; }
.mini-chart-box h4 { margin: 0 0 5px 0; font-size: 0.8rem; color: #7f8c8d; text-transform: uppercase; letter-spacing: 1px; }
.mini-chart-container { position: relative; height: 120px; width: 120px; }
/* --- THE UNIFORM OCD-PROOF FOOTER --- */
/* --- THE FINAL BOSS: OCD-PERFECT FOOTER --- */
.asset-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
    gap: 10px; /* Perfect, even spacing between the 3 elements */
}

.asset-total-pill, .btn-ghost {
    flex: 1; /* Forces all 3 boxes to be the exact same width */
    height: 42px; /* Uniform height for the row */
    display: inline-flex;
    flex-direction: column; /* Allows your two lines of text to stack dead-center */
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.2;
    box-sizing: border-box;
    padding: 4px 8px;
}

.asset-total-pill {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.asset-total-pill b {
    font-size: 0.9rem; /* Makes the tally number pop */
    color: var(--triw-dark);
}

.btn-ghost {
    background: transparent;
    color: #64748b;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.btn-ghost:hover {
    background: #f8fafc;
    color: var(--triw-blue);
    border-color: var(--triw-blue);
}

.mini-chart-container {
    position: relative;
    height: 120px;
    width: 120px;
}

/* The text in the middle of the donut */
.chart-inner-text {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.chart-percentage {
    font-size: 1.2rem;
    font-weight: 800;
    display: block;
    line-height: 1;
}

.chart-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: #94a3b8;
}

.btn-ghost {
    background: transparent;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 6px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}
.btn-ghost:hover {
    background: #f8fafc;
    color: var(--triw-cyan);
    border-color: var(--triw-cyan);
}

.btn-master {
    background: #2563eb; /* Match the new primary blue */
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
    transition: transform 0.1s;
}

.btn-master:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.btn-master:active {
    transform: translateY(0);
}

/* --- PREMIUM SAAS SCROLLBARS --- */
::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
}
::-webkit-scrollbar-track { 
    background: transparent; 
}
::-webkit-scrollbar-thumb { 
    background: #cbd5e1; 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #94a3b8; 
}

/* --- SMOOTH TABLE HOVER EFFECTS --- */
.tiny-table tbody tr { 
    transition: background-color 0.15s ease; 
}
.tiny-table tbody tr:hover { 
    background-color: #f8fafc; 
}
.log-table tbody tr { 
    transition: background-color 0.15s ease; 
}
.log-table tbody tr:hover { 
    background-color: #f8fafc; 
}

/* --- COMPACT INLINE FORM LAYOUT (V3 - UNIVERSAL) --- */

/* 1. Anchor the category boxes so we can absolute-position the save button inside them */
.category-box {
    position: relative;
}

/* 2. Move the Save Disk Icon to the top right corner, perfectly aligned with the title, and 10% smaller */
.btn-save-inline {
    position: absolute;
    top: -3px;   /* Aligns vertically with the title */
    right: 5px; /* Pins to the top right corner */
    transform: scale(0.7); /* Makes the icon exactly 10% smaller */
    margin: 0 !important;
    cursor: pointer;
    z-index: 10;
}

/* Ensure the title text never overlaps the disk icon */
.category-header {
    padding-right: 35px; 
}

/* --------------------------------------------------------
   3. BOX 1: 'TOEWIJZING' (Applies vertically aligned layout to ALL tabs) 
   -------------------------------------------------------- */
.category-box:first-of-type > div:not(.category-header) {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    width: 100%;
}

.category-box:first-of-type .form-label {
    width: 140px;
    min-width: 140px;
    flex-shrink: 0;
    margin-bottom: 0;
    font-size: 0.8rem;
}

.category-box:first-of-type .form-select,
.category-box:first-of-type .form-input {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    padding: 4px;
}

/* --------------------------------------------------------
   4. BOX 2 & 3: 'KWALITEIT' & 'BIO2' (Equal width, spread out) 
   -------------------------------------------------------- */
.category-box:not(:first-of-type) > div:not(.category-header) {
    display: flex;
    gap: 12px; /* Clean spacing between the columns */
    width: 100%;
    justify-content: space-between;
    align-items: flex-end; /* Keeps dropdown bottoms aligned if labels differ */
}

/* Force every column inside Quality/BIO to take exactly equal space */
.category-box:not(:first-of-type) > div:not(.category-header) > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevents long labels from blowing out the box */
}

.category-box:not(:first-of-type) .form-label {
    margin-bottom: 4px;
    font-size: 0.75rem;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; /* Adds "..." if a word like 'Persoonsgegevens' is slightly too long */
}

.category-box:not(:first-of-type) .form-select,
.category-box:not(:first-of-type) .form-input {
    width: 100%;
    margin-bottom: 0;
    padding: 4px;
}

/* --- KWALITEIT SPLIT (BOX 2) --- */
/* Forces the 40/40/20 split exactly on the 2nd category box (Kwaliteiteisen) */
.category-box:nth-of-type(2) > div:not(.category-header) > div:nth-child(1) {
    flex: 2 !important; /* Actualiteit */
}
.category-box:nth-of-type(2) > div:not(.category-header) > div:nth-child(2) {
    flex: 2 !important; /* Nauwkeurigheid */
}
.category-box:nth-of-type(2) > div:not(.category-header) > div:nth-child(3) {
    flex: 1 !important; /* Idealisatie */
}

/* --- UNIVERSAL ALIGNMENT FOR ALL SINGLE-ROW ITEMS (Toewijzing & Eindverantwoordelijk) --- */
/* 1. Target ANY row inside a category box to act as a horizontal flex container */
.category-box > div:not(.category-header) {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 8px;
}

/* 2. Target ANY label that is a direct child of the row (This instantly catches 'Eindverantwoordelijk' AND all 'Toewijzing' labels!) */
.category-box > div:not(.category-header) > .form-label {
    width: 140px !important;
    min-width: 140px !important;
    margin-bottom: 0 !important;
    white-space: normal !important;
    flex-shrink: 0 !important;
    font-size: 0.8rem !important; /* <-- ADD THIS LINE */
}

/* 3. Let their dropdowns stretch to fill the rest of the row */
.category-box > div:not(.category-header) > .form-select,
.category-box > div:not(.category-header) > .form-input {
    flex: 1 !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
}

/* --- FIX FOR NESTED COLUMNS (Kwaliteit & BIO2 Properties) --- */
/* Ensure the inner columns (which hold B-I-O-V and Actualiteit) remain stacked vertically internally */
.category-box > div:not(.category-header) > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Ensure these nested labels stretch the full column width so the 'max' text aligns right */
.category-box > div:not(.category-header) > div > .form-label {
    width: 100% !important; 
    min-width: 0 !important;
    margin-bottom: 4px !important;
    display: flex !important;
    justify-content: space-between !important; /* Pushes the 'max' text to the far right */
}

/* --- EXCEPTION FOR ATTRIBUTES LIST --- */
/* Stops the universal flex rule from turning the attributes list into a horizontal row */
.category-box > div[id^="attributes-list-"] {
    display: block !important;
}