:root { color-scheme: light; font-family: var(--font-sans); color: var(--color-ink); background: var(--color-canvas); }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, .button { min-height: var(--control-height); border: 1px solid var(--color-border-strong); border-radius: 6px; padding: 10px 16px; background: var(--color-surface); cursor: pointer; font: inherit; display: inline-flex; align-items: center; justify-content: center; }
.primary { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.topbar { min-height: 68px; padding: 0 28px; background: #153c66; color: white; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 20px; font-weight: 700; }
.topbar nav { display: flex; align-items: center; gap: 20px; }
.topbar form { margin: 0; }
.topbar button { color: #153c66; padding: 7px 11px; }
.page { max-width: 1500px; margin: 0 auto; padding: 32px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
h1 { margin: 0 0 8px; }
p { margin: 0; color: #60738b; }
.filter-bar, .order-form, .login-card, .table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.filter-bar { display: flex; gap: 12px; align-items: end; padding: 16px; margin-bottom: 18px; }
input, select, textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--color-border-strong); border-radius: 6px; font: inherit; background: var(--color-surface); }
#customer-search { margin-bottom: 7px; background: #f7faff; }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; }
th { background: #e7eff8; color: #153c66; text-align: center; }
th, td { padding: 11px 12px; border-bottom: 1px solid #e1e7ef; }
td { text-align: center; }
.empty { padding: 40px; color: #7a899b; }
.small { padding: 6px 9px; font-size: 13px; }
.danger { color: #a11b2d; border-color: #e2a6ad; }
.row-actions { display: flex; justify-content: center; gap: 6px; }
.row-actions form { margin: 0; }
.order-form { padding: 0; overflow: hidden; }
.page-eyebrow { display: block; margin-bottom: 4px; color: var(--color-primary); font-size: 13px; font-weight: 800; }
.order-form-sections { display: grid; }
.order-form-section { padding: 24px; border-bottom: 1px solid var(--color-border); }
.order-form-section > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.order-form-section > header > span { flex: 0 0 30px; display: inline-grid; height: 30px; place-items: center; border-radius: 50%; background: var(--color-primary); color: white; font-size: 13px; font-weight: 800; }
.order-form-section h2 { margin: 0; color: #233d57; font-size: 19px; }
.order-form-section header p { margin-top: 2px; font-size: 13px; }
.customer-alias-field input[readonly] { border-color: #a9cce0; background: var(--color-primary-soft); color: var(--color-primary-hover); font-weight: 700; cursor: default; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.field label { display: block; font-weight: 700; margin-bottom: 7px; }
.field-help { display: block; margin-top: 4px; color: var(--color-muted); font-size: 13px; }
.notes-grid .field { grid-column: span 3; }
.form-errors { margin: 20px 24px 0; padding: 12px 14px; border-left: 4px solid var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger); }
.form-errors ul { margin: 0; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 0; padding: 20px 24px; background: var(--color-surface-soft); }
.login-card { max-width: 440px; padding: 32px; margin: 70px auto; }
.login-card h1 { margin-bottom: 24px; }
.history-card { margin-top: 28px; }
.history-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.history-heading h2 { margin: 0; }
.history-heading small { color: var(--color-muted); }
.history-events { display: grid; gap: 14px; }
.history-event { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.history-event > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); }
.history-event > header span { color: var(--color-muted); font-size: 13px; }
.history-event .table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.history-diff-table th[scope="row"] { width: 25%; background: white; color: var(--color-ink); text-align: left; }
.history-diff-table td { width: 37.5%; text-align: left; }
.history-diff-table .history-after { color: var(--color-primary-hover); font-weight: 700; }
.history-empty { padding: 28px; border: 1px solid var(--color-border); background: var(--color-surface); text-align: center; }
.wallboard-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.wallboard-heading form { display: flex; gap: 8px; }
.driver-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.driver-card { background: white; border: 2px solid #194b7a; border-radius: 9px; overflow: hidden; }
.driver-card > header { padding: 9px 12px; color: white; background: #194b7a; display: flex; justify-content: space-between; align-items: center; }
.driver-card h2 { margin: 0; font-size: 17px; }
.driver-card table { font-size: 12px; }
.driver-card th, .driver-card td { padding: 5px 6px; }
.driver-card .left { text-align: left; }
.driver-card td small { display: block; margin-top: 2px; color: #6c7f93; font-size: 10px; font-weight: 400; }
.driver-card footer { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 7px; background: #e7eff8; font-size: 14px; }
.qty { border-left: 1px solid rgb(83 101 121 / 18%); text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
th.qty-seven { background: var(--qty-seven-head) !important; color: var(--color-ink); }
td.qty-seven { background: var(--qty-seven-cell) !important; }
th.qty-eight { background: var(--qty-eight-head) !important; color: var(--color-ink); }
td.qty-eight { background: var(--qty-eight-cell) !important; }
th.qty-nine { background: var(--qty-nine-head) !important; color: var(--color-ink); }
td.qty-nine { background: var(--qty-nine-cell) !important; }
th.qty-ten { background: var(--qty-ten-head) !important; color: var(--color-ink); }
td.qty-ten { background: var(--qty-ten-cell) !important; }
th.qty-buffet { background: var(--qty-buffet-head) !important; color: var(--color-ink); }
td.qty-buffet { background: var(--qty-buffet-cell) !important; }
th.qty-rice { background: var(--qty-rice-head) !important; color: var(--color-ink); }
td.qty-rice { background: var(--qty-rice-cell) !important; }
th.qty-side { background: var(--qty-side-head) !important; color: var(--color-ink); }
td.qty-side { background: var(--qty-side-cell) !important; }
.no-order-row td:not(.qty) { color: #566879; background: #fafbfc; }
.compact { padding: 15px; }
body:has(.wallboard-page) .page { max-width: none; padding: 16px; }
.kitchen-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.kitchen-heading .screen-only, .kitchen-heading form { display: flex; gap: 8px; }
.kitchen-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.kitchen-cards article { min-height: 180px; background: white; border: 2px solid #194b7a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kitchen-cards span { font-size: 28px; font-weight: 700; }
.kitchen-cards strong { color: #194b7a; font-size: 58px; margin-top: 18px; }
.kitchen-cards small { color: #7a899b; }
.driver-statement { background: white; border: 1px solid #8095ad; margin: 0 auto 24px; padding: 18px; max-width: 1100px; }
.driver-statement header h2 { margin: 0 0 8px; text-align: center; }
.driver-statement header div { display: flex; justify-content: space-between; }
.driver-statement header p { margin: 10px 0; text-align: center; color: #183153; font-weight: 700; }
.driver-statement-total { font-size: 18px; }
.driver-statement .left { text-align: left; }
.driver-statement th, .driver-statement td { padding: 7px 8px; font-size: 13px; }
.output-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.output-card { background: white; border: 1px solid #d9e1ea; border-radius: 12px; padding: 22px; }
.output-card h2 { margin: 0 0 8px; }
.output-card p { min-height: 46px; }
.output-card form { display: grid; gap: 12px; margin-top: 18px; }
.pending-action { margin-top: 18px; padding: 12px; background: #fff3df; color: #8a5300; border-radius: 8px; }
.left { text-align: left; }
.draft-warning { margin-bottom: 18px; padding: 14px 16px; border: 1px solid #e4a851; background: #fff3df; color: #754600; }
.monthly-sheet { background: white; border: 1px solid #8095ad; padding: 22px; }
.monthly-sheet header h2 { text-align: center; margin: 0 0 12px; }
.monthly-sheet header div { display: flex; justify-content: space-between; margin-bottom: 14px; }
.driver-mobile-body { min-height: 100vh; background: #eef3f8; }
.driver-mobile-page { width: min(100%, 760px); margin: 0 auto; padding: 18px; }
.driver-mobile-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.driver-mobile-header p { color: #60738b; font-size: 13px; margin-bottom: 3px; }
.driver-mobile-header h1 { color: #123d68; font-size: 28px; margin: 0; }
.driver-mobile-header form { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.driver-mobile-header label { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: #60738b; }
.driver-mobile-header input, .driver-mobile-header button { min-height: 44px; }
.driver-mobile-totals { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; margin-bottom: 14px; background: #153c66; color: white; border-radius: 14px; box-shadow: 0 7px 20px rgba(16, 49, 83, .2); }
.driver-mobile-totals strong { grid-column: 1 / -1; font-size: 20px; }
.driver-mobile-totals span { padding: 8px 6px; text-align: center; background: rgba(255, 255, 255, .12); border-radius: 8px; font-weight: 700; }
.driver-mobile-orders { display: grid; gap: 12px; }
.driver-mobile-order { padding: 16px; background: white; border: 1px solid #d5dee9; border-left: 6px solid #194b7a; border-radius: 12px; box-shadow: 0 4px 14px rgba(25, 75, 122, .08); }
.driver-mobile-order > header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.driver-mobile-order > header strong { color: #194b7a; }
.driver-mobile-order > header span { text-align: right; font-size: 17px; font-weight: 800; }
.driver-mobile-order > header span small { display: block; color: #6c7f93; font-size: 12px; font-weight: 500; }
.driver-mobile-order h2 { margin: 14px 0 10px; font-size: 18px; color: #243d59; }
.mobile-quantities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mobile-quantities span { padding: 9px 5px; background: #edf3f9; border-radius: 7px; text-align: center; font-weight: 700; }
.mobile-request { margin-top: 12px; padding: 11px; background: #fff3df; color: #754600; border-radius: 8px; }
.driver-mobile-empty { padding: 42px 18px; text-align: center; background: white; border-radius: 12px; }
.driver-mobile-footer { padding: 16px 0 6px; color: #6c7f93; text-align: center; font-size: 12px; }
.driver-mobile-summary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; border: 1px solid #9eb7cc; border-radius: 6px 6px 0 0; background: #153c66; color: white; font-size: 14px; font-weight: 800; }
.driver-mobile-summary strong { font-size: 17px; }
.driver-mobile-sheet { overflow: hidden; border: 1px solid #9eb7cc; border-top: 0; background: white; }
.mobile-route-table { width: 100%; table-layout: fixed; font-size: 10px; line-height: 1.25; }
.mobile-route-table .mobile-order-col { width: 8%; }
.mobile-route-table .mobile-customer-col { width: 36%; }
.mobile-route-table .mobile-qty-col { width: 8%; }
.mobile-route-table th, .mobile-route-table td { padding: 5px 2px; word-break: keep-all; }
.mobile-route-table th { font-size: 9px; letter-spacing: -.5px; }
.mobile-route-table .mobile-customer { padding: 6px 5px; text-align: left; word-break: break-word; }
.mobile-customer strong, .mobile-customer small, .mobile-customer em { display: block; }
.mobile-customer strong { color: var(--color-ink); font-size: 11px; }
.mobile-customer small { margin-top: 2px; color: var(--color-muted); }
.mobile-customer em { margin-top: 3px; color: var(--color-warning); font-style: normal; font-weight: 700; }
.copy-status { min-height: 24px; margin: 10px 0 0; color: var(--color-primary-hover); font-size: 13px; text-align: right; }
@media print { .topbar, .screen-only { display: none !important; }.page { max-width: none; padding: 0; }.kitchen-page { page: kitchen; }.kitchen-cards { gap: 12mm; }.kitchen-cards article { break-inside: avoid; box-shadow: none; }.driver-statement { page: driver-statement; border: 0; margin: 0; padding: 0; break-after: page; }.driver-statement:last-of-type { break-after: auto; }.monthly-statement-page { page: monthly-statement; }.monthly-sheet { border: 0; padding: 0; }.draft-warning { break-inside: avoid; } @page kitchen { size: A4 portrait; margin: 12mm; } @page driver-statement { size: A4 landscape; margin: 9mm; } @page monthly-statement { size: A4 landscape; margin: 10mm; } }
@media (max-width: 900px) { .topbar { align-items: flex-start; padding: 18px; flex-direction: column; }.topbar nav { flex-wrap: wrap; }.page { padding: 18px; }.form-grid { grid-template-columns: 1fr; }.notes-grid .field { grid-column: auto; }.order-form-section { padding: 20px 16px; }.form-actions { position: sticky; bottom: 0; z-index: 2; padding: 14px 16px; }.history-heading, .history-event > header { align-items: flex-start; flex-direction: column; gap: 4px; } }
@media (max-width: 520px) { .driver-mobile-page { padding: 12px; }.driver-mobile-header { align-items: stretch; flex-direction: column; }.driver-mobile-header h1 { font-size: 25px; }.driver-mobile-totals { grid-template-columns: repeat(2, 1fr); }.mobile-quantities { grid-template-columns: repeat(2, 1fr); }.driver-mobile-order > header { align-items: flex-start; flex-direction: column; }.driver-mobile-order > header span { text-align: left; } }

@media print {
  .driver-statement {
    width: 100%;
    max-width: none;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }
  .driver-statement header h2 { margin-bottom: 3px; font-size: 18px; }
  .driver-statement header div { font-size: 11px; }
  .driver-statement-total { margin: 4px 0 !important; font-size: 14px; }
  .driver-statement th, .driver-statement td { padding: 3px 4px; font-size: 9px; line-height: 1.15; }
  .driver-statement th:nth-child(1) { width: 4%; }
  .driver-statement th:nth-child(2) { width: 17%; }
  .driver-statement th:nth-child(3) { width: 16%; }
  .driver-statement th:last-child { width: 20%; }
}