/* Card history — tabs + timeline */

.card-modal-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--rule-2);
    margin: -8px -4px 16px;
    padding: 0 4px;
}

.card-tab {
    background: none;
    border: none;
    color: var(--cream-mute);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.card-tab:hover {
    color: var(--cream);
}
.card-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.card-tab-content {
    display: none;
}
.card-tab-content.active {
    display: block;
}

/* =============================================================================
   Labels-pane (v0.7.38) — Trello-style med farve-sektioner
   ============================================================================= */

.card-labels-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 2px 16px;
}

#card-labels-search {
    background: var(--ink-3);
    border: 1px solid var(--rule-2);
    color: var(--cream);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
}
#card-labels-search:focus { border-color: var(--accent); }

.card-labels-group {
    margin-bottom: 6px;
}
.card-labels-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 4px;
    color: var(--cream-mute);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    user-select: none;
    border-radius: 4px;
}
.card-labels-group-header:hover { background: rgba(255,255,255,0.04); }
.card-labels-group-dot {
    width: 10px; height: 10px; border-radius: 50%;
}
.card-labels-group-name { font-weight: 600; }
.card-labels-group-count {
    margin-left: auto;
    opacity: 0.6;
    background: var(--ink-4);
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 10px;
}
.card-labels-group.collapsed .card-labels-group-list { display: none; }

/* Inline-rename input til gruppe-header (double-click) */
.card-labels-group-rename-input {
    background: var(--ink-3);
    border: 1px solid var(--accent);
    color: var(--cream);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: inherit;
    font-weight: 600;
    width: 160px;
    outline: none;
}
.card-labels-group-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 4px 4px 8px;
}

.card-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}
.card-label-row:hover { background: rgba(255,255,255,0.03); }
.card-label-row.hidden { display: none; }
/* Skjul den faktiske checkbox visuelt — vi rendrer en custom checkmark
   INDE i den farvede label-bar via ::before */
.card-label-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.card-label-bar {
    flex: 1;
    padding: 6px 12px 6px 30px;  /* ekstra venstre-padding til checkmark */
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: opacity 0.15s, padding 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
/* Checkmark-firkant inde i bar'en (venstre side) */
.card-label-bar::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}
/* Checkmark når input er checked — bruger adjacent sibling-selector */
.card-label-row input[type="checkbox"]:checked + .card-label-bar::before {
    content: "✓";
    border-color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.4);
}
.card-label-row:hover .card-label-bar { opacity: 0.88; }
.card-label-edit {
    background: transparent;
    border: none;
    color: var(--cream-mute);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
}
.card-label-edit:hover { color: var(--accent); background: rgba(217, 72, 44, 0.1); }
.card-label-builtin {
    color: var(--cream-mute);
    opacity: 0.4;
    padding: 4px 8px;
    font-size: 11px;
}

.card-labels-create-btn {
    background: var(--ink-3);
    border: 1px dashed var(--rule-2);
    color: var(--cream-mute);
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
    font-family: inherit;
    transition: all 0.15s;
}
.card-labels-create-btn:hover {
    color: var(--cream);
    border-color: var(--accent);
    background: rgba(217, 72, 44, 0.05);
}

/* Label-edit modal: farve-vælger */
.label-color-picker {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.label-color-swatch {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, border-color 0.15s;
}
.label-color-swatch:hover { transform: scale(1.08); }
.label-color-swatch.active {
    border-color: var(--cream);
    box-shadow: 0 0 0 1px var(--accent);
}
.label-color-swatch:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.label-color-picker input[type="color"] {
    width: 36px; height: 36px;
    border: 1px solid var(--rule-2);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.card-history-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 2px 16px;
}

.card-history-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--cream-mute);
    font-style: italic;
}

.card-history-event {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--rule-2);
}
.card-history-event:last-child {
    border-bottom: none;
}

.card-history-icon {
    color: var(--cream-faint);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
.card-history-event[data-action="created"] .card-history-icon { color: #6ec76e; }
.card-history-event[data-action="deleted"] .card-history-icon { color: #ff6b6b; }
.card-history-event[data-action="booking_added"] .card-history-icon { color: #4a90d9; }
.card-history-event[data-action="booking_removed"] .card-history-icon { color: #ff8e6b; }

.card-history-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--cream);
}
.card-history-meta {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    color: var(--cream-mute);
    margin-top: 2px;
}
.card-history-old {
    color: var(--cream-mute);
    text-decoration: line-through;
    margin-right: 6px;
}
.card-history-new {
    color: var(--accent);
    font-weight: 600;
}
.card-history-field {
    color: var(--cream-mute);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-right: 6px;
}

/* =============================================================================
   Historik-menu — samlet audit-log (genbruger .card-history-* til selve listen)
   ============================================================================= */
#panel-historik { padding: 28px 32px; }
.historik-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.historik-head h2 {
    font-family: "Fraunces", Georgia, serif; font-size: 26px; font-weight: 600; color: var(--cream); margin: 0;
}
.historik-count { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--cream-mute); }
.historik-filters {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px;
    padding-bottom: 16px; border-bottom: 1px solid var(--rule-2);
}
.historik-filters select,
.historik-filters input[type="text"],
.historik-filters input[type="date"] {
    font-size: 13px; color: var(--cream); background: var(--ink-3);
    border: 1px solid var(--rule-2); border-radius: 7px; padding: 7px 10px; outline: none;
}
.historik-filters select:focus,
.historik-filters input:focus { border-color: var(--accent); }
.historik-filters input[type="text"] { flex: 1; min-width: 160px; }
#historik-reset {
    font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--cream-mute);
    background: var(--ink-4); border: 1px solid var(--rule-2); border-radius: 7px; padding: 7px 12px; cursor: pointer;
}
#historik-reset:hover { color: var(--cream); border-color: var(--accent); }
.historik-list {
    max-height: none; background: var(--ink-2);
    border: 1px solid var(--rule); border-radius: 10px; padding: 8px 14px;
}
.historik-type {
    font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: var(--cream-mute);
    background: var(--ink-4); border: 1px solid var(--rule-2); border-radius: 4px; padding: 1px 6px; margin: 0 2px;
}
.card-history-event[data-action="field_changed"] .card-history-icon,
.card-history-event[data-action="updated"] .card-history-icon { color: #e0a93a; }
.historik-more {
    display: block; width: 100%; margin-top: 8px;
    font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--cream-mute);
    background: var(--ink-3); border: 1px solid var(--rule-2); border-radius: 8px; padding: 10px; cursor: pointer; transition: all 0.12s;
}
.historik-more:hover { color: var(--cream); border-color: var(--accent); background: rgba(217,72,44,0.06); }

/* =============================================================================
   Problemer-fane (maskine-problem-log)
   ============================================================================= */
.card-problems-list { font-size: 13px; }
.cp-empty { color: var(--cream-mute); padding: 12px 2px; }
.cp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cp-item { border: 1px solid var(--rule-2); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,0.02); }
.cp-item.cp-ongoing { border-left: 3px solid var(--accent, #d9482c); }
.cp-item.cp-solved { border-left: 3px solid #3fae6a; opacity: 0.82; }
.cp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cp-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cp-ongoing .cp-status { color: #e0915a; }
.cp-solved .cp-status { color: #7fd99a; }
.cp-meta { font-size: 11px; color: var(--cream-mute); }
.cp-text { color: var(--cream); line-height: 1.35; margin-bottom: 4px; }
.cp-ctx { font-size: 11.5px; color: var(--cream-mute); }
.cp-interventions { margin-top: 6px; border-top: 1px dashed var(--rule-2); padding-top: 6px; }
.cp-intervention { font-size: 12px; color: var(--cream-dim, #c8c2b4); padding: 2px 0; }
.cp-actions { display: flex; gap: 8px; margin-top: 8px; }
.cp-actions button { background: rgba(255,255,255,0.06); border: 1px solid var(--rule-2); color: var(--cream); border-radius: 7px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.cp-actions button:hover { background: rgba(255,255,255,0.12); }
.cp-form { border-top: 1px solid var(--rule-2); padding-top: 12px; }
.cp-form textarea { width: 100%; box-sizing: border-box; background: var(--ink-3, #15130f); border: 1px solid var(--rule-2); border-radius: 8px; padding: 8px 10px; color: var(--cream); font-family: inherit; font-size: 13px; resize: vertical; outline: none; }
.cp-form-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.cp-form-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cream); cursor: pointer; }
.cp-submit { margin-left: auto; background: var(--accent, #d9482c); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cp-submit:hover { filter: brightness(1.08); }
/* Bro → produktions-problem (Evaluering) */
.cp-bridge { margin: 12px 0; padding: 10px 12px; background: var(--ink-3, #15130f); border: 1px solid var(--rule-2); border-radius: 8px; }
.cp-bridge-note { font-size: 12px; color: var(--cream-mute); line-height: 1.45; margin-bottom: 8px; }
.cp-bridge-note strong { color: var(--cream); font-weight: 600; }
.cp-bridge-btn { background: transparent; color: var(--accent, #d9482c); border: 1px solid var(--accent, #d9482c); border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cp-bridge-btn:hover { background: color-mix(in srgb, var(--accent, #d9482c) 14%, transparent); }
.cp-bridge-off { font-size: 12px; color: var(--cream-mute); font-style: italic; }
/* Produktions-problemer (Evaluering) koblet til denne maskine */
.cp-prodissues { margin: 12px 0; border-top: 1px solid var(--rule-2); padding-top: 10px; }
.cp-prodissues-head { font-size: 12px; font-weight: 700; color: var(--accent, #d9482c); margin-bottom: 8px; }
.cp-prodissue { background: var(--ink-3, #15130f); border: 1px solid var(--rule-2); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.cp-prodissue-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 3px; }
.cp-prodissue-prod { font-weight: 600; color: var(--cream); }
.cp-prodissue-stat { color: var(--cream-mute); white-space: nowrap; }
.cp-prodissue-text { font-size: 13px; color: var(--cream-dim, #cdc6b6); line-height: 1.4; }

/* ── Sted-historik på problemer (samme bord-klynge / plads / rum) ─────────────────── */
.cp-locations { margin: 10px 0 4px; }
.cp-loc-box { border: 1px solid var(--rule-2, #3a3a3a); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; background: rgba(255,255,255,.02); }
.cp-loc-box summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; list-style: none; }
.cp-loc-box summary::-webkit-details-marker { display: none; }
.cp-loc-box summary::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform .15s; }
.cp-loc-box[open] summary::before { transform: rotate(90deg); }
.cp-loc-row { font-size: 12.5px; padding: 6px 4px; border-top: 1px solid var(--rule-2, #3a3a3a); cursor: pointer; line-height: 1.4; }
.cp-loc-row:hover { background: rgba(255,255,255,.05); }
.cp-loc-row .cp-meta { opacity: .7; }