:root {
  --bg: #f7fafc;           /* Light background */
  --panel: #ffffff;        /* Panel bg */
  --muted: #6b7280;        /* Muted text */
  --text: #0f172a;         /* Primary text */
  --accent: #2563eb;       /* Blue */
  --accent-2: #059669;     /* Green */
  --warn: #f59e0b;
  --danger: #ef4444;
  --border: #e5e7eb;       /* Light border */
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  --radius: 8px;
  --focus: 0 0 0 3px rgb(37 99 235 / 0.25);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 0% 0%, #ffffff 0%, #f7fafc 60%, #edf2f7 100%);
  color: var(--text);
  line-height: 1.4;
}

/* Layout */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.app-header h1 {
  margin: 0;
  padding: 16px 20px 4px;
  font-size: 18px;
  color: var(--text);
}

.app-nav {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}

.app-nav a {
  padding: 8px 12px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
  transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease;
}

.app-nav a:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.5);
}

.app-nav a.active {
  border-color: rgba(96, 165, 250, 0.8);
  background: linear-gradient(180deg, rgba(96,165,250,0.25), rgba(59,130,246,0.12));
}

.app-main {
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 16px 40px;
}

.app-footer {
  border-top: 1px solid var(--border);
  padding: 16px;
  color: var(--muted);
  text-align: center;
}

/* Panels */
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.90));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

/* Headings */
h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #fff;
}

/* Buttons */
.btn {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.35));
  color: var(--text);
  cursor: pointer;
  transition: box-shadow 0.1s ease, border-color 0.2s ease, transform 0.08s ease-in-out;
}

.btn:hover {
  border-color: rgba(96,165,250,0.5);
  transform: translateY(-1px);
}

.btn:focus {
  outline: none;
  box-shadow: var(--focus);
}

.btn-primary {
  border-color: rgba(96,165,250,0.7);
  background: linear-gradient(180deg, rgba(96,165,250,0.35), rgba(59,130,246,0.15));
}

.btn-success {
  border-color: rgba(52,211,153,0.7);
  background: linear-gradient(180deg, rgba(52,211,153,0.35), rgba(16,185,129,0.15));
}

.btn-warn {
  border-color: rgba(245,158,11,0.7);
  background: linear-gradient(180deg, rgba(245,158,11,0.35), rgba(251,191,36,0.15));
}

.btn-danger {
  border-color: rgba(239,68,68,0.7);
  background: linear-gradient(180deg, rgba(239,68,68,0.35), rgba(248,113,113,0.15));
}

/* Inputs */
.input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}

.input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: var(--focus);
  border-color: rgba(96, 165, 250, 0.6);
}

/* Table */
.table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
}

.table th, .table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.table th {
  background: #f9fafb;
  color: #111;
  font-weight: 600;
}

.table tr:hover {
  background: rgba(0,0,0,0.03);
}

/* Planning: finalized rows */
.table tr.row-done {
  background: rgba(52,211,153,0.14); /* green tint */
}
.table tr.row-done:hover {
  background: rgba(52,211,153,0.20);
}
.table tr.row-done td {
  border-bottom-color: rgba(52,211,153,0.35);
}

.table .actions {
  display: flex;
  gap: 6px;
}

/* Inventory tables: fit within container; avoid horizontal scroll on desktop */
#tab-rollup .table,
#tab-lines .table {
  table-layout: fixed;             /* distribute columns to fit container */
}

/* Prevent horizontal scroll on inventory tab wrappers even if inline overflow is auto */
#tab-rollup, #tab-lines {
  overflow-x: hidden !important;
}

/* Rollup widths: Meat | Available | Most recent */
#tab-rollup .table th:nth-child(1) { width: 48%; }
#tab-rollup .table th:nth-child(2) { width: 20%; }
#tab-rollup .table th:nth-child(3) { width: 28%; }

/* Lines widths: Meat | Available | Received | Notes | Actions */
#tab-lines .table th:nth-child(1) { width: 26%; }
#tab-lines .table th:nth-child(2) { width: 12%; }
#tab-lines .table th:nth-child(3) { width: 17%; }
#tab-lines .table th:nth-child(4) { width: 29%; }
#tab-lines .table th:nth-child(5) { width: 12%; }

/* Wrap long tokens so columns don't force overflow */
#tab-rollup .table th, #tab-rollup .table td,
#tab-lines .table th, #tab-lines .table td {
  overflow-wrap: anywhere;         /* wrap long words/ids */
  word-break: break-word;
}

/* Allow actions row to wrap within its cell */
#tab-lines .table td.actions .row {
  flex-wrap: wrap;
}

/* Ensure tables never exceed container width */
#tab-rollup .table,
#tab-lines .table {
  max-width: 100%;
}

/* Allow columns to truly shrink and wrap without forcing min-content overflow */
#tab-rollup .table th, #tab-rollup .table td,
#tab-lines  .table th, #tab-lines  .table td {
  min-width: 0;                 /* critical to prevent flex/min-content overflow */
}

/* Tighter buttons in inventory tables to reduce width pressure */
#tab-rollup .btn,
#tab-lines .btn {
  padding: 6px 8px;
}

/* Extra guard: if any inline overflow container is present, suppress horizontal scroll on inventory */
#tab-rollup, #tab-lines {
  overflow-x: hidden !important;
}

/* Grid helpers */
.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 220px;
}

/* Meal plan grid */
.meal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.meal-day {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  min-height: 120px;
  background:
    radial-gradient(500px 200px at 100% 0%, rgba(96,165,250,0.18) 0%, rgba(96,165,250,0.06) 40%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.90));
}

.meal-day h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #fff;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.06);
  color: var(--text);
  font-size: 12px;
}

/* Notices */
.loading, .error, .empty {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.05);
}

.error {
  border-color: rgba(239,68,68,0.7);
  background: linear-gradient(180deg, rgba(239,68,68,0.10), rgba(255,255,255,0.7));
}

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

/* Forms */
.form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.form-row .field {
  flex: 1;
}

label {
  display: block;
  margin-bottom: 6px;
  color: #cbd5e1;
  font-size: 12px;
}

/* Utility */
.space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

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

/* Mobile-only optimizations (no desktop change) */
@media (max-width: 640px) {
  /* Navigation: allow horizontal scroll, keep touch friendly */
  .app-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 8px;
  }
  .app-nav a { white-space: nowrap; }

  /* Touch targets and readable inputs (prevents iOS zoom) */
  .btn, .input, select, textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* Stack header controls on small screens */
  .panel .row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Planning table → mobile cards */
  .planning-table thead { display: none; }
  .planning-table tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
  }
  .planning-table td {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
  }

  /* Field labels via nth-child to avoid DOM changes */
  .planning-table td:nth-child(1)::before { content: "Day"; font-weight: 600; color: var(--muted); }
  .planning-table td:nth-child(2)::before { content: "Date"; font-weight: 600; color: var(--muted); }
  .planning-table td:nth-child(3)::before { content: "Meat Inventory"; font-weight: 600; color: var(--muted); }
  .planning-table td:nth-child(4)::before { content: "Qty"; font-weight: 600; color: var(--muted); }
  .planning-table td:nth-child(5)::before { content: "Meal"; font-weight: 600; color: var(--muted); }
  .planning-table td:nth-child(6)::before { content: "Eat Out"; font-weight: 600; color: var(--muted); }
  .planning-table td:nth-child(7)::before { content: ""; }

  /* Inputs full width inside cards */
  .planning-table select.input,
  .planning-table input.input[type="number"],
  .planning-table input.input[type="text"] {
    width: 100%;
    max-width: 100%;
  }

  /* Finalize button spans full width on mobile card */
  .planning-table td:last-child .btn {
    width: 100%;
  }

  /* Preserve green emphasis on finalized rows */
  .planning-table tbody tr.row-done {
    background: rgba(52,211,153,0.14);
  }

  /* Smooth scrolling for table containers on mobile */
  .panel > div[style*="overflow:auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Planning controls: keep Prev/Today/Next inline and smaller */
  .panel .row:has(#week-picker) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .panel .row:has(#week-picker) .btn[data-action] {
    min-height: 36px;        /* smaller than default 44px */
    padding: 6px 8px;
    font-size: 14px;
  }
  /* Move date picker to next line when space is tight */
  .panel .row:has(#week-picker) label[for="week-picker"],
  .panel .row:has(#week-picker) #week-picker {
    flex: 1 1 100%;
  }

  /* Inventory controls compact layout */
  .inv-controls {
    display: grid;
    grid-template-columns: 1fr minmax(160px, 1fr) auto;
    grid-template-areas: "tabs filter apply";
    gap: 8px;
    align-items: end;
  }
  /* Keep tabs inline and wrapping on mobile */
  .inv-controls #inv-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    grid-area: tabs;
  }
  /* Flatten the filter row so its children become grid items */
  .inv-controls #inv-filter-row {
    display: contents;
  }
  .inv-controls #inv-filter-row .col {
    display: contents;
  }
  /* Hide filter label to save vertical space */
  .inv-controls label[for="flt-cut"] {
    display: none;
  }
  .inv-controls #flt-cut {
    grid-area: filter;
    width: 100%;
  }
  .inv-controls #btn-apply-filters {
    grid-area: apply;
    justify-self: end;
  }

  /* Fallback: apply condensed layout even if .inv-controls is missing */
  .panel:has(#inv-tabs) > .space-between {
    display: grid;
    grid-template-columns: 1fr minmax(160px, 1fr) auto;
    grid-template-areas: "tabs filter apply";
    gap: 8px;
    align-items: end;
  }
  .panel:has(#inv-tabs) #inv-tabs {
    grid-area: tabs;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  /* Promote filter container children to grid items */
  .panel:has(#inv-tabs) .row:has(#flt-cut),
  .panel:has(#inv-tabs) .row:has(#btn-apply-filters) {
    display: contents;
  }
  .panel:has(#inv-tabs) label[for="flt-cut"] {
    display: none;
  }
  .panel:has(#inv-tabs) #flt-cut {
    grid-area: filter;
    width: 100%;
  }
  .panel:has(#inv-tabs) #btn-apply-filters {
    grid-area: apply;
    justify-self: end;
  }
}