@charset "UTF-8";

/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — TABURI
   --------------------------------------------------------------------------
   Referință: DESIGN-SYSTEM.md §10.17, §11.1–§11.3
              spec-home.md §3 (`.tab-categorie`, taburile din panoul de căutare)

   SEMANTICĂ — două implementări, aceeași înfățișare:

   A) Taburi reale (conținut schimbat pe aceeași pagină):
      <div class="ps-tabs" role="tablist">
        <button class="ps-tab" role="tab" aria-selected="true"  aria-controls="p1" id="t1">…</button>
        <button class="ps-tab" role="tab" aria-selected="false" aria-controls="p2" id="t2">…</button>
      </div>
      <div class="ps-tabpanel" role="tabpanel" id="p1" aria-labelledby="t1">…</div>

   B) Linkuri către rute proprii (RECOMANDAT pentru SEO — DESIGN-SYSTEM §10.17):
      <nav class="ps-tabs" aria-label="…">
        <a class="ps-tab" href="…" aria-current="page">…</a>
      </nav>

   CONTRAST: textul inactiv desenat, `rgba(81,81,81,.5)` pe `#FAFAFA`, are
   ≈2.8:1 — sub AA. Se folosește varianta `--ps-text-disabled-aa`
   (rgba(81,81,81,.75)) — DESIGN-SYSTEM §11.3.

   MARCAJE
     [FIGMA]   valoare desenată în machete
     [PROPUS]  stare inexistentă în design
   ========================================================================== */


/* ==========================================================================
   1. LISTA DE TABURI
   ========================================================================== */

.ps-tabs {
  display: flex;
  align-items: center;
  gap: var(--ps-space-10);                             /* [FIGMA] */
  min-width: 0;
  min-height: 40px;
}
.ps-tabs--center  { justify-content: center; }
.ps-tabs--stretch > .ps-tab { flex: 1 1 0; min-width: 0; }
.ps-tabs--wrap    { flex-wrap: wrap; row-gap: var(--ps-space-10); }

/* linie de bază sub taburi  [PROPUS] */
.ps-tabs--underline {
  border-bottom: var(--ps-border-width) solid var(--ps-border);
  gap: var(--ps-space-5);
}

/* derulare orizontală când taburile nu încap  [PROPUS] */
.ps-tabs--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ps-tabs--scroll > .ps-tab { scroll-snap-align: start; flex: 0 0 auto; }


/* ==========================================================================
   2. TABUL
   --------------------------------------------------------------------------
   h 40, padding 15px 20px, gap 10px, pastilă, 14px/600.
   Lățimile din design: 200 / 280 / 224px → `min-width: 200px`.  [FIGMA]
   ========================================================================== */

.ps-tab {
  --ps-tab-h: 40px;                                    /* [FIGMA] */
  --ps-tab-min-w: 200px;                               /* [FIGMA] */
  --ps-tab-radius: var(--ps-radius-full);
  --ps-tab-bg: transparent;
  --ps-tab-fg: var(--ps-text-disabled-aa);             /* variantă AA  §11.3 */
  --ps-tab-accent: var(--ps-green-tab);                /* var(--ps-c-green-400)  [FIGMA] */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-10);
  flex: none;
  min-height: var(--ps-tab-h);
  min-width: var(--ps-tab-min-w);
  padding: var(--ps-space-15) var(--ps-space-20);
  border: 0;
  border-radius: var(--ps-tab-radius);
  background: var(--ps-tab-bg);
  color: var(--ps-tab-fg);
  font: var(--ps-type-label);                          /* 14px/600  [FIGMA] */
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--ps-transition-color);
}

.ps-tab > .ps-icon-glyph,
.ps-tab > .material-symbols-outlined { font-size: var(--ps-icon-20); flex: none; }
.ps-tab > svg { width: var(--ps-icon-20); height: var(--ps-icon-20); flex: none; }

/* tab fără lățime minimă (bare dense, filtre) */
.ps-tab--auto     { --ps-tab-min-w: 0; }

/* --- stări ------------------------------------------------------------- */
.ps-tab:hover {
  --ps-tab-bg: color-mix(in srgb, var(--ps-tab-accent) 12%, transparent);  /* [PROPUS] */
  --ps-tab-fg: var(--ps-text-muted);
}

.ps-tab:active { --ps-tab-bg: color-mix(in srgb, var(--ps-tab-accent) 20%, transparent); }  /* [PROPUS] */

.ps-tab:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-green-dark);   /* [PROPUS] var(--ps-c-green-800) */
  outline-offset: var(--ps-focus-offset);
}

/* starea selectată vine EXCLUSIV din ARIA (§11.1) */
.ps-tab[aria-selected="true"],
.ps-tab[aria-current="page"],
.ps-tab[aria-current="true"] {
  --ps-tab-bg: var(--ps-tab-accent);                   /* var(--ps-c-green-400)  [FIGMA] */
  --ps-tab-fg: var(--ps-text-inverse);
}
.ps-tab[aria-selected="true"]:hover,
.ps-tab[aria-current="page"]:hover,
.ps-tab[aria-current="true"]:hover {
  --ps-tab-bg: var(--ps-tab-accent);
  --ps-tab-fg: var(--ps-text-inverse);
  filter: brightness(.96);                             /* [PROPUS] */
}

.ps-tab:disabled,
.ps-tab[aria-disabled="true"] {
  opacity: .45;                                        /* [PROPUS] */
  cursor: not-allowed;
}
a.ps-tab[aria-disabled="true"] { pointer-events: none; }

/* --- varianta cu subliniere  [PROPUS] ---------------------------------- */
.ps-tabs--underline > .ps-tab {
  --ps-tab-radius: var(--ps-radius-btn) var(--ps-radius-btn) 0 0;
  --ps-tab-min-w: 0;
  position: relative;
  margin-bottom: calc(var(--ps-border-width) * -1);
}
.ps-tabs--underline > .ps-tab[aria-selected="true"],
.ps-tabs--underline > .ps-tab[aria-current="page"] {
  --ps-tab-bg: transparent;
  --ps-tab-fg: var(--ps-green-ps);
}
.ps-tabs--underline > .ps-tab[aria-selected="true"]::after,
.ps-tabs--underline > .ps-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--ps-space-10);
  right: var(--ps-space-10);
  bottom: 0;
  height: 2px;
  border-radius: var(--ps-radius-2);
  background: var(--ps-green-tab);
}
.ps-tabs--underline > .ps-tab[aria-selected="true"]:hover,
.ps-tabs--underline > .ps-tab[aria-current="page"]:hover {
  --ps-tab-bg: color-mix(in srgb, var(--ps-tab-accent) 12%, transparent);
  filter: none;
}

/* --- varianta „Acțiuni rapide" verde — tab de navigație  [FIGMA] ------- */
.ps-tab--actiuni {
  --ps-tab-fg: var(--ps-green-link);                   /* var(--ps-c-green-600) */
}
.ps-tab--actiuni[aria-selected="true"],
.ps-tab--actiuni[aria-current="page"] {
  --ps-tab-bg: var(--ps-green-link);
  --ps-tab-fg: var(--ps-text-inverse);
}


/* --- bara de filtre din cont (Anunțurile mele, Candidați, Aplicări, Mesaje) ---
   o șină albă cu taburi compacte; cel curent e verde, contorul devine discret  [PROPUS] */
.ps-tabs--filtre {
  flex-wrap: wrap;
  gap: var(--ps-space-3);
  inline-size: fit-content;
  max-inline-size: 100%;
  min-height: 0;
  padding: var(--ps-space-3);
  border: var(--ps-border-width) solid var(--ps-border-soft);
  border-radius: var(--ps-radius-20);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-xs);
}
.ps-tabs--filtre > .ps-tab {
  --ps-tab-h: 36px;
  --ps-tab-min-w: 0;
  --ps-tab-fg: var(--ps-text-ui);
  gap: var(--ps-space-6);
  padding: 0 var(--ps-space-15);
  font: var(--ps-fw-medium) var(--ps-fs-14)/1.2 var(--ps-font-sans);
}
.ps-tabs--filtre > .ps-tab:hover {
  --ps-tab-bg: var(--ps-surface-muted);
  --ps-tab-fg: var(--ps-text-strong);
}
.ps-tabs--filtre > .ps-tab[aria-current="page"] {
  --ps-tab-bg: var(--ps-green-action);
  --ps-tab-fg: var(--ps-text-inverse);
  font-weight: var(--ps-fw-semibold);
}
.ps-tabs--filtre .ps-badge--numeric {
  --ps-badge-bg: var(--ps-surface-muted);
  --ps-badge-fg: var(--ps-text-ui);
  --ps-badge-px: var(--ps-space-6);
  --ps-badge-font: var(--ps-fw-semibold) var(--ps-fs-12)/20px var(--ps-font-sans);
  min-width: 20px;
  height: 20px;
}
.ps-tabs--filtre > .ps-tab[aria-current="page"] .ps-badge--numeric {
  --ps-badge-bg: rgb(255 255 255 / .22);
  --ps-badge-fg: var(--ps-text-inverse);
}


/* ==========================================================================
   3. PANOURI
   ========================================================================== */

.ps-tabpanel {
  min-width: 0;
  padding-top: var(--ps-space-20);
}
.ps-tabpanel[hidden] { display: none; }
/* panourile sunt focusabile cu tabindex="0" pentru navigare la tastatură */
.ps-tabpanel:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-focus-color);
  outline-offset: var(--ps-focus-offset);
  border-radius: var(--ps-radius-control);
}


/* ==========================================================================
   4. RESPONSIVE  [PROPUS]
   --------------------------------------------------------------------------
   Sub md taburile își pierd lățimea minimă de 200px; sub sm devin o bandă
   derulabilă orizontal (DESIGN-SYSTEM §8.1, spec-home.md).
   ========================================================================== */

@media (max-width: 991.98px) {
  .ps-tab { --ps-tab-min-w: 0; padding-inline: var(--ps-space-15); }
}

@media (max-width: 767.98px) {
  .ps-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .ps-tabs--wrap { flex-wrap: wrap; overflow: visible; }
  .ps-tab { flex: 0 0 auto; }
  .ps-tabs--filtre { scrollbar-width: none; }
  .ps-tabs--filtre::-webkit-scrollbar { display: none; }
}

@media (max-width: 575.98px) {
  .ps-tab {
    padding: var(--ps-space-10) var(--ps-space-15);
    font-size: var(--ps-fs-13);
  }
  .ps-tab > .ps-icon-glyph,
  .ps-tab > .material-symbols-outlined { font-size: var(--ps-icon-16); }
}