/* FORTCALL — Saudi German Health patient desk console.
   SGH's colours, never SGH's mark.

   The colour is rationed. Brand blue and green appear in exactly three places:
   the disclosure spine once the gate clears, the live-call indicator, and the
   KPI figures. Everything else is monochrome and hairlines, so the live call is
   the only colour in the room. Red appears in one place only: a locked gate. */

:root {
  /* Canvas mixed toward SGH's blue rather than neutral black. */
  --canvas:        #071620;
  --canvas-2:      #0A1E2B;
  --raised:        #0E2635;
  --raised-2:      #133041;
  --hairline:      #1B3A4D;
  --hairline-soft: #14303F;

  --blue:       #1CA8E5;   /* SGH primary — "global leader" */
  --blue-dim:   #14708F;
  --green:      #2EB34B;   /* SGH secondary — Saudi heritage */
  --green-dim:  #1E7333;
  --sky:        #5ECBF5;
  --hold:       #FF5A5A;   /* the gate, and only the gate */
  --hold-dim:   #8E2E2E;

  --ink:      #E9F3F9;
  --ink-2:    #A9C2D2;
  --ink-3:    #6E8A9C;
  --ink-4:    #47606F;

  --ui:   'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ar:   'IBM Plex Sans Arabic', 'Poppins', system-ui, sans-serif;

  --r: 10px;
  --pad: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Wordmark ───────────────────────────────────────────────────── */
.wordmark {
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 15px;
  white-space: nowrap;
}
.wordmark-fort { color: var(--ink); }
.wordmark-call { color: var(--blue); }
.wordmark-lg { font-size: 27px; letter-spacing: 0.16em; }

/* ── Sign in ────────────────────────────────────────────────────── */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(60rem 40rem at 18% -10%, rgba(28,168,229,.13), transparent 60%),
    radial-gradient(50rem 34rem at 92% 108%, rgba(46,179,75,.10), transparent 62%),
    var(--canvas);
}
.login-card {
  width: min(380px, 100%);
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 34px 30px;
  display: grid;
  gap: 15px;
}
.login-sub {
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.login-sub strong { color: var(--ink-2); font-weight: 500; }
.login-err {
  color: var(--hold);
  font-size: 12.5px;
  margin-top: 2px;
}
.field { display: grid; gap: 6px; }
.field > span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-3);
  font-weight: 500;
}
.field input, .ctl input, .ctl select, .searchbar input, .whisper input {
  background: var(--canvas-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--ink);
  width: 100%;
}
.field input:focus, .ctl input:focus, .ctl select:focus,
.searchbar input:focus, .whisper input:focus {
  border-color: var(--blue-dim);
  outline: none;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--hairline);
  background: var(--raised-2);
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 15px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover:not(:disabled) { background: #17394C; }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #04202E;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: var(--sky); border-color: var(--sky); }
.btn-danger { background: var(--hold-dim); border-color: var(--hold-dim); color: #FFE9E9; }
.btn-danger:hover:not(:disabled) { background: #A93838; }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 12.5px; }
.btn-xs { padding: 4px 9px; font-size: 11px; }

/* ── Shell ──────────────────────────────────────────────────────── */
.app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas-2);
}
.topbar-client {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  padding-left: 16px;
  border-left: 1px solid var(--hairline);
}
.client-name { font-size: 13px; font-weight: 500; }
.client-role { font-size: 10.5px; color: var(--ink-3); letter-spacing: .05em; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 4px 9px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  color: var(--ink-3);
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 2px;
  padding: 0 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas-2);
  overflow-x: auto;
}
.nav-btn {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 11px 15px 9px;
  cursor: pointer;
  display: grid;
  gap: 1px;
  text-align: left;
  white-space: nowrap;
}
.nav-key { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.nav-hint { font-size: 10.5px; color: var(--ink-4); }
.nav-btn:hover .nav-key { color: var(--ink); }
.nav-btn.is-active { border-bottom-color: var(--blue); }
.nav-btn.is-active .nav-key { color: var(--ink); }

.main { padding: 18px; overflow: auto; }
.view { display: none; }
.view.is-active { display: grid; gap: 16px; align-content: start; }

/* ── Panels ─────────────────────────────────────────────────────── */
.panel {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: var(--pad);
  min-width: 0;
}
.panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.panel-head h2 { font-size: 14px; }
.panel-head .btn, .panel-head .panel-note { margin-left: auto; }
.panel-note { color: var(--ink-3); font-size: 12px; }

.callgrid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 268px;
  gap: 16px;
  align-items: start;
}
.panel-call { display: grid; gap: 13px; align-content: start; }

/* ── The book ───────────────────────────────────────────────────── */
.book { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px;
        max-height: 60vh; overflow: auto; }
.book-item {
  width: 100%;
  text-align: left;
  background: var(--canvas-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  display: grid;
  gap: 2px;
}
.book-item:hover { border-color: var(--hairline); background: var(--raised-2); }
.book-item.is-picked { border-color: var(--blue-dim); background: #0F2E40; }
.book-name { font-size: 12.5px; font-weight: 500; }
.book-sub { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }
.book-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.tag {
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  color: var(--ink-3);
}
.tag-hold { border-color: var(--hold-dim); color: #FF9E9E; }
.tag-stop { border-color: var(--hold-dim); color: #FF9E9E; background: rgba(255,90,90,.08); }
.tag-rep  { border-color: var(--green-dim); color: #86D89A; }

/* ── Call head ──────────────────────────────────────────────────── */
.callhead { display: flex; align-items: flex-start; gap: 14px; }
.callhead-who h2 { font-size: 17px; }
.callhead-meta { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.callhead-timer { margin-left: auto; text-align: right; }
.timer { font-family: var(--mono); font-size: 21px; font-weight: 500; display: block; }
.timer-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.is-live .timer { color: var(--blue); }
.is-live .timer-label { color: var(--sky); }
.is-live .timer-label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 5px;
  vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ── Warnings ───────────────────────────────────────────────────── */
.warnstack { display: grid; gap: 6px; }
.warn {
  font-size: 12px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--canvas-2);
  color: var(--ink-2);
}
.warn-stop { border-color: var(--hold-dim); background: rgba(255,90,90,.07); color: #FFC9C9; }
.warn-note { border-color: var(--hairline); }

/* ── Controls ───────────────────────────────────────────────────── */
.controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ctl { display: grid; gap: 5px; min-width: 0; }
.ctl-wide { grid-column: 1 / -1; }
.ctl > span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-weight: 500;
}
.callbtns { display: flex; gap: 9px; }
.whisper { display: flex; gap: 8px; }

/* ── Transcript ─────────────────────────────────────────────────── */
.transcript {
  background: var(--canvas-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 13px;
  min-height: 220px;
  max-height: 42vh;
  overflow: auto;
  display: grid;
  gap: 9px;
  align-content: start;
}
.transcript-empty { color: var(--ink-4); font-size: 12.5px; }
.line { display: grid; gap: 2px; }
.line-who {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-4);
}
.line-agent .line-who { color: var(--blue-dim); }
.line-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.line-agent .line-text { color: var(--ink); }
.line-text:lang(ar), .line-text[dir="rtl"] { font-family: var(--ar); }

/* ── Tool feed ──────────────────────────────────────────────────── */
.toolfeed { display: grid; gap: 5px; max-height: 190px; overflow: auto; }
.tool {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--canvas-2);
  border: 1px solid var(--hairline-soft);
  color: var(--ink-3);
}
.tool-name { color: var(--ink-2); }
.tool-detail { margin-left: auto; text-align: right; opacity: .85; }
.tool.is-blocked {
  border-color: var(--hold-dim);
  background: rgba(255,90,90,.08);
  color: #FFC9C9;
}
.tool.is-blocked .tool-name { color: var(--hold); }
.tool.is-fail { border-color: #6A5320; color: #E8C98A; }

/* ═══════════════════════════════════════════════════════════════════
   THE DISCLOSURE SPINE — the signature element.

   Stages below the gate are dead grey until identity is proven. The moment
   the gate clears they flood with SGH blue and green: the brand's own colour
   is literally the thing you cannot have until you qualify. A block turns the
   gate red and locks everything under it.
   ═══════════════════════════════════════════════════════════════════ */
.panel-spine { position: sticky; top: 0; }
.spine-legend { font-size: 11.5px; color: var(--ink-3); margin-bottom: 14px; }
.spine { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.spine::before {
  content: '';
  position: absolute;
  left: 6px; top: 7px; bottom: 7px;
  width: 2px;
  background: var(--hairline);
  border-radius: 2px;
}
.stage { position: relative; padding: 0 0 15px; }
.stage:last-child { padding-bottom: 0; }
.stage::before {                       /* the node */
  content: '';
  position: absolute;
  left: -22px; top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--raised);
  border: 2px solid var(--hairline);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.stage-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-4);
  transition: color .3s;
}
.stage-note { font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); }

/* done — pre-gate stages are deliberately monochrome, not brand colour */
.stage.is-done::before { border-color: var(--ink-3); background: var(--ink-3); }
.stage.is-done .stage-label { color: var(--ink-2); }

/* the factor pips */
.factors { list-style: none; margin: 5px 0 0; padding: 0; display: grid; gap: 3px; }
.factor {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--ink-4);
  display: flex;
  align-items: center;
  gap: 7px;
}
.factor::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--hairline);
  flex: none;
  transition: background .3s;
}
.factor.is-on { color: var(--ink-2); }
.factor.is-on::before { background: var(--green); }

/* THE GATE itself */
.stage-gate .stage-label { color: var(--ink-3); font-weight: 600; }
.stage-gate::before { width: 16px; height: 16px; left: -23px; }

.stage-gate.is-open::before {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(46,179,75,.16);
}
.stage-gate.is-open .stage-label { color: var(--green); }

.stage-gate.is-locked::before {
  border-color: var(--hold);
  background: var(--hold);
  box-shadow: 0 0 0 4px rgba(255,90,90,.16);
}
.stage-gate.is-locked .stage-label { color: var(--hold); }

/* everything BELOW the gate only gets brand colour once it opens */
.stage-release .stage-label { color: var(--ink-4); }
.spine.is-open .stage-release::before { border-color: var(--blue); background: var(--blue); }
.spine.is-open .stage-release .stage-label { color: var(--sky); }
.spine.is-open .stage-release:last-child::before { border-color: var(--green); background: var(--green); }

/* out of scope for a representative, or a clinician-only hold: stays dark and
   is struck through, while its siblings stay lit — a partial lock, which is
   exactly the real rule */
.spine .stage-release.is-barred::before {
  border-color: var(--hold-dim) !important;
  background: repeating-linear-gradient(
    -45deg, var(--hold-dim) 0 2px, transparent 2px 4px) !important;
}
.spine .stage-release.is-barred .stage-label {
  color: var(--hold) !important;
  text-decoration: line-through;
  text-decoration-color: var(--hold-dim);
}

/* a fully locked gate hatches the rail beneath it */
.spine.is-locked::before {
  background: repeating-linear-gradient(
    180deg, var(--hold-dim) 0 3px, transparent 3px 7px);
}

.spine-foot {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--hairline-soft);
}
.spine-stat { flex: 1; }
.spine-stat span { font-family: var(--mono); font-size: 19px; display: block; }
.spine-stat small {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-4);
}
.spine-stat.is-hot span { color: var(--hold); }

/* ── Wrap-up ────────────────────────────────────────────────────── */
.wrap { display: grid; gap: 14px; }
.wrapgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.metric {
  background: var(--canvas-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 11px 13px;
}
.metric-v { font-family: var(--mono); font-size: 20px; }
.metric-k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-4);
}
.metric.is-good .metric-v { color: var(--green); }
.metric.is-bad .metric-v { color: var(--hold); }
.metric.is-brand .metric-v { color: var(--blue); }

.score { display: grid; gap: 9px; }
.scorebar { display: grid; grid-template-columns: 130px 1fr 44px; gap: 10px; align-items: center; }
.scorebar-k { font-size: 11.5px; color: var(--ink-3); }
.scorebar-t { height: 6px; background: var(--canvas-2); border-radius: 6px; overflow: hidden; }
.scorebar-f { height: 100%; background: var(--blue); border-radius: 6px; transition: width .5s; }
.scorebar-f.is-good { background: var(--green); }
.scorebar-f.is-bad { background: var(--hold); }
.scorebar-v { font-family: var(--mono); font-size: 12px; text-align: right; }
.coaching { margin: 0; padding-left: 17px; color: var(--ink-2); font-size: 12.5px; display: grid; gap: 5px; }
.breach {
  border: 1px solid var(--hold);
  background: rgba(255,90,90,.1);
  color: #FFD2D2;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: 12.5px;
}

/* ── Knowledge / playbook / desk ────────────────────────────────── */
.searchbar { display: flex; gap: 8px; margin: 11px 0; }
.kbresults { display: grid; gap: 9px; }
.kbcard {
  background: var(--canvas-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 12px 14px;
}
.kbcard h3 { font-size: 12.5px; margin-bottom: 4px; }
.kbcard p { font-size: 12px; color: var(--ink-2); }
.kbcard .kb-src {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 6px;
  display: block;
}
.chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 20px;
  border: 1px solid var(--hairline-soft);
  color: var(--ink-3);
  cursor: pointer;
  background: none;
}
.chip:hover { border-color: var(--blue-dim); color: var(--ink); }

.gatecard { display: grid; gap: 13px; }
.gaterule { border-left: 2px solid var(--blue); padding-left: 13px; }
.gaterule h3 { font-size: 12.5px; margin-bottom: 3px; }
.gaterule p { font-size: 12.5px; color: var(--ink-2); }
.gaterule.is-hold { border-left-color: var(--hold); }
.gaterule.is-green { border-left-color: var(--green); }
.gate-basis {
  font-size: 11px;
  color: var(--ink-4);
  font-style: italic;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 10px;
}

.doctors { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 9px;
           max-height: 62vh; overflow: auto; }
.doctor {
  background: var(--canvas-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 11px 13px;
}
.doctor h3 { font-size: 12.5px; }
.doctor .dr-title { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.doctor .dr-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); margin-top: 5px; }

.kpirow { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.calls { display: grid; gap: 7px; max-height: 56vh; overflow: auto; }
.callrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: var(--canvas-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 12px;
}
.callrow-sub { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  color: var(--ink-3);
  white-space: nowrap;
}
.badge-success { border-color: var(--green-dim); color: #86D89A; }
.badge-partial { border-color: #6A5320; color: #E8C98A; }
.badge-miss { border-color: var(--hold-dim); color: #FF9E9E; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .callgrid { grid-template-columns: 220px minmax(0, 1fr); }
  .panel-spine { grid-column: 1 / -1; position: static; }
  .spine { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
           padding-left: 0; }
  .spine::before { display: none; }
  .stage { padding: 0 0 0 22px; }
}
@media (max-width: 820px) {
  .main { padding: 12px; }
  .callgrid { grid-template-columns: 1fr; }
  .controls { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar-client { padding-left: 0; border-left: 0; }
  .nav-hint { display: none; }
  .book { max-height: 240px; }
  .scorebar { grid-template-columns: 100px 1fr 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}