/* Morticia Invoice System - Main Stylesheet */

/* ===== DESIGN TOKENS =====
   Generated with design-tokens skill (julianoczkowski/designer-skills).
   Single source of truth for radius / spacing / type / elevation / motion.
   Values were derived from actual usage in the previous stylesheet — the
   scales collapse 47 border-radius occurrences across 10 values into 6
   semantic steps, and 19 font-sizes into 9 steps. */
:root {
    /* --- Brand / status colours ---
       WEC24 brand alignment (Apr 2026): primary swapped from generic
       Tailwind violet to WEC's deep purple, secondary swapped from cyan
       to WEC coral as a distinctive accent. Semantic statuses (success,
       warning, danger) deliberately stay generic so users don't confuse
       brand-coral with destructive-red. Sampled directly from the
       WEC24 brand presentation (Mary & Janek, Apr 2026). */
    --primary: #5C2080;          /* WEC purple */
    --primary-hover: #3D1564;    /* deeper WEC purple for press/hover */
    --secondary: #E5435A;        /* WEC coral — used sparingly as accent */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* --- Border radius (most-common → DEFAULT) --- */
    --radius-xs: 4px;       /* mini chrome (checkbox mark, micro-badges) */
    --radius-sm: 6px;       /* chips, inline boxes */
    --radius-md: 8px;       /* DEFAULT — inputs, buttons, filter-bar */
    --radius-lg: 12px;      /* cards, modals (legacy --radius) */
    --radius-xl: 16px;      /* hero / large feature */
    --radius-full: 9999px;  /* status pills */
    --radius: var(--radius-lg); /* back-compat */

    /* --- Spacing (4 px base) --- */
    --space-xs: 0.25rem;    /*  4px */
    --space-sm: 0.5rem;     /*  8px */
    --space-md: 0.75rem;    /* 12px */
    --space-lg: 1rem;       /* 16px */
    --space-xl: 1.5rem;     /* 24px */
    --space-2xl: 2rem;      /* 32px */
    --space-3xl: 3rem;      /* 48px */
    --spacing: var(--space-xl); /* back-compat */

    /* --- Type scale --- */
    --font-xs: 0.75rem;
    --font-sm: 0.85rem;
    --font-base: 1rem;
    --font-md: 1.125rem;
    --font-lg: 1.25rem;
    --font-xl: 1.5rem;
    --font-2xl: 1.75rem;
    --font-3xl: 2rem;
    --font-4xl: 2.5rem;

    /* --- Elevation / shadows --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.45);
    --shadow-focus: 0 0 0 3px rgba(92, 32, 128, 0.28);

    /* --- Motion ---
       Exponential ease-out for everything except progress indicators.
       Real objects decelerate; nothing in a UI should accelerate. The
       default (ease-out-quart) is for hover/focus/state changes.
       --easing-emphatic (ease-out-quint) is slightly snappier and reads
       as "this thing entered" — used for modals, panels, toasts.
       Bounce / elastic / linear are forbidden outside spinners. */
    --duration-fast: 150ms;
    --duration-normal: 220ms;
    --duration-slow: 320ms;
    --easing-default: cubic-bezier(0.25, 1, 0.5, 1);
    --easing-emphatic: cubic-bezier(0.22, 1, 0.36, 1);

    /* Reusable transition shorthands — never use `transition: all`, which
       animates layout-triggering properties and stutters. Lists the only
       cheap GPU-safe props components actually animate here. */
    --transition-fast: background-color var(--duration-fast) var(--easing-default),
                       color var(--duration-fast) var(--easing-default),
                       border-color var(--duration-fast) var(--easing-default),
                       box-shadow var(--duration-fast) var(--easing-default),
                       opacity var(--duration-fast) var(--easing-default),
                       transform var(--duration-fast) var(--easing-default);
    --transition-normal: background-color var(--duration-normal) var(--easing-default),
                         color var(--duration-normal) var(--easing-default),
                         border-color var(--duration-normal) var(--easing-default),
                         box-shadow var(--duration-normal) var(--easing-default),
                         opacity var(--duration-normal) var(--easing-default),
                         transform var(--duration-normal) var(--easing-default);

    /* --- Legacy aliases — do not remove, many inline styles rely on these --- */
    --text-dim: var(--text-muted);
    --text-main: var(--text-primary);
    --border-color: var(--border);
    --accent-color: var(--primary);
    --accent-light: var(--secondary);
    --accent-green: var(--success);
    --bg-primary: var(--bg-main);
    --bg-secondary: var(--bg-card);
    --bg-tertiary: var(--bg-hover);
    --warning-color: var(--warning);

    /* --- Semantic surface aliases (prefer these in new code) --- */
    --surface-1: var(--bg-main);   /* page background */
    --surface-2: var(--bg-card);   /* cards, panels */
    --surface-3: var(--bg-hover);  /* raised/hover, inner boxes */
}

/* ===== DARK THEME (default) — Linear-native warm neutral ramp =====
   Content sits forward; sidebar/nav recede. Warm gray (zinc family) instead
   of the previous cold slate/blue. */
:root, [data-theme="dark"] {
    --bg-main: #111113;      /* content — stands forward */
    --bg-sidebar: #0c0c0e;   /* navigation — recedes (DARKER than main) */
    --bg-card: #18181b;      /* cards on content — further forward */
    --bg-hover: #232327;     /* interactive hover */
    --bg-input: rgba(17, 17, 19, 0.6);
    --bg-input-focus: rgba(17, 17, 19, 0.8);
    --bg-subtle: rgba(255, 255, 255, 0.03);

    --text-primary: #e8e8ea;    /* crisp but not glare-white */
    --text-secondary: #a1a1a6;  /* orientation/nav copy */
    --text-muted: #6b6b71;      /* placeholders, timestamps */

    --border: #27272a;
    --shadow: rgba(0, 0, 0, 0.3);
    --overlay: rgba(0, 0, 0, 0.6);
}

/* ===== LIGHT THEME — warm off-white, not cold slate. ===== */
[data-theme="light"] {
    --bg-main: #fafafa;
    --bg-sidebar: #f4f4f5;
    --bg-card: #ffffff;
    --bg-hover: #ededee;
    --bg-input: rgba(250, 250, 250, 0.8);
    --bg-input-focus: #ffffff;
    --bg-subtle: rgba(0, 0, 0, 0.02);

    --text-primary: #18181b;
    --text-secondary: #52525b;
    --text-muted: #a1a1aa;

    --border: #e4e4e7;
    --shadow: rgba(0, 0, 0, 0.08);
    --overlay: rgba(0, 0, 0, 0.3);
}

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Dark scrollbars + native form controls (date picker, <select> popup, autofill) */
html {
    color-scheme: dark;
}
html[data-theme="light"] {
    color-scheme: light;
}

/* Global keyboard-focus ring — anything interactive without its own
   focus-visible style falls back to this so Tab-users always see where
   they are. Mouse clicks don't trigger :focus-visible in modern browsers. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Respect user preference for reduced motion — WCAG 2.3.3 / 2.1 AA. */
@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;
    }
}

/* Kill the ~300ms tap delay on mobile for anything interactive. */
button, a, input[type="checkbox"], input[type="radio"], .nav-item, .btn-icon {
    touch-action: manipulation;
}

/* Tabular figures in data tables so currency columns line up visually. */
.nano-table td,
.registry-table td {
    font-variant-numeric: tabular-nums;
}

/* Screen-reader-only utility — for aria-live regions and other announcements
   that sighted users don't need to see. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';  /* Inter's stylistic sets: straight-sided digits, single-storey a, crisper punctuation */
    background: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Headings — Bricolage Grotesque is a contemporary geometric sans with
   genuine personality (variable optical sizing, designed for display
   use). Pairing it with Inter for body gives the hierarchy that
   Impeccable's audit flags as missing when only Inter is used, and
   echoes the heavy geometric voice of WEC's brand presentation
   without copying the AI-overused fonts (Montserrat / Poppins). */
h1, h2, h3, h4 {
    font-family: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
h1 { font-weight: 800; letter-spacing: -0.03em; }
h2 { font-weight: 700; letter-spacing: -0.025em; }
h3 { font-weight: 700; }
h4 { font-weight: 600; letter-spacing: -0.015em; }

/* Native form controls don't inherit font-family by default. Without this,
   <input type="date">, <select>, and textarea fall back to the OS font
   (often Arial / Tahoma / San Francisco) and look foreign next to the rest
   of the app. Force Inter on everything interactive. */
input, select, textarea, button {
    font-family: inherit;
}

/* Brand the native checkbox/radio. Lets us drop the inline
   `style="accent-color:var(--primary)"` that was sprinkled on every
   filter-bar checkbox in purchase_orders.html / rozliczenia.html. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
}

/* Dark-mode calendar picker icon — the default is bright white which
   stands out painfully against a warm near-black background. Inverting
   and dimming it integrates with the rest of the UI without hiding it.
   Light mode keeps the native black glyph. */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root:not([data-theme]) input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.65);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--easing-default);
}
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
:root:not([data-theme]) input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ===== LOGIN PAGE =====
   Brand register: this is the only page where Morticia speaks in WEC's
   marketing voice. The signature WEC purple → coral gradient lives here
   so the entry to the app feels branded; every page after this drops to
   the flat product palette. The radial bloom in the upper-right mimics
   the warm-coral hot-spot from slide 1 of the brand presentation. */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 75% 18%, rgba(229, 67, 90, 0.55) 0%, rgba(229, 67, 90, 0) 45%),
        linear-gradient(135deg, #3D1564 0%, #5C2080 55%, #8B2C72 100%);
    padding: 2rem;
}

.login-card {
    background: var(--bg-card);
    padding: 3rem;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px var(--shadow);
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--border);
}

.logo {
    text-align: center;
    margin-bottom: 2rem;
}

.logo h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.login-form {
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

/* ===== FORM ELEMENTS ===== */
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input,
.form-group textarea,
.form-group select,
.form-input {
    /* 36px height — 4px taller than .filter-bar's 32px so modal/detail
       form fields read as slightly more substantial than list filters,
       without becoming the previous 46px jumbotron that forced every
       caller to inline-override `padding` and `height: auto`. Textareas
       opt out via min-height auto so they can size with rows attribute. */
    width: 100%;
    height: 36px;
    padding: 0 0.75rem;
    box-sizing: border-box;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1;
    transition: var(--transition-fast);
    font-family: inherit;
    appearance: none;
}

/* Textareas grow with rows attribute, so explicitly opt out of the fixed
   height + flat line-height. */
.form-group textarea,
textarea.form-input {
    height: auto;
    min-height: 80px;
    padding: 0.5rem 0.75rem;
    line-height: 1.5;
}

.form-group select,
select.form-input {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.85em;
    padding-right: 2rem;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-input-focus);
}

/* Keyboard-only focus ring — mouse clicks don't need the glow, but Tab does. */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible,
.form-input:focus-visible {
    box-shadow: var(--shadow-focus);
}

.form-group input::placeholder,
.form-input::placeholder {
    color: rgba(148, 163, 184, 0.5);
}

.form-group input:hover,
.form-group select:hover,
.form-input:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Primary action button. Solid purple, same height as filter-bar controls
   (32px), fits its content width — NOT 100% (the old behaviour made every
   page header CTA jumbo because it tried to fill its flex container).
   Form-width submits should opt into .btn-full. */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 32px;
    padding: 0 0.875rem;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-fast);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Press feedback — 1px sink applies to all three button variants and
   reads as a subtle haptic on click. Only transform animates, so no
   layout cost. */
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
    transform: translateY(1px);
}

/* Form-width / card-width modifier — for login submits, modal primary
   actions, and anywhere the button should visually own the full container
   width. Keep this rare; it's the exception, not the default. */
.btn-full {
    width: 100%;
    height: 40px;
    font-size: 0.95rem;
}

/* Small-button modifier — drops any button variant (primary/secondary/
   danger) to ~26px for inline row actions. Overrides height + padding
   explicitly because the base variants now set fixed height. */
.btn-sm {
    height: 26px;
    padding: 0 0.625rem;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

.error-message {
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    color: var(--danger);
    font-size: 0.875rem;
    margin-top: 1rem;
}

.login-footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ===== APP LAYOUT ===== */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 260px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
}

.sidebar-header {
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

/* Logo — dropped the purple→cyan gradient-clipped text that was the
   Morticia word's previous treatment. With Inter and tight tracking the
   wordmark carries identity; the 💀 emoji does the accent. Gradient
   text on a brand wordmark reads as web 2.0 now. */
.sidebar-header h1 {
    font-size: 1.25rem;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.sidebar-nav {
    flex: 1;
    padding: 0.75rem 0;
}

/* Nav items recede. Color is text-secondary by default so the sidebar
   reads as orientation/chrome, not as content. Active items brighten to
   text-primary and gain a subtle purple tint bg — one signal, not three.
   Dropped the old 3px left-border and the purple-tinted text: the bg
   tint alone is enough, and removing the border stops the icon from
   jumping 3px left when the active page changes. */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-fast);
    font-size: 0.875rem;
}

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

.nav-item.active {
    background: rgba(92, 32, 128, 0.12);
    color: var(--text-primary);
}

.nav-item .icon {
    font-size: 1.05rem;
    opacity: 0.7;             /* muted by default so icons don't out-shout the text */
    transition: opacity var(--duration-fast) var(--easing-default);
}
.nav-item:hover .icon,
.nav-item.active .icon {
    opacity: 1;
}

.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.user-avatar {
    font-size: 1.5rem;
}

.user-name {
    font-size: 0.875rem;
}

.btn-logout {
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

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

/* ===== MAIN CONTENT ===== */
/* ===== MAIN CONTENT ===== */
.main-content {
    flex: 1;
    margin-left: 260px;
    padding: 2rem;
    min-width: 0;
    /* Critical for nested overflow to work */
    width: 100%;
}

/* ... existing code ... */

.nano-table th:last-child,
.nano-table td:last-child {
    /* Auto layout handles this now */
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.page-header h2 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.header-actions {
    display: flex;
    gap: 1rem;
}

.filter-select {
    /* Same visual contract as .filter-bar select — transparent, border
       only, purple on focus — so a page-header dropdown reads as part of
       the same filtering vocabulary as the row below. */
    padding: 0 0.75rem;
    height: 32px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
}
.filter-select:hover { border-color: var(--text-secondary); }
.filter-select:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-card);
}

/* ===== STATS STRIP =====
   Replaces the previous jumbo 3-across card grid. Stats are metadata, not
   hero content — they belong as an inline summary above the filter row,
   not as big boxes that push the table half a screen down. Border-bottom
   gives them a soft visual divider from the filter-bar underneath.
   Kept the old class names (.stats-grid / .stat-card / -label / -value)
   so existing HTML doesn't need rewriting. */
.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.stat-card {
    background: transparent;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* ===== TABLES (unified base) =====
   .nano-table and .registry-table share a single visual language. The
   registry variant adds features on top (sticky headers, editable cells,
   row truncation) but the baseline — density, typography, hover — is the
   same so that Faktury, Zlecenia, Dostawcy and Ewidencja look like pages
   of one product. */
.nano-table,
.registry-table {
    width: auto;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    /* Body line-height is 1.6 (reading optimised); tables need 1.3 so rows
       don't balloon. Without this, one row in Faktury was ~40px while a
       row in Ewidencja was ~28px — not because padding differed but
       because line-height did. */
    line-height: 1.3;
}

.nano-table th,
.registry-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
    white-space: nowrap;
}

.nano-table td,
.registry-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
    transition: background 0.15s;
    /* Lock a single row baseline across every table in the app. Without
       this, a row with a status-badge / button (which add height via
       padding) renders ~2px taller than a plain text-only row, so
       /cost-registry rows looked subtly different from /rozliczenia
       rows. The 20px content height = badge max child; +16px vertical
       padding = 36px. */
    height: 36px;
    box-sizing: border-box;
}

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

.nano-table tr:hover td,
.registry-table tr:hover td {
    background: rgba(92, 32, 128, 0.06);
}

/* Button alignment inside table cells — buttons auto-size to their content
   instead of stretching. */
.nano-table .btn-primary,
.nano-table .btn-secondary,
.nano-table .btn-sm,
.registry-table .btn-primary,
.registry-table .btn-secondary,
.registry-table .btn-sm {
    width: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.nano-table .col-actions,
.registry-table .col-actions {
    white-space: nowrap;
}

.col-actions {
    width: 250px;
    min-width: 250px;
    text-align: right;
}

.col-actions .btn-sm {
    min-width: 60px;
    padding: 0.25rem 0.5rem;
    justify-content: center;
}

.table-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow-x: auto;
    /* No drop-shadow — borders carry the visual weight instead, which reads
       cleaner on a flat neutral palette (Linear/Attio style). */
}

/* File inputs — the native "Wybierz plik" button renders with OS chrome
   and looks jarring on dark theme. Style it via ::file-selector-button. */
input[type="file"] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.35rem 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}
input[type="file"]::file-selector-button {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.85rem;
    margin-right: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85rem;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-badge.status-NEW {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.status-badge.status-PROCESSING {
    background: rgba(168, 85, 247, 0.1);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.status-badge.status-NEEDS_REVIEW {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-badge.status-APPROVED {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-badge.status-EXPORTED {
    background: rgba(6, 182, 212, 0.1);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.status-badge.status-REJECTED {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-badge.status-PAID {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-badge.status-UNPAID {
    background: rgba(100, 116, 139, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

/* PO client status badges */
.status-badge.status-PENDING_CLIENT_APPROVAL {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.status-badge.status-APPROVED_BY_CLIENT {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-badge.status-DECLINED_BY_CLIENT {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* PO lifecycle status badges — without these, the HTML had
   `class="status-badge status-DRAFT"` but CSS only styled the invoice
   statuses, so PO statuses rendered as plain text and looked flat next
   to the coloured invoice badges on /dashboard. */
.status-badge.status-DRAFT {
    background: rgba(100, 116, 139, 0.12);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.25);
}
.status-badge.status-ISSUED {
    background: rgba(6, 182, 212, 0.1);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.2);
}
.status-badge.status-COMPLETED {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-badge.status-CANCELLED {
    background: rgba(239, 68, 68, 0.08);
    color: #cbd5e1;
    border: 1px solid rgba(239, 68, 68, 0.25);
    text-decoration: line-through;
    text-decoration-color: rgba(203, 213, 225, 0.5);
}
.status-badge.status-READY {
    background: rgba(168, 85, 247, 0.1);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.status-badge.status-DUPLICATE {
    background: rgba(100, 116, 139, 0.08);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

/* Secondary button — outline, same height as primary (32px) so they sit
   on the same baseline in any toolbar. */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 32px;
    padding: 0 0.875rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-fast);
}

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

/* Danger variant — outline by default (same shape as btn-secondary), with
   a filled modifier for rare "destructive is the primary action" cases. */
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 32px;
    padding: 0 0.875rem;
    background: transparent;
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    color: var(--danger);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-fast);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.btn-danger--solid {
    background: var(--danger);
    color: #fff;
}

.btn-danger--solid:hover {
    background: var(--danger);
    opacity: 0.88;
}

/* ===== DETAIL VIEW ===== */
.back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.back-link:hover {
    color: var(--primary);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.detail-section {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.section-header h3 {
    font-size: 1.25rem;
}

.confidence-badge {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
}

.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.data-item label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-value {
    font-size: 1rem;
    color: var(--text-primary);
}

/* Financials Box */
.financials-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    background: var(--bg-main);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}

.financial-item {
    display: flex;
    flex-direction: column;
}

.financial-item .label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.financial-item .value {
    font-size: 1.25rem;
    font-weight: 600;
}

.financial-item.highlight .value {
    color: var(--success);
}

/* Line Items */
.line-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.line-items-table th {
    text-align: left;
    color: var(--text-secondary);
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
}

.line-items-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border);
}

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

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

/* Comments */
.comment-input {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    resize: vertical;
}

.action-buttons-row {
    margin-top: 1rem;
    text-align: right;
}

/* PO-line dropdown label inside invoice detail's PO-search reveal. */
.po-line-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    display: block;
}

/* ===== ALLOCATIONS BLOCK (invoice detail) =====
   Inline cost-split editor inside the data grid. Replaces a 60-line
   inline-style block with semantic classes — same look, but the
   "Edytuj podział" button now uses the canonical btn-sm sizing instead
   of competing inline padding overrides. */
.allocations-block {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.allocations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.allocations-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
}
.allocations-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
}
.allocations-editor {
    background: var(--bg-main);
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-top: 0.5rem;
}
.allocations-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    font-size: 0.85rem;
}
.allocations-table th {
    padding: 4px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    font-weight: 600;
}
.allocations-table th.col-amount,
.allocations-table td.col-amount {
    width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.allocations-table td { padding: 4px; }
.allocations-footer { padding-top: 10px; }
.allocations-total {
    float: right;
    font-weight: 600;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.allocations-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ===== UTILITIES ===== */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner-inline {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.loading-cell {
    text-align: center;
    padding: 3rem !important;
    color: var(--text-secondary);
}

/* ===== MODAL ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    /* High z-index to overlay everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--easing-default);
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    border: 1px solid var(--border);
    /* Modal already has overlay (rgba black 0.6) + backdrop-filter blur
       providing depth — drop-shadow on the card itself is redundant
       and reads as 2015-Material on the new flat palette. */
    transform: translateY(8px);
    transition: transform var(--duration-normal) var(--easing-emphatic);
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.close-modal:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-body {
    margin-bottom: 2rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* Animations */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Split View */
.split-view-container {
    display: flex;
    gap: 1.5rem;
    height: calc(100vh - 140px);
    overflow: hidden;
}

.split-panel {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
    scrollbar-width: thin;
}

.split-panel.left-panel {
    flex: 0 0 50%;
    max-width: 50%;
    padding-bottom: 2rem;
}

.split-panel.right-panel {
    flex: 1;
    background: var(--bg-main);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.pdf-container {
    width: 100%;
    height: 100%;
    flex: 1;
}

@media (max-width: 1024px) {
    .split-view-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    
    .split-panel.left-panel, 
    .split-panel.right-panel {
        flex: auto;
        max-width: 100%;
    }
    
    .split-panel.right-panel {
        height: 600px;
        margin-top: 1rem;
    }
}

/* Removed: duplicate .btn-danger plus dead .btn-success / .btn-info /
   .btn-warning (zero usages in HTML/JS). .btn-danger is now defined once
   alongside .btn-primary / .btn-secondary with the same 32px sizing. */

.btn-whitelist-verify {
    background: rgba(92, 32, 128, 0.1);
    color: var(--primary);
    border-color: rgba(92, 32, 128, 0.3);
}
.btn-whitelist-verify:hover {
    background: rgba(92, 32, 128, 0.2);
}

.card {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* Standard rhythm for a settings/info card: heading → tight description
   → generous gap → action(s). Replaces the ad-hoc inline margin-top /
   margin-bottom soup from settings.html and gives one canonical pattern
   per integration card. */
.card-description {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 52ch;
}
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ===== FILTER BAR =====
   Every control in here — text input, date input, select — MUST have the
   exact same rendered height, otherwise the filter row looks ragged. The
   gotchas: native <input type="date"> picks up the OS font by default
   (font-family: inherit fixes it), and <select> has different line-height
   math than <input> unless we force it explicitly. */
.filter-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
.filter-bar input,
.filter-bar select {
    /* Linear-style filter chips — transparent by default so the row reads
       as a set of outlined toggles rather than a wall of filled pills.
       Fill kicks in on focus (active typing) or hover (affordance), and
       the border tints purple on focus so you always know which control
       owns the keyboard. */
    padding: 0 0.75rem;
    height: 32px;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1;
    transition: var(--transition-fast);
}
.filter-bar input:hover,
.filter-bar select:hover {
    border-color: var(--text-secondary);
}
.filter-bar input:focus,
.filter-bar select:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-card);
}
.filter-bar input[type="date"] { width: 140px; }
.filter-bar input[type="text"] { width: 200px; }
.filter-bar select { min-width: 120px; }

/* Selection action bar */
.selection-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--accent-primary, #5C2080);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
}
.selection-bar .btn-sm { font-size: 0.8rem; }

/* ===== REGISTRY TABLE (cost_registry + rozliczenia) ===== */
/* Wrapper around .registry-table — gives it a card frame and horizontal
   scroll when columns overflow. .nano-table uses .table-container instead,
   which is structurally identical but named differently for historical
   reasons; they could be unified later. */
.registry-table-wrap {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow-x: auto;
    position: relative;
}

/* Registry-specific features layered on top of the shared .nano-table /
   .registry-table base — sticky headers, single-row cell truncation,
   selection state, inline editing. */
.registry-table th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.registry-table td {
    white-space: nowrap;
    cursor: default;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.registry-table tr.row-selected td {
    background: rgba(92, 32, 128, 0.12);
}

/* Inline editing */
.registry-table td.editable { cursor: pointer; }
.registry-table td.editable:hover { background: rgba(92, 32, 128, 0.1); }
.registry-table td.editing {
    padding: 0.15rem 0.3rem;
    background: rgba(92, 32, 128, 0.15);
}
.registry-table td.editing input,
.registry-table td.editing select {
    width: 100%;
    padding: 0.25rem 0.4rem;
    background: var(--bg-main);
    border: 1px solid var(--primary);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-size: 0.82rem;
    outline: none;
    box-shadow: var(--shadow-focus);
}
.cell-saved { animation: cellSave 0.6s ease; }
@keyframes cellSave {
    0% { background: rgba(16, 185, 129, 0.3); }
    100% { background: transparent; }
}
.cell-error { animation: cellError 0.6s ease; }
@keyframes cellError {
    0% { background: rgba(239, 68, 68, 0.3); }
    100% { background: transparent; }
}

/* Column helpers */
.col-lp { width: 35px; min-width: 35px; text-align: center; color: var(--text-muted); }
.col-check input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); }
.col-amount { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== SIDE PANEL ===== */
.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    z-index: 100;
    overflow-y: auto;
    /* Animate transform, not `right` — translating the layer is GPU-cheap
       and doesn't trigger layout. */
    transform: translateX(100%);
    transition: transform var(--duration-normal) var(--easing-emphatic);
    box-shadow: -4px 0 20px var(--shadow);
}
.side-panel.open { transform: translateX(0); }
.side-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 3;
}
.side-panel-header h3 { font-size: 1rem; }
.side-panel-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.4rem;
    padding: 0.25rem;
}
.side-panel-body { padding: 1rem 1.25rem; }
.panel-section { margin-bottom: 1.25rem; }
.panel-section h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
    letter-spacing: 0.05em;
}
.panel-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}
.panel-field label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-right: 0.5rem;
}
.panel-field .field-value {
    font-size: 0.82rem;
    text-align: right;
}
.panel-field input, .panel-field select, .panel-field textarea {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    width: 200px;
}
.panel-field textarea { width: 200px; height: 60px; resize: vertical; }

/* PDF preview in panel */
.pdf-preview {
    width: 100%;
    height: 400px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-main);
}

/* .toolbar is an alias for .header-actions — same intent, same styling.
   Kept as a selector so existing HTML (cost_registry.html uses .toolbar)
   doesn't break, but both render identically. */
.toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Panel overlay */
.panel-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--overlay);
    z-index: 99;
}
.panel-overlay.active { display: block; }

/* Confidence mini badge */
.conf-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-xs);
    font-size: 0.72rem;
    font-weight: 600;
}
.conf-high { background: rgba(16,185,129,0.2); color: #10b981; }
.conf-med { background: rgba(245,158,11,0.2); color: #f59e0b; }
.conf-low { background: rgba(239,68,68,0.2); color: #ef4444; }

/* PO search dropdown (registry) */
.po-search-wrap { position: relative; }
.po-search-dropdown {
    position: absolute;
    top: 100%; left: 0; right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
    z-index: 100;
    display: none;
}
.po-search-dropdown .po-opt {
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}
.po-search-dropdown .po-opt:hover { background: rgba(92, 32, 128,0.15); }

/* Pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.pagination button {
    padding: 0.3rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8rem;
}
.pagination button:disabled { opacity: 0.4; cursor: default; }

/* ===== ROZLICZENIA ===== */
.tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}
.tab-btn {
    padding: 0.6rem 1.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--transition-fast);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Group header rows */
.group-header-row td {
    background: rgba(92, 32, 128, 0.08) !important;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 2px solid var(--primary);
}
.group-header-row:hover td {
    background: rgba(92, 32, 128, 0.14) !important;
}
.group-toggle {
    display: inline-block;
    width: 16px;
    transition: transform 0.2s;
}
.group-toggle.collapsed { transform: rotate(-90deg); }

/* Subtotal rows */
.subtotal-row td {
    background: rgba(16, 185, 129, 0.06) !important;
    font-weight: 600;
    font-size: 0.82rem;
    border-top: 1px solid var(--primary);
}

/* Client summary bar */
.client-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.client-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--text-primary);
}
.client-chip .chip-name { color: var(--text-secondary); }
.client-chip .chip-amount { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Dimmed row — signals "not visible to client" without making the text
   itself unreadable. The previous opacity: 0.4 turned 100%-not-visible
   tables (the common state in /rozliczenia) into a wall of washed-out
   text. Using --text-secondary keeps the row legible while still reading
   as muted vs the active rows. The checkbox in the Widoczne column
   carries the explicit state. */
.row-dimmed td { color: var(--text-secondary); }
.row-dimmed td.col-amount { color: var(--text-secondary); }

/* Toast notification */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    z-index: 200;
    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition-normal);
}
.toast.visible { opacity: 1; transform: translateY(0); }

/* ===== PURCHASE ORDERS ===== */
.profit-positive { color: var(--secondary); }
.profit-negative { color: var(--danger); }

.form-input.line-price,
.form-input.line-qty { width: 100px; }
.form-input.line-curr { width: 80px; }

.sheet-container {
    background: var(--bg-card);
    color: var(--text-primary);
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    font-family: inherit;
}
.sheet-header-banner {
    /* Was a purple→primary-hover gradient with drop-shadow — peacock styling
       that fought the rest of the now-flat detail surface. Switched to a
       subtle accent-tint band: same emphasis, no gloss. */
    background: rgba(92, 32, 128, 0.08);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid rgba(92, 32, 128, 0.25);
    margin-bottom: 2rem;
}
.sheet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.sheet-field { margin-bottom: 0.5rem; }
.sheet-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sheet-value {
    border: 1px solid var(--border);
    padding: 0.75rem;
    background: var(--bg-input);
    color: var(--text-primary);
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
}
.sheet-logo { text-align: right; }
.sheet-logo img { max-height: 60px; filter: brightness(0.9); }

/* Sheet header — title block + WEC logo on the right, with a separating
   underline that signals the start of the body content. */
.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.sheet-header-text { flex: 1; }
.sheet-header-text h1 {
    margin: 0;
    font-size: 1.5rem;       /* slightly down from 1.8rem — title shouldn't overpower the data grid below */
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.025em;
}
.sheet-header-subtitle {
    color: var(--text-secondary);
    margin-top: 0.35rem;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* Action bar inside a sheet — buttons + info pills line up to the right
   with consistent gap and 32px baseline. */
.sheet-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

/* Sheet-table matches the .nano-table / .registry-table contract from
   list pages so PO line items inside a detail view feel like they belong
   to the same product as the lists outside it. */
.sheet-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 2rem;
    font-size: 0.85rem;
    line-height: 1.3;
}
.sheet-table th {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.sheet-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.sheet-table tr:last-child td { border-bottom: none; }
.sheet-footer-row {
    background-color: transparent;
    font-weight: bold;
    color: var(--text-primary);
}
.sheet-disclaimer {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 3rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.lines-table {
    width: 100%;
    margin-top: 1rem;
    border: 1px solid var(--border);
}
.lines-table th,
.lines-table td {
    padding: 0.5rem;
    border: 1px solid var(--border);
}
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
}
.btn-icon:hover { color: var(--text-primary); }

/* Comments section */
.comments-section {
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin: 2rem auto;
    max-width: 1000px;
    box-shadow: 0 4px 6px var(--shadow);
}
.comments-list {
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 1rem;
    border-radius: var(--radius-xs);
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
}
.comment-item {
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
}
.comment-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.comment-content {
    font-size: 1rem;
    color: var(--text-primary);
}

/* ===== USERS ===== */
.permission-group {
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}
.permission-group h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
}
.checkbox-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
}
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.badge-role {
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 0.8rem;
    font-weight: 500;
}
.role-ADMIN {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}
.role-PROJECT_MANAGER {
    background: rgba(6, 182, 212, 0.2);
    color: var(--secondary);
}
.role-ADMINISTRATION {
    background: rgba(92, 32, 128, 0.2);
    color: var(--primary);
}

/* ===== DETAIL PAGE ===== */
.btn-switch-label {
    flex: 1;
    text-align: center;
    padding: 6px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition-fast);
    border: 1px solid transparent;
}
.btn-switch-label:hover { color: var(--text-primary); }
#statusToPay:checked+.btn-switch-label {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
#statusPaid:checked+.btn-switch-label {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

/* PO search container (detail page) */
.dropdown-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 100;
    display: none;
}
.dropdown-results.show { display: block; }
.dropdown-results .dropdown-item {
    /* Reset when dropdown-item is a <button> (accessible keyboard nav). */
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}
.dropdown-results .dropdown-item:hover,
.dropdown-results .dropdown-item:focus-visible {
    background: rgba(92, 32, 128, 0.1);
    outline: none;
}

/* ===== PAYMENTS ===== */
.copy-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 1px 4px;
    margin-left: 0.3rem;
}
.copy-btn:hover {
    border-color: var(--primary);
    color: var(--secondary);
}

/* ===== SUPPLIERS ===== */
.action-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-right: 0.5rem;
    transition: var(--transition-fast);
}
.action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(92, 32, 128, 0.1);
}

/* ===== SETTINGS ===== */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
    /* Cards size to their content, not equal-row stretch — otherwise a
       short card (Konfiguracja ogólna) ends up with a fat empty bottom
       just because the neighbour holds two integration sections. */
    align-items: start;
}
@media (max-width: 1024px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

/* MT940 import row — file input + bank-source select + Importuj button
   all share a 32px baseline (same as .btn-primary) so the trio reads as
   one composed control. File input is special: its wrapper has near-zero
   padding because the visible chrome lives inside ::file-selector-button,
   which we size to fill the wrapper minus a 1px border. */
.integration-box select {
    height: 32px;
    padding: 0 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
}
.integration-box select:hover { border-color: var(--text-secondary); }
.integration-box select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(92, 32, 128, 0.15);
}
.integration-box input[type="file"] {
    height: 32px;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    font-size: 0.85rem;
}
.integration-box input[type="file"]::file-selector-button {
    /* Solid contrast button so "Wybierz plik" doesn't fade into the
       wrapper bg on light mode (where bg-input ≈ bg-hover). */
    height: 30px;
    padding: 0 0.85rem;
    margin: 0 0.75rem 0 0;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1;
}
.integration-box input[type="file"]::file-selector-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border);
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    cursor: pointer;
    user-select: none;
}
.toggle-track {
    width: 40px;
    height: 22px;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    position: relative;
    transition: background 0.3s;
    border: 1px solid var(--border);
}
.toggle-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary);
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: transform 0.3s;
}
[data-theme="dark"] .toggle-thumb {
    transform: translateX(18px);
}
.theme-icon-light, .theme-icon-dark {
    font-size: 1rem;
    line-height: 1;
}

/* ===== COST REGISTRY — ROW / CELL VALIDATION =====
   Incomplete rows used to flag with a 3px orange left-border — classic
   AI-UI tell (thick colored side-tab). Replaced with a subtle
   warning-tinted row bg: still immediately readable as "needs attention",
   doesn't scream at the rest of the grid. Per-cell missing hint remains
   the authoritative signal via .cell-missing below. */
.row-incomplete td {
    background: rgba(245, 158, 11, 0.04);
}
.cell-missing {
    background: rgba(245, 158, 11, 0.08);
    position: relative;
}
.cell-missing::after {
    content: '—';
    color: var(--warning);
    opacity: 0.7;
    font-size: 0.75rem;
}
[data-theme="light"] .cell-missing {
    background: rgba(245, 158, 11, 0.10);
}

/* ===== ONBOARDING TOUR ===== */

/* Spotlight cutout with pulsing border */
.tour-spotlight {
    position: fixed; z-index: 99991; border-radius: var(--radius-lg);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.7);
    pointer-events: none; transition: var(--transition-normal);
}
.tour-spotlight::after {
    content: ''; position: absolute; inset: -4px; border-radius: var(--radius-lg);
    border: 2px solid rgba(92, 32, 128,0.6);
    animation: tour-pulse 1.5s ease-in-out infinite;
}
@keyframes tour-pulse {
    0%, 100% { border-color: rgba(92, 32, 128,0.6); box-shadow: 0 0 0 0 rgba(92, 32, 128,0.2); }
    50% { border-color: rgba(6,182,212,0.8); box-shadow: 0 0 15px 3px rgba(6,182,212,0.15); }
}

/* Popover tooltip */
.tour-popover {
    position: fixed; z-index: 99992;
    background: linear-gradient(135deg, #1e293b 0%, #1a2340 100%);
    border: 1px solid rgba(92, 32, 128,0.4);
    border-radius: var(--radius-xl); padding: 24px 28px 20px;
    max-width: 380px; min-width: 280px;
    box-shadow: 0 0 40px rgba(92, 32, 128,0.2), 0 20px 60px rgba(0,0,0,0.5);
    transition: var(--transition-normal);
}
.tour-popover-arrow {
    position: absolute; width: 12px; height: 12px;
    background: #1e293b; border: 1px solid rgba(92, 32, 128,0.4);
    transform: rotate(45deg);
}
.tour-popover-arrow.top    { bottom: -7px; left: 50%; margin-left: -6px; border-top: none; border-left: none; }
.tour-popover-arrow.bottom { top: -7px; left: 50%; margin-left: -6px; border-bottom: none; border-right: none; }
.tour-popover-arrow.left   { right: -7px; top: 50%; margin-top: -6px; border-top: none; border-right: none; }
.tour-popover-arrow.right  { left: -7px; top: 50%; margin-top: -6px; border-bottom: none; border-left: none; }

.tour-popover h3 { color: #fff; font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.tour-popover p  { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; margin: 0 0 16px; }

.tour-popover-footer   { display: flex; align-items: center; justify-content: space-between; }
.tour-popover-progress { color: #475569; font-size: 0.75rem; font-weight: 600; }
.tour-popover-btns     { display: flex; gap: 8px; }

.tour-btn-next {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff; border: none; padding: 8px 20px; border-radius: var(--radius-md);
    font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: var(--transition-fast);
}
.tour-btn-next:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(92, 32, 128,0.4); }

.tour-btn-prev {
    background: rgba(255,255,255,0.06); color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 16px; border-radius: var(--radius-md); font-weight: 500; font-size: 0.85rem;
    cursor: pointer; transition: var(--transition-fast);
}
.tour-btn-prev:hover { background: rgba(255,255,255,0.1); }

.tour-btn-close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: none; color: #475569; cursor: pointer;
    font-size: 1.2rem; line-height: 1; padding: 4px;
}
.tour-btn-close:hover { color: #fff; }

/* Welcome overlay */
#tour-welcome-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.8); z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); animation: tour-fade-in 0.3s ease;
}
@keyframes tour-fade-in { from { opacity: 0; } to { opacity: 1; } }

#tour-welcome-card {
    background: linear-gradient(135deg, #1e293b 0%, #1a2340 100%);
    border: 1px solid rgba(92, 32, 128,0.3); border-radius: var(--radius-xl);
    padding: 48px; max-width: 480px; text-align: center;
    box-shadow: 0 0 60px rgba(92, 32, 128,0.15), 0 25px 80px rgba(0,0,0,0.5);
    animation: tour-card-in 0.4s ease;
}
@keyframes tour-card-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#tour-welcome-card h2 { font-size: 1.75rem; font-weight: 800; color: #fff; margin: 0 0 12px; }
#tour-welcome-card p  { color: #94a3b8; font-size: 1rem; line-height: 1.6; margin: 0 0 24px; }
#tour-welcome-card .tour-step-count { color: #475569; font-size: 0.8rem; margin-bottom: 24px; }

#tour-start-btn {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff; border: none; padding: 14px 40px; border-radius: var(--radius-lg);
    font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition-fast);
}
#tour-start-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(92, 32, 128,0.4); }

#tour-skip-btn {
    background: none; border: none; color: #475569;
    font-size: 0.85rem; cursor: pointer; margin-top: 16px; padding: 8px; transition: color 0.2s;
}
#tour-skip-btn:hover { color: #94a3b8; }

/* "?" Help button — lives in the sidebar footer utility row next to the
   theme toggle. 32px circle matches the button contract. */
.tour-help-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); font-weight: 700; font-size: 0.9rem;
    cursor: pointer; transition: var(--transition-fast); display: inline-flex;
    align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tour-help-btn:hover {
    background: var(--primary); color: #fff; border-color: var(--primary);
}

/* Sidebar footer utility row — theme toggle + help button on one line so
   they don't stack and eat sidebar height. Wrapper is injected by tour.js. */
.sidebar-utility-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
/* Inside the utility row, kill theme-toggle's own bottom margin — the
   row's margin owns vertical rhythm now. */
.sidebar-utility-row .theme-toggle {
    margin-bottom: 0;
}

/* Light theme overrides */
[data-theme="light"] .tour-popover {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border-color: rgba(92, 32, 128,0.25);
    box-shadow: 0 0 40px rgba(92, 32, 128,0.1), 0 20px 60px rgba(0,0,0,0.15);
}
[data-theme="light"] .tour-popover h3 { color: #111827; }
[data-theme="light"] .tour-popover p  { color: #6b7280; }
[data-theme="light"] .tour-popover-arrow { background: #fff; border-color: rgba(92, 32, 128,0.25); }
[data-theme="light"] .tour-btn-prev { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
[data-theme="light"] #tour-welcome-card {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border-color: rgba(92, 32, 128,0.2);
}
[data-theme="light"] #tour-welcome-card h2 { color: #111827; }
[data-theme="light"] #tour-welcome-card p  { color: #6b7280; }

/* ===== TRANSFER PICKER MODAL =====
   Replaces a native prompt() that asked users to type a number 1-4 to
   pick which bank's Elixir file to download. Now each bank is a
   clickable card with count + total; whole-row hit target. */
.transfer-picker-intro {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.transfer-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.transfer-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
}
.transfer-option:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
}
.transfer-option-bank {
    font-weight: 600;
    font-size: 0.95rem;
}
.transfer-option-summary {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.transfer-option--all {
    background: rgba(92, 32, 128, 0.08);
    border-color: rgba(92, 32, 128, 0.3);
}
.transfer-option--all:hover {
    background: rgba(92, 32, 128, 0.15);
}

/* ===== NOTICE BANNERS =====
   In-page callouts: warnings ("Wymagana faktura zaliczkowa"), archived
   states ("Zlecenie zakończone"), success confirmations. Replaces
   ~6 inline-styled banner blocks across PO detail and elsewhere. The
   modifier picks the colour family; the rest is shared. */
.notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.notice-icon { font-size: 1.5rem; flex-shrink: 0; }
.notice-body { flex: 1; }
.notice-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.15rem; }
.notice-text  { color: var(--text-secondary); font-size: 0.875rem; }

.notice--warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.4);
}
.notice--warning .notice-title { color: var(--warning); }

.notice--archived {
    background: rgba(100, 116, 139, 0.08);
    border-color: rgba(100, 116, 139, 0.4);
}

.notice--success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.4);
}
.notice--success .notice-title { color: var(--success); }

/* ===== INFO PILLS =====
   Small inline status indicators that sit in action bars next to buttons:
   "✓ Zaakceptowane przez klienta", "Subiekt: 12345", "⏳ Oczekuje na
   akceptację". Same shape as a chip; semantic colour via modifier. */
.info-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.75rem;
    height: 32px;        /* matches button row baseline */
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.info-pill--success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.3);
}
.info-pill--warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border-color: rgba(245, 158, 11, 0.3);
}
.info-pill--subiekt {
    background: rgba(0, 120, 212, 0.1);
    color: #4ba5e8;
    border-color: rgba(0, 120, 212, 0.3);
    font-weight: 600;
}
.info-pill--muted {
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-style: italic;
}

/* Subiekt-specific button — keeps the brand blue when actioning Subiekt
   export, so the action is recognisable to users who know the integration. */
.btn-subiekt {
    background: #0078d4;
    border-color: #0078d4;
    color: #fff;
}
.btn-subiekt:hover { background: #006cbe; border-color: #006cbe; }

/* Payment-status switch (used in invoice detail). Two radio "buttons"
   inside a tinted pill container, brand colour fills the active one. */
.payment-switch {
    display: flex;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: 4px;
    border: 1px solid var(--border);
}

/* ===== INTEGRATION CARDS (used in /settings for Saldeo, Bank, etc.) ===== */
.integration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.integration-status {
    font-size: 0.75rem;
    font-weight: 500;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
    line-height: 1;
    white-space: nowrap;
}
.integration-status.is-success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.3);
}
.integration-status.is-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.28);
}
/* Inline indicator that replaces the "Połączono" fake button next to a
   Rozłącz action — same visual language as .integration-status but in flow
   with the action button instead of pinned to the card header. */
.integration-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 32px;
    padding: 0 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.28);
    line-height: 1;
}
.integration-body {
    margin-top: var(--space-lg);
}
.integration-description {
    font-size: 0.875rem;
    color: var(--text-dim);
    margin-bottom: var(--space-lg);
}
/* Stats inside an integration card. Removed bg + border-radius — those
   were creating a cardocalypse pattern (mini-cards nested inside the
   parent card), which Impeccable explicitly flags as AI-tell. The
   numbers now sit flat in a row, separated by generous gap, with the
   labels acting as their own visual delimiters. */
.integration-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.integration-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: left;
    padding: 0;
    background: transparent;
}
.integration-stat-value {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.integration-stat-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.integration-box {
    padding: var(--space-md);
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-lg);
}
.integration-box--inline {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.integration-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.integration-result {
    margin-top: var(--space-md);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

/* ===== ACCESSIBILITY: reduced motion =====
   Users with vestibular disorders or who simply find motion distracting
   can disable it OS-wide. Strip every transition and animation down to
   near-zero so functionality survives but movement disappears. This is
   a hard requirement, not a nice-to-have — Impeccable / WCAG 2.3.3. */
@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;
    }
}