/* Screening Scheduler - blue and white, matches the Sound Imaging brand.
   Big touch targets: half the visitors are on phones. */
:root { --navy:#123a6b; --blue:#1f6fce; --pale:#eef4fb; --line:#c9d9ec; }
* { box-sizing: border-box; }
body { margin:0; font-family: 'Segoe UI', Arial, sans-serif; color:#16324f;
       background:#f7fafd; }
header.top { background:var(--navy); color:#fff; padding:14px 20px;
       display:flex; justify-content:space-between; align-items:center;
       flex-wrap:wrap; gap:6px; }
.brand-name { font-size:22px; font-weight:700; font-style:italic; }
.brand-name .nb { font-size:15px; }
.brand-sub { font-size:13.5px; color:#cfe0f5; }
header .ver { font-size:11.5px; color:#9fb8dc; }
main { max-width:880px; margin:0 auto; padding:18px 14px 40px; }
footer { text-align:center; color:#5a749b; font-size:12.5px; padding:18px; }
h1 { color:var(--navy); font-size:26px; margin:14px 0 6px; }
h2 { color:var(--navy); font-size:19px; margin:22px 0 8px; }
.notice { background:var(--pale); border:1px solid var(--line);
       border-radius:10px; padding:12px 16px; margin:12px 0; font-size:15px; }
.problems { background:#fdecec; border:1px solid #e5a0a0; border-radius:10px;
       padding:12px 16px; margin:12px 0; color:#8c1c1c; }
.problems li { margin:4px 0; }
.datebtns, .timebtns { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.datebtns button, .timebtns button {
       font-size:16px; padding:14px 18px; border-radius:10px;
       border:2px solid var(--blue); background:#fff; color:var(--navy);
       cursor:pointer; min-width:130px; }
.datebtns button.sel, .timebtns button.sel,
.datebtns button:hover, .timebtns button:hover { background:var(--blue);
       color:#fff; }
.datebtns button:disabled { border-color:#b9c6d6; color:#93a5bb;
       background:#f1f4f8; cursor:not-allowed; }
.countdown { position:sticky; top:0; z-index:50; background:#fff8e1;
       border:2px solid #e0b94e; border-radius:10px; padding:10px 16px;
       margin:12px 0; font-size:16px; font-weight:600; color:#7a5b00; }
.countdown button { margin-left:12px; font-size:14px; padding:6px 12px;
       border-radius:8px; border:1px solid #b98f00; background:#ffe9a8;
       cursor:pointer; }
form .field { margin:14px 0; }
form label { display:block; font-weight:600; margin-bottom:5px; }
form input[type=text], form input[type=email], form input[type=tel],
form input[type=date], form select, form textarea {
       width:100%; font-size:16px; padding:12px; border:1.5px solid #9db4cf;
       border-radius:8px; background:#fff; }
form input:focus, form select:focus, form textarea:focus {
       outline:3px solid var(--blue); outline-offset:1px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3 { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; }
@media (max-width:560px){ .row2,.row3 { grid-template-columns:1fr; } }
.checkline { display:flex; gap:10px; align-items:flex-start; margin:12px 0;
       background:var(--pale); border:1px solid var(--line);
       border-radius:10px; padding:12px; font-size:15px; }
.checkline input { width:22px; height:22px; margin-top:2px; flex:none; }
.btn { display:inline-block; font-size:17px; font-weight:700; padding:14px 26px;
       border-radius:10px; border:0; background:var(--blue); color:#fff;
       cursor:pointer; }
.btn:hover { background:var(--navy); }
.consent { font-size:14.5px; background:#fff; border:1px solid var(--line);
       border-radius:10px; padding:14px 16px; margin:10px 0; }
/* unmistakable gold band on every admin page */
.adminband { background:#7a4b00; color:#ffe9b0; font-weight:700;
       text-align:center; padding:8px 12px; font-size:14.5px;
       letter-spacing:0.5px; }
.pagekind { color:#7a4b00; font-weight:800; letter-spacing:2px;
       font-size:13px; margin:14px 0 0; }
.pagesub { font-weight:400; font-size:19px; color:#4a648c; }
.monthrow { display:flex; flex-wrap:wrap; gap:14px; }
.calday { display:inline-block; min-width:34px; padding:7px 0;
       border-radius:8px; }
.calday.sel { background:var(--blue); color:#fff; font-weight:700; }
details.dayrow { background:#fff; border:1.5px solid var(--line);
       border-radius:10px; padding:10px 14px; margin:8px 0; }
details.dayrow summary { cursor:pointer; font-size:15.5px; padding:4px 0; }
details.dayrow.day-off summary { color:#8c1c1c; }
details.dayrow.day-custom summary { color:#7a5b00; }
/* day checklist row: [checkbox] [expandable day] */
.dayline { display:flex; align-items:flex-start; gap:12px; }
.dayline .workbox { width:26px; height:26px; margin-top:16px; flex:none; }
.dayline.day-off details { opacity:0.55; }
.offtext { color:#8c1c1c; font-weight:700; }
/* aligned break rows: starts / ends / note, identical label heights */
.breakrow { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:12px;
       margin:6px 0; align-items:end; }
.breakrow label { white-space:nowrap; }
@media (max-width:560px){ .breakrow { grid-template-columns:1fr; } }
/* events list on the dashboard - one boxed row per event */
.evrow { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
       background:#fff; border:2px solid var(--navy); border-radius:10px;
       padding:10px 14px; margin:0 0 8px; }
.evname { font-weight:800; font-size:16px; }
.evstats { color:#444; }
.evlinks { margin-left:auto; display:flex; align-items:center; gap:12px; }
.evbinned { border-color:#999; background:#f1f1f1; color:#666; }
.pill { font-size:11.5px; font-weight:800; padding:2px 9px;
       border-radius:999px; margin-left:8px; letter-spacing:1px; }
.pill.live { background:#1c6b24; color:#fff; }
.pill.closed { background:#8c1c1c; color:#fff; }
.btn-danger { background:#8c1c1c; }
/* quiet red text-link style for 'remove this sonographer' */
.btn-removelink { color:#8c1c1c; text-decoration:underline;
       background:none; border:none; cursor:pointer; font-size:13.5px; }

/* the big event banner above the live board - impossible to miss */
.eventband { background:var(--navy); color:#fff; font-size:26px;
       font-weight:800; padding:14px 18px; border-radius:10px;
       margin:22px 0 10px; }

/* date band above each day's grid: event left, date center, count right */
.dateband { display:flex; align-items:center; background:#dfe8f5;
       border:1px solid var(--navy); border-radius:8px;
       padding:8px 14px; margin:18px 0 6px; font-size:16px; }
.db-event { font-weight:700; flex:1; }
.db-date { font-weight:800; flex:1; text-align:center; }
.db-count { flex:1; text-align:right; font-weight:700; color:#1c6b24; }

/* bold divider between weeks in day lists */
.weekdiv { border-top:4px solid var(--navy); margin:20px 0 10px;
       padding-top:6px; color:var(--navy); font-weight:800;
       font-size:12.5px; letter-spacing:2px; }
/* event day hours: one aligned row per day */
.dayhoursrow { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:12px;
       align-items:end; margin:6px 0; padding:6px 0;
       border-bottom:1px solid var(--line); }
.dayhoursrow .dayname { padding-bottom:12px; }
@media (max-width:560px){ .dayhoursrow { grid-template-columns:1fr; } }
.unsaved { background:#fff4d6; border:2px solid #e0b94e; border-radius:10px;
       padding:10px 14px; margin:10px 0; position:sticky; top:0; z-index:40; }
.btnplain { font-size:15px; padding:10px 16px; border-radius:10px;
       border:1.5px solid #9db4cf; background:#fff; color:#16324f;
       cursor:pointer; margin-left:8px; }
/* dashboard menu tiles */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
       gap:12px; margin:14px 0 20px; }
.tile { display:block; background:#fff; border:2px solid var(--blue);
       border-radius:12px; padding:14px 16px; text-decoration:none;
       color:var(--navy); }
.tile:hover { background:var(--pale); }
.tile .tname { font-weight:800; font-size:16px; margin-bottom:4px; }
.tile .tdesc { font-size:13.5px; color:#4a648c; line-height:1.45; }
.success { background:#e4f7e6; border:2px solid #3f9d4b; border-radius:10px;
       padding:12px 16px; margin:12px 0; color:#1c6b24; font-weight:700;
       font-size:16px; }
/* click-a-date calendar on the Create Event form */
.cal { background:#fff; border:1.5px solid var(--line); border-radius:10px;
       padding:10px; max-width:420px; }
.calhead { display:flex; justify-content:space-between; align-items:center;
       margin-bottom:8px; }
.calhead button { font-size:16px; padding:6px 14px; border-radius:8px;
       border:1.5px solid var(--blue); background:#fff; color:var(--navy);
       cursor:pointer; }
.calgrid { border-collapse:collapse; width:100%; table-layout:fixed; }
.calgrid th { color:var(--navy); font-size:12.5px; padding:4px; }
.calgrid td { padding:2px; text-align:center; overflow:hidden; }
.calgrid button { width:100%; min-height:42px; font-size:15px;
       border:1.5px solid var(--line); border-radius:8px; background:#fff;
       color:#16324f; cursor:pointer; }
.calgrid button:hover { border-color:var(--blue); }
.calgrid button.sel { background:var(--blue); border-color:var(--blue);
       color:#fff; font-weight:700; }
/* admin */
table.grid { border-collapse:collapse; margin:10px 0 26px; width:100%;
       font-size:13.5px; }
table.grid th, table.grid td { border:1px solid var(--line); padding:6px 8px;
       text-align:center; }
table.grid th { background:var(--pale); color:var(--navy); }
td.open   { background:#e8f6e9; color:#1c6b24; }
td.held   { background:#fff4d6; color:#7a5b00; }
td.booked { background:#dce9fb; color:var(--navy); font-weight:600; }
td.booked a { color:var(--navy); }
.adminbar { display:flex; gap:14px; flex-wrap:wrap; margin:10px 0 18px; }
.adminbar a { color:var(--blue); font-weight:600; text-decoration:none; }
.statline { font-size:15px; margin:6px 0; }
/* admin pages: header + admin band + nav buttons frozen at the top */
.stickwrap { position:sticky; top:0; z-index:100;
       box-shadow:0 2px 8px rgba(0,0,0,.25); }
.adminnav { background:var(--navy); padding:6px 18px; display:flex;
       flex-wrap:wrap; gap:8px; }
.adminnav a { color:#fff; text-decoration:none; font-weight:700;
       font-size:13px; padding:5px 12px; border:1px solid
       rgba(255,255,255,.45); border-radius:7px; }
.adminnav a:hover { background:#fff; color:var(--navy); }

/* show/hide button beside password boxes */
.pwrow { display:flex; gap:6px; align-items:center; }
.pwrow input { flex:1; }
.pwbtn { padding:8px 12px; font-size:12px; font-weight:700; cursor:pointer;
       border:1px solid var(--line); border-radius:7px; background:#f2f2f2; }

/* bold line - SONOGRAPHER N - bold line separators on the setup page */
.sonosep { display:flex; align-items:center; gap:14px; margin:30px 0 12px; }
.sonosep::before, .sonosep::after { content:""; flex:1; height:4px;
       background:var(--navy); border-radius:2px; }
.sonosep span { font-size:19px; font-weight:800; color:var(--navy);
       white-space:nowrap; }

/* light-red leave-this-page dialog (custom, replaces browser popup for
   the program's own links) */
.leaveoverlay { position:fixed; inset:0; background:rgba(0,0,0,.45);
       z-index:300; display:flex; align-items:center; justify-content:center; }
.leavebox { background:#fdeaea; border:3px solid #8c1c1c; border-radius:12px;
       padding:22px 26px; max-width:440px; box-shadow:0 8px 30px rgba(0,0,0,.35); }
.leavebox h2 { color:#8c1c1c; }

/* event names on the master calendar days */
.calev { display:block; font-size:10.5px; font-weight:700; color:#fff;
       background:var(--navy); border-radius:5px; padding:1px 4px;
       margin-top:2px; text-decoration:none; overflow:hidden;
       text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.calev:hover { background:#3a5aa8; }

/* public booking week calendar: Sun-Sat columns, times right on the days */
.weekcal { margin:14px 0; }
.wc-headrow, .wc-row { display:grid; grid-template-columns:repeat(7, 1fr);
       gap:6px; margin-bottom:6px; }
.wc-headcell { text-align:center; font-weight:800; color:var(--navy);
       font-size:13px; padding:4px 0; border-bottom:2px solid var(--navy); }
.wc-cell { background:#fff; border:1px solid var(--line); border-radius:8px;
       padding:6px; min-height:40px; }
.wc-empty { background:transparent; border:none; }
.wc-date { font-weight:800; font-size:13px; color:var(--navy);
       text-align:center; margin-bottom:6px; }
.wc-time { display:block; width:100%; margin:0 0 5px; padding:7px 4px;
       font-size:14px; font-weight:600; background:#eef7ee;
       border:1.5px solid #1c6b24; color:#124a18; border-radius:7px;
       cursor:pointer; }
.wc-time:hover { background:#1c6b24; color:#fff; }
.wc-full { text-align:center; color:#8c1c1c; font-weight:800; padding:8px 0; }
@media (max-width:700px) {
  /* phones: the days stack vertically, empty days disappear */
  .wc-headrow { display:none; }
  .wc-row { display:block; margin:0; }
  .wc-cell { margin:0 0 10px; }
  .wc-empty { display:none; }
  .wc-date { font-size:15px; }
  .wc-time { font-size:16px; padding:11px 4px; }
}

/* countdown turns red when time is running low */
.countdown.lowtime { background:#8c1c1c; color:#fff; border-color:#8c1c1c; }
.countdown.lowtime #cdtime { color:#fff; font-weight:800; }

/* fields the visitor missed get outlined in red */
.fielderr { outline:3px solid #c22 !important; border-radius:6px; }

/* DOB / height / weight parts with small labels underneath */
.dobrow { display:flex; gap:10px; flex-wrap:wrap; }
.dobpart { flex:1; min-width:90px; }
.sublab { font-size:11px; font-weight:700; color:#555; letter-spacing:1px;
       margin-top:3px; }

/* fasting reminder - bold and impossible to miss */
.fastingbox { background:#fff8e1; border:2px solid #b8860b; border-radius:10px;
       padding:14px 16px; margin:18px 0; }
.fasthead { font-weight:800; font-size:16.5px; color:#7a5200; }

/* professional printable copy of a completed registration */
.paperdoc { max-width:700px; background:#fff; border:1px solid var(--line);
       border-radius:10px; padding:26px 30px; }
.paperhead { text-align:center; border-bottom:3px solid var(--navy);
       padding-bottom:12px; margin-bottom:14px; }
.ph-co { font-size:22px; font-weight:800; color:var(--navy);
       letter-spacing:2px; }
.ph-sub { color:#555; }
.ph-title { font-size:16px; font-weight:700; margin-top:6px; }
.ph-appt { font-size:16px; text-align:center; margin:10px 0 4px; }
.ph-h2 { font-size:15px; margin:16px 0 6px; border-bottom:1px solid var(--line);
       padding-bottom:3px; }
.grid.paper th { width:260px; text-align:left; }
.ph-ack { line-height:1.8; margin:4px 0; }
.ph-foot { text-align:center; color:#555; font-size:12.5px; margin-top:18px; }

.fasting-small { padding:9px 12px; }
.fasting-small .fasthead { font-size:13.5px; }
.fasting-small p { font-size:12px; }

@media print {
  header.top, footer, .adminbar, .adminband, .noprint { display:none; }
  body { background:#fff; }
  .paperdoc { border:none; padding:0; max-width:none; }
  /* the patient copy compresses to ONE page */
  .paperdoc { font-size:10.5px; }
  .paperdoc .ph-co { font-size:16px; }
  .paperdoc .ph-title { font-size:12px; margin-top:2px; }
  .paperdoc .ph-sub { font-size:10px; }
  .paperdoc .ph-appt { font-size:12px; margin:4px 0 2px; }
  .paperdoc .ph-h2 { font-size:11px; margin:7px 0 3px; padding-bottom:1px; }
  .paperdoc .grid th, .paperdoc .grid td { padding:2px 6px; font-size:10.5px; }
  .paperdoc .paperhead { padding-bottom:5px; margin-bottom:6px; }
  .paperdoc .ph-ack { line-height:1.45; font-size:10.5px; }
  .paperdoc .fastingbox { padding:5px 9px; margin:8px 0; }
  .paperdoc .fasthead { font-size:11px; }
  .paperdoc .fasting-small p { font-size:9.5px; margin:2px 0 0; }
  .paperdoc .ph-foot { font-size:9.5px; margin-top:8px; }
  .paperdoc .qrblock { padding:4px 8px; margin:6px 0; }
  .paperdoc .qrblock img { width:80px; height:80px; }
  .paperdoc .qrblock .qrtext { font-size:9.5px; }
}

/* exam info circles + pop-up (v0.1.7) - the little i buttons on the five
   exams and the box that explains what each screening looks for */
.infodot { display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; border:2px solid #1b2a52;
  background:#eef2fb; color:#1b2a52; font-weight:800; font-style:italic;
  font-family:Georgia,serif; font-size:13px; line-height:1; cursor:pointer;
  margin-left:8px; padding:0; flex:0 0 auto; }
.infodot:hover { background:#1b2a52; color:#fff; }
.examinfo-overlay { display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:1000; align-items:center;
  justify-content:center; padding:16px; }
.examinfo-box { background:#fff; border:3px solid #1b2a52; border-radius:8px;
  max-width:520px; width:100%; padding:18px 22px;
  box-shadow:0 8px 30px rgba(0,0,0,.35); }
.examinfo-box h3 { margin:0 0 8px; color:#1b2a52; }
.examinfo-box p { margin:6px 0; font-size:15px; line-height:1.5; }

/* the check-in QR block on the printable copy (v0.1.7) */
.qrblock { display:flex; align-items:center; gap:14px; margin:12px 0;
  border:1px solid #bbb; padding:10px 12px; }
.qrblock img { width:110px; height:110px; flex:0 0 auto; }
.qrblock .qrtext { font-size:12.5px; line-height:1.45; }