/* ============================================================
   IDSpecto.Admin – VIVAVIS Design
   Primärfarbe: #009EA0 (Teal)
   ============================================================ */

:root {
    --vv-teal:       #009EA0;
    --vv-teal-dark:  #007b7d;
    --vv-teal-light: #e0f5f5;
    --vv-header-bg:  #1c2d3a;
    --vv-sidebar-bg: #ffffff;
    --vv-sidebar-border: #d8dfe8;
    --vv-text:       #222;
    --vv-text-muted: #666;
    --sidebar-width: 265px;
}

/* Layout */
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: var(--vv-text);
    background: #fff;
}

/* Bootstrap-Primärfarbe überschreiben */
.btn-primary { background-color: var(--vv-teal); border-color: var(--vv-teal); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--vv-teal-dark); border-color: var(--vv-teal-dark); }
.btn-outline-primary { color: var(--vv-teal); border-color: var(--vv-teal); }
.btn-outline-primary:hover { background-color: var(--vv-teal); border-color: var(--vv-teal); color: #fff; }
a { color: var(--vv-teal); }
a:hover { color: var(--vv-teal-dark); }

/* Header */
.app-header {
    height: 46px;
    background: var(--vv-header-bg);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 1.2rem;
    gap: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    z-index: 100;
}
.app-header .brand {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
    color: #fff;
}
.app-header .brand span { color: var(--vv-teal); }
.app-header .user-info {
    margin-left: auto;
    font-size: 0.83rem;
    opacity: 0.8;
    color: #fff;
}
.lang-switcher { display: flex; align-items: center; gap: 3px; }
.lang-btn { font-size: 0.75rem; color: rgba(255,255,255,0.60); text-decoration: none; padding: 2px 7px; border-radius: 3px; transition: background 0.15s, color 0.15s; }
.lang-btn.active { color: #fff; font-weight: 700; background: rgba(255,255,255,0.18); }
.lang-btn:hover { color: #fff; background: rgba(255,255,255,0.10); }
.lang-sep { color: rgba(255,255,255,0.25); font-size: 0.7rem; }

/* Bestätigungs-Modal */
.confirm-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1055;
    animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.confirm-dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15,23,42,0.25), 0 4px 16px rgba(15,23,42,0.12);
    width: 400px;
    max-width: calc(100vw - 32px);
    animation: slideUp 0.18s ease;
    overflow: hidden;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }

.confirm-icon-wrap {
    display: flex; justify-content: center; padding: 28px 0 8px;
}
.confirm-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: #fff0f0; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.confirm-title {
    text-align: center; font-size: 1.05rem; font-weight: 700;
    color: #111827; padding: 4px 24px 0;
}
.confirm-msg {
    text-align: center; font-size: 0.88rem; color: #6b7280;
    padding: 8px 28px 24px; line-height: 1.5;
}
.confirm-msg strong { color: #111827; }
.confirm-actions {
    display: flex; gap: 10px; padding: 0 20px 20px;
}
.confirm-actions .btn { flex: 1; padding: 9px 0; font-size: 0.88rem; border-radius: 8px; font-weight: 500; }

.app-header a.logout-btn {
    color: #a8d8d8;
    text-decoration: none;
    font-size: 0.8rem;
    padding: 3px 10px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 3px;
    transition: background 0.15s;
}
.app-header a.logout-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* App-Layout */
.app-layout {
    display: flex;
    height: calc(100vh - 46px);
    overflow: hidden;
}

/* Sidebar / Baumnavigation – VIVAVIS Grüner Farbverlauf */
.sidebar {
    width: var(--sidebar-width);
    min-width: 140px;
    max-width: 600px;
    background: linear-gradient(170deg, #00473d 0%, #005c46 30%, #1e7a40 60%, #5ba520 90%, #72b81a 100%);
    border-right: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.25);
}
.sidebar-resize-handle {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    flex-shrink: 0;
    transition: background 0.15s;
    z-index: 10;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.resizing {
    background: rgba(0,158,160,0.45);
}

.sidebar-copyright {
    padding: 6px 14px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.08) 100%);
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    user-select: none;
}
.sidebar-copyright-line {
    display: block;
    width: 32px;
    height: 1px;
    background: rgba(255,255,255,0.20);
    border-radius: 1px;
}
.sidebar-copyright-text {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.4px;
    text-align: center;
    line-height: 1.4;
}
.sidebar-copyright-text strong {
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    letter-spacing: 0.2px;
}

.sidebar-header {
    padding: 8px 14px;
    background: rgba(0,0,0,0.20);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tree-root { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0; }

/* Baumknoten */
.tree-node { user-select: none; }
.tree-node-row {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 0;
    white-space: nowrap;
    min-height: 26px;
    border-left: 3px solid transparent;
    transition: background 0.12s;
}
.tree-node-row:hover {
    background: rgba(255,255,255,0.18);
    border-left-color: rgba(255,255,255,0.7);
}
.tree-node-row.active {
    background: rgba(255,255,255,0.25);
    border-left-color: #fff;
    font-weight: 600;
}
.tree-node-row.selected {
    background: rgba(255,255,255,0.22);
    border-left-color: #fff;
}
.tree-node-toggle {
    width: 16px;
    text-align: center;
    color: rgba(255,255,255,0.70);
    font-size: 0.65rem;
    flex-shrink: 0;
}
.tree-node-icon {
    margin-right: 5px;
    font-size: 0.85rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    color: rgba(255,255,255,0.85);
}
.tree-node-label {
    font-size: 0.84rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.tree-node-children { padding-left: 14px; }

/* Hauptinhalt */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: #fff;
    min-height: 0;
}
.page-header {
    flex-shrink: 0;
    background: #f8f9fb;
    border-bottom: 1px solid #e2e6ea;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.page-header h4 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--vv-header-bg); }
.page-body { flex: 1; overflow-y: auto; overflow-x: auto; min-height: 0; padding: 0 20px 16px; }

/* Tabellen */
.table-edw { font-size: 0.82rem; border-collapse: separate !important; border-spacing: 0; }
.table-edw td, .table-edw th { padding: 3px 8px; vertical-align: middle; }
.table-edw td.num, .table-edw th.num { text-align: right; font-family: 'Consolas', monospace; }
.table-edw tr:hover td { background: #f0f8f8 !important; }
/* border-collapse:separate verhindert Chromiums Rendering-Bug bei sticky thead.
   Borders werden manuell so gesetzt, dass keine Doppellinien entstehen. */
.table-edw > :not(caption) > * > * {
    border-top: 0 !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    border-left: 1px solid var(--bs-border-color) !important;
    border-right: 0 !important;
}
.table-edw > :not(caption):first-child > tr:first-child > * {
    border-top: 1px solid var(--bs-border-color) !important;
}
.table-edw > :not(caption) > * > *:last-child {
    border-right: 1px solid var(--bs-border-color) !important;
}
.table-edw thead th {
    background: #f2f5f7 !important;
    box-shadow: inset 0 -2px 0 var(--vv-teal) !important;
    color: var(--vv-text);
    border-bottom: 0 !important;
    position: sticky;
    top: 0;
    z-index: 20;
}
.table-edw thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table-edw thead th.sortable:hover { background: #e4edf2; }
.table-edw .status-badge { font-size: 0.7rem; padding: 1px 5px; border-radius: 3px; }

/* Status-Farben */
.status-W { background: #d4edda; color: #155724; }
.status-m { background: #fff3cd; color: #856404; }
.status-v { background: #d0f0f0; color: #006466; }
.status-S { background: #e2e3e5; color: #383d41; }
.status-E { background: #f8d7da; color: #721c24; }
.status-I { background: #d1ecf1; color: #0c5460; }

/* Zeitraumauswahl */
.period-selector { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.period-selector .btn { font-size: 0.8rem; padding: 2px 10px; }
.period-nav-btn { font-size: 0.85rem; padding: 2px 8px; }

/* Chart-Container */
.chart-container { width: 100%; min-height: 280px; }
.chart-wrapper { display: flex; flex-direction: column; gap: 6px; }
.chart-type-bar {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    padding: 0 4px;
}
.chart-type-btn {
    font-size: 0.72rem;
    padding: 2px 10px;
    border: 1px solid #c8d8c0;
    border-radius: 4px;
    background: #f4f8f2;
    color: #4a6741;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.6;
}
.chart-type-btn:hover { background: #ddeedd; }
.chart-type-btn.active {
    background: #3a7d44;
    color: #fff;
    border-color: #2d6335;
    font-weight: 600;
}

/* Edit-Mode */
.edit-mode-toolbar {
    background: #fffbea;
    border: 1px solid #f0c040;
    border-radius: 4px;
    padding: 6px 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}
.table-edw td.edited { background: #fff9e0 !important; }
.table-edw td.edited input { border: 1px solid #f0c040; border-radius: 2px; width: 100%; }

/* Dashboard-Widgets */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.widget-card {
    border: 1px solid var(--vv-sidebar-border);
    border-radius: 6px;
    padding: 14px;
    background: #fafbfc;
    border-top: 3px solid var(--vv-teal);
    transition: border-color 0.15s;
    overflow: hidden;
}
.widget-card h6 { font-size: 0.85rem; font-weight: 600; color: var(--vv-teal-dark); margin-bottom: 10px; }

/* Dashboard Edit Mode */
.widget-editing { cursor: default; border-style: dashed !important; }
.widget-drop-target { border: 2px dashed #0d6efd !important; background: rgba(13,110,253,0.04); }
.widget-edit-bar {
    display: flex; align-items: center; padding: 5px 10px;
    background: #f0f4f4; border-bottom: 1px solid var(--vv-sidebar-border);
    margin: -14px -14px 12px; border-radius: 3px 3px 0 0;
}
.widget-drag-handle { cursor: grab; color: #adb5bd; margin-right: 6px; user-select: none; font-size: 1.1rem; }
.widget-edit-title { flex: 1; font-size: 0.78rem; font-weight: 600; color: #6c757d; }
.widget-hide-btn { padding: 1px 7px; color: #adb5bd; background: none; border: none; font-size: 1rem; line-height: 1; }
.widget-hide-btn:hover { color: #dc3545; }
.dashboard-add-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 8px 14px; background: #f8f9fa; border-radius: 6px;
    border: 1px dashed #ced4da;
}

/* Ablesequalität-KPIs – gleiche Farben wie Ableseauftrags-Zeilen */
.quality-kpi {
    padding: 14px 8px 10px;
    border-radius: 7px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    height: 100%;
}
.quality-kpi-value { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.quality-kpi-label { font-size: 0.68rem; font-weight: 600; margin-top: 4px; opacity: 0.75; letter-spacing: 0.01em; }
.quality-kpi-pct   { font-size: 0.72rem; font-weight: 600; margin-top: 5px; opacity: 0.55; }
.quality-kpi.ok   { background: #e4f5e1; border-top: 3px solid #2d8a1e; }
.quality-kpi.ok   .quality-kpi-value { color: #1f5c0e; }
.quality-kpi.ok   .quality-kpi-label { color: #1f5c0e; }
.quality-kpi.err  { background: #fde8e8; border-top: 3px solid #b52020; }
.quality-kpi.err  .quality-kpi-value { color: #8b1a1a; }
.quality-kpi.err  .quality-kpi-label { color: #8b1a1a; }
.quality-kpi.part { background: #fef4e2; border-top: 3px solid #c47e00; }
.quality-kpi.part .quality-kpi-value { color: #7a4f00; }
.quality-kpi.part .quality-kpi-label { color: #7a4f00; }

/* Tages-Messwerte Widget – kompaktere KPIs (2×2 Grid) */
.dv-kpi {
    padding: 8px 6px 7px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    height: 100%;
}
.dv-kpi-val   { font-size: 1.45rem; font-weight: 800; line-height: 1; display: block; }
.dv-kpi-label { font-size: 0.62rem; font-weight: 600; margin-top: 3px; opacity: 0.75; letter-spacing: 0.01em; display: block; }
.dv-kpi-pct   { font-size: 0.65rem; font-weight: 600; margin-top: 2px; opacity: 0.50; display: block; }

/* Schnellzugriff Drop-Zone */
.ql-drop-zone { min-height: 36px; border-radius: 4px; transition: background 0.15s; }
.ql-drop-active { background: rgba(13,110,253,0.06); outline: 2px dashed #0d6efd; outline-offset: 2px; }
.ql-drop-hint { font-size: 0.75rem; color: #0d6efd; text-align: center; padding: 4px; border: 1px dashed #0d6efd; border-radius: 4px; }

/* Ausschneiden (Ctrl+X) */
tr.drag-cut { opacity: 0.45; }
tr.drag-cut td { text-decoration: line-through; }

/* Journal-Badges */
.journal-badge-0 { background:#0dcaf0; color:#000; }
.journal-badge-1 { background:#ffc107; color:#000; }
.journal-badge-2 { background:#dc3545; }
.journal-badge-3 { background:#70ad47; }

/* Login-Seite */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f0f4f4;
}
.login-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,158,160,0.15);
    padding: 2rem;
    width: 360px;
    border-top: 4px solid var(--vv-teal);
}
.login-card .brand { font-size: 1.3rem; font-weight: 700; color: var(--vv-header-bg); margin-bottom: 1.5rem; }
.login-card .brand span { color: var(--vv-teal); }

/* Lade-Indikator */
.loading-overlay { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--vv-text-muted); }

/* Drag & Drop */
tr[draggable=true] { cursor: grab; }
tr[draggable=true]:active { cursor: grabbing; }
.dragging-active [data-accept-prefix] { outline: 2px dashed rgba(0,158,160,0.4); outline-offset: -2px; }
.drag-over { outline: 2px solid var(--vv-teal) !important; outline-offset: -2px; background: rgba(0,158,160,0.18) !important; }
.drop-error { animation: drop-shake 0.4s ease; outline: 2px solid #dc3545 !important; }
@keyframes drop-shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Spalten-Resize */
.col-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    user-select: none;
    z-index: 2;
}
.col-resize-handle::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 1px;
    transition: background 0.15s, width 0.15s;
}
.col-resize-handle:hover::after {
    width: 2px;
    background: var(--vv-teal);
}

/* Klickbare Tabellenzeilen */
.row-clickable { cursor: pointer; }

/* Multi-Select für Drag & Drop */
tr.drag-selected td { background-color: rgba(0,158,160,0.13) !important; outline: 1px solid rgba(0,158,160,0.4); outline-offset: -1px; }
tr.drag-selected:hover td { background-color: rgba(0,158,160,0.22) !important; }

/* Ableseauftrag – Zeilenstatus */
tr.reading-ok      td { background-color: #e4f5e1 !important; color: #1f5c0e; }
tr.reading-fail    td { background-color: #fde8e8 !important; color: #8b1a1a; }
tr.reading-partial td { background-color: #fef4e2 !important; color: #7a4f00; }
tr.reading-ok:hover      td { background-color: #ceebca !important; }
tr.reading-fail:hover    td { background-color: #fbcfcf !important; }
tr.reading-partial:hover td { background-color: #fde8c6 !important; }

/* Messdaten – Zeilenauswahl & Fehlermarkierung */
.table-edw tr.row-selected td { background: #e3f2fd !important; }
.table-edw tr.row-error td { background: #ffeaea; }

/* Messdaten – Spaltenauswahl */
.table-edw th.col-selected { background: #bde0ff !important; cursor: pointer; }
.table-edw td.col-selected { background: rgba(189,224,255,0.30); }
.table-edw thead th.col-header { cursor: pointer; }
.table-edw thead th.col-header:hover { background: #daeeff !important; }

/* Messdaten – Status-Zelle */
.status-cell { text-align: center; font-weight: 700; font-size: 0.78rem; }

/* Messdaten – Flag-Zelle & Popover */
.flag-cell { cursor: pointer; font-family: 'Consolas', monospace; font-size: 0.75rem; }
.flag-cell:hover { text-decoration: underline; color: var(--vv-teal); }
.flag-popover {
    position: absolute;
    z-index: 500;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    padding: 6px 10px;
    min-width: 220px;
    font-size: 0.78rem;
    left: 0;
    top: 100%;
    white-space: nowrap;
    line-height: 1.6;
}

/* Messdaten – sticky Tabellenkopf */
.lp-table thead {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f2f5f7;
}

/* Messdaten – sticky Zeitstempel-Spalte */
.lp-table thead tr:first-child th:first-child {
    position: sticky;
    left: 0;
    z-index: 30;
    background: #f2f5f7 !important;
    box-shadow: 2px 0 4px -1px rgba(0,0,0,0.12);
}
.lp-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #fff;
    box-shadow: 2px 0 4px -1px rgba(0,0,0,0.12);
}
.lp-table tbody tr:hover td:first-child { background: #f0f8f8 !important; }
.lp-table tbody tr.row-selected td:first-child { background: #e3f2fd !important; }
.lp-table tbody tr.row-error:not(.row-selected) td:first-child { background: #ffeaea !important; }

/* Status-Balken unterhalb Diagramm */
.status-bar-wrap { padding: 4px 0 2px; }
.status-bar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.status-bar-label { font-size: 0.68rem; color: #666; min-width: 72px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-bar-svg { flex: 1; height: 14px; display: block; border: 1px solid #ddd; border-radius: 2px; }
.status-bar-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.75rem; color: #555; padding: 4px 0 2px; }
.sbl-item { display: flex; align-items: center; gap: 4px; }
.sbl-dot { width: 11px; height: 11px; border-radius: 2px; display: inline-block; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.12); }

/* DynGroups Drop-Zone */
.page-body.drag-over { outline: 2px dashed #009EA0; outline-offset: -4px; background: rgba(0,158,160,0.04); }

/* Reconnect-Indikator */
@keyframes rcon-spin   { to { transform: rotate(360deg); } }
@keyframes rcon-appear { from { opacity: 0; } to { opacity: 1; } }
#components-reconnect-modal { display: none; }
/* "Reconnecting": kleines Toast unten rechts, erst nach 1,5 s sichtbar (Keep-Alive-Pings werden so unterdrückt) */
#components-reconnect-modal.components-reconnect-show {
    display: flex; align-items: center; gap: 8px;
    position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    padding: 8px 14px; border-radius: 8px; font-size: 0.82rem; color: #fff;
    background: rgba(40,120,122,0.92); box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    animation: rcon-appear 0s 1.5s both;
}
/* "Failed": voller Banner oben – bleibt prominent */
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    padding: 6px 16px; font-size: 0.84rem; color: #fff;
    background: rgba(180,30,30,0.95);
}
#components-reconnect-modal.components-reconnect-show .rcon-failed { display: none; }
#components-reconnect-modal.components-reconnect-failed .rcon-connecting,
#components-reconnect-modal.components-reconnect-rejected .rcon-connecting { display: none; }
#components-reconnect-modal a { color: #fff; font-weight: 600; margin-left: 6px; }

/* Column Picker */
.col-picker-backdrop { position: fixed; inset: 0; z-index: 1049; background: transparent; }
.col-picker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid rgba(0,0,0,.13);
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0,0,0,.13);
    min-width: 185px;
    padding: 5px 0;
    max-height: 300px;
    overflow-y: auto;
}
.col-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    user-select: none;
    transition: background .1s;
    margin: 0;
}
.col-picker-item:hover { background: rgba(0,0,0,.04); }
.col-picker-item input[type=checkbox] { cursor: pointer; flex-shrink: 0; }
.col-picker-required { color: rgba(0,0,0,.45); }
.col-picker-required input[type=checkbox] { cursor: default; }
.col-picker-btn { font-size: 0.78rem !important; padding: 2px 8px !important; }

/* Responsive */
@media (max-width: 768px) {
    .sidebar { width: var(--sidebar-width, 200px); }
    .app-header .user-info { display: none; }
}