/* Kasir POS - InApp Template Style (Bootstrap 5 + Tabler Icons) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --kasir-primary: #E66239;
  --kasir-gray-100: #f5f5f5;
  --kasir-gray-200: #e5e5e5;
  --kasir-gray-800: #262626;
}

* { font-family: 'Poppins', sans-serif; }

/* Overlay */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px); display: none; z-index: 1030;
}
.overlay.show { display: block; }

/* Sidebar */
.sidebar {
  width: 240px; background: #fff; transition: width .3s, left .3s;
  border-right: 1px solid var(--kasir-gray-200); height: 100vh;
  position: fixed; top: 0; left: 0; padding-top: 60px; z-index: 1040;
}
.sidebar .nav-link {
  color: var(--kasir-gray-800); padding: 8px 10px; display: flex;
  align-items: center; font-size: 14px; font-weight: 400; gap: 12px;
  white-space: nowrap; margin: 1px 12px; border-radius: 8px; transition: all .2s;
}
.sidebar .nav-link:hover { color: var(--kasir-primary); background: rgba(230,98,57,.095); }
.sidebar .nav-link.active { color: var(--kasir-primary); background: rgba(230,98,57,.095); font-weight: 500; }
.sidebar .nav-link .ti { font-size: 18px; }
.sidebar .nav-text { transition: opacity .2s; }
.sidebar .logo-area {
  position: absolute; top: 0; left: 0; height: 60px; width: 100%;
  background: #fff; display: flex; align-items: center; gap: 10px;
  padding-left: 17px; color: var(--kasir-gray-800); border-bottom: 1px solid var(--kasir-gray-200);
}
.sidebar .logo-area img { height: 24px; }
.sidebar .logo-text img { height: 18px; }
.sidebar .logo-icon { display: none; }
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .nav-link { margin: 0; padding: 8px 18px; background: transparent; }
.sidebar.collapsed .nav-text, .sidebar.collapsed .logo-text, .sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .logo-icon { display: inline-flex; }
.sidebar.collapsed .logo-area { padding-left: 14px; }

/* Topbar */
.topbar {
  z-index: 1045;
  height: 60px; margin-left: 240px; background: #fff;
  border-bottom: 1px solid var(--kasir-gray-200);
}
.topbar.full { margin-left: 60px; }

/* Content */
.content { margin-left: 240px; padding: 80px 32px 24px 32px; min-height: calc(100vh - 60px); background: #fafafa; }
.content.full { margin-left: 60px; }

/* Responsive */
@media (max-width: 992px) {
  .sidebar { left: -240px !important; }
  .sidebar.mobile-show { left: 0 !important; }
  .topbar { margin-left: 0 !important; width: 100% !important; }
  .content { margin-left: 0 !important; padding: 80px 16px 24px 16px; }
}

/* DataGrid card wrapper */
.card .dx-datagrid { border: none; }
.card { padding: 16px; }

/* Avatar */
.avatar { position: relative; display: inline-block; width: 3rem; height: 3rem; }
.avatar-sm { width: 2rem; height: 2rem; }
.avatar-md { width: 2.5rem; height: 2.5rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-initials { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; pointer-events: none; text-transform: uppercase; border-radius: 50%; font-weight: 600; }

/* Button Icon */
.btn-icon { position: relative; display: inline-flex; flex-shrink: 0; justify-content: center; align-items: center; font-size: .93rem; width: 2.5rem; height: 2.5rem; padding: 0; }
.btn-icon.btn-sm { width: 2.1875rem; height: 2.1875rem; }

/* Icon Shape */
.icon-shape { display: inline-flex; align-items: center; justify-content: center; text-align: center; vertical-align: middle; }
.icon-sm { width: 2rem; height: 2rem; line-height: 2rem; }
.icon-md { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; }
.icon-lg { width: 3rem; height: 3rem; line-height: 3rem; }

/* Border Dashed */
.border-dashed { border-style: dashed !important; }

/* POS Specific */
.pos-layout { display: flex; gap: 16px; height: calc(100vh - 310px); min-height: 450px; }
.pos-products { flex: 1; overflow-y: auto; background: #fff; border-radius: 10px; padding: 16px; border: 1px solid var(--kasir-gray-200); }
.pos-cart { width: 380px; background: #fff; border-radius: 10px; padding: 16px; border: 1px solid var(--kasir-gray-200); display: flex; flex-direction: column; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; margin-top: 10px; }
.product-card { border: 1px solid var(--kasir-gray-200); border-radius: 10px; padding: 12px; cursor: pointer; transition: all .2s; text-align: center; background: #fff; }
.product-card:hover { border-color: var(--kasir-primary); box-shadow: 0 2px 12px rgba(230,98,57,.15); transform: translateY(-1px); }
.product-card .p-name { font-weight: 600; font-size: .85rem; margin: 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card .p-price { color: var(--kasir-primary); font-weight: 700; font-size: .95rem; }
.product-card .p-stock { font-size: .75rem; color: #999; }
.product-card.out-of-stock { opacity: .5; pointer-events: none; }

.cart-items { flex: 1; overflow-y: auto; margin: 10px 0; }
.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f0f0f0; font-size: .85rem; }
.cart-item .ci-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 8px; }
.cart-item .ci-qty { display: flex; align-items: center; gap: 4px; }
.cart-item .ci-qty button { width: 26px; height: 26px; border: 1px solid #ddd; border-radius: 6px; background: #f8f9fa; cursor: pointer; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.cart-item .ci-qty button:hover { background: var(--kasir-gray-200); }
.cart-total { border-top: 2px solid var(--kasir-gray-800); padding-top: 10px; margin-top: auto; }
.cart-total .total-row { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 600; margin: 5px 0; }
.cart-total .total-big { font-size: 1.3rem; font-weight: 700; color: var(--kasir-primary); }

.change-display { font-size: 1.5rem; font-weight: 700; color: #00C951; text-align: center; margin: 10px 0; }

/* Category tabs */
.category-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.category-tabs .btn { font-size: .8rem; padding: 4px 14px; border-radius: 20px; }

/* Table styles */
.table-kasir { font-size: .85rem; }
.table-kasir th { font-weight: 500; color: #666; background: #fafafa; border-bottom: 2px solid var(--kasir-gray-200); }
.table-kasir td { vertical-align: middle; }
.table-kasir .low-stock { background: #fff5f5; }
.table-kasir .low-stock td:first-child { border-left: 3px solid #FB2C36; }

/* Summary cards */
.summary-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* InApp Template Style Cards */
.inapp-card { border: none; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: all .2s; }
.inapp-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.inapp-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inapp-icon-primary { background: #fff0f0; color: #e66239; }
.inapp-icon-success { background: #f0fff4; color: #28a745; }
.inapp-icon-info { background: #f0f8ff; color: #17a2b8; }
.inapp-icon-warning { background: #fffdf0; color: #ffc107; }
.inapp-icon-lg { display: inline-flex; align-items: center; justify-content: center; opacity: .6; }

/* Responsive POS */
@media (max-width: 768px) {
  .pos-layout { flex-direction: column; height: auto; }
  .pos-cart { width: 100%; min-height: 300px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Print receipt */
@media print {
  body * { visibility: hidden; }
  #receiptBody, #receiptBody * { visibility: visible; }
  #receiptBody { position: absolute; left: 0; top: 0; width: 100%; }
}

/* Scrollbar */
.pos-products::-webkit-scrollbar, .cart-items::-webkit-scrollbar { width: 4px; }
.pos-products::-webkit-scrollbar-thumb, .cart-items::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }