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

/* Same font as WMS (icons keep Font Awesome). */
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
  font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#loader-overlay,
#loader-overlay *:not(i):not([class*="fa-"]),
#orderNoteInput,
#suggNotes {
  font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* CKOS 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-light: var(--cf-primary-light);
  --bg-base: var(--cf-bg);
  --bg-main: var(--cf-bg);
  --bg-body: var(--cf-bg);
  --bg: var(--cf-bg);
  --app-bg: var(--cf-bg);
  --bg-surface: var(--cf-surface);
  --card: var(--cf-surface);
  --bg-surface-light: var(--cf-surface-2);
  --text-main: var(--cf-text);
  --text: var(--cf-text);
  --text-muted: var(--cf-text-muted);
  --muted: var(--cf-text-muted);
  --border: var(--cf-border);
  --accent: var(--cf-primary);
  --mint: var(--cf-accent);
  --mint-strong: var(--cf-primary-light);
  --success: var(--cf-success);
  --danger: var(--cf-danger);
  --warning: var(--cf-warning);
  --radius-sm: var(--cf-radius-xs);
  --radius-md: var(--cf-radius-sm);
  --radius-lg: var(--cf-radius-md);
  --admin-shadow-card: var(--cf-shadow-xs);
  --admin-shadow-hover: var(--cf-shadow-md);
  --admin-sidebar-bg: var(--cf-surface);
  --admin-sidebar-text: var(--cf-text-muted);
  --chip-live-bg: var(--cf-success-soft);
  --chip-live-text: var(--cf-success-strong);
  --chip-live-border: var(--cf-success-soft);
  --chip-pending-bg: var(--cf-warning-soft);
  --chip-pending-text: var(--cf-warning-strong);
  --chip-pending-border: var(--cf-warning-soft);
  --chip-alert-bg: var(--cf-danger-soft);
  --chip-alert-text: var(--cf-danger-strong);
  --chip-alert-border: var(--cf-danger-soft);
  --chip-info-bg: var(--cf-info-soft);
  --chip-info-text: var(--cf-info-strong);
  --chip-info-border: var(--cf-info-soft);
}

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

/* The light gray accent needs dark text, like WMS (--primary-contrast). */
body.dark :is(.btn-main.staff-desktop-action, .admin-panel-subheader),
body.dark :is(.btn-main.staff-desktop-action, .admin-panel-subheader) i {
  color: #111111 !important;
}

/* Primary, success and danger fills are all light in dark mode: white text on them is unreadable. */
body.dark :is(.btn-login, .btn-add, .btn, .btn-main:not(.btn-outline), .branch-card.active .branch-card-icon, .toast, .toast-corner, .loader-retry-btn, .qty-btn.plus, .nav-bar-btn.nav-primary),
body.dark :is(.btn-login, .btn-add, .btn, .btn-main:not(.btn-outline), .branch-card.active .branch-card-icon, .toast, .toast-corner, .loader-retry-btn, .qty-btn.plus, .nav-bar-btn.nav-primary) :is(i, span),
body.dark :is([style*="background: var(--primary)"], [style*="background:var(--primary)"], [style*="background-color: var(--primary)"], [style*="background: var(--danger)"], [style*="background: var(--success)"]),
body.dark :is([style*="background: var(--primary)"], [style*="background:var(--primary)"], [style*="background-color: var(--primary)"], [style*="background: var(--danger)"], [style*="background: var(--success)"]) i {
  color: #111111 !important;
}

/* Profile menu dropdown must open above the page content */
.admin-panel-header{position:relative;z-index:60}

/* Phone drawer button sits left of the brand (platform side-drawer) */
.sticky-header-group .header-inner > .pl-drawer-btn + *{margin-right:auto}
.sticky-header-group .pl-header .header-inner,.admin-panel-header.pl-header{padding-left:var(--cf-header-px)!important;padding-right:var(--cf-header-px)!important}
body.pl-drawer-mode{--nav-height: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;
}