/* ── Design tokens — single source of truth for all users ────────────── */
:root {
    --topbar-h: 56px;

    /* Surfaces — bg = page canvas, surface = card/element */
    --bg: #F4F2EE;
    --surface: #FFFFFF;
    --surface-2: #FAF9F6;
    --surface-3: #F0EEEA;

    /* Borders */
    --border: #E5E2DC;
    --border-strong: #D6D2CB;

    /* Text */
    --text: #1A1815;
    --text-2: #5A554D;
    --text-3: #8A847B;
    --text-disabled: #B5AFA5;

    /* Radius */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;

    /* Shadows */
    --shadow-sm: 0 1px 0 rgba(20, 17, 12, .04), 0 1px 2px rgba(20, 17, 12, .04);
    --shadow-md: 0 4px 12px rgba(20, 17, 12, .06), 0 1px 3px rgba(20, 17, 12, .04);

    /* State */
    --danger: oklch(0.55 0.18 25);
    --danger-soft: oklch(0.95 0.04 25);
    --success: oklch(0.55 0.13 150);
    --warning: oklch(0.70 0.15 65);
    --warning-soft: oklch(0.96 0.04 65);
    --warning-text: oklch(0.50 0.15 65);

    /* Accent — default blue; overridden by html[data-accent] in main.css */
    --accent: oklch(0.58 0.13 250);
    --accent-hover: oklch(0.52 0.13 250);
    --accent-soft: oklch(0.95 0.04 250);
    --accent-text: oklch(0.42 0.13 250);

    --taskbar-row-size: 220px;
}

html[data-theme="dark"] {
    --bg: #0D1014;
    --surface: #15191F;
    --surface-2: #1A1F26;
    --surface-3: #232931;

    --border: #2A313B;
    --border-strong: #3A4250;

    --text: #ECEAE5;
    --text-2: #A8A49B;
    --text-3: #6E6A60;
    --text-disabled: #4A463F;

    --shadow-sm: 0 1px 0 rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);

    --danger: oklch(0.70 0.16 25);
    --danger-soft: oklch(0.28 0.08 25);
    --success: oklch(0.72 0.13 150);
    --warning: oklch(0.78 0.14 65);
    --warning-soft: oklch(0.28 0.08 65);
    --warning-text: oklch(0.88 0.12 65);

    --accent: oklch(0.72 0.13 250);
    --accent-hover: oklch(0.78 0.13 250);
    --accent-soft: oklch(0.28 0.08 250);
    --accent-text: oklch(0.82 0.12 250);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--text);
    font-size: 13.5px;
    -webkit-font-smoothing: antialiased;
}

.topbar .breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    margin-bottom: 0px;
}

.topbar .breadcrumb .crumb {
    color: var(--text-3);
    text-decoration: underline dotted var(--accent);
    text-underline-offset: var(--m1);
}

.topbar .breadcrumb a.crumb:hover {
    color: var(--text);
    text-decoration: underline;
}

.topbar .breadcrumb .sep {
    color: var(--text-3);
    opacity: 0.6;
}

.topbar .breadcrumb .crumb-current {
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar .tb-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Theme toggle */
.topbar .tb-theme {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2px;
    gap: 2px;
}

.topbar .tb-theme button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--text-3);
    font-size: 13px;
    cursor: pointer;
    transition: all 120ms;
    font-family: inherit;
    line-height: 1;
}

.topbar .tb-theme button:hover {
    color: var(--text);
}

.topbar .tb-theme button[data-active="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* Settings dialog (theme + accent picker, opened via the palette button). */
.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 12, 0.40);
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    animation: fade-in 120ms ease-out;
}

.settings-overlay[hidden] {
    display: none;
}

.settings {
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 24px 48px rgba(20, 17, 12, 0.18), 0 4px 12px rgba(20, 17, 12, 0.08);
    overflow: hidden;
}

.settings-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.settings-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-title i {
    color: var(--text-3);
}

.settings-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.settings-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: all 120ms;
}

.opt:hover {
    color: var(--text);
    border-color: var(--text-3);
}

.opt[data-active="true"] {
    border-color: var(--accent);
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

.opt i {
    color: var(--text-3);
    width: 14px;
    text-align: center;
}

.opt[data-active="true"] i {
    color: var(--accent-text);
}

.opt-swatch .sw {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex: 0 0 14px;
}

.opt-swatch[data-accent-set] .sw {
    background: var(--accent);
}

.opt-swatch[data-accent-set][data-theme="dark"] .sw {
    background: var(--accent);
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* User chip */
.topbar .tb-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    color: var(--text);
}

.topbar .tb-user .tb-user-name {
    font-weight: 500;
    font-family: 'IBM Plex Mono', 'Source Code Pro', ui-monospace, monospace;
    font-size: 12.5px;
}

.topbar .tb-user .tb-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Icon button (logout) */
.topbar .tb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-2);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 120ms;
}

.topbar .tb-icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* The topbar lives at the top of #content, so its width follows the
   content column. For classic (non-SEIDOS) users, body.m-5 leaves 3rem
   of whitespace above #main — that's the existing app rhythm and we keep
   it. For SEIDOS users, body has margin: 0, so the bar is flush at top
   and visually aligns with the sidebar brand block (same 56px height). */

/* Layout fix: Bootstrap's .row defaults to flex-wrap: wrap, which made
   the #content column drop below the sidebar once the task bar's
   intrinsic min-width exceeded what was available (~1429px). Force the
   sidebar+content row to stay side-by-side and let #content shrink. */
#main {
    flex-wrap: nowrap !important;
}

#main>#content {
    min-width: 0;
}

/* Let the task bar itself wrap onto a second line when truly cramped,
   instead of forcing horizontal overflow. */
.task-bar {
    flex-wrap: wrap;
}


/* ─────────────────── Task selector bar (below topbar) ─────────────────── */

.task-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--text);
    position: sticky;
    top: var(--topbar-h);
    z-index: 49;
}

.task-bar .tb-task-pickers {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 80%
}

.tb-picker-col,
.selection-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    padding: var(--p2);
    min-width: var(--taskbar-row-size);
    flex: 1 1 var(--taskbar-row-size);
    box-sizing: border-box;
}

.task-bar .tb-picker-row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-right: 1px solid var(--border);
    flex: 1 1 auto;
}

.tb-task-eyebrow {
    flex: none;
    width: auto;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* Header row: eyebrow label + action buttons */
.task-bar .tb-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.task-bar .tb-picker-actions {
    display: flex;
    flex-shrink: 0;
}

.task-bar .tb-picker-actions .tb-picker-btn:first-of-type {
    border-right: 1px solid var(--accent-border);
}


.task-bar .tb-picker-btn:hover {
    filter: brightness(1.12);
}

/* Combobox wrapper fills full column width */
.task-bar .tb-picker-col .combobox,
.combobox {
    display: flex;
    width: 100%;
    height: 26px;
    box-sizing: border-box;
}

/* Borderless combobox trigger inside picker columns */
.task-bar .tb-picker-col .combobox-trigger,
.combobox-trigger {
    background: transparent;
    border-color: transparent;
    height: 26px;
    padding: 0 4px 0 0;
    font-size: 14px;
    font-weight: 500;
}

.task-bar .tb-picker-col .combobox-trigger:hover,
.task-bar .tb-picker-col .combobox-trigger:focus-visible,
.combobox-trigger:hover,
.combobox-trigger:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    outline: none;
}



.task-bar .tb-task-pickers .path-sep {
    color: var(--text-3);
    font-size: 14px;
    margin: 0 2px;
    user-select: none;
}


.task-bar .tb-task-entry {}

.task-bar .tb-task-note {
    flex: 1;
    align-self: center;
    height: 32px;
    background: transparent;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0 16px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 120ms, background 120ms;
}

.task-bar .tb-task-note::placeholder {
    color: var(--text-3);
}

.task-bar .tb-task-note:hover {
    background: var(--surface-2);
    border-color: var(--border);
}

.task-bar .tb-task-note:focus {
    background: var(--surface-2);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Start button — full-height accent block at the right edge. */
.task-bar .tb-task-start,
.task-bar button.tb-task-start,
.tb-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: var(--p3);
    height: auto;
    background: var(--accent);
    color: var(--surface-3);
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 120ms;
}

.task-bar button.tb-task-start {
    background: var(--accent-complement-text);
}

.task-bar .tb-task-start i {
    font-size: 11px;
    color: #fff;
}

.task-bar .tb-task-start span {
    color: #fff;
}

.task-bar .tb-task-start:hover {
    filter: brightness(1.08);
}

.task-bar .tb-task-start:active {
    filter: brightness(0.96);
}

/* When a work is already running, surface a "Stop" affordance. */
.task-bar .tb-task-start[data-running="true"] {
    background: oklch(0.55 0.18 25);
    border-left-color: oklch(0.45 0.18 25);
}

.task-bar .tb-task-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 30px;
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}

.task-bar .tb-task-mini:hover {
    background: var(--surface-2);
    color: var(--text);
}

/* ─────────────────── Sub-topbar (active works) ─────────────────── */

.sub-bar {
    /* Distinct surface tint + accent left-rail to read as a different zone
     from the topbar/task-bar above. */
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    box-shadow: inset 0 1px 0 rgba(20, 17, 12, 0.04);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--text);
    font-size: 13px;
    top: calc(var(--topbar-h) + 66px);
    z-index: 48;
}

.sub-bar[hidden] {
    display: none;
}

.sub-bar.is-empty .sub-bar-head .sub-bar-title::before {
    animation: none;
    opacity: 0.3;
}

.sub-bar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.sub-bar-head .sub-bar-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Pulsing accent dot before the title — signals "live / running". */
.sub-bar-head .sub-bar-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-soft);
    animation: pulse 1.6s ease-out infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--accent-soft);
    }

    70% {
        box-shadow: 0 0 0 8px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.sub-bar-head .sub-bar-count {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    background: var(--accent-soft);
    color: var(--accent-text);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.sub-bar-head .sub-bar-chev {
    margin-left: auto;
    color: var(--text-3);
    transition: transform 160ms;
    font-size: 11px;
}

.sub-bar[data-collapsed="true"] .sub-bar-chev {
    transform: rotate(-90deg);
}

.sub-bar[data-collapsed="true"] .sub-bar-body {
    display: none;
}

.sub-bar-body {
    padding: 6px 20px 10px;
    max-height: 320px;
    overflow-y: auto;
}

/* ── Running-work table (legacy #wTable rendered by work.js) ────────────
   The JS appends `<b>laufende Arbeiten</b>` and a Bootstrap-classed table.
   We hide the redundant heading (the sub-topbar header already says
   "Aktive Arbeiten") and reset Bootstrap's table chrome to SEIDOS. */

.sub-bar #work-active {
    font-size: 13px;
}

.sub-bar #work-active .text-danger {
    color: oklch(0.55 0.18 25) !important;
    display: block;
    padding: 8px 10px;
    background: oklch(0.95 0.04 25);
    border: 1px solid oklch(0.85 0.06 25);
    border-radius: var(--radius);
    margin-bottom: 8px;
    font-weight: 500;
}

/* Hide the inline heading injected by work.js — sub-topbar header replaces it. */
.sub-bar #work-active>b:first-child {
    display: none;
}

.sub-bar #wTable {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--surface);
    /* Cancel Bootstrap .table-striped / .table-bordered look. */
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-border-color: transparent;
}

.sub-bar #wTable thead th,
.sub-bar #wTable>tbody>tr:first-child>th,
.sub-bar #wTable>tr:first-child>th {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
}

.sub-bar #wTable td {
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent !important;
    vertical-align: middle;
    color: var(--text);
}

.sub-bar #wTable tr:last-child td {
    border-bottom: 0;
}

.sub-bar #wTable tr:hover td {
    background: var(--surface-2) !important;
}

/* Arbeitszeit cell (4th column, generated by work.js) — right-aligned mono. */
.sub-bar #wTable td:nth-child(4) {
    font-family: 'IBM Plex Mono', 'Source Code Pro', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--accent-text);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Beschreibung textarea (5th column). */
.sub-bar #wTable textarea[id^="comment_"] {
    width: 100%;
    min-height: 30px;
    max-height: 96px;
    padding: 6px 10px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
    outline: none;
    transition: border-color 120ms;
}

.sub-bar #wTable textarea[id^="comment_"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.sub-bar #wTable textarea[id^="comment_"]::placeholder {
    color: var(--text-3);
}

/* Action-cell buttons (last column) — bi-* icons rendered by bootstrap-icons.
   Reset Bootstrap .btn chrome and apply SEIDOS icon-button look. */
.sub-bar #wTable td:last-child {
    white-space: nowrap;
    text-align: right;
    width: 1%;
}

.sub-bar #wTable td:last-child .btn,
.sub-bar #wTable td:last-child button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1;
    transition: all 120ms;
    box-shadow: none;
}

.sub-bar #wTable td:last-child .btn:hover,
.sub-bar #wTable td:last-child button:hover {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--text-3) !important;
}

/* Stop button — danger accent. */
.sub-bar #wTable td:last-child #bswork,
.sub-bar #wTable td:last-child .bi-stop-circle {
    color: oklch(0.55 0.18 25);
    border-color: oklch(0.85 0.06 25) !important;
}

.sub-bar #wTable td:last-child #bswork:hover,
.sub-bar #wTable td:last-child .bi-stop-circle:hover {
    color: #fff;
    background: oklch(0.55 0.18 25);
    border-color: oklch(0.55 0.18 25) !important;
}

/* Play / pause — accent on hover. */
.sub-bar #wTable td:last-child .bi-file-play:hover,
.sub-bar #wTable td:last-child .bi-pause-circle:hover {
    color: var(--accent-text);
    border-color: var(--accent) !important;
}

/* Kunde / Projekt / Task cells — first three columns. */
.sub-bar #wTable td:nth-child(1) {
    font-weight: 500;
}

.sub-bar #wTable td:nth-child(2),
.sub-bar #wTable td:nth-child(3) {
    color: var(--text-2);
}

/* ── Session expiry warning chip (shown by topbar.js countdown) ─────────── */

.tb-session-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: var(--warning-soft);
    color: var(--warning-text);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    font-size: 12.5px;
    white-space: nowrap;
}

.tb-session-warning[hidden] {
    display: none;
}

.tb-session-warning i {
    font-size: 12px;
}

#tb-session-extend {
    padding: 2px 8px;
    background: var(--warning);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
}

#tb-session-extend:hover {
    filter: brightness(1.08);
}