/* Brenova UltraCafe palette and role operations layer — v468.
 * Canonical dark palette adapted from the supplied UltraCafe Phase 1 UI.
 */

:root,
html {
  color-scheme: dark;
  --ultra-cyan: #00f3ff;
  --ultra-pink: #ff0055;
  --ultra-gold: #ffcc00;
  --ultra-green: #00ff99;
  --ultra-blue: #3b82f6;
  --ultra-bg: #0f0f14;
  --ultra-bg-deep: #08090d;
  --ultra-card: #11131b;
  --ultra-card-2: #101118;
  --ultra-surface: rgba(255, 255, 255, .035);
  --ultra-surface-strong: rgba(255, 255, 255, .065);
  --ultra-border: rgba(255, 255, 255, .09);
  --ultra-border-strong: rgba(255, 255, 255, .16);
  --ultra-text: #f8fafc;
  --ultra-muted: #9299a7;
  --ultra-faint: #626a78;
  --br-bg: var(--ultra-bg);
  --br-bg-deep: var(--ultra-bg-deep);
  --br-grid-color: rgba(255, 204, 0, .035);
  --br-surface: var(--ultra-surface);
  --br-surface-strong: var(--ultra-card);
  --br-surface-solid: var(--ultra-card-2);
  --br-surface-soft: rgba(255, 255, 255, .025);
  --br-surface-muted: var(--ultra-surface-strong);
  --br-overlay: rgba(0, 0, 0, .76);
  --br-border: var(--ultra-border);
  --br-border-strong: var(--ultra-border-strong);
  --br-text: var(--ultra-text);
  --br-text-strong: var(--ultra-text);
  --br-text-muted: var(--ultra-muted);
  --br-text-soft: var(--ultra-faint);
  --br-text-disabled: #626a78;
  --br-placeholder: #7f8795;
  --br-icon: var(--ultra-text);
  --br-icon-muted: var(--ultra-muted);
  --br-accent: var(--ultra-gold);
  --br-accent-strong: var(--ultra-gold);
  --br-accent-contrast: #090a0e;
  --br-focus: rgba(255, 204, 0, .12);
  --br-success: #00e68a;
  --br-success-strong: var(--ultra-green);
  --br-success-soft: rgba(0, 255, 153, .07);
  --br-warning: var(--ultra-gold);
  --br-warning-strong: var(--ultra-gold);
  --br-warning-soft: rgba(255, 204, 0, .08);
  --br-danger: #ff3b6b;
  --br-danger-strong: var(--ultra-pink);
  --br-danger-soft: rgba(255, 0, 85, .08);
  --br-info: #00ddec;
  --br-info-strong: var(--ultra-cyan);
  --br-info-soft: rgba(0, 243, 255, .08);
  --br-shadow-card: 0 22px 70px rgba(0, 0, 0, .36);
  --br-shadow-elevated: 0 24px 90px rgba(0, 0, 0, .65), 0 0 34px rgba(255, 204, 0, .07);
  --br-shadow-accent: 0 0 32px rgba(255, 204, 0, .11);
  --br-nav-bg-start: #101118;
  --br-nav-bg-end: #090a0e;
  --br-nav-fg: var(--ultra-text);
  --br-nav-muted: var(--ultra-muted);
  --br-nav-active: var(--ultra-gold);
  --br-nav-active-bg: rgba(255, 204, 0, .12);
  --br-nav-active-border: rgba(255, 204, 0, .28);
  --br-nav-border: rgba(255, 204, 0, .22);
  --br-nav-shadow: 0 22px 70px rgba(0, 0, 0, .48), 0 0 42px rgba(255, 204, 0, .08);
  --br-nav-primary-ring: rgba(255, 204, 0, .28);
}

html,
body,
body.brenova-ui-v145 {
  background: var(--br-bg) !important;
  color: var(--br-text) !important;
}

.ambient-bg,
body.brenova-ui-v145 .ambient-bg {
  background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--br-surface-muted) 52%, transparent), transparent 31%),
    radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--br-border) 24%, transparent), transparent 29%),
    var(--br-bg) !important;
}

.login-bg-grid {
  background-image: linear-gradient(var(--br-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--br-grid-color) 1px, transparent 1px) !important;
}

.ambient-blob-1,
.ambient-blob-2 {
  opacity: .18 !important;
  filter: blur(72px) !important;
}

.ambient-blob-1 {
  background: #c9ced5 !important;
}

.ambient-blob-2 {
  background: #e0e3e7 !important;
}



body :where(#main-app, #auth-guard, .modal-content, #role-chooser-modal, dialog) :where(h1, h2, h3, h4, h5, h6, strong, b, label, .text-brand-dark, .text-cafe-dark, [class*="text-stone-8"], [class*="text-stone-9"], [class*="text-slate-8"], [class*="text-slate-9"], [class*="text-gray-8"], [class*="text-gray-9"], [class*="text-zinc-8"], [class*="text-zinc-9"]) {
  color: var(--br-text-strong) !important;
  text-shadow: none !important;
}

body :where(#main-app, #auth-guard, .modal-content, #role-chooser-modal, dialog) :where(p, small, [class*="text-stone-4"], [class*="text-stone-5"], [class*="text-stone-6"], [class*="text-stone-7"], [class*="text-slate-4"], [class*="text-slate-5"], [class*="text-slate-6"], [class*="text-slate-7"], [class*="text-gray-4"], [class*="text-gray-5"], [class*="text-gray-6"], [class*="text-gray-7"], [class*="text-zinc-4"], [class*="text-zinc-5"], [class*="text-zinc-6"], [class*="text-zinc-7"]) {
  color: var(--br-text-muted) !important;
  text-shadow: none !important;
}

.text-brand-primary {
  color: var(--br-accent-strong) !important;
}

:where(input, select, textarea, [contenteditable="true"]) {
  background: var(--br-surface-strong) !important;
  color: var(--br-text-strong) !important;
  border-color: var(--br-border) !important;
  caret-color: var(--br-accent-strong) !important;
  box-shadow: none !important;
}

:where(input, select, textarea, [contenteditable="true"]):focus {
  background: var(--br-surface-solid) !important;
  border-color: var(--br-border-strong) !important;
  box-shadow: 0 0 0 4px var(--br-focus) !important;
  outline: none !important;
}

:where(input, textarea)::placeholder {
  color: var(--br-placeholder) !important;
  opacity: 1 !important;
}

:where(select, option) {
  background-color: var(--br-surface-solid) !important;
  color: var(--br-text-strong) !important;
}

:where(button, [role="button"]):focus-visible {
  outline: 3px solid var(--br-focus) !important;
  outline-offset: 2px;
}

:where(button, [role="button"]):disabled {
  color: var(--br-text-disabled) !important;
}

#auth-guard,
:where(.fixed.inset-0[class*="bg-stone-900"], .fixed.inset-0[class*="bg-black"]) {
  background-color: var(--br-overlay) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.modal-content,
#role-chooser-modal > div,
dialog > [class*="bg-white"] {
  background: var(--br-surface-strong) !important;
  border: 1px solid var(--br-border) !important;
  color: var(--br-text) !important;
  box-shadow: var(--br-shadow-elevated) !important;
}

#role-chooser-modal {
  background: var(--br-bg) !important;
  color: var(--br-text) !important;
}

#role-chooser-modal .sticky.top-0 {
  background: color-mix(in srgb, var(--br-surface-strong) 94%, transparent) !important;
  border-color: var(--br-border) !important;
}

#role-chooser-modal [data-action="select-role"] {
  background: var(--br-surface-soft) !important;
  border-color: var(--br-border) !important;
  color: var(--br-text) !important;
}

#role-chooser-modal [data-action="select-role"].is-selected {
  background: var(--br-surface-muted) !important;
  border-color: var(--br-border-strong) !important;
  color: var(--br-text-strong) !important;
}

body.brenova-ui-v145 #main-app > header.glass-card {
  background: linear-gradient(145deg, var(--br-surface-strong), var(--br-surface-solid)) !important;
  border-color: var(--br-border) !important;
  color: var(--br-text) !important;
  box-shadow: var(--br-shadow-card) !important;
}

body.brenova-ui-v145 #main-app > header.glass-card :where(button, .bg-white, .bg-white\/50, .bg-white\/80) {
  background: var(--br-surface-muted) !important;
  border-color: var(--br-border) !important;
  color: var(--br-icon) !important;
}

body.brenova-ui-v145 #main-app :where(#header-app-name, #active-user-name) {
  color: var(--br-text-strong) !important;
}

body.brenova-ui-v145 #main-app #header-brand-caption {
  color: var(--br-text-muted) !important;
}

body.brenova-ui-v145 #main-app #active-user-role {
  background: #c2410c !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.leaflet-container {
  background: var(--br-bg-deep) !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--br-text-muted) 38%, transparent);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--br-text-strong) 58%, transparent);
}

.active .tab-line {
  background: var(--br-accent-strong) !important;
  box-shadow: none !important;
}

/* Role operations: one visual language, with a distinct operational accent per desk. */
[data-role-dashboard-build] {
  --role-ops-accent: #ffcc00;
  --role-ops-accent-soft: rgba(255, 204, 0, .12);
  --role-ops-accent-border: rgba(255, 204, 0, .28);
  display: grid;
  gap: .85rem;
}

[data-role-dashboard-role="visitor"] { --role-ops-accent: #ffcc00; --role-ops-accent-soft: rgba(255, 204, 0, .12); --role-ops-accent-border: rgba(255, 204, 0, .28); }
[data-role-dashboard-role="sales"] { --role-ops-accent: #00f3ff; --role-ops-accent-soft: rgba(0, 243, 255, .10); --role-ops-accent-border: rgba(0, 243, 255, .28); }
[data-role-dashboard-role="driver"] { --role-ops-accent: #3b82f6; --role-ops-accent-soft: rgba(59, 130, 246, .13); --role-ops-accent-border: rgba(59, 130, 246, .30); }
[data-role-dashboard-role="accountant"] { --role-ops-accent: #c4b5fd; --role-ops-accent-soft: rgba(196, 181, 253, .13); --role-ops-accent-border: rgba(196, 181, 253, .30); }
[data-role-dashboard-role="crm"] { --role-ops-accent: #00f3ff; --role-ops-accent-soft: rgba(0, 243, 255, .10); --role-ops-accent-border: rgba(0, 243, 255, .28); }
[data-role-dashboard-role="procurement"] { --role-ops-accent: #ffcc00; --role-ops-accent-soft: rgba(255, 204, 0, .12); --role-ops-accent-border: rgba(255, 204, 0, .28); }
[data-role-dashboard-role="retailer"] { --role-ops-accent: #f0abfc; --role-ops-accent-soft: rgba(240, 171, 252, .13); --role-ops-accent-border: rgba(240, 171, 252, .30); }

[data-role-dashboard-build] .role-ops-hero {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--role-ops-accent) 24%, transparent), transparent 34%),
    linear-gradient(135deg, #11131b 0%, #101118 48%, #08090d 100%) !important;
  border: 1px solid var(--role-ops-accent-border) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important;
}

[data-role-dashboard-build] .role-ops-hero :where(h2, p, i, button) {
  color: #f8f9fa !important;
}

[data-role-dashboard-build] .role-ops-hero p {
  color: #b9c0cc !important;
}

[data-role-dashboard-build] .role-ops-metric,
[data-role-dashboard-build] .role-ops-flow {
  background: linear-gradient(145deg, var(--br-surface-strong), var(--br-surface-solid)) !important;
  border-color: var(--br-border) !important;
  box-shadow: none !important;
}

[data-role-dashboard-build] .role-ops-icon,
[data-role-dashboard-build] .role-ops-connected {
  background: var(--role-ops-accent-soft) !important;
  color: var(--role-ops-accent) !important;
  border: 1px solid var(--role-ops-accent-border);
}

[data-role-dashboard-build] .role-ops-queue {
  background: var(--role-ops-accent-soft) !important;
  border-color: var(--role-ops-accent-border) !important;
}

[data-role-dashboard-build] .role-ops-queue :where(h3, p, i) {
  color: var(--role-ops-accent) !important;
}

[data-role-dashboard-build] .role-ops-step {
  background: var(--br-surface-soft) !important;
  border-color: var(--br-border) !important;
}

[data-role-dashboard-build] .role-ops-step small {
  color: var(--role-ops-accent) !important;
}