:root {
  --nav: #0f1729;
  --nav2: #1a2740;
  --primary: #233a63;
  --accent: #f06434;
  --bg: #f6f8fc;
  --panel: #ffffff;
  --ink: #0f1f3d;
  --muted: #7180a0;
  --line: #e7ecf4;
  --soft: #f8fafc;
  --good: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --shadow: 0 1px 2px rgba(16,31,61,.04), 0 8px 24px rgba(16,31,61,.06);
  --shadow-hover: 0 24px 60px rgba(16,31,61,.16);
  --radius: 12px;
  --radius-lg: 16px;
  --border: #e7ecf4;
  --bg-alt: #f8fafc;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font);
}

* { box-sizing: border-box; }
:root { color-scheme: light; }
html { overflow-x: clip; max-width: 100%; }
body { max-width: 100%; }
html { background: var(--bg); }
body { margin: 0; background:
  radial-gradient(900px 500px at 90% -10%, rgba(240,100,52,.07), transparent 60%),
  radial-gradient(700px 500px at -10% 10%, rgba(35,58,99,.06), transparent 55%),
  var(--bg); color: var(--ink); font-size: 14px; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
/* Render whole app at 80% scale so 100% browser zoom looks like 80% */
.app { zoom: 0.8; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(240,100,52,.25); outline-offset: 2px; }

.app { min-height: 125vh; width: 100%; display: grid; grid-template-columns: 268px minmax(0, 1fr); transition: grid-template-columns 0.25s ease; }
.app.sidebar-collapsed { grid-template-columns: 68px minmax(0, 1fr); }
.side {
  position: relative;
  background: linear-gradient(180deg, var(--nav), var(--nav2));
  color: #fff;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  height: 125vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: padding 0.25s ease, width 0.25s ease;
  flex-shrink: 0;
}
/* ChatGPT-style collapsed rail — icons only, no labels */
.app.sidebar-collapsed .side { padding: 16px 10px; }
.sidebar-collapsed .brand { position: relative; flex-direction: column; gap: 0; padding: 2px 0 14px; justify-content: center; }
.sidebar-collapsed .brandText { display: none; }
.sidebar-collapsed .mark { width: 42px; height: 42px; flex: 0 0 42px; font-size: 16px; transition: opacity .15s ease; }
/* logo by default; hovering swaps it to the sidebar-toggle icon (ChatGPT-style) */
.sidebar-collapsed .sideToggle { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 42px; height: 42px; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.10); opacity: 0; transition: opacity .15s ease; }
.sidebar-collapsed .brand:hover .mark { opacity: 0; }
.sidebar-collapsed .brand:hover .sideToggle { opacity: 1; }
.sidebar-collapsed .navGroupLabel { display: none; }
.sidebar-collapsed .navGroup { gap: 4px; }
.sidebar-collapsed .nav button { position: relative; justify-content: center; padding: 0; gap: 0; }
.sidebar-collapsed .nav button > span { display: none; }
.sidebar-collapsed .nav button:hover { transform: none; }
.sidebar-collapsed .navBadge { position: absolute; top: 3px; right: 8px; margin: 0; }
.sidebar-collapsed .userChip { justify-content: center; padding: 8px 0; background: none; border: 0; }
.sidebar-collapsed .userChipMeta, .sidebar-collapsed .userChipOut { display: none; }
.brand { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brandText { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.mark { position: relative; overflow: hidden; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 14px; background: linear-gradient(145deg, var(--accent), #ff7b4f); display: grid; place-items: center; font-weight: 950; font-size: 20px; box-shadow: 0 16px 30px rgba(240,100,52,.26); }
/* Brand logo image overlays the gradient "K" box; if it fails to load, onerror removes it and the K shows. */
.markLogo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 5px; box-sizing: border-box; border-radius: inherit; }
.loginCardMark { position: relative; overflow: hidden; }
.loginCardMark .markLogo { padding: 6px; }
.brand strong { display: block; font-size: 15px; line-height: 1.25; max-width: 150px; font-weight: 900; }
.brand span { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-weight: 600; font-size: 12px; }
.nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nav .userBox { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.10); border-bottom: 0; }
.nav button {
  min-height: 43px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: rgba(255,255,255,.82);
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.nav button:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(3px); }
.nav button.active { background: linear-gradient(90deg, rgba(240,100,52,.22), rgba(240,100,52,.03)); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.navIcon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,.82);
  position: relative;
  flex: 0 0 22px;
}
.navIcon::before { content: ""; width: 18px; height: 18px; display: block; background: currentColor; opacity: .95; }
.navIcon.grid::before { mask: linear-gradient(#000 0 0) 0 0/7px 7px no-repeat, linear-gradient(#000 0 0) 11px 0/7px 7px no-repeat, linear-gradient(#000 0 0) 0 11px/7px 7px no-repeat, linear-gradient(#000 0 0) 11px 11px/7px 7px no-repeat; -webkit-mask: linear-gradient(#000 0 0) 0 0/7px 7px no-repeat, linear-gradient(#000 0 0) 11px 0/7px 7px no-repeat, linear-gradient(#000 0 0) 0 11px/7px 7px no-repeat, linear-gradient(#000 0 0) 11px 11px/7px 7px no-repeat; }
.navIcon.chat::before { mask: radial-gradient(circle at 42% 42%, transparent 0 2px, #000 2.5px) 0 0/100% 100%; -webkit-mask: radial-gradient(circle at 42% 42%, transparent 0 2px, #000 2.5px) 0 0/100% 100%; border: 2px solid currentColor; background: transparent; border-radius: 5px; width: 17px; height: 14px; box-shadow: 4px 4px 0 -2px currentColor; }
.navIcon.users::before { border-radius: 50%; width: 7px; height: 7px; box-shadow: 8px 1px 0 currentColor, 0 10px 0 3px currentColor, 9px 10px 0 2px currentColor; }
.navIcon.doc::before { width: 14px; height: 18px; border: 2px solid currentColor; border-radius: 3px; background: linear-gradient(currentColor,currentColor) 3px 5px/8px 2px no-repeat, linear-gradient(currentColor,currentColor) 3px 10px/8px 2px no-repeat; }
.navIcon.file::before { width: 14px; height: 18px; border: 2px solid currentColor; border-radius: 3px; background: linear-gradient(currentColor,currentColor) 4px 9px/6px 2px no-repeat, linear-gradient(currentColor,currentColor) 7px 6px/2px 8px no-repeat; }
.navIcon.plusdoc::before { width: 14px; height: 18px; border: 2px solid currentColor; border-radius: 3px; background: linear-gradient(currentColor,currentColor) 4px 9px/6px 2px no-repeat, linear-gradient(currentColor,currentColor) 7px 6px/2px 8px no-repeat; }
.navIcon.check::before { width: 16px; height: 9px; background: transparent; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); }
.navIcon.target::before { border: 2px solid currentColor; border-radius: 50%; background: radial-gradient(circle, currentColor 0 2px, transparent 2px); }
.navIcon.bell::before { width: 15px; height: 16px; border: 2px solid currentColor; border-radius: 9px 9px 5px 5px; background: transparent; box-shadow: 0 12px 0 -6px currentColor; }
.navIcon.chart::before { width: 18px; height: 16px; background: linear-gradient(currentColor,currentColor) 1px 8px/3px 8px no-repeat, linear-gradient(currentColor,currentColor) 7px 4px/3px 12px no-repeat, linear-gradient(currentColor,currentColor) 13px 1px/3px 15px no-repeat; }
.navIcon.gear::before { border-radius: 50%; width: 18px; height: 18px; background: radial-gradient(circle, transparent 0 4px, currentColor 4px 6px, transparent 6px), conic-gradient(currentColor 0 12%, transparent 12% 24%, currentColor 24% 36%, transparent 36% 48%, currentColor 48% 60%, transparent 60% 72%, currentColor 72% 84%, transparent 84%); }
.navIcon.sliders::before { width: 18px; height: 18px; background: linear-gradient(currentColor,currentColor) 2px 3px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 2px 8px/14px 2px no-repeat, linear-gradient(currentColor,currentColor) 2px 13px/14px 2px no-repeat; }
.navIcon.trash::before { width: 15px; height: 16px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px; background: transparent; box-shadow: 0 -5px 0 -2px currentColor; }
.navIcon.archive::before { width: 18px; height: 14px; border: 2px solid currentColor; border-radius: 3px; background: linear-gradient(currentColor,currentColor) 3px 4px/10px 2px no-repeat; }
.navIcon.spark::before { clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%); }
.navBadge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.navBadge.soft { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }

/* New grouped sidebar */
.navGroup { display: flex; flex-direction: column; gap: 3px; }
.navGroupLabel { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.32); font-weight: 600; padding: 14px 12px 5px; }
.nav button svg.ic { width: 18px; height: 18px; flex: 0 0 18px; opacity: .92; }
.userChip { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.userChipAv { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(145deg, var(--primary), #3a5483); }
.userChipPhoto { object-fit: cover; background: none; }
.userChipMeta { min-width: 0; flex: 1; }
.userChipMeta b { display: block; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userChipMeta small { color: rgba(255,255,255,.5); font-size: 11px; }
.userChipOut { width: 30px; height: 30px; flex: 0 0 30px; border: 0; border-radius: 8px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); display: grid; place-items: center; }
.userChipOut svg.ic { width: 16px; height: 16px; }
.userChipOut:hover { background: rgba(240,100,52,.25); color: #fff; }
.userBox { padding: 8px 8px 12px; border-bottom: 1px solid rgba(255,255,255,.10); display: grid; gap: 8px; }
.userBox label { color: rgba(255,255,255,.62); }
.userBox .currentName { color: #fff; font-weight: 950; font-size: 14px; }
.userBox .currentRole { color: rgba(255,255,255,.62); font-size: 12px; font-weight: 800; }
.userBox b { color: #fff; font-size: 14px; }
.userBox span { color: rgba(255,255,255,.62); font-size: 12px; font-weight: 800; }
.logoutBtn { min-height: 34px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #fff; border-radius: 8px; font-weight: 600; }
.logoutBtn:hover { background: rgba(255,255,255,.13); }

.main { min-width: 0; }
/* Sidebar toggle button */
.sidebarToggle { background: none; border: none; color: var(--muted); padding: 6px 8px; border-radius: 6px; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; }
.sidebarToggle:hover { background: var(--bg2); color: var(--ink); }
/* Toggle lives in the sidebar (visible in both full and rail states) */
.sidebarToggle { display: none; }
.sideToggle { position: absolute; top: 50%; transform: translateY(-50%); right: 6px; z-index: 2; background: none; border: none; color: rgba(255,255,255,.55); line-height: 1; cursor: pointer; padding: 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.sideToggle:hover { background: rgba(255,255,255,.10); color: #fff; }
.top {
  min-height: 86px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,246,251,.92));
  border-bottom: 1px solid var(--line);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 3;
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.pageHead {
  position: relative;
  padding-left: 16px;
  text-align: left;
}
.pageHead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 5px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
h1 { margin: 0; font-size: 28px; line-height: 1.1; color: #111c30; font-weight: 800; letter-spacing: -.3px; }
.pageHead h1 { text-align: left; }
.subtitle { margin-top: 6px; color: var(--muted); font-weight: 500; font-size: 13.5px; text-align: left; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.content { padding: 22px 24px 34px; display: grid; gap: 16px; }

.btn {
  min-height: 38px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); border-color: #c6d0df; }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.small { min-height: 32px; padding: 0 9px; font-size: 12px; }
.btn.xsmall { min-height: 26px; padding: 0 7px; font-size: 11px; border-radius: 6px; }
.btn.primary { background: linear-gradient(145deg, var(--accent), #ff7d4f); border: 0; color: #fff; box-shadow: 0 8px 20px rgba(240,100,52,.30); }
.btn.primary:hover { box-shadow: 0 12px 28px rgba(240,100,52,.40); }
.btn.accent { background: linear-gradient(145deg, var(--accent), #ff7d4f); border: 0; color: #fff; box-shadow: 0 8px 20px rgba(240,100,52,.30); }
.btn.danger { background: #fff6f5; border-color: #fac1bb; color: var(--bad); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stats.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Horizontal stat card variant */
.stats.hstat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats.hstat .card { min-height: 0; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stats.hstat .card::before { display: none; }
.stats.hstat .card .statLeft { display: flex; flex-direction: column; gap: 2px; }
.stats.hstat .card .label { font-size: 13px; }
.stats.hstat .card .note { font-size: 11px; }
.stats.hstat .card .value { margin: 0; font-size: 28px; font-weight: 950; color: var(--primary); }
.card, .panel, .tablebox {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.clickable { cursor: pointer; }
.clickable:hover { border-color: rgba(240,100,52,.45); }
.card {
  min-height: 112px;
  padding: 18px;
  display: grid;
  align-content: space-between;
  transition: transform .14s ease, box-shadow .14s ease;
  position: relative;
  overflow: hidden;
}
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-130%); transition: transform .65s ease; pointer-events: none; }
.card:hover::after { transform: translateX(130%); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.statTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.iconBox { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 40px; }
.iconBox svg.ic { width: 19px; height: 19px; }
.ib-blue { background: rgba(35,58,99,.1); color: var(--primary); }
.ib-orange { background: rgba(240,100,52,.12); color: var(--accent); }
.ib-green { background: rgba(22,163,74,.12); color: var(--good); }
.ib-purple { background: rgba(124,58,237,.12); color: #7c3aed; }
.note.up { color: var(--good); }
.note.down { color: var(--bad); }
.pillDot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.avInit { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg,#eef2f9,#dde6f3); color: var(--primary); font-weight: 700; font-size: 12.5px; flex: 0 0 34px; }
.custCell { display: flex; align-items: center; gap: 11px; }
.custCell .cc-main { min-width: 0; }
.custCell .cc-main b { font-weight: 600; font-size: 13.5px; display: block; }
.custCell .cc-main small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.custCell { white-space: nowrap; }
.card.clickable:hover { border-color: rgba(240,100,52,.45); }
.label { color: var(--muted); font-weight: 600; }
.value { margin-top: 9px; font-size: 30px; line-height: 1.05; font-weight: 800; color: #0f1f3d; }
.note { color: var(--muted); font-size: 12px; font-weight: 500; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(400px, .72fr); gap: 14px; }
/* Customers page: detail left (wide), list right (narrow) */
.custLayout { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.6fr); }
.custItem.active { border-left-color: var(--primary); background: rgba(240,100,52,.08); box-shadow: 0 0 0 1px rgba(240,100,52,.35) inset; }
.custItem.active b { color: var(--primary); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.panel { padding: 16px; min-width: 0; }
.builderBasicPanel { position: relative; z-index: 20; }
.panel.dangerPanel { border-color: #fecaca; background: #fff7f7; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.head h2 { margin: 0; font-size: 16px; font-weight: 750; color: var(--ink); letter-spacing: -.015em; }
.sectionTitle {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
  margin: 2px 0 16px; padding: 0 0 13px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.sectionTitle::before {
  content: ""; width: 4px; height: 15px; border-radius: 3px; flex: 0 0 auto;
  background: var(--accent);
}
.modalbody .form > .sectionTitle:first-of-type { margin-top: 6px; }
.toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.mt { margin-top: 12px; }
.rowActions { display: flex; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.rowActionsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; white-space: nowrap; width: 150px; }
.quickGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quickAction {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: #172033;
  font-weight: 600;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.quickAction:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 10px 22px rgba(15,23,42,.09); }
.quickAction.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.quickAction.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.miniActions { margin-top: 10px; }

input, select, textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
input:hover, select:hover, textarea:hover { border-color: #bfcbda; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(240,100,52,.10); }
textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.search { max-width: 520px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; max-width: 1100px; }
.form4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.form3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.settingsRow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.field { display: grid; gap: 4px; }
.full { grid-column: 1 / -1; }
/* Premium modal form fields (New Inquiry etc.) */
.modalbody .form { gap: 16px 22px; }
/* Field with a leading icon inside the input box */
.iconField { position: relative; display: flex; align-items: center; }
.iconField .ifIco { position: absolute; left: 14px; display: inline-flex; color: #94a3b8; pointer-events: none; }
.iconField .ifIco svg { width: 16px; height: 16px; }
.iconField input { padding-left: 40px !important; }
.iconField:focus-within .ifIco { color: var(--accent); }
.srSignedWrap { display: inline-flex; align-items: center; gap: 2px; }
.srSignedX { padding: 0 8px !important; font-weight: 900; }
.srUploadBtn { cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 600; font-size: 12px; color: var(--ink); font-family: var(--font); }
.modalbody .form .iconField input { width: 100%; }
.modalbody .field { gap: 7px; }
.modalbody .field > label, .modalbody label { color: #475569; font-weight: 800; font-size: 11px; letter-spacing: .05em; }
.modalbody .form input:not([type=checkbox]):not([type=radio]):not([type=file]),
.modalbody .form select,
.modalbody .form textarea {
  min-height: 48px; border: 1.5px solid #e8edf5; border-radius: 12px; background: var(--soft);
  padding: 12px 15px; font-size: 14px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.modalbody .form input:hover, .modalbody .form select:hover, .modalbody .form textarea:hover { border-color: #cdd8e8; background: #fff; }
.modalbody .form input:focus, .modalbody .form select:focus, .modalbody .form textarea:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(240,100,52,.10); }
.modalbody .form textarea { min-height: 84px; }
.modalbody .form input.dpField { padding-right: 40px; }
label { color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.selectAdd { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px; align-items: stretch; }
.selectAdd button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--primary);
  font-size: 21px;
  font-weight: 950;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.selectAdd button:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }

/* Password field with show/hide eye toggle */
.pwWrap { position: relative; display: block; }
.pwWrap input { width: 100%; box-sizing: border-box; padding-right: 44px; }
.pwToggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted, #64748b);
  cursor: pointer;
  border-radius: 8px;
  transition: color .14s ease, background .14s ease;
}
.pwToggle svg { width: 18px; height: 18px; }
.pwToggle:hover { color: var(--primary); background: rgba(0,0,0,.05); }
:root[data-theme="dark"] .pwToggle:hover { background: rgba(255,255,255,.08); }

/* ===== New / Edit Inquiry — premium form ===== */
.inqForm2 { gap: 18px 24px; }

/* Products block */
.inqProdBlock { display: grid; gap: 10px; }
.inqProdBlock > label {
  color: #475569; font-weight: 800; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
}
.inqProdHead {
  display: grid; grid-template-columns: 3.2fr 1.4fr 80px 46px; gap: 12px;
  padding: 0 4px; color: #94a3b8; font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.inqProdHead span:nth-child(3) { text-align: center; }
.inqProdList { display: grid; gap: 10px; }
.inqProdRow {
  display: grid; grid-template-columns: 3.2fr 1.4fr 80px 46px; gap: 12px;
  align-items: center; padding: 12px; border: 1.5px solid #eef2f8;
  border-radius: 14px; background: linear-gradient(180deg, #fcfdff, #f7f9fc);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.inqProdRow:hover { border-color: #dde6f3; background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,.05); }
.inqProdRow:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(240,100,52,.08); }
.inqProdRow .inqProdQty { text-align: center; }
/* Inputs inside product rows sit on a card, so soften them vs the page fields */
.modalbody .form .inqProdRow input:not([type=checkbox]):not([type=radio]):not([type=file]) {
  min-height: 42px; border-radius: 10px; background: #fff; border-color: #e3e9f3; padding: 10px 13px;
}
.inqProdDel {
  width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
  border: 1.5px solid #f0d6d6; border-radius: 10px; background: #fff; color: #d4615a;
  transition: background .14s, color .14s, border-color .14s, transform .14s;
}
.inqProdDel svg { width: 17px; height: 17px; }
.inqProdDel:hover { background: var(--bad); border-color: var(--bad); color: #fff; transform: translateY(-1px); }
.addProdBtn {
  justify-self: start; border-style: dashed; border-color: #cdd8e8; color: var(--primary);
  font-weight: 800; padding: 9px 16px;
}
.addProdBtn:hover { border-style: solid; border-color: var(--accent); color: var(--accent); background: rgba(240,100,52,.05); }
@media (max-width: 640px) {
  .inqProdHead { display: none; }
  .inqProdRow { grid-template-columns: 1fr 1fr; }
  .inqProdRow .inqProdName { grid-column: 1 / -1; }
  .inqProdDel { width: 100%; }
}

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 0 13px;
  font-weight: 600;
  color: var(--ink);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.tabs button:hover { border-color: var(--primary); }
.tabs button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.subTabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 2px solid var(--line); }
.subTabs button { background: none; border: none; padding: 7px 16px; font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color .14s, border-color .14s; }
.subTabs button:hover { color: var(--primary); }
.subTabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.moveToTag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(240,100,52,.12); color: var(--accent); }

table { width: 100%; border-collapse: collapse; min-width: 0; font-size: 12.5px; }
.tablebox { overflow: hidden; }
/* Item List table sits inside a .panel already — drop the nested card chrome to avoid a double-layer look */
#lines .tablebox { background: transparent; border: none; box-shadow: none; border-radius: 0; }
.scroll { overflow: auto; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th {
  background: #f8fafc;
  color: #64748b;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
  font-weight: 700;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
}
td { color: #263244; font-weight: 500; text-align: left; }
.overdueDate { color: var(--bad) !important; font-weight: 700; }
:root[data-theme="dark"] .overdueDate { color: #ff6b6b !important; }
.balPending { color: #dc2626; font-weight: 700; }
.balPending small { display: block; font-weight: 500; font-size: 11px; color: #ef4444; }
.balReceived { color: #16a34a; font-weight: 700; }
.statusDrop { font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; max-width: 130px; }
tr:hover td { background: #fbfdff; }
tr:last-child td { border-bottom: 0; }
.prodCell { min-width: 180px; line-height: 1.4; }
.dateCell { white-space: nowrap; }
.nowrapCell { white-space: nowrap; }
.confirmBody { font-size: 15px; line-height: 1.6; color: var(--text); padding: 4px 0 8px; }
.waCell { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.waBtn { display: inline-flex; align-items: center; opacity: .7; transition: opacity .15s; flex-shrink: 0; }
.waBtn:hover { opacity: 1; }

.pill {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.alert {
  border: 1px solid var(--line);
  border-left: 5px solid var(--warn);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 5px;
  text-align: left;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.alert:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(15,23,42,.08); }
.alert.high { border-left-color: var(--bad); }
.alert.plain { border-left-color: var(--accent); }
button.alert { width: 100%; cursor: pointer; }
.list { display: grid; gap: 10px; }
.muted { color: var(--muted); }
.strong { font-weight: 700; }
.empty { text-align: center; padding: 28px; }
.bar { height: 10px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); }
/* Conversion pipeline widget */
.pipeWrap { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px; }
.pipeRow { display: flex; flex-direction: column; gap: 7px; }
.pipeTop { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
.pipeTop b { font-weight: 700; color: var(--primary); }
.pipeTrack { height: 9px; background: #eef2f8; border-radius: 999px; overflow: hidden; }
.pipeFill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 1.1s cubic-bezier(.16,1,.3,1); }
.pipeSub { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.reportHero { border-top: 3px solid var(--accent); }
.reportPanel { transition: transform .14s ease, box-shadow .14s ease; }
.reportPanel:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.topRow td { background: linear-gradient(90deg, rgba(240,100,52,.08), transparent); font-weight: 700; }

.line { border: 1px solid var(--line); background: #f8fafc; border-radius: var(--radius); padding: 12px; display: grid; gap: 10px; }
.linegrid { display: grid; grid-template-columns: 1.2fr .9fr .7fr .55fr .45fr .45fr .65fr .5fr auto; gap: 8px; align-items: end; }
.stickyTotal { position: sticky; bottom: 0; z-index: 2; }

/* === Modal — Linear/Vercel style: NO display toggle, pure transitions === */
.modalbg {
  position: fixed; inset: 0;
  display: grid; place-items: center; padding: 16px; z-index: 20;
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(3px);
  zoom: 0.8;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibility delays to 0s on open, delays to transition-duration on close */
  transition: opacity .22s cubic-bezier(.4,0,.2,1),
              background .22s cubic-bezier(.4,0,.2,1),
              visibility 0s linear .22s;
}
.modalbg.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s cubic-bezier(.4,0,.2,1),
              background .22s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 0s;
}
.modal {
  width: min(880px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(15,23,42,.34);
  will-change: transform, opacity;
  /* default = closed state */
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition: transform .38s cubic-bezier(.34,1.35,.64,1),
              opacity .22s cubic-bezier(.4,0,.2,1);
}
.modalbg.open .modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* content inside modal fades up staggered */
.modalbody > * {
  animation: fadeUp .3s cubic-bezier(.16,1,.3,1) both;
}
.modalbody > *:nth-child(2) { animation-delay: .05s; }
.modalbody > *:nth-child(3) { animation-delay: .1s; }

/* ===== Premium motion ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content > * { animation: fadeUp .36s cubic-bezier(.16,1,.3,1) both; }
.content > *:nth-child(2) { animation-delay: .06s; }
.content > *:nth-child(3) { animation-delay: .12s; }
.content > *:nth-child(4) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .content > *, .modalbody > * { animation: none !important; }
  .modalbg, .modalbg.open, .modal, .modalbg.open .modal { transition: none !important; }
}
.modal.wideModal { width: min(1100px, 98vw); max-height: 96vh; }
.modal.wideModal .modalbody { padding: 8px 12px; overflow-x: auto; }
.modalhead, .modalfoot {
  min-height: 62px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.97);
  z-index: 1;
  backdrop-filter: blur(10px);
}
.modalhead h2 { margin: 0; }
.modalfoot { border-bottom: 0; border-top: 1px solid var(--line); bottom: 0; top: auto; justify-content: flex-end; gap: 8px; }
.modalbody { padding: 18px; }
/* ===== Login Page ===== */
.loginWrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #0d1e3a 0%, #1a3461 55%, #0f2347 100%);
}
/* Decorative brand panel hidden — single centered card layout */
.loginLeft { display: none; }
.loginRight {
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}
/* glowing background bubbles on the whole screen */
.loginLeftBubble {
  position: absolute; border-radius: 50%; opacity: .07;
  background: radial-gradient(circle, #fff 0%, transparent 70%);
  z-index: 1;
}
.loginLeftBubble.b1 { width: 460px; height: 460px; top: -140px; right: -120px; }
.loginLeftBubble.b2 { width: 400px; height: 400px; bottom: -100px; left: -90px; }
.loginLeftBubble.b3 { width: 200px; height: 200px; top: 12%; left: 14%; opacity: .05; }
.loginCard {
  width: 480px; height: 480px;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 8px 40px rgba(15,23,42,.10), 0 1px 0 rgba(15,23,42,.04);
  padding: 44px 48px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
@media (max-width: 560px) {
  .loginCard { height: auto; padding: 36px 28px; width: min(420px, 100%); }
}
.loginCardTop { display: flex; align-items: center; gap: 16px; }
.loginCardMark {
  width: 52px; height: 52px; border-radius: 14px; flex: 0 0 52px;
  background: linear-gradient(145deg, var(--accent), #ff7d4f);
  display: grid; place-items: center; font-size: 22px; font-weight: 950; color: #fff;
  box-shadow: 0 8px 20px rgba(240,100,52,.32);
}
.loginCardTitle { font-size: 22px; font-weight: 900; color: #111c30; letter-spacing: -.3px; }
.loginCardSub { font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.loginError {
  display: flex; align-items: center; gap: 8px;
  background: #fff4f4; border: 1px solid #fdd; border-radius: 10px;
  padding: 10px 14px; color: #c0392b; font-size: 13.5px; font-weight: 700;
}
.loginField { display: flex; flex-direction: column; gap: 7px; }
.loginLabel { font-size: 13px; font-weight: 800; color: #374151; letter-spacing: .2px; }
.loginInputWrap { position: relative; }
.loginInputIcon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.loginInput {
  width: 100%; box-sizing: border-box;
  padding: 13px 14px 13px 42px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 14.5px; font-family: inherit; font-weight: 500;
  color: #111c30; background: #f8fafd;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.loginInput:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,100,52,.12); background: #fff; }
.loginInput::placeholder { color: #b0bac8; }
.loginBtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 24px;
  background: linear-gradient(145deg, var(--accent), #ff7d4f);
  color: #fff; border: none; border-radius: 14px;
  font-size: 15.5px; font-weight: 800; font-family: inherit;
  cursor: pointer; letter-spacing: .2px;
  box-shadow: 0 12px 28px rgba(240,100,52,.38);
  transition: opacity .15s, transform .1s;
}
.loginBtn:hover { opacity: .92; transform: translateY(-1px); }
.loginBtn:active { transform: translateY(0); opacity: 1; }
.loginFootNote { text-align: center; font-size: 12px; color: #b0bac8; font-weight: 500; margin-top: 4px; }
/* Mobile — stack vertically */
@media (max-width: 800px) {
  .loginWrap { grid-template-columns: 1fr; }
  .loginLeft { display: none; }
  .loginRight { background: linear-gradient(145deg, #0d1e3a, #1a3461); min-height: 100vh; }
  .loginCard { box-shadow: 0 20px 50px rgba(0,0,0,.3); }
}
.loginLogo { display: flex; justify-content: center; margin-bottom: 4px; }
.mark.big { width: 64px; height: 64px; border-radius: 18px; font-size: 26px; }
.loginBrand { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.wide { width: 100%; }
.errorBox, .formError { border: 1px solid #fecaca; background: #fff7f7; color: var(--bad); padding: 10px 12px; border-radius: var(--radius); font-weight: 850; }
.uploadLine { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* ===== Final Sale — Uploaded Documents cards (View More popup) ===== */
.saleDocGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.saleDocCard {
  display: flex; flex-direction: column; gap: 12px; min-height: 152px;
  padding: 18px; border: 1.5px solid #e8edf5; border-radius: 16px;
  background: linear-gradient(180deg, #fcfdff, #f6f9fc);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.saleDocCard:hover { border-color: #d7e0ef; box-shadow: 0 10px 26px rgba(15,23,42,.07); }
.saleDocCard.filled { background: linear-gradient(180deg, #ffffff, #f4faf6); border-color: #d6ecdd; }
.saleDocCard .sdHead { display: flex; align-items: center; gap: 9px; }
.saleDocCard .sdIcon { display: inline-flex; width: 34px; height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 10px; background: rgba(35,58,99,.08); color: var(--primary); }
.saleDocCard.filled .sdIcon { background: rgba(22,163,74,.12); color: var(--good); }
.saleDocCard .sdIcon svg { width: 18px; height: 18px; }
.saleDocCard .sdTitle { font-weight: 850; font-size: 14px; color: #1e293b; letter-spacing: .01em; }
.saleDocCard .sdBody { flex: 1; display: flex; align-items: center; }
.saleDocCard .sdFile { font-size: 12.5px; font-weight: 700; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.saleDocCard .sdEmpty { font-size: 12.5px; color: #94a3b8; font-weight: 600; font-style: italic; }
.saleDocCard .sdActions { display: flex; align-items: center; gap: 8px; }
.saleDocCard .sdUploadBtn { cursor: pointer; border: 1.5px dashed #cdd8e8; background: #fff; color: var(--primary); font-weight: 800; }
.saleDocCard .sdUploadBtn:hover { border-style: solid; border-color: var(--accent); color: var(--accent); background: rgba(240,100,52,.05); }
.saleDocCard .sdRemove { margin-left: auto; border: none; background: #fee2e2; color: #b91c1c; width: 30px; height: 30px; line-height: 1; border-radius: 9px; cursor: pointer; font-size: 19px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; transition: background .14s, transform .14s; }
.saleDocCard .sdRemove:hover { background: var(--bad); color: #fff; transform: translateY(-1px); }
@media (max-width: 620px) { .saleDocGrid { grid-template-columns: 1fr; } }

/* ===== Final Sale — Documents hub (Job Order / SR / Invoice / Uploads) ===== */
.hubGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hubCard {
  display: flex; align-items: center; gap: 14px; padding: 18px; cursor: pointer;
  border: 1.5px solid #e8edf5; border-radius: 16px;
  background: linear-gradient(180deg, #fcfdff, #f6f9fc);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hubCard:hover { border-color: #f0a688; box-shadow: 0 12px 28px rgba(15,23,42,.09); transform: translateY(-1px); }
.hubCard .hubIco { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.hubCard .hubIco svg { width: 24px; height: 24px; }
.hubCard .hubIco.hubC1 { background: linear-gradient(145deg, #233a63, #33507f); }
.hubCard .hubIco.hubC2 { background: linear-gradient(145deg, #0891b2, #22b8cf); }
.hubCard .hubIco.hubC3 { background: linear-gradient(145deg, #f06434, #ff7d4f); }
.hubCard .hubIco.hubC4 { background: linear-gradient(145deg, #16a34a, #22c55e); }
.hubCard .hubMain { flex: 1; min-width: 0; }
.hubCard .hubTitle { font-weight: 850; font-size: 15px; color: #1e293b; display: flex; align-items: center; gap: 8px; }
.hubCard .hubSub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.hubCount { background: #eef2f8; color: #475569; font-size: 11px; font-weight: 800; border-radius: 20px; padding: 2px 9px; }
.hubCount.hubNew { background: #fff2ec; color: #c2410c; }
.hubCard .hubArrow { color: #cbd5e1; font-size: 26px; font-weight: 700; line-height: 1; }
@media (max-width: 620px) { .hubGrid { grid-template-columns: 1fr; } }

/* ===== Invoice builder + preview ===== */
.invBuilder .sectionTitle { margin-top: 6px; }
.invItemsTbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.invItemsTbl th { background: var(--soft); color: #475569; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 6px; text-align: right; border-bottom: 1.5px solid var(--line); }
.invItemsTbl th:nth-child(2) { text-align: left; }
.invItemsTbl td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.invItemsTbl td.c { text-align: center; }
.invItemsTbl td.r { text-align: right; font-weight: 800; color: var(--ink); white-space: nowrap; }
.invItemsTbl input { min-height: 36px; }
.invFootGrid { display: grid; grid-template-columns: 1.2fr .9fr; gap: 20px; align-items: start; margin-top: 16px; }
.invTotalsCard { border: 1.5px solid #e8edf5; border-radius: 14px; padding: 16px 18px; background: linear-gradient(180deg, #fcfdff, #f6f9fc); }
.invTotalsCard .r { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.invTotalsCard .r span:first-child { color: var(--muted); }
.invTotalsCard .invGrand { margin-top: 10px; background: var(--navy); color: #fff; border-radius: 11px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 900; font-size: 16px; }
.invTotalsCard .invWords { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--ink); }
.invPreviewWrap { background: #eef2f8; padding: 22px; border-radius: 12px; overflow-x: auto; }
.invPreviewWrap .inv-sheet { background: #fff; padding: 26px 28px; border-radius: 12px; box-shadow: 0 12px 34px rgba(15,23,42,.12); }
@media (max-width: 720px) { .invFootGrid { grid-template-columns: 1fr; } }
.attachWidget { display: inline-flex; align-items: center; }
.attachWidget .attachDisplay { display: inline-flex; align-items: center; gap: 8px; }
.attachWidget .attachName { font-size: 12px; font-weight: 700; color: #475569; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachWidget .attachX { border: none; background: #fee2e2; color: #b91c1c; width: 22px; height: 22px; line-height: 1; border-radius: 50%; cursor: pointer; font-size: 15px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.attachWidget .attachX:hover { background: #fecaca; }
.extraFieldsGrid { display:flex;flex-direction:column;gap:10px;margin-top:10px; }
.extraFieldRow { display:flex;align-items:center;gap:0; }
.extraFieldLabel { font-size:11px;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:.04em;width:150px;flex-shrink:0; }
.extraFieldInput { padding:6px 10px;font-size:13px;border:1px solid var(--line);border-radius:6px;width:180px; }
.extraFieldValue { display:inline-flex;align-items:center; }
.extraFieldsNote { margin-top:14px;padding:9px 12px;background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;font-size:12px;color:#92400e;line-height:1.5; }
.poReviewWrap { display:inline-flex;align-items:center;cursor:pointer;user-select:none; }
.poReviewBox { position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:22px;flex-shrink:0; }
.poReviewBox input[type="checkbox"] { position:absolute;opacity:0;width:0;height:0;pointer-events:none; }
.poReviewMark { display:block;width:40px;height:22px;border-radius:11px;background:#cbd5e1;transition:background .2s; }
.poReviewMark::after { content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s; }
.poReviewBox input:checked ~ .poReviewMark { background:#22c55e; }
.poReviewBox input:checked ~ .poReviewMark::after { transform:translateX(18px); }
.uploadLine input[type="file"] { width: auto; flex: 1; min-width: 200px; }
.prodImgThumb { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; padding: 3px; background: #fff; }
.hidden { display: none !important; }
.modalbody textarea { min-height: 64px; }
.poRow { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 12px; align-items: end; }
.grid3compact { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 14px; }
.paymentRows { display: flex; flex-direction: column; gap: 6px; }
.paymentRow { display: grid; grid-template-columns: 150px 170px auto auto auto; gap: 10px; align-items: center; }
.paymentRow input { min-height: 34px; }
.paymentRow .amtInput { width: 170px; }
.payTotal { white-space: nowrap; }
.poRow .uploadLine { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.deleteBox { display: grid; gap: 12px; }
.deleteBox h3 { margin: 0; }

.aiFab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 64px;
  height: 64px;
  min-width: 0;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 18px;
  background: linear-gradient(145deg, #2a4a86 0%, var(--accent) 60%, #ff7b4f 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 18px 36px rgba(240,100,52,.34);
  z-index: 9990;
  cursor: grab;
  user-select: none;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease;
  animation: aiFabGlow 2.6s ease-in-out infinite;
}
.aiFabIcon { width: 24px; height: 24px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.25)); }
.aiFabLabel { font-size: 9.5px; font-weight: 900; letter-spacing: .5px; line-height: 1; }
.aiFab::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 55%);
  pointer-events: none;
}
@keyframes aiFabGlow {
  0%, 100% { box-shadow: 0 18px 36px rgba(240,100,52,.34), 0 0 0 0 rgba(240,100,52,.45); }
  50% { box-shadow: 0 18px 36px rgba(240,100,52,.40), 0 0 0 10px rgba(240,100,52,0); }
}
.aiFab:active { cursor: grabbing; }
.aiFab:hover { transform: scale(1.06); box-shadow: 0 24px 44px rgba(240,100,52,.42); }
.aiDrawer {
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: min(340px, calc(100vw - 40px));
  max-height: min(520px, calc(100vh - 112px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 26px 72px rgba(15,23,42,.25);
  display: none;
  overflow: hidden;
  z-index: 9991;
  flex-direction: column;
}
.aiDrawer.open { display: flex; }
.aiHead { flex-shrink: 0; min-height: 54px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; background: var(--primary); color: #fff; cursor: grab; user-select: none; }
.aiHead:active { cursor: grabbing; }
.aiHead button { border: 1px solid rgba(255,255,255,.26); background: transparent; color: #fff; border-radius: 7px; min-height: 32px; padding: 0 10px; font-weight: 850; }
.aiBody { padding: 14px; display: grid; gap: 12px; overflow-y: auto; min-height: 0; flex: 1; }
.answerBox {
  white-space: pre-wrap;
  font-weight: 800;
  line-height: 1.55;
  margin: 0;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 180px;
  padding: 12px;
  color: #172033;
}

.printRoot { display: none; }
.quoteSheet { display: grid; gap: 18px; background: #eef2f7; padding: 12px; }
.quoteFrame {
  width: 100%;
  max-width: 210mm;
  min-height: auto;
  margin: 0 auto;
  background: #fff;
  color: #111827;
  border: 1px solid #cfd7e4;
  padding: 14mm;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10.4px;
  line-height: 1.35;
}
.quoteHeader { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; border-bottom: 2px solid var(--accent); padding-bottom: 8px; }
.quoteHeader h2 { margin: 0 0 2px; color: var(--primary); font-size: 16px; }
.quoteHeader p { margin: 2px 0; }
.cert { color: var(--accent); font-weight: 700; }
.quoteRight { text-align: right; }
.quoteLogoText { font-size: 26px; font-weight: 950; color: var(--primary); letter-spacing: 0; }
.qLogo { max-width: 165px; max-height: 48px; object-fit: contain; display: inline-block; margin-bottom: 4px; }
.quoteTitle { text-align: center; color: var(--primary); text-decoration: underline; margin: 8px 0; font-size: 15px; }
.quoteIntro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; }
.quoteIntro p { margin: 3px 0; }
.quoteMeta { min-width: 0; margin-left: auto; }
.quoteMeta td { border: 0; padding: 1px 3px; background: transparent !important; font-weight: 700; }
.quoteTable { min-width: 0; width: 100%; font-size: 9.7px; margin: 8px 0; }
.quoteTable th, .quoteTable td { padding: 4px 5px; border: 1px solid #9ca3af; color: #111827; background: #fff; }
.quoteTable th { background: #f7d9c5; text-align: center; position: static; }
.right { text-align: right; }
.termsList { margin: 4px 0 8px 18px; padding: 0; columns: 1; }
.termsList li { margin: 2px 0; padding-left: 3px; }
.quoteFooter { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 2px solid var(--accent); margin-top: 12px; padding-top: 8px; }
.annexure { break-before: page; }
.specCard { display: grid; grid-template-columns: 180px 1fr; gap: 14px; border: 1px solid #cbd5e1; padding: 10px; margin-top: 10px; break-inside: avoid; }
.specCard img, .imageSlot { width: 180px; height: 150px; object-fit: contain; border: 1px solid #d1d5db; background: #f8fafc; display: grid; place-items: center; color: var(--muted); font-weight: 950; }
.specCard h3 { margin: 0 0 6px; color: var(--primary); }
.docFrame { font-size: 10.2px; }
.docTitle { text-align: center; background: #f7d9c5; border: 1px solid #111827; border-left: 0; border-right: 0; padding: 4px; color: #111827; font-size: 16px; font-weight: 950; margin: 8px 0; }
.docGrid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #111827; border-bottom: 0; margin-top: 8px; }
.docGrid p { margin: 0; min-height: 45px; padding: 6px; border-right: 1px solid #111827; border-bottom: 1px solid #111827; }
.docGrid p:nth-child(3n) { border-right: 0; }
.docBox { border: 1px solid #111827; padding: 8px; min-height: 64px; margin: 8px 0; }
.signGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid #111827; margin-top: 18px; min-height: 74px; }
.signGrid div { padding: 8px; border-right: 1px solid #111827; }
.signGrid div:last-child { border-right: 0; }
.serviceDoc .docGrid { grid-template-columns: repeat(2, 1fr); }
.serviceDoc .docGrid p:nth-child(3n) { border-right: 1px solid #111827; }
.serviceDoc .docGrid p:nth-child(2n) { border-right: 0; }

/* ===== Job Order document (Kameyo format) ===== */
.joDoc .joInfo { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 10.2px; }
.joDoc .joInfo td { border: 1px solid #111827; padding: 5px 7px; background: #fff; vertical-align: top; }
.joDoc .joInfo td.lbl { background: #f7f1ec; font-weight: 700; width: 22%; white-space: nowrap; }
.joDoc .joNote { margin: 10px 0 4px; font-size: 10px; }
.joDoc .joRemark { margin: 4px 0 10px; font-size: 9.6px; }
.joDoc .joSpec th { background: var(--primary); color: #fff; text-align: left; font-size: 10.5px; padding: 5px 7px; }
.joDoc .joSpec td { vertical-align: top; }
.joDoc .joOther { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 10px; }
.joDoc .joOther td { border: 1px solid #111827; padding: 5px 7px; }
.joDoc .joOther td.lbl { font-weight: 700; background: #f7f1ec; }
.joDoc .joOther .joOtherBody { min-height: 38px; }
.rtoolbar { display: flex; align-items: center; gap: 2px; background: #f1f5f9; border: 1px solid #cbd5e1; border-bottom: none; border-radius: 6px 6px 0 0; padding: 4px 6px; flex-wrap: wrap; }
.rtbtn { background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 2px 7px; font-size: 13px; cursor: pointer; line-height: 1.5; color: #1e293b; transition: background .15s; }
.rtbtn:hover { background: #e2e8f0; }
.rtSep { width: 1px; height: 18px; background: #cbd5e1; margin: 0 3px; }
.joItemsTable { border-collapse: separate !important; border-spacing: 0; border: 1.5px solid #e2e8f0 !important; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(35,58,99,.06); }
.joItemsTable thead tr th { background: #f1f5f9 !important; color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px !important; border-bottom: 1.5px solid #e2e8f0; border-right: 1px solid #e2e8f0; text-align: center !important; }
.joItemsTable thead tr th:last-child { border-right: none; }
.joItemsTable tbody tr { transition: background .15s; }
.joItemsTable tbody tr:hover { background: #f8fafc; }
.joItemsTable tbody tr + tr td { border-top: 1px solid #f1f5f9; }
.joItemsTable td { vertical-align: middle; padding: 5px 8px !important; border-right: 1px solid #f1f5f9; color: #111827; }
.joItemsTable td:last-child { border-right: none; }
.joItemsTable input { display: block; width: 100%; box-sizing: border-box; border: none; outline: none; font-size: 13px; font-family: inherit; padding: 2px 4px; background: transparent; color: #000; text-align: center; }
.joItemsTable input.desc-input { text-align: left; }
.joItemsTable input:focus { background: #f1f5f9; border-radius: 4px; }
.joDelBtn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: #cbd5e1; font-size: 14px; cursor: pointer; transition: background .18s, color .18s; line-height: 1; padding: 0; margin: auto; }
.joDelBtn:hover { background: #fee2e2; color: #ef4444; }
.joItemsTable td:last-child { text-align: center; vertical-align: middle; border-right: none; }
.rteBox { border: 1px solid #cbd5e1; border-radius: 0 0 6px 6px; padding: 8px 10px; min-height: 80px; background: #fff; font-size: 13px; line-height: 1.6; outline: none; }
.rteBox:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.joDoc .joSign { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 10px; }
.joDoc .joSign td { border: 1px solid #111827; padding: 6px 8px; width: 50%; vertical-align: top; font-weight: 700; }
.joDoc .joSign .joSignSpace td { height: 46px; font-weight: 400; }
.joDoc .joSign .joSignLabels td { font-weight: 400; }
.joDoc .joHindi { margin: 4px 0 0; font-size: 10px; }

.userCardGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
/* Product / Machine master — card grid */
.pmGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 8px; }
.pmCard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pmCard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,23,42,.14); border-color: var(--accent); }
.pmCardImg { height: 160px; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px; border-bottom: 1px solid var(--line); }
.pmCardImg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pmCardNoImg { font-size: 46px; font-weight: 800; color: var(--muted); opacity: .5; }
.pmCardBody { padding: 13px 15px 6px; flex: 1; min-width: 0; }
.pmCardName { font-weight: 800; font-size: 15px; color: var(--ink); line-height: 1.25; }
.pmCardModel { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pmCardRow { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; gap: 8px; }
.pmPrice { font-weight: 800; font-size: 16px; color: var(--accent); }
.pmGst { font-size: 12px; color: var(--muted); font-weight: 600; }
.pmCardSub { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.pmCardActions { display: flex; gap: 8px; padding: 10px 15px 14px; }
.pmCardActions .btn { flex: 1; }
.userCard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 14px; transition: transform .14s ease, box-shadow .14s ease; }
.userCard:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.userCardTop { display: flex; align-items: center; gap: 14px; }
.userCardTop > div:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.userCardTop b { font-size: 16px; }
.userPhoto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; }
.userPhotoFallback { display: grid; place-items: center; background: linear-gradient(145deg, var(--primary), #3a5483); color: #fff; font-weight: 950; font-size: 24px; }
.userCardBody { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.userCardBody label { display: block; font-size: 10px; color: var(--muted); }
.userCardBody span { font-weight: 850; color: var(--ink); }
.moduleCheckGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.moduleCheckGrid label { display: flex; align-items: center; gap: 6px; text-transform: none; font-size: 13px; font-weight: 800; color: var(--ink); }
.moduleCheckGrid input { width: auto; min-height: auto; }

.toast { position: fixed; right: 18px; bottom: 18px; z-index: 30; background: #0f172a; color: #fff; padding: 12px 14px; border-radius: var(--radius); font-weight: 600; display: none; box-shadow: 0 18px 38px rgba(15,23,42,.22); }
.themePanel { border-top: 3px solid var(--accent); }
.colorCombo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.colorChip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; }
.colorChip input[type="color"] { width: 40px; min-height: 40px; flex: 0 0 40px; padding: 2px; border-radius: 8px; cursor: pointer; }
.colorChip div { display: flex; flex-direction: column; line-height: 1.25; }
.colorChip b { font-size: 12px; color: var(--ink); font-weight: 800; }
.colorChip span { font-size: 11px; color: var(--muted); }
.colorPick { display: flex; align-items: center; gap: 10px; }

/* ——— Premium Settings page (scoped) ——— */
.settingsPage { display: grid; gap: 20px; }
.settingsPage .panel { padding: 26px 30px; border-radius: 16px; }
.settingsPage .settingsRow2 { gap: 20px; }
.settingsPage .sectionTitle { font-size: 12px; letter-spacing: .7px; margin: 0 0 6px; padding-bottom: 15px; }
.settingsPage .secSub { margin: 0 0 20px; font-size: 12.5px; line-height: 1.5; color: var(--muted); font-weight: 500; max-width: 720px; }
.settingsPage .secSub b { color: var(--ink); font-weight: 700; }
.settingsPage .form, .settingsPage .form4 { gap: 20px 22px; max-width: none; }
.settingsPage .field > label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.settingsPage input:not([type=color]):not([type=checkbox]):not([type=file]),
.settingsPage select, .settingsPage textarea {
  min-height: 46px; border-radius: 12px; padding: 12px 15px; font-size: 13.5px;
  border: 1.5px solid var(--line); background: var(--soft);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.settingsPage input:hover:not([type=color]):not([type=checkbox]):not([type=file]),
.settingsPage select:hover, .settingsPage textarea:hover { border-color: #c6d1e2; background: var(--panel); }
.settingsPage input:focus:not([type=color]):not([type=checkbox]):not([type=file]),
.settingsPage select:focus, .settingsPage textarea:focus {
  border-color: var(--accent); background: var(--panel);
  box-shadow: 0 0 0 4px rgba(240,100,52,.12);
}
.settingsPage textarea { min-height: 84px; }
/* Theme panel: presets and custom colours side by side with a divider */
.settingsPage .themeSplit { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.settingsPage .themeSplit > .field:first-child { padding-right: 40px; }
.settingsPage .themeSplit > .field:last-child { padding-left: 40px; border-left: 1px solid var(--line); }
.settingsPage .themeSplit .colorCombo { grid-template-columns: 1fr; gap: 12px; }
.settingsPage .themeSplit .colorChip { padding: 12px 14px; border-radius: 12px; }
.settingsPage .themeControls { display: flex; flex-wrap: wrap; gap: 16px 18px; margin-top: 26px; }
.settingsPage .themeControls .field { flex: 1 1 180px; min-width: 0; }
@media (max-width: 900px) {
  .settingsPage .themeSplit { grid-template-columns: 1fr; gap: 22px; }
  .settingsPage .themeSplit > .field:first-child { padding-right: 0; }
  .settingsPage .themeSplit > .field:last-child { padding-left: 0; border-left: none; border-top: 1px solid var(--line); padding-top: 22px; }
}
/* Premium toggle for the OTP checkbox */
.settingsPage .otpToggle { display: flex; align-items: center; gap: 14px; cursor: pointer; font-weight: 700; font-size: 14px; }
.settingsPage .otpToggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.settingsPage .otpToggle .track {
  width: 46px; height: 26px; border-radius: 40px; background: #cbd5e1; position: relative;
  flex: 0 0 auto; transition: background .18s ease;
}
.settingsPage .otpToggle .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .18s ease;
}
.settingsPage .otpToggle input:checked + .track { background: var(--accent); }
.settingsPage .otpToggle input:checked + .track::after { transform: translateX(20px); }
.settingsPage .otpToggle input:focus-visible + .track { box-shadow: 0 0 0 4px rgba(240,100,52,.25); }
:root[data-theme="dark"] .settingsPage input:not([type=color]):not([type=checkbox]):not([type=file]),
:root[data-theme="dark"] .settingsPage select, :root[data-theme="dark"] .settingsPage textarea {
  background:#141d31 !important; border-color:#2c3a56 !important;
}
:root[data-theme="dark"] .settingsPage .otpToggle .track { background:#39466a; }
/* Preferences toggle rows */
.settingsPage .prefList { display: flex; flex-direction: column; }
.settingsPage .prefRow { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 2px; cursor: pointer; border-top: 1px solid var(--line); }
.settingsPage .prefRow:first-child { border-top: none; }
.settingsPage .prefRow > div { display: flex; flex-direction: column; gap: 3px; }
.settingsPage .prefRow b { font-size: 15px; font-weight: 700; color: var(--ink); }
.settingsPage .prefRow > div > span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.settingsPage .otpToggle.switchOnly { flex: 0 0 auto; gap: 0; }
.colorPick input[type="color"] { width: 52px; min-height: 40px; padding: 2px; flex: 0 0 52px; }
.colorPick span { color: var(--muted); font-size: 12px; font-weight: 800; }

.itemTable { border-collapse: separate; border-spacing: 0 8px; }
.itemTable input { min-height: 34px; padding: 6px 9px; font-size: 13px; border-radius: 8px; }
/* numeric boxes: stay their base (min-width) size, but auto-widen when a longer number is typed */
.itemTable input.itmGrow { field-sizing: content; width: auto; max-width: 200px; }
/* remove the up/down spinner arrows on number inputs in the item list (keep them on .itmSpin, e.g. Discount) */
.itemTable input[type="number"]:not(.itmSpin) { -moz-appearance: textfield; appearance: textfield; }
.itemTable input[type="number"]:not(.itmSpin)::-webkit-outer-spin-button,
.itemTable input[type="number"]:not(.itmSpin)::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Discount keeps its stepper — give it room so the arrows don't overlap the number */
.itemTable input.itmSpin { padding-right: 4px; }
.itemTable td { vertical-align: top; padding: 12px 8px; border-bottom: none; background: var(--bg-alt); }
.itemTable thead th { vertical-align: middle; }
/* each item = one rounded "card" row, clearly separated */
.itemTable tbody tr > td:first-child { border-radius: 10px 0 0 10px; padding-left: 14px; }
.itemTable tbody tr > td:last-child { border-radius: 0 10px 10px 0; padding-right: 14px; }
.itemTable tbody tr:hover > td { background: rgba(240,100,52,.06); }
/* sub-item (accessory) rows sit tighter under their parent, visually attached */
.itemTable tr.itmSubRow > td { background: var(--soft); }
/* static value cells (Taxable, tax, Amt) top-aligned with the input boxes */
.itemTable td.right { vertical-align: top; padding-top: 18px; }
/* AMT value centered both ways within the input-box band (34px tall, starting at the 12px cell pad) */
.itemTable td.itmAmt { text-align: center; padding-top: 12px !important; line-height: 34px; }
.itemTable .mt { margin-top: 6px; }
.itemTable textarea.itmDesc { width: 100%; box-sizing: border-box; resize: none; min-height: 34px; overflow: hidden; font-family: inherit; line-height: 1.35; field-sizing: content; }
/* Narrow the Item & Description column so the numeric boxes get more room */
.itemTable td:nth-child(2), .itemTable th:nth-child(2) { width: 400px; max-width: 400px; }
.itemTable td:nth-child(2) input, .itemTable td:nth-child(2) textarea { max-width: 400px; }
/* tax breakdown sub-number sits under the GST% input, right-aligned to match the money columns */
.itemTable .muted { font-size: 11px; display: block; margin-top: 4px; text-align: right; }
/* GST cell: center the % input and its tax sub-number so both line up in the box */
.itemTable td.itmGst { text-align: center; }
.itemTable td.itmGst .muted { text-align: center; }
/* center the IGST / AMT column headers over their centered values */
.itemTable th.itmGst, .itemTable th.itmAmt { text-align: center !important; }
:root[data-theme="dark"] .itemTable td { background: #1a2438; }
:root[data-theme="dark"] .itemTable tr.itmSubRow > td { background: #0f1729; }
:root[data-theme="dark"] .itemTable tbody tr:hover > td { background: #22304d; }
/* Grouped items: sub-item (accessory) rows */
.itemTable td.itmNoCell { line-height: normal; white-space: nowrap; }
.itemTable .itmNo { font-weight: 700; }
.itemTable .itmNo.sub { color: var(--muted, #64748b); font-weight: 600; }
.itemTable .itmSubBtn {
  display: inline-block; margin-left: 4px; width: 22px; height: 22px; line-height: 1;
  border: 1px solid var(--line); border-radius: 6px; background: transparent;
  color: var(--muted, #64748b); cursor: pointer; font-size: 13px; padding: 0;
  transition: background .14s ease, color .14s ease;
}
.itemTable .itmSubBtn:hover { background: rgba(0,0,0,.05); color: var(--primary); }
.itemTable .itmSubBtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .itemTable .itmSubBtn:hover { background: rgba(255,255,255,.08); }
/* sub-item rows: no ↳ marker above the box (the orange toggle already indicates it) */
.totalsBox { width: 100%; border-collapse: collapse; }
.totalsBox td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-weight: 800; }
.totalsBox .right { text-align: right; }
.totalsBox .grandRow td { background: var(--soft); font-size: 16px; border-bottom: 0; }

.toast.show { display: block; }

@media print {
  @page { size: A4 portrait; margin: 12.7mm; }
  /* Lock every container to the exact printable width (A4 210mm - 25.4mm margins = 184.6mm)
     so NOTHING can be wider than the page — this stops Chrome from auto-scaling
     the whole document down (which was shrinking 9pt text to ~6.7pt). */
  html, body { width: 184.6mm !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body > *:not(.printRoot) { display: none !important; }
  .printRoot { display: block !important; width: 184.6mm !important; margin: 0 !important; padding: 0 !important; }
  .pq { background: #fff !important; padding: 0 !important; margin: 0 !important; width: 184.6mm !important; }
  .pq-frame { box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 184.6mm !important; max-width: 184.6mm !important; page-break-after: always; }
  .pq-frame:last-child { page-break-after: auto; }
  .pq-tbl { width: 100% !important; table-layout: fixed !important; }
  .pq-tbl td, .pq-tbl th { font-size: 9pt; padding: 1.7mm; }
  .pq-coname { font-size: 18pt; }
  .pq-coinfo, .pq-mr { font-size: 9pt; }
  .pq-title { font-size: 18pt; margin: 3mm 0 3mm; }
  .pq-terms { font-size: 9pt; }
  .pq-terms li { margin: 0; line-height: 1.5; }
  .pq-signr { font-size: 9pt; }
  .pq-disc { font-size: 9pt; }
  .pq-sub { font-size: 9pt; }
  .quoteSheet { background: #fff; padding: 0; width: 184.6mm !important; }
  .quoteFrame { border: 0; padding: 0; margin: 0; box-shadow: none; width: 184.6mm !important; max-width: 184.6mm !important; page-break-after: always; }
  .quoteFrame:last-child { page-break-after: auto; }
  /* Lock Job Order / doc text to 9pt like the quotation, and stop Chrome auto-shrink */
  .docFrame { font-size: 9pt !important; }
  .quoteTable { width: 100% !important; table-layout: fixed !important; font-size: 9pt !important; margin: 3mm 0; }
  .quoteTable th, .quoteTable td { font-size: 9pt !important; padding: 1.6mm 2mm !important; }
  .joDoc .joInfo, .joDoc .joOther, .joDoc .joSign { width: 100% !important; table-layout: fixed !important; }
  .joDoc .joInfo td, .joDoc .joOther td, .joDoc .joSign td { font-size: 9pt !important; padding: 1.6mm 2mm !important; }
  .joDoc .joSpec th { font-size: 9pt !important; }
  .joDoc .joNote, .joDoc .joRemark, .joDoc .joHindi { font-size: 9pt !important; }
  .quoteHeader h2 { font-size: 14pt !important; }
  .quoteHeader p, .quoteHeader .cert { font-size: 9pt !important; }
  .docTitle { font-size: 15pt !important; }
}

/* ===== Print Quotation (pq) ===== */
.pq { background: #dde3ed; padding: 14px; }
/* Reset global table styles that conflict with quotation preview */
.pq table { min-width: 0; border-collapse: collapse; width: 100%; }
.pq th, .pq td { padding: 1.7mm; border-bottom: none; text-align: left; vertical-align: top; color: #000; font-weight: normal; background: none; }
.pq-frame {
  font-family: Calibri, "Segoe UI", Carlito, sans-serif;
  font-size: 9pt;
  color: #000;
  background: #fff;
  padding: 12mm 10mm 10mm;
  width: 100%;
  box-shadow: 0 4px 18px rgba(0,0,0,.16);
  margin: 0 auto 12px;
  box-sizing: border-box;
}

/* All tables — fixed layout so cells never expand the table past 100% (prevents
   Chrome from shrinking the whole page to fit, which was making fonts tiny) */
.pq-tbl { border-collapse: collapse; width: 100%; table-layout: fixed; margin-bottom: 3mm; }
.pq-tbl td, .pq-tbl th { border: 0.5pt solid #000; padding: 1.7mm; vertical-align: top; font-size: 9pt; word-wrap: break-word; overflow-wrap: break-word; }
.pq-tbl th { background: #fff; font-weight: 700; white-space: nowrap; text-align: center !important; vertical-align: middle !important; }

/* Nested totals table on the right of the bank row */
.pq-totcell { padding: 0 !important; vertical-align: top; }
.pq-tottbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pq-tottbl td { border: 0.5pt solid #000; padding: 1.7mm; font-size: 9pt; }
.pq-tottbl tr:first-child td { border-top: 0; }
.pq-tottbl td:last-child { border-right: 0; }

/* Header — no border on cells */
.pq-hdr td, .pq-metabar td { border: 0 !important; padding: 0 !important; vertical-align: top; }
.pq-metabar { margin: -2mm 0 4mm; }
.pq-tometa td { vertical-align: top; }
.pq-to { width: 50%; font-size: 9pt; line-height: 1.55; }
.pq-tolbl { font-size: 9pt; margin-bottom: 1mm; font-weight: 700; }
.pq-metacell { width: 50%; padding: 0 !important; }
.pq-metatbl { width: 100%; height: 100%; border-collapse: collapse; }
.pq-metatbl td { border: 0.5pt solid #000; font-size: 9pt; padding: 1.2mm 2.5mm; line-height: 1.6; }
.pq-metatbl tr:first-child td { border-top: 0; }
.pq-metatbl td:last-child { border-right: 0; }
.pq-ml { width: 45%; text-align: left; white-space: nowrap; }
.pq-mv { text-align: left; white-space: nowrap; }
.pq-co { width: 70%; }
.pq-logo { max-height: 55px; max-width: 180px; object-fit: contain; display: block; margin-bottom: 3mm; }
.pq-coname { font-size: 18pt; font-weight: 800; color: #000; line-height: 0.95; margin-bottom: 0; }
.pq-coiso { font-size: 8.5pt; font-weight: 700; color: #f06434; margin: -2.5mm 0 2mm; line-height: 1; }
.pq-coinfo { font-size: 9pt; line-height: 1.6; color: #000; }
.pq-coinfo.pq-contact { white-space: nowrap; font-size: 8.5pt; }
.pq-meta { width: 30%; text-align: right; vertical-align: top; padding-left: 4mm !important; }
.pq-meta-logo { max-height: 36px; max-width: 120px; object-fit: contain; display: inline-block; margin-bottom: 2mm; }
.pq-meta-logotext { font-size: 22pt; font-weight: 900; color: #233a63; line-height: 1; margin-bottom: 3mm; display: block; }
.pq-mr { font-size: 9pt; line-height: 1.8; text-align: right; }
.pq-line { border-bottom: 1.5pt solid #f06434; margin: 3mm 0 0; width: 100%; display: block; }

/* Document title */
.pq-title { text-align: center; font-size: 18pt; font-weight: 700; letter-spacing: 2px; margin: 3mm 0 3mm; }
.pq-letter { margin: 4mm 0 2mm; }
.pq-ltline { font-size: 9.5pt; line-height: 1.5; margin-bottom: 1mm; }
.pq-ltl { display: inline-block; margin-right: 4mm; font-weight: 700; }
.pq-ltv { font-weight: 700; }
.pq-amc { margin: 3mm 0 4mm; }
.pq-amc td { border: 0.5pt solid #000; padding: 1.6mm; font-size: 9pt; text-align: center; vertical-align: middle; }
.pq-amc-head { background: #2f5496; color: #fff; font-weight: 700; }
.pq-amc-sub { background: #dbe5f1; font-weight: 700; }
.pq-amc-mc { background: #dbe5f1; font-weight: 700; text-align: left; width: 45%; }
.pq-amc-yr { background: #eef3fa; font-weight: 700; }
.pq-amc-note { font-weight: 400; font-size: 8pt; }
.pq-letterbody { font-size: 9.5pt; line-height: 1.5; margin: 1mm 0 3mm; }
.pq-letterbody p { margin: 0 0 2mm; }
.pq-dear { font-weight: 700; }

/* Bank table column widths — exact from PDF measurements */
.pq-bankl { width: 33%; line-height: 1.7; vertical-align: top; font-size: 9pt; }
.pq-wordc { width: 32%; vertical-align: middle; text-align: left; font-size: 9pt; line-height: 1.6; }
.pq-totcell { width: 32%; }
.pq-rl { text-align: right; font-weight: 600; font-size: 9pt; padding: 1.7mm 1.2mm !important; white-space: nowrap; }
.pq-rv { text-align: right; font-weight: 700; font-size: 9pt; padding: 1.7mm 1.2mm !important; white-space: nowrap; }
.pq-grand td { background: #fff; font-weight: 700; }

/* Sub description in items */
.pq-sub { font-size: 9pt; color: #000; }

/* Terms */
.pq-terms { font-size: 9pt; margin-bottom: 3mm; }
.pq-terms b { font-size: 9pt; }
.pq-terms ol { margin: 2mm 0 0 5mm; padding: 0; list-style: none; }
.pq-terms li { margin: 0; line-height: 1.55; }
.pq-terms li::before { content: ""; }

/* Sign box */
.pq-signbox { margin-top: 3mm; }
.pq-signbox td { border: 0.5pt solid #000; padding: 3mm; vertical-align: bottom; }
.pq-signl { width: 55%; height: 18mm; vertical-align: bottom; }
.pq-signr { text-align: right; font-size: 9pt; line-height: 1.8; width: 45%; }

/* Closing letter block */
.pq-closing { margin-top: 5mm; font-size: 10pt; color: #000; line-height: 1.5; }
.pq-closing p { margin: 0 0 3mm 0; }
.pq-cl-sign { margin-top: 6mm; line-height: 1.5; }
.pq-cl-regards b { display: block; }
.pq-cl-gap { display: none; }
.pq-cl-name { font-weight: 700; margin-top: 16mm; }
.pq-cl-desig { font-style: italic; color: #222; margin-top: 0.5mm; }
.pq-cl-contact {
  display: inline-block;
  margin-top: 2mm;
  padding-bottom: 1.5mm;
  border-bottom: 1.2pt solid #ec6b2d;
}
.pq-cl-contact + .pq-disc,
.pq-closing .pq-disc { margin-top: 1.5mm; }

/* Disclaimer */
.pq-disc { font-size: 9pt; font-style: italic; color: #000; margin-top: 3mm; }

/* HSN table */
.pq-hsn { margin-top: 3mm; }
.pq-words { font-size: 9pt; margin: 2mm 0; }

@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .linegrid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  .app { grid-template-columns: 1fr; }
  .side { position: relative; height: auto; }
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav button { min-height: 40px; }
  .form, .stats, .stats.compact, .quickGrid { grid-template-columns: 1fr; }
  .content { padding: 14px; }
  .top { position: relative; align-items: flex-start; flex-direction: column; }
  .linegrid { grid-template-columns: 1fr; }
  .uploadLine { grid-template-columns: 1fr; }
  .quoteFrame { width: 100%; min-height: auto; padding: 18px; }
  .quoteHeader, .quoteIntro, .quoteFooter, .specCard { grid-template-columns: 1fr; }
}

/* ===== Quote Builder — Biziverse-style additions ===== */
.builderCustRow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.custSearchWrap { position: relative; flex: 1; }
.custSearchInput { width: 100%; padding: 8px 12px; font-size: 14px; }
.custSuggestBox {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15,23,42,.16); max-height: 260px; overflow-y: auto; padding: 6px;
}
.custSuggestItem {
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px;
  font-weight: 600; color: var(--ink);
}
.custSuggestItem:hover { background: var(--soft); }

/* Global custom autocomplete dropdown (replaces native datalist everywhere) */
.acBox {
  position: fixed; z-index: 9999;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15,23,42,.18); max-height: 240px; overflow-y: auto; padding: 6px;
}
.acItem {
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px;
  font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acItem:hover, .acItem.acActive { background: var(--soft); }
.builderCopyRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; }
.iconBtn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 18px; line-height: 1; transition: background 0.15s; }
.iconBtn:hover { background: var(--bg-alt); }

.bCustDivider { height: 1px; background: #f1f5f9; margin: 16px 0 18px; }
/* ===== Redesigned builder fields: labels stacked above inputs ===== */
.bGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.bField { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.bGrid .bField { margin-bottom: 0; }
.bDocPanel .bField:last-child { margin-bottom: 0; }
.bField > label { font-size: 11px; color: #475569; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.bField > input, .bField > select, .bField > textarea { width: 100%; min-height: 42px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px; font-size: 13.5px; transition: border-color .15s, box-shadow .15s; }
.bField > input:hover, .bField > select:hover, .bField > textarea:hover { border-color: color-mix(in srgb, var(--ink) 16%, var(--line)); }
.bField > input:focus, .bField > select:focus, .bField > textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(240,100,52,.14); }

/* Modern toggle switch — theme-aware, replaces native checkbox toggles */
.kSwitch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); user-select: none; }
.kSwitch input { position: absolute; opacity: 0; width: 0; height: 0; }
.kSwitch .kTrack { width: 42px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 22%, var(--line)); position: relative; transition: background .2s cubic-bezier(.4,0,.2,1); flex-shrink: 0; }
.kSwitch .kTrack::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s cubic-bezier(.4,0,.2,1); }
.kSwitch input:checked + .kTrack { background: var(--accent); }
.kSwitch input:checked + .kTrack::after { transform: translateX(18px); }
.kSwitch input:focus-visible + .kTrack { box-shadow: 0 0 0 4px rgba(240,100,52,.18); }
.validSplit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.validSplit input, .validSplit select { width: 100%; min-height: 42px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px; font-size: 13.5px; transition: border-color .15s, box-shadow .15s; }
.validSplit input:hover, .validSplit select:hover { border-color: color-mix(in srgb, var(--ink) 16%, var(--line)); }
.validSplit input:focus, .validSplit select:focus { border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(240,100,52,.14); outline: none; }
.bFieldRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bFieldRow .bField { margin-bottom: 14px; }
/* input with leading icon */
.bInputIcon { position: relative; display: flex; align-items: center; }
.bInputIcon .bIco { position: absolute; left: 13px; display: inline-flex; color: #94a3b8; pointer-events: none; }
.bInputIcon .bIco svg { width: 16px; height: 16px; }
.bInputIcon:focus-within .bIco { color: var(--accent); }
.bInputIcon input, .bInputIcon select { width: 100%; min-height: 42px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px 10px 38px; font-size: 13.5px; transition: border-color .15s, box-shadow .15s; }
.bInputIcon input:hover, .bInputIcon select:hover { border-color: color-mix(in srgb, var(--ink) 16%, var(--line)); }
.bInputIcon input:focus, .bInputIcon select:focus { border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(240,100,52,.14); }
.bAddrGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #f1f5f9; }
.addrBoxMuted { color: #94a3b8; font-style: italic; cursor: default; border-style: solid; }
.addrBoxMuted:hover { border-color: #cbd5e1; background: var(--soft); }
@media (max-width: 1100px) { .bAddrGrid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .bGrid { grid-template-columns: 1fr; } }

/* Premium horizontal form rows in builder */
.bRow { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 14px; padding: 9px 0; }
.bRow + .bRow { border-top: 1px solid #f1f5f9; }
.bRow label { font-size: 11px; color: #64748b; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.bRow input, .bRow select { width: 100%; box-sizing: border-box; max-width: 460px; min-height: 38px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; }
.bRow input:hover, .bRow select:hover { background: #fff; border-color: #cbd5e1; }
.bRow input:focus, .bRow select:focus { background: #fff; }
.bDocPanel .bRow input, .bDocPanel .bRow select { max-width: none; }
.bRow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.bRow2 .bRow { padding: 7px 12px 7px 0; }
.bRow2 .bRow:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--line); }
.bRow2 .bRow:nth-child(even) { padding-left: 16px; border-left: none; }
.bTopGrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; margin-bottom: 14px; }
@media (max-width: 900px) { .bTopGrid { grid-template-columns: 1fr; } }

/* Address sections — aligned side-by-side */
.bAddrGrid { align-items: stretch; }
.addrSection { padding: 0; display: flex; flex-direction: column; }
.addrLabelRow { display: flex; align-items: center; gap: 10px; min-height: 26px; margin-bottom: 9px; font-size: 11px; color: #475569; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.addrSection > div:not(.addrLabelRow), .addrSection .addrBox { flex: 1; }
.addrBox { border: 1.5px dashed #d3dded; border-radius: 11px; padding: 13px 40px 13px 15px; cursor: pointer; min-height: 64px; position: relative; font-size: 13px; line-height: 1.65; background: var(--soft); transition: border-color 0.15s, background 0.15s, box-shadow .15s; display: flex; flex-direction: column; justify-content: center; }
.addrBox:hover { border-color: var(--accent); background: #fff; box-shadow: 0 2px 10px rgba(240,100,52,.08); }
.addAddrHint { color: var(--accent); font-weight: 700; }
.addrEditIcon { position: absolute; right: 13px; top: 13px; font-size: 14px; opacity: 0.4; }
.addrBox:hover .addrEditIcon { opacity: 0.9; }
.addrLabelRow .checkLabel { font-size: 11px; font-weight: 700; color: #64748b; }
#shipAddrBox { display: flex; }
#shipAddrBox .addrBox { width: 100%; }
.checkLabel { font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.checkLabel input[type="checkbox"] { width: 16px; min-height: 16px; height: 16px; flex-shrink: 0; }

/* Machine picker (multi-machine inquiry → one quote per machine) */
/* Machine picker — product-card grid (matches Product/Machine Master) */
.mPickGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.mPickCard { position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 5; border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.mPickCard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15,23,42,.18); border-color: var(--accent); }
.mPickCard input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.mPickCard:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,100,52,.16); }
/* selected tick badge over the image */
.mPickTick { position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,.9); border: 1.5px solid var(--line); color: transparent; display: flex; align-items: center; justify-content: center; transition: .16s; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.mPickTick svg { width: 16px; height: 16px; }
.mPickCard:has(input:checked) .mPickTick { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Full image fills the portrait card; diagonal status stamp over it; slim translucent info bar at the bottom */
.mPickCard .pmCardImg { flex: 1; min-height: 0; height: auto; padding: 12px; border-bottom: none; }
.mPickCard .pmCardImg img { max-height: 100%; object-fit: contain; }
.mPickCard .pmCardNoImg { font-size: 56px; }
/* diagonal status stamp */
.mPickStamp { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-26deg); z-index: 1; font-size: 34px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; pointer-events: none; opacity: .85; white-space: nowrap; text-shadow: 0 1px 2px rgba(255,255,255,.5); }
.mPickCard.st-quoted  .mPickStamp { color: #16a34a; }
.mPickCard.st-new     .mPickStamp { color: #2563eb; }
.mPickCard.st-pending .mPickStamp { color: #d97706; }
/* bottom info bar over the image */
.mPickBar { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 12px; background: rgba(10,15,26,.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.mPickBarL { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mPickBarR { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; text-align: right; }
.mPickBar .pmCardName { color: #fff; font-size: 14px; }
.mPickBar .pmCardModel { color: rgba(255,255,255,.8); }
.mPickBar .pmPrice { color: var(--accent); }
.mPickBar .pmGst { color: rgba(255,255,255,.72); }
/* dashed add-machine button */
.mPickAddBtn { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: transparent; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: .15s; }
.mPickAddBtn:hover { border-color: var(--accent); border-style: solid; color: var(--accent); }
/* remove (✕) on a committed extra card */
.mPickRemove { position: absolute; top: 10px; left: 10px; z-index: 2; width: 26px; height: 26px; border-radius: 8px; border: none; background: rgba(220,38,38,.9); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.mPickRemove:hover { background: #dc2626; }
/* inline "add another machine" row: dropdown + qty + Add + remove, all on one line */
.mExtraRow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--soft); border: 1.5px solid var(--line); border-radius: 12px; }
.mExtraRow .mExtraProd { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: inherit; font-size: 14px; }
.mExtraRow .mExtraQty { width: 72px; flex-shrink: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: inherit; font-size: 14px; text-align: center; }
.mExtraRow .btn { flex-shrink: 0; }
.mExtraRow .mExtraDel { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 14px; cursor: pointer; transition: .15s; }
.mExtraRow .mExtraDel:hover { border-color: var(--bad, #dc2626); color: var(--bad, #dc2626); }
.mPickBadge.mq { background: #dcfce7; color: #15803d; }
.mPickBadge.mp { background: #fef3c7; color: #b45309; }
.mPickBadge.mn { background: #dbeafe; color: #1d4ed8; }

/* ——— Dashboard layout polish (clean, spacious — like the concept) ——— */
.dashWrap { display: flex; flex-direction: column; gap: 16px; }
.dashWrap .stats, .dashWrap .grid2, .dashWrap .dChartGrid { margin: 0 !important; }
.dashWrap .grid2 { gap: 16px; }
.dashWrap > .panel, .dashWrap .grid2 > .panel, .dashWrap .dChartGrid > .panel { padding: 22px 24px; }
.dashWrap .panel > .head { margin-bottom: 16px; }
.dashWrap .panel > .head h2 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.dashWrap .panel > .head h2 .muted { margin-left: 8px; }

/* ——— Dashboard charts (added to existing panels; stat cards unchanged) ——— */
.dChartGrid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; margin-bottom: 14px; align-items: stretch; }
@media (max-width: 1000px) { .dChartGrid { grid-template-columns: 1fr; } }
.dChartRow { display: grid; grid-template-columns: 1fr 1.5fr 1.1fr; gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .dChartRow { grid-template-columns: 1fr; } }
.dChartRow .dashChart { height: 150px; }
.dChartRow .dashBars { height: 150px; }
.dChartRow .dashBars .dbTrack { height: 120px; }
.dTag { font-size: 11.5px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 4px 11px; border-radius: 980px; white-space: nowrap; }
.dashChart { display: block; margin-top: 6px; }
.dashGrid line { stroke: var(--line); stroke-width: 1; }
.dLegend { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.dLegend span { display: inline-flex; align-items: center; gap: 6px; }
.dLegend i { width: 9px; height: 9px; border-radius: 3px; }
.dDonutRow { display: flex; align-items: center; gap: 20px; padding-top: 6px; }
.dDlist { flex: 1; display: flex; flex-direction: column; gap: 11px; }
.dDl { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.dDl .dDot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.dDl .dNm { color: var(--muted); }
.dDl .dVv { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dashBars { display: flex; align-items: flex-end; gap: 10px; padding-top: 6px; }
.dbCol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dbVal { font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dbVal.zero { color: var(--muted); font-weight: 500; }
.dbTrack { width: 100%; max-width: 34px; height: 118px; display: flex; align-items: flex-end; }
.dbFill { width: 100%; min-height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #ff7d4f, var(--accent)); transition: height .6s cubic-bezier(.4,0,.2,1); }
.dbLbl { font-size: 11px; color: var(--muted); }

/* AMC per-year % input with the % symbol inside the box */
.amcPct { display: inline-flex; align-items: center; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; padding: 0 8px; width: 74px; flex-shrink: 0; }
.amcPct input { border: 0 !important; width: 100%; padding: 7px 2px; background: transparent; outline: none; }
.amcPct > span { color: #64748b; font-size: 13px; }
.amcConfigRow { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.amcYearGrid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.amcYearCell { width: 260px; }
.amcYearCell > label { display: block; font-size: 11px; font-weight: 700; color: #64748b; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.amcYearControls { display: flex; gap: 6px; align-items: center; }

/* Grouped quotations modal (per machine) */
.revSep td { padding: 0 !important; height: 3px; background: var(--accent, #f06434); border: 0 !important; }
.revLatestRow td { background: rgba(240,100,52,.05); }
.revOld td { opacity: .6; font-size: 12px; }
.revLatestTag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; margin-left: 8px; vertical-align: middle; }
.qRevTable { width: 100%; }
.qRevTable th, .qRevTable td { padding-left: 10px; padding-right: 10px; text-align: left !important; }
.qRevTable th { white-space: nowrap; }
.qRevTable td:first-child, .qRevTable th:first-child { white-space: nowrap; }   /* Date on one line */
.qRevTable .rowActions { white-space: nowrap; }

/* Edit Address modal — Biziverse style */
.editAddrForm { display: flex; flex-direction: column; }
.editAddrForm input, .editAddrForm select { width: 100%; }
.editAddrLbl { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 5px; font-weight: 600; }
.editAddrForm > .editAddrLbl:first-child, .editAddrForm > .editAddrRow:first-child .editAddrLbl { margin-top: 0; }
.editAddrRow { display: flex; align-items: center; gap: 8px; margin: 12px 0 5px; }
.editAddrRow .editAddrLbl { margin: 0; }
.editAddrCols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mt { margin-top: 12px; }
.badge { background: #f59e0b; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 4px; vertical-align: middle; }

/* Product cards in Select Item popup */
.productGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 4px 0; }
.productCard { position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--panel); color: var(--ink); transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; }
.productCard:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(244,118,59,.18); }
.productCardImg { width: 100%; height: 175px; object-fit: contain; background: #f6f8fb; padding: 12px; }
.productCardImg.noImg { display: flex; align-items: center; justify-content: center; font-size: 44px; padding: 0; }
.productCard:hover .productCardImg:not(.noImg) { transform: scale(1.06); }
.productCardImg:not(.noImg) { transition: transform .3s ease; }
.productPriceBadge { position: absolute; z-index: 2; top: 12px; right: 12px; background: var(--primary); color: #fff; font-weight: 700; font-size: 13px; padding: 5px 11px; border-radius: 20px; font-variant-numeric: tabular-nums; box-shadow: 0 4px 12px rgba(244,118,59,.4); }
.productCardInfo { padding: 13px 15px 16px; font-size: 13px; }
.productCardInfo b { font-size: 15px; font-weight: 650; color: var(--ink); }
.productCardMeta { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 11.5px; }
.productCardMeta .dot { width: 6px; height: 6px; border-radius: 50%; background: #3ecf8e; flex: 0 0 auto; }

/* Contact rows / Term rows — shared list row style */
.contactRow, .termRow { padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; transition: background 0.1s; }
.contactRow:hover, .termRow:hover { background: var(--bg-alt); }
.contactRow:last-child, .termRow:last-child { border-bottom: none; }
.termRowHead { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.termText { font-size: 12px; color: var(--text-muted); }

/* Print config popup */
.printCfgGrid { display: flex; flex-direction: column; gap: 0; }
.printCfgSection { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.printCfgSectionTitle { background: var(--bg2); padding: 8px 14px; font-weight: 700; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--line); }
.printCfgItems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 4px 0; }
.printCfgItem { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.printCfgItem:hover { background: var(--bg2); }
.printCfgItem input { cursor: pointer; width: 15px; height: 15px; accent-color: var(--primary); flex-shrink: 0; }

/* Share section */
.shareInlineRow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.shareCheck { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.shareInlineInput { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; }
.shareInlineInput[type="email"], .shareInlineInput[type="tel"] { width: 200px; }
.shareInlineInput[type="email"] { width: 180px; }
select.shareInlineInput { width: 160px; }
.shareInlineBtn { height: 34px; padding: 0 10px; }
.shareCheckRow { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.shareCheckRow label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.shareCheckRow input[type="checkbox"], .shareInlineRow input[type="checkbox"] { width: 16px; min-height: 16px; height: 16px; flex-shrink: 0; }
/* premium share chips */
.shareCheck { gap: 8px; font-size: 13px; font-weight: 600; color: #475569; background: var(--soft); border: 1px solid #e8edf5; border-radius: 10px; padding: 9px 14px; transition: border-color .15s, background .15s; }
.shareCheck:hover { border-color: #cdd8e8; background: #fff; }
.shareInlineRow input[type="checkbox"] { accent-color: var(--accent); }

/* premium notes textarea */
#bNotes { background: var(--soft); border: 1.5px solid #e8edf5; border-radius: 12px; padding: 12px 14px; }
#bNotes:focus { background: #fff; }
/* premium upload drop zone */
.uploadLine input[type="file"] { background: var(--soft); border: 1.5px dashed #cdd8e8; border-radius: 11px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.uploadLine input[type="file"]:hover { border-color: var(--accent); background: #fff; }
:root[data-theme="dark"] .uploadLine input[type="file"]:hover { background: rgba(240,100,52,.10); }

/* bzvAddrTable center alignment */
.bzvAddrTable .center { text-align: center; }
.bzvItemTable .center { text-align: center; }

/* Builder main grid - Biziverse style: left wide, right narrow */
.builderView { display: flex; flex-direction: column; gap: 20px; }
.builderView > .panel, .builderLeft > .panel, .builderRight > .panel { padding: 22px 24px; }
.bFieldRow { gap: 16px; }
.builderMainGrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.builderLeft { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.builderRight { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.builderLeft .grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bankDetailsBox { padding: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-muted); }
.bankInfo { display: flex; flex-direction: column; gap: 2px; }
/* Term rows: wide input + small icon buttons (Biziverse style) */
.termRowLine { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; background: var(--soft); border: 1px solid #eef2f8; border-radius: 12px; padding: 7px 10px 7px 7px; transition: border-color .15s, box-shadow .15s; }
.termRowLine:hover { border-color: #dbe3ef; box-shadow: 0 2px 8px rgba(16,31,61,.05); }
.termNum { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), #34507f); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
/* drag handle for reordering terms */
.termGrip { flex: 0 0 auto; width: 22px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--muted, #94a3b8); cursor: grab; border-radius: 6px; }
.termGrip:hover { color: var(--accent); background: rgba(240,100,52,.08); }
.termGrip:active { cursor: grabbing; }
.termRowLine.dragging { border-color: var(--accent); box-shadow: 0 14px 32px rgba(0,0,0,.32), 0 0 0 2px rgba(240,100,52,.35); position: relative; z-index: 5; background: var(--panel); will-change: transform; }
.termGrip { touch-action: none; }
.termRowLine input, .termRowLine textarea.termInput { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid transparent; background: #fff; border-radius: 9px; font-size: 13px; }
.termRowLine input:hover, .termRowLine textarea.termInput:hover { border-color: #e2e8f0; }
.termRowLine input:focus, .termRowLine textarea.termInput:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,100,52,.10); }
/* term line as auto-growing textarea so long text wraps instead of being clipped */
.termRowLine textarea.termInput { resize: none; overflow: hidden; box-sizing: border-box; font-family: inherit; line-height: 1.4; min-height: 34px; field-sizing: content; }
.termIcons { flex: 0 0 auto; display: flex; gap: 4px; }
.termIcon { width: 28px; height: 28px; border: none; background: #fff; border: 1px solid #e8edf5; border-radius: 8px; cursor: pointer; color: #64748b; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s, border-color .14s; }
.termIcon:hover:not(:disabled) { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent); }
.termIcon:disabled { opacity: .3; cursor: not-allowed; }
.termIcon.del:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* ——— Modern Customers page ——— */
.custTop { margin-bottom: 14px; }
.custSearch { width: 400px; max-width: 100%; }
.custLayout { grid-template-columns: 360px minmax(0, 1fr); align-items: start; gap: 18px; }
.custListPanel { padding: 8px; }
.custModernList { display: flex; flex-direction: column; gap: 4px; }
.custRowM { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: background .12s; border-left: 3px solid transparent; }
.custRowM:hover { background: var(--soft); }
.custRowM.active { background: #fff4ef; border-left-color: var(--accent); }
.custRowMain { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.custRowMain b { font-size: 14px; color: var(--ink); }
.custRowMain small { font-size: 12px; color: var(--muted); }
.custAvatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg, #2b3f63, #1a2740); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.custAvatar.lg { width: 60px; height: 60px; border-radius: 15px; font-size: 20px; }
.custDetailPanel { padding: 22px 24px; }
.custProfileHead { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.custProfileTitle { flex: 1; min-width: 0; }
.custProfileTitle h2 { margin: 0 0 4px; font-size: 24px; font-weight: 800; color: var(--ink); }
.custProfileSub { font-size: 13px; color: var(--muted); }
.custBadge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: #ecfdf3; color: #15803d; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.custBadge .dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
.custFieldGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.custField { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.custFieldFull { margin-bottom: 18px; }
.custFieldLabel { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.custFieldValue { font-size: 15px; font-weight: 600; color: var(--ink); word-break: break-word; }
.custStatsRow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.custTimelineHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.custTimelineHead b { font-size: 15px; color: var(--ink); }
@media (max-width: 900px) {
  .custLayout { grid-template-columns: 1fr; }
  .custFieldGrid, .custStatsRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Totals as flex rows so value stays beside label inside the box */
.totRow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px dashed #e7ecf4; font-weight: 700; font-size: 13.5px; }
.totRow span { color: #64748b; }
.totRow b { white-space: nowrap; color: #1e293b; font-weight: 800; }
.totRow.grand { background: linear-gradient(135deg, var(--primary), #34507f); color: #fff; font-size: 16px; border-bottom: 0; padding: 14px 16px; margin: 12px -16px 4px; border-radius: 12px; }
.totRow.grand span { color: rgba(255,255,255,.85); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.totRow.grand b { color: #fff; font-size: 20px; font-weight: 900; }

/* ===== Premium builder polish ===== */
.builderRight .panel:first-child { padding-bottom: 0; }
.bankDetailsBox { padding: 12px 14px; margin-top: 4px; font-size: 12.5px; line-height: 1.8; color: #475569; background: var(--soft); border: 1px solid #eef2f8; border-radius: 10px; }
.bankDetailsBox b { color: #1e293b; }
.iconBtn { background: var(--soft); border: 1.5px solid #e8edf5; border-radius: 11px; padding: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #475569; line-height: 1; transition: all .15s; }
.iconBtn svg { width: 18px; height: 18px; }
.iconBtn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(240,100,52,.25); }
.custSearchInput { width: 100%; padding: 12px 14px; font-size: 14px; min-height: 44px; border-radius: 11px; background: var(--soft); }
.custSearchInput:focus { background: #fff; }
.builderCustRow { gap: 10px; }
.builderCopyRow .btn.small { border-radius: 8px; }
/* item list table premium header */
.panel #lines table thead th, #lines table thead th { background: var(--soft); color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid #e7ecf4; }

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

/* ===== Custom Date Picker ===== */
.dpField { cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237180a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 36px; }
.dpPop {
  width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .08);
  padding: 12px; user-select: none; animation: dpIn .14s ease;
  font-family: inherit;
}
@keyframes dpIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.dpHead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dpSelects { flex: 1; display: flex; gap: 6px; }
.dpSelects select {
  flex: 1; appearance: none; border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px;
  font-weight: 700; font-size: 13.5px; color: #111c30; background: #f7f9fc; cursor: pointer;
}
.dpSelects select:focus { outline: none; border-color: var(--accent); }
.dpArrow {
  width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); background: #fff;
  border-radius: 10px; cursor: pointer; font-size: 20px; line-height: 1; color: var(--primary);
  display: grid; place-items: center; transition: background .12s, border-color .12s;
}
.dpArrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.dpDow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dpDow span { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); padding: 4px 0; letter-spacing: .3px; }
.dpGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dpDay {
  height: 36px; display: grid; place-items: center; border-radius: 9px; font-size: 13.5px;
  font-weight: 600; color: #1f2b45; cursor: pointer; transition: background .1s, color .1s;
}
.dpDay:hover:not(.dpEmpty) { background: rgba(240, 100, 52, .12); color: var(--accent); }
.dpEmpty { cursor: default; }
.dpToday { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); font-weight: 800; }
.dpSel { background: linear-gradient(145deg, var(--accent), #ff7d4f) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(240, 100, 52, .35); }
.dpFoot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.dpLink { background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); padding: 4px 6px; border-radius: 7px; }
.dpLink:hover { color: var(--accent); background: rgba(240, 100, 52, .08); }
.dpTodayBtn { color: var(--accent); }

/* ============================================================
   WHOLE-SITE THEME PRESETS (Settings → Theme)
   Driven by <html data-theme="..."> set in applyTheme().
   ============================================================ */
/* Theme picker cards */
.themeCards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.themeCard { display: flex; flex-direction: column; align-items: center; gap: 7px; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px 9px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; min-width: 84px; }
.themeCard:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15,23,42,.10); }
.themeCard.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,100,52,.15); }
.themeCard .tcPreview { width: 58px; height: 38px; border-radius: 9px; border: 1px solid rgba(15,23,42,.12); display: flex; align-items: center; justify-content: center; gap: 5px; }
.themeCard.dark .tcPreview { border-color: rgba(255,255,255,.18); }
.themeCard .tcDot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.themeCard .tcName { font-size: 12px; font-weight: 800; color: var(--ink); }

/* Light premium palettes — recolour primary / accent / sidebar AND tint the page so the whole look changes */
:root[data-theme="ocean"]   { --primary:#0b5c8a; --accent:#0891b2; --nav:#08283a; --nav2:#0f4258; --bg:#eef5fb; --soft:#e8f1f9; --line:#dbe8f2; }
:root[data-theme="emerald"] { --primary:#0f6b4f; --accent:#10b981; --nav:#062820; --nav2:#0c3a2c; --bg:#eef9f3; --soft:#e6f5ec; --line:#d9ece1; }
:root[data-theme="royal"]   { --primary:#4c2a86; --accent:#7c3aed; --nav:#241141; --nav2:#33195c; --bg:#f4f0fb; --soft:#efe8f8; --line:#e6dcf4; }
:root[data-theme="slate"]   { --primary:#334155; --accent:#f97316; --nav:#1e293b; --nav2:#334155; --bg:#eef1f6; --soft:#e6ebf1; --line:#dde3ec; }
:root[data-theme="sunset"]  { --primary:#9a3412; --accent:#f97316; --nav:#3b1414; --nav2:#5a2020; --bg:#fdf3ee; --soft:#faeade; --line:#f3ddce; }

/* ===== MIDNIGHT DARK — full palette + patches for hardcoded whites ===== */
:root[data-theme="dark"] {
  --bg:#0c1322; --panel:#141d31; --ink:#e7edf7; --muted:#8b9abf;
  --line:#26314a; --border:#26314a; --soft:#1a2438; --bg-alt:#1a2438;
  --nav:#0a1020; --nav2:#131d33; --primary:#3b5a8f; --accent:#f06434;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.5);
  --shadow-hover: 0 24px 55px rgba(0,0,0,.6);
  color-scheme: dark;
}
:root[data-theme="dark"] body { color: #e7edf7; }
:root[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=file]),
:root[data-theme="dark"] select, :root[data-theme="dark"] textarea,
:root[data-theme="dark"] .modalbody .form input, :root[data-theme="dark"] .modalbody .form select, :root[data-theme="dark"] .modalbody .form textarea {
  background:#1a2438 !important; border-color:#2c3a56 !important; color:#e7edf7 !important;
}
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color:#6f7ea1; }
:root[data-theme="dark"] .top { background: linear-gradient(180deg, rgba(16,23,40,.96), rgba(12,18,33,.9)); border-bottom-color: var(--line); }
:root[data-theme="dark"] .modal { background:#141d31; }
:root[data-theme="dark"] .modalhead, :root[data-theme="dark"] .modalfoot { background: rgba(20,29,49,.97); }
:root[data-theme="dark"] .sectionTitle, :root[data-theme="dark"] .head h2, :root[data-theme="dark"] #title, :root[data-theme="dark"] .pageHead h1 { color:#eaf0fb; }
:root[data-theme="dark"] label, :root[data-theme="dark"] .field > label, :root[data-theme="dark"] .subtitle { color:#8b9abf; }
:root[data-theme="dark"] thead th:not(#kmyWordApp *):not(#kmyDocumentPreview *), :root[data-theme="dark"] table thead th:not(#kmyWordApp *):not(#kmyDocumentPreview *) { background:#1a2438 !important; color:#9fb0cd !important; border-bottom-color: var(--line) !important; }
:root[data-theme="dark"] td:not(#kmyWordApp *):not(#kmyDocumentPreview *) { border-color: var(--line); }
:root[data-theme="dark"] tr:hover td:not(#kmyWordApp *):not(#kmyDocumentPreview *) { background: rgba(255,255,255,.035) !important; }
:root[data-theme="dark"] .btn { background:#1b2540; border-color:#2c3a56; color:#dbe4f5; }
:root[data-theme="dark"] .btn:hover { background:#233152; border-color:#3a4a6b; }
:root[data-theme="dark"] .btn.primary { background: linear-gradient(145deg, var(--accent), #ff7d4f); border:0; color:#fff; }
:root[data-theme="dark"] .btn.danger { background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.4); color:#ff9a90; }
:root[data-theme="dark"] .search { background:#1a2438; }
:root[data-theme="dark"] .themeCard { background:#141d31; }
:root[data-theme="dark"] .colorChip, :root[data-theme="dark"] .shareCheck, :root[data-theme="dark"] .bankDetailsBox { background:#1a2438; border-color: var(--line); }
:root[data-theme="dark"] .muted { color:#8b9abf; }

/* Quote Builder — extra polish only when the whole-site theme is Midnight (dark) */
:root[data-theme="dark"] .termRowLine { border-color: var(--line); }
:root[data-theme="dark"] .termIcon { background:#1b2540; border:1px solid #2c3a56; color:#9fb0cd; }
:root[data-theme="dark"] .termIcon:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color:#fff; }
:root[data-theme="dark"] .termIcon.del:hover { background: rgba(220,38,38,.25); border-color: rgba(220,38,38,.5); color:#ff9a90; }
:root[data-theme="dark"] .custSuggestBox { background:#141d31; border:1px solid var(--line); color:#e7edf7; box-shadow:0 18px 44px rgba(0,0,0,.5); }
:root[data-theme="dark"] .addrBox { background: rgba(240,100,52,.06); border-color: rgba(255,138,92,.45); color:#dbe4f5; }
:root[data-theme="dark"] .addrBoxMuted { background: rgba(255,255,255,.03); border-color: var(--line); color:#7d8db0; }
:root[data-theme="dark"] .extraFieldsNote { background: rgba(255,176,32,.08); border:1px solid rgba(255,176,32,.3); color:#ffcf87; }
:root[data-theme="dark"] .totRow.grand { background: linear-gradient(145deg, rgba(240,100,52,.22), rgba(255,138,92,.10)); border:1px solid rgba(255,138,92,.4); border-radius:14px; padding:14px 16px; box-shadow: inset 0 0 30px rgba(240,100,52,.14); }
:root[data-theme="dark"] .totRow.grand span { color:#ffbfa6; }
:root[data-theme="dark"] .totRow.grand b { color:#fff; }
:root[data-theme="dark"] .bInputIcon .bIco { color:#7d8db0; }
:root[data-theme="dark"] .bCustDivider { background: var(--line); }

/* ===== MIDNIGHT DARK — content component fixes (readability) ===== */
/* List/table text was hardcoded dark (td{color:#263244}) → light */
:root[data-theme="dark"] .content td, :root[data-theme="dark"] .modalbody .tablebox td { color:#dfe6f2; }
:root[data-theme="dark"] .content th, :root[data-theme="dark"] .modalbody .tablebox th { color:#9fb0cd; }
/* Stat / KPI numbers used var(--primary) (dark) → light */
:root[data-theme="dark"] .content .card .value, :root[data-theme="dark"] .content .value { color:#eaf0fb; }
:root[data-theme="dark"] .content .label { color:#aeb9d1; }
:root[data-theme="dark"] .content .note, :root[data-theme="dark"] .content .muted { color:#8b9abf; }
/* White cards: dashboard "Needs Attention" + customer History (.alert / .alertItem) */
:root[data-theme="dark"] .content .alert, :root[data-theme="dark"] .content .alertItem { background:#141d31; border-color: var(--line); }
:root[data-theme="dark"] .content .alert:hover, :root[data-theme="dark"] .content .alertItem:hover { box-shadow: 0 12px 24px rgba(0,0,0,.4); }
:root[data-theme="dark"] .content .alert b, :root[data-theme="dark"] .content .alert strong, :root[data-theme="dark"] .content .alertItem b { color:#eaf0fb; }
/* Selected customer row was #fff4ef */
:root[data-theme="dark"] .content .custRowM.active { background: rgba(240,100,52,.14); }
:root[data-theme="dark"] .content .custRowM:hover { background: rgba(255,255,255,.05); }
:root[data-theme="dark"] .content .custItem.active b { color:#ff9f7d; }
/* Misc content controls with hardcoded whites */
:root[data-theme="dark"] .content .statusDrop { background:#1a2438; border-color: var(--line); color:#e7edf7; }
:root[data-theme="dark"] .content .selectAdd button { background:#1b2540; border-color:#2c3a56; color:#dbe4f5; }
:root[data-theme="dark"] .content .colorChip { background:#1a2438; border-color: var(--line); }
:root[data-theme="dark"] .content .bankDetailsBox { background:#1a2438; border-color: var(--line); color:#cdd7ea; }
:root[data-theme="dark"] .content .bankDetailsBox b { color:#fff; }
:root[data-theme="dark"] .content .totRow b { color:#eaf0fb; }
:root[data-theme="dark"] .content .head h2, :root[data-theme="dark"] .content h2, :root[data-theme="dark"] .content h3 { color:#eaf0fb; }

/* ===== MIDNIGHT DARK — modal card components (were light gradient cards) ===== */
:root[data-theme="dark"] .inqProdRow { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.09); }
:root[data-theme="dark"] .inqProdRow:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); box-shadow: none; }
:root[data-theme="dark"] .inqProdRow:focus-within { background: rgba(255,255,255,.05); border-color: var(--accent); }
:root[data-theme="dark"] .modalbody .form .inqProdRow input:not([type=checkbox]):not([type=radio]):not([type=file]) { background:#1a2438 !important; border-color:#2c3a56 !important; }
:root[data-theme="dark"] .inqProdDel { background: rgba(255,255,255,.04); border-color: rgba(220,38,38,.4); color:#ff9a90; }
:root[data-theme="dark"] .inqProdHead { color:#7d8db0; }
:root[data-theme="dark"] .inqProdBlock > label { color:#8b9abf; }
/* Documents hub cards */
:root[data-theme="dark"] .hubCard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
:root[data-theme="dark"] .hubCard:hover { border-color: rgba(240,100,52,.5); }
:root[data-theme="dark"] .hubCard .hubTitle { color:#eaf0fb; }
:root[data-theme="dark"] .hubCard .hubSub { color:#8b9abf; }
:root[data-theme="dark"] .hubCount { background: rgba(255,255,255,.08); color:#cdd7ea; }
/* Uploaded-documents cards */
:root[data-theme="dark"] .saleDocCard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
:root[data-theme="dark"] .saleDocCard.filled { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.35); }
:root[data-theme="dark"] .saleDocCard .sdTitle { color:#eaf0fb; }
:root[data-theme="dark"] .saleDocCard .sdFile { color:#cdd7ea; }
:root[data-theme="dark"] .saleDocCard .sdUploadBtn { background: rgba(255,255,255,.04); color:#dbe4f5; }
/* Invoice builder totals card */
:root[data-theme="dark"] .invTotalsCard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
:root[data-theme="dark"] .invPreviewWrap { background:#0c1322; }
/* Select+Add controls inside modals */
:root[data-theme="dark"] .selectAdd button { background:#1b2540; border-color:#2c3a56; color:#dbe4f5; }
:root[data-theme="dark"] .selectAdd button:hover { background: var(--accent); border-color: var(--accent); color:#fff; }

/* ===== MIDNIGHT DARK — dropdowns (.acBox) + tabs were white ===== */
:root[data-theme="dark"] .acBox { background:#141d31; border-color: var(--line); box-shadow:0 14px 34px rgba(0,0,0,.55); }
:root[data-theme="dark"] .acItem { color:#e7edf7; }
:root[data-theme="dark"] .acItem:hover, :root[data-theme="dark"] .acItem.acActive { background: rgba(255,255,255,.07); }
:root[data-theme="dark"] .tabs button { background:#1b2540; border-color:#2c3a56; color:#dbe4f5; }
:root[data-theme="dark"] .tabs button:hover { border-color: var(--accent); }
:root[data-theme="dark"] .tabs button.active { background: var(--accent); border-color: var(--accent); color:#fff; }
:root[data-theme="dark"] .subTabs button { color:#8b9abf; }
:root[data-theme="dark"] .subTabs button:hover { color:#dbe4f5; }

/* Smart Terms — clean aligned grid */
.smartTermsGrid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.smartTermsGrid .stFieldWide { grid-column:1 / -1; }
.smartTermsGrid .stField { display:flex; flex-direction:column; gap:6px; }
.smartTermsGrid .stLabel { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); }
.smartTermsGrid .stField > input { width:100%; box-sizing:border-box; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-alt); color:inherit; font-size:14px; font-weight:600; transition:border-color .15s, box-shadow .15s; }
.smartTermsGrid input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,100,52,.15); }
.stPayRow { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.stPaySeg { display:flex; flex-direction:column; gap:4px; }
.stPaySeg input { width:88px; box-sizing:border-box; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg-alt); color:inherit; font-size:14px; font-weight:600; transition:border-color .15s, box-shadow .15s; }
.stPaySeg span { font-size:11px; font-weight:600; color:var(--muted); text-align:center; }
.stPaySum { align-self:center; font-size:12px; font-weight:700; padding-bottom:2px; }
@media (max-width:600px){ .smartTermsGrid { grid-template-columns:1fr; } }

/* Quotations queue table: header and data both left-aligned so each header sits directly above its column's text */
.qQueueTbl th, .qQueueTbl td { text-align: left; }
/* All columns centered except Customer (2) and Products (3), which stay left */
.qQueueTbl th:nth-child(4), .qQueueTbl td:nth-child(4),
.qQueueTbl th:nth-child(5), .qQueueTbl td:nth-child(5),
.qQueueTbl th:nth-child(6), .qQueueTbl td:nth-child(6),
.qQueueTbl th:nth-child(7), .qQueueTbl td:nth-child(7),
.qQueueTbl th:nth-child(8), .qQueueTbl td:nth-child(8),
.qQueueTbl th:nth-child(9), .qQueueTbl td:nth-child(9),
.qQueueTbl th:nth-child(10), .qQueueTbl td:nth-child(10) { text-align: center; }
/* keep the action buttons grouped in the centre */
.qQueueTbl td:nth-child(10) .rowActionsGrid { justify-content: center; }

/* Amber info/warning banner (used by Google integration status, etc.) */
.amberNote {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: #fff7ed;
  border: 1px solid #f7c98a;
  border-left: 4px solid #ee6c2d;
  color: #7c4a12;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.amberNote code {
  background: #fde9d5;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12.5px;
  color: #8a3d0b;
}
:root[data-theme="dark"] .amberNote,
body.dark .amberNote {
  background: #2a2113;
  border-color: #5a4321;
  color: #f0d9b6;
}

/* ——— Quote Builder: Product Specifications editor ——— */
#specPanel .head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.specCard { display:block !important; grid-template-columns:none !important; gap:0 !important; border:1px solid var(--line); border-radius:12px; margin:12px 0; padding:0; overflow:hidden; background:var(--card,#fff); }
/* undo the old datasheet-era fixed image sizing inside the spec sheet */
.specSheet img, .specEdit img { width:auto; height:auto; max-width:100%; border:0; background:none; display:inline; }
.specCardHead { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--panel2,#f4f6fb); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.specCardHead b { flex:1; min-width:120px; }
.specInc { display:flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; }
.specEdit { padding:0 0 18px; background:#fff; color:#1c1c1c; outline:none; }
.specEdit:focus-within { box-shadow: inset 0 0 0 2px var(--accent,#f06434); }
.specEmpty { padding:12px 14px; font-size:13px; color:var(--muted,#64748b); }
.specEmpty .specEdit { margin-top:8px; min-height:120px; border:1px dashed var(--line); border-radius:8px; }

/* On-screen rendering of the professional spec sheet (mirrors print) */
.specSheet { font-family: inherit; color:#1c1c1c; font-size:13px; line-height:1.5; background:#fff; }
.specSheet .specHead { display:flex; justify-content:space-between; align-items:stretch; background:#17233f; color:#fff; padding:16px 18px; }
.specSheet .specName { font-size:21px; font-weight:800; line-height:1.1; }
.specSheet .specName .specModel { display:block; font-size:12px; font-weight:400; color:#c7d0e2; margin-top:3px; }
.specSheet .specCo { text-align:right; font-size:19px; font-weight:800; color:#eef1f7; }
.specSheet .specCo .specIso { display:block; font-size:9px; font-weight:600; color:#ee6c2d; margin-top:3px; }
.specSheet .specSec { color:#4a2f86; font-size:16px; font-weight:700; margin:16px 18px 6px; border-bottom:1px solid #d9d2ec; padding-bottom:4px; }
.specSheet .specDesc { text-align:justify; padding:2px 18px; }
.specSheet .specTbl { width:calc(100% - 36px); border-collapse:collapse; margin:0 18px; }
.specSheet .specTbl td { vertical-align:top; padding:5px 8px 5px 0; }
.specSheet .specTbl .specTblL { width:34%; color:#127a9e; font-weight:700; }
.specSheet .specTbl .specTblC { width:14px; }
.specSheet .specFeat { margin:4px 18px 14px 40px; padding:0; }
.specSheet .specFeat li { margin:0 0 5px; }

.specHint { font-size:11.5px; color:#b45309; background:#fff7ed; border:1px solid #f7c98a; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.specSheet .specDesc:empty::before { content:"Type product description here…"; color:#9aa4b5; }
.specSheet .specDesc { min-height:20px; }
.specSheet .specTbl .specTblL:empty::before,
.specSheet .specTbl .specTblV:empty::before { content:"\00a0"; }

/* Spec sheet: number column, numbered features, note (matches the Brochure format) */
.specSheet .specTbl .specTblN { width:26px; color:#127a9e; font-weight:700; }
.specSheet .specFeat { margin:4px 18px 10px 40px; padding:0; list-style:decimal; }
.specSheet .specFeat li { margin:0 0 5px; padding-left:2px; }
.specSheet .specNote { margin:8px 18px 14px; font-size:11px; font-style:italic; color:#6b7280; }

/* Free-hand spec/catalogue editor toolbar (Word-like, always visible) */
.specToolbar { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:7px 10px; background:var(--panel2,#f4f6fb); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; }
.specTbBtn { border:1px solid var(--line); background:var(--card,#fff); color:var(--ink,#1f2937); border-radius:6px; padding:4px 9px; font-size:13px; cursor:pointer; line-height:1.1; }
.specTbBtn:hover { background:var(--accent,#f06434); color:#fff; border-color:var(--accent,#f06434); }
.specTbSel { border:1px solid var(--line); background:var(--card,#fff); color:var(--ink,#1f2937); border-radius:6px; padding:4px 6px; font-size:13px; cursor:pointer; }
.specTbColor { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); background:var(--card,#fff); border-radius:6px; padding:3px 7px; font-size:13px; font-weight:700; cursor:pointer; }
.specTbColor input[type=color] { width:18px; height:18px; border:0; padding:0; background:none; cursor:pointer; }
.specEdit { padding:16px 0; min-height:220px; }
.specEdit:focus { outline:none; }

/* ═══ Catalogue Designer ═══ */
#catOverlay { position:fixed; inset:0; z-index:100000; background:#0e1424; display:flex; flex-direction:column; }
#catOverlay .catBar { display:flex; align-items:center; gap:14px; padding:10px 16px; background:#161d31; color:#e7ecf5; border-bottom:1px solid #26314d; flex-wrap:wrap; }
#catOverlay .catPageNav { display:flex; align-items:center; gap:8px; color:#aeb8cc; }
#catOverlay .catTools { display:flex; align-items:center; gap:6px; padding:8px 16px; background:#1b2340; border-bottom:1px solid #26314d; flex-wrap:wrap; color:#cdd6ea; }
#catOverlay .catDivider { width:1px; height:22px; background:#3a466b; margin:0 4px; }
#catOverlay .catScroll { flex:1; overflow:auto; display:flex; justify-content:center; padding:24px; }
#catOverlay .catPage { position:relative; background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.5); flex:0 0 auto; align-self:flex-start; font-family:Calibri,"Segoe UI",sans-serif; }
#catOverlay .catElem { cursor:move; box-sizing:border-box; }
#catOverlay .catElem.sel { outline:1.5px solid #ee6c2d; }
#catOverlay .catElem.editing { cursor:text; outline:2px solid #2f80ed; background:#fff !important; }
#catOverlay .catText { padding:2px 4px; overflow:visible; }
#catOverlay .catImg { display:flex; align-items:center; justify-content:center; background:#f3f5f9; }
#catOverlay .catImgPh { color:#9aa4b5; font-weight:700; font-size:12px; }
#catOverlay .catHandle { position:absolute; right:-6px; bottom:-6px; width:14px; height:14px; background:#ee6c2d; border:2px solid #fff; border-radius:3px; cursor:nwse-resize; }

/* Quote Builder — Product Catalogue list */
.catRow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin:8px 0; background:var(--card,#fff); }
.catRowName { font-weight:700; flex:1; min-width:140px; }
.catRowTag { font-size:11.5px; color:#b45309; background:#fff7ed; border:1px solid #f7c98a; padding:2px 8px; border-radius:20px; white-space:nowrap; }

/* ═══ Enhanced Catalogue & Specification Previews ═══ */
.specPreviewArea { border-radius: 0 0 12px 12px; }
.specPreviewFrame { font-family: Calibri, "Segoe UI", Arial, sans-serif; color: #1e293b; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.specPreviewFrame:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.09); }
.catWordPreview { font-family: Calibri, Arial, sans-serif; font-size: 13px; line-height: 1.5; color: #20242c; }
.catWordPreview h2 { color: #4a2f86; font-size: 16px; margin: 12px 0 6px; font-weight: 700; }
.catWordPreview table { border-collapse: collapse; width: 100%; margin-bottom: 12px; }
.catWordPreview td, .catWordPreview th { border: 0.5pt solid #cbd5e1; padding: 6px 8px; font-size: 12.5px; }
.catWordPreview img { max-width: 100%; border-radius: 4px; }
.catCorelPreviewWrap { width: 100%; overflow-x: auto; background: #eaedf3; padding: 12px; border-radius: 6px; }
.catCorelPreviewWrap .catPrintPage { margin: 0 auto 12px auto; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.catPrintPage { position: relative; width: 698px; min-height: 980px; page-break-after: always; overflow: hidden; background: #fff; font-family: Calibri, 'Segoe UI', sans-serif; }
.catWordPage { page-break-before: always; font-family: Calibri, Arial, sans-serif; font-size: 10pt; color: #20242c; line-height: 1.5; background: #fff; padding: 0; }
.catWordPage h2 { color: #4a2f86; font-size: 13pt; margin: 4mm 0 2mm; }
.catWordPage table { border-collapse: collapse; width: 100%; }
.catWordPage td, .catWordPage th { border: 0.5pt solid #999; padding: 2mm 2.5mm; font-size: 9pt; }
.catWordPage img { max-width: 100%; }

/* Product > Model > Variant editor, using the current theme. */
.prod-model-group{border:1px solid var(--line);border-radius:12px;margin:12px 0;overflow:hidden;background:var(--panel)}
.prod-model-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(127,127,127,.07);border-bottom:1px solid var(--line)}
.prod-model-head .field{flex:1;margin:0;min-width:160px}.prod-model-head label{display:block;font-size:11px;margin-bottom:5px;color:var(--muted)}
.prod-model-head input{width:100%;box-sizing:border-box;font-weight:600}.prod-model-head .pill{white-space:nowrap}
.prod-model-variants{padding:12px 16px}.prod-variant-card+.prod-variant-card{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.prod-variant-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.prod-variant-fields .field{margin:0;min-width:0}.prod-variant-fields label{font-size:11px;display:block;margin-bottom:5px;color:var(--muted)}
.prod-variant-fields input{width:100%;box-sizing:border-box;min-width:0}
.prod-variant-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:12px}.prod-variant-footer .pill{margin-right:auto;font-size:11px}
.prod-model-empty{padding:20px;border:1px dashed var(--line);border-radius:10px;color:var(--muted)}
.prod-model-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prod-model-choice{text-align:left;padding:16px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;cursor:pointer}.prod-model-choice strong,.prod-model-choice span{display:block}.prod-model-choice span{margin-top:6px;font-size:12px;color:var(--muted)}.prod-model-choice:hover{border-color:var(--accent)}
@media(max-width:600px){.prod-variant-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.prod-model-head{flex-wrap:wrap}.prod-model-picker{grid-template-columns:1fr}}


.machine-picker-path{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:12px}.machine-picker-path strong{color:var(--ink)}
.machine-picker-search{display:flex;gap:12px;margin:18px 0}.machine-picker-search input{flex:1;min-width:0}.machine-picker-search select{width:160px}
.machine-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.machine-picker-card,.machine-picker-model{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease}.machine-picker-card:hover,.machine-picker-model:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.machine-picker-card[hidden]{display:none}.machine-picker-image{height:150px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px}.machine-picker-image img{max-height:100%;max-width:100%;object-fit:contain}.machine-picker-placeholder{font-size:42px;font-weight:700;color:#bdc5d6}.machine-picker-card-body,.machine-picker-model{padding:18px}.machine-picker-eyebrow{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.machine-picker h3{font-size:16px;line-height:1.35;margin:8px 0}.machine-picker-card-body>p,.machine-picker-model>p{font-size:12px;margin:0 0 18px}.machine-picker-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:16px 0;font-size:11px;color:var(--muted)}.machine-picker-meta strong{font-size:15px;color:var(--ink);white-space:nowrap}.machine-picker-card .btn,.machine-picker-model .btn{width:100%}.machine-picker-footer{display:flex;align-items:center;gap:12px;width:100%}.machine-picker-footer>span{flex:1;text-align:right;color:var(--muted);font-size:12px}.prod-model-mode{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:10px 16px;border-bottom:1px solid var(--line)}
@media(max-width:750px){.machine-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.machine-picker-grid{grid-template-columns:1fr}.machine-picker-search{flex-direction:column}.machine-picker-search select{width:100%}}
@media(prefers-reduced-motion:reduce){.machine-picker-card,.machine-picker-model{transition:none;transform:none!important}}


.master-structure-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.master-structure-head h3{margin:6px 0;font-size:17px;color:var(--ink)}.master-structure-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.master-structure-head .btn{white-space:nowrap}.master-structure-steps{display:flex;gap:16px;flex-wrap:wrap;padding:12px 4px;color:var(--muted);font-size:11px}.master-model-actions{display:flex;gap:8px;align-items:center}.prod-model-head{flex-wrap:wrap}.master-model-remove{font-size:11px}.master-config-label{font-size:12px;color:var(--muted);margin-bottom:12px}.master-card-summary{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}.master-card-summary span{font-size:10px;border:1px solid var(--line);border-radius:5px;padding:4px 7px;color:var(--muted)}
@media(max-width:600px){.master-structure-head{align-items:flex-start;flex-direction:column}}


.models-manager{display:block!important}.models-manager>[hidden],.models-manager .prod-model-group[hidden]{display:none!important}.manager-top{display:flex;justify-content:space-between;gap:12px;margin:16px 0}.manager-model-list{display:grid;gap:12px}.manager-model-card{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.manager-model-card h3{margin:0 0 6px;font-size:17px}.manager-model-card p{margin:0;font-size:12px}.pmCardActions{flex-wrap:wrap}.models-manager .prod-model-group{margin-top:12px}

.manager-model-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.manager-model-card{display:block;padding:0;overflow:hidden}.manager-model-info{padding:16px}.manager-model-info .btn{width:100%;margin-top:14px}.model-photo{height:150px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;overflow:hidden;padding:12px;color:#7180a0;font-size:12px}.model-photo img{max-width:100%;max-height:100%;object-fit:contain}.model-photo-editor{display:flex;align-items:center;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line)}.model-photo-editor .model-photo{width:100px;height:90px;flex:none}.model-photo-editor label input{display:block;margin-top:8px;max-width:220px;font-size:11px}.machine-picker-model>.model-photo{margin:-18px -18px 16px;border-radius:0}@media(max-width:650px){.manager-model-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.manager-model-list{grid-template-columns:1fr}}

/* Organized model catalogue and configuration editor */
.models-manager{display:block!important}
.models-manager>.field.full{margin:0!important}
.models-manager .manager-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 24px;padding:4px 0 20px;border-bottom:1px solid var(--line)}
.models-manager .manager-top h3{font-size:20px;margin:7px 0}
.models-manager .manager-top p{margin:0;line-height:1.5}
.manager-eyebrow{color:#ff9369;font-size:10px;font-weight:700;letter-spacing:1.6px}
.manager-top-actions{display:flex;gap:8px;flex-shrink:0}
.models-manager .manager-model-list{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.models-manager .manager-model-card{background:#172237;border:1px solid #304058;border-radius:14px;box-shadow:0 8px 20px #00000018;transition:border-color .15s,transform .15s}
.models-manager .manager-model-card:hover{border-color:#7d8da7;transform:translateY(-2px)}
.models-manager .manager-model-card>.model-photo{height:170px;border-radius:0;background:#f7f9fc}
.models-manager .manager-model-info{padding:18px}
.models-manager .manager-model-info h3{font-size:17px;margin:0 0 7px}
.models-manager .manager-model-info p{margin:0;font-size:12px}
.models-manager .manager-model-info .btn{margin-top:20px;box-shadow:none}
.photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:#77859d}
.photo-placeholder-icon{font-size:32px;font-weight:400;color:#a8b4c8}
.models-manager .prod-model-group{border-radius:14px;border:1px solid #304058;background:#131e31;overflow:hidden}
.models-manager .prod-model-head{padding:20px;gap:12px;background:#19263b;flex-wrap:wrap}
.models-manager .prod-model-head .field{flex:1;min-width:200px}
.models-manager .field label{font-size:10px;letter-spacing:.5px;color:#a4b3cc;margin-bottom:8px}
.models-manager .field input{height:42px;border-radius:8px;background:#1b293f;border:1px solid #35455f}
.models-manager .model-photo-editor{padding:20px;gap:20px;border-bottom:1px solid #2b3b53}
.models-manager .model-photo-editor .model-photo{width:112px;height:100px;background:#f7f9fc;border-radius:10px}
.models-manager .model-photo-editor>label{position:relative;cursor:pointer;padding:12px 18px;text-transform:none;font-size:12px;letter-spacing:0;border:1px dashed #546780;background:#1c2b42;box-shadow:none;overflow:hidden}
.models-manager .model-photo-editor label input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;max-width:none}
.models-manager .prod-model-mode{display:flex!important;justify-content:flex-start!important;align-items:center;gap:12px;padding:16px 20px;background:#18253a;font-size:12px;text-transform:none;letter-spacing:0}
.models-manager .prod-model-mode input[type=checkbox]{width:17px!important;height:17px!important;min-height:0!important;flex:0 0 17px;margin:0;accent-color:#ff723c}
.models-manager .prod-model-mode span{display:flex;flex-direction:column;gap:4px}
.models-manager .prod-model-mode strong{font-size:12px;color:#e5edf9}
.models-manager .prod-model-mode small{font-weight:400;color:#a4b3cc;font-size:11px}
.models-manager .prod-model-variants{padding:20px}
.models-manager .master-config-label{padding:0 0 16px;color:#a4b3cc;line-height:1.5}
.models-manager .prod-variant-card{border:1px solid #35455f;border-radius:12px;background:#172338;margin-bottom:18px;overflow:hidden;padding:0}
.variant-section-title{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#1c2a40;border-bottom:1px solid #35455f}
.variant-section-title span{font-size:9px;letter-spacing:1px;color:#ffac88;font-weight:700}
.variant-section-title strong{font-size:14px}
.models-manager .prod-variant-fields{padding:20px;gap:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.models-manager .prod-variant-footer{padding:14px 20px;border-top:1px solid #35455f;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#152034}
.models-manager .prod-variant-footer .pill{margin-right:auto;color:#aabbd4;font-size:11px}
.models-manager .btn.danger{box-shadow:none;background:#382330;border-color:#694052}
.models-manager .btn{border-radius:8px}
@media(max-width:700px){.models-manager .manager-top{align-items:flex-start;flex-direction:column}.models-manager .prod-variant-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.models-manager .prod-model-head .field{flex-basis:100%}.models-manager .model-photo-editor{gap:12px}}
@media(max-width:420px){.models-manager .prod-variant-fields{grid-template-columns:1fr}}

/* Compact quotation specification actions */
.quote-spec-panel .head{margin-bottom:16px}
.quote-spec-panel .head p{margin:6px 0 0;font-size:12px}
.quote-spec-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#18243a;margin-bottom:10px}
.quote-spec-row:last-child{margin-bottom:0}
.quote-spec-identity{display:flex;align-items:center;gap:12px;min-width:0}
.quote-spec-icon{display:grid;place-items:center;width:40px;height:44px;flex:none;border:1px solid #3c526e;border-radius:9px;background:#21334e;color:#9fc8ff;font-size:24px}
.quote-spec-identity h3{margin:0;font-size:14px;color:#e6edf9;overflow-wrap:anywhere}
.quote-spec-identity p{margin:5px 0 0;color:#93a7c6;font-size:11px}
.quote-spec-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}
.quote-spec-include{display:flex!important;align-items:center;gap:7px;font-size:11px!important;text-transform:none!important;letter-spacing:0!important;white-space:nowrap;margin-right:10px;color:#b8c8df}
.quote-spec-include input{width:15px!important;height:15px!important;min-height:0!important;margin:0;accent-color:#ff743e}
.quote-spec-actions .btn{box-shadow:none;white-space:nowrap}
.quote-spec-options{position:relative}
.quote-spec-options summary{cursor:pointer;list-style:none;padding:8px 10px;border:1px solid var(--line);border-radius:7px;color:#b8c8df}
.quote-spec-options summary::-webkit-details-marker{display:none}
.quote-spec-options>div{position:absolute;right:0;top:42px;z-index:20;padding:8px;background:#1b2940;border:1px solid #40526c;border-radius:9px;box-shadow:0 8px 25px #0005;white-space:nowrap}
@media(max-width:800px){.quote-spec-row{align-items:flex-start;flex-direction:column;gap:14px}.quote-spec-actions{flex-wrap:wrap;width:100%}.quote-spec-include{margin-right:auto}}