/* ==========================================================================
   PIAȚA STOMATOLOGICĂ — CALENDAR (câmpurile de dată)
   --------------------------------------------------------------------------
   Referință: DESIGN-SYSTEM.md §10.22 „Calendar” (.ps-calendar, Figma 3641:25114): grilă de
   7 coloane cu gap 3px, celulă cu radius 5px, ziua aleasă pe verde pal cu text #004362.
   Chenarul, umbra și suprafața sunt ale panourilor flotante (.ps-lista-optiuni), ca lista
   de sugestii; culorile vin din tokeni, deci urmează și tema Pieței Medicale.

   MARCAJ (generat de js/components/calendar.js, NU de Razor):

     <div class="ps-camp-data">
       <input class="ps-input ps-camp-data__camp" type="text" aria-haspopup="dialog">
       <button class="ps-camp-data__buton" aria-label="…">calendar_month</button>
       <input type="hidden" name="…">
       <div class="ps-calendar" role="dialog">
         <div class="ps-calendar__antet"> ‹ [lună] [an] › </div>
         <table class="ps-calendar__grila" role="grid"> … <button class="ps-calendar__zi"> </table>
         <div class="ps-calendar__subsol"> Azi · Șterge </div>
       </div>
     </div>

   Stările vin din ARIA (§11.1): ziua aleasă e td[aria-selected="true"], azi e
   [aria-current="date"], zilele în afara limitelor sunt [aria-disabled="true"].
   Fără JavaScript rămâne câmpul nativ al browserului, neatins de aceste reguli.
   ========================================================================== */

.ps-camp-data {
  position: relative;
  min-width: 0;
}

.ps-camp-data__camp { padding-inline-end: calc(var(--ps-space-5) + 36px + var(--ps-space-5)); }

.ps-camp-data__buton {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--ps-space-5);
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  margin-block: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ps-radius-5);
  background: transparent;
  color: var(--ps-text-muted);
  cursor: pointer;
  transition: var(--ps-transition-color), background-color var(--ps-duration) var(--ps-ease);
}

.ps-camp-data__buton .ps-icon-glyph { font-size: 22px; }

.ps-camp-data__buton:hover,
.ps-camp-data--deschis .ps-camp-data__buton {
  background: var(--ps-primary-soft-hover);
  color: var(--ps-green-link);
}

.ps-camp-data__buton:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-focus-color);
  outline-offset: 0;
}

.ps-camp-data__buton:disabled {
  background: transparent;
  color: var(--ps-text-disabled-aa);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- panoul */

.ps-calendar {
  --ps-calendar-celula: 32px;

  position: absolute;
  inset-block-start: calc(100% + var(--ps-space-5));
  inset-inline-start: 0;
  z-index: var(--ps-z-dropdown);
  display: grid;
  gap: var(--ps-space-10);
  inline-size: 314px;
  max-inline-size: calc(100vw - 2 * var(--ps-space-10));
  padding: var(--ps-space-15);
  border: var(--ps-border-width) solid var(--ps-border);
  border-radius: var(--ps-radius-10);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-float);
  color: var(--ps-text);
  font: var(--ps-fw-medium) var(--ps-fs-14)/1.2 var(--ps-font-sans);
}

.ps-calendar[hidden] { display: none; }

.ps-calendar--sus {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--ps-space-5));
}

/* pe telefon celulele sunt mai mari, ca să se atingă ușor */
@media (pointer: coarse) {
  .ps-calendar { --ps-calendar-celula: 40px; }
}

/* ---------------------------------------------------------------- antetul */

.ps-calendar__antet {
  display: flex;
  align-items: center;
  gap: var(--ps-space-5);
}

.ps-calendar__titlu {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: var(--ps-space-5);
  min-width: 0;
}

/* luna și anul sunt .ps-select (aspectul și lista globale), doar mai compacte */
.ps-calendar__select {
  --ps-ctl-h: 34px;
  --ps-ctl-px: var(--ps-space-10);
  --ps-ctl-py: 0;
  --ps-ctl-fg: var(--ps-text);

  flex: 1 1 0;
  min-width: 0;
  padding-inline-end: calc(var(--ps-space-5) + var(--ps-icon-20));
  background-position: right var(--ps-space-5) center;
  font-weight: var(--ps-fw-semibold);
}

.ps-calendar__select[data-ps-calendar-an] { flex: 0 0 84px; }

/* lista lunilor nu se rupe pe două rânduri când câmpul e îngust */
@supports (appearance: base-select) {
  .ps-calendar__select::picker(select) {
    inline-size: max-content;
    min-inline-size: anchor-size(inline);
  }
}

.ps-calendar__navigare {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ps-text);
  cursor: pointer;
  transition: background-color var(--ps-duration) var(--ps-ease);
}

.ps-calendar__navigare:hover { background: var(--ps-primary-soft-hover); color: var(--ps-green-link); }

.ps-calendar__navigare:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-focus-color);
  outline-offset: 0;
}

.ps-calendar__navigare:disabled {
  background: transparent;
  color: var(--ps-text-disabled-aa);
  opacity: .5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- grila */

/* border-spacing lasă 3px și pe margini: grila se lărgește cu ei, ca celulele să atingă padding-ul */
.ps-calendar__grila {
  inline-size: calc(100% + 2 * var(--ps-space-3));
  border-collapse: separate;
  border-spacing: var(--ps-space-3);
  margin: calc(-1 * var(--ps-space-3));
  table-layout: fixed;
}

.ps-calendar__grila th {
  padding-block: 0 var(--ps-space-3);
  color: var(--ps-text-muted);
  font-size: var(--ps-fs-12);
  font-weight: var(--ps-fw-semibold);
  text-align: center;
}

.ps-calendar__grila td { padding: 0; text-align: center; }

.ps-calendar__zi {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: var(--ps-calendar-celula);
  padding: 0;
  border: 0;
  border-radius: var(--ps-radius-5);
  background: transparent;
  color: var(--ps-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--ps-duration) var(--ps-ease), var(--ps-transition-color);
}

.ps-calendar__zi:hover { background: var(--ps-primary-soft-hover); }

.ps-calendar__zi:focus-visible {
  outline: var(--ps-focus-width) solid var(--ps-focus-color);
  outline-offset: 0;
}

.ps-calendar__zi--alta-luna { color: var(--ps-text-disabled-aa); }

.ps-calendar__zi[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--ps-green-action); }

[aria-selected="true"] > .ps-calendar__zi {
  background: var(--ps-c-green-100);
  color: var(--ps-c-blue-900);
  font-weight: var(--ps-fw-bold);
}

.ps-calendar__zi[aria-disabled="true"] {
  background: transparent;
  color: var(--ps-text-disabled-aa);
  opacity: .45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- subsolul */

.ps-calendar__subsol {
  display: flex;
  justify-content: space-between;
  gap: var(--ps-space-10);
  padding-block-start: var(--ps-space-10);
  border-block-start: var(--ps-border-width) solid var(--ps-border);
}

@media (prefers-reduced-motion: reduce) {
  .ps-camp-data__buton,
  .ps-calendar__navigare,
  .ps-calendar__zi { transition: none; }
}