/* ============================================================
   Management Tool — Design System
   Flat, dark, single-tone. Borders separate, not shadows/glows.
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* layout */
    --nav-h: 56px;
    --tabbar-h: 60px;
    --timebar-h: 44px;
    --gap: 16px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;

    /* base — dark surface with a subtle elevation step between bg and cards */
    --bg: #0a0b0d;
    --surface: #131519;
    --surface-2: #1a1d23;
    --border: #24272f;
    --border-soft: #1c1f25;

    --text: #edeef1;
    --text-muted: #92959f;
    --text-dim: #5c5f6a;

    /* accent — used only on icons / status / interactive states */
    --accent: #6690ff;
    --accent-strong: #7d9fff;
    --accent-soft: #6690ff1f;
    --accent-on: #06070a;

    --c-blue: #6690ff;
    --c-green: #3ecf8e;
    --c-amber: #e0a93a;
    --c-red: #ef5f62;
    --c-purple: #a374e0;
    --c-grey: #6b6e78;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.24);
    --shadow-md: 0 8px 24px rgba(0,0,0,.32);
    --shadow-pop: 0 12px 32px rgba(0,0,0,.4);

    --ease: cubic-bezier(.2,.7,.3,1);

    --mono: 'JetBrains Mono', monospace;
    --sans: 'Inter', system-ui, sans-serif;
}

[data-theme="light"] {
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --border: #e4e5ea;
    --border-soft: #edeef1;
    --text: #14151a;
    --text-muted: #63656f;
    --text-dim: #9799a2;
    --accent-soft: #6690ff16;
    --accent-on: #ffffff;
    --shadow-sm: 0 1px 2px rgba(20,21,26,.05);
    --shadow-md: 0 8px 24px rgba(20,21,26,.08);
    --shadow-pop: 0 16px 40px rgba(20,21,26,.14);
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
/* Sicherheitsnetz: nichts darf die Seite seitwärts wegschieben — aber auf <body> bewusst
   `clip` und nicht `hidden`. `overflow-x: hidden` rechnet die Querachse auf `auto` hoch
   und macht aus <body> damit einen Scroll-Container; dessen eigener Inhalt passt aber
   immer genau hinein, er scrollt also nie. Die klebende Desktop-Sidebar hängt dadurch an
   einem Scrollport, der stillsteht — und scrollte mit der Seite weg (gemessen: top 12px
   → -1699px). `clip` schneidet genauso ab, erzeugt aber keinen Scroll-Container.
   Auf <html> bleibt `hidden`: dessen Werte werden an das Fenster weitergegeben, und dort
   ist `hidden` die verlässliche Sperre gegen seitliches Scrollen — auch in Engines, die
   `clip` noch nicht kennen. Dort fällt body auf `visible` zurück und <html> trägt das
   Netz allein; die Sidebar klebt trotzdem. */
html { overflow-x: hidden; }
body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent-soft); color: var(--text); }

/* ── Icons (inline SVG via assets/icons/sprite.svg#ti-<name>) ──
   Sized in em so existing font-size-based icon sizing keeps working. */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ── App Shell ───────────────────────────────────────────── */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Sidebar (tablet landscape + desktop) ───────────────────
   Phones and tablets in portrait (<1000px, incl. iPad @768-834px):
   sidebar hidden, bottom tab bar + "Mehr" sheet drive nav — this
   keeps portrait tablets on the roomier mobile layout instead of
   squeezing a 240px rail + full desktop grids into ~700px.
   Tablet landscape/desktop (>=1000px): sidebar replaces the tab bar. ── */
.sidebar { display: none; }

@media (min-width: 1000px) {
    .app-shell { flex-direction: row; }

    .sidebar {
        display: flex;
        flex-direction: column;
        width: 240px;
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        border-right: 1px solid var(--border);
        background: var(--surface);
        padding: 16px 12px;
        gap: 14px;
        overflow-y: auto;
    }
    .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 2px; }
    .sidebar-collapse-btn { margin-left: auto; flex-shrink: 0; }
    .sidebar-collapse-btn .icon { transition: transform .18s var(--ease); }
    html.sidebar-collapsed .sidebar-collapse-btn .icon { transform: rotate(180deg); }
    .sidebar-add-btn { width: 100%; justify-content: center; }
    .topbar-search.sidebar-search-btn {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: 36px;
        cursor: pointer;
        font-family: inherit;
        font-size: 13px;
    }
    .topbar-search.sidebar-search-btn span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
    .sidebar-group-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-dim);
        padding: 14px 8px 4px;
    }
    .sidebar-group-label:first-child { padding-top: 4px; }
    .sidebar-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        font-size: 13.5px;
        font-weight: 500;
        transition: background .12s var(--ease), color .12s var(--ease);
    }
    .sidebar-link .icon { font-size: 17px; width: 18px; text-align: center; }
    .sidebar-link:hover { background: var(--surface-2); color: var(--text); }
    .sidebar-link.active { background: var(--accent-soft); color: var(--accent); }
    .sidebar-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }
    .sidebar-user { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); overflow: hidden; }
    .sidebar-user span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* nav now lives in the sidebar — hide the mobile tab bar + its sheets/topbar-brand */
    .tabbar { display: none; }
    .topbar-brand-mobile { display: none; }
    .main { padding-bottom: 0; }
    .main.main-flush { padding-bottom: 0; }
}

@media (min-width: 1280px) {
    .sidebar { width: 264px; }
    html.sidebar-collapsed .sidebar { width: 240px; }
}

/* ── Collapsed sidebar: icon-only rail ──────────────────────
   Toggled via #sidebarCollapseBtn, persisted in localStorage (rt_sidebar_collapsed) and
   applied as a class on <body> (not .sidebar directly — the sidebar element doesn't exist
   yet when the pre-paint script runs) to avoid a layout flash on load. ── */
html.sidebar-collapsed .sidebar {
    width: 64px;
    padding-left: 8px;
    padding-right: 8px;
}
/* The 48px content width left in the collapsed rail can't fit the logo (30px) and the
   collapse-toggle (36px) side by side with any gap — they were overflowing/overlapping the
   edge. Stack them instead of forcing them into one row. */
html.sidebar-collapsed .sidebar-brand { flex-direction: column; justify-content: center; gap: 6px; }
html.sidebar-collapsed .topbar-brand-text,
html.sidebar-collapsed .sidebar-add-btn span,
html.sidebar-collapsed .sidebar-search-btn span,
html.sidebar-collapsed .sidebar-link span,
html.sidebar-collapsed .sidebar-group-label,
html.sidebar-collapsed .sidebar-user span {
    display: none;
}
html.sidebar-collapsed .sidebar-collapse-btn { margin-left: 0; }
html.sidebar-collapsed .sidebar-add-btn,
html.sidebar-collapsed .sidebar-search-btn {
    width: 40px;
    padding: 0;
    justify-content: center;
    align-self: center;
}
html.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: 9px;
}
html.sidebar-collapsed .sidebar-foot { flex-direction: column; gap: 10px; }
html.sidebar-collapsed .sidebar-user { justify-content: center; }
/* At 64px wide, the default 10px scrollbar (~15% of the rail) crowds the icons and looks broken —
   hide it in the collapsed icon-only rail specifically; still scrollable by wheel/touch. */
html.sidebar-collapsed .sidebar-nav { scrollbar-width: none; -ms-overflow-style: none; }
html.sidebar-collapsed .sidebar-nav::-webkit-scrollbar { display: none; }
/* transition the width itself only when toggled by the user, not on initial page load
   (where the class is already applied pre-paint and no animation should play) */
.sidebar.collapse-transition { transition: width .18s var(--ease); }

/* ── Main content area ───────────────────────────────────── */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
.main.main-flush { padding-bottom: 0; }

.topbar {
    height: var(--nav-h);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--gap);
    padding-top: env(safe-area-inset-top);
    height: calc(var(--nav-h) + env(safe-area-inset-top));
    gap: var(--gap);
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 30;
}
.topbar-brand-text { font-weight: 600; font-size: 14.5px; white-space: nowrap; letter-spacing: -.01em; }
.logo-mark {
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(155deg, var(--accent), #4066e0);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

/* ── Bottom Tab Bar (everywhere — desktop + mobile) ─────── */
.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    z-index: 100;
    touch-action: none;
}
.tabbar-swipe-handle {
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 999px;
    background: var(--border);
    pointer-events: none;
    z-index: 1;
}
.tab-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-width: 44px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.tab-link .icon { font-size: 22px; transition: transform .15s var(--ease); }
.tab-link span { font-size: 10.5px; font-weight: 500; }
.tab-link.active { color: var(--accent); }
.tab-link.active .icon { transform: translateY(-1px); }
.tab-link:hover { color: var(--text); }
.tab-link.active:hover { color: var(--accent); }
.tab-link:active { opacity: .6; }

/* the centered scan+add pill */
.tab-pill-slot {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}
.tab-pill {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 52px;
    margin-top: -22px;
    border-radius: 999px;
    background: linear-gradient(155deg, var(--accent-strong), var(--accent));
    border: 4px solid var(--bg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.tab-pill-half {
    width: 52px; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-on);
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s var(--ease);
}
.tab-pill-half:active { opacity: .7; }
.tab-pill-half:hover { background: rgba(255,255,255,.12); }
.tab-pill-half.active { background: var(--c-green); }

@media (min-width: 640px) {
    .tabbar { max-width: 480px; left: 50%; transform: translateX(-50%); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; bottom: 0; }
}

/* ── "Mehr" sheet ────────────────────────────────────────── */
.sheet-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(2px);
    z-index: 199;
    animation: fadeIn .18s var(--ease);
}
.sheet-overlay.open { display: block; }
.sheet {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 75vh;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-pop);
    z-index: 200;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    animation: slideUp .2s var(--ease);
}
.sheet.open { display: block; }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 640px) {
    /* margin-auto centering (not transform:translateX) so it doesn't fight the slideUp animation's own transform */
    .sheet { max-width: 560px; margin: 0 auto; }
}
.sheet-handle {
    width: 36px; height: 4px;
    background: var(--border);
    border-radius: 999px;
    margin: 10px auto 4px;
}
.sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px 14px;
}
.sheet-head strong { font-size: 15px; }
.sheet-body { padding: 0 16px 8px; }
.sheet-group-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-dim);
    padding: 14px 2px 8px;
}
.sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-align: center;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.sheet-item:hover { background: var(--surface-2); color: var(--text); }
.sheet-item.active { color: var(--accent); background: var(--accent-soft); }
.sheet-item .icon { font-size: 22px; }
.sheet-item span { font-size: 11.5px; font-weight: 500; }
.topbar-search {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: border-color .15s var(--ease);
}
.topbar-search:focus-within { border-color: var(--accent); }
.topbar-search input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text);
    font-size: 13.5px;
    outline: none;
}
@media (max-width: 480px) {
    .topbar-brand-text { display: none; }
    .topbar-search { max-width: none; }
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
    width: 36px; height: 36px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.icon-btn.primary { color: var(--accent); border-color: var(--accent); }

.page-body {
    padding: 20px var(--gap) calc(var(--gap) + 12px);
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 10px;
}
.page-title { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.page-sub { color: var(--text-muted); font-size: 13px; margin-top: 3px; }

/* ── Todos ────────────────────────────────────────────────── */
.todo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    transition: background .12s var(--ease), opacity .15s var(--ease);
}
.todo-row:last-child { border-bottom: none; }
.todo-row:hover { background: var(--surface-2); }
.todo-row.done { opacity: .5; }
.todo-row-main { flex: 1; min-width: 0; }
.todo-row-title { font-size: 13.5px; }
.todo-row.done .todo-row-title { text-decoration: line-through; }
.todo-row-meta { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.todo-due-overdue { border-color: var(--c-red); color: var(--c-red); background: color-mix(in srgb, var(--c-red) 12%, transparent); }
.todo-due-today { border-color: var(--c-amber); color: var(--c-amber); background: color-mix(in srgb, var(--c-amber) 12%, transparent); }

/* ── Stop-timer choice cards (pause vs finish) ───────────── */
.stop-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.stop-choice:hover { border-color: var(--text-dim); }
.stop-choice.primary:hover { border-color: var(--accent); }
.stop-choice-icon {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: var(--border-soft);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.stop-choice.primary .stop-choice-icon { background: var(--accent-soft); color: var(--accent); }
.stop-choice-title { font-size: 14px; font-weight: 600; }
.stop-choice-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* ── Global sticky time tracker ─────────────────────────── */
.g-timer {
    position: sticky;
    top: calc(var(--nav-h) + env(safe-area-inset-top));
    height: var(--timebar-h);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--gap);
    background: var(--surface-2);
    font-family: var(--mono);
    font-size: 13px;
    z-index: 25;
}
.g-timer.idle { font-family: var(--sans); color: var(--text-muted); }
.g-timer-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-green);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-green) 20%, transparent);
    animation: pulse 1.8s ease-in-out infinite;
}
.g-timer-dot.idle { background: var(--text-dim); box-shadow: none; animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.g-timer-task { color: var(--text); display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.g-timer-task strong { font-weight: 700; }
.g-timer-task:hover { color: var(--accent); }
.g-timer-task-idle { font-size: 13px; }
.g-timer-clock { margin-left: auto; color: var(--c-amber); font-weight: 600; letter-spacing: .02em; }
.g-timer-btn { flex-shrink: 0; }
.g-timer.paused .g-timer-dot { background: var(--c-amber); animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-amber) 20%, transparent); }
.g-timer.paused .g-timer-clock { color: var(--text-dim); }
html.timer-idle-hidden .g-timer.idle { display: none; }
@media (max-width: 480px) {
    .g-timer-btn-label { display: none; }
    .g-timer-btn.btn-sm { width: 30px; padding: 0; justify-content: center; }
}

/* ── Focus Mode overlay ──────────────────────────────────── */
.focus-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 800;
    background: radial-gradient(circle at 50% 30%, var(--surface-2), var(--bg) 70%);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.focus-overlay.open { display: flex; animation: fadeIn .18s var(--ease); }
.focus-exit {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    right: 16px;
}
.focus-stage {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.focus-datetime { font-size: 12.5px; color: var(--text-dim); margin-bottom: 14px; font-family: var(--mono); }
.focus-ticket { font-family: var(--mono); color: var(--text-muted); font-size: 14px; letter-spacing: .02em; }
.focus-label { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.focus-clock {
    font-family: var(--mono);
    font-size: clamp(48px, 12vw, 84px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--c-amber);
    margin: 8px 0 22px;
    font-variant-numeric: tabular-nums;
}
.focus-overlay.paused .focus-clock { color: var(--text-dim); }
.focus-controls { display: flex; gap: 10px; margin-bottom: 28px; }
.focus-notes {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: left;
}
.focus-notes label { margin-bottom: 8px; }
.focus-notes textarea { margin-bottom: 10px; }
.focus-notes-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 160px; overflow-y: auto; }
.focus-note-item {
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 8px 10px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    line-height: 1.5;
}
.focus-note-item time { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 3px; }

/* ── Scanner: full-bleed camera stage ───────────────────── */
.scanner-stage {
    position: relative;
    flex: 1;
    background: #000;
    overflow: hidden;
}
.scanner-stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.scanner-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-align: center;
    padding: 24px;
}
.scanner-placeholder .icon { font-size: 38px; margin-bottom: 12px; color: var(--text-dim); }
.scanner-placeholder div { font-size: 13.5px; line-height: 1.5; }

.scanner-reticle {
    position: absolute;
    inset: 16% 12%;
    max-height: 320px;
    border: 2px solid var(--accent);
    border-radius: 14px;
    display: none;
    pointer-events: none;
}

.scanner-overlay-top {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    left: 12px; right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}
.scanner-overlay-btn {
    background: rgba(12,13,16,.55);
    border-color: rgba(255,255,255,.2);
    color: #fff;
    backdrop-filter: blur(6px);
}
.scanner-overlay-btn:hover { border-color: #fff; color: #fff; }
.scanner-overlay-btn.active { background: var(--c-amber); border-color: var(--c-amber); color: #1a1200; }

.scanner-manual {
    position: absolute;
    top: calc(60px + env(safe-area-inset-top));
    left: 12px; right: 12px;
    z-index: 10;
    display: none;
}
.scanner-manual.open { display: block; }
.scanner-manual input {
    background: rgba(12,13,16,.75);
    backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}

.scanner-history-handle {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    z-index: 10;
    background: rgba(12,13,16,.7);
    backdrop-filter: blur(6px);
    border: none;
    border-top: 1px solid rgba(255,255,255,.12);
    color: #fff;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}
.scanner-history-bar {
    width: 36px; height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.35);
}
.scanner-history-sheet {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    max-height: 55%;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .2s ease;
    z-index: 9;
}
.scanner-history-sheet.open { transform: translateY(0); }
.scanner-history-handle.open { display: none; }

/* ── Cards / Tables / generic components ─────────────────── */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.card-pad { padding: 16px; }

.grid {
    display: grid;
    gap: var(--gap);
}
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
}
@media (min-width: 561px) and (max-width: 880px) {
    .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

.stat-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.stat-card:hover { border-color: var(--text-dim); }
.stat-card .stat-label { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.stat-card .stat-value { font-size: 24px; font-weight: 700; margin-top: 4px; font-family: var(--mono); letter-spacing: -.01em; }
.stat-card .stat-icon {
    color: var(--accent);
    font-size: 17px;
    margin-bottom: 10px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
}

/* Tables are usually wider than a phone screen (many columns) — scroll horizontally within
   the card that holds them instead of blowing out the page width and shifting the whole
   layout sideways. :has() is supported by all evergreen browsers this app targets. */
.card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card:has(> table) > table { min-width: 640px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--border-soft);
}
tbody tr:hover { background: var(--surface-2); }
tbody tr { cursor: pointer; transition: background .12s var(--ease); }
tbody tr:last-child td { border-bottom: none; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease), transform .1s var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: scale(.98); }
.btn-primary { background: linear-gradient(155deg, var(--accent-strong), var(--accent)); border-color: var(--accent); color: var(--accent-on); font-weight: 600; box-shadow: var(--shadow-sm); }
.btn-primary:hover { opacity: .92; color: var(--accent-on); border-color: var(--accent-strong); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn-danger:hover { border-color: var(--c-red); color: var(--c-red); }
.buy-mode-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

input, select, textarea {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 9px 11px;
    font-size: 13.5px;
    font-family: inherit;
    width: 100%;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input[type="checkbox"], input[type="radio"] {
    width: 16px;
    height: 16px;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}
label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; display: block; margin-bottom: 6px; }
.field { margin-bottom: 14px; }

/* ── Custom select (progressive enhancement of native <select>) ──
   Trigger mirrors the standard input/select look; panel is portaled to
   <body> so it's never clipped by a modal's overflow:auto, and sized for
   comfortable touch targets on tablet (44px option rows). ── */
.rt-select { position: relative; display: block; width: 100%; }
.rt-select-native {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: -1px;
    pointer-events: none;
}
.rt-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 9px 11px;
    font-size: 13.5px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}
.rt-select-trigger:hover { border-color: var(--text-dim); }
.rt-select-trigger:focus-visible, .rt-select.open .rt-select-trigger { outline: none; border-color: var(--accent); background: var(--surface); }
.rt-select-trigger.invalid { border-color: var(--c-red); }
.rt-select-trigger .icon:last-child { color: var(--text-dim); flex-shrink: 0; transition: transform .15s var(--ease); }
.rt-select.open .rt-select-trigger .icon:last-child { transform: rotate(180deg); }
.rt-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-select-trigger:disabled { opacity: .5; cursor: not-allowed; }

.rt-select-panel {
    position: fixed;
    z-index: 900;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop);
    max-height: min(320px, 60vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popIn .12s var(--ease);
}
.rt-select-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
}
.rt-select-search { height: 34px; padding: 0 10px; font-size: 13px; }
.rt-select-options { overflow-y: auto; padding: 6px; }
.rt-select-option {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    cursor: pointer;
    color: var(--text);
}
.rt-select-option:hover, .rt-select-option.highlighted { background: var(--surface-2); }
.rt-select-option.selected { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
.rt-select-option.disabled { color: var(--text-dim); cursor: not-allowed; }
.rt-select-empty { padding: 16px; text-align: center; color: var(--text-dim); font-size: 12.5px; }

.empty-state {
    text-align: center;
    padding: 56px 20px;
    color: var(--text-muted);
}
.empty-state .icon { font-size: 30px; color: var(--text-dim); margin-bottom: 12px; display: block; }

.payment-summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); }

/* ── Density setting (Einstellungen → Kompakt) ──────────────── */
html.density-compact { --gap: 10px; }
html.density-compact .page-body { padding-top: 12px; }
html.density-compact .card-pad { padding: 11px; }
html.density-compact .stat-card { padding: 11px 13px; }
html.density-compact tbody td { padding: 8px 12px; }
html.density-compact thead th { padding: 7px 12px; }
html.density-compact .btn { height: 32px; }
html.density-compact input, html.density-compact select, html.density-compact textarea { padding: 7px 10px; }

/* ── UI-Größe setting (Einstellungen → Erscheinungsbild) ──────
   The whole stylesheet uses fixed px, not rem, so scaling html font-size alone wouldn't
   cascade to component sizing — `zoom` scales the entire rendered box model (text, padding,
   icons, borders) uniformly instead, same mechanism as a browser's own page-zoom, and unlike
   `transform: scale()` it doesn't break position:fixed/sticky (topbar, tabbar, modals, …). ── */
html.ui-size-sm { zoom: 0.9; }
html.ui-size-lg { zoom: 1.125; }
html.ui-size-xl { zoom: 1.25; }

/* ── Settings page ──────────────────────────────────────────── */
.settings-page-body { max-width: 680px; }
@media (min-width: 1000px) {
    /* extra breathing room once the sidebar is up and there's real desktop width to use */
    .settings-page-body { max-width: 860px; }
}
.settings-jump-nav { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top) + 8px); z-index: 15; background: var(--bg); padding: 6px 0; }
.settings-section { margin-bottom: var(--gap); scroll-margin-top: calc(var(--nav-h) + 56px); }
.settings-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.settings-section-icon {
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.settings-section-head h2 { font-size: 14.5px; font-weight: 700; margin: 0; }
.settings-section-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-size: 13.5px; font-weight: 500; }
.settings-row-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.settings-choice-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.settings-choice {
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border: none;
    border-right: 1px solid var(--border);
    background: var(--surface-2);
}
.settings-choice:last-child { border-right: none; }
.settings-choice:hover { color: var(--text); }
.settings-choice.active { background: var(--accent); color: var(--accent-on); }
.settings-swatches { display: flex; gap: 10px; }
.settings-swatch {
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 13px;
}
.settings-swatch .icon { display: none; }
.settings-swatch.active { border-color: var(--text); }
.settings-swatch.active .icon { display: block; }

.settings-alert {
    margin: 12px 16px 0;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    border: 1px solid;
}
.settings-alert.error { background: color-mix(in srgb, var(--c-red) 10%, transparent); border-color: var(--c-red); color: var(--c-red); }
.settings-alert.success { background: color-mix(in srgb, var(--c-green) 10%, transparent); border-color: var(--c-green); color: var(--c-green); }

.totp-qr-wrap {
    display: flex;
    justify-content: center;
    padding: 16px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.totp-qr { line-height: 0; }
.totp-qr svg { display: block; width: 180px; height: 180px; }
.totp-secret-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: .05em;
    word-break: break-all;
}

/* ── Shared layout utilities ─────────────────────────────────
   Replaces the repeated inline "card-pad + border-bottom" header
   and filter-badge-row patterns that were duplicated per page. ── */
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: 600;
}
.card-head .card-head-action { font-size: 12.5px; font-weight: 500; color: var(--accent); }
.card-head .card-head-action:hover { text-decoration: underline; }

.filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: var(--gap);
    flex-wrap: wrap;
}
.badge-filter { cursor: pointer; transition: border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease); }
.badge-filter:hover { border-color: var(--text-dim); }
.badge-filter.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.list-panel { max-height: 75vh; overflow-y: auto; }
.list-panel-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    transition: background .12s var(--ease);
}
.list-panel-item:hover { background: var(--surface-2); }
.list-panel-item.active { background: var(--accent-soft); }
.list-panel-item .lp-title { font-weight: 500; }
.list-panel-item .lp-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* master-detail split (customers, devices, …): stacks below tablet width */
.split-view { display: grid; grid-template-columns: 300px 1fr; gap: var(--gap); align-items: start; }
@media (max-width: 720px) {
    .split-view { grid-template-columns: 1fr; }
    .list-panel { max-height: 360px; }
}

/* labels.php: list · editor · queue — collapses to a single column on tablet/mobile */
.labels-grid { display: grid; grid-template-columns: 220px 1fr 280px; gap: var(--gap); align-items: start; }
@media (max-width: 1240px) {
    .labels-grid { grid-template-columns: 1fr 1fr; }
    .labels-grid > :first-child { grid-column: 1 / -1; }
    .labels-grid .list-panel { max-height: 240px; }
}
@media (max-width: 700px) {
    .labels-grid { grid-template-columns: 1fr; }
}

.label-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 8px;
}
.label-preview-head > span { font-size: 12px; color: var(--text-muted); }
.label-zoom-bar { display: flex; align-items: center; gap: 6px; }
.label-zoom-bar .icon-btn { height: 30px; width: 30px; }
.label-zoom-bar span { font-family: var(--mono); font-size: 12px; width: 42px; text-align: center; }

.label-preview-stage {
    background: var(--border-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    overflow: auto;
}
.label-preview-card {
    background: #fff;
    color: #111;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
    transform-origin: center;
    transition: transform .1s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.label-preview-qr {
    flex-shrink: 0;
    width: 44px; height: 44px;
    background: repeating-linear-gradient(0deg, #111 0 2px, #fff 2px 4px), repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px);
    background-blend-mode: multiply;
}
.label-preview-title { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-preview-brand { font-size: 9px; color: #555; font-family: monospace; }

.label-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.label-items-sub {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}

.worker-item {
    position: relative;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    transition: background .12s var(--ease);
}
.worker-item:last-child { border-bottom: none; }
.worker-item:hover { background: var(--surface-2); }
.worker-item-main { flex: 1; min-width: 0; }
.worker-item-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.worker-item-code { font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
.worker-item-more {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    width: 26px; height: 26px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.worker-item-more:hover { color: var(--text); background: var(--border-soft); }

.ctx-menu {
    position: fixed;
    z-index: 550;
    width: 200px;
    padding: 6px;
    box-shadow: var(--shadow-pop);
}
.ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.ctx-menu-item:hover { background: var(--surface-2); }
.ctx-menu-item.danger { color: var(--c-red); }
.ctx-menu-item .icon { font-size: 16px; width: 18px; }

/* ── Time log rows with attached focus-session notes ────────── */
.time-log-row { padding: 11px 16px; border-bottom: 1px solid var(--border-soft); }
.time-log-row:last-child { border-bottom: none; }
.time-log-main { display: flex; justify-content: space-between; align-items: flex-start; font-size: 13.5px; }
.time-log-notes { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.time-log-note { font-size: 12px; color: var(--text-muted); display: flex; align-items: flex-start; gap: 5px; }

/* ── Shipments / tracking (repairs_detail.php) ──────────────── */
.shipment-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.shipment-row:last-child { border-bottom: none; }
.shipment-row form { display: flex; align-items: center; flex-shrink: 0; }
.shipment-row-icon {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.shipment-row-icon.inbound { background: color-mix(in srgb, var(--c-purple) 15%, transparent); color: var(--c-purple); }
.shipment-row-main { flex: 1; min-width: 0; }
.shipment-row-title { font-size: 13.5px; font-weight: 500; }
.shipment-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.shipment-status-select {
    width: auto;
    font-size: 12px;
    height: 30px;
    padding: 0 8px;
    border-color: var(--border);
}
.shipment-status-select.status-delivered { border-color: var(--c-green); color: var(--c-green); }
.shipment-status-select.status-shipped { border-color: var(--c-amber); color: var(--c-amber); }

.restock-calc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: 6px;
}
.restock-calc > div { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.restock-calc span { color: var(--text-muted); }
.restock-calc strong { font-family: var(--mono); }

/* low stock highlight */
.qty-low { color: var(--c-red); font-weight: 600; }

/* modal */
.modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    z-index: 850; /* above .focus-overlay (800) so modals (e.g. stop-timer confirm) opened from Focus Mode are reachable */
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn .15s var(--ease);
}
.modal-overlay.open { display: flex; }
.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    animation: popIn .16s var(--ease);
}
@keyframes popIn { from { transform: scale(.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.modal-body { padding: 16px; }
.modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
}

/* toast */
#toast-stack {
    position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 950; /* above modals (850) and Focus Mode (800) so status toasts are never hidden */
}
.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    min-width: 220px;
    box-shadow: var(--shadow-md);
    animation: slideUp .18s var(--ease);
}
.toast.error { border-left-color: var(--c-red); }
.toast.success { border-left-color: var(--c-green); }

/* ============================================================
   v3 — ruhiges, flaches Design (OLED-Schwarz und Hell)
   ============================================================
   Dieser Block steht bewusst am Dateiende. Bei gleicher Spezifität entscheidet nicht die
   Spezifität, sondern die Quellreihenfolge — deshalb überschreibt er die älteren Fassungen
   weiter oben, ohne dass die 1400 Zeilen darüber angefasst werden mussten.

   Zwei Regeln für alles Weitere, damit die Reihenfolge-Falle nicht zurückkommt:
     • Mobil-Anpassungen stehen in @media (max-width: 999px)
     • Desktop-Anpassungen stehen ganz am Schluss in @media (min-width: 1000px)
   Sonst könnte eine Regel aus einem früheren Media-Block wieder die Oberhand gewinnen
   (genau das war der Grund, warum die Tabbar auf dem Desktop sichtbar blieb).
   ============================================================ */

/* ── 1. Farben und Maße ─────────────────────────────────────────────────────────── */
/* Dunkel ist zugleich OLED: echtes Schwarz. Auf OLED-Displays kostet es keinen Strom und die
   Flächen wirken ruhiger als der alte dunkelgraue Schleier. */
:root {
    --nav-h: 56px;
    --tabbar-h: 64px;
    --timebar-h: 48px;

    --radius: 18px;
    --radius-sm: 12px;
    --radius-lg: 26px;

    --bg: #000000;
    --surface: #0e0e10;
    --surface-2: #18181b;
    --border: #232327;
    --border-soft: #17171a;

    --accent: #5b8dff;
    --accent-strong: #5b8dff;
    --accent-soft: #5b8dff1c;
    --accent-on: #06070a;

    --shadow-sm: none;
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .55);
    --shadow-pop: 0 16px 44px rgba(0, 0, 0, .62);

    --bg-elev: var(--surface); /* settings.php benutzt diese Variable — sie war nie definiert */
}

[data-theme="light"] {
    --bg: #f1f1f4;
    --surface: #ffffff;
    --surface-2: #f5f5f8;
    --border: #e6e6ec;
    --border-soft: #eeeef3;

    --accent-soft: #5b8dff1c;
    --accent-on: #ffffff;

    --shadow-sm: 0 1px 2px rgba(20, 20, 30, .04);
    --shadow-md: 0 8px 28px rgba(20, 20, 30, .08);
    --shadow-pop: 0 16px 40px rgba(20, 20, 30, .14);
}

/* Karten sind im Hellen randlos und tragen nur einen Hauch Schatten — im Dunklen umgekehrt:
   eine Haarlinie, kein Schatten. */
[data-theme="light"] .card,
[data-theme="light"] .stat-card,
[data-theme="light"] .sheet,
[data-theme="light"] .modal,
[data-theme="light"] .g-timer {
    border-color: transparent;
}

/* ── 2. Nichts glänzt: Weichzeichner, Verläufe und Leuchten entfernen ───────────── */
.topbar,
.tabbar,
.sheet-overlay,
.modal-overlay,
.scanner-overlay-btn,
.scanner-manual input,
.scanner-history-handle {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.topbar,
.tabbar { background: var(--surface); }

.sheet-overlay { background: rgba(0, 0, 0, .55); }
.modal-overlay { background: rgba(0, 0, 0, .6); }

.logo-mark { background: var(--accent); color: var(--accent-on); box-shadow: none; }
.btn-primary { background: var(--accent); box-shadow: none; }
.focus-overlay { background: var(--bg); }

.g-timer-dot,
.g-timer.paused .g-timer-dot,
.badge .dot { box-shadow: none; }

/* ── 3. Flächen: Karten, Felder, Marken, Knöpfe ─────────────────────────────────── */
.card,
.stat-card {
    border-radius: var(--radius);
    box-shadow: none;
}
.card-pad { padding: 18px; }

.stat-card .stat-icon,
.settings-section-icon {
    background: var(--surface-2);
    color: var(--accent);
    border-radius: var(--radius-sm);
}

/* Die allgemeine .btn-Regel setzt Hintergrund und Kontur und ist im Hell-Modus stärker
   gewichtet als eine einzelne Klasse — dort sähe ein Primärknopf sonst weiß und leer aus.
   Deshalb hier ausdrücklich zwei Klassen bzw. Klasse + Theme-Attribut. */
.btn.btn-primary,
[data-theme="light"] .btn.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-on);
    box-shadow: none;
}
/* Es gibt genau einen Akzentton — die Rückmeldung beim Zeigen kommt deshalb nicht von
   einer zweiten Farbe, sondern von der Deckkraft. */
.btn.btn-primary:hover,
[data-theme="light"] .btn.btn-primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-on);
    opacity: .86;
}
.btn.btn-danger-solid,
[data-theme="light"] .btn.btn-danger-solid {
    background: var(--c-red);
    border-color: var(--c-red);
    color: #fff;
}
.btn.btn-danger-solid:hover { opacity: .92; color: #fff; border-color: var(--c-red); }

.btn { border-radius: var(--radius-sm); }
.btn:active { transform: scale(.985); }

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

input,
select,
textarea {
    border: 1px solid transparent;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}
input:focus,
select:focus,
textarea:focus {
    background: var(--surface-2);
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Suchfeld: kein doppelter Rahmen mehr — das Feld selbst ist rahmenlos, der Fokusring liegt
   außen um das ganze Feld. */
.topbar-search { border-color: transparent; background: var(--surface-2); }
.topbar-search:focus-within { border-color: transparent; box-shadow: 0 0 0 3px var(--accent-soft); }
.topbar-search input,
.topbar-search input:focus { box-shadow: none; background: none; border: none; }

.badge-filter.active {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}

/* ── 4. Toast: farbiger Punkt statt Balken ──────────────────────────────────────── */
.toast { border-left: none; border-radius: var(--radius-sm); }
.toast::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 9px;
    background: var(--accent);
    vertical-align: middle;
}
.toast.error::before { background: var(--c-red); }
.toast.success::before { background: var(--c-green); }

/* ── 5. Tabellen als Karten auf dem Handy ────────────────────────────────────────
   Die Zuordnung kommt aus data-label, das app.js aus den thead-Zellen stempelt (siehe
   stampTableLabels in assets/js/app.js) — so muss keine der PHP-Seiten angefasst werden. */
@media (max-width: 720px) {
    .card:has(> table) { overflow: visible; }
    .card:has(> table) > table { min-width: 0; }

    table.rt-cards,
    table.rt-cards tbody,
    table.rt-cards tr,
    table.rt-cards td { display: block; width: 100%; }

    table.rt-cards thead { display: none; }

    table.rt-cards tbody tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        padding: 4px 14px;
        margin-bottom: 10px;
    }
    [data-theme="light"] table.rt-cards tbody tr {
        border-color: transparent;
        box-shadow: var(--shadow-sm);
    }
    table.rt-cards tbody tr:hover { background: var(--surface-2); }
    table.rt-cards tbody tr:last-child { margin-bottom: 0; }

    table.rt-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 0;
        border-bottom: 1px solid var(--border-soft);
        text-align: right;
    }
    table.rt-cards td:last-child { border-bottom: none; }

    table.rt-cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 500;
        text-align: left;
    }
    /* Zellen ohne Beschriftung (Fortschritt, Aktionen, Sammelspalte) stehen allein rechts. */
    table.rt-cards td:not([data-label])::before,
    table.rt-cards td[data-label=""]::before { display: none; }
    table.rt-cards td:not([data-label]),
    table.rt-cards td[data-label=""] { justify-content: flex-end; }
}

/* ── 6. Raster: nie breiter als ihr Platz ────────────────────────────────────────
   minmax(0, 1fr) statt 1fr — sonst erzwingt eine lange Zeile (Ticketnummer, E-Mail)
   eine Mindestbreite und schiebt das ganze Raster über den Rand.

   Achtung: die Aufteilungen werden hier mit denselben Umbruchpunkten neu gesetzt, damit
   die früheren Media-Blöcke weiterhin greifen. */
@media (max-width: 560px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 561px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 881px) {
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.grid > *,
.split-view > *,
.labels-grid > *,
.card,
.stat-card,
.sheet-item,
.list-panel-item { min-width: 0; }

@media (max-width: 720px)         { .split-view  { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 721px)         { .split-view  { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
@media (max-width: 700px)         { .labels-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 701px) and (max-width: 1240px) {
    .labels-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1241px) {
    .labels-grid { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 280px); }
}

/* ── 7. Seite scrollt nicht mit, solange ein Blatt offen ist ───────────────────── */
/* Die Leiste bleibt reserviert, damit die Seite beim Sperren nicht zur Seite springt. */
html { scrollbar-gutter: stable; }
html.scroll-locked,
html.scroll-locked body { overflow: hidden; }

/* Tastatur offen (visualViewport schrumpft): die untere Leiste hat dann keinen Platz mehr. */
html.kb-open .tabbar { display: none; }
html.kb-open .main { padding-bottom: 16px; }

/* ── 8. Untere Leiste und der „+"-Knopf (nur mobil) ─────────────────────────────── */
@media (max-width: 999px) {
    .tabbar {
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        height: var(--tabbar-h);
        padding-bottom: 0;
        max-width: 520px;
        margin: 0 auto;
        transform: none;      /* die alte ≥640px-Regel zentrierte per translateX — das kippt die Insel */
        border: 1px solid var(--border);
        border-radius: 28px;
        background: var(--surface);
        box-shadow: var(--shadow-md);
    }
    .tabbar-swipe-handle { background: var(--border); }

    .tab-link .icon { font-size: 21px; }
    .tab-link:active { opacity: 1; transform: scale(.94); }

    .tab-fab {
        flex: 0 0 auto;
        width: 48px;
        height: 48px;
        margin: 0 4px;
        border: none;
        border-radius: 17px;
        background: var(--accent);
        color: var(--accent-on);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .22s var(--ease), background .15s var(--ease);
    }
    .tab-fab:active { transform: scale(.93); }
    /* Offen wird aus dem „+" ein „×" — eine Drehung, keine zweite Grafik. */
    html.add-open .tab-fab { transform: rotate(45deg); }
    html.add-open .tab-fab:active { transform: rotate(45deg) scale(.93); }

    .main { padding-bottom: calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom)); }
    .main.main-flush { padding-bottom: 0; }
}

/* ── 9. Zeitleiste als schwebende Pille ────────────────────────────────────────── */
.g-timer {
    margin: 8px 12px 0;
    padding: 0 14px;
    height: var(--timebar-h);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    top: calc(var(--nav-h) + env(safe-area-inset-top) + 6px);
}

/* ── 10. Blätter und Dialoge schweben (mobil) ──────────────────────────────────── */
@media (max-width: 999px) {
    .sheet {
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        max-height: 88vh;
        padding-bottom: 8px;
        border: 1px solid var(--border);
        border-radius: 28px;
        box-shadow: var(--shadow-pop);
    }
    .sheet-handle {
        width: 40px;
        height: 4px;
        margin: 10px auto 6px;
        background: var(--border);
        cursor: grab;
        touch-action: none;
    }
    .sheet-handle:active { cursor: grabbing; }

    /* Dialoge werden auf dem Handy zu Blättern von unten. */
    .modal-overlay { align-items: flex-end; padding: 8px; }
    .modal { border-radius: 28px; max-height: 88vh; }
    .modal::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: 10px auto 0;
        border-radius: 999px;
        background: var(--border);
    }
}

/* ── 11. Scanner: Bedienknöpfe und Verlauf im selben Stil ──────────────────────── */
.scanner-overlay-btn {
    background: rgba(18, 18, 20, .78);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}
.scanner-overlay-btn:hover { background: rgba(18, 18, 20, .92); color: #fff; border-color: #fff; }
.scanner-manual input {
    background: rgba(18, 18, 20, .88);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}

/* Griff und Blatt liegen beide auf derselben Kante über der schwebenden Leiste — vorher war
   der Griff zusätzlich versetzt, dadurch „sprang" das Blatt beim Öffnen. */
.scanner-history-handle {
    left: 12px;
    right: 12px;
    bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom));
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text);
}
.scanner-history-bar { background: var(--border); }
.scanner-history-sheet {
    left: 8px;
    right: 8px;
    bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom));
    max-height: 60%;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
}
.scanner-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
.scanner-history-title { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }

.scan-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
}
.scan-result-main { min-width: 0; flex: 1; }
.scan-result-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scan-result-title.mono { font-family: var(--mono); }
.scan-result-sub {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 12. Weiche Übergänge und Navigation ohne Weißblitz ────────────────────────── */
@view-transition { navigation: auto; }
@keyframes rt-vt-in { from { opacity: 0; } }
@keyframes rt-vt-out { to { opacity: 0; } }
::view-transition-old(root) { animation: rt-vt-out .14s var(--ease) both; }
::view-transition-new(root) { animation: rt-vt-in .18s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}

.modal { animation: rt-pop .18s var(--ease); }
@keyframes rt-pop { from { transform: translateY(8px) scale(.99); opacity: 0; } }
.sheet { animation: rt-up .22s var(--ease); }
@keyframes rt-up { from { transform: translateY(18px); opacity: 0; } }

/* ── 13. Desktop: Sidebar als schwebende Karte, Leiste und Kopfzeile weg ─────────
   Ganz am Schluss, und wo nötig mit !important: Die Basis-Regeln weiter oben setzen
   display:flex für Leiste und Kopfzeile, und eine gleich starke Regel ohne !important
   könnte je nach Reihenfolge verlieren. Genau daran hing die sichtbare Tabbar am Desktop. */
@media (min-width: 1000px) {
    .tabbar { display: none !important; }
    .topbar { display: none !important; }
    .main,
    .main.main-flush { padding-bottom: 0 !important; }

    .g-timer {
        margin: 12px 16px 0;
        top: 8px;
    }

    .sidebar {
        margin: 12px 0 12px 12px;
        height: calc(100dvh - 24px);
        top: 12px;
        border: 1px solid var(--border);
        border-radius: 26px;
        padding: 16px 12px;
    }
    html.sidebar-collapsed .sidebar { width: 72px; }

    /* Aktiver Eintrag als graue Pille — kein farbiger Balken, nur das Symbol trägt den Akzent. */
    .sidebar-link.active { background: var(--surface-2); color: var(--text); }
    .sidebar-link.active .icon { color: var(--accent); }

    .settings-jump-nav { top: 12px; }
}

/* ═══ 14. Breite und Raster auf großen Schirmen (2026-10-12) ══════════════════════════
   Der Inhalt war bei 1200px gedeckelt: auf einem 1920er Schirm blieben rechts 227px leer,
   auf den Einstellungen (die ihre eigenen 860px mitbrachten) sogar 397px. Hier wächst der
   Inhalt in Stufen mit, damit Tabellen und Raster den Platz bekommen — Formulare bleiben
   durch ihre eigenen Raster schmal. Alles wieder am Dateiende, aus demselben Grund wie
   Block 13: bei gleicher Spezifität entscheidet die Quellreihenfolge. */

@media (min-width: 1400px) {
    .page-body { max-width: 1340px; }
}

@media (min-width: 1700px) {
    .page-body { max-width: 1560px; }
}

/* ── Einstellungen: Abschnittsleiste als linke Schiene ───────────────────────────────
   Vorher eine Chip-Zeile über allem, der Inhalt auf 860px begrenzt. Jetzt: Schiene links
   (wie die Haupt-Sidebar), Abschnitte rechts daneben. Die Abschnitte bleiben eine Spalte —
   die Zeilen sind „Beschriftung links, Steuerung rechts" und werden unlesbar, wenn sie
   über 1200px laufen.

   Die Schiene nimmt den Abschnitten Breite weg, deshalb greift sie erst ab 1200px
   Fensterbreite: darunter bliebe den Zeilen weniger als die alten 860px (gemessen bei
   1280px: 698px statt 860px) — dann bleibt es beim Chip-Streifen. Darunter, bis 1000px
   hinab, liegt der Inhalt ohnehin schon unter 860px, dort ändert sich also nichts.

   `.settings-sections` ist nur ein Behälter für die Rasterspalte — sie bleibt ein normaler
   Block, die Abschnitte behalten ihre eigenen Abstände, kein zusätzlicher gap. */
@media (min-width: 1200px) {
    .page-body.settings-page-body {
        display: grid;
        grid-template-columns: 208px minmax(0, 1fr);
        gap: 0 24px;
        align-items: start;
        max-width: 1260px;
    }
    .page-body.settings-page-body > .page-head { grid-column: 1 / -1; grid-row: 1; }
    .page-body.settings-page-body > .settings-sections {
        grid-column: 2; grid-row: 2;
        min-width: 0;
    }

    .page-body.settings-page-body .settings-jump-nav {
        grid-column: 1; grid-row: 2;
        position: sticky;
        top: 68px;                 /* unter der schwebenden Timer-Pille, nicht darunter */
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        margin: 0;
        padding: 6px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    .page-body.settings-page-body .settings-jump-nav .badge-filter {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 9px 10px;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        background: none;
        color: var(--text-muted);
        font-size: 13px;
        text-align: left;
    }
    .page-body.settings-page-body .settings-jump-nav .badge-filter:hover {
        background: var(--surface-2);
        border-color: transparent;
        color: var(--text);
    }
    /* Die gewählte Schaltfläche wird zur grauen Pille wie in der Haupt-Sidebar. Die
       Umkehrung von `.badge-filter.active` gilt weiter für die Filterlisten (Repairs …). */
    .page-body.settings-page-body .settings-jump-nav .badge-filter.active {
        background: var(--surface-2);
        border-color: transparent;
        color: var(--text);
    }
    .page-body.settings-page-body .settings-jump-nav .badge-filter.active .icon { color: var(--accent); }
}

@media (min-width: 1400px) {
    /* Ab hier ist Platz für eine breitere Schiene und mehr Luft daneben. */
    .page-body.settings-page-body {
        grid-template-columns: 236px minmax(0, 1fr);
        gap: 0 28px;
    }
}

/* ── Detailseiten: Zahlung und Notizen in eine eigene rechte Spalte ──────────────────
   In `repairs_detail.php` liegen drei Kinder im selben Raster: die sehr hohe linke Spalte,
   die Zahlungskarte und die Notizen. Beide rechten Karten landeten dadurch in der ersten
   Zeile bzw. unter der linken Spalte — die Zahlungskarte wurde auf die Höhe der linken
   gezogen (fast leere Karte über 900px, siehe Bild vom 2026-10-12). Mit `.detail-side`
   steht rechts eine eigene Spalte, die sich nach ihrem Inhalt richtet. */
.detail-side {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
@media (min-width: 1000px) {
    .detail-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        align-items: start;
    }
}