/* Flexpacksweg operations portal: clear, paper-based control-room interface.
   Load after assets.css, theme.css and portal.css. */

:root {
  color-scheme: light;
  --bg: #f3f1eb;
  --bg2: #ebe8e0;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --border: #d8d9d7;
  --border2: #bfc5ca;
  --text: #17283b;
  --muted: #53657a;
  --dim: #758397;
  --teal: #245b86;
  --teal-d: #193f62;
  --amber: #ba631c;
  --emerald: #26724d;
  --rose: #ad433d;
  --sky: #2d6e9c;
  --violet: #665c91;
  --glow-t: rgba(36, 91, 134, .12);
  --glow-a: rgba(186, 99, 28, .12);
  --ink: #17283b;
  --paper: #f3f1eb;
  --navy: #14273a;
  --navy-soft: #20384f;
  --line: #d8d9d7;
  --accent: #c56a20;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 14px;
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button, [role="button"], .nav { touch-action: manipulation; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }
::selection { color: #fff; background: #245b86; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #ebe9e3; }
::-webkit-scrollbar-thumb { background: #b9c0c4; border: 2px solid #ebe9e3; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #8d9ba4; }

:where(a, button, [role="button"], .nav, .toggle, input, select, textarea, summary):focus-visible {
  outline: 3px solid #d27b35 !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

.aurora, .gridlines { display: none !important; }
.skip-link {
  position: fixed;
  z-index: 110;
  top: 8px;
  left: 8px;
  padding: 9px 13px;
  transform: translateY(-160%);
  border: 1px solid #fff;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 12px #0003;
}
.skip-link:focus { transform: translateY(0); }

/* Application frame */
#app.portal-shell,
.portal-shell {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
}
#app:not(.hidden) { display: flex; }
#app.hidden, #loginScreen.hidden { display: none !important; }
#mainContent,
.workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 0;
  min-width: 0;
  min-height: 100dvh;
  height: 100dvh;
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
}

/* Dark, compact navigation rail */
#sidebar,
.sidebar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  flex: 0 0 252px;
  flex-direction: column;
  width: 252px;
  min-width: 252px;
  height: 100dvh;
  overflow: hidden;
  border: 0 !important;
  border-right: 1px solid #2a3d50 !important;
  background: var(--navy) !important;
  color: #eaf0f4;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: width .2s ease, min-width .2s ease, flex-basis .2s ease, transform .24s ease;
}
#sidebar > div:first-child,
.sidebar-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 78px;
  gap: 12px;
  padding: 15px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #304457 !important;
  background: transparent;
}
.brand-mark,
#sidebar > div:first-child > div:first-child {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #52718d !important;
  border-radius: 5px !important;
  background: #27445f !important;
  color: #f6f7f4 !important;
  box-shadow: none !important;
}
.brand-mark i,
#sidebar > div:first-child > div:first-child i { color: #fff !important; }
.brand-title,
#sidebar .brand-t > div:first-child {
  color: #f4f5f2 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  line-height: 1.2 !important;
}
.brand-caption,
#sidebar .brand-t > div:last-child {
  margin-top: 4px !important;
  color: #9eb0c1 !important;
  font-size: 10px !important;
  letter-spacing: .04em;
}
#sidebarToggle {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid #3a5063;
  border-radius: 4px !important;
  color: #b9c6d1 !important;
}
#sidebarToggle:hover { background: #263e55 !important; color: #fff !important; }

#sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 10px !important;
  overflow-x: hidden;
  overflow-y: auto;
}
#sidebar nav .sec,
#sidebar .sec {
  display: block;
  padding: 15px 10px 5px !important;
  color: #8297aa !important;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}
#sidebar nav .sec:first-child { padding-top: 4px !important; }
#sidebar .nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 39px;
  margin: 2px 0;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #c0ccd6 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  box-shadow: none !important;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
#sidebar .nav:hover {
  border-color: #354c60 !important;
  background: #20384f !important;
  color: #fff !important;
}
#sidebar .nav.active {
  border-color: #46627a !important;
  border-left: 3px solid #d27b35 !important;
  padding-left: 8px !important;
  background: #29435c !important;
  color: #fff !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
#sidebar .nav i { width: 18px; flex: 0 0 18px; color: #90a6b8 !important; font-size: 12px; }
#sidebar .nav.active i { color: #f0a05e !important; }
#sidebar .nav .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidebar .nav .kbd {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid #42586c;
  border-radius: 3px;
  color: #8fa1b0 !important;
  font: 10px/1.4 "JetBrains Mono", Consolas, monospace;
}
#sidebar .nav.active .kbd { border-color: #607b91; color: #d6e0e6 !important; }
#sidebar > div:last-child,
.sidebar-footer {
  flex: 0 0 auto;
  padding: 9px 10px max(11px, env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important;
  border-top: 1px solid #304457 !important;
  background: transparent;
}
#sidebar > div:last-child .nav { min-height: 37px; }
#sidebar > div:last-child .nav[onclick*="logout"] { color: #e89b91 !important; }
#sidebar > div:last-child .nav[onclick*="logout"] i { color: #da877b !important; }
#sidebar.min, .sidebar.min {
  flex-basis: 74px;
  width: 74px;
  min-width: 74px;
}
#sidebar.min .nav { justify-content: center; gap: 0; padding-right: 6px !important; padding-left: 6px !important; }
#sidebar.min .nav.active { padding-left: 4px !important; }
#sidebar.min .nav .lbl,
#sidebar.min .nav .kbd,
#sidebar.min .sec,
#sidebar.min .brand-t { display: none !important; }
#sidebar.min .nav i { width: auto; flex-basis: auto; font-size: 14px; }
#sidebar.min .sidebar-brand { justify-content: center; padding-right: 8px !important; padding-left: 8px !important; }
#sidebar.min #sidebarToggle { position: absolute; right: 7px; bottom: 12px; }
#sidebar.min #sidebarToggle i { font-size: 10px; }

/* Workspace header and page content */
#mainContent > header,
.workspace-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  padding: 11px 28px !important;
  border: 0 !important;
  border-bottom: 1px solid #d8d9d7 !important;
  background: rgba(243, 241, 235, .97) !important;
  color: var(--ink);
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.workspace-header > div:first-of-type,
#mainContent > header > div:first-of-type {
  min-width: 150px;
}
#viewTitle,
.workspace-context {
  margin: 0;
  color: #17283b !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
  line-height: 1.2 !important;
}
#crumb,
.workspace-status {
  margin-top: 4px !important;
  color: #748194 !important;
  font-family: "JetBrains Mono", Consolas, monospace !important;
  font-size: 9px !important;
  letter-spacing: .04em;
  line-height: 1.35;
}
#mobileNavToggle {
  display: none;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  justify-content: center;
  border: 1px solid #c9ced0 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #25435d !important;
}
#sidebarToggle { flex: 0 0 auto; }
#paletteTrigger {
  display: inline-flex;
  flex: 0 1 300px;
  align-items: center;
  min-width: 190px !important;
  min-height: 38px;
  margin-left: 5px !important;
  padding: 7px 10px !important;
  border: 1px solid #c9ced0 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #667589 !important;
  font-size: 11px !important;
  text-align: left;
  box-shadow: none !important;
}
#paletteTrigger:hover { border-color: #8296a7 !important; background: #fff !important; }
#paletteTrigger > span {
  border: 1px solid #d5d8d8 !important;
  border-radius: 3px !important;
  background: #f5f5f2;
  color: #7d8896 !important;
}
#mainContent > header > div:last-child { gap: 9px !important; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 3px 8px !important;
  border: 1px solid #d4d8d8 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #53657a !important;
  font-size: 10px !important;
  font-weight: 600;
}
#notificationButton {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid #c9ced0 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #435c72 !important;
}
#notificationButton:hover { background: #eef1f2 !important; }
#mainContent > header > div:last-child > div:last-child {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #d5c3b0 !important;
  border-radius: 4px !important;
  background: #f0e7dc !important;
  color: #854b1d !important;
}

#mainContent > .p-6,
.workspace-body {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 26px 30px 42px !important;
  color: var(--ink);
}
.view { display: none; min-width: 0; animation: none !important; }
.view.active { display: block; }
.view > h1 {
  margin: 0 0 4px !important;
  color: #17283b !important;
  font-size: clamp(22px, 2vw, 29px) !important;
  font-weight: 720 !important;
  letter-spacing: -.035em;
  line-height: 1.2 !important;
}
.view > h1 + p {
  max-width: 880px;
  margin: 0 0 22px !important;
  color: #627287 !important;
  font-size: 12px !important;
  line-height: 1.6;
}
.page-kicker,
.sect {
  color: #748194 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Functional panels: restrained borders, clear section labels */
.glass {
  border: 1px solid #d5d8d7 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(26, 43, 57, .045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.glass-hover { transition: border-color .14s ease, background-color .14s ease !important; }
.glass-hover:hover {
  transform: none !important;
  border-color: #aab8c0 !important;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(26, 43, 57, .07) !important;
}
.view > .glass {
  margin: 0 0 14px !important;
  padding: 17px 18px !important;
}
.view > .glass > h3 {
  display: flex;
  align-items: center;
  min-height: 25px;
  margin: 0 0 12px !important;
  padding: 0 0 9px;
  border-bottom: 1px solid #e5e7e5;
  color: #28425a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .025em;
}
.view > .glass > h4 {
  margin: 15px 0 7px !important;
  color: #435c72 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.view > .glass > h4:first-of-type { margin-top: 5px !important; }
.view p { color: #53657a; }
.view .text-gray-400 { color: #6c7c8e !important; }
.view .text-white { color: var(--ink) !important; }
.view .text-xs { line-height: 1.55; }
.view .text-sm { line-height: 1.55; }
.view .opacity-60 { opacity: .75; }
.view .mono,
.view code,
.view kbd { font-family: "JetBrains Mono", Consolas, monospace !important; }

/* Tables and operational data */
.view .overflow-x-auto {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  border: 1px solid #e0e3e2;
  border-radius: 4px;
  background: #fff;
  overscroll-behavior-x: contain;
}
.view table {
  display: table !important;
  width: 100%;
  min-width: 620px !important;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  color: #26394d;
  font-variant-numeric: tabular-nums;
}
.view th {
  position: sticky;
  top: 0;
  padding: 9px 11px !important;
  border: 0 !important;
  border-bottom: 1px solid #ccd3d6 !important;
  background: #edf0ef !important;
  color: #53667a !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.view td {
  padding: 8px 11px !important;
  border: 0 !important;
  border-bottom: 1px solid #e7e9e7 !important;
  color: #304459 !important;
  font-size: 11px !important;
  line-height: 1.45;
  vertical-align: middle;
  white-space: nowrap;
}
.view tbody tr { background: #fff; transition: background-color .12s ease; }
.view tbody tr:nth-child(even) { background: #fafaf8; }
.view tbody tr:hover { background: #f0f4f5; }
.view tbody tr:last-child td { border-bottom: 0 !important; }
.view td:first-child { color: #223b54 !important; font-weight: 600; }
.view td .flex { flex-wrap: nowrap; gap: 5px !important; }
.view td .btn { min-height: 29px; padding: 4px 8px !important; font-size: 10px !important; }
.view .flex.flex-wrap.gap-2 { align-items: center; gap: 6px !important; }

/* Inputs, buttons and status marks */
input, select, textarea {
  width: auto;
  min-width: 0;
  border: 1px solid #bcc6ca !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #26394d !important;
  box-shadow: none !important;
  color-scheme: light;
  font-size: 12px !important;
  line-height: 1.4;
  outline: none;
  transition: border-color .12s ease, background-color .12s ease;
}
input, select { min-height: 36px; padding: 7px 9px !important; }
textarea { padding: 9px 10px !important; }
select option { background: #fff !important; color: #26394d !important; }
input::placeholder, textarea::placeholder { color: #8492a0 !important; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: #50799a !important; box-shadow: 0 0 0 2px rgba(36, 91, 134, .12) !important; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px !important;
  border: 1px solid #b8c2c7 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #2e465c !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease !important;
}
.btn:hover { transform: none !important; border-color: #8198a7 !important; background: #f1f4f4 !important; color: #193f62 !important; }
.btn:active { transform: none !important; background: #e8edef !important; }
.btn:disabled { opacity: .48 !important; transform: none !important; box-shadow: none !important; }
.btn-teal {
  border-color: #1e4e73 !important;
  background: #245b86 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-teal:hover { border-color: #143b5b !important; background: #193f62 !important; color: #fff !important; filter: none !important; }
.btn-ghost { background: transparent !important; border-color: #c7ced0 !important; }
.btn-rose { border-color: #d7aaa5 !important; background: #fff8f6 !important; color: #9c3d36 !important; }
.btn-rose:hover { border-color: #bf7770 !important; background: #f8e9e6 !important; color: #812e29 !important; }
.btn-active-start { border-color: #a9c9b7 !important; background: #eff7f1 !important; color: #276644 !important; }
.btn-active-stop { border-color: #d7aaa5 !important; background: #fff3f0 !important; color: #a03e38 !important; }
.btn-icon { min-width: 38px; padding: 6px 9px !important; }
.toggle { width: 38px; height: 22px; border: 1px solid #aab6bc; border-radius: 12px; background: #dce1e1; }
.toggle::after { top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0002; }
.toggle.on { border-color: #245b86; background: #245b86; }
.toggle.on::after { left: 18px; background: #fff; }
.dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: none !important; }
.pulse { animation: none !important; }
.chip .dot { outline: 2px solid color-mix(in srgb, currentColor 13%, transparent); }
.statnum { color: #193f62; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.sect { display: block; margin-bottom: 5px; }

/* Gauges, inline SVG charts and topology */
.gauge { width: 88px; height: 88px; color: #245b86; }
.gauge circle { stroke-width: 7; }
.gauge .track { stroke: #e3e7e7 !important; }
.gauge .fill { stroke: #2d6e9c; }
.gauge .val { color: #193f62; }
.spark { display: block; max-width: 100%; overflow: visible; }
.spark text, .view svg text { fill: #61748a; font-family: Inter, sans-serif; }
.flowline { stroke-dasharray: 5 7; animation: flow 2s linear infinite; }
.node-pulse { animation: npulse 2.8s ease-in-out infinite; }
.view svg { max-width: 100%; }

/* Terminal and log output retain a purposeful dark work surface */
.term {
  overflow: auto;
  border: 1px solid #263b50 !important;
  border-radius: 4px !important;
  background: #132438 !important;
  color: #e4ebef !important;
  font-family: "JetBrains Mono", Consolas, monospace !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
  tab-size: 4;
}
.admin-terminal {
  min-height: 380px;
  overflow: hidden;
  border: 1px solid #263b50 !important;
  border-radius: 5px !important;
  background: #101d2b !important;
  box-shadow: none !important;
}
.admin-terminal-bar { background: #20374c !important; border-color: #334b60 !important; }
.admin-terminal-tab { border-radius: 3px 3px 0 0 !important; background: #101d2b !important; color: #edf2f4 !important; }
.admin-terminal-host { color: #c2cdd5 !important; }
.admin-terminal-host.active { background: #101d2b !important; color: #fff !important; }
.admin-terminal-output { background: #101923 !important; color: #e7edf1 !important; }
.admin-terminal-inputbar { background: #101923 !important; color: #e7edf1 !important; }
.admin-terminal-input { background: transparent !important; color: #fff !important; }
.admin-terminal-prompt { color: #e6a16a !important; }
progress {
  display: block;
  width: 100%;
  height: 9px !important;
  overflow: hidden;
  border: 1px solid #ccd4d7;
  border-radius: 2px;
  background: #e7ebeb;
  accent-color: #245b86;
}
progress::-webkit-progress-bar { background: #e7ebeb; }
progress::-webkit-progress-value { background: #2d6e9c; }
progress::-moz-progress-bar { background: #2d6e9c; }

/* Ollama chat: match the portal palette while preserving its independent layout */
.ollama-app {
  display: flex;
  width: 100%;
  min-height: 500px;
  height: min(760px, calc(100dvh - 180px));
  overflow: hidden;
  border: 1px solid #d3d8d8;
  border-radius: 5px;
  background: #fff;
  color: #23374c;
}
.ollama-side {
  flex: 0 0 238px;
  width: 238px;
  padding: 13px 11px;
  border-right: 1px solid #d9dedd;
  background: #f0f1ee !important;
  color: #344b61 !important;
}
.ollama-side-title { padding: 5px 8px 12px; color: #233b52 !important; font-size: 13px; }
.ollama-new-chat {
  min-height: 36px;
  border: 1px solid #bdc8ca !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #29465f !important;
}
.ollama-history-title { padding: 16px 8px 7px; color: #7a8895 !important; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ollama-history { gap: 3px; }
.ollama-history-empty { padding: 8px; color: #84919b !important; font-size: 11px; }
.ollama-history-row { border-radius: 3px !important; }
.ollama-history-row.active, .ollama-history-row:hover { background: #e2e8e9 !important; }
.ollama-history-open, .ollama-history-remove { border: 0 !important; background: transparent !important; color: #43596d !important; box-shadow: none !important; }
.ollama-history-open { min-height: 34px; font-size: 11px !important; }
.ollama-history-remove { min-height: 32px; color: #778694 !important; }
.ollama-history-remove:hover { color: #9c3d36 !important; }
.ollama-main { min-width: 0; background: #fff !important; }
.ollama-toolbar { height: 46px; padding: 0 14px; border-bottom: 1px solid #e1e5e4 !important; background: #fafaf8; }
.ollama-toolbar .btn { min-height: 32px; border: 0 !important; background: transparent !important; color: #52677a !important; }
.ollama-toolbar .ollama-menu { display: none; }
.ollama-status { color: #778694 !important; font-size: 10px; }
.ollama-chat-pane { padding: 0 22px 18px; background: #fff; }
.ollama-chat-content { width: min(100%, 820px); padding: 22px 0; gap: 18px; }
.ollama-empty { color: #718092 !important; }
.ollama-empty h2 { color: #223b54 !important; font-size: 20px; }
.ollama-empty p { color: #718092 !important; }
.ollama-emblem { width: 48px; height: 48px; border: 1px solid #cfd7d8; border-radius: 5px; background: #edf1f1 !important; color: #245b86 !important; font-size: 23px; }
.ollama-message { max-width: 92%; color: #26394d; font-size: 12px; }
.ollama-message.user { border: 1px solid #d5e0e6; border-radius: 5px; background: #eef4f6 !important; color: #233c54; }
.ollama-message.assistant { padding: 5px 0; }
.ollama-message-role { color: #788695 !important; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.ollama-message-body { color: #26394d; font-size: 12px; line-height: 1.7; }
.ollama-thinking { color: #768594 !important; font-size: 11px; }
.ollama-thinking-details { border: 1px solid #dce1e1 !important; border-radius: 4px !important; background: #f5f6f4 !important; }
.ollama-thinking-details summary { color: #53677a !important; }
.ollama-thinking-text { color: #607286 !important; }
.ollama-composer { border: 1px solid #c8d1d3 !important; border-radius: 5px !important; background: #fff !important; box-shadow: 0 2px 8px #21384a0d; }
.ollama-chat-input { background: transparent !important; color: #23374c !important; }
.ollama-chat-input::placeholder { color: #8996a1 !important; }
.ollama-model-select { max-width: 240px; border: 1px solid #d1d8d8 !important; border-radius: 4px !important; background: #f6f7f5 !important; color: #40576d !important; }
.ollama-send { width: 35px; height: 35px; border: 0 !important; border-radius: 4px !important; background: #245b86 !important; color: #fff !important; font-size: 18px !important; }
.ollama-send:disabled { opacity: .42; }

/* Login composition */
#loginScreen:not(.hidden) {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 32px !important;
  background: #e9e7df;
  color: var(--ink);
}
.login-layout {
  display: grid;
  width: min(100%, 960px);
  min-height: 520px;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
  overflow: hidden;
  border: 1px solid #d1d4d0;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 12px 38px rgba(30, 46, 60, .09);
}
.login-story {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(28px, 5vw, 54px);
  background: #172d43;
  color: #f5f5f0;
}
.login-story .brand-mark,
.login-story .login-monogram { border-color: #627b91 !important; background: #29465f !important; }
.login-eyebrow { color: #e7a16c; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.login-heading { max-width: 480px; margin: 18px 0 12px; color: #f6f5f0; font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -.04em; line-height: 1.12; }
.login-description { max-width: 420px; color: #c4d0d7; font-size: 13px; line-height: 1.7; }
.login-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid #435a6e; background: #435a6e; }
.login-story-grid > * { min-height: 66px; padding: 12px; background: #1b344b; color: #dce5e8; font-size: 10px; }
.login-monogram { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #627b91; border-radius: 5px; color: #fff; font-size: 16px; font-weight: 700; }
.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(25px, 4vw, 48px);
  background: #fff;
}
.login-panel .login-card {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}
.login-eyebrow { display: block; }
.login-panel .login-eyebrow { margin-bottom: 8px; color: #7b8895; }
.login-panel .login-heading { margin: 0 0 8px; color: #1c3349; font-size: 25px; }
.login-panel .login-description { margin-bottom: 22px; color: #68798a; font-size: 12px; }
#loginScreen .login-card > .text-center { margin-bottom: 21px !important; text-align: left !important; }
#loginScreen .login-card > .text-center > div:first-child { display: none !important; }
#loginScreen .login-card h1 { color: #1a3045 !important; font-size: 23px !important; font-weight: 750 !important; letter-spacing: -.045em; }
#loginScreen .login-card h1 span { color: #b96728 !important; }
#loginScreen .login-card .text-center p { color: #758394 !important; font-size: 11px !important; }
#loginScreen .login-card .space-y-4 {
  width: 100%;
  color: #5d6e7f;
  font-size: 11px;
  text-align: left;
}
#loginScreen .login-card .space-y-4 form { display: flex; flex-direction: column; gap: 13px; }
#loginScreen .login-card .space-y-4 label {
  display: block;
  margin: 0 !important;
  color: #5a6c7d !important;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}
#loginScreen .login-card .space-y-4 label input { display: block; width: 100%; margin-top: 5px; }
#loginScreen .login-card .space-y-4 .btn { margin-top: 3px; min-height: 42px; font-size: 12px !important; }
#loginScreen .login-card .space-y-4 form > p[role="alert"] { margin-top: -5px; color: #ad433d !important; }
#loginScreen .login-card .space-y-4 > p { margin-top: 16px; color: #778694 !important; font-size: 10px; text-align: left !important; }
.login-footnote { margin-top: 18px; color: #7d8995; font-size: 10px; line-height: 1.55; }
.login-card.glow-ring::before { content: none !important; }

/* Search palette, messages and dialogs */
#palette {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: min(12vh, 100px) 16px 16px;
  background: rgba(20, 39, 58, .38) !important;
  backdrop-filter: blur(2px) !important;
}
#palette.open { display: flex; animation: none !important; }
#palette > .glass {
  width: min(620px, 100%);
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid #aebbc0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(18, 37, 55, .22) !important;
}
#palette > .glass > div:first-child { border-color: #e0e4e3 !important; }
#palette > .glass > div:first-child > i { color: #245b86 !important; }
#palInput { min-height: 28px; }
.pal-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 39px;
  padding: 8px 10px !important;
  border-radius: 3px !important;
  color: #41566b !important;
  font-size: 12px !important;
}
.pal-item:hover, .pal-item.sel { background: #edf2f4 !important; color: #193f62 !important; }
.pal-item .tag { margin-left: auto; padding: 2px 6px; border: 1px solid #d6dddd; border-radius: 3px; color: #758494; font-size: 9px; }
dialog.glass {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: min(86dvh, 760px);
  overflow: auto;
  padding: 20px !important;
  border: 1px solid #bdc8cc !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #23374c !important;
  box-shadow: 0 18px 60px rgba(18, 37, 55, .25) !important;
}
dialog.glass::backdrop { background: rgba(20, 39, 58, .46); }
dialog.glass h3 { margin: 0 0 12px; color: #1d3851 !important; font-size: 15px; }
dialog.glass label { display: block; color: #4f6477; font-size: 11px; }
dialog.glass .text-white { color: #23374c !important; }
dialog.glass code { border: 1px solid #d9dfdf; border-radius: 4px; background: #f2f4f2; color: #193f62; }
#toasts {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  display: flex;
  width: min(420px, calc(100vw - 32px));
  flex-direction: column;
  gap: 7px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid #bdc8cc;
  border-left: 3px solid #c56a20;
  border-radius: 4px;
  background: #fff;
  color: #26394d;
  box-shadow: 0 5px 18px rgba(20, 39, 58, .13);
  font-size: 11px;
  animation: toastIn .18s ease-out;
}
.toast.out { animation: toastOut .15s forwards; }

@keyframes flow { to { stroke-dashoffset: -24; } }
@keyframes npulse { 0%, 100% { opacity: .28; } 50% { opacity: .08; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(5px); } }

/* Breakpoints: preserve the drawer contract and keep data usable on phones. */
@media (max-width: 1023px) {
  #app.portal-shell, .portal-shell { display: flex; min-height: 100dvh; }
  #sidebar,
  .sidebar {
    position: fixed !important;
    z-index: 70 !important;
    inset: 0 auto 0 0 !important;
    flex: 0 0 auto !important;
    width: min(86vw, 310px) !important;
    min-width: 0 !important;
    height: 100dvh !important;
    transform: translateX(-105%);
    border-right: 1px solid #304457 !important;
    background: var(--navy) !important;
    box-shadow: 16px 0 36px rgba(15, 31, 46, .24) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #sidebar.mobile-open { transform: translateX(0); }
  #sidebar.min { width: min(86vw, 310px) !important; min-width: 0 !important; }
  #sidebar.min .nav { justify-content: flex-start; gap: 11px; padding: 8px 10px !important; }
  #sidebar.min .nav.active { padding-left: 8px !important; }
  #sidebar.min .nav .lbl, #sidebar.min .nav .kbd, #sidebar.min .sec, #sidebar.min .brand-t { display: initial !important; }
  #sidebar.min .nav i { width: 18px; flex-basis: 18px; }
  #sidebar.min .sidebar-brand { justify-content: flex-start; padding-right: 16px !important; padding-left: 16px !important; }
  #sidebar.min #sidebarToggle { position: static; }
  #sidebar > div:first-child { display: flex; min-height: 70px; }
  #sidebar nav { display: block; flex: 1 1 auto; min-height: 0; padding: 10px !important; overflow-y: auto; }
  #sidebar nav .sec { display: block; }
  #sidebar .nav { min-height: 44px; padding: 10px 12px !important; }
  #sidebar .nav .lbl { display: inline; }
  #sidebar .nav .kbd { display: none; }
  #sidebar > div:last-child { display: flex; flex: 0 0 auto; gap: 3px; padding: 7px 10px max(10px, env(safe-area-inset-bottom, 0px)) !important; }
  #sidebar > div:last-child .nav { flex: 1; min-height: 42px; padding: 8px 9px !important; }
  #sidebarBackdrop {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(18, 35, 51, .35);
    backdrop-filter: none;
  }
  #sidebarBackdrop[hidden] { display: none !important; }
  #mobileNavToggle { display: inline-flex !important; flex: 0 0 40px; align-items: center; }
  #sidebarToggle { display: none !important; }
  #mainContent, .workspace {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #mainContent > header, .workspace-header {
    position: sticky;
    flex-wrap: wrap;
    gap: 9px 12px;
    min-height: 62px;
    padding: 10px 16px !important;
  }
  #mainContent > header > div:first-of-type { flex: 1 1 120px; min-width: 0; }
  #paletteTrigger { order: 3; flex: 1 1 100%; min-width: 0 !important; margin: 0 !important; }
  #mobileNavToggle { order: 0; }
  #mainContent > header > div:last-child { gap: 6px !important; margin-left: auto !important; }
  #mainContent > header > div:last-child .chip:first-child { display: none; }
  #mainContent > header > div:last-child #clock { font-size: 9px !important; padding: 3px 6px !important; }
  #mainContent > header > div:last-child > div:last-child { display: none; }
  #mainContent > .p-6, .workspace-body { padding: 18px 16px 32px !important; }
  .view > .glass { padding: 14px !important; }
  .btn { min-height: 40px; }
  .view td .btn { min-height: 34px; }
  table { min-width: 620px !important; }
  .admin-terminal { min-height: 320px; }
  .ollama-app { min-height: 420px; }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  #mainContent > header, .workspace-header { gap: 11px; padding-right: 18px !important; padding-left: 18px !important; }
  #paletteTrigger { order: initial; flex: 0 1 220px; min-width: 150px !important; margin-left: 0 !important; }
  #mainContent > .p-6, .workspace-body { padding-right: 20px !important; padding-left: 20px !important; }
}

@media (max-width: 767px) {
  #loginScreen:not(.hidden) { padding: 16px !important; }
  .login-layout { min-height: 0; grid-template-columns: 1fr; }
  .login-story { min-height: 215px; padding: 23px; }
  .login-story .login-heading { max-width: 430px; margin: 11px 0 7px; font-size: 25px; }
  .login-story .login-description { font-size: 11px; }
  .login-story-grid { display: none; }
  .login-panel { padding: 26px 23px 29px; }
  .login-panel .login-card { max-width: none; }
  #mainContent > header, .workspace-header { gap: 8px; }
  #viewTitle, .workspace-context { font-size: 14px !important; }
  #mainContent > .p-6, .workspace-body { padding: 16px 12px 26px !important; }
  .view > h1 { font-size: 22px !important; }
  .view > h1 + p { margin-bottom: 16px !important; }
  .view > .glass { margin-bottom: 11px !important; padding: 12px !important; }
  .view > .glass > h3 { margin-bottom: 9px !important; }
  .view .flex.flex-wrap.gap-2 { flex-wrap: wrap; }
  .view .flex.flex-wrap.gap-2 > select { flex: 1 1 100%; width: 100%; }
  .ollama-app { position: relative; height: calc(100dvh - 190px); min-height: 420px; }
  .ollama-side { display: none; position: absolute; z-index: 5; inset: 0 auto 0 0; width: min(82vw, 260px); box-shadow: 12px 0 26px rgba(20, 39, 58, .17); }
  .ollama-side.open { display: flex; }
  .ollama-toolbar .ollama-menu { display: inline-flex; }
  .ollama-chat-pane { padding: 0 11px 12px; }
  .ollama-status { max-width: 58%; font-size: 9px; }
  .ollama-empty h2 { font-size: 18px; }
  .ollama-message { max-width: 100%; }
  .ollama-composer { padding: 9px; }
  .ollama-model-select { max-width: min(62vw, 220px); }
  #toasts { right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: calc(100vw - 24px); }
}

@media (max-width: 420px) {
  #mainContent > header, .workspace-header { padding-right: 10px !important; padding-left: 10px !important; }
  #mainContent > header > div:last-child { gap: 4px !important; }
  #mainContent > header > div:last-child #clock { display: none; }
  #paletteTrigger { min-height: 36px; }
  #mainContent > .p-6, .workspace-body { padding: 14px 10px 24px !important; }
  .view > .glass { padding: 11px !important; }
  .view > .glass > h3 { font-size: 11px !important; }
  .login-story { min-height: 185px; }
  .login-story .login-heading { font-size: 22px; }
  .login-panel { padding: 23px 18px 25px; }
  #palette { padding: 8vh 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

#viewTitle:focus { outline: none; }
#viewTitle:focus-visible { outline: 3px solid #d27b35 !important; outline-offset: 3px; }