/* ══════════════════════════════════════════════════════════════════════
   TIVO, platforma de consultație video — sistem de design
   ══════════════════════════════════════════════════════════════════════
   Preia limbajul vizual al aplicației TIVO (ecran împărțit, etichete mici
   cu majuscule și spațiere largă, câmpuri cu linie subțire, butoane plate)
   și îl aliniază la identitatea sabauavocati.eu: Montserrat în loc de
   fonturile de sistem, aceleași verde și aceleași tonuri calde de fundal.
   Accentul #2d5555 este comun celor două, nu a trebuit schimbat.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --t-accent: #2d5555;
  --t-accent-dark: #14352f;
  --t-accent-soft: #4a6b63;

  --t-deep: #14352f;
  --t-paper: #fafaf6;
  --t-surface: #ffffff;
  --t-surface-2: #f0f0eb;
  --t-line: #e5e3dd;
  --t-line-soft: #efedea;

  --t-ink: #0f0f0e;
  --t-ink-2: #3a3a37;
  --t-ink-3: #6e6e6a;
  --t-ink-4: #a8a8a3;

  --t-ok: #2f6b4f;
  --t-warn: #a9701f;
  --t-danger: #c73838;

  --t-radius: 2px;
  --t-shell: 248px;
  --t-ease: cubic-bezier(.2, .8, .3, 1);
}

html[data-theme="dark"] {
  --t-accent: #a8c4be;
  --t-accent-dark: #ffffff;
  --t-accent-soft: #7f9b95;

  --t-deep: #0c1a18;
  --t-paper: #0e1513;
  --t-surface: #121b19;
  --t-surface-2: #18211f;
  --t-line: rgba(255, 255, 255, .12);
  --t-line-soft: rgba(255, 255, 255, .07);

  --t-ink: #eef3f1;
  --t-ink-2: #c3cfcb;
  --t-ink-3: #94a29e;
  --t-ink-4: #75847f;

  --t-ok: #7fc0a0;
  --t-warn: #d8ab62;
  --t-danger: #e58a8a;
}

/* Aceiasi tokeni, aplicati din preferinta sistemului. Fara ei, pagina
   se picta o clipa in tema deschisa, pana apuca scriptul sa puna
   atributul, de unde licarirea alba la schimbarea paginii. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
--t-accent: #a8c4be;
  --t-accent-dark: #ffffff;
  --t-accent-soft: #7f9b95;

  --t-deep: #0c1a18;
  --t-paper: #0e1513;
  --t-surface: #121b19;
  --t-surface-2: #18211f;
  --t-line: rgba(255, 255, 255, .12);
  --t-line-soft: rgba(255, 255, 255, .07);

  --t-ink: #eef3f1;
  --t-ink-2: #c3cfcb;
  --t-ink-3: #94a29e;
  --t-ink-4: #75847f;

  --t-ok: #7fc0a0;
  --t-warn: #d8ab62;
  --t-danger: #e58a8a;
  }
  :root:not([data-theme="light"]) body { background: var(--t-paper); color: var(--t-ink-2); }
}


*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--t-ink-2);
  background: var(--t-paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--t-accent); text-decoration: none; }
a:hover { color: var(--t-accent-dark); }

h1, h2, h3 {
  font-weight: 300;
  color: var(--t-ink);
  letter-spacing: -.01em;
  margin: 0;
}

/* ── eticheta mică, semnătura vizuală a TIVO ──────────────────────── */
.t-label {
  display: block;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-ink-3);
}
.t-label-accent { color: var(--t-accent); }

.t-muted { color: var(--t-ink-3); }
.t-sep { height: 1px; background: var(--t-line); border: 0; margin: 2rem 0; }

/* ══ ecranul de autentificare ════════════════════════════════════════ */
.t-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.t-auth-brand {
  position: relative;
  background: var(--t-deep);
  color: #fff;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.t-auth-brand::after {
  content: "";
  position: absolute;
  inset: 0 0 68% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  pointer-events: none;
}
.t-auth-brand .t-label { color: rgba(255,255,255,.5); position: relative; z-index: 1; }
.t-auth-mark { position: relative; z-index: 1; }
.t-auth-mark h1 {
  font-size: clamp(3rem, 7vw, 5.2rem);
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  line-height: 1;
  margin: 0 0 .75rem;
}
.t-auth-mark .t-label { color: rgba(255,255,255,.55); letter-spacing: .3em; }
.t-auth-rule { width: 48px; height: 1px; background: rgba(255,255,255,.3); margin: 2.25rem 0 1.75rem; }
.t-auth-mark p {
  max-width: 300px;
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,.62);
  margin: 0;
}
.t-auth-foot { position: relative; z-index: 1; }

.t-auth-panel {
  background: var(--t-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.t-auth-form { width: 100%; max-width: 320px; }
.t-auth-form > .t-label { margin-bottom: .35rem; }
.t-auth-form .t-auth-hint {
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-ink-4);
  margin-bottom: 2.5rem;
}

/* ── câmpuri cu linie, nu cu chenar ───────────────────────────────── */
.t-field { margin-bottom: 1.75rem; }
.t-field label { display: block; margin-bottom: .5rem; }
.t-field input,
.t-field select,
.t-field textarea {
  width: 100%;
  padding: .45rem 0;
  font-family: inherit;
  font-size: .95rem;
  color: var(--t-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--t-line);
  border-radius: 0;
  transition: border-color .25s var(--t-ease);
}
.t-field input:focus,
.t-field select:focus,
.t-field textarea:focus {
  outline: none;
  border-bottom-color: var(--t-accent);
}
.t-field input::placeholder,
.t-field textarea::placeholder { color: var(--t-ink-4); }

/* ── butoane ──────────────────────────────────────────────────────── */
.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .95rem 1.5rem;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--t-accent);
  border: 1px solid var(--t-accent);
  border-radius: var(--t-radius);
  cursor: pointer;
  transition: background .25s var(--t-ease), color .25s var(--t-ease), border-color .25s var(--t-ease);
}
.t-btn:hover { background: var(--t-accent-dark); border-color: var(--t-accent-dark); color: #fff; }
/* in tema inchisa butonul ramane verde cu text alb, ca pe site */
html[data-theme="dark"] .t-btn { background: #2d5555; border-color: #2d5555; color: #ffffff; }
html[data-theme="dark"] .t-btn:hover { background: #ffffff; border-color: #ffffff; color: #14352f; }

.t-btn-ghost {
  width: auto;
  color: var(--t-ink-2);
  background: transparent;
  border-color: var(--t-line);
}
.t-btn-ghost:hover { background: var(--t-surface-2); border-color: var(--t-ink-3); color: var(--t-ink); }
html[data-theme="dark"] .t-btn-ghost { color: var(--t-ink-2); }
html[data-theme="dark"] .t-btn-ghost:hover { background: var(--t-surface-2); border-color: var(--t-ink-3); color: var(--t-ink); }

.t-btn-sm { width: auto; padding: .55rem 1rem; font-size: .62rem; }

/* ── mesaje ───────────────────────────────────────────────────────── */
.t-note {
  padding: .85rem 1rem;
  font-size: .84rem;
  line-height: 1.6;
  border-left: 2px solid var(--t-accent);
  background: var(--t-surface-2);
  color: var(--t-ink-2);
  margin-bottom: 1.75rem;
}
.t-note-error { border-left-color: var(--t-danger); color: var(--t-danger); }

/* ══ structura aplicației ════════════════════════════════════════════ */
.t-shell { display: grid; grid-template-columns: var(--t-shell) 1fr; min-height: 100vh; }

.t-side {
  background: var(--t-deep);
  color: rgba(255,255,255,.7);
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
}
.t-side-mark { padding: 0 1.75rem 2.25rem; }
.t-side-mark strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
}
.t-side-mark .t-label { color: rgba(255,255,255,.45); letter-spacing: .26em; margin-top: .2rem; }

.t-nav { flex: 1; }
.t-nav a {
  display: block;
  padding: .7rem 1.75rem;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: rgba(255,255,255,.62);
  border-left: 2px solid transparent;
  transition: background .2s var(--t-ease), color .2s var(--t-ease), border-color .2s var(--t-ease);
}
.t-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.t-nav a.is-active { color: #fff; border-left-color: #fff; background: rgba(255,255,255,.07); }

.t-side-foot { padding: 1.5rem 1.75rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.t-side-foot .t-label { color: rgba(255,255,255,.4); }
.t-side-foot a { color: rgba(255,255,255,.62); font-size: .78rem; }
.t-side-foot a:hover { color: #fff; }

.t-main { background: var(--t-paper); min-width: 0; }
.t-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2.5rem;
  background: var(--t-surface);
  border-bottom: 1px solid var(--t-line);
}
.t-topbar h1 { font-size: 1.35rem; }
.t-topbar-actions { display: flex; align-items: center; gap: .75rem; }
.t-content { padding: 2.5rem; }

/* ── carduri și tabele ────────────────────────────────────────────── */
.t-card {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  padding: 1.75rem;
}
.t-card + .t-card { margin-top: 1.5rem; }
.t-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }

.t-grid { display: grid; gap: 1.5rem; }
.t-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.t-stat strong { display: block; font-size: 2rem; font-weight: 300; color: var(--t-ink); line-height: 1.2; }

.t-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.t-table th {
  text-align: left;
  padding: .6rem 1rem .6rem 0;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-ink-3);
  border-bottom: 1px solid var(--t-line);
}
.t-table td { padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--t-line-soft); color: var(--t-ink-2); }
.t-table tr:last-child td { border-bottom: 0; }

.t-tag {
  display: inline-block;
  padding: .2rem .55rem;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--t-line);
  color: var(--t-ink-3);
}
.t-tag-ok { color: var(--t-ok); border-color: currentColor; }
.t-tag-wait { color: var(--t-warn); border-color: currentColor; }

.t-empty { padding: 3rem 0; text-align: center; color: var(--t-ink-3); font-size: .9rem; }

/* ── ecrane mici ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .t-auth { grid-template-columns: 1fr; }
  .t-auth-brand { padding: 2rem; min-height: 34vh; }
  .t-auth-panel { padding: 2.5rem 1.5rem; }
  .t-shell { grid-template-columns: 1fr; }
  .t-side { flex-direction: row; align-items: center; padding: 1rem; overflow-x: auto; }
  .t-side-mark { padding: 0 1rem 0 .5rem; }
  .t-side-mark .t-label { display: none; }
  .t-nav { display: flex; }
  .t-nav a { padding: .5rem .9rem; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .t-nav a.is-active { border-left: 0; border-bottom-color: #fff; }
  .t-side-foot { display: none; }
  .t-topbar { padding: 1rem 1.25rem; }
  .t-content { padding: 1.5rem 1.25rem; }
  .t-grid-3, .t-grid-2 { grid-template-columns: 1fr; }
}

/* ── datele de acces ale clientului, în lista de programări ───────── */
.t-acces summary { cursor: pointer; color: var(--t-accent); padding: .5rem 0; }
.t-acces summary::marker { color: var(--t-ink-3); }
.t-acces-corp { padding: .75rem 0 1.25rem; max-width: 560px; }
.t-acces-corp input {
  width: 100%;
  padding: .5rem 0;
  margin-bottom: 1rem;
  font-family: inherit;
  font-size: .85rem;
  color: var(--t-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--t-line);
}
.t-acces-corp input:focus { outline: none; border-bottom-color: var(--t-accent); }

/* ── logoul cabinetului, ca în antetul site-ului ──────────────────── */
/* ca in antetul site-ului: tagline-ul se aliniaza la dreapta,
   adica sub cuvantul "Avocati", nu sub "Sabau" */
.t-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
}
.t-logo-nume {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.1;
}
.t-logo-sub {
  display: block;
  margin-top: 3px;
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.t-logo:hover .t-logo-nume { color: #ffffff; }

/* în bara laterală stă deasupra numelui aplicației */
.t-logo-mic { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.t-logo-mic .t-logo-nume { font-size: .92rem; letter-spacing: .14em; }
.t-logo-mic .t-logo-sub { font-size: .5rem; }
@media (max-width: 900px) { .t-logo-mic { display: none; } }

/* ══════════════════════════════════════════════════════════════════════
   Trecerea dintre pagini
   ══════════════════════════════════════════════════════════════════════
   Licărirea albă dintre pagini venea de la pânza implicită a browserului,
   care se vede înainte ca foaia noastră de stil să se aplice. Se stinge
   cu color-scheme și cu un fundal pus chiar pe html, nu pe body.
   ══════════════════════════════════════════════════════════════════════ */
:root { color-scheme: light dark; }
html { background: var(--t-paper); }

/* Tranziție între pagini, unde browserul o susține. În rest, nimic nu se
   strică: paginile se schimbă ca înainte. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: t-iese .18s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: t-intra .26s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes t-iese  { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes t-intra { from { opacity: 0; transform: translateY(8px); } }

/* bara laterală rămâne pe loc în timpul trecerii */
.t-side { view-transition-name: t-bara; }
::view-transition-old(t-bara),
::view-transition-new(t-bara) { animation: none; }

/* ── intrarea conținutului: cardurile vin pe rând ─────────────────── */
@keyframes t-card-intra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.t-content .t-card,
.t-content .t-grid > * {
  animation: t-card-intra .42s cubic-bezier(.2, .8, .3, 1) both;
}
.t-content > .t-card:nth-of-type(2)       { animation-delay: .06s; }
.t-content > .t-card:nth-of-type(3)       { animation-delay: .12s; }
.t-content .t-grid > *:nth-child(2)       { animation-delay: .06s; }
.t-content .t-grid > *:nth-child(3)       { animation-delay: .12s; }

/* rândurile din tabel apar la rândul lor, scurt */
@keyframes t-rand-intra { from { opacity: 0; } to { opacity: 1; } }
.t-table tbody tr { animation: t-rand-intra .5s ease both; }
.t-table tbody tr:nth-child(2) { animation-delay: .04s; }
.t-table tbody tr:nth-child(3) { animation-delay: .08s; }
.t-table tbody tr:nth-child(4) { animation-delay: .12s; }
.t-table tbody tr:nth-child(n+5) { animation-delay: .16s; }

/* ── meniul: indicatorul alunecă, nu sare ─────────────────────────── */
.t-nav a {
  position: relative;
  overflow: hidden;
}
.t-nav a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: #fff;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.t-nav a:hover::before { transform: scaleY(.45); }
.t-nav a.is-active { border-left-color: transparent; }
.t-nav a.is-active::before { transform: scaleY(1); }

/* ── carduri și rânduri, reacție la trecerea cursorului ───────────── */
.t-card { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.t-table tbody tr { transition: background-color .2s ease; }
.t-table tbody tr:hover { background-color: rgba(45, 85, 85, .035); }
html[data-theme="dark"] .t-table tbody tr:hover { background-color: rgba(255, 255, 255, .035); }

/* ── butoane: apăsarea se simte ───────────────────────────────────── */
.t-btn { transition: background .25s var(--t-ease), color .25s var(--t-ease), border-color .25s var(--t-ease), transform .12s ease; }
.t-btn:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .t-content .t-card, .t-content .t-grid > *, .t-table tbody tr { animation: none; }
  .t-btn:active { transform: none; }
}

/* logoul rămâne lipit de marginea stângă a panoului, chiar dacă
   înăuntrul lui tagline-ul se aliniază la dreapta */
.t-auth-brand > .t-logo,
.t-side-mark > .t-logo { align-self: flex-start; }

/* ══════════════════════════════════════════════════════════════════════
   Încadrarea pe telefon
   ══════════════════════════════════════════════════════════════════════
   Două lucruri împingeau pagina în lături: meniul orizontal din bara de
   sus și tabelele, care nu se strâng sub lățimea conținutului lor.
   ══════════════════════════════════════════════════════════════════════ */
.t-shell, .t-main, .t-content { min-width: 0; }
.t-card { overflow-x: auto; }
/* Taierea de mai sus lasa tabelele late sa fie derulate pe telefon, dar
   ar reteza si meniurile de actiuni, care ies din card. Pe ecran larg,
   unde tabelul incape oricum, nu taiem. Pe telefon pastram derularea si
   facem meniul sa se deschida in rand, mai jos. */
@media (min-width: 761px) {
  .t-card:has(details.t-meniu) { overflow: visible; }
}
/* "anywhere" rupea si orele, de pilda 15:30 pe doua randuri;
   "break-word" rupe doar cuvintele care chiar nu incap */
.t-table td, .t-table th { overflow-wrap: break-word; }
.t-table td:first-child, .t-table th:first-child { white-space: nowrap; }

/* coloanele secundare dispar pe ecran mic, ca să rămână cele care contează */
@media (max-width: 760px) {
  .t-ascunde-mobil { display: none !important; }

  /* meniul se derulează singur, fără să împingă pagina */
  .t-side { overflow: visible; min-width: 0; }
  .t-nav {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .t-nav::-webkit-scrollbar { display: none; }

  .t-table { font-size: .82rem; }
  .t-table th, .t-table td { padding-right: .6rem; }
  .t-card { padding: 1.25rem 1rem; }
  .t-topbar h1 { font-size: 1.1rem; }
}

/* adresele lungi nu mai sparg cardul */
.t-acces-corp input, .t-field input, .t-field select, .t-field textarea { max-width: 100%; }

/* ștergerea: butonul nu trebuie să fie primul lucru care sare în ochi */
.t-btn-sterge { color: var(--t-ink-3); border-color: var(--t-line); }
.t-btn-sterge:hover { color: var(--t-danger); border-color: var(--t-danger); background: transparent; }

/* document anulat in Oblio: numarul ramane, dar documentul nu mai
   produce efecte, asa ca se vede taiat si stins */
.t-btn-anulat { color: var(--t-ink-3); border-color: var(--t-line); text-decoration: line-through; }
.t-btn-anulat:hover { color: var(--t-ink-3); border-color: var(--t-line); background: transparent; }

/* bifa de langa Sterge: mica, ca sa nu concureze cu butonul */
.t-anuleaza-oblio {
  margin-right: .5rem;
  font-size: .72rem;
  white-space: nowrap;
  cursor: pointer;
}
.t-anuleaza-oblio input { margin: 0; }

/* ── filtre ───────────────────────────────────────────────────────── */
.t-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--t-line);
}
.t-filtre .t-field { margin-bottom: 0; min-width: 160px; }

/* ── graficul pe luni ─────────────────────────────────────────────── */
.t-grafic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .5rem;
  align-items: end;
  height: 220px;
  padding: 1rem 0 0;
}
.t-grafic-luna { display: flex; flex-direction: column; height: 100%; }
.t-grafic-bare {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
.t-bara {
  display: block;
  width: 10px;
  min-height: 2px;
  border-radius: 1px 1px 0 0;
  transition: height .5s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
}
.t-bara-bani { background: var(--t-accent); }
.t-bara-ore  { background: var(--t-accent-soft); opacity: .55; }
.t-grafic-luna:hover .t-bara { opacity: 1; }
.t-grafic-eticheta {
  margin-top: .5rem;
  text-align: center;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-ink-3);
}

.t-legenda { display: flex; gap: 1.5rem; margin-top: 1.25rem; font-size: .75rem; color: var(--t-ink-3); }
.t-pastila { display: inline-block; width: 10px; height: 10px; margin-right: .4rem; vertical-align: middle; }
.t-pastila-bani { background: var(--t-accent); }
.t-pastila-ore { background: var(--t-accent-soft); opacity: .55; }

@media (max-width: 760px) {
  .t-grafic { height: 160px; gap: .25rem; }
  .t-bara { width: 6px; }
  .t-grafic-eticheta { font-size: .5rem; letter-spacing: .04em; }
  .t-filtre { gap: 1rem; }
  .t-filtre .t-field { min-width: 0; flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) { .t-bara { transition: none; } }

/* ── setări: tarife, zile, utilizatori ────────────────────────────── */
.t-table input[type="text"],
.t-table input[type="number"] {
  padding: .35rem 0;
  font-family: inherit;
  font-size: .85rem;
  color: var(--t-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--t-line);
  max-width: 100%;
}
.t-table input:focus { outline: none; border-bottom-color: var(--t-accent); }
.t-mic { font-size: .78rem; color: var(--t-ink-3); display: inline-flex; align-items: center; gap: .4rem; }

.t-zile { display: flex; flex-wrap: wrap; gap: .5rem; }
.t-zi { cursor: pointer; }
.t-zi input { position: absolute; opacity: 0; pointer-events: none; }
.t-zi span {
  display: inline-block;
  padding: .45rem .85rem;
  font-size: .78rem;
  color: var(--t-ink-2);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.t-zi:hover span { border-color: var(--t-ink-3); }
.t-zi input:checked + span { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }
html[data-theme="dark"] .t-zi input:checked + span { background: #2d5555; border-color: #2d5555; color: #fff; }
.t-zi input:focus-visible + span { outline: 2px solid var(--t-accent); outline-offset: 2px; }

/* ── meniul pe telefon: etichete întregi, derulare pe orizontală ──── */
@media (max-width: 900px) {
  /* indicatorul vertical nu are ce căuta pe telefon, iar overflow-ul
     lui tăia cuvintele; aici indicatorul este linia de jos */
  .t-nav a {
    flex: 0 0 auto;
    overflow: visible;
    white-space: nowrap;
    padding: .55rem .85rem;
    font-size: .78rem;
  }
  .t-nav a::before { display: none; }
  .t-nav a.is-active {
    background: rgba(255, 255, 255, .08);
    border-bottom-color: #fff;
  }

  /* bara de sus: logo mic, fix, iar meniul se derulează lângă el */
  .t-side {
    gap: .25rem;
    padding: .6rem .75rem;
    align-items: stretch;
  }
  .t-side-mark {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 .75rem 0 .25rem;
    margin-right: .25rem;
    border-right: 1px solid rgba(255, 255, 255, .12);
  }
  .t-side-mark strong { font-size: 1.05rem; letter-spacing: .14em; }
  .t-nav { align-items: stretch; }
}

@media (max-width: 760px) {
  /* numele clientului poate trece pe al doilea rând, ora nu */
  .t-table td:nth-child(2) { min-width: 7.5rem; }
  .t-table .t-tag { white-space: nowrap; }
}

/* butoanele din tabel nu se rup pe mai multe rânduri */
.t-table .t-btn { white-space: nowrap; }
@media (max-width: 760px) {
  .t-table .t-btn-sm { padding: .45rem .6rem; font-size: .54rem; letter-spacing: .1em; }
  .t-table td:last-child { white-space: nowrap; }
}

/* zona de ștergere: separată, ca să nu fie apăsată din greșeală */
.t-sterge-client {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--t-line);
}
.t-sterge-client .t-label { color: var(--t-ink-3); }

/* ══════════════════════════════════════════════════════════════════════
   Dialogul propriu și mesajele de validare
   ══════════════════════════════════════════════════════════════════════ */
.t-dialog {
  max-width: 420px;
  width: calc(100% - 2.5rem);
  padding: 0;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  color: var(--t-ink-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.t-dialog::backdrop { background: rgba(8, 14, 13, .55); backdrop-filter: blur(2px); }
.t-dialog[open] { animation: t-dialog-intra .22s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes t-dialog-intra { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.t-dialog-corp { padding: 1.75rem; margin: 0; }
.t-dialog-text {
  margin: .75rem 0 1.75rem;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--t-ink);
}
.t-dialog-butoane { display: flex; justify-content: flex-end; gap: .75rem; }
.t-dialog-butoane .t-btn { width: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

.t-btn-periculos { background: var(--t-danger); border-color: var(--t-danger); color: #fff; }
.t-btn-periculos:hover { background: #a92c2c; border-color: #a92c2c; color: #fff; }
html[data-theme="dark"] .t-btn-periculos { background: #8e3030; border-color: #8e3030; color: #fff; }
html[data-theme="dark"] .t-btn-periculos:hover { background: #e58a8a; border-color: #e58a8a; color: #1a0f0f; }

/* ── mesajele de sub câmpuri ──────────────────────────────────────── */
.t-eroare-camp {
  display: block;
  margin-top: .4rem;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--t-danger);
}
.e-invalid { border-bottom-color: var(--t-danger) !important; }
.t-field .e-invalid:focus { border-bottom-color: var(--t-danger) !important; }

@media (prefers-reduced-motion: reduce) {
  .t-dialog[open] { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Listele derulante
   ══════════════════════════════════════════════════════════════════════
   Pe Windows, lista care se deschide imprumuta fundalul de la element.
   Cu fundal transparent iesea alb, iar textul, tot alb in tema inchisa,
   devenea invizibil pana la trecerea cursorului.
   ══════════════════════════════════════════════════════════════════════ */
select,
.t-field select,
.t-filtre select,
.t-table select {
  background-color: var(--t-surface);
  color: var(--t-ink);
}
select option,
select optgroup {
  background-color: var(--t-surface);
  color: var(--t-ink);
}
html[data-theme="dark"] select,
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
  background-color: #18211f;
  color: #eef3f1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) select option,
  :root:not([data-theme="light"]) select optgroup {
    background-color: #18211f;
    color: #eef3f1;
  }
}

/* ── meniul de acțiuni din liste ──────────────────────────────────────
   Rândurile ajunseseră cu șapte butoane unul lângă altul. Acum rămâne
   la vedere o singură acțiune, cea care urmează firesc, iar restul stau
   într-un meniu. E un <details>, deci se deschide și fără JavaScript;
   scriptul doar îl închide când dai clic în altă parte. */
.t-actiuni { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.t-actiuni form { display: inline; margin: 0; }

/* randul care are meniul deschis trece deasupra celor de dupa el:
   animatia de intrare a randurilor face context de stivuire, iar
   panoul ar ramane dedesubt */
.t-table tbody tr:has(details.t-meniu[open]) { position: relative; z-index: 40; }
.t-meniu { position: relative; display: inline-block; }
.t-meniu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  color: var(--t-ink-3);
  border: 1px solid var(--t-line);
  transition: color .2s ease, border-color .2s ease;
}
.t-meniu > summary::-webkit-details-marker { display: none; }
.t-meniu > summary::after {
  content: "•••";   /* trei puncte, scrise ca atare */
  font-size: .5rem;
  letter-spacing: .1em;
  line-height: 1;
}
.t-meniu > summary:hover,
.t-meniu[open] > summary { color: var(--t-ink); border-color: var(--t-accent); }

.t-meniu-corp {
  position: absolute;
  right: 0;
  top: calc(100% + .35rem);
  z-index: 30;
  min-width: 14rem;
  padding: .35rem;
  text-align: left;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}
.t-meniu-item {
  display: block;
  width: 100%;
  padding: .6rem .7rem;
  font-family: inherit;
  font-size: .78rem;
  text-align: left;
  color: var(--t-ink-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.t-meniu-item:hover { background: var(--t-surface-2); color: var(--t-ink); }
.t-meniu-item-rosu { color: var(--t-danger); }
.t-meniu-item-rosu:hover { color: var(--t-danger); }
.t-meniu-jos { border-top: 1px solid var(--t-line); margin-top: .35rem; padding-top: .35rem; }

/* un formular intreg in meniu, pentru parola si datele contului */
.t-meniu-corp-larg { min-width: 19rem; }
.t-meniu-form { display: flex; flex-direction: column; gap: .45rem; padding: .6rem .7rem .8rem; }
.t-meniu-form .t-label { margin: 0 0 .1rem; }
.t-meniu-form input,
.t-meniu-form select {
  width: 100%;
  padding: .5rem .6rem;
  font-family: inherit;
  font-size: .82rem;
  color: var(--t-ink);
  background: var(--t-paper);
  border: 1px solid var(--t-line);
}
.t-meniu-form input:focus,
.t-meniu-form select:focus { outline: none; border-color: var(--t-accent); }
.t-meniu-form .t-btn { align-self: flex-start; margin-top: .2rem; }

@media (max-width: 760px) {
  /* in rand, nu plutind: cardul se deruleaza pe orizontala si ar taia
     un panou asezat absolut */
  .t-meniu-corp {
    position: static;
    min-width: 0;
    margin-top: .35rem;
    box-shadow: none;
  }
  .t-meniu[open] { display: block; }
  .t-meniu-corp-larg { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .t-meniu > summary, .t-meniu-item { transition: none; }
}