/* BaseOS UI repair - COMPLETE REPLACEMENT: css/baseos-shell-v2.css
   Paired with js/baseos-shell-v2.js and css/apple-ui.css.
   One sidebar width, one controller, no outside-edge toggle. */
:root {
  --base-shell-open: 252px;
  --base-shell-closed: 76px;
  --base-shell-width: var(--base-shell-open);
  --base-shell-ease: cubic-bezier(.22,1,.36,1);
}
body.baseos-sidebar-collapsed { --base-shell-width: var(--base-shell-closed); }
html { min-height: 100%; background: #f5f6f8; }
body { margin: 0; min-height: 100vh; color: #202126; }
/* Do not override the app's display property: Auth owns whether it is shown. */
body #baseos-app {
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  grid-template-columns: minmax(0,1fr) !important; gap: 0 !important;
  padding: 0 !important; margin: 0 !important; box-sizing: border-box;
}
body #baseos-app > .main {
  position: relative !important; inset: auto !important;
  display: block; min-width: 0 !important; max-width: none !important;
  width: calc(100% - var(--base-shell-width)) !important;
  margin: 0 0 0 var(--base-shell-width) !important; padding: 0 !important;
  min-height: 100vh; box-sizing: border-box !important; flex: 0 0 auto !important;
  transform: none !important; background: transparent !important;
  transition: width 220ms var(--base-shell-ease), margin-left 220ms var(--base-shell-ease) !important;
}
body #baseos-app > .sidebar {
  position: fixed !important; inset: 0 auto 0 0 !important; z-index: 80 !important;
  display: flex !important; flex-direction: column !important;
  width: var(--base-shell-width) !important; min-width: 0 !important; max-width: none !important;
  height: 100vh !important; height: 100dvh !important; margin: 0 !important;
  padding: 14px 10px 12px !important; box-sizing: border-box !important;
  overflow: hidden !important; transform: none !important;
  color: #35373f !important; background: rgba(245,247,250,.9) !important;
  background-image: linear-gradient(160deg,rgba(255,255,255,.7),rgba(241,244,249,.35)) !important;
  border: 0 !important; border-right: 1px solid rgba(103,115,140,.14) !important;
  border-radius: 0 !important; box-shadow: inset -1px 0 rgba(255,255,255,.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  transition: width 220ms var(--base-shell-ease), transform 220ms var(--base-shell-ease) !important;
}
body #baseos-app .sidebar > .brand {
  position: relative !important; display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) 34px !important; align-items: center !important;
  gap: 10px !important; flex: 0 0 auto !important;
  min-height: 58px !important; width: 100% !important;
  margin: 0 0 10px !important; padding: 4px 2px 10px !important;
  border: 0 !important; box-sizing: border-box !important;
}
body #baseos-app .brand .brand-logo {
  display: grid !important; place-items: center !important;
  width: 38px !important; height: 38px !important; min-width: 38px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  border-radius: 12px !important; background: #24262d !important;
  color: #fff !important; font-size: 17px !important; font-weight: 700 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.16),0 4px 10px rgba(24,28,38,.1) !important;
}
body #baseos-app .brand .brand-copy { display: block !important; min-width: 0; width: auto !important; opacity: 1 !important; }
body #baseos-app .brand-copy strong { display: block; color: #202126 !important; font-size: 15px !important; font-weight: 650 !important; letter-spacing: -.3px; }
body #baseos-app .brand-copy span { display: block; color: #6e727d !important; font-size: 11px !important; margin-top: 2px; white-space: nowrap; }
/* Toggle is INSIDE the header, never on a clipped sidebar edge. */
body #baseos-app #baseos-nav-toggle,
body #baseos-app #baseos-mobile-menu,
body #baseos-app #baseos-mobile-close {
  all: unset; box-sizing: border-box !important; position: static !important;
  display: grid !important; place-items: center !important;
  width: 34px !important; height: 34px !important; min-width: 34px !important;
  max-width: 34px !important; max-height: 34px !important;
  margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  border: 1px solid rgba(77,87,108,.15) !important; border-radius: 10px !important;
  background: rgba(255,255,255,.82) !important; color: #454a58 !important;
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  box-shadow: inset 0 1px rgba(255,255,255,.9),0 2px 5px rgba(25,34,49,.04) !important;
  cursor: pointer !important; transform: none !important;
}
body #baseos-app #baseos-nav-toggle:hover { background: #fff !important; border-color: rgba(50,60,80,.3) !important; }
body #baseos-app .sidebar .navigation {
  display: flex; flex-direction: column; align-items: stretch !important; gap: 20px !important;
  flex: 1 1 0% !important; min-height: 0 !important; width: 100% !important;
  overflow-y: auto !important; overflow-x: hidden !important;
  padding: 5px 0 10px !important; margin: 0 !important;
  scrollbar-width: thin; scrollbar-color: rgba(100,110,130,.22) transparent;
}
body #baseos-app .sidebar .nav-section { display: flex; flex-direction: column; align-items: stretch !important; gap: 4px !important; width: 100%; }
body #baseos-app .sidebar .nav-heading { display: block; margin: 0 12px 4px !important; padding: 0 !important; color: #737985 !important; font-size: 10px !important; font-weight: 650 !important; letter-spacing: 1.1px !important; }
body #baseos-app .sidebar .nav-item {
  position: relative; display: flex; align-items: center; justify-content: flex-start;
  width: 100% !important; min-width: 0 !important; min-height: 43px !important;
  margin: 0 !important; padding: 0 12px !important; gap: 12px !important;
  box-sizing: border-box; border: 1px solid transparent !important; border-radius: 12px !important;
  background: transparent !important; color: #505562 !important; box-shadow: none !important;
  font-size: 13px !important; font-weight: 530 !important; line-height: 1.3 !important;
  text-align: left; cursor: pointer; transform: none !important;
  transition: background 140ms ease, color 140ms ease !important;
}
body #baseos-app .sidebar .nav-item:hover { background: rgba(255,255,255,.65) !important; color: #222730 !important; }
body #baseos-app .sidebar .nav-item.active {
  background: rgba(255,255,255,.95) !important; color: #1d4b95 !important;
  border-color: rgba(255,255,255,.96) !important;
  box-shadow: 0 2px 6px rgba(42,61,90,.05),inset 0 0 0 1px rgba(108,133,172,.08) !important;
}
body #baseos-app .sidebar .nav-icon {
  display: grid !important; place-items: center !important;
  width: 20px !important; height: 20px !important; min-width: 20px !important;
  flex: 0 0 20px !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; color: inherit !important;
}
body #baseos-app .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Attributes in the SVG are also set by JS; icons do not depend on external libraries. */
body #baseos-app .os-icon,
body #baseos-app #baseos-nav-toggle .os-icon,
body #baseos-app .notification-icon .os-icon,
body #baseos-app .nav-icon .os-icon {
  display: block !important; width: 20px !important; height: 20px !important;
  min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;
  margin: 0 !important; padding: 0 !important; background: none !important;
  color: inherit !important; fill: none !important; stroke: currentColor !important;
  stroke-width: 1.7 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
  border: 0 !important; box-shadow: none !important; transform: none !important; pointer-events: none;
}
body #baseos-app .os-icon * { fill: none !important; stroke: inherit !important; }
body #baseos-app .sidebar .sidebar-user {
  position: static !important; display: grid !important; grid-template-columns: 36px minmax(0,1fr) 30px !important;
  align-items: center !important; gap: 9px !important; flex: 0 0 auto !important;
  width: 100% !important; min-height: 59px !important; margin: 8px 0 0 !important;
  padding: 12px 2px 0 !important; border: 0 !important; border-top: 1px solid rgba(92,106,130,.14) !important;
  background: transparent !important; box-sizing: border-box;
}
body #baseos-app #sidebar-user-avatar { display: grid !important; place-items: center; width: 36px !important; height: 36px !important; border-radius: 50%; background: #e8edf5 !important; color: #355278 !important; font-size: 11px !important; font-weight: 650; box-shadow: none !important; }
body #baseos-app .sidebar-user-copy,
body #baseos-app .baseos-user-copy { min-width: 0; }
body #baseos-app #sidebar-user-name { display: block; font-size: 12px !important; font-weight: 650 !important; color: #30353e !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body #baseos-app #sidebar-user-role { display: block; font-size: 10px !important; color: #69717f !important; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body #baseos-app .baseos-user-actions { display: flex; justify-content: flex-end; }
body #baseos-app .baseos-logout-action { display: grid !important; place-items: center !important; width: 30px !important; height: 32px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #616b7c !important; box-shadow: none !important; cursor: pointer; }
body #baseos-app .baseos-logout-action:hover { background: #fcebec !important; color: #b3343c !important; }
body.baseos-sidebar-collapsed #baseos-app .sidebar .brand { grid-template-columns: 1fr !important; justify-items: center; gap: 0 !important; }
body.baseos-sidebar-collapsed #baseos-app .sidebar :is(.brand-logo,.brand-copy,.nav-heading,.nav-label,.sidebar-user-copy,.baseos-user-copy) { display: none !important; }
body.baseos-sidebar-collapsed #baseos-app .sidebar .navigation { gap: 9px !important; }
body.baseos-sidebar-collapsed #baseos-app .sidebar .nav-item { justify-content: center !important; padding: 0 !important; gap: 0 !important; font-size: 0 !important; min-height: 44px !important; }
body.baseos-sidebar-collapsed #baseos-app .sidebar .sidebar-user { display: flex !important; flex-direction: column !important; gap: 8px !important; }
/* Full-width topbar and consistent main width across every route. */
body #baseos-app .main > .topbar {
  position: sticky !important; top: 0 !important; inset-inline: auto !important; z-index: 30 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  width: 100% !important; max-width: none !important; min-height: 68px !important;
  margin: 0 !important; padding: 10px clamp(20px,3vw,40px) !important; gap: 16px !important;
  box-sizing: border-box; border: 0 !important; border-bottom: 1px solid rgba(99,115,141,.1) !important;
  background: rgba(247,249,252,.78) !important; box-shadow: inset 0 -1px rgba(255,255,255,.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%); backdrop-filter: blur(24px) saturate(145%);
}
body #baseos-app .topbar #page-title,
body #baseos-app .topbar > div:not(.topbar-context):not(.topbar-actions) > .eyebrow { display: none !important; }
body #baseos-app .topbar-context { display: flex !important; align-items: center; gap: 10px !important; min-width: 0; flex: 1; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body #baseos-app .topbar-context strong { display: block; font-size: 13px !important; font-weight: 650; color: #353a44 !important; }
body #baseos-app #topbar-date { display: block; font-size: 11px !important; color: #6e7684 !important; margin-top: 3px; }
body #baseos-app .topbar-status-dot { display: none !important; } /* Not a server-health signal. */
body #baseos-app .topbar-actions { display: flex !important; align-items: center; gap: 8px !important; flex: 0 0 auto; }
body #baseos-app .topbar .notification-button { position: relative !important; display: grid !important; place-items: center !important; width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border: 1px solid rgba(78,98,128,.14) !important; border-radius: 12px !important; background: rgba(255,255,255,.85) !important; color: #414d61 !important; cursor: pointer; box-shadow: 0 2px 6px rgba(50,65,85,.03) !important; }
body #baseos-app .notification-icon { display: grid !important; place-items: center; width: 20px; height: 20px; }
body #baseos-app .notification-count { position: absolute; right: -4px; top: -4px; min-width: 16px; height: 16px; padding: 0 3px; border: 2px solid #fff; border-radius: 12px; background: #cf3946; color: #fff; font-size: 9px; line-height: 12px; text-align: center; }
body #baseos-app .ask-base-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; min-height: 40px !important; width: auto !important; padding: 0 15px !important; border: 1px solid #292e38 !important; border-radius: 12px !important; background: #292e38 !important; color: #fff !important; font-size: 12px !important; font-weight: 600; box-shadow: 0 3px 8px rgba(25,31,44,.08) !important; cursor: pointer; }
body #baseos-app #app-content {
  display: block; width: 100% !important; max-width: 1450px !important; min-width: 0 !important;
  box-sizing: border-box; margin: 0 auto !important; padding: 28px clamp(20px,3vw,40px) 64px !important;
}
body #baseos-app #app-content > :is(section,div) { width: 100%; min-width: 0; max-width: none !important; box-sizing: border-box; }
body #baseos-app #baseos-mobile-menu, body #baseos-app #baseos-mobile-close { display: none !important; }
body #baseos-app #baseos-sidebar-backdrop { display: none !important; }
body #baseos-app [hidden], body #baseos-app .hidden { display: none !important; }
body #baseos-app :is(button,a,input,select,textarea,[tabindex]):focus-visible { outline: 3px solid rgba(41,112,215,.6) !important; outline-offset: 3px !important; }
/* Same breakpoint in this file and the controller. */
@media (max-width: 900px) {
  body, body.baseos-sidebar-collapsed { --base-shell-width: 0px; }
  body #baseos-app > .main { margin-left: 0 !important; width: 100% !important; }
  body #baseos-app > .sidebar {
    width: min(310px,86vw) !important; transform: translateX(-110%) !important;
    background: rgba(248,250,253,.98) !important; box-shadow: none !important;
  }
  body.baseos-mobile-sidebar-open #baseos-app > .sidebar { transform: translateX(0) !important; box-shadow: 8px 0 32px rgba(32,43,59,.16) !important; }
  body.baseos-mobile-sidebar-open { overflow: hidden; }
  body #baseos-app #baseos-sidebar-backdrop { position: fixed; inset: 0; z-index: 70; border: 0; padding: 0; background: rgba(28,39,56,.25); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  body.baseos-mobile-sidebar-open #baseos-app #baseos-sidebar-backdrop { display: block !important; }
  body #baseos-app #baseos-mobile-menu, body #baseos-app #baseos-mobile-close { display: grid !important; flex: 0 0 34px; }
  body #baseos-app #baseos-nav-toggle { display: none !important; }
  body #baseos-app .sidebar .brand { grid-template-columns: 38px minmax(0,1fr) 34px !important; }
  body.baseos-sidebar-collapsed #baseos-app .sidebar :is(.brand-logo,.brand-copy,.nav-heading,.nav-label,.sidebar-user-copy,.baseos-user-copy) { display: block !important; }
  body.baseos-sidebar-collapsed #baseos-app .sidebar .brand-logo { display: grid !important; }
  body.baseos-sidebar-collapsed #baseos-app .sidebar .nav-item { justify-content: flex-start !important; padding: 0 12px !important; gap: 12px !important; font-size: 13px !important; }
  body.baseos-sidebar-collapsed #baseos-app .sidebar .navigation { gap: 20px !important; }
  body.baseos-sidebar-collapsed #baseos-app .sidebar .sidebar-user { display: grid !important; }
  body #baseos-app .main > .topbar { padding: 10px 16px !important; gap: 10px !important; }
  body #baseos-app #app-content { padding: 22px 16px 48px !important; }
}
@media (max-width: 480px) {
  body #baseos-app .topbar-context strong { font-size: 12px !important; }
  body #baseos-app #topbar-date { font-size: 10px !important; }
  body #baseos-app .ask-base-button { width: 40px !important; padding: 0 !important; font-size: 0 !important; gap: 0; }
  body #baseos-app .ask-base-button::after { content: '\2726'; font-size: 17px; color: #fff; }
  body #baseos-app .ask-base-button > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body #baseos-app *, body #baseos-app *::before, body #baseos-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@supports not (backdrop-filter: blur(1px)) {
  body #baseos-app > .sidebar { background: #f4f6fa !important; }
  body #baseos-app .main > .topbar { background: #f7f9fc !important; }
}