/* Coordinator stylesheet (ADR 0005). Visual decisions live only here.
   Grounds for the thresholds: docs/ux.md UX1. Contrast pairs are computed in a test. */

:root {
  --target: 3rem;              /* 48 px: Android 48 dp, Parhi et al. 2006 (9.2–9.6 mm) */
  --gap: .5rem;            /* 8 px: least space between neighbouring targets (Android 8 dp) */
  --text-size: 1rem;               /* body 16 px */
  --text-smallest: .875rem;   /* 14 px: Legge and Bigelow 2011, a margin over the floor of fluent reading */
  --radius: .5rem;

  --text: #1a1a1a;
  --text-secondary: #4a4a4a;
  --bg: #ffffff;
  --bg-secondary: #f2f2f2;
  --line: #c4c4c4;           /* decorative line: carries no meaning */
  --field-line: #6b6b6b;      /* form field border: WCAG 1.4.11, ≥ 3:1 */
  --primary: #176c2e;
  --primary-text: #ffffff;
  --whatsapp: #0f7a3c;        /* a darker WhatsApp green: #25d366 on white was 1.98:1 */
  --whatsapp-text: #ffffff;
  --error: #b00020;
  --error-bg: #fde7e9;
  --warning-bg: #fff4ce;
  --success-bg: #e6f4ea;
  --info-bg: #e8f0fe;
  --focus: #1a56db;
  /* Driver page: text ≥ 7:1 (WCAG 1.4.6; night, age, vibration — UX1) */
  --driver-green: #0b5d2e;
  --driver-link: #1340a0;
  /* Alert severities: high dark fill, medium dark border, info plain (ISA-18.2) */
  --alert-high: #b00020;
  --alert-high-text: #ffffff;
  --alert-medium-line: #8a5a00;
  --cancelled-bg: #3a3a3a;
  --cancelled-text: #ffffff;
}

/* contrast: --text / --bg */
/* contrast: --text-secondary / --bg */
/* contrast: --text-secondary / --bg-secondary */
/* contrast: --text / --bg-secondary */
/* contrast: --primary-text / --primary */
/* contrast: --whatsapp-text / --whatsapp */
/* contrast: --error / --bg */
/* contrast: --error / --error-bg */
/* contrast: --text / --error-bg */
/* contrast: --text / --warning-bg */
/* contrast: --text / --success-bg */
/* contrast: --text / --info-bg */
/* contrast: --focus / --bg */
/* contrast: --alert-high-text / --alert-high */
/* contrast: --cancelled-text / --cancelled-bg */
/* component: --alert-high / --bg */
/* component: --alert-medium-line / --bg */
/* component: --alert-medium-line / --warning-bg */
/* contrast-aaa: --primary-text / --driver-green */
/* contrast-aaa: --driver-link / --bg */
/* contrast-aaa: --driver-link / --bg-secondary */
/* contrast-aaa: --text / --bg-secondary */
/* contrast-aaa: --text / --warning-bg */
/* contrast-aaa: --text / --success-bg */
/* contrast-aaa: --text / --info-bg */

/* --- Base ------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: system-ui, sans-serif; font-size: var(--text-size); line-height: 1.5;
  color: var(--text); background: var(--bg);
  max-width: 52rem; margin: 0 auto; padding: 0 1rem 3rem;
  overflow-wrap: break-word;
}
small, .rule, .helptext { font-size: var(--text-smallest); }
.rule, .helptext, .secondary { color: var(--text-secondary); }
.helptext { display: block; }
h1 { font-size: 1.5rem; line-height: 1.25; }
h1 small { font-size: var(--text-size); font-weight: 400; }
h2 { font-size: 1.25rem; }
pre.message {
  white-space: pre-wrap; font-size: var(--text-smallest); background: var(--bg-secondary);
  padding: .5rem; border-radius: var(--radius);
}

/* --- Touch targets: every interactive element ≥ 48×48, ≥ 8 px between neighbours ------- */

a[href], button, summary, select, input:not([type=hidden]), textarea {
  min-height: var(--target);
}
a[href] {
  display: inline-flex; align-items: center; min-width: var(--target);
  margin: calc(var(--gap) / 2) var(--gap) calc(var(--gap) / 2) 0;
  color: var(--focus);
}
/* A text link inside a sentence stays inline (WCAG 2.5.8 exception). */
p.prose a[href], li a[href] { display: inline; min-height: 0; min-width: 0; margin: 0; }
button {
  font: inherit; min-width: var(--target); padding: .5rem 1rem; margin: calc(var(--gap) / 2) 0;
  border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--bg-secondary); color: var(--text);
  cursor: pointer;
}
summary { display: list-item; padding: .75rem 0; cursor: pointer; font-weight: 700; }
details { margin: .5rem 0; }
input:not([type=hidden]), select, textarea {
  font: inherit; width: 100%; max-width: 30rem; padding: .5rem; margin: .25rem 0;
  border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--bg); color: var(--text);
}
input[type=checkbox] { width: var(--target); height: var(--target); margin: .25rem var(--gap) .25rem 0; }
textarea { min-height: 6rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Primary actions */
a.wa, .wa {
  background: var(--whatsapp); color: var(--whatsapp-text); font-weight: 700; text-decoration: none;
  padding: 0 1rem; border-radius: var(--radius);
}
a.button-link, .button-link {
  background: var(--bg-secondary); color: var(--text); text-decoration: none; font-weight: 700;
  padding: 0 1rem; border: 1px solid var(--field-line); border-radius: var(--radius);
}
button.driver-button {
  width: 100%; min-height: 3.5rem; font-size: 1.25rem; font-weight: 700;
  background: var(--primary); color: var(--primary-text); border: 0;
}

/* --- Navigation --------------------------------------------------------------------------------- */

nav.top {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--gap);
  padding: .5rem 0; border-bottom: 1px solid var(--line); margin-bottom: 1rem;
}
nav a[href] { padding: 0 .5rem; margin: calc(var(--gap) / 2) 0; text-decoration: none; }
nav .spacer { flex: 1; }
nav form { margin: 0; }

/* --- Forms --------------------------------------------------------------------------------------- */

fieldset { margin-bottom: 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
fieldset div, form > div { margin: .5rem 0; }
label { display: block; font-weight: 500; }
.errorlist { color: var(--error); margin: .25rem 0; padding-left: 1.25rem; }

/* --- Information boxes and messages ----------------------------------------------------------- */

.warning, .message-warning { background: var(--warning-bg); }
.violation, .message-error { background: var(--error-bg); }
.message-success { background: var(--success-bg); }
.message-info { background: var(--info-bg); }
.info { background: var(--bg-secondary); }
.warning, .violation, .info, .message-warning, .message-error, .message-success, .message-info {
  padding: .5rem .75rem; border-radius: var(--radius); margin: .5rem 0;
}
.valid { color: var(--primary); } .invalid { color: var(--error); }
.code { white-space: nowrap; }  /* a code (LDC-…) does not break at the hyphen: it is not read in pieces */
.tag {
  background: var(--primary); color: var(--primary-text); border-radius: .25rem; padding: 0 .35rem;
  font-size: var(--text-smallest);
}
.faded { opacity: .7; } .viewed { font-weight: 700; }

/* Alert badges: one class per severity; the high class only on a high alert. */
.alert-badge {
  display: inline-block; font-weight: 700; font-size: var(--text-smallest); border-radius: .25rem;
  padding: .125rem .5rem; margin: 0 .25rem .25rem 0;
}
.alert-high { background: var(--alert-high); color: var(--alert-high-text); }
.alert-medium { background: var(--warning-bg); color: var(--text); border: 2px solid var(--alert-medium-line); }
.alert-info { background: var(--bg); color: var(--text-secondary); border: 1px solid var(--field-line); }
tr.row-high { border-left: .375rem solid var(--alert-high); }
tr.row-high td:first-child, tr.row-medium td:first-child { padding-left: .5rem; }
tr.row-medium { border-left: .375rem solid var(--alert-medium-line); }
.alert-text { font-weight: 700; margin: .25rem 0; }
.alert-banner {
  background: var(--alert-high); color: var(--alert-high-text); padding: .5rem .75rem;
  border-radius: var(--radius); margin: .5rem 0;
}
.alert-banner ul { margin: .25rem 0; padding-left: 1.25rem; }
.alert-banner ul { list-style: none; padding-left: 0; }
.alert-banner li + li { margin-top: var(--gap); }
.alert-banner a[href] {  /* Every item goes to its row; 48 px target */
  color: var(--alert-high-text); display: flex; align-items: center; min-height: 3rem;
}
/* The high alert count in the navigation (only when > 0); the count reaches screen readers as text */
.alert-badge.alert-count { min-width: 1.5rem; margin: 0 0 0 .25rem; border-radius: 1rem; text-align: center; }
a.card.card-high { border-left: .375rem solid var(--alert-high); }
a.card.card-medium { border-left: .375rem solid var(--alert-medium-line); }
.alert-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); margin: .5rem 0; }
.alert-summary .alert-badge { margin: 0; }
/* Rehearsal mode banner (on every page) */
.rehearsal-banner {
  background: var(--text); color: var(--bg); text-align: center; font-weight: 700; margin: 0;
  padding: .25rem .5rem; letter-spacing: .05em;
}
/* Opened but unmarked messages */
.unmarked {
  background: var(--warning-bg); border-left: .375rem solid var(--alert-medium-line); padding: .5rem .75rem;
  margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .25rem var(--gap); align-items: center;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Status badges (a work order's status; not an alert) */
.status-new, .status-changed, .status-cancelled, .status-current, .status-on_hold {
  font-weight: 700; font-size: var(--text-smallest); border-radius: .25rem; padding: .125rem .5rem;
}
.status-new { background: var(--success-bg); } .status-changed { background: var(--warning-bg); }
.status-cancelled { background: var(--cancelled-bg); color: var(--cancelled-text); } .status-current { color: var(--text-secondary); }
.status-on_hold { background: var(--bg-secondary); }

/* Forms */
.error-summary {
  border: 3px solid var(--error); border-radius: var(--radius); padding: .5rem .75rem; margin: .75rem 0;
}
.error-summary h2 { margin: 0 0 .25rem; font-size: 1.125rem; }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary a[href] { color: var(--error); font-weight: 700; }
.time-equivalent { color: var(--text-secondary); margin: 0 0 .5rem; min-height: 1.5em; }

/* Today: each job a card; space between cards clearly larger than inside a card (Gestalt) */
.cards { list-style: none; padding: 0; margin: .5rem 0; }
.cards li { margin: 0 0 1rem; }
.cards a.card {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: .125rem; padding: .5rem .75rem; margin: 0;
  border: 1px solid var(--field-line); border-radius: var(--radius); color: var(--text); text-decoration: none;
}
.cards a.card .card-top { font-size: 1.125rem; }
.plan-note { color: var(--text-secondary); }

/* Jumping to days on the Later page */
.days { display: flex; flex-wrap: wrap; gap: var(--gap); margin: .5rem 0; }
.days .button-link { margin: 0; }
/* "WhatsApp'ta aç" and "sent" side by side; each ≥ 48 px, 8 px apart */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; margin: .5rem 0; }
.pair > * { margin: 0; min-width: 0; }
.pair form, .pair form button, .pair .wa { width: 100%; height: 100%; }
.pair > small, .pair > p { align-self: center; }

/* Interruption and post-completion */
.last-action { color: var(--text-secondary); margin: .25rem 0 .75rem; }
a.last-action { display: flex; align-items: center; color: var(--text-secondary); }
.opened {
  background: var(--warning-bg); border-left: .375rem solid var(--alert-medium-line); font-weight: 700;
  padding: .25rem .5rem; border-radius: var(--radius); margin: .25rem 0;
}
:target { scroll-margin-top: 1rem; }
tr:target, h2:target { outline: 3px solid var(--focus); outline-offset: 2px; background: var(--info-bg); }

.cell-label { display: none; }  /* a wide screen has column headings */
/* --- Tables ------------------------------------------------------------------------------------ */

table { border-collapse: collapse; width: 100%; }
td, th { padding: .5rem; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.jobs form { margin: 0; }

/* --- Driver page: one glance, one tap, while the car stands ----------------------------------- */

html { scroll-padding-bottom: 6rem; }  /* the focused element is not hidden under the sticky button (WCAG 2.4.11) */
.driver-page, .driver-page small, .driver-page .rule, .driver-page h1 small { font-size: 1.125rem; }
.driver-page a[href] { color: var(--driver-link); }
.driver-page a.wa { background: var(--driver-green); color: var(--primary-text); }
.driver-page a.button-link { color: var(--text); }
.driver-page .info p { margin: .25rem 0; }
.target-time { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.driver-note { font-weight: 700; margin: .5rem 0; }
.changed-box {
  background: var(--warning-bg); border-left: .375rem solid var(--text); padding: .5rem .75rem;
  border-radius: var(--radius); margin: .5rem 0;
}
.changed-box ul { margin: .25rem 0; padding-left: 1.25rem; }
.steps { padding-left: 1.5rem; margin: .75rem 0; }
.steps li { margin: .25rem 0; }
.steps .done { color: var(--text-secondary); }
.steps .current { font-weight: 700; }
.sticky-bottom {
  position: sticky; bottom: 0; background: var(--bg); padding: .5rem 0 .75rem;
  border-top: 1px solid var(--line); margin-top: 1rem;
}
button.driver-button { background: var(--driver-green); }
button.secondary-button { width: 100%; font-weight: 700; }
button[aria-busy="true"] { opacity: .8; cursor: progress; }

/* --- Navigation: at the top on wide screens, at the bottom on a phone ------ */

nav.bottom { display: none; }
@media (max-width: 40rem) {
  nav.top { display: none; }
  nav.bottom {
    display: grid; grid-template-columns: repeat(5, 1fr); column-gap: var(--gap); position: fixed; bottom: 0;
    left: 0; right: 0; z-index: 10; background: var(--bg); border-top: 1px solid var(--field-line);
    padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom)); margin: 0;
  }
  nav.bottom a[href] {
    justify-content: center; text-align: center; min-width: 0; margin: 0; padding: 0 .125rem;
    font-size: var(--text-smallest); line-height: 1.2; text-decoration: none; border-radius: var(--radius);
  }
  nav.bottom a[aria-current="page"] { background: var(--info-bg); color: var(--text); font-weight: 700; }
  body { padding-bottom: 5rem; }  /* the fixed bar does not cover the last content */
}

/* --- Phone -------------------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  button, .wa, .button-link { width: 100%; justify-content: center; }
  nav button { width: auto; }
  /* Card layout: patient list and work orders. */
  table.list tr:first-child { display: none; }
  table.list .cell-label { display: inline; color: var(--text-secondary); }  /* While the heading row is hidden */
  table.list tr { display: block; border-bottom: 1px solid var(--line); padding: .5rem 0; }
  table.list td { display: inline; border: 0; padding: 0 .35rem 0 0; }
  table.list td:last-child { display: block; }
  table.jobs tr, table.jobs td { display: block; border: 0; padding: .15rem 0; }
  table.jobs tr { border-bottom: 1px solid var(--line); padding: .75rem 0; }
  /* Event history: one card per row instead of narrow columns. */
  table.history tr:first-child { display: none; }
  table.history tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--gap); border-bottom: 1px solid var(--line); padding: .25rem 0; }
  table.history td { display: block; border: 0; padding: 0; }
  table.history td:last-child { flex-basis: 100%; }
}