/**
 * NextPOS (NextERP.bd) — UI & Design System v2.0
 * Adapted for Faruk Electric & CC Camera House (cchouse.websoft-bd.com)
 * Tally Prime & Modern Enterprise SaaS Aesthetic (Dual-Theme & High-Density)
 */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   1. Master Color Palette & Design Tokens
   ========================================================================== */
:root {
  /* Brand & Semantic Colors */
  --primary: #1e3a5f;
  --primary-light: #2a4f7c;
  --primary-dark: #162d4a;
  --secondary: #0ea5e9;
  --secondary-light: #38bdf8;
  --tally-gold: #f59e0b;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --info: #0284c7;

  /* Theme Surfaces (Light Mode Default) */
  --body-bg: #f0f4f8;
  --card-bg: #ffffff;
  --card-bg-alt: #f7f9fc;
  --sidebar-bg: #091c33;
  --sidebar-dark: #061424;
  --topbar-bg: linear-gradient(180deg, #0d2542 0%, #091d35 100%);
  --topbar-border: #1c3e66;
  
  /* Typography Colors */
  --text-main: #1a2840;
  --text-muted: #5a7090;
  --text-light: #8aa0b8;
  
  /* Borders */
  --border-color: #d1dbe8;
  --border-subtle: #e8eef5;
  
  /* Forms */
  --input-bg: #ffffff;
  --input-border: #94a3b8;
  --input-focus-bg: #fffde7;
  --input-focus-border: #0284c7;
  --input-focus-shadow: rgba(2, 132, 199, 0.25);
  
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);

  /* Font Stacks */
  --font-main: 'Hind Siliguri', 'Inter', 'Ubuntu', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Hind Siliguri', monospace;
}

/* Dark Mode Tokens */
[data-theme="dark"] {
  --body-bg: #071321;
  --card-bg: #0b1a2d;
  --card-bg-alt: #081525;
  --sidebar-bg: #061424;
  --sidebar-dark: #040e1a;
  --topbar-bg: linear-gradient(180deg, #0d2542 0%, #091d35 100%);
  --topbar-border: #153252;
  
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  
  --border-color: #1a3352;
  --border-subtle: #12253d;
  
  --input-bg: #081526;
  --input-border: #1e3e65;
  --input-focus-bg: #162d4a;
  --input-focus-border: #f59e0b;
  --input-focus-shadow: rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   2. Typography & Global Resets
   ========================================================================== */
body, 
.wrapper, 
.content-wrapper, 
h1, h2, h3, h4, h5, h6, 
p, td, th, 
input, select, textarea, 
.form-control, .main-header, .sidebar-menu {
  font-family: var(--font-main);
}

/* Explicit text font for buttons and links without breaking icon glyphs */
button:not(.fa):not([class*="fa-"]),
.btn:not(.fa):not([class*="fa-"]),
a:not(.fa):not([class*="fa-"]):not(.sidebar-toggle) {
  font-family: var(--font-main);
}

/* ==========================================================================
   Icon Font Protection - NEVER allow text fonts to override icon glyphs
   ========================================================================== */
.fa, 
.fas, 
.far, 
.fal, 
.fad, 
.fab, 
[class^="fa-"], 
[class*=" fa-"],
span.fa, 
i.fa, 
a.fa, 
button.fa,
.fa::before,
[class^="fa-"]::before,
[class*=" fa-"]::before,
.main-header .sidebar-toggle,
.main-header .sidebar-toggle::before,
.sidebar-toggle,
.sidebar-toggle::before {
  font-family: 'FontAwesome' !important;
}

.glyphicon, 
[class^="glyphicon-"], 
[class*=" glyphicon-"],
span.glyphicon, 
i.glyphicon,
.glyphicon::before,
[class^="glyphicon-"]::before,
[class*=" glyphicon-"]::before {
  font-family: 'Glyphicons Halflings' !important;
}

.ion, 
[class^="ion-"], 
[class*=" ion-"],
span.ion, 
i.ion,
.ion::before,
[class^="ion-"]::before,
[class*=" ion-"]::before {
  font-family: "Ionicons" !important;
}

body {
  background-color: var(--body-bg) !important;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

.content-wrapper {
  background-color: var(--body-bg) !important;
  min-height: 100vh;
}

/* Numeric & Monospace Tabular Elements */
.tally-num, 
.font-monospace, 
.tally-kbd, 
.sidebar-key-badge {
  font-family: var(--font-mono) !important;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* ==========================================================================
   3. Strict Flat & High-Density Standards (2px Corner Rule)
   ========================================================================== */
.btn, 
.form-control, 
select, 
textarea, 
.input-group-addon, 
.box, 
.card, 
.panel, 
.box-header, 
.panel-heading, 
.modal-content, 
.dropdown-menu, 
.nav-tabs > li > a, 
.select2-selection, 
.select2-dropdown, 
.alert, 
.badge, 
.label {
  border-radius: 2px !important;
}

/* ==========================================================================
   4. Signature Tally Input Focus State
   ========================================================================== */
.form-control, 
select.form-control, 
textarea.form-control,
textarea {
  background-color: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--text-main);
  font-size: 13px;
  padding: 6px 10px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
  box-shadow: none !important;
}

.form-control:not(textarea), 
input.form-control, 
select.form-control {
  height: 36px;
}

textarea.form-control,
textarea {
  height: auto !important;
  min-height: 60px;
  line-height: 1.5;
  resize: vertical;
}

.form-control:focus, 
select.form-control:focus, 
textarea.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  background-color: var(--input-focus-bg) !important;
  color: #0f172a !important;
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 2px var(--input-focus-shadow) !important;
  outline: none !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] select.form-control:focus,
[data-theme="dark"] textarea.form-control:focus {
  color: #ffffff !important;
}

.input-sm:not(textarea), 
.form-control.input-sm:not(textarea),
input.input-sm,
select.input-sm {
  height: 30px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
}

textarea.input-sm,
textarea.form-control.input-sm {
  height: auto !important;
  min-height: 48px;
  font-size: 12px !important;
  line-height: 1.4;
  padding: 6px 8px !important;
  resize: vertical;
}

.input-group-addon {
  background-color: #e2e8f0;
  border: 1.5px solid var(--input-border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================================================
   5. Button Component Library
   ========================================================================== */
.btn {
  font-weight: 700 !important;
  font-size: 12.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 6px 14px;
  box-shadow: none !important;
  transition: all 0.15s ease-in-out;
  border-width: 1.5px !important;
}

.btn-sm, .btn-group-sm > .btn {
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  height: 30px !important;
}

.btn-xs, .btn-group-xs > .btn {
  padding: 2px 7px !important;
  font-size: 10.5px !important;
  height: 24px !important;
}

/* Button Colors */
.btn-primary {
  background-color: #1e3a5f !important;
  border-color: #1e3a5f !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #2a4f7c !important;
  border-color: #2a4f7c !important;
  color: #ffffff !important;
}

.btn-success {
  background-color: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: #15803d !important;
  border-color: #166534 !important;
  color: #ffffff !important;
}

.btn-danger {
  background-color: #dc2626 !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: #b91c1c !important;
  border-color: #991b1b !important;
  color: #ffffff !important;
}

.btn-warning {
  background-color: #d97706 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background-color: #b45309 !important;
  border-color: #92400e !important;
  color: #ffffff !important;
}

.btn-info {
  background-color: #0284c7 !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: #0369a1 !important;
  border-color: #075985 !important;
  color: #ffffff !important;
}

.btn-default {
  background-color: var(--card-bg-alt) !important;
  border-color: #cbd5e1 !important;
  color: var(--text-main) !important;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: var(--text-main) !important;
}

/* Tally Signature Buttons */
.btn-tally-accept {
  background: linear-gradient(180deg, #102e52 0%, #0a1e35 100%) !important;
  border: 1.5px solid #d97706 !important;
  color: #f59e0b !important;
  font-weight: 700 !important;
}
.btn-tally-accept:hover {
  background: linear-gradient(180deg, #153866 0%, #0d2542 100%) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
}

.btn-tally-quit {
  background-color: #475569 !important;
  border: 1.5px solid #64748b !important;
  color: #ffffff !important;
}
.btn-tally-quit:hover {
  background-color: #334155 !important;
  border-color: #475569 !important;
}

/* Action Circle Buttons inside Tables */
.btn-circle-action {
  width: 30px !important;
  height: 30px !important;
  line-height: 28px !important;
  padding: 0 !important;
  text-align: center;
  border-radius: 3px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--card-bg-alt);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btn-circle-action:hover {
  transform: translateY(-1px);
}
.btn-circle-view:hover { background: rgba(37,99,235,0.1) !important; color: #2563eb !important; border-color: #2563eb !important; }
.btn-circle-edit:hover { background: rgba(217,119,6,0.1) !important; color: #d97706 !important; border-color: #d97706 !important; }
.btn-circle-delete:hover { background: rgba(220,38,38,0.1) !important; color: #dc2626 !important; border-color: #dc2626 !important; }
.btn-circle-print:hover { background: rgba(124,58,237,0.1) !important; color: #7c3aed !important; border-color: #7c3aed !important; }

/* ==========================================================================
   6. Table & Data Grid System
   ========================================================================== */
.tally-table-wrap, 
.table-responsive {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 20px;
}

.table, .tally-table, table.dataTable {
  background-color: var(--card-bg) !important;
  color: var(--text-main);
  border-collapse: collapse !important;
  margin-bottom: 0 !important;
}

.table > thead > tr > th,
.tally-table > thead > tr > th,
table.dataTable thead th {
  background: var(--card-bg-alt) !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 10px 12px !important;
  border-top: none !important;
  border-bottom: 2px solid var(--border-color) !important;
  vertical-align: middle !important;
}

.table > tbody > tr > td,
.tally-table > tbody > tr > td,
table.dataTable tbody td {
  padding: 9px 12px !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  font-size: 13px;
  vertical-align: middle !important;
}

.table-hover > tbody > tr:hover,
.table > tbody > tr:hover,
table.dataTable tbody tr:hover {
  background-color: rgba(30, 58, 95, 0.04) !important;
}

/* Numeric text right alignment */
.text-end, .text-right, .tally-num {
  text-align: right !important;
}

/* ==========================================================================
   7. Status Pills & Badges
   ========================================================================== */
.status-pill {
  display: inline-block;
  border-radius: 2px !important;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  letter-spacing: 0.2px;
  line-height: 1.4;
}

.status-pill-success {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.25);
}

.status-pill-danger {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.status-pill-warning {
  background: rgba(217, 119, 6, 0.1);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.status-pill-info {
  background: rgba(2, 132, 199, 0.1);
  color: #0369a1;
  border: 1px solid rgba(2, 132, 199, 0.25);
}

/* Hotkey Keyboard Badges */
.tally-kbd, .sidebar-key-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 9.5px;
  background: #061628;
  border: 1px solid #1c4573;
  color: #f59e0b;
  border-radius: 2px;
  font-weight: 700;
  line-height: 1.2;
}

/* ==========================================================================
   8. KPI Metric Cards
   ========================================================================== */
.kpi-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 20px;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kpi-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3.5px;
}

.kpi-blue::before { background: #2563eb; }
.kpi-green::before { background: #16a34a; }
.kpi-amber::before { background: #d97706; }
.kpi-red::before { background: #dc2626; }
.kpi-purple::before { background: #7c3aed; }
.kpi-teal::before { background: #0891b2; }

.kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.kpi-blue .kpi-icon { background: rgba(37,99,235,0.1); color: #2563eb; }
.kpi-green .kpi-icon { background: rgba(22,163,74,0.1); color: #16a34a; }
.kpi-amber .kpi-icon { background: rgba(217,119,6,0.1); color: #d97706; }
.kpi-red .kpi-icon { background: rgba(220,38,38,0.1); color: #dc2626; }
.kpi-purple .kpi-icon { background: rgba(124,58,237,0.1); color: #7c3aed; }
.kpi-teal .kpi-icon { background: rgba(8,145,178,0.1); color: #0891b2; }

.kpi-data {
  flex-grow: 1;
}

.kpi-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}

.kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.kpi-sub {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
}

/* ==========================================================================
   9. AdminLTE Layout Compatibility Overrides
   ========================================================================== */

/* Topbar Header (Fixed Sticky Layout) */
@media (min-width: 768px) {
  .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
  }

  .content-wrapper,
  .main-sidebar,
  .left-side {
    padding-top: 50px !important;
  }

  .main-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 1025 !important;
  }

  .main-sidebar::-webkit-scrollbar {
    width: 4px;
  }
  .main-sidebar::-webkit-scrollbar-thumb {
    background: #1e3a5f;
    border-radius: 2px;
  }
}

.main-header {
  border-bottom: 2px solid var(--topbar-border) !important;
}

.main-header .navbar {
  background: var(--topbar-bg) !important;
  border-bottom: none !important;
}

.main-header .logo {
  background-color: var(--sidebar-bg) !important;
  color: #ffffff !important;
  border-bottom: 2px solid var(--tally-gold) !important;
  border-right: 1px solid var(--topbar-border) !important;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.main-header .logo:hover {
  background-color: var(--sidebar-dark) !important;
}

.main-header .navbar .sidebar-toggle {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'FontAwesome' !important;
}

.main-header .navbar .sidebar-toggle::before {
  font-family: 'FontAwesome' !important;
}

.main-header .navbar .sidebar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.main-header .navbar .nav > li > a {
  color: rgba(255, 255, 255, 0.85) !important;
}

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

/* Sidebar */
.main-sidebar, .left-side {
  background-color: var(--sidebar-bg) !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.sidebar-menu > li.header {
  background-color: #061628 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 8px 16px !important;
}

.sidebar-menu > li > a {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-left: 3px solid transparent !important;
  padding: 10px 16px !important;
  transition: all 0.2s ease;
}

.sidebar-menu > li:hover > a, 
.sidebar-menu > li.active > a {
  background-color: rgba(14, 165, 233, 0.14) !important;
  border-left-color: var(--secondary-light) !important;
  color: #ffffff !important;
}

.sidebar-menu .treeview-menu {
  background-color: var(--sidebar-dark) !important;
  padding-left: 0 !important;
}

.sidebar-menu .treeview-menu > li > a {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px !important;
  padding: 7px 16px 7px 28px !important;
}

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

/* AdminLTE Box Component */
.box {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-top: 3px solid var(--primary) !important;
  box-shadow: var(--shadow-xs) !important;
  margin-bottom: 20px;
}

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

.box-header {
  background: var(--card-bg-alt) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 10px 14px !important;
  color: var(--text-main);
}

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

.box-body {
  padding: 16px !important;
  background: var(--card-bg);
}

.box-footer {
  background: var(--card-bg-alt) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 10px 16px !important;
}

/* Breadcrumbs */
.breadcrumb {
  background-color: transparent !important;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
  padding: 4px 0;
}

/* Modal Dialogs */
.modal-content {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
}

.modal-header {
  background: var(--card-bg-alt) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 12px 18px !important;
}

.modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
}

.modal-body {
  padding: 18px !important;
}

.modal-footer {
  background: var(--card-bg-alt) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 10px 18px !important;
}

/* ==========================================================================
   10. Gateway of Tally Login Screen Styling
   ========================================================================== */
/* ==========================================================================
   10. Gateway of Tally Login Screen Styling (Dual-Theme)
   ========================================================================== */
.login-page {
  background: radial-gradient(circle at 50% 25%, #e8f1fa 0%, #d8e6f7 45%, #c8daf0 100%) !important;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.login-box {
  width: 420px !important;
  margin: 30px auto !important;
}

.login-logo a {
  color: #1e3a5f !important;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.login-box-body {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-top: 4px solid var(--tally-gold) !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1) !important;
  border-radius: 4px !important;
  padding: 26px 28px !important;
  color: #1a2840;
}

.login-box-msg {
  color: #5a7090 !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 22px;
}

/* Dark Mode Login Screen Overrides */
[data-theme="dark"] .login-page {
  background: radial-gradient(circle at 50% 25%, #153866 0%, #0d233e 45%, #061424 100%) !important;
}

[data-theme="dark"] .login-logo a {
  color: #f59e0b !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .login-box-body {
  background: #0b1a2d !important;
  border: 2px solid #1a3c63 !important;
  border-top: 4px solid var(--tally-gold) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
  color: #f1f5f9;
}

[data-theme="dark"] .login-box-msg {
  color: #94a3b8 !important;
}

.login-page .form-control {
  background: #081526 !important;
  border: 1.5px solid #1e3e65 !important;
  color: #ffffff !important;
  height: 40px !important;
}

.login-page .form-control:focus {
  background-color: #162d4a !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3) !important;
}

.login-page .form-control-feedback {
  color: #5a7090 !important;
  height: 40px !important;
  line-height: 40px !important;
}

/* ==========================================================================
   11. Comprehensive Enterprise Dark Mode Engine ([data-theme="dark"])
   ========================================================================== */

/* Theme Toggle Button in Header */
.btn-tally-theme-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 14px 16px !important;
  color: #f59e0b !important;
  transition: all 0.25s ease-in-out;
}
.btn-tally-theme-toggle:hover {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  transform: scale(1.1);
}
.theme-toggle-icon {
  font-size: 17px !important;
}

/* General Layout & Backgrounds */
[data-theme="dark"] body,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .content-wrapper {
  background-color: var(--body-bg) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] .content-header > h1 {
  color: var(--text-main) !important;
}
[data-theme="dark"] .content-header > .breadcrumb > li > a {
  color: var(--secondary-light) !important;
}
[data-theme="dark"] .content-header > .breadcrumb > li.active {
  color: var(--text-muted) !important;
}

/* Boxes, Panels & Cards */
[data-theme="dark"] .box,
[data-theme="dark"] .panel {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .box-header,
[data-theme="dark"] .panel-heading {
  background-color: var(--card-bg-alt) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] .box-title,
[data-theme="dark"] .panel-title {
  color: var(--text-main) !important;
}

[data-theme="dark"] .box-body,
[data-theme="dark"] .panel-body {
  background-color: var(--card-bg) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] .box-footer,
[data-theme="dark"] .panel-footer {
  background-color: var(--card-bg-alt) !important;
  border-top: 1px solid var(--border-subtle) !important;
  color: var(--text-main) !important;
}

/* Tables & DataTables */
[data-theme="dark"] .tally-table-wrap,
[data-theme="dark"] .table-responsive {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .table,
[data-theme="dark"] .tally-table,
[data-theme="dark"] table.dataTable {
  background-color: var(--card-bg) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .tally-table > thead > tr > th,
[data-theme="dark"] table.dataTable thead th {
  background-color: var(--card-bg-alt) !important;
  color: var(--text-muted) !important;
  border-bottom: 2px solid var(--border-color) !important;
}

[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .tally-table > tbody > tr > td,
[data-theme="dark"] table.dataTable tbody td {
  background-color: transparent !important;
  color: var(--text-main) !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover,
[data-theme="dark"] table.dataTable tbody tr:hover {
  background-color: rgba(14, 165, 233, 0.08) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.015) !important;
}

[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered > tbody > tr > td,
[data-theme="dark"] .table-bordered > thead > tr > th {
  border-color: var(--border-subtle) !important;
}

/* Forms & Inputs */
[data-theme="dark"] .form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] select.form-control:focus,
[data-theme="dark"] textarea.form-control:focus {
  background-color: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 2px var(--input-focus-shadow) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .input-group-addon {
  background-color: #162d4a !important;
  border-color: var(--input-border) !important;
  color: var(--text-muted) !important;
}

[data-theme="dark"] label,
[data-theme="dark"] .control-label {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .help-block {
  color: var(--text-muted) !important;
}

/* Select2 Dropdowns */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ffffff !important;
}

[data-theme="dark"] .select2-dropdown {
  background-color: #0b1a2d !important;
  border-color: #1e3e65 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #081526 !important;
  border-color: #1e3e65 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .select2-results__option {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #1e3a5f !important;
  color: #f59e0b !important;
  font-weight: 700;
}

[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #162d4a !important;
  color: #38bdf8 !important;
}

/* DataTables Controls */
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background-color: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--card-bg-alt) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #1e3a5f !important;
  border-color: #0ea5e9 !important;
  color: #ffffff !important;
}

/* Modals */
[data-theme="dark"] .modal-content {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .modal-header {
  background-color: var(--card-bg-alt) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] .modal-footer {
  background-color: var(--card-bg-alt) !important;
  border-top: 1px solid var(--border-subtle) !important;
}

[data-theme="dark"] .close {
  color: #ffffff !important;
  text-shadow: none !important;
  opacity: 0.8 !important;
}
[data-theme="dark"] .close:hover {
  color: #f59e0b !important;
  opacity: 1 !important;
}

/* Dropdowns & Nav Tabs */
[data-theme="dark"] .dropdown-menu {
  background-color: #0b1a2d !important;
  border: 1px solid #1a3352 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .dropdown-menu > li > a {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .dropdown-menu > li > a:hover {
  background-color: #162d4a !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .dropdown-menu .divider {
  background-color: #12253d !important;
}

[data-theme="dark"] .nav-tabs {
  border-bottom: 2px solid var(--border-color) !important;
}

[data-theme="dark"] .nav-tabs > li > a {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a:focus {
  background-color: var(--card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) var(--border-color) transparent !important;
}

/* Buttons in Dark Mode */
[data-theme="dark"] .btn-default {
  background-color: #162d4a !important;
  border-color: #1e3e65 !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .btn-default:hover {
  background-color: #1e3a5f !important;
  border-color: #2a4f7c !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-circle-action {
  background: #081526 !important;
  border-color: #1e3e65 !important;
  color: #94a3b8 !important;
}

/* SweetAlert2 Dialogs */
[data-theme="dark"] .swal2-popup {
  background-color: #0b1a2d !important;
  color: #f1f5f9 !important;
  border: 1px solid #1a3352 !important;
}
[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-content,
[data-theme="dark"] .swal2-html-container {
  color: #f1f5f9 !important;
}

/* ==========================================================================
   12. Header Right Section & Navbar Component Fixes
   ========================================================================== */
.main-header .navbar-custom-menu {
  float: right;
  height: 50px;
}

.main-header .navbar-custom-menu > .nav,
.header-nav-flex {
  display: flex !important;
  align-items: center !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.header-nav-flex > li {
  display: inline-flex !important;
  align-items: center !important;
  height: 50px !important;
}

.header-nav-flex > li > a {
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease-in-out !important;
}

.btn-signout-direct {
  background: #dc2626 !important;
  border: 1px solid #b91c1c !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3) !important;
}
.btn-signout-direct:hover {
  background: #b91c1c !important;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.45) !important;
  transform: translateY(-1px);
}

.tally-theme-item a:hover {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: #f59e0b !important;
}

.tally-setting-item a:hover {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: #38bdf8 !important;
}

/* ==========================================================================
   13. Premium Sidebar Aesthetics & Treeview Hierarchy
   ========================================================================== */
.main-sidebar, .left-side {
  border-right: 1px solid rgba(28, 69, 115, 0.35);
}

.sidebar-menu {
  white-space: nowrap;
  overflow: hidden;
  padding-bottom: 30px;
}

.sidebar-menu > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-left: 3.5px solid transparent !important;
  transition: all 0.2s ease;
  position: relative;
}

.sidebar-menu > li > a .pull-right-container,
.sidebar-menu > li > a .sidebar-key-badge,
.sidebar-menu > li > a > .pull-right,
.sidebar-menu > li > a > .fa-angle-left,
.sidebar-menu > li > a > .fa-angle-down,
.sidebar-menu > li > a .label,
.sidebar-menu > li > a .badge {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-top: 0 !important;
  right: auto !important;
  top: auto !important;
  gap: 5px;
  flex-shrink: 0 !important;
}

.sidebar-menu > li > a > i {
  width: 20px !important;
  text-align: center !important;
  margin-right: 0 !important;
  font-size: 14px !important;
  color: #38bdf8;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease;
}

.sidebar-menu > li:hover > a {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border-left-color: rgba(56, 189, 248, 0.6) !important;
}
.sidebar-menu > li:hover > a > i {
  transform: scale(1.15);
  color: #0ea5e9;
}

.sidebar-menu > li.active > a {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.18) 0%, rgba(14, 165, 233, 0.03) 100%) !important;
  border-left-color: #38bdf8 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.sidebar-menu > li.active > a > i {
  color: #38bdf8 !important;
}

/* Submenu Hierarchy */
.sidebar-menu .treeview-menu {
  background-color: #05101c !important;
  padding: 4px 6px 6px 12px !important;
  border-left: 2px solid #142f4d;
  margin-left: 18px;
  list-style: none;
}

.sidebar-menu .treeview-menu > li > a {
  padding: 7px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  border-radius: 2px !important;
  transition: all 0.15s ease;
}

.sidebar-menu .treeview-menu > li > a > i {
  width: 16px !important;
  text-align: center !important;
  margin-right: 0 !important;
  font-size: 11.5px !important;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0 !important;
}

.sidebar-menu .treeview-menu > li > a .sidebar-key-badge,
.sidebar-menu .treeview-menu > li > a .pull-right-container,
.sidebar-menu .treeview-menu > li > a .pull-right,
.sidebar-menu .treeview-menu > li > a .label,
.sidebar-menu .treeview-menu > li > a .badge,
.sidebar-menu .treeview-menu > li > a .fa-angle-left,
.sidebar-menu .treeview-menu > li > a .fa-angle-down {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  position: static !important;
}

.sidebar-menu .treeview-menu > li.header {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.45) !important;
  padding: 8px 10px 4px 10px !important;
  background: transparent !important;
}

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

.sidebar-menu .treeview-menu > li.active > a {
  color: #f59e0b !important;
  font-weight: 700 !important;
  background-color: rgba(245, 158, 11, 0.12) !important;
}
.sidebar-menu .treeview-menu > li.active > a > i {
  color: #f59e0b !important;
}

/* ==========================================================================
   14. Dual-Theme Tab System (.nav-tabs-custom & .nav-tabs)
   ========================================================================== */
.nav-tabs-custom {
  width: 100% !important;
  display: block !important;
  clear: both !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-xs) !important;
  border-radius: 2px !important;
  margin-bottom: 22px;
}

.nav-tabs-custom > .nav-tabs {
  width: 100% !important;
  background: var(--card-bg-alt) !important;
  border-bottom: 2px solid var(--border-color) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
}

.nav-tabs-custom > .nav-tabs > li {
  border-top: 3px solid transparent !important;
  margin-bottom: -2px !important;
  float: none !important;
}

.nav-tabs-custom > .nav-tabs.nav-justified > li {
  flex: 1 1 0% !important;
  text-align: center !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
  display: block !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  background: transparent !important;
  border-color: transparent !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center !important;
  transition: all 0.15s ease;
}

.nav-tabs-custom > .nav-tabs > li > a:hover {
  color: var(--secondary) !important;
  background: rgba(14, 165, 233, 0.08) !important;
}

.nav-tabs-custom > .nav-tabs > li.active {
  border-top: 3px solid var(--primary) !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
  background-color: var(--card-bg) !important;
  color: var(--text-main) !important;
  font-weight: 800 !important;
  border-left: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--border-color) !important;
  border-bottom: 2px solid var(--card-bg) !important;
}

.nav-tabs-custom > .tab-content {
  width: 100% !important;
  clear: both !important;
  background: var(--card-bg) !important;
  color: var(--text-main) !important;
  padding: 22px !important;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

/* Tabs in Dark Mode */
[data-theme="dark"] .nav-tabs-custom {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .nav-tabs-custom > .nav-tabs {
  background: var(--card-bg-alt) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: var(--tally-gold) !important;
}

[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active:hover > a {
  background-color: var(--card-bg) !important;
  color: #f1f5f9 !important;
  border-left-color: var(--border-color) !important;
  border-right-color: var(--border-color) !important;
  border-bottom-color: var(--card-bg) !important;
}

[data-theme="dark"] .nav-tabs-custom > .tab-content {
  background: var(--card-bg) !important;
  color: var(--text-main) !important;
}

/* ==========================================================================
   15. Autocomplete & Select2 Enhancements (Dual-Theme)
   ========================================================================== */

/* ==========================================================================
   15. Next-Gen Enterprise Autocomplete & Dropdown Engine (Dual-Theme)
   ========================================================================== */

/* Main Container Dropdown */
.ui-autocomplete.ui-menu,
.ui-autocomplete {
  position: absolute !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  padding: 6px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 999999 !important;
  font-family: inherit !important;
  scrollbar-width: thin;
}

[data-theme="dark"] .ui-autocomplete.ui-menu,
[data-theme="dark"] .ui-autocomplete {
  background: #081628 !important;
  background-image: none !important;
  border: 1px solid #1a3c66 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(14, 165, 233, 0.25) !important;
}

/* Custom Scrollbar for Autocomplete */
.ui-autocomplete::-webkit-scrollbar {
  width: 6px;
}
.ui-autocomplete::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
[data-theme="dark"] .ui-autocomplete::-webkit-scrollbar-track {
  background: #06111e;
}
.ui-autocomplete::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}
[data-theme="dark"] .ui-autocomplete::-webkit-scrollbar-thumb {
  background: #1e3a5f;
}
.ui-autocomplete::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
[data-theme="dark"] .ui-autocomplete::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

/* Base List Items */
.ui-autocomplete .ui-menu-item {
  list-style: none !important;
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  background-image: none !important;
}

.ui-autocomplete .ui-menu-item:last-child {
  margin-bottom: 0 !important;
}

/* Inner item container / wrapper / div / a */
.ui-autocomplete .ui-menu-item > div,
.ui-autocomplete .ui-menu-item > a,
.ui-autocomplete .ui-menu-item-wrapper {
  display: block !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #1e293b !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.12s ease-in-out !important;
  margin: 0 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item > div,
[data-theme="dark"] .ui-autocomplete .ui-menu-item > a,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper {
  color: #e2e8f0 !important;
  background: transparent !important;
  background-image: none !important;
}

/* Base icon reset: no icon by default */
.ui-autocomplete .ui-menu-item > div::before,
.ui-autocomplete .ui-menu-item-wrapper::before {
  content: none !important;
  display: none !important;
}

/* Product Autocomplete Items (flex layout with cube icon) */
.ui-autocomplete .ui-menu-item > .product-autocomplete-item,
.ui-autocomplete .ui-menu-item-wrapper.product-autocomplete-item {
  display: flex !important;
  align-items: center !important;
}

.ui-autocomplete .ui-menu-item > .product-autocomplete-item::before,
.ui-autocomplete .ui-menu-item-wrapper.product-autocomplete-item::before {
  content: "\f1b2" !important; /* fa-cube */
  display: inline-block !important;
  font-family: 'FontAwesome' !important;
  font-size: 11px !important;
  margin-right: 8px !important;
  color: #94a3b8 !important;
  opacity: 0.7 !important;
  flex-shrink: 0 !important;
  transition: all 0.12s ease-in-out !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item > .product-autocomplete-item::before,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.product-autocomplete-item::before {
  color: #64748b !important;
}

/* ==========================================================================
   Ledger Autocomplete Rich Item Card
   ========================================================================== */
.ui-autocomplete .ui-menu-item > .ledger-autocomplete-item,
.ui-autocomplete .ui-menu-item-wrapper.ledger-autocomplete-item {
  display: block !important;
  padding: 8px 12px !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.12s ease-in-out !important;
  margin: 0 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.ui-autocomplete .ui-menu-item > .ledger-autocomplete-item::before,
.ui-autocomplete .ui-menu-item > .ledger-autocomplete-item::after,
.ui-autocomplete .ui-menu-item-wrapper.ledger-autocomplete-item::before,
.ui-autocomplete .ui-menu-item-wrapper.ledger-autocomplete-item::after,
.ui-autocomplete .ledger-autocomplete-item *::before,
.ui-autocomplete .ledger-autocomplete-item *::after {
  display: none !important;
  content: none !important;
}

.ledger-item-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.ledger-item-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-color, #1e293b) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-theme="dark"] .ledger-item-name {
  color: #f8fafc !important;
}

.ledger-item-name i {
  color: #0284c7 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .ledger-item-name i {
  color: #38bdf8 !important;
}

.ledger-item-code {
  font-family: 'Consolas', 'Courier New', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  background: rgba(14, 165, 233, 0.1) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  letter-spacing: 0.5px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

[data-theme="dark"] .ledger-item-code {
  background: rgba(14, 165, 233, 0.18) !important;
  color: #38bdf8 !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
}

.ledger-item-details {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 12px !important;
  color: var(--text-muted, #64748b) !important;
  margin-top: 4px !important;
  padding-left: 22px !important;
  flex-wrap: wrap !important;
  border-top: 1px dashed rgba(148, 163, 184, 0.18) !important;
  padding-top: 4px !important;
}

.ledger-detail-mobile {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: monospace !important;
  font-weight: 600 !important;
  color: #d97706 !important;
  font-size: 11.5px !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .ledger-detail-mobile {
  color: #fbbf24 !important;
}

.ledger-detail-mobile i {
  font-size: 11px !important;
  color: #f59e0b !important;
}

.ledger-detail-address {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--text-muted, #64748b) !important;
  font-size: 11.5px !important;
  max-width: 380px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-theme="dark"] .ledger-detail-address {
  color: #94a3b8 !important;
}

.ledger-detail-address i {
  font-size: 11px !important;
  color: #ef4444 !important;
}

/* Hover / Focus state for ledger items */
.ui-autocomplete .ui-menu-item:hover > .ledger-autocomplete-item,
.ui-autocomplete .ui-menu-item.ui-state-focus > .ledger-autocomplete-item,
.ui-autocomplete .ui-menu-item.ui-state-active > .ledger-autocomplete-item,
.ui-autocomplete .ui-menu-item > .ledger-autocomplete-item.ui-state-active,
.ui-autocomplete .ui-menu-item > .ledger-autocomplete-item.ui-state-focus,
.ui-autocomplete .ui-menu-item-wrapper.ledger-autocomplete-item:hover,
.ui-autocomplete .ui-menu-item-wrapper.ledger-autocomplete-item.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ledger-autocomplete-item.ui-state-focus {
  background: #f0f7ff !important;
  background-image: none !important;
  border: 1px solid #bae6fd !important;
  border-left: 3.5px solid #0284c7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12) !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item:hover > .ledger-autocomplete-item,
[data-theme="dark"] .ui-autocomplete .ui-menu-item.ui-state-focus > .ledger-autocomplete-item,
[data-theme="dark"] .ui-autocomplete .ui-menu-item.ui-state-active > .ledger-autocomplete-item,
[data-theme="dark"] .ui-autocomplete .ui-menu-item > .ledger-autocomplete-item.ui-state-active,
[data-theme="dark"] .ui-autocomplete .ui-menu-item > .ledger-autocomplete-item.ui-state-focus,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ledger-autocomplete-item:hover,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ledger-autocomplete-item.ui-state-active,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ledger-autocomplete-item.ui-state-focus {
  background: linear-gradient(90deg, #132a48 0%, #0d1e34 100%) !important;
  background-image: linear-gradient(90deg, #132a48 0%, #0d1e34 100%) !important;
  border: 1px solid #1e4776 !important;
  border-left: 3.5px solid #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

/* ACTIVE / HOVER / FOCUSED STATE - GENERAL (EXCLUDING LEDGER) */
.ui-autocomplete .ui-menu-item:hover > div:not(.ledger-autocomplete-item),
.ui-autocomplete .ui-menu-item.ui-state-focus > div:not(.ledger-autocomplete-item),
.ui-autocomplete .ui-menu-item.ui-state-active > div:not(.ledger-autocomplete-item),
.ui-autocomplete .ui-menu-item > div:not(.ledger-autocomplete-item):hover,
.ui-autocomplete .ui-menu-item-wrapper:not(.ledger-autocomplete-item):hover,
.ui-autocomplete .ui-menu-item-wrapper:not(.ledger-autocomplete-item).ui-state-focus,
.ui-autocomplete .ui-menu-item-wrapper:not(.ledger-autocomplete-item).ui-state-active {
  background: #f0f7ff !important;
  background-image: none !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
  border-left: 3.5px solid #0284c7 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.08) !important;
}

.ui-autocomplete .ui-menu-item:hover > .product-autocomplete-item::before,
.ui-autocomplete .ui-menu-item.ui-state-focus > .product-autocomplete-item::before,
.ui-autocomplete .ui-menu-item.ui-state-active > .product-autocomplete-item::before,
.ui-autocomplete .ui-menu-item-wrapper.product-autocomplete-item:hover::before,
.ui-autocomplete .ui-menu-item-wrapper.product-autocomplete-item.ui-state-focus::before,
.ui-autocomplete .ui-menu-item-wrapper.product-autocomplete-item.ui-state-active::before {
  color: #0284c7 !important;
  opacity: 1 !important;
  transform: scale(1.15);
}

/* ACTIVE / HOVER / FOCUSED STATE - DARK MODE */
[data-theme="dark"] .ui-autocomplete .ui-menu-item:hover > div:not(.ledger-autocomplete-item),
[data-theme="dark"] .ui-autocomplete .ui-menu-item.ui-state-focus > div:not(.ledger-autocomplete-item),
[data-theme="dark"] .ui-autocomplete .ui-menu-item.ui-state-active > div:not(.ledger-autocomplete-item),
[data-theme="dark"] .ui-autocomplete .ui-menu-item > div:not(.ledger-autocomplete-item):hover,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper:not(.ledger-autocomplete-item):hover,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper:not(.ledger-autocomplete-item).ui-state-focus,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper:not(.ledger-autocomplete-item).ui-state-active {
  background: linear-gradient(90deg, #132a48 0%, #0d1e34 100%) !important;
  background-image: linear-gradient(90deg, #132a48 0%, #0d1e34 100%) !important;
  color: #38bdf8 !important;
  border: 1px solid #1e4776 !important;
  border-left: 3.5px solid #38bdf8 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item:hover > .product-autocomplete-item::before,
[data-theme="dark"] .ui-autocomplete .ui-menu-item.ui-state-focus > .product-autocomplete-item::before,
[data-theme="dark"] .ui-autocomplete .ui-menu-item.ui-state-active > .product-autocomplete-item::before,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.product-autocomplete-item:hover::before,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.product-autocomplete-item.ui-state-focus::before,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.product-autocomplete-item.ui-state-active::before {
  color: #38bdf8 !important;
  opacity: 1 !important;
  transform: scale(1.15);
}

/* Select2 Autocomplete Tuning */
.select2-container--default .select2-selection--single {
  height: 36px !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: 2px !important;
  background: var(--input-bg) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 33px !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
  padding-left: 10px !important;
}

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

.select2-dropdown {
  border: 1.5px solid var(--primary) !important;
  border-radius: 2px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  background: var(--card-bg) !important;
}

.select2-results__option {
  padding: 8px 12px !important;
  font-size: 13px !important;
}

/* ==========================================================================
   15. Unified Dual-Theme Pagination System
   ========================================================================== */
.pagination,
.dataTables_paginate ul.pagination {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  margin: 15px auto !important;
  border-radius: 4px !important;
  gap: 3px !important;
  list-style: none !important;
}

/* Base / Light Mode Pagination */
.pagination > li > a,
.pagination > li > span,
.pagination .page-link,
.dataTables_paginate .paginate_button {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e3a5f !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  height: 32px !important;
  min-width: 32px !important;
  line-height: 30px !important;
  padding: 0 10px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 2px !important;
  margin: 0 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination .page-link:hover,
.dataTables_paginate .paginate_button:hover {
  background-color: #f1f5f9 !important;
  border-color: #0ea5e9 !important;
  color: #0284c7 !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination .page-item.active .page-link,
.dataTables_paginate .paginate_button.current {
  background-color: #1e3a5f !important;
  border-color: #1e3a5f !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 4px rgba(30, 58, 95, 0.25) !important;
  cursor: default !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination > .disabled > a:hover,
.pagination > .disabled > span:hover,
.pagination .page-item.disabled .page-link,
.dataTables_paginate .paginate_button.disabled {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
  box-shadow: none !important;
}

/* Dark Mode Pagination */
[data-theme="dark"] .pagination,
[data-theme="dark"] .dataTables_paginate ul.pagination {
  background: transparent !important;
}

[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span,
[data-theme="dark"] .pagination .page-link,
[data-theme="dark"] .dataTables_paginate .paginate_button {
  background-color: #0b1a2d !important;
  border: 1px solid #1a3c63 !important;
  color: #94a3b8 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .pagination > li > a:hover,
[data-theme="dark"] .pagination > li > span:hover,
[data-theme="dark"] .pagination .page-link:hover,
[data-theme="dark"] .dataTables_paginate .paginate_button:hover {
  background-color: #112d4d !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .pagination > .active > a,
[data-theme="dark"] .pagination > .active > span,
[data-theme="dark"] .pagination > .active > a:hover,
[data-theme="dark"] .pagination > .active > span:hover,
[data-theme="dark"] .pagination .page-item.active .page-link,
[data-theme="dark"] .dataTables_paginate .paginate_button.current {
  background-color: #16365c !important;
  border-color: #f59e0b !important;
  color: #f59e0b !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25) !important;
}

[data-theme="dark"] .pagination > .disabled > a,
[data-theme="dark"] .pagination > .disabled > span,
[data-theme="dark"] .pagination > .disabled > a:hover,
[data-theme="dark"] .pagination > .disabled > span:hover,
[data-theme="dark"] .pagination .page-item.disabled .page-link,
[data-theme="dark"] .dataTables_paginate .paginate_button.disabled {
  background-color: #061424 !important;
  border-color: #10253d !important;
  color: #475569 !important;
  opacity: 0.5 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   16. Main Footer Dual-Theme System
   ========================================================================== */
.main-footer {
  background-color: #ffffff !important;
  color: #64748b !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 12px 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  transition: all 0.2s ease !important;
}

.main-footer a {
  color: #1e3a5f !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.main-footer a:hover {
  color: #0284c7 !important;
  text-decoration: underline !important;
}

.main-footer b,
.main-footer strong {
  font-weight: 700 !important;
}

[data-theme="dark"] .main-footer {
  background-color: #061424 !important;
  border-top: 1px solid #142f4d !important;
  color: #94a3b8 !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .main-footer a {
  color: #38bdf8 !important;
}

[data-theme="dark"] .main-footer a:hover {
  color: #f59e0b !important;
}

/* ==========================================================================
   17. Enterprise Button System (Tally High-Density)
   ========================================================================== */
.btn {
  border-radius: 2px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.2px !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

.btn:active,
.btn.active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Button Sizing */
.btn-xs,
.btn-group-xs > .btn {
  padding: 3px 8px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  border-radius: 2px !important;
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 5px 11px !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  border-radius: 2px !important;
}

.btn-lg,
.btn-group-lg > .btn {
  padding: 9px 18px !important;
  font-size: 14px !important;
  border-radius: 2px !important;
}

.btn-flat {
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* Primary Button (Navy / Enterprise Blue) */
.btn-primary {
  background-color: #1e3a5f !important;
  border-color: #162d4a !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-primary {
  background-color: #16365c !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
  background-color: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

/* Success Button (Green) */
.btn-success {
  background-color: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}
.btn-success:hover,
.btn-success:focus {
  background-color: #15803d !important;
  border-color: #166534 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-success {
  background-color: #15803d !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-success:hover,
[data-theme="dark"] .btn-success:focus {
  background-color: #16a34a !important;
  border-color: #4ade80 !important;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.3) !important;
}

/* Info / Cyan Button (Table Actions) */
.btn-info {
  background-color: #0284c7 !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
}
.btn-info:hover,
.btn-info:focus {
  background-color: #0369a1 !important;
  border-color: #075985 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-info {
  background-color: #0f3460 !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}
[data-theme="dark"] .btn-info:hover,
[data-theme="dark"] .btn-info:focus {
  background-color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  color: #05101c !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

/* Danger Button (Red) */
.btn-danger {
  background-color: #dc2626 !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: #b91c1c !important;
  border-color: #991b1b !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-danger {
  background-color: #991b1b !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-danger:hover,
[data-theme="dark"] .btn-danger:focus {
  background-color: #dc2626 !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.3) !important;
}

/* Warning Button (Amber / Gold) */
.btn-warning {
  background-color: #d97706 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: #b45309 !important;
  border-color: #92400e !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-warning {
  background-color: #b45309 !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn-warning:hover,
[data-theme="dark"] .btn-warning:focus {
  background-color: #d97706 !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

/* Default / Secondary Button */
.btn-default,
.btn-secondary {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-secondary {
  background-color: #0b1a2d !important;
  border-color: #1e3e65 !important;
  color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-default:focus,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:focus {
  background-color: #162d4a !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   18. Dropdown Menu Dual-Theme System
   ========================================================================== */
.dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  padding: 4px 0 !important;
  margin-top: 2px !important;
  z-index: 1050 !important;
}

.dropdown-menu > li > a {
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.12s ease !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
}

.dropdown-menu .divider {
  background-color: #e2e8f0 !important;
  height: 1px !important;
  margin: 4px 0 !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #091c33 !important;
  border: 1px solid #1c4573 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
}

[data-theme="dark"] .dropdown-menu > li > a {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .dropdown-menu > li > a:hover,
[data-theme="dark"] .dropdown-menu > li > a:focus {
  background-color: #112d4d !important;
  color: #f59e0b !important;
}

[data-theme="dark"] .dropdown-menu .divider {
  background-color: #142f4d !important;
}

/* ==========================================================================
   19. DataTables Controls & Export Buttons
   ========================================================================== */
.dt-buttons,
div.dt-buttons {
  margin-bottom: 10px !important;
  display: inline-flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

.dt-button,
div.dt-button,
a.dt-button,
button.dt-button,
.dt-buttons .btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e3a5f !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
}

.dt-button:hover,
div.dt-button:hover,
a.dt-button:hover,
button.dt-button:hover,
.dt-buttons .btn:hover {
  background: #1e3a5f !important;
  border-color: #1e3a5f !important;
  color: #ffffff !important;
}

[data-theme="dark"] .dt-button,
[data-theme="dark"] div.dt-button,
[data-theme="dark"] a.dt-button,
[data-theme="dark"] button.dt-button,
[data-theme="dark"] .dt-buttons .btn {
  background: #0b1a2d !important;
  border: 1px solid #1e3e65 !important;
  color: #38bdf8 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .dt-button:hover,
[data-theme="dark"] div.dt-button:hover,
[data-theme="dark"] a.dt-button:hover,
[data-theme="dark"] button.dt-button:hover,
[data-theme="dark"] .dt-buttons .btn:hover {
  background: #16365c !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

.dataTables_filter input {
  height: 32px !important;
  border-radius: 2px !important;
  border: 1.5px solid var(--border-color) !important;
  padding: 4px 10px !important;
  background: var(--input-bg) !important;
  color: var(--text-main) !important;
  font-size: 12.5px !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

.dataTables_filter input:focus {
  border-color: #0284c7 !important;
  background: var(--input-focus-bg) !important;
}

[data-theme="dark"] .dataTables_filter input:focus {
  border-color: #f59e0b !important;
}

/* ==========================================================================
   20. Modals Dual-Theme Styling
   ========================================================================== */
.modal-content {
  border-radius: 3px !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--card-bg) !important;
  color: var(--text-main) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35) !important;
}

.modal-header {
  background-color: var(--card-bg-alt) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 12px 18px !important;
  border-top-left-radius: 2px !important;
  border-top-right-radius: 2px !important;
}

.modal-header .modal-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
}

.modal-header .close {
  color: var(--text-main) !important;
  opacity: 0.7 !important;
  font-size: 20px !important;
  text-shadow: none !important;
  transition: opacity 0.15s ease;
}

.modal-header .close:hover {
  opacity: 1 !important;
}

.modal-body {
  padding: 18px !important;
  background-color: var(--card-bg) !important;
  color: var(--text-main) !important;
}

.modal-footer {
  background-color: var(--card-bg-alt) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 10px 18px !important;
  border-bottom-left-radius: 2px !important;
  border-bottom-right-radius: 2px !important;
}

/* Section 21 harmonized with Section 15 Next-Gen Autocomplete Engine */
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-state-focus {
  background-image: none !important;
}

/* ==========================================================================
   22. Universal Enterprise Card-Box System (.box, .card, .info-box)
   ========================================================================== */
.box,
.card,
.box-modern,
.chart-container,
.tally-card {
  position: relative !important;
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 2px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="dark"] .box,
[data-theme="dark"] .card,
[data-theme="dark"] .box-modern,
[data-theme="dark"] .chart-container,
[data-theme="dark"] .tally-card {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  border-color: #142f4d !important;
}

/* Card / Box Headers */
.box-header,
.card-header,
.box-modern-header,
.chart-header,
.tally-card-header {
  color: var(--text-main) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  position: relative !important;
  background-color: var(--card-bg-alt) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-top-left-radius: 2px !important;
  border-top-right-radius: 2px !important;
  min-height: 42px !important;
}

.box-header.with-border {
  border-bottom: 1px solid var(--border-subtle) !important;
}

.box-header .box-title,
.card-header .card-title,
.box-modern-title,
.chart-title,
.tally-card-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.3px !important;
}

.box-header .box-tools,
.card-header .card-tools,
.box-modern-header .box-tools {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  right: auto !important;
  top: auto !important;
}

/* Card / Box Body */
.box-body,
.card-body,
.box-modern-body,
.tally-card-body {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 2px !important;
  border-bottom-left-radius: 2px !important;
  padding: 16px !important;
  background-color: var(--card-bg) !important;
  color: var(--text-main) !important;
}

/* Card / Box Footer */
.box-footer,
.card-footer,
.tally-card-footer {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 2px !important;
  border-bottom-left-radius: 2px !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 10px 16px !important;
  background-color: var(--card-bg-alt) !important;
  color: var(--text-main) !important;
}

/* Box Variant Borders (Top Accent Line) */
.box.box-primary {
  border-top: 3px solid #1e3a5f !important;
}
[data-theme="dark"] .box.box-primary {
  border-top: 3px solid #38bdf8 !important;
}

.box.box-success {
  border-top: 3px solid #16a34a !important;
}
[data-theme="dark"] .box.box-success {
  border-top: 3px solid #22c55e !important;
}

.box.box-info {
  border-top: 3px solid #0284c7 !important;
}
[data-theme="dark"] .box.box-info {
  border-top: 3px solid #38bdf8 !important;
}

.box.box-warning {
  border-top: 3px solid #d97706 !important;
}
[data-theme="dark"] .box.box-warning {
  border-top: 3px solid #f59e0b !important;
}

.box.box-danger {
  border-top: 3px solid #dc2626 !important;
}
[data-theme="dark"] .box.box-danger {
  border-top: 3px solid #f87171 !important;
}

.box.box-default {
  border-top: 3px solid var(--border-color) !important;
}

.box.box-solid {
  border-top: 1px solid var(--border-color) !important;
}

/* ==========================================================================
   23. Info Boxes & Metric Tiles (.info-box, .small-box)
   ========================================================================== */
.info-box {
  display: flex !important;
  align-items: center !important;
  min-height: 85px !important;
  background: var(--card-bg) !important;
  width: 100% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border-radius: 2px !important;
  margin-bottom: 18px !important;
  border: 1px solid var(--border-color) !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .info-box {
  border-color: #142f4d !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.info-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.info-box-icon {
  border-top-left-radius: 2px !important;
  border-bottom-left-radius: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  height: 85px !important;
  width: 80px !important;
  min-width: 80px !important;
  text-align: center !important;
  font-size: 30px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

.info-box-content {
  padding: 10px 14px !important;
  margin-left: 0 !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.info-box-text {
  display: block !important;
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 2px !important;
}

.info-box-number {
  display: block !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: var(--text-main) !important;
  letter-spacing: -0.5px !important;
  margin: 1px 0 !important;
  line-height: 1.2 !important;
}

.info-box .progress-description {
  margin: 0 !important;
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

/* Small Boxes */
.small-box {
  border-radius: 2px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
}

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

.small-box .icon {
  top: 10px !important;
  right: 12px !important;
}

.small-box-footer {
  border-radius: 0 0 2px 2px !important;
  padding: 4px 0 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.3px !important;
}

/* ==========================================================================
   24. Voucher & Quotation Workstation UI (Tally Prime Spec)
   ========================================================================== */
.quotation-main-card,
.quotation-meta-card {
  border-radius: 2px !important;
  border-top: 3px solid #0a3d62 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .quotation-main-card,
[data-theme="dark"] .quotation-meta-card {
  border-top-color: #38bdf8 !important;
  border-color: #1a3c63 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

.tally-indicator-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 0.2px;
}

.badge-cost {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
}

[data-theme="dark"] .badge-cost {
  background: rgba(14, 165, 233, 0.2) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

.badge-stock {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .badge-stock {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
}

.quotation-cart-scroll {
  border: 1px solid var(--border-color) !important;
  border-radius: 2px !important;
  background: var(--card-bg) !important;
}

.quotation-cart-scroll::-webkit-scrollbar,
#flux::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.quotation-cart-scroll::-webkit-scrollbar-track,
#flux::-webkit-scrollbar-track {
  background: var(--body-bg);
}

.quotation-cart-scroll::-webkit-scrollbar-thumb,
#flux::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.quotation-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  margin-top: 10px;
  gap: 12px;
  flex-wrap: wrap;
}

[data-theme="dark"] .quotation-summary-bar {
  background: #081627 !important;
  border-color: #1a3c63 !important;
}

.summary-badge-qty {
  display: inline-block;
  padding: 4px 12px;
  background: #0a3d62;
  color: #f59e0b;
  font-size: 14px;
  font-weight: 700;
  border-radius: 2px;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .summary-badge-qty {
  background: #0b1a2d;
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.4);
}

.summary-amount-input {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #10b981 !important;
  background: var(--input-bg, #ffffff) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 2px 2px 0 !important;
  height: 38px !important;
}

[data-theme="dark"] .summary-amount-input {
  color: #34d399 !important;
  background: #061322 !important;
  border-color: #1a3c63 !important;
}

#plist thead th {
  background: var(--navy-800, #0a3d62) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
  position: sticky;
  top: 0;
  z-index: 2;
  border: none !important;
}

#plist tbody tr {
  transition: background-color 0.15s ease !important;
  border-bottom: 1px solid var(--border-color) !important;
  cursor: pointer;
}

#plist tbody tr:hover {
  background-color: var(--table-row-hover, rgba(14, 165, 233, 0.08)) !important;
}

#plist tbody tr.highlight_row {
  background-color: #0a3d62 !important;
  color: #ffffff !important;
}

#plist tbody tr.highlight_row td {
  color: #ffffff !important;
  font-weight: 600 !important;
}

[data-theme="dark"] #plist tbody tr.highlight_row {
  background-color: #16365c !important;
  color: #fbbf24 !important;
}

[data-theme="dark"] #plist tbody tr.highlight_row td {
  color: #fbbf24 !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
  background-color: var(--card-bg) !important;
  color: var(--navy-800, #0a3d62) !important;
  border-top: 3px solid #f59e0b !important;
  border-left-color: var(--border-color) !important;
  border-right-color: var(--border-color) !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active:hover > a {
  color: #f59e0b !important;
  border-top: 3px solid #f59e0b !important;
  background-color: #0f2238 !important;
  border-left-color: #1a3c63 !important;
  border-right-color: #1a3c63 !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
  color: var(--text-muted) !important;
  border-radius: 0 !important;
}

.nav-tabs-custom > .tab-content {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  padding: 14px 14px !important;
}

[data-theme="dark"] .nav-tabs-custom > .tab-content {
  border-color: #1a3c63 !important;
}

/* ==========================================================================
   25. Multi-field Voucher Summary Matrix (Purchase, Sale, Returns)
   ========================================================================== */
.voucher-summary-grid {
  display: grid;
  grid-template-columns: auto 1.2fr 1fr 1fr 1fr;
  gap: 10px;
  align-items: flex-end;
  padding: 10px 14px;
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  margin-top: 10px;
}

@media (max-width: 991px) {
  .voucher-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .voucher-summary-grid {
    grid-template-columns: 1fr;
  }
}

[data-theme="dark"] .voucher-summary-grid {
  background: #081627 !important;
  border-color: #1a3c63 !important;
}

.summary-field-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.summary-field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  margin: 0;
  white-space: nowrap;
}

.summary-field-box .input-group-addon {
  padding: 0 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  height: 34px !important;
  line-height: 32px !important;
  border-radius: 2px 0 0 2px !important;
}

.summary-field-box input.form-control {
  height: 34px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 0 2px 2px 0 !important;
}

.summary-val-total {
  color: #10b981 !important;
  background: var(--input-bg, #ffffff) !important;
}
[data-theme="dark"] .summary-val-total {
  color: #34d399 !important;
  background: #061322 !important;
}

.summary-val-discount {
  color: #d97706 !important;
  background: var(--input-bg, #ffffff) !important;
}
[data-theme="dark"] .summary-val-discount {
  color: #fbbf24 !important;
  background: #061322 !important;
}

.summary-val-paid {
  color: #0284c7 !important;
  background: var(--input-bg, #ffffff) !important;
}
[data-theme="dark"] .summary-val-paid {
  color: #38bdf8 !important;
  background: #061322 !important;
}

.summary-val-due {
  color: #e11d48 !important;
  background: var(--input-bg, #ffffff) !important;
}
[data-theme="dark"] .summary-val-due {
  color: #f43f5e !important;
  background: #061322 !important;
}

/* Sidebar Voucher Summary Matrix */
.voucher-summary-sidebar {
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-top: 10px;
}

[data-theme="dark"] .voucher-summary-sidebar {
  background: #081628 !important;
  border-color: #1a3c63 !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

.voucher-summary-sidebar .input-group-addon {
  height: 35px !important;
  line-height: 33px !important;
  padding: 0 10px !important;
  font-weight: 700 !important;
  border-radius: 2px 0 0 2px !important;
}

.voucher-summary-sidebar input.form-control {
  border-radius: 0 2px 2px 0 !important;
}

/* ==========================================================================
   17. Enterprise Report Generator & Workstation Aesthetics (Dual-Theme)
   ========================================================================== */

/* Report Workspace Card */
.report-workspace-card,
.box.box-info:has(.tab) {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

[data-theme="dark"] .report-workspace-card,
[data-theme="dark"] .box.box-info:has(.tab) {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45) !important;
}

.report-workspace-header {
  padding: 14px 20px !important;
  background: var(--card-bg-alt, rgba(0, 0, 0, 0.02)) !important;
  border-bottom: 1px solid var(--border-color) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.report-workspace-header h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-color) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.report-workspace-header h3 i {
  color: var(--primary, #0284c7) !important;
  font-size: 16px !important;
}

[data-theme="dark"] .report-workspace-header h3 i {
  color: #38bdf8 !important;
}

/* Master 2-Column Report Layout */
.report-grid-container {
  display: flex !important;
  flex-direction: row !important;
  min-height: 420px !important;
  background: var(--card-bg) !important;
}

@media (max-width: 820px) {
  .report-grid-container {
    flex-direction: column !important;
    min-height: auto !important;
  }
}

/* Left Column: Report Menu Navigation */
.report-sidebar-nav,
.tab {
  width: 36% !important;
  min-width: 270px !important;
  float: none !important;
  height: auto !important;
  min-height: 420px !important;
  background: var(--card-bg-alt, #f8fafc) !important;
  border: none !important;
  border-right: 1px solid var(--border-color) !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

@media (max-width: 820px) {
  .report-sidebar-nav,
  .tab {
    width: 100% !important;
    min-height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color) !important;
  }
}

[data-theme="dark"] .report-sidebar-nav,
[data-theme="dark"] .tab {
  background: rgba(10, 25, 47, 0.45) !important;
  border-right-color: var(--border-color) !important;
}

.report-nav-header {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--text-muted) !important;
  padding: 4px 8px 8px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.25) !important;
  margin-bottom: 4px !important;
}

/* Report Selection Buttons */
.tab button,
.report-nav-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 11px 14px !important;
  width: 100% !important;
  background: var(--card-bg, #ffffff) !important;
  color: var(--text-color, #1e293b) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: left !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-left: 3.5px solid transparent !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  margin-bottom: 0 !important;
}

.tab button:hover,
.report-nav-btn:hover {
  background: var(--bg-hover, rgba(14, 165, 233, 0.06)) !important;
  color: var(--primary, #0284c7) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
  border-left-color: var(--primary, #0284c7) !important;
  transform: translateX(2px) !important;
}

.tab button.active,
.report-nav-btn.active {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.03) 100%) !important;
  color: var(--primary, #0284c7) !important;
  border-color: rgba(14, 165, 233, 0.45) !important;
  border-left: 4px solid var(--primary, #0284c7) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12) !important;
}

[data-theme="dark"] .tab button,
[data-theme="dark"] .report-nav-btn {
  background: #0b1a2d !important;
  color: #cbd5e1 !important;
  border-color: #1a3c63 !important;
}

[data-theme="dark"] .tab button:hover,
[data-theme="dark"] .report-nav-btn:hover {
  background: #112948 !important;
  color: #38bdf8 !important;
  border-left-color: #38bdf8 !important;
}

[data-theme="dark"] .tab button.active,
[data-theme="dark"] .report-nav-btn.active {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.22) 0%, rgba(56, 189, 248, 0.04) 100%) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  border-left: 4px solid #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.2) !important;
}

/* Right Column: Filter Content Panel */
.report-filter-panel,
.tabcontent {
  flex: 1 1 auto !important;
  width: auto !important;
  float: none !important;
  height: auto !important;
  min-height: 420px !important;
  border: none !important;
  background: var(--card-bg, #ffffff) !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.report-filter-header {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--text-muted) !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border-color) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.report-filter-body {
  flex: 1 1 auto !important;
}

/* Form Groups in Report Panels */
.report-filter-panel .form-group,
.tabcontent .form-group {
  margin-bottom: 16px !important;
}

.report-filter-panel .form-group label,
.tabcontent .form-group label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-color, #1e293b) !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.report-filter-panel .form-group label i,
.tabcontent .form-group label i {
  color: var(--primary, #0284c7) !important;
  font-size: 13px !important;
}

[data-theme="dark"] .report-filter-panel .form-group label i,
[data-theme="dark"] .tabcontent .form-group label i {
  color: #38bdf8 !important;
}

.report-filter-panel .form-control,
.tabcontent .form-control {
  height: 38px !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  border: 1.5px solid var(--input-border, #cbd5e1) !important;
  background: var(--input-bg, #ffffff) !important;
  color: var(--text-color, #1e293b) !important;
  transition: all 0.15s ease-in-out !important;
}

.report-filter-panel .form-control:focus,
.tabcontent .form-control:focus {
  border-color: var(--primary, #0284c7) !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* Action Footer Bar */
.report-action-footer {
  padding-top: 18px !important;
  margin-top: 20px !important;
  border-top: 1px solid var(--border-color) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.report-tip-text {
  font-size: 12px !important;
  color: var(--text-muted, #64748b) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-report-view,
.box-header .btn-primary.btn-flat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 26px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  text-transform: none !important;
}

.btn-report-view:hover,
.box-header .btn-primary.btn-flat:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-report-view,
[data-theme="dark"] .box-header .btn-primary.btn-flat {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45) !important;
}

/* ==========================================================================
   26. Modern Table Action Icon Buttons (Edit, Delete, Print, View)
   ========================================================================== */
.inbox-toolbar,
.table td .inbox-toolbar,
td .inbox-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Base style for all action icon buttons in tables (excluding dropdown toggles) */
.table td .btn-xs:not(.dropdown-toggle),
.table td .btn.btn-flat.btn-xs:not(.dropdown-toggle),
.inbox-toolbar .btn:not(.dropdown-toggle),
.inbox-toolbar a.btn:not(.dropdown-toggle),
a.btn-action-icon,
.btn-action-edit,
.btn-action-delete,
.btn-action-print,
.btn-action-view {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 5px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  outline: none !important;
}

.table td .btn-xs:not(.dropdown-toggle) i,
.inbox-toolbar .btn:not(.dropdown-toggle) i,
a.btn-action-icon i {
  font-size: 12.5px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* 1. EDIT BUTTON: Warm Amber */
.table td .btn.edit_tag,
.table td a.edit_tag,
.table td .btn-warning.btn-xs:not(.dropdown-toggle),
.table td .btn.bg-purple.btn-xs:not(.dropdown-toggle),
.inbox-toolbar .edit_tag,
.btn-action-edit {
  background-color: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.1) !important;
}

.table td .btn.edit_tag:hover,
.table td a.edit_tag:hover,
.table td .btn-warning.btn-xs:not(.dropdown-toggle):hover,
.table td .btn.bg-purple.btn-xs:not(.dropdown-toggle):hover,
.inbox-toolbar .edit_tag:hover,
.btn-action-edit:hover {
  background-color: #f59e0b !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.35) !important;
}

/* 2. DELETE BUTTON: Crisp Crimson */
.table td .btn.delete_user,
.table td a.delete_user,
.table td .btn-danger.btn-xs:not(.dropdown-toggle),
.table td .btn.bg-red.btn-xs:not(.dropdown-toggle),
.inbox-toolbar .delete_user,
.btn-action-delete {
  background-color: #fee2e2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.1) !important;
}

.table td .btn.delete_user:hover,
.table td a.delete_user:hover,
.table td .btn-danger.btn-xs:not(.dropdown-toggle):hover,
.table td .btn.bg-red.btn-xs:not(.dropdown-toggle):hover,
.inbox-toolbar .delete_user:hover,
.btn-action-delete:hover {
  background-color: #ef4444 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.35) !important;
}

/* 3. PRINT / PDF BUTTON: Sky Blue */
.table td .btn[title*="Print"]:not(.dropdown-toggle),
.table td a[title*="Print"]:not(.dropdown-toggle),
.table td a[title*="PDF"]:not(.dropdown-toggle),
.table td a[href*="pdf"]:not(.dropdown-toggle),
.btn-action-print {
  background-color: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.1) !important;
}

.table td .btn[title*="Print"]:not(.dropdown-toggle):hover,
.table td a[title*="Print"]:not(.dropdown-toggle):hover,
.table td a[title*="PDF"]:not(.dropdown-toggle):hover,
.table td a[href*="pdf"]:not(.dropdown-toggle):hover,
.btn-action-print:hover {
  background-color: #0284c7 !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.35) !important;
}
.table td .btn[title*="Print"]:not(.dropdown-toggle):hover i,
.table td a[title*="Print"]:not(.dropdown-toggle):hover i,
.table td a[title*="PDF"]:not(.dropdown-toggle):hover i,
.table td a[href*="pdf"]:not(.dropdown-toggle):hover i {
  color: #ffffff !important;
}

/* 4. VIEW / DETAILS BUTTON: Emerald (Single Icon Only) */
.table td .btn-info.btn-xs:not(.dropdown-toggle),
.table td a[title*="View"]:not(.dropdown-toggle),
.btn-action-view {
  background-color: #d1fae5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #059669 !important;
}

.table td .btn-info.btn-xs:not(.dropdown-toggle):hover,
.table td a[title*="View"]:not(.dropdown-toggle):hover,
.btn-action-view:hover {
  background-color: #10b981 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.35) !important;
}

/* ==========================================================================
   Dark Theme Overrides for Table Action Buttons
   ========================================================================== */
[data-theme="dark"] .table td .btn.edit_tag,
[data-theme="dark"] .table td a.edit_tag,
[data-theme="dark"] .table td .btn-warning.btn-xs:not(.dropdown-toggle),
[data-theme="dark"] .table td .btn.bg-purple.btn-xs:not(.dropdown-toggle),
[data-theme="dark"] .inbox-toolbar .edit_tag,
[data-theme="dark"] .btn-action-edit {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.38) !important;
  color: #fbbf24 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table td .btn.edit_tag:hover,
[data-theme="dark"] .table td a.edit_tag:hover,
[data-theme="dark"] .table td .btn-warning.btn-xs:not(.dropdown-toggle):hover,
[data-theme="dark"] .table td .btn.bg-purple.btn-xs:not(.dropdown-toggle):hover,
[data-theme="dark"] .inbox-toolbar .edit_tag:hover,
[data-theme="dark"] .btn-action-edit:hover {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #0f172a !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45) !important;
}

[data-theme="dark"] .table td .btn.delete_user,
[data-theme="dark"] .table td a.delete_user,
[data-theme="dark"] .table td .btn-danger.btn-xs:not(.dropdown-toggle),
[data-theme="dark"] .table td .btn.bg-red.btn-xs:not(.dropdown-toggle),
[data-theme="dark"] .inbox-toolbar .delete_user,
[data-theme="dark"] .btn-action-delete {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.38) !important;
  color: #f87171 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table td .btn.delete_user:hover,
[data-theme="dark"] .table td a.delete_user:hover,
[data-theme="dark"] .table td .btn-danger.btn-xs:not(.dropdown-toggle):hover,
[data-theme="dark"] .table td .btn.bg-red.btn-xs:not(.dropdown-toggle):hover,
[data-theme="dark"] .inbox-toolbar .delete_user:hover,
[data-theme="dark"] .btn-action-delete:hover {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45) !important;
}

[data-theme="dark"] .table td .btn[title*="Print"]:not(.dropdown-toggle),
[data-theme="dark"] .table td a[title*="Print"]:not(.dropdown-toggle),
[data-theme="dark"] .table td a[title*="PDF"]:not(.dropdown-toggle),
[data-theme="dark"] .table td a[href*="pdf"]:not(.dropdown-toggle),
[data-theme="dark"] .btn-action-print {
  background-color: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.38) !important;
  color: #38bdf8 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table td .btn[title*="Print"]:not(.dropdown-toggle):hover,
[data-theme="dark"] .table td a[title*="Print"]:not(.dropdown-toggle):hover,
[data-theme="dark"] .table td a[title*="PDF"]:not(.dropdown-toggle):hover,
[data-theme="dark"] .table td a[href*="pdf"]:not(.dropdown-toggle):hover,
[data-theme="dark"] .btn-action-print:hover {
  background-color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  color: #0f172a !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45) !important;
}

[data-theme="dark"] .table td .btn-info.btn-xs:not(.dropdown-toggle),
[data-theme="dark"] .table td a[title*="View"]:not(.dropdown-toggle),
[data-theme="dark"] .btn-action-view {
  background-color: rgba(52, 211, 153, 0.15) !important;
  border: 1px solid rgba(52, 211, 153, 0.38) !important;
  color: #34d399 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table td .btn-info.btn-xs:not(.dropdown-toggle):hover,
[data-theme="dark"] .table td a[title*="View"]:not(.dropdown-toggle):hover,
[data-theme="dark"] .btn-action-view:hover {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #0f172a !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45) !important;
}

/* ==========================================================================
   27. Modern Table Action Dropdown Button (ACTION ▼)
   ========================================================================== */
.table td .btn.dropdown-toggle,
.table td button.dropdown-toggle,
.input-group-btn .dropdown-toggle,
.btn-action-dropdown {
  width: auto !important;
  min-width: 82px !important;
  height: 27px !important;
  padding: 2px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.18s ease-in-out !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  white-space: nowrap !important;
}

/* Light Theme: Sleek Modern Dropdown Button */
.table td .btn.dropdown-toggle,
.table td button.dropdown-toggle,
.input-group-btn .dropdown-toggle {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
}

.table td .btn.dropdown-toggle i.fa-cog,
.table td button.dropdown-toggle i.fa-cog,
.table td .btn.dropdown-toggle i.fa-gear,
.input-group-btn .dropdown-toggle i.fa-cog {
  color: #0284c7 !important;
  font-size: 11.5px !important;
  margin: 0 !important;
  transition: transform 0.3s ease !important;
}

.table td .btn.dropdown-toggle i.fa-caret-down,
.table td button.dropdown-toggle i.fa-caret-down,
.input-group-btn .dropdown-toggle i.fa-caret-down {
  color: #64748b !important;
  font-size: 9.5px !important;
  margin: 0 !important;
}

.table td .btn.dropdown-toggle:hover,
.table td button.dropdown-toggle:hover,
.table td .btn.dropdown-toggle:focus,
.table td button.dropdown-toggle:focus,
.input-group-btn.open .dropdown-toggle {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.35) !important;
  transform: translateY(-1px) !important;
}

.table td .btn.dropdown-toggle:hover i,
.table td button.dropdown-toggle:hover i,
.table td .btn.dropdown-toggle:focus i,
.table td button.dropdown-toggle:focus i,
.input-group-btn.open .dropdown-toggle i {
  color: #ffffff !important;
}

.table td .btn.dropdown-toggle:hover i.fa-cog,
.table td button.dropdown-toggle:hover i.fa-cog,
.input-group-btn.open .dropdown-toggle i.fa-cog {
  transform: rotate(45deg) !important;
}

/* Dark Theme Overrides for Action Dropdown Button */
[data-theme="dark"] .table td .btn.dropdown-toggle,
[data-theme="dark"] .table td button.dropdown-toggle,
[data-theme="dark"] .input-group-btn .dropdown-toggle {
  background: rgba(30, 58, 95, 0.35) !important;
  border: 1.5px solid #1e3e65 !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table td .btn.dropdown-toggle i.fa-cog,
[data-theme="dark"] .table td button.dropdown-toggle i.fa-cog,
[data-theme="dark"] .input-group-btn .dropdown-toggle i.fa-cog {
  color: #38bdf8 !important;
}

[data-theme="dark"] .table td .btn.dropdown-toggle i.fa-caret-down,
[data-theme="dark"] .table td button.dropdown-toggle i.fa-caret-down,
[data-theme="dark"] .input-group-btn .dropdown-toggle i.fa-caret-down {
  color: #94a3b8 !important;
}

[data-theme="dark"] .table td .btn.dropdown-toggle:hover,
[data-theme="dark"] .table td button.dropdown-toggle:hover,
[data-theme="dark"] .table td .btn.dropdown-toggle:focus,
[data-theme="dark"] .table td button.dropdown-toggle:focus,
[data-theme="dark"] .input-group-btn.open .dropdown-toggle {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-1px) !important;
}

[data-theme="dark"] .table td .btn.dropdown-toggle:hover i,
[data-theme="dark"] .table td button.dropdown-toggle:hover i,
[data-theme="dark"] .table td .btn.dropdown-toggle:focus i,
[data-theme="dark"] .table td button.dropdown-toggle:focus i,
[data-theme="dark"] .input-group-btn.open .dropdown-toggle i {
  color: #ffffff !important;
}

/* ==========================================================================
   28. Modern Unified Input-Group & Ledger Form Field Component
   ========================================================================== */

/* Universal Placeholder Styling (Dual-Theme) */
::placeholder {
  color: #94a3b8 !important;
  opacity: 0.9 !important;
  font-size: 12.5px !important;
  font-family: inherit !important;
}
::-webkit-input-placeholder {
  color: #94a3b8 !important;
  opacity: 0.9 !important;
  font-size: 12.5px !important;
  font-family: inherit !important;
}
:-moz-placeholder {
  color: #94a3b8 !important;
  opacity: 0.9 !important;
  font-size: 12.5px !important;
  font-family: inherit !important;
}
::-moz-placeholder {
  color: #94a3b8 !important;
  opacity: 0.9 !important;
  font-size: 12.5px !important;
  font-family: inherit !important;
}

[data-theme="dark"] ::placeholder,
[data-theme="dark"] ::-webkit-input-placeholder,
[data-theme="dark"] :-moz-placeholder,
[data-theme="dark"] ::-moz-placeholder {
  color: #64748b !important;
  opacity: 0.9 !important;
}

[data-theme="dark"] input:focus::placeholder,
[data-theme="dark"] input:focus::-webkit-input-placeholder {
  color: #94a3b8 !important;
}

/* Strictly ensure hidden inputs never take up layout space */
input[type="hidden"],
input[type="hidden"].form-control {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: absolute !important;
}

/* Bootstrap 3 Table-Based Input-Group Layout */
.input-group {
  position: relative !important;
  display: table !important;
  border-collapse: separate !important;
  width: 100% !important;
}

.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell !important;
  vertical-align: middle !important;
}

.input-group-addon,
.input-group-btn {
  width: 1% !important;
  white-space: nowrap !important;
}

.input-group .form-control {
  float: left !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* Input-Group Addon (Icons / Prefix) */
.input-group-addon {
  padding: 6px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-right: none !important;
  color: #64748b !important;
  border-radius: 4px 0 0 4px !important;
}

[data-theme="dark"] .input-group-addon {
  background-color: #112d4d !important;
  border: 1.5px solid #1a3c66 !important;
  border-right: none !important;
  color: #94a3b8 !important;
}

.input-group .input-group-addon + .form-control,
.input-group .input-group-btn + .form-control,
.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child):not(input[type="hidden"]) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

/* Ledger ADD Button */
.input-group-btn > .create_ledger {
  height: 34px !important;
  line-height: 32px !important;
  padding: 0 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 4px 0 0 4px !important;
  border-right: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.18s ease-in-out !important;
  white-space: nowrap !important;
}

.input-group-btn > .create_ledger i {
  font-size: 11px !important;
  margin: 0 !important;
}

/* Light Theme: Ledger ADD Button */
.input-group-btn > .create_ledger {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1.5px solid #0284c7 !important;
  border-right: none !important;
  color: #ffffff !important;
}

.input-group-btn > .create_ledger:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

/* Dark Theme: Ledger ADD Button */
[data-theme="dark"] .input-group-btn > .create_ledger {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(2, 132, 199, 0.3) 100%) !important;
  border: 1.5px solid #0284c7 !important;
  border-right: none !important;
  color: #38bdf8 !important;
}

[data-theme="dark"] .input-group-btn > .create_ledger:hover {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  border-right: none !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45) !important;
}

/* Item ADD Button in Rate field (+ যোগ) */
.input-group-btn > #item_add,
.input-group-btn > .add_cart,
.input-group-btn:last-child > .btn {
  height: 34px !important;
  line-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 0 4px 4px 0 !important;
  border-left: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Ledger Input Field (txt_l_name) */
.input-group > input.txt_l_name,
.input-group > .form-control.txt_l_name {
  height: 34px !important;
  line-height: 22px !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 0 4px 4px 0 !important;
}

/* Light Theme: Ledger Input */
.input-group > input.txt_l_name,
.input-group > .form-control.txt_l_name {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.input-group > input.txt_l_name:focus,
.input-group > .form-control.txt_l_name:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2) !important;
}

/* Dark Theme: Ledger Input */
[data-theme="dark"] .input-group > input.txt_l_name,
[data-theme="dark"] .input-group > .form-control.txt_l_name {
  background-color: #081628 !important;
  border: 1.5px solid #1a3c66 !important;
  border-left: 1px solid rgba(14, 165, 233, 0.35) !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .input-group > input.txt_l_name:focus,
[data-theme="dark"] .input-group > .form-control.txt_l_name:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25) !important;
  background-color: #0c1f38 !important;
  color: #ffffff !important;
}

/* Ledger Balance Display Badge */
#ledger_bal {
  display: inline-block !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  line-height: 1.2 !important;
}

[data-theme="dark"] #ledger_bal {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
}

/* ==========================================================================
   29. Modern Box-Header Toolbar Buttons (Add New [+] & Reload [⟳])
   ========================================================================== */

/* Base style for Box-Tools action buttons */
.box-tools .btn,
.box-header .box-tools .btn,
.card-header .card-tools .btn {
  height: 31px !important;
  min-height: 31px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
  border-width: 1px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  vertical-align: middle !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* Icon-only compact buttons in box-tools (e.g. [+] and [⟳]) */
.box-tools .btn.create_new,
.box-tools button[data-original-title="Reload"],
.box-tools button[title="Reload"],
.box-tools button[title="Add New"],
.box-tools button[title*="রিলোড"],
.box-tools a[data-original-title="Add New"],
.box-tools a[title="Add New"] {
  min-width: 32px !important;
  padding: 0 8px !important;
}

/* 1. Add New / Plus Button (Purple / Indigo Accent) */
.box-tools .btn.bg-purple,
.box-header .btn.bg-purple,
.btn.bg-purple:not(.btn-xs),
.box-tools .create_new,
.box-header .create_new {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
  border: 1px solid #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(124, 58, 237, 0.28) !important;
}

.box-tools .btn.bg-purple:hover,
.box-header .btn.bg-purple:hover,
.btn.bg-purple:not(.btn-xs):hover,
.box-tools .create_new:hover,
.box-header .create_new:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%) !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4) !important;
}

.box-tools .btn.bg-purple i.fa-plus,
.box-header .btn.bg-purple i.fa-plus,
.box-tools .create_new i.fa-plus {
  font-size: 12px !important;
  margin: 0 !important;
  transition: transform 0.22s ease !important;
}

.box-tools .btn.bg-purple:hover i.fa-plus,
.box-header .btn.bg-purple:hover i.fa-plus,
.box-tools .create_new:hover i.fa-plus {
  transform: scale(1.2) !important;
}

/* 2. Reload / Refresh Button (Emerald / Teal Accent) */
.box-tools .btn.bg-olive,
.box-header .btn.bg-olive,
.btn.bg-olive,
.box-tools button[data-original-title="Reload"],
.box-tools button[title="Reload"],
.box-tools button[title*="রিলোড"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.28) !important;
}

.box-tools .btn.bg-olive:hover,
.box-header .btn.bg-olive:hover,
.btn.bg-olive:hover,
.box-tools button[data-original-title="Reload"]:hover,
.box-tools button[title="Reload"]:hover,
.box-tools button[title*="রিলোড"]:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

.box-tools .btn i.fa-refresh,
.box-header .btn i.fa-refresh,
.btn.bg-olive i.fa-refresh {
  font-size: 12px !important;
  margin: 0 !important;
  display: inline-block !important;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.box-tools .btn:hover i.fa-refresh,
.box-header .btn:hover i.fa-refresh,
.btn.bg-olive:hover i.fa-refresh {
  transform: rotate(180deg) !important;
}

/* ==========================================================================
   Dark Theme Overrides for Box-Tools Buttons
   ========================================================================== */

/* Dark Theme: Add New [+] Button */
[data-theme="dark"] .box-tools .btn.bg-purple,
[data-theme="dark"] .box-header .btn.bg-purple,
[data-theme="dark"] .btn.bg-purple:not(.btn-xs),
[data-theme="dark"] .box-tools .create_new,
[data-theme="dark"] .box-header .create_new {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22) 0%, rgba(99, 102, 241, 0.3) 100%) !important;
  border: 1.5px solid #8b5cf6 !important;
  color: #c4b5fd !important;
  box-shadow: none !important;
}

[data-theme="dark"] .box-tools .btn.bg-purple:hover,
[data-theme="dark"] .box-header .btn.bg-purple:hover,
[data-theme="dark"] .btn.bg-purple:not(.btn-xs):hover,
[data-theme="dark"] .box-tools .create_new:hover,
[data-theme="dark"] .box-header .create_new:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
  border-color: #a78bfa !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.5) !important;
  transform: translateY(-1.5px) !important;
}

[data-theme="dark"] .box-tools .btn.bg-purple:hover i.fa-plus,
[data-theme="dark"] .box-header .btn.bg-purple:hover i.fa-plus,
[data-theme="dark"] .box-tools .create_new:hover i.fa-plus {
  color: #ffffff !important;
}

/* Dark Theme: Reload [⟳] Button */
[data-theme="dark"] .box-tools .btn.bg-olive,
[data-theme="dark"] .box-header .btn.bg-olive,
[data-theme="dark"] .btn.bg-olive,
[data-theme="dark"] .box-tools button[data-original-title="Reload"],
[data-theme="dark"] .box-tools button[title="Reload"],
[data-theme="dark"] .box-tools button[title*="রিলোড"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.28) 100%) !important;
  border: 1.5px solid #10b981 !important;
  color: #6ee7b7 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .box-tools .btn.bg-olive:hover,
[data-theme="dark"] .box-header .btn.bg-olive:hover,
[data-theme="dark"] .btn.bg-olive:hover,
[data-theme="dark"] .box-tools button[data-original-title="Reload"]:hover,
[data-theme="dark"] .box-tools button[title="Reload"]:hover,
[data-theme="dark"] .box-tools button[title*="রিলোড"]:hover {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-1.5px) !important;
}

[data-theme="dark"] .box-tools .btn.bg-olive:hover i.fa-refresh,
[data-theme="dark"] .box-header .btn.bg-olive:hover i.fa-refresh,
[data-theme="dark"] .btn.bg-olive:hover i.fa-refresh {
  color: #ffffff !important;
}

/* ==========================================================================
   25. Accounting Reports, Financial Tables & Universal High-Contrast Themes
   ========================================================================== */

/* Universal bg-gray & bg-gray-light contrast fix */
.bg-gray,
.color-palette.bg-gray {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
.bg-gray td,
.bg-gray th,
.bg-gray span,
.bg-gray div,
.bg-gray b,
.bg-gray strong {
  color: #0f172a !important;
}

.bg-gray-light {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}
.bg-gray-light td,
.bg-gray-light th,
.bg-gray-light span,
.bg-gray-light div,
.bg-gray-light h1,
.bg-gray-light h2,
.bg-gray-light h3,
.bg-gray-light h4,
.bg-gray-light h5 {
  color: #1e293b !important;
}

/* Dark Mode Overrides for bg-gray & bg-gray-light */
[data-theme="dark"] .bg-gray,
[data-theme="dark"] .color-palette.bg-gray {
  background-color: #162d4a !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .bg-gray td,
[data-theme="dark"] .bg-gray th,
[data-theme="dark"] .bg-gray span,
[data-theme="dark"] .bg-gray div,
[data-theme="dark"] .bg-gray b,
[data-theme="dark"] .bg-gray strong {
  color: #f8fafc !important;
}

[data-theme="dark"] .bg-gray-light {
  background-color: #0f233a !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .bg-gray-light td,
[data-theme="dark"] .bg-gray-light th,
[data-theme="dark"] .bg-gray-light span,
[data-theme="dark"] .bg-gray-light div,
[data-theme="dark"] .bg-gray-light h1,
[data-theme="dark"] .bg-gray-light h2,
[data-theme="dark"] .bg-gray-light h3,
[data-theme="dark"] .bg-gray-light h4,
[data-theme="dark"] .bg-gray-light h5 {
  color: #f1f5f9 !important;
}

/* Info Box Color Variants: High Contrast in Light & Dark Mode */
.info-box.bg-aqua,
.info-box.bg-blue {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}
.info-box.bg-green,
.info-box.bg-olive {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
}
.info-box.bg-red,
.info-box.bg-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}
.info-box.bg-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border-color: #8b5cf6 !important;
}
.info-box.bg-yellow,
.info-box.bg-orange {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border-color: #f59e0b !important;
}

.info-box[class*="bg-"] .info-box-text,
.info-box[class*="bg-"] .info-box-number,
.info-box[class*="bg-"] .progress-description {
  color: #ffffff !important;
}
.info-box[class*="bg-"] .info-box-icon {
  background: rgba(0, 0, 0, 0.16) !important;
  color: #ffffff !important;
}

/* Semantic Accounting Table Row Classes */
.table-total-row,
tr.table-total-row,
tr.table-total-row > td,
tr.table-total-row > th {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-top: 2px solid #cbd5e1 !important;
  border-bottom: 2px solid #cbd5e1 !important;
}

.table-group-header,
tr.table-group-header,
tr.table-group-header > td,
tr.table-group-header > th {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="dark"] .table-total-row,
[data-theme="dark"] tr.table-total-row,
[data-theme="dark"] tr.table-total-row > td,
[data-theme="dark"] tr.table-total-row > th {
  background-color: #162d4a !important;
  color: #f8fafc !important;
  border-top: 2px solid #2a4f7c !important;
  border-bottom: 2px solid #2a4f7c !important;
}

[data-theme="dark"] .table-group-header,
[data-theme="dark"] tr.table-group-header,
[data-theme="dark"] tr.table-group-header > td,
[data-theme="dark"] tr.table-group-header > th {
  background-color: #0f233a !important;
  color: #38bdf8 !important;
  border-bottom: 1px solid #1e3a5f !important;
}

/* AdminLTE Products List Dark Mode Fix */
[data-theme="dark"] .products-list > .item {
  background: transparent !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .products-list .product-title {
  color: #38bdf8 !important;
}

[data-theme="dark"] .products-list .product-description {
  color: var(--text-muted) !important;
}

/* ==========================================================================
   Tally Action Dock / Right Button Bar (FnF Shop Style)
   ========================================================================== */
.tally-action-dock {
  position: fixed !important;
  top: 50px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 220px !important;
  background-color: #071526 !important;
  border-left: 1px solid #142e4e !important;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.45) !important;
  z-index: 1045 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: var(--font-main);
  user-select: none;
}

[data-theme="light"] .tally-action-dock,
html:not([data-theme="dark"]) .tally-action-dock {
  background-color: #0d1e34 !important;
  border-left: 1px solid #1e3a5f !important;
  box-shadow: -4px 0 20px rgba(15, 23, 42, 0.25) !important;
}

/* Dock Open State */
body.tally-dock-open .tally-action-dock {
  transform: translateX(0) !important;
}

@media (min-width: 1200px) {
  body.tally-dock-open .content-wrapper,
  body.tally-dock-open .main-footer {
    margin-right: 220px !important;
    transition: margin-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Dock Header */
.tally-dock-header {
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #040e1b;
  border-bottom: 1px solid #142e4e;
}

[data-theme="light"] .tally-dock-header,
html:not([data-theme="dark"]) .tally-dock-header {
  background-color: #edf2f7;
  border-bottom: 1px solid #cbd5e1;
}

.tally-dock-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #94a3b8;
  text-transform: uppercase;
}

[data-theme="light"] .tally-dock-title,
html:not([data-theme="dark"]) .tally-dock-title {
  color: #334155;
}

.tally-dock-close {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  transition: all 0.2s ease;
  line-height: 1;
}

.tally-dock-close:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Dock Body */
.tally-dock-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 20px;
}

.tally-dock-body::-webkit-scrollbar {
  width: 4px;
}
.tally-dock-body::-webkit-scrollbar-thumb {
  background: #1e3a5f;
  border-radius: 2px;
}

.tally-dock-section {
  margin-bottom: 14px;
}

.tally-dock-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #64748b;
  text-align: center;
  padding: 8px 0 6px 0;
  text-transform: uppercase;
  border-top: 1px dashed #142e4e;
  margin-top: 8px;
}

[data-theme="light"] .tally-dock-section-title,
html:not([data-theme="dark"]) .tally-dock-section-title {
  color: #64748b;
  border-top-color: #cbd5e1;
}

.tally-dock-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Dock Buttons */
.tally-dock-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 10px;
  border-radius: 2px;
  text-decoration: none !important;
  background: rgba(11, 26, 46, 0.85);
  border: 1px solid #142e4e;
  transition: all 0.15s ease;
}

[data-theme="light"] .tally-dock-btn,
html:not([data-theme="dark"]) .tally-dock-btn {
  background: #ffffff;
  border-color: #d1dbe8;
}

.tally-dock-btn .dock-btn-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.1px;
}

.tally-dock-btn .dock-btn-badge {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: 2px;
  background: #030b14;
  border: 1px solid #b45309;
  color: #f59e0b;
  line-height: 1.2;
}

[data-theme="light"] .tally-dock-btn .dock-btn-badge,
html:not([data-theme="dark"]) .tally-dock-btn .dock-btn-badge {
  background: #f1f5f9;
  border-color: #d97706;
  color: #b45309;
}

/* Color Accent Variations matching fnfshop.com */
/* Cyan: Date, Receipt */
.dock-btn-cyan {
  border-color: #0284c7 !important;
}
.dock-btn-cyan .dock-btn-label {
  color: #38bdf8;
}
.dock-btn-cyan:hover {
  background: rgba(2, 132, 199, 0.22) !important;
  border-color: #38bdf8 !important;
  transform: translateX(-2px);
}

/* Blue: Company, Day Book, Reports */
.dock-btn-blue {
  border-color: #1d4ed8 !important;
}
.dock-btn-blue .dock-btn-label {
  color: #60a5fa;
}
.dock-btn-blue:hover {
  background: rgba(29, 78, 216, 0.22) !important;
  border-color: #60a5fa !important;
  transform: translateX(-2px);
}

/* Purple: Payment */
.dock-btn-purple {
  border-color: #7c3aed !important;
}
.dock-btn-purple .dock-btn-label {
  color: #c084fc;
}
.dock-btn-purple:hover {
  background: rgba(124, 58, 237, 0.22) !important;
  border-color: #c084fc !important;
  transform: translateX(-2px);
}

/* Teal: Journal */
.dock-btn-teal {
  border-color: #0d9488 !important;
}
.dock-btn-teal .dock-btn-label {
  color: #2dd4bf;
}
.dock-btn-teal:hover {
  background: rgba(13, 148, 136, 0.22) !important;
  border-color: #2dd4bf !important;
  transform: translateX(-2px);
}

/* Green: Sales (F8) */
.dock-btn-green {
  border-color: #059669 !important;
}
.dock-btn-green .dock-btn-label {
  color: #34d399;
}
.dock-btn-green:hover {
  background: rgba(5, 150, 105, 0.22) !important;
  border-color: #34d399 !important;
  transform: translateX(-2px);
}

/* Orange: Purchase (F9) */
.dock-btn-orange {
  border-color: #ea580c !important;
}
.dock-btn-orange .dock-btn-label {
  color: #fb923c;
}
.dock-btn-orange:hover {
  background: rgba(234, 88, 12, 0.22) !important;
  border-color: #fb923c !important;
  transform: translateX(-2px);
}

/* Active Dock Toggle in Header */
.btn-tally-dock-toggle.active {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}