/* Stable flat sidebar shared by every authenticated workspace route. */
body[data-current-tab] #app .sidebar {
  overflow:hidden;
  background:#03080e;
  border-right-color:#17212b;
  color:#f2f4f5;
}

body[data-current-tab] #app .sidebar > .sidebar-nav {
  display:flex!important;
  flex:1 1 auto;
  flex-direction:column;
  min-width:0;
  min-height:0;
  padding:22px 0 76px;
  gap:2px;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  overscroll-behavior:none;
  scrollbar-width:none;
}

body[data-current-tab] #app .sidebar > .sidebar-nav::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
}

body[data-current-tab] #app .sidebar > .sidebar-nav > button {
  width:100%;
  height:clamp(28px,calc((100dvh - 212px) / 14),36px);
  min-height:clamp(28px,calc((100dvh - 212px) / 14),36px);
  max-height:36px;
  flex:0 0 auto;
  justify-content:flex-start;
  padding:0 11px;
  overflow:hidden;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#808a95;
  box-shadow:none;
  font:14px/20px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  text-align:left;
  transition-property:background-color,color,box-shadow;
  transition-duration:120ms;
}

body[data-current-tab] #app .sidebar > .sidebar-nav > button .nav-label {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
}

body[data-current-tab] #app .sidebar > .sidebar-nav > button .nav-label > span:last-child {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body[data-current-tab] #app .sidebar > .sidebar-nav > button .nav-ref-icon,
body[data-current-tab] #app .sidebar > .sidebar-nav > button .nav-icon {
  width:20px;
  height:20px;
  flex:0 0 20px;
  color:currentColor;
  stroke-width:1.5;
}

body[data-current-tab] #app .sidebar > .sidebar-nav > button:hover {
  background:#101419;
  color:#f2f4f5;
}

body[data-current-tab] #app .sidebar > .sidebar-nav > button.active {
  background:#182015;
  color:#c4f27a;
  box-shadow:inset 3px 0 #7ce30d;
}

body[data-current-tab] #app .sidebar > .sidebar-nav > button:focus-visible {
  outline:2px solid #7ce30d;
  outline-offset:-2px;
}

body[data-theme="light"][data-current-tab] #app .sidebar > .sidebar-nav > button {
  color:#808a95;
}

body[data-theme="light"][data-current-tab] #app .sidebar > .sidebar-nav > button:hover {
  background:#101419;
  color:#f2f4f5;
}

body[data-theme="light"][data-current-tab] #app .sidebar > .sidebar-nav > button.active {
  background:#182015;
  color:#c4f27a;
  box-shadow:inset 3px 0 #7ce30d;
}

/* Keep the navigation shell identical while route-specific content changes. */
body[data-current-tab] #app .sidebar .sidebar-brand__name {color:#f2f4f5;}
body[data-current-tab] #app .sidebar .sidebar-brand__name span {color:#929aa3;}
body[data-current-tab] #app > header {background:#02070d;border-bottom-color:#17212b;color:#f2f4f5;}
body[data-current-tab] #app > header .header-account {background:#03080e;border-color:#17212b;color:#f2f4f5;}
body[data-current-tab] #app > header .header-user {color:#f2f4f5;}
body[data-current-tab] #app > header .header-user__avatar {background:#11161c;color:#f2f4f5;}

@media(max-height:640px) {
  body[data-current-tab] #app .sidebar .sidebar-brand {
    height:64px;
    min-height:64px;
  }

  body[data-current-tab] #app .sidebar > .sidebar-nav {
    padding:8px 0 58px;
    gap:0;
  }

  body[data-current-tab] #app .sidebar > .sidebar-nav > button {
    height:clamp(28px,calc((100dvh - 142px) / 14),34px);
    min-height:clamp(28px,calc((100dvh - 142px) / 14),34px);
  }
}

@media(max-height:520px) {
  body[data-current-tab] #app .sidebar .sidebar-brand {
    height:56px;
    min-height:56px;
  }

  body[data-current-tab] #app > header .header-account {
    display:none!important;
  }

  body[data-current-tab] #app .sidebar > .sidebar-nav {
    padding:4px 0;
  }

  body[data-current-tab] #app .sidebar > .sidebar-nav > button {
    height:clamp(24px,calc((100dvh - 72px) / 14),30px);
    min-height:clamp(24px,calc((100dvh - 72px) / 14),30px);
    font-size:12px;
  }

  body[data-current-tab] #app .sidebar > .sidebar-nav > button .nav-label {
    gap:8px;
  }

  body[data-current-tab] #app .sidebar > .sidebar-nav > button .nav-ref-icon,
  body[data-current-tab] #app .sidebar > .sidebar-nav > button .nav-icon {
    width:16px;
    height:16px;
    flex-basis:16px;
  }
}

@media(prefers-reduced-motion:reduce) {
  body[data-current-tab] #app .sidebar > .sidebar-nav > button {
    transition:none;
  }
}

/* Keep the account menu in the global header instead of the sidebar footer. */
body[data-current-tab] #app > header .header-account {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  padding: 0;
  display: block !important;
  background: transparent;
  border: 0;
  z-index: 40;
}
body[data-current-tab] #app > header .header-account-menu {
  top: 46px;
  right: 0;
  bottom: auto;
  left: auto;
}
body[data-current-tab] #app > header .header-user {
  display: flex !important;
  width: auto !important;
  max-width: 168px !important;
}
body[data-current-tab] #app > header .header-user__copy,
body[data-current-tab] #app > header .header-user__chevron {
  display: flex !important;
}

/* Automation page: keep cards readable and controls inside their panels. */
body[data-current-tab="automation"] #app .ai-agent-page {
  width: 100%;
  max-width: 1545px;
  min-width: 0;
}
body[data-current-tab="automation"] #app .ai-agent-hero,
body[data-current-tab="automation"] #app .ai-agent-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
body[data-current-tab="automation"] #app .ai-agent-hero-body,
body[data-current-tab="automation"] #app .ai-agent-tables {
  min-width: 0;
}
body[data-current-tab="automation"] #app .settings-grid,
body[data-current-tab="automation"] #app .settings-grid input,
body[data-current-tab="automation"] #app .settings-grid textarea {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
body[data-current-tab="automation"] #app .ai-agent-table {
  min-width: 0;
  overflow-x: auto;
}
body[data-current-tab="automation"] #app .ai-agent-table-row {
  min-width: 0;
}
body[data-current-tab="automation"] #app .ai-agent-logs {
  max-height: 280px;
  overflow-y: auto;
}
@media (max-width: 680px) {
  body[data-current-tab="automation"] #app .ai-agent-page-head {
    gap: 12px;
    flex-wrap: wrap;
  }
  body[data-current-tab="automation"] #app .ai-agent-refresh {
    margin-left: 0;
  }
  body[data-current-tab="automation"] #app .ai-agent-panel footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}