:root { --paper: #f7fafc; --ink: #102a43; --muted: #627d98; --rule: #d9e2ec; --surface: #fff; --blue: #146cbb; --blue-dark: #0b4f8a; --veg: #157347; --veg-bg: #e5f6ed; --nonveg: #b42318; --nonveg-bg: #ffebe9; --warn: #8a5a00; --warn-bg: #fff5d6; --focus: #1864ab; --shadow: 0 10px 30px rgb(16 42 67 / 8%); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; overflow-x: clip; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.45 "DM Sans", system-ui, sans-serif; }
button, input, select { font: inherit; } button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 100% 0%, #dceeff 0, transparent 32rem), var(--paper); }
.login-card { width: min(100%, 380px); padding: 28px; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); }
.eyebrow { margin: 0 0 4px; color: var(--blue); font: 700 .76rem/1 "Space Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: "Space Grotesk", sans-serif; line-height: 1.1; letter-spacing: -.025em; }
.login-card h1 { font-size: clamp(2rem, 10vw, 2.8rem); } .login-card > p:not(.eyebrow) { color: var(--muted); margin: 12px 0 24px; }
label { display: block; margin: 16px 0 6px; font-weight: 700; font-size: .9rem; }
input, select { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.primary-button, .refresh-button { min-height: 46px; border: 0; border-radius: 8px; padding: 10px 16px; color: #fff; background: var(--blue); font-weight: 700; } .primary-button { width: 100%; margin-top: 20px; } .primary-button:hover, .refresh-button:hover { background: var(--blue-dark); }
.form-error { min-height: 1.3em; margin: 10px 0 0; color: var(--nonveg); font-size: .9rem; }
.app-shell { width: min(100% - 24px, 900px); margin: 0 auto; padding: 18px 0 48px; }
.topbar, .date-strip, .section-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .topbar { padding: 8px 0 20px; } .topbar h1 { font-size: clamp(1.7rem, 7vw, 2.25rem); }
.text-button, .icon-button, .edit-button, .meal-tab { min-height: 44px; border: 0; background: transparent; color: var(--blue); font-weight: 700; }
.icon-button { width: 44px; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); font-size: 1.8rem; line-height: 1; }
.date-strip { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; padding: 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.date-control { margin: 0; min-width: 0; } .date-control span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: var(--muted); } .date-control input { min-height: auto; padding: 1px 0 0; border: 0; font-weight: 700; }
.refresh-button { min-height: 40px; padding-inline: 12px; } .sync-status { min-height: 1.4em; margin: 12px 2px; color: var(--muted); font-size: .85rem; } .sync-status[data-tone="success"] { color: var(--veg); } .sync-status[data-tone="error"] { color: var(--nonveg); font-weight: 700; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .meal-card, .destination-group { overflow: hidden; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); }
.meal-card-heading { display: flex; justify-content: space-between; gap: 8px; padding: 14px 14px 8px; } .meal-card-heading h2 { font-size: 1.12rem; } .meal-card-heading span { color: var(--muted); font-size: .75rem; text-align: right; }
.meal-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 10px 16px; text-align: center; } .meal-counts strong { display: block; font: 700 clamp(1.8rem, 9vw, 2.7rem)/1 "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; } .meal-counts span { color: var(--muted); font-size: .78rem; }
.veg { color: var(--veg); } .nonveg { color: var(--nonveg); } .specials { padding: 10px 14px; border-top: 1px solid var(--rule); color: var(--warn); background: var(--warn-bg); font-size: .8rem; } .specials > span { font-weight: 700; } .specials ul { margin: 4px 0 0; padding-left: 16px; }
.warnings { margin: 14px 0; } .warnings details { padding: 12px 14px; border-radius: 10px; color: var(--warn); background: var(--warn-bg); font-size: .9rem; } .warnings summary { cursor: pointer; font-weight: 700; } .warnings ul { margin: 8px 0 0; padding-left: 20px; }
#delivery-section { margin-top: 28px; } .section-topline { margin-bottom: 12px; } .section-topline h2 { font-size: 1.35rem; } .meal-tabs { display: inline-flex; padding: 3px; border: 1px solid var(--rule); border-radius: 9px; background: var(--surface); } .meal-tab { min-height: 36px; padding: 6px 10px; border-radius: 6px; font-size: .85rem; } .meal-tab.active { color: #fff; background: var(--blue); }
.destination-group { margin: 12px 0; } .destination-group header { padding: 14px; border-bottom: 1px solid var(--rule); } .destination-group h3 { font-size: 1.12rem; } .destination-group p { margin: 4px 0 0; color: var(--muted); font-size: .85rem; } .destination-group ol { margin: 0; padding: 0; list-style: none; }
.delivery-entry { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; border-bottom: 1px solid var(--rule); } .delivery-entry:last-child { border-bottom: 0; } .diet { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--veg-bg); font-weight: 700; font-size: .82rem; } .diet.nonveg { background: var(--nonveg-bg); }
.delivery-name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; } .delivery-name small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; } .delivery-name .override-note { color: var(--blue); } .edit-button { padding: 4px 0 4px 8px; font-size: .8rem; } .empty-state { padding: 28px 14px; color: var(--muted); text-align: center; }
dialog { width: min(calc(100% - 32px), 430px); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 24px 80px rgb(16 42 67 / 28%); } dialog::backdrop { background: rgb(16 42 67 / 45%); } .override-form { padding: 20px; } .dialog-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; } .dialog-title-row .icon-button { flex: 0 0 auto; }
@media (max-width: 420px) { .app-shell { width: min(100% - 16px, 900px); } .date-strip { grid-template-columns: 40px minmax(0, 1fr) 40px; } .icon-button { width: 40px; min-height: 40px; } .refresh-button { grid-column: 1 / -1; width: 100%; } .summary-grid { grid-template-columns: 1fr; } }
@media (min-width: 640px) { .app-shell { padding-top: 32px; } .summary-grid { gap: 16px; } .meal-card-heading { padding: 18px 18px 10px; } .meal-counts { padding: 12px 18px 20px; } }