/* Key Services portal.
   Designed for wall-mounted coordinator screens as much as laptops: large
   numerals, high contrast, and colour used only to mean "act on this". */

/* Brand palette — taken from the MedicsPro Key Services logo and medicspro.com.
   The site is light: #135cae is the action blue used across medicspro.com,
   #0868a8 and #505058 are sampled from the logo itself, and #333d48 is the
   slate the parent site uses for headers.

   Colour carries meaning on this dashboard, so the status tones below are
   chosen for contrast on white rather than for brightness: every one clears
   4.5:1 against the panel background, because a coordinator reading an amber
   badge on a wall display at a distance is the whole point of the thing. */

:root {
  /* Brand */
  --brand:      #0868a8;  /* logo blue */
  --brand-dark: #135cae;  /* medicspro.com action blue */
  --slate:      #333d48;  /* medicspro.com header slate */
  --logo-grey:  #505058;  /* logo wordmark grey */

  /* Surfaces */
  --bg:      #f4f6f9;
  --panel:   #ffffff;
  --panel-2: #eef2f6;
  --line:    #dde3ea;

  /* Text */
  --ink:       #1f2630;
  --ink-dim:   #55606d;
  --ink-faint: #7d8896;

  /* Status */
  --accent:   #135cae;
  --ok:       #1b7a4b;
  --info:     #0187bd;
  --warn:     #b45309;
  --critical: #c0392b;

  --radius: 10px;
  --gap: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shadow: 0 1px 2px rgba(31, 38, 48, .06), 0 1px 3px rgba(31, 38, 48, .04);
}

* { box-sizing: border-box; }

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 620; letter-spacing: -0.01em; }

/* --- Environment banner ------------------------------------------------- */
.env-banner {
  background: #fbe6c2;
  color: #6b3d05;
  border-bottom: 1px solid #f0d5ab;
  text-align: center;
  font-weight: 650;
  font-size: 13px;
  padding: 6px 12px;
  text-transform: capitalize;
}

/* --- Top bar ------------------------------------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }

/* The logo is a wide lockup (4:1), so it is sized by height and left to find
   its own width — scaling by width would make it tiny on a phone. */
.brand-logo { height: 30px; width: auto; display: block; }
.brand-logo.big { height: 54px; margin: 0 auto 18px; }

.org-chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 13px;
}

.mainnav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.mainnav a {
  padding: 6px 11px;
  border-radius: 7px;
  color: var(--ink-dim);
  font-size: 14px;
}
.mainnav a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.mainnav a[aria-current="page"] { background: #e7eff9; color: var(--brand-dark); font-weight: 620; }

.userbox { display: flex; align-items: center; gap: 10px; }
.avatar {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 12px; font-weight: 650;
}
.uname { display: flex; flex-direction: column; font-size: 13px; line-height: 1.25; }
.uname em { color: var(--ink-faint); font-style: normal; font-size: 11px; }
.linkbtn {
  background: none; border: none; padding: 0;
  color: var(--ink-dim); font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.linkbtn:hover { color: var(--ink); text-decoration: underline; }

/* --- Layout ------------------------------------------------------------- */
.wrap { max-width: 1500px; margin: 0 auto; padding: 22px 20px 60px; }
.wrap.narrow { max-width: 660px; }

.page-head { margin-bottom: 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; }
.page-head .sub { margin: 0; color: var(--ink-dim); font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sectionhead { margin: 28px 0 12px; font-size: 15px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }

/* Live-connection indicator */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); display: inline-block; }
.dot[data-stream-state="open"] { background: var(--ok); }
.dot[data-stream-state="error"] { background: var(--critical); }

/* --- Priority alarms ---------------------------------------------------- */
.priority { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }

.alarm {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--gap); flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  border-left: 4px solid var(--ink-faint);
}
.alarm-open { border-left-color: var(--critical); background: #fdf2f1; }
.alarm-ack  { border-left-color: var(--info); }
.alarm-warn { border-left-color: var(--warn); background: #fdf6ec; }
.alarm h2 { font-size: 16px; }
.alarm p { margin: 3px 0 0; color: var(--ink-dim); font-size: 13px; }
.alarm-side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.alarm-side .stack { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* --- Stat tiles --------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow);
}
.stat.bad { border-color: var(--critical); }
.stat-n { font-size: 26px; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat.bad .stat-n { color: var(--critical); }
.stat-l { font-size: 12px; color: var(--ink-dim); }

/* --- Panel grid --------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--gap);
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.card-alert { border-color: #f0c9c4; }
.card h2 {
  font-size: 14px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.count {
  background: var(--panel-2);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.rows li:first-child { border-top: none; }
.who  { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.what { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.when { color: var(--ink-faint); font-size: 12.5px; text-align: right; white-space: nowrap; }

.empty { color: var(--ink-faint); font-size: 14px; margin: 6px 0; }
.more { display: inline-block; margin-top: 10px; font-size: 13px; }
.muted { color: var(--ink-faint); }
.mono { font-family: var(--mono); font-size: 12.5px; }

/* --- Badges ------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.critical { background: #fdecea; color: #a02d21; border-color: #f3c4bd; }
.badge.warn     { background: #fdf3e3; color: #8a4008; border-color: #f0d5ab; }
.badge.info     { background: #e7f4fb; color: #0a5e80; border-color: #b9e0f1; }
.badge.ok       { background: #e8f5ee; color: #14603a; border-color: #b8dfc9; }
.badge.muted    { background: var(--panel-2); color: var(--ink-dim); border-color: var(--line); }

/* --- Tables ------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  padding: 9px 12px;
  color: var(--ink-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
  font-weight: 620;
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:hover { background: var(--panel-2); }
.table td.empty { text-align: center; padding: 26px; }

/* --- Notes -------------------------------------------------------------- */
.note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.note h2 { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.note p { margin: 4px 0; }
.notebody { white-space: pre-wrap; color: var(--ink); }
.noteactions { margin-top: 12px; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- Buttons and forms -------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 560;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}
.btn:hover { text-decoration: none; filter: brightness(1.15); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger  { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn.ghost   { background: transparent; }
.btn.wide    { width: 100%; margin-top: 8px; }

/* --- Form controls -------------------------------------------------------
   Selected by EXCLUSION, never by listing the types we want.
   Two separate bugs came from an inclusion list: `date` and `time` were left
   out of it, and — worse — `input[type="text"]` does not match `<input name=x>`
   with no type attribute at all, which is how nineteen fields across the staff,
   service user, safeguarding, incident, settings and user forms ended up
   rendering as raw browser defaults.
   An exclusion list fails safe: a control we forget about gets styled, rather
   than silently escaping the design. Only the controls that must keep their
   native rendering are listed. */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]):not([type="hidden"]),
select, textarea {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid #cbd4de;
  background-color: #fff;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  min-height: 40px;
  transition: border-color .12s ease, box-shadow .12s ease;
  -webkit-appearance: none;
  appearance: none;
}

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: #a8b5c4;
}

/* A ring rather than the default outline, so focus reads clearly against the
   white panel without shifting layout. */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(19, 92, 174, .16);
}

input:disabled, select:disabled, textarea:disabled {
  background-color: var(--panel-2);
  color: var(--ink-faint);
  cursor: not-allowed;
}

::placeholder { color: #9aa5b3; }

/* Select: the native chevron is inconsistent across browsers and looks dated,
   so appearance is stripped above and this one drawn in. Inline SVG as a data
   URI keeps it within the CSP (img-src 'self' data:) with no extra request. */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2355606d' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
  cursor: pointer;
}
select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23135cae' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* A select with no size still needs its options to look native when open. */
select option { color: var(--ink); background: #fff; }

/* Date and time: the picker button is the one part that cannot be redrawn, so
   it is tinted to the brand blue and given a proper hit area instead. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 4px;
  margin-right: -2px;
  border-radius: 5px;
  opacity: .55;
  transition: opacity .12s ease, background-color .12s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: var(--panel-2);
}
/* Safari/iOS lay these out with their own inner spacing; strip it so the text
   sits on the same baseline as every other field. */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
}
::-webkit-datetime-edit { padding: 0; }
::-webkit-datetime-edit-fields-wrapper { padding: 0; }

/* Number: the spinners are tiny targets and mis-scroll on a trackpad. The
   fields here are minutes and day counts, typed not nudged. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Checkbox: sized up from the ~13px default and tinted to the brand. */
input[type="checkbox"] {
  -webkit-appearance: auto;
  appearance: auto;
  width: 17px;
  height: 17px;
  min-height: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}

.inline input[type="text"] { width: auto; flex: 1; min-width: 180px; }

.settingsform { max-width: 560px; display: flex; flex-direction: column; gap: 4px; }
.settingsform label { margin-top: 12px; font-size: 13px; color: var(--ink-dim); }
.settingsform .check { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.settingsform .check input[type="checkbox"] { width: 17px; }
.settingsform button { margin-top: 18px; align-self: flex-start; }

/* Short fields get a width that suits their content rather than the form. */
.settingsform input[type="date"],
.settingsform input[type="datetime-local"] { width: auto; min-width: 190px; max-width: 220px; }
.settingsform input[type="time"]          { width: auto; min-width: 130px; max-width: 150px; }
.settingsform input[type="number"]        { width: auto; min-width: 110px; max-width: 130px; }
.settingsform input[type="tel"]           { max-width: 260px; }
.settingsform select                      { max-width: 100%; }

/* Anything that is a date/time/number sits better on one line with its label,
   but only where there is room for it. */
@media (max-width: 560px) {
  .settingsform input[type="date"],
  .settingsform input[type="time"],
  .settingsform input[type="number"],
  .settingsform input[type="tel"] { width: 100%; max-width: none; }
}

.fineprint { color: var(--ink-faint); font-size: 12.5px; margin: 6px 0 0; }
.formerror {
  background: #fdecea;
  border: 1px solid #f3c4bd;
  color: #a02d21;
  padding: 10px 13px;
  border-radius: 7px;
  font-size: 14px;
}

/* --- Note authoring ------------------------------------------------------
   These forms replaced the separate iPad app, so they are built for a tablet
   held in the hand: one column, 16px inputs (below that iOS zooms the page on
   focus), and touch targets at the 44px Apple minimum. */

textarea {
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.55;
  resize: vertical;
  min-height: 120px;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.bigform { display: flex; flex-direction: column; gap: 4px; }
.bigform label { margin-top: 16px; font-size: 14px; color: var(--ink-dim); }
.bigform input, .bigform select, .bigform textarea { font-size: 16px; min-height: 44px; }

.formactions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.formactions .btn { min-height: 44px; padding: 11px 20px; }

.opt { color: var(--ink-faint); font-weight: 400; }

/* Definition list used on the service user record. */
.deflist { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.deflist dt { color: var(--ink-dim); font-size: 13px; }
.deflist dd { margin: 0; }

/* On a touch device every control gets the larger target, not just the
   authoring forms. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 16px;
    min-height: 44px;
  }
  input[type="checkbox"] { width: 22px; height: 22px; }
  .btn { min-height: 44px; padding: 11px 18px; }
  .mainnav a { padding: 10px 14px; }
}

/* --- Auth pages --------------------------------------------------------- */
.authwrap { min-height: 82vh; display: grid; place-items: center; padding: 40px 20px; }
.authcard {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(31, 38, 48, .08);
}
.authcard h1 { font-size: 21px; }
.authcard .sub { color: var(--ink-dim); font-size: 14px; margin: 6px 0 20px; }
.authcard label { display: block; text-align: left; margin: 12px 0 4px; font-size: 13px; color: var(--ink-dim); }

/* --- Footer ------------------------------------------------------------- */
.foot {
  text-align: center;
  color: var(--ink-faint);
  font-size: 12px;
  padding: 26px 20px 40px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.foot .powered { display: block; margin-top: 4px; }
.foot .powered a { color: var(--ink-dim); }

/* --- Narrow screens ----------------------------------------------------- */
@media (max-width: 720px) {
  .rows li { grid-template-columns: 1fr auto; }
  .rows li .what { grid-column: 1 / -1; }
  .when { text-align: left; }
  .mainnav { order: 3; width: 100%; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Respect a reduced-motion preference; nothing here animates by default. */
@media (prefers-reduced-motion: no-preference) {
  .alarm-open { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse {
    0%, 100% { border-left-color: var(--critical); }
    50%      { border-left-color: #e8776a; }
  }
}

/* SMS preview on the settings page — shown as it will land on a handset. */
.smspreview {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 340px;
  word-break: break-word;
  color: var(--ink);
}
.fineprint code {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 11.5px;
}

/* --- Arrival QR card -----------------------------------------------------
   Sized to be printed, cut out and left at a property. Deliberately plain:
   whoever picks it up should see what it is for and nothing about the person
   who lives there beyond the name already on their care folder. */
.qrcard {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px 24px;
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
}
.qrcard-logo { height: 34px; width: auto; margin-bottom: 18px; }
.qrcard h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-bottom: 16px;
}
.qrcode {
  width: 300px; height: 300px;
  max-width: 100%;
  display: block;
  margin: 0 auto 18px;
  /* image-rendering keeps the modules crisp when the browser scales the PNG
     down; smoothing turns a QR into mush at small sizes. */
  image-rendering: pixelated;
}
.qrcard-who   { font-size: 22px; font-weight: 680; margin: 0 0 4px; }
.qrcard-where { font-size: 15px; color: var(--ink-dim); margin: 0 0 16px; line-height: 1.4; }
.qrcard-note  { font-size: 13px; color: var(--ink-dim); margin: 0; }

@media print {
  /* Print the card and nothing else. */
  .noprint, .topbar, .foot, .env-banner { display: none !important; }
  body { background: #fff; }
  .wrap { padding: 0; }
  .qrcard { border: 2px solid #000; box-shadow: none; page-break-inside: avoid; }
  .qrcard-logo { filter: none; }
}