/* ═══════════════════════════════════════════════════════════
   TBM — Trianze Business Manager
   Premium Corporate Design System
   ═══════════════════════════════════════════════════════════ */

:root {
  --primary:    #1B4D8C;
  --primary-dk: #143a6b;
  --secondary:  #5B89C8;
  --accent:     #F4F8FC;
  --bg:         #FFFFFF;
  --border:     #EAEAEA;
  --border-dk:  #D4D9E0;
  --text:       #1A1A1A;
  --text-muted: #6B7280;
  --text-light: #9CA3AF;
  --success:    #059669;
  --warning:    #D97706;
  --danger:     #DC2626;
  /* Surfaces — colour themes (themes.css) override these */
  --sidebar-bg: var(--primary);
  --page-bg:    #F7F9FC;
  --surface:    #FFFFFF;
  --surface-2:  #F3F4F6;
  --sidebar-w:  240px;
  --topbar-h:   60px;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:     0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.10);
  --font:       'Inter', 'Segoe UI', system-ui, sans-serif;
  --transition: 0.18s ease;

  /* Type scale — introduced for consistent, deliberate typography
     going forward, without touching every existing hardcoded font-size
     in this file (too risky to blanket-replace 1000+ lines at once).
     Applied surgically to the highest-visibility elements below. */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.04em;

  /* A richer, slightly deeper shadow for card "lift" — the original
     --shadow-sm/--shadow/--shadow-lg above are untouched (other rules
     already depend on their exact values), this is a new option. */
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.06);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ─────────────────────────────────────────────────── */
.tbm-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  /* Mobile browsers report 100vh as the height with the address bar
     hidden, so when the bar is showing (the normal state), a 100vh
     sidebar is actually taller than what's visible — pushing the
     logout button in the footer off-screen with no way to reach it.
     100dvh tracks the *real* visible height and updates live as the
     browser chrome shows/hides. Older browsers that don't understand
     dvh simply ignore the line and keep the 100vh above. */
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 1000;
  transition: transform var(--transition);
}

.tbm-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
}

/* Manual collapse (laptop/tablet) — separate from the mobile off-canvas
   drawer above. Sidebar shrinks to nothing and content takes the full
   width, for a bigger working area on wide tables like Quotations. */
body.sidebar-collapsed .tbm-sidebar {
  width: 0;
  overflow: hidden;
  border-right: none;
}
body.sidebar-collapsed .tbm-main {
  margin-left: 0;
}
.btn-sidebar-collapse {
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 17px; color: var(--text-muted);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 6px;
}
.btn-sidebar-collapse:hover { background: var(--accent); color: var(--primary); border-color: var(--secondary); }

.tbm-topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.tbm-content {
  flex: 1;
  padding: 28px 28px 40px;
  background: var(--page-bg);
}

/* ── Sidebar brand ─────────────────────────────────────────── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.brand-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: white;
}

.brand-name {
  font-size: 16px; font-weight: 700;
  color: white; letter-spacing: .5px;
}

.brand-sub {
  font-size: 10px; color: rgba(255,255,255,.55);
  font-weight: 400; letter-spacing: .3px;
  margin-top: 1px;
}

.brand-version {
  font-size: 9px; color: rgba(255,255,255,.35);
  font-weight: 400; letter-spacing: .3px;
  margin-top: 3px;
}

/* ── Sidebar nav ───────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 450;
  margin-bottom: 2px;
  transition: all var(--transition);
}

.nav-item i { font-size: 16px; width: 20px; flex-shrink: 0; }

.nav-item:hover {
  background: rgba(255,255,255,.12);
  color: white;
}

.nav-item.active {
  background: rgba(255,255,255,.18);
  color: white;
  font-weight: 600;
}

.nav-divider {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 8px 0;
}

/* ── Collapsible nav groups ────────────────────────────────── */
.nav-group { margin-bottom: 2px; }

.nav-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}

.nav-group-header:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.nav-group-header i:first-child { font-size: 14px; width: 20px; flex-shrink: 0; }

.nav-group-chevron {
  margin-left: auto;
  font-size: 11px !important;
  width: auto !important;
  transition: transform 0.15s ease;
}

.nav-group.open .nav-group-chevron { transform: rotate(180deg); }

.nav-group-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  padding-left: 8px;
}

.nav-group.open .nav-group-body { max-height: 400px; }

/* ── Sidebar footer ────────────────────────────────────────── */
.sidebar-footer {
  padding: 14px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.user-info { display: flex; align-items: center; gap: 10px; }

.user-avatar {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: white;
  text-transform: uppercase;
  flex-shrink: 0;
}

.user-name { font-size: 12.5px; font-weight: 500; color: white; }
.user-role {
  font-size: 10px; font-weight: 500;
  padding: 1px 6px; border-radius: 10px;
  display: inline-block; margin-top: 2px;
}
.badge-role-admin    { background: rgba(255,255,255,.2); color: rgba(255,255,255,.9); }
.badge-role-sales    { background: rgba(91,137,200,.4);  color: rgba(255,255,255,.9); }
.badge-role-procurement { background: rgba(5,150,105,.3); color: rgba(255,255,255,.9); }

.btn-logout {
  color: rgba(255,255,255,.5); font-size: 16px;
  text-decoration: none; padding: 4px;
  transition: color var(--transition);
}
.btn-logout:hover { color: white; }

/* ── Topbar ───────────────────────────────────────────────── */
.btn-sidebar-toggle {
  background: none; border: none;
  font-size: 20px; color: var(--text-muted);
  padding: 4px 6px; cursor: pointer;
  display: none;
}

.topbar-search { flex: 1; max-width: 420px; }

.search-form {
  position: relative; display: flex; align-items: center;
}

.search-icon {
  position: absolute; left: 12px;
  color: var(--text-muted); font-size: 14px; pointer-events: none;
}

.search-input {
  width: 100%; padding: 8px 12px 8px 36px;
  border: 1px solid var(--border);
  border-radius: 8px; font-size: 13.5px;
  background: var(--accent);
  transition: all var(--transition);
  outline: none;
}

.search-input:focus {
  border-color: var(--secondary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(91,137,200,.15);
}

.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.topbar-bell-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.topbar-bell-wrap a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  color: var(--text-muted); text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.topbar-bell-wrap a:hover { background: var(--accent); color: var(--primary); }
.topbar-bell-wrap i { font-size: 18px; }
.topbar-bell-wrap #notifBadge {
  display: none; position: absolute; top: 2px; right: 2px;
  background: #ef4444; color: white; font-size: 10px; font-weight: 700;
  border-radius: 10px; min-width: 16px; height: 16px; line-height: 16px;
  text-align: center; padding: 0 3px;
}

.topbar-quick-actions { display: flex; gap: 8px; }
.topbar-quick-actions .btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ── Flash messages ────────────────────────────────────────── */
.flash-container {
  padding: 0 28px;
  margin-top: 12px;
}

/* ── Page header ───────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.page-title {
  font-size: 22px; font-weight: 700;
  color: var(--text); margin: 0;
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
}

.page-subtitle {
  font-size: 13.5px; color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

.breadcrumb {
  font-size: 12.5px; margin: 0;
  --bs-breadcrumb-divider: '›';
}

/* ── Cards ─────────────────────────────────────────────────── */
.tbm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.tbm-card .card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Cards with p-0 bodies mostly wrap wide tables (.tbm-table th has
   white-space:nowrap). .tbm-card itself keeps overflow:hidden so its
   rounded corners still clip correctly, but that same overflow:hidden
   was silently CLIPPING any table wider than the card instead of letting
   it scroll — the "cut off on the right, can't scroll" bug. Giving the
   body its own scroll container fixes it everywhere at once. */
.tbm-card .card-body.p-0 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tbm-card .card-body { padding: 20px; }

/* ── Stat widgets ─────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.stat-card:hover { box-shadow: var(--shadow); }

.stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}

.stat-icon.blue   { background: rgba(27,77,140,.1);  color: var(--primary); }
.stat-icon.green  { background: rgba(5,150,105,.1);  color: var(--success); }
.stat-icon.orange { background: rgba(217,119,6,.1);  color: var(--warning); }
.stat-icon.purple { background: rgba(124,58,237,.1); color: #7c3aed; }
.stat-icon.teal   { background: rgba(6,182,212,.1);  color: #0891b2; }

.stat-value {
  font-size: 28px; font-weight: 700;
  color: var(--text); line-height: 1;
}

.stat-label {
  font-size: 12px; color: var(--text-muted);
  margin-top: 4px; font-weight: 500;
}

/* ── Tables ─────────────────────────────────────────────────── */
.tbm-table { width: 100%; border-collapse: collapse; }

.tbm-table th {
  padding: 11px 14px;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted);
  background: var(--accent);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tbm-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  vertical-align: middle;
}

.tbm-table tr:last-child td { border-bottom: none; }

.tbm-table tr:hover td { background: var(--accent); }

.tbm-table .actions { white-space: nowrap; text-align: right; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  background: var(--primary); border-color: var(--primary);
  font-weight: 500;
}
.btn-primary:hover { background: var(--primary-dk); border-color: var(--primary-dk); }

.btn-outline-primary {
  color: var(--primary); border-color: var(--primary);
}
.btn-outline-primary:hover { background: var(--primary); }

.btn-icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
}
.btn-icon:hover { background: var(--accent); color: var(--primary); border-color: var(--secondary); }
.btn-icon.danger:hover { background: #FEF2F2; color: var(--danger); border-color: var(--danger); }

/* ── Badges / status ─────────────────────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px;
}

.status-draft    { background: #F3F4F6; color: #6B7280; }
.status-issued   { background: #ECFDF5; color: #059669; }
.status-revised  { background: #EFF6FF; color: #2563EB; }
.status-archived { background: #F9FAFB; color: #9CA3AF; }
.status-won      { background: #ECFDF5; color: #047857; }
.status-lost     { background: #FEF2F2; color: #B91C1C; }
.status-cancelled{ background: #FEF2F2; color: #DC2626; }
.status-active   { background: #ECFDF5; color: #059669; }
.status-inactive { background: #F3F4F6; color: #6B7280; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 5px; }
.form-control, .form-select {
  font-size: 13.5px;
  border-color: var(--border-dk);
  border-radius: 7px;
  padding: 8px 12px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(91,137,200,.15);
}

.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.form-section-title {
  font-size: 13px; font-weight: 600;
  color: var(--primary);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ── List pager (components/pager.html) ──────────────────────── */
.tbm-pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.tbm-pager-info { color: var(--text-muted); }
.tbm-pager-size { display: flex; align-items: center; gap: 6px; }
.tbm-pager-size label { font-size: 12px; white-space: nowrap; }
.tbm-pager-size .form-select { width: auto; }
.tbm-pager .page-link { color: var(--primary); min-width: 32px; text-align: center; }
.tbm-pager .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: white; }
@media (max-width: 576px) {
  .tbm-pager { justify-content: center; }
  .tbm-pager .page-link { min-width: 38px; padding: 7px 8px; }  /* bigger tap targets */
}

/* ── Line items table (quotation/LPO editor) ─────────────────── */
.line-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.line-items-table th {
  padding: 8px 8px;
  background: var(--primary);
  color: white; font-weight: 600;
  font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .4px; white-space: nowrap;
}

.line-items-table td {
  padding: 4px 4px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.line-items-table tr:nth-child(even) td { background: var(--accent); }

/* Every editable cell gets a visible outline so it's clear where each
   box starts and ends — on striped rows and on phones a borderless
   input just looked like plain text. Read-only cells (VAT %, totals)
   have no input, so they stay plain and the difference is obvious. */
.line-items-table .form-control,
.line-items-table .form-select {
  border: 1px solid var(--border-dk);
  background-color: var(--surface);
  padding: 5px 6px;
  font-size: 13px;
  border-radius: 4px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.line-items-table .form-control:hover,
.line-items-table .form-select:hover {
  border-color: var(--secondary);
}

.line-items-table .form-control:focus,
.line-items-table .form-select:focus {
  background-color: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91,137,200,.25);
}

/* Filled-in line with a 0 price (quote form) — allowed for FOC units,
   just made obvious so it isn't missed by accident. */
.line-items-table .form-control.price-zero {
  border-color: var(--warning);
  background-color: #FFFBEB;
}

/* Column width classes for line items */
.col-no    { width: 3.5%; }
.col-sku   { width: 9%; }
.col-desc  { width: 47%; }
.col-qty   { width: 6%; }
.col-unit  { width: 6%; }
.col-price { width: 9%; }
.col-disc  { width: 6%; }
.col-vat   { width: 6%; }
.col-total { width: 10%; }
.col-act   { width: 3.5%; }

/* LPO col widths (no SKU/Disc) */
.col-lpo-no   { width: 4%; }
.col-lpo-desc { width: 53%; }
.col-lpo-qty  { width: 7%; }
.col-lpo-unit { width: 7%; }
.col-lpo-price{ width: 11%; }
.col-lpo-vat  { width: 7%; }
.col-lpo-total{ width: 10%; }
.col-lpo-act  { width: 4%; }

/* ── Totals summary ─────────────────────────────────────────── */
.totals-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 300px;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.totals-row:last-child {
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: 15px;
  border-bottom: none;
}

/* ── Quick actions ─────────────────────────────────────────── */
.quick-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
}

.quick-action-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  font-size: 13px; font-weight: 500;
  transition: all var(--transition);
}

.quick-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.quick-action-btn i { font-size: 16px; color: var(--primary); }

/* ── Entity info view ───────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.info-field { }
.info-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .4px;
  margin-bottom: 3px;
}
.info-value { font-size: 14px; color: var(--text); }

/* ── Product picker modal ───────────────────────────────────── */
.product-picker-item {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 6px;
}

.product-picker-item:hover {
  border-color: var(--primary);
  background: var(--accent);
}

.product-sku  { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.product-name { font-size: 13px; font-weight: 500; }
.product-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.product-price{ font-size: 13px; font-weight: 600; color: var(--primary); float: right; }

/* ── Auth page ──────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary) 0%, #2563EB 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

.auth-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 44px 40px;
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-lg);
}

.auth-logo {
  text-align: center; margin-bottom: 28px;
}

.auth-logo .logo-icon {
  width: 56px; height: 56px;
  background: var(--primary);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: white;
  margin: 0 auto 14px;
}

.auth-logo h1 { font-size: 22px; font-weight: 700; color: var(--text); margin: 0; }
.auth-logo p  { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }

/* ── Settings logo preview ──────────────────────────────────── */
.logo-preview-box {
  width: 200px; height: 80px;
  border: 2px dashed var(--border-dk);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--accent);
}
.logo-preview-box img { max-height: 72px; max-width: 188px; object-fit: contain; }
.logo-preview-box .no-logo { font-size: 12px; color: var(--text-light); }

/* ── Utilities ──────────────────────────────────────────────── */
.text-primary { color: var(--primary) !important; }
.bg-accent    { background: var(--accent) !important; }
.fw-600       { font-weight: 600; }
.mono         { font-family: 'SF Mono', Consolas, monospace; }
.doc-number   { font-family: monospace; font-weight: 600; color: var(--primary); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tbm-sidebar { transform: translateX(-100%); }
  .tbm-sidebar.open { transform: translateX(0); }
  .tbm-main { margin-left: 0; }
  .btn-sidebar-toggle {
    display: flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    font-size: 20px;
  }
  .btn-sidebar-collapse { display: none; }
  .tbm-content { padding: 16px; }
  .tbm-topbar {
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    padding: 10px 14px;
    row-gap: 10px;
    align-items: center;
    position: sticky;
  }
  .topbar-search { order: 2; flex: 1 1 auto; max-width: none; padding-right: 44px; }
  .topbar-actions {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 8px;
  }
  .topbar-bell-wrap {
    position: absolute;
    top: 12px; right: 14px;
    align-self: auto;
    z-index: 5;
  }
  .topbar-quick-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .topbar-quick-actions .btn {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 7px 4px;
    font-size: 11px;
    line-height: 1.2;
    border-radius: 10px;
  }
  .topbar-quick-actions .btn i { font-size: 15px; }
  .topbar-quick-actions .btn span { white-space: normal; }

  /* Slightly tighter nav rows so the whole menu + footer fits more
     often without needing to scroll, and a bigger, clearer logout tap
     target now that it's reliably visible. */
  .sidebar-nav { padding: 8px 8px; }
  .nav-item { padding: 8px 12px; font-size: 13px; }
  .btn-logout { font-size: 20px; padding: 8px 10px; }

  /* Dashboard Quick Actions: was flex-wrap with content-sized chips, so
     rows never lined up into a clean grid. Equal-width 2-column grid
     looks tidy and consistent instead. */
  .quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .quick-action-btn {
    justify-content: center;
    text-align: center;
    padding: 12px 8px;
  }
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-dk); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ── Search dropdowns ────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--border-dk);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 4px 0;
}
.dropdown-menu .dropdown-item {
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--text);
  border-radius: 0;
  transition: background var(--transition);
}
.dropdown-menu .dropdown-item:hover {
  background: var(--accent);
  color: var(--primary);
}
/* ── APPEND THIS BLOCK TO THE END OF static/css/main.css ── */

/* Lead status badges */
.status-lead-new       { background: #EFF6FF; color: #2563EB; }
.status-lead-contacted { background: #FFF7ED; color: #C2410C; }
.status-lead-qualified { background: #F0FDF4; color: #15803D; }
.status-lead-quotation_sent { background: #EEF2FF; color: #4338CA; }
.status-lead-converted { background: #ECFDF5; color: #059669; }
.status-lead-lost      { background: #FEF2F2; color: #DC2626; }

/* Lead source badges */
.source-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600;
  background: #F3F4F6; color: #374151;
}
.source-call            { background: #EFF6FF; color: #1D4ED8; }
.source-whatsapp        { background: #F0FDF4; color: #16A34A; }
.source-email           { background: #FFF7ED; color: #C2410C; }
.source-facebook        { background: #EFF6FF; color: #1D4ED8; }
.source-instagram       { background: #FDF4FF; color: #9333EA; }
.source-trianze_web     { background: #F0F9FF; color: #0369A1; }
.source-corporateav_web { background: #FFF1F2; color: #BE123C; }
.source-vsysav_web      { background: #FFFBEB; color: #B45309; }

/* Info field helpers (used in view templates) */
.info-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.info-value { font-size: 13.5px; color: var(--text); }

/* ── New lead source badges ── */
.source-corporateav_whatsapp { background:#F0FDF4; color:#16A34A; }
.source-corporateav_email    { background:#FFF7ED; color:#C2410C; }
.source-corporateav_call     { background:#EFF6FF; color:#1D4ED8; }
.source-trianze_whatsapp     { background:#F0FDF4; color:#16A34A; }
.source-trianze_email        { background:#FFF7ED; color:#C2410C; }
.source-trianze_call         { background:#EFF6FF; color:#1D4ED8; }
.source-vsysav_whatsapp      { background:#F0FDF4; color:#16A34A; }
.source-vsysav_email         { background:#FFF7ED; color:#C2410C; }
.source-vsysav_call          { background:#EFF6FF; color:#1D4ED8; }
.source-referral             { background:#FDF4FF; color:#9333EA; }
.source-walk_in              { background:#FFFBEB; color:#B45309; }

/* ── Mobile Quotation Form ── */
@media (max-width: 768px) {
  .line-items-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .line-items-table {
    min-width: 680px;
    font-size: 12px;
  }
  .line-items-table input.form-control {
    font-size: 12px;
    padding: 5px 6px;
    min-width: unset;
  }
  .totals-box {
    width: 100%;
    margin-top: 12px;
  }
  /* Sticky scroll hint */
  .line-items-wrap::after {
    content: '← scroll →';
    display: block;
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    padding: 4px;
  }
}

/* ── Mobile document cards (Quotations / PI / LPO lists) ──────────
   Same underlying data as the table, reflowed so nothing needs
   horizontal scrolling on a phone. Hidden above the md breakpoint,
   where the full table takes over instead. */
.quote-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.quote-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.quote-card:active { background: #FAFBFC; }
.qc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 8px;
}
.qc-number {
  font-family: monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-dark, var(--primary));
  display: flex;
  align-items: center;
  gap: 6px;
}
.qc-rev {
  font-size: 10px;
  font-weight: 700;
  background: #DBEAFE;
  color: #1D4ED8;
  padding: 1px 6px;
  border-radius: 4px;
}
.qc-customer {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.qc-project {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qc-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.qc-meta-left { display: flex; flex-direction: column; gap: 3px; }
.qc-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.qc-meta-row i { font-size: 12px; width: 13px; }
.qc-value { text-align: right; }
.qc-currency { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.qc-amount { font-size: 17px; font-weight: 800; color: var(--primary); }
.qc-followup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  margin-top: 10px;
}
.qc-followup i { font-size: 11px; }
.qc-followup-overdue { background: #FEF2F2; color: #DC2626; }
.qc-followup-today { background: #FFFBEB; color: #B45309; }


/* ── Customer Search Field ─────────────────────────────────── */
.customer-search-wrap {
  position: relative;
}
.customer-search-wrap .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
  pointer-events: none;
}
.customer-search-wrap input {
  padding-left: 36px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #f9fafb !important;
  transition: all .15s;
  cursor: pointer;
}
.customer-search-wrap input:focus {
  border-color: var(--primary) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px rgba(27,77,140,.1) !important;
  cursor: text;
}
.customer-search-wrap input::placeholder {
  color: #9ca3af;
  font-style: italic;
}
.customer-dropdown {
  display: none;
  position: absolute;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  top: calc(100% + 4px);
  left: 0;
}
.customer-dropdown-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background .1s;
}
.customer-dropdown-item:last-child { border-bottom: none; }
.customer-dropdown-item:hover { background: #EFF6FF; }
.customer-dropdown-item .cname { font-weight: 600; font-size: 13.5px; color: #111; }
.customer-dropdown-item .cdetail { font-size: 11.5px; color: #6b7280; margin-top: 1px; }
.customer-dropdown-empty { padding: 12px 14px; color: #9ca3af; font-size: 13px; text-align: center; }

/* ── Compact Mode ─────────────────────────────────────────────
   A personal, account-level toggle (see toggle_density route) — the
   comfortable defaults above are completely untouched; these rules
   only apply when body.compact-mode is present, so switching this on
   never affects anyone else viewing the same pages. Built specifically
   for someone who lives in this app all day and scrolls a lot — the
   goal is genuinely more rows visible per screen, not just smaller
   text for its own sake.

   Deliberately scoped to min-width:768px and up — the toggle button
   itself still shows on mobile (so the setting stays consistent if
   someone flips it on their laptop and later opens the same account
   on their phone), but the actual tighter spacing never applies below
   that width. A phone screen is already small and needs bigger tap
   targets, not smaller ones — shrinking padding there would make
   things harder to use, not easier, which defeats the entire point. */
@media (min-width: 768px) {
  body.compact-mode .tbm-table th {
    padding: 6px 10px;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  body.compact-mode .tbm-table td {
    padding: 6px 10px;
    font-size: 12.5px;
  }

  body.compact-mode .tbm-card .card-body {
    padding: 12px;
  }

  body.compact-mode .tbm-card .card-header {
    padding: 10px 14px;
  }

  body.compact-mode .page-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
}

/* ── Quote form: customer panel (under the customer picker) ──── */
.cust-panel { border-top: 1px dashed var(--border-dk); padding-top: 14px; }
.cust-panel:has(#custRecent[style*="none"]):has(#custSnap:empty) { display: none; }
.cust-panel #custSnap:empty { display: none; }
.cp-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.cp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cp-link { font-size: 12px; color: var(--primary); text-decoration: none; white-space: nowrap; }
.cp-link i { margin-right: 4px; }
.cp-stats { font-size: 12px; color: var(--text-muted); text-align: right; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip {
  border: 1px solid var(--border-dk); background: var(--surface); color: var(--text);
  border-radius: 16px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.cp-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--accent); }
.cp-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text); margin-bottom: 8px; }
.cp-contact a { color: var(--primary); text-decoration: none; }
.cp-contact i, .cp-trn i, .cp-trn-missing i, .cp-notes i { margin-right: 6px; }
.cp-contact i { color: var(--text-muted); }
.cp-trn { font-size: 12.5px; color: var(--text-muted); }
.cp-trn-missing {
  display: inline-flex; align-items: center; font-size: 12.5px;
  background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; border-radius: 6px; padding: 4px 10px;
}
.cp-trn-missing a { color: inherit; font-weight: 600; }
button.cp-link { border: none; background: none; padding: 0; cursor: pointer; }
button.cp-link:hover { text-decoration: underline; }
.cp-addtrn { border: none; background: none; padding: 0 0 0 4px; color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.cp-notes { margin-top: 8px; background: var(--accent); border-radius: 6px; padding: 8px 12px; font-size: 12.5px; color: var(--text); white-space: pre-line; }
.cp-notes i { color: var(--primary); }
.cp-hist-row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) 90px minmax(0, 1fr) 76px 72px;
  gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.cp-hist-row:last-child { border-bottom: none; }
.cp-num { font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-rev { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.cp-date { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.cp-total { text-align: right; font-weight: 600; white-space: nowrap; }
.cp-hist-row .status-badge { justify-self: center; }
.cp-actions { display: flex; justify-content: flex-end; gap: 4px; }
.cp-icon {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-dk); border-radius: 8px; background: var(--surface);
  color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 0;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.cp-icon:hover { border-color: var(--primary); color: var(--primary); background: var(--accent); }
.cp-pdf:hover { border-color: var(--danger); color: var(--danger); }
.cp-empty, .cp-loading { font-size: 12.5px; color: var(--text-muted); padding: 4px 0; }
.cp-showall { border: none; background: none; color: var(--primary); font-size: 12.5px; padding: 6px 0 0; display: none; }
/* Phones: one compact line per quote, 2 quotes then "Show all",
   chips scroll sideways instead of wrapping into a tall block. */
@media (max-width: 768px) {
  .cp-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
  .cp-chips::-webkit-scrollbar { display: none; }
  .cp-contact { gap: 4px 14px; font-size: 12.5px; }
  .cp-contact a { padding: 2px 0; }
  .cp-head { flex-wrap: wrap; row-gap: 2px; }
  .cp-stats { text-align: left; width: 100%; }
  .cp-hist-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; padding: 9px 0; }
  .cp-date { grid-column: 1; grid-row: 2; }
  .cp-total { grid-column: 2; grid-row: 2; }
  .cp-hist-row .status-badge { grid-column: 2; grid-row: 1; justify-self: end; }
  .cp-actions { grid-column: 3; grid-row: 1 / 3; }
  .cp-icon { width: 38px; height: 38px; }  /* bigger tap targets */
  .cp-hist:not(.cp-expanded) .cp-more { display: none; }
  .cp-showall { display: block; }
}

/* Quote preview pop-up (eye icon in Quote history) */
.qp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.qp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qp-table th { background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px; position: sticky; top: 0; }
.qp-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }
.qp-table .qp-num { text-align: right; white-space: nowrap; }
.qp-table .qp-n { color: var(--text-muted); width: 32px; }
.qp-heading td { background: var(--accent); font-weight: 600; color: var(--primary); }
.qp-sku { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.qp-desc { white-space: pre-line; }
.qp-foc { font-size: 11px; font-weight: 600; color: var(--success); }
.qp-totals { margin-left: auto; max-width: 320px; padding: 10px 16px 14px; font-size: 13px; }
.qp-totals > div { display: flex; justify-content: space-between; padding: 3px 0; }
.qp-totals .qp-grand { border-top: 1px solid var(--border-dk); margin-top: 4px; padding-top: 7px; font-weight: 700; color: var(--primary); font-size: 14px; }
@media (max-width: 576px) {
  .qp-table th:nth-child(1), .qp-table td.qp-n { display: none; }
  .qp-table td, .qp-table th { padding: 8px; }
  .qp-totals { max-width: none; }
  #quotePreviewModal .modal-footer { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  #quotePreviewModal .modal-footer > div { justify-content: space-between; }
  #qpCopyBtn { flex: 1; }
}

/* Quote form: quote-level discounts (under the line-item buttons) */
.qd-left { flex: 1 1 340px; min-width: 0; }
.quote-discounts { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 14px; max-width: 560px; }
.qd-field { flex: 1 1 220px; min-width: 0; }
.qd-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.qd-field .form-control { text-align: right; }
.qd-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.qd-internal { background: #FFFBEB; border: 1px dashed #FCD34D; border-radius: var(--radius); padding: 8px 10px; }
.qd-internal .qd-hint { color: #92400E; }
.qd-margin { flex: 1 1 100%; font-size: 12.5px; color: var(--success); background: #ECFDF5; border-radius: var(--radius); padding: 7px 10px; }
.qd-margin.qd-neg { color: var(--danger); background: #FEF2F2; }
.qd-margin-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 768px) { .quote-discounts { max-width: none; } }