:root {
    --font-ui: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --bg: #07111f;
    --bg-accent: #0f2744;
    --bg-soft: #0b1a2c;
    --panel: rgba(10, 20, 36, 0.78);
    --panel-strong: rgba(9, 17, 31, 0.9);
    --panel-light: rgba(255, 255, 255, 0.07);
    --line: rgba(169, 190, 218, 0.14);
    --line-strong: rgba(169, 190, 218, 0.26);
    --text: #e7edf7;
    --muted: #9db0ca;
    --accent: #56c2ff;
    --accent-strong: #2e8dff;
    --accent-warm: #8cf0c8;
    --danger: #ff8f8f;
    --success: #95f0c5;
    --shadow: 0 30px 80px rgba(2, 8, 20, 0.45);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --content-width: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: var(--weight-regular);
    line-height: 1.5;
    letter-spacing: 0;
    font-optical-sizing: auto;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(86, 194, 255, 0.24), transparent 28%),
        radial-gradient(circle at top right, rgba(140, 240, 200, 0.16), transparent 24%),
        radial-gradient(circle at bottom center, rgba(46, 141, 255, 0.14), transparent 30%),
        linear-gradient(145deg, #050b14 0%, #08111d 34%, #0b1830 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 92%);
    opacity: 0.25;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.site-shell {
    position: relative;
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(20px);
    background: rgba(4, 10, 20, 0.66);
    border-bottom: 1px solid rgba(169, 190, 218, 0.08);
}

.topbar__inner {
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0;
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-logo {
    width: clamp(190px, 22vw, 250px);
    height: 82px;
    display: flex;
    align-items: center;
}

.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.brand-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-copy {
    display: grid;
    gap: 3px;
}

.brand-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.brand-subtitle {
    color: var(--muted);
    font-size: 0.84rem;
}

.topbar__aside {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--muted);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.topbar__link:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

.topbar__link--active {
    color: var(--text);
    font-weight: 800;
    background: rgba(86, 194, 255, 0.12);
}

.language-form {
    position: relative;
    align-self: flex-start;
    width: max-content;
    color: var(--muted);
    font-size: 0.92rem;
}

.language-form select,
select,
input,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(4, 14, 25, 0.72);
    color: var(--text);
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.language-menu summary {
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.language-menu summary::-webkit-details-marker {
    display: none;
}

.language-menu__options {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    min-width: 170px;
    gap: 4px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #102235;
    box-shadow: var(--shadow);
}

.language-menu:not([open]) .language-menu__options {
    display: none;
}

.language-form .language-menu__options button {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    box-shadow: none;
    text-align: start;
}

.language-form .language-menu__options button:hover {
    background: rgba(86, 194, 255, 0.14);
    color: var(--accent);
    transform: none;
}

input,
select.form-control,
textarea,
.form-control {
    padding: 15px 16px;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: none;
    border-color: rgba(86, 194, 255, 0.58);
    box-shadow: 0 0 0 4px rgba(86, 194, 255, 0.12);
}

label {
    display: inline-block;
    margin-bottom: 2px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #d7e6fb;
}

button,
.button-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

button,
.button-link {
    color: #06111d;
    background: linear-gradient(135deg, var(--accent-warm), var(--accent));
    box-shadow: 0 18px 36px rgba(86, 194, 255, 0.24);
}

button:hover,
.button-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(86, 194, 255, 0.3);
}

.button-secondary {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line);
    box-shadow: none;
}

.button-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.button-ghost {
    color: var(--muted);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.button-ghost:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.auth-shell,
.dashboard-shell,
.page-shell {
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
    padding: 32px 0 48px;
}

.auth-shell {
    display: grid;
    align-items: center;
    min-height: calc(100vh - 88px);
}

.auth-card,
.dashboard-card,
.page-card,
.panel-card,
.metric-card,
.hero-banner {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(12, 24, 41, 0.92), rgba(7, 14, 27, 0.9));
    box-shadow: var(--shadow);
}

.auth-card,
.dashboard-card,
.page-card {
    border-radius: var(--radius-xl);
}

.auth-card::before,
.dashboard-card::before,
.page-card::before,
.panel-card::before,
.metric-card::before,
.hero-banner::before {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(86, 194, 255, 0.18), transparent 68%);
    transform: translate(-25%, 25%);
    pointer-events: none;
}

.auth-card {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
}

.auth-copy,
.auth-form,
.dashboard-card,
.page-card {
    padding: 36px;
}

.auth-copy {
    display: grid;
    gap: 20px;
    align-content: center;
    background:
        linear-gradient(160deg, rgba(86, 194, 255, 0.15), transparent 44%),
        linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
}

.auth-kicker,
.eyebrow {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.025em;
}

.topbar__link-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: currentColor;
}

.topbar__link-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

h1 {
    font-size: clamp(1.9rem, 3vw, 2.65rem);
    line-height: 1.12;
}

h2 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.2;
}

.subcopy {
    margin: 0;
    max-width: 46rem;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}

.auth-points {
    display: grid;
    gap: 14px;
    margin-top: 8px;
}

.auth-point {
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-point strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.98rem;
}

.auth-point span {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.auth-form {
    display: grid;
    gap: 14px;
    align-content: center;
    background: rgba(6, 13, 24, 0.68);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-form__header {
    margin-bottom: 8px;
}

.auth-form__title {
    font-size: 1.45rem;
}

.auth-form__text {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.error-message {
    margin: 2px 0 0;
    color: var(--danger);
    font-size: 0.92rem;
}

.hero-banner {
    margin-bottom: 26px;
    padding: 30px;
    border-radius: var(--radius-xl);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: 24px;
    background:
        linear-gradient(135deg, rgba(86, 194, 255, 0.14), rgba(140, 240, 200, 0.06)),
        linear-gradient(180deg, rgba(12, 24, 41, 0.95), rgba(7, 14, 27, 0.9));
}

.hero-banner__content {
    display: grid;
    gap: 18px;
}


.hero-banner__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    color: #dcecff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.92rem;
}

.hero-banner__side {
    display: grid;
    gap: 14px;
    align-content: stretch;
}

.hero-stat {
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-stat__value {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.hero-stat__label {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.92rem;
}

.dashboard-card {
    display: grid;
    gap: 28px;
}

.dashboard-visual {
    height: 260px;
    margin-bottom: 26px;
    overflow: hidden;
    border: 1px solid rgba(86, 194, 255, 0.24);
    border-radius: var(--radius-xl);
    background: #07111f;
    box-shadow: var(--shadow);
}

.dashboard-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.workflow-card {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(0, 2fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 26px;
    padding: 24px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(86, 194, 255, 0.1), rgba(140, 240, 200, 0.05));
    box-shadow: var(--shadow);
}

.workflow-card__intro {
    display: grid;
    gap: 8px;
}

.workflow-steps {
    display: flex;
    align-items: center;
    gap: 14px;
}

.workflow-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 86px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    background: rgba(5, 15, 27, 0.46);
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.workflow-step:hover {
    transform: translateY(-3px);
    border-color: rgba(86, 194, 255, 0.45);
    background: rgba(86, 194, 255, 0.12);
}

.workflow-step__icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 14px;
    color: #06111d;
    background: var(--accent);
    font-size: 1.35rem;
    font-weight: 900;
}

.workflow-step--purchases .workflow-step__icon { background: var(--accent-warm); }
.workflow-step--sales .workflow-step__icon { background: #ffd08a; }

.workflow-step strong,
.workflow-step small { display: block; }

.workflow-step small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.78rem;
}

[dir="rtl"] .workflow-steps { flex-direction: row-reverse; }

.metrics-grid,
.action-grid {
    display: grid;
    gap: 18px;
}

.metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card {
    padding: 22px;
    border-radius: var(--radius-lg);
}

.metric-card__label {
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.metric-card__value {
    margin-top: 14px;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.metric-card__text {
    margin-top: 8px;
    color: var(--muted);
    line-height: 1.5;
}

.action-card {
    display: grid;
    gap: 12px;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.action-card:hover {
    transform: translateY(-3px);
    border-color: rgba(86, 194, 255, 0.28);
    background: linear-gradient(180deg, rgba(86, 194, 255, 0.09), rgba(255, 255, 255, 0.04));
}

.action-card__eyebrow {
    color: var(--accent-warm);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.action-card__title {
    font-size: 1.15rem;
    font-weight: 800;
}

.action-card__text {
    color: var(--muted);
    line-height: 1.55;
}

.dashboard-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.page-card {
    padding: 28px;
}

.page-header,
.page-header--stacked {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.page-stack {
    display: grid;
    gap: 22px;
}

.table-card,
.form-shell,
.notice-message,
.empty-state,
.scanner-form,
.panel-card {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.table-card,
.form-shell,
.scanner-form,
.panel-card {
    background: rgba(255, 255, 255, 0.04);
}

.table-card,
.form-shell {
    padding: 22px;
}

.notice-message,
.empty-state {
    padding: 16px 18px;
}

.notice-message {
    background: rgba(149, 240, 197, 0.12);
    color: var(--success);
}

.notice-message--error {
    background: rgba(255, 143, 143, 0.12);
    color: var(--danger);
}

.empty-state {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed;
}

.entity-form {
    display: grid;
    gap: 18px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-row {
    display: grid;
    gap: 10px;
}

.form-row--full {
    grid-column: 1 / -1;
}

.date-input-shell {
    position: relative;
    display: block;
}

.date-input-shell > .form-control {
    width: 100%;
    padding-inline-end: 54px;
    font-variant-numeric: tabular-nums;
}

.date-picker-button {
    position: absolute;
    inset-block: 4px;
    inset-inline-end: 4px;
    width: 44px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
}

.date-picker-button:hover {
    color: var(--accent-strong);
    background: rgba(80, 91, 59, 0.1);
    transform: none;
}

.date-picker-button:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: -2px;
}

.date-picker-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.date-picker-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.help-text,
.form-row small,
.scanner-help {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: start;
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background-color 0.18s ease;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.data-table th {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.products-table thead th {
    color: #ffffff;
    background-color: #414b35;
    font-weight: 900;
    letter-spacing: 0.07em;
    border-bottom: 2px solid #303927;
}

.cell-primary {
    font-weight: 700;
}

.cell-muted {
    color: var(--muted);
}

.status-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(86, 194, 255, 0.12);
    color: #cce9ff;
    font-size: 0.82rem;
    font-weight: 700;
}

.products-table .product-unit-chip,
.status-chip.stock-quantity-chip,
.status-chip.stock-movement-chip {
    color: #000000;
    font-weight: 900;
}

.product-thumb {
    display: inline-flex;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
}

.product-thumb--empty {
    align-items: center;
    justify-content: center;
    padding: 6px;
    font-size: 0.72rem;
    color: var(--muted);
    text-align: center;
}

.scanner-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 22px;
}

.scanner-form__main {
    display: grid;
    gap: 10px;
}

.scanner-form__actions {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}

.scanner-input {
    font-size: 1.08rem;
    letter-spacing: 0.04em;
}

.scanner-status {
    min-width: 220px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-weight: 700;
}

.scanner-status--success {
    background: rgba(149, 240, 197, 0.12);
    color: var(--success);
}

.scanner-status--error {
    background: rgba(255, 143, 143, 0.12);
    color: var(--danger);
}

.split-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.panel-card {
    padding: 24px;
}

.panel-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.panel-card__meta {
    color: var(--muted);
    font-size: 0.88rem;
}

.invoice-sheet {
    gap: 24px;
}

.invoice-sheet__header {
    align-items: center;
}

.invoice-sheet__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.invoice-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.invoice-meta-list {
    display: grid;
    gap: 12px;
}

.invoice-meta-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--muted);
}

.invoice-meta-list strong {
    color: var(--text);
}

.invoice-lines-table tfoot td {
    font-weight: 800;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.invoice-notes .subcopy {
    max-width: none;
}

input[type="checkbox"] {
    width: auto;
}

[dir="rtl"] body {
    font-family: "Tahoma", "Aptos", sans-serif;
}

[dir="rtl"] .topbar__inner,
[dir="rtl"] .topbar__brand,
[dir="rtl"] .topbar__aside,
[dir="rtl"] .topbar__nav,
[dir="rtl"] .language-form,
[dir="rtl"] .dashboard-actions,
[dir="rtl"] .scanner-form__actions,
[dir="rtl"] .panel-card__header,
[dir="rtl"] .hero-banner__meta {
    flex-direction: row-reverse;
}

[dir="rtl"] .auth-copy,
[dir="rtl"] .auth-form,
[dir="rtl"] .dashboard-card,
[dir="rtl"] .page-card,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
}

@media (max-width: 980px) {
    .auth-card,
    .hero-banner,
    .metrics-grid,
    .action-grid,
    .split-panel,
    .invoice-meta-grid,
    .form-grid,
    .scanner-form {
        grid-template-columns: 1fr;
    }

    .auth-form {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .hero-banner__side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 760px) {
    .topbar__inner,
    .topbar__aside,
    .topbar__nav,
    .page-header,
    .page-header--stacked,
    .dashboard-actions,
    .scanner-form__actions,
    .invoice-sheet__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar__inner {
        width: min(calc(100% - 24px), var(--content-width));
        padding: 16px 0;
    }

    .auth-shell,
    .dashboard-shell,
    .page-shell {
        width: min(calc(100% - 24px), var(--content-width));
        padding: 22px 0 32px;
    }

    .auth-copy,
    .auth-form,
    .dashboard-card,
    .page-card,
    .table-card,
    .form-shell,
    .panel-card,
    .hero-banner {
        padding: 22px;
    }

    .hero-banner__side {
        grid-template-columns: 1fr;
    }

    .button-link,
    button {
        width: 100%;
    }
}

/* Keep narrow layouts within the viewport instead of sizing grids to tables. */
.page-stack, .page-stack > *, .form-row, .table-wrap { min-width: 0; }
.table-wrap { max-width: 100%; }
.products-tools > summary, .product-mobile-list { display: none; }
.product-detail-link { display: flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.product-detail-link:hover { text-decoration: underline; text-underline-offset: .18em; }
.product-detail-link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 4px; }
.products-tools > .entity-form { margin-top: 22px; }
@media (max-width: 760px) {
    .page-shell { width: calc(100% - 20px); padding-block: 12px 24px; }
    .page-shell .page-card { padding: 12px; border-radius: 20px; }
    .page-shell .page-stack { gap: 14px; }
    .page-shell h1 { font-size: 1.7rem; line-height: 1.15; overflow-wrap: anywhere; }
    .page-shell h2 { font-size: 1.15rem; line-height: 1.3; }
    .page-shell .subcopy { font-size: .9rem; line-height: 1.5; }
    .page-shell .hero-banner { margin-bottom: 0; padding: 14px; border-radius: 16px; gap: 12px; }
    .page-shell .hero-banner__content { gap: 10px; }
    .page-shell .hero-banner__side { gap: 8px; }
    .page-shell .table-card, .page-shell .panel-card, .page-shell .form-shell, .page-shell .scanner-form { padding: 12px; border-radius: 16px; min-width: 0; }
    .page-shell .form-row, .page-shell .scanner-form__main { gap: 6px; }
    .page-shell .entity-form, .page-shell .form-grid { gap: 12px; }
    .page-shell input, .page-shell select, .page-shell textarea { font-size: 16px; padding: 10px 12px; min-width: 0; }
    .page-shell button, .page-shell .button-link { min-height: 44px; padding: 10px 12px; font-size: .9rem; text-align: center; }
    .page-shell .invoice-meta-list > div { flex-wrap: wrap; gap: 4px 12px; overflow-wrap: anywhere; }
    .products-page .hero-stat, .products-page .hero-pill + .hero-pill { display: none; }
    .products-page .hero-pill { padding: 5px 10px; font-size: .8rem; }
    .products-page .table-card { padding: 0; border: 0; background: none; }
    .products-page .table-card > .page-header .subcopy, .products-page .table-card > .page-header > .button-link { display: none; }
    .products-page .table-card > .page-header { margin-bottom: 12px; }
    .products-tools > summary { display: list-item; cursor: pointer; padding: 12px; border: 1px solid var(--line-strong); border-radius: 14px; font-weight: 700; color: var(--text); background: #fffcf7; }
    .products-tools > summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
    .products-tools[open] > summary { margin-bottom: 12px; }
    .products-tools > .entity-form { margin-top: 14px; }
    .products-desktop-table { display: none; }
    .product-mobile-list { display: grid; gap: 12px; }
    .product-mobile-card { padding: 12px; border: 1px solid var(--line-strong); border-radius: 16px; background: #fffcf7; min-width: 0; }
    .product-mobile-card__header { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; }
    .product-mobile-card__header .product-thumb { width: 48px; height: 48px; border-radius: 10px; }
    .product-mobile-card__header h3 { font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
    .product-mobile-card__link { display: block; margin: -12px; padding: 12px; color: var(--text); text-decoration: none; border-radius: 16px; }
    .product-mobile-card__link:hover .product-mobile-card__header h3 { text-decoration: underline; text-underline-offset: .18em; }
    .product-mobile-card__link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
    .product-mobile-card dl { display: grid; gap: 8px; margin: 12px 0 0; }
    .product-mobile-card dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; font-size: .85rem; line-height: 1.4; }
    .product-mobile-card dt { color: var(--muted); }
    .product-mobile-card dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
    .product-mobile-card__unit, .product-mobile-card__price { color: #000; font-weight: 800; }
}

/* Warm wall-coverings theme */
:root {
    --bg: #d9d0c4;
    --bg-accent: #c7b7a3;
    --bg-soft: #eee8df;
    --panel: rgba(250, 247, 242, 0.92);
    --panel-strong: rgba(244, 238, 230, 0.97);
    --panel-light: rgba(111, 118, 80, 0.09);
    --line: rgba(82, 74, 63, 0.17);
    --line-strong: rgba(82, 74, 63, 0.3);
    --text: #39342e;
    --muted: #71685e;
    --accent: #707853;
    --accent-strong: #505b3b;
    --accent-warm: #b56f4c;
    --danger: #b6534c;
    --success: #5d7953;
    --shadow: 0 24px 60px rgba(73, 61, 47, 0.17);
}

body {
    background:
        radial-gradient(circle at top left, rgba(181, 111, 76, 0.18), transparent 30%),
        radial-gradient(circle at top right, rgba(112, 120, 83, 0.2), transparent 27%),
        linear-gradient(145deg, #d5cabe 0%, #eee8df 48%, #cec1b1 100%);
}

body::before {
    background-image:
        linear-gradient(rgba(57, 52, 46, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 52, 46, 0.04) 1px, transparent 1px);
}

.topbar {
    background: rgba(239, 233, 224, 0.9);
    border-bottom-color: rgba(82, 74, 63, 0.14);
}

.topbar__link:hover,
.topbar__link--active {
    background: rgba(112, 120, 83, 0.14);
}

.language-menu summary,
.button-secondary,
.hero-pill,
.hero-stat,
.workflow-step {
    background: rgba(255, 252, 247, 0.66);
    border-color: rgba(82, 74, 63, 0.14);
}

.language-menu__options {
    background: #f7f2eb;
}

.language-form .language-menu__options button {
    color: var(--text);
}

input,
select,
textarea,
.form-control {
    background: rgba(255, 252, 247, 0.78);
}

label {
    color: #514a42;
}

.auth-card,
.dashboard-card,
.page-card,
.panel-card,
.metric-card {
    background: linear-gradient(180deg, rgba(253, 250, 246, 0.95), rgba(239, 232, 222, 0.93));
}

.hero-banner {
    background:
        linear-gradient(135deg, rgba(112, 120, 83, 0.14), rgba(181, 111, 76, 0.1)),
        linear-gradient(180deg, rgba(252, 249, 244, 0.96), rgba(236, 228, 217, 0.94));
}

.workflow-card {
    background: linear-gradient(135deg, rgba(250, 247, 242, 0.92), rgba(226, 216, 202, 0.88));
}

.hero-pill {
    color: #514a42;
}

.button-secondary,
.button-ghost {
    color: var(--text);
}

/* Streamlined dashboard */
.dashboard-visual { height: clamp(138px, 15vw, 178px); margin-bottom: 18px; border-color: var(--line); background: var(--panel-strong); }
.dashboard-card { gap: 22px; }
.dashboard-card .metrics-grid { gap: 14px; }
.daily-priorities { margin-block: 24px; }
.daily-priorities__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.daily-priorities__header h2 { font-size: 1.35rem; margin: 0; }
.daily-priorities__header p, .daily-priorities__header time { margin: 6px 0 0; color: var(--muted); font-size: .85rem; }
.daily-priorities__header time { white-space: nowrap; }
.daily-priorities__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.daily-priorities__group { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #fffcf7; display: flex; flex-direction: column; }
.daily-priorities__group h3 { font-size: 1rem; margin: 0; }
.daily-priorities__help { font-size: .8rem; color: var(--muted); margin: 8px 0 12px; line-height: 1.5; }
.daily-priorities__group ul { padding: 0; margin: 0 0 16px; list-style: none; }
.daily-priorities__group li + li { border-top: 1px solid var(--line); }
.daily-priorities__group li a { display: grid; gap: 4px; padding-block: 12px; overflow-wrap: anywhere; }
.daily-priorities__group li a:hover strong { text-decoration: underline; }
.daily-priorities__group li span, .daily-priorities__group li small { font-size: .85rem; }
.daily-priorities__group li small { color: var(--muted); }
.daily-priorities__group li .daily-priorities__late { color: #914b2c; font-weight: 700; }
.daily-priorities__empty { padding-block: 12px; color: var(--muted); font-size: .9rem; }
.daily-priorities__all { margin-top: auto; padding-block: 8px; font-size: .85rem; font-weight: 700; color: var(--accent-strong); }
.daily-priorities a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 600px) { .daily-priorities__header { flex-direction: column; gap: 0; } }
.metric-card--link { display: block; }
.metric-card--link:hover { border-color: var(--accent-strong); }
.metric-card--link:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; }
.dashboard-priorities .metric-card__label { color: var(--text); }
.dashboard-card .metric-card { padding: 18px 20px; }
.dashboard-card .metric-card__value { margin-top: 8px; }
.dashboard-shortcuts { border-top: 1px solid var(--line); padding-top: 16px; }
.dashboard-shortcuts summary { cursor: pointer; width: fit-content; color: var(--accent-strong); font-weight: 800; }
.dashboard-shortcuts .action-grid { margin-top: 18px; }
.dashboard-actions { border-top: 1px solid var(--line); padding-top: 16px; }

/* Rounded bold navigation */
.topbar__inner {
    width: min(calc(100% - 32px), 1440px);
    gap: 12px;
    padding-block: 12px;
}

.brand-logo {
    width: clamp(138px, 12vw, 170px);
    height: 58px;
}

.topbar__aside {
    min-width: 0;
    gap: 8px;
}

.topbar__nav {
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
}

.topbar__link {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid rgba(82, 74, 63, 0.16);
    background: rgba(255, 252, 247, 0.62);
    color: #665e54;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(73, 61, 47, 0.08);
}

.language-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    font-size: 0.9rem;
}

@media (min-width: 761px) and (max-width: 1080px) {
    .topbar__nav {
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

.topbar__link:hover {
    color: #39342e;
    border-color: rgba(112, 120, 83, 0.34);
    background: rgba(255, 252, 247, 0.88);
}

.topbar__link--active {
    color: #414a30;
    border-color: rgba(112, 120, 83, 0.46);
    background: rgba(112, 120, 83, 0.2);
    box-shadow: 0 8px 20px rgba(73, 61, 47, 0.12);
}

.commercial-nav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 20px 0; }
.commercial-nav a { color: var(--accent-strong); text-decoration: underline; }
.commercial-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin: 24px 0; }
.commercial-filters > div { flex: 1; min-width: 180px; display: grid; gap: 6px; }
#commercial-document-form .errorlist { color: var(--danger); }
#commercial-document-form td { min-width: 130px; }
#commercial-document-form td:first-child { min-width: 250px; }
.invoice-sheet__actions { flex-wrap: wrap; }

.pdf-preview-action {
    gap: 8px;
}

.pdf-preview-action svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* Invoice print preview */
.invoice-preview-page {
    background: #e8e2d8;
}

.invoice-preview-page .topbar,
.invoice-preview-page .mobile-action-bar,
.invoice-preview-page .site-footer {
    display: none;
}

.invoice-print-shell--preview {
    width: min(calc(100% - 32px), 900px);
    padding-block: 24px 48px;
}

.invoice-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(91, 82, 69, 0.18);
    border-radius: 14px;
    background: #fffdf9;
    box-shadow: 0 12px 32px rgba(73, 61, 47, 0.14);
}

.invoice-preview-toolbar h1 {
    margin: 0;
    font-size: clamp(1.08rem, 2vw, 1.35rem);
}

.invoice-preview-toolbar p {
    max-width: 60ch;
    margin: 4px 0 0;
    color: #6f675e;
    font-size: 0.84rem;
}

.invoice-preview-toolbar__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.invoice-preview-toolbar__actions button,
.invoice-preview-toolbar__actions a {
    min-height: 44px;
}

.invoice-preview-toolbar__actions button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.invoice-preview-toolbar__actions svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.invoice-paper {
    width: 100%;
    min-height: 297mm;
    box-sizing: border-box;
    padding: 15mm 14mm 12mm;
    background: #fff;
    color: #24221f;
    box-shadow: 0 18px 48px rgba(67, 57, 45, 0.18);
}

.invoice-paper__company {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: start;
    gap: 9mm;
    padding-bottom: 6mm;
    border-bottom: 1px solid #7f856c;
}

.invoice-paper__company img {
    width: 180px;
    height: auto;
    object-fit: contain;
}

.invoice-paper__company-details {
    min-width: 0;
    font-size: 9pt;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.invoice-paper__company-details > strong {
    display: block;
    margin-bottom: 1.5mm;
    font-size: 12pt;
}

.invoice-paper__company-details p {
    margin: 0.5mm 0;
}

.invoice-paper__registrations {
    display: flex;
    flex-wrap: wrap;
    gap: 1mm 5mm;
    margin-top: 2mm;
}

.invoice-paper__title {
    width: min(78mm, 72%);
    margin: 10mm auto 9mm;
    padding: 2.5mm 5mm;
    border: 1.5px solid #737b58;
    border-radius: 9px;
    color: #4d5539;
    font-size: 20pt;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.02em;
}

.invoice-paper__identity {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 14mm;
    margin-bottom: 9mm;
}

.invoice-paper__document-data,
.invoice-paper__customer {
    min-width: 0;
}

.invoice-paper__document-data dl,
.invoice-paper__totals {
    margin: 0;
}

.invoice-paper__document-data dl > div {
    display: grid;
    grid-template-columns: minmax(105px, 1fr) auto;
    gap: 5mm;
    padding-block: 1.5mm;
    border-bottom: 1px solid #d8d5cd;
}

.invoice-paper__document-data dt,
.invoice-paper__totals dt {
    font-weight: 700;
}

.invoice-paper__document-data dd,
.invoice-paper__totals dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-align: end;
}

.invoice-paper__customer {
    padding-inline-start: 7mm;
    border-inline-start: 1px solid #a8ab98;
    font-size: 9.5pt;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.invoice-paper__customer h2 {
    margin: 0 0 2mm;
    color: #4d5539;
    font-size: 11pt;
}

.invoice-paper__customer p {
    margin: 0.8mm 0;
}

.invoice-paper__customer-name {
    font-size: 11pt;
    font-weight: 800;
}

.invoice-paper__cancelled {
    margin: 0 0 5mm;
    padding: 3mm;
    border: 1px solid #b75a4c;
    color: #833d33;
    font-weight: 700;
    text-align: center;
}

.invoice-paper__table-wrap {
    overflow-x: auto;
}

.invoice-paper__table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 9.5pt;
    font-variant-numeric: tabular-nums;
}

.invoice-paper__table th,
.invoice-paper__table td {
    padding: 2.6mm 2.2mm;
    border: 1px solid #939780;
    text-align: end;
    vertical-align: top;
}

.invoice-paper__table th {
    color: #414733;
    background: #f1f1ea;
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.invoice-paper__table th:first-child,
.invoice-paper__table td:first-child {
    width: 52%;
    text-align: start;
}

.invoice-paper__table tbody tr {
    break-inside: avoid;
}

.invoice-paper__closing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(215px, 0.52fr);
    align-items: start;
    gap: 12mm;
    margin-top: 7mm;
}

.invoice-paper__amount-words {
    margin: 0;
    font-size: 9.5pt;
    line-height: 1.55;
}

.invoice-paper__amount-words span,
.invoice-paper__amount-words strong {
    display: block;
}

.invoice-paper__amount-words strong {
    margin-top: 1.5mm;
}

.invoice-paper__totals > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5mm;
    padding: 3mm 0;
    border-top: 2px solid #59613f;
    border-bottom: 2px double #59613f;
}

.invoice-paper__notes,
.invoice-paper__terms {
    margin-top: 8mm;
    padding-top: 4mm;
    border-top: 1px solid #d8d5cd;
    font-size: 9pt;
}

.invoice-paper__notes h2,
.invoice-paper__terms h2 {
    margin: 0 0 1.5mm;
    font-size: 10pt;
}

.invoice-paper__notes p,
.invoice-paper__terms p {
    margin: 0;
}

.invoice-paper__footer {
    margin-top: 12mm;
    padding-top: 3mm;
    border-top: 1px solid #a8ab98;
    color: #57544d;
    font-size: 8pt;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 760px) {
    .invoice-print-shell--preview {
        width: 100%;
        padding: 12px 10px 32px;
    }

    .invoice-preview-toolbar {
        position: static;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .invoice-preview-toolbar__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .invoice-preview-toolbar__actions > * {
        justify-content: center;
        width: 100%;
    }

    .invoice-paper {
        min-height: 0;
        padding: 24px 18px;
    }

    .invoice-paper__company {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .invoice-paper__company img {
        width: 150px;
    }

    .invoice-paper__title {
        width: min(260px, 78%);
        margin-block: 28px 24px;
        font-size: 1.35rem;
    }

    .invoice-paper__identity,
    .invoice-paper__closing {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .invoice-paper__customer {
        padding: 18px 0 0;
        border-inline-start: 0;
        border-top: 1px solid #a8ab98;
    }
}

@media print {
    .invoice-preview-page {
        background: #fff;
    }

    .invoice-print-shell--preview {
        width: 100%;
        padding: 0;
    }

    .invoice-paper {
        min-height: 0;
        padding: 0;
        box-shadow: none;
    }

    .invoice-paper__table-wrap {
        overflow: visible;
    }

    .invoice-paper__table {
        min-width: 0;
    }

    .invoice-paper__footer {
        display: none;
    }
}

/* Commercial document shortcuts */
.documents-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 12px; border: 1px solid var(--line-strong); border-right: 0; border-radius: 18px 0 0 18px; background: #f5f1e8; color: var(--accent-strong); box-shadow: -4px 6px 24px #51473420; }
.documents-tab span { writing-mode: vertical-rl; font-size: 14px; font-weight: 800; }
.documents-tab:hover { transform: translateY(-50%); }
.documents-tab { width: auto; max-width: 64px; box-sizing: border-box; }
@media (max-width: 760px) {
    .documents-tab {
        top: auto;
        right: calc(16px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        min-width: 52px;
        max-width: 52px;
        height: 52px;
        min-height: 52px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        transform: none;
        box-shadow: 0 4px 16px #51473430;
    }
    .documents-tab:hover { transform: none; }
    .documents-tab span { display: none; }
}
.documents-sidebar { position: fixed; inset: 0 0 0 auto; margin: 0; box-sizing: border-box; width: min(360px, 92vw); max-width: 92vw; height: 100%; height: 100dvh; max-height: 100dvh; padding: 28px 22px; border: 0; border-left: 1px solid var(--line-strong); border-radius: 24px 0 0 24px; background: #f5f1e8; color: var(--text); box-shadow: -16px 0 50px #51473430; overflow-y: auto; }
.documents-sidebar[open] { display: flex; flex-direction: column; gap: 30px; animation: documents-slide-in .2s ease-out; }
.documents-sidebar::backdrop { background: #39352d45; }
.documents-sidebar__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.documents-sidebar__header h2 { margin: 0; font-size: 1.3rem; line-height: 1.4; }
.documents-sidebar__header .eyebrow { margin-top: 0; }
.documents-sidebar__close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #fffcf7; color: var(--accent-strong); border: 1px solid var(--line-strong); font-size: 28px; }
/* Progressive enhancement: navigation stays visible if JavaScript is unavailable. */
.topbar__menu-toggle { display: none; }
.site-footer { padding: 24px 16px max(24px, env(safe-area-inset-bottom)); }
.site-footer__inner { display: flex; justify-content: flex-end; width: min(calc(100% - 32px), 1440px); margin: 0 auto; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.site-footer__journal { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; color: var(--muted); font-size: .9rem; font-weight: 750; text-decoration: none; }
.site-footer__journal:hover, .site-footer__journal--active { color: var(--text); background: rgba(112, 120, 83, 0.14); }
.site-footer__journal:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; }
@media (max-width: 760px) {
    .topbar--menu-ready .topbar__inner { flex-direction: row; align-items: center; gap: 12px; padding-block: 10px; }
    .topbar--menu-ready .brand-logo { width: 144px; height: 48px; }
    .topbar--menu-ready .topbar__menu-toggle {
        display: inline-flex; width: auto; min-height: 44px; padding: 0 14px; flex-shrink: 0;
        border: 1px solid var(--line-strong); background: #fffcf7; color: var(--text);
        box-shadow: none; gap: 8px; font-size: .9rem;
    }
    .topbar--menu-ready .topbar__menu-toggle:hover { transform: none; }
    .topbar__menu-toggle:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; }
    .topbar--menu-ready .topbar__aside {
        display: none; position: absolute; top: 100%; inset-inline: 12px;
        padding: 14px; border: 1px solid var(--line-strong); border-radius: 0 0 20px 20px;
        background: #f7f2eb; box-shadow: var(--shadow);
        max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto;
        overscroll-behavior: contain; gap: 12px;
    }
    .topbar--menu-open .topbar__aside { display: flex; }
    .topbar--menu-ready .topbar__nav { gap: 6px; }
    .topbar--menu-ready .topbar__link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; font-size: .92rem; }
    .topbar--menu-ready .topbar__link-icon {
        width: 34px; height: 34px; flex-basis: 34px; padding: 7px;
        border-radius: 10px; background: rgba(112, 120, 83, 0.13); color: #596242;
    }
    .topbar--menu-ready .topbar__link--active .topbar__link-icon { background: #596242; color: #fffdf8; }
    .site-footer { padding-inline: 12px; }
    .site-footer__inner { width: 100%; justify-content: center; }
    .topbar--menu-ready .language-form { width: 100%; }
    .topbar--menu-ready .language-menu summary { width: max-content; min-height: 48px; gap: 10px; }
    .topbar--menu-ready .language-menu summary .topbar__link-icon {
        width: 30px; height: 30px; flex-basis: 30px; padding: 6px;
        border-radius: 9px; background: rgba(112, 120, 83, 0.13); color: #596242;
    }
    .topbar--menu-ready .language-menu__options { position: static; min-width: 0; margin-top: 8px; }
}
.documents-sidebar__links { display: grid; gap: 12px; }
.dashboard-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.dashboard-quick-actions .button-link { min-height: 44px; padding: 6px 12px; font-size: .875rem; line-height: 1.25; box-shadow: none; }
.dashboard-quick-actions .button-link:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; }
.documents-sidebar__links .document-shortcut { min-height: 56px; padding: 16px; border-radius: 16px; }
.documents-tab:focus-visible, .documents-sidebar button:focus-visible, .documents-sidebar a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
body.documents-sidebar-open { overflow: hidden; }
@keyframes documents-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .documents-sidebar[open] { animation: none; } }
@media print { .documents-tab, .documents-sidebar { display: none !important; } }
.document-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.document-shortcut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; min-height: 62px; padding: 13px 17px; border: 1px solid var(--line-strong); border-radius: 22px; background: #fffcf7; color: var(--accent-strong); text-decoration: none; overflow-wrap: anywhere; }
.document-shortcut strong { font-size: 0.94rem; }
.document-shortcut small { width: 100%; color: var(--muted); font-size: 0.75rem; }
a.document-shortcut:hover { border-color: var(--accent); background: #f2eee4; }
a.document-shortcut:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.document-shortcut--pending { border-style: dashed; background: rgba(255, 252, 247, 0.5); color: var(--muted); }
@media (max-width: 380px) { .document-shortcuts { grid-template-columns: 1fr; } }

/* Stock notifications */
.stock-notifications { min-width: 0; align-self: start; }
.stock-notifications summary { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border: 1px solid var(--line); border-radius: 999px; background: #fffcf7; color: var(--accent-strong); font-weight: 800; cursor: pointer; list-style: none; }
.stock-notifications summary::-webkit-details-marker { display: none; }
.stock-notifications summary:hover { border-color: var(--accent); }
.stock-notifications summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.stock-notifications svg { flex-shrink: 0; }
.stock-notifications__count { display: grid; place-items: center; min-width: 26px; height: 26px; padding-inline: 6px; margin-inline-start: auto; border-radius: 999px; background: #92502f; color: white; font-size: 0.82rem; }
.stock-notifications__panel { margin-top: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #fffcf7; max-height: 280px; overflow: auto; overflow-wrap: anywhere; }
.stock-notifications__panel h2 { font-size: 1rem; }
.stock-notifications__panel ul { padding: 0; margin: 12px 0 0; list-style: none; }
.stock-notifications__panel li { display: grid; gap: 5px; padding: 12px 0; border-top: 1px solid var(--line); }
.stock-notifications__panel a { color: var(--accent-strong); font-weight: 700; text-decoration: underline; }
.stock-notifications__panel li span, .stock-notifications__panel p { font-size: 0.9rem; color: var(--muted); }
.stock-notifications--compact .stock-notifications__panel { max-height: none; overflow: visible; padding: 16px; }
.stock-notifications--compact .stock-notifications__panel h2 { margin: 0; }
.stock-notifications--compact ul { max-height: min(300px, 45vh); overflow-y: auto; overscroll-behavior: contain; }
.stock-notifications__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.stock-notifications__panel .stock-alert-status { padding: 3px 8px; border-radius: 8px; font-weight: 600; font-size: .8rem; }
.stock-notifications__panel .stock-alert-status--low { color: #784515; background: #fff0dc; }
.stock-notifications__panel .stock-alert-status--out { color: #8b392c; background: #f8e5df; }
.stock-notifications__all { display: flex; align-items: center; min-height: 44px; margin-top: 8px; border-top: 1px solid var(--line); }

/* Dashboard search */
.hero-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hero-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 6px 7px 6px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #fffcf7;
    box-shadow: 0 9px 24px rgba(73, 61, 47, 0.1);
}
.hero-search__field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-search__field input[type="search"] {
    min-width: 0;
    flex: 1;
    width: 100%;
    padding: 8px 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
}
.hero-search__field button {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
    background: var(--accent-strong);
}
/* Compact welcome: greeting, search and notification bell share one row. */
.hero-banner--compact {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 18px 24px;
    overflow: visible;
    border-radius: 24px;
}
.hero-banner--compact::before { display: none; }
.hero-banner--compact .hero-banner__content { gap: 4px; }
.hero-banner--compact h1 { margin: 0; font-size: 20px; line-height: 1.2; }
.hero-banner--compact .welcome-logo { display: block; width: 140px; max-width: 100%; height: auto; }
@media (max-width: 760px) {
    .hero-banner--compact .welcome-logo { width: 80px; }
}
.hero-banner--compact .subcopy { margin: 0; font-size: 16px; line-height: 1.4; }
.hero-banner--compact .hero-banner__side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}
.hero-banner--compact .hero-search { flex: 1; min-width: 0; max-width: 480px; margin: 0; }
.hero-banner--compact .hero-search__field { min-height: 48px; padding: 3px 4px 3px 16px; }
.hero-banner--compact .hero-search__field input[type="search"] { padding-block: 4px; }
.hero-banner--compact .hero-search__field button { min-height: 40px; box-shadow: none; }
.hero-banner--compact .stock-notifications { flex: 0 0 48px; align-self: center; }
.hero-banner--compact .stock-notifications summary {
    position: relative;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
}
.hero-banner--compact .stock-notifications__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.hero-banner--compact .stock-notifications__count {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    min-width: 20px;
    height: 20px;
    padding-inline: 4px;
    font-size: 11px;
}
.hero-banner--compact .stock-notifications__panel {
    position: absolute;
    z-index: 110;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: min(360px, calc(100vw - 48px));
    margin-top: 0;
    box-shadow: var(--shadow);
}
@media (max-width: 600px) {
    .hero-banner--compact { padding: 14px 12px; gap: 10px; border-radius: 20px; }
    .hero-banner--compact h1 { font-size: 16px; }
    .hero-banner--compact .subcopy { font-size: 13px; }
    .hero-banner--compact .hero-banner__side { gap: 8px; }
    .hero-banner--compact .hero-search__field { gap: 2px; padding-inline-start: 10px; }
    .hero-banner--compact .hero-search__field input { font-size: 16px; }
    .hero-banner--compact .stock-notifications { flex-basis: 44px; }
    .hero-banner--compact .stock-notifications summary { width: 44px; height: 44px; }
}
@media (max-width: 420px) {
    .hero-banner--compact .subcopy { max-width: 105px; }
}
.dashboard-search-results {
    min-width: 0;
    overflow-wrap: anywhere;
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--panel);
}
.dashboard-search-results h2 { font-size: 1.25rem; }
.dashboard-search-results h3 { margin-top: 6px; font-size: 1rem; }
.dashboard-search-results__list { display: grid; gap: 8px; }
.dashboard-search-results__list a {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fffcf7;
    color: var(--text);
    text-decoration: none;
}
.dashboard-search-results__list a:hover { border-color: var(--accent); }
.dashboard-search-results__list span { color: var(--muted); }
.dashboard-search-results__list a > * { min-width: 0; }
.customer-filter-note { margin: 16px 0; color: var(--muted); }
.customer-filter-note a { margin-inline-start: 12px; color: var(--accent-strong); }
@media (max-width: 760px) {
    .hero-search__field button { width: 40px; }
    .dashboard-search-results__list a { flex-direction: column; }
}
@media print {
    body {
        background: #fff;
        color: #111827;
    }

    body::before,
    .topbar,
    .no-print {
        display: none !important;
    }

    .page-shell,
    .invoice-print-shell {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .page-card,
    .invoice-sheet,
    .panel-card {
        background: #fff !important;
        color: #111827 !important;
        box-shadow: none !important;
        border-color: #d1d5db !important;
    }

    .subcopy,
    .invoice-meta-list > div,
    .data-table th {
        color: #4b5563 !important;
    }

    .data-table td,
    .data-table th,
    .invoice-lines-table tfoot td,
    .invoice-meta-list strong {
        color: #111827 !important;
    }

    .button-link,
    button {
        display: none !important;
    }
}
.document-status { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 16px; font-weight: 700; background: #eee9df; }
.document-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.document-status--draft { color: #805c0c; background: #fff0c7; }
.document-status--confirmed { color: #475636; background: #e7eddd; }
.document-status--cancelled { color: #9b4736; background: #fae7df; }
.document-total td { background: #e5e4d9; color: #3e4532; font-weight: 800; }
.quote-editor__form { display: grid; gap: 24px; }
.quote-editor__dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.quote-editor__client, .quote-editor__bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.quote-editor__client .form-row:last-child { grid-column: 1 / -1; }
.quote-editor__totals { display: grid; gap: 16px; }
.quote-editor__totals > div:not(.form-row) { display: flex; justify-content: space-between; gap: 20px; }
.quote-editor__totals output, .quote-editor__lines output { white-space: nowrap; font-variant-numeric: tabular-nums; }
.quote-editor__grand-total { padding-top: 16px; border-top: 1px solid #b5b89f; font-size: 1.15rem; color: #3e4532; font-weight: 800; }
.quote-editor__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.quote-editor__actions button:disabled { opacity: .5; cursor: not-allowed; }
.quote-editor__lines { min-width: 900px; }
.quote-editor__lines select { min-width: 210px; }
.quote-editor__lines input:not([type=checkbox]):not([type=hidden]) { min-width: 90px; }
@media (max-width: 760px) { .quote-editor__dates, .quote-editor__client, .quote-editor__bottom { grid-template-columns: 1fr; } }
.quote-editor__logistics { display: grid; gap: 20px; align-content: start; }
.document-status--order.document-status--confirmed { color: #235881; background: #e0eef9; }
.delivery-signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; break-inside: avoid; margin: 24px 0; }
.delivery-signatures > div { min-height: 110px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 14px; font-weight: 700; background: #fffcf7; }
.delivery-total { text-align: end; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* Dashboard hierarchy and narrow-screen controls */
.dashboard-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.dashboard-card::before { display: none; }
.dashboard-card .dashboard-priorities {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.dashboard-card .metric-card,
.dashboard-card .panel-card {
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(73, 61, 47, 0.08);
}
.daily-priorities { margin-block: 4px 0; }
.daily-priorities[hidden], .daily-priorities-toggle[hidden] { display: none; }
.daily-priorities-toggle {
    width: 100%;
    min-width: 0;
    text-align: start;
    font: inherit;
    color: var(--text);
    letter-spacing: normal;
}
.daily-priorities-toggle > span { display: block; }
.daily-priorities-toggle[aria-expanded="true"] { border-color: var(--accent-strong); }
@media (min-width: 761px) {
    .dashboard-card .dashboard-priorities--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }
    .dashboard-priorities--four > .metric-card { min-width: 0; }
    .dashboard-priorities--four .metric-card__label {
        min-height: 2.8em;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
}
@media (min-width: 761px) and (max-width: 959px) {
    .dashboard-card .dashboard-priorities--four > .metric-card { padding: 16px 12px; }
}
.daily-priorities__group { border-radius: 16px; }
@media (min-width:761px){
    .daily-priorities.daily-priorities--popover{position:fixed;z-index:120;inset:112px 24px auto;max-width:920px;max-height:calc(100vh - 128px);margin:0 auto;overflow:auto;padding:16px;border:1px solid #b6c99a;border-radius:16px;background:#fffdf9;box-shadow:0 18px 42px rgba(67,58,47,.2)}
    .daily-priorities--popover .daily-priorities__header{margin-bottom:10px}
    .daily-priorities--popover .daily-priorities__header h2{font-size:1.15rem}
    .daily-priorities--popover .daily-priorities__header p{font-size:.78rem}
    .daily-priorities--popover .daily-priorities__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
    .daily-priorities--popover .daily-priorities__group{padding:12px}
    .daily-priorities--popover .daily-priorities__help{margin:5px 0 8px;font-size:.72rem;line-height:1.3}
    .daily-priorities--popover .daily-priorities__group ul{margin-bottom:8px}
    .daily-priorities--popover .daily-priorities__group li a{gap:2px;padding-block:7px}
    .daily-priorities--popover .daily-priorities__group li span,.daily-priorities--popover .daily-priorities__group li small,.daily-priorities--popover .daily-priorities__all{font-size:.74rem}
}
.dashboard-priorities .metric-card{border:1px solid var(--line-strong);background:#fffaf5;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.dashboard-priorities .metric-card__value{font-variant-numeric:tabular-nums}
.dashboard-priorities .dashboard-priority--quotes{border-color:#adcde0;background:#f5fafc}.dashboard-priorities .dashboard-priority--quotes .metric-card__value{color:#2f6e91}
.dashboard-priorities .dashboard-priority--orders{border-color:#e3c28b;background:#fff9ed}.dashboard-priorities .dashboard-priority--orders .metric-card__value{color:#9a6324}
.dashboard-priorities .dashboard-priority--unpaid{border-color:#dfa69e;background:#fff5f3}.dashboard-priorities .dashboard-priority--unpaid .metric-card__value{color:#a44d43}
.dashboard-priorities .dashboard-priority--today{border-color:#b6c99a;background:#f7faef}.dashboard-priorities .dashboard-priority--today .metric-card__value{color:#4d6a32}
.dashboard-priorities .metric-card:hover{box-shadow:0 8px 20px rgba(67,58,47,.08)}
.hero-banner--compact h1 { font-size: 22px; }
.hero-search__field button { display: grid; place-items: center; }
.dashboard-card .data-table a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.dashboard-card .data-table a:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}
@media (max-width: 760px) {
    .dashboard-visual { height: 124px; margin-bottom: 14px; border-radius: 18px; }
    .hero-banner--compact {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 8px 10px;
        margin-bottom: 12px;
        border-radius: 16px;
    }
    .hero-banner--compact .hero-banner__content { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .hero-banner--compact .hero-banner__content h1 { flex: 0 0 80px; }
    .hero-banner--compact .hero-banner__content .subcopy { min-width: 0; max-width: none; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
    .hero-banner--compact .hero-banner__side { width: 100%; justify-content: stretch; }
    .hero-banner--compact .hero-search { max-width: none; }
    .hero-banner--compact .hero-search__field { min-height: 44px; padding: 0 0 0 10px; padding-inline: 10px 0; gap: 2px; box-shadow: none; }
    .hero-banner--compact .hero-search__field input[type="search"] { padding-block: 2px; font-size: 16px; }
    .hero-banner--compact .hero-search__field button { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; }
    .hero-banner--compact .stock-notifications { flex: 0 0 44px; }
    .hero-banner--compact .stock-notifications summary { width: 44px; height: 44px; }
    .dashboard-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
    .dashboard-quick-actions .button-link { min-width: 0; padding: 6px 8px; text-align: center; overflow-wrap: anywhere; }
    .dashboard-card .metric-card { padding: 14px 16px; }
    .dashboard-card .metric-card__value { font-size: 1.75rem; }
}
@media (max-width: 600px) {
    .hero-banner--compact h1 { font-size: 1.25rem; }
    .hero-banner--compact .subcopy { max-width: none; font-size: 0.875rem; }
}@media (max-width: 520px) {
    .dashboard-priorities .metric-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 12px;
        min-height: 78px;
    }
    .dashboard-priorities .metric-card__label { grid-column: 1; }
    .dashboard-priorities .metric-card__value {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin: 0;
        font-size: 1.6rem;
        font-variant-numeric: tabular-nums;
    }
    .dashboard-priorities .metric-card__text { grid-column: 1; margin: 0; font-size: 0.82rem; }
}

/* Keep the administrator overview visible on short desktop windows.
   Expanded priorities and search results retain normal page scrolling. */
.dashboard-account-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}
.dashboard-account-actions form { margin: 0; }
.dashboard-account-actions button { min-height: 44px; padding: 6px 12px; font-size: .875rem; }
.site-shell:has(.dashboard-shell--overview) > .site-footer { display: none; }
@media (min-width: 761px) {
    .dashboard-shell--overview { padding-block: 8px; }
    .dashboard-shell--overview .dashboard-visual {
        height: clamp(88px, calc(100dvh - 452px), 160px);
        margin-bottom: 8px;
    }
    .dashboard-shell--overview .hero-banner--compact {
        padding: 10px 16px;
        margin-bottom: 8px;
    }
    .dashboard-shell--overview .dashboard-quick-actions { margin: 0 0 10px; align-items: center; }
    .dashboard-shell--overview .dashboard-card { gap: 12px; }
    .dashboard-shell--overview .dashboard-priorities--four > .metric-card { padding: 12px 16px; }
    .dashboard-shell--overview .dashboard-priorities--four .metric-card__label { min-height: 1.4em; }
    .dashboard-shell--overview .metric-card__value { font-size: 1.75rem; margin-top: 4px; }
    .dashboard-shell--overview .metric-card__text { margin-top: 4px; }
    .dashboard-shell--overview .dashboard-account-actions { margin-top: 8px; }
}

/* Commercial profile dashboard */
.commercial-dashboard {
    display: grid;
    gap: 20px;
}
.commercial-dashboard > .dashboard-quick-actions { margin: -8px 0 0; }
.commercial-dashboard__header {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(360px, 1.25fr);
    align-items: center;
    gap: 32px;
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(253, 250, 246, 0.96);
    box-shadow: 0 14px 36px rgba(73, 61, 47, 0.1);
}
.commercial-dashboard__intro h1 {
    margin: 0;
    font-size: 1.75rem;
    letter-spacing: -0.025em;
}
.commercial-dashboard__intro p {
    max-width: 52ch;
    margin: 7px 0 0;
    color: var(--muted);
    line-height: 1.5;
}
.commercial-dashboard__intro > span {
    display: block;
    margin-top: 9px;
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 750;
}
.commercial-dashboard__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}
.commercial-dashboard__tools .hero-search {
    flex: 1;
    max-width: 520px;
}
.commercial-dashboard__tools .stock-notifications {
    flex: 0 0 48px;
    position: relative;
    align-self: center;
}
.commercial-dashboard__tools .stock-notifications summary {
    position: relative;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
}
.commercial-dashboard__tools .stock-notifications__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.commercial-dashboard__tools .stock-notifications__count {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    min-width: 20px;
    height: 20px;
    padding-inline: 4px;
    font-size: 0.7rem;
}
.commercial-dashboard__tools .stock-notifications__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: min(360px, calc(100vw - 40px));
    margin: 0;
    box-shadow: var(--shadow);
}
.commercial-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.commercial-kpi {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fffcf7;
    box-shadow: 0 10px 24px rgba(73, 61, 47, 0.07);
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.commercial-kpi:hover {
    border-color: rgba(80, 91, 59, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(73, 61, 47, 0.11);
}
.commercial-kpi:focus-visible,
.commercial-quick-grid a:focus-visible,
.commercial-activity a:focus-visible {
    outline: 3px solid var(--accent-strong);
    outline-offset: 3px;
}
.commercial-kpi__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #9d5333;
    background: #f8e7dc;
}
.commercial-kpi__icon--olive {
    color: #505b3b;
    background: #e8ecdf;
}
.commercial-kpi__icon--red {
    color: #9a4038;
    background: #f8e1dd;
}
.commercial-kpi__icon svg,
.commercial-quick-grid svg {
    width: 23px;
    height: 23px;
}
.commercial-kpi__copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    min-width: 0;
}
.commercial-kpi__copy strong {
    grid-column: 1 / -1;
    font-size: 0.86rem;
    line-height: 1.3;
}
.commercial-kpi__copy b {
    font-size: 1.9rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.commercial-kpi__copy small {
    align-self: end;
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    text-align: end;
}
.commercial-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    gap: 18px;
}
.commercial-story {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border-radius: 18px;
    background: #504a41;
    box-shadow: 0 16px 38px rgba(73, 61, 47, 0.16);
}
.commercial-story img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.commercial-story__copy {
    position: absolute;
    inset: auto 20px 20px 20px;
    max-width: 430px;
    padding: 18px 20px;
    border-radius: 14px;
    color: #fffaf3;
    background: rgba(50, 45, 38, 0.9);
}
.commercial-story__copy h2 {
    max-width: 22ch;
    margin: 0;
    color: inherit;
    font-size: 1.65rem;
    line-height: 1.15;
}
.commercial-story__copy p {
    max-width: 42ch;
    margin: 8px 0 0;
    color: #e9dfd2;
    line-height: 1.45;
}
.commercial-quick-panel,
.commercial-activity {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(253, 250, 246, 0.96);
    box-shadow: 0 12px 30px rgba(73, 61, 47, 0.08);
}
.commercial-quick-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
}
.commercial-quick-panel h2,
.commercial-activity h2 {
    margin: 0;
    font-size: 1.2rem;
}
.commercial-quick-panel p,
.commercial-activity header p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}
.commercial-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
}
.commercial-quick-grid a {
    display: grid;
    align-content: center;
    gap: 10px;
    min-height: 104px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fffcf7;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 750;
}
.commercial-quick-grid a:hover {
    border-color: var(--accent);
    background: #f4f0e7;
}
.commercial-quick-grid svg { color: var(--accent-strong); }
.commercial-activity { padding: 22px; }
.commercial-activity > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.commercial-activity > header > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-strong);
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
}
.commercial-activity > header svg {
    width: 18px;
    height: 18px;
}
.commercial-activity__table td {
    vertical-align: middle;
}
.commercial-activity__table td:nth-child(4) {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.commercial-activity__table td > a {
    display: grid;
    gap: 3px;
    color: var(--text);
}
.commercial-activity__table td > a:hover strong { text-decoration: underline; }
.commercial-activity__table td > a small { color: var(--muted); }
.commercial-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f2e7cf;
    color: #785d24;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}
.commercial-status--confirmed {
    color: #405731;
    background: #e3ebd8;
}
.commercial-status--cancelled {
    color: #863b35;
    background: #f6dfdc;
}
.commercial-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px dashed var(--line-strong);
    border-radius: 14px;
}
.commercial-empty p { margin: 0; color: var(--muted); }

[dir="rtl"] .commercial-dashboard__tools .stock-notifications__panel {
    inset-inline-end: auto;
    inset-inline-start: 0;
}

@media (max-width: 900px) {
    .commercial-dashboard__header,
    .commercial-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
    .commercial-dashboard__tools { justify-content: stretch; }
}
@media (max-width: 760px) {
    .commercial-dashboard { gap: 14px; }
    .commercial-dashboard__header {
        gap: 16px;
        padding: 18px;
        border-radius: 16px;
    }
    .commercial-dashboard__intro h1 { font-size: 1.5rem; }
    .commercial-dashboard__tools .hero-search { max-width: none; }
    .commercial-kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .commercial-kpi {
        min-height: 84px;
        padding: 14px;
    }
    .commercial-kpi__copy b { font-size: 1.6rem; }
    .commercial-story { min-height: 270px; border-radius: 16px; }
    .commercial-story__copy { inset: auto 14px 14px 14px; padding: 15px; }
    .commercial-story__copy h2 { font-size: 1.35rem; }
    .commercial-quick-panel,
    .commercial-activity { padding: 16px; border-radius: 16px; }
    .commercial-activity > header { align-items: flex-start; }
}
@media (max-width: 480px) {
    .commercial-dashboard__tools { gap: 8px; }
    .commercial-dashboard__tools .stock-notifications { flex-basis: 44px; }
    .commercial-dashboard__tools .stock-notifications summary { width: 44px; height: 44px; }
    .commercial-quick-grid { grid-template-columns: minmax(0, 1fr); }
    .commercial-quick-grid a {
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: center;
        min-height: 58px;
    }
    .commercial-activity > header { display: grid; }
    .commercial-empty { align-items: stretch; flex-direction: column; }
}


/* Customers hero refresh */
.customers-card{display:grid;gap:24px}
.customers-hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:28px;overflow:hidden;padding:clamp(18px,2.5vw,26px);border:1px solid rgba(127,128,83,.25);border-radius:24px;background:radial-gradient(circle at 92% 15%,rgba(180,111,72,.18),transparent 32%),linear-gradient(135deg,#fbf8f3 0%,#f4efe7 58%,#e9eadf 100%);box-shadow:0 18px 42px rgba(74,61,45,.1)}
.customers-hero:after{content:"";position:absolute;z-index:-1;inset-inline-end:-52px;bottom:-86px;width:210px;height:210px;border:34px solid rgba(127,128,83,.1);border-radius:50%}
.customers-hero__content{display:flex;align-items:flex-start;gap:18px;min-width:0}
.customers-hero__icon{display:grid;flex:0 0 auto;width:50px;height:50px;place-items:center;border-radius:16px;color:#fff;background:linear-gradient(145deg,#b9704c,#7f8053);box-shadow:0 12px 24px rgba(127,128,83,.2)}
.customers-hero__icon svg{width:25px;height:25px}
.customers-hero__copy{display:grid;gap:5px;min-width:0}
.customers-hero__copy .eyebrow{margin:0;color:#7f8053;font-size:.74rem;letter-spacing:.18em}
.customers-hero__copy h1{margin:0;color:#282620;font-size:clamp(2rem,4.2vw,3.1rem);line-height:.98;letter-spacing:-.045em}
.customers-hero__copy .subcopy{max-width:620px;margin:2px 0 0;color:#716b62;font-size:.96rem;line-height:1.4}
.customers-hero__count{display:inline-flex;align-items:baseline;justify-self:start;gap:6px;margin-top:3px;padding:5px 9px;border:1px solid rgba(127,128,83,.2);border-radius:999px;color:#5d6043;background:rgba(255,255,255,.72);font-size:.8rem;font-weight:750}
.customers-hero__count strong{color:#a55f3d;font-size:1rem}
.customers-hero__action.button-link{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 16px;border:0;border-radius:14px;color:#fff;background:#4e5138;box-shadow:0 12px 26px rgba(78,81,56,.2);font-weight:800;white-space:nowrap}
.customers-hero__action.button-link:hover{color:#fff;background:#626644;transform:translateY(-2px)}
.customers-hero__action>span{display:grid;width:24px;height:24px;place-items:center;border-radius:8px;color:#4e5138;background:#fff;font-size:1.25rem;line-height:1}
@media(max-width:700px){.customers-card{gap:16px}.customers-hero{align-items:center;flex-wrap:wrap;gap:14px;padding:16px;border-radius:18px}.customers-hero__content{flex:1 1 340px;align-items:center;gap:12px}.customers-hero__icon{width:42px;height:42px;border-radius:13px}.customers-hero__icon svg{width:22px;height:22px}.customers-hero__copy h1{font-size:clamp(1.85rem,8vw,2.35rem)}.customers-hero__copy .subcopy{font-size:.88rem;line-height:1.35}.customers-hero__action.button-link{width:auto;min-height:42px;padding:9px 14px}}
@media(max-width:420px){.customers-hero__icon{display:none}.customers-hero__action.button-link{width:100%}}


/* Customers hero refinement */
.customers-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px 20px;border-radius:18px;background:linear-gradient(115deg,#fbf9f5 0%,#f4f1ea 62%,#eceee4 100%);box-shadow:0 12px 28px rgba(74,61,45,.08)}
.customers-hero::after{display:none}
.customers-hero__content{align-items:center;gap:14px}
.customers-hero__icon{width:46px;height:46px;border-radius:14px;box-shadow:none}
.customers-hero__icon svg{width:23px;height:23px}
.customers-hero__copy{gap:4px}
.customers-hero__copy .eyebrow{font-size:.66rem;letter-spacing:.16em}
.customers-hero__heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.customers-hero__heading h1{margin:0;font-size:clamp(1.8rem,3.6vw,2.45rem);line-height:1}
.customers-hero__count{margin:0;padding:4px 8px;font-size:.72rem}
.customers-hero__count strong{font-size:.82rem}
.customers-hero__copy .subcopy{margin:0;font-size:.88rem;line-height:1.35}
.customers-hero__action.button-link{min-height:42px;padding:9px 14px;border-radius:12px;box-shadow:0 8px 18px rgba(78,81,56,.15)}
@media(max-width:700px){.customers-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px}.customers-hero__content{flex:initial;align-items:center;gap:12px}.customers-hero__copy h1{font-size:1.9rem}.customers-hero__copy .subcopy{font-size:.82rem}.customers-hero__action.button-link{width:auto;min-height:40px;padding:8px 12px}}
@media(max-width:560px){.customers-hero{grid-template-columns:minmax(0,1fr)}.customers-hero__action.button-link{width:100%}}



/* Universal compact commercial story */
.commercial-story--top{display:block;min-height:290px}
.commercial-workspace{grid-template-columns:minmax(0,1fr)}
@media(min-width:901px){.commercial-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.commercial-story--top{min-height:190px;border-radius:14px}.commercial-story--top .commercial-story__copy{inset:auto 10px 10px 10px;max-width:min(420px,calc(100% - 20px));padding:10px 12px;border-radius:10px}.commercial-story--top .commercial-story__copy h2{font-size:1.05rem;line-height:1.15}.commercial-story--top .commercial-story__copy p{margin-top:4px;font-size:.78rem;line-height:1.3}}
@media(max-width:480px){.commercial-story--top{min-height:160px}.commercial-story--top .commercial-story__copy p{display:none}}


/* Customers table typography */
.customers-table thead{background:#414b35}
.customers-table th{color:#fff;font-size:.74rem;font-weight:900;letter-spacing:.08em;border-bottom:2px solid #303927}
.customers-table td{color:#38352f;font-size:.94rem}
.customers-table .customer-name{color:#25231f;font-weight:800}
.customers-table .customer-phone{font-variant-numeric:tabular-nums;font-weight:700}
.customers-table .customer-money{font-variant-numeric:tabular-nums;font-weight:800;text-align:end;white-space:nowrap}
.customers-table .customer-money small{color:#898276;font-size:.68rem;font-weight:800;letter-spacing:.05em}
.customers-table .customer-money--paid{color:#59613e}
.customers-table .customer-money--due{color:#a4553d}
@media(min-width:761px){
    .inventory-page{padding:18px 0 32px}
    .inventory-page>.page-card{padding:14px}
    .inventory-page .page-stack{gap:8px}
    .inventory-page .inventory-watch h1{margin-bottom:4px}
    .inventory-page .inventory-watch__links{gap:5px 10px}
    .inventory-page .inventory-watch__links a{min-height:36px;padding:4px 8px}
    .inventory-page .inventory-panels{gap:12px}
    .inventory-page .inventory-panels>.panel-card{padding:12px}
    .inventory-page .inventory-panels .panel-card__header{gap:10px;margin-bottom:8px}
    .inventory-page .inventory-panels .panel-card__header h2{font-size:1.2rem;line-height:1.2}
    .inventory-page .inventory-panels .panel-card__meta{font-size:.8rem}
    .inventory-page .inventory-search{padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:#faf7f1}
    .inventory-page .inventory-search>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
    .inventory-page .inventory-search__controls{gap:8px}
    .inventory-page .inventory-search input{min-height:40px;padding:8px 12px}
    .inventory-page .inventory-search button{min-height:40px;padding:0 16px}
    .inventory-page .inventory-search__clear{min-height:40px}
    .suppliers-page{padding:18px 0 32px}
    .suppliers-page>.page-card{padding:20px}
    .suppliers-page .suppliers-stack{gap:0}
    .suppliers-page .suppliers-header{align-items:center;gap:12px}
    .suppliers-page .suppliers-search{padding:4px 6px;border:1px solid var(--line);border-radius:12px;background:#faf7f1}
    .suppliers-page .suppliers-search>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
    .suppliers-page .suppliers-search__controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
    .suppliers-page .suppliers-search input{min-height:38px;padding:6px 12px}
    .suppliers-page .suppliers-search button{min-height:38px;padding:0 16px}
    .suppliers-page .table-card{padding-top:0}
    .purchases-page{padding:6px 0 32px}
    .purchases-page .purchases-header__count{display:none}
    main.purchases-page .purchases-header{gap:10px}
    main.purchases-page .purchases-header__actions{gap:8px}
    main.purchases-page :is(.purchases-header__due,.purchases-filters>summary,.purchases-header__create){min-height:38px;padding:6px 12px}
    main.purchases-page .purchases-search{gap:6px;margin-bottom:6px}
    main.purchases-page .purchases-search>label{margin-bottom:0}
    main.purchases-page .purchases-search__controls{gap:6px}
    main.purchases-page .purchases-search__controls input{min-height:38px;padding-block:6px}
    main.purchases-page .purchases-search__controls button{height:38px;min-height:38px;padding:0 16px}
    .products-page{padding:18px 0 32px}
    .products-page>.page-card{padding:20px}
    /* Keep results visually attached to the search controls on desktop. */
    .products-page .products-stack{gap:0}
    .products-page .table-card{padding-top:0}
    .products-page .products-header{gap:12px}
    .products-page .products-search{padding:4px 6px;border:1px solid var(--line);border-radius:12px;background:#faf7f1}
    .products-page .products-search>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
    .products-page .products-search__controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
    .products-page .products-search :is(input,button){min-height:38px;padding-block:6px}
    .customers-page{padding:18px 0 32px}
    .customers-page>.customers-card{padding:20px}
    .customers-page .customers-card{gap:12px}
    .customers-page .customers-hero{padding:12px 16px}
    .customers-page .list-search{display:block;padding:6px 8px}
    .customers-page .list-search>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
    .customers-page .list-search>div{grid-template-columns:minmax(0,1fr) auto;gap:8px}
    .customers-page .list-search :is(input,button){min-height:38px;padding:7px 12px}
    .customers-table th,.customers-table td{padding:3px 10px;font-size:.82rem;line-height:1.15}
    .customers-table .customer-record-link{min-height:20px;flex-wrap:nowrap;gap:0;white-space:nowrap}
    .customers-table .customer-name .customer-record-link>span{overflow:hidden;text-overflow:ellipsis}
    .customers-table .customer-type-badge{display:none}
    .customers-table .customer-money small{font-size:.58rem}
}

@media(min-width:900px){
    .inventory-page .inventory-watch{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .inventory-page .inventory-watch h1{margin:0}
    .inventory-page .inventory-watch__links{flex-wrap:nowrap}
}

@media(min-width:761px){
    .inventory-history-page{padding:12px 0 28px}
    .inventory-history-page>.page-card{padding:14px 16px}
    .inventory-history-page .page-header{margin-bottom:4px}
    .inventory-history-page .page-header h1{font-size:1.45rem;line-height:1.15}
    .inventory-history-page .inventory-history-filters{grid-template-columns:minmax(185px,1.35fr) minmax(115px,.72fr) minmax(115px,.72fr) minmax(155px,.9fr) auto;gap:6px;margin:4px 0}
    .inventory-history-page .inventory-history-field label{margin-bottom:3px;font-size:.78rem}
    .inventory-history-page .inventory-history-field .form-control{min-height:38px;padding:7px 9px}
    .inventory-history-page .inventory-history-actions{grid-column:auto;display:flex;gap:8px;align-items:center;align-self:end;white-space:nowrap}
    .inventory-history-page .inventory-history-actions .button-link,.inventory-history-page .inventory-history-link{min-height:38px;padding:0 10px}
    .inventory-history-page .subcopy{margin:4px 0}
    .inventory-history-page .table-wrap{margin-top:0}
    .inventory-history-page .inventory-table th{padding:6px 8px;font-size:.69rem;line-height:1.1;letter-spacing:.045em}
    .inventory-history-page .inventory-table td{padding:4px 8px;font-size:.78rem;line-height:1.18}
    .inventory-history-page .inventory-table td:first-child,.inventory-history-page .inventory-table td:nth-child(3),.inventory-history-page .inventory-table td:nth-child(5){font-variant-numeric:tabular-nums;white-space:nowrap}
    .inventory-history-page .inventory-table .cell-primary{font-size:.8rem;font-weight:800}
    .inventory-history-page .inventory-table .status-chip{min-height:22px;padding:3px 8px;font-size:.68rem;line-height:1}
    .inventory-history-page .inventory-table tbody tr{height:32px}
}

@media(min-width:761px){
    .product-form-page{padding:10px 0 18px}
    .product-form-page>.form-card{padding:10px}
    .product-form-page .page-stack{gap:8px}
    .product-form-page .hero-banner{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin:0;padding:11px 16px;border-radius:14px}
    .product-form-page .hero-banner__content{gap:4px}
    .product-form-page .hero-banner .eyebrow{display:none}
    .product-form-page .hero-banner h1{font-size:1.4rem;line-height:1.1}
    .product-form-page .hero-banner .subcopy{display:none}
    .product-form-page .hero-banner__side{display:flex;align-items:center}
    .product-form-page .hero-banner__side .button-link{min-height:36px;padding:6px 11px;font-size:.8rem;white-space:nowrap}
    .product-form-page .form-shell{padding:10px 12px}
    .product-form-page .entity-form,.product-form-page .form-grid{gap:7px}
    .product-form-page .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .product-form-page .form-row{gap:3px}
    .product-form-page .form-row label{font-size:.76rem;line-height:1.1}
    .product-form-page .form-row :is(input,select,textarea){min-height:34px;padding:5px 8px;font-size:.82rem;line-height:1.2}
    .product-form-page .form-row input[type="file"]{padding:4px 6px;font-size:.72rem}
    .product-form-page .form-row textarea{height:34px;min-height:34px;resize:none}
    .product-form-page .help-text{margin:0;font-size:.64rem;line-height:1.15}
    .product-form-page .entity-form>button{min-height:36px;padding:6px 12px;font-size:.84rem}
}

@media(min-width:761px){
    .sales-quote-form-page{padding:6px 0 8px}
    .sales-quote-form-page>.quote-editor--stock{padding:12px}
    .sales-quote-form-page .page-header{align-items:center;gap:12px;margin:0}
    .sales-quote-form-page .page-header .eyebrow,.sales-quote-form-page>.quote-editor--stock>.page-header .subcopy,.sales-quote-form-page .quote-editor__form>.subcopy{display:none}
    .sales-quote-form-page .page-header h1{font-size:1.45rem;line-height:1.1}
    .sales-quote-form-page .page-header .button-link{min-height:34px;padding:5px 10px;font-size:.8rem}
    .sales-quote-form-page .quote-editor__form{gap:8px}
    .sales-quote-form-page .quote-editor__dates,.sales-quote-form-page .quote-editor__client,.sales-quote-form-page .quote-editor__bottom{gap:8px}
    .sales-quote-form-page .quote-editor__client{grid-template-columns:repeat(5,minmax(0,1fr))}
    .sales-quote-form-page .quote-editor__client .form-row:last-child{grid-column:auto}
    .sales-quote-form-page .panel-card{padding:10px 12px;border-radius:14px}
    .sales-quote-form-page .panel-card h2{margin:0 0 6px;font-size:1rem;line-height:1.1}
    .sales-quote-form-page .form-row{gap:3px}
    .sales-quote-form-page .form-row label,.sales-quote-form-page .quote-editor__dates .form-row>span:first-child{font-size:.75rem;line-height:1.1}
    .sales-quote-form-page .form-row :is(input,select,textarea){min-height:34px;padding:5px 8px;font-size:.82rem;line-height:1.2}
    .sales-quote-form-page .form-row textarea{height:34px;min-height:34px;resize:none}
    .sales-quote-form-page .quote-stock-tools{display:flex;align-items:center;gap:8px;margin:0 0 5px}
    .sales-quote-form-page .quote-stock-tools p{display:none}
    .sales-quote-form-page .quote-stock-tools button,.sales-quote-form-page #add-document-line{min-height:32px;padding:4px 10px;font-size:.76rem}
    .sales-quote-form-page .quote-editor__lines th{padding:4px 6px;font-size:.66rem;line-height:1.05}
    .sales-quote-form-page .quote-editor__lines td{padding:3px 6px;font-size:.74rem;line-height:1.1}
    .sales-quote-form-page .quote-editor__lines :is(select,input){min-height:32px;padding:4px 6px;font-size:.76rem}
    .sales-quote-form-page .quote-stock{margin:2px 0 0;font-size:.64rem;line-height:1.05}
    .sales-quote-form-page .quote-editor__bottom{grid-template-columns:minmax(0,1.4fr) minmax(245px,.6fr)}
    .sales-quote-form-page .quote-editor__logistics{gap:4px}
    .sales-quote-form-page .quote-editor__totals{gap:5px;padding:9px 12px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
    .sales-quote-form-page .quote-editor__totals .quote-editor__grand-total{grid-column:1 / -1}
    .sales-quote-form-page .quote-editor__totals>div:not(.form-row){font-size:.78rem}
    .sales-quote-form-page .quote-editor__grand-total{padding-top:5px;font-size:.9rem}
    .sales-quote-form-page .quote-editor__lines tbody tr:has(select option[value=""]:checked) .quote-stock{display:none}
    .sales-quote-form-page .quote-editor__actions{gap:8px}
    .sales-quote-form-page .quote-editor__actions button{min-height:34px;padding:5px 11px;font-size:.78rem}
    .sales-quote-form-page .quote-editor__actions button:disabled{display:none}
}

@media(min-width:761px){
    .sales-delivery-form-page{padding:6px 0 8px}
    .sales-delivery-form-page>.quote-editor--delivery{padding:12px}
    .sales-delivery-form-page .page-header{align-items:center;gap:12px;margin:0}
    .sales-delivery-form-page .page-header .eyebrow,.sales-delivery-form-page .page-header .subcopy,.sales-delivery-form-page .quote-editor__form>.subcopy{display:none}
    .sales-delivery-form-page .page-header h1{font-size:1.45rem;line-height:1.1}
    .sales-delivery-form-page .page-header .button-link{min-height:34px;padding:5px 10px;font-size:.8rem}
    .sales-delivery-form-page .quote-editor__form{gap:8px}
    .sales-delivery-form-page .quote-editor__dates,.sales-delivery-form-page .quote-editor__client{gap:8px}
    .sales-delivery-form-page .quote-editor__client{grid-template-columns:repeat(5,minmax(0,1fr))}
    .sales-delivery-form-page .quote-editor__client .form-row:last-child{grid-column:auto}
    .sales-delivery-form-page .panel-card{padding:10px 12px;border-radius:14px}
    .sales-delivery-form-page .panel-card h2{margin:0 0 6px;font-size:1rem;line-height:1.1}
    .sales-delivery-form-page .form-row{gap:3px}
    .sales-delivery-form-page .form-row label,.sales-delivery-form-page .quote-editor__dates .form-row>span:first-child{font-size:.75rem;line-height:1.1}
    .sales-delivery-form-page .form-row :is(input,select,textarea){min-height:34px;padding:5px 8px;font-size:.82rem;line-height:1.2}
    .sales-delivery-form-page .form-row textarea{height:34px;min-height:34px;resize:none}
    .sales-delivery-form-page .delivery-editor__products .subcopy{display:none}
    .sales-delivery-form-page .quote-editor__lines th{padding:4px 6px;font-size:.66rem;line-height:1.05}
    .sales-delivery-form-page .quote-editor__lines td{padding:3px 6px;font-size:.74rem;line-height:1.1}
    .sales-delivery-form-page .quote-editor__lines :is(select,input){min-height:32px;padding:4px 6px;font-size:.76rem}
    .sales-delivery-form-page #add-document-line{min-height:32px;padding:4px 10px;font-size:.76rem}
    .sales-delivery-form-page .delivery-total{margin:2px 0 0;font-size:.78rem}
    .sales-delivery-form-page .delivery-editor__completion{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px;align-items:stretch}
    .sales-delivery-form-page .delivery-editor__completion-main{display:grid;gap:8px;align-content:space-between}
    .sales-delivery-form-page .delivery-signatures{margin:0;gap:8px}
    .sales-delivery-form-page .delivery-signatures>div{min-height:68px;padding:9px 10px;border-radius:12px;font-size:.76rem}
    .sales-delivery-form-page .quote-editor__actions{gap:8px}
    .sales-delivery-form-page .quote-editor__actions button{min-height:34px;padding:5px 11px;font-size:.78rem}
}

.sales-invoice-add-line{margin-top:10px}
.sales-invoice-line[hidden]{display:none!important}

@media(min-width:761px){
    .sales-invoice-form-page{padding:6px 0 8px}
    .sales-invoice-form-page>.invoice-form-card{padding:12px}
    .sales-invoice-form-page .page-header{align-items:center;gap:12px;margin:0 0 8px}
    .sales-invoice-form-page .page-header .subcopy{display:none}
    .sales-invoice-form-page .page-header h1{font-size:1.45rem;line-height:1.1}
    .sales-invoice-form-page .page-header .button-link{min-height:34px;padding:5px 10px;font-size:.8rem}
    .sales-invoice-form-page .sales-invoice-form{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
    .sales-invoice-form-page .form-row{gap:3px}
    .sales-invoice-form-page .form-row label{font-size:.75rem;line-height:1.1}
    .sales-invoice-form-page .form-row :is(input,select,textarea){min-height:34px;padding:5px 8px;font-size:.82rem;line-height:1.2}
    .sales-invoice-form-page .form-row textarea{height:34px;min-height:34px;resize:none}
    .sales-invoice-form-page .form-row--notes,.sales-invoice-form-page .scanner-form,.sales-invoice-form-page .sales-invoice-lines,.sales-invoice-form-page .sales-invoice-form>button[type="submit"]{grid-column:1 / -1}
    .sales-invoice-form-page .scanner-form{padding:9px 12px}
    .sales-invoice-form-page .scanner-form__main{gap:3px}
    .sales-invoice-form-page .scanner-help{margin:0;font-size:.68rem}
    .sales-invoice-form-page .sales-invoice-lines{padding:10px 12px;border-radius:14px}
    .sales-invoice-form-page .sales-invoice-lines h2{margin:0 0 6px;font-size:1rem;line-height:1.1}
    .sales-invoice-form-page .sales-invoice-lines th{padding:4px 6px;font-size:.66rem;line-height:1.05}
    .sales-invoice-form-page .sales-invoice-lines td{padding:3px 6px;font-size:.74rem;line-height:1.1}
    .sales-invoice-form-page .sales-invoice-lines :is(select,input:not([type="checkbox"])) {min-height:32px;padding:4px 6px;font-size:.76rem}
    .sales-invoice-form-page .sales-invoice-add-line{min-height:32px;margin-top:6px;padding:4px 10px;font-size:.76rem}
    .sales-invoice-form-page .sales-invoice-form>button[type="submit"]{justify-self:start;min-height:34px;padding:5px 12px;font-size:.8rem}
}

/* Customer editor inspired by the provided reference */
.customer-form-page {
    max-width: 1120px;
}

.customer-editor {
    overflow: hidden;
    border: 1px solid #ddd9d0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(67, 58, 47, 0.1);
}

.customer-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 30px;
    border-bottom: 1px solid #e8e4dc;
}

.customer-editor__header h1 {
    margin: 0;
    color: #25231f;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.customer-editor__header p {
    margin: 6px 0 0;
    color: #777166;
}

.customer-editor__back {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid #d6d1c7;
    border-radius: 10px;
    color: #50543a;
    background: #faf8f3;
    font-weight: 800;
    white-space: nowrap;
}

.customer-editor__back:hover {
    border-color: #777f56;
    background: #f0f2e9;
}

.customer-editor__form {
    display: grid;
    gap: 18px;
    padding: 30px;
}

.customer-editor__global-error {
    margin: 0 0 4px;
}

.customer-field {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.customer-field > label {
    padding-top: 14px;
    color: #3c3933;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
}

.customer-field > label span {
    margin-inline-start: 3px;
    color: #b34834;
}

.customer-field__control {
    display: grid;
    gap: 7px;
    max-width: 720px;
}

.customer-editor .form-control {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #d7d4df;
    border-radius: 10px;
    color: #292722;
    background: #fff;
    font-size: 1rem;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.customer-editor textarea.form-control {
    min-height: 108px;
    resize: vertical;
}

.customer-editor .form-control::placeholder {
    color: #9290a0;
    opacity: 1;
}

.customer-editor .form-control:hover {
    border-color: #aaa99d;
}

.customer-editor .form-control:focus {
    outline: 0;
    border-color: #68734b;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(104, 115, 75, 0.14);
}

.customer-editor__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid #ebe7df;
}

.customer-editor__actions button {
    min-height: 46px;
    padding-inline: 24px;
    background: #4e5838;
}

.customer-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 190px));
    gap: 12px;
}

.customer-type-options > div {
    min-width: 0;
}

.customer-type-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 11px 14px;
    border: 1px solid #d7d4df;
    border-radius: 10px;
    color: #46423c;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.customer-type-options label:hover {
    border-color: #8a9270;
    background: #f7f8f2;
}

.customer-type-options input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #596341;
}

.customer-type-options label:has(input:checked) {
    border-color: #596341;
    color: #3f492d;
    background: #eef2e7;
    box-shadow: 0 0 0 3px rgba(89, 99, 65, 0.12);
}

.customer-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid #cbd5bc;
    border-radius: 999px;
    color: #4f5a38;
    background: #edf2e5;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .customer-editor {
        border-radius: 16px;
    }

    .customer-editor__header {
        align-items: flex-start;
        padding: 20px;
    }

    .customer-editor__header h1 {
        font-size: 1.75rem;
    }

    .customer-editor__form {
        gap: 16px;
        padding: 20px;
    }

    .customer-field {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .customer-field > label {
        padding-top: 0;
        font-size: 0.86rem;
    }

    .customer-editor .form-control {
        min-height: 48px;
        font-size: 16px;
    }

    .customer-editor__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .customer-editor__actions :is(button, .button-link) {
        width: 100%;
        justify-content: center;
    }

    .customer-type-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .customer-editor__header {
        flex-direction: column;
    }

    .customer-editor__back {
        width: 100%;
        justify-content: center;
    }

    .customer-type-options {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Backups */
.backup-page{display:grid;gap:18px;max-width:1040px}
.backup-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border:1px solid rgba(127,128,83,.25);border-radius:22px;background:linear-gradient(120deg,#fbf8f3 0%,#f1eee5 62%,#e8ebdf 100%);box-shadow:0 16px 36px rgba(74,61,45,.09)}
.backup-hero h1{margin-top:5px;color:#292721;font-size:clamp(2rem,4vw,3rem)}
.backup-hero p:not(.eyebrow){max-width:620px;margin:9px 0 0;color:#6d685e;line-height:1.5}
.backup-create-button{min-height:46px;padding:10px 16px;border-radius:13px;color:#fff;background:#4e5838;box-shadow:0 10px 22px rgba(78,88,56,.18);white-space:nowrap}
.backup-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.backup-summary article{display:grid;gap:5px;padding:18px;border:1px solid #ded8ce;border-radius:16px;background:rgba(255,252,247,.9)}
.backup-summary span{color:#797268;font-size:.78rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.backup-summary strong{color:#34322d;font-size:1.05rem}
.backup-list-card{overflow:hidden;border:1px solid #ded8ce;border-radius:20px;background:#fffaf4;box-shadow:0 14px 34px rgba(70,59,45,.08)}
.backup-list-card>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;border-bottom:1px solid #e5dfd6}
.backup-list-card h2{color:#2c2a25}
.backup-list-card header p{margin:5px 0 0;color:#777065;font-size:.9rem}
.backup-count{display:grid;min-width:36px;height:36px;place-items:center;border-radius:999px;color:#fff;background:#7f8053;font-weight:850}
.backup-list{display:grid}
.backup-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;padding:17px 24px;border-bottom:1px solid #ece6dd}
.backup-item:last-child{border-bottom:0}
.backup-item__icon{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;color:#59613f;background:#e8eddf}
.backup-item__main{display:grid;gap:3px;min-width:0}
.backup-item__main strong{color:#322f2a;font-variant-numeric:tabular-nums}
.backup-item__main span{overflow:hidden;color:#7a7369;font-size:.83rem;text-overflow:ellipsis;white-space:nowrap}
.backup-restore-button{min-height:38px;padding:7px 13px;border:1px solid #d9b2a9;border-radius:10px;color:#8e4034;background:#fff5f2;box-shadow:none;font-size:.82rem}
.backup-restore-button:hover{color:#fff;background:#9d4d3e;box-shadow:none}
.backup-empty{padding:42px 24px;text-align:center}
.backup-empty strong{color:#34312b;font-size:1.05rem}
.backup-empty p{margin:7px 0 0;color:#797268}
.backup-warning{margin:0;padding:13px 16px;border-inline-start:4px solid #b46f48;border-radius:10px;color:#695b50;background:#f6e9df;font-size:.85rem;line-height:1.5}
@media(max-width:700px){.backup-hero{align-items:stretch;flex-direction:column;padding:20px;border-radius:17px}.backup-hero form,.backup-create-button{width:100%}.backup-summary{grid-template-columns:minmax(0,1fr)}.backup-list-card>header{padding:18px}.backup-item{grid-template-columns:auto minmax(0,1fr);padding:15px 18px}.backup-item form{grid-column:1/-1}.backup-restore-button{width:100%}}

/* Storage locations */
.locations-page{display:grid;gap:18px;max-width:1120px}
.locations-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;border:1px solid #dcd8ce;border-radius:20px;background:linear-gradient(120deg,#fbf9f5,#eef1e6)}
.locations-header h1{margin-top:5px;color:#292721;font-size:clamp(2rem,4vw,2.8rem)}
.locations-header p:not(.eyebrow){margin:8px 0 0;color:#746e64}
.locations-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.4fr);align-items:start;gap:16px}
.location-form-card,.locations-list-card{overflow:hidden;border:1px solid #ded8ce;border-radius:18px;background:#fffaf5;box-shadow:0 12px 30px rgba(70,59,45,.07)}
.location-form-card{padding:22px}
.location-form-card h2{margin-bottom:18px;color:#302e29}
.location-form-card .entity-form{gap:14px}
.location-form-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.location-form-actions button,.location-form-actions .button-link{min-height:42px;padding:8px 14px;border-radius:11px;font-size:.86rem}
.locations-list-card>header{padding:20px 22px;border-bottom:1px solid #e5dfd6}
.locations-list-card h2{color:#302e29}
.locations-list-card header p{margin:5px 0 0;color:#7b7469;font-size:.84rem}
.locations-list{display:grid}
.location-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid #ece6dd}
.location-row:last-child{border-bottom:0}
.location-row--inactive{opacity:.62}
.location-code{display:grid;width:44px;height:44px;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(145deg,#b9704c,#7f8053);font-weight:900;text-transform:uppercase}
.location-info{display:grid;gap:3px;min-width:0}
.location-info strong{color:#302e29}
.location-info span{color:#675f55;font-size:.88rem}
.location-info small{color:#8a8378;font-size:.75rem}
.location-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.location-actions>a,.location-toggle{min-height:32px;padding:6px 9px;border:1px solid #d8d2c7;border-radius:9px;color:#555944;background:#fff;font-size:.75rem;font-weight:800;box-shadow:none}
.location-toggle:hover,.location-actions>a:hover{color:#fff;background:#656a48;transform:none;box-shadow:none}
.location-status{padding:5px 8px;border-radius:999px;color:#855047;background:#f2dfda;font-size:.7rem;font-weight:850}
.location-status--active{color:#50613b;background:#e4ecd9}
@media(max-width:800px){.locations-layout{grid-template-columns:minmax(0,1fr)}.locations-header{align-items:stretch;flex-direction:column;padding:20px}.location-row{grid-template-columns:auto minmax(0,1fr)}.location-actions{grid-column:1/-1;justify-content:flex-start}.location-form-actions>*{width:100%}}

/* Company customer identifiers */
.customer-company-fields{display:grid;gap:16px;margin:6px 0;padding:22px;border:1px solid #d8d4c9;border-radius:16px;background:#f7f5ef}
.customer-company-fields[hidden]{display:none}
.customer-company-fields legend{padding:0 8px;color:#4e5838;font-size:1rem;font-weight:850}
.customer-company-fields>p{margin:-7px 0 2px;color:#777166;font-size:.84rem;line-height:1.45}
.customer-detail__section{grid-column:1/-1;margin-top:8px;padding-top:16px;border-top:1px solid #ded8ce}
.customer-detail__section dt{color:#4e5838;font-size:1rem}
@media(max-width:760px){.customer-company-fields{padding:16px 14px}}

/* Quote performance */
.quote-performance{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.4fr);align-items:stretch;gap:18px;padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#fffcf7 0%,#f1f1e7 100%);box-shadow:0 12px 30px rgba(73,61,47,.08)}
.quote-performance__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px}
.quote-performance__header .eyebrow{margin:0 0 4px;color:var(--accent-strong)}
.quote-performance__header h2{margin:0;font-size:1.28rem}
.quote-performance__header p:not(.eyebrow){max-width:46ch;margin:7px 0 0;color:var(--muted);font-size:.84rem;line-height:1.45}
.quote-performance__rate{display:grid;place-items:center;width:112px;min-height:92px;padding:12px;border:1px solid rgba(80,91,59,.24);border-radius:16px;background:rgba(255,255,255,.72);text-align:center}
.quote-performance__rate strong{color:#405731;font-size:1.65rem;font-variant-numeric:tabular-nums}
.quote-performance__rate span{color:var(--muted);font-size:.72rem;font-weight:750}
.quote-performance__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.quote-performance__metric{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;align-items:center;gap:2px 10px;min-height:96px;padding:15px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.76);color:var(--text);transition:transform 180ms ease,box-shadow 180ms ease}
.quote-performance__metric:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(73,61,47,.1)}
.quote-performance__metric:focus-visible{outline:3px solid var(--accent-strong);outline-offset:3px}
.quote-performance__metric>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-size:1.1rem;font-weight:900}
.quote-performance__metric strong{font-size:1.45rem;line-height:1;font-variant-numeric:tabular-nums}
.quote-performance__metric small{color:var(--muted);font-size:.78rem;font-weight:750}
.quote-performance__metric--accepted>span{color:#405731;background:#e3ebd8}
.quote-performance__metric--refused>span{color:#863b35;background:#f6dfdc}
.quote-performance__metric--expired>span{color:#785d24;background:#f2e7cf}
.commercial-status--accepted,.document-status--accepted{color:#405731;background:#e3ebd8}
.commercial-status--refused,.document-status--refused{color:#863b35;background:#f6dfdc}
.commercial-status--expired,.document-status--expired{color:#785d24;background:#f2e7cf}
.commercial-status--pending,.document-status--pending{color:#675d3c;background:#eeeadc}
@media(max-width:900px){.quote-performance{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.quote-performance{padding:16px;border-radius:16px}}
@media(max-width:480px){.quote-performance__header{grid-template-columns:minmax(0,1fr)}.quote-performance__rate{width:100%;min-height:72px}.quote-performance__grid{grid-template-columns:minmax(0,1fr)}.quote-performance__metric{min-height:72px}}

/* Search, export and printing for entity lists */
.list-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.list-actions .button-link,.suppliers-header__actions .button-link{min-height:40px;padding:8px 12px;font-size:.78rem}
.list-search{display:grid;grid-template-columns:minmax(150px,.32fr) minmax(260px,1fr);align-items:end;gap:12px;padding:16px;border:1px solid var(--line);border-radius:15px;background:#faf7f1}
.list-search label{font-weight:800}
.list-search>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.list-search input,.list-search button{min-height:44px}
.list-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.list-pagination span{color:var(--muted);font-size:.84rem;font-weight:750}
@media(max-width:760px){.customers-hero{align-items:stretch;flex-direction:column}.list-actions{justify-content:stretch}.list-actions>*{flex:1 1 calc(50% - 8px);justify-content:center}.list-search{grid-template-columns:minmax(0,1fr)}.suppliers-header__actions{align-items:stretch}.suppliers-header__actions .button-link{flex:1 1 calc(50% - 8px);justify-content:center}.list-pagination{justify-content:space-between}}
@media print{.customers-card,.suppliers-stack{gap:12px}.customers-hero,.suppliers-header{padding:0 0 14px;border:0;border-radius:0;background:#fff;box-shadow:none}.customers-hero:after{display:none}.customers-hero__icon{display:none}.customers-table,.suppliers-table{font-size:9pt}.data-table tr{break-inside:avoid}.page-card{padding:0!important;border:0!important}.table-card{border:0!important;box-shadow:none!important}}

/* Audit trail */
.audit-filters{display:grid;grid-template-columns:minmax(240px,1fr) minmax(180px,.35fr) auto auto;align-items:end;gap:10px;margin:18px 0}
.audit-filters>div{display:grid;gap:6px}.audit-filters label{font-size:.78rem;font-weight:800}.audit-filters input,.audit-filters select,.audit-filters button,.audit-filters>a{min-height:44px}
.audit-table td{vertical-align:top}.audit-table td:first-child{white-space:nowrap}.audit-table td:nth-child(4){min-width:180px}.audit-table td:nth-child(4) small{display:block;margin-top:4px;color:var(--muted)}
.audit-action{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.72rem;font-weight:850}.audit-action--create{color:#405731;background:#e3ebd8}.audit-action--update{color:#785d24;background:#f2e7cf}.audit-action--delete{color:#863b35;background:#f6dfdc}
.audit-changes{display:grid;gap:7px;min-width:280px;margin:0;padding:0;list-style:none}.audit-changes li{display:grid;gap:2px;padding-bottom:7px;border-bottom:1px solid var(--line)}.audit-changes li:last-child{padding-bottom:0;border-bottom:0}.audit-changes strong{color:var(--accent-strong);font-size:.74rem}.audit-changes span{font-size:.8rem;overflow-wrap:anywhere}
@media(max-width:760px){.audit-filters{grid-template-columns:minmax(0,1fr)}.audit-table td:nth-child(4),.audit-changes{min-width:0}}

/* Mobile barcode scanner */
.mobile-barcode-scanner{display:none;border:1px solid rgba(80,91,59,.25);border-radius:16px;background:linear-gradient(135deg,#f7f4ed,#edf0e5)}.mobile-barcode-scanner[open]{display:block}
.mobile-barcode-scanner__heading{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;cursor:pointer;list-style:none}.mobile-barcode-scanner__heading::-webkit-details-marker{display:none}.mobile-barcode-scanner__heading::after{content:"⌄";margin-inline-start:auto;font-size:1.1rem;font-weight:900}.mobile-barcode-scanner[open] .mobile-barcode-scanner__heading::after{transform:rotate(180deg)}.mobile-barcode-scanner__heading>span{display:grid;flex:0 0 auto;width:36px;height:36px;place-items:center;border-radius:11px;color:#fff;background:#59613f}.mobile-barcode-scanner__heading svg{width:20px}.mobile-barcode-scanner__body{display:grid;gap:12px;padding:0 14px 14px}.mobile-barcode-scanner__body>small{color:var(--muted)}
.mobile-barcode-scanner__controls{display:grid;grid-template-columns:minmax(180px,1fr) auto auto auto;gap:8px}.mobile-barcode-scanner__controls>*{min-height:44px}.mobile-barcode-photo{justify-content:center}
.mobile-barcode-preview{position:relative;overflow:hidden;max-width:640px;border-radius:16px;background:#181915}.mobile-barcode-preview video{display:block;width:100%;max-height:420px;object-fit:cover}.mobile-barcode-preview__guide{position:absolute;inset:28% 10%;border:3px solid #fff;border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}.mobile-barcode-preview button{position:absolute;z-index:2;inset:auto 12px 12px auto}
.mobile-barcode-status{min-height:1.2em;margin:0;color:var(--muted);font-size:.82rem;font-weight:700}.mobile-barcode-status[data-type="success"]{color:#405731}.mobile-barcode-status[data-type="error"]{color:#9a4038}
@media(max-width:760px){.mobile-barcode-scanner{display:block}.mobile-barcode-scanner__controls{grid-template-columns:minmax(0,1fr) 1fr}.mobile-barcode-scanner__controls input{grid-column:1/-1}.mobile-barcode-scanner__controls button[type="submit"]{grid-column:1/-1}}

/* Typography system — calm, readable application hierarchy */
button,
input,
select,
textarea {
    font: inherit;
}

body :is(h1, h2, h3, h4) {
    font-family: var(--font-ui);
    font-weight: var(--weight-semibold) !important;
    letter-spacing: -0.025em;
}

body :is(button, .button-link, summary, label, .topbar__link) {
    font-family: var(--font-ui);
    font-weight: var(--weight-semibold);
}

.auth-kicker,
.eyebrow,
.action-card__eyebrow,
.metric-card__label,
.backup-summary span {
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
}

.data-table th,
.products-table thead th,
.customers-table th {
    font-family: var(--font-ui);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.045em;
}

.data-table td {
    font-weight: var(--weight-regular);
    letter-spacing: 0;
}

.data-table :is(strong, .cell-primary, .customer-name, .customer-phone, .customer-money),
.status-chip,
.document-status,
.audit-action {
    font-weight: var(--weight-semibold);
}

.data-table :is(td, output),
.metric-card__value,
.hero-stat__value,
.quote-performance__rate strong,
.quote-performance__metric strong {
    font-variant-numeric: tabular-nums;
}

.subcopy,
.auth-form__text,
.action-card__text,
.metric-card__text,
.help-text,
.form-row small,
.scanner-help {
    font-weight: var(--weight-regular);
    letter-spacing: 0;
}

@media (max-width: 760px) {
    body :is(h1, h2, h3, h4) {
        letter-spacing: -0.02em;
    }

    .page-header h1 {
        font-size: 1.75rem;
        line-height: 1.18;
    }
}
