/*
  Custos — stilurile shell-ului back-office (Story 1.4-A), peste MudBlazor.
  Culorile, fonturile și forma vin din variabilele --custos-* (tokenii din DESIGN.md, scriși de CustosThemeProvider pentru modul
  activ, inclusiv modul „după sistem”, sub prefers-color-scheme): aici nu se scrie nicio culoare.
  Back-office de la 1280px (sub 1280px: nedecis, DESIGN.md › Layout & Spacing).
*/

/* --- Fonturi servite din aplicație (OFL-1.1, fonts/OFL.txt): Source Sans 3 și Source Code Pro, variabile, latin + latin-ext. --- */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-sans-3-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-sans-3-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-code-pro-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url('../fonts/source-code-pro-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Bază --- */
html {
  color-scheme: var(--mud-native-html-color-scheme, light);
}

body {
  margin: 0;
  background: var(--custos-background);
  color: var(--custos-text);
  font-family: var(--custos-font-sans);
  font-size: 14px;
  line-height: 1.5;
}

a {
  color: var(--custos-primary);
}

/* Numere și coduri: Source Code Pro, cifre tabulare (DESIGN.md › Typography). */
code,
kbd,
samp,
.custos-data {
  font-family: var(--custos-font-mono);
  font-variant-numeric: tabular-nums;
}

table {
  font-variant-numeric: tabular-nums;
}

/*
  Focus vizibil pe orice element interactiv: contur 2px primary (EXPERIENCE.md › Accessibility Floor). MudBlazor scoate conturul
  (a:focus-visible, button:focus, .mud-list-item-clickable), deci regula e !important. Câmpurile MudBlazor își arată focusul prin
  rama de 2px primary (DESIGN.md › field), nu prin conturul elementului din interiorul ramei.
*/
:focus-visible {
  outline: 2px solid var(--custos-primary) !important;
  outline-offset: 2px;
}

.mud-input-slot:focus-visible {
  outline: none !important;
}

/* --- Shell: nav lateral fix 232px + conținut fluid --- */
.custos-shell {
  display: grid;
  grid-template-columns: var(--custos-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.custos-nav {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 16px 10px;
  background: var(--custos-surface);
  border-right: 1px solid var(--custos-border);
}

/* Brandul (typography.brand, primary), cu sigla înainte: în nav și pe „Alegeți clientul”. */
.custos-brand,
.custos-plain .custos-brand-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--custos-primary);
}

.custos-brand {
  margin: 0 8px 14px;
}

/* Sigla (BrandMark, DESIGN.md › Components › Comune › Sigla): plăcuța primary cu „C”-ul on-primary, din tokeni (ambele
   moduri), lângă „Custos”. */
.custos-mark {
  display: block;
  flex: none;
}

.custos-mark-tile {
  fill: var(--custos-primary);
}

.custos-mark-c {
  fill: none;
  stroke: var(--custos-on-primary);
  stroke-width: 4.2;
  stroke-linecap: round;
}

.custos-plain .custos-brand-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--custos-primary);
}

.custos-nav-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.custos-nav-link {
  display: block;
  padding: 7px 10px;
  border-radius: var(--custos-radius);
  color: var(--custos-text-muted);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}

.custos-nav-link:hover {
  background: var(--custos-background);
  color: var(--custos-text);
}

/* Părintele deschis (grupul paginii curente): text 600. */
.custos-nav-link--open {
  color: var(--custos-text);
  font-weight: 600;
}

/* Elementul activ: primary-soft, text 600. */
.custos-nav-link--active,
.custos-nav-link--active:hover {
  background: var(--custos-primary-soft);
  color: var(--custos-text);
  font-weight: 600;
}

/* Nivelul 2: 13,5px, indentare 22px. */
.custos-nav-level-2 > li > .custos-nav-link {
  padding-left: 22px;
  font-size: 13.5px;
}

/* Nivelul 3: 13px, cu o linie border la stânga, primary la elementul activ. */
.custos-nav-level-3 {
  margin-left: 22px;
  border-left: 1px solid var(--custos-border);
}

.custos-nav-level-3 > li > .custos-nav-link {
  margin-left: -1px;
  padding-left: 12px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--custos-radius) var(--custos-radius) 0;
  font-size: 13px;
}

.custos-nav-level-3 > li > .custos-nav-link--active {
  border-left-color: var(--custos-primary);
}

/* Subsolul nav-ului: linkul spre licențe și „by Quantic Story”, doar aici (DESIGN.md › footer-brand). */
.custos-nav-footer {
  margin: auto 8px 0;
  padding-top: 14px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--custos-text-muted);
}

/* Subsolul de brand (BrandFooter): linkul „Licențe open-source”, apoi „by Quantic Story”. */
.custos-brand-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.custos-brand-footer p {
  margin: 0;
}

.custos-footer-link {
  color: var(--custos-primary);
  font-size: 12px;
  line-height: 1.3;
}

.custos-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.custos-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 24px 0;
}

.custos-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px 24px 24px;
}

.custos-main h1,
.custos-plain h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.custos-main h2,
.custos-plain h2 {
  margin: 10px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.custos-main p,
.custos-plain p {
  margin: 0;
}

/* --- Tabel (DESIGN.md › data-table) --- */
.custos-main table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--custos-surface);
  border: 1px solid var(--custos-border);
  border-radius: var(--custos-radius);
  overflow: hidden;
}

.custos-main th {
  padding: 11px 12px;
  background: var(--custos-background);
  border-bottom: 1px solid var(--custos-border);
  color: var(--custos-text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
}

.custos-main td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--custos-border);
}

.custos-main tbody tr:last-child td {
  border-bottom: 0;
}

/* --- Formulare și câmpuri (DESIGN.md › field) --- */
.custos-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.custos-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 480px;
}

.custos-field-label {
  color: var(--custos-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.custos-required {
  color: var(--custos-danger);
}

.custos-field-hint {
  color: var(--custos-text-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.custos-field-error {
  color: var(--custos-danger);
  font-size: 12.5px;
  line-height: 1.4;
}

.custos-field-error:empty {
  display: none;
}

.custos-field .mud-input-control {
  margin: 0;
}

.custos-field .mud-input.mud-input-outlined {
  min-height: var(--custos-control-height);
  background: var(--custos-surface);
  border-radius: var(--custos-radius);
}

/* Eticheta, indiciul și erorile sunt ale FieldFrame (deasupra și dedesubt): zona de ajutor MudBlazor nu se folosește. */
.custos-field .mud-input-control-helper-container {
  display: none;
}

/* Câmpul paginilor statice (login): același aspect ca un câmp MudBlazor. */
.custos-native-input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--custos-control-height);
  padding: 0 12px;
  background: var(--custos-surface);
  border: 1px solid var(--custos-border-input);
  border-radius: var(--custos-radius);
  color: var(--custos-text);
  font: 14px/1.4 var(--custos-font-sans);
}

.custos-native-input:focus-visible {
  outline-offset: -2px;
}

.custos-native-input[aria-invalid="true"] {
  border-color: var(--custos-danger);
}

/* --- Încărcarea unui fișier (Story 2.1-B1, FileUpload): câmpul browserului, cu butonul în aspectul butonului secundar --- */
.custos-file-input {
  color: var(--custos-text-muted);
  font: 14px/1.4 var(--custos-font-sans);
}

.custos-file-input::file-selector-button {
  min-height: var(--custos-control-height);
  margin-right: 12px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid var(--custos-primary);
  border-radius: var(--custos-radius);
  color: var(--custos-primary);
  cursor: pointer;
  font: 600 14px var(--custos-font-sans);
}

.custos-file-input:disabled::file-selector-button {
  background: var(--custos-border);
  border-color: var(--custos-border);
  color: var(--custos-text-muted);
  cursor: default;
}

.custos-file-input[aria-invalid="true"]::file-selector-button {
  border-color: var(--custos-danger);
}

/* --- Bară de progres (DESIGN.md › progress-bar): 8px, pista border, umplerea primary, rotunjite complet, textul deasupra --- */
.custos-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 480px;
}

.custos-progress-track {
  height: 8px;
  overflow: hidden;
  background: var(--custos-border);
  border-radius: 999px;
}

.custos-progress-fill {
  height: 100%;
  background: var(--custos-primary);
  border-radius: 999px;
}

/* --- Importuri (Story 2.1-B1): ultimul fișier încărcat, starea lui și erorile --- */
.custos-import-latest {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Butoane (DESIGN.md › button-primary / button-secondary / button-disabled) --- */
.mud-button-root.custos-button {
  min-height: var(--custos-control-height);
  padding: 0 16px;
  border-radius: var(--custos-radius);
}

.mud-button-root.custos-button-secondary {
  border: 1.5px solid var(--custos-primary);
  color: var(--custos-primary);
}

.mud-button-root.custos-button:disabled {
  background: var(--custos-border);
  border-color: var(--custos-border);
  color: var(--custos-text-muted);
}

/* --- Mesaje de stare și de eroare: textul familiei pe fundalul ei soft --- */
.mud-alert.custos-alert {
  padding: 9px 14px;
  border-radius: var(--custos-radius);
  font-size: 14px;
  line-height: 1.45;
}

.mud-alert.custos-alert-success {
  background: var(--custos-success-soft);
  color: var(--custos-success);
}

.mud-alert.custos-alert-danger {
  background: var(--custos-danger-soft);
  color: var(--custos-danger);
}

.custos-alert .mud-alert-icon {
  color: inherit;
}

.custos-alert a {
  color: inherit;
  font-weight: 600;
}

/* --- Antetul paginii (DESIGN.md › Antet de pagină): eyebrow + titlu la stânga, acțiunile la dreapta --- */
.custos-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.custos-page-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.custos-main .custos-eyebrow,
.custos-plain .custos-eyebrow {
  margin: 0;
  color: var(--custos-text-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.custos-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* --- Tag de status (DESIGN.md › tag-*): cuvânt + simbol pe fundalul soft al familiei, niciodată doar culoare --- */
.custos-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: var(--custos-radius);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.custos-tag-ok {
  background: var(--custos-success-soft);
  color: var(--custos-success);
}

.custos-tag-warning {
  background: var(--custos-warning-soft);
  color: var(--custos-warning);
}

.custos-tag-error {
  background: var(--custos-danger-soft);
  color: var(--custos-danger);
}

.custos-tag-info {
  background: var(--custos-info-soft);
  color: var(--custos-info);
}

.custos-tag-neutral {
  background: var(--custos-background);
  border-color: var(--custos-border);
  color: var(--custos-text-muted);
}

/* --- Bară de blocare (DESIGN.md › blocking-banner): text danger pe danger-soft, cauza îngroșată --- */
.custos-blocking-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 14px;
  background: var(--custos-danger-soft);
  border-radius: var(--custos-radius);
  color: var(--custos-danger);
  font-size: 14px;
  line-height: 1.45;
}

.custos-blocking-banner p {
  margin: 0;
}

.custos-blocking-banner a {
  color: inherit;
  font-weight: 600;
}

/* --- Casetă de indiciu (DESIGN.md › hint-box): text-muted pe primary-soft, termenul cheie îngroșat în primary --- */
.custos-hint-box {
  padding: 9px 14px;
  background: var(--custos-primary-soft);
  border-radius: var(--custos-radius);
  color: var(--custos-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.custos-hint-term {
  color: var(--custos-primary);
  font-weight: 700;
}

/* --- Stare goală (DESIGN.md › Stare goală): simbol mare, propoziția principală, explicația, o acțiune --- */
.custos-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  max-width: 480px;
  padding: 24px 0;
  text-align: center;
}

.custos-empty-symbol {
  color: var(--custos-text-muted);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}

.custos-main .custos-empty-title,
.custos-plain .custos-empty-title {
  margin: 0;
  color: var(--custos-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.custos-main .custos-empty-text,
.custos-plain .custos-empty-text {
  margin: 0;
  color: var(--custos-text-muted);
  font-size: 15px;
  line-height: 1.45;
}

.custos-empty-details {
  color: var(--custos-text-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.custos-empty-details p {
  margin: 0;
}

.custos-empty-state .mud-button-root {
  margin-top: 6px;
}

/* --- Ecranul „Licențe open-source” --- */
.custos-license-note {
  color: var(--custos-text-muted);
  font-size: 12.5px;
}

/* --- Regiunea live comună: prezentă pentru cititoarele de ecran, ascunsă vizual --- */
.custos-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* --- Meniul utilizatorului --- */
.mud-popover {
  border: 1px solid var(--custos-border);
}

.custos-user-menu .mud-button-root {
  min-height: var(--custos-control-height);
  border-radius: var(--custos-radius);
}

.custos-user-menu-logout {
  padding: 8px 12px 10px;
}

.custos-user-menu-logout .mud-button-root {
  width: 100%;
}

/* --- Paginile statice (PlainLayout) --- */
.custos-plain {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 100vh;
  padding: 48px 24px 24px;
}

.custos-plain > header,
.custos-plain > main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 480px;
}

.custos-plain > main {
  padding: 24px;
  background: var(--custos-surface);
  border: 1px solid var(--custos-border);
  border-radius: var(--custos-radius);
}

.custos-plain > main ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.custos-plain-footer {
  margin-top: auto;
  font-size: 11px;
  line-height: 1.3;
  color: var(--custos-text-muted);
}

.custos-plain-footer .custos-brand-footer {
  align-items: center;
}

/* --- Reconectarea circuitului (ReconnectModal; clasele le pune Blazor) --- */
#components-reconnect-modal {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2000;
  max-width: 420px;
  padding: 12px 16px;
  background: var(--custos-surface);
  border: 1px solid var(--custos-border);
  border-radius: var(--custos-radius);
  color: var(--custos-text);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-resume-failed {
  display: block;
}

#components-reconnect-modal p {
  margin: 0;
}

/* Textul îl scrie custos.js în regiunea live a stării; regiunea goală nu ocupă loc. */
#components-reconnect-modal p:empty {
  display: none;
}

/* --- Eroarea care a oprit circuitul (CircuitErrorUi; Blazor îl afișează cu display: block) --- */
#blazor-error-ui {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2000;
  max-width: 420px;
  padding: 12px 16px;
  background: var(--custos-danger-soft);
  border-radius: var(--custos-radius);
  color: var(--custos-danger);
}

#blazor-error-ui a {
  color: inherit;
  font-weight: 600;
}

/* --- „Salt la conținut”: primul element focusabil, vizibil doar la focus --- */
.custos-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2100;
  padding: 8px 12px;
  background: var(--custos-surface);
  border: 1px solid var(--custos-border);
  border-radius: var(--custos-radius);
  color: var(--custos-primary);
  font-weight: 600;
  transform: translateY(-200%);
}

.custos-skip-link:focus,
.custos-skip-link:focus-visible {
  transform: none;
}

/* <main> primește focusul doar ca țintă a saltului (tabindex="-1"), nu e un element interactiv. */
.custos-main:focus-visible {
  outline: none !important;
}