/* Theme variables */
:root {
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.theme-dark {
  --bg: #0e1222;
  --panel: #121a31;
  --card: #151e3a;
  --border: #1f2a4a;
  --muted: #a8b1cc;
  --fg: #edf1ff;
  --accent: #7aa2f7;
  --accent-contrast: #0b1020;
  --warn: #f7768e;
  --input-bg: #0f172a;
}

.theme-light {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --card: #ffffff;
  --border: #e6eaf3;
  --muted: #6b7280;
  --fg: #0f172a;
  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --warn: #dc2626;
  --input-bg: #ffffff;
}

/* Pastel Rose theme based on #FFCCE1 */
.theme-rose {
  --bg: #FFCCE1;
  --panel: #FFCCE1;
  --card: #FFCCE1;
  --border: #f5b7cf;
  --muted: #6b7280;
  --fg: #0f172a;
  --accent: #db2777;
  --accent-contrast: #ffffff;
  --warn: #dc2626;
  --input-bg: #FFCCE1;
}

/* Sky theme based on #CCF1FF */
.theme-sky {
  --bg: #CCF1FF;
  --panel: #CCF1FF;
  --card: #CCF1FF;
  --border: #bfeaff;
  --muted: #6b7280;
  --fg: #0f172a;
  --accent: #0284c7;
  --accent-contrast: #ffffff;
  --warn: #dc2626;
  --input-bg: #CCF1FF;
}

/* Pear theme based on #FAFFC7 */
.theme-pear {
  --bg: #FAFFC7;
  --panel: #FAFFC7;
  --card: #FAFFC7;
  --border: #e6f3af;
  --muted: #6b7280;
  --fg: #0f172a;
  --accent: #16a34a;
  --accent-contrast: #ffffff;
  --warn: #dc2626;
  --input-bg: #FAFFC7;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; transition: background .2s ease, color .2s ease; }
/* Prevent stray horizontal scroll on small screens */
body { overflow-x: hidden; }

.container { max-width: 1080px; margin: 0 auto; padding: 24px; }
.topbar { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: center; margin-bottom: 18px; }
.topbar .brand { grid-column: 1; }
.topbar #theme-toggle { grid-column: 2; justify-self: end; }
@media (max-width: 960px) {
  .topbar { grid-template-columns: 1fr; }
  .topbar .brand { grid-column: 1; }
  .topbar #theme-toggle { grid-column: 1; justify-self: end; }
  /* Allow right-side actions to wrap to next line */
  .topbar > :last-child { flex-wrap: wrap; justify-self: start; }
}
.brand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.logo { font-size: 22px; }
h1 { margin: 0; font-size: 24px; }
.subtitle { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: 999px; padding: 10px 14px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; margin: 0; }
.ghost:hover { background: var(--panel); }
.ghost:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); }

.title { min-width: 0; }
.user-picker { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 6px; position: relative; }
.user-picker input { background: var(--input-bg); border: 1px solid var(--border); color: var(--fg); border-radius: 999px; padding: 6px 10px; min-width: 160px; }
.user-picker input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.user-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; min-width: 200px; max-height: 240px; overflow: auto; z-index: 20; }
.user-menu .user-item { padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.user-menu .user-item:hover { background: var(--card); }

.layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  /* Stack main content first, then sidebar on mobile */
  .layout main { order: 0; }
  .layout .sidebar { order: 1; }
  /* Disable sticky sidebar on mobile to prevent overlap */
  .sidebar { position: static; top: auto; }
}

/* Admin layout: narrow left menu, wide content */
.admin-layout { grid-template-columns: 220px 1fr; }
@media (max-width: 960px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-layout .sidebar { order: 0; }
}

.input-section { background: var(--panel); border-radius: var(--radius); padding: 16px; border: 1px solid var(--border); box-shadow: var(--shadow); }
label { display: block; margin-bottom: 8px; color: var(--muted); font-weight: 600; }
textarea { width: 100%; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); padding: 12px; border-radius: 10px; resize: vertical; outline: none; }
textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
button { margin-top: 10px; background: var(--accent); color: var(--accent-contrast); border: 0; padding: 10px 14px; border-radius: 10px; font-weight: 600; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.input-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.input-actions button { margin-top: 0; }
.input-actions { display: flex; align-items: center; gap: 8px; }
.input-actions-right { margin-left: auto; display: inline-flex; gap: 8px; }
.input-actions .muted-action { opacity: 0.6; }
.input-actions .muted-action:hover { opacity: 0.8; }

.error { margin-top: 8px; color: var(--warn); }

.results { margin-top: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card { background: var(--card); border-radius: var(--radius); padding: 16px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.card h3 { margin: 0 0 10px 0; font-size: 18px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; color: var(--muted); }
.kv b { color: var(--fg); }

.totals { margin-top: 16px; background: var(--panel); border: 1px dashed var(--border); border-radius: var(--radius); padding: 14px; }
.totals h3 { margin: 0 0 8px 0; }
.totals .hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.totals .hdr h3 { margin: 0; }
.totals .hdr .date-ctl,
.panel .date-ctl { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.totals .hdr .date-ctl .date-input,
.panel .date-ctl .date-input { background: var(--input-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; height: 32px; font-size: 12px; }
.totals .hdr .date-ctl .date-input:focus,
.panel .date-ctl .date-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
/* Make the calendar icon visible in dark mode */
.totals .hdr .date-ctl .date-input::-webkit-calendar-picker-indicator,
.panel .date-ctl .date-input::-webkit-calendar-picker-indicator { filter: invert(75%); }
.totals .hdr .date-ctl .date-input::-moz-focus-inner,
.panel .date-ctl .date-input::-moz-focus-inner { border: 0; }
.totals .hdr .date-ctl .date-input::-ms-clear,
.panel .date-ctl .date-input::-ms-clear { display: none; }
.totals .hdr .date-ctl .date-input::-ms-reveal,
.panel .date-ctl .date-input::-ms-reveal { display: none; }
.totals .hdr .date-ctl .date-input,
.panel .date-ctl .date-input { min-width: 140px; }
.totals .hdr .date-ctl .ghost.mini,
.panel .date-ctl .ghost.mini { padding: 6px 10px; font-size: 12px; margin: 0; }

.sidebar { position: sticky; top: 16px; align-self: start; display: grid; gap: 12px; }
.sidebar > .totals:first-child { margin-top: 0; }
.sidebar .totals { box-shadow: var(--shadow); }
.today-list { display: flex; flex-direction: column; gap: 10px; }
.today-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: 14px; box-shadow: var(--shadow); }
.today-row .name { overflow-wrap: anywhere; }
.today-row .meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.today-row input.qty-input { appearance: none; background: var(--input-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; }
.today-row input.qty-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
/* Ensure native number spinners match dark theme */
.theme-dark .today-row input.qty-input { color-scheme: dark; }

.today-row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.today-kcal-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.link { background: transparent; border: 1px solid var(--border); color: var(--fg); padding: 2px 8px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.link:hover { background: var(--panel); }
.link.danger { border-color: color-mix(in srgb, var(--warn), var(--border)); color: var(--warn); }

/* Admin */
.admin-nav { display: flex; flex-direction: column; gap: 8px; }
.admin-nav .nav-item { background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; text-align: left; cursor: pointer; }
.admin-nav .nav-item.active, .admin-nav .nav-item:hover { background: var(--panel); }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.admin-list { display: grid; gap: 10px; }
.admin-user-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.admin-user-row, .admin-list, .panel { min-width: 0; }
.admin-user-row input { max-width: 100%; min-width: 0; }
.admin-user-row input { background: var(--input-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.admin-user-row button { border-radius: 8px; padding: 6px 10px; border: 1px solid var(--border); background: transparent; color: var(--fg); cursor: pointer; }
.admin-user-row button:hover { background: var(--panel); }
.admin-user-row button.danger { color: var(--warn); border-color: color-mix(in srgb, var(--warn), var(--border)); }
.favorite-card { display: grid; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); }
.favorite-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.favorite-title { font-weight: 700; font-size: 16px; }
.favorite-card-actions { display: inline-flex; gap: 6px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--fg); cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--panel); }
.icon-btn.danger { color: var(--warn); border-color: color-mix(in srgb, var(--warn), var(--border)); }
.icon-svg { width: 14px; height: 14px; display: block; fill: currentColor; }
.favorite-meta { color: var(--muted); font-size: 12px; }
.favorite-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.favorite-stats span { color: var(--muted); font-size: 12px; }
.favorite-stats b { font-weight: 700; }

/* Settings form fields */
.settings-input { background: var(--input-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.settings-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.profile-row { display: grid; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
/* Settings: grouped subpanel for goals */
.profile-subpanel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.profile-subpanel h3 { margin: 0 0 8px; font-size: 16px; color: var(--muted); }
/* Make the Settings theme toggle button content-sized, not full-width */
#panel-profile #theme-toggle-settings { justify-self: start; width: auto; display: inline-flex; }

/* Match number input spinners to theme */
input[type=number].settings-input { color-scheme: light; }
.theme-dark input[type=number].settings-input { color-scheme: dark; }

/* Analytics */
.panel-subhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; }
.panel-subhead h3 { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: var(--shadow); }
.stat-card .t { color: var(--muted); font-size: 12px; }
.stat-card .v { font-size: 22px; font-weight: 700; margin-top: 4px; }
.stat-card .s { color: var(--muted); font-size: 12px; }
.pct-bar { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: grid; grid-template-columns: 80px 1fr; align-items: center; }
.pct-bar .bar { position: relative; background: #0d1327; border: 1px solid var(--border); border-radius: 999px; height: 10px; overflow: hidden; }
.pct-bar .bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.pct-bar .bar b { position: absolute; right: 8px; top: -18px; font-size: 12px; color: var(--muted); }
.top-items { display: grid; gap: 8px; }
.top-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.item-name { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.kcal-cell { display: flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }
.bars { display: grid; grid-auto-flow: column; gap: 10px; align-items: end; height: 140px; }
.bar-item { display: grid; grid-template-rows: 1fr auto auto; gap: 6px; align-items: end; justify-items: center; height: 140px; }
.bar-item .bar { width: 20px; background: #0d1327; border: 1px solid var(--border); border-radius: 6px; position: relative; overflow: hidden; }
.bar-item .bar { height: 100%; }
.bar-item .bar span { position: absolute; left: 0; bottom: 0; width: 100%; background: var(--accent); }
.bar-item .lbl { color: var(--muted); font-size: 12px; }
.bar-item .val { color: var(--muted); font-size: 12px; }

/* Mini progress bars inside stat cards */
.mini-bar { margin-top: 8px; height: 10px; background: #0d1327; border: 1px solid var(--border); border-radius: 999px; position: relative; overflow: hidden; }
.mini-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }

/* Water progress in Today list */
.water-progress { display: flex; flex-direction: column; gap: 6px; width: 140px; align-items: stretch; }
.water-progress .label { color: var(--muted); font-size: 12px; text-align: right; }

/* Ensure sticky sidebar is disabled on small screens (defined after base sticky rule) */
@media (max-width: 960px) {
  .sidebar { position: static; top: auto; }
}

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: grid; align-items: center; justify-items: center; z-index: 1000; padding: 16px; }
.modal { position: relative; background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 16px 44px 16px 16px; width: min(480px, 92vw); }
.modal h3 { margin: 0 0 8px; font-size: 18px; overflow-wrap: anywhere; word-break: break-word; }
.modal .muted { color: var(--muted); font-size: 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.modal input[type="text"],
.modal input[type="number"] { width: 100%; border: 1px solid var(--border); background: var(--input-bg); color: var(--fg); padding: 8px 10px; border-radius: 8px; }
.modal input[type="text"]:focus,
.modal input[type="number"]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.modal input[type="number"] { color-scheme: light; }
.theme-dark .modal input[type="number"] { color-scheme: dark; }
.modal-close { position: absolute; right: 8px; top: 8px; border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 999px; width: 28px; height: 28px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; font-size: 16px; }
.modal-close:hover { background: var(--panel); }
.details-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin-top: 8px; }
.details-row { display: contents; }
.details-grid .details-row .k { color: var(--muted); }
.details-grid .details-row .v { min-width: 0; }
.manual-title { display: grid; gap: 6px; margin-bottom: 8px; }
.manual-amount { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.manual-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.typeahead { position: relative; margin-top: 6px; }
.typeahead-list { position: absolute; top: 0; left: 0; right: 0; transform: translateY(4px); max-height: 220px; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; display: grid; gap: 4px; z-index: 10; }
.typeahead-option { text-align: left; border: 1px solid transparent; background: transparent; color: var(--fg); padding: 6px 8px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.typeahead-option:hover { background: var(--panel); border-color: var(--border); }
.typeahead-empty { color: var(--muted); font-size: 12px; padding: 6px 8px; }
.modal-error { margin-top: 10px; }
.details-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; padding: 0; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.details-btn:hover { background: var(--card); color: var(--fg); }
.details-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); }
.details-btn-icon {
  pointer-events: none;
  font-style: normal;
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 100%;
  height: 100%;
}
.favorite-btn-icon { width: 12px; height: 12px; display: block; pointer-events: none; fill: currentColor; }
.favorite-btn.is-favorite { color: #ffeb3b; }
.favorite-btn.is-favorite:disabled { opacity: 1; }