/* ---- Linia clinicii (scanexpert-docs plan 16, line-view.js, reports.js) -----
   Banda mereu la vedere de pe Panou principal, rotația din „În așteptare",
   filele „Pierdute" și cardurile din „Rapoarte". Clase NOI numai — nimic de aici nu rescrie o regulă din
   foile de dinainte, deci locul ei în cascadă (după styles-misc.css) nu mută
   nimic din ce era. Culorile sunt jetoanele kitului; niciun hex. */

.line-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-md);
  margin-bottom: var(--se-space-12);
  overflow: hidden;
  flex: 0 0 auto;
}
.line-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  padding: var(--se-space-8) var(--se-space-20);
  border-right: 1px solid var(--se-color-border-default);
  min-width: 0;
  flex: 1 1 140px;
}
.line-cell:last-child {
  border-right: 0;
}
.line-cell.line-lead {
  flex: 0 0 auto;
  align-items: center;
  padding: var(--se-space-8) var(--se-space-16);
}
.line-lab {
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  font-weight: var(--se-type-micromed-weight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--se-color-text-secondary);
}
.line-big {
  font-size: var(--se-type-h4sb-size);
  line-height: var(--se-type-h4sb-line);
  font-weight: var(--se-type-h4sb-weight);
  font-variant-numeric: tabular-nums;
  color: var(--se-color-text-title);
}
.line-cell small {
  max-width: 100%;
  color: var(--se-color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* „În așteptare": cifra și primul apelant pe un rând. Linia goală e gri; cu cineva
   la coadă celula se face chihlimbar — singura culoare a benzii fără apel la tine. */
.line-cell.line-wait {
  flex: 0 0 200px;
}
.line-wait-row {
  display: flex;
  align-items: baseline;
  gap: var(--se-space-8);
  min-width: 0;
  max-width: 100%;
}
.line-wait:not(.is-waiting) .line-big {
  color: var(--se-color-text-muted);
}
.line-cell.line-wait.is-waiting {
  background: var(--se-color-badge-yellow-100);
}
.line-wait.is-waiting .line-lab {
  color: var(--se-color-badge-yellow-600);
}

/* „Ordinea de sunat": rotația serviciului ca un șir de pupitre. Bleumarinul e al
   TĂU; verdele e pupitrul la care sună acum; punctatul e un pupitru sărit. */
.line-cell.line-order {
  flex: 1 1 280px;
  gap: 6px;
}
/* Cât numără oferta, celula ei se lărgește și ordinea îi face loc (chip-urile trec
   pe două rânduri), ca banda să rămână pe un rând la ~1160px, lățimea ei la 1440. */
.line-strip:has(.line-recall.is-offer, .line-recall.is-ringing) .line-cell.line-order {
  flex-basis: 200px;
}
.line-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--se-space-8);
  max-width: 100%;
}
.line-chain-none {
  font-size: var(--se-type-captionmed-size);
  color: var(--se-color-text-muted);
}
.line-chip {
  --line-ring: var(--se-color-badge-green-600);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 240px;
  padding: 3px var(--se-space-12) 3px 3px;
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  background: var(--se-color-bg-surface);
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-captionmed-weight);
  color: var(--se-color-text-title);
}
.line-chip-l {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-chip-n {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--se-radius-pill);
  background: var(--se-color-badge-gray-100);
  color: var(--se-color-badge-gray-600);
  font-size: var(--se-type-micromed-size);
  font-weight: var(--se-type-bodysb-weight);
  font-variant-numeric: tabular-nums;
}
.line-chip-n .ph {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.line-chip.is-you {
  --line-ring: var(--se-color-primary-60);
  background: var(--se-color-primary-60);
  border-color: var(--se-color-primary-60);
  color: var(--se-color-text-on-dark);
}
.line-chip.is-you .line-chip-n {
  background: var(--se-color-bg-surface);
  color: var(--se-color-primary-60);
}
.line-chip.is-ringing:not(.is-you) {
  background: var(--se-color-badge-green-100);
  border-color: var(--se-color-badge-green-600);
}
.line-chip.is-ringing:not(.is-you) .line-chip-n {
  background: var(--se-color-badge-green-600);
  color: var(--se-color-text-on-dark);
}
.line-chip.is-ringing {
  animation: line-chip-ring 1.4s ease-out infinite;
}
.line-chip.is-skipped {
  opacity: 0.6;
  border-style: dashed;
}
.line-step {
  display: inline-flex;
  align-items: center;
  gap: var(--se-space-8);
  min-width: 0;
}
.line-arrow {
  display: inline-flex;
  color: var(--se-color-text-muted);
}
.line-arrow .ph {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* „Reapelare automată" (plan 15, pachetul 07): celula a cincea. Repaus: comutatorul
   kitului și o propoziție. Oferta serviciului: roz, secundele mari bat o dată pe
   secundă, iar un fir roz se golește sub toată banda. La zero: bleumarin, sună la
   tine. Firul cere `.line-strip` poziționată. */
.line-strip {
  position: relative;
}
.line-cell.line-recall {
  flex: 1 0 240px;
  gap: var(--se-space-4);
  transition: background var(--motion-dur-base) var(--motion-ease-out);
}
.line-cell.line-recall.is-off {
  background: var(--se-color-bg-canvas);
}
.line-cell.line-recall.is-offer {
  flex-basis: 340px;
  background: var(--se-color-accent-pink-light);
}
.line-cell.line-recall.is-ringing {
  flex-basis: 340px;
  background: var(--se-color-primary-60);
}
.line-recall.is-ringing .line-lab {
  color: var(--se-color-primary-20);
}
.line-recall-row {
  display: flex;
  align-items: center;
  gap: var(--se-space-12);
  width: 100%;
  min-width: 0;
}
.line-recall-count {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}
.line-recall-left {
  font-size: var(--se-type-h4sb-size);
  line-height: var(--se-type-h4sb-line);
  font-weight: var(--se-type-h4sb-weight);
  font-variant-numeric: tabular-nums;
  color: var(--se-color-accent-pink);
  animation: line-recall-tick 1s var(--motion-ease-out);
}
.line-recall-unit {
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  color: var(--se-color-text-secondary);
}
.line-recall-what {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-grow: 1;
}
.line-recall-what b {
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-bodysb-weight);
  color: var(--se-color-text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-recall.is-ringing .line-recall-what b {
  color: var(--se-color-text-on-dark);
}
.line-recall.is-ringing .line-recall-what small {
  color: var(--se-color-primary-20);
}
.line-recall-cancel {
  flex: 0 0 auto;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: var(--se-radius-pill);
  padding: 6px var(--se-space-14);
  background: var(--se-color-bg-surface);
  box-shadow: inset 0 0 0 1px var(--se-color-badge-red-100);
  color: var(--se-color-badge-red-600);
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-bodysb-weight);
  transition: background var(--motion-dur-fast) var(--motion-ease-out);
}
.line-recall-cancel:hover {
  background: var(--se-color-badge-red-100);
}
.line-recall-cancel:focus-visible {
  outline: 2px solid var(--se-color-accent-pink);
  outline-offset: 2px;
}
.line-recall-phone {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--se-radius-pill);
  background: var(--se-color-bg-surface);
  color: var(--se-color-primary-60);
  animation: line-recall-ring 1s ease-out infinite;
}
.line-recall-phone .ph {
  width: 18px;
  height: 18px;
  fill: currentColor;
  animation: line-recall-wiggle 1s ease-in-out infinite;
}
.line-recall-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--se-color-accent-pink);
  transform-origin: left center;
  /* Cu animația oprită (mișcare redusă) firul stă unde îl pune redesenarea. */
  transform: scaleX(var(--recall-left, 1));
  animation-name: line-recall-drain;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

/* Planul reapelării (`callback_plan`, line-plan.js): „Sun peste 4:12" cu motivul
   dedesubt, sau „Sun acum…" cu punctul care pulsează. Bleumarin: roz rămâne doar
   oferta care numără. Motivul se rupe pe două rânduri, nu se taie. */
.line-recall-when {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--se-space-4);
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-bodysb-weight);
  color: var(--se-color-text-title);
}
.line-recall-when.is-now {
  align-items: center;
  color: var(--se-color-primary-60);
}
.line-recall-clock {
  font-size: var(--se-type-h4sb-size);
  line-height: var(--se-type-h4sb-line);
  font-weight: var(--se-type-h4sb-weight);
  font-variant-numeric: tabular-nums;
  color: var(--se-color-primary-60);
}
.line-cell small.line-recall-why {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.line-recall-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.line-cell.line-recall.is-ready,
.line-cell.line-recall.is-due {
  background: var(--se-color-primary-10);
}
.line-recall-bar.is-wait {
  background: var(--se-color-primary-60);
}

/* Sună la tine: banda primește chenarul tău. Umbra, nu bordura, ca să nu se miște
   nimic din bandă. */
.line-strip.is-ringing-you {
  border-color: var(--se-color-primary-60);
  box-shadow: 0 0 0 1px var(--se-color-primary-60);
}

/* „Pierdute azi" e un buton: deschide lista pe Linii & Cozi. */
.line-cell.line-lost {
  flex: 0 1 280px;
  font: inherit;
  text-align: left;
  background: var(--se-color-bg-surface);
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  cursor: pointer;
}
.line-cell.line-lost:hover {
  background: var(--se-color-accent-pink-light);
}
.line-cell.line-lost:focus-visible {
  outline: 2px solid var(--se-color-accent-pink);
  outline-offset: -2px;
}

/* Starea degradată SE SPUNE: centrala duce apelurile cu coada ei. */
.line-degrade {
  margin: 0;
  padding: var(--se-space-8) var(--se-space-16);
  flex: 3 1 320px;
  align-self: center;
  color: var(--se-color-badge-yellow-600);
  background: var(--se-color-badge-yellow-100);
}
/* Banda în starea degradată: o iconiță galbenă, un titlu și o explicație — fără
   bloc colorat peste toată lățimea. */
.line-notice {
  flex: 3 1 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--se-space-12);
  padding: var(--se-space-4) var(--se-space-16);
  border-right: 1px solid var(--se-color-border-default);
  min-width: 0;
}
.line-notice-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: var(--se-radius-pill);
  background: var(--se-color-badge-yellow-100);
  color: var(--se-color-badge-yellow-600);
}
.line-notice-ic .ph {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.line-notice-text {
  min-width: 0;
  text-align: center;
}

/* „Apeluri pierdute azi": trei contoare, fiecare cu eticheta ei SUB cifră, pe
   aceeași linie de bază — cifra și cuvintele ei se citesc ca o singură unitate. */
.line-counts {
  display: flex;
  justify-content: flex-start;
  gap: var(--se-space-12);
}
.line-count {
  display: flex;
  align-items: baseline;
  gap: var(--se-space-4);
}
.line-count-n {
  font-size: var(--se-type-bodysb-size);
  line-height: var(--se-type-bodysb-line);
  font-weight: var(--se-type-bodylgsb-weight);
  font-variant-numeric: tabular-nums;
  color: var(--se-color-text-title);
}
.line-count-n.is-owed {
  color: var(--se-color-badge-red-600);
}
.line-count-l {
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  color: var(--se-color-text-secondary);
  text-align: center;
  white-space: nowrap;
}
.line-notice-text p {
  margin: 0;
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-secondary);
}
.line-notice-text strong {
  color: var(--se-color-text-title);
}
.list .line-degrade {
  border-radius: var(--se-radius-md);
}

/* Rotația, sub „În așteptare": rândul tău se vede fără să fie citit. */
.line-rotation-head {
  margin-top: var(--se-space-16);
}
.item.is-you {
  border-color: var(--se-color-accent-pink);
}

/* Filele „Pierdute": trei liste ale aceleiași întrebări. */
.line-lost-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--se-space-8);
  margin-bottom: var(--se-space-12);
}
.line-lost-tabs .btn-quiet.active {
  background: var(--se-color-accent-pink-light);
  color: var(--se-color-accent-pink);
}

/* ABANDONAT e un al treilea fapt, nu un ratat: apelantul a închis cât suna. */
.badge.abandoned {
  background: var(--se-color-badge-purple-100);
  color: var(--se-color-badge-purple-600);
}

@media (max-width: 760px) {
  .line-cell {
    flex-basis: 45%;
    border-bottom: 1px solid var(--se-color-border-default);
  }
  .line-cell.line-wait {
    flex: 1 1 45%;
  }
  .line-cell.line-order,
  .line-cell.line-recall,
  .line-cell.line-recall.is-offer,
  .line-cell.line-recall.is-ringing {
    flex-basis: 100%;
  }
}

/* `.section-header` e flex, iar `display` bate atributul [hidden]. */
.line-rotation-head[hidden] {
  display: none;
}

/* ---- „Rapoarte" (reports.js) ------------------------------------------------
   Cardurile au forma celor din back office (`.kpi-card`, internal/web/assets/
   ui-detail.css): aceeași cifră se citește la fel în cele două console. Valoarea
   stă pe treapta h4 a kitului, nu pe 26px-ul prototipului, care nu e pe scară. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--se-space-16);
}
.kpi-card {
  background: var(--se-color-bg-console);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-16);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kpi-label {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-secondary);
}
.kpi-value {
  margin: 0;
  font-size: var(--se-type-h4sb-size);
  line-height: var(--se-type-h4sb-line);
  font-weight: var(--se-type-h4sb-weight);
  color: var(--se-color-text-title);
  font-variant-numeric: tabular-nums;
}
.kpi-note {
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  color: var(--se-color-text-muted);
}
#page-rapoarte .data-table td.num {
  font-variant-numeric: tabular-nums;
}
/* Data de trecere: un adevăr despre sursă, nu o eroare — galbenul kitului. */
.report-cutover {
  margin: 0 0 var(--se-space-12);
  padding: var(--se-space-8) var(--se-space-12);
  border-radius: var(--se-radius-md);
  background: var(--se-color-badge-yellow-100);
  color: var(--se-color-badge-yellow-600);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
}
.report-cutover[hidden] {
  display: none;
}

/* ---- Viața benzii: un punct care pulsează ---------------------------------------
   Punctul spune „se uită cineva": verde pe live, galben pe degradat. Pupitrul la
   care sună acum pulsează și el. Totul se oprește la `prefers-reduced-motion`. */
.line-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: var(--se-radius-pill);
  background: currentColor;
  animation: line-pulse 1.8s ease-out infinite;
}
.pill.green .line-dot {
  color: var(--se-color-badge-green-600);
}
.pill.amber .line-dot {
  color: var(--se-color-badge-yellow-600);
}
.line-notice-ic::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--se-color-badge-yellow-600);
  opacity: 0;
  animation: line-ring 2.4s ease-out infinite;
}
@keyframes line-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 6px transparent;
  }
}
@keyframes line-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
@keyframes line-recall-tick {
  0% {
    transform: scale(1.2);
  }
  40%,
  100% {
    transform: scale(1);
  }
}
@keyframes line-recall-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--se-color-bg-surface) 60%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 10px transparent;
  }
}
@keyframes line-recall-wiggle {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  15%,
  45% {
    transform: rotate(-14deg);
  }
  30% {
    transform: rotate(14deg);
  }
}
@keyframes line-recall-drain {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@keyframes line-chip-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--line-ring) 40%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .line-dot,
  .line-notice-ic::after,
  .line-chip.is-ringing,
  .line-recall-left,
  .line-recall-phone,
  .line-recall-phone .ph,
  .line-recall-bar {
    animation: none;
  }
  .line-cell.line-recall {
    transition: none;
  }
  .line-notice-ic::after {
    display: none;
  }
}