/* ── Shared FLT Scheduler theme ───────────────────────────────────────────────
   Used by both index.php (availability grid) and schedule.php (weekly
   schedule maker) so the two pages can never visually drift apart. Anything
   specific to just one of those pages lives in that page's own stylesheet
   instead (schedule.css for schedule.php). */
:root{
  --flt-purple:#90278e;
  --flt-purple-dark:#7a1f78;
  --flt-orange:#f05a28;
  --flt-orange-dark:#d14720;
  --flt-teal:#00a69c;
  --flt-teal-dark:#008a81;
  --flt-yellow:#fad940;
  --flt-yellow-soft:rgba(250,217,64,0.35);
  --flt-gray:#58595b;

  --bg:#fafafa;
  --surface:#ffffff;
  --surface-2:#f5f5f5;
  --ink:#231f20;
  --ink-soft:#58595b;
  --muted:#8a8b8d;
  --border:rgba(0,0,0,0.09);
  --unavail:#ececec;
  --unavail-ink:#9a9b9d;
  --danger:#f05a28;
  --danger-bg:rgba(240,90,40,0.10);
  --ring:#90278e;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-full:999px;
  --shadow-card:0 2px 8px rgba(0,0,0,0.08);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Fira Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1180px; margin:0 auto; padding:28px 20px 64px; }

/* ---- shared top bar ---- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.95); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(144,39,142,0.12);
  padding:14px 20px; gap:16px; flex-wrap:wrap;
}
.topbar .brand{
  font-family:"Fredoka", system-ui, sans-serif;
  font-weight:600; color:var(--flt-purple); font-size:1.15rem;
  display:flex; align-items:center; gap:8px;
}
.topbar .brand small{ font-family:"Fira Sans", sans-serif; font-weight:500; color:var(--ink-soft); font-size:0.8rem; }
.role-badge{
  font-family:"Fira Sans", sans-serif; font-size:0.68rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--radius-full); color:#fff; white-space:nowrap;
}
.role-badge--ugf{ background:var(--flt-teal); }
.role-badge--coordinator{ background:var(--flt-orange); }
.role-badge--supervisor{ background:var(--flt-purple); }
.topbar .right{ display:flex; align-items:center; gap:14px; }
.topbar nav.pagenav{ display:flex; gap:6px; }
.topbar nav.pagenav a{
  font-size:0.82rem; font-weight:600; color:var(--ink-soft); text-decoration:none;
  padding:7px 14px; border-radius:var(--radius-full); border:1px solid transparent;
}
.topbar nav.pagenav a:hover{ border-color:var(--border); color:var(--flt-purple); }
.topbar nav.pagenav a.is-active{ background:var(--flt-purple); color:#fff; }
.logout-form button{
  border:1px solid var(--border); background:var(--surface); color:var(--ink-soft);
  font-family:inherit; font-size:0.8rem; font-weight:500;
  padding:7px 14px; border-radius:var(--radius-full); cursor:pointer;
}
.logout-form button:hover{ border-color:var(--flt-purple); color:var(--flt-purple); }

/* ---- login gate ---- */
.gate-wrap{ max-width:400px; margin:14vh auto 0; padding:0 20px; }
.gate-card{
  background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:32px 28px;
}
.gate-card h1{
  font-family:"Fredoka", system-ui, sans-serif; font-size:1.4rem;
  color:var(--flt-purple); margin:0 0 6px; text-align:center;
}
.gate-card p.sub{ color:var(--ink-soft); font-size:0.88rem; text-align:center; margin:0 0 22px; }
.gate-card label{ display:block; font-size:0.72rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.pw-field{ position:relative; margin-bottom:16px; }
.gate-card select.role-select{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:1rem; font-family:inherit; margin-bottom:16px; background:var(--surface); color:var(--ink);
}
.gate-card select.role-select:focus{ outline:none; border-color:var(--flt-purple); box-shadow:0 0 0 3px rgba(144,39,142,0.15); }
.gate-card input.pw-input{
  width:100%; padding:11px 56px 11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:1rem; font-family:inherit; margin-bottom:0;
}
.gate-card input.pw-input:focus{ outline:none; border-color:var(--flt-purple); box-shadow:0 0 0 3px rgba(144,39,142,0.15); }
.gate-card .pw-toggle{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:auto; height:auto;
  border:none; background:transparent; color:var(--ink-soft);
  font-family:inherit; font-size:0.72rem; font-weight:600; letter-spacing:0.02em;
  padding:6px 10px; border-radius:var(--radius-sm); cursor:pointer;
}
.gate-card .pw-toggle:hover{ color:var(--flt-purple); background:var(--surface-2); }
.gate-card button{
  width:100%; padding:12px; border:none; border-radius:var(--radius-sm);
  background:var(--flt-purple); color:#fff; font-family:inherit; font-size:0.95rem; font-weight:600;
  cursor:pointer; transition:background .15s;
}
.gate-card button:hover{ background:var(--flt-purple-dark); }
.gate-error{
  background:var(--danger-bg); color:var(--danger-dark, #a83e18); border:1px solid rgba(240,90,40,0.3);
  padding:10px 14px; border-radius:var(--radius-sm); font-size:0.85rem; margin-bottom:16px;
}

/* header */
header.top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:22px;
}
.titleblock h2{
  font-family:"Fredoka", system-ui, sans-serif;
  font-size:1.6rem; font-weight:600; margin:0 0 4px;
  color:var(--flt-purple);
}
.titleblock p{ margin:0; color:var(--ink-soft); font-size:0.92rem; }
.status-chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px;
  border-radius:var(--radius-full); background:var(--surface); border:1px solid var(--border);
  font-size:0.78rem; font-weight:500; color:var(--ink-soft); white-space:nowrap;
}
.status-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; }
.status-chip[data-state="synced"] .dot{ background:var(--flt-teal); }
.status-chip[data-state="saving"] .dot{ background:var(--flt-purple); animation:pulse 1.1s ease-in-out infinite; }
.status-chip[data-state="loading"] .dot{ background:var(--muted); animation:pulse 1.1s ease-in-out infinite; }
.status-chip[data-state="offline"] .dot{ background:var(--danger); }
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* legend */
.legend{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px; font-size:0.82rem; color:var(--ink-soft); }
.legend .item{ display:flex; align-items:center; gap:7px; }
.swatch{ width:22px; height:12px; border-radius:3px; flex:none; border:1px solid var(--border); }
.swatch.full{ background:var(--flt-teal); }
.swatch.none{ background:var(--unavail); }
.swatch.partial{
  background:repeating-linear-gradient(45deg, var(--flt-yellow-soft) 0 4px, var(--surface) 4px 8px);
  border-color:var(--flt-yellow);
}
.hint{ font-size:0.78rem; color:var(--muted); margin:-8px 0 18px; }

/* grid card */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.scroll{ overflow-x:auto; }
table.grid{ border-collapse:separate; border-spacing:0; width:100%; min-width:820px; }
table.grid th, table.grid td{ border-bottom:1px solid var(--border); vertical-align:top; }
.col-name{ position:sticky; left:0; background:var(--surface); z-index:2; min-width:168px; max-width:168px; border-right:1px solid var(--border); }
thead .col-name{ z-index:3; }
thead th{ background:var(--surface-2); padding:12px 14px; text-align:left; }
.block-day{ font-family:"Fredoka", system-ui, sans-serif; font-weight:600; font-size:0.98rem; color:var(--flt-purple); }
.block-time{ font-family:"Fira Mono", monospace; font-variant-numeric:tabular-nums; font-size:0.78rem; color:var(--ink-soft); margin-top:2px; }
.block-programs{ font-size:0.74rem; color:var(--muted); white-space:pre-line; margin-top:6px; line-height:1.4; min-height:1em; }
[contenteditable="true"]{ outline:none; border-radius:4px; }
[contenteditable="true"]:hover{ background:var(--surface-2); }
[contenteditable="true"]:focus{ box-shadow:0 0 0 2px var(--ring); background:var(--surface); }

tbody tr:hover td{ background:rgba(144,39,142,0.03); }
tbody tr:hover .col-name{ background:var(--surface-2); }

.person-cell{ padding:10px 14px; display:flex; align-items:flex-start; gap:8px; }
.person-main{ flex:1; min-width:0; }
.person-name{ font-weight:600; font-size:0.9rem; display:inline-block; min-width:20px; }
.person-note{ font-size:0.72rem; font-style:italic; color:var(--flt-orange-dark); margin-top:2px; min-width:20px; }
.person-note:empty::before{ content:"add note\2026"; font-style:italic; color:var(--muted); opacity:0; }
.person-note:hover:empty::before, .person-note:focus::before{ opacity:1; }
.row-remove{
  flex:none; width:20px; height:20px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); font-size:0.72rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s;
}
tr:hover .row-remove, .row-remove:focus{ opacity:1; }
.row-remove[data-confirm="1"]{
  opacity:1; width:auto; border-radius:10px; padding:0 8px;
  background:var(--danger-bg); border-color:var(--danger); color:var(--danger-dark,#a83e18); font-weight:600;
}

td.avail-td{ padding:6px 8px; }
.avail-cell{
  position:relative; border-radius:var(--radius-sm); min-height:38px; display:flex; align-items:center;
  padding:6px 10px; cursor:pointer; border:1px solid transparent; gap:6px;
}
.avail-cell:hover{ filter:brightness(0.97); }
.avail-cell:focus-visible{ box-shadow:0 0 0 2px var(--ring); outline:none; }
.avail-cell.status-full{ background:var(--flt-teal); color:#fff; }
.avail-cell.status-none{ background:var(--unavail); color:var(--unavail-ink); }
.avail-cell.status-partial{
  background:repeating-linear-gradient(45deg, var(--flt-yellow-soft) 0 5px, var(--surface) 5px 10px);
  border-color:var(--flt-yellow); color:var(--ink);
}
.avail-label{ font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; }
.avail-note{ font-size:0.72rem; font-family:"Fira Mono", monospace; flex:1; min-width:0; padding:1px 4px; border-radius:4px; }
.avail-note:empty::before{ content:"add note\2026"; opacity:0; }
.avail-cell:hover .avail-note:empty::before, .avail-note:focus::before{ opacity:.65; }

.addrow-btn, .addnote-btn{
  border:1px dashed var(--border); background:transparent; color:var(--ink-soft);
  font-family:inherit; font-size:0.82rem; font-weight:500; padding:7px 12px; border-radius:var(--radius-sm); cursor:pointer;
}
.addrow-btn:hover, .addnote-btn:hover{ border-color:var(--flt-purple); color:var(--flt-purple); }

/* summary strip */
.summary{ display:grid; grid-template-columns:168px repeat(4, 1fr); border-top:2px solid var(--border); min-width:820px; }
.summary .cell{ padding:14px; border-right:1px solid var(--border); }
.summary .cell:last-child{ border-right:none; }
.summary .label{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); font-weight:600; }
.summary .names{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.chip{ font-size:0.72rem; background:var(--surface-2); border:1px solid var(--border); padding:2px 8px; border-radius:var(--radius-full); color:var(--ink-soft); }
.summary .cell.namescol{ background:var(--surface-2); display:flex; align-items:center; }
.summary .cell.namescol .label{ font-size:0.78rem; color:var(--ink-soft); }

/* footnotes */
.footnotes{ margin-top:20px; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.footnotes h2{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin:0 0 10px; font-weight:600; }
.footnotes ul{ margin:0; padding:0; list-style:none; }
.footnotes li{ display:flex; align-items:flex-start; gap:8px; padding:5px 0; font-size:0.86rem; color:var(--ink-soft); }
.footnotes li::before{ content:"\2022"; color:var(--muted); }
.footnotes li .fn-text{ flex:1; padding:2px 4px; border-radius:4px; }
.footnotes .row-remove{ opacity:0; }
.footnotes li:hover .row-remove{ opacity:1; }
.footnotes .addnote-btn{ margin-top:8px; }

.loading-note{ padding:40px; text-align:center; color:var(--muted); font-size:0.9rem; }
.error-note{ padding:16px 18px; background:var(--danger-bg); border:1px solid var(--danger); color:var(--danger-dark,#a83e18); border-radius:var(--radius-md); font-size:0.86rem; margin-bottom:18px; }

::selection{ background:var(--flt-yellow-soft); }

@media (max-width: 640px){ .titleblock h2{ font-size:1.3rem; } }