/* ══════════════════════════════════════════
   THEME VARIABLES
══════════════════════════════════════════ */
:root {
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --blue-dark: #1d4ed8;
  --green: #16a34a;
  --green-light: #f0fdf4;
  --orange: #ea580c;
  --orange-light:#fff7ed;
  --red: #dc2626;
  --red-light: #fef2f2;
  --yellow: #ca8a04;
  --yellow-light:#fefce8;
  --copper: #C97A3D;       /* gold-finger / pad-replating accent — used sparingly, login only */
  --copper-bright: #E8A659;
}
[data-theme="light"] {
  --bg: #f8fafc;
  --bg2: #f1f5f9;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --border: #e2e8f0;
  --border2: #cbd5e1;
  --text: #0f172a;
  --text2: #334155;
  --text3: #64748b;
  --text4: #94a3b8;
  --sidebar-bg: #1e293b;
  --sidebar-text:#cbd5e1;
  --sidebar-muted:#64748b;
  --sidebar-hover:#334155;
  --sidebar-active:#3b82f6;
  --topbar-bg: #ffffff;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
}
[data-theme="dark"] {
  --bg: #0f172a;
  --bg2: #1e293b;
  --surface: #1e293b;
  --surface2: #0f172a;
  --border: #334155;
  --border2: #475569;
  --text: #f1f5f9;
  --text2: #cbd5e1;
  --text3: #94a3b8;
  --text4: #64748b;
  --sidebar-bg: #0f172a;
  --sidebar-text:#cbd5e1;
  --sidebar-muted:#475569;
  --sidebar-hover:#1e293b;
  --sidebar-active:#3b82f6;
  --topbar-bg: #1e293b;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --blue-light: #1e3a5f;
  --green-light: #14532d;
  --orange-light:#431407;
  --red-light: #450a0a;
  --yellow-light:#422006;
}
/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  transition: background 0.2s, color 0.2s;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; }
/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
.layout { display: none; min-height: 100vh; }
.layout.app-authenticated { display: flex; }
/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sidebar {
  width: 248px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  transition: background 0.2s;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-icon {
  width: 34px; height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.logo-text { font-size: 16px; font-weight: 700; color: #f1f5f9; letter-spacing: -0.2px; }
.logo-sub { font-size: 10px; color: var(--sidebar-muted); margin-top: 1px; }
.sidebar-nav { padding: 12px 10px; flex: 1; }
.nav-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sidebar-muted);
  padding: 14px 10px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sidebar-text);
  transition: all 0.15s;
  margin-bottom: 1px;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--sidebar-hover); color: #f1f5f9; }
.nav-item.active {
  background: rgba(59,130,246,0.15);
  color: #93c5fd;
}
.nav-item .nav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-badge {
  margin-left: auto;
  background: rgba(255,255,255,0.1);
  color: var(--sidebar-text);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}
.nav-badge.alert { background: rgba(220,38,38,0.3); color: #fca5a5; }
.sidebar-footer {
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
}
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white;
  flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.user-role { font-size: 11px; color: var(--sidebar-muted); }
/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
.main { margin-left: 248px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0; z-index: 50;
  transition: background 0.2s, border-color 0.2s;
  box-shadow: var(--shadow);
}
.topbar-left { display: flex; align-items: center; gap: 8px; }
.breadcrumb { font-size: 13px; color: var(--text3); }
.breadcrumb span { color: var(--text); font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  transition: all 0.15s;
}
.search-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.search-box input {
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  width: 200px;
}
.search-box input::placeholder { color: var(--text4); }
.search-box .si { color: var(--text4); font-size: 14px; }
/* Theme toggle */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all 0.15s;
  color: var(--text2);
}
.theme-toggle:hover { background: var(--bg2); border-color: var(--border2); }
.notif-btn {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  transition: all 0.15s;
  color: var(--text2);
}
.notif-btn:hover { background: var(--bg2); transform: scale(1.04); }
.notif-dot {
  min-width: 24px; height: 24px;
  padding: 0 6px;
  background: var(--red);
  border-radius: 999px;
  position: absolute;
  top: -8px; right: -8px;
  border: 3px solid var(--topbar-bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(239,68,68,0.45);
  animation: notif-pulse 1.6s ease-in-out infinite;
}
.notif-dot::after {
  content: attr(data-count);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
@keyframes notif-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1;
}
.btn-primary {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-secondary {
  background: var(--surface);
  color: var(--text2);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg2); border-color: var(--border2); color: var(--text); }
.btn-danger {
  background: var(--red-light);
  color: var(--red);
  border-color: transparent;
}
.btn-danger:hover { background: #fee2e2; }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px; }
.btn-icon { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 7px; }
/* ══════════════════════════════════════════
   PAGES
══════════════════════════════════════════ */
.page { display: none; padding: 28px; animation: pageIn 0.2s ease; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
.page-header p { font-size: 13px; color: var(--text3); margin-top: 3px; }
.page-hrow { display: flex; justify-content: space-between; align-items: flex-end; }
/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: background 0.2s, border-color 0.2s;
  box-shadow: var(--shadow);
}
.card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-head .card-title { margin-bottom: 0; }
.card-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
/* ══════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════ */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: all 0.15s;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.stat-icon-wrap {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.stat-icon-wrap.blue { background: var(--blue-light); }
.stat-icon-wrap.green { background: var(--green-light); }
.stat-icon-wrap.orange { background: var(--orange-light); }
.stat-icon-wrap.red { background: var(--red-light); }
.stat-value { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; line-height: 1; }
.stat-label { font-size: 12px; color: var(--text3); font-weight: 500; margin-top: 4px; }
.stat-change { font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 4px; font-weight: 500; }
.stat-change.up { color: var(--green); }
.stat-change.dn { color: var(--red); }
/* ══════════════════════════════════════════
   GRIDS
══════════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-6040 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.grid-main { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
.table-wrap { overflow-x: auto; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }
thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  background: var(--surface2);
}
thead th:first-child { border-radius: 8px 0 0 0; }
thead th:last-child { border-radius: 0 8px 0 0; }
tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.1s; }
tbody tr:hover td { background: var(--bg2); }
td.mono { font-family: 'Courier New', monospace; font-size: 12px; color: var(--text3); }
/* ══════════════════════════════════════════
   BADGES
══════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-blue { background: var(--blue-light); color: var(--blue); }
.badge-green { background: var(--green-light); color: var(--green); }
.badge-orange { background: var(--orange-light); color: var(--orange); }
.badge-red { background: var(--red-light); color: var(--red); }
.badge-yellow { background: var(--yellow-light); color: var(--yellow); }
.badge-purple { background: #f5f3ff; color: #6d28d9; }
.badge-gray { background: var(--bg2); color: var(--text3); border: 1px solid var(--border); }
/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.input-error { border-color: var(--red) !important; background: var(--red-light) !important; }
.field-error-msg { display:none; font-size: 11.5px; color: var(--red); margin-top: -2px; font-weight: 500; }

/* Feedback response cards (client view) */
.fb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.fb-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fb-card-date { font-size: 11.5px; color: var(--text4); margin-left: auto; }
.fb-card-subject { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.fb-card-message { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 10px; white-space: pre-wrap; }
.fb-card-stars { color: var(--orange); font-size: 14px; margin-bottom: 10px; }
.fb-card-meta { font-size: 11.5px; color: var(--text4); margin-bottom: 12px; }
.fb-response-block {
  background: var(--blue-light);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 4px;
}
.fb-response-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--blue); margin-bottom: 6px; display:flex; align-items:center; gap:6px; }
.fb-response-text { font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap; }
.fb-response-date { font-size: 10.5px; color: var(--text4); margin-top: 8px; }
.fb-awaiting {
  background: var(--bg2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text4);
  text-align: center;
}
.fb-card-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
label { font-size: 12px; font-weight: 600; color: var(--text2); }
input, select, textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
input::placeholder { color: var(--text4); }
select option { background: var(--surface); color: var(--text); }
textarea { resize: vertical; min-height: 90px; }
input:disabled, select:disabled, textarea:disabled { background: var(--bg2); color: var(--text3); cursor: not-allowed; opacity: 0.75; }
/* search input inside table area */
.table-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.table-search input { border: none; background: none; box-shadow: none; padding: 0; width: 220px; font-size: 13px; }
.table-search input:focus { box-shadow: none; border: none; }
/* ══════════════════════════════════════════
   FILTER CHIPS
══════════════════════════════════════════ */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.active { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }
/* ══════════════════════════════════════════
   BAR CHART
══════════════════════════════════════════ */
.bar-chart-wrap { padding: 8px 0 0; }
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bar-fill {
  width: 100%;
  background: var(--blue-light);
  border-radius: 5px 5px 0 0;
  transition: background 0.15s;
  cursor: pointer;
  min-height: 5px;
  position: relative;
}
[data-theme="dark"] .bar-fill { background: rgba(59,130,246,0.25); }
.bar-fill:hover,
.bar-fill.cur { background: var(--blue); }
[data-theme="dark"] .bar-fill.cur { background: var(--blue); }
.bar-lbl { font-size: 11px; color: var(--text3); font-weight: 500; }
/* ══════════════════════════════════════════
   DONUT CHART
══════════════════════════════════════════ */
.donut-row { display: flex; align-items: center; gap: 28px; justify-content: center; padding: 8px 0; }
.donut-wrap { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.donut-wrap svg { transform: rotate(-90deg); }
.donut-center { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.donut-num { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1; }
.donut-lbl { font-size: 11px; color: var(--text3); margin-top: 2px; }
.legend { display: flex; flex-direction: column; gap: 10px; }
.leg-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
.leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
/* ══════════════════════════════════════════
   STOCK BAR
══════════════════════════════════════════ */
.stock-item { margin-bottom: 14px; }
.stock-item:last-child { margin-bottom: 0; }
.stock-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.stock-name { color: var(--text2); font-weight: 500; }
.stock-qty { font-weight: 600; font-size: 12px; }
.stock-track { height: 6px; background: var(--bg2); border-radius: 10px; overflow: hidden; }
.stock-fill { height: 100%; border-radius: 10px; transition: width 0.5s ease; }
/* ══════════════════════════════════════════
   ACTIVITY
══════════════════════════════════════════ */
.activity-list { display: flex; flex-direction: column; }
.act-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.act-item:last-child { border-bottom: none; padding-bottom: 0; }
.act-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.act-text { font-size: 13px; color: var(--text2); line-height: 1.5; }
.act-time { font-size: 11px; color: var(--text4); margin-top: 2px; }
/* ══════════════════════════════════════════
   SUPPLIER CARDS
══════════════════════════════════════════ */
/* Scalable table action cells: keep the table layout intact and let buttons wrap. */
td.action-cell {
  white-space: normal;
  vertical-align: middle;
  min-width: 118px;
}
td.action-cell > button,
td.action-cell .btn {
  margin: 2px 3px 2px 0;
  white-space: nowrap;
}

/* Supplier selection is click-only. Hover is never treated as selection. */
.sup-card {
  border: 2px solid transparent;
  box-sizing: border-box;
}
.sup-card.selected {
  border-color: var(--blue);
  background: var(--blue-light);
}
.sup-card.selected:hover {
  border-color: var(--blue);
}
.sup-avatar.selected {
  background: var(--blue);
  color: #fff;
}
.sup-card-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 700px) {
  .sup-card-actions .btn {
    flex: 1 1 auto;
  }
  td.action-cell {
    min-width: 100px;
  }
}

.sup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: box-shadow 0.15s, transform 0.15s;
  box-shadow: var(--shadow);
}
.sup-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sup-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sup-avatar {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--blue-light);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.sup-avatar img, .avatar-upload-preview img, .client-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.avatar-upload-preview {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--border);
}
.client-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--orange-light);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.sup-name { font-size: 14px; font-weight: 700; color: var(--text); }
.sup-type { font-size: 11px; color: var(--text3); margin-top: 2px; }
.sup-detail { font-size: 12.5px; color: var(--text3); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
/* ══════════════════════════════════════════
   QUOTE BUILDER
══════════════════════════════════════════ */
.qi-head-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 80px 120px 120px 36px;
  gap: 8px;
  padding: 8px 4px;
  margin-bottom: 6px;
}
.qi-head-row span {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text3);
}
.qi-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 80px 120px 120px 36px;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  animation: rowSlide 0.2s ease;
}
@keyframes rowSlide { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
.qi-row:last-child { border-bottom: none; }
.qi-row input, .qi-row select { padding: 8px 10px; font-size: 13px; }
.qi-supplier-label {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text3);
  background: var(--bg2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lt-val { font-size: 13.5px; font-weight: 600; color: var(--text); }
.del-row {
  width: 32px; height: 32px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: all 0.15s;
}
.del-row:hover { background: var(--red-light); border-color: transparent; color: var(--red); }
/* Quote summary panel */
.summary-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  position: sticky;
  top: 70px;
  box-shadow: var(--shadow);
}
.sum-title { font-size: 14px; font-weight: 700; color: var(--text); padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.sum-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; }
.sum-key { color: var(--text3); }
.sum-val { font-weight: 600; color: var(--text); }
.sum-divider { height: 1px; background: var(--border); margin: 8px 0; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--border2); }
.sum-total-key { font-size: 14px; font-weight: 700; color: var(--text); }
.sum-total-val { font-size: 24px; font-weight: 700; color: var(--blue); }
.sum-input { margin: 10px 0; }
.sum-input label { display: block; margin-bottom: 5px; }
/* ══════════════════════════════════════════
   PRINT DOCUMENT
══════════════════════════════════════════ */
.print-wrap { max-width: 800px; margin: 0 auto; }
.print-doc {
  background: white;
  color: #111;
  padding: 48px 52px;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: var(--shadow-md);
}
.pdoc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.pdoc-brand { font-size: 20px; font-weight: 800; color: #1e293b; }
.pdoc-brand-sub { font-size: 11px; color: #64748b; margin-top: 5px; line-height: 1.7; }
.pdoc-title-block { text-align: right; }
.pdoc-title { font-size: 32px; font-weight: 800; color: #1e3a8a; letter-spacing: -1px; }
.pdoc-num { font-size: 13px; color: #475569; margin-top: 4px; }
.pdoc-dates { font-size: 12px; color: #64748b; margin-top: 6px; line-height: 1.8; }
.pdoc-rule { height: 3px; background: linear-gradient(90deg, #1e3a8a, #3b82f6, #93c5fd); border-radius: 2px; margin: 24px 0; }
.pdoc-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; font-size: 13px; color: #334155; }
.pdoc-addr-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; margin-bottom: 6px; }
.pdoc-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.pdoc-table thead th { background: #1e293b; color: white; padding: 11px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; text-align: left; }
.pdoc-table tbody td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; font-size: 12.5px; color: #334155; }
.pdoc-table tbody tr:last-child td { border-bottom: none; }
.pdoc-totals { width: 280px; margin-left: auto; margin-top: 16px; }
.pdoc-trow { display: flex; justify-content: space-between; padding: 7px 0; font-size: 12.5px; color: #475569; border-bottom: 1px solid #f1f5f9; }
.pdoc-grand { display: flex; justify-content: space-between; padding: 14px 16px; background: #1e293b; color: white; border-radius: 8px; margin-top: 10px; font-size: 15px; font-weight: 700; }
.pdoc-terms { margin-top: 24px; padding: 16px; background: #f8fafc; border-radius: 8px; font-size: 12px; color: #475569; line-height: 1.8; border: 1px solid #e2e8f0; }
.pdoc-footer { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 16px; border-top: 1px solid #e2e8f0; font-size: 11px; color: #94a3b8; }
.pdoc-signatures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.pdoc-sig-block { text-align: center; }
.pdoc-sig-line {
  min-height: 34px;
  border-bottom: 1px solid #64748b;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 12.5px;
  color: #1e293b;
  font-weight: 600;
  padding-bottom: 4px;
}
.pdoc-sig-role { font-size: 10.5px; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
/* ══════════════════════════════════════════
   KPI CARDS
══════════════════════════════════════════ */
.kpi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 20px; }
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.kpi-val { font-size: 30px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; }
.kpi-label { font-size: 12px; color: var(--text3); font-weight: 500; margin-top: 4px; }
.kpi-sub { font-size: 12px; color: var(--text4); margin-top: 8px; }
.kpi-progress { height: 4px; background: var(--bg2); border-radius: 10px; margin-top: 12px; overflow: hidden; }
.kpi-fill { height: 100%; border-radius: 10px; }
/* ══════════════════════════════════════════
   MODAL
══════════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  width: 560px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  animation: modalIn 0.2s ease;
}
@keyframes modalIn { from { opacity:0; transform:scale(0.96) translateY(-12px); } to { opacity:1; transform:scale(1) translateY(0); } }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 16px; font-weight: 700; color: var(--text); }
.modal-close { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text3); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.modal-close:hover { background: var(--bg2); color: var(--text); }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ══════════════════════════════════════════
   ABOUT US MODAL (login page)
══════════════════════════════════════════ */
.about-us-modal { width: 720px; }
.about-us-intro {
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 18px;
}
.about-us-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) { .about-us-grid { grid-template-columns: 1fr; } }
.about-us-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.about-us-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.about-us-card p { font-size: 12.5px; color: var(--text2); line-height: 1.65; }
.about-us-mission-list { display: flex; flex-direction: column; gap: 10px; }
.about-us-mission-list div { font-size: 12.5px; color: var(--text2); line-height: 1.65; }
.about-us-mission-list strong { color: var(--text); }
.about-us-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) { .about-us-services-grid { grid-template-columns: 1fr; } }
.about-us-services-grid strong { font-size: 12.5px; color: var(--text); }
.about-us-services-grid ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--text2); line-height: 1.8; }
.about-us-customers { font-size: 12px; color: var(--text3); line-height: 2; }
.about-us-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.about-us-footer-quote {
  font-style: italic;
  font-size: 13px;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 10px;
}
.about-us-footer-contact { font-size: 11.5px; color: var(--text4); line-height: 1.8; }
.about-us-footer-contact a { color: var(--blue); text-decoration: none; }
.about-us-footer-contact a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   ABOUT US — full in-app page polish
══════════════════════════════════════════ */
.about-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 28px;
  border-radius: 16px;
  background: linear-gradient(120deg, #0B1526 0%, #0E1E33 100%);
  color: #f1f5f9;
}
.about-hero-logo { width: 68px; height: 68px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 14px rgba(201,122,61,0.3)); }
.about-hero-eyebrow {
  font-family: 'Space Grotesk', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-bright, #E8A659);
  margin-bottom: 6px;
}
.about-hero-title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: #f8fafc;
}
.about-hero-sub { font-size: 12.5px; color: #94a3b8; line-height: 1.7; max-width: 640px; }
@media (max-width: 700px) {
  .about-hero { flex-direction: column; align-items: flex-start; }
}

.about-us-card.accent-copper { border-left: 3px solid var(--copper, #C97A3D); }
.about-us-card.accent-blue   { border-left: 3px solid var(--blue); }
.about-us-card.accent-green  { border-left: 3px solid var(--green); }
.about-us-card { transition: box-shadow 0.15s, transform 0.15s; }
.about-us-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

.about-customers-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.about-customer-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(37,99,235,0.15);
}

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.toast-stack { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--text);
  min-width: 280px;
  box-shadow: var(--shadow-md);
  animation: toastIn 0.25s ease;
}
@keyframes toastIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
.toast.success { border-left: 3px solid var(--green); }
.toast.warning { border-left: 3px solid var(--orange); }
.toast.error { border-left: 3px solid var(--red); }
.toast-icon { font-size: 16px; }
/* ══════════════════════════════════════════
   DIVIDER / UTILITY
══════════════════════════════════════════ */
.mb16 { margin-bottom: 16px; }
.mb20 { margin-bottom: 20px; }
.mt20 { margin-top: 20px; }
.flex-row { display: flex; align-items: center; gap: 10px; }
.flex-row.between { justify-content: space-between; }
/* ══════════════════════════════════════════
   PRINT MEDIA
══════════════════════════════════════════ */
@media print {
  .sidebar, .main > .topbar, .no-print { display: none !important; }
  .main { margin-left: 0; }
  .page.active { padding: 0; }
  .print-doc { box-shadow: none; border-radius: 0; padding: 32px; }
}
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .grid-6040 { grid-template-columns: 1fr; }
  .grid-main { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════
   FLOATING ORDER BUTTON
══════════════════════════════════════════ */
.fab-order {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 500;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--blue);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 20px rgba(37,99,235,0.45);
  transition: all 0.2s;
}
.fab-order:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(37,99,235,0.55);
}
.fab-order .fab-tooltip {
  position: absolute;
  right: 66px;
  background: var(--text);
  color: var(--surface);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.fab-order:hover .fab-tooltip { opacity: 1; }

/* ══════════════════════════════════════════
   CATALOG TYPEAHEAD (live search suggestions)
══════════════════════════════════════════ */
.catalog-typeahead {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 240px;
  overflow-y: auto;
}
.catalog-typeahead-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.catalog-typeahead-item:last-child { border-bottom: none; }
.catalog-typeahead-item:hover { background: var(--blue-light); }
.catalog-typeahead-item .cti-name { font-weight: 600; color: var(--text); }
.catalog-typeahead-item .cti-meta { font-size: 10.5px; color: var(--text4); flex-shrink: 0; }

/* ══════════════════════════════════════════
   CLIENT CONTACT BOX (sidebar footer)
══════════════════════════════════════════ */
.client-contact-box {
  margin: 0 12px 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--blue-light);
  border: 1px solid rgba(37,99,235,0.25);
}
.client-contact-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.client-contact-body {
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.7;
}
.client-contact-body a { color: var(--blue); text-decoration: none; font-weight: 600; }
.client-contact-body a:hover { text-decoration: underline; }
.prod-request-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px 20px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--blue-light), var(--surface));
  border: 1.5px solid var(--blue);
  box-shadow: 0 3px 14px rgba(37,99,235,0.16);
  animation: prod-notice-in 0.4s ease;
}
.prod-request-notice-icon {
  font-size: 26px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
.prod-request-notice-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}
.prod-request-notice-text strong { color: var(--text); font-size: 14.5px; }
.prod-request-notice .btn { flex-shrink: 0; white-space: nowrap; font-weight: 700; box-shadow: 0 2px 10px rgba(37,99,235,0.35); }
@keyframes prod-notice-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  .prod-request-notice { flex-wrap: wrap; }
  .prod-request-notice .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════
   ORDER FORM MODAL (wider)
══════════════════════════════════════════ */
#orderModal .modal { width: 680px; }
.order-form-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
  margin: 20px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.order-form-section:first-of-type { margin-top: 0; }
.file-upload-area {
  border: 2px dashed var(--border2);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.file-upload-area:hover,
.file-upload-area.drag-over {
  border-color: var(--blue);
  background: var(--blue-light);
}
.file-upload-area input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  box-shadow: none;
}
.file-upload-area input[type="file"]:focus { box-shadow: none; border: none; }
.file-upload-icon { font-size: 28px; margin-bottom: 6px; }
.file-upload-text { font-size: 13px; color: var(--text3); }
.file-upload-text strong { color: var(--blue); }
.file-preview { margin-top: 8px; font-size: 12px; color: var(--green); font-weight: 600; }

/* ══════════════════════════════════════════
   PURCHASE ORDER STATUS BADGE EXTRAS
══════════════════════════════════════════ */
.badge-yellow { background: var(--yellow-light); color: var(--yellow); }

/* ══════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════ */
.login-page {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.login-page.lp-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.lp-hero {
  min-height: 100vh;
  display: flex;
}

/* LEFT: Brand Panel — grounded in the actual work: PCB & test-socket
   repair (gold-finger rework, pad re-plating, circuit-trace repair).
   Traces + via-dots replace the generic blurred gradient blobs. */
.lp-brand {
  width: 45%;
  background: linear-gradient(160deg, #0B1526 0%, #0E1E33 55%, #0B1526 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 56px 48px;
  flex-shrink: 0;
}

.lp-brand-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lp-deco-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Circuit traces: right-angle copper-and-blue lines with via-pads at the
   junctions — a couple of vias "ping" on a slow loop, like a continuity
   test running across the board. This is literally what a test socket
   does, so it's not decoration for its own sake. */
.lp-trace-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-trace-line {
  fill: none;
  stroke: rgba(96,165,250,0.28);
  stroke-width: 1.5;
}
.lp-trace-line.copper { stroke: rgba(201,122,61,0.32); }
.lp-via {
  fill: #0E1E33;
  stroke: rgba(148,197,255,0.4);
  stroke-width: 1.5;
}
.lp-via.pulse {
  animation: lp-via-ping 4.5s ease-in-out infinite;
  transform-origin: center;
}
.lp-via.pulse.d2 { animation-delay: 1.4s; }
.lp-via.pulse.d3 { animation-delay: 2.8s; }
@keyframes lp-via-ping {
  0%, 100% { fill: #0E1E33; stroke: rgba(148,197,255,0.4); }
  35% { fill: var(--copper-bright); stroke: var(--copper-bright); filter: drop-shadow(0 0 6px rgba(232,166,89,0.9)); }
  70% { fill: #0E1E33; stroke: rgba(148,197,255,0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-via.pulse { animation: none; }
}

@keyframes lp-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-24px) scale(1.03); }
}

.lp-brand-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.lp-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 56px;
}

.lp-logo-icon {
  width: 54px; height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(201,122,61,0.3));
}

.lp-logo-name {
  color: #f1f5f9;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lp-logo-sub {
  color: #64748b;
  font-size: 11px;
  margin-top: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Space Grotesk', monospace;
}

.lp-tagline-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-bright);
  margin-bottom: 16px;
}
.lp-tagline-eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--copper-bright);
}
.lp-tagline h2 {
  color: #f1f5f9;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.22;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.lp-tagline p {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 44px;
  max-width: 380px;
}

.lp-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #cbd5e1;
  font-size: 13.5px;
}
.lp-feat-icon {
  font-size: 16px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-trust-line {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11.5px;
  color: #64748b;
  letter-spacing: 0.01em;
}
.lp-about-link {
  margin-top: 14px;
  background: none;
  border: 1px solid rgba(255,255,255,0.16);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.lp-about-link:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.3);
}
.lp-about-link-mobile {
  display: none; /* shown only on mobile — see the 800px media query below */
  margin: 0 0 24px;
  border-color: var(--border);
  color: var(--text3);
}
.lp-about-link-mobile:hover {
  background: var(--bg2);
  border-color: var(--text4);
}

/* ══════════════════════════════════════════
   ABOUT US — real landing-page section (not a modal), reached by
   scrolling or via the "About Netsworks Solucion" link/button above.
══════════════════════════════════════════ */
.lp-about-section {
  background: var(--bg2, #f8fafc);
  padding: 64px 24px 56px;
}
.lp-about-inner {
  max-width: 860px;
  margin: 0 auto;
}
.lp-about-heading { text-align: center; margin-bottom: 32px; }
.lp-about-eyebrow {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 10px;
}
.lp-about-heading h2 {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.lp-about-heading .about-us-intro {
  max-width: 620px;
  margin: 0 auto;
  color: #475569;
  font-size: 13.5px;
  line-height: 1.7;
}

/* RIGHT: Form Panel */
.lp-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  background: #f8fafc;
  overflow-y: auto;
}

.lp-form-wrap {
  width: 100%;
  max-width: 400px;
}

.lp-mobile-logo {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}
.lp-logo-icon-sm {
  width: 38px; height: 38px;
  object-fit: contain;
}
.lp-mobile-logo span {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}

.lp-title {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.lp-subtitle {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 32px;
  line-height: 1.5;
}

.lp-field {
  margin-bottom: 18px;
}
.lp-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 7px;
}
.lp-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  background: #fff;
  color: #0f172a;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.lp-field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.lp-field input::placeholder { color: #94a3b8; }

.lp-pw-wrap {
  position: relative;
}
.lp-pw-wrap input {
  padding-right: 44px;
}
.lp-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #94a3b8;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.lp-pw-toggle:hover { color: #475569; }

.lp-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  color: #dc2626;
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-submit {
  width: 100%;
  padding: 13px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  margin-top: 4px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(37,99,235,0.28);
  letter-spacing: 0.01em;
}
.lp-submit:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 20px rgba(37,99,235,0.4);
}
.lp-submit:active { transform: scale(0.99); }

.lp-switch-view {
  text-align: center;
  font-size: 13px;
  color: #64748b;
  margin-top: -14px;
  margin-bottom: 24px;
}
.lp-switch-view a {
  color: #2563eb;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.lp-switch-view a:hover { text-decoration: underline; }

.lp-signup-note {
  margin-top: 18px;
  padding: 11px 14px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  font-size: 12px;
  color: #1d4ed8;
  line-height: 1.6;
}

/* Demo Accounts */
.lp-demo-accounts {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.lp-demo-title {
  padding: 10px 14px;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid #e2e8f0;
}
.lp-demo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.12s;
}
.lp-demo-item:last-child { border-bottom: none; }
.lp-demo-item:hover { background: #f8fafc; }

.lp-demo-badge {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.lp-demo-badge.admin      { background: #eff6ff; color: #1d4ed8; }
.lp-demo-badge.client     { background: #f0fdf4; color: #15803d; }
.lp-demo-badge.customer   { background: #fff7ed; color: #c2410c; }
.lp-demo-badge.purchasing { background: #f5f3ff; color: #6d28d9; }
.lp-demo-badge.accounting { background: #ecfdf5; color: #065f46; }

.lp-demo-info { min-width: 0; }
.lp-demo-cred {
  font-size: 12.5px;
  font-family: 'Courier New', monospace;
  color: #334155;
  font-weight: 600;
}
.lp-demo-desc {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 1px;
}

/* Shake animation */
@keyframes lp-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.lp-shake { animation: lp-shake 0.45s ease; }

/* Sidebar logout button */
.logout-nav-btn {
  width: 100%;
  margin-top: 6px;
  color: #f87171 !important;
  opacity: 0.85;
}
.logout-nav-btn:hover { opacity: 1; background: rgba(220,38,38,0.12) !important; }

/* Role access denied overlay */
.role-blocked-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  gap: 12px;
  color: var(--text4);
}
.role-blocked-msg .rbm-icon { font-size: 48px; }
.role-blocked-msg h3 { font-size: 18px; color: var(--text2); }
.role-blocked-msg p { font-size: 13px; }

/* Responsive */
@media (max-width: 800px) {
  .lp-brand { display: none; }
  .lp-form-panel { background: #fff; padding: 32px 24px; }
  .lp-mobile-logo { display: flex; }
  .lp-about-link-mobile { display: inline-block; }
}
/* ══════════════════════════════════════════
   CLIENT DETAIL PANEL TABS
══════════════════════════════════════════ */
.client-tab {
  padding: 8px 20px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}
.client-tab:hover { color: var(--text); }
.client-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* Client name link style */
.btn-link-style {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s;
}
.btn-link-style:hover { opacity: 0.75; }

/* ══════════════════════════════════════════
   CASHFLOW GRAND TOTAL BANNER
══════════════════════════════════════════ */
.cashflow-banner {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cf-block {
  padding: 22px 24px;
  text-align: center;
}
.cf-block.cf-result {
  background: var(--bg2);
}
.cf-separator {
  font-size: 24px;
  font-weight: 300;
  color: var(--text4);
  padding: 0 4px;
  text-align: center;
}
.cf-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.cf-val {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 4px;
}
.cf-val.blue   { color: var(--blue); }
.cf-val.red    { color: var(--red); }
.cf-val.orange { color: var(--orange); }
.cf-val.profit { color: var(--green); }
.cf-val.loss   { color: var(--red); }
.cf-sub {
  font-size: 11px;
  color: var(--text4);
}

/* ── Report Tabs ── */
.report-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.report-tab {
  padding: 10px 22px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
  transition: all 0.15s;
}
.report-tab:hover { color: var(--text); }
.report-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* ── Mini stat boxes ── */
.mini-stat-box {
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.mini-stat-box.blue   { background: var(--blue-light);   border-color: #bfdbfe; }
.mini-stat-box.red    { background: var(--red-light);    border-color: #fecaca; }
.mini-stat-box.green  { background: var(--green-light);  border-color: #bbf7d0; }
.mini-stat-box.orange { background: var(--orange-light); border-color: #fed7aa; }
.mini-stat-box.purple { background: #f5f3ff; border-color: #ddd6fe; }
.mini-stat-label { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.mini-stat-val   { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.2; }
.mini-stat-sub   { font-size: 11px; color: var(--text4); margin-top: 2px; }

/* ── Responsive cashflow banner ── */
@media (max-width: 900px) {
  .cashflow-banner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .cf-separator { display: none; }
  .cf-block { border-bottom: 1px solid var(--border); }
  .cf-block:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════
   ORDER FORM — multi-item rows & photo grid
══════════════════════════════════════════ */
#oItemRows input, #oItemRows textarea {
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#oItemRows input:focus, #oItemRows textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
#oPhotoPreviewGrid { flex-wrap: wrap; }
#oPhotoPreviewGrid div { transition: transform 0.15s; }
#oPhotoPreviewGrid div:hover { transform: scale(1.04); }

/* Photo modal */
#photoModalBody img { transition: transform 0.15s; cursor: zoom-in; }
#photoModalBody img:hover { transform: scale(1.02); }

/* ══════════════════════════════════════════
   ROW HIGHLIGHT — used when jumping between a
   Quotation and its linked Purchase Order
══════════════════════════════════════════ */
@keyframes rowFlash {
  0%   { background-color: rgba(37,99,235,0.18); }
  100% { background-color: transparent; }
}
tr.row-flash {
  animation: rowFlash 1.6s ease-out;
}

/* Responsive action cells: buttons wrap inside the table cell instead of
   forcing the entire table wider or breaking the row layout. */
td.action-cell {
  white-space:normal !important;
  vertical-align:middle;
  width:1%;
  min-width:96px;
}
td.action-cell > button, td.action-cell .btn {
  display:inline-flex !important;
  margin:2px !important;
  vertical-align:middle;
}
.sup-card-actions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.dashboard-link-card { cursor:pointer; }
.dashboard-link-card:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* ══════════════════════════════════════════
   DASHBOARD STAT LINKS + COMPANY PRINT LOGO
══════════════════════════════════════════ */
.dashboard-link-card { cursor: pointer; }
.dashboard-link-card:hover { transform: translateY(-1px); }
.pdoc-logo {
  width: 68px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: 4px;
}

/* ══════════════════════════════════════════
   SUPPLIER PURCHASE ORDER — COMPANY PAPER FORMAT
   Based on the supplied Purchase Order sample:
   header/control no., supplier details, PO details,
   payment/shipping details, order details, VAT totals,
   four approval lines and supplier conformity note.
══════════════════════════════════════════ */
.supplier-po-print-doc {
  padding: 18px 0 22px;
  border-radius: 0;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
  font-size: 10px;
}
.sp-paper-header {
  display: grid;
  grid-template-columns: 1fr 245px;
  border-bottom: 1px solid #111;
  min-height: 66px;
}
.sp-company-block {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 2px 8px 5px 0;
}
.sp-logo { width: 78px; height: 62px; margin: 0; flex: 0 0 78px; }
.sp-company-text { padding-top: 6px; }
.sp-company-name { font-size: 13px; font-weight: 800; text-transform: uppercase; }
.sp-company-address { font-size: 8.5px; line-height: 1.45; margin-top: 4px; color: #222; }
.sp-control-block { border-left: 1px solid #111; font-size: 9px; }
.sp-control-block > div {
  display: grid;
  grid-template-columns: 112px 1fr;
  min-height: 22px;
  border-bottom: 1px solid #b8b8b8;
  align-items: center;
}
.sp-control-block > div:last-child { border-bottom: 0; }
.sp-control-block strong {
  padding: 3px 6px;
  color: #b91c1c;
  font-size: 9px;
}
.sp-control-block span { padding: 3px 6px; font-weight: 700; }
.sp-po-title {
  text-align: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  padding: 12px 0 9px;
  border-bottom: 1px solid #111;
}
.sp-section-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #111; }
.sp-second-grid { margin-top: 0; }
.sp-section { min-width: 0; border-right: 1px solid #111; }
.sp-section:last-child { border-right: 0; }
.sp-section-title, .sp-order-title {
  background: #dedede;
  border-bottom: 1px solid #111;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: left;
  padding: 4px 5px;
}
.sp-order-title { margin-top: 0; text-align: center; border: 1px solid #111; border-bottom: 0; }
.sp-field-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  min-height: 19px;
  border-bottom: 1px solid #d0d0d0;
  line-height: 1.35;
}
.sp-field-row:last-child { border-bottom: 0; }
.sp-field-row strong {
  padding: 3px 5px;
  font-size: 8.5px;
  border-right: 1px dotted #aaa;
}
.sp-field-row > span { padding: 3px 5px; overflow-wrap: anywhere; }
.sp-address-row > span { min-height: 27px; }
.sp-product-table-frame { width:100%; border:1px solid #111; border-bottom:1px solid #111; overflow:visible; break-inside:avoid; page-break-inside:avoid; }
.sp-product-table, .sp-price-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #111; background:#fff; }
.sp-product-table th, .sp-price-table th {
  background: #dedede;
  color: #111 !important;
  border: 1px solid #111;
  padding: 5px 5px;
  font-size: 8.5px;
  text-align: center;
  text-transform: uppercase;
}
.sp-product-table td, .sp-price-table td {
  background:#fff;
  color:#111 !important;
  border: 1px solid #aaa;
  padding: 5px 6px;
  font-size: 9.5px;
  vertical-align: top;
  min-height: 20px;
}
.sp-product-table tbody tr:last-child td, .sp-price-table tbody tr:last-child td { height: 22px; border-bottom:1px solid #111; }
.sp-price-area { display:flex; justify-content:flex-end; margin-top:8px; }
.sp-price-table { width: 58%; min-width: 360px; }
.sp-price-table td:nth-child(2), .sp-price-table td:nth-child(3) { text-align:right; }
.sp-price-table tfoot td { font-weight:600; border-top:1px solid #777; }
.sp-price-table tfoot .sp-price-grand td { font-weight:800; font-size:10.5px; border-top:1px solid #111; }
.sp-price-table tfoot td:last-child { text-align:right; }
.sp-order-table { display:none; }
.sp-totals, .sp-total-row, .sp-grand-row { display:none; }
.sp-signature-grid { margin-top: 42px; border-top: 1px solid #111; border-bottom: 1px solid #111; }
.sp-sign-row {
  display: grid;
  grid-template-columns: 92px 1fr 150px;
  min-height: 31px;
  align-items: end;
  border-bottom: 1px solid #777;
}
.sp-sign-row:last-child { border-bottom: 0; }
.sp-sign-row strong { padding: 8px 5px 4px; font-size: 8.5px; }
.sp-sign-row > span:first-of-type { min-height: 24px; border-bottom: 1px solid #555; padding: 4px 6px; font-size: 9.5px; }
.sp-sign-row em { font-style: normal; padding: 8px 6px 4px; font-size: 8.5px; }
.sp-conforme { margin-top: 8px; border-top: 1px solid #111; border-bottom: 1px solid #111; padding: 6px 4px; font-size: 9px; font-weight: 700; }
.sp-conforme span { display: inline-block; width: 250px; border-bottom: 1px solid #555; margin-left: 8px; min-height: 13px; vertical-align: bottom; }
.sp-footer-note { font-size: 8px; color: #a00; font-weight: 600; margin-top: 5px; }

@media (max-width: 760px) {
  .sp-paper-header { grid-template-columns: 1fr; }
  .sp-control-block { border-left: 0; border-top: 1px solid #111; }
  .sp-section-grid { grid-template-columns: 1fr; }
  .sp-section { border-right: 0; border-bottom: 1px solid #111; }
  .sp-section:last-child { border-bottom: 0; }
  .sp-totals { width: 100%; }
  .sp-sign-row { grid-template-columns: 84px 1fr 105px; }
}

@media print {
  .supplier-po-print-doc { padding: 0; }
  .sp-paper-header { min-height: 62px; }
  .sp-signature-grid { margin-top: 28px; }
}

/* E-signature controls and document signatures */
.signature-settings-box {
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  background:var(--bg2);
}
.signature-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.signature-pad {
  width:100%;
  height:160px;
  display:block;
  background:#fff;
  border:1px dashed #94a3b8;
  border-radius:8px;
  touch-action:none;
  cursor:crosshair;
}
.signature-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; flex-wrap:wrap; }
.pdoc-signature-image-wrap { height:42px; display:flex; align-items:flex-end; margin-bottom:2px; }
.pdoc-signature-image-wrap img { max-width:180px; max-height:42px; object-fit:contain; object-position:left bottom; }
.invoice-signature-image-wrap { height:48px; display:flex; align-items:flex-end; margin-bottom:2px; }
.invoice-signature-image-wrap img { max-width:200px; max-height:48px; object-fit:contain; object-position:left bottom; }
.sp-signature-image { max-width:130px; max-height:32px; object-fit:contain; vertical-align:middle; margin-right:8px; }

/* Delivery Receipt — closely follows the supplied company paper layout. */
.dr-paper { padding:12px 10px 18px; border-radius:0; box-shadow:none; font-family:Arial,Helvetica,sans-serif; color:#111; font-size:10px; }
.dr-paper-header { display:grid; grid-template-columns:1fr 230px; gap:10px; align-items:start; border-bottom:1px solid #222; padding-bottom:7px; }
.dr-company { display:flex; align-items:center; gap:9px; }
.dr-logo { width:64px; height:54px; object-fit:contain; object-position:center; flex:none; }
.dr-company-name { font-size:16px; font-weight:800; letter-spacing:.1px; }
.dr-company-sub { font-size:8.5px; line-height:1.35; margin-top:2px; }
.dr-title-side { text-align:right; }
.dr-title { font-size:18px; font-weight:800; letter-spacing:.4px; }
.dr-number { font-size:13px; font-weight:800; color:#991b1b; margin:3px 0 5px; }
.dr-date-box { border:1px solid #555; padding:5px 8px; text-align:left; margin-left:auto; width:175px; }
.dr-delivered-section { border:1px solid #222; border-top:0; margin-top:0; }
.dr-section-label { font-weight:800; padding:4px 6px; border-bottom:1px solid #222; text-transform:uppercase; }
.dr-info-row { display:grid; grid-template-columns:125px 1fr; min-height:21px; border-bottom:1px solid #777; }
.dr-info-row:last-child { border-bottom:0; }
.dr-info-row strong { padding:4px 6px; text-transform:none; }
.dr-info-row span { padding:4px 6px; border-left:1px solid #777; }
.dr-table { width:100%; border-collapse:collapse; margin-top:8px; }
.dr-table th,.dr-table td { border:1px solid #444; padding:4px 6px; vertical-align:top; }
.dr-table th { text-align:center; font-weight:800; }
.dr-table tbody td { min-height:20px; }
.dr-notes-block { border:1px solid #444; border-top:0; padding:6px 8px; font-size:9.5px; }
.dr-signature-area { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; min-height:80px; align-items:end; }
.dr-tax-note { font-size:9px; font-weight:700; align-self:end; }
.dr-customer-signature { text-align:center; min-height:75px; display:flex; flex-direction:column; justify-content:flex-end; }
.dr-signature-image-wrap { height:38px; display:flex; align-items:flex-end; justify-content:center; }
.dr-signature-image-wrap img { max-width:180px; max-height:38px; object-fit:contain; }
.dr-signature-line { border-bottom:1px solid #222; min-height:16px; padding:0 4px 2px; }
.dr-signature-role { font-size:9px; margin-top:3px; }
.dr-bir-footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #444; margin-top:10px; padding-top:5px; font-size:7.5px; line-height:1.25; }
.dr-generated-footer { font-size:7px; color:#666; margin-top:6px; text-align:right; }
@media print {
  .dr-paper { width:100%; min-height:0; }
  .dr-logo { width:58px; height:48px; }
  .dr-company-name { font-size:14px; }
  .dr-title { font-size:16px; }
}

/* ── Netsworks quotation print layout ── */
.netsworks-quotation-print{font-family:Arial,Helvetica,sans-serif;color:#000;max-width:900px;margin:0 auto;background:#fff;font-size:10px;}
.netsworks-quotation-print *{color:#000 !important;box-sizing:border-box;}
.qv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.qv-company{display:flex;align-items:center;gap:8px;min-width:0;}
.qv-logo{width:58px;height:48px;object-fit:contain;object-position:center;}
.qv-company-name{font-size:15px;font-weight:800;line-height:1.15;}
.qv-company-sub{font-size:7.8px;line-height:1.35;margin-top:2px;}
.qv-page{font-size:7.5px;white-space:nowrap;padding-top:1px;}
.qv-rule{height:1px;background:#000;margin:4px 0 6px;}
.qv-meta-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #000;border-bottom:0;}
.qv-meta-left,.qv-meta-right{padding:2px 4px 3px;}
.qv-meta-right{border-left:1px solid #000;}
.qv-meta-grid>div>div{display:grid;grid-template-columns:94px 1fr;min-height:14px;align-items:end;border-bottom:1px solid #000;}
.qv-meta-grid strong{font-size:7.7px;font-weight:800;}
.qv-meta-grid span{font-size:8px;min-width:0;overflow-wrap:anywhere;}
.qv-thanks{text-align:center;font-weight:700;font-size:8px;padding:5px 4px 5px;}

/* The item table is its own document block. Using separated borders and an
   explicit frame prevents the bottom edge from becoming visually broken when
   the browser paginates the table for printing. */
.qv-main-table-frame{width:100%;border:1px solid #000;overflow:visible;break-inside:auto;page-break-inside:auto;}
.qv-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;margin:0;page-break-inside:auto;break-inside:auto;}
.qv-table thead{display:table-header-group;}
.qv-table tr{page-break-inside:avoid;break-inside:avoid;}
.qv-table th{background:#fff;border-right:1px solid #000;border-bottom:1px solid #000;padding:4px 4px;font-size:7.5px;text-align:left;font-weight:800;}
.qv-table th:not(:first-child){border-left:0;}
.qv-table td{border-right:1px solid #000;border-bottom:1px solid #000;padding:4px 4px;font-size:7.5px;vertical-align:top;min-height:22px;overflow-wrap:anywhere;}
.qv-table th:last-child,.qv-table td:last-child{border-right:0;}
.qv-table tbody tr:last-child td{border-bottom:0;}
.qv-main-table th:nth-child(1){width:42px;text-align:center}.qv-main-table th:nth-child(2){width:auto}.qv-main-table th:nth-child(3){width:27%}.qv-main-table th:nth-child(4){width:92px;text-align:right}.qv-main-table th:nth-child(5){width:105px;text-align:right}
.qv-item-no{text-align:center;vertical-align:middle !important;}
.qv-money{text-align:right;white-space:nowrap;}
.qv-reference-cell{min-width:0;overflow:hidden;vertical-align:top !important;}
.qv-reference-photos{display:flex;flex-wrap:wrap;align-items:flex-start;gap:3px;margin-top:3px;max-width:100%;}
.qv-reference-photos img{display:block !important;width:78px !important;height:58px !important;max-width:78px !important;max-height:58px !important;min-width:78px !important;object-fit:contain !important;object-position:center !important;border:1px solid #000 !important;background:#fff !important;}

/* The totals are a genuinely separate block, aligned to the lower-right. */
.qv-summary-frame{width:48%;margin:7px 0 0 auto;break-inside:avoid;page-break-inside:avoid;}
.qv-summary-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:8px;margin:0;break-inside:avoid;page-break-inside:avoid;border:1px solid #000;}
.qv-summary-table th,.qv-summary-table td{border-right:1px solid #000;border-bottom:1px solid #000;padding:4px 5px;height:19px;}
.qv-summary-table th{border-left:0;text-align:left;font-weight:700;width:auto;}
.qv-summary-table td{text-align:right;width:105px;white-space:nowrap;}
.qv-summary-table th:last-child,.qv-summary-table td:last-child{border-right:0;}
.qv-summary-table tr:last-child th,.qv-summary-table tr:last-child td{border-bottom:0;}
.qv-summary-table .qv-summary-total th,.qv-summary-table .qv-summary-total td{font-size:8.5px;font-weight:800;}
.qv-summary-table .qv-summary-net th,.qv-summary-table .qv-summary-net td{font-size:8.5px;font-weight:800;}
.qv-summary-table .qv-summary-net{border-top:2px solid #000;}
.qv-remarks{border:1px solid #000;margin-top:5px;padding:4px;font-size:7.5px;line-height:1.3;white-space:pre-line;page-break-inside:avoid;break-inside:avoid;}
.qv-remarks strong{display:block;margin-bottom:2px;}
.qv-signatures{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:18px;font-size:7.5px;page-break-inside:avoid;break-inside:avoid;}
.qv-sig-label{font-weight:700;margin-bottom:6px;}
.qv-sign-image,.qv-sig-image{height:26px;display:flex;align-items:flex-end;}
.qv-sign-image img,.qv-sig-image img{max-width:160px;max-height:26px;object-fit:contain;object-position:left bottom;}
.qv-sig-name{border-bottom:1px solid #000;min-height:14px;width:78%;font-weight:700;padding-bottom:1px;}
.qv-signatures>div>div:last-child{font-size:7px;margin-top:2px;}
.qv-footer{text-align:center;font-size:6.5px;margin-top:12px;padding-top:4px;border-top:1px solid #000;}
@media print{
  @page{size:A4 portrait;margin:0;}
  html,body{margin:0 !important;padding:0 !important;background:#fff !important;}
  body{color:#000 !important;}
  .page{display:none !important;}
  .page.active#page-quote-print{display:block !important;padding:0 !important;margin:0 !important;}
  .page.active#page-supplier-po-view{display:block !important;padding:0 !important;margin:0 !important;}
  .page.active#page-quote-print .print-wrap{max-width:none !important;margin:0 !important;padding:0 !important;}
  .page.active#page-supplier-po-view .print-wrap{max-width:none !important;margin:0 !important;padding:0 !important;}
  .netsworks-quotation-print{width:100% !important;max-width:none !important;margin:0 !important;padding:8mm 9mm 7mm !important;box-shadow:none !important;border-radius:0 !important;font-size:9px;}
  .qv-company-name{font-size:14px}.qv-company-sub{font-size:7.5px}.qv-table th,.qv-table td{font-size:7.2px;padding:3px}.qv-summary-table{font-size:7.5px}.qv-summary-table th,.qv-summary-table td{padding:3px}.qv-reference-photos img{width:72px !important;min-width:72px !important;max-width:72px !important;height:54px !important;max-height:54px !important}.qv-signatures{margin-top:16px}
}

.qv-terms-top{border:1px solid #000;padding:5px 6px;margin:5px 0;font-size:7.5px;line-height:1.35;white-space:pre-line;} .qv-terms-top strong{display:block;margin-bottom:2px;} .qv-qty{text-align:center;vertical-align:middle !important;} .qv-main-table th:nth-child(1){width:42px}.qv-main-table th:nth-child(2){width:auto}.qv-main-table th:nth-child(3){width:42px;text-align:center}.qv-main-table th:nth-child(4){width:24%}.qv-main-table th:nth-child(5){width:92px;text-align:right}.qv-main-table th:nth-child(6){width:105px;text-align:right;}


/* ── Quotation reference pictures ───────────────────────────────────── */
.qref-cell { min-width: 0; }
.qref-view-btn { white-space: nowrap; }
.qref-view-btn:disabled { opacity: .5; cursor: not-allowed; }
.qref-thumbs {
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-top:5px;
}
.qref-thumb {
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--border);
  border-radius:5px;
  overflow:hidden;
  background:var(--surface);
  cursor:pointer;
}
.qref-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ── Grouped reference gallery ──────────────────────────────────────── */
.reference-photo-modal {
  width:min(900px, 94vw);
  max-height:90vh;
  overflow-y:auto;
}
.reference-photo-modal-body {
  padding:6px;
}
.reference-photo-group {
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  margin-bottom:12px;
  background:var(--surface);
}
.reference-photo-group:last-child { margin-bottom:0; }
.reference-photo-group-title {
  font-size:13px;
  font-weight:700;
  margin-bottom:9px;
}
.reference-photo-group-title span {
  color:var(--text4);
  font-weight:600;
}
.reference-photo-group-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
  gap:9px;
}
.reference-photo-card {
  border:1px solid var(--border);
  border-radius:8px;
  padding:5px;
  background:var(--bg2);
  cursor:pointer;
  text-align:left;
  color:var(--text2);
}
.reference-photo-card:hover {
  border-color:var(--blue);
  transform:translateY(-1px);
}
.reference-photo-card img {
  width:100%;
  height:130px;
  display:block;
  object-fit:cover;
  border-radius:5px;
}
.reference-photo-card span {
  display:block;
  font-size:10.5px;
  margin:5px 2px 1px;
  text-align:center;
}

/* ── Single reference-picture inspection ───────────────────────────── */
.image-viewer-modal {
  width:min(1200px, 97vw);
  max-width:97vw;
  max-height:96vh;
  overflow:hidden;
  position:relative;
}
#imageViewerModal { z-index:1100; }
.image-viewer-body {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 4px 4px;
}
.image-viewer-stage {
  flex:1;
  min-width:0;
  text-align:center;
}
.image-viewer-stage img {
  max-width:100%;
  max-width:calc(97vw - 120px);
  max-height:82vh;
  object-fit:contain;
  display:block;
  margin:auto;
  border-radius:7px;
  background:#111;
}
.image-viewer-name {
  font-size:11px;
  color:var(--text3);
  margin-top:7px;
  word-break:break-word;
}
.image-viewer-nav {
  width:42px;
  height:58px;
  flex:0 0 42px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text2);
  font-size:32px;
  line-height:1;
  cursor:pointer;
}
.image-viewer-nav:hover { background:var(--bg2); }
.image-viewer-nav:disabled { opacity:.35; cursor:default; }
.image-viewer-counter {
  text-align:center;
  font-size:11px;
  color:var(--text4);
  padding:4px 0 10px;
}

@media (max-width: 900px) {
  .qref-thumbs { display:none; }
  .reference-photo-group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .image-viewer-nav { width:34px; flex-basis:34px; }
}

/* r18 reference-picture improvements */
#stockModal .modal {
  width: min(620px, calc(100vw - 24px)) !important;
  padding: 30px !important;
}
#stockModal .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
#stockModal .form-group { min-width: 0; }
#stockModal label { display:block; line-height:1.25; }
#stockModal input { min-width:0; box-sizing:border-box; }

#imageViewerModal { z-index: 5000 !important; padding: 12px !important; }
#imageViewerModal .image-viewer-modal {
  width: min(1500px, 99vw) !important;
  max-width: 99vw !important;
  height: min(96vh, 1000px) !important;
  max-height: 96vh !important;
  padding: 18px !important;
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
}
#imageViewerModal .image-viewer-body { flex:1; min-height:0; }
#imageViewerModal .image-viewer-stage { height:100%; min-height:0; display:flex; flex-direction:column; justify-content:center; }
#imageViewerModal .image-viewer-stage img {
  width:auto !important;
  height:auto !important;
  max-width:calc(99vw - 180px) !important;
  max-height:calc(90vh - 110px) !important;
  object-fit:contain !important;
  background:#111;
  cursor:zoom-in;
}
.image-viewer-actions { display:flex; justify-content:center; padding-top:8px; }

.qref-link-modal { width:min(980px,95vw) !important; max-height:92vh; }
.reference-link-group { border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:12px; background:var(--surface); }
.reference-link-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.reference-link-sub { font-size:11px; color:var(--text4); margin-top:3px; }
.reference-link-head .badge { margin-left:6px; }
@media (max-width:700px) {
  #stockModal .form-grid { grid-template-columns:1fr; }
  .reference-link-head { align-items:flex-start; flex-direction:column; }
  #imageViewerModal .image-viewer-stage img { max-width:calc(100vw - 110px) !important; max-height:78vh !important; }
}

/* Quotation reference-photo controls */
.qref-thumb-wrap{position:relative;display:inline-block;margin:2px;}
.qref-thumb{display:block;width:54px;height:54px;padding:2px;border:1px solid var(--border);border-radius:6px;background:var(--bg2);overflow:hidden;cursor:pointer;}
.qref-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.qref-remove{position:absolute;right:-6px;top:-6px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:var(--red);color:#fff;font-weight:700;line-height:18px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25);}


/* ── Document print routing: print only the active document, never a blank page ── */
@media print {
  .page.active#page-delivery-receipt > * { display:none !important; }
  .page.active#page-delivery-receipt > .print-wrap { display:block !important; margin:0 !important; padding:0 !important; max-width:none !important; }
  .page.active#page-delivery-receipt .dr-paper { display:block !important; width:100% !important; min-height:0 !important; margin:0 !important; padding:8mm 8mm 7mm !important; }
  .page.active#page-supplier-po-view > * { display:none !important; }
  .page.active#page-supplier-po-view > .print-wrap { display:block !important; margin:0 !important; padding:0 !important; max-width:none !important; }
  .page.active#page-supplier-po-view .supplier-po-print-doc { display:block !important; width:100% !important; margin:0 !important; }
  .dr-paper, .dr-paper * { color:#000 !important; }
  .dr-number { color:#000 !important; }
  .dr-generated-footer { color:#000 !important; }
}

/* Delivery Receipt is printed on white paper; keep every visible text element black. */
.dr-paper, .dr-paper * { color:#000; }


/* Delivery Receipt table headings: readable on the white printed form. */
.dr-table thead th { background:#222 !important; color:#fff !important; }
.dr-table thead th * { color:#fff !important; }
.dr-paper .dr-title, .dr-paper .dr-section-label { color:#000 !important; }

/* Delivery Receipt print routing must explicitly display the page itself.
   A later quotation print rule hides all .page elements; this rule wins. */
@media print {
  .page.active#page-delivery-receipt { display:block !important; padding:0 !important; margin:0 !important; }
  .page.active#page-delivery-receipt > .page-header,
  .page.active#page-delivery-receipt > .card,
  .page.active#page-delivery-receipt > .no-print { display:none !important; }
  .page.active#page-delivery-receipt > .print-wrap { display:block !important; visibility:visible !important; width:100% !important; margin:0 !important; padding:0 !important; }
  .page.active#page-delivery-receipt .dr-paper { display:block !important; visibility:visible !important; color:#000 !important; background:#fff !important; }
  .page.active#page-delivery-receipt .dr-table thead th { background:#222 !important; color:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .page.active#page-delivery-receipt .dr-table thead th * { color:#fff !important; }
}

.client-pending-approval-section { border-left:4px solid var(--blue); }
.client-pending-quote-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); }
.client-pending-quote-row:last-child { border-bottom:0; padding-bottom:2px; }
.client-pending-quote-info { display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.client-pending-quote-info > span { color:var(--text3); font-size:12px; }
.client-pending-total { font-weight:700; color:var(--text) !important; }
.client-pending-quote-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:760px) {
  .client-pending-quote-row { align-items:flex-start; flex-direction:column; }
  .client-pending-quote-actions { justify-content:flex-start; }
}


/* Final Supplier PO print routing override: print the actual document,
   not a blank page or the dashboard. */
@media print {
  html body .page.active#page-supplier-po-view {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body .page.active#page-supplier-po-view > .no-print {
    display: none !important;
  }
  html body .page.active#page-supplier-po-view > .print-wrap {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body .page.active#page-supplier-po-view .supplier-po-print-doc {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
}


/* Supplier PO must be a normal on-screen document preview before printing. */
#page-supplier-po-view.active { display:block !important; padding:28px !important; margin:0 !important; visibility:visible !important; }
#page-supplier-po-view.active .print-wrap { display:block !important; visibility:visible !important; max-width:900px; margin:0 auto; }
#page-supplier-po-view.active .supplier-po-print-doc { display:block !important; visibility:visible !important; width:190mm !important; max-width:190mm !important; margin:0 auto !important; background:#fff; color:#111; }
@media print {
  #page-supplier-po-view.active { padding:0 !important; }
  #page-supplier-po-view.active .print-wrap { max-width:none !important; margin:0 !important; }
}

/* Supplier PO document is a white paper document; never inherit dark-theme text colors. */
.supplier-po-print-doc,
.supplier-po-print-doc * { color:#111 !important; }
.supplier-po-print-doc { background:#fff !important; }
@media print {
  .supplier-po-print-doc { width:190mm !important; max-width:190mm !important; margin:0 auto !important; background:#fff !important; color:#111 !important; }
  .sp-product-table, .sp-price-table { color:#111 !important; background:#fff !important; }
  .sp-product-table th, .sp-price-table th { background:#dedede !important; color:#111 !important; }
  .sp-product-table td, .sp-price-table td { background:#fff !important; color:#111 !important; }
  .sp-price-area { justify-content:flex-end !important; }
  .sp-price-table { width:58% !important; min-width:0 !important; }
}


/* FINAL: Supplier PO print must use the same document geometry as Preview.
   A4 with 10mm margins leaves exactly 190mm of printable width, matching
   the on-screen 190mm document. Do not shrink/reflow fonts, padding, header,
   or signature spacing during print. */
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  html body .page.active#page-supplier-po-view { padding: 0 !important; margin: 0 !important; width: auto !important; min-height: 0 !important; }
  html body .page.active#page-supplier-po-view > .print-wrap { width: 190mm !important; max-width: 190mm !important; margin: 0 auto !important; padding: 0 !important; }
  html body .page.active#page-supplier-po-view .supplier-po-print-doc {
    display: block !important;
    visibility: visible !important;
    width: 190mm !important;
    max-width: 190mm !important;
    margin: 0 auto !important;
    padding: 18px 0 22px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  html body .page.active#page-supplier-po-view .sp-paper-header { min-height: 66px !important; }
  html body .page.active#page-supplier-po-view .sp-product-table,
  html body .page.active#page-supplier-po-view .sp-price-table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; }
  html body .page.active#page-supplier-po-view .sp-product-table th,
  html body .page.active#page-supplier-po-view .sp-price-table th { padding: 5px 5px !important; font-size: 8.5px !important; }
  html body .page.active#page-supplier-po-view .sp-product-table td,
  html body .page.active#page-supplier-po-view .sp-price-table td { padding: 5px 6px !important; font-size: 9.5px !important; }
  html body .page.active#page-supplier-po-view .sp-signature-grid { margin-top: 42px !important; }
  html body .page.active#page-supplier-po-view .sp-price-area { justify-content: flex-end !important; }
  html body .page.active#page-supplier-po-view .sp-price-table { width: 58% !important; min-width: 360px !important; }
}


.dr-prepared-block { min-height:75px; display:flex; flex-direction:column; justify-content:flex-end; }
.dr-prepared-line { border-bottom:1px solid #222; min-height:16px; padding:0 4px 2px; text-align:center; }

/* ================================================================
   FINAL SUPPLIER PO PREVIEW = PRINT GEOMETRY
   The Supplier PO is intentionally printed from the exact same DOM that
   users see on the Preview page. Do not resize/reflow its internal blocks
   for print. The preview document is 190mm wide, so A4 is printed with
   zero browser page margin and the same 190mm document centered on the page.
================================================================ */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html body { margin:0 !important; padding:0 !important; background:#fff !important; }
  html body .page.active#page-supplier-po-view {
    display:block !important;
    width:210mm !important;
    max-width:210mm !important;
    padding:0 !important;
    margin:0 !important;
    min-height:0 !important;
    background:#fff !important;
    overflow:visible !important;
  }
  html body .page.active#page-supplier-po-view > .no-print { display:none !important; }
  html body .page.active#page-supplier-po-view > .print-wrap {
    display:block !important;
    width:190mm !important;
    max-width:190mm !important;
    margin:0 auto !important;
    padding:0 !important;
    overflow:visible !important;
  }
  html body .page.active#page-supplier-po-view .supplier-po-print-doc {
    display:block !important;
    width:190mm !important;
    max-width:190mm !important;
    margin:0 !important;
    padding:18px 0 22px !important;
    box-sizing:border-box !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:10px !important;
    line-height:normal !important;
    background:#fff !important;
    color:#111 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    transform:none !important;
    zoom:1 !important;
  }
  html body .page.active#page-supplier-po-view .sp-paper-header { grid-template-columns:1fr 245px !important; min-height:66px !important; }
  html body .page.active#page-supplier-po-view .sp-company-block { padding:2px 8px 5px 0 !important; gap:9px !important; }
  html body .page.active#page-supplier-po-view .sp-logo { width:78px !important; height:62px !important; }
  html body .page.active#page-supplier-po-view .sp-company-text { padding-top:6px !important; }
  html body .page.active#page-supplier-po-view .sp-company-name { font-size:13px !important; }
  html body .page.active#page-supplier-po-view .sp-company-address { font-size:8.5px !important; line-height:1.45 !important; margin-top:4px !important; }
  html body .page.active#page-supplier-po-view .sp-control-block { font-size:9px !important; }
  html body .page.active#page-supplier-po-view .sp-control-block > div { min-height:22px !important; }
  html body .page.active#page-supplier-po-view .sp-control-block strong,
  html body .page.active#page-supplier-po-view .sp-control-block span { padding:3px 6px !important; }
  html body .page.active#page-supplier-po-view .sp-po-title { font-size:22px !important; padding:12px 0 9px !important; }
  html body .page.active#page-supplier-po-view .sp-section-grid { grid-template-columns:1fr 1fr !important; }
  html body .page.active#page-supplier-po-view .sp-field-row { min-height:19px !important; }
  html body .page.active#page-supplier-po-view .sp-field-row strong,
  html body .page.active#page-supplier-po-view .sp-field-row > span { padding:3px 5px !important; }
  html body .page.active#page-supplier-po-view .sp-product-table-frame { width:100% !important; }
  html body .page.active#page-supplier-po-view .sp-product-table,
  html body .page.active#page-supplier-po-view .sp-price-table { border-collapse:collapse !important; table-layout:fixed !important; }
  html body .page.active#page-supplier-po-view .sp-product-table { width:100% !important; }
  html body .page.active#page-supplier-po-view .sp-product-table th,
  html body .page.active#page-supplier-po-view .sp-price-table th { padding:5px 5px !important; font-size:8.5px !important; }
  html body .page.active#page-supplier-po-view .sp-product-table td,
  html body .page.active#page-supplier-po-view .sp-price-table td { padding:5px 6px !important; font-size:9.5px !important; }
  html body .page.active#page-supplier-po-view .sp-price-area { display:flex !important; justify-content:flex-end !important; margin-top:8px !important; }
  html body .page.active#page-supplier-po-view .sp-price-table { width:58% !important; min-width:360px !important; }
  html body .page.active#page-supplier-po-view .sp-signature-grid { margin-top:42px !important; }
  html body .page.active#page-supplier-po-view .sp-conforme { margin-top:8px !important; }
  html body .page.active#page-supplier-po-view .supplier-po-print-doc,
  html body .page.active#page-supplier-po-view .supplier-po-print-doc * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* FINAL SUPPLIER PO PREVIEW = PRINT GEOMETRY */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html body { margin:0 !important; padding:0 !important; background:#fff !important; }
  html body .page.active#page-supplier-po-view { display:block !important; width:210mm !important; max-width:210mm !important; padding:0 !important; margin:0 !important; min-height:0 !important; background:#fff !important; overflow:visible !important; }
  html body .page.active#page-supplier-po-view > .no-print { display:none !important; }
  html body .page.active#page-supplier-po-view > .print-wrap { display:block !important; width:190mm !important; max-width:190mm !important; margin:0 auto !important; padding:0 !important; overflow:visible !important; }
  html body .page.active#page-supplier-po-view .supplier-po-print-doc { display:block !important; width:190mm !important; max-width:190mm !important; margin:0 !important; padding:18px 0 22px !important; box-sizing:border-box !important; font-family:Arial,Helvetica,sans-serif !important; font-size:10px !important; line-height:normal !important; background:#fff !important; color:#111 !important; box-shadow:none !important; border-radius:0 !important; transform:none !important; zoom:1 !important; }
  html body .page.active#page-supplier-po-view .sp-paper-header { grid-template-columns:1fr 245px !important; min-height:66px !important; }
  html body .page.active#page-supplier-po-view .sp-company-block { padding:2px 8px 5px 0 !important; gap:9px !important; }
  html body .page.active#page-supplier-po-view .sp-logo { width:78px !important; height:62px !important; }
  html body .page.active#page-supplier-po-view .sp-company-text { padding-top:6px !important; }
  html body .page.active#page-supplier-po-view .sp-company-name { font-size:13px !important; }
  html body .page.active#page-supplier-po-view .sp-company-address { font-size:8.5px !important; line-height:1.45 !important; margin-top:4px !important; }
  html body .page.active#page-supplier-po-view .sp-control-block { font-size:9px !important; }
  html body .page.active#page-supplier-po-view .sp-control-block > div { min-height:22px !important; }
  html body .page.active#page-supplier-po-view .sp-control-block strong, html body .page.active#page-supplier-po-view .sp-control-block span { padding:3px 6px !important; }
  html body .page.active#page-supplier-po-view .sp-po-title { font-size:22px !important; padding:12px 0 9px !important; }
  html body .page.active#page-supplier-po-view .sp-section-grid { grid-template-columns:1fr 1fr !important; }
  html body .page.active#page-supplier-po-view .sp-field-row { min-height:19px !important; }
  html body .page.active#page-supplier-po-view .sp-field-row strong, html body .page.active#page-supplier-po-view .sp-field-row > span { padding:3px 5px !important; }
  html body .page.active#page-supplier-po-view .sp-product-table-frame { width:100% !important; }
  html body .page.active#page-supplier-po-view .sp-product-table, html body .page.active#page-supplier-po-view .sp-price-table { border-collapse:collapse !important; table-layout:fixed !important; }
  html body .page.active#page-supplier-po-view .sp-product-table { width:100% !important; }
  html body .page.active#page-supplier-po-view .sp-product-table th, html body .page.active#page-supplier-po-view .sp-price-table th { padding:5px 5px !important; font-size:8.5px !important; }
  html body .page.active#page-supplier-po-view .sp-product-table td, html body .page.active#page-supplier-po-view .sp-price-table td { padding:5px 6px !important; font-size:9.5px !important; }
  html body .page.active#page-supplier-po-view .sp-price-area { display:flex !important; justify-content:flex-end !important; margin-top:8px !important; }
  html body .page.active#page-supplier-po-view .sp-price-table { width:58% !important; min-width:360px !important; }
  html body .page.active#page-supplier-po-view .sp-signature-grid { margin-top:42px !important; }
  html body .page.active#page-supplier-po-view .supplier-po-print-doc, html body .page.active#page-supplier-po-view .supplier-po-print-doc * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* r36: Supplier PO print is intentionally identical to the on-screen Preview.
   Keep the same document width, typography, table geometry, spacing and
   signature placement; only hide the surrounding application chrome. */
@media print {
  @page { size:A4 portrait; margin:10mm; }
  html body .page.active#page-supplier-po-view { display:block !important; visibility:visible !important; position:static !important; width:auto !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; }
  html body .page.active#page-supplier-po-view > .no-print { display:none !important; }
  html body .page.active#page-supplier-po-view > .print-wrap { display:block !important; visibility:visible !important; width:190mm !important; max-width:190mm !important; margin:0 auto !important; padding:0 !important; overflow:visible !important; }
  html body .page.active#page-supplier-po-view .supplier-po-print-doc {
    display:block !important; visibility:visible !important; width:190mm !important; max-width:190mm !important;
    margin:0 !important; padding:18px 0 22px !important; box-sizing:border-box !important;
    font-family:Arial,Helvetica,sans-serif !important; font-size:10px !important; line-height:normal !important;
    background:#fff !important; color:#111 !important; box-shadow:none !important; border-radius:0 !important;
    transform:none !important; zoom:1 !important;
  }
  html body .page.active#page-supplier-po-view .sp-paper-header { min-height:66px !important; }
  html body .page.active#page-supplier-po-view .sp-product-table-frame { width:100% !important; border:1px solid #111 !important; border-bottom:1px solid #111 !important; overflow:visible !important; }
  html body .page.active#page-supplier-po-view .sp-product-table,
  html body .page.active#page-supplier-po-view .sp-price-table { width:100% !important; border-collapse:collapse !important; table-layout:fixed !important; margin:0 !important; }
  html body .page.active#page-supplier-po-view .sp-product-table th,
  html body .page.active#page-supplier-po-view .sp-price-table th { padding:5px 5px !important; font-size:8.5px !important; }
  html body .page.active#page-supplier-po-view .sp-product-table td,
  html body .page.active#page-supplier-po-view .sp-price-table td { padding:5px 6px !important; font-size:9.5px !important; }
  html body .page.active#page-supplier-po-view .sp-price-area { display:flex !important; justify-content:flex-end !important; margin-top:8px !important; }
  html body .page.active#page-supplier-po-view .sp-price-table { width:58% !important; min-width:360px !important; }
  html body .page.active#page-supplier-po-view .sp-signature-grid { margin-top:42px !important; }
  html body .page.active#page-supplier-po-view .sp-sign-row { min-height:31px !important; }
  html body .page.active#page-supplier-po-view .sp-sign-row strong { padding:8px 5px 4px !important; font-size:8.5px !important; }
  html body .page.active#page-supplier-po-view .sp-sign-row > span:first-of-type { min-height:24px !important; padding:4px 6px !important; font-size:9.5px !important; }
  html body .page.active#page-supplier-po-view .sp-sign-row em { padding:8px 6px 4px !important; font-size:8.5px !important; }
  html body .page.active#page-supplier-po-view .sp-conforme { margin-top:8px !important; padding:6px 4px !important; font-size:9px !important; }
  html body .page.active#page-supplier-po-view .sp-footer-note { font-size:8px !important; margin-top:5px !important; }
  html body .page.active#page-supplier-po-view .supplier-po-print-doc,
  html body .page.active#page-supplier-po-view .supplier-po-print-doc * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* r36: keep quotation number/date visibly distinct in the client quotation document. */
.qv-meta-value { display:inline-block !important; min-width:90px; font-weight:800 !important; color:#000 !important; }

/* Client DR view: clients may open an actual saved receipt from their PO,
   but must not see NETSWORKS' internal receipt creation/edit controls. */
body.client-dr-view #drEntryCard,
body.client-dr-view #page-delivery-receipt .date-filter-bar,
body.client-dr-view #page-delivery-receipt .card.mb20:not(:last-child) { display:none !important; }


/* Button loading state */
.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btnSpin .7s linear infinite;vertical-align:-2px;}
.is-loading{cursor:wait!important;opacity:.82;}
.is-loading .btn-spinner{flex:0 0 auto;}
@keyframes btnSpin{to{transform:rotate(360deg);}}