/* ============================================================
   Shield POS — Modern UI layer (v2)
   Loaded after modern.css / modern-pos.css. Owns the responsive
   app shell (header, sidebar, content) and touch/scanner ergonomics
   for desktop tills, tablets and phones.
   ============================================================ */

:root {
  --brand: #0f766e;
  --brand-dark: #115e59;
  --brand-light: #14b8a6;
  --brand-bg: #ecfdf5;
  --primary: var(--brand);
  --primary-dark: var(--brand-dark);
  --primary-light: var(--brand-light);
  --primary-bg: var(--brand-bg);
  --header-bg: #0b1f2a;
  --sidebar-bg: #0f2733;
  --sidebar-text: #b9c8d0;
  --sidebar-active-bg: var(--brand);
  --background: #f3f6f8;
  --border-color: #e3e9ee;
  --touch: 44px;
}

html { scroll-behavior: smooth; }
body { font-size: 14.5px; line-height: 1.5; }
*:focus-visible { outline: 3px solid rgba(20,184,166,.45) !important; outline-offset: 2px; }

/* --------------------------------------------------------------
   HEADER — one flex row, hamburger always visible
   -------------------------------------------------------------- */
.main-header {
  position: sticky; top: 0; z-index: 1030 !important;
  display: flex; align-items: stretch;
  height: var(--header-height) !important;
  background: var(--header-bg) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), var(--shadow-md);
}
.main-header .logo {
  display: flex !important; align-items: center; gap: 8px;
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width) !important;
  height: var(--header-height) !important; line-height: 1 !important;
  padding: 0 18px !important; background: var(--sidebar-bg) !important;
  font-size: 16px !important; letter-spacing: -.01em; overflow: hidden; white-space: nowrap;
}
.main-header .logo .logo-lg { display: inline-flex !important; align-items: center; }
.main-header .logo .logo-mini { display: none !important; }
.main-header > .navbar {
  flex: 1 1 auto; display: flex !important; align-items: center;
  margin-left: 0 !important; min-height: var(--header-height) !important;
  padding: 0 4px !important; background: var(--header-bg) !important; box-shadow: none !important;
  min-width: 0;
}
.main-header .sidebar-toggle {
  display: flex !important; align-items: center; justify-content: center;
  width: var(--touch); height: var(--header-height) !important; padding: 0 !important;
  float: none !important; font: 0/0 a; border-radius: 0;
}
.main-header .sidebar-toggle::before {
  content: ""; width: 20px; height: 14px;
  background:
    linear-gradient(#fff,#fff) 0 0/100% 2px no-repeat,
    linear-gradient(#fff,#fff) 0 6px/100% 2px no-repeat,
    linear-gradient(#fff,#fff) 0 12px/100% 2px no-repeat;
}
.main-header .sidebar-toggle .sr-only { display: none; }
.main-header .navbar-left { display: flex; align-items: center; margin: 0 !important; float: none !important; }
.main-header .navbar-left > li { float: none !important; display: flex; align-items: center; }
#live_datetime { font-size: 13px !important; opacity: .85; white-space: nowrap; padding: 0 10px !important; }
.main-header .navbar-custom-menu {
  margin-left: auto; float: none !important; min-width: 0;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.main-header .navbar-custom-menu::-webkit-scrollbar { display: none; }
.main-header .navbar-custom-menu > .navbar-nav { display: flex !important; flex-wrap: nowrap; margin: 0 !important; float: none !important; }
.main-header .navbar-custom-menu > .navbar-nav > li { float: none !important; display: flex; flex: 0 0 auto; }
.main-header .navbar .nav > li > a {
  display: flex !important; align-items: center; gap: 6px;
  height: var(--header-height); padding: 0 12px !important;
  font-size: 13.5px; font-weight: 500; white-space: nowrap; border-radius: 0;
}
.main-header .navbar .nav > li.active > a { box-shadow: inset 0 -3px 0 var(--brand-light); background: rgba(255,255,255,.08) !important; }
.main-header .navbar .nav > li > a > .label { position: static !important; margin-left: 2px; }
.main-header .svg-icon { width: 20px; height: 20px; }

/* --------------------------------------------------------------
   SIDEBAR — fixed rail, scrollable, off-canvas on small screens
   -------------------------------------------------------------- */
.main-sidebar, .left-side {
  position: fixed !important; top: 0; bottom: 0; left: 0;
  width: var(--sidebar-width) !important; padding-top: var(--header-height) !important;
  height: 100vh !important; min-height: 0 !important; max-height: 100vh !important;
  overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body.sidebar-mini.sidebar-collapse .main-sidebar, body.sidebar-collapse .main-sidebar, body.sidebar-mini .main-sidebar { overflow-y: auto !important; overflow-x: hidden !important; }
.main-sidebar .sidebar, .main-sidebar .sidebar-menu { height: auto !important; min-height: 0 !important; }
.main-sidebar .sidebar-menu { padding-bottom: 24px; }
.sidebar-menu > li > a { display: flex !important; align-items: center; gap: 10px; min-height: var(--touch); text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; }
.sidebar-menu > li > a > span:not(.pull-right-container) { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-menu > li > a > .svg-icon, .sidebar-menu > li > a > .fa { flex: 0 0 20px; width: 20px; text-align: center; margin: 0 !important; }
.sidebar-menu > li > a > .pull-right-container { position: static !important; margin-left: auto; }
.sidebar-menu > li.active > a { background: var(--brand) !important; box-shadow: 0 6px 16px rgba(15,118,110,.35); }
.sidebar-menu .treeview-menu > li > a { min-height: 40px; display: flex; align-items: center; }
.sidebar-menu .treeview-menu > li.active > a { color: #fff !important; background: rgba(20,184,166,.18) !important; }
.sidebar-menu .header { color: #6f8591 !important; background: transparent !important; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 14px 14px 6px !important; }
.user-panel { display: flex; align-items: center; gap: 12px; }
.user-panel .image { position: static !important; float: none !important; }
.user-panel > .info { position: static !important; left: auto !important; padding: 0 !important; }

.content-wrapper, .right-side, .main-footer { margin-left: var(--sidebar-width) !important; }
.content-wrapper { min-height: calc(100vh - var(--header-height)) !important; }

/* Collapsed rail (desktop & tablet) */
@media (min-width: 768px) {
  .sidebar-collapse .main-header .logo { flex-basis: var(--sidebar-collapsed-width); width: var(--sidebar-collapsed-width) !important; padding: 0 !important; justify-content: center; }
  .sidebar-collapse .main-header .logo .logo-lg { display: none !important; }
  .sidebar-collapse .main-header .logo .logo-mini { display: inline-flex !important; }
  .sidebar-collapse .main-sidebar { width: var(--sidebar-collapsed-width) !important; }
  .sidebar-collapse .sidebar-menu > li > a { justify-content: center; padding: 10px 0 !important; }
  .sidebar-collapse .sidebar-menu .header { display: none !important; }
  .sidebar-collapse .sidebar-menu > li > a > span, .sidebar-collapse .sidebar-menu > li > a > .pull-right-container, .sidebar-collapse .sidebar-menu .treeview-menu, .sidebar-collapse .user-panel { display: none !important; }
  .sidebar-collapse .sidebar-menu > li > a > .svg-icon, .sidebar-collapse .sidebar-menu > li > a > .fa { flex-basis: 24px; width: 24px; }
  .sidebar-collapse .content-wrapper, .sidebar-collapse .right-side, .sidebar-collapse .main-footer { margin-left: var(--sidebar-collapsed-width) !important; }
}

/* Tablet (768–1199): rail by default, expanded sidebar overlays content */
@media (min-width: 768px) and (max-width: 1199px) {
  .main-header .logo { flex-basis: var(--sidebar-collapsed-width); width: var(--sidebar-collapsed-width) !important; padding: 0 !important; justify-content: center; }
  .main-header .logo .logo-lg { display: none !important; }
  .main-header .logo .logo-mini { display: inline-flex !important; }
  .content-wrapper, .right-side, .main-footer { margin-left: var(--sidebar-collapsed-width) !important; }
  .main-sidebar { width: var(--sidebar-collapsed-width) !important; z-index: 1045 !important; }
  .sidebar-menu > li > a { justify-content: center; padding: 10px 0 !important; }
  .sidebar-menu > li > a > span, .sidebar-menu .treeview-menu, .sidebar-menu .header, .user-panel { display: none !important; }
  /* expanded state (class toggled by AdminLTE = NOT sidebar-collapse → we invert with .sidebar-expanded set by JS) */
  .sidebar-expanded .main-sidebar { width: var(--sidebar-width) !important; box-shadow: 12px 0 40px rgba(0,0,0,.35); }
  .sidebar-expanded .sidebar-menu > li > a { justify-content: flex-start; padding: 10px 14px !important; }
  .sidebar-expanded .sidebar-menu > li > a > span, .sidebar-expanded .sidebar-menu > li.active > .treeview-menu, .sidebar-expanded .sidebar-menu > li.menu-open > .treeview-menu, .sidebar-expanded .sidebar-menu .header, .sidebar-expanded .user-panel { display: flex !important; }
  .sidebar-expanded .sidebar-menu .treeview-menu { display: block !important; }
  .main-header .navbar .nav > li > a > span.text { display: none; }
  .main-header .navbar .nav > li > a { padding: 0 10px !important; }
}

/* Phone (<768): off-canvas drawer with backdrop */
@media (max-width: 767px) {
  .main-header .logo { display: none !important; }
  .main-header > .navbar { margin-left: 0 !important; }
  .main-header .navbar .nav > li > a > span.text { display: none; }
  .main-header .navbar .nav > li > a { padding: 0 9px !important; }
  #live_datetime { display: none !important; }
  .main-sidebar, .left-side {
    width: min(84vw, var(--sidebar-width)) !important; padding-top: 0 !important; z-index: 1060 !important;
    transform: translateX(-105%) !important; transition: transform .25s ease !important;
  }
  .sidebar-open .main-sidebar, .sidebar-open .left-side { transform: translateX(0) !important; }
  .sidebar-open .content-wrapper, .sidebar-open .main-footer { transform: none !important; }
  .content-wrapper, .right-side, .main-footer { margin-left: 0 !important; }
  .mui-backdrop { position: fixed; inset: 0; background: rgba(11,31,42,.55); z-index: 1055; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sidebar-open .mui-backdrop { opacity: 1; pointer-events: auto; }
  .sidebar-open { overflow: hidden; }
  .main-sidebar .user-panel { display: flex !important; padding-top: 18px !important; }
}

/* --------------------------------------------------------------
   CONTENT — headers, cards, forms, buttons, tables
   -------------------------------------------------------------- */
.content-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 18px 24px 8px !important; }
.content-header > h1 { margin: 0 !important; flex: 1 1 auto; }
.content-header > .breadcrumb { position: static !important; float: none !important; margin: 0 !important; }
.content { padding: 12px 24px 32px !important; }

.box { border: 1px solid var(--border-color) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xs) !important; }
.box-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.box-header > .box-title { font-size: 16px !important; font-weight: 600 !important; }
.box-header > .box-tools { position: static !important; margin-left: auto; }

.btn { min-height: 40px; border-radius: var(--radius-md) !important; font-weight: 600 !important; letter-spacing: 0 !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: none !important; }
.btn-xs { min-height: 30px; padding: 3px 10px !important; }
.btn-sm { min-height: 34px; }
.btn-lg { min-height: 52px; font-size: 16px !important; }
.btn-primary, .btn-success { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus { background: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }
.btn-default { background: #fff !important; border: 1px solid var(--gray-300) !important; color: var(--gray-700) !important; }
.btn-default:hover { background: var(--gray-50) !important; border-color: var(--gray-400) !important; }
.btn-group .btn { border-radius: 0 !important; }
.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md) !important; }
.btn-group .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; }

.form-control { min-height: 42px; border-radius: var(--radius-md) !important; border: 1px solid var(--gray-300) !important; font-size: 15px !important; box-shadow: none !important; }
.form-control:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(20,184,166,.18) !important; }
.input-sm, .form-control.input-sm { min-height: 36px; }
label { font-weight: 600; color: var(--gray-700); font-size: 13px; }
.input-group-addon { border-radius: var(--radius-md) !important; border-color: var(--gray-300) !important; background: var(--gray-50) !important; }
.select2-container--default .select2-selection--single { min-height: 42px !important; border-radius: var(--radius-md) !important; border-color: var(--gray-300) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; }

/* Tables: JS wraps every content table in .mui-table-scroll */
.mui-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
.mui-table-scroll > table { margin-bottom: 0; min-width: 100%; }
.table > thead > tr > th { background: var(--gray-50) !important; color: var(--gray-600) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border-color) !important; white-space: nowrap; }
.table > tbody > tr > td { vertical-align: middle !important; border-top: 1px solid var(--border-color) !important; }
.table-hover > tbody > tr:hover { background: var(--brand-bg) !important; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter input { min-height: 40px; width: min(320px, 100%); }
.dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 38px; min-height: 38px; border-radius: var(--radius-sm) !important; }

.label { border-radius: var(--radius-full) !important; padding: 4px 10px !important; font-weight: 600 !important; font-size: 11.5px !important; }
.alert { border-radius: var(--radius-md) !important; border: 1px solid transparent !important; }
.alert-success { background: var(--success-light) !important; color: var(--success-dark) !important; border-color: #a7f3d0 !important; }
.alert-danger { background: var(--danger-light) !important; color: var(--danger-dark) !important; border-color: #fecaca !important; }
.alert-warning { background: var(--warning-light) !important; color: var(--warning-dark) !important; border-color: #fde68a !important; }
.alert-info { background: var(--info-light) !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }

/* Modals always sit above the sticky header, drawer and till bars */
.modal { z-index: 1080 !important; }
.modal-backdrop { z-index: 1075 !important; }
.modal-header { position: relative; }
.modal-header .close { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; line-height: 36px; opacity: .7; font-size: 26px; z-index: 2; }
.modal-content { border-radius: var(--radius-lg) !important; border: none !important; box-shadow: var(--shadow-xl) !important; }
.modal-header { border-bottom: 1px solid var(--border-color) !important; padding: 16px 20px !important; }
.modal-footer { border-top: 1px solid var(--border-color) !important; padding: 14px 20px !important; }
.modal-footer .btn { min-width: 110px; }

/* Empty states */
.mui-empty { text-align: center; padding: 40px 20px; color: var(--gray-500); }
.mui-empty .fa { font-size: 40px; color: var(--gray-300); display: block; margin-bottom: 10px; }
.dataTables_empty { padding: 36px !important; color: var(--gray-500) !important; font-style: italic; }

/* Dashboard stat cards */
.small-box { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; }
.small-box > .inner { padding: 18px 20px !important; }
.small-box .icon { opacity: .18 !important; }
.small-box > .small-box-footer { background: rgba(0,0,0,.12) !important; font-weight: 600; padding: 8px !important; }

/* --------------------------------------------------------------
   TILL (pos.php)
   -------------------------------------------------------------- */
#pos-page .main-header { position: fixed; left: 0; right: 0; top: 0; z-index: 1030 !important; }
#pos-page .main-header .logo { display: flex !important; flex-basis: auto; width: auto !important; padding: 0 16px !important; }
#pos-page .main-header .logo .logo-lg { display: inline-flex !important; }
#pos-page .main-header .logo .logo-mini { display: none !important; }
#pos-page .main-header .sidebar-toggle { display: none !important; }
#pos-page .pos-content-wrapper { padding-top: var(--header-height); }
#pos-page .content-area { padding: 10px !important; }

#searchbox { position: relative; padding: 12px !important; background: #fff !important; box-shadow: none !important; border-bottom: 1px solid var(--border-color) !important; z-index: 20 !important; }
#searchbox #product-name {
  width: 100%; min-height: 54px; font-size: 17px !important; padding: 12px 16px 12px 52px !important;
  border: 2px solid var(--gray-200) !important; border-radius: var(--radius-lg) !important; background: #fff;
}
#searchbox #product-name:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 4px rgba(20,184,166,.18) !important; }
#searchbox .search-btn { position: absolute !important; left: 28px !important; top: 28px !important; width: 22px; height: 22px; margin: 0 !important; transform: none !important; opacity: .6; }
#searchbox .mui-scan-hint { position: absolute; right: 26px; top: 30px; font-size: 12px; color: var(--gray-500); pointer-events: none; }
#searchbox .mui-scan-hint .fa { margin-right: 4px; }

#searchbox .category-search { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 8px 0 0 !important; box-shadow: none !important; }
.category-blocks { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px !important; background: #fff !important; border: 1px solid var(--border-color); border-radius: var(--radius-lg) !important; margin: 0 !important; max-height: 168px; }
.category-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 92px; min-height: 68px; padding: 8px 10px; border-radius: var(--radius-md) !important;
  background: var(--gray-50) !important; border: 1px solid var(--border-color) !important; color: var(--gray-700) !important; font-weight: 600; font-size: 12.5px;
}
.category-block.active { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(15,118,110,.3); }
.category-block-icon { font-size: 18px; }
.category-block-count { font-size: 10.5px; opacity: .75; }

/* Product tiles */
.pos .contents #item-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 10px; padding: 10px !important; align-content: start; }
.pos .contents #item-list .btn.item {
  float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; height: auto !important;
  background: #fff !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important; overflow: hidden; text-align: left; transition: transform .12s, box-shadow .12s;
}
.pos .contents #item-list .btn.item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) !important; border-color: var(--brand-light) !important; }
.pos .contents #item-list .btn.item:active { transform: scale(.98); }
.pos .contents #item-list .btn.item,
.pos .contents #item-list .btn-flat.item { flex: none !important; min-height: 134px !important; max-height: none !important; display: block !important; }
.pos .contents #item-list .btn.item .item-inner { position: relative; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; min-height: 132px; height: auto !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.pos .contents #item-list .btn.item.select .item-inner { box-shadow: inset 0 0 0 3px var(--brand) !important; }
.pos .contents #item-list .btn.item .item-img { height: 56px; display: flex; align-items: center; justify-content: center; background: var(--gray-50); border-bottom: 1px solid var(--border-color); }
.pos .contents #item-list .btn.item .item-img img { max-height: 40px; max-width: 70%; object-fit: contain; opacity: .8; }
.pos .contents #item-list .btn.item .item-info { position: static !important; display: block; padding: 10px 12px 4px !important; height: auto !important; }
.pos .contents #item-list .btn.item .item-info > span { display: block !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--gray-800) !important; line-height: 1.3 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere; height: auto !important; padding: 0 !important; text-align: left !important; }
.pos .contents #item-list .btn.item .item-stock { font-weight: 500; color: var(--gray-500); }
.pos .contents #item-list .btn.item .item-img { display: flex !important; }
.pos .contents #item-list .btn.item .item-price { display: block; padding: 0 44px 10px 12px; font-size: 16px; font-weight: 700; color: var(--brand-dark); }
.pos .contents #item-list .btn.item .item-mask {
  position: absolute !important; right: 8px; bottom: 8px; left: auto !important; width: 32px; height: 32px; padding: 0 !important; margin: 0 !important;
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full) !important;
  background: var(--brand) !important; color: #fff; opacity: 1 !important; transform: none !important; font-size: 0;
}
.pos .contents #item-list .btn.item .item-mask .svg-icon { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.pos .contents #item-list .btn.item .item-mask span { display: none; }
.pos .contents #item-list .btn.item .ibadge:after { display: none !important; }
.pos .contents #item-list .btn.item .ibadge { position: absolute; top: 6px; left: 6px; right: auto !important; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-full); background: var(--brand-bg); color: var(--brand-dark); border: 1px solid #a7f3d0; }

/* Customer + cart panel */
#right-panel .well { background: #fff !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xs) !important; padding: 12px !important; }
#people-area { display: grid; grid-template-columns: 1fr auto auto auto auto; grid-template-areas: "input icon edit add due"; align-items: center; gap: 6px; padding: 4px 0 10px !important; }
#people-area #customer-name { grid-area: input; min-height: 46px; width: 100% !important; font-size: 15px !important; padding: 8px 12px !important; border: 1px solid var(--gray-300) !important; border-radius: var(--radius-md) !important; }
#people-area .customer-icon { grid-area: icon; }
#people-area .edit-icon { grid-area: edit; }
#people-area .add-icon { grid-area: add; }
#people-area .customer-icon, #people-area .edit-icon, #people-area .add-icon {
  position: static !important; display: flex; align-items: center; justify-content: center; gap: 4px;
  width: auto; min-width: 40px; height: 40px; padding: 0 6px; border-radius: var(--radius-md); background: var(--gray-50); border: 1px solid var(--border-color); cursor: pointer;
}
#people-area .add-icon { background: var(--brand) !important; border-color: var(--brand) !important; }
#people-area .add-icon .svg-icon { filter: brightness(0) invert(1); }
#people-area .previous-due { grid-area: due; position: static !important; width: auto !important; }
#people-area .previous-due-inner h4 { margin: 0; font-size: 11px !important; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); text-align: right; line-height: 1.1; }
#people-area .previous-due-inner h4 span, #people-area .previous-due-inner h4 a { display: block; font-size: 15px; font-weight: 700; color: var(--danger-dark) !important; }
#people-area #customer-dropdown { position: absolute; z-index: 20; left: 0; right: 0; top: 56px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
#people-area .customer-list li a { display: block; padding: 12px 14px; min-height: var(--touch); color: var(--gray-800); border-bottom: 1px solid var(--gray-100); }
#people-area .customer-list li a:hover { background: var(--brand-bg); }

#invoice-item-head th { font-size: 11px !important; }
#invoice-item-list .invoice-item td { padding: 8px 6px !important; vertical-align: middle !important; }
/* Cart line: plain product name (skins paint it as a pill that overflows the row) */
.skin-green .product-name span,
#invoice-item-list .invoice-item .product-name span {
  display: block !important; background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 !important; box-shadow: none !important; color: var(--gray-800) !important; font-weight: 600 !important;
  font-size: 13.5px !important; line-height: 1.3 !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere;
}
#invoice-item-list .invoice-item .product-name { width: auto !important; }
#invoice-item-list table { table-layout: auto !important; width: 100% !important; }
#invoice-item-list table tbody td.product-quantity { width: 132px !important; min-width: 132px; white-space: nowrap; }
#invoice-item-list .product-quantity .item_quantity { display: inline-block; width: 44px !important; }
#invoice-item-list .product-quantity .fs-12 { display: block; font-size: 11px; color: var(--gray-500); }
#invoice-item-list .invoice-item .product-price { width: 72px !important; white-space: nowrap; }
#invoice-item-list .invoice-item .product-subtotal { width: 84px !important; white-space: nowrap; }
#invoice-item-list .invoice-item .product-delete { width: 32px !important; text-align: center; }
.product-quantity { display: table-cell !important; text-align: center !important; }
.product-quantity .btn-up, .product-quantity .btn-down { display: inline-flex !important; vertical-align: middle; margin: 0 2px !important; width: 34px !important; height: 34px !important; min-height: 34px; padding: 0 !important; border-radius: var(--radius-sm) !important; background: var(--gray-100) !important; color: var(--gray-700) !important; border: 1px solid var(--border-color) !important; }
.product-quantity .item_quantity { width: 46px; min-height: 34px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-weight: 600; }
.product-delete { font-size: 16px; }
#invoice-calculation .table td { padding: 8px 10px !important; font-size: 13px; }
#invoice-calculation input { width: 100%; min-height: 36px; text-align: right; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); padding: 4px 8px; }
#invoice-calculation tr.bg-gray td { background: var(--gray-50) !important; font-weight: 600; }
#invoice-calculation tr:last-child td { font-size: 16px; font-weight: 700; color: var(--brand-dark); background: var(--brand-bg) !important; }

#pay-button .btn-group-justified { display: flex; gap: 10px; }
#pay-button .btn-group-justified > .btn-group { display: flex; flex: 1 1 0; width: auto; }
#pay-button .btn { width: 100%; min-height: 60px; font-size: 18px !important; border-radius: var(--radius-lg) !important; }
#pay-button .btn-success { background: var(--brand) !important; border-color: var(--brand) !important; }
#pay-button .btn-danger { background: #f59e0b !important; border-color: #f59e0b !important; color: #fff !important; }

#total-amount { display: flex; align-items: center; gap: 12px; padding: 10px 16px !important; border-radius: var(--radius-lg) !important; background: var(--header-bg) !important; color: #fff; margin: 10px 0 0; }
#total-amount .total-amount-inner { flex: 1 1 auto; display: flex; align-items: baseline; gap: 4px; }
#total-amount .currency-symbol { font-size: 16px; opacity: .8; }
#total-amount .main-amount { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
#total-amount #created_at input { min-height: 36px; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; padding: 4px 10px; font-size: 13px; }
#total-amount #invoice-note { color: #fff; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: rgba(255,255,255,.1); }

#searchbox #pos-scan-license-wrap { position: absolute !important; right: 18px !important; top: 18px !important; bottom: auto !important; left: auto !important; z-index: 21 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0 !important; }
#searchbox #product-name { padding-right: 130px !important; }
#pos-scan-license-btn { min-height: 42px; padding: 0 16px !important; border-radius: var(--radius-md) !important; background: var(--header-bg) !important; color: #fff !important; box-shadow: none !important; font-size: 14px !important; }
#pos-scan-license-btn:hover { background: var(--brand) !important; }
#searchbox .mui-scan-hint { right: 130px; }
#minicart { display: none !important; }

/* Mobile action bar (JS injects #mui-posbar) */
#mui-posbar { display: none; }

/* Tablet till */
@media (min-width: 768px) and (max-width: 1199px) {
  #pos-page .main-header .logo { display: none !important; }
  #searchbox .mui-scan-hint { display: none; }
  #pos-page .content-area .content-row { display: flex; gap: 8px; }
  #pos-page #left-panel { flex: 1 1 58% !important; width: auto !important; float: none !important; }
  #pos-page #right-panel { flex: 0 0 42% !important; width: auto !important; float: none !important; }
  .pos .contents #item-list { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .category-block { min-width: 80px; min-height: 60px; }
  #pay-button .btn { font-size: 16px !important; min-height: 56px; }
  #people-area { grid-template-columns: 1fr auto auto auto; grid-template-areas: "input icon edit add" "due due due due"; }
  #people-area .previous-due-inner h4 { text-align: left; display: flex; gap: 8px; align-items: baseline; }
}

/* Phone till */
@media (max-width: 767px) {
  #pos-page .main-header { height: 48px !important; }
  #pos-page .main-header .logo { display: none !important; }
  #pos-page .main-header .navbar-left { overflow-x: auto; flex: 1 1 auto; scrollbar-width: none; }
  #pos-page .main-header .navbar-left::-webkit-scrollbar { display: none; }
  #pos-page .main-header .navbar-left > li > a { min-width: 44px; height: 48px !important; padding: 0 10px !important; }
  #pos-page #total-amount { display: none !important; }
  .pos .contents #item-list .btn.item .ibadge { display: none !important; }
  .pos .contents #item-list .btn.item .item-info > span { font-size: 12.5px !important; }
  #pos-page .pos-content-wrapper { padding-top: 48px; }
  #pos-page .content-area { padding: 6px !important; }
  body.pos .content-wrapper, body.pos .pos-content-wrapper, body.pos #left-panel { padding-top: 0 !important; }
  #pos-page #left-panel { padding-top: 48px !important; }
  #searchbox #product-name { min-height: 48px; font-size: 16px !important; padding-right: 14px !important; }
  #searchbox .mui-scan-hint { display: none; }
  .category-blocks { flex-wrap: nowrap !important; overflow-x: auto !important; gap: 6px; padding: 6px !important; }
  .category-block { min-width: 76px !important; flex: 0 0 76px !important; min-height: 60px; padding: 6px 4px !important; }
  .pos .contents #item-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; gap: 8px; padding: 6px !important; }
  .pos .contents #item-list .btn.item, .pos .contents #item-list .btn-flat { flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; min-height: 98px !important; max-height: none !important; padding: 0 !important; border-radius: var(--radius-md) !important; }
  .pos .contents #item-list .btn.item .item-inner { min-height: 96px; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; }
  .pos .contents #item-list .btn.item .item-img { display: none !important; }
  .pos .contents #item-list .btn.item .item-info { display: block !important; padding: 8px 8px 2px !important; text-align: left !important; }
  .pos .contents #item-list .btn.item .item-info > span { font-size: 12px !important; -webkit-line-clamp: 3; display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; }
  .pos .contents #item-list .btn.item .item-price { padding: 0 8px 8px; font-size: 14px; }
  .pos .contents #item-list .btn.item .item-mask { display: none !important; }
  .pos .contents #item-list .btn.item .ibadge { top: 4px; right: 4px !important; left: auto; font-size: 9px; }
  #left-panel .contents { padding-bottom: 96px !important; }
  #total-amount { display: none !important; }
  #pos-scan-license-wrap { display: none; }

  /* Sticky action bar */
  #mui-posbar {
    display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1049;
    align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--header-bg); color: #fff; box-shadow: 0 -6px 24px rgba(0,0,0,.25);
  }
  #mui-posbar .total { flex: 1 1 auto; line-height: 1.05; }
  #mui-posbar .total small { display: block; font-size: 10.5px; opacity: .7; text-transform: uppercase; letter-spacing: .05em; }
  #mui-posbar .total b { font-size: 22px; font-weight: 800; }
  #mui-posbar .btn { min-height: 46px; padding: 0 14px !important; border-radius: var(--radius-md) !important; font-size: 14px !important; }
  #mui-posbar .btn-scan { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; }
  #mui-posbar .btn-cart { background: var(--brand) !important; color: #fff !important; }
  #mui-posbar .btn-cart .count { background: #fff; color: var(--brand-dark); border-radius: var(--radius-full); padding: 1px 7px; font-size: 12px; margin-left: 4px; }

  /* Cart sheet */
  #right-panel {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: 48px; z-index: 1048 !important; width: 100% !important;
    transform: translateY(105%); transition: transform .25s ease; padding: 6px !important; overflow-y: auto; background: var(--background);
    visibility: visible !important; opacity: 1 !important; height: auto !important;
  }
  #right-panel.visible { transform: translateY(0); }
  #right-panel .invoice-area { padding-bottom: 80px; }
  #right-panel .mui-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px; }
  #right-panel .mui-sheet-head b { font-size: 16px; }
  #right-panel .mui-sheet-head .btn { min-height: 40px; }
  #people-area { grid-template-columns: 1fr auto auto; grid-template-areas: "input icon add" "due due due"; }
  #people-area .edit-icon { display: none !important; }
  #people-area .previous-due-inner h4 { text-align: left; display: flex; gap: 8px; align-items: baseline; }
  #pay-button .btn-group-justified { flex-direction: row !important; }
  #pay-button .btn { min-height: 54px; font-size: 16px !important; }
}

/* --------------------------------------------------------------
   LOGIN
   -------------------------------------------------------------- */
body.login-page {
  min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: radial-gradient(1200px 600px at 10% -10%, #14b8a6 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #0f766e 0%, transparent 60%), #0b1f2a !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.login-page .login-box { width: 100%; max-width: 420px; margin: 0 auto; }
.login-page .login-logo { text-align: center; margin-bottom: 22px; }
.login-page .login-logo .text p { margin: 0; color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.login-page .login-logo .text p::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; background: linear-gradient(135deg,#14b8a6,#0f766e); box-shadow: 0 12px 30px rgba(20,184,166,.4); }
.login-page .login-box-body { background: #fff !important; border-radius: 20px !important; padding: 28px 26px !important; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.login-page .login-box-msg { padding: 0 0 18px !important; font-size: 18px; color: #111827 !important; text-align: left !important; }
.login-page .login-box-msg strong { font-weight: 700; }
.login-page .input-group { display: flex; }
.login-page .input-group-addon { display: flex; align-items: center; justify-content: center; width: 48px; border-radius: 12px 0 0 12px !important; background: #f3f4f6 !important; border: 1px solid #d1d5db !important; border-right: 0 !important; }
.login-page .input-group-addon .svg-icon { width: 20px; height: 20px; }
.login-page .input-group .form-control { min-height: 50px; border-radius: 0 12px 12px 0 !important; font-size: 16px !important; }
.login-page #login-btn { min-height: 52px; font-size: 16px !important; border-radius: 12px !important; background: var(--brand) !important; border-color: var(--brand) !important; margin-top: 6px; }
.login-page .text-danger { color: #b91c1c !important; font-weight: 600; }
.login-page .copyright { margin-top: 18px; color: rgba(255,255,255,.7); }
.login-page .copyright a { color: #99f6e4; font-weight: 600; }
.login-page .copyright p { margin: 4px 0; }

/* --------------------------------------------------------------
   TOUCH DEVICES — larger hit targets everywhere
   -------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn-xs { min-height: 36px; min-width: 36px; }
  .table td .btn-xs { margin: 2px 0; }
  .dropdown-menu > li > a { padding: 12px 16px !important; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
}

/* Print: hide shell */
@media print {
  .main-header, .main-sidebar, .mui-backdrop, #mui-posbar, #pos-scan-license-wrap { display: none !important; }
  .content-wrapper { margin: 0 !important; }
}