/* FIT5222 interview availability - shared styles for the student and admin pages */

:root {
  color-scheme: light dark;

  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #dfe3ec;
  --border-strong: #c4cad8;
  --text: #16181d;
  --text-muted: #5c6474;

  --accent: #0b57d0;
  --accent-ink: #ffffff;
  --accent-soft: #e8f0fe;

  --busy: #d93a3a;
  --busy-soft: #f6c6c6;
  --busy-ink: #7c1d1d;

  --pref: #1f9d55;
  --pref-soft: #bfe6cf;
  --pref-ink: #11532e;

  --warn-bg: #fff6e5;
  --warn-border: #f0c064;
  --error-bg: #fdecec;
  --error-border: #e6a1a1;
  --ok: #1a7f4b;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12141a;
    --surface: #1b1e26;
    --surface-2: #22262f;
    --border: #2f3542;
    --border-strong: #414a5c;
    --text: #eef1f6;
    --text-muted: #a3acbd;
    --accent: #7aa7ff;
    --accent-ink: #10131a;
    --accent-soft: #1e2b45;
    --busy: #e05a5a;
    --busy-soft: #5c2626;
    --busy-ink: #ffd9d9;
    --pref: #34b06a;
    --pref-soft: #1d4a32;
    --pref-ink: #d3f5e2;
    --warn-bg: #33290f;
    --warn-border: #7a5f1e;
    --error-bg: #3a1d1d;
    --error-border: #7a3535;
    --ok: #4ec98a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ chrome */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.brand-unit { font-weight: 700; letter-spacing: .02em; color: var(--accent); }
.brand-title { color: var(--text-muted); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: .75rem; }
.who { font-size: .9rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }

.page { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.card-narrow { max-width: 30rem; margin: 2rem auto; }
.card-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

h1 { font-size: 1.35rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.lede { color: var(--text-muted); margin: 0 0 1.25rem; font-size: .95rem; max-width: 62ch; }
.muted { color: var(--text-muted); }
.hint { color: var(--text-muted); font-size: .85rem; margin: .75rem 0 0; }

/* ------------------------------------------------------------------ forms */

.field { display: block; margin-bottom: 1rem; }
.field-label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; }
.field-hint { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .3rem; }

input[type="text"], input[type="email"], input:not([type]) {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
input.is-invalid {
  border-color: var(--busy);
  background: var(--error-bg);
}

input:focus-visible, .btn:focus-visible, .cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn {
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  padding: .55rem .95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { filter: brightness(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: var(--surface-2); border-color: var(--border-strong); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.btn-danger { background: var(--busy); color: #fff; }
.btn-block { width: 100%; margin-top: .5rem; }

/* ----------------------------------------------------------------- alerts */

.alert { border-radius: var(--radius-sm); padding: .85rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.alert-error { background: var(--error-bg); border: 1px solid var(--error-border); }
.alert-warn { background: var(--warn-bg); border: 1px solid var(--warn-border); }
.alert p { margin: .4rem 0; }
.alert-title { font-size: .95rem; margin: 0 0 .35rem; }
.alert-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .85rem; }

/* ----------------------------------------------------------- paint switch */

.paint {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: none;
}

/* An iOS-style switch: off (left) arms "not available", on (right) arms
   "preferred". The track carries the armed colour so the control and the grid
   always agree, and the knob makes it read as something you flip. */
.switch {
  position: relative;
  width: 52px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--busy);
  cursor: pointer;
  transition: background-color .22s ease;
}
.switch[aria-checked="true"] { background: var(--pref); }

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .35);
  transition: transform .22s ease;
}
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }

.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.switch-label {
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease;
}
.switch-label:hover { color: var(--text); }
.switch-label[data-mode="busy"].is-active { color: var(--busy); }
.switch-label[data-mode="pref"].is-active { color: var(--pref); }

.paint-caption {
  margin: 0;
  font-size: .875rem;
  color: var(--text-muted);
}
.paint-caption strong { color: var(--text); }

/* ----------------------------------------------------------- budget meter */

.budget { margin: 0 0 1rem; }
.budget-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin-bottom: .35rem; flex-wrap: wrap; }
.budget-left { color: var(--text-muted); }
.meter { height: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: var(--accent); transition: width .18s ease; }
.budget.is-full .meter-fill { background: var(--busy); }
.budget.is-full .budget-left { color: var(--busy); font-weight: 600; }
.budget-note { margin: .45rem 0 0; font-size: .82rem; color: var(--pref); font-weight: 500; }

/* ---------------------------------------------------------------- toolbar */

.toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.legend { display: flex; gap: 1rem; font-size: .85rem; color: var(--text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border-strong); display: inline-block; }
.swatch-free { background: var(--surface-2); }
.swatch-busy { background: var(--busy); border-color: var(--busy); }
.swatch-pref {
  background: var(--pref);
  border-color: var(--pref);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}
.toolbar-actions { display: flex; align-items: center; gap: .6rem; }
.save-state { font-size: .85rem; color: var(--text-muted); min-width: 8rem; text-align: right; }
.save-state.is-saved { color: var(--ok); }
.save-state.is-error { color: var(--busy); }

/* ------------------------------------------------------------------- grid */

.grid-scroll { overflow-x: auto; padding-bottom: .5rem; }

.grid {
  display: grid;
  gap: 3px;
  min-width: 560px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.grid-dayhead {
  text-align: center;
  padding: .35rem .25rem .5rem;
  font-size: .85rem;
  font-weight: 700;
  background: var(--surface);
}
.grid-dayhead small { display: block; font-weight: 500; color: var(--text-muted); font-size: .75rem; }

/* A label marks the line *between* two rows, so it reads as the moment the slot
   below it begins. `line-height: 0` collapses the label's own box to nothing,
   which lets the glyphs centre on that line; unlabelled rows render an empty
   label and take no space. */
.grid-time {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  padding-right: .5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: start;
  line-height: 0;
}

/* The closing time of a session (12:00, 17:00) sits on its own zero-height row
   under the last slot; the fill keeps the grid's column tracks aligned. */
.grid-boundary-fill { height: 0; }

.grid-break {
  grid-column: 1 / -1;
  height: 1.1rem;
  display: flex; align-items: center; gap: .6rem;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.grid-break::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.cell {
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  padding: 0;
  cursor: pointer;
  transition: background-color .08s linear, border-color .08s linear;
}
/* Preferred cells carry an inset ring as well as a different hue, so they stay
   distinguishable from the unavailable ones without relying on red/green. */
.cell.is-busy { background: var(--busy); border-color: var(--busy); }
.cell.is-pref {
  background: var(--pref);
  border-color: var(--pref);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}
.cell.is-preview-busy { background: var(--busy-soft); border-color: var(--busy); }
.cell.is-preview-pref { background: var(--pref-soft); border-color: var(--pref); }
.cell.is-preview-clear {
  background: repeating-linear-gradient(45deg,
    var(--surface-2), var(--surface-2) 4px, var(--border-strong) 4px, var(--border-strong) 8px);
  box-shadow: none;
}
.cell.is-hour-start { border-top-color: var(--border-strong); }

/* The hover hint follows whichever colour is armed. */
.grid[data-mode="busy"] .cell:hover { border-color: var(--busy); }
.grid[data-mode="pref"] .cell:hover { border-color: var(--pref); }

/* A locked grid stays readable, but nothing responds to a click. */
.grid.is-readonly { opacity: .85; }
.grid.is-readonly .cell { cursor: default; }
.grid.is-readonly .cell:hover { border-color: var(--border); }

/* --------------------------------------------------------------- summary */

.summary { margin-top: 1.25rem; border-top: 1px solid var(--border); padding-top: .85rem; }
.summary summary { cursor: pointer; font-size: .9rem; font-weight: 600; }
.summary-body { margin-top: .75rem; font-size: .9rem; color: var(--text-muted); }
.summary-day { margin-bottom: .35rem; }
.summary-day strong { color: var(--text); }
.summary-group + .summary-group { margin-top: .9rem; }
.summary-heading {
  font-size: .82rem;
  margin: 0 0 .4rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.summary-busy .summary-heading { color: var(--busy); }
.summary-pref .summary-heading { color: var(--pref); }

/* ----------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--text); color: var(--bg);
  padding: .7rem 1.1rem; border-radius: 99px; font-size: .875rem; font-weight: 500;
  box-shadow: var(--shadow); z-index: 50; max-width: min(90vw, 40rem); text-align: center;
}

/* ----------------------------------------------------------------- admin */

/* The lock bar: whether students may still edit, and the switch that decides. */
.lockbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--ok);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.lockbar.is-locked { border-left-color: var(--busy); background: var(--error-bg); }
.lockbar-text { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.lockbar-text .muted { font-size: .82rem; }

/* Tutor chips */
.ta-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.ta-chip {
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .4rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.ta-chip:hover { border-color: var(--pref); }
.ta-chip.is-active { background: var(--pref); border-color: var(--pref); color: #fff; }
.ta-chip-hours { font-weight: 500; font-size: .78rem; opacity: .75; }

.ta-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.ta-editor-head h2 { margin: 0; }
.btn-danger-ghost { color: var(--busy); border-color: var(--busy); }

/* The tutor grid paints a single colour: available. */
#taGrid .cell.is-avail {
  background: var(--pref);
  border-color: var(--pref);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}
#taGrid .cell.is-preview-avail { background: var(--pref-soft); border-color: var(--pref); }
#taGrid .cell:hover { border-color: var(--pref); }



.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem .9rem; }
.stat-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.stat-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { background: var(--surface-2); position: sticky; top: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .75rem; font-weight: 600; }
.pill-yes { background: var(--accent-soft); color: var(--accent); }
.pill-no { background: var(--error-bg); color: var(--busy); }

.heat-cell {
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: .7rem;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.section-gap { margin-top: 1.5rem; }
.row-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.search { max-width: 18rem; }

/* --------------------------------------------------------------- narrow --
   On a phone the grid must fit the viewport: `touch-action: none` is needed so
   a finger drag paints instead of scrolling, which also disables panning, so
   the grid may not be wider than the screen. */

@media (max-width: 620px) {
  .page { padding: 1rem .6rem 3rem; }
  .card { padding: 1rem; }
  .card-narrow { margin: 1rem auto; }
  .grid { min-width: 0; gap: 2px; }
  .cell { height: 30px; border-radius: 4px; }
  .grid-time { font-size: .65rem; padding-right: .3rem; }
  .grid-dayhead { font-size: .72rem; padding: .25rem .1rem .4rem; }
  .grid-dayhead small { font-size: .6rem; }
  .paint { gap: .55rem; }
  .switch-label { font-size: .85rem; }
  .paint-caption { font-size: .82rem; }
  .toolbar { align-items: stretch; }
  .toolbar-actions { justify-content: space-between; width: 100%; }
  .save-state { text-align: left; min-width: 0; }
  .brand-title { display: none; }
  h1 { font-size: 1.15rem; }
}