/* app_console.css */
/* Master stylesheet for app-console pages */
/* Structure:
   1) Foundation
   2) Shared components
   3) Page scopes
*/

/* =========================================================
   1) FOUNDATION
   ========================================================= */

:root {
  --app-bg: #0b0f14;
  --app-bg-2: #0e131a;
  --app-surface: #10161d;
  --app-surface-2: #0d1319;
  --app-surface-3: #121923;
  --app-border: #223041;
  --app-border-strong: #314154;
  --app-text: #edf3fb;
  --app-text-soft: #c7d2df;
  --app-text-muted: #90a0b4;
  --app-accent: #6ea8fe;
  --app-accent-2: #9ec6ff;
  --app-accent-soft: rgba(110, 168, 254, 0.12);
  --app-success: #7ee2b8;
  --app-warning: #f2c76b;
  --app-danger: #ff9a9a;
  --app-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
  --app-shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.16);
  --app-radius-lg: 18px;
  --app-radius-md: 14px;
  --app-radius-sm: 12px;
}

html,
body,
body.app-console {
  margin: 0;
  min-height: 100%;
  color-scheme: dark;
  background:
    radial-gradient(circle at top left, rgba(110, 168, 254, 0.05) 0, transparent 18%),
    linear-gradient(180deg, var(--app-bg-2) 0, var(--app-bg) 180px, var(--app-bg) 100%);
  color: var(--app-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body.app-console {
  padding: 22px;
}

body.app-console a {
  color: var(--app-accent-2);
  text-decoration: none;
}

body.app-console a:hover {
  color: #c5ddff;
  text-decoration: none;
}

body.app-console h1,
body.app-console h2,
body.app-console h3 {
  color: #f5f9ff;
  letter-spacing: -0.02em;
}

body.app-console h1 {
  font-size: 38px;
  line-height: 1.05;
  margin: 0 0 10px 0;
}

body.app-console h2 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 12px 0;
}

body.app-console h3 {
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 8px 0;
}

body.app-console p,
body.app-console .muted,
body.app-console .small {
  color: var(--app-text-muted);
}

body.app-console .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 760px) {
  body.app-console {
    padding: 14px;
  }

  body.app-console h1 {
    font-size: 30px;
  }
}

/* =========================================================
   2) SHARED COMPONENTS
   ========================================================= */

body.app-console .card,
body.app-console .panel,
body.app-console .statusbox,
body.app-console .meta,
body.app-console .mw-status-box,
body.app-console .empty,
body.app-console .mw-empty,
body.app-console .mw-job-empty {
  background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-surface-2) 100%);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow);
}

body.app-console .topbar,
body.app-console .topnav,
body.app-console .mw-topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: 14px;
  background: rgba(12, 17, 24, 0.84);
  box-shadow: var(--app-shadow-soft);
  margin-bottom: 18px;
}

body.app-console .btn,
body.app-console button,
body.app-console .buttonlink,
body.app-console a.btn,
body.app-console a.buttonlink {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--app-border-strong);
  background: #15202c;
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

body.app-console .btn:hover,
body.app-console button:hover,
body.app-console .buttonlink:hover,
body.app-console a.btn:hover,
body.app-console a.buttonlink:hover {
  transform: translateY(-1px);
  border-color: #4c6278;
  background: #1a2633;
}

body.app-console button[disabled],
body.app-console .btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

body.app-console input[type="text"],
body.app-console input[type="password"],
body.app-console input[type="file"],
body.app-console input[type="email"],
body.app-console input[type="search"],
body.app-console input[type="date"],
body.app-console select,
body.app-console textarea {
  width: 100%;
  min-height: 42px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--app-border-strong);
  background: #091017;
  color: var(--app-text);
  font: inherit;
  outline: none;
  box-sizing: border-box;
}

body.app-console input[type="file"]::file-selector-button {
  appearance: none;
  margin-right: 12px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--app-border-strong);
  background: #16212d;
  color: var(--app-text);
  cursor: pointer;
}

body.app-console input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.88);
  opacity: 0.85;
}

body.app-console input[type="text"]::placeholder,
body.app-console input[type="password"]::placeholder,
body.app-console input[type="email"]::placeholder,
body.app-console input[type="search"]::placeholder,
body.app-console input[type="date"]::placeholder,
body.app-console textarea::placeholder {
  color: #7b8ca2;
}

body.app-console input[type="text"]:focus,
body.app-console input[type="password"]:focus,
body.app-console input[type="file"]:focus,
body.app-console input[type="email"]:focus,
body.app-console input[type="search"]:focus,
body.app-console input[type="date"]:focus,
body.app-console select:focus,
body.app-console textarea:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.14);
}

body.app-console textarea {
  min-height: 100px;
  resize: vertical;
}

body.app-console label {
  color: var(--app-text-soft);
  font-size: 13px;
  font-weight: 600;
}

body.app-console .pill,
body.app-console [class*="pill"],
body.app-console .badge,
body.app-console [class*="badge"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #121923;
  border: 1px solid #2a3a4d;
  color: #d2dff0;
  box-shadow: none;
}

body.app-console table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  color: var(--app-text);
}

body.app-console th,
body.app-console td {
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #1f2a36;
  color: var(--app-text-soft);
}

body.app-console th {
  border-top: 0;
  background: var(--app-surface-3);
  color: #95aac4;
  font-weight: 700;
}

body.app-console tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.01);
}

body.app-console tbody tr:hover td {
  background: rgba(110, 168, 254, 0.035);
}

body.app-console pre {
  background: #0a1016;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  color: var(--app-text);
  padding: 12px 13px;
  line-height: 1.55;
  overflow: auto;
}

body.app-console hr {
  border: 0;
  border-top: 1px solid var(--app-border);
}

body.app-console .flash {
  background: rgba(110, 168, 254, 0.10);
  border: 1px solid rgba(110, 168, 254, 0.24);
  color: #dbe8ff;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 12px 0;
}

body.app-console .ok { color: var(--app-success); }
body.app-console .warn { color: var(--app-warning); }
body.app-console .bad { color: var(--app-danger); }

/* =========================================================
   3) PAGE SCOPES
   ========================================================= */

/* login */
body.app-console:has(form input[type="password"]):not(:has(#user-filter)):not(:has(#created_from)):not(.result-detail-page):not(.analysis-html-page) {
  max-width: 560px;
  margin: 0 auto;
}

body.app-console:has(form input[type="password"]):not(:has(#user-filter)):not(:has(#created_from)):not(.result-detail-page):not(.analysis-html-page) .card {
  padding: 18px;
}

/* admin users */
body.app-console:has(#user-filter) {
  max-width: 1520px;
  margin: 0 auto;
}

body.app-console:has(#user-filter) #user-filter {
  max-width: 320px;
  background: #0a1016;
}

body.app-console:has(#user-filter) #user-filter-count,
body.app-console:has(#user-filter) .help {
  color: var(--app-text-muted);
}

body.app-console:has(#user-filter) tbody td {
  background: #10161d;
}

body.app-console:has(#user-filter) tbody tr:nth-child(even) td {
  background: #0f151d;
}

body.app-console:has(#user-filter) tbody tr:hover td {
  background: rgba(110, 168, 254, 0.045);
}

body.app-console:has(#user-filter) form[action^="/admin/users/toggle-"],
body.app-console:has(#user-filter) form[action^="/admin/users/edit/"],
body.app-console:has(#user-filter) .inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 6px;
  margin-bottom: 6px;
}

body.app-console:has(#user-filter) a[href^="/admin/users/edit/"],
body.app-console:has(#user-filter) a[href^="/admin/users/reset-password/"],
body.app-console:has(#user-filter) form[action^="/admin/users/toggle-"] button,
body.app-console:has(#user-filter) form[action^="/admin/users/edit/"] button,
body.app-console:has(#user-filter) .inline button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* audit */
body.app-console:has(#created_from):has(#created_to) {
  max-width: 1520px;
  margin: 0 auto;
}

body.app-console:has(#created_from):has(#created_to) form[action="/admin/audit"] {
  display: grid;
  gap: 14px;
}

body.app-console:has(#created_from):has(#created_to) form[action="/admin/audit"] .field {
  min-width: 0;
}

body.app-console:has(#created_from):has(#created_to) input[type="text"],
body.app-console:has(#created_from):has(#created_to) input[type="search"],
body.app-console:has(#created_from):has(#created_to) input[type="date"],
body.app-console:has(#created_from):has(#created_to) select,
body.app-console:has(#created_from):has(#created_to) textarea {
  background: #0a1016;
  border: 1px solid #304050;
  color: var(--app-text);
  color-scheme: dark;
}

body.app-console:has(#created_from):has(#created_to) details {
  border-radius: 10px;
}

body.app-console:has(#created_from):has(#created_to) summary {
  cursor: pointer;
  color: var(--app-accent-2);
}

body.app-console:has(#created_from):has(#created_to) pre {
  background: #0a1016;
  border: 1px solid var(--app-border);
}

/* result detail */
body.app-console.result-detail-page {
  max-width: 1680px;
  margin: 0 auto;
}

body.app-console.result-detail-page .result-page-title {
  margin: 6px 0 14px 0;
}

body.app-console.result-detail-page .result-topnav {
  margin-bottom: 18px;
}

body.app-console.result-detail-page .result-meta-card {
  padding: 14px 16px;
  margin: 0 0 18px 0;
}

body.app-console.result-detail-page .result-meta-card .meta-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px solid #1f2a36;
}

body.app-console.result-detail-page .result-meta-card .meta-row:first-child {
  border-top: 0;
  padding-top: 0;
}

body.app-console.result-detail-page .result-meta-card .meta-row:last-child {
  padding-bottom: 0;
}

body.app-console.result-detail-page .result-meta-card .label {
  color: #93a9c3;
  font-weight: 700;
  min-width: 0;
  display: block;
}

body.app-console.result-detail-page .result-transcript-pre {
  padding: 16px 18px;
  margin: 0;
  min-height: 420px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.62;
}

/* analysis browser page */
body.app-console.analysis-html-page {
  max-width: 1680px;
  margin: 0 auto;
}

body.app-console.analysis-html-page table {
  margin-bottom: 16px;
}

body.app-console.analysis-html-page .topbar,
body.app-console.analysis-html-page .topnav {
  margin-bottom: 18px;
}

/* access denied */
body.app-console .shell {
  max-width: 980px;
  margin: 0 auto;
}

body.app-console .hero {
  background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-surface-2) 100%);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow);
}

@media (max-width: 900px) {
  body.app-console:has(#user-filter),
  body.app-console:has(#created_from):has(#created_to),
  body.app-console.result-detail-page,
  body.app-console.analysis-html-page {
    max-width: none;
  }

  body.app-console.result-detail-page .result-meta-card .meta-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body.app-console.result-detail-page .result-transcript-pre {
    min-height: 280px;
    padding: 14px;
  }
}


/* NAV_UNIFY_V1_START */
:root {
  --app-shell-max: 1520px;
}

body.app-console {
  padding-top: 22px !important;
}

body.app-console .topbar,
body.app-console .topnav,
body.app-console .mw-topnav,
body.app-console .result-topnav,
body.app-console .analysis-topnav {
  width: 100% !important;
  max-width: var(--app-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  box-sizing: border-box !important;
}

body.app-console.result-detail-page .result-topnav,
body.app-console.analysis-html-page .analysis-topnav,
body.app-console.analysis-html-page .topbar,
body.app-console.analysis-html-page .topnav {
  max-width: var(--app-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

@media (max-width: 900px) {
  :root {
    --app-shell-max: none;
  }

  body.app-console {
    padding-top: 14px !important;
  }

  body.app-console .topbar,
  body.app-console .topnav,
  body.app-console .mw-topnav,
  body.app-console .result-topnav,
  body.app-console .analysis-topnav {
    max-width: none !important;
  }
}
/* NAV_UNIFY_V1_END */


/* WIDTH_UNIFY_V2_START */
:root {
  --app-shell-max: 1440px;
}

body.app-console,
body.app-console:has(#user-filter),
body.app-console:has(#created_from):has(#created_to),
body.app-console.result-detail-page,
body.app-console.analysis-html-page {
  max-width: var(--app-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.app-console .shell,
body.app-console .wrap {
  width: 100% !important;
  max-width: var(--app-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.app-console .topbar,
body.app-console .topnav,
body.app-console .mw-topnav,
body.app-console .result-topnav,
body.app-console .analysis-topnav {
  width: 100% !important;
  max-width: var(--app-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.app-console.result-detail-page .result-topnav,
body.app-console.analysis-html-page .analysis-topnav,
body.app-console.analysis-html-page .topbar,
body.app-console.analysis-html-page .topnav {
  max-width: var(--app-shell-max) !important;
}

@media (max-width: 900px) {
  :root {
    --app-shell-max: none;
  }

  body.app-console,
  body.app-console:has(#user-filter),
  body.app-console:has(#created_from):has(#created_to),
  body.app-console.result-detail-page,
  body.app-console.analysis-html-page,
  body.app-console .shell,
  body.app-console .wrap,
  body.app-console .topbar,
  body.app-console .topnav,
  body.app-console .mw-topnav,
  body.app-console .result-topnav,
  body.app-console .analysis-topnav {
    max-width: none !important;
  }
}
/* WIDTH_UNIFY_V2_END */


/* AUDIT_TABLE_DARK_V2_START */
body.app-console:has(#created_from):has(#created_to) table {
  background: #0f151d !important;
  color: var(--app-text-soft) !important;
}

body.app-console:has(#created_from):has(#created_to) thead,
body.app-console:has(#created_from):has(#created_to) tbody,
body.app-console:has(#created_from):has(#created_to) tr {
  background: transparent !important;
}

body.app-console:has(#created_from):has(#created_to) th {
  background: #121923 !important;
  color: #95aac4 !important;
  border-color: #2a3746 !important;
}

body.app-console:has(#created_from):has(#created_to) td {
  background: #10161d !important;
  color: var(--app-text-soft) !important;
  border-color: #263241 !important;
}

body.app-console:has(#created_from):has(#created_to) tbody tr:nth-child(even) td {
  background: #0d141c !important;
}

body.app-console:has(#created_from):has(#created_to) tbody tr:hover td {
  background: rgba(110, 168, 254, 0.05) !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td .muted,
body.app-console:has(#created_from):has(#created_to) tbody td .small,
body.app-console:has(#created_from):has(#created_to) tbody td span,
body.app-console:has(#created_from):has(#created_to) tbody td div {
  color: inherit !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td a {
  color: var(--app-accent-2) !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td a:hover {
  color: #c5ddff !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td .pill,
body.app-console:has(#created_from):has(#created_to) tbody td [class*="pill"],
body.app-console:has(#created_from):has(#created_to) tbody td .badge,
body.app-console:has(#created_from):has(#created_to) tbody td [class*="badge"] {
  background: #121923 !important;
  border: 1px solid #35506f !important;
  color: #d7e5f7 !important;
}

body.app-console:has(#created_from):has(#created_to) .panel table,
body.app-console:has(#created_from):has(#created_to) .card table,
body.app-console:has(#created_from):has(#created_to) .panel tbody td,
body.app-console:has(#created_from):has(#created_to) .card tbody td {
  background-clip: padding-box !important;
}
/* AUDIT_TABLE_DARK_V2_END */


/* AUDIT_BADGE_CONTRAST_V3_START */
body.app-console:has(#created_from):has(#created_to) tbody td .pill,
body.app-console:has(#created_from):has(#created_to) tbody td [class*="pill"],
body.app-console:has(#created_from):has(#created_to) tbody td .badge,
body.app-console:has(#created_from):has(#created_to) tbody td [class*="badge"] {
  background: #162231 !important;
  border: 1px solid #3e5a78 !important;
  color: #eef6ff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td .pill *,
body.app-console:has(#created_from):has(#created_to) tbody td [class*="pill"] *,
body.app-console:has(#created_from):has(#created_to) tbody td .badge *,
body.app-console:has(#created_from):has(#created_to) tbody td [class*="badge"] * {
  color: inherit !important;
  opacity: 1 !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td .pill.warn,
body.app-console:has(#created_from):has(#created_to) tbody td .badge.warn,
body.app-console:has(#created_from):has(#created_to) tbody td [class*="pill"][class*="warn"],
body.app-console:has(#created_from):has(#created_to) tbody td [class*="badge"][class*="warn"] {
  background: #33240f !important;
  border-color: #8b6730 !important;
  color: #ffe7b8 !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td .pill.ok,
body.app-console:has(#created_from):has(#created_to) tbody td .badge.ok,
body.app-console:has(#created_from):has(#created_to) tbody td [class*="pill"][class*="ok"],
body.app-console:has(#created_from):has(#created_to) tbody td [class*="badge"][class*="ok"] {
  background: #10281d !important;
  border-color: #2f6d50 !important;
  color: #c8f5df !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td .pill.bad,
body.app-console:has(#created_from):has(#created_to) tbody td .badge.bad,
body.app-console:has(#created_from):has(#created_to) tbody td [class*="pill"][class*="bad"],
body.app-console:has(#created_from):has(#created_to) tbody td [class*="badge"][class*="bad"] {
  background: #34161a !important;
  border-color: #8c3f4a !important;
  color: #ffd3d8 !important;
}
/* AUDIT_BADGE_CONTRAST_V3_END */


/* AUDIT_EVENT_ROLE_CONTRAST_V4_START */
/* Audit table: Event = col 3, Rolle = col 5 */
body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(3) > *,
body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(5) > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #18263a !important;
  border: 1px solid #46627f !important;
  color: #f3f8ff !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(3) > * *,
body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(5) > * * {
  color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(3) > a,
body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(5) > a,
body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(3) > span,
body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(5) > span,
body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(3) > div,
body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(5) > div {
  color: #f3f8ff !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(3) > a:hover,
body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(5) > a:hover {
  color: #ffffff !important;
  background: #213247 !important;
  border-color: #5a7a98 !important;
}

body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(3),
body.app-console:has(#created_from):has(#created_to) tbody td:nth-child(5) {
  color: var(--app-text-soft) !important;
}
/* AUDIT_EVENT_ROLE_CONTRAST_V4_END */


/* PRIMARY_NAV_V1_START */
body.app-console .app-primary-nav {
  width: 100% !important;
  max-width: var(--app-shell-max, 1440px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

body.app-console .app-primary-nav .btn {
  min-height: 36px !important;
  padding: 0 12px !important;
}

body.app-console .app-primary-nav .btn.active {
  background: #223041 !important;
  border-color: #5b7694 !important;
  color: #ffffff !important;
}

body.app-console .app-primary-nav .btn:last-child {
  margin-left: auto !important;
}

body.app-console .app-primary-nav + .topbar,
body.app-console .app-primary-nav + .topnav,
body.app-console .app-primary-nav + .mw-topnav {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  body.app-console .app-primary-nav .btn:last-child {
    margin-left: 0 !important;
  }
}
/* PRIMARY_NAV_V1_END */


/* PRIMARY_NAV_MINIMAL_V1_START */
body.app-console .app-primary-nav {
  width: 100% !important;
  max-width: var(--app-shell-max, 1440px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

body.app-console .app-primary-nav .btn {
  min-height: 36px !important;
  padding: 0 12px !important;
}

body.app-console .app-primary-nav .btn.active {
  background: #223041 !important;
  border-color: #5b7694 !important;
  color: #ffffff !important;
}

body.app-console .app-primary-nav .btn:last-child {
  margin-left: auto !important;
}

body.app-console .app-primary-nav + .topbar,
body.app-console .app-primary-nav + .topnav,
body.app-console .app-primary-nav + .mw-topnav {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  body.app-console .app-primary-nav .btn:last-child {
    margin-left: 0 !important;
  }
}
/* PRIMARY_NAV_MINIMAL_V1_END */