/* ══════════════════════════════════════════════════════
   TwinTech – administrácia
   ══════════════════════════════════════════════════════ */

:root {
    --red: #C41230;
    --red-2: #E22243;
    --steel: #5A6472;
    --dark: #0d1017;
    --dark-2: #131824;
    --line-d: rgba(255, 255, 255, .09);
    --bgl: #f2f4f7;
    --card: #ffffff;
    --line-l: #e3e7ee;
    --txt: #1b212c;
    --mut: #68707e;
    --ok: #1d9e58;
    --grad: linear-gradient(135deg, #E22243, #C41230);
}

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

body.adm {
    font-family: "Inter", system-ui, sans-serif;
    background: var(--bgl);
    color: var(--txt);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { max-width: 100%; }

.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Layout ───────────────────────────────────────────── */
.adm__layout {
    display: grid; grid-template-columns: 250px 1fr; min-height: 100vh;
    /* tmavý pás prvého stĺpca po celú výšku obsahu – sidebar samotný má len 100vh */
    background: linear-gradient(90deg, var(--dark) 0, var(--dark) 250px, var(--bgl) 250px);
}

.adm__side {
    background: var(--dark); color: #dfe5ee;
    display: flex; flex-direction: column;
    padding: 22px 16px; position: sticky; top: 0; height: 100vh;
    overflow-y: auto; overscroll-behavior: contain;
}

.adm__brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; border-bottom: 1px solid var(--line-d); margin-bottom: 18px; }
.adm__brand img { height: 34px; }
.adm__brand span { font-size: 11px; font-weight: 800; letter-spacing: .22em; color: var(--red-2); }

.adm__nav { display: grid; gap: 5px; }
.adm__nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; color: #aab4c2;
    transition: background .2s ease, color .2s ease;
}
.adm__nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.adm__nav a.is-active { background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(196, 18, 48, .35); }

.pill { margin-left: auto; background: var(--red-2); color: #fff; font-size: 11px; font-weight: 800; min-width: 21px; height: 21px; border-radius: 999px; display: grid; place-items: center; padding: 0 6px; }
.adm__nav a.is-active .pill { background: rgba(255, 255, 255, .25); }

.adm__side-bottom { margin-top: auto; display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line-d); }
.adm__side-bottom a { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; color: #8c96a5; }
.adm__side-bottom a:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.adm__main { padding: 26px 34px 60px; min-width: 0; }

.adm__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.adm__top h1 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.adm__user { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--mut); background: var(--card); border: 1px solid var(--line-l); padding: 8px 14px; border-radius: 999px; }

/* ── Komponenty ───────────────────────────────────────── */
.alert { padding: 13px 18px; border-radius: 11px; font-weight: 600; font-size: 14px; margin-bottom: 18px; }
.alert--ok { background: #e5f7ec; color: #157347; border: 1px solid #b8e6cd; }
.alert--err { background: #fdeaed; color: #b01230; border: 1px solid #f5c2cc; }

.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }

.statcard { background: var(--card); border: 1px solid var(--line-l); border-radius: 15px; padding: 20px 22px; box-shadow: 0 4px 16px rgba(20, 28, 42, .05); }
.statcard b { display: block; font-size: 32px; font-weight: 800; line-height: 1.1; }
.statcard span { font-size: 13px; color: var(--mut); }
.statcard--hot { border-color: rgba(226, 34, 67, .5); background: linear-gradient(180deg, #fff, #fdf0f2); }
.statcard--hot b { color: var(--red); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.grid2--top { align-items: start; }

.panel { background: var(--card); border: 1px solid var(--line-l); border-radius: 15px; padding: 22px 24px; box-shadow: 0 4px 16px rgba(20, 28, 42, .05); margin-bottom: 18px; }

.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.panel__head h2 { font-size: 17px; font-weight: 800; }
.panel__title { font-size: 15px; font-weight: 800; margin-bottom: 14px; }

.empty { color: var(--mut); font-size: 14px; padding: 18px 0; }

/* tabuľky */
.tbl { width: 100%; border-collapse: collapse; }
.tbl td, .tbl th { padding: 11px 10px; vertical-align: middle; text-align: left; }
.tbl--lines tr + tr td { border-top: 1px solid var(--line-l); }
.tbl__headrow th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); border-bottom: 2px solid var(--line-l); }
.tbl a strong { color: var(--txt); }
.tbl a:hover strong { color: var(--red); }
.tbl__sub { font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.tbl__right { text-align: right; white-space: nowrap; }
.tbl__date { font-size: 12.5px; color: var(--mut); }
.tbl__flex { display: flex; align-items: center; gap: 13px; }
.tbl tr.is-unread { background: #fdf6f7; }
.tbl tr.is-unread strong { font-weight: 800; }

.thumb { width: 56px; height: 40px; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid var(--line-l); flex: none; }

.tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: .03em; }
.tag--ok { background: #e5f7ec; color: #157347; }
.tag--warn { background: #fdf3e2; color: #b07912; }
.tag--new { background: var(--red-2); color: #fff; margin-left: 8px; }

/* tlačidlá */
.abtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: 14px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.abtn--sm { padding: 7px 11px; font-size: 12.5px; border-radius: 8px; }
.abtn--block { width: 100%; margin-bottom: 9px; }
.abtn--primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(196, 18, 48, .28); }
.abtn--primary:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(196, 18, 48, .4); }
.abtn--ghost { background: #fff; border: 1px solid var(--line-l); color: var(--mut); }
.abtn--ghost:hover { color: var(--txt); border-color: #c6cdd8; }
.abtn--danger { background: #fff; border: 1px solid #f1c1cb; color: var(--red); }
.abtn--danger:hover { background: #fdeaed; }

.quick { display: flex; flex-wrap: wrap; gap: 11px; }

/* formuláre */
.fld { display: block; margin-bottom: 15px; }
.fld > span { display: block; font-size: 13px; font-weight: 700; color: var(--mut); margin-bottom: 6px; }

.fld input[type=text], .fld input[type=email], .fld input[type=password],
.fld input[type=datetime-local], .fld textarea, .fld input[type=file] {
    width: 100%; padding: 11px 14px; border-radius: 10px;
    border: 1px solid var(--line-l); background: #fbfcfe; color: var(--txt);
    font: inherit; font-size: 14.5px; transition: border-color .2s ease, box-shadow .2s ease;
}
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(226, 34, 67, .13); }

.fld__slug { display: flex; align-items: center; border: 1px solid var(--line-l); border-radius: 10px; background: #fbfcfe; overflow: hidden; }
.fld__slug em { font-style: normal; padding: 11px 4px 11px 14px; color: var(--mut); font-size: 14px; }
.fld__slug input { border: 0 !important; background: transparent !important; padding-left: 2px !important; box-shadow: none !important; }

.fld2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld3 { display: grid; grid-template-columns: 90px 90px 1fr; gap: 12px; }

.hint { font-size: 12px; color: var(--mut); margin-top: 5px; display: block; }

.check { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--red); }

.savebar { position: sticky; bottom: 0; padding: 14px 0; margin-bottom: 20px; }

/* editor noviniek */
.editgrid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.editside .panel { margin-bottom: 16px; }

.edtoolbar {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 8px;
    border: 1px solid var(--line-l); border-bottom: 0; border-radius: 10px 10px 0 0; background: #f7f8fb;
}
.edtoolbar button {
    padding: 7px 11px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--mut);
    display: inline-flex; align-items: center; gap: 6px;
}
.edtoolbar button:hover { background: #fff; color: var(--txt); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.edtoolbar__sep { width: 1px; background: var(--line-l); margin: 4px 5px; }

.editor {
    min-height: 380px; max-height: 640px; overflow-y: auto;
    padding: 18px 20px; border: 1px solid var(--line-l); border-radius: 0 0 10px 10px; background: #fff;
    font-size: 15.5px; line-height: 1.75;
}
.editor:focus { outline: none; border-color: var(--red-2); }
.editor h2 { font-size: 22px; margin: 18px 0 8px; }
.editor h3 { font-size: 18px; margin: 15px 0 7px; }
.editor p { margin: 0 0 12px; }
.editor ul, .editor ol { margin: 0 0 12px; padding-left: 26px; }
.editor img { max-width: 100%; border-radius: 10px; margin: 8px 0; }
.editor a { color: var(--red); text-decoration: underline; }

.imgprev { border-radius: 10px; overflow: hidden; border: 1px solid var(--line-l); margin-bottom: 12px; }
.imgprev img { width: 100%; display: block; }

/* správy */
.msgdetail__meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: var(--mut); padding-bottom: 14px; border-bottom: 1px solid var(--line-l); margin-bottom: 16px; }
.msgdetail__meta a:hover { color: var(--red); }
.msgdetail__body { font-size: 15.5px; line-height: 1.75; padding: 4px 0 18px; white-space: normal; }
.msgdetail__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-l); }

/* login */
.adm--login { background: radial-gradient(ellipse 70% 60% at 50% 0%, #1a2030, var(--dark)) fixed; display: grid; place-items: center; min-height: 100vh; }
.login { width: min(400px, 92vw); text-align: center; }
.login__logo { height: 52px; margin-bottom: 26px; }
.login__card { background: var(--card); border-radius: 18px; padding: 32px 30px; text-align: left; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.login__card h1 { font-size: 22px; font-weight: 800; }
.login__sub { color: var(--mut); font-size: 14px; margin: 3px 0 20px; }
.login__card label { display: block; margin-bottom: 14px; }
.login__card label span { display: block; font-size: 13px; font-weight: 700; color: var(--mut); margin-bottom: 6px; }
.login__card input { width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--line-l); font: inherit; font-size: 16px; }
.login__card input:focus { outline: none; border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(226, 34, 67, .14); }
.login__back { display: inline-block; margin-top: 20px; font-size: 13.5px; color: #8c96a5; }
.login__back:hover { color: #fff; }

/* ══ CMS komponenty (zákazníci, tickety, zákazky, zmluvy) ══ */

.fld select {
    width: 100%; padding: 11px 14px; border-radius: 10px;
    border: 1px solid var(--line-l); background: #fbfcfe; color: var(--txt);
    font: inherit; font-size: 14.5px; appearance: auto;
}
.fld select:focus { outline: none; border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(226, 34, 67, .13); }
.fld input[type=date], .fld input[type=number] {
    width: 100%; padding: 11px 14px; border-radius: 10px;
    border: 1px solid var(--line-l); background: #fbfcfe; color: var(--txt); font: inherit; font-size: 14.5px;
}
.fld input[type=date]:focus, .fld input[type=number]:focus { outline: none; border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(226, 34, 67, .13); }

.tag--mut { background: #eef1f5; color: var(--mut); }

/* filter lišta nad zoznamami */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filterbar input[type=text], .filterbar input[type=search], .filterbar input[type=date],
.filterbar input[type=number], .filterbar select {
    padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line-l); background: #fff; font: inherit; font-size: 14px; color: var(--txt);
}
.filterbar input[type=text], .filterbar input[type=search] { min-width: 220px; }
.filterbar .abtn { margin-left: auto; }

/* stránkovanie */
.pager { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line-l); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--mut); padding: 0 8px; }
.pager a:hover { color: var(--txt); border-color: #c6cdd8; }
.pager a.is-active { background: var(--grad); color: #fff; border-color: transparent; }
.pager span { border: 0; background: none; }

/* taby na detaile */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; border-bottom: 2px solid var(--line-l); padding-bottom: 0; }
.tabs button { padding: 10px 16px; font-weight: 700; font-size: 14px; color: var(--mut); border-radius: 10px 10px 0 0; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tabs button:hover { color: var(--txt); background: #fff; }
.tabs button.is-active { color: var(--red); border-bottom-color: var(--red); }
.tabpane { display: none; }
.tabpane.is-active { display: block; }

/* upload box (drag&drop + ctrl+v) */
.uplbox { margin: 8px 0 14px; }
.uplbox__drop {
    border: 2px dashed var(--line-l); border-radius: 12px; background: #fbfcfe;
    padding: 16px 18px; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.uplbox__drop b { display: block; font-size: 14px; }
.uplbox__drop span { display: block; font-size: 12.5px; color: var(--mut); margin-top: 3px; }
.uplbox__drop kbd { background: #eef1f5; border: 1px solid var(--line-l); border-radius: 5px; padding: 1px 6px; font-size: 11.5px; font-family: inherit; }
.uplbox__drop:hover, .uplbox.is-drag .uplbox__drop { border-color: var(--red-2); background: #fdf6f7; }
.uplbox.is-pasted .uplbox__drop { border-color: var(--ok); background: #e5f7ec; }
.uplbox__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.uplitem { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-l); border-radius: 10px; padding: 6px 9px; font-size: 12.5px; max-width: 100%; }
.uplitem img { width: 42px; height: 32px; object-fit: cover; border-radius: 6px; flex: none; }
.uplitem__ico { font-size: 18px; }
.uplitem__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; color: var(--mut); font-weight: 600; }
.uplitem__del { color: var(--mut); font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.uplitem__del:hover { color: var(--red); background: #fdeaed; }

/* zoznam uložených príloh */
.attlist { display: grid; gap: 8px; margin: 10px 0; }
.attitem { display: flex; align-items: center; gap: 12px; background: #fbfcfe; border: 1px solid var(--line-l); border-radius: 11px; padding: 8px 12px; }
.attitem__thumb img { width: 74px; height: 52px; object-fit: cover; border-radius: 8px; display: block; border: 1px solid var(--line-l); }
.attitem__file { font-size: 26px; width: 46px; height: 46px; display: grid; place-items: center; background: #eef1f5; border-radius: 9px; flex: none; }
.attitem__meta { min-width: 0; flex: 1; }
.attitem__meta a { font-weight: 700; font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attitem__meta a:hover { color: var(--red); }
.attitem__meta small { color: var(--mut); font-size: 12px; }
.attitem__del { color: var(--mut); font-weight: 800; padding: 4px 8px; border-radius: 7px; }
.attitem__del:hover { color: var(--red); background: #fdeaed; }

/* poznámky */
.noteform textarea { width: 100%; padding: 10px 13px; border-radius: 10px; border: 1px solid var(--line-l); background: #fbfcfe; font: inherit; font-size: 14px; margin-bottom: 8px; }
.noteform textarea:focus { outline: none; border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(226, 34, 67, .13); }
.noteform { margin-bottom: 14px; }
.noteitem { border-top: 1px solid var(--line-l); padding: 11px 2px; }
.noteitem__head { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mut); margin-bottom: 4px; }
.noteitem__head b { color: var(--txt); }
.noteitem__head form { margin-left: auto; }
.noteitem p { font-size: 14px; }

/* vlákno ticketu */
.thread { display: grid; gap: 12px; margin: 14px 0; }
.tmsg { border: 1px solid var(--line-l); border-radius: 13px; padding: 13px 16px; background: #fff; }
.tmsg--customer { background: #f6f8fb; }
.tmsg--admin { background: #fdf6f7; border-color: #f5d7dd; }
.tmsg--internal { background: #fdf8ec; border-color: #f0e0b8; }
.tmsg--system { background: none; border: 0; padding: 2px 8px; text-align: center; color: var(--mut); font-size: 12.5px; }
.tmsg__head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 12.5px; color: var(--mut); margin-bottom: 7px; }
.tmsg__head b { color: var(--txt); font-size: 13.5px; }
.tmsg__body { font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; }
.tmsg__body img { max-width: min(420px, 100%); border-radius: 9px; border: 1px solid var(--line-l); }

/* meta panel ticketu / detailu */
.metagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 18px; margin-bottom: 6px; }
.metagrid > div > span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--mut); font-weight: 700; margin-bottom: 2px; }
.metagrid > div > b, .metagrid > div { font-size: 14px; }

.tbl td .tag { vertical-align: middle; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: baseline; }

/* captcha (overenie „nie som robot“) */
.captcha__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.captcha__row img { display: block; flex: none; border-radius: 10px; border: 1px solid var(--line-l); }
.captcha__row input { flex: 1 1 110px; min-width: 110px; }
.captcha__refresh {
    flex: none; width: 42px; height: 42px; border-radius: 10px; font-size: 21px; line-height: 1;
    background: #fbfcfe; border: 1px solid var(--line-l); color: var(--mut); cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.captcha__refresh:hover { color: var(--red); border-color: var(--red-2); }

/* ── Responzivita ─────────────────────────────────────── */
@media (max-width: 1020px) {
    .editgrid, .grid2 { grid-template-columns: 1fr; }
    .cards4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    /* jeden stĺpec – tmavý pás gradientu vypnúť, sidebar má vlastné pozadie */
    .adm__layout { grid-template-columns: 1fr; background: var(--bgl); }
    /* 16px = iOS Safari nezoomuje pri ťuknutí do poľa */
    .fld input[type=text], .fld input[type=email], .fld input[type=password],
    .fld input[type=datetime-local], .fld textarea, .editor { font-size: 16px; }
    .adm__side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; }
    .adm__brand { border: 0; padding: 0 10px 0 0; margin: 0; }
    .adm__nav { display: flex; flex-wrap: wrap; }
    .adm__nav a { padding: 8px 12px; font-size: 13px; }
    .adm__side-bottom { margin: 0 0 0 auto; display: flex; border: 0; padding: 0; }
    .adm__main { padding: 18px 16px 50px; }
    .cards4 { grid-template-columns: 1fr 1fr; }
    .fld3 { grid-template-columns: 1fr 1fr; }
}

/* ── Sekcie v bočnej navigácii (Servis / Obchod / Obsah / Systém) ── */
.adm__navcap { margin: 13px 6px 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .35); }
@media (max-width: 900px) {
    .adm__navcap { flex-basis: 100%; margin: 8px 4px 0; }
}

/* ══ Obchodné doklady – editor (doklad-edit.php) ══ */

/* všeobecné pomocníky */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.abtn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none; }

/* vizuálne skrytý submit – Enter vo formulári odošle „Uložiť“ (nesmie byť display:none) */
.subhide { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; }

/* lišta akcií nad dokladom (PDF, konverzie, úhrada, storno) */
.actbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actbar form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.actbar input[type=date], .actbar input[type=number], .actbar select {
    padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-l);
    background: #fbfcfe; color: var(--txt); font: inherit; font-size: 13px;
}
.actbar input[type=date]:focus, .actbar input[type=number]:focus, .actbar select:focus {
    outline: none; border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(226, 34, 67, .13);
}

/* banner stornovaného dokladu */
.cancelbanner { background: #fdeaed; border: 1px solid #f5c2cc; color: #b01230; border-radius: 12px; padding: 13px 18px; font-weight: 700; font-size: 14.5px; margin-bottom: 18px; }

/* snapshot odberateľa na doklade */
.snapbox { background: #fbfcfe; border: 1px solid var(--line-l); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--txt); }
.snapbox small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mut); margin-bottom: 4px; }
.snapbox__mut { color: var(--mut); }

/* tabuľka položiek – horizontálny scroll drží .itemswrap */
.itemswrap { overflow-x: auto; }
.itemstbl { width: 100%; border-collapse: collapse; min-width: 900px; }
.itemstbl th {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--mut);
    text-align: left; padding: 6px; border-bottom: 2px solid var(--line-l); white-space: nowrap;
}
.itemstbl th.tbl__right { text-align: right; }
.itemstbl td:nth-child(3), .itemstbl th:nth-child(3) { width: 80px; }
.itemstbl td:nth-child(4), .itemstbl th:nth-child(4) { width: 64px; }
.itemstbl td:nth-child(5), .itemstbl th:nth-child(5) { width: 100px; }
.itemstbl td:nth-child(6), .itemstbl th:nth-child(6) { width: 76px; }
.itemstbl td:nth-child(7), .itemstbl th:nth-child(7) { width: 84px; }
.itemstbl td:nth-child(8), .itemstbl th:nth-child(8) { width: 100px; }

.itcell { padding: 7px 5px; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.itcell input, .itcell select, .itcell textarea {
    width: 100%; min-width: 0; padding: 8px 9px; border-radius: 8px;
    border: 1px solid var(--line-l); background: #fbfcfe; color: var(--txt);
    font: inherit; font-size: 13.5px; transition: border-color .2s ease, box-shadow .2s ease;
}
.itcell input:focus, .itcell select:focus, .itcell textarea:focus {
    outline: none; border-color: var(--red-2); box-shadow: 0 0 0 3px rgba(226, 34, 67, .13);
}
.itcell textarea { margin-top: 5px; font-size: 12.5px; color: var(--mut); resize: vertical; }
.itcell input.num { text-align: right; }
.itcell--n { width: 28px; padding-top: 17px; color: var(--mut); font-size: 12.5px; white-space: nowrap; }
.itcell--name { min-width: 240px; }
.itcell--total { width: 110px; padding-top: 17px; font-weight: 700; white-space: nowrap; }
.itcell--act { width: 92px; white-space: nowrap; padding-top: 14px; text-align: right; }

/* interná nákupná cena – vizuálne odlíšená, nejde na PDF ani zákazníkovi */
.itemstbl .col-purch { background: #fdf6e7; }
.itcell input.inp-purchase { background: #fdf6e7; border-style: dashed; }

/* neplatiteľ DPH – skryť DPH stĺpce */
.novat .col-vat { display: none; }

/* malé ikonové tlačidlá riadku (↑ ↓ ✕) */
.rowbtn {
    width: 26px; height: 26px; display: inline-grid; place-items: center;
    border: 1px solid var(--line-l); background: #fff; border-radius: 7px;
    color: var(--mut); font-size: 13px; line-height: 1;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rowbtn + .rowbtn { margin-left: 4px; }
.rowbtn:hover { color: var(--txt); border-color: #c6cdd8; }
.rowbtn--del:hover { color: #fff; background: var(--red); border-color: var(--red); }

/* súčty pod položkami */
.totalsbox { margin: 14px 4px 2px auto; max-width: 340px; font-size: 14.5px; }
.totalsbox > div { display: flex; justify-content: space-between; gap: 20px; padding: 5px 0; }
.totalsbox__gross { border-top: 2px solid var(--line-l); font-size: 16.5px; }
.totalsbox__gross b { color: var(--red); }
.totalsbox > div.totalsbox__margin { justify-content: flex-end; color: var(--mut); font-size: 12.5px; }

/* súvisiace doklady, väzby, mail meta */
.relrow td { font-size: 14px; }
.linklist { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.linklist a:hover { color: var(--red); }
.mailmeta { color: var(--mut); font-size: 13px; margin: 0 0 10px; }

/* jednoduchý checkbox riadok (napr. „Priložiť PDF“) */
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 10px 0; cursor: pointer; }
.chk input { width: auto; accent-color: var(--red); }

/* ══ Modálne okno (kontrakt: .modal-backdrop + .is-open) ══ */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 90; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(13, 16, 23, .55);
}
.modal-backdrop.is-open { display: flex; }
.modal {
    width: min(520px, 100%); max-height: min(86vh, 720px);
    display: flex; flex-direction: column;
    background: var(--card); border-radius: 14px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line-l); }
.modal__title { font-size: 16px; font-weight: 800; }
.modal__close {
    flex: none; width: 32px; height: 32px; display: grid; place-items: center;
    border: 1px solid var(--line-l); border-radius: 8px; background: #fff;
    color: var(--mut); font-size: 17px; line-height: 1;
    transition: color .15s ease, border-color .15s ease;
}
.modal__close:hover { color: var(--txt); border-color: #c6cdd8; }
.modal__body { padding: 16px 20px; overflow-y: auto; }
.modal__body .fld:last-child { margin-bottom: 0; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--line-l); }

@media (max-width: 760px) {
    .itemstbl { min-width: 820px; }
    .itcell input, .itcell select, .itcell textarea { font-size: 16px; } /* iOS bez zoomu */
    .totalsbox { max-width: none; margin-left: 0; margin-right: 0; }
    .modal-backdrop { padding: 12px; }
}