/* CACHE BUST TIMESTAMP: 1732455200000 - TERMS 70% WIDTH IN PRINT ONLY */

/* ===== MODERN LOADING & TRANSITIONS ===== */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Loading indicator animations */
#loading-indicator {
  animation: slideDown 0.3s ease-out;
}

/* App container fade-in */
.app-container {
  animation: fadeIn 0.3s ease-in;
}

/* Skeleton loading effect for initial render */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Smooth transitions for all interactive elements */
button, .doc-tab, input, select, textarea {
  transition: all 0.2s ease-in-out;
}

/* Prevent flash of unstyled content */
.app-container[style*="display: none"] {
  visibility: hidden;
}

.app-container[style*="display: block"] {
  visibility: visible;
}

/* ===== END MODERN LOADING & TRANSITIONS ===== */

:root {
  --invoice-blue: #4a90e2;
  --quotation-green: #1fa67a;
  --delivery-red: #e64c4c;
  --grey-border: #e0e0e0;
  
  /* Light grey button colors - neutral and professional */
  --button-bg: #f0f0f0;
  --button-hover: #e5e5e5;
  --button-text: #333333;
  --button-border: #d0d0d0;
  --button-shadow: rgba(0, 0, 0, 0.1);
  
  --shadow: 0 4px 12px rgba(0,0,0,0.1);
  --bg-light: #F9FAFB;
  --white: #FFFFFF;
  --footer-border: #333333;
  --lighter-color: #888888;
  --doc-base-font-size: 13px; /* increased for readability */
  --doc-small-font: 13px; /* match base */
  --doc-heading-font: 22px; /* document heading (Quotation/Invoice/Delivery) */
  --company-short-font: 34px; /* company short name in header */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', 'Roboto', sans-serif, system-ui;
  background: var(--bg-light);
  min-height: 100vh;
  font-size: 17px; /* slight overall increase */
  line-height: 1.45;
  overflow-x: clip; /* clip (not hidden) so it doesn't break position:sticky header on mobile */
  -webkit-tap-highlight-color: transparent;
}

body, html, input, textarea, select, button, table, th, td, label, .modal, .footer, .notes-section, .terms, .signatures, .signatory, .signature-space, .app-container, .tab-content, .header, .document-section, .document-title, .item-table, .totals, .footer, .notes-section label, .terms, .signatures span {
  font-family: 'Montserrat', 'Roboto', Arial, Helvetica, sans-serif !important;
  font-size: 1rem;
  font-weight: 400;
  color: #222;
}

body, .document, .document textarea, .document select, .document td, .document th {
  font-size: 0.95em !important;
}

.items-table input, .items-table textarea {
  font-size: 0.95em !important;
}

/* REMOVED: .customer-details input, .invoice-details input font-size override 
   so local 12px rules can work */

.document-title, h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', 'Roboto', Arial, Helvetica, sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #222;
}

.app-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  align-items: center;
}

/* Header redesign: simpler, smaller controls */
.header-bar {
  width: 100%;
  max-width: 100vw;
  background: var(--white);
  padding: 6px 8px;
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  gap: 8px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.header-center {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  justify-content: center;
  flex-wrap: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.header-left input, .header-left button, .header-center input, .header-center button, .header-right input, .header-right button {
  padding: 7px 10px;
  height: 34px;
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--button-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 3px var(--button-shadow);
  transition: all 0.2s ease;
}

/* Left buttons - more compact */
.header-left button {
  padding: 7px 10px;
  font-size: 12px;
}

/* Dashboard and Customer SOA buttons should always be visible */
#tab-overview,
#tab-customer {
  display: flex !important;
}

/* Convert buttons - extra compact.
   Scoped to desktop deliberately. Unscoped, these ID selectors (specificity
   1,0,0) outrank every `.header-bar button` rule in every mobile media query,
   so the convert buttons ignored the phone sizing and rendered a different
   height from the buttons beside them. */
@media (min-width: 769px) {
  #create-invoice-btn,
  #create-delivery-btn {
    padding: 7px 8px;
    font-size: 11.5px;
  }
}

/* Right-side document tabs - slightly longer */
.header-right button {
  padding: 7px 14px;
  min-width: 110px;
  font-size: 13px;
}

.header-bar button:hover {
  background: var(--button-hover);
  box-shadow: 0 2px 6px var(--button-shadow);
  transform: translateY(-1px);
}

.header-bar button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px var(--button-shadow);
}

/* Open file button states */
#open-file-btn {
  background: #c0392b; /* red by default */
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
}
#open-file-btn.file-btn--loaded {
  background: #27ae60; /* green when loaded */
}
#open-file-btn.file-btn--unloaded {
  background: #c0392b; /* red when not loaded */
}

/* Modal open button style consistency */
#modal-open-file-btn {
  background: #6366f1;
  color: #fff;
  font-size: 1em;
  padding: 10px 20px;
  border-radius: 8px;
}

#modal-open-file-btn:hover {
  background: #4f46e5;
}

/* Instruction ticker styles */
.instruction-ticker {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: all 0.4s ease;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  display: none !important; /* Hidden - ticker notification removed */
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.instruction-ticker--unloaded {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  color: #c62828;
  border-bottom-color: #ef5350;
}

.instruction-ticker--loaded {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #2e7d32;
  border-bottom-color: #66bb6a;
}

#ticker-icon {
  font-size: 18px;
  animation: pulse 2s ease-in-out infinite;
}

#ticker-message {
  letter-spacing: 0.3px;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.doc-tab.active-tab#tab-invoice {
  background: var(--invoice-blue);
}

.doc-tab.active-tab#tab-quotation {
  background: var(--quotation-green);
}

.doc-tab.active-tab#tab-delivery {
  background: var(--delivery-red);
}

.main-content {
  flex-grow: 1;
  width: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.document {
  width: 210mm;
  height: 297mm;
  background: var(--white);
  padding: 6mm;
  margin: 10mm auto;
  border-radius: 8px;
  box-shadow: var(--shadow);
  position: relative;
  display: none;
  overflow: hidden;
  font-size: var(--doc-base-font-size); /* use document base size */
}

.document.active {
  display: block;
  margin: 10mm auto;
}

.header {
  border-bottom: 3px solid transparent; /* thicker, color set per document */
  padding-bottom: 6px; /* reduced spacing */
  margin-bottom: 8px;
}

/* Per-document header color */
#invoice .header { border-color: var(--invoice-blue); }
#quotation .header { border-color: var(--quotation-green); }
#delivery .header { border-color: var(--delivery-red); }

.company-details {
  text-align: left;
}

.company-details p {
  font-size: 12px;
  line-height: 1.4;
  color: #555;
  margin-top: 4px;
}

.company-name {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.company-short-name {
  font-size: var(--company-short-font);
  font-weight: 800;
  letter-spacing: 1px;
}

#invoice .company-short-name { color: var(--invoice-blue); }
#quotation .company-short-name { color: var(--quotation-green); }
#delivery .company-short-name { color: var(--delivery-red); }

.company-full-name, .company-trn {
  font-size: 14px;
  color: #444;
  font-weight: 600;
}

/* ========================================
   CUSTOMER & INVOICE DETAILS SECTION
   EXTREME PRECISION - Matching table headers exactly
   ======================================== */

.details {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 8px 0 10px 0;
  gap: 40px;
}

/* ===== LEFT SIDE: Customer Details ===== */
.customer-details {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Compact vertical spacing on screen */
  flex: 1;
  max-width: 50%;
  margin-left: 0;
  padding-left: 0;
}

.customer-details div {
  display: flex;
  align-items: center;
  gap: 4px; /* Reduced gap - move values closer to labels */
  height: 26px;
}

/* ALL Labels - Regular weight on screen, BOLD only in print */
.customer-details label {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 400; /* Regular weight on screen */
  color: #000;
  width: 35px; /* Fixed width for alignment */
  flex-shrink: 0;
  text-align: left;
  margin: 0;
  padding: 0;
  line-height: 26px;
}

/* ALL Inputs - UNBOLD, SAME SIZE, SAME HEIGHT */
.customer-details input {
  flex: 1;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 400; /* UNBOLD */
  color: #333;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 4px 6px; /* Compact padding */
  height: 26px;
  line-height: normal;
  box-sizing: border-box;
}

.customer-details input:focus {
  border-color: #0760a8;
  outline: none;
}

/* Customer Name - Borderless, keep full width for long names */
.customer-details input[data-cell="name"] {
  border: none;
  background: transparent;
  font-weight: 700; /* BOLD for name only */
  font-size: 12px; /* SAME as others */
  padding: 4px 2px;
  max-width: none; /* Allow full width for long company names */
}

.customer-details input[data-cell="name"]:focus {
  background: rgba(7, 96, 168, 0.05);
  border-radius: 3px;
}

/* ===== RIGHT SIDE: Invoice Details ===== */
.invoice-details {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Compact vertical spacing - SAME as left */
  min-width: 200px;
  align-items: flex-end;
}

/* Two-column grid (label | value) so every row's label and value line up,
   and every value box is the same snug width. */
.invoice-details div {
  display: grid;
  grid-template-columns: 34px 104px;
  align-items: center;
  column-gap: 6px;
  height: 26px;
  width: auto;
}

/* ALL Labels - Regular weight on screen, BOLD only in print */
.invoice-details label {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 400; /* Regular weight on screen */
  color: #000;
  width: auto;
  text-align: left;
  margin: 0;
  padding: 0;
  line-height: 26px;
}

/* ALL Inputs - UNBOLD except doc number */
.invoice-details input,
.invoice-details select {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 400; /* UNBOLD */
  color: #333;
  border: none; /* Remove border by default */
  border-radius: 0;
  padding: 4px 6px; /* Compact padding */
  height: 26px;
  line-height: normal;
  box-sizing: border-box;
  text-align: right;
  width: 100%; /* fill the value column */
  background: transparent;
}

.invoice-details input:focus,
.invoice-details select:focus {
  outline: 1px solid #0760a8;
}

/* Document number - BOLD on screen with box and rounded corners */
.invoice-details input[id$="-number"] {
  font-weight: 700; /* BOLD for document number */
  color: #000;
  border: 1px solid #ddd; /* Only doc number has border */
  border-radius: 6px; /* Rounded corners */
  -webkit-appearance: none; /* honour border-radius consistently */
  appearance: none;
  background: white;
  width: 100%; /* fill the value column (snug, fits IN-26-7000) */
  padding: 4px 8px;
  white-space: nowrap;
  overflow: visible;
}

/* Date - Borderless but SAME font/size as other inputs */
.invoice-details .date-cell {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 6px; /* Match other inputs */
  width: 100%; /* fill the value column */
  text-align: right;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap; /* Prevent wrapping */
}

.invoice-details .date-cell:hover {
  background: rgba(7, 96, 168, 0.05);
  border-radius: 3px;
}

.invoice-details .date-display {
  font-family: Arial, sans-serif;
  font-size: 12px; /* EXACT match */
  font-weight: 400; /* UNBOLD */
  color: #333;
  white-space: nowrap; /* Prevent wrapping */
}

/* Document Number - BOLD (only value that's bold) */
.invoice-details input[id$="-number"] {
  font-weight: 700; /* BOLD */
  color: #000;
}

/* Readonly numbers */
.invoice-details input[readonly] {
  background: #f9f9f9;
  cursor: not-allowed;
}

.logo {
  position: absolute;
  top: 6mm;
  right: 6mm;
  width: 80px;
  height: 50px;
}

.logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

h2 {
  font-size: var(--doc-heading-font);
  margin: 10px 0 14px 0;
  text-align: center;
  color: var(--invoice-blue);
  letter-spacing: 1px;
}

/* Per-document h2 color */
#invoice h2 { color: var(--invoice-blue); }
#quotation h2 { color: var(--quotation-green); }
#delivery h2 { color: var(--delivery-red); }

/* ===== Adjustments: compact item rows, single table spacing, boxed totals ===== */
/* Ensure no accidental gaps between tbody rows */
.items-table {
  width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 8px 0 0 0 !important; /* no gap below table */
  table-layout: fixed;
}
/* Slightly reduce per-row height and tighten padding */
.items-table th, .items-table td {
  padding: 2px 6px !important;
  height: 18px !important; /* reduced for more compact rows */
  font-size: 13px !important;
  vertical-align: middle !important;
}
.items-table input {
  height: 14px !important; /* reduced to match row height */
  padding: 1px 3px !important;
  font-size: 13px !important;
}
/* Totals area: make each footer row look like a separate boxed row */
.items-table tfoot tr td {
  border: none !important; /* clear previous thin rules */
  padding: 0 !important;
  background: transparent !important;
}
.items-table tfoot tr {
  display: table-row;
}
/* ONLY style cells that have the .total-label or .total-value classes */
.items-table tfoot tr td.total-label,
.items-table tfoot tr td.total-value {
  background: #f6f8fa !important;
  border: 1px solid var(--grey-border) !important;
  padding: 4px 8px !important;
  height: 26px !important;
  box-sizing: border-box !important;
}
/* Ensure label cell(s) are right aligned and the value cell bold */
.items-table tfoot tr td.total-label { text-align: right !important; font-weight: 600 !important; }
.items-table tfoot tr td.total-value { text-align: right !important; font-weight: 800 !important; }
/* For delivery layout where totals sit in last two columns ensure left cells have proper text alignment */
#delivery .items-table tfoot td:nth-last-child(2) { text-align: left !important; }
#delivery .items-table tfoot td:last-child { text-align: right !important; }
/* Words cell - no borders */
.items-table tfoot tr td.words-cell-merged {
  background: transparent !important;
  border: none !important;
  padding: 4px 6px !important;
  vertical-align: top !important;
  line-height: 1.4 !important;
}
/* Print mirror: ensure boxed totals and compact rows print the same */
@media print {
  .items-table { margin: 6mm 0 8mm 0 !important; }
  .items-table th, .items-table td { padding: 2px 5px !important; height: 18px !important; }
  .items-table input { height: 14px !important; }
  /* ONLY style cells with .total-label or .total-value classes */
  .items-table tfoot tr td.total-label,
  .items-table tfoot tr td.total-value {
    background: #f6f8fa !important;
    border: 1px solid var(--grey-border) !important;
    padding: 4px 7px !important;
    height: 26px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Words cell - absolutely no borders */
  .items-table tfoot tr td.words-cell-merged {
    background: transparent !important;
    border: none !important;
    padding: 4px 6px !important;
    vertical-align: top !important;
  }

  /* Add back bottom border under products table */
  #invoice .items-table tbody tr:last-child,
  #quotation .items-table tbody tr:last-child,
  #delivery .items-table tbody tr:last-child {
    border-bottom: 1px solid #ddd !important;
  }

  /* Add bottom border under products row number 14 in delivery order */
  #delivery .items-table tbody tr:nth-child(14) {
    border-bottom: 1px solid #ddd !important;
  }
  
  #delivery .items-table tbody tr:nth-child(14) td {
    border-bottom: 1px solid #ddd !important;
  }

  /* Totals area must be completely borderless except labeled totals cells */
  .items-table tfoot tr, .items-table tfoot td { border: none !important; background: transparent !important; padding: 0 !important; height: 0 !important; }

  /* For delivery, hide borders around totals row except top */
  #delivery .items-table tfoot tr {
    border-left: 1px solid white !important;
    border-right: 1px solid white !important;
    border-bottom: 1px solid white !important;
    border-top: 1px solid #ddd !important;
  }
  #delivery .items-table tfoot td {
    border-left: 1px solid white !important;
    border-right: 1px solid white !important;
    border-bottom: 1px solid white !important;
    border-top: 1px solid white !important;
  }

  /* Kill UA borders on form controls in print (prevents box around notes) */
  textarea, input, select { 
    -webkit-appearance: none !important; appearance: none !important;
    background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important;
  }
  .terms-editable { padding: 0 !important; }
  
  /* Ensure the empty helper column in tfoot stays invisible */
  .items-table tfoot td:not(.total-label):not(.total-value):not(.words-cell-merged) {
    border: none !important; background: transparent !important; padding: 0 !important; height: 0 !important;
  }

  /* EXTRA HARD-KILL for the stray hairline under the words/above notes */
  /* 1) make sure last body row cells have no bottom border */
  .items-table tbody tr:last-child td { border-bottom: none !important; }
  /* 2) remove any borders applied by inner content in the words cell */
  .items-table tfoot td.words-cell-merged, 
  .items-table tfoot td.words-cell-merged * { border: 0 !important; background: transparent !important; }
  .total-in-words { border: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
  /* 3) notes/terms should print as plain text only */
  .notes-section, .terms, .account-details { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
}

@media print {
  /* Ensure tfoot rows never draw a row border (overrides generic .items-table tr border-bottom) */
  .items-table tfoot, .items-table tfoot tr { border: none !important; border-bottom: none !important; }
}

@media print {
  /* Remove bottom border of the items table to avoid a hairline under the words cell */
  .items-table { border-bottom: none !important; }
  /* Ensure no bottom borders sneak in from the final rendered row/cells */
  .items-table tbody tr:last-child td,
  .items-table tfoot tr:last-child td { border-bottom: none !important; }
  /* Cancel the negative margin between table and terms for print to prevent overlap on the table edge */
  .items-table + .terms-editable { margin-top: 2mm !important; }
  /* Hard remove any residual top/bottom borders at the table-to-terms junction */
  .items-table tfoot td, .items-table tfoot tr { border-top: 0 !important; border-bottom: 0 !important; }
  .items-table tbody tr:last-child td { border-bottom: 0 !important; }

  /* Add a neat grey guide line only under the words area (as per green mark) */
  .items-table tfoot td.words-cell-merged { position: relative !important; }
  .items-table tfoot td.words-cell-merged::after {
    content: "" !important;
    display: block !important;
    height: 0 !important;
    border-top: 1px solid var(--grey-border) !important; /* light grey */
    margin-top: 2mm !important;
    width: 92% !important; /* stop before the totals columns */
  }
}

@media print {
  /* Replace the underline with a top guide line exactly at the words row start */
  .items-table tfoot td.words-cell-merged { position: relative !important; }
  .items-table tfoot td.words-cell-merged::after { display: none !important; }
  .items-table tfoot td.words-cell-merged::before {
    content: "" !important;
    position: absolute !important;
    top: -1px !important; /* sit exactly on the row boundary */
    left: 0 !important;
    right: 0 !important;
    border-top: 1px solid var(--grey-border) !important; /* light grey line per design */
  }
}

@media print {
  /* Place a subtle grey line at the bottom of the words cell only */
  .items-table tfoot td.words-cell-merged { position: relative !important; }
  .items-table tfoot td.words-cell-merged::before { display: none !important; }
  .items-table tfoot td.words-cell-merged::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-bottom: 1px solid var(--grey-border) !important; /* light grey */
  }
}
/* End adjustments */

.items-table th, .items-table td {
  border: 1px solid var(--grey-border);
  padding: 6px 8px;
  font-size: 14px; /* slightly larger for print */
  height: 22px;
}

.items-table th {
  color: var(--white);
  font-weight: bold;
  text-align: center !important;
  vertical-align: middle;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.items-table td {
  vertical-align: middle;
  font-size: 13px;
}

#invoice .items-table th {
  background: var(--invoice-blue);
}

#quotation .items-table th {
  background: var(--quotation-green);
}

#delivery .items-table th {
  background: var(--delivery-red);
}

.items-table td:nth-child(3) {
  text-align: left;
}

.items-table td:nth-child(5), .items-table td:nth-child(6) {
  text-align: right;
}

.items-table input {
  width: 100%;
  border: none;
  padding: 1px 4px;
  font-size: 14px;
  text-align: inherit;
  height: 18px;
}

.items-table input:focus {
  outline: none;
}

.items-table input[type="number"] {
  -webkit-appearance: none;
  appearance: textfield;
}

.items-table input[type="number"]::-webkit-inner-spin-button,
.items-table input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

#invoice .items-table th:nth-child(1), #invoice .items-table td:nth-child(1) { width: 6%; text-align: center; }
#invoice .items-table th:nth-child(2), #invoice .items-table td:nth-child(2) { width: 12%; text-align: left; }
#invoice .items-table th:nth-child(3), #invoice .items-table td:nth-child(3) { width: 44%; text-align: left; }
#invoice .items-table th:nth-child(4), #invoice .items-table td:nth-child(4) { width: 7%; text-align: center; }
#invoice .items-table th:nth-child(5), #invoice .items-table td:nth-child(5) { width: 12%; text-align: right; }
#invoice .items-table th:nth-child(6), #invoice .items-table td:nth-child(6) { width: 14%; text-align: right; }

#quotation .items-table th:nth-child(1), #quotation .items-table td:nth-child(1) { width: 6%; text-align: center; }
#quotation .items-table th:nth-child(2), #quotation .items-table td:nth-child(2) { width: 12%; text-align: left; }
#quotation .items-table th:nth-child(3), #quotation .items-table td:nth-child(3) { width: 44%; text-align: left; }
#quotation .items-table th:nth-child(4), #quotation .items-table td:nth-child(4) { width: 7%; text-align: center; }
#quotation .items-table th:nth-child(5), #quotation .items-table td:nth-child(5) { width: 12%; text-align: right; }
#quotation .items-table th:nth-child(6), #quotation .items-table td:nth-child(6) { width: 14%; text-align: right; }

#delivery .items-table th:nth-child(1), #delivery .items-table td:nth-child(1) { width: 8%; text-align: center; }
#delivery .items-table th:nth-child(2), #delivery .items-table td:nth-child(2) { width: 20%; text-align: left; }
#delivery .items-table th:nth-child(3), #delivery .items-table td:nth-child(3) { width: 44%; text-align: left; }
#delivery .items-table th:nth-child(4), #delivery .items-table td:nth-child(4) { width: 14%; text-align: center; }
#delivery .items-table th:nth-child(5), #delivery .items-table td:nth-child(5) { width: 14%; text-align: center; }

.items-table tfoot td {
  height: 16px;
  padding: 2px 4px;
  line-height: 1.1;
  font-size: 14px;
  text-align: right;
  vertical-align: middle;
  border-top: 2px solid #e0e0e0;
}

/* Delivery Note/Quotation/Invoice table font consistency */
.item-table, .item-table th, .item-table td {
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  font-size: 1rem;
  color: #222;
}

/* Remove grey borders after 14th product row, except amount column boxes */
#invoice .items-table tbody tr:nth-child(n+15) td,
#quotation .items-table tbody tr:nth-child(n+15) td {
  border: none;
}

#invoice .items-table tfoot td:not(:last-child) {
  border: none;
}

#quotation .items-table tfoot td:not(:last-child) {
  border: none;
}

/* Right-align Subtotal, Vat5%, G.Total in price column */
#invoice .items-table tfoot td:nth-child(5),
#quotation .items-table tfoot td:nth-child(5) {
  text-align: right;
}

#delivery .items-table tfoot td:nth-child(4),
#delivery .items-table tfoot td:nth-child(5) {
  text-align: center;
}

#delivery .items-table tfoot #delivery-ordered-total,
#delivery .items-table tfoot #delivery-delivered-total {
  text-align: center !important;
}

#delivery .items-table tfoot tr {
  height: 1.5em;
}

#delivery .items-table tfoot td:nth-child(1) {
  border: none;
}

.items-table tfoot td:nth-child(5) {
  text-align: right;
  font-weight: normal;
}

#quotation .items-table tfoot td:nth-child(5) {
  padding-left: 30px;
}

.items-table tfoot td:last-child {
  text-align: right;
}

.items-table .line-total {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.total-in-words {
  font-size: 16px;
  line-height: 1.4;
  padding: 4px 0;
  text-align: left;
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  font-style: italic;
  color: #666;
  padding: 8px;
  border-top: 1px solid var(--grey-border);
  white-space: normal !important;
  display: inline-block;
  min-width: 320px;
  max-width: 100%;
  white-space: pre-line;
  font-size: 0.98em;
  font-weight: 500;
  color: #0760a8;
  vertical-align: middle;
}

#invoice-words, #quotation-words {
  display: block;
  min-width: 320px;
  max-width: 100%;
  white-space: pre-line;
  font-size: 0.98em;
  font-weight: 500;
  color: #0760a8;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Total in words inline (inside table footer) - Screen styles */
.words-inline {
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
  color: #0760a8;
  font-weight: 600;
  font-style: normal;
  display: block;
  padding: 4px 0;
}

.total-label {
  text-align: right;
  padding-right: 8px;
  font-weight: 600;
  color: #333;
}

.total-value {
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  padding-right: 6px;
}

.notes-section {
  margin-top: 0.5em;
  margin-bottom: 1em;
  font-size: 0.82rem !important;
  color: #333;
  background: #f8f8f8;
  padding: 0.4em 0.7em !important;
  border-radius: 5px !important;
  border: 1px solid #e0e0e0;
  max-width: 350px !important;
  width: 350px !important;
  box-sizing: border-box;
  overflow: hidden !important;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.4;
}

/* Notes, Terms, and Signatures sections */
.notes-section textarea, .terms, .signatures, .signatory, .signature-space {
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  font-size: 1rem;
  color: #222;
}

.center-align {
  display: block;
  text-align: center;
}

.account-details, .terms {
  font-size: 10px;
  color: #333;
  margin: 7px 0;
}

.terms {
  margin-top: 1.5em;
  margin-bottom: 1em;
  font-size: 0.95rem;
  color: #333;
  background: #f8f8f8;
  padding: 0.8em 1em;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  margin-top: 1em;
  margin-bottom: 0.7em;
  font-size: 0.88rem !important;
  color: #333;
  background: #f8f8f8;
  padding: 0.5em 0.8em;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  max-width: 480px;
}

.terms.small-box, .account-details.small-box {
  font-size: 0.82rem !important;
  padding: 0.4em 0.7em !important;
  max-width: 350px !important;
  width: 350px !important; /* enforce same length as terms */
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
  border-radius: 5px !important;
}

.terms.small-box {
  background: #f3f7fa !important;
}

.account-details.small-box {
  background: #f7f7f7 !important;
  width: 350px !important; /* match terms length */
  max-width: 350px !important;
}

.account-details {
  margin-top: 0.15em; /* slightly closer to terms */
  margin-bottom: 1em;
  font-size: 0.95rem;
  color: #333;
  background: #f8f8f8;
  padding: 0.7em 1em;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  max-width: 520px;
}

/* Terms editable textarea - match account details box styling */
.terms-editable {
  margin-top: 0 !important; /* tight */
  margin-bottom: 0.5em !important;
  font-size: 0.82rem !important;
  color: #333 !important;
  background: #f3f7fa !important;
  padding: 0.4em 0.7em !important;
  border-radius: 5px !important;
  border: 1px solid #e0e0e0 !important;
  max-width: 350px !important;
  width: 350px !important;
  box-sizing: border-box !important;
  resize: none !important;
  overflow: hidden !important;
  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
  line-height: 1.5 !important;
  height: auto !important;
  min-height: 60px !important;
  display: block !important;
}

.signatures {
  position: absolute;
  bottom: 15mm;
  width: calc(100% - 12mm);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 2em;
  margin-bottom: 1em;
}

#invoice .signatures {
  justify-content: flex-end;
}

#invoice .signatures .authorized {
  margin-left: auto;
}

.signatures .signatory {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 40%;
}

.signatures .receiver .signature-space {
  width: 180px;
  height: 60px;
  border: 2px dashed #ccc;
  margin-bottom: 4px;
  border-bottom: 1px solid #888;
}

.signatures .authorized img {
  width: 280px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 4px;
}

.signatory img {
  height: 60px;
  width: auto;
  margin-bottom: 0.5em;
}

.signatory span {
  font-size: 1rem;
  color: #222;
}

/* Delivery: make the caption “Authorized Signatory” grey */
#delivery .signatures .authorized span { color: #777 !important; }
@media print { #delivery .signatures .authorized span { color: #777 !important; } }
/* Invoice: make the caption “Authorized Signature” grey to match */
#invoice .signatures .authorized span { color: #777 !important; }
@media print { #invoice .signatures .authorized span { color: #777 !important; } }

/* Footer: simplified — edge-to-edge border line, no pseudo-element */
.footer {
  /* use a single border-top line across the full footer width */
  border-top: 2px solid var(--footer-border) !important;
  position: absolute;
  bottom: 6mm;
  width: 100%;
  text-align: center;
  font-size: 14px;
  padding-top: 6px; /* space between the line and the text */
  color: #333; /* default fallback color */
  box-sizing: border-box;
}
/* disable legacy inset pseudo-line to avoid double lines */
.footer::before { content: none !important; display: none !important; }

/* Per-document border color and text color */
#invoice .footer { border-top-color: var(--invoice-blue) !important; color: #000 !important; }
#quotation .footer { border-top-color: var(--quotation-green) !important; color: #000 !important; }
#delivery .footer { border-top-color: var(--delivery-red) !important; color: #000 !important; }

/* Print: single edge-to-edge line, no pseudo-element, no duplication */
@media print {
  .footer {
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    background: var(--white) !important;
    margin-top: 6mm !important;
    margin-bottom: 0 !important;
    page-break-inside: avoid !important;
    border-top-width: 2px !important; /* ensure visible in print */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .footer::before { content: none !important; display: none !important; }
}

/* Hide Release Excel button if present */
#release-excel, .release-excel {
  display: none !important;
}

/* Remove release button style usage */
#release-file-btn { display: none !important; }

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  min-width: 450px;
  max-width: 90vw;
}

.modal.active {
  display: block;
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Pull Record Form - Edit/Reprint Modal */
.pull-record-form {
  text-align: center;
  width: 450px;
  max-width: 90vw;
}

.pull-record-form h3 {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 700;
  color: #111827;
}

.pull-error-message {
  background: #fee;
  border: 2px solid #fcc;
  border-radius: 8px;
  color: #c33;
  padding: 12px 16px;
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  line-height: 1.5;
}

.modal input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  margin: 0 0 20px 0;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  color: #111827;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
}

/* Pull/reprint multi-match results list */
.pull-results {
  margin-top: 16px;
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}
.pull-results-title {
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  margin: 0 0 8px 2px;
}
.pull-result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 8px 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pull-result-item:hover {
  background: #eef4ff;
  border-color: #0760a8;
}
.pull-result-item .pri-num {
  font-size: 15px;
  font-weight: 700;
  color: #0760a8;
}
.pull-result-item .pri-meta {
  font-size: 12px;
  color: #6b7280;
}

.modal input:focus {
  border-color: #0760a8;
  box-shadow: 0 0 0 3px rgba(7, 96, 168, 0.1);
}

.modal input::placeholder {
  color: #9ca3af;
}

.modal button {
  padding: 12px 32px;
  margin: 8px 6px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.modal button:first-of-type {
  background: #0760a8;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(7, 96, 168, 0.3);
}

.modal button:first-of-type:hover {
  background: #054a7a;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(7, 96, 168, 0.4);
}

.modal button:first-of-type:active {
  transform: translateY(0);
}

.modal button:last-of-type {
  background: #e5e7eb;
  color: #374151;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal button:last-of-type:hover {
  background: #d1d5db;
  transform: translateY(-1px);
}

.modal button:last-of-type:active {
  transform: translateY(0);
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65);
  z-index: 999;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.overlay.active {
  display: block;
  animation: overlayFadeIn 0.2s ease-out;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Customer Picker Panel - Modal Popup */
/* OLD STYLES REMOVED - Using dropdown styles at bottom of file */

.customer-item .cust-left {
  flex-shrink: 0;
}

.customer-item .cust-right {
  flex: 1;
  min-width: 0;
}

.customer-item .cust-name {
  color: #333;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-item .cust-meta {
  color: #666;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-item .cust-icon {
  flex-shrink: 0;
}

.no-results {
  padding: 20px;
  text-align: center;
  color: #999;
  font-style: italic;
}

.print-btn {
  display: flex !important;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 120px !important;
  height: 44px !important;
  background: var(--button-bg) !important;
  color: var(--button-text) !important;
  border: 1px solid var(--button-border) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px var(--button-shadow) !important;
  transition: all 0.2s ease !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 6px 12px !important;
  gap: 8px !important;
}
.print-btn img { display: none !important; } /* hide old icon */

/* Action/share buttons use the app font (buttons don't inherit font-family by default) */
.print-btn,
.pdf-btn,
.whatsapp-btn,
.email-btn {
  font-family: 'Montserrat', 'Roboto', Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.02em !important;
}

/* Share buttons (feature flag: shareButtons) — floating, stacked above PRINT.
   Hidden inline by default; feature-flags.js reveals them (display:flex) when enabled. */
.whatsapp-btn,
.email-btn {
  position: fixed !important;
  right: 20px !important;
  width: 120px !important;
  height: 44px !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 6px 12px !important;
  gap: 8px !important;
  color: #fff !important;
}
.whatsapp-btn { bottom: 74px !important; background: #25d366 !important; }
.email-btn    { bottom: 128px !important; background: #0760a8 !important; }
.whatsapp-btn:hover,
.email-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
.whatsapp-btn:disabled,
.email-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.print-btn:hover {
  background: var(--button-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px var(--button-shadow) !important;
}

.print-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px var(--button-shadow) !important;
}

/* PDF Download button - hidden per user request */
.pdf-btn {
  display: none !important;
}

.pdf-btn:hover {
  background: #45a049 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4) !important;
}

.pdf-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(76, 175, 80, 0.3) !important;
}

.pdf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile: slightly smaller button */
@media (max-width: 480px) {
  .pdf-btn {
    right: 12px !important;
    bottom: 65px !important;
    width: 96px !important;
    height: 40px !important;
    font-size: 12px !important;
  }

  .print-btn {
    right: 12px !important;
    bottom: 12px !important;
    width: 96px !important;
    height: 40px !important;
    font-size: 13px !important;
  }
}

/* ===== MOBILE/RESPONSIVE: show BOTH Print and Save (match PC) ===== */
/* PRINT uses window.print() -> identical design to PC. SAVE produces the PDF.
   Both are shown, stacked bottom-right. Scoped to `screen` so neither button
   ever renders on the printout itself. */
@media only screen and (max-width: 768px) {
  .print-btn {
    display: flex !important;   /* restore the real Print button on mobile */
  }

  .pdf-btn {
    display: flex !important;
    position: fixed !important;
    right: 12px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 66px) !important;  /* sit above Print */
    top: auto !important;
    left: auto !important;
    width: auto !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    z-index: 1001 !important;
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: 1px solid var(--button-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
  }

  .pdf-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }
}

.dashboard-btn {
  display: flex !important;
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  width: 120px !important;
  height: 44px !important;
  background: var(--button-bg) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
  transition: background 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 6px 12px !important;
  gap: 8px !important;
}

.dashboard-btn:hover {
  background: var(--button-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important;
}

/* Mobile: slightly smaller button */
@media (max-width: 480px) {
  .dashboard-btn {
    left: 12px !important;
    bottom: 12px !important;
    width: 96px !important;
    height: 40px !important;
    font-size: 13px !important;
  }
}

/* Excel modal styles - REMOVED (now using Google Sheets with loading indicator) */

/* Ensure the app interaction works properly */
body.excel-locked .app-container {
  pointer-events: none !important;
  user-select: none !important;
  filter: none !important;
}

@keyframes popIn {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Legacy 480px breakpoint removed - now using comprehensive 768px mobile-first approach */

/* ============================================================ */
/* CONSOLIDATED PRINT STYLES - OPTIMIZED FOR SINGLE A4 PAGE    */
/* ============================================================ */
@media print {
  /* --- PAGE SETUP --- */
  @page {
    size: A4 portrait;
    margin: 6mm 8mm;
    orphans: 2;
    widows: 2;
  }
  
  /* --- GLOBAL DOCUMENT SETUP --- */
  html, body {
    width: 210mm !important;
    height: auto !important;
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: white !important;
    color: black !important;
  }
  
  /* --- DOCUMENT CONTAINER --- */
  .document {
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 6mm 8mm !important;
    padding-bottom: 35mm !important; /* Reserve space for signatures + footer */
    background: white !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: none !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    position: relative !important;
    box-sizing: border-box !important;
  }
  
  .document.active {
    display: block !important;
    page-break-after: avoid !important;
  }
  
  /* --- HIDE UI ELEMENTS --- */
  .no-print, .print-btn, .modal, .overlay, .header-bar,
  .instruction-ticker, .pull-record-form,
  .contacts-overlay, .contacts-modal {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* --- HIDE PLACEHOLDER TEXT --- */
  input::placeholder,
  input::-webkit-input-placeholder,
  input::-moz-placeholder,
  input:-ms-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
  }
  
  /* --- SHOW LOGO IN COLOR --- */
  .logo {
    display: block !important;
    width: 60px !important;
    height: 40px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  .logo img {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* --- HEADER OPTIMIZATION --- */
  .header {
    margin-bottom: 2mm !important;
    padding-bottom: 4mm !important;
    border-bottom: 1.5px solid #333 !important;
    page-break-inside: avoid !important;
  }
  
  .company-short-name {
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin: 0 0 1mm 0 !important;
    letter-spacing: 1px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Document-specific company name colors in print */
  #invoice .company-short-name {
    color: var(--invoice-blue) !important;
  }
  
  #quotation .company-short-name {
    color: var(--quotation-green) !important;
  }
  
  #delivery .company-short-name {
    color: var(--delivery-red) !important;
  }
  
  .company-full-name {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin: 0.5mm 0 !important;
    font-weight: 400 !important;
  }

  .company-trn {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin: 0.5mm 0 0 0 !important;
    font-weight: 400 !important;
  }
  
  /* --- DOCUMENT TITLE (h2) --- */
  h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 2mm 0 3mm 0 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  #invoice h2 { 
    color: var(--invoice-blue) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  #quotation h2 { 
    color: var(--quotation-green) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  #delivery h2 { 
    color: var(--delivery-red) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* --- CUSTOMER & INVOICE DETAILS (PRINT) --- */
  .details {
    display: flex !important;
    justify-content: space-between !important;
    margin: 3mm 0 !important;
    gap: 8mm !important;
  }
  
  /* LEFT: Customer Details */
  .customer-details {
    flex: 1 !important;
    max-width: 95mm !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5mm !important; /* Minimal spacing - prevent extra rows */
  }
  
  .customer-details div {
    display: flex !important;
    align-items: center !important;
    gap: 1mm !important; /* Reduced gap - values closer to labels */
    min-height: 4mm !important; /* Reduced height */
    height: 4mm !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ALL Labels - BOLD, same size, consistent font */
  .customer-details label {
    font-family: Arial, sans-serif !important;
    font-size: 11pt !important; /* Use pt for print consistency */
    font-weight: 400 !important; /* Regular weight - only bold for name and doc number */
    color: #000 !important;
    width: 9mm !important;
    text-align: left !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ALL Inputs - UNBOLD, BORDERLESS for print, consistent font */
  .customer-details input {
    flex: 1 !important;
    font-family: Arial, sans-serif !important;
    font-size: 11pt !important; /* Use pt for print consistency */
    font-weight: 400 !important;
    color: #333 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 1mm !important; /* Minimal padding */
    height: 4mm !important;
    min-height: 4mm !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  
  /* Customer name - BOLD, allow long company names */
  .customer-details input[data-cell="name"] {
    font-weight: 700 !important; /* BOLD for company name */
    font-size: 11pt !important;
    max-width: none !important; /* Allow full width for long names */
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
  }
  
  /* RIGHT: Invoice Details */
  .invoice-details {
    min-width: 50mm !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5mm !important; /* Minimal spacing - SAME as left */
    align-items: flex-end !important;
  }
  
  /* Two-column grid (label | value) so labels and value boxes all line up */
  .invoice-details div {
    display: grid !important;
    grid-template-columns: 11mm 28mm !important;
    align-items: center !important;
    column-gap: 1.5mm !important;
    min-height: 4mm !important;
    height: 4mm !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ALL Labels - Regular weight, consistent font */
  .invoice-details label {
    font-family: Arial, sans-serif !important;
    font-size: 11pt !important; /* Use pt for print consistency */
    font-weight: 400 !important; /* Regular weight - only bold for doc number */
    color: #000 !important;
    width: auto !important;
    text-align: left !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ALL Inputs - UNBOLD except doc number, consistent font */
  .invoice-details input {
    font-family: Arial, sans-serif !important;
    font-size: 11pt !important; /* Use pt for print consistency */
    font-weight: 400 !important;
    color: #333 !important;
    border: none !important; /* No border by default */
    padding: 0 1mm !important; /* Minimal padding */
    height: 4mm !important;
    min-height: 4mm !important;
    line-height: 1 !important;
    text-align: right !important;
    width: 100% !important; /* fill the value column */
    background: transparent !important;
    margin: 0 !important;
  }

  /* Date - borderless, UNBOLD, consistent font, match size */
  .invoice-details .date-cell,
  .invoice-details .date-display {
    border: none !important;
    background: transparent !important;
    font-weight: 400 !important;
    font-size: 11pt !important;
    line-height: 1 !important;
    padding: 0 1mm !important;
    margin: 0 !important;
    width: 100% !important; /* fill the value column */
    text-align: right !important;
    white-space: nowrap !important; /* Prevent wrapping */
    overflow: hidden !important;
  }

  /* Document number - BOLD with box and rounded corners (only value that's bold besides company name) */
  .invoice-details input[id$="-number"] {
    font-weight: 700 !important;
    color: #000 !important;
    border: 1px solid #bbb !important; /* Only doc number has border */
    border-radius: 4px !important; /* Rounded corners */
    /* Reset native control styling so the browser honours border-radius when
       PRINTING (Safari/Chrome draw inputs as square boxes otherwise). */
    -webkit-appearance: none !important;
    appearance: none !important;
    background: white !important;
    width: 100% !important; /* fill the value column (snug, fits IN-26-7000) */
    padding: 0 2mm !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* The doc number is the only bordered value, and the column gap is just
     0.5mm — so its box top border landed a hairline under the Date row and
     read as if it were pressing on it. Give this one row a little air; the
     rows below are unaffected, so nothing else on the A4 page moves.
     Specificity (0,2,2) beats the `margin: 0 !important` on
     `.invoice-details div` above. */
  .invoice-details div:has(input[id$="-number"]) {
    margin-top: 1.2mm !important;
    margin-bottom: 0.6mm !important; /* keeps the box centred between Date and Ref */
  }

  /* Hide staff dropdown */
  .invoice-details select,
  .invoice-details div:has(select) {
    display: none !important;
  }

  /* Hide empty optional fields on print (email/mobile/TRN/ref) so an empty row
     never prints as a bare label like "Email:". Name always prints. */
  .customer-details div:has(input[data-cell="mobile"]:placeholder-shown),
  .customer-details div:has(input[data-cell="email"]:placeholder-shown),
  .customer-details div:has(input[data-cell="trn"]:placeholder-shown),
  .invoice-details div:has(input[id$="-ref"]:placeholder-shown) {
    display: none !important;
  }
  /* Belt-and-braces: never print placeholder text on any document input */
  #invoice input::placeholder,
  #quotation input::placeholder,
  #delivery input::placeholder,
  #receipt input::placeholder { color: transparent !important; }
  
  /* --- ITEMS TABLE --- */
  .items-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 4mm 0 4mm 0 !important;
    page-break-inside: auto !important;
    border: 1px solid white !important;
  }
  
  .items-table thead {
    page-break-inside: avoid !important;
  }
  
  .items-table tbody {
    page-break-inside: auto !important;
  }
  
  .items-table tr {
    page-break-inside: avoid !important;
    border-bottom: 1px solid #ddd !important;
  }
  
  .items-table th {
    padding: 4px 6px !important;
    font-size: 14px !important;
    height: 22px !important;
    color: white !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Document-specific table header colors in print */
  #invoice .items-table th {
    background: var(--invoice-blue) !important;
    border: 1px solid var(--invoice-blue) !important;
  }
  
  #quotation .items-table th {
    background: var(--quotation-green) !important;
    border: 1px solid var(--quotation-green) !important;
  }
  
  #delivery .items-table th {
    background: var(--delivery-red) !important;
    border: 1px solid var(--delivery-red) !important;
  }
  
  .items-table td {
    padding: 4px 6px !important;
    font-size: 12px !important;
    height: 22px !important;
    border: 1px solid #ddd !important;
  }

  /* Increase font size for Qty, Price, Amount columns by 2px */
  #invoice .items-table td:nth-child(4),
  #invoice .items-table td:nth-child(5),
  #invoice .items-table td:nth-child(6),
  #quotation .items-table td:nth-child(4),
  #quotation .items-table td:nth-child(5),
  #quotation .items-table td:nth-child(6) {
    font-size: 14px !important;
  }
  
  .items-table input {
    font-size: 12px !important;
    height: 18px !important;
    padding: 2px 4px !important;
    border: none !important;
    background: transparent !important;
  }
  
  /* --- TABLE FOOTER & TOTALS --- */
  .items-table tfoot {
    page-break-inside: avoid !important;
  }
  
  /* RESET ALL tfoot cells first */
  .items-table tfoot tr td {
    padding: 0 !important;
    font-size: 10px !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
  }
  
  /* Merged cell for Total in Words - left side spanning 3 rows */
  .items-table tfoot td.words-cell-merged {
    vertical-align: top !important;
    padding: 6px 8px !important;
    border: none !important;
    background: transparent !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  #invoice .items-table tfoot td.words-cell-merged,
  #quotation .items-table tfoot td.words-cell-merged {
    border-left: 1px solid white !important;
    border-right: 1px solid white !important;
    border-bottom: 1px solid white !important;
  }
  
  /* ONLY apply borders to total cells */
  .items-table tfoot tr td.total-label,
  .items-table tfoot tr td.total-value {
    background: transparent !important;
    border: none !important;
    font-weight: normal !important;
    font-size: 14px !important;
    padding: 2px 4px !important;
    height: 20px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Make Grand Total label bold */
  #invoice .items-table tfoot tr:nth-child(3) td.total-label,
  #quotation .items-table tfoot tr:nth-child(3) td.total-label {
    font-weight: bold !important;
  }

  /* Remove bottom border under Grand Total cell */
  #invoice .items-table tfoot tr:last-child td.total-value,
  #quotation .items-table tfoot tr:last-child td.total-value {
    border-bottom: none !important;
  }

  /* Make only Grand Total value bold, others normal weight */
  #invoice .items-table tfoot tr:nth-child(1) td.total-value,
  #invoice .items-table tfoot tr:nth-child(2) td.total-value,
  #quotation .items-table tfoot tr:nth-child(1) td.total-value,
  #quotation .items-table tfoot tr:nth-child(2) td.total-value {
    font-weight: normal !important;
  }

  #invoice .items-table tfoot tr:nth-child(3) td.total-value,
  #quotation .items-table tfoot tr:nth-child(3) td.total-value {
    font-weight: bold !important;
  }
  
  /* --- WORDS IN TABLE FOOTER --- */
  .words-inline {
    font-size: 10px !important;
    text-align: left !important;
    page-break-inside: avoid !important;
    line-height: 1.4 !important;
    font-style: italic !important;
    color: #666 !important;
    font-weight: normal !important;
  }
  
  /* --- TERMS & ACCOUNT DETAILS --- */
  /* Show terms text but without any box/border in print */
  .terms-editable {
    display: block !important;
    margin-top: 3mm !important;
    margin-bottom: 2mm !important;
    padding: 0 !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    color: #666 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 70% !important;
    width: 70% !important;
    height: auto !important;
    min-height: 0 !important;
    resize: none !important;
    page-break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .account-details {
    margin-top: 3mm !important;
    margin-bottom: 0 !important;
    padding: 3mm 4mm !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    page-break-inside: avoid !important;
    background: white !important;
    border: 1px solid #999 !important;
    border-radius: 2px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  .account-details strong {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  /* Set color for "Thank you for your business!" to match document color */
  #invoice .account-details strong { color: var(--invoice-blue) !important; }
  #quotation .account-details strong { color: var(--quotation-green) !important; }
  #delivery .account-details strong { color: var(--delivery-red) !important; }

  /* Make footer text black and normal weight */
  .footer { color: #000 !important; font-weight: normal !important; }
  
  .notes-section {
    display: none !important; /* Hide to save space */
  }
  
  /* --- SIGNATURES --- */
  .signatures {
    display: flex !important;
    position: absolute !important;
    bottom: 18mm !important;
    left: 8mm !important;
    right: 8mm !important;
    width: calc(100% - 16mm) !important;
    justify-content: space-between !important;
    page-break-inside: avoid !important;
  }
  
  .signatures .signatory {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .signatures .receiver .signature-space {
    width: 180px !important;
    height: 60px !important;
    border: 2px dashed #999 !important;
    margin-bottom: 3px !important;
  }
  
  .signatures .authorized img {
    display: block !important;
    width: 240px !important;
    height: 110px !important;
    object-fit: contain !important;
    margin-bottom: 3px !important;
  }
  
  .signatory span {
    font-size: 11px !important;
    color: #555 !important;
    font-weight: 500 !important;
  }
  
  #delivery .signatures .authorized span,
  #invoice .signatures .authorized span {
    color: #555 !important;
  }
  
  /* --- FOOTER --- */
  .footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 8mm !important;
    right: 8mm !important;
    width: calc(100% - 16mm) !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    padding-top: 2mm !important;
    padding-bottom: 2mm !important;
    margin: 0 !important;
    border-top: 1.5px solid #333 !important;
    page-break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  .footer::before {
    content: none !important;
    display: none !important;
  }
  
  #invoice .footer {
    border-top-color: var(--invoice-blue) !important;
  }
  
  #quotation .footer {
    border-top-color: var(--quotation-green) !important;
  }
  
  #delivery .footer {
    border-top-color: var(--delivery-red) !important;
  }
  
  /* --- LAYOUT CONTAINERS --- */
  .main-content {
    width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .app-container {
    width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .header-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}
/* ============================================================ */
/* END OF CONSOLIDATED PRINT STYLES                            */
/* ============================================================ */

/* --- Screen-only centering override --- */
@media screen {
  .app-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    align-items: center !important;
  }
  .main-content {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .header-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .document {
    margin: 10mm auto !important;
  }
}

/* Plain total-in-words area under the table (invoice) */
.words-below {
  margin: 8px 0 6px 0 !important; /* small gap under table */
  font-size: 0.98em !important;
  font-weight: 600 !important;
  color: #0760a8 !important; /* same tone used for words */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* maximum two lines */
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Inline total-in-words inside invoice table footer (left area) */
.items-table tfoot tr.words-row td.words-cell {
  border: none !important;
  background: transparent !important;
  padding: 0 6px !important; /* a touch tighter above totals */
  vertical-align: top !important;
  text-align: left !important; /* ensure left alignment */
  height: auto !important; /* allow 2 text lines comfortably */
}
/* Ensure any generic nth-child alignment doesn’t affect the words row */
.items-table tfoot tr.words-row td { text-align: left !important; }
@media print {
  .items-table tfoot tr.words-row td.words-cell { padding: 2px 4px !important; text-align: left !important; }
  .words-inline { font-size: 11px !important; page-break-inside: avoid !important; text-align: left !important; max-height: calc(1.25em * 2) !important; min-height: calc(1.25em * 2) !important; }
}

/* Collapse gap exactly after the items table */
.items-table + .terms-editable { margin-top: 0 !important; }
#delivery .terms-editable { margin-top: 40px !important; }
.terms-editable + .account-details { margin-top: 0.05em !important; /* a touch tighter */ }

/* General trims (screen) */
.terms-editable { margin-top: 0 !important; /* tight */ }
.account-details { margin-top: 0.1em !important; /* tighter */ }

/* Contacts modal styles */
.contacts-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 2400;
}
.contacts-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 900px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);
  background: var(--white); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: flex; flex-direction: column; overflow: hidden; z-index: 2500;
}
.contacts-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--grey-border); background: #f7f9fc;
}
.contacts-title { font-size: 18px; font-weight: 700; color: #1f2d3d; }
.contacts-actions { display: flex; gap: 8px; align-items: center; }
.contacts-actions input[type="search"] {
  width: 280px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--grey-border);
  font-size: 14px;
}
.btn-primary { background: #2E5C8A; color: #fff; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.btn-secondary { background: #e8eef6; color: #1f2d3d; border: 1px solid #c7d5ea; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.btn-ghost { background: transparent; color: #1f2d3d; border: 1px solid var(--grey-border); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.btn-danger { background: #e55353; color: #fff; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.contacts-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; min-height: 460px; }
.contacts-list { border-right: 1px solid var(--grey-border); overflow: auto; }
.contacts-list .contact-item { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 10px 12px; cursor: pointer; align-items: center; }
.contacts-list .contact-item:hover { background: #f5f8fb; }
.contacts-list .contact-name { font-weight: 600; color: #1f2d3d; }
.contacts-list .contact-meta { font-size: 12px; color: #5b6b7a; }
.contacts-detail { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #334e68; }
.detail-grid input, .detail-grid textarea { border: 1px solid var(--grey-border); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.detail-actions { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 820px) {
  .contacts-body { grid-template-columns: 1fr; }
  .contacts-list { max-height: 40vh; border-right: none; border-bottom: 1px solid var(--grey-border); }
}
@media print {
  .contacts-overlay, .contacts-modal { display: none !important; }
}
/* End Contacts modal styles */

/* Print: ensure header underline uses document color */
@media print {
  #invoice .header { border-color: var(--invoice-blue) !important; }
  #quotation .header { border-color: var(--quotation-green) !important; }
  #delivery .header { border-color: var(--delivery-red) !important; }

  /* Table header top border matches document color */
  #invoice .items-table th { border-top: 1px solid var(--invoice-blue) !important; }
  #quotation .items-table th { border-top: 1px solid var(--quotation-green) !important; }
  #delivery .items-table th { border-top: 1px solid var(--delivery-red) !important; }
}

/* ===== MOBILE RESPONSIVE - OPTIMIZED FOR IPHONE 15 PRO MAX ===== */

/* iPhone 15 Pro Max: 430x932 px, 6.7" display */
/* General mobile optimization for all phones */

@media only screen and (max-width: 768px) {
  
  /* Body & Container */
  body {
    font-size: 14px;
    overflow-x: clip; /* clip keeps sticky header working; hidden would break it */
    -webkit-text-size-adjust: 100%;
  }
  
  .app-container {
    padding: 0;
    margin: 0;
    max-width: 100%;
  }
  
  /* Header Bar - Make it mobile-friendly with compact layout */
  .header-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px 6px;
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    align-items: center;
  }
  
  /* Row 1 = dashboard/edit/convert, Row 2 = doc tabs. Each takes a full width
     row so nothing gets clipped or scrolled out of reach. */
  .header-left, .header-right {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: visible; /* override base overflow-x:auto so nothing is clipped */
    gap: 6px;
    align-items: center;
  }

  .header-center {
    display: none; /* empty spacer – not needed on mobile */
  }
  
  /* Buttons - Touch-friendly with better sizing */
  .header-bar button, .doc-tab {
    font-size: 12px;
    padding: 8px 12px;
    min-height: 44px; /* iOS minimum touch target */
    border-radius: 8px;
    flex: 0 0 auto;
    white-space: nowrap;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    cursor: pointer;
  }
  
  /* Dashboard button */
  #tab-overview {
    font-size: 12px;
    padding: 8px 12px;
  }
  
  /* Convert buttons.
     These used to set font-size/padding/min-height here. Because an ID selector
     has specificity 1,0,0 and `.header-bar button` only 0,1,1, this block beat the
     narrower `@media (max-width: 480px)` rule below EVEN THOUGH that rule comes
     later — so on a phone every other header button shrank to min-height 32px
     while Convert stayed at 44px and visibly towered over its neighbours.
     Sizing is now left entirely to the shared `.header-bar button` rules, which
     both breakpoints style consistently. */
  #create-invoice-btn,
  #create-delivery-btn {
    /* intentionally no size properties — see above */
  }
  
  /* Document type tabs - IMPORTANT: Must be tappable */
  .header-right button {
    font-size: 13px;
    padding: 10px 14px;
    min-height: 44px;
    min-width: 80px;
    font-weight: 600;
  }
  
  /* Active tab styling for mobile */
  .doc-tab.active-tab {
    background: var(--primary-blue);
    color: white;
    font-weight: 700;
  }
  
  /* Print button - Fixed, prominent */
  .print-btn {
    position: fixed;
    bottom: 12px;
    right: 12px;
    width: auto;
    font-size: 13px;
    padding: 10px 16px;
    min-height: 44px; /* iOS touch target */
    border-radius: 10px;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }

  /* SAVE / download-PDF button is hidden on mobile — staff save PDFs via
     Safari's built-in print dialog, so the separate PDF template isn't needed. */
  .pdf-btn {
    display: none !important;
  }
  
  /* Document Container - Full width on mobile */
  .document {
    padding: 10px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    width: 100%;
  }
  
  /* Header Section */
  .header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    text-align: left;
    padding: 8px 0;
  }
  
  .logo {
    width: 60px;
    height: 60px;
    margin: 0;
    order: 2; /* Move logo to right */
  }
  
  .company-details {
    order: 1;
    flex: 1;
  }
  
  .company-short-name {
    font-size: 18px;
  }
  
  .company-full-name {
    font-size: 11px;
  }
  
  .company-trn {
    font-size: 10px;
  }
  
  /* Document Title */
  .document h2 {
    font-size: 16px;
    margin: 12px 0 8px;
  }
  
  /* Customer & Invoice Details - Mobile responsive */
  .details {
    flex-direction: column;
    gap: 12px;
    margin: 10px 0;
  }
  
  .customer-details,
  .invoice-details {
    width: 100%;
    max-width: 100%;
  }
  
  .customer-details {
    gap: 3px; /* CONSISTENT spacing */
  }
  
  .invoice-details {
    gap: 3px; /* CONSISTENT spacing - SAME as left */
    align-items: flex-start;
  }
  
  .customer-details div,
  .invoice-details div {
    gap: 8px;
    height: 36px; /* CONSISTENT height */
  }
  
  /* ALL Labels - BOLD, same size, left-aligned */
  .customer-details label,
  .invoice-details label {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    width: 40px;
    text-align: left;
  }
  
  /* ALL Inputs - UNBOLD except name and doc number */
  .customer-details input,
  .invoice-details input,
  .invoice-details select {
    font-family: Arial, sans-serif;
    font-size: 14px; /* Prevent iOS zoom */
    font-weight: 400;
    color: #333;
    padding: 6px 10px;
    height: 36px;
  }
  
  /* Customer name - BOLD */
  .customer-details input[data-cell="name"] {
    font-weight: 700;
    font-size: 14px;
  }
  
  /* Date - UNBOLD */
  .invoice-details .date-display {
    font-weight: 400;
  }
  
  /* Document number - BOLD */
  .invoice-details input[id$="-number"] {
    font-weight: 700;
    color: #000;
  }
  
  .invoice-details div {
    display: flex; /* restore flex layout on small screens (grid is desktop-only) */
    grid-template-columns: none;
    justify-content: flex-start;
  }
  .invoice-details input,
  .invoice-details select,
  .invoice-details .date-cell { width: auto; }
  .invoice-details input[id$="-number"] { width: auto; min-width: 110px; }
  
  /* Date display - NO BOX on mobile */
  .date-cell,
  .date-display {
    flex: 1;
    min-height: 36px;
    font-size: 13px;
    padding: 6px 8px;
    border: none !important;
    background: transparent !important;
    font-weight: 600;
  }
  
  /* Items Table - horizontal scroll wrapper */
  .main-content {
    padding: 8px;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Wrap items-table in a scrollable container */
  .items-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 11px;
  }

  .items-table thead,
  .items-table tbody,
  .items-table tfoot,
  .items-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  /* Fixed column widths for mobile scroll */
  .items-table th:nth-child(1), .items-table td:nth-child(1) { width: 28px; }   /* Sno */
  .items-table th:nth-child(2), .items-table td:nth-child(2) { width: 90px; }   /* Model */
  .items-table th:nth-child(3), .items-table td:nth-child(3) { width: 110px; }  /* Description */
  .items-table th:nth-child(4), .items-table td:nth-child(4) { width: 48px; }   /* Qty */
  .items-table th:nth-child(5), .items-table td:nth-child(5) { width: 60px; }   /* Price */
  .items-table th:nth-child(6), .items-table td:nth-child(6) { width: 60px; }   /* Amount */

  .items-table th, .items-table td {
    padding: 4px 3px;
    font-size: 11px;
  }

  .items-table input, .items-table textarea {
    font-size: 14px; /* prevent iOS zoom */
    padding: 4px 3px;
    min-height: 30px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Smaller number inputs */
  .items-table input.qty,
  .items-table input.price {
    font-size: 13px;
    padding: 3px 2px;
  }
  
  /* Line totals */
  .items-table .line-total {
    font-size: 11px;
    padding: 4px 3px;
  }
  
  /* Footer totals in table */
  .items-table tfoot td {
    font-size: 11px;
    padding: 4px 3px;
  }
  
  .items-table tfoot .total-label,
  .items-table tfoot .total-value {
    font-size: 11px;
  }
  
  /* Words inline */
  .words-inline {
    font-size: 10px;
    padding: 4px;
  }
  
  /* Notes & Terms */
  .terms-editable {
    font-size: 11px;
    padding: 10px;
    min-height: 64px;
    border-radius: 6px;
    margin: 14px 0; /* clear separation from table above and signatures below */
    width: 100%;
    box-sizing: border-box;
  }

  /* Account details box */
  .account-details {
    font-size: 10px;
    padding: 8px;
    margin: 12px 0;
  }

  /* On-screen (mobile) only: hide the signature, terms/notes, bank details and
     footer — they overlap the totals on the small screen. These still print
     (the @media print rules are separate), so the printed page is unchanged
     and identical to desktop. */
  .signatures,
  .terms-editable,
  .account-details,
  .footer {
    display: none !important;
  }

  /* On-screen (mobile) only: render the invoice/quotation totals as a clean,
     right-aligned stack. The merged "amount in words" cell and empty helper
     columns break the fixed-table layout on small screens, so hide them here.
     Print is untouched (separate @media print rules), so the PDF is unchanged. */
  :is(#invoice, #quotation) .items-table tfoot {
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
  :is(#invoice, #quotation) .items-table tfoot tr {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
  :is(#invoice, #quotation) .items-table tfoot td:not(.total-label):not(.total-value) {
    display: none !important; /* hides the empty words cell + helper columns */
  }
  :is(#invoice, #quotation) .items-table tfoot td.total-label {
    display: inline-block !important;
    width: auto !important;
    text-align: right !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
  }
  :is(#invoice, #quotation) .items-table tfoot td.total-value {
    display: inline-block !important;
    width: 110px !important;
    text-align: right !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 4px 6px 4px 0 !important;
    border: none !important;
    background: transparent !important;
  }
  :is(#invoice, #quotation) .items-table tfoot tr:last-child td.total-label,
  :is(#invoice, #quotation) .items-table tfoot tr:last-child td.total-value {
    font-weight: 800 !important;
    font-size: 15px !important;
    padding-top: 8px !important;
  }

  .signatory {
    width: auto;
    max-width: 60%;
  }

  .signatures .receiver .signature-space {
    min-height: 28px;
  }

  .signatures .authorized img {
    max-width: 100px;
    height: auto;
  }

  .signatures span {
    font-size: 10px;
  }
  
  /* Modals - Full screen on mobile */
  .modal {
    width: 92%;
    max-width: 92%;
    margin: 15px auto;
    border-radius: 10px;
    padding: 16px;
  }
  
  .modal h3 {
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .modal input {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 10px;
    min-height: 44px;
  }
  
  .modal button {
    font-size: 14px;
    padding: 10px 20px;
    min-height: 44px;
    border-radius: 8px;
    margin-top: 8px;
  }
  
  /* Pull record error message */
  .pull-error-message {
    font-size: 12px;
    padding: 8px;
  }
  
  /* Login Screen - Mobile optimized */
  #login-screen > div {
    width: 88%;
    max-width: 380px;
    padding: 28px 20px;
    border-radius: 14px;
  }
  
  #login-screen img {
    width: 100px;
  }
  
  #login-screen h1 {
    font-size: 24px;
  }
  
  #login-screen p {
    font-size: 13px;
  }
  
  #login-screen button {
    font-size: 15px;
    padding: 12px 28px;
    min-height: 48px;
    border-radius: 10px;
  }
  
  /* Loading spinner */
  #login-screen .spinner {
    width: 40px;
    height: 40px;
  }
  
  /* Loading Indicator */
  #loading-indicator {
    font-size: 12px;
    padding: 10px 12px;
  }
  
  /* Touch-friendly spacing and iOS optimizations */
  button, input, select, textarea {
    -webkit-tap-highlight-color: rgba(7, 96, 168, 0.2);
  }
  
  /* Prevent iOS zoom on input focus - Critical for mobile UX */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important; /* iOS won't zoom if >= 16px */
  }
  
  /* Override for table inputs - allow slightly smaller but still readable */
  .items-table input[type="text"],
  .items-table input[type="number"],
  .items-table textarea {
    font-size: 14px !important;
  }
  
  /* Smooth scrolling for iOS */
  * {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Safe area for iPhone notch/home indicator */
  .app-container {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .header-bar {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
  }
  
  /* Fixed print button safe area */
  .print-btn {
    bottom: max(12px, env(safe-area-inset-bottom));
    right: max(12px, env(safe-area-inset-right));
  }
}

/* Portrait Mode Optimization - Less congested layout */
@media only screen and (max-width: 768px) and (orientation: portrait) {
  /* Header Bar - Better spacing in portrait */
  .header-bar {
    /* Sides only — see the safe-area note above; the shorthand form of this rule
       was one of three that silently dropped env(safe-area-inset-top). */
    padding-right: 6px;
    padding-bottom: 8px;
    padding-left: 6px;
    padding-top: max(8px, env(safe-area-inset-top));
    gap: 6px;
    min-height: auto;
  }
  
  /* Let each header row wrap so every button stays visible & tappable
     (no horizontal-scroll strip that hides the Dashboard/Edit row). */
  .header-left, .header-right {
    flex-wrap: wrap;
    overflow: visible;
  }
  
  /* Reduce header button sizes slightly in portrait */
  .header-bar button {
    font-size: 11px;
    padding: 8px 10px;
  }
  
  /* Document type tabs - Ensure visibility */
  .header-right button {
    font-size: 12px;
    padding: 10px 12px;
    min-width: 75px;
  }
  
  /* Company details - More compact */
  .company-short-name {
    font-size: 16px;
    margin-bottom: 2px;
  }
  
  .company-full-name {
    font-size: 10px;
    line-height: 1.2;
  }
  
  .company-trn {
    font-size: 9px;
  }
  
  .logo {
    width: 55px;
    height: 55px;
  }
  
  /* Document title - More compact */
  .document h2 {
    font-size: 15px;
    margin: 8px 0 6px;
  }
  
  /* Customer & Invoice details - Better spacing */
  .customer-details div,
  .invoice-details div {
    height: 34px;
    gap: 6px;
  }
  
  .customer-details,
  .invoice-details {
    gap: 2px;
  }
  
  /* Items table - More compact in portrait */
  .items-table {
    font-size: 10px;
    margin: 8px 0;
  }
  
  .items-table th,
  .items-table td {
    padding: 4px 2px;
    font-size: 10px;
  }
  
  .items-table input {
    font-size: 13px !important;
    padding: 4px 6px;
  }
  
  /* Footer elements - More compact */
  .terms-editable {
    font-size: 10px;
    padding: 6px 8px;
    margin: 8px 0;
    min-height: 60px;
  }
  
  .signatures {
    margin: 8px 0;
    gap: 12px;
  }
  
  .signatory {
    font-size: 10px;
  }
  
  .signatory img {
    max-height: 30px;
  }
  
  .footer {
    font-size: 9px;
    padding: 8px;
    margin-top: 8px;
  }
}

/* iPhone 15 Pro Max & similar large phones - Fine tuning */
@media only screen and (max-width: 430px) and (min-height: 900px) {
  /* Portrait mode - tall screen optimization */
  .document {
    min-height: auto;
    padding-bottom: 80px; /* Space for fixed print button */
  }
  
  /* Slightly larger text on bigger phones */
  .items-table th, .items-table td {
    font-size: 11px;
  }
  
  .customer-details input, .invoice-details input {
    font-size: 14px;
  }
}

/* Landscape mode on mobile - Ultra compact */
@media only screen and (max-height: 430px) and (orientation: landscape) {
  .header-bar {
    flex-direction: row;
    padding: 4px 6px;
    min-height: 40px;
  }
  
  .header-left, .header-right {
    width: auto;
    flex: 0 1 auto;
  }
  
  .header-bar button {
    font-size: 10px;
    padding: 5px 8px;
    min-height: 32px;
  }
  
  .print-btn {
    position: fixed;
    bottom: 8px;
    right: 8px;
    font-size: 12px;
    padding: 8px 14px;
    min-height: 38px;
  }
  
  .document {
    padding: 6px;
  }
  
  .header {
    padding: 4px 0;
  }
  
  .logo {
    width: 50px;
    height: 50px;
  }
  
  .company-short-name {
    font-size: 16px;
  }
}

/* Ultra compact phones (iPhone SE, 12 mini) - 375px and below */
@media only screen and (max-width: 375px) {
  .header-bar button, .doc-tab {
    font-size: 9px;
    padding: 5px 6px;
    min-height: 34px;
  }
  
  .header-right button {
    font-size: 10px;
    padding: 5px 8px;
  }
  
  .company-short-name {
    font-size: 16px;
  }
  
  .company-full-name {
    font-size: 10px;
  }
  
  .company-trn {
    font-size: 9px;
  }
  
  .document h2 {
    font-size: 14px;
  }
  
  .items-table th, .items-table td {
    font-size: 9px;
    padding: 3px 1px;
  }
  
  .items-table input {
    font-size: 13px; /* Keep readable despite smaller table */
    padding: 3px;
  }
  
  .print-btn {
    font-size: 12px;
    padding: 9px 14px;
    min-height: 42px;
  }
}

/* ===== END MOBILE RESPONSIVE ===== */

/* Customer Picker Modal */
/* ===== CUSTOMER PICKER MODAL POPUP ===== */
.customer-picker-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.customer-picker-overlay.active {
  display: flex;
}

.customer-picker-modal {
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.customer-picker-header {
  padding: 16px 20px;
  border-bottom: 2px solid #0760a8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customer-picker-header h3 {
  margin: 0;
  color: #0760a8;
  font-size: 18px;
  font-weight: 700;
}

.customer-picker-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.customer-picker-close:hover {
  background: #f0f0f0;
  color: #333;
}

.customer-picker-search {
  padding: 12px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.customer-picker-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.customer-picker-search input:focus {
  outline: none;
  border-color: #0760a8;
}

.customer-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.customer-picker-item {
  background: #f5f5f5;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.customer-picker-item:hover {
  background: #e8f0f8;
  transform: translateX(4px);
}

.customer-picker-item-name {
  font-weight: 700;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.customer-picker-item-details {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.customer-picker-loading {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.customer-picker-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-style: italic;
}

/* Make To: label clickable without changing appearance */
.customer-details label[data-picker="true"] {
  cursor: pointer;
  user-select: none;
}

.customer-details label[data-picker="true"]:hover {
  opacity: 0.7;
}

/* ===== MOBILE-ONLY PRINT FIXES ===== */
/* Fix double margins on mobile browsers (Safari/iOS) and hide footer URL */
@media print and (max-width: 768px) {
  /* Attempt to remove Safari's auto-generated URL/timestamp/page numbers */
  @page {
    margin: 0 !important;
    padding: 0 !important;
    size: auto;
  }
  
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Adjust document container to fit on A4 */
  #invoice, #quotation, #delivery {
    margin: 1mm 8mm 15mm 8mm !important;
    padding: 0 !important;
    min-height: auto !important;
    max-height: 277mm !important; /* A4 height (297mm) - top/bottom margins */
    position: relative !important;
  }
  
  /* Footer - Absolute positioning at bottom of page */
  .footer {
    position: absolute !important;
    bottom: 2mm !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    padding: 1mm 0 !important;
    margin: 0 !important;
    page-break-inside: avoid !important;
  }
  
  /* Reduce signature area height on mobile to make room for footer */
  .signature-section {
    height: 20mm !important;
    margin: 3mm 0 8mm 0 !important;
  }
  
  .signature-section > div {
    height: 15mm !important;
  }
  
  /* Hide any auto-generated browser footers/headers (limited success on iOS) */
  .header-bar, .print-btn, .save-btn, .new-btn {
    display: none !important;
  }
  
  /* Attempt to hide Safari's auto-generated content */
  header, footer {
    display: none !important;
  }
}

/* Additional attempt to hide Safari print headers/footers globally */
@media print {
  @page {
    size: auto;
    margin: 0mm;
  }

  /* Try to hide browser-generated headers/footers */
  body::before,
  body::after {
    display: none !important;
  }
}

/* ===== RECEIPT DOCUMENT STYLES ===== */
:root {
  --receipt-amber: #b45309;
  --receipt-amber-light: #f59e0b;
}

/* Receipt: slightly above half-A4 for comfortable fit */
#receipt.document {
  height: 175mm;
  min-height: 175mm;
}

/* Tighten receipt internals to prevent overflow */
#receipt h2 {
  margin: 3px 0 5px 0;
  font-size: 14px;
}
#receipt .details {
  margin-bottom: 3px;
}
#receipt .customer-details div,
#receipt .invoice-details div {
  margin-bottom: 1px;
}
#receipt .invoice-details {
  gap: 2px;
}

#receipt .header { border-color: var(--receipt-amber); }
#receipt .company-short-name { color: var(--receipt-amber); }
#receipt h2 { color: var(--receipt-amber); }
#receipt .footer { border-top-color: var(--receipt-amber) !important; color: #000 !important; }

/* Receipt customer details: only 2 rows (name + mobile), tighter */
#receipt .customer-details { gap: 4px; }
#receipt .customer-details div { margin-bottom: 2px; }

.doc-tab.active-tab#tab-receipt {
  background: var(--receipt-amber);
  color: white;
}

/* ── Receipt: Payment For row ── */
.receipt-for-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 3px 0;
  padding: 4px 8px;
  background: #fffbf0;
  border: 1px solid #e5d0a0;
  border-radius: 5px;
}

.receipt-for-row label {
  font-size: 11px;
  font-weight: 700;
  color: var(--receipt-amber);
  white-space: nowrap;
  min-width: 82px;
}

.receipt-for-row input {
  flex: 1;
  font-size: 12px;
  padding: 3px 7px;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 26px;
}

/* ── Receipt: Amount section (number top-right, words permanent box) ── */
.receipt-amount-section {
  margin: 3px 0 2px 0;
  padding: 4px 8px;
  border: 1px solid #e5d0a0;
  border-radius: 5px;
  background: #fffbf0;
}

.receipt-amount-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.receipt-amount-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--receipt-amber);
}

.receipt-amount-input-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.aed-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--receipt-amber);
}

.receipt-amount-input-group input {
  width: 130px;
  font-size: 17px;
  font-weight: 700;
  padding: 3px 8px;
  border: 2px solid var(--receipt-amber-light);
  border-radius: 5px;
  height: 30px;
  color: #222;
  text-align: right;
}

.receipt-words-slot {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--receipt-amber);
  font-style: italic;
  padding: 5px 8px;
  border: 1px solid #e5d0a0;
  border-radius: 4px;
  background: #fff;
  min-height: 28px;
  display: flex;
  align-items: center;
}

.receipt-words-slot.receipt-words-placeholder {
  color: #bbb;
  font-style: italic;
  font-weight: 400;
}

/* Receipt: prevent overflow on half-A4 */
#receipt.document {
  overflow: hidden;
}

/* Receipt terms line (replaces terms-editable textarea) */
.receipt-terms-line {
  font-size: 10.5px;
  color: #666;
  font-style: italic;
  padding: 3px 8px 2px 8px;
  text-align: center;
}

/* Single centered signature for receipt */
#receipt .signatures.receipt-sig-single {
  bottom: 20mm;
  display: flex;
  justify-content: flex-end;
  padding-right: 10mm;
}
#receipt .signatures.receipt-sig-single .authorized {
  text-align: center;
}
#receipt .signatures.receipt-sig-single .authorized img {
  height: 65px;
  width: auto;
}
#receipt .signatures.receipt-sig-single .authorized span {
  font-size: 9px;
  display: block;
  margin-top: 2px;
}

/* ===== PAYMENT METHOD SECTION ===== */
.payment-method-section {
  margin: 4px 0 3px 0;
  padding: 5px 8px;
  border: 1px solid #e5d0a0;
  border-radius: 6px;
  background: #fffbf0;
}

.payment-method-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.payment-label {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  margin-right: 2px;
  white-space: nowrap;
}

.pay-btn {
  padding: 4px 12px;
  border: 2px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  background: #f5f5f5;
  color: #888;
  transition: all 0.15s;
  letter-spacing: 0.5px;
}

.pay-btn.active {
  background: var(--receipt-amber-light);
  border-color: var(--receipt-amber);
  color: white;
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.3);
}

.cheque-details {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed #e0c880;
}

.cheque-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cheque-row label {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  white-space: nowrap;
}

.cheque-row select {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 26px;
  min-width: 160px;
}

.cheque-row input[type="date"],
.cheque-row input[type="text"] {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 26px;
}

.cheque-row input[type="text"] {
  width: 110px;
}

.cheque-row-num {
  margin-top: 4px;
}

.cheque-row-num input[type="text"] {
  flex: 1;
  width: auto;
}

/* Print styles for payment method section */
@media print {
  .payment-method-section {
    background: transparent !important;
    border: 1px solid #ccc !important;
    padding: 4px 6px !important;
    margin: 4px 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .pay-btn:not(.active) {
    display: none !important;
  }
  .pay-btn.active {
    background: transparent !important;
    border: 2px solid #333 !important;
    color: #000 !important;
    font-weight: 900 !important;
    padding: 2px 10px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .cheque-row select,
  .cheque-row input[type="date"],
  .cheque-row input[type="text"] {
    border: none !important;
    background: transparent !important;
    font-weight: 600 !important;
  }
}

/* Receipt print overrides */
@media print {
  #receipt.document {
    height: 175mm !important;
    min-height: 175mm !important;
    max-height: 175mm !important;
    padding-bottom: 22mm !important;
  }
  .receipt-for-row input,
  .receipt-amount-input-group input {
    border: none !important;
    background: transparent !important;
  }
  .receipt-for-row,
  .receipt-amount-section {
    background: transparent !important;
    border: 1px solid #ccc !important;
  }
  .receipt-words-slot {
    background: transparent !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
  }
  .receipt-words-slot.receipt-words-placeholder { display: none !important; }
  .payment-method-section.no-print-border { border-color: transparent !important; background: transparent !important; }
}

/* The Due row belongs to a rental invoice only. Hiding it with an inline
   `display:none` is not enough: the print block's `.invoice-details div {
   display: grid !important }` outranks an inline style, so a retail invoice
   printed an empty "Due:" row. setInvoiceMode() toggles this class instead —
   ID + class beats that !important on both screen and paper. When the row IS
   shown (rental), it takes the normal row styling and slots in under Ref. */
#invoice-rental-return-row.rental-row-hidden { display: none !important; }

/* A rental invoice saved without a due date must not print a bare "Due:" label.
   PRINT ONLY — on screen the field has to stay visible and pickable, otherwise
   staff could never set the date in the first place. updateRentalReturn()
   (script.js) puts this class on whenever the input is empty. */
@media print {
  #invoice-rental-return-row.rental-row-empty { display: none !important; }
}

/* ===== RESPONSIVE MOBILE HEADER (Task #10) ===== */
@media (max-width: 1024px) {
  .header-bar {
    flex-wrap: wrap;
    gap: 6px;
  }

  .header-center {
    display: none;
  }

  .header-left, .header-right {
    flex: 0 1 auto;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .header-bar {
    /* Sides only — a `padding` shorthand here resets padding-top and drops the
       safe-area inset, putting the header under the status bar. See the
       safe-area rule earlier in this file. */
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-top: max(4px, env(safe-area-inset-top));
    min-height: 44px;
  }

  .header-bar button {
    font-size: 0.75rem;
    padding: 6px 10px;
    min-height: 36px;
  }

  .header-left {
    order: 1;
    width: 100%;
    justify-content: flex-start;
  }

  .header-right {
    order: 2;
    width: 100%;
    justify-content: flex-start;
  }

  .print-btn {
    order: 3;
    width: auto;
    position: relative;
    bottom: auto;
    right: auto;
  }

  .pdf-btn {
    order: 4;
    width: auto;
    position: relative;
    bottom: auto;
    right: auto;
  }
}

@media (max-width: 480px) {
  .header-bar {
    /* Must NOT be the `padding` shorthand. This block comes after the safe-area
       rule (`padding-top: max(8px, env(safe-area-inset-top))`), and a shorthand
       resets padding-top to its own value — which dropped the ~59px inset on a
       notched iPhone and let the sticky header's first row (Dashboard /
       Edit-Reprint / Convert) sit underneath the status bar. Set the sides only. */
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-top: max(3px, env(safe-area-inset-top));
  }

  .header-bar button {
    font-size: 0.65rem;
    padding: 4px 8px;
    min-height: 32px;
  }

  .doc-tab {
    flex: 0 1 auto;
  }

  .header-left {
    gap: 3px;
  }

  .header-right {
    gap: 3px;
  }
}

/* Dashboard responsive grid (Task #10) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat-card {
    padding: 12px 10px !important;
  }

  .stat-icon {
    font-size: 1.8rem !important;
  }

  .stat-value {
    font-size: 1rem !important;
  }

  .stat-label {
    font-size: 0.7rem !important;
  }
}

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


/* ============================================================
   RESPONSIVE (mobile) SCREEN-ONLY de-clutter — PC view untouched.
   `screen and` scoping means PRINT is unaffected: the signature/
   stamp/receiver block and the footer line still appear on paper.
   ============================================================ */
@media screen and (max-width: 768px) {
  .document .signatures,
  .document .footer { display: none !important; }
}

/* SAVE and Email buttons were removed from the app — hide defensively
   in case any cached markup still references them. */
.pdf-btn, .email-btn { display: none !important; }

/* Mobile screen only: keep the tfoot totals (Subtotal/VAT/G.Total) compact so
   the Grand Total cell doesn't balloon. Print is unaffected (screen-scoped).
   Root cause of the balloon: the amount-in-words cell (rowspan=3) wraps into
   many lines in its narrow column, and the browser pushes the extra height
   into the G.Total row. Hiding the words text on the small screen removes that
   inflation — the words still print (this block is screen-scoped). */
@media screen and (max-width: 768px) {
  .document .items-table tfoot td { font-size: 11px !important; padding: 3px 5px !important; height: auto !important; line-height: 1.3 !important; }
  .document .items-table tfoot td.total-label,
  .document .items-table tfoot td.total-value { font-size: 11px !important; white-space: nowrap !important; }
  .document .items-table tfoot tr { height: 30px !important; }
  .document .items-table tfoot td.words-cell-merged .words-inline { display: none !important; }
}

/* Mobile screen only: totals proportions + a bottom action bar (screen-scoped
   so PRINT output is unaffected). */
@media screen and (max-width: 768px) {
  /* Give the value column more room, trim the label/empty side of the totals */
  .document .items-table th:nth-child(4),
  .document .items-table td:nth-child(4) { width: 38px !important; }
  .document .items-table th:nth-child(5),
  .document .items-table td:nth-child(5) { width: 54px !important; }
  .document .items-table th:nth-child(6),
  .document .items-table td:nth-child(6) { width: 86px !important; }
  .document .items-table tfoot td.total-value { text-align: right !important; padding-right: 8px !important; }

  /* PRINT + WhatsApp as a fixed bottom bar (side by side), not floating pills
     overlapping the document. */
  .print-btn, .whatsapp-btn {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    height: 50px !important;
    width: 50% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.12) !important;
    z-index: 1000 !important;
  }
  .print-btn    { left: 0 !important; right: auto !important; }
  .whatsapp-btn { left: 50% !important; right: auto !important; }
  /* keep the document clear of the bar */
  .main-content { padding-bottom: 64px !important; }
}

/* ==================== ACTION BUTTONS AT END OF PAGE (mobile) ====================
   Desktop keeps the floating PRINT/WhatsApp buttons (base rules, position:fixed).
   On phones they sit in .doc-actions at the very end of the document instead of
   floating over the content. Higher specificity + !important beats the many
   older mobile rules that pin these buttons to fixed positions. */
@media only screen and (max-width: 768px) {
  /* Two rows, not one: Retail/Rental on top, PRINT/WhatsApp underneath.
     Without wrap all four buttons share a single row and the mode switch
     crushes PRINT and WhatsApp.

     align-self/width are what make PRINT and WhatsApp the same size on every
     tab. .main-content is a column flex with align-items:center, so this box
     shrink-wraps its contents unless told otherwise. On Invoice the mode
     switch's flex-basis:100% pushed it out to the full row and the buttons
     looked right by side effect; on Quotation, Delivery and Receipt — where
     the switch is hidden — the box collapsed to the two buttons' natural
     width and clipped WhatsApp's label. Stretching the container instead
     makes the row full-width whether or not the switch is in it. */
  .doc-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 16px;
    margin: 12px 0 28px;
  }
  .doc-actions .print-btn,
  .doc-actions .whatsapp-btn {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
    /* Square corners and an upward shadow are left over from when these were a
       fixed bar pinned to the bottom edge. In the flow they need the normal
       button shape so they match Retail/Rental above them. */
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    font-size: 14px !important;
  }
}

/* ─── Invoice mode switch (retail / rental) ──────────────────────────────────
   Lives beside PRINT in .doc-actions and is .no-print — it changes the title,
   the terms and what is saved, but never appears on the customer's copy.
   Invoice tab only: showDocument() hides it inline on the other three tabs. */
.mode-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-right: 8px;
}
.mode-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mode-btn:hover { color: #0f172a; background: rgba(255, 255, 255, 0.7); }
.mode-btn.active {
  background: #fff;
  color: #0760a8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Return date is derived, so it reads as a value rather than an editable field. */
.rental-return {
  color: #b45309;
  font-weight: 700;
  background: transparent;
  cursor: default;
}

@media only screen and (max-width: 768px) {
  /* On a phone the pill stays a pill — it is a switch, not a pair of action
     buttons, and it must not read as a third button next to PRINT/WhatsApp.
     It only stretches to a full-width row of its own; flex-basis:100% is what
     forces PRINT onto the next line. No `display` here on purpose: showDocument()
     hides this element inline for non-invoice tabs, and a `display: flex
     !important` would win against that inline style and leak the switch onto
     Quotation / Delivery Order / Receipt. */
  .mode-switch {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    justify-content: stretch;
  }
  .mode-btn { flex: 1; padding: 10px 6px; font-size: 13px; }
}