/* front – portal client (demo). Bootstrap 5.3 + Bootstrap Icons, ca aplicatia front; completari pentru layout (sidebar, topbar, stat-card). */
:root { --sb-w: 240px; --demo-h: 30px; }
body { background: var(--bs-tertiary-bg); font-size: .9rem; }
.demo-bar { background: #212529; color: #f8f9fa; text-align: center; padding: 5px 12px; font-size: .78rem; height: var(--demo-h); line-height: 20px; position: relative; z-index: 1040; }
.demo-bar a { color: #ffc107; margin-left: 8px; }

/* sidebar */
#sidebar { position: fixed; top: var(--demo-h); bottom: 0; left: 0; width: var(--sb-w); background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); display: flex; flex-direction: column; z-index: 1030; transition: transform .2s; }
#sidebar .brand { display: flex; align-items: center; gap: .55rem; padding: .8rem 1rem; text-decoration: none; color: var(--bs-emphasis-color); border-bottom: 1px solid var(--bs-border-color-translucent); }
.brand-mark { width: 32px; height: 32px; border-radius: .5rem; background: var(--bs-primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.brand-name { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.nav-section { padding: .65rem 1rem .25rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); font-weight: 600; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.nav-section-caret { font-size: .65rem; transition: transform .15s; }
.nav-section.closed .nav-section-caret { transform: rotate(-90deg); }
.nav-section-body.closed { display: none; }
#sidebar .nav-link { display: flex; align-items: center; gap: .6rem; padding: .45rem 1rem; margin: 1px .5rem; border-radius: .4rem; color: var(--bs-body-color); font-size: .86rem; }
#sidebar .nav-link i { font-size: 1rem; color: var(--bs-secondary-color); width: 1.15rem; text-align: center; }
#sidebar .nav-link:hover { background: var(--bs-tertiary-bg); }
#sidebar .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
#sidebar .nav-link.active i { color: var(--bs-primary); }
#sidebar .nav-link .badge { margin-left: auto; font-weight: 500; }
.sidebar-foot { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-top: 1px solid var(--bs-border-color); font-size: .8rem; }
.sidebar-foot > i { font-size: 1.6rem; color: var(--bs-secondary-color); }
#sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1025; }

/* topbar + continut */
#main { margin-left: var(--sb-w); min-height: calc(100vh - var(--demo-h)); }
#topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .5rem; height: 52px; padding: 0 1.25rem; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.page-title { font-weight: 600; font-size: 1rem; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.theme-toggle { border: 0; background: transparent; color: var(--bs-body-color); font-size: 1.05rem; width: 32px; height: 32px; border-radius: 50%; }
.theme-toggle:hover { background: var(--bs-tertiary-bg); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bs-primary); color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 600; }
#content { padding: 1.25rem; outline: 0; max-width: 1500px; }

/* carduri / statistici */
.stat-card { border: 1px solid var(--bs-border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.dashboard-stats .card-body { min-height: 62px; padding: .65rem .75rem; gap: .55rem !important; }
.icon-box { width: 34px; height: 34px; border-radius: .45rem; font-size: 1rem; flex: 0 0 34px; display: grid; place-items: center; }
.dashboard-stats .text-muted.small { font-size: .72rem; line-height: 1.15; }
.dashboard-stats .fw-bold.fs-5 { font-size: 1rem !important; line-height: 1.15; }

/* tabele in stil DataTables */
.dt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; }
.dt-bar .form-control, .dt-bar .form-select { width: auto; }
.dt-table th { white-space: nowrap; user-select: none; }
.dt-table th.sortable { cursor: pointer; }
.dt-table th.sortable::after { content: "\2195"; opacity: .3; margin-left: .35rem; font-size: .8em; }
.dt-table th.sorted-asc::after { content: "\25B2"; opacity: .8; }
.dt-table th.sorted-desc::after { content: "\25BC"; opacity: .8; }
.dt-table td { white-space: nowrap; }
.dt-table td.wrap { white-space: normal; }
.dt-table tbody tr[data-id] { cursor: pointer; }
.dt-table tbody tr.selected > * { background-color: var(--bs-primary-bg-subtle) !important; box-shadow: none; }
.mono { font-family: var(--bs-font-monospace); font-size: .82em; }
.col-filter input { width: 100%; font-size: .78rem; }
.awb-badge { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border: 1px solid var(--bs-success-border-subtle); font-weight: 500; }
.svc-badge { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); font-weight: 500; }
.stock-ok { color: var(--bs-success); font-weight: 600; }
.stock-low { color: var(--bs-warning-text-emphasis); font-weight: 600; }
.stock-out { color: var(--bs-danger); font-weight: 600; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.bars div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; font-size: .7rem; color: var(--bs-secondary-color); }
.bars i { display: block; width: 100%; max-width: 36px; background: var(--bs-primary); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .85; }
.step-card .card-header { font-weight: 600; }
.step-card.disabled { opacity: .5; pointer-events: none; }

@media (max-width: 991.98px) {
  #sidebar { transform: translateX(-100%); }
  body.sb-open #sidebar { transform: none; }
  body.sb-open #sidebar-overlay { display: block; }
  #main { margin-left: 0; }
  #content { padding: .85rem; }
}
@media print {
  .demo-bar, #sidebar, #topbar, .dt-bar, .btn, .toast-container { display: none !important; }
  #main { margin: 0; }
}

/* logo-ul are text inchis: pe tema intunecata ii punem fundal alb */
[data-bs-theme="dark"] #sidebar .brand img { background: #fff; border-radius: .4rem; padding: 3px 8px; }

/* tracking AWB */
a.awb-link { text-decoration: none; cursor: pointer; }
a.awb-link .awb-badge:hover { filter: brightness(.95); text-decoration: underline; }
.track { list-style: none; margin: 0; padding: 0; }
.track li { display: flex; gap: .85rem; padding-bottom: 1rem; position: relative; }
.track li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--bs-border-color); }
.track .dot { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); }
.track li.cur .dot { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.inv-dl { text-decoration: none; }

/* ajutor contextual */
.help-flow { background: var(--bs-tertiary-bg); border-left: 3px solid var(--bs-primary); border-radius: .25rem; padding: .6rem .8rem; }
#helpBtn { margin-right: .25rem; }
.lang-toggle { font-weight: 700; font-size: .78rem; width: auto; min-width: 2.2rem; padding: 0 .5rem; }
.dashboard-stats .stat-card:has(.stretched-link) { transition: border-color .15s, transform .15s; } .dashboard-stats .stat-card:has(.stretched-link):hover { border-color: var(--bs-primary); transform: translateY(-1px); }

@media (max-width: 576px) { :root { --demo-h: 50px; } .demo-bar { line-height: 18px; font-size: .72rem; padding: 6px 10px; } .demo-bar a { display: block; margin-left: 0; } }

/* editorul de linii (comenzi, receptii, returnari...): pe telefon fiecare linie devine un bloc, ca selectul de produs sa fie lizibil */
@media (max-width: 576px) {
  .modal-body table:has(tbody[data-lines]), .modal-body table:has(tbody[data-lines]) tbody { display: block; }
  .modal-body table:has(tbody[data-lines]) thead { display: none; }
  tbody[data-lines] tr { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .55rem 0; border-bottom: 1px solid var(--bs-border-color); }
  tbody[data-lines] td { display: block; border: 0 !important; padding: 0 !important; width: auto !important; }
  tbody[data-lines] td:first-child { flex: 1 1 100%; }
  tbody[data-lines] td:has([data-lq]) { flex: 0 0 84px; }
  tbody[data-lines] td:has([data-ll]) { flex: 1 1 100px; }
  tbody[data-lines] td:has([data-lb]) { flex: 1 1 150px; }
  tbody[data-lines] td[data-la] { flex: 1 1 auto; text-align: left; }
  tbody[data-lines] td:last-child { margin-left: auto; }
}