@charset "UTF-8";

:root {
    /* ── Editorial / magazine design tokens ────────────────────────────── */
    /* Paper (backgrounds) */
    --paper: #f4f5f7;
    --paper-2: #eceef2;
    --card: #ffffff;

    /* Ink (text + fills) */
    --ink: #17191c;
    --ink-2: #2f3338;
    --ink-3: #646a73;
    --ink-4: #9097a0;

    /* Rules (dividers) */
    --rule: #d9dce1;
    --rule-soft: #e6e8ec;

    /* Accent = editorial ink-blue */
    --accent: oklch(36% 0.09 250);
    --accent-soft: oklch(36% 0.09 250 / 0.08);
    --accent-ink: oklch(24% 0.07 250);

    /* Semantic */
    --good: oklch(48% 0.09 150);
    --warn: oklch(58% 0.12 70);
    --danger: oklch(52% 0.16 28);

    /* ── Legacy aliases (udržuje zpětnou kompatibilitu se stávajícím CSS) ─ */
    --brand: var(--accent);
    --brand-strong: var(--accent-ink);
    --brand-soft: var(--accent-soft);
    --brand-ring: color-mix(in oklch, var(--accent) 28%, transparent);
    --teal: oklch(50% 0.10 180);
    --teal-strong: oklch(40% 0.10 180);
    --teal-soft: oklch(50% 0.10 180 / 0.12);
    --bg: var(--paper);
    --bg-soft: var(--paper-2);
    --panel: var(--card);
    --panel-hover: #fafbfc;
    --ink-muted: var(--ink-3);
    --ink-soft: var(--ink-4);
    --line: var(--rule-soft);
    --line-strong: var(--rule);
    --sidebar-bg: var(--paper-2);
    --sidebar-bg-soft: #e4e7eb;
    --sidebar-ink: var(--ink);
    --sidebar-muted: var(--ink-3);
    --sidebar-hover: rgba(23, 25, 28, 0.05);
    --sidebar-active: var(--ink);
    --sidebar-border: var(--rule);
    --danger-soft: color-mix(in oklch, var(--danger) 10%, transparent);
    --danger-ink: var(--danger);
    --warning: var(--warn);
    --warning-soft: color-mix(in oklch, var(--warn) 12%, transparent);
    --warning-ink: color-mix(in oklch, var(--warn) 60%, var(--ink));
    --ok: var(--good);
    --ok-soft: color-mix(in oklch, var(--good) 12%, transparent);
    --ok-ink: color-mix(in oklch, var(--good) 70%, var(--ink));
    --info: var(--accent);
    --info-soft: var(--accent-soft);
    --info-ink: var(--accent-ink);

    /* Shadows */
    --shadow-xs: 0 1px 0 rgba(23, 25, 28, 0.04);
    --shadow-sm: 0 1px 0 rgba(23, 25, 28, 0.04), 0 4px 12px -8px rgba(23, 25, 28, 0.12);
    --shadow-md: 0 1px 0 rgba(23, 25, 28, 0.04), 0 8px 24px -16px rgba(23, 25, 28, 0.18);
    --shadow-lg: 0 16px 40px -16px rgba(23, 25, 28, 0.22);
    --shadow-xl: 0 24px 64px -20px rgba(28, 26, 23, 0.32);
    --shadow-soft: 0 1px 0 rgba(23, 25, 28, 0.04), 0 8px 24px -16px rgba(23, 25, 28, 0.18);
    --shadow-focus: 0 0 0 3px var(--brand-ring);

    /* Radii — editoriálně ostré hrany */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-pill: 999px;

    /* Fonts — původní Inter stack */
    --f-display: "Inter", "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --f-ui: "Inter", "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* --f-mono je legacy alias — dřív monospace (SF Mono / Menlo), teď stejný Inter jako
       celý zbytek aplikace. Jednotné písmo napříč UI = lepší vizuální soudržnost.
       Pro čísla / časomíry / metadata se používá Inter s font-variant-numeric: tabular-nums
       (čísla mají stejnou šířku, takže timer 00:01:23 zůstává zarovnaný). */
    --f-mono: "Inter", "Inter var", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    color: var(--ink);
    font-family: var(--f-ui);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    min-height: 100svh;
    background: var(--bg);
    font-size: 14px;
    line-height: 1.45;
}

h1, h2, h3, h4 {
    color: var(--ink);
    margin: 0;
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

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

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--brand);
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="url"],
input[type="month"],
input:not([type]),
select,
textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--ink);
    padding: 10px 13px;
    border-radius: var(--radius-md);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--shadow-focus);
}

textarea {
    resize: vertical;
    min-height: 96px;
}

label {
    display: grid;
    gap: 6px;
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--f-ui);
}

/* Form labely vždy mutedn\u00ed (nikdy accent) — override pokud by něco nad nimi mělo jiné barvy */
.add-panel-body label,
.form-grid > label,
.panel form > label,
.stack > label {
    color: var(--ink-3);
}

/* Checkbox row — inline layout, normální font, ne UPPERCASE */
label.checkline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}
label.checkline input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

label input,
label select,
label textarea {
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--ink);
    font-family: var(--f-ui);
}

/* ── Editorial buttons ─────────────────────────────────────────────── */
button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--rule);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font: inherit;
    font-weight: 400;
    font-size: 13px;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-decoration: none;
    box-shadow: none;
}

button:hover,
.button:hover {
    border-color: var(--ink-3);
    background: var(--card);
    color: var(--ink);
    transform: none;
}

button:active,
.button:active {
    transform: none;
}

.primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: none;
    font-weight: 400;
}

.primary:hover {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
    color: var(--paper);
}

/* Tlačítko stop – červená varianta */
.timer-btn-stop {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.timer-btn-stop:hover {
    background: var(--danger-ink);
    border-color: var(--danger-ink);
    color: #fff;
    transform: translateY(-1px);
}

/* Tlačítko pauza – oranžová/jantarová varianta */
.timer-btn-pause {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
}
.timer-btn-pause:hover {
    background: var(--warning-ink);
    border-color: var(--warning-ink);
    color: #fff;
    transform: translateY(-1px);
}

.ghost {
    background: transparent;
    box-shadow: none;
}

.ghost:hover {
    background: var(--bg-soft);
    border-color: var(--line-strong);
    color: var(--ink);
}

.ghost.danger {
    color: var(--danger);
    border-color: var(--line-strong);
}

.ghost.danger:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger-ink);
}

/* App shell */
.app-shell {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    min-height: 100svh;
}

/* ── Editorial sidebar ─────────────────────────────────────────────── */
/*
 * Sidebar je fixovaný na levé straně a scrolluje se jen vnitřně (pokud by
 * menu přerostlo výšku obrazovky). Workspace má odpovídající margin-left,
 * aby nebyl překryt. `position: sticky` bylo nespolehlivé v kombinaci
 * s `html, body { overflow-x: hidden }` — `fixed` je robustní.
 */
.sidebar {
    background: var(--paper-2);
    color: var(--ink-2);
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 28px 22px 22px;
    position: fixed;
    top: 0;
    left: 0;
    width: 268px;
    height: 100vh;
    height: 100svh;
    border-right: 1px solid var(--rule);
    overflow-y: auto;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); }

.brand > span:nth-of-type(2) {
    font-family: var(--f-ui);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.2;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ink);
    flex-shrink: 0;
    position: relative;
    top: 3px;
}

.brand-mark svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px;
    max-height: 20px;
    color: var(--ink);
    stroke: currentColor;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-section {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 0 8px;
    margin: 4px 0 6px;
    font-family: var(--f-ui);
    font-weight: 500;
}

/* Vizuální oddělovač skupin v levém menu */
.nav-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: 12px 10px;
    border: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}

.nav-link svg,
.nav-link > svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    flex-shrink: 0;
    stroke-width: 1.8;
    opacity: 0.7;
}

.nav-link:hover {
    background: rgba(23, 25, 28, 0.05);
    color: var(--ink);
}

.nav-link.active {
    background: var(--ink);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(23, 25, 28, 0.12), 0 4px 10px -4px rgba(23, 25, 28, 0.18);
}
.nav-link.active svg { opacity: 1; }

/* Badge pro taby/úkoly atd. vpravo */
.nav-timer-badge,
.nav-link .badge {
    margin-left: auto;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-4);
    letter-spacing: 0;
}
.nav-link.active .nav-timer-badge { color: rgba(255, 255, 255, 0.75); }

.sidebar .logout button {
    width: 100%;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-3);
    box-shadow: none;
    font-size: 12.5px;
    padding: 7px 12px;
}

.sidebar .logout button:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--ink-3);
    transform: none;
}

/* ── Editorial workspace & masthead ──────────────────────────────── */
/*
 * Workspace musí explicitně sedět v druhém grid tracku (column: 2), jinak
 * se auto-placement propadá do prvního sloupce a end up schován pod fixed
 * sidebarem. `grid-column: 2` je neoddiskutovatelná kotva.
 */
.workspace {
    grid-column: 2;
    padding: 36px clamp(24px, 4vw, 80px) 80px;
    display: grid;
    gap: 24px;
    /* Na ultrawide (5120×1440) se content centruje; běžný desktop zůstává fluid. */
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    align-content: start;
}

/* ── Responzivní breakpointy (ultrawide / desktop / tablet) ──────── */

/* Velké monitory (1600+): více prostoru */
@media (min-width: 1600px) {
    .workspace { max-width: 1800px; }
}

/* Ultrawide (2200+), např. 5120×1440 — ještě více prostoru */
@media (min-width: 2200px) {
    .workspace {
        max-width: 2100px;
        padding: 44px clamp(40px, 3vw, 120px) 100px;
    }
}

/* Užší desktop / tablet landscape — kolaps vícesloupcových gridů */
@media (max-width: 1100px) {
    .workspace { padding: 28px 32px 64px; }
    .two-column { grid-template-columns: minmax(0, 1fr); }
}

/* Page head = editorial masthead */
.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 8px;
}

.page-head h1 {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(24px, 2.2vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 2px 0 0;
    color: var(--ink);
}
.page-head h1 em {
    font-style: italic;
    color: var(--ink-3);
    font-weight: 400;
}

.page-head p {
    color: var(--ink-3);
    font-size: 13px;
    margin-top: 8px;
    max-width: 100ch;
}

.page-head.is-compact h1 {
    font-size: 32px;
}

/* Eyebrow */
.eyebrow {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--f-ui);
}

/* ── Editorial stat strip (bez karty — jen čísla + mono popisek) ──────── */
.metric-strip {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 22px 0;
    background: transparent;
}

.metric-strip > div,
.metric-strip > a {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: none;
    position: relative;
    overflow: visible;
    transition: none;
}
.metric-strip > div:not(:last-child),
.metric-strip > a:not(:last-child) {
    border-right: 1px solid var(--rule-soft);
}

.metric-strip > div::before,
.metric-strip > a::before { content: none; }
.metric-strip > div:hover,
.metric-strip > a:hover { transform: none; box-shadow: none; }

/* Klikací dlaždice na dashboardu — vedou na výpisy (klienti, úkoly, čas).
   Vizuálně shodné s ostatními, jen reagují na hover/fokus = signál, že jsou prokliknutelné. */
.metric-strip > a.metric-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.metric-strip > a.metric-link:hover {
    background: var(--brand-soft);
}
.metric-strip > a.metric-link:hover strong {
    color: var(--brand);
}
.metric-strip > a.metric-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.metric-strip strong {
    font-family: var(--f-display);
    font-size: clamp(26px, 2vw, 32px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    order: 1;
}

.metric-strip span {
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--f-ui);
    order: 2;
}

/* ── Editorial panels ──────────────────────────────────────────────── */
.panel {
    background: var(--card);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md);
    /* Desktop: víc vnitřního dýchání po stranách (16px). Mobilní override níže
       v @media max-width: 720px vrací 6px, ať na malých obrazovkách
       neztrácíme šířku obsahu. */
    padding: 22px 16px;
    box-shadow: none;
}
@media (max-width: 720px) {
    .panel {
        padding: 22px 6px;
    }
}

.alert-panel {
    border-color: color-mix(in oklch, var(--warn) 30%, var(--rule));
    background: color-mix(in oklch, var(--warn) 4%, var(--card));
}

.alert-panel .section-head h2 {
    color: color-mix(in oklch, var(--warn) 50%, var(--ink));
}

.section-head {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule-soft);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.section-head:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }

.section-head h2 {
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    color: var(--ink);
}

.section-head p {
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--f-ui);
}

/* Grids */
.two-column {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* Report Čas (?page=time): Souhrn úzký vlevo, Záznamy 3× širší vpravo.
   Scoped modifikátor — neovlivní ostatní .two-column (dashboard, klient, projekt). */
.two-column--time-report {
    gap: 21px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

.three-column {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Forms */
.form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid.compact {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--line-strong);
}

.form-grid button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: flex-start;
}

.wide {
    grid-column: 1 / -1;
}

.checkline {
    align-items: center;
    gap: 10px;
    display: flex;
    text-transform: none;
    font-size: 13.5px;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--ink);
}

.checkline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
}

.stack {
    display: grid;
    gap: 16px;
}

/* Task list */
.list {
    display: grid;
    gap: 10px;
}

.task-row {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px 18px 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.task-row:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}

.task-row::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: var(--radius-pill);
}

.task-row.priority-urgent::before { background: var(--danger); width: 4px; }
.task-row.priority-high::before { background: var(--warning); width: 4px; }
.task-row.priority-medium::before { background: var(--brand); }
.task-row.priority-low::before { background: var(--line-strong); }

/* Hotové úkoly — opticky potlačené (přeškrtnutý title, ztlumená barva).
   I když jsou ve skupině „Hotové" (sbalené), pokud je rozbalíš, vidíš je
   jako vyřízené, ne aktivní. */
.task-row.status-done {
    opacity: 0.6;
}
.task-row.status-done .task-title {
    text-decoration: line-through;
    color: var(--ink-3);
}
.task-row.status-done:hover {
    opacity: 0.95;
}

/* Skupinové sekce — nadpisy nad úkoly s ikonou a počtem */
.task-group {
    margin-bottom: 18px;
}
.task-group:last-child {
    margin-bottom: 0;
}
.task-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--rule-soft, #ececf0);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: default;
}
.task-group-icon {
    font-size: 14px;
}
.task-group-label {
    flex: 1;
}
.task-group-count {
    background: var(--paper-2, #f4f4f5);
    color: var(--ink-2);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
}

/* Sbalená sekce „Hotové" — <details> s <summary> */
.task-group-done > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.task-group-done > summary::-webkit-details-marker {
    display: none;
}
.task-group-done > summary:hover {
    background: var(--paper-2, #f4f4f5);
}
.task-group-done .task-group-toggle {
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-left: auto;
}
.task-group-done[open] .task-group-toggle::after {
    content: ' (kliknutím sbalit)';
}
.task-group-done[open] .task-group-toggle {
    /* Když je sekce rozbalená, hint text změnit */
    visibility: hidden;
    position: relative;
}
.task-group-done[open] .task-group-toggle::before {
    content: '(klikni pro sbalení)';
    visibility: visible;
    position: absolute;
    right: 0;
}

/* Vizuálně odděl skupiny mírnou mezerou navíc kolem hotových */
.task-group-done {
    margin-top: 24px;
    border-top: 2px dashed var(--rule, #e5e5ea);
    padding-top: 8px;
}
.task-group-done .task-group-header-done {
    color: #166534;  /* zelený nádech pro „hotovo" */
}

/* Po termínu = celá karta s jemným červeným pozadím + silnější levý okraj.
   Vidět na první pohled, že je něco po termínu. */
.task-row.deadline-overdue {
    background: linear-gradient(to right, #fef2f2 0%, var(--panel) 60%);
    border-color: #fecaca;
}
.task-row.deadline-overdue::before { background: #dc2626; width: 5px; }
.task-row.deadline-today {
    background: linear-gradient(to right, #fffbeb 0%, var(--panel) 60%);
    border-color: #fed7aa;
}
.task-row.deadline-today::before { background: #f97316; width: 4px; }

/* Hlavička úkolu — jediný horizontální řádek: info vlevo, status vpravo.
   Edit panel se rozbaluje POD hlavičkou v plné šířce (flex-column rodič). */
.task-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.task-head-info {
    flex: 1 1 auto;
    min-width: 0;
}

.task-head-controls {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.task-head-info .row-title {
    font-weight: 650;
    font-size: 14.5px;
    color: var(--ink);
}

.task-head-info .muted {
    color: var(--ink-muted);
    font-size: 12.5px;
    margin-top: 4px;
}

.task-head-info p + p {
    margin-top: 4px;
}

.task-head-info .task-description {
    color: var(--ink-2);
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.5;
}

/* Štítky úkolu — kompaktnější než default wiki chipy, aby nerušily řádek. */
.task-head-info .task-tags {
    margin-top: 6px;
}

.task-head-info .task-tags .wiki-tag-chip {
    font-size: 11px;
    padding: 2px 8px;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOVÝ DESIGN ŘÁDKU ÚKOLU — viditelnější breadcrumb, title, pilulky
   Inspirace: Linear / ClickUp / Asana — informace na první pohled
   ═══════════════════════════════════════════════════════════════════════ */

/* Breadcrumb klient › projekt — nahoře nad nadpisem, malý, ale klikatelný */
.task-breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 11.5px;
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.task-crumb {
    color: var(--ink-3);
    text-decoration: none;
    font-weight: 600;
}
a.task-crumb:hover {
    color: var(--brand);
    text-decoration: underline;
}
.task-crumb-project {
    color: var(--ink-2);
}
a.task-crumb-project:hover {
    color: var(--brand);
}
.task-crumb-sep {
    color: var(--ink-4);
    font-weight: 400;
}

/* Title úkolu — větší, výraznější než předtím */
.task-head-info .task-title {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    color: var(--ink);
    line-height: 1.3;
}
.task-title-link {
    color: inherit;
    text-decoration: none;
}
.task-title-link:hover {
    color: var(--brand);
}

/* Pilulky pod nadpisem — termín, priorita, štítky služeb */
.task-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}
.task-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.task-pill-icon {
    font-size: 11px;
}
.task-pill-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Termín — podle urgence (overdue/today/tomorrow/soon/future) */
.task-pill-deadline-overdue {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.task-pill-deadline-today {
    background: #ffedd5;
    color: #9a3412;
    border: 1px solid #fdba74;
}
.task-pill-deadline-tomorrow {
    background: #fef3c7;
    color: #854d0e;
    border: 1px solid #fde68a;
}
.task-pill-deadline-soon {
    background: #fef9c3;
    color: #713f12;
    border: 1px solid #fef08a;
}
.task-pill-deadline-future {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* Priorita — barevné tečka + label. Medium je decentní (default), urgent svítí. */
.task-pill-priority-urgent {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.task-pill-priority-urgent .task-pill-dot { background: #dc2626; }

.task-pill-priority-high {
    background: #ffedd5;
    color: #9a3412;
    border: 1px solid #fdba74;
}
.task-pill-priority-high .task-pill-dot { background: #f97316; }

.task-pill-priority-medium {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.task-pill-priority-medium .task-pill-dot { background: #3b82f6; }

.task-pill-priority-low {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.task-pill-priority-low .task-pill-dot { background: #94a3b8; }

/* Inline priority picker — vypadá jako priority pill, ale je to <select>.
   Klik → nativní nabídka priorit → změna se uloží AJAXem bez refreshe.
   Barvu drží přes .task-priority-select-{class} (background-color longhand,
   ať ji nepřebije background-image se šipkou). */
.task-priority-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    padding: 3px 23px 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 7px center;
}
.task-priority-select:hover { filter: brightness(0.96); }
.task-priority-select-urgent { background-color: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.task-priority-select-high   { background-color: #ffedd5; color: #9a3412; border-color: #fdba74; }
.task-priority-select-medium { background-color: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.task-priority-select-low    { background-color: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.task-pill-priority-form { margin: 0; display: inline-flex; }

/* Service tag pilulky uvnitř task pills row */
.task-pill-tag {
    background: var(--ink);
    color: #fff;
    font-weight: 500;
    font-size: 11px;
    padding: 2px 9px;
}

/* Quick-switch stavu v hlavičce — kompaktní select, vizuálně odlišný
   podle stavu. Bez plovoucí task-actions, drží se vpravo v řádku úkolu. */
.task-status-quick {
    margin: 0;
}

.task-status-select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 30px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 28px 4px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background-color: var(--paper-2);
    color: var(--ink-2);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.task-status-select:hover {
    border-color: var(--line-strong);
}

.task-status-select.task-status-todo {
    background-color: var(--paper-2);
    color: var(--ink-2);
    border-color: var(--line);
}
.task-status-select.task-status-in_progress {
    background-color: rgba(91, 91, 214, 0.10);
    color: var(--brand, #3b3baa);
    border-color: rgba(91, 91, 214, 0.35);
}
.task-status-select.task-status-blocked {
    background-color: rgba(210, 127, 40, 0.10);
    color: #9a5a12;
    border-color: rgba(210, 127, 40, 0.35);
}
.task-status-select.task-status-done {
    background-color: rgba(40, 140, 90, 0.10);
    color: #1e6a43;
    border-color: rgba(40, 140, 90, 0.35);
}

/* Edit panel pod hlavičkou — plná šířka, oddělen tenkou čárou. */
.task-edit,
.note-edit,
.time-entry-edit {
    margin-top: 2px;
    border-top: 1px dashed var(--line);
    padding-top: 12px;
}

/* Smazat uvnitř edit panelu — vpravo dole, pod formulářem, s odstupem. */
.task-delete-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

/* Úkol 6 — projekt (primární, bold) a klient (sekundární, badge) v muted řádku */
.task-head-info .task-proj {
    font-weight: 650;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}

/* Pokud je .task-proj jako <a> (linkovaný projekt/klient) — při hoveru zvýraznit */
a.task-proj:hover {
    color: var(--brand, #5b5bd6);
    border-bottom-color: currentColor;
}

/* Odkaz na samotný úkol (titulek řádku) — nedědí barvu z modré, jen podtržení při hoveru */
.task-title-link {
    color: inherit;
    text-decoration: none;
}
.task-title-link:hover {
    color: var(--brand, #5b5bd6);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.task-head-info .task-cli {
    display: inline-block;
    font-size: 11px;
    color: var(--ink-3);
    background: var(--paper-2);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    margin: 0 4px;
    letter-spacing: 0;
    font-weight: 400;
}

/* Úkol 7 — min-width: 0 na info sloupec, aby dlouhý titulek nebo štítky
   korektně wrapovaly a nerozbíjely flex layout hlavičky. */
.task-head-info {
    min-width: 0;
}
/* Edit form uvnitř task-row: užší grid (2 sloupce), bez compact borderu. */
.task-edit .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.task-edit .form-grid.compact {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Úkol 8 — konzistentní layout pro add-panel uvnitř tabu */
.add-panel-body.panel {
    margin-top: 12px;
}

/* Účtování na projektu — fieldset */
.billing-fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 18px 18px;
    background: var(--bg-soft);
}
.billing-fieldset legend {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    color: var(--ink-muted);
    padding: 0 8px;
}
.billing-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    margin-bottom: 14px;
}
.billing-choice label,
.billing-choice .checkline {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}
.billing-amounts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.billing-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.billing-fix {
    background: #e8f4ff;
    color: #1d5aaa;
}
.billing-hourly {
    background: #fff2e5;
    color: #b84e00;
}

/* Fakturace — per-project rows s checkboxem */
.invoicing-client-group {
    margin-bottom: 24px;
}
.invoicing-client-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

/* Vyřízený klient — vizuálně potlačený (text bledší, řádek lehce šedší).
   Aktivní pending klienti jsou normální, vyřízení jsou opticky mimo focus. */
.invoicing-client-group.is-fully-sent {
    opacity: 0.65;
}
.invoicing-client-group.is-fully-sent:hover {
    opacity: 1;
}
.invoicing-client-group.is-fully-sent .invoicing-client-name {
    color: var(--ink-3);
    font-weight: 600;
}

/* Součet za klienta s víc projekty (per-projekt fakturace) — malý souhrnný
   řádek pod skupinou projektů (Ondra chce u multi-projektových klientů vidět
   celkovou částku faktury na jednom místě). */
.invoicing-group-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px;
    padding: 8px 16px 2px;
    margin-top: 2px;
    border-top: 1px dashed var(--line);
}
.invoicing-group-total-label {
    font-size: 11.5px;
    color: var(--ink-3);
}
.invoicing-group-total-amount {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}

/* Setup-pending panel — nová sekce ve Fakturaci pro klienty čekající na setup fee.
   Vypadá jako klasický panel s žlutavým akcentem (= „pozor, něco zbývá"). */
.setup-pending-panel {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.04), transparent 60%);
}
.setup-pending-panel .section-head h2 {
    color: #92400e;
}
.setup-pending-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.setup-pending-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--card, #fff);
    border: 1px solid #fde68a;
    border-radius: var(--radius-md, 8px);
}
.setup-pending-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.setup-pending-info strong a {
    color: var(--ink);
    text-decoration: none;
}
.setup-pending-info strong a:hover {
    color: var(--brand);
    text-decoration: underline;
}
.setup-pending-amount {
    color: #92400e;
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.setup-pending-note {
    font-size: 12.5px;
}

/* První fakturační měsíc po založení projektu — extra zvýrazněný řádek */
.setup-pending-row.is-first-month {
    border-color: #f97316;
    background: #fff7ed;
    box-shadow: 0 0 0 1px #fdba74 inset;
}
.setup-first-month-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 700;
    background: #fb923c;
    color: white;
    letter-spacing: 0.04em;
}

/* Inline setup-pending badge u řádku ve Fakturaci */
.invoicing-setup-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    white-space: nowrap;
    margin-left: 4px;
    cursor: help;
}

/* Fakturoid status badges — viditelná indikace stavu faktury vedle billing badge.
   Synchronizuje se přes webhook nebo cron z Fakturoid API. */
.fk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    margin-left: 4px;
    border: 1px solid;
}
.fk-badge-paid {
    background: #dcfce7; color: #14532d; border-color: #86efac;
}
.fk-badge-overdue {
    background: #fee2e2; color: #991b1b; border-color: #fca5a5;
}
.fk-badge-sent {
    background: #dbeafe; color: #1e40af; border-color: #93c5fd;
}
.fk-badge-open {
    background: #fef3c7; color: #854d0e; border-color: #fde68a;
}
.fk-badge-cancelled {
    background: #f1f5f9; color: #475569; border-color: #cbd5e1;
    text-decoration: line-through;
}

/* Google Ads document links — vedle 3-stavového widgetu, otevírá billing stránku.
   Jeden klik = stažení faktury z Google Ads. Vlevo subtilní oddělovač. */
.invoicing-gads-links {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 10px;
    margin-left: 4px;
    border-left: 1px solid var(--rule, #e5e5ea);
    flex-wrap: wrap;
}
.invoicing-gads-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: #1e40af;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.invoicing-gads-link:hover {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #1e3a8a;
}
.invoicing-gads-link .gads-link-label {
    font-size: 11.5px;
}
/* „Odeslat G-fakturu" — akční tlačítko (Gmail compose). Výraznější než G-faktura
   odkaz, protože je to akce „odeslat". Zelená = pošli; žlutá = chybí e-mail klienta. */
.invoicing-send-ginvoice {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.invoicing-send-ginvoice:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}
.invoicing-send-ginvoice .send-ginvoice-label {
    font-size: 11.5px;
}
.invoicing-send-ginvoice.is-no-email {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}
.invoicing-send-ginvoice.is-no-email:hover {
    background: #fef3c7;
    border-color: #fcd34d;
}
.invoicing-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 220px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.invoicing-row.is-client-level {
    border-left: 3px solid var(--brand);
    background: linear-gradient(90deg, var(--brand-soft, #f4f3ff) 0%, var(--panel) 25%);
}
.invoicing-row.is-client-level.is-sent {
    background: linear-gradient(90deg, #e6f5ea 0%, #f3faf5 25%);
}
.billing-inherited {
    padding: 12px 14px;
    background: #fef8f0;
    border: 1px dashed #e6c78a;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
}
.billing-inherited strong {
    display: block;
    margin-bottom: 4px;
}
.billing-override-details {
    margin-top: 6px;
}
.billing-override-details summary {
    font-size: 12px;
    color: var(--ink-muted);
    cursor: pointer;
    padding: 6px 0;
}
.billing-hint {
    margin: 4px 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-3);
}
.billing-hint details {
    margin-top: 6px;
}
.billing-hint details summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 12px;
    list-style: none;
    display: inline-block;
    margin-top: 2px;
}
.billing-hint details summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s;
    margin-right: 2px;
}
.billing-hint details[open] summary::before {
    content: "▾ ";
}
.billing-hint details summary::-webkit-details-marker {
    display: none;
}
.billing-hint details > *:not(summary) {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--ink-3);
}

/* Legacy is-sent — řádek po odeslání zůstává vizuálně klidný, ale ne "hotový".
   Hlavní vizuální indikátor je zaškrtnutý checkbox + případné badges. */
.invoicing-row.is-sent {
    background: var(--panel);
    border-color: var(--line);
}
.invoicing-row.is-sent .invoicing-row-client {
    color: var(--ink);
}

/* Projekt „ve vývoji" (billing_active=0) — šedý řádek, nefakturuje se, mimo grid layout.
   Specificita .invoicing-panel … přebíjí globální .invoicing-row-link (ellipsis/nowrap),
   jinak by se název projektu ořezal na „pr…". */
.invoicing-panel .invoicing-row.is-dev {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    background: var(--surface-2, #f8fafc);
    border-style: dashed;
    border-color: var(--line);
    opacity: 0.92;
}
.invoicing-panel .invoicing-row.is-dev .invoicing-dev-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}
.invoicing-panel .invoicing-row.is-dev .invoicing-dev-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef2f7;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}
.invoicing-panel .invoicing-row.is-dev .invoicing-row-link {
    color: #475569;
    font-weight: 600;
    text-decoration: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    max-width: none;
    flex: 0 1 auto;
}
.invoicing-panel .invoicing-row.is-dev .invoicing-row-link:hover {
    text-decoration: underline;
}
.invoicing-panel .invoicing-row.is-dev .invoicing-dev-note {
    font-size: 11.5px;
    color: #94a3b8;
    font-style: italic;
    white-space: nowrap;
    flex: 0 0 auto;
}
.invoicing-panel .invoicing-row.is-dev .invoicing-dev-action {
    margin: 0 0 0 auto;
    flex: 0 0 auto;
}
.invoicing-panel .invoicing-row.is-dev .invoicing-dev-action .button.small {
    font-size: 11.5px;
    padding: 4px 10px;
    white-space: nowrap;
}

.invoicing-row-check {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.invoicing-row-check input {
    width: 22px;
    height: 22px;
    cursor: pointer;
}
.invoicing-row-main {
    min-width: 0;
}
.invoicing-row-client {
    display: block;
    font-weight: 650;
    font-size: 14.5px;
    color: var(--ink);
    text-decoration: none;
}
.invoicing-row-client:hover {
    text-decoration: underline;
}
.invoicing-row-meta {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 12.5px;
    color: var(--ink-muted);
}
.invoicing-row-note input {
    width: 100%;
    font-size: 13px;
}
.invoicing-sent-label {
    color: #2a7a3f;
    font-weight: 500;
}
.page-head-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}
.page-head-actions > .add-panel,
.page-head-actions > .tabbar {
    flex-shrink: 0;
}
.page-head-actions-row {
    display: flex;
    align-items: stretch; /* obě sekce stejně vysoké, žádný "plovoucí" baseline */
    gap: 28px;
}
/* Globálně má .add-panel { display: contents } kvůli starým layoutům, kde
   summary a body fungují jako přímí flex potomci grandparent (.page-head).
   V našem horizontálním řádku to ale rozbíjí vertikální zarovnání proti
   .tabbar — proto zde překryjeme na block. Summary a body zůstávají uvnitř
   <details>, takže "Nový úkol" panel se otevře pod tlačítkem, ne v řádku. */
.page-head-actions-row > .add-panel {
    display: block;
    position: relative;
}
/* Sjednocení výšky obou hlavních prvků v řádku — bez tohohle button
   (min-height: 36px) trčí výš než tabbar (~32px). 38px ladí s `+ Nový úkol`
   primary button design tokens. */
.page-head-actions-row > .add-panel > summary.button,
.page-head-actions-row > .tabbar {
    height: 38px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.page-head-actions-row > .tabbar {
    padding: 3px;
}
.page-head-actions-row > .add-panel[open] > .add-panel-body {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 360px;
    box-shadow: 0 12px 32px rgba(15, 22, 35, 0.12);
}
@media (max-width: 520px) {
    .page-head-actions-row {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: flex-end;
    }
    .page-head-actions-row > .add-panel[open] > .add-panel-body {
        position: static;
        min-width: 0;
        box-shadow: none;
    }
}

.task-edit summary,
.note-edit summary,
.time-entry-edit summary {
    cursor: pointer;
    font-weight: 620;
    font-size: 12.5px;
    color: var(--brand);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.task-edit summary::-webkit-details-marker,
.note-edit summary::-webkit-details-marker,
.time-entry-edit summary::-webkit-details-marker {
    display: none;
}

.task-edit summary::before,
.note-edit summary::before,
.time-entry-edit summary::before {
    content: "▸";
    font-size: 10px;
    transition: transform 0.15s ease;
}

.task-edit[open] summary::before,
.note-edit[open] summary::before,
.time-entry-edit[open] summary::before {
    transform: rotate(90deg);
}

.task-edit[open] summary,
.note-edit[open] summary,
.time-entry-edit[open] summary {
    margin-bottom: 12px;
}

/* Edit form uvnitř time-entry — odstraní spodní rámeček compact gridu */
.time-entry-edit-form.compact {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 12px;
}

/* Client tiles */
/* ── Add-panel (collapsed create form) ─────────────────────────────────────── */
.add-panel {
    display: contents;
}

/* Všechna summary použitá jako tlačítko – reset browser defaults */
details > summary.button {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
details > summary.button::-webkit-details-marker { display: none; }
details > summary.button::marker               { display: none; }

/* V page-head flex řádku nepřetékej text */
.page-head .add-panel > summary,
.page-head-actions details > summary.button {
    white-space: nowrap;
}

.add-panel-body {
    grid-column: 1 / -1;
    margin-top: 8px;
}

.add-panel-body.panel {
    padding: 22px 24px;
    margin-bottom: 8px;
}

/* ── Drag handle ─────────────────────────────────────────────────────────────── */
.drag-handle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--ink-soft);
    opacity: 0;
    border-radius: var(--radius-sm);
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
    z-index: 3;
}

.drag-handle svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
}

.drag-handle:active {
    cursor: grabbing;
}

.client-item:hover .drag-handle,
.project-item:hover .drag-handle {
    opacity: 1;
}

.drag-handle:hover {
    opacity: 1 !important;
    background: var(--bg-soft);
    color: var(--ink-muted);
}

/* Sortable states */
.sortable-ghost {
    opacity: 0.35;
    background: var(--brand-soft) !important;
    border-color: var(--brand) !important;
}

.sortable-chosen {
    box-shadow: var(--shadow-lg) !important;
    transform: rotate(1.5deg) scale(1.02) !important;
}

.sortable-drag {
    opacity: 1;
}

/* ── Client-item wrapper (for DnD on client tiles) ──────────────────────────── */
.client-item {
    position: relative;
}

.client-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.client-tile {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 148px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}

.client-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--brand-soft), transparent 60%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.client-tile:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
}

.client-tile:hover::before {
    opacity: 1;
}

/* Hlavička karty — proklikávací odkaz na detail klienta. */
.client-tile-head {
    display: grid;
    gap: 10px;
    align-content: start;
    text-decoration: none;
    color: var(--ink);
    position: relative;
}

.client-tile-head:hover {
    color: var(--ink);
}

.client-tile .tile-status {
    display: inline-flex;
    align-self: start;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: relative;
}

.client-tile .tile-status.tile-status-active {
    background: var(--ok-soft);
    color: var(--ok-ink);
}

.client-tile .tile-status.tile-status-paused {
    background: var(--warning-soft);
    color: var(--warning-ink);
}

.client-tile .tile-status.tile-status-archived {
    background: rgba(31, 30, 28, 0.08);
    color: var(--ink-muted);
}

.client-tile-head strong {
    font-size: 20px;
    font-weight: 720;
    letter-spacing: -0.01em;
    color: var(--ink);
    position: relative;
}

.client-tile-head em {
    font-style: normal;
    color: var(--ink-muted);
    font-size: 12.5px;
    position: relative;
}

/* Seznam projektů pod hlavičkou — každý odkaz otevře detail projektu. */
.client-tile-projects {
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

.client-tile-project {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    margin: 0 -4px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--ink-muted);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.client-tile-project:hover {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.client-tile-project-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-tile-project-paused .client-tile-project-name {
    opacity: 0.7;
}

.client-tile-project-count {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 650;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--warning-soft);
    color: var(--warning-ink);
}

/* Invoice row */
.invoice-row {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;  /* main + status buttons */
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md);
    background: var(--card);
    margin-bottom: 8px;
    transition: border-color 0.15s ease;
}

/* Pod 720 px viewport: status buttons stack pod název pro lepší tap target */
@media (max-width: 720px) {
    .invoice-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .invoice-row .invoice-status-group {
        justify-self: stretch;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .invoice-row .invoice-status-btn {
        min-width: 0;
    }
}

.invoice-row:hover {
    border-color: var(--rule);
}

.invoice-row-main { min-width: 0; }

/* Typografie jména klienta — sjednoceno se zbytkem systému
   (shodně s .task-main .row-title: UI font, 14.5px, weight 650). */
.invoice-row strong {
    display: block;
    font-family: var(--f-ui);
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: 0;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta řádek pod jménem (období + termín) — UI font (ne mono), drobnější. */
.invoice-row span {
    display: block;
    color: var(--ink-3);
    font-family: var(--f-ui);
    font-size: 12.5px;
    margin-top: 2px;
    letter-spacing: 0;
}

/* Odkaz na jméno klienta — nepodtrhávat, dědit barvu; při hoveru brand. */
.invoice-row-link {
    text-decoration: none;
    color: inherit;
    display: block;
    min-width: 0;
}
.invoice-row-link:hover strong {
    color: var(--brand, #5b5bd6);
}

.invoice-row-xref {
    color: var(--brand, #5b5bd6);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.invoice-row-xref:hover {
    opacity: 1;
}

.invoice-row-note-input {
    font-size: 12.5px;
    padding: 6px 10px;
    min-width: 0;
}

/* 3 ikony stavu faktury — kompaktní toggle group */
.invoice-status-group {
    display: inline-flex;
    gap: 4px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: 2px;
    background: var(--paper);
    flex-shrink: 0;
}

.invoice-status-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 42px;
    min-width: 60px;
    padding: 4px 10px;
    border: 0;
    background: transparent;
    border-radius: 3px;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    box-shadow: none;
    font-family: var(--f-ui);
}
.invoice-status-btn .btn-icon {
    font-size: 14px;
    line-height: 1;
}
.invoice-status-btn .btn-label {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.04em;
}
.invoice-status-btn:hover {
    background: var(--card);
    color: var(--ink);
    border: 0;
    transform: none;
}
.invoice-status-btn.is-active {
    background: var(--ink);
    color: var(--paper);
}
.invoice-status-btn.is-active.invoice-status-sent {
    background: var(--good);
    color: var(--paper);
}
.invoice-status-btn.is-active.invoice-status-skipped {
    background: var(--ink-4);
    color: var(--paper);
}

/* Collapse na úzkých obrazovkách */
@media (max-width: 720px) {
    .invoice-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .invoice-status-group {
        justify-self: start;
    }
}

/* Link rows */
.link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    margin-bottom: 8px;
    transition: border-color 0.15s ease;
}

.link-row:hover {
    border-color: var(--line-strong);
}

.link-row > div > span {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--teal-soft);
    color: var(--teal-strong);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.link-row a {
    display: block;
    color: var(--brand);
    font-weight: 620;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.link-row a:hover {
    color: var(--brand-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-row small {
    display: block;
    color: var(--ink-muted);
    font-size: 12px;
    margin-top: 4px;
}

/* Lokální složka — link otevírá Windows Průzkumník přes agentura-folder: handler.
   Vizuálně se odliší od externích URL (jiná barva, 📁 ikona). */
.link-row a.link-local-folder,
a.link-local-folder {
    color: #b45309; /* amber-700 — odlišit od modrých externích linků */
}
.link-row a.link-local-folder:hover,
a.link-local-folder:hover {
    color: #92400e;
    text-decoration: underline;
}
.link-folder-icon {
    display: inline-block;
    margin-right: 2px;
}

/* Editovatelný řádek odkazu — display vlevo, akce (Upravit/Odebrat) vpravo,
   collapsible edit form přes <details> */
.link-row-editable {
    flex-wrap: wrap;
    gap: 12px;
}
.link-row-display {
    flex: 1 1 auto;
    min-width: 0;
}
.link-row-actions {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.link-row-edit {
    display: inline-block;
}
.link-row-edit summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
}
.link-row-edit summary::-webkit-details-marker {
    display: none;
}
.link-row-edit summary::marker {
    content: '';
}
.link-row-edit[open] summary {
    background: rgba(0, 0, 0, 0.05);
}
.link-edit-form {
    flex-basis: 100%;
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.link-edit-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--ink-muted);
    font-weight: 500;
}
.link-edit-form input,
.link-edit-form select {
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    font-family: inherit;
}
.link-edit-form input:focus,
.link-edit-form select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(91, 91, 214, 0.15);
}
.link-edit-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.button.small {
    padding: 4px 10px;
    font-size: 12px;
}

/* Hint pod URL inputem ve form pro link */
.form-hint {
    display: block;
    color: var(--ink-muted);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.5;
}
.form-hint code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}
.form-hint a {
    color: var(--brand);
    text-decoration: underline;
}

/* Time lines */
.time-line,
.time-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    margin-bottom: 8px;
}

.time-line:hover,
.time-entry:hover {
    border-color: var(--line-strong);
}

.time-line span {
    color: var(--ink);
    font-weight: 520;
}

.time-line strong {
    color: var(--brand);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Settings: štítky služeb — řádek se jménem, kategorií a akcemi ── */
.tag-row {
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--surface, #fff);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tag-row:hover {
    border-color: var(--line-strong);
    background: var(--paper-2, #fafaf9);
}

.tag-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-height: 28px;
}

.tag-row-name {
    font-weight: 580;
    color: var(--ink);
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tag-row-cat {
    font-size: 11px;
    font-variant: small-caps;
    letter-spacing: 0.04em;
    color: var(--ink-muted, #6e7075);
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tag-row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.tag-row-actions form.inline-form {
    margin: 0;
}

.tag-edit {
    position: relative;
    display: inline-block;
}

/* <summary> musí explicitně dostat inline-flex, jinak v některých prohlížečích
   zůstane jako `display: list-item` a nezařadí se správně do flex layoutu. */
.tag-edit > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-3, #6e7075);
}

.tag-edit > summary:hover {
    background: var(--paper-2, #fafaf9);
    border-color: var(--line);
    color: var(--ink);
}

.tag-edit[open] > summary {
    background: var(--paper-2, #fafaf9);
    border-color: var(--line);
    color: var(--ink);
}

.tag-edit > summary::-webkit-details-marker,
.tag-edit > summary::marker {
    display: none;
}

/* Smazat tlačítko v akcích — menší než default button */
.tag-row-actions .ghost.danger.small,
.tag-row-actions button.ghost.danger {
    min-height: 26px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
    border-color: transparent;
}

.tag-row-actions .ghost.danger:hover {
    background: var(--danger-soft, #fef2f2);
    border-color: var(--danger, #dc2626);
}

.tag-edit-form {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 10;
    min-width: 280px;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface, #fff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.tag-edit-form .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

@media (max-width: 640px) {
    .tag-row-head {
        flex-wrap: wrap;
        gap: 6px;
    }

    .tag-row-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .tag-edit-form {
        position: static;
        min-width: 0;
        margin-top: 6px;
    }
}

/* Pravá strana řádku s časem: H:MM + Fakturoid decimál pod sebou */
.time-line-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

/* Fakturoid decimál – drobné šedé číslo pod H:MM */
.fakturoid-dec {
    display: inline-block;
    font-size: 11px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    margin-left: 8px;
    opacity: 0.85;
    font-family: var(--f-mono);
}
.fakturoid-dec::before {
    content: "Fakturoid ";
    color: var(--ink-4);
    font-style: italic;
    opacity: 0.8;
    margin-right: 2px;
}

.time-entry-actions {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Inline formulář pro duplikaci se výběrem data */
.dup-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.dup-form input[type="date"] {
    width: 136px;
    padding: 5px 8px;
    font-size: 12px;
    min-height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--ink);
    font: inherit;
}

.time-entry strong {
    display: block;
    font-size: 14px;
    font-weight: 650;
}

.time-entry span {
    display: block;
    color: var(--ink-muted);
    font-size: 12px;
    margin-top: 2px;
}

.time-entry p {
    color: var(--ink);
    font-size: 13px;
    margin-top: 6px;
}

/* Markdown form + notes */
.markdown-form {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 180px 220px;
}

/* Notes variant — 4 sloupce: Nadpis (užší) | Typ | Datum | Čas */
.markdown-form.markdown-form--note {
    grid-template-columns: minmax(200px, 1.2fr) 140px 130px 110px;
}

@media (max-width: 900px) {
    .markdown-form.markdown-form--note {
        grid-template-columns: 1fr 1fr;
    }
}

.markdown-form > textarea,
.markdown-form > .md-editor-host,
.markdown-form > button[type="submit"],
.markdown-form > .form-actions,
.markdown-form > label:has([data-markdown-source]) {
    grid-column: 1 / -1;
}

.markdown-form > button[type="submit"] {
    justify-self: flex-start;
}

.rendered-markdown {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    min-height: 60px;
    color: var(--ink);
}

.rendered-markdown > :first-child {
    margin-top: 0;
}

.rendered-markdown > * + * {
    margin-top: 10px;
}

.rendered-markdown h1 { font-size: 22px; font-weight: 720; }
.rendered-markdown h2 { font-size: 18px; font-weight: 700; }
.rendered-markdown h3 { font-size: 15px; font-weight: 700; }
.rendered-markdown ul,
.rendered-markdown ol {
    padding-left: 22px;
    margin: 0;
}
.rendered-markdown li + li {
    margin-top: 4px;
}

/* ── Quill 2 seznamy v náhledu (mimo editor) ──────────────────────────
   Quill 2 ukládá VŠECHNY seznamy jako <ol> a typ rozlišuje atributem
   `data-list` na <li> ("bullet" vs "ordered"). Marker kreslí jen Quillovo
   CSS uvnitř editoru — v náhledu (.wiki-body / .rendered-markdown) by se
   tedy odrážky chybně zobrazily jako ČÍSLOVANÝ seznam. Replikujeme Quillův
   způsob: bullet → •, ordered → číslo přes CSS counter. Markdown seznamy
   (bez data-list) zůstávají nedotčené — číslují/odrážkují se nativně.
   Pozn.: vnořené úrovně (ql-indent-N) sdílí jeden counter, takže ploché
   seznamy (běžný případ) jsou číslované správně. */
.wiki-body ol,
.rendered-markdown ol {
    counter-reset: quill-li;
}
.wiki-body li[data-list],
.rendered-markdown li[data-list] {
    list-style-type: none;
}
.wiki-body li[data-list="bullet"]::before,
.rendered-markdown li[data-list="bullet"]::before {
    content: "•";
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}
.wiki-body li[data-list="ordered"],
.rendered-markdown li[data-list="ordered"] {
    counter-increment: quill-li;
}
.wiki-body li[data-list="ordered"]::before,
.rendered-markdown li[data-list="ordered"]::before {
    content: counter(quill-li) ". ";
    display: inline-block;
    min-width: 1.5em;
    margin-left: -1.5em;
}

/* ── Tiptap checklist (taskList) v náhledu ────────────────────────────
   Sanitizer vyhodí <input>, zůstane ul/li s data-type + data-checked —
   checkbox kreslíme přes ::before (jen ke čtení, odškrtává se v editoru). */
.wiki-body ul[data-type="taskList"],
.rendered-markdown ul[data-type="taskList"] {
    list-style: none;
    padding-left: 4px;
}
.wiki-body ul[data-type="taskList"] > li,
.rendered-markdown ul[data-type="taskList"] > li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.wiki-body ul[data-type="taskList"] > li::before,
.rendered-markdown ul[data-type="taskList"] > li::before {
    content: "☐";
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-3);
}
.wiki-body ul[data-type="taskList"] > li[data-checked="true"]::before,
.rendered-markdown ul[data-type="taskList"] > li[data-checked="true"]::before {
    content: "☑";
    color: var(--brand);
}
.wiki-body ul[data-type="taskList"] > li[data-checked="true"] > div,
.rendered-markdown ul[data-type="taskList"] > li[data-checked="true"] > div {
    color: var(--ink-3);
    text-decoration: line-through;
}
.wiki-body ul[data-type="taskList"] p,
.rendered-markdown ul[data-type="taskList"] p {
    margin: 0;
}
.rendered-markdown code {
    background: var(--bg-soft);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
}
.rendered-markdown pre {
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    overflow-x: auto;
    margin: 0;
    border: 1px solid var(--line);
}
.rendered-markdown pre code {
    background: transparent;
    padding: 0;
}
.rendered-markdown blockquote {
    border-left: 3px solid var(--brand);
    padding-left: 14px;
    color: var(--ink-muted);
    margin: 0;
    font-style: italic;
}
.rendered-markdown a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rendered-markdown table {
    border-collapse: collapse;
    width: 100%;
}
.rendered-markdown th,
.rendered-markdown td {
    border: 1px solid var(--line);
    padding: 8px 12px;
    text-align: left;
}
.rendered-markdown th {
    background: var(--bg-soft);
    font-weight: 650;
}

.notes {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

.note {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.note:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}

/* Typové odlišení: barevný left-border + jemný tint pozadí */
.note--meeting {
    border-left-color: #3478f6;
    background: linear-gradient(to right, rgba(52, 120, 246, 0.04), transparent 200px), var(--panel);
}
.note--idea {
    border-left-color: #f7a800;
    background: linear-gradient(to right, rgba(247, 168, 0, 0.05), transparent 200px), var(--panel);
}
.note--note {
    border-left-color: #6b7280;
}

.note > .eyebrow {
    color: var(--teal-strong);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.note-date {
    color: var(--muted, #6b7280);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
}

/* Barevný badge — vždy stejné CSS, mění se jen pozadí */
.note-type-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: white;
    background: #6b7280; /* default = note */
}
.note-type-badge--meeting {
    background: #3478f6;
}
.note-type-badge--idea {
    background: #f7a800;
    color: #4a3700;
}
.note-type-badge--note {
    background: #6b7280;
}

.note h3 {
    margin-bottom: 14px;
    font-size: 18px;
}

.note-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
}

.note-actions button {
    min-height: 34px;
    font-size: 12.5px;
    padding: 0 12px;
}

/* ── CKEditor 5 — klasický WYSIWYG s viditelnou lištou ──────────────
   Editor si kreslí vlastní rám i toolbar (lišta = vždy viditelná).
   .md-editor-host = náš obal: drží grid umístění a resetuje styly
   zděděné z <label> (uppercase atd.). Vzhled ladíme přes --ck-* proměnné. */
.md-editor-host {
    width: 100%;
    grid-column: 1 / -1;
    /* Editor je v HTML vnořený uvnitř <label> (např. „Obsah") — bez resetu
       by se do UI i textu dědilo `label { text-transform: uppercase }`. */
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    /* CKEditor theme proměnné (dědí se do .ck potomků) */
    --ck-border-radius: 8px;
    --ck-font-face: "Inter", sans-serif;
    --ck-color-focus-border: var(--brand);
    --ck-color-toolbar-background: var(--panel-hover);
    --ck-color-toolbar-border: var(--line-strong);
    --ck-color-base-border: var(--line-strong);
    --ck-color-text: var(--ink);
    --ck-color-button-on-background: var(--brand-soft);
    --ck-color-button-on-hover-background: var(--brand-soft);
    --ck-color-button-on-color: var(--brand-strong);
    --ck-focus-ring: 1px solid var(--brand);
}

.markdown-form .md-editor-host {
    grid-column: 1 / -1;
}

/* Editační plocha */
.md-editor-host .ck.ck-editor__main > .ck-editor__editable {
    min-height: 240px;
    padding: 6px 20px 12px;
    font-family: "Inter", sans-serif;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--card);
}

.md-editor-host .ck.ck-editor__main > .ck-editor__editable.ck-focused {
    box-shadow: none;
}

/* Obsahové prvky uvnitř editoru — stejný rytmus jako render */
.md-editor-host .ck-content h1 {
    font-size: 22px;
    font-weight: 720;
    color: var(--ink);
    margin: 18px 0 8px;
    line-height: 1.3;
}

.md-editor-host .ck-content h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 16px 0 6px;
    line-height: 1.35;
}

.md-editor-host .ck-content h3 {
    font-size: 15.5px;
    font-weight: 650;
    color: var(--ink-2);
    margin: 14px 0 4px;
    line-height: 1.4;
}

.md-editor-host .ck-content p {
    margin: 0 0 10px;
}

.md-editor-host .ck-content ul,
.md-editor-host .ck-content ol {
    padding-left: 24px;
    margin: 8px 0 12px;
}

.md-editor-host .ck-content li {
    margin-bottom: 3px;
}

.md-editor-host .ck-content blockquote {
    border-left: 3px solid var(--brand);
    background: var(--bg-soft);
    padding: 8px 14px;
    margin: 10px 0;
    color: var(--ink-2);
    font-style: italic;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.md-editor-host .ck-content code {
    background: var(--bg-soft);
    color: var(--ink);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

.md-editor-host .ck-content pre {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    color: var(--ink);
    margin: 10px 0;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
}

.md-editor-host .ck-content pre code {
    background: transparent;
    padding: 0;
}

.md-editor-host .ck-content a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.md-editor-host .ck-content img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin: 8px 0;
}

.md-editor-host .ck-content hr {
    border: none;
    border-top: 2px solid var(--line);
    margin: 14px 0;
    background: none;
    height: auto;
}

@media screen and (max-width: 700px) {
    .md-editor-host .ck.ck-editor__main > .ck-editor__editable {
        min-height: 180px;
        padding: 4px 14px 10px;
        font-size: 15px;  /* 16+px = iOS Safari neumí auto-zoom při focusu */
    }
}

/* Tabbar */
.tabbar {
    display: inline-flex;
    background: var(--bg-soft);
    padding: 4px;
    border-radius: var(--radius-md);
    gap: 2px;
    border: 1px solid var(--line);
}

.tabbar a {
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
    transition: background 0.15s ease, color 0.15s ease;
}

.tabbar a:hover {
    color: var(--ink);
}

.tabbar a.active {
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow-xs);
}

/* ========== Page tabs (detail klienta / projektu) ==========
   Horizontální navigace pod hlavičkou stránky. Inspirováno Asana/Teamwork —
   plochý řádek s podtržením aktivního, žádné pozadí, maximálně tichý. */
.page-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--rule);
    margin: 0 0 28px;
    min-height: 48px;
}

.page-tabs-list {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: -1px;
}

.page-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 12px;
    font-family: var(--f-ui);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--ink-3);
    border-bottom: 2px solid transparent;
    background: transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    border-radius: 0;
    text-decoration: none;
    white-space: nowrap;
}

.page-tab:hover {
    color: var(--ink);
    background: transparent;
}

.page-tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--accent);
    background: transparent;
    font-weight: 600;
}

.page-tab.is-active:hover {
    background: transparent;
}

.page-tab-icon {
    display: inline-flex;
    color: currentColor;
}

.page-tab-icon svg {
    display: block;
}

.page-tab-label {
    font: inherit;
}

.page-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-4);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: var(--f-mono);
    letter-spacing: 0.04em;
}

.page-tab:not(.is-active) .page-tab-badge {
    background: transparent;
    color: var(--ink-4);
}

.page-tab-cog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--ink-3);
    border: 1px solid transparent;
    margin-bottom: 4px;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}

.page-tab-cog:hover {
    color: var(--ink);
    background: var(--paper-2);
    border-color: var(--rule);
}

.page-tab-cog.is-active {
    color: var(--ink);
    background: var(--paper-2);
    border-color: var(--rule);
}

/* Kompaktní hlavička pro detail klienta/projektu, aby taby seděly těsně pod titulem. */
.page-head.is-compact {
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
    flex-wrap: nowrap;
}

.page-head.is-compact h1 {
    font-size: clamp(22px, 2.4vw, 28px);
    margin: 2px 0 0;
}

.page-head.is-compact .eyebrow {
    margin: 0 0 2px;
}

.page-head.is-compact .eyebrow a {
    color: var(--brand);
}

.page-head.is-compact .eyebrow a:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .page-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
    }

    .page-tabs-list {
        flex-wrap: nowrap;
    }

    .page-tab {
        padding: 10px 12px;
        font-size: 13px;
    }

    .page-head.is-compact {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Month total badge */
.month-total {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 650;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-xs);
}

.month-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Timer */
.timer-tools {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    border: 1px dashed var(--line-strong);
    flex-wrap: wrap;
}

.timer-tools button {
    min-height: 34px;
    font-size: 12.5px;
    padding: 0 12px;
}

.timer-tools span {
    color: var(--ink-muted);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

/* Archive form */
.archive-form {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--line-strong);
    text-align: right;
}

/* Search */
.search-form {
    display: flex;
    gap: 10px;
    min-width: min(520px, 100%);
    flex-wrap: wrap;
}

.search-form input {
    flex: 1;
    min-width: 240px;
}

.search-result {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    text-decoration: none;
    margin-bottom: 10px;
    background: var(--panel);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    color: var(--ink);
}

.search-result:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
}

.search-result strong {
    font-size: 14px;
    font-weight: 650;
}

.search-result span {
    color: var(--ink-muted);
    font-size: 12.5px;
}

/* Empty state */
.empty {
    color: var(--ink-soft);
    font-style: italic;
    padding: 12px 0;
}

/* Notifications */
.notice,
.form-error {
    color: var(--danger-ink);
    font-weight: 620;
    padding: 10px 14px;
    background: var(--danger-soft);
    border: 1px solid rgba(224, 62, 62, 0.24);
    border-radius: var(--radius-md);
    font-size: 13px;
}

/* Login / setup */
.login-screen,
.setup-screen {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 32px;
    background:
        radial-gradient(circle at 20% 20%, rgba(91, 91, 214, 0.08), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(13, 148, 136, 0.08), transparent 50%),
        var(--bg);
}

.login-panel,
.setup-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 40px;
    max-width: 480px;
    width: 100%;
    display: grid;
    gap: 16px;
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.login-panel .brand-mark,
.setup-panel .brand-mark {
    margin-bottom: 4px;
    width: 48px;
    height: 48px;
}

.login-panel .brand-mark svg,
.setup-panel .brand-mark svg {
    width: 28px;
    height: 28px;
}

.login-panel h1,
.setup-panel h1 {
    font-size: 28px;
    letter-spacing: -0.02em;
}

.login-panel .eyebrow,
.setup-panel .eyebrow {
    margin-bottom: 0;
}

.login-lead {
    color: var(--ink-muted);
    font-size: 14px;
}

/*
 * Hidden "username" input pro 1Password autofill.
 * display:none by password managerům schoval input před parserem, takže místo toho
 * input zmenšíme na 1px × 1px, uděláme ho vizuálně nedostupný a odstraníme z tab order.
 */
.login-identity-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.setup-panel ol {
    margin: 0;
    padding-left: 20px;
    color: var(--ink-muted);
    display: grid;
    gap: 6px;
}

.setup-panel .notice {
    background: var(--warning-soft);
    color: var(--warning-ink);
    border: 1px solid rgba(217, 119, 6, 0.3);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
}

/* Code */
pre {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    overflow-x: auto;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

code {
    background: var(--bg-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* Responsive */
@media (max-width: 1180px) {
    .workspace {
        padding: 28px 32px 48px;
    }

    .three-column {
        grid-template-columns: 1fr;
    }

    .form-grid,
    .markdown-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
    }

    .brand {
        flex: 1 1 auto;
    }

    .nav {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        order: 3;
        width: 100%;
        margin-top: 6px;
    }

    .nav-link {
        justify-content: center;
        padding: 8px 6px;
        font-size: 12.5px;
    }

    .nav-link svg {
        display: none;
    }

    .nav-section {
        display: none;
    }

    .sidebar-bottom {
        margin-top: 0;
        margin-left: auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding-top: 0;
        border-top: 0;
    }

    .workspace {
        grid-column: auto;
        padding: 24px 20px 48px;
    }

    .two-column,
    .metric-strip,
    .form-grid,
    .markdown-form {
        /* grid-template-columns: 1fr; */
    }

    .task-row,
    .invoice-row,
    .link-row,
    .time-entry {
        grid-template-columns: 1fr;
    }

    .page-head {
        flex-direction: column;
        align-items: stretch;
    }

    /* On mobile, drag handles stay visible (no hover state) */
    .drag-handle {
        opacity: 0.55;
    }
}

/* ========== Flash zprávy ========== */
.flash {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.flash-ok {
    background: var(--ok-soft);
    color: var(--ok-ink);
    border-color: rgba(15, 123, 74, 0.2);
}

.flash-error {
    background: var(--danger-soft);
    color: var(--danger-ink);
    border-color: rgba(224, 62, 62, 0.2);
}

.flash-info {
    background: var(--info-soft);
    color: var(--info-ink);
    border-color: rgba(35, 131, 226, 0.2);
}

/* ========== Projekty ========== */
.project-item {
    position: relative;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

/* Global /projects view — larger cards with client badge */
.projects-global {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin-top: 0;
}

.tile-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tile-client-badge {
    font-size: 11px;
    font-weight: 650;
    color: var(--ink-muted);
    background: var(--bg-soft);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* ── Add-panel in header ─────────── */
.page-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.project-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.project-tile:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.project-tile strong {
    font-size: 15px;
    line-height: 1.35;
}

.project-tile em {
    color: var(--ink-muted);
    font-style: normal;
    font-size: 12px;
}

.project-tile small {
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 1.4;
}

.project-tile .tile-status {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.project-tile .tile-status-active {
    background: var(--ok-soft);
    color: var(--ok-ink);
}

.project-tile .tile-status-paused {
    background: var(--warning-soft);
    color: var(--warning-ink);
}

.project-tile .tile-status-archived {
    background: var(--bg-soft);
    color: var(--ink-soft);
}

/* Billing tag na project tile — zobrazuje jak bude projekt fakturován (souhrn vs. dle projektu). */
.project-tile .tile-billing {
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--line, #e5e5ea);
    background: var(--paper, #fafafa);
    color: var(--ink-muted, #6e7075);
    font-size: 11px;
    font-weight: 540;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.project-tile .tile-billing--fix {
    border-color: color-mix(in srgb, var(--brand, #5b5bd6) 30%, var(--line, #e5e5ea));
    background: color-mix(in srgb, var(--brand, #5b5bd6) 8%, var(--paper, #fafafa));
    color: color-mix(in srgb, var(--brand, #5b5bd6) 75%, var(--ink, #17191c));
}

.project-tile .tile-billing--hourly {
    border-color: color-mix(in srgb, var(--ok, #2f9e44) 30%, var(--line, #e5e5ea));
    background: color-mix(in srgb, var(--ok, #2f9e44) 8%, var(--paper, #fafafa));
    color: color-mix(in srgb, var(--ok, #2f9e44) 75%, var(--ink, #17191c));
}

.project-tile .tile-billing--none {
    border-style: dashed;
    color: var(--ink-4, #a1a1aa);
}

/* Billing tag a hint v page-head projektu. */
.project-head-billing {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 6px 0 0;
    font-size: 12.5px;
}

.project-head-billing-tag {
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--line, #e5e5ea);
    background: var(--paper, #fafafa);
    color: var(--ink-muted, #6e7075);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.project-head-billing-tag--fix {
    border-color: color-mix(in srgb, var(--brand, #5b5bd6) 30%, var(--line, #e5e5ea));
    background: color-mix(in srgb, var(--brand, #5b5bd6) 8%, var(--paper, #fafafa));
    color: color-mix(in srgb, var(--brand, #5b5bd6) 75%, var(--ink, #17191c));
}

.project-head-billing-tag--hourly {
    border-color: color-mix(in srgb, var(--ok, #2f9e44) 30%, var(--line, #e5e5ea));
    background: color-mix(in srgb, var(--ok, #2f9e44) 8%, var(--paper, #fafafa));
    color: color-mix(in srgb, var(--ok, #2f9e44) 75%, var(--ink, #17191c));
}

/* Billing banner nad seznamem projektů klienta — vysvětluje, jak se fakturuje. */
.client-billing-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 16px;
    margin: 0 0 16px;
    border: 1px solid var(--line, #e5e5ea);
    border-left-width: 4px;
    border-radius: var(--radius-md, 10px);
    background: var(--paper, #fafafa);
    font-size: 13px;
    line-height: 1.45;
}

.client-billing-banner strong {
    font-size: 13.5px;
    font-weight: 640;
    color: var(--ink, #17191c);
    white-space: nowrap;
}

.client-billing-banner span {
    color: var(--ink-muted, #6e7075);
    min-width: 0;
}

.client-billing-banner span em {
    font-style: normal;
    font-weight: 600;
    color: var(--ink, #17191c);
}

.client-billing-banner a {
    color: var(--brand, #5b5bd6);
    font-weight: 540;
    text-decoration: none;
    white-space: nowrap;
}

.client-billing-banner a:hover {
    text-decoration: underline;
}

.client-billing-banner--fix {
    border-left-color: var(--brand, #5b5bd6);
    background: color-mix(in srgb, var(--brand, #5b5bd6) 4%, var(--paper, #fafafa));
}

.client-billing-banner--hourly {
    border-left-color: var(--ok, #2f9e44);
    background: color-mix(in srgb, var(--ok, #2f9e44) 4%, var(--paper, #fafafa));
}

.client-billing-banner--none {
    border-left-color: var(--line-strong, #d4d4d8);
}

@media (max-width: 720px) {
    .client-billing-banner {
        grid-template-columns: 1fr;
    }
    .client-billing-banner a {
        justify-self: start;
    }
}

/* ========== Google Ads účty ========== */
.ads-accounts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.ads-account {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-hover);
}

.ads-account-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.ads-account-head > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ads-account-head strong {
    font-size: 15px;
}

.ads-account-head .muted {
    color: var(--ink-muted);
    font-size: 12px;
}

.ads-account-head .muted.error {
    color: var(--danger-ink);
}

.ads-account-link {
    color: var(--ink-muted);
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 1px;
    transition: color 0.15s ease;
}

.ads-account-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.ads-account-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ads-account-ocid {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ads-account-ocid label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    flex: 1 1 260px;
    min-width: 0;
}

.ads-account-ocid label > span {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ads-account-ocid input[type="text"] {
    flex: 1;
    min-width: 180px;
    padding: 4px 8px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.9em;
}

.ads-account-ocid small {
    flex-basis: 100%;
    font-size: 0.78em;
    line-height: 1.4;
}

.ads-account-ocid small code {
    padding: 1px 5px;
    background: var(--panel-alt, rgba(0, 0, 0, 0.04));
    border-radius: 3px;
    font-size: 0.95em;
}

.change-meta-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.change-meta-link:hover {
    opacity: 1;
    color: var(--accent);
}

/* ========== Výběr účtů z MCC ========== */
.mcc-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}

.mcc-picker-head p {
    margin: 0;
    font-size: 13px;
    color: var(--ink-muted);
}

.mcc-picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.mcc-search {
    position: relative;
    margin: 0 0 10px;
}

.mcc-search input[type="search"] {
    width: 100%;
    padding: 10px 80px 10px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--panel);
    color: var(--ink);
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mcc-search input[type="search"]::placeholder {
    color: var(--ink-soft);
}

.mcc-search input[type="search"]:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.mcc-search-counter {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--ink-muted);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.mcc-empty-results {
    list-style: none;
    padding: 20px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-muted);
}

.mcc-account-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
}

.mcc-account {
    border-bottom: 1px solid var(--line);
}

.mcc-account:last-child {
    border-bottom: none;
}

.mcc-account label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.mcc-account label:hover {
    background: var(--panel-hover);
}

.mcc-account input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.mcc-account-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.mcc-account-info strong {
    font-size: 14px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcc-account-info .muted {
    font-size: 12px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.mcc-account.assigned label {
    cursor: default;
    opacity: 0.55;
}

.mcc-account.assigned label:hover {
    background: transparent;
}

.mcc-account-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--ink-muted);
    flex-shrink: 0;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

/* ========== Souhrn hromadných operací (change_status) ========== */
.change-status-summary {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.change-status-day {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    padding: 12px 16px;
}

.change-status-day-head {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.change-status-rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.change-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: baseline;
    font-size: 14px;
    line-height: 1.4;
}

.change-status-type {
    font-weight: 500;
    color: var(--ink);
    min-width: 180px;
    flex-shrink: 0;
}

.change-status-ops {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    color: var(--ink-muted);
}

.change-status-op strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.change-status-op-added strong {
    color: var(--ok, #1d9e4d);
}

.change-status-op-changed strong {
    color: var(--warn, #b26b00);
}

.change-status-op-removed strong {
    color: var(--danger, #b42318);
}

.change-status-sep {
    color: var(--line-strong);
    user-select: none;
}

@media (max-width: 700px) {
    .change-status-type {
        min-width: 0;
        width: 100%;
    }
}

/* ========== Historie změn ========== */
.change-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.change-month {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    overflow: hidden;
}

.change-month > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--ink);
    user-select: none;
    transition: background 0.15s ease;
}

.change-month > summary::-webkit-details-marker {
    display: none;
}

.change-month > summary::before {
    content: "▸";
    display: inline-block;
    font-size: 12px;
    color: var(--ink-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.change-month[open] > summary::before {
    transform: rotate(90deg);
}

.change-month > summary:hover {
    background: var(--panel-hover);
}

.change-month-label {
    flex: 1;
    font-size: 14px;
}

.change-month-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-muted);
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg-soft);
    font-variant-numeric: tabular-nums;
}

.change-month > .change-log {
    padding: 0 14px 14px;
    margin: 0;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.change-log {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.change-item {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--panel);
}

.change-marker {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    background: var(--bg-soft);
    color: var(--ink-muted);
    line-height: 1;
}

.change-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.change-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.change-title {
    font-size: 14px;
    color: var(--ink);
    font-weight: 600;
}

.change-subject {
    font-size: 13px;
    color: var(--ink-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.change-diff {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.change-value {
    padding: 3px 10px;
    border-radius: 6px;
    background: var(--bg-soft);
    color: var(--ink);
}

.change-value-old {
    color: var(--ink-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.change-value-new {
    font-weight: 600;
}

.change-arrow {
    color: var(--ink-soft);
    font-weight: 600;
}

.change-delta {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--ink-muted);
}

.change-meta {
    font-size: 12px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/* === Mood varianty === */
.change-item.change-mood-up {
    border-left-color: var(--ok-ink);
}
.change-item.change-mood-up .change-marker {
    background: var(--ok-soft);
    color: var(--ok-ink);
}
.change-item.change-mood-up .change-value-new {
    background: var(--ok-soft);
    color: var(--ok-ink);
}
.change-item.change-mood-up .change-delta {
    background: var(--ok-soft);
    color: var(--ok-ink);
}

.change-item.change-mood-down {
    border-left-color: var(--warning-ink);
}
.change-item.change-mood-down .change-marker {
    background: var(--warning-soft);
    color: var(--warning-ink);
}
.change-item.change-mood-down .change-value-new {
    background: var(--warning-soft);
    color: var(--warning-ink);
}
.change-item.change-mood-down .change-delta {
    background: var(--warning-soft);
    color: var(--warning-ink);
}

.change-item.change-mood-create {
    border-left-color: var(--info-ink);
}
.change-item.change-mood-create .change-marker {
    background: var(--info-soft);
    color: var(--info-ink);
}
.change-item.change-mood-create .change-value-new {
    background: var(--info-soft);
    color: var(--info-ink);
}

.change-item.change-mood-remove {
    border-left-color: var(--danger-ink);
}
.change-item.change-mood-remove .change-marker {
    background: var(--danger-soft);
    color: var(--danger-ink);
}

.notice {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--warning-soft);
    color: var(--warning-ink);
    font-size: 13px;
    border: 1px solid rgba(217, 119, 6, 0.2);
    margin-bottom: 12px;
}

/* Honeypot — pole musí být v DOMu, ale neviditelné pro lidi.
   display:none ne — některé boty to umí ignorovat. Místo toho off-screen. */
.honeypot-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* ========== Privacy sidebar (klient/projekt workspace) ========== */
.sidebar-back {
    padding: 2px 4px;
}

.sidebar-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-muted);
    font-size: 12.5px;
    font-weight: 560;
    letter-spacing: -0.005em;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-back-link:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-ink);
}

.sidebar-back-link svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}

.sidebar-workspace {
    display: grid;
    gap: 16px;
    padding: 4px;
}

.sidebar-workspace-head {
    display: grid;
    gap: 6px;
    padding: 6px 8px 14px;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-workspace-head .eyebrow {
    color: var(--sidebar-muted);
    margin: 0 0 2px;
    font-size: 10px;
}

.sidebar-workspace-name {
    color: var(--sidebar-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    word-break: break-word;
    transition: color 0.12s ease;
}

.sidebar-workspace-name:hover {
    color: #ffffff;
}

.sidebar-workspace-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 680;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.08);
    color: var(--sidebar-muted);
}

.sidebar-workspace-status-active {
    background: rgba(15, 123, 74, 0.18);
    color: #7ed4a2;
}

.sidebar-workspace-status-paused {
    background: rgba(217, 119, 6, 0.18);
    color: #f4c27e;
}

.sidebar-workspace-status-archived {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sidebar-muted);
}

.sidebar-client-nav {
    display: grid;
    gap: 2px;
    padding: 0 4px;
}

.sidebar-client-nav .nav-link {
    padding: 8px 10px;
}

.sidebar-projects-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 10px 4px;
    color: var(--sidebar-muted);
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar-projects-head span {
    font-variant-numeric: tabular-nums;
    color: var(--sidebar-muted);
    font-weight: 580;
}

.sidebar-projects {
    display: grid;
    gap: 2px;
    padding: 0 4px;
    max-height: calc(100svh - 420px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.sidebar-projects::-webkit-scrollbar {
    width: 6px;
}

.sidebar-projects::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.sidebar-project {
    /* Inherits .nav-link: display flex, padding 9px 10px, font-size 13.5 */
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    font-weight: 540;
}

.sidebar-project > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sidebar-project::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    transition: background 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
}

.sidebar-project.active::before {
    opacity: 1;
    background: var(--brand);
    box-shadow: 0 0 0 3px rgba(91, 91, 214, 0.25);
}

.sidebar-project.is-paused::before {
    background: var(--warning);
    opacity: 0.85;
}

.sidebar-project.is-archived {
    opacity: 0.6;
}

.sidebar-project.is-archived::before {
    opacity: 0.3;
}

.sidebar-new-project {
    /* Inherits .nav-link, stylizováno jako jemný ghost button */
    margin-top: 6px;
    border: 1px solid var(--sidebar-border);
    background: transparent;
    font-size: 12.5px;
    font-style: normal;
    color: var(--ink-2);
    font-weight: 500;
}

.sidebar-new-project:hover {
    background: var(--sidebar-hover);
    border-color: var(--ink-3);
    color: var(--ink);
}

.sidebar-new-project svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    min-height: 14px;
}

.sidebar-empty {
    padding: 10px;
    color: var(--sidebar-muted);
    font-size: 12.5px;
    font-style: italic;
}

.sidebar-switch {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-switch-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-muted);
    font-size: 12.5px;
    font-weight: 560;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-switch-link:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-ink);
}

.sidebar-switch-link svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}

body.is-privacy .sidebar {
    gap: 18px;
}

/* ========== Fakturace (global invoicing page) ========== */
.invoicing-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.invoicing-month-nav .button {
    font-size: 13px;
    padding: 8px 14px;
}

.invoicing-panel {
    display: grid;
    gap: 10px;
}

.invoicing-row {
    display: grid;
    grid-template-columns: 44px minmax(220px, 1.6fr) minmax(200px, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.invoicing-row:hover {
    border-color: var(--line-strong);
}

.invoicing-row.is-pending {
    border-left: 3px solid var(--warning);
}

.invoicing-row.is-sent {
    border-left: 3px solid var(--ok);
    background: linear-gradient(90deg, rgba(15, 123, 74, 0.05), transparent 40%);
}

.invoicing-row.is-skipped {
    border-left: 3px solid var(--ink-soft);
    opacity: 0.72;
}

.invoicing-row-marker {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-soft);
    color: var(--ink-muted);
    font-size: 18px;
    font-weight: 700;
}

.invoicing-row.is-pending .invoicing-row-marker {
    background: var(--warning-soft);
    color: var(--warning-ink);
}

.invoicing-row.is-sent .invoicing-row-marker {
    background: var(--ok-soft);
    color: var(--ok-ink);
}

.invoicing-row.is-skipped .invoicing-row-marker {
    background: var(--bg-soft);
    color: var(--ink-soft);
}

.invoicing-row-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.invoicing-row-client {
    font-size: 14.5px;
    font-weight: 640;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoicing-row-client:hover {
    color: var(--brand);
}

.invoicing-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-muted);
}

.invoicing-row-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.invoicing-sent-label {
    color: var(--ok-ink);
    font-weight: 580;
}

.invoicing-row-note {
    display: grid;
    min-width: 0;
}

.invoicing-row-note input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    font-size: 12.5px;
}

.invoicing-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.invoicing-row-actions form {
    margin: 0;
}

.invoicing-row-actions button {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 580;
}

/* ========== Kalendář projektu ========== */
.calendar-head {
    margin-bottom: 18px;
}

.calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.calendar-nav .button {
    font-size: 12.5px;
    padding: 7px 12px;
}

.calendar-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.calendar-day {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 12px 4px;
    border-top: 1px solid var(--line);
}

.calendar-day:first-child {
    border-top: none;
    padding-top: 4px;
}

.calendar-day-head {
    display: grid;
    gap: 2px;
    text-align: right;
    padding-top: 2px;
}

.calendar-day-number {
    font-size: 22px;
    font-weight: 720;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.calendar-day-label {
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

.calendar-day.is-today .calendar-day-number {
    color: var(--brand);
}

.calendar-day.is-today .calendar-day-label {
    color: var(--brand);
}

.calendar-day-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.calendar-item {
    position: relative;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-soft);
    border-radius: var(--radius-sm);
    background: var(--panel);
    font-size: 13px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.calendar-item:hover {
    border-color: var(--line-strong);
    background: var(--panel-hover);
}

.calendar-item > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    color: inherit;
}

.calendar-item > a:hover {
    color: inherit;
}

.calendar-item strong {
    font-weight: 620;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.calendar-item > a > span {
    font-size: 11px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--bg-soft);
    font-weight: 640;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Calendar moods */
.calendar-item.mood-todo {
    border-left-color: var(--warning);
}

.calendar-item.mood-todo > a > span {
    background: var(--warning-soft);
    color: var(--warning-ink);
}

.calendar-item.mood-done {
    border-left-color: var(--ok);
    background: linear-gradient(90deg, rgba(15, 123, 74, 0.05), transparent 60%);
}

.calendar-item.mood-done > a > span {
    background: var(--ok-soft);
    color: var(--ok-ink);
}

.calendar-item.mood-done strong {
    color: var(--ink-muted);
    text-decoration: line-through;
    text-decoration-color: var(--ink-soft);
}

.calendar-item.mood-launch {
    border-left-color: var(--brand);
}

.calendar-item.mood-launch > a > span {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.calendar-item.mood-milestone {
    border-left-color: var(--teal);
}

.calendar-item.mood-milestone > a > span {
    background: var(--teal-soft);
    color: var(--teal-strong);
}

.calendar-item.mood-maintenance {
    border-left-color: var(--info);
}

.calendar-item.mood-maintenance > a > span {
    background: var(--info-soft);
    color: var(--info-ink);
}

.calendar-item.mood-issue {
    border-left-color: var(--danger);
}

.calendar-item.mood-issue > a > span {
    background: var(--danger-soft);
    color: var(--danger-ink);
}

.calendar-item.mood-note {
    border-left-color: var(--ink-soft);
}

.calendar-item.mood-ads {
    border-left-color: var(--info);
    background: linear-gradient(90deg, rgba(35, 131, 226, 0.04), transparent 60%);
}

.calendar-item.mood-ads > a > span {
    background: var(--info-soft);
    color: var(--info-ink);
}

/* Schůzky — fialová (vysoce viditelné, nepřekrývá se s ostatními typy) */
.calendar-item.mood-meeting {
    border-left-color: #8b5cf6;
}

.calendar-item.mood-meeting > a > span {
    background: #ede9fe;
    color: #5b21b6;
}

/* Calls — modrá s telefonní vibe */
.calendar-item.mood-call {
    border-left-color: #0ea5e9;
}

.calendar-item.mood-call > a > span {
    background: #e0f2fe;
    color: #075985;
}

/* Roční pohled — oddělovač měsíců */
.calendar-month-block {
    margin-bottom: 28px;
}
.calendar-month-block:last-child {
    margin-bottom: 0;
}
.calendar-month-title {
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.calendar-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--ink-muted);
    font-size: 13px;
    font-style: italic;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-soft);
}

/* ========== Milníky projektu ========== */
.milestone-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.milestone-item {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-soft);
    border-radius: var(--radius-md);
    background: var(--panel);
    transition: border-color 0.15s ease;
}

.milestone-item:hover {
    border-color: var(--line-strong);
}

.milestone-item > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.milestone-item > header strong {
    font-size: 14.5px;
    font-weight: 640;
    color: var(--ink);
    letter-spacing: -0.005em;
}

.milestone-item > header .muted {
    font-size: 11.5px;
    font-weight: 580;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.milestone-item > p {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.milestone-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: flex-start;
}

.milestone-actions form {
    margin: 0;
}

.milestone-edit {
    position: relative;
}

.milestone-edit > summary {
    cursor: pointer;
    list-style: none;
}

.milestone-edit > summary::-webkit-details-marker {
    display: none;
}

.milestone-edit[open] > summary {
    background: var(--surface-raised, #f4f5f7);
}

.milestone-edit-body {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--surface-soft, rgba(0, 0, 0, 0.02));
}

.milestone-edit-body form {
    margin: 0;
}

/* When edit details is open, expand to full width so form is readable */
.milestone-item:has(.milestone-edit[open]) {
    grid-template-columns: 1fr;
}

/* Milestones share the mood-* classes with calendar items */
.milestone-item.mood-launch {
    border-left-color: var(--brand);
}

.milestone-item.mood-milestone {
    border-left-color: var(--teal);
}

.milestone-item.mood-maintenance {
    border-left-color: var(--info);
}

.milestone-item.mood-issue {
    border-left-color: var(--danger);
}

.milestone-item.mood-note {
    border-left-color: var(--ink-soft);
}

/* ========== Button variant ========== */
.ghost.small,
button.small {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 560;
}

/* ========== Privacy sidebar / Phase 2 responsive ========== */
@media (max-width: 900px) {
    body.is-privacy .sidebar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .sidebar-projects {
        max-height: none;
        grid-auto-flow: row;
    }

    .sidebar-client-nav {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .sidebar-switch {
        margin-top: 6px;
        padding-top: 10px;
    }

    /* OBSOLETE (květen 2026) — staré rules pro starou Dashboard `.invoice-row`
       (s markerem/main/note/actions). Per-project Fakturace `.invoicing-row` má
       jiné členění a řeší se v @media (max-width: 1339px). */

    .calendar-day {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 12px;
    }

    .calendar-day-number {
        font-size: 18px;
    }

    .milestone-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .milestone-actions {
        justify-content: flex-end;
    }
}

/* ── Dropdown "Nový projekt" v page-head-actions ─────────────────────────── */
.new-item-dropdown {
    position: relative;
}

/* Vizuál přes .button.primary – jen reset markeru */
.new-item-dropdown > summary {
    white-space: nowrap;
}

.new-item-dropdown-body {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 460px;
    z-index: 300;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    border-radius: 12px;
    padding: 20px 24px;
}

@media (max-width: 600px) {
    .new-item-dropdown-body {
        position: fixed;
        left: 16px;
        right: 16px;
        width: auto;
        top: auto;
        bottom: 16px;
    }
}

/* ── Sidebar – časovač running indikátor ─────────────────────────────────── */
.nav-link.timer-running {
    color: var(--ok-ink);
}

.nav-link.timer-running span {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.nav-link.timer-running svg {
    color: var(--ok);
}

/* ── Sidebar timer badge (číslo za "Čas" v navigaci) ────────────────────── */
.nav-timer-badge {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--ok);
    font-weight: 650;
}

.nav-link.timer-running {
    color: var(--ok-ink);
}

.nav-link.timer-running svg {
    color: var(--ok);
}

/* ── Timer widget v formuláři ────────────────────────────────────────────── */
.timer-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    margin-bottom: 4px;
}

.timer-widget-display {
    font-size: 32px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--ink-soft);
    line-height: 1;
    transition: color 0.2s;
    font-feature-settings: "tnum";
}

.timer-widget.is-running .timer-widget-display {
    color: var(--brand);
}

.timer-widget.is-paused .timer-widget-display {
    color: var(--warning-ink);
}

.timer-widget.is-finished .timer-widget-display {
    color: var(--ok-ink);
}

.timer-widget-controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.timer-btn {
    min-width: 130px;
}

/* ── Date range filter (presetové rychlé filtry) ─────────────────────────── */
.date-range-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.preset-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preset-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--panel);
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.preset-link:hover {
    border-color: var(--brand);
    color: var(--brand-strong);
    background: var(--brand-soft);
}

.preset-link.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.date-range-custom {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.date-range-custom input[type="date"] {
    width: auto;
    min-width: 128px;
    padding: 6px 10px;
    font-size: 13px;
}

/* Součtový řádek pod záznamy */
.time-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 2px;
    margin-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-muted);
}

.time-total-row strong {
    color: var(--ink);
}

.time-cost {
    color: var(--ok-ink);
    font-size: 13px;
}

.time-cost strong {
    color: var(--ok-ink);
}

.time-cost small {
    font-weight: 450;
    opacity: 0.75;
}

/* ── Navigace měsíce (stránka Čas) ──────────────────────────────────────── */
.month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.month-nav form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.month-nav input[type="month"] {
    width: auto;
    min-width: 130px;
    padding: 8px 12px;
    font-size: 13px;
}

.month-nav .button {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 0;
}

.button.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Toggl-style time-row ────────────────────────────────────────────────── */
.time-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.time-field {
    width: 118px;
    min-height: 0;
    padding: 7px 8px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    font-size: 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.time-sep {
    color: var(--ink-soft);
    font-size: 16px;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}

/* Ikonové tlačítko pro otevření datepickeru (volá showPicker() přes JS) */
.date-picker-trigger {
    color: var(--ink-muted);
}

.date-picker-trigger:hover {
    color: var(--brand-strong);
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* Skrytý nativní date input (showPicker() ho otevře programaticky) */
.date-picker-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Trvání – editovatelné pole, vizuálně prominentní */
input.duration-field {
    width: 96px;
    min-width: 80px;
    padding: 7px 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    font-size: 15px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--ink);
}

/* Malá ikonová tlačítka (▶ ⏸ ■ ↺) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    box-shadow: var(--shadow-xs);
}

.icon-btn:hover {
    transform: translateY(-1px);
}

.icon-btn:active {
    transform: translateY(0);
}

/* ▶ Spustit / ▶ Pokračovat */
.icon-btn-run {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.icon-btn-run:hover {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
    color: #fff;
}

/* ⏸ Pauza */
.icon-btn-pause {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
}

.icon-btn-pause:hover {
    background: var(--warning-ink);
    border-color: var(--warning-ink);
    color: #fff;
}

/* ■ Zastavit */
.icon-btn-stop {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.icon-btn-stop:hover {
    background: var(--danger-ink);
    border-color: var(--danger-ink);
    color: #fff;
}

/* ↺ Nový */
.icon-btn-new {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink-muted);
}

.icon-btn-new:hover {
    border-color: var(--brand);
    color: var(--brand-strong);
    background: var(--brand-soft);
}

/* Stavy time-row */
.time-row.is-running .time-field,
.time-row.is-running input.duration-field {
    border-color: var(--brand);
}

.time-row.is-paused .time-field,
.time-row.is-paused input.duration-field {
    border-color: var(--warning);
}

.time-row.is-finished .time-field,
.time-row.is-finished input.duration-field {
    border-color: var(--ok);
}

/* ── Správa souborů ──────────────────────────────────────────────────────── */
.file-upload-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-drop-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 20px;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    /* reset label defaults */
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-muted);
    position: relative;
}

.file-drop-label:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-strong);
}

.file-drop-label:has(.file-input:focus) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.file-drop-icon {
    color: var(--ink-soft);
}

.file-drop-text {
    font-size: 14px;
    font-weight: 550;
    color: var(--ink);
}

.file-drop-hint {
    font-size: 12px;
    color: var(--ink-soft);
    text-align: center;
}

.file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.file-row:last-child {
    border-bottom: none;
}

.file-type-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-name {
    font-weight: 550;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-name:hover {
    color: var(--brand);
}

.file-meta {
    font-size: 12px;
    color: var(--ink-soft);
}
.file-project-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    margin-left: 2px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: oklch(96% 0.01 240);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.file-project-badge:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.file-project-badge--unassigned {
    color: var(--ink-soft);
    border-style: dashed;
    background: transparent;
    font-style: italic;
    font-weight: 500;
}
.file-project-badge--unassigned:hover {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--line);
    cursor: default;
}

.file-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

/* ══════════════════════════════════════════════════════════════════════
   Editorial / magazine utilities & overrides
   ══════════════════════════════════════════════════════════════════════ */

.mono { font-family: var(--f-mono); }
.serif { font-family: var(--f-display); }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-4); }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Kicker — uppercase mono label nad nadpisy */
.kicker {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: 500;
}

/* Rule label — horizontální linka s popiskem (editoriální sekce divider) */
.rule-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 14px;
}
.rule-label > span:first-child {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-4);
    font-weight: 500;
}
.rule-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rule);
}

/* Inputy, select, textarea — vizuál (šířku 100% jen uvnitř <label>) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="search"],
select,
textarea {
    padding: 9px 12px;
    font-size: 14px;
    font-family: var(--f-ui);
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 3px;
    outline: none;
    color: var(--ink);
    transition: border-color 0.15s ease;
}

/* Inputy uvnitř <label> (běžný form pattern) zabírají celou šířku.
   Checkbox + radio jsou explicitně vyňaté — mají natural velikost (~16px),
   width: 100% by je roztáhlo přes celou rodičovskou kolonu a rozbilo
   layout (např. multi-select v Inboxu úkolů). */
label > input:not([type="checkbox"]):not([type="radio"]),
label > select,
label > textarea {
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ink-3);
    outline: none;
    box-shadow: none;
}

textarea {
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
}

/* Small button modifier — malé tlačítko v editoriálu */
.button.small,
button.small,
.ghost.small,
a.small {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
}

/* Ghost button — transparent */
.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ink-3);
    box-shadow: none;
}
.ghost:hover {
    background: var(--paper-2);
    border-color: transparent;
    color: var(--ink);
}

/* Chip — editorial pill s colored dot */
.tile-status,
.chip,
.billing-badge,
.page-tab-badge,
.nav-count,
.nav-timer-badge {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}
.tile-status,
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    line-height: 1.4;
    background: var(--paper-2);
    color: var(--ink-2);
    border: 1px solid transparent;
    font-family: var(--f-ui);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    width: max-content;
    max-width: 100%;
}

/* Status pills s barevným tečkou vlevo */
.tile-status-active,
.tile-status-paused,
.tile-status-archived {
    background: var(--paper-2);
    color: var(--ink-2);
}
.tile-status-active::before,
.tile-status-paused::before,
.tile-status-archived::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tile-status-active::before   { background: var(--good); }
.tile-status-paused::before   { background: var(--warn); }
.tile-status-archived::before { background: var(--ink-4); }

/* ── Client / Project tiles — card grid ───────────────────────────── */
.client-grid,
.project-grid,
.projects-global {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.client-tile,
.project-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.15s ease, background 0.15s ease;
    min-width: 0;
}
.client-tile:hover,
.project-tile:hover {
    background: var(--paper);
    border-color: var(--rule);
    transform: none;
    box-shadow: none;
}
.client-tile > .tile-status,
.project-tile > .tile-status {
    align-self: flex-start;
}
.client-tile strong,
.project-tile strong {
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--ink);
    line-height: 1.3;
}
.client-tile em,
.project-tile em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--ink-3);
    letter-spacing: 0;
}
.client-tile small,
.project-tile small {
    font-family: var(--f-ui);
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
    line-height: 1.45;
}
.tile-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tile-client-badge {
    font-size: 11.5px;
    color: var(--ink-3);
    background: var(--paper-2);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.client-item,
.project-item {
    position: relative;
    min-width: 0;
}
/* Drag handle je absolutně pozicovaný overlay (stará konvence) — nebojuj s gridem. */
.client-item > .drag-handle,
.project-item > .drag-handle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: var(--ink-4);
    cursor: grab;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    background: transparent;
    border: 0;
    z-index: 2;
}
.client-item:hover > .drag-handle,
.project-item:hover > .drag-handle {
    opacity: 1;
}
/* `padding-right: 36px` byl historicky kvůli drag-handle (top-right overlay).
   Drag-handle byl odstraněn — feature se nepoužívá — takže pravý padding
   už není potřeba a obsah dlaždice se zarovná normálně. */

/* Task row — tighter editorial (OPT 4 — vyšší hustota).
   Task-row je teď flex-column (hlavička + edit panel), takže align-items by
   centroval children horizontálně — nechceme. */
.task-row {
    background: var(--card);
    border: 0;
    border-bottom: 1px solid var(--rule-soft);
    border-radius: 0;
    padding: 10px 14px 10px 24px;
    box-shadow: none;
    transition: background 0.15s ease;
}
.task-row:hover {
    border-color: var(--rule-soft);
    background: var(--paper);
    box-shadow: none;
    transform: none;
}
.task-row::before {
    left: 2px;
    width: 3px;
    top: 10px;
    bottom: 10px;
}
.task-head-info .row-title {
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.task-head-info .muted {
    font-family: var(--f-ui);
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}
.task-head-info p + p {
    margin-top: 2px;
}
/* Edit details — zatím schované, nezabírá místo */
.task-edit {
    margin-top: 6px;
}
.task-edit > summary {
    font-size: 11px;
    color: var(--ink-3);
    padding: 2px 0;
    cursor: pointer;
}
.task-edit > summary:hover {
    color: var(--ink);
}

/* Time entries (editoriálně) */
.time-entry {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft);
    background: transparent;
}
.time-entry > div > strong {
    font-family: var(--f-display);
    font-size: 15.5px;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.time-entry > div > span {
    font-family: var(--f-mono);
    font-size: 11.5px;
    color: var(--ink-3);
}

/* Date range filter — editorial chips */
.preset-link {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.preset-link:hover {
    border-color: var(--ink-3);
    color: var(--ink);
}
.preset-link.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* Editorial scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--rule);
    border-radius: 10px;
    border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* Billing fieldset — editorial frame */
.billing-fieldset {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: 16px 20px 20px;
    background: var(--paper);
}
.billing-fieldset legend {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-4);
    padding: 0 8px;
}

/* Invoicing — editorial rows */
.invoicing-client-name {
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 6px;
}
.invoicing-row {
    border-radius: var(--radius-md);
    border: 1px solid var(--rule-soft);
    background: var(--card);
}
.invoicing-row-client {
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.005em;
}
.billing-badge {
    font-family: var(--f-mono);
    letter-spacing: 0.06em;
    font-weight: 500;
}

/* Skrytí dropdown arrow markeru u <details> summary tam, kde to chceme čistě */
details.add-panel > summary,
details.new-item-dropdown > summary {
    list-style: none;
}
details.add-panel > summary::-webkit-details-marker,
details.new-item-dropdown > summary::-webkit-details-marker {
    display: none;
}

/* Flash zprávy — mono kicker + decentní výplň */
.flash {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
    background: var(--paper);
    font-size: 13px;
}
.flash.flash-success,
.flash.flash-ok {
    border-color: color-mix(in oklch, var(--good) 30%, var(--rule));
    background: color-mix(in oklch, var(--good) 6%, var(--card));
    color: color-mix(in oklch, var(--good) 60%, var(--ink));
}
.flash.flash-error,
.flash.flash-danger {
    border-color: color-mix(in oklch, var(--danger) 30%, var(--rule));
    background: color-mix(in oklch, var(--danger) 6%, var(--card));
    color: color-mix(in oklch, var(--danger) 60%, var(--ink));
}

/* ══════════════════════════════════════════════════════════════════════
   Globální OVERFLOW safety — prevence přepadávání obsahu
   ══════════════════════════════════════════════════════════════════════ */

/* Základ: nic nepřesahuje obrazovku */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* HTML5 [hidden] atribut má vždy přednost — kvůli button { display: inline-flex } */
[hidden] {
    display: none !important;
}

/* Duplicate form — date + button as a grouped unit */
form.dup-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--paper);
}
form.dup-form input[type="date"] {
    border: 0;
    background: transparent;
    padding: 4px 6px;
    font-size: 12px;
    min-height: 24px;
    color: var(--ink-2);
}
form.dup-form button {
    min-height: 26px;
    padding: 2px 10px;
    font-size: 12px;
    border: 0;
    background: var(--card);
}

/* Panel a sections — povol shrinkování v grid/flex parents.
   `min-width: 0` je nutné, aby flex/grid items mohly být menší než content size
   (jinak by je dlouhý text rozpíchal mimo viewport).
   `max-width: 100%` SCHVÁLNĚ NENASTAVUJEME — způsobuje, že .panel uvnitř
   úzkého popoveru (např. "+ Nový projekt" v Projektech) zdědí omezení
   a zploští se na ~30 px šířku. Popovery si vlastní šířku řeší samy. */
.panel,
.section-head,
.page-head {
    min-width: 0;
}

/* Všechny přímé potomky grid kontejnerů musí umět zmenšit se pod content size */
.form-grid > *,
.two-column > *,
.three-column > *,
.metric-strip > *,
.invoice-row > *,
.invoicing-row > *,
.task-row > *,
.time-entry > *,
.link-row > *,
.file-row > *,
.client-tile,
.project-tile {
    min-width: 0;
}

/* Dlouhé texty / URL / code → zalomit (ne chipy, badges, pily) */
p, td, li, dt, dd {
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* A dlouhé URL / e-maily v odkazech */
a[href*="://"],
.file-name,
code {
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* Tabulky:
   - Default zachováme `display: table` (browser default), aby <colgroup>/<tbody>
     fungovaly korektně a width: 100% se opravdu roztáhl na celou šířku rodiče.
   - Pokud konkrétní tabulka má širší obsah a potřebuje horizontální scroll
     na malých šířkách, obal ji do `<div class="table-scroll">`.
   Předchozí globální `display: block` u tabulek znemožňoval roztažení tabulek
   na full-width (table layout vypnutý → cell se neroztáhly). */
table {
    max-width: 100%;
    border-collapse: collapse;
}
.table-scroll {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    /* Subtle fade indicator vpravo — naznačí scrollovatelnost */
    background:
        linear-gradient(90deg, transparent calc(100% - 32px), rgba(255,255,255,0.85)) right center / 100% 100% no-repeat;
}
.table-scroll table {
    /* Tabulka se roztáhne podle obsahu, ne se zmenší pod rodiče.
       min-width 100% pro případ malé tabulky — zachová full-width vzhled. */
    width: max-content;
    min-width: 100%;
}

/* Inputy a textarea neděsí layout ani dlouhým obsahem */
input, select, textarea {
    max-width: 100%;
    min-width: 0;
}

/* Pre + code bloky */
pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Obrázky */
img, svg {
    max-width: 100%;
    height: auto;
}

/* Flex kontejnery často způsobují overflow — zajistíme min-width: 0 globálně */
.page-head > *,
.section-head > *,
.form-grid > label > *,
.tabbar > *,
.tile-meta-row > *,
.nav > *,
.task-head-controls > *,
.time-entry-actions > *,
.file-actions > *,
.client-contact-line > * {
    min-width: 0;
}

/* Workspace wrapper - bezpečná hranice */
.workspace {
    overflow-x: hidden;
}

/* Tabbar (header tabs na Úkolech, ...) — scrollable když se nevejde */
.tabbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
}

/* Ikony by neměly přetékat své tlačítko */
button svg,
.button svg {
    flex-shrink: 0;
}

/* Date range filter zůstane responsive */
.date-range-filter {
    flex-wrap: wrap;
}
.preset-links {
    flex-wrap: wrap;
}

/* OBSOLETE (květen 2026) — staré pravidlo „stackni do jednoho sloupce při <820px".
   Nahrazeno plnohodnotným responzivním kartovým layoutem v @media (max-width: 1339px). */

/* ─────────────────────────────────────────────────────────────────────────
   Fakturace — kartové responzivní rozložení (vše pod desktopem)
   Desktopová 11-sloupcová tabulka má minimum ~1246px. Pod hranicí 1280px
   se přepneme do kartového layoutu — žádný horizontální scroll, všechno
   se vlezne do viewportu, ať už na malém laptopu, tabletu, nebo telefonu.
   Layout:
     ┌────────────────────────────────────────────┐
     │ [☑] Project name · client · badges    [G ▾]│  ← 1. řádek
     │ 14 000 Kč  · 8h                            │  ← 2. řádek (data)
     │ Poznámka (responzivní full-width)          │  ← 3. řádek
     │ ⏳ Čeká | ✓ Odesláno | — Přeskočit | ↗ G   │  ← 4. řádek (G-faktura)
     └────────────────────────────────────────────┘
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1499px) {
    /* 0. KRITICKÉ — override pravidla z @media (max-width: 1380px), které nutilo
          .invoicing-row na min-width: 1340px. Tahle hranice (1499px) je těsně
          pod minimální šířkou desktopové 11-sloupcové tabulky — od ní níž
          přepínáme na kartové rozložení a žádný horizontální scroll už není
          potřeba.
          2026-05-11: posunuto z 1339 → 1499 protože tabulka má min ~1280 px content,
          ale viewport content (po odečtení sidebar 250 px + paddingu) bývá užší.
          Bezpečně přepínáme na karty pro všechny laptopy s ≤14" displejem. */
    .invoicing-panel {
        overflow-x: hidden !important;
    }
    .invoicing-panel .invoicing-table-head,
    .invoicing-panel .invoicing-row,
    .invoicing-panel .invoicing-client-group {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* 1. Skryj hlavičku tabulky — bez gridu nedává smysl */
    .invoicing-panel .invoicing-table-head { display: none !important; }

    /* 2. Sám řádek = 2-sloupcový grid: vlevo všechny detaily (název, hours,
          leady, G-faktura), vpravo nahoře checkbox + pod ním cena. Tím využijeme
          prostor lépe než flex column s prázdným pravým bokem. */
    .invoicing-panel .invoicing-row {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        column-gap: 14px !important;
        row-gap: 6px !important;
        padding: 10px 14px !important;
        position: relative;
        margin: 0 0 8px !important;
        max-width: 100% !important;
        width: 100%;
        box-sizing: border-box !important;
        overflow-x: hidden;
        min-width: 0;
        align-items: start !important;
    }

    /* 3. Všechny přímí potomci karty MUSÍ mít min-width: 0 (jinak grid jim dovolí
          nepřetékat) a max-width: 100%. */
    .invoicing-panel .invoicing-row > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 4. Checkbox: pravý sloupec, NAHOŘE. Span přes všechny řádky aby zarovnání
          fungovalo i když jiný element (cena) má align-self: end. */
    .invoicing-panel .invoicing-row-check {
        grid-column: 2 !important;
        grid-row: 1 / -1 !important;
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        justify-self: end;
        align-self: start;
    }
    .invoicing-panel .invoicing-row-check input {
        width: 18px !important;
        height: 18px !important;
    }

    /* 5. Název projektu/klienta — levý sloupec, první řádek. Žádný padding-right
          (checkbox není absolute, je v gridu). */
    .invoicing-panel .invoicing-row-name {
        grid-column: 1 !important;
        grid-row: 1 !important;
        gap: 4px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
    }
    .invoicing-panel .invoicing-row-link {
        font-size: 14.5px !important;
        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }
    .invoicing-panel .invoicing-row-badges {
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    /* 5. Skryj duplicitní Od/Do date pickery — pro fix klienty default 1.–posl. v měsíci,
          pro hodinovku jsou stejně disabled. Datum se ukáže textem v Result řádku. */
    .invoicing-panel .invoicing-row-date {
        display: none !important;
    }

    /* 6. Skryj sazbu (Fix) — duplicita s Result amount */
    .invoicing-panel .invoicing-row-fix {
        display: none !important;
    }

    /* 7. Result amount — PRAVÝ SLOUPEC, DOLE. Span přes všechny řádky se zarovnáním
          na konec (align-self: end). Tak je cena na stejné vertikální pozici jako
          G-faktura buttons vlevo dole.

          Checkbox + cena oba span 1/-1 ale s opačným align-self → checkbox start, cena end. */
    .invoicing-panel .invoicing-row-result {
        grid-column: 2 !important;
        grid-row: 1 / -1 !important;
        align-self: end;
        justify-self: end;
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        padding: 0 !important;
        font-weight: 700;
        text-align: right;
        white-space: nowrap;
    }
    .invoicing-panel .invoicing-row-result strong {
        font-size: 17px;
        line-height: 1.1;
    }
    .invoicing-panel .invoicing-row-result small {
        font-size: 10.5px;
        font-weight: 500;
        opacity: 0.8;
    }
    /* Days úplně schovat — informace "31 dnů v měsíci" je k ničemu v kartě.
       Hodinovka má vlastní manual_hours input → zachovám viditelnost. */
    .invoicing-panel .invoicing-row.is-type-fix .invoicing-row-days,
    .invoicing-panel .invoicing-row.is-type-hourly .invoicing-row-days .muted,
    .invoicing-panel .invoicing-row:not(.is-type-fix):not(.is-type-hourly) .invoicing-row-days {
        display: none !important;
    }
    /* Hourly: hours input pod názvem (levý sloupec, druhý řádek) */
    .invoicing-panel .invoicing-row.is-type-hourly .invoicing-row-days {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: block !important;
        padding: 0 !important;
        width: 100%;
    }
    .invoicing-panel .invoicing-row-manual-hours {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
    }
    .invoicing-panel .invoicing-row-manual-hours input {
        flex: 1;
        max-width: 140px;
        padding: 6px 10px !important;
        font-size: 13px;
    }
    .invoicing-panel .invoicing-row-manual-hours-hint {
        font-size: 11px !important;
        color: var(--ink-3);
    }
    /* Leads — disabled úplně schovat, aktivní zobrazit kompaktně v levém sloupci */
    .invoicing-panel .invoicing-row-leads.is-disabled {
        display: none !important;
    }
    .invoicing-panel .invoicing-row-leads {
        grid-column: 1 !important;
        grid-row: 3 !important;
        display: flex !important;
        align-items: center;
        gap: 6px;
        padding: 0 !important;
        width: 100%;
    }
    .invoicing-panel .invoicing-row-leads input {
        flex: 1;
        min-width: 0;
        max-width: 140px;
        padding: 6px 10px !important;
        font-size: 13px;
    }
    .invoicing-panel .invoicing-row-leads-hint {
        font-size: 11px !important;
        color: var(--ink-3);
    }

    /* 8. Poznámka — full-width input, responsive. Když je prázdný, je dashed
          a tenký, na fokus se rozsvítí. */
    .invoicing-panel .invoicing-row-note {
        order: 3;
        margin: 0 !important;
        width: 100%;
        display: block !important;
    }
    .invoicing-panel .invoicing-row-note input[type="text"] {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        padding: 6px 10px !important;
        font-size: 12.5px;
        min-height: 30px;
        height: 30px;
        background: transparent;
        border: 1px dashed var(--rule);
        border-radius: var(--radius-sm, 6px);
    }
    .invoicing-panel .invoicing-row-note input[type="text"]:focus {
        background: #fff;
        border-style: solid;
        border-color: var(--accent, #5b5bd6);
    }

    /* 9. G-faktura widget: levý sloupec, čtvrtý řádek. Kompaktní pill buttons + labely. */
    .invoicing-panel .invoicing-row-ginvoice {
        grid-column: 1 !important;
        grid-row: 4 !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        overflow: visible !important;
    }
    .invoicing-panel .invoicing-row-ginvoice .invoice-status-btn {
        min-height: 28px !important;
        padding: 4px 8px !important;
        gap: 3px !important;
    }
    .invoicing-panel .invoicing-row-ginvoice .invoice-status-btn .btn-icon {
        font-size: 11px !important;
    }
    /* V cardovém layoutu mají labely smysl — máme dost prostoru pod jménem */
    .invoicing-panel .invoicing-row-ginvoice .invoice-status-btn .btn-label {
        font-size: 10.5px !important;
        display: inline !important;
    }
    .invoicing-panel .invoicing-row-ginvoice.is-empty {
        display: none !important;
    }
    .invoicing-panel .invoicing-gads-link {
        font-size: 11px !important;
        padding: 3px 6px !important;
    }

    /* 10. Saved indicator — schovat na mobile (užitečný hlavně na desktopu) */
    .invoicing-panel .invoicing-row-saved {
        display: none !important;
    }
}

/* Ještě užší obrazovky (<480px, malé telefony) — ještě těsnější */
@media (max-width: 480px) {
    .invoicing-panel .invoicing-row {
        padding: 8px 10px 8px 12px !important;
    }
    .invoicing-panel .invoicing-row-link {
        font-size: 13.5px !important;
    }
    .invoicing-panel .invoicing-row-result strong {
        font-size: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Znalostní báze (wiki) — stránky, záložky, štítky
   ══════════════════════════════════════════════════════════════════════ */

.wiki-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wiki-search-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.wiki-search-form input[type="search"] {
    flex: 1;
    min-width: 240px;
    padding: 9px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
    font-size: 14px;
}

.wiki-tag-filter,
.wiki-tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wiki-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--card);
    color: var(--ink-2);
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.wiki-tag-chip:hover {
    border-color: var(--ink-3);
    color: var(--ink);
}
.wiki-tag-chip.is-on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.wiki-tag-chip input[type="checkbox"] {
    display: none;
}
.wiki-tag-chip:has(input:checked) {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* Grid stránek */
.wiki-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.wiki-page-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
    min-width: 0;
}
.wiki-page-card:hover {
    border-color: var(--rule);
    background: var(--paper);
}
.wiki-page-card strong {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 650;
    color: var(--ink);
}
.wiki-page-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.wiki-page-card .wiki-tag-chip {
    font-size: 11px;
    padding: 2px 8px;
}
.wiki-page-meta {
    font-size: 11.5px;
    color: var(--ink-4);
    margin-top: auto;
}

/* Rendered wiki body (Markdown → HTML) */
.wiki-body {
    padding: 32px 36px;
    line-height: 1.7;
    font-size: 15px;
    max-width: 760px;
}
.wiki-body h1,
.wiki-body h2,
.wiki-body h3 {
    margin: 1.4em 0 0.6em;
    letter-spacing: -0.015em;
}
.wiki-body h1 { font-size: 28px; }
.wiki-body h2 { font-size: 22px; }
.wiki-body h3 { font-size: 18px; }
.wiki-body p { margin: 0 0 1em; }
.wiki-body ul, .wiki-body ol { margin: 0 0 1em; padding-left: 1.5em; }
.wiki-body li { margin-bottom: 0.3em; }
.wiki-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.wiki-body a:hover { color: var(--accent-ink); }
.wiki-body code {
    background: var(--paper-2);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.92em;
    font-family: var(--f-mono);
}
.wiki-body pre {
    background: var(--paper-2);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 0 0 1em;
    font-size: 13px;
}
.wiki-body pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
}
.wiki-body blockquote {
    margin: 0 0 1em;
    padding: 8px 16px;
    border-left: 3px solid var(--rule);
    color: var(--ink-3);
    font-style: italic;
}
.wiki-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 0.6em 0;
}
.wiki-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
    font-size: 14px;
}
.wiki-body th, .wiki-body td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--rule-soft);
}
.wiki-body th {
    font-weight: 600;
    background: var(--paper);
}
.wiki-body hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 1.5em 0;
}

.wiki-meta-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Tichý footer pod wiki obsahem — žádný panel chrome, jen border-top a malý text.
   Drží metadata stránky (created/updated) + delete button v jednom kompaktním řádku. */
.wiki-meta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 4px 0;
    margin-top: 4px;
    border-top: 1px solid var(--rule);
}

.wiki-meta-footer-info {
    margin: 0;
    color: var(--ink-3);
    font-size: 12px;
}

/* Inline varianta page-head-actions — tlačítka v 1 řádku místo defaultního
   sloupcového layoutu. Pro detail stránky, kde 3 tlačítka v sloupci roztahují
   header zbytečně do výšky. */
.page-head-actions--inline {
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Wiki — setup SQL pre block (když tabulky nejsou vytvořené) */
.setup-sql {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    font-family: var(--f-mono);
    font-size: 12.5px;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 480px;
    overflow-y: auto;
    white-space: pre;
    color: var(--ink-2);
    margin: 12px 0 0;
}

/* Wiki form */
.wiki-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.wiki-form textarea[data-markdown-source] {
    min-height: 320px;
    font-family: var(--f-mono);
    font-size: 13.5px;
    line-height: 1.6;
}
.form-label-row {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Bookmarks */
.bookmark-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bookmark-form-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}
@media (max-width: 640px) {
    .bookmark-form-row { grid-template-columns: 1fr; }
}

.wiki-bookmarks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}
.wiki-bookmark {
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.wiki-bookmark-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.wiki-bookmark-title {
    font-weight: 650;
    color: var(--ink);
    font-size: 15px;
    text-decoration: none;
    word-break: break-word;
}
.wiki-bookmark-title:hover { color: var(--accent); }
.wiki-bookmark-host {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-4);
    word-break: break-all;
}
.wiki-bookmark-note {
    font-size: 13px;
    color: var(--ink-3);
    margin: 0;
    line-height: 1.5;
}
.wiki-bookmark-edit {
    margin-top: 4px;
    border-top: 1px dashed var(--rule);
    padding-top: 8px;
}
.wiki-bookmark-edit > summary {
    font-size: 11.5px;
    color: var(--ink-3);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.wiki-bookmark-edit > summary:hover { color: var(--ink); }

/* Task row + time row stack pod 700px */
@media (max-width: 700px) {
    /* Task row je teď flex-column, tady jen zajistit, aby hlavička také stackla. */
    .task-head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .task-head-controls {
        justify-content: flex-start;
    }
    .time-entry {
        grid-template-columns: 1fr !important;
    }
    .form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   UX Audit v38 — UNIFY, BUG, OPT
   ══════════════════════════════════════════════════════════════════════ */

/* ─── UNIFY 1 + 6 — jednotné „+ Nový X" tlačítko ─────────────────────────
   Všechna "+ Nový X" tlačítka v aplikaci mají:
   - auto width (není roztažené)
   - stejnou výšku (34px)
   - stejné primary ink pozadí
   - konzistentní padding a font
   .add-panel > summary zdědí standardní button primary,
   ale přidáme explicit width:auto a inline-flex pro jistotu.
*/
.page-head-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.page-head-actions .add-panel,
.page-head-actions .new-item-dropdown {
    display: inline-block;
}
.page-head-actions .button,
.add-panel > summary,
.new-item-dropdown > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: 34px;
    line-height: 1;
    white-space: nowrap;
}
/* Explicitně potlačíme roztažené block summary v tabech */
.add-panel > summary {
    align-self: flex-start;
    max-width: max-content;
}
/* Tabs uvnitř detail views: „+ Nový úkol"/„+ Nový projekt" = auto width */
section[role="tabpanel"] .add-panel > summary,
.add-panel + .add-panel-body,
.workspace .add-panel {
    display: inline-block;
}
.add-panel {
    margin-bottom: 12px;
}
/* BUG 9 — CTA tlačítka v tabech: nikdy přes celou šířku */
.workspace > .add-panel,
.workspace section > .add-panel {
    display: block;
}
.workspace > .add-panel > summary,
.workspace section > .add-panel > summary {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content;
    align-self: flex-start;
}

/* ─── UNIFY 2 — Upravit/Smazat = oba ghost, stejná váha ───────────────── */
.task-delete-form .ghost.danger,
.time-entry-actions .ghost.danger,
.note-actions .ghost.danger,
.file-actions .ghost.danger,
.link-row .ghost,
.archive-form .ghost.danger {
    font-weight: 400;
    font-size: 12px;
    padding: 6px 10px;
}

/* ─── UNIFY 5 — Eyebrow labels jednotně ─────────────────────────────── */
.form-label-row,
.sr-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    margin-bottom: 6px;
    line-height: 1.2;
    display: block;
}
/* Screen-reader-style ale viditelný „štítek" pro one-row formuláře */
.sr-label {
    font-size: 10px;
    margin-bottom: 4px;
    color: var(--ink-4);
}

/* ─── UNIFY 4 — Form actions — submit vpravo, nikdy 100% ──────────────── */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}
.form-actions .primary,
.form-actions .button {
    width: auto;
    min-width: 120px;
}
/* Fix: submit tlačítka v formech nejsou roztažená */
.form-grid button[type="submit"] {
    width: auto;
    justify-self: flex-start;
}
.stack > button[type="submit"],
form.stack > button[type="submit"],
.wiki-form > button[type="submit"],
.bookmark-form > button[type="submit"] {
    width: auto;
    justify-self: flex-start;
    align-self: flex-start;
}

/* ─── UNIFY 7 — Checkbox popisky ──────────────────────────────────────── */
.checkline {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    color: var(--ink);
}

/* ─── BUG 1 — Pole Trvání širší ───────────────────────────────────────── */
.duration-field {
    width: 96px !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ─── BUG 7 — „Odesláno" kontrast ──────────────────────────────────────
   Aktivní stav musí být čitelný: tmavé zelené pozadí + bílý text/ikona
*/
.invoice-status-btn.is-active.invoice-status-sent {
    background: var(--good);
    color: #ffffff;
    border-color: var(--good);
}
.invoice-status-btn.is-active.invoice-status-sent .btn-icon,
.invoice-status-btn.is-active.invoice-status-sent .btn-label {
    color: #ffffff;
}
.invoice-status-btn.is-active.invoice-status-skipped {
    background: var(--ink);
    color: #ffffff;
    border-color: var(--ink);
}
.invoice-status-btn.is-active.invoice-status-skipped .btn-icon,
.invoice-status-btn.is-active.invoice-status-skipped .btn-label {
    color: #ffffff;
}
.invoice-status-btn.is-active.invoice-status-pending {
    background: var(--ink-2);
    color: #ffffff;
    border-color: var(--ink-2);
}
.invoice-status-btn.is-active.invoice-status-pending .btn-icon,
.invoice-status-btn.is-active.invoice-status-pending .btn-label {
    color: #ffffff;
}

/* ─── BUG 15 — Poznámka u faktury: focus + is-saved ──────────────────── */
.invoice-row-note-input,
.invoicing-row-note input[type="text"] {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: 7px 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.3s ease;
    font-size: 13px;
    background: var(--card);
}
.invoice-row-note-input:focus,
.invoicing-row-note input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.invoice-row-note-input.is-saved,
.invoicing-row-note input[type="text"].is-saved {
    border-color: var(--good);
    background: color-mix(in oklch, var(--good) 8%, var(--card));
}
.invoice-row-note-input.is-saving,
.invoicing-row-note input[type="text"].is-saving {
    background: color-mix(in oklch, var(--accent) 5%, var(--card));
}

/* ─── BUG 8 + OPT 1 — Formulář klienta v pravém sloupci ────────────────
   Na stránce Klienti (?page=clients) se po otevření rozbalí formulář
   v kompaktním dvousloupcovém layoutu (stejný pattern i v tabu Nastavení).
*/
.add-panel[open] > .add-panel-body,
.add-panel[open] > .add-panel-body.panel {
    margin-top: 12px;
    padding: 18px 20px 20px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md);
    background: var(--card);
}

/* Kompaktní 2-sloupcový layout pro renderClientForm uvnitř add-panel */
.add-panel-body .form-grid,
.panel .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
.add-panel-body .form-grid .wide,
.panel .form-grid .wide {
    grid-column: 1 / -1;
}
.add-panel-body .form-grid button[type="submit"],
.panel .form-grid button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: flex-end;
    width: auto;
    min-width: 140px;
}
@media (max-width: 720px) {
    .add-panel-body .form-grid,
    .panel .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── OPT 2 — Edit času: kompaktní jeden řádek ───────────────────────── */
.time-entry-edit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md);
    margin-top: 10px;
}
.time-edit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.time-edit-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.time-edit-cell--times {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.time-edit-cell--times .time-field {
    width: 90px;
    padding: 5px 8px;
    font-size: 13px;
}
.time-edit-cell--date {
    flex-direction: row;
    align-items: center;
    gap: 4px;
}
.time-edit-cell--duration .duration-field {
    width: 90px;
    padding: 5px 8px;
    font-size: 13px;
}
.time-entry-edit-form label.wide {
    width: 100%;
    margin-top: 2px;
}
.time-entry-edit-form label.wide input,
.time-entry-edit-form label.wide textarea {
    width: 100%;
}
.time-entry-edit-form .checkline {
    margin-top: 4px;
}
.time-entry-edit-form .form-actions {
    margin-top: 6px;
}
.hint {
    font-size: 12px;
    color: var(--ink-3);
    background: var(--paper-2);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    margin: 0;
}
.hint code {
    font-family: var(--f-mono);
    font-size: 11.5px;
    background: var(--card);
    padding: 0 4px;
    border-radius: 2px;
}

/* ─── OPT 3 — Dashboard stats jednotná typografie ─────────────────────
   Všechny tři hodnoty metric-strip mají stejnou váhu, velikost i letter-spacing
*/
.metric-strip strong {
    font-size: clamp(24px, 2vw, 30px) !important;
    font-weight: 650 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.1 !important;
}
.metric-strip span {
    font-weight: 500 !important;
}

/* ─── OPT 5 — Detail header: meta + actions v jednom řádku ─────────── */
.page-head.is-compact {
    padding-bottom: 16px;
    margin-bottom: 12px;
}
.page-head.is-compact h1 {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.15;
    margin-bottom: 6px;
}
.page-head.is-compact .client-contact-line {
    font-size: 13px;
    color: var(--ink-3);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

/* ─── UNIFY 3 — Badge "Aktivní" — jednotný design sidebar i tiles ───── */
.sidebar-workspace-status {
    background: color-mix(in oklch, var(--good) 10%, transparent);
    color: var(--good);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10.5px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
}
.sidebar-workspace-status-active {
    background: color-mix(in oklch, var(--good) 14%, transparent);
    color: var(--good);
}
.sidebar-workspace-status-paused {
    background: color-mix(in oklch, var(--warn) 14%, transparent);
    color: var(--warn);
}
.sidebar-workspace-status-archived {
    background: var(--paper-2);
    color: var(--ink-4);
}

/* Data-autosave vizuální feedback (BUG 15) */
[data-autosave] {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.3s ease;
}
[data-autosave]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
[data-autosave].is-saved {
    border-color: var(--good);
    background: color-mix(in oklch, var(--good) 8%, var(--card));
}
[data-autosave].is-saving {
    background: color-mix(in oklch, var(--accent) 5%, var(--card));
}

/* Dashboard open state pro add-panel */
.page-head .add-panel[open] > .add-panel-body {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 420px;
    max-width: 90vw;
    z-index: 30;
    box-shadow: var(--shadow-lg);
}
.page-head .add-panel {
    position: relative;
}

/* Tasks page header — tabbar + primary CTA */
.page-head-actions .tabbar {
    display: inline-flex;
    gap: 2px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: 2px;
    background: var(--card);
}
.page-head-actions .tabbar a {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--ink-3);
    text-decoration: none;
    font-weight: 500;
}
.page-head-actions .tabbar a:hover {
    background: var(--paper);
    color: var(--ink);
}
.page-head-actions .tabbar a.active {
    background: var(--ink);
    color: var(--paper);
}

/* ══════════════════════════════════════════════════════════════════════
   WIKI — stromová navigace (Notion-style vnořené stránky)
   ══════════════════════════════════════════════════════════════════════ */

.wiki-tree-panel {
    padding: 20px 24px;
}

.wiki-tree-panel .section-head p .muted {
    color: var(--ink-4);
    font-family: var(--f-mono);
    font-size: 11.5px;
}

/* UL s položkami — bez odrážek, vnitřní padding na levé straně pro vnoření */
ul.wiki-tree {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 4px; /* aby SortableJS mohl dropnout do prázdného ul */
}

ul.wiki-tree--children {
    margin-left: 26px;
    border-left: 1px dashed var(--rule-soft);
    padding-left: 10px;
    margin-top: 2px;
}

ul.wiki-tree--children:empty {
    min-height: 8px;
    margin-top: 0;
    margin-bottom: 0;
}

/* Jeden uzel */
li.wiki-node {
    margin: 0;
    padding: 0;
}

.wiki-node-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.12s ease;
    min-height: 34px;
}

.wiki-node-head:hover {
    background: var(--paper);
}

/* Drag handle — šedý ⋮⋮, cursor grab */
.wiki-drag-handle {
    cursor: grab;
    color: var(--ink-4);
    font-size: 14px;
    user-select: none;
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 0.45;
    transition: opacity 0.12s ease, color 0.12s ease;
    line-height: 1;
    letter-spacing: -2px;
}

.wiki-node-head:hover .wiki-drag-handle {
    opacity: 0.85;
}

.wiki-drag-handle:hover {
    color: var(--accent);
    opacity: 1 !important;
}

.wiki-drag-handle:active {
    cursor: grabbing;
}

/* Title link — zabírá zbytek šířky, žádné podtržení */
.wiki-node-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 2px;
}

.wiki-node-title:hover {
    color: var(--accent);
}

.wiki-node-title:hover .wiki-node-label {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wiki-node-caret {
    color: var(--ink-4);
    font-size: 11px;
    flex: 0 0 auto;
    width: 14px;
    text-align: center;
    line-height: 1;
}

.wiki-node-caret--leaf {
    color: var(--ink-5, var(--rule));
    font-size: 8px;
}

.wiki-node-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tagy vpravo */
.wiki-node-tags {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    align-items: center;
}

.wiki-node-tags .wiki-tag-chip {
    font-size: 10.5px;
    padding: 1px 7px;
}

/* Akce vpravo — "+ podstránka" */
.wiki-node-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
    flex: 0 0 auto;
}

.wiki-node-head:hover .wiki-node-actions,
.wiki-node-head:focus-within .wiki-node-actions {
    opacity: 1;
}

.wiki-node-add {
    font-size: 11.5px;
    color: var(--ink-3);
    text-decoration: none;
    padding: 3px 8px;
    border: 1px dashed var(--rule);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    background: transparent;
}

.wiki-node-add:hover {
    color: var(--accent);
    border-color: var(--accent);
    border-style: solid;
    background: var(--card);
}

/* SortableJS — drag states */
.wiki-node-ghost {
    opacity: 0.35;
    background: color-mix(in oklch, var(--accent) 12%, var(--card));
    border-radius: var(--radius-sm);
}

.wiki-node-chosen {
    background: color-mix(in oklch, var(--accent) 6%, var(--card));
}

.wiki-node-drag {
    box-shadow: var(--shadow-lg);
    opacity: 0.92;
}

/* Flash hláška o chybě přesunu */
.wiki-drag-flash {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bad);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wiki-drag-flash.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Breadcrumb v detailu stránky ──────────────────────────────────── */
.wiki-breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.wiki-breadcrumb a {
    color: var(--ink-3);
    text-decoration: none;
    transition: color 0.12s ease;
}

.wiki-breadcrumb a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wiki-breadcrumb-sep {
    color: var(--ink-5, var(--rule));
    font-size: 11px;
}

/* ── Seznam podstránek pod obsahem ─────────────────────────────────── */
.wiki-subpages {
    padding: 16px 20px 18px;
}

.wiki-subpages-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: grid;
    gap: 2px;
}

.wiki-subpages-list li {
    margin: 0;
}

.wiki-subpages-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.wiki-subpages-list a:hover {
    background: var(--paper);
    color: var(--accent);
}

/* ── ClickUp-style 2-col layout: sidebar tree + page content ─────────
   Aktivní stránka má highlight, cesta od rootu je auto-expanded, ostatní
   větve jsou collapsed a uživatel je rozbalí přes caret. */
.wiki-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.wiki-layout-main {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.wiki-layout-sidebar {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 10px;
    box-shadow: var(--shadow-xs, 0 1px 0 rgba(23, 25, 28, 0.03));
}

.wiki-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 6px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.wiki-side-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.wiki-side-add {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    line-height: 1;
    transition: background 0.12s ease, color 0.12s ease;
}

.wiki-side-add:hover {
    background: var(--paper);
    color: var(--accent);
}

.wiki-side-tree,
.wiki-side-children {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wiki-side-children {
    padding-left: 14px;
    border-left: 1px solid var(--line);
    margin-left: 11px;
    /* Default: hidden — JS toggle nebo .is-expanded ji ukáže */
    display: none;
}

.wiki-side-node.is-expanded > .wiki-side-children {
    display: block;
}

.wiki-side-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 0;
}

.wiki-side-caret {
    flex: 0 0 auto;
    width: 18px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--ink-3);
    cursor: pointer;
    padding: 0;
    font-size: 11px;
    border-radius: 3px;
    transition: background 0.1s ease, transform 0.15s ease, color 0.1s ease;
}

.wiki-side-caret:hover {
    background: var(--paper);
    color: var(--ink);
}

.wiki-side-node.is-expanded > .wiki-side-row > .wiki-side-caret {
    transform: rotate(90deg);
}

.wiki-side-caret--leaf {
    cursor: default;
    pointer-events: none;
}

.wiki-side-caret--leaf::before {
    content: "•";
    color: var(--ink-5, var(--rule));
    font-size: 10px;
}

.wiki-side-link {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    color: var(--ink);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.1s ease, color 0.1s ease;
}

.wiki-side-link:hover {
    background: var(--paper);
    color: var(--accent);
}

.wiki-side-node.is-active > .wiki-side-row > .wiki-side-link {
    background: color-mix(in oklch, var(--accent) 10%, var(--card));
    color: var(--accent);
    font-weight: 600;
}

/* Mobile — sidebar se zabalí jako collapsible `<details>` style.
   Bez JS toggle: na mobilu sbalíme úplně, ale necháme accessible přes
   horizontální scroll. Lepší by bylo collapsible — ale ten by si žádal
   `<details>` element nebo JS. Pro teď stack pod main. */
@media screen and (max-width: 900px) {
    .wiki-layout {
        grid-template-columns: 1fr;
    }

    .wiki-layout-sidebar {
        position: static;
        max-height: 240px;
        order: 2;  /* sidebar pod hlavním obsahem na mobilu */
    }

    .wiki-layout-main {
        order: 1;
    }
}

/* ── Editor fallback hláška (když CDN selže) ───────────────────────── */
.md-editor-fallback {
    background: color-mix(in oklch, var(--warn) 14%, var(--card));
    border: 1px solid var(--warn);
    color: var(--ink-strong, var(--ink));
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.md-editor-fallback strong {
    display: block;
    margin-bottom: 4px;
    color: var(--warn-ink, var(--warn));
}

/* ── Plovoucí timer-bar (sticky na vrcholu workspace, viditelný na všech stránkách) ── */
.timer-bar {
    position: sticky;
    top: 12px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    margin: 0 0 14px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 20px rgba(23, 25, 28, 0.08), 0 1px 2px rgba(23, 25, 28, 0.05);
    font-family: "Inter", sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.timer-bar[hidden] { display: none !important; }

.timer-bar.is-running {
    border-color: color-mix(in oklch, var(--danger) 45%, var(--line-strong));
    box-shadow: 0 6px 24px color-mix(in oklch, var(--danger) 18%, transparent), 0 1px 2px rgba(23, 25, 28, 0.05);
}

.timer-bar.is-paused {
    border-color: color-mix(in oklch, var(--warn) 45%, var(--line-strong));
}

.timer-bar.is-finished {
    border-color: color-mix(in oklch, var(--good) 55%, var(--line-strong));
}

/* Červená tečka — pulzuje při běžícím timeru */
.timer-bar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink-4);
    flex-shrink: 0;
}

.timer-bar.is-running .timer-bar-dot {
    background: var(--danger);
    animation: timer-pulse 1.6s ease-in-out infinite;
}

.timer-bar.is-paused .timer-bar-dot {
    background: var(--warn);
}

.timer-bar.is-finished .timer-bar-dot {
    background: var(--good);
}

@keyframes timer-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--danger) 50%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in oklch, var(--danger) 0%, transparent); }
}

.timer-bar-context {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.timer-bar-title {
    color: var(--ink);
    font-weight: 640;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timer-bar-title:hover {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.timer-bar-sub {
    color: var(--ink-3);
    font-size: 11.5px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timer-bar-clock {
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 620;
    color: var(--ink);
    letter-spacing: 0.5px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.timer-bar.is-running .timer-bar-clock {
    color: var(--danger);
}

.timer-bar.is-paused .timer-bar-clock {
    color: var(--warn);
}

.timer-bar-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.timer-bar-actions .button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12.5px;
    font-weight: 600;
}

.timer-bar-cancel {
    padding: 0 8px !important;
    color: var(--ink-3);
}

.timer-bar-cancel:hover {
    color: var(--danger);
    background: color-mix(in oklch, var(--danger) 8%, transparent);
}

/* Mobile layout */
@media (max-width: 640px) {
    .timer-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .timer-bar-context {
        flex: 1 1 100%;
        order: -1;
    }
    .timer-bar-actions {
        flex: 1 1 auto;
    }
}

/* ── "Spustit čas" tlačítko v hlavičce klienta / projektu ─────────── */
.timer-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
    background: var(--ink);
    color: var(--card);
    border-color: var(--ink);
}

.timer-start-btn:hover {
    background: var(--ink-2);
    border-color: var(--ink-2);
    color: var(--card);
}

.timer-start-btn .timer-start-icon {
    color: var(--danger);
    font-size: 10px;
    line-height: 1;
    transform: translateY(-0.5px);
}

.timer-start-btn .timer-start-label {
    letter-spacing: 0.1px;
}

/* ── Sidebar: odkaz Nastavení (nad Odhlásit) ───────────────────────── */
.sidebar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}

.sidebar-settings-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: var(--sidebar-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-settings-link:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-ink);
}

.sidebar-settings-link.active {
    background: var(--sidebar-active);
    color: var(--card);
}

.sidebar-settings-link svg {
    flex-shrink: 0;
}

/* ── Nastavení → Zabezpečení ──────────────────────────────────────── */

/* Stránka Zabezpečení je tabulkový dashboard (banlist, aktivita, log) — chceme
   ji přes celou šířku monitoru, ne zaškrcenou na 2100px jako textové stránky.
   Cílí JEN na tuto stránku přes .workspace--security (modifikátor z layout.php,
   <main class="workspace workspace--{$active}">). Ostatní stránky nedotčené. */
.workspace--security {
    max-width: none;
}

.security-panel {
    max-width: 720px;
    margin-bottom: 20px;
}

/* Panely s širokými tabulkami (banlist, aktivita podle IP) potřebují víc
   místa než formulářové panely — 7 sloupců se do 720px nevejde a lámalo se
   po znacích. Formulářové panely zůstávají kompaktní (720px). */
.security-panel--wide {
    /* Bez fixního stropu — panel vyplní celou šířku .workspace--security
       (stránka Zabezpečení jede na plnou šířku monitoru). */
    max-width: none;
}

/* Vodorovný scroll pro tabulku na úzkém displeji (mobil) místo lámání. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll .security-table {
    /* Roztáhnout sloupce na celou šířku panelu. Obecné `.table-scroll table`
       má `width: max-content` (drží tabulku na šířce obsahu) — tady to přebíjíme,
       ať tabulka vyplní plochu. min-width drží scroll na úzkém displeji. */
    width: 100%;
    min-width: 760px;
}

.warning-panel {
    max-width: 720px;
    margin-bottom: 20px;
    background: color-mix(in oklch, var(--warn) 12%, var(--card));
    border: 1px solid color-mix(in oklch, var(--warn) 55%, var(--line-strong));
    color: var(--ink);
}

.warning-panel h2 {
    color: var(--warn);
    margin-top: 0;
}

.warning-panel code {
    background: var(--card);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12.5px;
}

.security-status {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.security-status li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft, var(--rule-soft));
    gap: 16px;
}

.security-status li:last-child {
    border-bottom: none;
}

.security-status-key {
    color: var(--ink-3);
    font-size: 13px;
}

.security-status-val {
    font-weight: 600;
    color: var(--ink);
    font-size: 13.5px;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.chip-good {
    background: color-mix(in oklch, var(--good) 14%, var(--card));
    color: var(--good);
    border: 1px solid color-mix(in oklch, var(--good) 40%, transparent);
}

.chip-warn {
    background: color-mix(in oklch, var(--warn) 14%, var(--card));
    color: var(--warn);
    border: 1px solid color-mix(in oklch, var(--warn) 40%, transparent);
}

.security-form label,
.totp-confirm-form label,
.security-action .form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 500;
}

.security-form input[type="password"],
.security-form input[type="text"],
.totp-confirm-form input[type="text"],
.security-action input[type="password"],
.security-action input[type="text"] {
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: "Inter", sans-serif;
    background: var(--card);
    color: var(--ink);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.security-form input:focus,
.totp-confirm-form input:focus,
.security-action input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.form-actions.wide {
    grid-column: 1 / -1;
}

/* TOTP setup flow */
.totp-setup {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.totp-setup-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.totp-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--card);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.totp-setup-step strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    margin-bottom: 2px;
}

.totp-setup-step p {
    margin: 0;
}

.small {
    font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Security panel: trust devices, banlist, security log
   ──────────────────────────────────────────────────────────────────────── */

.trust-device-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trust-device {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.trust-device-current {
    border-color: var(--brand);
    background: var(--brand-tint, rgba(91, 91, 214, 0.08));
}

.trust-device strong {
    font-size: 14px;
    color: var(--ink);
}

.trust-device p {
    margin: 4px 0 0;
}

.trust-device-revoke {
    flex-shrink: 0;
}

.security-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.security-table th,
.security-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.security-table th {
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.security-table code {
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

/* IP, ASN a akční tlačítka se nesmí lámat po znacích. Dlouhé názvy ISP
   a popis „co dělal" se lámat smí (mají vlastní sloupce). */
.security-table .button {
    white-space: nowrap;
}

/* Sloupec „Co hledal" — kategorie hrozby (chipy) + konkrétní honeypot URL pod tím. */
.sec-target-cell {
    max-width: 560px;
}
.sec-urls {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
}
.sec-urls code {
    font-size: 11px;
    background: var(--surface);
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    color: var(--ink-3, #555);
}

.security-log {
    background: var(--ink);
    color: #aef;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.55;
    overflow: auto;
    max-height: 420px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.security-action-form {
    margin-top: 12px;
}

.warning-panel {
    background: #fff7e6;
    border: 1px solid #f5c477;
    border-radius: 12px;
    padding: 14px 18px;
    color: #6a3d00;
}

.warning-panel strong {
    color: #6a3d00;
    font-size: 14px;
}

.warning-panel p {
    margin: 6px 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Lifecycle stages — pre-sales pipeline (klienti / příležitosti)
   ──────────────────────────────────────────────────────────────────────── */

/* Chip filter na clients list */
.lifecycle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px 0;
}

.lifecycle-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink, #111827);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.lifecycle-chip:hover {
    background: #f3f4f6;
}

.lifecycle-chip.is-active {
    background: var(--ink, #111827);
    color: white;
    border-color: var(--ink, #111827);
}

.lifecycle-chip-count {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}

.lifecycle-chip.is-active .lifecycle-chip-count {
    background: rgba(255, 255, 255, 0.2);
}

.lifecycle-chip-prospect.is-active { background: #ca8a04; border-color: #ca8a04; }
.lifecycle-chip-active.is-active   { background: #16a34a; border-color: #16a34a; }
.lifecycle-chip-paused.is-active   { background: #6b7280; border-color: #6b7280; }
.lifecycle-chip-archived.is-active { background: #44403c; border-color: #44403c; }
.lifecycle-chip-lost.is-active     { background: #b91c1c; border-color: #b91c1c; }
.lifecycle-chip-hidden.is-active   { background: #6b7280; border-color: #6b7280; }

/* Pohled „Skryté" projekty — dlaždice jemně ztlumené, ať je jasné, že jde o schované položky */
.projects-hidden-view .project-tile { opacity: 0.92; }

/* Klient tile (na clients list) — vizuální distinkce podle stage */
.lifecycle-tile-prospect {
    border-left: 4px solid #eab308 !important;
    background: linear-gradient(to right, #fef9c3 0%, transparent 60%);
}

.lifecycle-tile-lost {
    border-left: 4px solid #ef4444 !important;
    opacity: 0.7;
}

.lifecycle-tile-archived {
    opacity: 0.65;
}

/* tile-status badges */
.tile-status-prospect {
    background: #fde047;
    color: #713f12;
}

.tile-status-lost {
    background: #fecaca;
    color: #7f1d1d;
}

/* Next action na tile (prospekt) */
.lifecycle-next-action {
    font-style: italic;
    color: #92400e;
    font-size: 12.5px;
}

.lifecycle-next-action.is-overdue {
    color: #b91c1c;
    font-weight: 600;
}

/* Klient detail header pro prospekta */
.lifecycle-header-prospect {
    background: linear-gradient(to bottom, #fef9c3 0%, transparent 100%);
    border-left: 4px solid #eab308;
    padding-left: 14px;
}

.lifecycle-header-prospect .eyebrow {
    color: #92400e;
    font-weight: 600;
}

.lifecycle-header-lost {
    opacity: 0.7;
}

/* Pre-sales pipeline panel */
.lifecycle-pipeline {
    background: linear-gradient(to right, #fef9c3 0%, #fffbeb 100%);
    border: 1px solid #fde047;
}

.lifecycle-pipeline-head {
    margin-bottom: 12px;
}

.lifecycle-pipeline-head h2 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #713f12;
}

.lifecycle-pipeline-grid {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 16px;
    align-items: center;
}

.lifecycle-pipeline-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lifecycle-pipeline-grid .is-overdue strong {
    color: #b91c1c;
}

.lifecycle-pipeline-grid strong {
    font-size: 14px;
    color: var(--ink);
}

.lifecycle-pipeline-grid small {
    font-size: 11.5px;
    color: var(--muted, #6b7280);
}

/* Dashboard prospects widget */
.prospects-panel {
    border-left: 4px solid #eab308;
    background: linear-gradient(to right, #fef9c3 0%, transparent 30%);
}

.prospects-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.prospect-row {
    border-bottom: 1px solid var(--border);
}

.prospect-row:last-child {
    border-bottom: none;
}

.prospect-row.is-overdue {
    background: rgba(254, 226, 226, 0.4);
}

.prospect-row-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 10px 4px;
    text-decoration: none;
    color: inherit;
}

.prospect-row-link:hover {
    background: rgba(0, 0, 0, 0.02);
}

.prospect-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.prospect-row-main strong {
    font-size: 14px;
    color: var(--ink);
}

.prospect-action {
    font-style: italic;
    color: var(--muted, #6b7280);
    font-size: 12.5px;
}

.prospect-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.prospect-date {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.prospect-date.is-overdue {
    color: #b91c1c;
    font-weight: 600;
}

/* Task filter chip pro skrytí pre-sales */
.task-type-filter-chip-prospects {
    margin-left: auto; /* push to right */
    background: #fef9c3;
    border-color: #fde047;
}

.task-type-filter-chip-prospects.is-active {
    background: #eab308;
    color: white;
}

/* ─────────────────────────────────────────────────────────────────────────
   Invoice history — 12-month rolling view per klient + globální
   ──────────────────────────────────────────────────────────────────────── */

.invoice-history-panel {
    /* zděděno z .panel */
}

.invoice-history-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 12px 0 24px 0;
}

.invoice-history-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
}

.invoice-history-stat strong {
    font-size: 20px;
    color: var(--ink, #111827);
    line-height: 1.2;
}

.invoice-history-stat-paid {
    border-left: 4px solid #16a34a;
}

.invoice-history-stat-paid strong {
    color: #16a34a;
}

.invoice-history-stat-overdue {
    border-left: 4px solid #ef4444;
    background: #fef2f2;
}

.invoice-history-stat-overdue strong {
    color: #b91c1c;
}

/* 12-month bar chart */
.invoice-history-chart {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    height: 180px;
    margin: 24px 0 32px 0;
    padding: 0 4px 4px 4px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.invoice-history-bar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.invoice-history-bar-stack {
    width: 100%;
    background: #93c5fd;
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 4px;
    display: flex;
    flex-direction: column-reverse;
}

.invoice-history-bar:hover .invoice-history-bar-stack {
    background: #60a5fa;
}

/* Prázdné měsíce (0 faktur) — žádná čára, jen label dole */
.invoice-history-bar.is-empty {
    justify-content: flex-end;
    opacity: 0.5;
}

.invoice-history-bar.is-empty:hover {
    opacity: 0.8;
}


.invoice-history-bar-paid {
    background: #16a34a;
    border-radius: 0;
}

.invoice-history-bar-overdue {
    background: #ef4444;
}

.invoice-history-bar-amount {
    font-size: 10px;
    color: var(--muted, #6b7280);
    margin-top: 4px;
}

.invoice-history-bar-label {
    font-size: 10px;
    color: var(--muted, #6b7280);
    margin-top: 2px;
}

/* Monthly breakdown */
.invoice-history-months {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.invoice-history-month {
    border-top: 1px solid var(--border, #e5e7eb);
    padding-top: 16px;
}

.invoice-history-month:first-child {
    border-top: none;
    padding-top: 0;
}

.invoice-history-month-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.invoice-history-month h3 {
    margin: 0;
    font-size: 15px;
    color: var(--ink, #111827);
}

.invoice-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;  /* respect colgroup widths */
}

/* Explicit column widths via colgroup */
.invoice-history-table col.col-number { width: 18%; }
.invoice-history-table col.col-client { width: 22%; }
.invoice-history-table col.col-date   { width: 14%; }
.invoice-history-table col.col-status { width: 18%; }
.invoice-history-table col.col-amount { width: 14%; }
.invoice-history-table col.col-action { width: 50px; }

.invoice-history-table th {
    text-align: left;
    padding: 8px 10px;
    color: var(--muted, #6b7280);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

.invoice-history-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

/* Status badge nesmí přesahovat sloupec — wrap nebo shrink */
.invoice-history-table .fk-badge {
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-history-table tr:last-child td {
    border-bottom: none;
}

.invoice-history-row code {
    background: var(--surface, #f9fafb);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.invoice-history-row-paid {
    background: rgba(34, 197, 94, 0.04);
}

.invoice-history-row-overdue {
    background: rgba(239, 68, 68, 0.06);
}

.invoice-history-row-overdue td:first-child {
    border-left: 3px solid #ef4444;
}

@media (max-width: 760px) {
    .invoice-history-chart {
        height: 120px;
        gap: 3px;
    }
    .invoice-history-bar-amount {
        display: none;
    }
    .invoice-history-table {
        font-size: 12px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Gmail inbox tab — list threadů s labelem klienta/projektu
   ──────────────────────────────────────────────────────────────────────── */

.gmail-thread-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.gmail-thread {
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.gmail-thread:last-child {
    border-bottom: none;
}

.gmail-thread-link {
    display: grid;
    grid-template-columns: 200px 1fr 80px;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    align-items: baseline;
}

.gmail-thread-link:hover {
    background: rgba(0, 0, 0, 0.03);
}

.gmail-thread.is-unread .gmail-thread-from strong,
.gmail-thread.is-unread .gmail-thread-subject {
    font-weight: 700;
    color: var(--ink, #111827);
}

.gmail-thread:not(.is-unread) .gmail-thread-from strong,
.gmail-thread:not(.is-unread) .gmail-thread-subject {
    font-weight: 500;
    color: #4b5563;
}

.gmail-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.gmail-direction {
    color: #16a34a;
    font-weight: 700;
    margin-right: 4px;
}

.gmail-thread-from {
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gmail-thread-count {
    color: var(--muted, #6b7280);
    font-size: 12px;
    margin-left: 4px;
}

.gmail-thread-subject {
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gmail-thread-snippet {
    grid-column: 2;
    color: var(--muted, #6b7280);
    font-size: 12.5px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.gmail-thread-date {
    text-align: right;
    color: var(--muted, #6b7280);
    font-size: 12px;
    white-space: nowrap;
}

.gmail-thread.is-unread .gmail-thread-date {
    color: #2563eb;
    font-weight: 600;
}

/* Thread, ze kterého vznikl úkol */
.gmail-thread.has-task {
    background: linear-gradient(to right, rgba(34, 197, 94, 0.06) 0%, transparent 200px);
    border-left: 3px solid #16a34a;
    padding-left: 9px;  /* offset for border */
}

.gmail-thread-tasks {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 12px 10px 12px;
    margin-top: -4px;
    flex-wrap: wrap;
}

.gmail-thread-tasks-label {
    font-size: 14px;
    flex-shrink: 0;
}

.gmail-thread-tasks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.gmail-thread-task-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    font-size: 12.5px;
    text-decoration: none;
    color: #14532d;
    transition: background 0.15s;
}

.gmail-thread-task-link:hover {
    background: #dcfce7;
}

.gmail-thread-task-link.task-status-done {
    opacity: 0.6;
    text-decoration: line-through;
}

.gmail-thread-task-link.task-status-blocked {
    background: #fef9c3;
    border-color: #fde047;
    color: #713f12;
}

.gmail-thread-task-link small {
    font-size: 11px;
}

.gmail-thread-task-link small.is-overdue {
    color: #b91c1c;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────
   AI Queue page — list zpracovávaných meetings + dictations
   ──────────────────────────────────────────────────────────────────────── */

.ai-queue-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.ai-queue-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.ai-queue-item:last-child {
    border-bottom: none;
}

.ai-queue-item-pending,
.ai-queue-item-processing {
    background: rgba(59, 130, 246, 0.04);
    border-left: 3px solid #60a5fa;
    padding-left: 12px;
    margin-left: -12px;
}

.ai-queue-item-transcribing,
.ai-queue-item-polling,
.ai-queue-item-analyzing {
    background: rgba(168, 85, 247, 0.04);
    border-left: 3px solid #a855f7;
    padding-left: 12px;
    margin-left: -12px;
}

.ai-queue-item-failed {
    background: rgba(239, 68, 68, 0.04);
    border-left: 3px solid #ef4444;
    padding-left: 12px;
    margin-left: -12px;
}

.ai-queue-item.is-stuck {
    background: rgba(249, 115, 22, 0.06);
    border-left: 3px solid #f97316;
    padding-left: 12px;
    margin-left: -12px;
}

.ai-queue-stuck-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: #ffedd5;
    color: #9a3412;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid #fed7aa;
}

.ai-queue-stuck-hint {
    margin: 6px 0 0 0;
    padding: 6px 10px;
    background: #fffbeb;
    border-radius: 6px;
    border-left: 2px solid #f59e0b;
    color: #78350f !important;  /* override .muted */
}

.ai-queue-stuck-hint strong {
    color: #78350f;
}

.ai-queue-item-main {
    flex: 1;
    min-width: 0;
}

.ai-queue-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.ai-queue-item-title {
    text-decoration: none;
    color: var(--ink, #111827);
}

.ai-queue-item-title:hover {
    text-decoration: underline;
}

.ai-queue-phase {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    background: #ede9fe;
    color: #6b21a8;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
}

.ai-queue-phase.is-failed {
    background: #fef2f2;
    color: #991b1b;
}

.ai-queue-spinner {
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ai-queue-item-preview {
    margin-top: 4px;
    font-style: italic;
}

.ai-queue-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Sidebar status link je teď <a>, ne <div> — match s ostatními status-row */
a.sidebar-status-row {
    text-decoration: none;
    color: inherit;
}

a.sidebar-status-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

@media (max-width: 640px) {
    .ai-queue-item {
        flex-direction: column;
        align-items: stretch;
    }
    .ai-queue-item-actions {
        justify-content: flex-end;
    }
}

.gmail-inbox-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.gmail-inbox-footer .muted {
    flex: 1;
    text-align: left;
}

@media (max-width: 640px) {
    .gmail-thread-link {
        grid-template-columns: 1fr auto;
        gap: 6px;
    }
    .gmail-thread-from {
        grid-column: 1;
    }
    .gmail-thread-date {
        grid-column: 2;
        grid-row: 1;
    }
    .gmail-thread-subject {
        grid-column: 1 / -1;
    }
    .gmail-thread-snippet {
        grid-column: 1 / -1;
    }
}

.totp-qr-wrap {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 18px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.totp-qr {
    background: #fff;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    min-width: 160px;
    min-height: 160px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.totp-qr svg {
    display: block;
    width: 160px;
    height: 160px;
}

.totp-secret-manual {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 260px;
    min-width: 0;
}

.totp-secret-code {
    display: block;
    padding: 10px 12px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--ink);
    word-break: break-all;
    line-height: 1.5;
}

.totp-secret-manual .button {
    align-self: flex-start;
    padding: 4px 12px;
    font-size: 12px;
    min-height: 28px;
}

.totp-confirm-form {
    max-width: 340px;
}

/* Actions (rotace, disable) */
.security-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.security-action {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--card);
    overflow: hidden;
}

.security-action > summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    list-style: none;
    position: relative;
    user-select: none;
    transition: background 0.12s ease;
}

.security-action > summary::-webkit-details-marker {
    display: none;
}

.security-action > summary::after {
    content: "▸";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--ink-3);
    transition: transform 0.12s ease;
}

.security-action[open] > summary::after {
    transform: translateY(-50%) rotate(90deg);
}

.security-action > summary:hover {
    background: var(--bg-soft);
}

.security-action[open] > summary {
    border-bottom: 1px solid var(--line);
}

.security-action .form-grid,
.security-action p {
    padding: 14px 16px;
    margin: 0;
}

.security-action .form-grid {
    padding-top: 4px;
    gap: 12px;
}

.security-action-danger > summary {
    color: var(--danger);
}

.security-action-danger[open] > summary {
    background: color-mix(in oklch, var(--danger) 6%, transparent);
}

.button.danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.button.danger:hover {
    background: color-mix(in oklch, var(--danger) 85%, #000);
    border-color: color-mix(in oklch, var(--danger) 85%, #000);
}

.button.small {
    padding: 4px 10px;
    min-height: 26px;
    font-size: 11.5px;
}

.security-tips ul {
    margin: 0;
    padding-left: 20px;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.65;
}

.security-tips li {
    margin-bottom: 4px;
}

.security-tips code {
    background: var(--bg-soft);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .totp-qr-wrap {
        flex-direction: column;
        gap: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Fakturace — Google Sheet style (v46)
 * Jedenácti-sloupcový grid: [☑ moje] [projekt] [fix] [od] [do] [dnů] [výsledek]
 * [poznámka] [☑ G chce] [☑ G odesl.] [✓ saved indicator]
 * Přepisuje starší jednodušší layout (3 sloupce) — používá stejné selektory
 * .invoicing-row + specifičtější .invoicing-panel scope.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Společný grid pro head + řádky — držím identické šířky, aby sloupce lícovaly.
   2026-05-11: Poznámka sloupec odstraněn úplně (nepoužíván). 10 sloupců.
   G-faktura má icon-only compact mode pod 1800px → sloupec stačí 200px max.
   Min total: ~1100 px usable content. */
.invoicing-panel .invoicing-table-head,
.invoicing-panel .invoicing-row {
    display: grid;
    grid-template-columns:
        32px                         /* ☑ Moje */
        minmax(180px, 1.5fr)         /* Projekt + badges */
        88px                         /* Fix částka */
        118px                        /* Od (date picker) */
        118px                        /* Do (date picker) */
        180px                        /* Odpracováno (H:MM input + preview "= 1:24 · 1,4 h" vedle) */
        minmax(130px, 1.2fr)         /* Výsledek (cena + decimal hint) */
        88px                         /* Leady (number + × price hint) */
        minmax(170px, 220px)         /* G-faktura (icon-only buttons < 1800px) */
        22px;                        /* ✓ saved */
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Nad 1800px (široký desktop) — G-faktura má víc místa pro plný text labels */
@media (min-width: 1800px) {
    .invoicing-panel .invoicing-table-head,
    .invoicing-panel .invoicing-row,
    .invoicing-panel .invoicing-group-total {
        grid-template-columns:
            32px
            minmax(180px, 1.5fr)
            90px
            120px
            120px
            190px                    /* Odpracováno — širší pro H:MM input + " = 1:24 · 1,4 h" preview */
            minmax(130px, 1.1fr)
            92px
            minmax(280px, 360px)         /* G-faktura s plnými labely */
            22px;
        gap: 12px;
    }

    /* Součet za klienta (víc projektů) zarovnaný do STEJNÉHO gridu jako řádek —
       částka padne přesně pod sloupec „Výsledek" (7.), tj. pod jednotlivé ceny.
       Pod 1800px zůstává jednoduchý flex (zarovnání doprava) z base pravidla. */
    .invoicing-panel .invoicing-group-total {
        display: grid;
        gap: 8px;                              /* sedí s řádkem (polish override má 8px) */
        padding: 6px 12px 2px;
        border-left: 1px solid transparent;    /* box model jako .invoicing-row (1px border) */
        border-right: 1px solid transparent;
        align-items: baseline;
    }
    .invoicing-panel .invoicing-group-total-label {
        grid-column: 1 / 7;                     /* zabírá check..Odpracováno, text doprava k částce */
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .invoicing-panel .invoicing-group-total-amount {
        grid-column: 7;                         /* sloupec „Výsledek" */
        text-align: right;
    }
}

/* Head — sticky pod top barem není potřeba (header není sticky), jen vizuální oddělení. */
.invoicing-panel .invoicing-table-head {
    padding: 6px 14px 10px;
    font-size: 10px;
    letter-spacing: 0.09em;
    font-weight: 620;
    text-transform: uppercase;
    color: var(--ink-4, #8a8a94);
    border-bottom: 1px solid var(--rule, #e5e5ea);
    margin-bottom: 10px;
}

.invoicing-panel .invoicing-table-head > span {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoicing-panel .invoicing-table-head .col-check,
.invoicing-panel .invoicing-table-head .col-g,
.invoicing-panel .invoicing-table-head .col-days,
.invoicing-panel .invoicing-table-head .col-fix,
.invoicing-panel .invoicing-table-head .col-result,
.invoicing-panel .invoicing-table-head .col-leads {
    text-align: center;
}

/* Samotný řádek — přepisuje starší `.invoicing-row { grid-template-columns: ... }`. */
.invoicing-panel .invoicing-row {
    padding: 10px 14px;
    background: var(--card, #fff);
    border: 1px solid var(--line, #e5e5ea);
    border-radius: var(--radius-md, 10px);
    margin-bottom: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
    margin: 0 0 6px;
}

.invoicing-panel .invoicing-row:hover {
    border-color: var(--line-strong, #d4d4d8);
}

.invoicing-panel .invoicing-row.is-pending {
    border-left: 3px solid var(--warn, #d97706);
}

/* is-sent = OBĚ fáze hotové (moje faktura + G-faktura). Klidná zelená stužka,
   pozadí čistě bílé, žádné ztmavení textu — jen tichý "OK" signál. */
.invoicing-panel .invoicing-row.is-sent {
    border-left: 4px solid var(--ok, #0f7b4a);
    background: var(--card, #fff);
}

.invoicing-panel .invoicing-row.is-sent .invoicing-row-link {
    color: var(--ink, #17191c);
}

.invoicing-panel .invoicing-row.is-client-level {
    border-left: 3px solid var(--brand, #5b5bd6);
    background: color-mix(in oklch, var(--brand, #5b5bd6) 4%, var(--card, #fff));
}

.invoicing-panel .invoicing-row.is-client-level.is-sent {
    background: var(--card, #fff);
    border-left: 4px solid var(--ok, #0f7b4a);
}

/* "Moje faktura odeslaná, ale G-faktura ještě zbývá" — řádek má is-pending
   (oranžový border) ale zároveň is-mine-sent. Žluté pozadí + výraznější border-left
   varují, že je ještě co dělat — odeslat Google fakturu klientovi.
   Tří-stavová logika: bílá = nezačal, žluté pozadí = napůl, bílá+zelený border = hotovo. */
.invoicing-panel .invoicing-row.is-pending.is-mine-sent {
    background: color-mix(in oklch, var(--warn, #d97706) 7%, var(--card, #fff));
    border-left: 4px solid var(--warn, #d97706);
}

/* Inline badge u jména — "📨 Pošli G-fakturu". Výrazná oranžová pill,
   která při scanu shora dolů vystřelí pozornost. */
.invoicing-g-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    background: var(--warn, #d97706);
    color: #fff;
    font-size: 11px;
    font-weight: 640;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.4;
}

/* Top panel "G-faktury k odeslání" — analogie setup-pending-panel,
   ale s warning paletou (oranžovou). Quick-jump na řádek klienta. */
.g-pending-panel {
    border: 1px solid color-mix(in oklch, var(--warn, #d97706) 30%, var(--line, #e5e5ea));
    background: color-mix(in oklch, var(--warn, #d97706) 4%, var(--card, #fff));
    margin-bottom: 16px;
}

.g-pending-panel .section-head h2 {
    color: var(--warn, #d97706);
    font-size: 16px;
}

.g-pending-panel .section-head p {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--ink-3, #4a4a52);
}

.g-pending-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 4px;
}

.g-pending-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 6px);
    background: var(--card, #fff);
    border: 1px solid color-mix(in oklch, var(--warn, #d97706) 18%, var(--line, #e5e5ea));
    transition: border-color 0.12s, transform 0.12s;
}

.g-pending-row:hover {
    border-color: var(--warn, #d97706);
}

.g-pending-row-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink, #17191c);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 540;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.g-pending-row-name strong {
    font-weight: 640;
}

.g-pending-row-name:hover {
    color: var(--warn, #d97706);
}

.g-pending-row-amount {
    font-size: 12px;
    color: var(--ink-muted, #71717a);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    white-space: nowrap;
}

.g-pending-row-settings {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 6px);
    color: var(--ink-muted, #71717a);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.12s, color 0.12s;
}

/* G-faktura status widget uvnitř g-pending řádku — kompaktnější pill verze
   stejných tlačítek jako v hlavním seznamu (.invoice-status-btn). JS handler
   initStandaloneGInvoiceWidget je napojí automaticky přes data-invoicing-ginvoice. */
.g-pending-row .g-pending-row-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: color-mix(in oklch, var(--warn, #d97706) 5%, transparent);
    border-radius: var(--radius-sm, 6px);
    padding: 3px 5px;
}
.g-pending-row .g-pending-row-status .invoice-status-btn {
    min-height: 30px;
    min-width: 34px;
    padding: 4px 7px;
    flex: 0 0 auto;
    border-radius: var(--radius-pill, 999px);
}
.g-pending-row .g-pending-row-status .invoice-status-btn .btn-icon {
    font-size: 12px;
}
.g-pending-row .g-pending-row-status .invoice-status-btn .btn-label {
    font-size: 10px;
}
@media (max-width: 1100px) {
    .g-pending-row .g-pending-row-status .invoice-status-btn .btn-label {
        display: none;
    }
    .g-pending-row .g-pending-row-status .invoice-status-btn {
        min-width: 32px;
        padding: 4px 6px;
    }
}

.g-pending-row-settings:hover {
    background: var(--paper-2, #f4f4f5);
    color: var(--ink, #17191c);
}

/* Anchor scroll target — když klikneš v panelu na klienta, hladký scroll + krátké
   zvýraznění group jako vizuální potvrzení "tohle je řádek, kterého ses dotkl". */
.invoicing-client-group {
    scroll-margin-top: 80px;
    transition: background 0.4s;
}

.invoicing-client-group:target {
    animation: g-pending-flash 1.5s ease-out;
}

@keyframes g-pending-flash {
    0%, 30% { background: color-mix(in oklch, var(--warn, #d97706) 15%, transparent); }
    100%    { background: transparent; }
}

/* Od/Do je u hodinovky nově editovatelné (ořez fakturovaných hodin), proto se už
   needituje ztlumení .is-type-hourly .invoicing-row-date — pravidlo odstraněno. */

/* Checkboxy (3 různé varianty — všechny mají stejnou strukturu) */
.invoicing-panel .invoicing-row-check {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    transition: background 0.12s ease;
}

.invoicing-panel .invoicing-row-check:hover {
    background: var(--paper-2, #f4f4f5);
}

.invoicing-panel .invoicing-row-check input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--ok, #0f7b4a);
    transition: transform 0.12s ease;
}

.invoicing-panel .invoicing-row-check input:checked {
    transform: scale(1.1);
}

/* G-faktura: 3-stavový widget (čeká / odesláno / přeskočeno) + Google Ads link.
   Žádný outer frame — tlačítka sedí volně v řádku, oddělené gap-em.
   Používá stejné .invoice-status-btn třídy jako Přehled, ale bez sevření do boxu.

   2026-05-11: compact mode — pro úzké viewporty (< 1800px) schováme labely a
   ponecháme jen ikony, plus tooltip s plným textem. Tím G-faktura sekce
   nepřekročí 200px a celý řádek se vejde do gridu (max 280px pro tento sloupec). */
.invoicing-panel .invoicing-row-ginvoice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    row-gap: 5px;
    max-width: 100%;
    /* wrap + visible: „Odeslat G-fakturu" se zalomí pod stavové chipy (úzký sloupec).
       Zarovnání NEpřebíjíme (default = jako před přidáním tlačítka: stavové chipy
       vlevo, G-faktura odkaz vpravo přes margin-left:auto). Tlačítko jde plnou
       šířkou na vlastní řádek dole — viz pravidlo .invoicing-send-ginvoice níž. */
    flex-wrap: wrap;
    min-width: 0;
    overflow: visible;
}

/* „Odeslat G-fakturu" v hlavním seznamu: úzký sloupec G-faktura ho nevejde vedle
   chipů, tak ho dáme na vlastní řádek pod ně jako akční lištu přes celou šířku
   buňky — čisté, nerozházené. (V horním panelu „G-faktury k odeslání" je tlačítko
   mimo tento widget, takže tam zůstává přirozená šířka vedle G-faktura odkazu.) */
.invoicing-panel .invoicing-row-ginvoice .invoicing-send-ginvoice {
    flex: 1 0 100%;
    justify-content: center;
    margin-top: 3px;
}

.invoicing-panel .invoicing-row-ginvoice .invoice-status-btn {
    min-height: 30px;
    min-width: 34px;
    padding: 5px 8px;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
}

.invoicing-panel .invoicing-row-ginvoice .invoice-status-btn .btn-icon {
    font-size: 13px;
}

.invoicing-panel .invoicing-row-ginvoice .invoice-status-btn .btn-label {
    font-size: 10.5px;
}

/* Pod 1800px viewport: kompaktní ikony only — textové labely schované,
   tooltip s plným popisem zůstává (title attribut na buttonu).
   Tím G-faktura sekce klesne z ~340px na ~200px. */
@media (max-width: 1800px) {
    .invoicing-panel .invoicing-row-ginvoice .invoice-status-btn .btn-label {
        display: none;
    }
    .invoicing-panel .invoicing-row-ginvoice .invoice-status-btn {
        min-width: 32px;
        padding: 5px 7px;
    }
}

/* Prázdný stav: klient nechce → placeholder „—" s odkazem do nastavení klienta. */
.invoicing-panel .invoicing-row-ginvoice.is-empty {
    border: 1px dashed var(--line, #e5e5ea);
    background: transparent;
    display: inline-grid;
    place-items: center;
    padding: 0;
    min-height: 34px;
}

.invoicing-panel .invoicing-row-ginvoice-link {
    display: inline-grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--ink-4, #a1a1aa);
    text-decoration: none;
    font-size: 15px;
    border-radius: var(--radius-sm, 6px);
}

.invoicing-panel .invoicing-row-ginvoice-link:hover {
    color: var(--brand, #5b5bd6);
    background: var(--paper-2, #f4f4f5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   G-faktura widget — 1:1 styling mimo .invoicing-panel kontext (Přehled / dashboard).
   Stejný vzhled jako uvnitř Fakturace, jen v jiném scope (.invoice-row místo .invoicing-row).
   Duplikujeme styly místo dropování .invoicing-panel prefixu, protože jednotlivá
   pravidla v @media (max-width: 1499px) výše nastavují grid-column/grid-row
   placement pro fakturační kartu — to by mimo Fakturaci rozbilo layout.
   ═══════════════════════════════════════════════════════════════════════════ */
.invoice-row .invoicing-row-ginvoice {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    row-gap: 5px;
    max-width: 100%;
    flex-wrap: wrap;
    min-width: 0;
    overflow: visible;
    justify-self: end;
}
.invoice-row .invoicing-row-ginvoice .invoice-status-btn {
    min-height: 30px;
    min-width: 34px;
    padding: 5px 8px;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
}
.invoice-row .invoicing-row-ginvoice .invoice-status-btn .btn-icon {
    font-size: 13px;
}
.invoice-row .invoicing-row-ginvoice .invoice-status-btn .btn-label {
    font-size: 10.5px;
}
@media (max-width: 1800px) {
    .invoice-row .invoicing-row-ginvoice .invoice-status-btn .btn-label {
        display: none;
    }
    .invoice-row .invoicing-row-ginvoice .invoice-status-btn {
        min-width: 32px;
        padding: 5px 7px;
    }
}
@media (max-width: 720px) {
    /* Na mobilu .invoice-row je 1-col grid (kolaps z 2-col na 1-col, viz výše
       @media 720px). Widget by se měl roztáhnout na celou šířku a 3 buttony
       být ekvidistantně rozložené pro tap target. */
    .invoice-row .invoicing-row-ginvoice {
        justify-self: stretch;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 4px;
        overflow: visible;
    }
    .invoice-row .invoicing-row-ginvoice .invoice-status-btn {
        min-width: 0;
        min-height: 36px;
    }
}

/* Jméno projektu / klienta */
.invoicing-panel .invoicing-row-name {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.invoicing-panel .invoicing-row-link {
    font-size: 14px;
    font-weight: 640;
    color: var(--ink, #17191c);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoicing-panel .invoicing-row-link:hover {
    color: var(--brand, #5b5bd6);
    text-decoration: underline;
}

/* Titulek řádku: vedle primárního odkazu (→ nastavení) je ještě malý „→"
   sekundární odkaz na dashboard (overview) projektu nebo klienta. */
.invoicing-panel .invoicing-row-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.invoicing-panel .invoicing-row-dashlink {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    color: var(--ink-muted, #71717a);
    background: var(--paper-2, #f4f4f5);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.invoicing-panel .invoicing-row-dashlink:hover {
    background: var(--brand, #5b5bd6);
    color: #fff;
    transform: translateX(1px);
}

.invoicing-panel .invoicing-row-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--ink-muted, #71717a);
}

.invoicing-panel .invoicing-row-badges .billing-badge {
    font-size: 9.5px;
}

.invoicing-panel .invoicing-row-badges .muted {
    font-size: 11px;
    color: var(--ink-4, #a1a1aa);
}

.invoicing-panel .invoicing-row-badges .invoicing-sent-label {
    color: var(--ok, #0f7b4a);
    font-weight: 640;
}

/* Fix částka — display only, mono tabulární čísla */
.invoicing-panel .invoicing-row-fix {
    font-size: 13px;
    font-weight: 560;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ink-2, #3f3f46);
    white-space: nowrap;
}

.invoicing-panel .invoicing-row-fix .muted {
    color: var(--ink-4, #a1a1aa);
    font-weight: 400;
}

/* Od / Do — date picker v inline-flex */
.invoicing-panel .invoicing-row-date {
    display: block;
    min-width: 0;
}

.invoicing-panel .invoicing-row-date input[type="date"] {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--line, #e5e5ea);
    border-radius: var(--radius-sm, 6px);
    background: var(--paper, #fafafa);
    color: var(--ink, #17191c);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.invoicing-panel .invoicing-row-date input[type="date"]:focus {
    outline: none;
    border-color: var(--brand, #5b5bd6);
    background: var(--card, #fff);
}

.invoicing-panel .invoicing-row-date input[type="date"]:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Odpracováno — jen číslo */
.invoicing-panel .invoicing-row-days {
    text-align: center;
    font-size: 13px;
    font-weight: 560;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2, #3f3f46);
}

.invoicing-panel .invoicing-row-days .muted {
    color: var(--ink-4, #a1a1aa);
}

/* Výsledek — hlavní částka, bold, right align */
.invoicing-panel .invoicing-row-result {
    text-align: right;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: grid;
    gap: 1px;
    line-height: 1.2;
}

.invoicing-panel .invoicing-row-result strong {
    font-weight: 700;
    color: var(--ink, #17191c);
}

.invoicing-panel .invoicing-row-result .muted {
    color: var(--ink-4, #a1a1aa);
}

.invoicing-panel .invoicing-row-result small {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--ink-4, #a1a1aa);
}

/* Leady — počet leadů × cena. Number input + suffix „×500" jako hint. */
.invoicing-panel .invoicing-row-leads {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.invoicing-panel .invoicing-row-leads input[type="number"] {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    border: 1px solid var(--line, #e5e5ea);
    border-radius: var(--radius-sm, 6px);
    background: var(--paper, #fafafa);
    color: var(--ink, #17191c);
    transition: border-color 0.12s ease, background 0.12s ease;
    -moz-appearance: textfield;
}

.invoicing-panel .invoicing-row-leads input[type="number"]::-webkit-inner-spin-button,
.invoicing-panel .invoicing-row-leads input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.5;
}

.invoicing-panel .invoicing-row-leads input[type="number"]:focus {
    outline: none;
    border-color: var(--brand, #5b5bd6);
    background: var(--card, #fff);
}

.invoicing-panel .invoicing-row-leads.is-disabled {
    opacity: 0.35;
}

.invoicing-panel .invoicing-row-leads.is-disabled input {
    cursor: not-allowed;
    background: transparent;
}

.invoicing-panel .invoicing-row-leads-hint {
    font-size: 10px;
    font-weight: 540;
    color: var(--ink-4, #a1a1aa);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Manuálně zadané hodiny — přepíše výpočet z time_entries. Placeholder zobrazí fallback. */
.invoicing-panel .invoicing-row-manual-hours {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.invoicing-panel .invoicing-row-manual-hours input[type="number"],
.invoicing-panel .invoicing-row-manual-hours input[type="text"] {
    flex: 0 0 62px;
    width: 62px;
    padding: 6px 8px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    border: 1px solid var(--line, #e5e5ea);
    border-radius: var(--radius-sm, 6px);
    background: var(--paper, #fafafa);
    color: var(--ink, #17191c);
    transition: border-color 0.12s ease, background 0.12s ease;
    -moz-appearance: textfield;
}

.invoicing-panel .invoicing-row-manual-hours input[type="number"]::-webkit-inner-spin-button,
.invoicing-panel .invoicing-row-manual-hours input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.5;
}

.invoicing-panel .invoicing-row-manual-hours input::placeholder {
    color: var(--ink-4, #a1a1aa);
    font-style: italic;
    opacity: 0.9;
}

.invoicing-panel .invoicing-row-manual-hours input:focus {
    outline: none;
    border-color: var(--brand, #5b5bd6);
    background: var(--card, #fff);
}

/* Ručně zadaná hodnota (tj. není prázdná) — jemně zvýraznit, že přepisuje auto-výpočet */
.invoicing-panel .invoicing-row-manual-hours input:not(:placeholder-shown) {
    border-color: color-mix(in srgb, var(--brand, #5b5bd6) 35%, var(--line, #e5e5ea));
    background: color-mix(in srgb, var(--brand, #5b5bd6) 4%, var(--paper, #fafafa));
    font-weight: 540;
}

.invoicing-panel .invoicing-row-manual-hours input:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
}

.invoicing-panel .invoicing-row-manual-hours-hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    font-weight: 540;
    color: var(--ink-4, #a1a1aa);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding: 4px 2px;
    transition: color 0.15s;
}

/* Live preview state — kdyz user napise hodnotu, hint se zmeni na "= 1:24 · 1,4 h" v zelene */
.invoicing-panel .invoicing-row-manual-hours-hint.has-value {
    color: #16a34a;
    font-weight: 600;
}

.invoicing-panel .invoicing-row-manual-hours-hint.is-invalid {
    color: #b91c1c;
    font-weight: 600;
}

/* Result sloupec — decimal hodiny hint pod cenou */
.invoicing-result-hours-detail,
.invoicing-result-decimal {
    display: block;
    font-size: 10.5px;
    color: var(--ink-4, #a1a1aa);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    margin-top: 1px;
}

.invoicing-result-decimal {
    display: inline;
    font-style: italic;
    margin-left: 4px;
}

/* Poznámka — full-width input */
.invoicing-panel .invoicing-row-note {
    display: block;
    min-width: 0;
}

.invoicing-panel .invoicing-row-note input[type="text"] {
    width: 100%;
    padding: 5px 8px;
    font-size: 11.5px;
    border: 1px solid var(--line, #e5e5ea);
    border-radius: var(--radius-sm, 6px);
    background: var(--paper, #fafafa);
    color: var(--ink, #17191c);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.invoicing-panel .invoicing-row-note input[type="text"]::placeholder {
    font-size: 11px;
    opacity: 0.55;
}

.invoicing-panel .invoicing-row-note input[type="text"]:focus {
    outline: none;
    border-color: var(--brand, #5b5bd6);
    background: var(--card, #fff);
}

/* Saved indikátor — zobrazí se po úspěšném AJAX save na pár sekund */
.invoicing-panel .invoicing-row-saved {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    color: var(--ok, #0f7b4a);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.invoicing-panel .invoicing-row-saved.is-saving {
    opacity: 0.5;
    color: var(--ink-muted, #71717a);
}

.invoicing-panel .invoicing-row-saved.is-saved {
    opacity: 1;
}

.invoicing-panel .invoicing-row-saved.is-error {
    opacity: 1;
    color: var(--danger, #b91c1c);
}

/* Client group — vizuální oddělení, jméno klienta jako podheadline */
.invoicing-panel .invoicing-client-group {
    margin-bottom: 18px;
}

.invoicing-panel .invoicing-client-name {
    font-size: 13px;
    font-weight: 700;
    margin: 12px 0 8px;
    padding: 0 4px 4px;
    color: var(--ink, #17191c);
    letter-spacing: -0.005em;
    border-bottom: 1px solid var(--line, #e5e5ea);
}

/* Klikatelné jméno klienta v hlavičce skupiny → dashboard klienta. */
.invoicing-panel .invoicing-client-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.invoicing-panel .invoicing-client-link:hover {
    color: var(--brand, #5b5bd6);
    border-bottom-color: currentColor;
}

/* OBSOLETE (květen 2026) — dříve forcovalo horizontal scroll desktopové
   tabulky pod 1380px viewportem (min-width: 1340px). Nahrazeno responzivním
   kartovým layoutem v @media (max-width: 1339px), který se aplikuje na všechny
   tablety i telefony bez horizontálního přetékání. Ponecháno jako prázdný
   fallback pro případ, že některý starý browser nepodporuje pozdější rule. */

/* Varovný banner — aktuálně používáme na Fakturaci, když chybí ALTER práva a schema ještě není migrované. */
.banner {
    border-radius: 12px;
    padding: 16px 18px;
    margin: 16px 0 24px;
    border: 1px solid var(--border);
    background: var(--card);
}
.banner p { margin: 6px 0 0; }
.banner strong { display: block; margin-bottom: 4px; font-weight: 620; }
.banner-warn {
    border-color: color-mix(in oklch, var(--warn) 40%, var(--border));
    background: color-mix(in oklch, var(--warn) 8%, var(--card));
}
.invoicing-schema-sql {
    margin: 10px 0 4px;
    padding: 12px 14px;
    background: color-mix(in oklch, var(--text) 5%, var(--card));
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 12px;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre;
    color: var(--text);
}

/* ─────────────────────────────────────────────────────────────────────────
   Google Tasks integrace — Inbox, detail, settings, vizuální odlišení
   Modrá ikona "G" = Google Tasks / Gmail původ. Drží Google Blue (#4285F4),
   ale v inkoust-tónovaném systému ji tlumíme na harmonický odstín.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --gtask-blue: #3367d6;        /* tlumená Google Blue, aby se netloukla s --accent */
    --gtask-blue-soft: color-mix(in oklch, var(--gtask-blue) 10%, var(--card));
    --gtask-blue-ring: color-mix(in oklch, var(--gtask-blue) 30%, transparent);
}

/* ── Settings: taby nahoře ────────────────────────────────────────────── */
.settings-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--rule);
    margin: 0 0 18px;
}
.settings-tabs .tab {
    padding: 8px 14px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: var(--ink-3);
    font-size: 13.5px;
    font-weight: 550;
    text-decoration: none;
    position: relative;
    top: 1px;
}
.settings-tabs .tab:hover { color: var(--ink); background: var(--paper-2); }
.settings-tabs .tab.active {
    color: var(--ink);
    background: var(--card);
    border-color: var(--rule);
    border-bottom-color: var(--card);
}

/* ── Settings: responsivní zobrazení na tabletu/mobilu ──────────────────
   Default desktop layout (>720px) je v `.settings-tabs` a dalších blocích
   výše/níže. Pod 720px potřebujeme:
   - Tabs zalamovat (jinak přetékají vpravo)
   - API field value zalomit (default ji max-width 340 + nowrap usekává)
   - Cron token row stackovat (token + buttons pod sebou)
   - Category chip body bez pevné min-width (jinak nevěstí do viewportu)
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* Tabs — pevné rámečky, 2 sloupce v gridu, žádný "useknutý" border. */
    .settings-tabs {
        flex-wrap: wrap;
        gap: 6px;
        border-bottom: 0;
        margin-bottom: 14px;
    }
    .settings-tabs .tab {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
        border-radius: 8px;
        border: 1px solid var(--rule);
        top: 0;
        padding: 9px 8px;
    }
    .settings-tabs .tab.active {
        background: var(--ink);
        color: var(--card);
        border-color: var(--ink);
    }

    /* API klíče — head pod sebou (label nahoře, value pod ním). */
    .api-field-head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .api-field-label {
        min-width: 0;
        flex: 0 0 auto;
    }
    .api-field-value {
        justify-content: flex-start;
        flex: 0 0 auto;
    }
    /* Hodnota se přizpůsobí šířce + dlouhé tokeny se zalomí. */
    .api-field-display {
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        word-break: break-all;
        flex: 1 1 auto;
    }
    .api-field-key {
        word-break: break-all;
    }
    /* Editační form popover — full width, žádné absolute pozicování. */
    .api-edit {
        display: block;
    }
    .api-edit-form {
        margin-top: 8px;
    }

    /* Cron token panel — token + buttons pod sebou. */
    .cron-token-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
    }
    .cron-token-value {
        flex: 0 0 auto;
        font-size: 12px;
        word-break: break-all;
    }
    .cron-token-actions {
        flex-wrap: wrap;
    }
    .cron-token-actions form,
    .cron-token-actions .button {
        flex: 1 1 calc(50% - 4px);
    }

    /* Category chips — popover se rozšíří na celou šířku. */
    .category-chip[open] {
        width: 100%;
    }
    .category-chip-body {
        min-width: 0;
        max-width: 100%;
    }

    /* Google + Fakturoid panels — flex header (Připojeno jako…) stack. */
    .google-connected-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .google-sync {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* Code blocks a long URLs uvnitř panel sekcí — zalomit. */
    .panel code,
    .panel pre,
    .panel .code-block {
        word-break: break-all;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    /* Section header text trochu menší, ať se vejde. */
    .panel .section-head h2 {
        font-size: 17px;
    }
    .panel .section-head h3 {
        font-size: 14px;
    }
}

/* Velmi úzká obrazovka — tabs do jednoho sloupce. */
@media (max-width: 420px) {
    .settings-tabs .tab {
        flex: 1 1 100%;
    }
}

/* ── Settings: Web Push subscriptions tabulka ─────────────────────────────
   Desktop = klasická data-table s 4 sloupci (Zařízení / Naposled / Vytvořeno / akce).
   Mobile (≤720px) = stack mode: každý <tr> je karta, každé <td> má pseudo-label
   z data-label atributu nebo z position. Bez data-label řeším přes nth-child
   selektor (HTML zatím data-label nepoužívá — udržujeme zpětnou kompatibilitu).
   ─────────────────────────────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13.5px;
}
.data-table th,
.data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.data-table th {
    font-weight: 600;
    color: var(--ink-3, #6e7075);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.data-table tbody tr:last-child td {
    border-bottom: 0;
}
.data-table td .muted.small {
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
    overflow-wrap: anywhere;
    font-size: 11px;
}
.data-table td form {
    margin: 0;
}

@media (max-width: 720px) {
    /* Karta-mode: tabulka i řádky jsou block, hlavička zmizí. */
    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table tr,
    .data-table th,
    .data-table td {
        display: block;
        width: 100%;
    }
    .data-table thead {
        position: absolute;
        left: -10000px;  /* visually hidden, screen readers OK */
    }
    .data-table tbody tr {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--rule);
        border-radius: 8px;
        background: var(--card, #fff);
    }
    .data-table tbody tr:last-child {
        margin-bottom: 0;
    }
    .data-table td {
        padding: 4px 0;
        border-bottom: 0;
    }
    /* Pseudo-labely podle pořadí cells — Zařízení/Naposled/Vytvořeno/akce.
       1. cell = strong title + endpoint preview pod ním (no extra label).
       2. cell = "Naposled použito:"
       3. cell = "Vytvořeno:" */
    .data-table td:nth-child(2)::before {
        content: 'Naposled použito: ';
        color: var(--ink-3, #6e7075);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-right: 4px;
    }
    .data-table td:nth-child(3)::before {
        content: 'Vytvořeno: ';
        color: var(--ink-3, #6e7075);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-right: 4px;
    }
    /* Smazat tlačítko — plnohodnotná šířka, snadno se trefí palcem. */
    .data-table td:last-child {
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px solid var(--rule);
    }
    .data-table td:last-child button {
        width: 100%;
        min-height: 36px;
    }
}

/* ── Settings: Google Tasks panel ─────────────────────────────────────── */
.google-settings .notice {
    padding: 12px 14px;
    border-radius: 8px;
    margin: 10px 0;
    font-size: 13.5px;
    line-height: 1.5;
}
.google-settings .notice-warn {
    background: color-mix(in oklch, var(--warn) 10%, var(--card));
    border: 1px solid color-mix(in oklch, var(--warn) 35%, var(--rule));
}
.google-settings .notice-info {
    background: var(--gtask-blue-soft);
    border: 1px solid color-mix(in oklch, var(--gtask-blue) 25%, var(--rule));
}
.google-settings .code-block {
    margin: 8px 0;
    padding: 8px 12px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    overflow-x: auto;
    user-select: all;
}
.google-connected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 14px;
}
.google-account {
    margin-left: 6px;
    font-family: ui-monospace, Menlo, monospace;
    color: var(--ink-2);
}
.google-sync {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
}
.google-sync h3 { margin: 0 0 4px; font-size: 14.5px; }
.google-sync p { margin: 0; font-size: 13px; color: var(--ink-3); }
.divider {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 14px 0;
}

/* ── Inbox page: list řádků ───────────────────────────────────────────── */
.last-sync-info { font-size: 12.5px; }
.count-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--gtask-blue);
    color: #fff;
    font-size: 11.5px;
    font-weight: 650;
    vertical-align: middle;
    margin-left: 4px;
}
.count-badge.muted {
    background: var(--ink-4);
}
.gtask-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gtask-row {
    display: grid;
    /* Fixní šířka pravého sloupce (ovládání) — bez fixu by se actions sloupec
       roztáhl podle obsahu rozbaleného distribute panelu (cyklická závislost). */
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--gtask-blue);
    border-radius: 8px;
    background: var(--card);
    transition: background 120ms ease, border-color 120ms ease;
}
.gtask-row:hover {
    background: var(--panel-hover);
}
.gtask-row.is-ignored {
    opacity: 0.6;
    border-left-color: var(--ink-4);
}
.gtask-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 620;
    color: var(--ink);
    margin-bottom: 6px;
}
.gtask-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gtask-blue);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    font-family: var(--f-ui);
    flex-shrink: 0;
}
.gtask-title-link {
    color: inherit;
    text-decoration: none;
}
.gtask-title-link:hover {
    color: var(--gtask-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gtask-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12.5px;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.gtask-meta strong { color: var(--ink-2); font-weight: 620; }
.gtask-meta-link {
    color: var(--gtask-blue);
    text-decoration: none;
    font-weight: 550;
}
.gtask-meta-link:hover { text-decoration: underline; }
.gtask-meta-item.muted, .gtask-meta-item.gtask-due {
    color: var(--ink-3);
}
.gtask-notes {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--ink-2);
    white-space: pre-wrap;
}
.gtask-current {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
}
.gtask-current a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gtask-current a:hover { color: var(--gtask-blue); }

.gtask-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}
.gtask-assign-form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.gtask-assign-form select {
    min-width: 140px;
    padding: 6px 8px;
    font-size: 12.5px;
}

/* Input pro název nového klienta — zobrazí se jen když user zvolí "+ Nový klient…" v selectu.
   JS toggle přes [hidden] attribute. Default skryt. */
.gtask-assign-form .gtask-new-client-name {
    flex: 1 1 100%;
    min-width: 160px;
    padding: 6px 10px;
    font-size: 12.5px;
    border: 1px solid var(--brand, #5b5bd6);
    background: color-mix(in oklch, var(--brand, #5b5bd6) 5%, var(--card, #fff));
    border-radius: var(--radius-sm, 6px);
}

.gtask-assign-form .gtask-new-client-name:focus {
    outline: 2px solid var(--brand, #5b5bd6);
    outline-offset: -1px;
}

.gtask-assign-form .gtask-new-client-name[hidden] {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Cron URL panel — Settings → API
   Token reveal/copy widget + per-cron URL list
   ──────────────────────────────────────────────────────────────────────── */

.cron-url-panel {
    margin-bottom: 24px;
}

.cron-token-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--paper-2, #f4f4f5);
    border: 1px solid var(--rule, #e5e5ea);
    border-radius: var(--radius-md, 10px);
    margin: 12px 0 20px 0;
}

.cron-token-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.cron-token-value {
    flex: 1 1 200px;
    padding: 6px 10px;
    background: var(--card, #fff);
    border: 1px solid var(--rule, #e5e5ea);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--ink, #17191c);
    word-break: break-all;
    user-select: all;
}

.cron-token-value.is-revealed {
    background: #fef9c3;
    border-color: #fde047;
    color: #713f12;
    font-weight: 600;
}

.cron-token-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cron-url-subhead {
    margin: 20px 0 4px 0;
    font-size: 14px;
    color: var(--ink, #17191c);
}

.cron-url-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cron-url-item {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--card, #fff);
    border: 1px solid var(--rule, #e5e5ea);
    border-radius: var(--radius-sm, 6px);
}

.cron-url-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cron-url-info strong {
    font-size: 13px;
}

.cron-url-info code {
    background: transparent;
    padding: 0;
    font-size: 11px;
}

.cron-url-value {
    padding: 5px 8px;
    background: var(--paper-2, #f4f4f5);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--ink-3, #71717a);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

@media (max-width: 720px) {
    .cron-url-item {
        grid-template-columns: 1fr;
    }
    .cron-url-value {
        white-space: normal;
    }
}

/* Copy success feedback */
.button.is-success {
    background: #16a34a !important;
    color: white !important;
    border-color: #16a34a !important;
}

.cron-url-help {
    margin-top: 20px;
    padding: 10px 14px;
    background: var(--paper-2, #f4f4f5);
    border-radius: 6px;
}

.cron-url-help summary {
    cursor: pointer;
    user-select: none;
}

.cron-url-help ol {
    margin: 8px 0 0 0;
    padding-left: 22px;
}

.cron-url-help li {
    margin: 4px 0;
}

/* Tlačítkový pruh pod selecty: [Přiřadit][Ignorovat] vždy v jedné řadě.
   Přiřadit je vytržen z assign form přes button[form="..."] aby se mohl párovat
   s Ignorovat formem (jiný action = jiný form, nelze nest forms). */
.gtask-actions-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.gtask-actions-buttons .gtask-ignore-form {
    margin: 0;
}

/* ── Detail google-tasku: iframe s e-mailem ─────────────────────────── */
.gmail-body-frame {
    width: 100%;
    min-height: 480px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: #fff;
}
.gmail-body-text {
    white-space: pre-wrap;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
    max-height: 640px;
    overflow-y: auto;
}

/* ── Sidebar link badge s count nezařazených Google tasků ───────────── */
.nav-gtask-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: auto;
    border-radius: 9px;
    background: var(--gtask-blue);
    color: #fff;
    font-size: 10.5px;
    font-weight: 650;
    font-family: var(--f-ui);
    line-height: 1;
    /* Inter renderuje číslici opticky mírně NAD geometrickým středem kruhu;
       drobný posun dolů ji vycentruje. box-sizing: border-box → výška 18px
       se nemění, kruh zůstává. Hodnota odměřená pro font-size 10.5px. */
    padding-top: 1.5px;
}

/* ── Dashboard widget "Google Tasks Inbox" ──────────────────────────── */
.gtask-dashboard-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--gtask-blue);
    border-radius: 8px;
    background: var(--card);
    text-decoration: none;
    color: inherit;
    margin: 10px 0;
    transition: background 120ms ease;
}
.gtask-dashboard-card:hover {
    background: var(--panel-hover);
}
.gtask-dashboard-card .gtask-badge {
    width: 32px;
    height: 32px;
    font-size: 14px;
}
.gtask-dashboard-card-body { flex: 1; }
.gtask-dashboard-card h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 620;
}
.gtask-dashboard-card p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
}
.gtask-dashboard-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--gtask-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 620;
    font-family: var(--f-ui);
}
.invoicing-schema-sql code { background: none; padding: 0; font-family: inherit; }

/* ================================================================
   OVERVIEW TAB — klient a projekt
   Karta se statistikami + responsive 2-column panel grid pro agregaci.
   ================================================================ */
.overview-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}

.overview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line, #e5e5ea);
    border-radius: var(--radius-md, 10px);
    background: var(--panel, #fff);
}

.overview-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.overview-stat-label {
    font-size: 11.5px;
    font-weight: 540;
    color: var(--ink-muted, #6e7075);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.overview-stat strong {
    font-size: 22px;
    font-weight: 640;
    line-height: 1.1;
    color: var(--ink, #17191c);
    font-variant-numeric: tabular-nums;
}

.overview-stat small {
    font-size: 11px;
    color: var(--ink-4, #a1a1aa);
}

.overview-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .overview-columns {
        grid-template-columns: 1fr;
    }
}

.overview-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 180px;
}

.overview-col--notes {
    grid-column: 1 / -1;
}

.overview-col .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.overview-col .section-head h2 {
    font-size: 15px;
    margin: 0;
}

.overview-col .section-head a.muted {
    font-size: 12px;
    color: var(--brand, #5b5bd6);
    text-decoration: none;
    white-space: nowrap;
}

.overview-col .section-head a.muted:hover {
    text-decoration: underline;
}

.overview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.overview-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-top: 1px solid var(--line, #e5e5ea);
}

.overview-list li:first-child {
    border-top: none;
    padding-top: 0;
}

.overview-list-main {
    font-size: 13px;
    color: var(--ink, #17191c);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.overview-list-main small {
    font-weight: 400;
    font-size: 11px;
    color: var(--ink-4, #a1a1aa);
}

.overview-list-meta {
    font-size: 11.5px;
    color: var(--ink-muted, #6e7075);
    font-variant-numeric: tabular-nums;
}

.overview-list-meta .overview-date {
    font-weight: 540;
    color: var(--ink, #17191c);
}

.overview-list-meta .change-meta-link {
    color: var(--brand, #5b5bd6);
    text-decoration: none;
}

.overview-list-meta .change-meta-link:hover {
    text-decoration: underline;
}

.overview-notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.overview-notes li {
    padding: 12px;
    border: 1px solid var(--line, #e5e5ea);
    border-radius: var(--radius-sm, 8px);
    background: var(--paper, #fafafa);
}

.overview-note-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.overview-note-head strong {
    font-size: 13px;
}

.overview-note-head .muted {
    font-size: 11px;
}

.overview-note-body {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-muted, #6e7075);
    white-space: pre-wrap;
}

/* Milestone color dot in overview lists */
.milestone-kind-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong, #d4d4d8);
    flex-shrink: 0;
}
.milestone-kind-dot.milestone-kind-launch   { background: var(--brand, #5b5bd6); }
.milestone-kind-dot.milestone-kind-release  { background: var(--ok, #2f9e44); }
.milestone-kind-dot.milestone-kind-meeting  { background: var(--warning, #f08c00); }
.milestone-kind-dot.milestone-kind-issue    { background: var(--danger, #e03131); }
.milestone-kind-dot.milestone-kind-note     { background: var(--ink-4, #a1a1aa); }

/* ================================================================
   GLOBAL GOOGLE ADS OVERVIEW (?page=ads_overview)
   ================================================================ */
.ads-overview-stats {
    margin-top: 8px;
}

/* ── Tab nav v Google Ads overview ─────────────────────────────────── */
/* ── Tasks source tabs (Moje úkoly / Z Google Tasks) ───────────────────── */
.tasks-source-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
    padding: 6px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.tasks-source-tabs .tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    background: transparent;
    text-decoration: none;
    transition: all 0.15s;
}
.tasks-source-tabs .tab:hover {
    background: rgba(91, 91, 214, 0.06);
    color: var(--ink-1);
}
.tasks-source-tabs .tab.active {
    background: var(--ink-1, #111827);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.tasks-source-tabs .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tasks-source-tabs .tab.active .tab-badge {
    background: #fff;
    color: var(--ink-1, #111827);
}
@media (max-width: 700px) {
    .tasks-source-tabs { padding: 4px; }
    .tasks-source-tabs .tab { padding: 8px 12px; font-size: 13px; }
}

/* ── Entity links — barevné chip-style odkazy pro klient/projekt/Ads účet ── */
/*
   Cíl: vizuální oddělení tří typů entit, protože klient a projekt se často
   jmenují stejně (automycka.cz). Barva říká "tohle je odkaz na X".
*/
.entity-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Klient = brand modrá */
.entity-link.entity-client {
    background: rgba(91, 91, 214, 0.10);
    color: #4338ca;
}
.entity-link.entity-client:hover {
    background: rgba(91, 91, 214, 0.20);
    color: #312e81;
}
/* Projekt = amber/oranžová */
.entity-link.entity-project {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}
.entity-link.entity-project:hover {
    background: rgba(245, 158, 11, 0.22);
    color: #92400e;
}
/* Ads účet = zelená (Google brand inspired) */
.entity-link.entity-ads-account {
    background: rgba(34, 197, 94, 0.10);
    color: #15803d;
}
.entity-link.entity-ads-account:hover {
    background: rgba(34, 197, 94, 0.20);
    color: #14532d;
}

/* Pokud je víc entity-linků za sebou, drobný gap */
.entity-link + .entity-link {
    margin-left: 4px;
}

/* Credit tab — vícero entity linků v buňce → drobné spacing */
.ads-credit-table-v2 td .entity-link {
    margin-right: 4px;
    margin-bottom: 2px;
}

.ads-overview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 18px 0 24px;
    padding: 6px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ads-overview-tabs .tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    background: transparent;
    text-decoration: none;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.ads-overview-tabs .tab:hover {
    background: rgba(91, 91, 214, 0.06);
    color: var(--ink-1);
}
.ads-overview-tabs .tab.active {
    background: var(--ink-1, #111827);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.ads-overview-tabs .tab.active:hover {
    background: var(--ink-1, #111827);
    color: #fff;
}
@media (max-width: 700px) {
    .ads-overview-tabs { padding: 4px; gap: 3px; }
    .ads-overview-tabs .tab { padding: 8px 10px; font-size: 13px; }
}

/* ── Tab "Rychlé odkazy" ───────────────────────────────────────────── */
.ads-links-table .ads-links-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.ads-links-table .ads-links-cell a {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(96, 165, 250, 0.08);
    color: var(--brand, #5b5bd6);
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
    transition: background 0.15s;
}
.ads-links-table .ads-links-cell a:hover {
    background: rgba(96, 165, 250, 0.18);
    text-decoration: none;
}

/* Staré .ads-credit-* styly (manual topup-tracking) odstraněny 2026-06-09 —
   v2 Kredit tab používá jen .ads-credit-table-v2 (výš). */

.ads-overview-clients {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}

.ads-overview-client {
    border: 1px solid var(--line, #e5e5ea);
    border-radius: var(--radius-md, 10px);
    background: var(--paper, #fafafa);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Uvnitř je 11sloupcová tabulka — když se do karty nevejde, dovolíme horizontální scroll. */
    overflow-x: auto;
}

/* Tabulka účtů uvnitř karty klienta — kompaktnější padding a hustší písmo,
   aby se 11 sloupců vešlo i na ~1200px šířce. */
.ads-overview-client .ads-metrics-table {
    font-size: 12px;
}

.ads-overview-client .ads-metrics-table th,
.ads-overview-client .ads-metrics-table td {
    padding: 6px 8px;
    white-space: nowrap;
}

.ads-overview-client .ads-metrics-table td:first-child,
.ads-overview-client .ads-metrics-table td:nth-child(2) {
    /* Jméno účtu a jméno projektu mohou být dlouhé — povolíme zlom. */
    white-space: normal;
    max-width: 260px;
}

.ads-overview-client > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line, #e5e5ea);
    padding-bottom: 8px;
}

.ads-overview-client h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 640;
}

.ads-overview-client h3 a {
    color: var(--ink, #17191c);
    text-decoration: none;
}

.ads-overview-client h3 a:hover {
    text-decoration: underline;
}

.ads-overview-client-meta {
    font-size: 11.5px;
    color: var(--ink-muted, #6e7075);
    font-variant-numeric: tabular-nums;
}

.ads-overview-client-meta strong {
    color: var(--ink, #17191c);
    font-weight: 640;
}

.ads-overview-accounts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ads-overview-accounts li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-top: 1px solid var(--line, #e5e5ea);
}

.ads-overview-accounts li:first-child {
    border-top: none;
    padding-top: 0;
}

.ads-overview-account-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.ads-overview-account-link {
    color: var(--brand, #5b5bd6);
    font-weight: 540;
    text-decoration: none;
    font-size: 13px;
}

.ads-overview-account-link:hover {
    text-decoration: underline;
}

.ads-overview-account-head .muted {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-4, #a1a1aa);
}

.ads-overview-account-meta {
    font-size: 11.5px;
    color: var(--ink-muted, #6e7075);
}

.ads-overview-account-meta a {
    color: var(--ink, #17191c);
    text-decoration: none;
    border-bottom: 1px dashed var(--line-strong, #d4d4d8);
}

.ads-overview-account-meta a:hover {
    border-bottom-style: solid;
}

.ads-overview-changes {
    color: var(--ink-4, #a1a1aa);
}

.ads-overview-changes.is-active {
    color: color-mix(in srgb, var(--brand, #5b5bd6) 75%, var(--ink, #17191c));
    font-weight: 600;
}

.ads-overview-recent li {
    border-top: 1px solid var(--line, #e5e5ea);
    padding: 10px 0;
}

/* ================================================================
   ADS METRICS PANEL (tab Google Ads v projektu)
   ================================================================ */
.ads-metrics-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ads-metrics-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ads-metrics-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    margin: 12px 0;
    padding: 16px;
    border: 1px solid var(--line, #e5e5ea);
    border-radius: var(--radius-md, 10px);
    background: var(--paper, #fafafa);
}

.ads-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ads-metric-label {
    font-size: 11px;
    font-weight: 540;
    color: var(--ink-muted, #6e7075);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.ads-metric strong {
    font-size: 18px;
    font-weight: 640;
    line-height: 1.15;
    color: var(--ink, #17191c);
    font-variant-numeric: tabular-nums;
}

.ads-metric small {
    font-size: 11px;
    color: var(--ink-4, #a1a1aa);
}

.ads-metrics-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 12.5px;
}

.ads-metrics-table th,
.ads-metrics-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line, #e5e5ea);
}

.ads-metrics-table th {
    font-weight: 600;
    color: var(--ink-muted, #6e7075);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ads-metrics-table th.num,
.ads-metrics-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ads-metrics-table td small.muted {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
}

.ads-metrics-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand, #5b5bd6) 3%, transparent);
}

/* ── Nastavení → API klíče a tokeny ───────────────────────────────────── */
.api-settings-intro .section-head p code {
    font-size: 12.5px;
    background: color-mix(in srgb, var(--brand, #5b5bd6) 6%, transparent);
    padding: 1px 6px;
    border-radius: 4px;
}

.api-settings-group {
    margin-bottom: 16px;
}

.api-field-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.api-field {
    border: 1px solid var(--line, #e5e5ea);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--panel-bg, #fff);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.api-field-empty {
    background: color-mix(in srgb, var(--ink-muted, #6e7075) 3%, transparent);
    border-style: dashed;
}

.api-field-override {
    border-left: 3px solid var(--brand, #5b5bd6);
    padding-left: 12px;
}

.api-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.api-field-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    flex: 1 1 200px;
}

.api-field-label strong {
    font-weight: 600;
    color: var(--ink, #111);
}

.api-field-key {
    font-size: 11px;
    color: var(--ink-muted, #6e7075);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: transparent;
    padding: 0;
}

.api-field-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 280px;
}

.api-field-display {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--ink, #111);
    background: color-mix(in srgb, var(--line, #e5e5ea) 40%, transparent);
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

.api-field-empty .api-field-display {
    color: var(--ink-muted, #6e7075);
    font-style: italic;
    font-family: inherit;
    letter-spacing: normal;
}

.api-field .tag {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand, #5b5bd6) 14%, transparent);
    color: color-mix(in srgb, var(--brand, #5b5bd6) 70%, var(--ink, #111));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.api-field .tag.muted {
    background: color-mix(in srgb, var(--ink-muted, #6e7075) 12%, transparent);
    color: var(--ink-muted, #6e7075);
}

.api-field-hint {
    margin: 8px 0 0;
    font-size: 12px;
}

.api-field-actions {
    margin-top: 10px;
}

.api-edit {
    display: inline-block;
}

.api-edit > summary {
    list-style: none;
    cursor: pointer;
}

.api-edit > summary::-webkit-details-marker {
    display: none;
}

.api-edit[open] > summary {
    margin-bottom: 8px;
}

.api-edit-form {
    padding: 12px;
    background: color-mix(in srgb, var(--brand, #5b5bd6) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand, #5b5bd6) 25%, var(--line, #e5e5ea));
    border-radius: 8px;
    margin-top: 4px;
}

.api-edit-form input[type="text"],
.api-edit-form input[type="password"] {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.api-edit-help {
    font-size: 11.5px;
    margin: 6px 0 0;
}

.api-edit-form .form-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ── Meetings: recorder UI + list + detail ─────────────────────────── */
.meeting-recorder {
    padding: 14px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--card);
}
.meeting-recorder-error {
    background: #fef2f2;
    color: #991b1b;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
}
.meeting-record-start {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 10px 18px;
}
.meeting-record-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
}
.meeting-recorder-status {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}
.meeting-record-pulse {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #ef4444;
    animation: meetingPulse 1.4s ease-in-out infinite;
}
@keyframes meetingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50%      { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}
.meeting-recorder-time {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink-1);
    margin-left: auto;
    font-size: 18px;
    font-weight: 600;
}
.meeting-recorder-meter {
    height: 8px;
    background: var(--rule);
    border-radius: 999px;
    overflow: hidden;
    margin: 12px 0;
}
.meeting-recorder-meter-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #f59e0b 70%, #ef4444);
    width: 0%;
    transition: width 80ms linear;
}
.meeting-recorder-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.meeting-recorder-uploading {
    text-align: center;
    padding: 20px;
}
.meeting-recorder-uploading progress {
    width: 100%;
    height: 12px;
    margin-top: 8px;
}

/* List schůzek u klienta */
.meeting-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Meeting item = řádek v listu schůzek. CSS grid s 2 sloupci:
   [link s content | delete button (compact)].
   Grid je deterministický — žádné position:absolute hacks.
   ───────────────────────────────────────────────────────── */
.meeting-item {
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    background: #fff;
}
.meeting-item-link {
    display: block;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.meeting-item-link:hover {
    background: var(--panel-hover, rgba(0,0,0,0.02));
}
.meeting-item-delete {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    border-left: 1px solid var(--rule);
}
.meeting-item-delete button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 16px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: background 0.15s ease, color 0.15s ease;
    min-width: 44px;
}
.meeting-item-delete button:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.meeting-item-delete button:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: -2px;
}
.meeting-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.meeting-item-meta {
    margin-top: 4px;
    font-size: 12px;
}
.meeting-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.meeting-status-pending      { background: #f3f4f6; color: #4b5563; }
.meeting-status-transcribing { background: #dbeafe; color: #1e40af; }
.meeting-status-analyzing    { background: #fef3c7; color: #92400e; }
.meeting-status-done         { background: #d1fae5; color: #065f46; }
.meeting-status-failed       { background: #fee2e2; color: #991b1b; }

/* Detail schůzky */
.meeting-processing {
    background: linear-gradient(0deg, rgba(59, 130, 246, 0.04), transparent);
    border-color: #93c5fd;
}
.meeting-processing h2 { margin: 0 0 8px; }
.meeting-failed {
    background: #fef2f2;
    border-color: #fecaca;
}
.meeting-summary p {
    line-height: 1.6;
}
/* Skupinový nadpis "Moje úkoly" / "Úkoly pro klienta" */
.meeting-tasks-group-heading {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2, #2f3338);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 18px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.meeting-tasks-group-heading:first-child { margin-top: 8px; }
.meeting-tasks-group-icon {
    font-size: 16px;
    text-transform: none;
}

.meeting-tasks-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.meeting-task-row {
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    font-size: 13.5px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
}
.meeting-task-row:has(.meeting-task-link:hover) {
    border-color: var(--ink-3, #94a3b8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}
.meeting-tasks-client .meeting-task-row {
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
}
.meeting-task-status {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.meeting-task-status-todo        { background: #fff7ed; color: #9a3412; }
.meeting-task-status-in_progress { background: #eff6ff; color: #1e40af; }
.meeting-task-status-done        { background: #f0fdf4; color: #166534; }
.meeting-task-status-blocked     { background: #fef2f2; color: #991b1b; }

/* Klient info row (read-only AI návrhy s ownerem='client', ne CRM tasks) */
.meeting-task-row-info {
    cursor: default;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}
.meeting-task-row-info:hover {
    /* žádné lift / shadow — info-only, neklikatelné */
    transform: none;
    box-shadow: none;
    border-color: var(--rule);
}
.meeting-task-row-main {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.meeting-task-row-info .meeting-task-desc {
    width: 100%;
    flex-basis: 100%;
    margin: 4px 0 0;
    line-height: 1.45;
}
.meeting-task-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.meeting-task-row-actions .inline-form {
    margin: 0;
}
.meeting-task-row-actions .ghost.icon {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--ink-3, #6b7280);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.meeting-task-row-actions .ghost.icon:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--ink, #17191c);
    border-color: var(--rule);
}
.meeting-task-row-actions .ghost.icon.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Toggle group — 3 viditelné akce: Do mailu / Ignor / Smaž.
   Current state je `is-current` (= disabled, highlighted). */
.meeting-task-toggle-group {
    display: flex;
    gap: 4px;
    align-items: center;
}
.meeting-task-toggle-group .inline-form { margin: 0; }
.toggle-btn {
    background: transparent;
    border: 1px solid var(--rule, #d9dce1);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3, #6b7280);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
}
.toggle-btn-icon { font-size: 12px; }
.toggle-btn-label { font-size: 11.5px; }
.toggle-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
    color: var(--ink, #17191c);
    border-color: var(--ink-3, #9ca3af);
}

/* is-current = aktuální stav (disabled, highlighted background) */
.toggle-btn.is-current {
    cursor: default;
    opacity: 1;
}
.toggle-btn-active.is-current {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}
.toggle-btn-ignore.is-current {
    background: #e5e7eb;
    color: #374151;
    border-color: #9ca3af;
}

/* Hover states pro non-current — predikce změny stavu */
.toggle-btn-active:hover:not(:disabled) {
    background: #ecfdf5;
    color: #065f46;
    border-color: #6ee7b7;
}
.toggle-btn-ignore:hover:not(:disabled) {
    background: #f3f4f6;
    color: #374151;
    border-color: #9ca3af;
}
.toggle-btn-delete:hover:not(:disabled) {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fca5a5;
}

/* Mobile — schovat labely, jen ikonky */
@media screen and (max-width: 700px) {
    .toggle-btn { padding: 6px 8px; }
    .toggle-btn-label { display: none; }
}
.meeting-task-state {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.meeting-task-state-approved { background: #f0fdf4; color: #166534; }
.meeting-task-state-ignored  { background: #f3f4f6; color: #6b7280; }
.meeting-task-state-proposal { background: #fef3c7; color: #92400e; }

/* Ignorovaný řádek — tlumený, ale stále viditelný */
.meeting-task-row-info.is-ignored {
    background: #fafafa;
    border-style: dashed;
    opacity: 0.72;
}
.meeting-task-row-info.is-ignored:hover {
    opacity: 1;
}
.meeting-task-row-info.is-ignored strong {
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.3);
    text-decoration-thickness: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   AssemblyAI multi-speaker UI — Schůzky
   Speakers list, action items, follow-ups, chapters.
   ═══════════════════════════════════════════════════════════════════════ */

.speakers-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.speaker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.speaker-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #eff6ff;
    color: #1e40af;
    flex-shrink: 0;
}
.speaker-badge-a { background: #dbeafe; color: #1e3a8a; }
.speaker-badge-b { background: #dcfce7; color: #14532d; }
.speaker-badge-c { background: #fef3c7; color: #78350f; }
.speaker-badge-d { background: #fce7f3; color: #831843; }
.speaker-badge-e { background: #ede9fe; color: #4c1d95; }
.speaker-rename-form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.speaker-rename-form input[type="text"] {
    flex: 1;
    min-width: 140px;
    padding: 5px 9px;
    font-size: 13px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--card);
}
.speaker-stats {
    font-size: 12px;
    flex-shrink: 0;
}

.action-items-list,
.followups-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Speakers bulk save button — pod listem účastníků, vpravo. */
.speakers-bulk-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}
.speakers-bulk-actions [data-speakers-save-status] {
    font-size: 12px;
}

/* Section head s tlačítkem napravo (Zkopírovat shrnutí, Úkoly pro klienta). */
.section-head-with-action {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.section-head-with-action > div { min-width: 0; flex: 1; }
.section-head-with-action > button { flex-shrink: 0; }

/* Collapsible panels — generic toggle pro všechny section.panel v meeting detail.
   JS handler v app.js přidá .panel-collapse-toggle button do .section-head.
   Klik na header → toggle data-collapsed attribute → CSS schová obsah. */
.section-head-collapsible {
    cursor: pointer;
    user-select: none;
    /* Hover bez layout shift — jen background change, žádné margin/padding */
    transition: background-color 0.12s ease;
    border-radius: 6px;
    /* Slight vertical padding aby hover background nelepil na okraj */
    padding-top: 2px;
    padding-bottom: 2px;
}
.section-head-collapsible:hover {
    background-color: rgba(0, 0, 0, 0.025);
}
/* Layout fix: caret VLEVO, h2 hned za, akce VPRAVO.
   Existing .section-head má `justify-content: space-between`, což by jinak
   odhodilo h2 na pravou stranu (= prázdno mezi caret a h2). margin-right: auto
   na h2 zabezpečí, že h2 zabere left half, vše po něm jde doprava. */
.section-head-collapsible > .panel-collapse-toggle {
    align-self: center;
}
.section-head-collapsible > h2 {
    margin-right: auto;
}
/* V section-head-with-action (= má div s h2+p wrapper) margin-right na ten div */
.section-head-collapsible.section-head-with-action > div:first-of-type {
    margin-right: auto;
    flex: 1;
}
.panel-collapse-toggle {
    background: transparent;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--ink-3, #6b7280);
    transition: transform 0.2s ease, color 0.15s ease;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    border-radius: 4px;
}
.panel-collapse-toggle:hover { color: var(--ink, #17191c); }
.panel-collapse-toggle svg { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
section.panel[data-collapsed="1"] .panel-collapse-toggle svg { transform: rotate(-90deg); }

/* Smooth collapse přes CSS grid 1fr/0fr trick (moderní pattern).
   JS handler obalí non-header content do .panel-collapse-body při init.
   Grid template rows animuje od `1fr` (= rozbaleno) na `0fr` (= zabaleno),
   což je single property = smooth s transition. */
section.panel[data-collapse-init="1"] {
    display: grid;
    grid-template-rows: auto 1fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
section.panel[data-collapse-init="1"][data-collapsed="1"] {
    grid-template-rows: auto 0fr;
}
.panel-collapse-body {
    overflow: hidden;
    min-height: 0;
    transition: opacity 0.18s ease, padding 0.25s ease, margin 0.25s ease;
}
section.panel[data-collapsed="1"] .panel-collapse-body {
    opacity: 0;
}
section.panel[data-collapsed="1"] .section-head { margin-bottom: 0; }
section.panel[data-collapsed="1"] .section-head p { display: none; }

/* Ignorované návrhy — collapsible (jako "dokončené úkoly"). */
.meeting-ignored {
    background: #fafafa;
    border: 1px solid var(--rule);
    opacity: 0.85;
}
.meeting-ignored details { margin: 0; }
.meeting-ignored-summary {
    cursor: pointer;
    user-select: none;
    padding: 8px 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.meeting-ignored-summary:hover { opacity: 1; }
.meeting-ignored-icon { font-size: 18px; }
.meeting-ignored-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.meeting-ignored-item {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.meeting-ignored-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.meeting-ignored-desc {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
}
.meeting-ignored-revive {
    margin: 6px 0 0;
}

/* Meeting review reuses .dictation-task styling. Plus filter chipy + bulk akce. */
.meeting-review-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.meeting-review-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.meeting-review-filters .chip {
    cursor: pointer;
    user-select: none;
}
.meeting-review-bulk {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.meeting-review-bulk .ghost.small {
    padding: 4px 10px;
    font-size: 12px;
}

@media screen and (max-width: 700px) {
    .meeting-review-controls {
        flex-direction: column;
        gap: 10px;
    }
    .meeting-review-filters,
    .meeting-review-bulk {
        width: 100%;
    }
}
.action-item {
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--card);
}
.action-item-me     { border-left: 3px solid #2563eb; }
.action-item-client { border-left: 3px solid #f59e0b; background: #fffbeb; }
.action-item-other  { border-left: 3px solid #6b7280; }
.action-item-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.action-item-owner {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
}
.action-item-priority {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
}
.action-item-priority-low    { background: #f3f4f6; color: #374151; }
.action-item-priority-medium { background: #dbeafe; color: #1e40af; }
.action-item-priority-high   { background: #fed7aa; color: #9a3412; }
.action-item-priority-urgent { background: #fee2e2; color: #991b1b; }
.action-item-due,
.action-item-speaker {
    font-size: 12px;
}
.action-item-desc {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.followup-item {
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    background: #fffbeb;
}
.followup-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.followup-icon {
    font-size: 14px;
}
.followup-context {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.chapters-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: chapter;
}
.chapter-item {
    padding: 8px 10px;
    border-left: 2px solid var(--rule);
    margin-left: 8px;
    position: relative;
}
.chapter-item::before {
    counter-increment: chapter;
    content: counter(chapter);
    position: absolute;
    left: -12px;
    top: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--rule);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
}
.chapter-time {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    color: var(--ink-3);
    margin-right: 8px;
    min-width: 36px;
}
.chapter-summary {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
}

/* ── Floating recorder overlay — fixed bottom-right ─────────────────── */
.meeting-overlay {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    background: var(--card);
    border: 2px solid #ef4444;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 14px;
    width: 320px;
    max-width: calc(100vw - 40px);
    font-family: var(--f-ui);
    font-size: 13px;
    color: var(--ink-1);
    transition: width 200ms ease, padding 200ms ease;
}
.meeting-overlay[hidden] { display: none !important; }

/* Compact mode (sbaleno) */
.meeting-overlay.is-compact {
    width: auto;
    padding: 8px 12px;
    border-width: 1px;
}
.meeting-overlay.is-compact .meeting-overlay-full { display: none; }
.meeting-overlay:not(.is-compact) .meeting-overlay-compact { display: none; }

.meeting-overlay-error {
    background: #fef2f2;
    color: #991b1b;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
}

.meeting-overlay-compact {
    display: flex;
    align-items: center;
    gap: 10px;
}
.meeting-overlay-time-compact {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink-1);
}

.meeting-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.meeting-overlay-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.meeting-overlay-context {
    font-size: 11.5px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.meeting-overlay-permission {
    display: grid;
    gap: 4px;
    padding: 10px;
    margin: 8px 0 2px;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    background: #eff6ff;
    color: #1e3a5f;
    line-height: 1.4;
}
.meeting-overlay-permission[hidden] { display: none !important; }
.meeting-overlay-permission span { font-size: 12px; }
.meeting-overlay-time {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 32px;
    font-weight: 700;
    color: var(--ink-1);
    text-align: center;
    margin: 4px 0 8px;
    letter-spacing: 0.04em;
}
.meeting-overlay-meter {
    height: 6px;
    background: var(--rule);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}
.meeting-overlay-meter-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #f59e0b 70%, #ef4444);
    width: 0%;
    transition: width 80ms linear;
}

.meeting-overlay-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.meeting-overlay-controls button {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    padding: 6px 10px;
    min-height: 32px;
}
.meeting-overlay-controls button.danger {
    flex: 0 0 auto;
}

.meeting-overlay-btn {
    background: transparent !important;
    border: none !important;
    color: var(--ink-3) !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    min-height: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}
.meeting-overlay-btn:hover { color: var(--ink-1) !important; }

.meeting-overlay-uploading {
    margin-top: 10px;
    padding: 8px;
    background: rgba(59, 130, 246, 0.06);
    border-radius: 6px;
    text-align: center;
}
.meeting-overlay-uploading progress {
    width: 100%;
    height: 8px;
    margin-top: 4px;
}

/* Pulsing red dot — sdílené s meeting-recorder UI */
.meeting-overlay .meeting-record-pulse {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #ef4444;
    animation: meetingPulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

/* ── Dictations: review screen — návrhy úkolů s checkbox approve ────── */
.dictation-tasks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dictation-task {
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--card);
}
.dictation-task-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--rule);
}
.dictation-approve-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ink-1) !important;
}
.dictation-approve-label input { margin: 0; }
.dictation-confidence {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dictation-task-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dictation-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 600px) {
    .dictation-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile topbar + hamburger + sidebar drawer (≤700 px)
   Default schované, na desktop neviditelné.
   ═══════════════════════════════════════════════════════════════════════ */
.mobile-topbar { display: none; }
.mobile-nav-backdrop { display: none; }

@media (max-width: 700px) {
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: var(--ink, #111827);
        color: var(--paper, #f4f5f7);
        position: fixed;          /* fixed = vždy nahoře, i při scrollu */
        top: 0;
        left: 0;
        right: 0;
        z-index: 250;
        height: 56px;
        box-sizing: border-box;
        padding-top: max(10px, env(safe-area-inset-top, 10px));
        height: calc(56px + max(0px, env(safe-area-inset-top, 0px)));
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }
    /* Padding pro main aby content nezačínal pod fixed topbarem */
    body {
        padding-top: calc(56px + max(0px, env(safe-area-inset-top, 0px)));
    }
    .mobile-nav-toggle {
        background: transparent !important;
        border: 0 !important;
        color: inherit !important;
        font-size: 22px !important;
        line-height: 1 !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        cursor: pointer !important;
        min-height: 0 !important;
    }
    .mobile-topbar-brand {
        flex: 1;
        font-weight: 600;
        font-size: 15px;
        color: inherit;
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-topbar-badge {
        background: #ef4444;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Klikatelný badge — vede na ?page=notifications, nebo otevírá sidebar */
        cursor: pointer;
        border: 0;
        text-decoration: none;
        font-family: inherit;
        line-height: 1;
        /* Stejná optická korekce vertikálního středu číslice jako u
           .nav-gtask-badge (Inter), odměřeno pro font-size 12px / výšku 22px. */
        padding-top: 1px;
        transition: transform 120ms ease, background 120ms ease;
    }
    .mobile-topbar-badge:hover,
    .mobile-topbar-badge:focus-visible {
        background: #dc2626;
        transform: scale(1.08);
        outline: none;
    }
    .mobile-topbar-badge:active {
        transform: scale(0.95);
    }

    /* Backdrop za sidebarem */
    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
    }
    body.is-mobile-nav-open .mobile-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Sidebar default skrytý — slide z levé strany */
    .app-shell {
        grid-template-columns: 1fr !important;
        display: block !important;
    }
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 80%;
        max-width: 320px;
        height: 100vh !important;
        height: 100dvh !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 16px 0 !important;
        background: var(--paper-2, #eceef2);
        z-index: 300;
        transform: translateX(-100%);
        transition: transform 240ms ease;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }
    body.is-mobile-nav-open .sidebar {
        transform: translateX(0);
    }
    .sidebar .brand {
        padding: 0 16px 12px;
        font-size: 16px;
        flex: 0 0 auto !important;
    }
    .sidebar .nav {
        display: flex !important;
        flex-direction: column !important;
        grid-auto-flow: initial !important;
        grid-auto-columns: initial !important;
        order: initial !important;
        margin: 0 !important;
        gap: 2px;
        padding: 0 8px;
    }
    .sidebar .nav-link {
        justify-content: flex-start !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        border-radius: 6px;
    }
    .sidebar .nav-section {
        padding: 12px 12px 4px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ink-3);
    }
    .sidebar-bottom {
        padding: 12px 8px !important;
        margin-top: auto;
        border-top: 1px solid var(--rule);
    }
    .sidebar-status {
        margin: 8px 12px;
    }

    /* Skrýt sticky timer-bar přes top — nepleť se s topbar */
    .timer-bar { top: 56px !important; }

    /* Floating recorder overlay — posun od bottom kvůli safe-area */
    .meeting-overlay {
        bottom: max(16px, env(safe-area-inset-bottom, 16px));
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Metric strip na mobilu — když je metrik moc (např. fakturace = 7),
   nezalamovat ale dovolit horizontal scroll. Šíře 1 metriky 90px min.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .metric-strip {
        display: flex !important;       /* flex místo gridu — flex umí scroll */
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: 16px 0 !important;
    }
    .metric-strip > div {
        flex: 0 0 auto;                  /* nezmenšovat */
        min-width: 110px;
        scroll-snap-align: start;
        padding: 0 14px !important;
        border-right: 1px solid var(--rule);
    }
    .metric-strip > div:last-child {
        border-right: 0;
    }
    .metric-strip > div strong {
        font-size: 22px !important;     /* trochu menší než desktop */
    }
    .metric-strip > div span {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
    /* Subtle scroll indicator — fade na pravé hraně */
    .metric-strip {
        background:
            linear-gradient(90deg, transparent calc(100% - 24px), rgba(255,255,255,0.9));
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile compact task rows (≤700 px)
   - description schovat (mnoho metadat z dictation/meeting AI)
   - title smaller font, max 2 řádky
   - status dropdown kompaktní
   - padding redukovat
   - „Upravit" details kompaktní
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .task-row {
        padding: 10px 12px !important;
        margin-bottom: 6px;
    }
    .task-row .task-head {
        gap: 8px !important;
    }
    .task-row .row-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .task-row .task-title-link {
        color: var(--ink-1);
        text-decoration: none;
    }
    .task-row .task-head-info > .muted {
        font-size: 11.5px !important;
        margin: 2px 0 0 !important;
        line-height: 1.3 !important;
    }
    /* Description (popis) — na mobile úplně schovaný v list view.
       Uživatel ho uvidí v "Upravit" panelu, kde je textarea. */
    .task-row > header .task-description,
    .task-row .task-description {
        display: none !important;
    }
    /* Tags na mobile — kompaktnější */
    .task-row .task-tags {
        margin: 4px 0 0 !important;
    }
    .task-row .wiki-tag-chip {
        font-size: 10.5px !important;
        padding: 1px 6px !important;
    }
    /* Status dropdown — kompaktnější (chip-like) */
    .task-row .task-status-select {
        font-size: 11.5px !important;
        padding: 4px 22px 4px 8px !important;
        min-height: 0 !important;
        height: 26px !important;
        font-weight: 600;
        border-radius: 999px !important;
    }

    /* MOBILE LAYOUT: priority pill + status select na jednom řádku, Označit
       jako hotové na samostatném řádku pod tím.
       Trick: task-head jako grid + display:contents na head-controls, takže
       status select a done form se stanou přímými grid items task-head. */
    .task-row > header.task-head {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "info status"
            "done done" !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
        align-items: end !important;
    }
    .task-row .task-head-info {
        grid-area: info;
        min-width: 0;
    }
    .task-row .task-head-controls {
        display: contents !important; /* wrapper zmizí, děti = grid items */
    }
    .task-row .task-status-quick {
        grid-area: status;
        align-self: end; /* pravým okrajem k poslednímu řádku info (pills) */
        margin: 0 !important;
    }
    .task-row .task-done-form {
        grid-area: done;
        margin: 0 !important;
        width: 100%;
    }
    .task-row .task-done-action {
        width: 100%;
        justify-content: center;
    }
    /* Pokud je task hotový, status select chybí — done button přejmout celou
       horní pozici, aby grid neměl díru. */
    .task-row > header.task-head:not(:has(.task-status-quick)) {
        grid-template-areas:
            "info info"
            "done done" !important;
    }
    /* "Upravit" details — kompaktní summary, ne velký link */
    .task-row .task-edit {
        margin-top: 6px !important;
        border-top: 1px dashed var(--rule);
        padding-top: 6px;
    }
    .task-row .task-edit > summary {
        font-size: 11.5px !important;
        padding: 4px 0 !important;
        color: var(--ink-3) !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        cursor: pointer;
        list-style: none;
    }
    .task-row .task-edit > summary::-webkit-details-marker { display: none; }
    .task-row .task-edit[open] > summary { color: var(--ink-1) !important; }
    .task-row .task-edit > summary::before { content: "▸ "; }
    .task-row .task-edit[open] > summary::before { content: "▾ "; }

    /* Page-head: title + actions stack na mobile */
    .page-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .page-head h1 { font-size: 22px !important; }
    .page-head-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .page-head-actions .add-panel,
    .page-head-actions form,
    .page-head-actions a.button,
    .page-head-actions button { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Google Inbox / gtask-row — stack actions pod title (mobilní layout)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .gtask-row {
        grid-template-columns: 1fr !important; /* 1 sloupec — title nahoře, actions pod */
        gap: 10px !important;
        padding: 12px !important;
    }
    .gtask-actions {
        width: 100%;
    }
    .gtask-actions select,
    .gtask-actions input,
    .gtask-actions button,
    .gtask-actions form { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Fakturační tabulka — responsive (horizontal scroll wrapper)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    /* Invoicing rows mají vlastní layout class — pokud jsou v tabulce, scroll */
    .invoicing-panel,
    .invoicing-rows-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .invoicing-row,
    .invoicing-rows {
        min-width: 720px; /* ať uživatel vidí jasně, že to je scrollable */
    }
    /* Hint pro uživatele — naznač posuvníkem že lze scrollnout */
    .invoicing-panel::-webkit-scrollbar { height: 6px; }
    .invoicing-panel::-webkit-scrollbar-thumb {
        background: var(--rule);
        border-radius: 3px;
    }
}

/* ── Sidebar-bottom: konzistentní stack 3 stejně velkých tlačítek ───── */
.sidebar .sidebar-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 12px !important;
    margin-top: auto !important;
    border-top: 1px solid var(--rule) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Všechny 3 prvky (PWA install, security link, logout form) — full width
   uvnitř drawer paddingu, stejná výška, stejný look. Selektory s vyšší
   specificity než dřívější `.sidebar .logout button`. */
.sidebar .sidebar-bottom .pwa-install-btn,
.sidebar .sidebar-bottom .sidebar-settings-link,
.sidebar .sidebar-bottom .logout button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    min-height: 38px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 6px !important;
    background: var(--card) !important;
    color: var(--ink-2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Hover stav */
.sidebar .sidebar-bottom .pwa-install-btn:hover,
.sidebar .sidebar-bottom .sidebar-settings-link:hover {
    background: var(--panel-hover) !important;
    color: var(--ink-1) !important;
}

/* Logout button — destruktivní akce, červená na hover */
.sidebar .sidebar-bottom .logout button:hover {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}

/* Active stav pro Zabezpečení (když je zrovna na ?page=security) */
.sidebar .sidebar-bottom .sidebar-settings-link.active {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
}

/* Logout form je jen wrapper, neviditelný */
.sidebar .sidebar-bottom .logout {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* ── Sidebar status panel (kolik věcí čeká na akci) ─────────────────── */
.sidebar-status {
    margin: 14px 12px 12px;
    padding: 6px;
    background: var(--card, #fff);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sidebar-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--ink-1);
    border-left: 3px solid transparent;
    transition: background 0.15s;
}
a.sidebar-status-row:hover {
    background: rgba(91, 91, 214, 0.08);
    color: var(--ink-1);
}
.sidebar-status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.sidebar-status-review {
    background: rgba(245, 158, 11, 0.08);
    border-left-color: #f59e0b;
}
.sidebar-status-review .sidebar-status-dot { background: #f59e0b; }
.sidebar-status-pending {
    background: rgba(59, 130, 246, 0.08);
    border-left-color: #3b82f6;
}
.sidebar-status-pending .sidebar-status-dot { background: #3b82f6; }
.sidebar-status-failed {
    background: rgba(239, 68, 68, 0.10);
    border-left-color: #ef4444;
}
.sidebar-status-failed .sidebar-status-dot { background: #ef4444; }
.sidebar-status-notif {
    background: rgba(96, 165, 250, 0.10);
    border-left-color: #3b82f6;
}
.sidebar-status-notif .sidebar-status-dot { background: #60a5fa; }
.sidebar-status-dot.pulse { animation: meetingPulse 2s ease-in-out infinite; }
.sidebar-status-label { flex: 1; min-width: 0; line-height: 1.3; }
.sidebar-status-count {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ink-1);
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.7);
    min-width: 24px;
    text-align: center;
}
.sidebar-status-failed .sidebar-status-count { background: #ef4444; color: #fff; }
.sidebar-status-notif .sidebar-status-count { background: #3b82f6; color: #fff; }
.sidebar-status-review .sidebar-status-count { background: #f59e0b; color: #fff; }
.sidebar-status-pending .sidebar-status-count { background: #3b82f6; color: #fff; }

/* ── Notifications feed (Settings tab + full ?page=notifications) ─────── */
.notif-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0;
}
.notif-status-text {
    font-size: 14px;
    color: var(--ink-2);
    padding: 8px 12px;
    background: var(--panel-hover, rgba(0,0,0,0.03));
    border-radius: 6px;
    margin: 0;
}
.notif-status-text[data-kind="granted"] {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}
.notif-status-text[data-kind="denied"],
.notif-status-text[data-kind="error"],
.notif-status-text[data-kind="not-supported"] {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}
.notif-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.notif-feed {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Datum header — odděluje notifikace podle dne */
.notif-feed-date-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-2, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 18px 0 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule, #e5e7eb);
}
.notif-feed-date-header:first-child { margin-top: 0; }

/* Karta notifikace */
.notif-feed-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--rule, #e5e7eb);
    border-left: 4px solid var(--ink-3, #94a3b8);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: box-shadow 0.15s ease, transform 0.12s ease;
}
.notif-feed-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    transform: translateY(-1px);
}
.notif-feed-item.is-unread {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.06), #fff 80%);
}

/* Ikona (emoji) levý sloupec */
.notif-feed-icon {
    font-size: 24px;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    flex-shrink: 0;
}
.notif-feed-item.is-unread .notif-feed-icon {
    background: rgba(59, 130, 246, 0.12);
}

/* Pravý sloupec — content */
.notif-feed-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notif-feed-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-2, #6b7280);
}
.notif-feed-kind {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10.5px;
    color: var(--ink-2, #6b7280);
}
.notif-feed-time {
    font-variant-numeric: tabular-nums;
    color: var(--ink-3, #9ca3af);
    margin-left: auto;
    font-size: 11.5px;
}
.notif-feed-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
}

.notif-feed-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink, #111827);
    line-height: 1.35;
}
.notif-feed-body-text {
    margin: 2px 0 0;
    color: var(--ink-2, #4b5563);
    font-size: 13px;
    line-height: 1.45;
}
.notif-feed-link {
    color: inherit;
    text-decoration: none;
    display: block;
}
.notif-feed-link:hover .notif-feed-title {
    color: var(--brand, #3b82f6);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Kind-specific border colors + icon backgrounds (subtle tint) */
.notif-kind-meeting_done,
.notif-kind-dictation_done { border-left-color: #22c55e; }
.notif-kind-meeting_done .notif-feed-icon,
.notif-kind-dictation_done .notif-feed-icon { background: rgba(34, 197, 94, 0.12); }

.notif-kind-meeting_failed,
.notif-kind-dictation_failed { border-left-color: #ef4444; }
.notif-kind-meeting_failed .notif-feed-icon,
.notif-kind-dictation_failed .notif-feed-icon { background: rgba(239, 68, 68, 0.12); }

.notif-kind-task_due { border-left-color: #f59e0b; }
.notif-kind-task_due .notif-feed-icon { background: rgba(245, 158, 11, 0.12); }

.notif-kind-task_overdue { border-left-color: #ef4444; }
.notif-kind-task_overdue .notif-feed-icon { background: rgba(239, 68, 68, 0.12); }

.notif-kind-prospect_followup { border-left-color: #60a5fa; }
.notif-kind-prospect_followup .notif-feed-icon { background: rgba(96, 165, 250, 0.12); }

.notif-kind-test { border-left-color: #a855f7; }
.notif-kind-test .notif-feed-icon { background: rgba(168, 85, 247, 0.12); }

/* Mobile responsiveness */
@media screen and (max-width: 700px) {
    .notif-feed-item {
        grid-template-columns: 36px 1fr;
        gap: 10px;
        padding: 12px 12px;
    }
    .notif-feed-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    .notif-feed-title {
        font-size: 14px;
    }
    .notif-feed-body-text {
        font-size: 12.5px;
    }
}

.chip-strip {
    display: flex;
    gap: 6px;
    margin: 12px 0;
    flex-wrap: wrap;
}
.chip-strip .chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--panel-hover, rgba(0,0,0,0.05));
    color: var(--ink-2);
    text-decoration: none;
    font-size: 13px;
}
.chip-strip .chip.active {
    background: var(--brand, #5b5bd6);
    color: white;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0;
}

/* Sidebar warning banner (např. „Google odpojen — reconnect") */
.sidebar-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 12px 0;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: 6px;
    color: #78350f;
    text-decoration: none;
    font-size: 12px;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.sidebar-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.sidebar-warning-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.sidebar-warning-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.sidebar-warning-body strong {
    font-weight: 700;
    color: #78350f;
}
.sidebar-warning-sub {
    font-size: 11px;
    opacity: 0.85;
}

/* AJAX navigation progress bar — top-of-page, jako YouTube/GitHub */
.app-nav-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand, #5b5bd6), #ef4444);
    z-index: 10000;
    width: 0;
    transition: width 200ms ease, opacity 200ms ease;
    pointer-events: none;
    opacity: 0;
}
.app-nav-progress.is-active { opacity: 1; }

/* ── Inbox Google úkolů: header se sort dropdownem v jedné řadě ─────── */
.section-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.section-head-row > div { flex: 1 1 auto; min-width: 0; }
.gtask-sort-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.gtask-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.gtask-sort-label select {
    font-size: 13px;
    padding: 4px 8px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--card);
    cursor: pointer;
}

/* ── Distribuce Google tasku do více interních úkolů ─────────────────── */
/* Distribute panel je uvnitř .gtask-actions (pravý sloupec ovládání). */
.gtask-distribute {
    margin-top: 6px;
    width: 100%;
    align-self: stretch;
}
.gtask-distribute > summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink-3);
    user-select: none;
    padding: 6px 8px;
    list-style: none;
    text-align: center;
    border: 1px dashed var(--rule);
    border-radius: 6px;
}
.gtask-distribute > summary::-webkit-details-marker { display: none; }
.gtask-distribute > summary:hover {
    color: var(--ink-1);
    border-color: var(--ink-3);
}
.gtask-distribute[open] > summary {
    color: var(--gtask-blue);
    font-weight: 620;
    border-color: var(--gtask-blue);
    background: rgba(51, 103, 214, 0.06);
}

.gtask-distribute-form {
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    background: rgba(51, 103, 214, 0.04);
    border: 1px solid rgba(51, 103, 214, 0.15);
    border-radius: 6px;
    box-sizing: border-box;
}
.gtask-distribute-hint { margin: 0 0 8px; font-size: 11.5px; line-height: 1.35; }

.gtask-distribute-list {
    display: flex;          /* 1 sloupec — pravý column je úzký, vícesl. nemá smysl */
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding: 2px;
}

/* ── Distribute panel — reset zděděných label stylů ──────────────────
   Globální `label { display: grid; gap: 6px; uppercase; ink-3; 11px }`
   na řádku 166 by zničilo náš layout. Override jen "skin" vlastnosti
   (text, barva, font), display + gap + grid nastavíme níže explicitně. */
.gtask-distribute-form label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}
.gtask-distribute-form label * {
    text-transform: none;
}

.gtask-distribute-client {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 8px 10px 9px;
    background: var(--card);
    text-transform: none;
    color: var(--ink-1);
    font-size: 13px;
}

/* Head row: checkbox vlevo, jméno střed (grow), count vpravo. !important
   na všech grid vlastnostech, ať nikdo (inherited gap z global label, atd.)
   nezmění layout. */
.gtask-distribute-client-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-auto-flow: column !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    gap: 8px !important;       /* shorthand fallback pro starší browsery */
    align-items: center !important;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--ink-1);
    font-size: 13px;
    font-weight: 620;
}
.gtask-distribute-client-head input {
    margin: 0;
    justify-self: start;
}
.gtask-distribute-client-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    color: var(--ink-1);
    font-weight: 620;
    min-width: 0;
}
.gtask-distribute-client-count {
    font-size: 11px;
    font-weight: 500;
    background: var(--rule);
    color: var(--ink-3);
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
    line-height: 1.4;
    justify-self: end;
}

.gtask-distribute-projects {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 22px;
    border-top: 1px dashed var(--rule);
    padding-top: 5px;
    margin-top: 2px;
}
.gtask-distribute-project {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-auto-flow: column !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
}
.gtask-distribute-project input {
    margin: 0;
    justify-self: start;
}
.gtask-distribute-project span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-2);
    min-width: 0;
}

.gtask-distribute-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.gtask-distribute-actions .primary[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
.gtask-distribute-help { font-size: 11.5px; }

.gtask-distributed-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gtask-distributed-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.gtask-distributed-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 620;
    background: var(--ink-7, #f4f4f5);
    color: var(--ink-2);
    white-space: nowrap;
}
.gtask-distributed-status-todo { background: #fff7ed; color: #9a3412; }
.gtask-distributed-status-in_progress { background: #eff6ff; color: #1e40af; }
.gtask-distributed-status-done { background: #f0fdf4; color: #166534; }
.gtask-distributed-status-blocked { background: #fef2f2; color: #991b1b; }

/* ── Google Ads — globální přehled: action toolbar v hlavičce ──────── */
.ads-overview-head {
    align-items: flex-start;
}
.ads-overview-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.ads-overview-actions-primary,
.ads-overview-actions-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ads-overview-actions-nav .button.small,
.ads-overview-actions .button.small {
    font-size: 12px;
    padding: 5px 10px;
    min-height: 28px;
}
.ads-overview-debug {
    align-self: flex-end;
    margin-top: 2px;
}
.ads-overview-debug > summary {
    cursor: pointer;
    list-style: none;
    font-size: 11px;
    color: var(--ink-4);
    user-select: none;
    padding: 2px 6px;
    border-radius: 4px;
}
.ads-overview-debug > summary::-webkit-details-marker { display: none; }
.ads-overview-debug > summary:hover { color: var(--ink-2); background: var(--rule); }
.ads-overview-debug-inner {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Filtry pro identifikaci problémových projektů ──────────────────── */
.ads-filters-panel {
    background: linear-gradient(0deg, rgba(234, 88, 12, 0.02), transparent);
}
.ads-filters-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.ads-filters-head > div { flex: 1 1 auto; min-width: 0; }
.ads-filters-count {
    font-size: 13px;
    color: var(--ink-3);
    flex-shrink: 0;
}
.ads-filters-count strong {
    color: #ea580c;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

/* Filtry kompaktně do jedné řady — flex wrap pro malé obrazovky */
.ads-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 10px;
}
.ads-filter-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    width: 130px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ink-2) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}
.ads-filter-label {
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ads-filter-label em {
    color: #ea580c;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
}
.ads-filter-input {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 0 8px 0 0;          /* žádný left padding — operátor button se k němu přilepí */
    background: var(--card);
    height: 30px;
    box-sizing: border-box;
    overflow: hidden;
}
.ads-filter-input:focus-within {
    border-color: #ea580c;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
}
/* Operátor toggle button — < / > klikací přepínač */
.ads-filter-op {
    flex-shrink: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    background: rgba(234, 88, 12, 0.08) !important;
    color: #ea580c !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background 100ms;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ads-filter-op:hover {
    background: rgba(234, 88, 12, 0.18) !important;
}
.ads-filter-input input {
    border: none !important;
    padding: 0 0 0 8px !important;
    background: transparent !important;
    font-size: 13px;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    height: auto !important;
}
.ads-filter-unit {
    color: var(--ink-3);
    font-size: 11.5px;
    flex-shrink: 0;
}
.ads-filter-clear {
    align-self: flex-end;
    height: 30px;
    margin-left: auto;
}

/* ── Tabulka metrik — full-width + highlighting filtrovaných řádků ─── */
.ads-metrics-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 12.5px;
}
.ads-metrics-table th,
.ads-metrics-table td {
    padding: 6px 6px;       /* zmenšeno z 8/10 — 14 sloupců potřebuje místo */
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
.ads-metrics-table thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    cursor: help;
}
.ads-metrics-table th.num,
.ads-metrics-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Měkká barva pro účet/projekt sloupce — více kontrastu pro číselné metriky */
.ads-metrics-table tbody td:first-child,
.ads-metrics-table tbody td:nth-child(2) {
    white-space: normal;
    min-width: 100px;
    max-width: 180px;
}
.ads-metrics-table tbody td:first-child small {
    display: block;
    font-size: 10.5px;
    margin-top: 1px;
}
.ads-metrics-table tbody tr:hover {
    background: rgba(234, 88, 12, 0.03);
}

/* Řádek matchnutý filtrem — žluté pozadí + oranžový sloupec vlevo */
.ads-metrics-table tbody tr.ads-row-flagged {
    background: #fffbeb !important;
    box-shadow: inset 3px 0 0 #ea580c;
}
.ads-metrics-table tbody tr.ads-row-flagged:hover {
    background: #fef3c7 !important;
}
/* Konkrétní cell, která triggla match — silnější tučno + barva */
.ads-metrics-table tbody td.ads-cell-flagged {
    color: #9a3412;
    font-weight: 700;
    background: rgba(234, 88, 12, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────
   Streak badge na dashboardu (metric-strip)
   ───────────────────────────────────────────────────────────────────────── */
.metric-streak strong {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.metric-streak strong small {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 0;
}
.metric-streak-flow {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.10), rgba(254, 202, 87, 0.10));
    border: 1px solid rgba(254, 130, 50, 0.30);
    border-radius: 10px;
    padding: 8px 12px;
    margin: -8px -12px;
    animation: streak-flow-pulse 2.4s ease-in-out infinite;
}
@keyframes streak-flow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(254, 130, 50, 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(254, 130, 50, 0.10); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Celebration overlay — variety pack pro ADHD motivaci
   6 animací (confetti/sparkles/emoji/fireworks/starburst/mega),
   6 card gradient variant, tier-based intensity.
   ───────────────────────────────────────────────────────────────────────── */
.celebrate-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 16vh;
    overflow: hidden;
    animation: celebrate-fade-in 220ms ease-out;
}
.celebrate-overlay.celebrate-fade {
    animation: celebrate-fade-out 700ms ease-in forwards;
}
@keyframes celebrate-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes celebrate-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-12px); }
}

.celebrate-card {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 22, 35, 0.22), 0 4px 12px rgba(15, 22, 35, 0.08);
    padding: 18px 28px;
    text-align: center;
    border: 1px solid rgba(15, 22, 35, 0.06);
    animation: celebrate-card-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 90vw;
    cursor: default;
}
@keyframes celebrate-card-pop {
    0%   { transform: scale(0.7) translateY(-10px); opacity: 0; }
    60%  { transform: scale(1.04) translateY(0); opacity: 1; }
    100% { transform: scale(1) translateY(0); }
}
.celebrate-message {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.celebrate-streak {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-3);
}
.celebrate-streak strong { color: var(--ink); font-weight: 700; }

/* Card gradient varianty — randomizováno na backendu.
   POZOR: class je na .celebrate-overlay, ale gradient MUSÍ cílit na .celebrate-card uvnitř —
   jinak by se pokryla celá obrazovka a card uvnitř by zůstala výchozí bílá s nečitelným textem. */
.celebrate-card-warm     .celebrate-card { background: linear-gradient(135deg, #ffeaa7, #fab1a0); color: #2d3436; }
.celebrate-card-cool     .celebrate-card { background: linear-gradient(135deg, #74b9ff, #a29bfe); color: #fff; }
.celebrate-card-mint     .celebrate-card { background: linear-gradient(135deg, #55efc4, #81ecec); color: #2d3436; }
.celebrate-card-lavender .celebrate-card { background: linear-gradient(135deg, #d6a3f7, #ff9ff3); color: #fff; }
.celebrate-card-gold     .celebrate-card { background: linear-gradient(135deg, #fdcb6e, #e17055); color: #fff; }
.celebrate-card-sunset   .celebrate-card { background: linear-gradient(135deg, #fd79a8, #fdcb6e); color: #2d3436; }
.celebrate-card-warm     .celebrate-message,
.celebrate-card-mint     .celebrate-message,
.celebrate-card-sunset   .celebrate-message { color: #2d3436; }
.celebrate-card-cool     .celebrate-message,
.celebrate-card-lavender .celebrate-message,
.celebrate-card-gold     .celebrate-message { color: #fff; }
.celebrate-card-cool     .celebrate-streak,
.celebrate-card-lavender .celebrate-streak,
.celebrate-card-gold     .celebrate-streak { color: rgba(255,255,255,0.85); }
.celebrate-card-cool     .celebrate-streak strong,
.celebrate-card-lavender .celebrate-streak strong,
.celebrate-card-gold     .celebrate-streak strong { color: #fff; }

/* Tier 3 (mega / inbox zero) — větší a slavnostnější */
.celebrate-tier-3 .celebrate-card {
    padding: 24px 36px;
    border-width: 2px;
    box-shadow: 0 32px 80px rgba(15, 22, 35, 0.28), 0 0 0 4px rgba(255,255,255,0.4) inset;
    animation: celebrate-card-mega-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.celebrate-tier-3 .celebrate-message { font-size: 26px; }
@keyframes celebrate-card-mega-pop {
    0%   { transform: scale(0.5) rotate(-6deg); opacity: 0; }
    50%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
    75%  { transform: scale(0.95) rotate(-1deg); }
    100% { transform: scale(1) rotate(0); }
}
.celebrate-inbox-zero .celebrate-card {
    box-shadow: 0 32px 80px rgba(255, 215, 0, 0.4), 0 0 0 4px rgba(255,215,0,0.6) inset;
    animation: celebrate-card-mega-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1),
               celebrate-glow 1.4s ease-in-out infinite;
}
@keyframes celebrate-glow {
    0%, 100% { box-shadow: 0 32px 80px rgba(255, 215, 0, 0.4), 0 0 0 4px rgba(255,215,0,0.6) inset; }
    50%      { box-shadow: 0 32px 80px rgba(255, 100, 200, 0.5), 0 0 0 4px rgba(255,100,200,0.7) inset; }
}

/* Particles container */
.celebrate-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* ── 1. CONFETTI (default tier 1) ────────────────────────────────────── */
.confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 14px;
    opacity: 0.95;
    animation-name: confetti-fall;
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
    animation-fill-mode: forwards;
    will-change: transform, opacity;
}
.confetti-piece.c-square { border-radius: 1px; }
.confetti-piece.c-circle { border-radius: 50%; width: 9px; height: 9px; }
.confetti-piece.c-strip  { width: 4px; height: 14px; border-radius: 2px; }
@keyframes confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(100vh) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* ── 2. SPARKLES — třpytky scattered s pulse animací ────────────────── */
.sparkle-piece {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 12px currentColor;
    opacity: 0;
    animation: sparkle-twinkle 1.4s ease-in-out;
    animation-fill-mode: forwards;
    will-change: opacity, transform;
}
@keyframes sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.3); }
    20%      { opacity: 1; transform: scale(1.2); }
    50%      { opacity: 0.9; transform: scale(0.8); }
    80%      { opacity: 0.6; transform: scale(1); }
}

/* ── 3. EMOJI RAIN — padající celebration emojis ────────────────────── */
.emoji-piece {
    position: absolute;
    top: -40px;
    line-height: 1;
    user-select: none;
    animation-name: emoji-fall;
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0);
    animation-fill-mode: forwards;
    will-change: transform, opacity;
}
@keyframes emoji-fall {
    0%   { transform: translateY(-40px) rotate(0); opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(var(--rot, 90deg)); opacity: 0; }
}

/* ── 4. FIREWORKS — radial bursts ───────────────────────────────────── */
.firework-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: firework-burst 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}
@keyframes firework-burst {
    0%   { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)); opacity: 0; }
}

/* ── 5. STARBURST — hvězdy expandující ze středu ────────────────────── */
.star-piece {
    position: absolute;
    left: 50%;
    top: 30%;
    line-height: 1;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: star-fly 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}
@keyframes star-fly {
    0%   { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(0); opacity: 0; }
    20%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(40px) scale(1); }
    100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0.5); opacity: 0; }
}

/* ── 6. MEGA — kombo (konfety + fireworks + balloons) ────────────────── */
/* Použije .confetti-piece + .firework-particle + .balloon-piece pravidla */

/* ── 7. SHOCKWAVE — expandující kruhy ze středu obrazovky ────────────── */
.shockwave-ring {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 3px solid currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: shockwave-expand 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
    pointer-events: none;
}
@keyframes shockwave-expand {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; border-width: 6px; }
    20%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(14); opacity: 0; border-width: 1px; }
}

/* ── 8. BALLOONS — balónky stoupají vzhůru ─────────────────────────── */
.balloon-piece {
    position: absolute;
    bottom: -60px;
    line-height: 1;
    user-select: none;
    animation-name: balloon-rise;
    animation-timing-function: cubic-bezier(0.36, 0, 0.66, 1);
    animation-fill-mode: forwards;
    animation-duration: 2800ms;
    will-change: transform, opacity;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
@keyframes balloon-rise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translateY(-50vh) translateX(var(--sway, 0px)); }
    90%  { opacity: 1; }
    100% { transform: translateY(-110vh) translateX(calc(var(--sway, 0px) * -1)); opacity: 0; }
}

/* ── 9. RAINBOW-TRAIL — duhový swoosh přes obrazovku ─────────────────── */
.rainbow-trail-ray {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 4px;
    border-radius: 2px;
    transform: rotate(-12deg) scaleX(0);
    transform-origin: left center;
    box-shadow: 0 0 16px currentColor;
    opacity: 0.9;
    animation: rainbow-swoosh 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}
@keyframes rainbow-swoosh {
    0%   { transform: rotate(-12deg) scaleX(0); opacity: 0; }
    20%  { opacity: 1; }
    60%  { transform: rotate(-12deg) scaleX(1); opacity: 1; }
    100% { transform: rotate(-12deg) scaleX(1) translateY(20vh); opacity: 0; }
}

/* ── 10. DISCO — bliká barevnými panely + flash ──────────────────────── */
.disco-flash {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.35);
    pointer-events: none;
    animation: disco-strobe 220ms steps(1) 5;
    will-change: opacity;
}
@keyframes disco-strobe {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}
.disco-panel {
    position: absolute;
    width: 25%;
    height: 33.33%;
    opacity: 0;
    mix-blend-mode: screen;
    animation: disco-pulse 1.8s ease-in-out forwards;
    will-change: opacity;
}
@keyframes disco-pulse {
    0%   { opacity: 0; }
    20%  { opacity: 0.7; }
    40%  { opacity: 0.2; }
    60%  { opacity: 0.6; }
    80%  { opacity: 0.1; }
    100% { opacity: 0; }
}

/* ── 11. MATRIX — digital rain easter egg ────────────────────────────── */
.matrix-column {
    position: absolute;
    top: -60vh;
    width: 22px;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #00ff41;
    text-shadow: 0 0 8px #00ff41;
    opacity: 0;
    animation: matrix-fall 2s linear forwards;
    will-change: transform, opacity;
    pointer-events: none;
}
@keyframes matrix-fall {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(180vh); opacity: 0; }
}
.celebrate-anim-matrix .celebrate-card {
    background: rgba(0, 0, 0, 0.85) !important;
    color: #00ff41 !important;
    border-color: #00ff41 !important;
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.5), 0 0 60px rgba(0, 255, 65, 0.3) !important;
}
.celebrate-anim-matrix .celebrate-message {
    color: #00ff41 !important;
    font-family: 'Courier New', monospace !important;
}

/* ── Nové card varianty (cílí na .celebrate-card uvnitř overlay) ─────── */
.celebrate-card-neon .celebrate-card {
    background: #0a0a14 !important;
    color: #00fff0 !important;
    border: 2px solid #00fff0 !important;
    box-shadow: 0 0 24px rgba(0, 255, 240, 0.6),
                0 0 48px rgba(255, 0, 200, 0.4),
                inset 0 0 12px rgba(0, 255, 240, 0.2) !important;
}
.celebrate-card-neon .celebrate-message {
    color: #00fff0 !important;
    text-shadow: 0 0 10px rgba(0, 255, 240, 0.8);
}
.celebrate-card-neon .celebrate-streak,
.celebrate-card-neon .celebrate-streak strong {
    color: #ff00c8 !important;
}

.celebrate-card-cosmic .celebrate-card {
    background: radial-gradient(ellipse at top, #1a0033 0%, #000814 60%, #000000 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(150, 100, 255, 0.4) !important;
    box-shadow: 0 0 40px rgba(150, 100, 255, 0.5),
                inset 0 0 30px rgba(80, 50, 200, 0.2) !important;
    overflow: hidden;
    position: relative;
}
.celebrate-card-cosmic .celebrate-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(1px 1px at 60% 70%, white, transparent),
        radial-gradient(1.5px 1.5px at 80% 20%, white, transparent),
        radial-gradient(1px 1px at 30% 80%, white, transparent),
        radial-gradient(2px 2px at 70% 40%, white, transparent),
        radial-gradient(1px 1px at 10% 60%, white, transparent);
    opacity: 0.7;
    animation: cosmic-twinkle 2s ease-in-out infinite;
}
@keyframes cosmic-twinkle {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
.celebrate-card-cosmic .celebrate-message {
    color: #fff !important;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 12px rgba(180, 100, 255, 0.6);
}
.celebrate-card-cosmic .celebrate-streak,
.celebrate-card-cosmic .celebrate-streak strong {
    color: #d4a4ff !important;
    position: relative;
    z-index: 1;
}

.celebrate-card-retro .celebrate-card {
    background: linear-gradient(180deg, #ff006e 0%, #8338ec 50%, #3a86ff 100%) !important;
    color: #fff !important;
    border: 2px solid #00f5d4 !important;
    box-shadow: 0 0 30px rgba(255, 0, 110, 0.5),
                0 0 60px rgba(58, 134, 255, 0.3) !important;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
    font-family: 'Courier New', monospace;
}
.celebrate-card-retro .celebrate-message {
    color: #00f5d4 !important;
    text-shadow: 2px 2px 0 #ff006e, -1px -1px 0 #3a86ff;
    letter-spacing: 0.05em;
}
.celebrate-card-retro .celebrate-streak,
.celebrate-card-retro .celebrate-streak strong {
    color: #ffe66d !important;
}

/* ── Achievement banner — nad kartičkou ─────────────────────────────── */
.celebrate-achievement-banner {
    position: relative;
    z-index: 3;
    margin-bottom: 8px;
    padding: 8px 18px;
    cursor: default;
    background: linear-gradient(90deg, #ffd700, #ffa500, #ff6347);
    color: #2d3436;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.4);
    animation: achievement-bounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}
@keyframes achievement-bounce {
    0%   { transform: translateY(-30px) scale(0.6); opacity: 0; }
    60%  { transform: translateY(4px) scale(1.05); opacity: 1; }
    100% { transform: translateY(0) scale(1); }
}

/* ── Combo badge — uvnitř kartičky ───────────────────────────────────── */
.celebrate-combo-badge {
    margin-top: 8px;
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(90deg, #ff4757, #ff6348);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.5);
    animation: combo-pulse 600ms ease-in-out infinite alternate;
}
@keyframes combo-pulse {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

/* ── Screen shake pro tier 3+ ────────────────────────────────────────── */
.celebrate-shake .celebrate-card {
    animation: celebrate-card-mega-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1),
               celebrate-screen-shake 600ms ease-in-out 200ms;
}
@keyframes celebrate-screen-shake {
    0%, 100% { transform: translate(0, 0); }
    10%      { transform: translate(-3px, -2px); }
    20%      { transform: translate(3px, 2px); }
    30%      { transform: translate(-2px, 3px); }
    40%      { transform: translate(2px, -3px); }
    50%      { transform: translate(-1px, 2px); }
    60%      { transform: translate(1px, -1px); }
    70%      { transform: translate(-2px, 1px); }
    80%      { transform: translate(2px, -1px); }
    90%      { transform: translate(-1px, 0); }
}

/* ── Super-rare overlay — jemný zlatý glow celé scény ────────────────── */
.celebrate-super-rare::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: super-rare-glow 1.6s ease-in-out;
}
@keyframes super-rare-glow {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

/* ── Tier 4 (inbox zero) — ultimátní oslava ──────────────────────────── */
.celebrate-tier-4 .celebrate-card {
    padding: 32px 48px;
    border-width: 3px;
    box-shadow: 0 40px 100px rgba(255, 215, 0, 0.5),
                0 0 0 6px rgba(255,255,255,0.5) inset,
                0 0 80px rgba(255, 165, 0, 0.4) !important;
    animation: celebrate-card-mega-pop 640ms cubic-bezier(0.34, 1.56, 0.64, 1),
               celebrate-glow 1.4s ease-in-out infinite;
}
.celebrate-tier-4 .celebrate-message {
    font-size: 32px;
    letter-spacing: -0.02em;
}

/* ── Reduced motion fallback ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .celebrate-overlay,
    .celebrate-card,
    .confetti-piece,
    .sparkle-piece,
    .emoji-piece,
    .firework-particle,
    .star-piece,
    .balloon-piece,
    .shockwave-ring,
    .rainbow-trail-ray,
    .disco-flash,
    .disco-panel,
    .matrix-column,
    .celebrate-achievement-banner,
    .celebrate-combo-badge,
    .metric-streak-flow {
        animation: none !important;
    }
    .confetti-piece, .sparkle-piece, .emoji-piece, .firework-particle,
    .star-piece, .balloon-piece, .shockwave-ring, .rainbow-trail-ray,
    .disco-flash, .disco-panel, .matrix-column {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Category chips (Nastavení → Štítky → panel "Kategorie")
   ───────────────────────────────────────────────────────────────────────── */
.category-panel {
    margin-bottom: 16px;
}
.category-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* aby se zavřené chips netáhly na výšku rozbaleného */
    gap: 8px;
    margin-top: 4px;
}
.category-chip {
    position: relative;
    background: var(--bg-soft);
    border: 1px solid var(--rule-soft);
    border-radius: 999px;
    padding: 0;
    transition: border-color 120ms ease, background 120ms ease;
}
.category-chip:hover {
    border-color: var(--rule);
    background: #fff;
}
.category-chip[open] {
    border-radius: 12px;
    background: #fff;
    border-color: var(--rule);
    box-shadow: 0 4px 14px rgba(15, 22, 35, 0.06);
}
.category-chip > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    user-select: none;
}
.category-chip > summary::-webkit-details-marker { display: none; }
.category-chip > summary::marker { display: none; }
.category-chip-name {
    font-weight: 600;
    color: var(--ink-2);
}
.category-chip[open] .category-chip-name {
    color: var(--ink);
}
.category-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    background: var(--rule-soft);
    color: var(--ink-3);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.category-chip[open] .category-chip-count {
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.category-chip-add {
    border-style: dashed;
}
.category-chip-add .category-chip-name {
    color: var(--ink-3);
}
.category-chip-add:hover .category-chip-name {
    color: var(--accent-ink);
}
.category-chip-body {
    padding: 12px 14px 14px;
    min-width: 260px;
}
.category-chip-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.category-chip-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--ink-3);
}
.category-chip-form input[type="text"],
.category-chip-form input:not([type]) {
    padding: 6px 10px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-size: 13px;
}
.category-chip-form button {
    align-self: flex-start;
}
.category-chip-body hr {
    margin: 12px 0;
    border: 0;
    border-top: 1px solid var(--rule-soft);
}
.category-chip-delete {
    margin: 0;
}
.category-uncategorized {
    margin-top: 12px;
    font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Done action button (přímo pod status selectem v task-head-controls)
   Plnohodnotné tlačítko s textem + fajfka, jasně rozpoznatelné.
   Při hotovém úkolu zezelená a text se změní na "Hotovo · klikni pro znovuotevření".
   ───────────────────────────────────────────────────────────────────────── */
.task-done-form {
    margin: 0;
}
.task-done-action {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 14px 6px 12px;
    border: 1.5px solid oklch(48% 0.09 150 / 0.4);
    background: oklch(48% 0.09 150 / 0.08);
    color: oklch(36% 0.09 150);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.task-done-action svg {
    flex: 0 0 14px;
    transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.task-done-action:hover {
    background: oklch(48% 0.09 150 / 0.16);
    border-color: oklch(48% 0.09 150 / 0.7);
    color: oklch(30% 0.09 150);
}
.task-done-action:hover svg {
    transform: scale(1.15);
}
.task-done-action:active {
    transform: scale(0.97);
}
.task-done-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Hotovo state — vyplněné zelené tlačítko */
.task-done-action--checked {
    background: oklch(48% 0.09 150);
    border-color: oklch(48% 0.09 150);
    color: #fff;
}
.task-done-action--checked:hover {
    background: oklch(42% 0.09 150);
    border-color: oklch(42% 0.09 150);
    color: #fff;
}
@media (max-width: 520px) {
    .task-done-action {
        font-size: 12.5px;
        padding: 5px 12px 5px 10px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Task type pills (call / email / meeting / followup)
   Vizuální odlišení typů úkolů — emoji ikona + barevný pill v hlavičce.
   Inspirováno HubSpot/Pipedrive přístupem.
   ───────────────────────────────────────────────────────────────────────── */
.task-title-type-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 1em;
    vertical-align: baseline;
    user-select: none;
}

.task-pill-type {
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
}
.task-pill-type-call {
    background: oklch(94% 0.04 200);
    color: oklch(35% 0.10 200);
    border-color: oklch(75% 0.08 200);
}
.task-pill-type-email {
    background: oklch(94% 0.04 280);
    color: oklch(38% 0.10 280);
    border-color: oklch(75% 0.08 280);
}
.task-pill-type-meeting {
    background: oklch(94% 0.04 300);
    color: oklch(38% 0.10 300);
    border-color: oklch(75% 0.08 300);
}
.task-pill-type-followup {
    background: oklch(94% 0.06 60);
    color: oklch(38% 0.12 60);
    border-color: oklch(75% 0.10 60);
}

/* Subtle left-border accent na celém řádku — rychlé skenování typu okem */
.task-row {
    position: relative;
}
.task-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: transparent;
    pointer-events: none;
}
.task-row:has(.task-pill-type-call)::before    { background: oklch(60% 0.12 200); }
.task-row:has(.task-pill-type-email)::before   { background: oklch(60% 0.12 280); }
.task-row:has(.task-pill-type-meeting)::before { background: oklch(60% 0.12 300); }
.task-row:has(.task-pill-type-followup)::before { background: oklch(70% 0.13 60); }

/* Task type filter — chips pod hlavičkou stránky Úkoly */
/* ── Dashboard lišta nad seznamem úkolů — čísla + klikací facety ───────── */
.tasks-dashboard {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--panel, #fff);
    border: 1px solid var(--rule, #e2e8f0);
    border-radius: var(--radius-md, 12px);
}
.tasks-dash-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.tasks-dash-group + .tasks-dash-group {
    padding-left: 14px;
    border-left: 1px solid var(--rule, #e2e8f0);
}
.tasks-dash-grouplbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted, #94a3b8);
    align-self: center;
}
.tasks-dash-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 62px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--rule, #e2e8f0);
    background: var(--card, #fff);
    text-decoration: none;
    color: var(--ink, #17191c);
    transition: border-color .14s ease, background .14s ease, transform .05s ease;
}
.tasks-dash-tile:hover {
    border-color: var(--brand, #5b5bd6);
    transform: translateY(-1px);
}
.tasks-dash-tile.is-active {
    border-color: var(--brand, #5b5bd6);
    background: var(--brand-soft, #f4f3ff);
    box-shadow: inset 0 0 0 1px var(--brand, #5b5bd6);
}
.tasks-dash-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.05;
}
.tasks-dash-lbl {
    font-size: 11px;
    color: var(--ink-2, #64748b);
    white-space: nowrap;
}
/* Akcenty — souhrn */
.tasks-dash-tile-total .tasks-dash-num { color: var(--brand, #5b5bd6); }
.tasks-dash-tile-done .tasks-dash-num { color: #16a34a; }
.tasks-dash-tile-overdue.has-items { border-color: #fecaca; }
.tasks-dash-tile-overdue.has-items .tasks-dash-num { color: #dc2626; }
.tasks-dash-tile-overdue.is-active {
    border-color: #dc2626;
    background: #fef2f2;
    box-shadow: inset 0 0 0 1px #dc2626;
}
/* Akcenty — priorita (číslo barevné dle priority) */
.tasks-dash-pr-urgent .tasks-dash-num { color: #dc2626; }
.tasks-dash-pr-high   .tasks-dash-num { color: #ea580c; }
.tasks-dash-pr-medium .tasks-dash-num { color: #ca8a04; }
.tasks-dash-pr-low    .tasks-dash-num { color: #64748b; }
/* Akcenty — stav (jemný barevný puntík přes číslo) */
.tasks-dash-st-blocked .tasks-dash-num { color: #b45309; }
@media (max-width: 760px) {
    .tasks-dashboard { gap: 10px; padding: 10px; }
    .tasks-dash-group + .tasks-dash-group { padding-left: 10px; }
    .tasks-dash-tile { min-width: 54px; padding: 5px 9px; }
    .tasks-dash-num { font-size: 17px; }
}

/* Indikátor aktivního filtru — pod lištou, jasně ukazuje co filtruje + zrušení. */
.tasks-active-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 13px;
}
.tasks-active-filter-lbl {
    color: var(--ink-muted, #94a3b8);
    font-weight: 600;
}
.tasks-active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--brand-soft, #f4f3ff);
    border: 1px solid var(--brand, #5b5bd6);
    color: var(--brand, #5b5bd6);
    text-decoration: none;
    font-weight: 600;
    transition: background .14s ease;
}
.tasks-active-filter-chip:hover { background: #e9e7fb; }
.tasks-active-filter-x { font-size: 11px; opacity: 0.7; }
.tasks-active-filter-clear {
    color: var(--ink-2, #64748b);
    text-decoration: underline;
    font-size: 12.5px;
}
.tasks-active-filter-clear:hover { color: var(--ink, #17191c); }

.task-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.task-type-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--bg-soft);
    color: var(--ink-3);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.task-type-filter-chip:hover {
    border-color: var(--ink-3);
    color: var(--ink-2);
    background: #fff;
}
.task-type-filter-chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 600;
}
.task-type-filter-icon {
    line-height: 1;
}
/* Když je aktivní typový chip, použij jeho barvu místo ink/black */
.task-type-filter-chip-call.is-active    { background: oklch(45% 0.10 200); border-color: oklch(45% 0.10 200); }
.task-type-filter-chip-email.is-active   { background: oklch(45% 0.10 280); border-color: oklch(45% 0.10 280); }
.task-type-filter-chip-meeting.is-active { background: oklch(45% 0.10 300); border-color: oklch(45% 0.10 300); }
.task-type-filter-chip-followup.is-active { background: oklch(50% 0.13 60); border-color: oklch(50% 0.13 60); }

/* ══════════════════════════════════════════════════════════════════════
   External tools panel (Settings → Nástroje)
   ══════════════════════════════════════════════════════════════════════ */

.external-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.external-tool-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--rule, #d9dce1);
    border-radius: 10px;
    background: #fff;
    color: var(--ink, #17191c);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    min-height: 76px;
}
.external-tool-card:hover {
    border-color: var(--ink, #17191c);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.external-tool-icon {
    width: 48px;
    height: 48px;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    flex-shrink: 0;
}
.external-tool-card:hover .external-tool-icon {
    background: rgba(0, 0, 0, 0.07);
}
.external-tool-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.external-tool-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.external-tool-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink, #17191c);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.external-tool-arrow {
    opacity: 0.4;
    transition: opacity 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}
.external-tool-card:hover .external-tool-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
    color: var(--brand, #3b82f6);
}
.external-tool-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-3, #646a73);
    line-height: 1.4;
}

/* Mobile responsivnost — zachovat 1 sloupec, ale větší tap target */
@media screen and (max-width: 700px) {
    .external-tools-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .external-tool-card {
        grid-template-columns: 44px 1fr;
        gap: 12px;
        padding: 12px 14px;
    }
    .external-tool-icon {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
    .external-tool-name {
        font-size: 14px;
    }
    .external-tool-desc {
        font-size: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   File filter strips — Typ (auto kategorie) + Štítek (custom tagy)
   ══════════════════════════════════════════════════════════════════════ */

.file-filter-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--line);
}
.file-filter-strip + .file-filter-strip {
    padding-top: 0;
    margin-top: -6px;
    border-bottom: 1px solid var(--line);
}
.file-filter-label {
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 4px;
    font-weight: 600;
}
.file-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
    white-space: nowrap;
}
.file-filter-chip:hover {
    border-color: var(--ink-3);
    color: var(--ink);
}
.file-filter-chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 600;
}
.file-filter-icon {
    font-size: 14px;
    line-height: 1;
}
.file-filter-chip--tag {
    border-color: var(--tag-color, var(--line));
    color: var(--tag-color, var(--ink-2));
}
.file-filter-chip--tag:hover {
    background: var(--tag-color, transparent);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   File tag chips — na file-row (přidělené tagy)
   ══════════════════════════════════════════════════════════════════════ */

.file-row-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    align-items: center;
}
/* (Interaktivní file-tag CSS — .file-tag-chip / -remove / -add-btn / -popover* —
   odstraněno 2026-06-09: odpojený modul, UI se nikdy nerenderovalo. Read-only
   .file-tag zůstává inline ve .file-meta.) */

/* ══════════════════════════════════════════════════════════════════════
   File bulk select — checkbox column + bulk toolbar
   ══════════════════════════════════════════════════════════════════════ */

.file-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin: 0 0 12px 0;
    background: #f5f6f8;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
}
.file-bulk-master {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--ink-2);
    user-select: none;
}
.file-bulk-master input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ink);
}
.file-bulk-count {
    color: var(--ink-soft);
    font-size: 12px;
}
.file-bulk-count strong {
    color: var(--ink);
    font-weight: 700;
}
.file-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
.file-bulk-form {
    margin: 0;
}

.file-row-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    cursor: pointer;
}
.file-row-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ink);
}
.file-row:has([data-file-bulk-checkbox]:checked) {
    background: oklch(96% 0.02 240);
}

@media (max-width: 640px) {
    .file-bulk-bar {
        padding: 8px 10px;
        gap: 8px;
    }
    .file-bulk-actions {
        margin-left: 0;
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   File assign — upload + inline přiřazení k projektu (multi-projekt klient)
   ══════════════════════════════════════════════════════════════════════ */

.file-upload-project {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fff8e6;
    border: 1px solid #f0d68a;
    border-radius: 6px;
    font-size: 13px;
    color: var(--ink);
}
.file-upload-project > span {
    font-weight: 600;
    flex-shrink: 0;
}
.file-upload-project select {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    font-family: inherit;
}

.file-assign-form {
    margin: 0;
}
.file-assign-select {
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-family: inherit;
    color: var(--ink-2);
    cursor: pointer;
    max-width: 180px;
}
.file-assign-select:hover {
    border-color: var(--brand);
}

/* ══════════════════════════════════════════════════════════════════════
   File sort bar — chips nad seznamem souborů
   ══════════════════════════════════════════════════════════════════════ */

.file-sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 0 12px 0;
    margin: 0 0 12px 0;
    border-bottom: 1px solid var(--line);
}
.file-sort-label {
    font-size: 12px;
    color: var(--ink-soft);
    margin-right: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.file-sort-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
    white-space: nowrap;
}
.file-sort-chip:hover {
    border-color: var(--ink-3);
    color: var(--ink);
}
.file-sort-chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   File preview — thumbnails v file-row + lightbox modal
   ══════════════════════════════════════════════════════════════════════ */

.file-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--ink-bg, #fafafa);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms ease, transform 120ms ease;
}
.file-thumb:hover {
    border-color: var(--brand);
    transform: scale(1.03);
}
.file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.file-row--image .file-info {
    margin-left: 0;
}

/* Modal — fullscreen lightbox */
.file-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}
.file-preview-modal[aria-hidden="false"] {
    display: block;
}
.file-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 18, 0.86);
    backdrop-filter: blur(4px);
}
.file-preview-shell {
    position: absolute;
    inset: 24px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.file-preview-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    flex-shrink: 0;
}
.file-preview-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-preview-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.file-preview-nav,
.file-preview-close {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.file-preview-nav:hover,
.file-preview-close:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.file-preview-body {
    flex: 1;
    overflow: auto;
    background: #1a1a1d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.file-preview-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: repeating-conic-gradient(#2a2a2e 0% 25%, #1f1f22 0% 50%) 50% / 16px 16px;
}
.file-preview-pdf {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: 0;
    background: #fff;
}
.file-preview-text {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 16px;
    background: #fff;
    color: var(--ink);
    font-family: var(--f-mono);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
    border-radius: 6px;
}
.file-preview-fallback {
    color: #ddd;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    padding: 32px;
}

body.file-preview-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .file-preview-shell {
        inset: 0;
        border-radius: 0;
    }
    .file-preview-head {
        padding: 10px 12px;
    }
    .file-preview-title {
        font-size: 14px;
    }
    .file-preview-download {
        display: none;
    }
    .file-thumb {
        width: 44px;
        height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBIL / PWA — responsive polish (≤700 px)
   Tento blok řeší konkrétní problémy hlášené z mobilu / PWA:

   1) Breadcrumb v Nejbližších úkolech se lámal po znacích.
      Root cause: <p class="task-breadcrumb"> dědil globální
      `overflow-wrap: anywhere` z pravidla `p, td, li, dt, dd {...}`,
      flex-item s min-width: auto pak shrinknul na min-content = 1 znak.
      Fix: reset overflow-wrap + nowrap/ellipsis na .task-crumb.

   2) Google faktury panel uživatel obsluhuje pouze na desktopu —
      na mobilu jen zabírá místo. Skrytý přes .panel-google-invoices.

   3) Defensive: .two-column musí být 1-col na mobilu i kdyby cokoli
      jiného mohlo přebíjet (some custom panely override gridu).

   Desktop verze se NEMĚNÍ — všechno je v media query.
   ═══════════════════════════════════════════════════════════════════════ */

/* Globální (i desktop) — prevence per-character break v task breadcrumbech.
   Krátké klient/projekt jména nepotřebují word-break: anywhere. */
.task-breadcrumb {
    overflow-wrap: normal;
    word-break: normal;
}
.task-crumb {
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 700px) {
    /* ── Layout: skryjeme Google faktury panel a vynutíme 1-col ─────────── */
    .panel-google-invoices {
        display: none !important;
    }
    .two-column {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    /* ── Workspace padding: méně horizontální vaty na malých obrazovkách ── */
    .workspace {
        padding: 16px 12px 56px !important;
    }

    /* ── Panel: section-head kompaktnější ────────────────────────────────── */
    .panel {
        padding: 18px 10px !important;
    }
    .section-head {
        margin-bottom: 12px;
        padding-bottom: 10px;
        gap: 6px;
    }
    .section-head h2 {
        font-size: 16px;
    }
    .section-head p {
        font-size: 12px;
        line-height: 1.35;
    }

    /* ── Task breadcrumb: truncate s ellipsis, neláme po znacích ─────────── */
    .task-breadcrumb {
        gap: 4px;
        font-size: 11px;
        margin: 0 0 3px;
        min-width: 0;
    }
    .task-crumb {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Task title — také prevence proti per-character break z globálního <p>.
       (h3 ho normálně nedědí, ale .task-title-link je <a> uvnitř, který je
       chráněn rule pro a[href*="://"]. Defensive override pro jistotu.) */
    .task-row .task-title {
        overflow-wrap: break-word;
        word-break: normal;
        font-size: 15px !important;
    }
    .task-row .task-title a {
        overflow-wrap: break-word;
    }

    /* Task pills nemají přetékat — jednořádkové, ellipsis kdyby */
    .task-pill {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Page-head: kompaktnější, žádné velké padding ─────────────────────── */
    .page-head {
        gap: 8px !important;
        padding-bottom: 14px;
        margin-bottom: 4px;
    }
    .page-head .eyebrow {
        font-size: 10.5px;
        margin-bottom: 2px;
    }
    .page-head > div > p {
        font-size: 13px;
        line-height: 1.4;
        margin-top: 4px;
    }
    .page-head h1 {
        font-size: 21px !important;
        line-height: 1.2;
    }

    /* Nový klient / nový projekt: button na šířku celého řádku */
    .page-head .add-panel,
    .page-head .add-panel > summary {
        width: 100%;
        box-sizing: border-box;
    }
    .page-head .add-panel > summary {
        text-align: center;
        justify-content: center;
    }

    /* ── Prospects (Příležitosti v jednání): vertikální stack ─────────────── */
    .prospect-row-link {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 12px;
    }
    .prospect-row-meta {
        align-self: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }
    .prospect-action {
        font-size: 12.5px;
    }

    /* ── Gtask dashboard card: kompaktnější ───────────────────────────────── */
    .gtask-dashboard-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .gtask-dashboard-card h3 {
        font-size: 14px;
    }
    .gtask-dashboard-card p {
        font-size: 12px;
        line-height: 1.3;
    }
    .gtask-dashboard-count {
        font-size: 18px;
        padding: 5px 10px;
    }

    /* ── Flash banner: kompaktnější ──────────────────────────────────────── */
    .flash {
        padding: 10px 12px;
        font-size: 13px;
        margin-bottom: 8px;
    }
}

/* Velmi úzké telefony (≤380 px — iPhone SE, starší Androidy) — ještě o krok níž */
@media (max-width: 380px) {
    .workspace {
        padding: 14px 10px 48px !important;
    }
    .panel {
        padding: 16px 8px !important;
    }
    .page-head h1 {
        font-size: 19px !important;
    }
    .section-head h2 {
        font-size: 15px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD — Dnešní fokus strip + Mobile quick actions
   Nová mobile-first sekce přidaná v 2026-05-13.
   Cíl: glanceable info nahoře (kolik mám po termínu / dnes / zítra) +
        rychlé akce z mobilu (diktovat, nový úkol, časovač, hledat).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Dnešní fokus — 3 barevné chipy s počty úkolů ───────────────────────── */
.dashboard-focus {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-focus-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--panel);
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    min-width: 0;
}

.dashboard-focus-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.dashboard-focus-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.dashboard-focus-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.dashboard-focus-label {
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    line-height: 1.1;
}

.dashboard-focus-count {
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}

/* Barevné varianty — overdue (red), today (orange), tomorrow (blue) */
.dashboard-focus-overdue {
    border-color: color-mix(in oklch, var(--danger) 25%, var(--rule));
    background: color-mix(in oklch, var(--danger) 4%, var(--card));
}
.dashboard-focus-overdue .dashboard-focus-count {
    color: var(--danger);
}
.dashboard-focus-today {
    border-color: color-mix(in oklch, var(--warn) 28%, var(--rule));
    background: color-mix(in oklch, var(--warn) 5%, var(--card));
}
.dashboard-focus-today .dashboard-focus-count {
    color: color-mix(in oklch, var(--warn) 50%, var(--ink));
}
.dashboard-focus-tomorrow {
    border-color: color-mix(in oklch, var(--brand) 22%, var(--rule));
    background: color-mix(in oklch, var(--brand) 3%, var(--card));
}
.dashboard-focus-tomorrow .dashboard-focus-count {
    color: color-mix(in oklch, var(--brand) 60%, var(--ink));
}

/* Prázdný stav (count = 0) — ztlumený, "vše v pohodě" */
.dashboard-focus-chip.is-empty {
    opacity: 0.55;
    border-color: var(--rule);
    background: var(--panel);
}
.dashboard-focus-chip.is-empty .dashboard-focus-count {
    color: var(--ink-3);
}

/* ── Quick actions — 4 ikonové buttony (desktop + mobile) ─────────────────
   2026-05-13: původně mobile-only, na žádost uživatele i na desktop.
   Default je desktop sizing (kompaktnější, elegantnější), mobile override
   v @media níže dělá z buttonů velké tappable cíle. */
.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-quick-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--panel);
    text-decoration: none;
    color: var(--ink);
    text-align: center;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    min-height: 54px;
    min-width: 0;
}

.dashboard-quick-action:hover {
    transform: translateY(-1px);
    border-color: var(--ink-3);
    box-shadow: var(--shadow-sm);
}

.dashboard-quick-action:active {
    transform: scale(0.98);
    border-color: var(--brand);
}

.dashboard-quick-action-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.dashboard-quick-action-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Mobile override (≤700 px) — vertikální (icon nad labelem), větší tappable */
@media screen and (max-width: 700px) {
    .dashboard-quick-actions {
        gap: 8px;
    }
    .dashboard-quick-action {
        flex-direction: column;
        gap: 6px;
        padding: 14px 4px;
        min-height: 76px;
    }
    .dashboard-quick-action-icon {
        font-size: 24px;
    }
    .dashboard-quick-action-label {
        font-size: 11.5px;
        white-space: normal;
        line-height: 1.2;
        text-align: center;
        text-overflow: clip;
        overflow: visible;
    }
}

/* Na mobilu jsou focus chipy menší + kompaktnější */
@media (max-width: 700px) {
    .dashboard-focus {
        gap: 6px;
    }
    .dashboard-focus-chip {
        padding: 10px 10px;
        gap: 8px;
    }
    .dashboard-focus-icon {
        font-size: 16px;
    }
    .dashboard-focus-label {
        font-size: 10px;
    }
    .dashboard-focus-count {
        font-size: 18px;
    }
}

/* Velmi úzké telefony (≤380 px) — ještě menší chipy */
@media (max-width: 380px) {
    .dashboard-focus-chip {
        padding: 8px 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .dashboard-quick-action-label {
        font-size: 10.5px;
    }
}

/* =====================================================================
   Domain split — Per-doménové metriky Google Ads účtu (od 2026-05-13)
   ===================================================================== */

.domain-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.domain-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    gap: 12px;
}

.domain-name {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 14px;
    word-break: break-all;
}

.domain-add-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 0.75rem;
}

.domain-add-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 240px;
}

.domain-add-form label > span {
    font-size: 13px;
    font-weight: 500;
}

.domain-detected-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.domain-detected-list li {
    padding: 6px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.notice-warning {
    background: #fff7e6;
    border-left: 4px solid #f7a800;
    padding: 12px 16px;
    border-radius: 6px;
}

/* Period switch (30 dnů / Minulý měsíc) */
.period-switch {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 3px;
    margin: 0.5rem 0 1rem;
}

.period-switch a {
    padding: 7px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted, #666);
    transition: background 0.15s, color 0.15s;
}

.period-switch a:hover {
    color: var(--text, #111);
}

.period-switch a.active {
    background: white;
    color: var(--text, #111);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Per-doménový breakdown v ads tabu */
.ads-domain-breakdown {
    margin-top: 0.5rem;
}

.ads-domain-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 1rem 0;
}

.ads-domain-row {
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border-left: 3px solid #3478f6;
}

.ads-domain-row.unattributed {
    border-left-color: #f7a800;
    background: rgba(247, 168, 0, 0.06);
}

.ads-domain-row.no-data {
    opacity: 0.7;
    border-left-color: #999;
}

.ads-domain-row.no-data.unattributed {
    border-left-color: #f7a800;
    opacity: 0.85;
}

.ads-domain-no-data {
    font-size: 12.5px;
    padding: 6px 0;
    margin: 0;
}

.ads-domain-mapping-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.ads-domain-row.unattributed .ads-domain-mapping-form {
    border-top-color: rgba(247, 168, 0, 0.3);
}

.ads-domain-mapping-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 220px;
}

.ads-domain-mapping-form label > span {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted, #666);
}

.ads-domain-mapping-form select {
    padding: 7px 10px;
    border-radius: 5px;
    border: 1px solid var(--line, #d5d5da);
    font-size: 14px;
    background: white;
}

.ads-domain-row.not-mine {
    border-left-color: #999;
    background: rgba(0, 0, 0, 0.015);
    opacity: 0.7;
}

.ads-domain-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}

.ads-domain-row-domain {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 15px;
}

.ads-domain-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #3478f6;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ads-domain-badge.unattributed {
    background: #f7a800;
}

.ads-domain-row-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 12px;
    font-size: 13px;
}

.ads-domain-row-metrics > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ads-domain-row-metrics .label {
    font-size: 11px;
    color: var(--muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ads-domain-row-metrics strong {
    font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * Podúkoly (subtasks) — kompaktní seznam pod parent taskem
 * Schema: tasks.parent_task_id (NULL = top-level, INT = podúkol).
 * UX:     odsazený checkbox + název, klik na ✓ označí jako hotové (form POST).
 * ------------------------------------------------------------------------- */
.task-subtasks {
    list-style: none;
    margin: 4px 0 0 28px;
    padding: 8px 12px 4px;
    border-left: 2px solid var(--line, #e5e7eb);
    font-size: 13px;
}

.task-subtasks-head {
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.task-subtask {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    line-height: 1.4;
}

.task-subtask + .task-subtask {
    border-top: 1px dashed var(--line, #e5e7eb);
}

.task-subtask-toggle {
    display: inline-flex;
    margin: 0;
}

.task-subtask-checkbox {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--line-strong, #9ca3af);
    border-radius: 4px;
    background: transparent;
    color: var(--muted, #666);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.task-subtask-checkbox:hover {
    border-color: var(--brand, #5b5bd6);
    color: var(--brand, #5b5bd6);
}

.task-subtask-checkbox.is-done {
    background: var(--brand, #5b5bd6);
    border-color: var(--brand, #5b5bd6);
    color: #fff;
}

.task-subtask-type {
    font-size: 14px;
    line-height: 1;
}

.task-subtask-title {
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.task-subtask-title:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand, #5b5bd6);
}

.task-subtask-title.is-done {
    text-decoration: line-through;
    color: var(--muted, #9ca3af);
}

.task-subtask-deadline {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface-2, #f3f4f6);
}

.task-subtask-deadline.task-pill-deadline-overdue {
    background: #fee2e2;
    color: #991b1b;
}

.task-subtask-deadline.task-pill-deadline-today {
    background: #fef3c7;
    color: #92400e;
}

.task-subtask-deadline.task-pill-deadline-tomorrow {
    background: #dbeafe;
    color: #1e40af;
}

.task-subtask-status-done .task-subtask-title {
    opacity: 0.6;
}

/* Mobile: zmenšit indent */
@media (max-width: 700px) {
    .task-subtasks {
        margin-left: 14px;
        padding-left: 8px;
    }
    .task-subtask-checkbox {
        width: 16px;
        height: 16px;
    }
}

/* ---------------------------------------------------------------------------
 * FAKTURACE — kosmetické vylepšení (2026-05-18)
 * Oddělení dvou zón: "Moje fakturace" (vlevo) vs "Google fakturace" (vpravo).
 * Sekční bar nad hlavičkou + vizuální dělič a jemný background u G-faktura sloupce.
 * ------------------------------------------------------------------------- */

.invoicing-section-bar {
    display: grid;
    /* Stejné mřížkové rozdělení jako .invoicing-row, ale labely pokrývají rozsahy:
       label MINE = sloupce 1-8, label GOOGLE = sloupce 9-10. */
    grid-template-columns:
        32px
        minmax(180px, 1.5fr)
        88px
        118px
        118px
        180px
        minmax(130px, 1.2fr)
        88px
        minmax(170px, 220px)
        22px;
    gap: 10px;
    padding: 8px 14px 4px;
    align-items: center;
    margin-bottom: 0;
}

.invoicing-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 620;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}

.invoicing-section-icon {
    font-size: 14px;
    line-height: 1;
}

/* Levá sekce — "Moje fakturace" — spans sloupce 1-8 (check, name, fix, od, do, dnů, výsledek, leady) */
.invoicing-section-label-mine {
    grid-column: 1 / 9;
    color: var(--ink-2);
}

/* Pravá sekce — "Google fakturace" — spans sloupce 9-10 (G-faktura widget + saved) */
.invoicing-section-label-google {
    grid-column: 9 / 11;
    padding: 4px 10px;
    background: color-mix(in oklch, var(--accent) 6%, transparent);
    border-radius: var(--radius-sm);
    color: var(--accent-ink);
    justify-self: stretch;
}

/* Nad 1800px — dorovnat columns s wider grid v .invoicing-panel media query */
@media (min-width: 1800px) {
    .invoicing-section-bar {
        grid-template-columns:
            32px
            minmax(180px, 1.5fr)
            90px
            120px
            120px
            190px
            minmax(130px, 1.1fr)
            92px
            minmax(280px, 360px)
            22px;
        gap: 12px;
    }
}

/* Vizuální dělič mezi "Moje" (sloupce 1-8) a "Google" (sloupce 9-10).
   Implementováno přes left-border u G-faktura sloupce. */
.invoicing-panel .invoicing-row .invoicing-row-ginvoice,
.invoicing-panel .invoicing-row .invoicing-row-ginvoice.is-empty {
    position: relative;
    padding-left: 12px;
    margin-left: 2px;
}

.invoicing-panel .invoicing-row .invoicing-row-ginvoice::before,
.invoicing-panel .invoicing-row .invoicing-row-ginvoice.is-empty::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background: var(--rule);
}

/* Hlavička col-g — drobné zvýraznění, ať vizuálně koresponduje s G-faktura zónou */
.invoicing-panel .invoicing-table-head .col-g {
    color: var(--accent-ink);
    font-weight: 660;
}

/* ---------------------------------------------------------------------------
 * Vylepšený 3-stavový widget (Čeká / Odesláno / Přeskočit)
 * Drobnější mezery, lepší active state, kompaktní pill design.
 * ------------------------------------------------------------------------- */

.invoicing-row .invoicing-row-ginvoice {
    /* Místo plain inline-flex přidáme kompaktnější vzhled — tlačítka jsou už
       definovaná v .invoice-status-btn. Tady jen vyladíme background za widgetem. */
    background: color-mix(in oklch, var(--accent) 3%, transparent);
    border-radius: var(--radius-sm);
    padding: 4px 8px 4px 12px;
}

.invoicing-row.is-sent .invoicing-row-ginvoice {
    background: color-mix(in oklch, var(--ok) 4%, transparent);
}

.invoicing-row.is-pending.is-mine-sent .invoicing-row-ginvoice {
    background: color-mix(in oklch, var(--warn) 6%, transparent);
}

/* Když G-faktura není aktivní (klient ji nechce nebo není zapnutá),
   sloupec je viditelně prázdný — odlišíme ho. */
.invoicing-row .invoicing-row-ginvoice.is-empty {
    background: transparent;
    opacity: 0.5;
}

.invoicing-row .invoicing-row-ginvoice.is-empty:hover {
    opacity: 0.85;
}

/* ---------------------------------------------------------------------------
 * MOBILE LAYOUT pro invoicing (≤ 720px) — kartičky místo grid řádků
 * Každý invoicing-row se přerenderuje jako card s sekcemi pod sebou.
 * Skryjeme table-head + section-bar (na mobilu nejsou užitečné — info je v každé kartě).
 * ------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .invoicing-section-bar,
    .invoicing-panel .invoicing-table-head {
        display: none !important;
    }

    .invoicing-panel .invoicing-row {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        padding: 14px 14px;
        border-radius: var(--radius-md);
    }

    /* První řádek karty: checkbox + jméno (full width) */
    .invoicing-panel .invoicing-row > .invoicing-row-check {
        position: absolute;
        top: 14px;
        right: 14px;
    }

    .invoicing-panel .invoicing-row {
        position: relative;
        padding-right: 50px; /* místo pro absolutní checkbox vpravo */
    }

    .invoicing-panel .invoicing-row > .invoicing-row-name {
        order: 1;
    }

    /* Sekce "Moje fakturace" — fix + datum + výsledek + leady ve compact grid */
    .invoicing-panel .invoicing-row > .invoicing-row-fix,
    .invoicing-panel .invoicing-row > .invoicing-row-date,
    .invoicing-panel .invoicing-row > .invoicing-row-days,
    .invoicing-panel .invoicing-row > .invoicing-row-result,
    .invoicing-panel .invoicing-row > .invoicing-row-leads {
        order: 2;
    }

    /* Mini-grid pro pole na mobilu — pohodlnější tap targets */
    .invoicing-panel .invoicing-row > .invoicing-row-fix::before,
    .invoicing-panel .invoicing-row > .invoicing-row-result::before,
    .invoicing-panel .invoicing-row > .invoicing-row-days::before,
    .invoicing-panel .invoicing-row > .invoicing-row-leads::before {
        content: attr(data-mobile-label);
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ink-3);
        margin-bottom: 2px;
    }

    /* G-faktura zóna na mobilu — vizuálně oddělená kartička s pozadím */
    .invoicing-panel .invoicing-row > .invoicing-row-ginvoice,
    .invoicing-panel .invoicing-row > .invoicing-row-ginvoice.is-empty {
        order: 3;
        margin-top: 8px;
        margin-left: 0;
        padding: 10px 12px;
        background: color-mix(in oklch, var(--accent) 6%, var(--card));
        border: 1px solid color-mix(in oklch, var(--accent) 15%, var(--line));
        border-radius: var(--radius-md);
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    /* Skrýt vizuální dělič na mobilu (G-faktura má vlastní border) */
    .invoicing-panel .invoicing-row .invoicing-row-ginvoice::before,
    .invoicing-panel .invoicing-row .invoicing-row-ginvoice.is-empty::before {
        display: none;
    }

    /* Sekční label "Google fakturace" před widgetem na mobilu */
    .invoicing-panel .invoicing-row > .invoicing-row-ginvoice:not(.is-empty)::after {
        content: '📨 Google fakturace';
        order: -1;
        width: 100%;
        font-size: 11px;
        font-weight: 620;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--accent-ink);
        margin-bottom: 2px;
    }

    /* 3-stavové tlačítka na mobilu — širší, vyšší (lepší tap target) */
    .invoicing-panel .invoice-status-btn {
        flex: 1;
        min-height: 48px;
        min-width: auto;
        padding: 6px 8px;
    }

    .invoicing-panel .invoice-status-btn .btn-label {
        font-size: 11px;
    }

    /* Saved indicator skryt na mobilu (autosave funguje, ale ✓ není potřeba zobrazit
       — toast notifikace se zobrazují plovoucí) */
    .invoicing-panel .invoicing-row > .invoicing-row-saved {
        position: absolute;
        bottom: 4px;
        right: 4px;
        font-size: 11px;
    }

    /* G-faktura LINK (na fakturu v Google Ads) — na mobilu jako block s plnou šířkou */
    .invoicing-gads-links {
        width: 100%;
        margin-top: 4px;
    }

    .invoicing-gads-link {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        background: var(--card);
        border: 1px solid var(--line);
        font-size: 12px;
        font-weight: 540;
    }

    /* „Odeslat G-fakturu" — na mobilu taky plná šířka pod řádkem */
    .invoicing-send-ginvoice {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        font-size: 12px;
        font-weight: 540;
        margin-top: 4px;
    }

    /* Skryté pole na mobilu (Od / Do dates) — vytvořit kompaktní 2-col grid pro datumy */
    .invoicing-panel .invoicing-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .invoicing-panel .invoicing-row > .invoicing-row-name {
        grid-column: 1 / -1;
    }

    .invoicing-panel .invoicing-row > .invoicing-row-fix {
        grid-column: 1;
    }

    .invoicing-panel .invoicing-row > .invoicing-row-result {
        grid-column: 2;
        text-align: right;
    }

    .invoicing-panel .invoicing-row > .invoicing-row-date:nth-of-type(1) {
        grid-column: 1;
    }

    .invoicing-panel .invoicing-row > .invoicing-row-date:nth-of-type(2) {
        grid-column: 2;
    }

    .invoicing-panel .invoicing-row > .invoicing-row-days {
        grid-column: 1;
    }

    .invoicing-panel .invoicing-row > .invoicing-row-leads {
        grid-column: 2;
    }

    .invoicing-panel .invoicing-row > .invoicing-row-ginvoice,
    .invoicing-panel .invoicing-row > .invoicing-row-ginvoice.is-empty {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------------------
 * Project tile — klient badge jako vnořený klik (JS stopPropagation)
 * Karta je <a> vedoucí na detail projektu (jako dosud). Klient badge má
 * data-client-href atribut — JS handler v app.js zachytí klik, zastaví
 * propagaci na parent <a> a otevře detail klienta.
 * ------------------------------------------------------------------------- */
.tile-client-badge--clickable {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
}

.tile-client-badge--clickable:hover {
    background: color-mix(in oklch, var(--accent) 12%, var(--bg-soft));
    color: var(--accent-ink);
}

.tile-client-badge--clickable:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Danger zone v Settings tabu (klient + projekt)
 * Archivovat + Smazat natrvalo tlačítka vedle sebe + vysvětlující text dole.
 * ------------------------------------------------------------------------- */
.settings-danger-zone {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--line-strong);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.settings-danger-zone .archive-form {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

.settings-danger-hint {
    flex-basis: 100%;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}

/* Meeting task type icon — vedle title v meeting-task-row */
.meeting-task-type {
    font-size: 14px;
    margin: 0 4px;
}

.meeting-task-link {
    color: inherit;
    text-decoration: none;
}

.meeting-task-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand, #5b5bd6);
}

/* ---------------------------------------------------------------------------
 * Závislost úkolu — badge "Čeká na: úkol X"
 * Stejný vzhled jako ostatní task-pill, ale s "warning" odstínem (oranžová),
 * aby okamžitě vyniklo, že úkol nejde dělat.
 * ------------------------------------------------------------------------- */
.task-pill-blocked {
    background: var(--warning-soft);
    color: var(--warning-ink);
    border: 1px solid color-mix(in oklch, var(--warn) 30%, transparent);
    text-decoration: none;
    cursor: pointer;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-pill-blocked:hover {
    background: color-mix(in oklch, var(--warn) 18%, transparent);
    text-decoration: underline;
}

/* Opakující se úkol — badge "🔁 Týdně" — neutrální (info) odstín */
.task-pill-recurrence {
    background: var(--info-soft);
    color: var(--info-ink);
    border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
}

/* Timer quickstart na ?page=time — kompaktní layout s formálním feelingem */
.timer-quickstart .form-grid {
    align-items: end;
}

.timer-quickstart .form-actions-split {
    justify-content: flex-start;
}

/* ---------------------------------------------------------------------------
 * Kanban view úkolů (?page=tasks&view=kanban)
 * 4 sloupce vedle sebe, drag-drop mezi nimi (Sortable.js).
 * ------------------------------------------------------------------------- */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.kanban-column {
    background: var(--bg-soft);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.kanban-column-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--rule-soft);
}

.kanban-column-icon {
    font-size: 14px;
    color: var(--ink-3);
}

.kanban-column-title {
    flex: 1;
    margin: 0;
    font-family: var(--f-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.kanban-column-count {
    font-size: 12px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.kanban-column-list {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 80px;
}

.kanban-card {
    background: var(--card);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    cursor: grab;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kanban-card:hover {
    border-color: var(--rule);
    box-shadow: var(--shadow-sm);
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card.priority-urgent { border-left: 3px solid var(--danger); }
.kanban-card.priority-high   { border-left: 3px solid var(--warning); }
.kanban-card.priority-medium { border-left: 3px solid var(--brand); }
.kanban-card.priority-low    { border-left: 3px solid var(--line-strong); }

.kanban-card-breadcrumb {
    display: flex;
    gap: 4px;
    align-items: baseline;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.kanban-card-title {
    display: block;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.35;
    margin-bottom: 8px;
}

.kanban-card-title:hover {
    color: var(--brand);
}

.kanban-card-type-icon {
    font-size: 13px;
    margin-right: 4px;
}

.kanban-card-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11px;
}

.kanban-card-due {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.kanban-card-priority {
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--bg-soft);
    color: var(--ink-3);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kanban-card-priority-urgent { background: color-mix(in oklch, var(--danger) 12%, transparent); color: var(--danger); }
.kanban-card-priority-high   { background: color-mix(in oklch, var(--warn) 12%, transparent); color: var(--warning-ink); }

/* Sortable.js drag states */
.kanban-card-ghost {
    opacity: 0.4;
    background: var(--bg-soft);
}

.kanban-card-chosen {
    box-shadow: var(--shadow-md);
}

.kanban-card-dragging {
    opacity: 0.9;
    transform: rotate(2deg);
}

/* Mobile — kanban má smysl jen na desktopu, na mobilu skládáme sloupce pod sebe */
@media (max-width: 980px) {
    .kanban-board {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .kanban-board {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
 * Časová osa klienta — vertikální feed s denními oddělovači
 * ------------------------------------------------------------------------- */
.timeline-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-day-marker {
    margin: 16px 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-3);
}

.timeline-day-marker:first-child {
    margin-top: 0;
}

.timeline-event {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--rule-soft);
}

.timeline-event:last-child {
    border-bottom: none;
}

.timeline-event-icon {
    flex: 0 0 28px;
    height: 28px;
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--bg-soft);
    border-radius: var(--radius-md);
}

.timeline-event-body {
    flex: 1;
    min-width: 0;
}

.timeline-event-head {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 2px;
}

.timeline-event-time {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

.timeline-event-kind {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeline-event-title {
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    display: block;
    line-height: 1.4;
}

a.timeline-event-title:hover {
    color: var(--brand);
    text-decoration: underline;
}

.timeline-event-detail {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Akcentní barvy podle typu události — diskrétní border vlevo */
.timeline-event-meeting .timeline-event-icon { background: color-mix(in oklch, var(--info) 12%, transparent); }
.timeline-event-milestone .timeline-event-icon { background: color-mix(in oklch, var(--warn) 12%, transparent); }
.timeline-event-task_done .timeline-event-icon { background: color-mix(in oklch, var(--ok) 12%, transparent); }
.timeline-event-time .timeline-event-icon { background: color-mix(in oklch, var(--teal) 12%, transparent); }
.timeline-event-invoice .timeline-event-icon { background: color-mix(in oklch, var(--ok) 8%, transparent); }
.timeline-event-idea .timeline-event-icon { background: color-mix(in oklch, var(--warn) 10%, transparent); }

@media (max-width: 700px) {
    .timeline-event-icon {
        flex: 0 0 24px;
        height: 24px;
        width: 24px;
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Time Tab — Clockify-style audit view (2026-05-18 v3)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Month pager (‹ Květen 2026 ▾ ›) ───────────────────────────────────
   Vpravo od presetů (margin-left: auto). Pokud se nevejde na řádek,
   přepadne pod kvůli flex-wrap parent containeru. ───────────────────── */
.date-range-filter .month-pager {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.date-range-filter .month-pager-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--ink-2);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
    user-select: none;
}
.date-range-filter .month-pager-arrow:hover {
    color: var(--ink);
    background: var(--card);
}
.date-range-filter .month-pager-arrow.is-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}
.date-range-filter .month-pager-current {
    position: relative;
    display: inline-block;
}
.date-range-filter .month-pager-current[open] > summary { color: var(--ink); background: var(--card); }
.date-range-filter .month-pager-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    padding: 4px 10px;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
    user-select: none;
}
.date-range-filter .month-pager-label::-webkit-details-marker,
.date-range-filter .month-pager-label::marker {
    display: none;
    content: "";
}
.date-range-filter .month-pager-label::after {
    content: "▾";
    font-size: 10px;
    color: var(--ink-2);
    opacity: 0.6;
}
.date-range-filter .month-pager-label:hover {
    background: var(--card);
}
.date-range-filter .month-pager-label.is-full-month { color: var(--brand-strong, var(--ink)); }
.date-range-filter .month-pager-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 4px;
    padding: 10px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    max-height: 380px;
    overflow-y: auto;
}
.date-range-filter .month-pager-item {
    display: block;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    text-align: center;
    transition: background 0.12s;
    white-space: nowrap;
}
.date-range-filter .month-pager-item:hover {
    background: var(--card);
    color: var(--ink);
}
.date-range-filter .month-pager-item.is-active {
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
}
.date-range-filter .month-pager-item.is-context {
    border: 1px dashed var(--rule);
}

/* Vlastní rozsah collapsible — inline pod presety */
.date-range-filter .custom-range-trigger {
    display: inline-block;
    margin-left: 4px;
    position: relative;
}
.date-range-filter .custom-range-trigger > summary {
    list-style: none;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink-2);
    padding: 5px 12px;
    border: 1px dashed var(--rule);
    border-radius: var(--radius-pill, 999px);
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    display: inline-block;
    user-select: none;
}
.date-range-filter .custom-range-trigger > summary::-webkit-details-marker,
.date-range-filter .custom-range-trigger > summary::marker {
    display: none;
    content: "";
}
.date-range-filter .custom-range-trigger > summary:hover {
    color: var(--ink);
    border-color: var(--ink-2);
    background: var(--card);
}
.date-range-filter .custom-range-trigger[open] > summary {
    color: var(--ink);
    background: var(--card);
    border-style: solid;
}
.date-range-filter .custom-range-trigger .date-range-custom {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 18;
    margin: 0;
    padding: 10px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══ Time tab — Clockify-style inline-editovatelný řádek (2026-06-10) ═══
   Klik do buňky = uprav, autosave přes app.js (saveRow). Žádné tlačítko Upravit. */

/* Header — jen „Vybrat vše" + nápověda (Clockify nemá sloupcové popisky) */
.time-row-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 0;
    font-size: 12px;
    color: var(--ink-2);
}
.time-row-selectall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.time-row-header-hint {
    font-size: 11.5px;
    color: var(--ink-3, var(--ink-2));
    opacity: 0.8;
}

/* List wrapper */
.time-row-list {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: visible;
}

/* Řádek = flex: ☑ + popis (flex:1) + pravý cluster (meta). Scoped přes
   .time-row-list, aby nepřebíjel Timer view (stejný název class). */
.time-row-list .time-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 5px 12px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    transition: background 0.12s;
}
.time-row-list .time-row:last-child { border-bottom: 0; }
.time-row-list .time-row:hover { background: color-mix(in oklch, var(--accent) 3%, var(--paper)); }
.time-row-list .time-row:focus-within { background: color-mix(in oklch, var(--accent) 5%, var(--paper)); }
.time-row-list .time-row--non-billable .time-row-desc { color: var(--ink-2); }
.time-row-list .time-row.is-selected { background: color-mix(in oklch, var(--accent) 6%, var(--paper)); }

/* Popis — hlavní editovatelné pole (textarea kvůli zalamování na 2–3 řádky),
   normální řez (Ondra: ne tučně). Edituje se na klik; výšku řídí JS (autoGrowDesc). */
.time-row-list .time-row-desc {
    flex: 1 1 0;
    min-width: 80px;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    transition: border-color 0.12s, background 0.12s;
    resize: none;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: block;
    min-height: 31px;
    height: 31px;
}
.time-row-list .time-row-desc::placeholder { color: var(--ink-3, var(--ink-2)); font-weight: 400; }
.time-row-list .time-row-desc:hover { border-color: var(--rule); }
.time-row-list .time-row-desc:focus { outline: none; border-color: var(--accent); background: var(--paper); }
.time-row-list .time-row-desc.is-invalid { border-color: var(--bad, #e11d48); background: color-mix(in oklch, var(--bad, #e11d48) 6%, var(--paper)); }

/* Pravý cluster — projekt, štítky, $, časy, datum, trvání, status, menu */
.time-row-list .time-row-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* Klient · projekt — barevný odkaz */
.time-row-list .time-row-proj {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.time-row-list .time-row-proj:hover { text-decoration: underline; }

/* Štítky — rozbalovací výběr (klik = vyber z existujících, žádné psaní) */
.time-row-list .time-row-tagpick { position: relative; flex: 0 0 auto; }
.time-row-list .time-row-tagpick-trigger {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    max-width: 170px;
    overflow: hidden;
    padding: 3px 9px;
    border: 1px dashed var(--rule);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink-2);
    white-space: nowrap;
    transition: border-color 0.12s, background 0.12s;
}
/* Když jsou štítky přiřazené, trigger nepotřebuje rámeček — chipy mluví samy */
.time-row-list .time-row-tagpick-trigger:has(.time-row-tagchip) {
    border-color: transparent;
    padding-left: 2px;
    padding-right: 2px;
}
.time-row-list .time-row-tagpick-trigger::-webkit-details-marker { display: none; }
.time-row-list .time-row-tagpick-trigger:hover { border-color: var(--ink-3, var(--ink-2)); background: var(--card); }
.time-row-list .time-row-tagpick[open] .time-row-tagpick-trigger { border-color: var(--accent); border-style: solid; background: var(--paper); }
.time-row-list .time-row-tagpick-empty { color: var(--ink-3, var(--ink-2)); }
.time-row-list .time-row-tagchip {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}
.time-row-list .time-row-tagpick-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
/* Volba = řádek s checkmarkem. POZOR: <label> dědí globální uppercase →
   text-transform:none je tu nutný (viz CLAUDE.md gotcha Quill/label). */
.time-row-list .time-row-tagpick-opt {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 7px 10px 7px 30px;
    position: relative;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 450;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
    user-select: none;
}
.time-row-list .time-row-tagpick-opt:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); }
/* Checkbox skrytý — stav kreslí ✓ před názvem (Clockify-style čistota) */
.time-row-list .time-row-tagpick-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.time-row-list .time-row-tagpick-opt span::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--ink-4, var(--rule));
    border-radius: 4px;
    transition: border-color 0.1s, background 0.1s;
}
.time-row-list .time-row-tagpick-opt:hover span::before { border-color: var(--accent); }
.time-row-list .time-row-tagpick-opt input:checked + span { color: var(--accent); font-weight: 600; }
.time-row-list .time-row-tagpick-opt input:checked + span::before {
    background: var(--accent);
    border-color: var(--accent);
}
.time-row-list .time-row-tagpick-opt input:checked + span::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 7px;
    height: 4px;
    border-left: 2px solid var(--paper);
    border-bottom: 2px solid var(--paper);
    transform: translateY(-72%) rotate(-45deg);
}
.time-row-list .time-row-tagpick-opt input:focus-visible + span::before { outline: 2px solid var(--accent); outline-offset: 1px; }
.time-row-list .time-row-tagpick-hint {
    margin: 6px 8px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-3, var(--ink-2));
}

/* $ billable toggle — checkbox skrytý, $ ikona zelená když fakturovatelné */
.time-row-list .time-row-billable { display: inline-flex; align-items: center; cursor: pointer; }
.time-row-list .time-row-billable input { position: absolute; opacity: 0; width: 0; height: 0; }
.time-row-list .time-row-billable-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    color: var(--ink-3, var(--ink-2));
    border: 1px solid transparent;
    transition: color 0.12s, background 0.12s;
}
.time-row-list .time-row-billable input:checked + .time-row-billable-icon {
    color: var(--ok, #16a34a);
    background: color-mix(in oklch, var(--ok, #16a34a) 12%, transparent);
}
.time-row-list .time-row-billable:hover .time-row-billable-icon { border-color: var(--rule); }
.time-row-list .time-row-billable input:focus-visible + .time-row-billable-icon { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Časy od–do */
.time-row-list .time-row-times { display: inline-flex; align-items: center; gap: 2px; }
.time-row-list .time-row-times[hidden] { display: none; }

/* Datum (text + kalendář ikona + skrytý native picker) — vlevo hned za checkboxem */
.time-row-list .time-row-date { position: relative; display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; }

/* Trvání — editovatelné, tučné */
.time-row-list .time-row-dur-input {
    width: 60px;
    text-align: right;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    padding: 5px 7px;
    border-radius: var(--radius-sm);
    transition: border-color 0.12s, background 0.12s;
}
.time-row-list .time-row-dur-input:hover { border-color: var(--rule); }
.time-row-list .time-row-dur-input:focus { outline: none; border-color: var(--accent); background: var(--paper); }

/* ── Entry cell (topic + tag + $ button) ─────────────────────────────── */
.time-row-list .time-row-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.time-row-list .time-row-topic-input {
    flex: 1;
    min-width: 0;
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: border-color 0.12s, background 0.12s;
}
.time-row-list .time-row-topic-input:hover {
    border-color: var(--rule);
}
.time-row-list .time-row-topic-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--paper);
}
.time-row-list .time-row-topic-input.is-invalid {
    border-color: var(--bad, #e11d48) !important;
    background: color-mix(in oklch, var(--bad, #e11d48) 8%, var(--paper));
}

/* Klient · projekt — jemný chip pod popisem (jen global Time tab) */
.time-row-list .time-row-tag {
    display: inline-block;
    align-self: flex-start;
    margin-top: 1px;
    max-width: 100%;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    background: color-mix(in oklch, var(--accent) 9%, transparent);
    border-radius: var(--radius-sm);
    padding: 1px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.time-row-list .time-row-tag-link { color: inherit; text-decoration: none; }
.time-row-list .time-row-tag-link:hover { text-decoration: underline; }
.time-row-list .time-row-tag-sep { opacity: 0.5; }

/* (Bývalý $ billable toggle byl odstraněn — fakturovatelnost je teď v ⋮ menu
   jako toggle item s ✓ ikonkou. Viz .time-row-menu-check.) */

/* Checkbox sloupec (select-all v header + per-row checkbox) */
.time-row-list .time-row-select,
.time-row-header-select {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.time-row-select-cb {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent, var(--ink));
}
.time-row-list .time-row.is-selected {
    background: color-mix(in oklch, var(--accent, var(--ink)) 6%, var(--paper));
}

/* Billable toggle uvnitř ⋮ menu — ✓ / □ checkbox-like */
.time-row-list .time-row-menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}
.time-row-list .time-row-menu-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--ink-3, var(--ink-2));
    flex-shrink: 0;
}
.time-row-list .time-row-menu-check.is-on {
    color: var(--ok, #16a34a);
}

/* ── Date cell (DD.MM.RRRR + 📅) ─────────────────────────────────────── */
.time-row-list .time-row-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.time-row-list .time-row-date {
    position: relative;
    justify-content: flex-start;
}
.time-row-list .time-row-date-input {
    width: 100px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    padding: 5px 7px;
    border-radius: var(--radius-sm);
    cursor: pointer;  /* klik otevírá date picker */
    transition: border-color 0.12s, background 0.12s;
}
.time-row-list .time-row-date-input:hover { border-color: var(--rule); }
.time-row-list .time-row-date-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--paper);
}
.time-row-list .time-row-date-input.is-invalid {
    border-color: var(--bad, #e11d48) !important;
}
.time-row-list .date-picker-shadow {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    left: 50%;
    bottom: 0;
}
.time-row-list .date-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.time-row-list .date-picker-trigger:hover {
    color: var(--accent);
    background: color-mix(in oklch, var(--accent) 8%, transparent);
    border-color: var(--rule);
}

/* ── Duration cell (H:MM bold + decimal) ─────────────────────────────── */
.time-row-list .time-row-duration {
    justify-content: flex-end;
    text-align: right;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.time-row-list .time-row-duration-input {
    width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: border-color 0.12s, background 0.12s;
}
.time-row-list .time-row-duration-input:hover { border-color: var(--rule); }
.time-row-list .time-row-duration-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--paper);
}
.time-row-list .time-row-fakturoid {
    font-size: 11px;
    color: var(--ink-3, var(--ink-2));
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    padding-right: 6px;
}

/* ── Times cell (HH:MM – HH:MM) ──────────────────────────────────────── */
.time-row-list .time-row-times {
    justify-content: flex-start;
    gap: 4px;
}
.time-row-list .time-row-time-input {
    width: 56px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 4px;
    border-radius: var(--radius-sm);
    transition: border-color 0.12s, background 0.12s;
}
.time-row-list .time-row-time-input:hover { border-color: var(--rule); }
.time-row-list .time-row-time-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--paper);
}
.time-row-list .time-row-time-input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
.time-row-list .time-row-sep {
    color: var(--ink-2);
    opacity: 0.5;
    font-size: 13px;
}
.time-row-header-times {
    justify-content: flex-start;
}

/* ── End cell (status + ⋮ menu) ──────────────────────────────────────── */
.time-row-list .time-row-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    position: relative;
}
.time-row-list .time-row-status {
    display: inline-block;
    min-width: 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.2s;
}
.time-row-list .time-row-status.is-saving { color: var(--ink-2); }
.time-row-list .time-row-status.is-ok     { color: var(--ok, #16a34a); animation: fade-out 1.2s ease forwards; }
.time-row-list .time-row-status.is-err    { color: var(--bad, #e11d48); }
@keyframes fade-out {
    0%, 60% { opacity: 1; }
    100%    { opacity: 0; }
}

/* ⋮ menu — closed/open visual */
.time-row-list .time-row-menu {
    position: relative;
}
.time-row-list .time-row-menu-trigger {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--ink-2);
    border-radius: var(--radius-sm);
    transition: color 0.12s, background 0.12s;
}
.time-row-list .time-row-menu-trigger::-webkit-details-marker { display: none; }
.time-row-list .time-row-menu-trigger:hover {
    color: var(--accent);
    background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.time-row-list .time-row-menu[open] > .time-row-menu-trigger {
    color: var(--accent);
    background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.time-row-list .time-row-menu-popover {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 15;
    min-width: 200px;
    padding: 4px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}
.time-row-list .time-row-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    width: 100%;
}
.time-row-list .time-row-menu-item:hover {
    background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.time-row-list .time-row-menu-item.is-danger {
    color: var(--bad, #e11d48);
}
.time-row-list .time-row-menu-item.is-danger:hover {
    background: color-mix(in oklch, var(--bad, #e11d48) 10%, transparent);
}
.time-row-list .time-row-delete-form {
    margin: 0;
}
.time-row-list .time-row-delete-form button {
    width: 100%;
}

/* Popis dialog */
.time-row-desc-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.time-row-desc-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}
.time-row-desc-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    margin: 0;
}
.time-row-desc-head h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}
.time-row-desc-topic {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}
.time-row-desc-form textarea {
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    resize: vertical;
}
.time-row-desc-form footer {
    display: flex;
    justify-content: flex-end;
}

/* ── Totals footer ───────────────────────────────────────────────────── */
.time-row-totals {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-top: 8px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
}
.time-row-totals-main,
.time-row-totals-secondary {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.time-row-totals-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-2);
}
.time-row-totals-value,
.time-row-totals-secondary strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.time-row-totals-secondary strong {
    font-size: 16px;
}
.time-row-totals-fakturoid {
    font-size: 12px;
    color: var(--ink-2);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}
/* Decimál fakturovaného času = číslo do faktury (Fakturoid) → zvýrazněné. */
.time-row-totals-fakturoid--bill {
    color: var(--accent);
    opacity: 1;
    font-weight: 600;
    font-size: 13px;
}
.time-row-totals-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.time-row-totals-copy:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.time-row-totals-copy.is-copied {
    color: var(--ok, #1a7f37);
    border-color: var(--ok, #1a7f37);
}
.time-row-totals-cost {
    margin-left: auto;
    font-size: 14px;
    color: var(--ink);
}
.time-row-totals-cost strong {
    color: var(--accent);
    font-weight: 700;
}

/* ── Duplikační modál ────────────────────────────────────────────────── */
.time-dup-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.time-dup-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}
.time-dup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    margin: 0;
}
.time-dup-head h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}
.time-dup-topic {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}
.time-dup-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.time-dup-presets button {
    padding: 6px 12px;
    font-size: 13px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.time-dup-presets button:hover {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 8%, var(--card));
}
.time-dup-presets button.is-just-clicked {
    background: color-mix(in oklch, var(--accent) 18%, var(--card));
    border-color: var(--accent);
}
.time-dup-date {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--ink-2);
}
.time-dup-date input[type="date"] {
    padding: 8px 10px;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.time-dup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .time-row-list .time-row { gap: 8px; padding: 5px 10px; }
    .time-row-list .time-row-tags-input { width: 92px; }
}

@media (max-width: 700px) {
    .month-pager {
        gap: 8px;
        margin-bottom: 6px;
    }
    .month-pager-label { font-size: 16px; }
    .month-pager-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: calc(100vw - 24px);
    }
    /* Mobil: popis na celý řádek, meta cluster se zalomí pod něj */
    .time-row-list .time-row { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
    .time-row-list .time-row-desc { flex: 1 1 100%; min-width: 0; }
    .time-row-list .time-row-side { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
    .time-row-list .time-row-tags-input { width: 84px; }
    .time-row-list .time-row-tags-input:focus { width: 130px; }
    .time-row-list .time-row-menu-popover {
        right: -4px;
        min-width: 180px;
    }
    .time-row-totals {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .time-row-totals-cost { margin-left: 0; }
    .time-dup-form {
        padding: 16px 14px;
        gap: 12px;
    }
    .time-dup-presets { flex-direction: column; }
    .time-dup-presets button { width: 100%; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Time Tab — Bulk action bar + bulk dialogy
   ═══════════════════════════════════════════════════════════════════════ */
.time-bulk-bar {
    position: sticky;
    top: 8px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 8px;
    color: var(--paper);
    background: var(--ink);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    animation: bulk-bar-in 0.16s ease-out;
}
.time-bulk-bar[hidden] { display: none; }
@keyframes bulk-bar-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.time-bulk-bar-info {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
}
.time-bulk-bar-count {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.time-bulk-bar-label {
    opacity: 0.75;
}
.time-bulk-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.time-bulk-bar-actions button {
    padding: 6px 14px;
    font: inherit;
    font-size: 13px;
    color: var(--paper);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.time-bulk-bar-actions button:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.32);
}
.time-bulk-bar-actions button.is-danger:hover {
    background: var(--bad, #e11d48);
    border-color: var(--bad, #e11d48);
}
.time-bulk-bar-actions button.is-ghost {
    background: transparent;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.65);
}
.time-bulk-bar-actions button.is-ghost:hover {
    color: var(--paper);
    background: rgba(255, 255, 255, 0.08);
}

/* Bulk dialog (shared styling pro všechny 3 modaly) */
.time-bulk-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg, 12px);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}
.time-bulk-dialog::backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
}
.time-bulk-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    margin: 0;
}
.time-bulk-form header h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}
.time-bulk-form header p {
    margin: 0;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.45;
}
.time-bulk-form header p code {
    padding: 1px 5px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    background: var(--card);
    border-radius: 3px;
}
.time-bulk-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--ink-2);
}
.time-bulk-form input[type="month"],
.time-bulk-form input[type="text"] {
    padding: 8px 10px;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm, 4px);
}
.time-bulk-form input:focus {
    outline: 2px solid color-mix(in oklch, var(--accent, var(--ink)) 40%, transparent);
    outline-offset: 1px;
    border-color: var(--accent, var(--ink));
}
.time-bulk-form footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
}
.time-bulk-form footer button.is-danger {
    background: var(--bad, #e11d48);
    border-color: var(--bad, #e11d48);
    color: #fff;
}
.time-bulk-form footer button.is-danger:hover {
    background: color-mix(in oklch, var(--bad, #e11d48) 85%, #000);
}

@media (max-width: 700px) {
    .time-bulk-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .time-bulk-bar-actions {
        justify-content: flex-end;
    }
    .time-bulk-form {
        padding: 16px 14px;
        gap: 12px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   IDEAS — preset selector cards (4 typů: research / ppc_rsa / audit / brainstorm)
   ───────────────────────────────────────────────────────────────────────── */
.idea-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.idea-preset-card {
    display: block;
    padding: 12px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color .12s, background .12s, transform .08s;
}
.idea-preset-card:hover {
    border-color: #c4b5fd;
    background: #faf5ff;
}
.idea-preset-card.is-selected {
    border-color: #7c3aed;
    background: #f5f3ff;
}
.idea-preset-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.idea-preset-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.idea-preset-icon {
    font-size: 18px;
}
.idea-preset-card-desc {
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
}
.idea-preset-card.is-selected .idea-preset-card-desc {
    color: #4b5563;
}

/* Eyebrow badge na detail stránce (ukazuje preset typu) */
.idea-preset-eyebrow {
    color: #7c3aed;
    font-weight: 600;
}

/* Overview cards (Gemini/Claude/GPT mini-karty) — hover bez JS (CSP-safe) */
.idea-overview-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Action step title input — focus highlight bez inline onfocus= (CSP-safe) */
.step-title-input:focus {
    background: #fafafa;
    border-color: #ddd;
}

/* Stage badge — research vs copywriting (PPC pipeline) */
.ppc-stage-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}
.ppc-stage-research {
    background: #ede9fe;
    color: #5b21b6;
}
.ppc-stage-copywriting {
    background: #fef3c7;
    color: #92400e;
}

/* Cílení panel (URL + lokalita + jazyk) */
.idea-target-panel {
    padding: 14px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}
.idea-target-headline {
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #1e40af;
}

/* ─────────────────────────────────────────────────────────────────────────
   PPC RSA — výstup detail (headlines/descriptions s char counterem, copy)
   ───────────────────────────────────────────────────────────────────────── */
.ppc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ppc-item {
    background: #fff;
    transition: background .1s;
}
.ppc-item:hover {
    background: #f9fafb;
}
.ppc-char-count {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ppc-char-ok {
    color: #10b981;
}
.ppc-char-over {
    color: #ef4444;
}
.ppc-copy-flash {
    background: #d1fae5 !important;
    transition: background .3s;
}
.ppc-section h3 {
    margin-bottom: 10px;
}

/* Nenápadný copy icon button v pravém horním rohu sekce — replacement
   za velký "Kopírovat vše" button. Vidíš ho jen po hover na sekci. */
.ppc-copy-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    opacity: 0.4;
    transition: opacity .15s, background .15s, border-color .15s;
    z-index: 2;
}
.ppc-copy-icon:hover {
    opacity: 1;
    background: #f3f4f6;
    border-color: #d1d5db;
}
.ppc-copy-icon.ppc-copy-flash {
    background: #d1fae5 !important;
    border-color: #10b981 !important;
    opacity: 1;
}
/* Lehčí hover přes celou sekci — odhalí copy ikonu */
.ppc-section:hover .ppc-copy-icon,
.ppc-section:focus-within .ppc-copy-icon {
    opacity: 0.7;
}

/* Mobile — kompaktní layout */
@media (max-width: 700px) {
    .idea-preset-grid {
        grid-template-columns: 1fr;
    }
    .ppc-item {
        grid-template-columns: 24px 1fr 70px !important;
    }
    .ppc-item .ppc-theme-badge {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   WEBSITE CREATE — výstup detail (sitemap, master prompt, images, design)
   ───────────────────────────────────────────────────────────────────────── */

/* Master prompt — velký code box pro copy do Claude Code */
.website-master-prompt-box {
    margin-top: 10px;
    padding: 14px 16px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 8px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #1e293b;
}
.website-master-prompt-box::-webkit-scrollbar {
    width: 8px;
}
.website-master-prompt-box::-webkit-scrollbar-track {
    background: #1e293b;
}
.website-master-prompt-box::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

/* Sitemap — karty stránek s vnořeným seznamem sekcí */
.website-sitemap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.website-page-card {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}
.website-page-head {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.website-page-num {
    display: inline-block;
    background: #f3f4f6;
    color: #6b7280;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 6px;
    vertical-align: middle;
}
.website-url-slug {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: #ecfdf5;
    color: #047857;
    border-radius: 4px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.website-section-list {
    margin: 0;
    padding-left: 22px;
    line-height: 1.5;
}
.website-section-list > li {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e5e7eb;
}
.website-section-list > li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.website-section-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.website-layout-hint {
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 10px;
}
.website-section-head-text {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}
.website-section-sub {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 4px;
}
.website-section-body {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    margin-bottom: 6px;
}
.website-section-cta {
    font-size: 12px;
    margin-top: 6px;
}
.website-cta-badge {
    display: inline-block;
    padding: 2px 10px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 12px;
    font-weight: 600;
}

/* Design — palette swatches */
.website-design-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 12px 14px;
    background: #faf5ff;
    border-radius: 6px;
}
.website-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.website-swatch {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.website-swatch code {
    background: rgba(255, 255, 255, 0.9);
    color: #111;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

/* Images — karty */
.website-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.website-image-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
}
.website-image-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.website-image-source {
    font-size: 12px;
    padding: 4px 10px;
}
.website-image-prompt-box {
    margin-top: 6px;
    padding: 8px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

@media (max-width: 700px) {
    .website-design-grid {
        grid-template-columns: 1fr;
    }
    .website-swatch {
        width: 60px;
        height: 60px;
    }
    .website-image-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Notifications schedule form (Settings → Notifikace)
   ═══════════════════════════════════════════════════════════════════════ */

/* Aktuální stav nahoře — barevný indikátor */
.notif-now-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
}
.notif-now-status.is-active {
    background: color-mix(in oklch, var(--ok, #16a34a) 12%, var(--paper));
    border: 1px solid color-mix(in oklch, var(--ok, #16a34a) 30%, var(--rule));
    color: var(--ink);
}
.notif-now-status.is-quiet {
    background: color-mix(in oklch, var(--ink-2) 8%, var(--paper));
    border: 1px solid var(--rule);
    color: var(--ink-2);
}

.notif-schedule-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.notif-schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.notif-schedule-block {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md, 8px);
    padding: 14px 16px;
    margin: 0;
}
.notif-schedule-block legend {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent, var(--ink));
    padding: 0 6px;
}
.notif-block-intro {
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.45;
}
.notif-schedule-block label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0;
    font-size: 13px;
    color: var(--ink);
}
.notif-schedule-block label > span:first-child {
    flex: 1;
    min-width: 0;
}
.notif-schedule-block label.checkline {
    justify-content: flex-start;
    color: var(--ink);
}
.notif-input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.notif-schedule-block input[type="number"] {
    width: 60px;
    padding: 6px 8px;
    font: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm, 4px);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.notif-schedule-block input[type="number"]:focus {
    outline: 2px solid color-mix(in oklch, var(--accent, var(--ink)) 40%, transparent);
    outline-offset: 1px;
    border-color: var(--accent, var(--ink));
}
.notif-input-suffix {
    font-size: 13px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.notif-schedule-block p.muted {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
}

/* ── Matice „Které notifikace chci dostávat" (Nastavení → Notifikace) ────── */
.notif-prefs-group {
    margin: 0 0 18px;
}
.notif-prefs-group:last-of-type {
    margin-bottom: 6px;
}
.notif-prefs-group-title {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent, var(--ink));
}
.notif-pref-row,
.notif-pref-subrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
}
.notif-prefs-group .notif-pref-row:last-child,
.notif-prefs-group .notif-pref-subrow:last-child {
    border-bottom: 0;
}
.notif-pref-subrow {
    padding-left: 22px;
}
.notif-pref-info {
    flex: 1;
    min-width: 230px;
    display: grid;
    gap: 2px;
}
.notif-pref-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.notif-pref-sublabel {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}
.notif-pref-desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-2);
}
.notif-pref-options {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
/* Pill volby — label dědí globální text-transform: uppercase, proto reset
   (stejná zrada jako tag picker 2026-06-10). Radio zůstává viditelné =
   stav čitelný i bez :has() podpory. */
.notif-pref-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--f-ui);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
    background: var(--paper);
    white-space: nowrap;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.notif-pref-opt input[type="radio"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--brand);
    flex-shrink: 0;
}
.notif-pref-opt:hover {
    border-color: color-mix(in oklch, var(--brand) 45%, var(--rule));
}
.notif-pref-opt:has(input:checked) {
    border-color: color-mix(in oklch, var(--brand) 60%, var(--rule));
    background: color-mix(in oklch, var(--brand) 10%, var(--paper));
    color: var(--ink);
    font-weight: 600;
}

/* Slot řádky v rozvrhu — checkbox vypínač vlevo, hodina vpravo */
.notif-slot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0;
    font-size: 13px;
    color: var(--ink);
}
.notif-slot-row .notif-slot-toggle {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
}

/* TL;DR help — collapsible */
.notif-help {
    margin-top: 16px;
}
.notif-help > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-2);
    padding: 6px 0;
    list-style: none;
    user-select: none;
}
.notif-help > summary::-webkit-details-marker,
.notif-help > summary::marker {
    display: none;
    content: "";
}
.notif-help > summary::before {
    content: "▸ ";
    color: var(--ink-3, var(--ink-2));
    margin-right: 4px;
}
.notif-help[open] > summary::before {
    content: "▾ ";
}
.notif-help > summary:hover {
    color: var(--ink);
}
.notif-help-body {
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md, 8px);
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.55;
}
.notif-help-body ul {
    margin: 8px 0;
    padding-left: 20px;
}
.notif-help-body li {
    margin: 6px 0;
}
.notif-help-body strong { color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────────────────
   HOTFIX 2026-05-22 — Time tab CSS pro renderTimeEntryInlineRow z missing_functions.php
   ───────────────────────────────────────────────────────────────────────────── */

/* Staré desktop/tablet override gridy z 6-sloupcové éry (HOTFIX 2026-05-22)
   odstraněny 2026-06-10 — nový PDF-style řádek má vlastní 5-sloupcový grid
   v hlavní definici + reflow v ≤900/≤700px. */

/* Icon buttony uvnitř action cell jsou menší než globální .icon-btn (36×36) */
.time-row-end .icon-btn,
.time-row-actions .icon-btn,
.time-row-end .time-row-delete-form .icon-btn {
    width: 30px;
    height: 30px;
    min-height: 0;
    font-size: 14px;
    box-shadow: none;
}
.time-row-end .icon-btn[data-time-edit-toggle].is-active {
    background: color-mix(in oklch, var(--accent, var(--ink)) 12%, var(--paper));
    border-color: var(--accent, var(--ink));
}

/* Wrapper pro celý záznam (time-row + edit panel) — sourozenec v time-row-list */
.time-row-entry-wrapper {
    display: block;
    border-bottom: 1px solid var(--rule);
}
.time-row-entry-wrapper:last-child {
    border-bottom: 0;
}
.time-row-entry-wrapper .time-row {
    border-bottom: 0;  /* border je teď na wrapperu, ne na vnitřní time-row */
}

/* Inline edit panel — odkrytý kliknutím na ✎ ikonu */
.time-row-edit-panel {
    padding: 14px 18px 18px 18px;
    background: color-mix(in oklch, var(--accent, var(--ink)) 3%, var(--paper));
    border-top: 1px dashed var(--rule);
}
.time-row-edit-panel .time-entry-edit {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}
/* Skryjeme původní "Upravit" summary, protože toggle dělá ✎ ikona */
.time-row-edit-panel .time-entry-edit > summary {
    display: none;
}
.time-row-edit-panel .time-entry-edit-form {
    margin-top: 0;
}

/* ═══ PROMPTY ════════════════════════════════════════════════════════════ */
.prompt-filters { display: flex; flex-direction: column; gap: 14px; }
.prompt-search-form { display: flex; gap: 8px; flex-wrap: wrap; }
.prompt-search-form input[type="search"] { flex: 1; min-width: 200px; }
.prompt-type-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.prompt-type-chip {
    display: inline-flex; align-items: center; padding: 5px 12px;
    border: 1px solid var(--rule); border-radius: var(--radius-pill);
    font-size: 13px; color: var(--ink-2); background: var(--card);
    cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; text-decoration: none;
}
.prompt-type-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.prompt-type-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.prompt-client-filter-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-3); max-width: 280px; }

/* Wiki-styl seznam promptů (přehled jako znalostní báze) */
.prompt-list-group { margin-bottom: 8px; }
.prompt-list-group-head {
    display: flex; align-items: baseline; gap: 8px; margin: 18px 0 6px;
    padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.prompt-list-group-head h3 { margin: 0; font-size: 14px; color: var(--ink); }
.prompt-list-group-head .prompt-list-group-count { font-size: 12px; color: var(--ink-4); }
.prompt-list-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink-4);
    border-radius: var(--radius-md); background: var(--card); margin-bottom: 6px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.prompt-list-row:hover { box-shadow: var(--shadow-sm); border-left-color: var(--accent); }
.prompt-list-row--coding { border-left-color: var(--accent); }
.prompt-list-row--web { border-left-color: var(--teal); }
.prompt-list-row--ads { border-left-color: var(--warn); }
.prompt-list-row--analysis { border-left-color: var(--good); }
.prompt-list-main { flex: 1; min-width: 0; }
.prompt-list-title { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; display: block; }
.prompt-list-title:hover { color: var(--accent-ink); text-decoration: underline; }
.prompt-list-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prompt-list-copy { flex-shrink: 0; font-size: 12px; padding: 5px 11px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--card); cursor: pointer; color: var(--ink-2); }
.prompt-list-copy:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Mobil (Pixel ~448px CSS): badge POD nadpis, ne vedle — jinak se „vlamuje" do titulku.
   Scopováno na .prompt-list-row, ať badge v detailu/jinde zůstane beze změny. */
@media screen and (max-width: 520px) {
    .prompt-list-row { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
    .prompt-list-row .prompt-list-main { flex: 1 1 100%; order: 1; }
    .prompt-list-row .prompt-type-badge { order: 2; }
    .prompt-list-row .prompt-list-copy { order: 3; margin-left: auto; }
}

/* Typové badge */
.prompt-type-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.prompt-source-badge { font-size: 11px; color: var(--ink-3); }
.prompt-type-badge--coding { background: var(--accent-soft); color: var(--accent-ink); }
.prompt-type-badge--web { background: var(--teal-soft); color: var(--teal-strong); }
.prompt-type-badge--ads { background: var(--warning-soft); color: var(--warning-ink); }
.prompt-type-badge--analysis { background: var(--ok-soft); color: var(--ok-ink); }
.prompt-card-scope { font-size: 12px; color: var(--ink-3); }
.prompt-card-scope--general { font-style: italic; color: var(--ink-4); }
.prompt-card-category { font-size: 11px; padding: 2px 8px; background: var(--paper-2); border-radius: var(--radius-pill); color: var(--ink-3); }

/* Detail */
.prompt-body {
    white-space: pre-wrap; word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px; line-height: 1.6; color: var(--ink); margin: 0;
    background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--radius-md);
    padding: 16px; max-height: 62vh; overflow: auto;
}
.prompt-detail-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 13px; }
.prompt-detail-actions { display: flex; gap: 8px; }
.prompt-target-model { font-size: 12px; color: var(--ink-3); }
.prompt-brief-text { white-space: pre-wrap; color: var(--ink-2); margin: 0; }

/* Formulář + AI generátor */
.prompt-form-row, .prompt-ai-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.prompt-body-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55; }
.prompt-ai-panel { border-left: 3px solid var(--accent); }
.prompt-ai-websearch { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.prompt-ai-websearch input { margin-top: 3px; }
.prompt-tab-actions { margin-bottom: 14px; }
.prompt-draft-flag { background: var(--ok-soft); border-color: color-mix(in oklch, var(--good) 30%, transparent); }

/* ═══ PROMPTY — Knihovna (plná znění + inline edit). MOBILE-FIRST. ═══════════
   Poučení z 1. pokusu: žádný auto-fit grid, karty vždy plná šířka pod sebou,
   pole pod sebe na mobilu (vedle až na desktopu), box-sizing border-box na
   textarea, ať width:100% + padding nepřeteče kartu (to dělalo „rozjetý" vzhled). */
.prompt-view-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--rule); }
.prompt-view-tab { padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.prompt-view-tab:hover { color: var(--accent-ink); }
.prompt-view-tab.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.prompt-seed-form { margin-top: 12px; }
.prompt-lib-headactions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.prompt-lib-hint { margin: 0 0 14px; }
.prompt-lib-group { margin-bottom: 8px; }

.prompt-lib-card {
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-md);
    padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow-sm); box-sizing: border-box;
}
.prompt-lib-head { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.prompt-lib-title {
    flex: 1 1 100%; min-width: 0; box-sizing: border-box;
    font-size: 15px; font-weight: 600; padding: 8px 10px;
    border: 1px solid var(--rule); border-radius: var(--radius-md);
}

/* Pole typ/kategorie/nástroj — MOBILE-FIRST: pod sebou (plná šířka). */
.prompt-lib-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.prompt-lib-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3); }
.prompt-lib-field select, .prompt-lib-field input {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--rule); border-radius: var(--radius-md); font-size: 13px;
}
.prompt-lib-body {
    width: 100%; box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.55; padding: 10px;
    border: 1px solid var(--rule); border-radius: var(--radius-md); resize: vertical;
}
.prompt-lib-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* Desktop (≥640px): nadpis vedle badge, pole do řádku. */
@media screen and (min-width: 640px) {
    .prompt-lib-title { flex: 1 1 auto; }
    .prompt-lib-row { flex-direction: row; }
    .prompt-lib-field { flex: 1; }
}

/* ═══ PROMPTY — Zdrojové (meta) prompty generátoru ═══════════════════════════ */
.prompt-source-intro { font-size: 14px; }
.prompt-source-intro p { margin: 0 0 8px; }
.prompt-source-intro p:last-child { margin-bottom: 0; }
.prompt-source-card {
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-md);
    padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); box-sizing: border-box;
}
.prompt-source-head { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.prompt-source-title { margin: 0; font-size: 16px; }
.prompt-source-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.prompt-source-badge--custom { background: var(--warning-soft); color: var(--warning-ink); }
.prompt-source-badge--factory { background: var(--paper-2); color: var(--ink-3); }
.prompt-source-desc { margin: 0 0 10px; font-size: 13px; }
.prompt-source-body {
    width: 100%; box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.55; padding: 10px;
    border: 1px solid var(--rule); border-radius: var(--radius-md); resize: vertical;
}
.prompt-source-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.prompt-source-footactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.prompt-source-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.prompt-source-add input[type="text"] {
    flex: 1 1 220px; min-width: 0; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--rule); border-radius: var(--radius-md); font-size: 13px;
}
.prompt-source-card--custom { border-left: 3px solid var(--accent); }
.prompt-source-badge--cat { background: var(--accent-soft); color: var(--accent-ink); }
.prompt-source-seed { margin-top: 8px; }
.prompt-ai-suggest-hint { background: var(--ok-soft); color: var(--ink); padding: 8px 12px; border-radius: var(--radius-md); margin: 0 0 6px; font-size: 13px; }

/* Zdrojové prompty — stromový přehled kategorií (přebírá styl znalostní báze .wiki-side-*) */
.prompt-tree-cols { display: flex; gap: 40px; flex-wrap: wrap; }
.prompt-tree-col { flex: 0 1 auto; min-width: 200px; max-width: 380px; }
.prompt-tree-heading { font-size: 11px; font-weight: 700; color: var(--ink-3); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.prompt-tree-grouplabel { cursor: default; font-weight: 600; }
.prompt-tree-grouplabel:hover { background: transparent; color: var(--ink); }
.prompt-source-card { scroll-margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
   Fakturační pracovní plocha 2026-08 — moje faktury a Google doklady zvlášť
   ═══════════════════════════════════════════════════════════════════════ */
.invoicing-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
    padding: 4px;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    border-radius: var(--radius-lg);
}

.invoicing-tab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 11px 14px;
    color: var(--ink-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.invoicing-tab span { font-weight: 700; color: var(--ink-2); }
.invoicing-tab small { white-space: nowrap; font-variant-numeric: tabular-nums; }
.invoicing-tab.is-active {
    background: var(--card);
    border-color: var(--rule);
    box-shadow: var(--shadow-sm);
}
.invoicing-tab.is-active span { color: var(--accent-ink); }

/* Google sloupec už není součástí mojí fakturace; má samostatný tab. */
.invoicing-panel .invoicing-section-bar,
.invoicing-panel .invoicing-row > .invoicing-row-ginvoice,
.invoicing-panel .invoicing-table-head > .col-g {
    display: none !important;
}

.invoicing-panel .invoicing-table-head,
.invoicing-panel .invoicing-row {
    grid-template-columns:
        32px
        minmax(180px, 1.5fr)
        88px
        118px
        118px
        180px
        minmax(130px, 1.2fr)
        88px
        22px !important;
}

.invoicing-result-extra {
    display: block;
    margin-top: 3px;
    color: var(--accent-ink);
    font-size: 10.5px;
    font-weight: 650;
}

.fk-reconcile {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.fk-reconcile-ok { color: var(--ok-ink); background: var(--ok-soft); }
.fk-reconcile-diff { color: var(--danger-ink); background: var(--danger-soft); }

.invoice-extra-editor {
    margin: -2px 12px 10px 48px;
    border: 1px dashed var(--rule);
    border-top: 0;
    background: color-mix(in oklch, var(--paper-2) 42%, var(--card));
}
.invoice-extra-editor > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 11px;
    cursor: pointer;
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 650;
    list-style: none;
}
.invoice-extra-editor > summary::-webkit-details-marker { display: none; }
.invoice-extra-editor-body { padding: 0 11px 11px; }
.invoice-extra-list { list-style: none; margin: 0 0 9px; padding: 0; border-top: 1px solid var(--rule-soft); }
.invoice-extra-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 28px;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-soft);
}
.invoice-extra-list li > span:first-child { min-width: 0; }
.invoice-extra-list strong { display: block; overflow-wrap: anywhere; }
.invoice-extra-list small { display: block; color: var(--ink-3); }
.invoice-extra-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice-extra-delete {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-4);
    font-size: 20px;
    cursor: pointer;
}
.invoice-extra-delete:hover { color: var(--danger); }
.invoice-extra-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(130px, 180px) auto;
    gap: 8px;
    align-items: end;
}
.invoice-extra-form label { display: grid; gap: 4px; font-size: 10px; color: var(--ink-3); }
.invoice-extra-form select,
.invoice-extra-form input { width: 100%; min-width: 0; }
.invoice-extra-form label:has(select) { grid-column: 1 / -1; max-width: 320px; }

.google-invoice-workspace { padding: 0; overflow: hidden; }
.google-invoice-workspace > .section-head { padding: 20px 22px 16px; margin: 0; border-bottom: 1px solid var(--rule); }
.google-invoice-list { display: grid; }
.google-invoice-card {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(360px, 1.5fr) auto;
    gap: 18px;
    align-items: center;
    padding: 15px 22px;
    border-bottom: 1px solid var(--rule-soft);
    border-left: 4px solid var(--warn);
}
.google-invoice-card:last-child { border-bottom: 0; }
.google-invoice-card.is-sent { border-left-color: var(--good); background: var(--ok-soft); }
.google-invoice-card.is-skipped { border-left-color: var(--ink-4); opacity: .72; }
.google-invoice-card-title { display: block; font-weight: 750; font-size: 15px; color: var(--ink); }
.google-invoice-card-project { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.google-invoice-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; color: var(--ink-3); font-size: 11px; }
.google-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.google-account-actions + .google-account-actions { margin-top: 6px; }
.google-account-label { width: 100%; color: var(--ink-3); font-size: 10px; }
.google-action-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
}
.google-action-link:hover { border-color: var(--accent); color: var(--accent-ink); }
.google-action-link.is-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.google-action-link.is-missing { color: var(--danger-ink); border-color: color-mix(in oklch, var(--danger) 35%, var(--rule)); }
.google-invoice-card-actions { display: grid; gap: 7px; justify-items: end; }
.google-invoice-card-actions .invoicing-row-ginvoice { flex-wrap: nowrap; }
.google-invoice-card-actions .invoicing-send-ginvoice { margin: 0; }

.ads-links-cell a.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Explicitní zavření draweru; na desktopu není potřeba. */
.mobile-nav-close { display: none; }

@media (max-width: 1024px) {
    body {
        padding-top: calc(56px + max(0px, env(safe-area-inset-top, 0px)));
    }
    body.is-mobile-nav-open { overflow: hidden; }
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 250;
        height: calc(56px + max(0px, env(safe-area-inset-top, 0px)));
        padding: max(10px, env(safe-area-inset-top, 10px)) 14px 10px;
        background: var(--ink);
        color: var(--paper);
        box-shadow: var(--shadow-md);
    }
    .mobile-nav-toggle {
        min-height: 40px !important;
        min-width: 44px;
        padding: 6px 10px !important;
        color: inherit !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 22px !important;
    }
    .mobile-topbar-brand {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        color: inherit;
        font-size: 15px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-topbar-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 7px;
        border: 0;
        border-radius: var(--radius-pill);
        background: var(--danger);
        color: #fff;
        font-size: 12px;
        font-weight: 750;
        line-height: 1;
        cursor: pointer;
    }
    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 270;
        opacity: 0;
        pointer-events: none;
        background: rgba(23, 25, 28, .52);
        transition: opacity .18s ease;
    }
    body.is-mobile-nav-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }
    .app-shell { display: block !important; }
    .sidebar {
        display: flex !important;
        position: fixed !important;
        inset: 0 auto 0 0;
        z-index: 300;
        width: min(88vw, 360px) !important;
        height: 100dvh !important;
        padding: 14px 0 !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(-102%);
        transition: transform .2s ease;
        background: var(--paper-2);
        box-shadow: var(--shadow-xl);
    }
    body.is-mobile-nav-open .sidebar { transform: translateX(0); }
    .mobile-nav-close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 8px;
        right: 9px;
        z-index: 2;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid var(--rule);
        border-radius: var(--radius-md);
        background: var(--card);
        color: var(--ink);
        font-size: 26px;
        cursor: pointer;
    }
    .sidebar .brand { padding: 4px 58px 14px 16px !important; }
    .sidebar .nav {
        display: flex !important;
        flex-direction: column !important;
        grid-auto-flow: initial !important;
        margin: 0 !important;
        padding: 0 8px !important;
        gap: 2px !important;
    }
    .sidebar .nav-link { justify-content: flex-start !important; padding: 10px 12px !important; }
    .sidebar-bottom { margin-top: auto; padding: 12px 8px !important; }
    .workspace { width: 100%; min-width: 0; }
    .timer-bar { top: 56px !important; }

    .google-invoice-card { grid-template-columns: minmax(180px, .8fr) minmax(320px, 1.2fr); }
    .google-invoice-card-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
}

@media (max-width: 720px) {
    .workspace--invoicing {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow-x: hidden !important;
    }
    .workspace--invoicing > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
    .workspace--invoicing .page-head { align-items: stretch; }
    .workspace--invoicing .page-head-actions { align-items: stretch !important; width: 100%; }
    .workspace--invoicing .page-head-actions > div { width: 100%; }
    .workspace--invoicing .page-head-actions > div .button,
    .workspace--invoicing .page-head-actions > div button {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }
    .invoicing-month-nav { display: grid; grid-template-columns: 1fr 1fr; }
    .invoicing-month-nav .button { justify-content: center; min-width: 0; padding-inline: 8px; }
    .invoicing-tabs { grid-template-columns: 1fr; }
    .invoicing-tab { padding: 10px 12px; }

    .workspace--invoicing .metric-strip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow: visible !important;
    }
    .workspace--invoicing .metric-strip > div { min-width: 0 !important; }

    .invoicing-panel { padding: 10px !important; overflow: visible !important; }
    .invoicing-panel .invoicing-table-head { display: none !important; }
    .invoicing-panel .invoicing-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 11px 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px 48px 14px 14px !important;
        overflow: visible !important;
    }
    .invoicing-panel .invoicing-row > * { min-width: 0 !important; max-width: 100% !important; }
    .invoicing-panel .invoicing-row > .invoicing-row-name {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        order: initial !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-check { position: absolute !important; top: 14px !important; right: 13px !important; }
    .invoicing-panel .invoicing-row > .invoicing-row-fix,
    .invoicing-panel .invoicing-row > .invoicing-row-result,
    .invoicing-panel .invoicing-row > .invoicing-row-date,
    .invoicing-panel .invoicing-row > .invoicing-row-days,
    .invoicing-panel .invoicing-row > .invoicing-row-leads {
        display: block !important;
        grid-column: auto !important;
        grid-row: auto !important;
        order: initial !important;
        width: 100% !important;
        text-align: left !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-fix::before { content: 'Sazba'; }
    .invoicing-panel .invoicing-row > .invoicing-row-date::before { content: attr(data-mobile-label); }
    .invoicing-panel .invoicing-row > .invoicing-row-days::before { content: 'Odpracováno'; }
    .invoicing-panel .invoicing-row > .invoicing-row-result::before { content: 'Celkem'; }
    .invoicing-panel .invoicing-row > .invoicing-row-leads::before { content: 'Leady'; }
    .invoicing-panel .invoicing-row > .invoicing-row-fix::before,
    .invoicing-panel .invoicing-row > .invoicing-row-date::before,
    .invoicing-panel .invoicing-row > .invoicing-row-days::before,
    .invoicing-panel .invoicing-row > .invoicing-row-result::before,
    .invoicing-panel .invoicing-row > .invoicing-row-leads::before {
        display: block !important;
        margin: 0 0 4px;
        color: var(--ink-3);
        font-size: 10px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
    }
    .invoicing-panel .invoicing-row input[type='date'],
    .invoicing-panel .invoicing-row input[type='text'],
    .invoicing-panel .invoicing-row input[type='number'] {
        width: 100% !important;
        min-height: 44px;
        padding: 8px !important;
        font-size: 14px !important;
    }
    .invoicing-row-manual-hours { width: 100%; }
    .invoicing-row-manual-hours-hint { display: block; margin-top: 3px; }
    .invoicing-panel .invoicing-row > .invoicing-row-saved { position: absolute; right: 8px; bottom: 5px; }

    .invoice-extra-editor { margin: -3px 0 10px; }
    .invoice-extra-form { grid-template-columns: 1fr; }
    .invoice-extra-form label:has(select) { grid-column: auto; max-width: none; }
    .invoice-extra-form .button { width: 100%; min-height: 44px; }
    .invoice-extra-list li { grid-template-columns: minmax(0, 1fr) auto 28px; }

    .google-invoice-workspace > .section-head { padding: 16px 14px; }
    .google-invoice-card { grid-template-columns: 1fr; gap: 13px; padding: 15px 14px; }
    .google-invoice-card-actions { grid-column: auto; display: grid; justify-items: stretch; }
    .google-invoice-card-actions .invoicing-row-ginvoice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
    .google-invoice-card-actions .invoice-status-btn { min-width: 0; min-height: 44px; padding: 5px; }
    .google-invoice-card-actions .invoicing-send-ginvoice { width: 100%; justify-content: center; min-height: 44px; }
    .google-account-actions { display: grid; grid-template-columns: 1fr; }
    .google-action-link { justify-content: center; min-height: 44px; }
}

/* Notebooky a tablety: kartový řádek zachovává stejné údaje jako desktop. */
@media (min-width: 721px) and (max-width: 1379px) {
    .invoicing-panel .invoicing-row {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding: 14px 50px 14px 14px !important;
        overflow: visible !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-name {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        overflow: visible !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-check {
        position: absolute !important;
        top: 14px !important;
        right: 13px !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-fix,
    .invoicing-panel .invoicing-row > .invoicing-row-date,
    .invoicing-panel .invoicing-row > .invoicing-row-days,
    .invoicing-panel .invoicing-row > .invoicing-row-result,
    .invoicing-panel .invoicing-row > .invoicing-row-leads {
        display: block !important;
        grid-row: auto !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-fix { grid-column: 1 !important; }
    .invoicing-panel .invoicing-row > .invoicing-row-date[data-mobile-label='Od'] { grid-column: 2 !important; }
    .invoicing-panel .invoicing-row > .invoicing-row-date[data-mobile-label='Do'] { grid-column: 3 !important; }
    .invoicing-panel .invoicing-row > .invoicing-row-days { grid-column: 4 !important; }
    .invoicing-panel .invoicing-row > .invoicing-row-result { grid-column: 1 / 3 !important; }
    .invoicing-panel .invoicing-row > .invoicing-row-leads {
        display: flex !important;
        grid-column: 3 / 5 !important;
        align-items: center !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-fix::before { content: 'Sazba'; }
    .invoicing-panel .invoicing-row > .invoicing-row-date::before { content: attr(data-mobile-label); }
    .invoicing-panel .invoicing-row > .invoicing-row-days::before { content: 'Odpracováno'; }
    .invoicing-panel .invoicing-row > .invoicing-row-result::before { content: 'Celkem'; }
    .invoicing-panel .invoicing-row > .invoicing-row-leads::before { content: 'Leady'; }
    .invoicing-panel .invoicing-row > .invoicing-row-fix::before,
    .invoicing-panel .invoicing-row > .invoicing-row-date::before,
    .invoicing-panel .invoicing-row > .invoicing-row-days::before,
    .invoicing-panel .invoicing-row > .invoicing-row-result::before,
    .invoicing-panel .invoicing-row > .invoicing-row-leads::before {
        display: block !important;
        margin: 0 0 4px;
        color: var(--ink-3);
        font-size: 10px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-saved {
        position: absolute;
        right: 8px;
        bottom: 5px;
    }
    .invoice-extra-editor { margin: -3px 0 10px; }
}

/* Od běžného desktopu se fakturace zobrazuje jako plná tabulka. */
@media (min-width: 1380px) {
    .invoicing-panel .invoicing-table-head { display: grid !important; }
    .invoicing-panel .invoicing-row {
        display: grid !important;
        grid-template-columns:
            32px
            minmax(180px, 1.5fr)
            88px
            118px
            118px
            180px
            minmax(130px, 1.2fr)
            88px
            22px !important;
        overflow: visible !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-check,
    .invoicing-panel .invoicing-row > .invoicing-row-name,
    .invoicing-panel .invoicing-row > .invoicing-row-fix,
    .invoicing-panel .invoicing-row > .invoicing-row-date,
    .invoicing-panel .invoicing-row > .invoicing-row-days,
    .invoicing-panel .invoicing-row > .invoicing-row-result,
    .invoicing-panel .invoicing-row > .invoicing-row-leads,
    .invoicing-panel .invoicing-row > .invoicing-row-saved {
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: center !important;
        justify-self: stretch !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-check {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 28px !important;
        height: 28px !important;
        justify-self: start !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-name { overflow: hidden !important; }
    .invoicing-panel .invoicing-row-link {
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-fix,
    .invoicing-panel .invoicing-row > .invoicing-row-date,
    .invoicing-panel .invoicing-row > .invoicing-row-days,
    .invoicing-panel .invoicing-row > .invoicing-row-result,
    .invoicing-panel .invoicing-row > .invoicing-row-leads {
        display: block !important;
        width: auto !important;
        max-width: none !important;
    }
    .invoicing-panel .invoicing-row > .invoicing-row-leads { display: flex !important; }
    .invoicing-panel .invoicing-row > .invoicing-row-result {
        align-items: end !important;
        padding: 0 !important;
        text-align: right !important;
    }
    .invoicing-panel .invoicing-row-result strong { font-size: 14px !important; }
    .invoicing-panel .invoicing-row > .invoicing-row-saved { display: inline-grid !important; }
}