/* ──────────── Moona Polished Design System ──────────── */
:root {
  --moona-primary:    #4f46e5; /* indigo */
  --moona-primary-50: #eef2ff;
  --moona-primary-100:#e0e7ff;
  --moona-accent:     #ec4899; /* pink */
  --moona-success:    #10b981;
  --moona-danger:     #ef4444;
  --moona-warning:    #f59e0b;
  --moona-info:       #06b6d4;
  --moona-ink:        #1e293b;
  --moona-muted:      #64748b;
  --moona-soft:       #f8fafc;
  --moona-line:       #e2e8f0;
  --moona-r-sm: 10px;
  --moona-r-md: 14px;
  --moona-r-lg: 20px;
  --moona-shadow-sm: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04);
  --moona-shadow-md: 0 6px 16px rgba(15,23,42,.07), 0 2px 6px rgba(15,23,42,.05);
  --moona-shadow-lg: 0 20px 50px rgba(15,23,42,.10), 0 8px 18px rgba(15,23,42,.06);
}
body { background:#f1f5f9 !important; color: var(--moona-ink); }

/* Centered max-width container so the content never feels stretched on big monitors.
   Sidebar's 70px margin-left is preserved; the inner column auto-centers within remaining width. */
.wrapper .page-content {
  padding: 1.5rem 1.5rem 2rem !important;
  max-width: 1320px;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}
@media (min-width: 992px) {
  /* When collapsed sidebar is fixed at 70px, treat page-content as centered in the remaining viewport */
  .wrapper .page-wrapper {
    display: flex;
    justify-content: center;
  }
  .wrapper .page-content {
    flex: 1 1 auto;
  }
}
@media (max-width: 991.98px) {
  .wrapper .page-content { padding: 1rem .9rem 1.5rem !important; }
}

/* Forms: gentle inner padding so labels and inputs breathe */
.wrapper .card .card-body .row.g-3 > [class*="col-"] { padding-top: .5rem; padding-bottom: .5rem; }
.wrapper .form-label { color: var(--moona-ink); font-weight: 600; font-size: .82rem; margin-bottom: .35rem; letter-spacing: .15px; }
.wrapper .form-label.required::after { content: " *"; color: var(--moona-danger); }
.wrapper .form-control, .wrapper .form-select { padding: .55rem .85rem; font-size: .92rem; line-height: 1.4; }
.wrapper .input-group-text { padding: .55rem .85rem; }

/* "Wide" full-width forms used by POS, invoice editor — opt-out of the 1320 cap */
.wrapper .page-content.full-width,
.wrapper .page-content:has(.pos-wrap),
.wrapper .page-content:has(.scanner-bar) { max-width: none; }

/* Section header inside a form card */
.wrapper .card-header.section-head {
  background: linear-gradient(135deg, var(--moona-primary-50), #fff);
  font-weight: 600; color: var(--moona-ink);
}

/* Cards */
.wrapper .card { border-radius: var(--moona-r-md); border: 1px solid var(--moona-line); box-shadow: var(--moona-shadow-sm); transition: box-shadow .2s, transform .15s; background:#fff; }
.wrapper .card:hover { box-shadow: var(--moona-shadow-md); }
.wrapper .card-header { background: transparent; border-bottom: 1px solid var(--moona-line); padding: .9rem 1.15rem; }
.wrapper .card-body { padding: 1.1rem 1.15rem; }
.wrapper .card-footer { background: transparent; border-top: 1px solid var(--moona-line); padding: .85rem 1.15rem; }
.wrapper .radius-10, .wrapper .card.radius-10 { border-radius: var(--moona-r-md) !important; }

/* Buttons — softer corners, subtle press depth */
.wrapper .btn { border-radius: var(--moona-r-sm); font-weight: 500; transition: transform .12s, box-shadow .12s, background .15s; }
.wrapper .btn:active { transform: translateY(1px); }
.wrapper .btn-primary  { background: linear-gradient(135deg, #6366f1, #4f46e5); border:0; box-shadow: 0 6px 14px rgba(99,102,241,.30); }
.wrapper .btn-primary:hover { background: linear-gradient(135deg, #4f46e5, #4338ca); box-shadow: 0 8px 18px rgba(79,70,229,.36); }
.wrapper .btn-success  { background: linear-gradient(135deg, #34d399, #10b981); border:0; box-shadow: 0 6px 14px rgba(16,185,129,.30); }
.wrapper .btn-success:hover { background: linear-gradient(135deg, #10b981, #059669); }
.wrapper .btn-danger   { background: linear-gradient(135deg, #fb7185, #ef4444); border:0; box-shadow: 0 6px 14px rgba(239,68,68,.28); }
.wrapper .btn-warning  { background: linear-gradient(135deg, #fbbf24, #f59e0b); color:#7c2d12; border:0; }
.wrapper .btn-outline-primary { color: var(--moona-primary); border-color: var(--moona-primary-100); background:#fff; }
.wrapper .btn-outline-primary:hover { background: var(--moona-primary); color:#fff; }
.wrapper .btn-sm { padding: .35rem .7rem; font-size: .82rem; }

/* Inputs — light, airy */
.wrapper .form-control, .wrapper .form-select {
  border-radius: var(--moona-r-sm); border: 1px solid var(--moona-line);
  background: #fff; color: var(--moona-ink); transition: border-color .15s, box-shadow .15s;
}
.wrapper .form-control:focus, .wrapper .form-select:focus {
  border-color: var(--moona-primary); box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}
.wrapper .form-control::placeholder { color: #94a3b8; }
.wrapper .input-group-text { background:#f8fafc; border-color: var(--moona-line); color: var(--moona-muted); border-radius: var(--moona-r-sm); }

/* Tables — light header, soft row striping */
.wrapper .table { color: var(--moona-ink); margin-bottom: 0; }
.wrapper .table thead th { background:#f8fafc; color: var(--moona-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; border-bottom: 1px solid var(--moona-line); padding: .85rem .95rem; }
.wrapper .table tbody td { padding: .8rem .95rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
.wrapper .table-striped tbody tr:nth-child(even) td { background: rgba(248,250,252,.55); }
.wrapper .table tbody tr:hover td { background: #f5f7fb; }

/* Badges — pastel chips */
.wrapper .badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; font-size: .72em; letter-spacing:.3px; }
.wrapper .badge.bg-success { background:#d1fae5 !important; color:#047857 !important; }
.wrapper .badge.bg-danger  { background:#fee2e2 !important; color:#b91c1c !important; }
.wrapper .badge.bg-warning { background:#fef3c7 !important; color:#b45309 !important; }
.wrapper .badge.bg-info    { background:#cffafe !important; color:#0e7490 !important; }
.wrapper .badge.bg-primary { background:#e0e7ff !important; color:#4338ca !important; }
.wrapper .badge.bg-secondary{ background:#e2e8f0 !important; color:#475569 !important; }

/* KPI gradient cards — softer with subtle shimmer at edges */
.bg-gradient-deepblue    { background: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #a5b4fc 100%) !important; }
.bg-gradient-burning     { background: linear-gradient(135deg, #f43f5e 0%, #fb7185 50%, #fda4af 100%) !important; }
.bg-gradient-ohhappiness { background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%) !important; }
.bg-gradient-orange      { background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fdba74 100%) !important; }
.wrapper .card.bg-gradient-deepblue,
.wrapper .card.bg-gradient-burning,
.wrapper .card.bg-gradient-ohhappiness,
.wrapper .card.bg-gradient-orange {
  border: 0; color: #fff; box-shadow: 0 14px 30px rgba(15,23,42,.15);
}
.wrapper .card.bg-gradient-deepblue:hover,
.wrapper .card.bg-gradient-burning:hover,
.wrapper .card.bg-gradient-ohhappiness:hover,
.wrapper .card.bg-gradient-orange:hover { transform: translateY(-2px); box-shadow: 0 22px 40px rgba(15,23,42,.20); }

/* Page footer — pinned to the bottom of the viewport. It spans full width;
   the fixed sidebar (higher z-index) covers its left portion so the text
   visually aligns with the content column. page-wrapper gets bottom padding
   so the last row is never hidden behind it. */
.wrapper .page-footer.moona-footer {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto !important;
  z-index: 4;
  background: #fff !important;
  border-top: 1px solid var(--moona-line);
  padding: 14px 24px;
  color: var(--moona-muted);
  font-size: .85rem;
  text-align: center;
}
.wrapper .page-wrapper { padding-bottom: 64px; }
.wrapper .page-footer.moona-footer strong { color: var(--moona-ink); }
.moona-footer-link { color: var(--moona-primary); font-weight: 600; text-decoration: none; }
.moona-footer-link:hover { color: #4338ca; text-decoration: underline; }

/* ════════════ Sidebar — cosmetic only; Maxton's native .toggled handles
   collapse, icon-centering, logo sizing, and hover-expand. DO NOT add
   width/position/:hover-collapse rules here — they fight the theme. ════════════ */
.wrapper .sidebar-wrapper { background:#0f172a !important; border-right: 0; }
.wrapper .sidebar-wrapper .sidebar-header { background:#0f172a !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.wrapper .sidebar-wrapper .sidebar-header .logo-text { color:#fff; }

/* Menu item colors (structure left to Maxton) */
.wrapper .sidebar-wrapper .metismenu li a { color:#cbd5e1; font-weight:500; }
.wrapper .sidebar-wrapper .metismenu li a:hover { background: rgba(255,255,255,.06); color:#fff; }
.wrapper .sidebar-wrapper .metismenu li.mm-active > a { background: linear-gradient(135deg,#4f46e5,#6366f1); color:#fff; box-shadow: 0 6px 14px rgba(79,70,229,.30); }
.wrapper .sidebar-wrapper .metismenu li a.has-arrow::after { color:#94a3b8; }
.wrapper .sidebar-wrapper .toggle-icon { color:#94a3b8; }
.wrapper .sidebar-wrapper .toggle-icon:hover { color:#fff; }

/* Submenu colors — Maxton ships white submenu bg; tint to dark to match */
.wrapper .sidebar-wrapper .metismenu ul { background: rgba(0,0,0,.22) !important; }
.wrapper .sidebar-wrapper .metismenu ul li a { color:#94a3b8 !important; }
.wrapper .sidebar-wrapper .metismenu ul li a:hover { background: rgba(99,102,241,.14) !important; color:#e0e7ff !important; }
.wrapper .sidebar-wrapper .metismenu ul li a.active,
.wrapper .sidebar-wrapper .metismenu ul li.mm-active > a { background: rgba(79,70,229,.22) !important; color:#fff !important; }

/* Topbar */
.wrapper header .topbar { background:#fff; border-bottom: 1px solid var(--moona-line); }
.wrapper header .topbar .btn { box-shadow: none; }

/* DataTables polish */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--moona-r-sm) !important; border: 1px solid var(--moona-line) !important;
  padding: .4rem .7rem !important; font-size: .85rem !important;
  background: #fff !important;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--moona-primary) !important; box-shadow: 0 0 0 4px rgba(99,102,241,.12) !important; outline: 0;
}
.dataTables_wrapper .dataTables_filter input { width: 240px; }
.dataTables_wrapper .dataTables_length label { color: var(--moona-muted); font-size: .82rem; gap: .35rem; display:inline-flex; align-items:center; }
.dataTables_wrapper .dataTables_info { color: var(--moona-muted); font-size: .82rem; padding-top: .8rem !important; }
.dataTables_wrapper .dataTables_paginate { padding-top: .55rem !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--moona-line) !important; background: #fff !important; color: var(--moona-ink) !important;
  border-radius: var(--moona-r-sm) !important; padding: .25rem .65rem !important; margin: 0 2px !important; font-size: .85rem !important;
  transition: all .15s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--moona-primary-50) !important; border-color: var(--moona-primary-100) !important; color: var(--moona-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg,#6366f1,#4f46e5) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 4px 10px rgba(79,70,229,.30);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: .4 !important; background: #fff !important; color: var(--moona-muted) !important;
}

/* POS cart polish */
.pos-cart { background:#fff; border-radius: var(--moona-r-md); box-shadow: var(--moona-shadow-md); border: 1px solid var(--moona-line); overflow: hidden; }
.pos-cart .pos-cart-header { padding: 1rem 1.15rem; background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-bottom: 1px solid var(--moona-line); }
.pos-cart .pos-cart-header h6 { color: var(--moona-ink); font-weight: 700; }
.pos-cart .pos-cart-header .btn-outline-warning { color:#f59e0b; border-color:#fde68a; background:#fffbeb; border-radius: var(--moona-r-sm); }
.pos-cart .pos-cart-header .btn-outline-warning:hover { background:#fde68a; color:#7c2d12; }
.pos-cart .pos-cart-header .btn-outline-danger { color:#ef4444; border-color:#fecaca; background:#fef2f2; border-radius: var(--moona-r-sm); }
.pos-cart .pos-cart-header .btn-outline-danger:hover { background:#fee2e2; color:#7f1d1d; }

.pos-cart .pos-cart-items { padding: .75rem 1rem; }
.pos-cart .pos-cart-totals { background: #f8fafc; border-top: 1px solid var(--moona-line); padding: 1rem 1.15rem; }
.pos-cart .pos-cart-totals .d-flex { padding: .25rem 0; }
.pos-cart #cart-grand { font-size: 1.35rem; background: linear-gradient(135deg,#6366f1,#4f46e5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pos-cart #btn-pay { background: linear-gradient(135deg, #10b981, #059669); border: 0; border-radius: var(--moona-r-md); padding: .9rem 1rem; box-shadow: 0 10px 22px rgba(16,185,129,.32); font-weight: 700; letter-spacing: .3px; }
.pos-cart #btn-pay:hover { background: linear-gradient(135deg, #059669, #047857); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(16,185,129,.40); }
.pos-cart #btn-pay:active { transform: translateY(1px); }
.pos-cart .coupon-row .input-group-text { background: #fff8f0; border-color: #fed7aa; color: #c2410c; }
.pos-cart .coupon-applied { background:#ecfdf5; border:1px dashed #34d399; color:#065f46; border-radius: var(--moona-r-sm); }

.empty-cart i { color: #cbd5e1; font-size: 4rem; }
.empty-cart > div { color: var(--moona-ink); font-weight: 600; margin-top: .5rem; font-size: 1rem; }
.empty-cart small { color: var(--moona-muted); }

/* Page header strip used across index pages */
.page-header-card .card-header { background: linear-gradient(135deg, var(--moona-primary-50), #fff); }

/* Custom overrides on top of Maxton */
.required::after{content:" *";color:#dc3545;}
.line-total{font-weight:600;}

/* Gradient KPI cards */
.bg-gradient-deepblue   { background-image: linear-gradient(310deg, #2152ff, #21d4fd); color:#fff; }
.bg-gradient-burning    { background-image: linear-gradient(310deg, #f5365c, #f56036); color:#fff; }
.bg-gradient-ohhappiness{ background-image: linear-gradient(310deg, #00b09b, #96c93d); color:#fff; }
.bg-gradient-orange     { background-image: linear-gradient(310deg, #f7971e, #ffd200); color:#fff; }
.bg-gradient-violet     { background-image: linear-gradient(310deg, #870000, #190a05); color:#fff; }
.bg-gradient-bloody     { background-image: linear-gradient(310deg, #ff4b2b, #ff416c); color:#fff; }
.bg-gradient-moonlight  { background-image: linear-gradient(310deg, #0f2027, #2c5364); color:#fff; }
.bg-white-light { background:rgba(255,255,255,0.18); }

.widget-icon-large { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.widget-icon-small { width:44px; height:44px; border-radius:.5rem; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.bg-light-primary { background:rgba(13,110,253,0.12); }
.bg-light-success { background:rgba(25,135,84,0.12); }
.bg-light-warning { background:rgba(255,193,7,0.18); }
.bg-light-danger  { background:rgba(220,53,69,0.12); }

.radius-10 { border-radius:10px; }

/* POS */
.pos-wrap { display:grid; grid-template-columns: 1fr 380px; gap:1rem; }
@media (max-width: 991.98px) { .pos-wrap { grid-template-columns: 1fr; } }
.pos-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap:.75rem; }
.pos-item { cursor:pointer; border:1px solid #e9ecef; border-radius:.6rem; background:#fff; overflow:hidden; transition:transform .15s, box-shadow .15s, border-color .15s; }
.pos-item:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.08); border-color:#0d6efd; }
.pos-item .img-wrap { aspect-ratio:1/1; background:#f6f7fb; display:flex; align-items:center; justify-content:center; }
.pos-item .img-wrap img { width:100%; height:100%; object-fit:cover; }
.pos-item .meta { padding:.55rem .65rem; }
.pos-item .name { font-size:.85rem; font-weight:600; color:#1f2937; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.3em; }
.pos-item .price { color:#0d6efd; font-weight:700; font-size:.95rem; margin-top:.2rem; }
.pos-item .stock { font-size:.7rem; color:#6c757d; }
.pos-item.out { opacity:.5; pointer-events:none; }

.pos-cart { display:flex; flex-direction:column; background:#fff; border-radius:.6rem; box-shadow:0 4px 14px rgba(0,0,0,.06); height: calc(100vh - 160px); }
.pos-cart .pos-cart-header { padding:.85rem 1rem; border-bottom:1px solid #eef0f4; }
.pos-cart .pos-cart-items { flex:1; overflow-y:auto; padding:.5rem; }
.pos-cart .pos-cart-totals { border-top:1px solid #eef0f4; padding:.75rem 1rem; }
.pos-cart-row { display:flex; align-items:center; gap:.5rem; padding:.4rem .25rem; border-bottom:1px dashed #eef0f4; }
.pos-cart-row .qty-control { display:inline-flex; align-items:center; border:1px solid #dee2e6; border-radius:.4rem; overflow:hidden; }
.pos-cart-row .qty-control button { width:26px; height:26px; border:0; background:#f6f7fb; }
.pos-cart-row .qty-control input { width:40px; border:0; text-align:center; }
.empty-cart { text-align:center; color:#6c757d; padding:2rem 0; }

/* Mobile responsiveness */
@media (max-width: 991.98px) {
  .page-content { padding: .75rem; }
  .pos-grid { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
  .pos-item .name { font-size:.78rem; min-height: 2.1em; }
  .pos-item .price { font-size:.85rem; }
  .pos-cart { height: auto; max-height:60vh; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  table.datatable { font-size:.85rem; }
  .topbar .top-menu .btn { padding:.25rem .65rem !important; font-size:.78rem; }
  .topbar .user-info p { font-size:.78rem; }
  .card-body { padding: .9rem; }
}
@media (max-width: 575.98px) {
  .pos-grid { grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap:.5rem; }
  .topbar .top-menu .btn span, .topbar .top-menu .btn-text { display:none; }
  h4, h5 { font-size:1.05rem; }
  .widget-icon-large { width:42px; height:42px; font-size:1.2rem; }
  .pos-cart-row { flex-wrap:wrap; }
  .pos-cart-row img { width:30px; height:30px; }
}

/* logo chip in dark sidebar */
.wrapper .sidebar-wrapper .sidebar-header .logo-icon { background:#fff; border-radius:8px; padding:4px; box-shadow:0 4px 10px rgba(0,0,0,.25); }

.role-badge { padding:.2rem .55rem; border-radius:1rem; font-size:.7rem; font-weight:600; }
.role-admin     { background:#dc3545; color:#fff; }
.role-cashier   { background:#0d6efd; color:#fff; }
.role-accountant{ background:#198754; color:#fff; }
.role-staff     { background:#6c757d; color:#fff; }

/* Snackbar */
.snackbar-stack { position:fixed; right:20px; bottom:24px; z-index:1090; display:flex; flex-direction:column; gap:10px; max-width:380px; pointer-events:none; }
@media (max-width: 575.98px) {
  .snackbar-stack { right:12px; bottom:14px; left:12px; max-width:none; align-items:stretch; }
}
.snackbar { pointer-events:auto; display:flex; align-items:flex-start; gap:.7rem;
  background:#1f2937; color:#fff; padding:.85rem 1rem .85rem .9rem; border-radius:.55rem;
  box-shadow:0 14px 30px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.15);
  border-left:5px solid #6c757d;
  transform: translateY(120%) scale(.9); opacity:0;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s; max-width:380px; }
.snackbar.show  { transform: translateY(0) scale(1); opacity:1; }
.snackbar.hide  { transform: translateY(20%) scale(.95); opacity:0; }
.snackbar .ico { font-size:1.25rem; margin-top:1px; line-height:1; }
.snackbar .body { flex:1; font-size:.92rem; line-height:1.3; }
.snackbar .title { font-weight:700; font-size:.84rem; letter-spacing:.4px; text-transform:uppercase; opacity:.85; margin-bottom:2px; }
.snackbar .close { background:transparent; color:#fff; border:0; opacity:.7; font-size:1.1rem; line-height:1; padding:2px 4px; cursor:pointer; }
.snackbar .close:hover { opacity:1; }
.snackbar.snack-success { border-left-color:#10b981; background:#064e3b; }
.snackbar.snack-error   { border-left-color:#ef4444; background:#7f1d1d; }
.snackbar.snack-warning { border-left-color:#f59e0b; background:#78350f; }
.snackbar.snack-info    { border-left-color:#3b82f6; background:#1e3a8a; }
@keyframes snack-shimmer { from { box-shadow:0 14px 30px rgba(0,0,0,.25); } 50% { box-shadow:0 18px 40px rgba(16,185,129,.45); } to { box-shadow:0 14px 30px rgba(0,0,0,.25); } }
.snackbar.snack-success.show { animation: snack-shimmer 1.2s ease-out 1; }