:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #172033;
    background: #f5f7fb;
    --text-muted: #68738a;
    --border: #e3e7ef;
    --surface-muted: #f7f9fd;
    --surface: #fff;
    --color-error: #b42318;
    --color-error-surface: #fff1f0;
    --color-success: #176a42;
    --color-success-surface: #e5f6ed;
    --color-warning: #704d00;
    --color-warning-surface: #fff8e6;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #2255c7; text-decoration: none; }
a:hover { text-decoration: underline; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid #8aa9f3;
    outline-offset: 2px;
}
h1, h2, p { margin-top: 0; }
h1 { font-size: 2rem; letter-spacing: -.03em; margin-bottom: .35rem; }
h2 { font-size: 1.1rem; margin-bottom: 1rem; }
h3 { font-size: .98rem; margin: 0 0 .35rem; }
small { display: block; color: #68738a; font-size: .8rem; margin-top: .2rem; }
.content { padding: 2.25rem clamp(1rem, 4vw, 4rem); max-width: 1400px; margin: 0 auto; width: 100%; }
.muted { color: #68738a; }
.eyebrow { color: #2255c7; font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .5rem; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.card { background: #fff; border: 1px solid #e3e7ef; border-radius: 14px; box-shadow: 0 5px 22px #1720330a; padding: 1.5rem; margin-bottom: 1.25rem; }
.table-card { padding: 0; overflow: hidden; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #e3e7ef; }
.table-toolbar input { min-width: 16rem; }
.table-search { max-width: 24rem; }
.toolbar-actions, .heading-actions { align-items: center; display: flex; gap: .5rem; }
.order-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.sort-control { align-items: center; color: #68738a; display: flex; flex-direction: row; font-size: .8rem; font-weight: 600; gap: .45rem; white-space: nowrap; }
.sort-control select { min-height: 2.2rem; }
.card-message { padding: 1.5rem; }
.table-scroll { -webkit-overflow-scrolling: touch; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.table-scroll:focus { outline: 3px solid #8aa9f3; outline-offset: -3px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .85rem 1rem; border-bottom: 1px solid #edf0f5; text-align: left; white-space: nowrap; }
th { color: #68738a; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.selected-row { background: #f3f6ff; }
.button, button { border: 0; border-radius: 8px; cursor: pointer; display: inline-block; font: inherit; font-weight: 650; padding: .7rem 1.15rem; }
.table-card td:last-child { padding-right: 1.25rem; }
.table-card td:last-child .button { margin: .15rem 0; }
.button:hover, button:hover { text-decoration: none; filter: brightness(.97); }
.primary { background: #2255c7; color: white; }
.secondary { background: #edf1f8; color: #29344b; }
.danger { background: #b42318; color: white; }
.small { font-size: .85rem; padding: .5rem .8rem; }
.full-width { width: 100%; margin-top: .8rem; }
.status { border-radius: 999px; font-size: .8rem; padding: .3rem .65rem; }
.status-ok { background: #e5f6ed; color: #176a42; }
.status-warning { background: #fff1d9; color: #8b5b05; }
.empty-state { text-align: center; padding: 3rem 1rem; }
.overview-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.overview-strip > div { border-right: 1px solid #edf0f5; padding-right: 1rem; }
.overview-strip > div:last-child { border-right: 0; }
.overview-label { color: #68738a; display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.overview-strip strong { display: block; font-size: 1.35rem; margin-top: .25rem; }
.store-link { display: block; }
.store-name { align-items: center; display: flex; gap: .5rem; }
.store-name .status { font-size: .68rem; padding: .2rem .5rem; }
.stock-summary { align-items: baseline; display: flex; gap: .5rem; }
.stock-summary span { color: #68738a; font-size: .8rem; }
.stock-summary .pending-stock-label { color: #b06b00; }
.stock-track { background: #edf0f5; border-radius: 99px; height: .45rem; margin-top: .45rem; min-width: 10rem; overflow: hidden; position: relative; }
.stock-track span { border-radius: inherit; display: block; height: 100%; }
.stock-current, .stock-pending { position: absolute; top: 0; }
.stock-current { background: #2f9e68; }
.stock-pending { background: #e0a12b; }
.delivery-progress { background: #edf0f5; border-radius: 99px; height: .55rem; min-width: 12rem; overflow: hidden; }
.delivery-progress-fill { background: #6f8edb; border-radius: inherit; display: block; height: 100%; }
.delivery-progress-label { color: #68738a; font-size: .72rem; margin-top: .35rem; }
.table-empty { color: #68738a; padding: 2rem 1rem; text-align: center; }
.preset-row { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; }
.filter-label { color: #68738a; font-size: .85rem; font-weight: 700; margin-right: .35rem; }
.filter-button { background: #f1f4f9; color: #354158; font-size: .85rem; padding: .5rem .75rem; }
.filter-button.active { background: #dbe5ff; color: #2255c7; }
.form-card h2 { margin-bottom: .35rem; }
.form-section-heading { margin-bottom: 1.2rem; }
.form-section-heading h2 { margin-bottom: .35rem; }
.form-section-heading p, .form-subsection p { margin-bottom: 0; }
.form-subsection { border-top: 1px solid #edf0f5; margin-top: 1.5rem; padding-top: 1.25rem; }
.form-disclosure { border-top: 1px solid #edf0f5; margin-top: 1.5rem; padding-top: 1rem; }
.form-disclosure summary { align-items: center; color: #2255c7; cursor: pointer; display: flex; font-weight: 700; gap: .65rem; list-style-position: inside; }
.form-disclosure summary span { background: #edf1f8; border-radius: 999px; color: #68738a; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; }
.form-disclosure > p { margin: .8rem 0 0; }
.form-disclosure[open] .form-grid { margin-top: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
label { color: #354158; display: flex; flex-direction: column; font-size: .86rem; font-weight: 650; gap: .35rem; }
input, select { background: #fff; border: 1px solid #cbd3e1; border-radius: 7px; color: #172033; font: inherit; min-height: 2.35rem; padding: .45rem .6rem; }
input:focus, select:focus { border-color: #2255c7; outline: 2px solid #dbe5ff; }
.checkbox-label { flex-direction: row; align-items: center; padding-top: 1.7rem; }
.compact-checkbox { padding-top: 0; white-space: nowrap; }
.checkbox-label input, td input[type=checkbox] { min-height: auto; width: 1.05rem; }
.wide { grid-column: 1 / -1; }
.section-heading { align-items: flex-end; display: flex; justify-content: space-between; gap: 1rem; }
.random-controls { align-items: flex-end; display: flex; gap: .6rem; }
.random-controls label { min-width: 11rem; }
.hint { background: #f7f9fd; border-radius: 7px; color: #68738a; font-size: .85rem; padding: .65rem .8rem; }
.flavor-matcher { align-items: flex-start; display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) auto; margin: 1rem 0; }
.flavor-matcher label { grid-column: 1 / -1; }
.flavor-matcher textarea { background: #fff; border: 1px solid #cbd3e1; border-radius: 7px; color: #172033; font: inherit; padding: .6rem; resize: vertical; }
.flavor-match-results { background: #f7f9fd; border-radius: 8px; margin: .75rem 0 1rem; padding: .8rem 1rem; }
.flavor-match-results p { color: #68738a; margin: .35rem 0 .75rem; }
.flavor-match-results p:last-child { margin-bottom: 0; }
.unmatched-heading { color: #8b5b05; display: block; margin-top: .65rem; }
.total-pill { background: #eef3ff; border-radius: 999px; color: #2255c7; display: inline-block; font-size: .9rem; padding: .4rem .75rem; }
.form-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.order-tools { margin-top: 1.25rem; }
.manual-order-list { display: grid; gap: .45rem; margin-top: 1rem; max-height: 24rem; overflow-y: auto; }
.manual-order-row { align-items: center; background: #f7f9fd; border-radius: 8px; display: flex; flex-direction: row; justify-content: space-between; padding: .55rem .7rem; }
.manual-order-row input { max-width: 6rem; }
.warning-message { background: var(--color-warning-surface); border: 1px solid #f0c36d; border-radius: 8px; color: var(--color-warning); margin-top: 1rem; padding: .9rem 1rem; }
.warning-message p { margin-bottom: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.metric-card { margin-bottom: 1.25rem; }
.revenue-chart-card h2 { margin-bottom: .3rem; }
.revenue-chart-container { height: 19rem; padding-bottom: 1.25rem; padding-left: 3.5rem; position: relative; width: 100%; }
.revenue-chart { display: block; height: calc(100% - 1.25rem); overflow: visible; width: 100%; }
.chart-y-labels { bottom: 1.25rem; color: #68738a; font-size:  .68rem; left: 0; position: absolute; top: 0; width: 3rem; }
.chart-y-labels span { position: absolute; right: .35rem; transform: translateY(-50%); white-space: nowrap; }
.chart-date-labels { bottom: 0; color: #68738a; display: flex; font-size: .68rem; justify-content: space-between; left: 3.5rem; position: absolute; right: .25rem; }
.chart-gridline { stroke: #e8ecf3; stroke-width: 1; }
.chart-axis-label { fill: #68738a; font-size: 11px; }
.chart-revenue-line { fill: none; stroke: #2255c7; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.chart-revenue-point { fill: #fff; stroke: #2255c7; stroke-width: 2; }
.metric-card span { color: #68738a; display: block; font-size: .85rem; }
.metric-card strong { display: block; font-size: 1.7rem; margin-top: .35rem; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dashboard-filters { margin-top: 0; }
.error-message, .success-message { border-radius: 8px; margin: 1rem 0; overflow-wrap: anywhere; padding: .8rem 1rem; white-space: pre-wrap; }
.error-message { background: var(--color-error-surface); border: 1px solid #f1b6b1; color: var(--color-error); }
.success-message { background: var(--color-success-surface); border: 1px solid #b7e3c9; color: var(--color-success); }
.loading-state { align-items: center; color: var(--text-muted); display: flex; gap: .65rem; min-height: 3rem; }
.loading-state::before { animation: loading-spin .8s linear infinite; border: 2px solid #dbe5ff; border-right-color: #2255c7; border-radius: 50%; content: ""; height: 1rem; width: 1rem; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .loading-state::before { animation: none; }
}
.login-shell { align-items: center; display: flex; justify-content: center; min-height: 70vh; }
.login-card { max-width: 410px; width: 100%; }
.login-card h1 { margin-top: 1rem;
}

.status-comparison {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
}

.status-comparison > div {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 12rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 0.75rem;
background: var(--surface-muted);
}

.status-comparison .live-status {
border-color: #f0b45b;
background: #fff8eb;
}

.status-comparison .carrier-status {
border-color: #8fc9df;
background: #eef9fc;
}

.carrier-status span {
display: block;
}

.carrier-status a {
margin-top: 0.35rem;
font-weight: 700;
}

.status-label {
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.local-order-status {
align-self: flex-start;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
padding: 0.2rem 0.55rem; }
.brand-mark { align-items: center; background: #2255c7; border-radius: 12px; color: #fff; display: flex; font-size: 1.5rem; font-weight: 800; height: 3rem; justify-content: center; width: 3rem; }
.nav-button { background: transparent; color: inherit; text-align: left; width: 100%; }
.blazor-error-boundary { background: #b42318; bottom: 0; color: white; display: none; padding: .8rem; position: fixed; width: 100%; z-index: 10; }
@media (max-width: 700px) {
    .page-heading, .section-heading { align-items: stretch; flex-direction: column; }
    .heading-actions, .toolbar-actions { align-items: stretch; flex-wrap: wrap; }
    .heading-actions > *, .toolbar-actions > * { max-width: 100%; }
    .table-toolbar { align-items: stretch; flex-direction: column; gap: .75rem; }
    .table-toolbar input { min-width: 0; width: 100%; }
    .toolbar-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .toolbar-actions .sort-control { grid-column: 1 / -1; }
    .sort-control { align-items: stretch; flex-direction: column; }
    .form-grid { grid-template-columns: 1fr; }
    .wide { grid-column: auto; }
    .form-actions { align-items: stretch; flex-direction: column; }
    .form-actions > * { text-align: center; }
    .random-controls { align-items: stretch; flex-direction: column; }
    .metric-grid, .dashboard-grid, .overview-strip { grid-template-columns: 1fr; }
    .overview-strip > div { border-bottom: 1px solid #edf0f5; border-right: 0; padding-bottom: .75rem; }
    .overview-strip > div:last-child { border-bottom: 0; padding-bottom: 0; }
    .stock-track, .delivery-progress { min-width: 7rem; }
    .status-comparison > div { min-width: 0; width: 100%; }
    .order-actions { justify-content: flex-start; }
    .article-table { min-width: 640px; }
    .stores-table thead { display: none; }
    .stores-table, .stores-table tbody, .stores-table tr, .stores-table td { display: block; width: 100%; }
    .stores-table tbody tr { border-bottom: 1px solid #e3e7ef; padding: .35rem .9rem; }
    .stores-table tbody tr:last-child { border-bottom: 0; }
    .stores-table td { border: 0; padding: .55rem 0; white-space: normal; }
    .stores-table td::before { color: #68738a; content: attr(data-label); display: block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; margin-bottom: .3rem; text-transform: uppercase; }
    .stores-table .table-empty::before { content: none; }
    .stores-table td:last-child { padding-right: 0; }
    .store-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
    .store-actions .button, .store-actions button { margin: 0; }
    .store-actions > * { flex: 1 1 8rem; text-align: center; }
    .overview-strip > div { border-bottom: 1px solid #edf0f5; border-right: 0; padding: 0 0 .75rem; }
}
@media (min-width: 420px) and (max-width: 700px) {
    .overview-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}