/*
  Dash v5 – design tokens and base styles.

  Order of the stylesheets: style.css (this file: tokens, fonts, base, legacy compatibility) comes first, then the
  pre-built tailwind.css (utilities + the component classes from styles/tailwind.css: .btn, .card, .input …).
  New code uses the tokens below and the components; the "Legacy compatibility" section at the end only exists so
  that markup written before v5 picks up the calmer palette until each module is migrated (REDESIGN_V5_PLAN.md).
*/

/* ─── Fonts ────────────────────────────────────────────────────────────────
   Inter (variable), self-hosted from @fontsource-variable/inter by `npm run build:fonts`. Latin + latin-ext
   cover Czech/Slovak and every other European language the app is translated into. */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Tokens (the only :root block; dark is the default theme) ──────────────
   Colours are kept as space separated channels (--x-rgb) wherever Tailwind needs an alpha
   (`bg-surface-1/50`); the plain tokens are built from them. */
:root {
    color-scheme: dark;

    /* Surfaces */
    --bg-rgb: 11 11 13;
    --surface-1-rgb: 18 18 21;
    --surface-2-rgb: 24 24 28;
    --surface-3-rgb: 32 32 38;
    --bg: rgb(var(--bg-rgb));              /* #0B0B0D  app background */
    --surface-1: rgb(var(--surface-1-rgb)); /* #121215  cards, panels, sidebar */
    --surface-2: rgb(var(--surface-2-rgb)); /* #18181C  nested areas, inputs, row hover */
    --surface-3: rgb(var(--surface-3-rgb)); /* #202026  popovers, dropdowns, modals */

    /* Borders */
    --border-subtle: rgb(255 255 255 / 0.06);
    --border: rgb(255 255 255 / 0.10);
    --border-strong: rgb(255 255 255 / 0.16);

    /* Text. --text-subtle is lighter than the plan's #71717A, which only reaches 3.9:1 on --surface-1; this one is 5.1:1. */
    --text-rgb: 237 237 239;
    --text-muted-rgb: 161 161 170;
    --text-subtle-rgb: 138 138 147;
    --text: rgb(var(--text-rgb));              /* #EDEDEF */
    --text-muted: rgb(var(--text-muted-rgb));   /* #A1A1AA */
    --text-subtle: rgb(var(--text-subtle-rgb)); /* #8A8A93 */

    /* Accent: the company colour when branding is on (applyBrandColor() in api.js), otherwise this default. */
    --accent-rgb: 124 58 237;
    --accent: rgb(var(--accent-rgb));            /* #7C3AED */
    --accent-hover: #8648EF;                     /* about 8 % towards white */
    --accent-soft: rgb(var(--accent-rgb) / 0.14);
    --accent-text-rgb: 167 139 250;
    --accent-text: rgb(var(--accent-text-rgb));  /* #A78BFA: accent used as text/icon colour on dark surfaces (AA) */
    --accent-contrast: #FFFFFF;                  /* text on an accent-coloured background */

    /* States, each with a -soft variant (14 % alpha) for badges and tinted rows, and a -text variant for text on it. */
    --success-rgb: 34 197 94;
    --warning-rgb: 245 158 11;
    --danger-rgb: 239 68 68;
    --info-rgb: 56 189 248;
    --success: rgb(var(--success-rgb));  /* #22C55E */
    --warning: rgb(var(--warning-rgb));  /* #F59E0B */
    --danger: rgb(var(--danger-rgb));    /* #EF4444 */
    --info: rgb(var(--info-rgb));        /* #38BDF8 */
    --success-soft: rgb(var(--success-rgb) / 0.14);
    --warning-soft: rgb(var(--warning-rgb) / 0.14);
    --danger-soft: rgb(var(--danger-rgb) / 0.14);
    --info-soft: rgb(var(--info-rgb) / 0.14);
    --success-text: #4ADE80;
    --warning-text: #FBBF24;
    --danger-text: #F87171;
    --danger-solid: #DC2626;           /* filled destructive button (white text 4.8:1) */
    --danger-solid-hover: #B91C1C;
    --info-text: #7DD3FC;

    /* Typography */
    --font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Radius: 6 (badges, inner controls), 8 (buttons, inputs), 12 (cards, modals). Nothing else except avatars/dots. */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;

    /* Shadow: only popovers and modals have one; cards rely on their border. */
    --shadow-pop: 0 8px 30px rgb(0 0 0 / 0.4);

    /* Motion: short and calm, switched off by prefers-reduced-motion below. */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 120ms;
    --dur: 160ms;
    --dur-slow: 180ms;

    /* Layout */
    --page-pad: 32px;
    --content-max: 1280px;
    --sidebar-w: 240px;
    --sidebar-rail-w: 64px;
    --topbar-h: 56px;
    --bottomnav-h: 0px; /* 56px on phones while the bottom navigation is shown (see below); fixed bottom UI offsets itself by it */

    /* Stacking order. Modals and drawers are <dialog> elements (top layer), so they sit above everything regardless. */
    --z-sticky: 30;
    --z-dropdown: 40;
    --z-drawer: 50;
    --z-modal: 60;
    --z-toast: 70;
    --z-palette: 80;

    /* Names used by code written before v5 (inline styles, api.js, a few modules). They follow the accent. */
    --color-primary: var(--accent);
    --color-primary-rgb: var(--accent-rgb);
    --color-primary-hover: var(--accent-hover);
    --color-glow: rgb(var(--accent-rgb) / 0.12);
    --primary-color: var(--accent);
}

@media (max-width: 767px) {
    :root { --page-pad: 16px; }
    body:has(.shell-bottomnav) { --bottomnav-h: 56px; }
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    font-optical-sizing: auto;
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgb(var(--accent-rgb) / 0.45); color: #fff; }

/* Headings: Inter semibold, a little tighter. Syne is gone; .font-display survives only as a name. */
h1, h2, h3, h4, .font-display {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.015em;
}
/* Extra line-height so Czech diacritics (Ý, Č, Ř …) are never clipped by a tight line box. */
.font-display { line-height: 1.2; }

/* Numbers align in columns (amounts, dates, counters). Monospace is for codes only (.font-code). */
.num, .tabular-nums, [data-amount], [data-counter-target] { font-variant-numeric: tabular-nums; }
.font-code { font-family: var(--font-code); }

/* Horizontal scrollers (tabs, chip rows) without a visible scrollbar. */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Icons from the sprite (public/modules/icons.js): size comes from the width/height attributes. */
.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ─── Focus (keyboard navigation) ─────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* ─── Native form controls ────────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
input[type="checkbox"] { border-radius: 4px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--text-subtle); }
input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 1.5px;
    width: 4px;
    height: 8px;
    border: solid var(--accent-contrast);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="radio"]:checked { border-color: var(--accent); }
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--accent);
    border-radius: 50%;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: 0.5; cursor: not-allowed; }

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238A8A93' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 2.5rem !important;
    cursor: pointer;
}
/* Open <option> lists are drawn by the browser: keep them dark with readable text. */
select option { background: var(--surface-3); color: var(--text); }

input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    background: var(--surface-3);
    border-radius: 99px;
    cursor: pointer;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--bg);
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--bg);
    cursor: pointer;
}
input[type="range"]::-moz-range-track { height: 4px; background: var(--surface-3); border-radius: 99px; }
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

input[type="file"]::file-selector-button {
    appearance: none;
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 10px;
    transition: background-color var(--dur-fast) var(--ease);
}
input[type="file"]::file-selector-button:hover { background: var(--surface-2); }

input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { color-scheme: dark; }

::placeholder { color: var(--text-subtle); opacity: 1; }

button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ─── Motion ──────────────────────────────────────────────────────────────── */
/* Opacity only for page wrappers: any transform would make them the containing block of position:fixed descendants
   (the old modals nested inside pages) and clip those against the page instead of the viewport. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseSoft { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes drawerIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.animate-fade-in { animation: fadeIn var(--dur) var(--ease); }
.animate-fade-out { animation: fadeOut var(--dur) var(--ease) forwards; }
/* Used by many existing modals and by the dashboard cards (whose chart reveal waits for `animationend`). */
.animate-modal-scale { animation: riseIn var(--dur-slow) var(--ease) both; }
.animate-card-flyin { animation: fadeIn var(--dur-slow) var(--ease) both; }
.animate-toast-slide { animation: riseIn var(--dur) var(--ease) both; }
.animate-toast-out { animation: fadeOut var(--dur) var(--ease) forwards; }
.animate-spin-custom { animation: spin 1s linear infinite; }

/* Charts and bars grow in a moment, not for a second and a half. */
.apple-donut-arc { transition: stroke-dasharray 600ms var(--ease), stroke-dashoffset 600ms var(--ease); }
.apple-bar-grow { transition: height 500ms var(--ease); }
.apple-rank-grow { transition: width 500ms var(--ease); }

/* Hover feedback is a colour change, never movement. */
a, button, select, input[type="checkbox"], input[type="radio"] {
    transition-property: color, background-color, border-color, opacity, box-shadow;
    transition-duration: var(--dur-fast);
    transition-timing-function: var(--ease);
}
.hover-lift:hover { border-color: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Loading placeholders and spinner ────────────────────────────────────── */
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.w-3\/4 { width: 75%; }
.skeleton-text.w-1\/2 { width: 50%; }
.skeleton-title { height: 22px; margin-bottom: 12px; }
.skeleton-block { height: 60px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.skeleton-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
}

.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgb(255 255 255 / 0.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
.spinner-sm { width: 12px; height: 12px; }
.spinner-lg { width: 20px; height: 20px; border-width: 3px; }

/* ─── Print ───────────────────────────────────────────────────────────────── */
@media print {
    body { background: white !important; color: black !important; }
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    .invoice-watermark {
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
        color: #999;
        font-family: var(--font-sans);
        opacity: 0.8;
    }
}

/* ─── Surfaces used by existing markup ────────────────────────────────────── */
/* .glass / .glass-flat / .glass-card / .bg-darkCard used to be blurred, glowing, floating cards. They are flat now:
   a surface, a hairline border, 12 px radius. Kept as classes so the markup does not have to change yet. */
.glass, .glass-flat {
    background-color: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
}
.glass-card, .bg-darkCard {
    background-color: var(--surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg);
}

/* ─── Context menu (Cloud) ────────────────────────────────────────────────── */
.context-menu {
    position: fixed;
    background: var(--surface-3);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    border-radius: var(--r-md);
    padding: 4px;
    min-width: 180px;
    z-index: 99999;
    display: none;
    animation: riseIn var(--dur-fast) var(--ease) both;
}
.context-menu-item {
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.context-menu-item:hover { background: rgb(255 255 255 / 0.07); color: var(--text); }
.context-menu-item.danger:hover { background: var(--danger-soft); color: var(--danger-text); }
.context-menu-separator { height: 1px; background: var(--border); margin: 4px 0; }

/* ─── Drag and drop overlay, lasso (Cloud) ────────────────────────────────── */
.drag-overlay {
    position: fixed;
    inset: 0;
    background: rgb(var(--bg-rgb) / 0.8);
    border: 2px dashed var(--accent);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--text);
    animation: fadeIn var(--dur) var(--ease);
}
.drag-overlay-card {
    background: var(--surface-3);
    border: 1px solid var(--border);
    padding: 32px;
    border-radius: var(--r-lg);
    text-align: center;
    box-shadow: var(--shadow-pop);
}
#cloud-lasso-box {
    position: fixed;
    border: 1px solid var(--accent);
    background: rgb(var(--accent-rgb) / 0.08);
    pointer-events: none;
    z-index: 9998;
    border-radius: 4px;
}

/* ─── Styled <select> and file input (initCustomSelects / initCustomFileInputs in api.js) ── */
.custom-select-wrapper { position: relative; user-select: none; width: 100%; }
.custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.5rem 0.75rem;
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease);
}
.custom-select-trigger:hover { border-color: var(--border-strong); }
.custom-select-trigger.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.custom-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-top: 4px;
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
    box-shadow: var(--shadow-pop);
    max-height: 250px;
    overflow-y: auto;
    padding: 4px;
}
.custom-select-wrapper.open .custom-select-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-select-wrapper.open-up .custom-select-dropdown { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 4px; transform: translateY(4px); }
.custom-select-wrapper.open-up.open .custom-select-dropdown { transform: translateY(0); }
.custom-select-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--r-sm);
}
.custom-select-option:hover { background-color: rgb(255 255 255 / 0.06); color: var(--text); }
.custom-select-option.selected { background-color: var(--accent-soft); color: var(--text); font-weight: 500; }
select.custom-select-initialized { display: none !important; }

.custom-file-wrapper { position: relative; width: 100%; }
.custom-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: center;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.custom-file-label:hover { border-color: var(--accent); background-color: var(--accent-soft); color: var(--text); }
.custom-file-wrapper.has-file .custom-file-label {
    border: 1px solid var(--accent);
    background-color: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 500;
}
.custom-file-input { position: absolute; width: 0; height: 0; opacity: 0; overflow: hidden; }

/* ─── Photo review (client + owner) ───────────────────────────────────────────
   The limits are in viewport units on purpose. The stage wrapping the image is shrink-to-fit, so a percentage
   max-width on the image would be circular and the browser may collapse it to nothing. Only maximums are set, never
   an explicit height: a fixed height plus a width cap would squash the picture. */
.photo-review-img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100vw - 1rem);
    max-height: 62vh;
}
@media (min-width: 768px) {
    .photo-review-img {
        max-width: calc(100vw - 22rem);
        max-height: calc(100vh - 7.5rem);
    }
}
/* Zoom is applied to the stage so the canvas and pins scale with the photo and stay aligned. */
#photo-stage { transition: transform 90ms linear; will-change: transform; }
#photo-stage.is-zoomed { cursor: grab; }
#photo-stage.is-panning { cursor: grabbing; transition: none; }

/* ─── Media protection in client review ───────────────────────────────────────
   A browser cannot block a screenshot. These are deterrents plus traceability: a tiled watermark naming the
   viewer, and blurring whenever the window is not focused. */
.media-watermark {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 3.5rem 2.5rem;
    overflow: hidden;
    transform: rotate(-24deg) scale(1.6);
    user-select: none;
}
.media-watermark span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Has to survive a re-encode and a phone photo of the screen, so it is well past "subtle". */
    color: rgb(255 255 255 / 0.42);
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.75), 0 0 1px rgb(0 0 0 / 0.9);
    white-space: nowrap;
}
.media-obscured img,
.media-obscured video,
.media-obscured canvas,
.media-obscured iframe {
    filter: blur(26px) saturate(0.4);
    transition: filter 0.12s ease-out;
}
.media-obscured::after {
    content: "Náhled je skrytý, dokud není okno aktivní";
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: rgb(255 255 255 / 0.75);
    background: rgb(0 0 0 / 0.35);
    pointer-events: none;
    text-align: center;
    padding: 1rem;
}
/* The watermark must ride along into fullscreen, where the player container becomes the fullscreen element. */
.sweet-video-container:fullscreen .media-watermark,
.sweet-video-container:-webkit-full-screen .media-watermark { display: flex; }

/* ─── Jump to a record ────────────────────────────────────────────────────────
   When one module sends you to a specific row in another, the row says so for a couple of seconds. */
@keyframes dashFlash {
    0%, 100% { background-color: transparent; box-shadow: none; }
    12%      { background-color: rgb(var(--accent-rgb) / 0.20); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.55); }
    70%      { background-color: rgb(var(--accent-rgb) / 0.10); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 0.30); }
}
.dash-flash { animation: dashFlash 2.4s ease-out; border-radius: var(--r-md); }

.invoice-item-row { transition: opacity 200ms ease, max-height 200ms ease; }

/* ─── Director's viewfinder: mobile and cinema fullscreen (Tools) ─────────── */
#vf-stage-container {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
#vf-stage-container.vf-cinema-mode {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    z-index: 99999 !important;
    background: #000000 !important;
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
    padding-top: env(safe-area-inset-top, 0) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
}
#vf-stage-container.vf-cinema-mode #vf-drawer-sheet { max-height: 85vh; }
@media (max-width: 640px) {
    #vf-stage-container:not(.vf-cinema-mode) {
        min-height: 480px;
        height: calc(100dvh - 160px);
    }
}
/* A toast fired while the viewfinder is fullscreen has to stay visible above it. */
body:has(.vf-cinema-mode) .ui-toasts { z-index: 100000; }

/* ─── Legacy compatibility (remove once every module uses the v5 components, WP14) ────────────────────────────
   Markup written before v5 spells colours, sizes and weights directly. These rules map the most common of those
   onto the tokens above so the whole app reads as one calm palette. They are deliberately blunt (!important)
   because Tailwind's utilities come later in the cascade. New code must not rely on them. */

/* Sizes: nothing below 11 px; the former 10 px labels become 12 px (the minimum for body text in v5). */
.text-\[8px\], .text-\[9px\] { font-size: 11px !important; }
.text-\[10px\], .text-\[11px\] { font-size: 12px !important; }

/* Sentence case instead of shouting labels; the wide tracking only made sense with capitals. */
.uppercase { text-transform: none !important; }

/* Near-black hexes that had crept into 17 different shades. Inputs and sunken areas → surface-2, panels → surface-1. */
.bg-\[\#0a070c\], .bg-\[\#050308\], .bg-\[\#0a0a0a\], .bg-\[\#050505\], .bg-\[\#0c0a10\], .bg-\[\#0c0812\], .bg-\[\#090b10\],
.bg-\[\#0b080d\], .bg-\[\#111214\], .bg-\[\#110e15\], .bg-\[\#110d14\] { background-color: var(--surface-2) !important; }
.bg-\[\#121017\], .bg-\[\#0f0b14\], .bg-\[\#120e17\], .bg-\[\#131118\], .bg-\[\#120f18\], .bg-\[\#121218\], .bg-\[\#0d0d12\],
.bg-\[\#130d1d\], .bg-\[\#181125\], .bg-\[\#18191c\] { background-color: var(--surface-1) !important; }

/* White text on a light company colour is unreadable: the accent says what colour text it needs. */
.bg-primary.text-white { color: var(--accent-contrast); }