/* ═════════════════════════════════════════════════════════════
   BULLETPROOF CORE UI & BOOTSTRAP FALLBACK GUARANTEE (v4.0)
   ═════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 1. Never underline links or buttons anywhere in the app */
a, a:link, a:visited, a:hover, a:focus, a:active,
.btn, .btn:hover, .btn:focus, .btn:active,
.sidebar-menu a, .main-header a, .small-box-footer, .breadcrumb a, .box-title a {
  text-decoration: none !important;
}

ul, ol {
  margin-top: 0;
}

/* Hide closed AdminLTE right control-sidebar so it never causes horizontal page overflow */
.control-sidebar,
.control-sidebar-bg {
  display: none !important;
}
.control-sidebar.control-sidebar-open,
body.control-sidebar-open .control-sidebar,
body.control-sidebar-open .control-sidebar-bg {
  display: block !important;
}

/* 2. Top Header & Profile Dropdown (Never Open by Default, Never Go Off-Screen) */
.wrapper {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
.main-header {
  position: relative;
  max-height: none !important;
  z-index: 1030;
  overflow: visible !important;
  max-width: 100vw !important;
}
.main-header .logo {
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  text-decoration: none !important;
}
.main-header .navbar {
  min-height: 50px !important;
  margin-bottom: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 10px 0 0 !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
}
@media (min-width: 768px) {
  .main-header .logo {
    float: left;
    width: 230px;
  }
  .main-header .navbar {
    margin-left: 230px;
    width: calc(100% - 230px) !important;
    max-width: calc(100vw - 230px) !important;
  }
  body.sidebar-mini.sidebar-collapse .main-header .logo {
    width: 50px;
    padding: 0 5px;
  }
  body.sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 50px;
    width: calc(100% - 50px) !important;
    max-width: calc(100vw - 50px) !important;
  }
}
.main-header .navbar::before,
.main-header .navbar::after {
  display: none !important;
}
.main-header .sidebar-toggle {
  float: none !important;
  flex-shrink: 0 !important;
  padding: 15px 12px !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.main-header .shop-title-header {
  float: none !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.main-header .shop-title-header .shop-name-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
.main-header .navbar-custom-menu {
  float: none !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}
.main-header .navbar-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
.main-header .navbar-nav > li {
  list-style: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.main-header .navbar-nav > li > a {
  color: #ffffff !important;
  padding: 8px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.main-header .navbar-nav > li > a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Language Switcher Pill Default & Active Styling */
.lang-switcher-pill .lang-pill-link {
  color: #ffffff !important;
}
.lang-switcher-pill .lang-pill-link.active-lang {
  background: #ffffff !important;
  color: #047857 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* Responsive Header Breakpoints for Tablets & Small Laptops (768px - 1199px) */
@media (max-width: 1199px) {
  .main-header .navbar-nav > li.nav-main-site-link,
  .navbar-custom-menu .navbar-nav > li.nav-main-site-link,
  .main-header .gst-portal-badge {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .main-header .user-name-label,
  .main-header .hidden-sm {
    display: none !important;
  }
  .main-header .shop-title-header .shop-name-text {
    max-width: 140px !important;
  }
}

/* Profile Dropdown Menu - Strictly Hidden Unless .open is toggled, Never Off-Screen */
.main-header .dropdown-menu,
.navbar-nav > .user-menu > .dropdown-menu,
#udharpeUserDropdownMenu {
  display: none !important;
  list-style: none !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 12px !important;
  left: auto !important;
  width: 265px !important;
  max-width: calc(100vw - 24px) !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 10060 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.main-header .dropdown.open > .dropdown-menu,
.main-header .user-menu.open > .dropdown-menu,
#udharpeUserDropdownLi.open > #udharpeUserDropdownMenu,
#udharpeUserDropdownMenu.force-open,
.dropdown.open > .dropdown-menu,
.user-menu.open > .dropdown-menu,
.dropdown-menu.force-open {
  display: block !important;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  padding: 18px 15px !important;
  text-align: center !important;
  height: auto !important;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-footer {
  background: #f8fafc !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-footer::before,
.navbar-nav > .user-menu > .dropdown-menu > li.user-footer::after {
  display: none !important;
}

/* 3. Sidebar Menu Clean Reset */
.sidebar-menu,
.sidebar-menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sidebar-menu > li {
  list-style: none !important;
  position: relative;
  margin: 0;
  padding: 0;
}
.sidebar-menu > li > a {
  padding: 11px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.sidebar-menu > li > a > span:not(.pull-right-container) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 175px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.sidebar-menu > li > a > .pull-right-container {
  margin-left: auto !important;
  position: static !important;
  margin-top: 0 !important;
  flex-shrink: 0 !important;
}

/* 4. Core Bootstrap 3 Grid System Fallback (Guarantees Multi-Column Layout at >= 768px) */
.row {
  margin-left: -15px;
  margin-right: -15px;
  clear: both;
}
.row::before, .row::after,
.box-body::before, .box-body::after,
.box-footer::before, .box-footer::after,
.form-group::before, .form-group::after {
  content: " ";
  display: table;
}
.row::after,
.box-body::after,
.box-footer::after,
.form-group::after {
  clear: both;
}
[class*="col-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
.col-xs-12 { width: 100%; float: left; }
.col-xs-6 { width: 50%; float: left; }

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 { width: 100%; }
  .col-sm-10 { width: 83.33333333%; }
  .col-sm-9 { width: 75%; }
  .col-sm-8 { width: 66.66666667%; }
  .col-sm-7 { width: 58.33333333%; }
  .col-sm-6 { width: 50%; }
  .col-sm-5 { width: 41.66666667%; }
  .col-sm-4 { width: 33.33333333%; }
  .col-sm-3 { width: 25%; }
  .col-sm-2 { width: 16.66666667%; }
  .visible-xs, .visible-xs-inline, .visible-xs-block { display: none !important; }
}

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 { width: 100%; }
  .col-md-10 { width: 83.33333333%; }
  .col-md-9 { width: 75%; }
  .col-md-8 { width: 66.66666667%; }
  .col-md-7 { width: 58.33333333%; }
  .col-md-6 { width: 50%; }
  .col-md-5 { width: 41.66666667%; }
  .col-md-4 { width: 33.33333333%; }
  .col-md-3 { width: 25%; }
  .col-md-2 { width: 16.66666667%; }
}

@media (min-width: 1200px) {
  .col-lg-4 { width: 33.33333333%; float: left; }
  .col-lg-3 { width: 25%; float: left; }
}

.pull-right { float: right !important; }
.pull-left { float: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.hide, .hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* 5. Buttons, Labels, Badges & Box Tools Fallback */
.btn {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none !important;
}
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-xs { padding: 2px 7px; font-size: 11px; border-radius: 5px; }
.btn-block { display: block; width: 100%; }
.btn-success, .btn-primary, .btn-info, .btn-danger, .btn-warning {
  color: #ffffff !important;
}
.btn-danger {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  border-color: #be123c !important;
}
.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border-color: #d97706 !important;
}
.btn-box-tool {
  padding: 5px;
  font-size: 12px;
  background: transparent !important;
  color: #94a3b8 !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
.btn-box-tool:hover {
  color: #0f172a !important;
}
.label, .badge {
  display: inline-block;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 4px;
}

/* 6. Modal Guarantee (Hidden by Default, Centered Flexbox Overlay When Active) */
.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10050;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  background: rgba(15, 23, 42, 0.55);
}
.modal.in,
.modal.show,
.modal.udharpe-modal-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  padding: 15px !important;
}
.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
}
.modal-content {
  position: relative;
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid #e2e8f0;
  outline: 0;
}
.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.modal-body {
  position: relative;
  padding: 20px;
}
.modal-footer {
  padding: 15px 20px;
  text-align: right;
  border-top: 1px solid #e2e8f0;
}

/* SweetAlert2 Popup Responsive Cap */
.swal2-popup {
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box !important;
}

/* UdharPe Khata — Modern Theme Styling */
:root {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-light: #10b981;
  --primary-bg: #ecfdf5;
  --navy: #0f172a;
  --text: #1e293b;
  --gray-bg: #f8fafc;
  --border: #e2e8f0;
}

body, .skin-blue .wrapper {
  background-color: var(--gray-bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--text);
}

/* Header Navbar */
.skin-blue .main-header .navbar {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.2);
}

.skin-blue .main-header .logo {
  background: #047857 !important;
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: -0.5px;
  border-bottom: 0 solid transparent;
}

.skin-blue .main-header .logo:hover {
  background: #065f46 !important;
}

/* Sidebar */
.skin-blue .main-sidebar {
  background-color: #0f172a !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

.skin-blue .sidebar-menu > li.header {
  color: #94a3b8 !important;
  background: #090d16 !important;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
}

.skin-blue .sidebar-menu > li > a {
  color: #cbd5e1 !important;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
  color: #ffffff !important;
  background: rgba(5, 150, 105, 0.15) !important;
  border-left-color: #10b981 !important;
}

.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > .glyphicon {
  color: #10b981;
}

/* Cards & Boxes */
.box {
  border-radius: 12px !important;
  border-top: 3px solid var(--primary) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.box-header {
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}

.box-header .box-title {
  font-weight: 700;
  color: #0f172a;
}

/* Buttons */
.btn-primary, .btn-info {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: #047857 !important;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 7px 16px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.btn-primary:hover, .btn-info:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #059669 !important;
  border-radius: 8px !important;
  font-weight: 600;
}

/* Inputs */
.form-control {
  border-radius: 8px !important;
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
  height: 40px;
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

/* Ensure non-horizontal form-group labels stack cleanly above input-groups */
.form-group > label:not(.control-label):not(.btn):not(.radio-inline):not(.checkbox-inline) {
  display: block;
  margin-bottom: 5px;
}

/* Ensure input-groups inside totals boxes and forms span 100% cleanly */
.form-group > .input-group {
  width: 100% !important;
  display: table !important;
  border-collapse: separate !important;
}
.form-group > .input-group > .input-group-addon {
  display: table-cell !important;
  width: 42px !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.form-group > .input-group > .form-control {
  display: table-cell !important;
  width: 100% !important;
}

/* Small Stats Widgets */
.small-box {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.small-box .inner h3 {
  font-weight: 800;
  letter-spacing: -0.5px;
}

.small-box.bg-aqua {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.small-box.bg-green {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
}

.small-box.bg-yellow {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
}

.small-box.bg-red {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
}

/* AI Badge */
.ai-badge {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL BUTTON STYLING (FIX: NEVER INVISIBLE WHITE-ON-WHITE)
   ───────────────────────────────────────────────────────────── */
.btn-default {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-default:hover, .btn-default:focus, .btn-default:active {
  background-color: #f1f5f9 !important;
  color: #059669 !important;
  border-color: #059669 !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.15) !important;
}

.btn-default i, .btn-default .fa {
  color: #059669 !important;
}

/* ─────────────────────────────────────────────────────────────
   UNIVERSAL TABLE, TABS & BUTTON RESPONSIVE RULES (ALL SCREENS)
   ───────────────────────────────────────────────────────────── */
/* Universal Table Scrolling Wrapper */
.table-responsive,
.item-table-responsive,
.table-scroll-wrapper,
.dataTables_wrapper,
.box-body > div[style*="overflow: auto"],
.box[style*="overflow: auto"] {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
}

/* Ensure billing product table retains min-width for usability */
#item_table {
  min-width: 780px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

#item_table th, #item_table td {
  vertical-align: middle !important;
}

#item_table input.form-control,
#item_table select.form-control {
  min-width: 60px;
}

/* Ensure data tables stay readable and scroll horizontally instead of squishing columns */
table.dataTable,
.dataTables_wrapper table.table {
  width: 100% !important;
  min-width: 680px !important;
  white-space: nowrap !important;
}

/* Modern Responsive DataTables Export Toolbar & Buttons */
.dt-buttons,
div.dt-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 10px 0 15px 0 !important;
  width: 100% !important;
  float: none !important;
}

/* Export buttons styling: Solid Emerald Gradient with Pure Crisp White Text & Icons */
div.dt-buttons .btn,
div.dt-buttons a.btn,
div.dt-buttons button.btn,
div.dt-buttons .dt-button,
a.dt-button,
button.dt-button,
div.dt-buttons .btn-danger,
div.dt-buttons .btn-primary,
div.dt-buttons .btn-default,
div.dt-buttons .btn-group > .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.4 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: fit-content !important;
  max-width: none !important;
  height: auto !important;
  min-height: 32px !important;
  overflow: visible !important;
  text-overflow: unset !important;
  float: none !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 1px solid #047857 !important;
  box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

div.dt-buttons .btn:hover,
div.dt-buttons a.btn:hover,
div.dt-buttons button.btn:hover,
div.dt-buttons .dt-button:hover,
a.dt-button:hover,
button.dt-button:hover,
div.dt-buttons .btn-danger:hover,
div.dt-buttons .btn-primary:hover,
div.dt-buttons .btn-default:hover {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  border-color: #065f46 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 8px rgba(4, 120, 87, 0.35) !important;
  transform: translateY(-1px) !important;
}

div.dt-buttons .btn:active,
div.dt-buttons a.btn:active,
div.dt-buttons button.btn:active,
div.dt-buttons .dt-button:active,
a.dt-button:active,
button.dt-button:active,
div.dt-buttons .btn.active,
div.dt-buttons a.btn.active {
  background: #065f46 !important;
  color: #ffffff !important;
  border-color: #065f46 !important;
  box-shadow: 0 1px 2px rgba(4, 120, 87, 0.25) !important;
  transform: translateY(0) !important;
}

/* Force pure crisp white text & icons inside ALL DataTables export buttons */
div.dt-buttons .btn *,
div.dt-buttons a.btn *,
div.dt-buttons button.btn *,
div.dt-buttons .dt-button *,
a.dt-button *,
button.dt-button *,
div.dt-buttons .btn-danger *,
div.dt-buttons .btn-primary *,
div.dt-buttons .btn-default *,
div.dt-buttons .btn i,
div.dt-buttons a.btn i,
div.dt-buttons button.btn i,
div.dt-buttons .dt-button i,
a.dt-button i,
button.dt-button i,
div.dt-buttons .btn .fa,
div.dt-buttons a.btn .fa,
div.dt-buttons button.btn .fa,
div.dt-buttons .dt-button .fa,
a.dt-button .fa,
button.dt-button .fa,
div.dt-buttons .btn span,
div.dt-buttons a.btn span,
div.dt-buttons button.btn span,
div.dt-buttons .dt-button span,
a.dt-button span,
button.dt-button span {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
  opacity: 1 !important;
}

/* CRITICAL FIX: FontAwesome .fa-fw sets width: 1.28em (16px), causing text inside <i> to bleed out! */
.dt-buttons a.btn i,
.dt-buttons button.btn i,
.dt-buttons .btn i,
.dt-buttons .dt-button i,
.dt-button i {
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  display: inline-block !important;
  font-style: normal !important;
  margin-right: 2px !important;
}

/* Toggle Column Visibility Buttons (.toggle-vis) */
div.btn-group[data-toggle="buttons"],
div.btn-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 12px 0 !important;
  width: 100% !important;
}

.dt-buttons {
  justify-content: center !important;
}

a.btn.btn-group,
button.btn.btn-group,
.dt-buttons .btn-group {
  width: auto !important;
  display: inline-flex !important;
  margin: 0 !important;
}

.btn-group > .btn,
.btn-group > .toggle-vis,
.toggle-vis,
input.toggle-vis {
  float: none !important;
  border-radius: 6px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  flex: 0 1 auto !important;
  white-space: nowrap !important;
  min-width: fit-content !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* Swipeable Tabs for Profile, Settings & Tabbed Views */
.nav-tabs,
.nav-tabs-custom > .nav-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap !important;
  scrollbar-width: thin !important;
  border-bottom: 2px solid var(--border) !important;
  padding-bottom: 2px !important;
  margin-bottom: 15px !important;
}

.nav-tabs > li,
.nav-tabs-custom > .nav-tabs > li {
  float: none !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
}

.nav-tabs > li > a,
.nav-tabs-custom > .nav-tabs > li > a {
  border-radius: 8px 8px 0 0 !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ─────────────────────────────────────────────────────────────
   COMPREHENSIVE MOBILE-FRIENDLY RESPONSIVE DESIGN (PHONES & TABLETS <= 767px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* 1. Prevent Horizontal Page Blowout / Viewport Out of Screen (except A4 print preview pages) */
  html:not(:has(body.print-page-body)),
  body:not(.print-page-body) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  .wrapper,
  .content-wrapper,
  .main-footer,
  .content,
  .container-fluid {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* CRITICAL FIX: Never set overflow-x: hidden on .row without clear:both & float reset,
     otherwise BFC collapses to 0px width next to .col-xs-12 floats! */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .col-xs-12,
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  .main-header {
    max-width: 100vw !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .main-header .logo {
    width: 100% !important;
    float: none !important;
    height: 44px !important;
    line-height: 44px !important;
  }

  /* 2. Top Header & Navbar on Mobile */
  .main-header .navbar,
  .skin-blue .main-header .navbar {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 46px !important;
    padding: 0 6px 0 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  
  .main-header .navbar .sidebar-toggle {
    padding: 12px 10px !important;
    float: none !important;
    flex-shrink: 0 !important;
  }

  /* Shop Title in Header - flexible shrink to prevent pushing right menu off-screen */
  .main-header .shop-title-header,
  .main-header .navbar > div[style*="float: left"] {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12.5px !important;
    padding: 8px 4px !important;
    float: none !important;
  }

  .main-header .shop-title-header .shop-name-text {
    max-width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .main-header .shop-title-header span.label,
  .main-header .navbar > div[style*="float: left"] span.label {
    display: none !important;
  }

  .navbar-custom-menu {
    float: none !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  .navbar-custom-menu .navbar-nav {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    overflow: visible !important;
  }

  .navbar-custom-menu .navbar-nav > li {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .navbar-custom-menu .navbar-nav > li > a {
    padding: 6px 5px !important;
    font-size: 12px !important;
  }

  .navbar-custom-menu .navbar-nav > li > div {
    margin: 4px 1px !important;
    padding: 2px !important;
  }

  .navbar-custom-menu .navbar-nav > li > div > a {
    padding: 3px 6px !important;
    font-size: 10.5px !important;
  }

  #udharpeUserMenuToggleBtn {
    padding: 4px 8px !important;
    gap: 4px !important;
  }

  #udharpeUserDropdownMenu {
    right: 10px !important;
    left: auto !important;
    width: 255px !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
  }

  /* Extra-narrow screens (<= 380px) */
  @media (max-width: 380px) {
    .lang-flag {
      display: none !important;
    }
    .navbar-custom-menu .navbar-nav > li > div > a {
      padding: 3px 5px !important;
      font-size: 10px !important;
    }
  }

  /* 3. Content Spacing */
  .content-wrapper {
    padding: 0 0 65px 0 !important;
  }

  .content-header {
    padding: 12px 10px 4px 10px !important;
    position: relative !important;
  }

  .content-header h1 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  .content-header .breadcrumb {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    float: none !important;
    padding: 4px 0 !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
  }

  .content {
    padding: 10px 8px !important;
  }

  /* 4. Small Box / Metric Cards (Full width on mobile) */
  .col-lg-3.col-xs-6,
  .col-md-3.col-xs-6,
  .col-lg-4.col-xs-12,
  .col-sm-6.col-xs-12 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 10px !important;
  }

  .small-box .inner {
    padding: 14px !important;
  }

  .small-box .inner h3 {
    font-size: 24px !important;
  }

  /* 5. Quick Action Button Bar on Dashboard */
  .quick-action-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .quick-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .quick-action-buttons .btn {
    width: 100% !important;
    font-size: 12px !important;
    padding: 9px 6px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* 6. Form Controls & Labels on Mobile (Full Width Stacked) */
  .form-horizontal .control-label {
    text-align: left !important;
    float: none !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
    display: block !important;
  }

  .form-horizontal .col-sm-1,
  .form-horizontal .col-sm-2,
  .form-horizontal .col-sm-3,
  .form-horizontal .col-sm-4,
  .form-horizontal .col-sm-5,
  .form-horizontal .col-sm-6,
  .form-horizontal .col-sm-7,
  .form-horizontal .col-sm-8,
  .form-horizontal .col-sm-9,
  .form-horizontal .col-sm-10,
  .form-horizontal .col-sm-11,
  .form-horizontal .col-sm-12 {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }

  .form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 14px !important;
    clear: both !important;
    width: 100% !important;
  }

  .form-control {
    font-size: 15px !important; /* Prevents auto-zoom on iOS */
    height: 42px !important;
  }

  .input-group {
    width: 100% !important;
  }

  /* 7. Reset Hardcoded Padding in Bill Forms & Dashboard */
  div[style*="padding-left: 50px"],
  div[style*="padding-left:50px"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
  }

  #bars[style*="padding-top: 80px"] {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .col-xs-10 {
    width: 100% !important;
    float: none !important;
  }

  /* Save / Submit Button Full Width on Mobile */
  .submit_btn,
  .invoice-save-btm,
  input[name="submit"][style*="width: 15em"],
  input[name="submit"],
  button[type="submit"].btn,
  .box-footer .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    font-size: 14.5px !important;
    padding: 10px 14px !important;
    margin-top: 6px !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  .tab-content {
    padding: 12px !important;
  }

  /* 8. DataTables Filter & Paging */
  .dataTables_length,
  .dataTables_filter {
    width: 100% !important;
    text-align: left !important;
    float: none !important;
    margin-bottom: 10px !important;
  }

  .dataTables_filter label {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  .dataTables_filter input[type="search"],
  .dataTables_filter input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 6px 12px !important;
    margin-left: 0 !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  .dataTables_length label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
  }

  .dataTables_length select {
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    height: 36px !important;
    padding: 4px 8px !important;
  }

  .dataTables_paginate {
    text-align: center !important;
    float: none !important;
    margin-top: 14px !important;
    overflow-x: auto !important;
  }

  /* Hide elements marked hidden-xs */
  .hidden-xs,
  .main-header .navbar .hidden-xs,
  .navbar-nav > li.hidden-xs {
    display: none !important;
  }

  /* 9. Modal Full Width on Mobile */
  .modal-dialog {
    margin: 10px !important;
    width: calc(100% - 20px) !important;
  }

  /* 10. Daterange Picker on Mobile */
  .daterangepicker {
    max-width: 95vw !important;
    overflow-x: auto !important;
    left: 8px !important;
    right: 8px !important;
  }

  /* 11. Phone & Select2 inputs 100% width on Mobile */
  .iti, .intl-tel-input, .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* 12. Invoice & Purchase Card Grid in inv-list, purlist, etc. */
  .content-panel {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .content-panel table.table-advance {
    display: block !important;
    width: 100% !important;
    border: none !important;
  }

  .content-panel table.table-advance tbody,
  .content-panel table.table-advance tr {
    display: block !important;
    width: 100% !important;
  }

  .content-panel table.table-advance td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
  }

  /* 13. P&L Balance Sheet Columns Stack on Mobile */
  .pnl-table,
  .pnl-table > thead,
  .pnl-table > tbody,
  .pnl-table > tbody > tr,
  .pnl-table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }
  
  .pnl-table > thead {
    display: none !important;
  }

  /* 14. Morris Chart SVGs inside Responsive Containers */
  .chart_morris svg,
  .chart svg {
    max-width: 100% !important;
  }

  /* 15. Description Blocks in Dashboard Footer */
  .description-block {
    margin: 10px 0 !important;
    text-align: center !important;
  }

  /* 16. Floating AI Button Compact on Mobile */
  .ai-fab-btn {
    bottom: 14px !important;
    right: 14px !important;
    padding: 9px 14px !important;
    font-size: 12.5px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   BUG FIXES: DROPDOWN POSITION, SELECT2, INPUT ADDONS & TOGGLES
   ───────────────────────────────────────────────────────────── */
.main-header .dropdown-menu,
.navbar-custom-menu .dropdown-menu {
  margin-top: 0 !important;
  top: calc(100% + 6px) !important;
  right: 12px !important;
  left: auto !important;
}

.input-group .input-group-addon {
  padding: 8px 12px !important;
  vertical-align: middle !important;
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.select2-container .select2-selection--single {
  height: 40px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
}

/* Allow column visibility toggle buttons (.toggle-vis) to turn red when active/toggled */
.toggle-vis.btn-danger,
.toggle-vis.active {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  border-color: #be123c !important;
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   SECOND-PASS COMPREHENSIVE UI & LAYOUT FIXES
   ───────────────────────────────────────────────────────────── */

/* 1. Select2 + Add (+) Button Side-by-Side Flex Container */
.select-with-add {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
.select-with-add select,
.select-with-add .select2-container {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 46px) !important;
  margin: 0 !important;
}
.select-with-add #btnplus,
.select-with-add .btn-add-inline {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

/* 2. International Telephone Input (intl-tel-input) Clean UI Fix */
.iti,
.intl-tel-input {
  width: 100% !important;
  display: block !important;
  position: relative !important;
}
.iti input#phone,
.intl-tel-input input#phone,
input.phone {
  width: 100% !important;
  height: 40px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  padding-left: 82px !important;
  padding-right: 12px !important;
  font-size: 14px !important;
  color: #1e293b !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}
.iti input#phone:focus,
.intl-tel-input input#phone:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
  outline: none !important;
}
body .intl-tel-input .flag-container,
body .iti__flag-container {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 80px !important;
}
body .intl-tel-input .selected-flag,
body .iti__selected-flag {
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  height: 100% !important;
  width: auto !important;
  min-width: 72px !important;
  max-width: 80px !important;
  padding: 0 8px 0 10px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 8px 0 0 8px !important;
}
.iti__country-list,
.intl-tel-input .country-list {
  width: 300px !important;
  max-width: 88vw !important;
  z-index: 9999 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* 3. Invoice Item Table (#item_table) Quantity, GST, Price & Product Input Readability */
#item_table input.item_quantity,
#item_table input.quantity {
  min-width: 72px !important;
  text-align: center !important;
  padding: 6px 6px !important;
}
#item_table input.item_gst {
  min-width: 76px !important;
  text-align: center !important;
  padding: 6px 4px !important;
}
#item_table input.price,
#item_table input.total {
  min-width: 95px !important;
}
#item_table input.item_hsn {
  min-width: 85px !important;
}
#item_table .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 210px !important;
}
#item_table .input-group .form-control {
  flex: 1 1 auto !important;
  border-radius: 8px 0 0 8px !important;
  min-width: 165px !important;
}
#item_table .input-group .input-group-btn {
  width: auto !important;
  display: flex !important;
}
#item_table .input-group .input-group-btn .btn {
  height: 40px !important;
  padding: 0 11px !important;
  border-radius: 0 8px 8px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 4. Uniform 3-Column Card Grid on Invoice / Purchase / Quotation / Proforma Lists */
.invoice-card-grid {
  display: flex !important;
  flex-wrap: wrap !important;
}
.invoice-card-grid > [class*="col-"] {
  display: flex !important;
  flex-direction: column !important;
}
.invoice-card-grid > [class*="col-"] > .box {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.invoice-card-grid .box-body p {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 6px !important;
}

/* 5. Report Filter Search Button Responsive Spacing */
@media (max-width: 767px) {
  #searchBtn,
  input[name="dat_range"] {
    margin-top: 6px !important;
    width: 100% !important;
  }
}

/* 6. Allow Print Pages (<page size="A4">) to Scroll Horizontally on Mobile and Center on Desktop */
html:has(body.print-page-body),
body.print-page-body {
  overflow-x: auto !important;
  max-width: none !important;
  width: auto !important;
  background: #cbd5e1 !important;
  -webkit-overflow-scrolling: touch !important;
}
body.print-page-body > .hidden-print,
body.print-page-body > .no-print {
  flex-wrap: wrap !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
@media (max-width: 860px) {
  body.print-page-body > .hidden-print,
  body.print-page-body > .no-print {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    padding: 10px 12px !important;
  }
  body.print-page-body > .hidden-print > div,
  body.print-page-body > .no-print > div {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}
page[size="A4"],
page {
  margin: 15px auto !important;
}
@media print {
  body, body.print-page-body, page, page[size="A4"] {
    background: #ffffff !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    height: auto !important;
    padding-top: 0 !important;
  }
  .no-print, .hidden-print {
    display: none !important;
  }
}

/* Ensure Bootstrap Datepicker calendar popup is never hidden or distorted by header dropdown rules */
.datepicker.dropdown-menu {
  position: absolute !important;
  top: auto;
  left: auto;
  right: auto !important;
  width: auto !important;
  min-width: 220px !important;
  padding: 6px !important;
  overflow: visible !important;
  z-index: 10060 !important;
}