/* ============================================
   GLOBAL AND SIDEBAR STYLES - Shared Across All Pages
   ============================================ */

/* Global Box Sizing and Layout */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  -webkit-touch-callout: none;
  /* Removed user-select: none for better cursor performance */
  scroll-behavior: smooth;
}

body {
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Main Flex Container */
.flex.h-screen {
  display: flex !important;
  height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Mobile Meta Viewport Compatibility */
@supports (display: flex) {
  body {
    display: flex;
    flex-direction: row;
    min-width: 100vw; /* Prevent body from shrinking smaller than viewport */
  }

  /* Ensure the main layout wrapper fills available width in flex layout */
  body > .flex {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Sidebar Header Layout */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Sidebar Toggle Button */
.sidebar-toggle {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 20px;
  padding: 8px 12px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  /* Keep user-select: none only for buttons to prevent text selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  -webkit-touch-callout: none;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  transform: scale(1.05);
}

.sidebar-toggle:active {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0.95);
}

.sidebar-toggle:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .sidebar-toggle {
    font-size: 24px;
    padding: 10px 14px;
    min-width: 48px;
    min-height: 48px;
    background: rgba(30, 41, 59, 0.95);
    border: 2px solid rgba(96, 165, 250, 0.3);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .sidebar-toggle:hover {
    background: rgba(30, 41, 59, 1);
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

/* Sidebar Navigation Base Styles */
nav {
  margin: 0 !important;
  padding: 6px !important;
  width: 256px;
  min-width: 256px;
  max-width: 256px;
  height: 100vh;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  position: relative;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Override Tailwind classes on sidebar */
nav.w-64 {
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
}

nav.p-6 {
  padding: 6px !important;
}

nav.overflow-y-auto {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

main {
  margin: 0;
  flex: 1;
}

/* Sidebar Collapsed State (Data Attribute) */
html[data-sidebar-collapsed="true"] nav {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  overflow: hidden !important;
  flex-direction: column;
}

html[data-sidebar-collapsed="true"] nav .sidebar-header {
  flex-direction: column;
}

html[data-sidebar-collapsed="true"] nav h1 {
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
}

html[data-sidebar-collapsed="true"] nav ul {
  gap: 0;
}

html[data-sidebar-collapsed="true"] nav li button {
  font-size: 12px;
  padding: 4px;
}

html[data-sidebar-collapsed="true"] nav .menu-text {
  display: none;
}

html[data-sidebar-collapsed="true"] nav .menu-symbol {
  display: inline;
}

html[data-sidebar-collapsed="true"] nav .mb-6 {
  margin-bottom: 12px;
}

html[data-sidebar-collapsed="true"] nav .pb-4 {
  padding-bottom: 8px;
}

html[data-sidebar-collapsed="true"] nav p {
  font-size: 10px;
  text-align: center;
}

html[data-sidebar-collapsed="true"] nav #userInfo {
  display: none;
}

/* Sidebar Transition Class */
nav.sidebar-transitioning {
  transition: width 0.2s ease !important;
}

/* Sidebar Collapsed Class (JavaScript Toggle) */
nav.collapsed {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding: 4px !important;
}

nav.collapsed .sidebar-header {
  flex-direction: column;
}

nav.collapsed h1 {
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
}

nav.collapsed ul {
  gap: 0;
}

nav.collapsed li button {
  font-size: 12px;
  padding: 4px;
}

nav.collapsed .menu-text {
  display: none;
}

nav.collapsed .menu-symbol {
  display: inline;
}

nav.collapsed .mb-6 {
  margin-bottom: 12px;
}

nav.collapsed .pb-4 {
  padding-bottom: 8px;
}

nav.collapsed p {
  font-size: 10px;
  text-align: center;
}

nav.collapsed #userInfo {
  display: none;
}

/* Menu Item Symbol Styling */
.menu-symbol {
  margin-right: 8px;
}

/* Menu Toggle and Nested Menu Styles */
.menu-toggle {
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

.menu-toggle .toggle-icon {
  transition: transform 0.3s ease;
  display: inline-block;
  min-width: 16px;
}

.menu-toggle.expanded .toggle-icon {
  transform: rotate(90deg);
}

.nested-menu {
  display: none;
  flex-direction: column;
}

.nested-menu.expanded {
  display: flex;
}

/* Main Content Layout */
main {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  padding: 4px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: #f3f4f6 !important;
}

/* Overlay for mobile sidebar */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, pointer-events 0.25s ease;
}

/* Mobile Responsive Sidebar */
@media (max-width: 768px) {
  .sidebar-toggle {
    display: block;
  }

  nav {
    margin: 0 !important;
    padding: 6px !important;
    position: fixed !important;
    left: -256px;
    top: 0;
    height: 100vh !important;
    width: 256px !important;
    z-index: 9999;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: left;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  nav.show {
    left: 0 !important;
  }

  nav.open {
    left: 0 !important;
  }

  nav.collapsed {
    width: 80px !important;
  }

  nav.collapsed .sidebar-header {
    flex-direction: column;
  }

  nav.collapsed h1 {
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
  }

  nav.collapsed .mb-6 {
    margin-bottom: 12px;
  }

  nav.collapsed .pb-4 {
    padding-bottom: 8px;
  }

  nav.collapsed p {
    font-size: 10px;
    text-align: center;
  }

  /* CRITICAL FIX: Hide username on mobile, show only business name in sidebar */
  nav #userInfo {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.6);
  }

  nav #userInfo p {
    margin: 4px 0;
    line-height: 1.4;
  }

  nav #loggedBusiness {
    font-size: 14px;
    font-weight: 600;
    color: #60a5fa;
    display: block;
  }

  nav #loggedGSTIN {
    font-size: 11px;
    color: #94a3b8;
    display: block;
  }

  /* Hide username if present on mobile */
  nav #loggedUserName,
  nav .user-name,
  nav .username {
    display: none !important;
  }

  nav.collapsed #userInfo {
    display: none;
  }

  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, pointer-events 0.25s ease;
    will-change: opacity, pointer-events;
  }

  .overlay.open {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  .overlay.show {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  main {
    height: auto !important;
    min-height: 100vh;
    width: 100%;
    padding: 12px !important;
  }

  /* Menu items: larger touch targets */
  nav ul li {
    margin: 4px 0;
  }

  nav ul li button {
    padding: 12px 12px;
    min-height: 44px;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: rgba(96, 165, 250, 0.2);
  }

  nav ul li button:active {
    background: rgba(96, 165, 250, 0.15);
  }

  /* Nested menus: better visibility on mobile */
  nav .nested-menu {
    display: none !important;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  nav .nested-menu.expanded {
    display: flex !important;
  }

  nav .nested-menu li {
    margin-left: 24px;
  }

  nav .nested-menu li + li {
    margin-top: 4px;
  }

  nav .nested-menu li button,
  nav .nested-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 12px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  nav .nested-menu li button:hover,
  nav .nested-menu li a:hover {
    background: rgba(96, 165, 250, 0.1);
  }

  nav .nested-menu li button:active,
  nav .nested-menu li a:active {
    background: rgba(96, 165, 250, 0.2);
  }

  nav.collapsed .nested-menu {
    padding-left: 0;
    border-left: none;
  }

  nav.collapsed .nested-menu li {
    margin-left: 0;
  }

  nav ul li .menu-symbol {
    min-width: 20px;
    text-align: center;
  }

  nav ul li .menu-text {
    flex: 1;
  }

  /* Menu toggle icon: clearer indication */
  nav .menu-toggle .toggle-icon {
    font-size: 16px;
    transition: transform 0.2s ease;
  }

  nav .nested-menu li button:hover {
    background: rgba(96, 165, 250, 0.1);
  }

  nav .nested-menu li button:active {
    background: rgba(96, 165, 250, 0.2);
  }

  /* Menu toggle icon: clearer indication */
  nav .menu-toggle .toggle-icon {
    font-size: 16px;
    transition: transform 0.2s ease;
  }

  nav .menu-toggle.expanded .toggle-icon {
    transform: rotate(90deg);
  }
}

/* ============================================
   MOBILE RESPONSIVE STYLES - Improved Mobile UX
   ============================================ */
@media (max-width: 768px) {
  /* Mobile-friendly page title layout */
  h1.page-title {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
    font-size: 1.25rem !important;
    margin-bottom: 16px !important;
    margin-top: 4px !important;
    padding: 0 12px !important;
  }
  
  h1.page-title img {
    width: 100px !important;
    height: 80px !important;
    object-fit: contain;
  }

  /* Disable auto-zoom on iOS input focus */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 14px !important;
    min-height: 48px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    width: 100% !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff !important;
  }

  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23334155' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px !important;
  }

  input[type="text"]:focus,
  input[type="number"]:focus,
  input[type="date"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="search"]:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
  }

  textarea {
    min-height: 120px !important;
    font-family: inherit !important;
    resize: vertical;
  }

  /* Improve button sizing and touch targets on mobile */
  button {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    border-radius: 6px !important;
    font-weight: 500;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  button:active {
    transform: scale(0.98);
  }

  /* Responsive table sizing */
  table {
    font-size: 13px !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }
  
  table th,
  table td {
    padding: 8px 6px !important;
    border: 1px solid #e2e8f0 !important;
  }

  table th {
    background-color: #f1f5f9 !important;
    font-weight: 600 !important;
  }

  /* Make main content area responsive */
  main {
    padding: 12px !important;
    margin: 0 !important;
  }

  /* Responsive form sections */
  .totals-section {
    padding: 14px !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.06) !important;
  }

  .totals-section table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
  }

  .totals-section td,
  .totals-section th {
    border: none !important;
  }

  .totals-section tr:not(:last-child) td {
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  }

  .form-section {
    margin-bottom: 16px !important;
    padding: 12px !important;
    border-radius: 6px !important;
  }

  .gst-inline {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .gst-inline > div {
    width: 100% !important;
  }

  /* Stack address sections vertically on mobile */
  #billAddr, #shipAddr, #supplierAddr, #deliveryAddr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    border-radius: 6px !important;
  }

  #billAddr textarea, #shipAddr textarea, #supplierAddr textarea, #deliveryAddr textarea {
    width: 100% !important;
    min-height: 100px !important;
    font-size: 16px !important;
  }

  /* Amount in words: full width on mobile */
  #amountInWords {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 !important;
    padding: 12px !important;
    border-radius: 6px !important;
    word-wrap: break-word !important;
  }

  /* Terms & Conditions: full width on mobile */
  #termsAndConditions, .terms-conditions {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 !important;
    padding: 12px !important;
    border-radius: 6px !important;
  }

  #termsAndConditions textarea, .terms-conditions textarea {
    width: 100% !important;
    min-height: 100px !important;
    font-size: 16px !important;
  }

  /* Horizontal scrolling tables: add scroll wrapper */
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 12px -12px;
    padding: 0 12px;
  }

  /* Small text for labels on mobile */
  label {
    font-size: 14px !important;
    font-weight: 500 !important;
    display: block !important;
    margin-bottom: 6px !important;
  }

  /* Remove excess padding on form wrappers */
  .form-group,
  .input-group,
  .field-group {
    margin-bottom: 14px !important;
  }

  /* Action buttons: full width on mobile when in a row */
  .button-group {
    display: flex;
    flex-direction: column !important;
    gap: 10px !important;
  }

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

  /* Ensure content doesn't overflow screen */
  body {
    overflow-x: hidden !important;
  }

  /* Touch-friendly spacing */
  * + * {
    margin-top: 0; /* Remove any default margins that might stack */
  }

  /* Prevent text selection issues */
  .no-select {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Improve readability */
  p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* Print-specific utility classes */
.print-only {
  display: none;
}

@media print {
  @page {
    size: A4;
    margin: 12mm 10mm;
    orphans: 1;
    widows: 1;
  }

  html,
  body {
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt !important;
    line-height: 1.3 !important;
  }

  body > *:not(.flex) {
    display: none !important;
  }

  .flex > nav,
  .flex > .sidebar,
  .sidebar-toggle,
  .overlay,
  .menu-toggle,
  .nested-menu,
  .page-title,
  .page-header,
  .page-actions,
  .action-buttons,
  .toolbar,
  .topbar,
  .mobile-menu,
  .logo,
  .header-logo,
  .app-logo,
  .SATP-logo,
  .print-hide,
  .no-print,
  .hide-on-print,
  [id*="Modal"],
  .modal,
  .modal-backdrop,
  .dropdown,
  .dropdown-menu,
  .tooltip,
  .toast,
  .toast-container,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  button,
  .button,
  .btn {
    display: none !important;
  }

  .flex > main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  h1.page-title,
  h1.page-title img,
  .page-title,
  .page-heading,
  .page-name,
  .page-type,
  .invoice-title,
  .receipt-title,
  .voucher-title,
  .voucher-header,
  .header-title,
  .title-bar,
  .page-header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  img[alt*="SATP Billing Logo"],
  img[src*="logo.jpg"],
  .SATP-logo,
  .brand-logo,
  .site-logo {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  html,
  body,
  .flex.h-screen,
  .flex > main {
    font-size: 9pt !important;
    line-height: 1.2 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    min-width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  body {
    width: auto !important;
  }

  .flex.h-screen {
    display: block !important;
  }

  * {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .table-wrapper,
  .overflow-x-auto {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .flex,
  .flex.items-center,
  .flex.justify-end,
  .flex.justify-between,
  .flex.gap-2,
  .flex.gap-3,
  .flex.gap-4,
  .flex.mb-2,
  .flex.mb-3,
  .flex.mb-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4pt !important;
  }

  .flex > label,
  .flex > input,
  .flex > div,
  .flex > span,
  .flex > select,
  .flex > textarea {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .flex.items-center label,
  .flex.items-center .field-label,
  .flex.items-center .input-group {
    flex: 0 0 auto !important;
    margin-right: 4pt !important;
  }

  table {
    max-width: 100% !important;
    width: 100% !important;
    table-layout: fixed !important;
    overflow: hidden !important;
    word-break: break-word !important;
    min-width: 0 !important;
  }

  th,
  td {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    min-width: 0 !important;
  }

  #receiptDetailsTable th:last-child,
  #receiptDetailsTable td:last-child,
  #paymentDetailsTable th:last-child,
  #paymentDetailsTable td:last-child,
  #expenseDetailsTable th:last-child,
  #expenseDetailsTable td:last-child,
  .remove-btn,
  .action-col,
  .delete-col,
  .remove-col {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    border: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  #addressesContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8pt !important;
    width: 100% !important;
    margin-bottom: 8pt !important;
  }

  .grid.grid-cols-2,
  .grid.grid-cols-4,
  .grid.grid-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8pt !important;
    width: 100% !important;
  }

  #addressesContainer > section {
    display: inline-block !important;
    width: calc(50% - 4pt) !important;
    vertical-align: top !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #addressesContainer > section:last-child {
    margin-right: 0 !important;
  }

  #addressesContainer h3 {
    margin-top: 0 !important;
    margin-bottom: 6pt !important;
  }

  #companyName,
  #companyAddress,
  #companyAddressExtended,
  #companyMobileDisplay,
  #companyEmailDisplay,
  #gstinSection,
  #loggedGSTIN,
  #companyBusinessName,
  #companyAuthorisedSignatoryField,
  #companySignatoryDesignation,
  #companySignImageContainer,
  #companySignImage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  #companyAuthorisedSignatoryField,
  #companyBusinessName {
    white-space: nowrap !important;
  }

  #companySignImage {
    max-width: 120px !important;
    height: auto !important;
  }

  #billAddr,
  #shipAddr,
  #supplierAddr,
  #deliveryAddr {
    display: inline-block !important;
    width: calc(50% - 4pt) !important;
    vertical-align: top !important;
    margin: 0 4pt 8pt 0 !important;
    padding: 6pt !important;
    border: 1px solid #000 !important;
    box-sizing: border-box !important;
    page-break-inside: avoid !important;
  }

  #billAddr:last-child,
  #shipAddr:last-child,
  #supplierAddr:last-child,
  #deliveryAddr:last-child {
    margin-right: 0 !important;
  }

  #billAddr textarea,
  #shipAddr textarea,
  #supplierAddr textarea,
  #deliveryAddr textarea {
    width: 100% !important;
    min-height: 80px !important;
    font-size: 8.5pt !important;
  }

  /* Explicitly hide shared injected overlays and series modals in print */
  #addSeriesModal,
  #addPartyModal,
  #autoReceiptModal,
  #autoPaymentModal,
  #masterPreview,
  #masterPreviewInner,
  .fixed,
  .backdrop,
  .overlay,
  .modal,
  .modal-backdrop,
  .popup,
  .popover,
  .drawer,
  .dialog,
  [class*="Modal"],
  [class*="modal"],
  [class*="overlay"],
  [class*="dialog"],
  [class*="popup"],
  [class*="popover"],
  [class*="drawer"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Hide delete/action columns in item tables */
  #invoiceTable th:last-child,
  #invoiceTable td:last-child,
  #purchaseTable th:last-child,
  #purchaseTable td:last-child,
  #creditNoteTable th:last-child,
  #creditNoteTable td:last-child,
  #debitNoteTable th:last-child,
  #debitNoteTable td:last-child,
  #receiptTable th:last-child,
  #receiptTable td:last-child,
  #paymentTable th:last-child,
  #paymentTable td:last-child,
  #expenseTable th:last-child,
  #expenseTable td:last-child,
  #quotationTable th:last-child,
  #quotationTable td:last-child,
  #purchaseOrderTable th:last-child,
  #purchaseOrderTable td:last-child,
  #deliveryChallanTable th:last-child,
  #deliveryChallanTable td:last-child,
  .action-col,
  .delete-col,
  .remove-col {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    page-break-inside: auto !important;
    margin-bottom: 8pt !important;
    font-size: 9pt !important;
  }

  thead {
    display: table-header-group !important;
  }

  tfoot {
    display: table-footer-group !important;
  }

  tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }

  th,
  td {
    border: 1px solid #000 !important;
    padding: 4pt 6pt !important;
    font-size: 9pt !important;
    line-height: 1.25 !important;
    vertical-align: top !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .subtotal-label,
  .subtotal-value,
  .totals-section,
  .totals-section table,
  .totals-section td,
  .totals-section th {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  [style*="min-width"],
  [style*="width"] {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  th {
    background: #f4f4f4 !important;
    font-weight: bold !important;
  }

  input,
  select,
  textarea {
    background: transparent !important;
    border: none !important;
    color: #000 !important;
    font-size: 9pt !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  p,
  span,
  div,
  label {
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid !important;
    font-size: 9pt !important;
    line-height: 1.3 !important;
  }

  .no-break,
  .avoid-page-break,
  .totals-section,
  .form-section,
  header,
  .voucher-summary {
    page-break-inside: avoid !important;
  }

  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  html,
  body,
  .flex > main {
    overflow-x: hidden !important;
  }

  .flex {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  .grid {
    display: grid !important;
    grid-auto-columns: minmax(0, 1fr) !important;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .gap-2,
  .gap-4,
  .gap-6,
  [class*="gap-"] {
    gap: 4pt !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Maintain grid layout for terms & conditions and totals sections */
  .grid.grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8pt !important;
    width: 100% !important;
    margin-bottom: 12pt !important;
  }

  .grid.grid-cols-4 > section:first-child {
    grid-column: span 2 !important;
  }

  .grid.grid-cols-4 > section:nth-child(2) {
    grid-column: span 2 !important;
  }

  /* Terms & Conditions section print layout */
  .grid.grid-cols-4 > section:first-child textarea {
    width: 100% !important;
    height: 120pt !important;
    border: 1px solid #ccc !important;
    padding: 6pt !important;
    font-size: 8pt !important;
    line-height: 1.2 !important;
    margin-bottom: 8pt !important;
  }

  /* Bank details grid in terms & conditions */
  .grid.grid-cols-4 > section:first-child .grid.grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
    margin-top: 8pt !important;
    padding: 8pt !important;
    background: #f0f8ff !important;
    border: 1px solid #add8e6 !important;
    border-radius: 4pt !important;
  }

  /* Totals section layout - optimized for print */
  .grid.grid-cols-4 > section:nth-child(2) {
    display: flex !important;
    width: 100% !important;
  }

  /* Totals section table print layout */
  .totals-section table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #f5f5f5 !important;
    font-size: 8.5pt !important;
  }

  .totals-section td,
  .totals-section th {
    border: 1px solid #000 !important;
    padding: 8pt 10pt !important;
    font-size: 9pt !important;
    min-height: 24pt !important;
    vertical-align: middle !important;
  }

  .totals-section input,
  .totals-section select {
    width: 100% !important;
    font-size: 9pt !important;
    padding: 4pt 6pt !important;
    border: 1px solid #999 !important;
    background: transparent !important;
  }

  .totals-section .grand-total-row {
    background: #e6f3ff !important;
    font-weight: bold !important;
    font-size: 11pt !important;
  }

  .totals-section .grand-total-row td {
    padding: 12pt 10pt !important;
    font-size: 10pt !important;
  }


  /* Hide broken signature images unless actually added */
  #companySignImage {
    display: none !important;
  }

  #companySignImage[src]:not([src=""]) {
    display: block !important;
    max-width: 120px !important;
    height: auto !important;
    margin-top: 8pt !important;
  }

  /* Hide address sections if empty - simplified approach */
  #billAddr textarea:placeholder-shown:not(:focus),
  #shipAddr textarea:placeholder-shown:not(:focus),
  #supplierAddr textarea:placeholder-shown:not(:focus),
  #deliveryAddr textarea:placeholder-shown:not(:focus),
  #dispatchAddr textarea:placeholder-shown:not(:focus) {
    display: block !important;
  }

  /* Hide Ship To, Dispatch, Returns, and Delivery sections if empty */
  #shippingDetailsSection,
  #dispatchFromSection,
  #returnsDetailsSection,
  #deliveryDetailsSection {
    display: none !important;
  }

  /* Hide shipping section if page-level print logic marks it empty */
  body.hide-shipping-details #shippingDetailsSection {
    display: none !important;
  }

  /* Hide delivery section if page-level print logic marks it empty */
  body.hide-delivery-details #deliveryDetailsSection {
    display: none !important;
  }

  /* Hide returns section if page-level print logic marks it empty */
  body.hide-returns-details #returnsDetailsSection {
    display: none !important;
  }

  /* Show sections only if they contain filled inputs - using :has() where supported */
  #shippingDetailsSection:has(input:not([value=""]):not(:placeholder-shown)),
  #shippingDetailsSection:has(textarea:not([value=""]):not(:placeholder-shown)),
  #dispatchFromSection:has(input:not([value=""]):not(:placeholder-shown)),
  #dispatchFromSection:has(textarea:not([value=""]):not(:placeholder-shown)),
  #returnsDetailsSection:has(input:not([value=""]):not(:placeholder-shown)),
  #returnsDetailsSection:has(textarea:not([value=""]):not(:placeholder-shown)),
  #deliveryDetailsSection:has(input:not([value=""]):not(:placeholder-shown)),
  #deliveryDetailsSection:has(textarea:not([value=""]):not(:placeholder-shown)) {
    display: block !important;
  }

  /* Fallback: Show sections if they have the 'filled' class (can be added by JavaScript) */
  #shippingDetailsSection.filled,
  #dispatchFromSection.filled,
  #returnsDetailsSection.filled,
  #deliveryDetailsSection.filled {
    display: block !important;
  }

  /* Additional spacing reductions */
  .voucher-content,
  .main-content,
  .content-area {
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-section,
  .form-section {
    margin-bottom: 4pt !important;
    padding-bottom: 2pt !important;
  }

  /* Compact totals section */
  .totals-section {
    margin-top: 8pt !important;
    margin-bottom: 4pt !important;
  }

  /* Reduce grid gaps */
  .grid {
    gap: 4pt !important;
  }

  /* Compact flex spacing */
  .flex {
    gap: 2pt !important;
  }

  /* Reduce paragraph margins */
  p {
    margin: 2pt 0 !important;
  }

  /* Compact list spacing */
  ul, ol {
    margin: 2pt 0 !important;
    padding-left: 8pt !important;
  }

  li {
    margin-bottom: 1pt !important;
  }


  /* Reduce unnecessary spacing in print */
  .mb-6,
  .mb-8,
  .mb-4,
  .mt-4,
  .mt-6,
  .mt-8,
  .py-3,
  .py-4,
  .px-3,
  .px-4,
  .p-4 {
    margin-bottom: 4pt !important;
    margin-top: 4pt !important;
    padding: 2pt 4pt !important;
  }

  section.mb-6,
  section.mb-8,
  div.mb-6,
  div.mb-8 {
    margin-bottom: 8pt !important;
  }

  .gap-6,
  .gap-4,
  .gap-2 {
    gap: 4pt !important;
  }

  /* Compact table spacing */
  table th,
  table td {
    padding: 2pt 4pt !important;
  }

  /* Reduce section margins */
  section,
  .section {
    margin-bottom: 6pt !important;
  }

  /* Compact form elements */
  .form-group,
  .input-group,
  .field-group {
    margin-bottom: 2pt !important;
  }

  /* Reduce header margins */
  h1, h2, h3, h4, h5, h6 {
    margin: 2pt 0 4pt 0 !important;
  }


  /* Indian GST and tax formatting */
  .gst-number,
  .gstin-display {
    font-family: monospace !important;
    font-size: 9pt !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  .tax-amount {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Indian invoice numbering format */
  .invoice-no,
  .voucher-no {
    font-weight: bold !important;
    font-size: 11pt !important;
    text-transform: uppercase !important;
  }

  /* Round seal and signature positioning */
  .round-seal,
  .signature-section {
    text-align: center !important;
    margin-top: 16pt !important;
  }

  .authorised-signatory {
    border-top: 1px solid #000 !important;
    width: 200px !important;
    margin: 16pt auto 0 auto !important;
    text-align: center !important;
    font-size: 9pt !important;
    padding-top: 4pt !important;
  }

  /* Terms and conditions formatting */
  #termsAndConditions {
    font-size: 8pt !important;
    line-height: 1.2 !important;
    min-height: 80pt !important;
  }

  /* Subtotal and totals alignment */
  .subtotal-row,
  .total-row {
    border-top: 2px solid #000 !important;
    font-weight: bold !important;
  }

  .grand-total-row {
    border-top: 3px double #000 !important;
    background: #fff !important;
  }

  /* Optimize table layout for print */
  .table-container,
  .table-wrapper {
    margin: 4pt 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Ensure proper page breaks */
  .page-break {
    page-break-before: always !important;
  }

  .no-page-break {
    page-break-inside: avoid !important;
  }

  /* Final spacing optimizations */
  .print-compact {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ensure items table uses full width efficiently */
  #invoiceTable,
  #purchaseTable,
  #creditNoteTable,
  #debitNoteTable,
  #quotationTable,
  #purchaseOrderTable,
  #deliveryChallanTable {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
}

/* Unique table styles for Sales and Purchase Vouchers */
#invoiceTable, #purchaseTable {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
  background: #fff;
  font-size: 1rem;
}

#invoiceTable th, #invoiceTable td,
#purchaseTable th, #purchaseTable td {
  padding: 8px 6px;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
  text-align: left;
  word-break: break-word;
}

#invoiceTable th, #purchaseTable th {
  background: #f8fafc;
  font-weight: 600;
  font-size: 1rem;
}

/* S.No. and Delete column alignment */
#invoiceTable th:first-child, #invoiceTable td:first-child,
#purchaseTable th:first-child, #purchaseTable td:first-child {
  text-align: center;
}
#invoiceTable th:last-child, #invoiceTable td:last-child,
#purchaseTable th:last-child, #purchaseTable td:last-child {
  text-align: center;
  padding: 0 2px;
  width: 2%;
  background: none;
  border: none;
}

/* Remove border for delete column header */
#invoiceTable th:last-child, #purchaseTable th:last-child {
  border: none;
  background: none;
}

/* Items/Description column: left align, bold */
#invoiceTable th:nth-child(2), #invoiceTable td:nth-child(2),
#purchaseTable th:nth-child(2), #purchaseTable td:nth-child(2) {
  text-align: left;
  font-weight: 500;
}

/* Amount column: right align */
#invoiceTable th:nth-last-child(2), #invoiceTable td:nth-last-child(2),
#purchaseTable th:nth-last-child(2), #purchaseTable td:nth-last-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Discount select in header: compact */
/* Discount select in header: compact and center-aligned */
#invoiceTable th select, #purchaseTable th select {
  margin-left: 4px;
  padding: 2px 2px 1px 2px;
  font-size: 0.92em;
  height: 1.6em;
  min-width: 32px;
  max-width: 38px;
  vertical-align: middle;
  display: inline-block;
  text-align: center;
  text-align-last: center;
}

/* Table input fields: full width, no overflow */
#invoiceTable input, #purchaseTable input,
#invoiceTable select, #purchaseTable select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 1em;
  padding: 3px 4px;
}

/* Delete button: icon only, no border, hover effect */
#invoiceTable td:last-child button,
#purchaseTable td:last-child button {
  background: none;
  border: none;
  color: #e11d48;
  font-size: 1.1em;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.15s;
}
#invoiceTable td:last-child button:hover,
#purchaseTable td:last-child button:hover {
  color: #be123c;
}
/* Common voucher overrides to keep formatting consistent across vouchers */
/* Responsive Main Content Area - container adapts per device width
   - Desktop (>=1280px): 1200px
   - Laptop (1024-1279px): 1000px
   - Tablet (768-1023px): 900px
   - Mobile (<768px): full width with side padding
   Pages typically use classes like max-w-6xl / max-w-4xl etc.; we adapt them here.
*/
:root {
  --container-desktop: 1200px;
  --container-laptop: 1000px;
  --container-tablet: 900px;
}

@media (min-width: 1280px) {
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-7xl,
  .max-w-2xl,
  .max-w-md {
    max-width: var(--container-desktop) !important;
    width: 100% !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-7xl,
  .max-w-2xl,
  .max-w-md {
    max-width: var(--container-laptop) !important;
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-7xl,
  .max-w-2xl,
  .max-w-md {
    max-width: var(--container-tablet) !important;
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-7xl,
  .max-w-2xl,
  .max-w-md {
    max-width: 100% !important;
    padding: 0 12px !important;
    width: 100% !important;
  }
}

/* Reduce top padding so headings/logo sit closer to top across all pages */
main.p-8 { padding-top: 12px !important; padding-bottom: 12px !important; }
h1.page-title { margin-top: 0 !important; padding-top: 0 !important; }

/* Additional small header helpers to minimize top whitespace globally */
header, .page-header, .site-header {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Ensure scroll anchor snaps closer to header when using in-page anchors */
html { scroll-padding-top: 12px; }

/* Totals styling */
.subtotal-label, .subtotal-value { font-weight: 600; font-size: 0.95rem; }
.grand-total-row td { font-weight: 800; font-size: 1.05rem; }

/* Amount in words: left aligned and visible */
#amountInWords { white-space: nowrap; display: block; text-align: left; margin-top: 6px; }

/* Prevent content overflow in tables and other elements */
table { width: 100%; table-layout: auto; overflow-x: auto; }
th, td { word-wrap: break-word; overflow-wrap: break-word; }

/* Ensure text doesn't overflow containers */
p, span, div { word-wrap: break-word; overflow-wrap: break-word; }

/* Form inputs and select elements */
input, textarea, select {
  max-width: 100%;
  box-sizing: border-box;
}

/* Content Box Constraints - Prevent overflow on all devices */
main {
  max-width: 100%;
  min-width: 0; /* Allow flex children to shrink properly and avoid horizontal overflow */
  overflow-x: hidden;
  overflow-y: auto;
}

/* Ensure content boxes don't exceed viewport */
.bg-white {
  min-width: 0; /* Allow flex children to shrink below content size */
}

/* Table wrapper constraints */
div[style*="overflow-x"] {
  width: 100%;
  min-width: 0;
}

/* Ensure all tables respect container width */
table {
  table-layout: fixed;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Input and select constraints in tables */
input,
select,
textarea {
  max-width: 100%;
  box-sizing: border-box;
}