/* ERP web UI - layout, components and tables. Colours are defined once as tokens. */

:root {
    --bg: #f4f6fb;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-soft: #eff6ff;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --success: #059669;
    --success-soft: #ecfdf5;
    --warning: #b45309;
    --warning-soft: #fffbeb;
    --info: #0369a1;
    --info-soft: #f0f9ff;
    --sidebar-bg: #0f172a;
    --sidebar-text: #cbd5e1;
    --sidebar-active: #1e293b;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, .25);
    --sidebar-width: 240px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
}

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

a:hover {
    text-decoration: underline;
}

h1, h2 {
    margin: 0;
    line-height: 1.25;
}

.skip-link {
    position: absolute;
    left: -999px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 1000;
    background: var(--surface);
    padding: .5rem 1rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

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

/* ------------------------------------------------------------ layout */

.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 50;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.1rem 1.25rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
}

.brand i {
    color: #60a5fa;
}

.nav {
    flex: 1;
    overflow-y: auto;
    padding: .25rem .75rem 1rem;
}

.nav-group {
    margin: 1rem .5rem .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    color: var(--sidebar-text);
    font-weight: 500;
}

.nav-link i {
    width: 1.1rem;
    text-align: center;
    color: #94a3b8;
}

.nav-link:hover {
    background: var(--sidebar-active);
    color: #fff;
    text-decoration: none;
}

.nav-link.active {
    background: var(--primary);
    color: #fff;
}

.nav-link.active i {
    color: #fff;
}

.nav [hidden] {
    display: none;
}

.account {
    border-top: 1px solid #1e293b;
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.account-info {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.account-info > i {
    font-size: 1.6rem;
    color: #94a3b8;
}

.account-name {
    color: #fff;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.account-role {
    font-size: .8rem;
    color: #94a3b8;
}

.main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
}

.topbar {
    display: none;
}

.view {
    padding: 1.75rem 2rem 3rem;
    max-width: 1400px;
    outline: none;
}

/* ------------------------------------------------------------ page */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.page-header h1 {
    font-size: 1.6rem;
}

.page-subtitle {
    margin: .25rem 0 0;
    color: var(--text-muted);
}

.back-link {
    display: inline-block;
    margin-bottom: .35rem;
    font-size: .9rem;
}

.page-actions, .card-actions, .row-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.row-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.card, .table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}

.card {
    padding: 1.1rem 1.25rem;
}

.card > .table-card, .card > .async-section > .table-card {
    border: 0;
    box-shadow: none;
    margin: 0 -1.25rem -1.1rem;
    border-radius: 0 0 var(--radius) var(--radius);
}

.card-intro {
    margin: -.4rem 0 .9rem;
}

/* Filters of a card's list (country, year, ...) above its table */
.card-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin: 0 -1.25rem;
    padding: .2rem 1.25rem .75rem;
    border-bottom: 1px solid var(--border);
}

/* Long country names must not widen the page on phones */
.card-filters .filter {
    max-width: 100%;
    min-width: 0;
}

.card-filters .filter select {
    min-width: 0;
    max-width: 100%;
}

.card-filters-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

.async-section.is-loading > * {
    opacity: .45;
    transition: opacity .15s;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .9rem;
}

.card-header h2 {
    font-size: 1.05rem;
}

.detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .9rem 1.5rem;
    margin: 0;
}

.detail-item dt {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.detail-item dd {
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ dashboard */

.metric-label {
    font-size: .82rem;
    color: var(--text-muted);
    font-weight: 600;
}

.metric-value {
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- dashboard: sections, key figures, charts */
.dash-section {
    --accent: var(--primary);
    --accent-soft: var(--primary-soft);
    margin-bottom: 1.75rem;
}

.dash-aftersales {
    --accent: #7c3aed;
    --accent-soft: #f5f3ff;
}

.dash-pricing {
    --accent: #db2777;
    --accent-soft: #fdf2f8;
}

.dash-stock {
    --accent: #d97706;
    --accent-soft: #fff7ed;
}

.dash-finance {
    --accent: var(--success);
    --accent-soft: var(--success-soft);
}

.dash-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.dash-section-head h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.1rem;
}

.dash-section-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: .9rem;
}

.dash-link {
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* A section with one or two figures: tiles about as wide as in the fuller sections, not stretched over the row */
.kpi-grid-few {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

.kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
    padding: 1rem 1.1rem 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
    overflow: hidden;
}

.kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent);
}

a.kpi:hover {
    text-decoration: none;
    border-color: var(--accent);
    transform: translateY(-1px);
}

.kpi-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.kpi-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .85rem;
}

/* A long label wraps to a second line instead of being cut off */
.kpi-label {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.kpi-value {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    overflow: hidden;
    white-space: nowrap;
    font-size: clamp(1.35rem, 1.05rem + .9vw, 1.85rem);
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.kpi-unit {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.kpi-note {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.dash-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dash-charts .card,
.dash-section > .card {
    margin: 0;
}

.dash-chart h3 {
    margin: 0;
    font-size: .95rem;
}

.dash-chart-box {
    position: relative;
    height: 260px;
    margin-top: .75rem;
}

.dash-empty {
    margin: 1.5rem 0 .5rem;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }

    .kpi {
        padding: .8rem .8rem .8rem 1rem;
    }

    .kpi-icon {
        display: none;
    }

    .kpi-value {
        font-size: 1.25rem;
    }

    .kpi-note {
        white-space: normal;
    }
}

/* A chart on a row of its own (e.g. a bar per account manager) */
.dash-charts .dash-chart-full {
    grid-column: 1 / -1;
}

@media (min-width: 1100px) {
    .dash-charts:has(.dash-chart-wide) {
        grid-template-columns: 2fr 1fr;
    }

    .dash-charts .dash-chart-wide:only-child,
    .dash-charts .dash-chart:only-child {
        grid-column: 1 / -1;
    }
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.summary-card {
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    border-left-width: 4px;
}

.summary-info { border-left-color: var(--info); }
.summary-success { border-left-color: var(--success); }
.summary-warning { border-left-color: var(--warning); }
.summary-neutral { border-left-color: var(--text-muted); }

/* ------------------------------------------------------------ tabs */

.tabs {
    margin-bottom: 1.25rem;
}

.tab-list {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
    overflow-x: auto;
}

.tab {
    border: 0;
    background: none;
    padding: .6rem 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.tab[aria-selected="true"] {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-panel:focus {
    outline: none;
}

.tab-count {
    margin-left: .4rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    font-size: .75rem;
}

/* ------------------------------------------------------------ tables */

.table-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1 1 240px;
    max-width: 360px;
}

.search-box i {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .85rem;
}

.search-input {
    width: 100%;
    padding: .45rem .75rem .45rem 2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: var(--surface-muted);
}

.table-count {
    color: var(--text-muted);
    font-size: .85rem;
    margin-right: auto;
}

.table-scroll {
    position: relative; /* contains the absolutely positioned (visually hidden) header labels */
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    padding: .6rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

/* Free-text columns wrap instead of widening the table */
.data-table td.wrap {
    white-space: normal;
    min-width: 14rem;
    max-width: 28rem;
}

.data-table th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--surface-muted);
    white-space: nowrap;
    user-select: none;
}

.data-table th.sortable {
    cursor: pointer;
}

.data-table th[aria-sort="ascending"] .sort-indicator::after { content: " ▲"; }
.data-table th[aria-sort="descending"] .sort-indicator::after { content: " ▼"; }

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tr.clickable {
    cursor: pointer;
}

.data-table tr.clickable:hover, .data-table tr.clickable:focus {
    background: var(--primary-soft);
    outline: none;
}

.data-table td.empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 1rem;
}

.align-right {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.actions-col {
    width: 1%;
    white-space: nowrap;
}

/* Server-paged tables: filters in the toolbar, pager in the footer */
.filter {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--text-muted);
}

.filter select, .filter input:not([type="checkbox"]):not([type="radio"]) {
    padding: .4rem .5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
}

.filter .lookup {
    width: 14rem;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1rem;
    border-top: 1px solid var(--border);
    font-size: .85rem;
    color: var(--text-muted);
}

.pager {
    display: flex;
    gap: .4rem;
}

.data-table.is-loading tbody {
    opacity: .45;
    transition: opacity .15s;
}

.error-text {
    color: var(--danger) !important;
}

/* Type-ahead lookup (customers, vendors, products, orders) */
.lookup {
    position: relative;
    width: 100%;
}

.lookup > i {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .8rem;
    pointer-events: none;
}

.lookup .lookup-input {
    width: 100%;
    padding: .5rem .65rem .5rem 1.9rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    background: var(--surface);
    color: var(--text);
}

.lookup .lookup-input:focus {
    outline: 2px solid var(--primary-soft);
    border-color: var(--primary);
}

.lookup .lookup-input:disabled {
    background: var(--surface-muted);
    color: var(--text-muted);
}

/* A lookup in a filter bar keeps the room for its search icon (the filter inputs' padding would cover it) */
.filter .lookup input.lookup-input {
    padding-left: 1.9rem;
}

.lookup-list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: .25rem;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

.lookup-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem .6rem;
    border-radius: 6px;
    cursor: pointer;
}

.lookup-list li small {
    color: var(--text-muted);
    white-space: nowrap;
}

.lookup-list li.active, .lookup-list li:hover {
    background: var(--primary-soft);
}

.lookup-list li.lookup-empty {
    color: var(--text-muted);
    cursor: default;
}

/* ------------------------------------------------------------ buttons and badges */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

/* the class sets display: hidden buttons (e.g. the only lot row's remove) stay hidden */
.btn[hidden] {
    display: none;
}

.btn:disabled {
    opacity: .6;
    cursor: progress;
}

.btn-sm {
    padding: .3rem .6rem;
    font-size: .82rem;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-muted); border-color: #cbd5e1; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-muted); color: var(--text); }
.btn-ghost-danger { background: transparent; color: var(--danger); }
.btn-ghost-danger:hover { background: var(--danger-soft); }
.btn-ghost-light { background: transparent; color: var(--sidebar-text); border-color: #334155; }
.btn-ghost-light:hover { background: var(--sidebar-active); color: #fff; }

.badge {
    display: inline-block;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-success { background: var(--success-soft); color: var(--success); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-neutral { background: var(--surface-muted); color: var(--text-muted); border: 1px solid var(--border); }

/* ------------------------------------------------------------ notices, loading */

.notice, .error-panel {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}

/* A notice shown only when needed (e.g. the credit note limit warning) is hidden with the attribute */
.notice[hidden] {
    display: none;
}

.notice-warning {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid #fde68a;
}

.notice-info {
    background: var(--info-soft);
    color: var(--info);
    border: 1px solid #bae6fd;
}

.notice > i {
    margin-top: .2rem;
}

.notice p {
    margin: .2rem 0 0;
}

.error-panel {
    background: var(--danger-soft);
    color: #991b1b;
    border: 1px solid #fecaca;
    align-items: center;
}

.error-panel > div {
    flex: 1;
}

.error-panel p {
    margin: .2rem 0 0;
}

.loading {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 3rem 0;
    color: var(--text-muted);
    justify-content: center;
}

.spinner {
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

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

.erp-banner {
    position: sticky;
    top: 0;
    z-index: 200;
    padding: .75rem 1.25rem;
    background: #fef3c7;
    color: #92400e;
    border-bottom: 1px solid #f59e0b;
    font-weight: 600;
    text-align: center;
}

/* ------------------------------------------------------------ toasts */

.toasts {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 1100;
    max-width: min(420px, calc(100vw - 2rem));
}

.toast {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .75rem 1rem;
    border-radius: 8px;
    background: var(--sidebar-bg);
    color: #fff;
    box-shadow: var(--shadow-lg);
    transition: opacity .4s, transform .4s;
}

.toast i { margin-top: .2rem; }
.toast-success i { color: #34d399; }
.toast-error { background: #7f1d1d; }
.toast-warning { background: #78350f; }
.toast-warning i { color: #fbbf24; }
.toast-leaving { opacity: 0; transform: translateY(8px); }

/* ------------------------------------------------------------ dialogs and forms */

.modal {
    border: 0;
    border-radius: 14px;
    padding: 0;
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

.modal-wide {
    width: min(780px, calc(100vw - 2rem));
}

.modal::backdrop {
    background: rgba(15, 23, 42, .5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 1.15rem;
}

.modal-close {
    border: 0;
    background: none;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: .25rem .5rem;
}

.modal-body {
    padding: 1.2rem 1.4rem 2rem;
    overflow-y: auto;
    max-height: calc(100vh - 12rem);
    min-height: 12rem;
}

.modal-body > p {
    margin-top: 0;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .9rem 1.4rem;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}

.form-intro {
    color: var(--text-muted);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .9rem 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.form-field-wide {
    grid-column: 1 / -1;
}

.form-field label {
    font-size: .85rem;
    font-weight: 600;
}

.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    background: var(--surface);
    color: var(--text);
}

.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .search-input:focus {
    outline: 2px solid var(--primary-soft);
    border-color: var(--primary);
}

.form-field input:disabled, .form-field select:disabled {
    background: var(--surface-muted);
    color: var(--text-muted);
}

.form-check {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    grid-column: 1 / -1;
}

.form-check input {
    width: 1.05rem;
    height: 1.05rem;
}

.form-check label {
    font-weight: 500;
}

.required {
    color: var(--danger);
}

.form-help {
    color: var(--text-muted);
    font-size: .78rem;
}

/* Below a document date (js/calendar.js): the proposal, a hint, or the warning about a non-working day */
.date-note:empty {
    display: none;
}

.date-warning {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    padding: .4rem .6rem;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: .8rem;
}

/* Several choices (roles of a user, permissions of a role) */
.form-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.form-fieldset > legend {
    padding: 0;
    margin-bottom: .3rem;
    font-size: .85rem;
    font-weight: 600;
}

.form-fieldset > .form-help {
    display: block;
    margin-bottom: .5rem;
}

.check-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}

.check-group {
    margin: 0;
    padding: .6rem .8rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    min-width: 0;
}

.check-group-plain {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .2rem 1rem;
}

.check-group > legend {
    padding: 0 .3rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .25rem 0;
}

.check-item input {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .15rem 0 0;
}

.check-item label {
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
}

.check-item .form-help {
    display: block;
}

.check-all {
    border-bottom: 1px solid var(--border);
    margin-bottom: .2rem;
    padding-bottom: .4rem;
}

.check-all label {
    font-weight: 600;
}

/* A form on the page itself (company settings) */
.form-panel-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.1rem;
}

.number-example {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    padding: .05rem .35rem;
    border-radius: 4px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--text);
}

.form-error {
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: var(--danger-soft);
    color: #991b1b;
    border: 1px solid #fecaca;
}


/* Filter bar of a server-searched list (filter first: nothing is read before a filter is chosen) */
.table-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

.table-filters .filter {
    min-width: 0;
    max-width: 100%;
}

.table-filters .filter select {
    min-width: 0;
    max-width: 16rem;
}

.filter-text input {
    width: 9rem;
}

.data-table td.empty .fa-filter {
    margin-right: .2rem;
}

/* Several values of a filter (statuses): a drop-down of checkboxes */
.multi-select {
    position: relative;
}

.multi-select > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 8rem;
    max-width: 16rem;
    padding: .4rem .6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.multi-select > summary::-webkit-details-marker {
    display: none;
}

.multi-select > summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.multi-select > summary i {
    font-size: .7rem;
    color: var(--text-muted);
}

.multi-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-select-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    max-height: 18rem;
    overflow-y: auto;
    padding: .4rem .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

.multi-select-panel .check-group-plain {
    grid-template-columns: 1fr;
}

/* Tables whose rows are chosen with checkboxes */
.select-col {
    width: 1%;
}

.select-col input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    vertical-align: middle;
}

/* Wizards (new shipment, new invoice): numbered steps */
.wizard-step .card-header {
    margin-bottom: .6rem;
}

.wizard-step-body > p:last-child {
    margin-bottom: 0;
}

.wizard-customer {
    max-width: 32rem;
}

.wizard-table {
    margin: 0 -1.25rem .75rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.qty-input {
    width: 5.5rem;
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    text-align: right;
}

.qty-input:invalid {
    border-color: var(--danger);
}

.cell-note {
    display: block;
}

.wizard-weight {
    margin: .25rem 0 0;
}

.wizard-country {
    margin-bottom: .75rem;
}

/* Carrier quotes of a new shipment: one radio button per carrier service */
.quote-options {
    margin-bottom: 1rem;
}

.quote-list {
    margin: 0;
    padding: .5rem .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 0;
}

.quote-list > legend {
    padding: 0 .3rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.quote-option {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--border);
}

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

.quote-option input {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .2rem 0 0;
}

.quote-option label {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 1rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.quote-name {
    font-weight: 600;
}

.quote-price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.quote-option small {
    grid-column: 1 / -1;
}

.quote-submit {
    justify-content: flex-end;
}

.quote-result {
    margin-top: 1rem;
}

/* ------------------------------------------------------------ catalogue and stock (js/catalogue.js) */

.features-editor .feature-list {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    gap: .4rem;
    align-items: center;
}

.feature-buttons {
    display: flex;
    gap: .15rem;
}

.feature-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.feature-empty {
    margin: 0 0 .5rem;
}

.feature-table th[scope="row"] {
    font-weight: 600;
    white-space: nowrap;
}

.product-overview .detail-list {
    margin-bottom: 1.25rem;
}

.overview-section {
    border-top: 1px solid var(--border);
    padding-top: .9rem;
    margin-top: .9rem;
}

.overview-section h3 {
    margin: 0 0 .6rem;
    font-size: .95rem;
}

.overview-section p {
    margin: 0;
}

.chip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.chip {
    display: inline-block;
    max-width: 100%;
    padding: .2rem .65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.chip-primary {
    border-color: var(--primary);
    background: var(--primary-soft);
}

/* Phase 6: fields hidden by the form (e.g. the stock fields of a virtual product) */
.form-field[hidden], .form-help[hidden] {
    display: none;
}

.virtual-help {
    margin-top: -.6rem;
}

.overview-section .feature-note {
    margin-bottom: .6rem;
    font-size: .85rem;
}

/* AllFeatures: one row group per feature name, the name spanning its values */
.feature-table tbody.feature-group + tbody.feature-group {
    border-top: 2px solid var(--border);
}

.feature-table th[scope="rowgroup"] {
    font-weight: 600;
    white-space: nowrap;
    vertical-align: top;
}

.category-features {
    margin-bottom: .75rem;
}

/* Picture galleries (js/pictures.js): thumbnails in order, the first marked main */
.picture-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin-bottom: .75rem;
}

.picture-upload {
    position: relative;
}

.picture-upload:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.picture-upload:has(input:disabled) {
    opacity: .6;
    cursor: progress;
}

.picture-upload-status:empty {
    display: none;
}

.picture-upload-status {
    margin-bottom: .75rem;
    padding: .6rem .8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
}

.picture-upload-status progress {
    width: 100%;
    max-width: 320px;
}

.upload-summary {
    margin: 0 0 .35rem;
    font-weight: 600;
}

.upload-list {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    font-size: .85rem;
}

.upload-list li {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .6rem;
}

.upload-name {
    overflow-wrap: anywhere;
}

.upload-done { color: var(--success); }
.upload-error { color: var(--danger); }
.upload-busy, .upload-waiting { color: var(--text-muted); }

.picture-empty {
    margin: 0;
}

.picture-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
    gap: .75rem;
}

.picture-list[hidden] {
    display: none;
}

.picture-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    min-width: 0;
}

.picture-item-main {
    border-color: var(--primary);
}

.picture-figure {
    margin: 0;
    flex: 1;
}

.picture-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-muted);
}

.picture-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* An image that cannot be read: its alternative text in an empty box */
.picture-broken {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    font-size: .8rem;
    color: var(--text-muted);
    text-align: center;
}

.picture-main {
    position: absolute;
    top: .4rem;
    left: .4rem;
}

.picture-caption {
    padding: .45rem .6rem 0;
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.picture-actions {
    display: flex;
    justify-content: flex-end;
    gap: .1rem;
    padding: .3rem .4rem .4rem;
}

.category-filter {
    margin-bottom: 1rem;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.category-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 0;
}

.category-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
    padding: .8rem 1.1rem;
    cursor: pointer;
}

.category-summary::marker {
    color: var(--text-muted);
}

.category-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.category-body {
    padding: 0 1.1rem 1rem;
    min-width: 0;
}

.category-body > p {
    margin: 0 0 .75rem;
}

.category-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.assign-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.assign-toolbar .filter {
    flex: 1 1 14rem;
    min-width: 0;
}

.assign-toolbar .filter input,
.assign-toolbar .filter select {
    flex: 1 1 auto;
    min-width: 0;
}

.assign-toolbar .search-input {
    padding-left: .75rem;
}

.assign-results {
    min-height: 4rem;
}

.assign-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
}

.assign-actions > span {
    margin-right: auto;
}

.stock-import-form input[type="file"] {
    padding: .4rem;
}

.stock-import-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
}

.format-list {
    margin: 0;
    padding-left: 1.2rem;
}

.format-list li + li {
    margin-top: .3rem;
}

/* ------------------------------------------------------------ customers, suppliers and portals (js/parties.js, js/portal-admin.js) */

/* Two lines in one table cell: the main text, then a smaller muted line */
.cell-stack {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.cell-stack > small {
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.badge-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.status-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
}

/* The main address and main contact above the details of a customer or supplier */
.party-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.party-summary-item {
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
    overflow-wrap: anywhere;
}

.party-summary-item h3 {
    margin: 0 0 .4rem;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.party-summary-item address {
    font-style: normal;
}

.iban {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}

/* Portal access of a customer's contact: status, role and the account actions */
.portal-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    min-width: 11rem;
    /* The account actions wrap instead of widening the contacts table */
    max-width: 20rem;
}

.portal-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* A one-time secret (temporary password) with its copy button */
.secret-box {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: 1rem;
}

.secret-box label {
    font-weight: 600;
}

.secret-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.secret-value {
    flex: 1 1 12rem;
    min-width: 0;
    padding: .5rem .65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

.similar-customers {
    display: block;
    margin-top: .5rem;
}

.pre-line {
    white-space: pre-line;
}

/* ------------------------------------------------------------ integration hub (js/integration.js) */

.notice-success {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid #a7f3d0;
}

.direction {
    white-space: nowrap;
}

.direction i {
    color: var(--text-muted);
}

/* Long values without spaces (URLs, file names, errors) break instead of widening a table or dialog */
.cell-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* A heading row inside a form grid */
.form-section {
    border-top: 1px solid var(--border);
    padding-top: .75rem;
    margin-top: .25rem;
}

.form-section h3 {
    margin: 0;
    font-size: .95rem;
}

.form-section .form-help {
    margin: .25rem 0 0;
}

.form-label {
    font-size: .85rem;
    font-weight: 600;
}

/* Name/value rows: extra HTTP headers, outbound column mapping */
.kv-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: .4rem 0;
}

.kv-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .4rem;
    align-items: center;
}

.kv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
}

/* Inbound mapping: a canonical field and the partner's source per row */
.mapping-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .4rem;
}

.mapping-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: .5rem;
    align-items: center;
    padding: .3rem 0;
    border-bottom: 1px solid var(--border);
}

.mapping-row:last-child {
    border-bottom: 0;
}

.mapping-field {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    min-width: 0;
}

.mapping-field code, .push-url, .payload-excerpt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mapping-field small {
    color: var(--text-muted);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.push-url {
    display: block;
    padding: .45rem .65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    overflow-wrap: anywhere;
}

/* The channel form's steps */
.wizard-steps {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.wizard-step-button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem .35rem .4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.wizard-step-number {
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: .8rem;
}

.wizard-step-button.done .wizard-step-number {
    background: var(--success-soft);
    border-color: #a7f3d0;
    color: var(--success);
}

.wizard-step-button[aria-current="step"] {
    border-color: var(--primary);
    background: var(--primary-soft);
    font-weight: 600;
}

.wizard-step-button[aria-current="step"] .wizard-step-number {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.wizard-section {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.wizard-section > legend {
    padding: 0;
    margin-bottom: .75rem;
    font-weight: 600;
}

.dialog-subheading {
    margin: 1.25rem 0 .5rem;
    font-size: 1rem;
}

.recent-messages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* A message's payload: text as received, scrollable inside the dialog */
.payload-excerpt {
    margin: 0;
    padding: .75rem 1rem;
    max-height: 22rem;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    font-size: .82rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ purchasing (js/purchasing.js) */

/* A button inside a notice (e.g. "Recalculate VAT" of a purchase order with legacy VAT) */
.notice-actions {
    margin-top: .6rem;
}

/* Net, VAT and gross totals below the lines of a purchase order or purchase invoice */
.doc-totals {
    display: grid;
    gap: .2rem;
    width: min(100%, 20rem);
    margin: 1rem 0 0 auto;
}

.doc-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.doc-total dt {
    color: var(--text-muted);
}

.doc-total dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.doc-total-grand {
    padding-top: .35rem;
    border-top: 1px solid var(--border);
    font-weight: 700;
}

.doc-total-grand dt {
    color: var(--text);
}

/* The lines editor of a manual purchase invoice */
.pi-lines-section {
    margin-top: 1.25rem;
}

.pi-lines-section h3 {
    margin: 0 0 .6rem;
    font-size: 1rem;
}

.pi-lines {
    display: grid;
    gap: .75rem;
}

.pi-line {
    min-width: 0;
    margin: 0;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.pi-line > legend {
    padding: 0 .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
}

.pi-line-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(5rem, .7fr) minmax(6rem, .9fr) minmax(8rem, 1fr);
    gap: .6rem .75rem;
    align-items: end;
}

.pi-line-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .4rem;
}

.pi-lines-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .75rem;
}

.pi-lines-footer .wizard-weight {
    margin: 0;
}

@media (max-width: 900px) {
    .pi-line-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pi-line-description, .pi-line-product {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .pi-line-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pi-line {
        padding: .6rem .7rem;
    }
}

/* ------------------------------------------------------------ sales orders, shipments and invoices (js/sales.js) */

/* Where an order came from: ERP, Shop, Business portal, Integration */
.source-badge {
    background: var(--surface-muted);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.source-shop { background: #fdf2f8; color: #9d174d; border-color: #fbcfe8; }
.source-business { background: var(--primary-soft); color: var(--primary-hover); border-color: #bfdbfe; }
.source-integration { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }

/* The VAT treatment of a document */
.vat-badge {
    background: var(--info-soft);
    color: var(--info);
}

.vat-reverse-charge { background: var(--warning-soft); color: var(--warning); }
.vat-export, .vat-zero-rated, .vat-exempt { background: var(--surface-muted); color: var(--text-muted); border: 1px solid var(--border); }

/* The reverse-charge note, printed on the invoice: shown above the details */
.vat-note {
    border-left-width: 4px;
}

.vat-note-text {
    display: block;
    margin-top: .2rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Net, VAT and gross totals: label left, amount right */
.vat-totals {
    display: grid;
    gap: .35rem;
    max-width: 26rem;
    margin: 0 0 .75rem auto;
}

.vat-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.vat-total-row dt {
    color: var(--text-muted);
}

.vat-total-row dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow-wrap: anywhere;
}

.vat-total-gross {
    padding-top: .35rem;
    border-top: 1px solid var(--border);
    font-size: 1.05rem;
}

/* A refused change with what to do about it (e.g. insufficient stock, customer without address) */
.problem-box[hidden] {
    display: none;
}

.problem-box {
    align-items: flex-start;
}

.problem-box > i {
    margin-top: .2rem;
}

.problem-box strong {
    overflow-wrap: anywhere;
}

.stock-note {
    margin: .9rem 0 0;
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s;
    }

    .menu-open .sidebar {
        transform: none;
        box-shadow: var(--shadow-lg);
    }

    .main {
        margin-left: 0;
    }

    .topbar {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem 1rem;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .topbar-title {
        font-weight: 700;
    }

    .view {
        padding: 1.25rem 1rem 2.5rem;
    }

    .card-filters-actions {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    /* Filters one per row, label and control side by side */
    .table-filters .filter {
        flex: 1 1 100%;
    }

    .table-filters .filter > span:first-child {
        flex: 0 0 6.5rem;
    }

    .table-filters .filter select,
    .table-filters .filter input,
    .table-filters .filter .lookup,
    .table-filters .multi-select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .multi-select > summary {
        max-width: none;
    }

    .multi-select-panel {
        left: auto;
        right: 0;
    }

    .search-box {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .check-groups, .check-group-plain {
        grid-template-columns: 1fr;
    }

    .feature-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .feature-row .feature-value {
        grid-column: 1;
    }

    .feature-row .feature-buttons {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: column;
    }

    .card-header {
        flex-wrap: wrap;
    }

    /* Integration forms: the field above its source, steps as numbers only */
    .mapping-row {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .kv-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .kv-row > input:nth-child(2) {
        grid-column: 1;
    }

    .kv-row > button {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    /* The step's name stays readable for screen readers */
    .wizard-step-button > span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .wizard-step-button {
        padding: .3rem;
    }

    .modal-footer {
        flex-wrap: wrap;
    }

    .vat-totals {
        max-width: none;
        margin-left: 0;
    }

    .problem-box {
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------ Administration > Modules (Phase 8) */

.module-id {
    font-size: .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.module-problem {
    color: var(--danger);
    font-weight: 600;
}

.module-problem a {
    color: var(--danger);
    font-weight: 400;
}

/* An on/off switch (a checkbox with role="switch"); the label next to it says On or Off, so colour is not the only signal */
.module-switch-cell {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.module-switch {
    appearance: none;
    position: relative;
    width: 2.4rem;
    height: 1.35rem;
    margin: 0;
    border-radius: 999px;
    background: var(--border);
    cursor: pointer;
    transition: background .15s ease;
}

.module-switch::before {
    content: "";
    position: absolute;
    top: .15rem;
    left: .15rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform .15s ease;
}

.module-switch:checked {
    background: var(--success);
}

.module-switch:checked::before {
    transform: translateX(1.05rem);
}

.module-switch:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.module-switch:disabled {
    cursor: not-allowed;
    opacity: .55;
}