/* =========================================================
   Electro Shop – WowDash-inspired admin theme
   Bootstrap 5 base + custom dashboard styling
   ========================================================= */
:root{
  --primary:#487fff;
  --primary-600:#3b6fe0;
  --primary-050:#ecf2ff;
  --sidebar-bg:#ffffff;
  --body-bg:#f5f6fa;
  --card:#ffffff;
  --text:#273240;
  --muted:#7c8698;
  --border:#eaecef;
  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --info:#3b9dff;
  --sidebar-w:250px;
  --header-h:72px;
}
/* ---------- Dark theme ---------- */
[data-theme="dark"]{
  --sidebar-bg:#161b22;
  --body-bg:#0d1117;
  --card:#161b22;
  --text:#e6edf3;
  --muted:#8b949e;
  --border:#283040;
  --primary-050:#1b2740;
}
[data-theme="dark"] .card,
[data-theme="dark"] .app-header,
[data-theme="dark"] .app-footer,
[data-theme="dark"] .card-header,
[data-theme="dark"] .modal-content{background:#161b22;color:var(--text);}
/* Transparent tables in dark mode — card background shows through, text goes light */
[data-theme="dark"] .table{background:transparent;color:var(--text);--bs-table-color:var(--text);--bs-table-bg:transparent;}
[data-theme="dark"] .table thead th{background:transparent;color:var(--muted);border-bottom-color:var(--border);}
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody th{background:transparent;color:var(--text);border-bottom-color:var(--border);}
/* any dark/black inline text inside table cells becomes light */
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .table strong,
[data-theme="dark"] .table b,
[data-theme="dark"] .table span:not(.badge){color:var(--text);}
[data-theme="dark"] .table .text-muted{color:var(--muted)!important;}
[data-theme="dark"] .table a:not(.btn){color:var(--primary);}
[data-theme="dark"] .table tbody tr:hover{background:rgba(255,255,255,.04);}
[data-theme="dark"] .table tfoot th, [data-theme="dark"] .table tfoot td{background:transparent;color:var(--text);}
/* DataTables-rendered cells use the same .table element, so they inherit the above */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .header-search input{background:#0d1117;color:var(--text);border-color:var(--border);}
[data-theme="dark"] .btn-light{background:#21262d;color:var(--text);}
[data-theme="dark"] .icon-btn{background:#161b22;color:var(--muted);}
[data-theme="dark"] code{color:#79c0ff;}
[data-theme="dark"] .dropdown-menu{background:#161b22;border-color:var(--border);}
[data-theme="dark"] .dropdown-item{color:var(--text);}
[data-theme="dark"] .dropdown-item:hover{background:#21262d;}

*{box-sizing:border-box;}
body{
  margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--body-bg);color:var(--text);font-size:14px;
}
a{text-decoration:none;color:var(--primary);}

/* ---------- Layout ---------- */
.app-sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:var(--sidebar-bg);border-right:1px solid var(--border);
  overflow-y:auto;z-index:1040;transition:transform .25s ease;
}
.app-main{margin-left:var(--sidebar-w);min-height:100vh;transition:margin .25s ease;}
.app-header{
  height:var(--header-h);background:var(--header-bg,#fff);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;position:sticky;top:0;z-index:1030;
}
.app-content{padding:24px;}
.app-footer{padding:16px 24px;color:var(--muted);border-top:1px solid var(--border);background:#fff;}

/* Sidebar brand */
.sidebar-brand{
  display:flex;align-items:center;gap:10px;height:var(--header-h);
  padding:0 22px;border-bottom:1px solid var(--border);font-weight:700;font-size:18px;color:var(--text);
}
.sidebar-brand .logo{width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:18px;}

/* Sidebar nav */
.sidebar-nav{list-style:none;margin:0;padding:14px 12px;}
.sidebar-nav .nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:16px 12px 6px;font-weight:600;}
.sidebar-nav a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  color:var(--sidebar-text,var(--text));font-weight:500;margin-bottom:2px;transition:.15s;
}
.sidebar-nav a i{font-size:18px;color:var(--muted);}
.sidebar-nav a:hover{background:var(--side-hover-bg,var(--primary-050));color:var(--side-hover,var(--primary));}
.sidebar-nav a:hover i{color:var(--side-hover,var(--primary));}
.sidebar-nav a.active{background:var(--side-active,var(--primary));color:#fff;}
.sidebar-nav a.active i{color:#fff;}
.sidebar-nav .badge{margin-left:auto;}

/* Collapsible submenu groups */
.nav-group-toggle{cursor:pointer;}
.nav-group-toggle .nav-caret{margin-left:auto;font-size:16px;transition:transform .2s;color:var(--muted);}
.nav-group.open > .nav-group-toggle .nav-caret{transform:rotate(90deg);}
.nav-group.open > .nav-group-toggle{background:var(--primary-050);color:var(--primary);}
.nav-group.open > .nav-group-toggle i{color:var(--primary);}
.nav-submenu{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease;}
.nav-group.open > .nav-submenu{max-height:520px;}
.nav-submenu a{padding-left:44px;font-size:13.5px;}
.nav-submenu a::before{content:"";position:absolute;left:26px;width:5px;height:5px;border-radius:50%;background:var(--border);}
.nav-submenu a{position:relative;}
.nav-submenu a.active::before{background:#fff;}

/* Header bits */
.header-search{position:relative;max-width:320px;flex:1;}
.header-search input{
  width:100%;border:1px solid var(--border);background:#f7f8fb;border-radius:10px;
  padding:10px 14px 10px 40px;font-size:14px;transition:.15s;
}
.header-search input:hover{border-color:var(--primary);}
.header-search input:focus{outline:none;border-color:var(--primary);background:var(--card);box-shadow:0 0 0 3px var(--primary-050);}
.header-search:focus-within i{color:var(--primary);}
.header-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,.14);max-height:380px;overflow-y:auto;z-index:1050;display:none;}
.search-results.show{display:block;}
.search-results .sr-group{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:10px 14px 4px;font-weight:600;}
.search-results a{display:flex;align-items:center;gap:10px;padding:9px 14px;color:var(--text);transition:.12s;}
.search-results a:hover{background:var(--primary);color:#fff;}
.search-results a:hover i,.search-results a:hover .sr-sub{color:#fff;}
.search-results a i{color:var(--muted);font-size:18px;}
.search-results .sr-sub{color:var(--muted);font-size:12px;margin-left:auto;}
.search-results .sr-empty{padding:16px;text-align:center;color:var(--muted);font-size:13px;}
[data-theme="dark"] .search-results{background:#161b22;}
[data-theme="dark"] .search-results a{color:var(--text);}
.header-actions{display:flex;align-items:center;gap:14px;}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--primary-050);color:var(--primary);
  display:grid;place-items:center;font-weight:600;}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:#fff;
  display:grid;place-items:center;color:var(--muted);cursor:pointer;}
.menu-toggle{display:none;font-size:22px;background:none;border:none;color:var(--text);cursor:pointer;}

/* ---------- Cards ---------- */
.card{border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:0 1px 2px rgba(16,24,40,.04);}
.card-header{background:var(--card);border-bottom:1px solid var(--border);padding:18px 22px;font-weight:600;
  border-radius:16px 16px 0 0;display:flex;align-items:center;justify-content:space-between;color:var(--heading,var(--text));}
.card-body{padding:22px;}
.page-title{font-size:20px;font-weight:700;margin:0;color:var(--heading,var(--text));}
.breadcrumb-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.breadcrumb-bar .crumbs{color:var(--muted);font-size:13px;}

/* Stat widgets */
.stat-card{border-radius:16px;padding:22px;color:#fff;position:relative;overflow:hidden;}
.stat-card .stat-icon{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:24px;margin-bottom:14px;}
.stat-card h3{font-size:26px;margin:6px 0 0;font-weight:700;}
.stat-card span{opacity:.9;font-size:13px;}
.stat-card .sub{display:block;font-size:11.5px;opacity:.85;margin-top:4px;}
a .stat-card{transition:transform .15s;}
a .stat-card:hover{transform:translateY(-2px);}
.bg-grad-blue{background:linear-gradient(135deg,#487fff,#6f9bff);}
.bg-grad-green{background:linear-gradient(135deg,#22c55e,#4ade80);}
.bg-grad-orange{background:linear-gradient(135deg,#f59e0b,#fbbf24);}
.bg-grad-red{background:linear-gradient(135deg,#ef4444,#f87171);}
.bg-grad-purple{background:linear-gradient(135deg,#8b5cf6,#a78bfa);}
.bg-grad-teal{background:linear-gradient(135deg,#14b8a6,#2dd4bf);}
.bg-grad-pink{background:linear-gradient(135deg,#ec4899,#f472b6);}

/* ---------- Self-animating stat-card backgrounds ---------- */
.stat-card{background-size:200% 200%;animation:statFlow 10s ease-in-out infinite;}
.stat-card > *{position:relative;z-index:1;}            /* keep icon & text above the sheen */
.stat-card::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);
  animation:statSheen 7s ease-in-out infinite;}
@keyframes statFlow{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
@keyframes statSheen{0%,55%{left:-60%}100%{left:130%}}
[data-theme="dark"] .stat-card::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;}
.table thead th{background:var(--table-head-bg,#f7f8fb);color:var(--muted);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);}
.table tbody td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle;}
.table tbody tr:hover{background:#fafbfe;}
/* Quantity stepper (− [ n ] +) */
.qs-group{flex-wrap:nowrap;}
.qs-group .qs-input{text-align:center;}
.qs-btn{padding:6px 12px;font-weight:700;font-size:15px;line-height:1;background:#f1f3f7;border:1px solid var(--border);color:var(--text);}
.qs-btn:hover{background:var(--primary-050);color:var(--primary);}
.qs-minus{border-top-right-radius:0;border-bottom-right-radius:0;}
.qs-plus{border-top-left-radius:0;border-bottom-left-radius:0;}
[data-theme="dark"] .qs-btn{background:#21262d;}

.table tfoot td,.table tfoot th{background:var(--table-head-bg,#f7f8fb);border-top:2px solid var(--border);padding:12px 16px;font-size:13px;color:var(--text);}
[data-theme="dark"] .table tfoot td,[data-theme="dark"] .table tfoot th{background:rgba(255,255,255,.03);color:var(--text);}
.table-responsive{overflow-x:auto;}

/* Badges */
.badge{padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;}
.bg-success-subtle{background:#dcfce7;} .text-success{color:#16a34a;}
.bg-danger-subtle{background:#fee2e2;}  .text-danger{color:#dc2626;}
.bg-warning-subtle{background:#fef3c7;} .text-warning{color:#d97706;}
.bg-info-subtle{background:#e0f2fe;}    .text-info{color:#0284c7;}
.bg-secondary-subtle{background:#f1f5f9;}.text-secondary{color:#64748b;}

/* Buttons */
.btn{border-radius:10px;font-weight:600;padding:9px 16px;font-size:14px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-600);color:#fff;}
.btn-light{background:#f1f3f7;color:var(--text);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-success{background:var(--success);color:#fff;}
.btn-outline{background:#fff;border-color:var(--border);color:var(--text);}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:8px;}

/* Forms */
.form-label{font-weight:600;font-size:13px;margin-bottom:6px;display:block;}
.form-control,.form-select{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:14px;background:#fff;transition:border-color .15s,box-shadow .15s;}
.form-control:hover,.form-select:hover,.form-control:focus,.form-select:focus{border-color:var(--form-hover,var(--primary));}
.form-control:focus,.form-select:focus{outline:none;box-shadow:0 0 0 3px var(--form-hover-ring,var(--primary-050));}

/* Alerts */
.alert{border-radius:12px;padding:14px 18px;margin-bottom:18px;border:1px solid transparent;}
.alert-success{background:#dcfce7;color:#166534;border-color:#bbf7d0;}
.alert-danger{background:#fee2e2;color:#991b1b;border-color:#fecaca;}
.alert-warning{background:#fef3c7;color:#92400e;border-color:#fde68a;}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#487fff,#6f9bff);padding:20px;}
.login-card{background:#fff;border-radius:20px;padding:40px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.2);}

/* Responsive */
@media (max-width: 992px){
  .app-sidebar{transform:translateX(-100%);}
  .app-sidebar.open{transform:translateX(0);}
  .app-main{margin-left:0;}
  .menu-toggle{display:block;}
  .header-search{max-width:none;}
}
@media (max-width: 576px){
  .app-content{padding:16px;}
  .header-search{display:none;}
  /* Compact the top bar so the user menu always stays on screen */
  .app-header{padding:0 12px;}
  .header-actions{gap:8px;}
  .header-actions .icon-btn{width:38px;height:38px;}
  .header-hide-sm{display:none !important;}                 /* language + duplicate alerts move into the user menu */
  .header-actions .avatar,.header-actions .avatar-img{width:36px !important;height:36px !important;}
  .header-actions .pos-launch{padding:8px 10px;}
}
@media (max-width: 400px){
  /* Very small phones: drop the branch pill/selector text too (still in the sidebar) */
  .header-actions{gap:6px;}
  .header-actions .icon-btn{width:36px;height:36px;}
}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1035;}
.sidebar-backdrop.show{display:block;}

/* ---------- Sidebar collapse (desktop icon rail) ---------- */
.sidebar-logo-img{max-height:var(--logo-h,34px);max-width:170px;object-fit:contain;border-radius:8px;}
.collapse-toggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:#fff;
  display:grid;place-items:center;color:var(--muted);cursor:pointer;}
@media (min-width: 992px){
  body.sidebar-collapsed .app-sidebar{width:78px;}
  body.sidebar-collapsed .app-main{margin-left:78px;}
  body.sidebar-collapsed .sidebar-nav a{justify-content:center;padding:12px 0;}
  body.sidebar-collapsed .sidebar-nav a span,
  body.sidebar-collapsed .sidebar-nav .nav-label,
  body.sidebar-collapsed .sidebar-nav .nav-caret,
  body.sidebar-collapsed .sidebar-nav .badge,
  body.sidebar-collapsed .sidebar-brand span{display:none;}
  body.sidebar-collapsed .sidebar-brand{justify-content:center;padding:0;}
  body.sidebar-collapsed .sidebar-nav a i{font-size:20px;}
  /* hide submenus entirely in the icon rail */
  body.sidebar-collapsed .nav-submenu{display:none;}
  body.sidebar-collapsed .nav-submenu a::before{display:none;}
  /* keep the logo visible & fitted in the collapsed rail */
  body.sidebar-collapsed .sidebar-brand .sidebar-logo-img{display:block;max-width:52px;max-height:40px;}
  body.sidebar-collapsed .sidebar-brand .logo{display:grid;}
}
.theme-icon-dark{display:none;}
[data-theme="dark"] .theme-icon-dark{display:inline;}
[data-theme="dark"] .theme-icon-light{display:none;}

/* ---------- Settings tabs ---------- */
.nav-tabs .nav-link{border:none;border-bottom:2.5px solid transparent;color:var(--muted);font-weight:600;border-radius:0;padding:12px 18px;}
.nav-tabs .nav-link.active{color:var(--tab-active,var(--primary));border-bottom-color:var(--tab-active,var(--primary));background:transparent;}
.nav-tabs .nav-link:hover{color:var(--tab-active,var(--primary));}
[data-theme="dark"] .nav-tabs .nav-link.active{background:transparent;color:var(--tab-active,var(--primary));}

/* ---------- Page loading animation ---------- */
#pageLoader{position:fixed;top:0;left:0;right:0;height:3px;z-index:3000;pointer-events:none;opacity:0;transition:opacity .15s;}
#pageLoader.active{opacity:1;}
#pageLoader .loader-bar{height:100%;width:40%;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--primary),#9db9ff);animation:loadslide .9s ease-in-out infinite;}
@keyframes loadslide{0%{margin-left:-40%}100%{margin-left:100%}}
/* content enters just as the preloader lifts (450ms min-show) */
.app-content{animation:fadeUp .35s ease .4s backwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.app-content{animation:none;}.stat-card{animation:none;}.stat-card::after{animation:none;display:none;}}

/* Full-page loading overlay (appears after a short delay on slow navigations) */
#pageOverlay{position:fixed;inset:0;z-index:2990;display:grid;place-items:center;
  background:rgba(255,255,255,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .2s;}
#pageOverlay.active{opacity:1;visibility:visible;}
[data-theme="dark"] #pageOverlay{background:rgba(13,17,23,.6);}
#pageOverlay .po-box{display:flex;flex-direction:column;align-items:center;gap:14px;}
#pageOverlay .po-logo{max-height:52px;max-width:170px;object-fit:contain;animation:poPulse 1.2s ease-in-out infinite;}
#pageOverlay .po-mark{width:56px;height:56px;border-radius:16px;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:28px;animation:poPulse 1.2s ease-in-out infinite;}
@keyframes poPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.75}}
#pageOverlay .po-spin{width:34px;height:34px;border-radius:50%;border:3.5px solid var(--primary-050);
  border-top-color:var(--primary);animation:poSpin .8s linear infinite;}
@keyframes poSpin{to{transform:rotate(360deg)}}
#pageOverlay .po-text{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em;}

/* ---------- Avatars (photos with default fallback) ---------- */
.avatar-img{border-radius:50%;object-fit:cover;border:2px solid var(--border);vertical-align:middle;}
.table .avatar, .table .avatar-img{flex:none;}
.cell-person{display:flex;align-items:center;gap:10px;}

/* ---------- Notification bell ---------- */
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;border-radius:10px;
  font-size:10.5px;font-weight:700;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;}
.notif-menu{width:340px;max-width:90vw;padding:0;overflow:hidden;}
.notif-menu .notif-head{padding:12px 16px;font-weight:700;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.notif-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px;align-items:flex-start;}
.notif-item:last-child{border-bottom:none;}
.notif-item .n-icon{width:32px;height:32px;border-radius:9px;background:var(--primary-050);color:var(--primary);display:grid;place-items:center;flex:none;font-size:15px;}
.notif-item .n-meta{color:var(--muted);font-size:11.5px;margin-top:2px;}
.notif-empty{padding:22px;text-align:center;color:var(--muted);font-size:13px;}
.notif-list{max-height:340px;overflow-y:auto;overscroll-behavior:contain;}
.notif-list::-webkit-scrollbar{width:8px;}
.notif-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}
.notif-list::-webkit-scrollbar-track{background:transparent;}
.notif-foot{padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fafbfe;}
[data-theme="dark"] .notif-foot{background:#1c2330;}

/* ---------- DataTables (simple-datatables) theming ---------- */
.datatable-wrapper .datatable-top,
.datatable-wrapper .datatable-bottom{padding:14px 18px;}
.datatable-wrapper .datatable-input,
.datatable-wrapper .datatable-selector{
  border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:13.5px;
  background:#fff;color:var(--text);font-family:inherit;}
.datatable-wrapper .datatable-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-050);}
.datatable-wrapper .datatable-info{color:var(--muted);font-size:13px;}
.datatable-wrapper .datatable-pagination a,
.datatable-wrapper .datatable-pagination button{
  border-radius:8px;color:var(--text);font-size:13px;padding:6px 11px;cursor:pointer;}
.datatable-wrapper .datatable-pagination .datatable-active a,
.datatable-wrapper .datatable-pagination .datatable-active button{background:var(--primary);color:#fff;}
.datatable-wrapper .datatable-pagination a:hover{background:var(--primary-050);}
.datatable-wrapper table.datatable-table{width:100%;}
.datatable-wrapper th button.datatable-sorter{color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;}
[data-theme="dark"] .datatable-wrapper .datatable-input,
[data-theme="dark"] .datatable-wrapper .datatable-selector{background:#0d1117;color:var(--text);border-color:var(--border);}
[data-theme="dark"] .datatable-wrapper .datatable-pagination a:hover{background:#21262d;}
[data-theme="dark"] .datatable-wrapper .datatable-info{color:var(--muted);}

/* ---------- POS payment type & method pills ---------- */
.pay-type-group{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pay-type{border:1.5px solid var(--border);background:#fff;color:var(--text);border-radius:12px;
  padding:10px 6px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:.15s;}
.pay-type i{font-size:18px;}
.pay-type:hover{border-color:var(--primary);}
.pay-type.active{border-color:var(--primary);background:var(--primary-050);color:var(--primary);box-shadow:0 0 0 3px var(--primary-050);}
.method-pills{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.method-pill{border:1.5px solid var(--border);background:#fff;color:var(--text);border-radius:10px;
  padding:9px 10px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;transition:.15s;}
.method-pill i{font-size:16px;}
.method-pill:hover{border-color:var(--primary);}
.method-pill.active{border-color:var(--primary);background:var(--primary);color:#fff;}
[data-theme="dark"] .pay-type,[data-theme="dark"] .method-pill{background:#0d1117;}
[data-theme="dark"] .pay-type.active{background:var(--primary-050);color:var(--primary);}

/* ---------- Tom Select (searchable dropdowns) ---------- */
.ts-wrapper{min-width:0;}
.ts-control{border:1.5px solid var(--border)!important;border-radius:10px!important;background:#fff!important;
  color:var(--text)!important;font-family:inherit!important;min-height:42px;box-shadow:none!important;padding:6px 10px!important;}
.ts-control input{color:var(--text)!important;font-family:inherit!important;}
.ts-wrapper.focus .ts-control{border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--primary-050)!important;}
.ts-dropdown{border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);
  box-shadow:0 12px 30px rgba(16,24,40,.14);font-family:inherit;z-index:1060;}
.ts-dropdown .active{background:var(--primary-050);color:var(--primary);}
.ts-dropdown .option{padding:8px 12px;font-size:13.5px;}
.form-select.form-select-sm + .ts-wrapper .ts-control,.ts-wrapper.form-select-sm .ts-control{min-height:34px;}
[data-theme="dark"] .ts-control{background:#0d1117!important;}
[data-theme="dark"] .ts-dropdown{background:#161b22;color:var(--text);border-color:var(--border);}
[data-theme="dark"] .ts-dropdown .active{background:#21262d;color:var(--primary);}
[data-theme="dark"] .ts-control .item{color:var(--text)!important;}

/* ---------- Auth pages (login) — split panel, follows system theme & dark mode ---------- */
.auth-page{min-height:100vh;display:grid;place-items:center;background:var(--body-bg);padding:20px;}
.auth-shell{display:grid;grid-template-columns:1.05fr 1fr;width:100%;max-width:940px;background:var(--card);
  border:1px solid var(--border);border-radius:22px;overflow:hidden;
  box-shadow:0 24px 70px rgba(16,24,40,.18);animation:fadeUp .4s ease backwards;}
/* Brand side keeps the primary-colour gradient in both themes */
.auth-brand{background:linear-gradient(160deg,var(--primary-600),var(--primary));color:#fff;
  padding:46px 42px;display:flex;flex-direction:column;justify-content:space-between;min-height:560px;}
.auth-brand .brand-logo{display:flex;align-items:center;gap:14px;}
.auth-brand .brand-logo .mark{width:56px;height:56px;border-radius:15px;background:rgba(255,255,255,.15);
  display:grid;place-items:center;font-size:29px;border:1px solid rgba(255,255,255,.22);}
.auth-brand .brand-logo img{max-height:56px;max-width:190px;object-fit:contain;background:#fff;border-radius:13px;padding:7px 11px;}
.auth-brand .brand-logo h1{font-size:22px;font-weight:800;letter-spacing:.2px;margin:0;}
.auth-brand .brand-copy h2{font-size:29px;line-height:1.25;font-weight:800;margin:0 0 14px;}
.auth-brand .brand-copy p{color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.7;max-width:340px;margin:0;}
.auth-brand .brand-feats{display:grid;gap:12px;margin-top:26px;}
.auth-brand .brand-feats div{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.9);}
.auth-brand .brand-feats i{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:15px;flex:none;}
.auth-brand .brand-foot{font-size:12px;color:rgba(255,255,255,.55);}
/* Form side uses the system card surface so it flips with dark mode */
.auth-form{background:var(--card);padding:50px 46px;display:flex;flex-direction:column;justify-content:center;}
.auth-form h3{font-size:24px;font-weight:800;color:var(--text);margin:0;}
.auth-form .sub{color:var(--muted);font-size:14px;margin:6px 0 24px;}
.auth-form .lang-switch a{font-size:12.5px;color:var(--muted);}
.auth-form .lang-switch a.on{font-weight:700;color:var(--primary);}
@media (max-width:860px){
  .auth-shell{grid-template-columns:1fr;max-width:460px;}
  .auth-brand{min-height:auto;padding:32px 28px;gap:20px;}
  .auth-brand .brand-copy h2{font-size:22px;}
  .auth-brand .brand-feats{display:none;}
  .auth-form{padding:34px 28px;}
}
/* Dark-mode support for Bootstrap input-groups used on auth pages */
.input-group-text{background:var(--body-bg);border-color:var(--border);color:var(--muted);}
[data-theme="dark"] .input-group-text{background:#0d1117;border-color:var(--border);color:var(--muted);}
[data-theme="dark"] .form-control::placeholder{color:#5b6675;}

/* ---------- Dark-mode modals (delete confirmation etc.) ---------- */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-body p,
[data-theme="dark"] .modal-body li,
[data-theme="dark"] .modal-body label,
[data-theme="dark"] .modal-body strong{color:var(--text);}
[data-theme="dark"] .modal-body .text-muted{color:#b6c0d0!important;}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer{border-color:var(--border);}
[data-theme="dark"] .btn-close{filter:invert(1) grayscale(1) brightness(1.7);}

/* ============ Point of Sale ============ */
.pos-layout{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start;}
.pos-catalog{display:flex;flex-direction:column;min-height:60vh;}
.pos-catalog-head{padding:16px 16px 8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:2;border-radius:16px 16px 0 0;}
.pos-search{position:relative;margin-bottom:12px;}
.pos-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:18px;}
.pos-search input{width:100%;border:1px solid var(--border);background:var(--body-bg);border-radius:10px;padding:11px 14px 11px 40px;font-size:14px;color:var(--text);}
.pos-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-050);background:var(--card);}
.pos-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;}
.pos-tab{flex:none;border:1.5px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.12s;}
.pos-tab:hover{border-color:var(--primary);color:var(--primary);}
.pos-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.pos-brands{display:flex;align-items:center;gap:7px;overflow-x:auto;margin-top:8px;padding-bottom:4px;}
.pos-brands-label{font-size:12px;color:var(--muted);flex:none;font-weight:600;}
.pos-brand{flex:none;border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:8px;padding:4px 12px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.12s;}
.pos-brand:hover{border-color:var(--primary);color:var(--primary);}
.pos-brand.active{background:var(--primary-050);border-color:var(--primary);color:var(--primary);}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;padding:16px;overflow-y:auto;max-height:66vh;}
.pos-card{position:relative;border:1px solid var(--border);background:var(--card);border-radius:14px;padding:12px 10px 10px;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;transition:.14s;}
.pos-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,24,40,.10);}
.pos-card:active{transform:translateY(0);}
.pos-card.maxed{opacity:.55;}
.pos-card .pc-img{width:100%;height:64px;display:grid;place-items:center;border-radius:10px;background:var(--primary-050);overflow:hidden;}
.pos-card .pc-img img{width:100%;height:100%;object-fit:cover;}
.pos-card .pc-ph{font-size:30px;color:var(--primary);}
.pos-card .pc-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px;}
.pos-card .pc-meta{display:flex;flex-direction:column;gap:2px;width:100%;}
.pos-card .pc-price{font-weight:800;color:var(--primary);font-size:13.5px;}
.pos-card .pc-stock{font-size:11px;color:var(--muted);}
.pos-card .pc-badge{position:absolute;top:-7px;right:-7px;background:var(--success);color:#fff;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;font-size:12px;font-weight:700;padding:0 6px;box-shadow:0 2px 6px rgba(0,0,0,.2);}
.pos-empty{padding:60px 20px;text-align:center;color:var(--muted);}
.pos-empty i{font-size:40px;display:block;margin-bottom:8px;opacity:.6;}

/* Cart */
.pos-cart{position:sticky;top:88px;display:flex;flex-direction:column;max-height:calc(100vh - 104px);}
.pos-cart-head{padding:16px 16px 0;}
.pos-cart-items{flex:1;overflow-y:auto;padding:6px 16px;min-height:120px;max-height:36vh;}
.pos-cart-empty{text-align:center;color:var(--muted);padding:34px 10px;}
.pos-cart-empty i{font-size:34px;display:block;margin-bottom:8px;opacity:.5;}
.cart-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.cart-item .ci-info{flex:1;min-width:0;}
.cart-item .ci-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-item .ci-price{font-size:12px;color:var(--muted);}
.cart-item .ci-stepper{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.cart-item .ci-stepper button{border:none;background:var(--body-bg);color:var(--text);width:26px;height:28px;cursor:pointer;display:grid;place-items:center;font-size:14px;}
.cart-item .ci-stepper button:hover{background:var(--primary);color:#fff;}
.cart-item .ci-stepper span{min-width:26px;text-align:center;font-weight:700;font-size:13px;}
.cart-item .ci-stepper .ci-qty{width:40px;min-width:40px;text-align:center;font-weight:700;font-size:13px;border:none;background:transparent;color:var(--text);padding:0;height:28px;-moz-appearance:textfield;appearance:textfield;}
.cart-item .ci-stepper .ci-qty::-webkit-outer-spin-button,.cart-item .ci-stepper .ci-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cart-item .ci-stepper .ci-qty:focus{outline:none;background:var(--primary-050);}
.cart-item .ci-sub{font-weight:700;font-size:13px;color:var(--text);min-width:74px;text-align:right;}
.cart-item .ci-rm{border:none;background:none;color:var(--muted);cursor:pointer;font-size:16px;padding:2px;}
.cart-item .ci-rm:hover{color:var(--danger);}
.pos-cart-foot{padding:14px 16px 16px;border-top:1px solid var(--border);background:var(--card);border-radius:0 0 16px 16px;}
.pos-total{font-size:18px;}
[data-theme="dark"] .pos-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.4);}
@media (max-width:991px){
  .pos-layout{grid-template-columns:1fr;}
  .pos-cart{position:static;max-height:none;}
  .pos-grid{max-height:none;}
}