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

/* CMS 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"). */
:root,
body,
body.dark {
  --font: var(--cf-font);
  --font-d: var(--cf-font);
  --font-b: var(--cf-font);
  --font-login: var(--cf-font);
  --primary: var(--cf-primary);
  --primary-container: var(--cf-primary-light);
  --on-primary: var(--cf-on-primary);
  --bg: var(--cf-bg);
  --surface: var(--cf-surface);
  --surface-low: var(--cf-surface-2);
  --surface-high: var(--cf-surface-3);
  --surface-container: var(--cf-surface-2);
  --text: var(--cf-text);
  --muted: var(--cf-text-muted);
  --outline: var(--cf-text-subtle);
  --border: var(--cf-border);
  --sage-wash: var(--cf-primary-soft);
  --success: var(--cf-success);
  --danger: var(--cf-danger);
  --warning: var(--cf-warning);
  --radius: var(--cf-radius-sm);
  --radius-sm: var(--cf-radius-xs);
  --sidebar: var(--cf-sidebar-w);
}
body.dark {
  --primary-container: #2a2a2a;
  --on-primary-container: #ececec;
}
.pdf-sheet,
.pdf-sheet .pdf-name-tag {
  font-family: var(--font);
}

/* Dark: text on the light accent colors must be dark (the app hard-codes white). */
body.dark :is(.btn:hover, .btn-login:hover, .btn-save-price:hover, .btn-add:hover, .btn-danger, .btn-danger:hover, .loader-retry-btn:hover) {
  color: var(--on-primary) !important;
}
body.dark .btn:hover, body.dark .btn-save-price:hover, body.dark .btn-add:hover { background: var(--primary); }
body.dark .btn-danger:hover { background: #ec9a9a; }
body.dark .rb-cart-count { color: var(--muted); }
body.dark .item-card .badge.danger { background: rgba(224, 122, 122, 0.16); color: var(--danger); }

/* Desktop sidebar footer: everything lives in the profile menu now */
.side-foot{display:none!important}

/* Phone drawer replaces the bottom bar (platform side-drawer) */
body.pl-drawer-mode{--bottom:0px}
.topbar > div:not(.top-actions){margin-right:auto}
.topbar.pl-header{padding-left:var(--cf-header-px)!important;padding-right:var(--cf-header-px)!important}

/* Cost parameters: long labels wrap instead of being cut off in the narrow side-by-side cost panel. */
.content-area .cost-params-row{align-items:flex-end}
.content-area.desk-workspace-mode .cost-params-row .form-group label{white-space:normal;overflow:visible;text-overflow:clip}

/* 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;
}