@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-VariableFont_wght.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #182230;
    --muted: #64748b;
    --line: #dbe3ee;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --success: #15803d;
    --warning: #b45309;
    --danger: #b91c1c;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --font-size-base: 13.2px;
    font-size: 93.75%;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

main {
    width: min(1400px, calc(100% - 32px));
    margin: 26px auto 48px;
}

h1,
h2,
h3 {
    margin-top: 0;
    color: #0f172a;
    line-height: 1.2;
}

h1 {
    margin-bottom: 22px;
    font-size: clamp(1.6rem, 3.6vw, 2.1rem);
}

h2 {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

h3 {
    margin: 20px 0 12px;
    font-size: 1rem;
}

section,
fieldset {
    margin: 0 0 20px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

fieldset {
    min-width: 0;
}

.import-guide-code {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
}

legend {
    padding: 0 8px;
    color: #0f172a;
    font-weight: 700;
}

/* Weekday checkboxes (Po–Pá) for recurring-order scheduling — a plain
   inline row rather than another boxed fieldset-in-a-fieldset. */
#weekdays-fieldset {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

#weekdays-fieldset legend {
    width: 100%;
    padding: 0;
    margin-bottom: 6px;
}

.weekday-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

p {
    margin: 0 0 16px;
}

/* Same spacing as p, for a field wrapper that has to be a <div> because it
   contains a block-level custom-widget <div> — a <p> can only hold inline
   content, so browsers silently close it early (and un-nest the widget)
   if a block element ends up inside one. */
.field-block {
    margin: 0 0 16px;
}

a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

label {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: 700;
}

input,
select,
textarea,
button {
    font: inherit;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
select,
textarea {
    width: min(100%, 520px);
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #b9c6d8;
    border-radius: 9px;
    background: #fff;
    color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    border-color: var(--primary);
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 7px;
    vertical-align: -3px;
    accent-color: var(--primary);
}

button {
    min-height: 40px;
    padding: 8px 14px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

button:hover {
    background: var(--primary-hover);
}

button:disabled,
button:disabled:hover {
    background: var(--muted);
    cursor: not-allowed;
    opacity: 0.6;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

button[type="submit"] {
    margin-top: 6px;
}

table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

th,
td {
    padding: 9px 11px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

#user-list-table th,
#organization-list-table th {
    vertical-align: middle;
}

#user-search-filter {
    margin-bottom: 16px;
}

#admin-recurring-order-list-table td,
#recurring-order-list-table td {
    vertical-align: middle;
}

/* Every column, not just a handful — a taller cell (multi-item Položky/Ks
   lists) shouldn't leave the rest of that row's cells stranded at the top. */
.orders-table td {
    vertical-align: middle;
}

#customer-orders-table th {
    vertical-align: middle;
}

th {
    background: #eef4ff;
    color: #1e3a8a;
    white-space: nowrap;
}

.sortable-header {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

.sortable-header:hover {
    background: none;
    color: var(--primary-hover);
    text-decoration: underline;
}

.sort-indicator {
    display: inline-block;
    width: 0.9em;
}

/* JS sets this span's text to '▲'/'▼' only for the currently active sort
   column, leaving it truly empty (no child nodes) everywhere else — hiding
   it via :empty means inactive columns don't reserve that width at all,
   instead of always reserving 0.9em for an arrow that isn't there. That
   reserved-but-invisible space was narrowing the available text width
   enough to force some header labels (e.g. "Dodací adresa") into an
   unnecessary second line, and — since every header row shares one height
   — pushed the vertically-centered button content up off-middle relative
   to shorter single-line headers in the same row. */
.sort-indicator:empty {
    display: none;
}

tr:last-child td {
    border-bottom: 0;
}

tr:hover td {
    background: #fafcff;
}

[role="alert"],
[role="status"] {
    margin-bottom: 20px;
    padding: 13px 15px;
    border-radius: 10px;
    font-weight: 600;
}

[role="alert"] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: var(--danger);
}

[role="status"] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: var(--success);
}

/* Row-level alerts (e.g. import preview table) are inline text, not a
   standalone page banner — strip the banner box styling in that context. */
td [role="alert"] {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.confirm-order-form {
    display: inline;
    margin-left: 8px;
}

.confirm-order-button {
    min-height: 34px;
    padding: 6px 10px;
    background: var(--success);
}

.confirm-order-button:hover {
    background: #166534;
}

.cancel-order-form {
    display: inline;
    margin-left: 8px;
}

.cancel-order-button {
    min-height: 34px;
    padding: 6px 10px;
    background: #dc2626;
}

.cancel-order-button:hover {
    background: #b91c1c;
}

/* In the order-detail page's action row this button sits next to the plain
   (default-sized) "Potvrdit objednávku" button, so it needs the default
   button height here — unlike its other use as a compact list-row action. */
.detail-actions .cancel-order-button {
    min-height: 40px;
    padding: 8px 14px;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* Each button here sits in its own <form>, and the global submit-button
   top margin (meant for buttons stacked below other fields) would otherwise
   push "Potvrdit objednávku" down relative to its type="button" sibling. */
.detail-actions button[type="submit"] {
    margin-top: 0;
}

.delivery-date-original {
    color: var(--muted);
    text-decoration: line-through;
}

.delivery-date-change-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.delivery-date-change-form label {
    margin: 0;
}

.delivery-date-change-form input[type="date"] {
    min-height: 34px;
    padding: 6px 8px;
}

.change-delivery-date-button {
    min-height: 34px;
    padding: 6px 10px;
}

.new-orders-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: #eff6ff;
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: var(--text);
    font-weight: 600;
}

.new-orders-banner button {
    min-height: 30px;
    padding: 5px 14px;
}

@media (max-width: 760px) {
    main {
        width: min(100% - 20px, 1400px);
        margin-top: 16px;
    }

    section,
    fieldset {
        padding: 13px;
        border-radius: 11px;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* .orders-table needs to stay a real <table> with table-layout:fixed —
       admins/customers can resize and persist individual column widths
       there (see order_column_attr() / assets/js/orders.js), and the
       generic table{display:block} above silently ignores every column
       width (default percentages AND saved custom ones) once a table
       stops being display:table. .table-wrap's own overflow-x:auto still
       provides horizontal scrolling here when the fixed-width columns
       add up to more than the viewport. */
    .orders-table {
        display: table;
        white-space: normal;
    }

    .orders-table td {
        white-space: normal;
    }

    /* Same reasoning as .orders-table above — these two already carry
       table-layout:fixed + overflow-wrap:break-word specifically so a long
       address/order number wraps inside its column instead of overflowing
       the vehicle card (see .rozvoz-order-col/.rozvoz-address-col). Without
       this exemption the generic table{display:block} rule above silently
       undoes that: the fixed column proportions stop applying and
       white-space:nowrap forces every cell onto one line, so a phone would
       get a horizontally-scrolling table instead of the wrapped text this
       was built for. */
    .rozvoz-stops-table,
    #rozvoz-unassigned-table {
        display: table;
        white-space: normal;
    }

    .rozvoz-stops-table td,
    #rozvoz-unassigned-table td {
        white-space: normal;
    }

    th,
    td {
        padding: 8px 9px;
    }

    /* Admin order list: on a narrow screen the usual percentage-based
       column widths just shrink everything down to illegible slivers.
       Fixed pixel widths instead, sized to a comfortable minimum per
       column, with the table wider than the viewport so table-wrap's
       overflow-x:auto scrolls it horizontally rather than cramming
       every column into view at once. */
    #orders-list-table {
        width: 1006px;
    }

    #orders-list-table .bulk-select-cell {
        width: 36px;
    }

    #orders-list-table .col-id {
        width: 100px;
    }

    #orders-list-table .col-date {
        width: 100px;
    }

    #orders-list-table .col-customer {
        width: 100px;
    }

    #orders-list-table .col-items:not(.quantity-header) {
        width: 100px;
    }

    #orders-list-table .col-quantity {
        width: 50px;
    }

    #orders-list-table .col-delivery-date {
        width: 100px;
    }

    #orders-list-table .col-delivery-address {
        width: 100px;
    }

    #orders-list-table .col-status {
        width: 100px;
    }

    #orders-list-table .col-attachment {
        width: 40px;
    }

    #orders-list-table .col-hydraulic-arm {
        width: 40px;
    }

    #orders-list-table .col-note {
        width: 40px;
    }

    #orders-list-table .col-actions {
        width: 100px;
    }
}
.page-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.page-topbar h1 {
    margin-bottom: 0;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
}

.button:hover {
    text-decoration: none;
}

.button-primary {
    background: var(--primary);
    color: #fff;
}

.button-primary:hover {
    background: var(--primary-hover);
    color: #fff;
}

.order-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.summary-card {
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.summary-label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-weight: 700;
}

.summary-card strong {
    font-size: 1.7rem;
    line-height: 1;
}

.summary-card-sub {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 400;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* No heading text on the left in admin/orders.php's filter box — just the
   Sloupce toggle sitting in the top-right corner on its own. */
.section-heading--end {
    justify-content: flex-end;
    margin-bottom: 12px;
}

.button-compact {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 0.85rem;
}

.section-heading h2 {
    margin-bottom: 5px;
}

.muted {
    color: var(--muted);
}

/* Generic dotted-underline hover tooltip — same visual pattern as the Rozvoz
   order-items tooltip (.rozvoz-order-number-wrap), but under a page-agnostic
   name so it can be reused anywhere (e.g. admin/users.php's last-login
   info). */
.hover-info-wrap {
    position: relative;
    display: inline-block;
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-color: var(--muted);
}

/* position: fixed (not absolute) and shown/positioned via JS
   (assets/js/admin-users.js) instead of a plain :hover rule — a table has
   its own overflow:hidden (for the rounded corners), which would otherwise
   clip the tooltip off whenever it's near the table's bottom edge, e.g. on
   the last row. Fixed positioning escapes that clipping since the table
   doesn't establish a containing block for it. */
.hover-info-tooltip {
    display: none;
    position: fixed;
    z-index: 200;
    padding: 8px 10px;
    min-width: 180px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

.hover-info-tooltip.is-visible {
    display: block;
}

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

.status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
}

.status::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: "";
}

.status-confirmed::before {
    background: #22c55e;
}

.status-submitted::before {
    background: #f59e0b;
}

.status-cancelled::before {
    background: #94a3b8;
}

/* Cancelled orders stay in the list (never deleted) but read as inactive —
   greyed out and struck through — everywhere except the status badge and
   action links, which need to stay legible/clickable. */
tr[data-status="cancelled"] td {
    color: var(--muted);
    text-decoration: line-through;
    background: #eef1f5;
}

tr[data-status="cancelled"] .status,
tr[data-status="cancelled"] .col-actions,
tr[data-status="cancelled"] .col-attachment,
tr[data-status="cancelled"] .col-hydraulic-arm,
tr[data-status="cancelled"] .col-note {
    text-decoration: none;
}

.page-topbar-actions {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

@media (max-width: 760px) {
    .page-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .page-topbar .button {
        width: 100%;
    }

    .page-topbar-actions {
        flex-direction: column;
    }

    .order-summary {
        grid-template-columns: 1fr;
    }
}

.order-item-row {
    display: grid;
    grid-template-columns: minmax(0, 700px) 130px 42px;
    column-gap: 18px;
    row-gap: 14px;
    align-items: start;
    margin-bottom: 24px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

#add-order-item {
    margin-top: 10px;
}

.order-item-row:last-child {
    margin-bottom: 0;
}

.order-item-row p {
    margin: 0;
}

.order-item-row input,
.order-item-row select {
    min-height: 40px;
    padding: 8px 10px;
}

/* Always reserve one line of height, shown or not — otherwise a row with
   a description and a row without one end up different heights, and no
   amount of aligning the Množství/remove-item columns to that row looks
   consistent next to a sibling row of a different height. */
.product-description-hint {
    display: block;
    min-height: 1.5em;
    margin-top: 6px;
    font-size: 0.85em;
    visibility: hidden;
}

.product-description-hint.is-visible {
    visibility: visible;
}

/* Custom product picker for order items — a native <select>/<datalist>
   can't show extra info while an option is merely being hovered (only
   after it's actually chosen), so this replaces both with a listbox
   that keeps a description panel next to it. */
.product-picker {
    position: relative;
}

.product-picker-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #b9c6d8;
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font-weight: 400;
    text-align: left;
}

.product-picker-trigger:hover {
    background: var(--surface-soft);
}

.product-picker-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    width: min(560px, 90vw);
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}

.product-picker-panel .product-picker-search {
    width: 100%;
    margin-bottom: 10px;
}

.product-picker-body {
    display: flex;
    gap: 12px;
}

.product-picker-list {
    flex: 1 1 50%;
    min-width: 0;
    max-height: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.product-picker-option {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

.product-picker-option:last-child {
    border-bottom: 0;
}

.product-picker-option:hover,
.product-picker-option:focus {
    background: var(--surface-soft);
}

.product-picker-option:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.product-picker-option.is-selected {
    background: rgba(37, 99, 235, 0.08);
    font-weight: 700;
}

.product-picker-empty {
    padding: 10px;
    color: var(--muted);
    cursor: default;
}

.product-picker-infobox {
    flex: 1 1 50%;
    min-width: 0;
    max-height: 220px;
    padding: 10px;
    overflow-y: auto;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.9rem;
}

@media (max-width: 620px) {
    .product-picker-body {
        flex-direction: column;
    }

    .product-picker-panel {
        width: min(400px, 90vw);
    }
}

.remove-order-item {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 42px;
    min-height: 40px;
    padding: 0;
    background: var(--danger);
    color: #fff;
}

.remove-order-item:hover {
    background: #991b1b;
}

.remove-order-item[hidden] {
    display: none;
}

.product-order-footer {
    margin: 14px 0 0;
    color: var(--muted);
}

@media (max-width: 760px) {
    .order-item-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .order-item-row .remove-order-item {
        justify-self: end;
    }
}

.rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 6px 8px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.rich-text-toolbar button {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 10px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
}

.rich-text-toolbar button:hover {
    background: var(--surface-soft);
}

.rich-text-toolbar-color {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9em;
    font-weight: 400;
}

.rich-text-toolbar-color input[type="color"] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.rich-text-toolbar select {
    min-height: 32px;
}

.rich-text-editor-wrap {
    position: relative;
}

.rich-text-editor {
    min-height: 120px;
    padding: 10px 12px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0 0 8px 8px;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.rich-text-editor:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.rich-text-counter {
    position: absolute;
    right: 10px;
    bottom: 6px;
    font-size: 0.8em;
    color: var(--muted);
    pointer-events: none;
    user-select: none;
}

.rich-text-counter.rich-text-counter--over {
    color: var(--danger);
    font-weight: 700;
}

/* Extra room at the bottom so the overlaid counter (see .rich-text-counter
   above, reused here for a plain textarea rather than a rich-text editor)
   doesn't sit on top of the note's last typed line. Not resizable — the
   fixed padding/counter position above assumes a fixed box; letting the
   textarea grow would leave the counter stranded mid-field. */
#customer_note {
    padding-bottom: 24px;
    resize: none;
}

/* .rich-text-editor-wrap itself has no width of its own — it fills its
   container, which is wider than the 520px-capped textarea it wraps here,
   so the counter (positioned relative to the wrap) ends up floating well
   past the textarea's own right edge. Matching the wrap's width to the
   textarea's own sizing rule keeps the counter anchored to the textarea
   itself instead. */
.note-counter-wrap {
    width: min(100%, 520px);
}

.tab-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 16px 0 24px;
    border-bottom: 1px solid var(--line);
}

.tab-nav a {
    display: inline-block;
    padding: 10px 16px;
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.tab-nav a:hover {
    color: var(--text);
}

.tab-nav a.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Collapsible <section> replacement (native <details>), collapsed by
   default, styled like the plain card it replaces — Nastavení subsections,
   the Vytvořit/Upravit uživatele box, and the Vytvořit/Upravit organizaci box. */
.accordion-card {
    margin: 0 0 20px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.accordion-card > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.accordion-card > summary::-webkit-details-marker {
    display: none;
}

.accordion-card > summary::before {
    display: inline-block;
    content: "▸";
    color: var(--primary);
    font-size: 2.5em;
    transition: transform 0.15s ease;
}

.accordion-card[open] > summary::before {
    transform: rotate(90deg);
}

.accordion-card > summary h2 {
    margin: 0;
}

.accordion-card[open] > summary {
    margin-bottom: 16px;
}

.vacation-banner {
    background: #fef3c7;
    color: #78350f;
    text-align: center;
    padding: 10px 16px;
    font-weight: 700;
}

.announcement-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1000;
}

.announcement-box {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.announcement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #dbeafe;
    font-size: 24px;
}

.announcement-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin: 0 0 20px;
    padding: 16px 20px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    line-height: 1.6;
    text-align: center;
}

.announcement-dont-show {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 18px;
    font-weight: 400;
    font-size: 0.85em;
}

.announcement-dont-show input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.platform-strip {
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.platform-strip-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    width: min(1400px, calc(100% - 32px));
    margin: 0 auto;
    padding: 8px 0;
    font-size: 0.72rem;
    color: var(--muted);
}

.platform-strip-logo {
    height: 35px;
    width: auto;
}

.site-header {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.site-header-inner {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    width: min(1400px, calc(100% - 32px));
    min-height: 72px;
    margin: 0 auto;
    gap: 20px;
}

.site-logo {
    display: inline-flex;
    /* .site-header-inner is a grid, and a grid item stretches to fill its
       whole track by default — without this, the <a> (or <div>, for
       customers) ends up clickable/hoverable across almost the entire
       first column, way past the visible logo image, even though its
       content already hugs the left edge via inline-flex. */
    justify-self: start;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 800;
    text-decoration: none;
}

.site-logo:hover {
    color: #0f172a;
    text-decoration: none;
}

.site-logo-mark {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
}

.site-logo-image {
    max-width: 220px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.site-logo-mark-image {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.logo-preview {
    max-width: 320px;
    max-height: 160px;
    width: auto;
    height: auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    object-fit: contain;
}

/* Logo crop editor */
.logo-cropper {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.logo-cropper .muted {
    margin-bottom: 14px;
    font-weight: 400;
}

.logo-cropper-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.logo-cropper-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    line-height: 0;
    touch-action: none;
}

#logo-cropper-image {
    display: block;
    max-width: min(500px, 100%);
    max-height: 400px;
    width: auto;
    height: auto;
    user-select: none;
}

.logo-cropper-box {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed var(--primary);
    background: rgba(37, 99, 235, 0.12);
    cursor: move;
    touch-action: none;
}

.logo-cropper-box--circle {
    border-radius: 50%;
}

.logo-cropper-shape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.logo-cropper-shape legend {
    padding: 0 4px;
    font-size: 0.9em;
    font-weight: 700;
}

.logo-cropper-shape label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-weight: 400;
}

.logo-cropper-shape input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.logo-cropper-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
    touch-action: none;
}

.logo-cropper-handle[data-handle="nw"] {
    top: -8px;
    left: -8px;
    cursor: nwse-resize;
}

.logo-cropper-handle[data-handle="ne"] {
    top: -8px;
    right: -8px;
    cursor: nesw-resize;
}

.logo-cropper-handle[data-handle="sw"] {
    bottom: -8px;
    left: -8px;
    cursor: nesw-resize;
}

.logo-cropper-handle[data-handle="se"] {
    bottom: -8px;
    right: -8px;
    cursor: nwse-resize;
}

.logo-cropper-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.logo-cropper-preview-label {
    font-weight: 700;
}

.logo-cropper-preview {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.logo-cropper-preview-wrap button {
    background: var(--surface-soft);
    color: var(--text);
    border: 1px solid var(--line);
}

.logo-cropper-preview-wrap button:hover {
    background: #eef2f7;
}

.button-danger {
    background: #dc2626;
}

.button-danger:hover {
    background: #b91c1c;
}

.breadcrumbs {
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.breadcrumbs-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: min(1400px, calc(100% - 32px));
    min-height: 42px;
    margin: 0 auto;
    gap: 8px;
    color: var(--muted);
}

.breadcrumbs a {
    color: var(--muted);
    font-weight: 600;
}

.breadcrumbs a:hover {
    color: var(--primary);
}

.breadcrumb-separator {
    color: #94a3b8;
}

.breadcrumbs-quick-links {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

@media (max-width: 860px) {
    .site-header-inner {
        grid-template-columns: 1fr auto;
        padding: 14px 0;
    }
}

.admin-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.admin-link-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 96px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    text-decoration: none;
}

.admin-link-card:hover {
    border-color: var(--primary);
    color: var(--text);
    text-decoration: none;
}

.admin-link-card strong {
    font-size: 1.1rem;
}

.admin-link-card span {
    color: var(--muted);
    font-weight: 400;
}

@media (max-width: 760px) {
    .admin-links {
        grid-template-columns: 1fr;
    }
}

/* Admin dashboard tiles (index.php) — one tile per time period, each with a
   total, a confirmed/unconfirmed proportion bar, and a small stat row. */
.dashboard-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-tile {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dashboard-tile-title {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 700;
}

.dashboard-tile-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}

.dashboard-tile-total span {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--muted);
}

.dashboard-tile-bar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-soft);
    margin-bottom: 12px;
}

.dashboard-bar-confirmed {
    background: var(--success);
}

/* Same yellow as the "Čeká na vyřízení" status dot (.status-submitted::before). */
.dashboard-bar-unconfirmed {
    background: #f59e0b;
}

.dashboard-bar-cancelled {
    background: #dc2626;
}

.dashboard-tile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 0;
}

.dashboard-tile-stats dt {
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 2px;
}

.dashboard-tile-stats dd {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
}

.dashboard-stat-confirmed {
    color: var(--success);
}

.dashboard-stat-unconfirmed {
    color: #f59e0b;
}

.dashboard-stat-cancelled {
    color: #dc2626;
}

.dashboard-tile-growth-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-tile-growth-header .dashboard-tile-title {
    margin-bottom: 0;
}

.growth-period-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.growth-period-form label {
    font-size: 0.72rem;
    color: var(--muted);
}

.growth-period-form select {
    padding: 3px 6px;
    font-size: 0.78rem;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.dashboard-tile-growth .dashboard-tile-total {
    margin-top: 10px;
}

.growth-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 70px;
}

.growth-bar-col {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 100%;
}

.growth-bar {
    width: 100%;
    max-width: 22px;
    border-radius: 3px 3px 0 0;
    background: var(--primary);
}

.growth-bar-label {
    font-size: 0.6rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dashboard-half-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.dashboard-half-row .dashboard-half {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .dashboard-half-row {
        flex-direction: column;
    }

    /* The JS-matched height (see assets/js/dashboard.js) only makes sense
       side by side — stacked on narrow screens, each box should just size
       to its own content instead. */
    .upcoming-recurring-orders {
        height: auto !important;
    }
}

.top-products,
.upcoming-recurring-orders {
    padding: 18px 20px;
    margin-bottom: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

.top-products-title {
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.top-products-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Height is matched to .top-products via JS (assets/js/dashboard.js),
   since .top-products' own height varies with its (max 10) items — the
   list below then scrolls internally instead of growing the box past
   that matched height. */
.upcoming-recurring-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.upcoming-recurring-item {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.upcoming-recurring-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.upcoming-recurring-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.upcoming-recurring-date {
    font-weight: 700;
}

.upcoming-recurring-customer {
    font-weight: 600;
}

.upcoming-recurring-items {
    font-size: 0.85rem;
}

.top-products-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.top-products-rank {
    flex: 0 0 auto;
    width: 30px;
    font-weight: 700;
    color: var(--muted);
    font-size: 0.9rem;
}

.top-products-body {
    flex: 1 1 auto;
    min-width: 0;
}

.top-products-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.top-products-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-products-qty {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.top-products-bar-track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-soft);
    overflow: hidden;
}

.top-products-bar {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: 999px;
}

@media (max-width: 760px) {
    .dashboard-tiles {
        grid-template-columns: 1fr;
    }
}

.site-header-inner {
    grid-template-columns: 1fr auto auto;
}

.site-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

.site-contact a {
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}

.site-contact a:hover {
    color: var(--primary);
    text-decoration: none;
}

@media (max-width: 860px) {
    .site-contact {
        display: none;
    }
}

.account-menu {
    position: relative;
    grid-column: 3;
    justify-self: end;
}

.account-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 5px 10px 5px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
}

.account-menu-toggle:hover {
    border-color: #b9c6d8;
    background: var(--surface-soft);
}

.account-avatar {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
}

.account-menu-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    right: 0;
    width: min(290px, calc(100vw - 32px));
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}

.account-menu-user {
    padding: 10px 11px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    overflow-wrap: anywhere;
}

.account-menu-user strong {
    color: var(--text);
}

.account-menu-nav {
    display: grid;
    padding: 7px 0;
}

.account-menu-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--text);
    font-weight: 700;
}

.account-menu-nav a:hover {
    background: var(--surface-soft);
    color: var(--primary);
    text-decoration: none;
}

.account-menu-divider {
    margin-top: 8px;
    border-top: 1px solid var(--line);
}

.account-menu-logout {
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.account-menu-logout .button {
    width: 100%;
}

@media (max-width: 860px) {
    .site-header-inner {
        grid-template-columns: 1fr auto;
        min-height: 64px;
    }

    .account-menu-label {
        display: none;
    }
}

/* Nested per-item table inside the merged Položky/Množství cell — a real
   table row grows to fit whichever side (name or quantity) is taller, so
   the two always stay lined up regardless of text wrapping or column width. */
.order-items-grid {
    width: 100%;
    border-collapse: collapse;
}

.order-items-grid td {
    padding: 0 0 2px;
    border: 0;
    vertical-align: top;
}

.order-items-qty {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    padding-left: 8px !important;
}

/* .orders-table td's word-break: break-word (needed elsewhere for long
   customer/address text) also matches this nested cell since it's a
   descendant <td> — under print's much narrower columns that let a
   multi-digit quantity like "123" break character-by-character onto
   separate lines instead of just staying on one line. A quantity is short
   and never needs mid-number breaking, so this cancels it with a selector
   specific enough to win over the generic rule. */
.orders-table td.order-items-qty {
    overflow-wrap: normal;
    word-break: keep-all;
}

/* Plain "Množství" label over the merged cell — independently resizable
   (own col-quantity width key, see quantity_header_attr() in bootstrap.php)
   but not independently hideable; centered like every other header. */
.quantity-header {
    white-space: nowrap;
}

/* Orders list: zebra striping, fixed layout so the table always fits the
   screen width instead of forcing horizontal scroll — each column gets an
   explicit share, and cell text wraps instead of stretching the column. */
.orders-table tbody tr:nth-child(even) td {
    background: var(--surface-soft);
}

.orders-table tbody tr:hover td {
    background: #eef4ff;
}

.orders-table {
    table-layout: fixed;
}

.orders-table th,
.orders-table td {
    overflow-wrap: break-word;
    word-break: break-word;
}

.orders-table th {
    white-space: normal;
    position: relative;
    padding-right: 16px;
    text-align: center;
    vertical-align: middle;
}

/* Drag handle for resizing a column — sits on the right edge of each <th>.
   The hit area is a wide 10px strip (easy to grab), with a thin vertical
   line drawn down the middle of it so the handle is visible at rest, not
   only revealed on hover. */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
    /* Without this, the handle's right half (which overlaps into the next
       column's <th>) sits behind that <th>'s own opaque background — both
       are position:relative with no explicit stacking, so the later column
       in DOM order paints on top and silently swallows half the handle's
       click area. */
    z-index: 2;
}

.col-resize-handle::after {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: #b9c6d8;
}

.col-resize-handle:hover::after,
.col-resize-handle:active::after {
    left: calc(50% - 1px);
    width: 3px;
    background: var(--primary);
}

/* Hidden via the "⚙️ Sloupce" panel — applied to both the <th> and every
   matching <td> in the column (same col-* class on both). */
.col-hidden {
    display: none !important;
}

.orders-table .col-id {
    width: 10%;
}

.orders-table .col-date {
    width: 9%;
}

.orders-table .col-customer {
    width: 12%;
}

.orders-table .col-items {
    width: 10%;
}

.orders-table .col-quantity {
    width: 5%;
}

.orders-table .col-delivery-date {
    width: 8%;
}

.orders-table .col-delivery-address {
    width: 14%;
}

.orders-table .col-status {
    width: 8%;
}

.orders-table .col-quantity,
.orders-table .col-status,
.orders-table .col-actions {
    text-align: center;
}

/* Customer order history (index.php) has fewer columns than the admin
   list, so it needs its own widths rather than the admin percentages
   above (which assume more columns and wouldn't add up to 100% here). */
#customer-orders-table.orders-table .col-order-number {
    width: 11%;
}

#customer-orders-table.orders-table .col-date {
    width: 10%;
}

#customer-orders-table.orders-table .col-placed-by {
    width: 10%;
}

#customer-orders-table.orders-table .col-items {
    width: 10%;
}

#customer-orders-table.orders-table .col-quantity {
    width: 5%;
}

#customer-orders-table.orders-table .col-delivery-date {
    width: 10%;
}

#customer-orders-table.orders-table .col-delivery-address {
    width: 17%;
}

#customer-orders-table.orders-table .col-attachment {
    width: 7%;
}

#customer-orders-table.orders-table .col-hydraulic-arm {
    width: 7%;
}

#customer-orders-table.orders-table .col-note {
    width: 7%;
}

#customer-orders-table.orders-table .col-status {
    width: 13%;
}

#customer-orders-table.orders-table .col-actions {
    width: 14%;
    min-width: 170px;
}

/* Page-size selector + result count above the table, and prev/next pager
   below it — shared by the admin orders list and the customer order
   history (index.php). */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.per-page-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.per-page-form label {
    margin-bottom: 0;
}

.per-page-form select {
    min-height: 36px;
    padding: 6px 8px;
    width: auto;
}

.pagination-summary {
    margin: 0;
    color: var(--muted);
}

/* Bulk row-selection bar above the admin order list (admin/orders.php) —
   a "select all" checkbox plus the two bulk-action buttons, sized to match
   the "⚙️ Sloupce" toggle via the same .button-compact class. */
.bulk-actions-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 12px;
}

.bulk-select-all-label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-weight: 600;
}

.bulk-actions-buttons {
    display: flex;
    gap: 8px;
}

.bulk-actions-columns {
    margin-left: auto;
}

/* Row-selection checkbox column — always visible, never part of the
   resizable/hideable col-* system (deliberately not prefixed "col-" so it's
   excluded from assets/js/orders.js's column-width machinery entirely). */
.bulk-select-cell {
    width: 36px;
    text-align: center;
    white-space: nowrap;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.pagination-disabled {
    color: var(--muted);
}

.pagination-status {
    color: var(--muted);
}

.order-top-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
    margin-bottom: 20px;
}

.order-top-grid section,
.order-top-grid fieldset,
.order-top-grid .accordion-card {
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    .order-top-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .order-top-grid {
        grid-template-columns: 1fr;
    }
}

/* Custom calendar for the new-order delivery date. A native
   <input type="date"> can only set a min/max range — it has no way to
   grey out individual mid-range days, so weekends/holidays/vacation days
   stayed pickable even though the server always rejected them. This
   widget disables those days outright so they can't be clicked at all. */
.date-picker {
    position: relative;
    display: inline-block;
}

.date-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: min(100%, 260px);
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #b9c6d8;
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font-weight: 400;
    text-align: left;
}

.date-picker-trigger:hover {
    background: var(--surface-soft);
}

.date-picker-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    width: min(280px, calc(100vw - 32px));
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.date-picker-month-label {
    font-weight: 700;
    text-transform: capitalize;
}

.date-picker-nav {
    min-height: 30px;
    padding: 4px 10px;
    background: var(--surface-soft);
    color: var(--text);
}

.date-picker-nav:hover {
    background: var(--line);
}

.date-picker-weekdays,
.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.date-picker-weekdays {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.date-picker-day {
    min-height: 32px;
    padding: 0;
    background: none;
    color: var(--text);
    font-weight: 400;
}

.date-picker-day:hover:not(:disabled) {
    background: var(--surface-soft);
}

.date-picker-day-filler {
    visibility: hidden;
}

.date-picker-day.is-disabled {
    background: none;
    color: var(--line);
    cursor: not-allowed;
    opacity: 1;
}

.date-picker-day.is-today {
    box-shadow: inset 0 0 0 1px var(--primary);
}

.date-picker-day.is-selected {
    background: var(--primary);
    color: #fff;
}

/* admin/rozvoz.php — one combined map (admin/rozvoz-map.php / the
   interactive canvas below) showing every vehicle's route in its own
   color, sitting beside Nepřiřazené objednávky and above the per-vehicle
   stop-table cards. */
.rozvoz-overview-map-card img,
.rozvoz-overview-map-canvas {
    width: 100%;
    height: 350px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.rozvoz-overview-map-card img {
    height: auto;
}

.rozvoz-overview-map-canvas {
    overflow: hidden;
}

.rozvoz-map-wrap {
    position: relative;
}

/* Overlaid on top of the map instead of a permanent button underneath it —
   only appears once a same-vehicle reorder/reverse has actually happened
   (see markMapStale() in rozvoz.js), so refreshing (and the Google API
   call that costs) only happens when the map is actually known stale. */
.rozvoz-map-stale-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: var(--warning);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius) var(--radius) 0 0;
}

.rozvoz-map-stale-banner[hidden] {
    display: none;
}

.rozvoz-map-stale-banner button {
    flex-shrink: 0;
    min-height: 28px;
    padding: 4px 12px;
    background: #fff;
    color: var(--warning);
}

.rozvoz-map-stale-banner button:hover {
    background: #fff;
    opacity: 0.9;
}

.address-map-picker {
    width: 100%;
    height: 300px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}

/* street/city/postal_code/country once "Místo dodání nemá adresu" is
   checked — still editable (an optional free-text note for the driver),
   just visually de-emphasized since the GPS pin is now what matters. */
.address-optional-field--inactive {
    opacity: 0.45;
}

/* Scanned by a driver's phone (see qr.php) to jump straight to that
   vehicle's route in Google Maps — no account, no SMS gateway. Sized to
   stay legible to a phone camera whether viewed on screen or printed. */
.rozvoz-qr-code {
    width: 96px;
    height: 96px;
    margin-bottom: 12px;
}

.rozvoz-qr-code svg {
    display: block;
    width: 100%;
    height: 100%;
}

.rozvoz-qr-popup-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1000;
}

.rozvoz-qr-popup-overlay[hidden] {
    display: none;
}

.rozvoz-qr-popup-box {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    max-width: 320px;
    width: 100%;
    text-align: center;
}

.rozvoz-qr-popup-content {
    width: 260px;
    height: 260px;
    max-width: 100%;
    margin: 0 auto 20px;
}

.rozvoz-qr-popup-content svg {
    display: block;
    width: 100%;
    height: 100%;
}

.rozvoz-overview-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 12px;
}

.rozvoz-vehicle-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text);
    background: none;
    border: none;
    padding: 2px 4px;
    min-height: 0;
    border-radius: 6px;
    cursor: pointer;
}

.rozvoz-vehicle-legend-item:hover {
    background: var(--surface-soft);
}

/* Clicked "off" — the swatch stays in its own color so the legend keeps
   working as a color key even while that vehicle's route is hidden, but
   the text dims to show at a glance which ones are currently toggled off. */
.rozvoz-vehicle-legend-item[aria-pressed="false"] {
    color: var(--muted);
}

.rozvoz-vehicle-legend-item[aria-pressed="false"] .rozvoz-vehicle-color-swatch {
    opacity: 0.35;
}

.rozvoz-vehicle-color-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
}

.rozvoz-vehicle-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rozvoz-drag-handle {
    cursor: grab;
    display: inline-block;
    font-size: 1.1em;
    color: var(--muted);
    touch-action: none;
}

.rozvoz-stops-table tbody tr {
    transition: opacity 200ms ease, background-color 200ms ease;
}

.rozvoz-stops-table tbody tr.dragging {
    opacity: 0.85;
    background: var(--surface-soft);
}

/* Fixed layout + forced word-breaking so a long address/name never pushes
   the table (and with it, the whole vehicle-card box) wider than its
   column — matches the same pattern .orders-table already uses. */
.rozvoz-stops-table,
#rozvoz-unassigned-table {
    table-layout: fixed;
    width: 100%;
}

.rozvoz-stops-table th,
.rozvoz-stops-table td,
#rozvoz-unassigned-table th,
#rozvoz-unassigned-table td {
    overflow-wrap: break-word;
    word-break: break-word;
}

.rozvoz-hydraulic-arm-col {
    width: 32px;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

/* Confirmed vs. still-unconfirmed orders in Nepřiřazené objednávky — a
   dispatcher needs to see at a glance which rows can actually be assigned
   right now (add_order_to_route()/bulk_add_orders_to_route() both refuse
   anything that isn't 'confirmed'). */
#rozvoz-unassigned-table tr[data-status="confirmed"] td {
    background: #dcfce7;
}

#rozvoz-unassigned-table tr[data-status="submitted"] td {
    background: #fef3c7;
}

/* Objednávka narrowed 15 percentage points in favor of Adresa (was an
   even, unset/auto split between the two). */
.rozvoz-order-col {
    width: 35%;
}

.rozvoz-address-col {
    width: 65%;
}

.rozvoz-stops-table th.no-print,
.rozvoz-stops-table td.no-print,
.rozvoz-stops-table th.rozvoz-stop-number,
.rozvoz-stops-table td.rozvoz-stop-number,
#rozvoz-unassigned-table th.no-print,
#rozvoz-unassigned-table td.no-print {
    width: 28px;
    text-align: center;
}

.rozvoz-order-number-wrap {
    position: relative;
    display: inline-block;
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-color: var(--muted);
}

.rozvoz-order-items-tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    margin-top: 4px;
    padding: 8px 10px;
    min-width: 180px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

.rozvoz-order-number-wrap:hover .rozvoz-order-items-tooltip {
    display: block;
}

.rozvoz-card-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.rozvoz-reverse-route-button,
.rozvoz-optimize-route-button,
.rozvoz-qr-toggle-button {
    display: inline-block;
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.rozvoz-bulk-assign-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.rozvoz-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 420px;
    margin-bottom: 8px;
}

.rozvoz-calendar {
    width: 100%;
    max-width: 420px;
    table-layout: fixed;
}

.rozvoz-calendar th {
    text-align: center;
    font-weight: 400;
    color: var(--muted);
}

.rozvoz-calendar td {
    text-align: center;
    padding: 2px;
}

.rozvoz-calendar-empty {
    background: none;
}

.rozvoz-calendar-day {
    display: block;
    padding: 6px 0;
    border-radius: var(--radius);
    text-decoration: none;
}

.rozvoz-calendar-day.has-route {
    background: rgba(37, 99, 235, 0.12);
    font-weight: 600;
}

.rozvoz-calendar-day.today {
    box-shadow: inset 0 0 0 1px var(--muted);
}

.rozvoz-calendar-day.selected {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}

.rozvoz-calendar-unassigned-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    /* stretch (the grid default) instead of start, so Nepřiřazené
       objednávky always matches the calendar card's height even when its own
       content is shorter. */
    align-items: stretch;
    margin-bottom: 20px;
}

@media (max-width: 1100px) {
    .rozvoz-calendar-unassigned-layout {
        grid-template-columns: 1fr;
    }
}

.rozvoz-day-stats {
    margin: 4px 0 0;
    font-size: 0.9em;
}

.rozvoz-vehicle-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1200px) {
    .rozvoz-vehicle-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .rozvoz-vehicle-cards-grid {
        grid-template-columns: 1fr;
    }
}

.rozvoz-vehicle-cards-grid .rozvoz-vehicle-card {
    margin-bottom: 0;
}

.rozvoz-vehicle-card--unavailable {
    opacity: 0.55;
}

/* Keeps the grid a stable 3-column, 2-row layout (up to
   ROZVOZ_MAX_VEHICLES = 6 slots) regardless of how many vehicles actually
   exist — empty box-sized slots pad out the remainder instead of the grid
   just shrinking to fewer, wider cards. */
.rozvoz-vehicle-card-placeholder {
    min-height: 160px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: none;
    box-shadow: none;
}

.rozvoz-vehicle-color-swatch--none {
    background: var(--muted);
}

.rozvoz-vehicle-card-drag-handle-bar {
    text-align: center;
    margin: -18px -18px 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--line);
}

.rozvoz-vehicle-card-drag-handle {
    display: inline-block;
    cursor: grab;
    color: var(--muted);
    touch-action: none;
    font-size: 1.1em;
    line-height: 1;
}

.rozvoz-vehicle-card-drag-handle:active {
    cursor: grabbing;
}

.rozvoz-vehicle-card {
    transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.rozvoz-vehicle-card.dragging {
    opacity: 0.85;
    transform: scale(1.03) rotate(-1deg);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.28);
    cursor: grabbing;
}

.rozvoz-remove-stop-button {
    background: none;
    border: none;
    color: var(--danger);
    font-weight: 700;
    font-size: 1.4em;
    line-height: 1;
    padding: 0 2px;
    min-height: 0;
}

.submit-order-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.submit-order-wrap .button-danger {
    min-width: 220px;
    background: #dc2626;
}

.submit-order-wrap .button-danger:hover {
    background: #b91c1c;
}

/* Order filters */
.order-filters {
    padding: 18px 20px;
}

.order-filters-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.order-filters-search label {
    flex-basis: 100%;
    margin-bottom: 4px;
}

.order-filters-search input {
    width: min(100%, 360px);
    min-height: 40px;
}

.order-filters-search button {
    min-height: 40px;
}

.order-filters-advanced {
    margin-top: 16px;
}

.order-filters-advanced > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.order-filters-advanced > summary::-webkit-details-marker {
    display: none;
}

.order-filters-advanced > summary::before {
    display: inline-block;
    content: "▸";
    transition: transform 0.15s ease;
}

.order-filters-advanced[open] > summary::before {
    transform: rotate(90deg);
}

.order-filters-advanced .filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 16px;
    margin-top: 14px;
}

.order-filters-advanced .filters-grid p {
    margin: 0;
}

.order-filters-advanced .filters-grid input,
.order-filters-advanced .filters-grid select {
    min-height: 38px;
    padding: 7px 10px;
}

.order-filters-advanced button[type="submit"] {
    margin-top: 12px;
}

/* Per-column quick filters */
.column-filter {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    font-weight: 400;
    vertical-align: middle;
}

.column-filter > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

.column-filter > summary::-webkit-details-marker {
    display: none;
}

.column-filter > summary:hover {
    background: rgba(37, 99, 235, 0.12);
    color: var(--primary);
}

.column-filter.is-active > summary,
.column-filter[open] > summary {
    background: rgba(37, 99, 235, 0.16);
    color: var(--primary);
}

/* Small ▲ badge on the filter icon of whichever column currently has an
   active filter applied, so it's visible at a glance without opening the
   filter panel. */
.column-filter.is-active > summary::after {
    content: '▲';
    position: absolute;
    top: -7px;
    right: -2px;
    font-size: 0.6rem;
    line-height: 1;
    color: var(--primary);
}

.column-filter-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    min-width: 190px;
    max-width: 260px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
    font-weight: 400;
    text-transform: none;
    white-space: normal;
    color: var(--text);
}

/* Columns close to the right edge of the table open the panel growing
   left instead of right, so it doesn't overflow off-screen. */
.column-filter-panel--right {
    left: auto;
    right: 0;
}

.column-filter-panel p {
    margin: 0 0 10px;
}

.column-filter-panel label {
    display: block;
    margin-bottom: 4px;
}

.column-filter-panel input,
.column-filter-panel select {
    width: 100%;
    min-width: 160px;
    min-height: 36px;
    padding: 6px 8px;
}

.column-filter-panel button {
    min-height: 34px;
    padding: 6px 10px;
}

/* "⚙️ Sloupce" show/hide panel — a <details> in the page topbar, reusing
   .column-filter-panel for the dropdown box itself. */
.column-visibility-toggle {
    position: relative;
    display: inline-block;
}

.column-visibility-toggle > summary {
    list-style: none;
    cursor: pointer;
}

.column-visibility-toggle > summary::-webkit-details-marker {
    display: none;
}

.column-visibility-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.column-visibility-panel input[type="checkbox"] {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
}

.column-visibility-panel button {
    margin-top: 6px;
}

/* Expandable delivery address (admin order list only) */
.address-details summary {
    cursor: pointer;
    list-style: none;
}

.address-details summary::-webkit-details-marker {
    display: none;
}

.address-details summary strong {
    display: block;
}

.address-details .address-preview {
    display: block;
    max-width: 220px;
    overflow: hidden;
    color: var(--muted);
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.address-details[open] .address-preview {
    display: none;
}

.address-details-panel {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    line-height: 1.5;
}

/* Two-column form layout (e.g. billing details) */
/* Two-column split for admin/users.php's create/edit form — basic account
   fields on the left, the organization picker/new-org fields on the right,
   so the (often tall, especially in "Založit novou organizaci" mode) org
   section doesn't just push everything below it down the page. */
.users-form-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .users-form-columns {
        grid-template-columns: 1fr;
    }
}

.form-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.form-grid-2col p {
    margin: 0 0 14px;
    /* Grid items default to min-width:auto, not 0 — without this, a field
       whose content refuses to shrink (like .phone-field's select, which
       has flex-shrink:0) can make the whole <p> wider than its column and
       overflow into the next one, instead of the column just clipping it
       the way minmax(0, 1fr) alone implies. */
    min-width: 0;
}

/* Label on its own row, then the country-code <select> + national-number
   <input> together on the row below — a plain column flex, so the label
   and the select/input pairing are each an unambiguous row instead of
   relying on flex-wrap to land them right, whatever context this ends up
   nested in. */
.phone-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 520px;
}

.phone-field label {
    margin: 0;
}

.phone-field-controls {
    display: flex;
    gap: 8px;
}

.phone-field-controls select {
    flex: 0 0 auto;
    width: auto;
    max-width: 45%;
}

.phone-field-controls input {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 700px) {
    .form-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* ARES lookup */
.ares-lookup-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Every plain input/select caps at 520px (see the global
       input[type="text"] rule) — without the same cap here, this row
       (input + button) stretches to the full grid column instead, ending
       up visibly wider than the field right below it. */
    max-width: 520px;
}

.ares-lookup-row input {
    flex: 1 1 160px;
    /* Flex items default to min-width:auto, not 0 — without this override
       the input refuses to shrink below its intrinsic content width, so
       adding the button on top pushes the whole row wider than the
       column, out of step with every plain field below it. */
    min-width: 0;
    width: auto;
}

.ares-lookup-row button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    white-space: nowrap;
}

.ares-lookup-status {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 400;
}

.ares-lookup-status[hidden] {
    display: none;
}

/* Order detail + print */
.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.detail-header h2 {
    margin-bottom: 0;
}

.order-detail-items {
    margin-bottom: 16px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.detail-box {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    padding: 12px 16px;
}

.detail-box h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}

.detail-box p {
    margin: 0 0 8px;
}

.detail-box p:last-child {
    margin-bottom: 0;
}

.detail-box-items {
    margin-bottom: 16px;
}

.detail-box-items .order-detail-items {
    margin-bottom: 0;
}

/* Bulk print (admin/orders.php "Tisk detailu vybraných") — several order
   detail cards back to back. The page-break itself is print-only (see
   print-portrait.css); this border is just an on-screen preview cue so the
   boundary between orders is still visible before actually printing. */
.bulk-print-order-block {
    margin-bottom: 24px;
}

.bulk-print-order-block h2 {
    margin-bottom: 12px;
}

.bulk-print-order-block-break {
    padding-top: 24px;
    border-top: 2px solid var(--line);
}

/* Paper orientation for printing is set per-page via a small dedicated
   stylesheet (assets/css/print-landscape.css or print-portrait.css),
   conditionally linked in admin/orders.php — the list and the single-order
   detail are two separate page loads (never rendered together), and CSS
   named pages caused Chromium to insert a blank leading page here, so a
   plain, unconditional @page rule per page load is simpler and reliable. */

@media print {
    .no-print,
    .site-header,
    .breadcrumbs,
    .order-filters,
    .column-filter,
    .col-resize-handle,
    .col-actions,
    .orders-table .sortable-header {
        display: none !important;
    }

    /* Column headers use a <button> (.sortable-header, hidden above) for
       click-to-sort on screen — but Chromium fails to (re)paint <button>
       text at all in a <thead> repeated across printed pages via
       display: table-header-group (only worked on the first page), while
       plain generated content renders fine. data-print-label carries the
       same text the button shows, injected as real content here instead
       of relying on a form control the print engine can't reliably repeat. */
    .orders-table th[data-print-label]::before {
        content: attr(data-print-label);
    }

    .attachment-link {
        text-decoration: none;
    }

    .print-only-attachment[hidden] {
        display: block !important;
    }

    body {
        background: #fff;
    }

    main {
        width: 100%;
        margin: 0;
    }

    .order-detail-print {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .detail-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .detail-box {
        background: #fff;
        break-inside: avoid;
    }

    table {
        box-shadow: none;
    }

    .table-wrap {
        overflow: visible;
    }

    .address-details .address-preview {
        display: none !important;
    }

    .address-details .address-details-panel {
        display: block !important;
    }
}

.col-attachment,
.col-hydraulic-arm,
.col-note {
    text-align: center;
    white-space: nowrap;
}

.orders-table .col-attachment {
    width: 6%;
}

.orders-table .col-hydraulic-arm {
    width: 7%;
}

.orders-table .col-note {
    width: 7%;
}

.orders-table .col-actions {
    width: 14%;
    /* A saved drag-resize width (applied by orders.js as an inline
       style="width:...") can otherwise squeeze this below what the
       buttons/links need, wrapping their text letter-by-letter instead of
       word-by-word — min-width always wins over a smaller width, so this
       floor holds no matter what's saved. */
    min-width: 170px;
}

/* Actions cell mixes plain <a> links with <form>-wrapped buttons (confirm/
   cancel) — the flex wrapper below keeps them evenly spaced and wrapping
   tidily no matter how narrow the (user-resizable) column gets, instead of
   the ragged line breaks/inconsistent spacing plain inline flow or
   per-form margins would produce.

   display:flex has to live on an inner <div>, not the <td> itself: a <td>
   with display:flex stops stretching to the row's full height the way a
   normal table cell does (it shrinks to its own content's height instead,
   which — in a row made tall by a neighboring cell like a long items list
   — left it floating as a short, wrongly-bounded box at the top of the
   row instead of a properly row-height cell). With the <td> left as an
   ordinary cell, it naturally gets the same vertical-align:top as every
   other cell (see th, td rule near the top of this file) and the correct
   full row height; the inner div just needs to be flush against that
   top-left corner, sized to its own content. display:contents on the
   <form> drops its own box so the button inside becomes a direct flex
   item alongside the links, sharing that same gap rather than adding its
   own margin. */
.orders-table td.col-actions {
    padding: 0;
}

.orders-table .col-actions-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 11px;
}

/* Detail / Upravit / Objednat znovu read as one inline group while there's
   room for them side by side. :not(:last-child) works regardless of which
   of the (conditionally rendered) links are actually present — whichever
   one ends up last never gets a trailing pipe. Excluded from
   .col-actions-danger (the "Zrušit" button) on purpose: that one already
   gets its own line + hairline divider below, not an inline pipe. */
.orders-table .col-actions-inner > a:not(:last-child)::after {
    content: '|';
    margin-left: 8px;
    color: var(--line);
}

/* Below this width the actions column is too narrow for the links to sit
   side by side, so they're stacked one per line instead — the pipe above
   only makes sense between items sharing a row, so it's turned off here
   rather than left dangling at the start of each stacked line. */
@media (max-width: 760px) {
    .orders-table .col-actions-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .orders-table .col-actions-inner > a:not(:last-child)::after {
        content: none;
    }
}

/* Customer order list only — sets the destructive "Zrušit" action apart
   from Detail/Upravit/Objednat znovu with its own line and a hairline
   divider, instead of it wrapping in wherever it happens to land among
   the others. flex-basis:100% forces the line break in the wrapping flex
   row above. */
.orders-table .col-actions-danger {
    flex-basis: 100%;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.orders-table td.col-actions form {
    display: contents;
}

.attachment-link {
    display: inline-block;
    font-size: 1.15em;
    text-decoration: none;
}

/* Customer product access transfer list (admin) */
.product-access {
    margin: 4px 0 20px;
}

.product-access > label {
    display: block;
    margin-bottom: 4px;
}

.product-access .muted {
    margin-bottom: 14px;
    font-weight: 400;
}

.product-transfer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.product-transfer-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.product-transfer-column label {
    margin-bottom: 6px;
    font-size: 0.92em;
}

.product-transfer-column input[type="text"] {
    width: 100%;
    min-height: 38px;
    margin-bottom: 8px;
    padding: 7px 10px;
}

.product-transfer-column select[multiple] {
    flex: 1 1 auto;
    min-height: 380px;
    width: 100%;
    padding: 6px;
    border: 1px solid #b9c6d8;
    border-radius: 9px;
    background: #fff;
}

.product-transfer-column select[multiple] option {
    padding: 6px 8px;
    border-radius: 6px;
}

.product-transfer-column select[multiple] option:checked {
    background: var(--primary);
    color: #fff;
}

.product-transfer-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.product-transfer-controls button {
    min-width: 46px;
    min-height: 40px;
    padding: 8px;
    font-size: 1.1rem;
    line-height: 1;
}

@media (max-width: 760px) {
    .product-transfer {
        grid-template-columns: 1fr;
    }

    .product-transfer-controls {
        flex-direction: row;
        justify-content: center;
    }

    .product-transfer-column select[multiple] {
        min-height: 220px;
    }
}

/* Login page */
body.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Not position:absolute — on mobile the login-shell content (card + gas
   cylinder illustration) can be taller than the viewport, and centering it
   with justify-content pushes its top above y:0. An absolutely-positioned
   strip pinned to y:0 would then float over that content instead of
   pushing it down; as a normal flex item here it reserves its own space
   at the top so nothing renders underneath it, on any screen size. */
body.login-page .platform-strip {
    flex-shrink: 0;
    width: 100%;
}

/* flex: 1 (not the centering on body itself) so the strip above stays
   pinned to the very top of the viewport and only the login-shell content
   below it is vertically centered in the remaining space. */
body.login-page main.login-shell {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 48px;
    width: min(820px, calc(100% - 32px));
    margin: 24px auto;
}

.login-card {
    width: 100%;
    max-width: 360px;
    padding: 32px 34px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.login-card h1 {
    text-align: center;
}

.login-card form button[type="submit"] {
    width: 100%;
}

.login-card-link {
    margin: 14px 0 0;
    text-align: center;
}

/* MFA code-entry countdown (verify-mfa.php) — a small ring that visibly
   depletes as the server-side pending-login window (see
   MFA_PENDING_TTL_SECONDS) runs out, so the time limit is something the
   visitor can see coming rather than a surprise "invalid token" error after
   the fact. assets/js/verify-mfa.js drives the ring itself via CSSOM (not
   inline style="", which the style-src 'self' CSP silently blocks) — the
   dasharray/dashoffset here are just a reasonable "full time remaining"
   default for the instant before that script runs. */
.mfa-countdown {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
}

.mfa-countdown-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.mfa-countdown-ring-bg,
.mfa-countdown-ring-progress {
    fill: none;
    stroke-width: 3;
}

.mfa-countdown-ring-bg {
    stroke: var(--line);
}

.mfa-countdown-ring-progress {
    stroke: var(--primary);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}

.mfa-countdown-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.mfa-countdown--warning .mfa-countdown-ring-progress {
    stroke: var(--warning);
}

.mfa-countdown--warning .mfa-countdown-time {
    color: var(--warning);
}

.mfa-countdown--danger .mfa-countdown-ring-progress {
    stroke: var(--danger);
}

.mfa-countdown--danger .mfa-countdown-time {
    color: var(--danger);
}

.login-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.login-logo {
    max-width: 220px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.login-logo-mark-image {
    width: 81px;
    height: 81px;
    object-fit: contain;
}

/* Playful gas-cylinder gauge that fills up as the visitor types their
   credentials — purely decorative, aria-hidden, no functional meaning. */
.login-cylinder-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 150px;
}

.login-cylinder {
    width: 140px;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.16));
    transition: filter 0.35s ease;
}

#login-gas-fill {
    transition: height 0.35s ease, y 0.35s ease;
}

.login-gauge-needle {
    transform-origin: 70px 82px;
    transform: rotate(var(--gauge-angle, -75deg));
    transition: transform 0.35s ease;
}

.login-cylinder-wrap--pulse .login-cylinder {
    animation: login-cylinder-pulse 0.32s ease;
}

@keyframes login-cylinder-pulse {
    0% {
        transform: scale(1) rotate(0deg);
    }

    35% {
        transform: scale(1.045) rotate(-1deg);
    }

    70% {
        transform: scale(0.985) rotate(1deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.login-cylinder-wrap--full .login-cylinder {
    filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.7));
}

.login-cylinder-caption {
    margin: 0;
    min-height: 1.4em;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
}

.login-bubble {
    position: absolute;
    bottom: 64px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.75);
    pointer-events: none;
    animation: login-bubble-rise 1.1s ease-out forwards;
}

@keyframes login-bubble-rise {
    0% {
        transform: translate(0, 0) scale(0.6);
        opacity: 0.9;
    }

    100% {
        transform: translate(var(--bubble-drift, 0), -120px) scale(1.1);
        opacity: 0;
    }
}

@media (max-width: 720px) {
    body.login-page main.login-shell {
        flex-direction: column-reverse;
        gap: 24px;
        margin: 32px auto;
    }
}

/* Supplier info (admin settings) */
.supplier-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.supplier-info-grid p {
    margin: 0 0 12px;
}

.supplier-info-grid label {
    display: block;
}

.supplier-vat-exempt-toggle {
    margin-top: 10px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .supplier-info-grid {
        grid-template-columns: 1fr;
    }
}

.supplier-hours-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.supplier-hours-day {
    flex: 0 0 88px;
    font-weight: 700;
}

.supplier-hours-row input[type="time"] {
    width: auto;
    min-width: 0;
}

.supplier-hours-sep {
    color: var(--muted);
}

.supplier-weekend-toggle {
    display: flex;
    align-items: center;
    margin: 12px 0 10px;
    font-weight: 700;
}

#supplier-weekend-rows {
    margin-bottom: 6px;
}

/* Two-factor authentication (profile) */
.mfa-secret-display {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mfa-secret-display code {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-soft);
    font-size: 1.05rem;
    letter-spacing: 0.05em;
}

.mfa-backup-codes-box {
    margin-bottom: 16px;
}

.mfa-backup-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 420px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.mfa-backup-codes li {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    text-align: center;
}

.mfa-backup-codes code {
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

.mfa-admin-status {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.mfa-qr-wrap {
    display: inline-block;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 8px;
}

.mfa-qr-wrap svg {
    display: block;
    width: 200px;
    height: 200px;
}

.order-hydraulic-arm-note {
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 9px;
    background: #fffbeb;
    color: var(--warning);
}

.admin-notification-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 16px;
}

.admin-notification-mode label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-weight: 400;
}

.admin-notification-mode input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.admin-notification-panel {
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.admin-notification-panel[hidden] {
    display: none;
}

.admin-notification-admin-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-weight: 400;
}

.inline-form {
    display: inline;
}

.products-table td {
    vertical-align: middle;
}

.product-filter-search {
    margin-bottom: 16px;
}

.log-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 16px;
    margin-top: 4px;
}

.log-filters-grid p {
    margin: 0;
}

.log-filters-grid input,
.log-filters-grid select {
    min-height: 38px;
    padding: 7px 10px;
}

.log-filters-grid + button[type="submit"] {
    margin-top: 12px;
}

.log-detail-json {
    max-width: 360px;
    margin: 8px 0 0;
    padding: 8px 10px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-pagination {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.log-system-output {
    max-height: 70vh;
    margin: 0;
    padding: 14px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.site-footer {
    margin: 32px auto 0;
    padding: 16px;
    text-align: center;
    font-size: 0.85em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
}

.site-footer a,
.auth-footer a {
    color: var(--muted);
}

.auth-footer {
    width: 100%;
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.85em;
}
.anchor-target {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}