/* ============================================================
   Componente reutilizabile
   ============================================================ */

/* ---------- Butoane ---------- */

.lp-btn {
    font-family: var(--lp-font-body);
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--lp-radius-md);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.08s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lp-btn:active {
    transform: scale(0.98);
}

.lp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.lp-btn-primary {
    background: var(--lp-accent);
    color: white;
    padding: 10px 18px;
}

.lp-btn-primary:hover:not(:disabled) {
    background: var(--lp-accent-dark);
}

.lp-btn-secondary {
    background: transparent;
    border-color: var(--lp-line);
    color: var(--lp-text-primary);
    padding: 10px 18px;
}

.lp-btn-secondary:hover:not(:disabled) {
    background: var(--lp-paper-dim);
}

.lp-btn-danger {
    background: transparent;
    border-color: var(--lp-danger);
    color: var(--lp-danger-text);
    padding: 10px 18px;
}

.lp-btn-danger:hover:not(:disabled) {
    background: var(--lp-danger-bg);
}

.lp-btn-success {
    background: transparent;
    border-color: var(--lp-success);
    color: var(--lp-success-text);
    padding: 10px 18px;
}

.lp-btn-success:hover:not(:disabled) {
    background: var(--lp-success-bg);
}

/* Buton mare, pentru ecranele de operator pe mobil - tinta tactila generoasa */
.lp-btn-large {
    width: 100%;
    min-height: var(--lp-tap-target);
    font-size: 16px;
    border-radius: var(--lp-radius-lg);
}

/* ---------- Inputuri ---------- */

.lp-field {
    margin-bottom: 16px;
}

.lp-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--lp-text-primary);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.lp-input,
.lp-select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--lp-line);
    border-radius: var(--lp-radius-md);
    font-size: 15px;
    font-family: var(--lp-font-body);
    background: white;
    color: var(--lp-text-primary);
    min-height: 44px;
}

.lp-input::placeholder {
    color: var(--lp-text-tertiary);
}

.lp-input:focus,
.lp-select:focus {
    border-color: var(--lp-accent);
}

.lp-error-text {
    color: var(--lp-danger-text);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ---------- Carduri ---------- */

.lp-card {
    background: white;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-lg);
    padding: 20px;
}

/* Card de produs - semnatura vizuala: margine de etichet─â t─âiat─â (linie perforat─â sus) */
.lp-label-card {
    background: white;
    border-radius: var(--lp-radius-lg);
    padding: 18px;
    border: 1.5px solid var(--lp-text-primary);
    position: relative;
}

.lp-label-card::before {
    content: '';
    position: absolute;
    top: -1.5px;
    left: 16px;
    right: 16px;
    height: 1.5px;
    background: repeating-linear-gradient(90deg, var(--lp-text-primary) 0 4px, transparent 4px 8px);
}

/* ---------- Badge-uri / tag-uri de status ---------- */

.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--lp-radius-sm);
    font-family: var(--lp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lp-badge-success { background: var(--lp-success-bg); color: var(--lp-success-text); }
.lp-badge-warning { background: var(--lp-warning-bg); color: var(--lp-warning-text); }
.lp-badge-danger { background: var(--lp-danger-bg); color: var(--lp-danger-text); }
.lp-badge-info { background: var(--lp-info-bg); color: var(--lp-info-text); }
.lp-badge-neutral { background: var(--lp-paper-dim); color: var(--lp-text-secondary); }

.lp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.lp-dot-on { background: var(--lp-success); }
.lp-dot-off { background: var(--lp-text-tertiary); }
.lp-dot-warn { background: var(--lp-warning); }
.lp-dot-danger { background: var(--lp-danger); }

/* ---------- Stari vide / eroare ---------- */

.lp-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--lp-text-secondary);
}

.lp-empty-state i {
    font-size: 32px;
    color: var(--lp-text-tertiary);
    margin-bottom: 12px;
    display: block;
}

.lp-empty-state p {
    margin: 0;
    font-size: 14px;
}

/* ---------- Metric cards (dashboard) ---------- */

.lp-metric {
    background: white;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-md);
    padding: 14px;
}

.lp-metric-label {
    font-size: 11px;
    color: var(--lp-text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.lp-metric-value {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 24px;
    color: var(--lp-text-primary);
}

.lp-metric-value.ok { color: var(--lp-success); }
.lp-metric-value.warn { color: var(--lp-warning); }
.lp-metric-value.danger { color: var(--lp-danger); }

/* ---------- Admin sidebar nav (NavLink) ----------
   NavLink este randat intern de componenta built-in Blazor, nu de markup-ul scris
   direct in AdminLayout.razor - scoped CSS (.razor.css) nu il poate atinge.
   De aceea aceste reguli stau global, in components.css, nu in AdminLayout.razor.css. */

.adl-nav-item,
.adl-nav-item:link,
.adl-nav-item:visited {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lp-text-on-dark-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-left: 2px solid transparent;
}

.adl-nav-item i {
    font-size: 16px;
}

.adl-nav-item:hover,
.adl-nav-item:focus {
    color: var(--lp-text-on-dark);
    background: var(--lp-navy-light);
    text-decoration: none;
}

.adl-nav-item.active,
.adl-nav-item.active:link,
.adl-nav-item.active:visited {
    color: var(--lp-text-on-dark);
    background: var(--lp-navy-light);
    border-left-color: var(--lp-accent);
}

/* ============================================================
   Admin pages - tabele, modale, tabs (globale, nu scoped)
   Mutate aici dupa ce s-a confirmat ca scoped CSS (.razor.css) nu se
   aplica fiabil pe markup randat condiționat (@if) sau pe componente built-in.
   ============================================================ */

.adp-topbar {
    padding: 16px 24px;
    border-bottom: 1px solid var(--lp-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
}

.adp-topbar h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--lp-text-primary);
}

.adp-content {
    padding: 20px 24px;
}

.adp-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
    max-width: 600px;
}

/* Wrapper pentru scroll orizontal pe tabele, fara sa taie colturile rotunjite */
.adp-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-md);
    margin-bottom: 16px;
}

.adp-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    background: white;
}

.adp-table th {
    text-align: left;
    font-size: 11px;
    color: var(--lp-text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 10px 14px;
    background: var(--lp-paper);
    border-bottom: 1px solid var(--lp-line);
    white-space: nowrap;
}

.adp-table td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--lp-text-primary);
    border-bottom: 1px solid var(--lp-paper-dim);
    vertical-align: middle;
}

.adp-table tr:last-child td {
    border-bottom: none;
}

.adp-table tr:hover td {
    background: var(--lp-paper);
}

@media (max-width: 640px) {
    .adp-content {
        padding: 16px;
    }

    .adp-metrics {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
    }

    .adp-topbar {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .cd-info-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
    }

    .cd-action-group {
        flex-direction: column;
        align-items: stretch;
    }

    .cd-action-group .lp-btn {
        width: 100%;
    }
}

.adp-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 29, 41, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.adp-modal {
    background: white;
    border-radius: var(--lp-radius-lg);
    padding: 24px;
    width: 100%;
    max-width: 400px;
    margin: 16px;
}

.adp-modal h3 {
    font-size: 16px;
    margin-bottom: 16px;
}

.adp-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* ---------- Pagina de detaliu client ---------- */

.cd-back {
    font-size: 13px;
    color: var(--lp-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.cd-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    max-width: 600px;
}

.cd-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--lp-line);
    margin-bottom: 16px;
}

.cd-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lp-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}

.cd-tab.active {
    color: var(--lp-text-primary);
    border-bottom-color: var(--lp-accent);
    font-weight: 600;
}

.cd-tab-actions {
    margin-bottom: 12px;
}

.cd-row-sub {
    font-size: 12px;
    color: var(--lp-text-tertiary);
}

.cd-key-warning {
    font-size: 13px;
    color: var(--lp-warning-text);
    background: var(--lp-warning-bg);
    padding: 10px 12px;
    border-radius: var(--lp-radius-md);
    margin-bottom: 14px;
}

.cd-key-box {
    background: var(--lp-paper-dim);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-md);
    padding: 12px;
    font-size: 12px;
    word-break: break-all;
    margin-bottom: 16px;
}

.cd-action-btn {
    padding: 6px 12px;
    font-size: 12px;
}

.cd-action-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ============================================================
   Operator desktop sidebar nav - global pentru ca NavLink (built-in
   Blazor) nu poate fi atins de scoped CSS (OperatorLayout.razor.css)
   ============================================================ */

@media (min-width: 768px) {
    .op-sidebar-nav-item,
    .op-sidebar-nav-item:link,
    .op-sidebar-nav-item:visited {
        padding: 10px 18px;
        font-size: 13px;
        font-weight: 500;
        color: var(--lp-text-on-dark-secondary);
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        border-left: 2px solid transparent;
        background: none;
        border-top: none;
        border-right: none;
        border-bottom: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
        font-family: var(--lp-font-body);
    }

    .op-sidebar-nav-item i {
        font-size: 16px;
    }

    .op-sidebar-nav-item:hover {
        color: var(--lp-text-on-dark);
        background: var(--lp-navy-light);
    }

    .op-sidebar-nav-item.active {
        color: var(--lp-text-on-dark);
        background: var(--lp-navy-light);
        border-left-color: var(--lp-accent);
    }

    .op-sidebar-account {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 8px 18px 4px;
        padding-top: 10px;
        border-top: 1px solid var(--lp-navy-border);
        font-size: 11px;
        color: var(--lp-text-on-dark-secondary);
        overflow: hidden;
    }

    .op-sidebar-account i {
        font-size: 14px;
        flex-shrink: 0;
    }

    .op-sidebar-account span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .op-sidebar-device {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 2px 18px 4px;
        font-size: 10px;
        color: var(--lp-text-on-dark-tertiary, var(--lp-text-on-dark-secondary));
        opacity: 0.6;
    }

    .op-sidebar-device i {
        font-size: 12px;
        flex-shrink: 0;
    }

    .op-sidebar-logout {
        width: calc(100% - 24px);
        margin: 12px;
        border: 1px solid var(--lp-navy-border) !important;
        border-radius: var(--lp-radius-md);
        justify-content: center !important;
        padding: 10px !important;
    }
}

/* Id-ul dispozitivului in header-ul mobil (sub locatie/gestiune) - text mic,
   discret, doar pentru identificare/debug. Header-ul in sine e vizibil doar
   sub 768px (regula in fisierul scoped al OperatorLayout), deci aceasta
   regula nu are nevoie de propriul media query. */
.op-header-device {
    font-size: 10px;
    color: var(--lp-text-tertiary);
    opacity: 0.7;
    margin-top: 2px;
}

/* ============================================================
   Login / Forgot password / Reset password - pagini separate
   care refolosesc aceleasi clase, deci stilizate global, nu scoped.
   ============================================================ */

.lg-frame {
    min-height: 100vh;
    background: var(--lp-navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lg-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
}

.lg-mark {
    width: 36px;
    height: 36px;
    background: var(--lp-accent);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lp-font-display);
    font-weight: 700;
    color: var(--lp-navy);
    font-size: 16px;
}

.lg-brand {
    color: var(--lp-text-on-dark);
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
}

.lg-card {
    background: var(--lp-paper);
    border-radius: var(--lp-radius-xl);
    padding: 32px 28px;
    width: 100%;
    max-width: 380px;
}

.lg-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--lp-text-primary);
    margin: 0 0 4px;
}

.lg-subtitle {
    font-size: 13px;
    color: var(--lp-text-tertiary);
    margin: 0 0 24px;
}

.lg-footer {
    margin-top: 24px;
    font-size: 12px;
    color: var(--lp-text-on-dark-secondary);
    font-family: var(--lp-font-display);
}

.lg-back-link,
.lg-back-link:link,
.lg-back-link:visited {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--lp-text-tertiary);
    text-decoration: none;
}

.lg-back-link:hover {
    color: var(--lp-text-primary);
    text-decoration: underline;
}

/* ============================================================
   Print etichete - global, nu scoped. @page e o directiva de browser,
   nu un selector de element, deci scoping-ul Blazor (.razor.css) o
   poate aplica gresit sau deloc. Trebuie sa stea aici.
   ============================================================ */

@media print {
    .pl-screen-only {
        display: none !important;
    }

    body * {
        visibility: hidden;
    }

    #pl-print-area,
    #pl-print-area * {
        visibility: visible;
    }

    #pl-print-area {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
    }

    .pl-label {
        display: block;
        border: none !important;
        margin: 0;
        page-break-inside: avoid;
    }

    .pl-label:not(:last-child) {
        page-break-after: always;
    }

    .pl-label:last-child {
        page-break-after: avoid;
    }

    html, body {
        margin: 0;
        padding: 0;
    }

    @page {
        margin: 0;
        size: 65mm 37mm;
    }
}

.sc-price-zero-warning {
    background: var(--lp-danger-bg);
    color: var(--lp-danger-text);
    border-radius: var(--lp-radius-md);
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-price-zero-card {
    border-color: var(--lp-danger) !important;
}

/* ============================================================
   Pagina 404 - global (App.razor nu suporta scoped CSS in mod
   fiabil pentru continut randat in <NotFound>)
   ============================================================ */

.nf-page {
    min-height: 100vh;
    background: var(--lp-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.nf-card {
    background: var(--lp-paper);
    border-radius: var(--lp-radius-xl);
    padding: 40px 32px;
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.nf-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.nf-mark {
    width: 32px;
    height: 32px;
    background: var(--lp-accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lp-font-display);
    font-weight: 700;
    color: var(--lp-navy);
    font-size: 14px;
}

.nf-brand {
    color: var(--lp-text-primary);
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.nf-code {
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 56px;
    color: var(--lp-accent);
    line-height: 1;
    margin-bottom: 12px;
}

.nf-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--lp-text-primary);
    margin: 0 0 6px;
}

.nf-subtitle {
    font-size: 13px;
    color: var(--lp-text-tertiary);
    margin: 0 0 24px;
}

.nf-card .lp-btn {
    width: 100%;
}

/* Regulile de print pentru necesar marfa au fost mutate in
   wwwroot/css/supply-print.css, incarcat doar pe pagina Finish.razor -
   complet separat de regulile @media print ale etichetelor (mai sus),
   ca cele doua @page (65mm x 37mm vs A4) sa nu mai intre in conflict. */

/* Text simplu deasupra tastaturii numerice pe ecran (NumericKeypad),
   inlocuieste vechiul rand cu butoane +/- din cardul de scanare Etichete. */
.sc-qty-label {
    font-size: 14px;
    color: var(--lp-text-secondary);
    margin: 4px 0 0;
}

.sc-qty-label strong {
    color: var(--lp-text-primary);
    font-size: 18px;
}

.sc-locked-state .lp-btn {
    margin-top: 16px;
}

/* Cautare produs pe nume (doar desktop) - Etichete + Necesar marfa */
.sc-name-search-field {
    position: relative;
}

.sc-name-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: white;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius-md);
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.sc-name-search-result {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--lp-paper-dim);
    text-align: left;
    cursor: pointer;
    font-family: var(--lp-font-body);
}

.sc-name-search-result:last-child {
    border-bottom: none;
}

.sc-name-search-result:hover {
    background: var(--lp-paper);
}

.sc-name-search-result-name {
    font-size: 13px;
    color: var(--lp-text-primary);
    flex: 1;
}

.sc-name-search-result-code {
    font-size: 11px;
    color: var(--lp-text-tertiary);
    flex-shrink: 0;
}

/* Lista de produse din sesiunea curenta (sub zona de scanare) - container fix cu
   scroll propriu, ca sa nu creasca pagina la nesfarsit cand se adauga multe produse. */
.sc-items-list {
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sc-items-table-wrap {
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Buton "Renunta" / iesire din modalul de cantitate sau editare - nu aplica
   nicio modificare/adaugare. */
.sc-exit-btn {
    margin-top: 8px;
}

.sc-delete-confirm-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--lp-text-primary);
    margin: 0 0 8px;
}

/* ============================================================
   Bara de modul din header-ul mobil - arata constant in ce modul
   te afli (Etichete / Necesar marfa / etc), fiindcă ecranele de
   scanare arata aproape identic intre module pe mobil.
   ============================================================ */

.op-module-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--lp-text-on-dark);
    background: var(--lp-navy);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}

@media (min-width: 768px) {
    .op-module-bar {
        display: none;
    }
}

/* Butonul de stergere (cos de gunoi) din randurile listei de produse - marit
   pentru o tinta tactila mai usor de apasat, in special pe mobil. */
.sc-item-delete {
    min-width: 56px !important;
    min-height: 44px !important;
    width: 56px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: var(--lp-radius-md) !important;
}

.sc-item-delete i {
    font-size: 20px !important;
}

.sc-item-delete:active {
    background: var(--lp-danger-bg) !important;
}

/* ============================================================
   RESPONSIVE - pas general pe tot frontend-ul.

   Folosim !important in acest bloc pentru ca multe clase vizate
   (.sc-desktop-grid, .sc-current-card, etc.) sunt definite in
   fisiere CSS scoped (Scan.razor.css) pe care nu le avem verificate
   aici - Blazor adauga un atribut de scoping (ex. [b-xxxxx]) la
   fiecare selector scoped, ceea ce le creste specificitatea peste
   simple selectoare de clasa. !important garanteaza ca override-urile
   de mai jos se aplica indiferent de continutul acelor fisiere.

   Breakpoint principal: 768px (tableta/mobil landscape in jos).
   ============================================================ */

/* ============================================================
   Bara de butoane pentru bannerele de decizie (duplicat, produs
   inactiv, pret 0) - gap generos intre butoane pe orice ecran,
   ca protectie impotriva apasarii accidentale a butonului gresit.
   ============================================================ */
.sc-duplicate-actions,
.sc-inactive-actions {
    gap: 10px !important;
}

@media (max-width: 768px) {
    /* Grid-ul 2 coloane (scanare + lista) de pe Etichete/Necesar marfa
       se transforma intr-o singura coloana, coloana de scanare (cu
       cardul de produs si tastatura) inaintea listei. */
    .sc-desktop-grid {
        display: block !important;
    }

    .sc-scan-column,
    .sc-list-column {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
    }

    .sc-list-column {
        margin-bottom: 0 !important;
    }

    /* Bara de actiuni sesiune (Sesiune noua / Anuleaza / Finalizeaza) -
       trece pe 2 coloane in loc de un rand ingesuit. */
    .sc-session-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .sc-session-actions .lp-btn:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }

    .sc-session-actions .cd-action-btn {
        width: 100% !important;
    }

    .sc-session-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* Butoanele din bannerele de decizie (duplicat, inactiv, pret 0)
       se pun unul sub altul - mai usor de apasat cu degetul mare. */
    .sc-duplicate-actions,
    .sc-inactive-actions {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .sc-duplicate-actions .lp-btn,
    .sc-inactive-actions .lp-btn {
        width: 100% !important;
    }

    /* Spatiu suplimentar intre butoane (nu doar gap pe container), ca protectie
       dubla impotriva apasarii accidentale a butonului gresit - relevant mai
       ales la avertizarea "produs deja in lista" de la Necesar marfa, unde sunt
       3 butoane apropiate (Renunta / Adauga la cantitate / Inlocuieste). */
    .sc-duplicate-actions .lp-btn + .lp-btn,
    .sc-inactive-actions .lp-btn + .lp-btn {
        margin-top: 4px !important;
    }

    /* Tab-urile (Scanare / Istoric) - scroll orizontal daca nu incap,
       in loc sa se comprime ilizibil. */
    .cd-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .cd-tab {
        white-space: nowrap !important;
    }

    /* Toolbar-ul de pe pagina de finalizare Necesar marfa (Excel/CSV/Print)
       trece pe mai multe randuri in loc sa iasa din ecran. */
    .pl-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .pl-toolbar .lp-btn {
        flex: 1 1 auto !important;
    }

    /* Card-urile de produs (Etichete + Necesar marfa) - padding mai mic
       pe ecrane inguste, ca sa lase mai mult spatiu tastaturii numerice. */
    .lp-label-card {
        padding: 14px !important;
    }

    /* Randurile din tabelul Necesar marfa - font usor mai mic si padding
       redus, ca sa incapa mai mult continut fara scroll orizontal excesiv. */
    .adp-table th,
    .adp-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    /* Pe telefoane inguste, gridul de taste al tastaturii numerice
       ramane 3 coloane (definit in NumericKeypad.razor.css), dar marim
       usor tinta tactila aici pentru siguranta suplimentara. */
    .nk-key {
        padding: 18px 0 !important;
        font-size: 22px !important;
    }

    .lg-card,
    .nf-card {
        padding: 24px 20px !important;
    }
}

/* ============================================================
   Tabele de istoric (Etichete, Necesar marfa) - pe telefon devin
   liste de carduri in loc de tabel comprimat cu scroll orizontal.
   Fiecare <td> are un atribut data-label in markup, folosit aici
   prin content: attr(data-label) ca sa afiseze numele coloanei
   inline, langa valoare.
   ============================================================ */

@media (max-width: 640px) {
    .adp-table-wrap {
        border: none !important;
        overflow-x: visible !important;
    }

    .adp-table {
        min-width: 0 !important;
        display: block !important;
    }

    .adp-table thead {
        display: none !important;
    }

    .adp-table tbody {
        display: block !important;
    }

    .adp-table tr {
        display: block !important;
        background: white !important;
        border: 1px solid var(--lp-line) !important;
        border-radius: var(--lp-radius-md) !important;
        margin-bottom: 10px !important;
        padding: 4px 12px !important;
    }

    .adp-table tr:hover td {
        background: transparent !important;
    }

    .adp-table td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--lp-paper-dim) !important;
        text-align: right !important;
        white-space: normal !important;
    }

    .adp-table tr td:last-child {
        border-bottom: none !important;
    }

    /* Randul de actiuni (fara data-label, td gol) - fara eticheta, aliniat pe toata latimea */
    .adp-table td[data-label=""] {
        justify-content: flex-end !important;
    }

    .adp-table td:not([data-label=""])::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--lp-text-tertiary);
        text-align: left;
        flex-shrink: 0;
    }

    .adp-table td .cd-action-group {
        justify-content: flex-end !important;
        width: 100%;
    }

    /* Numarul de ordine (#) nu se mai afiseaza in cardurile mobile - are
       sens doar in tabelul tiparit/desktop, nu si in lista verticala de pe telefon. */
    .sp-index-cell {
        display: none !important;
    }

    /* Container-ul paginii de vizualizare necesar marfa (Finish.razor) -
       latimea urmareste ecranul telefonului, fara padding lateral generos
       care ingusteaza inutil spatiul util pe ecrane mici. */
    .sp-finish-print-area {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px auto !important;
        padding: 0 12px 24px !important;
    }
}

/* Inputul de cantitate din Necesar marfa e readonly (valoarea vine din
   tastatura numerica de pe ecran) - stil vizual clar ca nu se scrie
   direct in el, fara sa para dezactivat. */
.sp-qty-input[readonly] {
    background: var(--lp-paper);
    cursor: default;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

/* ============================================================
   Modal centrat pentru cardul de produs scanat, pe mobil (Etichete
   + Necesar marfa). Scopul: dupa scanare, cardul apare mereu in
   centrul ecranului, fara ca operatorul sa mai trebuiasca sa faca
   scroll ca sa vada tastatura/butoanele de confirmare.
   Clasele (.sc-scan-modal-backdrop / .sc-scan-modal-card) sunt
   adaugate din Razor doar cand _isTouchDevice e true - pe desktop
   randul e un simplu <div> fara efect, cardul ramane inline in coloana.
   ============================================================ */

.sc-scan-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 29, 41, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}

.sc-scan-modal-card {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    animation: sc-modal-in 0.15s ease;
}

@keyframes sc-modal-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rand cu inputul de scanare + butonul "Tastare manuala" (doar pe mobil) */
.sc-scan-field-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.sc-scan-field-row .sc-scan-input {
    flex: 1;
}

.sc-manual-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 14px;
}

/* Afisajul codului tastat manual, in modalul de tastare - stil similar cu
   vechiul afisaj al tastaturii, pastrat aici pentru ca la codul de bare
   chiar are sens sa vezi ce ai scris pana acum, spre deosebire de cantitate
   (unde eticheta de deasupra oricum arata valoarea). */
.sc-manual-entry-display {
    background: var(--lp-navy);
    color: var(--lp-text-on-dark);
    border-radius: var(--lp-radius-md);
    padding: 14px 16px;
    font-size: 20px;
    font-weight: 700;
    text-align: right;
    margin: 4px 0 12px;
    word-break: break-all;
}

/* ============================================================
   Lista de necesar marfa (Finish.razor) - coloanele "Unitati
   achizitionate" si "Bifa" raman goale intentionat, pentru
   completare manuala cu pixul dupa printare (nu sunt interactive
   in aplicatie).
   ============================================================ */

.sp-blank-cell {
    min-width: 90px;
}

.sp-checkbox-cell {
    text-align: center !important;
    width: 50px;
}

.sp-checkbox-box {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--lp-text-primary);
    border-radius: 3px;
    vertical-align: middle;
}

@media print {
    .sp-checkbox-box {
        border-color: #000 !important;
    }
}

/* ============================================================
   Header mobil - butoanele de actiune (Profil / Module) trebuie
   sa fie aliniate vertical la fel si sa aiba aceeasi culoare (alb,
   consistent cu restul header-ului). Inainte, NavLink-ul de Profil
   mostenea culoarea albastra implicita de link din browser si nu
   era centrat vertical fata de butonul de Module.
   ============================================================ */

.op-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-right: 6px !important;
}

.op-header-actions .op-icon-btn,
.op-header-actions a.op-icon-btn,
.op-header-actions a.op-icon-btn:link,
.op-header-actions a.op-icon-btn:visited {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    color: var(--lp-text-on-dark) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
}

.op-header-actions .op-icon-btn i {
    font-size: 20px !important;
}

/* ============================================================
   Toolbar-ul paginii de vizualizare Necesar marfa (Excel/CSV/PDF/
   Printeaza) - lipsea padding/margin vertical intre butoane cand
   se rup pe mai multe randuri (mobil).
   ============================================================ */

.pl-toolbar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    row-gap: 10px !important;
}

.pl-toolbar .lp-btn {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

/* ============================================================
   Pagina de loguri admin (/admin/logs) - lista live cu cod de
   culori pe nivel si filtre.
   ============================================================ */

.al-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

.al-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.al-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.al-live-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
}

.al-live-on {
    background: #dcfce7;
    color: #15803d;
}

.al-live-off {
    background: #f1f5f9;
    color: #64748b;
}

.al-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.al-live-on .al-live-dot {
    animation: al-pulse 1.4s infinite;
}

@keyframes al-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.al-tabs {
    margin-bottom: 16px;
}

.al-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 16px;
    background: var(--lp-surface-secondary, #f8fafc);
    border-radius: var(--lp-radius-md, 8px);
    margin-bottom: 20px;
}

.al-filters .lp-field {
    min-width: 160px;
    margin-bottom: 0;
}

.al-search-field {
    flex: 1 1 220px;
}

.al-clear-filters-btn {
    height: 38px;
}

.al-truncated-hint {
    font-size: 13px;
    color: var(--lp-text-tertiary, #94a3b8);
    margin-bottom: 10px;
}

.al-log-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 70vh;
    overflow-y: auto;
}

.al-log-row {
    display: flex;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--lp-radius-md, 8px);
    border-left: 4px solid transparent;
    background: var(--lp-surface-secondary, #f8fafc);
    cursor: pointer;
}

.al-log-row-expanded {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.al-log-detail {
    margin-top: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: var(--lp-radius-md, 8px);
    cursor: default;
}

.al-detail-row {
    margin-bottom: 10px;
}

.al-detail-row:last-child {
    margin-bottom: 0;
}

.al-detail-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lp-text-tertiary, #94a3b8);
    margin-bottom: 3px;
}

.al-detail-value {
    margin: 0;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--lp-text-primary, #0f172a);
    background: white;
    padding: 8px 10px;
    border-radius: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.al-log-time {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--lp-text-tertiary, #94a3b8);
    padding-top: 2px;
}

.al-log-level-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
    height: fit-content;
    white-space: nowrap;
}

.al-log-body {
    flex: 1;
    min-width: 0;
}

.al-log-message {
    display: block;
    font-size: 13px;
    color: var(--lp-text-primary, #0f172a);
    word-break: break-word;
}

.al-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.al-log-tag {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--lp-text-secondary, #475569);
    font-family: monospace;
}

/* Cod de culori pe nivel - border stanga + fundal usor + badge colorat */
.al-level-error {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.al-level-error .al-log-level-badge {
    background: #dc2626;
    color: white;
}

.al-level-warning {
    border-left-color: #d97706;
    background: #fffbeb;
}

.al-level-warning .al-log-level-badge {
    background: #d97706;
    color: white;
}

.al-level-information {
    border-left-color: #2563eb;
    background: #ffffff;
}

.al-level-information .al-log-level-badge {
    background: #e0e7ff;
    color: #3730a3;
}

@media (max-width: 768px) {
    .al-page {
        padding: 12px !important;
    }

    .al-filters {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .al-filters .lp-field {
        min-width: 0 !important;
        width: 100% !important;
    }

    .al-log-row {
        flex-direction: column !important;
        gap: 4px !important;
    }
}