/* BIOINSPECT OS — sistemul de design („ERP european sobru și dens”, spec 07 §2).
   Un singur fișier de stil (UX_DIRECTION §5): nicio pagină nu are stiluri proprii.
   Culoarea apare NUMAI pe stări, termene și mesaje (BR-UI-040); structura o fac marginile de 1 px. */

/* --- Fonturi găzduite pe serverul propriu (date în UE, PRINCIPII §12; licența OFL în static/fonts) ------------ */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1E9F; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1E9F; }

/* --- Tokenuri (spec 07 §2.4) ---------------------------------------------------------------------------------- */
:root {
  --structura: #1F3A5F;          /* bara de sus, meniul activ, titlurile de secțiune */
  --structura-inchis: #16293F;   /* meniul lateral */
  --accent: #2B4A73;             /* linkuri, bara de proces, antetele de tabel, focus */
  --entitate: #4A6FA0;           /* eticheta de tip în căutare */
  --fundal: #FFFFFF;
  --fundal-pagina: #F2F4F7;
  --fundal-sectiune: #F7F9FB;
  --fundal-antet-grila: #E9EDF2;
  --bordura: #C2CAD4;
  --bordura-fina: #DDE2E8;
  --text: #1B2430;
  --text-secundar: #4E5D6C;      /* 6,3:1 pe alb */
  --bine: #2E7D32;
  --atentie: #B26A00;
  --blocare: #B3261E;
  --neutru: #5A6B7C;
  --bine-fundal: #EDF5EE;
  --atentie-fundal: #FBF3E6;
  --blocare-fundal: #FBEDEC;
  --neutru-fundal: #F0F2F4;

  --font: "IBM Plex Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --corp: 13px;
  --tabel: 12.5px;
  --eticheta: 12px;
  --titlu: 16px;

  --bara: 40px;
  --meniu: 220px;
  --meniu-pliat: 48px;
  --rand: 26px;
  --camp: 28px;
  --spatiu: 12px;
  --eticheta-latime: 168px;
}

/* --- Bază ----------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--corp)/1.45 var(--font); color: var(--text); background: var(--fundal-pagina); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--structura); }
h1 { font-size: var(--titlu); font-weight: 600; margin: 0; line-height: 1.3; }
h2 { font-size: 13px; font-weight: 600; margin: 0; color: var(--structura); text-transform: uppercase; letter-spacing: .03em; }
h3 { font-size: 13px; font-weight: 600; margin: 0; }
p { margin: 0 0 8px; }
code, .code, kbd { font-family: var(--mono); font-size: 12px; }
.code { white-space: nowrap; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--text-secundar); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: 8px; top: -40px; z-index: 50; background: var(--fundal); padding: 6px 10px; border: 2px solid var(--accent); }
.skip-link:focus { top: 4px; }

/* --- Shell: bara de sus 40 px, meniul 220 px, zona de lucru ---------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--meniu) 1fr; grid-template-rows: var(--bara) 1fr; min-height: 100vh; }
.topbar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  height: var(--bara); padding: 0 12px 0 0; background: var(--structura); color: #fff; }
.topbar a, .topbar button { color: #fff; }
.topbar :focus-visible { outline-color: #fff; }
.brand { display: flex; align-items: center; gap: 8px; width: var(--meniu); height: 100%; padding: 0 12px; flex: none;
  background: var(--structura-inchis); font-weight: 600; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.brand .mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.6); font-size: 11px; }
.company { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 500; }
.company select { height: 26px; max-width: 220px; border: 1px solid rgba(255,255,255,.45); background: var(--structura); color: #fff; font: inherit; padding: 0 4px; }
.company .test-tag { padding: 1px 6px; border: 1px solid #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.global-search { position: relative; flex: 0 1 480px; min-width: 160px; }
.global-search input { width: 100%; height: 28px; padding: 0 80px 0 8px; border: 1px solid rgba(255,255,255,.35); background: #fff; color: var(--text); font: inherit; }
.global-search input:focus { outline: 2px solid #fff; outline-offset: 0; }
.global-search .hint { position: absolute; right: 6px; top: 6px; font-size: 11px; color: var(--text-secundar); pointer-events: none; }
.topbar .spacer { flex: 1; }
.counter { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; text-decoration: none; white-space: nowrap; }
.counter b { min-width: 18px; padding: 0 4px; border: 1px solid rgba(255,255,255,.6); text-align: center; font-weight: 600; }
/* Meniul utilizatorului (click pe nume): rolurile scrise întreg, firma activă, ieșirea. */
.usermenu { position: relative; font-size: 12px; }
.usermenu > summary { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid rgba(255,255,255,.45); cursor: pointer; list-style: none; white-space: nowrap; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover, .usermenu[open] > summary { background: rgba(255,255,255,.12); }
.usermenu > summary:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.usermenu .who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.usermenu .panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 360px; max-width: calc(100vw - 24px); padding: 10px; background: var(--fundal); color: var(--text); border: 1px solid var(--bordura); box-shadow: 0 8px 24px rgba(22,41,63,.25); }
.usermenu dl { margin: 0 0 8px; }
.usermenu dl div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--bordura-fina); }
.usermenu dt { color: var(--text-secundar); }
.usermenu dd { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.usermenu .test-tag { display: inline-block; padding: 0 4px; border: 1px solid var(--atentie); color: var(--atentie); font-size: 10.5px; font-weight: 600; }
.usermenu .links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
.usermenu .linklike { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.usermenu .linklike kbd { text-decoration: none; }
.topbar .usermenu .panel a, .topbar .usermenu .panel .linklike { color: var(--accent); }
.topbar .usermenu .panel .btn { color: var(--text); }
.topbar .usermenu .panel :focus-visible { outline-color: var(--accent); }
.usermenu form .btn { width: 100%; }
.topbar .icon-btn { height: 26px; min-width: 26px; padding: 0 8px; border: 1px solid rgba(255,255,255,.45); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.topbar .icon-btn:hover { background: rgba(255,255,255,.12); }
.viewas { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.viewas select { height: 26px; border: 1px solid #fff; background: var(--structura); color: #fff; font: inherit; font-size: 12px; }
.nav-toggle { display: none; }

.sidebar { grid-row: 2; position: sticky; top: var(--bara); height: calc(100vh - var(--bara)); overflow-y: auto;
  background: var(--structura-inchis); color: #D5DDE7; padding: 6px 0 24px; font-size: 12.5px; }
.sidebar .zone + .zone { margin-top: 4px; }
.sidebar .zone-title { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px 2px; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #9FB0C3; text-transform: uppercase; text-align: left; cursor: pointer; }
.sidebar .zone-title:hover { color: #fff; }
.sidebar .zone-title:focus-visible, .sidebar a:focus-visible, .sidebar button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.sidebar .zone-title .full { flex: 1; }
.sidebar .zone-title .chev::before { content: "▾"; font-size: 10px; }
.sidebar .zone-title[aria-expanded="false"] .chev::before { content: "▸"; }
.sidebar .future { margin: 12px 12px 0; }
.sidebar .future button { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 26px; padding: 2px 8px; border: 1px dashed rgba(255,255,255,.35); background: transparent; color: #D5DDE7; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.sidebar .future button[aria-pressed="true"] { border-style: solid; color: #fff; }
.sidebar .zone-title .abbr { display: none; }
.sidebar a { display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 12px 2px 18px; color: #E4EAF1; text-decoration: none; border-left: 3px solid transparent; }
.sidebar a:hover { background: rgba(255,255,255,.07); }
.sidebar a[aria-current="page"] { background: var(--structura); border-left-color: #fff; color: #fff; font-weight: 500; }
.sidebar a .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar a .count { min-width: 18px; padding: 0 4px; border: 1px solid rgba(255,255,255,.5); font-size: 11px; text-align: center; }
.sidebar a .stage { font-size: 10.5px; color: #9FB0C3; }
.sidebar a.planned .label { color: #AFC0D2; }
.sidebar .collapse { display: block; width: calc(100% - 24px); margin: 12px; height: 26px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #D5DDE7; font: inherit; font-size: 12px; cursor: pointer; }

body.nav-collapsed .shell { grid-template-columns: var(--meniu-pliat) 1fr; }
body.nav-collapsed .brand { width: var(--meniu-pliat); justify-content: center; }
body.nav-collapsed .brand .name { display: none; }
body.nav-collapsed .sidebar a { padding: 2px 0; justify-content: center; }
body.nav-collapsed .sidebar a .label, body.nav-collapsed .sidebar a .count, body.nav-collapsed .sidebar a .stage { display: none; }
body.nav-collapsed .sidebar a::before { content: attr(data-abbr); font-size: 11px; font-weight: 600; }
body.nav-collapsed .sidebar .zone-title { justify-content: center; padding: 6px 0 2px; }
body.nav-collapsed .sidebar .zone-title .full { display: none; }
body.nav-collapsed .sidebar .zone-title .abbr { display: inline; }
body.nav-collapsed .sidebar .zone-title .chev, body.nav-collapsed .sidebar .future { display: none; }

.main { grid-row: 2; min-width: 0; padding: 12px 16px 32px; }

/* --- Benzi globale: previzualizare „Vezi ca”, exemplu, blocaj global ---------------------------------------- */
.banner { display: flex; gap: 8px; align-items: baseline; margin: 0 0 var(--spatiu); padding: 6px 10px; border: 1px solid var(--bordura); border-left-width: 4px; background: var(--fundal); }
.banner strong { white-space: nowrap; }
.banner--preview { border-left-color: var(--atentie); background: var(--atentie-fundal); }
.banner--example { border-left-color: var(--neutru); background: repeating-linear-gradient(135deg, var(--neutru-fundal) 0 8px, #fff 8px 16px); }
.banner--example strong { padding: 0 6px; border: 1px solid var(--neutru); color: var(--neutru); letter-spacing: .06em; }
.banner--block { border-left-color: var(--blocare); background: var(--blocare-fundal); }
.banner--official { border-left-color: var(--structura); }
.example-tag { display: inline-block; padding: 0 5px; border: 1px solid var(--neutru); color: var(--neutru); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; vertical-align: 1px; }

/* --- Antetul paginii / al fișei ------------------------------------------------------------------------------- */
.crumbs { margin: 0 0 4px; font-size: 12px; color: var(--text-secundar); }
.crumbs a { color: var(--text-secundar); }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 var(--spatiu); }
.page-head .meta { color: var(--text-secundar); font-size: 12px; }
.page-head .tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.record-head { position: sticky; top: var(--bara); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  min-height: 56px; margin: 0 -16px var(--spatiu); padding: 8px 16px; background: var(--fundal); border-bottom: 1px solid var(--bordura); }
.record-head h1 { display: flex; align-items: baseline; gap: 10px; }
.record-head .facts { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; font-size: 12px; }
.record-head .facts div { display: flex; gap: 4px; }
.record-head .facts dt { color: var(--text-secundar); }
.record-head .facts dd { margin: 0; font-weight: 500; }

/* Bara de proces: etapele fluxului, cu cea curentă. */
.process { display: flex; flex-wrap: wrap; margin: 0 0 8px; padding: 0; list-style: none; font-size: 12px; border: 1px solid var(--bordura); background: var(--fundal); }
.process li { position: relative; padding: 4px 14px 4px 10px; color: var(--text-secundar); border-right: 1px solid var(--bordura-fina); }
.process li.done { color: var(--text); }
.process li.done::before { content: "✓ "; color: var(--bine); font-weight: 600; }
.process li.current { color: #fff; background: var(--accent); font-weight: 500; }
.process li small { display: block; font-size: 11px; opacity: .85; }

/* Bara de acțiuni: ordinea în care se folosesc; cele indisponibile au motivul (BR-UI-071). */
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }

/* Lista „Atenție” (calculată pe server). */
.attention { margin: 0 0 var(--spatiu); padding: 6px 10px; border: 1px solid var(--bordura); border-left: 4px solid var(--atentie); background: var(--fundal); }
.attention h2 { margin-bottom: 2px; color: var(--atentie); }
.attention ul { margin: 0; padding-left: 18px; }
.attention li { margin: 1px 0; }
.attention li.blocking::marker { color: var(--blocare); }

/* --- Tab-uri (în ordinea muncii, cu numărul de rânduri; Alt+1…9, Alt+0) --------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--bordura); }
.tabs a, .tabs button { display: inline-flex; gap: 4px; align-items: baseline; height: 30px; padding: 6px 12px; border: 1px solid transparent; border-bottom: 0;
  margin-bottom: -1px; background: none; color: var(--accent); font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.tabs a:hover, .tabs button:hover { background: var(--fundal-sectiune); }
.tabs [aria-selected="true"] { background: var(--fundal); border-color: var(--bordura); color: var(--text); font-weight: 600; }
.tabs .n { color: var(--text-secundar); font-weight: 400; font-size: 11.5px; }
.tabs .key { color: var(--text-secundar); font-size: 10.5px; }
.tab-panel { padding: var(--spatiu); border: 1px solid var(--bordura); border-top: 0; background: var(--fundal); }

/* --- Secțiuni și câmpuri (etichete la stânga, 168 px; 2–3 coloane) ----------------------------------------------- */
.section { margin: 0 0 var(--spatiu); border: 1px solid var(--bordura); background: var(--fundal); }
.section > header { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 8px; border-bottom: 1px solid var(--bordura); background: var(--fundal-sectiune); }
.section > header .tools { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 12px; }
.section > .body { padding: 8px; }
.section > table.grid { border: 0; }
.section.flush > .body { padding: 0; }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields.one { grid-template-columns: 1fr; }
.fields > div { display: grid; grid-template-columns: var(--eticheta-latime) 1fr; align-items: baseline; gap: 8px; min-height: var(--camp); padding: 3px 0; border-bottom: 1px solid var(--bordura-fina); }
.fields dt, .fields label.lbl { font-size: var(--eticheta); color: var(--text-secundar); }
.fields dd { margin: 0; overflow-wrap: anywhere; }
.fields .wide { grid-column: 1 / -1; }
.memo { max-height: calc(12 * 1.45em); overflow-y: auto; white-space: pre-line; }
.calc::after { content: "calculat"; margin-left: 6px; padding: 0 4px; border: 1px solid var(--bordura); color: var(--text-secundar); font-size: 10.5px; }
.secure { font-family: var(--mono); color: var(--text-secundar); letter-spacing: .1em; }

/* Banda de indicatori: celule lipite, eticheta deasupra, valoarea dedesubt — nu carduri. */
.indicators { display: flex; flex-wrap: wrap; margin: 0 0 var(--spatiu); border: 1px solid var(--bordura); background: var(--fundal); }
.indicators > div { flex: 1 1 110px; padding: 4px 10px; border-right: 1px solid var(--bordura-fina); }
.indicators > div:last-child { border-right: 0; }
.indicators dt { font-size: 11px; color: var(--text-secundar); white-space: nowrap; }
.indicators dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Liste: tabel dens, antet fix, sortare, filtre ------------------------------------------------------------ */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; margin: 0 0 6px; border: 1px solid var(--bordura); background: var(--fundal-sectiune); font-size: 12px; }
.filters label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secundar); }
.filters .count { margin-left: auto; color: var(--text-secundar); }
.saved-filters { display: inline-flex; border: 1px solid var(--bordura); }
.saved-filters a { padding: 3px 8px; font-size: 12px; text-decoration: none; border-right: 1px solid var(--bordura-fina); background: var(--fundal); }
.saved-filters a:last-child { border-right: 0; }
.saved-filters a[aria-current="true"] { background: var(--accent); color: #fff; }

.table-wrap { overflow-x: auto; border: 1px solid var(--bordura); background: var(--fundal); }
table.grid { width: 100%; border-collapse: collapse; font-size: var(--tabel); background: var(--fundal); }
table.grid th, table.grid td { height: var(--rand); padding: 3px 8px; border-bottom: 1px solid var(--bordura-fina); border-right: 1px solid var(--bordura-fina); text-align: left; vertical-align: middle; }
table.grid th:last-child, table.grid td:last-child { border-right: 0; }
table.grid thead th { position: sticky; top: 0; z-index: 1; background: var(--fundal-antet-grila); border-bottom: 1px solid var(--bordura); font-weight: 600; color: var(--structura); white-space: nowrap; }
.record-page table.grid thead th { top: 0; }
table.grid th a.sort { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; }
table.grid th a.sort::after { content: "↕"; color: var(--text-secundar); font-weight: 400; }
table.grid th[aria-sort="ascending"] a.sort::after { content: "▲"; color: var(--accent); font-size: 9px; }
table.grid th[aria-sort="descending"] a.sort::after { content: "▼"; color: var(--accent); font-size: 9px; }
table.grid tbody tr:hover td { background: #F4F7FA; }
table.grid tbody tr:focus-within td, table.grid tbody tr.kbd-current td { background: #EAF0F7; }
table.grid tbody tr.kbd-current td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.grid td.wrap { white-space: normal; min-width: 220px; }
table.grid td.actions-cell { width: 1%; white-space: nowrap; }
/* Listele mari (SCR-…-01): antetele și termenele se rup pe două rânduri, ca grila să încapă la 1280–1366 px. */
table.grid.list thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
table.grid.list .due .diff { display: block; margin-left: 0; white-space: nowrap; }
table.grid.list .pill { white-space: normal; }
table.grid tr.cancelled td { color: var(--text-secundar); text-decoration: line-through; }
table.grid tr.group td, table.grid tr.group th { background: var(--fundal-sectiune); font-weight: 600; color: var(--structura); }
table.grid caption { caption-side: top; text-align: left; padding: 0 0 4px; }
.pager { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12px; }
.pager .size { margin-left: auto; }

/* --- Pastila de stare: punct colorat + textul stării (textul e mereu scris) ----------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; }
.pill::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neutru); }
.pill--bine::before { background: var(--bine); }
.pill--atentie::before { background: var(--atentie); }
.pill--blocare::before { background: var(--blocare); }
.pill--neutru::before { background: var(--neutru); }
.pill--blocare { color: var(--blocare); font-weight: 500; }

/* Termenul: data + diferența în zile, colorată (BR-UI-010/011). */
.due { white-space: nowrap; font-variant-numeric: tabular-nums; }
.due .diff { margin-left: 6px; font-size: 11.5px; font-weight: 500; }
.due--over .diff { color: var(--blocare); }
.due--today .diff { color: var(--blocare); }
.due--soon .diff { color: var(--atentie); }
.due--ok .diff { color: var(--text-secundar); font-weight: 400; }
.due--none { color: var(--text-secundar); }

/* --- Banda de 14 zile (SCR-CORE-01) ------------------------------------------------------------------------- */
.band14 { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); margin: 0 0 var(--spatiu); border: 1px solid var(--bordura); background: var(--fundal); }
.band14 a, .band14 span.day { display: block; padding: 3px 6px; border-right: 1px solid var(--bordura-fina); color: var(--text); text-decoration: none; font-size: 11.5px; }
.band14 > :last-child { border-right: 0; }
.band14 .d { display: block; color: var(--text-secundar); white-space: nowrap; }
.band14 .marks { display: block; height: 10px; margin-top: 2px; letter-spacing: 1px; color: var(--accent); font-size: 9px; line-height: 10px; }
.band14 .weekend { background: var(--fundal-sectiune); }
.band14 .today { box-shadow: inset 0 -2px 0 var(--accent); font-weight: 600; }
.band14 .has-over .marks { color: var(--blocare); }
.band14 .past { background: var(--blocare-fundal); }

/* --- Butoane și formulare ------------------------------------------------------------------------------------ */
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--bordura);
  background: var(--fundal); color: var(--text); font: inherit; font-size: 12.5px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn--primary { background: var(--structura); border-color: var(--structura); color: #fff; }
.btn--primary:hover { background: var(--accent); color: #fff; }
.btn[disabled], .btn[aria-disabled="true"] { color: #8693A1; background: var(--fundal-sectiune); border-color: var(--bordura-fina); cursor: not-allowed; }
.btn .kbd { margin-left: 2px; }
kbd, .kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--bordura); border-bottom-width: 2px; background: var(--fundal); color: var(--text-secundar); font-size: 11px; text-align: center; line-height: 16px; }
.btn--primary .kbd { color: var(--text-secundar); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.field { display: grid; grid-template-columns: var(--eticheta-latime) 1fr; align-items: center; gap: 8px; min-height: 34px; padding: 3px 0; }
.field > label { font-size: var(--eticheta); color: var(--text-secundar); }
.field .req::after { content: " *"; color: var(--blocare); }
.field .help { grid-column: 2; font-size: 11.5px; color: var(--text-secundar); margin-top: -2px; }
.field .error { grid-column: 2; font-size: 11.5px; color: var(--blocare); margin-top: -2px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--blocare); }
input[type="text"], input[type="search"], input[type="date"], input[type="number"], input[type="email"], select, textarea {
  height: var(--camp); padding: 0 6px; border: 1px solid var(--bordura); background: var(--fundal); color: var(--text); font: inherit; font-size: 12.5px; max-width: 100%; }
textarea { height: auto; min-height: 56px; padding: 4px 6px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
input[readonly] { background: var(--fundal-sectiune); }
.check { display: inline-flex; align-items: center; gap: 5px; }
.choice-group { display: inline-flex; margin: 0; padding: 0; min-width: 0; border: 1px solid var(--bordura); }
.choice-group label { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 8px; border-right: 1px solid var(--bordura-fina); cursor: pointer; font-size: 12px; }
.choice-group label:last-child { border-right: 0; }
.choice-group input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-group input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-group label:has(input:checked) { background: var(--structura); color: #fff; font-weight: 600; }
.choice-group label.c-n:has(input:checked) { background: var(--blocare); }
.choice-group label.c-q:has(input:checked) { background: var(--atentie); }
.choice-group label.c-a:has(input:checked) { background: var(--neutru); }

/* --- Mesaje (BR-UI-070): blocare / avertizare / informare; codul regulii în față ------------------------------ */
.msg { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--bordura); border-left-width: 4px; background: var(--fundal); }
.msg .k { font-weight: 600; white-space: nowrap; }
.msg .rule { font-family: var(--mono); font-size: 11.5px; }
.msg--blocare { border-left-color: var(--blocare); background: var(--blocare-fundal); }
.msg--blocare .k { color: var(--blocare); }
.msg--atentie { border-left-color: var(--atentie); background: var(--atentie-fundal); }
.msg--atentie .k { color: var(--atentie); }
.msg--info { border-left-color: var(--neutru); }
.msg--bine { border-left-color: var(--bine); background: var(--bine-fundal); }
.msg--bine .k { color: var(--bine); }

/* --- Stări goale, încărcare, eroare (BR-UI-013: trei stări distincte) ---------------------------------------- */
.state { padding: 10px; color: var(--text-secundar); font-size: 12.5px; }
.state--error { color: var(--blocare); background: var(--blocare-fundal); border-left: 4px solid var(--blocare); }
.state--loading::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--bordura); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.htmx-request .table-wrap { opacity: .55; transition: opacity .3s .3s; }

/* --- Pagina de start ---------------------------------------------------------------------------------------- */
.home-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 8px; }
.home-head .tools { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 12px; }
.blocks { display: grid; grid-template-columns: 1fr; gap: 0; }
.blocks > .section { min-width: 0; }
.blocks-title { margin: 4px 0 6px; }

/* Lista „De făcut azi”: lățimi fixe, textul pe cel mult 2 rânduri (întregul în title), Acțiune mereu întreagă. */
table.grid.items { table-layout: fixed; }
table.grid.items col.c-term { width: 186px; }
table.grid.items col.c-op { width: 21%; }
table.grid.items col.c-obj { width: 168px; }
table.grid.items col.c-role { width: 124px; }
table.grid.items col.c-act { width: 112px; }
table.grid.items td { white-space: normal; vertical-align: top; overflow-wrap: anywhere; }
table.grid.items td.actions-cell { width: auto; text-align: right; }
table.grid.items .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
table.grid.items .why { display: block; font-size: 11.5px; color: var(--text-secundar); }
table.grid.items .due { white-space: nowrap; }
details.section > summary { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 8px; background: var(--fundal-sectiune); cursor: pointer; list-style: none; border-bottom: 1px solid var(--bordura); }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before { content: "▸"; color: var(--text-secundar); font-size: 10px; }
details.section[open] > summary::before { content: "▾"; }
details.section > summary .n { color: var(--text-secundar); font-weight: 400; }
details.section > summary .tools { margin-left: auto; font-size: 12px; }

/* --- Căutarea globală (rezultate) --------------------------------------------------------------------------- */
.results li { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--bordura-fina); }
.results { margin: 0; padding: 0; list-style: none; background: var(--fundal); border: 1px solid var(--bordura); }
.results .type { color: var(--entitate); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }

/* --- Checklist în modul teren (SCR-INS-05; tabletă 1280×800) ------------------------------------------------ */
.checklist td.req { min-width: 280px; white-space: normal; }
.checklist td.ref { color: var(--text-secundar); font-size: 11.5px; white-space: normal; min-width: 150px; }
.checklist .progress { display: inline-block; width: 120px; height: 8px; border: 1px solid var(--bordura); background: var(--fundal); vertical-align: middle; }
.checklist .progress span { display: block; height: 100%; background: var(--accent); }
.keys-legend { margin: 6px 0 0; font-size: 12px; color: var(--text-secundar); }

/* --- Dialog (scurtăturile, confirmări) ---------------------------------------------------------------------- */
dialog { max-width: 640px; width: calc(100% - 32px); padding: 0; border: 1px solid var(--bordura); box-shadow: 0 8px 32px rgba(22,41,63,.25); }
dialog::backdrop { background: rgba(22,41,63,.35); }
dialog header { display: flex; align-items: center; padding: 6px 10px; background: var(--structura); color: #fff; }
dialog header h2 { color: #fff; }
dialog header button { margin-left: auto; color: #fff; border: 1px solid rgba(255,255,255,.5); background: transparent; height: 24px; font: inherit; font-size: 12px; cursor: pointer; }
dialog .body { padding: 10px; max-height: 70vh; overflow-y: auto; }
dialog table.grid td:first-child { white-space: nowrap; }

/* --- Pagina de stil (/stil/) ---------------------------------------------------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; border: 1px solid var(--bordura); background: var(--fundal); }
.swatches div { padding: 6px 8px; border-right: 1px solid var(--bordura-fina); border-bottom: 1px solid var(--bordura-fina); font-size: 11.5px; }
.swatches i { display: block; height: 28px; margin-bottom: 4px; border: 1px solid var(--bordura-fina); }
.specimen { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }

/* --- Tabletă (inspectorul pe teren) și ecrane înguste: meniul devine panou; ținte de atingere ≥ 40 px -------- */
@media (max-width: 1365px) {
  .fields.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; }
  .brand { width: auto; }
  .nav-toggle { display: inline-flex; }
  .sidebar { position: fixed; top: var(--bara); left: 0; z-index: 40; width: 280px; transform: translateX(-100%); transition: transform .15s; box-shadow: 4px 0 16px rgba(0,0,0,.25); }
  body.nav-open .sidebar { transform: none; }
  body.nav-collapsed .shell { grid-template-columns: 1fr; }
  .main { grid-column: 1; }
  .usermenu .who { max-width: 120px; }
  .counter .lbl, .global-search .hint { display: none; }
  .blocks { grid-template-columns: 1fr; }
  .fields, .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fields > div, .field { grid-template-columns: 1fr; gap: 0; }
  .field .help, .field .error { grid-column: 1; }
  .topbar .company .name { display: none; }
  .viewas .lbl { display: none; }
}
@media (pointer: coarse) {
  table.grid th, table.grid td { height: 40px; }
  .btn, button.btn, input[type="text"], input[type="search"], select { min-height: 40px; }
  .choice-group label { min-width: 48px; height: 44px; font-size: 14px; }
  .sidebar a { min-height: 40px; }
  .tabs a, .tabs button { height: 40px; padding-top: 10px; }
}

/* --- Tipărire (BR-UI-100: extras, nu document SMC controlat) ----------------------------------------------- */
@media print {
  .topbar, .sidebar, .actions, .filters, .pager, .skip-link, .banner--preview { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  .record-head { position: static; }
  body { background: #fff; }
  .main::after { content: "Extras din BIOINSPECT OS — nu este document SMC controlat."; display: block; margin-top: 16px; font-size: 10px; color: #555; }
}

/* --- Autentificarea --------------------------------------------------------------------------------------- */
.login { max-width: 520px; margin: 12vh auto 0; }
.login h1 { color: var(--structura); }