/* ==========================================================================
   SalesPOS-style theme layer for RehoPOS
   Tokens + Bootstrap 5 overrides. Loaded after bootstrap.min.css.
   ========================================================================== */
:root {
    --sp-primary: #7c5cc4;
    --sp-primary-dark: #6a4fb3;
    --sp-primary-rgb: 123, 95, 196;
    --sp-chart-purple: #7a4b9d;
    --sp-orange: #fe8a4b;
    --sp-green: #1f9a5f;
    --sp-green-rgb: 31, 154, 95;
    --sp-red: #e2574d;
    --sp-red-rgb: 226, 87, 77;
    --sp-blue: #3b7ddd;
    --sp-gray: #8a8f98;
    --sp-body-bg: #f7f7f7;
    --sp-card-bg: #ffffff;
    --sp-card-head-bg: #f8f8fa;
    --sp-border: #e9eaee;
    --sp-text: #5e5873;
    --sp-text-muted: #8a8599;
    --sp-sidebar-w: 230px;
    --sp-topbar-h: 56px;
    --sp-radius: 5px;
    --sp-btn-radius: 4px;
    --sp-shadow: 0 0 35px rgba(154, 161, 171, .15);
    --sp-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Bootstrap re-mapping */
    --bs-primary: var(--sp-primary);
    --bs-primary-rgb: var(--sp-primary-rgb);
    --bs-success-rgb: var(--sp-green-rgb);
    --bs-danger-rgb: var(--sp-red-rgb);
    --bs-link-color: var(--sp-primary);
    --bs-link-color-rgb: var(--sp-primary-rgb);
    --bs-link-hover-color: var(--sp-primary-dark);
    --bs-link-hover-color-rgb: 106, 79, 179;
    --bs-body-font-family: var(--sp-font);
    --bs-body-color: var(--sp-text);
    --bs-body-bg: var(--sp-body-bg);
    --bs-border-color: var(--sp-border);
}

html, body { font-family: var(--sp-font) !important; }
body { background-color: var(--sp-body-bg); color: var(--sp-text); font-size: 14.4px; }
.font-sans { font-family: var(--sp-font) !important; }

/* ---------- Layout shell ---------- */
.sp-wrapper { min-height: 100vh; }
.sp-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sp-sidebar-w);
    background: #fff; border-right: 1px solid var(--sp-border); z-index: 1030;
    overflow-y: auto; transition: transform .2s ease;
}
.sp-main { margin-left: var(--sp-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.sp-topbar {
    position: sticky; top: 0; z-index: 1020; height: var(--sp-topbar-h);
    background: #fff; border-bottom: 1px solid var(--sp-border);
    display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
}
.sp-content { flex: 1; padding: 16px 16px 8px; }
.sp-footer { text-align: center; color: var(--sp-text-muted); font-size: 13px; padding: 18px 16px 24px; }
.sp-footer a { color: var(--sp-primary); text-decoration: none; }

body.sp-sidebar-collapsed .sp-sidebar { transform: translateX(-100%); }
body.sp-sidebar-collapsed .sp-main { margin-left: 0; }
.sp-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1029; }
@media (max-width: 991.98px) {
    .sp-sidebar { transform: translateX(-100%); }
    .sp-main { margin-left: 0; }
    body.sp-sidebar-open .sp-sidebar { transform: translateX(0); }
    body.sp-sidebar-open .sp-backdrop { display: block; }
}

/* ---------- Brand ---------- */
.sp-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; height: var(--sp-topbar-h); text-decoration: none; }
.sp-brand img { max-height: 36px; width: auto; }
.sp-brand-name { font-weight: 800; font-size: 20px; letter-spacing: .5px; color: #1f7a56; line-height: 1; text-transform: uppercase; }
.sp-brand-tag { font-size: 8px; letter-spacing: 3px; color: #2d9a63; text-transform: uppercase; margin-top: 3px; }

/* Tailwind's `.collapse { visibility: collapse }` utility (from the Vite build) clashes with
   Bootstrap's `.collapse` component; restore Bootstrap's behaviour. */
.collapse { visibility: visible; }

/* ---------- Sidebar menu ---------- */
.sp-menu { list-style: none; margin: 0; padding: 8px 0 24px; }
.sp-menu > li > a, .sp-menu > li > button {
    display: flex; align-items: center; width: 100%; gap: 12px; padding: 10px 18px 10px 22px;
    color: var(--sp-text); background: none; border: 0; font-size: 13.5px; text-align: left; text-decoration: none;
}
.sp-menu > li > a:hover, .sp-menu > li > button:hover { color: var(--sp-primary); }
.sp-menu > li > a.active, .sp-menu > li.active > button { color: var(--sp-primary); }
.sp-menu .sp-ico { width: 18px; text-align: center; color: var(--sp-gray); font-size: 14px; }
.sp-menu > li > a.active .sp-ico, .sp-menu > li.active > button .sp-ico { color: var(--sp-primary); }
.sp-menu .sp-chev { margin-left: auto; font-size: 11px; color: var(--sp-gray); transition: transform .15s; }
.sp-menu > li > button[aria-expanded="true"] .sp-chev { transform: rotate(-90deg); }
.sp-submenu { list-style: none; margin: 4px 12px 8px; padding: 10px 0; background: #f3f2f7; border-radius: 6px; }
.sp-submenu a { display: block; padding: 8px 14px 8px 26px; font-size: 13px; color: var(--sp-text); text-decoration: none; }
.sp-submenu a:hover, .sp-submenu a.active { color: var(--sp-primary); }

/* ---------- Topbar pieces ---------- */
.sp-btn-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sp-radius); color: var(--sp-primary); background: #fff; border: 1px solid transparent; text-decoration: none; }
.sp-btn-icon:hover { background: rgba(var(--sp-primary-rgb), .08); color: var(--sp-primary-dark); }
.sp-btn-toggle { border-color: var(--sp-primary); }
.sp-btn-pos { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--sp-primary); border-radius: var(--sp-radius); color: var(--sp-primary); font-size: 13px; text-decoration: none; }
.sp-btn-pos:hover { background: var(--sp-primary); color: #fff; }
.sp-user-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--sp-text); font-size: 13px; background: none; border: 0; }
.sp-user-toggle::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: 10px; }
.sp-badge-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; border-radius: 8px; background: var(--sp-red); color: #fff; text-align: center; padding: 0 4px; }

/* ---------- Cards ---------- */
.card, .glass-card { background: var(--sp-card-bg); border: 0; border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); transition: none; }
.card:hover, .glass-card:hover { transform: none; box-shadow: var(--sp-shadow); }
.card-header { background: var(--sp-card-head-bg); border-bottom: 1px solid var(--sp-border); font-size: 14px; font-weight: 500; color: var(--sp-text); padding: 12px 16px; border-radius: var(--sp-radius) var(--sp-radius) 0 0 !important; }
.rounded-4, .rounded-3, .rounded-5 { border-radius: var(--sp-radius) !important; }
.sp-card-title { font-size: 14px; font-weight: 500; margin: 0; }
.sp-badge { font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 3px; background: var(--sp-primary); color: #fff; }

/* Stat cards */
.sp-stat { display: flex; align-items: center; gap: 22px; padding: 22px 26px; background: #fff; border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); min-height: 92px; }
.sp-stat .sp-stat-ico { font-size: 26px; line-height: 1; }
.sp-stat .sp-stat-val { font-size: 14px; color: var(--sp-text); line-height: 1.2; }
.sp-stat .sp-stat-lbl { font-size: 13.5px; margin-top: 2px; }
.sp-c-purple { color: var(--sp-primary) !important; }
.sp-c-orange { color: var(--sp-orange) !important; }
.sp-c-red { color: var(--sp-red) !important; }
.sp-c-green { color: var(--sp-green) !important; }
.sp-c-blue { color: var(--sp-blue) !important; }

/* Welcome header + period filter */
.sp-welcome { font-size: 15px; letter-spacing: .5px; color: #8e939b; text-transform: uppercase; }
.sp-welcome b { color: var(--sp-primary); font-weight: 600; }
.sp-period .btn { background: #7c8188; border-color: #7c8188; color: #fff; font-size: 12.5px; padding: 5px 10px; border-radius: 0; }
.sp-period .btn:first-child { border-radius: 3px 0 0 3px; }
.sp-period .btn:last-child { border-radius: 0 3px 3px 0; }
.sp-period .btn.active, .sp-period .btn:hover { background: #4f5459; border-color: #4f5459; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--sp-btn-radius); font-weight: 500; transition: background-color .15s, border-color .15s; box-shadow: none !important; transform: none !important; }
.btn:hover { transform: none !important; }
.btn-primary { --bs-btn-bg: var(--sp-primary); --bs-btn-border-color: var(--sp-primary); --bs-btn-hover-bg: var(--sp-primary-dark); --bs-btn-hover-border-color: var(--sp-primary-dark); --bs-btn-active-bg: var(--sp-primary-dark); --bs-btn-active-border-color: var(--sp-primary-dark); --bs-btn-disabled-bg: var(--sp-primary); --bs-btn-disabled-border-color: var(--sp-primary); background-color: var(--sp-primary) !important; border-color: var(--sp-primary) !important; }
.btn-primary:hover { background-color: var(--sp-primary-dark) !important; border-color: var(--sp-primary-dark) !important; }
.btn-outline-primary { --bs-btn-color: var(--sp-primary); --bs-btn-border-color: var(--sp-primary); --bs-btn-hover-bg: var(--sp-primary); --bs-btn-hover-border-color: var(--sp-primary); --bs-btn-active-bg: var(--sp-primary); --bs-btn-active-border-color: var(--sp-primary); }
.btn-success { --bs-btn-bg: var(--sp-green); --bs-btn-border-color: var(--sp-green); --bs-btn-hover-bg: #178550; --bs-btn-hover-border-color: #178550; }
.btn-danger { --bs-btn-bg: var(--sp-red); --bs-btn-border-color: var(--sp-red); --bs-btn-hover-bg: #c9463d; --bs-btn-hover-border-color: #c9463d; }
.rounded-pill.btn { border-radius: var(--sp-btn-radius) !important; }

/* ---------- Text / bg utilities re-mapped ---------- */
/* rgba(..., var(--bs-bg-opacity)) keeps Bootstrap's .bg-opacity-10 etc. working (tinted icon circles / cards) */
.text-primary { color: rgba(var(--sp-primary-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-primary { background-color: rgba(var(--sp-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-primary-subtle { background-color: rgba(var(--sp-primary-rgb), .1) !important; }
.border-primary { border-color: var(--sp-primary) !important; }
.text-success { color: rgba(var(--sp-green-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-success { background-color: rgba(var(--sp-green-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-danger { color: rgba(var(--sp-red-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-danger { background-color: rgba(var(--sp-red-rgb), var(--bs-bg-opacity, 1)) !important; }
.badge.bg-success { background-color: #2bb673 !important; font-weight: 600; font-size: 10.5px; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: var(--sp-radius); border: 1px solid #d9dbe0; font-size: 13.5px; min-height: 38px; }
.form-control:focus, .form-select:focus { border-color: var(--sp-primary); box-shadow: 0 0 0 .15rem rgba(var(--sp-primary-rgb), .18); }
.form-check-input:checked { background-color: var(--sp-primary); border-color: var(--sp-primary); }
.input-group-text { border-radius: var(--sp-radius); font-size: 13.5px; }
.select2-container--default .select2-selection--single { border-color: #d9dbe0; border-radius: var(--sp-radius); min-height: 38px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

/* ---------- Tables ---------- */
.table { background: #fff; backdrop-filter: none; border-radius: 0; font-size: 13px; color: var(--sp-text); }
.table > thead > tr > th { background: var(--sp-card-head-bg); color: #4d5158; font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--sp-border); white-space: nowrap; }
.table > tbody > tr > td { border-color: #f0f1f3; vertical-align: middle; }
.table-hover > tbody > tr:hover { background-color: #fafafb; transform: none; box-shadow: none; }
.sp-table-plain td, .sp-table-plain th { padding: 11px 14px; }
.sp-tabs .nav-link { color: var(--sp-primary); font-size: 13.5px; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; }
.sp-tabs .nav-link.active { color: var(--sp-text); border-bottom-color: var(--sp-primary); background: none; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { border: 1px solid #d9dbe0; border-radius: var(--sp-radius); padding: 4px 8px; }
.page-link { color: var(--sp-primary); }
.page-item.active .page-link { background-color: var(--sp-primary); border-color: var(--sp-primary); }

/* ---------- Modals / misc ---------- */
.modal-content { border-radius: var(--sp-radius); border: 0; backdrop-filter: none; }
.modal-header { border-radius: 0; background: var(--sp-card-head-bg); }
.breadcrumb-item.active { color: var(--sp-primary) !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c9cbd1; border-radius: 4px; }
.loader-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.55); display: flex; z-index: 9999; justify-content: center; align-items: center; }
.loader-overlay .spinner-border { width: 2.5rem; height: 2.5rem; color: var(--sp-primary); }
.alert { border-radius: var(--sp-radius); }

/* ---------- Login ---------- */
/* Background photo: shop owner on the right third of the image, so the card sits on the left and never covers her */
.sp-login-body { min-height: 100vh; margin: 0; background: url("../images/login-bg.jpg") right center / cover no-repeat, linear-gradient(135deg, #e9ecf3 0%, #d7dbe6 100%); display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.sp-login-card { width: 100%; max-width: 600px; background: rgba(255,255,255,.97); padding: 46px 150px 50px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
@media (max-width: 1199.98px) { .sp-login-card { max-width: 520px; padding: 40px 90px 44px; } }
/* Phones: the card drops to the bottom and the photo is anchored on the shop owner's face above it */
@media (max-width: 1023.98px) { .sp-login-body { background-position: 72% 18%; } }
.sp-login-card .sp-brand { height: auto; margin-bottom: 22px; }
.sp-login-card .sp-brand-name { font-size: 22px; }
.sp-login-label { display: block; font-size: 12.5px; color: var(--sp-primary); margin-bottom: 14px; }
.sp-login-input { display: block; width: 100%; border: 0; border-bottom: 1px solid #3c3f44; border-radius: 0; padding: 4px 0 8px; font-size: 14px; background: transparent; outline: none; min-height: 0; }
.sp-login-input:focus { border-bottom-color: var(--sp-primary); box-shadow: none; }
.sp-login-input.is-light { border-bottom-color: #d9dbe0; }
.sp-login-input::placeholder { color: #8e939b; font-size: 14px; }
.sp-login-btn { display: block; width: 100%; margin-top: 30px; padding: 9px 12px; background: var(--sp-primary); color: #fff; border: 0; border-radius: 3px; font-size: 14px; font-weight: 600; }
.sp-login-btn:hover { background: var(--sp-primary-dark); color: #fff; }
.sp-login-card .alert { font-size: 13px; padding: 8px 12px; }
@media (max-width: 640px) { .sp-login-card { padding: 36px 24px; } }

/* ==========================================================================
   Dark theme (toggled from the top bar; html[data-theme="dark"] + Bootstrap's data-bs-theme)
   ========================================================================== */
.sp-theme-ico-dark { display: none; }
:root[data-theme="dark"] .sp-theme-ico-light { display: none; }
:root[data-theme="dark"] .sp-theme-ico-dark { display: inline-block; }

:root[data-theme="dark"] {
    --sp-primary: #9b84d9;
    --sp-primary-dark: #b19ee4;
    --sp-primary-rgb: 155, 132, 217;
    --sp-body-bg: #16171c;
    --sp-card-bg: #1f2027;
    --sp-card-head-bg: #262730;
    --sp-border: #30323c;
    --sp-text: #d6d8de;
    --sp-text-muted: #9a9fa9;
    --sp-gray: #8b909b;
    --sp-shadow: 0 0 25px rgba(0, 0, 0, .35);
    --bs-body-bg: var(--sp-body-bg);
    --bs-body-color: var(--sp-text);
    --bs-border-color: var(--sp-border);
    --bs-tertiary-bg: #262730;
    --bs-secondary-bg: #262730;
}
:root[data-theme="dark"] body { background-color: var(--sp-body-bg); color: var(--sp-text); }
:root[data-theme="dark"] .sp-sidebar,
:root[data-theme="dark"] .sp-topbar { background: #1b1c22; border-color: var(--sp-border); }
:root[data-theme="dark"] .sp-brand-name { color: #4fcf8e; }
:root[data-theme="dark"] .sp-brand-tag { color: #3fb87b; }
:root[data-theme="dark"] .sp-menu > li > a,
:root[data-theme="dark"] .sp-menu > li > button { color: var(--sp-text); }
:root[data-theme="dark"] .sp-submenu { background: #1b1c22; border: 1px solid rgba(155, 132, 217, .55); }
:root[data-theme="dark"] .sp-submenu a { color: #b7bbc4; }
:root[data-theme="dark"] .sp-btn-icon,
:root[data-theme="dark"] .sp-btn-pos { background: transparent; }
:root[data-theme="dark"] .sp-user-toggle { color: var(--sp-text); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .glass-card,
:root[data-theme="dark"] .sp-stat { background: var(--sp-card-bg); color: var(--sp-text); }
:root[data-theme="dark"] .card-header { background: var(--sp-card-head-bg); color: var(--sp-text); border-color: var(--sp-border); }
:root[data-theme="dark"] .sp-stat .sp-stat-val { color: var(--sp-text); }
:root[data-theme="dark"] .sp-welcome { color: #8e939b; }
:root[data-theme="dark"] .sp-period .btn { background: #3a3d46; border-color: #3a3d46; }
:root[data-theme="dark"] .sp-period .btn.active,
:root[data-theme="dark"] .sp-period .btn:hover { background: #55596a; border-color: #55596a; }
:root[data-theme="dark"] .table { background: transparent; color: var(--sp-text); --bs-table-bg: transparent; --bs-table-color: var(--sp-text); --bs-table-hover-bg: #262730; --bs-table-hover-color: var(--sp-text); --bs-table-striped-bg: #23242c; }
:root[data-theme="dark"] .table > thead > tr > th { background: var(--sp-card-head-bg); color: #c3c7cf; border-color: var(--sp-border); }
:root[data-theme="dark"] .table > tbody > tr > td { border-color: var(--sp-border); }
:root[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: #262730; }
:root[data-theme="dark"] .sp-tabs .nav-link.active { color: var(--sp-text); }
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text { background-color: #262730; border-color: #3a3d46; color: var(--sp-text); }
:root[data-theme="dark"] .form-control::placeholder { color: #7d828a; }
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light { background-color: var(--sp-card-bg) !important; color: var(--sp-text); }
:root[data-theme="dark"] .text-dark { color: var(--sp-text) !important; }
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-secondary { color: var(--sp-text-muted) !important; }
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end { border-color: var(--sp-border) !important; }
:root[data-theme="dark"] .dropdown-menu { background: #23242c; border-color: var(--sp-border); --bs-dropdown-bg: #23242c; --bs-dropdown-color: var(--sp-text); --bs-dropdown-link-color: var(--sp-text); --bs-dropdown-link-hover-bg: #2d2e38; --bs-dropdown-link-hover-color: #fff; }
:root[data-theme="dark"] .modal-content { background: var(--sp-card-bg); color: var(--sp-text); }
:root[data-theme="dark"] .modal-header { background: var(--sp-card-head-bg); border-color: var(--sp-border); }
:root[data-theme="dark"] .select2-container--default .select2-selection--single { background-color: #262730; border-color: #3a3d46; }
:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sp-text); }
:root[data-theme="dark"] .select2-dropdown { background: #23242c; border-color: var(--sp-border); color: var(--sp-text); }
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-color: #262730; border-color: #3a3d46; color: var(--sp-text); }
:root[data-theme="dark"] .page-link { background: #23242c; border-color: var(--sp-border); }
:root[data-theme="dark"] .loader-overlay { background: rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .sp-footer { color: var(--sp-text-muted); }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: #1b1c22; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3d46; }

/* ==========================================================================
   List pages (SalesPOS table layout: action buttons, records-per-page, search, export buttons)
   ========================================================================== */
:root {
    --sp-teal: #1aa6b7;
    --sp-teal-dark: #158f9e;
    --sp-dt-pdf: #f4607f;
    --sp-dt-csv: #8d9095;
    --sp-dt-excel: #f7b500;
    --sp-dt-print: #2e8bef;
    --sp-dt-delete: #e74c3c;
    --sp-dt-colvis: #7b5fc4;
}
.sp-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.sp-page-actions .btn { font-size: 14px; padding: 7px 14px; }
.btn-sp-teal { --bs-btn-color: #fff; --bs-btn-bg: var(--sp-teal); --bs-btn-border-color: var(--sp-teal); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sp-teal-dark); --bs-btn-hover-border-color: var(--sp-teal-dark); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sp-teal-dark); --bs-btn-active-border-color: var(--sp-teal-dark); }
.sp-table-card { background: var(--sp-card-bg); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); padding: 14px 16px 16px; }
.sp-list .dataTables_wrapper .row.sp-dt-top { align-items: center; margin-bottom: 14px; }
.sp-list .dataTables_length label, .sp-list .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sp-text); margin: 0; }
.sp-list .dataTables_length select { min-width: 72px; padding: 5px 24px 5px 8px; color: var(--sp-primary); font-size: 13px; }
.sp-list .dataTables_filter input { width: 200px; margin: 0; padding: 5px 8px; }
.sp-list .dataTables_filter { text-align: center; }
.sp-list .dt-buttons { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.sp-list .dt-buttons .btn { width: 36px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff !important; border: 0; border-radius: 3px; font-size: 14px; }
.sp-list .dt-buttons .btn::after { display: none; }
.sp-list .dt-buttons .sp-dt-pdf { background: var(--sp-dt-pdf) !important; }
.sp-list .dt-buttons .sp-dt-csv { background: var(--sp-dt-csv) !important; }
.sp-list .dt-buttons .sp-dt-excel { background: var(--sp-dt-excel) !important; }
.sp-list .dt-buttons .sp-dt-print { background: var(--sp-dt-print) !important; }
.sp-list .dt-buttons .sp-dt-delete { background: var(--sp-dt-delete) !important; }
.sp-list .dt-buttons .sp-dt-colvis { background: var(--sp-dt-colvis) !important; width: 44px; }
.sp-list .dt-buttons .sp-dt-colvis::after { display: inline-block; margin-left: 4px; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; }
.sp-list .dt-button-collection { padding: 6px 0; min-width: 160px; }
.sp-list .dt-button-collection .dropdown-item.active { background: var(--sp-primary); color: #fff; }
.sp-list table.dataTable > thead > tr > th { padding: 14px 12px; }
.sp-list table.dataTable > tbody > tr > td { padding: 14px 12px; font-size: 13.5px; }
.sp-list table.dataTable > thead .sorting::before, .sp-list table.dataTable > thead .sorting::after,
.sp-list table.dataTable > thead .sorting_asc::before, .sp-list table.dataTable > thead .sorting_asc::after,
.sp-list table.dataTable > thead .sorting_desc::before, .sp-list table.dataTable > thead .sorting_desc::after { opacity: .35; }
.sp-list .dataTables_info { font-size: 14px; color: var(--sp-text); padding-top: 10px; }
.sp-list .form-check-input { width: 15px; height: 15px; border-color: #b8bcc4; }
.sp-list .sp-thumb { width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 1px solid var(--sp-border); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #a6aab2; font-size: 18px; }
.sp-list .sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-action > .btn { color: var(--sp-primary); border: 1px solid var(--sp-primary); background: transparent; font-size: 13px; padding: 5px 12px; }
.sp-action > .btn:hover, .sp-action > .btn:focus, .sp-action.show > .btn { background: var(--sp-primary); color: #fff; }
.sp-action .dropdown-menu { font-size: 13.5px; min-width: 150px; }
.sp-action .dropdown-item i { width: 18px; color: var(--sp-text-muted); }
.sp-bulk-bar { display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border: 1px solid rgba(var(--sp-primary-rgb), .35); border-radius: var(--sp-radius); background: rgba(var(--sp-primary-rgb), .08); font-size: 13px; }
.sp-nowrap { white-space: nowrap; }

/* ---------- Form pages (Add Product etc.) ---------- */
.sp-form-card .card-header { font-size: 15px; font-weight: 400; padding: 14px 20px; }
.sp-form-card .card-body { padding: 20px; }
.sp-form-note { font-size: 11.5px; font-style: italic; color: var(--sp-text-muted); margin-bottom: 16px; }
.sp-form .form-label { font-size: 13.5px; font-weight: 400; color: var(--sp-text); margin-bottom: 6px; }
.sp-form .form-text { font-size: 12px; font-style: italic; }
.sp-form .form-control, .sp-form .form-select { font-size: 13.5px; }
.sp-form .form-check-label { font-size: 13.5px; }
.sp-form .sp-help { color: var(--sp-primary); cursor: help; font-size: 12px; margin-left: 2px; }
.sp-form .table > thead > tr > th { font-size: 12.5px; }
.sp-form-card .btn-primary { padding: 7px 16px; }

/* ==========================================================================
   POS panel (SalesPOS layout: isolated full-screen page, no sidebar, top bar or footer)
   ========================================================================== */
:root {
    --sp-pos-pay: #15c3c3;
    --sp-pos-pay-dark: #10a8a8;
    --sp-pos-draft: #f09a1a;
    --sp-pos-draft-dark: #d8870f;
    --sp-pos-points: #2b9a8e;
    --sp-pos-points-dark: #23857a;
    --sp-pos-cancel: #e53935;
    --sp-pos-cancel-dark: #c62828;
    --sp-pos-recent: #ffc107;
    --sp-pos-recent-dark: #e6ad00;
    --sp-pos-brand: #17a2b8;
    --sp-pos-grand-bg: #e3e4ff;
    --sp-pos-grand-text: #7b5fc4;
}
.sp-pos-body { background: var(--sp-body-bg); margin: 0; overflow: hidden; }
.sp-pos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; height: 100vh; padding: 10px 10px 0; }
.sp-pos-col { display: flex; flex-direction: column; min-height: 0; }
.sp-pos-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; background: var(--sp-card-bg); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); }

/* Left: header fields */
.sp-pos-fields { padding: 12px 12px 6px; display: grid; gap: 10px; }
.sp-pos-fields .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.sp-pos-fields .row-2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.sp-pos-fields .form-control, .sp-pos-fields .form-select { min-height: 40px; font-size: 13.5px; background-color: var(--sp-card-head-bg); border-color: transparent; color: var(--sp-text); }
.sp-pos-fields .form-control::placeholder { color: var(--sp-text-muted); }
.sp-pos-fields .select2-container--default .select2-selection--single { min-height: 40px; background-color: var(--sp-card-head-bg); border-color: transparent; }
.sp-pos-fields .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; font-size: 13.5px; color: var(--sp-primary); }
.sp-pos-fields .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.sp-pos-fields .form-select { color: var(--sp-primary); }
.sp-pos-customer { display: flex; gap: 4px; align-items: stretch; min-width: 0; }
.sp-pos-customer > .select2-container, .sp-pos-customer > select { flex: 1; min-width: 0; }
.sp-pos-customer .btn { min-height: 40px; padding: 0 12px; border-color: var(--sp-primary); color: var(--sp-primary); }
.sp-pos-newcust { display: none; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 10px; border-radius: var(--sp-radius); background: rgba(var(--sp-primary-rgb), .12); color: var(--sp-text); }
.sp-pos-newcust .btn { padding: 0 6px; font-size: 12px; }
.sp-pos-search { position: relative; }
.sp-pos-search .form-control { padding-left: 14px; }

/* Left: cart table */
.sp-pos-cart-scroll { flex: 1; min-height: 120px; overflow: auto; padding: 0 12px; }
.sp-pos-cart-table { margin: 0; font-size: 13px; --bs-table-bg: transparent; }
.sp-pos-cart-table > thead > tr > th { position: sticky; top: 0; z-index: 2; padding: 12px 8px; font-size: 13px; font-weight: 600; background: var(--sp-card-bg); border-bottom: 1px solid var(--sp-border); color: var(--sp-text); }
.sp-pos-cart-table > tbody > tr > td { padding: 8px; vertical-align: middle; border-color: var(--sp-border); color: var(--sp-text); }
.sp-pos-pname { font-weight: 500; line-height: 1.3; }
.sp-pos-pcode { font-size: 11px; color: var(--sp-text-muted); }
.sp-pos-cart-table .unit-select { min-height: 28px; font-size: 12px; padding: 2px 22px 2px 6px; margin-top: 4px; max-width: 130px; }
.sp-pos-cart-table .form-control { min-height: 32px; font-size: 13px; padding: 4px 8px; background-color: var(--sp-card-head-bg); border-color: transparent; color: var(--sp-text); }
.sp-pos-cart-table .price-input { width: 96px; text-align: right; }
.sp-pos-cart-table .price-input[readonly] { background: transparent; }
.sp-pos-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--sp-border); border-radius: var(--sp-radius); overflow: hidden; width: 112px; }
.sp-pos-qty button { width: 28px; border: 0; background: var(--sp-card-head-bg); color: var(--sp-text); font-size: 14px; line-height: 1; }
.sp-pos-qty button:hover { background: var(--sp-primary); color: #fff; }
.sp-pos-qty input.form-control { border: 0; border-radius: 0; text-align: center; min-height: 30px; font-weight: 600; width: 56px; padding: 2px 4px; background: var(--sp-card-bg) !important; }
.sp-pos-qty input.form-control:focus { box-shadow: none; }
.sp-pos-cart-table .is-invalid { border-color: var(--sp-red) !important; }
.sp-pos-cart-table .qty-error { display: none; font-size: 11px; color: var(--sp-red); }
.sp-pos-cart-table .qty-error:not(:empty) { display: block; }
.sp-pos-cart-table .amount-display { font-weight: 600; background: transparent !important; border-color: transparent !important; text-align: right; width: 110px; padding-right: 0; }
.sp-pos-remove { color: var(--sp-red); background: none; border: 0; font-size: 15px; padding: 2px 6px; }
.sp-pos-empty { padding: 48px 16px; text-align: center; color: var(--sp-text-muted); font-size: 13px; }

/* Left: summary + grand total */
.sp-pos-summary { margin: 0 12px; border-top: 2px solid var(--sp-text); padding: 8px 0 6px; display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 0; font-size: 13px; }
.sp-pos-summary .cell { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.sp-pos-summary .cell.r2 { border-top: 1px solid var(--sp-border); }
.sp-pos-summary .lbl { color: var(--sp-text-muted); min-width: 56px; }
.sp-pos-summary .val { color: var(--sp-text); font-weight: 500; margin-left: auto; text-align: right; }
.sp-pos-summary .edit { color: var(--sp-blue); background: none; border: 0; padding: 0 4px; font-size: 13px; line-height: 1; }
.sp-pos-summary .edit:disabled { color: var(--sp-text-muted); opacity: .6; }
.sp-pos-grand { margin: 4px 0 0; padding: 12px; text-align: center; font-size: 24px; font-weight: 700; color: var(--sp-pos-grand-text); background: var(--sp-pos-grand-bg); border-radius: 0 0 var(--sp-radius) var(--sp-radius); }
.sp-pos-grand .sp-pos-strike { font-size: 14px; font-weight: 400; color: var(--sp-text-muted); text-decoration: line-through; margin-right: 10px; }

/* Left: action buttons */
.sp-pos-actions { display: flex; gap: 10px; padding: 14px 0 12px; flex-wrap: wrap; }
.sp-pos-actions .btn { color: #fff; font-size: 15px; font-weight: 500; padding: 8px 18px; border: 0; border-radius: 3px; }
.sp-pos-actions .btn i { margin-right: 4px; }
.btn-pos-pay { background: var(--sp-pos-pay); } .btn-pos-pay:hover { background: var(--sp-pos-pay-dark); color: #fff; }
.btn-pos-draft { background: var(--sp-pos-draft); } .btn-pos-draft:hover { background: var(--sp-pos-draft-dark); color: #fff; }
.btn-pos-points { background: var(--sp-pos-points); } .btn-pos-points:hover { background: var(--sp-pos-points-dark); color: #fff; }
.btn-pos-cancel { background: var(--sp-pos-cancel); } .btn-pos-cancel:hover { background: var(--sp-pos-cancel-dark); color: #fff; }
.btn-pos-recent { background: var(--sp-pos-recent); } .btn-pos-recent:hover { background: var(--sp-pos-recent-dark); color: #fff; }
.sp-pos-actions .btn .badge { font-size: 10px; margin-left: 4px; }

/* Right: top bar */
.sp-pos-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--sp-card-bg); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); margin-bottom: 12px; }
.sp-pos-topbar .sp-btn-toggle { width: 40px; height: 40px; border-color: var(--sp-primary); }
.sp-pos-topbar .sp-btn-icon { background: transparent; width: 36px; height: 36px; color: var(--sp-primary); }
.sp-pos-topbar .sp-user-toggle { color: var(--sp-text); font-size: 14px; }
.sp-pos-topbar .sp-user-toggle i { color: var(--sp-primary); }

/* Right: filter buttons + chips */
.sp-pos-filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding: 0 2px 12px; }
.sp-pos-filters .btn { color: #fff; font-size: 15px; font-weight: 500; padding: 8px 10px; border: 2px solid transparent; border-radius: 3px; }
.sp-pos-filters .btn.active { color: #fff; border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.btn-pos-category { background: var(--sp-primary); --bs-btn-active-bg: var(--sp-primary); --bs-btn-active-color: #fff; } .btn-pos-category:hover { background: var(--sp-primary-dark); color: #fff; }
.btn-pos-brand { background: var(--sp-pos-brand); --bs-btn-active-bg: var(--sp-pos-brand); --bs-btn-active-color: #fff; } .btn-pos-brand:hover { background: #138496; color: #fff; }
.btn-pos-featured { background: var(--sp-pos-cancel); --bs-btn-active-bg: var(--sp-pos-cancel); --bs-btn-active-color: #fff; } .btn-pos-featured:hover { background: var(--sp-pos-cancel-dark); color: #fff; }
.sp-pos-chips { display: none; flex-wrap: wrap; gap: 6px; padding: 0 2px 10px; }
.sp-pos-chips.show { display: flex; }
.sp-pos-chips .btn { white-space: nowrap; font-size: 12.5px; padding: 3px 12px; border-radius: 20px; border: 1px solid var(--sp-border); color: var(--sp-text); background: var(--sp-card-bg); }
.sp-pos-chips .btn.active { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }

/* Right: product grid */
.sp-pos-grid-wrap { flex: 1; min-height: 0; overflow: auto; }
.sp-pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; }
.sp-pos-item { position: relative; cursor: pointer; background: var(--sp-card-bg); border: 1px solid var(--sp-border); border-radius: 4px; text-align: center; padding: 12px 8px 10px; user-select: none; transition: border-color .12s, box-shadow .12s; box-shadow: var(--sp-shadow); }
.sp-pos-item:hover { border-color: var(--sp-primary); box-shadow: 0 0 0 2px rgba(var(--sp-primary-rgb), .18); }
.sp-pos-item:active { transform: scale(.98); }
.sp-pos-item .sp-pos-img { width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%; background: #f1f2f5; border: 1px solid var(--sp-border); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #a6aab2; font-size: 28px; }
.sp-pos-item .sp-pos-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-pos-item .sp-pos-name { font-size: 12.5px; line-height: 1.3; max-height: 2.6em; overflow: hidden; color: var(--sp-text); }
.sp-pos-item .sp-pos-code { font-size: 11px; color: var(--sp-text-muted); margin-top: 2px; }
.sp-pos-item .sp-pos-price { font-size: 13px; font-weight: 600; color: var(--sp-primary); margin-top: 4px; }
.sp-pos-item .sp-pos-stock { position: absolute; top: 6px; right: 6px; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 10px; background: rgba(31, 154, 95, .15); color: var(--sp-green); }
.sp-pos-item.sp-low .sp-pos-stock { background: rgba(226, 87, 77, .15); color: var(--sp-red); }
.sp-pos-item.d-none { display: none !important; }
.sp-pos-grid-empty { padding: 14px 16px; text-align: center; color: var(--sp-text); font-size: 13.5px; background: var(--sp-card-bg); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); }
.sp-pos-pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 2px; font-size: 12.5px; color: var(--sp-text-muted); }
.sp-pos-pager .btn { width: 32px; height: 36px; padding: 0; background: #d0d3da; border: 0; border-radius: 0; color: #4d5158; }
.sp-pos-pager .btn:first-of-type { border-radius: 3px 0 0 3px; }
.sp-pos-pager .btn:last-of-type { border-radius: 0 3px 3px 0; }
.sp-pos-pager .btn:disabled { opacity: .55; }

/* Off-canvas main menu (hamburger) reuses the sidebar component */
.sp-pos-offcanvas { width: 250px; background: var(--sp-card-bg); color: var(--sp-text); }
.sp-pos-offcanvas .sp-sidebar { position: static; transform: none; width: 100%; height: 100%; border: 0; }
.sp-pos-offcanvas .sp-backdrop { display: none !important; }

/* Modals used by the POS */
.sp-pos-modal .modal-content { background: var(--sp-card-bg); color: var(--sp-text); }
.sp-pos-modal .table { font-size: 13px; }
.sp-pos-card-reader .form-control { min-height: 36px; font-size: 13px; }
.sp-pos-loyalty .alert { padding: 8px 10px; margin: 0; font-size: 13px; }
.sp-pos-loyalty .progress { height: 4px; width: 160px; }
.sp-pos-discount-banner { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; margin: 10px 0 0; border-radius: var(--sp-radius); background: rgba(31, 154, 95, .12); border: 1px solid rgba(31, 154, 95, .3); font-size: 13px; }
.sp-pos-pay-total { font-size: 28px; font-weight: 700; color: var(--sp-primary); }
.sp-pos-debt-fields { display: none; margin-top: 8px; }
.sp-pos-kbd kbd { background: var(--sp-card-head-bg); color: var(--sp-text); border: 1px solid var(--sp-border); font-size: 11px; padding: 1px 5px; border-radius: 3px; }

@media (max-width: 991.98px) {
    .sp-pos-body { overflow: auto; }
    .sp-pos { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
    .sp-pos-col { min-height: 520px; }
    .sp-pos-fields .row-3, .sp-pos-fields .row-2 { grid-template-columns: 1fr; }
    .sp-pos-summary { grid-template-columns: 1fr 1fr; }
    .sp-pos-grid-wrap { max-height: 70vh; }
}
@media (max-width: 575.98px) {
    .sp-pos-actions .btn { flex: 1 1 45%; font-size: 13.5px; padding: 8px 6px; }
    .sp-pos-filters { gap: 8px; }
}

/* Dark theme: SalesPOS keeps the lavender grand-total bar and light product circles */
:root[data-theme="dark"] .sp-pos-fields .form-control,
:root[data-theme="dark"] .sp-pos-fields .form-select,
:root[data-theme="dark"] .sp-pos-fields .select2-container--default .select2-selection--single { background-color: #2a2d3e; }
:root[data-theme="dark"] .sp-pos-cart-table .form-control { background-color: #2a2d3e; }
:root[data-theme="dark"] .sp-pos-qty { border-color: #3a3d46; }
:root[data-theme="dark"] .sp-pos-qty button { background: #2b2c35; }
:root[data-theme="dark"] .sp-pos-summary { border-top-color: #e5e7ee; }
:root[data-theme="dark"] .sp-pos-pager .btn { background: #3a3d46; color: #c3c7cf; }
:root[data-theme="dark"] .sp-pos-chips .btn { background: #2b2c35; border-color: #3a3d46; }
:root[data-theme="dark"] .sp-pos-chips .btn.active { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
:root[data-theme="dark"] .sp-pos-discount-banner { background: rgba(79, 207, 142, .12); border-color: rgba(79, 207, 142, .3); }
:root[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background: #262730; border-color: #3a3d46; color: var(--sp-text); }
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--sp-primary); color: #fff; }
:root[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background: #2d2e38; }
:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #7d828a; }

/* ---------- Dark theme additions for the new pieces ---------- */
:root[data-theme="dark"] .sp-list .sp-thumb { background: #f1f2f5; border-color: #f1f2f5; color: #8d9095; }
:root[data-theme="dark"] .sp-list .form-check-input { background-color: #262730; border-color: #4a4e5a; }
:root[data-theme="dark"] .sp-list .form-check-input:checked { background-color: var(--sp-primary); border-color: var(--sp-primary); }
:root[data-theme="dark"] .sp-list .dataTables_length select { background-color: #262730; color: var(--sp-primary); }
:root[data-theme="dark"] .sp-list .dt-button-collection { background: #23242c; border-color: var(--sp-border); }
:root[data-theme="dark"] .sp-list .dt-button-collection .dropdown-item { color: var(--sp-text); }
:root[data-theme="dark"] .sp-list .dt-button-collection .dropdown-item:hover { background: #2d2e38; }
:root[data-theme="dark"] .sp-table-card { background: var(--sp-card-bg); }
:root[data-theme="dark"] .sp-action > .btn { color: var(--sp-primary); border-color: var(--sp-primary); }
:root[data-theme="dark"] .sp-action > .btn:hover, :root[data-theme="dark"] .sp-action.show > .btn { background: var(--sp-primary); color: #fff; }
:root[data-theme="dark"] .sp-pos-qty { border-color: #3a3d46; }
:root[data-theme="dark"] .sp-pos-qty button { background: #2b2c35; color: var(--sp-text); }
:root[data-theme="dark"] .sp-pos-qty input.form-control { background: #262730; }
:root[data-theme="dark"] .sp-pos-item .sp-pos-img { background: #f1f2f5; border-color: #f1f2f5; color: #8d9095; }
:root[data-theme="dark"] .sp-pos-discount-banner { background: rgba(79, 207, 142, .12); border-color: rgba(79, 207, 142, .3); }
:root[data-theme="dark"] .sp-pos-cart-table .amount-display { color: var(--sp-text); }
:root[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background: #262730; border-color: #3a3d46; color: var(--sp-text); }
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--sp-primary); color: #fff; }
:root[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background: #2d2e38; }
:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #7d828a; }
:root[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239a9fa9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
:root[data-theme="dark"] .form-check-input { background-color: #262730; border-color: #4a4e5a; }
:root[data-theme="dark"] .form-check-input:checked { background-color: var(--sp-primary); border-color: var(--sp-primary); }
:root[data-theme="dark"] .btn-light, :root[data-theme="dark"] .btn-white { background: #2b2c35; border-color: #3a3d46; color: var(--sp-text); }
:root[data-theme="dark"] .list-group-item { background: var(--sp-card-bg); color: var(--sp-text); border-color: var(--sp-border); }
:root[data-theme="dark"] .alert-info { background: rgba(59, 125, 221, .15); border-color: rgba(59, 125, 221, .3); color: var(--sp-text); }
:root[data-theme="dark"] .alert-success { background: rgba(79, 207, 142, .12); border-color: rgba(79, 207, 142, .3); color: var(--sp-text); }
:root[data-theme="dark"] .alert-danger { background: rgba(226, 87, 77, .15); border-color: rgba(226, 87, 77, .3); color: var(--sp-text); }
:root[data-theme="dark"] .bg-light-subtle, :root[data-theme="dark"] .bg-secondary-subtle, :root[data-theme="dark"] .bg-primary-subtle { background-color: #262730 !important; }
:root[data-theme="dark"] .table-light, :root[data-theme="dark"] .table-light > th, :root[data-theme="dark"] .table-light > td { --bs-table-bg: #262730; --bs-table-color: var(--sp-text); background: #262730; color: var(--sp-text); }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
:root[data-theme="dark"] .modal-footer { border-color: var(--sp-border); }
:root[data-theme="dark"] .modal-footer.bg-light { background: var(--sp-card-head-bg) !important; }
:root[data-theme="dark"] kbd { background: #2b2c35; color: var(--sp-text); }
:root[data-theme="dark"] .card.bg-light, :root[data-theme="dark"] .card-header.bg-white { background: var(--sp-card-head-bg) !important; }
:root[data-theme="dark"] .text-body, :root[data-theme="dark"] .text-black { color: var(--sp-text) !important; }
:root[data-theme="dark"] .border-light { border-color: var(--sp-border) !important; }
:root[data-theme="dark"] .form-control[readonly] { background: #22232b; }

/* DataTables scrollX clones the header into the scroll body; keep that hidden clone flat */
.sp-list .dataTables_scrollBody > table > thead > tr > th,
.sp-list .dataTables_scrollBody > table > thead > tr > td { padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; line-height: 0; height: 0; }
.sp-list .dataTables_scrollHead { border-bottom: 0; }

/* ---------- Calendar reports (daily sale / purchase) ---------- */
.sp-calendar { font-size: 13px; }
.sp-calendar > thead > tr > th { background: var(--sp-card-head-bg); font-weight: 600; padding: 10px 12px; border-color: var(--sp-border); }
.sp-calendar .sp-calendar-nav th { background: rgba(var(--sp-primary-rgb), .08); }
.sp-calendar .sp-calendar-nav a { color: var(--sp-primary); text-decoration: none; font-weight: 500; }
.sp-calendar td { border-color: var(--sp-border); vertical-align: top; }
.sp-calendar-cell { height: 96px; padding: 8px 10px; width: 14.28%; }
.sp-calendar-cell.is-today .sp-calendar-day { color: var(--sp-red); }
.sp-calendar-day { font-weight: 700; margin-bottom: 6px; }
.sp-calendar-item { margin-bottom: 8px; line-height: 1.3; }
.sp-calendar-item strong { display: block; font-weight: 600; }
.sp-calendar-item span { color: var(--sp-text-muted); }
:root[data-theme="dark"] .sp-calendar > thead > tr > th { background: var(--sp-card-head-bg); }

/* Avatar-style thumb for people lists (initial letter) */
.sp-list .sp-thumb-avatar { font-weight: 600; color: var(--sp-primary, #7c5cc4); background: #efeaf8; border-color: #e3dcf3; }
:root[data-theme="dark"] .sp-list .sp-thumb-avatar { background: #efeaf8; border-color: #efeaf8; }