:root {
  --yellow: #ffd400;
  --yellow-hover: #e5bf00;
  --bg-color: #0b0f19;
  --panel-bg: rgba(26,31,46,0.85);
  --panel-border: rgba(255,255,255,0.08);
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --danger: #ef4444;
  --success: #10b981;
  --input-bg: rgba(15,23,42,0.6);
  --shadow: 0 8px 32px rgba(0,0,0,0.3);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Outfit, sans-serif; background-color: var(--bg-color); color: var(--text-main); min-height:100vh; overflow-x:hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; outline: none; border: none; }
.hidden { display: none !important; }
.text-danger { color: var(--danger) !important; }
.text-green { color: var(--success) !important; }
h1 { font-size: 28px; font-weight: 700; margin-bottom: 5px; }
h2 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
p { color: var(--text-muted); font-size: 14px; }
.message { font-size: 13px; margin-top: 8px; min-height: 18px; }
.error { color: var(--danger); }
.glass-panel { background: var(--panel-bg); backdrop-filter: blur(12px); border: 1px solid var(--panel-border); border-radius: 16px; box-shadow: var(--shadow); }
.primary-btn { background: var(--yellow); color: #000; font-weight: 700; padding: 0 20px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease; white-space: nowrap; }
.primary-btn:hover { background: var(--yellow-hover); transform: translateY(-2px); }
.primary-btn.full { width: 100%; }
.primary-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.mega-btn { height: 60px; font-size: 16px; border-radius: 16px; width: 100%; }
.ghost-btn { background: transparent; color: var(--text-muted); border: 1px solid var(--panel-border); height: 44px; padding: 0 16px; border-radius: 12px; }
.ghost-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-main); }
.icon-btn { background: transparent; color: var(--text-muted); padding: 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.05); }
input, select { width: 100%; height: 44px; background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text-main); border-radius: 12px; padding: 0 16px; transition: border-color 0.2s; }
input:focus, select:focus { border-color: var(--yellow); outline: none; }
input[type=checkbox] { width: auto; height: auto; }
.app { display: grid; grid-template-columns: 260px 1fr; height: 100vh; overflow: hidden; }
.sidebar { background: rgba(10,15,30,0.95); border-right: 1px solid var(--panel-border); display: flex; flex-direction: column; padding: 24px 20px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.logo-box { width: 44px; height: 44px; min-width: 44px; background: var(--yellow); color: #000; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.brand-logo { width: 62px; height: 62px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.auth-brand-logo { width: 72px; height: 72px; }
.top-logo { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,.3)); }
.brand strong { font-size: 20px; display: block; line-height: 1; }
.brand small { color: var(--text-muted); font-size: 12px; }
.menu { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-link { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: 12px; background: transparent; color: var(--text-muted); font-weight: 500; font-size: 14px; transition: all 0.2s; text-align: left; }
.nav-link i { font-size: 20px; flex-shrink: 0; }
.nav-link:hover, .nav-link.active { background: rgba(255,212,0,0.1); color: var(--yellow); }
.sidebar-footer { margin-top: 20px; display: grid; gap: 12px; }
.live-card { background: rgba(0,0,0,0.3); padding: 16px; border-radius: 12px; border: 1px solid var(--panel-border); }
.live-card small { color: var(--text-muted); font-size: 12px; }
.sync-indicator { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pulse-dot { width: 10px; height: 10px; background: var(--success); border-radius: 50%; animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); } 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } }
.logout { background: rgba(239,68,68,0.1); color: var(--danger); height: 44px; border-radius: 12px; font-weight: 600; width: 100%; }
.workspace { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; margin: 16px 24px 0; flex-shrink: 0; }
.search { position: relative; flex: 1; max-width: 300px; }
.search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search input { padding-left: 44px; border-radius: 99px; }
.top-actions { display: flex; gap: 12px; }
.view-container { flex: 1; padding: 24px; overflow-y: auto; }
.page { display: none; animation: fadeIn 0.3s ease; }
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-head { margin-bottom: 24px; }
.delphi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.delphi-btn { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 16px; padding: 24px 16px; text-align: center; cursor: pointer; transition: all 0.25s; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.delphi-btn:hover { transform: translateY(-4px); border-color: rgba(255,212,0,0.4); box-shadow: 0 12px 28px rgba(0,0,0,0.4); }
.delphi-btn.highlight { background: rgba(255,212,0,0.08); border-color: rgba(255,212,0,0.3); }
.delphi-btn.highlight .d-icon { color: var(--yellow); }
.d-icon { font-size: 40px; color: var(--text-muted); }
.delphi-btn:hover .d-icon { color: var(--yellow); }
.d-text { font-size: 14px; font-weight: 600; line-height: 1.4; }
.d-text small { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metric { background: var(--panel-bg); border: 1px solid var(--panel-border); padding: 20px; border-radius: 16px; }
.metric span { color: var(--text-muted); font-size: 13px; font-weight: 500; display: block; margin-bottom: 8px; }
.metric strong { font-size: 28px; display: block; margin-bottom: 4px; }
.metric small { display: block; font-size: 13px; }
.pos-view { height: 100%; }
.pos-layout { display: grid; grid-template-columns: 1fr 380px; gap: 20px; height: calc(100vh - 130px); }
.pos-products { display: flex; flex-direction: column; padding: 16px; overflow: hidden; }
.pos-filters { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 16px; }
.pos-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding-right: 6px; align-content: start; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
.product-card { background: rgba(0,0,0,0.35); border: 1px solid var(--panel-border); border-radius: 12px; padding: 14px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; gap: 6px; }
.product-card:hover { border-color: var(--yellow); background: rgba(255,212,0,0.06); }
.pc-name { font-weight: 600; font-size: 13px; line-height: 1.3; }
.pc-price { color: var(--yellow); font-weight: 700; font-size: 16px; margin-top: auto; }
.pc-stock { font-size: 11px; color: var(--text-muted); }
.pc-stock.danger { color: var(--danger); }
.pos-cart { display: flex; flex-direction: column; overflow: hidden; }
.cart-header { padding: 16px 20px; border-bottom: 1px solid var(--panel-border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.cart-items { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.empty-cart { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0; }
.cart-item { background: rgba(0,0,0,0.3); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.ci-info strong { display: block; font-size: 14px; margin-bottom: 3px; }
.ci-info small { color: var(--text-muted); font-size: 12px; }
.ci-qty { display: flex; align-items: center; gap: 8px; }
.qty-btn { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.08); color: white; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.qty-btn:hover { background: var(--yellow); color: #000; }
.cart-footer { padding: 16px 20px; background: rgba(0,0,0,0.4); border-top: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.summary-line { display: flex; justify-content: space-between; align-items: center; }
.summary-line span { font-size: 16px; font-weight: 600; }
.big-total { font-size: 30px; color: var(--yellow); font-weight: 800; }
.client-selector { position: relative; }
.client-selector i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); z-index: 1; }
.client-selector select { padding-left: 44px; }
.section-title { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; margin-bottom: 20px; }
.title-left h1 { margin-bottom: 2px; }
.filters { display: flex; gap: 12px; margin-bottom: 20px; }
.table-card { overflow: hidden; }
.table-scroll { overflow-y: auto; }
.table-scroll.tall { max-height: calc(100vh - 280px); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--panel-border); font-size: 14px; }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; background: rgba(0,0,0,0.2); position: sticky; top: 0; }
tbody tr:hover { background: rgba(255,255,255,0.02); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.settings-panel { padding: 24px; }
.input-copy { display: flex; gap: 8px; align-items: center; }
.input-copy input { flex: 1; }
.input-copy .icon-btn { height: 44px; width: 44px; border: 1px solid var(--panel-border); border-radius: 12px; flex-shrink: 0; }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); backdrop-filter: blur(5px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-content { width: 100%; max-width: 560px; background: #0f172a; border: 1px solid var(--panel-border); border-radius: 20px; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
.modal-head { padding: 20px 24px; border-bottom: 1px solid var(--panel-border); display: flex; justify-content: space-between; align-items: center; }
.form-grid { padding: 24px; display: grid; gap: 14px; }
.form-grid label { display: grid; gap: 7px; font-weight: 500; font-size: 13px; color: var(--text-muted); }
.form-grid label input, .form-grid label select { color: var(--text-main); }
.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; gap: 10px; }
.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-hero { text-align: center; max-width: 480px; width: 100%; }
.auth-hero h1 { font-size: 42px; margin: 16px 0; }
.auth-card { padding: 28px; text-align: left; margin-top: 28px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 20px; background: rgba(0,0,0,0.3); padding: 6px; border-radius: 14px; }
.auth-tab { flex: 1; height: 38px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--text-muted); background: transparent; }
.auth-tab.active { background: var(--panel-bg); color: var(--text-main); }
.auth-panel { display: none; }
.auth-panel.active { display: block; }
.eyebrow { background: rgba(255,212,0,0.1); color: var(--yellow); padding: 8px 16px; border-radius: 99px; display: inline-flex; gap: 8px; font-weight: 600; font-size: 14px; }
.mobile-only { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; left: -280px; width: 280px; height: 100%; z-index: 200; transition: left 0.3s; }
  .sidebar.open { left: 0; }
  .mobile-only { display: inline-flex !important; }
  .pos-layout { grid-template-columns: 1fr; height: auto; }
  .pos-cart { height: 500px; }
  .metrics, .settings-grid { grid-template-columns: 1fr; }
  .col-2 { grid-template-columns: 1fr; }
  .topbar { margin: 12px; padding: 12px 16px; }
  .view-container { padding: 16px; }
}



.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.stat-card { display:flex; align-items:center; gap:16px; padding:20px; border-radius:16px; }
.stat-card.featured { background:rgba(255,212,0,0.07); border-color:rgba(255,212,0,0.25); }
.stat-icon { font-size:36px; color:var(--text-muted); flex-shrink:0; }
.stat-icon.success { color:var(--success); }
.stat-icon.danger { color:var(--danger); }
.stat-body { flex:1; }
.stat-body span { display:block; font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.stat-body strong { display:block; font-size:22px; font-weight:800; line-height:1; margin-bottom:4px; }
.stat-body small { display:block; font-size:12px; }

/* === MODAL (sans clic backdrop pour fermer) === */
.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); backdrop-filter:blur(6px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }.modal-box { width:100%; max-width:580px; border-radius:20px; overflow:hidden; max-height:90vh; display:flex; flex-direction:column; }
.modal-head { padding:20px 24px; border-bottom:1px solid var(--panel-border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.modal-head h2 { margin:0; font-size:18px; display:flex; align-items:center; gap:10px; }
.modal-close { background:rgba(255,255,255,0.06); border:none; color:var(--text-muted); width:36px; height:36px; border-radius:10px; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; }
.modal-close:hover { background:rgba(239,68,68,0.15); color:var(--danger); }
.modal-form { padding:24px; display:grid; gap:14px; background:#0f172a; overflow-y:auto; }
.modal-form label { display:grid; gap:6px; font-size:13px; font-weight:500; color:var(--text-muted); }
.modal-form input, .modal-form select { color:var(--text-main); }
.barcode-panel { display:grid; gap:10px; padding:12px; background:rgba(0,0,0,.18); border:1px solid var(--panel-border); border-radius:12px; }
.barcode-entry { display:grid; grid-template-columns:1fr 44px; gap:10px; align-items:center; }
.icon-square { width:44px; height:44px; padding:0; border-radius:10px; }
.barcode-chips { display:flex; flex-wrap:wrap; gap:8px; min-height:24px; }
.barcode-chip { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:6px 8px 6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--panel-border); color:var(--text-main); font-size:12px; }
.barcode-chip button { width:20px; height:20px; border-radius:999px; background:rgba(239,68,68,.15); color:var(--danger); display:inline-flex; align-items:center; justify-content:center; }
.product-subline { display:block; margin-top:4px; color:var(--text-muted); font-size:12px; line-height:1.35; word-break:break-word; }
.product-subline .sync-pill { display:inline-flex; align-items:center; margin-left:6px; padding:2px 6px; border-radius:999px; background:rgba(255,212,0,.12); color:var(--yellow); font-size:11px; }
.purchase-modal { max-width:980px; }
.purchase-entry-grid { display:grid; grid-template-columns:minmax(220px,1fr) 90px 120px 120px 44px; gap:10px; align-items:end; }
.purchase-entry-grid label { min-width:0; }
.purchase-total-strip { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:12px; background:rgba(255,212,0,.08); border:1px solid rgba(255,212,0,.22); }
.purchase-total-strip span { color:var(--text-muted); font-weight:700; }
.purchase-total-strip strong { color:var(--yellow); font-size:24px; font-weight:800; }

/* === TOAST NOTIFICATIONS === */
.toast { padding:14px 22px; border-radius:12px; font-weight:700; font-size:14px; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.4); animation:slideIn .25s ease; max-width:320px; }
.toast.success { background:#10b981; }
.toast.error { background:#ef4444; }
@keyframes slideIn { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

/* ERREUR EN HAUT */
#topError { position:fixed; top:0; left:0; right:0; background:#ef4444; color:#fff; text-align:center; padding:12px; font-weight:700; z-index:2000; font-size:14px; display:none; }

@media (max-width:900px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .modal-box { max-width:100%; }
  .purchase-entry-grid { grid-template-columns:1fr 1fr; }
  .purchase-entry-grid .icon-square { width:100%; }
}
@media (max-width:600px) {
  .stats-row { grid-template-columns:1fr; }
}


/* FILTER BAR */
.filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 16px; margin-bottom:14px; border-radius:14px; }
.filter-bar input, .filter-bar select { height:38px; }
.chk-filter { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); cursor:pointer; white-space:nowrap; }
.chk-filter input[type=checkbox] { width:16px; height:16px; accent-color:var(--yellow); }

/* FINANCE */
.finance-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fin-panel { padding:24px; border-radius:16px; }
.fin-panel h2 { margin:0 0 18px; font-size:16px; }
.fin-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:14px; }
.fin-row.featured { border:none; padding-top:16px; margin-top:8px; }
.fin-row.sep { border-top:2px solid rgba(255,255,255,.08); margin-top:4px; }
.fin-row span { color:var(--text-muted); }

/* MODAL BOX */
.modal { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px; }
.modal-box { width:100%;max-width:580px;border-radius:20px;overflow:hidden; max-height:90vh; display:flex; flex-direction:column; }
.modal-head { padding:18px 22px;border-bottom:1px solid var(--panel-border);display:flex;justify-content:space-between;align-items:center; flex-shrink:0; }
.modal-head h2 { margin:0;font-size:17px;display:flex;align-items:center;gap:8px; }
.modal-close { background:rgba(255,255,255,.06);border:none;color:var(--text-muted);width:34px;height:34px;border-radius:9px;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s; }
.modal-close:hover { background:rgba(239,68,68,.15);color:var(--danger); }
.modal-form { padding:22px;display:grid;gap:13px;background:#0f172a; overflow-y:auto; }
.modal-form label { display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--text-muted); }

/* TOAST */
.toast-item { padding:12px 20px;border-radius:10px;font-weight:700;font-size:14px;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4);pointer-events:auto; }

/* STATS */
.stats-row { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px; }
.stat-card { display:flex;align-items:center;gap:14px;padding:18px;border-radius:14px; }
.stat-card.featured { background:rgba(255,212,0,.06);border-color:rgba(255,212,0,.2); }
.stat-icon { font-size:32px;color:var(--text-muted);flex-shrink:0; }
.stat-icon.success { color:var(--success); }
.stat-icon.danger { color:var(--danger); }
.stat-body span { display:block;font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px; }
.stat-body strong { display:block;font-size:19px;font-weight:800;line-height:1;margin-bottom:3px; }
.stat-body small { display:block;font-size:11px; }

@media(max-width:900px){.stats-row{grid-template-columns:1fr 1fr;}.finance-grid{grid-template-columns:1fr;}}
@media(max-width:600px){.stats-row{grid-template-columns:1fr;}}

/* === BNSoft Web UI refresh v27 === */
.view-container { padding:20px 24px; }
.section-title { border-radius:14px; padding:18px 20px; }
.page-head { margin-bottom:20px; }
.delphi-grid { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-bottom:20px; }
.delphi-btn { border-radius:14px; padding:20px 14px; }
.filter-bar { align-items:flex-end; gap:10px; }
.filter-bar > input:not([type=checkbox]), .filter-bar > select { width:auto; min-width:150px; flex:0 1 200px; }
.filter-bar > input[id$="Search"], .filter-bar > input[id*="Search"] { min-width:240px; flex:1 1 320px; }
.filter-bar > input[type=date] { min-width:140px; flex:0 0 150px; }
.filter-bar > .primary-btn { flex:0 0 auto; }
.table-card { border-radius:14px; }
.table-scroll { overflow:auto; }
.table-scroll table { min-width:860px; }
.table-scroll.compact { max-height:300px; }
th, td { padding:13px 18px; }
.panel-title-row { padding:14px 18px; border-bottom:1px solid var(--panel-border); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.panel-title-row h2 { margin:0; font-size:16px; }
.panel-value { color:var(--yellow); font-weight:800; }
.ghost-btn.sm { height:32px; padding:0 10px; border-radius:8px; font-size:12px; }
.dashboard-lists { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:20px; }
.purchase-workspace { display:grid; gap:14px; }
.purchase-list-scroll { max-height:42vh; }
.purchase-detail-panel { min-height:190px; }
.purchase-detail-scroll { max-height:230px; }
.purchase-row { cursor:pointer; }
.purchase-row.selected, tbody tr.selected { background:rgba(255,212,0,.08); }
.purchase-row.selected:hover { background:rgba(255,212,0,.1); }
.sync-pill { display:inline-flex; align-items:center; width:max-content; padding:2px 7px; border-radius:999px; background:rgba(255,212,0,.12); color:var(--yellow); font-size:11px; line-height:1.3; }
.modal-box.purchase-modal { width:min(1120px,calc(100vw - 32px)); max-width:min(1120px,calc(100vw - 32px)); }
.purchase-modal .modal-form { gap:16px; overflow:auto; }
.purchase-modal .col-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.purchase-workspace-modal { display:grid; grid-template-columns:1.1fr 1fr; gap:20px; align-items:start; }
@media(max-width:900px){
  .purchase-workspace-modal { grid-template-columns:1fr; gap:16px; }
}
.purchase-entry-grid { grid-template-columns:minmax(260px,1.6fr) 90px 130px 130px 44px; }
.purchase-cart-table { border:1px solid var(--panel-border); border-radius:12px; overflow:hidden; }
.purchase-cart-table .table-scroll { max-height:260px; }
.purchase-total-strip { min-height:58px; }
@media(max-width:1100px){
  .dashboard-lists { grid-template-columns:1fr; }
  .purchase-entry-grid { grid-template-columns:1fr 1fr; }
  .purchase-entry-grid .icon-square { width:100%; }
}
@media(max-width:720px){
  .filter-bar > input:not([type=checkbox]), .filter-bar > select, .filter-bar > input[id$="Search"], .filter-bar > input[id*="Search"], .filter-bar > input[type=date] { flex:1 1 100%; width:100%; min-width:0; }
  .purchase-modal .col-2 { grid-template-columns:1fr; }
  .modal { align-items:flex-start; }
  .modal-box.purchase-modal { width:100%; max-width:100%; }
}

/* === Custom CSS for Compact Purchase Header & Search Popup === */
.purchase-metadata-compact {
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.purchase-metadata-compact .meta-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.purchase-metadata-compact .meta-row.sec {
  grid-template-columns: repeat(4, 1fr);
}
.purchase-metadata-compact .meta-spacer {
  grid-column: span 2;
}
.purchase-metadata-compact label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.purchase-metadata-compact input, 
.purchase-metadata-compact select {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  background: var(--input-bg);
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  margin: 0;
}
.purchase-metadata-compact input:focus, 
.purchase-metadata-compact select:focus {
  border-color: var(--yellow);
}
.purchase-metadata-compact .paid-input {
  font-weight: 700;
  color: var(--success) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.purchase-metadata-compact .remise-input {
  border-color: rgba(239, 68, 68, 0.2) !important;
}

@media (max-width: 720px) {
  .purchase-metadata-compact .meta-row, 
  .purchase-metadata-compact .meta-row.sec {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .purchase-metadata-compact .meta-spacer {
    display: none;
  }
}

/* === Mobile purchase and POS polish v4.0.4 === */
@media (max-width:760px) {
  #purchaseModal.modal {
    align-items:flex-start !important;
    justify-content:center !important;
    padding:8px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  #purchaseModal .purchase-modal {
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:none !important;
    min-height:0 !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }

  #purchaseModal .purchase-modal > div:first-child {
    padding:10px 12px !important;
    gap:8px !important;
    align-items:center !important;
  }

  #purchaseModal .purchase-modal > div:first-child > span {
    max-width:145px !important;
    font-size:12px !important;
    line-height:1.15 !important;
    letter-spacing:.4px !important;
  }

  #purchaseModal .purchase-modal > div:first-child > div {
    gap:8px !important;
    min-width:0 !important;
  }

  #purchaseModal #purchaseTotalDisplay {
    font-size:23px !important;
    line-height:1 !important;
    letter-spacing:.4px !important;
    white-space:nowrap !important;
  }

  #purchaseModal .modal-close {
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
  }

  #purchaseForm {
    padding:12px !important;
    overflow:visible !important;
  }

  #purchaseForm > div {
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
  }

  #purchaseForm > div > div {
    width:100% !important;
    min-width:0 !important;
  }

  #purchaseForm > div > div:first-child {
    border-right:0 !important;
    border-bottom:1px solid var(--panel-border) !important;
    padding-right:0 !important;
    padding-bottom:12px !important;
  }

  #modalProductSearch {
    height:42px !important;
    border-radius:12px !important;
    font-size:13px !important;
  }

  #modalCatalogRows {
    max-height:285px !important;
    overflow-y:auto !important;
    margin-top:0 !important;
  }

  #purchaseForm .cat-item {
    min-height:40px !important;
    padding:9px 10px !important;
  }

  #purchaseForm > div > div:nth-child(2) {
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  #purchaseForm > div > div:nth-child(2) > div:nth-of-type(1),
  #purchaseForm > div > div:nth-child(2) > div:nth-of-type(2),
  #purchaseForm > div > div:nth-child(2) > div:nth-of-type(4) {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  #purchaseForm select,
  #purchaseForm input {
    min-width:0 !important;
    width:100% !important;
    height:40px !important;
    font-size:13px !important;
    border-radius:12px !important;
  }

  #purchaseForm .purchase-cart-table {
    width:100% !important;
    overflow:hidden !important;
    border-radius:14px !important;
  }

  #purchaseForm .purchase-cart-table > div {
    max-height:205px !important;
    overflow:auto !important;
  }

  #purchaseForm .purchase-cart-table table {
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
    font-size:11px !important;
  }

  #purchaseForm .purchase-cart-table th,
  #purchaseForm .purchase-cart-table td {
    padding:8px 6px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  #purchaseForm .purchase-cart-table th:nth-child(1),
  #purchaseForm .purchase-cart-table td:nth-child(1) {
    width:auto !important;
  }

  #purchaseForm .purchase-cart-table th:nth-child(2),
  #purchaseForm .purchase-cart-table td:nth-child(2) {
    width:66px !important;
    text-align:center !important;
  }

  #purchaseForm .purchase-cart-table th:nth-child(3),
  #purchaseForm .purchase-cart-table td:nth-child(3) {
    width:86px !important;
  }

  #purchaseForm .purchase-cart-table th:nth-child(4),
  #purchaseForm .purchase-cart-table td:nth-child(4),
  #purchaseForm .purchase-cart-table th:nth-child(5),
  #purchaseForm .purchase-cart-table td:nth-child(5) {
    display:none !important;
  }

  #purchaseForm .purchase-line-qty,
  #purchaseForm .purchase-line-unit,
  #purchaseForm .purchase-line-sale {
    width:100% !important;
    height:34px !important;
    padding:0 6px !important;
    font-size:12px !important;
  }

  #purchaseForm > div > div:nth-child(2) > div:nth-of-type(4) {
    padding-top:12px !important;
    margin-top:0 !important;
  }

  #purchaseForm > div > div:nth-child(2) > div:nth-of-type(4) > div {
    gap:9px !important;
  }

  #purchaseForm label {
    min-width:0 !important;
  }

  #purchaseForm label[style*="flex-direction:row"] {
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
  }

  #purchaseForm label[style*="flex-direction:row"] input[type="checkbox"] {
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
  }

  #btnPurchaseValider {
    height:50px !important;
    border-radius:14px !important;
    font-size:15px !important;
  }

  #purchaseMessage {
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .pos-view .pos-products {
    padding:12px !important;
    border-radius:18px !important;
  }

  .pos-view .pos-filters {
    gap:8px !important;
    margin-bottom:12px !important;
  }

  .pos-view .pos-filters input,
  .pos-view .pos-filters select {
    height:44px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }

  .pos-view .pos-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .pos-view .product-card {
    grid-template-columns:46px 1fr !important;
    min-height:108px !important;
    padding:10px !important;
    border-radius:16px !important;
    align-items:center !important;
  }

  .pos-view .pc-media {
    width:42px !important;
    height:56px !important;
  }

  .pos-view .pc-body strong,
  .pos-view .pc-body small {
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .pos-view .pc-price {
    font-size:15px !important;
    line-height:1.1 !important;
  }

  .pos-view .pos-cart {
    position:static !important;
    transform:none !important;
    width:100% !important;
    max-height:none !important;
    margin-top:12px !important;
    border-radius:18px !important;
  }

  .pos-view .cart-items {
    min-height:68px !important;
    max-height:150px !important;
  }

  .pos-view .cart-footer > div[style*="grid-template-columns"] {
    grid-template-columns:1fr !important;
  }

  .pos-view .client-selector,
  .pos-view .cart-footer label {
    min-width:0 !important;
  }
}

@media (max-width:420px) {
  #purchaseModal #purchaseTotalDisplay {
    font-size:20px !important;
  }

  #purchaseModal .purchase-modal > div:first-child > span {
    max-width:118px !important;
    font-size:11px !important;
  }

  #modalCatalogRows {
    max-height:240px !important;
  }

  .pos-view .pos-grid {
    gap:8px !important;
  }

  .pos-view .product-card {
    grid-template-columns:40px 1fr !important;
    min-height:100px !important;
    padding:9px !important;
  }

  .pos-view .pc-media {
    width:38px !important;
    height:52px !important;
  }
}

/* === PURCHASE MODAL 2-COLUMN LAYOUT === */
.purchase-modal-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 720px) {
  .purchase-modal-body {
    grid-template-columns: 1fr;
  }
  .modal-box.purchase-modal {
    width: 100%;
    max-width: 100%;
  }
}

/* Catalog rows hover */
.catalog-row { transition: background 0.15s; }
.catalog-row:hover { background: rgba(255,212,0,0.07) !important; }

/* Cart selected row */
.cart-item-row { transition: background 0.1s; }
.cart-item-row.selected { background: rgba(255,212,0,0.1); }

/* Glowing purchase total display */
#purchaseTotalDisplay {
  color: #00ff41;
  font-size: 32px;
  font-family: 'Courier New', monospace;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(0,255,65,0.6), 0 0 20px rgba(0,255,65,0.3);
  letter-spacing: 2px;
  transition: text-shadow 0.3s ease;
}
#purchaseTotalDisplay:not(:empty) {
  animation: totalPulse 0.3s ease;
}
@keyframes totalPulse {
  0% { text-shadow: 0 0 8px rgba(0,255,65,0.6), 0 0 20px rgba(0,255,65,0.3); }
  50% { text-shadow: 0 0 16px rgba(0,255,65,0.9), 0 0 40px rgba(0,255,65,0.5); }
  100% { text-shadow: 0 0 8px rgba(0,255,65,0.6), 0 0 20px rgba(0,255,65,0.3); }
}

/* === Mobile UX refresh v4.0.2 === */
body {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,212,0,.075), transparent 420px),
    radial-gradient(circle at 88% 4%, rgba(16,185,129,.055), transparent 360px),
    var(--bg-color);
}
.topbar {
  min-height:72px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(24,31,49,.94),rgba(12,18,30,.9));
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.page-head h1,
.section-title h1 { letter-spacing:0; }
.pos-products,
.pos-cart,
.table-card,
.stat-card,
.delphi-btn {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 18px 42px rgba(0,0,0,.14);
}
.pos-grid { gap:12px; }
.product-card {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:104px;
  padding:12px;
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(15,23,42,.96),rgba(8,13,23,.94));
  border:1px solid rgba(148,163,184,.14);
}
.product-card:hover {
  border-color:rgba(255,212,0,.38);
  transform:translateY(-1px);
}
.pc-media {
  width:54px;
  height:68px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,212,0,.35), transparent 28px),
    linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,212,0,.22);
  color:var(--yellow);
  font-weight:900;
  letter-spacing:.4px;
  flex-shrink:0;
}
.pc-media span {
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.pc-body { min-width:0; }
.pc-name {
  font-size:14px;
  line-height:1.25;
  min-height:auto;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pc-stock { margin-top:5px; font-size:12px; }
.pc-price { margin-top:7px; font-size:17px; line-height:1; }
.cart-header { cursor:default; }

@media (max-width:760px) {
  html, body { min-width:0; overflow-x:hidden; }
  .app,
  .workspace {
    height:auto;
    min-height:100vh;
    overflow:visible;
  }
  .view-container {
    padding:16px 12px 108px;
    overflow:visible;
  }
  .topbar {
    position:sticky;
    top:8px;
    z-index:80;
    margin:10px 10px 0;
    min-height:68px;
    padding:10px 12px;
    border-radius:20px;
    gap:10px;
  }
  .top-logo {
    width:44px;
    height:44px;
    object-fit:contain;
  }
  #userGreeting {
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px !important;
  }
  .top-actions,
  .topbar > div:last-child { gap:8px; }
  .topbar .primary-btn {
    min-width:0;
    height:44px;
    padding:0 14px;
    border-radius:15px;
    font-size:0;
  }
  .topbar .primary-btn i { font-size:18px; }
  .topbar .primary-btn::after {
    content:"Actualiser";
    font-size:14px;
    margin-left:6px;
  }
  .page-head { margin:18px 0 14px; }
  .page-head h1,
  .section-title h1 {
    font-size:27px;
    line-height:1.08;
  }
  .section-title {
    padding:16px;
    border-radius:18px;
    margin-bottom:12px;
  }
  .section-title .primary-btn {
    height:42px;
    border-radius:14px;
    padding:0 14px;
  }
  .stats-row {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
    margin-bottom:14px;
  }
  .stat-card {
    min-height:112px;
    padding:14px;
    border-radius:18px;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .stat-icon { font-size:28px; }
  .stat-body span {
    font-size:10px;
    margin-bottom:5px;
    letter-spacing:.35px;
  }
  .stat-body strong {
    font-size:19px;
    line-height:1.08;
  }
  .stat-body small { font-size:11px; }
  .delphi-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:16px;
  }
  .delphi-btn {
    min-height:124px;
    padding:16px 10px;
    border-radius:18px;
  }
  .d-icon { font-size:34px; }
  .d-text {
    font-size:13px;
    line-height:1.25;
  }
  .dashboard-lists {
    grid-template-columns:1fr;
    gap:12px;
  }
  .filter-bar {
    padding:10px;
    border-radius:18px;
    gap:8px;
  }
  .filter-bar .primary-btn { width:100%; }
  .pos-layout {
    display:block;
    height:auto;
    padding-bottom:118px;
  }
  .pos-products {
    padding:12px;
    border-radius:22px;
    overflow:visible;
    background:
      linear-gradient(180deg,rgba(20,28,45,.92),rgba(14,20,34,.9));
  }
  .pos-filters {
    position:sticky;
    top:86px;
    z-index:70;
    grid-template-columns:1fr;
    gap:8px;
    padding:8px 0 12px;
    margin-bottom:8px;
    background:linear-gradient(180deg,rgba(11,15,25,.98),rgba(11,15,25,.88));
    backdrop-filter:blur(10px);
  }
  .pos-filters input,
  .pos-filters select {
    height:40px;
    border-radius:12px;
  }
  .pos-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    overflow:visible;
    padding:0;
  }
  .product-card {
    min-height:120px;
    grid-template-columns:50px minmax(0,1fr);
    gap:9px;
    padding:10px;
    border-radius:17px;
  }
  .pc-media {
    width:50px;
    height:66px;
    border-radius:13px;
  }
  .pc-media span {
    width:32px;
    height:32px;
    font-size:13px;
  }
  .pc-name { font-size:12.5px; }
  .pc-stock { font-size:10.5px; }
  .pc-price { font-size:15.5px; }
  .pos-cart {
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:140;
    max-height:74vh;
    border-radius:22px;
    overflow:hidden;
    background:linear-gradient(160deg,rgba(17,24,39,.98),rgba(10,15,26,.98));
    box-shadow:0 22px 70px rgba(0,0,0,.48), 0 0 0 1px rgba(255,212,0,.08);
  }
  .pos-cart:not(.mobile-expanded) .cart-items,
  .pos-cart:not(.mobile-expanded) .client-selector,
  .pos-cart:not(.mobile-expanded) .cart-footer label,
  .pos-cart:not(.mobile-expanded) #posPaidAmountContainer {
    display:none !important;
  }
  .pos-cart:not(.mobile-expanded) .cart-header {
    padding:10px 14px 0;
    cursor:pointer;
  }
  .pos-cart:not(.mobile-expanded) .cart-footer {
    padding:10px 14px 12px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:10px;
  }
  .pos-cart:not(.mobile-expanded) .summary-line {
    margin:0;
    padding:0;
    border:0;
    display:grid;
    gap:1px;
  }
  .pos-cart:not(.mobile-expanded) .summary-line span {
    font-size:12px;
    color:var(--text-muted);
  }
  .pos-cart:not(.mobile-expanded) .big-total {
    font-size:19px;
    line-height:1;
  }
  .pos-cart:not(.mobile-expanded) .mega-btn {
    width:auto;
    height:44px;
    min-width:142px;
    padding:0 14px;
    border-radius:14px;
    font-size:12px;
    white-space:nowrap;
  }
  .pos-cart.mobile-expanded {
    top:74px;
    bottom:10px;
    max-height:none;
    display:flex;
    flex-direction:column;
  }
  .pos-cart.mobile-expanded .cart-items {
    max-height:34vh;
    overflow:auto;
  }
  .pos-cart.mobile-expanded .cart-footer {
    overflow:auto;
  }
  .table-card {
    border-radius:18px;
    overflow:hidden;
  }
  .table-scroll.tall {
    max-height:none;
  }
  th, td {
    padding:12px 14px;
  }
}

@media (max-width:430px) {
  .stats-row { grid-template-columns:1fr !important; }
  .stat-card {
    min-height:92px;
    flex-direction:row;
    align-items:center;
  }
  .delphi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .delphi-btn { min-height:112px; }
  .pos-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #userGreeting { max-width:118px; }
  .topbar .primary-btn::after { content:"Actu"; }
}

@media (max-width:360px) {
  .pos-grid { grid-template-columns:1fr; }
  .delphi-grid { grid-template-columns:1fr; }
}

/* === Stable mobile reset and theme v4.0.3 === */
:root {
  --yellow:#ffcc00;
  --yellow-hover:#f0bd00;
  --bg-color:#05080d;
  --panel-bg:rgba(17,22,34,.94);
  --panel-border:rgba(148,163,184,.16);
  --text-main:#f8fafc;
  --text-muted:#9aa7ba;
  --input-bg:rgba(7,11,19,.72);
  --success:#14c98b;
}
body {
  background:
    radial-gradient(circle at 18% -8%, rgba(255,204,0,.11), transparent 330px),
    radial-gradient(circle at 92% 8%, rgba(20,201,139,.075), transparent 360px),
    linear-gradient(180deg,#070b12 0%,#05080d 62%,#030509 100%);
}
.glass-panel {
  background:linear-gradient(160deg,rgba(21,27,41,.96),rgba(13,18,29,.94));
  border-color:var(--panel-border);
}
#refreshBtn { display:none !important; }
.topbar {
  justify-content:flex-start;
  gap:14px;
  border-color:rgba(148,163,184,.18);
}
.topbar > div {
  min-width:0;
}
.topbar #menuBtn + div {
  margin-inline:auto;
}
.primary-btn {
  border-radius:14px;
}
.primary-btn:hover {
  transform:none;
}
.product-card {
  transform:none;
}
.product-card:hover {
  transform:none;
}

@media (max-width:760px) {
  .view-container {
    padding:16px 10px 22px;
  }
  .topbar {
    min-height:64px;
    margin:10px 8px 0;
    padding:10px 14px;
    border-radius:18px;
  }
  .topbar #menuBtn {
    flex:0 0 36px;
  }
  .topbar #menuBtn + div {
    margin:0 auto;
    gap:8px !important;
  }
  .top-logo {
    width:42px;
    height:42px;
  }
  #userGreeting {
    max-width:170px;
    font-size:12px !important;
  }
  .section-title,
  .page-head {
    margin-left:0;
    margin-right:0;
  }
  .section-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .section-title .title-left {
    min-width:0;
  }
  .section-title .primary-btn {
    flex:0 0 auto;
  }
  .pos-layout {
    display:flex !important;
    flex-direction:column;
    gap:12px;
    height:auto !important;
    padding-bottom:0 !important;
  }
  .pos-products {
    order:1;
    min-height:0;
  }
  .pos-cart,
  .pos-cart.mobile-expanded {
    order:2;
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin-top:0;
    border-radius:20px;
    overflow:hidden;
  }
  .pos-cart:not(.mobile-expanded) .cart-header,
  .pos-cart .cart-header {
    padding:12px 14px;
    cursor:default;
  }
  .pos-cart:not(.mobile-expanded) .cart-items,
  .pos-cart .cart-items {
    display:flex !important;
    min-height:86px;
    max-height:180px;
    overflow:auto;
    padding:12px 14px;
  }
  .pos-cart:not(.mobile-expanded) .client-selector,
  .pos-cart .client-selector {
    display:flex !important;
  }
  .pos-cart:not(.mobile-expanded) .cart-footer,
  .pos-cart .cart-footer {
    display:flex !important;
    flex-direction:column !important;
    gap:10px;
    padding:12px 14px 14px;
  }
  .pos-cart:not(.mobile-expanded) .cart-footer label,
  .pos-cart .cart-footer label {
    display:grid !important;
  }
  .pos-cart:not(.mobile-expanded) #posPaidAmountContainer.hidden,
  .pos-cart #posPaidAmountContainer.hidden {
    display:none !important;
  }
  .pos-cart:not(.mobile-expanded) .summary-line,
  .pos-cart .summary-line {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:4px;
  }
  .pos-cart:not(.mobile-expanded) .big-total,
  .pos-cart .big-total {
    font-size:24px;
  }
  .pos-cart:not(.mobile-expanded) .mega-btn,
  .pos-cart .mega-btn {
    width:100%;
    height:50px;
    min-width:0;
    border-radius:15px;
    font-size:13px;
  }
  .cart-item {
    gap:10px;
  }
  .ci-info {
    min-width:0;
  }
  .ci-info strong,
  .ci-info small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .pos-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .product-card {
    min-height:112px;
  }
  .pc-media {
    width:44px;
    height:58px;
  }
  .pc-media span {
    width:28px;
    height:28px;
    font-size:12px;
  }
  .settings-grid {
    grid-template-columns:1fr !important;
    gap:12px;
  }
  .settings-panel {
    padding:18px !important;
    overflow:hidden;
  }
  .form-grid,
  .modal-form {
    min-width:0;
  }
  input,
  select,
  .primary-btn,
  .ghost-btn {
    min-width:0;
    max-width:100%;
  }
  .primary-btn.full {
    width:100%;
    white-space:normal;
    text-align:center;
  }
}

@media (max-width:760px) {
  .page[data-page-view="products"] .table-scroll,
  .page[data-page-view="sales"] .table-scroll,
  .page[data-page-view="purchases"] .table-scroll,
  .page[data-page-view="clients"] .table-scroll,
  .page[data-page-view="suppliers"] .table-scroll,
  .page[data-page-view="logs"] .table-scroll {
    overflow:visible;
    max-height:none;
  }
  .page[data-page-view="products"] table,
  .page[data-page-view="sales"] table,
  .page[data-page-view="purchases"] table,
  .page[data-page-view="clients"] table,
  .page[data-page-view="suppliers"] table,
  .page[data-page-view="logs"] table {
    min-width:0 !important;
    width:100%;
  }
  .page[data-page-view="products"] thead,
  .page[data-page-view="sales"] thead,
  .page[data-page-view="purchases"] thead,
  .page[data-page-view="clients"] thead,
  .page[data-page-view="suppliers"] thead,
  .page[data-page-view="logs"] thead {
    display:none;
  }
  .page[data-page-view="products"] tbody,
  .page[data-page-view="sales"] tbody,
  .page[data-page-view="purchases"] tbody,
  .page[data-page-view="clients"] tbody,
  .page[data-page-view="suppliers"] tbody,
  .page[data-page-view="logs"] tbody {
    display:grid;
    gap:10px;
  }
  .page[data-page-view="products"] tbody tr,
  .page[data-page-view="sales"] tbody tr,
  .page[data-page-view="purchases"] tbody tr,
  .page[data-page-view="clients"] tbody tr,
  .page[data-page-view="suppliers"] tbody tr,
  .page[data-page-view="logs"] tbody tr {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
    padding:14px;
    border:1px solid var(--panel-border);
    border-radius:16px;
    background:rgba(7,11,19,.48);
  }
  .page[data-page-view="products"] td,
  .page[data-page-view="sales"] td,
  .page[data-page-view="purchases"] td,
  .page[data-page-view="clients"] td,
  .page[data-page-view="suppliers"] td,
  .page[data-page-view="logs"] td {
    display:block;
    border:0;
    padding:0;
    min-width:0;
    font-size:13px;
    word-break:break-word;
  }
  .page[data-page-view="products"] td::before,
  .page[data-page-view="sales"] td::before,
  .page[data-page-view="purchases"] td::before,
  .page[data-page-view="clients"] td::before,
  .page[data-page-view="suppliers"] td::before,
  .page[data-page-view="logs"] td::before {
    display:block;
    margin-bottom:3px;
    color:var(--text-muted);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.35px;
  }
  .page[data-page-view="products"] td:nth-child(1)::before { content:"Produit"; }
  .page[data-page-view="products"] td:nth-child(2)::before { content:"Cat."; }
  .page[data-page-view="products"] td:nth-child(3)::before { content:"Stock"; }
  .page[data-page-view="products"] td:nth-child(4)::before { content:"Achat"; }
  .page[data-page-view="products"] td:nth-child(5)::before { content:"Vente"; }
  .page[data-page-view="products"] td:nth-child(6)::before { content:"Valeur"; }
  .page[data-page-view="sales"] td:nth-child(1)::before { content:"Ticket"; }
  .page[data-page-view="sales"] td:nth-child(2)::before { content:"Client"; }
  .page[data-page-view="sales"] td:nth-child(3)::before { content:"Vendeur"; }
  .page[data-page-view="sales"] td:nth-child(4)::before { content:"Total"; }
  .page[data-page-view="sales"] td:nth-child(5)::before { content:"Paiement"; }
  .page[data-page-view="sales"] td:nth-child(6)::before { content:"Date"; }
  .page[data-page-view="sales"] td:nth-child(7)::before { content:"Detail"; }
  .page[data-page-view="purchases"] td:nth-child(1)::before { content:"Numero"; }
  .page[data-page-view="purchases"] td:nth-child(2)::before { content:"Type"; }
  .page[data-page-view="purchases"] td:nth-child(3)::before { content:"Fournisseur"; }
  .page[data-page-view="purchases"] td:nth-child(4)::before { content:"Total"; }
  .page[data-page-view="purchases"] td:nth-child(5)::before { content:"Paiement"; }
  .page[data-page-view="purchases"] td:nth-child(6)::before { content:"Date"; }
  .page[data-page-view="clients"] td:nth-child(1)::before,
  .page[data-page-view="suppliers"] td:nth-child(1)::before { content:"Nom"; }
  .page[data-page-view="clients"] td:nth-child(2)::before,
  .page[data-page-view="suppliers"] td:nth-child(2)::before { content:"Telephone"; }
  .page[data-page-view="clients"] td:nth-child(3)::before,
  .page[data-page-view="suppliers"] td:nth-child(3)::before { content:"Solde"; }
  .page[data-page-view="clients"] td:nth-child(4)::before,
  .page[data-page-view="suppliers"] td:nth-child(4)::before { content:"Actions"; }
  td[colspan] {
    grid-column:1/-1;
    text-align:center !important;
  }
  td[colspan]::before {
    content:"" !important;
    display:none !important;
  }
}

/* === Header notifications v4.0.5 === */
.topbar {
  position:relative;
  overflow:visible !important;
  justify-content:space-between !important;
  gap:14px !important;
}
.topbar-left {
  display:flex;
  align-items:center;
  min-width:0;
  margin-right:auto;
}
.topbar #menuBtn + .topbar-left {
  margin:0 auto 0 0 !important;
  gap:0 !important;
}
.topbar-greeting {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
#userGreeting {
  color:var(--text-main) !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.15;
  max-width:420px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#headerClock {
  color:var(--text-muted);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-transform:capitalize;
  white-space:nowrap;
}
.topbar-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
  margin-left:auto;
}
.lang-switch {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--panel-border);
  border-radius:14px;
  background:rgba(15,23,42,.74);
}
.lang-btn {
  height:34px;
  min-width:42px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text-muted);
  font-weight:800;
  cursor:pointer;
}
.lang-btn.active {
  background:var(--yellow);
  color:#111827;
}
.top-logo-right {
  width:46px !important;
  height:46px !important;
  object-fit:contain;
  flex:0 0 46px;
}
.notif-btn {
  position:relative;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--panel-border);
  border-radius:14px;
  background:rgba(15,23,42,.82);
  color:var(--text-main);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.notif-btn:hover {
  transform:translateY(-1px);
  border-color:rgba(255,212,0,.45);
  background:rgba(255,212,0,.08);
}
.notif-btn i {
  font-size:22px;
  color:var(--yellow);
}
.notif-badge {
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:21px;
  height:21px;
  padding:0 5px;
  display:none;
  align-items:center;
  justify-content:center;
  border:2px solid var(--bg-color);
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1;
}
.notif-badge.is-visible {
  display:flex;
}
.notif-panel {
  position:absolute;
  top:calc(100% + 10px);
  right:12px;
  z-index:500;
  width:min(560px, calc(100vw - 32px));
  max-height:min(620px, calc(100vh - 116px));
  overflow:hidden;
  border:1px solid rgba(148,163,184,.18);
  border-radius:20px;
  background:rgba(8,13,24,.98);
  box-shadow:0 24px 70px rgba(0,0,0,.52);
}
.notif-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-bottom:1px solid var(--panel-border);
}
.notif-head strong {
  display:block;
  font-size:16px;
}
.notif-head small {
  display:block;
  margin-top:3px;
  color:var(--text-muted);
  font-size:12px;
}
.notif-head .ghost-btn {
  height:34px;
  padding:0 12px;
  border-radius:10px;
  font-size:12px;
}
.notif-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:12px 14px;
  border-bottom:1px solid var(--panel-border);
}
.notif-stats div {
  display:grid;
  gap:4px;
  padding:10px;
  border:1px solid var(--panel-border);
  border-radius:12px;
  background:rgba(15,23,42,.56);
}
.notif-stats span {
  color:var(--text-muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.notif-stats strong {
  font-size:20px;
  line-height:1;
}
.notif-list {
  display:grid;
  gap:8px;
  max-height:410px;
  overflow:auto;
  padding:12px 14px 16px;
}
.notif-card {
  width:100%;
  display:grid;
  grid-template-columns:10px 1fr;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  border:1px solid var(--panel-border);
  border-radius:14px;
  background:rgba(15,23,42,.6);
  color:var(--text-main);
  text-align:left;
}
.notif-card:hover {
  border-color:rgba(255,212,0,.34);
  background:rgba(15,23,42,.86);
}
.notif-card.is-read {
  opacity:.62;
}
.notif-card.is-read .notif-dot {
  background:#64748b !important;
}
.notif-dot {
  width:9px;
  height:9px;
  margin-top:5px;
  border-radius:999px;
  background:var(--yellow);
}
.notif-card.danger .notif-dot { background:var(--danger); }
.notif-card.low .notif-dot { background:#f59e0b; }
.notif-card.expired .notif-dot { background:#a855f7; }
.notif-card.soon .notif-dot { background:#38bdf8; }
.notif-card strong {
  display:block;
  margin-bottom:4px;
  font-size:13px;
}
.notif-card small {
  display:block;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.35;
}
.notif-empty {
  display:grid;
  justify-items:center;
  gap:6px;
  padding:28px 12px;
  color:var(--text-muted);
  text-align:center;
}
.notif-empty i {
  color:var(--success);
  font-size:34px;
}
.notif-empty strong {
  color:var(--text-main);
}
@media (max-width:760px) {
  .topbar {
    min-height:66px !important;
    margin:10px 8px 0 !important;
    padding:10px 12px !important;
    border-radius:18px !important;
  }
  .topbar-left {
    flex:1 1 auto;
  }
  .topbar #menuBtn + .topbar-left {
    margin:0 !important;
  }
  #userGreeting {
    max-width:190px !important;
    font-size:13px !important;
  }
  #headerClock {
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:10.5px;
  }
  .topbar-actions {
    gap:7px;
  }
  .lang-switch {
    padding:3px;
    border-radius:12px;
  }
  .lang-btn {
    height:30px;
    min-width:36px;
    font-size:12px;
  }
  .notif-btn {
    width:38px;
    height:38px;
    border-radius:12px;
  }
  .notif-btn i {
    font-size:20px;
  }
  .top-logo-right {
    width:38px !important;
    height:38px !important;
    flex-basis:38px;
  }
  .notif-panel {
    position:fixed;
    top:82px;
    left:10px;
    right:10px;
    width:auto;
    max-height:calc(100vh - 104px);
    border-radius:18px;
  }
  .notif-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .notif-list {
    max-height:calc(100vh - 330px);
  }
}

/* === Notification placement + mobile POS bottom ticket v4.0.6 === */
.notif-panel {
  position:fixed !important;
  top:104px !important;
  right:24px !important;
  z-index:5000 !important;
  width:min(540px, calc(100vw - 48px)) !important;
  max-height:calc(100vh - 128px) !important;
}
.notif-list {
  max-height:calc(100vh - 318px) !important;
}
@media (max-width:760px) {
  .notif-panel {
    top:76px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-height:calc(100vh - 92px) !important;
  }
  .notif-head {
    padding:12px 14px;
  }
  .notif-stats {
    padding:10px;
    gap:7px;
  }
  .notif-list {
    max-height:calc(100vh - 304px) !important;
    padding:10px;
  }
  .page[data-page-view="pos"] {
    min-height:calc(100vh - 86px);
  }
  .page[data-page-view="pos"] .pos-layout {
    display:block !important;
    height:auto !important;
    padding-bottom:102px !important;
  }
  .page[data-page-view="pos"] .pos-products {
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:12px !important;
    border-radius:18px !important;
    overflow:visible !important;
  }
  .page[data-page-view="pos"] .pos-filters {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-bottom:12px !important;
  }
  .page[data-page-view="pos"] .pos-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
  }
  .page[data-page-view="pos"] .product-card {
    min-height:118px !important;
    padding:12px !important;
    border-radius:16px !important;
  }
  .page[data-page-view="pos"] .pc-media {
    width:46px !important;
    height:58px !important;
  }
  .page[data-page-view="pos"] .pc-body {
    min-width:0 !important;
  }
  .page[data-page-view="pos"] .pc-name {
    font-size:13px !important;
    line-height:1.15 !important;
    max-height:32px;
    overflow:hidden;
  }
  .page[data-page-view="pos"] .pos-cart {
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    top:auto !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    z-index:2200 !important;
    border-radius:18px !important;
    overflow:hidden !important;
    background:rgba(11,17,30,.98) !important;
    box-shadow:0 20px 64px rgba(0,0,0,.58),0 0 0 1px rgba(255,212,0,.10) !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) {
    display:block !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .cart-header {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:9px 12px 0 !important;
    border-bottom:0 !important;
    cursor:pointer !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .cart-header h2 {
    font-size:13px !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) #posClearBtn {
    width:34px !important;
    height:34px !important;
    border-radius:11px !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .cart-items,
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .client-selector,
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .cart-footer > div[style*="grid-template-columns"],
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) #posPaidAmountContainer {
    display:none !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .cart-footer {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:8px 12px 12px !important;
    border-top:0 !important;
    background:transparent !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .summary-line {
    display:grid !important;
    gap:2px !important;
    padding:0 !important;
    margin:0 !important;
    min-width:0 !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .summary-line span {
    font-size:10px !important;
    color:var(--text-muted) !important;
    text-transform:uppercase;
    font-weight:800;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .big-total {
    font-size:21px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .mega-btn {
    width:auto !important;
    min-width:142px !important;
    height:44px !important;
    padding:0 14px !important;
    border-radius:14px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }
  .page[data-page-view="pos"] .pos-cart.mobile-expanded {
    top:86px !important;
    bottom:10px !important;
    display:flex !important;
    flex-direction:column !important;
    max-height:none !important;
  }
  .page[data-page-view="pos"] .pos-cart.mobile-expanded .cart-header {
    padding:12px 14px !important;
    cursor:pointer !important;
  }
  .page[data-page-view="pos"] .pos-cart.mobile-expanded .cart-items {
    display:flex !important;
    min-height:90px !important;
    max-height:34vh !important;
    overflow:auto !important;
    padding:12px 14px !important;
  }
  .page[data-page-view="pos"] .pos-cart.mobile-expanded .cart-footer {
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    overflow:auto !important;
    padding:12px 14px 14px !important;
  }
  .page[data-page-view="pos"] .pos-cart.mobile-expanded .client-selector {
    display:flex !important;
  }
  .page[data-page-view="pos"] .pos-cart.mobile-expanded .cart-footer label {
    display:grid !important;
  }
}
@media (max-width:420px) {
  .page[data-page-view="pos"] .pos-grid {
    grid-template-columns:1fr 1fr !important;
  }
  .page[data-page-view="pos"] .product-card {
    min-height:110px !important;
    gap:9px !important;
  }
  .page[data-page-view="pos"] .pc-media {
    width:42px !important;
    height:54px !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .mega-btn {
    min-width:132px !important;
    padding:0 12px !important;
  }
  .page[data-page-view="pos"] .pos-cart:not(.mobile-expanded) .big-total {
    font-size:19px !important;
  }
}

/* === Notification overlay fix + exact web sale timestamp v4.0.7 === */
.topbar {
  position:relative !important;
  z-index:3000 !important;
}
.notif-panel {
  position:fixed !important;
  top:104px !important;
  right:24px !important;
  left:auto !important;
  z-index:2147483000 !important;
  width:min(540px, calc(100vw - 48px)) !important;
  max-height:calc(100vh - 128px) !important;
  pointer-events:auto !important;
  isolation:isolate;
}
.notif-panel.hidden {
  display:none !important;
}
body.modal-open .notif-panel {
  display:none !important;
  pointer-events:none !important;
}
body.modal-open .topbar,
body.modal-open .sidebar {
  z-index:1 !important;
}
body.modal-open .topbar {
  pointer-events:none;
}
.modal {
  z-index:2147483600 !important;
}
.modal-content,
.modal-box {
  position:relative;
  z-index:2147483601 !important;
}
.product-detail-modal {
  max-width:760px;
  width:min(760px, calc(100vw - 24px));
}
.product-detail-body {
  padding:22px;
  background:#0f172a;
  max-height:70vh;
  overflow:auto;
}
.detail-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.detail-card {
  border:1px solid var(--panel-border);
  background:rgba(2,6,23,.45);
  border-radius:12px;
  padding:10px 12px;
  min-width:0;
}
.detail-card span {
  display:block;
  font-size:11px;
  color:var(--text-muted);
  margin-bottom:6px;
  text-transform:uppercase;
  font-weight:800;
}
.detail-card strong {
  display:block;
  color:var(--text-main);
  font-size:14px;
  word-break:break-word;
}
@media (max-width:760px) {
  .notif-panel {
    top:78px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-height:calc(100vh - 96px) !important;
  }
  .detail-grid {
    grid-template-columns:1fr;
  }
  .product-detail-body {
    max-height:75vh;
    padding:16px;
  }
}

/* === BNSOFT WEB 4.0.9 DASHBOARD / THEME / TRAINING === */
body.theme-light {
  --bg-color:#f6f8fb;
  --panel-bg:rgba(255,255,255,0.94);
  --panel-border:rgba(15,23,42,0.10);
  --text-main:#0f172a;
  --text-muted:#64748b;
  --input-bg:#ffffff;
  --shadow:0 10px 28px rgba(15,23,42,0.08);
  background:#f6f8fb;
}
body.theme-light .sidebar { background:#ffffff; border-right-color:rgba(15,23,42,0.10); }
body.theme-light .topbar,
body.theme-light .glass-panel { box-shadow:0 10px 28px rgba(15,23,42,0.08); }
body.theme-light .live-card,
body.theme-light .product-card,
body.theme-light .cart-item,
body.theme-light .notif-panel,
body.theme-light .modal-content,
body.theme-light .modal-form,
body.theme-light .modal-box { background:#ffffff; }
body.theme-light th { background:#f1f5f9; color:#475569; }
body.theme-light tbody tr:hover { background:rgba(15,23,42,0.035); }
body.theme-light input,
body.theme-light select { background:#ffffff; color:#0f172a; }
body.theme-light .ghost-btn:hover,
body.theme-light .icon-btn:hover { background:rgba(15,23,42,0.06); }
body.theme-light .delphi-btn:hover { box-shadow:0 12px 28px rgba(15,23,42,0.12); }
body.theme-light .logout { background:rgba(239,68,68,0.10); }
body.theme-light .product-detail-body { background:#ffffff; }
body.theme-light .detail-card { background:#f8fafc; }

.theme-toggle-btn {
  height:44px;
  padding:0 14px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-main);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--panel-border);
  font-weight:700;
}
.theme-toggle-btn:hover { border-color:rgba(255,212,0,.45); color:var(--yellow); }
.theme-toggle-btn i { font-size:18px; }

.compat-banner {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  margin-bottom:18px;
  border-radius:14px;
}
.compat-main { display:flex; align-items:center; gap:12px; min-width:0; }
.compat-main i { font-size:32px; color:var(--yellow); }
.compat-main strong,
.compat-main span,
.compat-version span,
.compat-version strong { display:block; }
.compat-main span,
.compat-version span { color:var(--text-muted); font-size:12px; }
.compat-main strong { font-size:15px; }
.compat-version {
  min-width:150px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--panel-border);
  background:rgba(0,0,0,.10);
}
body.theme-light .compat-version { background:#f8fafc; }
.compat-version strong { margin-top:3px; font-size:18px; }
.compat-status {
  min-width:170px;
  text-align:center;
  border-radius:999px;
  padding:9px 12px;
  font-size:12px;
  font-weight:800;
  color:var(--text-muted);
  background:rgba(148,163,184,.12);
}
.compat-status.ok { color:#047857; background:rgba(16,185,129,.12); }
.compat-status.warn { color:#b45309; background:rgba(251,191,36,.16); }
.compat-banner.is-warning { border-color:rgba(251,191,36,.38); }
.compat-banner.is-ok { border-color:rgba(16,185,129,.28); }

.dashboard-insights {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:-14px 0 22px;
}
.insight-card { padding:16px; border-radius:14px; }
.insight-card span { display:block; color:var(--text-muted); font-size:12px; font-weight:700; text-transform:uppercase; margin-bottom:8px; }
.insight-card strong { display:block; font-size:20px; line-height:1.1; }
.insight-card small { display:block; margin-top:8px; color:var(--text-muted); font-size:12px; }

.finance-kpi-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}
.finance-kpi { padding:18px; border-radius:14px; }
.finance-kpi span { display:block; color:var(--text-muted); font-size:12px; font-weight:800; text-transform:uppercase; margin-bottom:9px; }
.finance-kpi strong { display:block; font-size:24px; line-height:1.05; }
.finance-kpi small { display:block; margin-top:7px; color:var(--text-muted); font-size:12px; }
.finance-kpi.primary { border-color:rgba(16,185,129,.26); background:linear-gradient(135deg,rgba(16,185,129,.14),var(--panel-bg)); }
.finance-chart-panel { margin-bottom:20px; padding:20px; min-height:400px; border-radius:16px; }
.finance-chart-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.finance-chart-head h2 { margin:0; display:flex; align-items:center; gap:8px; }
.finance-chart-head h2 i { color:var(--yellow); }
.finance-chart-head p { margin-top:6px; }
.finance-chart-box { position:relative; height:300px; width:100%; }
.period-presets,
.finance-presets { display:flex; gap:8px; flex-wrap:wrap; }
.ghost-btn.active,
.chart-type-btn.active { background:var(--yellow); color:#000; border-color:var(--yellow); }
.finance-grid.finance-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.finance-note { line-height:1.5; margin-top:14px; }

.training-hero {
  padding:20px 24px;
  margin-bottom:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.training-hero h2 { margin:0 0 6px; }
.training-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.video-card { overflow:hidden; border-radius:16px; }
.video-card.is-featured { border-color:rgba(255,212,0,.22); }
.video-frame { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-info { padding:14px 16px 16px; display:grid; gap:5px; }
.video-info span { color:var(--yellow); font-weight:800; font-size:12px; }
.video-info strong { font-size:16px; }
.video-info small { color:var(--text-muted); font-size:12px; line-height:1.4; }

@media(max-width:1100px){
  .dashboard-insights,
  .finance-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .finance-grid.finance-grid-3 { grid-template-columns:1fr; }
}
@media(max-width:760px){
  .compat-banner { grid-template-columns:1fr; }
  .compat-status { text-align:left; border-radius:12px; }
  .dashboard-insights,
  .finance-kpi-grid,
  .training-grid { grid-template-columns:1fr; }
  .training-hero { align-items:flex-start; flex-direction:column; }
  .theme-toggle-btn span { display:none; }
}

/* === BNSOFT WEB 4.0.10 VISIBILITY FIXES === */
.compat-banner {
  grid-template-columns:minmax(0,1fr) auto auto auto;
}
.compat-activity strong {
  font-size:16px;
}
.video-thumb {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:#000;
  cursor:pointer;
  overflow:hidden;
}
.video-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
  transition:transform .25s ease, filter .25s ease;
}
.video-thumb:hover img {
  transform:scale(1.04);
  filter:saturate(1.08) contrast(1.04);
}
.video-thumb span {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:70px;
  height:50px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#ff0033;
  color:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.video-thumb span i {
  font-size:30px;
}
.notif-card {
  border-left:4px solid rgba(148,163,184,.55) !important;
}
.notif-card .notif-dot {
  width:10px;
  height:10px;
  box-shadow:0 0 0 4px rgba(148,163,184,.12);
}
.notif-card.danger {
  border-color:rgba(239,68,68,.65) !important;
  background:linear-gradient(90deg,rgba(239,68,68,.18),rgba(15,23,42,.76)) !important;
}
.notif-card.low {
  border-color:rgba(251,191,36,.72) !important;
  background:linear-gradient(90deg,rgba(251,191,36,.18),rgba(15,23,42,.76)) !important;
}
.notif-card.expired {
  border-color:rgba(168,85,247,.72) !important;
  background:linear-gradient(90deg,rgba(168,85,247,.18),rgba(15,23,42,.76)) !important;
}
.notif-card.soon {
  border-color:rgba(59,130,246,.72) !important;
  background:linear-gradient(90deg,rgba(59,130,246,.18),rgba(15,23,42,.76)) !important;
}
.notif-card.danger .notif-dot { background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.18); }
.notif-card.low .notif-dot { background:#fbbf24; box-shadow:0 0 0 4px rgba(251,191,36,.18); }
.notif-card.expired .notif-dot { background:#a855f7; box-shadow:0 0 0 4px rgba(168,85,247,.18); }
.notif-card.soon .notif-dot { background:#3b82f6; box-shadow:0 0 0 4px rgba(59,130,246,.18); }
.notif-card.is-read {
  opacity:.62;
}

body.theme-light {
  color:#111827 !important;
  background:#f4f7fb !important;
}
body.theme-light .workspace,
body.theme-light .view-container,
body.theme-light .page {
  background:#f4f7fb !important;
  color:#111827 !important;
}
body.theme-light .glass-panel,
body.theme-light .topbar,
body.theme-light .section-title,
body.theme-light .filter-bar,
body.theme-light .table-card,
body.theme-light .settings-panel,
body.theme-light .fin-panel,
body.theme-light .finance-chart-panel,
body.theme-light .purchase-detail-panel,
body.theme-light .pos-products,
body.theme-light .pos-cart,
body.theme-light .modal-box,
body.theme-light .modal-form,
body.theme-light .modal-content,
body.theme-light .product-detail-body,
body.theme-light .training-hero,
body.theme-light .video-card,
body.theme-light .compat-banner,
body.theme-light .notif-panel {
  background:#ffffff !important;
  color:#111827 !important;
  border-color:#d9e2ef !important;
  box-shadow:0 14px 34px rgba(15,23,42,.08) !important;
  backdrop-filter:none !important;
}
body.theme-light .topbar {
  background:#ffffff !important;
}
body.theme-light .sidebar {
  background:#ffffff !important;
  color:#24324a !important;
  border-right:1px solid #d9e2ef !important;
}
body.theme-light .brand strong,
body.theme-light .topbar-greeting,
body.theme-light .page-head h1,
body.theme-light .section-title h1,
body.theme-light .section-title h2,
body.theme-light .panel-title-row h2,
body.theme-light .fin-panel h2,
body.theme-light .cart-header h2,
body.theme-light .modal-head h2,
body.theme-light .stat-body strong,
body.theme-light .insight-card strong,
body.theme-light .finance-kpi strong,
body.theme-light .delphi-btn,
body.theme-light table td,
body.theme-light table td strong,
body.theme-light label,
body.theme-light .product-card,
body.theme-light .cart-item {
  color:#111827 !important;
}
body.theme-light .brand small,
body.theme-light small,
body.theme-light .topbar-greeting small,
body.theme-light .title-left p,
body.theme-light .stat-body span,
body.theme-light .stat-body small,
body.theme-light .insight-card span,
body.theme-light .insight-card small,
body.theme-light .finance-kpi span,
body.theme-light .finance-kpi small,
body.theme-light .fin-row span,
body.theme-light .product-subline,
body.theme-light .finance-note,
body.theme-light .video-info small {
  color:#58677f !important;
}
body.theme-light .menu .nav-link {
  color:#3f5573 !important;
}
body.theme-light .menu .nav-link.active {
  color:#111827 !important;
  background:#fff8d8 !important;
}
body.theme-light .delphi-btn,
body.theme-light .product-card,
body.theme-light .cart-item,
body.theme-light .detail-card,
body.theme-light .live-card {
  background:#ffffff !important;
  border-color:#d9e2ef !important;
}
body.theme-light .delphi-btn.highlight,
body.theme-light .stat-card.featured,
body.theme-light .finance-kpi.primary {
  background:linear-gradient(135deg,#fff8d8,#ffffff) !important;
  border-color:#f4cf3a !important;
}
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background:#ffffff !important;
  color:#111827 !important;
  border-color:#cbd5e1 !important;
}
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color:#7b8798 !important;
}
body.theme-light table {
  color:#111827 !important;
}
body.theme-light th {
  background:#edf2f7 !important;
  color:#334155 !important;
  border-color:#d9e2ef !important;
}
body.theme-light td {
  border-color:#e2e8f0 !important;
}
body.theme-light tbody tr {
  background:#ffffff !important;
}
body.theme-light tbody tr:hover {
  background:#f8fafc !important;
}
body.theme-light .theme-toggle-btn,
body.theme-light .lang-switch,
body.theme-light .notif-btn,
body.theme-light .icon-btn,
body.theme-light .ghost-btn {
  background:#ffffff !important;
  color:#26364d !important;
  border-color:#cbd5e1 !important;
}
body.theme-light .primary-btn,
body.theme-light .lang-btn.active,
body.theme-light .ghost-btn.active,
body.theme-light .chart-type-btn.active {
  color:#111827 !important;
}
body.theme-light .notif-card {
  color:#111827 !important;
}
body.theme-light .notif-card.danger { background:linear-gradient(90deg,rgba(239,68,68,.16),#fff) !important; }
body.theme-light .notif-card.low { background:linear-gradient(90deg,rgba(251,191,36,.20),#fff) !important; }
body.theme-light .notif-card.expired { background:linear-gradient(90deg,rgba(168,85,247,.16),#fff) !important; }
body.theme-light .notif-card.soon { background:linear-gradient(90deg,rgba(59,130,246,.16),#fff) !important; }
body.theme-light .logout {
  background:#fee2e2 !important;
  color:#dc2626 !important;
}
body.theme-light .sync-pill {
  background:#fff7ed !important;
  color:#9a3412 !important;
}
@media(max-width:760px){
  .compat-banner {
    grid-template-columns:1fr;
  }
}

/* === BNSOFT WEB 4.0.11 LIGHT THEME REBALANCE === */
.compat-status {
  text-decoration:none;
}
.compat-status[href] {
  cursor:pointer;
}
.compat-status[href]:hover {
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(180,83,9,.16);
}

body.theme-light {
  --bg-main:#f2f5f9;
  --panel-bg:#ffffff;
  --panel-border:#d5deeb;
  --text-main:#07111f;
  --text-muted:#53657c;
  background:#f2f5f9 !important;
}
body.theme-light .workspace,
body.theme-light .view-container,
body.theme-light .page {
  background:
    linear-gradient(180deg,#eef3f8 0,#f7f9fc 260px,#eef2f6 100%) !important;
}
body.theme-light .sidebar {
  background:linear-gradient(180deg,#070b13 0,#0d1422 60%,#090d16 100%) !important;
  border-right:1px solid rgba(255,212,0,.20) !important;
  box-shadow:14px 0 34px rgba(15,23,42,.18);
}
body.theme-light .brand strong {
  color:#ffffff !important;
}
body.theme-light .brand small {
  color:#ffd85a !important;
}
body.theme-light .menu .nav-link {
  color:#c8d3e3 !important;
  background:transparent !important;
}
body.theme-light .menu .nav-link i {
  color:#9fb4cf !important;
}
body.theme-light .menu .nav-link:hover {
  background:rgba(255,255,255,.07) !important;
  color:#ffffff !important;
}
body.theme-light .menu .nav-link.active {
  background:linear-gradient(90deg,rgba(255,212,0,.24),rgba(255,212,0,.08)) !important;
  color:#ffd400 !important;
  border:1px solid rgba(255,212,0,.18);
}
body.theme-light .menu .nav-link.active i {
  color:#ffd400 !important;
}
body.theme-light .sidebar .live-card,
body.theme-light .sidebar .sync-card,
body.theme-light .sidebar .sync-pill {
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#ffffff !important;
}
body.theme-light .sidebar .live-card span,
body.theme-light .sidebar .live-card small {
  color:#c8d3e3 !important;
}
body.theme-light .logout {
  background:rgba(239,68,68,.14) !important;
  color:#ff6b6b !important;
  border:1px solid rgba(239,68,68,.24);
}
body.theme-light .topbar {
  background:rgba(255,255,255,.92) !important;
  border:1px solid #d5deeb !important;
  box-shadow:0 16px 42px rgba(15,23,42,.10) !important;
}
body.theme-light .glass-panel,
body.theme-light .section-title,
body.theme-light .filter-bar,
body.theme-light .table-card,
body.theme-light .settings-panel,
body.theme-light .fin-panel,
body.theme-light .finance-chart-panel,
body.theme-light .purchase-detail-panel,
body.theme-light .pos-products,
body.theme-light .pos-cart,
body.theme-light .modal-box,
body.theme-light .modal-form,
body.theme-light .modal-content,
body.theme-light .product-detail-body,
body.theme-light .training-hero,
body.theme-light .video-card,
body.theme-light .compat-banner,
body.theme-light .notif-panel {
  background:#ffffff !important;
  border-color:#d5deeb !important;
  box-shadow:0 14px 36px rgba(15,23,42,.08) !important;
}
body.theme-light .compat-banner {
  background:linear-gradient(90deg,#ffffff 0,#fff9dd 100%) !important;
  border-color:rgba(234,179,8,.42) !important;
}
body.theme-light .compat-main i,
body.theme-light .d-icon,
body.theme-light .stat-icon {
  color:#64748b !important;
}
body.theme-light .delphi-btn,
body.theme-light .product-card,
body.theme-light .cart-item,
body.theme-light .detail-card,
body.theme-light .live-card {
  background:linear-gradient(180deg,#ffffff 0,#f9fbfd 100%) !important;
  border-color:#d5deeb !important;
}
body.theme-light .delphi-btn.highlight,
body.theme-light .stat-card.featured,
body.theme-light .finance-kpi.primary {
  background:linear-gradient(135deg,#fff8d8 0,#ffffff 72%) !important;
  border-color:#f2c513 !important;
}
body.theme-light .stat-card:nth-child(2) {
  border-color:rgba(16,185,129,.30) !important;
}
body.theme-light .stat-card:nth-child(3) {
  border-color:rgba(100,116,139,.30) !important;
}
body.theme-light .stat-card:nth-child(4) {
  border-color:rgba(239,68,68,.28) !important;
}
body.theme-light .pos-cart .cart-footer {
  background:linear-gradient(180deg,#111827 0,#0b1120 100%) !important;
  color:#ffffff !important;
}
body.theme-light .pos-cart .cart-footer label,
body.theme-light .pos-cart .cart-footer span,
body.theme-light .pos-cart .cart-footer small,
body.theme-light .pos-cart .big-total {
  color:#ffffff !important;
}
body.theme-light .notif-panel {
  background:#ffffff !important;
}
body.theme-light .notif-summary {
  background:#f1f5f9 !important;
  border-color:#d5deeb !important;
}
body.theme-light .notif-summary strong,
body.theme-light .notif-summary span {
  color:#172033 !important;
}
@media(max-width:760px){
  body.theme-light .sidebar {
    box-shadow:18px 0 44px rgba(15,23,42,.28);
  }
}

/* === BNSOFT WEB 4.0.12 PRO LIGHT THEME === */
.compat-status.info {
  color:#0369a1;
  background:rgba(14,165,233,.14);
}
.compat-banner.is-info {
  border-color:rgba(14,165,233,.32);
}
body.theme-light {
  --bg-main:#eef3f8;
  --panel-bg:#ffffff;
  --panel-border:#d7e1ee;
  --text-main:#07111f;
  --text-muted:#52657d;
  color:#07111f !important;
  background:#eef3f8 !important;
}
body.theme-light .workspace,
body.theme-light .view-container,
body.theme-light .page {
  background:linear-gradient(180deg,#eef3f8 0,#f8fafc 280px,#eef3f8 100%) !important;
}
body.theme-light .sidebar {
  background:linear-gradient(180deg,#050914 0,#08111f 55%,#050914 100%) !important;
  border-right:1px solid rgba(255,212,0,.20) !important;
  box-shadow:16px 0 38px rgba(15,23,42,.20) !important;
}
body.theme-light .brand strong,
body.theme-light .sidebar .logout,
body.theme-light .sidebar .live-card strong {
  color:#ffffff !important;
}
body.theme-light .brand small,
body.theme-light .sidebar .live-card span,
body.theme-light .sidebar .live-card small {
  color:#aebbd0 !important;
}
body.theme-light .menu .nav-link {
  color:#c6d3e5 !important;
  background:transparent !important;
}
body.theme-light .menu .nav-link i {
  color:#9fb2cc !important;
}
body.theme-light .menu .nav-link:hover {
  color:#ffffff !important;
  background:rgba(255,255,255,.07) !important;
}
body.theme-light .menu .nav-link.active {
  color:#ffd400 !important;
  background:linear-gradient(90deg,rgba(255,212,0,.22),rgba(255,212,0,.07)) !important;
  border:1px solid rgba(255,212,0,.18) !important;
}
body.theme-light .menu .nav-link.active i {
  color:#ffd400 !important;
}
body.theme-light .sidebar .live-card,
body.theme-light .sidebar .sync-card,
body.theme-light .sidebar .sync-pill {
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.14) !important;
}
body.theme-light .logout {
  background:rgba(239,68,68,.15) !important;
  border:1px solid rgba(239,68,68,.28) !important;
  color:#ff6b6b !important;
}
body.theme-light .topbar,
body.theme-light .glass-panel,
body.theme-light .section-title,
body.theme-light .filter-bar,
body.theme-light .table-card,
body.theme-light .settings-panel,
body.theme-light .fin-panel,
body.theme-light .finance-chart-panel,
body.theme-light .purchase-detail-panel,
body.theme-light .pos-products,
body.theme-light .pos-cart,
body.theme-light .modal-box,
body.theme-light .modal-form,
body.theme-light .modal-content,
body.theme-light .product-detail-body,
body.theme-light .training-hero,
body.theme-light .video-card,
body.theme-light .notif-panel {
  background:#ffffff !important;
  border-color:#d7e1ee !important;
  color:#07111f !important;
  box-shadow:0 16px 38px rgba(15,23,42,.08) !important;
}
body.theme-light .topbar {
  background:rgba(255,255,255,.94) !important;
}
body.theme-light .compat-banner {
  grid-template-columns:minmax(280px,1fr) minmax(150px,auto) minmax(150px,auto) auto;
  align-items:center;
  gap:14px;
  padding:17px 18px;
  background:linear-gradient(90deg,#ffffff 0,#fffdf3 100%) !important;
  border:1px solid rgba(234,179,8,.36) !important;
}
body.theme-light .compat-main {
  min-height:48px;
}
body.theme-light .compat-main i {
  color:#f2b900 !important;
}
body.theme-light .compat-version {
  min-width:154px;
  background:#f8fafc !important;
  border-color:#d7e1ee !important;
  color:#07111f !important;
  box-shadow:none !important;
}
body.theme-light .compat-version strong,
body.theme-light .stat-card strong,
body.theme-light .insight-card strong,
body.theme-light .fin-panel strong,
body.theme-light .finance-kpi strong,
body.theme-light .table-card h2,
body.theme-light .page-head h1,
body.theme-light .section-title h1,
body.theme-light .section-title h2,
body.theme-light .delphi-btn .d-text {
  color:#07111f !important;
}
body.theme-light .compat-status {
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#334155 !important;
  background:#f8fafc !important;
  border:1px solid #d7e1ee !important;
  box-shadow:none !important;
}
body.theme-light .compat-status.ok {
  color:#047857 !important;
  background:#ecfdf5 !important;
  border-color:#a7f3d0 !important;
}
body.theme-light .compat-status.info {
  color:#0369a1 !important;
  background:#eff6ff !important;
  border-color:#bfdbfe !important;
}
body.theme-light .compat-status.warn {
  color:#b45309 !important;
  background:#fff7ed !important;
  border-color:#fed7aa !important;
}
body.theme-light .stat-card.glass-panel,
body.theme-light .dashboard-insights .glass-panel,
body.theme-light .delphi-btn,
body.theme-light .product-card,
body.theme-light .cart-item,
body.theme-light .detail-card,
body.theme-light .live-card {
  background:linear-gradient(180deg,#ffffff 0,#fbfdff 100%) !important;
  border:1px solid #d7e1ee !important;
  color:#07111f !important;
  box-shadow:0 14px 32px rgba(15,23,42,.07) !important;
}
body.theme-light .stat-card.featured,
body.theme-light .delphi-btn.highlight,
body.theme-light .finance-kpi.primary {
  background:linear-gradient(135deg,#fff8d6 0,#ffffff 72%) !important;
  border-color:#f1c40f !important;
}
body.theme-light .stat-body span,
body.theme-light .stat-body small,
body.theme-light .compat-main span,
body.theme-light .compat-version span,
body.theme-light .insight-card span,
body.theme-light .insight-card small,
body.theme-light .finance-note,
body.theme-light .product-subline {
  color:#52657d !important;
}
body.theme-light .d-icon,
body.theme-light .stat-icon {
  color:#657791 !important;
}
body.theme-light .d-icon .bx-cart-add,
body.theme-light .stat-card.featured .stat-icon {
  color:#f2b900 !important;
}
body.theme-light .text-green,
body.theme-light .stat-icon.success {
  color:#059669 !important;
}
body.theme-light .text-danger,
body.theme-light .stat-icon.danger {
  color:#dc2626 !important;
}
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background:#ffffff !important;
  color:#07111f !important;
  border-color:#cbd6e3 !important;
}
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color:#7a8798 !important;
}
body.theme-light th {
  background:#eef3f8 !important;
  color:#334155 !important;
  border-color:#d7e1ee !important;
}
body.theme-light td {
  color:#07111f !important;
  border-color:#e4eaf2 !important;
}
body.theme-light tbody tr {
  background:#ffffff !important;
}
body.theme-light tbody tr:hover {
  background:#f7fafc !important;
}
body.theme-light .theme-toggle-btn,
body.theme-light .lang-switch,
body.theme-light .notif-btn,
body.theme-light .icon-btn,
body.theme-light .ghost-btn {
  background:#ffffff !important;
  color:#26364d !important;
  border-color:#cbd6e3 !important;
}
body.theme-light .primary-btn,
body.theme-light .lang-btn.active,
body.theme-light .ghost-btn.active,
body.theme-light .chart-type-btn.active {
  background:#ffd400 !important;
  color:#07111f !important;
  border-color:#ffd400 !important;
}
body.theme-light .pos-cart .cart-footer {
  background:#ffffff !important;
  color:#07111f !important;
  border-top:1px solid #d7e1ee !important;
  box-shadow:0 -14px 30px rgba(15,23,42,.08) !important;
}
body.theme-light .pos-cart .cart-footer label,
body.theme-light .pos-cart .cart-footer span,
body.theme-light .pos-cart .cart-footer small,
body.theme-light .pos-cart .big-total {
  color:#07111f !important;
}
@media(max-width:980px){
  body.theme-light .compat-banner {
    grid-template-columns:1fr 1fr;
  }
  body.theme-light .compat-main,
  body.theme-light .compat-status {
    grid-column:1 / -1;
  }
}
@media(max-width:760px){
  body.theme-light .compat-banner {
    grid-template-columns:1fr;
  }
  body.theme-light .compat-main,
  body.theme-light .compat-status {
    grid-column:auto;
  }
}

/* === BNSOFT WEB 4.0.14 MOBILE FINANCE FIT === */
@media (max-width:760px) {
  html,
  body,
  .app,
  .workspace,
  .view-container,
  .page {
    max-width:100vw !important;
    overflow-x:hidden !important;
  }
  .workspace {
    min-width:0 !important;
  }
  .view-container {
    width:100% !important;
    padding:14px 10px 24px !important;
  }
  .page[data-page-view="finance"] {
    width:100% !important;
    min-width:0 !important;
  }
  .page[data-page-view="finance"] .section-title {
    display:block !important;
    padding:18px !important;
    border-radius:18px !important;
  }
  .page[data-page-view="finance"] .section-title h1 {
    font-size:25px !important;
    line-height:1.12 !important;
    margin-bottom:6px !important;
  }
  .page[data-page-view="finance"] .section-title p {
    font-size:13px !important;
    line-height:1.35 !important;
  }
  .page[data-page-view="finance"] .filter-bar {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    align-items:end !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    padding:14px !important;
    margin-bottom:14px !important;
    border-radius:18px !important;
  }
  .page[data-page-view="finance"] .filter-bar label {
    min-width:0 !important;
    width:100% !important;
  }
  .page[data-page-view="finance"] .filter-bar input,
  .page[data-page-view="finance"] .filter-bar select,
  .page[data-page-view="finance"] .filter-bar button {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:none !important;
  }
  .page[data-page-view="finance"] #finSearchBtn {
    grid-column:1 / -1 !important;
    height:44px !important;
    padding:0 14px !important;
    border-radius:14px !important;
    justify-content:center !important;
    font-size:14px !important;
  }
  .page[data-page-view="finance"] .filter-bar .ghost-btn {
    height:38px !important;
    padding:0 10px !important;
    border-radius:12px !important;
    font-size:12px !important;
    white-space:normal !important;
  }
  .page[data-page-view="finance"] .finance-kpi-grid {
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-bottom:14px !important;
  }
  .page[data-page-view="finance"] .finance-kpi {
    min-height:auto !important;
    padding:16px !important;
    border-radius:18px !important;
  }
  .page[data-page-view="finance"] .finance-kpi strong {
    font-size:23px !important;
    line-height:1.12 !important;
    overflow-wrap:anywhere !important;
  }
  .page[data-page-view="finance"] .finance-chart-panel {
    width:100% !important;
    min-width:0 !important;
    min-height:auto !important;
    padding:16px 12px !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }
  .page[data-page-view="finance"] .finance-chart-head {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-bottom:12px !important;
  }
  .page[data-page-view="finance"] .finance-chart-head h2 {
    font-size:18px !important;
    line-height:1.18 !important;
  }
  .page[data-page-view="finance"] .finance-chart-head p {
    font-size:12px !important;
    line-height:1.35 !important;
  }
  .page[data-page-view="finance"] .finance-chart-head .period-presets {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:100% !important;
    gap:8px !important;
  }
  .page[data-page-view="finance"] .finance-chart-head .chart-type-btn {
    width:100% !important;
    min-width:0 !important;
    height:38px !important;
    padding:0 8px !important;
    justify-content:center !important;
    font-size:12px !important;
  }
  .page[data-page-view="finance"] .finance-chart-box {
    height:245px !important;
    min-width:0 !important;
    width:100% !important;
  }
  .page[data-page-view="finance"] .finance-grid.finance-grid-3 {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .page[data-page-view="finance"] .fin-panel {
    width:100% !important;
    min-width:0 !important;
    padding:16px !important;
    border-radius:18px !important;
  }
  .page[data-page-view="finance"] .fin-panel h2 {
    font-size:16px !important;
    line-height:1.25 !important;
  }
  .page[data-page-view="finance"] .fin-row {
    align-items:flex-start !important;
    gap:10px !important;
  }
  .page[data-page-view="finance"] .fin-row span {
    min-width:0 !important;
    line-height:1.3 !important;
  }
  .page[data-page-view="finance"] .fin-row strong {
    max-width:48% !important;
    text-align:right !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width:420px) {
  .page[data-page-view="finance"] .filter-bar {
    grid-template-columns:1fr !important;
  }
  .page[data-page-view="finance"] .finance-chart-box {
    height:220px !important;
  }
}