/* VDP – základní stylesheet. Při změně přejmenovat dle vzoru default-RRRRMMDDx.css
   a opravit referenci v src/layout.php (konstanta VDP_CSS). */

* { box-sizing: border-box; }

body
{
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1d2733;
    background: #f2f4f7;
}

h1 { font-size: 1.5rem; margin: 1.2rem 0 .8rem; }
h2 { font-size: 1.15rem; margin: 1.2rem 0 .6rem; }

a { color: #0b5cad; }

/* --- horní lišta --- */

.topbar
{
    background: #14324f;
    color: #fff;
}

.topbar-inner
{
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 3rem;
}

.brand
{
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: 1.1rem;
}

.brand-logo
{
    width: 1.9rem;
    height: 1.9rem;
    display: block;
    border-radius: .35rem;
}

.topbar nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }

.topbar nav a,
.topbar-user a
{
    color: #cfe0f1;
    text-decoration: none;
    padding: .75rem .6rem;
    display: inline-block;
}

.topbar nav a:hover,
.topbar-user a:hover { color: #fff; }

.topbar nav a.active
{
    color: #fff;
    box-shadow: inset 0 -3px 0 #4da3ff;
}

.topbar-user { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.topbar-user span { color: #8fb0cf; }

.topbar-user .version
{
    font-size: .78rem;
    color: #6d92b5;
    border: 1px solid #2d5170;
    border-radius: 1rem;
    padding: .05rem .5rem;
}

/* --- obsah --- */

.content
{
    max-width: 120rem;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.panel
{
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    max-width: 44rem;
}

.hint { color: #5c6b7c; margin: .25rem 0 .75rem; }
.label { display: block; font-weight: 600; margin-bottom: .3rem; }
.warn { color: #8c1d26; font-weight: 600; }

/* --- formuláře --- */

.form-row { margin: .75rem 0; }

.form-row label { display: block; font-weight: 600; margin-bottom: .25rem; }
.form-row label.check { font-weight: 400; display: inline-flex; gap: .4rem; align-items: center; margin-right: 1rem; }

input[type=text], input[type=password], input[type=email], input[type=number], select, textarea
{
    width: 100%;
    max-width: 28rem;
    padding: .45rem .6rem;
    border: 1px solid #b8c2ce;
    border-radius: .3rem;
    font: inherit;
    background: #fff;
}

textarea { max-width: none; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

.btn
{
    display: inline-block;
    padding: .5rem 1.1rem;
    border: 1px solid #b8c2ce;
    border-radius: .3rem;
    background: #fff;
    color: #1d2733;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { background: #eef2f6; }

.btn.primary
{
    background: #0b5cad;
    border-color: #0b5cad;
    color: #fff;
}

.btn.primary:hover { background: #0a4f94; }

.btn.danger { color: #a1252f; border-color: #cf989c; }
.btn.danger:hover { background: #fbeeee; }

.btn.small { padding: .2rem .6rem; font-size: .85rem; }

.actions { display: flex; gap: .6rem; margin: 1rem 0; flex-wrap: wrap; }

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

/* --- hlášky --- */

.alert
{
    padding: .6rem .9rem;
    border-radius: .4rem;
    margin: .8rem 0;
    background: #fff8e1;
    border: 1px solid #e5d28a;
}

.alert.error { background: #fdecec; border-color: #e3a6a6; color: #8c1d26; }
.alert.success { background: #e8f6e9; border-color: #9fd3a5; color: #1d5c26; }

/* --- výběr výstupu --- */

.output-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .75rem;
    margin: .5rem 0 1rem;
}

.output-card
{
    display: block;
    background: #fff;
    border: 2px solid #d8dee6;
    border-radius: .5rem;
    padding: .8rem .9rem;
    cursor: pointer;
}

.output-card:hover { border-color: #9db8d2; }

.output-card:has(input:checked)
{
    border-color: #0b5cad;
    background: #f0f7ff;
}

.output-card input { position: absolute; opacity: 0; }

.output-title { display: block; font-weight: 600; margin-bottom: .25rem; }
.output-desc { display: block; color: #5c6b7c; font-size: .88rem; }

/* --- upload --- */

.file-drop
{
    display: block;
    border: 2px dashed #9fb0c2;
    border-radius: .5rem;
    background: #fff;
    padding: 1.6rem 1rem;
    text-align: center;
    color: #43566b;
    cursor: pointer;
}

.file-drop.dragover { border-color: #0b5cad; background: #f0f7ff; }
.file-drop input { display: none; }

/* --- zpracování --- */

.spinner
{
    width: 2.6rem;
    height: 2.6rem;
    margin: 2.5rem auto .8rem;
    border: 4px solid #cfdae6;
    border-top-color: #0b5cad;
    border-radius: 50%;
    animation: vdp-spin .9s linear infinite;
}

#processing-text { text-align: center; color: #43566b; }

#section-processing .hint { text-align: center; }
#section-processing .actions { justify-content: center; }

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

/* --- fronta zpracování --- */

#queue-panel { margin-top: 2.5rem; }

.queue-own td { background: #f0f7ff; }

.queue-updated { font-size: .85rem; margin-bottom: .6rem; }

/* Popis průběhu je jediný sloupec, který se smí zalomit — bývá dlouhý */
.listing td.queue-progress
{
    white-space: normal;
    min-width: 15rem;
    color: #43566b;
}

/* --- kontrola textu --- */

#review-textarea { width: 100%; }

.review-toolbar { margin-bottom: .4rem; }

.md-preview
{
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: .4rem;
    padding: 1rem 1.25rem;
    max-height: 30rem;
    overflow: auto;
}

.md-preview table { border-collapse: collapse; }
.md-preview td, .md-preview th { border: 1px solid #b8c2ce; padding: .25rem .55rem; }

/* Grafika vyříznutá z dokumentu (typ výstupu 7) */
.md-preview img
{
    display: block;
    max-width: 100%;
    height: auto;
    margin: .5rem 0;
    border: 1px solid #d8dee6;
    border-radius: .25rem;
}

/* --- verifikace faktury --- */

.split
{
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(24rem, 1.2fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 60rem)
{
    .split { grid-template-columns: 1fr; }
}

.pages
{
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: .5rem;
    padding: .6rem;
    max-height: 75vh;
    overflow: auto;
}

.pages img
{
    display: block;
    width: 100%;
    margin-bottom: .6rem;
    border: 1px solid #d8dee6;
}

.invoice-form
{
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: .5rem;
    padding: .9rem 1.1rem;
}

.invoice-form fieldset
{
    border: 1px solid #d8dee6;
    border-radius: .4rem;
    margin: 0 0 .9rem;
    padding: .5rem .8rem .7rem;
}

.invoice-form legend { font-weight: 600; padding: 0 .3rem; }

.field-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: .5rem .8rem;
}

.field-grid label { display: block; font-size: .8rem; font-weight: 600; color: #43566b; }
.field-grid input { width: 100%; max-width: none; padding: .3rem .45rem; }

/* --- tabulka položek --- */

.items-table { width: 100%; border-collapse: collapse; font-size: .88rem; }

.items-table th, .items-table td { border: 1px solid #d8dee6; padding: .25rem .35rem; }
.items-table th { background: #eef2f6; font-weight: 600; text-align: left; }
.items-table input { width: 100%; max-width: none; border: none; padding: .25rem .3rem; background: transparent; }
.items-table input:focus { outline: 2px solid #7fb3e6; background: #fff; }
.items-table .num { width: 6.5rem; }
.items-table .del { width: 2rem; text-align: center; }

/* --- výpisy --- */

.table-wrap { overflow-x: auto; }

.listing
{
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: .9rem;
}

.listing th, .listing td
{
    border: 1px solid #d8dee6;
    padding: .4rem .6rem;
    text-align: left;
    white-space: nowrap;
}

.listing th { background: #eef2f6; }

.badge
{
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 1rem;
    font-size: .8rem;
    background: #e2e8ef;
}

.badge-approved { background: #d9f0dc; color: #1d5c26; }
.badge-awaiting_review { background: #fff3c9; color: #705c0d; }
.badge-processing { background: #dbeafd; color: #0b4d8f; }
.badge-failed { background: #fadcdc; color: #8c1d26; }
.badge-cancelled { background: #e6e6e6; color: #555; }
.badge-preparing { background: #e2e8ef; color: #43566b; }
.badge-queued { background: #e9e3fa; color: #4b3a8f; }

details.file-list summary
{
    cursor: pointer;
    color: #0b5cad;
}

details.file-list ul
{
    list-style: none;
    margin: .3rem 0 0;
    padding: 0;
}

details.file-list li { line-height: 1.5; }

.file-size
{
    color: #6b7683;
    font-size: .8rem;
    margin-left: .35rem;
}

.tabs a
{
    display: inline-block;
    padding: .3rem .9rem;
    border: 1px solid #b8c2ce;
    border-radius: 1rem;
    margin-right: .4rem;
    text-decoration: none;
}

.tabs a.active { background: #0b5cad; border-color: #0b5cad; color: #fff; }

/* --- login --- */

.login-box
{
    max-width: 22rem;
    margin: 4rem auto;
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: .5rem;
    padding: 1.5rem 1.75rem 1.75rem;
}

.login-box h1 { margin-top: 0; font-size: 1.25rem; }
.login-box input { max-width: none; }
.login-box .btn { width: 100%; margin-top: .5rem; }

/* --- API klíče (administrace) --- */

code
{
    font-family: ui-monospace, Consolas, monospace;
    font-size: .9em;
    background: #eef2f6;
    border-radius: .2rem;
    padding: .05rem .3rem;
}

.api-key
{
    display: block;
    margin: .5rem 0;
    padding: .5rem .65rem;
    background: #fff;
    border: 1px solid #9fd3a5;
    border-radius: .3rem;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .95rem;
    color: #1d3040;
    word-break: break-all;
    user-select: all;
}