: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: 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;
}

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

p {
    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: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;
}

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;
}

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);
}

.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;
}

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

.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;
    }

    th,
    td {
        padding: 8px 9px;
    }
}
.page-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

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

.back-link {
    margin-bottom: 10px;
}

.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(3, 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;
}

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

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

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

.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 {
    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: end;
    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;
}

.product-description-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.85em;
}

.product-description-hint[hidden] {
    display: none;
}

.remove-order-item {
    width: 42px;
    min-height: 40px;
    padding: 0;
    background: var(--danger);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.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;
}

.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);
}

.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;
    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;
}

.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;
}

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

    .site-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
    }
}

.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%;
}

.top-products {
    padding: 18px 20px;
    margin-bottom: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.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;
}

.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 {
    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-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;
    }
}

.order-items-summary {
    line-height: 1.7;
}

/* 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;
}

/* 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;
}

.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-delivery-date {
    width: 8%;
}

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

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

/* 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-items {
    width: 11%;
}

#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-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);
}

.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(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
    margin-bottom: 20px;
}

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

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

.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) */
.form-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.form-grid-2col p {
    margin: 0 0 14px;
}

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

/* ARES lookup */
.ares-lookup-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ares-lookup-row input {
    flex: 1 1 160px;
    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;
}

/* 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 {
        display: none !important;
    }

    .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 {
    text-align: center;
    white-space: nowrap;
}

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

.orders-table .col-hydraulic-arm {
    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;
    gap: 6px;
    padding: 9px 11px;
}

/* 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;
    justify-content: 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%;
}

body.login-page main.login-shell {
    display: flex;
    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;
}

.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 {
    display: inline-grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 1.5rem;
}

/* 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;
}

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

.auth-footer {
    width: 100%;
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.85em;
}