/**
 * Daily Khata - Professional Modern UI & Design System
 * Subtle "Pinkish / Black" Luxury Corporate Palette with Authentic Accents.
 * Palette: Dark Midnight (#0f1117), Brand Magenta-Pink (#D20CAF), Soft Rose (#f472b6), Clean Slate & Neutral Card Whites.
 */

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

:root {
  /* Modern Professional Color Tokens - Subtle Pinkish / Black Theme */
  --color-primary: #D20CAF;
  --color-primary-hover: #b80a99;
  --color-primary-active: #9e0883;
  --color-primary-light: rgba(210, 12, 175, 0.08);
  --color-primary-border: rgba(210, 12, 175, 0.25);
  --color-primary-glow: rgba(210, 12, 175, 0.22);

  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-light: #ecfdf5;
  --color-success-border: #a7f3d0;

  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-light: #fef2f2;

  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-light: #fffbeb;

  --color-info: #0284c7;
  --color-info-hover: #0369a1;
  --color-info-light: #f0f9ff;

  --color-dark: #0f1117;
  --color-dark-surface: #161824;
  --color-dark-sidebar: #0f1117;
  --color-body: #334155;
  --color-muted: #64748b;
  --color-subtle: #94a3b8;

  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --border-light: #e2e8f0;
  --border-subtle: #cbd5e1;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* Base Typography & Clean Reset */
body, .main-header, .sidebar, .content-wrapper, h1, h2, h3, h4, h5, h6, .btn, .form-control, .table {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.content-wrapper {
  background-color: var(--bg-page) !important;
}

/* Custom Clean Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* -------------------------------------------------------------
 * 1. TOP HEADER NAVBAR - SLEEK DARK / PINKISH ACCENTS
 * ------------------------------------------------------------- */
.main-header {
  background-color: #0f1117 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}

.main-header .navbar {
  background-color: #0f1117 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.main-header .logo {
  background-color: #0a0c10 !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.main-header .logo:hover {
  background-color: #0c0e14 !important;
  color: #f472b6 !important;
}

.main-header .sidebar-toggle {
  color: #cbd5e1 !important;
  transition: all 0.18s ease;
}

.main-header .sidebar-toggle:hover {
  background: rgba(210, 12, 175, 0.14) !important;
  color: #ffffff !important;
}

.main-header .navbar-custom-menu .navbar-nav > li > a {
  color: #cbd5e1 !important;
  font-weight: 500;
  transition: all 0.18s ease;
}

.main-header .navbar-custom-menu .navbar-nav > li > a:hover,
.main-header .navbar-custom-menu .navbar-nav > li > a:focus,
.main-header .navbar-custom-menu .navbar-nav .open > a {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.main-header .navbar-custom-menu .btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 12px;
  margin-top: 10px;
  margin-right: 6px;
  transition: all 0.18s ease;
}

.main-header .dropdown-menu {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border-light) !important;
  padding: 6px !important;
}

.main-header .dropdown-menu > li > a {
  border-radius: var(--radius-xs);
  padding: 8px 14px;
  font-weight: 500;
  color: var(--color-body);
  transition: all 0.15s;
}

.main-header .dropdown-menu > li > a:hover {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}

/* -------------------------------------------------------------
 * 2. ADMIN SIDEBAR NAVIGATION - PINKISH / BLACK EXECUTIVE DESIGN
 * ------------------------------------------------------------- */
.main-sidebar,
.left-side {
  background-color: #0f1117 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18) !important;
}

.main-sidebar .sidebar {
  background-color: #0f1117 !important;
  padding-bottom: 30px;
}

.main-sidebar .logo {
  background-color: #0a0c10 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.sidebar-menu {
  padding: 6px 8px;
}

.sidebar-menu > li.header {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: transparent !important;
  padding: 14px 12px 6px 12px;
}

.sidebar-menu > li > a {
  border-radius: var(--radius-sm) !important;
  font-weight: 500;
  font-size: 13px;
  color: #94a3b8 !important;
  padding: 9px 12px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 3px solid transparent !important;
}

.sidebar-menu > li:hover > a {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border-left-color: rgba(210, 12, 175, 0.6) !important;
}

.sidebar-menu > li.active > a {
  font-weight: 600;
  background: rgba(210, 12, 175, 0.14) !important;
  color: #ffffff !important;
  border-left-color: #D20CAF !important;
}

/* Sidebar Icon Chips - Modern Tinted Visual Accents */
.sidebar-menu > li > a > i,
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 6px;
  margin-right: 10px;
  font-size: 13px;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-menu > li:hover > a > i,
.sidebar-menu > li:hover > a > .fa,
.sidebar-menu > li:hover > a > .fas {
  transform: scale(1.08);
}

/* Section-Specific Icon Badges */
.sidebar-menu > li > a > .fa-home,
.sidebar-menu > li > a > .fa-tachometer-alt {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.14) !important;
}
.sidebar-menu > li > a > .fa-users,
.sidebar-menu > li > a > .fa-user {
  color: #a78bfa !important;
  background: rgba(167, 139, 250, 0.14) !important;
}
.sidebar-menu > li > a > .fa-address-book,
.sidebar-menu > li > a > .fa-id-badge {
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.14) !important;
}
.sidebar-menu > li > a > .fa-cubes,
.sidebar-menu > li > a > .fa-cube,
.sidebar-menu > li > a > .fa-boxes {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.14) !important;
}
.sidebar-menu > li > a > .fa-arrow-circle-down,
.sidebar-menu > li > a > .fa-shopping-bag {
  color: #22d3ee !important;
  background: rgba(34, 211, 238, 0.14) !important;
}
.sidebar-menu > li > a > .fa-shopping-cart,
.sidebar-menu > li > a > .fa-arrow-circle-up,
.sidebar-menu > li > a > .fa-cash-register {
  color: #60a5fa !important;
  background: rgba(96, 165, 250, 0.14) !important;
}
.sidebar-menu > li > a > .fa-truck,
.sidebar-menu > li > a > .fa-exchange-alt {
  color: #f472b6 !important;
  background: rgba(244, 114, 182, 0.14) !important;
}
.sidebar-menu > li > a > .fa-minus-circle,
.sidebar-menu > li > a > .fa-money-bill-alt,
.sidebar-menu > li > a > .fa-receipt {
  color: #f87171 !important;
  background: rgba(248, 113, 113, 0.14) !important;
}
.sidebar-menu > li > a > .fa-chart-bar,
.sidebar-menu > li > a > .fa-chart-pie,
.sidebar-menu > li > a > .fa-chart-line {
  color: #facc15 !important;
  background: rgba(250, 204, 21, 0.14) !important;
}
.sidebar-menu > li > a > .fa-cogs,
.sidebar-menu > li > a > .fa-cog,
.sidebar-menu > li > a > .fa-wrench {
  color: #94a3b8 !important;
  background: rgba(148, 163, 184, 0.14) !important;
}
.sidebar-menu > li > a > .fa-bell {
  color: #fb923c !important;
  background: rgba(251, 146, 60, 0.14) !important;
}

/* Sidebar Sub-Menu */
.sidebar-menu .treeview-menu {
  background: #090a10 !important;
  border-left: 1px solid rgba(210, 12, 175, 0.18) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 4px 6px;
  margin: 2px 4px 6px 12px;
}

.sidebar-menu .treeview-menu > li > a {
  color: #94a3b8 !important;
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  padding: 7px 12px 7px 18px;
  transition: all 0.15s;
}

.sidebar-menu .treeview-menu > li > a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.sidebar-menu .treeview-menu > li.active > a {
  color: #f472b6 !important;
  font-weight: 600;
  background: rgba(210, 12, 175, 0.12) !important;
}

/* Sidebar Search Box */
.sidebar-search-box {
  margin: 12px 10px 14px 10px !important;
}

.sidebar-search-box .input-group {
  background: #171822 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  transition: all 0.2s ease;
}

.sidebar-search-box .input-group:focus-within {
  border-color: #D20CAF !important;
  box-shadow: 0 0 0 2px rgba(210, 12, 175, 0.18) !important;
  background: #1c1e2b !important;
}

.sidebar-search-box input.form-control {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 12.5px;
  box-shadow: none !important;
  padding-left: 6px;
}
.sidebar-search-box input.form-control::placeholder {
  color: #64748b !important;
}
.sidebar-search-box .input-group-addon {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  padding: 6px 8px;
}
.sidebar-search-box .input-group:focus-within .input-group-addon {
  color: #D20CAF !important;
}

/* -------------------------------------------------------------
 * 2.5. DASHBOARD EXECUTIVE BANNER & DATE FILTER CONTROLS
 * Subtle Pinkish / Black Gradient Banner with Executive Finish
 * ------------------------------------------------------------- */
.content-wrapper .content-header-custom {
  background: linear-gradient(135deg, #0d0f15 0%, #161724 55%, #201326 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(210, 12, 175, 0.18) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.content-wrapper .content-header-custom::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 500px;
  height: 100%;
  background: radial-gradient(circle at right top, rgba(210, 12, 175, 0.14) 0%, transparent 70%);
  pointer-events: none;
}

.content-wrapper .content-header-custom h1 {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  margin-top: 5px;
}

.content-wrapper .content-header-custom .breadcrumb,
.content-wrapper .content-header-custom .breadcrumb > li,
.content-wrapper .content-header-custom .breadcrumb > .active {
  color: #cbd5e1 !important;
}

/* Dashboard Date Filter Buttons (Subtle Glass Pills) */
.content-custom .btn-group .btn-info {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #e2e8f0 !important;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.content-custom .btn-group .btn-info:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(210, 12, 175, 0.5) !important;
  color: #ffffff !important;
}

.content-custom .btn-group .btn-info.active {
  background: #D20CAF !important;
  border-color: #D20CAF !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(210, 12, 175, 0.4) !important;
}

/* -------------------------------------------------------------
 * 3. CARDS, BOXES & PANELS
 * ------------------------------------------------------------- */
.box, .box-solid {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  margin-bottom: 18px;
  transition: all 0.2s ease;
}

.box.box-primary {
  border-top: 3px solid var(--color-primary) !important;
}
.box.box-success {
  border-top: 3px solid var(--color-success) !important;
}
.box.box-info {
  border-top: 3px solid var(--color-info) !important;
}
.box.box-warning {
  border-top: 3px solid var(--color-warning) !important;
}
.box.box-danger {
  border-top: 3px solid var(--color-danger) !important;
}

.box-header {
  border-bottom: 1px solid var(--border-light);
  padding: 12px 16px;
}

.box-header .box-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-dark) !important;
}

.box-body {
  padding: 16px;
}

/* -------------------------------------------------------------
 * 4. ELEVATED MODERN BUTTONS
 * ------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: var(--shadow-xs);
  border: 1px solid transparent;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}

.btn:active, .btn.active {
  transform: translateY(0);
}

.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-primary-hover) !important;
  border-color: #1e40af !important;
  color: #ffffff !important;
}

.btn-success {
  background-color: var(--color-success) !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--color-success-hover) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
}

.btn-danger {
  background-color: var(--color-danger) !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: var(--color-danger-hover) !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

.btn-warning {
  background-color: var(--color-warning) !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}
.btn-warning:hover, .btn-warning:focus {
  background-color: var(--color-warning-hover) !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
}

.btn-info {
  background-color: var(--color-info) !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
}
.btn-info:hover, .btn-info:focus {
  background-color: var(--color-info-hover) !important;
  border-color: #075985 !important;
  color: #ffffff !important;
}

.btn-default {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}
.btn-default:hover, .btn-default:focus {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* -------------------------------------------------------------
 * 5. FORM INPUTS & SELECT2
 * ------------------------------------------------------------- */
.form-control {
  border-radius: var(--radius-sm) !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
  height: 35px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--color-dark);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
}

.input-group-addon {
  border-radius: var(--radius-sm);
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: var(--color-muted);
}

.select2-container--default .select2-selection--single {
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-sm) !important;
  height: 35px !important;
  padding: 3px 6px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 27px !important;
  color: var(--color-dark) !important;
  font-weight: 500;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
}

/* -------------------------------------------------------------
 * 6. TABLES & DATA GRIDS
 * ------------------------------------------------------------- */
.table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.table > thead > tr > th {
  background-color: #f8fafc !important;
  color: var(--color-dark) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid var(--border-light) !important;
  border-top: none !important;
  padding: 10px 12px !important;
}

.table > tbody > tr > td {
  padding: 10px 12px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--border-light) !important;
  font-size: 13px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fafbfc;
}

.table-hover > tbody > tr:hover {
  background-color: #f1f5f9 !important;
}

/* -------------------------------------------------------------
 * 7. COMPLETE POS SCREEN REFINEMENTS
 * ------------------------------------------------------------- */
/* POS Top Header */
.pos-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 8px 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 12px;
}

.pos-header-chip {
  transition: all 0.15s ease;
}
.pos-header-chip:hover {
  background: #ffffff !important;
  box-shadow: var(--shadow-xs);
}

.pos-header .btn {
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  margin: 1px 2px !important;
}

#pos_network_status_btn {
  border-radius: var(--radius-pill) !important;
  padding: 4px 12px !important;
  transition: all 0.2s ease;
}

/* POS Left Box & Cart Container */
.pos_product_div {
  max-height: calc(100vh - 380px);
  min-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: #ffffff;
  padding: 0 !important;
}

#pos_table {
  margin-bottom: 0;
}

#pos_table thead th {
  background: #f1f5f9 !important;
  color: var(--color-dark) !important;
  font-weight: 700;
  font-size: 12px;
  padding: 9px 10px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

#pos_table tbody tr.product_row {
  transition: background-color 0.15s;
}

#pos_table tbody tr.product_row:hover {
  background: #f8fafc;
}

#pos_table tbody td {
  padding: 8px 10px !important;
  vertical-align: middle !important;
  font-size: 13px;
}

/* Quantity Stepper Input in Cart - Modern Stepper Layout with Zero Collision */
.input-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-sm) !important;
  background: #ffffff !important;
  padding: 2px !important;
  box-shadow: none !important;
  outline: none !important;
  width: auto !important;
  max-width: 110px !important;
  box-sizing: border-box !important;
}

.input-number:focus-within {
  border-color: #94a3b8 !important;
  box-shadow: none !important;
}

/* Fix flex child sizing so buttons never collapse to 0 width or overlap the input */
.input-number .input-group-btn,
.input-number span.input-group-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  position: static !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
}

.input-number .input-group-btn button,
.input-number button.quantity-down,
.input-number button.quantity-up {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: var(--radius-xs) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  font-size: 11px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  position: static !important;
  float: none !important;
}

.input-number button.quantity-down:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}

.input-number button.quantity-up:hover {
  background: #dcfce7 !important;
  border-color: #86efac !important;
}

/* Neutralize Minus button icon so it is never a stray line or overlapping text */
.input-number button.quantity-down i,
.input-number button.quantity-down i.text-danger,
.input-number button.quantity-down i.text-muted {
  color: #64748b !important;
  font-size: 10px !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-block !important;
}

.input-number button.quantity-down:hover i {
  color: #ef4444 !important;
}

.input-number button.quantity-up i,
.input-number button.quantity-up i.text-success {
  color: #10b981 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-block !important;
}

/* Centered Quantity Input Field between Minus and Plus */
.input-number input.pos_quantity,
.input-number input.pos_quantity:focus,
.input-number input.pos_quantity:active,
.input-number input.pos_quantity.error,
.input-number input.pos_quantity[aria-invalid="true"] {
  flex: 1 1 auto !important;
  width: 44px !important;
  min-width: 38px !important;
  max-width: 52px !important;
  height: 24px !important;
  line-height: 24px !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  padding: 0 4px !important;
  margin: 0 !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #0f172a !important;
  background: transparent !important;
  position: static !important;
  float: none !important;
}

/* Eliminate any injected jQuery validation error labels or lines around quantity in POS table */
#pos_table label.error,
#pos_table .error:not(input),
.input-number ~ label.error,
.pos_product_div label.error,
td label.error {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* POS Delete Row Button - Clean Red Circular Chip */
.pos_remove_row {
  color: #ef4444 !important;
  cursor: pointer;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  background: #fef2f2;
  transition: all 0.18s ease;
  display: inline-block;
  font-size: 12px;
}
.pos_remove_row:hover {
  background: #fee2e2;
  color: #dc2626 !important;
  transform: scale(1.1);
}

/* Product Cards in POS Right Pane */
#product_list_body {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 4px;
}

.product_list {
  padding: 5px !important;
}

.product_box {
  background: #ffffff !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px !important;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-xs) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  height: 145px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product_box:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.product_box .image-container {
  height: 66px !important;
  width: 100%;
  border-radius: var(--radius-xs);
  background-color: #f8fafc;
  margin-bottom: 4px;
  position: relative;
}

/* Branded No-Image Placeholder matching #D20CAF */
.product_box .image-container.product-no-image-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(210, 12, 175, 0.04) 0%, rgba(210, 12, 175, 0.1) 100%) !important;
  border: 1px dashed rgba(210, 12, 175, 0.25) !important;
  border-radius: var(--radius-xs) !important;
  transition: all 0.2s ease !important;
}

.product_box:hover .image-container.product-no-image-placeholder {
  background: linear-gradient(135deg, rgba(210, 12, 175, 0.08) 0%, rgba(210, 12, 175, 0.18) 100%) !important;
  border-color: rgba(210, 12, 175, 0.5) !important;
}

.product-placeholder-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(210, 12, 175, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product_box:hover .product-placeholder-icon {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(210, 12, 175, 0.3);
}

.product-placeholder-icon i {
  color: #D20CAF !important;
  font-size: 16px !important;
}

.product_box .text_div {
  line-height: 1.25;
}

.product_box .text_div small.text-muted {
  font-weight: 600;
  font-size: 11.5px;
  color: var(--color-dark) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Retail Price Tag on Product Card - Clean Emerald Badge */
.product_box .price-tag {
  display: inline-block;
  margin-top: 3px;
  font-weight: 700;
  font-size: 11.5px;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
}

/* =============================================================
 * POS BOTTOM DOCKED ACTIONS BAR (Rock-Solid 2-Tier Architecture)
 * ============================================================= */
.pos-form-actions-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1025;
}

.pos-form-actions {
  background: #0f172a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 5px 16px 7px 16px !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Tier 1: Quick Actions & Utilities Strip */
.pos-actions-tier-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding-bottom: 3px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.pos-actions-tier-left,
.pos-actions-tier-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.pos-actions-tier-top .btn {
  height: 27px !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: none !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
}

.pos-actions-tier-top .btn:hover {
  transform: translateY(-1px) !important;
}

.pos-actions-tier-top #pos-cancel {
  background: #ef4444 !important;
  color: #ffffff !important;
}
.pos-actions-tier-top #pos-cancel:hover {
  background: #dc2626 !important;
}

.pos-actions-tier-top #recent-transactions {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}
.pos-actions-tier-top #recent-transactions:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* Tier 2: Dedicated Fixed Bottom Checkout Strip */
.pos-actions-tier-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

/* 1. Total Payable Dock */
.pos-bottom-total-dock {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 4px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex-shrink: 0 !important;
}

.pos-total-caption {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.pos-total-amount {
  color: #10b981 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.35) !important;
  line-height: 1 !important;
}

/* 2. Permanent Fixed Cash Tender & Return Box */
.pos-cash-return-box {
  display: flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1.5px solid rgba(210, 12, 175, 0.45) !important;
  box-shadow: 0 0 14px rgba(210, 12, 175, 0.18) !important;
  border-radius: 8px !important;
  padding: 3px 12px !important;
  gap: 10px !important;
  height: 38px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.pos-cash-input-group,
.pos-change-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.pos-cash-tag {
  font-weight: 700 !important;
  font-size: 12px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.pos-cash-tag i {
  color: #D20CAF !important;
}

#pos_customer_paying_input {
  width: 105px !important;
  height: 30px !important;
  padding: 3px 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  border: 1.5px solid #D20CAF !important;
  color: #0f172a !important;
  background: #ffffff !important;
  text-align: right !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

#pos_customer_paying_input:focus {
  border-color: #D20CAF !important;
  box-shadow: 0 0 0 3px rgba(210, 12, 175, 0.35) !important;
  outline: none !important;
}

.pos-cash-divider {
  width: 1px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

.pos-change-tag {
  font-weight: 700 !important;
  font-size: 11.5px !important;
  color: #cbd5e1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.pos-change-val {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #00ff7f !important;
  min-width: 75px !important;
  display: inline-block !important;
}

/* 3. Fast Checkout Triggers Dock */
.pos-bottom-buttons-dock {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.pos-bottom-buttons-dock .btn {
  height: 38px !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: none !important;
  margin: 0 !important;
  transition: all 0.18s ease !important;
}

.pos-bottom-buttons-dock .pos-btn-cash {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

.pos-bottom-buttons-dock .pos-btn-cash:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

.pos-bottom-buttons-dock .pos-btn-checkout {
  background: linear-gradient(135deg, #D20CAF 0%, #b80a99 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(210, 12, 175, 0.35) !important;
}

.pos-bottom-buttons-dock .pos-btn-checkout:hover {
  background: linear-gradient(135deg, #be0b9e 0%, #a20987 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(210, 12, 175, 0.5) !important;
}

/* Ensure POS Layout body has sufficient bottom padding so content is never covered */
body.lockscreen .content {
  padding-bottom: 95px !important;
}


/* -------------------------------------------------------------
 * 8. DASHBOARD STAT CARDS & CHARTS
 * ------------------------------------------------------------- */
.info-box-new-style {
  background: #ffffff !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
  margin-bottom: 18px;
}

.info-box-new-style:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

.info-box-new-style .info-box-icon {
  width: 50px !important;
  height: 50px !important;
  line-height: 50px !important;
  border-radius: var(--radius-sm) !important;
  text-align: center !important;
  font-size: 22px !important;
  margin-right: 14px;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.info-box-new-style .info-box-content {
  padding: 0 !important;
  margin-left: 0 !important;
}

.info-box-new-style .info-box-text {
  text-transform: uppercase;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--color-muted) !important;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.info-box-new-style .info-box-number {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--color-dark) !important;
}

/* Date filter button group */
.content-custom .btn-group label.btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--color-body) !important;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 14px;
  box-shadow: none;
}
.content-custom .btn-group label.btn.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------
 * 9. SUPERADMIN MODERN & INTERACTIVE UI SYSTEM
 * ------------------------------------------------------------- */
.superadmin-nav-container {
  margin: 10px 0 20px 0 !important;
}

.superadmin-navbar-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 8px 14px;
}

.superadmin-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.superadmin-brand {
  display: flex;
  align-items: center;
}

.superadmin-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: var(--color-dark);
  font-weight: 700;
  font-size: 15px;
}

.superadmin-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(210, 12, 175, 0.12);
  color: #D20CAF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.superadmin-pill-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: #0f1117;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.superadmin-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.superadmin-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.superadmin-nav-item:hover {
  color: #0f172a;
  background: rgba(210, 12, 175, 0.06);
  transform: translateY(-1px);
}

.superadmin-nav-item.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #D20CAF 0%, #b80a99 100%) !important;
  box-shadow: 0 4px 12px rgba(210, 12, 175, 0.3) !important;
}

.superadmin-nav-item.active i {
  color: #ffffff !important;
}

/* Superadmin Page Header */
.superadmin-header {
  margin-bottom: 15px;
  padding: 15px 15px 5px 15px !important;
}

.superadmin-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.4px;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.superadmin-live-badge {
  font-size: 11px;
  font-weight: 700;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.superadmin-live-badge i {
  font-size: 7px;
  animation: pulse 1.8s infinite;
}

.superadmin-date-filter .btn {
  border-radius: var(--radius-sm) !important;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.superadmin-date-filter .btn.active {
  background: #0f1117 !important;
  border-color: #0f1117 !important;
  color: #ffffff !important;
}

/* Superadmin Executive KPI Cards */
.superadmin-stat-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 165px;
}

.superadmin-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  border-color: #cbd5e1;
}

.superadmin-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  transition: transform 0.2s ease;
}

.superadmin-stat-card:hover .superadmin-stat-icon {
  transform: scale(1.08);
}

.superadmin-stat-icon.icon-teal {
  background: #ecfdf5;
  color: #10b981;
}

.superadmin-stat-icon.icon-pink {
  background: rgba(210, 12, 175, 0.12);
  color: #D20CAF;
}

.superadmin-stat-icon.icon-amber {
  background: #fffbeb;
  color: #f59e0b;
}

.superadmin-stat-icon.icon-blue {
  background: #eff6ff;
  color: #2563eb;
}

.superadmin-stat-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

.superadmin-stat-value {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2;
}

.superadmin-stat-trend {
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.superadmin-stat-link {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none !important;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  transition: color 0.15s ease;
}

.superadmin-stat-card:hover .superadmin-stat-link {
  color: #D20CAF;
}

.superadmin-stat-link i {
  transition: transform 0.18s ease;
}

.superadmin-stat-card:hover .superadmin-stat-link i {
  transform: translateX(3px);
}

/* Superadmin Quick Actions Bar */
.superadmin-quick-actions-bar {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: var(--shadow-xs);
}

.quick-actions-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quick-actions-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.superadmin-btn-accent {
  background: linear-gradient(135deg, #D20CAF 0%, #b80a99 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 2px 8px rgba(210, 12, 175, 0.25) !important;
  transition: all 0.18s ease !important;
}

.superadmin-btn-accent:hover {
  background: linear-gradient(135deg, #b80a99 0%, #9e0883 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(210, 12, 175, 0.35) !important;
}

.superadmin-btn-action {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.18s ease !important;
}

.superadmin-btn-action:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}

/* Superadmin Chart Box */
.superadmin-chart-box {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden;
  background: #ffffff;
}

.superadmin-chart-box .box-header {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 14px 20px !important;
}

.chart-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(210, 12, 175, 0.12);
  color: #D20CAF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Superadmin Modern Pricing Cards */
.superadmin-pricing-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.superadmin-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.09), 0 6px 12px -4px rgba(0, 0, 0, 0.04);
  border-color: #cbd5e1;
}

.superadmin-pricing-card.is-active {
  border-top: 3px solid #D20CAF !important;
}

.pricing-card-header {
  padding: 18px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.pricing-card-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.pricing-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pricing-card-body {
  padding: 20px;
  flex-grow: 1;
}

.pricing-price-tag {
  margin-bottom: 20px;
  text-align: center;
  background: #f8fafc;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #f1f5f9;
}

.pricing-price-amount {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
}

.pricing-price-duration {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}

.pricing-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-features-list li {
  padding: 8px 0;
  font-size: 13px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px dashed #f1f5f9;
}

.pricing-features-list li:last-child {
  border-bottom: none;
}

.pricing-features-list li i {
  width: 18px;
  text-align: center;
  font-size: 13px;
}

.pricing-card-footer {
  padding: 14px 20px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* -------------------------------------------------------------
 * 10. MODERN POS TAB CONTAINER (Settings, Profile & Configuration)
 * ------------------------------------------------------------- */
div.pos-tab-container {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  background-color: #ffffff !important;
  overflow: hidden;
  margin-bottom: 25px;
}

div.pos-tab-menu {
  background: #f8fafc;
  border-right: 1px solid var(--border-light);
  padding: 0 !important;
}

div.pos-tab-menu div.list-group {
  margin-bottom: 0;
  border: none;
}

div.pos-tab-menu div.list-group > a {
  background: transparent !important;
  color: #475569 !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 13px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  text-align: left !important;
  display: flex;
  align-items: center;
}

div.pos-tab-menu div.list-group > a:hover {
  background: rgba(210, 12, 175, 0.04) !important;
  color: #D20CAF !important;
  padding-left: 22px !important;
}

div.pos-tab-menu div.list-group > a.active {
  background: linear-gradient(135deg, #D20CAF 0%, #b80a99 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(210, 12, 175, 0.25) !important;
}

div.pos-tab-menu div.list-group > a.active:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -10px;
  border-left: 0;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-left: 9px solid #b80a99;
}

div.pos-tab-menu div.list-group > a .glyphicon,
div.pos-tab-menu div.list-group > a .fa {
  color: inherit !important;
  margin-right: 8px;
  font-size: 14px;
}

div.pos-tab-content {
  background-color: #ffffff;
  padding: 24px !important;
}

/* -------------------------------------------------------------
 * 11. MODERN PILL STATUS LABELS & BADGES
 * ------------------------------------------------------------- */
.label, .badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  box-shadow: none;
}

.label.bg-green, .badge.bg-green, .label-success {
  background-color: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.label.bg-red, .badge.bg-red, .label-danger {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.label.bg-yellow, .badge.bg-yellow, .label-warning {
  background-color: rgba(245, 158, 11, 0.12) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.label.bg-aqua, .label.bg-blue, .badge.bg-aqua, .label-info {
  background-color: rgba(14, 165, 233, 0.12) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
}

.label.bg-navy {
  background-color: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
}

.label.bg-gray, .badge.bg-gray, .label-default {
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}



/* -------------------------------------------------------------
 * 12. POS PAYMENT MODAL & CHECKOUT MULTI-PAY
 * ------------------------------------------------------------- */
#modal_payment .modal-content {
  border-radius: 14px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
}

#modal_payment .modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid #334155 !important;
}

#modal_payment .modal-title {
  color: #ffffff !important;
}

#modal_payment .modal-body {
  background: #ffffff !important;
  color: #1e293b !important;
}

/* Payment summary dark sidebar card */
.pos-payment-summary-box {
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  padding: 18px 16px !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.35) !important;
}

.pos-payment-summary-box .pos-summary-item span,
.pos-payment-summary-box strong {
  color: #94a3b8 !important;
}

.pos-payment-summary-box span.total_quantity {
  color: #ffffff !important;
}

.pos-payment-summary-box span.total_payable_span {
  color: #38bdf8 !important;
}

.pos-payment-summary-box span.total_paying {
  color: #34d399 !important;
}

.pos-payment-summary-box span.change_return_span {
  color: #f1f5f9 !important;
}

.pos-payment-summary-box span.balance_due {
  color: #f87171 !important;
}

/* Payment Rows inside modal */
.payment_row {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
}

.payment_row .form-control {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

/* -------------------------------------------------------------
 * 13. PRINT MEDIA STYLES FOR RECEIPTS
 * ------------------------------------------------------------- */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .no-print,
  .main-sidebar,
  .left-side,
  .main-header,
  .main-footer,
  .content-header,
  .modal,
  .modal-backdrop,
  #pos-form,
  .pos-form-actions,
  .scrolltop,
  #toast-container {
    display: none !important;
  }
  .print_section,
  #receipt_section {
    display: block !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
}