/* Gravitee's global rail, API rail, and configuration tabs are separate scopes. */
#api-catalog td small.subtle { display:block; margin-top:4px; color:var(--muted); }
#flows:has(#flow-designer:not([hidden])) > .flow-toolbar { display:none; }
#app > aside { width: 228px; position: fixed; inset: 0 auto 0 0; overflow-y: auto; background: var(--sidebar); color: #c5d0df; display: flex; flex-direction: column; padding: 22px 14px 18px; z-index: 3; }
#app > aside .brand { display: flex; gap: 12px; align-items: center; color: #fff; font-size: 21px; font-weight: 600; letter-spacing: -.03em; padding: 0 10px; }
#app > aside .brand:hover { text-decoration: none; }
.version { font-size: 11px; border: 1px solid #536276; border-radius: 4px; padding: 1px 5px; color: #c5d0df; letter-spacing: 0; margin-left: auto; }
.workspace { display: flex; gap: 10px; align-items: center; border: 1px solid #4b5b70; border-radius: 5px; padding: 12px; margin: 24px 0 20px; }
.workspace > div { min-width: 0; }
.workspace-icon { background: #3a4d68; color: #e1ebfa; border-radius: 4px; padding: 5px 10px; }
.workspace strong { font-size: 13px; color: #f1f5fb; display: block; overflow-wrap: anywhere; }
.workspace small { font-size: 12px; color: #bcc9da; }
#app > aside > nav { display: grid; gap: 4px; }
#app > aside > nav > a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 5px; color: #cbd6e5; font-size: 14px; }
#app > aside > nav > a:hover { background: #304157; color: #fff; text-decoration: none; }
#app > aside > nav > a.active { background: #344f74; border-color: #587cab; color: #fff; font-weight: 600; }
#app > aside > nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.aside-bottom { margin-top: auto; padding: 24px 8px 0; font-size: 12px; }
.aside-bottom > div { margin-bottom: 12px; }
.aside-bottom button { width: 100%; text-align: left; background: transparent; color: #d8e2f0; border: 1px solid #536276; padding: 8px 10px; font-size: 13px; }
.aside-bottom button:hover:not(:disabled) { background: #304157; color: #fff; border-color: #8098b7; }
.dot { display: inline-block; width: 7px; height: 7px; background: #8dd6b0; border-radius: 50%; margin-right: 6px; }
.workspace-main.has-api-context { padding-left: 216px; }
.api-context-rail { position: fixed; left: 228px; top: 0; bottom: 0; width: 216px; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); z-index: 2; }
.api-context-identity { display: flex; flex-direction: column; gap: 8px; padding: 22px 18px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.api-context-identity > a { font-size: 13px; margin-bottom: 8px; }
.api-context-identity > strong { font-size: 16px; line-height: 1.4; }
.api-context-identity > small { color: var(--muted); font-size: 12px; }
.api-navigation { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 12px 0; padding: 0 10px; }
.api-navigation > a { display: flex; align-items: center; min-height: 42px; padding: 10px 12px; border: 1px solid transparent; border-radius: 5px; color: #4c5b6f; font-size: 14px; overflow-wrap: anywhere; }
.api-navigation > a:hover { background: var(--hover); color: var(--accent); text-decoration: none; }
.api-navigation > a.active { background: var(--selected); border-color: #bed0ea; color: #204b8d; font-weight: 650; }
.configuration-navigation { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: -4px 0 24px; padding: 0; }
.configuration-navigation > a { display: flex; align-items: center; flex: none; min-height: 44px; padding: 10px 16px; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; font-size: 14px; }
.configuration-navigation > a:hover { background: var(--hover); color: var(--accent); text-decoration: none; }
.configuration-navigation > a.active { background: transparent; border-bottom-color: var(--accent); color: var(--accent); font-weight: 650; }
.configuration-navigation > a:focus-visible { outline-offset: -3px; }
.navigation-view p { margin-bottom: 16px; }
.navigation-view table { margin-top: 16px; }
.navigation-view pre { max-width: 70ch; max-height: 400px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; background: #f3f6f9; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; }
.navigation-scope { color: var(--muted); }
.navigation-error { color: #a1262e; border: 1px solid #e3b5ba; background: #fff2f2; padding: 12px 16px; border-radius: 5px; margin-top: 16px; }
.navigation-action { display: inline-block; margin-top: 16px; font-weight: 600; }
.catalog-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.catalog-toolbar label { font-weight: 600; }
.catalog-toolbar input { min-width: 180px; flex: 1; max-width: 480px; }
.catalog-toolbar button { margin-left: auto; }
.api-open { border: 1px solid transparent; background: transparent; color: var(--accent); text-align: left; padding: 5px 7px; margin: -5px -7px; font-weight: 600; }
.api-open:hover:not(:disabled) { background: var(--selected); border-color: #bed0ea; color: var(--primary-hover); text-decoration: underline; }
#configuration .config-tabs { display: none; }
#configuration:not(.deployment-mode) .deployment-history { display: none; }
#configuration.deployment-mode #config-fields { display: none; }
#configuration.deployment-mode .advanced-editor { margin-top: 24px; }
@media (min-width: 701px) and (max-width: 1100px) {
  #app > aside { width: 200px; padding-inline: 12px; }
  .api-context-rail { left: 200px; width: 188px; }
  .workspace-main.has-api-context { padding-left: 188px; }
  .api-context-identity { padding-inline: 16px; }
  .workspace-main.has-api-context > header { align-items: flex-start; }
  .has-api-context #updated { display: none; }
}
@media (max-width: 700px) {
  #app > aside { position: static; width: auto; padding: 16px; overflow: visible; }
  #app > aside .brand { padding: 0; }
  .workspace { display: none; }
  #app > aside > nav { display: flex; overflow-x: auto; margin-top: 16px; gap: 4px; padding-bottom: 4px; }
  #app > aside > nav > a { white-space: nowrap; padding: 9px 12px; flex: none; }
  #app > aside > nav svg { display: none; }
  .aside-bottom { display: flex; align-items: center; justify-content: flex-end; margin-top: 8px; padding: 0; }
  .aside-bottom > div { display: none; }
  .aside-bottom button { width: auto; }
  .workspace-main.has-api-context { padding-left: 0; }
  .api-context-rail { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .api-context-identity { padding: 16px; gap: 4px; }
  .api-context-identity > a { margin-bottom: 4px; }
  .api-navigation { flex-direction: row; overflow-x: auto; margin: 0; padding: 0 8px 8px; }
  .api-navigation > a { white-space: nowrap; flex: none; }
  .configuration-navigation { margin-left: -16px; margin-right: -16px; padding-left: 8px; padding-right: 8px; }
  .configuration-navigation > a { padding: 10px 12px; }
  .catalog-toolbar { align-items: stretch; }
  .catalog-toolbar label { flex-basis: 100%; }
  .catalog-toolbar input { min-width: 0; width: 100%; max-width: none; flex-basis: 100%; font-size: 16px; }
  .catalog-toolbar button { margin-left: 0; }
  .navigation-view .table-wrap, #gateway-catalog .panel { overflow-x: auto; }
}