:root {
  --ink: #17202b; --muted: #687386; --line: #e5e8ee; --surface: #fff;
  --canvas: #f5f7fa; --nav: #111a27; --nav-soft: #1d2938;
  --accent: #e06b42; --accent-dark: #c6532c; --blue: #2f6fed;
  --green: #168664; --amber: #ad6a0a; --red: #c33f46;
  --shadow: 0 12px 35px rgba(22, 31, 44, .08); --radius: 16px;
}
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--canvas); }
body { margin: 0; min-height: 100vh; } a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; }
.app-shell { display: flex; }
.sidebar { width: 248px; position: fixed; inset: 0 auto 0 0; padding: 24px 18px; background: var(--nav); color: #fff; display: flex; flex-direction: column; z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--accent); color: #fff; font-weight: 800; letter-spacing: -.04em; }
.brand strong, .brand small { display: block; }.brand strong { font-size: 18px; letter-spacing: -.02em; }
.brand small { color: #94a0b0; font-size: 11px; margin-top: 2px; text-transform: uppercase; letter-spacing: .12em; }
.main-nav { display: grid; gap: 6px; margin-top: 42px; }
.main-nav a { min-height: 46px; padding: 0 13px; border-radius: 11px; display: flex; align-items: center; gap: 12px; color: #b5becc; font-size: 14px; font-weight: 650; }
.main-nav a > span:first-child { width: 22px; font-size: 18px; text-align: center; color: #7f8da1; }
.main-nav a:hover, .main-nav a.active { background: var(--nav-soft); color: #fff; }.main-nav a.active > span:first-child { color: #ff9c77; }
.nav-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; }
.sidebar-footer { margin-top: auto; border-top: 1px solid #2a3442; padding-top: 18px; }
.user-chip { display: flex; align-items: center; gap: 10px; }.user-chip > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #ffd8ca; background: #3b2b2a; font-weight: 800; }
.user-chip strong, .user-chip small { display: block; }.user-chip strong { font-size: 13px; }.user-chip small { font-size: 11px; color: #8e9aac; margin-top: 1px; }
.link-button { border: 0; background: none; color: #8e9aac; padding: 13px 0 0 44px; cursor: pointer; font-size: 12px; }.link-button:hover { color: #fff; }
.app-main { width: calc(100% - 248px); margin-left: 248px; min-height: 100vh; }.content { max-width: 1580px; margin: 0 auto; padding: 40px 42px 70px; }.mobile-header { display: none; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.page-heading h1 { margin: 5px 0 4px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.045em; line-height: 1.1; }.page-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: 10px; font-weight: 800; color: var(--accent-dark); }.back-link { display: inline-block; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.heading-actions, .heading-statuses { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.heading-actions form { margin: 0; }
.cancel-order-form { display: flex; align-items: center; gap: 8px; }.cancel-order-form input { min-width: 210px; }
.button { min-height: 42px; border: 1px solid transparent; border-radius: 10px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 750; font-size: 13px; transition: .16s ease; }
.button:hover { transform: translateY(-1px); }.button.primary { background: var(--accent); color: #fff; box-shadow: 0 8px 18px rgba(224, 107, 66, .22); }.button.primary:hover { background: var(--accent-dark); }
.button.secondary { background: var(--ink); color: #fff; }.button.ghost { background: #fff; color: var(--ink); border-color: var(--line); }.button.danger { background: #fff; color: var(--red); border-color: #e6aeb2; }.button.danger:hover { background: #fff0f1; border-color: var(--red); }.button.full { width: 100%; }.button.small { min-height: 34px; padding: 0 11px; font-size: 11px; }
.text-link, .row-action { color: var(--blue); font-weight: 700; font-size: 12px; white-space: nowrap; }
.panel, .table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.panel { padding: 22px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }.panel-heading h2 { font-size: 17px; margin: 0 0 4px; letter-spacing: -.02em; }.panel-heading p { margin: 0; color: var(--muted); font-size: 12px; }.panel-heading a { color: var(--blue); font-size: 12px; font-weight: 750; }
.metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 13px; margin-bottom: 20px; }
.metric { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-height: 126px; position: relative; overflow: hidden; }.metric::after { content: ""; position: absolute; width: 68px; height: 68px; border-radius: 50%; right: -24px; top: -24px; background: #eef2f7; }
.metric span, .metric small, .metric strong { display: block; }.metric span { font-size: 11px; color: var(--muted); font-weight: 700; }.metric strong { font-size: 21px; margin-top: 19px; letter-spacing: -.035em; white-space: nowrap; }.metric small { font-size: 10px; color: #8a94a3; margin-top: 4px; }
.metric.accent { border-top: 3px solid var(--accent); }.metric.success { border-top: 3px solid var(--green); }.metric.warning { border-top: 3px solid #d8942f; }.metric.danger { border-top: 3px solid var(--red); }
.metric.dark { color: #fff; background: var(--nav); border-color: var(--nav); }.metric.dark span, .metric.dark small { color: #9eabba; }.metric.dark::after { background: #243143; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .72fr); gap: 20px; }.list-stack { display: grid; }
.order-row { display: grid; grid-template-columns: 40px minmax(150px, 1fr) auto minmax(160px, auto); gap: 12px; align-items: center; padding: 13px 8px; border-top: 1px solid #edf0f4; border-left: 4px solid transparent; }.order-row:first-child { border-top: 0; }.order-row:hover { background: #fafbfc; }.order-row.waiting { border-left-color: #d24850; background: #fff9f9; }.order-row.taken { border-left-color: var(--green); }.order-row.canceled { border-left-color: #8b95a3; opacity: .78; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #f3e9e4; color: var(--accent-dark); font-weight: 800; text-transform: uppercase; flex: 0 0 auto; }
.order-row strong, .order-row small { display: block; }.order-row strong { font-size: 13px; }.order-row small { color: var(--muted); font-size: 11px; margin-top: 3px; }.order-row > b { font-size: 12px; }
.status { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 0 8px; border-radius: 7px; font-size: 10px; font-weight: 800; white-space: nowrap; background: #f0f2f5; color: #657083; }
.status.success { color: #087356; background: #e7f7f1; }.status.warning { color: #9b600b; background: #fff3d8; }.status.danger { color: #ad3038; background: #ffe9eb; }.status.info { color: #245fbf; background: #eaf1ff; }.status.neutral { color: #667180; background: #eef1f5; }
.pickup-label { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 10px; border-radius: 8px; font-size: 10px; font-weight: 850; text-align: center; }.pickup-label.waiting { color: #98262e; background: #ffe5e7; }.pickup-label.taken { color: #076b50; background: #dff5ec; }.pickup-label.canceled { color: #596474; background: #e9edf2; }
.mini-stats, .summary-list { margin: 0; }.mini-stats > div, .summary-list > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); }.mini-stats dt, .summary-list dt { color: var(--muted); font-size: 11px; }.mini-stats dd, .summary-list dd { margin: 0; font-size: 12px; font-weight: 750; text-align: right; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 12px; margin-bottom: 17px; border: 1px solid var(--line); background: #fff; border-radius: 13px; }
.filter-bar input, .filter-bar select { min-height: 40px; padding: 0 11px; border: 1px solid #dfe3e8; background: #fafbfc; border-radius: 9px; color: var(--ink); outline: none; font-size: 12px; }
.filter-bar input:focus, .filter-bar select:focus, .form-control:focus, textarea:focus { border-color: #98afe4; box-shadow: 0 0 0 3px rgba(47, 111, 237, .10); }.filter-bar .search-input { flex: 1 1 260px; }.filter-bar.compact { width: fit-content; }.filter-bar label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.table-card { overflow-x: auto; box-shadow: none; }.table-card.embedded { border: 0; border-radius: 0; } table { width: 100%; border-collapse: collapse; min-width: 880px; }
th { padding: 12px 14px; background: #f8f9fb; color: #798393; text-align: left; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; } td { padding: 14px; border-top: 1px solid var(--line); font-size: 12px; vertical-align: middle; } td > strong, td > small { display: block; } td > small { color: var(--muted); margin-top: 4px; font-size: 10px; }
.pagination { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; margin-top: 20px; font-size: 12px; color: var(--muted); }.pagination a { color: var(--blue); font-weight: 700; }.pagination-side { display: flex; align-items: center; gap: 14px; }.pagination-side-next { justify-content: flex-start; }.pagination-side-previous { justify-content: flex-end; }.pagination-pages { display: flex; align-items: center; justify-content: center; gap: 5px; }.pagination-summary { margin-right: 7px; white-space: nowrap; }.pagination-number { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.pagination-number.active { color: #fff; border-color: var(--nav); background: var(--nav); font-weight: 800; }.pagination-ellipsis { width: 20px; text-align: center; }
.form-panel { max-width: 950px; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.form-grid.one-column { grid-template-columns: 1fr; }
.form-grid label { display: grid; align-content: start; gap: 7px; color: #414b59; font-size: 11px; font-weight: 750; }.form-grid label.span-2 { grid-column: span 2; }
.form-field-label { display: inline-flex; align-items: baseline; width: fit-content; min-height: 14px; line-height: 1.25; }.form-field-label .required { display: inline; }
@media (max-width: 650px) { .pagination { grid-template-columns: 1fr 1fr; gap: 10px; }.pagination-pages { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; }.pagination-summary { flex-basis: 100%; margin: 0 0 3px; text-align: center; }.pagination-side { grid-row: 2; }.pagination-side-previous { justify-content: flex-end; }.pagination-side-next { justify-content: flex-start; }.pagination-side a[aria-label="Prima pagină"], .pagination-side a[aria-label="Ultima pagină"] { display: none; } }
.form-control, .form-grid select, .form-grid input, .form-grid textarea { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #dce1e7; background: #fbfcfd; border-radius: 9px; outline: none; color: var(--ink); font-weight: 500; resize: vertical; }
.form-grid textarea { line-height: 1.55; }.form-grid small { color: var(--muted); font-weight: 500; }.required, .field-error, .danger-text { color: var(--red) !important; }.form-error { padding: 12px; margin-bottom: 16px; border-radius: 9px; color: #9d2e36; background: #ffecef; font-size: 12px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }.checkbox-row { display: flex !important; grid-template-columns: auto 1fr; align-items: center; flex-direction: row-reverse; justify-content: flex-end; }.checkbox-row input { width: 18px; min-height: 18px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, .7fr); gap: 20px; align-items: start; }.stack { display: grid; gap: 20px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.copy-field { min-height: 86px; padding: 14px 90px 14px 15px; position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.copy-field:nth-child(even) { border-right: 0; }.copy-field.wide { grid-column: span 2; border-right: 0; }
.copy-field > span, .copy-field > strong { display: block; }.copy-field > span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }.copy-field > strong { margin-top: 8px; font-size: 13px; overflow-wrap: anywhere; }
.copy-button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 1px solid #dbe0e6; background: #fff; color: #536070; border-radius: 7px; padding: 6px 8px; cursor: pointer; font-size: 9px; font-weight: 800; }.copy-button:hover { border-color: var(--blue); color: var(--blue); }.copy-button.copied { color: var(--green); border-color: #79c8af; }.pre-line { white-space: pre-line; }
.notice { padding: 13px 15px; margin-bottom: 17px; border-radius: 11px; font-size: 12px; border: 1px solid; }.notice.locked { background: #edf0f4; border-color: #d7dde5; color: #485364; }.notice.info { background: #edf4ff; border-color: #cfe0ff; color: #315eaa; }.notice.warning { background: #fff6e3; border-color: #f4dca9; color: #82560f; }.notice.success { background: #e8f7f1; border-color: #b9e0d2; color: #0a684f; }.notice.danger { background: #fff0f1; border-color: #efc1c4; color: #9f2c34; }
.attachment-list { display: grid; gap: 9px; }.attachment { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }.attachment > div { min-width: 0; margin-right: auto; }.attachment strong, .attachment small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.attachment strong { font-size: 11px; }.attachment small { font-size: 9px; color: var(--muted); margin-top: 3px; }.attachment a { font-size: 10px; color: var(--blue); font-weight: 750; }
.danger-link { border: 0; padding: 0; background: none; color: var(--red); cursor: pointer; font-size: 10px; font-weight: 750; }.invoice-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 11px; }.invoice-mini > a strong, .invoice-mini > a small { display: block; }.invoice-mini small { color: var(--muted); margin-top: 3px; }.invoice-mini > div { display: grid; justify-items: end; gap: 6px; }
.history-panel { margin-top: 20px; }.timeline article { display: grid; grid-template-columns: 18px 1fr; gap: 8px; position: relative; padding: 0 0 20px; }.timeline article:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 0; width: 1px; background: var(--line); }.timeline-dot { width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; background: var(--accent); z-index: 1; }.timeline strong, .timeline small { display: block; }.timeline strong { font-size: 12px; }.timeline small { color: var(--muted); font-size: 10px; margin-top: 3px; }.change-list { display: grid; gap: 7px; margin: 10px 0 0; padding: 10px 12px; list-style: none; border-radius: 9px; background: #f8f9fb; }.change-list li { display: grid; grid-template-columns: minmax(130px, .4fr) 1fr; gap: 12px; align-items: baseline; font-size: 11px; }.change-list li > span { color: var(--muted); font-weight: 700; }.change-list li > div { display: flex; flex-wrap: wrap; gap: 8px; }.change-list del { color: #a54b50; }.change-list ins { color: #087356; text-decoration: none; font-weight: 750; }
.counter-card { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-radius: 11px; background: #fff3d8; color: #8c590c; }.counter-card strong { font-size: 24px; }.counter-card span { font-size: 11px; font-weight: 750; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }.tabs a { flex: 0 0 auto; padding: 9px 14px; border-radius: 9px; color: var(--muted); font-size: 12px; font-weight: 750; }.tabs a.active { background: var(--nav); color: #fff; }.tabs b { display: inline-grid; min-width: 19px; height: 19px; margin-left: 4px; place-items: center; border-radius: 9px; background: var(--accent); color: #fff; font-size: 9px; }.category-tabs { margin-bottom: 12px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.category-tabs a { min-height: 42px; display: inline-flex; align-items: center; }
.order-list { display: grid; gap: 10px; }.order-list-row { display: grid; grid-template-columns: minmax(270px, 1.55fr) minmax(90px, .35fr) minmax(205px, .75fr) minmax(120px, .4fr) 18px; align-items: center; gap: 18px; min-height: 94px; padding: 14px 18px 14px 15px; border: 1px solid var(--line); border-left: 7px solid #cbd2dc; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(24, 33, 44, .045); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }.order-list-row:hover { transform: translateY(-1px); border-top-color: #bac4d0; border-right-color: #bac4d0; border-bottom-color: #bac4d0; box-shadow: 0 9px 24px rgba(24, 33, 44, .08); }.order-list-row.waiting { border-left-color: #d24850; background: linear-gradient(90deg, #fff4f5 0, #fff 24%); }.order-list-row.taken { border-left-color: var(--green); background: linear-gradient(90deg, #f1fbf7 0, #fff 24%); }.order-list-row.canceled { border-left-color: #8b95a3; background: #f7f8fa; opacity: .83; }.order-customer { display: flex; gap: 13px; align-items: center; min-width: 0; }.order-customer > div { min-width: 0; }.order-customer strong { display: block; font-size: 15px; }.order-customer p { margin: 4px 0; color: #4f5968; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.order-customer small { color: var(--muted); font-size: 10px; }.order-amount span, .order-amount strong { display: block; }.order-amount span { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 800; }.order-amount strong { margin-top: 5px; font-size: 14px; }.pickup-state { min-width: 195px; padding: 11px 13px; border: 1px solid transparent; border-radius: 10px; }.pickup-state strong, .pickup-state small { display: block; }.pickup-state strong { font-size: 12px; }.pickup-state small { margin-top: 3px; font-size: 9px; opacity: .78; }.pickup-state.waiting { color: #98262e; background: #ffe5e7; border-color: #f3bcc0; }.pickup-state.taken { color: #076b50; background: #dff5ec; border-color: #b8e2d3; }.pickup-state.canceled { color: #596474; background: #e9edf2; border-color: #d4dae2; }.order-stage { display: grid; justify-items: start; gap: 6px; }
.store-list { display: grid; gap: 10px; }.store-order-card { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 18px; min-height: 100px; padding: 15px 18px 15px 14px; border: 1px solid var(--line); border-left: 7px solid #cbd2dc; background: #fff; border-radius: 12px; box-shadow: 0 5px 18px rgba(24, 33, 44, .045); }.store-order-card.waiting { border-left-color: #d24850; background: linear-gradient(90deg, #fff3f4 0, #fff 28%); }.store-order-card.taken { border-left-color: var(--green); background: linear-gradient(90deg, #f0faf6 0, #fff 28%); }.store-order-card.canceled { border-left-color: #8b95a3; background: #f7f8fa; }.store-order-card:hover { border-top-color: #b9c4d2; border-right-color: #b9c4d2; border-bottom-color: #b9c4d2; transform: translateY(-1px); }
.order-card-main { display: flex; gap: 13px; align-items: center; min-width: 0; }.order-card-main > div { min-width: 0; }.order-card-main strong { font-size: 15px; }.order-card-main p { margin: 4px 0; color: #4f5968; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.order-card-main small, .order-card-meta small { color: var(--muted); font-size: 10px; }.order-card-meta { display: grid; grid-template-columns: auto minmax(195px, auto); align-items: center; gap: 14px; }.order-card-meta > strong { font-size: 14px; }.chevron { color: #9aa5b4; font-size: 24px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 20px; align-items: start; }.company-settings-list { display: grid; gap: 20px; }.company-settings-card { padding: 25px; }.company-settings-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr); gap: 24px; align-items: start; }.company-actions { display: grid; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f8f9fb; }.company-actions h3, .cursor-box h3 { margin: 0 0 4px; font-size: 13px; }.company-actions p { margin: 0; color: var(--muted); font-size: 10px; }.action-stack { display: grid; gap: 8px; }.cursor-box { padding-top: 4px; }.cursor-row { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 11px; }.cursor-row span { color: var(--muted); }.cursor-row b { grid-column: 1/-1; font-size: 10px; }.top-gap { margin-top: 20px; }.archive-form { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)) auto; gap: 12px; align-items: end; }.archive-form label { display: grid; gap: 7px; color: #414b59; font-size: 11px; font-weight: 750; }.archive-form > .form-error { grid-column: 1/-1; }.errorlist { margin: 0; padding: 0; color: var(--red); list-style: none; font-size: 10px; font-weight: 600; }.archive-batches { display: grid; gap: 18px; }.archive-count { padding: 8px 11px; border-radius: 9px; background: #eef1f5; color: #536071; font-size: 11px; font-weight: 800; white-space: nowrap; }.archive-totals { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }.archive-totals > div { padding: 11px 13px; border-radius: 9px; background: #f6f8fa; }.archive-totals span, .archive-totals strong { display: block; }.archive-totals span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }.archive-totals strong { margin-top: 4px; font-size: 13px; }.archive-order-list { border-top: 1px solid var(--line); }.archive-order-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(180px, auto) 18px; align-items: center; gap: 18px; min-height: 66px; padding: 10px 4px; border-bottom: 1px solid var(--line); }.archive-order-row:last-child { border-bottom: 0; }.archive-order-row:hover { background: #fafbfc; }.archive-order-row > div:first-child strong, .archive-order-row > div:first-child small { display: block; }.archive-order-row > div:first-child small { margin-top: 4px; color: var(--muted); font-size: 10px; }.archive-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }.table-actions { display: grid; justify-items: start; gap: 8px; }.filter-field { display: flex !important; align-items: center; gap: 7px; }.filter-field > span { color: var(--muted); font-size: 10px; font-weight: 750; }
.flash-stack { position: fixed; right: 24px; top: 20px; z-index: 80; display: grid; gap: 8px; max-width: 420px; }.flash { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding: 12px 15px; border-radius: 10px; box-shadow: var(--shadow); background: #17202b; color: #fff; font-size: 11px; }.flash.success { background: #116c53; }.flash.error { background: #a9363e; }.flash.warning { background: #95610f; }.flash button { border: 0; color: inherit; background: none; cursor: pointer; }
.empty-state { padding: 40px 20px; color: var(--muted); text-align: center; font-size: 12px; }.empty-small { padding: 15px 0; color: var(--muted); font-size: 11px; }.muted { color: var(--muted); }.error-page { min-height: 60vh; display: grid; justify-items: center; align-content: center; text-align: center; }.error-page > strong { font-size: 80px; color: #d7dce4; }.error-page h1 { margin: 0; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(420px, .9fr); }.login-panel { padding: 50px 9vw 70px 6vw; display: flex; flex-direction: column; background: var(--nav); color: #fff; position: relative; overflow: hidden; }.login-panel::before, .login-panel::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid #354254; }.login-panel::before { width: 560px; height: 560px; right: -260px; bottom: -240px; }.login-panel::after { width: 360px; height: 360px; right: -150px; bottom: -140px; background: rgba(224,107,66,.08); }.login-copy { margin: auto 0; max-width: 660px; z-index: 1; }.login-copy .eyebrow { color: #ff9f7b; }.login-copy h1 { max-width: 650px; margin: 15px 0; font-size: clamp(40px, 5vw, 67px); line-height: 1.02; letter-spacing: -.055em; }.login-copy p { max-width: 500px; color: #aeb8c6; font-size: 16px; line-height: 1.6; }
.login-form-wrap { display: grid; place-items: center; padding: 40px; background: #f6f7f9; }.login-card { width: min(390px, 100%); padding: 34px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }.login-card h2 { margin: 7px 0; font-size: 28px; }.login-card p { margin: 0 0 22px; color: var(--muted); font-size: 12px; }.login-card label { display: grid; gap: 7px; margin-top: 15px; color: #424c5a; font-size: 11px; font-weight: 750; }.login-card input { width: 100%; min-height: 45px; padding: 0 12px; border: 1px solid #dce1e7; border-radius: 9px; outline: none; }.login-card .button { margin-top: 20px; }.login-card > small { display: block; margin-top: 17px; text-align: center; font-size: 9px; }
@media (max-width: 1250px) { .metrics-grid { grid-template-columns: repeat(3, 1fr); }.detail-grid { grid-template-columns: 1fr; }.store-detail { grid-template-columns: minmax(0, 1.5fr) minmax(240px, .5fr); }.order-list-row { grid-template-columns: minmax(0, 1fr) auto; position: relative; padding-right: 46px; }.pickup-state { grid-column: 1; }.order-stage { grid-column: 2; grid-row: 2; }.order-list-row > .chevron { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }.archive-form { grid-template-columns: repeat(2, minmax(180px, 1fr)); }.archive-form .button { align-self: end; } }
@media (max-width: 900px) { .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 20px 0 50px rgba(0,0,0,.2); }.sidebar.open { transform: translateX(0); }.app-main { width: 100%; margin-left: 0; }.mobile-header { height: 58px; padding: 0 18px; display: flex; align-items: center; gap: 15px; background: var(--nav); color: #fff; }.mobile-header button { border: 0; color: #fff; background: none; font-size: 23px; }.content { padding: 26px 20px 60px; }.dashboard-grid, .settings-grid, .store-detail, .company-settings-grid { grid-template-columns: 1fr; }.login-layout { grid-template-columns: 1fr; }.login-panel { display: none; }.login-form-wrap { min-height: 100vh; } }
@media (max-width: 650px) { .page-heading { align-items: flex-start; flex-direction: column; }.page-heading > .heading-actions, .page-heading > .button { width: 100%; }.heading-actions .button, .heading-actions form { flex: 1; }.heading-actions form .button { width: 100%; }.metrics-grid { grid-template-columns: repeat(2, 1fr); }.filter-bar > * { flex: 1 1 130px; }.filter-bar .search-input { flex-basis: 100%; }.filter-field { display: grid !important; }.form-grid { grid-template-columns: 1fr; }.form-grid label.span-2 { grid-column: auto; }.field-grid { grid-template-columns: 1fr; }.copy-field, .copy-field.wide { grid-column: auto; border-right: 0; }.order-row { grid-template-columns: 40px minmax(0, 1fr); }.order-row > b, .order-row .pickup-label { grid-column: 2; justify-self: start; }.order-list-row { grid-template-columns: 1fr; gap: 11px; padding: 15px 42px 15px 13px; }.order-list-row .order-amount, .order-list-row .pickup-state, .order-list-row .order-stage { grid-column: 1; grid-row: auto; }.order-list-row .pickup-state { width: 100%; min-width: 0; }.order-stage { display: flex; flex-wrap: wrap; }.store-order-card { grid-template-columns: 1fr 12px; }.order-card-meta { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; justify-items: start; width: calc(100% - 51px); margin-left: 51px; }.order-card-meta .pickup-state { width: 100%; min-width: 0; }.store-order-card > .chevron { grid-column: 2; grid-row: 1/3; }.change-list li { grid-template-columns: 1fr; gap: 4px; }.archive-form { grid-template-columns: 1fr; }.archive-order-row { grid-template-columns: minmax(0, 1fr) 18px; gap: 8px 12px; }.archive-order-row > strong, .archive-statuses { grid-column: 1; }.archive-statuses { justify-content: flex-start; }.archive-order-row > .chevron { grid-column: 2; grid-row: 1/4; }.invoice-mini { grid-template-columns: 1fr; }.invoice-mini > div { justify-items: start; }.flash-stack { left: 12px; right: 12px; top: 12px; } }
@media (max-width: 650px) { .archive-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }.cancel-order-form { width: 100%; flex-direction: column; align-items: stretch; }.cancel-order-form input { min-width: 0; }.cancel-order-form .button { width: 100%; } }

/* Comenzi WJON: branding, reconcilierea sumelor si liste cu status vizibil. */
.brand > span:last-child { min-width: 0; }
.brand strong { font-size: 16px; white-space: nowrap; }
.brand small { text-transform: none; letter-spacing: .04em; }
.mobile-brand { display: grid; gap: 1px; line-height: 1.1; }
.mobile-brand strong { font-size: 14px; }
.mobile-brand small { color: #9aa7b8; font-size: 9px; letter-spacing: .04em; }
.login-mobile-brand { display: none; }

.category-tabs { gap: 8px; }
.category-tabs a { padding-inline: 18px; }
.invoice-status-tabs { width: fit-content; margin: -5px 0 15px 14px; padding: 5px; border: 1px solid #cddcff; border-radius: 11px; background: #edf3ff; }
.invoice-status-tabs a { color: #3d5f99; }
.invoice-status-tabs a.active { background: #2f6fed; color: #fff; }

.order-list-row { grid-template-columns: minmax(270px, 1.35fr) minmax(135px, .38fr) minmax(205px, .65fr) minmax(195px, .72fr) 18px; }
.order-list-row.waiting { border-left-color: #3927b7; background: linear-gradient(90deg, #f1efff 0, #fff 25%); }
.order-list-row.taken { border-left-color: #00a86b; background: linear-gradient(90deg, #ecfbf5 0, #fff 25%); }
.pickup-state.waiting { color: #fff; background: #3927b7; border-color: #3927b7; box-shadow: 0 7px 16px rgba(57, 39, 183, .2); }
.pickup-state.taken { color: #fff; background: #00a86b; border-color: #00a86b; box-shadow: 0 7px 16px rgba(0, 168, 107, .18); }
.pickup-state.waiting small, .pickup-state.taken small { color: #fff; opacity: .84; }
.order-stage { min-width: 0; }
.invoice-company-status { max-width: 100%; min-height: auto; padding: 7px 9px; line-height: 1.3; white-space: normal; }
.order-amount del, .order-card-amount del, .reconciled-amount del, .changed-inline del { display: block; color: #a43b43; font-size: 10px; font-weight: 650; line-height: 1.25; }
.order-amount.changed strong, .order-card-amount.changed strong, .reconciled-amount strong { color: #087356; }
.changed-inline { display: grid; gap: 2px; }

.store-list-header, .store-order-card { grid-template-columns: minmax(300px, 1.35fr) minmax(115px, .38fr) minmax(190px, .62fr) minmax(130px, .38fr) minmax(210px, .68fr) 18px; column-gap: 18px; }
.store-list-header { display: grid; align-items: center; padding: 0 19px 9px 21px; color: #737f91; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.store-order-card { display: grid; min-height: 108px; }
.store-order-card.waiting { border-left-color: #3927b7; background: linear-gradient(90deg, #f1efff 0, #fff 25%); }
.store-order-card.taken { border-left-color: #00a86b; background: linear-gradient(90deg, #ecfbf5 0, #fff 25%); }
.order-card-date > span, .order-card-invoice > span, .order-card-amount > span { display: none; }
.order-card-date strong, .order-card-invoice strong, .order-card-amount strong { display: block; font-size: 12px; }
.order-card-date strong { color: #3e4856; }
.order-card-invoice { min-width: 0; }
.order-card-invoice strong { color: #245fbf; line-height: 1.35; }
.order-card-amount strong { font-size: 14px; white-space: nowrap; }
.store-order-card .pickup-state { min-width: 0; }

.field-grid { gap: 10px; border: 0; border-radius: 0; overflow: visible; }
.copy-field, .copy-field:nth-child(even), .copy-field.wide { min-height: 92px; border: 1px solid #dce3ec; border-left: 4px solid #9db8e8; border-radius: 11px; background: linear-gradient(135deg, #f8fbff, #fff 72%); box-shadow: 0 4px 12px rgba(25, 45, 75, .045); }
.copy-field:nth-child(3n+2) { border-left-color: #e8a37f; background: linear-gradient(135deg, #fff9f6, #fff 72%); }
.copy-field:nth-child(3n) { border-left-color: #73c5aa; background: linear-gradient(135deg, #f5fcf9, #fff 72%); }
.copy-field > span { color: #50627a; font-size: 9px; }
.copy-field > strong { font-size: 14px; line-height: 1.45; }
.copy-button { border-color: #cbd7e6; background: #fff; box-shadow: 0 2px 6px rgba(24, 45, 73, .06); }

.invoice-reconciliation { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.invoice-reconciliation small { display: block; margin-top: 3px; color: inherit; opacity: .72; }
.reconciled-amount { flex: 0 0 auto; text-align: right; }
.reconciled-amount strong { display: block; font-size: 16px; }

@media (max-width: 1500px) {
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-grid > * { min-width: 0; }
  .filter-bar.compact { width: 100%; }
  .filter-bar.compact label { flex: 1 1 180px; }
}

@media (min-width: 1201px) and (max-width: 1425px) {
  .store-list-header, .store-order-card { grid-template-columns: minmax(210px, 1.35fr) minmax(90px, .38fr) minmax(135px, .62fr) minmax(105px, .38fr) minmax(160px, .68fr) 16px; column-gap: 12px; }
  .store-list-header { display: grid; }
  .store-order-card .order-card-main, .store-order-card .order-card-date, .store-order-card .order-card-invoice, .store-order-card .order-card-amount, .store-order-card .pickup-state, .store-order-card > .chevron { grid-column: auto; grid-row: auto; margin-left: 0; }
  .order-card-date > span, .order-card-invoice > span, .order-card-amount > span { display: none; }
}

@media (max-width: 1250px) {
  .order-list-row { grid-template-columns: minmax(0, 1fr) auto; position: relative; padding-right: 46px; }
  .order-list-row .order-amount { grid-column: 2; grid-row: 1; }
  .order-list-row .pickup-state { grid-column: 1; grid-row: 2; }
  .order-list-row .order-stage { grid-column: 2; grid-row: 2; }
  .order-list-row > .chevron { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
  .store-list-header { display: none; }
  .store-order-card { grid-template-columns: minmax(250px, 1fr) minmax(130px, .4fr) minmax(210px, .65fr) 18px; row-gap: 12px; }
  .store-order-card .order-card-main { grid-column: 1; grid-row: 1; }
  .store-order-card .order-card-date { grid-column: 2; grid-row: 1; }
  .store-order-card .pickup-state { grid-column: 3; grid-row: 1 / span 2; }
  .store-order-card .order-card-invoice { grid-column: 1; grid-row: 2; margin-left: 51px; }
  .store-order-card .order-card-amount { grid-column: 2; grid-row: 2; }
  .store-order-card > .chevron { grid-column: 4; grid-row: 1 / span 2; }
  .order-card-date > span, .order-card-invoice > span, .order-card-amount > span { display: block; margin-bottom: 4px; color: #788496; font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
}

@media (max-width: 900px) {
  .login-form-wrap { align-content: center; gap: 22px; }
  .login-mobile-brand { display: flex; color: var(--ink); }
  .login-mobile-brand small { color: var(--muted); }
}

@media (max-width: 760px) {
  .category-tabs { display: grid; grid-template-columns: repeat(2, minmax(145px, 1fr)); overflow: visible; }
  .category-tabs a { justify-content: space-between; }
  .invoice-status-tabs { width: 100%; margin-left: 0; }
  .store-order-card { grid-template-columns: minmax(0, 1fr) 18px; gap: 13px 10px; padding: 16px 14px; }
  .store-order-card .order-card-main, .store-order-card .order-card-date, .store-order-card .order-card-invoice, .store-order-card .order-card-amount, .store-order-card .pickup-state { grid-column: 1; grid-row: auto; margin-left: 0; }
  .store-order-card > .chevron { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
  .store-order-card .pickup-state { width: 100%; }
  .order-card-invoice:empty { display: none; }
  .order-list-row { grid-template-columns: 1fr; gap: 11px; padding: 15px 42px 15px 13px; border-left-width: 6px; }
  .order-list-row .order-customer, .order-list-row .order-amount, .order-list-row .pickup-state, .order-list-row .order-stage { grid-column: 1; grid-row: auto; }
  .order-list-row .pickup-state { width: 100%; min-width: 0; }
  .order-list-row .order-stage { display: flex; flex-wrap: wrap; }
  .invoice-reconciliation { align-items: flex-start; flex-direction: column; }
  .reconciled-amount { text-align: left; }
}

@media (max-width: 420px) {
  .category-tabs { grid-template-columns: 1fr; }
  .invoice-status-tabs { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .invoice-status-tabs a { justify-content: space-between; }
}

@media (min-width: 1201px) and (max-width: 1250px) {
  .store-list-header, .store-order-card { grid-template-columns: minmax(210px, 1.35fr) minmax(90px, .38fr) minmax(135px, .62fr) minmax(105px, .38fr) minmax(160px, .68fr) 16px; column-gap: 12px; }
  .store-list-header { display: grid; }
  .store-order-card .order-card-main, .store-order-card .order-card-date, .store-order-card .order-card-invoice, .store-order-card .order-card-amount, .store-order-card .pickup-state, .store-order-card > .chevron { grid-column: auto; grid-row: auto; margin-left: 0; }
  .store-order-card > .chevron { position: static; transform: none; }
  .order-card-date > span, .order-card-invoice > span, .order-card-amount > span { display: none; }
}

@media (max-width: 1050px) {
  .store-order-card { grid-template-columns: minmax(0, 1fr) 18px; gap: 13px 10px; padding: 16px 14px; }
  .store-order-card .order-card-main, .store-order-card .order-card-date, .store-order-card .order-card-invoice, .store-order-card .order-card-amount, .store-order-card .pickup-state { grid-column: 1; grid-row: auto; margin-left: 0; }
  .store-order-card > .chevron { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
  .store-order-card .pickup-state { width: 100%; }
  .order-card-invoice:empty { display: none; }
}

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

/* Ajustari de densitate pentru lista magazinului si accentul valorii facturate. */
.metric.invoiced { border-top: 3px solid var(--blue); }

.store-list { gap: 7px; }
.store-order-card {
  min-height: 84px;
  padding: 10px 18px 10px 14px;
}
.store-order-card .avatar { width: 34px; height: 34px; border-radius: 10px; }
.store-order-card .order-card-main { gap: 11px; }
.store-order-card .order-card-main p { margin-block: 2px; }
.store-order-card .pickup-state { padding: 8px 11px; }

@media (max-width: 1050px) {
  .store-order-card { padding: 12px 14px; row-gap: 8px; }
}

/* Arhiva: index compact de intervale si pagina separata pentru comenzile din interval. */
.archive-index { gap: 12px; }
.archive-batch-card {
  display: block;
  padding: 18px 20px;
  border-left: 4px solid #9db8e8;
  box-shadow: 0 5px 18px rgba(24, 33, 44, .045);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.archive-batch-card:hover,
.archive-batch-card:focus-visible {
  transform: translateY(-1px);
  border-color: #7f9ed8;
  box-shadow: 0 9px 24px rgba(24, 33, 44, .08);
}
.archive-batch-card:focus-visible { outline: 3px solid rgba(47, 111, 237, .16); outline-offset: 2px; }
.archive-batch-card-main { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.archive-batch-card-main h2 { margin: 4px 0; font-size: 18px; letter-spacing: -.02em; }
.archive-batch-card-main p { margin: 0; color: var(--muted); font-size: 11px; }
.archive-batch-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.archive-batch-card-actions > strong { padding: 8px 11px; border-radius: 9px; color: #087356; background: #e7f7f1; font-size: 11px; white-space: nowrap; }
.archive-batch-card-actions .chevron { margin-left: 3px; }
.archive-batch-detail-summary { margin-bottom: 16px; }
.archive-batch-detail-summary .archive-totals { grid-template-columns: repeat(5, minmax(120px, 1fr)); margin: 0; }
.archive-order-page { padding: 0 18px; overflow: hidden; }

@media (max-width: 1050px) {
  .archive-batch-detail-summary .archive-totals { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

@media (max-width: 650px) {
  .archive-batch-card { padding: 16px; }
  .archive-batch-card-main { align-items: flex-start; flex-direction: column; gap: 13px; }
  .archive-batch-card-actions { justify-content: flex-start; }
  .archive-batch-detail-summary .archive-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-order-page { padding: 0 12px; }
}

/* Liste active compacte: aproximativ zece comenzi vizibile pe un ecran desktop. */
@media (min-width: 1251px) {
  .order-list,
  .store-list { gap: 4px; }

  .order-list-row,
  .store-order-card {
    min-height: 58px;
    padding: 5px 12px 5px 10px;
    gap: 12px;
    border-left-width: 5px;
    border-radius: 7px;
    box-shadow: 0 2px 7px rgba(24, 33, 44, .035);
  }

  .order-list-row:hover,
  .store-order-card:hover {
    transform: none;
    box-shadow: 0 3px 10px rgba(24, 33, 44, .065);
  }

  .order-list-row .avatar,
  .store-order-card .avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 12px;
  }

  .order-customer,
  .store-order-card .order-card-main { gap: 9px; }

  .order-customer strong,
  .store-order-card .order-card-main strong {
    font-size: 13px;
    line-height: 1.15;
  }

  .order-customer p,
  .store-order-card .order-card-main p {
    margin: 1px 0;
    font-size: 10px;
    line-height: 1.2;
  }

  .order-customer small,
  .store-order-card .order-card-main small {
    font-size: 9px;
    line-height: 1.15;
  }

  .order-amount span { font-size: 8px; }
  .order-amount strong { margin-top: 2px; font-size: 13px; }

  .pickup-state,
  .store-order-card .pickup-state {
    padding: 5px 8px;
    border-radius: 7px;
  }

  .pickup-state strong {
    font-size: 10px;
    line-height: 1.15;
  }

  .pickup-state small {
    margin-top: 1px;
    font-size: 8px;
    line-height: 1.15;
  }

  .order-stage { gap: 3px; }
  .order-stage .status {
    min-height: 20px;
    padding: 3px 7px;
    font-size: 9px;
  }

  .store-list-header { padding-bottom: 5px; }
  .store-order-card .order-card-date strong,
  .store-order-card .order-card-invoice strong { font-size: 10px; }
  .store-order-card .order-card-amount strong { font-size: 13px; }
}

@media (min-width: 1051px) and (max-width: 1250px) {
  .order-list,
  .store-list { gap: 5px; }

  .order-list-row,
  .store-order-card {
    min-height: 72px;
    padding: 7px 12px;
    row-gap: 5px;
    border-radius: 8px;
  }

  .order-list-row .avatar,
  .store-order-card .avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .pickup-state,
  .store-order-card .pickup-state { padding: 6px 9px; }
}

/* Dashboard, export, facturi și controale scalabile. */
input[type="date"] { cursor: pointer; color-scheme: light; }
.metric.invoiced { border-top: 3px solid var(--blue); }
.dashboard-metrics { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
.dashboard-overview { display: grid; grid-template-columns: minmax(390px, .9fr) minmax(500px, 1.1fr); gap: 20px; align-items: stretch; }
.today-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.today-card { min-height: 154px; display: grid; align-content: center; }
.today-card > span, .today-card > strong, .today-card > small { display: block; }
.today-card > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.today-card > strong { margin-top: 12px; font-size: 25px; letter-spacing: -.04em; white-space: nowrap; }
.today-card > small { margin-top: 5px; color: #8994a4; font-size: 10px; }
.today-card.accent { border-top: 3px solid var(--accent); }
.dashboard-smartbill { min-width: 0; }
.company-sync-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.company-sync-summary article { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.company-sync-summary article > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.company-sync-summary article strong { font-size: 12px; }
.company-sync-summary article small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.dashboard-smartbill-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 16px; }

.export-orders-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; margin-bottom: 16px; border: 1px solid #cfdaeb; border-radius: 13px; background: #f3f7fd; }
.export-orders-bar > strong { margin-right: auto; font-size: 12px; }
.export-orders-bar label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.export-orders-bar input { min-height: 38px; padding: 0 10px; border: 1px solid #d5dce7; border-radius: 8px; background: #fff; }

.pagination-block { display: grid; gap: 10px; margin-top: 18px; }
.pagination-block .pagination { margin-top: 0; }
.page-size-control { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: var(--muted); font-size: 10px; }
.page-size-control label { font-weight: 750; }
.page-size-control select { min-height: 32px; padding: 0 24px 0 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 750; }

.invoice-list { display: grid; gap: 6px; }
.invoice-list-header, .invoice-list-row { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(210px, 1.2fr) minmax(100px, .48fr) minmax(135px, .62fr) minmax(155px, .72fr) minmax(150px, .66fr); gap: 14px; align-items: center; }
.invoice-list-header { padding: 0 13px 6px; color: #737f91; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.invoice-list-row { min-height: 72px; padding: 9px 13px; border: 1px solid var(--line); border-left: 5px solid #8ea9d8; border-radius: 9px; background: #fff; box-shadow: 0 3px 12px rgba(24, 33, 44, .04); }
.invoice-list-row.needs-match { border-left-color: #dc8d27; background: linear-gradient(90deg, #fff9ed, #fff 20%); }
.invoice-list-row.reversed { border-left-color: var(--red); }
.invoice-list-row strong, .invoice-list-row small { display: block; }
.invoice-list-row strong { font-size: 11px; line-height: 1.25; }
.invoice-list-row small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.3; }
.invoice-client, .invoice-document { min-width: 0; }
.invoice-client strong, .invoice-document strong, .invoice-client small, .invoice-document small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-payment { display: grid; justify-items: start; gap: 2px; }
.invoice-payment small { margin: 0; }
.invoice-actions { display: flex; align-items: center; gap: 8px; }

.invoice-match-grid { display: grid; grid-template-columns: minmax(260px, .55fr) minmax(650px, 1.45fr); gap: 20px; align-items: start; }
.invoice-match-summary { position: sticky; top: 20px; }
.invoice-match-summary h2 { margin-top: 0; }
.current-match { display: grid; gap: 4px; margin-top: 16px; padding: 13px; border-radius: 10px; background: #edf8f4; border: 1px solid #bee5d6; }
.current-match span, .current-match small { color: var(--muted); font-size: 9px; }
.current-match strong { font-size: 12px; }
.invoice-match-search { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 8px; margin: 14px 0 12px; }
.invoice-match-search .form-control { min-height: 42px; }
.match-results-heading { display: flex; justify-content: space-between; gap: 12px; padding: 0 2px 8px; color: var(--muted); font-size: 10px; font-weight: 750; }
.match-results-heading strong { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: #e8eef8; color: var(--blue); }
.match-order-list { display: grid; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.match-order-list legend { margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.match-order-option { display: grid; grid-template-columns: 20px minmax(220px, 1.25fr) minmax(90px, .45fr) minmax(105px, .5fr) minmax(145px, .7fr); gap: 11px; align-items: center; min-height: 66px; padding: 8px 11px; border: 1px solid var(--line); border-left: 4px solid #8ea9d8; border-radius: 9px; background: #fff; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.match-order-option:hover { border-color: #9bb1d7; box-shadow: 0 4px 14px rgba(24, 33, 44, .06); }
.match-order-option:has(input:checked) { border-color: var(--blue); border-left-color: var(--blue); background: #f2f6ff; box-shadow: 0 0 0 2px rgba(47, 111, 237, .09); }
.match-order-option.selected-current { border-left-color: var(--green); }
.match-order-option input { width: 16px; height: 16px; accent-color: var(--blue); }
.match-order-option strong, .match-order-option small { display: block; }
.match-order-option strong { font-size: 11px; line-height: 1.25; }
.match-order-option small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.25; }
.match-order-client { min-width: 0; }
.match-order-client strong, .match-order-client small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-order-state { padding: 7px 9px; border-radius: 8px; background: #f2f5f9; }
.form-errors { margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; background: #fff0f0; color: #a51c30; font-size: 10px; }

.attachment-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.attachment > .attachment-actions { min-width: auto; margin-right: 0; }
.attachment-actions form { margin: 0; }

.login-simple { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at top, #fff 0, #f3f6fa 48%, #e9eef5 100%); }
.login-simple .login-form-wrap { width: min(440px, 100%); display: grid; gap: 22px; padding: 0; background: transparent; }
.login-page-brand { justify-self: center; color: var(--ink); }
.login-page-brand small { color: var(--muted); }
.login-simple .login-card { width: 100%; }
.login-card h1 { margin: 7px 0; font-size: 28px; letter-spacing: -.035em; }
.login-card button:disabled { cursor: not-allowed; opacity: .55; transform: none; }

@media (max-width: 1250px) {
  .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-overview { grid-template-columns: 1fr; }
  .invoice-list-header { display: none; }
  .invoice-list-row { grid-template-columns: minmax(220px, 1fr) repeat(2, auto); }
  .invoice-client { grid-column: 1; }
  .invoice-total { grid-column: 2; grid-row: 1; }
  .invoice-payment { grid-column: 3; grid-row: 1; }
  .invoice-association { grid-column: 2; grid-row: 2; }
  .invoice-actions { grid-column: 3; grid-row: 2; }
  .invoice-match-grid { grid-template-columns: 1fr; }
  .invoice-match-summary { position: static; }
}

@media (max-width: 650px) {
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-summary, .company-sync-summary { grid-template-columns: 1fr; }
  .dashboard-smartbill-actions > *, .dashboard-smartbill-actions form .button { width: 100%; }
  .export-orders-bar > strong { flex-basis: 100%; }
  .export-orders-bar label, .export-orders-bar input, .export-orders-bar .button { width: 100%; }
  .export-orders-bar label { display: grid; }
  .page-size-control { justify-content: center; flex-wrap: wrap; }
  .invoice-list-row { grid-template-columns: 1fr; gap: 8px; }
  .invoice-list-row > * { grid-column: 1; grid-row: auto; }
  .invoice-actions { justify-content: flex-start; }
  .invoice-match-search { grid-template-columns: 1fr; }
  .invoice-match-search > * { width: 100%; }
  .match-order-option { grid-template-columns: 20px minmax(0, 1fr); }
  .match-order-option > span { grid-column: 2; }
  .attachment { align-items: flex-start; flex-wrap: wrap; }
  .attachment-actions { width: 100%; justify-content: flex-start; }
  .login-simple { padding: 18px; }
  .login-simple .login-card { padding: 26px 22px; }
}