/* ============================================================
   style.css – Fakturace
   Bez externích fontů (Content Security Policy)
   ============================================================ */

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

/* Fieldset reset – prohlížeče mají různé výchozí okraje/border */
fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Legend float trick: zajistí, že legend nezlomí layout při float */
legend {
    padding: 0;
    float: left;
    width: 100%;
}

legend + * {
    clear: both;
}

/* ============================================================
   CSS proměnné
   ============================================================ */
:root {
    /* Pozadí */
    --bg-page:   #f5f6f8;
    --bg-card:   #ffffff;
    --bg-subtle: #fafbfc;

    /* Ohraničení */
    --border:        #e4e7eb;
    --border-strong: #cbd2d9;

    /* Text */
    --text-primary:   #1f2933;
    --text-secondary: #52606d;
    --text-muted:     #7b8794;

    /* Akcent (decentní modrošedá) */
    --accent:       #2c5282;
    --accent-hover: #2a4365;
    --accent-light: #ebf4ff;

    /* Stavy */
    --danger:  #c53030;
    --success: #2f855a;
    --info:    #0369a1;

    /* Odlišení dodavatel/odběratel */
    --supplier-accent: #2c5282;
    --customer-accent: #6b46c1;

    /* Stíny */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);

    /* Poloměry */
    --radius:    6px;
    --radius-lg: 10px;

    /* Font */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

    /* === Aliasy pro zpětnou kompatibilitu (login.php používá tyto názvy) === */
    --color-bg:       var(--bg-page);
    --color-surface:  var(--bg-card);
    --color-primary:  var(--accent);
    --color-primary-h: var(--accent-hover);
    --color-danger:   var(--danger);
    --color-success:  var(--success);
    --color-info:     var(--info);
    --color-text:     var(--text-primary);
    --color-muted:    var(--text-muted);
    --color-border:   var(--border);
    --color-error-bg: #fef2f2;
    --color-info-bg:  #eff6ff;
    --shadow-old:     var(--shadow);
    --font:           var(--font-sans);
    --radius-old:     var(--radius);
}

/* ============================================================
   Pomocné třídy
   ============================================================ */

/* Skryté prvky – JavaScript přidává/odebírá místo style="display:none" */
.hidden {
    display: none !important;
}

/* Odpočet session – zbývá méně než 2 minuty */
.countdown--warning {
    color: #d97706;
}

/* Odpočet session – zbývá méně než 30 sekund */
.countdown--danger {
    color: #dc2626;
}

/* ============================================================
   Základní tělo
   ============================================================ */
body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-page);
    min-height: 100vh;
}

/* ============================================================
   PŘIHLAŠOVACÍ STRÁNKA (login.php – zachováno beze změny)
   ============================================================ */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    min-height: 100vh;
}

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

.login-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2.5rem 2rem;
}

.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.25rem;
    color: var(--accent);
}

.login-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    font-size: 0.9rem;
}

/* ============================================================
   FORMULÁŘOVÁ POLE – starý systém (.form-group)
   Používá login.php – zachovat funkční
   ============================================================ */
.form-group {
    margin-bottom: 1.1rem;
}

.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

.form-input {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    line-height: 1.4;
}

.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.form-input.input-error {
    border-color: var(--danger);
    background: #fff8f8;
}

/* ============================================================
   FORMULÁŘOVÁ POLE – nový systém (.field)
   Používá fakturační formulář v app.php
   ============================================================ */
.field {
    margin-bottom: 0.5rem;
}

.field:last-child {
    margin-bottom: 0;
}

.field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    line-height: 1.4;
    box-sizing: border-box;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.field input:hover:not(:focus):not([readonly]):not(:disabled),
.field textarea:hover:not(:focus):not([readonly]):not(:disabled),
.field select:hover:not(:focus):not(:disabled) {
    border-color: var(--text-muted);
}

.field input.input-error,
.field textarea.input-error {
    border-color: var(--danger);
    background: #fff8f8;
}

.field textarea {
    resize: vertical;
    min-height: 52px;
}

.field select {
    cursor: pointer;
}

/* Poznámka v labelu: "(volitelné)" */
.label-note {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* Chybová hláška pod polem (PHP i JS) */
.field-error {
    display: block;
    font-size: 0.78rem;
    color: var(--danger);
    margin-top: 0.25rem;
}

/* IBAN automaticky vypočítaný z čísla účtu – krátkodobý zelený záblesk */
.iban--auto-filled {
    background-color: #d4edda !important;
    transition: background-color 0.5s ease;
}

/* Stav pole s chybou – přidává JavaScript přes showFieldError() */
.field--error input,
.field--error textarea,
.field--error select {
    border-color: var(--danger) !important;
    background: #fff8f8 !important;
}

/* Obecná chybová hláška nad tlačítky – zobrazuje JavaScript */
.form-errors {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    color: var(--danger);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

/* IČO + tlačítko ARES vedle sebe */
.field-with-button {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.field-with-button input {
    flex: 1;
    min-width: 0;
    /* Rozměry z .field input se zdědí přes descendant selektor */
}

/* ============================================================
   TLAČÍTKA
   ============================================================ */

/* Sdílená základní sada vlastností */
.btn-primary,
.btn-secondary,
.btn.btn-primary,
.btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-family: var(--font-sans);
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* Primární (akcentová) */
.btn-primary,
.btn.btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
    background: var(--accent-hover);
}

/* Sekundární (outline) */
.btn-secondary,
.btn.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
}

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

/* Disabled state */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto; /* zachovat tooltip u disabled */
}

/* Modifikátor velikosti */
.btn-small {
    padding: 0.35rem 0.8rem !important;
    font-size: 0.83rem !important;
}

/* Plná šířka (login.php) */
.btn.btn-full {
    width: 100%;
    margin-top: 0.5rem;
}

/* Legacy .btn – login.php používá jen třídu .btn */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.1rem;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    background: var(--accent);
    color: white;
    transition: background 0.15s;
}

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

/* Tlačítko ARES (malé, vedle IČO) */
.btn-ares {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 0.5rem 0.65rem !important;
    white-space: nowrap;
}

/* ARES loading stav – tlačítko je deaktivované a čeká */
.ares-button--loading {
    opacity: 0.7;
    cursor: wait;
}

/* Inline feedback pod IČO polem (úspěch / chyba / prázdno) */
.ares-feedback {
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    min-height: 1rem;       /* zabránění skákání layoutu při zobrazení/skrytí */
}

.ares-feedback--success {
    color: var(--success);
    font-weight: 500;
}

.ares-feedback--error {
    color: var(--danger);
}

/* ============================================================
   UPOZORNĚNÍ (alerts)
   ============================================================ */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    border-left: 3px solid;
}

.alert-error {
    background: #fef2f2;
    border-color: var(--danger);
    color: var(--danger);
}

.alert-info {
    background: #eff6ff;
    border-color: var(--info);
    color: var(--info);
}

.error-list {
    margin: 0.3rem 0 0 1.25rem;
    padding: 0;
}

.error-list li {
    margin-top: 0.2rem;
}

.blocked-message {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* ============================================================
   ZÁHLAVÍ APLIKACE
   ============================================================ */
.app-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.65rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.01em;
}

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

.session-info {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============================================================
   HLAVNÍ KONTEJNER
   ============================================================ */
.app-container {
    max-width: 1100px;
    margin: 1.75rem auto 3rem;
    padding: 0 1.5rem;
    width: 100%;
}

/* ============================================================
   BÍLÁ KARTA FAKTURY
   ============================================================ */
.invoice-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    padding: 2.5rem;
}

/* ============================================================
   HLAVIČKA FAKTURY (FAKTURA + číslo)
   ============================================================ */
.invoice-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.75rem;
    border-bottom: 2px solid var(--border);
    margin-bottom: 2rem;
}

.invoice-title-text {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1;
}

.invoice-number-block {
    text-align: right;
    min-width: 210px;
}

.invoice-number-block label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted) !important;
    text-align: right;
}

/* Monospace, velké číslo faktury */
.invoice-number-input {
    font-size: 1.5rem;
    font-family: "SF Mono", Monaco, "Cascadia Code", "Fira Mono", Consolas, monospace;
    font-weight: 600;
    text-align: right;
    letter-spacing: 0.02em;
    width: 100%;
    padding: 0.3rem 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.3;
}

.invoice-number-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

/* ============================================================
   NADPISY SEKCÍ (Platební údaje, Položky, …)
   ============================================================ */
.section-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* ============================================================
   DODAVATEL / ODBĚRATEL
   ============================================================ */
.parties-section {
    margin-bottom: 2rem;
}

.parties-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Fieldset se chová jako blok s levým proužkem */
.party-block {
    padding-left: 1.25rem;
    display: block;
}

.party-block--supplier {
    border-left: 3px solid var(--supplier-accent);
}

.party-block--customer {
    border-left: 3px solid var(--customer-accent);
}

/* Legend – popisek DODAVATEL / ODBĚRATEL */
.party-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.party-label--supplier {
    color: var(--supplier-accent);
}

.party-label--customer {
    color: var(--customer-accent);
}

/* ============================================================
   PLATEBNÍ ÚDAJE
   ============================================================ */
.payment-section {
    margin-bottom: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}

.payment-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.payment-row .field {
    margin-bottom: 0;
}

/* ============================================================
   POLOŽKY FAKTURY
   ============================================================ */
.items-section {
    margin-bottom: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}

/* Horizontální scroll na malých obrazovkách */
.items-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.75rem;
}

.items-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 580px;
}

/* Hlavička tabulky */
.items-table thead tr {
    background: var(--bg-subtle);
}

.items-table thead th {
    padding: 0.6rem 0.5rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.items-table thead th:last-child {
    text-align: right;
}

/* Tělo tabulky */
.items-table tbody td {
    padding: 0.3rem 0.25rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

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

/* Inputy a selecty přímo v buňkách tabulky (ne uvnitř .field) */
.items-table td input,
.items-table td select {
    width: 100%;
    padding: 0.25rem 0.375rem;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    line-height: 1.4;
    box-sizing: border-box;
}

.items-table td input:hover,
.items-table td select:hover {
    border-color: var(--border-strong);
}

.items-table td input:focus,
.items-table td select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
}

/* Šířky sloupců */
.col-desc       { width: 35%; }
.col-qty        { width: 9%;  }
.col-unit       { width: 11%; }
.col-price      { width: 17%; }
.col-total      { width: 16%; text-align: right; }
.col-total-cell { text-align: right; font-weight: 600; color: var(--text-secondary); font-size: 0.8125rem; }
.col-action     { width: 3%;  text-align: center; }
.col-action-cell { text-align: center; padding: 0.15rem 0.15rem !important; }

/* Číselná pole – zarovnat vpravo */
.input-num {
    text-align: right;
}

/* Jednotka (kratší pole) */
.input-unit {
    text-align: left;
}

/* Tlačítko smazat řádek (×) */
.btn-remove-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 400;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-remove-row:hover:not(:disabled) {
    background: #fff1f1;
    color: var(--danger);
    border-color: #fca5a5;
}

.btn-remove-row:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Tlačítko přidat řádek */
.items-actions {
    margin-top: 0.75rem;
}

/* ============================================================
   CELKOVÁ CENA
   ============================================================ */
.total-box {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    background: var(--bg-subtle);
    border-radius: var(--radius);
    margin-top: 1rem;
    border: 1px solid var(--border);
}

.total-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Velké číslo celkové ceny – JS ho aktualizuje v Části 3 */
.total-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: "SF Mono", Monaco, "Cascadia Code", "Fira Mono", Consolas, monospace;
}

/* ============================================================
   POZNÁMKA + DPH
   ============================================================ */
.note-section {
    margin-bottom: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}

.dph-notice {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ============================================================
   AKČNÍ TLAČÍTKA (dolní lišta)
   ============================================================ */
.invoice-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* ============================================================
   DEBUG PANEL
   ============================================================ */
.debug-post {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

.debug-post summary {
    cursor: pointer;
    font-weight: 600;
    color: #92400e;
    user-select: none;
}

.debug-post pre {
    margin-top: 0.75rem;
    overflow-x: auto;
    font-size: 0.78rem;
    background: white;
    padding: 0.875rem;
    border-radius: 4px;
    border: 1px solid #fde68a;
    color: var(--text-primary);
    line-height: 1.6;
}

/* ============================================================
   RESPONZIVITA
   ============================================================ */
@media (max-width: 768px) {
    /* Dva sloupce → jeden */
    .parties-grid {
        grid-template-columns: 1fr;
    }

    /* Platební údaje ve sloupci */
    .payment-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .payment-row .field {
        margin-bottom: 1rem;
    }

    .payment-row .field:last-child {
        margin-bottom: 0;
    }

    /* Hlavička faktury – pod sebou */
    .invoice-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .invoice-number-block {
        width: 100%;
        text-align: left;
        min-width: 0;
    }

    .invoice-number-block label {
        text-align: left !important;
    }

    .invoice-number-input {
        text-align: left;
    }

    /* Tlačítka ve sloupci, celá šířka */
    .invoice-actions {
        flex-direction: column-reverse;
    }

    .invoice-actions .btn-primary,
    .invoice-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Total box */
    .total-box {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
        padding: 0.875rem 1rem;
    }
}

@media (max-width: 480px) {
    .invoice-card {
        padding: 1.25rem 1rem;
    }

    .invoice-title-text {
        font-size: 2rem;
    }

    .app-container {
        padding: 0 0.75rem;
        margin-top: 1rem;
    }

    .header-inner {
        padding: 0.6rem 1rem;
    }

    .session-info {
        display: none;
    }

    .login-card {
        padding: 1.75rem 1.25rem;
    }
}