:root {
    --ink: #0f2438;
    --ink-2: #3a4e62;
    --muted: #66788a;
    --paper: #f3f6f9;
    --card: #ffffff;
    --line: #d9e1e9;
    --line-strong: #aebccb;
    --aegean: #1B4FD8;        /* littlegreek.ch --bm */
    --aegean-deep: #0F2E8C;   /* littlegreek.ch --bd */
    --wash: #e9eefc;
    --danger: #b3361f;
    --danger-wash: #fbe9e5;
    --ok: #1f6b42;
    --ok-wash: #e2f2e8;
    --amber: #9a5207;
    --amber-wash: #fdeed6;
    --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 7.25H3V1.25H12V6H7.5V4M12 6V7.25H16' fill='none' stroke='%231B4FD8' stroke-width='1.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* .btn etc. set display and would win otherwise */

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 15px/1.5 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; }
a { color: var(--aegean-deep); }
code { font: 13px/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--wash); padding: 1px 6px; border-radius: 4px; }

:focus-visible { outline: 2px solid var(--aegean); outline-offset: 2px; }

.muted { color: var(--muted); }
.pre { white-space: pre-wrap; margin: 0; }
.sku { color: var(--muted); font-size: 12.5px; }

/* ---------- header ---------- */
.top { background: var(--card); border-bottom: 1px solid var(--line); position: relative; }
.top::before { content: ""; display: block; height: 8px; background: var(--meander) repeat-x left center; }
.top-inner {
    max-width: 1240px; margin: 0 auto; padding: 10px 16px;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: #0F2E8C url("../icons/icon-192.png?v=lg1") no-repeat center / cover; flex: none; }   /* Little Greek emblem */
.nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.nav a { padding: 7px 9px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.nav a:hover { background: var(--paper); }
.nav a.is-on { background: var(--wash); color: var(--aegean-deep); }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--aegean); color: #fff; font-size: 12px; font-weight: 600; text-align: center; margin-left: 4px; }
.top-side { display: flex; align-items: center; gap: 14px; }
.top-side form { margin: 0; }
.who { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.who:hover { text-decoration: underline; }
.who.is-on { color: var(--aegean-deep); text-decoration: underline; }
.langs { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.langs a { padding: 3px 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.langs a.is-on { background: var(--aegean); color: #fff; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--aegean-deep); cursor: pointer; text-decoration: underline; }

/* ---------- page ---------- */
.page { max-width: 1080px; margin: 0 auto; padding: 24px 16px 96px; }
.is-wide .page { max-width: 1240px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head p { margin: 4px 0 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; border: 1px solid transparent; }
.flash-ok { background: var(--ok-wash); color: var(--ok); border-color: #b9dcc7; }
.flash-err { background: var(--danger-wash); color: var(--danger); border-color: #f0c1b8; }
.flash-warn { background: var(--amber-wash); color: var(--amber); border-color: #f1d3a6; }
.flash a { color: inherit; font-weight: 600; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.card-title { margin-bottom: 8px; }
.narrow { max-width: 620px; }
.empty { text-align: center; color: var(--muted); padding: 56px 16px; }
.empty h1 { color: var(--ink); margin-bottom: 8px; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.grow { flex: 1 1 180px; }
input, select, textarea {
    font: inherit; color: inherit; background: #fff;
    border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; width: 100%; min-height: 40px;
}
textarea { resize: vertical; }
input[type="checkbox"] { width: auto; min-height: 0; }
.check { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-row .field { margin-bottom: 0; }
.card.form-row { padding-bottom: 18px; }
.form-actions { display: flex; gap: 8px; margin-top: 8px; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { margin-bottom: 0; min-width: 140px; }
.filters .check { margin: 0 0 9px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font: inherit; font-weight: 500; color: var(--ink); background: #fff;
    border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 14px; min-height: 40px;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--wash); }
.btn-primary { background: var(--aegean); border-color: var(--aegean); color: #fff; }
.btn-primary:hover { background: var(--aegean-deep); }
.btn-primary:disabled { background: var(--line-strong); border-color: var(--line-strong); cursor: not-allowed; }
.btn-danger { color: var(--danger); border-color: #e3b1a7; }
.btn-danger:hover { background: var(--danger-wash); }
.btn-sm { padding: 3px 10px; min-height: 30px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 13px; font-weight: 500; color: var(--muted); background: #fafcfd; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafcfe; }
.table tfoot td { border-top: 1px solid var(--line-strong); border-bottom: 0; background: #fafcfd; }
.num { text-align: right !important; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.cell-wrap { min-width: 180px; }
.row-new { background: #fffaf0; }
.is-off { color: var(--muted); }
.is-off strong { font-weight: 500; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .inline, .row-actions a { display: inline-block; margin-left: 4px; }
.inline { display: inline; margin: 0; }
.inline-edit { display: flex; gap: 6px; align-items: center; margin: 0; }
.inline-edit input { min-height: 32px; padding: 4px 8px; }
.pager { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.pager .muted { margin-right: auto; }
.plain { margin: 0 0 12px; padding-left: 18px; color: var(--ink-2); }
.code { background: var(--ink); color: #dfe9f3; padding: 12px 14px; border-radius: 8px; overflow-x: auto; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }

.badge { display: inline-block; padding: 1px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.badge-new { background: var(--amber-wash); color: var(--amber); }
.badge-ordered { background: var(--wash); color: var(--aegean-deep); }
.badge-delivered { background: var(--ok-wash); color: var(--ok); }
.badge-cancelled { background: #eceff2; color: #5d6a77; }

.stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; flex: 0 1 220px; min-width: 150px; }
.stat-num { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.stat-label { color: var(--muted); font-size: 13px; }

/* ---------- order slip (the signature piece) ---------- */
.slip-edge { height: 10px; background: var(--meander) repeat-x left center; background-color: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: 4px 4px 0 0; }
.slip-body { background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 4px 4px; padding: 16px 20px 20px; box-shadow: 0 10px 24px -18px rgba(15, 36, 56, .45); }
.slip-head { display: flex; justify-content: space-between; align-items: center; }
.slip-close { display: none; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ink-2); padding: 4px 8px; }
.slip-branch { color: var(--muted); font-size: 13px; margin: 2px 0 12px; }
.slip-supplier { font-size: 14px; margin: 14px 0 4px; color: var(--aegean-deep); }
.slip-supplier small { display: block; font-weight: 400; }
.slip-extra { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.slip-extra textarea { min-height: 56px; }

.leaders { list-style: none; margin: 0; padding: 0; }
.leaders li { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.l-q { min-width: 2.4em; font-weight: 600; color: var(--aegean-deep); }
.l-n { min-width: 0; overflow-wrap: anywhere; }
.l-n small { display: block; color: var(--muted); font-size: 12.5px; }
.l-dots { flex: 1 1 16px; min-width: 16px; border-bottom: 2px dotted var(--line-strong); align-self: baseline; transform: translateY(-4px); }
.l-p { white-space: nowrap; }
.l-sub { font-weight: 500; padding-top: 6px; }
.l-grand { margin-top: 16px; padding-top: 10px; border-top: 2px solid var(--ink); }
.l-total { font-size: 20px; font-weight: 600; }
.slip-empty { color: var(--muted); padding: 8px 0; }

.slip-static { max-width: 640px; }
.order-layout { display: grid; grid-template-columns: minmax(0, 640px) minmax(240px, 1fr); gap: 24px; align-items: start; }
.side-stack .card { margin-bottom: 12px; }
.status-form { display: flex; gap: 6px; flex-wrap: wrap; }
.report h2 { margin-bottom: 8px; }
.access { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 6px; margin: 16px 0 4px; min-width: 0; }
.access legend { padding: 0 6px; font-weight: 600; }
.access .form-row { margin-top: 8px; }
.access-state { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 8px; font-size: 13.5px; }
.section-title { margin: 28px 0 10px; }

/* ---------- branch catalog ---------- */
.shop { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.slip#slip { position: sticky; top: 16px; }
.toolbar { position: sticky; top: 0; z-index: 5; background: var(--paper); padding: 4px 0 12px; }
.search { margin-bottom: 10px; min-height: 44px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 13.5px; font-weight: 500; padding: 5px 12px; border: 1px solid var(--line-strong); background: #fff; border-radius: 16px; cursor: pointer; color: var(--ink-2); }
.chip.is-on { background: var(--aegean); border-color: var(--aegean); color: #fff; }

.supplier { margin-bottom: 28px; }
.supplier-name { margin: 8px 0 4px; font-size: 20px; }
.supplier-name small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.cat-name { margin: 16px 0 2px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.prow {
    display: grid; grid-template-columns: minmax(0, 1fr) 84px 136px; gap: 12px; align-items: center;
    padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--card);
}
.cat .prow:first-of-type, .cat-name + .prow { border-top: 1px solid var(--line); }
.prow.is-picked { background: var(--wash); }
.prow.is-picked .pname { font-weight: 600; }
.pname { overflow-wrap: anywhere; }
.pmeta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.pprice { text-align: right; font-weight: 500; }
.stepper { display: flex; justify-content: flex-end; }
.step { width: 40px; height: 40px; border: 1px solid var(--line-strong); background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-2); }
.step.minus { border-radius: 8px 0 0 8px; }
.step.plus { border-radius: 0 8px 8px 0; }
.step:hover { background: var(--wash); }
.qty { width: 52px; text-align: center; border-radius: 0; border-left: 0; border-right: 0; padding: 0; -moz-appearance: textfield; font-weight: 600; }
.qty::-webkit-outer-spin-button, .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-hit { text-align: center; color: var(--muted); padding: 32px 0; }

.slipbar { display: none; }

/* ---------- login ---------- */
.bare { display: block; }
.bare-langs { position: absolute; top: 16px; right: 16px; }
.login { max-width: 380px; margin: 0 auto; padding: 14vh 16px 40px; }
.login-brand { display: flex; justify-content: center; margin: 0 0 14px; padding: 22px 16px 18px; border-radius: 16px; background: #0F2E8C; }   /* logo is white on transparent */
.login-brand img { display: block; width: 180px; height: auto; }
.login-sub { color: var(--muted); margin-bottom: 24px; text-align: center; }
.login-card { padding: 22px; }

/* ---------- collect ---------- */
.collect-block { margin-bottom: 8px; }
.collect-block h2 { margin: 18px 0 8px; }
.grand-bar { display: flex; justify-content: space-between; align-items: baseline; max-width: 100%; padding: 12px 18px; margin: 4px 0 18px; border: 2px solid var(--ink); border-radius: 4px; font-size: 20px; background: #fff; }

/* ---------- promotions, agents, notifications ---------- */
.badge-promo { background: var(--danger-wash); color: var(--danger); }
.badge-run-queued { background: #eceff2; color: #5d6a77; }
.badge-run-running { background: var(--wash); color: var(--aegean-deep); }
.badge-run-ok { background: var(--ok-wash); color: var(--ok); }
.badge-run-error { background: var(--danger-wash); color: var(--danger); }
.status-strip { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: -6px 0 18px; font-size: 13.5px; }

/* countdown for the access tokens in .env (token_card) */
.token-card { --tone: var(--ok); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--tone); border-radius: 10px; padding: 14px 16px; margin: 0 0 18px; }
.token-warn { --tone: var(--amber); }
.token-danger, .token-expired, .token-none, .token-unknown { --tone: var(--danger); }
.token-main { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; }
.token-label { font-weight: 600; }
.token-count { grid-row: span 2; text-align: right; color: var(--tone); white-space: nowrap; }
.token-count strong { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.token-bar { grid-column: 1 / -1; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.token-bar > span { display: block; height: 100%; background: var(--tone); }
.token-how { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }

.agents-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.agent-list { display: flex; flex-direction: column; gap: 8px; }
.agent-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.agent-card:hover { border-color: var(--line-strong); }
.agent-card.is-on { border-color: var(--aegean); box-shadow: inset 0 0 0 1px var(--aegean); }
.agent-card.is-off { opacity: .6; }
.instructions { min-height: 260px; line-height: 1.55; }
.field small { font-weight: 400; }
.check.cap { align-items: flex-start; margin: 8px 0; }
.check.cap input { margin-top: 4px; }

.notice.is-unread { border-color: var(--aegean); }
.notice-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; font-size: 13.5px; }
.notice-actions { margin-left: auto; display: flex; gap: 6px; }
.notice-banner { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; }
.notice-banner summary { cursor: pointer; }
.notice-banner p { margin: 8px 0 2px; }

.hint { display: block; color: var(--aegean-deep); font-size: 12.5px; }
.l-estimate { color: var(--aegean-deep); font-weight: 500; padding-top: 6px; }

.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.hub-link { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
.hub-link:hover { border-color: var(--aegean); }

.collect-head { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; }
.collect-head h2 { margin: 0; }

.letter { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 36px 40px; max-width: 800px; }
.letter-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.letter-to { min-width: 220px; }
.letter-date { text-align: right; }
.letter h2 { margin: 18px 0 10px; }
.letter-table { margin: 12px 0 20px; }

@media (max-width: 860px) {
    .agents-layout { display: block; }
    .agent-list { margin-bottom: 16px; }
}
@media print {
    .letter { border: 0; padding: 0; max-width: none; }
}

.steps { padding-left: 38px; }
.steps li { margin: 4px 0 18px; }
.steps li:last-child { margin-bottom: 4px; }
.steps p { margin: 2px 0 8px; }
.bookmarklet { display: inline-block; padding: 8px 14px; border: 2px dashed var(--aegean); border-radius: 8px; color: var(--aegean-deep); font-weight: 600; text-decoration: none; background: var(--wash); cursor: grab; }

/* ---------- accounting ---------- */
.thumb { width: 44px; height: 56px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: #fff; display: block; }
.receipt-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 24px; align-items: start; }
.receipt-view { position: sticky; top: 16px; }
.receipt-view img { width: 100%; max-height: 82vh; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.receipt-pdf { width: 100%; height: 82vh; border: 1px solid var(--line); border-radius: 6px; }
.plain-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.badge-r-new { background: var(--amber-wash); color: var(--amber); }
.badge-r-extracted { background: var(--wash); color: var(--aegean-deep); }
.badge-r-booked { background: var(--ok-wash); color: var(--ok); }
.badge-r-rejected { background: #eceff2; color: #5d6a77; }
.conf-high { color: var(--ok); }
.conf-medium { color: var(--amber); }
.conf-low, .warn { color: var(--danger); }
.stat-link { color: inherit; text-decoration: none; }
.stat-link:hover { border-color: var(--aegean); }
.upload-row .check { margin-bottom: 9px; }
.small { font-size: 12.5px; }
@media (max-width: 960px) {
    .receipt-layout { display: block; }
    .receipt-view { position: static; margin-bottom: 16px; }
}

/* ---------- small screens ---------- */
@media (max-width: 960px) {
    .shop { display: block; }
    .order-layout { display: block; }
    .order-layout .side-stack { margin-top: 16px; }
    .slip#slip {
        position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--paper);
        padding: 12px; transform: translateY(100%); visibility: hidden;
        transition: transform .22s ease, visibility 0s .22s;
    }
    body.slip-open .slip#slip { transform: none; visibility: visible; transition: transform .22s ease; }
    body.slip-open { overflow: hidden; }
    .slip-close { display: block; }
    .slipbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 12px;
        align-items: center; justify-content: space-between; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: #fff; border-top: 1px solid var(--line-strong); box-shadow: 0 -6px 18px -12px rgba(15, 36, 56, .5);
    }
    .slipbar-count { font-size: 12.5px; color: var(--muted); }
    .slipbar-total { font-size: 20px; font-weight: 600; }
    .toolbar { top: 0; }
}

@media (max-width: 640px) {
    .top-inner { gap: 10px; }
    .nav { order: 3; flex-basis: 100%; }
    .top-side { margin-left: auto; }
    .toolbar { position: static; }
    .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .chip { flex: none; }
    .prow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
    .pprice { text-align: left; grid-row: 2; grid-column: 1; }
    .stepper { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
    h1 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .slip#slip { transition: none !important; }
}

@media print {
    body { background: #fff; }
    .top, .no-print, .flash, .slipbar { display: none !important; }
    .page { max-width: none; padding: 0; }
    .table-wrap, .card, .slip-body { border-color: #999; box-shadow: none; }
    .table-wrap { overflow: visible; }
    .order-layout { display: block; }
}

/* ---------- app shell on phones (tab bar, "More" sheet, card tables) ---------- */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tabbar, .top-mobile { display: none; }

dialog.sheet { border: 0; padding: 0 0 env(safe-area-inset-bottom); margin: auto auto 0; width: 100%; max-width: 560px; max-height: 85vh;
    border-radius: 16px 16px 0 0; background: var(--card); color: var(--ink); box-shadow: 0 -12px 32px rgba(15, 36, 56, .22); }
dialog.sheet::backdrop { background: rgba(15, 36, 56, .38); }
dialog.sheet[open] { animation: sheet-up .2s ease-out; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .5; } }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 8px auto 4px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 20px 6px; }
.sheet-close { background: none; border: 0; font-size: 28px; line-height: 1; color: var(--ink-2); padding: 4px 8px; cursor: pointer; }
.sheet-list { list-style: none; margin: 0; padding: 0 8px 10px; }
.sheet-list form { margin: 0; }
.sheet-list > li > a, .sheet-btn, .sheet-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 10px 12px;
    border-radius: 10px; color: var(--ink); text-decoration: none; font: inherit; font-size: 16px; background: none; border: 0; text-align: left; cursor: pointer; }
.sheet-list > li > a:hover, .sheet-btn:hover { background: var(--paper); }
.sheet-list .ico { color: var(--aegean-deep); }
.sheet-row .langs, .sheet-row .btn, .sheet-list .count { margin-left: auto; }
.sheet-hint { padding: 0 20px 16px; font-size: 13.5px; }
.push-state { font-weight: 500; }

@media (max-width: 860px) {
    :root { --tabbar-h: 58px; }
    html { -webkit-tap-highlight-color: transparent; }
    body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    .top { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); }
    .top::before { height: 6px; }
    .top-inner { padding: 6px 12px 6px 16px; flex-wrap: nowrap; min-height: 52px; }
    .nav, .top-side { display: none; }
    .top-mobile { display: flex; margin-left: auto; align-items: center; gap: 6px; }
    .top-name { font-weight: 500; color: var(--ink-2); font-size: 14px; }
    .icon-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink-2); }
    .icon-btn .dot { position: absolute; top: 3px; right: 2px; }

    .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: rgba(255, 255, 255, .97);
        border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
    .tab { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        height: var(--tabbar-h); color: var(--muted); text-decoration: none; font: inherit; font-size: 11px; font-weight: 500;
        background: none; border: 0; cursor: pointer; padding: 0 2px; }
    .tab span:not(.dot) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tab.is-on { color: var(--aegean-deep); }
    .tab.is-on .ico { stroke-width: 2.2; }
    .tab .dot, .icon-btn .dot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--aegean); color: #fff;
        font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
    .tab .dot { position: absolute; top: 5px; left: calc(50% + 5px); }

    .page { padding: 14px 14px 24px; }
    input, select, textarea { font-size: 16px; }      /* iOS zooms into smaller fields */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 34px; }
    .page-head { margin-bottom: 12px; }
    .filters .field { flex: 1 1 140px; }

    /* catalog: the order bar sits on top of the tab bar */
    .slipbar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: 10px; }
    .page-catalog .page { padding-bottom: 96px; }
}

@media (max-width: 640px) {
    .table-wrap { overflow: visible; background: none; border: 0; border-radius: 0; }
    .table thead { display: none; }
    .table, .table tbody, .table tfoot, .table tr, .table td { display: block; width: 100%; }
    /* each row becomes a card: first cell as its title, the rest in two columns */
    .table tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; background: var(--card); border: 1px solid var(--line);
        border-radius: 12px; padding: 10px 14px 8px; margin-bottom: 10px; }
    .table tbody td:first-child, .table tbody td.row-actions, .table tbody td.cell-wrap { grid-column: 1 / -1; }
    .table tbody td:first-child { font-weight: 500; }
    .table tbody tr:hover { background: var(--card); }
    .table tbody tr.row-new { background: #fffaf0; }
    .table td { border: 0; padding: 3px 0; text-align: left; }
    .table td.num { text-align: left !important; }
    .table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; margin-bottom: 1px; }
    .table td:empty { display: none; }
    .table tfoot tr { padding: 4px 4px 14px; }
    .table tfoot td { padding: 2px 0; background: none; border: 0; }
    .row-actions { text-align: left; white-space: normal; padding-top: 6px !important; }
    .row-actions .inline, .row-actions a { margin: 0 6px 6px 0; }
    .thumb { width: 64px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    dialog.sheet[open] { animation: none; }
}

@media print {
    .tabbar, dialog.sheet, .top-mobile { display: none !important; }
    body { padding-bottom: 0; }
}

/* ---------- Buchhaltung reports, laid out like bexio ---------- */
.fibu-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 14px; overflow-x: auto; }
.fibu-tabs a { padding: 10px 14px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.fibu-tabs a.is-on { color: var(--aegean); border-bottom-color: var(--aegean); }
.fibu-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.fibu-filter .field { margin: 0; min-width: 220px; }
.fibu-filter .check { display: flex; gap: 6px; align-items: center; padding-bottom: 10px; }
.fibu-meta { margin: 0 0 6px; font-size: 13px; }
.fibu-table td { padding: 6px 12px; }
.fibu-table .num, .fibu-ledger .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fibu-group td { font-weight: 600; background: var(--wash); }
.fibu-group.fibu-d0 td { text-transform: uppercase; letter-spacing: .02em; background: #e3e9f8; }
.fibu-group.fibu-d2 td, .fibu-group.fibu-d3 td { background: transparent; }
.fibu-group.fibu-d1 td:first-child { padding-left: 20px; }
.fibu-group.fibu-d2 td:first-child { padding-left: 32px; }
.fibu-group.fibu-d3 td:first-child { padding-left: 44px; }
.fibu-acc td:first-child { padding-left: 52px; }
.fibu-acc a { color: var(--ink); text-decoration: none; }
.fibu-acc a:hover { color: var(--aegean); text-decoration: underline; }
.fibu-total td { font-weight: 700; border-top: 2px solid var(--ink); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 14px 0; }
.fibu-sub td { font-weight: 600; }

/* ---------- admin sidebar, ordered like bexio (wide screens only) ---------- */
.side { display: none; }
@media (min-width: 861px) {
    body.has-side { padding-left: 200px; }
    body.has-side .top .nav, body.has-side .top .brand { display: none; }
    body.has-side .top-inner { justify-content: flex-end; }
    .side { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 200px; z-index: 30;
            background: var(--card); border-right: 1px solid var(--line); padding: 12px 8px; overflow-y: auto; }
    .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; }
    .side-brand small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
    .side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
    .side-item { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 8px; border-radius: 4px; color: var(--ink); text-decoration: none;
                 font-size: 14px; font-weight: 400; cursor: pointer; list-style: none; }
    .side-item::-webkit-details-marker { display: none; }
    .side-item .ico { width: 18px; height: 18px; flex: none; }
    .side-item:hover, .side-sub:hover { background: var(--wash); color: var(--ink); }
    .side-item.is-on { background: var(--aegean-deep); color: #fff; }
    .side-item.is-on .count, .side-sub.is-on .count { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); }   /* blue on the dark blue row */
    .side-item.is-in { color: var(--ink); }
    .side-group > summary::after { content: '›'; margin-left: auto; transition: transform .15s; color: var(--muted); }
    .side-group[open] > summary::after { transform: rotate(90deg); }
    .side-sub { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 8px 5px 36px; border-radius: 4px; color: var(--ink-2); text-decoration: none; font-size: 13px; }
    .side-sub.is-on { background: var(--aegean-deep); color: #fff; }
    .side .count { margin-left: auto; }
    .side-settings { margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 14px; }
}

/* ---------- office screens: full width, type and sizes as in bexio (Lato 13px, 32px rows) ---------- */
@media (min-width: 861px) {
    body.has-side { font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.4; color: #212121; }
    body.has-side .top::before { height: 6px; }
    body.has-side .top-inner { max-width: none; padding: 6px 24px; }
    body.has-side .page, body.has-side.is-wide .page { max-width: none; margin: 0; padding: 16px 24px 64px; }
    body.has-side h1 { font-size: 20px; font-weight: 700; letter-spacing: 0; }
    body.has-side h2 { font-size: 16px; font-weight: 700; letter-spacing: 0; }
    body.has-side h3 { font-size: 14px; font-weight: 700; letter-spacing: 0; }
    body.has-side .page-head { margin-bottom: 14px; }
    body.has-side .langs a { font-size: 12px; padding: 2px 8px; }
    body.has-side .flash { padding: 8px 12px; border-radius: 4px; }
    body.has-side .card { border-radius: 4px; padding: 16px; margin-bottom: 14px; }
    body.has-side .field > span { font-size: 12px; font-weight: 700; }
    body.has-side input:not([type=checkbox]):not([type=radio]), body.has-side select { min-height: 32px; padding: 5px 8px; border-radius: 4px; }
    body.has-side textarea { padding: 6px 8px; border-radius: 4px; }
    body.has-side .btn { min-height: 32px; padding: 5px 14px; border-radius: 4px; font-weight: 400; }
    body.has-side .btn-sm { min-height: 26px; padding: 2px 10px; font-size: 12px; }
    body.has-side .chip { font-size: 13px; font-weight: 400; padding: 4px 12px; }
    body.has-side .table-wrap { border-radius: 4px; }
    body.has-side .table th, body.has-side .table td { padding: 7px 12px; }
    body.has-side .table th { font-size: 12px; font-weight: 700; color: var(--ink-2); }
    body.has-side .table td { line-height: 18px; }
    body.has-side .badge { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 10px; }
    body.has-side .stat { border-radius: 4px; padding: 10px 16px; }
    body.has-side .stat-num { font-size: 22px; font-weight: 700; letter-spacing: 0; }
    body.has-side .stat-label, body.has-side .small, body.has-side .sku { font-size: 12px; }
    body.has-side code { font-size: 12px; }
}

/* ---------- Manuelle Buchung ---------- */
.entry-head { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.entry-nr { display: block; padding: 10px 0; font-size: 18px; }
.entry-lines input, .entry-lines select { width: 100%; }
.entry-lines td { vertical-align: top; }
.entry-split { display: block; margin-top: 4px; }
.entry-card { margin-bottom: 10px; padding: 12px 14px; }
.entry-card.is-test { border-style: dashed; }
.entry-card-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.entry-card-head .actions { margin-left: auto; display: flex; gap: 6px; }
.vat-form td:nth-child(2) { color: var(--muted); width: 60px; }
.vat-form .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vat-details { margin-top: 16px; padding: 12px 16px; }
.vat-details summary { cursor: pointer; font-weight: 600; }

/* reports that stay tables on phones (two or four narrow columns) */
@media (max-width: 640px) {
    .table.table-flat { display: table; font-size: 13.5px; }
    .table.table-flat thead { display: table-header-group; }
    .table.table-flat tbody { display: table-row-group; }
    .table.table-flat tfoot { display: table-footer-group; }
    .table.table-flat tr, .table.table-flat tbody tr { display: table-row; padding: 0; border: 0; border-radius: 0; margin: 0; background: none; }
    .table.table-flat th, .table.table-flat td { display: table-cell; width: auto; padding: 6px 6px; border-bottom: 1px solid var(--line); }
    .table.table-flat td.num { text-align: right !important; }
    .table.table-flat td::before { content: none; }
    .fibu-acc td:first-child { padding-left: 18px; }
}

/* ---------- dashboard (like bexio) ---------- */
.dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.dash .card { padding: 16px 18px; margin: 0; }
.dash h2 { font-size: 16px; margin: 0 0 6px; }
.dash h2 a { color: var(--ink); text-decoration: none; }
.dash h2 a:hover { color: var(--aegean); }
.dash-flow { grid-column: span 2; }
@media (max-width: 760px) { .dash-flow { grid-column: auto; } }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dash-period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-period input[type=date] { width: auto; min-height: 34px; padding: 4px 8px; font-size: 13.5px; }
.dash-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.dash-presets a { padding: 3px 11px; border: 1px solid var(--line); border-radius: 14px; font-size: 12.5px; color: var(--ink-2); text-decoration: none; background: #fff; }
.dash-presets a:hover { border-color: var(--aegean); color: var(--aegean); }
.dash-presets a.is-on { background: var(--aegean); border-color: var(--aegean); color: #fff; }
.dash .dash-wide { grid-column: 1 / -1; }
/* the money chart and who is at work, side by side on a wide screen */
.dash-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.dash-row > .dash-flow { grid-column: auto; }
@media (max-width: 1100px) { .dash-row { grid-template-columns: minmax(0, 1fr); } }
.dash-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.dash-live i { width: 8px; height: 8px; border-radius: 50%; background: #2fb36b; box-shadow: 0 0 0 0 rgba(47, 179, 107, .5); animation: dash-pulse 2s infinite; }
@keyframes dash-pulse { 70% { box-shadow: 0 0 0 7px rgba(47, 179, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 179, 107, 0); } }
@media (prefers-reduced-motion: reduce) { .dash-live i { animation: none; } }
.dash-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.dash-chips span { padding: 4px 11px; border-radius: 14px; background: var(--wash); font-size: 13px; }
.dash-chips span.is-in { background: #e3f5ea; color: var(--ok); }
.dash-people li { align-items: center; gap: 10px; }
.dash .dot.is-on { background: #2fb36b; }
.dash .dash-people .dot { background: var(--line); }
.dash .dash-people .dot.is-on { background: #2fb36b; }
.dash-out summary { cursor: pointer; margin-top: 8px; }
.dash-table td, .dash-table th { padding: 6px 8px; }
.dash-table tfoot td { font-weight: 700; border-top: 1px solid var(--line); }
.table.dash-table th.c-cour, .table.dash-table td.c-cour { display: none; }
@media (max-width: 640px) {
    .table.dash-table th.c-plat, .table.dash-table td.c-plat { display: none; }
    .table.dash-table th.c-cour, .table.dash-table td.c-cour { display: table-cell; }
    .table.dash-table th, .table.dash-table td { padding: 6px 4px; font-size: 13px; }
}
.dash .pos { color: var(--ok); }
.dash .neg { color: var(--danger); }
.dash-sub { font-size: 13px; margin: 12px 0 4px; color: var(--ink-2); }
.dash-top { margin: 0; padding-left: 18px; font-size: 13.5px; }
.dash-top li { margin: 2px 0; }
.dash-top li span:first-child { margin-right: 6px; }
.dash-stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); margin: 6px 0 10px; }
.dash-stack span { display: block; height: 100%; }
.pm-card { background: #1b4fd8; } .pm-twint { background: #111; } .pm-amex { background: #2e77bb; } .pm-cash { background: #8bc34a; } .pm-online { background: #f5a623; }
.dash .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.dash-fee { margin: 10px 0 2px; font-size: 14px; }
.dash-calc .dash-calc-end { border-top: 1px solid var(--ink-2); margin-top: 4px; padding-top: 6px; font-weight: 700; }
.dash-chart { width: 100%; height: auto; display: block; }
.dash-chart .grid { stroke: var(--line); stroke-width: 1; }
.dash-chart .in { fill: #8bc34a; }
.dash-chart .out { fill: #e2574c; }
.dash-chart text { font-size: 11px; fill: var(--muted); }
.dash-totals { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.dash-totals div, .dash-pair div { display: flex; flex-direction: column; gap: 2px; }
.dash-totals strong, .dash-pair strong { font-size: 18px; color: var(--ink); }
.dot-in, .dot-out { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: #8bc34a; margin-right: 6px; }
.dot-out { background: #e2574c; }
.dash-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--wash); margin: 10px 0; }
.dash-bar .due { background: var(--aegean); }
.dash-bar .over { background: #f0b429; }
.dash-pair { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); }
.dash-pair .is-over strong { color: var(--amber); }
.dash .small { font-size: 12.5px; margin: 8px 0 0; }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dash-list li:last-child { border-bottom: 0; }
/* ---------- open items ---------- */
.fibu-subtabs { border-bottom: 0; margin-bottom: 6px; }
.op-aging { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.op-aging div { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-2); }
.op-aging strong { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.op-aging .is-over strong { color: var(--amber); }
.op-aging .op-total { border-color: var(--ink); }
.row-over td:last-child { color: var(--amber); font-weight: 600; }
.vat-estv { margin-top: 18px; padding: 14px 18px; }
.vat-estv h2 { font-size: 16px; margin: 0 0 4px; }

/* ---------- Jahresabschluss ---------- */
.close-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; }
.close-grid .card { margin: 0; padding: 14px 18px; }
.close-grid h2, .close-actions h2 { font-size: 16px; margin: 0 0 8px; }
.close-kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; }
.close-kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.close-kv .strong { font-weight: 700; border-top: 1px solid var(--line); padding-top: 6px; }
.close-kv .neg { color: var(--danger); }
.close-checks { list-style: none; margin: 0; padding: 0; }
.close-checks li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.close-checks li:last-child { border-bottom: 0; }
.close-checks li span { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.close-checks .ok span { background: var(--ok-wash); color: var(--ok); }
.close-checks .warn span { background: var(--amber-wash); color: var(--amber); }
.close-checks .info span { background: var(--wash); color: var(--aegean-deep); }
.close-table .is-diff td { background: #fff8eb; }
.close-table .num, .close-actions .num { text-align: right; font-variant-numeric: tabular-nums; }
.close-actions { margin-top: 16px; padding: 14px 18px; }
.close-actions .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Kasse (paymash) ---------- */
.pos-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-table tr.is-sel td { background: var(--wash); }
.pos-st { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pos-st-ok { background: var(--ok-wash); color: var(--ok); }
.pos-st-missing { background: var(--danger-wash); color: var(--danger); }
.pos-st-diff, .pos-st-vat { background: var(--amber-wash); color: var(--amber); }
.pos-days td { padding: 4px 8px; }
.pos-days .num { text-align: right; font-variant-numeric: tabular-nums; }
.pos-days tr.is-we td { background: #fafbfd; }
.pos-bar { width: 40%; }
.pos-bar { position: relative; }
.pos-bar span { display: block; height: 10px; border-radius: 3px; background: var(--aegean); }
.pos-bar .pos-bar-card { position: absolute; left: 8px; top: 50%; margin-top: -3px; height: 6px; background: var(--amber); opacity: .85; }
.pos-days tr.is-over td { background: #fff8eb; }
.pos-days .neg { color: var(--danger); font-weight: 600; }
.pos-payouts { margin: 16px 0; padding: 14px 18px; }
.pos-table td .pos-st + .pos-st { margin-top: 3px; }
.pos-table td:first-child { white-space: nowrap; }
.pos-scroll { overflow-x: auto; margin-bottom: 6px; }
@media (max-width: 640px) {
    .pos-table td .pos-st { white-space: normal; }
    .pos-days .pos-bar { display: none; }
    .pos-days th, .pos-days td { padding: 4px 5px; font-size: 13px; }
}
.pos-payouts h2 { font-size: 16px; margin: 0 0 8px; }
.pos-payouts .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.close-grid .mt { margin-top: 14px; }
.pos-auto { margin: 0 0 18px; padding: 14px 18px; }
.pos-auto h2 { font-size: 16px; margin: 0 0 8px; }
.pos-auto p { margin: 0 0 6px; }
.pos-auto ul { margin: 2px 0 6px 18px; padding: 0; }
.pos-auto .warn { color: var(--amber); font-weight: 600; }
.pos-self { margin: 18px 0; padding: 14px 18px; }
.pos-self h2 { font-size: 16px; margin: 0 0 8px; }
.pos-steps { margin: 0 0 8px 18px; padding: 0; }
.pos-steps li { margin: 6px 0; }
.pos-self .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Bank ---------- */
.bank-tx td { padding: 5px 8px; vertical-align: top; }
.bank-tx .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank-tx .neg { color: var(--danger); }
.bank-tx tr.is-open td { background: #fffaf2; }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form select { max-width: 220px; }
.pos-table td.nowrap { white-space: nowrap; }

/* ---------- Ausgaben ---------- */
.pos-st-muted { background: var(--wash); color: var(--ink-2); }
.pos-st-open { background: #eef3fb; color: var(--aegean-deep); }
.bill-doc { display: block; width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
img.bill-doc { height: auto; max-height: 720px; object-fit: contain; }
.pdoc-layout { display: grid; grid-template-columns: minmax(220px, 32%) minmax(0, 1fr); gap: 24px; align-items: start; }
.pdoc-layout .receipt-view img, .pdoc-layout .receipt-pdf { width: 100%; }
.pdoc-lines td { padding: 4px 4px; vertical-align: middle; }
.pdoc-lines select, .pdoc-lines input { width: 100%; min-width: 0; }
.pdoc-lines td:nth-child(1) { min-width: 180px; }
.pdoc-lines td:nth-child(2) { min-width: 110px; }
.pdoc-lines td:nth-child(4) { width: 120px; }
.pdoc-lines td:nth-child(5) { width: 36px; }
.pdoc-pay { align-items: end; margin: 10px 0 16px; }
.pay-card { margin: 0 0 18px; padding: 14px 18px; max-width: 880px; }
.pay-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pay-head h2 { font-size: 16px; margin: 0; }
.pay-card details { margin-top: 10px; }
.pay-card summary { cursor: pointer; font-weight: 600; }
.pay-form { margin-top: 10px; }
.pay-form .field.grow { flex: 1 1 220px; }
.pay-short { flex: 0 0 110px; }
.pay-run-form { margin: 14px 0 6px; }
.perm-set { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 12px; margin: 6px 0 14px; }
.perm-set legend { font-weight: 600; padding: 0 6px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.perm { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.perm input { margin-top: 4px; }
.perm span { display: flex; flex-direction: column; }
.perm small { line-height: 1.3; }
.perm-cell { max-width: 360px; }
.perm-cell .pos-st { margin: 0 4px 4px 0; }
.fix-table td:nth-child(6) { min-width: 220px; }
.fix-table td:nth-child(8) { min-width: 260px; }
.op-aging small { display: block; font-size: 12px; }
.check { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; }
/* ---------- Katalog-Entwurf ---------- */
.cat-queue { padding: 14px 16px; margin-bottom: 14px; }
.cat-queue-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 10px; }
.cat-queue-stats div { display: flex; flex-direction: column; }
.cat-queue-stats strong { font-size: 18px; }
.cat-queue-actions { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.cat-bar { display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.cat-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-filter select, .cat-filter input, .cat-bulk select { width: auto; min-width: 180px; max-width: 280px; }
.cat-filter input[type=search] { min-width: 200px; }
.cat-bulk { position: sticky; top: 0; z-index: 3; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--bg, #f5f7fa); padding: 8px 0; }
.cat-supplier { font-size: 15.5px; margin: 16px 0 6px; }
.cat-supplier label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.cat-table td.cat-name { min-width: 240px; }
.cat-table summary { cursor: pointer; list-style: none; }
.cat-table summary::-webkit-details-marker { display: none; }
.cat-edit { margin-top: 6px; }
.cat-dialog { padding: 16px; min-width: min(420px, 92vw); }

/* ---------- Banking ---------- */
.bank-card { padding: 16px 18px; margin-bottom: 16px; }
.bank-card-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.bank-card-head h2 { margin: 2px 0; font-size: 17px; }
.bank-name { margin: 0; font-weight: 700; color: #c4122f; letter-spacing: .02em; }
.bank-balances { display: flex; gap: 22px; text-align: right; }
.bank-balances div { display: flex; flex-direction: column; }
.bank-balances strong { font-size: 17px; }
.bank-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.bank-panel { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff; }
.bank-panel h3 { margin: 0 0 8px; font-size: 14.5px; }
.bank-panel p { margin: 4px 0; }
.bank-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bank-map { margin: 0 0 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bank-cash { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.bank-cash-card { margin: 0; padding: 14px 16px; }
.bank-cash-card h3 { margin: 0 0 6px; font-size: 14.5px; }
.bank-cash-card strong { font-size: 18px; }
.bank-tabs { margin: 4px 0 12px; }
.bank-empty, .bank-upload { padding: 14px 16px; }
.bank-upload summary { list-style: none; display: inline-flex; }
.bank-upload[open] summary { margin-bottom: 10px; }

/* ---------- Posteingang ---------- */
.inbox-upload { padding: 10px 14px; margin-bottom: 14px; }
.inbox-upload summary { list-style: none; display: inline-flex; }
.inbox-upload summary::-webkit-details-marker { display: none; }
.inbox-upload[open] summary { margin-bottom: 10px; }
.inbox-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 16px; align-items: start; margin-bottom: 18px; }
.inbox-list { padding: 12px 14px; margin: 0; min-width: 0; }
.inbox-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.inbox-search input { width: 260px; max-width: 100%; }
.inbox-tabs { display: flex; gap: 18px; }
.inbox-tabs a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; color: inherit; }
.inbox-tabs a.is-on { color: var(--aegean); border-bottom-color: var(--aegean); font-weight: 600; }
.inbox-table tbody tr { cursor: pointer; }
.inbox-table tbody tr:hover { background: #f5f8fd; }
.inbox-table tr.is-sel { background: #e8effc; }
.inbox-table td a { text-decoration: none; }
.inbox-name { min-width: 200px; }
.inbox-preview { position: sticky; top: 12px; margin: 0; padding: 12px 14px; }
.inbox-preview iframe { width: 100%; height: 62vh; min-height: 360px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.inbox-file { margin: 8px 0; display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.inbox-note { background: #f7f9fc; border-radius: 8px; padding: 8px 10px; }
.inbox-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.inbox-auto { padding: 10px 14px; margin-bottom: 14px; }
.inbox-auto .section-title { margin: 0 0 4px; }
.inbox-auto-head { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.inbox-auto-mode { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inbox-questions { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.inbox-questions li { background: #fff8ec; border-radius: 8px; padding: 8px 10px; }
.inbox-q-options { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.inbox-q-options input[type=date] { width: auto; margin-right: 4px; }
@media (max-width: 1100px) { .inbox-grid { grid-template-columns: 1fr; } .inbox-preview { position: static; } }
@media (max-width: 1180px) { .pdoc-layout { display: block; } .pdoc-layout .receipt-view { position: static; max-width: 520px; margin-bottom: 16px; } }
@media (max-width: 640px) { .pdoc-lines td:nth-child(1) { min-width: 120px; } }

.task-items { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 6px; }
.task-items li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 520px); gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: #f7f9fc; }
.task-item-text { font-size: 14px; overflow-wrap: anywhere; }
.task-item-note { display: flex; gap: 6px; align-items: center; }
.task-item-file { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; cursor: pointer; font-size: 15px; }
.task-item-file:hover { background: #f5f8fd; }
.task-item-file.has-file { background: #e8effc; border-color: var(--aegean); font-size: 12.5px; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-item-file input { display: none; }
.task-item-note input[type=text] { min-height: 34px; padding: 5px 8px; }
.task-item-sent { color: #1d7a3a; font-size: 13.5px; overflow-wrap: anywhere; }
@media (max-width: 760px) { .task-items li { grid-template-columns: 1fr; } }
/* on a phone a line's field must not be wider than the card (an input keeps its own width otherwise; 24.10.2026) */
.task, .task-items li, .task-item-note { min-width: 0; }
.task-item-note input[type=text] { min-width: 0; flex: 1 1 auto; width: 100%; }

.delivery-sync { padding: 12px 14px; }
.delivery-sync-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.delivery-sync-log { list-style: none; margin: 10px 0 0; padding: 8px 10px; max-height: 240px; overflow: auto; background: #f7f9fc; border-radius: 8px; font-size: 13px; display: grid; gap: 2px; }
.delivery-sync-install { margin-top: 8px; }
.delivery-sync-install ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 3px; }
.delivery-map { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.delivery-map select { width: auto; min-height: 32px; padding: 4px 8px; }

/* ---------- Sənədlər ---------- */
.docs-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.docs-folders { padding: 10px; margin: 0; position: sticky; top: 12px; }
.docs-folders nav { display: grid; gap: 1px; margin-bottom: 10px; }
.docs-folder { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 7px; text-decoration: none; color: inherit; font-size: 14px; }
.docs-folder:hover { background: #f5f8fd; }
.docs-folder.is-on { background: #e8effc; color: var(--aegean); font-weight: 600; }
.docs-folder .count { margin-left: auto; color: #fff; font-size: 12.5px; }
.docs-folder.depth-1 { padding-left: 26px; }
.docs-folder.depth-2 { padding-left: 42px; }
.docs-folder.depth-3 { padding-left: 58px; }
.docs-folder-form { margin-top: 8px; }
.docs-folder-form summary { list-style: none; cursor: pointer; display: inline-flex; }
.docs-folder-form summary::-webkit-details-marker { display: none; }
.docs-folder-form form { display: grid; gap: 6px; margin-top: 8px; }
.docs-main { margin-bottom: 0; }
.docs-crumb { font-size: 15px; }
.docs-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.docs-upload input[type=file] { width: auto; max-width: 100%; min-height: 0; padding: 4px; }
.docs-move { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.tech-requests .section-title { margin-top: 0; }
.tech-request { border-top: 1px solid var(--line); padding: 10px 0; }
.tech-request header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tech-need { margin: 6px 0; white-space: pre-wrap; }
.tech-form { display: flex; gap: 6px; flex-wrap: wrap; }
.tech-form input[type=text] { flex: 1 1 260px; width: auto; }
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; } .docs-folders { position: static; } }

/* ---------- Kontakte / Produkte ---------- */
.contact-form { max-width: 880px; }
.contact-form textarea { width: 100%; }
.plain-fieldset[disabled] input, .plain-fieldset[disabled] select, .plain-fieldset[disabled] textarea { background: var(--wash); color: var(--ink); }


/* ---------- Verkauf ---------- */
.sale-form textarea { width: 100%; }
.sale-edit-lines td { padding: 4px 3px; vertical-align: top; }
.sale-edit-lines select, .sale-edit-lines input, .sale-edit-lines textarea { width: 100%; min-width: 0; }
.sale-edit-lines td:nth-child(1) { min-width: 170px; }
.sale-edit-lines td:nth-child(2) { min-width: 280px; }
.sale-edit-lines td:nth-child(3), .sale-edit-lines td:nth-child(4) { min-width: 64px; width: 64px; }
.sale-edit-lines td:nth-child(5) { min-width: 90px; width: 90px; }
.sale-edit-lines td:nth-child(6) { min-width: 60px; width: 60px; }
.sale-edit-lines td:nth-child(7) { min-width: 120px; }
.sale-edit-lines td:nth-child(8) { min-width: 84px; }
.sale-edit-lines td:nth-child(9) { min-width: 80px; text-align: right; padding-top: 10px; }
.sale-edit-lines td:nth-child(10) { width: 36px; }
.sale-edit-lines tr.is-text td:nth-child(n+3):nth-child(-n+9) > * { visibility: hidden; }
.sale-lines td.pre { white-space: pre-line; }
.sale-lines .num, .sale-edit-lines .num { text-align: right; }

/* ---------- Kassensturz ---------- */
.cash-days { display: flex; gap: 6px; overflow-x: auto; margin: 6px 0 14px; padding-bottom: 4px; }
.cash-days a { flex: 0 0 auto; min-width: 58px; text-align: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-2); text-decoration: none; font-size: 13px; line-height: 1.25; }
.cash-days a.is-done { border-color: var(--ok); color: var(--ok); }
.cash-days a.is-on { background: var(--aegean); border-color: var(--aegean); color: #fff; }
.cash-form { max-width: 720px; }
.cash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; margin: 8px 0 12px; }
.cash-den { display: grid; grid-template-columns: 64px 1fr 76px; align-items: center; gap: 8px; }
.cash-den input { width: 100%; text-align: right; font-size: 16px; }
.cash-face { display: inline-block; text-align: center; padding: 4px 0; border-radius: 6px; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.cash-face.is-note { background: #e6eefc; color: var(--aegean-deep); }
.cash-face.is-coin { background: #f3efe4; color: #6b5a2a; border-radius: 999px; }
.cash-line { font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.cash-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; margin: 4px 0 14px; background: var(--wash); border-radius: 8px; }
.cash-total strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.cash-result { margin: 12px 0 4px; }
.pos-table tr.is-missing td { background: #fff5f5; }

/* ---------- chat: corner button + panel (app/chat.php, assets/chat.js) ---------- */
.chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 54px; height: 54px; border-radius: 50%; border: 0; padding: 0;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            background: var(--aegean); color: #fff; box-shadow: 0 6px 18px -6px rgba(15, 46, 140, .6), 0 2px 6px rgba(15, 36, 56, .18); }
.chat-fab:hover { background: var(--aegean-deep); }
.chat-fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.chat-badge { position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px;
              background: var(--danger); color: #fff; font: 700 12px/21px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff; }
body.chat-open .chat-fab { background: var(--aegean-deep); }

.chat-panel { position: fixed; right: 20px; bottom: 86px; z-index: 46; width: min(500px, calc(100vw - 40px)); height: min(740px, calc(100vh - 150px));   /* 380 → 500 px wide, 620 → 740 px high, the top bar stays free (owner, 24.10.2026) */
              display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
              box-shadow: 0 18px 48px -12px rgba(15, 36, 56, .35); overflow: hidden; font-size: 14px; line-height: 1.4; }
.chat-panel[hidden] { display: none; }
.chat-panel.is-page { position: static; width: auto; max-width: 860px; height: calc(100vh - 150px); min-height: 420px; box-shadow: none; z-index: auto; }
/* the panel's parts below the list column (chat.js wraps them); two columns on a wide screen: list | conversation (24.10.2026) */
.chat-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.chat-side { display: none; }
.chat-panel.is-split { flex-direction: row; }
.chat-panel.is-split:not(.is-page) { width: min(880px, calc(100vw - 40px)); height: min(820px, calc(100vh - 150px)); }
.chat-panel.is-split.is-page { max-width: 1100px; }
.chat-panel.is-split .chat-side { display: flex; flex-direction: column; flex: 0 0 290px; min-width: 0; border-right: 1px solid var(--line); background: #fff; }
.chat-side-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: 53px; border-bottom: 1px solid var(--line); }
.chat-side-head strong { flex: 1; font-size: 15px; }
.chat-side-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.chat-side .chat-room { padding: 9px 12px; }
.chat-side .chat-room.is-on { background: var(--wash); box-shadow: inset 3px 0 0 var(--aegean); }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.chat-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-head-text strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-icon-btn { flex: none; width: 32px; height: 32px; border: 0; border-radius: 4px; background: none; color: var(--ink-2);
                 font-size: 24px; line-height: 1; cursor: pointer; padding: 0; }
.chat-icon-btn:hover { background: var(--wash); }
.chat-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; background: #fff; }
/* a conversation: a soft dotted wall behind the bubbles */
.chat-body:has(> .chat-msgs) { background-color: #eef2f8; background-image: radial-gradient(rgba(27, 79, 216, .07) 1px, transparent 1.2px); background-size: 16px 16px; }
.chat-loading, .chat-empty { color: var(--muted); text-align: center; padding: 28px 16px; margin: 0; }
.chat-notice { position: sticky; bottom: 8px; margin: 8px; padding: 8px 12px; border-radius: 4px; background: var(--danger-wash); color: var(--danger); font-size: 13px; white-space: pre-line; }

.chat-rooms, .chat-users { list-style: none; margin: 0; padding: 0; }
.chat-room, .chat-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line);
                         background: #fff; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.chat-room:hover, .chat-user:hover { background: var(--wash); }
.chat-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--wash); color: var(--aegean-deep);
               display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.chat-avatar-all { background: var(--aegean); color: #fff; }
.chat-avatar-group { background: #e6f1ea; color: var(--ok); }
.chat-room-text, .chat-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-room-top, .chat-room-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-room-top strong { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-room-top time { color: var(--muted); font-size: 12px; }
.chat-room-last { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-room.is-unread .chat-room-last { color: var(--ink); }
.chat-unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--aegean); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.chat-user-text small { color: var(--muted); font-size: 12px; }
.chat-user .chat-pick { display: none; }
.chat-new.is-group .chat-user .chat-pick { display: block; flex: none; }
.chat-new { padding-bottom: 8px; }
.chat-search { display: block; width: calc(100% - 24px) !important; margin: 12px; }
.chat-groupbox { margin: 0 12px 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.chat-groupbox summary { cursor: pointer; font-weight: 700; color: var(--aegean-deep); }
.chat-groupbox[open] summary { margin-bottom: 8px; }
.chat-groupbox input[type=text] { margin-bottom: 6px; }
.chat-hint { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.chat-people { padding: 4px 12px; margin: 0; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

.chat-older { display: block; margin: 10px auto 0; }
.chat-msgs { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.chat-day { position: sticky; top: 6px; z-index: 1; align-self: center; margin: 6px 0 2px; padding: 3px 12px; border-radius: 12px; background: rgba(255, 255, 255, .92);
            color: var(--ink-2); font-size: 12px; font-weight: 500; box-shadow: 0 1px 2px rgba(15, 36, 56, .12); }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; }
.chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg-name { font-size: 12px; font-weight: 700; color: var(--aegean-deep); margin: 0 0 2px 12px; }
.chat-bubble { padding: 7px 11px 6px; border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: 0 1px 1.5px rgba(15, 36, 56, .13);
               white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.42; animation: chat-in .16s ease-out; }
.chat-msg.is-cont .chat-bubble { border-top-left-radius: 5px; }
.chat-msg.is-mine .chat-bubble { background: linear-gradient(160deg, #2a5fe6, var(--aegean) 60%); color: #fff; border-radius: 16px 16px 5px 16px;
                                 box-shadow: 0 1px 2px rgba(15, 46, 140, .3); }
.chat-msg.is-mine.is-cont .chat-bubble { border-top-right-radius: 5px; }
@keyframes chat-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .chat-bubble { animation: none; } }
/* the time sits in the last line when there is room, as on the phone */
.chat-bubble time { float: right; margin: 7px -2px -3px 10px; font-size: 10.5px; line-height: 1; color: var(--muted); white-space: nowrap; }
.chat-bubble.is-voice time, .chat-bubble.is-image time, .chat-bubble:has(.chat-file) time { float: none; display: block; text-align: right; margin: 3px 0 0; }
.chat-bubble.is-emoji { background: none; box-shadow: none; padding: 0 2px; font-size: 38px; line-height: 1.15; }
.chat-msg.is-mine .chat-bubble.is-emoji { background: none; box-shadow: none; color: inherit; }
.chat-bubble.is-emoji time { float: none; display: block; text-align: right; font-size: 10.5px; color: var(--muted) !important; }
.chat-msg.is-mine .chat-bubble time { color: rgba(255, 255, 255, .75); }
.chat-msg.is-mine .chat-bubble a { color: #fff; }
.chat-form { display: flex; gap: 6px; align-items: flex-end; padding: 8px 10px; border-top: 1px solid var(--line); background: #fff; }
.chat-form[hidden] { display: none; }
.chat-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; padding: 0 3px 0 14px; border-radius: 21px;
              background: var(--paper); border: 1px solid var(--line); transition: border-color .15s, background .15s, box-shadow .15s; }
.chat-field:focus-within { background: #fff; border-color: var(--aegean); box-shadow: 0 0 0 3px var(--wash); }
.chat-field textarea { flex: 1; min-width: 0; resize: none; min-height: 40px; max-height: 140px; padding: 9px 0; line-height: 1.4;
                       border: 0; border-radius: 0; background: transparent; outline: none; box-shadow: none; }
.chat-field textarea:focus-visible { outline: none; }
.chat-tool { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
             border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.chat-tool:hover, .chat-tool.is-on { background: var(--wash); color: var(--aegean); }
.chat-tool:disabled { opacity: .45; cursor: default; }
.chat-tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-tool svg .fill { fill: currentColor; stroke-width: 1.4; }
.chat-field .chat-tool { width: 36px; height: 36px; margin-bottom: 2px; }
.chat-round { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
              background: var(--aegean); color: #fff; cursor: pointer; box-shadow: 0 2px 6px -1px rgba(15, 46, 140, .45);
              transition: background .15s, transform .12s; animation: chat-pop .14s ease-out; }
.chat-round:hover { background: var(--aegean-deep); }
.chat-round:active { transform: scale(.92); }
.chat-round:disabled { opacity: .5; cursor: default; }
.chat-round svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-send svg { margin-left: 3px; }
@keyframes chat-pop { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chat-round { animation: none; } }
.chat-head-avatar { width: 34px; height: 34px; font-size: 12px; }

/* emoji: a sheet above the input */
.chat-emoji { display: flex; flex-direction: column; height: 236px; border-top: 1px solid var(--line); background: #fff; }
.chat-emoji[hidden] { display: none; }
.chat-emoji-tabs { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.chat-emoji-tab { flex: 1; height: 34px; border: 0; border-radius: 8px; background: none; font-size: 19px; cursor: pointer; opacity: .75;
                  transition: opacity .12s, background .12s; }
.chat-emoji-tab:hover { opacity: .9; background: var(--paper); }
.chat-emoji-tab.is-on { opacity: 1; filter: none; background: var(--wash); }
.chat-emoji-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); align-content: start; padding: 6px; }
.chat-emoji-item { height: 38px; border: 0; border-radius: 8px; background: none; font-size: 24px; line-height: 1; cursor: pointer; padding: 0;
                   transition: background .1s, transform .1s; }
.chat-emoji-item:hover { background: var(--paper); transform: scale(1.15); }
.chat-emoji-none { grid-column: 1 / -1; color: var(--muted); text-align: center; margin: 24px 0; }

@media (max-width: 860px) {
    .chat-fab { right: 14px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); width: 50px; height: 50px; }
    body.page-catalog .chat-fab { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 84px); }   /* above the order bar */
    .chat-panel:not(.is-page) { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; z-index: 60;
                                padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    body.chat-open { overflow: hidden; }
    body.chat-open .chat-fab { display: none; }
    .chat-panel.is-page { height: calc(100vh - var(--tabbar-h) - 140px); }
    .chat-form textarea { font-size: 16px; }   /* iOS zooms into smaller fields */
}
@media print { .chat-fab, .chat-panel { display: none !important; } }
.chat-msg.is-cont { margin-top: -3px; }

/* ---------- promotions of the five markets (a_promos, order, collect list) ---------- */
.mk { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 700; line-height: 18px; color: #fff; vertical-align: 1px; white-space: nowrap; }
.mk-aligro { background: #c8102e; }
.mk-denner { background: #b1001e; }
.mk-lidl { background: #0050aa; }
.mk-volg { background: #e2001a; }
.mk-landi { background: #00843d; }
.mk-prodega { background: #e30613; }
.mk-thraki { background: #0d5eaf; }            /* the Greek ones: the flag's blue */
.mk-griechischerwein { background: #6b2140; }
/* Aldıqlarımız (a_bought): an article opens its purchases */
.bought-filters input[type=search] { min-width: 220px; }
.bought-item summary { cursor: pointer; list-style: none; }
.bought-item summary::-webkit-details-marker { display: none; }
.bought-item summary strong { border-bottom: 1px dashed var(--line); }
.bought-item[open] summary strong { border-bottom-color: var(--aegean); }
.bought-hist { margin: 8px 0 4px; font-size: 13px; }
.bought-hist td { padding: 3px 8px 3px 0; border: 0; }
.table.bought small.pos { color: var(--ok); }
.table.bought small.neg { color: var(--danger, #c0392b); }
.mk-strip { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: -4px 0 14px; }
.mk-scan { display: inline-flex; gap: 6px; align-items: center; }
.mk-scan.has-error small { color: var(--danger); }
.tabs-line { display: flex; flex-wrap: wrap; gap: 4px 18px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs-line a { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-2); }
.tabs-line a.is-on { color: var(--aegean-deep); border-bottom-color: var(--aegean); font-weight: 700; }
.promo-hint { color: var(--ok) !important; }
a.promo-hint { font-size: 12.5px; text-decoration: none; }
a.promo-hint:hover { text-decoration: underline; }

/* ---------- e-mail mailboxes (a_mail) ---------- */
.mail-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px; align-items: start; }
.mail-box.is-on { border-color: var(--aegean); box-shadow: inset 3px 0 0 var(--aegean); }
.mail-box-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.mail-box .flash { margin: 6px 0 8px; }
.mail-help h3 { margin: 4px 0 6px; }
.mail-help ol { margin: 0 0 12px; padding-left: 18px; }
.mail-more summary { cursor: pointer; margin: 4px 0 8px; }
.mail-sub { margin: 18px 0 8px; }
@media (max-width: 1100px) { .mail-grid { grid-template-columns: 1fr; } }

/* ---------- the mailbox (a_mailbox) ---------- */
.mbx { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 16px; align-items: start; }
.mbx-list { padding: 8px 0 0; }
.mbx-list .tabs-line { padding: 0 12px; margin-bottom: 8px; }
.mbx-search { padding: 0 12px 8px; }
.mbx-search input { width: 100%; }
.mbx-items { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 260px); overflow-y: auto; }
.mbx-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mbx-item:hover { background: var(--wash); }
.mbx-item.is-on { background: var(--wash); box-shadow: inset 3px 0 0 var(--aegean); }
.mbx-item.is-unread strong, .mbx-item.is-unread .mbx-subject { font-weight: 700; color: var(--ink); }
.mbx-top { display: flex; justify-content: space-between; gap: 8px; }
.mbx-top strong { font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-top time { color: var(--muted); font-size: 12px; flex: none; }
.mbx-subject { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mbx-empty { padding: 16px 12px; }
.mbx-mail h2 { margin-bottom: 8px; }
.mbx-head { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0 0 10px; font-size: 13px; }
.mbx-head dt { color: var(--muted); }
.mbx-head dd { margin: 0; overflow-wrap: anywhere; }
.mbx-files { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mbx-frame { width: 100%; height: 60vh; border: 1px solid var(--line); border-radius: 4px; background: #fff; margin-top: 10px; }
.mbx-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 inherit; margin: 10px 0 0; max-height: 60vh; overflow: auto; }
.mbx-compose textarea { font: 13px/1.5 ui-monospace, Menlo, monospace; }
@media (max-width: 1100px) { .mbx { grid-template-columns: 1fr; } .mbx-items { max-height: 50vh; } }
.mail-steps { margin: 6px 0 12px; padding-left: 18px; }
.mail-steps li { margin-bottom: 6px; }
.mail-copy { display: inline-block; margin-top: 4px; user-select: all; word-break: break-all; }

/* ---------- voice messages and agents in the chat ---------- */
.chat-form.is-recording { align-items: center; }
.chat-rec { flex: 1; display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.chat-rec-cancel:hover { color: var(--danger); background: var(--danger-wash); }
.chat-rec[hidden] { display: none; }
.chat-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: chat-rec 1s ease-in-out infinite; }
.chat-rec-time { flex: 1; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--danger); }
@keyframes chat-rec { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .chat-rec-dot { animation: none; } }
.chat-bubble.is-voice { display: flex; flex-direction: column; gap: 2px; min-width: 230px; }
.chat-bubble.is-voice audio { width: 100%; max-width: 280px; height: 36px; }
.chat-voice-len { font-size: 12px; opacity: .8; }

/* ---------- documents and pictures in the chat ---------- */
.chat-bubble.is-image { padding: 4px 4px 5px; }
.chat-img { display: block; }
.chat-img img { display: block; max-width: min(260px, 100%); max-height: 320px; border-radius: 7px; object-fit: cover; background: var(--wash); }
.chat-file { display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 280px; padding: 6px 8px 6px 6px; border-radius: 6px;
    background: rgba(0, 0, 0, .04); color: inherit; text-decoration: none; }
.chat-msg.is-mine .chat-file { background: rgba(255, 255, 255, .16); }
.chat-file:hover { background: rgba(0, 0, 0, .08); }
.chat-msg.is-mine .chat-file:hover { background: rgba(255, 255, 255, .26); }
.chat-file-icon { flex: none; width: 38px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 4px;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.chat-file-meta { display: flex; flex-direction: column; min-width: 0; }
.chat-file-meta strong { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.chat-file-meta small { font-size: 12px; opacity: .75; }
.chat-caption { margin-top: 5px; padding: 0 4px; white-space: pre-wrap; }
.chat-bubble.is-image .chat-caption, .chat-bubble.is-image time { padding: 0 6px; }
.chat-notice.is-progress { background: var(--wash); color: var(--ink-2); }
.chat-panel.is-drop .chat-body { outline: 2px dashed var(--aegean); outline-offset: -8px; background: var(--wash); }
.chat-msg-name.is-bot { color: var(--ok); }
.chat-bot-tag { margin-left: 6px; padding: 0 5px; border-radius: 3px; background: var(--ok-wash); color: var(--ok); font-size: 10px; font-weight: 700; text-transform: uppercase; vertical-align: 1px; }

/* ---------- the reminder to switch notifications on (layout, app.js) ---------- */
.push-nag { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 6px;
            background: var(--aegean); color: #fff; box-shadow: 0 6px 16px -10px rgba(15, 46, 140, .8); }
.push-nag[hidden] { display: none; }
.push-nag-ico .ico { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.7; }
.push-nag-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.35; }
.push-nag-text strong { font-size: 14px; }
.push-nag .btn-primary { background: #fff; color: var(--aegean-deep); border-color: #fff; font-weight: 700; flex: none; }
@media (max-width: 640px) { .push-nag { margin: 8px 8px 12px; flex-wrap: wrap; } .push-nag .btn { width: 100%; } }

/* ---------- talking to agents ---------- */
.chat-list-head { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--paper); }
.chat-avatar-agent { background: var(--ok-wash); color: var(--ok); }
.chat-new.is-group [data-agent] { display: none; }
.chat-typing { align-self: flex-start; margin: 2px 0 0 4px; font-size: 12px; color: var(--muted); font-style: italic; }
.chat-typing::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: chat-dots 1.2s steps(4) infinite; }
@keyframes chat-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.chat-board-note { padding: 10px 12px; border-top: 1px solid var(--line); background: var(--ok-wash); color: var(--ok); font-size: 13px; }
.chat-board-note[hidden] { display: none; }

/* replies, like WhatsApp (owner, 24.10.2026): the quote in the bubble, the bar above the input, ↩ by the mouse, a swipe on the phone */
.chat-msg { position: relative; align-self: flex-start; transition: transform .18s ease-out; }   /* as wide as its bubble: ↩ sits next to it */
.chat-msg.is-swiping { transition: none; }
.chat-msg::before { content: '↩'; position: absolute; left: -30px; top: 50%; transform: translateY(-50%) scale(.6); width: 26px; height: 26px; border-radius: 50%;
                    display: grid; place-items: center; background: #fff; color: var(--aegean); font-size: 15px; box-shadow: 0 1px 3px rgba(15, 36, 56, .2);
                    opacity: 0; transition: opacity .12s, transform .12s; pointer-events: none; }
.chat-msg.is-swiping::before { opacity: .55; }
.chat-msg.is-swipe-ready::before { opacity: 1; transform: translateY(-50%) scale(1); }
.chat-reply-btn { position: absolute; top: 50%; right: -34px; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%;
                  display: grid; place-items: center; padding: 0; background: rgba(255, 255, 255, .95); color: var(--aegean); font-size: 15px; line-height: 1;
                  box-shadow: 0 1px 3px rgba(15, 36, 56, .2); cursor: pointer; opacity: 0; transition: opacity .12s; }
.chat-msg.is-mine .chat-reply-btn { right: auto; left: -34px; }
.chat-msg:hover .chat-reply-btn, .chat-reply-btn:focus-visible { opacity: 1; }
@media (hover: none) { .chat-reply-btn { display: none; } }
.chat-quote { display: block; width: 100%; margin: 0 0 5px; padding: 5px 9px 6px; border: 0; border-left: 3px solid var(--aegean); border-radius: 8px;
              background: rgba(27, 79, 216, .07); color: inherit; font: inherit; text-align: left; white-space: normal; cursor: pointer; }
.chat-quote strong { display: block; font-size: 12px; color: var(--aegean-deep); }
.chat-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.chat-msg.is-mine .chat-quote { background: rgba(255, 255, 255, .16); border-left-color: #fff; }
.chat-msg.is-mine .chat-quote strong { color: #fff; }
.chat-msg.is-mine .chat-quote span { color: rgba(255, 255, 255, .85); }
.chat-reply-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px 0; border-top: 1px solid var(--line); background: #fff; }
.chat-reply-bar[hidden] { display: none; }
.chat-reply-bar:not([hidden]) + .chat-form { border-top: 0; }
.chat-reply-in { flex: 1; min-width: 0; padding: 5px 10px 6px; border-left: 3px solid var(--aegean); border-radius: 8px; background: var(--wash); }
.chat-reply-in strong { display: block; font-size: 12px; color: var(--aegean-deep); }
.chat-reply-in span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--ink-2); }
.chat-msg.is-flash .chat-bubble { animation: chat-flash 1.6s ease-out; }
.chat-share { display: inline-flex; align-items: center; gap: 4px; margin: 5px 0 0; padding: 3px 11px; border: 0; border-radius: 12px; cursor: pointer;
              background: rgba(27, 79, 216, .09); color: var(--aegean-deep); font: inherit; font-size: 12.5px; font-weight: 600; }
.chat-msg.is-mine .chat-share { background: rgba(255, 255, 255, .2); color: #fff; }
.chat-share:disabled { opacity: .5; }
@keyframes chat-flash { 0%, 35% { box-shadow: 0 0 0 3px #f5b400; } }
@media (prefers-reduced-motion: reduce) { .chat-msg { transition: none; } .chat-msg.is-flash .chat-bubble { animation: none; outline: 3px solid #f5b400; } }
button.chat-msg-name { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; margin: 0 0 2px 10px; }
button.chat-msg-name:hover .chat-bot-tag { background: var(--ok); color: #fff; }

/* ---------- product photos (schema v37) ---------- */
.pthumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; display: block; background: #fff; border: 1px solid var(--line); }
.pthumb-none { display: grid; place-items: center; color: var(--line-strong); background: var(--paper); border-style: dashed; }
.pthumb-none .ico { width: 20px; height: 20px; }
.pthumb-btn { flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.pthumb-add:hover .pthumb-none { color: var(--aegean); border-color: var(--aegean); }
.pthumb-add.is-busy { opacity: .45; pointer-events: none; }
.prow { grid-template-columns: 44px minmax(0, 1fr) 84px 136px; }
@media (max-width: 860px) {
    .prow { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 10px; }
    .prow > .pthumb-btn { grid-row: 1 / span 2; grid-column: 1; align-self: center; }
    .prow .pinfo { grid-column: 2; }
    .prow .pprice { grid-column: 2; }
    .prow .stepper { grid-column: 3; }
}
.pthumb-cell { width: 52px; }
.photo-field { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.photo-preview { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); flex: none; }
.photo-none { display: grid; place-items: center; color: var(--line-strong); background: var(--paper); border-style: dashed; }
dialog.photo-view { padding: 0; border: 0; border-radius: 10px; max-width: min(92vw, 640px); background: #fff; }
dialog.photo-view::backdrop { background: rgba(15, 36, 56, .7); }
dialog.photo-view img { display: block; max-width: 100%; max-height: 82vh; }
dialog.photo-view .sheet-close { position: absolute; top: 6px; right: 6px; background: rgba(255, 255, 255, .9); }

/* ---------- the «+» in the phone's tab bar ---------- */
.tab-plus { color: var(--aegean-deep); }
.tab-plus-btn { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -24px; border-radius: 50%;
    background: var(--aegean); color: #fff; box-shadow: 0 6px 16px rgba(27, 79, 216, .35), 0 0 0 4px #fff; }
.tab-plus-btn .ico { width: 28px; height: 28px; stroke-width: 2.4; }
.tab-plus:active .tab-plus-btn { transform: scale(.94); }

/* ---------- receipt camera (public/assets/scan.js) ---------- */
html.scan-lock, html.scan-lock body { overflow: hidden; }
.scan { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; display: none; touch-action: none; }
.scan.is-open { display: block; }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; left: 7%; right: 7%; top: calc(env(safe-area-inset-top) + 64px); bottom: calc(env(safe-area-inset-bottom) + 132px);
    border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); outline: 2px solid rgba(255, 255, 255, .9); }
.scan-frame::before, .scan-frame::after { content: ""; position: absolute; left: 50%; width: 34px; height: 4px; margin-left: -17px;
    border-radius: 2px; background: #fff; }
.scan-frame::before { top: -3px; }
.scan-frame::after { bottom: -3px; }
.scan-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); max-width: 92%; padding: 6px 12px; border-radius: 16px;
    background: rgba(0, 0, 0, .55); font-size: 13.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan.no-cam .scan-hint { white-space: normal; top: 40%; width: 80%; }
.scan-top, .scan-bottom { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.scan-top { top: 0; padding-top: calc(env(safe-area-inset-top) + 10px); }
.scan-bottom { bottom: 0; padding-bottom: calc(env(safe-area-inset-bottom) + 22px); }
.scan-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; }
.scan-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scan-icon.is-on { background: #ffd54a; color: #000; }
.scan-count { font-weight: 600; font-size: 14px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.scan-shot { width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 5px; cursor: pointer; }
.scan-shot span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.scan-shot:active span { transform: scale(.9); }
.scan-done { min-width: 76px; height: 46px; border: 0; border-radius: 23px; background: rgba(0, 0, 0, .45); color: #fff; font: inherit; font-weight: 600; visibility: hidden; }
.scan.has-pages .scan-done { visibility: visible; background: var(--aegean); }
.scan.flash::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: .7; pointer-events: none; }
.scan-review { position: absolute; inset: 0; z-index: 2; background: #111; display: flex; flex-direction: column; }
.scan-review-img { flex: 1; min-height: 0; object-fit: contain; width: 100%; padding: calc(env(safe-area-inset-top) + 12px) 12px 12px; }
.scan-review-close { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + 10px); left: 12px; }
/* a document's pages over the page (app.js, [data-lightbox]) */
html.lightbox-lock, html.lightbox-lock body { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: #0c101a; }
.lightbox-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) 14px 10px; }
.lightbox-btn { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 14px; border: 0; border-radius: 23px; background: rgba(255, 255, 255, .16);
    color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.lightbox-close { width: 46px; padding: 0; font-size: 30px; line-height: 1; background: #fff; color: #111; }
.lightbox-pages { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; display: grid; gap: 10px; justify-items: center; align-content: start;
    padding: 0 10px calc(env(safe-area-inset-bottom) + 18px); }
.lightbox-pages img { display: block; width: min(100%, 1000px); height: auto; border-radius: 4px; background: #fff; cursor: zoom-in; }
.lightbox.is-zoomed .lightbox-pages { justify-items: start; }
.lightbox.is-zoomed .lightbox-pages img { width: 230%; max-width: none; cursor: zoom-out; }
@media (hover: none) { .lightbox-file { display: none; } }   /* a phone: the PDF tab would again have no way back */
.scan-review-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 12px calc(env(safe-area-inset-bottom) + 16px); background: #1b1b1b; }
.scan-btn, .scan-chip { min-height: 46px; padding: 0 16px; border-radius: 23px; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.scan-chip { background: rgba(255, 255, 255, .12); }
.scan-btn-primary { background: var(--aegean); border-color: var(--aegean); font-weight: 600; min-width: 110px; }
.scan.is-busy .scan-btn-primary, .scan.is-busy .scan-shot { opacity: .5; pointer-events: none; }
.scan.is-files .scan-video, .scan.is-files .scan-frame, .scan.is-files .scan-top, .scan.is-files .scan-bottom { display: none; }
.scan-toast { position: absolute; z-index: 3; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 120px); transform: translateX(-50%); max-width: 90%;
    padding: 10px 16px; border-radius: 10px; background: var(--ok); color: #fff; font-weight: 500; text-align: center; }
.scan-toast.is-bad { background: var(--danger); }
.scan.is-files .scan-toast { bottom: 50%; }
@media (min-width: 861px) {
    .scan-frame { left: 50%; right: auto; width: min(420px, 80vw); transform: translateX(-50%); }
}

/* ---------- location and goods to bring along (schema v38) ---------- */
.loc-nag { background: var(--ok); }
.sheet-sub { display: block; font-size: 12px; font-weight: 400; }
.who-where h2 { display: flex; align-items: center; gap: 6px; font-size: 16px; margin: 0 0 8px; }
.who-where h2 .ico { width: 18px; height: 18px; color: var(--aegean); }
.who-where-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.who-where-list strong { display: inline-block; min-width: 64px; }
.transfer-new { margin: 14px 0; }
.transfer-new summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
.transfer-new summary::-webkit-details-marker { display: none; }
.transfer-new .ico { width: 18px; height: 18px; }
.transfer-form { margin-top: 12px; }
.transfer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.transfer { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.transfer.is-done, .transfer.is-cancelled { opacity: .6; }
.transfer-route { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.transfer-route .badge { margin-left: auto; }
.transfer-what { font-size: 16px; font-weight: 600; margin: 4px 0; }
.transfer .small .ico { width: 13px; height: 13px; vertical-align: -2px; }
.transfer-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.badge-t-open { background: var(--amber-wash); color: var(--amber); }
.badge-t-taken { background: var(--wash); color: var(--aegean-deep); }
.badge-t-done { background: var(--ok-wash); color: var(--ok); }
.badge-t-cancelled { background: var(--paper); color: var(--muted); }

/* ---------- the assistant: 🎤 in the tab bar, voice messages as text (schema v39) ---------- */
.tab-talk .ico { color: var(--aegean); }
.chat-transcript { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(0, 0, 0, .15); font-size: 13.5px; font-style: italic; white-space: pre-wrap; }

/* ---------- delivery platforms (schema v40) ---------- */
.delivery-how ol { margin: 6px 0 8px; padding-left: 20px; display: grid; gap: 6px; }
.delivery-how summary { cursor: pointer; }
.delivery-how { margin-top: 20px; }
.delivery-filter { align-items: flex-end; margin-bottom: 6px; }
.delivery-orders tr.is-cancelled td { color: var(--muted); }
.delivery-orders tr.is-cancelled td strong { font-weight: 400; text-decoration: line-through; }
.delivery-views { margin: -4px 0 14px; }
.delivery-orders tr.has-items { cursor: pointer; }
.delivery-orders tr.has-items:hover td { background: var(--wash); }
.delivery-caret { display: inline-block; transition: transform .15s; color: var(--aegean); }
.delivery-orders tr.is-open .delivery-caret { transform: rotate(90deg); }
.delivery-detail td { background: var(--wash); padding: 8px 14px 10px; }
.delivery-items { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; max-width: 560px; }
.delivery-items li { display: flex; gap: 8px; align-items: baseline; }
.delivery-items .qty { font-weight: 600; min-width: 26px; }
.delivery-items .num { margin-left: auto; font-variant-numeric: tabular-nums; }
.delivery-detail p { margin: 0; }
.badge-warn { background: var(--amber-wash); color: var(--amber); }
.delivery-stars { color: #f2a900; letter-spacing: 1px; font-size: .9em; }
.delivery-spread { display: grid; gap: 4px; max-width: 420px; padding: 12px 14px; }
.delivery-spread-row { display: grid; grid-template-columns: 70px 1fr 44px; gap: 8px; align-items: center; color: inherit; text-decoration: none; font-size: 13px; }
.delivery-spread-row .bar { height: 8px; background: var(--wash); border-radius: 4px; overflow: hidden; }
.delivery-spread-row .bar span { display: block; height: 100%; background: #f2a900; }
.delivery-spread-row .num { text-align: right; }
.delivery-reviews { display: grid; gap: 10px; max-width: 820px; }
.delivery-review { margin: 0; padding: 12px 14px; }
.delivery-review header { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.delivery-review p { margin: 6px 0 0; overflow-wrap: anywhere; }
.delivery-review-items { margin: 6px 0 0; padding-left: 18px; }
.delivery-reply { color: var(--ink-2); }
@media (max-width: 640px) {
    .delivery-detail td { padding: 8px 4px; }
    .delivery-orders tbody tr.delivery-detail { margin-top: -10px; border-top: 0; border-radius: 0 0 12px 12px; }
}
.delivery-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.stat-card { padding: 12px 14px; }
.stat-big { font-size: 22px; font-weight: 600; margin: 4px 0; }

/* ---------- Poçt: one tab per mailbox ---------- */
.mbx-boxes { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.mbx-boxes a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 18px;
    background: var(--card); color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.mbx-boxes a .ico { width: 16px; height: 16px; }
.mbx-boxes a.is-on { border-color: var(--aegean); background: var(--wash); color: var(--aegean-deep); font-weight: 600; }
.mbx-boxes a.is-error { color: var(--muted); }
.mbx-boxes .count { background: var(--aegean); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11.5px; line-height: 18px; }
.mbx-box-err { background: var(--danger); color: #fff; border-radius: 50%; width: 16px; height: 16px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; }
.mbx-boxes .mbx-box-add { border-style: dashed; color: var(--aegean-deep); }

/* ---------- Kassensturz: cards in one row, a colour per branch ---------- */
:root {
    --br-bern: #1B4FD8;  --br-bern-wash: #f2f5fe;
    --br-spiez: #0d7a68; --br-spiez-wash: #eef7f4;
    --br-bueren: #b8541f; --br-bueren-wash: #fdf3ec;
}
.br-bern { --br: var(--br-bern); --br-wash: var(--br-bern-wash); }
.br-spiez { --br: var(--br-spiez); --br-wash: var(--br-spiez-wash); }
.br-bueren { --br: var(--br-bueren); --br-wash: var(--br-bueren-wash); }
.br-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--br-wash, var(--wash)); color: var(--br, var(--ink)); font-weight: 600; font-size: 13px; white-space: nowrap; }
.br-chip::before, .br-dot { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--br, var(--muted)); flex: none; }
.br-dot { margin-right: 4px; vertical-align: 1px; }
.pos-table tr.br-row td { background: var(--br-wash); }
.pos-table tr.br-row td:first-child { box-shadow: inset 4px 0 0 var(--br); }
.pos-table tr.br-row:hover td { background: #fff; }

.cash-kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin: 8px 0 18px; }
.cash-kpis > div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cash-kpis span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cash-kpis strong { font-size: 19px; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cash-kpis small { font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
.cash-kpis small span { font-size: inherit; color: inherit; display: block; }
.cash-kpis .is-key { border-color: var(--aegean); box-shadow: inset 0 3px 0 var(--aegean); }
.cash-kpis .is-count { background: transparent; border-style: dashed; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; align-content: start; }
.cash-kpis .is-count div { display: flex; flex-direction: column; min-width: 0; }
.cash-kpis .is-count span { font-size: 11px; }
.cash-kpis .is-count strong { font-size: 15px; }
.cash-kpis .is-over strong { color: var(--amber); }
@media (max-width: 1250px) {
    .cash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .cash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cash-kpis strong { font-size: 17px; }
}

/* ---------- bexio ↔ our system (a_bexio) ---------- */
.mirror { max-width: 760px; }
.mirror-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.mirror-table td.num, .mirror-table th.num { white-space: nowrap; }
.mirror-mark { width: 28px; text-align: center; font-weight: 700; color: var(--ok); }
.mirror-table tr.is-bad td { background: var(--danger-wash); }
.mirror-table tr.is-bad .mirror-mark { color: var(--danger); }
.mirror-diffs { margin: 8px 0; padding-left: 18px; color: var(--danger); font-size: 13px; }

/* ---------- Tapşırıqlar: what waits for the owner (a_tasks) ---------- */
.tasks { display: grid; gap: 12px; }   /* the whole width (owner, 22.10.2026) */
.tasks-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.tasks-bar .tasks-filter { margin-bottom: 0; flex: 1 1 auto; }
.tasks-sort { margin-left: auto; }
.tasks-sort label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tasks-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tasks-filter .chip { text-decoration: none; }
.tasks-filter .chip .count { background: var(--line-strong); }
.tasks-filter .chip.is-on .count { background: rgba(255, 255, 255, .3); }
.task { margin: 0; padding: 14px 16px; border-left: 4px solid var(--aegean); }
.task.is-done { border-left-color: var(--line-strong); opacity: .85; }
.task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.task-nr { font-size: 16px; color: var(--aegean-deep); }
.task-who { font-weight: 600; }
.task-text { margin: 0 0 10px; overflow-wrap: anywhere; }
/* the text laid out by tasks_text_html (24.10.2026): paragraphs, bullet lines, numbered lines */
.task-text p { margin: 0 0 8px; }
.task-text p:last-child { margin-bottom: 0; }
.task-list { margin: 4px 0 10px; padding-left: 22px; }
.task-list li { margin: 3px 0; }
ol.task-list { list-style: none; padding-left: 0; }
.task-item-date { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.task-item-amount { font-variant-numeric: tabular-nums; margin-right: 4px; }
.task-answers { display: flex; flex-wrap: wrap; gap: 6px; }
.task-answers:empty { display: none; }
.task-free { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.task-free input[type=text] { flex: 1; min-width: 0; }
.task-free input[type=date] { width: auto; }
.task-drop { margin-top: 8px; }
.task-drop summary { cursor: pointer; display: inline; }
.task-drop form { display: inline-flex; gap: 8px; align-items: center; margin-left: 8px; }
.task-answer { margin: 0; }

/* ---------- İşçilər (a_employees) ---------- */
.emp-search { align-items: center; gap: 10px; flex-wrap: wrap; max-width: 820px; }
.emp-search input[type=search] { flex: 1 1 220px; }
.emp-list { display: grid; gap: 8px; max-width: 980px; }
.emp { margin: 0; padding: 0; }
.emp.is-gone { opacity: .6; }
.emp-row { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(90px, 1fr)); gap: 4px 14px; align-items: center; padding: 11px 14px; cursor: pointer; list-style: none; }
.emp-row::-webkit-details-marker { display: none; }
.emp[open] .emp-row { border-bottom: 1px solid var(--line); }
.emp-name { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.emp-meta { font-size: 13.5px; }
.emp-detail { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; padding: 12px 14px; font-size: 14px; }
.emp-detail dt { color: var(--muted); }
.emp-detail dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 860px) {
    .emp-row { grid-template-columns: 1fr 1fr; }
    .emp-name { grid-column: 1 / -1; }
    .emp-detail { grid-template-columns: 1fr; gap: 2px; }
    .emp-detail dd { margin-bottom: 6px; }
}
.task-note { margin: 8px 0 0; padding: 6px 10px; border-radius: 6px; background: var(--wash); font-size: 14px; }
a.emp-row { color: inherit; text-decoration: none; margin: 0; }
a.emp-row:hover { border-color: var(--aegean); box-shadow: 0 2px 8px -4px rgba(15, 46, 140, .3); }
.emp-search select { width: auto; }
.hr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.hr-grid > .card { margin: 0; }
.hr-files { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.hr-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hr-files li form { margin-left: auto; }
.hr-upload { align-items: flex-end; gap: 10px; }
.hr-form .section-title { margin-top: 6px; }
.hr-radios { display: flex; gap: 6px; min-height: 40px; align-items: stretch; }
.hr-radios label { display: flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; cursor: pointer; white-space: nowrap; }
.hr-radios label:has(input:checked) { border-color: var(--aegean); background: var(--wash); color: var(--aegean-deep); font-weight: 600; }
.hr-radios input { width: auto; min-height: 0; margin: 0; }
.btn-link { border: 0; background: none; padding: 0; font: inherit; color: var(--aegean-deep); text-decoration: underline; cursor: pointer; }

/* ---------- HR card as in bexio Lohn: sections on the left (a_employee, a_employee_edit) ---------- */
.hr-card { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1100px; }
.hr-tabs { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; position: sticky; top: 12px; }
.hr-tabs a { display: flex; flex-direction: column; padding: 9px 14px; color: var(--ink-2); text-decoration: none; border-left: 3px solid transparent; font-size: 14px; }
.hr-tabs a small { font-size: 11px; color: var(--muted); }
.hr-tabs a:hover { background: var(--paper); }
.hr-tabs a.is-on { background: var(--wash); color: var(--aegean-deep); border-left-color: var(--aegean); font-weight: 600; }
.hr-tabs a + a { border-top: 1px solid var(--line); }
.hr-panel { margin: 0; min-height: 300px; }
.hr-group { margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--aegean-deep); }
.hr-group:first-child { margin-top: 0; }
.hr-row { margin: 0; padding: 3px 0; }
.hr-row dt small { display: block; font-size: 11px; }
.hr-list { margin: 0; padding-left: 18px; }
.hr-periods-view { max-width: 560px; }
.hr-form-row { align-items: flex-end; gap: 10px 14px; }
.hr-form-row .field { min-width: 180px; }
.hr-form .field > span small { font-weight: 400; }
.hr-wide { flex-basis: 100%; }
.hr-check { min-height: 40px; display: flex; align-items: center; gap: 8px; flex: 1 1 220px; }
.hr-months { display: flex; flex-wrap: wrap; gap: 4px; }
.hr-months label { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font-size: 13px; cursor: pointer; }
.hr-months label:has(input:checked) { border-color: var(--aegean); background: var(--wash); color: var(--aegean-deep); }
.hr-months input { width: auto; min-height: 0; margin: 0; }
.hr-locked-val { min-height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--ink-2); background: var(--paper); }
.hr-periods { border-collapse: collapse; }
.hr-periods th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 0 6px 4px 0; }
.hr-periods td { padding: 0 6px 6px 0; }
.hr-periods td input { min-width: 150px; }
@media (max-width: 860px) {
    .hr-card { grid-template-columns: 1fr; }
    .hr-tabs { position: static; flex-direction: row; overflow-x: auto; }
    .hr-tabs a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
    .hr-tabs a.is-on { border-bottom-color: var(--aegean); }
    .hr-tabs a + a { border-top: 0; border-left: 1px solid var(--line); }
}

/* ---------- Gecikmişlər (a_overdue) ---------- */
.ovd-rec { max-width: 980px; }
.ovd-total { font-weight: 600; margin: 0 0 10px; }
.count.is-quiet { background: var(--line-strong); }
a.ovd-card { color: inherit; text-decoration: none; }
a.ovd-card:hover { box-shadow: 0 2px 10px -4px rgba(15, 46, 140, .35); }
.ovd-card.is-late { border-left-color: var(--danger); }
.ovd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ovd-sum { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ovd-late { font-size: 13px; color: var(--ink-2); }
.ovd-late.is-late { color: var(--danger); font-weight: 600; }
.ovd-view { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.ovd-doc { margin: 0; padding: 10px; }
.ovd-pages { display: grid; gap: 10px; max-height: min(80vh, 1100px); overflow-y: auto; overscroll-behavior: contain; border-radius: 6px; background: var(--wash); padding: 6px; }
.ovd-pages img { display: block; width: 100%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.ovd-doc > .small { margin: 8px 2px 0; }
.ovd-doc-link { margin: 8px; }
.ovd-side { display: grid; gap: 12px; }
.ovd-side .card { margin: 0; }
.ovd-amount { display: flex; flex-direction: column; gap: 4px; }
.ovd-amount strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.ovd-choice { border-top: 1px solid var(--line); padding: 8px 0; }
.ovd-choice summary { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ovd-choice[open] summary { margin-bottom: 8px; }
.ovd-pay { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.ovd-pay .field { margin: 0; }
.ovd-clear { margin-top: 8px; }
.ovd-notes { scroll-margin-top: 80px; }
.ovd-view .section-title { margin-top: 0; }
.ovd-thread { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ovd-note { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); }
.ovd-note.is-agent { background: var(--wash); border-color: transparent; margin-left: 18px; }
.ovd-note-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ovd-note p { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 14px; }
.ovd-note-form { display: grid; gap: 8px; }
.ovd-note-form textarea { width: 100%; resize: vertical; min-height: 72px; font: inherit; }
.ovd-note-form .btn { justify-self: end; }
.ovd-note-badge { background: var(--wash); color: var(--aegean-deep); }
/* phone and tablet: one column – amount, the document to scan, the status, the details, the comments */
@media (max-width: 960px) {
    .ovd-view { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
    .ovd-side { display: contents; }
    .ovd-amount { order: 1; } .ovd-doc { order: 2; } .ovd-status { order: 3; } .ovd-details { order: 4; } .ovd-notes { order: 5; }
    .ovd-pages { max-height: none; overflow: visible; padding: 0; background: none; }
    .ovd-view .card { padding: 14px; }
}
@media (max-width: 600px) {
    .ovd-amount strong { font-size: 24px; }
    .ovd-pay { flex-direction: column; align-items: stretch; }
    .ovd-pay .field, .ovd-pay .btn, .ovd-pay select, .ovd-pay input { width: 100%; }
    .ovd-choice summary { flex-wrap: wrap; }
    .ovd-note.is-agent { margin-left: 8px; }
    .ovd-note-form .btn { justify-self: stretch; }
    .ovd-side .ovd-notes { margin-bottom: 72px; }   /* clear of the floating chat button */
}

/* ---------- HR: payroll history from bexio Lohn (a_payslips, a_payslip, the card's Lohnabrechnungen) ---------- */
.ps-table td, .ps-table th { white-space: nowrap; }
.ps-table tfoot th, .ps-table .ps-sum td, .ps-codes .ps-sum td, .ps-lines .ps-sum td { font-weight: 600; border-top: 1px solid var(--line-strong); }
.ps-slip { max-width: 820px; }
.ps-lines { margin-bottom: 4px; }
.ps-lines td { padding: 4px 8px 4px 0; vertical-align: top; }
.ps-lines .ps-code { width: 52px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ps-lines .ps-ag td { color: var(--muted); }
.ps-lines .num, .ps-table .num, .ps-codes .num { font-variant-numeric: tabular-nums; }
.ps-note { white-space: normal; padding: 8px 12px; border-left: 3px solid var(--line-strong); background: var(--paper); }
.ps-sections, .ps-tabs, .ps-months { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 10px; border-bottom: 1px solid var(--line); }
.ps-sections a, .ps-tabs a, .ps-months a { padding: 6px 2px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ps-sections a { font-size: 15px; font-weight: 600; }
.ps-tabs a, .ps-months a { font-size: 14px; }
.ps-sections a.is-on, .ps-tabs a.is-on, .ps-months a.is-on { color: var(--aegean-deep); border-bottom-color: var(--aegean); }
.ps-months { gap: 4px 12px; }
.ps-month-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.ps-account td, .ps-account th { white-space: nowrap; font-size: 13px; }
/* the payroll of our own (a_payrun, a_payrun_slip, my_pay) */
.prun-edit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.prun-edit .card { margin: 0; }
.prun-preview { position: sticky; top: 12px; }
.prun-rows td { padding: 3px 6px 3px 0; }
.prun-rows select { max-width: 260px; }
.prun-rows input { width: 100%; min-width: 70px; }
.prun-checks { gap: 6px 16px; align-items: center; }
.prun-pair { display: flex; gap: 6px; }
.prun-actions { gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.prun-report td, .prun-report th { white-space: nowrap; font-size: 13px; }
.mypay-main { max-width: 560px; margin: 32px auto; padding: 0 16px; }
.mypay-list { list-style: none; padding: 0; margin: 0; }
.mypay-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mypay-list li a { flex: 1; }
.mypay-list li { flex-wrap: wrap; }
.mypay-list li .muted { white-space: nowrap; }
.mypay-main h1 { margin-bottom: 12px; }
.mypay-main h2 { font-size: 17px; margin: 0 0 10px; }
.mypay-clock { text-align: center; }
.mypay-status { font-size: 17px; margin: 0 0 14px; }
.mypay-clock-btn { width: 100%; font-size: 22px; font-weight: 700; padding: 20px; border-radius: 14px; }
.mypay-clock-btn.is-out { background: var(--danger); border-color: var(--danger); }
.mypay-clock-btn:disabled { opacity: .6; }
.mypay-branches { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.mypay-branches p { width: 100%; margin: 0; }
.mypay-times { width: 100%; margin-top: 16px; text-align: left; }
.mypay-times td { padding: 6px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mypay-times td:last-child { white-space: normal; }
.mypay-sum td { font-weight: 600; border-bottom: 0; }
.mypay-lang { text-align: center; }
.time-flag td { background: var(--amber-wash); }
.time-form { gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.time-actions { white-space: nowrap; }
.time-actions details[open] { white-space: normal; min-width: 320px; }
@media (max-width: 860px) { .prun-edit { grid-template-columns: 1fr; } .prun-preview { position: static; } }
.task-settled { margin: 6px 0 0; color: #1d7a3a; font-size: 14px; overflow-wrap: anywhere; }   /* an answered task, in place (23.10.2026) */
/* the receipt's corners by hand (scan.js openEditor, 23.10.2026) */
.scan-edit { position: absolute; inset: 0; z-index: 4; background: #111; display: flex; flex-direction: column; }
.scan-edit-hint { margin: calc(env(safe-area-inset-top) + 12px) 16px 8px; color: #ddd; font-size: 14px; text-align: center; }
.scan-edit-stage { position: relative; flex: 1; min-height: 0; margin: 0 22px 12px; touch-action: none; }
.scan-edit-img { position: absolute; }
.scan-edit-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.scan-edit-svg polygon { fill: rgba(31, 111, 235, .14); stroke: #4f8ff7; stroke-width: 2.5; }
.scan-handle { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; touch-action: none; cursor: grab; }
.scan-handle::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; border: 3px solid #4f8ff7; box-shadow: 0 0 0 2px rgba(0, 0, 0, .4); }
.scan-handle.is-drag::after { inset: 8px; background: rgba(255, 255, 255, .6); }
/* live: the receipt outlined on the camera picture, the shutter takes it (scan.js liveTick, 23.10.2026) */
.scan-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.scan-live polygon { fill: rgba(255, 213, 74, .14); stroke: #ffd54a; stroke-width: 3; stroke-linejoin: round; transition: stroke .15s, fill .15s; }
.scan-live polygon.is-steady { fill: rgba(46, 204, 113, .18); stroke: #2ecc71; }
.scan-top-r { display: flex; align-items: center; gap: 10px; }
.scan-auto { height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 18px; background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .75); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.scan-auto.is-on { background: #2ecc71; border-color: #2ecc71; color: #06301a; }
.scan.has-live .scan-frame { box-shadow: none; outline-color: rgba(255, 255, 255, .35); }
.scan-top { z-index: 2; }
.scan-bottom { z-index: 2; }
/* Tapşırıqlar: bigger text (owner, 23.10.2026: «the texts are very small»; the admin layout's base is 13px) */
.tasks { font-size: 15.5px; line-height: 1.5; }
.tasks .task-text { font-size: 16.5px; line-height: 1.55; }
.tasks .task-head { font-size: 14.5px; }
.tasks .task-nr { font-size: 18px; }
.tasks .task-item-text { font-size: 15.5px; line-height: 1.45; }
.tasks .btn-sm { font-size: 14.5px; min-height: 36px; }
.tasks input[type=text], .tasks input[type=date] { font-size: 15.5px; min-height: 38px; }
.tasks .task-note, .tasks .task-settled, .tasks .task-answer { font-size: 15.5px; }
.tasks .task-drop summary { font-size: 13.5px; }
/* where a checked answer stands (app/audit.php): «Nataliya düşünür / Auditor yoxlayır / düzəldir» */
.chat-typing.is-status { font-style: normal; font-weight: 500; color: var(--aegean-deep); }

/* Sənədlər: the Arxivçi's proposals (24.10.2026) */
.docs-sug-mode { margin: 0 0 10px; }
.docs-sug-all { margin: 0 0 10px; }
.table.docs-sug td { vertical-align: top; }
.table.docs-sug td form { display: flex; gap: 6px; flex-wrap: wrap; }
.docs-sug-recent { margin-top: 14px; }

/* Bilik bazası (24.10.2026) */
.kb-active { display: flex; align-items: center; gap: 8px; }
.kb-link { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.kb-ver { flex: none; padding-top: 2px; }
.kb-main { min-width: 0; }
.kb-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.kb-head h2 { margin: 0 0 4px; }
.kb-summary { margin: 6px 0 0; }
.kb-body { margin-top: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.kb-body h2 { font-size: 1.15rem; margin: 18px 0 6px; }
.kb-body h3 { font-size: 1.02rem; margin: 18px 0 6px; color: var(--aegean); }
.kb-body h4 { font-size: .95rem; margin: 12px 0 4px; }
.kb-body ul { margin: 0 0 10px; padding-left: 20px; }
.kb-body li { margin: 3px 0; }
.kb-body p.nr { margin: 8px 0 3px; }
.kb-body table { border-collapse: collapse; width: 100%; margin: 4px 0 12px; font-size: .92rem; display: block; overflow-x: auto; }
.kb-body th, .kb-body td { border-bottom: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; overflow-wrap: normal; min-width: 4.5em; }
.kb-body td.num { text-align: right; white-space: nowrap; }
.kb-edit textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.45; }
.kb-hist { margin-top: 18px; }

/* Kassa nəzarəti (app/cashctl.php, 24.10.2026) */
.cashctl-fresh h2 { margin: 0 0 8px; font-size: 1rem; }
.cashctl-fresh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; }
.cashctl-fresh-grid > div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.cashctl-sum { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; }
.cc-lv { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 600; margin: 0 4px 3px 0; white-space: nowrap; }
.cc-serious { background: var(--danger-wash); color: var(--danger); }
.cc-warn { background: #fff4d6; color: #8a5a00; }
.cc-info { background: var(--wash); color: var(--ink-2); }
.table.cashctl tr.cc-row-serious td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.table.cashctl tr.cc-row-warn td:first-child { box-shadow: inset 3px 0 0 #e0a100; }
.cashctl-flags details { margin-top: 2px; }
.cashctl-flags ul { margin: 4px 0 0; padding-left: 16px; }
.cashctl-report { margin-top: 18px; }

/* Göndəriləcək məktublar (app/outbox.php, 24.10.2026) */
.ob-sum { margin: 0 0 10px; }
.ob-card { margin: 0 0 14px; padding: 14px 16px; border-left: 4px solid var(--line-strong); }
.ob-card.ob-s-need { border-left-color: #e0a100; }
.ob-card.ob-s-ready { border-left-color: var(--aegean); }
.ob-card.ob-s-error, .ob-card.ob-late { border-left-color: var(--danger); }
.ob-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.ob-st { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ob-st-need { background: var(--amber-wash); color: var(--amber); }
.ob-st-ready { background: var(--wash); color: var(--aegean-deep); }
.ob-st-error, .ob-st-late { background: var(--danger-wash); color: var(--danger); }
.ob-kind { font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; }
.ob-due { font-size: 13px; font-weight: 600; }
.ob-subj { margin: 2px 0 4px; }
.ob-to, .ob-in, .ob-why { margin: 0 0 6px; overflow-wrap: anywhere; }
.ob-need { background: var(--amber-wash); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.ob-need ul { margin: 4px 0 0; padding-left: 18px; }
.ob-warn { color: var(--amber); margin: 4px 0; }
.ob-note { white-space: normal; margin: 6px 0; }
.ob-edit { margin-top: 8px; }
.ob-edit summary { cursor: pointer; color: var(--aegean-deep); font-weight: 600; font-size: 14px; }
.ob-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ob-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.ob-form input, .ob-form textarea, .ob-form select { width: 100%; box-sizing: border-box; min-width: 0; }
.ob-form textarea { font: inherit; line-height: 1.45; }
.ob-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.ob-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-close { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ob-close input { flex: 1 1 180px; min-width: 0; }
.ob-add { margin: 18px 0; padding: 12px 16px; }
.ob-add summary { cursor: pointer; font-weight: 600; color: var(--aegean-deep); }
.ob-report { margin-top: 18px; }

/* Gigiyena (app/hygiene.php): the SKHB forms on the branch's phone, the office's month */
.btn.btn-link { background: none; border: 0; color: var(--aegean); padding: 0 4px; min-height: 0; text-decoration: underline; font-weight: 400; }
.hyg-who { padding: 12px 14px; }
.hyg-who label { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hyg-who label > span { font-weight: 600; }
.hyg-who select { flex: 1; min-width: 180px; width: auto; }
.hyg-who select.is-missing { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-wash); }
.hyg-who p { margin: 6px 0 0; }
.hyg-temps { padding: 6px 14px 14px; }
.hyg-dev { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hyg-dev-name strong, .hyg-dev-name small { display: block; }
.hyg-dev-in { display: inline-flex; align-items: center; gap: 6px; }
.hyg-dev-in .hyg-temp { width: 84px; text-align: right; font-size: 17px; font-weight: 600; }
.hyg-dev-in .hyg-sign { min-width: 40px; padding: 4px 8px; font-weight: 700; }
.hyg-dev.is-ok .hyg-temp { border-color: #b9dcc7; background: var(--ok-wash); }
.hyg-dev.is-bad .hyg-temp, .hyg-dev.is-warm .hyg-temp, .hyg-goods-form .hyg-temp.neg { border-color: var(--danger); background: var(--danger-wash); color: var(--danger); }
.hyg-measure { grid-column: 1 / -1; display: block; }
.hyg-measure span { display: block; font-size: 13px; color: var(--danger); font-weight: 600; margin-bottom: 3px; }
.hyg-done { color: var(--ok); font-weight: 600; }
.hyg-dev.is-bad .hyg-done { color: var(--danger); }
.hyg-temps > .btn-primary { margin-top: 12px; width: 100%; }
.hyg-grid td, .hyg-grid th { padding: 6px 8px; }
.hyg-grid td.hyg-bad { background: var(--danger-wash); color: var(--danger); font-weight: 700; }
.hyg-grid td.hyg-gap { background: #f1f3f5; color: var(--muted); }
.hyg-grid th.is-today { color: var(--aegean-deep); }
.hyg-month td { min-width: 34px; font-size: 13px; }
.hyg-add summary, .hyg-goods summary { cursor: pointer; }
.hyg-add-form, .hyg-goods-form { display: grid; gap: 10px; margin-top: 12px; }
.hyg-add-form label > span, .hyg-goods-form label > span:first-child { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 3px; }
.hyg-check { display: flex !important; gap: 8px; align-items: flex-start; }
.hyg-check input { width: auto; min-height: 0; margin-top: 4px; }
.hyg-check span { font-size: 14.5px !important; color: var(--ink) !important; }
.hyg-temps2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hyg-checks { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.hyg-yn { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hyg-yn > span { flex: 1; min-width: 160px; }
.hyg-yn label { display: inline-flex; gap: 5px; align-items: center; }
.hyg-yn input { width: auto; min-height: 0; }
.hyg-problem { display: grid; gap: 10px; padding: 10px; border-radius: 8px; background: var(--danger-wash); }
.hyg-tasks, .hyg-dlist { display: grid; gap: 10px; margin-bottom: 16px; }
.hyg-task, .hyg-dl { padding: 12px 14px; margin: 0; }
.hyg-task.is-done { background: #f6fbf8; border-color: #b9dcc7; }
.hyg-dl.is-bad { border-color: var(--danger); }
.hyg-task-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.hyg-task-head strong, .hyg-task-head small { display: block; }
.hyg-task-head form { margin: 0; flex-shrink: 0; text-align: right; }
.hyg-how { margin: 6px 0 0; color: var(--ink-2); }
.hyg-task p, .hyg-dl p { margin: 6px 0 0; }
.hyg-off { margin-top: 6px; }
.hyg-off form { margin-top: 6px; }
.hyg-untick .hyg-done { display: block; font-size: 13px; }
.hyg-month-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.hyg-month-nav strong { min-width: 70px; text-align: center; }
.hyg-ticks { white-space: normal; }
.hyg-tick { display: inline-block; font-size: 12.5px; padding: 1px 7px; border-radius: 10px; margin: 0 4px 3px 0; background: #eef1f4; color: var(--ink-2); white-space: nowrap; }
.hyg-tick.is-done { background: var(--ok-wash); color: var(--ok); }
.hyg-tick.is-missed { background: var(--danger-wash); color: var(--danger); font-weight: 600; }
.hyg-voided td { color: var(--muted); text-decoration: line-through; }
.hyg-voided td:last-child { text-decoration: none; }
.hyg-setup input, .hyg-setup select, .hyg-setup textarea { min-height: 34px; padding: 5px 7px; font-size: 13.5px; }
.hyg-setup input[type=checkbox] { width: auto; min-height: 0; }
.hyg-setup textarea { min-width: 240px; }

/* ---------- hygiene photos: the camera (public/assets/hygcam.js), the shots to confirm, the marks (schema v78) ---------- */
.hygcam-guide { position: absolute; left: 10%; right: 10%; top: 24%; bottom: 32%; border-radius: 14px; outline: 2px dashed rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3); pointer-events: none; }
.hygcam-guide .scan-hint { top: auto; bottom: calc(100% + 12px); white-space: normal; width: max-content; max-width: 100%; }
.hygcam.no-cam .hygcam-guide { outline: 0; box-shadow: none; }
.hygcam:not(.is-multi) .scan-done { visibility: hidden !important; }   /* one picture: the shutter stays in the middle */
.hyg-cam-card { padding: 14px; }
.hyg-cam-btn { width: 100%; min-height: 54px; font-size: 16.5px; display: flex; gap: 8px; justify-content: center; align-items: center; }
.hyg-cam-btn .ico { width: 22px; height: 22px; }
.hyg-cam-card > p { margin: 8px 0 0; }
.hyg-shots { display: grid; gap: 10px; }
.hyg-shots:not(:empty) { margin-top: 12px; }
.hyg-shot { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.hyg-shot img { display: block; width: 92px; height: 92px; object-fit: cover; border-radius: 8px; background: #eef1f4; }
.hyg-shot-state { margin: 0; font-weight: 600; font-size: 14px; }
.hyg-shot-note { margin: 2px 0 6px; }
.hyg-shot-note:empty { display: none; }
.hyg-shot.is-reading .hyg-shot-state { color: var(--muted); font-weight: 500; }
.hyg-shot.is-reading img { opacity: .75; }
.hyg-shot.is-low .hyg-shot-state { color: var(--amber); }
.hyg-shot.is-warm { border-color: var(--danger); }
.hyg-shot.is-warm .hyg-temp { border-color: var(--danger); background: var(--danger-wash); color: var(--danger); }
.hyg-shot-form { display: grid; gap: 8px; margin-top: 6px; }
.hyg-shot-body { min-width: 0; }
.hyg-shot-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hyg-shot-row select { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.hyg-shot-new { display: grid; gap: 8px; }
.hyg-shot-new input, .hyg-shot-new select { width: 100%; min-width: 0; max-width: 100%; }
.hyg-shot-btns { display: flex; gap: 10px; align-items: center; }
.hyg-status { padding: 4px 14px; }
.hyg-st { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hyg-st:last-child { border-bottom: 0; }
.hyg-st-val { text-align: right; }
.hyg-st-val strong, .hyg-st-val small { display: block; }
.hyg-st.is-ok .hyg-st-val strong { color: var(--ok); }
.hyg-st.is-bad .hyg-st-val strong { color: var(--danger); }
.hyg-manual summary { cursor: pointer; }
.hyg-manual .hyg-temps { padding: 0; }
.hyg-why { display: block; }
.hyg-why span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 3px; }
.hyg-goods-form .hyg-cam-goods { min-width: 40px; padding: 4px 8px; }
.hyg-goods-form .hyg-cam-goods .ico { width: 18px; height: 18px; }
.hyg-goods-photos { display: grid; gap: 6px; }
.hyg-goods-photos:empty { display: none; }
.hyg-goods-photo { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.hyg-goods-photo img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.hyg-tol { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--amber-wash); color: var(--amber); }
.hyg-goods-form .hyg-temp.is-warn { border-color: var(--amber); background: var(--amber-wash); color: var(--amber); }
.hyg-grid td a.hyg-ph { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.hyg-grid td .hyg-mark { font-size: 10.5px; vertical-align: super; color: var(--amber); font-weight: 700; }
.hyg-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 0; }
.hyg-people { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hyg-people form { margin: 0; }
.hyg-person { display: inline-flex; gap: 4px; align-items: center; padding: 3px 4px 3px 10px; border-radius: 14px; background: var(--wash); font-size: 13.5px; }
.hyg-person button { min-height: 0; padding: 0 6px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; }
@media (max-width: 420px) {
    .hyg-shot { grid-template-columns: 70px minmax(0, 1fr); }
    .hyg-shot img { width: 70px; height: 70px; }
}
.hyg-seed { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.hyg-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; margin-bottom: 10px; }
.hyg-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
    .hyg-temps2 { grid-template-columns: 1fr; }
    .hyg-dev-in .hyg-temp { width: 72px; }
}
.hyg-setup input[name=name] { min-width: 170px; }
.hyg-setup select { min-width: 120px; }
.hyg-setup input[name=area], .hyg-setup input[name=ref], .hyg-setup input[name=place] { min-width: 90px; }
.hyg-setup input[name=sort], .hyg-setup input[name=max_c] { width: 70px; }
.hyg-receipts { border-color: #f0c98a; background: #fffaf0; }
.hyg-receipts h2 { margin-top: 0; }
.hyg-rc { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.hyg-rc p { margin: 3px 0 0; }
.hyg-rc-btns { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.hyg-rc-btns form { margin: 0; }
.hyg-from-receipt { background: var(--wash); border-radius: 8px; padding: 6px 10px; margin: 0; }
.table tr.cc-row-serious td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.ob-fwd { border-color: var(--aegean); background: var(--wash); }
.ob-fwd-head { margin-bottom: 8px; }
.ob-pick { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-2); cursor: pointer; margin-right: 4px; }
.ob-pick input { width: auto; min-height: 0; }
.ob-card.ob-picked { box-shadow: 0 0 0 2px var(--aegean); }
/* «@» in the chat: the people to name (app/chat.php chat_mentions) */
.chat-mention { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--line); background: #fafcfd; }
.chat-mention-item { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.chat-mention-item small { color: var(--muted); font-size: 11.5px; }
.chat-mention-item:hover, .chat-mention-item:focus { border-color: var(--aegean); }
.ob-att a { margin-right: 8px; }

/* ---------- HR → Ştat strukturu (a_org): the agents as a staff ---------- */
.org-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.org-counts { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 14px; color: var(--ink-2); font-size: 14px; }
.org-counts b { font-size: 16px; color: var(--ink); }
.org-st { display: inline-block; padding: 0 7px; border-radius: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; line-height: 19px; text-transform: uppercase; white-space: nowrap; }
.org-st-human { background: var(--amber-wash); color: var(--amber); }
.org-st-var { background: var(--ok-wash); color: var(--ok); }
.org-st-new { background: var(--wash); color: var(--aegean-deep); }
.org-st-later { background: #eceff2; color: #5d6a77; }
.org-chart { padding: 16px; }
.org-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.org-side h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.org-side h3 span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.org-side .org-h-gap { margin-top: 12px; }
.org-box { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.org-box + .org-box { margin-top: 6px; }
.org-box b { display: block; font-size: 14px; font-weight: 600; }
.org-who { display: flex; justify-content: space-between; gap: 6px; align-items: center; margin-top: 2px; font-size: 13.5px; }
.org-name { color: var(--aegean-deep); font-weight: 600; }
a.org-name { text-decoration: none; }
a.org-name:hover { text-decoration: underline; }
.org-box p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.org-box.is-human { background: #fffaf0; border-color: #ecd3a6; }
.org-box.is-later { border-style: dashed; background: #fafbfc; }
.org-box.is-lead { border: 1.5px solid var(--aegean); }
.org-box.org-boss { background: var(--aegean-deep); border-color: var(--aegean-deep); color: #fff; text-align: center; }
.org-boss b, .org-mgr b { font-size: 16px; }
.org-boss .org-who, .org-mgr .org-who { justify-content: center; }
.org-boss .org-name { color: #fff; }
.org-boss p { color: #cfd9f5; }
.org-box.org-mgr { border: 2px solid var(--aegean); background: #f4f7fe; text-align: center; }
.org-vline { width: 2px; height: 16px; margin: 0 auto; background: var(--aegean); }
.org-rail { margin: 0 calc(100% / 12); border-top: 2px solid var(--aegean); }
.org-depts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.org-dept { position: relative; padding-top: 16px; }
.org-dept::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 16px; background: var(--aegean); }
.org-dept h3 { margin: 0 0 6px; padding: 5px 8px; border-radius: 6px; background: var(--aegean); color: #fff; text-align: center; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.org-h2 { margin: 26px 0 10px; font-size: 18px; }
.org-table td { font-size: 14px; }
.org-table tr.org-grp td { border-top: 2px solid var(--aegean); }
.org-table tbody tr:first-child td { border-top: 0; }
.org-dep { font-weight: 600; color: var(--aegean-deep); white-space: nowrap; }
.org-table span.org-name { color: var(--ink-2); font-weight: 400; }
.org-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.org-phase { border-left: 4px solid var(--aegean); background: #f6f8fd; border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 10px; }
.org-phase.is-late { border-color: #b8541f; background: #fdf6f0; }
.org-phase.is-later { border-color: #8995a2; background: #f6f7f9; }
.org-phase h4, .org-note h4 { margin: 0 0 6px; font-size: 15px; }
.org-phase ul, .org-note ul { margin: 0; padding-left: 18px; }
.org-phase li, .org-note li { margin: 3px 0; }
.org-note { padding: 14px 16px; }
.org-warn { color: var(--danger); }
.org-tags { display: inline-flex; gap: 4px; align-items: center; flex-shrink: 0; }
.org-model { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 19px; border: 1px solid var(--line); color: var(--ink-2); background: #fff; white-space: nowrap; }
.org-model-opus { border-color: #b9c6ef; color: var(--aegean-deep); }
.org-model-haiku { color: var(--muted); }
.org-cost td { padding: 7px 10px; font-size: 14px; }
.org-cost td.r { text-align: right; white-space: nowrap; }
@media (max-width: 1200px) {
    .org-depts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
    .org-down, .org-rail, .org-dept::before { display: none; }
    .org-top { margin-bottom: 16px; }
    .org-dept { padding-top: 0; }
}
@media (max-width: 760px) {
    .org-top, .org-cols { grid-template-columns: 1fr; }
    .org-center { order: -1; }
    .org-depts { grid-template-columns: 1fr; }
}

/* ---------- Kassa → Paymash arxivi (a_pmarchive) ---------- */
.pma-sync-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pma-sync-head form { margin: 0; }
.pma-ok { color: var(--ok); font-weight: 700; }
.pma-bad { color: var(--danger); font-weight: 600; }
tr.pma-cancel td { color: var(--muted); }
.pma-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pma-receipt h2 { margin: 0 0 4px; font-size: 18px; }
@media (max-width: 900px) { .pma-cols { grid-template-columns: 1fr; } }

/* ---------- the general search (app/search.php, 28.10.2026): header field, results page, chat ---------- */
.top-search { position: relative; display: flex; align-items: center; }
.top-search svg { position: absolute; z-index: 1; left: 9px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.top-search input { width: 200px; padding: 6px 10px 6px 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); font: inherit; font-size: 14px; color: var(--ink); transition: width .15s; }
.top-search input:focus { width: 280px; background: #fff; }
@media (max-width: 860px) { .top-search { display: none; } }
.icon-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-form { display: flex; gap: 10px; align-items: center; padding: 12px; margin-bottom: 16px; }
.search-form input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 16px; }
.search-form .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vertical-align: -3px; }
.search-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.search-jump a { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.search-jump a:hover { border-color: var(--aegean); }
.search-group { margin-bottom: 14px; scroll-margin-top: 16px; }
.search-group h2 { margin: 0 0 8px; font-size: 16px; }
.search-hits { list-style: none; margin: 0; padding: 0; }
.search-hits li { padding: 9px 0; border-top: 1px solid var(--line); }
.search-hits li:first-child { border-top: 0; }
.search-hits a { text-decoration: none; }
.search-hits a:hover strong { text-decoration: underline; }
.search-hits .muted.small { margin-left: 6px; }
.search-snip { margin: 3px 0 0; color: var(--ink-2); overflow-wrap: anywhere; }
.search-hits mark, .search-snip mark, .chat-hit-text mark { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0 1px; }
.chat-search { padding: 8px 10px; border-bottom: 1px solid var(--line); background: #fff; }
.chat-search[hidden] { display: none; }
.chat-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); font: inherit; font-size: 14px; }
.chat-hit-text { color: var(--ink-2); font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.chat-hit-text b { color: var(--ink); font-weight: 600; }