/* ---- Jurnalul ------------------------------------------------------------- */
.logbox summary {
  cursor: pointer;
  list-style: none;
  color: var(--se-color-text-muted);
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.logbox summary::-webkit-details-marker {
  display: none;
}
.logbox summary::before {
  content: "▸ ";
}
.logbox[open] summary::before {
  content: "▾ ";
}
#log {
  list-style: none;
  padding: var(--se-space-12) 0 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-microreg-line);
}
#log li {
  padding: 4px 0;
  border-bottom: 1px solid var(--se-color-border-soft);
  color: var(--se-color-text-description);
  display: flex;
  gap: var(--se-space-8);
}
#log li .t {
  color: var(--se-color-text-muted);
  flex: 0 0 72px;
  font-variant-numeric: tabular-nums;
}
#log li .msg {
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
}
#log li.err .msg {
  color: var(--se-color-status-error);
}
#log li.ok .msg {
  color: var(--se-color-status-success);
}

/* ---- Skeleton -------------------------------------------------------------
   Se desenează DOAR cât o cerere e chiar pe drum. Nu la pornire: panourile
   centralei pornesc oprite și un shimmer permanent ar promite date care nu vin
   până nu apasă cineva comutatorul. */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}
.skeleton-line,
.skeleton-avatar {
  background: linear-gradient(
    90deg,
    var(--se-color-border-card) 25%,
    var(--se-color-border-soft) 37%,
    var(--se-color-border-card) 63%
  );
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-line {
  height: 14px;
  border-radius: var(--se-radius-sm);
  margin-bottom: var(--se-space-8);
}
.skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--se-space-8) 0;
}
.skeleton-row .skeleton-line {
  margin-bottom: 6px;
}
.skeleton-row .skeleton-line:last-child {
  margin-bottom: 0;
}

/* ---- Sugestii (tooltip) ---------------------------------------------------
   Atributul title nativ apare târziu, nu poate fi stilizat și nu se vede deloc
   pe un ecran tactil. Un singur sistem în locul lui: data-tip desenează bula,
   aria-label duce aceleași cuvinte la cititorul de ecran. */
[data-tip] {
  position: relative;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 700;
  width: max-content;
  max-width: 288px;
  padding: var(--se-space-8) 10px;
  background: var(--se-color-primary-80);
  color: var(--se-color-text-on-dark);
  border-radius: var(--se-radius-md);
  box-shadow: var(--shadow-float);
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-captionreg-line);
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.12s ease,
    visibility 0.12s;
}
[data-tip=""]::after {
  content: none;
}
[data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.4s;
}
@media (hover: hover) {
  [data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.4s;
  }
}
/* Într-o listă care derulează, o bulă deasupra rândului e tăiată de caseta de
   derulare, așa că acolo crește spre stânga, de-a lungul rândului. */
.list [data-tip]::after {
  left: auto;
  right: calc(100% + 8px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  max-width: 208px;
}
.section-tools [data-tip]::after {
  left: auto;
  right: 0;
  transform: none;
}
/* Unde poziționarea prin ancoră există (Chrome ≥129), bula iese complet din
   orice casetă care taie și se întoarce singură când n-are loc. */
@supports (anchor-name: --tip) and (position-area: block-start) {
  [data-tip]::after {
    position: fixed;
    position-area: block-start;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    margin: 0 0 8px;
    position-try-fallbacks: flip-block, flip-inline;
  }
  .list [data-tip]::after {
    position-area: inline-start;
    margin: 0 8px 0 0;
    max-width: 256px;
  }
}

/* ---- Lățimi ---------------------------------------------------------------
   Sub 1150px tabloul devine o coloană și pagina derulează normal: trei coloane
   pe un laptop de 13" sunt trei fante, nu un pupitru. */
@media (max-width: 1150px) {
  .workspace-grid {
    grid-template-columns: 1fr;
  }
  .stt-card {
    max-height: none;
  }
  .patient-detail-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .linii-cols,
  .setari-cols,
  .setari-row,
  .welcome-grid {
    grid-template-columns: 1fr;
  }
  .sidebar {
    width: 72px;
  }
  .sidebar-logo {
    padding: 18px var(--se-space-16);
    overflow: hidden;
  }
  .nav-item {
    justify-content: center;
  }
  .nav-item .nav-label,
  .profile-who {
    display: none;
  }
  .main {
    padding-left: 0;
  }
}
@media (max-width: 1219px) {
  .auth-hero {
    display: none;
  }
  .auth-panel {
    flex: 1 1 100%;
    padding: var(--se-space-24);
  }
  .auth-card {
    gap: var(--se-space-28);
  }
}

/* Mișcarea e decor: se poate opri fără să se piardă nimic din sens. Lampa
   apelului primit rămâne aprinsă, doar că nu mai pulsează. */
@media (prefers-reduced-motion: reduce) {
  .switch .track,
  .switch .knob,
  .dot,
  .sidebar {
    transition: none;
  }
  .ring-avatar {
    animation: none;
    box-shadow: 0 0 0 6px rgba(239, 66, 110, 0.25);
  }
  .skeleton-line,
  .skeleton-avatar {
    animation: none;
  }
  .t-appear {
    animation: none;
  }
  .dialpad button {
    transition: background 0.15s;
  }
  .dialpad button:active {
    transform: none;
  }
  .toast,
  .toast-text,
  .tour-highlight,
  .tour-tooltip {
    transition-duration: 0s;
  }
  [data-tip]::after {
    transition-duration: 0s;
  }
}