/* Self-hosted platform UI additions. Loaded after the app styles. */

/* ERP tokens follow the shared standard (platform css/theme.css); light and dark come from there.
   Other dark colors are recolored at build time (app.json "darkTheme"). */
body,
body.dark {
  --primary: var(--cf-primary);
  --primary-lt: var(--cf-primary-light);
  --primary-dk: var(--cf-primary-strong);
  --bg: var(--cf-bg);
  --surface: var(--cf-surface);
  --surface-lt: var(--cf-surface-2);
  --surface-2: var(--cf-surface-3);
  --text: var(--cf-text);
  --muted: var(--cf-text-muted);
  --border: var(--cf-border);
  --success: var(--cf-success);
  --danger: var(--cf-danger);
  --warning: var(--cf-warning);
  --st-avatar: var(--cf-primary-soft);
  --st-chip: var(--cf-surface-3);
  --r-sm: var(--cf-radius-sm);
  --r-md: var(--cf-radius-md);
  --r-lg: var(--cf-radius-lg);
  --r-xl: var(--cf-radius-xl);
  --sh-sm: var(--cf-shadow-sm);
  --sh-md: var(--cf-shadow-md);
  --sh-lg: var(--cf-shadow-lg);
  --header-h: var(--cf-header-h);
  --subheader-h: 0px;
}
.erp-main-panel .header .header-inner { height: 100%; padding-left: var(--cf-header-px) !important; padding-right: var(--cf-header-px) !important; }

body.dark .sub-header {
  background: #1c1c1c !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* The light gray accent needs dark text, like WMS (--primary-contrast). */
body.dark :is(.st-btn-primary, .st-month-all.active, .st-chip.active, .rpt-tab.sub-tab-active .rpt-tab-icon, .settings-tab.active .settings-tab-icon, .is-on, .tag-add, .fab, #global-header-back-btn),
body.dark :is(.st-btn-primary, .st-month-all.active, .st-chip.active, .rpt-tab.sub-tab-active .rpt-tab-icon, .settings-tab.active .settings-tab-icon, .is-on, .tag-add, .fab, #global-header-back-btn) i,
body.dark .erp-bottom-primary i {
  color: #111111 !important;
}

/* Danger / success fills are light in dark mode too: white text on them is unreadable. */
body.dark :is(.btn-danger, .pay-total-btn, .nav-badge, .toast.success),
body.dark :is(.btn-danger, .pay-total-btn, .nav-badge, .toast.success) :is(i, span) {
  color: #111111 !important;
}

body.dark .sub-tab-btn.sub-tab-active small { color: #252a2b !important; opacity: 0.8; }
body.dark .st-row-avatar { background: var(--surface-lt) !important; color: var(--text) !important; }

/* Payables / Paid History filters: a fold-open box instead of a Filter button (owner request). */
.erp-filter-acc {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  height: 44px; padding: 0 16px; margin: 0 0 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  font: 600 var(--cf-fs-sm) var(--cf-font); color: var(--text); cursor: pointer;
}
.erp-filter-acc span { display: inline-flex; align-items: center; gap: 8px; }
.erp-filter-acc span i { color: var(--primary); }
.erp-filter-acc__chev { font-size: 12px; color: var(--muted); transition: transform .2s; }
.erp-filter-acc:has(+ .st-filter-panel.open) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.erp-filter-acc:has(+ .st-filter-panel.open) .erp-filter-acc__chev { transform: rotate(180deg); }
.erp-filter-acc + .st-filter-panel.open { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* Vendors keeps its three actions at the top, side by side (owner request). */
#tab-vendors .st-head .st-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
@media (max-width: 1023.98px) {
  #tab-vendors .st-head, #tab-vendors .st-head .st-actions { width: 100%; }
  #tab-vendors .st-head .st-actions .st-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}
/* Legacy main.css declares the three-column fixed-cost row after its own phone rule, so phones never stacked it. */
@media (max-width: 600px) {
  #fcFormModal .fc-form-top-row { grid-template-columns: 1fr; }
}

/* Phone drawer replaces the bottom bar (platform side-drawer) */
body.pl-drawer-mode { --bottom-nav-h: 0px; }

/* Dark mode: primary, success and danger fills are light, so white text on them is unreadable (inline styles too). */
body.dark :is(.btn-danger, [style*="background:var(--primary)"], [style*="background: var(--primary)"], [style*="background:var(--success)"], [style*="background: var(--success)"], [style*="background:var(--danger)"], [style*="background: var(--danger)"]),
body.dark :is(.btn-danger, [style*="background:var(--primary)"], [style*="background: var(--primary)"], [style*="background:var(--success)"], [style*="background: var(--success)"], [style*="background:var(--danger)"], [style*="background: var(--danger)"]) :is(i, small) {
  color: #111111 !important;
}