.item-picker-list li:hover, .item-picker-list li.selected { background: var(--accent); color: #fff; }
.item-picker-list li.selected .ipl-rate, .item-picker-list li:hover .ipl-rate { color: rgba(255,255,255,0.65); }
.item-picker-list li.selected .ipl-stock, .item-picker-list li:hover .ipl-stock { color: rgba(255,255,255,0.65); }
.ipl-row1 { display: flex; align-items: baseline; justify-content: space-between; }
.ipl-name { font-size: 13px; font-weight: 600; color: inherit; }
.ipl-stock { font-size: 12px; color: var(--ink2); }
.ipl-row2 { display: flex; align-items: baseline; justify-content: space-between; margin-top: 2px; }
.ipl-rate { font-size: 12px; color: var(--ink2); }
.ipl-qty { font-size: 12px; color: var(--success); }
.item-picker-no-results { padding: 12px 14px; font-size: 13px; color: var(--ink3); text-align: center; }
.item-picker-add-btn {
  width: 100%; padding: 10px 14px; text-align: left; font-size: 13px;
  color: var(--accent); background: none; border: none; border-top: 1px solid var(--line);
  cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 500;
}
.item-picker-add-btn:hover { background: var(--accent-soft); }
.item-picker-add-icon { font-size: 15px; }

/* Quick-add Item Modal — Zoho style */
.quick-item-modal {
  position: fixed; inset: 0; z-index: 800;
  display: none; align-items: center; justify-content: center;
  background: rgba(7,22,42,0.45);
}
.quick-item-modal.open { display: flex; }
.qim-card {
  background: var(--surface); border-radius: 4px;
  width: 960px; max-width: 97vw; max-height: 94vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22); overflow: hidden;
}
.qim-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.qim-header h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; }
.qim-close {
  display: grid; place-items: center; width: 28px; height: 28px;
  background: none; border: none; color: var(--ink3);
  cursor: pointer; border-radius: 6px; flex-shrink: 0;
}
.qim-close:hover { color: var(--ink); background: var(--surface-soft); }
#quick-item-form { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
.qim-body { flex: 1; overflow-y: auto; padding: 0; }

/* Top section */
.qim-top-section { display: grid; grid-template-columns: 1fr 280px; gap: 0; padding: 20px 24px 16px; background: var(--surface-soft); }
.qim-top-left { display: flex; flex-direction: column; gap: 0; }
.qim-field-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; min-height: 38px; }
.qim-field-row-top { align-items: flex-start; padding-top: 10px; }
.qim-label { width: 110px; min-width: 110px; font-size: 13px; color: var(--ink); flex-shrink: 0; }
.qim-req-label { color: var(--danger); font-weight: 500; }
.qim-info-icon { color: var(--ink3); font-size: 12px; cursor: help; margin-left: 2px; }
.qim-text-input {
  flex: 1; max-width: 320px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: 4px; font-size: 14px; color: var(--ink);
}
.qim-text-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(32,96,232,0.12); }
.qim-select {
  flex: 1; max-width: 320px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: 4px; font-size: 14px; color: var(--ink); background: var(--surface);
}
.qim-select:focus { outline: none; border-color: var(--accent); }
.qim-radio-group { display: flex; gap: 20px; }
.qim-radio-label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); cursor: pointer; }
.qim-radio-label input[type="radio"] { width: auto; accent-color: var(--accent); }
.qim-top-right { display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; }
.qim-image-drop {
  width: 240px; height: 160px; border: 2px dashed var(--line-strong); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--ink3); cursor: pointer;
}
.qim-image-drop:hover { border-color: var(--accent); }
.qim-image-icon { display: flex; align-items: center; justify-content: center; color: var(--ink3); }
.qim-image-text { font-size: 13px; color: var(--ink3); margin: 0; }
.qim-browse-link { font-size: 13px; color: var(--accent); cursor: pointer; }
.qim-section-divider { height: 1px; background: var(--line); }

/* Sections (Sales, Purchase, Inventory) */
.qim-section { padding: 16px 24px; }
.qim-section-head { margin-bottom: 12px; }
.qim-cb-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.qim-cb {
  width: 16px; height: 16px; accent-color: var(--accent);
  cursor: pointer; flex-shrink: 0;
}
.qim-section-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.qim-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.qim-price-row {
  display: flex; align-items: center; flex: 1; max-width: 320px;
  border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: var(--surface);
}
.qim-currency-badge {
  padding: 6px 10px; background: var(--surface-soft); font-size: 13px; color: var(--ink);
  border-right: 1px solid var(--line-strong); white-space: nowrap; flex-shrink: 0;
}
.qim-price-input {
  flex: 1; border: none; padding: 6px 10px; font-size: 14px; color: var(--ink);
  outline: none; background: transparent; min-width: 0;
}
.qim-textarea {
  flex: 1; max-width: 320px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: 4px; font-size: 14px;
  color: var(--ink); resize: vertical; min-height: 72px;
}
.qim-textarea:focus { outline: none; border-color: var(--accent); }
.qim-hidden { display: none; }
.qim-inventory-section { background: var(--surface); }
.qim-inventory-hint { font-size: 12px; color: var(--ink2); margin: 4px 0 12px 26px; }
.qim-footer {
  display: flex; gap: 10px; padding: 14px 24px;
  border-top: 1px solid var(--line); background: var(--surface); flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Projects — Complete Visual System
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared wrapper ── */
.proj-list-wrap,
.proj-form-wrap,
.proj-detail-wrap { display: flex; flex-direction: column; gap: 20px; }

/* ── List: top bar ── */
.proj-list-topbar {
  display: flex; align-items: center; justify-content: space-between;
}
.proj-list-title {
  font-size: 22px; font-weight: 800; color: var(--ink); margin: 0;
  letter-spacing: -0.3px;
}

/* ── Stat tiles ── */
.proj-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.proj-stat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.proj-stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
}
.proj-stat-card--total::before  { background: var(--accent); }
.proj-stat-card--active::before { background: var(--success); }
.proj-stat-card--done::before   { background: var(--warning); }
.proj-stat-card--unbilled::before { background: #8b5cf6; }
.proj-stat-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink3);
}
.proj-stat-value {
  font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1;
  letter-spacing: -0.5px;
}
.proj-stat-sub {
  font-size: 12px; color: var(--ink2); margin-top: 2px;
}

/* ── Status tabs ── */
.proj-status-tabs {
  display: flex; gap: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px; box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.proj-status-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: none; background: none;
  font-size: 13px; font-weight: 500; color: var(--ink2); cursor: pointer;
  border-radius: 6px; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.proj-status-tab:hover { background: var(--surface-soft); color: var(--ink); }
.proj-status-tab.active {
  background: var(--accent-soft); color: var(--accent-strong);
  font-weight: 700;
}
.proj-status-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--bg); border-radius: 10px;
  font-size: 11px; font-weight: 700; color: var(--ink2);
}
.proj-status-tab.active .proj-status-count {
  background: var(--accent); color: #fff;
}

/* ── Project table rows ── */
.proj-row td { transition: background 0.1s; }
.proj-row:hover td { background: var(--surface-soft); }
.proj-row:active td { background: var(--accent-soft); }
.proj-name-cell strong { font-size: 14px; color: var(--ink); }
.proj-name-cell small { color: var(--ink2); font-size: 12px; }

/* ── Form view ── */
.proj-form-wrap { max-width: 860px; }

.proj-section {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
}
.proj-section:last-child { border-bottom: none; padding-bottom: 12px; }

.proj-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--accent);
  margin: 0 0 18px; padding-left: 10px;
  border-left: 3px solid var(--accent);
}

.proj-tasks-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.proj-tasks-table { width: 100%; }
.proj-tasks-empty {
  font-size: 13px; color: var(--ink3); padding: 20px 0;
  text-align: center; font-style: italic;
}

/* ── Detail: breadcrumb ── */
.proj-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 2px 0;
}
.proj-breadcrumb-link {
  border: none; background: none; color: var(--accent); cursor: pointer;
  font-size: 13px; padding: 0; font-weight: 600;
  transition: color 0.12s;
}
.proj-breadcrumb-link:hover { color: var(--accent-strong); text-decoration: underline; }
.proj-breadcrumb-sep { color: var(--ink3); font-size: 15px; }
.proj-breadcrumb-cur { color: var(--ink); font-weight: 600; }

/* ── Detail: header card ── */
.proj-detail-header {
  background: linear-gradient(135deg, #0b3591 0%, #1652cc 60%, #2060e8 100%);
  border-radius: var(--radius-lg); padding: 28px 28px 24px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  box-shadow: 0 6px 24px rgba(11,53,145,0.22);
  border: none;
}
.proj-detail-meta { display: flex; flex-direction: column; gap: 8px; }
.proj-detail-name {
  font-size: 24px; font-weight: 800; color: #fff; margin: 0;
  letter-spacing: -0.4px; line-height: 1.2;
}
.proj-detail-customer {
  font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 500;
}
.proj-detail-meta-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.proj-deadline-meta { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6); }
.proj-deadline--overdue { color: #fca5a5; }
.proj-detail-header .status-pill {
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.15);
  color: #fff;
  backdrop-filter: blur(4px);
}
.proj-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.proj-detail-actions .ghost-button {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);
  color: #fff; backdrop-filter: blur(4px);
  font-size: 13px;
}
.proj-detail-actions .ghost-button:hover {
  background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.6);
  color: #fff;
}
.proj-detail-actions .danger-lite {
  background: rgba(191,52,45,0.25); border-color: rgba(255,120,120,0.4);
  color: #ffb3b0;
}
.proj-detail-actions .danger-lite:hover {
  background: rgba(191,52,45,0.45); color: #fff;
}
.proj-detail-actions .convert-action {
  background: rgba(255,255,255,0.9); color: var(--accent-strong);
  border-color: transparent; font-weight: 600;
}
.proj-detail-actions .convert-action:hover { background: #fff; }

/* ── Detail: tabs ── */
.proj-detail-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-sm);
}
.proj-tab-btn {
  padding: 13px 20px; border: none; background: none;
  font-size: 14px; font-weight: 500; color: var(--ink2); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.proj-tab-btn:hover { color: var(--accent); }
.proj-tab-btn.active {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 700;
}
.proj-tab-content {
  background: var(--surface);
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.proj-tab-content > .panel {
  border: none; border-radius: 0; box-shadow: none;
}

/* ── Detail: overview grid ── */
.proj-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.proj-info-card {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
}
.proj-info-card:last-child { border-right: none; }
.proj-info-card-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink2);
  margin: 0 0 16px; display: flex; align-items: center; gap: 6px;
}
.proj-info-card-title::before {
  content: ""; display: block; width: 12px; height: 12px;
  border-radius: 3px; background: var(--accent-soft);
  border: 2px solid var(--accent);
  flex-shrink: 0;
}
.proj-info-row {
  display: flex; align-items: flex-start; gap: 0;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.proj-info-row:last-child { border-bottom: none; }
.proj-info-row--col { flex-direction: column; gap: 6px; }
.proj-info-label {
  color: var(--ink3); min-width: 130px; flex-shrink: 0;
  font-size: 12px; font-weight: 600;
  padding-top: 1px;
}
.proj-info-value { color: var(--ink); font-size: 13px; font-weight: 500; }

/* ── Budget progress bar ── */
.proj-budget-wrap { min-width: 140px; }
.proj-budget-label { font-size: 12px; color: var(--ink); margin-bottom: 5px; }
.proj-budget-bar-track {
  height: 7px; background: var(--bg); border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line);
}
.proj-budget-bar {
  height: 100%; border-radius: 4px; transition: width 0.4s ease;
}
.proj-budget-bar--ok   { background: linear-gradient(90deg, #22c55e, #16a34a); }
.proj-budget-bar--warn { background: linear-gradient(90deg, #f59e0b, #d97706); }
.proj-budget-bar--over { background: linear-gradient(90deg, #ef4444, #bf342d); }
.proj-budget-over-label {
  font-size: 11px; color: var(--danger); font-weight: 700; margin-top: 3px;
  display: block;
}

/* ── Landing + Auth pages — Tablet ───────────────────────────────────────── */
@media (max-width: 960px) {
  .auth-page-left { flex: 0 0 46%; padding: 48px 40px; }
  .auth-page-right { flex: 0 0 54%; padding: 48px 40px; }
  .ap-brand-headline { font-size: 28px; }
  .lp-feat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Landing + Auth pages — Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Landing */
  .lp-nav { padding: 14px 20px; }
  .lp-nav-right { gap: 8px; }
  .lp-nav-signin, .lp-nav-getstarted { height: 34px; padding: 0 12px; font-size: 13px; }
  .lp-hero { padding: 64px 24px 72px; }
  .lp-hero-h1 { font-size: 36px; letter-spacing: -1px; }
  .lp-hero-body { font-size: 15px; }
  .lp-feat-grid { grid-template-columns: 1fr; }
  .lp-features { padding: 56px 24px 64px; }
  .lp-footer { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Auth pages: stack - hide brand panel, full-width form */
  .auth-page-bg { flex-direction: column; }
  .auth-page-left { display: none; }
  .auth-page-right {
    flex: 1; padding: 48px 24px 60px;
    background: linear-gradient(160deg, #f0f4ff 0%, #e8efff 60%, #fff 100%);
  }
  .auth-page-panel {
    background: #fff; border-radius: 20px;
    padding: 36px 28px; max-width: 100%;
    box-shadow: 0 12px 48px rgba(11,53,145,0.12);
  }
}

/* ── Mobile Responsive ───────────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* Sidebar becomes a slide-in drawer */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 280px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 1001;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px;
    gap: 16px;
    border-right: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,0.35);
  }

  /* Show backdrop */
  .sidebar-backdrop { display: block; }

  /* Show hamburger */
  .sidebar-toggle { display: flex; }

  /* Restore sidebar children hidden by previous breakpoints */
  .brand-block { display: flex; }
  .sidebar-card { display: block; }
  .sidebar-account { display: flex; }
  .nav-group-label { display: flex; }

  /* Nav list stays vertical */
  .nav-list {
    display: grid;
    gap: 12px;
    width: auto;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .nav-item, .nav-item.nested {
    padding: 9px 10px;
    font-size: 13px;
    border-radius: 8px;
    white-space: normal;
    flex-shrink: 1;
  }

  .nav-group {
    display: grid;
    gap: 3px;
  }

  .workspace {
    grid-column: 1;
    grid-row: 2;
    padding-bottom: 0;
  }

  /* Topbar */
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .topbar-search { width: 100%; order: 3; }
  .topbar-search input { width: 100%; }

  /* Dashboard summary bar stacks to 1 column */
  .zoho-summary-bar {
    grid-template-columns: 1fr;
  }

  .zoho-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .zoho-widget-wide {
    grid-column: span 1;
  }

  /* Reports module stacks */
  .reports-module {
    grid-template-columns: 1fr;
  }

  .reports-catalog {
    position: static;
    max-height: none;
  }

  .reports-home-grid {
    grid-template-columns: 1fr;
  }

  /* Report filter bar stacks */
  .report-filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  /* Cashflow stacks */
  .zoho-cashflow {
    grid-template-columns: 1fr;
  }

  /* Modals go full screen */
  .new-customer-modal .ncm-card,
  .quick-vendor-modal .qvm-card,
  .quick-item-modal .qim-card,
  .modal-card {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .new-customer-modal,
  .quick-vendor-modal,
  .quick-item-modal,
  .modal-overlay {
    padding: 0;
  }

  /* Auth card fills screen */
  .auth-card {
    padding: 28px 20px 24px;
  }

  /* Invoice/bill line tables scroll horizontally */
  .invoice-preview-table,
  .report-table,
  .report-statement,
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Module summary tiles stack */
  .module-summary-row {
    flex-wrap: wrap;
  }

  .module-summary-tile {
    flex: 1 1 calc(50% - 8px);
  }

  /* COA and form grids go single column */
  .qvm-contact-row,
  .qvm-phone-row {
    flex-direction: column;
  }

  .zoho-money-split {
    grid-template-columns: 1fr;
  }

  .report-action-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .report-actions {
    width: 100%;
  }
}

/* ── Timesheet (Zoho-style) ──────────────────────────────────────────────────── */
.ts-module {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.ts-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.ts-log-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ts-log-btn svg { width: 14px; height: 14px; }
.ts-log-btn:hover { background: var(--accent-strong); }

.ts-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.ts-summary-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px;
  border-right: 1px solid var(--line);
}
.ts-summary-tile:last-child { border-right: none; }

.ts-tile-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink3);
}

.ts-tile-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.ts-tile-blue { color: var(--accent); }
.ts-tile-green { color: var(--success); }

.ts-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  gap: 12px;
  flex-wrap: wrap;
}

.ts-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ts-filter-select {
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6b88' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.15s;
}
.ts-filter-select:focus { outline: none; border-color: var(--accent); }

.ts-filter-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-entry-count {
  font-size: 12px;
  color: var(--ink3);
  white-space: nowrap;
}

.ts-perpage-label {
  font-size: 12px;
  color: var(--ink2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ts-perpage-select {
  padding: 5px 24px 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6b88' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
}

.ts-table-wrap {
  background: var(--surface);
  overflow-x: auto;
}

.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ts-table thead tr {
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.ts-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink3);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.ts-th-check { width: 36px; }
.ts-th-sort {
  cursor: pointer;
  user-select: none;
}
.ts-th-sort:hover { color: var(--accent); }

.ts-sort-icon {
  width: 10px;
  height: 14px;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--ink3);
  opacity: 0.5;
  display: inline-block;
}
.ts-sort-icon.ts-sort-active {
  color: var(--accent);
  opacity: 1;
}

.ts-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}
.ts-table tbody tr:last-child { border-bottom: none; }
.ts-table tbody tr:hover { background: var(--accent-soft); }

.ts-table td {
  padding: 11px 14px;
  color: var(--ink);
  vertical-align: middle;
}

.ts-td-check { width: 36px; }
.ts-td-date { color: var(--ink2); white-space: nowrap; }
.ts-td-project { font-weight: 500; }
.ts-td-task { color: var(--ink2); max-width: 220px; }

.ts-td-hours {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.ts-td-hours svg { width: 14px; height: 14px; color: var(--ink3); flex-shrink: 0; }

.ts-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ts-pill-billable    { background: #e8f5ff; color: #1a6fbf; }
.ts-pill-nonbillable { background: var(--surface-soft); color: var(--ink3); }
.ts-pill-unbilled    { background: var(--warning-soft); color: var(--warning); }
.ts-pill-billed      { background: var(--success-soft); color: #16a34a; }

.ts-td-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.ts-table tbody tr:hover .ts-td-actions { opacity: 1; }

.ts-act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ts-act-btn svg { width: 13px; height: 13px; }
.ts-act-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ts-act-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.ts-empty-cell { padding: 48px 24px; }
.ts-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: var(--ink3);
}
.ts-empty-state svg { width: 48px; height: 48px; opacity: 0.4; }
.ts-empty-state p { margin: 0; font-size: 14px; }

.ts-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 10px;
}

.ts-page-info {
  font-size: 12px;
  color: var(--ink3);
}

.ts-page-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ts-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.ts-page-btn svg { width: 8px; height: 12px; }
.ts-page-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ts-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ts-page-btn.ts-page-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.ts-page-ellipsis {
  padding: 0 4px;
  font-size: 13px;
  color: var(--ink3);
  line-height: 32px;
}

@media (max-width: 768px) {
  .ts-summary-bar { grid-template-columns: repeat(2, 1fr); }
  .ts-filter-bar { flex-direction: column; align-items: flex-start; }
  .ts-header { padding: 14px 16px 12px; }
  .ts-summary-tile { padding: 12px 16px; }
  .ts-table th, .ts-table td { padding: 9px 10px; }
  .ts-td-task { max-width: 120px; }
  .ts-td-actions { opacity: 1; }
  .ts-pagination { flex-direction: column; align-items: flex-start; }
}

/* ── Settings ────────────────────────────────────────────────────────────────── */
.stg-layout {
  display: flex;
  min-height: calc(100vh - 56px);
  background: var(--bg);
}
.stg-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.stg-sidebar-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stg-sidebar-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.stg-sidebar-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
}
/* stg-sidebar-header::before removed — replaced with kicker text */
.stg-nav {
  padding: 10px 0 16px;
  flex: 1;
  overflow-y: auto;
}
.stg-nav-group { margin-bottom: 6px; }
.stg-nav-group-label {
  padding: 10px 20px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink3);
}
.stg-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px 8px 18px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  font-size: 13px;
  color: var(--ink2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  border-radius: 0;
}
.stg-nav-item:hover {
  background: var(--accent-soft);
  color: var(--ink);
}
.stg-nav-item.stg-nav-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.stg-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bg);
  transition: background 0.12s, color 0.12s;
}
.stg-nav-icon svg { width: 14px; height: 14px; }
.stg-main {
  flex: 1;
  padding: 28px 36px;
  overflow-y: auto;
}
.stg-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink3);
  margin-bottom: 14px;
}
.stg-breadcrumb-sep { color: var(--line-strong); }
.stg-breadcrumb-current { color: var(--ink2); font-weight: 500; }
.stg-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 760px;
  box-shadow: var(--shadow-sm);
}
.stg-content-header {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.stg-content-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}
.stg-content-icon svg { width: 20px; height: 20px; }
.stg-content-text { flex: 1; min-width: 0; }
.stg-content-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.stg-content-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.5;
}
.stg-form {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stg-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stg-card-header {
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
}
.stg-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stg-copy {
  margin: 0;
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
}
.stg-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stg-backup-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--ink2);
  font-size: 12px;
}
.stg-backup-meta strong {
  color: var(--ink);
  font-size: 13px;
}
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 24px 24px;
}
.role-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}
.role-card--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.role-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.role-card-head strong {
  color: var(--ink);
}
.role-card-head span {
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
}
.role-card p {
  margin: 8px 0 12px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.5;
}
.role-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.role-perms span {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
}
.role-perms .allowed {
  background: var(--success-soft);
  color: var(--success);
}
.role-perms .blocked {
  background: var(--danger-soft);
  color: var(--danger);
}
.health-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.health-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
}
.health-card span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.health-card strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 22px;
}
.health-card--healthy {
  border-color: rgba(34, 197, 94, 0.35);
  background: var(--success-soft);
}
.health-card--review {
  border-color: rgba(245, 158, 11, 0.35);
  background: var(--warning-soft);
}
.health-card--needs-attention {
  border-color: rgba(220, 38, 38, 0.35);
  background: var(--danger-soft);
}
.stg-form-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.stg-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.stg-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stg-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
}
.stg-req { color: var(--danger); }
.stg-input {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.stg-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32, 96, 232, 0.1);
}
.stg-textarea { resize: vertical; min-height: 80px; }
.stg-hint { font-size: 11px; color: var(--ink3); line-height: 1.4; }
/* ── Team Members list ── */
.team-member-list { display: flex; flex-direction: column; gap: 12px; }
.team-member-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-soft);
}
.team-member-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.team-member-info { flex: 1; min-width: 0; }
.team-member-email { font-size: 14px; font-weight: 600; color: var(--ink); }
.team-member-meta { font-size: 12px; color: var(--ink2); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
[data-theme="dark"] .team-member-row { background: #1a2236; border-color: #2d3f5a; }

.stg-info-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 8px;
  font-size: 13px; line-height: 1.5;
}
.stg-info-chip--green { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.stg-info-chip--amber { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
[data-theme="dark"] .stg-info-chip--green { background: rgba(22,163,74,0.1); color: #4ade80; border-color: rgba(74,222,128,0.2); }
[data-theme="dark"] .stg-info-chip--amber { background: rgba(217,119,6,0.1); color: #fbbf24; border-color: rgba(251,191,36,0.2); }
.stg-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}
.stg-save-btn {
  padding: 9px 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.stg-save-btn:hover { background: var(--accent-strong); }
.stg-discard-btn {
  padding: 9px 18px;
  background: none;
  color: var(--ink2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stg-discard-btn:hover { background: var(--bg); border-color: var(--ink3); color: var(--ink); }
.stg-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 0 6px;
}
.stg-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  border: 2px dashed rgba(32,96,232,0.3);
  letter-spacing: -1px;
}
.stg-avatar-meta { display: flex; flex-direction: column; gap: 3px; }
.stg-avatar-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.stg-avatar-sub { font-size: 11.5px; color: var(--ink3); }
.stg-info-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  border: 1px solid rgba(32,96,232,0.12);
  font-size: 12.5px;
  color: var(--ink2);
  line-height: 1.5;
}
.stg-danger-zone {
  border: 1px solid rgba(191,52,45,0.2);
  border-radius: var(--radius);
  overflow: hidden;
}
.stg-danger-header {
  padding: 10px 16px;
  background: var(--danger-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--danger);
}
.stg-danger-body {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
}
.stg-danger-body p { margin: 0; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.stg-danger-btn {
  padding: 8px 16px;
  background: none;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.stg-danger-btn:hover { background: var(--danger); color: #fff; }
/* Recurring table in settings panel */
.stg-panel .data-table-wrap,
.stg-panel table.data-table {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

@media (max-width: 900px) {
  .stg-layout { flex-direction: column; }
  .stg-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .stg-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 12px; }
  .stg-nav-group { display: contents; }
  .stg-nav-group-label { display: none; }
  .stg-nav-item { width: auto; border-left: none; border-bottom: 2px solid transparent; border-radius: var(--radius); padding: 7px 14px; }
  .stg-nav-item.stg-nav-active { border-bottom-color: var(--accent); border-left-color: transparent; }
  .stg-main { padding: 16px; }
  .stg-field-row { grid-template-columns: 1fr; }
  .stg-content-header { padding: 16px 18px; }
  .stg-form { padding: 16px 18px; }
  .stg-form-actions { padding: 12px 18px; }
}

/* ── Dark Mode ───────────────────────────────────────────────────────────────── */

/* Root element inherits page background */
[data-theme="dark"],
[data-theme="dark"] html,
[data-theme="dark"] body { background: #0d1117; color: #f0f4ff; }

[data-theme="dark"] {
  /* ─ Surface elevation — neutral dark, minimal blue saturation ─ */
  --bg:           #0d1117;   /* page canvas: near-black, subtle cool tint */
  --surface:      #161b22;   /* cards/panels: clearly lighter than bg (+7 luminance) */
  --surface-soft: #1e2530;   /* hover, nested surface, table rows */
  --surface-tint: #0d1a11;   /* success/teal tint areas */

  /* ─ Borders — visible but not harsh ─ */
  --line:         #2d3748;   /* standard divider — clearly visible */
  --line-strong:  #3a4a5e;   /* emphasized border */

  /* ─ Typography — strong contrast hierarchy ─ */
  --ink:          #f0f4ff;   /* primary: near-white, crisp */
  --ink2:         #8b9eb8;   /* secondary: readable gray-blue */
  --ink3:         #4e6278;   /* muted/disabled */
  --muted:        #8b9eb8;

  /* ─ Brand accent ─ */
  --accent:       #58a6ff;
  --accent-strong:#388bfd;
  --accent-soft:  #0d1f3c;

  /* ─ Semantic surfaces ─ */
  --teal-soft:    #0d1a11;
  --success-soft: #0d1a11;
  --warning-soft: #1a1500;
  --danger-soft:  #1c0a0a;
  --blue-soft:    #0d1f3c;

  /* ─ Shadows — stronger for better depth perception ─ */
  --shadow:       0 8px 32px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);

  /* ─ Chart colors ─ */
  --chart-1: #5a9cf8;
  --chart-2: #30d394;
  --chart-3: #fbbf24;
  --chart-4: #93c5fd;
  --chart-5: #6ee7b7;
}

/* ── Sidebar — flat dark, professional ── */
[data-theme="dark"] .sidebar {
  background: #0a0e16;
  border-right: 1px solid #1e2533;
  color: #c9d1d9;
  box-shadow: none;
}
[data-theme="dark"] .sidebar-nav { background: transparent; }
[data-theme="dark"] .brand-block {
  border-bottom: 1px solid #1e2533;
  padding-bottom: 14px;
  margin-bottom: 4px;
}
[data-theme="dark"] .brand-mark {
  background: transparent;
}
[data-theme="dark"] .sidebar .eyebrow { color: rgba(255,255,255,0.22); }
[data-theme="dark"] .nav-group + .nav-group {
  border-top: 1px solid #1e2533;
  padding-top: 8px;
  margin-top: 4px;
}
[data-theme="dark"] .nav-group-label {
  color: #484f58;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="dark"] .nav-item {
  color: #8b949e;
  font-size: 13.5px;
}
[data-theme="dark"] .nav-item::before {
  background: #161b22;
  color: #8b949e;
  border: 1px solid #2d3748;
  font-weight: 700;
}
[data-theme="dark"] .nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: #c9d1d9;
}
[data-theme="dark"] .nav-item:hover::before {
  background: #1e2530;
  color: #c9d1d9;
  border-color: #3a4a5e;
}
[data-theme="dark"] .nav-item.active {
  background: rgba(56,139,253,0.1);
  color: #58a6ff;
}
[data-theme="dark"] .nav-item.active::before {
  background: rgba(56,139,253,0.2);
  color: #58a6ff;
  border-color: rgba(56,139,253,0.4);
}
[data-theme="dark"] .sidebar-card {
  background: #111720;
  border: 1px solid #1e2533;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .sidebar-card strong { color: #e6edf3; }
[data-theme="dark"] .sidebar-mini-grid { color: #484f58; }
[data-theme="dark"] .sidebar-mini-grid b { color: #8b949e; }
[data-theme="dark"] .sidebar-account-label { color: #484f58; }
[data-theme="dark"] .sidebar-logout {
  background: transparent;
  border-color: rgba(220,38,38,0.25);
  color: #f87171;
}
[data-theme="dark"] .sidebar-logout:hover {
  background: rgba(220,38,38,0.1);
  border-color: rgba(220,38,38,0.45);
}
[data-theme="dark"] .sidebar-account { border-top: 1px solid #1e2533; }

/* ── Topbar ── */
[data-theme="dark"] .topbar {
  background: #0d1117;
  border: none;
  border-bottom: 1px solid #21262d;
  border-radius: 0;
  box-shadow: none;
  margin: -18px -22px 0;
  padding: 14px 22px;
  width: calc(100% + 44px);
}
[data-theme="dark"] .topbar h2 {
  color: #e6edf3;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
[data-theme="dark"] .topbar .eyebrow { color: #484f58; font-size: 10px; letter-spacing: 0.08em; }
[data-theme="dark"] .topbar-search input {
  background: #161b22;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 6px;
}
[data-theme="dark"] .topbar-search input:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(56,139,253,0.12); }
[data-theme="dark"] .topbar-search input::placeholder { color: #484f58; }
[data-theme="dark"] .topbar-theme-toggle {
  background: #161b22;
  border: 1px solid #30363d;
  color: #8b949e;
  border-radius: 6px;
}
[data-theme="dark"] .topbar-theme-toggle:hover { background: #1c2128; border-color: #58a6ff; color: #58a6ff; }
[data-theme="dark"] .topbar-logout {
  background: transparent;
  border: 1px solid rgba(248,81,73,0.3);
  color: #f85149;
  border-radius: 6px;
}
[data-theme="dark"] .topbar-logout:hover { background: rgba(248,81,73,0.1); border-color: rgba(248,81,73,0.5); }

/* ── Buttons ── */
[data-theme="dark"] .ghost-button {
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .ghost-button:hover {
  background: #30363d;
  border-color: #8b949e;
  color: #e6edf3;
}
[data-theme="dark"] .primary-button {
  background: #238636;
  border: 1px solid rgba(240,246,252,0.1);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .primary-button:hover { background: #2ea043; }
[data-theme="dark"] .danger-button {
  background: transparent;
  border: 1px solid rgba(248,81,73,0.3);
  color: #f85149;
}
[data-theme="dark"] .danger-button:hover { background: rgba(248,81,73,0.1); border-color: rgba(248,81,73,0.5); }
[data-theme="dark"] .table-action {
  background: transparent;
  border: 1px solid #30363d;
  color: #58a6ff;
}
[data-theme="dark"] .table-action:hover { background: rgba(56,139,253,0.1); border-color: #58a6ff; }

/* ── Tables ── */
[data-theme="dark"] .table-shell {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}
[data-theme="dark"] thead th {
  background: #161b22 !important;
  color: #8b949e !important;
  border-bottom: 1px solid #21262d !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
}
[data-theme="dark"] tbody tr { border-bottom: 1px solid #21262d; }
[data-theme="dark"] tbody tr:hover { background: #1c2128 !important; }
[data-theme="dark"] th, [data-theme="dark"] td { border-bottom-color: #21262d; color: #c9d1d9; }

/* ── Forms & inputs ── */
[data-theme="dark"] .field-input,
[data-theme="dark"] .je-field,
[data-theme="dark"] .je-select,
[data-theme="dark"] .je-input,
[data-theme="dark"] .bill-account-select,
[data-theme="dark"] .bill-vat-select {
  background: #1a2236;
  border-color: #2d3f5a;
  color: #e2e8f0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}
[data-theme="dark"] .field-input:focus,
[data-theme="dark"] .je-field:focus,
[data-theme="dark"] .je-select:focus,
[data-theme="dark"] .je-input:focus {
  outline: none;
  border-color: #4d8ff8;
  background: #1e293b;
  box-shadow: 0 0 0 3px rgba(77,143,248,0.18), inset 0 1px 2px rgba(0,0,0,0.12);
}
[data-theme="dark"] .field-input::placeholder,
[data-theme="dark"] .je-input::placeholder { color: #4a5f7a; }
[data-theme="dark"] .form-row label { color: #7e99b8; font-weight: 500; }
[data-theme="dark"] select option { background: #1a2236; color: #e2e8f0; }

/* ── Item form section panels ── */
/* ── Item form — full dark mode override ── */
[data-theme="dark"] .item-create-panel {
  background: #131b2a !important;
  border-color: #1e2d44 !important;
}
[data-theme="dark"] .item-modal-header {
  background: #0f1623 !important;
  border-bottom-color: #1e2d44 !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .item-modal-header h3 { color: #e2e8f0 !important; }
[data-theme="dark"] .item-modal-close { color: #7e99b8 !important; }
[data-theme="dark"] .item-modal-close:hover { background: #1a2840 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .item-title-icon { background: rgba(77,143,248,0.14) !important; color: #4d8ff8 !important; }

[data-theme="dark"] .item-modal-body {
  background: #111827 !important;
}
[data-theme="dark"] .item-main-grid {
  background: #161e2e !important;
  border-color: #1e2d44 !important;
}
[data-theme="dark"] .item-modal-section {
  background: #161e2e !important;
  border-color: #1e2d44 !important;
}
[data-theme="dark"] .item-field-line label,
[data-theme="dark"] .item-field-line .item-line-label,
[data-theme="dark"] .required-label { color: #7e99b8 !important; }
[data-theme="dark"] .item-field-line input,
[data-theme="dark"] .item-field-line select,
[data-theme="dark"] .item-field-line textarea {
  background: #1a2236 !important;
  border-color: #2d3f5a !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
}
[data-theme="dark"] .item-field-line input:focus,
[data-theme="dark"] .item-field-line select:focus {
  border-color: #4d8ff8 !important;
  box-shadow: 0 0 0 3px rgba(77,143,248,0.18) !important;
  background: #1e293b !important;
}

[data-theme="dark"] .item-section-hd-title { color: #94afd4 !important; }
[data-theme="dark"] .item-section-hd-note  { color: #4a5f7a !important; }
[data-theme="dark"] .item-section-icon { background: rgba(77,143,248,0.12) !important; color: #4d8ff8 !important; }
[data-theme="dark"] .item-type-seg { background: #0f1623 !important; border-color: #2d3f5a !important; }
[data-theme="dark"] .item-type-btn { color: #7e99b8 !important; background: transparent !important; }
[data-theme="dark"] .item-type-btn.active { background: #1e3a6e !important; color: #7aa8f7 !important; border-color: #2d5bb5 !important; }

[data-theme="dark"] .item-image-upload,
[data-theme="dark"] .item-add-image {
  background: #0f1623 !important;
  border-color: #2d3f5a !important;
  color: #4a5f7a !important;
}
[data-theme="dark"] .item-image-upload:hover,
[data-theme="dark"] .item-add-image:hover { border-color: #4d8ff8 !important; background: #1a2840 !important; }

[data-theme="dark"] .item-modal-actions {
  background: #0f1623 !important;
  border-top-color: #1e2d44 !important;
}

/* money-input inside item form */
[data-theme="dark"] .item-modal-section .money-input,
[data-theme="dark"] .item-main-grid .money-input {
  background: #1a2236 !important;
  border-color: #2d3f5a !important;
}
[data-theme="dark"] .item-modal-section .money-input input,
[data-theme="dark"] .item-main-grid .money-input input { background: #1a2236 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .item-modal-section .money-currency,
[data-theme="dark"] .item-main-grid .money-currency { background: #1e2d44 !important; color: #7e99b8 !important; border-right-color: #2d3f5a !important; }

/* ── Modals ── */
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.75); }
[data-theme="dark"] .modal-card { background: #161b22; border: 1px solid #3a4a5e; box-shadow: 0 24px 72px rgba(0,4,20,0.88); }
[data-theme="dark"] .modal-header { border-bottom-color: #2d3748; }
[data-theme="dark"] .modal-footer { border-top-color: #2d3748; }

/* ── Status pills ── */
[data-theme="dark"] .status-draft,
[data-theme="dark"] .status-inactive,
[data-theme="dark"] .status-void { background: #1e2530; color: #8b9ab5; }
[data-theme="dark"] .status-sent,
[data-theme="dark"] .status-approved,
[data-theme="dark"] .status-pending { background: #0d1f3c; color: #7aa2f7; }

/* ── Dashboard tiles ── */
[data-theme="dark"] .zoho-summary-tile--blue   { background: linear-gradient(150deg, #141e32 0%, #192846 100%); border-color: #2d3748; }
[data-theme="dark"] .zoho-summary-tile--orange { background: linear-gradient(150deg, #211700 0%, #2b1e00 100%); border-color: #2e1f00; }
[data-theme="dark"] .zoho-summary-tile--green  { background: linear-gradient(150deg, #0c1f14 0%, #102616 100%); border-color: #153320; }
[data-theme="dark"] .zoho-summary-tile:hover { box-shadow: 0 8px 32px rgba(0,4,20,0.65); transform: translateY(-1px); }

/* ── Setup / getting started ── */
[data-theme="dark"] .setup-step.done { border-color: #163325; background: #0c1f14; }
[data-theme="dark"] .step-check { background: #161b22; }
[data-theme="dark"] .progress-track { background: #2d3748; }

/* ── Panels & cards ── */
[data-theme="dark"] .panel { background: #111827; border-color: #1e293b; box-shadow: 0 2px 16px rgba(0,0,0,0.32); }
/* ── Navigation ── */

/* Period / date filter pill buttons */
[data-theme="dark"] .period-btn {
  background: #1e2530;
  border-color: #3a4a5e;
  color: #4e6278;
}
[data-theme="dark"] .period-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .period-btn--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Status filter bar (already has overrides, reinforce) */
[data-theme="dark"] .status-filter-bar { border-color: #2d3748; }

/* pmade / payments-made filter tabs */
[data-theme="dark"] .pmade-filter-tabs button {
  background: #1e2530;
  border-color: #3a4a5e;
  color: #8b9eb8;
}
[data-theme="dark"] .pmade-filter-tabs button.active {
  background: #0d1f3c;
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="dark"] .pmade-search input {
  background: #0d1117;
  border-color: #3a4a5e;
  color: #f0f4ff;
}

/* Project detail tabs */
[data-theme="dark"] .proj-detail-tabs {
  background: #161b22;
  border-color: #2d3748;
}
[data-theme="dark"] .proj-tab-btn { color: #4e6278; }
[data-theme="dark"] .proj-tab-btn:hover { color: var(--accent); }
[data-theme="dark"] .proj-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .proj-tab-content {
  background: #161b22;
  border-color: #2d3748;
}

/* Customer / item tab bars */
[data-theme="dark"] .customer-tab-button { border-bottom-color: #2d3748; }
[data-theme="dark"] .customer-tab-button.active::after { background: var(--accent); }

/* Keyboard shortcut panel */
[data-theme="dark"] .kbd-card {
  background: #161b22;
  border: 1px solid #3a4a5e;
  box-shadow: 0 12px 48px rgba(0,0,0,0.65);
}
[data-theme="dark"] .kbd-head { border-bottom-color: #2d3748; }
[data-theme="dark"] .kbd-head h3 { color: #f0f4ff; }
[data-theme="dark"] .kbd-close-btn { color: #4e6278; }
[data-theme="dark"] .kbd-close-btn:hover { background: #1e2530; }
[data-theme="dark"] .kbd-row { color: #bccedd; }
[data-theme="dark"] .kbd-row span { color: #445568; }
[data-theme="dark"] .kbd-section-label { color: #445568; border-bottom-color: #2d3748; }
[data-theme="dark"] kbd {
  background: #1e2530;
  border-color: #445568;
  color: #bccedd;
}

/* Sidebar account area */

/* Settings page */
[data-theme="dark"] .stg-layout { background: #0d1117; }
[data-theme="dark"] .stg-sidebar { background: #0d1117; border-right-color: #2d3748; }
[data-theme="dark"] .stg-sidebar-header { color: #f0f4ff; border-bottom-color: #2d3748; }
[data-theme="dark"] .stg-nav-group-label { color: #445568; }
[data-theme="dark"] .stg-nav-icon { background: #1e2530; }
[data-theme="dark"] .stg-nav-item { color: #8b9eb8; }
[data-theme="dark"] .stg-nav-item:hover { background: #1e2530; color: #bccedd; }
[data-theme="dark"] .stg-nav-item.stg-nav-active { background: #0d1f3c; border-left-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .stg-nav-item.stg-nav-active .stg-nav-icon { background: rgba(32,96,232,0.15); color: var(--accent); }
[data-theme="dark"] .stg-panel { background: #161b22; border-color: #2d3748; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
[data-theme="dark"] .stg-content-header { border-bottom-color: #2d3748; }
[data-theme="dark"] .stg-content-title { color: #f0f4ff; }
[data-theme="dark"] .stg-content-desc { color: #4e6278; }
[data-theme="dark"] .stg-card { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .stg-card-header { background: #0d1117; border-bottom-color: #2d3748; color: #445568; }
[data-theme="dark"] .stg-card-body { background: #161b22; }
[data-theme="dark"] .stg-form-section-label { color: #445568; border-bottom-color: #2d3748; }
[data-theme="dark"] .stg-input { background: #1a2236; border-color: #2d3f5a; color: #e2e8f0; }
[data-theme="dark"] .stg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(32,96,232,0.15); }
[data-theme="dark"] .stg-hint { color: #445568; }
[data-theme="dark"] .stg-info-row { background: #0d1f3c; border-color: rgba(32,96,232,0.2); color: #8b9eb8; }
[data-theme="dark"] .stg-danger-zone { border-color: rgba(191,52,45,0.25); }
[data-theme="dark"] .stg-avatar { background: #0d1f3c; border-color: rgba(32,96,232,0.2); }
[data-theme="dark"] .stg-breadcrumb { color: #445568; }
[data-theme="dark"] .stg-breadcrumb-current { color: #8b9eb8; }

/* Branding logo box */
[data-theme="dark"] .brand-logo-box { background: #0d1117; border-color: #3a4a5e; color: #445568; }

/* Sub-plan cards */
[data-theme="dark"] .sub-plan-info { border-color: #2d3748; }
[data-theme="dark"] .sub-plan-info--pro { background: #0d1f3c; border-color: var(--accent); }
[data-theme="dark"] .sub-plan-info-desc { color: #4e6278; }

/* Appearance theme preview cards */
[data-theme="dark"] .appear-theme-card { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .appear-theme-card.active { background: #0d1f3c; border-color: var(--accent); }
[data-theme="dark"] .appear-theme-preview--auto { background: linear-gradient(90deg, #1e2530 50%, #0d1117 50%); }

/* Subscription badge */
[data-theme="dark"] .subscription-badge { background: #0d2218; color: #4ade80; border-color: #1a3d2b; }

/* Quick-view panel */
[data-theme="dark"] .qv-backdrop { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .qv-panel {
  background: #161b22;
  border-left: 1px solid #2d3748;
  box-shadow: -8px 0 48px rgba(0,0,0,0.6);
}
[data-theme="dark"] .qv-panel-header {
  background: #0d1117;
  border-bottom: 1px solid #2d3748;
}
[data-theme="dark"] .qv-panel-header h3 { color: #f0f4ff; }
[data-theme="dark"] .qv-close-btn { color: #4e6278; }
[data-theme="dark"] .qv-close-btn:hover { background: #1e2530; color: #bccedd; }
[data-theme="dark"] .qv-panel-body { background: #161b22; }
[data-theme="dark"] .qv-stat { background: #1e2530; border: 1px solid #2d3748; }
[data-theme="dark"] .qv-stat span { color: #445568; }
[data-theme="dark"] .qv-stat strong { color: #f0f4ff; }
[data-theme="dark"] .qv-section-title { color: #445568; }
[data-theme="dark"] .qv-contact { color: #4e6278; }
[data-theme="dark"] .qv-list-row { border-bottom-color: #2d3748; }
[data-theme="dark"] .qv-list-id { color: #bccedd; }
[data-theme="dark"] .qv-list-date { color: #445568; }
[data-theme="dark"] .qv-list-amount { color: #f0f4ff; }
[data-theme="dark"] .qv-empty { color: #445568; }
[data-theme="dark"] .qv-footer-actions { border-top: 1px solid #2d3748; }

/* ── Workspace & panels ── */
[data-theme="dark"] .workspace { background: #0a0f1a; }
[data-theme="dark"] .panel,
[data-theme="dark"] .metric-card {
  background: #111827;
  border: 1px solid #1e293b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.30);
}
[data-theme="dark"] .section-header { border-color: #1e293b; }
[data-theme="dark"] .module-toolbar { background: #111827; border-color: #1e293b; }

/* Dashboard header */
[data-theme="dark"] .dash-header {
  background: #161b22;
  border: 1px solid #21262d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-theme="dark"] .dash-header-actions .ghost-button {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: #c9d1d9;
}
[data-theme="dark"] .dash-header-actions .ghost-button:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  color: #e6edf3;
}
[data-theme="dark"] .dash-header-actions .primary-button { background: #238636; border-color: rgba(240,246,252,0.1); }
[data-theme="dark"] .dash-header-actions .primary-button:hover { background: #2ea043; }

/* Dashboard KPI tiles */
[data-theme="dark"] .zoho-summary-tile {
  border: 1px solid #21262d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dark"] .zoho-summary-tile:hover {
  border-color: #30363d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}

/* Cashflow & income stats */
[data-theme="dark"] .zoho-cashflow-stat--in  { background: #0d2218; border-color: #1a3d2b; }
[data-theme="dark"] .zoho-cashflow-stat--out { background: #1f0c0c; border-color: #3d1a1a; }

/* Activity type badges */
[data-theme="dark"] .zoho-activity-type--invoice { background: #0d1f3c; color: #7aa2f7; }
[data-theme="dark"] .zoho-activity-type--payment { background: #0d2218; color: #4ade80; }
[data-theme="dark"] .zoho-activity-type--bill    { background: #241b00; color: #fbbf24; }
[data-theme="dark"] .zoho-activity-type--expense { background: #2a1030; color: #e879f9; }
[data-theme="dark"] .zoho-activity-type--receipt { background: #1e1040; color: #a78bfa; }
[data-theme="dark"] .zoho-activity-row:hover { background: #1e2530; }

/* Section/module empty states */
[data-theme="dark"] .module-empty-state { background: #161b22; border-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .table-empty-state svg { background: var(--accent-soft); color: var(--accent); opacity: 1; }
[data-theme="dark"] .table-empty-state p { color: #6b7fa3; }

/* Detail pages & item views */
[data-theme="dark"] .item-detail-card,
[data-theme="dark"] .item-detail-header,
[data-theme="dark"] .detail-card { background: #161b22; border-color: #2d3748; }

/* Line editor & inline tables */
[data-theme="dark"] .line-editor { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .line-editor-row { border-color: #2d3748; }
[data-theme="dark"] .line-editor input,
[data-theme="dark"] .line-editor select { background: #1a2236; border-color: #2d3f5a; color: #e2e8f0; }

/* Trial / banner */
[data-theme="dark"] .trial-banner { background: #241b00; border-color: #3d3000; color: #fbbf24; }

/* Confirm / toast */
[data-theme="dark"] .confirm-card { background: #161b22; border: 1px solid #3a4a5e; box-shadow: 0 16px 56px rgba(0,0,0,0.7); }
[data-theme="dark"] .toast { background: #1e2530; border: 1px solid #3a4a5e; color: #f0f4ff; }

/* ── Detail pages ── */

/* Invoice record/detail */
[data-theme="dark"] .invoice-record-shell { background: #0d1117; }
[data-theme="dark"] .invoice-record-list { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .invoice-record-list-item { background: #161b22; border-bottom-color: #2d3748; }
[data-theme="dark"] .invoice-record-list-item:hover,
[data-theme="dark"] .invoice-record-list-item.active { background: #1e2530; }
[data-theme="dark"] .invoice-record-detail { background: #0d1117; }
[data-theme="dark"] .invoice-record-titlebar,
[data-theme="dark"] .invoice-record-toolbar { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .invoice-record-toolbar { background: #1e2530; }
[data-theme="dark"] .invoice-record-toolbar .table-action { border-right-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .invoice-record-toolbar .table-action:hover { background: #0d1f3c; color: #bccedd; }
[data-theme="dark"] .invoice-record-toolbar .primary-lite { color: #7aa2f7; }
[data-theme="dark"] .invoice-next-panel,
[data-theme="dark"] .invoice-payments-panel { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .invoice-next-secondary { background: #1e2530; border-top-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .invoice-next-mark { background: #1e1335; color: #c084fc; }
[data-theme="dark"] .invoice-payments-panel summary { color: #8b9eb8; }
[data-theme="dark"] .invoice-record-list-side strong { color: #f0f4ff; }
[data-theme="dark"] .inv-balance-due { color: #7aa2f7; }
[data-theme="dark"] .invoice-record-overdue { color: #f87171 !important; }
[data-theme="dark"] .invoice-record-check { background: #0d1117; border-color: #3a4a5e; }
[data-theme="dark"] .invoice-more-button,
[data-theme="dark"] .invoice-icon-button { background: #1e2530; color: #8b9eb8; border-color: #3a4a5e; }
[data-theme="dark"] .invoice-more-button:hover,
[data-theme="dark"] .invoice-icon-button:hover { background: #192848; color: #bccedd; }
[data-theme="dark"] .table-action.primary-lite { border-color: #1e3a5f; }
[data-theme="dark"] .invoice-preview-paper { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .invoice-preview-lines th { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .invoice-preview-lines td { border-bottom-color: #2d3748; }
[data-theme="dark"] .invoice-preview-totals .balance { background: #1e2530; color: #f0f4ff; }
[data-theme="dark"] .invoice-preview-title h2 { color: #f0f4ff; }
[data-theme="dark"] .invoice-preview-title b { color: #bccedd; }
[data-theme="dark"] .inline-link-button { color: #7aa2f7; }

/* Item detail */
[data-theme="dark"] .item-detail-hero { background: #0d1f3c; border-bottom-color: #2d3748; }
[data-theme="dark"] .item-detail-topbar { color: #f0f4ff; }
[data-theme="dark"] .item-back-button,
[data-theme="dark"] .item-icon-button { color: #bccedd; border-color: #3a4a5e; background: #161b22; }
[data-theme="dark"] .item-back-button:hover,
[data-theme="dark"] .item-icon-button:hover { background: #1e2530; border-color: #445568; }
[data-theme="dark"] .item-detail-summary h3 { color: #f0f4ff; }
[data-theme="dark"] .item-price-stack span { color: #8b9eb8; }
[data-theme="dark"] .item-price-stack strong { color: #f0f4ff; }
[data-theme="dark"] .item-add-image { background: #161b22; border-color: #3a4a5e; color: #4e6278; }
[data-theme="dark"] .item-add-image:hover { border-color: #445568; }
[data-theme="dark"] .item-detail-tabs { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .item-detail-tab { background: #161b22; color: #8b9eb8; }
[data-theme="dark"] .item-detail-tab:hover { background: #1e2530; }
[data-theme="dark"] .item-detail-tab.active { color: #f0f4ff; border-bottom-color: var(--accent); }
[data-theme="dark"] .item-detail-body { background: #161b22; }
[data-theme="dark"] .item-detail-field { background: #1e2530; border-color: #2d3748; }
[data-theme="dark"] .item-transactions-head select { background: #0d1117; color: #f0f4ff; border-color: #3a4a5e; }
[data-theme="dark"] .item-transaction-tools button { background: #1e2530; color: #bccedd; border-color: #3a4a5e; }
[data-theme="dark"] .item-transaction-empty .empty-icon { border-color: #2d3748; }
[data-theme="dark"] .item-transaction-empty strong { color: #8b9eb8; }

/* Banking / book detail */
[data-theme="dark"] .bk-tab-count { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .bk-txn-header { background: #0d1117; border-color: #2d3748; }
[data-theme="dark"] .bk-txn-desc { color: #bccedd; }

/* Project detail */
[data-theme="dark"] .proj-detail-header {
  background: linear-gradient(135deg, #0d1117 0%, #161b22 55%, #1e2530 100%);
  border-bottom: 1px solid #2d3748;
}
[data-theme="dark"] .proj-detail-name { color: #f0f4ff; }
[data-theme="dark"] .proj-detail-customer { color: #8b9eb8; }
[data-theme="dark"] .proj-detail-header .status-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #bccedd; }
[data-theme="dark"] .proj-detail-actions .ghost-button { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #bccedd; }
[data-theme="dark"] .proj-detail-actions .ghost-button:hover { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .proj-detail-actions .convert-action { background: var(--accent); color: #fff; }
[data-theme="dark"] .proj-detail-actions .convert-action:hover { background: var(--accent-strong); }

/* Sales order detail */
[data-theme="dark"] .so-details-grid { border-color: #2d3748; }
[data-theme="dark"] .so-details-grid .quote-form-line { border-color: #2d3748; }
[data-theme="dark"] .so-details-grid .quote-form-line label { color: #8b9eb8; }
[data-theme="dark"] .so-warehouse-bar { border-bottom-color: var(--accent); color: #8b9eb8; }
[data-theme="dark"] .so-warehouse-bar select { color: #f0f4ff; border-bottom-color: var(--accent); }

/* Payment detail */
[data-theme="dark"] .pmt-details-section { border-bottom-color: #2d3748; }
[data-theme="dark"] .pmt-label { color: #8b9eb8; }
[data-theme="dark"] .pmt-attachments-block { border-top-color: #2d3748; }
[data-theme="dark"] .pmt-form-actions { background: #161b22; border-top-color: #2d3748; }

/* Recurring invoice / credit note detail */
[data-theme="dark"] .ri-details-grid,
[data-theme="dark"] .cn-details-grid { border-color: #2d3748; }
[data-theme="dark"] .ri-details-grid .quote-form-line,
[data-theme="dark"] .cn-details-grid .quote-form-line { border-color: #2d3748; }
[data-theme="dark"] .ri-details-grid .quote-form-line label,
[data-theme="dark"] .cn-details-grid .quote-form-line label { color: #8b9eb8; }
[data-theme="dark"] .ri-total-card { background: #1e2530; border-color: #2d3748; }
[data-theme="dark"] .ri-round-off-row,
[data-theme="dark"] .ri-total-row { border-top-color: #2d3748; }
[data-theme="dark"] .cn-form-actions { background: #161b22; border-top-color: #2d3748; }

/* Bill detail */
[data-theme="dark"] .bill-table-controls { border-color: #2d3748; }
[data-theme="dark"] .bill-inline-label,
[data-theme="dark"] .bill-ctrl-label { color: #8b9eb8; }
[data-theme="dark"] .bill-ctrl-select { border-bottom-color: #3a4a5e; color: #bccedd; }
[data-theme="dark"] .bill-ctrl-select:focus { border-bottom-color: var(--accent); }
[data-theme="dark"] .bill-item-title { color: #f0f4ff; }
[data-theme="dark"] .bill-item-img { border-color: #3a4a5e; color: #445568; }
[data-theme="dark"] .bill-item-select,
[data-theme="dark"] .bill-item-desc { border-bottom-color: #2d3748; color: #bccedd; }
[data-theme="dark"] .bill-item-select:focus,
[data-theme="dark"] .bill-item-desc:focus { border-bottom-color: var(--accent); }
[data-theme="dark"] .bill-num-input { border-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] .bill-amount-cell { color: #f0f4ff; }
[data-theme="dark"] .bill-add-row-btn:hover { background: #0d1f3c; }

/* Journal entry focus rings */
[data-theme="dark"] .je-field:focus,
[data-theme="dark"] .je-select:focus,
[data-theme="dark"] .je-input:focus { outline-color: rgba(32,96,232,0.45); }
[data-theme="dark"] .je-select:hover,
[data-theme="dark"] .je-input:hover { background: #1e293b; }

/* ── Inputs & search fields ── */

/* Report filter bar */
[data-theme="dark"] .report-filter-bar input,
[data-theme="dark"] .report-filter-bar select { background: #1a2236; border-color: #2d3f5a; color: #e2e8f0; }
[data-theme="dark"] .report-filter-bar label { color: #8b9eb8; }

/* Payment amount input */
[data-theme="dark"] .pmt-amount-input { border-color: #2d3f5a; background: #1a2236; }
[data-theme="dark"] .pmt-currency { background: #1e2d44; color: #7e99b8; border-right-color: #2d3f5a; }
[data-theme="dark"] .pmt-amount-input input { background: #1a2236; color: #e2e8f0; }

/* Retainer number stepper */
[data-theme="dark"] .retainer-number-input button { border-color: #3a4a5e; background: #1e2530; color: #bccedd; }
[data-theme="dark"] .retainer-number-input button:hover { background: #192848; }

/* PO number row */
[data-theme="dark"] .po-number-row input { background: var(--bg); }

/* Banking date filter */
[data-theme="dark"] .bk-date-filter { color: #8b9eb8; }
[data-theme="dark"] .bk-caret { color: #445568; }

/* Search field wrapper */
[data-theme="dark"] .search-field input,
[data-theme="dark"] .money-input input { background: #1a2236; border-color: #2d3f5a; color: #e2e8f0; }
[data-theme="dark"] .search-field span { color: var(--accent); background: #1e2530; border-color: #3a4a5e; }

/* RB (recurring bill) search */
[data-theme="dark"] .rb-search-button { background: #0d1f3c; border-color: var(--accent); color: var(--accent); }

/* Period bar buttons & date filters */
[data-theme="dark"] .period-btn,
[data-theme="dark"] .date-filter-btn { background: #1e2530; border-color: #3a4a5e; color: #8b9eb8; }
[data-theme="dark"] .period-btn.active,
[data-theme="dark"] .date-filter-btn.active { background: #0d1f3c; border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .period-btn:hover,
[data-theme="dark"] .date-filter-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Column toggle */
[data-theme="dark"] .column-toggle-grid label { color: #8b9eb8; }
[data-theme="dark"] .column-toggle-grid input[type="checkbox"] { accent-color: var(--accent); }

/* Status badges & pills ── */

/* Core status pills */
[data-theme="dark"] .status-draft,
[data-theme="dark"] .status-inactive,
[data-theme="dark"] .status-void       { background: #1e2530; color: #4e6278; }

[data-theme="dark"] .status-active,
[data-theme="dark"] .status-paid,
[data-theme="dark"] .status-accepted,
[data-theme="dark"] .status-confirmed,
[data-theme="dark"] .status-fulfilled,
[data-theme="dark"] .status-invoiced,
[data-theme="dark"] .status-completed,
[data-theme="dark"] .status-reconciled,
[data-theme="dark"] .status-service    { background: #0d2218; color: #4ade80; }

[data-theme="dark"] .status-sent,
[data-theme="dark"] .status-approved,
[data-theme="dark"] .status-pending    { background: #0d1f3c; color: #7aa2f7; }

[data-theme="dark"] .status-prospect,
[data-theme="dark"] .status-part-paid,
[data-theme="dark"] .status-open,
[data-theme="dark"] .status-paused,
[data-theme="dark"] .status-product,
[data-theme="dark"] .status-revenue,
[data-theme="dark"] .status-asset      { background: #241b00; color: #fbbf24; }

[data-theme="dark"] .status-overdue,
[data-theme="dark"] .status-unpaid,
[data-theme="dark"] .status-declined,
[data-theme="dark"] .status-cancelled,
[data-theme="dark"] .status-unreconciled,
[data-theme="dark"] .status-liability,
[data-theme="dark"] .status-expense    { background: #1f0c0c; color: #f87171; }

[data-theme="dark"] .status-equity,
[data-theme="dark"] .status-customer,
[data-theme="dark"] .status-vendor,
[data-theme="dark"] .status-item,
[data-theme="dark"] .status-estimate,
[data-theme="dark"] .status-invoice,
[data-theme="dark"] .status-payment,
[data-theme="dark"] .status-bill,
[data-theme="dark"] .status-bank,
[data-theme="dark"] .status-account,
[data-theme="dark"] .status-journal,
[data-theme="dark"] .status-settings,
[data-theme="dark"] .status-recurring,
[data-theme="dark"] .status-system     { background: #0d1f3c; color: #7aa2f7; }

/* Timesheet pills */
[data-theme="dark"] .ts-pill-billable    { background: #0d1f3c; color: #7aa2f7; }
[data-theme="dark"] .ts-pill-billed      { background: #0d2218; color: #4ade80; }

/* Nav notification badges */
[data-theme="dark"] .nav-badge { background: #b91c1c; color: #fff; }

/* Status filter bar */
[data-theme="dark"] .status-flt-btn { background: #1e2530; border-color: #3a4a5e; color: #4e6278; }
[data-theme="dark"] .status-flt-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .status-flt-btn--active { background: #e6edf3; border-color: #f0f4ff; color: #0d1117; }

/* Dashboard profit pills */
[data-theme="dark"] .dash-profit-pill--pos { background: rgba(34,197,94,0.18); color: #4ade80; }
[data-theme="dark"] .dash-profit-pill--neg { background: rgba(239,68,68,0.18); color: #f87171; }

/* Subscription status cards */
[data-theme="dark"] .sub-status--trial   { background: #241b00; border-color: #3d3000; }
[data-theme="dark"] .sub-status--active  { background: #0d2218; border-color: #1a3d2b; }
[data-theme="dark"] .sub-status--expired { background: #1f0c0c; border-color: #3d1a1a; }
[data-theme="dark"] .sub-status-label,
[data-theme="dark"] .sub-status-sub      { color: #4e6278; }
[data-theme="dark"] .sub-trial-bar       { background: #2d3748; }

/* ── Buttons ── */

/* Tab buttons */
[data-theme="dark"] .customer-tab-button { color: #8b9eb8; }
[data-theme="dark"] .customer-tab-button.active { color: #f0f4ff; }

/* Close / icon buttons */
[data-theme="dark"] .bill-close-button { color: var(--ink3); }
[data-theme="dark"] .bill-close-button:hover { color: var(--ink); background: var(--danger-soft); }
[data-theme="dark"] .po-close-button,
[data-theme="dark"] .quote-close-button,
[data-theme="dark"] .retainer-close-button,
[data-theme="dark"] .inv-close-button,
[data-theme="dark"] .invoice-close-button,
[data-theme="dark"] .pmt-close-btn,
[data-theme="dark"] .exp-close-button,
[data-theme="dark"] .ri-close-button,
[data-theme="dark"] .cn-close-button,
[data-theme="dark"] .re-close-button,
[data-theme="dark"] .rb-close-button,
[data-theme="dark"] .so-close-button,
[data-theme="dark"] .sr-close-button { color: #4e6278; }
[data-theme="dark"] .pmt-close-btn:hover,
[data-theme="dark"] .exp-close-button:hover { color: #f87171; }

/* Link-style buttons */
[data-theme="dark"] .exp-itemize-btn,
[data-theme="dark"] .po-edit-addr-btn,
[data-theme="dark"] .po-bulk-btn,
[data-theme="dark"] .bill-bulk-actions-btn,
[data-theme="dark"] .customer-link-button { color: var(--accent); }

/* Upload / file buttons */
[data-theme="dark"] .exp-upload-btn { background: var(--surface-soft); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .exp-upload-btn:hover { background: var(--surface-tint); }
[data-theme="dark"] .po-upload-btn { background: var(--surface-soft); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .po-upload-btn:hover { background: var(--surface-tint); }

/* Add-row / add-item buttons */
[data-theme="dark"] .po-add-row-btn,
[data-theme="dark"] .po-bulk-add-btn { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .po-add-row-btn:hover,
[data-theme="dark"] .po-bulk-add-btn:hover { background: var(--accent-soft); }
[data-theme="dark"] .po-vendor-add-btn { color: var(--accent); border-top-color: var(--line); }
[data-theme="dark"] .po-vendor-add-btn:hover { background: var(--accent-soft); }
[data-theme="dark"] .item-picker-add-btn:hover { background: var(--accent-soft); }

/* Vendor picker dropdown */
[data-theme="dark"] .po-vendor-dropdown { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow); }
[data-theme="dark"] .po-vendor-search-wrap { border-bottom-color: var(--line); }
[data-theme="dark"] .po-vendor-search-input { color: var(--ink); }
[data-theme="dark"] .po-vendor-chevron { color: var(--ink3); }
[data-theme="dark"] .po-vendor-list li { color: var(--ink); }
[data-theme="dark"] .po-vendor-list li:hover { background: var(--surface-soft); }

/* Form action bars */
[data-theme="dark"] .exp-form-actions { background: var(--surface); border-top-color: var(--line); }
[data-theme="dark"] .exp-section-divider { background: var(--line); }
[data-theme="dark"] .exp-radio-label { color: var(--ink); }

/* Receipt drop-zone */
[data-theme="dark"] .exp-receipt-dropzone { background: var(--bg); border-color: var(--line-strong); }
[data-theme="dark"] .exp-receipt-title { color: var(--ink); }
[data-theme="dark"] .exp-receipt-note { color: var(--ink3); }

/* Dashboard quick-action buttons */
[data-theme="dark"] .dash-quick-btn { background: #161b22; border-color: #2d3748; color: #bccedd; }
[data-theme="dark"] .dash-quick-btn:hover { background: #0d1f3c; border-color: var(--accent); color: var(--accent); box-shadow: 0 4px 12px rgba(32,96,232,0.15); }

[data-theme="dark"] .dashboard-setup-panel,
[data-theme="dark"] .dashboard-empty-guide,
[data-theme="dark"] .dashboard-empty-chart {
  background: #121923;
  border-color: #2b384b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 18px 40px rgba(0,0,0,0.26);
}

[data-theme="dark"] .dashboard-empty-guide {
  background: linear-gradient(135deg, #121923 0%, #102318 100%);
}

[data-theme="dark"] .dashboard-kicker {
  color: #7aa2f7;
}

[data-theme="dark"] .dashboard-setup-head h3,
[data-theme="dark"] .dashboard-empty-guide h3,
[data-theme="dark"] .dashboard-empty-card strong,
[data-theme="dark"] .dashboard-empty-chart-copy strong,
[data-theme="dark"] .dashboard-setup-copy strong {
  color: #f4f7fb;
}

[data-theme="dark"] .dashboard-setup-head strong {
  color: #8ab4ff;
}

[data-theme="dark"] .dashboard-setup-progress,
[data-theme="dark"] .dashboard-empty-chart-bars {
  background: #172130;
  border-color: #344257;
}

[data-theme="dark"] .dashboard-setup-step,
[data-theme="dark"] .dashboard-empty-action {
  background: #182232;
  border-color: #2c3a50;
  color: #edf3fb;
}

[data-theme="dark"] .dashboard-setup-step:hover,
[data-theme="dark"] .dashboard-empty-action:hover {
  background: #202c3d;
  border-color: var(--accent);
}

[data-theme="dark"] .dashboard-setup-step.is-done {
  background: #0c1f14;
  border-color: #1f6a4b;
}

[data-theme="dark"] .dashboard-setup-check {
  background: #111923;
  color: #9aa9bb;
}

[data-theme="dark"] .dashboard-setup-step.is-done .dashboard-setup-check {
  background: #238636;
  color: #fff;
}

[data-theme="dark"] .dashboard-empty-guide p,
[data-theme="dark"] .dashboard-empty-card span,
[data-theme="dark"] .dashboard-empty-chart-copy span,
[data-theme="dark"] .dashboard-setup-copy small,
[data-theme="dark"] .zoho-watch-row span small {
  color: #9aa9bb;
}

/* ── Charts & Graphs ── */

/* Bar chart baselines */
[data-theme="dark"] .zoho-flow-bars,
[data-theme="dark"] .zoho-income-bars { border-bottom-color: #3a4a5e; }
[data-theme="dark"] .zoho-flow-month b,
[data-theme="dark"] .zoho-income-month b { color: #445568; }

/* Income/expense/profit stat tiles */
[data-theme="dark"] .zoho-income-stat--income  { background: #0d2218; border-color: #1a3d2b; }
[data-theme="dark"] .zoho-income-stat--expense { background: #1f0c0c; border-color: #3d1a1a; }
[data-theme="dark"] .zoho-income-stat--profit  { background: #0d1f3c; border-color: #1e3a5f; }

/* Expense / bank / watchlist rows */
[data-theme="dark"] .zoho-bank-row,
[data-theme="dark"] .zoho-watch-row { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .zoho-expense-row { background: linear-gradient(90deg, var(--accent-soft) var(--pct, 0%), #161b22 var(--pct, 0%)); border-color: #2d3748; }
[data-theme="dark"] .zoho-expense-row:hover,
[data-theme="dark"] .zoho-bank-row:hover,
[data-theme="dark"] .zoho-watch-row:hover { background: #1e2a38; border-color: var(--accent); }
/* Watchlist / bank row text — bright and legible */
[data-theme="dark"] .zoho-watch-row span { color: #f0f4ff !important; font-weight: 600; }
[data-theme="dark"] .zoho-watch-row b { color: #f0f4ff; }
[data-theme="dark"] .zoho-bank-info span { color: #f0f4ff !important; }
[data-theme="dark"] .zoho-bank-info small { color: #8b9eb8; }
[data-theme="dark"] .zoho-bank-row > b { color: #f0f4ff; }

/* Project card on dashboard */
[data-theme="dark"] .zoho-project-card { background: linear-gradient(180deg, #161b22 0%, #1e2530 100%); border-color: #2d3748; }

/* Aging chart */
[data-theme="dark"] .aging-row { color: #8b9eb8; }
[data-theme="dark"] .aging-meter { background: #2d3748; }

/* Income/expense horizontal bars */
[data-theme="dark"] .income-track,
[data-theme="dark"] .expense-track { background: #2d3748; }

/* Progress bar (getting started etc.) */
[data-theme="dark"] .progress-track { background: #2d3748; }

/* bk (banking/reconciliation) chart */
[data-theme="dark"] .bk-legend-item { color: #8b9eb8; }
[data-theme="dark"] .bk-legend-swatch { background: #484f58; }
[data-theme="dark"] .bk-chart-area { border-color: #2d3748; }

/* SVG chart text/lines rendered inline */
[data-theme="dark"] .zoho-flow-chart text,
[data-theme="dark"] .zoho-income-chart text { fill: #484f58; }
[data-theme="dark"] .zoho-flow-chart line,
[data-theme="dark"] .zoho-income-chart line { stroke: #2d3748; }

/* Tables ── */
[data-theme="dark"] th,
[data-theme="dark"] td { border-bottom-color: #2d3748; color: #bccedd; }

[data-theme="dark"] .quote-table-shell th,
[data-theme="dark"] .retainer-table-shell th { background: #0d1117; color: #8b9eb8; border-bottom-color: #2d3748; }

[data-theme="dark"] .pmt-invoice-table th { background: #0d1117; color: #8b9eb8; border-bottom-color: #2d3748; }
[data-theme="dark"] .pmt-invoice-table td { color: #bccedd; border-bottom-color: #2d3748; }
[data-theme="dark"] .pmt-table-footer { background: #161b22; border-top-color: #2d3748; }
[data-theme="dark"] .pmt-table-shell { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .pmt-received-on { color: #445568; }
[data-theme="dark"] .pmt-list-note { color: #445568; }

[data-theme="dark"] .po-table-shell { border-color: #2d3748; box-shadow: none; }
[data-theme="dark"] .po-table-shell thead th { background: #1a2236; color: #8b9eb8; border-bottom-color: #2d3748; }
[data-theme="dark"] .po-table-shell tbody tr { border-bottom-color: #2d3748; }
[data-theme="dark"] .po-table-shell tbody tr:hover { background: #1a2a42; }
[data-theme="dark"] .po-item-text,
[data-theme="dark"] .po-account-select,
[data-theme="dark"] .po-vat-select,
[data-theme="dark"] .po-qty-input,
[data-theme="dark"] .po-rate-input { color: #e2e8f0; }
[data-theme="dark"] .po-item-text:focus,
[data-theme="dark"] .po-account-select:focus,
[data-theme="dark"] .po-vat-select:focus,
[data-theme="dark"] .po-qty-input:focus,
[data-theme="dark"] .po-rate-input:focus { background: #1e3a5f; }
[data-theme="dark"] .po-item-text { border-right-color: #2d3748; }
[data-theme="dark"] .po-account-select,
[data-theme="dark"] .po-vat-select { border-right-color: #2d3748; }
[data-theme="dark"] .po-qty-input,
[data-theme="dark"] .po-rate-input { border-right-color: #2d3748; }

[data-theme="dark"] .bill-item-table { border-color: var(--line); }
[data-theme="dark"] .bill-item-table th { background: var(--bg); color: var(--ink2); border-bottom-color: var(--line); }
[data-theme="dark"] .bill-item-table td { border-bottom-color: var(--line); color: var(--ink); }

[data-theme="dark"] .quote-item-table,
[data-theme="dark"] .bill-item-section,
[data-theme="dark"] .po-item-table,
[data-theme="dark"] .retainer-item-table {
  background: #161b22;
  border-color: #2d3748;
  box-shadow: none;
}

[data-theme="dark"] .quote-item-head,
[data-theme="dark"] .bill-item-header,
[data-theme="dark"] .po-item-head,
[data-theme="dark"] .retainer-item-head {
  background: #161b22;
  border-bottom-color: #2d3748;
}

[data-theme="dark"] .line-item-icon {
  background: rgba(88, 166, 255, 0.12);
  border-color: rgba(88, 166, 255, 0.22);
  color: #7aa2f7;
}

[data-theme="dark"] .line-item-copy strong {
  color: #f0f4ff;
}

[data-theme="dark"] .line-item-copy span {
  color: #8b9eb8;
}

[data-theme="dark"] .line-item-bulk-btn,
[data-theme="dark"] .bill-bulk-actions-btn {
  background: #1a2236;
  border-color: #2d3748;
  color: #7aa2f7;
}

[data-theme="dark"] .line-item-bulk-btn:hover,
[data-theme="dark"] .bill-bulk-actions-btn:hover {
  background: #1e3a5f;
  border-color: #2563eb;
}

[data-theme="dark"] .quote-table-shell,
[data-theme="dark"] .retainer-table-shell {
  background: #161b22;
}

[data-theme="dark"] .quote-table-shell th,
[data-theme="dark"] .bill-item-table th,
[data-theme="dark"] .retainer-table-shell th {
  background: #1a2236;
  color: #8b9eb8;
  border-bottom-color: #2d3748;
}

[data-theme="dark"] .quote-table-shell td,
[data-theme="dark"] .bill-item-table td,
[data-theme="dark"] .retainer-table-shell td {
  background: #161b22;
  border-bottom-color: #2d3748;
}

[data-theme="dark"] .quote-table-shell tbody tr:hover td,
[data-theme="dark"] .bill-item-table tbody tr:hover td,
[data-theme="dark"] .retainer-table-shell tbody tr:hover td {
  background: #1a2a42;
}

[data-theme="dark"] .quote-table-shell input,
[data-theme="dark"] .quote-table-shell select,
[data-theme="dark"] .bill-item-table input,
[data-theme="dark"] .bill-item-table select,
[data-theme="dark"] .retainer-table-shell input,
[data-theme="dark"] .quote-discount-input span,
[data-theme="dark"] .quote-table-shell td:nth-child(6) strong,
[data-theme="dark"] .bill-amount-cell span,
[data-theme="dark"] .po-amount-value,
[data-theme="dark"] .retainer-total-line {
  background: #1a2236;
  border-color: #2d3748;
  color: #e2e8f0;
}

[data-theme="dark"] .quote-line-actions,
[data-theme="dark"] .bill-add-row-wrap,
[data-theme="dark"] .po-line-actions,
[data-theme="dark"] .retainer-line-footer {
  background: #161b22;
  border-top-color: #2d3748;
}

[data-theme="dark"] .recurring-bill-item-table th,
[data-theme="dark"] .recurring-bill-item-table td { border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .recurring-bill-item-table th { background: var(--bg); color: var(--ink2); }

[data-theme="dark"] .quote-item-table input,
[data-theme="dark"] .quote-item-table select,
[data-theme="dark"] .retainer-item-table input { background: #1a2236; border-color: #2d3f5a; color: #e2e8f0; }

[data-theme="dark"] .statement-table td { border-bottom-color: #2d3748; color: #bccedd; }

[data-theme="dark"] .report-drill-link {
  color: #7aa2f7;
}

[data-theme="dark"] .report-drill-link:hover {
  color: #a8c7ff;
}

[data-theme="dark"] .bk-reconcile-card {
  background: #161b22;
  border-color: #2d3748;
  box-shadow: 0 2px 12px rgba(0,4,20,0.35);
}

[data-theme="dark"] .bk-reconcile-card span,
[data-theme="dark"] .bk-reconcile-card small {
  color: #8b9eb8;
}

[data-theme="dark"] .bk-reconcile-card strong {
  color: #f0f4ff;
}

[data-theme="dark"] .bk-reconcile-card--good {
  background: #0c1f14;
  border-color: #1f6a4b;
}

[data-theme="dark"] .bk-reconcile-card--good strong {
  color: #4ade80;
}

/* ── Forms ── */
[data-theme="dark"] .customer-zoho-form,
[data-theme="dark"] .customer-form-body,
[data-theme="dark"] .customer-form-title { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .customer-form-title h3 { color: #f0f4ff; }
[data-theme="dark"] .customer-form-line label { color: #8b9eb8; }
[data-theme="dark"] .customer-form-line input,
[data-theme="dark"] .customer-form-line select,
[data-theme="dark"] .customer-form-line textarea,
[data-theme="dark"] .customer-address-grid input,
[data-theme="dark"] .customer-address-grid select,
[data-theme="dark"] .customer-address-grid textarea { background: #1a2236; border-color: #2d3f5a; color: #e2e8f0; }
[data-theme="dark"] .customer-form-actions { background: #161b22; border-top-color: #2d3748; }
[data-theme="dark"] .customer-upload-button { background: #161b22; border-color: #3a4a5e; color: #8b9eb8; }

[data-theme="dark"] .quote-form-title,
[data-theme="dark"] .quote-form-body { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .quote-form-line label { color: #8b9eb8; }
[data-theme="dark"] .quote-form-line input,
[data-theme="dark"] .quote-form-line select,
[data-theme="dark"] .quote-form-line textarea { background: #1a2236; border-color: #2d3f5a; color: #e2e8f0; }

[data-theme="dark"] .form-grid label,
[data-theme="dark"] .compact-form label { color: #8b9eb8; }
[data-theme="dark"] .form-grid input,
[data-theme="dark"] .form-grid select,
[data-theme="dark"] .form-grid textarea,
[data-theme="dark"] .compact-form input,
[data-theme="dark"] .compact-form select,
[data-theme="dark"] .compact-form textarea { background: #1a2236; border-color: #2d3f5a; color: #e2e8f0; }

[data-theme="dark"] .stg-form,
[data-theme="dark"] .stg-content,
[data-theme="dark"] .stg-main { background: #0d1117; }
[data-theme="dark"] .stg-card-header { border-bottom-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .stg-field label { color: #8b9eb8; }
[data-theme="dark"] .stg-field input,
[data-theme="dark"] .stg-field select,
[data-theme="dark"] .stg-field textarea { background: #1a2236; border-color: #2d3f5a; color: #e2e8f0; }
[data-theme="dark"] .stg-form-actions { background: #161b22; border-top-color: #2d3748; }

/* ── Modals ── */
[data-theme="dark"] .purchase-modal-card { background: #161b22; border: 1px solid #3a4a5e; }
[data-theme="dark"] .purchase-modal-backdrop { background: rgba(0,0,0,0.75); }
[data-theme="dark"] .confirm-overlay { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .confirm-card { background: #161b22; border: 1px solid #3a4a5e; box-shadow: 0 16px 56px rgba(0,0,0,0.7); }
[data-theme="dark"] .upgrade-modal-backdrop { background: rgba(0,0,0,0.75); }

/* ── Toasts ── */
[data-theme="dark"] .toast--error   { background: #1f0c0c; border-left-color: #ef4444; color: #fca5a5; }
[data-theme="dark"] .toast--success { background: #0d2218; border-left-color: #22c55e; color: #4ade80; }
[data-theme="dark"] .toast--warning { background: #241b00; border-left-color: #f59e0b; color: #fbbf24; }
[data-theme="dark"] .toast--info    { background: #0d1f3c; border-left-color: #3b82f6; color: #7aa2f7; }

/* ── Overdue alerts ── */
[data-theme="dark"] .overdue-alert { border-color: #3d3000; color: #fbbf24; }
[data-theme="dark"] .overdue-alert:hover { background: #2e2200; }
[data-theme="dark"] .overdue-alert--bills { border-color: #3d1a1a; border-left-color: #ef4444; color: #fca5a5; }
[data-theme="dark"] .overdue-alert--bills:hover { background: #2a1010; }

/* ── Content cards & record panels ── */
[data-theme="dark"] .invoice-record-list,
[data-theme="dark"] .invoice-record-toolbar,
[data-theme="dark"] .invoice-payments-panel,
[data-theme="dark"] .pmt-create-panel,
[data-theme="dark"] .pmt-details-section,
[data-theme="dark"] .pmade-register-panel,
[data-theme="dark"] .pmade-table-wrap,
[data-theme="dark"] .pmade-form,
[data-theme="dark"] .vc-topbar,
[data-theme="dark"] .vc-stats-row,
[data-theme="dark"] .vc-filter-bar { background: #161e2e !important; border-color: #1e2d44 !important; }
[data-theme="dark"] .vc-topbar-icon { background: rgba(77,143,248,0.14) !important; color: #4d8ff8 !important; }
[data-theme="dark"] .vc-topbar-title { color: #e2e8f0 !important; }
[data-theme="dark"] .vc-topbar-kicker { color: #4a5f7a !important; }
[data-theme="dark"] .vc-stat-divider { background: #1e2d44 !important; }
[data-theme="dark"] .vc-stat-icon--blue  { background: rgba(37,99,235,0.15) !important; color: #60a5fa !important; }
[data-theme="dark"] .vc-stat-icon--amber { background: rgba(217,119,6,0.15) !important; color: #fbbf24 !important; }
[data-theme="dark"] .vc-stat-icon--green { background: rgba(22,163,74,0.15) !important; color: #4ade80 !important; }
[data-theme="dark"] .vc-stat-label { color: #4a5f7a !important; }
[data-theme="dark"] .vc-stat-value { color: #e2e8f0 !important; }
[data-theme="dark"] .vc-filter-tabs button { background: transparent !important; border-color: #2d3f5a !important; color: #7e99b8 !important; }
[data-theme="dark"] .vc-filter-tabs button:hover { background: #1a2840 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .vc-filter-tabs button.active { background: rgba(77,143,248,0.14) !important; border-color: #4d8ff8 !important; color: #7aa8f7 !important; }
[data-theme="dark"] .vc-search-wrap input { background: #1a2236 !important; border-color: #2d3f5a !important; color: #e2e8f0 !important; }
[data-theme="dark"] .vc-search-wrap input:focus { border-color: #4d8ff8 !important; }
[data-theme="dark"] .vc-empty-state { background: #111827 !important; }
[data-theme="dark"] .vc-empty-circle { background: rgba(77,143,248,0.14) !important; color: #4d8ff8 !important; }
[data-theme="dark"] .vc-empty-title { color: #e2e8f0 !important; }
[data-theme="dark"] .vc-empty-copy { color: #7e99b8 !important; }
[data-theme="dark"] .vc-register-panel,
[data-theme="dark"] .coa-register-panel,
[data-theme="dark"] .coa-form,
[data-theme="dark"] .coa-form-actions,
[data-theme="dark"] .coa-type-row,
[data-theme="dark"] .item-detail-tabs,
[data-theme="dark"] .item-detail-body,
[data-theme="dark"] .item-create-panel,
[data-theme="dark"] .retainer-customer-modal-card,
[data-theme="dark"] .ncm-card,
[data-theme="dark"] .qvm-card,
[data-theme="dark"] .qim-card,
[data-theme="dark"] .quick-create-tile,
[data-theme="dark"] .status-tile,
[data-theme="dark"] .report-filter-bar,
[data-theme="dark"] .bk-active-table,
[data-theme="dark"] .bill-form-actions,
[data-theme="dark"] .proj-detail-actions,
[data-theme="dark"] .list-controls,
[data-theme="dark"] .quote-table-shell,
[data-theme="dark"] .retainer-table-shell { background: #161b22; border-color: #2d3748; }

[data-theme="dark"] .invoice-record-list-item { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .invoice-record-list-item:hover { background: #1e2530; }

[data-theme="dark"] .customer-address-grid { background: #0d1117; border-color: #2d3748; }

/* ── Dropdown menus ── */
[data-theme="dark"] .more-menu { background: #161b22; border-color: #3a4a5e; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
[data-theme="dark"] .more-menu button,
[data-theme="dark"] .more-menu a { color: #bccedd; }
[data-theme="dark"] .more-menu button:hover,
[data-theme="dark"] .more-menu a:hover { background: #1e2530; color: #f0f4ff; }

/* ── All generic inputs & selects not yet covered ── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: #1a2236; border-color: #2d3f5a; color: #e2e8f0; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #4a5f7a; }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus { border-color: #4d8ff8; outline: none; box-shadow: 0 0 0 3px rgba(77,143,248,0.18); background: #1e293b; }

[data-theme="dark"] .rb-input,
[data-theme="dark"] .coa-input,
[data-theme="dark"] .qvm-field-input,
[data-theme="dark"] .po-form-line,
[data-theme="dark"] .bill-add-row-btn,
[data-theme="dark"] .bill-upload-btn { background: var(--bg); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .po-vendor-btn { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .po-vendor-btn:hover { background: var(--surface-soft); }

/* ── Project detail ── */
[data-theme="dark"] .proj-budget-over-label { background: #1f0c0c; color: #f87171; border-color: #3d1a1a; }

/* Scrollbar (webkit) */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0d1117; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4a5e; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ── Dashboard dark mode additions ── */
[data-theme="dark"] .zoho-summary-tile--blue   .zoho-summary-tile-icon { color: #7aa2f7; }
[data-theme="dark"] .zoho-summary-tile--orange .zoho-summary-tile-icon { color: #fbbf24; }
[data-theme="dark"] .zoho-summary-tile--green  .zoho-summary-tile-icon { color: #4ade80; }
[data-theme="dark"] .zoho-filter,
[data-theme="dark"] .zoho-segment { background: #1e2530; border-color: #3a4a5e; color: #8b9eb8; }
[data-theme="dark"] .zoho-segment .active { background: #0d1117; color: #7aa2f7; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
[data-theme="dark"] .zoho-cashflow-stat--in  { border-color: #1a3d2b; }
[data-theme="dark"] .zoho-cashflow-stat--out { border-color: #3d1a1a; }
[data-theme="dark"] .zoho-income-stat--income  { border-color: #1a3d2b; }
[data-theme="dark"] .zoho-income-stat--expense { border-color: #3d1a1a; }
[data-theme="dark"] .zoho-income-stat--profit  { border-color: #1e3a5f; }
[data-theme="dark"] .zoho-bank-icon { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .zoho-money-split button:hover { background: #1e2530; }
[data-theme="dark"] .zoho-cashflow-stat--balance { background: #1e2530; }

/* ── Reports dark mode ── */
[data-theme="dark"] .reports-catalog { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .favorite-strip { background: #0d1117; border-color: #2d3748; }
[data-theme="dark"] .favorite-strip button { background: #1e2530; color: #7aa2f7; }
[data-theme="dark"] .favorite-strip button:hover { background: #2d3748; }
[data-theme="dark"] .report-group + .report-group { border-top-color: #2d3748; }
[data-theme="dark"] .report-link.active { background: #0d1f3c; border-left-color: var(--accent); }
[data-theme="dark"] .report-link:hover { background: #1e2530; }
[data-theme="dark"] .report-action-bar,
[data-theme="dark"] .report-filter-bar { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .report-catalog-toggle { background: #161b22; border-color: #3a4a5e; color: #bccedd; }
[data-theme="dark"] .report-catalog-toggle:hover { background: #0d1f3c; color: #7aa2f7; }
[data-theme="dark"] .report-filter-context { background: #0d1f3c; border-color: #274d7f; color: #bccedd; }
[data-theme="dark"] .report-search-empty,
[data-theme="dark"] .report-view-toggle,
[data-theme="dark"] .report-chart-track,
[data-theme="dark"] .report-account-code { background: #0d1117; border-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .report-view-toggle button.active,
[data-theme="dark"] .report-export-menu { background: #161b22; border-color: #3a4a5e; color: #f0f4ff; box-shadow: 0 14px 34px rgba(0,0,0,0.45); }
[data-theme="dark"] .report-export-menu button { color: #bccedd; }
[data-theme="dark"] .report-export-menu button:hover { background: #1e2530; color: #7aa2f7; }
[data-theme="dark"] .report-customize { background: #0d1117; border-color: #2d3748; }
[data-theme="dark"] .report-paper { background: #161b22; }
[data-theme="dark"] .report-paper-title span { color: #8b9eb8; }
[data-theme="dark"] .report-paper-title h3 { color: #f0f4ff; }
[data-theme="dark"] .report-paper-title p { color: #4e6278; }
[data-theme="dark"] .report-chart-panel { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .report-chart-head { border-bottom-color: #2d3748; }
[data-theme="dark"] .report-chart-head h4,
[data-theme="dark"] .report-chart-row strong,
[data-theme="dark"] .report-chart-empty strong { color: #f0f4ff; }
[data-theme="dark"] .report-statement td,
[data-theme="dark"] .report-statement th,
[data-theme="dark"] .report-table th,
[data-theme="dark"] .report-table td { border-bottom-color: #2d3748; }
[data-theme="dark"] .report-statement th { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .report-table th { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .report-section-row td { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .report-total-row td { background: #1e2530; border-top-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] .report-currency-note { border-top-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .reports-home-header { border-left-color: var(--accent); }
[data-theme="dark"] .reports-home-card { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .reports-home-card-title { border-bottom-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .rpt-cat-count { background: #1e2530; color: #4e6278; }
[data-theme="dark"] .rpt-group-count { background: #1e2530; color: #4e6278; }
[data-theme="dark"] .catalog-title .progress-label { background: #1e2530; color: #8b9eb8; }

/* ── COA dark mode ── */
[data-theme="dark"] .coa-list-header { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .coa-filter-row { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .coa-summary-row { background: #0d1117; border-color: #2d3748; }
[data-theme="dark"] .coa-summary-row > div { border-color: #2d3748; }
[data-theme="dark"] .coa-summary-row span { color: #8b9eb8; }
[data-theme="dark"] .coa-summary-row strong { color: #f0f4ff; }
[data-theme="dark"] .coa-view-select { color: #f0f4ff; background: transparent; }
[data-theme="dark"] .coa-form-title { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .coa-form-title h3 { color: #f0f4ff; }
[data-theme="dark"] .coa-title-icon { background: #1e2530; border-color: #3a4a5e; color: #bccedd; }
[data-theme="dark"] .coa-close-button { color: #4e6278; }
[data-theme="dark"] .coa-close-button:hover { background: #1e2530; color: #f0f4ff; }
[data-theme="dark"] .coa-form-body { background: #0d1117; }
[data-theme="dark"] .coa-label { color: #bccedd; }
[data-theme="dark"] .coa-system-tag { background: #1e2530; border-color: #3a4a5e; color: #8b9eb8; }
[data-theme="dark"] .coa-account-name { color: #7aa2f7; }
[data-theme="dark"] .coa-account-sub { color: #4e6278; }
[data-theme="dark"] .coa-subtype-pill { background: rgba(255,255,255,.04); border-color: #1e2d44; color: #7a94b4; }
[data-theme="dark"] .coa-bulk-actions label { color: #bccedd; }
[data-theme="dark"] .coa-bulk-actions > span { color: #8b9eb8; }

/* COA account type pills — dark */
[data-theme="dark"] .acct-type-asset     { background: #0d1f3c; color: #7aa2f7; }
[data-theme="dark"] .acct-type-liability { background: #1f0c0c; color: #f87171; }
[data-theme="dark"] .acct-type-equity    { background: #1e1335; color: #c084fc; }
[data-theme="dark"] .acct-type-revenue   { background: #0d2218; color: #4ade80; }
[data-theme="dark"] .acct-type-expense   { background: #241b00; color: #fbbf24; }

/* ── Remaining white-background fixes ───────────────────────────────────────── */

/* Pipeline / status tile hover */
[data-theme="dark"] .pipeline-row:hover,
[data-theme="dark"] .status-tile:hover { background: #1e2530; }

/* Upgrade modal card — correct the card itself (backdrop is separate) */
[data-theme="dark"] .upgrade-modal-card { background: #161b22; border: 1px solid #3a4a5e; box-shadow: 0 24px 60px rgba(0,0,0,0.7); }
[data-theme="dark"] .upgrade-modal-backdrop { background: rgba(0,0,0,0.75); }

/* Upgrade plan cards */
[data-theme="dark"] .upgrade-plan-card { background: #161b22; border-color: #3a4a5e; }
[data-theme="dark"] .upgrade-plan-card--featured { background: #0d1f3c; border-color: var(--accent); }
[data-theme="dark"] .upgrade-plan-btn { background: #1e2530; border-color: #3a4a5e; color: #bccedd; }
[data-theme="dark"] .upgrade-plan-btn:hover { border-color: var(--accent); color: var(--accent); background: #0d1f3c; }
[data-theme="dark"] .upgrade-plan-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Subscription plan info cards */
[data-theme="dark"] .sub-plan-info { background: #161b22; border-color: #3a4a5e; }
[data-theme="dark"] .sub-plan-info--pro { background: #0d1f3c; border-color: var(--accent); }
[data-theme="dark"] .sub-plan-info-name { color: #f0f4ff; }
[data-theme="dark"] .sub-plan-info-desc { color: #4e6278; }

/* Upgrade modal close & header text */
[data-theme="dark"] .upgrade-modal-close { color: #4e6278; }
[data-theme="dark"] .upgrade-modal-close:hover { color: #f0f4ff; }
[data-theme="dark"] .upgrade-modal-header h2 { color: #f0f4ff; }
[data-theme="dark"] .upgrade-modal-header p { color: #8b9eb8; }

/* Appearance settings cards */
[data-theme="dark"] .appear-theme-card { background: #161b22; border-color: #3a4a5e; }
[data-theme="dark"] .appear-theme-card:hover { border-color: var(--accent); }
[data-theme="dark"] .appear-theme-card.active { border-color: var(--accent); background: #0d1f3c; }
[data-theme="dark"] .appear-theme-name { color: #f0f4ff; }
[data-theme="dark"] .appear-theme-sub { color: #4e6278; }

/* Branding settings logo box */
[data-theme="dark"] .brand-logo-box { background: #0d1117; border-color: #3a4a5e; color: #445568; }

/* ── Remaining white-background fixes ── */

/* Pipeline row count badge (white circle) */
[data-theme="dark"] .pipeline-row b { background: #1e2530; color: var(--accent); }

/* Toggle knob — stays white for contrast on checked accent track */
[data-theme="dark"] .item-section-switch-track::after { background: #e8f0ff; }


/* ── Final polish ────────────────────────────────────────────────────────────── */

/* Metric card typography */
[data-theme="dark"] .metric-label { color: #8b949e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme="dark"] .metric-card strong { color: #e6edf3; }

/* KPI tile colours — readable tinted gradients */
[data-theme="dark"] .zoho-summary-tile--blue {
  background: linear-gradient(150deg, #141d2e 0%, #192442 100%);
  border-color: #253050 !important;
}
[data-theme="dark"] .zoho-summary-tile--orange {
  background: linear-gradient(150deg, #1c1500 0%, #241c00 100%);
  border-color: #3d2f00 !important;
}
[data-theme="dark"] .zoho-summary-tile--green {
  background: linear-gradient(150deg, #0e1e13 0%, #122718 100%);
  border-color: #1a3f26 !important;
}
[data-theme="dark"] .zoho-summary-label { color: #8b949e; }
[data-theme="dark"] .zoho-summary-value { color: #e6edf3; }
[data-theme="dark"] .zoho-summary-tile-icon { opacity: 0.9; }

/* Activity feed */
[data-theme="dark"] .zoho-activity-row { border-bottom: 1px solid #21262d; }
[data-theme="dark"] .zoho-activity-row:hover { background: #1c2128; }

/* Trial banner — subtle amber strip */
[data-theme="dark"] .trial-banner {
  background: #1a1400;
  border: 1px solid #2d2500;
  border-left: 3px solid #9e6a03;
  color: #d29922;
}

/* Eyebrow labels */
[data-theme="dark"] .eyebrow { color: #484f58; }

/* Section header */
[data-theme="dark"] .section-header h3,
[data-theme="dark"] .section-header h4 { color: #c9d1d9; }

/* Sub-plan info card improvements */
[data-theme="dark"] .sub-plan-info { background: #161b22; }
[data-theme="dark"] .sub-plan-info-name { color: #e6edf3; }

/* ── Appearance Settings ─────────────────────────────────────────────────────── */
.appear-theme-row { display: flex; gap: 12px; }
.appear-theme-card {
  flex: 1;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
}
.appear-theme-card:hover { border-color: var(--accent); }
.appear-theme-card.active { border-color: var(--accent); background: var(--accent-soft); }
.appear-theme-preview {
  width: 34px;
  height: 26px;
  border-radius: 5px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.appear-theme-preview--light { background: linear-gradient(135deg, #f0f4ff 50%, #fff 50%); }
.appear-theme-preview--dark { background: linear-gradient(135deg, #0f172a 50%, #1e293b 50%); border-color: #3d5070; }
.appear-theme-preview--auto { background: linear-gradient(90deg, #f0f4ff 50%, #0f172a 50%); }
.appear-theme-info { display: flex; flex-direction: column; gap: 2px; }
.appear-theme-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.appear-theme-sub { font-size: 11px; color: var(--ink3); }
.appear-accent-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.appear-accent-chip {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
  flex-shrink: 0;
}
.appear-accent-chip:hover { transform: scale(1.1); }
.appear-accent-chip.active { outline: 2px solid var(--ink2); outline-offset: 2px; }
.appear-accent-chip.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* ── Branding Settings ───────────────────────────────────────────────────────── */
.brand-logo-row { display: flex; align-items: center; gap: 18px; }
.brand-logo-box {
  width: 80px;
  height: 80px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
  flex-shrink: 0;
  color: var(--ink3);
}
.brand-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.brand-logo-meta { display: flex; flex-direction: column; gap: 8px; }
.brand-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Custom Fields ───────────────────────────────────────────────────────────── */
.cf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cf-table th { padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink3); text-align: left; background: var(--bg); border-bottom: 1px solid var(--line); }
.cf-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink2); vertical-align: middle; }
.cf-table tr:last-child td { border-bottom: none; }
.cf-empty { padding: 24px; text-align: center; color: var(--ink3); font-size: 13px; }
.cf-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.cf-badge-type { background: var(--bg); color: var(--ink3); border: 1px solid var(--line); }
.cf-badge-invoice  { background: var(--blue-soft); color: var(--accent); }
.cf-badge-customer { background: var(--teal-soft); color: var(--teal); }
.cf-badge-vendor   { background: var(--warning-soft); color: var(--warning); }

/* ── Custom Modules ──────────────────────────────────────────────────────────── */
.cs-item { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.cs-item-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.cs-item-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.cs-item-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cs-kv-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: center; }
.cs-kv-key { font-size: 12px; font-weight: 600; color: var(--ink2); }
.cs-kv-val { font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 6px 10px; width: 100%; font-family: inherit; transition: border-color 0.15s; }
.cs-kv-val:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(32,96,232,0.1); }
.cs-add-row { display: flex; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }

/* -- Custom Modules --------------------------------------------------------- */
.custom-module-card-header {
  align-items: flex-start;
  gap: 12px;
}
.custom-module-card-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.custom-module-sub,
.module-description {
  color: var(--ink3);
  font-size: 12.5px;
  line-height: 1.4;
}
.module-description {
  margin: 5px 0 0;
  max-width: 680px;
}
.custom-module-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.custom-module-field-list {
  display: grid;
  gap: 8px;
}
.custom-module-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
/* This used to be `.custom-module-field-row div`, which at 0,1,1 outranked
   every class inside it and forced the badges, the buttons and the edit form
   into vertical stacks — a one-line field became a 180px card. Each part is
   named now so nothing is styled by accident. */
.cm-field-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.cm-field-meta strong {
  color: var(--ink);
  font-size: 13px;
  margin-right: 2px;
}
.cm-field-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--ink2);
}
.cm-field-badge-option {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
}
/* A global `th::after` puts a sort arrow on every heading in the app. These two
   tables do not want it: the custom module list draws its own icon and was
   showing two, and the custom field table has an empty actions heading that was
   offering to sort nothing. Scoped so no other table changes. */
.custom-module-list th::after,
.cf-table th:empty::after {
  content: none;
}
.cm-field-badge-required {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.cm-bulk-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-soft);
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--ink2);
}
.cm-check-col {
  width: 36px;
  text-align: center;
}
.cm-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cm-filter-bar .stg-input {
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
}
.cm-filter-clear-btn {
  color: var(--danger);
  border-color: var(--danger);
}
.cm-sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.cm-sortable-th:hover {
  background: var(--surface-soft);
}
.cm-sort-icon {
  font-style: normal;
  color: var(--ink3);
  font-size: 11px;
  margin-left: 3px;
}
.cm-sort-active {
  color: var(--accent);
}
.cm-edit-fields {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.cm-edit-fields .stg-input {
  flex: 1;
  min-width: 120px;
}
.cm-field-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.cm-reorder-btn {
  padding: 4px 6px;
  min-width: 0;
  color: var(--ink3);
}
.cm-reorder-btn:disabled {
  opacity: 0.25;
  pointer-events: none;
}
.custom-module-add-field {
  align-items: center;
  flex-wrap: wrap;
}
.custom-module-add-field select {
  max-width: 160px;
}
.custom-module-required,
.custom-check-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 600;
}
.custom-module-page {
  max-width: 100%;
}
.custom-module-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.custom-record-form-panel {
  padding: 0;
  overflow: hidden;
}
.custom-record-form-panel .section-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.custom-record-form {
  padding: 18px 20px 0;
}
.custom-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.custom-record-actions {
  margin: 18px -20px 0;
}
.custom-check-field {
  min-height: 42px;
  padding: 10px 0;
}
.custom-module-controls {
  grid-template-columns: minmax(220px, 1fr) 180px 150px auto;
}
.custom-module-controls > [data-action="cm-toggle-column-chooser"] {
  white-space: nowrap;
}
/* The chooser drops onto its own row beneath the controls it belongs to. */
.cm-column-chooser {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}
/* Explicit display above means the hidden attribute needs saying so. */
.cm-column-chooser[hidden] {
  display: none;
}
.cm-column-chooser-head {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink3);
}
.cm-column-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.cm-column-option input {
  cursor: pointer;
}
.cm-column-reset {
  margin-left: auto;
  font-size: 12px;
  min-height: 30px;
  padding: 4px 12px;
}
/* Figures line up for comparison down a column, as they do everywhere else. */
.cm-num {
  font-variant-numeric: tabular-nums;
}
.cm-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.cm-pager-count {
  font-size: 12px;
  color: var(--ink3);
}
.cm-pager-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cm-pager-controls button {
  font-size: 12px;
  min-height: 30px;
  padding: 4px 12px;
}
.cm-pager-page {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .custom-module-card-header,
  .custom-module-card-actions,
  .custom-record-grid,
  .custom-module-controls {
    grid-template-columns: 1fr;
  }
  .custom-module-card-header,
  .custom-module-card-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .custom-module-summary {
    grid-template-columns: 1fr;
  }
  .custom-module-add-field select {
    max-width: none;
    width: 100%;
  }
}

/* ── Trial Banner ──────────────────────────────────────────────────────────── */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .trial-banner { padding: 10px 14px; font-size: 12px; }
  .trial-banner span { flex: 1; min-width: 0; }
  .trial-banner-btn { flex-shrink: 0; white-space: nowrap; }
}
.trial-banner--active {
  background: linear-gradient(90deg, #0f766e 0%, #0891b2 100%);
  color: #fff;
}
.trial-banner--active .trial-banner-btn {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
.trial-banner--active .trial-banner-btn:hover { background: rgba(255,255,255,0.32); }
.trial-banner--warning {
  background: #fffbeb;
  border-bottom: 1px solid #fcd34d;
  color: #92400e;
}
.trial-banner--expired {
  background: #fef2f2;
  border-bottom: 1px solid #fca5a5;
  color: #991b1b;
}
.trial-banner-btn {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent, #2563eb);
  color: #fff;
}
.trial-banner-btn:hover { opacity: 0.88; }

/* ── Dashboard trial countdown card ───────────────────────────────────────── */
.dash-trial-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 100%);
  border: 1px solid #6ee7b7;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dash-trial-card--warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fcd34d;
}
.dash-trial-card--expired {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fca5a5;
}
.dash-trial-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.dash-trial-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.dash-trial-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.dash-trial-label strong { font-size: 22px; font-weight: 800; color: #059669; }
.dash-trial-card--warning .dash-trial-label strong { color: #d97706; }
.dash-trial-card--expired .dash-trial-label { color: #991b1b; }
.dash-trial-sub { font-size: 12px; color: var(--ink2); margin-top: 2px; }
.dash-trial-card-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.dash-trial-bar {
  width: 120px;
  height: 5px;
  background: rgba(0,0,0,0.1);
  border-radius: 99px;
  overflow: hidden;
}
.dash-trial-fill {
  height: 100%;
  background: #10b981;
  border-radius: 99px;
  transition: width 0.4s;
}
.dash-trial-card--warning .dash-trial-fill { background: #f59e0b; }
.dash-trial-btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  background: var(--accent, #2060e8);
  color: #fff;
  white-space: nowrap;
  transition: opacity .18s;
}
.dash-trial-btn:hover { opacity: 0.88; }
.dash-trial-card--expired .dash-trial-btn { background: #dc2626; }
@media (max-width: 600px) {
  .dash-trial-card { flex-direction: column; align-items: stretch; }
  .dash-trial-card-right { flex-direction: row; align-items: center; }
  .dash-trial-bar { flex: 1; }
}
[data-theme="dark"] .dash-trial-card {
  background: linear-gradient(135deg, #052e24 0%, #0a1e2e 100%);
  border-color: #047857;
}
[data-theme="dark"] .dash-trial-card--warning {
  background: linear-gradient(135deg, #1c1500 0%, #1f1000 100%);
  border-color: #b45309;
}
[data-theme="dark"] .dash-trial-card--expired {
  background: linear-gradient(135deg, #1c0a0a 0%, #200808 100%);
  border-color: #b91c1c;
}
[data-theme="dark"] .dash-trial-label strong { color: #34d399; }
[data-theme="dark"] .dash-trial-card--warning .dash-trial-label strong { color: #fbbf24; }
[data-theme="dark"] .dash-trial-card--expired .dash-trial-label { color: #fca5a5; }

/* ── Locked nav items ──────────────────────────────────────────────────────── */
/* Hidden while the plan is lapsed. A class, not an inline style, so the
   industry filter keeps ownership of the inline display value. */
.nav-item--gated-hidden {
  display: none;
}

.nav-item--locked {
  opacity: 0.85;
  position: relative;
}
.nav-item--locked::after {
  content: "🔒";
  font-size: 10px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Upgrade Modal ─────────────────────────────────────────────────────────── */
/* ── Address modal ─────────────────────────────────────────────────────────── */
.addr-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.addr-modal-overlay[hidden] { display: none; }
.addr-modal-card {
  background: var(--surface, #fff);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.addr-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.addr-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.addr-modal-close {
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--ink2); line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.addr-modal-close:hover { background: var(--surface-soft); }
.addr-modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.addr-copy-row { margin-bottom: 2px; }
.addr-copy-btn {
  background: none; border: none; cursor: pointer;
  color: var(--accent, #2563eb); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 5px; padding: 0;
}
.addr-copy-btn:hover { text-decoration: underline; }
.addr-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: 5px; }
.addr-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line, #e5e7eb);
  border-radius: 7px; font-size: 13px; color: var(--ink);
  background: var(--surface, #fff); box-sizing: border-box;
}
.addr-input:focus { outline: none; border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.addr-select { width: 100%; padding: 8px 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 7px; font-size: 13px; color: var(--ink); background: var(--surface, #fff); }
.addr-textarea { resize: vertical; min-height: 56px; }
.addr-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.addr-phone-row { display: flex; gap: 6px; }
.addr-phone-code { width: 80px; padding: 8px 6px; border: 1px solid var(--line, #e5e7eb); border-radius: 7px; font-size: 13px; background: var(--surface, #fff); }
.addr-note { font-size: 12px; color: var(--ink2); margin: 0; }
.addr-modal-footer {
  display: flex; gap: 10px; padding: 14px 22px 18px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.addr-save-btn {
  background: var(--accent, #2563eb); color: #fff;
  border: none; border-radius: 7px; padding: 9px 22px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.addr-save-btn:hover { opacity: 0.88; }
.addr-cancel-btn {
  background: none; border: 1.5px solid var(--line, #e5e7eb); border-radius: 7px;
  padding: 9px 18px; font-size: 13px; font-weight: 500; color: var(--ink2); cursor: pointer;
}
.addr-cancel-btn:hover { background: var(--surface-soft); }

/* Address inline row (like Zoho Books) */
.addr-inline-row {
  display: flex; align-items: center; gap: 32px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--line, #e5e7eb);
  margin-top: 8px;
}
.addr-inline-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  padding: 4px 0; color: var(--ink2);
}
.addr-inline-btn:hover .addr-inline-label { color: var(--accent, #2563eb); }
.addr-inline-btn:hover svg { stroke: var(--accent, #2563eb); }
.addr-inline-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink2);
}
.addr-inline-previews {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 6px 0 4px;
}
.addr-inline-preview-col { min-height: 0; }
.addr-inline-preview-text {
  font-size: 12.5px; color: var(--ink2); white-space: pre-line;
  line-height: 1.55;
}
.addr-inline-previews:empty { display: none; }
@media (max-width: 480px) {
  .addr-inline-row { gap: 16px; flex-wrap: wrap; }
  .addr-inline-previews { grid-template-columns: 1fr; }
}

/* Address card in form (legacy) */
.addr-card-wrap { display: flex; flex-direction: column; gap: 6px; }
.addr-card-preview {
  font-size: 13px; color: var(--ink2); white-space: pre-line;
  min-height: 20px; line-height: 1.5;
}
.addr-card-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--accent, #2563eb);
  border-radius: 6px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; color: var(--accent, #2563eb);
  cursor: pointer; width: fit-content;
}
.addr-card-btn:hover { background: var(--accent-soft, #eff6ff); }

/* dark mode */
[data-theme="dark"] .addr-modal-card { background: var(--surface, #1e2636); }
[data-theme="dark"] .addr-input, [data-theme="dark"] .addr-select, [data-theme="dark"] .addr-phone-code { background: var(--surface-soft, #273047); color: var(--ink); border-color: var(--line); }
/* address modal mobile */
@media (max-width: 520px) {
  .addr-two-col { grid-template-columns: 1fr; }
  .addr-modal-card { border-radius: 16px 16px 0 0; margin-top: auto; max-height: 92vh; }
  .addr-modal-overlay { align-items: flex-end; padding: 0; }
}

.upgrade-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.upgrade-modal-overlay[hidden] { display: none; }
.upgrade-modal-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 36px;
  max-width: 560px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
.upgrade-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  line-height: 1;
  padding: 4px 8px;
}
.upgrade-modal-close:hover { color: var(--text, #111); }

/* Schedule Report Modal */
.sched-modal-card { background:var(--surface,#fff); border-radius:16px; padding:36px; max-width:480px; width:100%; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.18); }
.sched-field { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
.sched-field label { font-size:13px; font-weight:600; color:var(--ink2,#475569); }
.sched-select, .sched-input { width:100%; padding:9px 12px; border:1.5px solid var(--line,#e5e7eb); border-radius:8px; font-size:14px; background:var(--surface,#fff); color:var(--ink,#0f172a); }
.sched-select:focus, .sched-input:focus { outline:none; border-color:var(--accent,#2563eb); }
.sched-hint { font-size:12px; color:var(--ink3,#94a3b8); }
.sched-report-name-display { font-size:15px; font-weight:700; color:var(--ink,#0f172a); margin:0; }
.sched-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.sched-existing-header { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink3,#94a3b8); margin:24px 0 10px; padding-top:20px; border-top:1px solid var(--line,#e5e7eb); }
.sched-existing-row { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--surface-soft,#f8fafc); border-radius:8px; font-size:13px; margin-bottom:8px; }
.sched-delete-btn { background:none; border:none; color:#e53e3e; font-size:12px; font-weight:600; cursor:pointer; padding:4px 8px; border-radius:6px; }
.sched-delete-btn:hover { background:#fee2e2; }

.upgrade-modal-header { margin-bottom: 28px; }
.upgrade-modal-header h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.upgrade-modal-header p { font-size: 14px; color: var(--text-muted, #6b7280); }
.upgrade-modal-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.upgrade-plan-card {
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.upgrade-plan-card--featured {
  border-color: var(--accent, #2563eb);
  background: #f0f7ff;
}
.upgrade-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.upgrade-plan-name { font-size: 16px; font-weight: 700; }
.upgrade-plan-price { font-size: 32px; font-weight: 800; line-height: 1; }
.upgrade-plan-price span { font-size: 14px; font-weight: 500; color: var(--text-muted, #6b7280); }
.upgrade-plan-desc { font-size: 13px; color: var(--text-muted, #6b7280); line-height: 1.5; flex: 1; }
.upgrade-plan-btn {
  margin-top: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--line, #e5e7eb);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
}
.upgrade-plan-btn:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.upgrade-plan-btn--primary {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}
.upgrade-plan-btn--primary:hover { opacity: 0.88; }
.upgrade-plan-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.upgrade-modal-error {
  margin-top: 14px;
  font-size: 13px;
  color: #dc2626;
  text-align: center;
  min-height: 18px;
}
.upgrade-billing-toggle { display:flex; gap:0; border:1.5px solid var(--line,#e5e7eb); border-radius:8px; overflow:hidden; width:fit-content; margin:0 auto 20px; }
.upgrade-cycle-btn { padding:7px 22px; font-size:13px; font-weight:600; border:none; cursor:pointer; background:none; color:var(--ink,#111); transition:background .15s,color .15s; }
.upgrade-cycle-btn--active { background:var(--accent,#2563eb); color:#fff; }
.upgrade-cycle-save { font-size:11px; font-weight:700; background:#dcfce7; color:#166534; border-radius:4px; padding:1px 5px; margin-left:4px; }

/* ── Toast notification ────────────────────────────────────────────────────── */
.bb-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99999;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  max-width: 360px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.bb-toast--visible { opacity: 1; transform: translateY(0); }
.bb-toast--success { background: var(--success); color: #fff; }
.bb-toast--warning { background: var(--warning); color: #fff; }
.bb-toast--error   { background: var(--danger);  color: #fff; }

/* ── Subscription settings panel ──────────────────────────────────────────── */
/* ── My Plan page ─────────────────────────────────────────────────────────── */
.myplan-hero {
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
}
.myplan-hero-badge { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-bottom: 4px; }
.myplan-hero-price { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.myplan-hero-sub     { font-size: 13px; opacity: 0.8; }
.myplan-hero-tagline { font-size: 14px; font-weight: 600; opacity: 0.95; margin-bottom: 10px; background: rgba(255,255,255,0.15); border-radius: 6px; padding: 5px 10px; display: inline-block; }
.myplan-trial-bar  { height: 5px; background: rgba(255,255,255,0.25); border-radius: 99px; margin-bottom: 8px; overflow: hidden; }
.myplan-trial-fill { height: 100%; background: #fff; border-radius: 99px; transition: width 0.4s; }
.myplan-upgrade-btn {
  background: #fff; color: #1e1b4b;
  border: none; border-radius: 9px;
  padding: 11px 20px; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s;
}
.myplan-upgrade-btn:hover { opacity: 0.88; }
.myplan-active-badge {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 99px;
  padding: 8px 18px; font-size: 14px; font-weight: 700;
}

/* Feature table */
.myplan-table-wrap { overflow-x: auto; }
.myplan-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.myplan-table thead tr { border-bottom: 2px solid var(--line); }
.myplan-table thead th {
  padding: 10px 14px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink2); text-align: center;
}
.myplan-table thead th.myplan-current { color: var(--accent); background: var(--accent-soft); border-radius: 8px 8px 0 0; }
.myplan-table thead th.myplan-feat-name { text-align: left; }
.myplan-table tbody tr { border-bottom: 1px solid var(--line); }
.myplan-table tbody tr:last-child { border-bottom: none; }
.myplan-table tbody tr:hover { background: var(--surface-soft); }
.myplan-table td { padding: 10px 14px; }
.myplan-feat-name { font-weight: 500; color: var(--ink); text-align: left !important; }
.myplan-feat-val { text-align: center; color: var(--ink2); }
.myplan-feat-val.myplan-current { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
.myplan-check { color: #16a34a; font-weight: 700; }
.myplan-check--ai { color: #7c3aed; }
.myplan-lock  { color: var(--ink3); }
.myplan-ai-row td { background: #faf5ff; }
.myplan-ai-row .myplan-feat-name { color: #6b21a8; font-weight: 600; }
.myplan-ai-row .myplan-feat-val.myplan-current { background: #ede9fe; color: #6b21a8; }

/* CTA / support footer */
.myplan-cta-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1.5px solid var(--accent);
  border-radius: 12px; padding: 18px 22px; margin-top: 16px;
}
.myplan-cta-text { display: flex; flex-direction: column; gap: 3px; }
.myplan-cta-text strong { font-size: 15px; color: var(--ink); }
.myplan-cta-text span { font-size: 13px; color: var(--ink2); }
.myplan-support-note { font-size: 13px; color: var(--ink2); margin-top: 16px; text-align: center; }

/* dark mode */
[data-theme="dark"] .myplan-ai-row td { background: rgba(124,58,237,0.08); }
[data-theme="dark"] .myplan-ai-row .myplan-feat-name { color: #c4b5fd; }
[data-theme="dark"] .myplan-ai-row .myplan-feat-val.myplan-current { background: rgba(124,58,237,0.18); color: #c4b5fd; }
[data-theme="dark"] .myplan-table thead th.myplan-current { background: rgba(88,166,255,0.12); }
[data-theme="dark"] .myplan-feat-val.myplan-current { background: rgba(88,166,255,0.12); }
[data-theme="dark"] .myplan-cta-card { background: #161e2e; border-color: var(--accent); }
.myplan-cta-card--trial { border-color: #0d9488; background: #f0fdfa; }
.myplan-cta-card--trial .myplan-cta-text strong { color: #0f766e; }
[data-theme="dark"] .myplan-cta-card--trial { background: #0d2420; border-color: #0d9488; }
[data-theme="dark"] .myplan-cta-card--trial .myplan-cta-text strong { color: #2dd4bf; }

.sub-status-card {
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1.5px solid var(--line, #e5e7eb);
}
.sub-status--trial  { background: #fffbeb; border-color: #fcd34d; }
.sub-status--active { background: #f0fdf4; border-color: #86efac; }
.sub-status--expired { background: #fef2f2; border-color: #fca5a5; }
.sub-status-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #6b7280); margin-bottom: 6px; }
.sub-status-big { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.sub-status-sub { font-size: 13px; color: var(--text-muted, #6b7280); line-height: 1.5; }
.sub-trial-bar { height: 6px; background: #e5e7eb; border-radius: 99px; margin: 12px 0; overflow: hidden; }
.sub-trial-fill { height: 100%; background: #f59e0b; border-radius: 99px; transition: width 0.4s; }
.sub-status--active .sub-trial-fill { background: #22c55e; }
.sub-actions { margin-top: 16px; }
.sub-plans-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sub-plan-info {
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
}
.sub-plan-info--pro { border-color: var(--accent, #2563eb); background: #f0f7ff; }
.sub-plan-info-name { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.sub-plan-info-desc { font-size: 12px; color: var(--text-muted, #6b7280); line-height: 1.5; }

/* ── Toast Notifications ──────────────────────────────────────────────────── */
#toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 99999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 260px; max-width: 420px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 500; line-height: 1.45;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
  pointer-events: all;
  animation: toast-in 0.18s ease;
}
.toast--error   { background: #fef2f2; border-left: 4px solid #ef4444; color: #991b1b; }
.toast--success { background: #f0fdf4; border-left: 4px solid #22c55e; color: #15803d; }
.toast--warning { background: #fffbeb; border-left: 4px solid #f59e0b; color: #92400e; }
.toast--info    { background: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }
.toast-msg { flex: 1; white-space: pre-wrap; }
.toast-action {
  align-self: center;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
  white-space: nowrap;
}
.toast-action:hover {
  background: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .toast-action:hover {
  background: rgba(255, 255, 255, 0.12);
}
.toast-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; opacity: 0.45; padding: 0; color: inherit;
}
.toast-close:hover { opacity: 1; }
.toast.toast--out { animation: toast-out 0.18s ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(16px); } }

/* ── Confirm Dialog ──────────────────────────────────────────────────────── */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.confirm-overlay[hidden] { display: none; }
.confirm-card {
  background: var(--surface, #fff); border-radius: 12px;
  padding: 24px 28px; max-width: 420px; width: calc(100% - 32px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  animation: toast-in 0.15s ease;
}
.confirm-msg-text {
  font-size: 15px; line-height: 1.55; color: var(--ink);
  margin: 0 0 22px; white-space: pre-wrap;
}
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Button Loading Spinner ──────────────────────────────────────────────── */
@keyframes btn-spin { to { transform: translateY(-50%) rotate(360deg); } }
.btn--loading {
  position: relative !important; pointer-events: none;
  padding-right: 34px !important;
}
.btn--loading::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: var(--accent, #2563eb);
  animation: btn-spin 0.55s linear infinite;
}
.primary-button.btn--loading::after,
.lp-btn-primary.btn--loading::after,
.auth-google-btn.btn--loading::after {
  border-color: rgba(255,255,255,0.35);
  border-top-color: #fff;
}

/* ── Field-level validation ───────────────────────────────────────────────── */
input.field-error, select.field-error, textarea.field-error {
  border-color: var(--danger, #dc2626) !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.18);
  outline: none;
}

/* ── Password strength meter ─────────────────────────────────────────────── */
.pw-strength {
  margin-top: 6px;
  height: 4px;
  background: var(--line, #dde3f0);
  border-radius: 4px;
  overflow: hidden;
}
.pw-strength-bar {
  height: 100%;
  width: 0%;
  transition: width 0.25s, background 0.25s;
  border-radius: 4px;
}
.pw-strength-bar.pw--weak    { background: #ef4444; }
.pw-strength-bar.pw--fair    { background: #f97316; }
.pw-strength-bar.pw--good    { background: #eab308; }
.pw-strength-bar.pw--strong  { background: #22c55e; }
.pw-strength-bar.pw--vstrong { background: #16a34a; }
.pw-strength-label {
  display: block;
  font-size: 11px;
  margin-top: 3px;
  font-weight: 600;
}
.pw-strength-label.pw--weak    { color: #ef4444; }
.pw-strength-label.pw--fair    { color: #f97316; }
.pw-strength-label.pw--good    { color: #eab308; }
.pw-strength-label.pw--strong  { color: #22c55e; }
.pw-strength-label.pw--vstrong { color: #16a34a; }

/* ── Sidebar nav badge ───────────────────────────────────────────────────── */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: #ef4444; color: #fff;
  border-radius: 9px; font-size: 10px; font-weight: 800;
  margin-left: auto; flex-shrink: 0;
}

/* ── Last-saved indicator ────────────────────────────────────────────────── */
.last-saved-indicator {
  font-size: 11px; color: var(--ink-muted, #8896a6);
  white-space: nowrap; opacity: 0.8;
}
.last-saved-indicator[data-tone="success"] {
  color: var(--success, #16a34a);
  opacity: 1;
  font-weight: 750;
}
.last-saved-indicator[data-tone="warning"],
.last-saved-indicator[data-tone="syncing"] {
  color: var(--warning, #d97706);
  opacity: 1;
  font-weight: 750;
}
.last-saved-indicator[data-tone="error"] {
  color: var(--danger, #dc2626);
  opacity: 1;
  font-weight: 700;
}

/* ── Status filter bar ───────────────────────────────────────────────────── */
.status-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0 10px;
}
.status-flt-btn {
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--line, #dde3f0); background: var(--surface, #fff);
  color: var(--ink-muted, #8896a6); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.status-flt-btn:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.status-flt-btn--active {
  background: var(--ink, #1a2332); border-color: var(--ink, #1a2332); color: #fff;
}

/* ── Module empty state CTA ──────────────────────────────────────────────── */
.module-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 48px 24px; text-align: center;
  color: var(--ink-muted, #8896a6); font-size: 14px;
}
.module-empty-state p { margin: 0; }
.module-empty-state button { margin-top: 4px; }

/* ── Copy ID button ──────────────────────────────────────────────────────── */
.copy-action {
  font-size: 13px; opacity: 0.6;
}
.copy-action:hover { opacity: 1; }

/* ── Note snippet in table rows ─────────────────────────────────────────── */
.note-snip {
  font-size: 10px; color: var(--ink-muted, #8896a6);
  font-style: italic; display: block; max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Aging buckets ───────────────────────────────────────────────────────── */
.aging-panel {
  background: var(--surface); border: 1px solid var(--line, #dde3f0);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 16px;
}
.aging-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.aging-panel-head h3 { margin: 0; font-size: 14px; }
.ghost-button.tiny { font-size: 11px; padding: 3px 8px; }
.aging-buckets { display: flex; flex-direction: column; gap: 8px; }
.aging-bucket { display: grid; grid-template-columns: 90px 1fr 110px; align-items: center; gap: 10px; }
.aging-label { font-size: 12px; color: var(--ink-muted, #8896a6); }
.aging-bar-track { height: 8px; background: var(--line, #dde3f0); border-radius: 4px; overflow: hidden; }
.aging-bar { height: 100%; border-radius: 4px; transition: width 0.4s; min-width: 2px; }
.aging--current { background: var(--success); }
.aging--mild    { background: var(--warning, #eab308); }
.aging--warn    { background: #f97316; }
.aging--danger  { background: var(--danger); }
.aging-amount { font-size: 12px; font-weight: 700; text-align: right; color: var(--ink); }

/* ── Bulk action bar ─────────────────────────────────────────────────────── */
/* ── Quick-view panel ────────────────────────────────────────────────────── */
.qv-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  z-index: 8999; cursor: pointer;
}
.qv-backdrop[hidden] { display: none; }
.qv-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: 360px; max-width: 92vw;
  background: var(--surface, #fff); z-index: 9000;
  box-shadow: -4px 0 40px rgba(0,0,0,0.2);
  display: flex; flex-direction: column; overflow: hidden;
}
.qv-panel[hidden] { display: none; }
.qv-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line, #dde3f0);
  flex-shrink: 0;
}
.qv-panel-header h3 { margin: 0; font-size: 15px; }
.qv-close-btn {
  background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--ink-muted, #8896a6); padding: 2px 6px; border-radius: 6px;
}
.qv-close-btn:hover { background: var(--surface-soft, #f7f9ff); }
.qv-panel-body { overflow-y: auto; flex: 1; padding: 16px 20px 24px; }
.qv-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.qv-stat { background: var(--surface-soft, #f7f9ff); border-radius: 8px; padding: 10px 12px; }
.qv-stat span { display: block; font-size: 10px; color: var(--ink-muted, #8896a6); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.qv-stat strong { font-size: 14px; }
.qv-contact { margin-bottom: 16px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-muted, #8896a6); }
.qv-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted, #8896a6); margin-bottom: 8px; }
.qv-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.qv-list-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--line, #dde3f0); }
.qv-list-id { font-weight: 700; color: var(--ink); flex-shrink: 0; }
.qv-list-amount { margin-left: auto; font-weight: 700; }
.qv-list-date { color: var(--ink-muted, #8896a6); font-size: 11px; flex-shrink: 0; }
.qv-empty { font-size: 13px; color: var(--ink-muted, #8896a6); text-align: center; padding: 12px 0; }
.qv-footer-actions { display: flex; gap: 8px; padding-top: 8px; }
.qv-trigger {
  background: none; border: none; cursor: pointer; text-align: left; padding: 0;
  color: var(--accent, #2563eb);
}
.qv-trigger:hover strong { text-decoration: underline; }
.qv-trigger .muted-block { color: var(--ink-muted, #8896a6); }

/* ── Overdue alert banner ────────────────────────────────────────────────── */
.overdue-alert {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: var(--warning-soft); border: 1px solid var(--warning);
  border-left: 4px solid var(--warning);
  border-radius: 8px; padding: 10px 14px;
  font-size: 13px; color: var(--ink2); cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.15s;
}
.overdue-alert:hover { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
.overdue-alert--bills { background: var(--danger-soft); border-color: var(--danger); border-left-color: var(--danger); color: var(--danger); }
.overdue-alert--bills:hover { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.overdue-alert-icon { font-size: 16px; flex-shrink: 0; }

/* ── Period filter bar ───────────────────────────────────────────────────── */
.period-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 0 8px;
}
.period-btn {
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line, #dde3f0); background: var(--surface, #fff);
  color: var(--ink-muted, #8896a6); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.period-btn:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.period-btn--active {
  background: var(--accent, #2563eb); border-color: var(--accent, #2563eb);
  color: #fff;
}

/* ── Sortable table headers ──────────────────────────────────────────────── */
th { cursor: pointer; user-select: none; }
th::after { content: " ⇅"; opacity: 0.25; font-size: 10px; font-weight: 400; }
th[data-sort-dir="asc"]::after  { content: " ↑"; opacity: 0.85; }
th[data-sort-dir="desc"]::after { content: " ↓"; opacity: 0.85; }

.quote-table-shell th,
.bill-item-table th,
.po-table-shell th,
.retainer-table-shell th {
  cursor: default;
}

.quote-table-shell th::after,
.bill-item-table th::after,
.po-table-shell th::after,
.retainer-table-shell th::after {
  content: none;
}

/* ── Number input formatted hint ─────────────────────────────────────────── */
.num-hint {
  display: block;
  font-size: 11px;
  color: var(--ink-muted, #8896a6);
  margin-top: 2px;
  pointer-events: none;
}

/* ── Keyboard shortcuts panel ────────────────────────────────────────────── */
.kbd-card {
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  min-width: 340px;
  max-width: 480px;
  width: 90vw;
  overflow: hidden;
}
.kbd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line, #dde3f0);
}
.kbd-head h3 { margin: 0; font-size: 15px; }
.kbd-close-btn {
  background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-muted, #8896a6);
  padding: 2px 6px; border-radius: 6px;
}
.kbd-close-btn:hover { background: var(--surface-soft, #f7f9ff); }
.kbd-body { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.kbd-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink3, #8fa0b8); margin-top: 10px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line, #dde3f0); display: flex; align-items: center; gap: 8px;
}
.kbd-section-label:first-child { margin-top: 0; }
.kbd-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--ink3); }
.kbd-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink, #1a2332);
}
.kbd-row span { margin-left: auto; color: var(--ink-muted, #8896a6); font-size: 12px; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 5px;
  background: var(--surface-soft, #f7f9ff);
  border: 1px solid var(--line-strong, #c4cde0);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: inherit; font-size: 11px; font-weight: 700;
  color: var(--ink, #1a2332);
}

/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
@keyframes skel-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skel {
  background: linear-gradient(90deg, var(--line) 0%, var(--surface) 50%, var(--line) 100%);
  background-size: 1200px 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius);
  display: block;
}

/* screen wrapper — matches page-section padding */
.skel-screen {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 24px;
  animation: none;
}
/* dashboard header block */
.skel-dash-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 20px 22px;
  background: linear-gradient(135deg, #0b3591 0%, #1652cc 55%, #2060e8 100%);
  border-radius: var(--radius-lg);
  min-height: 96px;
}
.skel-dash-hd-btns { display: flex; gap: 8px; align-items: center; }

/* 3-column KPI row */
.skel-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.skel-kpi-tile {
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* 2-column panel row (charts) */
.skel-panel-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
.skel-panel {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* activity feed */
.skel-activity-panel {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.skel-activity-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.skel-activity-row:first-of-type { border-top: none; }
.skel-avatar {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
}
.skel-activity-lines { flex: 1; }

/* ── Sync bar (Supabase fetch indicator) ─────────────────────────────────── */
@keyframes sync-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sync-bar {
  position: sticky;
  top: 0;
  left: 0; right: 0;
  height: 2px;
  z-index: 100;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent), var(--teal), var(--accent), var(--accent-soft));
  background-size: 400% 100%;
  animation: sync-sweep 1.4s linear infinite;
  margin-bottom: -2px;
}

/* dark mode skeletons */
[data-theme="dark"] .skel {
  background: linear-gradient(90deg, #1e2530 0%, #252d3a 50%, #1e2530 100%);
  background-size: 1200px 100%;
}
[data-theme="dark"] .skel-kpi-tile,
[data-theme="dark"] .skel-panel,
[data-theme="dark"] .skel-activity-panel {
  background: #161b22;
  border-color: #2d3748;
}
[data-theme="dark"] .skel-activity-row { border-top-color: #2d3748; }

/* ── Field error flash ────────────────────────────────────────────────────── */
@keyframes field-error-ring {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  40%       { box-shadow: 0 0 0 3px var(--danger); }
}
.field-flash-error {
  animation: field-error-ring 0.55s ease;
  outline: none;
}

/* ── Scroll-to-top button ─────────────────────────────────────────────────── */
#scroll-top-btn {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, background 0.15s, color 0.15s;
  pointer-events: none;
  z-index: 1000;
}
#scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#scroll-top-btn:hover { background: var(--surface-soft); color: var(--ink); }

/* ── Professional dashboard dark mode polish ─────────────────────────────── */
[data-theme="dark"] {
  --bg: #0b1017;
  --surface: #121923;
  --surface-soft: #182231;
  --surface-tint: #10271d;
  --line: #263244;
  --line-strong: #35445a;
  --ink: #f4f7fb;
  --ink2: #a7b4c5;
  --ink3: #74849a;
  --muted: #a7b4c5;
  --success: #30d394;
  --warning: #f2b84b;
  --danger: #ff6b6b;
  --teal: #30d394;
  --success-soft: #0d261b;
  --warning-soft: #2b2110;
  --danger-soft: #2a1214;
  --chart-1: #76a9ff;
  --chart-2: #30d394;
  --chart-3: #f2b84b;
  --chart-4: #b69cff;
  --chart-5: #6ee7d8;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] body,
[data-theme="dark"] .workspace {
  background:
    radial-gradient(circle at 18% -10%, rgba(48, 211, 148, 0.08), transparent 30%),
    linear-gradient(180deg, #0b1017 0%, #0d121a 100%);
}

[data-theme="dark"] .topbar {
  background: rgba(15, 21, 30, 0.96);
  border-bottom: 1px solid #253145;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .topbar-search input {
  background: #0d141e;
  border-color: #334158;
  color: #edf3fb;
}

[data-theme="dark"] .sidebar {
  background: #090e15;
  border-right-color: #243044;
}

[data-theme="dark"] .nav-item {
  color: #a6b3c4;
}

[data-theme="dark"] .nav-item.active {
  background: linear-gradient(90deg, rgba(106, 167, 255, 0.18), rgba(48, 211, 148, 0.08));
  color: #d9e9ff;
}

[data-theme="dark"] .nav-item.active::before {
  background: rgba(106, 167, 255, 0.18);
  color: #9cc7ff;
  border-color: rgba(106, 167, 255, 0.42);
}

[data-theme="dark"] .dash-header {
  background:
    linear-gradient(135deg, rgba(106, 167, 255, 0.12) 0%, transparent 38%),
    linear-gradient(145deg, #151d28 0%, #101722 54%, #102119 100%);
  border: 1px solid #2b394e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 16px 38px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .dash-greeting,
[data-theme="dark"] .dash-period-pill {
  color: #aab7c7;
}

[data-theme="dark"] .dash-period-pill {
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dash-header-actions .ghost-button,
[data-theme="dark"] .dash-quick-btn,
[data-theme="dark"] .table-action,
[data-theme="dark"] .zoho-filter,
[data-theme="dark"] .zoho-segment {
  background: #151e2a;
  border-color: #344257;
  color: #d6e0ec;
}

[data-theme="dark"] .dash-header-actions .ghost-button:hover,
[data-theme="dark"] .dash-quick-btn:hover,
[data-theme="dark"] .table-action:hover,
[data-theme="dark"] .zoho-filter:hover {
  background: #1b2635;
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .dash-header-actions .primary-button,
[data-theme="dark"] .primary-button {
  background: linear-gradient(180deg, #2fbd73, #23894f);
  border: 1px solid rgba(126, 231, 187, 0.28);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.22);
}

[data-theme="dark"] .dash-header-actions .primary-button:hover,
[data-theme="dark"] .primary-button:hover {
  background: linear-gradient(180deg, #39cf82, #28995a);
}

[data-theme="dark"] .zoho-summary-tile {
  border-color: #2d3b50;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 30px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .zoho-summary-tile--blue {
  background: linear-gradient(150deg, #121b2c 0%, #17263d 100%);
  border-color: #315079;
}

[data-theme="dark"] .zoho-summary-tile--orange {
  background: linear-gradient(150deg, #211b10 0%, #2c2310 100%);
  border-color: #5a4218;
}

[data-theme="dark"] .zoho-summary-tile--green {
  background: linear-gradient(150deg, #0d1f18 0%, #10291f 100%);
  border-color: #25543d;
}

[data-theme="dark"] .zoho-summary-tile-icon {
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.075);
}

[data-theme="dark"] .zoho-summary-label,
[data-theme="dark"] .zoho-summary-split span {
  color: #9aa9bb;
}

[data-theme="dark"] .zoho-summary-value,
[data-theme="dark"] .zoho-summary-split b,
[data-theme="dark"] .zoho-summary-count strong {
  color: #f6f9fc;
}

[data-theme="dark"] .zoho-summary-split {
  border-top-color: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .zoho-summary-count {
  color: #8a9bb0;
}

[data-theme="dark"] .zoho-widget {
  background: #121923;
  color: #edf3fb;
  border-color: #2b384b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 18px 40px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .zoho-widget:hover {
  border-color: #34465f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 22px 48px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .zoho-widget-head h3 {
  color: #f4f7fb;
}

[data-theme="dark"] .zoho-widget-sub,
[data-theme="dark"] .zoho-cashflow-stats span,
[data-theme="dark"] .zoho-income-summary span {
  color: #9aa9bb;
}

[data-theme="dark"] .zoho-income-stat,
[data-theme="dark"] .zoho-cashflow-stat {
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .zoho-income-stat--income,
[data-theme="dark"] .zoho-cashflow-stat--in {
  background: linear-gradient(145deg, #0f3224, #0b271c);
  border-color: #1f6a4b;
}

[data-theme="dark"] .zoho-income-stat--expense,
[data-theme="dark"] .zoho-cashflow-stat--out {
  background: linear-gradient(145deg, #351619, #270f11);
  border-color: #733036;
}

[data-theme="dark"] .zoho-income-stat--profit,
[data-theme="dark"] .zoho-cashflow-stat--balance {
  background: linear-gradient(145deg, #16233a, #121d30);
  border-color: #34527d;
}

[data-theme="dark"] .zoho-income-stat strong,
[data-theme="dark"] .zoho-cashflow-stat strong {
  color: #ffffff;
}

[data-theme="dark"] .live-chart-wrap {
  padding: 10px 12px 4px;
  border: 1px solid #263447;
  border-radius: 8px;
  background: linear-gradient(180deg, #0f1620 0%, #111a26 100%);
}

[data-theme="dark"] .zoho-empty-small {
  background: #182232;
  border-color: #35445a;
  color: #9fb0c3;
}

[data-theme="dark"] .zoho-bank-row,
[data-theme="dark"] .zoho-watch-row,
[data-theme="dark"] .zoho-expense-row {
  background: #182232;
  border-color: #2c3a50;
  color: #edf3fb;
}

[data-theme="dark"] .zoho-bank-row:hover,
[data-theme="dark"] .zoho-watch-row:hover,
[data-theme="dark"] .zoho-expense-row:hover {
  background: #202c3d;
  border-color: var(--accent);
}

[data-theme="dark"] .zoho-watch-row span,
[data-theme="dark"] .zoho-bank-info span,
[data-theme="dark"] .zoho-expense-row span {
  color: #edf3fb;
}

[data-theme="dark"] .zoho-bank-info small,
[data-theme="dark"] .zoho-expense-row small {
  color: #95a5b8;
}

[data-theme="dark"] .chart-fallback {
  background: linear-gradient(145deg, #131d2a, #111923);
  border-color: #324155;
  color: #9fb0c3;
}

[data-theme="dark"] #scroll-top-btn {
  background: #172130;
  border-color: #344257;
  color: #d6e0ec;
}

/* ── Mobile layout improvements ──────────────────────────────────────────── */
@media (max-width: 680px) {
  /* --- Topbar ------------------------------------------------------------ */
  .topbar h2         { font-size: 18px; }
  .topbar .eyebrow   { font-size: 11px; }

  /* Keep the topbar to one tight row: hamburger | title | actions
     Search moves to its own row (order:3 already set) */
  .topbar { gap: 8px; }
  .topbar > div:first-of-type { flex: 1; min-width: 0; } /* title block fills */

  /* --- Section header ---------------------------------------------------- */
  /* Stack title+description above the action button(s) */
  .section-header {
    flex-direction: column;
    align-items: stretch;
  }
  .section-header > div { flex: 1; }
  /* Button row aligns to the right */
  .section-header > div:last-child,
  .section-header > button,
  .section-header > a {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .section-header > .primary-button,
  .section-header > .ghost-button {
    flex: 1;
  }

  .stg-action-grid {
    flex-direction: column;
  }
  .stg-action-grid .primary-button,
  .stg-action-grid .ghost-button {
    width: 100%;
    justify-content: center;
  }
  .role-grid,
  .health-summary {
    grid-template-columns: 1fr;
  }
  .role-grid {
    padding: 0 12px 12px;
  }

  /* --- Touch targets ----------------------------------------------------- */
  /* Nav items: 44 px min-height for comfortable tapping */
  .nav-item, .nav-item.nested { min-height: 44px; }

  /* Form controls: 16px prevents iOS from auto-zooming on focus;
     44px min-height gives a comfortable tap area */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }
  textarea { min-height: 80px; }

  /* Table action buttons — room to tap */
  .table-action, .inline-actions button { min-height: 36px; min-width: 36px; }

  /* --- Tables ------------------------------------------------------------ */
  /* Tighter cell padding, smaller text to fit more columns */
  th, td { padding: 8px 9px; font-size: 13px; }
  table  { min-width: 560px; }

  /* Touch-momentum scroll */
  .table-shell { -webkit-overflow-scrolling: touch; position: relative; }

  /* Right-edge gradient → signals horizontal scroll to the user */
  .table-shell::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to left, var(--surface) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  /* --- Dashboard header -------------------------------------------------- */
  .dash-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    min-height: auto;
  }
  .dash-header-actions { width: 100%; }
  .dash-header-actions button { flex: 1; justify-content: center; }

  .dashboard-focus-grid,
  .dashboard-focus-grid--single,
  .dashboard-empty-chart {
    grid-template-columns: 1fr;
  }

  .dashboard-setup-list {
    grid-template-columns: 1fr;
  }

  .dashboard-setup-step {
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .dashboard-empty-chart {
    min-height: 0;
  }

  .dashboard-empty-chart-bars {
    height: 96px;
  }

  .bk-reconcile-strip {
    grid-template-columns: 1fr;
  }

  /* --- Dashboard KPI tiles: already 1-col via existing rule -------------- */
  /* Make tiles slightly more compact vertically */
  .zoho-summary-tile { padding: 14px 16px 12px; }

  /* --- Skeleton layout on mobile ---------------------------------------- */
  .skel-screen    { padding: 12px; gap: 10px; }
  .skel-panel-row { grid-template-columns: 1fr; }

  /* --- Module metric cards: 2 per row ------------------------------------ */
  .module-summary-row { flex-wrap: wrap; }
  .metric-card.compact {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  /* --- Item picker dropdown: don't overflow viewport --------------------- */
  .item-picker-dropdown {
    min-width: 0;
    max-width: calc(100vw - 32px);
  }

  /* --- Quick view panel: full width on mobile ---------------------------- */
  #quick-view-panel {
    width: 100% !important;
    max-width: 100%;
    border-left: none;
    border-top: 1px solid var(--line);
  }

  /* --- Workspace: tighter gap -------------------------------------------- */
  .workspace { gap: 12px; }
}

/* Very small phones (< 420px) -------------------------------------------- */
@media (max-width: 420px) {
  .workspace  { padding: 8px; gap: 8px; }
  .topbar     { padding: 8px 10px; border-radius: 6px; }
  .topbar h2  { font-size: 16px; }
  th, td      { padding: 7px 7px; font-size: 12px; }
  table       { min-width: 480px; }
  .section-header h3 { font-size: 16px; }
  .skel-kpi-row { grid-template-columns: 1fr; }
  .skel-dash-hd { min-height: 80px; padding: 14px 14px; }
}

/* ── Custom Module Overview / Dashboard ──────────────────────────────────── */
.cm-overview { padding: 20px 24px; }
.cm-overview-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.cm-overview-card { min-width: 150px; }
.cm-overview-sub {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 2px;
}
.cm-progress-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 6px 0 4px;
  overflow: hidden;
}
.cm-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width .3s;
}
.cm-recent-section { border-top: 1px solid var(--line); padding-top: 14px; }
.cm-recent-section > .eyebrow { display: block; margin-bottom: 10px; }
.cm-recent-list { display: flex; flex-direction: column; gap: 6px; }
.cm-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface-soft);
}
.cm-recent-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cm-recent-date { font-size: 12px; color: var(--text-muted, #888); flex-shrink: 0; }

/* ── Custom Module Record Detail View ────────────────────────────────────── */
.cm-detail-panel { padding: 24px; }
.cm-detail-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.cm-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cm-detail-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #888);
}
.cm-detail-value {
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}
.cm-detail-textarea { white-space: pre-wrap; }
.cm-detail-empty { color: var(--text-muted, #aaa); }
.cm-detail-yes { color: var(--success, #16a34a); font-weight: 500; }
.cm-detail-no  { color: var(--text-muted, #888); }
.cm-detail-link { color: var(--accent); text-decoration: none; }
.cm-detail-link:hover { text-decoration: underline; }
.cm-detail-image {
  max-width: 160px;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.cm-detail-meta {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--text-muted, #888);
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

/* ── Custom Module Comments / Notes ──────────────────────────────────────── */
.cm-comments-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.cm-comments-header {
  margin-bottom: 10px;
}
.cm-comments-empty {
  color: var(--text-muted, #888);
  font-size: 13px;
  margin: 0 0 12px;
}
.cm-comment {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-soft);
  margin-bottom: 8px;
}
.cm-comment-body {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.cm-comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted, #888);
}
.cm-comment-delete {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--danger, #e11d48);
  cursor: pointer;
  opacity: 0.6;
}
.cm-comment-delete:hover { opacity: 1; }
.cm-comment-add {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 10px;
}
.cm-comment-add .cm-comment-input {
  flex: 1;
  resize: none;
}
.cm-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-soft);
  margin-bottom: 6px;
}
.cm-attachment-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cm-attachment-name {
  /* A button now, not a link — the file needs a signed URL fetched on click.
     Strip the browser's own button chrome so it still reads as a file name. */
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cm-attachment-name:hover { text-decoration: underline; }
.cm-attachment-size {
  font-size: 12px;
  color: var(--text-muted, #888);
}

/* ── Custom Module Status Field ───────────────────────────────────────────── */
.cm-status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Custom Module Link Fields ────────────────────────────────────────────── */
.cm-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-soft, rgba(99,102,241,.10));
  color: var(--accent);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Custom Module Image Fields ───────────────────────────────────────────── */
.cm-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
  vertical-align: middle;
  display: inline-block;
}
.cm-image-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.cm-image-preview {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.cm-image-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cm-image-controls .stg-input[type="file"] {
  padding: 6px 8px;
  cursor: pointer;
}

/* ── Custom Module Activity Log ───────────────────────────────────────────── */
.cm-history-list { display: flex; flex-direction: column; gap: 0; }
.cm-history-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cm-history-entry:last-child { border-bottom: none; }
.cm-history-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  background: var(--text-muted, #888);
}
.cm-history-dot--create  { background: #16a34a; }
.cm-history-dot--update  { background: var(--accent); }
.cm-history-dot--note    { background: #0284c7; }
.cm-history-dot--attach  { background: #7c3aed; }
.cm-history-dot--delete  { background: #dc2626; }
.cm-history-body {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cm-history-detail { font-size: 13px; color: var(--text, #111); }
.cm-history-date   { font-size: 12px; color: var(--text-muted, #888); flex-shrink: 0; }

/* ── Production mobile experience polish ─────────────────────────────────── */
@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .workspace {
    width: 100%;
    padding: 12px;
    gap: 12px;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1001;
    width: min(86vw, 340px);
    min-height: 100vh;
    height: 100dvh;
    gap: 14px;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #0b3591 0%, #0a2c76 52%, #081f55 100%);
    transform: translateX(-104%);
    transition: transform .22s ease, box-shadow .22s ease;
    border-right: 0;
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 22px 0 55px rgba(7, 18, 46, 0.28);
  }

  .sidebar-backdrop {
    display: block;
  }

  .sidebar-toggle {
    display: inline-flex;
  }

  .sidebar-card {
    display: none;
  }

  .brand-block {
    position: sticky;
    top: -12px;
    z-index: 2;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    margin: -2px -2px 2px;
    padding: 12px 7px 16px;
    border-bottom-color: rgba(255, 255, 255, 0.16);
    background: linear-gradient(180deg, rgba(11, 53, 145, 0.98), rgba(10, 44, 118, 0.92));
  }

  .brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    padding: 6px;
  }

  .brand-block h1 {
    font-size: 16px;
  }

  .sidebar .eyebrow {
    color: rgba(237, 245, 251, 0.64);
    font-size: 10px;
    letter-spacing: 0;
  }

  .sidebar-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
  }

  .sidebar-close:hover,
  .sidebar-close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
  }

  .nav-list {
    gap: 13px;
    padding: 0 1px 4px;
  }

  .nav-group {
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.055);
  }

  .nav-group + .nav-group {
    margin-top: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
  }

  .nav-group-label {
    padding: 2px 9px 6px;
    color: rgba(237, 245, 251, 0.62);
    font-size: 10px;
    letter-spacing: 0;
  }

  .nav-item,
  .nav-item.nested {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(237, 245, 251, 0.88);
    font-size: 14px;
    font-weight: 720;
  }

  .nav-item.nested {
    padding-left: 10px;
  }

  .nav-item::before {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(237, 245, 251, 0.80);
  }

  .nav-item:hover {
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
  }

  .nav-item.active {
    border-color: rgba(255, 255, 255, 0.72);
    background: #fff;
    color: #0b3591;
    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.65);
  }

  .nav-item.active::before {
    background: var(--teal);
    color: #fff;
  }

  .nav-item--locked::after {
    right: 12px;
  }

  .sidebar-account {
    margin: auto 2px 0;
    padding: 12px;
    border-color: rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.075);
  }

  .sidebar-account-label {
    color: rgba(237, 245, 251, 0.62);
    letter-spacing: 0;
  }

  .sidebar-logout {
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.12);
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
  }

  .topbar > div:first-of-type {
    min-width: 0;
  }

  .topbar h2 {
    overflow: hidden;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar .eyebrow {
    font-size: 10px;
  }

  .topbar-search {
    grid-column: 1 / -1;
    order: 4;
    flex-basis: auto;
    max-width: none;
  }

  .topbar-search input {
    min-height: 44px;
    font-size: 16px;
  }

  .topbar-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .last-saved-indicator {
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .subscription-badge,
  .topbar-logout {
    display: none !important;
  }

  .topbar-theme-toggle,
  .sidebar-toggle {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .panel,
  .metric-card,
  .zoho-widget,
  .dashboard-setup-panel,
  .dashboard-empty-guide,
  .modal-card,
  .bk-reconcile-card,
  .bk-accounts-card,
  .bk-active-section {
    border-radius: 10px;
  }

  .content-grid,
  .split-layout,
  .setup-layout,
  .report-grid,
  .zoho-dashboard-grid,
  .dashboard-focus-grid,
  .dashboard-focus-grid--single,
  .zoho-summary-bar,
  .stats-inline,
  .zoho-income-summary,
  .bk-reconcile-strip,
  .bk-account-summary-row,
  .form-row-2col,
  .field-row,
  .sr-payment-grid,
  .stg-form-grid,
  .custom-record-grid,
  .cm-overview-kpis {
    grid-template-columns: 1fr;
  }

  /* Metric cards: 3 per row at tablet instead of 1 */
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .module-summary-row,
  .pmade-summary-row,
  .ts-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-setup-list {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-setup-step {
    min-width: 190px;
    min-height: 92px;
    scroll-snap-align: start;
  }

  .dash-header {
    align-items: stretch;
    padding: 16px;
    border-radius: 12px;
  }

  .dash-header,
  .module-toolbar,
  .pmade-list-header,
  .pmade-filter-row,
  .bk-toolbar,
  .bk-detail-acct-row,
  .bk-txn-header,
  .stg-content-header,
  .modal-footer {
    flex-direction: column;
  }

  .dash-header-actions,
  .module-actions,
  .pmade-list-actions,
  .pmade-filter-tabs,
  .pmade-search,
  .bk-toolbar-actions,
  .bk-detail-actions,
  .dashboard-empty-actions,
  .inline-actions,
  .quick-links,
  .modal-footer {
    width: 100%;
  }

  .dash-header-actions .ghost-button,
  .dash-header-actions .primary-button,
  .module-actions > *,
  .pmade-list-actions > *,
  .bk-toolbar-actions > *,
  .bk-detail-actions > *,
  .modal-footer > *,
  .dashboard-empty-action,
  .dash-quick-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .dash-quick-actions,
  .quick-create-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .dash-quick-btn,
  .quick-create-tile {
    min-width: 0;
    white-space: normal;
  }

  .table-shell,
  .pmade-table-wrap,
  .pmade-bills-table-wrap,
  .bk-txn-table-wrap,
  .report-table-shell,
  .line-editor,
  .items-table-wrap,
  .ts-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 620px;
  }

  th,
  td {
    padding: 9px 10px;
    font-size: 13px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .field-input,
  .pmade-input,
  .stg-input {
    min-height: 44px;
    font-size: 16px;
  }

  textarea,
  .field textarea {
    min-height: 92px;
  }

  .table-action,
  .ghost-button,
  .primary-button,
  .danger-button,
  .pmade-filter-tabs button,
  .bk-tab {
    min-height: 42px;
  }

  .pmade-summary-row > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .pmade-summary-row > div:last-child {
    border-bottom: 0;
  }

  .pmade-search input {
    width: 100%;
    min-width: 0;
  }

  .invoice-record-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .invoice-record-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .invoice-record-list-body {
    max-height: 320px;
  }

  .invoice-record-titlebar {
    min-height: 0;
    padding: 14px;
  }

  .invoice-record-titlebar h3 {
    font-size: 20px;
  }

  .invoice-record-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 8px;
  }

  .invoice-record-toolbar .table-action {
    flex: 0 0 auto;
  }

  .invoice-preview-paper {
    margin: 12px 0 20px;
    padding: 28px 16px 24px;
    box-shadow: var(--shadow-sm);
  }

  .invoice-preview-top,
  .invoice-preview-meta,
  .invoice-next-main,
  .invoice-next-secondary {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .invoice-preview-title {
    justify-items: start;
  }

  .invoice-preview-title h2 {
    font-size: 30px;
  }

  .invoice-preview-meta {
    margin-top: 34px;
  }

  .invoice-preview-lines {
    min-width: 560px;
  }

  .invoice-preview-totals {
    grid-template-columns: 1fr auto;
    padding-right: 0;
  }

  .bk-detail-topbar {
    padding: 16px;
  }

  .bk-detail-balance {
    font-size: 24px;
  }

  .bk-tabs-bar {
    overflow-x: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
  }

  .bk-tab {
    flex: 0 0 auto;
    padding: 11px 14px;
  }

  .bk-txn-acct-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .stg-layout {
    flex-direction: column;
    min-height: 0;
  }

  .stg-sidebar {
    width: 100%;
    max-height: 250px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .stg-main {
    padding: 14px;
    overflow: visible;
  }

  .stg-panel {
    max-width: 100%;
  }

  .modal-overlay {
    align-items: stretch;
    padding: 0;
  }

  .modal-card {
    max-height: 100dvh;
    border-radius: 0;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .auth-page-bg {
    min-height: 100dvh;
  }

  .auth-page-right {
    padding: 22px 16px;
  }

  .auth-page-panel {
    max-width: 100%;
  }

  .auth-page-logo {
    width: 62px;
    height: 62px;
  }
}

@media (max-width: 520px) {
  .workspace {
    padding: 8px;
  }

  .topbar {
    border-radius: 8px;
  }

  .last-saved-indicator {
    display: none;
  }

  .module-summary-row,
  .pmade-summary-row,
  .ts-summary-bar,
  .dash-quick-actions,
  .quick-create-strip {
    grid-template-columns: 1fr;
  }

  .zoho-summary-tile,
  .zoho-widget,
  .panel,
  .metric-card {
    padding: 14px;
  }

  .zoho-summary-value {
    font-size: 26px;
  }

  .table-empty-state {
    padding: 38px 16px;
  }
}

/* ── Platform owner dashboard ─────────────────────────────────────────────── */
.platform-admin-nav[hidden] {
  display: none !important;
}

.admin-page {
  display: grid;
  gap: 16px;
}

.admin-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px;
}

.admin-hero h3 {
  margin: 4px 0 8px;
  font-size: 22px;
}

.admin-hero p {
  margin: 0;
  color: var(--muted);
  max-width: 760px;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.admin-summary-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.admin-summary-card span,
.admin-summary-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.admin-summary-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--text);
  font-size: 26px;
}

.admin-summary-card--good {
  border-color: rgba(34, 197, 94, .34);
  background: linear-gradient(180deg, rgba(34, 197, 94, .08), var(--card));
}

.admin-summary-card--warn {
  border-color: rgba(245, 158, 11, .38);
  background: linear-gradient(180deg, rgba(245, 158, 11, .09), var(--card));
}

.admin-panel {
  padding: 0;
  overflow: hidden;
}

/* ── Admin setup status panel ───────────────────────────────────────────── */
.admin-setup-panel { padding: 18px 22px; }
.admin-setup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admin-setup-header h4 { margin: 0 0 3px; font-size: 15px; font-weight: 700; }
.admin-setup-header p  { margin: 0; font-size: 13px; color: var(--ink2); }
.admin-setup-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.admin-setup-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}
.admin-setup-check.is-ok      { background: #f0fdf4; border: 1px solid #bbf7d0; }
.admin-setup-check.is-missing { background: #fef2f2; border: 1px solid #fecaca; }
.admin-setup-check .asc-icon  { font-size: 15px; line-height: 1.2; flex-shrink: 0; }
.admin-setup-check strong { display: block; font-weight: 600; color: var(--ink); }
.admin-setup-check span   { display: block; color: var(--ink2); margin-top: 2px; font-size: 12px; }
[data-theme="dark"] .admin-setup-check.is-ok      { background: #052e24; border-color: #047857; }
[data-theme="dark"] .admin-setup-check.is-missing { background: #1c0a0a; border-color: #b91c1c; }

.admin-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.admin-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--input-bg);
  color: var(--text);
}

.admin-status-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.admin-status-tabs button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  padding: 0 10px;
  font-weight: 700;
  cursor: pointer;
}

.admin-status-tabs button.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(37, 99, 235, .08);
}

.admin-error,
.admin-loading {
  margin: 14px 16px 0;
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 700;
}

.admin-error {
  border: 1px solid rgba(239, 68, 68, .25);
  color: #b91c1c;
  background: rgba(254, 226, 226, .75);
}

.admin-loading {
  border: 1px solid rgba(37, 99, 235, .18);
  color: var(--primary);
  background: rgba(37, 99, 235, .07);
}

.admin-table-shell {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.admin-table-shell td strong,
.admin-table-shell td small {
  display: block;
}

.admin-table-shell td small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

/* Client rows carry a lot of controls, so the table leans on generous vertical
   rhythm and a quiet header to stay readable. */
.admin-table-shell thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.admin-table-shell tbody td {
  padding-top: 14px;
  padding-bottom: 14px;
  vertical-align: middle;
}
.admin-table-shell tbody tr {
  transition: background 0.14s ease;
}
.admin-table-shell tbody tr:hover {
  background: color-mix(in srgb, var(--brand, #2563eb) 4%, transparent);
}
.admin-table-shell td:first-child strong {
  font-size: 13.5px;
  letter-spacing: -0.01em;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

/* Each control carries a small caption so the row reads as labelled fields
   rather than a wall of similar buttons. */
.aa-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.aa-field { align-items: flex-start; }
.aa-num--wide { width: 68px; }
.aa-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
  white-space: nowrap;
}
.aa-control {
  display: inline-flex;
  align-items: stretch;
}
/* The resulting end date, so the term reads as a choice being made rather than
   a fact being reported. */
.aa-hint {
  margin-left: 5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand, #2563eb);
  opacity: 0.9;
}
.aa-control--gap { gap: 6px; }

.aa-num,
.aa-select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.aa-num {
  width: 54px;
  text-align: center;
  border-radius: 8px 0 0 8px;
  /* Spinners steal room from four-digit seat counts and read as clutter. */
  appearance: textfield;
  -moz-appearance: textfield;
}
.aa-num::-webkit-outer-spin-button,
.aa-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.aa-select {
  border-radius: 0 8px 8px 0;
  border-left: none;
  padding-right: 4px;
}
.aa-num:focus,
.aa-select:focus {
  outline: 2px solid color-mix(in srgb, var(--brand, #2563eb) 45%, transparent);
  outline-offset: -1px;
  z-index: 1;
}

/* Buttons share one silhouette so weight comes from colour, not size. */
.admin-actions .table-action {
  height: 32px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.admin-actions .aa-btn--quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.admin-actions .aa-btn--quiet:hover {
  background: var(--surface-soft);
  color: inherit;
}

/* Plan choice is one control, with the client's current plan filled in. */
.aa-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-soft);
}
.admin-actions .aa-seg-btn {
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}
.admin-actions .aa-seg-btn:last-child { border-right: none; }
.admin-actions .aa-seg-btn:hover {
  background: color-mix(in srgb, var(--brand, #2563eb) 10%, transparent);
  color: inherit;
}
.admin-actions .aa-seg-btn.is-current {
  background: var(--brand, #2563eb);
  color: #fff;
  font-weight: 700;
}

.admin-actions .aa-btn--danger {
  background: transparent;
  border-color: color-mix(in srgb, #dc2626 45%, var(--line));
  color: #dc2626;
}
.admin-actions .aa-btn--danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

/* The owner grant is permanent, so it reads as its own thing rather than
   sitting alongside the plans that are actually sold. */
.admin-actions .table-action.admin-owner-action {
  background: transparent;
  border-color: #7c3aed;
  color: #7c3aed;
  font-weight: 700;
}
.admin-actions .table-action.admin-owner-action:hover {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.admin-rangebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 0 4px 12px;
}
.admin-range {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-range .aa-select {
  border-radius: 8px;
  border-left: 1px solid var(--line);
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}
.admin-range-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
.admin-range-count strong {
  font-size: 14px;
  color: inherit;
}

/* Days remaining, coloured so the ones needing a decision find you. */
.admin-table-shell td small.admin-daysleft {
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
}
.admin-table-shell td small.admin-daysleft.is-urgent { color: #b45309; }
.admin-table-shell td small.admin-daysleft.is-gone { color: #dc2626; }

.admin-team {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.admin-team strong { font-size: 14px; }
/* Marks a client whose seat count was set by hand rather than by their plan. */
.admin-table-shell td small.admin-team-note {
  font-size: 10.5px;
  font-weight: 700;
  color: #7c3aed;
  white-space: nowrap;
}
/* At capacity — the client to call about an upgrade. */
.admin-team--full strong { color: #b45309; }

.admin-empty {
  padding: 28px;
}

.admin-empty h3 {
  margin: 0 0 8px;
}

.admin-empty p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 980px) {
  .admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-status-tabs {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .admin-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ── AI Assistant Chat ────────────────────────────────────────────────────── */
.ai-chat-fab {
  position: fixed;
  bottom: 82px;
  right: 20px;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(32, 96, 232, 0.38);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ai-chat-fab span { display: none; }
.ai-chat-fab:hover {
  background: var(--accent-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(32, 96, 232, 0.46);
}
.ai-chat-fab[hidden] { display: none; }

.ai-chat-panel {
  position: fixed;
  bottom: 136px;
  right: 20px;
  z-index: 1200;
  width: 360px;
  max-height: 520px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(11, 53, 145, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ai-panel-in 0.2s ease;
}
.ai-chat-panel[hidden] { display: none; }
@keyframes ai-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}
.ai-chat-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ai-chat-name { font-size: 14px; font-weight: 700; line-height: 1.2; }
.ai-chat-sub  { font-size: 11.5px; opacity: 0.8; }
.ai-chat-close {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 6px;
  color: #fff;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
}
.ai-chat-close:hover { background: rgba(255,255,255,0.28); }

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.ai-msg { display: flex; }
.ai-msg--user { justify-content: flex-end; }
.ai-msg--bot  { justify-content: flex-start; }
.ai-msg-bubble {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg--user .ai-msg-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.ai-msg--bot .ai-msg-bubble {
  background: var(--bg);
  color: var(--ink);
  border-bottom-left-radius: 3px;
}
.ai-msg-typing .ai-msg-bubble {
  color: var(--muted);
  font-style: italic;
}

.ai-chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.ai-chat-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s;
}
.ai-chat-input:focus { border-color: var(--accent); }
.ai-chat-send {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.ai-chat-send:hover { background: var(--accent-strong); }
.ai-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── AI trial counter ── */
.ai-trial-counter {
  padding: 6px 14px;
  font-size: 11.5px;
  color: var(--ink2);
  background: var(--surface-soft);
  border-top: 1px solid var(--line);
  text-align: center;
}
.ai-trial-counter--low { color: #d97706; background: #fffbeb; }
.ai-trial-counter--empty { color: #bf342d; background: #fdebea; }

/* ── AI upgrade card ── */
.ai-upgrade-card {
  margin: 10px 12px;
  background: linear-gradient(145deg, #0f1e3d, #1a2d5a);
  border: 1px solid #2d4a8a;
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  color: #fff;
}
.ai-upgrade-icon { font-size: 26px; margin-bottom: 8px; }
.ai-upgrade-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.ai-upgrade-body { font-size: 12.5px; color: #93c5fd; line-height: 1.5; margin-bottom: 14px; }
.ai-upgrade-price { margin-bottom: 14px; }
.ai-upgrade-amount { font-size: 32px; font-weight: 800; color: #fff; }
.ai-upgrade-period { font-size: 14px; color: #93c5fd; }
.ai-upgrade-list {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.ai-upgrade-list li {
  font-size: 12.5px; color: #bfdbfe;
  padding-left: 18px; position: relative;
}
.ai-upgrade-list li::before {
  content: "✓"; position: absolute; left: 0;
  color: #4ade80; font-weight: 700;
}
.ai-upgrade-btn {
  width: 100%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ai-upgrade-btn:hover { opacity: 0.9; }

@media (max-width: 480px) {
  .ai-chat-panel {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 130px;
  }
  .ai-chat-fab { bottom: 80px; right: 14px; }
}

/* ── Add Transaction Modal (Zoho-style) ───────────────────────────────────── */
.bk-txn-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--line);
  padding: 0 6px;
  background: var(--surface-soft);
  flex-shrink: 0;
}
.bk-txn-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.bk-txn-tab-btn:hover { color: var(--ink); }
.bk-txn-tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; }
.bk-txn-modal-acct {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.bk-txn-ref {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface-soft);
  border-radius: 4px;
  border: 1px solid var(--line);
}

/* ── Banking Add Transaction side panel ──────────────────────────────────── */
.bk-txn-side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  z-index: 400;
  flex-direction: column;
  pointer-events: auto;
}

.bk-txn-panel-scroll {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.14);
  overflow-y: auto;
}

.bk-txn-panel-scroll .modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
  flex-shrink: 0;
}

.bk-txn-panel-scroll .bk-txn-tab-bar {
  flex-shrink: 0;
  padding: 0 20px;
}

.bk-txn-panel-scroll .modal-body {
  flex: 1;
  padding: 16px 20px 24px;
  overflow-y: visible;
}

.bk-txn-panel-scroll .modal-footer {
  padding: 0 !important;
  margin-top: 8px !important;
}

@keyframes bkPanelIn {
  from { transform: translateX(100%); opacity: 0.6; }
  to   { transform: translateX(0);    opacity: 1; }
}

.bk-txn-side-panel[style*="flex"] {
  animation: bkPanelIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .bk-txn-panel-scroll {
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.38);
}

@media (max-width: 520px) {
  .bk-txn-side-panel { width: 100vw; }
}

/* Banking account "Add Transaction" menu */
#bk-add-txn-dropdown {
  min-width: 280px !important;
  max-height: min(46vh, 420px) !important;
  overflow-y: auto !important;
  padding: 8px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  animation: bkTxnDropdownIn 0.14s ease-out;
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 99, 235, 0.32) transparent;
}

#bk-add-txn-dropdown::-webkit-scrollbar {
  width: 8px;
}

#bk-add-txn-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

#bk-add-txn-dropdown::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.28);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

#bk-add-txn-dropdown > div[style*="font-size:10px"] {
  margin: 2px 0 4px !important;
  padding: 9px 10px 6px !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
}

#bk-add-txn-dropdown > div[style*="height:1px"] {
  height: 1px !important;
  margin: 8px 4px !important;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.36), transparent) !important;
}

#bk-add-txn-dropdown button[data-action="select-bk-txn-type"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: #334155 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

#bk-add-txn-dropdown button[data-action="select-bk-txn-type"]::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.13);
}

#bk-add-txn-dropdown button[data-tab="withdrawal"]::before {
  background: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13);
}

#bk-add-txn-dropdown button[data-tab="deposit"]::before {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.13);
}

#bk-add-txn-dropdown button[data-action="select-bk-txn-type"]:hover,
#bk-add-txn-dropdown button[data-action="select-bk-txn-type"]:focus-visible {
  color: #1d4ed8 !important;
  background: rgba(37, 99, 235, 0.1) !important;
  transform: translateX(2px);
  outline: none;
}

@keyframes bkTxnDropdownIn {
  from {
    opacity: 0.72;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-theme="dark"] .bk-txn-tab-btn.active { color: #60a5fa; border-bottom-color: #60a5fa; }

[data-theme="dark"] #bk-add-txn-dropdown {
  border-color: rgba(96, 165, 250, 0.2) !important;
  background: linear-gradient(180deg, #111827 0%, #0b1220 100%) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  scrollbar-color: rgba(96, 165, 250, 0.34) transparent;
}

[data-theme="dark"] #bk-add-txn-dropdown::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.34);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme="dark"] #bk-add-txn-dropdown > div[style*="font-size:10px"] {
  color: #7c8aa3 !important;
}

[data-theme="dark"] #bk-add-txn-dropdown > div[style*="height:1px"] {
  background: linear-gradient(90deg, transparent, rgba(71, 85, 105, 0.72), transparent) !important;
}

[data-theme="dark"] #bk-add-txn-dropdown button[data-action="select-bk-txn-type"] {
  color: #d7e2f0 !important;
}

[data-theme="dark"] #bk-add-txn-dropdown button[data-action="select-bk-txn-type"]:hover,
[data-theme="dark"] #bk-add-txn-dropdown button[data-action="select-bk-txn-type"]:focus-visible {
  color: #f8fafc !important;
  background: rgba(59, 130, 246, 0.16) !important;
}

/* ── Mobile overrides for new banking features ────────────────────────────── */
@media (max-width: 520px) {
  /* Tab buttons shrink on small phones */
  .bk-txn-tab-bar { padding: 0 2px; }
  .bk-txn-tab-btn {
    padding: 10px 10px;
    font-size: 12px;
    gap: 4px;
    flex: 1;
    justify-content: center;
  }
  .bk-txn-tab-btn svg { display: none; }

  /* Add Transaction modal fills the screen */
  .modal-overlay { padding: 8px; }
  .modal-card { border-radius: 12px; }
  .modal-body { padding: 14px 14px; }
  .modal-header { padding: 14px 16px 12px; }

  /* Reconciliation: stack columns vertically */
  .recon-summary { grid-template-columns: 1fr 1fr; }
  .recon-columns { grid-template-columns: 1fr; }
  .recon-col--payments { border-left: none; border-top: 1px solid var(--line); }

  /* Banking detail: keep action buttons accessible */
  .bk-detail-topbar { padding: 14px 14px; }
  .bk-detail-balance { font-size: 22px; }

  #bk-add-txn-dropdown {
    left: 0 !important;
    right: auto !important;
    min-width: min(300px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: min(58vh, 460px) !important;
  }
}

@media (max-width: 760px) {
  /* Banking table scrolls horizontally — min-width keeps columns readable */
  .bk-txn-table-wrap table { min-width: 560px; }

  /* Reconciliation stat strip: 2 per row */
  .recon-summary { grid-template-columns: 1fr 1fr; }

  /* Tab bar: tighter padding */
  .bk-txn-tab-btn { padding: 10px 14px; }
}

/* ── My Account card ─────────────────────────────────────────────────────── */
.my-acct-identity {
  display: flex; align-items: center; gap: 16px; padding: 10px 0;
}
.my-acct-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 800; flex-shrink: 0;
}
.my-acct-email {
  font-size: 16px; font-weight: 700; color: var(--ink);
  word-break: break-all;
}
.my-acct-hint {
  font-size: 13px; color: var(--muted); margin-top: 4px;
}
@media (max-width: 480px) {
  .my-acct-identity { flex-direction: column; align-items: flex-start; gap: 12px; }
  .my-acct-email { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE IMPROVEMENTS — Dashboard · Invoices/Bills · Banking · Reports
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard ────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* Metric cards: 2 per row on phones */
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Dashboard widgets: tighter padding */
  .zoho-widget { padding: 14px 14px; }
  .zoho-widget-head { margin-bottom: 10px; }
  .zoho-widget-head h3 { font-size: 14px; }
  .zoho-widget-wide { grid-column: span 1; }

  /* Trial banner: compact */
  .dash-trial-card { padding: 14px 16px; }

  /* Quick actions: 2 columns */
  .dash-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-quick-btn { font-size: 12px; padding: 10px 8px; }

  /* Bank widget rows: hide institution, show balance prominently */
  .zoho-bank-row small { display: none; }
  .zoho-bank-row b { font-size: 15px; }
}

/* ── Invoices & Bills ─────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* Invoice list: hide less critical columns */
  .invoice-list-cols th:nth-child(3),
  .invoice-list-cols td:nth-child(3) { display: none; }

  /* Invoice record header stacks */
  .invoice-record-titlebar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Line editor scrolls horizontally — minimum width keeps it usable */
  .line-editor { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .line-editor-head,
  .line-editor-row { min-width: 560px; }

  /* Totals section: full width */
  .invoice-totals-wrap { width: 100%; max-width: 100%; }

  /* Bill form: compact */
  .bill-form-header { gap: 10px; }
}

@media (max-width: 520px) {
  /* Action bar buttons stack vertically */
  .invoice-action-bar,
  .bill-action-bar { flex-wrap: wrap; gap: 8px; }
  .invoice-action-bar > *,
  .bill-action-bar > * { flex: 1 1 calc(50% - 4px); min-width: 120px; justify-content: center; }

  /* Invoice preview on mobile: no side padding */
  .invoice-preview-paper { padding: 20px 16px !important; }
}

/* ── Banking & Transactions ───────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* Account cards in overview: stack balance info */
  .bk-account-card { padding: 14px 16px; }
  .bk-detail-balance { font-size: 24px; }
  .bk-detail-balance-label { font-size: 11px; }

  /* Detail topbar: tighter */
  .bk-detail-topbar { padding: 14px 16px; }

  /* Action buttons row: full width, equal size */
  .bk-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }
  .bk-detail-actions .bk-sm-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Tab bar in transaction list: equal width */
  .bk-tabs-bar { gap: 0; }
  .bk-tab { flex: 1; justify-content: center; padding: 10px 6px; font-size: 12px; }

  /* Transaction table: horizontal scroll */
  .bk-txn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bk-txn-table-wrap table { min-width: 520px; }
}

/* ── Reports ──────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* Filter bar: 2 columns */
  .report-filter-bar {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  /* Run button spans full width */
  .report-filter-bar > *:last-child { grid-column: 1 / -1; }

  /* Report table: horizontal scroll with touch */
  .report-table-shell,
  .report-paper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .report-table { min-width: 480px; }
  .report-statement { min-width: 0; }

  /* Report action bar: wrap */
  .report-action-bar { flex-wrap: wrap; gap: 8px; }

  .report-actions,
  .report-view-toggle,
  .report-export-wrap,
  .report-actions .ghost-button {
    width: 100%;
  }

  .report-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-view-toggle,
  .report-export-wrap {
    grid-column: 1 / -1;
  }

  .report-actions .report-icon-action {
    width: 100%;
    min-width: 0;
  }

  .report-icon-label {
    display: inline;
  }

  .report-view-toggle button {
    flex: 1;
  }

  .report-export-menu {
    width: 100%;
  }

  .report-chart-panel {
    padding: 14px;
  }

  .report-chart-head,
  .report-chart-row {
    grid-template-columns: 1fr;
  }

  .report-chart-head {
    display: grid;
  }

  .report-chart-row {
    gap: 7px;
  }

  .report-chart-row strong {
    text-align: left;
  }

  /* Report header: compact */
  .report-paper-head { padding: 16px 16px 12px; }
  .report-paper-title { font-size: 18px; }
  .report-paper-sub { font-size: 12px; }

  .report-paper { padding: 18px 14px 14px; }
  .report-currency-note { text-align: left; }
  .report-filter-context { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  /* Filter bar: single column on very small phones */
  .report-filter-bar { grid-template-columns: 1fr; }

  /* Metric cards: 1 per row on tiny phones */
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Report table rows: smaller text */
  .report-paper td, .report-paper th { font-size: 12px; padding: 7px 8px; }
}

/* ── Payroll ──────────────────────────────────────────────────────────────── */
.pr-tab-bar { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 16px; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.pr-tab { flex: 0 1 auto; display: flex; align-items: center; gap: 7px; padding: 0 20px; height: 44px; font-size: 13.5px; font-weight: 600; color: var(--ink2); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; }
.pr-tab:hover { color: var(--ink); }
.pr-tab--active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.pr-tab-count { background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 20px; }
.pr-form-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 1px 3px rgba(11,53,145,0.04),0 4px 14px rgba(11,53,145,0.07); }
.pr-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pr-form-section { grid-column: 1 / -1; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); padding: 8px 0 2px; border-bottom: 1px solid var(--line); margin-top: 6px; }
.pr-form-field { display: flex; flex-direction: column; gap: 5px; }
.pr-form-field label { font-size: 12px; font-weight: 600; color: var(--ink2); }
.pr-form-field input, .pr-form-field select { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-size: 13px; color: var(--ink); background: var(--surface-soft); transition: border-color .15s, box-shadow .15s; }
.pr-form-field input:focus, .pr-form-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(32,96,232,.09); outline: none; }
.pr-ov-inp { width: 90px; height: 28px; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font-size: 12px; text-align: right; color: var(--ink); background: var(--surface); font-family: inherit; transition: border-color .15s, background .15s; }
.pr-ov-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(32,96,232,.1); outline: none; }
.pr-ov-inp.pr-ov-changed { border-color: #f59e0b; background: #fffbeb; color: #92400e; font-weight: 700; }
/* ── Edit Template ────────────────────────────────────────────────────────── */
body.bb-template-editor-open { overflow: hidden; }
#bb-template-editor { position: fixed; inset: 0; z-index: 9600; display: flex; flex-direction: column; background: #f3f5f8; }
.bbt-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid #dfe5ec; background: #fff; }
.bbt-bar h3 { margin: 0; font-size: 16px; font-weight: 700; color: #16233a; }
.bbt-bar h3 span { margin-left: 8px; font-size: 12px; font-weight: 600; color: #7c8a9c; }
.bbt-bar-actions { display: flex; align-items: center; gap: 8px; }
.bbt-close { padding: 6px 11px; color: #dc2626; border-color: #f3c7c7; }
.bbt-body { display: grid; grid-template-columns: 104px 340px 1fr; flex: 1; min-height: 0; }
.bbt-rail { display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; border-right: 1px solid #dfe5ec; background: #fff; overflow-y: auto; }
.bbt-rail-item { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; border: 0; border-radius: 9px; padding: 10px 5px; background: none; color: #55657a; font: 600 10px/1.25 inherit; text-align: center; cursor: pointer; }
.bbt-rail-item span { display: block; width: 100%; }
.bbt-rail-item:hover { background: #f1f5fa; }
.bbt-rail-item.is-active { background: #2563eb; color: #fff; }
.bbt-panel { padding: 18px; border-right: 1px solid #dfe5ec; background: #fff; overflow-y: auto; }
.bbt-group { margin-bottom: 4px; border-bottom: 1px solid #eef2f6; }
.bbt-group:last-child { border-bottom: 0; }
.bbt-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; padding: 13px 2px; background: none; color: #16233a; font: 700 13px inherit; text-align: left; cursor: pointer; }
.bbt-group-head em { font-style: normal; font-weight: 400; color: #7c8a9c; }
.bbt-group-head svg { flex: 0 0 auto; color: #8a97a8; transition: transform .16s ease; }
.bbt-group.is-collapsed .bbt-group-head svg { transform: rotate(-90deg); }
.bbt-group-body { padding: 0 2px 14px; }
.bbt-group.is-collapsed .bbt-group-body { display: none; }
.bbt-panel-title { margin: 2px 0 12px; font-size: 13px; font-weight: 700; color: #16233a; }
.bbt-subhead { margin: 16px 0 8px; font-size: 11.5px; font-weight: 700; color: #46566c; }
.bbt-tabs { display: inline-flex; padding: 3px; margin-bottom: 14px; border-radius: 9px; background: #eef2f7; }
.bbt-tab { border: 0; border-radius: 7px; padding: 6px 18px; background: none; color: #55657a; font: 600 12px inherit; cursor: pointer; }
.bbt-tab.is-active { background: #fff; color: #16233a; box-shadow: 0 1px 3px rgba(16,33,58,.14); }
.bbt-inline { display: grid; grid-template-columns: 1fr 148px; align-items: center; gap: 10px; margin-bottom: 9px; }
.bbt-inline-label { font-size: 12px; color: #46566c; }
.bbt-inline-hint { grid-column: 1 / -1; font-size: 10.5px; color: #8a97a8; }
.bbt-hint-box { margin: 10px 0 0; border: 1px solid #d8e6f7; border-radius: 8px; padding: 9px 11px; background: #f2f8ff; color: #3d566f; font-size: 11px; line-height: 1.55; }
.bbt-hint-box code { background: #e2eefb; border-radius: 4px; padding: 1px 4px; font-size: 10.5px; }
.bbt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bbt-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.bbt-field-label { font-size: 11.5px; font-weight: 600; color: #46566c; }
.bbt-field-hint { font-size: 10.5px; color: #8a97a8; line-height: 1.4; }
.bbt-input { width: 100%; height: 34px; border: 1px solid #d8e0ea; border-radius: 7px; padding: 0 9px; font: inherit; font-size: 12.5px; color: #16233a; background: #fff; }
.bbt-input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
select.bbt-input { padding-right: 4px; }
.bbt-number { position: relative; display: flex; align-items: center; }
.bbt-number em { position: absolute; right: 9px; font-size: 10.5px; font-style: normal; color: #8a97a8; pointer-events: none; }
.bbt-colour { display: flex; align-items: stretch; }
.bbt-colour-hex { border-radius: 7px 0 0 7px; border-right: 0; font-size: 12px; text-transform: lowercase; }
.bbt-colour-swatch { width: 36px; height: 34px; flex: 0 0 36px; padding: 3px; border: 1px solid #d8e0ea; border-radius: 0 7px 7px 0; background: #fff; cursor: pointer; }
.bbt-check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; color: #33415a; cursor: pointer; }
.bbt-check input { width: 15px; height: 15px; accent-color: #2563eb; }
.bbt-col-row { display: grid; grid-template-columns: 1fr 128px; align-items: center; gap: 10px; margin-bottom: 8px; }
.bbt-col-row .bbt-check { margin-bottom: 0; }
.bbt-col-static { font-size: 12.5px; color: #33415a; padding-left: 23px; }
.bbt-note { margin: 0; font-size: 11px; color: #8a97a8; line-height: 1.5; }
.bbt-textarea { height: auto; min-height: 64px; padding: 8px 9px; line-height: 1.5; resize: vertical; }
.bbt-image { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; border: 1px dashed #cfd9e5; border-radius: 9px; padding: 10px; }
.bbt-image img { max-width: 100%; max-height: 78px; object-fit: contain; align-self: center; }
.bbt-image-empty { padding: 14px 0; color: #9aa8b8; font-size: 11.5px; text-align: center; }
.bbt-image-actions { display: flex; gap: 8px; }
.bbt-image-pick span, .bbt-image-clear { display: inline-flex; align-items: center; justify-content: center; height: 30px; border: 1px solid #d8e0ea; border-radius: 7px; padding: 0 11px; background: #fff; color: #2563eb; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.bbt-image-clear { color: #dc2626; border-color: #f3c7c7; }
.bbt-image .bbt-field-hint { text-align: center; }
.bbt-preview { padding: 22px; overflow: auto; }
.bbt-preview-page { display: flex; justify-content: center; }
.bbt-preview-empty { color: #8a97a8; font-size: 13px; }
@media (max-width: 1100px) {
  .bbt-body { grid-template-columns: 92px 1fr; }
  .bbt-preview { display: none; }
}

/* ── Serial numbers ───────────────────────────────────────────────────────── */
.item-serial-toggle-field { display: flex; flex-direction: column; gap: 5px; }
.item-serial-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.item-serial-nudge { margin: 0; font-size: 11.5px; line-height: 1.45; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 7px 10px; }
.item-serial-switch input { width: 15px; height: 15px; accent-color: var(--accent); }
.item-serial-field { display: flex; flex-direction: column; gap: 5px; }
.item-serial-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--ink); background: var(--surface-soft); resize: vertical; }
.item-serial-help { margin: 0; font-size: 11px; color: var(--ink3); line-height: 1.45; }
.item-serial-warning { margin: 0 0 10px; font-size: 12px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; }
.item-serial-empty { color: var(--ink3); font-size: 12px; text-align: center; }
/* A receipt can carry several units, so the codes wrap inside their cell rather
   than stretching the row. */
.sr-serial-cell { display: inline-block; max-width: 220px; font-size: 12px; color: var(--ink2); line-height: 1.4; word-break: break-word; }
.serial-pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.serial-pill--stock { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.serial-pill--sold { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.pos-line-serials { display: block; font-size: 11px; color: var(--ink3); letter-spacing: .02em; margin-top: 2px; }
.ql-serial-slot { margin-top: 6px; }
.ql-serial-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); margin-bottom: 4px; }
.ql-serial-options, .ret-serial-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ql-serial-chip, .ret-serial-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; font-size: 11px; color: var(--ink2); background: var(--surface); cursor: pointer; }
.ql-serial-chip:hover, .ret-serial-chip:hover { border-color: var(--accent); color: var(--accent); }
.ql-serial-chip input, .ret-serial-chip input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); }
.ql-serial-chip:has(input:checked), .ret-serial-chip:has(input:checked) { border-color: var(--accent); background: rgba(32, 96, 232, .08); color: var(--accent); font-weight: 600; }
.ql-serial-empty, .ret-serial-hint { font-size: 11px; color: var(--ink3); }
.ret-serial-picks { margin-top: 6px; }

/* The calculated figure offered under an empty deduction box. Clicking it fills
   the box in, so it is a button — it just must not look like one. */
.pr-ov-auto { display: block; width: 90px; margin: 3px 0 0; padding: 0; border: 0; background: none; color: var(--ink3); font-family: inherit; font-size: 10px; line-height: 1.3; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pr-ov-auto:hover { color: var(--accent); text-decoration: underline; }
.pr-ov-auto.pr-ov-auto--used { color: #15803d; font-weight: 600; text-decoration: none; }
/* ── Org Setup Overlay (first-run onboarding) ─────────────────────────────── */
.os-card { width: 100%; max-width: 620px; }
.os-header { text-align: center; margin-bottom: 32px; }
.os-logo { display: block; margin: 0 auto 10px; border-radius: 14px; }
.os-brand { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 10px; }
.os-title { font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 0 14px; line-height: 1.2; }
.os-title-bar { width: 40px; height: 3px; background: var(--accent); border-radius: 2px; margin: 0 auto; }
.os-section-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.os-fields { display: flex; flex-direction: column; gap: 16px; }
.os-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.os-field { display: flex; flex-direction: column; gap: 6px; }
.os-label { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.os-req { color: var(--danger); }
.os-select-wrap { position: relative; }
.os-chevron { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink3); }
.os-input {
  width: 100%; height: 46px; border: 1.5px solid var(--line); border-radius: 11px;
  padding: 0 14px; font-size: 14px; color: var(--ink); background: var(--surface-soft);
  transition: border-color .15s, box-shadow .15s, background .15s; font-family: inherit; box-sizing: border-box;
}
.os-input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(32,96,232,.1); }
.os-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px; }
.os-vat-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: var(--surface-soft); border: 1.5px solid var(--line); border-radius: 12px; gap: 16px; margin-bottom: 20px; }
.os-vat-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.os-vat-hint { font-size: 12px; color: var(--ink3); }
.os-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.os-toggle input { opacity: 0; width: 0; height: 0; }
.os-toggle-track { position: absolute; inset: 0; background: var(--line); border-radius: 12px; cursor: pointer; transition: background .2s; }
.os-toggle-track::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.os-toggle input:checked + .os-toggle-track { background: var(--accent); }
.os-toggle input:checked + .os-toggle-track::before { transform: translateX(20px); }
.os-note { font-size: 12px; color: var(--ink3); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 20px; line-height: 1.6; }
.os-error { font-size: 13px; color: var(--danger); margin: 0 0 12px; min-height: 18px; }
.os-submit {
  width: 100%; height: 52px; background: var(--accent); color: #fff; border: none; border-radius: 13px;
  font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 8px; transition: opacity .15s, transform .15s; letter-spacing: .01em; font-family: inherit;
}
.os-submit:hover { opacity: .92; transform: translateY(-1px); }
.os-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
@media (max-width: 520px) { .os-row { grid-template-columns: 1fr; } .os-title { font-size: 20px; } }

/* Payroll period selector */
.pr-period-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 6px;
}
.pr-period-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  border-radius: 7px;
  display: grid;
  place-items: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.pr-period-btn:hover { background: var(--line); color: var(--ink); }
.pr-period-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  min-width: 130px;
  text-align: center;
  letter-spacing: .01em;
}

/* Payroll deductions strip */
.pr-deductions-strip {
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: var(--surface-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  margin-bottom: 16px;
}
.pr-ded-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 18px;
  flex-shrink: 0;
}
.pr-ded-item:first-child { padding-left: 0; }
.pr-ded-item--total .pr-ded-val { font-size: 15px; }
.pr-ded-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink3);
}
.pr-ded-val { font-size: 14px; font-weight: 700; color: var(--ink); }
.pr-ded-val--red { color: #dc2626; }
.pr-ded-val--amber { color: #d97706; }
.pr-ded-val--purple { color: #7c3aed; }
.pr-ded-val--total { color: var(--ink); }
.pr-ded-divider { width: 1px; height: 36px; background: var(--line); flex-shrink: 0; }

.pr-empty-state { padding: 52px 24px; text-align: center; }
.pr-empty-title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.pr-empty-sub { font-size: 13px; color: var(--ink3); margin: 0 0 14px; }
.pr-advance-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; margin-bottom: 14px; font-size: 13px; color: #92400e; }
.cust-txn-section { border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; }
.cust-txn-section-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.cust-txn-section-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.cust-txn-count { background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 20px; }
.cust-txn-section > p { padding: 10px 14px; }
.pr-advance-info { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 12.5px; color: #1e40af; }

/* ── POS / Quick Sale ─────────────────────────────────────────────────────── */
.pos-shell { display: grid; grid-template-columns: minmax(0,1fr) 600px; height: calc(100vh - 130px); min-height: 480px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 1px 3px rgba(11,53,145,0.04),0 4px 14px rgba(11,53,145,0.07); overflow: hidden; }
.pos-catalog { display: flex; flex-direction: column; border-right: 1px solid var(--line); overflow: hidden; }
.pos-catalog-header { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-soft); flex-shrink: 0; }
.pos-search-input { flex: 1; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13.5px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.pos-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(32,96,232,.1); outline: none; }
.pos-scan-btn { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink2); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pos-scan-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pos-select { height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--ink); }
.pos-items-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px; padding: 16px; overflow-y: auto; align-content: start; }
.pos-item-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 20px 12px 16px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); cursor: pointer; text-align: center; position: relative; transition: border-color .14s, box-shadow .14s, transform .12s, background .14s; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.pos-item-card:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 8px 28px rgba(32,96,232,.18); transform: translateY(-3px); }
.pos-item-card--in-cart { border-color: var(--accent); background: var(--accent-soft); }
.pos-item-card--out { opacity: .45; cursor: not-allowed; }
.pos-in-cart-badge { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.pos-item-icon { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg,#2060e8 0%,#1348c8 100%); color: #fff; font-size: 26px; font-weight: 800; display: grid; place-items: center; margin-bottom: 4px; box-shadow: 0 4px 12px rgba(32,96,232,.25); }
.pos-item-card--in-cart .pos-item-icon { background: linear-gradient(135deg,#15803d 0%,#166534 100%); box-shadow: 0 4px 12px rgba(21,128,61,.3); }
.pos-item-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; word-break: break-word; }
.pos-item-price { font-size: 14.5px; font-weight: 900; color: var(--accent); letter-spacing: -.01em; }
.pos-item-stock { font-size: 11.5px; color: var(--success); font-weight: 600; }
.pos-item-stock--out { color: var(--danger); }
.pos-empty-catalog { grid-column: 1/-1; padding: 48px 24px; text-align: center; color: var(--ink2); font-size: 14px; }
.pos-cart { display: flex; flex-direction: column; background: var(--surface-soft); overflow: hidden; }
.pos-cart-header { display: flex; align-items: center; gap: 8px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--surface); }
.pos-cart-count { background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 20px; }
.pos-clear-btn { margin-left: auto; font-size: 12px; color: var(--danger); font-weight: 700; background: var(--danger-soft); border: 1px solid transparent; padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: border-color .12s; }
.pos-clear-btn:hover { border-color: var(--danger); }
.pos-cart-field { padding: 12px 18px 0; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.pos-cart-lines { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.pos-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 140px; color: var(--ink3); font-size: 13px; }
.pos-cart-line { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pos-cart-line-name { font-size: 13.5px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-cart-line-rate { font-size: 11.5px; color: var(--ink3); font-weight: 400; margin-top: 2px; }
.pos-cart-line-controls { display: flex; align-items: center; background: var(--surface-soft); border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.pos-qty-btn { width: 34px; height: 34px; border: none; border-radius: 0; background: transparent; color: var(--ink2); font-size: 18px; font-weight: 500; display: grid; place-items: center; cursor: pointer; transition: background .1s, color .1s; flex-shrink: 0; }
.pos-qty-btn:first-child { border-right: 1px solid var(--line); }
.pos-qty-btn:last-child { border-left: 1px solid var(--line); }
.pos-qty-btn:hover { background: var(--accent-soft); color: var(--accent); }
.pos-qty-val { font-size: 15px; font-weight: 700; min-width: 36px; text-align: center; color: var(--ink); }
.pos-cart-line-total { font-size: 16px; font-weight: 800; color: var(--ink); min-width: 82px; text-align: right; letter-spacing: -.01em; }
.pos-remove-btn { width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 1px solid var(--line); color: var(--ink3); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s, border-color .12s; flex-shrink: 0; }
.pos-remove-btn:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.pos-totals { padding: 12px 18px; border-top: 1px solid var(--line); flex-shrink: 0; background: var(--surface); }
.pos-totals-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink2); padding: 3px 0; }
.pos-totals-grand { font-size: 20px; font-weight: 800; color: var(--ink); margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.pos-payment-methods { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 10px 18px; flex-shrink: 0; }
.pos-pm-btn { height: 54px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink2); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .14s; }
.pos-pm-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pos-pm-btn--active { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(32,96,232,.2); }
.pos-checkout-btn { margin: 0 18px 16px; height: 58px; border-radius: 16px; background: linear-gradient(135deg,#22c55e 0%,#15803d 100%); color: #fff; font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 6px 24px rgba(34,197,94,.38); transition: transform .14s, box-shadow .14s; flex-shrink: 0; border: none; letter-spacing: -.01em; }
.pos-checkout-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(34,197,94,.48); }
.pos-checkout-btn--disabled, .pos-checkout-btn:disabled { background: var(--surface-soft); color: var(--ink3); box-shadow: none; cursor: not-allowed; }
.pos-account-row { display: flex; align-items: center; gap: 10px; padding: 0 18px 14px; }

/* ── POS Modern Redesign ─────────────────────────────────────────────────── */

/* Cart header — two-column with clock */
.pos-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface);
  min-height: 60px;
}
.pos-cart-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pos-cart-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pos-order-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.pos-clock {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  background: var(--surface-soft);
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
}

/* Customer / waiter fields */
.pos-cart-customer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface);
}
.pos-customer-field { display: flex; flex-direction: column; gap: 3px; }
.pos-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink3);
}

/* Cart line — card style */
.pos-cart-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.pos-cart-line:hover { border-color: var(--line-strong); }
.pos-cart-line-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pos-cart-line-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
}
.pos-cart-line-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.pos-price-input {
  width: 80px;
  height: 28px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 7px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: right;
}
.pos-price-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(32,96,232,.1); }
.pos-price-label { font-size: 11px; color: var(--ink3); font-weight: 500; }
.pos-cart-line-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pos-cart-line-total {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  min-width: 82px;
  text-align: right;
  letter-spacing: -.01em;
}
.pos-item-note {
  width: 100%;
  height: 30px;
  font-size: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface-soft);
  color: var(--ink2);
  transition: border-color .12s;
}
.pos-item-note:focus { outline: none; border-color: var(--accent); border-style: solid; background: var(--surface); }
.pos-item-note::placeholder { color: var(--ink3); }

/* Discount / service charge fields */
.pos-adjustments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.pos-adjustment-field { display: flex; flex-direction: column; gap: 3px; }

/* Totals section */
.pos-totals {
  padding: 12px 18px 0;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface);
}
.pos-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink2);
  padding: 3px 0;
}
.pos-totals-discount { color: #dc2626; }
.pos-totals-service  { color: #0369a1; }
.pos-totals-grand-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 10px 0 12px;
}
.pos-totals-grand-box span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pos-totals-grand-box strong {
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

/* KOT button */
.pos-kot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 28px);
  margin: 0 14px 8px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px dashed var(--line);
  background: transparent;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.pos-kot-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Payment method buttons — with icons */
.pos-pm-btn {
  height: 58px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .14s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.pos-pm-btn svg { flex-shrink: 0; }
.pos-pm-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pos-pm-btn--active { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(32,96,232,.22); }

/* Payment method branded colors */
.pos-pm-btn[data-method="cash"] { border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.07); color: #15803d; }
.pos-pm-btn[data-method="cash"]:hover { border-color: #16a34a; background: rgba(22,163,74,.12); color: #15803d; }
.pos-pm-btn[data-method="cash"].pos-pm-btn--active { background: #16a34a; border-color: #16a34a; color: #fff; box-shadow: 0 4px 14px rgba(22,163,74,.3); }
.pos-pm-btn[data-method="mpesa"] { border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.07); color: #b91c1c; }
.pos-pm-btn[data-method="mpesa"]:hover { border-color: #dc2626; background: rgba(220,38,38,.12); color: #b91c1c; }
.pos-pm-btn[data-method="mpesa"].pos-pm-btn--active { background: #dc2626; border-color: #dc2626; color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,.3); }
.pos-pm-btn[data-method="bank"] { border-color: rgba(37,99,235,.35); background: rgba(37,99,235,.07); color: #1d4ed8; }
.pos-pm-btn[data-method="bank"]:hover { border-color: #2563eb; background: rgba(37,99,235,.12); color: #1d4ed8; }
.pos-pm-btn[data-method="bank"].pos-pm-btn--active { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.3); }

/* Cart right panel — brand gradient accent bar at top */
.pos-cart::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg,#1a56db 0%,#22c55e 100%); flex-shrink: 0; }

/* POS tab bar */
.pos-tab-bar { display: flex; border-bottom: 1px solid var(--line); background: var(--surface); flex-shrink: 0; }
.pos-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 48px; font-size: 13px; font-weight: 600; color: var(--ink2); background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.pos-tab:hover { color: var(--ink); background: var(--surface-soft); }
.pos-tab--active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.pos-tab-count { background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 20px; }

/* POS transactions panel */
.pos-txn-panel { flex: 1; overflow-y: auto; }
.pos-txn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); transition: background .1s; }
.pos-txn-row:hover { background: var(--accent-soft); }
.pos-txn-info { min-width: 0; flex: 1; }
.pos-txn-id { font-size: 13px; font-weight: 700; color: var(--ink); }
.pos-txn-meta { font-size: 11px; color: var(--ink3); margin-top: 2px; }
.pos-txn-items { font-size: 12px; color: var(--ink2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-txn-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.pos-txn-total { font-size: 14px; font-weight: 800; color: var(--success); }

/* POS camera barcode scanner */
.pos-scanner-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 9600; display: flex; align-items: center; justify-content: center; animation: reveal .18s ease; }
.pos-scanner-box { background: #0b0f1a; border-radius: 16px; padding: 16px; width: 380px; max-width: calc(100vw - 32px); box-shadow: 0 24px 64px rgba(0,0,0,.4); }
.pos-scanner-header { display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.pos-scanner-close { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.pos-scanner-close:hover { background: rgba(255,255,255,.22); }
.pos-scanner-video-wrap { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: #000; }
.pos-scanner-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.pos-scanner-frame { position: absolute; inset: 14% 10%; border: 2px solid #22c55e; border-radius: 10px; box-shadow: 0 0 0 2000px rgba(0,0,0,.35); pointer-events: none; }
.pos-scanner-hint { text-align: center; color: rgba(255,255,255,.7); font-size: 12.5px; margin-top: 12px; }

/* POS receipt modal */
.pos-receipt-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9500; display: flex; align-items: center; justify-content: center; animation: reveal .18s ease; }
.pos-receipt-box { background: #fff; border-radius: 16px; padding: 0; width: 360px; max-width: calc(100vw - 32px); box-shadow: 0 32px 80px rgba(0,0,0,.35); text-align: center; overflow: hidden; }
.pos-receipt-box-accent { height: 5px; background: linear-gradient(90deg, #0b3591, #1a73e8); }
.pos-receipt-box-inner { padding: 28px 28px 24px; }
.pos-receipt-checkmark { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#22c55e,#15803d); display: grid; place-items: center; margin: 0 auto 16px; }
.pos-receipt-brand { font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
.pos-receipt-id { font-size: 13px; font-weight: 700; color: #1a73e8; margin-bottom: 2px; }
.pos-receipt-meta { font-size: 12px; color: #94a3b8; margin-bottom: 0; }
.pos-receipt-divider { border: none; border-top: 2px dashed #e2e8f0; margin: 14px 0; }
.pos-receipt-lines { text-align: left; display: flex; flex-direction: column; gap: 8px; }
.pos-receipt-line { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; }
.pos-receipt-line-name { color: #1e293b; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-receipt-line-qty { color: #94a3b8; font-size: 12px; }
.pos-receipt-line-amt { font-weight: 700; color: #0f172a; text-align: right; }
.pos-receipt-total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 800; color: #0f172a; padding: 4px 0; }
.pos-receipt-thanks { font-size: 12px; color: #94a3b8; margin: 12px 0 20px; }
.pos-receipt-actions { display: flex; gap: 10px; }
.pos-receipt-actions .ghost-button, .pos-receipt-actions .primary-button { flex: 1; justify-content: center; display: flex; align-items: center; gap: 6px; }

/* ── Export Choice Modal ──────────────────────────────────────────────────── */
.export-choice-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.export-choice-box { background: var(--surface); border-radius: 12px; padding: 28px 32px; width: 360px; max-width: calc(100vw - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.export-choice-box h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.export-choice-box p { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.export-choice-btns { display: flex; gap: 12px; margin-bottom: 16px; }
.export-choice-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.export-choice-opt:hover { border-color: var(--accent); background: var(--surface-soft); }
.export-choice-opt svg { color: var(--accent); }
.export-choice-opt span { font-size: 14px; font-weight: 700; color: var(--text-base); }
.export-choice-opt small { font-size: 11px; color: var(--text-muted); }
.export-choice-cancel { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer; font-size: 13px; color: var(--text-muted); }

/* ── Transaction Locking ──────────────────────────────────────────────────── */
.lock-module { display: flex; flex-direction: column; gap: 16px; }
.lock-status-panel { padding: 20px; }
.lock-config-panel { padding: 24px; }
.lock-form { display: flex; flex-direction: column; gap: 0; }
.lock-form-section { border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
.lock-form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.lock-form-row:last-child { margin-bottom: 0; }
.lock-toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-base); }
.lock-toggle-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.lock-toggle-text { font-weight: 600; }
.lock-form-desc { font-size: 12px; color: var(--text-muted); flex: 1; }
.lock-date-input { max-width: 200px; }
.lock-form-actions { margin-top: 8px; }
.lock-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.lock-badge--on { background: #dcfce7; color: #166534; }
.lock-badge--off { background: #f3f4f6; color: #6b7280; }

/* ── Selling From Warehouse Bar ───────────────────────────────────────────── */
.sell-from-bar { margin: 4px 0 20px; }
.sell-from-inner { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); background: linear-gradient(135deg, #1a73e8, #0b5394); border-radius: 10px; padding: 10px 18px; box-shadow: 0 2px 8px rgba(26,115,232,.25); }
.sell-from-icon { color: rgba(255,255,255,.8); display: flex; align-items: center; flex-shrink: 0; }
.sell-from-content { display: flex; flex-direction: column; gap: 1px; }
.sell-from-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.75); }
.sell-from-select { background: transparent; border: none; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; outline: none; padding: 0; min-width: 140px; }
.sell-from-select option { background: #1a73e8; color: #fff; }

/* ══ Warehouse & Transfers — Modern Redesign ══════════════════════════════ */

/* Shared module shell */
.wh-module { display: flex; flex-direction: column; gap: 20px; }
.wh-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wh-header-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.wh-header-title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 2px; }
.wh-header-sub { font-size: 13px; color: var(--ink3); margin: 0; }

/* KPI row */
.wh-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 768px) { .wh-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.wh-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  transition: box-shadow .2s, transform .2s;
}
.wh-kpi:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.wh-kpi > div { display: flex; flex-direction: column; gap: 3px; }
.wh-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid !important;
  place-items: center;
  flex-shrink: 0;
  flex-direction: unset !important;
  gap: 0 !important;
}
.wh-kpi-icon--blue { background: #dbeafe; color: #1d4ed8; }
.wh-kpi-icon--green { background: #dcfce7; color: #15803d; }
.wh-kpi-icon--amber { background: #fef3c7; color: #b45309; }
.wh-kpi-icon--red { background: #fee2e2; color: #dc2626; }
@media (prefers-color-scheme: dark) {
  .wh-kpi-icon--blue { background: #1e3a5f; color: #93c5fd; }
  .wh-kpi-icon--green { background: #14532d; color: #86efac; }
  .wh-kpi-icon--amber { background: #451a03; color: #fcd34d; }
  .wh-kpi-icon--red { background: #450a0a; color: #fca5a5; }
}
:root[data-theme="dark"] .wh-kpi-icon--blue { background: #1e3a5f; color: #93c5fd; }
:root[data-theme="dark"] .wh-kpi-icon--green { background: #14532d; color: #86efac; }
:root[data-theme="dark"] .wh-kpi-icon--amber { background: #451a03; color: #fcd34d; }
:root[data-theme="dark"] .wh-kpi-icon--red { background: #450a0a; color: #fca5a5; }
:root[data-theme="light"] .wh-kpi-icon--blue { background: #dbeafe; color: #1d4ed8; }
:root[data-theme="light"] .wh-kpi-icon--green { background: #dcfce7; color: #15803d; }
:root[data-theme="light"] .wh-kpi-icon--amber { background: #fef3c7; color: #b45309; }
:root[data-theme="light"] .wh-kpi-icon--red { background: #fee2e2; color: #dc2626; }
.wh-kpi-val { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.wh-kpi-val--red { color: #dc2626 !important; }
.wh-kpi-val--amber { color: #d97706 !important; }
.wh-kpi-val--green { color: #16a34a !important; }
.wh-kpi-lbl { font-size: 11px; color: var(--ink3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

/* Warehouse cards grid */
.wh-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.wh-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.wh-card:hover { box-shadow: 0 8px 32px rgba(11,53,145,.12); transform: translateY(-2px); }
.wh-card--inactive { opacity: .6; }
.wh-card-bar { height: 4px; background: linear-gradient(90deg, var(--accent), #06b6d4); }
.wh-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.wh-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1d4ed8;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark) { .wh-card-icon { background: linear-gradient(135deg, #1e3a5f, #1e3a8a); color: #93c5fd; } }
:root[data-theme="dark"] .wh-card-icon { background: linear-gradient(135deg, #1e3a5f, #1e3a8a); color: #93c5fd; }
:root[data-theme="light"] .wh-card-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
.wh-card-title-block { flex: 1; min-width: 0; }
.wh-card-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.wh-card-address { font-size: 11px; color: var(--ink3); margin-top: 2px; display: flex; align-items: center; gap: 3px; }
.wh-card-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 20px;
  background: #dcfce7;
  color: #15803d;
  flex-shrink: 0;
}
.wh-card--inactive .wh-card-status { background: #f3f4f6; color: #6b7280; }
.wh-card-stats {
  display: flex;
  gap: 20px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.wh-stat { display: flex; flex-direction: column; gap: 2px; }
.wh-stat-val { font-size: 20px; font-weight: 800; color: var(--ink); }
.wh-stat-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink3); }
.wh-stat--warn .wh-stat-val { color: #dc2626; }
.wh-card-actions {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.wh-card-actions .primary-button,
.wh-card-actions .ghost-button { font-size: 12px !important; min-height: 32px !important; }

/* Low stock badge in table */
.wh-low-badge {
  display: inline-block;
  padding: 1px 6px;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.wh-stock-cell { text-align: right; }

/* Stock matrix */
.wh-stock-matrix {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.wh-stock-matrix-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.wh-stock-matrix-header h4 { font-size: 14px; font-weight: 700; margin: 0; color: var(--ink); }

/* Empty state */
.wh-empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 48px 24px;
  text-align: center;
  color: var(--ink3);
}
.wh-empty-state svg { color: var(--ink3); margin: 0 auto 14px; }
.wh-empty-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  color: var(--ink3);
}
.wh-empty-state .empty-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.wh-empty-state p { font-size: 13px; color: var(--ink3); margin: 0; }

/* Transfer cards */
.tr-cards-list { display: flex; flex-direction: column; gap: 14px; }
.tr-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.tr-card:hover { box-shadow: 0 8px 32px rgba(11,53,145,.1); transform: translateY(-2px); }
.tr-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.tr-card-id-block { display: flex; align-items: center; gap: 8px; }
.tr-card-id { font-size: 14px; font-weight: 800; color: var(--ink); }
.tr-card-reason { font-size: 11px; padding: 2px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; color: var(--ink3); }
.tr-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}
.tr-card-route {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.tr-card-wh {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}
.tr-card-arrow { color: var(--accent); flex-shrink: 0; }
.tr-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--ink3);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.tr-card-items {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3-step progress bar */
.tr-card-step-bar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.tr-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.tr-step span { font-size: 10px; color: var(--ink3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tr-step::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  display: block;
}
.tr-step--done::before { background: #16a34a; border-color: #16a34a; }
.tr-step--active::before { background: #d97706; border-color: #d97706; }
.tr-step-line {
  flex: 1;
  height: 2px;
  background: var(--line);
  margin-bottom: 14px;
}
.tr-step-line--done { background: #16a34a; }
.tr-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.tr-card-actions .primary-button,
.tr-card-actions .ghost-button { font-size: 12px !important; min-height: 32px !important; }
.tr-completed-note { font-size: 12px; color: #16a34a; font-weight: 600; }

/* ── Transfer Orders ──────────────────────────────────────────────────────── */
.tr-module { display: flex; flex-direction: column; gap: 16px; }
.tr-list-panel { padding: 24px; }
.tr-form-panel { padding: 28px; }
.tr-form { display: flex; flex-direction: column; gap: 20px; }
.tr-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tr-items-section { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.tr-lines-table { background: var(--surface); }
.tr-table-wrap { overflow-x: auto; margin-top: 16px; }

/* ── Fixed Assets ─────────────────────────────────────────────────────────── */
.fa-module { display: flex; flex-direction: column; gap: 16px; }
.fa-list-panel { padding: 24px; }
.fa-form-panel { padding: 28px; }
.fa-form-topbar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; }
.fa-form-topbar h3 { font-size: 18px; font-weight: 700; margin-top: 2px; }
.fa-form { display: flex; flex-direction: column; gap: 24px; }
.fa-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.fa-form-field { display: flex; flex-direction: column; gap: 6px; }
.fa-form-field label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.fa-form-field input, .fa-form-field select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--surface); color: var(--text-base); }
.fa-form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.fa-table-wrap { overflow-x: auto; margin-top: 16px; }
.fa-table { min-width: 900px; }
.fa-table tfoot td { font-weight: 600; background: var(--surface-soft); border-top: 2px solid var(--line); }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PWA OPTIMIZATION — Professional mobile experience
   Breakpoints: 768px (tablet), 480px (phone), 380px (small phone)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Bottom Navigation Bar (mobile only) ─────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  /* ── App shell: sidebar becomes full-screen drawer ── */
  .app-shell {
    grid-template-columns: 1fr;
    min-height: 100dvh;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 280px;
    max-width: 88vw;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,0.25);
  }

  .sidebar-backdrop {
    display: block;
  }

  .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
  }

  .sidebar-toggle {
    display: flex;
  }

  /* Close sidebar when nav item clicked on mobile */
  .nav-item {
    min-height: 44px; /* WCAG touch target */
  }

  /* ── Workspace takes full width ── */
  .workspace {
    padding: 10px;
    padding-bottom: 140px; /* clears both the bottom nav and the floating AI chat button */
  }

  /* ── Topbar mobile ── */
  .topbar {
    padding: 10px 12px;
    border-radius: 10px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .topbar h2 { font-size: 18px; }
  .topbar .eyebrow { font-size: 10px; }
  .topbar-search { flex: 1 1 100%; order: 3; max-width: none; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .last-saved-indicator { display: none; }

  /* ── Bottom Navigation Bar ── */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    padding: 4px 0 env(safe-area-inset-bottom, 4px);
  }

  .mobile-bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--ink3);
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    min-height: 52px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav button.active {
    color: var(--accent);
  }

  .mobile-bottom-nav button svg {
    width: 20px;
    height: 20px;
  }

  .mobile-bottom-nav button .mob-nav-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
  }

  .mobile-bottom-nav button.active .mob-nav-dot {
    opacity: 1;
  }

  /* ── Dashboard mobile: 2 KPI cards per row ── */
  .dash-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .dash-header-actions { width: 100%; display: flex; gap: 8px; }
  .dash-header-actions .primary-button { flex: 1; }

  /* 4 KPI cards → 2x2 grid */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Main 2-col grids → single column */
  div[style*="grid-template-columns:1fr 1fr;gap:16px"],
  div[style*="grid-template-columns:1fr 1fr;gap:14px"] {
    grid-template-columns: 1fr !important;
  }

  /* 3-col grids → single column */
  div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Quick actions + activity */
  div[style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── POS mobile: optimized for cashiers/waiters ── */
  .pos-shell {
    flex-direction: column;
    height: auto;
    min-height: calc(100dvh - 140px);
  }

  .pos-catalog {
    flex: none;
    max-height: 55dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pos-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    padding: 8px;
  }

  .pos-item-card {
    padding: 10px 8px;
    min-height: 90px;
  }

  .pos-item-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    margin: 0 auto 6px;
  }

  .pos-item-name {
    font-size: 11px;
    line-height: 1.3;
  }

  .pos-item-price {
    font-size: 12px;
    font-weight: 800;
  }

  .pos-cart {
    flex: none;
    border-left: none;
    border-top: 2px solid var(--line);
    max-height: 45dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pos-cart-customer { grid-template-columns: 1fr; }
  .pos-adjustments {
    grid-template-columns: 1fr 1fr;
    padding: 6px 12px;
    gap: 6px;
  }
  .pos-adjustment-field { gap: 2px; }
  .pos-adjustments .pos-field-label { font-size: 9px; }
  .pos-adjustments .pos-select { height: 28px; font-size: 12px; padding: 0 8px; }
  .pos-totals-grand-box strong { font-size: 18px; }
  .pos-pm-btn { height: 48px; font-size: 11px; }
  .pos-kot-btn { margin: 0 8px 8px; width: calc(100% - 16px); }
  .pos-qty-btn { width: 32px; height: 32px; font-size: 16px; }
  .pos-qty-val { font-size: 15px; min-width: 22px; }

  .pos-checkout-btn {
    min-height: 52px;
    font-size: 16px;
    border-radius: 12px;
  }

  .pos-tab-bar {
    gap: 4px;
    padding: 0 8px;
  }

  .pos-tab {
    font-size: 11px;
    padding: 6px 8px;
  }

  /* ── Tables grid on mobile ── */
  .pos-items-grid button {
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Forms: full-width on mobile ── */
  .quote-form-line,
  .cn-details-grid,
  .fa-form-grid,
  .bom-form-grid {
    grid-template-columns: 1fr !important;
  }

  .quote-notes-grid,
  .po-bottom-grid,
  .invoice-form-notes-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Data tables: horizontal scroll ── */
  .data-table {
    min-width: 600px;
  }

  /* Wrap table in scroll container */
  .fa-table-wrap,
  .vc-table-wrap,
  .module-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Buttons: touch-friendly minimum size ── */
  .primary-button,
  .ghost-button,
  .danger-button {
    min-height: 44px;
    font-size: 14px;
  }

  .table-action {
    min-height: 36px;
    padding: 6px 10px;
  }

  /* ── Modals: full-screen on small screens ── */
  .export-choice-modal .export-choice-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 92dvh;
    overflow-y: auto;
  }

  .export-choice-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* ── Module summary row: 2x2 ── */
  .module-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Invoice/quote form line table: scrollable ── */
  .quote-line-table-wrap,
  .bill-lines-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Section header: stack on mobile ── */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .section-header > div:last-child { width: 100%; }
  .section-header > div:last-child button { width: 100%; }

  /* ── Metric cards: 2 per row ── */
  .metric-card.compact {
    min-width: 0;
  }

  /* ── POS search: larger on mobile ── */
  .pos-search-input {
    font-size: 16px; /* prevents iOS zoom */
    min-height: 44px;
  }

  /* ── Inline actions: wrap ── */
  .inline-actions {
    flex-wrap: wrap;
  }

  /* ── Company switcher: full width ── */
  #company-switcher-btn {
    font-size: 13px;
  }

  /* ── Sidebar snapshot: compact ── */
  .sidebar-card {
    padding: 10px 14px;
  }
}

/* ── Small phone (<480px) ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .workspace { padding: 8px; padding-bottom: 140px; }
  .topbar h2 { font-size: 16px; }
  .pos-items-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .pos-item-card { padding: 8px 6px; min-height: 80px; }
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .module-summary-row { grid-template-columns: repeat(2, 1fr); }
  .export-choice-modal .export-choice-box { border-radius: 12px 12px 0 0; }
  .primary-button, .ghost-button { font-size: 13px; }
}

/* ── Industry picker (first-launch onboarding): 3-col inline grid → fits phones ── */
@media (max-width: 768px) {
  #industry-setup-overlay div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  #industry-setup-overlay div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
}

/* ── Tablet (<768px to 1024px) ────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .pos-items-grid { grid-template-columns: repeat(3, 1fr) !important; }
  div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Touch device improvements ─────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets for touch devices */
  .nav-item { min-height: 44px; }
  .pos-qty-btn { min-width: 36px; min-height: 36px; }
  .pos-pm-btn { min-height: 44px; font-size: 14px; }
  .pos-checkout-btn { min-height: 56px; font-size: 17px; font-weight: 800; }
  .table-action { min-height: 38px; }

  /* Remove hover effects on touch (they stick) */
  .nav-item:hover { background: transparent; }
  .pos-item-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PWA STANDALONE MODE — Makes the installed app look like a real native app
   Hides all browser-like elements when running as installed PWA
   ══════════════════════════════════════════════════════════════════════════ */

/* When running as installed app (not in browser) */
@media (display-mode: standalone) {
  /* Remove any remaining browser-like styling */
  * { -webkit-tap-highlight-color: transparent; }

  /* Make the whole app fill the screen edge to edge */
  body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Allow text selection only in inputs and text areas */
  input, textarea, [contenteditable] {
    user-select: text;
    -webkit-user-select: text;
  }

  /* Status bar area — use our brand color */
  .app-shell {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Navigation feels native */
  .sidebar {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Bottom safe area for iPhone */
  .mobile-bottom-nav {
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }

  .workspace {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }

  /* Topbar looks like native app header */
  .topbar {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.92);
  }

  [data-theme="dark"] .topbar {
    background: rgba(15,23,42,0.92);
  }

  /* Smooth native scrolling */
  .workspace,
  .nav-list,
  .pos-catalog,
  .pos-cart {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Hide the install banner when already installed */
  #pwa-install-banner { display: none !important; }

  /* Buttons feel more native */
  button { -webkit-tap-highlight-color: transparent; }

  /* Remove web-style focus rings on mobile */
  button:focus:not(:focus-visible) { outline: none; }

  /* Make modals feel native — slide up from bottom */
  .export-choice-modal {
    animation: slideUpModal 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes slideUpModal {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── PWA installed MOBILE: clean centered login screen ── */
/* Applies in standalone mode OR when opened via ?source=pwa shortcut */
@media (display-mode: standalone) and (max-width: 768px) {
  /* Hide left marketing panel — full screen login on phone */
  .auth-page-left { display: none !important; }

  /* Login fills full screen with brand gradient */
  .auth-page-bg {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0b3591 0%, #2060e8 100%) !important;
    min-height: 100dvh !important;
    padding: env(safe-area-inset-top, 20px) 16px env(safe-area-inset-bottom, 20px) !important;
  }

  .auth-page-right {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 400px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-page-panel {
    width: 100% !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    background: #fff !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3) !important;
  }

  .auth-page-top { text-align: center !important; margin-bottom: 20px !important; }
  .auth-page-logo { width: 56px !important; height: 56px !important; margin: 0 auto 12px !important; display: block !important; border-radius: 14px !important; }
  .auth-page-title { font-size: 20px !important; text-align: center !important; }
  .auth-page-sub { text-align: center !important; font-size: 13px !important; }
  .auth-back-btn { display: none !important; }
  [data-page-view="auth-landing-view"] { display: none !important; }
}

/* ── Shortcut / PWA mode via ?source=pwa on mobile ── */
@media (max-width: 768px) {
  .pwa-mode .auth-page-left { display: none !important; }
  .pwa-mode .auth-page-bg {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0b3591 0%, #2060e8 100%) !important;
    min-height: 100dvh !important;
    padding: 20px 16px !important;
  }
  .pwa-mode .auth-page-right {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 400px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .pwa-mode .auth-page-panel {
    width: 100% !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    background: #fff !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3) !important;
  }
  .pwa-mode .auth-page-top { text-align: center !important; }
  .pwa-mode .auth-page-logo { margin: 0 auto 12px !important; display: block !important; }
  .pwa-mode .auth-page-title { font-size: 20px !important; text-align: center !important; }
  .pwa-mode .auth-page-sub { text-align: center !important; }
  .pwa-mode [data-page-view="auth-landing-view"] { display: none !important; }
  /* No marketing site inside the installed app — there's nowhere for "back to home" to go */
  .pwa-mode .auth-back-btn { display: none !important; }
  /* Hide the marketing landing page completely */
  .pwa-mode #auth-landing-view { display: none !important; }
  /* Hide browser nav bar feel — make it full screen */
  .pwa-mode body { background: #2060e8 !important; }
  /* Safe-area insets so the login card clears the status bar / home indicator */
  .pwa-mode .auth-page-bg {
    padding-top: max(20px, env(safe-area-inset-top, 20px)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
  }
}

/* ── PWA installed DESKTOP: keep two-column layout, just clean up ── */
@media (display-mode: standalone) and (min-width: 769px) {
  /* Desktop installed app keeps the left panel — good use of wide screen */
  .auth-page-left { display: flex !important; }
  /* Just hide the back-to-landing links since there's no landing in app mode */
  .auth-page-logo[data-page-view="auth-landing-view"] { pointer-events: none !important; }
}

/* ── Bottom nav: NEVER show on desktop standalone ── */
@media (display-mode: standalone) and (min-width: 769px) {
  .mobile-bottom-nav { display: none !important; }
  .workspace { padding-bottom: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NATIVE APP MODE — Clean rewrite. Rules are minimal and non-conflicting.
   Applied via html.native-app-mode (set by JS on Capacitor + PWA installs)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. PREVENT HORIZONTAL OVERFLOW ON THE WHOLE APP ─────────────────── */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; width: 100% !important; }
}

/* ─── 2. GRAY BACKGROUND FILLS FULL SCREEN ────────────────────────────── */
@media (max-width: 768px) {
  html.native-app-mode,
  html.native-app-mode body,
  .native-app-mode .app-shell,
  .native-app-mode .workspace,
  .native-app-mode .page-section {
    background: #eef0f8 !important;
  }
  .native-app-mode .workspace {
    padding: 0 0 80px 0 !important;
    min-height: 100dvh !important;
  }
  .native-app-mode .page-section {
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ─── 3. BLUE TOPBAR ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .native-app-mode .topbar {
    background: #1a56db !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    flex-wrap: nowrap !important;
  }
  .native-app-mode .topbar h2 { color: #fff !important; font-size: 18px !important; font-weight: 800 !important; }
  .native-app-mode .topbar .eyebrow { color: rgba(255,255,255,0.7) !important; font-size: 10px !important; }
  .native-app-mode .sidebar-toggle { background: transparent !important; border: 1.5px solid rgba(255,255,255,0.3) !important; color: #fff !important; }
  .native-app-mode .topbar-account-btn { background: transparent !important; border: 1.5px solid rgba(255,255,255,0.3) !important; color: #fff !important; }
  .native-app-mode .topbar-account-avatar { background: rgba(255,255,255,0.2) !important; color: #fff !important; }
  .native-app-mode .topbar-theme-toggle { background: transparent !important; border: 1.5px solid rgba(255,255,255,0.3) !important; color: #fff !important; }
  /* Hide web elements from topbar */
  .native-app-mode .topbar-search,
  .native-app-mode .topbar-account-email,
  .native-app-mode .topbar-logout,
  .native-app-mode .last-saved-indicator,
  .native-app-mode .subscription-badge,
  .native-app-mode #trial-banner { display: none !important; }
}

/* ─── 4. WHITE CARDS ON GRAY BACKGROUND ───────────────────────────────── */
@media (max-width: 768px) {
  .native-app-mode .panel {
    background: #fff !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
    margin-bottom: 10px !important;
  }
  .native-app-mode .data-table-wrap {
    background: #fff !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .native-app-mode .data-table-wrap table { min-width: 520px; }
  .native-app-mode .metric-card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
    min-width: 0 !important;
  }
}

/* ─── 5. SECTION TOOLBAR — COMPACT, BUTTONS FULL WIDTH ────────────────── */
@media (max-width: 768px) {
  .native-app-mode .module-toolbar { flex-direction: column !important; gap: 10px !important; }
  .native-app-mode .module-toolbar .eyebrow { display: none !important; }
  .native-app-mode .module-toolbar .muted-copy { display: none !important; }
  .native-app-mode .module-toolbar h3 { font-size: 17px !important; margin: 0 !important; }
  .native-app-mode .module-actions { flex-direction: column !important; gap: 8px !important; }
  .native-app-mode .module-actions .ghost-button,
  .native-app-mode .module-actions .more-wrap { display: none !important; }
  /* Primary buttons full width */
  .native-app-mode .page-section .primary-button {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }
}

/* ─── 6. DASHBOARD ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .native-app-mode .dash-header { flex-direction: column !important; gap: 12px !important; }
  .native-app-mode .dash-header-actions { display: flex !important; gap: 8px !important; width: 100% !important; }
  .native-app-mode .dash-header-actions .primary-button,
  .native-app-mode .dash-header-actions .ghost-button { flex: 1 !important; }
}

/* ─── 7. POS — STACKED LAYOUT ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .native-app-mode .pos-shell { flex-direction: column !important; height: auto !important; }
  .native-app-mode .pos-catalog { width: 100% !important; max-height: 45vh !important; overflow-y: auto !important; border-right: none !important; border-bottom: 1px solid var(--line) !important; }
  .native-app-mode .pos-cart { width: 100% !important; border-left: none !important; }
}

/* ─── 8. MODALS — SLIDE UP FROM BOTTOM ────────────────────────────────── */
@media (max-width: 768px) {
  .native-app-mode .modal-overlay { align-items: flex-end !important; }
  .native-app-mode .modal-card {
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* ─── 9. FORM INPUTS ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .native-app-mode .form-row label,
  .native-app-mode label.required-label { color: #2060e8 !important; font-size: 13px !important; font-weight: 500 !important; }
  .native-app-mode .field-input,
  .native-app-mode input[type="text"],
  .native-app-mode input[type="number"],
  .native-app-mode input[type="date"],
  .native-app-mode input[type="email"],
  .native-app-mode textarea {
    border: none !important;
    border-bottom: 1.5px solid #d0d5e8 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 8px 0 !important;
    font-size: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .native-app-mode input:focus,
  .native-app-mode textarea:focus { border-bottom-color: #2060e8 !important; outline: none !important; box-shadow: none !important; }
  .native-app-mode select { border: 1px solid #d0d5e8 !important; border-radius: 8px !important; background: #f8fafc !important; padding: 10px 8px !important; font-size: 14px !important; width: 100% !important; box-sizing: border-box !important; }
}

/* ─── 10. ASK NAWAL — ABOVE BOTTOM NAV, ICON ONLY ─────────────────────── */
@media (max-width: 768px) {
  .ai-chat-fab {
    bottom: 68px !important; right: 14px !important;
    padding: 0 !important; border-radius: 50% !important;
    width: 46px !important; height: 46px !important;
    justify-content: center !important; align-items: center !important;
  }
  .ai-chat-fab span { display: none !important; }
  .ai-chat-panel { bottom: 126px !important; right: 8px !important; left: 8px !important; width: auto !important; max-height: 62vh !important; }
}

/* ══ DEFINITIVE MOBILE WIDTH FIX — last in file, wins all specificity battles ══ */
@media (max-width: 768px) {
  /* Section clips overflow and provides 10px padding */
  .page-section {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  /* Panels and modules — 100% of their parent (section content area) */
  .page-section .panel,
  .page-section [class*="-module"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  /* Force ALL summary rows to 2 columns */
  .items-module .module-summary-row,
  .customers-module .module-summary-row,
  .vendors-module .module-summary-row,
  .invoices-module .module-summary-row,
  .module-summary-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 8px !important;
  }
  /* Grid items must not overflow their column */
  .module-summary-row > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* All primary buttons full width */
  .page-section .primary-button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Empty state inside tables — make visible on mobile ── */
@media (max-width: 768px) {
  .data-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Empty state cell stretches to show content */
  .data-table-wrap tbody td[colspan],
  .data-table-wrap .table-empty,
  .data-table-wrap .empty-state {
    min-width: calc(100vw - 40px) !important;
    box-sizing: border-box !important;
  }
  /* Empty state buttons inside tables */
  .data-table-wrap .primary-button,
  .data-table-wrap [class*="empty"] .primary-button {
    width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    box-sizing: border-box !important;
  }
}

/* ══ FIX UNSTYLED STAT ELEMENTS — kpi-chip, module-summary-tile ══ */

/* Section KPI row — matches module-summary-row layout */
.section-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

/* KPI chip — looks like a metric-card */
.kpi-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

/* Module summary tile — label above value */
.module-summary-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.module-summary-tile span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.module-summary-tile b {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

/* Mobile — 2 columns */
@media (max-width: 768px) {
  .section-kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .kpi-chip {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .module-summary-tile {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .kpi-value,
  .module-summary-tile b {
    font-size: 18px !important;
  }
}

/* ══ COMPREHENSIVE MOBILE IMPROVEMENTS — All sections ══ */
@media (max-width: 768px) {

  /* ── DASHBOARD ── */
  .dash-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
  }
  .dash-company { font-size: 20px !important; }
  .dash-greeting { font-size: 12px !important; }
  .dash-period { flex-wrap: wrap !important; gap: 6px !important; }
  .dash-period-pill { font-size: 11px !important; padding: 3px 8px !important; }
  .dash-header-actions {
    display: flex !important;
    gap: 8px !important;
  }
  .dash-header-actions .primary-button,
  .dash-header-actions .ghost-button {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
  }

  /* ── POS ── */
  .pos-shell {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: unset !important;
    border-radius: 14px !important;
  }
  .pos-catalog {
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }
  .pos-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .pos-item-card {
    padding: 10px 6px !important;
    font-size: 12px !important;
  }
  .pos-cart {
    width: 100% !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }
  .pos-cart-btns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  /* ── FORMS — bigger touch targets ── */
  .field-input,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    min-height: 44px !important; /* WCAG touch target */
  }

  /* ── TABLES — better row height for touch ── */
  table td, table th {
    padding: 12px 10px !important;
  }
  table td:first-child, table th:first-child {
    padding-left: 14px !important;
  }

  /* ── ALERTS — compact on mobile ── */
  [style*="background:#fef2f2"],
  [style*="background:#fff7ed"],
  [style*="background:#fefce8"] {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* ── PANELS — better padding on mobile ── */
  .panel {
    padding: 14px !important;
  }

  /* ── BUTTONS — proper touch size ── */
  .primary-button {
    min-height: 44px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }
  .ghost-button {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  /* ── HIDE NON-ESSENTIAL COLUMNS IN TABLES ── */
  .hide-mobile { display: none !important; }

  /* ── MODAL IMPROVEMENTS ── */
  .modal-card {
    padding: 16px !important;
  }
  .modal-header h3 {
    font-size: 17px !important;
  }
  .modal-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .modal-footer .primary-button,
  .modal-footer .ghost-button {
    width: 100% !important;
  }
}

/* ══ SUBSCRIPTION / UPGRADE MODAL — mobile optimized ══ */
@media (max-width: 768px) {
  .upgrade-modal-card {
    padding: 20px !important;
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }
  .upgrade-modal-overlay {
    align-items: flex-end !important;
  }
  .upgrade-plans {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .upgrade-plan-card {
    padding: 16px !important;
  }
  .upgrade-plan-card--featured {
    order: -1 !important;
  }
  .upgrade-plan-btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }
}

/* ══ COMPREHENSIVE FORM FIXES FOR MOBILE ══ */
@media (max-width: 768px) {

  /* ── Item Create Panel — fix critical 278px offset ── */
  .item-create-panel {
    inset: 0 !important;
    border-radius: 0 !important;
  }
  .item-modal-form {
    overflow-y: auto !important;
  }
  .item-main-grid,
  .item-form-columns {
    grid-template-columns: 1fr !important;
  }
  .item-modal-header {
    padding: 12px 16px !important;
    min-height: 56px !important;
  }

  /* ── Expense Form — collapse 2-column layout ── */
  .exp-form-body {
    grid-template-columns: 1fr !important;
  }
  .exp-receipt-card {
    display: none !important;
  }
  .exp-form-fields {
    padding: 16px !important;
    border-right: none !important;
  }
  .exp-form-line {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 10px 0 !important;
  }
  .exp-form-line label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ink3) !important;
  }
  .exp-form-title {
    padding: 12px 16px !important;
    min-height: 56px !important;
  }

  /* ── Invoice Record Shell — full width form ── */
  .invoice-record-shell {
    grid-template-columns: 1fr !important;
    min-height: unset !important;
  }
  .invoice-record-list {
    display: none !important;
  }

  /* ── Bill Form — stack layout ── */
  .bill-form-line {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .bill-form-actions {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
  }
  .bill-form-actions .primary-button,
  .bill-form-actions .ghost-button {
    width: 100% !important;
  }
  .bill-form-body {
    padding: 12px 16px !important;
  }
  .bill-form-header {
    padding: 12px 16px 0 !important;
  }

  /* ── Customer / Vendor Quick Form ── */
  .qvm-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .qvm-footer {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
  }
  .qvm-footer .primary-button,
  .qvm-footer .ghost-button {
    width: 100% !important;
  }

  /* ── Modal forms — full screen, proper padding ── */
  .modal-card {
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 16px !important;
  }
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-body {
    padding: 0 !important;
  }
  .modal-footer {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px 0 0 0 !important;
  }
  .modal-footer .primary-button,
  .modal-footer .ghost-button {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* ── All form rows — label above field on mobile ── */
  .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 14px !important;
  }
  .form-row label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ink3) !important;
  }

  /* ── Invoice/Bill line items table ── */
  .inv-lines-table,
  .lines-table {
    min-width: 500px !important;
  }
  .inv-lines-wrap,
  .lines-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Invoice / Quote form — collapse 2-column details grid ── */
  .quote-details-grid,
  .quote-spaced-grid,
  .inv-details-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .quote-band {
    margin: 0 !important;
    padding: 16px !important;
  }
  .quote-form-body {
    padding: 0 12px 20px !important;
    gap: 16px !important;
  }
  .inv-form-title,
  .quote-form-title {
    padding: 12px 16px !important;
    min-height: 52px !important;
  }
  .addr-inline-row {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .addr-inline-previews {
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* ── Invoice record detail — prevent horizontal overflow ── */
  .invoice-record-detail {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .invoice-record-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  .invoice-preview-paper {
    padding: 24px 14px 20px !important;
    margin: 12px 0 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .invoice-preview-top,
  .invoice-preview-meta {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .invoice-preview-title {
    align-items: flex-start !important;
  }
  .invoice-preview-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .invoice-preview-table-wrap table,
  .invoice-preview-table {
    min-width: 420px !important;
  }
  .invoice-preview-totals {
    justify-content: start !important;
    width: 100% !important;
  }
  .invoice-next-panel {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin: 12px !important;
    gap: 10px !important;
  }
  .invoice-next-main .primary-button {
    width: 100% !important;
  }
  .invoice-next-secondary {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .invoice-payments-panel {
    margin: 12px !important;
    border-radius: 10px !important;
  }
  .invoice-record-titlebar {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
}

/* ══ KRA eTIMS — Manual Filing Mode ══════════════════════════════════════════ */

.etims-notice-bar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
[data-theme="dark"] .etims-notice-bar {
  background: #1e2d47;
  border-color: #2d4a7a;
}
.etims-notice-icon {
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 1px;
}
.etims-notice-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.etims-notice-body strong {
  font-size: 13px;
  font-weight: 700;
  color: #1e40af;
}
[data-theme="dark"] .etims-notice-body strong { color: #93c5fd; }
.etims-notice-body span {
  font-size: 13px;
  color: #3b6ec5;
  line-height: 1.5;
}
[data-theme="dark"] .etims-notice-body span { color: #7aa2d4; }
.etims-notice-body em { font-style: normal; font-weight: 600; }
.etims-portal-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.etims-portal-btn:hover { background: #1d4ed8; }

.etims-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.etims-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2);
}
.etims-step--done { color: #16a34a; }
.etims-step--done .etims-step-num { background: #16a34a; }
.etims-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.etims-step-arrow {
  color: var(--ink3);
  font-size: 14px;
  font-weight: 600;
}

.etims-config-bar {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  background: var(--surface-soft);
}
.etims-config-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.etims-config-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.etims-config-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #16a34a;
  font-weight: 600;
}
.etims-config-pending {
  font-size: 12px;
  color: var(--ink3);
}

.etims-mark-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.etims-mark-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  width: 100%;
  margin-bottom: 2px;
}

@media (max-width: 768px) {
  .etims-notice-bar { flex-direction: column; }
  .etims-portal-btn { width: 100%; justify-content: center; }
  .etims-steps { gap: 6px; }
  .etims-step-arrow { display: none; }
  .etims-step { font-size: 11px; }
  .etims-config-fields { grid-template-columns: 1fr; }
  .etims-mark-form { flex-direction: column; align-items: stretch; }
}

/* ══ POS — Category tabs, Change calculator, Void badge, Z-Report ══════════ */

/* Category filter bar */
.pos-category-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  scrollbar-width: none;
}
.pos-category-bar::-webkit-scrollbar { display: none; }
.pos-cat-btn {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.pos-cat-btn:hover { border-color: var(--accent); color: var(--accent); }
.pos-cat-btn--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Cash change calculator */
.pos-change-calc {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="dark"] .pos-change-calc { background: #0d1f14; border-color: #166534; }
.pos-change-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pos-change-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.pos-change-display--ok {
  background: #dcfce7;
  color: #15803d;
}
.pos-change-display--ok strong { font-size: 18px; font-weight: 800; }
.pos-change-display--short {
  background: #fee2e2;
  color: #dc2626;
}
[data-theme="dark"] .pos-change-display--ok { background: #14532d; color: #86efac; }
[data-theme="dark"] .pos-change-display--short { background: #450a0a; color: #fca5a5; }

/* Voided transaction row */
.pos-txn-row--voided { opacity: 0.5; }
.pos-void-badge {
  display: inline-block;
  padding: 1px 6px;
  background: #dc2626;
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-left: 4px;
  vertical-align: middle;
}

/* Z-Report */
.pos-zreport {
  padding: 20px 16px;
  max-width: 480px;
  margin: 0 auto;
}
.pos-zreport-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
}
.pos-zreport-header h4 {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.pos-zreport-header span {
  font-size: 13px;
  color: var(--ink3);
  font-weight: 600;
}
.pos-zreport-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.pos-zreport-kpi {
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pos-zreport-kpi span { font-size: 11px; color: var(--ink3); font-weight: 600; text-transform: uppercase; }
.pos-zreport-kpi strong { font-size: 22px; font-weight: 800; color: var(--ink); }
.pos-zreport-methods {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.pos-zreport-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.pos-zreport-method:last-child { border-bottom: none; }
.pos-zreport-method span:last-of-type { flex: 1; color: var(--ink2); }
.pos-zreport-method strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.pos-zreport-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pos-zreport-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink3);
  margin-bottom: 8px;
}
.pos-zreport-items {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  background: var(--surface-soft);
}
.pos-zreport-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
  color: var(--ink2);
}
.pos-zreport-item-row:last-child { border-bottom: none; }
.pos-zreport-item-row strong { color: var(--ink); font-weight: 700; }

/* POS History — header + filter bar + return analytics strip */
.pos-history-topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--surface); }
.pos-history-filters { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); flex-shrink: 0; flex-wrap: wrap; }
.pos-hf-group { display: flex; gap: 3px; }
.pos-hf-divider { width: 1px; height: 20px; background: var(--line); margin: 0 2px; flex-shrink: 0; }
.pos-hf-btn { font-size: 11px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--ink2); cursor: pointer; transition: all .12s; white-space: nowrap; line-height: 1.4; }
.pos-hf-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pos-hf-btn--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pos-return-stats { display: flex; align-items: stretch; background: var(--surface-soft); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.pos-return-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; }
.pos-return-stat-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink3); }
.pos-return-stat-count { font-size: 20px; font-weight: 800; color: var(--danger); line-height: 1.1; }
.pos-return-stat-sub { font-size: 9px; color: var(--ink3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pos-return-stat-divider { width: 1px; background: var(--line); align-self: stretch; margin: 8px 0; flex-shrink: 0; }

/* Z-Report returns section */
.pos-zreport-returns { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pos-zreport-return-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pos-zreport-return-card { background: var(--danger-soft); border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pos-zreport-return-card span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink3); }
.pos-zreport-return-card strong { font-size: 18px; font-weight: 800; color: var(--danger); line-height: 1.1; }
.pos-zreport-return-card small { font-size: 11px; color: var(--ink2); }

/* ══ API & Integrations Settings ══════════════════════════════════════════ */
.api-endpoint-row { display: flex; align-items: center; gap: 8px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.api-endpoint-url { font-size: 12px; color: var(--ink2); flex: 1; word-break: break-all; }
.api-endpoints-list { display: flex; flex-direction: column; gap: 4px; }
.api-endpoint-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; }
.api-method { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.api-method--get { background: #dcfce7; color: #15803d; }
@media (prefers-color-scheme: dark) { .api-method--get { background: #14532d; color: #86efac; } }
:root[data-theme="dark"] .api-method--get { background: #14532d; color: #86efac; }
:root[data-theme="light"] .api-method--get { background: #dcfce7; color: #15803d; }
.api-ep-path { font-size: 12px; color: var(--ink); flex-shrink: 0; }
.api-ep-desc { font-size: 11px; color: var(--ink3); }
.api-keys-table { display: flex; flex-direction: column; gap: 0; margin-top: 2px; }
.api-keys-thead { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1fr 1fr; gap: 8px; padding: 6px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink3); border-bottom: 1px solid var(--line); }
.api-keys-row { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1fr 1fr; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line); align-items: center; font-size: 12px; }
.api-keys-row:last-child { border-bottom: none; }
.api-key-masked { font-size: 11px; color: var(--ink2); background: var(--surface-soft); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); }

/* ══ Purchase Order Form — Mobile Fix ═════════════════════════════════════ */
@media (max-width: 768px) {

  /* Panel fills full screen */
  .po-create-panel.open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    z-index: 900 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--surface) !important;
  }

  /* Sticky header */
  .po-form-title,
  .po-zoho-form .quote-form-title {
    padding: 12px 16px !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--surface) !important;
    z-index: 10 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .po-form-title h3,
  .po-zoho-form .quote-form-title h3 { font-size: 17px !important; }

  /* Form body — correct class is quote-form-body, reduce padding for mobile */
  .po-zoho-form .quote-form-body {
    padding: 0 16px 100px !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Gray bands — no negative margin on mobile */
  .po-zoho-form .quote-band {
    margin: 0 -16px !important;
    padding: 16px !important;
  }

  /* Form lines inside PO — label above field */
  .po-zoho-form .quote-form-line {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 8px 0 !important;
  }
  .po-zoho-form .quote-form-line label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--ink3) !important;
  }

  /* Detail fields section */
  .po-detail-fields { gap: 0 !important; }

  /* Dual-row collapses to single column */
  .po-dual-row { grid-template-columns: 1fr !important; }

  /* Vendor picker full width */
  .po-vendor-picker,
  .po-vendor-btn { width: 100% !important; }

  /* Delivery radios */
  .po-delivery-radios { display: flex !important; gap: 16px !important; }

  /* Warehouse bar */
  .po-warehouse-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Item table — pull edge-to-edge then scroll horizontally */
  .po-zoho-form .po-item-table {
    margin: 0 -16px !important;
    width: calc(100vw) !important;
  }
  .po-zoho-form .po-table-shell {
    width: 100% !important;
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .po-zoho-form .po-table-shell table { min-width: 640px !important; }
  .po-zoho-form .po-line-actions { padding: 10px 16px !important; }

  /* Notes + totals stack */
  .po-zoho-form .quote-notes-grid,
  .po-zoho-form .po-bottom-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Terms grid stack */
  .po-zoho-form .quote-terms-grid { grid-template-columns: 1fr !important; }

  /* Sticky save/cancel bar */
  .po-form-actions,
  .po-zoho-form .quote-form-actions {
    flex-direction: column !important;
    padding: 12px 16px !important;
    gap: 8px !important;
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--line) !important;
    z-index: 10 !important;
  }
  .po-form-actions .primary-button,
  .po-form-actions .ghost-button,
  .po-zoho-form .quote-form-actions .primary-button,
  .po-zoho-form .quote-form-actions .ghost-button {
    width: 100% !important;
    min-height: 48px !important;
  }
}

/* ══ Comprehensive Mobile Fixes — All Sections ═══════════════════════════════
   Fixes identified by full CSS audit. Grouped by section.              */
@media (max-width: 768px) {

  /* ── 1. Zoho-style form bodies: high-specificity selectors beat the base
         .quote-form-body override — fix each explicitly ── */
  .so-zoho-form .quote-form-body,
  .inv-zoho-form .quote-form-body,
  .sr-zoho-form .quote-form-body,
  .ri-zoho-form .quote-form-body,
  .po-zoho-form .quote-form-body { padding: 0 12px 20px !important; }

  /* ── 2. inv-details-grid: already collapses to 1-col but margin never reset ── */
  .inv-details-grid { margin: 0 !important; }

  /* ── 3. Invoice description row padding ── */
  .inv-description-row { padding: 14px 16px !important; }

  /* ── 4. Sales Order details grid: negative margin causes overflow ── */
  .so-details-grid {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    border-left: none !important;
  }
  .so-details-grid .quote-form-line {
    border-right: none !important;
  }

  /* ── 5. Recurring Invoice details grid: positive margin eats width ── */
  .ri-details-grid {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    border-left: none !important;
  }
  .ri-details-grid .quote-form-line { border-right: none !important; }

  /* ── 6. Bill form: details, payment, and bottom grids ── */
  .bill-details-grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
  .bpay-grid { grid-template-columns: 1fr !important; }
  .bill-bottom-section { grid-template-columns: 1fr !important; }

  /* ── 7. Projects section ── */
  .proj-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .proj-detail-grid { grid-template-columns: 1fr !important; }
  .proj-section { padding: 14px 16px !important; }

  /* ── 8. Payroll form grid ── */
  .pr-form-grid { grid-template-columns: 1fr !important; }

  /* ── 9. COA: 2-col field row and description indent ── */
  .coa-field-row-2col { grid-template-columns: 1fr !important; }
  .coa-type-desc { margin-left: 0 !important; }

  /* ── 10. Recurring Bill field row: fixed 330px input overflows ── */
  .rb-field-row {
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: auto !important;
    padding: 8px 0 !important;
  }
  .rb-label { width: auto !important; min-width: 0 !important; }
  .rb-short-input,
  .rb-date-input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* ── 11. Recurring Expense form title ── */
  .re-form-title { padding: 12px 16px !important; }

  /* ── 12. Fixed Assets: entire section had zero mobile CSS ── */
  .fa-list-panel,
  .fa-form-panel { padding: 14px 16px !important; }
  .fa-form-topbar {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .fa-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 13. inv-list-header action buttons wrap on narrow screens ── */
  .inv-list-header { flex-wrap: wrap !important; }
  .inv-list-actions {
    flex-wrap: wrap !important;
    /* Desktop's flex-shrink:0 refuses to shrink to the wrapped header row's
       width, so the button group silently overflows past the right edge
       instead of wrapping — it needs to be allowed to shrink to fit. */
    flex-shrink: 1 !important;
    width: 100% !important;
  }
  .inv-list-actions .primary-button,
  .inv-list-actions .ghost-button {
    flex: 1 1 auto !important;
    min-width: 120px !important;
  }

  /* ── 14. Upgrade / My Plan hero ── */
  .myplan-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 18px 16px !important;
  }
  .myplan-upgrade-btn,
  .myplan-active-badge { width: 100% !important; text-align: center !important; }

  /* ── 15. Upgrade modal plan cards ── */
  .upgrade-modal-plans {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── 16. PO form body padding (legacy class still used in some paths) ── */
  .po-form-body { padding: 14px 16px 80px !important; }
}