/* ==========================================================================
   MODERN THEME v3 — clean light redesign, green accent, fluid & responsive
   Loaded AFTER styles.css. Overrides colors/typography/spacing/shape only.
   No structural classes/IDs touched, so all existing JS keeps working.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Kantumruy+Pro:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#141b17;
  --ink-soft:#6b7a72;
  --ink-faint:#94a29b;
  --line:#e3ede6;
  --bg:#f5f9f6;
  --card:#ffffff;

  --brand:#22c55e;
  --brand-dark:#15803d;
  --brand-light:#4ade80;
  --brand-soft:#e9faf0;
  --brand-soft-2:#d7f5e3;

  --side-bg:#189b52;
  --side-bg-2:#0e7a3f;
  --side-text:rgba(255,255,255,.78);
  --side-text-active:#ffffff;
  --side-active-bg:rgba(255,255,255,.16);

  --panel-dark:#0f2318;
  --panel-dark-2:#173a26;

  --success:#16a34a;
  --danger:#e11d48;
  --warning:#f59e0b;
  --info:#0891b2;
  --purple:#7c3aed;

  --radius-lg:18px;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 2px 4px rgba(18,40,26,.03), 0 10px 28px rgba(18,40,26,.07);
  --shadow-sm:0 1px 3px rgba(18,40,26,.06);
  --shadow-lift:0 14px 32px rgba(18,40,26,.14);
}

/* ---------- fit-the-screen basics ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
.wrapper{ max-width:100%; }
.content-wrapper, .box, .table-responsive{ max-width:100%; }

/* generic images: only constrain ones with NO explicit size attribute,
   so logos/thumbnails that already declare width/height keep working */
img:not([width]):not([height]){ max-width:100%; height:auto; }

/* ---------- base ---------- */
html, body{
  background:var(--bg) !important;
  color:var(--ink);
  font-family:'Inter','Kantumruy Pro',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand-dark); }
a:hover, a:focus{ color:var(--brand); }
::selection{ background:var(--brand); color:#fff; }
h1,h2,h3,h4,h5,h6{ font-weight:700; color:var(--ink); letter-spacing:-.01em; font-family:'Inter','Kantumruy Pro',Helvetica,Arial,sans-serif; }

/* every Khmer text element across the app: table cells, buttons, labels,
   sidebar, everywhere. Base stylesheet pins specific elements (body,
   headings, inputs) to 'Khmer OS Battambang' (a local system font) with
   their own specificity, so a blanket override needs !important to
   reliably beat all of them at once. Icon-font classes (.fa/.glyphicon)
   are excluded — overriding their font-family would turn every icon in
   the app into garbled characters instead of icon glyphs. */
*:not(.fa):not(.glyphicon), *:not(.fa):not(.glyphicon)::before, *:not(.fa):not(.glyphicon)::after{
  font-family:'Inter','Kantumruy Pro',Helvetica,Arial,sans-serif !important;
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#cfe0d5; border-radius:20px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#aecab9; }

/* ==========================================================================
   LOGO FIX — uploaded logos/images now always fit their slot instead of
   rendering at native size. This is the main bug fix requested.
   ========================================================================== */
.main-header .logo{
  display:flex;
  align-items:center;
  padding:0 14px;
  overflow:hidden;
}
.main-header .logo .logo-lg{
  display:flex !important;
  align-items:center;
  height:100%;
  max-width:170px;
  overflow:hidden;
  margin-top:0 !important;
}
.main-header .logo .logo-lg img{
  max-height:34px !important;
  height:auto !important;
  width:auto !important;
  max-width:150px !important;
  object-fit:contain;
}
.main-header .logo .logo-mini img{
  max-height:28px !important;
  width:auto !important;
  object-fit:contain;
}

/* ---------- top header ---------- */
.main-header{
  background:var(--card) !important;
  box-shadow:none;
  border-bottom:1px solid var(--line);
}
.main-header .logo{
  background:var(--card) !important;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  font-weight:800;
  color:var(--ink);
  letter-spacing:.01em;
}
.main-header .logo:hover{ background:var(--brand-soft) !important; }
.main-header .navbar{ background:var(--card) !important; }
.main-header .navbar .nav > li > a{
  color:var(--ink-soft) !important;
  border-radius:50%;
  width:38px;
  height:38px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  margin:0 2px;
  padding:0 !important;
  transition:.15s ease;
}
.main-header .navbar .nav > li.dropdown > a{ width:auto; border-radius:999px; padding:0 12px !important; }
.main-header .navbar .nav > li > a > i{ font-size:15px; }
.main-header .navbar .nav > li > a.clock{
  width:auto; border-radius:999px; padding:0 14px !important;
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus{
  background:var(--brand-soft) !important;
  color:var(--brand-dark) !important;
}
.main-header .sidebar-toggle{ color:var(--ink-soft) !important; border-radius:999px; }
.main-header .sidebar-toggle:hover{ background:var(--brand-soft) !important; color:var(--brand-dark) !important; }
.main-header .navbar-custom-menu .label{
  top:6px; right:2px; border-radius:999px; font-weight:700; box-shadow:0 0 0 2px var(--card);
}
.main-header .user-menu .user-image{
  border-radius:50%;
  box-shadow:0 0 0 2px var(--brand-soft-2);
  width:30px; height:30px; margin-top:-3px;
}
.main-header .clock{ font-weight:700; color:var(--ink); background:var(--brand-soft); border-radius:999px; padding:6px 14px !important; }

/* dropdowns everywhere */
.dropdown-menu{
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
  padding:6px;
  margin-top:10px;
}
.dropdown-menu > li > a{ border-radius:var(--radius-sm); padding:9px 12px; color:var(--ink); font-weight:500; }
.dropdown-menu > li > a:hover{ background:var(--brand-soft); color:var(--brand-dark); }
.dropdown-menu .divider{ background:var(--line); }
.navbar-nav > .user-menu .dropdown-menu .user-header{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark)) !important;
  border-radius:var(--radius) var(--radius) 0 0;
}
.navbar-nav > .user-menu .dropdown-menu .user-footer{
  background:var(--card);
  border-top:1px solid var(--line);
}

/* ---------- sidebar (bold green, not white) ---------- */
.main-sidebar, .left-side{
  background:linear-gradient(180deg, var(--side-bg), var(--side-bg-2)) !important;
  border-right:0;
  box-shadow:none;
}
.sidebar-menu > li > a{
  color:var(--side-text) !important;
  font-weight:600;
  font-size:13.5px;
  margin:2px 10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border-left:0;
  transition:.15s ease;
}
.sidebar-menu > li > a > i{ width:20px; text-align:center; color:var(--side-text); }
.sidebar-menu > li:hover > a,
.sidebar-menu > li:focus > a{
  background:rgba(255,255,255,.1) !important;
  color:var(--side-text-active) !important;
}
.sidebar-menu > li:hover > a > i,
.sidebar-menu > li:focus > a > i{ color:var(--side-text-active) !important; }
.sidebar-menu > li.active > a{
  background:var(--side-active-bg) !important;
  color:var(--side-text-active) !important;
  font-weight:700;
}
.sidebar-menu > li.active > a > i{ color:var(--side-text-active) !important; }
.sidebar-menu .treeview-menu{ background:rgba(0,0,0,.1) !important; margin:0 10px 4px; border-radius:var(--radius-sm); }
.sidebar-menu .treeview-menu > li > a{
  color:var(--side-text) !important;
  font-weight:500;
  padding:8px 14px 8px 34px;
  border-radius:var(--radius-sm);
}
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a{
  color:var(--side-text-active) !important;
  background:rgba(255,255,255,.14) !important;
  font-weight:600;
}
.sidebar-form{ border-radius:var(--radius-sm); overflow:hidden; margin:10px; background:rgba(255,255,255,.9); }
.sidebar a{ text-decoration:none; }
.user-panel{ padding:16px; border-bottom:1px solid rgba(255,255,255,.15); }
.user-panel .info, .user-panel .info a{ color:#fff !important; font-weight:700; }

/* control sidebar (categories flyout on POS) stays a dark accent panel
   so it reads as a distinct overlay surface */
.control-sidebar, .control-sidebar-dark{
  background:var(--panel-dark) !important;
  box-shadow:-8px 0 24px rgba(0,0,0,.2);
}
.control-sidebar-dark .control-sidebar-menu > li > a{ color:#a9c9b4 !important; border-radius:var(--radius-sm); margin:2px 8px; }
.control-sidebar-dark .control-sidebar-menu > li > a:hover{ background:var(--panel-dark-2) !important; color:#fff !important; }

/* ---------- content area / cards ---------- */
.content-wrapper{ background:var(--bg) !important; }
.content-header > h1{ font-size:21px; font-weight:800; }
.content-header > h1 > small{ color:var(--ink-soft); font-weight:500; }
.breadcrumb{ background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 16px; box-shadow:var(--shadow-sm); font-weight:500; }
.breadcrumb > li + li:before{ color:var(--ink-faint); }

.box{
  background:var(--card);
  border:1px solid var(--line);
  border-top:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow);
  margin-bottom:22px;
}
.box.box-solid{ border:1px solid var(--line); }
.box-header{
  border-bottom:1px solid var(--line);
  padding:18px 20px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.box-header .box-title{ font-weight:800; font-size:16px; }
.box-body{ padding:20px; }
.box-footer{ background:var(--card); border-top:1px solid var(--line); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.box.box-primary, .box.box-success{ border-top:3px solid var(--brand) !important; }
.box .box-header.with-border{ border-bottom:1px solid var(--line); }
.nav-tabs-custom{ border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.nav-tabs-custom > .nav-tabs > li.active > a{ font-weight:700; color:var(--brand-dark); }

/* success/alert banners (e.g. "successfully logged in") */
.callout, .alert{ border-radius:var(--radius); }

/* small-box / info-box dashboard widgets */
.small-box{ border-radius:var(--radius-lg) !important; box-shadow:var(--shadow); overflow:hidden; }
.small-box > .inner{ padding:20px; }
.small-box h3{ font-weight:800; }
.small-box .icon{ opacity:.2; }
.info-box{ border-radius:var(--radius-lg); box-shadow:var(--shadow); background:var(--card); }
.info-box-icon{ border-radius:var(--radius-lg) 0 0 var(--radius-lg); }

/* ---------- quick-links tiles on dashboard (.btn-app) ---------- */
/* icon-only launcher tiles — no outer card/border, so there's no
   double-shadow "block" behind the round icon; the icon itself
   carries the shadow and lifts on hover */
.btn-app{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  color:var(--ink) !important;
  font-weight:600;
  font-size:12.5px;
  padding:0 !important;
  margin:0 14px 16px 0 !important;
  min-width:76px;
  text-align:center;
}
.btn-app > .fa{
  display:block;
  font-size:20px;
  color:var(--brand-dark);
  background:var(--brand-soft);
  width:48px; height:48px;
  line-height:48px;
  border-radius:14px;
  margin:0 auto 8px;
  box-shadow:var(--shadow-sm);
  transition:.15s ease;
}
.btn-app:hover{ color:var(--brand-dark) !important; }
.btn-app:hover > .fa{
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow-lift);
  transform:translateY(-3px);
}
.btn-app:active > .fa{ transform:translateY(-1px); }
.btn-app .badge{ top:-4px; right:12px; }
.box-body:has(.btn-app){ display:flex; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn{
  border-radius:999px !important;
  font-weight:600;
  border-width:1px;
  padding-left:16px;
  padding-right:16px;
  transition:filter .12s ease, transform .05s ease, box-shadow .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-flat{ border-radius:var(--radius-sm) !important; }
.btn-default{ background:var(--card); border-color:var(--line); color:var(--ink); }
.btn-default:hover{ background:var(--brand-soft); border-color:var(--brand-soft-2); }
.btn-primary{ background:var(--brand); border-color:var(--brand); box-shadow:0 4px 12px rgba(34,197,94,.28); }
.btn-primary:hover, .btn-primary:focus{ background:var(--brand-dark); border-color:var(--brand-dark); }
.btn-success{ background:var(--success); border-color:var(--success); }
.btn-success:hover{ filter:brightness(0.92); }
.btn-danger{ background:var(--danger); border-color:var(--danger); }
.btn-danger:hover{ filter:brightness(0.92); }
.btn-warning{ background:var(--warning); border-color:var(--warning); }
.btn-info{ background:var(--info); border-color:var(--info); }
.btn.bg-purple, .bg-purple{ background:var(--purple) !important; }
.btn-group .btn{ border-radius:var(--radius-sm) !important; }
.btn-group .btn:first-child{ border-top-left-radius:var(--radius-sm) !important; border-bottom-left-radius:var(--radius-sm) !important; }
.btn-group .btn:last-child{ border-top-right-radius:var(--radius-sm) !important; border-bottom-right-radius:var(--radius-sm) !important; }

/* small/icon-only action buttons (table row CRUD icons: view/print/edit/
   copy/delete) must not get the wide pill padding meant for normal
   buttons — that was forcing them to wrap onto two lines in the table */
.btn.btn-xs, .btn.btn-sm{
  padding:5px 8px !important;
  font-size:11.5px;
  border-radius:7px !important;
  line-height:1.4;
}
.table .btn-group, td .btn-group{
  display:inline-flex;
  flex-wrap:nowrap;
  gap:3px;
  white-space:nowrap;
}
.table .btn-group .btn, td .btn-group .btn{ margin:0 !important; }

/* ---------- forms ---------- */
.form-control{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:none;
  padding:8px 12px;
  height:38px;
  background:var(--card);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
textarea.form-control{ height:auto; }
.input-group-addon{ border-radius:var(--radius-sm); background:var(--brand-soft); border:1px solid var(--line); color:var(--brand-dark); }
label, .control-label{ font-weight:600; color:var(--ink); }
.has-feedback .form-control-feedback{ color:var(--ink-faint); }

/* select2 */
.select2-container .select2-choice,
.select2-container-multi .select2-choices,
.select2-container .select2-selection{
  border:1px solid var(--line) !important;
  border-radius:var(--radius-sm) !important;
  box-shadow:none !important;
}
.select2-drop{ border-radius:var(--radius) !important; box-shadow:var(--shadow-lift) !important; border:1px solid var(--line) !important; }
.select2-results .select2-highlighted{ background:var(--brand) !important; }

/* ---------- tables / datatables ---------- */
.table{ background:var(--card); }
.table > thead > tr > th{
  border-bottom:2px solid var(--line);
  color:var(--ink-soft);
  font-weight:700;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.05em;
}
.table > tbody > tr > td{ border-top:1px solid var(--line); vertical-align:middle; }
.table-striped > tbody > tr:nth-of-type(odd){ background:#fafcfa; }
.table-hover > tbody > tr:hover{ background:var(--brand-soft); }
.table-bordered{ border:1px solid var(--line); }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td{ border:1px solid var(--line); }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:var(--radius-sm) !important;
  border:1px solid transparent !important;
  margin:0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--brand-soft) !important; color:var(--brand-dark) !important;
}

/* ---------- labels / badges / alerts ---------- */
.label{ border-radius:999px; font-weight:600; padding:.3em .7em; }
.label-primary{ background:var(--brand); }
.label-danger{ background:var(--danger); }
.label-warning{ background:var(--warning); }
.label-success{ background:var(--success); }
.badge{ border-radius:999px; font-weight:700; }

.alert{ border:1px solid transparent; box-shadow:var(--shadow-sm); font-weight:500; }
.alert-success{ background:var(--brand); border-color:var(--brand-dark); color:#fff; }
.alert-success .close{ color:#fff; opacity:.85; }
.alert-danger, .alert-error{ background:#fef2f3; border-color:#fac9cf; color:#9c1530; }
.alert-warning{ background:#fffaeb; border-color:#fde3a7; color:#8a5a05; }
.alert-info{ background:#ecfeff; border-color:#a6e8f0; color:#0e5f6e; }

/* ---------- modals ---------- */
.modal-content{ border-radius:var(--radius-lg); border:none; box-shadow:0 24px 64px rgba(18,40,26,.25); overflow:hidden; }
.modal-header{ border-bottom:1px solid var(--line); padding:16px 20px; }
.modal-title{ font-weight:700; }
.modal-footer{ border-top:1px solid var(--line); padding:14px 20px; }
.modal-backdrop.in{ opacity:.5; }
.bootbox .modal-content{ border-radius:var(--radius-lg); }

/* ---------- login screen ---------- */
body:has(.login-box){ background:linear-gradient(160deg,var(--panel-dark),var(--brand-dark) 150%) !important; }
.login-box{ margin-top:8%; }
.login-box-body{
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:0 28px 64px rgba(0,0,0,.35);
  padding:34px 30px;
}
.login-box-body img{ max-height:48px !important; width:auto !important; }
.login-box-msg{ font-weight:800; font-size:17px; color:var(--ink); margin-bottom:20px; }
.login-brand{ margin-bottom:22px; }
.login-logo-img{ max-height:64px !important; width:auto !important; max-width:180px; object-fit:contain; margin-bottom:12px; }
.login-logo-fallback{
  width:64px; height:64px; margin:0 auto 12px;
  background:var(--brand);
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px;
  box-shadow:0 8px 20px rgba(34,197,94,.35);
}
.login-brand-name{ font-weight:800; font-size:22px; margin:0 0 4px; color:var(--ink); }
.login-brand-slogan{ color:var(--brand-dark); font-weight:600; font-size:13px; margin:0; }
.login-field-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); margin-bottom:6px; }
.login-contact{ margin-top:18px; text-align:center; font-size:12.5px; color:var(--ink-soft); font-weight:500; }
.login-box .form-control{ height:46px; border-radius:var(--radius-sm); }
.login-box .btn-primary{ height:46px; font-size:15px; border-radius:var(--radius-sm) !important; }

/* ---------- POS terminal ---------- */
#list-table-div{ border-radius:var(--radius); overflow:hidden; }
#posTable{ background:var(--card); }
#posTable > tbody > tr > td{ vertical-align:middle; }
#totaltbl{ font-size:14px; }
#totaltbl .btn{ font-weight:700; }

#add_item{
  height:46px;
  border-radius:var(--radius) !important;
  font-size:15px;
  box-shadow:var(--shadow-sm);
}

/* product tiles — smaller, cleaner, and a neutral placeholder box so a
   missing/broken product photo doesn't render as a huge colored blob */
.btn.product, .btn-both.product{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm);
  color:var(--ink) !important;
  transition:.12s ease;
  overflow:hidden;
}
.btn.product:hover, .btn-both.product:hover{
  border-color:var(--brand) !important;
  box-shadow:var(--shadow-lift);
  transform:translateY(-2px);
}
.btn.product .bg-img, .btn-both.product .bg-img{
  border-radius:var(--radius-sm);
  overflow:hidden;
  display:inline-block;
  background:#eef2f0 !important;
  padding:10px;
}
.btn.product span span, .btn-both.product span span{
  font-weight:600;
  font-size:12px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#categories-list .form-control{ border-radius:var(--radius-sm); }
#categories-list .control-sidebar-menu li a{ border-radius:var(--radius-sm); margin:2px 4px; }

.kb-pad, .kb-text{ border-radius:var(--radius-sm) !important; }
#right-col{ background:transparent; }

.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu{ background:var(--card) !important; box-shadow:var(--shadow-lift); border-radius:var(--radius); }
.animsition{ background:transparent !important; }

/* print/receipt views excluded intentionally — kept as-is for printers */

/* ==========================================================================
   POS PRODUCT GRID — fluid, replaces the old fixed 120px float layout
   ========================================================================== */
.pos .contents #item-list .items,
#bydefault-products,
#searched-products{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
  align-content:flex-start;
  padding:4px;
}
.pos .contents #item-list .btn{
  width:auto !important;
  flex:1 1 108px;
  max-width:132px;
  min-width:96px;
}
.pos .contents #item-list .btn-name{
  width:auto !important;
  height:auto;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
}
.pos .contents #item-list .btn-both,
.pos .contents #item-list .btn-img{
  padding:6px;
}
.pos .contents #item-list .btn-both .bg-img{
  height:auto;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pos .contents #item-list .btn-both .bg-img img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.pos .contents #item-list .btn-both span{ width:auto; }

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 991px){
  .box-body{ padding:14px; }
  .content-header > h1{ font-size:18px; }
  .login-box{ margin-top:6%; }
  .pos .contents #item-list .btn{ flex-basis:110px; max-width:150px; }
}

@media (max-width: 767px){
  html, body{ overflow-x:hidden; }
  .content-wrapper, .main-footer{ margin-left:0 !important; }
  .main-header .logo{ width:auto; padding:0 12px; border-right:0; }
  .main-header .navbar{ margin-left:0; }
  .main-sidebar{ box-shadow:4px 0 24px rgba(0,0,0,.15); }
  .box{ border-radius:var(--radius) !important; margin-bottom:14px; }
  .box-header{ padding:12px 14px; }
  .box-body{ padding:12px; }
  .table-responsive{ border:1px solid var(--line); border-radius:var(--radius-sm); }
  .modal-dialog{ width:auto; margin:10px; }
  .login-box{ width:92%; margin:8% auto 0; }
  .login-box-body{ padding:24px 18px; }
  .btn-app{ min-width:64px; margin:0 8px 14px 0 !important; font-size:11px; }
  .btn-app > .fa{ width:40px; height:40px; line-height:40px; font-size:16px; border-radius:12px; }

  .pos .contents{ flex-direction:column; }
  #posTable{ font-size:12px; }
  #add_item{ height:42px; font-size:14px; }
  .pos .contents #item-list .btn{ flex-basis:90px; min-width:90px; max-width:120px; }
  .pos .contents #item-list .btn-both .bg-img img{ max-height:70px; }
  .btn-group-vertical.btn-block .btn{ font-size:12px; padding:8px 4px; }
}

@media (max-width: 480px){
  .content-header > h1{ font-size:16px; }
  .small-box .inner{ padding:12px; }
  .small-box h3{ font-size:22px; }
  .pos .contents #item-list .btn{ flex-basis:80px; min-width:80px; }
}

/* ==========================================================================
   BOLD LAYOUT — floating header + floating sidebar, detached from the
   screen edges, on a soft canvas background. This is an actual layout
   change (positioning/spacing), not just a color pass — achieved purely
   with CSS on the existing DOM, so every JS hook still works exactly the
   same (sidebar-toggle, dropdowns, control-sidebar, modals, etc).
   ========================================================================== */
:root{
  --gap:16px;
  --side-w:250px;
  --head-h:64px;
}

body{ background:var(--bg) !important; }

/* header splits into two floating cards: the logo/brand card (sits over
   the sidebar) and the nav/actions card (sits over the content) */
.main-header{
  position:fixed !important;
  top:0; left:0; right:0;
  height:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:1020;
}
.main-header .logo{
  position:fixed !important;
  top:var(--gap) !important;
  left:var(--gap) !important;
  width:calc(var(--side-w) - 2px) !important;
  height:var(--head-h) !important;
  line-height:normal !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  overflow:hidden !important;
  padding:6px 14px !important;
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow) !important;
  z-index:1025;
  transition:transform .25s ease, opacity .2s ease;
}
/* store name text (shown when no logo image is uploaded) must never
   spill out of the brand card, however long it is */
.main-header .logo .logo-lg{
  display:block !important;
  width:100%;
  max-height:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:15px !important;
  font-weight:800;
  text-align:center;
  margin:0 !important;
  line-height:1.2 !important;
}
.main-header .navbar{
  position:fixed !important;
  top:var(--gap) !important;
  left:calc(var(--side-w) + var(--gap) * 2) !important;
  right:var(--gap) !important;
  height:var(--head-h) !important;
  min-height:var(--head-h) !important;
  margin:0 !important;
  display:flex !important;
  align-items:center;
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow) !important;
  z-index:1025;
  padding:0 8px;
  transition:left .25s ease;
}
.main-header .navbar-custom-menu,
.main-header .navbar-nav{ display:flex; align-items:center; }
.main-header .navbar-nav > li{ float:none; }

/* floating sidebar card */
.main-sidebar, .left-side{
  position:fixed !important;
  top:calc(var(--head-h) + var(--gap) * 2) !important;
  left:var(--gap) !important;
  bottom:var(--gap) !important;
  height:auto !important;
  min-height:0 !important;
  width:var(--side-w) !important;
  padding-top:8px !important;
  background:linear-gradient(180deg, var(--side-bg), var(--side-bg-2)) !important;
  border:0;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow) !important;
  overflow-y:auto;
  z-index:1015;
  transition:transform .25s ease;
}

/* content area shifted to sit beside the floating sidebar / under header */
.content-wrapper{
  margin-left:calc(var(--side-w) + var(--gap) * 3) !important;
  margin-right:var(--gap) !important;
  padding-top:calc(var(--head-h) + var(--gap) * 2) !important;
  padding-bottom:var(--gap) !important;
  min-height:100vh;
  transition:margin-left .25s ease;
}
.main-footer{
  margin-left:calc(var(--side-w) + var(--gap) * 3) !important;
  margin-right:var(--gap) !important;
  margin-bottom:var(--gap) !important;
  border-radius:var(--radius-lg) !important;
  border:1px solid var(--line) !important;
  transition:margin-left .25s ease;
}

/* ==========================================================================
   COLLAPSED SIDEBAR = green icon rail (not hidden). The base stylesheet
   forces 50px width + visible transform here with a selector specific
   enough to beat a plain override, so we match its own selector to win
   reliably, and turn it into a styled rail instead of fighting it.
   Used both when the user collapses the sidebar manually AND on the POS
   screen, which always starts collapsed by design.
   ========================================================================== */
.sidebar-mini.sidebar-collapse .main-sidebar,
.sidebar-mini.sidebar-collapse .left-side{
  position:fixed !important;
  top:var(--gap) !important;
  left:var(--gap) !important;
  bottom:var(--gap) !important;
  height:auto !important;
  width:58px !important;
  padding-top:8px !important;
  background:linear-gradient(180deg, var(--brand), var(--brand-dark)) !important;
  border:0 !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow) !important;
  overflow-y:auto;
  overflow-x:hidden;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a{
  text-align:center;
  padding:12px 0 !important;
  margin:2px 8px;
  color:rgba(255,255,255,.8) !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > i{
  color:#fff !important;
  width:auto;
  font-size:16px;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a,
.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a{
  background:rgba(255,255,255,.18) !important;
}
.sidebar-mini.sidebar-collapse .user-panel > .image > img{
  box-shadow:0 0 0 2px rgba(255,255,255,.6);
}

/* content/header shift to match the 58px rail + our gap, matching the
   base stylesheet's own selector specificity so this reliably applies */
.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-mini.sidebar-collapse .main-footer{
  margin-left:calc(58px + var(--gap) * 2) !important;
}
.sidebar-mini.sidebar-collapse .main-header .navbar{
  left:calc(58px + var(--gap) * 2) !important;
}
.sidebar-mini.sidebar-collapse .main-header .logo{
  width:58px !important;
  padding:0 !important;
}
.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg{ display:none !important; }
.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini{
  display:block !important;
  font-weight:800;
  color:var(--brand-dark);
}

/* ---------- phones/tablets: fall back to a conventional edge-to-edge
   header + off-canvas sidebar so the original slide-in JS math (which
   assumes a 230px, edge-anchored sidebar) keeps working reliably ---------- */
@media (max-width:767px){
  .main-header{ height:50px !important; }
  .main-header .logo{
    position:static !important;
    width:auto !important;
    max-width:60vw;
    height:50px !important;
    line-height:50px !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 10px !important;
    float:left;
  }
  .main-header .logo .logo-lg{ font-size:14px !important; line-height:50px !important; }
  .main-header .navbar{
    position:static !important;
    left:auto !important; right:auto !important; top:auto !important;
    width:auto;
    border-radius:0 !important;
    border:0 !important;
    border-bottom:1px solid var(--line) !important;
    box-shadow:none !important;
  }
  .main-sidebar, .left-side,
  .sidebar-mini.sidebar-collapse .main-sidebar,
  .sidebar-mini.sidebar-collapse .left-side{
    position:fixed !important;
    top:0 !important; left:0 !important; bottom:0 !important;
    height:100% !important;
    width:230px !important;
    border-radius:0 !important;
    border:0 !important;
    padding-top:50px !important;
    background:var(--side-bg) !important;
  }
  .content-wrapper,
  .sidebar-mini.sidebar-collapse .content-wrapper{
    margin-left:0 !important;
    padding-top:50px !important;
  }
  .main-footer,
  .sidebar-mini.sidebar-collapse .main-footer{ margin-left:0 !important; border-radius:0 !important; border:0 !important; }
  .sidebar-mini.sidebar-collapse .main-header .navbar{ left:auto !important; }
}

/* ==========================================================================
   POS LEFT PANEL (cart + totals + action buttons) — simplified approach:
   the whole panel scrolls (so every cart line and the totals are always
   reachable, how ever many items are added), and the action-button row
   stays pinned to the bottom of that scroll area the whole time via
   position:sticky, so it's never pushed off-screen or hidden.
   ========================================================================== */
.pos #leftdiv{
  max-height:calc(100vh - var(--head-h) - var(--gap) * 4) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}
.pos #botbuttons{
  position:sticky !important;
  bottom:-9px;
  left:0; right:0;
  z-index:5;
  margin:10px -9px -9px !important;
  padding:10px 9px 9px !important;
  background:var(--card) !important;
  box-shadow:0 -6px 14px rgba(18,40,26,.08);
}

@media (max-width:767px){
  .pos #leftdiv{ max-height:calc(100vh - 50px - var(--gap) * 2) !important; }
  .pos #botbuttons{ margin:10px -9px -9px !important; padding:10px 9px 9px !important; }
}

/* ---------- snappier click/tap feedback on product tiles ---------- */
.btn.product, .btn-both.product{
  transition:box-shadow .12s ease, border-color .12s ease, transform .08s ease !important;
}
.btn.product:active, .btn-both.product:active{
  transform:scale(.94) !important;
  transition:transform .04s ease !important;
  box-shadow:var(--shadow-sm) !important;
  border-color:var(--brand) !important;
  background:var(--brand-soft) !important;
}

/* ==========================================================================
   POS PRODUCT GRID — fit regardless of sidebar state. The app's own
   script sets a fixed pixel height for this area once and never
   recalculates it when the sidebar is toggled or the window resizes,
   so when fewer columns fit and tiles wrap onto more rows, the extra
   rows were getting clipped instead of the container growing/scrolling.
   Let it size itself and scroll instead of relying on that stale value.
   ========================================================================== */
.pos .contents#right-col, .pos #right-col{
  height:auto !important;
  max-height:calc(100vh - var(--head-h) - var(--gap) * 3) !important;
  overflow-y:auto !important;
}
.pos .contents #item-list .items{
  height:auto !important;
  min-height:200px;
  overflow:visible !important;
}

/* ==========================================================================
   DASHBOARD — quick stat cards (today sale/total sale/stock in/expense)
   and the sales-trend chart's preset date filter (Today/Yesterday/
   This Week/This Month), styled after the reference layout.
   ========================================================================== */
.dash-stat-row{ margin-bottom:4px; }
.dash-stat-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:18px;
  margin-bottom:20px;
}
.dash-stat-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.dash-stat-icon{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:17px;
}
.dash-stat-icon-1{ background:var(--brand); }
.dash-stat-icon-2{ background:var(--info); }
.dash-stat-icon-3{ background:var(--purple); }
.dash-stat-icon-4{ background:var(--warning); }
.dash-stat-label{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); font-weight:700; margin-bottom:4px; }
.dash-stat-value{ font-size:21px; font-weight:800; color:var(--ink); line-height:1.15; }
.dash-stat-pill{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
}
.dash-stat-pill-1{ background:var(--brand-soft); color:var(--brand-dark); }
.dash-stat-pill-2{ background:#e0f2fe; color:#0369a1; }
.dash-stat-pill-3{ background:#ede9fe; color:#6d28d9; }
.dash-stat-pill-4{ background:#fef3c7; color:#92400e; }

.dash-chart-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.dash-chart-filter{
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
}
.dash-filter-pill{
  display:inline-block;
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
  color:var(--ink-soft);
  border-radius:999px;
  transition:.15s ease;
}
.dash-filter-pill:hover{ color:var(--brand-dark); text-decoration:none; }
.dash-filter-pill.active{
  background:var(--brand);
  color:#fff !important;
  box-shadow:0 3px 10px rgba(34,197,94,.35);
}

@media (max-width:767px){
  .dash-stat-value{ font-size:17px; }
  .dash-stat-icon{ width:34px; height:34px; font-size:14px; border-radius:10px; }
  .dash-chart-header{ flex-direction:column; align-items:flex-start; }
  .dash-chart-filter{ width:100%; justify-content:space-between; }
  .dash-filter-pill{ padding:6px 8px; font-size:11px; flex:1; text-align:center; }
}