/* =====================================================================
   sigo.css – aspectul aplicatiei SigoAmanetWEB
   Reproduce tema WPF "VisualStudio2019 / Office2019" (Ribbon + ThemedWindow).
   ===================================================================== */
:root {
    --accent: #1e6fb8;
    --accent-inchis: #135089;
    --text: #464444;
    --chenar: #c8c8c8;
    --ribbon-fundal: #f5f6f7;
    --ribbon-tab: #ffffff;
    --font: "Segoe UI", Tahoma, "Inter", Arial, sans-serif;
}

html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: var(--font);
    font-size: 13px;
    color: #222;
    background: #ffffff;
}
.dx-widget, .dx-widget input, .dx-widget textarea { font-family: var(--font); }

/* ---------------- Ribbon ---------------- */
.aplicatie { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.ribbon { flex: 0 0 auto; background: var(--ribbon-fundal); border-bottom: 1px solid var(--chenar); user-select: none; }
.ribbon-taburi { display: flex; align-items: stretch; height: 30px; background: #ffffff; border-bottom: 1px solid var(--chenar); padding-left: 4px; }
.ribbon-app { width: 34px; display: flex; align-items: center; justify-content: center; }
.ribbon-app img { width: 20px; height: 20px; }
/* taburi: text + linie de accent dedesubt la tabul activ */
.ribbon-tab {
    position: relative; display: flex; align-items: center; gap: 5px; padding: 0 14px; cursor: pointer; color: #4b5563; font-weight: 600;
    white-space: nowrap; flex-shrink: 0;   /* pe ecrane inguste titlurile nu se rup peste butoane */
    transition: color .12s, background .12s;
}
.ribbon-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background .12s; }
.ribbon-tab:hover { color: var(--accent); background: #f3f7fc; }
.ribbon-tab:hover::after { background: #c9dcf0; }
.ribbon-tab.activ { color: var(--accent); }
.ribbon-tab.activ::after { background: var(--accent); }
/* bara principala: taburi mai inalte si mai aerisite; pe ecrane inguste se deruleaza orizontal in loc sa se suprapuna */
.ribbon > .ribbon-taburi { height: 42px; padding-left: 6px; overflow-x: auto; scrollbar-width: none; }
.ribbon > .ribbon-taburi .ribbon-app { width: 42px; }
.ribbon > .ribbon-taburi .ribbon-app img { width: 24px; height: 24px; }
.ribbon > .ribbon-taburi .ribbon-tab { font-size: 13.5px; padding: 0 16px; }

/* dreapta barei: locul de lucru (firma › punct, click = schimbare), utilizatorul, parola, iesire */
.ribbon-dreapta { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 16px; color: #374151; font-size: 13px; }
.ribbon-dreapta i { font-size: 16px; }
.rd-loc { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 5px 0 10px; border: 1px solid #dbe3ee; border-radius: 8px; background: #f7f9fc;
    color: #1f2937; font: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
.rd-loc:hover { border-color: #9fc0e3; background: #eef5fc; }
.rd-loc > i { color: var(--accent); }
.rd-loc b { font-weight: 700; }
.rd-loc .rd-punct { color: #4b5563; font-weight: 600; }
.rd-loc .rd-sep { color: #9ca3af; font-size: 16px; line-height: 1; }
.rd-loc .rd-schimb { display: flex; align-items: center; gap: 4px; margin-left: 2px; padding: 3px 8px; border-radius: 6px; background: #e3eefa; color: var(--accent-inchis); font-size: 12px; font-weight: 600; }
.rd-loc .rd-schimb i { font-size: 13px; }
.rd-loc:hover .rd-schimb { background: var(--accent); color: #fff; }
.rd-loc.static, .rd-loc.static:hover { cursor: default; padding-right: 10px; border-color: #dbe3ee; background: #f7f9fc; }
.rd-sep-v { width: 1px; height: 22px; background: #e5e7eb; }
.rd-util { display: flex; align-items: center; gap: 7px; font-weight: 600; color: #1f2937; }
.rd-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; text-transform: uppercase; }
.rd-btn { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; color: #374151; text-decoration: none; font-weight: 600; transition: background .12s, color .12s; }
.rd-btn:hover { background: #eef2f7; color: var(--accent); }
.rd-btn.rd-iesire:hover { background: #fdecec; color: #c42b1c; }
/* ecrane mai inguste: doar iconitele la parola / iesire si avatarul la utilizator */
@media (max-width: 1280px) {
    .ribbon-dreapta .rd-btn span, .ribbon-dreapta .rd-nume { display: none; }
    .ribbon-dreapta .rd-btn { padding: 0 7px; }
}

.ribbon-pagina { display: none; height: 96px; padding: 3px 4px 0 4px; }
.ribbon-pagina.activ { display: flex; }
.ribbon-grup { display: flex; flex-direction: column; border-right: 1px solid #dadada; padding: 0 4px; }
.ribbon-grup-continut { flex: 1; display: flex; align-items: stretch; gap: 1px; }
.ribbon-grup-titlu { text-align: center; color: #666; font-size: 11px; height: 17px; line-height: 15px; white-space: nowrap; }
.ribbon-sep { width: 1px; background: #e2e2e2; margin: 4px 3px; }

.rb { display: flex; cursor: pointer; border: 1px solid transparent; border-radius: 2px; color: #222; font-weight: 600; background: none; font-family: var(--font); }
.rb:hover { background: #dbe8f5; border-color: #a9c6e6; }
.rb:active { background: #c3d9ef; }
.rb.dezactivat { opacity: .4; pointer-events: none; }
.rb-mare { flex-direction: column; align-items: center; width: auto; min-width: 58px; max-width: 96px; padding: 2px 4px; text-align: center; font-size: 12px; line-height: 14px; }
.rb-mare i { font-size: 32px; width: 32px; height: 32px; margin: 2px 0 4px 0; }
.rb-coloana { display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; padding-top: 1px; }
.rb-mic { align-items: center; gap: 5px; padding: 2px 6px 2px 3px; height: 22px; font-size: 12px; white-space: nowrap; }
.rb-mic i { font-size: 16px; width: 16px; height: 16px; }
.rb-sageata::after { content: "▾"; font-size: 10px; margin-left: 2px; color: #666; }
.rb-edit { display: flex; align-items: center; gap: 6px; height: 24px; font-size: 12px; font-weight: 600; padding: 0 4px; }

/* culori iconite (aproximare a glyph-urilor DevExpress) */
.ic-verde { color: #2e8b3a; }
.ic-albastru { color: #1e6fb8; }
.ic-rosu { color: #d13438; }
.ic-portocaliu { color: #e07a10; }
.ic-galben { color: #c19c00; }
.ic-gri { color: #5f6b77; }
.ic-mov { color: #7a3fb0; }

/* ---------------- Grid principal ---------------- */
.zona-grid { flex: 1 1 auto; min-height: 0; padding: 0; }
#gridPrincipal { height: 100%; }
.dx-datagrid { font-weight: 600; }
.dx-datagrid-headers .dx-datagrid-text-content { white-space: normal; text-align: center; }
.dx-datagrid-headers .dx-header-row > td { text-align: center !important; vertical-align: middle; }
.bara-stare { flex: 0 0 auto; height: 22px; line-height: 22px; background: var(--ribbon-fundal); border-top: 1px solid var(--chenar); padding: 0 10px; font-size: 12px; color: #444; display: flex; gap: 24px; }

/* ---------------- Ferestre (ThemedWindow) ---------------- */
body.corp-fereastra { background: #e9ecef; }
.fereastra { margin: 18px auto; background: #fff; border: 1px solid #8a8a8a; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: calc(100vw - 20px); }
.fereastra-titlu { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 0 0 8px; background: #fff; border-bottom: 1px solid #dcdcdc; font-weight: 600; }
.fereastra-titlu img { width: 16px; height: 16px; }
.fereastra-titlu span { flex: 1; }
.fereastra-inchide { width: 46px; height: 32px; display: flex; align-items: center; justify-content: center; color: #333; text-decoration: none; }
.fereastra-inchide:hover { background: #e81123; color: #fff; }
.fereastra-continut { padding: 10px; }

.bara-butoane { display: flex; gap: 6px; padding: 6px 0; flex-wrap: wrap; }
.bara-butoane .dx-button { font-weight: 600; }
.buton-patrat .dx-button-content { flex-direction: column; }
.eticheta { font-weight: 700; color: var(--text); }
.camp-rand { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.camp-rand > .eticheta { flex: 0 0 auto; }
.grup-chenar { border: 1px solid #c9c9c9; border-radius: 3px; padding: 14px 8px 8px 8px; position: relative; margin-top: 10px; }
.grup-chenar > .grup-titlu { position: absolute; top: -9px; left: 8px; background: #fff; padding: 0 4px; font-weight: 700; color: #333; }

/* ---------------- Logare ---------------- */
body.corp-logare { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 20%, #2a7cc7 0%, #0b3b66 55%, #071f38 100%); }
.card-logare { width: 380px; max-width: calc(100vw - 32px); background: #fff; border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.35); padding: 28px 30px 18px 30px; box-sizing: border-box; }
.card-logare .antet { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.card-logare .antet img { width: 64px; height: 64px; }
.card-logare .nume-app { font-size: 26px; font-weight: 700; color: #1f2d3d; line-height: 1.1; }
.card-logare .subtitlu { color: #6b7785; font-weight: 600; margin-top: 2px; }
.card-logare .et { display: block; font-weight: 700; color: #464444; margin: 12px 0 4px 0; }
.card-logare .salut { margin-bottom: 10px; color: #333; }
.card-logare .err { min-height: 18px; margin-top: 12px; color: #d13438; font-weight: 600; font-size: 12px; }
.card-logare .ver { text-align: right; color: #9aa4ae; font-size: 11px; margin-top: 6px; }

/* dialog DMesaj */
.dmesaj-titlu { font-weight: 700; margin-bottom: 8px; color: #464444; font-size: 14px; }
.dmesaj-butoane { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }

/* dialoguri alert colorate */
body.dx-alert-error .dx-dialog .dx-popup-title { background: #d13438; color: #fff; }
body.dx-alert-warning .dx-dialog .dx-popup-title { background: #e07a10; color: #fff; }
body.dx-alert-success .dx-dialog .dx-popup-title { background: #2e8b3a; color: #fff; }
body.dx-alert-info .dx-dialog .dx-popup-title { background: var(--accent); color: #fff; }
body.dx-alert-question .dx-dialog .dx-popup-title { background: var(--accent); color: #fff; }
.dx-dialog .dx-popup-title { border-bottom: 0; padding: 6px 6px 6px 16px; }
.dx-dialog .dx-popup-title .dx-toolbar-label { font-size: 15px; font-weight: 700; color: inherit; }
.dx-dialog .dx-popup-title .dx-closebutton .dx-icon { color: inherit; }
.dx-dialog .dx-dialog-message { padding: 18px 20px 6px 20px; max-width: 520px; }
.dx-dialog .dx-dialog-buttons { padding: 10px 16px 14px 16px; }
.dx-dialog .dx-dialog-buttons .dx-button { min-width: 84px; }
.msg-corp { display: flex; gap: 14px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: #1f2937; font-weight: 600; }
.msg-corp > i { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; }
.msg-corp > div { padding-top: 7px; }
.msg-error > i { background: #d13438; }
.msg-warning > i { background: #e07a10; }
.msg-success > i { background: #2e8b3a; }
.msg-info > i, .msg-question > i { background: var(--accent); }

@media (max-width: 760px) {
    .ribbon-pagina { overflow-x: auto; }
}

/* ---------------- Ribbon simplificat (ferestre nomenclatoare: IsSimplified="True") ---------------- */
.ribbon-simplu { background: var(--ribbon-fundal); border: 1px solid var(--chenar); margin: -10px -10px 0 -10px; }
.ribbon-simplu .ribbon-taburi { height: 26px; }
.ribbon-simplu .ribbon-tab { height: 25px; line-height: 25px; }
.ribbon-simplu .bara { display: flex; gap: 2px; padding: 3px 4px; flex-wrap: wrap; }
.fereastra-nom .grid-nom { height: 470px; margin: 6px -10px -10px -10px; }
/* ferestrele cu grid (nomenclatoare, utilizatori): grid-ul umple fereastra pana la inaltimea ei (ViewData Inaltime / popup redimensionat) */
.fereastra:has(.fereastra-nom) { display: flex; flex-direction: column; }
.fereastra:has(.fereastra-nom) .fereastra-continut { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.fereastra-nom { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.fereastra-nom .grid-nom { flex: 1 1 auto; height: auto !important; min-height: 0; }
.grid-nom.click-modific .dx-data-row { cursor: pointer; }   /* Operatiuni Stoc: click pe rand = modificare */

/* ---------------- Bara de titlu a popup-urilor (DevExtreme): fundal in culoarea aplicatiei, text alb ----------------
   ferestrele din iframe (popup-iframe) primesc din Index culoarea chenarului machetei; dialogurile interne (dlg-wpf) culoarea chenarului lor;
   mesajele (dx-dialog-wrapper) au culorile lor (eroare / atentie / ...), modulul de administrare (adm-popup) are designul lui */
.dx-popup-wrapper:not(.adm-popup):not(.dx-dialog-wrapper) > .dx-overlay-content > .dx-popup-title {
    background: var(--accent); color: #fff; border-bottom: 0; padding: 5px 6px 5px 14px; min-height: 0; }
.dlg-wpf.dx-popup-wrapper:not(.adm-popup):not(.dx-dialog-wrapper) > .dx-overlay-content > .dx-popup-title { background: #244B5F; }
.dx-popup-wrapper:not(.adm-popup):not(.dx-dialog-wrapper) > .dx-overlay-content > .dx-popup-title .dx-toolbar-label { font-size: 15px; font-weight: 700; color: #fff; }
.dx-popup-wrapper:not(.adm-popup):not(.dx-dialog-wrapper) > .dx-overlay-content > .dx-popup-title .dx-closebutton .dx-icon { color: #fff; }
.dx-popup-wrapper:not(.adm-popup):not(.dx-dialog-wrapper) > .dx-overlay-content > .dx-popup-title .dx-closebutton.dx-state-hover { background: rgba(255, 255, 255, .18); }
.dlg-wpf.dx-popup-wrapper > .dx-overlay-content { border-top-width: 2px; }
/* colturi rotunjite: fereastra + bara de titlu (listele derulante raman cum sunt) */
.dx-popup-wrapper:not(.adm-popup):not(.dx-dropdowneditor-overlay) > .dx-overlay-content { border-radius: 10px; }
.dx-popup-wrapper:not(.adm-popup):not(.dx-dropdowneditor-overlay) > .dx-overlay-content > .dx-popup-title { border-radius: 9px 9px 0 0; }
.popup-iframe > .dx-overlay-content, .dx-dialog-wrapper > .dx-overlay-content, .dlg-wpf > .dx-overlay-content { overflow: hidden; }

/* ---------------- Dialoguri fara chenar (WindowStyle=None, BorderBrush #244B5F, BorderThickness 2,5,2,2) ---------------- */
.dlg-wpf .dx-popup-content { padding: 0 !important; overflow: hidden; }
/* doar dupa ce utilizatorul redimensioneaza dialogul (clasa pusa din sigo.js): sub dimensiunea originala → scroll */
.dlg-wpf.dlg-redimensionat .dx-popup-content { overflow: auto; }
.dlg-wpf .dx-overlay-content { border: 2px solid #244B5F; border-top-width: 5px; border-radius: 0; }
.dlg { position: relative; font-weight: 600; }
.dlg .dlg-titlu { position: absolute; font-size: 23px; font-weight: 700; color: #222; }
.dlg .l { position: absolute; color: #6F6F6F; font-weight: 700; }
/* etichetele machetelor: Label WPF = Segoe UI 12px bold (pozitiile sunt luate din XAML; la 13px textul intra peste campuri) */
.dlg .l, .dlg .lw { font-size: 12px; }
.dlg .e { position: absolute; }
.dlg .e.dx-texteditor { height: 25px; }
.dlg .e .dx-texteditor-input { min-height: 23px; padding-top: 1px; padding-bottom: 1px; font-weight: 600; }
.btn-salvare.dx-button, .btn-iesire.dx-button { color: #fff; border-radius: 5px; border: none; font-weight: 600; height: 33px; }
.btn-salvare.dx-button { background: #758392; }
.btn-iesire.dx-button { background: #cf736a; }
.btn-salvare.dx-button .dx-icon, .btn-iesire.dx-button .dx-icon { color: #fff; }
.btn-salvare.dx-state-hover { background: #64717f; }
.btn-iesire.dx-state-hover { background: #bb5f56; }
.dlg .grup { position: absolute; border: 1px solid #c9c9c9; border-radius: 3px; }

/* pagina-dialog (ferestre WindowStyle=None) */
body.in-popup { background: #fff; overflow: auto; }
body.in-popup .dialog-pagina, body.in-popup .fereastra { margin: 0; box-shadow: none; max-width: none; }
.popup-iframe.dx-popup-wrapper > .dx-overlay-content { border: 0 !important; }
/* fereastra deschisa intr-un tab nou (?tab=1): umple tabul */
body.in-tab .fereastra { margin: 0; width: auto !important; height: 100vh !important; max-width: none; border: 0; box-shadow: none; box-sizing: border-box; }
body.in-tab .fereastra-titlu { cursor: default; }
/* popup redimensionat de utilizator (Index → modRedimensionat): fereastra umple popup-ul */
body.in-popup.redimensionat .dialog-pagina, body.in-popup.redimensionat .fereastra { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: auto !important; height: auto !important; box-sizing: border-box; }
/* ferestrele se muta tragand de titlu (sigo.js → incepeMutare) */
.fereastra-titlu, .dlg .dlg-titlu, .dlg-titlu-static { cursor: move; user-select: none; }
.popup-incarcare .dx-overlay-content { visibility: hidden; }
.popup-iframe .dx-popup-content { padding: 0 !important; overflow: hidden; }
.popup-iframe iframe { display: block; width: 100%; height: 100%; border: 0; }
.dialog-pagina { margin: 40px auto; background: #fff; border: 2px solid #244B5F; border-top-width: 5px; box-shadow: 0 6px 24px rgba(0,0,0,.25); position: relative; box-sizing: content-box; }
.btn-albastru.dx-button { background: #045B79; color: #fff; border-radius: 5px; border: none; font-weight: 600; }
.btn-albastru.dx-button .dx-icon { color: #fff; }
/* butoane colorate dupa rol (ex. Registru casa): incasare verde, plata portocaliu, stergere rosu */
.btn-verde.dx-button, .btn-portocaliu.dx-button, .btn-rosu.dx-button { color: #fff; border-radius: 5px; border: none; font-weight: 600; }
.btn-verde.dx-button { background: #2e8b3a; }
.btn-portocaliu.dx-button { background: #d9822b; }
.btn-rosu.dx-button { background: #c6453b; }
.btn-verde.dx-button .dx-icon, .btn-portocaliu.dx-button .dx-icon, .btn-rosu.dx-button .dx-icon { color: #fff; }
.btn-verde.dx-state-hover { background: #26762f; }
.btn-portocaliu.dx-state-hover { background: #c27022; }
.btn-rosu.dx-state-hover { background: #ad3a31; }
.btn-albastru.dx-state-hover { background: #034a63; }
.btn-albastru.dx-state-disabled, .btn-verde.dx-state-disabled, .btn-portocaliu.dx-state-disabled, .btn-rosu.dx-state-disabled { opacity: .55; }
.dlg .lw { position: absolute; color: #6F6F6F; font-weight: 700; width: 154px; line-height: 15px; }
.edit-subliniat.dx-texteditor { border: none; border-bottom: 2px solid #9aa7b4; border-radius: 0; background: transparent; }

/* fereastra Contract */
.dlg .grupc { position: absolute; border: 1px solid #c9c9c9; border-radius: 3px; background: #fff; }
.dlg .grupc > .in { position: absolute; left: 6px; top: 14px; right: 0; bottom: 0; }
.dlg .b-gri.dx-button { color: #6F6F6F; border-radius: 5px; font-weight: 600; }
/* butoanele machetelor au latimile din XAML (Button WPF, 12px) → text 12px si margini interioare mai mici, ca textul sa nu fie taiat */
.dlg .dx-button-has-text .dx-button-text { font-size: 12px; }
.dlg .dx-button-has-text .dx-button-content { padding-left: 8px; padding-right: 8px; }
.dlg .dezactivat-grup { pointer-events: none; opacity: .75; }
.dlg .e.dx-radiobutton, .dlg .e .dx-radiobutton { color: #6F6F6F; }
/* liste de optiuni in chenar (ex. Tip incasare / Tip plata): ca RadioButton WPF – 12px, un rand, ~20px intre randuri,
   altfel textele lungi ("Incasare comision din incasare partiala") se rupeau si ultima optiune iesea din chenar */
.dlg .grupc .dx-radiogroup-vertical .dx-radiobutton { font-size: 12px; white-space: nowrap; }
.dlg .grupc .dx-radiogroup-vertical .dx-item { margin: 0 0 1px 0; }

/* caseta date persoana (EDateContract din Prelungire / Incasare) */
.pers-box { position: absolute; inset: 8px 10px; display: grid; grid-template-rows: repeat(5, 1fr); align-items: center; }
.pers-box span { color: #333; font-weight: 600; }
.pers-nume { font-size: 18px; font-weight: 700; text-align: center; }
.l-rosu { color: #e00000 !important; }

/* roluri / acces */
.ascuns { display: none !important; }
.rol-eticheta { background: #e3eefa; color: var(--accent-inchis); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
/* modulul Operatiuni Stoc (Pages/Stoc/Index, tab separat): fereastra aleasa umple zona de lucru */
.zona-modul { flex: 1 1 auto; min-height: 0; position: relative; background: #fafbfc; }
.zona-modul iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.zona-modul-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #6b7785; font-size: 15px; }
.rb.selectat { background: #c3d9ef; border-color: #a9c6e6; }
.zona-grid.fara-acces { display: flex; align-items: center; justify-content: center; color: #6b7785; font-size: 15px; background: #fafbfc; }

/* alegerea firmei / punctului de lucru / lunii (logare si "Schimbare" din fereastra principala) – lucru.js */
.alegere-lucru .al-rand { margin-top: 8px; }
.alegere-lucru .al-rand > label.et { display: block; font-weight: 600; margin: 0 0 4px 0; }
/* alegerea firmei / punctului de lucru in pasi (lucru.js): antet cu iconita, lista de carduri, rezumat + perioada */
.alegere-lucru .al-antet { margin: 4px 0 16px 0; }
.alegere-lucru .al-ic-mare { width: 48px; height: 48px; border-radius: 12px; background: #eef2fd; color: #4054c8; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.alegere-lucru .al-ic-mare i { font-size: 22px; }
.alegere-lucru .al-antet h2 { margin: 0 0 6px 0; font-size: 24px; font-weight: 700; color: #111827; line-height: 1.2; }
.alegere-lucru .al-antet p { margin: 0; color: #6b7280; font-size: 13px; }
.alegere-lucru .al-lista { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding: 2px; margin: 0 -2px; }
.alegere-lucru .al-rand-card { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
    cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .12s, box-shadow .12s, background .12s; flex: 0 0 auto; }
.alegere-lucru .al-rand-card:hover { border-color: #c7cdf5; background: #fafbff; box-shadow: 0 2px 10px rgba(17, 24, 39, .06); }
.alegere-lucru .al-rand-card:focus-visible { outline: 0; border-color: #4054c8; box-shadow: 0 0 0 3px rgba(64, 84, 200, .18); }
.alegere-lucru .al-ic { width: 40px; height: 40px; border-radius: 10px; border: 1px solid #e5e7eb; background: #f9fafb; color: #374151; display: flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.alegere-lucru .al-ic i { font-size: 18px; }
.alegere-lucru .al-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.alegere-lucru .al-text b { color: #111827; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alegere-lucru .al-text span { color: #6b7280; font-size: 12px; }
.alegere-lucru .al-eticheta { background: #eef2fd; color: #4054c8; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.alegere-lucru .al-sageata { color: #6b7280; font-size: 18px; }
.alegere-lucru .al-rand-card:hover .al-sageata { color: #4054c8; }
.alegere-lucru .al-inapoi { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: #4054c8; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 0; margin-bottom: 8px; }
.alegere-lucru .al-inapoi:hover { text-decoration: underline; }
.alegere-lucru .al-gol { color: #b42318; padding: 6px 0; }
.card-logare.pas-lucru { width: 480px; }
.card-logare.pas-lucru .antet { margin-bottom: 14px; }

/* barele de derulare: mai late si mai inchise la culoare (cele DevExtreme sunt implicit subtiri si foarte deschise) */
.dx-scrollbar-vertical .dx-scrollable-scroll, .dx-scrollbar-vertical.dx-scrollbar-hoverable { width: 12px !important; }
.dx-scrollbar-horizontal .dx-scrollable-scroll, .dx-scrollbar-horizontal.dx-scrollbar-hoverable { height: 12px !important; }
.dx-scrollable-scroll-content { background-color: #8A9199 !important; border-radius: 6px; }
.dx-scrollable-scroll:hover .dx-scrollable-scroll-content, .dx-scrollable-scroll.dx-state-active .dx-scrollable-scroll-content { background-color: #5F666E !important; }
.dx-scrollbar-vertical, .dx-scrollbar-horizontal { background-color: rgba(0,0,0,.05); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #EEF0F2; }
::-webkit-scrollbar-thumb { background: #8A9199; border-radius: 6px; border: 2px solid #EEF0F2; }
::-webkit-scrollbar-thumb:hover { background: #5F666E; }

/* ---- mod compact: ecrane inguste (ex. 1024 x 768) – text si spatii mai mici in bara de sus si in lista principala.
   Latimile coloanelor listei se micsoreaza proportional din Index (latimiCompacte) ---- */
@media (max-width: 1279px) {
    .ribbon > .ribbon-taburi { height: 34px; }
    .ribbon > .ribbon-taburi .ribbon-tab { font-size: 12.5px; padding: 0 10px; }
    .ribbon > .ribbon-taburi .ribbon-app { width: 34px; }
    .ribbon > .ribbon-taburi .ribbon-app img { width: 20px; height: 20px; }
    .ribbon-dreapta { gap: 5px; padding: 0 6px 0 8px; font-size: 12px; }
    .ribbon-pagina { height: 80px; padding: 2px 2px 0 2px; }
    .ribbon-grup { padding: 0 2px; }
    .ribbon-grup-titlu { font-size: 10px; height: 14px; line-height: 13px; }
    .rb-mare { min-width: 50px; max-width: 84px; padding: 1px 3px; font-size: 11px; line-height: 12px; }
    .rb-mare i { font-size: 24px; width: 24px; height: 24px; margin: 1px 0 3px 0; }
    .rb-mic { height: 20px; font-size: 11px; padding: 1px 5px 1px 2px; gap: 4px; }
    .rb-mic i { font-size: 14px; width: 14px; height: 14px; }
    .rb-edit { height: 22px; font-size: 11px; }
    .compact-grid .dx-datagrid { font-size: 11.5px; }
    .compact-grid .dx-datagrid .dx-row > td { padding: 4px 4px; }
    .compact-grid .dx-datagrid-headers .dx-header-row > td { padding: 4px 3px; }
    /* titlurile coloanelor inguste pe doua randuri (fara "Numa..." / "Dat..."): textul nu se mai taie cu "..." */
    .compact-grid .dx-datagrid-headers .dx-header-row > td { font-size: 10.5px; line-height: 12px; }
    .compact-grid .dx-datagrid-headers .dx-header-row > td > .dx-datagrid-text-content,
    .compact-grid .dx-datagrid-headers .dx-header-row > td .dx-datagrid-text-content { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; margin-left: 0 !important; margin-right: 0 !important;
        padding-left: 0 !important; padding-right: 0 !important; display: block; max-width: none !important; width: auto !important; }
    .compact-grid .dx-datagrid-headers .dx-header-row > td .dx-column-indicators.dx-visibility-hidden { display: none; }
    /* iconita filtrului din titlu: in coltul din dreapta sus, peste chenar – textul are toata latimea coloanei (ex. "Prel.", "Inc.") */
    .compact-grid .dx-datagrid-headers .dx-header-row > td { position: relative; padding-right: 3px !important; padding-top: 13px !important; }
    .compact-grid .dx-datagrid-headers .dx-header-row > td .dx-column-indicators { position: absolute; right: 0; top: 0; margin: 0 !important; transform: scale(.8); transform-origin: top right; }
    .compact-grid .dx-datagrid-filter-row .dx-editor-cell { padding: 2px 2px; }
    .compact-grid .dx-datagrid-group-panel { font-size: 11px; }
    /* totalurile de jos ("12 contracte"): se intind peste coloana vecina in loc sa se taie cu "..." */
    .compact-grid .dx-datagrid-total-footer td { overflow: visible !important; }
    .compact-grid .dx-datagrid-total-footer .dx-datagrid-summary-item { overflow: visible; text-overflow: clip; white-space: nowrap; font-size: 11px; }
    .bara-stare { font-size: 11px; gap: 16px; }
}