/* Cito Scheduler — layout, colour system and responsive navigation. */
:root {
  --ink: #1f2933;
  --muted: #5f6b73;
  --line: #d5dde3;
  --head: #1e3a5f;      /* deep blue from the logo */
  --head-2: #2a6f97;
  --head-ink: #fff;
  --day: #e8eef4;
  --warn: #fff3c4;
  --error: #ffd6d6;
  --ok: #e3f4e6;
  --accent: #1976d2;
  --paper: #fff;
  --ground: #f3f6f9;
  --zebra: #f7f9fc;
  /* one colour per station (strong + tint) */
  --c-OUTPATIENT_CLINIC: #4a7fb5; --t-OUTPATIENT_CLINIC: #eef4fa;
  --c-MATERIALS: #c98a5a;         --t-MATERIALS: #fbf3ec;
  --c-BREAST_CLINIC: #c47a9a;     --t-BREAST_CLINIC: #faeff4;
  --c-THYROID_CLINIC: #8b7bc0;    --t-THYROID_CLINIC: #f2f0fa;
  --c-BONE_CLINIC: #6aa284;       --t-BONE_CLINIC: #eef6f1;
  --c-PAP: #5f9ea0;               --t-PAP: #edf5f5;
  --c-EBUS: #6b7db3;              --t-EBUS: #eff1f8;
  --c-AFTERNOON: #c9a35a;         --t-AFTERNOON: #fbf6ea;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 'Segoe UI', Arial, sans-serif; color: var(--ink); background: var(--ground); }
a { color: var(--accent); }
h1 { font-size: 20px; margin: 4px 0 12px; }
h2 { font-size: 16px; margin: 20px 0 8px; }

/* ---- top bar + phone menu ------------------------------------------------- */
.topbar { background: var(--head); color: var(--head-ink); padding: 8px 16px;
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.topbar a { color: var(--head-ink); text-decoration: none; padding: 4px 2px; }
.topbar a:hover, .topbar a.active { text-decoration: underline; }
.topbar .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-right: 8px; }
.topbar .brand img { border-radius: 50%; background: #fff; }
.topbar .spacer { flex: 1; }
.topbar form { display: inline; }
.topbar button { background: none; border: 1px solid rgba(255,255,255,.6); color: #fff; padding: 3px 8px; border-radius: 3px; cursor: pointer; }
.topbar .nav { display: contents; }
.topbar .lang a { padding: 2px 5px; font-size: 12px; opacity: .8; }
.topbar .lang a.active { opacity: 1; font-weight: 700; text-decoration: underline; }
.nav-toggle { display: none; }
.nav-burger { display: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; margin-left: auto; }

.container { max-width: none; margin: 0 auto; padding: 16px 24px; }
.container > .card:not(.summary), .container > p { max-width: 1400px; }
.flash { padding: 8px 12px; border-radius: 4px; margin: 0 0 12px; border: 1px solid transparent; }
.flash.ok { background: var(--ok); border-color: #9fd3a8; }
.flash.err { background: var(--error); border-color: #e59a9a; }
.flash.warn { background: var(--warn); border-color: #e2cf7f; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar form { display: flex; gap: 6px; align-items: center; }
button, .btn { font: inherit; padding: 5px 10px; border: 1px solid #8a959c; border-radius: 4px; background: #fff; cursor: pointer; text-decoration: none; color: var(--ink); }
button.primary, .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.danger { border-color: #c62828; color: #c62828; }
button.danger:hover { background: #c62828; color: #fff; }
input, select, textarea { font: inherit; padding: 4px 6px; border: 1px solid #8a959c; border-radius: 4px; max-width: 100%; }
textarea { width: 100%; min-height: 80px; }
label.inline { display: inline-flex; gap: 6px; align-items: center; margin-right: 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---- tables --------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; background: var(--paper); }
th, td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
th { background: var(--head); color: var(--head-ink); font-weight: 600; }
tbody tr:nth-child(even) td { background: var(--zebra); }
.grid tbody tr:nth-child(even) td { background: var(--paper); }
td.num, th.num { text-align: right; }
td.max { background: #ffe0b2 !important; font-weight: 700; }
.table-wrap { overflow-x: auto; border-radius: 6px; }

/* station colours: column headers, statistics headers, chips */
th[class*="st-"] { border-bottom: 4px solid var(--line); }
th.st-OUTPATIENT_CLINIC { border-bottom-color: var(--c-OUTPATIENT_CLINIC); }
th.st-MATERIALS { border-bottom-color: var(--c-MATERIALS); }
th.st-BREAST_CLINIC { border-bottom-color: var(--c-BREAST_CLINIC); }
th.st-THYROID_CLINIC { border-bottom-color: var(--c-THYROID_CLINIC); }
th.st-BONE_CLINIC { border-bottom-color: var(--c-BONE_CLINIC); }
th.st-PAP { border-bottom-color: var(--c-PAP); }
th.st-EBUS { border-bottom-color: var(--c-EBUS); }
th.st-AFTERNOON { border-bottom-color: var(--c-AFTERNOON); }
.chip { display: inline-block; padding: 1px 7px; margin: 1px 3px 1px 0; border-radius: 4px; border-left: 3px solid var(--line);
  background: #f1f4f7; color: var(--ink); white-space: nowrap; }
.chip.st-OUTPATIENT_CLINIC { background: var(--t-OUTPATIENT_CLINIC); border-color: var(--c-OUTPATIENT_CLINIC); }
.chip.st-MATERIALS { background: var(--t-MATERIALS); border-color: var(--c-MATERIALS); }
.chip.st-BREAST_CLINIC { background: var(--t-BREAST_CLINIC); border-color: var(--c-BREAST_CLINIC); }
.chip.st-THYROID_CLINIC { background: var(--t-THYROID_CLINIC); border-color: var(--c-THYROID_CLINIC); }
.chip.st-BONE_CLINIC { background: var(--t-BONE_CLINIC); border-color: var(--c-BONE_CLINIC); }
.chip.st-PAP { background: var(--t-PAP); border-color: var(--c-PAP); }
.chip.st-EBUS { background: var(--t-EBUS); border-color: var(--c-EBUS); }
.chip.st-AFTERNOON { background: var(--t-AFTERNOON); border-color: var(--c-AFTERNOON); }
.chip.av-ANNUAL_LEAVE { background: #fbeeee; border-color: #c97a7a; }
.chip.av-TRAINING { background: #edf4fa; border-color: #6f9fc4; }
.chip.av-AFTERNOON_SHIFT { background: var(--t-AFTERNOON); border-color: var(--c-AFTERNOON); }
.chip.av-UNAVAILABLE { background: #f0f1f3; border-color: #9aa3ab; }
.chip.role-ADMIN { background: var(--t-EBUS); border-color: var(--c-EBUS); }
.chip.role-REVIEWER { background: var(--t-BONE_CLINIC); border-color: var(--c-BONE_CLINIC); }

/* week grid */
.grid th:first-child, .grid td.day { position: sticky; left: 0; z-index: 1; }
.grid td.day { background: var(--day) !important; font-weight: 700; white-space: nowrap; }
.grid td.cell { min-width: 120px; height: 46px; }
.grid td.cell.warning { background: var(--warn) !important; }
.grid td.cell.error { background: var(--error) !important; }
.grid td.cell a.edit { display: block; min-height: 32px; color: inherit; text-decoration: none; }
.grid td.cell a.edit:hover { outline: 2px solid var(--accent); border-radius: 4px; }
.grid .entry { display: block; }
.grid .lock { font-size: 12px; margin-right: 2px; }
.summary .chip { font-size: 14px; font-weight: 600; }

.findings { margin: 0; padding-left: 0; list-style: none; }
.findings li { padding: 4px 8px; border-left: 4px solid var(--line); margin-bottom: 3px; background: var(--paper); border-radius: 0 4px 4px 0; }
.findings li.error { border-left-color: #c62828; background: #fff5f5; }
.findings li.warning { border-left-color: #e0a800; background: #fffbea; }
.findings li.info { border-left-color: #607d8b; }
.status { font-weight: 600; }
.status.invalid { color: #c62828; }
.pending { background: var(--error); border: 1px solid #e59a9a; padding: 10px 12px; border-radius: 4px; }
.week-list a { margin-right: 10px; }
.week-list a.current { font-weight: 700; }
.form-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0; }
pre.doc { white-space: pre-wrap; background: var(--paper); border: 1px solid var(--line); padding: 12px; font-size: 13px; }
.login { max-width: 360px; margin: 60px auto; }
.login input { width: 100%; margin-bottom: 10px; }
.login .logo { display: block; margin: 0 auto 4px; max-width: 100%; height: auto; }
.login .lang { text-align: center; }
.login .lang a { margin: 0 6px; }
.login .lang a.active { font-weight: 700; }

/* ---- phone layout --------------------------------------------------------- */
@media (max-width: 860px) {
  .topbar { gap: 6px 10px; }
  .nav-burger { display: inline-block; }
  .topbar .nav { display: none; width: 100%; flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,.3); padding-top: 6px; }
  .topbar .nav a, .topbar .nav form, .topbar .nav .lang { display: block; padding: 8px 4px; }
  .topbar .nav form button { width: 100%; text-align: left; }
  .nav-toggle:checked ~ .nav { display: flex; }
  .container { padding: 10px; }
  h1 { font-size: 18px; }
  .toolbar .btn, .toolbar button { padding: 6px 10px; }
  .grid td.cell { min-width: 96px; font-size: 13px; }
  th, td { padding: 5px 6px; }
  .chip { padding: 1px 6px; }
}
@media (max-width: 480px) {
  .login { margin: 20px auto; }
  .toolbar { gap: 6px; }
  .toolbar form { width: 100%; }
}
@media print {
  .topbar, .toolbar, form, .no-print { display: none !important; }
  body { background: #fff; }
}
.manual h2 { margin-top: 26px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.manual p, .manual li { max-width: 80ch; }
.manual table { max-width: 900px; }
.manual nav a { margin: 0 2px; }

/* wide screens: use the space; keep long text readable */
@media (min-width: 1800px) {
  body { font-size: 15px; }
  .container { padding: 20px 32px; }
  .grid td.cell { min-width: 160px; height: 56px; }
  .grid .chip { font-size: 15px; padding: 3px 9px; }
  th, td { padding: 8px 10px; }
  .manual p, .manual li { max-width: 90ch; }
}

/* AI review prompt: fill the viewport below the toolbar */
.prompt-box { width: 100%; height: calc(100vh - 300px); min-height: 480px; resize: vertical;
  font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; line-height: 1.4; }