/* ============================================
   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;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


body {
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -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;
    padding-bottom: 6rem !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: 8px 0 !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;
}

/* Optional address sections - control visibility via JavaScript and 'hidden' class */
section#shippingDetailsSection,
section#dispatchFromSection,
section#returnsDetailsSection,
section#deliveryDetailsSection {
  /* Allow JavaScript to control via hidden class */
  /* Default: shown unless explicitly hidden with .hidden class */
  display: block;
  visibility: visible;
}

/* Ensure dispatch section remains hidden when toggled off */
section#dispatchFromSection.hidden {
  display: none !important;
  visibility: hidden !important;
}

/* Keep other optional address sections visible on screen even if 'hidden' is added by script */
@media screen {
  section#shippingDetailsSection.hidden,
  section#returnsDetailsSection.hidden,
  section#deliveryDetailsSection.hidden {
    display: block !important;
    visibility: visible !important;
  }
}

/* Reduce spacing in Authorised Signatory section for screen */
div.mt-6.pt-4.border-t {
  margin-top: 8px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

@media print {
  @page {
    size: A4;
    margin: 8mm 10mm;
    orphans: 2;
    widows: 2;
  }

  html,
  body {
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 9pt !important;
    line-height: 1.2 !important;
    font-family: 'Arial', sans-serif !important;
  }

  body > *:not(.flex):not(.print-only) {
    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: 1mm 1.5mm 1mm !important;
    background: #fff !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  h1.page-title,
  h1.page-title img,
  .page-title,
  .page-heading,
  .page-name,
  .page-type,
  .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;
  }

  .print-only .voucher-title,
  .print-only .invoice-title,
  .print-only .receipt-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin: 0 0 8px !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;
    width: calc(100% - 3mm) !important;
    max-width: calc(100% - 3mm) !important;
    padding: 1mm 1.5mm 1mm !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    page-break-before: avoid !important;
    page-break-inside: avoid !important;
  }

  html,
  body,
  .flex.h-screen,
  .flex > main {
    font-size: 8.5pt !important;
    line-height: 1.15 !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;
    border-collapse: collapse !important;
    margin-bottom: 6pt !important;
    font-size: 8pt !important;
  }

  th,
  td {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    min-width: 0 !important;
    border: 1px solid #000 !important;
    padding: 3pt 4pt !important;
    font-size: 8pt !important;
    line-height: 1.2 !important;
    vertical-align: top !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;
  }

  #companySignatoryDesignation {
    margin-bottom: 4px !important;
  }

  div.flex.justify-center.gap-6.mt-12.pt-8.border-t.flex-wrap,
  div.flex.flex-row.justify-center.items-center.gap-6.mt-12.pt-8.border-t.no-print {
    margin-top: 8px !important;
    padding-top: 4px !important;
  }

  #billAddr, #shipAddr, #supplierAddr, #deliveryAddr {
    display: inline-block !important;
    width: calc(50% - 1pt) !important;
    vertical-align: top !important;
    margin: 0 1pt 1pt 0 !important;
    padding: 1pt !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: 28px !important;
    font-size: 7.5pt !important;
    padding: 0.5pt !important;
    line-height: 1.05 !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: 2pt 3pt !important;
    font-size: 8pt !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

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

  [style*="min-width"],
  [style*="width"] {
    min-width: 0 !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: 7.5pt !important;
    padding: 0.5pt !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.05 !important;
  }

  p,
  span,
  div,
  label {
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid !important;
    font-size: 8pt !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !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: 3pt !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: 60pt !important;
    border: 1px solid #ccc !important;
    padding: 2pt !important;
    font-size: 7pt !important;
    line-height: 1.05 !important;
    margin-bottom: 3pt !important;
  }

  /* Bank details grid in terms & conditions - professional compact styling */
  .grid.grid-cols-4 > section:first-child .grid.grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1pt !important;
    margin-top: 2pt !important;
    padding: 1.5pt !important;
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 1pt !important;
    font-size: 7.5pt !important;
  }

  .grid.grid-cols-4 > section:first-child .grid.grid-cols-2 div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25pt !important;
  }

  .grid.grid-cols-4 > section:first-child .grid.grid-cols-2 span:first-child {
    font-weight: bold !important;
    font-size: 7pt !important;
    color: #495057 !important;
  }

  .grid.grid-cols-4 > section:first-child .grid.grid-cols-2 span:last-child {
    font-size: 7.5pt !important;
    color: #000 !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: #ffffff !important;
    font-size: 8pt !important;
    margin: 0 !important;
    border: 1px solid #000 !important;
  }

  .totals-section td {
    border: 1px solid #000 !important;
    padding: 3pt 4pt !important;
    font-size: 7.5pt !important;
    vertical-align: middle !important;
    background: #ffffff !important;
  }

  .totals-section input,
  .totals-section select {
    width: auto !important;
    font-size: 7pt !important;
    padding: 1pt 2pt !important;
    border: 1px solid #999 !important;
    background: transparent !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .totals-section .grand-total-row {
    background: #f0f8ff !important;
    font-weight: bold !important;
    font-size: 9pt !important;
    border-top: 2px solid #000 !important;
  }

  .totals-section .grand-total-row td {
    padding: 5pt 4pt !important;
    font-size: 9pt !important;
    background: #f0f8ff !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 borders in Authorised Signatory section for print */
  /* Remove top border from signatory section and bottom border after it */
  div.border-t {
    border-top: none !important;
  }

  /* Reduce spacing in Authorised Signatory section */
  div.mt-6.pt-4.border-t {
    margin-top: 2pt !important;
    padding-top: 4pt !important;
    padding-bottom: 4pt !important;
  }

  @media print {
    /* 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 - default state */
    section#shippingDetailsSection,
    section#dispatchFromSection,
    section#returnsDetailsSection,
    section#deliveryDetailsSection {
      display: none !important;
    }

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

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

  .page-section,
  .form-section {
    margin-bottom: 1pt !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Compact totals section */
  .totals-section {
    margin-top: 2pt !important;
    margin-bottom: 1pt !important;
    padding: 0 !important;
  }

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

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

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

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

  li {
    margin-bottom: 0.5pt !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: 1pt !important;
    margin-top: 1pt !important;
    padding: 0 1pt !important;
  }

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

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

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

  /* Reduce section margins */
  section,
  .section {
    margin-bottom: 1pt !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  /* Compact form elements */
  .form-group,
  .input-group,
  .field-group {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

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


  /* Indian GST and tax formatting */
  .gst-number,
  .gstin-display {
    font-family: monospace !important;
    font-size: 7.5pt !important;
    letter-spacing: 0.5px !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: 9pt !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: 7.5pt !important;
    line-height: 1.1 !important;
    min-height: 70pt !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;
  }
}

/* ============================================
   PROFESSIONAL & INDIAN STANDARDS COMPLIANCE
   ============================================ */

/* A4 Page Format Compliance (210mm x 297mm) */
.a4-page,
.professional-voucher-print {
  width: 210mm !important;
  height: 297mm !important;
  margin: 0 !important;
  padding: 10mm !important;
  box-sizing: border-box !important;
  page-break-after: always !important;
  position: relative !important;
  background: white !important;
  color: black !important;
}

/* Global full-screen modal behavior for mobile support */
.fixed.inset-0 > div,
.fixed.inset-0 .bg-white {
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fixed.inset-0 {
  align-items: flex-start;
  padding-top: 1rem;
}

/* Professional Print Preview Styles */
#print-preview-modal,
#print-settings-modal {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  overflow-y: auto;
  align-items: flex-start;
  padding: 1rem;
}

#print-preview-modal > div,
#print-settings-modal > div {
  max-height: calc(100vh - 2rem);
}

.preview-container,
#preview-container {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
}

/* Mobile-specific modal scrolling improvements */
@media (max-width: 768px) {
  #print-preview-modal,
  #print-settings-modal {
    padding: 0.5rem;
    align-items: stretch;
  }

  #print-preview-modal > div,
  #print-settings-modal > div {
    width: 100%;
    max-width: 100%;
    margin: 0;
    max-height: 100vh;
    border-radius: 0;
  }

  .preview-container,
  #preview-container {
    max-height: calc(100vh - 8rem);
    padding: 10px;
    border-radius: 4px;
  }

  /* Ensure modal content scrolls properly on mobile */
  #print-preview-modal .bg-white,
  #print-settings-modal .bg-white {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Print & Share Modal */
#print-share-modal {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  overflow-y: auto;
  align-items: flex-start;
  padding: 1rem;
}

#print-share-modal > div {
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile-specific modal scrolling improvements for print-share-modal */
@media (max-width: 768px) {
  #print-share-modal {
    padding: 0.5rem;
    align-items: stretch;
  }

  #print-share-modal > div {
    width: 100%;
    max-width: 100%;
    margin: 0;
    max-height: 100vh;
    border-radius: 0;
  }

  /* Ensure modal content scrolls properly on mobile */
  #print-share-modal .bg-white {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Improve grid layout on mobile for print-share-modal */
  #print-share-modal .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Print Preview A4 Display */
.a4-preview {
  width: 210mm;
  height: 297mm;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  margin: 10px auto;
  padding: 10mm;
  box-sizing: border-box;
  position: relative;
}

/* GST Compliant Header for Indian Businesses */
.gst-compliant-header {
  text-align: center;
  margin-bottom: 12pt;
  padding-bottom: 8pt;
  border-bottom: 2px solid #333;
}

.gst-compliant-header img {
  max-height: 30pt;
  margin-bottom: 4pt;
  max-width: 150pt;
}

.gst-company-name {
  font-size: 16pt;
  font-weight: bold;
  margin: 4pt 0;
  color: #000;
}

.gst-company-details {
  font-size: 9pt;
  color: #555;
  line-height: 1.3;
}

/* GSTIN and PAN Display */
.gstin-pan-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12pt;
  margin: 8pt 0;
  font-size: 9pt;
  padding: 4pt 0;
}

.gstin-pan-section > div {
  border-right: 1px solid #ddd;
  padding-right: 8pt;
}

.gstin-pan-section > div:last-child {
  border-right: none;
  padding-left: 8pt;
}

/* GST Breakdown Table */
.gst-breakdown {
  width: 100%;
  border-collapse: collapse;
  margin: 12pt 0;
  font-size: 9pt;
}

.gst-breakdown thead {
  background-color: #f0f0f0;
}

.gst-breakdown th {
  border: 1px solid #999;
  padding: 4pt;
  text-align: left;
  font-weight: bold;
}

.gst-breakdown td {
  border: 1px solid #ccc;
  padding: 4pt;
}

.gst-breakdown th:last-child,
.gst-breakdown td:last-child {
  text-align: right;
}

/* HSN/SAC Code Validation (Indian Standard) */
.hsn-code,
.sac-code {
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

/* Tax Calculation Display */
.tax-breakdown {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12pt;
  margin: 8pt 0;
  font-size: 10pt;
}

.tax-line {
  display: flex;
  justify-content: space-between;
  padding: 3pt 0;
  border-bottom: 1px dotted #ccc;
}

.tax-line.bold {
  font-weight: bold;
  border-bottom: 2px solid #000;
}

/* Duplicate Copy Watermark */
.duplicate-copy-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 72pt;
  color: rgba(200, 200, 200, 0.15);
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
}

/* Copy Label Badge */
.copy-label-badge {
  position: absolute;
  top: 10mm;
  right: 10mm;
  background: #FFE5B4;
  border: 2px solid #FF8C00;
  padding: 2mm 4mm;
  border-radius: 3mm;
  font-size: 8pt;
  font-weight: bold;
  color: #FF8C00;
  z-index: 10;
}

/* Professional Signature Section */
.signature-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12pt;
  margin-top: 20pt;
  text-align: center;
}

.signature-block {
  border-top: 1px solid #000;
  padding-top: 4pt;
  min-height: 30pt;
  font-size: 9pt;
}

.signature-block .title {
  font-weight: bold;
  margin-top: 2pt;
}

/* Professional Amount Display */
.amount-display {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Rupee symbol styling */
.rupee-symbol {
  margin-right: 2px;
  font-weight: bold;
}

/* Terms and Conditions Box */
.terms-conditions-box {
  border: 1px solid #999;
  padding: 6pt;
  margin-top: 8pt;
  font-size: 8pt;
  line-height: 1.3;
  background: #f9f9f9;
}

.terms-conditions-box strong {
  display: block;
  margin-bottom: 3pt;
  text-decoration: underline;
}

/* Email-Ready Styles */
.email-ready-voucher {
  background: white;
  padding: 20px;
  border: 1px solid #ddd;
  font-family: Arial, sans-serif;
}

.email-ready-voucher table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.email-ready-voucher th,
.email-ready-voucher td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.email-ready-voucher th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* Branding Support Styles */
.custom-branding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12pt;
  padding-bottom: 8pt;
  border-bottom: 2px solid #333;
}

.custom-branding-logo {
  max-width: 100pt;
  max-height: 40pt;
  margin-right: 12pt;
}

.custom-branding-company-info {
  flex: 1;
}

.custom-branding-company-info .name {
  font-size: 14pt;
  font-weight: bold;
  color: #000;
}

.custom-branding-company-info .details {
  font-size: 9pt;
  color: #666;
  line-height: 1.3;
}

/* Professional Page Layout */
.professional-page-layout {
  display: flex;
  flex-direction: column;
  height: 297mm;
  width: 210mm;
  padding: 10mm;
  box-sizing: border-box;
  page-break-inside: avoid;
}

.professional-page-header {
  flex: 0 0 auto;
  margin-bottom: 12pt;
}

.professional-page-content {
  flex: 1 1 auto;
  overflow: hidden;
}

.professional-page-footer {
  flex: 0 0 auto;
  margin-top: 12pt;
  padding-top: 8pt;
  border-top: 1px solid #999;
  font-size: 8pt;
  color: #666;
}

/* Print Media Enhancements */
@media print {
  /* Ensure A4 size and margins */
  @page {
    size: A4;
    margin: 10mm;
    orphans: 2;
    widows: 2;
  }

  /* Professional Print Styles */
  .a4-page,
  .professional-voucher-print {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    page-break-after: always !important;
    background: white !important;
  }

  /* GST Compliant Printing */
  .gst-compliant-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .gst-breakdown,
  .gst-breakdown thead,
  .gst-breakdown th,
  .gst-breakdown td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide elements not needed in print */
  nav,
  .sidebar-toggle,
  .overlay,
  .page-title,
  .print-preview-controls,
  .copy-options,
  .print-settings,
  .print-settings-dialog,
  button,
  input,
  select,
  textarea {
    display: none !important;
  }

  /* Specifically hide page heading and SATP logo */
  h1.page-title {
    display: none !important;
  }

  /* Hide action buttons section */
  .flex.justify-center.gap-6.mt-12.pt-8.border-t.flex-wrap {
    display: none !important;
  }

  .email-ready-voucher {
    display: none !important;
  }

  /* Optimize table printing */
  table {
    page-break-inside: avoid;
  }

  tr {
    page-break-inside: avoid;
  }

  /* Compact commercial invoice styling */
  .bg-white.rounded-lg.shadow.p-3 {
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: white !important;
  }

  /* Remove main content padding in print */
  main.p-4.bg-gray-50 {
    padding: 0 !important;
    background: white !important;
  }

  /* Compact header styling */
  header.mb-4.pb-4.border-b-2.border-black {
    margin-bottom: 12pt !important;
    padding-bottom: 8pt !important;
  }

  /* Compact section spacing */
  .mb-4, .mb-6 {
    margin-bottom: 8pt !important;
  }

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

  .totals-section table {
    font-size: 10pt !important;
  }

  .totals-section td {
    padding: 6pt 8pt !important;
  }

  /* Compact form elements in print */
  .border.border-gray-300.rounded {
    border: 1px solid #ccc !important;
    padding: 4pt !important;
  }

  /* Compact table styling for professional look */
  .overflow-x-auto table {
    font-size: 9pt !important;
    line-height: 1.3 !important;
  }

  .overflow-x-auto th,
  .overflow-x-auto td {
    padding: 4pt 6pt !important;
    border: 1px solid #000 !important;
  }

  /* Reduce spacing in grid layouts */
  .grid.grid-cols-4.gap-4.mb-6 > * {
    margin-bottom: 8pt !important;
  }

  /* Ensure proper page breaks */
  .grid.grid-cols-4.gap-4.mb-6 {
    page-break-inside: avoid !important;
  }

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

  /* Professional signature printing */
  .signature-section {
    page-break-inside: avoid;
  }

  /* Ensure proper spacing */
  body {
    line-height: 1.2 !important;
  }

  /* Color preservation for branding */
  .custom-branding-company-info .name {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Responsive Print Settings Dialog */
.print-settings-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  min-width: 400px;
  max-width: 600px;
}

.print-settings-dialog header {
  background: #f5f5f5;
  padding: 12px 16px;
  border-bottom: 1px solid #ddd;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.print-settings-dialog .close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.print-settings-dialog .close-btn:hover {
  color: #000;
}

.print-settings-dialog .content {
  padding: 16px;
}

.print-settings-dialog .option-group {
  margin-bottom: 12px;
}

.print-settings-dialog label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
}

.print-settings-dialog input[type='checkbox'],
.print-settings-dialog input[type='radio'] {
  margin-right: 8px;
  cursor: pointer;
}

.print-settings-dialog .footer {
  padding: 12px 16px;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.print-settings-dialog button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  background: white;
  color: #333;
}

.print-settings-dialog button:hover {
  background: #f5f5f5;
}

.print-settings-dialog button.primary {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.print-settings-dialog button.primary:hover {
  background: #5568d3;
}

/* 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: normal; 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; }

/* Totals area should fit inside printable width without fixed inline overflow */
.totals-section table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}
.totals-section td {
  min-width: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.totals-section .subtotal-label,
.totals-section .subtotal-value {
  width: auto !important;
  min-width: 0 !important;
}

/* 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;
}

/* Force voucher item tables to remain wide enough for all columns and allow horizontal scrolling */
#invoiceTable,
#purchaseTable,
#quotationTable,
#creditNoteTable,
#debitNoteTable,
#purchaseOrderTable {
  min-width: 1000px;
}

/* 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;
}