:root {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#1d302c;
  background:#f4f6f1;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  letter-spacing:-.04em
}
h2 {
  letter-spacing:-.03em
}
small,.muted {
  color:#72827b
}
.eyebrow {
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.15em;
  color:#6f9d38
}
.app-shell {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  min-height:100vh
}
.sidebar {
  display:flex;
  flex-direction:column;
  background:#142b29;
  color:#e8f0ea;
  padding:28px 18px
}
.brand {
  display:flex;
  gap:11px;
  align-items:center;
  padding:3px 12px 35px
}
.brand strong {
  display:block;
  font-size:1.08rem;
  letter-spacing:-.04em
}
.brand small {
  display:block;
  color:#9eb8ae;
  font-size:.59rem;
  letter-spacing:.12em;
  font-weight:800
}
.brand-mark {
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border-radius:11px;
  background:#d3f273;
  color:#17332a;
  font-weight:900;
  font-size:1.1rem
}
.brand-mark span {
  color:#6f9630
}
.sidebar nav {
  display:grid;
  gap:5px
}
.nav-item {
  border:0;
  background:transparent;
  color:#b8c9c0;
  text-align:left;
  padding:13px 15px;
  border-radius:10px;
  font-weight:650
}
.nav-item span {
  display:inline-block;
  width:28px;
  font-size:1.12rem
}
.nav-item:hover,.nav-item.active {
  background:#28443e;
  color:#fff
}
.sidebar-bottom {
  margin-top:auto;
  padding:18px 13px 4px;
  border-top:1px solid #355148;
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  font-size:.83rem
}
.text-button {
  border:0;
  background:none;
  color:#d3f273;
  font-size:.8rem;
  padding:0
}
.main-area {
  min-width:0
}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:30px 38px 25px;
  background:#fff;
  border-bottom:1px solid #e5ebe4
}
.topbar h1 {
  margin:3px 0 0;
  font-size:1.9rem
}
.header-actions {
  display:flex;
  gap:18px;
  align-items:center;
  color:#73847b;
  font-size:.84rem
}
.button {
  border:1px solid #dbe3d8;
  background:#fff;
  color:#264238;
  border-radius:9px;
  padding:10px 15px;
  font-weight:750
}
.button:hover {
  border-color:#83a359
}
@media(prefers-reduced-motion:no-preference) {
  .button { transition:border-color .15s,transform .15s }
  .button:hover { transform:translateY(-1px) }
}
:where(button,a,input,select,textarea):focus-visible {
  outline:3px solid #6c942f;
  outline-offset:2px
}
.button.primary {
  background:#bddf65;
  border-color:#bddf65;
  color:#1b3227
}
.button.ghost {
  background:transparent
}
.button.danger {
  color:#ad413b;
  border-color:#e5c7c2
}
.button.small {
  font-size:.75rem;
  padding:6px 10px
}
.content {
  padding:30px 38px 60px;
  max-width:1500px;
  margin:auto
}
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0 0 16px
}
.section-head h2 {
  margin:0;
  font-size:1.2rem
}
.section-head p {
  margin:5px 0 0;
  color:#75857d;
  font-size:.85rem
}
.panel {
  background:#fff;
  border:1px solid #e0e8df;
  border-radius:14px;
  box-shadow:0 5px 20px #1d39210a
}
.panel-pad {
  padding:22px
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:28px
}
.metric {
  padding:18px 20px
}
.metric span {
  color:#718278;
  font-size:.76rem;
  font-weight:700
}
.metric strong {
  display:block;
  font-size:1.7rem;
  letter-spacing:-.04em;
  margin-top:7px
}
.metric em {
  font-style:normal;
  color:#7a8b80;
  font-size:.76rem
}
.two-col {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:22px
}
.order-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid #e9eee8;
  align-items:center
}
.order-row:last-child {
  border-bottom:0
}
.order-row strong {
  font-size:.93rem
}
.order-row p {
  margin:5px 0 0;
  color:#77867d;
  font-size:.79rem
}
.order-row .actions {
  display:flex;
  gap:8px;
  align-items:center
}
.badge {
  display:inline-block;
  padding:5px 9px;
  border-radius:99px;
  background:#edf2e8;
  color:#426341;
  font-size:.71rem;
  font-weight:800;
  text-transform:capitalize
}
.badge.new {
  background:#eef1f4;
  color:#5c6d79
}
.badge.preparing {
  background:#fff1d7;
  color:#956c1c
}
.badge.ready {
  background:#e1f1df;
  color:#2e713c
}
.badge.cancelled {
  background:#f8e6e4;
  color:#a74c44
}
.badge.fulfilled {
  background:#e6e9e8;
  color:#58665f
}
.empty {
  padding:28px;
  color:#708078;
  text-align:center
}
.calendar-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px
}
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px
}
.weekday {
  text-align:center;
  color:#8a9990;
  font-weight:800;
  font-size:.65rem;
  text-transform:uppercase;
  padding:5px 0
}
.calendar-day {
  min-height:84px;
  border:1px solid #e2e9df;
  background:#fff;
  border-radius:8px;
  text-align:left;
  padding:8px;
  color:#253e34
}
.calendar-day:hover {
  border-color:#9bbd62
}
.calendar-day.today {
  border:2px solid #91b548
}
.calendar-day.selected {
  background:#eaf4d5
}
.calendar-day .number {
  font-size:.77rem;
  font-weight:750
}
.calendar-day .count {
  display:block;
  margin-top:9px;
  font-size:.71rem;
  color:#527634
}
.calendar-day.outside {
  opacity:.4
}
.filters {
  display:flex;
  gap:10px;
  align-items:end;
  flex-wrap:wrap;
  margin-bottom:18px
}
.filters label {
  font-size:.72rem;
  font-weight:800;
  color:#65766d
}
.filters input {
  display:block;
  margin-top:4px
}
.table-wrap {
  overflow-x:auto
}
.data-table {
  width:100%;
  border-collapse:collapse;
  font-size:.84rem
}
.data-table th {
  text-align:left;
  color:#819087;
  font-size:.68rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:14px 17px;
  border-bottom:1px solid #e7eee5
}
.data-table td {
  padding:14px 17px;
  border-bottom:1px solid #edf1eb
}
.data-table tr:last-child td {
  border-bottom:0
}
.data-table td strong {
  display:block
}
.data-table td small {
  display:block;
  margin-top:3px
}
.data-table tr:hover td {
  background:#fafcf8
}
select,input,textarea {
  border:1px solid #d9e2d8;
  background:#fff;
  border-radius:8px;
  padding:9px 10px;
  min-width:0;
  color:#253b31
}
select:focus,input:focus,textarea:focus {
  outline:2px solid #b6d878;
  outline-offset:1px
}
textarea {
  resize:vertical;
  min-height:70px
}
.status-select {
  width:126px;
  font-size:.74rem;
  padding:6px
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.form-grid label,.stack label {
  display:grid;
  gap:6px;
  font-size:.76rem;
  font-weight:750;
  color:#5c6f62
}
.form-grid label.full {
  grid-column:1/-1
}
.form-grid input,.form-grid select,.form-grid textarea {
  width:100%
}
.form-section {
  border-top:1px solid #e5ece3;
  margin-top:20px;
  padding-top:18px
}
.form-section h3 {
  font-size:.95rem;
  margin-bottom:13px
}
.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:24px
}
.item-line {
  display:grid;
  grid-template-columns:minmax(0,1fr) 85px 34px;
  gap:7px;
  margin-bottom:8px
}
.item-line button {
  border:0;
  background:#f0f3ee;
  border-radius:7px;
  color:#64776b;
  font-size:1.1rem
}
.catalog-tabs {
  display:flex;
  gap:8px;
  margin-bottom:18px
}
.catalog-tabs button.active {
  background:#d9eab9;
  border-color:#bfd48c
}
.toast {
  position:fixed;
  right:25px;
  bottom:25px;
  z-index:3;
  padding:12px 18px;
  background:#1d4036;
  color:#fff;
  border-radius:9px;
  box-shadow:0 10px 30px #1a3d2a33
}
.toast.error {
  background:#9a403b
}
dialog {
  border:0;
  border-radius:16px;
  width:min(680px,calc(100vw - 28px));
  max-height:88vh;
  overflow:auto;
  padding:0;
  box-shadow:0 20px 70px #13282166
}
dialog::backdrop {
  background:#122c2888
}
.dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:start;
  padding:24px 28px 18px;
  border-bottom:1px solid #e4ebe3
}
.dialog-head h2 {
  font-size:1.35rem;
  margin:4px 0 0
}
.icon-button {
  border:0;
  background:#f1f4ee;
  border-radius:8px;
  font-size:1.4rem;
  width:34px;
  height:34px
}
.dialog-content {
  padding:24px 28px 28px
}
.login-shell {
  min-height:100vh;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 15% 10%,#365e43,#142b29 55%)
}
.login-shell[hidden],.app-shell[hidden] {
  display:none
}
.login-card {
  width:min(420px,calc(100vw - 32px));
  background:#fff;
  border-radius:18px;
  padding:34px;
  box-shadow:0 20px 70px #0c261955
}
.login-card h1 {
  font-size:1.7rem;
  margin:8px 0
}
.login-card p {
  color:#738279;
  font-size:.88rem;
  line-height:1.5
}
.login-card label {
  display:grid;
  gap:6px;
  margin:16px 0;
  font-weight:750;
  font-size:.76rem
}
.login-card input {
  width:100%
}
.login-card button {
  width:100%;
  margin-top:9px
}
.login-card .error {
  color:#a84035;
  min-height:1em
}
.notice {
  padding:12px 15px;
  border-radius:8px;
  background:#f3f7eb;
  color:#527039;
  font-size:.8rem;
  margin-bottom:16px
}
@media(max-width:900px) {
  .app-shell {
    grid-template-columns:1fr
  }
  .sidebar {
    padding:12px 18px
  }
  .brand {
    padding:0 0 10px
  }
  .sidebar nav {
    display:flex;
    overflow-x:auto
  }
  .nav-item {
    white-space:nowrap
  }
  .sidebar-bottom {
    display:none
  }
  .topbar {
    padding:20px
  }
  .content {
    padding:20px
  }
  .two-col {
    grid-template-columns:1fr
  }
  .metrics {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:560px) {
  .topbar {
    align-items:start
  }
  .topbar h1 {
    font-size:1.45rem
  }
  .header-actions {
    display:grid;
    justify-items:end;
    gap:8px
  }
  .metrics {
    grid-template-columns:repeat(2,1fr)
  }
  .metric {
    padding:13px
  }
  .metric strong {
    font-size:1.35rem
  }
  .calendar-day {
    min-height:65px;
    padding:5px
  }
  .calendar-day .count {
    font-size:.6rem
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .form-grid label.full {
    grid-column:auto
  }
}

/* Product workspace */
.catalog-product { display:flex; align-items:center; gap:11px; min-width:220px }
.catalog-product img,.catalog-placeholder { width:46px; height:46px; border-radius:9px; object-fit:cover; flex:none }
.catalog-placeholder { display:grid; place-items:center; background:#e3ecd8; color:#48683c; font-weight:900 }
.wide-editor { width:min(1180px,calc(100vw - 28px)) }
.product-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:22px }
.product-main,.product-aside { min-width:0 }
.editor-section { border:1px solid #e0e8df; border-radius:12px; padding:18px; margin-bottom:16px; background:#fff }
.editor-section h3 { margin:0 0 15px; font-size:1rem }
.editor-section p { font-size:.81rem; line-height:1.5 }
.product-aside label { display:grid; gap:6px; margin:13px 0; font-size:.77rem; font-weight:750; color:#5c6f62 }
.product-aside input,.product-aside select { width:100% }
.toggle-row { display:flex!important; align-items:center; justify-content:space-between; gap:12px }
.toggle-row input { width:20px!important; height:20px; accent-color:#7ea83d }
.product-images { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px }
.product-image { width:132px; border:1px solid #dce5d9; border-radius:10px; overflow:hidden }
.product-image img { width:100%; height:100px; object-fit:cover; display:block }
.product-image button { width:100%; border-radius:0 }
.file-label { display:grid; gap:7px; color:#5c6f62; font-size:.78rem; font-weight:750 }
.variation-card { border:1px solid #dce6d8; border-radius:10px; margin:12px 0; padding:14px }
.variation-card-head,.inline-actions { display:flex; align-items:center; justify-content:space-between; gap:10px }
.variation-card-head small { display:block; margin-top:3px }
.variation-limits { display:flex; gap:12px; margin:12px 0 }
.variation-limits label { font-size:.72rem; font-weight:750; color:#5c6f62 }
.variation-limits input { display:block; width:90px; margin-top:4px }
.no-default { display:flex; align-items:center; gap:6px; font-size:.77rem; margin-bottom:8px }
.variation-option { display:grid; grid-template-columns:minmax(130px,1fr) 125px 65px; align-items:center; gap:9px; padding:8px 0; border-top:1px solid #e8eee6 }
.variation-option label { display:flex; align-items:center; gap:6px; font-size:.77rem }
.variation-option label:nth-child(2) { display:grid; gap:3px }
.variation-option input[type=checkbox],.variation-option input[type=radio] { width:17px; height:17px; accent-color:#7ea83d }
.variation-option .variation-price { width:100% }
.inline-actions { justify-content:flex-start; margin-top:12px }
.inline-actions select { max-width:250px }
.template-option { display:grid; grid-template-columns:minmax(140px,1fr) 100px 100px auto; gap:8px; margin:8px 0 }
.nutrition-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
.order-item-line { border:1px solid #e0e8df; border-radius:10px; padding:12px; margin-bottom:12px; background:#fbfcf8 }
.item-variations { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px }
.item-variations label { display:grid; gap:4px; font-size:.74rem; font-weight:700 }
.item-variations fieldset { border:1px solid #dce5d8; border-radius:8px; display:grid; gap:5px }
.item-variations fieldset label { display:flex; align-items:center }
.item-price-preview { grid-column:1/-1; justify-self:end; font-weight:800 }
.order-total-preview { margin:12px 0 0; text-align:right; font-weight:850 }
.login-theme-button { position:absolute; top:20px; right:20px }

/* Keep secondary copy legible on the light surfaces. */
small,.muted,.section-head p,.metric span,.metric em,.order-row p,.data-table th,.empty,.weekday,.filters label,.login-card p,.header-actions { color:#586a5f }
.eyebrow { color:#4c7422 }

/* Staff-selectable dark theme */
:root[data-theme="dark"] { color-scheme:dark; color:#e6f0e9; background:#101b19 }
:root[data-theme="dark"] body,:root[data-theme="dark"] .main-area { background:#101b19 }
:root[data-theme="dark"] .sidebar { background:#0b1715 }
:root[data-theme="dark"] .sidebar-bottom { border-color:#294039 }
:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .panel,:root[data-theme="dark"] dialog,:root[data-theme="dark"] .login-card,:root[data-theme="dark"] .editor-section { background:#192723; color:#e6f0e9; border-color:#30443b }
:root[data-theme="dark"] .order-item-line,:root[data-theme="dark"] .variation-card { background:#1d2d27; border-color:#384c3f }
:root[data-theme="dark"] .calendar-day,:root[data-theme="dark"] .button:not(.primary),:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea { background:#20332c; color:#e6f0e9; border-color:#3c5748 }
:root[data-theme="dark"] .calendar-day.selected,:root[data-theme="dark"] .catalog-tabs button.active { background:#35512d }
:root[data-theme="dark"] .item-line button,:root[data-theme="dark"] .icon-button { background:#2b4137; color:#e6f0e9 }
:root[data-theme="dark"] .data-table th,:root[data-theme="dark"] .data-table td,:root[data-theme="dark"] .order-row,:root[data-theme="dark"] .dialog-head,:root[data-theme="dark"] .form-section,:root[data-theme="dark"] .variation-option { border-color:#30443b }
:root[data-theme="dark"] .data-table tr:hover td { background:#22352c }
:root[data-theme="dark"] small,:root[data-theme="dark"] .muted,:root[data-theme="dark"] .section-head p,:root[data-theme="dark"] .metric span,:root[data-theme="dark"] .metric em,:root[data-theme="dark"] .order-row p,:root[data-theme="dark"] .data-table th,:root[data-theme="dark"] .form-grid label,:root[data-theme="dark"] .product-aside label,:root[data-theme="dark"] .file-label,:root[data-theme="dark"] .variation-limits label { color:#a3baac }
:root[data-theme="dark"] .badge { background:#2d4437; color:#d6efc6 }
:root[data-theme="dark"] .badge.new { background:#2b3b46; color:#c8d6e0 }
:root[data-theme="dark"] .badge.preparing { background:#4b3b23; color:#ffe0a1 }
:root[data-theme="dark"] .badge.cancelled { background:#4b2f2f; color:#ffb6ac }
:root[data-theme="dark"] .notice { background:#2b432b; color:#d0eeb5 }
:root[data-theme="dark"] .login-shell { background:radial-gradient(circle at 15% 10%,#274b38,#091612 60%) }
:root[data-theme="dark"] .login-card p { color:#a3baac }
:root[data-theme="dark"] .catalog-placeholder { background:#314632; color:#d5eeb7 }
:root[data-theme="dark"] :where(button,a,input,select,textarea):focus-visible { outline-color:#bddf65 }

@media(max-width:900px) { .product-layout { grid-template-columns:1fr } .nutrition-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:560px) { .variation-option { grid-template-columns:1fr 95px 58px } .template-option { grid-template-columns:1fr 1fr } .item-variations { grid-template-columns:1fr } .nutrition-grid { grid-template-columns:1fr } }