/* ============================================================
   Camping Planner — Eagle Ridge
   Self-contained, offline-first. System fonts (no CDN).
   ============================================================ */
:root {
  --bg:        #0f1512;
  --bg-2:      #141b17;
  --surface:   #18211c;
  --surface-2: #1e2822;
  --border:    #26332b;
  --border-2:  #33463a;
  --text:      #e8efe9;
  --text-dim:  #9db0a3;
  --text-mute: #6b7d71;

  --pine:      #4ea777;   /* primary accent */
  --pine-deep: #2f7d55;
  --ember:     #e8a24a;   /* warm accent */

  /* assignee colours */
  --woods:      #5aa9e6;  --woods-bg:    rgba(90,169,230,.14);
  --motawehs:   #57c98a;  --motawehs-bg: rgba(87,201,138,.14);
  --both:       #c58bef;  --both-bg:     rgba(197,139,239,.14);

  --ok:   #57c98a;
  --warn: #e8a24a;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --radius: 12px;
  --shadow: 0 1px 0 rgba(255,255,255,.02), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(78,167,119,.10), transparent 60%),
    var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15,21,18,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { font-size: 26px; line-height: 1; }
.brand-text h1 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.brand-text p { font-size: 12.5px; color: var(--text-dim); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

.btn {
  font: inherit; font-size: 13.5px; font-weight: 550;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 9px;
  padding: 8px 13px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .05s;
}
.btn:hover { border-color: var(--pine); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pine-deep); border-color: var(--pine); color: #eafff2; }
.btn-primary:hover { background: var(--pine); }
.btn-ghost { background: transparent; color: var(--text-dim); }

.net-badge { font-size: 11px; color: var(--ok); margin-right: 2px; }
.net-badge.offline { color: var(--warn); }
.net-badge.syncing { color: var(--woods); }

/* ---------- Tabs ---------- */
.tabs {
  max-width: 1080px; margin: 0 auto;
  padding: 0 12px; display: flex; gap: 2px; overflow-x: auto;
}
.tab {
  font: inherit; font-size: 14px; font-weight: 550;
  color: var(--text-dim); background: none; border: none;
  padding: 11px 15px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-bottom-color: var(--pine); }

/* ---------- Layout ---------- */
.container { max-width: 1080px; margin: 0 auto; padding: 18px 20px 60px; }

.notes {
  display: grid; gap: 6px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px;
}
.notes .note { display: flex; gap: 9px; font-size: 13px; color: var(--text-dim); }
.notes .note::before { content: "▹"; color: var(--ember); flex: none; }
.notes .note strong { color: var(--text); font-weight: 600; }

/* ---------- Toolbar / filters ---------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filters label { font-size: 12px; color: var(--text-mute); display: flex; flex-direction: column; gap: 4px; }
.filters .check-inline { flex-direction: row; align-items: center; gap: 7px; color: var(--text-dim); font-size: 13px; padding-top: 14px; }
select, input[type="text"], input[type="number"] {
  font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 7px 9px;
}
select:focus, input:focus { outline: none; border-color: var(--pine); }

.progress { font-size: 13px; color: var(--text-dim); display: flex; gap: 16px; flex-wrap: wrap; }
.progress b { color: var(--text); }

/* ---------- Panels ---------- */
.panel { display: none; }
.panel.is-active { display: block; }

.cat-group { margin-bottom: 22px; }
.cat-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 2px 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cat-head h3 { font-size: 14px; font-weight: 650; letter-spacing: .01em; }
.cat-head .count { font-size: 12px; color: var(--text-mute); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  position: sticky; top: 0;
  text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-mute);
  background: var(--surface-2); padding: 10px 12px;
  border-bottom: 1px solid var(--border-2); white-space: nowrap;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.done { opacity: .5; }
tbody tr.done .item-name { text-decoration: line-through; }
.item-name { font-weight: 550; color: var(--text); }
.muted { color: var(--text-mute); }
.num { width: 62px; text-align: center; }
td.notes-cell { color: var(--text-dim); font-size: 12.5px; min-width: 180px; }

/* assignee pill = a styled <select> */
.assignee {
  font: inherit; font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
  border: 1px solid transparent; -webkit-appearance: none; appearance: none;
  text-align: center;
}
.assignee.Woods    { color: var(--woods);    background: var(--woods-bg);    border-color: rgba(90,169,230,.35); }
.assignee.Motawehs { color: var(--motawehs); background: var(--motawehs-bg); border-color: rgba(87,201,138,.35); }
.assignee.Both     { color: var(--both);     background: var(--both-bg);     border-color: rgba(197,139,239,.35); }
.assignee.blank    { color: var(--text-mute); background: var(--surface-2);   border-color: var(--border-2); }

/* editable chips (Sharing / Get / Split) */
.chip {
  font: inherit; font-size: 11.5px; font-weight: 600;
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-dim);
  -webkit-appearance: none; appearance: none; text-align: center;
}
.chip:focus { outline: none; border-color: var(--pine); }
.chip.get-Have   { color: var(--ok);       background: rgba(87,201,138,.12); border-color: rgba(87,201,138,.30); }
.chip.get-Buy    { color: var(--ember);    background: rgba(232,162,74,.12); border-color: rgba(232,162,74,.32); }
.chip.get-Borrow { color: var(--woods);    background: rgba(90,169,230,.12); border-color: rgba(90,169,230,.30); }
.chip.split-Woods    { color: var(--woods);    background: var(--woods-bg);    border-color: rgba(90,169,230,.30); }
.chip.split-Motawehs { color: var(--motawehs); background: var(--motawehs-bg); border-color: rgba(87,201,138,.30); }

.check { width: 18px; height: 18px; accent-color: var(--pine); cursor: pointer; }
.tag { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border-2); }

.cell-edit {
  width: 100%; background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 5px 7px; color: var(--text); font: inherit; font-size: 13px;
  line-height: 1.45;
}
.cell-edit:hover { border-color: var(--border-2); }
.cell-edit:focus { border-color: var(--pine); background: var(--surface-2); outline: none; }
textarea.cell-edit {
  display: block; resize: none; overflow: hidden;
  white-space: pre-wrap; overflow-wrap: anywhere; min-height: 30px;
}
.cell-edit.item-edit { font-weight: 550; color: var(--text); font-size: 13.5px; }
tbody tr.done .cell-edit.item-edit { text-decoration: line-through; color: var(--text-mute); }
input.num-input { text-align: center; max-width: 72px; }

/* remove-row button */
.del-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border); color: var(--text-mute);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s, transform .05s;
}
.del-btn:hover { color: #ef8f8f; border-color: rgba(233,112,112,.55); background: rgba(233,112,112,.12); }
.del-btn:active { transform: scale(.93); }
.del-btn svg { display: block; }
td.act { width: 46px; text-align: center; }

/* per-table add button (in each group header) */
.mini-add {
  margin-left: auto; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--pine); background: transparent; border: 1px solid var(--border-2);
  border-radius: 8px; padding: 5px 11px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.mini-add:hover { border-color: var(--pine); background: rgba(78,167,119,.10); }

/* add-row button */
.add-row { padding: 10px 2px 2px; }
.add-btn {
  font: inherit; font-size: 13px; font-weight: 550; color: var(--text-dim);
  background: transparent; border: 1px dashed var(--border-2); border-radius: 10px;
  padding: 10px 14px; cursor: pointer; width: 100%;
  transition: border-color .15s, color .15s;
}
.add-btn:hover { color: var(--text); border-color: var(--pine); }

/* ---------- Summary ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.card h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); margin-bottom: 10px; }
.card .big { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.card .big.money::before { content: "$"; font-size: 16px; color: var(--text-dim); vertical-align: 8px; margin-right: 1px; }
.split-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 13.5px; border-bottom: 1px dashed var(--border); }
.split-row:last-child { border-bottom: none; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dot.Woods { background: var(--woods); } .dot.Motawehs { background: var(--motawehs); } .dot.Both { background: var(--both); }

.bar { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; display: flex; margin-top: 10px; }
.bar span { display: block; height: 100%; }
.bar span.Woods { background: var(--woods); } .bar span.Motawehs { background: var(--motawehs); } .bar span.Both { background: var(--both); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); margin-top: 10px; }
.legend span { display: flex; align-items: center; }

/* ---------- Footer ---------- */
.foot {
  max-width: 1080px; margin: 0 auto; padding: 20px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--text-mute); font-size: 12px; border-top: 1px solid var(--border);
}

/* ---------- Mobile: tables become cards ---------- */
@media (max-width: 720px) {
  .container { padding: 14px 12px 60px; }
  .topbar-inner { padding: 10px 14px; }
  .brand-text h1 { font-size: 16px; }
  .tab { padding: 12px 14px; font-size: 15px; }
  .btn { padding: 10px 14px; font-size: 14px; }

  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  .table-wrap { overflow: visible; }
  tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--border); position: relative; }

  tbody td { border: none; padding: 4px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  tbody td::before {
    content: attr(data-label); color: var(--text-mute); font-size: 11px;
    text-transform: uppercase; letter-spacing: .04em; flex: 0 0 86px;
  }
  /* cells with no label (checkbox) and the delete cell: no reserved label column */
  tbody td[data-label=""]::before, td.act::before { content: none; }

  /* long-text cells stack the field full width under the label */
  tbody td[data-label="Item"], tbody td[data-label="Dish"], td.notes-cell {
    flex-direction: column; align-items: stretch; min-width: 0;
  }
  tbody td[data-label="Item"]::before, tbody td[data-label="Dish"]::before, td.notes-cell::before { flex: none; }
  tbody td .cell-edit { flex: 1 1 100%; }
  .cell-edit.item-edit { font-size: 15.5px; padding: 6px 8px; }

  /* delete sits pinned top-right of each card */
  td.act { position: absolute; top: 10px; right: 10px; width: auto; padding: 0; }
  .del-btn { width: 32px; height: 32px; font-size: 19px; }

  .assignee, .chip { font-size: 13px; padding: 6px 14px; }
  .check { width: 22px; height: 22px; }
  .del-btn { width: 34px; height: 34px; }
  .mini-add { padding: 6px 12px; font-size: 13px; }
  input.num-input { max-width: 90px; }
  .add-btn { font-size: 14px; padding: 13px; }
  .toolbar { gap: 10px; }
}

/* ---------- Print ---------- */
@media print {
  :root { --bg: #fff; --text: #111; --text-dim: #333; --text-mute: #555; --surface: #fff; --surface-2: #fff; --border: #bbb; --border-2: #999; }
  body { background: #fff; color: #000; font-size: 11px; }
  .topbar-actions, .toolbar, .net-badge, .foot { display: none !important; }
  .topbar { position: static; backdrop-filter: none; }
  .tabs { display: none; }
  .panel { display: block !important; page-break-before: always; }
  .panel:first-of-type { page-break-before: avoid; }
  .table-wrap { overflow: visible; border: none; }
  thead th { position: static; color: #000; }
  .assignee { border: 1px solid #999 !important; color: #000 !important; background: #fff !important; }
  .notes { border: 1px solid #999; }
  a { color: #000; text-decoration: none; }
}