/* ArthroKinetic — identitatea vizuală aleasă de kinetoterapeutul principal
   (05.09.2026, „soluția finală"): sidebar închis cu sigla + conținut alb,
   accent teal, banda de cifre mari pe pagina pacientului. Fișele de export
   rămân albe și la print. */

:root {
  --brand-navy: #16284f;
  --sidebar-fundal: #1e4d3f;
  --sidebar-text: #b5d4c8;
  --ak-accent: #1f7a5e;
  --ak-accent-intens: #17604a;
  --ak-accent-fundal: #e7f4ee;
  --ak-fundal: #edf1f5;
  --ak-card: #ffffff;
  --ak-bord: #e2e8ec;
  --ak-text: #17252e;
  --ak-muted: #5b7280;
  --ak-galben: #e5b93c;
  --ak-rosu: #b03a3a;
  --ak-verde: #157a55;
}

/* --- Tipografie ------------------------------------------------------------- */

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  background-color: var(--ak-fundal);
  color: var(--ak-text);
  margin: 0;
}

h1, h2, h3, h4 { font-weight: 750; letter-spacing: -0.02em; color: #0f2430; }
h5, h6 { font-weight: 650; letter-spacing: -0.01em; color: #0f2430; }

/* --- Scheletul cu sidebar ---------------------------------------------------- */

body.cu-sidebar { display: flex; min-height: 100vh; }

.sidebar {
  width: 224px;
  flex-shrink: 0;
  background: var(--sidebar-fundal);
  color: var(--sidebar-text);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-logo {
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 20px;
}
.sidebar-logo img { display: block; width: 100%; height: auto; }

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }

.sidebar-item {
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--sidebar-text);
  text-decoration: none;
}
.sidebar-item:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.sidebar-item.activ { background: #e8f5f1; color: #0b5e55; font-weight: 700; }

.sidebar-jos {
  margin-top: auto;
  padding: 12px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
}

.user-chip { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--sidebar-text); white-space: nowrap; overflow: hidden; }
.user-dot { width: 8px; height: 8px; border-radius: 50%; background: #4cc38a; flex-shrink: 0; }
.btn-iesire { color: var(--sidebar-text); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; align-self: flex-start; }
.btn-iesire:hover { color: #fff; border-color: #fff; }

.zona-continut { flex: 1; min-width: 0; }

@media (max-width: 991px) {
  body.cu-sidebar { flex-direction: column; }
  /* Meniul devine o bară compactă: sigla + cont pe un rând, paginile pe un
     al doilea rând care glisează lateral — pe telefoane înguste (ex. ecranul
     exterior al unui Z Fold), varianta veche cu wrap ocupa jumătate din ecran. */
  .sidebar {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo . jos" "nav nav nav";
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px;
  }
  .sidebar-logo { grid-area: logo; margin-bottom: 0; width: 130px; }
  .sidebar-jos { grid-area: jos; margin-top: 0; border: 0; padding: 0; flex-direction: row; align-items: center; gap: 8px; }
  .sidebar-nav {
    grid-area: nav;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 2px;
  }
  .sidebar-item { white-space: nowrap; flex-shrink: 0; }

  /* Grupurile de butoane clinice (Stroke test, Sprijin la mers...) au 3-5
     opțiuni cu text lung — pe ecran îngust se comprimau și textul se rupea
     în mijlocul cuvântului. Trec pe grilă care se aranjează pe 2-3 coloane. */
  [data-alege-optiune] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 4px;
  }
  [data-alege-optiune] .btn { border-radius: 8px !important; margin: 0 !important; }
}

/* --- Banda de cifre mari (pagina pacientului) -------------------------------- */

.banda-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi {
  background: var(--ak-card);
  border: 1px solid var(--ak-bord);
  border-radius: 12px;
  padding: 10px 16px 8px;
  box-shadow: 0 1px 3px rgba(15, 36, 48, 0.05);
  border-bottom-width: 3px;
}
.kpi-eticheta { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ak-muted); font-weight: 700; }
.kpi-valoare { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.kpi-valoare small { font-size: 12px; color: var(--ak-muted); font-weight: 600; }
.kpi-ok { border-bottom-color: var(--ak-accent); background: linear-gradient(#fff 55%, #f2faf8); }
.kpi-ok .kpi-valoare { color: var(--ak-accent); }
.kpi-atentie { border-bottom-color: var(--ak-galben); background: linear-gradient(#fff 55%, #fdf9ec); }
.kpi-atentie .kpi-valoare { color: #9a7112; }
.kpi-rau { border-bottom-color: var(--ak-rosu); background: linear-gradient(#fff 55%, #fdf2f2); }
.kpi-rau .kpi-valoare { color: var(--ak-rosu); }
.kpi-neutru { border-bottom-color: #cdd7dc; }
.kpi-neutru .kpi-valoare, .kpi-valoare { color: #0f2430; }

/* --- Carduri, tabele, butoane ------------------------------------------------ */

.card {
  background: var(--ak-card);
  border: 1px solid var(--ak-bord);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 36, 48, 0.05), 0 8px 24px rgba(15, 36, 48, 0.05);
}

/* Cardurile de stare (progres/restricții/alerte): dunga subțire pe stânga în
   locul chenarului colorat gros — semnalul rămâne, țipătul dispare. */
.card.border-info, .card.border-success, .card.border-warning, .card.border-danger {
  border-width: 1px !important;
  border-color: var(--ak-bord) !important;
  border-left-width: 4px !important;
}
.card.border-info { border-left-color: var(--ak-accent) !important; }
.card.border-success { border-left-color: var(--ak-verde) !important; }
.card.border-warning { border-left-color: var(--ak-galben) !important; }
.card.border-danger { border-left-color: var(--ak-rosu) !important; }
.card .text-warning { color: #9a7112 !important; }

/* Butoanele clinice (Stroke, SLR, sprijin...): contur neutru, text discret
   colorat; culoarea plină apare DOAR pe opțiunea aleasă. */
/* neselectat = contur neutru + text discret colorat; selectat = clasa plină
   (btn-success/-warning/...) pusă de alege_optiune.js — rămâne colorată. */
[data-alege-optiune] [class*="btn-outline-"], [data-valoare-rapida] [class*="btn-outline-"], [data-valoare-binara] [class*="btn-outline-"] {
  border-color: #d6dee3;
  background: #fbfdfd;
  font-weight: 600;
}
[data-alege-optiune] .btn-outline-success, [data-valoare-rapida] .btn-outline-success, [data-valoare-binara] .btn-outline-success { color: #2f8f68; }
[data-alege-optiune] .btn-outline-warning, [data-valoare-rapida] .btn-outline-warning { color: #a07c1a; }
[data-alege-optiune] .btn-outline-danger, [data-valoare-rapida] .btn-outline-danger, [data-valoare-binara] .btn-outline-danger { color: #b65252; }
[data-alege-optiune] .btn-outline-primary { color: var(--ak-accent-intens); }
[data-alege-optiune] .btn-warning { background: var(--ak-galben); border-color: var(--ak-galben); color: #3d3000; }
[data-alege-optiune] .btn-success, [data-valoare-binara] .btn-success { background: var(--ak-verde); border-color: var(--ak-verde); }
[data-alege-optiune] .btn-danger, [data-valoare-binara] .btn-danger { background: var(--ak-rosu); border-color: var(--ak-rosu); }

.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding-block: 0.55rem; border-bottom-color: #eef2f4; }
.table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ak-muted);
  border-bottom-width: 1px;
}
.table-sm > :not(caption) > * > * { padding-block: 0.45rem; }
.table-light, .table-light > th { --bs-table-bg: #f0f4f6; background-color: #f0f4f6; }

.btn { border-radius: 8px; font-weight: 600; }
.btn-primary {
  background-color: var(--ak-accent) !important;
  border-color: var(--ak-accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color: var(--ak-accent-intens) !important;
  border-color: var(--ak-accent-intens) !important;
}
.btn-outline-primary { color: var(--ak-accent) !important; border-color: var(--ak-accent) !important; }
.btn-outline-primary:hover { background-color: var(--ak-accent) !important; color: #fff !important; }
.btn-outline-secondary { --bs-btn-color: var(--ak-muted); --bs-btn-border-color: #d6dee3; }
.text-primary { color: var(--ak-accent) !important; }
.bg-primary { background-color: var(--ak-accent) !important; }
a { color: var(--ak-accent-intens); }
.badge { font-weight: 650; letter-spacing: 0.02em; }

/* --- Autentificare ----------------------------------------------------------- */

.login-wrap { min-height: calc(100vh - 8rem); padding-top: 2rem; }
.login-logo { background: #fff; border-radius: 1rem; padding: 1rem 2rem; border: 1px solid var(--ak-bord); }
.login-logo img { max-width: 300px; width: 100%; display: block; }
.login-card { width: 100%; max-width: 380px; }

/* --- Formulare --------------------------------------------------------------- */

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="date"],
form input[type="datetime-local"],
form input[type="number"],
form input[type="url"],
form input[type="file"],
form select,
form textarea {
  display: block;
  width: 100%;
  padding: 0.4rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #d6dee3;
  border-radius: 8px;
  background-color: #fbfdfd;
  color: var(--ak-text);
}

form input:focus, form select:focus, form textarea:focus {
  outline: none;
  border-color: var(--ak-accent);
  box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.15);
}

form textarea.camp-auto-creste { min-height: 7rem; overflow: hidden; resize: none; }
form input[type="checkbox"] { display: inline-block; width: 1.1em; height: 1.1em; margin-right: 0.4em; }

/* --- Antetul fișelor (sigla + titlul) și paginile publice --------------------- */

.fisa-antet-titlu { padding-bottom: 0.35rem; }
.fisa-sigla { height: 34px; width: auto; display: block; }
.fisa-antet-separator { width: 1px; align-self: stretch; background: var(--ak-bord); }

/* Semnul „?" de lângă câmpurile notei — duce la explicația testului */
.ajutor-test {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #c3cdd4;
  color: var(--ak-muted);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  vertical-align: text-bottom;
}
.ajutor-test:hover { border-color: var(--ak-accent); color: var(--ak-accent); }

/* „Progresul tău" — ceasurile de progres de la finalul fișei pacientului */
.progres-grila {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.progres-card {
  flex: 1 1 170px;
  max-width: 230px;
  text-align: center;
  border: 1px solid var(--ak-bord);
  border-radius: 12px;
  padding: 14px 10px 10px;
  page-break-inside: avoid;
}

.fisa-publica { max-width: 920px; margin-inline: auto; }
.fisa-publica .card { padding: 2rem !important; }
.fisa-publica h5 { margin-top: 1.25rem; }

/* --- Stiluri de print: fișele ies curat, pe alb -------------------------------- */

@media print {
  :root { --ak-fundal: #fff; }
  body { background-color: white; color: #000; font-size: 12.5px; line-height: 1.5; }
  .sidebar { display: none !important; }
  .zona-continut { width: 100%; }
  .fisa-antet-titlu { border-bottom: 2px solid var(--brand-navy); padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
  .fisa-sigla { height: 30px; }
  .fisa-publica .card { padding: 0 !important; }
  /* Cardul-container al fișei e mai lung de o pagină — trebuie să curgă peste
     pagini, altfel browserul îl împinge întreg pe pagina 2 și prima rămâne goală.
     Doar blocurile mici (criterii, dl, tabele) rămân netăiate. */
  .card { box-shadow: none; border: none; page-break-inside: auto; --bs-card-bg: #fff; }
  tr, .kpi, [data-mers-etapa] { page-break-inside: avoid; }
  .table thead th { color: #333; }
  .btn, button, .ajutor-test { display: none; }
  .d-none { display: none !important; }
  canvas { max-width: 100%; page-break-inside: avoid; border: 1px solid #ddd; margin-bottom: 1rem; }
  .chart-legend { font-size: 11px; page-break-inside: avoid; }
  h5, h6 { page-break-after: avoid; }
  dl { page-break-inside: avoid; }
  [data-progres-faza] { page-break-inside: avoid; }
  [data-progres-faza] ul { page-break-inside: avoid; }
  @page { margin: 1.5cm; size: A4; }
}