:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-soft: #fbfbfd;
  --line: #d2d2d7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --accent: #0071e3;
  --accent-dark: #0066cc;
  --warn: #bf5b00;
  --danger: #d70015;
  --ok: #248a3d;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.import-upload-panel {
  display: grid;
  gap: 14px;
}

.menu-preview-table th,
.menu-preview-table td {
  vertical-align: top;
  min-width: 120px;
}

.menu-preview-table th:first-child,
.menu-preview-table td:first-child {
  min-width: 96px;
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

.auth-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-pill {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.auth-pill.warning {
  color: var(--warn);
  border-color: rgba(191, 91, 0, 0.28);
  background: rgba(191, 91, 0, 0.08);
}

.auth-dev {
  color: var(--warn);
}

.login-view {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
}

.login-card {
  width: min(520px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}

.login-card h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.login-card p {
  color: var(--muted);
  margin: 0 0 18px;
}

.login-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.password-login-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.password-login-form .field {
  margin: 0;
}

.password-login-form input {
  min-height: 44px;
  font-size: 16px;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.muted {
  color: var(--muted);
}

.alert.danger {
  color: var(--danger);
  background: rgba(215, 0, 21, 0.08);
  border: 1px solid rgba(215, 0, 21, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
}

.compact-settings {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.8fr) 150px auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

@media (max-width: 980px) {
  .compact-settings {
    grid-template-columns: 1fr 1fr;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    "Microsoft JhengHei",
    "PingFang HK",
    "Noto Sans TC",
    sans-serif;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: saturate(180%) blur(20px);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 800;
}

.brand h1 {
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

.brand p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.nav {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.nav-btn,
.ghost-btn,
.primary-btn,
.icon-btn {
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.nav-btn {
  text-align: left;
  padding: 12px 14px;
  color: var(--ink);
  background: transparent;
}

.nav-btn:hover,
.nav-btn.active {
  background: rgba(0, 113, 227, 0.1);
  color: var(--accent-dark);
}

.sidebar-footer {
  margin-top: auto;
}

.content {
  padding: 24px;
  min-width: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
}

.eyebrow {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 4px;
}

h2,
h3 {
  margin: 0;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
}

h3 {
  font-size: 18px;
}

.top-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.field {
  display: grid;
  gap: 6px;
}

.field span,
.check-field span {
  color: var(--muted);
  font-size: 13px;
}

.field input,
.field select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 10px;
}

.field.compact select {
  min-width: 120px;
}

.primary-btn {
  min-height: 38px;
  background: var(--accent);
  color: white;
  padding: 8px 14px;
  font-weight: 600;
}

.primary-btn:hover {
  background: var(--accent-dark);
}

.kitchen-print-actions {
  display: flex;
  justify-content: flex-end;
}

.print-title {
  display: none;
}

.ghost-btn {
  min-height: 38px;
  padding: 8px 14px;
  background: #fafafc;
  color: var(--ink);
  border: 1px solid var(--line);
}

.sidebar .ghost-btn {
  width: 100%;
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.view {
  display: none;
}

.view.active {
  display: grid;
  gap: 18px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 14px;
}

.rule-banner {
  border: 1px solid #c7ddf7;
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  background: #f0f7ff;
  color: #1d1d1f;
}

.compact-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  padding: 14px;
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.kpi .label {
  color: var(--muted);
  font-size: 13px;
}

.kpi .value {
  font-size: 28px;
  font-weight: 700;
  margin-top: 8px;
}

.chef-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.chef-hero-card {
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 18px;
  box-shadow: var(--shadow);
}

.chef-tone-summary {
  background: #f5f5f7;
}

.chef-tone-dish {
  background: #f7fbff;
  border-color: #b8d9ff;
}

.chef-tone-staple {
  background: #f0f8ef;
  border-color: #b9ddb5;
}

.chef-tone-restriction {
  background: #f6efe4;
  border-color: #dfc8a8;
}

.chef-tone-adjustment {
  background: #fff4e5;
  border-color: #f1c47a;
}

.chef-hero-label,
.chef-card-label,
.chef-hero-note,
.chef-card-note {
  color: var(--muted);
}

.chef-hero-label {
  font-size: 18px;
  font-weight: 700;
}

.chef-hero-value {
  font-size: 64px;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.chef-hero-note {
  font-size: 15px;
}

.chef-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.chef-panel .panel-head {
  min-height: 64px;
  align-items: start;
}

.chef-panel h3 {
  font-size: 24px;
  line-height: 1.15;
  text-align: left;
}

.chef-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 16px;
}

.chef-card {
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfd;
  padding: 16px;
  min-width: 0;
}

.chef-card-label {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.chef-card-value {
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.chef-pair {
  display: grid;
  gap: 4px;
  align-items: start;
  justify-items: start;
  line-height: 1.05;
  text-align: left;
}

.chef-pair span {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

table.production-table td .chef-pair,
table.production-table td .mini-row {
  justify-items: start;
  align-items: start;
}

table.production-table td .chef-pair span {
  text-align: left;
}

.chef-card-note {
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.chef-version-card {
  align-content: start;
}

.chef-breakdown {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  align-items: start;
}

.mini-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 15px;
  min-width: 0;
}

.mini-row strong {
  color: var(--ink);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.chef-empty {
  display: grid;
  place-items: center;
  min-height: 132px;
  color: var(--muted);
  font-size: 20px;
  padding: 18px;
}

.chef-chart-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 18px;
}

.chef-stack-block {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfd;
  padding: 16px;
}

.chef-stack-block h4 {
  margin: 0;
  font-size: 20px;
}

.chef-stack-table {
  display: grid;
  gap: 12px;
}

.chef-stack-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: start;
}

.chef-stack-floor {
  display: grid;
  align-items: start;
  justify-items: center;
  border-radius: 8px;
  background: #e8f2ff;
  color: #005bb5;
  font-size: 20px;
  font-weight: 800;
}

.chef-stack-floor.floor-gf {
  background: #fff2cc;
  color: #8a5a00;
}

.chef-stack-floor.floor-ug {
  background: #dff4df;
  color: #216e34;
}

.chef-stack-floor.floor-onef {
  background: #dbeafe;
  color: #185abc;
}

.chef-stack-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
}

.chef-stack-item {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  min-width: 0;
}

.chef-stack-item span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.chef-stack-item strong {
  align-self: start;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.chef-matrix-block {
  grid-column: span 2;
}

.chef-matrix-row {
  grid-template-columns: 64px 1fr;
  align-items: start;
}

.chef-matrix-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.chef-matrix-item {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  min-width: 0;
}

.chef-matrix-form {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.chef-matrix-versions {
  display: grid;
  gap: 6px;
}

.chef-matrix-version {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  color: var(--muted);
  font-size: 14px;
  min-width: 0;
}

.chef-matrix-version strong {
  color: var(--ink);
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: left;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.chef-stack-empty {
  display: grid;
  place-items: center;
  min-height: 76px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  font-size: 15px;
}

.chef-chart-block {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfd;
  padding: 16px;
}

.chef-chart-block h4 {
  margin: 0;
  font-size: 20px;
}

.chef-bar-row {
  display: grid;
  grid-template-columns: 56px minmax(120px, 1fr) 54px;
  gap: 10px;
  align-items: center;
}

.chef-bar-label {
  font-size: 18px;
  font-weight: 700;
}

.chef-bar-track {
  height: 24px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e8ed;
}

.chef-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.chef-bar-value {
  text-align: right;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-head {
  min-height: 58px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #fbfbfd;
}

.resident-controls {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.table-wrap {
  overflow: auto;
}

#residentTable {
  max-height: calc(100vh - 260px);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th {
  background: #f5f5f7;
  color: #1d1d1f;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}

td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.production-table th:not(:first-child),
table.production-table td:not(:first-child) {
  text-align: left;
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

table.production-table th:first-child,
table.production-table td:first-child {
  text-align: left;
  vertical-align: top;
}

table.kitchen-large-table th {
  font-size: 28px;
  line-height: 1.15;
  padding: 14px 16px;
}

table.kitchen-large-table td {
  font-size: 48px;
  line-height: 1.05;
  font-weight: 700;
  padding: 16px;
}

table.kitchen-large-table td .chef-pair span {
  font-size: 32px;
  line-height: 1.1;
}

#kitchenBoard .panel-head h3 {
  font-size: 32px;
  line-height: 1.1;
}

#kitchenBoard .print-title {
  font-size: 42px;
  line-height: 1.05;
}

tr.total-row {
  font-weight: 700;
  background: #f5f5f7;
}

.sticky-table th:nth-child(1),
.sticky-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 58px;
}

.sticky-table th:nth-child(2),
.sticky-table td:nth-child(2) {
  position: sticky;
  left: 58px;
  z-index: 3;
  min-width: 82px;
}

.sticky-table th:nth-child(3),
.sticky-table td:nth-child(3) {
  position: sticky;
  left: 140px;
  z-index: 3;
  min-width: 170px;
}

.sticky-table th:nth-child(-n + 3) {
  z-index: 5;
}

.sticky-table td:nth-child(-n + 3) {
  background: #fff;
}

.sticky-table tr.total-row td:nth-child(-n + 3) {
  background: #f5f5f7;
}

.name-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.name-cell .small-btn {
  min-height: 26px;
  padding: 3px 7px;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  background: #e8f2ff;
  color: #005bb5;
}

.pill.warn {
  background: #fff4e5;
  color: var(--warn);
}

.pill.danger {
  background: #ffe5ea;
  color: var(--danger);
}

.pill.ok {
  background: #e5f8ea;
  color: var(--ok);
}

.alert-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.sync-status {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
}

.alert {
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 7px;
  padding: 12px;
  background: #fff;
}

.alert.warn {
  border-left-color: var(--warn);
}

.alert.danger {
  border-left-color: var(--danger);
}

.alert strong {
  display: block;
  margin-bottom: 4px;
}

.alert-action {
  margin-top: 10px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--accent-dark);
  cursor: pointer;
  padding: 5px 9px;
  font-weight: 700;
}

.alert-action:hover {
  background: #e8f2ff;
}

.row-actions {
  display: flex;
  gap: 6px;
}

.small-btn {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  padding: 4px 8px;
}

.dialog {
  border: 0;
  border-radius: 10px;
  width: min(900px, calc(100vw - 32px));
  padding: 0;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.dialog.small {
  width: min(520px, calc(100vw - 32px));
}

.dialog::backdrop {
  background: rgba(13, 24, 20, 0.46);
}

.dialog-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-btn {
  width: 34px;
  height: 34px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.form-grid.one {
  grid-template-columns: 1fr;
}

.field.wide {
  grid-column: span 2;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding-top: 20px;
}

.check-field input {
  width: 18px;
  height: 18px;
}

.adjustment-editor {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: #fff;
}

.adjustment-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fixed-adjustment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fixed-adjustment-grid .adjustment-row {
  grid-template-columns: 72px minmax(0, 1fr);
}

.tag-editor {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: #fff;
}

.tag-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.tag-row input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #fff4e5;
  color: var(--warn);
  padding: 4px 6px 4px 10px;
  font-size: 13px;
}

.tag-item button {
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  cursor: pointer;
  width: 22px;
  height: 22px;
}

.adjustment-row {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 110px auto;
  gap: 8px;
  align-items: center;
}

.adjustment-row select,
.adjustment-row input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
}

.session-checks,
.adjustment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.session-checks label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

.adjustment-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #e8f2ff;
  color: #005bb5;
  padding: 4px 6px 4px 10px;
  font-size: 13px;
}

.adjustment-item button {
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  cursor: pointer;
  width: 22px;
  height: 22px;
}

.tube-mode input:disabled,
.tube-mode select:disabled,
.tube-mode button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
}

#taxonomyPanel {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.taxonomy-block {
  background: var(--surface-soft);
  border-radius: 7px;
  padding: 12px;
}

.taxonomy-block h4 {
  margin: 0 0 8px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .nav-btn {
    text-align: center;
    padding: 10px 8px;
  }

  .topbar,
  .split-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chef-hero-grid,
  .chef-board-grid,
  .chef-chart-list {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== UI UX Pro Max final operational polish ===== */
:root {
  --ui-bg: #f5f7f2;
  --ui-surface: #fffefa;
  --ui-surface-soft: #f8fbf7;
  --ui-line: #d8dfd4;
  --ui-line-strong: #b8c6b3;
  --ui-text: #243128;
  --ui-muted: #647064;
  --ui-accent: #4f8f63;
  --ui-accent-dark: #3f7651;
  --ui-danger: #b44943;
  --ui-radius: 8px;
}

body {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

.brand-mark {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background: #e6f2e9 !important;
  color: var(--ui-accent-dark) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.brand h1,
.topbar h2,
.panel-head h3,
.dialog-head h3 {
  color: var(--ui-text) !important;
  letter-spacing: 0 !important;
}

.sidebar,
.topbar,
.panel,
.dialog {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
}

.nav-btn {
  min-height: 42px !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-text) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

.nav-btn.active {
  background: #e6f2e9 !important;
  color: var(--ui-accent-dark) !important;
  box-shadow: inset 3px 0 0 var(--ui-accent) !important;
}

.panel {
  border-radius: var(--ui-radius) !important;
  box-shadow: 0 10px 24px rgba(67, 84, 67, .06) !important;
  overflow: hidden !important;
}

.panel-head,
.dialog-head {
  min-height: 54px !important;
  background: linear-gradient(180deg, #fbfdf9, #eef6f0) !important;
  border-bottom: 1px solid var(--ui-line) !important;
}

.panel-head h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
}

.rule-banner,
.sync-status,
.alert {
  border-color: var(--ui-line) !important;
  background: #f8fbf7 !important;
  color: var(--ui-text) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.primary-btn,
.ghost-btn,
.small-btn,
.alert-action {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: var(--ui-radius) !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.primary-btn {
  background: var(--ui-accent) !important;
  border: 1px solid var(--ui-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.primary-btn:hover {
  background: var(--ui-accent-dark) !important;
  border-color: var(--ui-accent-dark) !important;
  transform: none !important;
}

.ghost-btn,
.small-btn,
.alert-action {
  background: #fff !important;
  border: 1px solid var(--ui-line-strong) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

.ghost-btn:hover,
.small-btn:hover,
.alert-action:hover {
  background: #f0f6f1 !important;
  border-color: var(--ui-accent) !important;
  transform: none !important;
}

.danger-btn {
  color: var(--ui-danger) !important;
  border-color: #e2b8b3 !important;
}

.field span,
.check-field span {
  color: #425044 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.field input,
.field select,
.field textarea,
.adjustment-row input,
.adjustment-row select {
  min-height: 42px !important;
  border: 1px solid #cfd8cc !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--ui-text) !important;
  font-size: 16px !important;
}

table {
  color: var(--ui-text) !important;
  font-size: 15.5px !important;
}

th {
  background: #eef5ef !important;
  color: #33443a !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

td,
th {
  border-bottom: 1px solid var(--ui-line) !important;
}

table.production-table th,
table.production-table td {
  vertical-align: top !important;
}

table.production-table th:not(:first-child),
table.production-table td:not(:first-child) {
  text-align: left !important;
  font-variant-numeric: tabular-nums !important;
}

#residentDialog {
  width: min(1220px, calc(100vw - 28px)) !important;
  max-width: 1220px !important;
}

#residentDialog form {
  max-height: min(900px, calc(100vh - 28px)) !important;
}

#residentDialog .dialog-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
}

#residentDialog .resident-form-layout {
  grid-template-columns: minmax(300px, .84fr) minmax(520px, 1.16fr) !important;
  gap: 12px !important;
  padding: 12px !important;
  background: #f5f7f2 !important;
}

#residentDialog .ui-section {
  padding: 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
}

#residentDialog .ui-section h4 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--ui-line) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
}

#residentDialog .ui-section h4::before {
  content: "" !important;
  width: 4px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: var(--ui-accent) !important;
}

#residentDialog .ui-section.basic .section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#residentDialog .ui-section.meal .section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end !important;
}

#residentDialog .ui-section.meal .check-field {
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 6px !important;
  background: var(--ui-surface-soft) !important;
}

#residentDialog .tag-editor,
#residentDialog .adjustment-editor {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface-soft) !important;
}

#residentDialog .tag-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
}

#residentDialog .tag-row select:not(.hidden) + input.hidden {
  display: none !important;
}

#residentDialog .stepper-grid {
  grid-template-columns: repeat(2, minmax(210px, 1fr)) !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 0 !important;
  background: transparent !important;
}

#residentDialog .portion-stepper-row {
  width: 100% !important;
  grid-template-columns: 56px 40px minmax(72px, 1fr) 40px !important;
  gap: 8px !important;
  padding: 8px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: #fff !important;
}

#residentDialog .portion-stepper-row span {
  font-size: 16px !important;
}

#residentDialog .portion-stepper-row input {
  width: 100% !important;
  height: 40px !important;
  font-size: 18px !important;
}

#residentDialog .stepper-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  font-size: 22px !important;
}

#residentDialog .check-field:has(#enableExtraFoods) {
  margin: 10px 0 !important;
  padding: 9px 12px !important;
}

#residentDialog #extraFoodConfig {
  border-radius: var(--ui-radius) !important;
  background: #fff !important;
}

#residentDialog .extra-food-row {
  grid-template-columns: 72px minmax(0, 1fr) !important;
}

#residentDialog .extra-food-row:has(#extraFoodQty) {
  grid-template-columns: 72px 112px minmax(90px, 1fr) !important;
}

#residentDialog .dialog-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 4 !important;
  padding: 12px 16px !important;
  background: #fff !important;
  border-top: 1px solid var(--ui-line) !important;
}

.extra-food-item-card {
  border-radius: var(--ui-radius) !important;
  border-color: var(--ui-line) !important;
}

.rule-food-cell {
  max-width: none !important;
  grid-template-columns: minmax(92px, 1fr) 20px minmax(100px, 1fr) 74px 90px 58px 58px !important;
}

.rule-related .small-btn,
.rule-edit .small-btn,
.rule-delete .small-btn {
  min-width: 58px !important;
  padding: 0 8px !important;
}

#kitchenBoard .panel {
  border-color: #b9c8b5 !important;
}

#kitchenBoard .panel-head {
  background: #e8f2eb !important;
}

#kitchenBoard .panel-head h3 {
  font-size: 32px !important;
}

table.kitchen-large-table th {
  background: #e2eee6 !important;
  font-size: 30px !important;
  color: var(--ui-text) !important;
}

table.kitchen-large-table td {
  font-size: 52px !important;
  font-weight: 850 !important;
  color: var(--ui-text) !important;
}

table.kitchen-large-table td .chef-pair span {
  font-size: 36px !important;
}

.kitchen-extra-task-card .name,
.kitchen-extra-task-card .qty,
.kitchen-extra-task-card .meta,
.kitchen-extra-task-card .meta *,
.kitchen-extra-table th,
.kitchen-extra-table td,
.kitchen-extra-table .extra-person {
  color: var(--ui-text) !important;
}

@media (max-width: 1100px) {
  #residentDialog .resident-form-layout {
    grid-template-columns: 1fr !important;
  }
}

@media print {
  body,
  #kitchenBoard,
  #kitchenBoard .panel,
  #kitchenBoard .panel-head,
  #kitchenBoard table,
  #kitchenBoard thead,
  #kitchenBoard tbody,
  #kitchenBoard tr,
  #kitchenBoard th,
  #kitchenBoard td,
  #kitchenBoard .extra-food-card,
  #kitchenBoard .kitchen-extra-task-card {
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  #kitchenBoard > section.panel:first-of-type::before {
    content: "\57fa\7763\6559\9999\6e2f\4fe1\7fa9\6703\6069\6d77\5c45\A\5eda\623f\51fa\9910\8868" !important;
    display: block !important;
    white-space: pre-line !important;
    text-align: center !important;
    color: #111 !important;
    background: #fff !important;
    font-size: 24pt !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    padding: 0 0 5mm !important;
    margin: 0 !important;
  }
}

/* ===== Top navigation + stronger readability patch =====
   Fixes pale Lovable layer for daily operations and moves navigation to top. */
:root {
  --op-bg: #f7f4ea;
  --op-surface: #fffdf7;
  --op-surface-2: #f1f7ee;
  --op-line: #b8c8b5;
  --op-line-strong: #8fa48f;
  --op-text: #1f2f22;
  --op-muted: #526052;
  --op-green: #28784d;
  --op-green-2: #3e9863;
  --op-amber: #c9792f;
  --op-lilac: #dcd4ff;
}

.app-shell {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
  min-height: 100vh !important;
  gap: 14px !important;
  padding: 12px 14px 18px !important;
}

.sidebar {
  position: sticky !important;
  top: 10px !important;
  z-index: 80 !important;
  width: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(250px, auto) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 12px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(143,164,143,.45) !important;
  background: rgba(255,253,247,.9) !important;
  box-shadow: 0 16px 42px rgba(57,78,55,.14) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

.brand {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  gap: 10px !important;
}

.brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
  flex: 0 0 auto !important;
}

.brand h1 {
  font-size: 17px !important;
  color: var(--op-text) !important;
  white-space: nowrap !important;
}

.brand p {
  max-width: 210px !important;
  color: var(--op-muted) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.nav {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}

.nav-btn {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  color: var(--op-text) !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(143,164,143,.42) !important;
  box-shadow: none !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.nav-btn:hover {
  transform: translateY(-1px) !important;
  background: #ffffff !important;
  color: var(--op-green) !important;
  border-color: rgba(40,120,77,.45) !important;
  box-shadow: 0 8px 18px rgba(57,78,55,.12) !important;
}

.nav-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--op-green), var(--op-green-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px rgba(40,120,77,.24) !important;
}

.sidebar-footer {
  display: none !important;
}

.content {
  min-width: 0 !important;
  max-width: 100% !important;
}

.topbar {
  top: 82px !important;
  border-color: rgba(143,164,143,.38) !important;
  background: rgba(255,253,247,.88) !important;
}

body {
  color: var(--op-text) !important;
  background:
    linear-gradient(135deg, #fbf6e9 0%, #f4f8f1 48%, #f6f2ff 100%) !important;
}

.panel,
.kpi,
.dialog,
.login-card,
.staff-day-card {
  background: rgba(255,253,247,.92) !important;
  border-color: rgba(143,164,143,.38) !important;
}

.panel-head,
.dialog-head,
.staff-day-head {
  background: linear-gradient(180deg, #fbfdf8, #eaf4ea) !important;
  border-bottom-color: var(--op-line) !important;
}

.panel-head h3,
.dialog-head h3,
.topbar h2,
.brand h1 {
  color: var(--op-text) !important;
}

.eyebrow,
.muted,
.kpi .label,
.field span,
.brand p {
  color: var(--op-muted) !important;
}

.table-wrap {
  background: var(--op-surface) !important;
}

table {
  background: var(--op-surface) !important;
  border-color: var(--op-line) !important;
}

thead th,
table th {
  color: #18331f !important;
  background: #e2eee2 !important;
  border-color: var(--op-line) !important;
  font-weight: 850 !important;
}

td {
  color: #233426 !important;
  background: rgba(255,253,247,.96) !important;
  border-color: #d3ddd0 !important;
}

tbody tr:nth-child(even) td {
  background: #f7faf4 !important;
}

tbody tr:hover td {
  background: #fff1d9 !important;
}

.resident-filter-row th {
  background: #f2f7ef !important;
  border-bottom: 1px solid var(--op-line-strong) !important;
}

.resident-filter-row input,
.resident-filter-row select {
  background: #ffffff !important;
  border-color: var(--op-line-strong) !important;
  color: var(--op-text) !important;
}

input,
select,
textarea {
  background: #ffffff !important;
  border-color: #9fb19c !important;
  color: var(--op-text) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--op-green) !important;
  box-shadow: 0 0 0 4px rgba(40,120,77,.18) !important;
}

.primary-btn {
  background: linear-gradient(135deg, var(--op-green), var(--op-green-2)) !important;
}

.ghost-btn,
.small-btn,
.alert-action {
  background: #fffdf7 !important;
  border-color: var(--op-line-strong) !important;
  color: var(--op-text) !important;
}

#residents .panel,
#dashboard .panel,
#production .panel,
#staffMeals .panel,
#supervisor .panel {
  box-shadow: 0 14px 34px rgba(57,78,55,.10) !important;
}

#kitchenBoard .topbar,
#kitchenBoard .panel {
  color: #142417 !important;
}

body.auth-locked .sidebar,
body.auth-locked .topbar {
  display: none !important;
}

@media (max-width: 1180px) {
  .sidebar {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .brand {
    justify-content: flex-start !important;
  }

  .topbar {
    top: 138px !important;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 8px !important;
  }

  .sidebar {
    top: 8px !important;
    border-radius: 18px !important;
  }

  .nav-btn {
    min-height: 36px !important;
    padding: 0 11px !important;
    font-size: 13px !important;
  }

  .topbar {
    top: 130px !important;
    border-radius: 18px !important;
  }
}

@media print {
  .app-shell {
    display: block !important;
    padding: 0 !important;
  }

  .topbar {
    position: static !important;
  }
}

/* ===== Resident report table final layout fixes ===== */
#residentTable .resident-excel-table {
  table-layout: fixed !important;
  width: max-content !important;
  min-width: 100% !important;
}

#residentTable .resident-excel-table th,
#residentTable .resident-excel-table td {
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

#residentTable .resident-excel-table th:nth-child(1),
#residentTable .resident-excel-table td:nth-child(1) {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  left: 0 !important;
}

#residentTable .resident-excel-table th:nth-child(2),
#residentTable .resident-excel-table td:nth-child(2) {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  left: 72px !important;
}

#residentTable .resident-excel-table th:nth-child(3),
#residentTable .resident-excel-table td:nth-child(3) {
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  left: 184px !important;
}

#residentTable .resident-excel-table th:nth-child(-n + 3),
#residentTable .resident-excel-table td:nth-child(-n + 3) {
  position: sticky !important;
  z-index: 8 !important;
  background: #fbfdf9 !important;
}

#residentTable .resident-excel-table thead th:nth-child(-n + 3) {
  z-index: 12 !important;
}

#residentTable .resident-excel-table th:nth-child(4),
#residentTable .resident-excel-table td:nth-child(4) { width: 118px !important; min-width: 118px !important; }
#residentTable .resident-excel-table th:nth-child(5),
#residentTable .resident-excel-table td:nth-child(5),
#residentTable .resident-excel-table th:nth-child(6),
#residentTable .resident-excel-table td:nth-child(6),
#residentTable .resident-excel-table th:nth-child(7),
#residentTable .resident-excel-table td:nth-child(7) { width: 136px !important; min-width: 136px !important; }
#residentTable .resident-excel-table th:nth-child(8),
#residentTable .resident-excel-table td:nth-child(8) { width: 148px !important; min-width: 148px !important; }
#residentTable .resident-excel-table th:nth-child(9),
#residentTable .resident-excel-table td:nth-child(9) { width: 170px !important; min-width: 170px !important; }
#residentTable .resident-excel-table th:nth-child(10),
#residentTable .resident-excel-table td:nth-child(10) { width: 280px !important; min-width: 280px !important; }
#residentTable .resident-excel-table th:nth-child(11),
#residentTable .resident-excel-table td:nth-child(11) { width: 240px !important; min-width: 240px !important; }

#residentTable .resident-excel-table .name-cell {
  width: 100%;
  justify-content: space-between;
  gap: 8px;
}

#residentTable .resident-excel-table .name-cell > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#residentTable .resident-excel-table .name-cell .small-btn {
  flex: 0 0 auto;
}

.extra-food-catalog {
  display: grid;
  gap: 10px;
}

.catalog-editor-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.catalog-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catalog-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: #f7fbf7;
  font-weight: 700;
}

.catalog-pill button {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: #dfe8dc;
  color: var(--ui-text);
  cursor: pointer;
}

.catalog-note {
  margin: 0;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.4;
}

.settings-panel {
  padding: 16px;
}

.settings-form {
  display: grid;
  gap: 12px;
}

.settings-form textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.45;
  background: #fff;
}

.settings-version-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.supervisor-grid {
  align-items: start;
  margin-top: 16px;
}

#supervisor .taxonomy-block {
  background: #fbfdf9;
}

@media (max-width: 900px) {
  .settings-version-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Resident Excel-style filtering and sorting ===== */
.resident-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ui-line);
  background: #f8fbf7;
  color: #425044;
  font-size: 14px;
  font-weight: 700;
}

.resident-filter-summary .ghost-btn {
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 14px !important;
}

.resident-excel-table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  max-width: max-content;
}

.resident-sort-legacy {
  display: none !important;
}

.resident-excel-table th,
.resident-excel-table td {
  vertical-align: top;
}

.resident-excel-table thead th {
  position: sticky;
  z-index: 6;
}

.resident-excel-table .resident-sort-row th {
  top: 0;
}

.resident-excel-table .resident-filter-row th {
  top: 43px;
  padding: 6px 8px;
  background: #f7fbf7 !important;
  border-bottom: 1px solid var(--ui-line-strong) !important;
}

.table-sort-btn {
  width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text);
  font: inherit;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.table-sort-btn span {
  color: var(--ui-accent-dark);
  font-size: 15px;
  font-weight: 900;
}

.table-sort-btn.active {
  color: var(--ui-accent-dark);
}

.resident-filter-control {
  width: 100%;
  min-height: 34px !important;
  padding: 4px 7px !important;
  border: 1px solid #cfd8cc !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--ui-text) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.resident-excel-table th:nth-child(1),
.resident-excel-table td:nth-child(1) { width: 66px; min-width: 66px; }
.resident-excel-table th:nth-child(2),
.resident-excel-table td:nth-child(2) { width: 94px; min-width: 94px; }
.resident-excel-table th:nth-child(3),
.resident-excel-table td:nth-child(3) { width: 172px; min-width: 172px; }
.resident-excel-table th:nth-child(4),
.resident-excel-table td:nth-child(4) { width: 104px; min-width: 104px; }
.resident-excel-table th:nth-child(5),
.resident-excel-table td:nth-child(5),
.resident-excel-table th:nth-child(6),
.resident-excel-table td:nth-child(6),
.resident-excel-table th:nth-child(7),
.resident-excel-table td:nth-child(7) { width: 124px; min-width: 124px; }
.resident-excel-table th:nth-child(8),
.resident-excel-table td:nth-child(8) { width: 128px; min-width: 128px; }
.resident-excel-table th:nth-child(9),
.resident-excel-table td:nth-child(9) { width: 150px; min-width: 150px; }
.resident-excel-table th:nth-child(10),
.resident-excel-table td:nth-child(10) { width: 170px; min-width: 170px; }

.resident-excel-table .empty-cell {
  padding: 22px !important;
  text-align: center !important;
  color: #667268;
  font-weight: 800;
}

@media (max-width: 620px) {
  .content {
    padding: 14px;
  }

  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .field.wide {
    grid-column: auto;
  }

  th,
  td {
    padding: 9px;
  }
}

@page {
  size: A3 portrait;
  margin: 5mm;
}

@media print {
  :root {
    --kitchen-print-size: 18pt;
  }
  body {
    background: #fff;
  }

  .app-shell {
    display: block;
    min-height: auto;
  }

  .sidebar,
  .topbar,
  .rule-banner,
  .kitchen-print-actions,
  .view:not(#kitchenBoard) {
    display: none !important;
  }

  .content {
    padding: 0;
  }

  #kitchenBoard {
    display: grid !important;
    gap: 1.6mm;
    zoom: 1;
  }

  .print-title {
    display: block;
    text-align: center;
    font-size: var(--kitchen-print-size);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 0.4mm;
  }

  .panel {
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
    border-radius: 0;
    margin: 0;
    border-width: 0.5mm;
  }

  #kitchenBoard .split-grid {
    grid-template-columns: 1fr;
    gap: 1.6mm;
  }

  .chef-panel .panel-head {
    min-height: 0;
    padding: 1.5mm 1.8mm;
    border-bottom: 0.4mm solid #111;
  }

  .chef-panel h3 {
    font-size: var(--kitchen-print-size);
    line-height: 1.1;
    font-weight: 800;
  }

  .table-wrap {
    overflow: visible !important;
  }

  table.kitchen-large-table {
    width: 100%;
    table-layout: fixed;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  table.kitchen-large-table th {
    font-size: var(--kitchen-print-size);
    padding: 0.5mm 0.6mm;
    line-height: 1.02;
    font-weight: 800;
    border-bottom: 0.25mm solid #333;
    white-space: nowrap;
  }

  table.kitchen-large-table td {
    font-size: var(--kitchen-print-size);
    padding: 0.45mm 0.6mm;
    line-height: 1;
    font-weight: 800;
    vertical-align: top;
    white-space: nowrap;
  }

  table.kitchen-large-table td .chef-pair span {
    font-size: var(--kitchen-print-size);
    line-height: 1;
    font-weight: 800;
  }

  table.kitchen-large-table th:nth-child(1),
  table.kitchen-large-table td:nth-child(1) {
    width: 7%;
  }
  table.kitchen-large-table th:nth-child(2),
  table.kitchen-large-table td:nth-child(2) {
    width: 10%;
  }

  table.kitchen-large-table td:nth-child(1),
  table.kitchen-large-table td:nth-child(2) {
    font-size: var(--kitchen-print-size);
    font-weight: 800;
  }

  #kitchenDishLarge table.kitchen-large-table th:nth-child(1),
  #kitchenDishLarge table.kitchen-large-table td:nth-child(1),
  #kitchenStapleLarge table.kitchen-large-table th:nth-child(1),
  #kitchenStapleLarge table.kitchen-large-table td:nth-child(1) {
    display: none;
  }

  #kitchenBoard .sync-status {
    font-size: var(--kitchen-print-size);
    padding: 0.8mm 1mm;
    margin: 0 0 0.8mm 0;
    border: 0.25mm solid #555;
    background: #f7f7f7;
  }

  /* 分區顏色：主食 / 限制版 / 樓層 */
  #kitchenDishLarge {
    background: #ffffff;
  }
  #kitchenStapleLarge {
    background: #eef6ff;
  }
  #kitchenFloorLarge {
    background: #f8f2e8;
  }

  #kitchenDishLarge table th,
  #kitchenDishLarge table td,
  #kitchenStapleLarge table th,
  #kitchenStapleLarge table td,
  #kitchenFloorLarge table th,
  #kitchenFloorLarge table td {
    border-color: #444;
  }

  #kitchenBoard * {
    break-after: avoid-page;
  }
}

.dish-portion-field.hidden {
  display: none;
}

.field-hint{margin:6px 0 10px;color:#4b5563;font-size:12px;line-height:1.4;}

.extra-food-config.hidden{display:none;}

.extra-food-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px;}
.extra-food-card{border:1px solid #d9dee5;border-radius:10px;background:#fff;padding:10px;}
.extra-food-card .name{font-weight:700;font-size:14px;}
.extra-food-card .qty{font-size:24px;line-height:1.1;margin-top:4px;font-weight:800;}
.extra-food-card .meta{font-size:12px;color:#5b6573;margin-top:6px;}
.extra-food-card.large .name{font-size:18px;}
.extra-food-card.large .qty{font-size:34px;}
.extra-food-card.large .meta{font-size:14px;}


/* Resident editor clarity refresh */
.resident-form-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;}
.ui-section{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 12px 10px;position:relative;}
.ui-section h4{margin:0 0 10px;font-size:14px;font-weight:700;color:#32343a;}
.ui-section:not(:nth-child(2n))::after{content:'';position:absolute;top:10px;right:-10px;width:1px;height:calc(100% - 20px);background:#d7dbe2;}
.section-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;}
.section-grid .field,.section-grid .check-field{min-height:64px;align-content:start;}
.section-grid .field.wide{grid-column:1 / -1;}
.ui-section.meal .check-field{padding-top:22px;}
.ui-section.portion .field.wide{margin:0;}
.adjustment-editor{border:1px solid #d7dbe2;border-radius:8px;background:#fafbfe;padding:10px;}
.fixed-adjustment-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:4px 2px 8px;border-top:1px solid #e2e6ee;border-bottom:1px solid #e2e6ee;}
.fixed-adjustment-grid .adjustment-row{display:grid;grid-template-columns:54px 1fr;align-items:center;column-gap:8px;}
.fixed-adjustment-grid .adjustment-row span{color:#434a55;font-weight:600;}
.fixed-adjustment-grid .adjustment-row input{height:40px;text-align:center;font-weight:600;}
.dialog .ghost-btn,.dialog .primary-btn{height:40px;min-height:40px;border-radius:8px;padding:0 14px;font-weight:600;}
.dialog .ghost-btn{background:#fff;border:1px solid #cfd4de;color:#2f3540;}
.dialog .ghost-btn:hover{background:#f6f8fb;}
.dialog .primary-btn{background:var(--accent);border:1px solid var(--accent);}
.dialog .primary-btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);}
.dialog .primary-btn:disabled,.dialog .ghost-btn:disabled{opacity:.55;cursor:not-allowed;}
#residentDialog{max-width:1180px;}
#residentDialog .form-grid{display:block;}
#residentDialog .check-field{gap:8px;}


/* Resident dialog readability + compact tidy */
#residentDialog{max-width:1200px;}
#residentDialog .resident-form-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;}
#residentDialog .ui-section{padding:10px 12px 10px;border-radius:10px;border:1px solid #cfd4de;background:#fff;}
#residentDialog .ui-section h4{font-size:18px;line-height:1.25;margin:0 0 8px;font-weight:700;color:#1f2937;}
#residentDialog .ui-section:not(:nth-child(2n))::after{right:-8px;height:calc(100% - 16px);background:#cfd6e2;}

#residentDialog .section-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px;}
#residentDialog .ui-section.meal .section-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
#residentDialog .field span,#residentDialog .check-field span{font-size:15px;line-height:1.25;color:#374151;font-weight:600;}
#residentDialog .field input,#residentDialog .field select{height:40px;min-height:40px;font-size:16px;line-height:1.2;padding:7px 10px;border-radius:8px;}
#residentDialog .section-grid .field,#residentDialog .section-grid .check-field{min-height:56px;}
#residentDialog .ui-section.meal .check-field{display:flex;align-items:center;gap:8px;min-height:40px;padding-top:0;}
#residentDialog .check-field input{width:18px;height:18px;}

#residentDialog .tag-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:center;}
#residentDialog .tag-row input,
#residentDialog .tag-row select{height:38px;min-height:38px;font-size:15px;}
#residentDialog .tag-row input.hidden{display:none!important;}
#residentDialog .tag-row select:has(+ input.hidden){grid-column:1 / 3;}
#residentDialog .adjustment-editor{padding:10px;border-radius:8px;}
#residentDialog .fixed-adjustment-grid{grid-template-columns:1fr 1fr;gap:8px 10px;}
#residentDialog .fixed-adjustment-grid .adjustment-row{grid-template-columns:58px 1fr;align-items:center;}
#residentDialog .fixed-adjustment-grid .adjustment-row span{font-size:15px;font-weight:700;color:#334155;}
#residentDialog .fixed-adjustment-grid .adjustment-row input{height:38px;min-height:38px;font-size:16px;text-align:center;}

#residentDialog .dialog-actions{gap:10px;}
#residentDialog .ghost-btn,#residentDialog .primary-btn{height:40px;min-height:40px;padding:0 14px;font-size:16px;line-height:1;border-radius:8px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;}
#residentDialog .ghost-btn{border:1px solid #cfd4de;background:#fff;color:#2f3540;}
#residentDialog .ghost-btn:hover{background:#f7f9fc;}
#residentDialog .primary-btn{border:1px solid var(--accent);background:var(--accent);}
#residentDialog .primary-btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);}

#residentDialog .field-hint{font-size:14px;line-height:1.4;color:#475569;}

@media (max-width: 1100px){
  #residentDialog .resident-form-layout{grid-template-columns:1fr;}
  #residentDialog .ui-section::after{display:none;}
}

/* ===== 2026-05 UI refresh: cleaner + depth + readability ===== */
:root{
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --line: #d7deea;
  --line-strong: #c4cedd;
  --ink: #18202b;
  --muted: #5e6b7d;
  --accent: #1976d2;
  --accent-dark: #135fb2;
  --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.08);
  --shadow-md: 0 8px 28px rgba(17, 24, 39, 0.12);
}

body{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(25,118,210,.08), transparent 70%),
    radial-gradient(900px 400px at -5% 0%, rgba(2,132,199,.07), transparent 66%),
    var(--bg);
  color: var(--ink);
}

.content{
  max-width: 1720px;
  margin: 0 auto;
}

.sidebar{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 24px rgba(15, 23, 42, 0.05);
}

.brand-mark{
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--shadow-sm);
}

.nav-btn{
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;
}

.nav-btn:hover{
  border-color: #d5e6fb;
  background: #eef6ff;
}

.nav-btn.active{
  border-color: #b7d7fb;
  background: linear-gradient(180deg, #ecf5ff, #e4f0ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.topbar{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.panel{
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: clip;
}

.panel-head{
  min-height: 62px;
  background: linear-gradient(180deg, #ffffff, #f6f9ff);
  border-bottom: 1px solid var(--line);
}

.panel-head h3{
  font-size: 20px;
  font-weight: 750;
  letter-spacing: 0;
}

.table-wrap{
  scrollbar-width: thin;
  scrollbar-color: #b8c5d9 #eef3fa;
}

.table-wrap::-webkit-scrollbar{height:10px;width:10px}
.table-wrap::-webkit-scrollbar-track{background:#eef3fa}
.table-wrap::-webkit-scrollbar-thumb{background:#bcc9dd;border-radius:999px}

.rule-banner{
  border-radius: 12px;
  border: 1px solid #c8dcf7;
  background: linear-gradient(180deg, #f2f8ff, #eaf4ff);
  box-shadow: var(--shadow-sm);
}

.primary-btn,
.ghost-btn,
.small-btn{
  border-radius: 10px;
  font-weight: 700;
  transition: all .16s ease;
}

.primary-btn{
  border: 1px solid var(--accent);
  box-shadow: 0 4px 14px rgba(25,118,210,.28);
}

.primary-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(25,118,210,.3);
}

.ghost-btn,
.small-btn{
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.ghost-btn:hover,
.small-btn:hover{
  border-color: #b4c2d8;
  background: #f2f7ff;
}

.field span,
.check-field span{
  color: #3f4d61;
  font-size: 14px;
  font-weight: 650;
}

.field input,
.field select{
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 40px;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
}

.field input:focus,
.field select:focus{
  outline: none;
  border-color: #7fb3ea;
  box-shadow: 0 0 0 3px rgba(25,118,210,.15);
}

table{
  font-size: 15px;
  table-layout: auto;
}

th{
  background: linear-gradient(180deg, #f7f9fc, #eff4fa);
  color: #1f2a38;
  border-bottom: 1px solid #d1dae8;
}

td{
  border-bottom: 1px solid #e5ebf4;
  white-space: nowrap;
}

tr:hover td{
  background: #f8fbff;
}

tr.total-row td{
  background: #eff5ff !important;
}

td.num,th.num{
  text-align:right;
  font-variant-numeric: tabular-nums;
}

.dialog{
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 64px rgba(15,23,42,.28);
}

.dialog-head{
  background: linear-gradient(180deg, #fff, #f7faff);
  border-bottom: 1px solid var(--line);
}

#residentDialog .resident-form-layout{
  gap: 12px 12px;
}

#residentDialog .ui-section{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  padding: 10px 10px;
}

#residentDialog .ui-section h4{
  font-size: 19px;
  color: #1f2937;
}

#residentDialog .section-grid .field,
#residentDialog .section-grid .check-field{
  min-height: 52px;
}

#residentDialog .field span,
#residentDialog .check-field span{
  font-size: 15px;
}

#residentDialog .field input,
#residentDialog .field select{
  height: 42px;
  min-height: 42px;
  font-size: 16px;
}

#residentDialog .adjustment-editor{
  border: 1px solid #d3dceb;
  border-radius: 10px;
  background: #f6f9ff;
}

#residentDialog .fixed-adjustment-grid .adjustment-row span{
  font-size: 15px;
  font-weight: 700;
}

#residentDialog .fixed-adjustment-grid .adjustment-row input{
  font-size: 17px;
  font-weight: 700;
}

.tag-item,
.adjustment-item{
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
}

.adjustment-item{
  background:#eaf2ff;
  color:#234a7a;
}

.tag-item{
  background:#fff3e0;
  color:#8a4b00;
}

.extra-food-card{
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.extra-food-card .qty{
  font-size: 30px;
  font-weight: 800;
}

#kitchenBoard .panel{
  border-width: 1.2px;
}

#kitchenBoard .panel-head h3{
  font-size: 30px;
}

table.kitchen-large-table th{
  font-size: 30px;
}

table.kitchen-large-table td{
  font-size: 52px;
  font-weight: 800;
}

table.kitchen-large-table td .chef-pair span{
  font-size: 36px;
}

/* Better visual grouping for production/kitchen blocks */
#production .split-grid,
#kitchenBoard .split-grid{
  align-items: start;
}

#production .panel,
#kitchenBoard .panel{
  position: relative;
}

#production .panel::before,
#kitchenBoard .panel::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background: linear-gradient(90deg,#89b8ef,#c6ddf8);
}

/* Compact and neat controls */
.resident-controls .field.compact select,
.top-actions .field.compact select{
  min-width: 132px;
}

.resident-controls .ghost-btn,
.top-actions .ghost-btn,
.top-actions .primary-btn{
  min-height:40px;
}

/* ===== Clinical operations UI: IBM/Carbon-inspired readability pass ===== */
:root{
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-soft: #f1f4f8;
  --line: #c8d0dc;
  --line-strong: #9da8b8;
  --ink: #161b22;
  --muted: #4f5b6b;
  --accent: #0f62fe;
  --accent-dark: #0043ce;
  --ok: #198038;
  --warn: #b28600;
  --danger: #da1e28;
  --shadow: none;
  --shadow-sm: none;
  --shadow-md: none;
  --radius: 6px;
}

body{
  background: var(--bg);
  font-size: 16px;
}

.app-shell{
  grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar{
  background: #161b22;
  color: #f4f6f8;
  border-right: 0;
  box-shadow: none;
  padding: 16px 14px;
}

.brand{
  border-bottom-color: #303946;
  padding: 4px 2px 18px;
}

.brand-mark{
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: none;
}

.brand h1{
  color: #ffffff;
  font-size: 17px;
  font-weight: 650;
}

.brand p{
  color: #b9c3d1;
  font-size: 12px;
}

.nav{
  gap: 4px;
  margin-top: 18px;
}

.nav-btn{
  min-height: 42px;
  border-radius: 3px;
  color: #d9e1ec;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
}

.nav-btn:hover{
  color: #ffffff;
  border-color: transparent;
  background: #263241;
}

.nav-btn.active{
  color: #ffffff;
  background: #0f62fe;
  border-color: transparent;
  box-shadow: inset 4px 0 0 #78a9ff;
}

.sidebar .ghost-btn{
  border-radius: 3px;
  border-color: #596579;
  background: #222b36;
  color: #ffffff;
}

.content{
  max-width: none;
  padding: 18px;
}

.topbar{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: none;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.eyebrow{
  color: #5f6b7a;
  font-size: 13px;
}

h2{
  font-size: 28px;
  font-weight: 650;
}

.view.active{
  gap: 14px;
}

.panel{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: none;
}

.panel::before,
#production .panel::before,
#kitchenBoard .panel::before{
  display: none;
}

.panel-head{
  min-height: 50px;
  padding: 12px 14px;
  background: #eef2f7;
  border-bottom: 1px solid var(--line);
}

.panel-head h3{
  font-size: 19px;
  line-height: 1.25;
  font-weight: 650;
}

.rule-banner{
  border-radius: var(--radius);
  border: 1px solid #b8cdf5;
  border-left: 5px solid var(--accent);
  background: #edf5ff;
  color: #1f2937;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.45;
}

.kpi{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: none;
  padding: 14px;
}

.kpi .label{
  font-size: 14px;
  color: #4f5b6b;
  font-weight: 650;
}

.kpi .value{
  font-size: 32px;
  font-weight: 650;
}

.primary-btn,
.ghost-btn,
.small-btn,
.alert-action{
  border-radius: 3px;
  box-shadow: none;
  transform: none;
  min-height: 40px;
}

.primary-btn{
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #ffffff;
}

.primary-btn:hover{
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: none;
  box-shadow: none;
}

.ghost-btn,
.small-btn,
.alert-action{
  background: #ffffff;
  border: 1px solid var(--line-strong);
  color: #1f2937;
}

.ghost-btn:hover,
.small-btn:hover,
.alert-action:hover{
  background: #edf5ff;
  border-color: var(--accent);
  color: #0f62fe;
}

.field span,
.check-field span{
  color: #364152;
  font-size: 14px;
  font-weight: 650;
}

.field input,
.field select,
.tag-row input,
.adjustment-row input,
.adjustment-row select{
  border-radius: 3px;
  border: 1px solid var(--line);
  background: #ffffff;
  min-height: 40px;
  box-shadow: none;
}

.field input:focus,
.field select:focus,
.tag-row input:focus,
.adjustment-row input:focus,
.adjustment-row select:focus{
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: none;
  border-color: var(--accent);
}

.check-field input{
  accent-color: var(--accent);
}

table{
  font-size: 15.5px;
}

th,
td{
  padding: 10px 12px;
  border-bottom: 1px solid #dde3ec;
}

th{
  background: #e8edf4;
  color: #1f2937;
  font-weight: 700;
}

tbody tr:nth-child(even) td{
  background: #fbfcfe;
}

tr:hover td{
  background: #edf5ff;
}

tr.total-row td{
  background: #e5edf8 !important;
  border-top: 2px solid #9da8b8;
}

.sticky-table td:nth-child(-n + 3){
  background: inherit;
}

.sticky-table tr:hover td:nth-child(-n + 3){
  background: #edf5ff;
}

.pill{
  border-radius: 3px;
  min-height: 24px;
  font-size: 13px;
  font-weight: 650;
}

.pill.warn{background:#fff6d6;color:#7a5a00}
.pill.danger{background:#fff1f1;color:#a2191f}
.pill.ok{background:#defbe6;color:#0e6027}

.dialog{
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(15,23,42,.28);
}

.dialog-head{
  background: #eef2f7;
}

#residentDialog{
  max-width: 1180px;
}

#residentDialog .resident-form-layout{
  gap: 10px;
}

#residentDialog .ui-section{
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: none;
  padding: 12px;
}

#residentDialog .ui-section h4{
  font-size: 18px;
  font-weight: 650;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

#residentDialog .ui-section:not(:nth-child(2n))::after{
  display: none;
}

#residentDialog .field input,
#residentDialog .field select{
  border-radius: 3px;
  height: 42px;
  min-height: 42px;
  font-size: 16px;
}

#residentDialog .ui-section.meal .section-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#residentDialog .ui-section.meal .check-field{
  min-height: 42px;
  padding-top: 0;
  border: 1px solid #dde3ec;
  background: #f8fafc;
  padding-left: 10px;
}

#residentDialog .tag-editor,
#residentDialog .adjustment-editor{
  border-radius: 4px;
  border: 1px solid #cfd8e6;
  background: #f8fafc;
}

#residentDialog .fixed-adjustment-grid{
  border-color: #dce3ee;
}

#residentDialog .ghost-btn,
#residentDialog .primary-btn{
  border-radius: 3px;
}

.tag-item,
.adjustment-item{
  border-radius: 3px;
}

#kitchenBoard .panel-head h3{
  font-size: 30px;
  font-weight: 700;
}

table.kitchen-large-table th{
  font-size: 28px;
  background: #dfe8f5;
}

table.kitchen-large-table td{
  font-size: 52px;
  font-weight: 750;
}

table.kitchen-large-table td .chef-pair span{
  font-size: 34px;
  font-weight: 750;
}

/* ===== Final UI composition pass: clinical but polished ===== */
:root{
  --clinical-bg: #f6f8fb;
  --clinical-panel: #ffffff;
  --clinical-panel-alt: #f8fafc;
  --clinical-border: #d5dde8;
  --clinical-border-dark: #aeb8c7;
  --clinical-text: #17202c;
  --clinical-muted: #526174;
  --clinical-blue: #0f62fe;
  --clinical-blue-soft: #edf5ff;
  --clinical-green: #198038;
  --clinical-amber: #b7791f;
}

body{
  background: var(--clinical-bg);
  color: var(--clinical-text);
}

.content{
  padding: 20px 22px;
}

.topbar{
  min-height: 76px;
  border: 1px solid var(--clinical-border);
  background: linear-gradient(180deg,#fff,#f9fbfe);
}

.top-actions{
  gap: 12px;
}

.view.active{
  gap: 16px;
}

.split-grid{
  grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
  gap: 16px;
}

.panel{
  border-color: var(--clinical-border);
  background: var(--clinical-panel);
}

.panel-head{
  min-height: 54px;
  background: #f3f6fa;
  border-bottom-color: var(--clinical-border);
}

.panel-head h3{
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-head h3::before{
  content: "";
  width: 5px;
  height: 22px;
  background: var(--clinical-blue);
  border-radius: 2px;
  flex: 0 0 auto;
}

.kpi-grid{
  gap: 12px;
}

.kpi{
  position: relative;
  min-height: 104px;
  background: linear-gradient(180deg,#fff,#fbfcff);
}

.kpi::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background: var(--clinical-blue);
}

.kpi .value{
  color:#0b1f3a;
  font-variant-numeric: tabular-nums;
}

.rule-banner{
  padding: 12px 14px;
}

.primary-btn,
.ghost-btn,
.small-btn{
  font-size: 15px;
  line-height: 1.1;
  white-space: nowrap;
}

.primary-btn{
  min-width: 96px;
}

.field input,
.field select,
.tag-row input,
.adjustment-row input,
.adjustment-row select{
  font-size: 15.5px;
}

table{
  border-spacing: 0;
}

th{
  position: sticky;
  top: 0;
  z-index: 2;
}

th,
td{
  line-height: 1.35;
}

td{
  color:#1f2937;
}

td:nth-child(1),
td:nth-child(2),
td:nth-child(3){
  font-weight: 650;
}

.name-cell{
  min-width: 150px;
}

.name-cell .small-btn{
  margin-left: 6px;
}

.pill-row{
  gap: 5px;
}

.pill{
  padding: 3px 8px;
}

.alert,
.sync-status{
  background: #fff;
  border-color: var(--clinical-border);
}

.dialog::backdrop{
  background: rgba(15, 23, 42, .55);
}

.dialog-head h3{
  font-size: 20px;
}

.icon-btn{
  border-radius: 3px;
  border: 1px solid transparent;
}

.icon-btn:hover{
  border-color: var(--clinical-border-dark);
  background: #fff;
}

#residentDialog .resident-form-layout{
  grid-template-columns: .88fr 1.12fr;
}

#residentDialog .ui-section.basic,
#residentDialog .ui-section.diet{
  background: #fbfcfe;
}

#residentDialog .ui-section.meal,
#residentDialog .ui-section.portion{
  background: #ffffff;
}

#residentDialog .ui-section h4{
  color:#152238;
}

#residentDialog .section-grid{
  gap: 10px;
}

#residentDialog .ui-section.basic .section-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#residentDialog .ui-section.diet .section-grid,
#residentDialog .ui-section.portion .section-grid{
  grid-template-columns: 1fr;
}

#residentDialog .tag-list,
#residentDialog .adjustment-list{
  min-height: 30px;
}

#residentDialog .fixed-adjustment-grid{
  background: #ffffff;
  padding: 10px;
}

#residentDialog .fixed-adjustment-grid .adjustment-row{
  grid-template-columns: 56px minmax(80px, 1fr);
}

#residentDialog .session-checks{
  padding: 6px 0;
}

#residentDialog .dialog-actions{
  background: #f8fafc;
}

#kitchenBoard .rule-banner{
  display: none;
}

#kitchenBoard .split-grid{
  grid-template-columns: 1fr 1fr;
}

#kitchenBoard .panel{
  border-color: #aeb8c7;
}

#kitchenBoard .panel-head{
  background: #e8eef6;
}

#kitchenBoard .panel-head h3::before{
  height: 30px;
}

table.kitchen-large-table th,
table.kitchen-large-table td{
  border-right: 1px solid #c7d0dd;
}

table.kitchen-large-table th:last-child,
table.kitchen-large-table td:last-child{
  border-right: 0;
}

table.kitchen-large-table tr.total-row td{
  background: #dce8f8 !important;
}

.extra-food-grid{
  padding: 12px;
}

.extra-food-card{
  border-radius: 6px;
  background: #ffffff;
}

.extra-food-card .name{
  color: var(--clinical-muted);
}

.extra-food-card .qty{
  color:#0b1f3a;
}

@media (max-width: 1200px){
  #residentDialog .resident-form-layout,
  .split-grid,
  #kitchenBoard .split-grid{
    grid-template-columns: 1fr;
  }
}

/* ===== Harmonious light theme: no black chrome ===== */
:root{
  --bg: #f7f6f1;
  --surface: #fffefa;
  --surface-soft: #f3f7f4;
  --line: #d9ddd3;
  --line-strong: #bac4b8;
  --ink: #243128;
  --muted: #68736b;
  --accent: #4d8ec7;
  --accent-dark: #3275ad;
  --ok: #4f8f63;
  --warn: #b47a35;
  --danger: #c35a55;
  --clinical-bg: #f7f6f1;
  --clinical-panel: #fffefa;
  --clinical-panel-alt: #f3f7f4;
  --clinical-border: #d9ddd3;
  --clinical-border-dark: #bac4b8;
  --clinical-text: #243128;
  --clinical-muted: #68736b;
  --clinical-blue: #4d8ec7;
  --clinical-blue-soft: #edf6fb;
}

body{
  background:
    linear-gradient(180deg, #fbfaf6 0%, #f7f6f1 42%, #f3f6f2 100%);
  color: var(--ink);
}

.sidebar{
  background: linear-gradient(180deg, #fffefa, #f1f6f2);
  color: var(--ink);
  border-right: 1px solid #dce1d8;
  box-shadow: 8px 0 22px rgba(94, 107, 94, .07);
}

.brand{
  border-bottom-color: #dce1d8;
}

.brand-mark{
  background: linear-gradient(145deg, #7bb89f, #4d8ec7);
  color: #ffffff;
}

.brand h1{
  color: #243128;
}

.brand p{
  color: #6f7b72;
}

.nav-btn{
  color: #405044;
  border-radius: 8px;
}

.nav-btn:hover{
  color: #264333;
  background: #edf6ef;
}

.nav-btn.active{
  color: #1f3d2c;
  background: linear-gradient(180deg, #e8f5ee, #dcefe5);
  box-shadow: inset 4px 0 0 #6aa889;
}

.sidebar .ghost-btn{
  background: #fffefa;
  color: #405044;
  border-color: #cbd5ca;
}

.topbar,
.panel,
.kpi,
.dialog{
  background: var(--surface);
  border-color: var(--line);
}

.topbar{
  background: linear-gradient(180deg, #fffefa, #f8fbf7);
  box-shadow: 0 10px 28px rgba(77, 100, 82, .07);
}

.panel{
  box-shadow: 0 12px 28px rgba(77, 100, 82, .06);
}

.panel-head,
.dialog-head{
  background: linear-gradient(180deg, #f7faf7, #eef6f0);
  border-bottom-color: #d9ddd3;
}

.panel-head h3::before{
  background: #6aa889;
}

.rule-banner{
  border-color: #c9dfd1;
  border-left-color: #6aa889;
  background: #eef8f1;
  color: #2d3b31;
}

.kpi{
  background: linear-gradient(180deg, #fffefa, #f8fbf7);
}

.kpi::before{
  background: #6aa889;
}

.kpi .label{
  color: #667268;
}

.kpi .value,
.extra-food-card .qty{
  color: #28382d;
}

.kitchen-extra-table td {
  vertical-align: top;
}

.kitchen-extra-table .extra-person {
  display: inline-block;
  margin: 2px 8px 2px 0;
  padding: 3px 8px;
  border: 1px solid #d9ddd3;
  border-radius: 999px;
  background: #f8fbf7;
  color: #28382d;
  white-space: nowrap;
}

.kitchen-extra-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.kitchen-extra-task-card .name {
  color: #4f6f59;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.kitchen-extra-task-card .qty {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
}

.kitchen-extra-task-card .meta {
  color: #4f5f55;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
}

.kitchen-extra-task-card .name,
.kitchen-extra-task-card .qty,
.kitchen-extra-task-card .meta,
.kitchen-extra-task-card .meta * {
  font-size: 32px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
}

.kitchen-extra-table th,
.kitchen-extra-table td,
.kitchen-extra-table .muted-text,
.kitchen-extra-table .extra-person,
.kitchen-extra-table strong,
.kitchen-extra-table span {
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.kitchen-extra-table .extra-person {
  padding: 5px 10px;
}

.floor-extra-serving-table td {
  vertical-align: top;
}

.floor-extra-serving-table th:first-child,
.floor-extra-serving-table td:first-child {
  width: 72px;
  white-space: nowrap;
}

.kitchen-floor-extra {
  margin-top: 12px;
}

.kitchen-floor-extra h4 {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #bac4b8;
  border-bottom: 0;
  background: #e8f2eb;
  color: #26352b;
  font-size: 28px;
  font-weight: 800;
}

.kitchen-floor-extra-table td {
  font-size: 28px !important;
  line-height: 1.18 !important;
}

.kitchen-floor-extra-table th:first-child,
.kitchen-floor-extra-table td:first-child {
  width: 14% !important;
  white-space: nowrap !important;
}

/* Keep extra food beside cooking workflow instead of after floor distribution. */
#production.view:not(.active),
#kitchenBoard.view:not(.active) {
  display: none !important;
}

#production.view.active,
#kitchenBoard.view.active {
  display: flex !important;
  flex-direction: column;
}

#production .split-grid,
#kitchenBoard .split-grid {
  order: 1;
}

#production .panel:has(#adjustmentProduction),
#kitchenBoard .panel:has(#kitchenExtraCards) {
  order: 2;
}

#production .panel:has(#restrictionProduction),
#kitchenBoard .panel:has(#kitchenFloorLarge) {
  order: 3;
}

.primary-btn{
  background: #4d8ec7;
  border-color: #4d8ec7;
  color: #ffffff;
}

.primary-btn:hover{
  background: #3275ad;
  border-color: #3275ad;
}

.ghost-btn,
.small-btn,
.alert-action{
  background: #fffefa;
  border-color: #cbd5ca;
  color: #33433a;
}

.ghost-btn:hover,
.small-btn:hover,
.alert-action:hover{
  background: #eef8f1;
  border-color: #8fbaa0;
  color: #2f6f4f;
}

.field span,
.check-field span{
  color: #526157;
}

.field input,
.field select,
.tag-row input,
.adjustment-row input,
.adjustment-row select{
  background: #fffefa;
  border-color: #cfd8cf;
  color: #243128;
}

.field input:focus,
.field select:focus,
.tag-row input:focus,
.adjustment-row input:focus,
.adjustment-row select:focus{
  outline-color: #6aa889;
  border-color: #6aa889;
}

.check-field input{
  accent-color: #4d8ec7;
}

th{
  background: #edf3ee;
  color: #26352b;
}

td{
  color: #2b382f;
}

tbody tr:nth-child(even) td{
  background: #fbfbf7;
}

tr:hover td,
.sticky-table tr:hover td:nth-child(-n + 3){
  background: #eef8f1;
}

tr.total-row td{
  background: #e4f0e8 !important;
  border-top-color: #9cb8a5;
}

.pill{
  background: #edf6fb;
  color: #3275ad;
}

.pill.warn{
  background: #fff4e5;
  color: #9a672f;
}

.pill.danger{
  background: #fff0ee;
  color: #a54843;
}

.pill.ok{
  background: #e7f5ea;
  color: #3d7a4f;
}

.alert,
.sync-status{
  background: #fffefa;
  border-color: #d9ddd3;
}

.dialog::backdrop{
  background: rgba(63, 76, 64, .42);
}

.icon-btn:hover{
  border-color: #cbd5ca;
  background: #eef8f1;
}

#residentDialog .ui-section,
#residentDialog .ui-section.meal,
#residentDialog .ui-section.portion{
  background: #fffefa;
  border-color: #d9ddd3;
}

#residentDialog .ui-section.basic,
#residentDialog .ui-section.diet{
  background: #f8fbf7;
}

#residentDialog .ui-section h4{
  color: #26352b;
  border-bottom-color: #dfe6dc;
}

#residentDialog .ui-section.meal .check-field,
#residentDialog .tag-editor,
#residentDialog .adjustment-editor,
#residentDialog .fixed-adjustment-grid,
#residentDialog .dialog-actions{
  background: #f8fbf7;
  border-color: #d9ddd3;
}

.tag-item{
  background: #fff3df;
  color: #936327;
}

.adjustment-item{
  background: #edf6fb;
  color: #3275ad;
}

#kitchenBoard .panel{
  border-color: #bac4b8;
}

#kitchenBoard .panel-head{
  background: #e8f2eb;
}

#kitchenBoard .panel-head h3::before{
  background: #4f8f63;
}

table.kitchen-large-table th{
  background: #e2eee6;
  color: #26352b;
}

table.kitchen-large-table th,
table.kitchen-large-table td{
  border-right-color: #cbd5ca;
}

table.kitchen-large-table tr.total-row td{
  background: #dceee2 !important;
}

.extra-food-card{
  background: #fffefa;
  border-color: #d9ddd3;
}

.extra-food-card .name{
  color: #667268;
}

/* ===== A3 print should match kitchen large-board UI ===== */
@page {
  size: A3 landscape;
  margin: 7mm;
}

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body {
    background: #f7f6f1 !important;
    color: #243128 !important;
  }

  .app-shell {
    display: block !important;
    min-height: auto !important;
  }

  .sidebar,
  .topbar,
  .rule-banner,
  .kitchen-print-actions,
  .view:not(#kitchenBoard) {
    display: none !important;
  }

  .content {
    padding: 0 !important;
    max-width: none !important;
  }

  #kitchenBoard {
    display: grid !important;
    gap: 4mm !important;
    background: #f7f6f1 !important;
  }

  #kitchenBoard .print-title {
    display: block !important;
    text-align: center !important;
    color: #243128 !important;
    font-size: 22pt !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    margin: 0 0 2mm !important;
  }

  #kitchenBoard .split-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4mm !important;
  }

  #kitchenBoard .panel {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    border: 0.45mm solid #bac4b8 !important;
    border-radius: 3mm !important;
    background: #fffefa !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  #kitchenBoard .panel-head {
    min-height: auto !important;
    padding: 3mm 4mm !important;
    background: #e8f2eb !important;
    border-bottom: 0.4mm solid #bac4b8 !important;
  }

  #kitchenBoard .panel-head h3 {
    display: flex !important;
    align-items: center !important;
    gap: 2mm !important;
    color: #26352b !important;
    font-size: 22pt !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    margin: 0 !important;
  }

  #kitchenBoard .panel-head h3::before {
    content: "" !important;
    display: inline-block !important;
    width: 1.4mm !important;
    height: 9mm !important;
    border-radius: 1mm !important;
    background: #4f8f63 !important;
    flex: 0 0 auto !important;
  }

  #kitchenBoard .table-wrap {
    overflow: visible !important;
  }

  table.kitchen-large-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  table.kitchen-large-table th,
  table.kitchen-large-table td {
    display: table-cell !important;
    border-bottom: 0.35mm solid #bac4b8 !important;
    border-right: 0.35mm solid #cbd5ca !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    vertical-align: top !important;
    color: #26352b !important;
  }

  table.kitchen-large-table th:last-child,
  table.kitchen-large-table td:last-child {
    border-right: 0 !important;
  }

  table.kitchen-large-table th {
    background: #e2eee6 !important;
    font-size: 17pt !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    padding: 2.2mm 3mm !important;
  }

  table.kitchen-large-table td {
    background: #fffefa !important;
    font-size: 29pt !important;
    line-height: 1.06 !important;
    font-weight: 800 !important;
    padding: 3mm !important;
  }

  table.kitchen-large-table tbody tr:nth-child(even) td {
    background: #f4faf5 !important;
  }

  table.kitchen-large-table tr.total-row td {
    background: #dceee2 !important;
  }

  table.kitchen-large-table td .chef-pair {
    display: grid !important;
    gap: 1.2mm !important;
  }

  table.kitchen-large-table td .chef-pair span {
    font-size: 22pt !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
  }

  #kitchenExtraCards .extra-food-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3mm !important;
    padding: 3mm !important;
  }

  #kitchenExtraCards .extra-food-card {
    border: 0.35mm solid #d9ddd3 !important;
    border-radius: 2mm !important;
    background: #fffefa !important;
    padding: 3mm !important;
  }

  #kitchenExtraCards .extra-food-card .name {
    font-size: 15pt !important;
    font-weight: 800 !important;
  }

  #kitchenExtraCards .extra-food-card .qty {
    font-size: 30pt !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  #kitchenExtraCards .extra-food-card .meta {
    font-size: 13pt !important;
  }
}

/* ===== Final resident dialog stability fixes ===== */
#residentDialog .resident-form-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  gap: 10px !important;
  align-items: start !important;
}

#residentDialog .form-grid.section-grid,
#residentDialog .ui-section.basic .section-grid,
#residentDialog .ui-section.meal .section-grid,
#residentDialog .ui-section.diet .section-grid,
#residentDialog .ui-section.portion .section-grid {
  display: grid !important;
  width: 100% !important;
}

#residentDialog .ui-section.basic .section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#residentDialog .ui-section.meal .section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#residentDialog .ui-section.diet .section-grid,
#residentDialog .ui-section.portion .section-grid {
  grid-template-columns: 1fr !important;
}

#residentDialog .field,
#residentDialog .check-field,
#residentDialog .adjustment-row {
  min-width: 0 !important;
  max-width: 100% !important;
}

#residentDialog .field input,
#residentDialog .field select,
#residentDialog .adjustment-row input,
#residentDialog .adjustment-row select,
#residentDialog .tag-row input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#residentDialog .ui-section {
  min-width: 0 !important;
  overflow: hidden !important;
}

#residentDialog .extra-food-row {
  grid-template-columns: 72px minmax(0, 1fr) minmax(72px, 0.45fr) !important;
}

#residentDialog .extra-food-row:has(#extraFoodCategory),
#residentDialog .extra-food-row:has(#extraFoodName) {
  grid-template-columns: 72px minmax(0, 1fr) !important;
}

@media (max-width: 1200px) {
  #residentDialog .resident-form-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Portion stepper and editable extra-food cards ===== */
#residentDialog .stepper-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 10px !important;
  background: #fffefa !important;
  border: 1px solid #d9ddd3 !important;
  border-radius: 8px !important;
}

#residentDialog .portion-stepper-row {
  display: grid !important;
  grid-template-columns: 56px 38px 72px 38px !important;
  gap: 6px !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 6px !important;
  border: 1px solid #dce4d9 !important;
  border-radius: 8px !important;
  background: #f8fbf7 !important;
}

#residentDialog .portion-stepper-row span {
  color: #33443a !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#residentDialog .portion-stepper-row input {
  width: 72px !important;
  height: 38px !important;
  min-height: 38px !important;
  text-align: center !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 0 6px !important;
}

#residentDialog .stepper-btn {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #b8c7b6 !important;
  border-radius: 8px !important;
  background: #fffefa !important;
  color: #243128 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#residentDialog .stepper-btn:hover {
  background: #eaf5ee !important;
  border-color: #6aa889 !important;
}

#residentDialog .check-field:has(#enableExtraFoods) {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 38px !important;
  padding: 6px 10px !important;
  margin-top: 4px !important;
  border: 1px solid #d9ddd3 !important;
  border-radius: 8px !important;
  background: #fffefa !important;
}

#residentDialog #extraFoodConfig {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d9ddd3;
  border-radius: 8px;
  background: #f8fbf7;
}

#residentDialog #extraFoodConfig.hidden {
  display: none !important;
}

#residentDialog .extra-food-row {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
}

#residentDialog .extra-food-row:has(#extraFoodQty) {
  grid-template-columns: 72px 100px minmax(80px, 1fr) !important;
}

#residentDialog .extra-food-row > span {
  font-weight: 700 !important;
  color: #526157 !important;
}

#residentDialog #extraFoodItems.adjustment-list {
  display: grid !important;
  gap: 8px !important;
  min-height: 0 !important;
}

.extra-food-item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d9ddd3;
  border-radius: 8px;
  background: #fffefa;
}

.extra-food-item-title {
  color: #243128;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.extra-food-item-meta {
  margin-top: 3px;
  color: #667268;
  font-size: 13px;
  line-height: 1.35;
}

.extra-food-item-actions {
  display: flex;
  gap: 6px;
}

.danger-btn {
  color: #a54843 !important;
  border-color: #e2b8b3 !important;
}

.danger-btn:hover {
  background: #fff0ee !important;
}

.empty-inline {
  color: #667268;
  font-size: 14px;
  padding: 4px 0;
}

.muted-text {
  color: #6f7a72;
  font-size: 14px;
}

#rules .split-grid {
  grid-template-columns: 1fr;
}

#subRuleTable {
  overflow-x: visible;
}

#subRuleTable table {
  table-layout: fixed;
  min-width: 0;
}

#subRuleTable th,
#subRuleTable td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

#subRuleTable th,
#subRuleTable td {
  width: auto;
}

.rule-food-cell {
  display: grid;
  grid-template-columns: minmax(70px, 1.2fr) 20px minmax(80px, 1.2fr) 78px 96px 58px 58px;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 760px;
}

.rule-food-cell strong,
.rule-to {
  font-size: 15px;
  color: #243128;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rule-arrow {
  color: #6f7a72;
  font-weight: 800;
  text-align: center;
}

.rule-status,
.rule-related,
.rule-edit,
.rule-delete {
  display: inline-flex;
  align-items: center;
}

.rule-related,
.rule-edit,
.rule-delete {
  justify-content: center;
}

.rule-related .small-btn,
.rule-edit .small-btn,
.rule-delete .small-btn {
  width: 100%;
  justify-content: center;
}

.rule-related .muted-text {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

.rule-action-buttons {
  display: inline-flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .rule-food-cell {
    grid-template-columns: minmax(64px, 1fr) 18px minmax(70px, 1fr) 76px;
  }

  .rule-related,
  .rule-edit,
  .rule-delete {
    justify-content: start;
  }
}

#residentDialog .ui-section.section-focus {
  border-color: #4f8f63 !important;
  box-shadow: 0 0 0 3px rgba(79, 143, 99, .18), 0 10px 24px rgba(79, 143, 99, .12) !important;
}

.rule-resident-list {
  display: grid;
  gap: 8px;
  padding: 14px 0 4px;
}

.rule-resident-card {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #d6dfd2;
  border-radius: 10px;
  background: #fbfdf8;
  color: #1f2d24;
  cursor: pointer;
}

.rule-resident-card:hover {
  border-color: #6aa889;
  background: #edf7ef;
}

.rule-resident-main {
  font-size: 16px;
  font-weight: 800;
}

.rule-resident-meta {
  color: #627067;
  font-size: 13px;
  line-height: 1.35;
}

.hms-sync-sections {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.hms-sync-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.hms-sync-section h4 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  font-weight: 800;
}

.hms-action-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  padding: 12px;
}

.hms-action-card {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #d6dfd2;
  border-radius: 9px;
  background: #fbfdf8;
  color: #1f2d24;
  cursor: pointer;
}

.hms-action-card:hover {
  border-color: #6aa889;
  background: #edf7ef;
}

.hms-action-main {
  font-size: 16px;
  font-weight: 800;
}

.hms-action-meta {
  color: #627067;
  font-size: 13px;
  line-height: 1.35;
}

.staff-meal-table th,
.staff-meal-table td {
  vertical-align: middle;
}

.staff-meal-table input[type="text"],
.staff-meal-table input:not([type]),
.staff-meal-table select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 9px;
  background: #fff;
}

.staff-date-row td {
  background: #eef7ef;
  color: #23352b;
}

.staff-date-row td strong {
  font-size: 17px;
  margin-right: 14px;
}

.staff-date-row td span {
  color: var(--muted);
  margin-right: 14px;
}

.staff-meal-production-table td:last-child,
.staff-kitchen-table td:last-child {
  white-space: normal;
}

.staff-meal-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #fbfdf8;
}

.staff-meal-toolbar span {
  color: var(--muted);
  font-size: 14px;
}

.staff-paste-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.staff-directory-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  flex-wrap: wrap;
}

.staff-directory-status {
  color: var(--muted);
  font-weight: 700;
}

.staff-rule-panel,
.staff-direct-grid {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.staff-direct-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  align-items: end;
}

.staff-direct-grid .wide {
  grid-column: 1 / -1;
}

.staff-picker-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
}

.staff-paste-panel textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  line-height: 1.45;
}

.staff-paste-preview-table td,
.staff-paste-preview-table th {
  white-space: nowrap;
}

.staff-day-list {
  display: grid;
  gap: 14px;
  padding: 12px;
}

.staff-day-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.staff-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f0f7ef;
  border-bottom: 1px solid var(--line);
}

.staff-day-head h4 {
  margin: 0;
  font-size: 18px;
}

.staff-day-head span {
  color: var(--muted);
  font-size: 15px;
}

.staff-day-table th,
.staff-day-table td {
  vertical-align: middle;
}

.staff-manual-tag {
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff3d7;
  color: #8a5a00;
  font-size: 12px;
  font-weight: 600;
}

.staff-meal-matrix th {
  text-align: center;
  vertical-align: middle;
  min-width: 58px;
}

.staff-meal-matrix th:first-child,
.staff-meal-matrix td:first-child {
  min-width: 180px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}

.staff-meal-matrix th:nth-child(2),
.staff-meal-matrix td:nth-child(2) {
  min-width: 120px;
  position: sticky;
  left: 180px;
  z-index: 2;
  background: #fff;
}

.staff-meal-matrix thead th:first-child,
.staff-meal-matrix thead th:nth-child(2) {
  background: #eef7ef;
  z-index: 4;
}

.staff-meal-matrix th strong {
  display: block;
  font-size: 14px;
}

.staff-meal-matrix th span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.staff-meal-matrix td {
  text-align: center;
}

.staff-meal-matrix td input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

#extraFoodEditDialog .edit-quantity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#extraFoodEditDialog .session-checks,
#extraFoodEditDialog .weekday-checks {
  padding: 0;
}

@media (max-width: 760px) {
  #residentDialog .stepper-grid {
    grid-template-columns: 1fr !important;
  }

  #residentDialog .portion-stepper-row {
    width: 100% !important;
    grid-template-columns: 64px 42px 1fr 42px !important;
  }

  .extra-food-item-card {
    grid-template-columns: 1fr;
  }
}

/* ===== Final A3 portrait two-page kitchen print ===== */
@page {
  size: A3 portrait;
  margin: 8mm;
}

@media print {
  #kitchenBoard {
    display: block !important;
    width: 100% !important;
    background: #f7f6f1 !important;
  }

  #kitchenBoard .print-title {
    display: block !important;
    text-align: center !important;
    font-size: 24pt !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    margin: 0 0 5mm !important;
    color: #243128 !important;
  }

  #kitchenBoard .split-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5mm !important;
    break-after: auto !important;
    page-break-after: auto !important;
  }

  #kitchenBoard > .panel:nth-of-type(1) {
    margin-top: 0 !important;
  }

  #kitchenBoard .panel {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin: 0 0 5mm !important;
    border: 0.45mm solid #bac4b8 !important;
    border-radius: 3mm !important;
    overflow: hidden !important;
  }

  #kitchenBoard .panel:has(#kitchenExtraCards) {
    break-after: page !important;
    page-break-after: always !important;
  }

  #kitchenBoard .panel-head {
    padding: 3mm 4mm !important;
  }

  #kitchenBoard .panel-head h3 {
    font-size: 24pt !important;
    line-height: 1.12 !important;
  }

  table.kitchen-large-table {
    table-layout: fixed !important;
    width: 100% !important;
  }

  table.kitchen-large-table th {
    font-size: 18pt !important;
    line-height: 1.1 !important;
    padding: 2.5mm 3mm !important;
  }

  table.kitchen-large-table td {
    font-size: 30pt !important;
    line-height: 1.08 !important;
    padding: 3mm !important;
  }

  table.kitchen-large-table td .chef-pair span {
    font-size: 24pt !important;
    line-height: 1.08 !important;
  }

  #kitchenExtraCards .extra-food-grid,
  #kitchenExtraCards .kitchen-extra-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3mm !important;
    padding: 3mm !important;
  }

  #kitchenExtraCards .extra-food-card {
    padding: 3mm !important;
  }

  #kitchenExtraCards .extra-food-card .name,
  #kitchenExtraCards .extra-food-card .qty,
  #kitchenExtraCards .extra-food-card .meta,
  #kitchenExtraCards .extra-food-card .meta * {
    font-size: 22pt !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
  }
}

/* ===== Kitchen large-board label column width fixes ===== */
#kitchenDishLarge table.kitchen-large-table th:first-child,
#kitchenDishLarge table.kitchen-large-table td:first-child {
  width: 18% !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

#kitchenStapleLarge table.kitchen-large-table th:first-child,
#kitchenStapleLarge table.kitchen-large-table td:first-child {
  width: 14% !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

#kitchenFloorLarge table.kitchen-large-table th:first-child,
#kitchenFloorLarge table.kitchen-large-table td:first-child {
  width: 12% !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

#kitchenFloorLarge table.kitchen-large-table th:nth-child(2),
#kitchenFloorLarge table.kitchen-large-table td:nth-child(2) {
  width: 15% !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

@media print {
  #kitchenDishLarge table.kitchen-large-table th:first-child,
  #kitchenDishLarge table.kitchen-large-table td:first-child {
    width: 20% !important;
  }

  #kitchenStapleLarge table.kitchen-large-table th:first-child,
  #kitchenStapleLarge table.kitchen-large-table td:first-child {
    width: 16% !important;
  }

  #kitchenFloorLarge table.kitchen-large-table th:first-child,
  #kitchenFloorLarge table.kitchen-large-table td:first-child {
    width: 14% !important;
  }

  #kitchenFloorLarge table.kitchen-large-table th:nth-child(2),
  #kitchenFloorLarge table.kitchen-large-table td:nth-child(2) {
    width: 17% !important;
  }
}

/* ===== Final print: no fills, repeated titles ===== */
@media print {
  body,
  #kitchenBoard,
  #kitchenBoard .panel,
  #kitchenBoard .panel-head,
  #kitchenBoard table,
  #kitchenBoard thead,
  #kitchenBoard tbody,
  #kitchenBoard tr,
  #kitchenBoard th,
  #kitchenBoard td,
  #kitchenBoard .extra-food-card {
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  #kitchenBoard .panel,
  #kitchenBoard th,
  #kitchenBoard td,
  #kitchenBoard .extra-food-card {
    border-color: #111 !important;
  }

  #kitchenBoard th,
  #kitchenBoard td,
  #kitchenBoard .panel-head h3,
  #kitchenBoard .print-title,
  #kitchenBoard .extra-food-card * {
    color: #111 !important;
  }

  #kitchenBoard thead {
    display: table-header-group !important;
  }

  #kitchenBoard tfoot {
    display: table-footer-group !important;
  }

  #kitchenBoard .panel-head h3::before {
    background: #111 !important;
  }

  #kitchenBoard > section.panel:first-of-type::before {
    content: "基督教香港信義會恩海居\A廚房出餐表";
    display: block !important;
    white-space: pre-line !important;
    text-align: center !important;
    color: #111 !important;
    background: #fff !important;
    font-size: 24pt !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    padding: 0 0 5mm !important;
    margin: 0 !important;
  }
}

/* ===== Last-mile UI lock: keep this block at file end ===== */
:root {
  --ui-bg: #f5f7f2;
  --ui-surface: #fffefa;
  --ui-surface-soft: #f8fbf7;
  --ui-line: #d8dfd4;
  --ui-line-strong: #b8c6b3;
  --ui-text: #243128;
  --ui-accent: #4f8f63;
  --ui-accent-dark: #3f7651;
  --ui-danger: #b44943;
  --ui-radius: 8px;
}

body { background: var(--ui-bg) !important; color: var(--ui-text) !important; }
.sidebar,.topbar,.panel,.dialog { background: var(--ui-surface) !important; border-color: var(--ui-line) !important; }
.brand-mark { display:grid !important; place-items:center !important; width:42px !important; height:42px !important; border-radius:10px !important; background:#e6f2e9 !important; color:var(--ui-accent-dark) !important; font-size:22px !important; font-weight:800 !important; }
.brand h1,.topbar h2,.panel-head h3,.dialog-head h3 { color:var(--ui-text) !important; letter-spacing:0 !important; }
.nav-btn { min-height:42px !important; border-radius:var(--ui-radius) !important; color:var(--ui-text) !important; font-size:15px !important; font-weight:650 !important; }
.nav-btn.active { background:#e6f2e9 !important; color:var(--ui-accent-dark) !important; box-shadow:inset 3px 0 0 var(--ui-accent) !important; }
.panel { border-radius:var(--ui-radius) !important; box-shadow:0 10px 24px rgba(67,84,67,.06) !important; overflow:hidden !important; }
.panel-head,.dialog-head { min-height:54px !important; background:linear-gradient(180deg,#fbfdf9,#eef6f0) !important; border-bottom:1px solid var(--ui-line) !important; }
.panel-head h3 { font-size:20px !important; font-weight:800 !important; }
.rule-banner,.sync-status,.alert { border-color:var(--ui-line) !important; background:#f8fbf7 !important; color:var(--ui-text) !important; font-size:15px !important; line-height:1.5 !important; }
.primary-btn,.ghost-btn,.small-btn,.alert-action { min-height:40px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; border-radius:var(--ui-radius) !important; padding:0 14px !important; font-size:15px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; box-shadow:none !important; transform:none !important; }
.primary-btn { background:var(--ui-accent) !important; border:1px solid var(--ui-accent) !important; color:#fff !important; }
.primary-btn:hover { background:var(--ui-accent-dark) !important; border-color:var(--ui-accent-dark) !important; }
.ghost-btn,.small-btn,.alert-action { background:#fff !important; border:1px solid var(--ui-line-strong) !important; color:var(--ui-text) !important; }
.ghost-btn:hover,.small-btn:hover,.alert-action:hover { background:#f0f6f1 !important; border-color:var(--ui-accent) !important; }
.danger-btn { color:var(--ui-danger) !important; border-color:#e2b8b3 !important; }
.field span,.check-field span { color:#425044 !important; font-size:14px !important; font-weight:700 !important; }
.field input,.field select,.field textarea,.adjustment-row input,.adjustment-row select { min-height:42px !important; border:1px solid #cfd8cc !important; border-radius:6px !important; background:#fff !important; color:var(--ui-text) !important; font-size:16px !important; }
table { color:var(--ui-text) !important; font-size:15.5px !important; }
th { background:#eef5ef !important; color:#33443a !important; font-weight:800 !important; white-space:nowrap !important; }
td,th { border-bottom:1px solid var(--ui-line) !important; }
table.production-table th,table.production-table td { vertical-align:top !important; }
table.production-table th:not(:first-child),table.production-table td:not(:first-child) { text-align:left !important; font-variant-numeric:tabular-nums !important; }

#residentDialog { width:min(1220px,calc(100vw - 28px)) !important; max-width:1220px !important; }
#residentDialog form { max-height:min(900px,calc(100vh - 28px)) !important; }
#residentDialog .dialog-head { position:sticky !important; top:0 !important; z-index:4 !important; }
#residentDialog .resident-form-layout { grid-template-columns:minmax(300px,.84fr) minmax(520px,1.16fr) !important; gap:12px !important; padding:12px !important; background:#f5f7f2 !important; }
#residentDialog .ui-section { padding:12px !important; border:1px solid var(--ui-line) !important; border-radius:var(--ui-radius) !important; background:var(--ui-surface) !important; }
#residentDialog .ui-section h4 { display:flex !important; align-items:center !important; gap:8px !important; margin:0 0 12px !important; padding-bottom:8px !important; border-bottom:1px solid var(--ui-line) !important; font-size:19px !important; font-weight:800 !important; }
#residentDialog .ui-section h4::before { content:"" !important; width:4px !important; height:18px !important; border-radius:999px !important; background:var(--ui-accent) !important; }
#residentDialog .ui-section.basic .section-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
#residentDialog .ui-section.meal .section-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; align-items:end !important; }
#residentDialog .ui-section.meal .check-field { min-height:42px !important; padding:0 12px !important; border:1px solid var(--ui-line) !important; border-radius:6px !important; background:var(--ui-surface-soft) !important; }
#residentDialog .tag-editor,#residentDialog .adjustment-editor { border:1px solid var(--ui-line) !important; border-radius:var(--ui-radius) !important; background:var(--ui-surface-soft) !important; }
#residentDialog .tag-row { grid-template-columns:minmax(0,1fr) auto !important; align-items:stretch !important; }
#residentDialog .tag-row select:not(.hidden) + input.hidden { display:none !important; }
#residentDialog .stepper-grid { grid-template-columns:repeat(2,minmax(210px,1fr)) !important; gap:10px !important; padding:10px !important; border:0 !important; background:transparent !important; }
#residentDialog .portion-stepper-row { width:100% !important; grid-template-columns:56px 40px minmax(72px,1fr) 40px !important; gap:8px !important; padding:8px !important; border:1px solid var(--ui-line) !important; border-radius:var(--ui-radius) !important; background:#fff !important; }
#residentDialog .portion-stepper-row span { font-size:16px !important; }
#residentDialog .portion-stepper-row input { width:100% !important; height:40px !important; font-size:18px !important; }
#residentDialog .stepper-btn { width:40px !important; height:40px !important; border-radius:6px !important; font-size:22px !important; }
#residentDialog .check-field:has(#enableExtraFoods) { margin:10px 0 !important; padding:9px 12px !important; }
#residentDialog #extraFoodConfig { border-radius:var(--ui-radius) !important; background:#fff !important; }
#residentDialog .extra-food-row { grid-template-columns:72px minmax(0,1fr) !important; }
#residentDialog .extra-food-row:has(#extraFoodQty) { grid-template-columns:72px 112px minmax(90px,1fr) !important; }
#residentDialog .dialog-actions { position:sticky !important; bottom:0 !important; z-index:4 !important; padding:12px 16px !important; background:#fff !important; border-top:1px solid var(--ui-line) !important; }
.extra-food-item-card { border-radius:var(--ui-radius) !important; border-color:var(--ui-line) !important; }
.rule-food-cell { max-width:none !important; grid-template-columns:minmax(92px,1fr) 20px minmax(100px,1fr) 74px 90px 58px 58px !important; }
.rule-related .small-btn,.rule-edit .small-btn,.rule-delete .small-btn { min-width:58px !important; padding:0 8px !important; }
#kitchenBoard .panel { border-color:#b9c8b5 !important; }
#kitchenBoard .panel-head { background:#e8f2eb !important; }
#kitchenBoard .panel-head h3 { font-size:32px !important; }
table.kitchen-large-table th { background:#e2eee6 !important; font-size:30px !important; color:var(--ui-text) !important; }
table.kitchen-large-table td { font-size:52px !important; font-weight:850 !important; color:var(--ui-text) !important; }
table.kitchen-large-table td .chef-pair span { font-size:36px !important; }
.kitchen-extra-task-card .name,.kitchen-extra-task-card .qty,.kitchen-extra-task-card .meta,.kitchen-extra-task-card .meta *,.kitchen-extra-table th,.kitchen-extra-table td,.kitchen-extra-table .extra-person { color:var(--ui-text) !important; }

@media (max-width:1100px) {
  #residentDialog .resident-form-layout { grid-template-columns:1fr !important; }
}

@media print {
  body,#kitchenBoard,#kitchenBoard .panel,#kitchenBoard .panel-head,#kitchenBoard table,#kitchenBoard thead,#kitchenBoard tbody,#kitchenBoard tr,#kitchenBoard th,#kitchenBoard td,#kitchenBoard .extra-food-card,#kitchenBoard .kitchen-extra-task-card {
    background:#fff !important;
    background-image:none !important;
    box-shadow:none !important;
  }
  #kitchenBoard > section.panel:first-of-type::before {
    content:"\57fa\7763\6559\9999\6e2f\4fe1\7fa9\6703\6069\6d77\5c45\A\5eda\623f\51fa\9910\8868" !important;
    display:block !important;
    white-space:pre-line !important;
    text-align:center !important;
    color:#111 !important;
    background:#fff !important;
    font-size:24pt !important;
    line-height:1.12 !important;
    font-weight:800 !important;
    padding:0 0 5mm !important;
    margin:0 !important;
  }
}

/* ===== Final override: A3 kitchen print must fit within two pages ===== */
@page {
  size: A3 portrait;
  margin: 6mm;
}

@media print {
  body {
    margin: 0 !important;
    background: #fff !important;
  }

  body > *:not(#app),
  .sidebar,
  .topbar,
  #kitchenBoard .rule-banner,
  #kitchenBoard .kitchen-print-actions,
  #kitchenBoard .print-title,
  #dashboard,
  #residents,
  #sync,
  #production,
  #serving,
  #rules {
    display: none !important;
  }

  #app,
  .content,
  #kitchenBoard,
  #kitchenBoard.view,
  #kitchenBoard.view.active {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  #kitchenBoard {
    color: #111 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #kitchenBoard * {
    visibility: visible !important;
  }

  #kitchenBoard .split-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4mm !important;
  }

  #kitchenBoard .panel {
    display: block !important;
    width: 100% !important;
    margin: 0 0 4mm !important;
    border: 0.35mm solid #111 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
    background: #fff !important;
  }

  #kitchenBoard .panel:has(#kitchenExtraCards) {
    display: none !important;
  }

  #kitchenBoard .panel:has(#kitchenFloorLarge) {
    break-before: page !important;
    page-break-before: always !important;
  }

  #kitchenBoard .panel-head {
    min-height: 0 !important;
    padding: 2mm 3mm !important;
    border-bottom: 0.35mm solid #111 !important;
    background: #fff !important;
  }

  #kitchenBoard .panel-head h3 {
    display: flex !important;
    align-items: center !important;
    gap: 2mm !important;
    margin: 0 !important;
    color: #111 !important;
    font-size: 20pt !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }

  #kitchenBoard .panel-head h3::before {
    content: "" !important;
    display: inline-block !important;
    width: 1.2mm !important;
    height: 6mm !important;
    background: #111 !important;
    border-radius: 0 !important;
  }

  #kitchenBoard > .split-grid::before,
  #kitchenBoard .panel:has(#kitchenFloorLarge)::before {
    content: "\57fa\7763\6559\9999\6e2f\4fe1\7fa9\6703\6069\6d77\5c45\A\5eda\623f\51fa\9910\8868" !important;
    display: block !important;
    white-space: pre-line !important;
    text-align: center !important;
    color: #111 !important;
    background: #fff !important;
    font-size: 17pt !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    padding: 0 0 3mm !important;
    margin: 0 !important;
  }

  #kitchenBoard > section.panel:first-of-type::before {
    content: none !important;
    display: none !important;
  }

  #kitchenBoard .table-wrap {
    overflow: visible !important;
  }

  #kitchenBoard table.kitchen-large-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    page-break-inside: auto !important;
    background: #fff !important;
  }

  #kitchenBoard table.kitchen-large-table thead {
    display: table-header-group !important;
  }

  #kitchenBoard table.kitchen-large-table tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  #kitchenBoard table.kitchen-large-table th,
  #kitchenBoard table.kitchen-large-table td {
    border: 0.28mm solid #111 !important;
    border-left-width: 0 !important;
    border-right-width: 0.28mm !important;
    background: #fff !important;
    color: #111 !important;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  #kitchenBoard table.kitchen-large-table th:last-child,
  #kitchenBoard table.kitchen-large-table td:last-child {
    border-right-width: 0 !important;
  }

  #kitchenBoard table.kitchen-large-table th {
    padding: 1.5mm 2mm !important;
    font-size: 12pt !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }

  #kitchenBoard table.kitchen-large-table td {
    padding: 1.6mm 2mm !important;
    font-size: 21pt !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
  }

  #kitchenBoard table.kitchen-large-table td .chef-pair {
    display: grid !important;
    gap: 0.8mm !important;
  }

  #kitchenBoard table.kitchen-large-table td .chef-pair span {
    display: block !important;
    font-size: 15pt !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  #kitchenDishLarge table.kitchen-large-table th:first-child,
  #kitchenDishLarge table.kitchen-large-table td:first-child {
    width: 17% !important;
  }

  #kitchenDishLarge table.kitchen-large-table th:not(:first-child),
  #kitchenDishLarge table.kitchen-large-table td:not(:first-child) {
    width: 27.66% !important;
  }

  #kitchenStapleLarge table.kitchen-large-table th:first-child,
  #kitchenStapleLarge table.kitchen-large-table td:first-child {
    width: 16% !important;
  }

  #kitchenStapleLarge table.kitchen-large-table th:not(:first-child),
  #kitchenStapleLarge table.kitchen-large-table td:not(:first-child) {
    width: auto !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table th:first-child,
  #kitchenFloorLarge > table.kitchen-large-table td:first-child {
    width: 14% !important;
    white-space: nowrap !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table th:nth-child(2),
  #kitchenFloorLarge > table.kitchen-large-table td:nth-child(2) {
    width: 18% !important;
    white-space: nowrap !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table th:not(:first-child):not(:nth-child(2)),
  #kitchenFloorLarge > table.kitchen-large-table td:not(:first-child):not(:nth-child(2)) {
    width: auto !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table td {
    font-size: 19pt !important;
    line-height: 1.05 !important;
    padding-top: 1.1mm !important;
    padding-bottom: 1.1mm !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table td .chef-pair span {
    font-size: 12.5pt !important;
    white-space: nowrap !important;
  }

  #kitchenFloorLarge .kitchen-floor-extra {
    margin-top: 3mm !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  #kitchenFloorLarge .kitchen-floor-extra h4 {
    margin: 0 !important;
    padding: 2mm 3mm !important;
    border: 0.35mm solid #111 !important;
    border-bottom: 0 !important;
    color: #111 !important;
    background: #fff !important;
    font-size: 17pt !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
  }

  #kitchenFloorLarge table.kitchen-floor-extra-table th:first-child,
  #kitchenFloorLarge table.kitchen-floor-extra-table td:first-child {
    width: 20% !important;
    white-space: nowrap !important;
  }

  #kitchenFloorLarge table.kitchen-floor-extra-table th:nth-child(2),
  #kitchenFloorLarge table.kitchen-floor-extra-table td:nth-child(2) {
    width: 80% !important;
  }

  #kitchenFloorLarge table.kitchen-floor-extra-table td {
    font-size: 17pt !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* ===== A3 print final override: large text, max 2 pages ===== */
@page {
  size: A3 portrait;
  margin: 6mm;
}

@media print {
  #kitchenBoard {
    --a3-title-size: 19pt;
    --a3-section-size: 22pt;
    --a3-head-size: 17pt;
    --a3-main-size: 27pt;
    --a3-floor-size: 23pt;
    --a3-pair-size: 18pt;
    --a3-extra-size: 20pt;
  }

  #kitchenBoard .split-grid {
    display: block !important;
  }

  #kitchenBoard .panel {
    margin: 0 0 3mm !important;
    border: 0.35mm solid #111 !important;
  }

  #kitchenBoard .panel:has(#kitchenFloorLarge) {
    break-before: page !important;
    page-break-before: always !important;
    margin-bottom: 0 !important;
  }

  #kitchenBoard .panel:has(#kitchenExtraCards) {
    display: none !important;
  }

  #kitchenBoard > .split-grid::before,
  #kitchenBoard .panel:has(#kitchenFloorLarge)::before {
    font-size: var(--a3-title-size) !important;
    line-height: 1.05 !important;
    padding: 0 0 2mm !important;
  }

  #kitchenBoard .panel-head {
    padding: 1.4mm 2.4mm !important;
    border-bottom: 0.35mm solid #111 !important;
  }

  #kitchenBoard .panel-head h3 {
    font-size: var(--a3-section-size) !important;
    line-height: 1.02 !important;
  }

  #kitchenBoard .panel-head h3::before {
    height: 6mm !important;
    width: 1.1mm !important;
  }

  #kitchenBoard table.kitchen-large-table th {
    padding: 1mm 1.8mm !important;
    font-size: var(--a3-head-size) !important;
    line-height: 1 !important;
  }

  #kitchenBoard table.kitchen-large-table td {
    padding: 1mm 1.8mm !important;
    font-size: var(--a3-main-size) !important;
    line-height: 1.02 !important;
  }

  #kitchenBoard table.kitchen-large-table td .chef-pair {
    gap: 0.5mm !important;
  }

  #kitchenBoard table.kitchen-large-table td .chef-pair span {
    font-size: var(--a3-pair-size) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
  }

  #kitchenDishLarge table.kitchen-large-table th:first-child,
  #kitchenDishLarge table.kitchen-large-table td:first-child {
    width: 15% !important;
  }

  #kitchenStapleLarge table.kitchen-large-table th:first-child,
  #kitchenStapleLarge table.kitchen-large-table td:first-child {
    width: 15% !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table th:first-child,
  #kitchenFloorLarge > table.kitchen-large-table td:first-child {
    width: 13% !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table th:nth-child(2),
  #kitchenFloorLarge > table.kitchen-large-table td:nth-child(2) {
    width: 17% !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table td {
    padding-top: 0.8mm !important;
    padding-bottom: 0.8mm !important;
    font-size: var(--a3-floor-size) !important;
    line-height: 1 !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table td .chef-pair span {
    font-size: 16pt !important;
    line-height: 1 !important;
  }

  #kitchenFloorLarge .kitchen-floor-extra {
    margin-top: 2mm !important;
  }

  #kitchenFloorLarge .kitchen-floor-extra h4 {
    padding: 1.2mm 2.4mm !important;
    font-size: var(--a3-section-size) !important;
    line-height: 1 !important;
  }

  #kitchenFloorLarge table.kitchen-floor-extra-table th {
    font-size: var(--a3-head-size) !important;
  }

  #kitchenFloorLarge table.kitchen-floor-extra-table td {
    padding: 1mm 1.8mm !important;
    font-size: var(--a3-extra-size) !important;
    line-height: 1.05 !important;
  }
}

/* ===== Definitive A3 kitchen print layout: page 1 production + special items, page 2 floor split ===== */
@page {
  size: A3 portrait;
  margin: 6mm;
}

@media print {
  body > *:not(#app),
  .sidebar,
  .topbar,
  #kitchenBoard .rule-banner,
  #kitchenBoard .kitchen-print-actions,
  #kitchenBoard .print-title,
  #dashboard,
  #residents,
  #sync,
  #production,
  #tableware,
  #serving,
  #rules,
  #supervisor {
    display: none !important;
  }

  body,
  #app,
  .content,
  #kitchenBoard,
  #kitchenBoard.view,
  #kitchenBoard.view.active {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    color: #111 !important;
  }

  #kitchenBoard *,
  #kitchenBoard .panel,
  #kitchenBoard .panel-head,
  #kitchenBoard table,
  #kitchenBoard thead,
  #kitchenBoard tbody,
  #kitchenBoard tr,
  #kitchenBoard th,
  #kitchenBoard td {
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #111 !important;
    visibility: visible !important;
  }

  #kitchenBoard .split-grid {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2.4mm !important;
    margin: 0 !important;
    padding: 0 !important;
    break-after: auto !important;
    page-break-after: auto !important;
  }

  #kitchenBoard .panel:has(#kitchenExtraCards) {
    order: 2 !important;
    display: block !important;
    break-before: auto !important;
    page-break-before: auto !important;
    break-after: auto !important;
    page-break-after: auto !important;
  }

  #kitchenBoard .panel:has(#kitchenFloorLarge) {
    order: 3 !important;
    display: block !important;
    break-before: page !important;
    page-break-before: always !important;
    margin-bottom: 0 !important;
  }

  #kitchenBoard > .split-grid::before,
  #kitchenBoard .panel:has(#kitchenFloorLarge)::before {
    content: "\57fa\7763\6559\9999\6e2f\4fe1\7fa9\6703\6069\6d77\5c45\A\5eda\623f\51fa\9910\8868" !important;
    display: block !important;
    white-space: pre-line !important;
    text-align: center !important;
    font-size: 18pt !important;
    line-height: 1.06 !important;
    font-weight: 900 !important;
    padding: 0 0 2.4mm !important;
    margin: 0 !important;
  }

  #kitchenBoard .panel,
  #kitchenBoard .chef-panel {
    width: 100% !important;
    margin: 0 0 2.4mm !important;
    border: 0.32mm solid #111 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  #kitchenBoard .panel-head {
    min-height: 0 !important;
    padding: 1.2mm 2mm !important;
    border-bottom: 0.32mm solid #111 !important;
  }

  #kitchenBoard .panel-head h3 {
    margin: 0 !important;
    font-size: 18pt !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  #kitchenBoard .panel-head h3::before {
    width: 1mm !important;
    height: 5mm !important;
    background: #111 !important;
    border-radius: 0 !important;
  }

  #kitchenBoard .table-wrap {
    overflow: visible !important;
  }

  #kitchenBoard table.kitchen-large-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    page-break-inside: avoid !important;
  }

  #kitchenBoard table.kitchen-large-table thead {
    display: table-header-group !important;
  }

  #kitchenBoard table.kitchen-large-table tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  #kitchenBoard table.kitchen-large-table th,
  #kitchenBoard table.kitchen-large-table td {
    border: 0.25mm solid #111 !important;
    padding: 0.9mm 1.6mm !important;
    text-align: left !important;
    vertical-align: top !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  #kitchenBoard table.kitchen-large-table th {
    font-size: 12pt !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  #kitchenBoard table.kitchen-large-table td {
    font-size: 22pt !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
  }

  #kitchenBoard table.kitchen-large-table td .chef-pair {
    display: grid !important;
    gap: 0.3mm !important;
  }

  #kitchenBoard table.kitchen-large-table td .chef-pair span {
    display: block !important;
    font-size: 15pt !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  #kitchenDishLarge table.kitchen-large-table td:first-child,
  #kitchenStapleLarge table.kitchen-large-table td:first-child,
  #kitchenExtraCards table.kitchen-large-table td:first-child,
  #kitchenFloorLarge table.kitchen-large-table td:first-child,
  #kitchenFloorLarge table.kitchen-large-table td:nth-child(2) {
    white-space: nowrap !important;
  }

  #kitchenDishLarge table.kitchen-large-table th:first-child,
  #kitchenDishLarge table.kitchen-large-table td:first-child {
    width: 14% !important;
  }

  #kitchenStapleLarge table.kitchen-large-table th:first-child,
  #kitchenStapleLarge table.kitchen-large-table td:first-child {
    width: 15% !important;
  }

  #kitchenExtraCards table.kitchen-floor-extra-table th:first-child,
  #kitchenExtraCards table.kitchen-floor-extra-table td:first-child {
    width: 13% !important;
  }

  #kitchenExtraCards table.kitchen-floor-extra-table th:nth-child(2),
  #kitchenExtraCards table.kitchen-floor-extra-table td:nth-child(2) {
    width: 87% !important;
  }

  #kitchenExtraCards table.kitchen-floor-extra-table td {
    font-size: 18pt !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table {
    page-break-inside: auto !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table th:first-child,
  #kitchenFloorLarge > table.kitchen-large-table td:first-child {
    width: 13% !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table th:nth-child(2),
  #kitchenFloorLarge > table.kitchen-large-table td:nth-child(2) {
    width: 16% !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table td {
    font-size: 22pt !important;
    line-height: 1 !important;
    padding-top: 0.8mm !important;
    padding-bottom: 0.8mm !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table td .chef-pair span {
    font-size: 15pt !important;
    line-height: 1 !important;
  }
}

/* ===== Super-large A3 kitchen print: match on-screen large-board weight ===== */
@page {
  size: A3 portrait;
  margin: 6mm;
}

@media print {
  #kitchenBoard {
    --print-title-size: 20pt;
    --print-section-size: 24pt;
    --print-head-size: 19pt;
    --print-main-size: 41pt;
    --print-pair-size: 28pt;
    --print-floor-size: 36pt;
    --print-extra-size: 27pt;
  }

  #kitchenBoard > .split-grid::before,
  #kitchenBoard .panel:has(#kitchenFloorLarge)::before {
    font-size: var(--print-title-size) !important;
    line-height: 1.02 !important;
    padding: 0 0 2mm !important;
  }

  #kitchenBoard .split-grid {
    min-height: 255mm !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1.14fr) minmax(0, 0.86fr) !important;
    gap: 3mm !important;
  }

  #kitchenBoard .split-grid .panel,
  #kitchenBoard .panel:has(#kitchenExtraCards),
  #kitchenBoard .panel:has(#kitchenFloorLarge) {
    display: flex !important;
    flex-direction: column !important;
  }

  #kitchenBoard .panel:has(#kitchenExtraCards) {
    min-height: 126mm !important;
    margin-bottom: 0 !important;
  }

  #kitchenBoard .panel:has(#kitchenFloorLarge) {
    min-height: 395mm !important;
  }

  #kitchenBoard .panel-head {
    padding: 1.5mm 2.4mm !important;
  }

  #kitchenBoard .panel-head h3 {
    font-size: var(--print-section-size) !important;
    line-height: 1 !important;
  }

  #kitchenBoard .table-wrap,
  #kitchenBoard #kitchenDishLarge,
  #kitchenBoard #kitchenStapleLarge,
  #kitchenBoard #kitchenExtraCards,
  #kitchenBoard #kitchenFloorLarge {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #kitchenBoard table.kitchen-large-table {
    height: 100% !important;
  }

  #kitchenBoard table.kitchen-large-table th {
    font-size: var(--print-head-size) !important;
    line-height: 1 !important;
    padding: 1mm 1.6mm !important;
  }

  #kitchenBoard table.kitchen-large-table td {
    font-size: var(--print-main-size) !important;
    line-height: 0.98 !important;
    padding: 1.1mm 1.6mm !important;
  }

  #kitchenBoard table.kitchen-large-table td .chef-pair {
    gap: 0.8mm !important;
  }

  #kitchenBoard table.kitchen-large-table td .chef-pair span {
    font-size: var(--print-pair-size) !important;
    line-height: 1 !important;
  }

  #kitchenDishLarge table.kitchen-large-table th:first-child,
  #kitchenDishLarge table.kitchen-large-table td:first-child {
    width: 15% !important;
  }

  #kitchenStapleLarge table.kitchen-large-table th:first-child,
  #kitchenStapleLarge table.kitchen-large-table td:first-child {
    width: 15% !important;
  }

  #kitchenExtraCards table.kitchen-floor-extra-table th:first-child,
  #kitchenExtraCards table.kitchen-floor-extra-table td:first-child {
    width: 12% !important;
  }

  #kitchenExtraCards table.kitchen-floor-extra-table th:nth-child(2),
  #kitchenExtraCards table.kitchen-floor-extra-table td:nth-child(2) {
    width: 88% !important;
  }

  #kitchenExtraCards table.kitchen-floor-extra-table td {
    font-size: var(--print-extra-size) !important;
    line-height: 1.06 !important;
    padding: 1.3mm 2mm !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table td {
    font-size: var(--print-floor-size) !important;
    line-height: 0.98 !important;
    padding: 0.8mm 1.6mm !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table th:first-child,
  #kitchenFloorLarge > table.kitchen-large-table td:first-child {
    width: 13% !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table th:nth-child(2),
  #kitchenFloorLarge > table.kitchen-large-table td:nth-child(2) {
    width: 16% !important;
  }

  #kitchenFloorLarge > table.kitchen-large-table td .chef-pair span {
    font-size: 24pt !important;
    line-height: 1 !important;
  }
}

body.auth-locked .sidebar,
body.auth-locked .topbar {
  display: none !important;
}

body.auth-locked .app-shell {
  grid-template-columns: 1fr;
}

body.auth-locked .content {
  min-height: 100vh;
  padding: 0;
  display: grid;
  place-items: center;
}

body.auth-locked .login-view {
  width: min(460px, calc(100vw - 32px));
}

body.auth-locked .login-card {
  margin: 0;
}

/* ===== Lovable-inspired final design layer =====
   光感、玻璃感、圓角與克制動畫；不改餐務計算，不影響 A3 列印。 */
:root {
  --lov-bg: #fbf8f1;
  --lov-bg-2: #eef8ef;
  --lov-surface: rgba(255,255,252,.78);
  --lov-surface-solid: #fffdf7;
  --lov-surface-strong: rgba(255,255,255,.92);
  --lov-text: #263629;
  --lov-muted: #6f7b6c;
  --lov-line: rgba(80,111,82,.18);
  --lov-line-strong: rgba(80,111,82,.32);
  --lov-mint: #65b878;
  --lov-mint-strong: #3f9660;
  --lov-sage: #dff0e3;
  --lov-lilac: #eee8ff;
  --lov-coral: #f29f82;
  --lov-cream: #fff5df;
  --lov-focus: rgba(101,184,120,.26);
  --lov-shadow: 0 24px 70px rgba(57,78,55,.14);
  --lov-shadow-soft: 0 14px 36px rgba(57,78,55,.09);
  --lov-radius-lg: 28px;
  --lov-radius: 18px;
  --lov-radius-sm: 12px;
  --lov-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --lov-med: 420ms cubic-bezier(.2,.8,.2,1);
}

@keyframes viewEnter {
  from { opacity: 0; transform: translateY(12px) scale(.992); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes panelRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(16px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(101,184,120,0); }
  50% { box-shadow: 0 0 0 7px rgba(101,184,120,.12); }
}

html {
  background: var(--lov-bg) !important;
}

body {
  color: var(--lov-text) !important;
  background:
    linear-gradient(135deg, rgba(255,246,226,.95) 0%, rgba(241,249,239,.92) 42%, rgba(243,238,255,.9) 100%) !important;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    linear-gradient(115deg, rgba(101,184,120,.16), transparent 38%),
    linear-gradient(245deg, rgba(242,159,130,.18), transparent 42%),
    linear-gradient(0deg, rgba(255,255,255,.36), rgba(255,255,255,.14));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .22;
  background-image:
    linear-gradient(rgba(38,54,41,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,54,41,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.58), transparent 76%);
}

.app-shell {
  gap: 18px !important;
  padding: 16px !important;
  background: transparent !important;
}

.sidebar {
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  border-right: 1px solid rgba(255,255,255,.6) !important;
  border-radius: var(--lov-radius-lg) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(245,251,244,.66)) !important;
  box-shadow: var(--lov-shadow-soft) !important;
  backdrop-filter: blur(22px) saturate(1.24) !important;
}

.brand {
  align-items: center !important;
  padding: 16px 10px 18px !important;
  border-bottom: 1px solid var(--lov-line) !important;
}

.brand-mark {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--lov-mint), #8ed7a5 52%, var(--lov-coral)) !important;
  box-shadow: 0 14px 30px rgba(101,184,120,.28) !important;
}

.brand h1,
.topbar h2,
.panel-head h3,
.dialog-head h3 {
  color: var(--lov-text) !important;
  letter-spacing: 0 !important;
}

.brand p,
.eyebrow,
.muted,
.kpi .label,
.staff-day-head span {
  color: var(--lov-muted) !important;
}

.nav {
  gap: 7px !important;
  padding-top: 12px !important;
}

.nav-btn {
  min-height: 44px !important;
  border-radius: 16px !important;
  color: var(--lov-text) !important;
  font-size: 15px !important;
  font-weight: 720 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: transform var(--lov-fast), background var(--lov-fast), box-shadow var(--lov-fast), border-color var(--lov-fast) !important;
}

.nav-btn:hover {
  transform: translateX(3px) !important;
  background: rgba(255,255,255,.62) !important;
  border-color: var(--lov-line) !important;
  box-shadow: 0 10px 24px rgba(67,84,67,.08) !important;
}

.nav-btn.active {
  color: #244a31 !important;
  background: linear-gradient(135deg, rgba(223,240,227,.95), rgba(238,232,255,.74)) !important;
  border-color: rgba(101,184,120,.32) !important;
  box-shadow: inset 3px 0 0 var(--lov-mint), 0 14px 28px rgba(101,184,120,.16) !important;
}

.content {
  padding: 0 !important;
}

.topbar {
  position: sticky !important;
  top: 16px !important;
  z-index: 20 !important;
  margin: 0 0 18px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: var(--lov-radius-lg) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(246,255,246,.7) 58%, rgba(248,242,255,.72)) !important;
  box-shadow: var(--lov-shadow) !important;
  backdrop-filter: blur(24px) saturate(1.22) !important;
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--lov-radius-lg) - 1px);
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,.72), transparent 40%, rgba(101,184,120,.14));
}

.topbar > * {
  position: relative;
  z-index: 1;
}

.topbar h2 {
  font-size: clamp(26px, 2.1vw, 38px) !important;
  font-weight: 880 !important;
  line-height: 1.05 !important;
}

.eyebrow {
  font-size: 13px !important;
  font-weight: 780 !important;
  text-transform: none !important;
}

.view.active {
  animation: viewEnter var(--lov-med) both !important;
}

.panel,
.kpi,
.login-card,
.dialog,
.staff-day-card {
  border: 1px solid rgba(255,255,255,.66) !important;
  background: var(--lov-surface) !important;
  border-radius: var(--lov-radius) !important;
  box-shadow: var(--lov-shadow-soft) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
}

.panel {
  overflow: hidden !important;
  animation: panelRise 520ms cubic-bezier(.2,.8,.2,1) both !important;
}

.panel:hover,
.kpi:hover,
.staff-day-card:hover {
  box-shadow: 0 22px 52px rgba(57,78,55,.14) !important;
  transform: translateY(-1px) !important;
}

.panel,
.kpi,
.staff-day-card {
  transition: transform var(--lov-fast), box-shadow var(--lov-fast), border-color var(--lov-fast) !important;
}

.panel-head,
.dialog-head,
.staff-day-head {
  min-height: 58px !important;
  border-bottom: 1px solid var(--lov-line) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(223,240,227,.54), rgba(238,232,255,.45)) !important;
}

.panel-head h3 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 21px !important;
  font-weight: 860 !important;
}

.panel-head h3::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--lov-mint), var(--lov-coral)) !important;
}

.kpi {
  min-height: 112px !important;
  padding: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,245,223,.5)) !important;
}

.kpi .label {
  font-size: 14px !important;
  font-weight: 760 !important;
}

.kpi .value {
  margin-top: 8px !important;
  color: var(--lov-text) !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  font-weight: 900 !important;
  line-height: .98 !important;
}

.primary-btn,
.ghost-btn,
.small-btn,
.alert-action,
button {
  border-radius: 15px !important;
  transition: transform var(--lov-fast), box-shadow var(--lov-fast), background var(--lov-fast), border-color var(--lov-fast) !important;
}

.primary-btn {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--lov-mint-strong), var(--lov-mint) 58%, #86d3a1) !important;
  box-shadow: 0 13px 28px rgba(63,150,96,.25) !important;
}

.primary-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 34px rgba(63,150,96,.32) !important;
  filter: saturate(1.08) !important;
}

.ghost-btn,
.small-btn,
.alert-action {
  color: var(--lov-text) !important;
  border: 1px solid var(--lov-line-strong) !important;
  background: rgba(255,255,255,.66) !important;
}

.ghost-btn:hover,
.small-btn:hover,
.alert-action:hover {
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 12px 26px rgba(67,84,67,.10) !important;
}

input,
select,
textarea {
  border: 1px solid var(--lov-line-strong) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.82) !important;
  color: var(--lov-text) !important;
  transition: box-shadow var(--lov-fast), border-color var(--lov-fast), background var(--lov-fast) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--lov-mint) !important;
  background: #fff !important;
  box-shadow: 0 0 0 5px var(--lov-focus) !important;
  animation: softPulse 1.2s ease-out 1 !important;
}

table {
  border-color: var(--lov-line) !important;
  background: rgba(255,255,255,.76) !important;
}

thead th,
table th {
  color: #2f4b37 !important;
  background: linear-gradient(180deg, rgba(226,242,230,.95), rgba(245,250,244,.92)) !important;
  border-color: var(--lov-line) !important;
  font-weight: 820 !important;
}

td {
  border-color: var(--lov-line) !important;
}

tbody tr {
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease !important;
}

tbody tr:hover td {
  background: rgba(255,245,223,.46) !important;
}

.alert,
.rule-banner,
.sync-status {
  border: 1px solid rgba(101,184,120,.24) !important;
  border-radius: var(--lov-radius) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(223,240,227,.58)) !important;
  color: var(--lov-text) !important;
  box-shadow: 0 10px 26px rgba(57,78,55,.07) !important;
}

.dialog {
  border-radius: 26px !important;
  background: rgba(255,255,252,.92) !important;
  animation: modalPop 260ms cubic-bezier(.2,.8,.2,1) both !important;
}

.dialog::backdrop {
  background: rgba(39,54,42,.24) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
}

.dialog-actions {
  background: rgba(255,255,252,.88) !important;
  border-top: 1px solid var(--lov-line) !important;
  backdrop-filter: blur(16px) !important;
}

.login-card {
  padding: 30px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(246,255,246,.76), rgba(248,242,255,.7)) !important;
}

#production .panel,
#dashboard .panel,
#supervisor .panel,
#staffMeals .panel,
#rules .panel,
#serving .panel,
#tableware .panel,
#sync .panel,
#menuImport .panel,
#residents .panel {
  border-color: rgba(255,255,255,.72) !important;
}

#kitchenBoard .panel {
  border-color: rgba(120,158,126,.4) !important;
  background: rgba(247,253,247,.9) !important;
}

#kitchenBoard .panel-head {
  background: linear-gradient(135deg, rgba(226,242,230,.96), rgba(255,245,223,.7)) !important;
}

#kitchenBoard .panel:hover {
  transform: none !important;
}

table.kitchen-large-table th {
  background: #e3f0e6 !important;
  color: #243526 !important;
}

table.kitchen-large-table td {
  color: #203024 !important;
}

body.auth-locked {
  background: linear-gradient(135deg, #fff7e8, #eef8ef 52%, #f1ecff) !important;
}

body.auth-locked .content {
  background: transparent !important;
}

@media (max-width: 980px) {
  .app-shell {
    padding: 10px !important;
    gap: 10px !important;
  }

  .topbar {
    top: 10px !important;
    border-radius: 20px !important;
  }

  .sidebar {
    border-radius: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }

  body,
  html {
    background: #fff !important;
  }

  body::before,
  body::after {
    display: none !important;
  }

  #kitchenBoard .panel,
  #kitchenBoard .panel-head,
  #kitchenBoard table,
  #kitchenBoard th,
  #kitchenBoard td {
    background: #fff !important;
    color: #000 !important;
  }
}