/* styles.css — Planner Glance.
   Edit freely. Re-deploy with `wrangler pages deploy public --project-name=glance`. */

:root {
  --bg: #fafafa;
  --surface: #fff;
  --surface-alt: #f4f4f6;
  --weekend: #ececef;
  --border: #e1e1e4;
  --fg: #1a1a1a;
  --muted: #666;
  --today: #ffe680;
  --accent: #1f6feb;
  --ouh:  #ffd6d6;
  --ccl:  #e9d6ff;
  --travel:#fff4b0;
  --al:   #d3f0d3;
  --sl:   #d6e8ff;
  --bh:   #b5e8c1;
  --lab:  #fde2c4;
  --f2fox:#c7e3ff;
  --f2flon:#d4d4f5;
  --virtual:#efe1cc;
  --listT:#ffe0b3;
  --listS:#d2e3ff;
  --listOther:#eee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15161a;
    --surface: #1c1d21;
    --surface-alt: #1f2026;
    --weekend: #2a2b32;
    --border: #2c2d33;
    --fg: #e6e6e8;
    --muted: #8a8a90;
    --today: #4a3a00;
    --accent: #6ea8ff;
    --ouh:  #5a2024;
    --ccl:  #4a2a5a;
    --travel:#4a4400;
    --al:   #1f4a26;
    --sl:   #1d3759;
    --bh:   #1d4a36;
    --lab:  #5a3416;
    --f2fox:#1d3759;
    --f2flon:#2a2c5a;
    --virtual:#4a3924;
    --listT:#5a3a14;
    --listS:#1f3759;
    --listOther:#2c2d33;
  }
  .pill { color: #e6e6e8 !important; }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.page-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  padding: 12px 18px 8px;
  border-bottom: 1px solid var(--border);
}
.title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.title-row h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.meta { color: var(--muted); font-size: 12px; }

.controls {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center;
}
.controls input[type="search"] {
  flex: 1 1 220px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--fg); font: inherit;
}
.controls select, .controls button {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--fg); font: inherit; cursor: pointer;
}
.controls button:hover { background: var(--surface-alt); }

.filter-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.filter-row .pill {
  cursor: pointer; user-select: none;
  border: 1px solid transparent;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.filter-row .pill.active { opacity: 1; border-color: rgba(0,0,0,0.2); }
@media (prefers-color-scheme: dark) {
  .filter-row .pill.active { border-color: rgba(255,255,255,0.3); }
}

.warn-banner {
  margin: 10px 18px; padding: 8px 12px;
  background: var(--travel); color: #5a3a00;
  border-radius: 6px; font-size: 12px;
}
@media (prefers-color-scheme: dark) {
  .warn-banner { color: #f0c870; }
}

.planner-grid {
  border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 13px;
}
.planner-grid thead th {
  position: sticky; top: var(--month-h, 158px); z-index: 5;
  background: var(--bg); color: var(--muted);
  text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; padding: 8px 6px; border-bottom: 1px solid var(--border);
}
.planner-grid tbody td {
  padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.planner-grid tr.day-row { background: var(--surface); }
.planner-grid tr.day-row:nth-child(even) { background: var(--surface-alt); }
.planner-grid tr.weekend { background: var(--weekend) !important; }
.planner-grid tr.today td { font-weight: 600; }
.planner-grid tr.today td.c-date {
  box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 999px var(--today) !important;
}

.planner-grid tr.month-row td {
  position: sticky; top: var(--header-h, 120px); z-index: 6; background: var(--bg);
  font-weight: 700; font-size: 14px; padding: 14px 8px 6px;
  border-bottom: 2px solid var(--border);
}

.planner-grid tr.is-ouh    td.c-flags { background: var(--ouh); }
.planner-grid tr.is-ccl    td.c-flags { background: var(--ccl); }
.planner-grid tr.is-travel td.c-flags { background: var(--travel); }
.planner-grid tr.is-al     td.c-flags { background: var(--al); }
.planner-grid tr.is-sl     td.c-flags { background: var(--sl); }
.planner-grid tr.is-bh     td.c-flags { background: var(--bh); }
.planner-grid tr.is-ouh    td.c-date { box-shadow: inset 4px 0 0 #d23a3a; }
.planner-grid tr.is-ccl    td.c-date { box-shadow: inset 4px 0 0 #8a47d6; }
.planner-grid tr.is-travel td.c-date { box-shadow: inset 4px 0 0 #d6b800; }
.planner-grid tr.is-al     td.c-date { box-shadow: inset 4px 0 0 #36a44a; }
.planner-grid tr.is-sl     td.c-date { box-shadow: inset 4px 0 0 #4084d6; }
.planner-grid tr.is-bh     td.c-date { box-shadow: inset 4px 0 0 #1d8a4a; }
.planner-grid tr.list-T    td.c-list { background: var(--listT); }
.planner-grid tr.list-S    td.c-list { background: var(--listS); }

.pill {
  display: inline-block; font-size: 11px; padding: 1px 7px;
  border-radius: 999px; margin-right: 3px; line-height: 1.5;
  white-space: nowrap; color: #1a1a1a;
}
.pill.ouh    { background: var(--ouh); }
.pill.ccl    { background: var(--ccl); }
.pill.travel { background: var(--travel); }
.pill.al     { background: var(--al); }
.pill.sl     { background: var(--sl); }
.pill.bh     { background: var(--bh); }
.pill.lab    { background: var(--lab); }
.pill.f2fox  { background: var(--f2fox); }
.pill.f2flon { background: var(--f2flon); }
.pill.virtual{ background: var(--virtual); }
.pill.listT  { background: var(--listT); }
.pill.listS  { background: var(--listS); }
.pill.listOther { background: var(--listOther); }
.lt { color: var(--muted); font-size: 11px; }

.c-date  { width: 78px; }
.c-day   { width: 40px; color: var(--muted); }
.c-flags { width: 110px; }
.c-list  { width: 130px; }
.c-ops   { width: 90px; }
.c-img   { width: 50px; }
.c-fellow{ width: 70px; }
.c-away  { width: 95px; }
.c-clinic{ width: 130px; }
.c-trip  { width: 170px; }
.c-loc   { width: 140px; }
.c-work  { width: 220px; }
.c-home  { width: 200px; }
.c-plan  { width: 220px; }
.c-notes { width: 200px; }
.placeholder { padding: 20px !important; color: var(--muted); text-align: center; }

td:hover { white-space: normal; overflow: visible; }
a { color: inherit; }
a:hover { color: var(--accent); }

@media (max-width: 800px) {
  .planner-grid { table-layout: auto; font-size: 12px; }
  .planner-grid tbody td { white-space: normal; }
  .planner-grid .c-img,
  .planner-grid .c-fellow,
  .planner-grid .c-away,
  .planner-grid .c-loc,
  .planner-grid .c-notes,
  .planner-grid thead th.c-img,
  .planner-grid thead th.c-fellow,
  .planner-grid thead th.c-away,
  .planner-grid thead th.c-loc,
  .planner-grid thead th.c-notes { display: none; }
  /* mobile sticky offsets — pulled from CSS vars set at runtime by app.js */
}
@media (max-width: 500px) {
  .planner-grid .c-ops,
  .planner-grid .c-clinic,
  .planner-grid .c-plan,
  .planner-grid thead th.c-ops,
  .planner-grid thead th.c-clinic,
  .planner-grid thead th.c-plan { display: none; }
}