/* ===========================================
   Flashing PRO - Stiluri
   =========================================== */

/* STILURI GENERALE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f0f2f5;
    padding: 20px;
    color: #333;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    padding: 30px;
}

/* TITLURI SI SECTIUNI */
h1 {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section {
    margin-bottom: 25px;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
}

.section h2 {
    background-color: #f8f9fa;
    padding: 10px;
    margin: -20px -20px 20px -20px;
    border-bottom: 1px solid #ddd;
    font-size: 1.2em;
    color: #444;
}

/* INPUT GROUPS */
.input-group {
    display: inline-block;
    margin: 10px 15px 10px 0;
    vertical-align: top;
}

.input-group label {
    display: block;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
    color: #555;
}

.input-group input[type="text"],
.input-group input[type="number"],
.input-group input[type="date"],
.input-group select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 160px;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    margin-top: 5px;
}

/* Controale optimizare (sub header-ul sectiunii 3) */
.section-optim-controls {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: #f0f4f8;
    border-radius: 5px;
    border: 1px solid #dde3ea;
}

.optim-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #2c3e50;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.optim-check-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #2980b9;
}

/* TABELE */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

th, td {
    padding: 10px;
    text-align: center;
    border: 1px solid #eee;
}

th {
    background-color: #3498db;
    color: white;
    font-weight: 600;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* BUTOANE */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    margin: 5px;
    transition: 0.2s;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-blue {
    background-color: #3498db;
}

.btn-green {
    background-color: #27ae60;
}

.btn-orange {
    background-color: #e67e22;
}

.btn-red {
    background-color: #e74c3c;
    padding: 5px 10px;
    font-size: 12px;
}

.btn-clone {
    background-color: #27ae60;
    padding: 5px 10px;
    font-size: 12px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-clone:hover {
    background-color: #219a52;
}

.btn-purple {
    background-color: #8e44ad;
}

/* VIZUALIZARE OPTIMIZARE */
.foil-group-separator {
    margin: 16px 0 4px;
    padding: 5px 12px;
    background: #2a4b7c;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.4px;
}

.foil-visual {
    margin: 20px 0;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
}

.foil-container {
    position: relative;
    width: 100%;
    height: 80px;
    background: #ecf0f1;
    border: 2px solid #333;
    margin-top: 5px;
}

.segment {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: white;
    border-right: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
}

.seg-waste {
    background-color: #e74c3c;
    opacity: 0.8;
}

.seg-0 { background-color: #3498db; }
.seg-1 { background-color: #e67e22; }
.seg-2 { background-color: #9b59b6; }
.seg-3 { background-color: #1abc9c; }
.seg-4 { background-color: #f1c40f; color: black; }
.seg-5 { background-color: #34495e; }

/* MODAL CANVAS */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.modal-content {
    background-color: #fff;
    margin: 2vh auto;
    width: 98%;
    max-width: 1300px;
    height: 96vh;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    padding: 15px;
    background: #2c3e50;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.canvas-area {
    flex: 2;
    min-width: 0;
    background: #fafafa;
    position: relative;
    cursor: crosshair;
    border-right: 1px solid #ddd;
}

.tools-area {
    flex: 1;
    min-width: 320px;
    background: white;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* PANOURI INFO */
.info-panel {
    background: #e8f4f8;
    padding: 10px;
    border-radius: 5px;
    font-size: 13px;
    margin-bottom: 10px;
}

.hem-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.hem-control select {
    width: 80px;
    padding: 2px;
}

/* TABEL SEGMENTE */
.seg-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    table-layout: fixed;
}

.seg-table th {
    background: #2c3e50;
    color: #fff;
    padding: 5px 3px;
    font-size: 11px;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.seg-table td {
    border-bottom: 1px solid #eee;
    padding: 4px 3px;
    text-align: center;
    vertical-align: middle;
}

.seg-table tr:nth-child(even) td {
    background-color: #f7f9fb;
}

.seg-table tr:hover td {
    background-color: #eaf4fb;
}

/* Randul segmentului selectat (aliniere activa) */
.seg-row-selected td {
    background-color: #fdecea !important;
    border-left: 3px solid #e74c3c;
}

/* Coloana index — ingusta, gri */
.seg-idx {
    width: 22px;
    color: #999;
    font-size: 10px;
}

/* Celula fara unghi (ultimul segment) */
.seg-no-angle {
    color: #bbb;
    font-size: 16px;
    letter-spacing: 2px;
}

.seg-input {
    width: 52px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 4px 2px;
    font-size: 12px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
}

.seg-input:focus {
    border-color: #3498db;
    outline: none;
    background: #eef9ff;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.18);
}

.row-input {
    width: 100%;
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
}

.btn-align-seg {
    background: #8e44ad;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 3px 6px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
    transition: background 0.15s;
}

.btn-align-seg:hover {
    background: #6c3483;
}

/* Buton stergere segment (×) per rand */
.btn-del-seg {
    background: transparent;
    color: #c0392b;
    border: 1px solid #e74c3c;
    border-radius: 3px;
    padding: 2px 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s;
}

.btn-del-seg:hover {
    background: #e74c3c;
    color: white;
}

/* Butoane adaugare segment (+ Start / + Final) */
.btn-add-seg {
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: background 0.15s;
}

.btn-add-seg:hover {
    background: #1e8449;
}

.btn-add-seg-end {
    background: #2980b9;
}

.btn-add-seg-end:hover {
    background: #1f618d;
}

/* =============================================
   PANOU FLOTANT EDITARE SEGMENTE
   ============================================= */

.edit-panel-popup {
    position: fixed;          /* flotant peste tot ecranul, nu relativ la parinte */
    top: 80px;
    right: 20px;
    width: 420px;
    min-width: 320px;
    min-height: 220px;
    max-height: 85vh;
    display: none;            /* ascuns implicit; JS seteaza style.display='flex' la deschidere */
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.28), 0 3px 10px rgba(0,0,0,0.14);
    z-index: 1000;            /* deasupra tuturor elementelor din modal */
    overflow: auto;           /* necesar pentru resize:both */
    resize: both;             /* redimensionare nativa browser */
    border: 1px solid #c8d6e5;
}

/* Header — zona de drag */
.edit-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #2c3e50;
    color: #fff;
    flex-shrink: 0;
    cursor: grab;             /* indica ca header-ul e draggable */
    -webkit-user-select: none;
    user-select: none;
}

.edit-panel-header:active {
    cursor: grabbing;
}

/* Indicator vizual drag — puncte pe header */
.edit-panel-drag-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 2px;
    margin-right: 6px;
    pointer-events: none;
}

.edit-panel-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.edit-panel-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-panel-total {
    font-size: 13px;
    color: #1abc9c;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.edit-panel-close {
    background: transparent;
    border: none;
    color: #ecf0f1;
    font-size: 18px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.edit-panel-close:hover {
    opacity: 1;
    color: #e74c3c;
}

/* Toolbar (Aliniere) */
.edit-panel-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: #f4f7fb;
    border-bottom: 1px solid #dde3ea;
    flex-shrink: 0;
}

.btn-add-seg-align {
    background: #8e44ad;
}

.btn-add-seg-align:hover {
    background: #6c3483;
}

.btn-add-seg-vert {
    background: #16a085;
}

.btn-add-seg-vert:hover {
    background: #0e6655;
}

.btn-mirror {
    background: #2980b9;
}

.btn-mirror:hover {
    background: #1f618d;
}

.btn-undo-align {
    background: #7f8c8d;
}

.btn-undo-align:hover:not(:disabled) {
    background: #566573;
}

.btn-undo-align:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Buton stergere segment de capat din toolbar panou flotant */
.btn-del-toolbar {
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: background 0.15s, opacity 0.15s;
    margin-left: auto; /* impinge butonul de stergere spre dreapta */
}

.btn-del-toolbar:hover:not(:disabled) {
    background: #c0392b;
}

.btn-del-toolbar:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Zona scrollabila cu tabelul — se extinde cu resize-ul panoului */
.edit-panel-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 80px;
}

/* Footer cu hint */
.edit-panel-footer {
    padding: 5px 12px;
    background: #f8f9fa;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.edit-panel-hint {
    font-size: 10px;
    color: #aaa;
    font-style: italic;
}

/* Tabel segmente din panoul flotant */
.seg-table-popup {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.seg-table-popup thead th {
    background: #34495e;
    color: #ecf0f1;
    padding: 7px 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

.seg-table-popup .col-idx  { width: 30px; }
.seg-table-popup .col-len  { width: 140px; }
.seg-table-popup .col-ang  { width: 100px; }
.seg-table-popup .col-act  { width: 36px; }
.seg-table-popup .col-del  { width: 30px; }

.seg-table-popup tbody tr td {
    padding: 5px 4px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #eef0f2;
}

.seg-table-popup tbody tr:nth-child(even) td {
    background: #f7f9fb;
}

.seg-table-popup tbody tr:hover td {
    background: #eaf4fb;
}

/* Randul selectat in panoul flotant */
.seg-row-selected td {
    background: #fdecea !important;
    border-left: 3px solid #e74c3c;
}

/* Input-uri mari (16px) pentru editare profesionala */
.seg-input-lg {
    width: 90%;
    text-align: center;
    border: 1.5px solid #ccd1d9;
    border-radius: 5px;
    padding: 6px 4px;
    font-size: 16px;
    font-weight: 500;
    background: #fff;
    color: #2c3e50;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    font-variant-numeric: tabular-nums;
}

.seg-input-lg:focus {
    border-color: #3498db;
    outline: none;
    background: #eaf6ff;
    box-shadow: 0 0 0 3px rgba(52,152,219,0.18);
}

/* Coloana index in panoul flotant */
.seg-idx-lg {
    font-size: 11px;
    color: #95a5a6;
    font-weight: 600;
}

/* Celula fara unghi (ultimul segment) in panoul flotant */
.seg-no-angle-lg {
    color: #bdc3c7;
    font-size: 18px;
    letter-spacing: 3px;
}

/* Buton aliniere in panoul flotant */
.btn-align-pop {
    background: #8e44ad;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
    width: 100%;
}

.btn-align-pop:hover {
    background: #6c3483;
}

/* Buton stergere in panoul flotant */
.btn-del-pop {
    background: transparent;
    color: #c0392b;
    border: 1px solid #e74c3c;
    border-radius: 4px;
    padding: 3px 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.15s, color 0.15s;
    width: 100%;
}

.btn-del-pop:hover {
    background: #e74c3c;
    color: white;
}

/* ===========================================
   Clase extrase din inline styles (index.html)
   =========================================== */

/* Sectiunea 3 — header cu titlu + buton Adaugă */
.section-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-list-header-btns {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Buton Repo workspace */
.cb-btn--repo {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.cb-btn--repo:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

/* Sectiunea Butoane Actiuni — layout flex cu reset la stânga, exporturi la dreapta */
.section-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Grupul de butoane export din dreapta sectiunii actiuni */
.action-export-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Sectiunea CNC export — separator vizual discret sub Export Productie */
.section-cnc-export {
    border-top: 1px solid #d0dce8;
    padding-top: 10px;
}

.cnc-export-label {
    font-size: 12px;
    font-weight: 600;
    color: #5a6a7e;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.btn-cnc-dxf {
    background-color: #2471a3;
}

.btn-cnc-dxf:hover {
    background-color: #1a5276;
}

.btn-cnc-ezm {
    background-color: #117a65;
}

.btn-cnc-ezm:hover {
    background-color: #0e6251;
}

/* Sectiunea Rezultate Optimizare — bordura verde distinctiva */
.section-opt-results {
    display: none;            /* ascuns implicit; JS seteaza style.display la afisare */
    border: 2px solid #27ae60;
}

/* Buton inchidere modal (×) */
.modal-close-btn {
    cursor: pointer;
    font-size: 24px;
}

/* Label sectiune Ranforsari (Hems) */
.label-hems {
    font-weight: bold;
    color: #e67e22;
}

/* Separator HR din info-panel Hems */
.hem-divider {
    margin: 5px 0;
    border-color: #ddd;
}

/* Buton Inversează Fața Vopsită */
.btn-flip-paint {
    width: 100%;
    padding: 5px;
    font-size: 12px;
}

/* Nota de subsol din info-panel */
.panel-note {
    font-size: 10px;
    color: #888;
    text-align: center;
    margin-top: 3px;
}

/* Label compact (K-Factor, etc.) */
.label-section {
    font-size: 12px;
    font-weight: bold;
}

/* Input Desfasurata totala — valoare mare */
#infoTotalLen {
    font-size: 18px;
    color: #2c3e50;
}

/* Input Latime Foaie — fundal distinctiv verde-menta */
#sheetWidth {
    background: #e8f8f5;
    border-color: #1abc9c;
}

/* Input Corectie Indoire */
#bendCorrection {
    width: 100%;
    margin-bottom: 10px;
}

/* Rand butoane control canvas (Editare / Undo / Fit / Șterge) */
.canvas-controls-row {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

/* Butoane care ocupa spatiu egal in randul de control */
.btn-flex-1 {
    flex: 1;
}

/* Buton Fit — culoare gri, fara clasa btn-blue/btn-red */
.btn-fit {
    flex: 1;
    background: #7f8c8d;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-fit:hover {
    background: #566573;
}

/* Nota de subsol canvas (hint selectie segment) */
.canvas-hint {
    font-size: 10px;
    color: #888;
    text-align: center;
    margin-top: 4px;
}

/* Buton principal SALVEAZĂ */
.btn-save {
    width: 100%;
    margin-top: 10px;
    padding: 15px;
}

/* Butoane Excel export / import */
.btn-excel-export,
.btn-excel-import {
    background: #1d6f42;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-excel-export:hover,
.btn-excel-import:hover {
    background: #155233;
}

/* Input file ascuns in interiorul label-ului btn-excel-import */
#xlImportInput {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   MODAL PREVIZUALIZARE SCHIȚĂ TEHNICĂ
   Layout: replică pagina PDF de producție
   ═══════════════════════════════════════════════════════════ */

/* Overlay full-screen */
.preview-modal-overlay {
    display: none;               /* JS seteaza style.display='flex' la deschidere */
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 35, 0.82);
    z-index: 3000;               /* peste drawModal (z-index 1000) */
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Container foaie alba — simulează coala de hârtie */
.preview-modal-container {
    background: #fff;
    border-radius: 6px;
    width: 94vw;
    height: 90vh;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.08);
}

/* ── Header: bara inchisa cu info bordura (ca in PDF) ── */
.pv-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 18px;
    background: #1a2a3c;
    color: #fff;
    flex-shrink: 0;
    border-bottom: 3px solid #2a4b7c;
}

.pv-header-left  { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pv-header-center { flex: 1; text-align: center; }
.pv-header-right  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.pv-bordura-nr {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.pv-header-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-material {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    font-style: italic;
}

/* Cantitate mare (ca in PDF) */
.pv-qty-badge {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
}

.pv-qty-label {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    margin-left: -6px;
    align-self: flex-end;
    padding-bottom: 4px;
}

/* Buton X */
.preview-modal-close {
    background: transparent;
    border: none;
    color: #ecf0f1;
    font-size: 20px;
    cursor: pointer;
    padding: 3px 7px;
    line-height: 1;
    opacity: 0.7;
    border-radius: 4px;
    transition: opacity 0.15s, background 0.15s;
    margin-left: 4px;
}

.preview-modal-close:hover {
    opacity: 1;
    background: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

/* ── Corp: canvas (stânga flex:1) + tabel parametri (dreapta fix) ── */
.pv-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: #fff;
    min-height: 0; /* fix for flex children overflow */
}

/* Zona canvas — umple spatiul ramas */
.pv-canvas-wrap {
    flex: 1;
    position: relative;
    padding: 16px 14px 10px 16px;
    display: flex;
    align-items: stretch;
    min-width: 0;
    border: 1px solid transparent; /* stabilizeaza layout */
}

/* Chenarul subtire ca in PDF */
.pv-canvas-wrap::after {
    content: '';
    position: absolute;
    inset: 16px 14px 10px 16px;
    border: 1px solid #ccc;
    pointer-events: none;
    border-radius: 2px;
}

#modalPreviewCanvas {
    width: 100%;
    height: 100%;
    display: block;
    background: #fff;
}

/* Panou dreapta: tabel parametri */
.pv-meta-panel {
    width: 35%;
    min-width: 200px;
    flex-shrink: 0;
    border-left: 1px solid #dde3ea;
    background: #f8f9fb;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 14px 10px;
}

.pv-meta-table {
    width: 100% !important;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.pv-meta-table thead th {
    background: #34495e;
    color: #ecf0f1;
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.pv-meta-table tbody tr:nth-child(odd) {
    background: #eef2f7;
}

.pv-meta-table tbody tr:nth-child(even) {
    background: #f8f9fb;
}

.pv-meta-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid #e0e4ea;
    vertical-align: middle;
}

.pv-meta-table tbody td:first-child {
    width: 50%;
    font-weight: 600;
    color: #2c3e50;
    font-size: 13px;
    white-space: nowrap;
}

.pv-meta-table tbody td:last-child {
    width: 50%;
    text-align: left;
    color: #1a3a5c;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Footer: legendă ca in PDF ── */
.pv-footer {
    padding: 5px 18px 6px;
    background: #f4f6f9;
    border-top: 1px solid #dde3ea;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 16px;
}

.pv-legend {
    font-size: 10px;
    color: #888;
    font-style: italic;
}

#pvFooterHem {
    font-size: 10px;
    color: #555;
    font-weight: 500;
}

/* Buton previzualizare schiță din randul tabelului */
.btn-preview-sketch {
    background: transparent;
    border: 1px solid #bdc3c7;
    border-radius: 3px;
    padding: 2px 7px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s;
    margin-left: 4px;
}

.btn-preview-sketch:hover {
    background: #dce8f5;
    border-color: #2980b9;
}

.btn-preview-sketch:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ===== AUTH OVERLAY ===== */
#login-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.88);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 16px;
}

/* JS sets display:flex when visible */

.auth-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.38);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Brand header */
.auth-brand {
    background: #1e3a5f;
    color: #fff;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-brand-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.auth-brand-name {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Tab switcher */
.auth-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    background: #f8fafc;
}

.auth-tab {
    flex: 1;
    padding: 12px 8px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.auth-tab:hover {
    color: #1e3a5f;
}

.auth-tab--active {
    color: #2980b9;
    border-bottom-color: #2980b9;
}

/* Panels */
.auth-panel {
    padding: 24px 28px 8px;
}

.auth-panel--hidden {
    display: none;
}

/* Fields */
.auth-field {
    margin-bottom: 14px;
}

.auth-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.auth-field input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.93rem;
    transition: border-color 0.18s, box-shadow 0.18s;
    background: #fff;
}

.auth-field input:focus {
    outline: none;
    border-color: #2980b9;
    box-shadow: 0 0 0 3px rgba(41,128,185,0.14);
}

/* Feedback messages */
.auth-msg {
    display: none;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 0.84rem;
    margin-bottom: 12px;
    line-height: 1.45;
}

.auth-msg--error {
    display: block;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #b91c1c;
}

.auth-msg--success {
    display: block;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

/* Submit button */
.auth-btn {
    width: 100%;
    padding: 11px;
    background: #2980b9;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s;
    margin-top: 2px;
    margin-bottom: 16px;
}

.auth-btn:hover:not(:disabled) {
    background: #1f6391;
}

.auth-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Security note */
.auth-note {
    padding: 0 28px 14px;
    font-size: 0.72rem;
    color: #9ca3af;
    line-height: 1.5;
    text-align: center;
}

/* OTP step hint text */
.auth-otp-hint {
    margin: 0 0 16px;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.5;
    text-align: center;
}

/* Footer strip inside card */
.auth-footer {
    background: #f1f5f9;
    border-top: 1px solid #e5e7eb;
    padding: 10px 28px;
    font-size: 0.72rem;
    color: #6b7280;
    text-align: center;
}

/* Password input + toggle wrapper */
.pwd-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pwd-wrap input {
    flex: 1;
    padding-right: 40px; /* room for the button */
}

.password-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 38px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    padding: 0;
    transition: color 0.15s;
}

.password-toggle-btn:hover {
    color: #2980b9;
}

.eye-icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* Show closed-eye by default; open-eye hidden */
.eye-open  { display: none; }
.eye-closed { display: block; }

/* When the wrapper has .pwd-visible, swap icons */
.pwd-wrap.pwd-visible .eye-open  { display: block; }
.pwd-wrap.pwd-visible .eye-closed { display: none; }

/* Forgot-password link */
.auth-forgot-wrap {
    text-align: right;
    margin-top: -6px;
    margin-bottom: 12px;
}

.auth-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    color: #2980b9;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-link:hover {
    color: #1f6391;
}

/* Recovery sub-view */
.auth-recover-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e3a5f;
    margin-bottom: 16px;
}

/* Ghost (secondary) button variant */
.auth-btn--ghost {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    margin-top: 8px;
}

.auth-btn--ghost:hover:not(:disabled) {
    background: #f3f4f6;
}

/* ── App header (title + user bar) ────────────────────────── */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto 0;
    padding: 14px 30px;
    background: #1a3a5c;
    border-radius: 12px 12px 0 0;
    color: #fff;
}

.app-header-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
}

.app-header-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

.user-display-name {
    font-size: 0.88rem;
    color: #cbd5e1;
}

.user-display-email {
    font-size: 0.82rem;
    color: #94a3b8;
    opacity: 0.85;
}

.user-role-badge {
    display: inline-block;
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 20px;
    border: 1px solid transparent;
    line-height: 1.6;
}

.user-role-badge.role-admin {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.55);
    color: #fca5a5;
}

.user-role-badge.role-superuser {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.55);
    color: #93c5fd;
}

.user-role-badge.role-user {
    background: rgba(148,163,184,0.15);
    border-color: rgba(148,163,184,0.4);
    color: #cbd5e1;
}

.btn-logout {
    padding: 5px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-logout:hover {
    background: rgba(239,68,68,0.25);
    border-color: #f87171;
}

/* ── Navigation menu bar ───────────────────────────────────── */
.app-menu-bar {
    display: flex;
    gap: 4px;
    max-width: 1400px;
    margin: 0 auto 12px;
    padding: 8px 16px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.menu-tab {
    padding: 7px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.menu-tab:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.menu-tab--active {
    background: #fff;
    color: #1a3a5c;
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.menu-tab--hidden {
    display: none;
}

/* ── View switching ────────────────────────────────────────────── */
.app-view--hidden {
    display: none !important;
}

/* ── Panel page wrapper (admin + org) ──────────────────────────── */
.panel-page {
    max-width: 1300px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

.panel-page-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
}

.panel-page-sub {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0 0 24px;
}

/* ── Shared panel primitives ───────────────────────────────────── */
.ap-input {
    padding: 6px 10px;
    font-size: 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.ap-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.ap-input--hex {
    width: 100px;
    font-family: monospace;
}

.ap-select {
    padding: 5px 8px;
    font-size: 0.82rem;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #f8fafc;
    color: #1e293b;
    cursor: pointer;
    max-width: 160px;
}

.ap-select:focus {
    border-color: #3b82f6;
    outline: none;
}

.ap-btn {
    padding: 5px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.ap-btn--save {
    background: #1a3a5c;
    color: #fff;
    border-color: #1a3a5c;
}

.ap-btn--save:hover { background: #2563eb; border-color: #2563eb; }

.ap-btn--edit {
    background: #f0f7ff;
    color: #2563eb;
    border-color: #93c5fd;
}

.ap-btn--edit:hover { background: #dbeafe; }

.ap-btn--archive {
    background: #fefce8;
    color: #92400e;
    border-color: #fcd34d;
}

.ap-btn--archive:hover { background: #fef9c3; }

.ap-btn--danger {
    background: #fff1f2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.ap-btn--danger:hover { background: #ffe4e6; }

/* ── Admin table ────────────────────────────────────────────────── */
.ap-table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.ap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ap-table thead th {
    background: #1a3a5c;
    color: #fff;
    padding: 11px 14px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.ap-table thead th:first-child { border-radius: 9px 0 0 0; }
.ap-table thead th:last-child  { border-radius: 0 9px 0 0; }

.ap-td {
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}

.ap-td--muted { color: #64748b; }

.ap-td--email {
    font-size: 0.78rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-td--actions {
    white-space: nowrap;
    display: flex;
    gap: 6px;
    align-items: center;
}

.ap-row--archived td {
    opacity: 0.55;
    background: #fafafa;
}

.ap-cell-msg {
    text-align: center;
    padding: 24px;
    color: #94a3b8;
    font-size: 0.88rem;
}

.ap-cell-err { color: #dc2626; }

.ap-status-badge {
    display: inline-block;
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
    border: 1px solid transparent;
}

.ap-badge--active {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.45);
    color: #15803d;
}

.ap-badge--archived {
    background: rgba(148,163,184,0.15);
    border-color: rgba(148,163,184,0.4);
    color: #64748b;
}

.ap-badge--pending {
    background: rgba(234,179,8,0.12);
    border-color: rgba(234,179,8,0.45);
    color: #92400e;
}

.ap-td--pending-name {
    font-style: italic;
    color: #64748b;
}

/* ── Org panel ──────────────────────────────────────────────────── */
.org-create-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    max-width: 540px;
}

.org-create-bar .ap-input {
    flex: 1;
}

.org-company-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.org-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 240px;
    flex: 1 1 240px;
    max-width: 380px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: border-color 0.15s;
}

.org-card--selected {
    border-color: #3b82f6;
    background: #f0f7ff;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

.org-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-card-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.org-repo-area {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.org-repo-hint { margin: 0; }

.org-repo-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a3a5c;
    margin: 0 0 18px;
}

.org-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #334155;
    margin: 20px 0 8px;
}

.org-repo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin-bottom: 18px;
}

.org-repo-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.org-repo-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.org-repo-field--full {
    grid-column: 1 / -1;
}

.org-color-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.org-color-row input[type="color"] {
    width: 38px;
    height: 34px;
    padding: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    cursor: pointer;
    background: #fff;
    flex-shrink: 0;
}

.org-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 22px 0;
}

.org-placeholder-hint {
    font-size: 0.82rem;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 7px;
    padding: 12px 16px;
    margin: 0 0 8px;
}

.org-sketch-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    min-height: 32px;
}

.org-sketch-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.88rem;
}

.org-sketch-name {
    font-weight: 500;
    color: #1e293b;
}

.org-sketch-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.ap-btn--xs {
    padding: 2px 8px;
    font-size: 0.78rem;
}

/* ===========================================
   Modal Repo Schițe Workspace
   =========================================== */

.repo-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.repo-modal-overlay--hidden {
    display: none !important;
}

.repo-modal-container {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    width: min(720px, 94vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.repo-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.repo-modal-icon {
    font-size: 1.3rem;
}

.repo-modal-title {
    flex: 1;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
}

.repo-modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #64748b;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.repo-modal-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.repo-modal-tabs {
    display: flex;
    gap: 2px;
    padding: 10px 22px 0;
    border-bottom: 2px solid #e2e8f0;
    flex-shrink: 0;
}

.repo-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.repo-tab:hover {
    color: #1e293b;
    background: #f8fafc;
}

.repo-tab--active {
    color: #1a3a5c;
    border-bottom-color: #1a3a5c;
    background: #f0f7ff;
}

.repo-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
}

.repo-panel {
    display: none;
}

.repo-panel--active {
    display: block;
}

.repo-loading-msg {
    color: #94a3b8;
    font-size: 0.88rem;
    text-align: center;
    padding: 28px 0;
}

.repo-loading-msg--err {
    color: #dc2626;
}

.repo-empty-msg {
    color: #94a3b8;
    font-size: 0.88rem;
    text-align: center;
    padding: 28px 0;
    font-style: italic;
}

.repo-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.repo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 8px 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    text-align: center;
}

.repo-card:hover:not(:disabled) {
    border-color: #2980b9;
    background: #f0f7ff;
    box-shadow: 0 2px 10px rgba(41, 128, 185, 0.15);
}

.repo-card:disabled,
.repo-card--no-pts {
    opacity: 0.45;
    cursor: default;
}

.repo-card-preview {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.repo-card-preview svg {
    width: 100%;
    height: 100%;
}

.repo-card-no-svg {
    color: #cbd5e1;
    font-size: 1.4rem;
}

.repo-card-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    word-break: break-word;
    line-height: 1.3;
}

/* Wrapper that holds the card + admin delete button */
.repo-card-wrap {
    position: relative;
}

/* Admin-only delete button — overlays top-right corner of card */
.btn-repo-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    z-index: 2;
}
.repo-card-wrap:hover .btn-repo-delete {
    opacity: 1;
}
.btn-repo-delete:hover {
    background: rgba(220, 38, 38, 0.25);
}

.repo-modal-footer {
    padding: 10px 22px 14px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.repo-modal-hint {
    font-size: 0.78rem;
    color: #94a3b8;
}

/* Page-level footer (below main app) */
.app-footer {
    text-align: center;
    padding: 18px 12px;
    font-size: 0.8rem;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
    margin-top: 32px;
}

/* ── Admin: Save-to-Repo button ───────────────────────────────── */
.cb-btn--admin-special {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: opacity 0.15s;
}

.cb-btn--admin-special:hover { opacity: 0.88; }

.cb-btn--repo-save {
    width: 100%;
    margin-top: 8px;
    padding: 11px 14px;
    font-size: 0.83rem;
}

/* ── Save-to-Repo modal specifics ─────────────────────────────── */
.str-modal-container {
    max-width: 460px;
}

.str-modal-body {
    padding: 18px 22px 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.str-modal-hint {
    font-size: 0.83rem;
    color: #64748b;
    margin: 0;
}

.str-type-row {
    display: flex;
    gap: 14px;
}

.str-type-option {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    padding: 8px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 7px;
    transition: border-color 0.15s, background 0.15s;
    -webkit-user-select: none;
    user-select: none;
}

.str-type-option:has(input:checked) {
    border-color: #2980b9;
    background: #eff6ff;
}

.str-type-option input[type="radio"] {
    accent-color: #2980b9;
    width: 16px;
    height: 16px;
}

.str-type-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
}

.str-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.str-field-label {
    font-size: 0.83rem;
    font-weight: 600;
    color: #475569;
}

.str-required {
    color: #e74c3c;
    margin-left: 2px;
}

.str-field-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}

.str-modal-footer {
    gap: 10px;
}

.str-btn-cancel {
    margin-left: auto;
}

/* Efect de ceață pentru conturile neactivate sau expirate */
body.body-locked-blur #workspace-container,
body.body-locked-blur #org-panel-container,
body.body-locked-blur .app-menu-bar {
    filter: blur(6px);
    pointer-events: none; /* Dezactivează orice click pe elementele din spate */
    -webkit-user-select: none;
    user-select: none;
    transition: filter 0.3s ease;
}

/* ── Success banner ────────────────────────────────────────────── */
.str-success-banner {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #16a34a;
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 9999;
    white-space: nowrap;
}

.str-success-banner--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}