/* =====================================================================
   Tichete de masă — sistem de design
   Identitate vizuală aliniată la aplicațiile Serviciului Social UBB
   ===================================================================== */

:root {
    --dash-primary: #4e73df;
    --dash-primary-dark: #1c3684;
    --dash-secondary: #39035a;
    --dash-header-gradient: linear-gradient(90deg, #212529 0%, #4e73df 100%);

    --dash-bg: #f4f7f9;
    --dash-card-bg: #ffffff;
    --dash-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15);

    --dash-text-main: #212832;
    --dash-text-muted: #69707a;

    --dash-success: #1cc88a;
    --dash-danger: #e74a3b;
    --dash-warning: #f6c23e;
    --dash-info: #4e73df;
    --dash-gold: #f4b400;

    --ubb-navy: #003366;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: var(--dash-bg);
    color: var(--dash-text-main);
    margin: 0;
    line-height: 1.5;
    font-size: 0.875rem;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

.ubb-font {
    font-family: 'Poppins', sans-serif;
}

/* --------------------------------------------------------------- navbar */
.ubb-navbar {
    background: var(--dash-header-gradient);
    padding: 0.4rem 1.5rem;
    box-shadow: var(--dash-shadow);
    border: none;
}

.ubb-navbar .navbar-brand {
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ubb-navbar .navbar-brand small {
    display: block;
    font-weight: 400;
    font-size: .68rem;
    opacity: .75;
    letter-spacing: .02em;
}

.ubb-navbar .nav-link {
    color: rgba(255, 255, 255, .85) !important;
    font-weight: 500;
    font-size: .85rem;
    border-radius: 4px;
    transition: all .2s;
    padding: .35rem .7rem;
}

.ubb-navbar .nav-link:hover,
.ubb-navbar .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .14);
}

.ubb-navbar .dropdown-menu {
    font-size: .85rem;
}

/* Pe telefon, meniul utilizatorului se aliniază la marginea din dreapta a barei,
   oriunde ar sta butonul lui (singur pe rând sau lângă sesiune): containerul
   lui devine static, iar meniul se așază față de bara întreagă. */
@media (max-width: 991.98px) {
    .ubb-navbar .navbar-collapse .dropdown {
        position: static;
    }

    .ubb-navbar .navbar-collapse .dropdown-menu {
        right: .75rem;
        left: auto;
        max-width: calc(100vw - 1.5rem);
    }
}

.navbar-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

/* -------------------------------------------------------------- butoane */
.btn-ubb {
    background-color: var(--dash-primary);
    color: #fff;
    border: none;
    padding: .4rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: .85rem;
    transition: all .2s;
}

.btn-ubb:hover,
.btn-ubb:focus {
    background-color: var(--dash-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.btn-ubb-secondary {
    background-color: var(--dash-secondary);
    color: #fff;
    border: none;
    padding: .4rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: .85rem;
}

.btn-ubb-secondary:hover {
    background-color: #26023c;
    color: #fff;
}

.btn-sm {
    font-size: .78rem;
}

.btn {
    white-space: nowrap;
}

/* Coloana de acțiuni din tabele: fiecare buton care schimbă starea este un
   formular POST separat (cu jeton CSRF), deci nu putem folosi stilul implicit
   „btn-group” al Bootstrap. Le afișăm ca butoane distanțate. */
td .btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    justify-content: flex-end;
}

td .btn-group>form {
    display: inline-flex;
}

td .btn-group>.btn,
td .btn-group>form>.btn {
    border-radius: 6px !important;
}

/* Butoanele din coloana de acțiuni afișează doar pictograma; denumirea apare
   ca tooltip la hover. Le păstrăm pătrate, ca rândurile să rămână aliniate. */
td .btn-group .btn i {
    line-height: 1;
}

td .btn-group>.btn,
td .btn-group>form>.btn {
    min-width: 2.1rem;
    padding-left: .45rem;
    padding-right: .45rem;
}

/* ---------------------------------------------------------------- carduri */
.ubb-card {
    background: var(--dash-card-bg);
    border: none;
    border-radius: .5rem;
    box-shadow: var(--dash-shadow);
    margin-bottom: 1.5rem;
}

.ubb-card-header {
    background-color: #4e73df40;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--dash-text-main);
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 2rem 0;
}

.ubb-card-body {
    padding: 1.25rem;
}

/* ------------------------------------------- bara de configurare a sesiunii */
.setup-banner {
    background: #fff8e6;
    border-bottom: 1px solid #f2dfa8;
    padding: .85rem 0;
    font-size: .85rem;
    color: #6b5309;
}

/* Sesiune inactiva sau inchisa: aceeasi forma ca bara de configurare, dar
   in rosu, pentru ca aici nu e vorba de un pas ramas, ci de o interdictie. */
.state-banner {
    background: #fdecec;
    border-bottom: 1px solid #f3bcbc;
    padding: .85rem 0;
    font-size: .85rem;
    color: #8a1c1c;
}

.state-banner .bi-x-octagon-fill {
    color: #d93a3a;
}

.setup-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #fff;
    border: 1px solid #e6d29a;
    border-radius: 999px;
    padding: .15rem .7rem;
    font-size: .74rem;
    font-weight: 600;
    color: #8a6d12;
}

.setup-chip.is-done {
    background: #eafaf3;
    border-color: #b9ecd7;
    color: #12805a;
}

/* ---------------------------------------------------------- antet pagină */
.page-header {
    background: #fff;
    border-bottom: 1px solid #e0e6ed;
    padding: 1.1rem 0;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.page-header .page-subtitle {
    color: var(--dash-text-muted);
    font-size: .82rem;
    margin: .2rem 0 0;
}

/* ------------------------------------------------------------ statistici */
.stat-card {
    background: #fff;
    border-radius: .5rem;
    box-shadow: var(--dash-shadow);
    padding: 1rem 1.15rem;
    border-left: .25rem solid var(--dash-primary);
    height: 100%;
}

.stat-card .stat-label {
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--dash-primary);
    margin-bottom: .25rem;
}

.stat-card .stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dash-text-main);
}

.stat-card .stat-hint {
    font-size: .74rem;
    color: var(--dash-text-muted);
}

.stat-card.stat-success {
    border-left-color: var(--dash-success);
}

.stat-card.stat-success .stat-label {
    color: var(--dash-success);
}

.stat-card.stat-warning {
    border-left-color: var(--dash-warning);
}

.stat-card.stat-warning .stat-label {
    color: #b98900;
}

.stat-card.stat-danger {
    border-left-color: var(--dash-danger);
}

.stat-card.stat-danger .stat-label {
    color: var(--dash-danger);
}

.stat-card.stat-secondary {
    border-left-color: var(--dash-secondary);
}

.stat-card.stat-secondary .stat-label {
    color: var(--dash-secondary);
}

/* ---------------------------------------------------------------- tabele */
.table {
    font-size: .82rem;
    margin-bottom: 0;
}

.table>thead th {
    background: #f8f9fb;
    border-bottom: 2px solid #e6eaf0;
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--dash-text-muted);
    white-space: nowrap;
    vertical-align: middle;
}

.table>tbody td {
    vertical-align: middle;
    padding: 0.5rem 1rem
}

.table-hover>tbody>tr:hover>* {
    background-color: #f1f4f9;
}

.table-wrap {
    overflow-x: auto;
    border-radius: .5rem;
}

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

tr.small.text-muted>td {
    background: aliceblue;
}

/* Soldul studentului se actualizeaza singur cand casierul inregistreaza o
   suma; scurta aprindere arata ca s-a schimbat ceva, nu doar numarul. */
@keyframes soldActualizat {
    0% {
        box-shadow: 0 0 0 0 rgba(78, 115, 223, .55);
    }

    100% {
        box-shadow: 0 0 0 14px rgba(78, 115, 223, 0);
    }
}

.sold-actualizat {
    animation: soldActualizat 1.1s ease-out;
}


/* Antet de tabel sortabil: săgeata este ștearsă până la hover, ca să nu
   încarce vizual capul tabelului, și rămâne aprinsă pe coloana activă. */
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.th-sort:hover {
    color: var(--dash-primary);
}

.th-sort i {
    font-size: .75em;
    opacity: .25;
    transition: opacity .15s ease;
}

.th-sort:hover i {
    opacity: .7;
}

.th-sort.active {
    color: var(--dash-primary);
    font-weight: 600;
}

.th-sort.active i {
    opacity: 1;
}

.num .th-sort {
    justify-content: flex-end;
}


.cub-badge {
    display: inline-block;
    font-family: 'Poppins', monospace;
    font-weight: 600;
    background: #eef2fd;
    color: var(--dash-primary-dark);
    border: 1px solid #d6e0fb;
    border-radius: 6px;
    padding: .1rem .5rem;
    letter-spacing: .03em;
}

.cub-badge-lg {
    /*font-size: 1.4rem;*/
    padding: .35rem 1rem;
}

/* ---------------------------------------------------------------- filtre */
.filter-bar {
    background: #fff;
    border-radius: .5rem;
    padding: 1rem 1.15rem;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
    margin-bottom: 1.25rem;
}

.filter-bar label {
    font-size: .74rem;
    font-weight: 600;
    color: var(--dash-text-muted);
}

/* Liste cu căutare (select[data-combobox], vezi app.js) */
.combo {
    position: relative;
}

.combo-list {
    display: none;
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 22rem;
    max-height: 22rem;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: .25rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}

.combo-list.show {
    display: block;
}

.combo-item {
    padding: .35rem .75rem;
    font-size: .85rem;
    cursor: pointer;
}

.combo-item.selected {
    font-weight: 600;
}

.combo-item.active {
    background: var(--ubb-navy);
    color: #fff;
}

.combo-all {
    color: #6c757d;
    border-bottom: 1px solid #f1f3f5;
}

.combo-info {
    padding: .35rem .75rem;
    font-size: .78rem;
    font-style: italic;
    color: #6c757d;
}

/* Butonul cu ochi (arată / ascunde beneficiarii) din istoricul documentelor */
.btn-detail {
    font-size: .75rem;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: baseline;
}

.form-label {
    font-size: .78rem;
    font-weight: 600;
    color: #4a5260;
    margin-bottom: .25rem;
}

.form-control,
.form-select {
    font-size: .85rem;
}

.form-control-lg,
.form-select-lg {
    font-size: 1rem;
}

.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: #adb5bd;
}

.empty-state i {
    font-size: 2.4rem;
    display: block;
    margin-bottom: .6rem;
}

/* ----------------------------------------------------------------- POS
   Casieria se folosește pe tabletă, în picioare, cu clientul în față. Două
   cerințe conduc tot ce urmează: beneficiarul și suma trebuie să se vadă fără
   derulare, iar tot ce se apasă trebuie să fie de mărimea unui deget (cel puțin
   44 px). Singura zonă care se derulează este lista operațiunilor zilei. */

/* Pagina ocupă ecranul: subsolul și spațiul de sub conținut nu își au rostul
   aici. Regula este o îmbunătățire, nu o condiție — unde :has nu se aplică,
   pagina rămâne doar puțin mai lungă. */
body:has(.pos-page) main {
    padding-bottom: 0 !important;
}

body:has(.pos-page) footer {
    display: none;
}

/* Bara de navigare se strânge: pe casierie fiecare rând câștigat în sus înseamnă
   un rând în plus în lista zilei sau taste mai mari. Subtitlul aplicației nu îi
   spune nimic casierului care stă în fața clientului. */
body:has(.pos-page) .ubb-navbar {
    padding-top: .15rem;
    padding-bottom: .15rem;
}

body:has(.pos-page) .ubb-navbar .navbar-brand small {
    display: none;
}

body:has(.pos-page) .navbar-logo {
    width: 30px;
    height: 30px;
}

.pos-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: #fff;
    border-bottom: 1px solid #e0e6ed;
    padding: .4rem 1.25rem;
    margin-bottom: .7rem;
}

.pos-bar-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.pos-bar-title i {
    font-size: 1.5rem;
    color: var(--dash-primary);
}

.pos-bar-title strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
}

.pos-bar-title small {
    color: var(--dash-text-muted);
    font-size: .78rem;
}

.pos-bar-stats {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.pos-chip {
    background: var(--dash-bg, #f4f7f9);
    border: 1px solid #e0e6ed;
    border-radius: .5rem;
    padding: .3rem .7rem;
    line-height: 1.15;
    text-align: right;
}

.pos-chip-label {
    display: block;
    font-size: .66rem;
    text-transform: uppercase;
    color: var(--dash-text-muted);
}

.pos-chip-value {
    font-size: 1.05rem;
    font-weight: 700;
}

.pos-chip-hint {
    font-size: .7rem;
    color: var(--dash-text-muted);
    margin-left: .2rem;
}

.pos-new {
    min-width: 52px;
}

.pos-closed {
    background: #fdecea;
    color: var(--dash-danger);
    border: 1px solid #f5c6c0;
    border-radius: .5rem;
    padding: .35rem .7rem;
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
}

/* Cele trei cutii — căutarea, beneficiarul, ziua — stau una sub alta pe telefon,
   în ordinea în care se folosesc: caut, văd cine este, apoi privesc ziua. */
.pos-grid {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.pos-grid>.ubb-card {
    margin-bottom: 0;
}

.pos-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* De la lățime de tabletă, aceleași cutii se împart în două coloane: căutarea și
   ziua la stânga, beneficiarul la dreapta, pe toată înălțimea. Nu se repetă
   nimic în pagină — doar așezarea este alta. */
@media (min-width: 768px) {
    .pos-grid {
        display: grid;
        grid-template-columns: 5fr 7fr;
        grid-template-rows: auto minmax(0, 1fr);
        align-items: stretch;
    }

    .pos-card-search {
        grid-column: 1;
        grid-row: 1;
    }

    .pos-card-ops {
        grid-column: 1;
        grid-row: 2;
    }

    .pos-card-client {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .pos-card-ops,
    .pos-card-client {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
}

@media (min-width: 1200px) {
    .pos-grid {
        grid-template-columns: 4fr 8fr;
    }
}

/* Înălțimea fixă doar acolo unde chiar încape: scăderea acoperă bara de navigare,
   banda casieriei și spațiile dintre ele. Pe un ecran scund, pagina se derulează
   ca oricare alta — mai bine așa decât tăiată. */
@media (min-width: 768px) and (min-height: 620px) {

    /*.pos-grid { height: calc(100vh - 155px); min-height: 400px; }*/
    .pos-grid {
        min-height: 400px;
    }
}

/* ------------------------------------------------ căutarea după cod */
.pos-search input {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    padding: .5rem;
}

.pos-search .btn {
    font-size: 1.3rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

/* ------------------------------------------------ beneficiarul */
.pos-client {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid #e9ecef;
}

.pos-client-who {
    min-width: 0;
}

.pos-client-name {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
}

.pos-client-name .cub-badge {
    font-size: 1.1rem;
    vertical-align: .1em;
    margin-right: .4rem;
}

.pos-client-meta {
    color: var(--dash-text-muted);
    font-size: .82rem;
    margin-top: .25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.pos-client-balance {
    text-align: right;
}

.pos-balance-label {
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--dash-text-muted);
}

.pos-balance {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--dash-success);
    line-height: 1.05;
}

.pos-balance.is-low {
    color: var(--dash-danger);
}

/* ------------------------------------------------ introducerea sumei */
.pos-amount {
    padding: .85rem 1.15rem 1rem;
}

.pos-pay {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.pos-pay-input {
    flex: 1 1 250px;
    min-width: 0;
}

.pos-amount input {
    font-size: 2.1rem;
    font-weight: 700;
    text-align: right;
    padding: .35rem .6rem;
}

.pos-amount .input-group-text {
    font-size: 1.05rem;
}

.pos-quick {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .45rem;
    margin-top: .6rem;
}

.pos-quick .btn {
    font-size: 1.05rem;
    font-weight: 600;
    padding: .6rem 0;
}

.pos-keys {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .45rem;
}

.pos-key {
    font-size: 1.35rem;
    font-weight: 600;
    padding: .4rem 0;
    border: 1px solid #e0e6ed;
    min-height: 48px;
}

/* Pe ecrane late, tastatura stă lângă câmpul sumei; sub asta, dedesubt, pe
   toată lățimea — degetul are nevoie de taste mari, nu de coloane înguste. */
@media (min-width: 1200px) {
    .pos-pay-input {
        flex: 1 1 0;
    }

    .pos-keys {
        flex: 0 0 300px;
    }
}

/* Butoanele coboară la baza cardului: pe tabletă ținută în mână, acolo ajunge
   degetul mare fără să acopere suma. Unde nu este loc în plus, rămân imediat
   sub tastatură. */
/* Cardul beneficiarului este deja flex din așezare; aici rămâne doar formularul. */
.pos-amount {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.pos-confirm {
    display: flex;
    gap: .6rem;
    margin-top: auto;
    padding-top: .85rem;
}

.pos-confirm .btn {
    min-height: 58px;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Tabletele obișnuite au 768–800 px în înălțime pe orizontală. Acolo fiecare
   pixel contează, dar nicio tastă nu coboară sub 44 px — sub atât, degetul
   nimerește alături. */
@media (min-width: 768px) and (max-height: 820px) {
    .pos-client {
        padding: .7rem 1.15rem;
    }

    .pos-balance {
        font-size: 2.2rem;
    }

    .pos-amount input {
        font-size: 1.9rem;
    }

    .pos-key {
        min-height: 44px;
        font-size: 1.25rem;
    }

    .pos-quick .btn {
        padding: .45rem 0;
    }
}

/* ------------------------------------------------ starea de așteptare */
.pos-waiting {
    text-align: center;
    color: var(--dash-text-muted);
    padding: 2.5rem 1rem;
}

.pos-waiting i {
    font-size: 3.4rem;
    color: #c9d3e3;
    display: block;
    margin-bottom: .8rem;
}

.pos-waiting-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--dash-text-main);
    margin-bottom: .25rem;
}

.pos-waiting-hint {
    font-size: .86rem;
    margin-bottom: 0;
}

/* ------------------------------------------------ operațiunile zilei */
.pos-op {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .9rem;
    border-bottom: 1px solid #f1f3f6;
}

.pos-op:last-child {
    border-bottom: 0;
}

.pos-op-main {
    flex: 1 1 auto;
    min-width: 0;
}

.pos-op-meta {
    font-size: .75rem;
    color: var(--dash-text-muted);
}

.pos-op-amount {
    font-size: 1.05rem;
    white-space: nowrap;
}

.pos-op-action .btn {
    min-width: 44px;
    min-height: 44px;
}

/* --------------------------------------------------------------- diverse */
.badge {
    font-weight: 600;
    font-size: .7rem;
}

.timeline-amount-positive {
    color: var(--dash-success);
    font-weight: 700;
}

.timeline-amount-negative {
    color: var(--dash-danger);
    font-weight: 700;
}

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-box {
    width: 100%;
    max-width: 480px;
    text-align: center;
}

.login-logo {
    width: 80px;
    margin-bottom: 16px;
}

.help-text {
    font-size: .76rem;
    color: var(--dash-text-muted);
}

.months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .5rem;
}

.month-chip {
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    padding: .5rem .65rem;
    font-size: .78rem;
    background: #fff;
}

.month-chip.is-allocated {
    background: #eafaf3;
    border-color: #b9ecd7;
}

.month-chip .month-name {
    font-weight: 600;
    text-transform: capitalize;
}

@media print {

    .ubb-navbar,
    .page-header,
    .filter-bar,
    .no-print,
    .btn {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .ubb-card {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
}

@media (max-width: 767.98px) {
    .page-header {
        padding: .85rem 0;
    }

    .pos-search input {
        font-size: 1.2rem;
    }
}