/* ===== POS System V2 — Guinea Edition ===== */
:root {
  --bg: #f4f6f9; --surface: #fff; --surface2: #eef1f5; --border: #dde1e6;
  --text: #1a1d23; --text2: #6b7280; --text3: #9ca3af;
  --primary: #2563eb; --primary-h: #1d4ed8; --primary-l: #dbeafe;
  --success: #16a34a; --success-l: #dcfce7;
  --danger: #dc2626; --danger-l: #fee2e2;
  --warn: #f59e0b; --warn-l: #fef3c7;
  --info: #0891b2; --info-l: #cffafe;
  --sidebar-bg: #1e293b; --sidebar-text: #cbd5e1; --sidebar-active: #2563eb;
  --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.08); --shadow-lg: 0 4px 24px rgba(0,0,0,.12);
  --transition: 0.2s ease;
}
html.dark {
  --bg: #0f172a; --surface: #1e293b; --surface2: #273548; --border: #334155;
  --text: #f1f5f9; --text2: #94a3b8; --text3: #64748b;
  --primary: #3b82f6; --primary-h: #2563eb; --primary-l: #1e3a5f;
  --success: #22c55e; --success-l: #14532d;
  --danger: #ef4444; --danger-l: #450a0a;
  --warn: #f59e0b; --warn-l: #451a03;
  --info: #06b6d4; --info-l: #164e63;
  --sidebar-bg: #0f172a; --sidebar-text: #94a3b8;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
a { color:var(--primary); text-decoration:none; }
input,select,textarea,button { font:inherit; }
input,select,textarea { border:1px solid var(--border); border-radius:8px; padding:8px 12px; background:var(--surface); color:var(--text); outline:none; transition:var(--transition); }
input:focus,select:focus,textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-l); }
select { cursor:pointer; padding-right:32px; appearance:auto; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; border:none; cursor:pointer; font-weight:500; transition:var(--transition); white-space:nowrap; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--primary); color:#fff; } .btn-primary:hover:not(:disabled) { background:var(--primary-h); }
.btn-success { background:var(--success); color:#fff; } .btn-success:hover:not(:disabled) { background:#15803d; }
.btn-danger { background:var(--danger); color:#fff; } .btn-danger:hover:not(:disabled) { background:#b91c1c; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); } .btn-outline:hover { background:var(--surface2); }
.btn-sm { padding:4px 10px; font-size:.85rem; }
.btn-lg { padding:12px 24px; font-size:1.05rem; }
.btn-icon { width:36px; height:36px; padding:0; justify-content:center; border-radius:8px; }
#menu-toggle { display:flex!important; font-size:1.3rem; }
#app { display:none; min-height:100vh; }
#app.active { display:block; }
#login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); }
#login-page.hidden { display:none; }

/* ===== Sidebar — collapsible on desktop, drawer on mobile ===== */
#sidebar {
  background:var(--sidebar-bg); color:var(--sidebar-text); padding:16px 0;
  display:flex; flex-direction:column;
  position:fixed; left:0; top:0; bottom:0; width:250px; z-index:40;
  transition:transform .25s ease;
}
#sidebar.collapsed { transform:translateX(-100%); }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:8px 20px 24px; }
.sidebar-header .logo { font-size:1.2rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; }
.sidebar-close-btn { display:none; width:32px; height:32px; align-items:center; justify-content:center; background:rgba(255,255,255,.1); border:none; border-radius:6px; color:#fff; cursor:pointer; font-size:1rem; transition:var(--transition); }
.sidebar-close-btn:hover { background:rgba(255,255,255,.2); }
@media (max-width:1023px) {
  #sidebar.open .sidebar-close-btn { display:flex; }
}
@media (min-width:1024px) {
  #sidebar:not(.collapsed) .sidebar-close-btn { display:flex; }
}
#sidebar nav { flex:1; overflow-y:auto; }
#sidebar nav a { display:flex; align-items:center; gap:10px; padding:10px 20px; color:var(--sidebar-text); font-size:.93rem; transition:var(--transition); border-left:3px solid transparent; cursor:pointer; }
#sidebar nav a:hover,#sidebar nav a.active { background:rgba(255,255,255,.08); color:#fff; border-left-color:var(--sidebar-active); }
#sidebar nav a .icon { font-size:1.1rem; width:24px; text-align:center; }
#sidebar .user-info { padding:16px 20px; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; flex-shrink:0; }
#sidebar .user-info .role { color:var(--primary); font-weight:600; }
#main { overflow-y:auto; height:100vh; margin-left:250px; transition:margin-left .25s ease; }
#main.sidebar-collapsed { margin-left:0; }
#header { background:var(--surface); border-bottom:1px solid var(--border); padding:12px 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; }
#header h1 { font-size:1.2rem; font-weight:600; }
#header .header-actions { display:flex; align-items:center; gap:12px; }
.page { display:none; padding:24px; }
.page.active { display:block; }
@media (min-width:1024px) { .page.active { overflow-y:auto; max-height:calc(100vh - 60px); } }

/* ===== Cards ===== */
.card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:20px; box-shadow:var(--shadow); margin-bottom:16px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.card-title { font-size:1.1rem; font-weight:600; }

/* ===== Filter & Sort toolbar ===== */
.filter-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-bar select { width:auto; min-width:120px; font-size:.85rem; }
.filter-bar .search-box { flex:1; min-width:160px; }
.filter-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:20px; font-size:.78rem; font-weight:500; cursor:pointer; border:1px solid var(--border); background:var(--surface); transition:var(--transition); }
.filter-badge:hover { border-color:var(--primary); color:var(--primary); }
.filter-badge.active { background:var(--primary-l); border-color:var(--primary); color:var(--primary); }
.filter-badge.danger-badge { color:var(--danger); } .filter-badge.danger-badge.active { background:var(--danger-l); border-color:var(--danger); color:var(--danger); }
.filter-badge.success-badge { color:var(--success); } .filter-badge.success-badge.active { background:var(--success-l); border-color:var(--success); color:var(--success); }
.filter-badge.warn-badge { color:var(--warn); } .filter-badge.warn-badge.active { background:var(--warn-l); border-color:var(--warn); color:#92400e; }

/* ===== Stats ===== */
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:20px; }
.stat-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:16px; box-shadow:var(--shadow); }
.stat-card .label { font-size:.82rem; color:var(--text2); margin-bottom:4px; }
.stat-card .value { font-size:1.5rem; font-weight:700; }
.stat-card .value.danger { color:var(--danger); }
.stat-card .value.success { color:var(--success); }
.stat-card .value.warn { color:var(--warn); }
.stat-card .value.info { color:var(--info); }

/* ===== Tables ===== */
.table-wrap {
  overflow-x:auto;
  overflow-y:auto;
  max-height:70vh;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
table { width:100%; border-collapse:collapse; }
thead { position:sticky; top:0; z-index:2; }
th {
  text-align:left; padding:10px 12px; font-size:.82rem; font-weight:600;
  color:var(--text2); border-bottom:2px solid var(--border); white-space:nowrap;
  background:var(--surface); position:sticky; top:0; z-index:2;
}
td { padding:10px 12px; border-bottom:1px solid var(--border); font-size:.9rem; }
tr:hover td { background:var(--surface2); }
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:.78rem; font-weight:500; }
.badge-success { background:var(--success-l); color:var(--success); }
.badge-danger { background:var(--danger-l); color:var(--danger); }
.badge-warn { background:var(--warn-l); color:var(--warn); }
.badge-info { background:var(--primary-l); color:var(--primary); }
.badge-ecobank { background:#1a3a5c; color:#fff; }
.badge-orange { background:#ff7900; color:#fff; }

/* ===== Forms ===== */
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:.85rem; font-weight:500; margin-bottom:4px; color:var(--text2); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-inline { display:flex; gap:8px; align-items:end; flex-wrap:wrap; }
.search-box { position:relative; flex:1; min-width:160px; }
.search-box input { padding-left:36px; width:100%; }
.search-box .icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text3); pointer-events:none; }

/* ===== Login ===== */
.login-card { background:var(--surface); border-radius:16px; border:1px solid var(--border); padding:40px; width:100%; max-width:420px; box-shadow:var(--shadow-lg); }
.login-card h1 { text-align:center; margin-bottom:8px; }
.login-card .subtitle { text-align:center; color:var(--text2); margin-bottom:24px; }
.login-card .error { background:var(--danger-l); color:var(--danger); padding:8px 12px; border-radius:8px; margin-bottom:12px; font-size:.85rem; display:none; }

/* ===== Product List (sales page) ===== */
.product-grid { overflow-y:auto; min-height:0; }
.prod-list-empty { text-align:center; color:var(--text3); padding:20px; }
.prod-row { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--border); transition:var(--transition); }
.prod-row:hover { background:var(--primary-l); }
.prod-row-low { background:var(--danger-l); }
.prod-row-low:hover { background:#fecaca; }
.prod-row-code { font-family:monospace; font-size:.78rem; color:var(--text3); min-width:60px; }
.prod-row-name { flex:1; font-size:.88rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prod-row-price { font-size:.85rem; font-weight:600; color:var(--text2); min-width:70px; text-align:right; }
.prod-row-stock { font-size:.75rem; min-width:30px; text-align:right; color:var(--text2); }
.prod-row-stock.low { color:var(--danger); font-weight:600; }
@media (max-width:768px) {
  .prod-row { padding:6px 8px; }
  .prod-row-code { min-width:44px; font-size:.72rem; }
  .prod-row-name { font-size:.82rem; }
  .prod-row-price { min-width:50px; font-size:.78rem; }
}
@media (max-width:480px) {
  .prod-row-code { min-width:36px; font-size:.68rem; }
  .prod-row-name { font-size:.78rem; }
  .prod-row-price { min-width:40px; font-size:.72rem; }
}

/* ===== Sales Page Layout ===== */
.sales-layout { min-height:calc(100vh - 140px); }
@media (max-width:768px) { .sales-layout { min-height:auto; } }
.sales-prod-card { display:flex; flex-direction:column; max-height:420px; }
.sales-prod-card .card-header { flex-shrink:0; }
.sales-prod-card .product-grid { overflow-y:auto; min-height:0; }
.sales-cart-card { display:flex; flex-direction:column; }
.sales-cart-card .table-wrap { flex:1; overflow-y:auto; max-height:none; }
.sales-cart-card .cart-summary,
.sales-cart-card .form-row,
.sales-cart-card #discount-override-group,
.sales-cart-card #cart-discount-info { flex-shrink:0; }
@media (max-width:768px) {
  .sales-prod-card { max-height:300px; }
}

/* ===== Cart ===== */
.cart-table { min-width:360px; }
.cart-table th:first-child { width:40%; min-width:120px; }
.cart-table th:nth-child(2) { width:30%; min-width:100px; }
.cart-table th:nth-child(3) { width:20%; min-width:80px; text-align:right; }
.cart-table th:last-child { width:10%; min-width:40px; }
.cart-prod-name { vertical-align:middle; }
.cart-prod-title { font-weight:500; font-size:.9rem; line-height:1.3; }
.cart-prod-meta { font-size:.72rem; color:var(--text3); margin-top:2px; }
.cart-qty-cell { white-space:nowrap; text-align:center; }
.qty-btn { width:28px; height:28px; padding:0; font-size:1rem; border-radius:6px!important; }
.qty-input { width:48px; text-align:center; padding:2px; margin:0 2px; font-size:.85rem; border-radius:6px; }
.cart-subtotal { text-align:right; font-weight:600; font-size:.9rem; white-space:nowrap; }
.cart-remove { text-align:center; }
.cart-summary { display:flex; justify-content:flex-end; align-items:center; gap:20px; padding:12px 0; border-top:2px solid var(--border); margin-top:12px; flex-wrap:wrap; }
.cart-total { font-size:1.3rem; font-weight:700; }
@media (max-width:480px) {
  .cart-table { min-width:auto; }
  .cart-table th:first-child { width:35%; min-width:80px; }
  .cart-table th:nth-child(2) { width:35%; min-width:80px; }
  .cart-table th:nth-child(3) { width:20%; min-width:60px; }
  .cart-table th:last-child { width:10%; min-width:30px; }
  .qty-input { width:36px; }
  .qty-btn { width:24px; height:24px; }
  .cart-prod-meta { font-size:.65rem; }
}

/* ===== Modals ===== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.active { display:flex; }
.modal { background:var(--surface); border-radius:var(--radius); padding:24px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal h2 { margin-bottom:16px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }

/* ===== Toasts ===== */
#toasts { position:fixed; top:16px; right:16px; z-index:200; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { padding:12px 20px; border-radius:var(--radius); color:#fff; font-size:.9rem; box-shadow:var(--shadow-lg); animation:slideIn .3s ease; max-width:380px; pointer-events:auto; }
.toast-success { background:var(--success); }
.toast-error { background:var(--danger); }
.toast-warn { background:var(--warn); color:#000; }
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* ===== Charts ===== */
.chart-wrap { position:relative; height:300px; }
.chart-wrap canvas { width:100%!important; }

/* ===== Mobile Bottom Nav ===== */
.mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:56px; height:calc(56px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--border); z-index:30; justify-content:space-around; align-items:center; padding:4px 0; padding-bottom:calc(4px + env(safe-area-inset-bottom,0px)); box-shadow:0 -2px 8px rgba(0,0,0,.08); }
.mobile-nav a { display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px 6px; border-radius:8px; font-size:.65rem; color:var(--text3); cursor:pointer; text-decoration:none; transition:var(--transition); min-width:44px; }
.mobile-nav a span:first-child { font-size:1.1rem; }
.mobile-nav a.active { color:var(--primary); }
.mobile-nav a:hover { background:var(--surface2); }
.mobile-nav .mobile-nav-menu { color:var(--text2); }
@media (max-width:1023px) {
  .mobile-nav { display:flex; }
  #main { padding-bottom:72px; padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
}
@media (min-width:1024px) {
  .mobile-nav { display:none!important; }
}
@media (max-width:380px) {
  .mobile-nav a { font-size:.6rem; min-width:36px; padding:4px 2px; }
  .mobile-nav a span:first-child { font-size:1rem; }
}

/* ===== Tabs ===== */
.tab-bar { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:0; flex-wrap:wrap; }
.tab-bar button { padding:8px 16px; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; color:var(--text2); transition:var(--transition); font-size:.9rem; }
.tab-bar button.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }

/* ===== Client Card (sales page) ===== */
.client-card { display:flex; gap:16px; flex-wrap:wrap; }
.client-card .field .lbl { font-size:.78rem; color:var(--text2); }
.client-card .field .val { font-size:1.1rem; font-weight:600; }

/* ===== Misc ===== */
.lang-toggle { display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:6px; background:var(--surface2); border:1px solid var(--border); cursor:pointer; font-size:.8rem; transition:var(--transition); }
.lang-toggle:hover { border-color:var(--primary); }
.discount-badge { background:var(--warn-l); color:#92400e; padding:2px 8px; border-radius:12px; font-size:.78rem; font-weight:500; }
.region-select-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-bottom:12px; }
.region-option { padding:12px; border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; text-align:center; transition:var(--transition); background:var(--surface); }
.region-option:hover { border-color:var(--primary); }
.region-option.selected { border-color:var(--primary); background:var(--primary-l); font-weight:600; }
.region-option .r-code { font-size:1.2rem; font-weight:700; }
.region-option .r-name { font-size:.78rem; color:var(--text2); }
.region-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:12px; font-size:.78rem; font-weight:500; }
.region-chip.GC { background:#dbeafe; color:#1e40af; }
.region-chip.BG { background:#dcfce7; color:#166534; }
.region-chip.MG { background:#fef3c7; color:#92400e; }
.region-chip.HG { background:#fce7f3; color:#9d174d; }
.region-chip.FG { background:#cffafe; color:#0f766e; }
.product-img-preview { width:80px; height:80px; object-fit:cover; border-radius:6px; border:1px solid var(--border); }

/* ===== Responsive ===== */
@media (max-width:1023px) {
  #sidebar { left:-270px; width:260px; }
  #sidebar.open { left:0; transform:none; }
  #sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:39; }
  #sidebar.open + #sidebar-backdrop, #sidebar-backdrop.open { display:block; }
  #menu-toggle { display:flex!important; }
  #main { margin-left:0; height:auto; min-height:100vh; }
  #main.sidebar-collapsed { margin-left:0; }
  .page { padding:16px; }
}
@media (min-width:1024px) {
  #sidebar-backdrop { display:none!important; }
}
@media (max-width:768px) {
  .form-row { grid-template-columns:1fr; }
  .stat-row { grid-template-columns:1fr 1fr; }
  .sales-layout { grid-template-columns:1fr!important; }
  .filter-bar { flex-direction:column; align-items:stretch; }
  .filter-bar select { width:100%; }
  .product-grid { max-height:340px; }
  #header { padding:10px 12px; }
  #header h1 { font-size:1rem; }
  .login-card { padding:24px; }
}
@media (max-width:480px) {
  .stat-row { grid-template-columns:1fr; }
  .page { padding:10px; }
  .card { padding:12px; }
  .card-header { flex-direction:column; align-items:stretch; }
  th, td { padding:6px 8px; font-size:.82rem; }
  .prod-row { padding:5px 6px; gap:4px; }
  .prod-row-code { min-width:30px; font-size:.65rem; }
  .prod-row-price { min-width:36px; font-size:.7rem; }
}