/* Light surfaces for the native portal. Keep Open WebUI in its own dark theme. */
:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --bg2: #ffffff;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --border: #dce3eb;
  --border2: #c6d1dc;
  --text: #172334;
  --muted: #526174;
  --dim: #5f6f82;
  --teal: #126d8b;
  --teal-d: #0e5875;
  --amber: #8a5200;
  --emerald: #18794e;
  --rose: #ad3030;
  --sky: #155fa0;
  --violet: #6741a5;
  --glow-t: rgba(18,109,139,.14);
  --glow-a: rgba(138,82,0,.12);
  --ink: #172334;
  --paper: #ffffff;
  --navy: #ffffff;
  --navy-soft: #f1f5f9;
  --line: #dce3eb;
  --accent: #155fa0;
}

html,
body {
  color-scheme: light !important;
  background: #ffffff !important;
  color: #172334 !important;
}
body { overflow-x: hidden; }
::selection { color: #ffffff; background: #155fa0; }
::-webkit-scrollbar-track { background: #f1f4f7 !important; }
::-webkit-scrollbar-thumb { border-color: #f1f4f7 !important; background: #b7c3d0 !important; }
::-webkit-scrollbar-thumb:hover { background: #8999aa !important; }
.aurora,
.gridlines { display: none !important; }

#app.portal-shell,
.portal-shell,
#mainContent,
.workspace,
.workspace-body {
  background: #ffffff !important;
  color: var(--text) !important;
}

/* The only full blue surface is the portal navigation rail. */
#sidebar,
.sidebar {
  border-right: 0 !important;
  background: #155fa0 !important;
  color: #ffffff !important;
  box-shadow: 3px 0 14px rgba(15,43,72,.12) !important;
}
#sidebar > div:first-child,
.sidebar-brand {
  border-color: rgba(255,255,255,.2) !important;
  background: #155fa0 !important;
}
.brand-mark,
#sidebar > div:first-child > div:first-child {
  border: 1px solid rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.13) !important;
  color: #ffffff !important;
}
#sidebar .brand-title { color: #ffffff !important; }
#sidebar .brand-caption { color: #d9e9f8 !important; }
#sidebarToggle {
  border-color: rgba(255,255,255,.28) !important;
  background: transparent !important;
  color: #ffffff !important;
}
#sidebarToggle:hover { border-color: rgba(255,255,255,.6) !important; background: rgba(255,255,255,.12) !important; color: #ffffff !important; }
#sidebar nav .sec,
#sidebar .sec { color: #c9def1 !important; }
#sidebar .nav {
  border-color: transparent !important;
  background: transparent !important;
  color: #eef6ff !important;
}
#sidebar .nav i { color: #d5e8fa !important; }
#sidebar .nav:hover { border-color: rgba(255,255,255,.22) !important; background: rgba(255,255,255,.12) !important; color: #ffffff !important; }
#sidebar .nav.active {
  border-color: #ffffff !important;
  border-left: 3px solid #ffffff !important;
  background: #ffffff !important;
  color: #124f85 !important;
  box-shadow: 0 2px 8px rgba(7,39,71,.18) !important;
}
#sidebar .nav.active i { color: #124f85 !important; }
#sidebar .nav .kbd,
#sidebar .nav.active .kbd { color: #dbeafb !important; }
#sidebar > div:last-child,
.sidebar-footer { border-top-color: rgba(255,255,255,.2) !important; }
#sidebar > div:last-child .nav[onclick*="logout"] { color: #ffe0df !important; }
#sidebar > div:last-child .nav[onclick*="logout"] i { color: #ffe0df !important; }

/* Header, page copy, cards and tables use white or near-white surfaces. */
#mainContent > header,
.workspace-header {
  border-bottom: 1px solid #dce3eb !important;
  background: #ffffff !important;
  color: #172334 !important;
  box-shadow: 0 2px 7px rgba(23,35,52,.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#viewTitle,
.workspace-context { color: #172334 !important; }
#crumb,
.workspace-status { color: #526174 !important; }
#mobileNavToggle,
#paletteTrigger,
#notificationButton,
#mainContent > header > div:last-child > div:last-child {
  border-color: #c6d1dc !important;
  background: #ffffff !important;
  color: #405166 !important;
}
#mobileNavToggle:hover,
#paletteTrigger:hover,
#notificationButton:hover { border-color: #8ea4b8 !important; background: #f3f6f9 !important; color: #172334 !important; }
#paletteTrigger > span { border-color: #d3dce5 !important; background: #f6f8fa !important; color: #526174 !important; }
.openwebui-trigger { border-color: #9db8d0 !important; background: #f2f7fb !important; color: #15558f !important; }
.openwebui-trigger:hover { border-color: #5f8fb9 !important; background: #e7f0f8 !important; color: #123f68 !important; }
.chip { border-color: #dce3eb !important; background: #f8fafc !important; color: #405166 !important; }
.dot { box-shadow: none !important; }
#mainContent > .p-6,
.workspace-body { color: #172334 !important; }
#app .view { color: #172334 !important; }
#app .view > h1,
#app .monitor-overview h1,
#app .monitor-overview .monitor-title { color: #172334 !important; }
#app .view > h1 + p:not([data-state]),
#app .monitor-overview p:not([data-state]),
#app .monitor-overview .monitor-detail,
#app .view p:not(.ollama-app p):not([data-state]) { color: #526174 !important; }
#app .view p.history-status[data-state="ok"],
#app .view p.path-status[data-state="ok"],
#app .view p.domain-health-status[data-state="ok"],
#app .view p.raw-zone-status[data-state="ok"],
#app .view [role="status"][data-state="ok"] { color: #17633f !important; }
#app .view p.history-status[data-state="pending"],
#app .view p.history-status[data-state="stale"],
#app .view p.path-status[data-state="pending"],
#app .view p.path-status[data-state="stale"],
#app .view p.domain-health-status[data-state="pending"],
#app .view p.domain-health-status[data-state="warning"],
#app .view [role="status"][data-state="pending"],
#app .view [role="status"][data-state="stale"],
#app .view [role="status"][data-state="warning"] { color: #805000 !important; }
#app .view p.history-status[data-state="error"],
#app .view p.path-status[data-state="error"],
#app .view p.domain-health-status[data-state="error"],
#app .view p.raw-zone-status[data-state="error"],
#app .view [role="alert"],
#app .view [role="status"][data-state="error"] { color: #922b26 !important; }
#app .page-kicker,
#app .view .sect { color: #155fa0 !important; }
#app .view .text-gray-400 { color: #526174 !important; }
#app .view .text-white:not(.ollama-app .text-white) { color: #172334 !important; }
#app .view .mono:not(.ollama-app .mono),
#app .view code:not(.ollama-app code),
#app .view kbd:not(.ollama-app kbd) { color: #33465b !important; }
#app .view a { color: #155fa0 !important; }
#app .view a:hover { color: #0e456f !important; }

#app .glass,
#app .monitor-summary > *,
#app .monitor-chart,
#app .monitor-bottom > .glass,
#app .monitor-bottom > section,
#app .monitor-bottom > article,
#app .host-card,
#app .host-metric {
  border-color: #dce3eb !important;
  background: #ffffff !important;
  color: #172334 !important;
  box-shadow: 0 1px 4px rgba(23,35,52,.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#app .glass-hover:hover { border-color: #b9c8d7 !important; background: #fbfcfd !important; box-shadow: 0 3px 10px rgba(23,35,52,.08) !important; }
#app .view > .glass { color: #172334 !important; }
#app .view > .glass > h3,
#app .view h2:not(.ollama-app h2),
#app .view h3:not(.ollama-app h3),
#app .view h4:not(.ollama-app h4) { color: #172334 !important; }

/* Dashboard cards and semantic status colors. */
#app .monitor-overview .page-kicker { color: #155fa0 !important; }
#app .monitor-summary strong,
#app .monitor-summary b,
#app .monitor-summary .summary-value,
#app .host-card-title,
#app .metric-value,
#app .monitor-chart .chart-title,
#app .chart-toolbar h2,
#app .chart-toolbar h3 { color: #172334 !important; }
#app .monitor-summary small,
#app .monitor-summary .summary-label,
#app .host-card-meta,
#app .metric-label,
#app .host-card-footer,
#app .chart-legend,
#app .chart-note { color: #526174 !important; }
#app .monitor-summary i,
#app .chart-toolbar i { color: #155fa0 !important; }
#app .host-card-header,
#app .host-card-footer { border-color: #dce3eb !important; }
#app .host-card-state { border-color: #a8d8bd !important; background: #edf8f1 !important; color: #17633f !important; }
#app .host-card-state.is-warning,
#app .host-card-state.warning { border-color: #e7c88f !important; background: #fff7e6 !important; color: #805000 !important; }
#app .host-card-state.is-down,
#app .host-card-state.down,
#app .host-card-state.is-error { border-color: #e8b6b2 !important; background: #fff1f0 !important; color: #9d2929 !important; }
#app .meter { background: #e4eaf0 !important; }
#app .host-metric[data-state="warning"] .meter > span { background: #b46b08 !important; }
#app .host-metric[data-state="critical"] .meter > span { background: #b42318 !important; }
#app .gauge .track { stroke: #e1e7ed !important; }
#app .gauge .val { color: #172334 !important; }
#app progress { border-color: #dce3eb !important; background: #edf1f5 !important; accent-color: #155fa0 !important; }
#app progress::-webkit-progress-bar { background: #edf1f5 !important; }
#app progress::-webkit-progress-value,
#app progress::-moz-progress-bar { background: #155fa0 !important; }

/* Tables, including storage and backup rows. */
#app .view .overflow-x-auto { border-color: #dce3eb !important; background: #ffffff !important; }
#app .view table { background: #ffffff !important; color: #172334 !important; }
#app .view th { border-bottom-color: #dce3eb !important; background: #f2f5f8 !important; color: #405166 !important; }
#app .view td { border-bottom-color: #e4e9ef !important; color: #33465b !important; }
#app .view tbody tr,
#app .view tbody tr:nth-child(even) { background: #ffffff !important; }
#app .view tbody tr:hover { background: #f6f8fa !important; }
#app .view td:first-child { color: #172334 !important; }

/* Forms and controls retain clear focus and action states. */
#app input:not(.ollama-app input),
#app select:not(.ollama-app select),
#app textarea:not(.ollama-app textarea),
#palette input,
#loginScreen input,
dialog.glass input,
dialog.glass select,
dialog.glass textarea {
  border-color: #c6d1dc !important;
  background: #ffffff !important;
  color: #172334 !important;
  color-scheme: light !important;
}
#app input:not(.ollama-app input)::placeholder,
#app textarea:not(.ollama-app textarea)::placeholder,
#palette input::placeholder,
#loginScreen input::placeholder,
dialog.glass input::placeholder,
dialog.glass textarea::placeholder { color: #68798c !important; opacity: 1; }
#app input:not(.ollama-app input):focus,
#app select:not(.ollama-app select):focus,
#app textarea:not(.ollama-app textarea):focus,
#palette input:focus,
#loginScreen input:focus,
dialog.glass input:focus,
dialog.glass select:focus,
dialog.glass textarea:focus { border-color: #3979b1 !important; box-shadow: 0 0 0 3px rgba(21,95,160,.14) !important; }
#app select:not(.ollama-app select) option,
#palette select option,
#loginScreen select option,
dialog.glass select option { background: #ffffff !important; color: #172334 !important; }
#app .btn:not(.ollama-app .btn) { border-color: #c6d1dc !important; background: #ffffff !important; color: #33465b !important; box-shadow: none !important; }
#app .btn:not(.ollama-app .btn):hover { border-color: #8ea4b8 !important; background: #f2f5f8 !important; color: #172334 !important; }
#app .btn-teal:not(.ollama-app .btn-teal),
#loginScreen .btn-teal { border-color: #155fa0 !important; background: #ffffff !important; color: #15558f !important; }
#app .btn-teal:not(.ollama-app .btn-teal):hover,
#loginScreen .btn-teal:hover { border-color: #104a7d !important; background: #f2f7fb !important; color: #104a7d !important; }
#app .btn-rose:not(.ollama-app .btn-rose) { border-color: #d99a94 !important; background: #ffffff !important; color: #922b26 !important; }
#app .btn-rose:not(.ollama-app .btn-rose):hover { border-color: #c66f67 !important; background: #fff8f7 !important; color: #7e211d !important; }
#app .btn-active-start:not(.ollama-app .btn-active-start) { border-color: #8cc6a5 !important; background: #ffffff !important; color: #17633f !important; }
#app .btn-active-stop:not(.ollama-app .btn-active-stop) { border-color: #d99a94 !important; background: #ffffff !important; color: #922b26 !important; }
#app .btn:disabled,
#app .view .btn:disabled,
#loginScreen .btn:disabled,
#loginScreen button:disabled { border-color: #c6d1dc !important; background: #f1f4f7 !important; color: #526174 !important; opacity: .78 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }
#loginScreen .login-card button { border-color: #155fa0 !important; background: #ffffff !important; color: #15558f !important; }
#loginScreen .login-card button:hover:not(:disabled) { border-color: #104a7d !important; background: #f2f7fb !important; color: #104a7d !important; }
#loginScreen .login-card button:disabled { border-color: #c6d1dc !important; background: #f1f4f7 !important; color: #526174 !important; opacity: .78 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }
#app .toggle { border-color: #aebbc8 !important; background: #dce3eb !important; }
#app .toggle::after { background: #ffffff !important; }
#app .toggle.on { border-color: #155fa0 !important; background: #155fa0 !important; }
#app .chart-controls button,
#app .chart-controls [role="button"] { border-color: #c6d1dc !important; background: #ffffff !important; color: #405166 !important; }
#app .chart-controls button:hover,
#app .chart-controls [role="button"]:hover { border-color: #8ea4b8 !important; background: #f2f5f8 !important; color: #172334 !important; }
#app .chart-controls button.active,
#app .chart-controls button[aria-pressed="true"],
#app .chart-controls .active { border-color: #155fa0 !important; background: #e8f1f8 !important; color: #124f85 !important; }

/* Chart axes and host series are dark enough to read on white. */
#app .chart-plot { border-color: #dce3eb !important; background: #ffffff !important; }
#app .chart-plot svg text { fill: #526174 !important; }
#app .chart-plot svg line,
#app .chart-plot svg .grid,
#app .chart-plot svg .gridline { stroke: #dce3eb !important; }
#app .chart-plot svg circle { stroke: #ffffff !important; }
#app #view-dashboard svg [stroke="#46b8fa" i] { stroke: #155fa0 !important; }
#app #view-dashboard svg [fill="#46b8fa" i] { fill: #155fa0 !important; }
#app #view-dashboard svg [stroke="#43d9b1" i] { stroke: #167456 !important; }
#app #view-dashboard svg [fill="#43d9b1" i] { fill: #167456 !important; }
#app .chart-legend .legend-dot[style*="#46b8fa" i] { background: #155fa0 !important; }
#app .chart-legend .legend-dot[style*="#43d9b1" i] { background: #167456 !important; }
#app .chart-note { color: #526174 !important; }

/* Infrastructure map and native terminal/log surfaces. */
#app .infra-fabric { border-color: #dce3eb !important; border-left-color: #155fa0 !important; background: #ffffff !important; color: #172334 !important; }
#app .fabric-host.btn,
#app .fabric-host.btn:hover { border-color: #dce3eb !important; background: #f7f9fc !important; color: #33465b !important; }
#app .fabric-host strong { color: #172334 !important; }
#app .fabric-host > span:last-child,
#app .fabric-number { color: #526174 !important; }
#app .fabric-link { border-color: #c6d1dc !important; }
#app .fabric-link strong { color: #405166 !important; }
#app .fabric-link[data-state="ok"] strong { color: #17633f !important; }
#app .fabric-link[data-state="error"] strong { color: #922b26 !important; }
#app .fabric-link small { color: #526174 !important; }
#app .attention-ok { color: #17633f !important; }
#app .attention-item.btn { border-color: #e7c88f !important; background: #ffffff !important; color: #805000 !important; }
#app .history-summary,
#app .path-check-heading { color: #33465b !important; }
#app .path-check[data-state="ok"],
#app .path-check[data-state="error"] { background: #ffffff !important; }
#app .path-check[data-state="ok"] { border-color: #a8d8bd !important; }
#app .path-check[data-state="error"] { border-color: #e8b6b2 !important; }
#app .path-check-detail { color: #526174 !important; }
#app .status-pill[data-state="ok"] { border-color: #a8d8bd !important; background: #edf8f1 !important; color: #17633f !important; }
#app .status-pill[data-state="warning"] { border-color: #e7c88f !important; background: #fff7e6 !important; color: #805000 !important; }
#app .status-pill[data-state="error"] { border-color: #e8b6b2 !important; background: #fff1f0 !important; color: #922b26 !important; }
#app .status-pill[data-state="neutral"] { border-color: #c6d1dc !important; background: #f5f7f9 !important; color: #526174 !important; }
#app .domain-error-detail { color: #922b26 !important; }
#app .disk-path { color: #155fa0 !important; }
#app .activity-list li { border-color: #e4e9ef !important; }
#app .activity-list time { color: #5f6f82 !important; }
#app .activity-list .activity-empty,
#app .palette-empty { color: #526174 !important; }
#app .pal-item.is-selected { border-color: #b6cce0 !important; background: #e8f1f8 !important; color: #124f85 !important; outline-color: #9db8d0 !important; }
#app .log-output,
#app .term,
#app .admin-terminal,
#app .admin-terminal-bar,
#app .admin-terminal-tab,
#app .admin-terminal-output,
#app .admin-terminal-inputbar { border-color: #dce3eb !important; background: #f7f9fc !important; color: #172334 !important; }
#app .admin-terminal-tab,
#app .admin-terminal-host.active { border-color: #dce3eb !important; background: #ffffff !important; color: #172334 !important; }
#app .admin-terminal-host { color: #526174 !important; }
#app .admin-terminal-input { background: transparent !important; color: #172334 !important; }
#app .admin-terminal-run { border-color: #c6d1dc !important; background: #ffffff !important; color: #33465b !important; }
#app .admin-terminal-prompt { color: #155fa0 !important; }
#app .grafana-embed,
#app .grafana-embed-frame { background: #ffffff !important; }

/* Login, command palette, dialogs, notifications and toasts. */
#loginScreen:not(.hidden) { background: #ffffff !important; color: #172334 !important; }
.login-layout { border-color: #dce3eb !important; background: #ffffff !important; box-shadow: 0 12px 36px rgba(23,35,52,.08) !important; }
.login-story,
.login-panel { background: #ffffff !important; color: #172334 !important; }
.login-heading,
.login-panel .login-heading,
#loginScreen .login-card h1 { color: #172334 !important; }
.login-eyebrow,
.login-panel .login-eyebrow { color: #155fa0 !important; }
.login-description,
.login-panel .login-description { color: #526174 !important; }
.login-story-grid { border-color: #dce3eb !important; background: #dce3eb !important; }
.login-story-grid > * { background: #f7f9fc !important; color: #33465b !important; }
.login-story-grid strong { color: #155fa0 !important; }
.login-monogram,
.login-story .login-monogram { border-color: #9db8d0 !important; background: #e8f1f8 !important; color: #155fa0 !important; }
.login-footnote { color: #5f6f82 !important; }
#loginScreen .login-card .space-y-4,
#loginScreen .login-card .space-y-4 label,
#loginScreen .login-card .space-y-4 > p { color: #526174 !important; }
#loginScreen .login-card .space-y-4 form > p[role="alert"] { color: #922b26 !important; }
#palette { background: rgba(23,35,52,.32) !important; }
#palette > .glass { border-color: #c6d1dc !important; background: #ffffff !important; color: #172334 !important; box-shadow: 0 20px 55px rgba(23,35,52,.2) !important; }
#palette > .glass > div:first-child { border-color: #dce3eb !important; }
#palette > .glass > div:first-child > i { color: #155fa0 !important; }
#palette .pal-item,
#palette .pal-item .tag { color: #405166 !important; }
#palette .pal-item:hover,
#palette .pal-item.sel,
#palette .pal-item.is-selected { background: #e8f1f8 !important; color: #124f85 !important; }
#palette .pal-item .tag { border-color: #dce3eb !important; }
dialog.glass { border-color: #c6d1dc !important; background: #ffffff !important; color: #172334 !important; box-shadow: 0 20px 55px rgba(23,35,52,.2) !important; }
dialog.glass::backdrop { background: rgba(23,35,52,.35) !important; }
dialog.glass h3 { color: #172334 !important; }
dialog.glass label { color: #405166 !important; }
dialog.glass .text-white { color: #172334 !important; }
dialog.glass code { border-color: #dce3eb !important; background: #f2f5f8 !important; color: #155fa0 !important; }
#toasts .toast,
.toast { border-color: #dce3eb !important; border-left-color: #155fa0 !important; background: #ffffff !important; color: #172334 !important; box-shadow: 0 8px 24px rgba(23,35,52,.12) !important; }
.notification { border-color: #dce3eb !important; background: #ffffff !important; color: #172334 !important; box-shadow: 0 10px 28px rgba(23,35,52,.14) !important; }
.notification-title { color: #172334 !important; }
.notification-body,
.notification-close { color: #526174 !important; }
#sidebarBackdrop { background: rgba(23,35,52,.42) !important; }

/* Open WebUI is a separate app surface with its existing dark palette. */
.ollama-app {
  --bg: #111a25;
  --bg2: #152130;
  --panel: #1a2838;
  --panel-solid: #1a2838;
  --border: #304357;
  --border2: #40566d;
  --text: #e6edf4;
  --muted: #a8b7c7;
  --dim: #8294a7;
  --teal: #46b8d4;
  --teal-d: #258aa8;
  --amber: #e5a45a;
  --emerald: #58c59a;
  --rose: #f07878;
  --sky: #63a9e9;
  --violet: #a88bdd;
  color-scheme: dark;
  background: #172433 !important;
  color: #dce7ee !important;
}

@media (max-width: 1023px) {
  #sidebar { background: #155fa0 !important; box-shadow: 10px 0 28px rgba(15,43,72,.22) !important; }
  #mainContent > header,
  .workspace-header { background: #ffffff !important; }
  #sidebarBackdrop { background: rgba(23,35,52,.42) !important; }
}