/* se-row-menu — meniul de acțiuni de pe un rând de tabel („…"), unul singur pentru
 * amândouă consolele.
 *
 * Prototipul BackOffice o spune el însuși, la L879-881: „Aceeași componentă ca în
 * Centrala 2, cu aceleași valori — cele două module trebuie să arate și să se poarte
 * la fel pe același gest." Sursele: scanexpert-Centrala-2/index.html L1265-1276 și
 * L1314-1317, scanexpert-backoffice/index.html L882-900.
 *
 * Fiecare culoare e un token canonic `--se-*`, tradusă prin `design-kit/dialect.json`.
 *
 * UNDE PROTOTIPURILE NU SPUN ACELAȘI LUCRU, ȘI CE S-A LUAT:
 *
 *   - AȘEZAREA meniului. Centrala îl ține `position:absolute` în interiorul
 *     `.action-menu-wrap`, cu o variantă `.action-menu-up` pentru cazul în care nu
 *     mai e loc dedesubt. BackOffice-ul l-a mutat pe `position:fixed` la 2026-08-26
 *     și și-a scris motivul în fișier: un meniu absolut se taie la marginea oricărui
 *     strămoș cu `overflow-x:auto` (`.table-scroll`), iar pe un tabel derulat
 *     orizontal opțiunile de după prima rămâneau vizibile și inaccesibile la click.
 *     Se ia forma BackOffice — e mai nouă și e reparația cauzei, nu ocolirea ei.
 *     `.action-menu-up` dispare odată cu ea: cu `fixed`, se-row-menu.js calculează
 *     marginea de sus și întoarce meniul singur când nu mai încape.
 *   - `text-align:left` pe meniu și `flex-shrink:0` pe iconiță există doar la
 *     BackOffice. Sunt supraseturi: pe marcajul Centralei nu schimbă nimic, dar
 *     opresc alinierea moștenită dintr-o celulă centrată și strivirea iconiței lângă
 *     o etichetă lungă. Se iau.
 *   - `cursor:pointer` pe butonul de trei puncte există doar la BackOffice. Se ia:
 *     `.row-actions-btn` e `<button>` fără `cursor` moștenit în amândouă consolele.
 *
 * Umbra e scrisă cu valoarea ei, nu cu o variabilă: `--shadow-float` are `canonical:
 * null` în dialect.json, iar cele două console o botează diferit
 * (`--ui-shadow-float` la BackOffice, `--shadow-float` la Centrala), deci un fișier
 * comun nu poate numi niciuna. Aceeași ieșire documentată ca la se-select.css.
 */

.action-menu-wrap {
  position: relative;
  display: inline-block;
}

.action-menu {
  position: fixed;
  min-width: 190px;
  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 */
  padding: var(--se-space-8);
  z-index: 20;
  text-align: left;
}

.action-menu.hidden {
  display: none;
}

.action-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  border: none;
  background: none;
  padding: 9px var(--se-space-12);
  border-radius: var(--se-radius-md);
  cursor: pointer;
  color: var(--se-color-text-title);
  font-family: inherit;
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  text-align: left;
  text-decoration: none;
}

/* Fundalul singur ar lăsa litera pe ce a ales starea normală, iar butonul generic al
 * consolei stă dedesubt cu culoarea lui — deci culoarea se rescrie, chiar dacă e
 * aceeași. Selectorul e (0,3,0), peste orice regulă de element a consolei. */
.action-menu-item:hover:not(:disabled) {
  background: var(--se-color-bg-console);
  color: var(--se-color-text-title);
}

/* Conturul intră spre interior: rândul umple lățimea meniului, iar unul desenat în
 * afară ar fi tăiat de marginea lui. */
.action-menu-item:focus-visible {
  outline: 2px solid var(--se-color-primary-60);
  outline-offset: -2px;
}

.action-menu-item .ph {
  font-size: 18px;
  color: var(--se-color-primary-60);
  flex-shrink: 0;
}

.action-menu-item.danger,
.action-menu-item.danger .ph {
  color: var(--se-color-badge-red-600);
}

/* Roșul rămâne roșu sub cursor. Fără regula asta, hover-ul de mai sus îl repictează
 * cu culoarea de titlu și acțiunea distructivă încetează să se citească ca atare. */
.action-menu-item.danger:hover:not(:disabled),
.action-menu-item.danger:hover:not(:disabled) .ph {
  color: var(--se-color-badge-red-600);
}

.action-menu-sep {
  height: 1px;
  background: var(--se-color-border-default);
  margin: 6px var(--se-space-4);
}

/* Butonul cu trei puncte: fără bordură, ramă de 44x44 (zona de click WCAG),
 * iconița la 20px. */
.row-actions-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--se-radius-md);
  color: var(--se-color-text-description);
  cursor: pointer;
}

.row-actions-btn .ph {
  font-size: 20px;
}

.row-actions-btn:hover:not(:disabled) {
  background: var(--se-color-secondary-10);
  color: var(--se-color-text-title);
}

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