/* =============================================================================
   Theme overrides — matches the design token system used in the other app.
   Load this AFTER volt.css. No templates, SCSS modules, or components need
   to change.

   NOTE: volt.css hardcodes hex values on almost all elements rather than
   consuming its own CSS variables. This file overrides those explicit
   declarations via cascade order (loaded later) and !important where volt.css
   uses !important on utility classes.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Inter variable font — self-hosted
   Requires Inter.var.latin.woff2 and Inter.var.italic.latin.woff2 in
   app/base/static/assets/fonts/.
   ----------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/static/assets/fonts/Inter.var.latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+02BB-02BC, U+2000-206F, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF,
    U+FFFD, U+E06B-E080, U+02E2, U+02B0, U+1D34, U+1D57, U+1D40,
    U+207F, U+1D3A, U+1D48, U+1D30, U+02B3, U+1D3F;
}

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url("/static/assets/fonts/Inter.var.italic.latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+02BB-02BC, U+2000-206F, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF,
    U+FFFD, U+E06B-E080, U+02E2, U+02B0, U+1D34, U+1D57, U+1D40,
    U+207F, U+1D3A, U+1D48, U+1D30, U+02B3, U+1D3F;
}

/* -----------------------------------------------------------------------------
   2. Color scale — raw tokens (space-separated RGB for use with rgb()/rgba())
   ----------------------------------------------------------------------------- */

:root {
  --color-white: 255 255 255;

  --color-gray-0: 250 249 248;
  --color-gray-50: 249 247 246;
  --color-gray-100: 247 245 244;
  --color-gray-200: 238 235 234;
  --color-gray-300: 218 214 213;
  --color-gray-400: 175 172 171;
  --color-gray-500: 112 110 109;
  --color-gray-600: 68 67 66;
  --color-gray-700: 46 45 45;
  --color-gray-800: 35 34 34;
  --color-gray-900: 31 30 30;
  --color-gray-1000: 24 23 23;
  --color-gray-1100: 17 16 16;

  --color-red-0: 255 246 244;
  --color-red-50: 255 211 207;
  --color-red-100: 255 177 171;
  --color-red-200: 246 143 135;
  --color-red-300: 228 108 99;
  --color-red-400: 208 72 65;
  --color-red-500: 178 45 48;
  --color-red-600: 148 8 33;
  --color-red-700: 118 0 18;
  --color-red-800: 90 0 0;
  --color-red-900: 66 0 0;

  --color-yellow-0: 252 249 233;
  --color-yellow-50: 248 229 185;
  --color-yellow-100: 239 192 120;
  --color-yellow-200: 229 153 62;
  --color-yellow-300: 217 121 23;
  --color-yellow-400: 187 85 4;
  --color-yellow-500: 152 55 5;
  --color-yellow-600: 118 43 11;
  --color-yellow-700: 87 31 13;
  --color-yellow-800: 58 22 7;
  --color-yellow-900: 58 22 7;

  --color-orange-0: 255 250 238;
  --color-orange-50: 254 227 192;
  --color-orange-100: 248 184 134;
  --color-orange-200: 245 146 94;
  --color-orange-300: 229 111 74;
  --color-orange-400: 196 76 52;
  --color-orange-500: 158 47 40;
  --color-orange-600: 126 30 35;
  --color-orange-700: 93 22 27;
  --color-orange-800: 66 14 17;
  --color-orange-900: 66 14 17;

  --color-green-0: 239 255 237;
  --color-green-50: 203 244 201;
  --color-green-100: 133 217 150;
  --color-green-200: 51 194 127;
  --color-green-300: 30 166 114;
  --color-green-400: 9 130 93;
  --color-green-500: 14 98 69;
  --color-green-600: 13 75 59;
  --color-green-700: 11 55 51;
  --color-green-800: 8 36 41;
  --color-green-900: 8 36 41;

  --color-blue-0: 240 245 255;
  --color-blue-50: 206 222 253;
  --color-blue-100: 173 199 252;
  --color-blue-200: 133 170 245;
  --color-blue-300: 108 148 236;
  --color-blue-400: 90 130 222;
  --color-blue-500: 75 112 204;
  --color-blue-600: 63 93 179;
  --color-blue-700: 50 73 148;
  --color-blue-800: 37 53 112;
  --color-blue-900: 25 34 74;

  --color-purple-0: 248 237 255;
  --color-purple-50: 239 221 253;
  --color-purple-100: 227 195 250;
  --color-purple-200: 190 143 225;
  --color-purple-300: 174 116 216;
  --color-purple-400: 153 95 195;
  --color-purple-500: 128 82 161;
  --color-purple-600: 103 60 135;
  --color-purple-700: 80 44 107;
  --color-purple-800: 57 28 78;
  --color-purple-900: 39 16 60;

  /* Semantic tokens */
  --color-text-base:                  rgb(var(--color-gray-800) / 1);
  --color-text-muted:                 rgb(var(--color-gray-500) / 1);
  --color-text-disabled:              rgb(var(--color-gray-400) / 1);
  --color-text-primary:               rgb(var(--color-blue-600) / 1);
  --color-text-success:               rgb(var(--color-green-500) / 1);
  --color-text-warning:               rgb(var(--color-yellow-500) / 1);
  --color-text-danger:                rgb(var(--color-red-600) / 1);

  --color-bg-base:                    rgb(var(--color-white) / 1);
  --color-bg-app:                     rgb(var(--color-gray-100) / 1);
  --color-bg-menu-item-hover:         rgb(var(--color-gray-100) / 1);

  --color-border-base:                rgb(var(--color-gray-200) / 1);
  --color-border-focus:               rgb(var(--color-blue-200) / 1);
  --color-border-focus-danger:        rgb(var(--color-red-300) / 1);
  --color-border-interactive:         rgb(var(--color-gray-300) / 1);
  --color-border-interactive-hover:   rgb(var(--color-gray-400) / 1);

  --color-outline-focus:              rgb(var(--color-blue-100) / 1);
  --color-outline-focus-warning:      rgb(var(--color-yellow-100) / 1);
  --color-outline-focus-danger:       rgb(var(--color-red-100) / 1);

  --shadow-sm:      0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl:     0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner:   inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none:    0 0 #0000;
  --shadow-popover: 0 0 0 1px rgba(0,0,0,.03), 0 15px 35px 0 rgba(0,0,0,.1), 0 5px 15px 0 rgba(0,0,0,.08);
  --shadow-dialog:  0 10px 40px rgba(0,0,0,.12), 0 0 16px rgba(0,0,0,.08);
  --shadow-button:  0 1px 1px rgba(0,0,0,.04);
  --shadow-tooltip: 0 0 0 1px rgba(0,0,0,.09), 0 2px 5px rgba(0,0,0,.04);
  --shadow-soft:    0 4px 12px 0 rgba(0,0,0,.03);
  --shadow-form:    0 1px 1px rgba(0,0,0,.04);

  /* Bootstrap variable overrides (for components that do read them) */
  /* --bs-primary (#262B40 navy) is intentionally left unchanged. */
  --bs-font-sans-serif: "Inter", sans-serif;
  --bs-body-font-family: "Inter", sans-serif;
  --bs-secondary:  rgb(var(--color-gray-300));
  --bs-success:    rgb(var(--color-green-400));
  --bs-info:       rgb(var(--color-blue-500));
  --bs-warning:    rgb(var(--color-yellow-300));
  --bs-danger:     rgb(var(--color-red-600));
  --bs-dark:       rgb(var(--color-gray-900));
  --bs-light:      rgb(var(--color-gray-100));
  --bs-white:      rgb(var(--color-white));
  --bs-gray-100:   rgb(var(--color-gray-100));
  --bs-gray-200:   rgb(var(--color-gray-200));
  --bs-gray-300:   rgb(var(--color-gray-300));
  --bs-gray-400:   rgb(var(--color-gray-400));
  --bs-gray-500:   rgb(var(--color-gray-500));
  --bs-gray-600:   rgb(var(--color-gray-600));
  --bs-gray-700:   rgb(var(--color-gray-700));
  --bs-gray-800:   rgb(var(--color-gray-800));
  --bs-body-color: rgb(var(--color-gray-800));
  --bs-body-bg:    rgb(var(--color-white));
}

/* -----------------------------------------------------------------------------
   3. Base typography — explicit overrides (volt.css hardcodes these)
   ----------------------------------------------------------------------------- */

body {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-white));
  letter-spacing: -0.015em;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

hr {
  background-color: rgb(var(--color-gray-400));
}

p, ol li, ul li, .p {
  font-size: inherit;
}

.fw-medium { font-weight: 500; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }
.flex-shrink-0 { flex-shrink: 0; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: rgb(var(--color-gray-800));
  margin-top: 0;
  margin-bottom: 0;
}

h1, .h1 { font-size: 1.875rem; line-height: 2.375rem; }
h2, .h2 { font-size: 1.5rem;   line-height: 2rem; }
h3, .h3 { font-size: 1.25rem;  line-height: 1.75rem; }
h4, .h4 { font-size: 1.125rem; line-height: 1.375rem; }
h5, .h5 { font-size: 1rem;     line-height: 1.5rem; }
h6, .h6 { font-size: 1rem;     line-height: 1.5rem; }

a {
  color: rgb(var(--color-blue-600));
}

a:hover {
  color: rgb(var(--color-blue-700));
}

a.navbar-top-link {
  color: rgb(var(--color-gray-800));
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
}

a.navbar-top-link:hover {
  color: rgb(var(--color-gray-800));
  text-decoration: underline;
}

.navbar-top-link.account-toggle {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  margin-right: -0.5rem;
}

.navbar-top-link.account-toggle:hover {
  background-color: rgb(var(--color-gray-200));
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   4. Buttons — base + sizing + variants
   ----------------------------------------------------------------------------- */

/* default = medium */
.btn {
  border-radius: 0.375rem;
  box-shadow: none;
  min-height: 2.25rem;
  padding: 0.3rem 0.75rem;
  font-size: inherit;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-check:checked + .btn,
.btn-check:active + .btn,
.btn:active,
.btn.active {
  box-shadow: none;
}

.btn-check:checked + .btn:focus,
.btn-check:active + .btn:focus,
.btn:active:focus,
.btn.active:focus {
  box-shadow: none;
}

/* large */
.btn-lg, .btn-group-lg > .btn {
  min-height: 2.5rem;
  padding: 0.3rem 1rem;
  font-size: inherit;
  border-radius: 0.375rem;
}

/* small */
.btn-sm, .btn-group-sm > .btn {
  min-height: 2rem;
  padding: 0.3rem 0.625rem;
  font-size: inherit;
  border-radius: 0.375rem;
}

/* primary filled */
.btn-primary {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-500));
  border-color: rgb(var(--color-blue-500));
  box-shadow: none;
}

.btn-primary:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-600));
  border-color: rgb(var(--color-blue-600));
  box-shadow: none;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary:focus-visible {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-600));
  border-color: rgb(var(--color-blue-600));
  box-shadow: none;
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-700));
  border-color: rgb(var(--color-blue-700));
  box-shadow: none;
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: rgb(var(--color-blue-50));
  background-color: rgb(var(--color-blue-200));
  border-color: rgb(var(--color-blue-200));
  box-shadow: none;
}

/* secondary / base filled */
.btn-secondary {
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-gray-0));
  border-color: rgb(var(--color-gray-300));
  box-shadow: none;
}
a.btn-secondary:hover,
.btn-secondary:hover {
  color: rgb(var(--color-gray-900));
  background-color: rgb(var(--color-gray-100));
  border-color: rgb(var(--color-gray-300));
  box-shadow: none;
}
.btn-check:focus + .btn-secondary,
.btn-secondary:focus,
.btn-secondary:focus-visible {
  color: rgb(var(--color-gray-900));
  background-color: rgb(var(--color-gray-100));
  border-color: rgb(var(--color-gray-300));
  box-shadow: none;
}
.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  color: rgb(var(--color-gray-900));
  background-color: rgb(var(--color-gray-200));
  border-color: rgb(var(--color-gray-300));
  box-shadow: none;
}
.btn-secondary:disabled,
.btn-secondary.disabled {
  color: rgb(var(--color-gray-400));
  background-color: rgb(var(--color-gray-0));
  border-color: rgb(var(--color-gray-200));
  box-shadow: none;
}

/* success (was teal-green → proper green) */
.btn-success {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-green-400));
  border-color: rgb(var(--color-green-400));
}
.btn-success:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-green-500));
  border-color: rgb(var(--color-green-500));
}
.btn-check:focus + .btn-success,
.btn-success:focus {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-green-500));
  border-color: rgb(var(--color-green-500));
}
.btn-check:checked + .btn-success,
.btn-check:active + .btn-success,
.btn-success:active,
.btn-success.active,
.show > .btn-success.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-green-600));
  border-color: rgb(var(--color-green-600));
}
.btn-success:disabled,
.btn-success.disabled {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-green-400));
  border-color: rgb(var(--color-green-400));
}

/* info (was deep navy-blue → medium blue) */
.btn-info {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-500));
  border-color: rgb(var(--color-blue-500));
}
.btn-info:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-600));
  border-color: rgb(var(--color-blue-600));
}
.btn-check:focus + .btn-info,
.btn-info:focus {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-600));
  border-color: rgb(var(--color-blue-600));
}
.btn-check:checked + .btn-info,
.btn-check:active + .btn-info,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-700));
  border-color: rgb(var(--color-blue-700));
}
.btn-info:disabled,
.btn-info.disabled {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-500));
  border-color: rgb(var(--color-blue-500));
}

/* warning (was amber → gold-brown) */
.btn-warning {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-yellow-300));
  border-color: rgb(var(--color-yellow-300));
}
.btn-warning:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-yellow-400));
  border-color: rgb(var(--color-yellow-400));
}
.btn-check:focus + .btn-warning,
.btn-warning:focus {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-yellow-400));
  border-color: rgb(var(--color-yellow-400));
}
.btn-check:checked + .btn-warning,
.btn-check:active + .btn-warning,
.btn-warning:active,
.btn-warning.active,
.show > .btn-warning.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-yellow-500));
  border-color: rgb(var(--color-yellow-500));
}
.btn-warning:disabled,
.btn-warning.disabled {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-yellow-300));
  border-color: rgb(var(--color-yellow-300));
}

/* danger (was bright red → deep red) */
.btn-danger {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-red-600));
  border-color: rgb(var(--color-red-600));
}
.btn-danger:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-red-700));
  border-color: rgb(var(--color-red-700));
}
.btn-check:focus + .btn-danger,
.btn-danger:focus {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-red-700));
  border-color: rgb(var(--color-red-700));
}
.btn-check:checked + .btn-danger,
.btn-check:active + .btn-danger,
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-red-800));
  border-color: rgb(var(--color-red-800));
}
.btn-danger:disabled,
.btn-danger.disabled {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-red-600));
  border-color: rgb(var(--color-red-600));
}

/* -----------------------------------------------------------------------------
   4b. Outline buttons
   ----------------------------------------------------------------------------- */

/* outline-primary */
.btn-outline-primary {
  color: rgb(var(--color-blue-600));
  border-color: rgb(var(--color-blue-300));
  background-color: transparent;
  box-shadow: none;
}
.btn-outline-primary:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-500));
  border-color: rgb(var(--color-blue-500));
  box-shadow: none;
}
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
  color: rgb(var(--color-blue-600));
  border-color: rgb(var(--color-blue-300));
  box-shadow: 0 0 0 0.2rem rgb(var(--color-blue-100) / 0.5);
}
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-600));
  border-color: rgb(var(--color-blue-600));
  box-shadow: none;
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: rgb(var(--color-blue-200));
  border-color: rgb(var(--color-blue-200));
  background-color: transparent;
  box-shadow: none;
}

/* outline-secondary */
.btn-outline-secondary {
  color: rgb(var(--color-gray-600));
  border-color: rgb(var(--color-gray-300));
  background-color: transparent;
  box-shadow: none;
}
.btn-outline-secondary:hover {
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-gray-100));
  border-color: rgb(var(--color-gray-300));
  box-shadow: none;
}
.btn-check:focus + .btn-outline-secondary,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
  color: rgb(var(--color-gray-600));
  border-color: rgb(var(--color-gray-300));
  box-shadow: 0 0 0 0.2rem rgb(var(--color-gray-200) / 0.5);
}
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: rgb(var(--color-gray-900));
  background-color: rgb(var(--color-gray-200));
  border-color: rgb(var(--color-gray-300));
  box-shadow: none;
}
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  color: rgb(var(--color-gray-400));
  border-color: rgb(var(--color-gray-200));
  background-color: transparent;
  box-shadow: none;
}

/* outline-success */
.btn-outline-success {
  color: rgb(var(--color-green-500));
  border-color: rgb(var(--color-green-300));
  background-color: transparent;
  box-shadow: none;
}
.btn-outline-success:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-green-400));
  border-color: rgb(var(--color-green-400));
  box-shadow: none;
}
.btn-check:checked + .btn-outline-success,
.btn-check:active + .btn-outline-success,
.btn-outline-success:active,
.btn-outline-success.active,
.show > .btn-outline-success.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-green-500));
  border-color: rgb(var(--color-green-500));
  box-shadow: none;
}
.btn-outline-success:disabled,
.btn-outline-success.disabled {
  color: rgb(var(--color-green-200));
  border-color: rgb(var(--color-green-200));
  background-color: transparent;
  box-shadow: none;
}

/* outline-info */
.btn-outline-info {
  color: rgb(var(--color-blue-500));
  border-color: rgb(var(--color-blue-300));
  background-color: transparent;
  box-shadow: none;
}
.btn-outline-info:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-500));
  border-color: rgb(var(--color-blue-500));
  box-shadow: none;
}
.btn-check:checked + .btn-outline-info,
.btn-check:active + .btn-outline-info,
.btn-outline-info:active,
.btn-outline-info.active,
.show > .btn-outline-info.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-600));
  border-color: rgb(var(--color-blue-600));
  box-shadow: none;
}
.btn-outline-info:disabled,
.btn-outline-info.disabled {
  color: rgb(var(--color-blue-200));
  border-color: rgb(var(--color-blue-200));
  background-color: transparent;
  box-shadow: none;
}

/* outline-warning */
.btn-outline-warning {
  color: rgb(var(--color-yellow-400));
  border-color: rgb(var(--color-yellow-200));
  background-color: transparent;
  box-shadow: none;
}
.btn-outline-warning:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-yellow-300));
  border-color: rgb(var(--color-yellow-300));
  box-shadow: none;
}
.btn-check:checked + .btn-outline-warning,
.btn-check:active + .btn-outline-warning,
.btn-outline-warning:active,
.btn-outline-warning.active,
.show > .btn-outline-warning.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-yellow-400));
  border-color: rgb(var(--color-yellow-400));
  box-shadow: none;
}
.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
  color: rgb(var(--color-yellow-100));
  border-color: rgb(var(--color-yellow-100));
  background-color: transparent;
  box-shadow: none;
}

/* outline-danger */
.btn-outline-danger {
  color: rgb(var(--color-red-600));
  border-color: rgb(var(--color-red-300));
  background-color: transparent;
  box-shadow: none;
}
.btn-outline-danger:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-red-600));
  border-color: rgb(var(--color-red-600));
  box-shadow: none;
}
.btn-check:checked + .btn-outline-danger,
.btn-check:active + .btn-outline-danger,
.btn-outline-danger:active,
.btn-outline-danger.active,
.show > .btn-outline-danger.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-red-700));
  border-color: rgb(var(--color-red-700));
  box-shadow: none;
}
.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
  color: rgb(var(--color-red-200));
  border-color: rgb(var(--color-red-200));
  background-color: transparent;
  box-shadow: none;
}

/* bare .btn-outline (used in chart action toggles) */
.btn-outline {
  color: rgb(var(--color-gray-500));
  border: 1px solid rgb(var(--color-gray-200));
  background-color: transparent;
}
.btn-outline:hover {
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-gray-100));
  border-color: rgb(var(--color-gray-200));
}
.btn-outline.active {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-gray-800));
  border-color: rgb(var(--color-gray-800));
}

/* -----------------------------------------------------------------------------
   5. Text utilities (!important to override volt.css !important declarations)
   ----------------------------------------------------------------------------- */

.text-secondary { color: rgb(var(--color-gray-500)) !important; }
.text-success   { color: rgb(var(--color-green-400)) !important; }
.text-info      { color: rgb(var(--color-blue-500)) !important; }
.text-warning   { color: rgb(var(--color-yellow-300)) !important; }
.text-danger    { color: rgb(var(--color-red-600)) !important; }
.text-muted     { color: rgb(var(--color-gray-500)) !important; }
.text-light     { color: rgb(var(--color-gray-100)) !important; }
.text-dark      { color: rgb(var(--color-gray-800)) !important; }
.text-gray      { color: rgb(var(--color-gray-500)) !important; }
.text-blue      { color: rgb(var(--color-blue-600)) !important; }

/* -----------------------------------------------------------------------------
   6. Background utilities (!important to override volt.css !important)
   ----------------------------------------------------------------------------- */

.bg-secondary { background-color: rgb(var(--color-gray-300)) !important; }
.bg-success   { background-color: rgb(var(--color-green-400)) !important; }
.bg-info      { background-color: rgb(var(--color-blue-500)) !important; }
.bg-warning   { background-color: rgb(var(--color-yellow-300)) !important; }
.bg-danger    { background-color: rgb(var(--color-red-600)) !important; }
.bg-light     { background-color: rgb(var(--color-gray-200)) !important; }
.bg-dark      { background-color: rgb(var(--color-gray-900)) !important; }
.bg-gray-100  { background-color: rgb(var(--color-gray-100)) !important; }
.bg-gray-200  { background-color: rgb(var(--color-gray-200)) !important; }
.bg-gray-300  { background-color: rgb(var(--color-gray-300)) !important; }
.bg-gray-400  { background-color: rgb(var(--color-gray-400)) !important; }
.bg-gray-500  { background-color: rgb(var(--color-gray-500)) !important; }
.bg-gray-600  { background-color: rgb(var(--color-gray-600)) !important; }
.bg-gray-700  { background-color: rgb(var(--color-gray-700)) !important; }
.bg-gray-800  { background-color: rgb(var(--color-gray-800)) !important; }
.bg-blue-100  { background-color: rgb(var(--color-blue-100)) !important; }
.bg-blue-200  { background-color: rgb(var(--color-blue-200)) !important; }
.bg-blue-300  { background-color: rgb(var(--color-blue-300)) !important; }
.bg-blue-400  { background-color: rgb(var(--color-blue-400)) !important; }
.bg-blue-500  { background-color: rgb(var(--color-blue-500)) !important; }
.bg-blue-600  { background-color: rgb(var(--color-blue-600)) !important; }
.bg-blue-700  { background-color: rgb(var(--color-blue-700)) !important; }

/* -----------------------------------------------------------------------------
   7. Border utilities (!important to override volt.css !important)
   ----------------------------------------------------------------------------- */

.border           { border-color: var(--color-border-base) !important; }
.border-secondary { border-color: rgb(var(--color-gray-300)) !important; }
.border-success   { border-color: rgb(var(--color-green-400)) !important; }
.border-info      { border-color: rgb(var(--color-blue-500)) !important; }
.border-warning   { border-color: rgb(var(--color-yellow-300)) !important; }
.border-danger    { border-color: rgb(var(--color-red-600)) !important; }
.border-light     { border-color: rgb(var(--color-gray-200)) !important; }

/* -----------------------------------------------------------------------------
   8. Alert components
   ----------------------------------------------------------------------------- */

.alert-success {
  color: rgb(var(--color-green-700));
  background-color: rgb(var(--color-green-0));
  border-color: rgb(var(--color-green-100));
}
.alert-success .alert-link { color: rgb(var(--color-green-800)); }

.alert-info {
  color: rgb(var(--color-blue-800));
  background-color: rgb(var(--color-blue-0));
  border-color: rgb(var(--color-blue-200));
}
.alert-info .alert-link { color: rgb(var(--color-blue-900)); }

.alert-warning {
  color: rgb(var(--color-yellow-700));
  background-color: rgb(var(--color-yellow-0));
  border-color: rgb(var(--color-yellow-200));
}
.alert-warning .alert-link { color: rgb(var(--color-yellow-800)); }

.alert-danger {
  color: rgb(var(--color-red-700));
  background-color: rgb(var(--color-red-0));
  border-color: rgb(var(--color-red-200));
}
.alert-danger .alert-link { color: rgb(var(--color-red-800)); }

.icon-shape-blue {
  color: rgb(var(--color-blue-600));
  background-color: rgb(var(--color-blue-0));
}

.icon-shape-soft-green { background-color: rgb(var(--color-green-0)); }
.icon-shape-gray-700 { background-color: rgb(var(--color-gray-0)); }
.icon-shape-secondary { background-color: rgb(var(--color-yellow-0)); }

.icon-shape {
  height: 3.5rem;
  width: 3.5rem;
}

.icon-shape span {
  font-size: 1.75rem;
}

.badge {
  padding: 0.1rem 0.3rem;
  font-weight: 500;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  vertical-align: middle;
}

/* Status circle indicators */
.status-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  vertical-align: top;
  flex-shrink: 0;
  margin-right: 6px;
}
.status-circle-success {
  background-color: rgb(var(--color-green-300));
  color: rgb(var(--color-white));
}
.status-circle-danger {
  background-color: rgb(var(--color-red-400));
  color: rgb(var(--color-white));
}
.status-circle-warning {
  background-color: rgb(var(--color-yellow-100));
  color: rgb(var(--color-white));
}
.status-circle-error {
  background-color: rgb(var(--color-red-600));
  color: rgb(var(--color-white));
}

.card {
  border-color: rgb(var(--color-gray-200));
}

.card-body {
  padding: 1rem;
}

.card-header {
  padding: 1rem;
  background-color: rgb(var(--color-white));
  border-bottom-color: rgb(var(--color-gray-200));
}

.card-footer {
  padding: 1rem;
  background-color: transparent;
  border-top-color: rgb(var(--color-gray-200));
}

/* -----------------------------------------------------------------------------
   Tables
   ----------------------------------------------------------------------------- */

.table {
  color: rgb(var(--color-gray-800));
  border-color: rgb(var(--color-gray-200));
  --bs-table-striped-color: rgb(var(--color-gray-800));
  --bs-table-striped-bg: rgb(var(--color-gray-50) / 0.5);
  --bs-table-active-color: rgb(var(--color-gray-800));
  --bs-table-active-bg: rgb(var(--color-gray-100));
  --bs-table-hover-color: rgb(var(--color-gray-800));
  --bs-table-hover-bg: rgb(var(--color-gray-50));
}

.table > :not(caption) > * > * {
  border-bottom-color: rgb(var(--color-gray-200));
}

.table > :not(:last-child) > :last-child > * {
  border-bottom-color: rgb(var(--color-gray-200));
}

.table > thead,
.table thead th {
  color: rgb(var(--color-gray-500));
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table td,
.table tbody th {
  color: rgb(var(--color-gray-800));
  font-weight: inherit;
}

.table .thead-light th {
  background-color: rgb(var(--color-white));
  color: rgb(var(--color-gray-500));
}

.table .thead-light th a {
  color: rgb(var(--color-gray-500));
}

/* Edge-to-edge tables: remove card-body padding so the table fills the full card width */
.card-body:has(> .table),
.card-body:has(> .table-responsive),
.card-body:has(> .table-wrapper) {
  padding: 0 !important;
}

/* Restore horizontal padding for non-table siblings (e.g. search bars, filter rows) */
.card-body:has(> .table) > :not(.table):not(.table-responsive):not(.table-wrapper),
.card-body:has(> .table-responsive) > :not(.table):not(.table-responsive):not(.table-wrapper),
.card-body:has(> .table-wrapper) > :not(.table):not(.table-responsive):not(.table-wrapper) {
  padding-left: 1rem;
  padding-right: 1rem;
}

.card .table td,
.card .table th {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Remove last row border when table is flush inside a card */
.card .table tbody tr:last-child td,
.card .table tbody tr:last-child th {
  border-bottom: 0;
}

.table a {
  text-decoration: none;
  color: var(--color-text-base);
}

.table a.btn-outline-info {
  color: rgb(var(--color-blue-500));
  text-decoration: none;
}

.table a.btn-outline-info:hover {
  color: rgb(var(--color-white));
  text-decoration: none;
}

.table a.btn {
  text-decoration: none;
}

.table a:hover {
  color: var(--color-text-base);
}

a.card-link {
  text-decoration: none;
  color: inherit;
}

a.card-link .card {
  transition: border-color 0.15s ease;
}

a.card-link:hover {
  color: inherit;
}

a.card-link:hover .card {
  border-color: rgb(var(--color-gray-300)) !important;
}

/* -----------------------------------------------------------------------------
   9. Dropdowns
   ----------------------------------------------------------------------------- */

/* Toggle button — match input/button height and grays */
.dropdown-toggle {
  height: 2.25rem;
  font-size: inherit;
  border-radius: 0.375rem;
}

.dropdown-toggle.btn-lg,
.btn-group-lg > .dropdown-toggle {
  height: 2.5rem;
}

.dropdown-toggle.btn-sm,
.btn-group-sm > .dropdown-toggle {
  height: 2rem;
}

/* Panel */
.dropdown-menu {
  font-size: 0.875rem;
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-white));
  border: none;
  box-shadow: var(--shadow-popover);
  border-radius: 0.375rem;
  padding: 0.25rem;
}

.dropdown-menu .dropdown-item {
  color: rgb(var(--color-gray-800));
  border-radius: 0.25rem;
  padding: 0.375rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: rgb(var(--color-gray-900));
  background-color: rgb(var(--color-gray-100));
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  color: rgb(var(--color-gray-900));
  background-color: rgb(var(--color-gray-200));
}

.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item:disabled {
  color: rgb(var(--color-gray-400));
}

.dropdown-menu .dropdown-item.text-danger {
  color: rgb(var(--color-red-600)) !important;
}

.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus {
  background-color: rgb(var(--color-red-0));
}

.dropdown-menu .dropdown-divider {
  border-color: rgb(var(--color-gray-200));
  margin: 0.25rem 0;
}

.dropdown-menu span {
  width: 1rem;
  text-align: center;
}

.dropdown-header {
  color: rgb(var(--color-gray-500));
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.375rem 0.5rem;
}

.dropdown-item-text {
  color: rgb(var(--color-gray-500));
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem;
}

/* -----------------------------------------------------------------------------
   Choices.js select — belt-and-suspenders override
   (main styles in vite/src/assets/scss/choices.scss, duplicated here
   for pages where the Vite bundle may not load)
   ----------------------------------------------------------------------------- */

.choices__inner {
  min-height: 2.25rem !important;
  padding: 2.5px 0.75rem 0 !important;
  font-size: inherit !important;
  color: rgb(var(--color-gray-800)) !important;
  background-color: rgb(var(--color-white)) !important;
  border-color: rgb(var(--color-gray-300)) !important;
  border-radius: 0.375rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
  overflow: hidden !important;
}

.choices__list--single {
  padding: 0 !important;
}

.choices[data-type*="select-one"] .choices__inner {
  height: 2.25rem !important;
  display: flex !important;
  align-items: center !important;
}

.input-group .choices .choices__inner {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.choices__input {
  margin-bottom: 0 !important;
}

/* -----------------------------------------------------------------------------
   10. Sidebar — remap nav colors to the override gray scale
   ----------------------------------------------------------------------------- */

.nav-link {
  padding: 0 0.75rem;
  height: 2.5rem;
}

.sidebar {
  flex-direction: column;
}

@media (max-width: 767.98px) {
  .sidebar {
    display: none !important;
  }
  .sidebar.sidebar-open {
    display: flex !important;
    animation: sidebar-reveal 0.15s ease-out;
    overflow-y: auto;
    top: var(--mobile-nav-height, 3rem);
  }
  .sidebar .user-card {
    display: none !important;
  }
  .sidebar .nav-item .nav-link.logo {
    display: none !important;
  }
  body:has(.sidebar.sidebar-open) {
    overflow: hidden;
  }
}

@keyframes sidebar-reveal {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .sidebar {
    display: flex !important;
  }
}

.sidebar .nav-item {
  margin-bottom: 0;
}

.sidebar hr {
  margin: 1rem 1rem;
}

.sidebar .nav-item .nav-link {
  color: rgb(var(--color-gray-200));
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-radius: 0.375rem;
}

.sidebar .nav-item .nav-link:hover {
  background-color: rgb(var(--color-gray-700));
}

.sidebar .nav-item.active > .nav-link,
.sidebar .nav-item.active > .nav-link:hover {
  color: rgb(var(--color-gray-100));
  background-color: rgb(var(--color-gray-600) / 0.5);
}

.sidebar .nav-link {
  font-size: inherit;
  vertical-align: unset;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
}

.sidebar .nav-link .sidebar-icon {
  color: rgb(var(--color-gray-400));
  margin-right: 0;
}

.sidebar .nav-link.active {
  color: rgb(var(--color-gray-100));
}

/* Sidebar org select & single-org display */
.sidebar .sidebar-orgs .single-org {
  background-color: rgb(var(--color-gray-700)) !important;
  border-color: rgb(var(--color-gray-600)) !important;
  color: rgb(var(--color-gray-100));
}

.sidebar .sidebar-orgs .form-select {
  background-color: rgb(var(--color-gray-700)) !important;
  border-color: rgb(var(--color-gray-600)) !important;
  color: rgb(var(--color-gray-100)) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23afacab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

.sidebar .sidebar-orgs .form-select:focus {
  border-color: rgb(var(--color-gray-500)) !important;
  box-shadow: 0 0 0 0.2rem rgb(var(--color-gray-600) / 0.5);
}

.sidebar .sidebar-orgs .form-select:disabled {
  color: rgb(var(--color-gray-400)) !important;
  background-color: rgb(var(--color-gray-800)) !important;
}

.sidebar .sidebar-orgs .form-select option {
  background-color: rgb(var(--color-gray-800));
  color: rgb(var(--color-gray-100));
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.sidebar .sidebar-sticky {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.sidebar .sidebar-sticky > .nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sidebar .btn-join-slack:hover {
  background-color: rgb(var(--color-gray-700));
}

.navbar.mobile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 101;
}

.navbar.mobile .navbar-brand {
  margin-right: 0;
  display: flex;
  min-width: 10rem;
  flex: 1 1 0%;
  overflow: hidden;
  white-space: normal;
}

.navbar.mobile .navbar-brand img {
  max-width: 15rem;
  width: 100%;
  display: block;
}

.navbar-toggler {
  border: none;
  margin-right: 0;
  flex-shrink: 1;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.navbar-toggler:hover {
  background-color: rgb(var(--color-gray-700));
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler:focus-visible {
  box-shadow: 0 0 0 0.2rem;
}

.navbar-toggler-icon {
  width: 1.5rem;
}

/* -----------------------------------------------------------------------------
   Form inputs
   ----------------------------------------------------------------------------- */

.form-control {
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  font-size: inherit;
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-white));
  border-color: rgb(var(--color-gray-300));
  border-radius: 0.375rem;
  box-shadow: none;
}

.form-control:focus {
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-white));
  border-color: rgb(var(--color-blue-300));
  box-shadow: 0 0 0 0.2rem rgb(var(--color-blue-100) / 0.5);
}

.form-control::placeholder {
  color: rgb(var(--color-gray-400));
}

.form-control:disabled,
.form-control[readonly] {
  color: rgb(var(--color-gray-400));
  background-color: rgb(var(--color-gray-100));
  border-color: rgb(var(--color-gray-200));
}

textarea.form-control {
  height: auto;
  min-height: 2.25rem;
}

.form-control-lg {
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0 1rem;
}

.form-control-sm {
  height: 2rem;
  min-height: 2rem;
  padding: 0 0.625rem;
}

.form-select {
  height: 2.25rem;
  padding: 0 1.75rem 0 0.75rem;
  font-size: inherit;
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-white));
  border-color: rgb(var(--color-gray-300));
  border-radius: 0.375rem;
  box-shadow: none;
}

.form-select:focus {
  border-color: rgb(var(--color-blue-300));
  box-shadow: 0 0 0 0.2rem rgb(var(--color-blue-100) / 0.5);
}

.form-select:disabled {
  color: rgb(var(--color-gray-400));
  background-color: rgb(var(--color-gray-100));
  border-color: rgb(var(--color-gray-200));
}

.form-select-lg {
  height: 2.5rem;
  padding: 0 1.75rem 0 1rem;
}

.form-select-sm {
  height: 2rem;
  padding: 0 1.75rem 0 0.625rem;
}

.input-group-text {
  min-height: 2.25rem;
  padding: 0 0.75rem;
  font-size: inherit;
  color: rgb(var(--color-gray-500));
  background-color: rgb(var(--color-gray-100));
  border-color: rgb(var(--color-gray-300));
  border-radius: 0.375rem;
}

/* Give the placeholder/value some breathing room when a text addon
   (icon or prefix) sits flush against the input on either side. */
.input-group > .input-group-text + .form-control,
.input-group > .input-group-text + .form-select {
  padding-left: 0.8125rem;
}
.input-group > .form-control:has(+ .input-group-text),
.input-group > .form-select:has(+ .input-group-text) {
  padding-right: 0.8125rem;
}

.form-label {
  color: rgb(var(--color-gray-600));
  font-weight: 500;
  font-size: 0.875rem;
}

/* -----------------------------------------------------------------------------
   Nav pills
   ----------------------------------------------------------------------------- */

.nav-pills .nav-item {
  margin-bottom: 0;
}

.nav-pills .nav-link {
  color: rgb(var(--color-gray-600));
  border: 1px solid rgb(var(--color-gray-300));
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  font-size: inherit;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s ease;
}

.nav-pills .nav-link:hover {
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-gray-100));
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-white));
  border-color: rgb(var(--color-gray-800));
  box-shadow: none;
}

/* Override volt.css's orange hover/active color on generic nav-links */
.nav-link:hover,
.nav-link.active {
  color: rgb(var(--color-gray-900));
}

/* Nav-tabs — underline style */
.nav-tabs {
  border-bottom-color: var(--color-border-base);
}
.nav-tabs .nav-link {
  height: auto;
  color: rgb(var(--color-gray-600));
  background-color: transparent;
  border: 0;
  border-radius: 0;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: rgb(var(--color-gray-600));
  background-color: transparent;
  border: 0;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-blue-500));
  border: 0;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

/* -----------------------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------------------- */

.page-link {
  color: rgb(var(--color-gray-800));
  background-color: rgb(var(--color-white));
  border-color: rgb(var(--color-gray-200));
}

.page-link:hover {
  color: rgb(var(--color-gray-900));
  background-color: rgb(var(--color-gray-100));
  border-color: rgb(var(--color-gray-200));
}

.page-link:focus {
  color: rgb(var(--color-gray-900));
  box-shadow: 0 0 0 0.2rem rgb(var(--color-blue-100) / 0.5);
}

.page-item.active .page-link {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-gray-800));
  border-color: rgb(var(--color-gray-800));
}

.page-item.disabled .page-link {
  color: rgb(var(--color-gray-400));
  background-color: rgb(var(--color-white));
  border-color: rgb(var(--color-gray-200));
}

/* -----------------------------------------------------------------------------
   Breadcrumbs
   ----------------------------------------------------------------------------- */

.breadcrumb-dark li.breadcrumb-item a,
.breadcrumb-dark li.breadcrumb-item,
.breadcrumb-dark li.breadcrumb-item.active {
  color: rgb(var(--color-gray-500));
}

.breadcrumb-dark li.breadcrumb-item a:hover {
  color: rgb(var(--color-gray-700));
}

.breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before {
  color: rgb(var(--color-gray-400));
}

/* -----------------------------------------------------------------------------
   Button group toggle — outline style (matches chart-actions .btn-outline)
   ----------------------------------------------------------------------------- */

.btn-group-toggle .btn {
  border: 1px solid rgb(var(--color-gray-300));
  background: rgb(var(--color-white));
  color: rgb(var(--color-gray-500));
  transition: all 0.15s ease;
}

.btn-group-toggle .btn:hover {
  background-color: rgb(var(--color-gray-100));
  color: rgb(var(--color-gray-800));
}

.btn-group-toggle .btn.active {
  background-color: rgb(var(--color-gray-800));
  border-color: rgb(var(--color-gray-800));
  color: rgb(var(--color-white));
}

/* -----------------------------------------------------------------------------
   Autocreation rules — search input icon
   ----------------------------------------------------------------------------- */

.autocreation-rules .input-group-text {
  background-color: rgb(var(--color-white));
}

/* -----------------------------------------------------------------------------
   Icon spacing inside nav pills and buttons
   ----------------------------------------------------------------------------- */

.nav-pills .nav-link > span[class*="fa"],
.nav-pills .nav-link > i[class*="fa"],
.nav-pills .nav-link > iconify-icon,
.btn > span[class*="fa"],
.btn > i[class*="fa"],
.btn > iconify-icon {
  margin-right: 0.5rem;
}

.nav-pills .nav-link > iconify-icon[icon*="doc-on-clipboard"],
.btn > iconify-icon[icon*="doc-on-clipboard"] {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Icon-only buttons: override the above rule. Add .btn-icon to a button
   whose only content is an icon. */
.btn-icon > span[class*="fa"],
.btn-icon > i[class*="fa"],
.btn-icon > iconify-icon {
  margin: 0;
}

.sidebar .nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Restore full card radius after nav-pills — volt.css strips the top
   corners assuming attached tabs, but pills are detached. */
.nav-wrapper:has(.nav-pills) + .card {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

/* Nav-pills: use gap instead of per-item right padding */
.nav-pills {
  gap: 1rem;
}
.nav-pills .nav-item:not(:last-child) {
  padding-right: 0;
}

/* When nav-pills stacks vertically (flex-column at narrow widths),
   drop the per-link margin-bottom utility and let each pill span full width. */
@media (max-width: 767.98px) {
  .nav-pills.flex-column .nav-item {
    width: 100%;
  }
  .nav-pills.flex-column .nav-link {
    width: 100%;
    margin-bottom: 0 !important;
  }
}

/* -----------------------------------------------------------------------------
   Info grid — label/value layout (replaces tables-used-for-layout)
   ----------------------------------------------------------------------------- */

.info-grid {
  display: flex;
  flex-direction: column;
}
.info-row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 1rem;
  padding: 0.625rem 0;
  align-items: start;
}
.info-row + .info-row {
  border-top: 1px solid var(--color-border-base);
}
.info-label {
  font-weight: 500;
  color: rgb(var(--color-gray-700));
}
.info-value {
  min-width: 0;
  word-break: break-word;
}
.info-value:empty::before {
  content: "—";
  color: var(--color-text-disabled);
}
@media (max-width: 575.98px) {
  .info-row {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }
  .info-label {
    font-size: 0.875rem;
    color: rgb(var(--color-gray-600));
  }
}

/* Stacked label-above-value cells flowing in a responsive grid —
   alternative to .info-grid for dashboard-style displays. */
.info-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem 2rem;
}
.info-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.info-cells .info-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--color-gray-600));
}
.info-cells .info-value {
  font-size: 1rem;
  min-width: 0;
  word-break: break-word;
}