/* ============================================================
   DeclaSure, componentele de bază (direcția Cerneală)
   Versiunea 1.0, 22 septembrie 2026. Cere declasure-tokens.css.

   Clasele noi au prefixul ds-. Clasele vechi din app.js pot fi
   mapate treptat pe ele (ex: .primary-button { @extend .ds-btn.ds-btn-pri })
   sau pot primi aceleași reguli prin selectori grupați.
   ============================================================ */

/* ---------- butoane ---------- */
.ds-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  padding: 8px 16px; font: var(--ds-weight-bold) var(--ds-text-sm) / 1.2 var(--ds-font-ui);
  border: var(--ds-border-2) solid transparent; border-radius: var(--ds-radius-0); cursor: pointer; white-space: nowrap;
  transition: background var(--ds-motion-fast) var(--ds-ease), color var(--ds-motion-fast) var(--ds-ease); }
.ds-btn-pri { background: var(--ds-ink); color: var(--ds-panel); }
.ds-btn-pri:hover:not(:disabled) { background: var(--ds-ink-hover); }
.ds-btn-sec { background: var(--ds-panel); color: var(--ds-ink); border-color: var(--ds-ink); }
.ds-btn-sec:hover:not(:disabled) { background: var(--ds-selected); }
.ds-btn-danger { background: var(--ds-brick); color: var(--ds-panel); }
.ds-btn-danger:hover:not(:disabled) { background: var(--ds-brick-hover); }
.ds-btn-ghost { background: transparent; color: var(--ds-ink-2); text-decoration: underline; text-underline-offset: 3px; padding-left: 6px; padding-right: 6px; }
.ds-btn-ghost:hover:not(:disabled) { color: var(--ds-ink); }
.ds-btn-sm { padding: 5px 11px; font-size: var(--ds-text-xs); }
.ds-btn-lg { padding: 11px 20px; font-size: var(--ds-text-md); }
.ds-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- linkuri ---------- */
.ds-link { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-decoration-color: var(--ds-brick); text-underline-offset: 3px; }
.ds-link:hover { color: var(--ds-brick); }

/* ---------- badge-uri de stare ---------- */
.ds-badge { display: inline-block; padding: 1px 8px; font: var(--ds-weight-bold) var(--ds-text-xs) / 1.5 var(--ds-font-ui);
  letter-spacing: .02em; border: var(--ds-border-1) solid transparent; border-radius: var(--ds-radius-1); white-space: nowrap; }
.ds-badge-ok    { background: var(--ds-ok-soft);    color: var(--ds-ok-text);    border-color: var(--ds-ok); }
.ds-badge-warn  { background: var(--ds-warn-soft);  color: var(--ds-warn);  border-color: var(--ds-warn); }
.ds-badge-bad   { background: var(--ds-brick-soft); color: var(--ds-brick-text); border-color: var(--ds-brick); }
.ds-badge-grey  { background: var(--ds-grey-soft);  color: var(--ds-ink-2); border-color: var(--ds-line-2); }
.ds-badge-ink   { background: var(--ds-ink);        color: var(--ds-panel); border-color: var(--ds-ink); }

/* ---------- carduri ---------- */
.ds-card { background: var(--ds-panel); border: var(--ds-border-1) solid var(--ds-line); border-top: var(--ds-border-3) solid var(--ds-ink);
  padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-5); border-radius: var(--ds-radius-0); }
.ds-card-title { font: var(--ds-weight-bold) var(--ds-text-lg) / 1.25 var(--ds-font-ui); margin: 0 0 var(--ds-space-1); color: var(--ds-ink); }
.ds-card-text { font-size: var(--ds-text-sm); color: var(--ds-ink-2); margin: 0 0 var(--ds-space-3); }
.ds-card-foot { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-xs); color: var(--ds-muted); }
.ds-card.is-selected { border-color: var(--ds-ink); background: var(--ds-selected); }

/* ---------- tile de sumar (cifre mari) ---------- */
.ds-tile { background: var(--ds-panel); border: var(--ds-border-1) solid var(--ds-line); border-left: 3px solid var(--ds-ink); padding: var(--ds-space-2) var(--ds-space-4); }
.ds-tile-label { font: var(--ds-weight-semibold) var(--ds-text-xs) / 1.4 var(--ds-font-ui); text-transform: uppercase; letter-spacing: var(--ds-tracking-caps); color: var(--ds-muted); }
.ds-tile-value { font: var(--ds-weight-bold) var(--ds-title-md) / 1.1 var(--ds-font-display); color: var(--ds-ink); }
.ds-tile-ok   { border-left-color: var(--ds-ok); }   .ds-tile-ok .ds-tile-value   { color: var(--ds-ok); }
.ds-tile-bad  { border-left-color: var(--ds-brick); } .ds-tile-bad .ds-tile-value { color: var(--ds-brick); }
.ds-tile-warn { border-left-color: var(--ds-warn); } .ds-tile-warn .ds-tile-value { color: var(--ds-warn); }

/* ---------- formulare ---------- */
.ds-field { display: flex; flex-direction: column; gap: var(--ds-space-1); margin-bottom: var(--ds-space-4); }
.ds-label { font: var(--ds-weight-semibold) var(--ds-text-sm) / 1.4 var(--ds-font-ui); color: var(--ds-ink); }
.ds-input, .ds-select, .ds-textarea { box-sizing: border-box; font: var(--ds-weight-regular) var(--ds-text-md) / 1.4 var(--ds-font-ui); color: var(--ds-ink);
  background: var(--ds-panel); border: var(--ds-border-2) solid var(--ds-line-2); border-radius: var(--ds-radius-0); padding: 8px 12px; min-height: 40px; width: 100%; }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--ds-ink-2); }
.ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible { border-color: var(--ds-ink); box-shadow: var(--ds-focus-ring); }
.ds-input::placeholder { color: var(--ds-muted); }
.ds-input[aria-invalid="true"], .ds-field.has-error .ds-input { border-color: var(--ds-brick); }
.ds-help { font-size: var(--ds-text-xs); color: var(--ds-muted); }
.ds-error { font-size: var(--ds-text-xs); color: var(--ds-brick-text); font-weight: var(--ds-weight-semibold); }
.ds-check { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); }
.ds-check input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--ds-ink); }

/* ---------- tabel de date ---------- */
.ds-table { width: 100%; border-collapse: collapse; background: var(--ds-panel); border: var(--ds-border-1) solid var(--ds-line-2); font-size: var(--ds-text-sm); }
.ds-table th { text-align: left; font: var(--ds-weight-bold) var(--ds-text-xs) / 1.4 var(--ds-font-ui); text-transform: uppercase; letter-spacing: var(--ds-tracking-caps);
  color: var(--ds-ink); background: var(--ds-th); padding: 9px 12px; border-bottom: var(--ds-border-3) solid var(--ds-ink); }
.ds-table td { padding: 9px 12px; border-bottom: var(--ds-border-1) solid var(--ds-line); vertical-align: middle; }
.ds-table tbody tr:hover td { background: var(--ds-th); }
.ds-table tr.is-selected td { background: var(--ds-selected); }
.ds-table .ds-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--ds-weight-semibold); }
.ds-table .ds-src { display: block; font-size: var(--ds-text-xs); color: var(--ds-muted); font-weight: var(--ds-weight-regular); }
.ds-table .ds-diff-bad { color: var(--ds-brick); font-weight: var(--ds-weight-bold); }
.ds-table .ds-diff-ok { color: var(--ds-muted); font-weight: var(--ds-weight-medium); }
.ds-table tr.ds-detail td { background: var(--ds-brick-bg); border-left: var(--ds-border-4) solid var(--ds-brick); padding: var(--ds-space-3) var(--ds-space-4); }
.ds-table-wrap { overflow-x: auto; border: var(--ds-border-1) solid var(--ds-line-2); }
.ds-table-wrap .ds-table { border: none; }

/* ---------- navigare, bara de sus, context ---------- */
.ds-topbar { display: flex; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-2) var(--ds-space-4); background: var(--ds-panel); border-bottom: var(--ds-border-3) solid var(--ds-ink); }
.ds-nav { display: flex; gap: var(--ds-space-1); }
.ds-nav a { padding: 6px 10px; font: var(--ds-weight-medium) var(--ds-text-sm) / 1.3 var(--ds-font-ui); color: var(--ds-ink-2); text-decoration: none; border-bottom: 2px solid transparent; }
.ds-nav a:hover { color: var(--ds-ink); }
.ds-nav a[aria-current="page"] { color: var(--ds-ink); font-weight: var(--ds-weight-bold); border-bottom-color: var(--ds-brick); }
.ds-context { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-4); background: var(--ds-panel); border-bottom: var(--ds-border-1) solid var(--ds-line); font-size: var(--ds-text-sm); }
.ds-context-key { color: var(--ds-muted); font-weight: var(--ds-weight-medium); }
.ds-context-value { font-weight: var(--ds-weight-bold); padding: 3px 10px; border: var(--ds-border-2) solid var(--ds-ink); background: var(--ds-panel); white-space: nowrap; }

/* ---------- titluri de pagină și de grup ---------- */
.ds-page-title { font: var(--ds-weight-bold) var(--ds-title-md) / 1.15 var(--ds-font-display); margin: 0 0 var(--ds-space-1); letter-spacing: -0.01em; }
.ds-page-lead { font-size: var(--ds-text-md); color: var(--ds-ink-2); margin: 0 0 var(--ds-space-4); }
.ds-group-title { font: var(--ds-weight-bold) var(--ds-title-sm) / 1.2 var(--ds-font-display); margin: 0 0 var(--ds-space-2); padding-bottom: 2px; border-bottom: var(--ds-border-1) solid var(--ds-line); }

/* ---------- legenda Tehnic / Preliminar / Oficial ---------- */
.ds-legend { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); font-size: var(--ds-text-sm); color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); }
.ds-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ds-line-2); }
.ds-legend .is-preliminary::before { background: var(--ds-warn); }
.ds-legend .is-official::before { background: var(--ds-ok); }

/* ---------- stare goală ---------- */
.ds-empty { text-align: center; padding: var(--ds-space-8) var(--ds-space-4); border: 1px dashed var(--ds-line-2); background: var(--ds-panel); }
.ds-empty-title { font: var(--ds-weight-bold) var(--ds-text-lg) / 1.3 var(--ds-font-ui); margin: 0 0 var(--ds-space-1); }
.ds-empty-text { font-size: var(--ds-text-sm); color: var(--ds-ink-2); margin: 0 0 var(--ds-space-4); }

/* ---------- mesaje inline (succes / eroare / preliminar) ---------- */
.ds-note { padding: var(--ds-space-3) var(--ds-space-4); border: var(--ds-border-1) solid var(--ds-line); border-left-width: var(--ds-border-4); background: var(--ds-panel); font-size: var(--ds-text-sm); }
.ds-note-ok { border-left-color: var(--ds-ok); }
.ds-note-warn { border-left-color: var(--ds-warn); background: var(--ds-warn-soft); }
.ds-note-bad { border-left-color: var(--ds-brick); background: var(--ds-brick-bg); }

/* ---------- disclosure ---------- */
.ds-disclosure { border: var(--ds-border-1) solid var(--ds-line); background: var(--ds-panel); }
.ds-disclosure summary { cursor: pointer; padding: var(--ds-space-3) var(--ds-space-4); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-sm); list-style: none; }
.ds-disclosure summary::before { content: "+"; display: inline-block; width: 14px; font-weight: var(--ds-weight-bold); color: var(--ds-brick); }
.ds-disclosure[open] summary::before { content: "\2212"; }
.ds-disclosure summary::-webkit-details-marker { display: none; }
.ds-disclosure-body { padding: 0 var(--ds-space-4) var(--ds-space-4); font-size: var(--ds-text-sm); color: var(--ds-ink-2); }

/* ---------- dialog real (nu se confundă cu raportarea modală SAF-T) ---------- */
.ds-dialog-backdrop { position: fixed; inset: 0; background: rgba(20, 19, 24, .55); display: flex; align-items: center; justify-content: center; padding: var(--ds-space-4); }
.ds-dialog { background: var(--ds-panel); border-top: var(--ds-border-4) solid var(--ds-ink); width: min(560px, 100%); padding: var(--ds-space-5) var(--ds-space-6) var(--ds-space-6); }
.ds-dialog-title { font: var(--ds-weight-bold) var(--ds-title-sm) / 1.2 var(--ds-font-display); margin: 0 0 var(--ds-space-2); }
.ds-dialog-actions { display: flex; justify-content: flex-end; gap: var(--ds-space-2); margin-top: var(--ds-space-5); }

/* ---------- utilitare mici ---------- */
.ds-caps { font-size: var(--ds-text-xs); text-transform: uppercase; letter-spacing: var(--ds-tracking-caps); font-weight: var(--ds-weight-semibold); color: var(--ds-muted); }
.ds-muted { color: var(--ds-muted); }
.ds-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-powered { font-size: var(--ds-text-xs); color: var(--ds-muted); }