/* ==========================================================================
   BTX Deck – Design System
   Light (default) + Dark theme via CSS custom properties
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
    /* Light theme (default) */
    --bg-primary: #f1f5f9;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-input: #f8fafc;
    --bg-hover: #f1f5f9;
    --bg-nav-active: #eef2ff;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    --border-color: #e2e8f0;
    --border-light: #f1f5f9;

    --accent-primary: #4f46e5;
    --accent-primary-hover: #4338ca;
    --accent-gradient: linear-gradient(135deg, #4f46e5, #6366f1);
    --accent-light: #eef2ff;
    --accent-text: #4f46e5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

    --status-planned: #3b82f6;
    --status-planned-bg: #eff6ff;
    --status-progress: #f59e0b;
    --status-progress-bg: #fffbeb;
    --status-invoice: #10b981;
    --status-invoice-bg: #ecfdf5;
    --status-invoiced: #6b7280;
    --status-invoiced-bg: #f3f4f6;
    --status-error: #dc2626;
    --status-error-bg: #fee2e2;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --transition: 0.2s ease;
    --transition-theme: 0.3s ease;

    --sidebar-width: 260px;
    --bottom-nav-height: 56px;
}

/* ---------- Dark Theme ---------- */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: rgba(30, 41, 59, 0.8);
    --bg-sidebar: rgba(15, 23, 42, 0.95);
    --bg-input: #1e293b;
    --bg-hover: #334155;
    --bg-nav-active: rgba(99, 102, 241, 0.15);

    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0f172a;

    --border-color: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.04);

    --accent-primary: #818cf8;
    --accent-primary-hover: #a78bfa;
    --accent-gradient: linear-gradient(135deg, #818cf8, #a78bfa);
    --accent-light: rgba(99, 102, 241, 0.15);
    --accent-text: #a5b4fc;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);

    --status-planned-bg: rgba(59, 130, 246, 0.15);
    --status-progress-bg: rgba(245, 158, 11, 0.15);
    --status-invoice-bg: rgba(16, 185, 129, 0.15);
    --status-invoiced-bg: rgba(107, 114, 128, 0.15);
    --status-error: #f87171;
    --status-error-bg: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .card,
[data-theme="dark"] .sidebar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background var(--transition-theme), color var(--transition-theme);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--accent-primary-hover);
}

/* ---------- Layout ---------- */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.main-content {
    margin-left: var(--sidebar-width);
    padding: 32px;
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    box-sizing: border-box;
}

/* ---------- Sidebar (Desktop) ---------- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: background var(--transition-theme), border-color var(--transition-theme);
    overflow-y: auto;
}

.sidebar-logo {
    padding: 24px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-logo .logo-icon {
    width: 40px;
    height: 40px;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.5px;
}

.sidebar-logo h1 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.sidebar-logo span {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition);
}

.sidebar-nav a:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-nav a.active {
    background: var(--bg-nav-active);
    color: var(--accent-primary);
    font-weight: 600;
}

.sidebar-nav a svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 16px 12px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-footer a,
.sidebar-footer button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
}

.sidebar-footer a:hover,
.sidebar-footer button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ---------- Bottom Nav (Mobile) ---------- */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    z-index: 100;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 8px 0 0;
    transition: background var(--transition-theme), border-color var(--transition-theme);
}

.bottom-nav-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: var(--bottom-nav-height);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0 8px 0 4px;
    gap: 0;
}
.bottom-nav-inner::-webkit-scrollbar {
    display: none;
}
.bottom-nav-inner::after {
    content: '';
    display: block;
    min-width: 16px;
    flex-shrink: 0;
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    transition: all var(--transition);
    min-width: 64px;
}

.bottom-nav a svg {
    width: 22px;
    height: 22px;
}

.bottom-nav a.active {
    color: var(--accent-primary);
}

.bottom-nav a.nav-add-hidden {
    display: none;
}

.bottom-nav a.nav-add .nav-add-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

/* ---------- FAB (Mobile) ---------- */
.mobile-fab {
    display: none;
}
@media (max-width: 768px) {
    .mobile-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
        right: 20px;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--accent-gradient);
        color: #fff;
        box-shadow: 0 4px 16px rgba(79,70,229,.45);
        z-index: 110;
        text-decoration: none;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transition: box-shadow .2s, transform .2s;
    }
    .mobile-fab:hover, .mobile-fab:active {
        box-shadow: 0 6px 20px rgba(79,70,229,.6);
        transform: scale(1.08) translateZ(0);
        color: #fff;
    }
}

/* ---------- Page Header ---------- */
.page-header {
    margin-bottom: 28px;
}

.page-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.page-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

.page-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Cards ---------- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-theme);
    overflow: hidden;
}

.card-body {
    padding: 20px;
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-hover);
}

/* ---------- Stat Cards (Dashboard) ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-card .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.stat-card .stat-icon.blue { background: #eff6ff; color: #3b82f6; }
.stat-card .stat-icon.green { background: #ecfdf5; color: #10b981; }
.stat-card .stat-icon.orange { background: #fffbeb; color: #f59e0b; }
.stat-card .stat-icon.purple { background: #f5f3ff; color: #8b5cf6; }

[data-theme="dark"] .stat-card .stat-icon.blue { background: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .stat-card .stat-icon.green { background: rgba(16, 185, 129, 0.15); }
[data-theme="dark"] .stat-card .stat-icon.orange { background: rgba(245, 158, 11, 0.15); }
[data-theme="dark"] .stat-card .stat-icon.purple { background: rgba(139, 92, 246, 0.15); }

.stat-card .stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
}

.stat-card .stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Colored left-border accent variants */
.stat-card--blue   { border-left: 3px solid #3b82f6; }
.stat-card--green  { border-left: 3px solid #10b981; }
.stat-card--orange { border-left: 3px solid #f59e0b; }
.stat-card--purple { border-left: 3px solid #8b5cf6; }
.stat-card--red    { border-left: 3px solid #ef4444; }
[data-theme="dark"] .stat-card--blue   { border-left-color: #60a5fa; }
[data-theme="dark"] .stat-card--green  { border-left-color: #34d399; }
[data-theme="dark"] .stat-card--orange { border-left-color: #fbbf24; }
[data-theme="dark"] .stat-card--purple { border-left-color: #a78bfa; }
[data-theme="dark"] .stat-card--red    { border-left-color: #f87171; }

/* ---------- Status Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-planned {
    background: var(--status-planned-bg);
    color: var(--status-planned);
}

.badge-in_progress {
    background: var(--status-progress-bg);
    color: var(--status-progress);
}

.badge-to_invoice {
    background: var(--status-invoice-bg);
    color: var(--status-invoice);
}

.badge-invoiced {
    background: var(--status-invoiced-bg);
    color: var(--status-invoiced);
}

.badge-pausal {
    background: #f5f3ff;
    color: #7c3aed;
}

.badge-extra {
    background: #fff7ed;
    color: #ea580c;
}

.badge-deferred {
    background: var(--bg-hover);
    color: var(--text-muted);
}

.badge-billsep {
    background: #eef2ff;
    color: var(--accent-primary);
}

[data-theme="dark"] .badge-pausal { background: rgba(124, 58, 237, 0.15); }
[data-theme="dark"] .badge-extra { background: rgba(234, 88, 12, 0.15); }
[data-theme="dark"] .badge-billsep { background: rgba(79, 70, 229, 0.18); }

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    line-height: 1.4;
    white-space: nowrap;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn-primary {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.btn-danger {
    background: #fee2e2;
    color: #dc2626;
}

.btn-danger:hover {
    background: #fecaca;
}

[data-theme="dark"] .btn-danger {
    background: rgba(220, 38, 38, 0.15);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: 8px 12px;
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-sm svg {
    width: 16px;
    height: 16px;
}

.btn-icon {
    padding: 8px;
    border-radius: var(--radius-sm);
}

.btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Forms ---------- */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transition: all var(--transition);
    outline: none;
}

.form-control:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

[data-theme="dark"] .form-control:focus {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.form-control::placeholder {
    color: var(--text-muted);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

/* Thin horizontal separator used inside long forms to delimit sections
   (např. mezi hlavními poli výkazu a sekcí "Položky"). */
.form-section-divider {
    height: 1px;
    background: var(--border-color);
    margin: 18px 0 14px;
}

/* Entry sub-items (licence / HW): row = popis + cena + remove button.
   Sloupec popis se roztahuje, cena má pevnou šířku. */
.entry-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.entry-item-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.entry-item-desc { flex: 1; }
.entry-item-price { width: 130px; flex: 0 0 130px; }
.entry-item-purchase {
    width: 130px;
    flex: 0 0 130px;
    /* Vizuálně odlišit "interní" pole tlumeným pozadím — uživatel vidí, že
       to není fakturovaná hodnota a do PDF se nedostane. */
    background: var(--bg-hover);
}
.entry-item-remove { flex: 0 0 auto; color: var(--text-muted); }
.entry-item-remove:hover { color: var(--status-invoice); }
.entry-items-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}
@media (max-width: 640px) {
    .entry-item-row { flex-wrap: wrap; }
    .entry-item-desc { flex: 1 1 100%; }
    .entry-item-price,
    .entry-item-purchase { flex: 1 1 calc(50% - 28px); width: auto; }
}

/* Two-line check row (entry form's "bill separately" toggle): title above,
   muted hint below. Aligns the checkbox with the title, not the hint. */
.entry-billsep-row {
    align-items: flex-start;
    gap: 10px;
}
.entry-billsep-title {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.entry-billsep-hint {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ---------- Tables ---------- */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    vertical-align: middle;
}

/* Top-aligned variant — used in report + entries lists where the description
   cell can wrap onto several lines and middle-alignment shoves short cells
   (date, hours, money) into the middle of a tall row. */
.table-top td,
.table-top th {
    vertical-align: top;
}

.table tr:last-child td {
    border-bottom: none;
}

.table tr:hover td {
    background: var(--bg-hover);
}

/* Sticky first column — opt-in for wide tables that scroll horizontally
   (e.g. Fakturace „Rozklad po klientech"). The first cell of every row stays
   pinned while the rest scrolls under it. Background must be opaque to cover
   the scrolling cells; the hover rule above has higher specificity, so the
   pinned cell still tracks the row's hover background. */
.table-sticky-first th:first-child,
.table-sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--sticky-bg, var(--bg-card));
    border-right: 1px solid var(--border-color);
    white-space: nowrap;
}
.table-sticky-first thead th:first-child {
    z-index: 3; /* roh nad sticky řádkem (thead) i sticky sloupcem */
}

/* Fakturace — seskupení „Rozkladu po klientech" podle konsorcia. Jemná
   hlavička skupiny + mezisoučet + levý accent proužek u členů. --sticky-bg
   drží pinned první sloupec v barvě skupiny (jinak by ho přebilo bg-card). */
.stats-group-head { --sticky-bg: var(--accent-light); }
.stats-group-head td {
    background: var(--accent-light);
    border-top: 2px solid var(--accent-primary);
    font-weight: 600;
}
.stats-group-row td:first-child {
    border-left: 3px solid var(--accent-primary);
}
.stats-group-subtotal { --sticky-bg: var(--accent-light); }
.stats-group-subtotal td {
    background: var(--accent-light);
    font-weight: 600;
}
/* Vnořený podsoučet uvnitř konsorcia (jen za podmnožinu členů) — jemnější
   a odsazený, ať je jasně podřízený celkovému součtu konsorcia. */
.stats-subtotal-row { --sticky-bg: var(--bg-hover); }
.stats-subtotal-row td {
    background: var(--bg-hover);
    font-style: italic;
    color: var(--text-secondary);
}
.stats-subtotal-row td:first-child { padding-left: 28px; }

/* Scrollovací box pro tabulku — omezí výšku a scrolluje uvnitř, aby sticky
   hlavička (top:0) i sticky první sloupec (left:0) měly o co se opřít.
   (Wrapper s overflow-x je sám scroll-container, takže page-scroll sticky
   thead jinak nefunguje.) Opt-in: .table-scrollbox na wrapperu +
   .table-sticky-head na <table>. */
.table-scrollbox {
    max-height: 75vh;
    overflow: auto;
}
.table-sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card);
}

tr[data-href], [data-href].entry-card, div[data-href] {
    cursor: pointer;
}
div[data-href]:hover {
    border-color: var(--accent-primary) !important;
}

.table .text-right {
    text-align: right;
}

.table .text-center {
    text-align: center;
}

.table .cell-actions {
    white-space: nowrap;
    text-align: right;
}

.table td.col-description {
    max-width: 280px;
    word-break: break-word;
    white-space: normal;
}

.table td.cell-price {
    white-space: nowrap;
}

.table .cell-actions .btn-group {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* Mobile cards alternative for tables */
.entry-cards {
    display: none;
}

.entry-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.entry-card:active {
    transform: scale(0.99);
}

.entry-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 8px;
}

.entry-card-client {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.entry-card-date {
    font-size: 12px;
    color: var(--text-muted);
}

.entry-card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
}

.entry-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

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

.entry-card-price {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}

/* ---------- Filter Bar ---------- */
.filter-bar {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.filter-bar .form-group {
    margin-bottom: 0;
    min-width: 140px;
}

/* Výkazy: 5 filter controls + status chips share one row — drop the shared
   140px floor so the short selects (Měsíc/Rok/Typ) size to content and the
   chips stay on the same line instead of wrapping to a 2nd row. */
.filter-bar--tight .form-group { min-width: 0; }

.filter-bar .form-control {
    padding: 8px 12px;
    font-size: 13px;
}

/* Shared filter chips (promoted from .task-filter-btn / .task-when-chip so the
   same pattern can be reused across Entries, Services, Tasks, Monitoring). */
.filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
/* Push chips to the right edge of a filter row. align-self:end keeps the
   chip baseline level with inputs when the parent uses align-items:end
   (Entries case with labeled inputs); in chip-only filter bars (Tasks,
   Services) it just no-ops. */
.filter-bar .filter-chips-end {
    margin-left: auto;
    align-self: end;
}
.filter-bar .form-group + .filter-chips-end {
    padding-bottom: 4px; /* nudge down to input baseline when labels present */
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    line-height: 1.2;
}
.filter-chip:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.filter-chip.is-active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.filter-chip-count {
    background: rgba(0,0,0,.1);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}
.filter-chip.is-active .filter-chip-count {
    background: rgba(255,255,255,.25);
}
/* Overdue variant — used by Tasks "Prošlé" chip. Keeps the same shape as a
   regular chip but hints danger via red border + text until activated. */
.filter-chip.filter-chip--overdue {
    color: #b91c1c;
    border-color: rgba(239,68,68,.35);
    background: rgba(239,68,68,.06);
}
.filter-chip.filter-chip--overdue:hover {
    background: rgba(239,68,68,.12);
    color: #991b1b;
}
.filter-chip.filter-chip--overdue.is-active {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}
/* Compact search input with left icon, used in filter bars */
.filter-search {
    position: relative;
    min-width: 160px;
    flex: 0 1 220px;
}
.filter-search input {
    padding: 8px 12px 8px 34px !important;
    font-size: 13px;
}
.filter-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* ---------- Alert / Flash Messages ---------- */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success {
    background: var(--status-invoice-bg);
    color: var(--status-invoice);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-error {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

[data-theme="dark"] .alert-error {
    background: rgba(220, 38, 38, 0.15);
}

.alert-info {
    background: var(--status-planned-bg);
    color: var(--status-planned);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .alert-warning {
    color: #fbbf24;
}

/* ---------- Phase 2 unification ---------- */
.info-box {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.info-box.info-box-indigo {
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.25);
}

.form-section-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.field-hint {
    color: var(--text-muted);
    font-size: 12px;
}

.label-optional {
    color: var(--text-muted);
    font-weight: 400;
}

.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.note-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-subtle, transparent);
}

.note-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.table-row-inactive {
    opacity: 0.5;
}

.empty-row {
    padding: 32px;
    text-align: center;
}

/* ---------- Login Page ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 400px;
}

.login-card .card-body {
    padding: 32px;
}

.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo .logo-icon {
    width: 56px;
    height: 56px;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

.login-logo h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-logo p {
    color: var(--text-secondary);
    font-size: 14px;
}

.login-card .btn-primary {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    margin-top: 8px;
}

/* ---------- Bulk Actions ---------- */
.bulk-actions {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--accent-light);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-text);
}

.bulk-actions.visible {
    display: flex;
}

/* ---------- Empty State ---------- */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.empty-state p {
    font-size: 14px;
}

/* ---------- Report ---------- */
.report-section {
    margin-bottom: 32px;
}

.report-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}

.report-summary {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.report-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.report-summary-card .value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.report-summary-card .report-summary-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--accent-primary);
    font-weight: 600;
}

/* Zvýrazněné dlaždice na konci řady (Paušál + mimo paušál, Celkem k
   fakturaci) — accent pozadí a okraj, aby vizuálně oddělily „součtové"
   buňky od jednotlivých složek. */
.report-summary-card.is-accent {
    background: var(--accent-light);
    border-color: var(--accent-primary);
}
.report-summary-card.is-accent .label {
    color: var(--accent-primary);
    font-weight: 600;
}

/* /fakturace — současný měsíc na řádku se zvýrazněním (accent-light bg). */
.stats-row-current td {
    background: var(--accent-light);
}

.report-summary-card .label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.report-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--accent-light);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
}

.report-total .total-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-primary);
}

/* ---------- Theme Toggle ---------- */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.theme-toggle-track {
    width: 44px;
    height: 24px;
    background: var(--border-color);
    border-radius: 12px;
    position: relative;
    transition: background var(--transition);
}

.theme-toggle-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform var(--transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .theme-toggle-track {
    background: var(--accent-primary);
}

[data-theme="dark"] .theme-toggle-thumb {
    transform: translateX(20px);
}

.theme-toggle-label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ---------- Utility ---------- */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-bold { font-weight: 600; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--bg-hover);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ---------- Tag Picker (form) ---------- */
.tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tag-pick-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--tc-border, var(--border-color));
    background: var(--tc-bg, var(--bg-hover));
    color: var(--tc-text, var(--text-secondary));
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.4;
}

.tag-pick-btn:hover {
    filter: brightness(0.95);
}

.tag-pick-btn.active {
    background: var(--tc-solid, var(--accent-primary));
    border-color: var(--tc-solid, var(--accent-primary));
    color: #fff;
    filter: none;
}

/* — Color variants (light) — */
/* Samostatné utility třídy: definují jen --tc-* tokeny, konzumuje je
   .tag-pick-btn ve formuláři i .phrase-item-tag v katalogu prací. */
.tag-c-blue    { --tc-bg:#dbeafe; --tc-text:#1d4ed8; --tc-border:#bfdbfe; --tc-solid:#3b82f6; }
.tag-c-indigo  { --tc-bg:#e0e7ff; --tc-text:#4338ca; --tc-border:#c7d2fe; --tc-solid:#4f46e5; }
.tag-c-violet  { --tc-bg:#ede9fe; --tc-text:#6d28d9; --tc-border:#ddd6fe; --tc-solid:#7c3aed; }
.tag-c-cyan    { --tc-bg:#cffafe; --tc-text:#0e7490; --tc-border:#a5f3fc; --tc-solid:#0891b2; }
.tag-c-teal    { --tc-bg:#ccfbf1; --tc-text:#0f766e; --tc-border:#99f6e4; --tc-solid:#0d9488; }
.tag-c-emerald { --tc-bg:#d1fae5; --tc-text:#065f46; --tc-border:#a7f3d0; --tc-solid:#059669; }
.tag-c-amber   { --tc-bg:#fef3c7; --tc-text:#92400e; --tc-border:#fde68a; --tc-solid:#d97706; }
.tag-c-orange  { --tc-bg:#ffedd5; --tc-text:#9a3412; --tc-border:#fed7aa; --tc-solid:#ea580c; }
.tag-c-rose    { --tc-bg:#ffe4e6; --tc-text:#9f1239; --tc-border:#fecdd3; --tc-solid:#e11d48; }
.tag-c-slate   { --tc-bg:#f1f5f9; --tc-text:#334155; --tc-border:#cbd5e1; --tc-solid:#475569; }

/* — Color variants (dark) — */
[data-theme="dark"] .tag-c-blue    { --tc-bg:rgba(59,130,246,.15);  --tc-text:#93c5fd; --tc-border:rgba(59,130,246,.3);  }
[data-theme="dark"] .tag-c-indigo  { --tc-bg:rgba(79,70,229,.15);   --tc-text:#a5b4fc; --tc-border:rgba(79,70,229,.3);   }
[data-theme="dark"] .tag-c-violet  { --tc-bg:rgba(124,58,237,.15);  --tc-text:#c4b5fd; --tc-border:rgba(124,58,237,.3);  }
[data-theme="dark"] .tag-c-cyan    { --tc-bg:rgba(8,145,178,.15);   --tc-text:#67e8f9; --tc-border:rgba(8,145,178,.3);   }
[data-theme="dark"] .tag-c-teal    { --tc-bg:rgba(13,148,136,.15);  --tc-text:#5eead4; --tc-border:rgba(13,148,136,.3);  }
[data-theme="dark"] .tag-c-emerald { --tc-bg:rgba(5,150,105,.15);   --tc-text:#6ee7b7; --tc-border:rgba(5,150,105,.3);   }
[data-theme="dark"] .tag-c-amber   { --tc-bg:rgba(217,119,6,.15);   --tc-text:#fcd34d; --tc-border:rgba(217,119,6,.3);   }
[data-theme="dark"] .tag-c-orange  { --tc-bg:rgba(234,88,12,.15);   --tc-text:#fdba74; --tc-border:rgba(234,88,12,.3);   }
[data-theme="dark"] .tag-c-rose    { --tc-bg:rgba(225,29,72,.15);   --tc-text:#fda4af; --tc-border:rgba(225,29,72,.3);   }
[data-theme="dark"] .tag-c-slate   { --tc-bg:rgba(71,85,105,.2);    --tc-text:#94a3b8; --tc-border:rgba(71,85,105,.35);  }

.truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .report-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .bottom-nav {
        display: block;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 20px 16px;
        padding-bottom: calc(var(--bottom-nav-height) + 20px);
    }

    .page-header h2 {
        font-size: 20px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Compact horizontal layout inside each card */
    .stat-card {
        display: grid;
        grid-template-columns: 38px 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 1px;
        padding: 12px 14px;
        align-items: center;
    }

    .stat-card .stat-icon {
        grid-row: 1 / 3;
        align-self: center;
        width: 38px;
        height: 38px;
        margin-bottom: 0;
    }

    .stat-card .stat-value {
        font-size: 18px;
        margin-bottom: 0;
        line-height: 1.2;
    }

    .stat-card .stat-label {
        font-size: 11px;
        line-height: 1.3;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar .form-group {
        min-width: auto;
    }

    /* Hide table, show cards on mobile */
    .table-desktop {
        display: none;
    }

    .entry-cards {
        display: block;
    }

    .report-summary {
        grid-template-columns: 1fr;
    }

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

    .btn-group {
        justify-content: stretch;
    }

    .btn-group .btn {
        flex: 1;
    }

    .login-card .card-body {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .main-content {
        padding: 16px 12px;
        padding-bottom: calc(var(--bottom-nav-height) + 16px);
    }
}

/* ---------- Print ---------- */
@media print {
    .sidebar, .bottom-nav, .filter-bar, .btn, .bulk-actions,
    .theme-toggle, .page-header-actions .btn {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
        padding: 0;
        max-width: 100%;
    }

    body {
        background: white;
        color: #000;
        font-size: 12px;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .table th, .table td {
        padding: 8px 10px;
    }

    .report-section h3 {
        color: #000;
        border-bottom-color: #000;
    }

    .report-total {
        background: #f5f5f5;
    }

    .badge {
        border: 1px solid currentColor;
    }

    .page-header h2 {
        font-size: 20px;
    }
}

/* ---------- Search Form ---------- */
.search-form .form-control {
    background: var(--bg-hover);
    border: 1px solid transparent;
}

.search-form .form-control:focus {
    background: var(--bg-input);
    border-color: var(--accent-primary);
}

/* ---------- Timer ---------- */
.timer-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-primary);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 8px 12px;
}

/* Desktop header button group */
.dash-header-btns {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Mobile timer FAB (left side) */
.timer-fab {
    display: none;
}
@media (max-width: 768px) {
    .timer-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
        left: 20px;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--accent-gradient);
        color: #fff;
        border: none;
        box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4);
        z-index: 110;
        cursor: pointer;
        font-family: inherit;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transition: box-shadow .2s, transform .2s;
    }
    .timer-fab.active {
        background: #ef4444;
        box-shadow: 0 4px 16px rgba(239, 68, 68, 0.5);
    }
    .timer-fab:hover, .timer-fab:active {
        box-shadow: 0 6px 20px rgba(79, 70, 229, 0.6);
        transform: scale(1.08) translateZ(0);
        color: #fff;
    }
    /* Hide dashboard timer area on mobile – FAB handles it */
    #dashTimerArea {
        display: none;
    }
    /* Hide entire button group in header on mobile – FAB handles it */
    .dash-header-btns {
        display: none;
    }
}

/* ---------- Template Tiles ---------- */
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.tpl-btn {
    width: 100%;
    text-align: left;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
    box-sizing: border-box;
    display: block;
}
.tpl-btn:active, .tpl-btn:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
@media (max-width: 768px) {
    .tpl-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
    .tpl-btn {
        padding: 8px 8px;
    }
    .tpl-btn div {
        font-size: 12px !important;
    }
}

/* ---------- Floating Save Bar (Mobile) ---------- */
.mobile-save-bar {
    display: none;
}
@media (max-width: 768px) {
    .mobile-save-bar {
        display: block;
        position: fixed;
        bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        padding: 10px 16px;
        background: var(--bg-card);
        border-top: 1px solid var(--border-color);
        z-index: 90;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    .mobile-save-bar .btn {
        width: 100%;
        justify-content: center;
    }
    /* hide original save btn row on mobile */
    .form-save-desktop {
        display: none;
    }
    .mobile-save-spacer {
        height: 72px;
    }
}

/* ---------- Custom Date Picker ---------- */
.datepicker-wrap {
    position: relative;
}

.datepicker-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    width: 100%;
    transition: all var(--transition);
    line-height: 1.4;
}

.datepicker-trigger:hover {
    border-color: var(--text-muted);
}

.datepicker-trigger:focus,
.datepicker-trigger.open {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.datepicker-trigger.invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

[data-theme="dark"] .datepicker-trigger:focus,
[data-theme="dark"] .datepicker-trigger.open {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.datepicker-trigger svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.datepicker-display {
    flex: 1;
    color: var(--text-primary);
}

.datepicker-display.placeholder {
    color: var(--text-muted);
}

.datepicker-popup {
    position: fixed;
    z-index: 500;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.04);
    padding: 16px;
    width: 288px;
    user-select: none;
    animation: fadeIn 0.15s ease;
}

.datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 4px;
}

.datepicker-nav {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: all var(--transition);
    padding: 0;
    flex-shrink: 0;
}

.datepicker-nav:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.datepicker-month-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    text-align: center;
}

.datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.datepicker-dow {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.datepicker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-weight: 400;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
    padding: 0;
}

.datepicker-day:hover:not(.empty):not(.selected) {
    background: var(--bg-hover);
}

.datepicker-day.other-month {
    color: var(--text-muted);
    opacity: 0.45;
}

.datepicker-day.other-month:hover {
    opacity: 0.8;
}

.datepicker-day.today:not(.selected) {
    color: var(--accent-primary);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--accent-primary);
}

.datepicker-day.selected {
    background: var(--accent-gradient);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

[data-theme="dark"] .datepicker-day.selected {
    box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4);
}

.datepicker-day.empty {
    cursor: default;
    pointer-events: none;
}

.datepicker-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: center;
}

.datepicker-today-btn {
    background: none;
    border: none;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    color: var(--accent-text);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}

.datepicker-today-btn:hover {
    background: var(--accent-light);
}

/* ---------- Animations ---------- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* Stagger children */
.stagger > * {
    animation: fadeIn 0.3s ease forwards;
    opacity: 0;
}

.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.2s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.3s; }

/* Confirm modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 440px;
    width: 100%;
    padding: 28px;
}

.modal h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.modal p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}
.modal-actions .btn:first-child {
    margin-right: auto;
}

/* ==========================================================================
   Tasks (To-Do)
   ========================================================================== */

/* Filter selects */
.task-quick-select {
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
    min-width: 0;
}

/* Task list */
.task-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.task-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}
.task-item[data-priority="high"]   { border-left-color: #dc2626; }
.task-item[data-priority="medium"] { border-left-color: #d97706; }
.task-item[data-priority="low"]    { border-left-color: #16a34a; }
[data-theme="dark"] .task-item[data-priority="high"]   { border-left-color: #f87171; }
[data-theme="dark"] .task-item[data-priority="medium"] { border-left-color: #fbbf24; }
[data-theme="dark"] .task-item[data-priority="low"]    { border-left-color: #4ade80; }
.task-item:hover {
    border-top-color: var(--accent-primary);
    border-right-color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}
.task-item.task-done {
    opacity: 0.55;
}
.task-item.task-done .task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Checkbox button */
.task-checkbox {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    background: var(--bg-input);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    margin-top: 1px;
    color: transparent;
}
.task-checkbox:hover {
    border-color: var(--accent-primary);
}
.task-checkbox.checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

/* Task body */
.task-body {
    flex: 1;
    min-width: 0;
}
.task-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 5px;
    word-break: break-word;
}
.task-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Client badge */
.task-client-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--accent-light);
    color: var(--accent-text);
    white-space: nowrap;
}

/* Location badge */
.task-location-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--bg-hover);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Due date */
.task-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}
.task-due-today   { color: #d97706; font-weight: 600; }
.task-due-overdue { color: #dc2626; font-weight: 600; }

/* ==========================================================================
   Dashboard customization (widgets, drag & drop, edit mode)
   ========================================================================== */
#dashboardGrid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    align-items: flex-start;
}
.dash-widget {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.dash-widget[data-width="half"] {
    width: calc(50% - 8px);
}
@media (max-width: 900px) {
    .dash-widget[data-width="half"] {
        width: 100%;
    }
}
.dash-widget.widget-hidden {
    display: none;
}
.dash-widget-toolbar {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    gap: 2px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2px;
    box-shadow: var(--shadow-sm);
    z-index: 5;
}
body.dash-editing .dash-widget-toolbar {
    display: inline-flex;
}
body.dash-editing .dash-widget {
    outline: 2px dashed rgba(79, 70, 229, 0.35);
    outline-offset: -2px;
    border-radius: var(--radius-lg);
    transition: outline-color var(--transition);
}
body.dash-editing .dash-widget:hover {
    outline-color: var(--accent-primary);
}
.dash-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: grab;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.dash-drag-handle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.dash-drag-handle:active {
    cursor: grabbing;
}
.dash-widget-width {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.dash-widget-width:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}
.dash-widget-limit {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 22px 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    height: 26px;
    margin: 0 2px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' 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 6px center;
}
.dash-widget-limit:hover {
    border-color: var(--accent-primary);
}
.dash-widget-hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.dash-widget-hide:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.dash-widget-ghost {
    opacity: 0.4;
    background: var(--bg-hover);
}

/* Service "to invoice" indicator */
.row-to-invoice {
    background: rgba(239, 68, 68, 0.05);
    box-shadow: inset 3px 0 0 0 #ef4444;
}
.row-to-invoice:hover {
    background: rgba(239, 68, 68, 0.08);
}
[data-theme="dark"] .row-to-invoice {
    background: rgba(239, 68, 68, 0.1);
}
[data-theme="dark"] .row-to-invoice:hover {
    background: rgba(239, 68, 68, 0.15);
}
.entry-card.row-to-invoice {
    border-left: 3px solid #ef4444;
    box-shadow: none;
}
.invoice-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* Note icon */
.task-has-desc {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
}

/* Recurrence badge */
.task-recurrence-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}
[data-theme="dark"] .task-recurrence-badge {
    background: rgba(167, 139, 250, 0.15);
    color: #c4b5fd;
}

/* Action buttons */
.task-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition);
}
.task-item:hover .task-actions {
    opacity: 1;
}

@media (max-width: 640px) {
    .task-quick-add-row {
        flex-direction: column;
        align-items: stretch;
    }
    .task-quick-select {
        width: 100%;
    }
    .task-filter-bar {
        gap: 6px;
    }
    .task-actions {
        opacity: 1;
    }
}

/* ─────────────────────────────────────────────────────────────
   Navbar reorder (drag & drop in edit mode)
   ───────────────────────────────────────────────────────────── */

/* Edit mode: items become draggable, suppress link navigation */
.sidebar-nav.is-nav-edit > a[data-nav-key],
.bottom-nav-inner.is-nav-edit > a[data-nav-key] {
    cursor: grab;
    outline: 1px dashed var(--border-color);
    outline-offset: -2px;
    border-radius: var(--radius-md);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none; /* let pointermove fire on touch instead of scrolling */
    pointer-events: auto;
}
.sidebar-nav.is-nav-edit > a[data-nav-key] {
    /* keep navigation suppressed by intercepting clicks */
}
.sidebar-nav.is-nav-edit > a[data-nav-key]:active,
.bottom-nav-inner.is-nav-edit > a[data-nav-key]:active {
    cursor: grabbing;
}
/* Block actual navigation while editing */
.sidebar-nav.is-nav-edit > a[data-nav-key],
.bottom-nav-inner.is-nav-edit > a[data-nav-key] {
    pointer-events: auto;
}
.sidebar-nav.is-nav-edit > a[data-nav-key] *,
.bottom-nav-inner.is-nav-edit > a[data-nav-key] * {
    pointer-events: none; /* clicks land on the <a>, our handler eats them */
}

/* Nav items without data-nav-key (currently only "Heslo" in bottom-nav)
   are pinned to the end of the flex flow so they never tie with a
   reordered sibling at the default order:0. Mirrors the inline fallback
   that JS applies via applyOrder(). */
.sidebar-nav > a:not([data-nav-key]),
.bottom-nav-inner > a:not([data-nav-key]) { order: 9999; }

/* Original element is hidden via inline style during drag; the reserved
   flex slot shows up as an outlined empty space so the user sees the
   insertion point as it moves. */
a[data-nav-key].is-dragging {
    outline-style: solid;
    outline-color: var(--accent-primary);
}

/* Floating ghost — clone of the dragged item, positioned over everything,
   follows the cursor. Lives directly under <body>, so it needs its own
   complete look instead of inheriting from the flex container. */
.is-dragging-ghost {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--text-primary);
    background: var(--bg-card);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    opacity: .95;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}
.is-dragging-ghost svg { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   Profile page — "Můj účet"
   Shared primitives so cards, list rows, copy-fields and inline
   forms look identical regardless of which section they live in.
   Replaces ~400 lines of ad-hoc inline styles in profile.php.
   ───────────────────────────────────────────────────────────── */

/* Top user-summary card — avatar + name + status chip */
.profile-user-card {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
}
.profile-user-meta { flex: 1; min-width: 0; }
.profile-user-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    margin: 0 0 2px;
}
.profile-user-sub {
    font-size: 12px;
    color: var(--text-muted);
}

/* Section = named group of cards under a small uppercase heading */
.profile-section { margin-bottom: 32px; }
.profile-section-head { margin-bottom: 14px; }
.profile-section-head h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: 0 0 4px;
}
.profile-section-head p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* Two-col card grid inside a section; collapses to one col on narrow */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .profile-grid { grid-template-columns: 1fr; }
}

/* Unified card-header title: icon + text, 16/600 */
.card-header .card-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* Muted descriptive paragraph inside a card body */
.profile-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 16px;
    line-height: 1.5;
}
.profile-desc:last-child { margin-bottom: 0; }

/* Reusable list rows — trusted devices, API tokens, webhooks */
.profile-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-list:last-child { margin-bottom: 0; }
.profile-list-item {
    padding: 10px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.profile-list-item--stack {
    flex-direction: column;
    align-items: stretch;
}
.profile-list-item-main { min-width: 0; flex: 1; }
.profile-list-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-list-item-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.profile-list-item-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Copy-to-clipboard field: <code> + copy button on one row */
.copy-field {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}
.copy-field code {
    flex: 1;
    font-size: 12px;
    word-break: break-all;
    font-family: ui-monospace, Menlo, monospace;
    color: var(--text-primary);
}
.copy-field .btn {
    flex-shrink: 0;
    padding: 4px 12px;
    font-size: 12px;
}
.copy-field + .copy-field { margin-top: 8px; }

/* Inline form row (label+input + submit button). Wraps on narrow widths */
.inline-form-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.inline-form-row .form-group {
    flex: 1 1 200px;
    margin-bottom: 0;
}
.inline-form-row .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Highlighted info block (e.g. iCal how-to) */
.profile-info {
    padding: 12px 14px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.profile-info-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

/* "Reveal sensitive content" pattern — replaces the ad-hoc <details> */
.reveal-danger {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #ef4444;
    cursor: pointer;
    font-family: inherit;
}
.reveal-danger:hover { text-decoration: underline; }
.reveal-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
}
.reveal-link:hover { text-decoration: underline; }
.reveal-box {
    margin-top: 10px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}
.reveal-box[hidden] { display: none; }

/* Status badge in webhook row (HTTP color) */
.webhook-status { font-size: 11px; white-space: nowrap; }
.webhook-status.is-ok    { color: var(--success-color, #10b981); }
.webhook-status.is-error { color: #ef4444; }
.webhook-status.is-idle  { color: var(--text-muted); }

/* =========================================================================
   Overlay modal primitives
   Shared shell for full-screen-ish dialogs (file preview, vault unlock, …).
   Default .preview-card size is tuned for the file preview; smaller
   dialogs (e.g. vault unlock) override width/height via a modifier class.
   ========================================================================= */
.preview-modal {
    position: fixed; inset: 0; z-index: 1050;
    display: none; align-items: center; justify-content: center;
}
.preview-modal.is-open { display: flex; }
.preview-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.preview-card {
    position: relative;
    width: min(98vw, 1800px);
    height: min(97vh, 1200px);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.preview-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; gap: 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}
.preview-title-block { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.preview-title-block strong {
    font-size: 15px; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-subtitle {
    font-size: 12px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-body { flex: 1; position: relative; background: var(--bg-primary); min-height: 0; }
.preview-loader {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: var(--text-secondary); font-size: 13px;
    background: var(--bg-card);
    transition: opacity .25s;
}
.preview-loader.is-hidden { opacity: 0; pointer-events: none; }
.preview-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: preview-spin 0.8s linear infinite;
}
@keyframes preview-spin { to { transform: rotate(360deg); } }

/* ===== Money formatting + privacy mask =====
 * Rendered by fmtMoney() / moneyWrap() in includes/Format.php as a dual-element
 * span. The sidebar toggle flips :root[data-amounts-hidden], which swaps
 * .money-val (real number) for .money-mask (••••). Attribute lives on <html>
 * so the inline <head> script can apply it before first paint (no FOUC).
 * No JS re-render needed for the swap itself. */
.money { white-space: nowrap; }
.money-val { display: inline; }
.money-mask {
    display: none;
    letter-spacing: 2px;
    color: var(--text-muted);
    user-select: none;
    font-weight: inherit;
}
:root[data-amounts-hidden] .money-val { display: none; }
:root[data-amounts-hidden] .money-mask { display: inline; }
/* Empty values (null → "–") stay as-is regardless of toggle. */
.money-empty { color: var(--text-muted); }

/* Sidebar toggle button — sits next to theme-toggle in the sidebar footer.
 * Visual state mirrors via :root[data-amounts-hidden]: closed-eye icon when
 * masked, open-eye when visible. */
.amounts-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}
.amounts-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.amounts-toggle .amounts-icon-show { display: inline-flex; }
.amounts-toggle .amounts-icon-hide { display: none; }
:root[data-amounts-hidden] .amounts-toggle .amounts-icon-show { display: none; }
:root[data-amounts-hidden] .amounts-toggle .amounts-icon-hide { display: inline-flex; }