/* --- Motty App styles (extracted from base.html) --- */

/* ---- Style block #0 ---- */
.badge-status { font-weight:600; letter-spacing:.2px; }
.badge-SENT { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); border:1px solid var(--bs-info-border-subtle); }
.badge-ACCEPTED { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border:1px solid var(--bs-primary-border-subtle); }
.badge-IN_PROGRESS, .badge-STARTED { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border:1px solid var(--bs-warning-border-subtle); }
.badge-COMPLETED { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border:1px solid var(--bs-success-border-subtle); }
.badge-CANCELLED { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); border:1px solid var(--bs-secondary-border-subtle); }
/* === KPI badges (always visible on dark/light) === */
.kpi-badges{display:inline-flex;gap:.4rem;align-items:center;}
.kpi-badge{background:#ffffff;color:#111827;border:1px solid #e6e8ec;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:600;display:flex;flex-direction:column;line-height:1.1;}
.kpi-badge .label{ font-size:10px; font-weight:500; color:#6b7280; }
.kpi-badge .value{ font-size:12px; font-weight:700; color:#111827; }
[data-bs-theme="dark"] .kpi-badge{background:#f9fafb;color:#111827;border-color:#e5e7eb;}

/* Mobile inline KPIs */
.mobile-kpis{display:inline-flex;align-items:center;gap:.5rem;margin-left:.6rem;font-size:12px;line-height:1;vertical-align:middle;white-space:nowrap;}
.mobile-kpis .item{display:inline-flex;align-items:center;gap:.25rem;}
.mobile-kpis .lbl{opacity:.7;font-weight:600;}
.mobile-kpis .val{font-weight:700;font-variant-numeric:tabular-nums;}
.mobile-kpis .sep{opacity:.35;}
@media (min-width: 768px){ .mobile-kpis{ display:none; } }

/* ===== Design tokens ===== */
:root{
  --m-green-500:#16a34a; --m-green-600:#059669; --m-green-700:#047857;
  --m-ink:#0f172a; --m-ink-2:#334155; --m-line:#e5e7eb; --m-bg:#f6f8fb; --m-white:#ffffff;
  --m-glass: rgba(255,255,255,.65);
  --m-shadow: 0 12px 24px rgba(2,6,23,.08), 0 3px 8px rgba(2,6,23,.06);
  --m-soft: 14px;
  --navbar-h: 56px;
  --oc-head-h: 56px;
}
[data-bs-theme="dark"]{
  --m-bg:#0b1220; --m-white:#0f172a; --m-ink:#e5e7eb; --m-ink-2:#cbd5e1; --m-line:#1f2937;
  --m-glass: rgba(15,23,42,.6);
  --m-shadow: 0 12px 24px rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.35);
}

html,body{height:100%}
body{background:var(--m-bg); color:var(--m-ink-2); -webkit-font-smoothing:antialiased}

/* ===== Top gradient accent ===== */
.accent-bar{height:3px;background:linear-gradient(90deg,#10b981,#06b6d4,#6366f1);background-size:300% 100%;animation:moveAccent 12s linear infinite;}
@keyframes moveAccent{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ===== Navbar ===== */
.navbar{background:radial-gradient(1200px 200px at 30% -50%, rgba(16,185,129,.22), transparent), #0b1220;border-bottom:1px solid rgba(255,255,255,.06);}
.navbar .navbar-brand{font-weight:800;letter-spacing:.25px}
.role-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15)}

/* ===== Layout ===== */
.layout{min-height:100vh}
.sidebar-wrap{ background:transparent; }

/* ===== Sidebar ===== */
.sidebar{position:sticky; top:0; padding:1.1rem;display:flex; flex-direction:column; gap:.9rem;height: calc(100dvh - var(--navbar-h)); overflow:auto;}
.offcanvas .offcanvas-body{ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); }
.offcanvas .sidebar{ position: static; height: calc(100dvh - var(--oc-head-h)); overflow: auto; -webkit-overflow-scrolling: touch; }
@supports not (height: 100dvh){ .offcanvas .sidebar{ height: calc(100vh - var(--oc-head-h)); } }

.nav-section{font-size:.72rem;letter-spacing:.08em;font-weight:700;color:#8a94a6;text-transform:uppercase;margin:.25rem .25rem -.15rem;}
.nav-grid{display:flex;flex-direction:column;gap:.4rem}
.nav-card{display:flex;align-items:center;gap:.65rem;padding:.58rem .74rem;border-radius:12px;background:var(--m-white);border:1px solid var(--m-line);text-decoration:none;color:var(--m-ink-2);transition:background-color .15s, border-color .15s, color .15s, transform .06s;box-shadow:none;}
.nav-card:hover{background:#f6f7f9;border-color:#dfe3ea;text-decoration:none}
[data-bs-theme="dark"] .nav-card{background:#0e1424;border-color:#161c2d;color:#cdd4e0;}
[data-bs-theme="dark"] .nav-card:hover{background:#121a2d;border-color:#1c2337}
.nav-card .icon{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:8px;font-size:14px;color:inherit;background:transparent;border:1px solid transparent;opacity:.9;}
.nav-card.active{border-color:#cfd6e2;background:#f3f5f8;box-shadow:inset 3px 0 0 0 #7aa0ff33;}
[data-bs-theme="dark"] .nav-card.active{border-color:#1f263b;background:#151d32;box-shadow:inset 3px 0 0 0 #7aa0ff33;}
.nav-card.alert-card{border-color:#e6c2c2;background:#faf5f5;}
.nav-card.alert-card .icon{color:#b52b2b;border-color:#f0d2d2;background:transparent;}
.nav-card.alert-card .label{color:#b52b2b;}
[data-bs-theme="dark"] .nav-card.alert-card{border-color:#3a2323;background:#1b1212;}
[data-bs-theme="dark"] .nav-card.alert-card .icon{color:#e17373;border-color:#3a2323;}
.nav-card small{color:#98a2b3;margin-left:auto}
[data-bs-theme="dark"] .nav-card small{color:#9aa3b5}

/* ===== Cards / content ===== */
.card-soft{background:var(--m-white);border:1px solid var(--m-line);border-radius:20px;box-shadow:var(--m-shadow);}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem;}
.page-title{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--m-ink);}
.page-title .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--m-green-500),var(--m-green-700));box-shadow:0 0 0 4px rgba(16,185,129,.12);}
.page-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* ===== Buttons ===== */
.btn-motty{--bs-btn-bg:var(--m-green-600);--bs-btn-border-color:var(--m-green-600);--bs-btn-hover-bg:var(--m-green-700);--bs-btn-hover-border-color:var(--m-green-700);--bs-btn-padding-y:.48rem;--bs-btn-padding-x:.8rem;border-radius:12px;color:#fff;box-shadow:var(--m-shadow);}
.btn-ghost{background:var(--m-white);border:1px solid var(--m-line);color:#334155;border-radius:12px;}
.btn-ghost:hover{background:#f8fafc}
.btn-icon{display:inline-flex;align-items:center;gap:.45rem;border-radius:12px;}
.btn-sm{padding:.4rem .6rem}

/* ===== Messages ===== */
.alert-glass{border-radius:14px;border:1px solid var(--m-line);background:var(--m-glass);backdrop-filter: blur(6px);}

/* ===== Tables ===== */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-responsive thead th{position:sticky;top:0;background:var(--m-white);z-index:5;}
@media (max-width:576px){
  .card-soft{padding:.85rem}
  .table{font-size:.92rem}
  .table td, .table th{padding:.45rem .5rem;vertical-align:middle}
  .table td{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .btn{border-radius:12px;}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .nav-card, .nav-card:hover, .navbar, .accent-bar { animation: none !important; transition: none !important; transform:none !important; }
}

/* Low Stock states (navbar button) */
.nav-card.ok-card{ border-color:#c9e9d7; background:#f1fcf6; }
.nav-card.ok-card .icon{ color:#16a34a; }
.nav-card.warn-card{ border-color:#ffe4b5; background:#fff7e6; }
.nav-card.warn-card .icon{ color:#f59e0b; }
[data-bs-theme="dark"] .nav-card.ok-card{ border-color:#173222; background:#0f1f17; }
[data-bs-theme="dark"] .nav-card.warn-card{ border-color:#3b2b12; background:#231a0c; }

/* Loading (neutral) */
.nav-card.loading-card{ border-color:#dbe3f0; background:#eef2f7; opacity:.9; }
.nav-card.loading-card .icon{ opacity:.8; }
.bi-spin{ display:inline-block; animation:bi-spin 1s linear infinite; }
@keyframes bi-spin{ 100% { transform: rotate(360deg); } }
[data-bs-theme="dark"] .nav-card.loading-card{ border-color:#1c2a3b; background:#0f1720; }

/* (Opțional) indicator camera ON */
.cam-on .modal-header #btnModalStopCam .bi-stop-circle{ animation: pulse 1.2s infinite; }
@keyframes pulse { 0%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:.7} }


        /* ===== Motty — DPI / Laptop wide layout fix =====
           Face layout-ul mai "aerisit" pe laptopuri Full HD cu scaling 125–150%.
           Reglează dimensiunea vizuală (zoom-out ușor), spațiile și lățimile. */

        /* 1) Extinde subtil spațiul de lucru pe ecrane ≥ 1200px */
        @media (min-width: 1200px) {
          .container,
          .container-lg,
          .container-xl,
          .container-xxl {
            max-width: 1600px !important;
          }
          /* întinde zona principală */
          .layout .row { --bs-gutter-x: 1.25rem; }
        }

        /* 2) Pe laptopuri 1000–1600px, reduce puțin “mărimea vizuală” (zoom-out) */
        @media (min-width: 1000px) and (max-width: 1600px) {
          body { zoom: 0.9; } /* poți regla 0.85–0.95 după preferință */
          .container { padding-left: 2rem !important; padding-right: 2rem !important; }
        }

        /* 3) Pe ecrane < 1400px, compactează ușor padding-urile cardurilor/paginilor
              ca să încapă mai mult conținut fără să pară înghesuit */
        @media (max-width: 1399.98px) {
          main.p-4 { padding: 1.25rem !important; }   /* override pentru clasa .p-4 din <main> */
          .card-soft   { padding: 1rem !important; }
        }

        /* 4) Aer pentru carduri peste tot */
        .card { margin-bottom: 1.25rem; }

        /* 5) (opțional) Dacă vrei încă mai “wide” pe monitoare mari:
        @media (min-width: 1600px) {
          .container,
          .container-lg,
          .container-xl,
          .container-xxl { max-width: 1800px !important; }
        }
        */

/* ---- Style block #1 ---- */
/* spacing sigur în header-ul modalului */
#barcodeModal .modal-header .ms-auto { margin-left: auto; }
#barcodeModal .modal-header .btn-close { margin-left: .25rem; }

/* ---- Style block #2 ---- */
#lastScanInfo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* culori rapide pentru status */
  .lsi-ok { color: #16a34a; font-weight: 600; }     /* verde */
  .lsi-err { color: #dc3545; font-weight: 600; }    /* roșu */
  [data-bs-theme="dark"] #lastScanInfo { opacity: .9; }