/* se-calendar — culegătorul de perioadă cu două luni alăturate, unul singur pentru
 * amândouă consolele.
 *
 * Forma și valorile vin din prototipul BackOffice (Figma „Calendar cu 1 zi" — varianta
 * interval, node 563:8964): `.cal-field` L660-678 și blocul de interval L718-736 din
 * r2/apps/external/scanexpert-backoffice/index.html. Prototipul Centrala-2 poartă aceleași
 * reguli, convergente intenționat (L946-950 acolo).
 *
 * Fiecare culoare, rază și mărime de text e un token canonic `--se-*`, tradusă prin
 * `design-kit/dialect.json`: --input-border = border-default, --text-heading =
 * text-title, --text-body = text-description, --placeholder = text-placeholder,
 * --accent-pink-dark = secondary-60, --accent-pink-soft = secondary-20, --accent-navy =
 * primary-60, --accent-navy-pressed = primary-80, --accent-navy-ghost = primary-70,
 * --btn-disabled-text și #d1d3dc = primary-20, --card-inner-bg = bg-console, #f9f9fa =
 * bg-canvas, #fff = bg-surface, --focus-ring = focus-ring, --radius-lg = radius.lg,
 * --radius-pill = radius.pill, raza de 8px a zilei = radius.md.
 *
 * PRESETAREA ALEASĂ E UN RÂND DE MENIU SELECTAT, nu un buton apăsat. E reparația de
 * design din 6af98f6 („Presetul ales din calendar arata ca in design system"): rândul a
 * pierdut jumătatea de rază și bordura-accent din dreapta și a primit rază de pastilă
 * întreagă, 40px înălțime minimă și fundalul treptei 20 — exact vocabularul de stare al
 * navigației din amândouă consolele. Nu se întoarce la forma veche.
 *
 * TREI ESCAPE-URI, toate documentate:
 *   - Umbrele n-au token (`dialect.json`: `--shadow-float` are `canonical: null`, iar
 *     cele două console o botează diferit), deci se scriu cu valoarea lor. Aceeași
 *     ieșire ca la se-row-menu.css și se-select.css.
 *   - Aureola roz a stării „deschis" e literalul prototipului, derivat din
 *     color.secondary.60.
 *   - Golul de 32px dintre luni și cel de 2px dintre presetări sunt ale prototipului;
 *     scala de spațiere se oprește la 28 și pornește de la 4, deci nu există token
 *     pentru niciunul. Restul spațierilor sunt `--se-space-*`.
 *
 * UNDE SE ABATE DE LA PROTOTIP, INTENȚIONAT — toate din aceleași reguli de casă pe care
 * le respectă și se-select.css:
 *
 *   1. NICIO STARE NU SCHIMBĂ `border-width`. Prototipul îngroașă bordura de la 1px la
 *      2px la focus, la ziua de azi și la pastila în editare — ceea ce mișcă așezarea
 *      sub deget. Al doilea pixel vine dintr-o umbră `inset`, deci cutia nu-și schimbă
 *      niciodată mărimea.
 *   2. FOCUSUL e tratamentul de familie — contur 2px `primary-60` plus halo de 4px
 *      `focus-ring` — nu bordura navy a prototipului. Se scrie aici, nu se lasă pe
 *      seama consolei: BackOffice-ul are o regulă generică pe `[role="button"]`, dar
 *      recepția nu, iar un fișier comun nu poate depinde de una singură.
 *   3. Orice `:hover`/`:active` care scrie un fundal scrie și o culoare de text, chiar
 *      când e aceeași cu cea din starea normală: altfel butonul generic al consolei
 *      (`ui-forms.css`, specificitate (0,2,1)) rămâne dedesubt cu litera lui.
 *   4. „Resetează" e `.cal-range-reset`, nu `.btn-tertiary`: clasa aia nu există în
 *      niciuna dintre console, deci butonul ar fi rămas nedesenat. Valorile sunt chiar
 *      cele ale prototipului pentru `.btn-tertiary` (L354-358). „Anulează"/„Aplică"
 *      rămân `.btn-secondary`/`.btn-primary`, pe care le au amândouă, fără `.btn-sm` —
 *      acela e doar al recepției.
 */

/* ---- pastila declanșatoare -------------------------------------------------------- */

.cal-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--se-space-8);
  width: 100%;
  min-height: var(--se-size-control);
  padding: 0 var(--se-space-16);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.cal-field:hover {
  border-color: var(--se-color-secondary-60);
}

.cal-field.is-open {
  border-color: var(--se-color-secondary-60);
  box-shadow: 0 0 4px 2px rgba(202, 56, 93, 0.1); /* aureola lui color.secondary.60; umbrele n-au token */
}

.cal-field:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--se-color-focus-ring);
}

/* Cât timp sertarul e deschis, câmpul e „în editare": bordura roz și aureola ei rămân,
 * iar conturul de focus stă peste ele. Fără regula asta, umbra de focus ar înlocui
 * aureola, deci deschiderea de la tastatură ar arăta altfel decât cea cu mausul. */
.cal-field.is-open:focus-visible {
  box-shadow:
    0 0 0 4px var(--se-color-focus-ring),
    0 0 4px 2px rgba(202, 56, 93, 0.1);
}

.cal-field.is-disabled {
  background: var(--se-color-bg-canvas);
  border-color: var(--se-color-border-default);
  cursor: not-allowed;
}

.cal-field .cal-text {
  flex: 1;
  min-width: 0;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-field .cal-text.is-placeholder {
  color: var(--se-color-text-placeholder);
}

.cal-field .cal-icon {
  flex-shrink: 0;
  font-size: var(--se-size-icon-functional);
  color: var(--se-color-text-description);
}

.cal-field.is-disabled .cal-text,
.cal-field.is-disabled .cal-icon {
  color: var(--se-color-primary-20);
}

/* ---- sertarul de perioadă ---------------------------------------------------------- */

/* `fixed`, ca meniul de rând: o pastilă de filtru stă adesea într-un container cu
 * `overflow`, care ar tăia orice sertar absolut. se-daterange.js îi scrie coordonatele
 * la deschidere și la fiecare derulare. */
.cal-range-drawer {
  position: fixed;
  z-index: 60;
  max-width: calc(100vw - 16px);
  overflow: auto;
  padding: var(--se-space-16) var(--se-space-20);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
  box-shadow: 0 16px 40px rgba(20, 24, 31, 0.16); /* --shadow-float din prototip; umbrele n-au token */
  cursor: default;
}

.cal-range-drawer.hidden {
  display: none;
}

.cal-range-body {
  display: flex;
  gap: var(--se-space-24);
  align-items: flex-start;
}

/* ---- coloana de presetări ---------------------------------------------------------- */

.cal-presets {
  display: flex;
  flex-direction: column;
  gap: 2px; /* sub treapta 4 a scalei de spațiere; valoarea prototipului */
  flex-shrink: 0;
}

.cal-preset-item {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: var(--se-space-8) var(--se-space-16);
  background: none;
  border: none;
  border-radius: var(--se-radius-pill);
  font-family: inherit;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-title);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.cal-preset-item:hover {
  background: var(--se-color-bg-console);
  color: var(--se-color-text-title);
}

/* Rândul ales: treapta 20, rază de pastilă, fără accent de bordură — vocabularul de
 * „curent" al navigației, nu cel de „apăsat" al unui buton. Starea își rescrie și
 * hover-ul, ca alegerea să nu pălească la trecerea mausului peste ea. */
.cal-preset-item.is-active,
.cal-preset-item.is-active:hover {
  background: var(--se-color-secondary-20);
  color: var(--se-color-text-title);
}

.cal-preset-item:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px var(--se-color-focus-ring);
}

/* ---- capetele intervalului --------------------------------------------------------- */

.cal-range-main {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-24);
}

.cal-range-inputs {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  width: 100%;
}

/* Buton, nu doar text: după ce amândouă datele sunt alese, tot trebuie să poți apăsa pe
 * început sau pe sfârșit ca să-l schimbi pe rând, fără să pierzi celălalt capăt. */
.cal-range-pill {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px var(--se-space-16);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  font-family: inherit;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-title);
  text-align: left;
  cursor: pointer;
}

.cal-range-pill:hover {
  border-color: var(--se-color-secondary-60);
  color: var(--se-color-text-title);
}

/* Capătul aflat în editare. Al doilea pixel vine din umbra `inset`, deci pastila nu-și
 * mută vecina când intri în ea. */
.cal-range-pill.is-editing {
  border-color: var(--se-color-primary-60);
  box-shadow: inset 0 0 0 1px var(--se-color-primary-60);
}

.cal-range-pill.is-placeholder {
  color: var(--se-color-text-placeholder);
}

.cal-range-pill:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--se-color-focus-ring);
}

/* Săgeata dintre capete e SVG în linie, nu glifă de font: vezi antetul lui
 * se-daterange.js. Conturul e chiar arrow-right din Phosphor. */
.cal-range-arrow {
  flex: 0 0 auto;
  display: block;
  width: var(--se-size-icon-functional);
  height: var(--se-size-icon-functional);
  fill: currentColor;
  color: var(--se-color-text-description);
}

/* ---- cele două luni ---------------------------------------------------------------- */

.cal-range-months {
  display: flex;
  gap: 32px; /* peste treapta 28, ultima a scalei de spațiere; valoarea prototipului */
}

/* 7 coloane de 44px + 6 goluri de 4px = 332px, plus aer: sub atât, ultimele coloane
 * (Vin/Sâm) ies din panou. */
.cal-month-section {
  width: 340px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--se-space-16);
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--se-size-control);
  height: var(--se-size-control);
  padding: 0;
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: 50%;
  font-size: var(--se-size-icon-functional);
  color: var(--se-color-text-title);
  cursor: pointer;
}

.cal-nav:hover {
  border-color: var(--se-color-secondary-60);
  color: var(--se-color-text-title);
}

.cal-nav:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--se-color-focus-ring);
}

.cal-nav .cal-nav-ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: block;
}

/* Locul lunii care n-are săgeată, ca eticheta să rămână centrată în amândouă panourile. */
.cal-nav-spacer {
  display: inline-block;
  width: var(--se-size-control);
  height: var(--se-size-control);
}

.cal-month-label {
  font-size: var(--se-type-bodylgmed-size);
  line-height: var(--se-type-bodylgmed-line);
  font-weight: var(--se-type-bodylgmed-weight);
  color: var(--se-color-text-title);
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--se-space-4);
}

.cal-weekdays span {
  padding: var(--se-space-8) var(--se-space-4);
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-description);
  text-align: center;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--se-space-4);
}

.cal-day {
  box-sizing: border-box;
  height: var(--se-size-control);
  padding: 0;
  background: none;
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-md);
  font-family: inherit;
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
  cursor: pointer;
}

.cal-day:hover:not(.is-selected) {
  background: var(--se-color-primary-20);
  color: var(--se-color-text-title);
}

.cal-day:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: -2px;
}

/* Ziua de azi e marcată cât timp nu s-a ales nimic: altfel deschizi calendarul și n-ai
 * de unde ști în ce zi te afli, nici de unde încep datele. Al doilea pixel vine din
 * umbra `inset`, nu dintr-o bordură mai groasă, deci grila nu se rearanjează. */
.cal-day.is-today:not(.is-selected):not(.is-in-range) {
  border-color: var(--se-color-primary-60);
  box-shadow: inset 0 0 0 1px var(--se-color-primary-60);
  color: var(--se-color-primary-60);
  font-weight: var(--se-type-bodysb-weight);
}

/* Capetele perioadei: navy plin. Regula stă sub `:hover`, dar hover-ul o exclude prin
 * `:not(.is-selected)`, deci capătul ales nu se repictează sub cursor. */
.cal-day.is-selected {
  background: var(--se-color-primary-60);
  border-color: var(--se-color-primary-60);
  color: var(--se-color-text-on-dark);
}

/* Zilele „din interior": fundal deschis, aceeași nuanță ca bordura, ca să lege vizual
 * capetele. */
.cal-day.is-in-range {
  background: var(--se-color-border-default);
}

.cal-day-empty {
  border: none;
  background: none;
}

/* ---- rândul de acțiuni ------------------------------------------------------------- */

.cal-range-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--se-space-8);
}

.cal-range-confirm {
  display: flex;
  gap: var(--se-space-8);
}

/* Valorile lui `.btn-tertiary` din prototip (L354-358), sub un nume al componentei —
 * vezi punctul 4 din antet. */
.cal-range-reset {
  padding: 10px var(--se-space-16);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--se-radius-pill);
  font-family: inherit;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-primary-70);
  cursor: pointer;
}

.cal-range-reset:hover:not(:disabled) {
  background: var(--se-color-border-default);
  color: var(--se-color-primary-70);
}

.cal-range-reset:active:not(:disabled) {
  background: var(--se-color-border-default);
  border-color: var(--se-color-primary-70);
  color: var(--se-color-primary-70);
}

.cal-range-reset:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--se-color-focus-ring);
}

.cal-range-reset:disabled {
  color: var(--se-color-primary-20);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   VARIANTA DE O ZI (se-dateday.js)
   Aceeași pastilă (.cal-field) și aceeași grilă (.cal-*) ca intervalul — de aceea
   fișierul se numește după COMPONENTĂ, nu după una dintre cele două cozi. Ce se
   adaugă aici e doar sertarul cu o singură lună și rândul lui de acțiuni.
   --------------------------------------------------------------------------- */
.cal-day-drawer {
  position: fixed;
  z-index: 60;
  background: var(--se-color-surface-raised, #fff);
  border: 1px solid var(--se-color-border-soft, #e4e4e7);
  border-radius: var(--se-radius-md, 8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 12px;
}
.cal-day-drawer.hidden {
  display: none;
}
.cal-day-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* O singură lună, deci lățimea o dă grila, nu două panouri alăturate. */
.cal-day-body .cal-month-section {
  min-width: 244px;
}
.cal-day-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--se-color-border-soft, #e4e4e7);
}
.cal-day-clear,
.cal-day-today {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--se-radius-sm, 4px);
  font: inherit;
  color: var(--se-color-text-description, #52525b);
}
.cal-day-today {
  color: var(--se-color-primary, #ca385d);
}
.cal-day-clear:hover,
.cal-day-today:hover {
  background: var(--se-color-surface-hover, #f4f4f5);
}
.cal-day-clear:focus-visible,
.cal-day-today:focus-visible {
  outline: 2px solid var(--se-color-primary, #ca385d);
  outline-offset: 2px;
}