/*
 * Qdrant theme layer for Warpgate's own web UI.
 *
 * Covers the gateway shell document (/@warpgate), which renders the login,
 * OTP step, target list, profile, API tokens and ticket requests through hash
 * routes. The admin UI (/@warpgate/admin), proxied apps and the floating menu
 * inside apps are out of scope.
 *
 * Selectors were taken from Warpgate 0.29.1 (warpgate-web/src) built with
 * Bootstrap 5.3.8. Re-check them on every image_tag bump.
 *
 * How it is loaded: the api-filter nginx sidecar adds
 *   <link rel="stylesheet" href="/@warpgate/qdrant/theme.css">
 * before </head> of the shell document and serves this file itself.
 * Warpgate's CSP (WARPGATE_CSP: style-src 'self' 'unsafe-inline';
 * img-src 'self' data:; font-src 'self' data:) allows a same-origin
 * stylesheet and the data: images below without any change.
 *
 * Cascade: Warpgate appends its compiled theme as a <style> element at runtime
 * (src/theme/index.ts), after this <link>. Equal specificity would lose, so
 * every rule here carries :root:root, html body or #app to win on specificity.
 *
 * Light and dark: Warpgate's theme files set body { color-scheme: light|dark }
 * (theme.light.scss, theme.dark.scss). light-dark() resolves against that, so
 * this layer follows Warpgate's own theme switcher, including a manual choice.
 * Needs light-dark() and :has() (Chrome 123, Firefox 121, Safari 17.5).
 *
 * Contract: restyle only. Never hide, move or relabel a control. If a
 * selector stops matching after an upgrade, Warpgate's own look shows through.
 */

/* ---------------------------------------------------------------------------
 * Tokens. Values from qdrant-cloud-ui apps/web/src/theme/*-theme-options.ts
 * and the Qdrant logo (apps/web/public/static/images/qdrant-logo.svg).
 * ------------------------------------------------------------------------- */
:root:root {
  --qd-bg: light-dark(#F7F8FA, #0B0F19);
  --qd-surface: light-dark(#FFFFFF, #111824);
  --qd-ink: light-dark(#111824, #F0F3FA);
  --qd-ink-2: light-dark(#656B7F, #ABB1C7);
  --qd-rule: light-dark(#D3D9EB, #262B3A);
  --qd-rule-strong: light-dark(#ABB1C7, #4E5366);
  --qd-hover: light-dark(rgba(17, 24, 36, 0.04), rgba(252, 253, 255, 0.06));
  --qd-accent: #DC244C;
  --qd-accent-hover: light-dark(#CC1845, #E8395F);
  --qd-accent-press: #9E0D38;
  --qd-on-accent: #FFFFFF;
  --qd-ok: light-dark(#00897B, #26A69A);
  --qd-warn: light-dark(#EF6C00, #FFA726);
  --qd-error: light-dark(#D32F2F, #F44336);
  --qd-error-bg: light-dark(#FDEDED, #291414);
  --qd-error-ink: light-dark(#5F2120, #F4C7C7);
  --qd-info-bg: light-dark(#EEF0F5, #171D2C);
  --qd-focus: light-dark(#111824, #F0F3FA);
  --qd-shadow: light-dark(rgba(11, 15, 25, 0.12), rgba(0, 0, 0, 0.5));
  --qd-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --qd-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;

  /* Bootstrap 5.3 root variables (bootstrap/scss/_root.scss, emitted on :root). */
  --bs-body-bg: var(--qd-bg);
  --bs-body-color: var(--qd-ink);
  --bs-emphasis-color: var(--qd-ink);
  --bs-secondary-color: var(--qd-ink-2);
  --bs-tertiary-bg: var(--qd-surface);
  --bs-border-color: var(--qd-rule);
  --bs-body-font-family: var(--qd-font-ui);
  --bs-font-sans-serif: var(--qd-font-ui);
  --bs-font-monospace: var(--qd-font-mono);
  --bs-code-color: var(--qd-ink);
  --bs-heading-color: var(--qd-ink);
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 8px;
}

/* Warpgate re-declares list-group and link-underline variables on body
   (src/theme/_theme.scss, "Make these vars reusable from everywhere"). */
html body {
  --bs-list-group-color: var(--qd-ink);
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--qd-rule);
  --bs-list-group-action-color: var(--qd-ink);
  --bs-list-group-action-hover-color: var(--qd-ink);
  --bs-list-group-action-hover-bg: var(--qd-hover);
  --bs-list-group-action-active-color: var(--qd-ink);
  --bs-list-group-action-active-bg: var(--qd-hover);
  --bs-list-group-active-color: var(--qd-ink);
  --bs-list-group-active-bg: var(--qd-hover);
  --wg-link-underline-color: var(--qd-rule-strong);
  --wg-link-hover-underline-color: var(--qd-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
 * Header: Qdrant logo, hairline, then Warpgate's own wordmark.
 * App.svelte: .container > div.d-flex.mt-5.mb-5 > a.logo > div.brand > svg
 * Brand.svelte colours the wordmark letters itself; we only resize it.
 * ------------------------------------------------------------------------- */
#app .container > .d-flex:has(> a.logo) {
  margin-top: 2rem !important;
  margin-bottom: 2.5rem !important;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--qd-rule);
  gap: 1rem;
}

#app a.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  /* Qdrant mark, fixed brand reds in both themes. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 752 200'%3E%3Cpolygon fill='%23DC244C' points='86.6 0 0 50 0 150 86.6 200 119.08 181.25 119.08 143.75 86.6 162.5 32.48 131.25 32.48 68.75 86.6 37.5 140.73 68.75 140.73 193.75 173.21 175 173.21 50 86.6 0'/%3E%3Cpolygon fill='%23DC244C' points='54.13 81.25 54.13 118.75 86.6 137.5 119.08 118.75 119.08 81.25 86.6 62.5 54.13 81.25'/%3E%3Cpolygon fill='%239E0D38' points='119.08 143.75 119.08 181.25 86.6 200 86.6 162.5 119.08 143.75'/%3E%3Cpolygon fill='%239E0D38' points='173.21 50 173.21 175 140.73 193.75 140.73 68.75 173.21 50'/%3E%3Cpolygon fill='%23FF516B' points='173.21 50 140.73 68.75 86.6 37.5 32.48 68.75 0 50 86.6 0 173.21 50'/%3E%3Cpolygon fill='%23DC244C' points='86.6 162.5 86.6 200 0 150 0 50 32.48 68.75 32.48 131.25 86.6 162.5'/%3E%3Cpolygon fill='%23FF516B' points='119.08 81.25 86.6 100 54.13 81.25 86.6 62.5 119.08 81.25'/%3E%3Cpolygon fill='%23DC244C' points='86.6 100 86.6 137.5 54.13 118.75 54.13 81.25 86.6 100'/%3E%3Cpolygon fill='%239E0D38' points='119.08 81.25 119.08 118.75 86.6 137.5 86.6 100 119.08 81.25'/%3E%3C/svg%3E") no-repeat 0 50% / auto 1.625rem;
}

/* Qdrant wordmark as a mask, so it takes --qd-ink in either theme. */
#app a.logo::before {
  content: "";
  display: block;
  height: 1.625rem;
  aspect-ratio: 752 / 200;
  background: var(--qd-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 752 200'%3E%3Cpath d='M333.47,125.54c2.59-7.19,3.89-15.54,3.89-25.05v-.49c0-13.08-2.35-24.08-7.05-33-4.7-8.92-11.33-15.65-19.86-20.19-8.54-4.54-18.6-6.81-30.16-6.81-8.65,0-16.52,1.27-23.59,3.81-7.08,2.54-13.08,6.35-18,11.43-4.92,5.08-8.73,11.35-11.43,18.81-2.7,7.46-4.05,16.11-4.05,25.95v.49c0,12.65,2.3,23.27,6.89,31.86,4.59,8.6,11.16,15.08,19.7,19.46,8.54,4.38,18.7,6.57,30.49,6.57h70.28v-18.49h-24.96c3.29-4.14,5.91-8.92,7.88-14.35ZM266.34,137.7c-4.11-1.46-7.62-3.59-10.54-6.41-2.92-2.81-5.11-6.19-6.57-10.14-1.46-3.95-2.19-8.46-2.19-13.54v-15.89c0-6.27,1.22-11.81,3.65-16.62,2.43-4.81,6.13-8.59,11.11-11.35,4.97-2.76,11.19-4.14,18.65-4.14,5.51,0,10.38.79,14.59,2.35,4.22,1.57,7.7,3.79,10.46,6.65,2.76,2.87,4.81,6.27,6.16,10.22,1.35,3.95,2.03,8.24,2.03,12.89v15.89c0,6.71-1.3,12.46-3.89,17.27-2.6,4.81-6.38,8.51-11.35,11.11-4.97,2.59-10.97,3.89-18,3.89-5.3,0-10-.73-14.11-2.19Z'/%3E%3Cpath d='M415.82,85.57h-1.13c-2.06-4.65-5.43-8.35-10.14-11.11-4.7-2.76-9.97-4.14-15.81-4.14-5.08,0-9.68.87-13.78,2.59-4.11,1.73-7.62,4.35-10.54,7.87-2.92,3.51-5.14,8-6.65,13.46-1.52,5.46-2.27,11.87-2.27,19.22v3.08c0,8.87,1.19,16.57,3.57,23.11,2.38,6.54,6.03,11.57,10.95,15.08,4.92,3.51,11.21,5.27,18.89,5.27,5.84,0,11.08-1.35,15.73-4.05,4.65-2.7,8-6.43,10.05-11.19h1.13l1.14,13.62h20.11V40.16h-21.24v45.41ZM415.82,122.22c0,6.38-1.7,11.38-5.11,15-3.41,3.62-7.97,5.43-13.7,5.43-3.89,0-7.27-.75-10.14-2.27-2.87-1.51-5.06-3.76-6.57-6.73-1.52-2.97-2.27-6.57-2.27-10.78v-15.41c0-4.22.76-7.78,2.27-10.7,1.51-2.92,3.7-5.16,6.57-6.73,2.86-1.57,6.24-2.35,10.14-2.35s7.22.81,9.97,2.43c2.76,1.62,4.92,3.95,6.49,6.97,1.57,3.03,2.35,6.65,2.35,10.86v14.27Z'/%3E%3Cpath d='M582.99,100.81c0-6.92-1.43-12.59-4.3-17.03-2.87-4.43-6.95-7.78-12.24-10.05-5.3-2.27-11.78-3.41-19.46-3.41-8.11,0-15.03,1.16-20.76,3.49-5.73,2.33-10.13,5.68-13.22,10.05-3.08,4.38-4.62,9.65-4.62,15.81h19.14c0-3.89,1.54-6.92,4.62-9.08,3.08-2.16,7.43-3.24,13.05-3.24,3.57,0,6.59.49,9.08,1.46,2.49.97,4.38,2.49,5.68,4.54,1.3,2.05,1.95,4.81,1.95,8.27v3.89l-25.14,3.24c-4.43.54-8.46,1.49-12.08,2.84-3.62,1.35-6.73,3.16-9.32,5.43-2.59,2.27-4.57,4.97-5.92,8.11-1.35,3.14-2.03,6.76-2.03,10.86v.49c0,7.14,2.51,12.84,7.54,17.11,5.03,4.27,11.54,6.41,19.54,6.41,4.87,0,9.22-.62,13.05-1.87,3.84-1.24,7.16-3.03,9.97-5.35,2.81-2.32,4.92-5.11,6.32-8.35h1.62l1.46,13.95h27.89v-15.08h-11.84v-42.49ZM561.91,130.49c-.32,2.81-1.3,5.27-2.92,7.38-1.62,2.11-3.79,3.76-6.49,4.95-2.7,1.19-5.78,1.78-9.24,1.78-4.65,0-8.22-.97-10.7-2.92-2.49-1.95-3.73-4.54-3.73-7.78v-2.43c0-3.57,1.32-6.19,3.97-7.87,2.65-1.67,6.24-2.78,10.78-3.32l18.32-2.59v12.81Z'/%3E%3Cpath d='M669.57,74.14c-4.49-2.54-9.81-3.81-15.97-3.81s-11.92,1.54-16.62,4.62c-4.7,3.08-7.97,7.16-9.81,12.24h-1.46l-1.46-15.24h-19.78v86.43h21.24v-48.16c0-4.54.75-8.51,2.27-11.92,1.51-3.41,3.7-6.03,6.57-7.86,2.86-1.84,6.35-2.76,10.46-2.76,3.57,0,6.62.62,9.16,1.86,2.54,1.24,4.54,3.32,6,6.24,1.46,2.92,2.19,6.97,2.19,12.16v50.43h21.08v-53.19c0-7.89-1.19-14.41-3.57-19.54-2.38-5.13-5.81-8.97-10.3-11.51Z'/%3E%3Cpath d='M752,89.13v-17.19h-22.22v-27.41h-21.24v27.41h-19.3v17.19h19.3v52.05c0,5.08,1.35,9.22,4.05,12.41,2.7,3.19,7.13,4.78,13.3,4.78h25.14v-16.7h-21.24v-52.54h22.22Z'/%3E%3Cpath d='M494.81,70.97c-5.62,0-10.62,1.22-15,3.65-4.38,2.43-7.54,6.4-9.49,11.92h-.65l-.97-14.43h-18.32v86.27h20.27v-47.19c.22-4.54,1.22-8.38,3-11.51,1.78-3.13,4.4-5.54,7.86-7.22,3.46-1.68,7.78-2.51,12.97-2.51,1.08,0,2.08.03,3,.08.92.06,1.7.08,2.35.08v-19.14h-5.03Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 752 200'%3E%3Cpath d='M333.47,125.54c2.59-7.19,3.89-15.54,3.89-25.05v-.49c0-13.08-2.35-24.08-7.05-33-4.7-8.92-11.33-15.65-19.86-20.19-8.54-4.54-18.6-6.81-30.16-6.81-8.65,0-16.52,1.27-23.59,3.81-7.08,2.54-13.08,6.35-18,11.43-4.92,5.08-8.73,11.35-11.43,18.81-2.7,7.46-4.05,16.11-4.05,25.95v.49c0,12.65,2.3,23.27,6.89,31.86,4.59,8.6,11.16,15.08,19.7,19.46,8.54,4.38,18.7,6.57,30.49,6.57h70.28v-18.49h-24.96c3.29-4.14,5.91-8.92,7.88-14.35ZM266.34,137.7c-4.11-1.46-7.62-3.59-10.54-6.41-2.92-2.81-5.11-6.19-6.57-10.14-1.46-3.95-2.19-8.46-2.19-13.54v-15.89c0-6.27,1.22-11.81,3.65-16.62,2.43-4.81,6.13-8.59,11.11-11.35,4.97-2.76,11.19-4.14,18.65-4.14,5.51,0,10.38.79,14.59,2.35,4.22,1.57,7.7,3.79,10.46,6.65,2.76,2.87,4.81,6.27,6.16,10.22,1.35,3.95,2.03,8.24,2.03,12.89v15.89c0,6.71-1.3,12.46-3.89,17.27-2.6,4.81-6.38,8.51-11.35,11.11-4.97,2.59-10.97,3.89-18,3.89-5.3,0-10-.73-14.11-2.19Z'/%3E%3Cpath d='M415.82,85.57h-1.13c-2.06-4.65-5.43-8.35-10.14-11.11-4.7-2.76-9.97-4.14-15.81-4.14-5.08,0-9.68.87-13.78,2.59-4.11,1.73-7.62,4.35-10.54,7.87-2.92,3.51-5.14,8-6.65,13.46-1.52,5.46-2.27,11.87-2.27,19.22v3.08c0,8.87,1.19,16.57,3.57,23.11,2.38,6.54,6.03,11.57,10.95,15.08,4.92,3.51,11.21,5.27,18.89,5.27,5.84,0,11.08-1.35,15.73-4.05,4.65-2.7,8-6.43,10.05-11.19h1.13l1.14,13.62h20.11V40.16h-21.24v45.41ZM415.82,122.22c0,6.38-1.7,11.38-5.11,15-3.41,3.62-7.97,5.43-13.7,5.43-3.89,0-7.27-.75-10.14-2.27-2.87-1.51-5.06-3.76-6.57-6.73-1.52-2.97-2.27-6.57-2.27-10.78v-15.41c0-4.22.76-7.78,2.27-10.7,1.51-2.92,3.7-5.16,6.57-6.73,2.86-1.57,6.24-2.35,10.14-2.35s7.22.81,9.97,2.43c2.76,1.62,4.92,3.95,6.49,6.97,1.57,3.03,2.35,6.65,2.35,10.86v14.27Z'/%3E%3Cpath d='M582.99,100.81c0-6.92-1.43-12.59-4.3-17.03-2.87-4.43-6.95-7.78-12.24-10.05-5.3-2.27-11.78-3.41-19.46-3.41-8.11,0-15.03,1.16-20.76,3.49-5.73,2.33-10.13,5.68-13.22,10.05-3.08,4.38-4.62,9.65-4.62,15.81h19.14c0-3.89,1.54-6.92,4.62-9.08,3.08-2.16,7.43-3.24,13.05-3.24,3.57,0,6.59.49,9.08,1.46,2.49.97,4.38,2.49,5.68,4.54,1.3,2.05,1.95,4.81,1.95,8.27v3.89l-25.14,3.24c-4.43.54-8.46,1.49-12.08,2.84-3.62,1.35-6.73,3.16-9.32,5.43-2.59,2.27-4.57,4.97-5.92,8.11-1.35,3.14-2.03,6.76-2.03,10.86v.49c0,7.14,2.51,12.84,7.54,17.11,5.03,4.27,11.54,6.41,19.54,6.41,4.87,0,9.22-.62,13.05-1.87,3.84-1.24,7.16-3.03,9.97-5.35,2.81-2.32,4.92-5.11,6.32-8.35h1.62l1.46,13.95h27.89v-15.08h-11.84v-42.49ZM561.91,130.49c-.32,2.81-1.3,5.27-2.92,7.38-1.62,2.11-3.79,3.76-6.49,4.95-2.7,1.19-5.78,1.78-9.24,1.78-4.65,0-8.22-.97-10.7-2.92-2.49-1.95-3.73-4.54-3.73-7.78v-2.43c0-3.57,1.32-6.19,3.97-7.87,2.65-1.67,6.24-2.78,10.78-3.32l18.32-2.59v12.81Z'/%3E%3Cpath d='M669.57,74.14c-4.49-2.54-9.81-3.81-15.97-3.81s-11.92,1.54-16.62,4.62c-4.7,3.08-7.97,7.16-9.81,12.24h-1.46l-1.46-15.24h-19.78v86.43h21.24v-48.16c0-4.54.75-8.51,2.27-11.92,1.51-3.41,3.7-6.03,6.57-7.86,2.86-1.84,6.35-2.76,10.46-2.76,3.57,0,6.62.62,9.16,1.86,2.54,1.24,4.54,3.32,6,6.24,1.46,2.92,2.19,6.97,2.19,12.16v50.43h21.08v-53.19c0-7.89-1.19-14.41-3.57-19.54-2.38-5.13-5.81-8.97-10.3-11.51Z'/%3E%3Cpath d='M752,89.13v-17.19h-22.22v-27.41h-21.24v27.41h-19.3v17.19h19.3v52.05c0,5.08,1.35,9.22,4.05,12.41,2.7,3.19,7.13,4.78,13.3,4.78h25.14v-16.7h-21.24v-52.54h22.22Z'/%3E%3Cpath d='M494.81,70.97c-5.62,0-10.62,1.22-15,3.65-4.38,2.43-7.54,6.4-9.49,11.92h-.65l-.97-14.43h-18.32v86.27h20.27v-47.19c.22-4.54,1.22-8.38,3-11.51,1.78-3.13,4.4-5.54,7.86-7.22,3.46-1.68,7.78-2.51,12.97-2.51,1.08,0,2.08.03,3,.08.92.06,1.7.08,2.35.08v-19.14h-5.03Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}

#app a.logo .brand {
  height: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--qd-rule-strong);
  display: flex;
  align-items: center;
}

#app a.logo .brand svg {
  height: 0.625rem;
  width: auto;
}

/* Environment badge after the lockup. Off unless --qd-env-label (a quoted
   string) is set; api-filter.tf appends the values for the environment
   (--qd-env-label, --qd-env-bg, --qd-env-ink, --qd-env-ring). */
#app a.logo::after {
  content: var(--qd-env-label);
  padding: 0.3125rem 0.4375rem;
  border-radius: 3px;
  background: var(--qd-env-bg, transparent);
  color: var(--qd-env-ink, inherit);
  box-shadow: inset 0 0 0 1px var(--qd-env-ring, transparent);
  font: 600 0.6875rem/1 var(--qd-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* AuthBar.svelte: username link and log-out button. */
#app .container > .d-flex:has(> a.logo) .ms-auto a:not(.btn) {
  font-family: var(--qd-font-mono);
  font-size: 0.8125rem;
  color: var(--qd-ink-2);
}

/* ---------------------------------------------------------------------------
 * Type
 * ------------------------------------------------------------------------- */
#app {
  font-family: var(--qd-font-ui);
  color: var(--qd-ink);
}

/* .page-summary-bar h1 is Poppins 700 2.5rem in _theme.scss; Login.svelte
   scopes h1 to 3rem. */
#app .page-summary-bar h1 {
  font-family: var(--qd-font-ui);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

#app .page-summary-bar .counter {
  font-family: var(--qd-font-mono);
  font-size: 0.8125rem;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  background: var(--qd-ink);
  color: var(--qd-bg);
}

#app :is(h4, .h5) {
  font-weight: 600;
  letter-spacing: -0.01em;
}

#app a:not(.btn):not(.list-group-item):not(.dropdown-item):not(.logo) {
  color: var(--qd-ink);
}

#app .text-muted {
  color: var(--qd-ink-2) !important;
}

#app code {
  font-family: var(--qd-font-mono);
  background: var(--qd-surface);
  color: var(--qd-ink);
  border: 1px solid var(--qd-rule);
  border-radius: 4px;
}

#app .badge {
  font-family: var(--qd-font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 3px;
}

/* ---------------------------------------------------------------------------
 * Buttons. Warpgate underlines every .btn label (_theme.scss). We keep that
 * on secondary buttons as the visible Warpgate trait and drop it on primary.
 * ------------------------------------------------------------------------- */
:is(#app, .modal) .btn {
  --bs-btn-border-radius: 6px;
  --bs-btn-font-weight: 500;
  --bs-btn-focus-box-shadow: none;
}

:is(#app, .modal) .btn-primary {
  --bs-btn-color: var(--qd-on-accent);
  --bs-btn-bg: var(--qd-accent);
  --bs-btn-border-color: var(--qd-accent);
  --bs-btn-hover-color: var(--qd-on-accent);
  --bs-btn-hover-bg: var(--qd-accent-hover);
  --bs-btn-hover-border-color: var(--qd-accent-hover);
  --bs-btn-active-color: var(--qd-on-accent);
  --bs-btn-active-bg: var(--qd-accent-press);
  --bs-btn-active-border-color: var(--qd-accent-press);
  --bs-btn-disabled-color: var(--qd-ink-2);
  --bs-btn-disabled-bg: var(--qd-rule);
  --bs-btn-disabled-border-color: var(--qd-rule);
  font-weight: 600;
  text-decoration: none;
}

/* Login.svelte: SSO buttons (.sso-buttons .btn-secondary.login-view-button),
   Cancel; TicketRequests.svelte modal buttons. */
:is(#app, .modal) .btn-secondary {
  --bs-btn-color: var(--qd-ink);
  --bs-btn-bg: var(--qd-surface);
  --bs-btn-border-color: var(--qd-rule-strong);
  --bs-btn-hover-color: var(--qd-ink);
  --bs-btn-hover-bg: var(--qd-surface);
  --bs-btn-hover-border-color: var(--qd-ink);
  --bs-btn-active-color: var(--qd-ink);
  --bs-btn-active-bg: var(--qd-bg);
  --bs-btn-active-border-color: var(--qd-ink);
  --bs-btn-disabled-color: var(--qd-ink-2);
  --bs-btn-disabled-bg: var(--qd-surface);
  --bs-btn-disabled-border-color: var(--qd-rule);
  text-decoration: underline;
  text-decoration-color: var(--qd-rule-strong);
  text-underline-offset: 0.25em;
}

:is(#app, .modal) .btn-secondary:hover {
  text-decoration-color: var(--qd-ink);
}

:is(#app, .modal) .btn-link {
  --bs-btn-color: var(--qd-ink-2);
  --bs-btn-hover-color: var(--qd-ink);
  --bs-btn-active-color: var(--qd-ink);
}

:is(#app, .modal) :is(a, button, .btn, .form-control, .form-check-input, .list-group-item-action):focus-visible {
  outline: 2px solid var(--qd-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Forms. The OTP field is Login.svelte input[name="otp"].
 * ------------------------------------------------------------------------- */
:is(#app, .modal) .form-control {
  background-color: var(--qd-surface);
  border: 1px solid var(--qd-rule-strong);
  border-radius: 6px;
  color: var(--qd-ink);
}

:is(#app, .modal) .form-control:focus {
  background-color: var(--qd-surface);
  border-color: var(--qd-ink);
  box-shadow: none;
}

#app .form-floating > label {
  color: var(--qd-ink-2);
}

#app input[name="otp"] {
  font-family: var(--qd-font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ---------------------------------------------------------------------------
 * Alerts (Login.svelte, TargetList.svelte, TicketRequests.svelte)
 * ------------------------------------------------------------------------- */
#app .alert {
  --bs-alert-border-color: transparent;
  border: 1px solid var(--bs-alert-border-color);
  border-radius: 6px;
}

#app .alert-danger {
  --bs-alert-bg: var(--qd-error-bg);
  --bs-alert-color: var(--qd-error-ink);
  --bs-alert-border-color: var(--qd-error);
}

#app .alert-info {
  --bs-alert-bg: var(--qd-info-bg);
  --bs-alert-color: var(--qd-ink);
  --bs-alert-border-color: var(--qd-rule-strong);
}

#app .alert-warning {
  --bs-alert-bg: var(--qd-surface);
  --bs-alert-color: var(--qd-ink);
  --bs-alert-border-color: var(--qd-warn);
}

/* ---------------------------------------------------------------------------
 * Target list (TargetList.svelte, ItemList.svelte, CollapsibleGroupHeader).
 * Target names are identifiers, so they are set in monospace.
 * ------------------------------------------------------------------------- */
#app .list-group-flush > .list-group-item {
  border-color: var(--qd-rule);
}

#app .target-item {
  padding-block: 0.875rem;
}

#app .target-item > .me-auto > div {
  font-family: var(--qd-font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--qd-ink);
}

#app .target-item small.protocol {
  font-family: var(--qd-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1875rem 0.375rem;
  border: 1px solid var(--qd-rule-strong);
  border-radius: 3px;
}

#app .target-item small.protocol:empty {
  border: 0;
  padding: 0;
}

#app .target-item .btn-link {
  --bs-btn-color: var(--qd-accent);
}

/* ---------------------------------------------------------------------------
 * Dropdowns and modals (ListOverflowMenu, AuthBar, ticket and instructions
 * modals)
 * ------------------------------------------------------------------------- */
#app .dropdown-menu,
html body .dropdown-menu {
  --bs-dropdown-bg: var(--qd-surface);
  --bs-dropdown-border-color: var(--qd-rule);
  --bs-dropdown-link-color: var(--qd-ink);
  --bs-dropdown-link-hover-color: var(--qd-ink);
  --bs-dropdown-link-hover-bg: var(--qd-hover);
  --bs-dropdown-header-color: var(--qd-ink-2);
  --bs-dropdown-border-radius: 6px;
}

html body .modal-content {
  --bs-modal-bg: var(--qd-surface);
  --bs-modal-color: var(--qd-ink);
  --bs-modal-border-color: var(--qd-rule);
  --bs-modal-border-radius: 8px;
  box-shadow: 0 12px 32px var(--qd-shadow);
}

/* ---------------------------------------------------------------------------
 * Footer (App.svelte): version string and ThemeSwitcher.
 * ------------------------------------------------------------------------- */
#app footer {
  border-top: 1px solid var(--qd-rule);
  font-family: var(--qd-font-mono);
  font-size: 0.75rem;
  color: var(--qd-ink-2);
}

#app footer > span:first-child::before {
  content: "Warpgate ";
}

@media (prefers-reduced-motion: reduce) {
  #app *,
  #app *::before,
  #app *::after {
    transition-duration: 0s !important;
  }
}

:root:root {
  --qd-env-label: "production";
  --qd-env-bg: transparent;
  --qd-env-ink: light-dark(#B8173E, #FF6F86);
  --qd-env-ring: light-dark(#B8173E, #FF6F86);
}