:root{
    --c-bg:#f4f4f5;
    --c-surface:#ffffff;
    --c-surface-alt:#fafafa;
    --c-fg:#111111;
    --c-fg-soft:#3f3f46;
    --c-muted:#6b6b73;
    --c-border:#e4e4e7;
    --c-border-strong:#d4d4d8;
    --c-accent:#111111;
    --c-accent-fg:#ffffff;
    --c-hover:#ececef;
    --c-active:#111111;
    --c-active-fg:#ffffff;
    --c-error:#a30000;
    --c-error-bg:#fbeaea;
    --c-success:#0a5d22;
    --c-success-bg:#e9f3ed;
    --c-info-bg:#eeeef0;

    --sidebar-w:232px;
    --sidebar-w-collapsed:56px;
    --topbar-h:52px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-fg);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    font-size:13.5px;line-height:1.5;height:100%}
a{color:inherit;text-decoration:none}
.muted{color:var(--c-muted)}
code{background:var(--c-info-bg);padding:.1em .35em;font-size:.92em;font-family:ui-monospace,Consolas,Menlo,monospace}
pre{white-space:pre-wrap;word-break:break-word}
.inline{display:inline}
button{font:inherit}

/* ------- App shell with sidebar ------- */
.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
html.sidebar-collapsed .app-shell{grid-template-columns:var(--sidebar-w-collapsed) 1fr}

.sidebar{
    background:var(--c-surface);
    border-right:1px solid var(--c-border);
    display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;
    overflow:hidden;
}
.sidebar-head{
    display:flex;align-items:center;justify-content:space-between;
    height:var(--topbar-h);
    padding:0 10px 0 14px;
    border-bottom:1px solid var(--c-border);
}
.brand{
    display:flex;align-items:center;gap:10px;
    font-weight:700;font-size:.95em;letter-spacing:.02em;
    color:var(--c-fg);min-width:0;
}
.brand-mark{
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;background:var(--c-accent);color:var(--c-accent-fg);
    font-weight:700;font-size:.85em;flex:0 0 auto;
}
.brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.sidebar-collapsed .brand-text{display:none}

.sidebar-nav{flex:1 1 auto;overflow-y:auto;padding:8px 0}
.nav-item{
    display:flex;align-items:center;gap:12px;
    height:38px;padding:0 14px;
    color:var(--c-fg-soft);font-size:.93em;
    border-left:3px solid transparent;
    cursor:pointer;
}
.nav-item:hover{background:var(--c-hover);color:var(--c-fg)}
.nav-item.is-active{
    background:var(--c-active);color:var(--c-active-fg);
    border-left-color:var(--c-active);
}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 auto}
.nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.sidebar-collapsed .nav-label{display:none}
html.sidebar-collapsed .nav-item{padding:0;justify-content:center}

.sidebar-foot{
    border-top:1px solid var(--c-border);
    padding:8px 10px;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.user-block{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.user-block .user-chip{min-width:0;flex:1 1 auto}
.user-block .user-chip-name{font-size:.9em}
html.sidebar-collapsed .user-chip-name{display:none}
html.sidebar-collapsed .sidebar-foot{justify-content:center;flex-direction:column;gap:6px;padding:8px 4px}

/* ------- Core icon button (used in topbar, sidebar, tables, …) ------- */
.icon-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;padding:0;
    background:transparent;border:1px solid transparent;color:var(--c-fg-soft);
    cursor:pointer;flex:0 0 auto;line-height:0;
    text-decoration:none;
    transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease;
}
.icon-btn:hover{background:var(--c-hover);color:var(--c-fg)}
.icon-btn:focus-visible{outline:2px solid var(--c-fg);outline-offset:2px}
.icon-btn:active{transform:scale(.94)}
.icon-btn:disabled{opacity:.4;cursor:not-allowed;background:transparent}
.icon-btn svg{width:18px;height:18px;display:block}

/* Variants */
.icon-btn-sm{width:28px;height:28px}
.icon-btn-sm svg{width:15px;height:15px}
.icon-btn-lg{width:38px;height:38px}
.icon-btn-lg svg{width:20px;height:20px}
.icon-btn-outline{border-color:var(--c-border-strong);background:var(--c-surface)}
.icon-btn-outline:hover{background:var(--c-hover)}
.icon-btn-danger:hover{color:var(--c-error);background:var(--c-error-bg)}
.icon-btn-primary:hover{color:var(--c-accent-fg);background:var(--c-accent);border-color:var(--c-accent)}
.icon-btn-spin svg{animation:icon-spin .8s linear infinite}
@keyframes icon-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.logout-btn:hover{color:var(--c-error);background:var(--c-error-bg)}

.icon-actions{display:inline-flex;align-items:center;gap:2px}

/* ------- Main column ------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
    height:var(--topbar-h);
    background:var(--c-surface);
    border-bottom:1px solid var(--c-border);
    display:flex;align-items:center;
    padding:0 12px 0 20px;
    position:sticky;top:0;z-index:5;
    gap:8px;
}
.topbar-spacer{flex:1 1 auto}
.topbar-actions{display:inline-flex;align-items:center;gap:4px}
.page-title{
    margin:0;font-size:1em;font-weight:600;color:var(--c-fg);
    letter-spacing:.01em;
}
.content{padding:18px 20px 40px;width:100%}

/* ------- Cards & forms ------- */
.card{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    padding:18px 20px;margin-bottom:14px;
}
.card h1{margin:.1em 0 .4em;font-size:1.25em;font-weight:600}
.card h2{margin:.2em 0 .5em;font-size:1.05em;font-weight:600}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-height:34px;padding:.45em 1em;
    border:1px solid var(--c-border-strong);background:var(--c-surface);color:var(--c-fg);
    font:inherit;line-height:1.2;text-align:center;text-decoration:none;
    cursor:pointer;user-select:none;
    transition:background .12s ease,border-color .12s ease,color .12s ease;
    vertical-align:middle;
}
.btn:hover{background:var(--c-hover)}
.btn:focus-visible{outline:2px solid var(--c-fg);outline-offset:2px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--c-accent);color:var(--c-accent-fg);border-color:var(--c-accent)}
.btn-primary:hover{background:#000;border-color:#000}
.btn-danger{background:var(--c-error-bg);color:var(--c-error);border-color:#e7b6b6}
.btn-danger:hover{background:#f4d4d4}
.btn-link{background:none;border:0;padding:0;color:var(--c-fg);cursor:pointer;font:inherit;text-decoration:underline;min-height:0}
.btn-link:hover{color:#000}

label{display:block;margin:.6em 0}
label > span{display:block;font-size:.85em;color:var(--c-muted);margin-bottom:.25em}
input[type=email],input[type=password],input[type=text],input[type=number],input[type=date],input[type=file],textarea,select{
    width:100%;padding:.55em .7em;
    border:1px solid var(--c-border-strong);background:#fff;color:var(--c-fg);
    font:inherit;line-height:1.4;
}
input[type=date]{min-height:36px;font-variant-numeric:tabular-nums}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7;padding:2px}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
input[type=file]{padding:.4em .5em;background:var(--c-surface-alt);cursor:pointer}
input[type=file]::-webkit-file-upload-button,
input[type=file]::file-selector-button{
    margin-right:10px;padding:.35em .9em;
    border:1px solid var(--c-border-strong);background:var(--c-surface);color:var(--c-fg);
    font:inherit;cursor:pointer;
}
input[type=file]::-webkit-file-upload-button:hover,
input[type=file]::file-selector-button:hover{background:var(--c-hover)}
input:focus,textarea:focus,select:focus{outline:2px solid #111;outline-offset:-2px;border-color:var(--c-fg)}

/* ------- Flashes ------- */
.flash-stack{margin-bottom:14px}
.flash{padding:.6em .9em;margin-bottom:.5em;font-size:.93em;border:1px solid var(--c-border)}
.flash-error{background:var(--c-error-bg);color:var(--c-error);border-color:#e7b6b6}
.flash-success{background:var(--c-success-bg);color:var(--c-success);border-color:#b6d6c1}
.flash-info{background:var(--c-info-bg);color:var(--c-fg-soft);border-color:var(--c-border-strong)}

/* ------- Auth page (no sidebar) ------- */
.page-auth{background:var(--c-bg)}
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1em}
.auth-card{width:min(400px,100%);background:var(--c-surface);border:1px solid var(--c-border);padding:24px 26px;margin:0}
.auth-card h1{margin:0 0 .2em;font-size:1.3em;font-weight:600}

/* ------- Key/value table ------- */
.kv{border-collapse:collapse;margin-top:.6em;width:100%;max-width:520px}
.kv td{padding:.4em .9em .4em 0;border-bottom:1px solid var(--c-border)}
.kv td:first-child{color:var(--c-muted);width:9em}

/* ------- Toolbar (search + filters) ------- */
.toolbar{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    padding:10px 12px;
    margin-bottom:12px;
}
.toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.toolbar-spacer{flex:1 1 auto}
.toolbar-meta{color:var(--c-muted);font-size:.88em}
.field{display:flex;align-items:center}
.field input,.field select{
    height:34px;padding:0 10px;
    border:1px solid var(--c-border-strong);background:#fff;color:var(--c-fg);
    font:inherit;
}
.field-search input{min-width:280px}
.field select{padding-right:24px}
.btn-link-plain{
    display:inline-flex;align-items:center;height:34px;padding:0 10px;
    color:var(--c-fg-soft);text-decoration:underline;font-size:.92em;
}
.btn-link-plain:hover{color:var(--c-fg)}
.toolbar .btn{height:34px;padding:0 14px}

/* ------- Data table ------- */
.data-table-wrap{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    overflow-x:auto;
}
.data-table{width:100%;border-collapse:collapse;font-size:.92em}
.data-table th,
.data-table td{
    padding:9px 12px;
    border-bottom:1px solid var(--c-border);
    text-align:left;vertical-align:middle;white-space:nowrap;
}
.data-table thead th{
    background:var(--c-surface-alt);
    color:var(--c-fg);font-weight:600;
    border-bottom:1px solid var(--c-border-strong);
}
.data-table tbody tr:nth-child(even) td{background:rgba(0,0,0,.018)}
.data-table tbody tr:hover td{background:var(--c-hover)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table .col-num{text-align:right;font-variant-numeric:tabular-nums}
.data-table .col-date{color:var(--c-fg-soft);font-variant-numeric:tabular-nums}
.data-table .col-ref{font-family:ui-monospace,Consolas,Menlo,monospace}
.data-table .empty{color:var(--c-muted);text-align:center;padding:24px 12px}

.th-sort{
    display:inline-flex;align-items:center;gap:6px;
    color:inherit;cursor:pointer;user-select:none;
}
.th-sort:hover{color:#000}
.sort-ind{font-size:.75em;line-height:1;color:var(--c-fg-soft)}
.sort-ind-dim{color:#c4c4c8}
.th-sort.is-sorted .sort-ind{color:var(--c-fg)}

/* ------- Status badges ------- */
.badge{
    display:inline-block;padding:2px 8px;
    border:1px solid var(--c-border-strong);
    background:var(--c-surface-alt);color:var(--c-fg-soft);
    font-size:.82em;line-height:1.5;
}
/* Status-pill in tabel-kolommen: vaste breedte voor visuele rust
   (kolom leest als nette verticale strook). */
.badge-status{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:96px;padding:2px 10px;
    text-align:center;letter-spacing:.01em;
}
.badge-nouw,.badge-nieuw{background:#eef4fb;border-color:#cfdcec;color:#1d3a5e}
.badge-betaald{background:#eaf3ec;border-color:#bcd7c3;color:#0a5d22}
.badge-verzonden{background:#f3eefb;border-color:#d5c8ea;color:#4b2c80}
.badge-afgerond{background:#eeeef0;border-color:#d4d4d8;color:#3f3f46}
.badge-geannuleerd{background:#fbeaea;border-color:#e7b6b6;color:#a30000}

.note-pending{font-size:.85em;margin-top:10px}

/* ------- Forms (narrow card) ------- */
.form-narrow{max-width:520px}
.form-actions{display:flex;gap:8px;margin-top:14px}
.checkbox-row{display:flex;align-items:center;gap:8px;margin:.8em 0}
.checkbox-row input{width:auto;margin:0}
.checkbox-row span{margin:0;color:var(--c-fg)}

.col-actions{width:1%;white-space:nowrap;text-align:right}
.user-block{cursor:pointer}
.user-block:hover .user-chip-name{color:var(--c-fg)}

/* ------- Todos ------- */
.form-row{display:flex;gap:12px}
.col-check{width:36px;text-align:center}
.check-btn{background:none;border:0;padding:0;cursor:pointer;line-height:0}
.check-box{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;
    border:1px solid var(--c-border-strong);background:#fff;color:var(--c-fg);
    font-size:.85em;line-height:1;
}
.check-box.is-checked{background:var(--c-accent);color:var(--c-accent-fg);border-color:var(--c-accent)}
.check-box.is-disabled{opacity:.55;cursor:default}
.todo-title{font-weight:500}
.todo-desc{font-size:.85em;margin-top:2px;max-width:520px;white-space:normal}
.row-done .todo-title,
.row-done .todo-desc{text-decoration:line-through;color:var(--c-muted)}
.is-overdue{color:var(--c-error)}

.badge-prio-laag{background:#eeeef0;border-color:#d4d4d8;color:#3f3f46}
.badge-prio-normaal{background:#eef4fb;border-color:#cfdcec;color:#1d3a5e}
.badge-prio-hoog{background:#fbeaea;border-color:#e7b6b6;color:#a30000;font-weight:600}

/* inline-editable badge: <select> styled as badge */
.badge-select{
    width:auto;display:inline-block;
    padding:2px 22px 2px 8px;margin:0;
    border:1px solid var(--c-border-strong);
    background:var(--c-surface-alt);color:var(--c-fg-soft);
    font:inherit;font-size:.82em;line-height:1.5;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat;background-position:right 6px center;background-size:9px 9px;
    cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease,background-color .15s ease;
}
.badge-select:hover{border-color:var(--c-fg-soft)}
.badge-select:focus{outline:none;box-shadow:0 0 0 2px var(--c-fg);border-color:var(--c-fg)}
.badge-select.is-saving{opacity:.6;cursor:wait}
.badge-select.is-saved {box-shadow:0 0 0 2px #16a34a}
.badge-select.is-error {box-shadow:0 0 0 2px var(--c-error);border-color:var(--c-error)}

/* Status pill houdt zelf de achtergrond; selectie binnenin moet transparant zijn */
.status-pill .badge-select.status-select{
    background-color:transparent;border-color:transparent;color:inherit;
    padding:0 16px 0 0;font-weight:500;
    background-position:right 0 center;
}
.status-pill .badge-select.status-select:hover{border-color:transparent;background-color:rgba(0,0,0,.04)}
.status-pill .badge-select.status-select:focus{box-shadow:none;outline:1px dashed currentColor;outline-offset:2px}

textarea{min-height:90px;resize:vertical;font-family:inherit}

/* status dots + pills */
.status-dot{
    display:inline-block;width:10px;height:10px;border-radius:50%;
    background:#9ca3af;flex:0 0 auto;vertical-align:middle;
    box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.dot-open    {background:#dc2626} /* rood   */
.dot-started {background:#2563eb} /* blauw  */
.dot-done    {background:#16a34a} /* groen  */
.status-dot.is-disabled{opacity:.6}

.dot-btn{background:none;border:0;padding:6px;cursor:pointer;line-height:0;border-radius:50%}
.dot-btn:hover{background:var(--c-hover)}
.dot-btn .status-dot{width:14px;height:14px}

.status-pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:2px 10px;font-size:.82em;line-height:1.6;
    border:1px solid var(--c-border-strong);background:var(--c-surface-alt);color:var(--c-fg-soft);
}
.status-pill.status-open    {background:#fef2f2;border-color:#fecaca;color:#991b1b}
.status-pill.status-started {background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.status-pill.status-done    {background:#f0fdf4;border-color:#bbf7d0;color:#166534}

/* todo show page */
.todo-show-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.todo-show-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.todo-title-input{
    width:100%;margin:0 0 4px;
    padding:.25em 8px;
    font-size:1.25em;font-weight:600;line-height:1.3;
    border:1px solid transparent;background:transparent;color:var(--c-fg);
}
.todo-title-input:hover{border-color:var(--c-border)}
.todo-title-input:focus{outline:none;border-color:var(--c-fg);background:var(--c-surface);box-shadow:0 0 0 2px var(--c-fg)}
.status-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.btn-status{font-size:.88em;min-height:30px;padding:.25em .8em}
.btn-status.is-current{background:var(--c-fg);color:#fff;border-color:var(--c-fg)}
.btn-status .status-dot{width:9px;height:9px}
.todo-meta{font-size:.82em;margin-top:2px}

.upload-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.upload-bar input[type=file]{flex:1 1 280px;max-width:520px}

.attachment-grid{
    display:grid;gap:14px;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.attachment-card{
    border:1px solid var(--c-border);background:var(--c-surface-alt);
    display:flex;flex-direction:column;
}
.attachment-preview{
    display:flex;align-items:center;justify-content:center;
    aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--c-border);overflow:hidden;
}
.attachment-preview img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pdf-thumb{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    width:100%;height:100%;color:var(--c-fg-soft);text-decoration:none;
}
.pdf-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:54px;height:64px;
    background:var(--c-error-bg);color:var(--c-error);
    border:1px solid #e7b6b6;font-weight:700;font-size:.95em;letter-spacing:.05em;
}
.attachment-info{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.attachment-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachment-meta{font-size:.78em}
.attachment-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;align-items:center}
.pdf-inline{margin-top:8px}
.pdf-inline iframe{width:100%;height:520px;border:1px solid var(--c-border);background:#fff;margin-top:8px}

/* icon-button badge (small count overlay) */
.icon-btn{position:relative}
.icon-btn .icon-badge{
    position:absolute;top:-4px;right:-4px;
    min-width:16px;height:16px;padding:0 4px;
    background:var(--c-fg);color:#fff;
    font-size:.68em;font-weight:600;line-height:16px;text-align:center;
    border-radius:8px;pointer-events:none;
}

/* modal popup (notes / attachments quick view) */
.modal-backdrop{
    position:fixed;inset:0;background:rgba(17,17,17,.55);
    display:flex;align-items:center;justify-content:center;
    z-index:1000;padding:24px;
}
.modal-card{
    background:var(--c-surface);color:var(--c-fg);
    width:100%;max-width:640px;max-height:90vh;
    display:flex;flex-direction:column;
    border:1px solid var(--c-border-strong);
    box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.modal-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 16px;border-bottom:1px solid var(--c-border);
}
.modal-head h3{margin:0;font-size:1em;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-close{
    background:transparent;border:0;cursor:pointer;color:var(--c-fg-soft);
    width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
    font-size:1.4em;line-height:1;
}
.modal-close:hover{color:var(--c-fg)}
.modal-body{padding:14px 16px;overflow:auto}
.popup-section + .popup-section{margin-top:14px}
.popup-section h4{margin:0 0 6px;font-size:.85em;font-weight:600;color:var(--c-fg-soft);text-transform:uppercase;letter-spacing:.04em}
.popup-body{font-size:.95em;line-height:1.5;white-space:normal;word-wrap:break-word}
.popup-attach-list{list-style:none;margin:0;padding:0}
.popup-attach-list li{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:8px 0;border-bottom:1px solid var(--c-border);
}
.popup-attach-list li:last-child{border-bottom:0}
.popup-attach-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.popup-attach-meta{font-size:.78em;color:var(--c-fg-soft);white-space:nowrap}
.popup-attach-actions{display:flex;gap:6px;flex:0 0 auto}
.popup-empty{color:var(--c-fg-soft);font-style:italic}

/* large modal & inline viewer */
.modal-card.modal-lg{max-width:min(1100px,96vw);height:90vh}
.modal-card.modal-lg .modal-body{padding:0}
.viewer-frame{flex:1 1 auto;width:100%;height:100%;border:0;background:#222;display:block}
.viewer-image{flex:1 1 auto;display:flex;align-items:center;justify-content:center;background:#222;overflow:auto;width:100%}
.viewer-image img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* attachment preview becomes button (clickable, same look) */
.attachment-preview-btn{
    border:0;background:transparent;padding:0;cursor:pointer;
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
.attachment-preview-btn img{max-width:100%;max-height:100%;object-fit:contain;display:block}
button.pdf-thumb{border:0;background:transparent;cursor:pointer;font:inherit}

/* show-page top action bar */
.todo-show-bar{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;
}
.todo-show-bar-field{
    display:inline-flex;align-items:center;gap:6px;
    font-size:.88em;
}
.todo-show-bar-field > .muted{font-size:.82em}
.todo-show-bar-field .badge-select{min-width:110px}
.todo-show-bar-field .status-pill .badge-select.status-select{min-width:120px}

/* fixed-width data table — title-cell absorbs remainder */
.data-table-fixed{table-layout:fixed}
.data-table-fixed td{overflow:hidden;text-overflow:ellipsis}
.data-table-fixed td.cell-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-table-fixed td:not(.cell-ellipsis){white-space:normal}
.data-table-fixed .col-actions,
.data-table-fixed .col-check,
.data-table-fixed .col-num,
.data-table-fixed .col-date,
.data-table-fixed .col-ref{white-space:nowrap}

/* column widths (colgroup classes) */
.cw-check{width:42px}
.cw-prio{width:120px}
.cw-status{width:150px}
.cw-date{width:130px}
.cw-owner{width:160px}
.cw-actions-todos{width:160px}
.cw-ref{width:120px}
.cw-shop{width:140px}
.cw-num{width:110px}
.cw-actions{width:120px}

.modal-footer-actions{margin-top:14px;padding-top:12px;border-top:1px solid var(--c-border);text-align:right}
.popup-loading{padding:18px;color:var(--c-fg-soft);text-align:center;font-style:italic}

/* order autocomplete dropdown */
.order-ac{position:relative}
.order-ac-list{position:absolute;left:0;right:0;top:100%;z-index:30;
    background:var(--c-surface);border:1px solid var(--c-border-strong);
    border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);
    max-height:320px;overflow-y:auto;margin-top:2px}
.order-ac-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--c-border)}
.order-ac-item:last-child{border-bottom:none}
.order-ac-item:hover, .order-ac-item.is-active{background:var(--c-hover)}
.order-ac-row1{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.95em}
.order-ac-row2{font-size:.85em;color:var(--c-fg-soft);margin-top:2px}
.order-ac-shop-tag{font-size:.75em;background:var(--c-hover);color:var(--c-fg-soft);
    padding:1px 7px;border-radius:10px;font-weight:500}
.order-ac-empty{padding:12px;color:var(--c-fg-soft);text-align:center;font-style:italic;font-size:.9em}

/* order-ac chip */
.order-ac-chip{display:flex;align-items:center;gap:8px;
    width:100%;padding:.45em .35em .45em .7em;line-height:1.4;
    background:#fff;border:1px solid var(--c-border-strong);
    border-radius:2px;font:inherit;color:var(--c-fg);
    box-sizing:border-box}
.order-ac-chip[hidden]{display:none}
.order-ac-chip-ref{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-ac-chip-shop{font-size:.78em;color:var(--c-fg-soft);background:var(--c-hover);
    border:1px solid var(--c-border);padding:1px 8px;border-radius:10px;line-height:1.3}
.order-ac-chip-shop[hidden]{display:none}
.order-ac-chip-x{border:0;background:transparent;color:var(--c-fg-soft);
    width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto}
.order-ac-chip-x:hover{background:var(--c-error-bg);color:var(--c-error)}

/* user avatar chips (initialen + stabiele kleur) */
.user-chip{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;line-height:1}
.user-avatar{display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;font-weight:600;color:#fff;flex:0 0 auto;
    font-family:system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.02em}
.user-chip-xs .user-avatar{width:18px;height:18px;font-size:.62em}
.user-chip-sm .user-avatar{width:24px;height:24px;font-size:.7em}
.user-chip-md .user-avatar{width:32px;height:32px;font-size:.78em}
.user-chip-lg .user-avatar{width:40px;height:40px;font-size:.85em}
.user-chip-name{color:var(--c-fg);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* shop-chip: vaste kleur per webshop, rounded-square i.p.v. cirkel zodat
   het visueel verschilt van een gebruikers-avatar */
.shop-chip .shop-avatar{border-radius:4px;letter-spacing:.04em}

/* Taken-kolom op orders: avatar-stack met klein grijs cijfer per persoon
   (Pipedrive/HubSpot-stijl: eigen kolom, geen rode badge die initialen verbergt) */
.cw-todos{width:140px}
.data-table-fixed td.col-todos{overflow:visible;white-space:nowrap}
.todo-cell-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:none;border:0;padding:2px 4px;margin:0;
    font:inherit;color:var(--c-fg);cursor:pointer;border-radius:6px;
}
.todo-cell-btn:hover{background:var(--c-hover)}
.todo-owner{display:inline-flex;align-items:center;gap:3px;line-height:1}
.todo-owner-num{font-size:.78em;font-weight:600;color:var(--c-fg-soft);font-variant-numeric:tabular-nums}
.todo-owner-more{font-size:.78em;color:var(--c-fg-soft);font-weight:600;margin-left:2px}

/* Pager */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:10px 2px 18px}
.pager-info{font-size:.92em}
.pager-size{display:flex;align-items:center;gap:8px}
.pager-size select{padding:3px 6px;border:1px solid var(--c-border,#d3d6db);border-radius:5px;background:#fff}
.pager-links{list-style:none;padding:0;margin:0 0 0 auto;display:flex;gap:6px;align-items:center}
.pager-current{font-size:.9em;color:var(--c-fg-soft,#5b6470);padding:0 8px}
.pager-link{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border:1px solid var(--c-border,#d3d6db);border-radius:5px;background:#fff;color:var(--c-fg,#222);text-decoration:none;font-weight:600}
.pager-link:hover{background:var(--c-hover,#f1f3f6)}
.pager-link.is-disabled{pointer-events:none;opacity:.4}

/* Inline status-edit knop in tabel (lijkt op badge maar is klikbaar) */
button.badge-status.js-edit-order-status{cursor:pointer;border:0;font-family:inherit;font-weight:600}
button.badge-status.js-edit-order-status:hover{filter:brightness(1.06);box-shadow:0 0 0 2px rgba(0,0,0,.06)}

/* Status-edit form in modal */
.status-edit-form{display:flex;flex-direction:column;gap:14px}
.status-edit-form label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.status-edit-form .state-edit-select{padding:6px 8px;font-size:1em;border:1px solid var(--c-border,#d3d6db);border-radius:5px;background:#fff}
.status-edit-form .status-edit-email{flex-direction:row;align-items:center;font-weight:400}
.status-edit-form .status-edit-email input{margin-right:8px}
.status-edit-msg{min-height:1.2em}
.status-edit-error{color:#b91c1c;font-weight:600}

/* Globale top-loader (NProgress-stijl) */
.crm-top-loader{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;pointer-events:none;opacity:0;transition:opacity .25s ease}
.crm-top-loader.is-active{opacity:1}
.crm-top-loader-bar{height:100%;width:0;background:linear-gradient(90deg,#3b82f6 0%,#06b6d4 50%,#3b82f6 100%);background-size:200% 100%;box-shadow:0 0 8px rgba(59,130,246,.55);transition:width .2s ease}
.crm-top-loader.is-active .crm-top-loader-bar{animation:crm-top-loader-shimmer 1.4s linear infinite}
@keyframes crm-top-loader-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Inline mini-spinner (los te gebruiken: <span class="crm-spinner"></span>) */
.crm-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,.15);border-top-color:#3b82f6;border-radius:50%;vertical-align:-3px;animation:crm-spinner-rot .7s linear infinite}
.crm-spinner.crm-spinner-lg{width:22px;height:22px;border-width:3px}
@keyframes crm-spinner-rot{to{transform:rotate(360deg)}}

/* Body-cursor wait wanneer er een loading bezig is */
body.crm-is-loading{cursor:progress}
body.crm-is-loading a,body.crm-is-loading button{cursor:progress}

/* Orders: gecombineerde datum + shop-avatar kolom */
.cw-date-shop{width:170px}
.order-date-shop{display:inline-flex;align-items:center;gap:8px;line-height:1.1}
.order-date-shop-badge{display:inline-flex;flex:0 0 auto}
.order-date-text{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Status-edit confirm-stage */
.status-edit-confirm{display:flex;flex-direction:column;gap:14px;padding:12px;border:1px solid #fde68a;background:#fffbeb;border-radius:6px}
.status-edit-confirm-text{margin:0;color:#713f12}
.status-edit-msg.status-edit-ok{color:#15803d;font-weight:600}

/* Globaal: [hidden] mag niet door class-display overschreven worden */
[hidden]{display:none !important}

/* Order ID kolom */
.cw-id{width:80px}
td.col-id{font-variant-numeric:tabular-nums;color:var(--c-text-muted,#6b7280);text-align:right}

/* Order-detail collapse */
.order-expand-btn{
    display:inline-flex;align-items:center;gap:6px;padding:2px 6px 2px 2px;
    background:transparent;border:1px solid transparent;border-radius:4px;
    color:inherit;cursor:pointer;font:inherit;line-height:1;
    font-variant-numeric:tabular-nums;
}
.order-expand-btn:hover{background:rgba(0,0,0,.04);border-color:var(--c-border,#e5e7eb)}
.order-expand-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}
.order-expand-caret{width:14px;height:14px;flex:none;transition:transform .15s ease}
.order-expand-btn[aria-expanded="true"] .order-expand-caret{transform:rotate(90deg)}
.order-expand-id{color:var(--c-text-muted,#6b7280)}
tr.order-row.is-expanded > td{border-bottom-color:transparent}
tr.order-detail-row > .order-detail-cell{
    padding:0;background:#f9fafb;border-top:0;
}
.order-detail-body{padding:14px 18px}
.order-detail-loader,.order-detail-empty{padding:8px 0}
.order-detail-error{padding:8px 12px;background:#fef2f2;color:#991b1b;border-radius:4px}

.order-items-table{width:100%;border-collapse:collapse;font-size:.95em;background:#fff;border:1px solid var(--c-border,#e5e7eb);border-radius:6px;overflow:hidden}
.order-items-table thead th{background:#f3f4f6;text-align:left;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--c-border,#e5e7eb)}
.order-items-table tbody td{padding:8px 10px;border-bottom:1px solid #f1f5f9;vertical-align:top}
.order-items-table tbody tr:last-child td{border-bottom:0}
.order-items-table .oi-col-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.order-items-table .oi-col-ref{width:140px;color:var(--c-text-muted,#6b7280)}
.order-items-table .oi-col-qty{width:70px}
.order-items-table .oi-col-unit{width:110px}
.order-items-table .oi-col-total{width:120px}
.order-items-table tfoot td{padding:6px 10px;border-top:1px solid var(--c-border,#e5e7eb);background:#fafafa}
.order-items-table tfoot .oi-foot-label{text-align:right;color:var(--c-text-muted,#6b7280)}
.order-items-table tfoot .oi-foot-total td{background:#f3f4f6}

/* Notitie per orderregel */
.oi-name{font-weight:500}
.oi-note-wrap{margin-top:4px}
.oi-note-summary{
    display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    list-style:none;color:var(--c-text-muted,#6b7280);font-size:.9em;
    padding:2px 4px;border-radius:3px;user-select:none;
}
.oi-note-summary::-webkit-details-marker{display:none}
.oi-note-summary:hover{color:#1f2937;background:rgba(0,0,0,.03)}
.oi-note-icon{font-size:.95em;line-height:1}
.oi-note-input{
    display:block;width:100%;margin-top:6px;padding:6px 8px;
    font:inherit;font-size:.95em;line-height:1.4;
    border:1px solid var(--c-border,#e5e7eb);border-radius:4px;
    background:#fff;resize:vertical;min-height:38px;
}
.oi-note-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.15)}
.oi-note-status{font-size:.85em;font-style:italic;margin-left:4px}
.oi-note-status.is-editing{color:#9ca3af}
.oi-note-status.is-saving{color:#3b82f6}
.oi-note-status.is-saved{color:#15803d}
.oi-note-status.is-error{color:#b91c1c;font-style:normal;font-weight:600}

/* Orderregels-notitie icon + popup */
.icon-btn-note{color:#a16207;border-color:#fde68a;background:#fffbeb}
.icon-btn-note:hover{color:#78350f;background:#fef3c7;border-color:#fcd34d}
.icon-btn-badge{
    position:absolute;top:-4px;right:-4px;
    min-width:16px;height:16px;padding:0 4px;
    background:#b45309;color:#fff;border-radius:8px;
    font-size:10px;line-height:16px;font-weight:600;text-align:center;
    box-shadow:0 0 0 2px #fff;
}
.popup-notes-list{list-style:none;margin:0;padding:0}
.popup-notes-list li{
    padding:10px 0;border-bottom:1px solid var(--c-border,#e5e7eb);
}
.popup-notes-list li:last-child{border-bottom:0}
.popup-note-head{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.popup-note-ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:#6b7280}
.popup-note-name{font-weight:500;color:#111827}
.popup-note-qty{font-size:.85em;color:#6b7280}
.popup-note-body{
    white-space:pre-wrap;background:#fffbeb;border:1px solid #fde68a;
    border-radius:4px;padding:8px 10px;font-size:.95em;color:#451a03;
}

/* ========== Dashboard ========== */
.dash-grid{
    display:grid;gap:16px;
    grid-template-columns:repeat(12,1fr);
    align-items:start;
}
.dash-hero{grid-column:span 12;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.dash-hello{margin:0 0 4px;font-size:1.5rem}
.dash-hero-totals{display:flex;gap:24px}
.dash-total{text-align:right}
.dash-total-num{font-size:1.6rem;font-weight:700;line-height:1.1;color:#111827}
.dash-total-lbl{font-size:.85em;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}

.dash-todo{grid-column:span 12}
.dash-chart-card{grid-column:span 6}
.dash-system{grid-column:span 12}

@media (max-width: 900px){
    .dash-chart-card{grid-column:span 12}
}

.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.card-head h2{margin:0;font-size:1.05rem}

.dash-stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
@media (max-width:700px){.dash-stat-row{grid-template-columns:repeat(2,1fr)}}
.dash-stat{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    padding:12px 14px;border-radius:8px;background:#f9fafb;border:1px solid #e5e7eb;
    text-decoration:none;color:inherit;transition:background .12s;
}
a.dash-stat:hover{background:#f3f4f6}
.dash-stat-num{font-size:1.5rem;font-weight:700;line-height:1;color:#111827}
.dash-stat-lbl{font-size:.8em;color:#6b7280;margin-top:4px;text-transform:uppercase;letter-spacing:.04em}
.dash-stat-open{border-left:3px solid #3b82f6}
.dash-stat-started{border-left:3px solid #f59e0b}
.dash-stat-overdue{border-left:3px solid #9ca3af}
.dash-stat-overdue.is-alert{border-left-color:#dc2626;background:#fef2f2}
.dash-stat-overdue.is-alert .dash-stat-num{color:#b91c1c}
.dash-stat-week{border-left:3px solid #8b5cf6}
.dash-stat-done{border-left:3px solid #10b981}

.dash-sub-h{margin:0 0 8px;font-size:.85em;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.dash-empty{padding:12px 0}
.dash-todo-list{list-style:none;margin:0;padding:0}
.dash-todo-item{border-bottom:1px solid #f3f4f6}
.dash-todo-item:last-child{border-bottom:0}
.dash-todo-item.is-overdue .dash-todo-due{color:#b91c1c;font-weight:600}
.dash-todo-link{
    display:grid;gap:10px;align-items:center;
    grid-template-columns:auto 1fr auto auto;
    padding:8px 4px;text-decoration:none;color:inherit;
}
.dash-todo-link:hover{background:#f9fafb}
.dash-todo-prio{display:inline-block;width:8px;height:8px;border-radius:50%;background:#9ca3af}
.dash-todo-prio.prio-hoog{background:#dc2626}
.dash-todo-prio.prio-normaal{background:#3b82f6}
.dash-todo-prio.prio-laag{background:#9ca3af}
.dash-todo-title{font-weight:500;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-todo-order{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:#6b7280}
.dash-todo-due{font-size:.85em;color:#6b7280}

/* charts */
.chart-wrap{width:100%;overflow:hidden}
.chart-svg{width:100%;height:auto;display:block}
.chart-grid{stroke:#e5e7eb;stroke-width:1}
.chart-axis{stroke:#9ca3af;stroke-width:1}
.chart-ylab{font:11px ui-sans-serif,system-ui,sans-serif;fill:#6b7280}
.chart-xlab{font:11px ui-sans-serif,system-ui,sans-serif;fill:#6b7280}
.chart-line{transition:stroke-width .15s}
.chart-line:hover{stroke-width:3}

.chart-legend{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:10px;padding-top:10px;border-top:1px solid #f3f4f6}
.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:.9em}
.legend-swatch{display:inline-block;width:12px;height:12px;border-radius:2px}
.legend-label{color:#111827;font-weight:500}
.legend-val{font-size:.85em}

/* Dashboard — filter & vergelijking */
.dash-filter-card{grid-column:span 12}
.dash-filter-row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end}
.dash-filter-field{display:flex;flex-direction:column;gap:6px}
.dash-filter-label{font-size:.75em;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.dash-filter-field select{padding:6px 10px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;font:inherit}
.dash-filter-shops{flex:1;min-width:260px}
.dash-shop-chips{display:flex;flex-wrap:wrap;gap:6px}
.dash-shop-chip{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;border:1px solid #e5e7eb;border-radius:999px;
    background:#fff;font-size:.9em;color:#6b7280;cursor:pointer;user-select:none;
    transition:background .12s,border-color .12s,color .12s;
}
.dash-shop-chip input{position:absolute;opacity:0;pointer-events:none}
.dash-shop-chip:hover{background:#f9fafb}
.dash-shop-chip.is-on{
    color:#111827;background:#fff;border-color:var(--shop-color,#3b82f6);
    box-shadow:inset 0 0 0 1px var(--shop-color,#3b82f6);
}
.dash-shop-swatch{display:inline-block;width:10px;height:10px;border-radius:50%;opacity:.4}
.dash-shop-chip.is-on .dash-shop-swatch{opacity:1}
.dash-filter-compare{flex-direction:row;align-items:center;gap:6px;padding-bottom:6px}
.dash-filter-compare input{width:14px;height:14px}

/* Delta-badges */
.delta{
    display:inline-flex;align-items:center;gap:3px;
    font-size:.85em;font-weight:600;padding:1px 6px;border-radius:10px;
    background:#f3f4f6;color:#374151;margin-top:4px;
}
.delta.is-up   {background:#dcfce7;color:#15803d}
.delta.is-down {background:#fee2e2;color:#b91c1c}
.delta.is-flat {background:#f3f4f6;color:#6b7280}
.delta-pct{opacity:.75;font-weight:500;font-size:.95em}
.legend-item .delta{margin-top:0;margin-left:2px}

/* Order-row: land-vlag + carrier-naam */
.order-country{
    display:inline-block;font-size:1.1em;line-height:1;margin-right:6px;
    vertical-align:-2px;font-family:"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.order-customer-name{display:inline}
.order-carrier{
    font-size:.78em;color:#6b7280;margin-top:2px;line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Echte vlag-icons (van flagcdn.com) */
.flag-icon{
    display:inline-block;width:16px;height:12px;
    object-fit:cover;border-radius:2px;
    box-shadow:0 0 0 1px rgba(0,0,0,.08);
    vertical-align:-1px;
}
.order-country{display:inline-flex;align-items:center;margin-right:6px;line-height:1}

/* ====================== Settings page (status mapping) ====================== */
.sidebar-nav-foot{flex:0 0 auto;padding:6px 0;border-top:1px solid var(--c-border)}

.settings-page{max-width:1100px;display:flex;flex-direction:column;gap:14px}
.settings-intro{color:var(--c-text-muted,#6b7280);font-size:.92em;line-height:1.45;max-width:780px}
.settings-intro strong{color:#111827}

.settings-tabs{
    display:flex;flex-wrap:wrap;gap:4px;
    border-bottom:1px solid var(--c-border,#e5e7eb);
}
.settings-tab{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 14px;background:transparent;border:0;cursor:pointer;
    font:inherit;font-size:.95em;color:var(--c-fg-soft,#4b5563);
    border-bottom:2px solid transparent;border-radius:4px 4px 0 0;
}
.settings-tab:hover{background:rgba(0,0,0,.03);color:#111827}
.settings-tab.is-active{
    color:#111827;font-weight:600;
    border-bottom-color:var(--c-accent,#2563eb);
    background:rgba(37,99,235,.05);
}

.settings-pane{display:none;padding-top:8px}
.settings-pane.is-active{display:block}

.settings-state-table{
    background:#fff;border:1px solid var(--c-border,#e5e7eb);border-radius:6px;overflow:hidden;
}
.settings-state-head{
    display:grid;grid-template-columns:minmax(220px,1fr) minmax(360px,1.5fr);
    padding:10px 14px;background:#f9fafb;border-bottom:1px solid var(--c-border,#e5e7eb);
    font-size:.8em;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
    color:#6b7280;
}
.settings-state-row{
    display:grid;grid-template-columns:minmax(220px,1fr) minmax(360px,1.5fr);
    gap:14px;align-items:center;
    padding:10px 14px;border-bottom:1px solid #f1f3f5;
}
.settings-state-row:last-child{border-bottom:0}
.settings-state-row:hover{background:#fafbfc}

.state-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.state-color{
    display:inline-block;width:10px;height:10px;border-radius:50%;
    border:1px solid rgba(0,0,0,.12);flex:0 0 auto;
}
.state-name{font-weight:500;color:#111827}
.state-flags{display:inline-flex;gap:3px}
.state-flag{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;padding:0 4px;border-radius:9px;
    background:#eef2ff;color:#3730a3;font-size:.7em;font-weight:600;
}
.state-id{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.78em;color:#9ca3af}

.state-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

.chip-crm{
    display:inline-flex;align-items:center;
    padding:5px 12px;border:1px solid #d4d4d8;border-radius:14px;
    background:#f3f4f6;color:#52525b;
    font:inherit;font-size:.85em;cursor:pointer;
    transition:background .12s,color .12s,border-color .12s,box-shadow .12s;
}
.chip-crm:hover{background:#e5e7eb;color:#27272a}
.chip-crm:disabled{opacity:.6;cursor:wait}

.chip-crm.is-auto{
    background:#fff;color:#52525b;
    border-style:dashed;border-color:#a1a1aa;
}

.chip-crm.is-on{
    background:#16a34a;border-color:#15803d;color:#fff;
    box-shadow:0 1px 2px rgba(22,163,74,.25);
    font-weight:600;
}
.chip-crm.is-on:hover{background:#15803d}

.chip-status{
    font-size:.8em;color:#6b7280;margin-left:6px;min-width:90px;
}

.settings-legend{
    margin-top:10px;color:#6b7280;font-size:.82em;
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.legend-dot{
    display:inline-block;width:12px;height:12px;border-radius:50%;
    margin-right:6px;vertical-align:-2px;border:1px solid transparent;
}
.legend-grey{background:#f3f4f6;border-color:#d4d4d8}
.legend-dashed{background:#fff;border:1px dashed #a1a1aa}
.legend-green{background:#16a34a;border-color:#15803d}
/* ====================== Settings: CRM-status CRUD ====================== */
.settings-section{margin-top:18px}
.settings-section + .settings-section{margin-top:24px;padding-top:18px;border-top:1px solid var(--c-border,#e5e7eb)}
.settings-section-head h2{margin:0 0 4px;font-size:1.05em}
.settings-section-head p{margin:0 0 12px;color:#6b7280;font-size:.9em}

.crm-statuses-list{
    display:flex;flex-direction:column;gap:6px;
    background:#fff;border:1px solid var(--c-border,#e5e7eb);border-radius:6px;
    padding:6px;margin-bottom:12px;
}
.crm-status-row{
    display:grid;grid-template-columns:18px 1fr auto auto auto auto;
    gap:10px;align-items:center;
    padding:8px 10px;border-radius:4px;
}
.crm-status-row:hover{background:#f9fafb}
.crm-status-swatch{
    width:18px;height:18px;border-radius:50%;
    border:1px solid rgba(0,0,0,.12);
}
.crm-status-label{font-weight:500;color:#111827}
.crm-status-slug{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.78em;color:#9ca3af;
}
.crm-status-flag{
    font-size:.7em;text-transform:uppercase;letter-spacing:.05em;
    background:#eef2ff;color:#3730a3;border-radius:9px;
    padding:1px 7px;font-weight:600;
}
.crm-status-delete{color:#a30000}
.crm-status-delete:hover{color:#7c0000}

.crm-status-edit-wrap{
    grid-column:1 / -1;
    margin-top:8px;padding:8px 4px 0;border-top:1px dashed #e5e7eb;
}
.crm-status-edit-wrap form{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.crm-status-edit-wrap input[type="text"]{
    flex:1 1 220px;min-width:200px;
    padding:6px 10px;border:1px solid var(--c-border,#e5e7eb);border-radius:4px;
    font:inherit;
}
.crm-status-edit-wrap input[type="color"]{
    width:34px;height:34px;padding:0;border:1px solid var(--c-border,#e5e7eb);
    border-radius:4px;cursor:pointer;background:#fff;
}

.crm-status-add{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    padding:10px 12px;background:#fff;
    border:1px dashed var(--c-border,#e5e7eb);border-radius:6px;
}
.crm-status-add input[type="text"]{
    flex:1 1 280px;min-width:220px;
    padding:7px 10px;border:1px solid var(--c-border,#e5e7eb);border-radius:4px;
    font:inherit;
}
.crm-status-add input[type="color"]{
    width:34px;height:34px;padding:0;border:1px solid var(--c-border,#e5e7eb);
    border-radius:4px;cursor:pointer;background:#fff;
}
.crm-status-add .js-status-msg,
.crm-status-edit-wrap .js-status-msg{font-size:.85em;color:#6b7280}

/* Badge — fallback voor custom statussen via --badge custom property */
.badge-status[style*="--badge"]{
    background:color-mix(in srgb, var(--badge,#999) 14%, white);
    border-color:color-mix(in srgb, var(--badge,#999) 38%, white);
    color:var(--badge,#444);
}

/* Chip kleur: gebruik per-status --chip kleur als die er is */
.chip-crm[style*="--chip"].is-on{
    background:var(--chip,#16a34a);
    border-color:color-mix(in srgb, var(--chip,#16a34a) 70%, black);
    color:#fff;
    box-shadow:0 1px 2px color-mix(in srgb, var(--chip,#16a34a) 35%, transparent);
}
.chip-crm[style*="--chip"].is-on:hover{
    background:color-mix(in srgb, var(--chip,#16a34a) 80%, black);
}
.chip-crm[style*="--chip"].is-auto{
    border-color:color-mix(in srgb, var(--chip,#999) 60%, white);
    color:color-mix(in srgb, var(--chip,#999) 80%, black);
}
/* Order zonder CRM-koppeling — toont PS-naam neutraal */
.badge-status.badge-unmapped{
    background:#f3f4f6;border-color:#d4d4d8;color:#52525b;
    border-style:dashed;
}