:root {
  /* Responsive typography + control sizing (desktop-first, supports HiDPI/4K) */
  /* Reverted to standard enterprise sizing for clarity & professional look */
  --bms-font: clamp(13px, 0.12vw + 12px, 15px);
  --bms-font-sm: clamp(12px, 0.10vw + 11px, 13px);
  --bms-font-xs: clamp(11px, 0.08vw + 10px, 12px);
  
  /* Control sizing - optimized for mouse & touch hybrid */
  --bms-control-py: clamp(8px, 0.1vw + 7px, 10px);
  --bms-control-px: 14px;
  --bms-control-radius: 8px;

  /* Brand - Modern Indigo/Violet Vibrancy */
  --primary: #4f46e5;       /* Indigo 600 */
  --primary-2: #4338ca;     /* Indigo 700 */
  --warning: #f59e0b;       /* Amber 500 */
  --success: #10b981;       /* Emerald 500 */
  --danger: #ef4444;        /* Red 500 */

  /* Chart palette - Vibrant & Distinct */
  --chart-blue: #4f46e5;
  --chart-indigo: #8b5cf6;
  --chart-sky: #0ea5e9;
  --chart-cyan: #06b6d4;
  --chart-teal: #14b8a6;
  --chart-amber: #f59e0b;

  /* Surfaces - Clean & crisp */
  --bg: #f8fafc;
  --bg-2: #eff6ff;
  --bg-main: #f1f5f9;
  --card: #ffffff;
  --text: #334155;        /* Slate 700 - Standard enterprise dark gray */
  --muted: #64748b;       /* Slate 500 */
  --border: rgba(51, 65, 85, 0.12);

  /* Radius & spacing */
  --radius: 12px;
  --radius-sm: 8px;
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 28px;

  /* Shadows (Modern soft shadows) */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

  /* Sidebar tones */
  --sidebar-bg: rgba(255, 255, 255, 0.95);
  --sidebar-fg: #1e293b;
  --sidebar-muted: #64748b;
  --sidebar-hover: rgba(79, 70, 229, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  font-size: var(--bms-font);
}

body {
  /* Modern mesh gradient background */
  background: 
    radial-gradient(at 10% 10%, rgba(79, 70, 229, 0.12) 0px, transparent 50%),
    radial-gradient(at 90% 0%, rgba(14, 165, 233, 0.12) 0px, transparent 50%),
    radial-gradient(at 50% 90%, rgba(245, 158, 11, 0.05) 0px, transparent 50%),
    linear-gradient(180deg, #f1f5f9, #f8fafc);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  /* background-attachment: fixed is janky on many mobile browsers */
  body {
    background-attachment: scroll;
  }
}

/* Quotation print template */
.quote-print {
  display: none;
}

.qpt-header {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.qpt-header-center {
  text-align: center;
}

.qpt-seller-name {
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 18pt;
  font-family: "Times New Roman", Times, serif;
}

.qpt-seller-addr,
.qpt-seller-contact {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.qpt-title {
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 12pt;
  margin-top: 8px;
  font-family: "Times New Roman", Times, serif;
}

.qpt-to {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 12px 0;
}

.qpt-meta {
  text-align: right;
  white-space: nowrap;
}

.qpt-attn {
  margin-top: 0;
  line-height: 1.25;
}

.qpt-attn strong,
.qpt-attn span {
  line-height: inherit;
  vertical-align: baseline;
}

.qpt-customer {
  font-weight: 800;
  font-family: "Times New Roman", Times, serif;
}

.qpt-intro {
  margin: 8px 0 10px 0;
}

.qpt-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: visible;
}

.qpt-table th,
.qpt-table td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  vertical-align: top;
}

.qpt-table th {
  background: var(--card);
  font-weight: 800;
  font-family: "Times New Roman", Times, serif;
}

.qpt-sub {
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
}

.qpt-num {
  text-align: right;
  white-space: nowrap;
}

.qpt-total-label-cell {
  text-align: center;
}

.qpt-total-val-cell {
  font-weight: 800;
}

.qpt-words {
  margin-top: 6px;
}

.qpt-terms {
  margin-top: 10px;
  font-size: 12px;
}

.qpt-sign {
  margin-top: 18px;
  text-align: left;
}

.qpt-signline {
  margin-top: 40px;
}

@media print {
  @page {
    margin: 12mm;
  }

  html,
  body {
    height: auto !important;
    overflow: visible !important;
  }

  body {
    background: #fff;
    color: #000;
    font-family: Cambria, "Cambria Math", serif;
    font-size: 12pt;
  }

  /* Ensure print template uses Cambria for content */
  .quote-print {
    font-family: Cambria, "Cambria Math", serif;
  }

  /* Headings in Times New Roman */
  .quote-print strong,
  .quote-print th,
  .qpt-title,
  .qpt-seller-name {
    font-family: "Times New Roman", Times, serif;
  }

  /* Force visible table borders in PDF print */
  .qpt-table,
  .qpt-table th,
  .qpt-table td {
    border-color: #000 !important;
  }

  /* PI detail (screen table) should also print clearly when printed */
  .pi-lines-table,
  .pi-lines-table th,
  .pi-lines-table td {
    border-color: #000 !important;
    border-width: 1px !important;
    border-style: solid !important;
  }

  /* Ensure rectangular corners in print (global table styles use border-radius). */
  .qpt-table {
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* Make table slightly smaller so optional columns fit on one page */
  .qpt-table {
    font-size: 10pt;
  }

  .qpt-table th,
  .qpt-table td {
    padding: 4px 6px;
    line-height: 1.2;
  }

  .qpt-table th,
  .qpt-table td {
    border-width: 1px !important;
    border-style: solid !important;
  }

  /* Ensure the outer table border always renders */
  .qpt-table {
    outline: 1px solid #000;
    outline-offset: -1px;
  }

  /* Quotation print: customer details block should not have a box outline */
  .qpt-to-left {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Quotation print: keep borders only for the product table */
  .quote-print,
  .qpt-header,
  .qpt-header-center,
  .qpt-to,
  .qpt-meta,
  .qpt-intro,
  .qpt-words,
  .qpt-terms,
  .qpt-sign,
  .qpt-signline {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* TOTAL footer row: thicker top rule like the PDF */
  .qpt-table tr.qpt-total-row td {
    border-top-width: 2px !important;
  }

  .sidebar,
  .header,
  #quoteHeaderBar,
  #quoteMeta,
  #quoteDetailScreen,
  #piDetailScreen,
  button {
    display: none !important;
  }

  .app {
    display: block;
    height: auto !important;
  }

  .main {
    padding: 0 !important;
    overflow: visible !important;
  }

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

  /* Multi-page quotation table support */
  .qpt-table thead {
    display: table-header-group;
  }

  .qpt-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Keep TOTAL only on the last page (do not repeat like a page footer). */
  .qpt-table tfoot {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .qpt-sign {
    text-align: left;
  }

  /* Extra space for signing + stamp */
  .qpt-signline {
    margin-top: 60px;
  }

  /* PI print: keep compact signature spacing to avoid trailing blank page. */
  #piDetailPrint .qpt-signline {
    margin-top: 24px;
  }
}

a {
  color: inherit;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}