-ul care ramane sursa de adevar a pastilei: ascuns, dar nu scos din formular. */
.hs-fbtn__src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Butonul „＋ Filtre" si grupul pe care il desface. */
.hs-toolbar__more {
display: inline-flex;
align-items: center;
gap: .3rem;
height: 30px;
padding: 0 .6rem;
border: 1px dashed #cfd6df;
border-radius: 999px;
background: transparent;
color: #6b7684;
font-size: 12px;
font-weight: 600;
}
.hs-toolbar__more:hover { border-color: var(--hs-primary, #134a6d); color: var(--hs-primary, #134a6d); }
.hs-toolbar__more .bi { font-size: 10px; }
.hs-toolbar.is-expanded .hs-toolbar__more .bi-plus-lg { transform: rotate(45deg); }
.hs-fbtn__badge {
min-width: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--hs-primary, #134a6d);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
}
/* Linia care desparte filtrele mereu-vizibile de butonul „＋ Filtre". */
.hs-toolbar__sep {
flex: 0 0 auto;
width: 1px;
height: 18px;
margin: 0 .2rem;
background: #e3e8ee;
}
/* `display: contents` — grupurile din interior intra direct in flexul barii, deci se aseaza si
se rup pe randuri la fel ca celelalte pastile, in loc sa formeze un bloc separat care sare pe
rand nou. */
.hs-toolbar__advanced { display: none; }
.hs-toolbar.is-expanded .hs-toolbar__advanced { display: contents; }
/* Filtrele rare, grupate pe subiect (Aparat / Locatie / Fisa). Grupul e o singura unitate in
flex: pastilele lui nu se despart pe randuri diferite de eticheta lor. */
.hs-fgroup {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem;
padding-left: .55rem;
border-left: 1px solid #eaeef3;
}
.hs-fgroup__lbl {
color: #98a2b3;
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 767.98px) {
.hs-toolbar__search { max-width: none; }
.hs-toolbar__pills { gap: .35rem; }
/* Pe latimi mici bara se rupe oricum pe randuri: linia si chenarul de grup ar cadea la
inceput de rand si ar arata ca o taietura fara sens. */
.hs-toolbar__sep { display: none; }
.hs-fgroup { padding-left: 0; border-left: 0; }
.hs-fgroup__lbl { width: 100%; }
}
/* ===== Lista enterprise: chrome-ul DataTables (.hs-list) =====
ATENTIE la selectoare: integrarea `datatables.net-bs5` suprascrie clasele de layout
ale DataTables cu clase Bootstrap — randul devine `row mt-2 justify-content-between`,
celulele `col-md-auto d-md-flex ...`. `.dt-layout-row` / `.dt-layout-cell` NU exista
in DOM. Singurele ancore sigure sunt `.dt-layout-table` (randul tabelului) si
`.dt-layout-start` / `.dt-layout-end` (celulele barei de jos).
In plus, CSS-ul temei bs5 (dataTables.bootstrap5.min.css) nu e importat nicaieri,
deci nu ne bazam pe el: tot ce trebuie sa arate bine scriem aici. */
.hs-list { border-radius: 0 0 8px 8px; overflow: hidden; }
.hs-list .dt-container { font-size: 13px; }
/* Randul tabelului: fara grila Bootstrap (gutter + marginile negative ale `.row`, care
il faceau mai lat decat cardul) si fara `d-md-flex` pe celula, care ar face tabelul
flex item. */
.hs-list .dt-container > .dt-layout-table { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
.hs-list .dt-container > .dt-layout-table > * {
display: block;
padding: 0;
overflow-x: auto; /* tabelul scroleaza in randul lui; bara de jos ramane pe loc */
}
.hs-list table.table-enterprise { margin-bottom: 0; }
.hs-list table.table-enterprise thead th { background: #fff; padding-left: .9rem; padding-right: .9rem; }
.hs-list table.table-enterprise tbody td { padding-left: .9rem; padding-right: .9rem; }
.hs-list table.table-enterprise tbody tr:first-child > td { border-top: 0; }
/* Ultimul rand nu mai pune border-bottom (Bootstrap il adauga pe fiecare celula):
altfel, impreuna cu border-top-ul barei de jos, iese o linie dubla lipita de tabel. */
.hs-list table.table-enterprise > tbody > tr:last-child > * { border-bottom: 0; }
/* Bara de jos = randul de dupa cel cu tabelul. Info la stanga, marimea paginii si
paginarea la dreapta. Toata spatierea vine din `gap`; marginile proprii ale
feature-urilor sunt anulate. Controalele au aceeasi inaltime (--hs-ctl). */
.hs-list .dt-container > .dt-layout-table ~ div {
--hs-ctl: 30px;
--bs-gutter-x: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .5rem 1rem;
margin-left: 0;
margin-right: 0;
padding: .9rem 1rem;
border-top: 1px solid var(--hs-line, #e6e9ec);
background: #f7f9fc;
border-radius: 0 0 8px 8px;
}
.hs-list .dt-container > .dt-layout-table ~ div > .dt-layout-start,
.hs-list .dt-container > .dt-layout-table ~ div > .dt-layout-end {
display: flex;
align-items: center;
gap: 1rem;
margin: 0;
padding: 0;
width: auto;
flex: 0 0 auto;
}
.hs-list .dt-container > .dt-layout-table ~ div > .dt-layout-end { margin-left: auto; }
.hs-list .dt-container > .dt-layout-table ~ div .dt-layout-start > *,
.hs-list .dt-container > .dt-layout-table ~ div .dt-layout-end > * { margin: 0; }
.hs-list .dt-info { color: #8a929b; font-size: 12px; padding: 0; line-height: var(--hs-ctl, 30px); }
.hs-list .dt-length { font-size: 12px; color: #8a929b; }
.hs-list .dt-length label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.hs-list .dt-length select.form-select {
margin: 0;
height: var(--hs-ctl, 30px);
padding: 0 1.6rem 0 .55rem;
font-size: 12px;
border-color: #dbe3ec;
}
/* Paginare: pastile discrete, pagina curenta in navy (culoarea de brand). */
.hs-list .dt-paging { margin: 0; }
.hs-list .dt-paging ul.pagination { margin: 0; padding: 0; gap: 3px; }
.hs-list .dt-paging .page-link {
min-width: var(--hs-ctl, 30px);
height: var(--hs-ctl, 30px);
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e8ef;
border-radius: 8px;
color: #52606d;
background: #fff;
font-size: 13px;
font-weight: 600;
padding: 0 .45rem;
box-shadow: none;
}
.hs-list .dt-paging .page-link:hover { background: #eef3f8; color: var(--hs-primary, #134a6d); border-color: #cfdae6; }
.hs-list .dt-paging .page-item.active .page-link {
background: var(--hs-primary, #134a6d);
border-color: var(--hs-primary, #134a6d);
color: #fff;
}
.hs-list .dt-paging .page-item.disabled .page-link { color: #c4c9d0; background: #fff; border-color: #eef1f4; }
/* Pe ecrane inguste bara de jos se aseaza pe doua randuri, centrata. */
@media (max-width: 575.98px) {
.hs-list .dt-container > .dt-layout-table ~ div { justify-content: center; }
.hs-list .dt-container > .dt-layout-table ~ div > .dt-layout-start,
.hs-list .dt-container > .dt-layout-table ~ div > .dt-layout-end {
margin-left: 0;
width: 100%;
justify-content: center;
}
}
/* Varianta fara DataTables: tabel randat server-side intr-un card (ex. fisele
clientului pe /customer/view). Doar scroll orizontal + colturile de jos. */
.hs-list--static { overflow-x: auto; }
/* ===== Header de inregistrare (.hs-record) — pagini de detaliu tip ERP =====
Identitate + actiuni pe primul rand, datele de contact ca „chips" pe al doilea.
Inlocuieste headerul generic de pagina pe /customer/view. */
.hs-record { overflow: hidden; }
.hs-record__main { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem; }
.hs-record__avatar {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #1a5a82 0%, #0e3a58 100%);
color: #fff;
font-size: 20px;
font-weight: 700;
letter-spacing: .02em;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
box-shadow: 0 6px 16px rgba(15, 58, 88, .25);
}
.hs-record__id { min-width: 0; flex: 1 1 auto; }
.hs-record__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hs-record__back { color: #98a2b3; text-decoration: none; }
.hs-record__back:hover { color: var(--hs-primary, #134a6d); }
.hs-record__name {
font-size: 1.3rem;
font-weight: 700;
color: #0f1b34;
line-height: 1.2;
margin: .15rem 0 .4rem;
word-break: break-word;
}
.hs-record__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hs-record__since { font-size: 12px; color: #98a2b3; }
.hs-record__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.hs-record__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem 1.4rem;
padding: .7rem 1.25rem;
border-top: 1px solid var(--hs-line-soft, #eef1f4);
background: #fbfcfe;
}
.hs-meta-chip { display: inline-flex; align-items: center; gap: .45rem; font-size: 13px; color: #52606d; min-width: 0; }
.hs-meta-chip i { color: #98a2b3; font-size: 13px; flex: 0 0 auto; }
.hs-meta-chip a { color: #34405a; text-decoration: none; overflow-wrap: anywhere; }
.hs-meta-chip a:hover { color: var(--hs-primary, #134a6d); text-decoration: underline; }
.hs-meta-chip--muted { color: #adb5bd; }
/* ---- Varianta pe navy a headerului de inregistrare ----
Cardul de identitate al clientului poarta culoarea de brand: pe o pagina cu multe carduri
albe, el devine „capul" inregistrarii, nu inca un panou. Fundalul inchis obliga la
inversarea TUTUROR culorilor dinauntru — nume, linkuri, jetoane, butoane, iconite — altfel
raman gri-pe-navy, sub pragul de contrast. Perechile de mai jos trec AA pe #134a6d.
Scopat pe `.hs-record`, deci celelalte `.hs-card` din pagina raman albe. */
.hs-card.hs-record {
background: linear-gradient(180deg, var(--hs-navy-1) 0%, var(--hs-navy-2) 100%);
border-color: var(--hs-navy-line);
box-shadow: 0 6px 18px rgba(15, 58, 88, .22);
}
.hs-record .hs-record__name { color: var(--hs-on-navy); }
.hs-record .hs-record__back { color: var(--hs-on-navy-soft); }
.hs-record .hs-record__back:hover { color: var(--hs-on-navy); }
.hs-record .hs-record__since { color: var(--hs-on-navy-soft); }
.hs-record .hs-record__since i { color: var(--hs-on-navy-faint); }
/* Emblema cu initialele: pe navy, gradientul ei navy dispare — devine o placa translucida. */
.hs-record .hs-record__avatar {
background: var(--hs-on-navy-fill);
border: 1px solid var(--hs-on-navy-line);
box-shadow: none;
}
/* Banda de contact: acelasi navy, coborat cu un strat de negru translucid, ca sa se
citeasca drept a doua zona a cardului. */
.hs-record .hs-record__chips {
background: var(--hs-navy-sunken);
border-top: 1px solid var(--hs-on-navy-line);
}
.hs-record .hs-meta-chip { color: var(--hs-on-navy-soft); }
.hs-record .hs-meta-chip i { color: var(--hs-on-navy-faint); }
.hs-record .hs-meta-chip a { color: var(--hs-on-navy); }
.hs-record .hs-meta-chip a:hover { color: var(--hs-on-navy); text-decoration: underline; }
.hs-record .hs-meta-chip--muted { color: var(--hs-on-navy-faint); }
.hs-record .hs-copy { color: var(--hs-on-navy-faint); }
.hs-record .hs-copy:hover { color: var(--hs-on-navy); }
.hs-record .hs-copy.is-copied { color: #7ee2b8; }
.hs-record .hs-copy:focus-visible { outline-color: #fff; }
/* Jetoanele de stare: pe fundal inchis, variantele „soft" (10% culoare pe alb) devin noroi.
Semnalul ramane — atentionarea e chihlimbar, restul neutru — dar pe tonuri deschise. */
.hs-record .hs-pill--info,
.hs-record .hs-pill--ok,
.hs-record .hs-pill--mute {
background: var(--hs-on-navy-fill);
color: var(--hs-on-navy);
border-color: var(--hs-on-navy-line);
}
.hs-record .hs-pill--warn {
background: rgba(255, 193, 7, .2);
color: #ffd88a;
border-color: rgba(255, 193, 7, .38);
}
.hs-record .hs-pill--danger {
background: rgba(255, 138, 128, .18);
color: #ffb4ac;
border-color: rgba(255, 138, 128, .35);
}
/* Actiunile: conturul gri nu se mai vede pe navy, iar butonul principal (navy pe navy) ar
disparea — se inverseaza in alb plin, care ramane actiunea cea mai vizibila din pagina. */
.hs-record .btn-outline-secondary {
--bs-btn-color: var(--hs-on-navy);
--bs-btn-border-color: var(--hs-on-navy-line);
--bs-btn-hover-color: var(--hs-on-navy);
--bs-btn-hover-bg: var(--hs-on-navy-fill);
--bs-btn-hover-border-color: rgba(255, 255, 255, .6);
--bs-btn-active-color: var(--hs-on-navy);
--bs-btn-active-bg: var(--hs-on-navy-fill-2);
--bs-btn-active-border-color: rgba(255, 255, 255, .6);
}
.hs-record .btn.pr-btn-primary {
--bs-btn-color: var(--hs-primary);
--bs-btn-bg: #fff;
--bs-btn-border-color: #fff;
--bs-btn-hover-color: var(--hs-primary-dark);
--bs-btn-hover-bg: #e8f0f7;
--bs-btn-hover-border-color: #e8f0f7;
--bs-btn-active-color: var(--hs-primary-dark);
--bs-btn-active-bg: #dbe7f1;
--bs-btn-active-border-color: #dbe7f1;
}
/* ===== Tile-uri KPI (.hs-stats) ===== */
.hs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hs-stat {
display: flex;
align-items: center;
gap: .75rem;
background: #fff;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
padding: .8rem 1rem;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
min-width: 0;
}
.hs-stat__icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex: 0 0 auto;
background: #eef3f8;
color: var(--hs-primary, #134a6d);
}
.hs-stat__icon--warn { background: #fff4e5; color: #b76e00; }
.hs-stat__icon--mute { background: #f1f3f5; color: #8a929b; }
.hs-stat__val { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: #1f2937; line-height: 1.15; }
.hs-stat__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; }
@media (max-width: 991.98px) { .hs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
.hs-stats { grid-template-columns: 1fr; }
.hs-record__main { flex-wrap: wrap; }
.hs-record__actions { margin-left: 0; width: 100%; }
}
/* Contoare care se încarcă lazy: cât timp cererea e în aer, valorile pulsează discret,
ca „—" să nu fie citit drept „zero". */
.hs-stats.is-loading .hs-stat__val {
color: #c8d1dc;
animation: hs-stat-pulse 1.1s ease-in-out infinite;
}
@keyframes hs-stat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
.hs-stats.is-loading .hs-stat__val { animation: none; }
}
/* Tile KPI folosit ca filtru (ex. /part-queue/orders: Deschise / Cu termen depășit / …) */
.hs-stat--btn { cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.hs-stat--btn:hover { border-color: #c7d4e2; box-shadow: 0 2px 6px rgba(16, 24, 40, .07); }
.hs-stat--btn.is-active {
border-color: var(--hs-primary, #134a6d);
box-shadow: 0 0 0 1px var(--hs-primary, #134a6d) inset;
background: #f7fafd;
}
.hs-stat--btn.is-active .hs-stat__lbl { color: var(--hs-primary, #134a6d); }
/* ===== Lista de comenzi la furnizor (/part-queue/orders) ===== */
/* Sub-rand discret sub valoarea principala a unei celule (observație, „+N alte piese"). */
.hs-sub { font-size: 12px; color: #98a2b3; line-height: 1.3; }
.hs-parts { max-width: 320px; font-size: 13px; line-height: 1.35; }
/* Coloana de expand + butonul ei */
.hs-col-toggle { width: 34px; padding-right: 0 !important; }
.hs-row-toggle {
border: 0; background: transparent; padding: 2px 4px; line-height: 1;
color: #98a2b3; border-radius: 6px; transition: color .15s ease, background .15s ease;
}
.hs-row-toggle:hover { color: var(--hs-primary, #134a6d); background: #eef3f8; }
.hs-row-toggle i { transition: transform .15s ease; display: inline-block; }
tr.is-expanded .hs-row-toggle i { transform: rotate(90deg); }
tr.is-expanded > td { background: #f7fafd; }
/* Sub-randul cu liniile comenzii */
.hs-order-details { padding: .6rem .9rem; background: #f7fafd; border-left: 3px solid var(--hs-primary, #134a6d); }
.hs-order-details table { background: transparent; }
.hs-order-details thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; border-bottom-color: #e3e9f0; }
.hs-order-details tbody td { font-size: 13px; border-bottom-color: #edf1f6; }
.hs-order-note { margin-top: .5rem; font-size: 12px; color: #52606d; }
/* ===== Card cu taburi (.hs-tabs) — ex. /customer/view: detalii client / fise tehnice =====
main.css are un `.tab-content` global cu borduri groase si padding 30px, gandit pentru
alt tip de tab-uri; il neutralizam aici, in interiorul cardului. */
.hs-tabs > .card-header { border-bottom: 1px solid var(--hs-line-soft, #eef1f4); }
.hs-tabs .tab-content { background: transparent; border: 0; padding: 0; line-height: inherit; }
.hs-tabs__nav { border-bottom: 0; padding: 0 .5rem; gap: .25rem; flex-wrap: nowrap; }
.hs-tabs__nav .nav-link {
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent;
color: #6b7885;
font-size: 13px;
font-weight: 600;
padding: .7rem .9rem;
white-space: nowrap;
}
.hs-tabs__nav .nav-link:hover { color: var(--hs-primary, #134a6d); background: transparent; }
.hs-tabs__nav .nav-link.active {
color: var(--hs-primary, #134a6d);
background: transparent;
border-bottom-color: var(--hs-primary, #134a6d);
}
.hs-tabs__nav .nav-link.active .hs-count { background: #e3edf5; color: var(--hs-primary, #134a6d); }
/* Padding-ul unui panou de tab. Se foloseste si in afara lui `.hs-tabs` — ex. fisa
clientului, care are navigarea in rail lateral (.hs-rec), nu in bara de sus. */
.hs-tabs__pane { padding: 1.15rem 1.25rem; }
/* Contor discret langa titlul unui card (nr. de inregistrari din lista de dedesubt). */
.hs-count {
display: inline-block;
min-width: 20px;
margin-left: .35rem;
padding: 0 6px;
border-radius: 999px;
background: #eef2f7;
color: #52606d;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
vertical-align: middle;
}
/* Grid pentru campuri scurte de adresa (Nr / Bl / Sc / Et / Ap / Interfon). */
.hs-grid-mini { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 575.98px) { .hs-grid-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hs-grid-mini .form-label { font-size: 11px; }
.hs-grid-mini .form-control { padding-left: .5rem; padding-right: .5rem; }
/* Text ajutator sub un grup de campuri (reguli de validare, evidenta creare/modificare). */
.hs-form-hint { font-size: 12px; color: #98a2b3; margin: -.35rem 0 1rem; }
/* Bara de salvare a formularului din tab: lipita jos, ca butonul sa fie mereu la vedere
pe formulare lungi. Marginile negative o intind pe toata latimea cardului. */
.hs-formbar {
position: sticky;
bottom: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .75rem 1rem;
/* Marginile negative intind bara pana la marginile cardului. Padding-ul containerului
difera (.card-body = 1rem, .hs-tabs__pane = 1.25rem/1.15rem), deci il tinem in
variabile si suprascriem doar acolo unde e cazul. */
--hs-pad-x: 1rem;
--hs-pad-b: 1rem;
margin: 1.25rem calc(-1 * var(--hs-pad-x)) calc(-1 * var(--hs-pad-b));
padding: .7rem var(--hs-pad-x);
background: #fff;
border-top: 1px solid var(--hs-line, #e6e9ec);
border-radius: 0 0 8px 8px;
}
.hs-tabs__pane.hs-formbar,
.hs-tabs__pane .hs-formbar { --hs-pad-x: 1.25rem; --hs-pad-b: 1.15rem; }
/* Lista de perechi eticheta/valoare din cardurile de detaliu (adresa clientului). */
.hs-dl {
display: grid;
grid-template-columns: minmax(88px, 38%) 1fr;
gap: .45rem .75rem;
margin: 0;
font-size: 13px;
}
.hs-dl dt {
color: #8a929b;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
align-self: center;
}
.hs-dl dd { margin: 0; color: #34405a; overflow-wrap: anywhere; }
/* Stare goala (fara rezultate / tabel gol). */
.hs-list td.dt-empty { padding: 0; }
.hs-empty { padding: 2.5rem 1rem; text-align: center; color: #98a2b3; }
.hs-empty i { font-size: 26px; display: block; margin-bottom: .5rem; color: #c8d1dc; }
.hs-empty p { margin: 0; font-size: 13px; }
/* ==========================================================================
Tabul „Fișe tehnice" din pagina clientului (templates/customer/tabs/_sheets)
Lista e densă (până la 100 de rânduri), deci fiecare rând trebuie să se
citească pe verticală: identificatorul aldin, contextul pe subrând estompat.
========================================================================== */
.cs-toolbar { align-items: center; }
/* Butonul de golire al căutării — nativul `type=search` apare doar pe unele browsere. */
.cs-toolbar .hs-toolbar__search { position: relative; }
.cs-search__clear {
position: absolute;
right: 6px; top: 50%;
transform: translateY(-50%);
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
padding: 0;
border: 0; border-radius: 50%;
background: transparent;
color: var(--hs-subtle);
font-size: 10px;
cursor: pointer;
}
.cs-search__clear:hover { background: var(--hs-neutral-bg); color: var(--hs-text); }
.cs-search__clear:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }
/* Capete de coloană sortabile: săgeata apare estompat și se aprinde pe coloana activă. */
.cs-th--sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.cs-th--sortable:hover { color: var(--hs-primary); }
.cs-th__ic { margin-left: .3rem; font-size: 9px; opacity: .25; vertical-align: middle; }
.cs-th--sortable[aria-sort="ascending"] .cs-th__ic,
.cs-th--sortable[aria-sort="descending"] .cs-th__ic { opacity: 1; color: var(--hs-primary); }
.cs-sheets .cs-col-act { width: 56px; }
/* Numărul fișei — identificatorul rândului, singurul element aldin din tabel. */
.cs-sheet__nr { font-weight: 600; color: var(--hs-primary); text-decoration: none; }
.cs-sheet__nr:hover { text-decoration: underline; }
.cs-device { font-weight: 500; color: var(--hs-text-soft); }
/* Programarea: trecută = estompată (nu mai e de făcut nimic), azi = accent, viitoare = normal.
Culoarea e semnal de timp, nu decor — de aceea doar două stări ies din gri. */
.cs-appt--past { color: var(--hs-subtle); }
.cs-appt--today { color: var(--hs-warn-fg, #8a5a00); font-weight: 600; }
.cs-appt--today .bi-dot { font-size: 18px; margin-left: -6px; vertical-align: -3px; }
.cs-appt--future { color: var(--hs-text-soft); }
/* Starea „niciun rezultat" stă într-un rând de tabel, deci fără padding-ul de card. */
.hs-empty--inline { padding: 1.75rem 1rem; }
.cs-nomatch td { background: var(--hs-surface-alt); }
/* Scheletul afișat cât se încarcă lista prin AJAX: ține înălțimea, ca tabul să nu se
deschidă gol și să sară când sosesc rândurile. Animație discretă, fără spinner —
un spinner spune „se întâmplă ceva", scheletul spune „vine o listă". */
.cs-skeleton { padding: .35rem 0; }
.cs-skeleton__row {
display: flex;
align-items: center;
gap: 1.5rem;
padding: .75rem .9rem;
border-bottom: 1px solid var(--hs-line-soft);
}
.cs-skeleton__row:last-child { border-bottom: 0; }
.cs-skeleton__bar {
height: 10px;
border-radius: 4px;
background: linear-gradient(90deg, #eef1f4 25%, #f6f8fa 37%, #eef1f4 63%);
background-size: 400% 100%;
animation: cs-skeleton-shimmer 1.4s ease infinite;
}
@keyframes cs-skeleton-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
.cs-skeleton__bar { animation: none; }
}
/* Rezumatul de sub listă: câte fișe se văd din câte există. */
.cs-foot {
padding: .55rem .9rem;
border-top: 1px solid var(--hs-line-soft);
color: var(--hs-muted);
font-size: var(--hs-fs-sm);
}
/* Casuta de cautare din bara de filtre. */
.hs-search .input-group-text { background: #fff; border-right: 0; color: #98a2b3; }
.hs-search input.form-control { border-left: 0; padding-left: 0; }
.hs-search input.form-control:focus { border-color: #dee2e6; box-shadow: none; }
.hs-search input[type="search"]::-webkit-search-cancel-button { display: none; }
/* ---- Lista clienti (layout enterprise): celule rafinate ---- */
.cust-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cust-name__text { min-width: 0; }
.cust-name .uc-client-link { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Subrand estompat (tipul clientului sub nume). */
.cust-subline { font-size: 11px; color: #98a2b3; line-height: 1.4; }
/* Contact pe mai multe randuri (telefon / mobil / email), dens dar lizibil. */
.cust-contact { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.cust-contact i { font-size: 12px; }
.cust-muted-link { color: var(--hs-muted, #667085); text-decoration: none; }
.cust-muted-link:hover { color: var(--hs-primary, #134a6d); text-decoration: underline; }
.cust-empty { color: #c4c9d0; }
.cust-loc { display: inline-flex; align-items: center; gap: 5px; color: #52606d; }
.cust-loc i { color: #9aa3b2; font-size: 12px; }
.cust-operator { display: inline-block; font-size: 11px; font-weight: 600; color: #4b5563; background: #eef2f7; border: 1px solid #e2e8f0; padding: 1px 9px; border-radius: 999px; }
.cust-date { color: #8a909a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cust-num { font-variant-numeric: tabular-nums; font-weight: 600; color: #1c1b18; white-space: nowrap; }
/* Banda KPI a paginii — spatiere fata de header si de card. */
#customer-stats { margin-bottom: 14px; }
/* ============================================================================
Modal „Detalii piesă" (editare produs) — 90% din viewport, layout pe tab-uri
(Detalii / Stoc). Specificitate pe doua clase ca sa bata regula responsive
.modal-dialog{max-width:...} din Bootstrap (incarcat dupa app.css).
============================================================================ */
.modal-dialog.modal-part-details {
width: 90vw;
max-width: 90vw;
height: 90vh;
margin-left: auto;
margin-right: auto;
}
.modal-part-details .modal-content { max-height: 90vh; }
/* Titlu + identitatea piesei (cod monospace + denumire) in bara de header. */
.pd-head { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; min-width: 0; }
.pd-head__meta { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.pd-head__code {
font-family: var(--bs-font-monospace, monospace);
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
color: #fff;
white-space: nowrap;
}
.pd-head__name {
font-size: 13px;
color: rgba(255, 255, 255, .78);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 46vw;
}
/* Bara de tab-uri: bandă proprie intre header si corp. */
.pd-tabs {
padding: 0 1rem;
background: #f7f9fb;
border-bottom: 1px solid var(--hs-line, #e6e9ec);
flex: 0 0 auto;
}
/* Corpul deruleaza singur: header, bara de tab-uri si footer raman fixe. */
.pd-body { background: #f7f9fb; padding: 1.1rem 1.25rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pd-body > .tab-content { background: transparent; border: 0; padding: 0; }
/* Detalii: formular + panou lateral de evidenta. */
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.pd-grid--half { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.pd-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pd-aside { display: flex; flex-direction: column; gap: 1rem; }
.pd-section,
.pd-card {
background: #fff;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
padding: 1rem 1.15rem;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
min-width: 0;
}
.pd-section__title,
.pd-card__title {
display: flex;
align-items: center;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: #8a929b;
margin: 0 0 .85rem;
}
.pd-card__link {
margin-left: auto;
font-size: 11px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: var(--hs-primary, #134a6d);
text-decoration: none;
}
.pd-card__link:hover { text-decoration: underline; }
/* Evidenta (creat / modificat) — perechi eticheta-valoare pe doua coloane. */
.pd-meta { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0; }
.pd-meta dt { font-size: 12px; font-weight: 600; color: #98a2b3; }
.pd-meta dd { margin: 0; font-size: 13px; color: #1f2937; text-align: right; }
/* Tab „Stoc”. */
.pd-stats { gap: .75rem; }
.pd-card--table { padding-bottom: .35rem; }
.pd-table-wrap { max-height: 240px; overflow-y: auto; margin: 0 -.35rem; }
.pd-table { margin-bottom: 0; font-size: 13px; }
.pd-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: #fff;
border-bottom: 1px solid var(--hs-line, #e6e9ec);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #98a2b3;
white-space: nowrap;
}
.pd-table td { vertical-align: middle; color: #344054; }
.pd-table__empty { text-align: center; color: #98a2b3; padding: 1.1rem 0; font-size: 12px; }
.pd-empty { display: flex; align-items: center; justify-content: center; padding: 2.5rem 0; color: #8a929b; font-size: 13px; }
/* Tab „Preț”: panoul lateral (pret curent + formular) sta la STANGA, istoricul la
dreapta — invers fata de restul tab-urilor, de aici coloanele schimbate intre ele. */
/* Coloana laterala e cu 50% mai lata aici decat cea standard (320px), ca sa incapa
pretul curent scos in evidenta si formularul fara sa se inghesuie. */
.pd-grid--aside-first { grid-template-columns: 480px minmax(0, 1fr); }
/* Tab „Preț”: pretul in vigoare, scos in evidenta in panoul lateral. */
.pp-current__value {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -.02em;
color: var(--hs-primary, #134a6d);
line-height: 1.1;
}
.pp-current__meta { margin-top: .35rem; font-size: 12px; color: #8a929b; line-height: 1.5; }
/* Cardul pretului curent are ceva mai mult aer decat celelalte; fonturile raman cele standard. */
.pd-card--current { padding: 1.5rem 1.75rem; }
.pd-table .pp-del { line-height: 1; vertical-align: middle; }
/* Footer: badge-ul de status al stocului la stanga, actiunile la dreapta. */
.pd-footer { justify-content: flex-start; gap: .75rem; }
.pd-footer__hint { font-size: 12px; color: #8a929b; }
/* Tab-ul „Stoc” e inactiv cat timp piesa nu e salvata. */
.pd-tabs .nav-link.disabled { opacity: .45; pointer-events: none; }
/* ---- Modul „Produs nou” --------------------------------------------------
Acelasi markup, dar redus la formularul simplu de dinainte de tab-uri:
fara bara de tab-uri, fara panouri/carduri, campurile unul sub altul. */
.pd-mode-new .pd-tabs,
.pd-mode-new .pd-section__title,
.pd-mode-new .hs-form-hint { display: none; }
.pd-mode-new .pd-body { background: #fff; padding: 1rem; }
.pd-mode-new .pd-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pd-mode-new .pd-col { gap: 0; }
.pd-mode-new .pd-section { border: 0; box-shadow: none; padding: 0; background: transparent; }
.pd-mode-new .pd-section .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
/* row-ul are gutter negativ, deci sectiunile trebuie despartite explicit. */
.pd-mode-new .pd-section + .pd-section { margin-top: 1rem; }
.pd-mode-new #product_code { font-family: inherit; }
.pd-mode-new .pd-footer { justify-content: flex-end; }
@media (max-width: 1199.98px) {
.pd-grid { grid-template-columns: minmax(0, 1fr); }
.pd-grid--half { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
.modal-dialog.modal-part-details { width: auto; max-width: none; height: auto; margin: .5rem; }
.pd-head__name { display: none; }
}
/* ============================================================================
Modal „Optimizare traseu" — layout enterprise pe doua coloane (harta + panou),
98% din viewport. Specificitate pe doua clase (.modal-dialog.modal-route) ca sa
bata regula responsive .modal-dialog{max-width:...} din Bootstrap (incarcat dupa app.css).
============================================================================ */
.modal-dialog.modal-route {
width: 98vw;
max-width: 98vw;
height: 98vh;
/* Marginea implicita a dialogului (.5rem–1.75rem) s-ar aduna la 98vh si ar
scoate modalul din ecran; centrarea o face .modal-dialog-centered. */
margin: 0 auto;
}
.modal-route .modal-content {
height: 98vh;
border: 1px solid #d8dde2;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 18px 50px rgba(16, 24, 40, .18);
}
.modal-route .modal-header {
padding: .7rem 1.1rem;
border-bottom: 3px solid rgba(0, 0, 0, .22);
}
.modal-route .modal-title {
font-size: 14px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
}
/* Corpul: coloana (alerta optionala + split), fara a strica flex-ul intern. */
.modal-route .modal-body.route-body {
display: flex;
flex-direction: column;
min-height: 0;
}
.route-split {
flex: 1 1 auto;
display: flex;
min-height: 0;
}
/* Harta umple coloana din stanga (pozitionata absolut ca Google Maps sa aiba dimensiune). */
.route-map-wrap {
position: relative;
flex: 1 1 auto;
min-width: 0;
background: #eaeef2;
}
.route-map-wrap #route_map {
position: absolute;
inset: 0;
}
/* Overlay „se calculeaza ruta" — acopera toata harta cat timp se (re)calculeaza traseul. */
.route-map-overlay {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .6);
backdrop-filter: blur(1px);
cursor: progress;
}
/* Pastila cu spinner, in mijlocul overlay-ului. */
.route-map-loader {
display: inline-flex;
align-items: center;
gap: .5rem;
background: #fff;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 6px;
padding: .5rem .9rem;
font-size: 12px;
color: var(--hs-muted, #667085);
box-shadow: 0 4px 14px rgba(16, 24, 40, .12);
}
/* Panoul lateral „Ruta optimizata" — card enterprise cu antet, lista si footer KPI. */
.route-panel {
flex: 0 0 500px;
width: 500px;
display: flex;
flex-direction: column;
min-height: 0;
background: #f7f8fa;
border-left: 1px solid var(--hs-line, #e6e9ec);
}
.route-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
padding: .6rem .85rem;
background: #fff;
border-bottom: 1px solid var(--hs-line, #e6e9ec);
}
.route-panel-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-ink, #1f2a37);
}
.route-panel-title i { color: var(--hs-primary); }
.route-return {
font-size: 12px;
color: var(--hs-muted, #667085);
display: inline-flex;
align-items: center;
gap: .35rem;
cursor: pointer;
white-space: nowrap;
}
.route-panel-list {
flex: 1 1 auto;
overflow-y: auto;
padding: .85rem;
}
/* Terminale (start / sosire) — panouri branded. */
.rt-term {
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem .7rem;
border-radius: 8px;
color: #fff;
background: var(--hs-primary, #134a6d);
}
.rt-term-end { background: #1a7f43; }
.rt-term i { font-size: 1rem; flex: 0 0 auto; opacity: .95; }
.rt-term-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rt-term-body b { font-size: 13px; }
.rt-term-body span { font-size: 11px; opacity: .85; overflow-wrap: anywhere; }
/* Banda din capul listei de opriri: semnaleaza ca ordinea a fost mutata cu mana
si ofera revenirea la traseul propus de Google. Apare doar cand ordinea difera. */
.rt-reorder {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
padding: .5rem .6rem;
margin-bottom: .5rem;
background: #fff8e6;
border: 1px solid #f2dfb0;
border-radius: 8px;
}
.rt-reorder-txt {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: 12px;
font-weight: 600;
color: #8a6a12;
}
.rt-reorder-btn { margin-left: auto; font-size: 12px; white-space: nowrap; }
/* Oprire client — rand cu numar in cerc + nume/adresa. */
.rt-stop {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .7rem;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.rt-num {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #e7eef4;
color: var(--hs-primary, #134a6d);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.rt-stop-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rt-stop-body b { font-size: 13px; color: var(--hs-ink, #1f2a37); }
.rt-stop-body span { font-size: 11px; color: var(--hs-muted, #667085); overflow-wrap: anywhere; }
/* Randul de titlu al opririi: nume client + numarul fisei tehnice (badge). */
.rt-stop-title { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.rt-stop-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Selector cu doua clase: `.rt-stop-body span` de mai sus e mai specific decat o clasa
singura si i-ar suprascrie altfel dimensiunea/culoarea. */
.rt-stop-body .rt-stop-nr {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .1rem .6rem;
border-radius: 4px;
background: #e7eef4;
color: var(--hs-primary, #134a6d);
font-size: 12px;
font-weight: 700;
line-height: 1.7;
white-space: nowrap; /* numarul nu se rupe niciodata pe doua randuri */
font-variant-numeric: tabular-nums;
}
.rt-stop-body .rt-stop-nr i { font-size: 11px; }
/* Conector intre opriri: distanta / durata, discret, cu linie verticala. */
.rt-leg {
display: flex;
align-items: center;
justify-content: center;
gap: .3rem;
padding: .15rem 0;
margin: .1rem 0;
font-size: 11px;
color: #98a2b3;
font-variant-numeric: tabular-nums;
}
.rt-leg i { font-size: .7rem; }
/* Footer KPI (total km / min) — chips prominente. */
.route-panel-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
padding: .6rem .85rem;
background: #fff;
border-top: 1px solid var(--hs-line, #e6e9ec);
}
.route-foot-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: #98a2b3;
}
.route-foot-kpis { display: flex; gap: .5rem; }
.rt-kpi {
display: inline-flex;
align-items: baseline;
gap: .2rem;
padding: .2rem .55rem;
border-radius: 6px;
background: #eef3f7;
border: 1px solid #dbe6ee;
}
.rt-kpi-val {
font-size: 15px;
font-weight: 700;
color: var(--hs-primary, #134a6d);
font-variant-numeric: tabular-nums;
}
.rt-kpi-unit { font-size: 11px; color: var(--hs-muted, #667085); text-transform: uppercase; letter-spacing: .03em; }
/* Responsive: pe ecrane inguste, panoul trece sub harta. */
@media (max-width: 767.98px) {
.route-split { flex-direction: column; }
.route-panel { flex-basis: auto; width: 100%; border-left: 0; border-top: 1px solid var(--hs-line, #e6e9ec); }
.route-map-wrap { min-height: 45vh; }
}
/* Card de hover pe markerele din optimizarea traseului (Google Maps InfoWindow). */
.rt-info {
min-width: 190px;
max-width: 260px;
font-size: 12px;
color: var(--hs-ink, #1f2a37);
line-height: 1.35;
}
.rt-info-head {
display: flex;
align-items: center;
gap: .4rem;
margin-bottom: .3rem;
}
.rt-info-num {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--hs-primary, #134a6d);
color: #fff;
font-size: 11px;
font-weight: 700;
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
}
.rt-info-nr {
font-weight: 700;
color: var(--hs-primary, #134a6d);
font-variant-numeric: tabular-nums;
}
.rt-info-type {
margin-left: auto;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
color: #667085;
background: #eef3f7;
border: 1px solid #dbe6ee;
border-radius: 5px;
padding: .05rem .35rem;
}
.rt-info-name {
font-weight: 600;
margin-bottom: .25rem;
}
.rt-info-row {
display: flex;
align-items: flex-start;
gap: .35rem;
color: var(--hs-muted, #667085);
margin-top: .15rem;
}
.rt-info-row i { color: var(--hs-primary, #134a6d); margin-top: 1px; flex: 0 0 auto; }
.rt-info-row span { overflow-wrap: anywhere; }
/* Indiciu „click pentru detalii" in cardul de hover al opririi. */
.rt-info-hint {
display: flex;
align-items: center;
gap: .3rem;
margin-top: .4rem;
padding-top: .35rem;
border-top: 1px dashed #e0e5ea;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--hs-primary, #134a6d);
}
/* Tooltip propriu la hover pe markerele de traseu (position:fixed, deasupra oricarui modal). */
.rt-tip {
position: fixed;
z-index: 20000;
pointer-events: none;
background: #fff;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
padding: .6rem .7rem;
}
/* Bara de unelte a panoului de traseu (recalculare, reset ordine, PDF, Navigheaza).
Ora de plecare si minutele/interventie nu se mai seteaza aici: vin din programul
de lucru (al inginerului ales sau cel implicit al companiei). */
.route-panel-tools {
display: flex;
align-items: center;
gap: .5rem;
padding: .5rem .85rem;
background: #fff;
border-bottom: 1px solid var(--hs-line, #e6e9ec);
flex-wrap: wrap;
}
/* „Navigheaza" (Google Maps) — buton iconic, in culoarea de brand. Fara text: eticheta
sta in title/aria-label. Starea `disabled` e pusa din JS cand ruta nu are opriri. */
.route-nav {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 6px;
background: var(--hs-primary, #134a6d);
border: 1px solid #0f3d5a;
color: #fff;
font-size: 1rem;
line-height: 1;
text-decoration: none;
box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.route-nav:hover { background: #0f3d5a; color: #fff; box-shadow: 0 3px 8px rgba(16, 24, 40, .18); transform: translateY(-1px); }
.route-nav:active { transform: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.route-nav:focus-visible { outline: 2px solid #9dc2e0; outline-offset: 2px; }
.route-nav.disabled { opacity: .45; pointer-events: none; }
/* Programul dupa care se calculeaza orele — doar afisaj, in stanga barei. */
.route-sched {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: .35rem;
min-width: 0;
cursor: help;
}
.route-sched-name {
display: inline-flex;
align-items: center;
gap: .3rem;
max-width: 13rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-weight: 600;
color: var(--hs-ink, #1f2a37);
}
.route-sched-name i { color: var(--hs-primary, #134a6d); }
.route-sched-chip {
display: inline-flex;
align-items: center;
gap: .25rem;
padding: .05rem .45rem;
border-radius: 4px;
background: #eef2f6;
color: var(--hs-muted, #667085);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Badge ETA (ora estimata de sosire) pe randurile de oprire / terminale. */
.rt-eta {
margin-left: auto;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .25rem;
white-space: nowrap;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--hs-primary, #134a6d);
background: #eef3f7;
border: 1px solid #dbe6ee;
border-radius: 5px;
padding: .1rem .4rem;
align-self: center;
}
.rt-term .rt-eta { color: #fff; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); }
/* Oprire care s-ar termina DUPA ora de sfarsit din programul inginerului ales.
Doar semnalare: programarea ramane permisa (un traseu poate depasi intentionat). */
.rt-eta--after {
color: #b42318;
background: #fef3f2;
border-color: #fecdca;
}
.rt-eta--after::after {
content: '!';
margin-left: .25rem;
font-weight: 800;
}
/* Ora confirmata telefonic cu clientul — nu mai e o estimare, deci fara eticheta „ETA". */
.rt-eta--locked {
display: inline-flex;
align-items: center;
gap: .25rem;
color: #1a7f43;
background: #e7f4ec;
border-color: #cfe9d9;
}
.rt-eta i { font-size: .72rem; opacity: .85; }
.rt-eta--locked i { font-size: .7rem; opacity: 1; }
/* Bara „Programează tot traseul" din panoul de traseu (inginer + data + buton). */
.route-schedule {
display: flex;
align-items: center;
gap: .4rem;
padding: .5rem .85rem;
background: #fff;
border-top: 1px solid var(--hs-line, #e6e9ec);
}
/* Camp obligatoriu necompletat (inginer / data) — marcat la incercarea de programare. */
.is-required-empty,
.is-required-empty.form-control { border-color: #f2c9c9 !important; background: #fdf6f6; }
.route-schedule .form-select,
.route-schedule .form-control {
font-size: 12px;
padding: .2rem .4rem;
}
.route-schedule #route_engineer { flex: 1 1 auto; min-width: 0; }
/* Data: 110px ficsi, cu iconita ASEZATA IN input (absolut, peste padding-ul din stanga).
`pointer-events: none` pe iconita: clicul trece prin ea in input, deci deschide
calendarul in loc sa fie inghitit. */
.route-schedule .route-date-tool {
position: relative;
flex: 0 0 110px;
display: block;
}
.route-schedule .route-date-tool i {
position: absolute;
left: .45rem;
top: 50%;
transform: translateY(-50%);
font-size: .85rem;
pointer-events: none;
z-index: 2;
}
.route-schedule #route_date {
width: 110px;
max-width: none;
padding-left: 1.45rem;
text-align: left;
font-variant-numeric: tabular-nums;
background-color: #fff;
cursor: pointer;
}
.route-schedule #route_date:hover { border-color: var(--hs-primary, #134a6d); }
.route-schedule #route_date:focus {
border-color: var(--hs-primary, #134a6d);
box-shadow: 0 0 0 .18rem rgba(19, 74, 109, .14);
}
/* select2 pe inginer: aceeasi inaltime si acelasi font ca restul controalelor din bara. */
.route-schedule .select2-container { flex: 1 1 auto; min-width: 0; }
.route-schedule .select2-container--bootstrap-5 .select2-selection {
min-height: 0;
height: calc(1.5em + .4rem + 2px);
padding: .2rem .4rem;
font-size: 12px;
line-height: 1.5;
}
.route-schedule .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
padding: 0;
line-height: 1.5;
}
.route-schedule .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
height: 100%;
top: 0;
}
/* Indicatorul „i" de langa inginer (programul lui de lucru, la hover).
Buton-link fara padding, ca sa nu ingusteze select-ul din bara. */
.route-eng-info {
flex: 0 0 auto;
line-height: 1;
color: var(--hs-primary, #134a6d);
text-decoration: none;
opacity: .75;
}
.route-eng-info:hover,
.route-eng-info:focus { opacity: 1; color: var(--hs-primary, #134a6d); }
.route-eng-info i { font-size: 1rem; }
/* Tooltip-ul cu programul inginerului: mai lat si aliniat la stanga. */
.rt-tip .tooltip-inner {
max-width: 280px;
text-align: left;
padding: .5rem .6rem;
}
/* Butonul „i" din capul panoului + tooltipul cu regulile de calcul. */
.route-help {
border: 0;
background: transparent;
padding: 0 0 0 .2rem;
line-height: 1;
color: rgba(255, 255, 255, .75);
cursor: help;
}
.route-help:hover,
.route-help:focus { color: #fff; }
.route-help i { font-size: .95rem; }
/* Aceeasi iconita, dar pe fundal alb (bara de programare din josul panoului). */
.route-help--dark { color: #98a2b3; padding: 0 .1rem; }
.route-help--dark:hover,
.route-help--dark:focus { color: var(--hs-primary, #134a6d); }
/* Explicatia e mai lunga decat un tooltip obisnuit: mai mult loc si randuri lizibile. */
.rt-tip--help .tooltip-inner { max-width: 380px; }
.rt-help { display: flex; flex-direction: column; gap: .5rem; }
.rt-help-row { display: flex; align-items: flex-start; gap: .45rem; font-size: 12px; line-height: 1.35; }
.rt-help-row i { flex: 0 0 auto; margin-top: .12rem; opacity: .85; }
.rt-help-row b { display: block; font-weight: 700; }
/* Orele de start din tooltip-ul inginerului (chip-uri mici, se aseaza pe randuri). */
.rt-slots { display: flex; flex-wrap: wrap; gap: .2rem; max-width: 240px; }
.rt-leg--tight { color: #b42318; font-weight: 600; }
.rt-slot {
display: inline-block;
padding: .05rem .3rem;
border-radius: 4px;
background: rgba(255, 255, 255, .16);
font-size: 11px;
font-variant-numeric: tabular-nums;
line-height: 1.5;
}
/* Opriri reordonabile prin drag-and-drop + buton de programare per fisa. */
.rt-stop { cursor: default; }
.rt-drag {
flex: 0 0 auto;
cursor: grab;
color: #b7bec6;
font-size: 1rem;
line-height: 1;
padding: 0 .1rem;
}
.rt-drag:active { cursor: grabbing; }
.rt-stop.rt-dragging { opacity: .5; }
.rt-stop.rt-drop-target { outline: 2px dashed var(--hs-primary, #134a6d); outline-offset: -2px; }
/* Durata interventiei pentru oprirea curenta (cronometru) — acelasi gabarit. */
.rt-stop-dur {
flex: 0 0 auto;
border: 1px solid #cfe0cf;
background: #eef7ef;
color: #1a7f43;
border-radius: 5px;
width: 26px;
height: 26px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .9rem;
line-height: 1;
cursor: pointer;
}
.rt-stop-dur:hover { background: #1a7f43; color: #fff; border-color: #1a7f43; }
/* Intervalul rezultat din durata, in dialog. */
.rt-dur-preview { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hs-ink, #1f2a37); }
/* Coloana din dreapta opririi: ETA deasupra, butoanele de actiune dedesubt. */
.rt-stop-side {
flex: 0 0 auto;
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: .3rem;
}
/* In coloana, badge-ul ETA nu mai impinge singur spre dreapta (o face .rt-stop-side). */
.rt-stop-side .rt-eta { margin-left: 0; align-self: flex-end; }
/* Grupul de actiuni al opririi (confirmare / geocodare / programare / eliminare):
lipite intre ele, ca sa nu ia din latimea numelui cand randul e ingust. */
.rt-stop-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem; }
/* Precizare in dialogul de confirmare: confirmarea nu creeaza programarea. */
.rt-conf-hint {
display: flex;
align-items: center;
gap: .55rem;
padding: .65rem .8rem;
border-radius: 8px;
background: #fff8e6;
border: 1px solid #f2dfb0;
border-left: 4px solid #d99b0b;
font-size: 13px;
line-height: 1.35;
color: #7a5c0c;
}
.rt-conf-hint i { flex: 0 0 auto; font-size: 1.05rem; color: #d99b0b; }
.rt-conf-hint b { color: #6b4f08; }
/* Selectorul de mod din dialogul de confirmare: „ora e stabilita" vs „de recontactat". */
.rt-mode { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rt-mode-opt {
flex: 1 1 12rem;
display: flex;
align-items: center;
gap: .55rem;
margin: 0;
padding: .6rem .75rem;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
background: #fff;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.rt-mode-opt input { margin: 0; flex: 0 0 auto; }
.rt-mode-opt i { font-size: 1.1rem; color: #98a2b3; flex: 0 0 auto; }
.rt-mode-opt span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rt-mode-opt b { font-size: 13px; color: var(--hs-ink, #1f2a37); }
.rt-mode-opt small { font-size: 11px; color: var(--hs-muted, #667085); }
.rt-mode-opt:hover { border-color: #cfdcea; background: #fbfdff; }
/* Optiunea aleasa — verde pentru confirmare, chihlimbar pentru recontactare. */
.rt-mode-opt.is-on { border-color: #1a7f43; background: #f4fbf7; box-shadow: inset 0 0 0 1px #cfe9d9; }
.rt-mode-opt.is-on i { color: #1a7f43; }
.rt-mode-opt.is-on:has(input[value="callback"]) { border-color: #d99b0b; background: #fffdf5; box-shadow: inset 0 0 0 1px #f2dfb0; }
.rt-mode-opt.is-on:has(input[value="callback"]) i { color: #d99b0b; }
/* Varianta informativa (albastra) a casetei din dialog. */
.rt-conf-hint--info {
background: #eef4fa;
border-color: #cfdcea;
border-left-color: #134a6d;
color: var(--hs-primary, #134a6d);
}
.rt-conf-hint--info i { color: var(--hs-primary, #134a6d); }
/* Durata rezultata din ora de inceput/final, sub campul de final. */
.rt-conf-dur { font-size: 11px; font-weight: 600; color: var(--hs-muted, #667085); }
/* Istoricul confirmarilor, in dialogul de confirmare/anulare. */
.rt-log-wrap { margin-top: 1.1rem; }
.rt-log-box { max-height: 12rem; overflow-y: auto; }
.rt-log { list-style: none; margin: 0; padding: 0; }
.rt-log-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .35rem .6rem;
padding: .4rem .1rem;
border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
font-size: 12px;
}
.rt-log-row:last-child { border-bottom: 0; }
.rt-log-act {
flex: 0 0 auto;
padding: .05rem .4rem;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
background: #eef2f6;
color: var(--hs-muted, #667085);
}
.rt-log-act--confirm { background: #e7f4ec; color: #1a7f43; }
.rt-log-act--reconfirm { background: #fff8e6; color: #8a6a12; }
.rt-log-act--cancel { background: #fdeeee; color: #b42318; }
.rt-log-act--callback { background: #fff8e6; color: #8a6a12; }
.rt-log-act--duration { background: #eef4fa; color: #134a6d; }
.rt-log-when { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hs-ink, #1f2a37); }
.rt-log-prev { margin-left: .3rem; font-weight: 500; color: #98a2b3; text-decoration: line-through; }
.rt-log-prev i { text-decoration: none; }
.rt-log-meta { margin-left: auto; font-size: 11px; color: #98a2b3; white-space: nowrap; }
.rt-log-note { flex: 1 1 100%; font-size: 11px; color: var(--hs-muted, #667085); }
.rt-log-note i { margin-right: .25rem; }
/* Confirma ora cu clientul / anuleaza confirmarea — acelasi gabarit ca celelalte. */
.rt-stop-conf {
flex: 0 0 auto;
border: 1px solid #d9d2ea;
background: #f3f0fa;
color: #5b4a9e;
border-radius: 5px;
width: 26px;
height: 26px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .9rem;
line-height: 1;
cursor: pointer;
}
.rt-stop-conf:hover { background: #5b4a9e; color: #fff; border-color: #5b4a9e; }
/* Confirmata: butonul devine verde (click = anuleaza confirmarea). */
.rt-stop-conf.is-locked { background: #e7f4ec; border-color: #cfe9d9; color: #1a7f43; }
.rt-stop-conf.is-locked:hover { background: #1a7f43; color: #fff; border-color: #1a7f43; }
/* Marcata „de recontactat": oprirea ramane mutabila, doar semnalata vizual. */
.rt-stop-conf.is-callback { background: #fff8e6; border-color: #f2dfb0; color: #8a6a12; }
.rt-stop-conf.is-callback:hover { background: #d99b0b; color: #fff; border-color: #d99b0b; }
.rt-stop--callback { border-color: #f2dfb0; background: #fffdf7; box-shadow: inset 3px 0 0 #d99b0b, 0 1px 2px rgba(16, 24, 40, .04); }
/* Oprire cu ora confirmata: fixata in traseu (nu se trage, nu o muta optimizarea). */
.rt-stop--locked {
border-color: #cfe9d9;
background: #f7fcf9;
box-shadow: inset 3px 0 0 #1a7f43, 0 1px 2px rgba(16, 24, 40, .04);
cursor: default;
}
.rt-stop--locked .rt-drag { color: #1a7f43; cursor: default; }
/* Regenereaza coordonatele fisei — acelasi gabarit ca butonul de programare. */
.rt-stop-geo {
flex: 0 0 auto;
border: 1px solid #cfdcea;
background: #eef4fa;
color: var(--hs-primary, #134a6d);
border-radius: 5px;
width: 26px;
height: 26px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .9rem;
line-height: 1;
cursor: pointer;
}
.rt-stop-geo:hover { background: var(--hs-primary, #134a6d); color: #fff; border-color: var(--hs-primary, #134a6d); }
.rt-stop-geo:disabled { opacity: .6; cursor: default; }
/* Scoate oprirea din traseu (nu sterge fisa din baza) — acelasi gabarit ca butonul de programare. */
.rt-stop-del {
flex: 0 0 auto;
border: 1px solid #f2c9c9;
background: #fdeeee;
color: #b42318;
border-radius: 5px;
width: 26px;
height: 26px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .9rem;
line-height: 1;
cursor: pointer;
}
.rt-stop-del:hover { background: #b42318; color: #fff; border-color: #b42318; }
/* Iconita butonului de recalculare, cat timp se reincarca traseul.
`.hs-spin` e acelasi lucru, dar cu nume neutru: se pune pe orice iconita care trebuie
sa se roteasca cat tine o cerere (ex. refresh-ul necesarului de piese din fișă). */
.rt-spin, .hs-spin { display: inline-block; animation: rt-spin 1s linear infinite; }
@keyframes rt-spin { to { transform: rotate(360deg); } }
/* ============================================================================
Modale de programare (.modal-appt) — aspect enterprise/business, consistent cu
modalul de fisa/traseu: cadru fin, header branded compact, sectiuni, inputuri sobre.
============================================================================ */
.modal-dialog.modal-appt { max-width: 460px; }
.modal-appt .modal-content {
border: 1px solid #d8dde2;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 18px 50px rgba(16, 24, 40, .18);
}
.modal-appt .modal-header {
padding: .7rem 1.1rem;
border-bottom: 3px solid rgba(0, 0, 0, .22);
}
.modal-appt .modal-title {
font-size: 14px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
}
.modal-appt .modal-body { padding: 1.1rem; background: #f6f7f9; }
.modal-appt .modal-footer {
padding: .7rem 1.1rem;
background: #fff;
border-top: 1px solid var(--hs-line, #e6e9ec);
}
.modal-appt label.form-label { margin-bottom: .3rem; }
.modal-appt label.form-label i { color: var(--hs-primary, #134a6d); }
.modal-appt .form-control,
.modal-appt .form-select {
border-radius: 6px;
border-color: #d5dbe1;
}
.modal-appt .form-control:focus,
.modal-appt .form-select:focus {
border-color: var(--hs-primary, #134a6d);
box-shadow: 0 0 0 .2rem rgba(19, 74, 109, .15);
}
/* Card cu fisa (context) in capul modalului de programare. */
.rs-sheet {
display: flex;
align-items: center;
gap: .7rem;
background: #fff;
border: 1px solid var(--hs-line, #e6e9ec);
border-left: 3px solid var(--hs-primary, #134a6d);
border-radius: 8px;
padding: .6rem .8rem;
margin-bottom: 1rem;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.rs-sheet-ic {
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #e7eef4;
color: var(--hs-primary, #134a6d);
font-size: 1rem;
}
.rs-sheet-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rs-sheet-lbl {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: #98a2b3;
}
.rs-sheet-val {
border: 0;
background: transparent;
padding: 0;
font-size: 14px;
font-weight: 600;
color: var(--hs-ink, #1f2a37);
outline: none;
}
/* Titlu de sectiune discret (uppercase) in modalul de programare. */
.rs-section-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #8a929b;
border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
padding-bottom: .35rem;
margin-bottom: .85rem;
}
/* Sumar programare bulk (modal_route_confirm) — 80% din viewport.
Specificitate pe doua clase, ca sa bata `.modal-dialog{max-width}` din Bootstrap. */
.modal-dialog.modal-route-confirm {
width: 80vw;
max-width: 80vw;
height: 80vh;
/* Marginea implicita s-ar aduna la inaltime si ar scoate dialogul din ecran. */
margin: 0 auto;
}
.modal-route-confirm .modal-content { height: 80vh; }
/* Sumar programare bulk (modal_route_confirm) */
.rc-meta {
display: flex;
flex-wrap: wrap;
gap: .5rem 1.5rem;
padding: .75rem 1rem;
margin-bottom: 1rem;
background: var(--hs-bg-soft, #f6f8fa);
border: 1px solid var(--hs-line-soft, #eef1f4);
border-radius: .5rem;
}
.rc-meta-item { display: flex; flex-direction: column; min-width: 0; }
.rc-meta-lbl {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #8a929b;
}
.rc-meta-val { font-size: 14px; font-weight: 600; }
.rc-table th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .03em;
color: #8a929b;
}
/* Fisa opririi: numar + tip pe acelasi rand (se rup doar daca nu incap). */
.rc-sheet { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
/* Numarul fisei tehnice — badge, acelasi reper vizual ca in panoul de traseu. */
.rc-nr {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .1rem .6rem;
border-radius: 4px;
background: #e7eef4;
color: var(--hs-primary, #134a6d);
font-size: 12px;
font-weight: 700;
line-height: 1.7;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.rc-nr i { font-size: 11px; }
/* ============================================================
Modul piese — cautare stoc + statusuri (Faza 1)
============================================================ */
/* ---- Paleta modulului de piese ----
Aliasuri catre paleta semantica din `:root` (inceputul fisierului), unde a fost promovata
pentru ca aceleasi stari apar in toata aplicatia. Numele `--pq-*` raman ca sa nu se rescrie
tot modulul; valorile se schimba dintr-un singur loc. */
:root {
--pq-neutral-bg: var(--hs-neutral-bg); --pq-neutral-fg: var(--hs-neutral-fg); --pq-neutral-br: var(--hs-neutral-br);
--pq-info-bg: var(--hs-info-bg); --pq-info-fg: var(--hs-info-fg); --pq-info-br: var(--hs-info-br);
--pq-brand-bg: var(--hs-brand-bg); --pq-brand-fg: var(--hs-brand-fg); --pq-brand-br: var(--hs-brand-br);
--pq-good-bg: var(--hs-good-bg); --pq-good-fg: var(--hs-good-fg); --pq-good-br: var(--hs-good-br);
--pq-warn-bg: var(--hs-warn-bg); --pq-warn-fg: var(--hs-warn-fg); --pq-warn-br: var(--hs-warn-br);
--pq-bad-bg: var(--hs-bad-bg); --pq-bad-fg: var(--hs-bad-fg); --pq-bad-br: var(--hs-bad-br);
}
/* Disponibilitatea in stoc. Erau cinci pastile pline, in culori pure (verde/galben/
portocaliu/albastru/rosu Bootstrap): pe un tabel intreg aratau ca un semafor si trageau
ochiul inaintea datelor. Acum sunt din aceeasi familie ca `.pq-badge` — fundal deschis,
text inchis, contur — deci se citesc ca eticheta, nu ca alarma. Punctul colorat pastreaza
citirea rapida „dintr-o privire", care era rostul culorilor pline. */
.part-status {
display: inline-block;
padding: .16em .5em;
font-size: 11px;
font-weight: 600;
line-height: 1.45;
border-radius: 4px;
border: 1px solid transparent;
white-space: nowrap;
}
.part-status::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin-right: .35rem;
border-radius: 50%;
background: currentColor;
vertical-align: middle;
}
.part-status--available { background: var(--pq-good-bg); color: var(--pq-good-fg); border-color: var(--pq-good-br); }
.part-status--limited { background: var(--pq-warn-bg); color: var(--pq-warn-fg); border-color: var(--pq-warn-br); }
.part-status--reserved { background: var(--pq-warn-bg); color: #9a5218; border-color: var(--pq-warn-br); }
.part-status--supply { background: var(--pq-info-bg); color: var(--pq-info-fg); border-color: var(--pq-info-br); }
.part-status--unavailable { background: var(--pq-bad-bg); color: var(--pq-bad-fg); border-color: var(--pq-bad-br); }
/* ---- Coada magaziei (/part-queue) ----
Antet de sectiune in interiorul barei de filtre: titlul spune CE e lista, subtitlul
PE CE se uita utilizatorul. Aceleasi primitive ca la listele de modul. */
.hs-section {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: .75rem;
margin-bottom: .85rem;
}
.hs-section__title {
display: flex;
align-items: center;
gap: .5rem;
margin: 0;
font-size: 15px;
font-weight: 650;
letter-spacing: -.01em;
color: var(--hs-text, #101828);
}
.hs-section__title i { color: var(--hs-primary, #134a6d); font-size: 16px; }
.hs-section__sub {
margin: .2rem 0 0;
font-size: 12px;
color: var(--hs-muted, #667085);
}
.hs-section__tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Fara filtre dedesubt, antetul nu mai are ce sa separe. */
.hs-filters > .hs-section:last-child { margin-bottom: 0; }
/* Eticheta de stare / prioritate. Colturi mici (nu pilula) si greutate medie: intr-un
tabel dens, pastilele rotunde si bold-ul tare fac pagina sa para zgomotoasa. */
.pq-badge {
display: inline-block;
padding: .16em .5em;
border-radius: 4px;
border: 1px solid transparent;
font-size: 11px;
font-weight: 600;
line-height: 1.45;
white-space: nowrap;
background: var(--pq-neutral-bg);
color: var(--pq-neutral-fg);
border-color: var(--pq-neutral-br);
}
.pq-badge--info { background: var(--pq-info-bg); color: var(--pq-info-fg); border-color: var(--pq-info-br); }
.pq-badge--brand { background: var(--pq-brand-bg); color: var(--pq-brand-fg); border-color: var(--pq-brand-br); }
.pq-badge--good { background: var(--pq-good-bg); color: var(--pq-good-fg); border-color: var(--pq-good-br); }
.pq-badge--warn { background: var(--pq-warn-bg); color: var(--pq-warn-fg); border-color: var(--pq-warn-br); }
.pq-badge--bad { background: var(--pq-bad-bg); color: var(--pq-bad-fg); border-color: var(--pq-bad-br); }
/* Prioritatea normala e cazul obisnuit: se scrie, nu se coloreaza. */
.pq-badge--quiet { background: transparent; border-color: transparent; color: var(--hs-muted, #5d6b80); font-weight: 500; }
/* Punct de prioritate: la urgent, ochiul prinde intai pata de culoare, apoi textul. */
.pq-badge--dot::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin-right: .35rem;
border-radius: 50%;
background: currentColor;
vertical-align: middle;
}
/* ---- Ecranul cozii de piese (/part-queue) ----
Rafinari de densitate si relief, scopate pe `.pq-board` ca sa nu atinga alte module:
colturi mai putin rotunde, umbre in doua straturi foarte fine, antet de tabel discret,
randuri mai stranse. Enterprise inseamna aici „mai putin decor, mai multa informatie". */
.pq-board .hs-card {
border-radius: 6px;
border-color: var(--hs-line, #e6e9ec);
box-shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .04);
}
.pq-board .hs-stat { border-radius: 6px; padding: .8rem .95rem; }
.pq-board .hs-stat__icon { width: 36px; height: 36px; border-radius: 8px; font-size: 16px; }
.pq-board .hs-stat__val { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pq-board .hs-stat__lbl {
font-size: var(--hs-fs-2xs, 10px);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle, #98a2b3);
}
/* Antetul de tabel: mic, uppercase, fara greutate mare — e o eticheta, nu un titlu. */
.pq-board table.table-enterprise thead th {
font-size: var(--hs-fs-2xs, 10px);
text-transform: uppercase;
letter-spacing: .07em;
color: var(--hs-subtle, #98a2b3);
font-weight: 600;
padding-top: .55rem;
padding-bottom: .55rem;
}
.pq-board table.table-enterprise tbody td { padding-top: .5rem; padding-bottom: .5rem; }
.pq-board .hs-section__title { font-size: 14px; }
/* Butoanele de actiune: contur foarte fin, ca randul sa nu para plin de butoane. */
.pq-board .pq-actions .btn { border-color: #dde3ea; }
.pq-board .pq-actions .btn:hover { border-color: currentColor; }
/* Cap de grup: o fisa, cu liniile ei dedesubt. Banda e discreta — structureaza, nu striga. */
.pq-group > td {
background: var(--hs-surface-alt, #fafbfc);
border-top: 1px solid var(--hs-line, #e6e9ec) !important;
/* Linia navy din stanga tine grupul legat vizual, fara sa umple randul cu culoare. */
box-shadow: inset 3px 0 0 var(--hs-primary, #134a6d);
padding: .35rem .9rem !important;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
color: var(--hs-primary, #134a6d) !important;
}
tbody > .pq-group:first-child > td { border-top: 0 !important; }
.pq-group i { margin-right: .4rem; opacity: .8; }
.pq-group__sheet a { color: var(--hs-primary, #134a6d); font-weight: 700; text-decoration: none; }
.pq-group__sheet a:hover { text-decoration: underline; }
.pq-group__count {
display: inline-block;
min-width: 20px;
margin-left: .5rem;
padding: .05em .45em;
border-radius: 4px;
background: #fff;
border: 1px solid var(--hs-line, #e6e9ec);
font-size: 11px;
font-weight: 600;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Zebra ar numara si capetele de grup, deci alternanta ar iesi neregulata: pe lista
grupata structura o dau benzile de fisa, nu fundalul randurilor. */
table[data-group-by-sheet] tbody tr:nth-child(even):not(.pq-group) > td { background: transparent; }
/* Capul de grup nu e o linie de lucru: nu raspunde la hover. Bootstrap 5.3 picteaza
hover-ul prin `--bs-table-bg-state`, deci acolo se anuleaza, nu pe `background`. */
table[data-group-by-sheet] tbody tr.pq-group:hover > td {
--bs-table-bg-state: var(--hs-surface-alt, #fafbfc);
background: var(--hs-surface-alt, #fafbfc);
}
/* Denumirea piesei — ancora de citire a randului, ca numele clientului in /customer. */
.pq-part__name { color: var(--hs-text, #101828); font-weight: 600; }
/* Cantitatea: cifre tabulare, ca sa se alinieze pe coloana. */
.pq-qty {
display: inline-block;
min-width: 28px;
padding: .1em .4em;
border-radius: 6px;
background: #f2f4f7;
font-weight: 650;
font-variant-numeric: tabular-nums;
color: var(--hs-text, #101828);
}
/* Actiunile stau intr-un grup compact, aliniat la dreapta (trei formuri inline). */
.pq-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .3rem; }
.pq-actions .btn { --bs-btn-padding-x: .5rem; --bs-btn-padding-y: .2rem; line-height: 1.3; }
.part-search-results table { margin-bottom: 0; }
.part-search-results .part-pick { cursor: pointer; }
.part-search-empty {
padding: .5rem .25rem;
font-size: 13px;
color: #8a929b;
}
/* Modalul „Solicită piesă”: piesa aleasa, intr-un bloc de rezumat deasupra campurilor. */
.pr-part {
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
padding: .65rem .8rem;
background: #f9fafb;
}
.pr-part__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .75rem;
}
.pr-part__code { font-size: 12px; color: #8a929b; }
.pr-part__price { font-weight: 700; color: var(--hs-primary, #134a6d); white-space: nowrap; }
.pr-part__name { font-weight: 600; line-height: 1.35; margin-top: .1rem; }
.pr-part__stock { font-size: 12px; margin-top: .35rem; }
.pr-part__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .75rem;
margin-top: .5rem;
padding-top: .5rem;
border-top: 1px dashed var(--hs-line, #e6e9ec);
}
.pr-part__total-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8a929b; }
.pr-part__total-val { font-weight: 700; color: var(--hs-primary, #134a6d); white-space: nowrap; }
/* ============================================================
Tab „Piese" din fisa — layout ENTERPRISE (banda KPI + panouri).
Neutru la context: functioneaza si in modal (.modal-sheet-view),
si pe pagina full /sheet/view. Foloseste tokenii deja definiti
(--hs-line / --hs-line-soft / --hs-ink / --hs-muted / --hs-primary).
============================================================ */
.sv-parts {
--hs-line: var(--hs-line, #e6e9ec);
display: flex;
flex-direction: column;
gap: .85rem;
}
/* Banda de indicatori (KPI) — sinteza rapida sus. */
.sv-parts .svp-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: .5rem;
}
.sv-parts .svp-stat {
position: relative;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
background: #fff;
padding: .55rem .7rem;
display: flex;
flex-direction: column;
gap: .12rem;
overflow: hidden;
}
.sv-parts .svp-stat::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--hs-primary, #134a6d);
opacity: .85;
}
.sv-parts .svp-stat > i {
position: absolute;
right: .5rem;
top: .5rem;
font-size: 1.05rem;
color: var(--hs-primary, #134a6d);
opacity: .2;
}
.sv-parts .svp-stat-val {
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
color: var(--hs-ink, #1f2a37);
font-variant-numeric: tabular-nums;
}
.sv-parts .svp-stat-lbl {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--hs-muted, #667085);
}
/* Panouri de sectiune — antet gri + corp alb, borduri fine, fara umbra. */
.sv-parts .svp-panel {
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.sv-parts .svp-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .5rem .8rem;
background: #f7f8fa;
border-bottom: 1px solid var(--hs-line, #e6e9ec);
}
.sv-parts .svp-panel-title {
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-ink, #1f2a37);
}
.sv-parts .svp-panel-title > i {
color: var(--hs-primary, #134a6d);
font-size: 13px;
}
.sv-parts .svp-count {
font-size: 11px;
font-weight: 700;
line-height: 1;
padding: .2rem .4rem;
border-radius: 999px;
background: #e9edf1;
color: var(--hs-muted, #667085);
font-variant-numeric: tabular-nums;
}
.sv-parts .svp-panel-head form { margin: 0; }
.sv-parts .svp-panel-body { padding: .75rem .8rem; }
/* ---- „Necesar piese” (tab-ul Piese al fisei) ----
Aceleasi primitive ca in coada depozitului: tabelul scroleaza in containerul lui,
fara sa lateasca panoul, iar antetul si celulele vin din `.table-enterprise`. */
.sv-parts .svp-need { overflow-x: auto; margin: -.25rem 0; }
.sv-parts .svp-need table.table-enterprise thead th { background: #fff; }
.sv-parts .svp-need table.table-enterprise > tbody > tr:first-child > td { border-top: 0; }
.sv-parts .svp-need table.table-enterprise > tbody > tr:last-child > * { border-bottom: 0; }
/* Liniile inchise (rezervate/respinse/anulate) sunt istoric: raman lizibile, dar retrase.
`text-muted` pe `tr` era anulat de culorile celulelor din `.table-enterprise`. */
.sv-parts .svp-need--closed > td { color: var(--hs-muted, #667085); }
.sv-parts .svp-need--closed .pq-part__name { color: var(--hs-muted, #667085); font-weight: 600; }
.sv-parts .svp-need--closed .pq-qty { background: #f5f6f8; color: var(--hs-muted, #667085); }
/* Motivul respingerii, pe linia respinsa din necesar. Randul e retras (linie inchisa),
deci nota isi cere singura culoarea, altfel s-ar pierde exact informatia cautata. */
.sv-parts .svp-reject-note {
display: flex;
align-items: flex-start;
gap: .35rem;
margin-top: .25rem;
padding: .3rem .45rem;
border-left: 3px solid #f1aeb5;
border-radius: 0 4px 4px 0;
background: #fdf2f3;
font-size: 12px;
color: #b42318;
}
.sv-parts .svp-reject-note i { margin-top: .1rem; font-size: 12px; }
.sv-parts .svp-reject-note strong { font-weight: 650; }
/* Legenda de status pentru cautare. */
.sv-parts .svp-legend {
display: flex;
flex-wrap: wrap;
gap: .35rem .9rem;
margin-top: .6rem;
padding-top: .55rem;
border-top: 1px dashed var(--hs-line, #e6e9ec);
}
.sv-parts .svp-legend > span {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: 11px;
font-weight: 600;
color: var(--hs-muted, #667085);
}
.sv-parts .svp-legend .dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}
/* Sub-antet (predare / retur in panoul „Mișcări piese"). */
.sv-parts .svp-subhead {
display: flex;
align-items: center;
gap: .35rem;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--hs-muted, #667085);
margin-bottom: .5rem;
padding-bottom: .35rem;
border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.sv-parts .svp-subhead i { color: var(--hs-primary, #134a6d); }
/* Liste de bifat (piese de predat / returnat) — randuri-card selectabile. */
.sv-parts .svp-check-list {
display: flex;
flex-direction: column;
gap: .3rem;
margin-bottom: .65rem;
}
.sv-parts .svp-check-list label {
display: flex;
align-items: center;
gap: .55rem;
margin: 0;
padding: .35rem .55rem;
font-size: 12px;
border: 1px solid var(--hs-line-soft, #eef1f4);
border-radius: 6px;
background: #fbfcfd;
cursor: pointer;
transition: background-color .12s ease, border-color .12s ease;
}
.sv-parts .svp-check-list label:hover {
background: #f4f6f8;
border-color: var(--hs-line, #e6e9ec);
}
/* Documente (procese-verbale / devize) — card intern cu antet propriu. */
.sv-parts .svp-doc,
.sv-estimates .svp-doc {
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 7px;
overflow: hidden;
background: #fff;
}
.sv-parts .svp-doc-head,
.sv-estimates .svp-doc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .45rem .65rem;
background: #fafbfc;
border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.sv-parts .svp-doc-code,
.sv-estimates .svp-doc-code { font-size: 12px; }
.sv-parts .svp-doc-body,
.sv-estimates .svp-doc-body { padding: .6rem .65rem; }
.sv-parts .svp-doc-body table,
.sv-estimates .svp-doc-body table { margin-bottom: .5rem; }
/* Responsive: pe ecrane inguste banda KPI trece pe 2 coloane. */
@media (max-width: 575.98px) {
.sv-parts .svp-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
DASHBOARD HR — grafice bar/coloană (fără librărie), stat-tiles, atenție
========================================================================== */
.hr-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .hr-dash-grid { grid-template-columns: 1fr; } }
.hr-chartcard { background: #fff; border: 1px solid #e6e6e1; border-radius: 12px; box-shadow: 0 1px 3px rgba(17,16,12,.05); padding: .9rem 1.05rem 1rem; }
.hr-chartcard__title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #8a8f98; font-weight: 700; margin-bottom: .9rem; }
/* Bare orizontale (headcount pe departament) */
.hr-bars { display: flex; flex-direction: column; gap: .55rem; }
.hr-barrow { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: .6rem; }
.hr-bar-label { font-size: .8rem; color: #26251f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-bar-track { height: 12px; background: #eef1f4; border-radius: 999px; overflow: hidden; }
.hr-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1a5a82, #134a6d); min-width: 3px; }
.hr-bar-val { font-size: .8rem; font-weight: 700; color: #134a6d; text-align: right; font-variant-numeric: tabular-nums; }
/* Coloane (angajări pe lună) */
.hr-cols { display: flex; align-items: flex-end; gap: .5rem; height: 130px; padding-top: 6px; }
.hr-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.hr-col-val { font-size: .72rem; font-weight: 700; color: #6b7079; font-variant-numeric: tabular-nums; }
.hr-col-fill { width: 62%; max-width: 34px; min-height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #2a78d6, #134a6d); }
.hr-col-lbl { font-size: .68rem; color: #8a8f98; text-transform: uppercase; letter-spacing: .04em; }
/* Listă de atenție (zile rămase) */
.hr-att-days { display: inline-block; min-width: 46px; text-align: center; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.hr-att-days--warn { background: #fff4e0; color: #a5730f; }
.hr-att-days--soon { background: #fdeaea; color: #b23b3b; }
.hr-att-days--ok { background: #e6f4ea; color: #1e7a3c; }
.hr-empty-soft { padding: 1.4rem 1rem; text-align: center; color: #9aa0a8; font-style: italic; font-size: .86rem; }
/* ==========================================================================
FIȘĂ ANGAJAT ENTERPRISE — header profil + timeline
========================================================================== */
.hr-prof { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.25rem; background: linear-gradient(180deg, #fbfbfa, #f4f6f9); border: 1px solid #e5e5e0; border-radius: 14px; box-shadow: 0 1px 3px rgba(17,16,12,.05); flex-wrap: wrap; }
.hr-prof__avatar { width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #fff; text-transform: uppercase; background: linear-gradient(135deg, #1a5a82, #0e3a58); box-shadow: 0 8px 20px rgba(15,58,88,.28); }
.hr-prof__id { flex: 1 1 240px; min-width: 0; }
.hr-prof__name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: #0f1b34; line-height: 1.1; }
.hr-prof__meta { color: #6b7079; font-size: .84rem; margin-top: 3px; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.hr-prof__meta a { color: #6b7079; text-decoration: none; } .hr-prof__meta a:hover { color: #134a6d; }
.hr-prof__kpis { display: flex; gap: 1.4rem; align-items: center; padding-left: .5rem; }
.hr-prof__kpi { display: flex; flex-direction: column; }
.hr-prof__kpi b { font-size: 1.05rem; font-weight: 800; color: #134a6d; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hr-prof__kpi span { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: #8a8f98; font-weight: 600; margin-top: 2px; }
@media (max-width: 767px) { .hr-prof__kpis { padding-left: 0; gap: 1rem; } }
.hr-timeline { position: relative; padding: .3rem 0 .3rem 2rem; }
.hr-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: #e6e6e1; }
.hr-tl-item { position: relative; padding: 0 0 1.05rem 0; }
.hr-tl-item:last-child { padding-bottom: 0; }
.hr-tl-dot { position: absolute; left: -1.72rem; top: 2px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; box-shadow: 0 0 0 3px #fff; }
.hr-tl-dot.navy { background: #134a6d; } .hr-tl-dot.blue { background: #2a5da8; } .hr-tl-dot.green { background: #2e7d46; } .hr-tl-dot.amber { background: #a5730f; } .hr-tl-dot.red { background: #c0392b; }
.hr-tl-date { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #9aa0a8; font-weight: 600; }
.hr-tl-title { font-size: .9rem; font-weight: 700; color: #1c1b18; margin: 1px 0; }
.hr-tl-text { font-size: .82rem; color: #6b7079; }
/* ============================================================================
Program de lucru (Setări → Program de lucru) — layout enterprise.
Modalele folosesc acelasi tipar ca modalul de fisa: body gri-deschis cu panouri
albe flotante, antet cu emblema + eyebrow, sectiuni cu titlu discret.
========================================================================= */
/* Titlu de card, consistent cu restul modulelor enterprise. */
.ws-card-title {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .84rem;
font-weight: 700;
letter-spacing: -.01em;
color: #1c1b18;
}
.ws-card-title i { color: var(--hs-primary, #134a6d); font-size: 1rem; }
/* ---- Antetul modalelor (emblema + eyebrow + titlu) ---- */
.ws-modal .modal-header {
background-image: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .14));
align-items: center;
}
.ws-modal-head { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.ws-modal-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .18);
font-size: 1.05rem;
flex: 0 0 auto;
}
.ws-modal-eyebrow {
display: block;
font-size: .62rem;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
opacity: .78;
line-height: 1;
margin-bottom: 3px;
}
.ws-modal .modal-title { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
/* ---- Corpul modalelor: fundal gri, panouri albe ---- */
.ws-modal .modal-body { background: #f6f7f9; padding: 1rem; }
/* Footerul ramane alb, dar NU cand modalul cere explicit banda navy. */
.ws-modal .modal-footer:not(.modal-general-footer) { background: #fff; border-top: 1px solid #eef1f4; }
/* Panoul auto-generat (JS) pentru modalele fara structura proprie: aceleasi margini,
dar fara sa dubleze spatierea cand contine un singur formular. */
.ws-modal .modal-body > .ws-panel:only-child { margin-bottom: 0; }
.ws-panel {
background: #fff;
border: 1px solid #edf0f2;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
margin-bottom: .85rem;
overflow: hidden;
}
.ws-panel:last-child { margin-bottom: 0; }
.ws-panel-head {
padding: .6rem .9rem;
border-bottom: 1px solid #f1f3f5;
background: #fbfcfd;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #667085;
}
.ws-panel-head i { color: var(--hs-primary, #134a6d); }
/* ---- Lista de devize (tab-ul Deviz) ----
Un rand per document, cu liniile ascunse pana sunt cerute. Randul de detaliu e mereu in DOM
(un cu un ), deci nu are chenar propriu si nu lasa spatiu cand e
inchis — de aici `border: 0` pe celula lui. */
.sv-est thead th {
background: var(--hs-neutral-bg);
border-bottom: 1px solid var(--hs-line);
text-transform: uppercase;
font-size: var(--hs-fs-xs);
letter-spacing: .04em;
font-weight: 600;
color: var(--hs-muted);
white-space: nowrap;
}
.sv-est > tbody > tr.sv-est-row > td {
border-top: 1px solid var(--hs-line-soft);
vertical-align: middle;
}
.sv-est > tbody > tr.sv-est-row:hover > td { background: var(--hs-surface-alt); }
.sv-est-date { font-size: var(--hs-fs-sm); color: var(--hs-muted); }
.sv-est-total { font-weight: 700; color: var(--hs-text); font-variant-numeric: tabular-nums; }
.sv-est-note { font-size: var(--hs-fs-2xs); color: var(--hs-subtle); margin-top: .1rem; }
/* Proforma emisa pe un deviz: pastila discreta, nu un al doilea badge de stare — devizul are
o singura stare, iar asta e o legatura catre alt document. Cea anulata se stinge in gri. */
.sv-est-proforma {
display: inline-flex;
align-items: center;
gap: .25rem;
margin-right: .35rem;
padding: .05rem .35rem;
border: 1px solid var(--hs-good-br, #cee3d8);
border-radius: var(--hs-radius-sm);
background: var(--hs-good-bg, #eaf3ed);
color: var(--hs-good-fg, #256b4b);
font-size: var(--hs-fs-2xs);
white-space: nowrap;
}
.sv-est-proforma--off {
border-color: var(--hs-line, #e6e9ec);
background: var(--hs-surface-alt, #fafbfc);
color: var(--hs-subtle, #98a2b3);
}
.doc-detail__idmain .sv-est-proforma { font-size: var(--hs-fs-xs); padding: .1rem .45rem; }
/* Tabul „Fișa client": documentul se vede ca PDF, nu re-randat în HTML — previzualizarea e
chiar ce se tipărește și se semnează. */
.sv-report__hint { font-size: var(--hs-fs-sm); font-weight: 400; color: var(--hs-muted); margin-left: .5rem; }
.sv-report__preview {
width: 100%;
height: calc(100vh - 400px);
min-height: 420px;
border: 0;
display: block;
background: var(--hs-surface-alt);
}
.sv-report-log { font-size: var(--hs-fs-sm); }
.sv-report-log thead th {
background: transparent;
border-bottom: 1px solid var(--hs-line-soft);
text-transform: uppercase;
font-size: var(--hs-fs-2xs);
letter-spacing: .05em;
color: var(--hs-subtle);
font-weight: 700;
}
.sv-report-log tbody td { border-top: 1px solid var(--hs-line-soft); color: var(--hs-text-soft); }
/* Istoricul documentului: o cronologie compactă, citită de sus în jos. Jurnalul e append-only,
deci un rând anulat rămâne vizibil — tăiat, nu șters. */
.sv-est-history { border-top: 1px solid var(--hs-line); background: var(--hs-surface); }
.sv-est-history__head {
display: flex;
align-items: center;
gap: .4rem;
padding: .45rem .75rem;
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
border-bottom: 1px solid var(--hs-line-soft);
}
.sv-est-timeline { margin: 0; padding: .35rem .75rem .55rem; list-style: none; }
.sv-est-timeline li {
display: flex;
align-items: baseline;
gap: .55rem;
padding: .2rem 0;
font-size: var(--hs-fs-sm);
flex-wrap: wrap;
}
.sv-est-timeline li.is-canceled { text-decoration: line-through; opacity: .55; }
.sv-est-timeline__when {
color: var(--hs-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
min-width: 8.5rem;
}
.sv-est-timeline__what { font-weight: 600; color: var(--hs-text); }
.sv-est-timeline__note { color: var(--hs-muted); }
/* Cine a facut actiunea: era 10px in `--hs-subtle` (tonul rezervat elementelor decorative) si
impins in marginea randului, unde se citea ca ornament, nu ca raspuns la „cine". Ramane la
dreapta — coloana se citeste pe verticala — dar cu iconita, contrast si un pic de spatiu
fata de nota din stanga lui. */
.sv-est-timeline__who {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: .25rem;
padding-left: .5rem;
color: var(--hs-muted);
font-size: var(--hs-fs-xs);
white-space: nowrap;
}
.sv-est-timeline__who i { color: var(--hs-subtle); font-size: var(--hs-fs-sm); }
/* ---- Lista de documente emise (tab-ul Facturare) ----
Acelasi tipar ca lista de devize: un rand per document, iar liniile si incasarile se
deschid la cerere. Chitantele erau randuri mereu vizibile sub factura — o factura cu trei
incasari impingea restul documentelor in afara ecranului. */
.inv-toggle {
display: inline-flex;
align-items: center;
gap: .4rem;
border: 0;
background: none;
padding: 0;
color: var(--hs-primary);
font-weight: 600;
}
.inv-toggle i { color: var(--hs-subtle); font-size: 11px; transition: transform .15s ease; }
.inv-toggle:not(.collapsed) i { transform: rotate(90deg); color: var(--hs-primary); }
.inv-num--plain { font-weight: 600; color: var(--hs-text); }
/* Numarul documentului: buton propriu, separat de chevron — deschide modalul de detalii,
la fel ca la devize (`.sv-est-code-btn`). */
.inv-doc { display: inline-flex; align-items: center; gap: .35rem; }
.inv-num-btn {
border: 0;
background: none;
padding: 0;
color: var(--hs-primary);
font-weight: 600;
}
.inv-num-btn:hover .inv-num { text-decoration: underline; }
.inv-detail-row > td { border: 0 !important; }
.inv-row:has(.inv-toggle:not(.collapsed)) > td { background: var(--hs-brand-bg); }
/* Indentat si cu banda de accent: detaliul randului de deasupra, nu inca un document. */
.inv-detail {
margin: 0 .5rem .6rem 2rem;
border: 1px solid var(--hs-line);
border-left: 3px solid var(--hs-primary);
border-radius: var(--hs-radius-sm);
background: var(--hs-surface-alt);
overflow: hidden;
}
.inv-lines { font-size: var(--hs-fs-sm); background: var(--hs-surface); margin-bottom: 0; }
.inv-lines thead th {
background: transparent;
border-bottom: 1px solid var(--hs-line-soft);
text-transform: uppercase;
font-size: var(--hs-fs-2xs);
letter-spacing: .05em;
color: var(--hs-subtle);
font-weight: 700;
}
.inv-lines tbody td { border-top: 1px solid var(--hs-line-soft); color: var(--hs-text-soft); }
.inv-lines tfoot td {
border-top: 1px solid var(--hs-line);
background: var(--hs-surface-alt);
font-weight: 700;
color: var(--hs-text);
font-variant-numeric: tabular-nums;
}
.inv-ico { color: var(--hs-subtle); margin-right: .3rem; }
.inv-sub { font-weight: 500; color: var(--hs-muted); font-variant-numeric: tabular-nums; }
/* Incasarile documentului, sub linii. */
.inv-receipts { border-top: 1px solid var(--hs-line); }
.inv-receipts__head {
padding: .45rem .75rem;
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
}
.inv-receipt-row {
display: flex;
align-items: center;
gap: .75rem;
padding: .4rem .75rem;
border-top: 1px solid var(--hs-line-soft);
background: var(--hs-surface);
font-size: var(--hs-fs-sm);
}
.inv-receipt-main { display: flex; align-items: baseline; gap: .4rem; min-width: 0; flex: 1 1 auto; }
.inv-receipt-main i { color: var(--hs-good-fg); }
.inv-receipt-amount { font-weight: 700; color: var(--hs-text); font-variant-numeric: tabular-nums; }
/* ==========================================================================
Ecranul de Setari (/setting) — rail de sectiuni la stanga („pills" pe coloana),
continutul incarcat prin AJAX la dreapta.
========================================================================== */
.st-tabs {
display: grid;
grid-template-columns: 236px minmax(0, 1fr);
gap: .9rem;
align-items: start;
}
/* Rail-ul ramane la vedere cat derulezi o sectiune lunga (serii, sabloane orare). */
.st-rail {
position: sticky;
top: .5rem;
align-self: start;
padding: .4rem;
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius);
}
.st-pills { gap: 2px; margin: 0; }
/* Specificitate pe doua clase: Bootstrap se incarca dupa app.css si `.nav-pills .nav-link`
si-ar impune propriile culori pe pilula activa. */
.st-pills .nav-link,
.st-pills > li > .nav-link {
display: flex;
align-items: center;
gap: .55rem;
width: 100%;
text-align: left;
border: 1px solid transparent;
border-radius: var(--hs-radius-sm);
padding: .5rem .65rem;
font-size: var(--hs-fs-md);
font-weight: 600;
color: var(--hs-text-soft);
background: transparent;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.st-pills .nav-link i { color: var(--hs-subtle); font-size: 15px; flex: 0 0 auto; }
.st-pill-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.st-pills .nav-link:hover {
color: var(--hs-primary);
background: var(--hs-primary-soft);
border-color: var(--hs-brand-br);
}
.st-pills .nav-link:hover i { color: var(--hs-primary); }
.st-pills .nav-link.active,
.st-pills > li > .nav-link.active {
color: #fff;
background: var(--hs-primary);
border-color: var(--hs-primary);
}
.st-pills .nav-link.active i { color: rgba(255, 255, 255, .85); }
.st-pills .nav-link:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: -2px; }
/* Panoul sectiunii: pastreaza o inaltime minima cat tine cererea, ca pagina sa nu salte. */
.st-panel { min-height: 240px; }
.st-loading,
.st-error {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 240px;
color: var(--hs-muted);
font-size: var(--hs-fs-md);
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius);
}
.st-error { color: var(--hs-bad-fg); background: var(--hs-bad-bg); border-color: var(--hs-bad-br); }
.st-loading .spinner-border { color: var(--hs-primary); }
/* Legaturi catre modulele de sine statatoare (Utilizatori, Companie, Profil, Accese),
sub sectiuni: aceeasi coloana, dar despartite printr-o linie — nu sunt tab-uri. */
.st-links {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
margin-top: .5rem;
padding-top: .5rem;
border-top: 1px solid var(--hs-line-soft);
}
.st-links__lbl {
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
padding: .15rem .65rem .25rem;
}
.st-link {
display: flex;
align-items: center;
gap: .55rem;
font-size: var(--hs-fs-sm);
font-weight: 500;
color: var(--hs-text-soft);
text-decoration: none;
border-radius: var(--hs-radius-sm);
padding: .4rem .65rem;
}
.st-link i { color: var(--hs-subtle); font-size: 14px; }
.st-link::after {
content: '\F135'; /* bi-arrow-up-right: legatura duce in ALT modul, nu deschide o sectiune */
font-family: 'bootstrap-icons';
margin-left: auto;
font-size: 10px;
color: var(--hs-subtle);
opacity: .7;
}
.st-link:hover { background: var(--hs-primary-soft); color: var(--hs-primary); }
.st-link:hover i, .st-link:hover::after { color: var(--hs-primary); }
/* Sub „lg" rail-ul trece deasupra continutului, iar pilulele redevin un rand orizontal
derulabil — pe ecran ingust o coloana de 236px ar manca jumatate din latime. */
@media (max-width: 991.98px) {
.st-tabs { grid-template-columns: minmax(0, 1fr); }
.st-rail { position: static; }
.st-pills {
flex-direction: row !important;
flex-wrap: nowrap;
overflow-x: auto;
gap: .35rem;
}
.st-pills .nav-link { width: auto; white-space: nowrap; }
.st-links { flex-direction: row; flex-wrap: wrap; align-items: center; }
.st-link { border: 1px solid var(--hs-line); border-radius: 999px; }
.st-link::after { content: none; }
}
/* ---- Logo-ul companiei (/company) ----
Previzualizarea e cât zona reală de pe document, nu o miniatură: logo-ul se alege o dată,
dar apare pe fiecare factură, deci trebuie văzut la mărimea la care contează. */
.co-logo { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.co-logo__preview {
width: 100%;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--hs-line-strong);
border-radius: var(--hs-radius-sm);
/* Tablă de șah discretă: pe fundal alb nu s-ar vedea dacă logo-ul are transparență. */
background:
linear-gradient(45deg, var(--hs-surface-alt) 25%, transparent 25%, transparent 75%, var(--hs-surface-alt) 75%),
linear-gradient(45deg, var(--hs-surface-alt) 25%, transparent 25%, transparent 75%, var(--hs-surface-alt) 75%),
#fff;
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
overflow: hidden;
padding: .5rem;
}
.co-logo__preview img { max-width: 100%; max-height: 84px; object-fit: contain; }
.co-logo__mono {
width: 52px;
height: 52px;
border-radius: var(--hs-radius-sm);
background: var(--hs-primary);
color: #fff;
font-weight: 700;
font-size: 18px;
letter-spacing: .5px;
display: flex;
align-items: center;
justify-content: center;
}
.co-logo__meta { margin: 0; font-size: 11px; color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.co-logo__hint { font-size: 11.5px; color: var(--hs-muted); line-height: 1.45; }
.co-logo__form { display: flex; align-items: center; gap: .5rem; }
.co-logo__delete .btn { font-size: 12px; text-decoration: none; }
/* ---- Decuparea logo-ului (#modal_logo_crop) ---- */
.co-crop { display: flex; flex-direction: column; gap: .75rem; }
/* Cropper.js are nevoie de o înălțime explicită: pe un container care se dimensionează după
imagine, zona de decupare sare la fiecare zoom. */
.co-crop__stage {
height: 340px;
background: var(--hs-surface-alt);
border-radius: var(--hs-radius-sm);
overflow: hidden;
}
.co-crop__stage img { display: block; max-width: 100%; }
.co-crop__tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.co-crop__hint { font-size: 12px; color: var(--hs-muted); }
@media (max-width: 575.98px) {
.co-crop__stage { height: 240px; }
}
/* ==========================================================================
Modalul „Deviz nou" (#modal_estimate_preview) — confirmarea generarii.
Ecranul raspunde la trei intrebari, in ordinea asta: cat iese, din ce se compune,
ce nu e in regula. De aceea sumarul sta primul, liniile grupate pe tip dedesubt,
iar avertismentul la final.
E si ecran de LUCRU: pretul unitar cu TVA se corecteaza pe fiecare linie, iar totalurile
se recalculeaza pe loc (pages/sheet-estimate-preview.js). Coloana editabila are latime
fixa si numere tabulare — un tabel de document, nu un formular.
Culorile vin din tokenii `--hs-*`.
========================================================================== */
/* Dialogul: mai lat decat un modal obisnuit (sapte coloane, una editabila), dar plafonat,
ca liniile sa nu se intinda pe toata latimea unui monitor lat si sa devina greu de urmarit. */
.modal-estimate-preview { max-width: min(1180px, calc(100vw - 2rem)); }
/* ---- Banda de sumar: compozitia la stanga, cifra finala la dreapta ---- */
.ep-summary {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
gap: .75rem 1rem;
padding: .75rem .95rem;
margin-bottom: .85rem;
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-left: 3px solid var(--hs-primary);
border-radius: 10px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
/* Metricile: eticheta mica deasupra, cifra dedesubt — se citesc dintr-o privire, pe o linie. */
.ep-metrics { display: flex; flex-wrap: wrap; align-items: stretch; gap: .35rem 1.35rem; }
.ep-metric { display: flex; flex-direction: column; justify-content: center; min-width: 4.5rem; }
.ep-metric-lbl {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-subtle);
white-space: nowrap;
}
.ep-metric-lbl i { color: var(--hs-subtle); font-size: 12px; }
.ep-metric-val {
font-size: var(--hs-fs-md, 14px);
font-weight: 700;
color: var(--hs-text);
font-variant-numeric: tabular-nums;
line-height: 1.3;
}
.ep-summary-total { text-align: right; margin-left: auto; }
.ep-total-lbl {
display: block;
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-subtle);
}
.ep-total-val {
display: block;
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -.02em;
color: var(--hs-text);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.ep-total-sub { font-size: var(--hs-fs-xs); color: var(--hs-muted); font-variant-numeric: tabular-nums; }
/* Semnalul „am umblat la preturi": totalul nu mai e cel din catalog, deci trebuie spus. */
.ep-total-sub.js-ep-edited { display: inline-flex; align-items: center; gap: .3rem; color: var(--hs-warn-fg, #92400e); font-weight: 600; }
.ep-total-sub.js-ep-edited.d-none { display: none !important; }
/* ---- Antetul panoului cu linii: titlu la stanga, indiciu + contor la dreapta ---- */
.ep-doc .ws-panel-head { display: flex; align-items: center; gap: .5rem; }
.ep-head-tools { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.ep-hint {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: var(--hs-fs-2xs);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: var(--hs-subtle);
}
.ep-count {
font-size: var(--hs-fs-xs);
font-weight: 700;
color: var(--hs-muted);
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: 999px;
padding: 0 .45rem;
}
/* ---- Tabelul liniilor ----
Antet discret si LIPIT sus (documentul poate avea zeci de linii, iar modalul deruleaza),
grupuri (Piese / Manoperă) ca sub-anteturi, numere tabulare peste tot. */
.ep-table-wrap { max-height: min(46vh, 420px); overflow-y: auto; }
.ep-table { font-size: var(--hs-fs-sm); }
.ep-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--hs-neutral-bg);
border-bottom: 1px solid var(--hs-line);
text-transform: uppercase;
font-size: var(--hs-fs-xs);
letter-spacing: .04em;
font-weight: 600;
color: var(--hs-muted);
white-space: nowrap;
}
.ep-table tbody td { border-top: 1px solid var(--hs-line-soft); color: var(--hs-text-soft); }
.ep-table td.text-end, .ep-table th.text-end { font-variant-numeric: tabular-nums; }
.ep-table tbody tr:hover > td { background: var(--hs-surface-alt); }
.ep-label { font-weight: 500; color: var(--hs-text); }
/* Latimi fixe pe coloanele scurte: denumirea ia tot restul, iar campul de pret nu sare de la
o linie la alta cand se tasteaza in el. */
.ep-col-nr { width: 2.5rem; text-align: right; padding-right: .6rem; color: var(--hs-subtle); font-variant-numeric: tabular-nums; }
.ep-col-qty { width: 4rem; }
.ep-col-vat { width: 4rem; }
.ep-col-price { width: 9.5rem; }
.ep-table tr.ep-group > td {
background: var(--hs-surface-alt);
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
padding-top: .35rem;
padding-bottom: .35rem;
}
.ep-table tr.ep-group i { margin-right: .35rem; }
.ep-group-count {
margin-left: .4rem;
font-weight: 700;
color: var(--hs-muted);
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: 999px;
padding: 0 .35rem;
}
/* Linie cu pretul lipsa: se vede din tabel, nu doar din avertismentul de la final. */
.ep-table tr.ep-row--noprice > td { background: var(--hs-bad-bg); }
/* Linie cu pret corectat manual: bara din stanga arata unde s-a umblat, fara sa strige. */
.ep-table tr.ep-row--edited > td:first-child { box-shadow: inset 3px 0 0 var(--hs-primary); }
.ep-table tr.ep-row--edited > td { background: var(--hs-brand-bg, #eef4f9); }
.ep-table tr.ep-row--noprice.ep-row--edited > td { background: var(--hs-bad-bg); }
/* ---- Campul de pret: input in tabel, nu formular ---- */
.ep-price-cell { display: inline-flex; align-items: center; gap: .25rem; justify-content: flex-end; width: 100%; }
/* `type="number"`, ca restul campurilor de pret din aplicatie: latimea tine cont de sagetile
native (permanente in Firefox, la hover in Chrome), ca ele sa nu calce peste cifre. */
.ep-table input.ep-price {
width: 7.4rem;
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: var(--hs-fs-sm);
padding: .2rem .3rem .2rem .45rem;
height: auto;
border-color: var(--hs-line);
background: var(--hs-surface);
}
/* Sagetile stau lipite de marginea din dreapta, fara spatiul suplimentar pe care Chrome il
lasa implicit intre ele si text. */
.ep-table input.ep-price::-webkit-outer-spin-button,
.ep-table input.ep-price::-webkit-inner-spin-button { margin-left: .1rem; }
.ep-table input.ep-price:focus {
border-color: var(--hs-primary);
box-shadow: 0 0 0 .18rem rgba(19, 74, 109, .12);
}
.ep-table input.ep-price.is-invalid {
border-color: var(--hs-bad-br, #f1aeb5);
background: var(--hs-bad-bg, #fdf2f3);
box-shadow: none;
}
/* Revenirea la pretul din catalog: apare doar pe liniile atinse. */
.ep-price-reset {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: 1px solid var(--hs-line);
border-radius: 4px;
background: var(--hs-surface);
color: var(--hs-muted);
font-size: 12px;
line-height: 1;
}
.ep-price-reset:hover { background: var(--hs-neutral-bg); color: var(--hs-text); }
.ep-price-reset.d-none { display: none !important; }
/* Badge-ul de pe linia corectata: navy discret, pereche cu bara din stanga randului. */
.pq-badge--edit {
background: var(--hs-brand-bg, #eef4f9);
color: var(--hs-primary, #134a6d);
border-color: var(--hs-brand-br, #cddfeb);
}
/* Subsolul tabelului: doua randuri — descompunerea, apoi cifra finala, ingrosata. */
.ep-table tfoot td {
border-top: 1px solid var(--hs-line);
background: var(--hs-surface-alt);
font-weight: 600;
color: var(--hs-muted);
font-variant-numeric: tabular-nums;
}
.ep-table tfoot tr.ep-foot-total td {
background: var(--hs-neutral-bg);
color: var(--hs-text);
font-weight: 700;
font-size: var(--hs-fs-md, 14px);
}
/* Nota de sub tabel: ce se intampla cu preturile corectate. */
.ep-foot-note {
display: flex;
align-items: flex-start;
gap: .4rem;
margin: -.35rem 0 .75rem;
font-size: var(--hs-fs-xs);
color: var(--hs-muted);
}
.ep-foot-note i { color: var(--hs-subtle); margin-top: .12rem; }
/* Piesele care opresc generarea devizului (n-au trecut prin „Necesar piese"): lista lor, ca
să știi exact ce ai de adăugat în necesar, nu doar câte. */
.ep-outside {
margin: .5rem 0 0;
padding: 0;
list-style: none;
font-size: var(--hs-fs-sm);
color: var(--hs-text);
text-align: left;
display: inline-block;
}
.ep-outside li { padding: .1rem 0; }
.ep-outside li::before { content: '·'; color: var(--hs-subtle); margin-right: .4rem; }
/* Avertisment (piese fara pret): nu blocheaza generarea, dar trebuie vazut. */
.ep-warn {
display: flex;
align-items: flex-start;
gap: .6rem;
margin-top: .75rem;
padding: .65rem .8rem;
background: var(--hs-warn-bg);
border: 1px solid var(--hs-warn-br);
border-radius: var(--hs-radius-sm);
color: var(--hs-warn-fg);
font-size: var(--hs-fs-sm);
}
.ep-warn.d-none { display: none !important; }
.ep-warn i { font-size: 15px; flex: 0 0 auto; margin-top: .1rem; }
.ep-warn strong { display: block; font-weight: 700; }
.ep-warn .ep-outside { margin: .35rem 0 .25rem; padding-left: 1.1rem; }
/* Regulile de compunere a devizului: pliate, ca sa raspunda la „de ce nu apare piesa X"
fara sa impinga tabelul cu liniile in jos. */
.ep-rules {
margin-top: .75rem;
padding: .55rem .8rem;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: var(--hs-radius-sm);
background: var(--hs-surface-alt, #fafbfc);
font-size: var(--hs-fs-sm);
}
.ep-rules > summary {
display: flex;
align-items: center;
gap: .45rem;
cursor: pointer;
font-weight: 600;
color: var(--hs-muted, #5d6b80);
list-style: none;
}
.ep-rules > summary::-webkit-details-marker { display: none; }
.ep-rules > summary::after {
content: '\F282';
font-family: 'bootstrap-icons';
margin-left: auto;
font-size: 12px;
transition: transform .15s ease;
}
.ep-rules[open] > summary::after { transform: rotate(180deg); }
.ep-rules[open] > summary { margin-bottom: .5rem; }
.ep-rules ul { margin: 0; padding-left: 1.1rem; }
.ep-rules li { margin-bottom: .3rem; color: var(--hs-muted, #5d6b80); }
.ep-rules li:last-child { margin-bottom: 0; }
.ep-rules li b { color: var(--hs-text, #101828); font-weight: 600; }
/* Pe ecran ingust tabelul deruleaza orizontal, iar sumarul se aseaza pe doua randuri. */
@media (max-width: 767.98px) {
.ep-summary-total { text-align: left; margin-left: 0; }
.ep-table-wrap { max-height: none; }
.ep-table { min-width: 40rem; }
}
/* Footer: consecinta actiunii la stanga, butoanele la dreapta.
Selector pe doua clase (`.modal-footer.ep-footer`): Bootstrap se incarca dupa app.css si
`.modal-footer` are `justify-content: flex-end`, care ar imbrancit nota langa butoane. */
.modal-footer.ep-footer { justify-content: space-between; gap: .75rem; }
.ep-note {
display: inline-flex;
align-items: center;
gap: .4rem;
flex: 1 1 12rem;
min-width: 0;
font-size: var(--hs-fs-sm);
color: var(--hs-muted);
text-align: left;
}
.ep-note i { color: var(--hs-subtle); }
.ep-actions { display: flex; gap: .5rem; flex-shrink: 0; }
@media (max-width: 575.98px) {
.modal-footer.ep-footer { flex-direction: column; align-items: stretch; }
.ep-actions { justify-content: flex-end; }
}
/* Buton secundar in navy-ul de brand — perechea „Renunță" pentru actiunile principale
din footerele modalelor (Bootstrap nu are o varianta outline pe culoarea noastra). */
/* Specificitate pe doua clase: app.css se incarca INAINTEA lui bootstrap.min.css, iar `.btn`
isi seteaza singur variabilele — cu o singura clasa ar fi suprascrise. */
.btn.btn-outline-navy {
--bs-btn-color: var(--hs-primary, #134a6d);
--bs-btn-border-color: #c9d3db;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--hs-primary, #134a6d);
--bs-btn-hover-border-color: var(--hs-primary, #134a6d);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0f3c59;
--bs-btn-active-border-color: #0f3c59;
--bs-btn-focus-shadow-rgb: 19, 74, 109;
font-weight: 600;
}
.ws-panel-body { padding: .9rem; }
.ws-panel .form-label { font-size: 12px; font-weight: 600; color: #52606d; margin-bottom: .25rem; }
.ws-panel .form-control, .ws-panel .input-group-text { font-size: 13px; }
.ws-subtitle {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #8a929b;
margin-bottom: .4rem;
}
.ws-hint { font-size: 12px; color: #7a828c; }
.ws-hint i { color: #9aa3b2; }
/* ============================================================================
Tab Comunicare (pagina clientului) — layout enterprise: banda de indicatori,
coloana de acțiuni la stanga, fir cronologic unificat la dreapta.
============================================================================ */
.cc { display: flex; flex-direction: column; gap: 1rem; }
/* ---- Banda de indicatori ---- */
/* `auto-fit`, nu 5 coloane fixe: benzile au 4 sau 5 tile-uri, iar cea cu 4 lasa altfel o
coloana goala in dreapta. Se rearanjeaza singura si pe ecrane mici. */
.hs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: .75rem; }
.hs-kpi {
display: flex;
align-items: center;
gap: .6rem;
background: #fff;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
padding: .65rem .8rem;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
min-width: 0;
}
.hs-kpi__ico {
display: grid;
place-items: center;
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 8px;
background: rgba(19, 74, 109, .08);
color: var(--hs-primary, #134a6d);
font-size: 15px;
}
.hs-kpi__ico--ok { background: rgba(25, 135, 84, .1); color: #198754; }
.hs-kpi__ico--warn { background: rgba(255, 193, 7, .16); color: #b58105; }
.hs-kpi__ico--mute { background: #f2f4f7; color: #98a2b3; }
.hs-kpi__txt { min-width: 0; }
.hs-kpi__val { display: block; font-size: 18px; font-weight: 700; line-height: 1.1; color: #101828; font-variant-numeric: tabular-nums; }
.hs-kpi__lbl { display: block; font-size: 11px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- Grid principal: acțiuni | istoric ---- */
.hs-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; align-items: start; }
.hs-split__col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.hs-eyebrow {
display: flex;
align-items: center;
gap: .75rem;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #98a2b3;
}
/* Butonul din dreapta antetului de secțiune (ex. „Fișă nouă" langa titlul listei). */
.hs-eyebrow .btn { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* Panoul „flush" tine tabelul/lista fara padding, dar pastreaza colturile rotunjite. */
.hs-panel--flush > .hs-panel__body { padding: 0; }
.hs-panel--flush .hs-list { border-radius: 0 0 8px 8px; }
/* Chip-urile de sub numele clientului (perioada, operator). */
.hs-record__since i { color: #c4ccd6; }
/* Doua coloane de panouri (detalii client, comunicare); se pun una sub alta sub 1200px. */
.hs-split__col > .hs-panel + .hs-panel { margin-top: 0; }
/* ---- Card de secțiune ---- */
.hs-panel {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
overflow: hidden;
}
.hs-panel__head {
display: flex;
align-items: center;
gap: .5rem;
padding: .55rem .9rem;
background: #f7f8fa;
border-bottom: 1px solid var(--hs-line, #e6e9ec);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #52606d;
}
.hs-panel__head i { color: var(--hs-primary, #134a6d); font-size: 13px; }
.hs-panel__body { padding: .9rem; }
.hs-panel--flush .hs-panel__body { padding: 0; }
.hs-panel__foot {
padding: .55rem .9rem;
border-top: 1px solid var(--hs-line-soft, #eef1f4);
background: #fbfcfd;
display: flex;
justify-content: flex-end;
}
.hs-panel .form-label { font-size: 12px; font-weight: 600; color: #52606d; margin-bottom: .2rem; }
.hs-note { display: flex; gap: .4rem; font-size: 12px; color: #7a828c; margin: 0; }
.hs-note i { color: #9aa3b2; }
.cc-hintbar { display: flex; justify-content: space-between; gap: .75rem; margin-top: .3rem; font-size: 11px; color: #98a2b3; }
.cc-counter { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ---- Filtre (chip-uri) ---- */
.hs-seg { display: flex; gap: .3rem; margin-left: auto; }
.hs-seg__btn {
border: 1px solid var(--hs-line, #e6e9ec);
background: #fff;
color: #667085;
border-radius: 999px;
padding: .1rem .6rem;
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
line-height: 1.6;
}
.hs-seg__btn:hover { border-color: #cfd6dd; color: #344054; }
.hs-seg__btn.is-active { background: var(--hs-primary, #134a6d); border-color: var(--hs-primary, #134a6d); color: #fff; }
/* ---- Firul cronologic ---- */
.cc-tl { list-style: none; margin: 0; padding: .4rem 0; max-height: 34rem; overflow-y: auto; }
.cc-tl__item { position: relative; display: flex; gap: .7rem; padding: .6rem .9rem .6rem .8rem; }
/* Linia verticala care leaga evenimentele; se opreste la ultimul. */
.cc-tl__item::before {
content: "";
position: absolute;
left: 1.68rem;
top: 2.2rem;
bottom: -.6rem;
width: 1px;
background: var(--hs-line-soft, #eef1f4);
}
.cc-tl__item:last-child::before { display: none; }
.cc-tl__item.is-flagged { background: #fffdf6; }
.cc-tl__dot {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: 50%;
font-size: 12px;
border: 1px solid transparent;
}
.cc-tl__dot--out { background: rgba(19, 74, 109, .1); color: var(--hs-primary, #134a6d); border-color: rgba(19, 74, 109, .18); }
.cc-tl__dot--in { background: rgba(25, 135, 84, .1); color: #198754; border-color: rgba(25, 135, 84, .2); }
.cc-tl__dot--call { background: rgba(111, 66, 193, .1); color: #6f42c1; border-color: rgba(111, 66, 193, .2); }
.cc-tl__body { min-width: 0; flex: 1 1 auto; }
.cc-tl__head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.cc-tl__title { font-size: 12px; font-weight: 700; color: #344054; }
.cc-tl__time { font-size: 11px; color: #98a2b3; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-tl__act {
border: 0;
background: transparent;
color: #98a2b3;
padding: 0 .15rem;
font-size: 13px;
line-height: 1;
}
.cc-tl__act:hover { color: var(--hs-primary, #134a6d); }
.cc-tl__act--danger:hover { color: #dc3545; }
.cc-tl__text { font-size: 13px; color: #344054; margin: .25rem 0 0; white-space: pre-wrap; word-break: break-word; }
.cc-tl__meta { display: flex; flex-wrap: wrap; gap: .1rem .75rem; margin-top: .25rem; font-size: 11px; color: #98a2b3; }
.cc-tl__meta i { margin-right: .25rem; }
/* ---- Pastile de stare / etichete ---- */
.hs-pill {
font-size: 10px;
font-weight: 700;
padding: .1rem .45rem;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}
.hs-pill--ok { background: rgba(25, 135, 84, .1); color: #198754; border-color: rgba(25, 135, 84, .2); }
.hs-pill--info { background: rgba(13, 110, 253, .1); color: #0d6efd; border-color: rgba(13, 110, 253, .2); }
.hs-pill--warn { background: rgba(255, 193, 7, .16); color: #b58105; border-color: rgba(255, 193, 7, .3); }
.hs-pill--danger { background: rgba(220, 53, 69, .1); color: #dc3545; border-color: rgba(220, 53, 69, .2); }
.hs-pill--mute { background: #f2f4f7; color: #667085; border-color: #e6e9ec; }
.hs-tag {
font-size: 11px;
color: #667085;
background: #f6f7f9;
border: 1px solid #eef1f4;
border-radius: 999px;
padding: .05rem .5rem;
white-space: nowrap;
}
/* Banda de indicatori nu mai are nevoie de praguri: `auto-fit` o rearanjeaza singura. */
@media (max-width: 1199.98px) { .hs-split { grid-template-columns: minmax(0, 1fr); } }
/* ---- Erori de validare, in-place si in rosu (lib/form-errors.js) ----
Mesajul se randeaza in `.invalid-feedback` de sub camp (JS ii pune `.d-block`), iar
controlul primeste chenar rosu. Nu folosim baloanele native ale browserului: formularele
sunt `novalidate`, iar mesajele HTML5 le citim prin checkValidity().
Regulile sunt globale (nu doar in modale): aceleasi convenții pentru orice formular. */
.form-control.is-invalid,
.form-select.is-invalid {
border-color: #dc3545;
background-color: #fffafa;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
border-color: #dc3545;
box-shadow: 0 0 0 .18rem rgba(220, 53, 69, .15);
}
/* Select-urile preluate de select2: originalul e ascuns, deci coloram widget-ul
(containerul inserat imediat dupa ). */
select.is-invalid + .select2-container .select2-selection {
border-color: #dc3545;
background-color: #fffafa;
}
.invalid-feedback {
font-size: 12px;
font-weight: 600;
color: #dc3545;
margin-top: .25rem;
}
/* Eticheta campului greșit devine si ea roșie (CSS nu are selector „fratele anterior").
Acoperim ambele tipare de layout: coloana de grid si `.mb-3` / celula de `.hs-grid-mini`. */
[class*="col-"]:has(> .is-invalid) > .form-label,
[class*="col-"]:has(> .input-group > .is-invalid) > .form-label,
.mb-3:has(> .is-invalid) > .form-label,
.hs-grid-mini > div:has(> .is-invalid) > .form-label { color: #dc3545; }
.ws-kpi { font-size: 11px; text-transform: none; letter-spacing: 0; color: #667085; font-weight: 600; }
.ws-kpi strong { font-size: 14px; color: var(--hs-primary, #134a6d); font-variant-numeric: tabular-nums; }
/* ---- Zile lucratoare: butoane-toggle ---- */
.ws-days { display: flex; flex-wrap: wrap; gap: .4rem; }
.ws-day {
border: 1px solid #dfe4e9;
background: #fff;
color: #52606d;
font-size: 12px;
font-weight: 600;
border-radius: 999px;
padding: .28rem .85rem;
}
.ws-day:hover { border-color: #c3ced8; background: #f7f9fb; color: #344054; }
.btn-check:checked + .ws-day {
background: var(--hs-primary, #134a6d);
border-color: var(--hs-primary, #134a6d);
color: #fff;
}
.btn-check:focus-visible + .ws-day { box-shadow: 0 0 0 .2rem rgba(19, 74, 109, .18); }
/* ---- Orele de start generate (chips) ---- */
.ws-slots { display: flex; flex-wrap: wrap; gap: .35rem; }
.ws-slot {
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: #34405a;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: .18rem .5rem;
}
.ws-slots-empty { font-size: 12px; color: #c0392b; }
/* ---- Lista de tehnicieni din modal (carduri selectabile) ---- */
.ws-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 575px) { .ws-people { grid-template-columns: 1fr; } }
.ws-person {
display: flex;
align-items: center;
gap: .6rem;
border: 1px solid #e6e9ec;
border-radius: 8px;
padding: .45rem .6rem;
cursor: pointer;
background: #fff;
transition: border-color .12s, background-color .12s, box-shadow .12s;
min-width: 0;
}
.ws-person:hover { border-color: #c9d4de; background: #fafcfe; }
.ws-person input { margin: 0; flex: 0 0 auto; }
.ws-person.is-checked { border-color: var(--hs-primary, #134a6d); background: #f4f8fb; box-shadow: 0 0 0 1px rgba(19, 74, 109, .08); }
.ws-person__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-person__name { font-size: 13px; font-weight: 600; color: #1c1b18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-person__note { font-size: 11px; color: #8a929b; display: flex; align-items: center; gap: .3rem; }
.ws-person__note .ws-tag-move { color: #a5730f; font-weight: 600; }
/* ---- Timeline istoric atribuiri ---- */
.ws-timeline { list-style: none; margin: 0; padding: .2rem 0 .2rem 1.85rem; position: relative; }
.ws-timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: #e9edf1; }
.ws-tl-item { position: relative; padding-bottom: .95rem; }
.ws-tl-item:last-child { padding-bottom: 0; }
.ws-tl-dot {
position: absolute;
left: -1.6rem;
top: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #b6bec7;
box-shadow: 0 0 0 3px #fff;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 10px;
}
.ws-tl-item.is-current .ws-tl-dot { background: var(--hs-primary, #134a6d); }
.ws-tl-title { font-size: 13px; font-weight: 700; color: #1c1b18; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ws-tl-period { font-size: 12px; color: #667085; font-variant-numeric: tabular-nums; }
.ws-tl-by { font-size: 11px; color: #9aa0a8; }
.ws-tl-empty { font-size: 13px; color: #8a929b; }
/* ---- Celule de tabel specifice modulului ---- */
.ws-name { font-weight: 600; color: #1c1b18; }
.ws-time { font-variant-numeric: tabular-nums; color: #34405a; white-space: nowrap; }
.ws-daypill { font-size: 10px; font-weight: 700; color: #52606d; background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 4px; padding: 1px 5px; }
.ws-count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--hs-primary, #134a6d); }
.ws-people-cell { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.ws-chip { font-size: 11px; color: #4b5563; background: #f4f6f8; border: 1px solid #e6e9ec; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.ws-chip-more { font-size: 11px; color: #8a929b; font-weight: 600; }
.ws-badge-default { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #134a6d; background: #e8f0f6; border: 1px solid #d3e2ee; border-radius: 999px; padding: 1px 8px; }
.ws-badge-muted { font-size: 10px; font-weight: 600; color: #8a929b; background: #f4f6f8; border: 1px solid #e6e9ec; border-radius: 999px; padding: 1px 8px; }
/* ============================================================================
Accese utilizatori (/access) — matrice sectiuni, in stilul enterprise.
========================================================================= */
.ac-search { max-width: 280px; }
.ac-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ac-badge-owner { color: #7a4b00; background: #fdf3e2; border: 1px solid #f2dcb6; }
.ac-badge-open { color: #256b3d; background: #e9f6ee; border: 1px solid #cfe9d9; }
.ac-badge-limited { color: #134a6d; background: #e8f0f6; border: 1px solid #d3e2ee; }
/* Lista de sectiuni: cate un card pe modul, cu submodulele dedesubt. */
.ac-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 767px) { .ac-sections { grid-template-columns: 1fr; } }
.ac-section {
border: 1px solid #e6e9ec;
border-radius: 8px;
background: #fff;
padding: .5rem .65rem;
transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.ac-section.is-checked { border-color: var(--hs-primary, #134a6d); background: #f4f8fb; box-shadow: 0 0 0 1px rgba(19, 74, 109, .08); }
.ac-section__head { display: flex; align-items: center; gap: .55rem; cursor: pointer; margin: 0; min-width: 0; }
.ac-section__head input { margin: 0; flex: 0 0 auto; }
.ac-section__name { font-size: 13px; font-weight: 600; color: #1c1b18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-section__url { margin-left: auto; font-size: 11px; color: #9aa3b2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ac-subs { display: flex; flex-wrap: wrap; gap: .35rem .9rem; padding: .45rem 0 .1rem 1.6rem; }
.ac-sub { display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; color: #52606d; cursor: pointer; margin: 0; }
.ac-sub input:disabled + span { color: #b9c0c8; }
/* =====================================================================
Modalul global de confirmare (#modal_confirm) — acelasi layout ca restul
modalelor: antet navy cu emblema, corp gri cu panou alb, footer alb.
===================================================================== */
.modal-dialog.modal-confirm { max-width: 440px; }
/* Dialogurile care sunt de fapt formulare (fluxul de piese) au nevoie de mai mult loc. */
.modal-dialog.modal-confirm.modal-confirm--wide { max-width: 560px; }
.modal-confirm .modal-content { border: none; border-radius: 12px; box-shadow: 0 18px 44px rgba(16, 24, 40, .22); }
.modal-confirm .modal-header { border-bottom: none; }
.modal-confirm .modal-body { background: #f6f7f9; padding: 1rem; }
.modal-confirm .modal-footer { background: #fff; border-top: 1px solid #eef1f4; }
.modal-confirm .ws-panel-body { font-size: 13px; color: #344054; }
.modal-confirm .ws-panel-body .form-label { font-size: 12px; font-weight: 600; color: #52606d; margin-bottom: .2rem; }
/* Accentul de sus dupa tipul actiunii — semnalul „stergere" nu se pierde prin uniformizare. */
.modal-confirm--red .modal-header { border-top: 3px solid #dc3545; }
.modal-confirm--orange .modal-header { border-top: 3px solid #fd7e14; }
.modal-confirm--green .modal-header { border-top: 3px solid #198754; }
.modal-confirm--blue .modal-header { border-top: 3px solid #0d6efd; }
/* ---- Continut structurat pentru confirmari (.cf-*) ----
Pentru actiuni ireversibile nu e suficient „esti sigur?": dialogul arata CE anume
se schimba (interval, inginer, stare) si ce urmeaza dupa.
Independent de containerul-gazda: merge si in modal Bootstrap, si in jquery-confirm. */
.cf-summary {
border: 1px solid #eef1f4;
border-radius: 8px;
overflow: hidden;
margin-bottom: .65rem;
}
.cf-row {
display: flex;
align-items: center;
gap: .5rem;
padding: .4rem .6rem;
font-size: 13px;
}
.cf-row + .cf-row { border-top: 1px solid #f2f4f7; }
.cf-lbl {
display: inline-flex;
align-items: center;
gap: .35rem;
min-width: 84px;
color: #667085;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .03em;
}
.cf-lbl i { color: var(--hs-primary, #134a6d); font-size: .85rem; }
.cf-val {
color: #1c1b18;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.cf-badge {
display: inline-block;
padding: .1rem .4rem;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
background: #f2f4f7;
color: #667085;
}
.cf-badge--ok { background: #e9f6ee; color: #256b3d; }
/* Valoarea „de reținut" a rezumatului (totalul unei rezervări): un pas mai mare, ca
ochiul să o găsească fără să citească toate rândurile. */
.cf-val--strong { font-size: 15px; }
/* Sub-linia unei valori (codul și marca sub denumirea piesei) — aliniată la stânga
textului ei, nu la eticheta din stânga rândului. */
.cf-val .hs-sub { font-weight: 400; }
/* Valoare editabilă în rezumat (prețul completat la aprobarea unei piese fără preț):
câmpul are nevoie de lățime, iar textul din jurul lui nu mai e „valoare afișată". */
.cf-val--input { flex: 1 1 260px; max-width: 320px; font-weight: 400; }
.cf-val--input .input-group { flex-wrap: nowrap; }
.cf-val--input .input-group-text { font-size: 11px; white-space: nowrap; }
/* Selectul de cotă stă în același grup, dar nu trebuie să fure lățimea câmpului. */
.cf-val--input select.form-select { flex: 0 0 auto; width: auto; }
/* Avertisment: apare doar cand clientul a confirmat deja programarea. */
.cf-warn {
display: flex;
gap: .45rem;
margin: 0 0 .55rem;
padding: .45rem .6rem;
border-radius: 8px;
background: #fef3f2;
border: 1px solid #fecdca;
color: #b42318;
font-size: 12px;
font-weight: 600;
}
.cf-warn i { flex: 0 0 auto; margin-top: .1rem; }
.cf-note { margin: 0; font-size: 12px; color: #667085; }
/* =====================================================================
Pagina clientului (/customer/view) — primitive de interacțiune
Adăugate la design system-ul .hs-*: contoare care filtrează, bara de
filtre a listei de fișe, butonul de copiere din chip-uri și semnalul
de „modificări nesalvate".
===================================================================== */
/* ---- Contor care filtrează (banda KPI) ----
Același tile, dar ca : resetăm stilul nativ și adăugăm afordanța de click. */
.hs-kpi--action {
text-align: left;
font: inherit;
cursor: pointer;
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.hs-kpi--action:hover {
border-color: #cfdae6;
box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
transform: translateY(-1px);
}
.hs-kpi--action:focus-visible {
outline: 2px solid var(--hs-primary, #134a6d);
outline-offset: 2px;
}
/* `__txt` e in butoane (div nu e permis acolo), deci ii dam explicit block. */
.hs-kpi__txt { display: block; }
/* ---- Buton de copiere din chip-urile de contact ---- */
.hs-copy {
border: 0;
background: transparent;
color: #c4ccd6;
padding: 0 .1rem;
font-size: 12px;
line-height: 1;
cursor: pointer;
transition: color .12s ease;
}
.hs-copy:hover { color: var(--hs-primary, #134a6d); }
.hs-copy:focus-visible { outline: 2px solid var(--hs-primary, #134a6d); outline-offset: 2px; border-radius: 3px; }
/* Confirmare pe loc: bifă verde ~1s, fara toast (chip-urile se copiaza des). Iconita o
schimba JS-ul (bi-copy -> bi-check-lg); aici doar culoarea. */
.hs-copy.is-copied { color: #198754; }
/* ---- Meniul „Alte acțiuni" din antet ---- */
/* `.dropdown-menu.hs-record__menu`: Bootstrap (incarcat dupa noi) fixeaza `min-width`
si `font-size` pe `.dropdown-menu`, la aceeasi specificitate. */
.dropdown-menu.hs-record__menu { font-size: 13px; min-width: 232px; }
.hs-record__menu .dropdown-item { display: flex; align-items: center; gap: .55rem; padding: .4rem .85rem; }
.hs-record__menu .dropdown-item i { color: #98a2b3; font-size: 14px; }
.hs-record__menu .dropdown-item:hover i { color: var(--hs-primary, #134a6d); }
/* ---- Bara de filtre a unei liste statice (fișele clientului) ---- */
.hs-toolbar.cs-toolbar {
display: flex;
align-items: center;
gap: .6rem;
flex-wrap: wrap;
margin-bottom: .6rem;
}
.cs-toolbar .hs-toolbar__search { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 420px; }
.cs-toolbar .hs-toolbar__search i {
position: absolute;
left: .65rem;
top: 50%;
transform: translateY(-50%);
color: #b6bfca;
font-size: 13px;
pointer-events: none;
}
.cs-toolbar .hs-toolbar__search .form-control { padding-left: 1.9rem; }
/* ---- Segmented control (Toate / În lucru / Finalizate / Anulate) ---- */
.hs-seg {
display: inline-flex;
background: #f2f4f7;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
padding: 2px;
gap: 2px;
margin-left: auto;
}
.hs-seg__btn {
display: inline-flex;
align-items: center;
gap: .35rem;
border: 0;
background: transparent;
border-radius: 6px;
padding: .25rem .6rem;
font-size: 12px;
font-weight: 600;
color: #667085;
white-space: nowrap;
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.hs-seg__btn span {
font-size: 11px;
font-weight: 700;
color: #98a2b3;
background: #fff;
border-radius: 999px;
padding: 0 .35rem;
font-variant-numeric: tabular-nums;
}
.hs-seg__btn:hover { color: var(--hs-primary, #134a6d); }
.hs-seg__btn.is-active { background: #fff; color: var(--hs-primary, #134a6d); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.hs-seg__btn.is-active span { background: #e3edf5; color: var(--hs-primary, #134a6d); }
.hs-seg__btn:focus-visible { outline: 2px solid var(--hs-primary, #134a6d); outline-offset: 1px; }
/* ---- Semnal de „modificări nesalvate" în bara formularului ---- */
.hs-dirty {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: 12px;
font-weight: 600;
color: #b58105;
background: rgba(255, 193, 7, .14);
border: 1px solid rgba(255, 193, 7, .3);
border-radius: 999px;
padding: .15rem .6rem;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.cs-toolbar .hs-toolbar__search { max-width: none; }
.hs-seg { margin-left: 0; width: 100%; overflow-x: auto; }
}
/* ---- Tipărire: rămâne fișa clientului, fără cromul aplicației ---- */
@media print {
.hs-record__actions,
.hs-toolbar,
.hs-formbar,
.hs-tabs__nav,
.hs-copy,
.up-row-open { display: none !important; }
/* Datele si fisele se tiparesc amandoua, indiferent de tabul deschis; comunicarea nu
(fragmentul se incarca la cerere, deci pe hartie ar aparea doar spinnerul). */
#tab-details, #tab-sheets { display: block !important; opacity: 1 !important; }
#tab-communication { display: none !important; }
.hs-card, .hs-panel, .hs-kpi { box-shadow: none !important; break-inside: avoid; }
/* Headerul de inregistrare e navy cu text alb pe ecran, dar browserele nu tiparesc
fundalurile: fara asta, numele si datele de contact ar iesi alb pe alb, adica goale. */
.hs-card.hs-record,
.hs-record .hs-record__chips {
background: #fff !important;
border-color: #d0d5dd !important;
}
.hs-record .hs-record__name,
.hs-record .hs-meta-chip,
.hs-record .hs-meta-chip a,
.hs-record .hs-record__since,
.hs-record .hs-record__since i,
.hs-record .hs-meta-chip i,
.hs-record .hs-record__back { color: #101828 !important; }
.hs-record .hs-record__avatar {
background: #f2f5f8 !important;
color: #134a6d !important;
border-color: #d0d5dd !important;
}
.hs-record .hs-pill--info,
.hs-record .hs-pill--ok,
.hs-record .hs-pill--mute,
.hs-record .hs-pill--warn,
.hs-record .hs-pill--danger {
background: #fff !important;
color: #101828 !important;
border-color: #d0d5dd !important;
}
}
/* =====================================================================
Rafinare vizuală a listelor de modul (referință: /customer)
Tipografie, culori și fundaluri aduse pe tokenii din :root. Regulile
sunt scrise pe primitivele comune (.hs-stat / .hs-filters /
.table-enterprise / .hs-list), deci toate listele se aliniază la
aceeași ținută, nu doar pagina de clienți.
===================================================================== */
/* ---- Banda de contoare ----
Valoarea e informația, eticheta doar o numește: contrast puternic pe cifră,
etichetă în gri lizibil (nu #98a2b3, care pica sub AA pe alb). */
.hs-stat {
padding: .85rem 1rem;
border-color: var(--hs-line);
background: var(--hs-surface);
/* Umbră în două straturi: contur foarte fin + difuzie joasă. Dă relief fără „card gros". */
box-shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .04);
}
.hs-stat__val {
font-size: 1.35rem;
font-weight: 650;
letter-spacing: -.025em;
color: var(--hs-text);
}
.hs-stat__lbl {
font-size: 11px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: var(--hs-muted);
}
.hs-stat__icon {
width: 40px;
height: 40px;
border-radius: 11px;
font-size: 17px;
background: var(--hs-primary-soft);
color: var(--hs-primary);
}
.hs-stat__icon--mute { background: #f2f4f7; color: var(--hs-subtle); }
/* Tile-ul care filtrează: se ridică imperceptibil la hover, ca să se simtă clicabil. */
.hs-stat--btn { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.hs-stat--btn:hover { transform: translateY(-1px); border-color: #c7d4e2; }
.hs-stat--btn:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 2px; }
/* ---- Bara de filtre ----
Fundal cald-neutru sub antetul cardului, ca zona de căutare să se distingă de
tabel fără o linie groasă. Etichetele sunt mici și discrete: în lucrul zilnic te
uiți la valori, nu la numele filtrului. */
/* Selector pe doua clase: `.hs-card > .card-header` (mai sus in fisier) are specificitate
mai mare decat `.hs-filters` si i-ar anula fundalul. */
.hs-card > .card-header.hs-filters,
.card-header.hs-filters {
background: linear-gradient(180deg, var(--hs-surface-alt) 0, #fff 100%);
border-bottom: 1px solid var(--hs-line-soft);
padding: .9rem 1.1rem 1rem;
}
.hs-filter__lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
text-transform: none;
color: var(--hs-muted);
}
.hs-filters .form-select-sm,
.hs-filters .form-control,
.hs-filters .input-group-text {
border-color: #dde3ea;
}
.hs-filters .form-select-sm:focus,
.hs-filters .form-control:focus {
border-color: var(--hs-primary);
box-shadow: 0 0 0 3px var(--hs-focus);
}
.hs-result-count { color: var(--hs-muted); }
/* ---- Tabel ----
Rânduri mai aerisite și hover pe o nuanță din brand, în loc de gri neutru.
(Antetul NU e `sticky`: `.hs-list` are `overflow: hidden` pentru colțurile rotunjite,
iar sticky s-ar raporta la acel container, care nu derulează — efect zero.) */
table.table-enterprise thead th {
background: var(--hs-surface);
color: var(--hs-muted);
font-weight: 600;
letter-spacing: .05em;
border-bottom: 1px solid var(--hs-line);
box-shadow: inset 0 -1px 0 var(--hs-line);
padding: .65rem .75rem;
}
/* Bootstrap picteaza fundalul celulelor cu un `box-shadow: inset` din `--bs-table-accent-bg`,
deci hover-ul lui ar acoperi orice `background` am pune pe `td`. Culorile se dau pe
variabilele lui, nu impotriva lor. */
table.table-enterprise {
--bs-table-bg: transparent;
--bs-table-hover-bg: #f4f8fb;
--bs-table-hover-color: var(--hs-text);
}
table.table-enterprise tbody td {
padding: .62rem .75rem;
color: var(--hs-text-soft);
border-top: 1px solid var(--hs-line-soft);
}
/* Zebra foarte diluat: ajută ochiul să urmărească rândul pe 8 coloane, fără să pară tabel de raport. */
table.table-enterprise tbody tr:nth-child(even) > td { background: #fcfdfe; }
table.table-enterprise tbody tr:hover > td { background: #f4f8fb; }
/* Numele clientului — singura ancoră de citire a rândului. */
.cust-name .uc-client-link {
color: var(--hs-text);
font-weight: 600;
text-decoration: none;
}
.cust-name .uc-client-link:hover { color: var(--hs-primary); text-decoration: underline; }
/* Subrândul (tipul clientului, tipul fișei) era pe #98a2b3 — 2,6:1 pe alb, sub pragul minim
de lizibilitate. Ierarhia o dau mărimea și greutatea, nu un contrast prea slab. */
.cust-subline { color: var(--hs-muted); font-size: 12px; }
.cust-loc { color: var(--hs-text-soft); }
.cust-date { color: var(--hs-muted); }
.hs-avatar {
background: var(--hs-primary-soft);
color: var(--hs-primary);
border: 1px solid #dde7f0;
}
/* Eticheta operatorului: pastilă neutră, nu un al doilea accent colorat pe rând. */
.cust-operator {
color: var(--hs-muted);
background: var(--hs-surface-alt);
border-color: var(--hs-line);
font-weight: 500;
}
/* Butonul de deschidere din capătul rândului își păstrează stilul din design system
(main.css, `.up-row-open`); aici adăugăm doar starea de focus, care lipsea. */
.up-row-open:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }
/* ---- Subsolul listei (info + paginare) ---- */
.hs-list .dt-container > .dt-layout-table ~ div {
background: var(--hs-surface-alt);
border-top: 1px solid var(--hs-line-soft);
}
.hs-list .dt-info { color: var(--hs-muted); }
/* =====================================================================
Fișa de înregistrare cu rail lateral (.hs-rec) — /customer/view
Navigarea între secțiuni, contoarele și metadatele stau într-o coloană
îngustă, permanent vizibilă; dreapta rămâne un singur flux de lucru.
===================================================================== */
/* `.card.hs-rec`, nu `.hs-rec`: Bootstrap se încarcă DUPĂ app.css și pune
`.card { display: flex; flex-direction: column }` — la specificitate egală câștiga el,
iar rail-ul ajungea deasupra conținutului, nu lângă el. */
.card.hs-rec {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
align-items: stretch;
/* Fara `overflow: hidden` (desi ar taia colturile): ar face din card un container de
derulare, iar `position: sticky` de pe rail s-ar raporta la el si n-ar mai face nimic.
Colturile rotunjite le respecta oricum fundalul, fiind clipat de `border-radius`. */
/* Fundalul coloanei din stânga stă pe container, nu pe rail: rail-ul e `sticky`, deci
nu se întinde pe toată înălțimea, iar fără asta griul s-ar opri la jumătate. */
background-image: linear-gradient(90deg, var(--hs-surface-alt) 0 232px, var(--hs-surface) 232px);
}
/* ---- Rail-ul ----
Fundal ușor mai rece decât panoul de conținut: separă cele două zone fără o linie groasă.
`sticky` ca navigarea și contoarele să rămână la îndemână în formularele lungi. */
.hs-rail {
display: flex;
flex-direction: column;
gap: .35rem;
padding: .85rem .7rem;
background: transparent;
border-right: 1px solid var(--hs-line);
position: sticky;
top: 0;
align-self: start;
/* Rail-ul nu depășește ecranul: dacă e mai înalt, derulează el, nu pagina. */
max-height: 100vh;
overflow-y: auto;
}
.hs-rail__nav { display: flex; flex-direction: column; gap: 2px; }
.hs-rail__link {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
padding: .5rem .65rem;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--hs-text-soft);
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.hs-rail__link i { font-size: 15px; color: var(--hs-subtle); flex: 0 0 auto; transition: color .12s ease; }
.hs-rail__txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-rail__link:hover { background: #eef2f6; color: var(--hs-text); }
.hs-rail__link:hover i { color: var(--hs-muted); }
/* Secțiunea activă: fundal alb (aceeași suprafață ca panoul din dreapta, deci pare „deschisă")
plus o bară pe brand în stânga. */
.hs-rail__link.active {
background: var(--hs-surface);
color: var(--hs-primary);
font-weight: 600;
box-shadow: inset 2px 0 0 var(--hs-primary), 0 1px 2px rgba(16, 24, 40, .06);
}
.hs-rail__link.active i { color: var(--hs-primary); }
.hs-rail__link:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: -2px; }
.hs-rail__link .hs-count { margin-left: auto; }
/* ---- Grupul de contoare ---- */
.hs-rail__group { display: flex; flex-direction: column; gap: 1px; margin-top: .9rem; }
.hs-rail__cap {
padding: 0 .65rem .35rem;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--hs-subtle);
}
.hs-rail__stat {
display: flex;
align-items: baseline;
gap: .55rem;
width: 100%;
padding: .3rem .65rem;
border: 0;
border-radius: 6px;
background: transparent;
text-align: left;
cursor: pointer;
transition: background .12s ease;
}
.hs-rail__stat:hover { background: #eef2f6; }
.hs-rail__stat:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: -2px; }
/* Cifrele se aliniază în coloană (lățime fixă + tabular-nums), ca să se citească de sus în jos. */
.hs-rail__num {
flex: 0 0 30px;
text-align: right;
font-size: 14px;
font-weight: 650;
color: var(--hs-text);
font-variant-numeric: tabular-nums;
}
.hs-rail__lbl { font-size: 12px; color: var(--hs-muted); }
/* „În lucru" cu valoare nenulă e singurul contor care cere atenție. */
.hs-rail__stat.is-warn .hs-rail__num { color: #b58105; }
.hs-rail__stat.is-active { background: #e8f0f7; }
.hs-rail__stat.is-active .hs-rail__lbl { color: var(--hs-primary); font-weight: 600; }
/* ---- Metadatele înregistrării ---- */
.hs-rail__meta {
margin: auto 0 0;
padding: .8rem .65rem 0;
border-top: 1px solid var(--hs-line-soft);
display: flex;
flex-direction: column;
gap: .5rem;
}
.hs-rail__meta dt {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
margin-bottom: 1px;
}
.hs-rail__meta dd {
margin: 0;
font-size: 12px;
color: var(--hs-text-soft);
font-variant-numeric: tabular-nums;
}
/* Operatorul, pe rândul lui, mai discret decât data. */
.hs-rail__meta dd span { display: block; font-size: 11px; color: var(--hs-muted); font-variant-numeric: normal; }
/* ---- Panoul de conținut ---- */
.hs-rec__main { background: var(--hs-surface); min-width: 0; }
/* Secțiunile formularului, unele sub altele. */
.hs-stack__col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
/* `.hs-formbar` e deja lipită jos; în rail-ul lateral mai are nevoie doar de o umbră care
o desprinde de conținutul ce trece pe sub ea, și de colțul din stânga drept — acolo e
acum granița cu rail-ul, nu marginea cardului. */
.hs-formbar--sticky {
box-shadow: 0 -2px 8px rgba(16, 24, 40, .05);
border-radius: 0 0 8px 0;
}
/* Sub 992px rail-ul devine o bară orizontală deasupra conținutului: pe ecran îngust o
coloană de 232px ar mânca jumătate din lățime. */
@media (max-width: 991.98px) {
.card.hs-rec { grid-template-columns: minmax(0, 1fr); background-image: none; }
.hs-rail {
position: static;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
border-right: 0;
border-bottom: 1px solid var(--hs-line);
}
.hs-rail__nav { flex-direction: row; flex: 1 1 100%; overflow-x: auto; }
.hs-rail__link { width: auto; white-space: nowrap; }
.hs-rail__link.active { box-shadow: inset 0 -2px 0 var(--hs-primary); }
.hs-rail__group { flex-direction: row; margin-top: 0; flex-wrap: wrap; }
.hs-rail__cap { display: none; }
.hs-rail__stat { width: auto; }
/* Metadatele nu-și merită spațiul pe mobil — rămân în antetul paginii. */
.hs-rail__meta { display: none; }
}
/* =====================================================================
Tab „Facturare" al fișei (/sheet/view → sv_invoicing)
===================================================================== */
/* Linie deja facturată / document anulat: rămâne vizibilă (e istoric), dar estompată. */
.inv-line--done > td { background: #fbfcfd; color: var(--hs-subtle); }
.inv-line--done .fw-semibold { font-weight: 500 !important; }
/* Prețul unitar, editabil în lista „De facturat": câmp discret, care se vede ca editabil abia
la hover/focus — altfel un tabel plin de casete ar arăta ca un formular, nu ca o listă. */
.inv-price {
width: 88px;
display: inline-block;
text-align: right;
font-variant-numeric: tabular-nums;
border-color: transparent;
background: transparent;
padding-right: .35rem;
}
.inv-price:hover { border-color: var(--hs-line); background: var(--hs-surface); }
.inv-price:focus { border-color: var(--hs-primary); background: var(--hs-surface); }
.inv-price:disabled { opacity: .6; }
.inv-th-hint { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }
/* Previzualizarea documentului în pagina facturii: chiar PDF-ul, într-un cadru înalt cât
ecranul minus antetul, ca pagina să nu aibă două zone de derulare suprapuse. */
.inv-preview { width: 100%; height: calc(100vh - 230px); min-height: 480px; border: 0; display: block; }
/* Bara de emitere: total în stânga, câmpurile la mijloc, acțiunile în dreapta. */
.inv-issuebar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .6rem 1rem;
padding: .7rem 1rem;
background: var(--hs-surface-alt);
border-top: 1px solid var(--hs-line);
}
.inv-issuebar__total { font-size: 13px; color: var(--hs-text-soft); }
.inv-issuebar__total strong { font-size: 16px; color: var(--hs-text); font-variant-numeric: tabular-nums; }
.inv-issuebar__total .cust-subline { display: inline; margin-left: .5rem; }
.inv-issuebar__fields { display: flex; gap: .5rem; flex: 1 1 260px; min-width: 200px; }
.inv-issuebar__actions { display: flex; gap: .5rem; margin-left: auto; }
@media (max-width: 767.98px) {
.inv-issuebar__actions { margin-left: 0; width: 100%; }
.inv-issuebar__actions .btn { flex: 1 1 auto; }
}
/* Linie fără preț de vânzare: nu poate fi facturată, deci se vede din prima. */
.inv-line--zero > td { background: #fff8f8; }
.inv-line--zero .hs-pill { margin-top: .2rem; display: inline-block; }
/* Avertismentul care explică de ce butoanele de emitere sunt inactive. */
.inv-blocked {
display: flex;
align-items: flex-start;
gap: .6rem;
padding: .65rem 1rem;
background: #fff5f5;
border-top: 1px solid #f5d0d0;
color: #a52834;
font-size: 13px;
}
.inv-blocked i { font-size: 15px; flex: 0 0 auto; margin-top: .1rem; }
.inv-blocked strong { display: block; font-size: 13px; }
/* Aceeași bandă, dar EXPLICATIVĂ, nu blocantă: ce cuprinde proforma în plus față de factură,
sau ce lipsește ca să poată fi emisă. Clasă separată intenționat — `.inv-blocked` e citită
de sheet-invoicing.js ca semnal că emiterea e oprită, iar o notă informativă n-are voie să
dezactiveze butoanele. */
.inv-hint {
display: flex;
align-items: flex-start;
gap: .6rem;
padding: .65rem 1rem;
background: var(--hs-info-bg);
border-top: 1px solid var(--hs-info-br);
color: var(--hs-info-fg);
font-size: var(--hs-fs-md);
}
.inv-hint i { font-size: 15px; flex: 0 0 auto; margin-top: .1rem; }
.inv-hint strong { display: block; font-size: var(--hs-fs-md); }
/* Antetul secțiunii „Documente emise": eticheta la stânga, filtrul de tip la dreapta.
`.hs-eyebrow` e ea însăși flex, deci segmentul nu poate sta în ea fără să-i moștenească
uppercase-ul și spațierea — de aici rândul propriu. */
.inv-docs-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap;
}
.inv-docs-head .hs-seg { margin-left: 0; }
/* Piesă acordată gratuit: intră pe document cu 0,00, deci verde, nu roșu ca „fără preț". */
.inv-line--free > td { background: #f7fdf9; }
.inv-line--free .hs-pill { margin-top: .2rem; display: inline-block; }
/* ---- Setări → Documente (/setting/document) ----
Pagina folosește chrome-ul comun al listelor (.hs-card + .table-enterprise); aici rămân
doar codul de document și marcajul rândurilor neconfigurate. */
.doc-code {
display: inline-block;
padding: .1rem .45rem;
background: var(--hs-surface-alt);
border: 1px solid var(--hs-line-soft);
border-radius: 5px;
color: var(--hs-text);
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Rând fără numerotare configurată: se vede că lipsește, fără să strige. */
.doc-row--missing > td { color: var(--hs-muted); }
.doc-row--missing .fw-semibold { font-weight: 500 !important; }
/* Câte o secțiune per tip de document: numerotarea se configurează pe tip, deci ecranul e
organizat la fel. Antetul spune ce e documentul și unde se folosește, iar în dreapta stă
ce se emite acum. */
.doc-type { margin-bottom: 0; }
.doc-type__head {
display: flex;
align-items: flex-start;
gap: .7rem;
padding: .8rem 1rem;
border-bottom: 1px solid var(--hs-line-soft);
}
.doc-type__ic {
flex: 0 0 auto;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--hs-radius-sm);
background: var(--hs-surface-alt);
color: var(--hs-primary);
font-size: 15px;
}
.doc-type__text { flex: 1 1 auto; min-width: 0; }
.doc-type__title { margin: 0 0 .1rem; font-size: 14px; font-weight: 650; color: var(--hs-text); }
.doc-type__desc { margin: 0; font-size: 12px; color: var(--hs-muted); line-height: 1.45; }
.doc-type__state {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: .6rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.doc-type__next { display: flex; align-items: center; gap: .4rem; }
.doc-type__next-lbl {
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-subtle);
}
.doc-type__empty {
display: flex;
align-items: center;
gap: .5rem;
padding: .85rem 1rem;
font-size: var(--hs-fs-sm);
color: var(--hs-muted);
}
/* Bara de tipuri: taburi orizontale, grupate pe fiscale / interne. Punctul roșu spune, fără
să deschizi tabul, că tipul acela nu poate emite documente. */
.doc-tabs {
display: flex;
align-items: center;
gap: .15rem;
flex-wrap: wrap;
padding-bottom: .55rem;
margin-bottom: .75rem;
border-bottom: 1px solid var(--hs-line);
}
.doc-tabs__group {
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
padding: 0 .5rem 0 .15rem;
}
.doc-tabs__sep {
width: 1px;
height: 18px;
background: var(--hs-line);
margin: 0 .5rem;
}
.doc-tab {
display: inline-flex;
align-items: center;
gap: .4rem;
border: 1px solid transparent;
border-radius: var(--hs-radius-sm);
background: transparent;
padding: .4rem .65rem;
font-size: var(--hs-fs-sm);
font-weight: 600;
color: var(--hs-text-soft);
white-space: nowrap;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.doc-tab i { color: var(--hs-subtle); font-size: 14px; }
.doc-tab:hover { color: var(--hs-primary); background: var(--hs-primary-soft); border-color: var(--hs-brand-br); }
.doc-tab:hover i { color: var(--hs-primary); }
.doc-tab.active { color: #fff; background: var(--hs-primary); border-color: var(--hs-primary); }
.doc-tab.active i { color: rgba(255, 255, 255, .85); }
.doc-tab:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: -2px; }
.doc-tab__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--hs-bad-fg, #dc3545);
flex: 0 0 auto;
}
.doc-tab__dot--mute { background: var(--hs-subtle); }
.doc-tab.active .doc-tab__dot { background: #fff; }
/* Setări → Comunicare: starea canalelor. Refolosește cardul de tip document (.doc-type),
ca ecranele de setări să arate la fel. */
.comm-warn {
display: flex;
align-items: flex-start;
gap: .55rem;
margin: 0 1rem .75rem;
padding: .6rem .75rem;
background: var(--hs-warn-bg);
border: 1px solid var(--hs-warn-br);
border-radius: var(--hs-radius-sm);
color: var(--hs-warn-fg);
font-size: var(--hs-fs-sm);
}
.comm-warn--mute {
background: var(--hs-surface-alt);
border-color: var(--hs-line);
color: var(--hs-muted);
}
.comm-warn i { flex: 0 0 auto; margin-top: .1rem; }
.comm-warn strong { display: block; }
.comm-actions {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
padding: .7rem 1rem .9rem;
border-top: 1px solid var(--hs-line-soft);
}
.comm-test { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
/* Formularul serverului SMTP: stă în cardul de email, sub starea canalului. */
.comm-form { border-top: 1px solid var(--hs-line-soft); }
.comm-form__head {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
padding: .7rem 1rem .2rem;
}
.comm-form__title {
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
}
.comm-form__head .btn { margin-left: auto; }
.comm-form__body { padding: .5rem 1rem .8rem; }
.comm-form__hint { font-size: 12px; color: var(--hs-muted); line-height: 1.5; }
/* Parola există, dar nu se mai poate citi: eticheta e singurul semn că e salvată. */
.comm-form__saved {
display: inline-flex;
align-items: center;
gap: .25rem;
margin-left: .35rem;
font-size: 11px;
font-weight: 600;
color: var(--hs-good-fg);
}
.comm-form__saved-at { font-size: 11.5px; color: var(--hs-subtle); }
/* Alegerea modelului de document: două machete puse una lângă alta, cea în uz marcată.
Alegerea e vizuală, deci descrierea spune ce se schimbă, nu doar cum se numește. */
.doc-models { border-top: 1px solid var(--hs-line); padding: .85rem 1rem 1rem; }
.doc-models__head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.doc-models__title {
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
}
.doc-models__hint { font-size: 12px; color: var(--hs-muted); }
.doc-models__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 767.98px) {
.doc-models__grid { grid-template-columns: minmax(0, 1fr); }
}
.doc-model {
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius-sm);
padding: .7rem .8rem;
background: var(--hs-surface);
}
.doc-model.is-active { border-color: var(--hs-primary); background: var(--hs-primary-soft); }
.doc-model__head { display: flex; align-items: center; gap: .5rem; }
.doc-model__radio {
width: 18px;
height: 18px;
flex: 0 0 auto;
border: 1px solid var(--hs-line-strong);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #fff;
}
.doc-model.is-active .doc-model__radio { background: var(--hs-primary); border-color: var(--hs-primary); }
.doc-model__name { font-size: 13px; font-weight: 650; color: var(--hs-text); }
.doc-model__desc { margin: .35rem 0 .6rem; font-size: 12px; color: var(--hs-muted); line-height: 1.5; }
.doc-model__actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.doc-model__nosample { font-size: 11.5px; color: var(--hs-subtle); }
/* Panoul tipului selectat: cardul e unul singur, deci antetul secțiunii n-are chenar propriu. */
.doc-panel { padding: 0; overflow: hidden; }
.doc-panel .doc-type__head { border-bottom: 1px solid var(--hs-line-soft); }
.doc-facts {
margin: 0;
padding: .7rem 1rem;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .5rem;
}
.doc-facts dt {
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-subtle);
}
.doc-facts dd { margin: .15rem 0 0; font-size: 13px; font-weight: 600; color: var(--hs-text); }
@media (max-width: 575.98px) {
.doc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc-type__head { flex-wrap: wrap; }
}
/* Bara de salvare a paginii de companie: rămâne la baza ferestrei cât timp pagina e derulată. */
.company-bar { position: sticky; bottom: 0; z-index: 3; }
/* Pe iOS, un control sub 16px face pagina sa se mareasca la focus. Baza de 14px ramane
pentru desktop; pe ecran mic, controalele urca la 16px ca ecranul sa stea locului. */
@media (max-width: 767.98px) {
.form-control, .form-select, textarea.form-control { font-size: 16px; }
}
/* ---- Ecranul „Companie" (/company) ----
Două coloane: identitatea companiei (logo, cod, cât de complete sunt datele fiscale) rămâne
sub ochi cât timp completezi, iar formularul e împărțit pe grupe, fiecare în cardul ei.
Înainte totul era o singură coloană lungă, iar starea se pierdea la derulare. */
.co-layout {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
/* Coloana de context se lipește sub antet: ce lipsește trebuie să se vadă și când ești
la ultima grupă a formularului. */
.co-aside {
position: sticky;
top: 84px;
display: flex;
flex-direction: column;
gap: .75rem;
}
.co-main { display: flex; flex-direction: column; gap: 1rem; }
.co-card { margin: 0; }
/* Antetul unei grupe: emblemă + titlu + o linie despre unde ajung datele. */
.co-card__head {
display: flex;
align-items: flex-start;
gap: .7rem;
padding: .85rem 1.15rem;
border-bottom: 1px solid var(--hs-line-soft);
}
.co-card__ic {
flex: 0 0 auto;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--hs-radius-sm);
background: var(--hs-surface-alt);
color: var(--hs-primary);
font-size: 15px;
}
.co-card__title {
margin: 0 0 .1rem;
font-size: 14px;
font-weight: 650;
color: var(--hs-text);
}
.co-card__desc { margin: 0; font-size: 12px; color: var(--hs-muted); line-height: 1.45; }
/* Datele după care recunoști compania, sub logo — citite, nu editate. */
.co-facts {
margin: 1rem 0 0;
padding-top: .85rem;
border-top: 1px solid var(--hs-line-soft);
display: flex;
flex-direction: column;
gap: .5rem;
}
.co-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.co-facts dt { font-size: 12px; font-weight: 500; color: var(--hs-muted); }
.co-facts dd {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--hs-text);
text-align: right;
word-break: break-word;
}
/* Completitudinea datelor fiscale: un câmp lipsă se vede altfel abia când factura e emisă. */
.co-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.co-progress__count { font-size: 12px; font-weight: 600; color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.co-progress { height: 6px; margin: .5rem 0 .6rem; }
.co-progress__note { font-size: 12px; color: var(--hs-muted); }
.co-missing {
margin: 0;
padding-left: 1.1rem;
font-size: 12px;
color: var(--hs-text);
display: flex;
flex-direction: column;
gap: .15rem;
}
/* Navigarea pe grupe; „active" o pune IntersectionObserver din company-index.js. */
.co-nav__item {
display: flex;
align-items: center;
gap: .55rem;
padding: .45rem .6rem;
border-radius: var(--hs-radius-sm);
font-size: 13px;
color: var(--hs-muted);
text-decoration: none;
}
.co-nav__item i { font-size: 14px; }
.co-nav__item:hover { background: var(--hs-surface-alt); color: var(--hs-text); }
.co-nav__item.active { background: var(--hs-surface-alt); color: var(--hs-primary); font-weight: 600; }
@media (max-width: 1199.98px) {
.co-layout { grid-template-columns: minmax(0, 1fr); }
.co-aside { position: static; }
/* Pe o coloană, navigarea pe ancore dublează derularea — nu mai are rost. */
.co-nav { display: none; }
}
/* =====================================================================
Antetul aplicației (.hs-topbar)
Bara de sus e singurul element prezent pe fiecare ecran: densă, cu un
singur accent (navy) și cu ierarhie clară — comandă și context la
stânga, identitate la dreapta.
===================================================================== */
.hs-topbar {
display: flex;
align-items: center;
gap: .85rem;
height: 52px;
padding: 0 1rem 0 .75rem;
background: var(--hs-primary);
color: #fff;
/* Se lipește sus: în liste lungi, comanda meniului și contul rămân la îndemână. */
position: sticky;
top: 0;
z-index: 1030;
box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}
.hs-topbar__toggle {
border: 0;
background: transparent;
color: rgba(255, 255, 255, .85);
font-size: 20px;
line-height: 1;
padding: .3rem .4rem;
border-radius: 6px;
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.hs-topbar__toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hs-topbar__toggle:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.hs-topbar__title {
margin: 0;
font-size: 14px;
font-weight: 600;
letter-spacing: .01em;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hs-topbar__right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
/* Compania curentă — context permanent într-o aplicație multi-tenant. */
.hs-topbar__tenant {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .2rem .55rem;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
color: rgba(255, 255, 255, .92);
}
.hs-topbar__tenant i { font-size: 12px; opacity: .75; }
/* Clopotelul de alerte — acelasi gabarit ca celelalte controale din antet. */
.hs-topbar__bell {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, .22);
color: rgba(255, 255, 255, .92);
font-size: 1rem;
line-height: 1;
text-decoration: none;
transition: background-color .15s ease, color .15s ease;
}
.hs-topbar__bell:hover { background: rgba(255, 255, 255, .16); color: #fff; }
/* Pe pagina de alerte butonul ramane evidentiat, ca in meniul lateral. */
.hs-topbar__bell.is-active { background: #fff; border-color: #fff; color: var(--hs-primary, #134a6d); }
.hs-topbar__bell:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
/* Limba: drapel mic + cod, într-un segmented control. */
.hs-topbar__lang { display: inline-flex; background: rgba(255, 255, 255, .12); border-radius: 6px; padding: 2px; gap: 2px; }
.hs-topbar__lang-btn {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .15rem .4rem;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
color: rgba(255, 255, 255, .7) !important;
text-decoration: none;
transition: background .12s ease, color .12s ease;
}
.hs-topbar__lang-btn:hover { color: #fff !important; }
.hs-topbar__lang-btn:hover .hs-topbar__flag { opacity: 1; }
.hs-topbar__lang-btn.is-active { background: #fff; color: var(--hs-primary) !important; }
.hs-topbar__lang-btn.is-active .hs-topbar__flag { opacity: 1; }
/* Limba inactivă are drapelul estompat: se vede care e cea curentă și fără să citești codul. */
.hs-topbar__flag {
display: block;
border-radius: 2px;
opacity: .55;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
transition: opacity .12s ease;
}
/* Identitatea: inițiale + nume + email, într-un singur control care deschide meniul. */
.hs-topbar__user {
display: flex;
align-items: center;
gap: .55rem;
max-width: 260px;
padding: .25rem .5rem .25rem .3rem;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: #fff;
cursor: pointer;
transition: background .12s ease, border-color .12s ease;
}
.hs-topbar__user:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
.hs-topbar__user:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.hs-topbar__user[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.hs-topbar__avatar {
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
}
.hs-topbar__who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.hs-topbar__name { font-size: 12px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-topbar__mail { font-size: 10px; color: rgba(255, 255, 255, .65); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-topbar__caret { font-size: 10px; color: rgba(255, 255, 255, .6); flex: 0 0 auto; }
.dropdown-menu.hs-topbar__menu { min-width: 232px; font-size: 13px; padding: .35rem 0; }
.hs-topbar__menu-head { padding: .4rem .9rem .5rem; font-size: 12px; color: var(--hs-muted); line-height: 1.4; }
.hs-topbar__menu-head .fw-semibold { color: var(--hs-text); font-size: 13px; }
.hs-topbar__menu .dropdown-item { display: flex; align-items: center; gap: .55rem; padding: .4rem .9rem; }
.hs-topbar__menu .dropdown-item i { color: var(--hs-subtle); font-size: 14px; }
.hs-topbar__menu .dropdown-item:hover i { color: var(--hs-primary); }
.hs-topbar__logout, .hs-topbar__logout:hover { color: #b42318; }
.hs-topbar__menu .hs-topbar__logout:hover i { color: #b42318; }
/* ---------------------------------------------------------------------
Căutarea de clienți din antet (.hs-qsearch)
Câmpul stă pe navy, deci se desenează „scobit" (fundal translucid), nu
ca un input alb care ar rupe banda. Panoul de rezultate, în schimb, e
o suprafață de conținut: alb, pe fundalul paginii.
--------------------------------------------------------------------- */
.hs-qsearch {
position: relative;
display: flex;
align-items: center;
/* Nu împinge titlul: crește doar cât are loc, între titlu și zona de cont. */
flex: 0 1 340px;
min-width: 0;
margin-left: auto;
}
.hs-qsearch__input {
width: 100%;
height: 30px;
padding: 0 3.4rem 0 2rem;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 6px;
background: rgba(255, 255, 255, .12);
color: #fff;
font-size: 12.5px;
line-height: 1;
transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.hs-qsearch__input::placeholder { color: rgba(255, 255, 255, .6); }
.hs-qsearch__input:hover { background: rgba(255, 255, 255, .16); }
.hs-qsearch__input:focus {
outline: 0;
background: #fff;
border-color: #fff;
color: var(--hs-text, #1f2937);
box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}
.hs-qsearch__input:focus::placeholder { color: var(--hs-subtle, #9aa4b2); }
/* Butonul nativ de „clear" al `type=search` dublează butonul propriu. */
.hs-qsearch__input::-webkit-search-cancel-button { display: none; }
.hs-qsearch__icon {
position: absolute;
left: .6rem;
font-size: 13px;
color: rgba(255, 255, 255, .7);
pointer-events: none;
transition: color .12s ease;
}
.hs-qsearch__input:focus ~ .hs-qsearch__icon { color: var(--hs-primary, #134a6d); }
.hs-qsearch__clear {
position: absolute;
right: 1.9rem;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .75);
font-size: 10px;
line-height: 1;
padding: .25rem;
border-radius: 4px;
cursor: pointer;
}
.hs-qsearch__clear:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.hs-qsearch__input:focus ~ .hs-qsearch__clear { color: var(--hs-muted, #667085); }
.hs-qsearch__input:focus ~ .hs-qsearch__clear:hover { color: var(--hs-text, #1f2937); background: rgba(19, 74, 109, .1); }
/* Indiciul pentru scurtătura „/" — dispare la focus, când nu mai are ce spune. */
.hs-qsearch__kbd {
position: absolute;
right: .5rem;
min-width: 17px;
padding: 1px 5px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 4px;
background: rgba(255, 255, 255, .1);
color: rgba(255, 255, 255, .7);
font-size: 10px;
line-height: 1.4;
text-align: center;
pointer-events: none;
}
.hs-qsearch__input:focus ~ .hs-qsearch__kbd { display: none; }
.hs-qsearch__panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 1040;
max-height: 62vh;
overflow-y: auto;
padding: .25rem;
background: #fff;
border: 1px solid var(--hs-border, #e4e7ec);
border-radius: 8px;
box-shadow: 0 12px 28px rgba(16, 24, 40, .18);
}
.hs-qsearch__panel[hidden] { display: none; }
.hs-qsearch__item {
display: flex;
align-items: center;
gap: .55rem;
padding: .4rem .5rem;
border-radius: 6px;
color: var(--hs-text, #1f2937);
text-decoration: none;
}
/* Aceeași evidențiere la hover și la navigarea cu săgețile (`is-active`). */
.hs-qsearch__item:hover, .hs-qsearch__item.is-active { background: var(--hs-bg-soft, #f2f5f9); color: var(--hs-text, #1f2937); }
.hs-qsearch__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--hs-primary, #134a6d);
color: #fff;
font-size: 11px;
font-weight: 700;
}
.hs-qsearch__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.hs-qsearch__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-qsearch__meta { display: flex; gap: .75rem; font-size: 11px; color: var(--hs-muted, #667085); min-width: 0; }
.hs-qsearch__meta span { display: inline-flex; align-items: center; gap: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-qsearch__meta i { font-size: 10px; color: var(--hs-subtle, #9aa4b2); }
/* Potrivirea căutată, evidențiată — fără fundalul galben implicit al ``. */
.hs-qsearch__panel mark { padding: 0; background: transparent; color: var(--hs-primary, #134a6d); font-weight: 700; }
.hs-qsearch__more {
display: flex;
align-items: center;
gap: .2rem;
margin-top: .25rem;
padding: .4rem .5rem;
border-top: 1px solid var(--hs-border, #e4e7ec);
border-radius: 0 0 6px 6px;
color: var(--hs-primary, #134a6d);
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
.hs-qsearch__more:hover, .hs-qsearch__more.is-active { background: var(--hs-bg-soft, #f2f5f9); color: var(--hs-primary, #134a6d); }
.hs-qsearch__more i { font-size: 16px; }
.hs-qsearch__empty {
display: flex;
align-items: center;
gap: .5rem;
padding: .7rem .6rem;
color: var(--hs-muted, #667085);
font-size: 12.5px;
}
.hs-qsearch__empty i { color: var(--hs-subtle, #9aa4b2); }
/* Pe ecran îngust rămân inițialele și meniul; numele și emailul ies. */
@media (max-width: 767.98px) {
.hs-topbar { gap: .5rem; padding-right: .5rem; }
.hs-topbar__who, .hs-topbar__tenant { display: none; }
/* Căutarea rămâne (e principalul mod de a ajunge la un client) și ia locul titlului. */
.hs-topbar__title { display: none; }
.hs-qsearch { flex: 1 1 auto; }
.hs-qsearch__kbd { display: none; }
}
/* Formularul de trimitere SMS: lățime de citit, nu de ecran. */
.sms-form { max-width: 720px; }
/* =====================================================================
Programări (/appointment)
Calendarul și lista de fișe nealocate folosesc chrome-ul comun; aici
rămân doar antetul cu unelte, filtrul de tehnicieni și zonele care
derulează singure (erau `style=` în șablon).
===================================================================== */
.appt-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.appt-head__tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.appt-head__label { font-size: 11px; color: var(--hs-muted); margin: 0; white-space: nowrap; }
.appt-head__date { width: auto; }
/* Filtrul de tehnicieni: bandă discretă sub antet, nu un bloc cu chenar și fundal gri. */
.appt-engineers {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .3rem .9rem;
margin-bottom: .75rem;
padding: .5rem .7rem;
background: var(--hs-surface-alt);
border: 1px solid var(--hs-line-soft);
border-radius: 8px;
}
.appt-engineers__lbl {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
margin-right: .2rem;
}
.appt-engineers .form-check-label { font-size: 12px; color: var(--hs-text-soft); }
/* Lista de fișe nealocate: derulează singură, nu întinde pagina. */
.appt-sheets {
max-height: 70vh;
overflow-y: auto;
scrollbar-gutter: stable;
padding-right: .35rem;
}
.appt-route__list { max-height: 40vh; overflow-y: auto; }
/* ============================================================================
Modal „Optimizare traseu" — vizualizarea „Orar": aceleasi opriri asezate pe o
grila de 30 min (ca in calendar), cu blocuri mutabile prin tragere. Comutatorul
din capul panoului alege intre lista de opriri si orar (appointment-route.js).
============================================================================ */
/* Comutatorul Lista / Orar din antetul panoului. */
.rt-view-switch {
display: inline-flex;
flex: 0 0 auto;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 6px;
overflow: hidden;
background: #fff;
}
.rt-view-btn {
display: inline-flex;
align-items: center;
gap: .3rem;
border: 0;
background: transparent;
color: var(--hs-muted, #667085);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
line-height: 1;
padding: .3rem .55rem;
cursor: pointer;
}
.rt-view-btn i { font-size: 13px; }
.rt-view-btn + .rt-view-btn { border-left: 1px solid var(--hs-line, #e6e9ec); }
.rt-view-btn:hover { background: #eef3f7; color: var(--hs-primary, #134a6d); }
.rt-view-btn.is-on { background: var(--hs-primary, #134a6d); color: #fff; }
/* Indicatia de folosire, deasupra grilei. */
.rt-cal-hint {
display: flex;
align-items: center;
gap: .35rem;
margin-bottom: .5rem;
font-size: 11px;
color: var(--hs-muted, #667085);
}
/* Grila: coloana cu ore (gutter) + panza pe care stau blocurile. */
.rt-cal { display: flex; align-items: flex-start; gap: .35rem; padding-top: .45rem; }
.rt-cal-gutter { flex: 0 0 44px; }
.rt-cal-slot {
height: var(--rt-slot, 34px);
position: relative;
font-size: 10px;
font-variant-numeric: tabular-nums;
color: #98a2b3;
text-align: right;
padding-right: .3rem;
}
/* Eticheta sta pe linia intervalului, nu in mijlocul lui. */
.rt-cal-slot span { position: relative; top: -.4em; }
.rt-cal-slot.is-hour { color: var(--hs-ink, #1f2a37); font-weight: 700; font-size: 11px; }
/* Marcaj scurt in dreptul fiecarei linii, ca ora sa se lege vizual de grila. */
.rt-cal-slot::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 4px;
border-top: 1px solid #dde3ea;
}
.rt-cal-slot.is-hour::after { width: 7px; border-top-color: #b6c2ce; }
.rt-cal-canvas {
position: relative;
flex: 1 1 auto;
min-width: 0;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 8px;
background-color: #fff;
/* Linie la fiecare 30 min si una mai apasata la ora intreaga — ca in calendar.
Grila poate incepe la :30, deci linia orara e decalata cu --rt-hour-offset (JS).
Contrastul e deliberat vizibil: fara el intervalele nu se citesc pe alb. */
background-image:
repeating-linear-gradient(
to bottom,
#dde3ea 0, #dde3ea 1px,
transparent 1px, transparent var(--rt-slot, 34px)
),
repeating-linear-gradient(
to bottom,
#b6c2ce 0, #b6c2ce 1px,
transparent 1px, transparent calc(var(--rt-slot, 34px) * 2)
);
background-position: 0 0, 0 var(--rt-hour-offset, 0px);
}
/* Reperele zilei: plecarea si sfarsitul programului de lucru. */
.rt-cal-rule {
position: absolute;
left: 0;
right: 0;
height: 0;
border-top: 1px dashed #b9c2cc;
pointer-events: none;
z-index: 1;
}
.rt-cal-rule span {
position: absolute;
right: .25rem;
top: -.7em;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .04em;
background: #fff;
padding: 0 .25rem;
color: #98a2b3;
}
.rt-cal-rule.is-start { border-top-color: var(--hs-primary, #134a6d); }
.rt-cal-rule.is-start span { color: var(--hs-primary, #134a6d); }
.rt-cal-rule.is-end { border-top-color: #b42318; }
.rt-cal-rule.is-end span { color: #b42318; }
/* Blocul unei opriri — pozitionat absolut dupa ora si durata ei. */
.rt-ev {
position: absolute;
z-index: 2;
display: flex;
align-items: flex-start;
gap: .25rem;
overflow: hidden;
padding: .2rem .35rem;
border: 1px solid #cfe9d9;
border-left: 3px solid #1a7f43;
border-radius: 6px;
background: #f2fbf6;
cursor: grab;
user-select: none;
box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.rt-ev:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .14); z-index: 3; }
.rt-ev.is-dragging {
cursor: grabbing;
opacity: .92;
z-index: 10;
box-shadow: 0 10px 24px rgba(16, 24, 40, .22);
}
/* Ora convenita cu clientul: oprirea nu se trage. */
.rt-ev.is-locked { cursor: default; border-color: #a9d9bf; border-left-color: #0f5f32; background: #e7f4ec; }
.rt-ev.is-pinned { border-color: #cdd7ee; border-left-color: #3f5fa8; background: #f3f6fd; }
.rt-ev.is-callback { border-color: #f2dfb0; border-left-color: #d99b0b; background: #fffdf7; }
.rt-ev.is-after { border-color: #fecdca; border-left-color: #b42318; background: #fef6f5; }
/* Suprapunere: durata intervenției depășește pasul dintre start-uri, deci blocul intră peste
intervalul următor. Nu e o eroare de calcul (pasul e ritmul de plecare, durata o estimare
maximă) — de aceea se marchează cu hașură discretă, nu cu roșu de alertă. Hașura merge peste
orice fundal de stare, iar iconița din colț spune cu cine se suprapune. */
.rt-ev.is-overlap::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: repeating-linear-gradient(
135deg,
rgba(180, 35, 24, .10) 0 6px,
rgba(180, 35, 24, 0) 6px 12px
);
}
.rt-ev.is-overlap { border-style: dashed; }
.rt-ev.is-overlap .bi-layers-half { color: #b42318; }
.rt-ev-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; gap: .1rem; }
.rt-ev-time {
display: inline-flex;
align-items: center;
gap: .25rem;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--hs-primary, #134a6d);
}
.rt-ev-time .bi-lock-fill { color: #1a7f43; }
.rt-ev-time .bi-pin-angle-fill { color: #3f5fa8; }
.rt-ev-time .bi-exclamation-triangle-fill { color: #d99b0b; }
.rt-ev-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--hs-primary, #134a6d);
color: #fff;
font-size: 9px;
font-weight: 700;
}
.rt-ev-title { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.rt-ev-title b {
font-size: 12px;
color: var(--hs-ink, #1f2a37);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rt-ev-nr {
display: inline-flex;
align-items: center;
gap: .15rem;
flex: 0 0 auto;
font-size: 10px;
font-weight: 700;
color: var(--hs-primary, #134a6d);
background: #eef3f7;
border: 1px solid #dbe6ee;
border-radius: 4px;
padding: 0 .2rem;
}
.rt-ev-meta {
font-size: 10px;
color: var(--hs-muted, #667085);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Blocurile scurte (30 min) n-au loc decat de ora si nume. */
.rt-ev.is-compact .rt-ev-meta { display: none; }
/* Actiunile opririi nu mai stau in bloc (nu incapeau la 30 min): le tine fisa de
hover — .rt-evcard, mai jos. */
/* Cat tine tragerea, cursorul ramane „grabbing" peste tot panoul. */
/* Marginea de jos a blocului = durata intervenției, ca in calendar. */
.rt-ev-resize {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 7px;
cursor: ns-resize;
}
.rt-ev-resize::before {
content: '';
position: absolute;
left: 50%;
bottom: 2px;
width: 22px;
height: 2px;
margin-left: -11px;
border-radius: 2px;
background: rgba(16, 24, 40, .18);
opacity: 0;
transition: opacity .12s ease;
}
.rt-ev:hover .rt-ev-resize::before { opacity: 1; }
.rt-ev.is-resizing { z-index: 10; box-shadow: 0 10px 24px rgba(16, 24, 40, .22); }
/* Durata afisata cat tine redimensionarea. */
.rt-ev-dur { margin-left: .3rem; font-weight: 600; color: var(--hs-muted, #667085); }
body.rt-dragging-grid { cursor: grabbing; user-select: none; }
/* Ora fixata manual din orar — provizorie (nu e salvata), deci albastru, nu verde. */
.rt-eta--pinned {
color: #3f5fa8;
background: #f3f6fd;
border-color: #cdd7ee;
}
.rt-stop--pinned {
border-color: #cdd7ee;
background: #fbfcff;
box-shadow: inset 3px 0 0 #3f5fa8, 0 1px 2px rgba(16, 24, 40, .04);
}
.rt-stop-unpin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 1px solid #cdd7ee;
border-radius: 6px;
background: #f3f6fd;
color: #3f5fa8;
font-size: 12px;
line-height: 1;
cursor: pointer;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rt-stop-unpin:hover { background: #3f5fa8; color: #fff; border-color: #3f5fa8; }
/* ---- Fisa opririi din orar (hover peste bloc) -------------------------------
Blocurile din grila sunt inguste si au `overflow:hidden`, deci fisa nu poate sta
in panou. E ancorata in modal (focus-trap) si pozitionata `fixed` fata de viewport.
Layout de card enterprise, aceeasi anatomie ca modalele aplicatiei: antet navy,
banda de stare, corp cu perechi eticheta/valoare, subsol de actiuni. Dimensiunile
vin din scala tipografica din :root, nu din valori ad-hoc. */
.rt-evcard {
position: fixed;
z-index: 20001;
/* Lățimea e dată de bara de acțiuni: cele patru butoane de la coadă (Adresă, Coordonate,
Durată, Elimină) trebuie să stea pe UN rând. Sub atât, „Elimină" cădea singur pe rândul
următor și fișa arăta ca și cum ar avea o acțiune în plus, separată. */
width: 28rem;
max-width: calc(100vw - 1.5rem);
background: var(--hs-surface, #fff);
border-radius: 12px;
/* Umbra de „suprafata deasupra modalului", ca la .modal-sheet-view. */
box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .38), 0 0 0 1px rgba(16, 24, 40, .06);
font-size: var(--hs-fs-md, 13px);
line-height: 1.45;
color: var(--hs-text-soft, #344054);
overflow: hidden;
}
/* ---- Antet: navy de brand, ca al modalelor (.modal-general-header) ---------- */
.rt-evcard-head {
position: relative;
display: flex;
align-items: flex-start;
gap: .55rem;
padding: .7rem .85rem;
background-color: var(--hs-primary, #134a6d);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .12));
color: #fff;
}
/* „X"-ul de inchidere: fisa se deschide la clic si ramane deschisa, deci trebuie sa aiba si o
iesire evidenta, nu doar Escape sau clic in afara. Sta in coltul din dreapta al antetului,
dupa numarul fisei. */
.rt-evcard-close {
margin-left: auto;
flex-shrink: 0;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: rgba(255, 255, 255, .14);
color: #fff;
font-size: 11px;
line-height: 1;
}
.rt-evcard-close:hover { background: rgba(255, 255, 255, .26); }
.rt-evcard-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* Banda de stare: acelasi cod cromatic ca marginea stanga a blocului din grila. */
.rt-evcard-head::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: rgba(255, 255, 255, .28);
}
.rt-evcard.is-locked .rt-evcard-head::after { background: #34c77b; }
.rt-evcard.is-pinned .rt-evcard-head::after { background: #7d98d8; }
.rt-evcard.is-callback .rt-evcard-head::after { background: #f0b429; }
.rt-evcard.is-after .rt-evcard-head::after { background: #f97066; }
.rt-evcard-num {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
font-size: var(--hs-fs-xs, 11px);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.rt-evcard-head-body { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.rt-evcard-time {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: var(--hs-fs-sm, 12px);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
color: rgba(255, 255, 255, .82);
}
.rt-evcard-time i { font-size: var(--hs-fs-sm, 12px); }
.rt-evcard-name {
font-size: var(--hs-fs-lg, 14px);
font-weight: 700;
letter-spacing: -.01em;
color: #fff;
overflow-wrap: anywhere;
}
.rt-evcard-nr {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .2rem;
margin-left: auto;
padding: .1rem .38rem;
border-radius: 5px;
background: rgba(255, 255, 255, .16);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
font-size: var(--hs-fs-xs, 11px);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff;
white-space: nowrap;
}
/* ---- Starile opririi: pastile pe banda de sub antet ------------------------- */
.rt-evcard-flags {
display: flex;
flex-wrap: wrap;
gap: .3rem;
padding: .55rem .85rem;
background: var(--hs-surface-alt, #fafbfc);
border-bottom: 1px solid var(--hs-line, #e6e9ec);
}
.rt-evflag {
display: inline-flex;
align-items: center;
gap: .28rem;
padding: .12rem .45rem;
border: 1px solid transparent;
border-radius: 999px;
font-size: var(--hs-fs-xs, 11px);
font-weight: 600;
line-height: 1.4;
}
.rt-evflag i { font-size: var(--hs-fs-xs, 11px); }
.rt-evflag.is-locked { background: #e7f4ec; border-color: #cfe9d9; color: #0f5f32; }
.rt-evflag.is-pinned { background: #f3f6fd; border-color: #cdd7ee; color: #35508e; }
.rt-evflag.is-callback { background: #fff8e6; border-color: #f2dfb0; color: #8a6a12; }
.rt-evflag.is-after { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.rt-evflag.is-tight { background: #fff8e6; border-color: #f2dfb0; color: #8a6a12; }
/* ---- Corp: perechi eticheta/valoare, ca fisele de detaliu din aplicatie ----- */
.rt-evcard-body { margin: 0; padding: .25rem .85rem; }
.rt-evcard-row {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr);
align-items: baseline;
gap: .5rem;
padding: .38rem 0;
border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.rt-evcard-row:last-child { border-bottom: 0; }
.rt-evcard-lbl {
display: inline-flex;
align-items: center;
gap: .35rem;
margin: 0;
font-size: var(--hs-fs-2xs, 10px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--hs-muted, #5d6b80);
}
.rt-evcard-lbl i { font-size: var(--hs-fs-sm, 12px); color: var(--hs-subtle, #98a2b3); }
.rt-evcard-val {
margin: 0;
min-width: 0;
font-size: var(--hs-fs-md, 13px);
color: var(--hs-text, #101828);
overflow-wrap: anywhere;
}
.rt-evcard-val a { color: var(--hs-primary, #134a6d); font-weight: 600; text-decoration: none; }
.rt-evcard-val a:hover { text-decoration: underline; }
/* ---- Subsol: actiunile opririi + indicatia de manevrare -------------------- */
.rt-evcard-foot {
padding: .6rem .85rem .65rem;
background: var(--hs-surface-alt, #fafbfc);
border-top: 1px solid var(--hs-line, #e6e9ec);
}
/* Aceleasi clase de buton ca in lista (handlerele sunt delegate pe ele), dar aici
au eticheta, deci nu mai sunt patrate de 26px. */
/* Confirmarea orei (și eliberarea ei) ocupă primul rând; restul acțiunilor stau pe al doilea,
toate patru pe aceeași linie. `flex-wrap` rămâne, ca pe ecrane mici să nu iasă din card. */
.rt-evcard-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.rt-evcard-actions .rt-stop-conf,
.rt-evcard-actions .rt-stop-unpin { flex: 1 1 auto; }
.rt-evcard-actions .rt-stop-addr,
.rt-evcard-actions .rt-stop-geo,
.rt-evcard-actions .rt-stop-dur,
.rt-evcard-actions .rt-stop-del { flex: 1 1 auto; justify-content: center; }
.rt-evcard-actions button {
width: auto;
height: 30px;
gap: .35rem;
padding: 0 .6rem;
border-radius: 6px;
font-size: var(--hs-fs-sm, 12px);
font-weight: 600;
white-space: nowrap;
transition: background-color .12s ease, color .12s ease, border-color .12s ease,
box-shadow .12s ease;
}
.rt-evcard-actions button:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px var(--hs-focus, rgba(19, 74, 109, .25));
}
/* Confirmarea orei e actiunea principala a fisei: ocupa tot randul, restul se
aseaza sub ea ca actiuni secundare. */
.rt-evcard-actions .rt-stop-conf { flex: 1 0 100%; justify-content: center; }
.rt-evcard-hint {
display: flex;
align-items: center;
gap: .35rem;
margin: .55rem 0 0;
padding-top: .5rem;
border-top: 1px dashed var(--hs-line, #e6e9ec);
font-size: var(--hs-fs-xs, 11px);
line-height: 1.35;
color: var(--hs-muted, #5d6b80);
}
.rt-evcard-hint i { flex: 0 0 auto; color: var(--hs-subtle, #98a2b3); }
/* ---- „Istoric SMS" din tabul Comunicare al fisei ----------------------------
Inlocuieste tabelul: mesajele au 300+ caractere si nu incapeau intr-o celula.
Fiecare intrare = pastila de stare + text strans la 3 randuri + linie de context. */
.sv-sms-scope {
text-transform: none;
letter-spacing: 0;
font-weight: 500;
font-size: var(--hs-fs-2xs, 10px);
color: var(--hs-subtle, #98a2b3);
}
.sv-sms-list { list-style: none; margin: 0; padding: 0; }
.sv-sms-item {
display: flex;
gap: .65rem;
padding: .7rem .9rem;
border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.sv-sms-item:last-child { border-bottom: 0; }
.sv-sms-item:hover { background: var(--hs-surface-alt, #fafbfc); }
/* Pastila din stanga poarta aceeasi culoare ca starea — se citeste inainte de text. */
.sv-sms-ico {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f2f4f7;
color: var(--hs-muted, #667085);
font-size: var(--hs-fs-sm, 12px);
}
.sv-sms-item.is-delivered .sv-sms-ico { background: rgba(25, 135, 84, .1); color: #198754; }
.sv-sms-item.is-sent .sv-sms-ico { background: rgba(13, 110, 253, .1); color: #0d6efd; }
.sv-sms-item.is-scheduled .sv-sms-ico { background: rgba(255, 193, 7, .16); color: #b58105; }
.sv-sms-main { flex: 1 1 auto; min-width: 0; }
.sv-sms-top { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.sv-sms-type {
font-size: var(--hs-fs-sm, 12px);
font-weight: 700;
color: var(--hs-text, #101828);
}
.sv-sms-date {
margin-left: auto;
font-size: var(--hs-fs-xs, 11px);
font-variant-numeric: tabular-nums;
color: var(--hs-subtle, #98a2b3);
}
.sv-sms-body-short,
.sv-sms-body > summary {
margin: .25rem 0 0;
font-size: var(--hs-fs-sm, 12px);
line-height: 1.45;
color: var(--hs-text-soft, #344054);
/* Reminderele au randuri proprii (linkurile stau separat) — se pastreaza. */
white-space: pre-line;
overflow-wrap: anywhere;
}
/* Mesajele lungi stau strânse la 3 randuri; click pe text = tot mesajul. Fara JS:
comuta chiar decuparea, deci textul nu e scris de doua ori. */
.sv-sms-body > summary {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
cursor: pointer;
list-style: none;
}
.sv-sms-body > summary::-webkit-details-marker { display: none; }
.sv-sms-body > summary::marker { content: ''; }
.sv-sms-body > summary:hover { color: var(--hs-text, #101828); }
.sv-sms-body[open] > summary {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
.sv-sms-meta {
display: flex;
flex-wrap: wrap;
gap: .15rem .75rem;
margin-top: .3rem;
font-size: var(--hs-fs-xs, 11px);
color: var(--hs-muted, #5d6b80);
}
.sv-sms-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.sv-sms-meta i { color: var(--hs-subtle, #98a2b3); }
.sv-sms-more {
margin: 0;
padding: .45rem .9rem;
border-top: 1px solid var(--hs-line-soft, #eef1f4);
background: var(--hs-surface-alt, #fafbfc);
font-size: var(--hs-fs-xs, 11px);
color: var(--hs-muted, #5d6b80);
}
/* Avertisment in subsolul istoricului (DDL nerulat) — chihlimbar, nu gri neutru. */
.sv-sms-note { color: #8a6a12; background: #fff8e6; border-top-color: #f2dfb0; }
/* ============================================================================
/sms — tabul „Șabloane": matrice tip SMS × tip fișă + editor lateral
============================================================================
Lista plata de dinainte ascundea exact ce conteaza: unde LIPSESTE un sablon.
Matricea face acoperirea vizibila; editorul sta langa ea, nu intr-un modal,
ca sa poti sari din celula in celula fara sa inchizi nimic. */
.smst-hint { font-size: var(--hs-fs-xs, 11px); font-weight: 500; text-transform: none;
letter-spacing: 0; color: var(--hs-subtle, #98a2b3); }
.smst-split { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: .9rem; align-items: start; }
@media (max-width: 1200px) { .smst-split { grid-template-columns: minmax(0, 1fr); } }
.smst-matrix-wrap {
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 10px;
background: var(--hs-surface, #fff);
overflow: hidden;
}
.smst-matrix { overflow-x: auto; }
.smst-grid {
display: grid;
grid-template-columns: minmax(11rem, 1.4fr) repeat(var(--smst-cols, 3), minmax(4.5rem, 1fr));
min-width: max-content;
}
.smst-cell {
display: flex;
align-items: center;
justify-content: center;
padding: .5rem .55rem;
border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
border-right: 1px solid var(--hs-line-soft, #eef1f4);
font-size: var(--hs-fs-sm, 12px);
}
.smst-cell--corner,
.smst-cell--col {
position: sticky;
top: 0;
z-index: 2;
background: var(--hs-surface-alt, #fafbfc);
border-bottom: 1px solid var(--hs-line, #e6e9ec);
font-size: var(--hs-fs-2xs, 10px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--hs-muted, #5d6b80);
text-align: center;
line-height: 1.25;
}
.smst-cell--corner { justify-content: flex-start; }
.smst-cell.is-muted { opacity: .5; }
/* Randul: eticheta tipului + modulul care il produce. */
.smst-cell--row {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: .1rem;
background: var(--hs-surface, #fff);
}
.smst-row-label { font-weight: 600; color: var(--hs-text, #101828); }
.smst-row-mod { font-size: var(--hs-fs-2xs, 10px); color: var(--hs-subtle, #98a2b3); }
/* Celula de valoare: buton, ca sa fie evident ca se poate deschide. */
.smst-cell--v {
border-width: 0 1px 1px 0;
background: none;
cursor: pointer;
font-size: 1rem;
transition: background-color .12s ease, box-shadow .12s ease;
}
.smst-cell--v:hover { background: var(--hs-primary-soft, #eef3f8); }
.smst-cell--v.is-active {
background: var(--hs-primary-soft, #eef3f8);
box-shadow: inset 0 0 0 2px var(--hs-primary, #134a6d);
}
.smst-cell--v.is-full { color: #198754; }
.smst-cell--v.is-partial { color: #b58105; }
.smst-cell--v.is-empty { color: #d0d5dd; }
.smst-cell--v.is-off { color: #98a2b3; }
.smst-ic--full { color: #198754; }
.smst-ic--partial { color: #b58105; }
.smst-ic--empty { color: #d0d5dd; }
.smst-ic--off { color: #98a2b3; }
.smst-legend {
display: flex;
flex-wrap: wrap;
gap: .25rem 1rem;
padding: .5rem .7rem;
border-top: 1px solid var(--hs-line, #e6e9ec);
background: var(--hs-surface-alt, #fafbfc);
font-size: var(--hs-fs-xs, 11px);
color: var(--hs-muted, #5d6b80);
}
.smst-legend span { display: inline-flex; align-items: center; gap: .3rem; }
/* ---- Editorul lateral ---- */
.smst-editor {
position: sticky;
top: .5rem;
display: flex;
flex-direction: column;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 10px;
background: var(--hs-surface, #fff);
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
overflow: hidden;
}
.smst-editor__empty {
padding: 2.5rem 1rem;
text-align: center;
color: var(--hs-subtle, #98a2b3);
font-size: var(--hs-fs-sm, 12px);
}
.smst-editor__empty i { display: block; font-size: 1.8rem; opacity: .5; margin-bottom: .5rem; }
.smst-editor__empty p { margin: 0; }
.smst-editor__head {
display: flex;
align-items: center;
gap: .5rem;
padding: .65rem .8rem;
background-color: var(--hs-primary, #134a6d);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .12));
color: #fff;
}
.smst-editor__id { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.smst-editor__type { font-size: var(--hs-fs-lg, 14px); font-weight: 700; letter-spacing: -.01em; }
.smst-editor__ctype {
display: inline-flex; align-items: center; gap: .25rem;
font-size: var(--hs-fs-xs, 11px); color: rgba(255, 255, 255, .82);
}
.smst-editor__head .btn { margin-left: auto; flex: 0 0 auto; --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.5); }
.smst-editor__body { padding: .8rem; max-height: 62vh; overflow-y: auto; }
.smst-row2 { display: grid; grid-template-columns: 1fr 8rem; gap: .6rem; margin-bottom: .8rem; }
.smst-field { margin-bottom: .9rem; }
.smst-field__lbl {
display: block;
margin-bottom: .25rem;
font-size: var(--hs-fs-2xs, 10px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--hs-muted, #5d6b80);
}
.smst-field__hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--hs-subtle, #98a2b3); }
.smst-field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--hs-fs-sm, 12px); }
/* Legenda argumentelor: ordinea `%s` nu apare nicaieri altundeva in aplicatie. */
.smst-legend-box { margin-top: .4rem; }
.smst-args { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.smst-args li {
display: inline-flex; align-items: center; gap: .25rem;
font-size: var(--hs-fs-xs, 11px); color: var(--hs-text-soft, #344054);
}
.smst-arg {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.3rem; padding: 0 .2rem;
border-radius: 4px;
background: var(--hs-primary-soft, #eef3f8);
color: var(--hs-primary, #134a6d);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--hs-fs-2xs, 10px);
font-weight: 700;
}
.smst-legend-empty { margin: 0; font-size: var(--hs-fs-xs, 11px); color: var(--hs-subtle, #98a2b3); }
.smst-warn {
display: flex; gap: .35rem; margin: .35rem 0 0;
font-size: var(--hs-fs-xs, 11px); line-height: 1.35; color: #8a6a12;
}
.smst-warn i { flex: 0 0 auto; }
.smst-preview {
margin-top: .45rem;
padding: .5rem .6rem;
border-radius: 8px;
background: var(--hs-surface-alt, #fafbfc);
border: 1px dashed var(--hs-line, #e6e9ec);
font-size: var(--hs-fs-xs, 11px);
}
.smst-preview:empty { display: none; }
.smst-preview__lbl {
display: block; margin-bottom: .25rem;
font-weight: 700; color: var(--hs-muted, #5d6b80);
}
.smst-preview__lbl i { margin-right: .25rem; }
.smst-preview__txt {
margin: 0; white-space: pre-line; overflow-wrap: anywhere;
color: var(--hs-text, #101828); font-size: var(--hs-fs-sm, 12px); line-height: 1.4;
}
.smst-preview__err { display: flex; gap: .35rem; color: #b42318; }
.smst-editor__foot {
display: flex; justify-content: flex-end; gap: .4rem;
padding: .6rem .8rem;
border-top: 1px solid var(--hs-line, #e6e9ec);
background: var(--hs-surface-alt, #fafbfc);
}
/* ============================================================================
/sms — tabul „Tipuri și reguli"
============================================================================
Tipurile raman globale si read-only (le citeste si aplicatia veche); editabila
e regula companiei. Fiecare card isi spune regula in limbaj natural, ca sa nu
fie nevoie sa deschizi formularul ca sa afli ce face. */
.smsr-list { display: flex; flex-direction: column; gap: .6rem; }
.smsr-card {
border: 1px solid var(--hs-line, #e6e9ec);
border-left: 3px solid #d0d5dd;
border-radius: 10px;
background: var(--hs-surface, #fff);
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
padding: .7rem .85rem;
}
.smsr-card.is-on { border-left-color: #198754; }
.smsr-card.is-open { box-shadow: 0 6px 18px rgba(16, 24, 40, .1); }
.smsr-card__head { display: flex; align-items: center; gap: .55rem; }
.smsr-card__num {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
border-radius: 6px;
background: var(--hs-primary-soft, #eef3f8);
color: var(--hs-primary, #134a6d);
font-size: var(--hs-fs-xs, 11px); font-weight: 700;
font-variant-numeric: tabular-nums;
}
.smsr-card__id { display: flex; flex-direction: column; min-width: 0; gap: .05rem; }
.smsr-card__label { font-size: var(--hs-fs-lg, 14px); font-weight: 700; color: var(--hs-text, #101828); }
.smsr-card__meta { font-size: var(--hs-fs-2xs, 10px); color: var(--hs-subtle, #98a2b3); }
.smsr-card__head .hs-pill { margin-left: auto; }
.smsr-card__sum {
margin: .45rem 0 0;
font-size: var(--hs-fs-sm, 12px);
color: var(--hs-text-soft, #344054);
}
.smsr-card__note {
display: flex; gap: .35rem; margin: .3rem 0 0;
font-size: var(--hs-fs-xs, 11px); color: var(--hs-muted, #5d6b80);
}
.smsr-form { margin-top: .7rem; border-top: 1px solid var(--hs-line-soft, #eef1f4); padding-top: .7rem; }
.smsr-fs { border: 0; margin: 0 0 .8rem; padding: 0; }
.smsr-fs > legend {
float: none; width: auto; margin-bottom: .4rem; padding: 0;
font-size: var(--hs-fs-2xs, 10px); font-weight: 700;
text-transform: uppercase; letter-spacing: .05em;
color: var(--hs-muted, #5d6b80);
}
.smsr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .55rem; }
.smsr-lbl {
display: block; margin-bottom: .2rem;
font-size: var(--hs-fs-xs, 11px); color: var(--hs-muted, #5d6b80);
}
.smsr-help { display: block; margin-top: .2rem; font-size: var(--hs-fs-2xs, 10px); color: var(--hs-subtle, #98a2b3); }
.smsr-check {
display: flex; align-items: center; gap: .45rem; margin: .1rem 0 .55rem;
font-size: var(--hs-fs-sm, 12px); color: var(--hs-text-soft, #344054); cursor: pointer;
}
.smsr-form__foot { display: flex; justify-content: flex-end; gap: .4rem; }
/* Notă de avertizare (DDL nerulat, risc de dublare): chihlimbar, nu gri neutru. */
.hs-note--warn {
padding: .5rem .65rem;
border: 1px solid #f2dfb0;
border-left: 3px solid #d99b0b;
border-radius: 8px;
background: #fff8e6;
color: #8a6a12;
margin-bottom: .5rem;
}
.hs-note--warn i { color: #d99b0b; }
/* ---- Ghid pliabil („Cum funcționează") ---------------------------------------
nativ: se deschide fără JS, iar starea nu trebuie ținută nicăieri.
Stă deschis cât vrea utilizatorul, spre deosebire de un tooltip care dispare. */
.hs-help {
margin-bottom: .7rem;
border: 1px solid var(--hs-line, #e6e9ec);
border-radius: 10px;
background: var(--hs-surface, #fff);
overflow: hidden;
}
.hs-help > summary {
display: flex;
align-items: center;
gap: .4rem;
padding: .5rem .8rem;
background: var(--hs-surface-alt, #fafbfc);
cursor: pointer;
list-style: none;
font-size: var(--hs-fs-sm, 12px);
font-weight: 700;
color: var(--hs-primary, #134a6d);
}
.hs-help > summary::-webkit-details-marker { display: none; }
.hs-help > summary::marker { content: ''; }
.hs-help > summary::after {
content: '';
margin-left: auto;
width: 7px; height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .15s ease;
opacity: .7;
}
.hs-help[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.hs-help > summary:hover { background: var(--hs-primary-soft, #eef3f8); }
.hs-help__body { padding: .75rem .9rem .85rem; border-top: 1px solid var(--hs-line, #e6e9ec); }
.hs-help__lead {
margin: 0 0 .6rem;
font-size: var(--hs-fs-sm, 12px);
line-height: 1.5;
color: var(--hs-text-soft, #344054);
}
.hs-help__dl { display: flex; flex-direction: column; gap: .55rem; margin: 0; }
.hs-help__dl > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .6rem; }
@media (max-width: 900px) { .hs-help__dl > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }
.hs-help__dl dt {
display: flex; align-items: flex-start; gap: .35rem;
font-size: var(--hs-fs-sm, 12px);
font-weight: 700;
color: var(--hs-text, #101828);
}
.hs-help__dl dt i { color: var(--hs-primary, #134a6d); }
.hs-help__dl dd {
margin: 0;
font-size: var(--hs-fs-sm, 12px);
line-height: 1.5;
color: var(--hs-text-soft, #344054);
}
/* Pașii numerotați ai unei reguli — aceeași ordine ca fieldset-urile din formular. */
.hs-help__step {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--hs-primary, #134a6d);
color: #fff;
font-size: var(--hs-fs-2xs, 10px);
font-weight: 700;
}
.hs-help__foot {
display: flex; gap: .4rem;
margin: .7rem 0 0;
padding-top: .55rem;
border-top: 1px dashed var(--hs-line, #e6e9ec);
font-size: var(--hs-fs-xs, 11px);
line-height: 1.45;
color: var(--hs-muted, #5d6b80);
}
.hs-help__foot i { flex: 0 0 auto; color: #d99b0b; }
/* ============================================================================
Modulul EMAIL (Comunicare → Email): lista de comunicări + editorul de șablon.
Reface aceeași împărțire ca la șabloanele SMS (.smst-split): sursa în stânga,
editorul în dreapta — cine cunoaște un canal se descurcă și cu celălalt.
============================================================================ */
/* Trei coloane: ce comunicări există | editorul | cum arată mesajul. Pe ecrane înguste se
stivuiesc, iar previzualizarea coboară sub editor. */
.et-workspace {
display: grid;
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.et-main { min-width: 0; }
@media (max-width: 991.98px) {
.et-workspace { grid-template-columns: minmax(0, 1fr); }
}
.et-side { position: sticky; top: .5rem; }
/* Căutarea peste lista de comunicări. */
.et-search { position: relative; margin-bottom: .6rem; }
.et-search i {
position: absolute;
left: .55rem;
top: 50%;
transform: translateY(-50%);
color: var(--hs-subtle);
font-size: var(--hs-fs-sm);
}
.et-search input { padding-left: 1.75rem; }
/* Legenda semnelor din listă. */
.et-legend {
display: flex;
flex-wrap: wrap;
gap: .1rem 1rem;
margin-top: .7rem;
padding-top: .5rem;
border-top: 1px dashed var(--hs-line);
font-size: var(--hs-fs-2xs);
color: var(--hs-subtle);
}
.et-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.et-groups { display: flex; flex-direction: column; gap: .9rem; }
.et-group__head {
display: flex;
align-items: center;
gap: .4rem;
margin-bottom: .35rem;
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-subtle);
}
.et-group__head i { color: var(--hs-primary); font-size: var(--hs-fs-sm); }
.et-list { display: flex; flex-direction: column; gap: .25rem; }
/* Un rând = o comunicare. Butonul poartă tot: denumire, starea textului, semnalele. */
.et-item {
display: flex;
align-items: center;
gap: .55rem;
width: 100%;
padding: .45rem .6rem;
text-align: left;
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius-sm);
background: var(--hs-surface);
color: var(--hs-ink);
}
.et-item:hover { border-color: var(--hs-primary); background: var(--hs-brand-bg); }
.et-item.is-active {
border-color: var(--hs-primary);
background: var(--hs-brand-bg);
box-shadow: inset 3px 0 0 var(--hs-primary);
}
.et-item__ic { color: var(--hs-primary); font-size: 1rem; flex-shrink: 0; }
.et-item__label { display: flex; flex-direction: column; min-width: 0; font-size: var(--hs-fs-md); font-weight: 600; }
.et-item__meta { font-size: var(--hs-fs-2xs); font-weight: 400; color: var(--hs-subtle); }
.et-item__flags { margin-left: auto; display: inline-flex; gap: .3rem; color: var(--hs-subtle); font-size: var(--hs-fs-sm); }
/* Editorul din dreapta. */
.et-ed { display: flex; flex-direction: column; }
.et-ed__head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.et-ed__group {
font-size: var(--hs-fs-2xs);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-subtle);
width: 100%;
}
.et-ed__title { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--hs-fs-lg); color: var(--hs-text); }
.et-ed__badge {
margin-left: auto;
font-size: var(--hs-fs-2xs);
font-weight: 600;
padding: .05rem .45rem;
border-radius: 999px;
border: 1px solid var(--hs-brand-br);
background: var(--hs-brand-bg);
color: var(--hs-brand-fg);
}
.et-ed__badge.is-default { border-color: var(--hs-neutral-br); background: var(--hs-neutral-bg); color: var(--hs-neutral-fg); }
/* Corpul e HTML scris de mână: font monospațiat, ca marcajele să se citească. */
.et-ed__body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; }
/* Variabilele disponibile — jetoane care se inserează în text la clic. */
.et-vars { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .5rem; }
.et-vars__label {
width: 100%;
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-subtle);
margin-bottom: .1rem;
}
.et-var {
border: 1px solid var(--hs-line-strong);
background: var(--hs-surface-alt);
color: var(--hs-muted);
border-radius: 999px;
padding: .05rem .45rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
}
.et-var:hover { border-color: var(--hs-primary); background: var(--hs-brand-bg); color: var(--hs-primary); }
.et-ed__opts { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; }
.et-ed__foot { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--hs-line-soft); }
/* Bara de formatare a mesajului: inserează HTML în jurul selecției, ca să nu fie nevoie
să-l scrii de mână. Nu e un editor vizual — textul rămâne HTML, vizibil și verificabil. */
.et-toolbar { display: flex; flex-wrap: wrap; gap: .2rem; margin: .35rem 0; }
.et-tool {
border: 1px solid var(--hs-line-strong);
background: var(--hs-surface);
color: var(--hs-muted);
border-radius: var(--hs-radius-sm);
width: 1.85rem;
height: 1.7rem;
line-height: 1;
font-size: var(--hs-fs-md);
}
.et-tool:hover { border-color: var(--hs-primary); background: var(--hs-brand-bg); color: var(--hs-primary); }
/* „nesalvat" — semn de stare, nu eroare: chihlimbar, lângă eticheta de text propriu/implicit. */
.et-ed__badge.is-dirty {
margin-left: .35rem;
border-color: var(--hs-warn-br);
background: var(--hs-warn-bg);
color: var(--hs-warn-fg);
}
/* Avertisment sub editor: variabile scrise greșit, semnalate la fiecare tastă. */
.et-warn {
display: flex;
align-items: flex-start;
gap: .35rem;
margin: .5rem 0 0;
padding: .35rem .5rem;
font-size: var(--hs-fs-xs);
color: var(--hs-warn-fg);
background: var(--hs-warn-bg);
border: 1px solid var(--hs-warn-br);
border-radius: var(--hs-radius-sm);
}
/* Dialogul de previzualizare a mesajului (deschis din editorul de șabloane). */
.emp-subject {
display: flex;
flex-direction: column;
gap: .1rem;
padding-bottom: .55rem;
margin-bottom: .75rem;
border-bottom: 1px solid var(--hs-line);
}
.emp-subject__label {
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-subtle);
}
.emp-subject strong { font-size: var(--hs-fs-lg); color: var(--hs-ink); overflow-wrap: anywhere; }
.emp-body {
width: 100%;
min-height: 26rem;
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius-sm);
background: #fff;
}
/* ---- Jurnalul trimiterilor de email (/email → Trimiteri) ----
Detaliul unui rând: perechile documentului, eroarea SMTP completă (nu într-un tooltip pe care
nu-l poți copia) și retrimiterea. */
.el-subject {
display: inline-block;
max-width: 22rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.el-detail { padding: .75rem 1rem; background: var(--hs-surface-alt); border-left: 3px solid var(--hs-primary); }
.el-detail__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: .5rem 1.25rem;
}
.el-detail__item { display: flex; flex-direction: column; min-width: 0; }
.el-detail__item span {
font-size: var(--hs-fs-2xs);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-subtle);
}
.el-detail__item strong { font-size: var(--hs-fs-md); color: var(--hs-ink); overflow-wrap: anywhere; }
.el-detail__error {
display: flex;
align-items: flex-start;
gap: .4rem;
margin-top: .7rem;
padding: .5rem .65rem;
font-size: var(--hs-fs-xs);
line-height: 1.5;
color: var(--hs-bad-fg);
background: var(--hs-bad-bg);
border: 1px solid var(--hs-bad-br);
border-radius: var(--hs-radius-sm);
overflow-wrap: anywhere;
}
.el-detail__foot { margin-top: .7rem; }
/* „Astăzi" e contor, nu filtru: nu primește starea „activ". */
.hs-stat--plain { cursor: default; }
.hs-stat--plain:hover { border-color: var(--hs-line); }
/* Secțiunea „Adresa intervenției" din modalul de programare al fișei: desprinsă de câmpurile
de interval printr-o linie, ca formularul să se citească în două părți (când vs. unde). */
#modal_sheet_appointment .sa-address {
margin-top: 1rem;
padding-top: .85rem;
border-top: 1px dashed var(--hs-line);
}
/* ============================================================================
MODULUL FINANCIAR — jurnal de vânzări, decont TVA, scadențar
----------------------------------------------------------------------------
Trei rapoarte care se citesc altfel decât listele obișnuite: aici nu cauți un
rând, ci verifici o cifră. Deci coloanele numerice au cifre de lățime egală
(`tabular-nums`), totalurile stau lipite de tabel, iar culoarea apare doar
unde e semnal — o factură restantă, un storno negativ. Restul e alb-negru.
Totul e scopat pe `.fin-board`, ca rafinările să nu atingă alte module.
========================================================================== */
/* ---- Navigarea între rapoarte: un segmented control, nu tab-uri Bootstrap ----
Rapoartele sunt trei vederi ale aceleiași perioade, nu pagini fără legătură;
un grup compact spune asta mai bine decât trei tab-uri late. */
.fin-tabs {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--hs-surface-alt);
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius);
}
.fin-tabs__link {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .38rem .75rem;
border-radius: var(--hs-radius-sm);
font-size: var(--hs-fs-md);
font-weight: 600;
color: var(--hs-muted);
text-decoration: none;
white-space: nowrap;
transition: color .15s ease, background .15s ease;
}
.fin-tabs__link i { font-size: 14px; color: var(--hs-subtle); }
.fin-tabs__link:hover { color: var(--hs-primary); background: var(--hs-primary-soft); }
.fin-tabs__link:hover i { color: var(--hs-primary); }
.fin-tabs__link.is-active {
color: var(--hs-primary);
background: var(--hs-surface);
box-shadow: var(--hs-shadow-xs);
border: 1px solid var(--hs-brand-br);
padding: calc(.38rem - 1px) calc(.75rem - 1px);
}
.fin-tabs__link.is-active i { color: var(--hs-primary); }
.fin-tabs__link:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }
/* ---- Bara de perioadă ----
O bandă de instrumente, nu un formular într-un card: perioada e un control al
raportului de dedesubt, nu un pas separat. Totul pe un singur rând cât încape:
intervalul la stânga, filtrele suplimentare (dacă are pagina) după el. */
.fin-toolbar {
display: flex;
align-items: flex-end;
gap: 1rem;
flex-wrap: wrap;
padding: .7rem .9rem;
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius);
box-shadow: var(--hs-shadow-xs);
}
.fin-toolbar__field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.fin-toolbar__lbl {
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
}
.fin-toolbar__sep { align-self: stretch; width: 1px; background: var(--hs-line); margin: 0 .15rem; }
.fin-toolbar__spacer { flex: 1 1 auto; }
/* Controlul de interval (daterangepicker) — un singur chenar pentru toată perioada:
iconiță, textul intervalului, eticheta lui („Luna trecută", „31 de zile") și săgeata.
Inputul e doar afișaj (valorile ISO stau în câmpurile ascunse `from`/`to`), deci nu are
chenar propriu: chenarul e al controlului întreg și se aprinde la focus, ca orice câmp. */
.fin-period {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .3rem .55rem;
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius-sm);
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
.fin-period:hover { border-color: #cfd6de; }
.fin-period:focus-within { border-color: var(--hs-primary); box-shadow: 0 0 0 .18rem rgba(19, 74, 109, .12); }
.fin-period__icon { color: var(--hs-primary); font-size: 13px; line-height: 1; }
.fin-period__value {
width: 10.6rem;
border: 0;
padding: 0;
background: transparent;
color: var(--hs-text);
font-size: var(--hs-fs-md);
font-weight: 600;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.fin-period__value:focus { outline: none; }
/* Eticheta perioadei: spune ce ai ales, nu doar între ce date („Luna trecută" e informația,
„01.07 – 31.07" e dovada). Serverul o randează în zile, JS-ul o înlocuiește cu numele
scurtăturii când intervalul se potrivește exact. */
.fin-period__tag {
flex: 0 0 auto;
padding: .1rem .45rem;
border: 1px solid var(--hs-brand-br);
border-radius: 999px;
background: var(--hs-brand-bg);
color: var(--hs-brand-fg);
font-size: var(--hs-fs-2xs);
font-weight: 700;
white-space: nowrap;
}
.fin-period__caret { color: var(--hs-subtle); font-size: 11px; line-height: 1; }
/* Comutatorul de filtru („Include documentele anulate") — o stare a raportului, nu o bifă
dintr-un formular de salvat: stă pe linia de bază a controalelor, nu a etichetelor de
deasupra lor, și se aprinde în navy-ul aplicației, nu în albastrul Bootstrap. */
.fin-switch { margin-bottom: .35rem; padding-left: 2.4em; }
.fin-switch .form-check-input { width: 2em; height: 1.1em; margin-left: -2.4em; cursor: pointer; }
.fin-switch .form-check-input:checked { background-color: var(--hs-primary); border-color: var(--hs-primary); }
.fin-switch .form-check-input:focus { border-color: var(--hs-primary); box-shadow: 0 0 0 .18rem rgba(19, 74, 109, .12); }
.fin-switch .form-check-label { cursor: pointer; }
.fin-toolbar .form-check-label { font-size: var(--hs-fs-md); color: var(--hs-text-soft); white-space: nowrap; }
/* Resetarea: ultimul lucru din bară, scris discret — e o ieșire din filtre, nu o acțiune
pe care s-o cauți. Inactivă când ești deja pe starea implicită (luna curentă, fără
filtre), ca să se vadă că nu mai are ce reseta, dar fără să sară bara în lățime. */
.fin-reset {
display: inline-flex;
align-items: center;
gap: .35rem;
margin-bottom: .1rem;
padding: .32rem .7rem;
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius-sm);
color: var(--hs-muted);
font-size: var(--hs-fs-sm);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.fin-reset:hover { border-color: #cfd6de; background: var(--hs-surface-alt); color: var(--hs-text); text-decoration: none; }
.fin-reset:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }
.fin-reset:disabled { background: transparent; color: var(--hs-subtle); border-color: var(--hs-line-soft); cursor: default; }
.fin-reset i { font-size: 12px; }
/* Exportul stă lângă resetare, dar e o acțiune, nu o ieșire din filtre: aceeași formă,
accentul verde al fișierului Excel. */
.fin-export {
display: inline-flex;
align-items: center;
gap: .35rem;
margin-bottom: .1rem;
padding: .32rem .7rem;
background: var(--hs-good-bg);
border: 1px solid var(--hs-good-br);
border-radius: var(--hs-radius-sm);
color: var(--hs-good-fg);
font-size: var(--hs-fs-sm);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: border-color .15s ease, background-color .15s ease;
}
.fin-export:hover { background: #e0eee6; border-color: #b7d6c4; color: var(--hs-good-fg); text-decoration: none; }
.fin-export:focus-visible { outline: 2px solid var(--hs-good-fg); outline-offset: 1px; }
.fin-export i { font-size: 13px; }
/* ==========================================================================
Extrase bancare (.bk-*) — lista de reconciliere
Rândul răspunde la trei întrebări, în ordinea asta: cine a plătit, cât, și pe
ce factură merge. Sugestia poartă scorul și motivul: un procent fără explicație
nu se poate verifica, iar aici o greșeală ajunge în contabilitate.
========================================================================== */
.bk-upload { display: inline-flex; align-items: center; gap: .5rem; }
.bk-upload__file {
display: inline-flex; align-items: center; gap: .4rem;
max-width: 16rem;
padding: .42rem .7rem;
border: 1px dashed var(--hs-line);
border-radius: var(--hs-radius-sm);
background: var(--hs-surface);
color: var(--hs-muted);
font-size: var(--hs-fs-sm);
cursor: pointer;
white-space: nowrap; overflow: hidden;
}
.bk-upload__file:hover { border-color: var(--hs-primary); color: var(--hs-primary); }
.bk-upload__file input[type="file"] { display: none; }
.bk-upload__file span { overflow: hidden; text-overflow: ellipsis; }
.bk-table td { vertical-align: top; }
.bk-party { font-weight: 600; color: var(--hs-text); }
.bk-descr { max-width: 42rem; overflow-wrap: anywhere; }
/* Sugestia de factură */
.bk-sugg__inv { font-weight: 700; color: var(--hs-primary); }
.bk-sugg__why { margin-top: .15rem; font-size: var(--hs-fs-xs); color: var(--hs-muted); font-style: italic; }
.bk-score {
display: inline-block;
margin-left: .35rem;
padding: .05rem .4rem;
border-radius: 999px;
font-size: var(--hs-fs-2xs);
font-weight: 700;
border: 1px solid transparent;
}
/* Verde doar la potrivire aproape sigură: culoarea e un verdict, nu un accent. */
.bk-score--high { background: var(--hs-good-bg); color: var(--hs-good-fg); border-color: var(--hs-good-br); }
.bk-score--mid { background: var(--hs-warn-bg); color: var(--hs-warn-fg); border-color: var(--hs-warn-br); }
.bk-score--low { background: var(--hs-neutral-bg); color: var(--hs-neutral-fg); border-color: var(--hs-neutral-br); }
/* ---- Cifrele de sus ----
Aceleași `.hs-stat` ca în restul aplicației, doar cu numărul mai mare: pe un
raport, cifra ESTE conținutul. `tabular-nums` ține sumele aliniate între ele. */
.fin-board .hs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Scadentarul are trei cifre, nu patru: cat, cat e restant si pe cate facturi. */
.fin-board .hs-stats.fin-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-board .hs-stat { border-radius: 6px; padding: .8rem .95rem; }
.fin-board .hs-stat__icon { width: 36px; height: 36px; border-radius: 8px; }
.fin-board .hs-stat__val { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fin-board .hs-stat__lbl { font-size: var(--hs-fs-2xs); letter-spacing: .06em; }
.fin-board .hs-stat__unit { font-size: var(--hs-fs-sm); font-weight: 600; color: var(--hs-subtle); margin-left: .2rem; }
/* Suma restantă e singurul indicator care are voie să fie roșu: e o problemă, nu o stare. */
.fin-stat--bad .hs-stat__val { color: var(--hs-bad-fg); }
.fin-stat--bad .hs-stat__icon { background: var(--hs-bad-bg); color: var(--hs-bad-fg); }
/* ---- Cardurile și tabelele ---- */
.fin-board .hs-card {
border-radius: 6px;
box-shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .04);
}
/* Antetul unei secțiuni: titlu mic la stânga, context la dreapta (perioada, numărul
de documente). Aceeași bandă pe toate trei rapoartele. */
.fin-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap;
margin-bottom: .85rem;
}
.fin-head__title {
margin: 0;
font-size: var(--hs-fs-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-muted);
}
.fin-head__meta { font-size: var(--hs-fs-sm); color: var(--hs-subtle); font-variant-numeric: tabular-nums; }
.fin-board table.table-enterprise thead th {
font-size: var(--hs-fs-2xs);
text-transform: uppercase;
letter-spacing: .07em;
color: var(--hs-subtle);
font-weight: 600;
padding-top: .5rem;
padding-bottom: .5rem;
white-space: nowrap;
}
.fin-board table.table-enterprise tbody td { padding-top: .45rem; padding-bottom: .45rem; }
/* Coloana de bani: cifre de lățime egală, aliniate la dreapta, fără wrap. Coloana
citită pe verticală („se adună la total?") e cea care contează, nu rândul. */
.fin-num {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
.fin-num--strong { font-weight: 700; color: var(--hs-ink); }
/* Stornările sunt stocate negativ; se citesc ca scădere, nu ca eroare — deci roșu
temperat, nu semnal de alarmă. */
.fin-num--neg { color: var(--hs-bad-fg); }
.fin-num--muted { color: var(--hs-subtle); }
/* Restul neîncasat, scris sub suma încasată. */
.fin-num__rest { display: block; font-size: var(--hs-fs-xs); color: var(--hs-bad-fg); font-weight: 600; }
/* Rândul de total: lipit de tabel, cu o linie groasă deasupra — ochiul îl caută
la sfârșitul coloanei, nu într-un card separat. */
.fin-board table.table-enterprise tfoot td,
.fin-board table.table-enterprise tfoot th {
background: var(--hs-surface-alt);
border-top: 2px solid var(--hs-line-strong) !important;
padding-top: .55rem;
padding-bottom: .55rem;
font-size: var(--hs-fs-md);
font-weight: 700;
color: var(--hs-ink);
}
.fin-board table.table-enterprise tfoot .fin-num { font-variant-numeric: tabular-nums; }
.fin-total__lbl { font-size: var(--hs-fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--hs-muted); }
/* Numărul documentului + linia de context de sub el (fișa, data). */
.fin-doc__nr { font-weight: 700; color: var(--hs-ink); }
.fin-doc__sub { display: block; font-size: var(--hs-fs-xs); color: var(--hs-subtle); }
.fin-doc--void .fin-doc__nr { text-decoration: line-through; color: var(--hs-subtle); font-weight: 600; }
.fin-board tr.fin-row--void td { color: var(--hs-subtle); }
/* ---- Etichete de stare ----
O singură familie, ca la piese: fundal deschis + text închis + contur. Stările
e-Factura sunt șase; șase culori Bootstrap pline pe același rând ar face tabelul
ilizibil. */
.fin-badge {
display: inline-block;
padding: .16em .5em;
border-radius: 4px;
border: 1px solid var(--hs-neutral-br);
background: var(--hs-neutral-bg);
color: var(--hs-neutral-fg);
font-size: var(--hs-fs-xs);
font-weight: 600;
line-height: 1.45;
white-space: nowrap;
}
.fin-badge--info { background: var(--hs-info-bg); color: var(--hs-info-fg); border-color: var(--hs-info-br); }
.fin-badge--good { background: var(--hs-good-bg); color: var(--hs-good-fg); border-color: var(--hs-good-br); }
.fin-badge--warn { background: var(--hs-warn-bg); color: var(--hs-warn-fg); border-color: var(--hs-warn-br); }
.fin-badge--bad { background: var(--hs-bad-bg); color: var(--hs-bad-fg); border-color: var(--hs-bad-br); }
/* Cazul obișnuit („netrimisă", „în termen") se scrie, nu se colorează. */
.fin-badge--quiet { background: transparent; border-color: transparent; color: var(--hs-muted); font-weight: 500; }
/* Restanță veche: aici culoarea plină e justificată — e singura din tabel. */
.fin-badge--alert { background: var(--hs-bad-solid); border-color: var(--hs-bad-solid); color: #fff; }
/* ---- Decontul de TVA: cifra care se trece în declarație ----
Un singur număr contează pe pagina asta. Primește spațiu și greutate, restul
tabelului îl susține. */
.fin-figure { text-align: center; padding: 1.25rem 0; }
.fin-figure__val {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.05;
letter-spacing: -.03em;
color: var(--hs-ink);
font-variant-numeric: tabular-nums;
}
.fin-figure__cur { font-size: 1rem; font-weight: 600; color: var(--hs-subtle); margin-left: .25rem; }
.fin-figure__lbl { margin-top: .35rem; font-size: var(--hs-fs-sm); color: var(--hs-muted); }
/* Cota, în coloana din stânga a defalcării: un jeton, ca să se citească ca valoare. */
.fin-rate {
display: inline-block;
min-width: 3.1rem;
padding: .12em .45em;
text-align: center;
border-radius: 4px;
background: var(--hs-brand-bg);
border: 1px solid var(--hs-brand-br);
color: var(--hs-brand-fg);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ---- Nota de subsol a unui raport ---- */
.fin-note {
display: flex;
align-items: flex-start;
gap: .4rem;
margin: .9rem 0 0;
font-size: var(--hs-fs-xs);
line-height: 1.55;
color: var(--hs-muted);
}
.fin-note i { color: var(--hs-subtle); margin-top: .1rem; }
/* ---- Starea goală ---- */
.fin-empty { text-align: center; padding: 2.75rem 1rem; color: var(--hs-muted); }
.fin-empty i { display: block; font-size: 1.75rem; color: var(--hs-subtle); margin-bottom: .5rem; }
.fin-empty--ok i { color: var(--hs-good-fg); }
@media (max-width: 991.98px) {
.fin-board .hs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin-toolbar__sep { display: none; }
}
@media (max-width: 575.98px) {
.fin-board .hs-stats { grid-template-columns: 1fr; }
.fin-tabs { display: flex; width: 100%; }
.fin-tabs__link { flex: 1 1 0; justify-content: center; }
.fin-toolbar__field .form-control { width: 100%; }
}
/* ============================================================================
MODULUL HR — layout enterprise pentru toate subsecțiunile
----------------------------------------------------------------------------
HR crescuse cu o temă paralelă: banda de indicatori și tabelele veneau din
biblioteca `urp-*` (main.css), cu o paletă caldă (bej #fbfbfa / #e6e6e1) și
colțuri de 12px, în timp ce restul aplicației folosește paleta rece navy și
6-7px. Două ERP-uri în același ecran.
Aici HR trece pe tokenii `--hs-*` și pe componentele comune (`hs-stats`,
`table-enterprise`, `hs-card`). Ce rămâne propriu modulului poartă prefixul
`hr-` și e scopat pe `.hr-board`, ca la piese (`pq-`) și financiar (`fin-`).
Scope-ul ridică și specificitatea peste regulile simple din main.css, care se
încarcă după app.css.
========================================================================== */
/* ---- Rearmonizarea claselor HR existente pe tokeni ----
Aceleași nume, aceeași structură — doar culorile și razele intră în sistem. */
.hr-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .hr-dash-grid { grid-template-columns: 1fr; } }
.hr-chartcard {
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: 6px;
box-shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .04);
padding: .9rem 1.05rem 1rem;
}
.hr-chartcard__title {
font-size: var(--hs-fs-2xs);
text-transform: uppercase;
letter-spacing: .07em;
color: var(--hs-subtle);
font-weight: 700;
margin-bottom: .9rem;
}
/* Bare orizontale (personal pe departament) */
.hr-bars { display: flex; flex-direction: column; gap: .55rem; }
.hr-barrow { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: .6rem; }
.hr-bar-label {
font-size: var(--hs-fs-md);
color: var(--hs-text-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hr-bar-track { height: 10px; background: var(--hs-neutral-bg); border-radius: 999px; overflow: hidden; }
/* Bară plată, într-o singură culoare: gradientul sugera o valoare care variază
pe lungime, dar bara reprezintă un singur număr. */
.hr-bar-fill { height: 100%; border-radius: 999px; background: var(--hs-primary); min-width: 3px; }
.hr-bar-val {
font-size: var(--hs-fs-md);
font-weight: 700;
color: var(--hs-ink);
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Coloane (angajări pe lună) */
.hr-cols { display: flex; align-items: flex-end; gap: .5rem; height: 130px; padding-top: 6px; }
.hr-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.hr-col-val { font-size: var(--hs-fs-xs); font-weight: 700; color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.hr-col-fill { width: 62%; max-width: 34px; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--hs-primary); }
/* Luna fără angajări: o linie, nu o coloană — altfel „0" pare o valoare mică, nu zero. */
.hr-col--zero .hr-col-fill { background: var(--hs-line-strong); }
.hr-col--zero .hr-col-val { color: var(--hs-subtle); font-weight: 500; }
.hr-col-lbl { font-size: var(--hs-fs-2xs); color: var(--hs-subtle); text-transform: uppercase; letter-spacing: .05em; }
/* Zile rămase până la o expirare: sub 15 zile e o problemă, nu o informație. */
.hr-att-days {
display: inline-block;
min-width: 46px;
text-align: center;
padding: .12rem .45rem;
border-radius: 4px;
border: 1px solid transparent;
font-size: var(--hs-fs-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.hr-att-days--warn { background: var(--hs-warn-bg); color: var(--hs-warn-fg); border-color: var(--hs-warn-br); }
.hr-att-days--soon { background: var(--hs-bad-bg); color: var(--hs-bad-fg); border-color: var(--hs-bad-br); }
.hr-att-days--ok { background: var(--hs-good-bg); color: var(--hs-good-fg); border-color: var(--hs-good-br); }
/* Starea goală: text normal, nu italic — nu e o notă de subsol, e conținutul. */
.hr-empty-soft,
.hr-empty { padding: 2.25rem 1rem; text-align: center; color: var(--hs-muted); font-style: normal; font-size: var(--hs-fs-md); }
.hr-empty i { display: block; font-size: 1.6rem; color: var(--hs-subtle); margin-bottom: .5rem; }
.hr-empty--ok i { color: var(--hs-good-fg); }
/* ---- Antetul fișei de angajat ---- */
.hr-prof {
display: flex;
align-items: center;
gap: 1.1rem;
padding: 1rem 1.15rem;
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: 6px;
box-shadow: var(--hs-shadow-sm);
flex-wrap: wrap;
}
.hr-prof__avatar {
width: 64px;
height: 64px;
border-radius: 8px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
background: var(--hs-primary);
box-shadow: none;
}
.hr-prof__id { flex: 1 1 240px; min-width: 0; }
.hr-prof__name { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--hs-text); line-height: 1.15; }
.hr-prof__meta { color: var(--hs-muted); font-size: var(--hs-fs-md); margin-top: 3px; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.hr-prof__meta a { color: var(--hs-muted); text-decoration: none; }
.hr-prof__meta a:hover { color: var(--hs-primary); }
.hr-prof__kpis { display: flex; gap: 1.4rem; align-items: center; padding-left: .5rem; }
.hr-prof__kpi { display: flex; flex-direction: column; }
.hr-prof__kpi b { font-size: 1.05rem; font-weight: 700; color: var(--hs-ink); font-variant-numeric: tabular-nums; }
.hr-prof__kpi span { font-size: var(--hs-fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--hs-subtle); font-weight: 600; margin-top: 2px; }
@media (max-width: 767px) { .hr-prof__kpis { padding-left: 0; gap: 1rem; } }
/* ---- Cronologia angajatului ---- */
.hr-timeline { position: relative; padding: .3rem 0 .3rem 2rem; }
.hr-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--hs-line); }
.hr-tl-item { position: relative; padding: 0 0 1.05rem 0; }
.hr-tl-item:last-child { padding-bottom: 0; }
.hr-tl-dot {
position: absolute;
left: -1.72rem;
top: 2px;
width: 20px;
height: 20px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
box-shadow: 0 0 0 3px var(--hs-surface);
}
/* Punctele cronologiei: fundal deschis + iconiță închisă, ca restul etichetelor
de stare — nu cinci pastile pline în culori pure pe aceeași coloană. */
.hr-tl-dot.navy { background: var(--hs-brand-bg); color: var(--hs-brand-fg); }
.hr-tl-dot.blue { background: var(--hs-info-bg); color: var(--hs-info-fg); }
.hr-tl-dot.green { background: var(--hs-good-bg); color: var(--hs-good-fg); }
.hr-tl-dot.amber { background: var(--hs-warn-bg); color: var(--hs-warn-fg); }
.hr-tl-dot.red { background: var(--hs-bad-bg); color: var(--hs-bad-fg); }
.hr-tl-date { font-size: var(--hs-fs-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--hs-subtle); font-weight: 600; }
.hr-tl-title { font-size: var(--hs-fs-lg); font-weight: 700; color: var(--hs-ink); margin: 1px 0; }
.hr-tl-text { font-size: var(--hs-fs-md); color: var(--hs-muted); }
/* ============================================================================
Componente noi, scopate pe `.hr-board`
========================================================================== */
.hr-board .hs-card,
.hr-board .card {
border-radius: 6px;
box-shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .04);
}
/* Indicatorii: aceeași componentă ca în restul aplicației. Banda veche era un rând
flex în care etichetele lungi ieșeau din cutia lor și se lipeau de vecin
(„ANGAJAȚI ACTIVICONTRACTE ACTIVE"); un grid cu coloane egale nu poate face asta. */
.hr-board .hs-stat { border-radius: 6px; padding: .8rem .95rem; }
.hr-board .hs-stat__icon { width: 36px; height: 36px; border-radius: 8px; }
.hr-board .hs-stat__val { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hr-board .hs-stat__lbl { font-size: var(--hs-fs-2xs); letter-spacing: .06em; }
.hr-stat__unit { font-size: var(--hs-fs-sm); font-weight: 600; color: var(--hs-subtle); margin-left: .15rem; }
/* Antet de card: titlu discret la stânga, context sau acțiune la dreapta. */
.hr-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap;
margin-bottom: .85rem;
}
.hr-head__title {
display: flex;
align-items: center;
gap: .45rem;
margin: 0;
font-size: var(--hs-fs-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-muted);
}
.hr-head__title i { color: var(--hs-subtle); font-size: 14px; }
.hr-head__meta { font-size: var(--hs-fs-sm); color: var(--hs-subtle); font-variant-numeric: tabular-nums; }
/* Tabele: aceeași densitate ca în piese și financiar. */
.hr-board table.table-enterprise thead th {
font-size: var(--hs-fs-2xs);
text-transform: uppercase;
letter-spacing: .07em;
color: var(--hs-subtle);
font-weight: 600;
padding-top: .5rem;
padding-bottom: .5rem;
white-space: nowrap;
}
.hr-board table.table-enterprise tbody td { padding-top: .45rem; padding-bottom: .45rem; }
.hr-name { font-weight: 600; color: var(--hs-ink); }
.hr-sub { display: block; font-size: var(--hs-fs-xs); color: var(--hs-subtle); }
.hr-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hr-num--strong { font-weight: 700; color: var(--hs-ink); }
.hr-board table.table-enterprise tfoot td,
.hr-board table.table-enterprise tfoot th {
background: var(--hs-surface-alt);
border-top: 2px solid var(--hs-line-strong) !important;
font-weight: 700;
color: var(--hs-ink);
}
/* ---- Etichete de stare: o singură familie pentru tot modulul ----
Concedii, pontaj, salarizare și medical foloseau fiecare pastilele Bootstrap
proprii (success/warning/danger/secondary, uneori cu contur, uneori fără). */
.hr-badge {
display: inline-block;
padding: .16em .5em;
border-radius: 4px;
border: 1px solid var(--hs-neutral-br);
background: var(--hs-neutral-bg);
color: var(--hs-neutral-fg);
font-size: var(--hs-fs-xs);
font-weight: 600;
line-height: 1.45;
white-space: nowrap;
}
.hr-badge--info { background: var(--hs-info-bg); color: var(--hs-info-fg); border-color: var(--hs-info-br); }
.hr-badge--brand { background: var(--hs-brand-bg); color: var(--hs-brand-fg); border-color: var(--hs-brand-br); }
.hr-badge--good { background: var(--hs-good-bg); color: var(--hs-good-fg); border-color: var(--hs-good-br); }
.hr-badge--warn { background: var(--hs-warn-bg); color: var(--hs-warn-fg); border-color: var(--hs-warn-br); }
.hr-badge--bad { background: var(--hs-bad-bg); color: var(--hs-bad-fg); border-color: var(--hs-bad-br); }
/* Starea obișnuită se scrie, nu se colorează. */
.hr-badge--quiet { background: transparent; border-color: transparent; color: var(--hs-muted); font-weight: 500; }
/* ---- Punctele de intrare din dashboard ----
Erau patru iconițe în patru culori pline (albastru, chihlimbar, verde, mov) —
culoarea nu spunea nimic, doar decora. O singură familie, iar diferența o fac
iconița și eticheta. */
.hr-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.hr-hub__card {
display: flex;
align-items: center;
gap: .7rem;
padding: .75rem .85rem;
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: 6px;
box-shadow: var(--hs-shadow-xs);
text-decoration: none;
color: inherit;
transition: border-color .15s ease, box-shadow .15s ease;
}
.hr-hub__card:hover { border-color: var(--hs-brand-br); box-shadow: var(--hs-shadow-sm); }
.hr-hub__ic {
display: grid;
place-items: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
border-radius: 8px;
background: var(--hs-brand-bg);
color: var(--hs-primary);
font-size: 16px;
}
.hr-hub__title { font-weight: 600; color: var(--hs-ink); font-size: var(--hs-fs-lg); }
.hr-hub__desc { font-size: var(--hs-fs-xs); color: var(--hs-muted); }
.hr-hub__card:hover .hr-hub__title { color: var(--hs-primary); }
/* ---- Bara de filtre (perioadă, căutare) ---- */
.hr-filters {
display: flex;
align-items: flex-end;
gap: 1rem;
flex-wrap: wrap;
padding: .7rem .9rem;
background: var(--hs-surface);
border: 1px solid var(--hs-line);
border-radius: 6px;
box-shadow: var(--hs-shadow-xs);
}
.hr-filters__field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.hr-filters__lbl {
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--hs-subtle);
}
.hr-filters__field .form-control,
.hr-filters__field .form-select { width: 9.5rem; }
.hr-filters__spacer { flex: 1 1 auto; }
.hr-filters > .btn { margin-left: .35rem; }
/* ---- Segmented control pentru filtrele de stare (concedii, notificări) ---- */
.hr-tabs {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--hs-surface-alt);
border: 1px solid var(--hs-line);
border-radius: var(--hs-radius);
}
.hr-tabs__link {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .35rem .7rem;
border-radius: var(--hs-radius-sm);
font-size: var(--hs-fs-md);
font-weight: 600;
color: var(--hs-muted);
text-decoration: none;
white-space: nowrap;
}
.hr-tabs__link:hover { color: var(--hs-primary); background: var(--hs-primary-soft); }
/* `is-active` pentru linkuri (concedii, filtre pe URL), `active` pentru butoanele de tab —
Bootstrap comuta clasa lui, deci trebuie sa raspunda la amandoua. */
.hr-tabs__link.is-active,
.hr-tabs__link.active {
color: var(--hs-primary);
background: var(--hs-surface);
box-shadow: var(--hs-shadow-xs);
border: 1px solid var(--hs-brand-br);
padding: calc(.35rem - 1px) calc(.7rem - 1px);
}
/* Contorul din pastilă: câte cereri așteaptă în starea asta. */
.hr-tabs__n {
min-width: 1.25rem;
padding: 0 .3em;
border-radius: 999px;
background: var(--hs-neutral-bg);
border: 1px solid var(--hs-neutral-br);
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-align: center;
font-variant-numeric: tabular-nums;
}
.hr-tabs__link.is-active .hr-tabs__n,
.hr-tabs__link.active .hr-tabs__n { background: var(--hs-brand-bg); border-color: var(--hs-brand-br); color: var(--hs-brand-fg); }
/* Butonul de tab e un : fara conturul si fundalul implicite de buton. */
.hr-tabs button.hr-tabs__link { border: 1px solid transparent; background: transparent; }
.hr-tabs button.hr-tabs__link.active { background: var(--hs-surface); border-color: var(--hs-brand-br); }
/* ---- Coloana de formular ----
Formularele de adăugare (pontaj, perioadă de salarizare) stau lângă listă, ca
un panou de lucru; primesc antet propriu, ca să nu pară un card orfan. */
.hr-form .form-label {
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--hs-subtle);
margin-bottom: .2rem;
}
.hr-form .form-control,
.hr-form .form-select { font-size: var(--hs-fs-md); }
.hr-form__row + .hr-form__row { margin-top: .65rem; }
/* Butonul de trimitere închide panoul, despărțit de câmpuri printr-o linie. */
.hr-form__foot { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--hs-line-soft); }
/* ---- Nota de subsol / avertisment ---- */
.hr-note {
display: flex;
align-items: flex-start;
gap: .4rem;
margin: .9rem 0 0;
font-size: var(--hs-fs-xs);
line-height: 1.55;
color: var(--hs-muted);
}
.hr-note i { color: var(--hs-subtle); margin-top: .1rem; }
/* Avertismentul de sus (parametri fiscali de test): serios, dar nu galben strident. */
.hr-warnbar {
display: flex;
align-items: flex-start;
gap: .5rem;
padding: .6rem .85rem;
margin-bottom: 1rem;
background: var(--hs-warn-bg);
border: 1px solid var(--hs-warn-br);
border-radius: 6px;
color: var(--hs-warn-fg);
font-size: var(--hs-fs-md);
line-height: 1.5;
}
@media (max-width: 991.98px) {
.hr-board .hs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
.hr-board .hs-stats { grid-template-columns: 1fr; }
.hr-tabs { display: flex; width: 100%; }
.hr-tabs__link { flex: 1 1 0; justify-content: center; }
.hr-filters__field .form-control,
.hr-filters__field .form-select { width: 100%; }
}
/* Numarul de coloane al benzii de indicatori se alege dupa cate sunt, ca ultimul rand
sa fie plin (vezi hr/_partials/_kpi_band.html.twig). */
.hr-board .hs-stats.hr-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hr-board .hs-stats.hr-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-board .hs-stats.hr-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Cardul care incheie un grid de doua coloane cu numar impar de elemente. */
.hr-dash-grid__wide { grid-column: 1 / -1; }
@media (max-width: 991.98px) {
.hr-board .hs-stats.hr-stats--3,
.hr-board .hs-stats.hr-stats--4,
.hr-board .hs-stats.hr-stats--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
.hr-board .hs-stats.hr-stats--3,
.hr-board .hs-stats.hr-stats--4,
.hr-board .hs-stats.hr-stats--5 { grid-template-columns: 1fr; }
}
/* ============================================================================
HR — culoarea ca semnal de stare
----------------------------------------------------------------------------
Prima trecere pe layout enterprise a scos toată culoarea din modul, ca reacție
la cele patru iconițe decorative (albastru/chihlimbar/verde/mov, rotite după
poziție, fără nicio legătură cu conținutul). Rezultatul a fost prea șters.
Culoarea se întoarce, dar codifică STAREA, nu categoria, și e aceeași în tot
modulul:
navy — personal, structură, valoarea de referință
verde — aprobat, activ, în regulă
chihlimbar — în așteptare, expiră curând, cere atenție
roșu — respins, restant, expirat
Tonurile vin din paleta semantică `--hs-*-bg/fg/br`: fundal deschis + text
închis, nu pastile pline. Un ecran de lucru trebuie să rămână citibil când zece
rânduri poartă zece stări.
========================================================================== */
/* Variante semantice pentru emblema indicatorilor. `--warn` și `--mute` existau;
restul lipseau, de aceea totul ajunsese navy sau gri.
Emblemele sunt PLINE, cu iconiță albă: pe un pătrat de 36px, un fundal pastelat cu
iconiță colorată aproape nu se vede. Umplerile vin din tokenii `--hs-*-solid` —
versiunile temperate ale semanticelor, gândite tocmai pentru butoane și pastile pline
(verdele Bootstrap #198754 ar striga pe un ecran de lucru; #1f6b4d nu). */
.hr-board .hs-stat__icon { color: #fff; }
.hr-board .hs-stat__icon--brand { background: var(--hs-primary); }
.hr-board .hs-stat__icon--info { background: var(--hs-info-fg); }
.hr-board .hs-stat__icon--good { background: var(--hs-good-solid); }
.hr-board .hs-stat__icon--bad { background: var(--hs-bad-solid); }
.hr-board .hs-stat__icon--warn { background: var(--hs-warn-solid); }
/* „Mute" rămâne stins: e context, nu semnal. */
.hr-board .hs-stat__icon--mute { background: var(--hs-neutral-bg); color: var(--hs-subtle); }
/* Cifra se colorează DOAR când e o problemă: cereri neaprobate, expirări, restanțe.
Dacă s-ar colora și „în regulă", verdele ar deveni la fel de tare ca roșul și
ochiul n-ar mai ști unde să se uite. */
.hr-stat--bad .hs-stat__val { color: var(--hs-bad-fg); }
.hr-stat--warn .hs-stat__val { color: var(--hs-warn-fg); }
/* Indicatorul cu probleme primește și un contur, ca să se decupeze de vecini. */
.hr-stat--bad { border-color: var(--hs-bad-br); }
.hr-stat--warn { border-color: var(--hs-warn-br); }
/* Punctele de intrare: fiecare destinație are tonul ei, ca să fie recunoscută din
ochi după prima folosire. Aici culoarea e ajutor de orientare, nu decor — de
aceea rămâne din aceeași paletă temperată, nu culori pure ca înainte. */
.hr-hub__ic { color: #fff; }
.hr-hub__ic--brand { background: var(--hs-primary); }
.hr-hub__ic--info { background: var(--hs-info-fg); }
.hr-hub__ic--good { background: var(--hs-good-solid); }
.hr-hub__ic--warn { background: var(--hs-warn-solid); }
/* Bara de accent din stânga: la hover, cardul își arată tonul pe toată înălțimea. */
.hr-hub__card { position: relative; overflow: hidden; }
.hr-hub__card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: currentColor;
opacity: 0;
transition: opacity .15s ease;
}
.hr-hub__card:hover::before { opacity: 1; }
/* Tonul stă pe card, nu se deduce din copil cu `:has()`: selectorul e suportat abia din
Chrome 105, iar bara de accent ar dispărea tăcut pe browsere mai vechi. */
.hr-hub__card--brand { color: var(--hs-brand-fg); }
.hr-hub__card--info { color: var(--hs-info-fg); }
.hr-hub__card--good { color: var(--hs-good-fg); }
.hr-hub__card--warn { color: var(--hs-warn-fg); }
/* Textul nu moștenește tonul cardului — doar bara de accent îl folosește. */
.hr-hub__title { color: var(--hs-ink); }
.hr-hub__desc { color: var(--hs-muted); }
/* Valoarea dintr-un tabel care semnalează ceva: ore suplimentare, zile de
angajator, sume restante. Culoare pe cifră, fără fundal — rândul rămâne calm. */
.hr-val--warn { color: var(--hs-warn-fg); font-weight: 700; }
.hr-val--bad { color: var(--hs-bad-fg); font-weight: 700; }
.hr-val--good { color: var(--hs-good-fg); font-weight: 700; }
/* Barele graficelor primesc tonul seriei, nu un navy uniform. */
.hr-bar-fill--good { background: var(--hs-good-fg); }
.hr-bar-fill--warn { background: var(--hs-warn-fg); }
/* ============================================================================
ISTORIC ACȚIUNI pe o linie din „Necesar piese" (#modal_part_history)
Un jurnal de audit se citește altfel decât un formular: multe rânduri scurte, comparate
între ele pe verticală. De aici alegerile — o treaptă de font mai jos decât restul
dialogurilor (12px în celule, 11px la metadate), timestamp cu cifre de lățime egală ca
orele să se alinieze în coloană, și culoarea folosită DOAR ca semnal de stare pe o bară
de 3px în stânga rândului, nu pe fundalul lui.
Vezi templates/_part_request_history_modal.html.twig.
============================================================================ */
#modal_part_history .modal-content { font-size: var(--hs-fs-sm); }
#modal_part_history .modal-title { font-size: .9rem; }
#modal_part_history .modal-body { padding: .8rem; }
/* ---- Banda de identificare a piesei ---- */
.ph-ident {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: .6rem .85rem;
}
.ph-ident__main { min-width: 0; }
.ph-ident__code {
display: block;
font-size: var(--hs-fs-xs);
color: var(--hs-muted);
letter-spacing: .02em;
}
.ph-ident__name {
display: block;
font-size: var(--hs-fs-md);
font-weight: 600;
color: var(--hs-ink);
line-height: 1.35;
}
/* Cele trei cifre de context (câte acțiuni, prima, ultima): etichetă mică deasupra valorii,
ca într-o bandă de KPI — se citesc fără să fie nevoie de o propoziție. */
.ph-meta { display: flex; gap: 1.35rem; margin: 0; }
.ph-meta dt {
font-size: var(--hs-fs-2xs);
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 700;
color: var(--hs-muted);
line-height: 1;
margin-bottom: 3px;
}
.ph-meta dd {
margin: 0;
font-size: var(--hs-fs-sm);
font-weight: 600;
color: var(--hs-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ---- Tabelul jurnalului ---- */
.ph-table { --bs-table-bg: transparent; }
.ph-table > thead > tr > th {
padding: .45rem .7rem;
background: var(--hs-surface-alt);
border-bottom: 1px solid var(--hs-line);
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--hs-muted);
white-space: nowrap;
}
.ph-table > tbody > tr > td {
padding: .45rem .7rem;
border-top: 1px solid var(--hs-line-soft);
border-bottom: 0;
color: var(--hs-text-soft);
vertical-align: top;
}
.ph-table > tbody > tr:first-child > td { border-top: 0; }
/* Rândul anulat rămâne în jurnal (append-only), dar iese din prim-plan. */
.ph-table > tbody > tr.ph-row--void > td { color: var(--hs-muted); }
/* Data pe primul rând, ora dedesubt: coloana rămâne îngustă și scanabilă. */
.ph-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-when__d { display: block; color: var(--hs-ink); font-weight: 600; }
.ph-when__t { display: block; font-size: var(--hs-fs-xs); color: var(--hs-muted); }
/* Semnalul de stare: bară de 3px pe marginea celulei de acțiune. Ține locul unui badge
colorat pe fiecare rând — la 10 rânduri, badge-urile ar fi făcut tabelul un vitraliu. */
.ph-act { position: relative; padding-left: 1rem !important; }
.ph-act::before {
content: '';
position: absolute;
left: .25rem;
top: .5rem;
bottom: .5rem;
width: 3px;
border-radius: 2px;
background: var(--hs-line-strong);
}
.ph-act--ok::before { background: var(--hs-good-fg); }
.ph-act--bad::before { background: var(--hs-bad-fg); }
.ph-act--info::before { background: var(--hs-info-fg); }
.ph-act__label { font-weight: 600; color: var(--hs-ink); }
.ph-row--void .ph-act__label { font-weight: 500; color: var(--hs-muted); }
/* Cantitatea și motivul/furnizorul: subordonate etichetei, nu în competiție cu ea. */
.ph-act__meta { display: block; font-size: var(--hs-fs-xs); color: var(--hs-muted); margin-top: 1px; }
.ph-who { color: var(--hs-text-soft); }
.ph-term { font-size: var(--hs-fs-xs); color: var(--hs-muted); font-variant-numeric: tabular-nums; }
/* ---- Stările care înlocuiesc tabelul ---- */
.ph-state {
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
padding: 1.6rem .9rem;
font-size: var(--hs-fs-sm);
color: var(--hs-muted);
}
.ph-state i { font-size: 1.1rem; opacity: .55; }
.ph-state--error { color: var(--hs-bad-fg); }
.ph-foot-note { font-size: var(--hs-fs-xs); color: var(--hs-muted); }
/* ============================================================================
DETALII DOCUMENT (.modal-doc-detail) — modal imbricat peste modalul fișei.
Folosit de „Detalii deviz" (#modal_estimate_detail) și de „Detalii document" din Facturare
(#modal_invoice_detail): sunt același fel de ecran — un document, liniile lui, jurnalul lui
și acțiunile lui — deci împart un singur set de stiluri, `.doc-detail*`.
Documentul se citește pe secțiuni („cine/ce/cât", liniile, jurnalul, acțiunile), fiecare în
panoul alb standard (.ws-panel). O treaptă de font sub restul dialogurilor, ca la istoricul
de piese: sunt multe rânduri scurte, comparate pe verticală.
Vezi templates/sheet/_estimate_detail.html.twig.
============================================================================ */
.modal-doc-detail .modal-content { font-size: var(--hs-fs-sm); }
.modal-doc-detail .modal-title { font-size: .9rem; }
.modal-doc-detail .modal-body { padding: .8rem; }
/* Cadru: 75% din fereastra, nu treptele Bootstrap (`modal-xl` = 1140px fix). Documentul are
doua coloane si un tabel cu sase coloane de cifre; pe un ecran lat, 1140px lasa jurnalul
inghesuit, iar pe unul ingust `modal-xl` ar depasi fereastra. Specificitate pe doua clase,
ca sa bata `.modal-dialog` din Bootstrap (incarcat DUPA app.css). */
.modal-dialog.modal-doc-detail {
width: 75vw;
max-width: 75vw;
}
/* Sub 1200px, doua coloane inghesuie liniile: modalul creste catre toata latimea, iar grila
de mai jos trece pe o coloana. */
@media (max-width: 1200px) {
.modal-dialog.modal-doc-detail { width: 94vw; max-width: 94vw; }
}
/* ---- Doua coloane: documentul (larg) + jurnalul (ingust), actiunile pe toata latimea ---- */
.doc-detail__cols {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: .8rem;
align-items: start;
}
.doc-detail__main { min-width: 0; }
/* `min-width: 0` pe ambele: fara el, tabelul de linii refuza sa se micsoreze si impinge
coloana jurnalului in afara grilei. */
.doc-detail__side { min-width: 0; }
.doc-detail__side .ws-panel { margin-bottom: 0; }
/* Bara de actiuni: al treilea copil al grilei, pe ambele coloane. */
.doc-detail__cols > .doc-detail__actions { grid-column: 1 / -1; }
@media (max-width: 1200px) {
.doc-detail__cols { grid-template-columns: minmax(0, 1fr); }
.doc-detail__cols > .doc-detail__actions { grid-column: auto; }
}
/* Jurnalul poate avea zeci de intrari: deruleaza in panoul lui, ca sa nu intinda modalul si
sa nu impinga actiunile sub linia de vizibilitate. */
.doc-detail__log .doc-detail__timeline {
max-height: 52vh;
overflow-y: auto;
}
/* Capul jurnalului tine si butonul de reimprospatare, impins in dreapta. `ws-panel-head` e
bloc, deci flex-ul se pune doar aici, nu pe toate capetele de panou. */
.doc-detail__loghead {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
/* Butonul de reimprospatare, generic: jurnalele documentelor, „Istoric generari" si tab-urile
lazy din „Detalii piesa". Merge oriunde intr-un cap de sectiune deja flex. */
.hs-refresh {
border: 0;
background: none;
padding: 0 .15rem;
line-height: 1;
color: var(--hs-muted);
cursor: pointer;
}
.hs-refresh:hover { color: var(--hs-primary, #134a6d); }
.hs-refresh:disabled { cursor: default; opacity: .65; }
/* Cat timp cererea e in aer, iconita se roteste — panoul ramane pe ecran cu datele vechi. */
.hs-refresh.is-busy i {
display: inline-block;
animation: doc-detail-spin .8s linear infinite;
}
@keyframes doc-detail-spin { to { transform: rotate(360deg); } }
/* Tab-ul „Stoc" din „Detalii piesa" n-are un cap de sectiune unic in care sa intre butonul —
situatia e compusa din mai multe carduri — deci primeste o bara proprie deasupra lor. */
.pd-refreshbar { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
/* Val de incarcare, refolosibil: gazda primeste `hs-veil`, iar JS-ul comuta `is-loading` cat
tine cererea. Il folosesc jurnalele reimprospatate prin AJAX — „Detalii deviz", „Detalii
document" si „Istoric generari" din tab-ul „Fisa client".
Continutul vechi ramane dedesubt (nu se goleste lista): daca cererea esueaza, se ridica valul
si jurnalul e tot acolo. Valul si spinnerul sunt pseudo-elemente, ca sa nu trebuiasca inserat
si scos nod din DOM — la reusita panoul e oricum inlocuit cu totul. Valul blocheaza si
clicurile pe randurile de dedesubt cat timp se incarca. */
.hs-veil { position: relative; }
/* Cat tine incarcarea, gazda nu are voie sa fie mai scunda decat spinnerul: un jurnal cu o
singura intrare (sau gol) l-ar taia. */
.hs-veil.is-loading { min-height: 48px; }
.hs-veil.is-loading::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, .65);
border-radius: inherit;
z-index: 2;
}
.hs-veil.is-loading::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
border: 2px solid var(--hs-line, #e4e7ec);
border-top-color: var(--hs-primary, #134a6d);
border-radius: 50%;
animation: doc-detail-spin .7s linear infinite;
z-index: 3;
}
.doc-detail__logcount {
display: inline-block;
margin-left: .35rem;
padding: 0 .3rem;
border-radius: 4px;
background: var(--hs-surface-alt);
border: 1px solid var(--hs-line);
color: var(--hs-muted);
font-size: var(--hs-fs-2xs);
font-weight: 700;
}
/* ---- Codul devizului în listă: buton propriu, separat de chevron ---- */
.sv-est-doc { display: inline-flex; align-items: center; gap: .35rem; }
.sv-est-code-btn {
border: 0;
background: none;
padding: 0;
color: var(--hs-primary);
font-weight: 600;
font-size: var(--hs-fs-md);
}
.sv-est-code-btn:hover .sv-est-code { text-decoration: underline; }
/* ---- Banda de identificare: cod + stare, apoi cifrele documentului ---- */
.doc-detail__ident {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: .6rem .85rem;
}
.doc-detail__idmain { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.doc-detail__code { font-size: var(--hs-fs-lg); font-weight: 700; color: var(--hs-ink); }
.doc-detail__resp { font-size: var(--hs-fs-xs); color: var(--hs-muted); }
.doc-detail__meta { display: flex; gap: 1.35rem; margin: 0; flex-wrap: wrap; }
.doc-detail__meta dt {
font-size: var(--hs-fs-2xs);
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 700;
color: var(--hs-muted);
line-height: 1;
margin-bottom: 3px;
}
.doc-detail__meta dd {
margin: 0;
font-size: var(--hs-fs-sm);
font-weight: 600;
color: var(--hs-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Totalul e cifra pentru care se deschide documentul: o treaptă mai mare, în culoarea mărcii. */
.doc-detail__meta--total dd { font-size: var(--hs-fs-lg); color: var(--hs-primary); }
/* ---- Fișa și aparatul: etichetă deasupra valorii, patru celule ---- */
.doc-detail__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: .6rem .9rem;
padding: .7rem .85rem;
}
.doc-detail__lbl {
display: block;
font-size: var(--hs-fs-2xs);
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 700;
color: var(--hs-muted);
margin-bottom: 2px;
}
.doc-detail__val { display: block; font-size: var(--hs-fs-sm); color: var(--hs-ink); font-weight: 600; }
/* ---- Liniile documentului ---- */
.doc-detail__lines { --bs-table-bg: transparent; }
.doc-detail__lines > thead > tr > th {
padding: .4rem .7rem;
background: var(--hs-surface-alt);
border-bottom: 1px solid var(--hs-line);
font-size: var(--hs-fs-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--hs-muted);
white-space: nowrap;
}
.doc-detail__lines > tbody > tr > td {
padding: .4rem .7rem;
border-top: 1px solid var(--hs-line-soft);
border-bottom: 0;
color: var(--hs-text-soft);
font-variant-numeric: tabular-nums;
}
.doc-detail__lines > tfoot > tr > td {
padding: .45rem .7rem;
border-top: 1px solid var(--hs-line);
background: var(--hs-surface-alt);
color: var(--hs-ink);
}
.doc-detail__ico { color: var(--hs-subtle); margin-right: .35rem; }
.doc-detail__sub { font-size: var(--hs-fs-xs); color: var(--hs-muted); }
/* Pretul din catalog, pe linia corectata manual la emiterea devizului: ramane vizibil, taiat,
ca diferenta fata de oferta sa se vada pe document, nu doar in jurnalul de audit. */
.doc-detail__oldprice {
margin-right: .35rem;
color: var(--hs-subtle);
text-decoration: line-through;
font-size: var(--hs-fs-xs);
font-variant-numeric: tabular-nums;
}
.doc-detail__edited { margin-left: .3rem; color: var(--hs-primary); font-size: 11px; }
.doc-detail__obs { padding: .7rem .85rem; color: var(--hs-text-soft); white-space: pre-line; }
/* Bara de incarcare a dovezii de plata (proforma): fisier + mentiune + buton, pe un rand.
Sub 700px trece pe doua randuri — campul de fisier are latime proprie in mobile. */
.doc-detail__proof-add {
display: flex;
align-items: center;
gap: .4rem;
flex-wrap: wrap;
padding: .55rem .85rem;
border-bottom: 1px solid var(--hs-line-soft);
}
.doc-detail__proof-add input[type="file"] { flex: 1 1 260px; min-width: 0; }
.doc-detail__proof-add input[type="text"] { flex: 1 1 200px; min-width: 0; }
/* Incasarile: un rand per chitanta — suma la dreapta, acțiunile ei la capat. */
.doc-detail__receipt {
display: flex;
align-items: center;
gap: .6rem;
padding: .45rem .85rem;
border-top: 1px solid var(--hs-line-soft);
}
.doc-detail__receipt:first-of-type { border-top: 0; }
.doc-detail__receipt-main { flex: 1 1 auto; min-width: 0; }
.doc-detail__receipt-main b { font-size: var(--hs-fs-sm); color: var(--hs-ink); }
.doc-detail__receipt-amount {
font-weight: 700;
color: var(--hs-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.doc-detail__receipt-acts { display: inline-flex; gap: .25rem; flex: 0 0 auto; }
/* ---- Jurnalul: cronologie cu bulină pe linia verticală ---- */
.doc-detail__timeline { list-style: none; margin: 0; padding: .7rem .85rem .7rem 1.6rem; }
.doc-detail__timeline li {
position: relative;
padding: 0 0 .55rem .9rem;
border-left: 1px solid var(--hs-line);
}
.doc-detail__timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.doc-detail__timeline li::before {
content: '';
position: absolute;
left: -4px;
top: .35rem;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--hs-primary);
}
.doc-detail__timeline li.is-canceled { color: var(--hs-muted); }
.doc-detail__timeline li.is-canceled::before { background: var(--hs-line-strong); }
.doc-detail__when { display: block; font-size: var(--hs-fs-xs); color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.doc-detail__what { font-size: var(--hs-fs-sm); font-weight: 600; color: var(--hs-ink); }
.doc-detail__note { display: block; font-size: var(--hs-fs-xs); color: var(--hs-muted); }
.doc-detail__who { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; font-size: var(--hs-fs-xs); color: var(--hs-muted); }
.doc-detail__ip { color: var(--hs-subtle); }
/* In coloana ingusta, numele si IP-ul nu incap pe acelasi rand: IP-ul coboara sub el. */
.doc-detail__side .doc-detail__ip { display: block; width: 100%; }
.doc-detail__side .doc-detail__timeline { padding-left: 1.4rem; }
.doc-detail__side .doc-detail__what { display: block; }
/* ---- Acțiunile: bară proprie, lipită de fundalul gri al corpului ---- */
.doc-detail__actions {
display: flex;
align-items: center;
gap: .4rem;
flex-wrap: wrap;
padding: .7rem .1rem 0;
}
.doc-detail__ask { font-size: var(--hs-fs-xs); color: var(--hs-muted); margin-left: .2rem; }
/* Banda de arhiva: documentul e fotografiat, deci PDF-ul nu se mai recompune. Ton neutru-bun,
nu verde plin — e o stare normala a documentului, nu o reusita de sarbatorit. */
.doc-detail__archive {
display: flex;
align-items: flex-start;
gap: .5rem;
margin-bottom: .8rem;
padding: .5rem .85rem;
background: var(--hs-good-bg);
border: 1px solid var(--hs-good-br);
border-radius: var(--hs-radius-sm);
color: var(--hs-good-fg);
font-size: var(--hs-fs-sm);
}
.doc-detail__archive i { margin-top: .1rem; }
.doc-detail__archive strong { font-weight: 700; }
.doc-detail__archive .doc-detail__note { color: inherit; opacity: .8; }
/* ---- Stări (încărcare / eroare / gol) ---- */
.doc-detail__state,
.doc-detail__empty {
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
padding: 1.6rem .9rem;
font-size: var(--hs-fs-sm);
color: var(--hs-muted);
}
.doc-detail__empty i,
.doc-detail__state i { font-size: 1.1rem; opacity: .55; }
.doc-detail__state--error { color: var(--hs-bad-fg); }
.doc-detail__state--error i { opacity: 1; }