/* Push Service Theme — CSS custom properties
 * Generated by dark-mode-colors.py + dark-mode-vendor.py (oklch color analysis)
 *
 * Light mode = original hex values (zero visual change)
 * Dark mode  = oklch lightness remap: dark_L = 0.90 - 0.75 * L
 *
 * Structure:
 *   1. :root        — light mode variables (push service + vendor)
 *   2. @media dark  — dark mode variables + structural-only overrides
 *   3. Vendor overrides — both-mode selector rules using var() + !important
 */

/* ===== 1. Light mode variables ===== */

:root {
  /* --- Push service (main.css / form.css) --- */
  --surface: #ffffff;
  --page-bg: #efefef;
  --search-bg: #eeeeee;
  --menu-hover-bg: #eff4fa;
  --portlet-content-bg: #effdff;
  --portlet-header-bg: #b7d6e7;
  --link-hover-bg: #80cfff;
  --error-input-bg: #ffeeee;
  --flash-error-bg: #fbe3e4;
  --flash-notice-bg: #fff6bf;
  --flash-success-bg: #e6efc2;
  --text-muted: #999999;
  --link-text: #0066a4;
  --menu-hover-text: #6399cd;
  --portlet-title: #298dcd;
  --error-text-strong: #ff0000;
  --error-border: #cc0000;
  --flash-error-text: #8a1f11;
  --flash-notice-text: #514721;
  --flash-success-text: #264409;
  --border-light: #dddddd;
  --accent-border: #c9e0ed;
  --portlet-header-border: #6faccf;
  --flash-error-border: #fbc2c4;
  --flash-notice-border: #ffd324;
  --flash-success-border: #c6d880;

  /* --- Bootstrap 2.1.1 vendor colors --- */
  --bs-white: #ffffff;
  --bs-table-stripe: #f9f9f9;
  --bs-code-bg: #f7f7f9;
  --bs-gray-lighter: #f5f5f5;
  --bs-navbar-bg-start: #fafafa;
  --bs-navbar-bg-end: #f2f2f2;
  --bs-gray-light: #eeeeee;
  --bs-btn-hover-bg: #e6e6e6;
  --bs-divider: #e5e5e5;
  --bs-well-border: #e3e3e3;
  --bs-code-border: #e1e1e8;
  --bs-border: #dddddd;
  --bs-btn-active-border: #d9d9d9;
  --bs-navbar-border: #d4d4d4;
  --bs-input-border: #cccccc;
  --bs-muted: #999999;
  --bs-navbar-text: #777777;
  --bs-text: #555555;
  --bs-body-text: #333333;
  --bs-navbar-inv-bg: #252525;
  --bs-btn-inv-active: #222222;
  --bs-navbar-inv-border: #1b1b1b;
  --bs-btn-inv-hover: #151515;
  --bs-navbar-inv-divider: #111111;
  --bs-navbar-inv-btn: #0e0e0e;
  --bs-btn-inv-active-bg: #080808;
  --bs-navbar-inv-btn-bg: #040404;
  --bs-black: #000000;
  --bs-primary: #0088cc;
  --bs-link-hover: #005580;
  --bs-primary-hover: #0081c2;
  --bs-btn-primary: #006dcc;
  --bs-btn-primary-active: #0044cc;
  --bs-btn-primary-hover: #003bb3;
  --bs-btn-primary-pressed: #003399;
  --bs-btn-primary-border: #002a80;
  --bs-btn-danger: #da4f49;
  --bs-btn-danger-hover: #bd362f;
  --bs-btn-danger-active: #942a25;
  --bs-btn-danger-border: #802420;
  --bs-alert-error-text: #b94a48;
  --bs-alert-error-bg: #f2dede;
  --bs-alert-error-border: #eed3d7;
  --bs-btn-success: #5bb75b;
  --bs-btn-success-hover: #51a351;
  --bs-btn-success-active: #408140;
  --bs-btn-success-border: #387038;
  --bs-alert-success-text: #468847;
  --bs-alert-success-bg: #dff0d8;
  --bs-alert-success-border: #d6e9c6;
  --bs-btn-warning: #faa732;
  --bs-btn-warning-hover: #df8505;
  --bs-btn-warning-active: #c67605;
  --bs-btn-warning-border: #ad6704;
  --bs-warning: #f89406;
  --bs-alert-text: #c09853;
  --bs-alert-bg: #fcf8e3;
  --bs-alert-border: #fbeed5;
  --bs-btn-info: #49afcd;
  --bs-btn-info-hover: #2f96b4;
  --bs-btn-info-active: #24748c;
  --bs-btn-info-border: #1f6377;
  --bs-alert-info-text: #3a87ad;
  --bs-alert-info-bg: #d9edf7;
  --bs-alert-info-border: #bce8f1;
  --bs-btn-inv: #363636;
  --bs-code-text: #dd1144;

  /* --- Blueprint vendor colors --- */
  --bp-heading: #111111;
  --bp-quiet: #666666;
  --bp-link: #0066cc;
  --bp-link-hover: #0099ff;
  --bp-thead-bg: #c3d9ff;
  --bp-box-bg: #e5ecf9;
  --bp-loud: #000000;
  --bp-highlight: #ffff00;
}

/* ===== 2. Dark mode ===== */

/* Dark variable values — used by both explicit [data-theme="dark"]
   and system-preference [data-theme="system"] selectors.
   Duplicated under two selectors so users can override OS preference. */

[data-theme="dark"] {
    /* --- Push service dark values --- */
    --surface: #0b0b0b;
    --page-bg: #131313;
    --search-bg: #131313;
    --menu-hover-bg: #0e1115;
    --portlet-content-bg: #061011;
    --portlet-header-bg: #0b2633;
    --link-hover-bg: #002e44;
    --error-input-bg: #190e0e;
    --flash-error-bg: #201112;
    --flash-notice-bg: #141100;
    --flash-success-bg: #151800;
    --text-muted: #676767;
    --link-text: #1a8fd4;
    --menu-hover-text: #004a7f;
    --portlet-title: #005786;
    --error-text-strong: #d44040;
    --error-border: #bd0000;
    --flash-error-text: #cc4c39;
    --flash-notice-text: #8d8052;
    --flash-success-text: #729955;
    --border-light: #3d3d3d;
    --accent-border: #0d1f29;
    --portlet-header-border: #004360;
    --flash-error-border: #3b1217;
    --flash-notice-border: #271e00;
    --flash-success-border: #222800;

    /* --- Bootstrap vendor dark values --- */
    --bs-white: #0b0b0b;
    --bs-table-stripe: #0e0e0e;
    --bs-code-bg: #100e0f;
    --bs-gray-lighter: #101010;
    --bs-navbar-bg-start: #0d0d0d;
    --bs-navbar-bg-end: #111111;
    --bs-gray-light: #131313;
    --bs-btn-hover-bg: #171717;
    --bs-divider: #353535;
    --bs-well-border: #454545;
    --bs-code-border: #19191e;
    --bs-border: #434343;
    --bs-btn-active-border: #3d3d3d;
    --bs-navbar-border: #3d3d3d;
    --bs-input-border: #494949;
    --bs-muted: #a0a0a0;
    --bs-navbar-text: #878787;
    --bs-text: #d2d2d2;
    --bs-body-text: #f1f1f1;
    --bs-navbar-inv-bg: #1e1e1e;
    --bs-btn-inv-active: #1a1a1a;
    --bs-navbar-inv-border: #141414;
    --bs-btn-inv-hover: #2a2a2a;
    --bs-navbar-inv-divider: #0e0e0e;
    --bs-navbar-inv-btn: #0c0c0c;
    --bs-btn-inv-active-bg: #080808;
    --bs-navbar-inv-btn-bg: #040404;
    --bs-black: #000000;
    --bs-primary: #3aa3e0;
    --bs-link-hover: #6dbde8;
    --bs-primary-hover: #2098d8;
    --bs-btn-primary: #0061b8;
    --bs-btn-primary-active: #1763ff;
    --bs-btn-primary-hover: #2c71ff;
    --bs-btn-primary-pressed: #3f7ffc;
    --bs-btn-primary-border: #538cf9;
    --bs-btn-danger: #b32325;
    --bs-btn-danger-hover: #c13331;
    --bs-btn-danger-active: #cf413d;
    --bs-btn-danger-border: #952020;
    --bs-alert-error-text: #a8262c;
    --bs-alert-error-bg: #221515;
    --bs-alert-error-border: #2a171b;
    --bs-btn-success: #157f1f;
    --bs-btn-success-hover: #278b2c;
    --bs-btn-success-active: #369739;
    --bs-btn-success-border: #176a1d;
    --bs-alert-success-text: #1c6f22;
    --bs-alert-success-bg: #0e1908;
    --bs-alert-success-border: #111e04;
    --bs-btn-warning: #915200;
    --bs-btn-warning-hover: #9e5e00;
    --bs-btn-warning-active: #aa6a00;
    --bs-btn-warning-border: #784500;
    --bs-warning: #915200;
    --bs-alert-text: #563b00;
    --bs-alert-bg: #120f02;
    --bs-alert-border: #1a1101;
    --bs-btn-info: #17687d;
    --bs-btn-info-hover: #277389;
    --bs-btn-info-active: #357f95;
    --bs-btn-info-border: #155567;
    --bs-alert-info-text: #005f83;
    --bs-alert-info-bg: #09181f;
    --bs-alert-info-border: #002026;
    --bs-btn-inv: #2e2e2e;
    --bs-code-text: #ab0031;

    /* --- Blueprint vendor dark values --- */
    --bp-heading: #dddddd;
    --bp-quiet: #808080;
    --bp-link: #0062c6;
    --bp-link-hover: #00497f;
    --bp-thead-bg: #0f1e3a;
    --bp-box-bg: #10151d;
    --bp-loud: #e8e8e8;
    --bp-highlight: #111100;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    /* --- Push service dark values --- */
    --surface: #0b0b0b;
    --page-bg: #131313;
    --search-bg: #131313;
    --menu-hover-bg: #0e1115;
    --portlet-content-bg: #061011;
    --portlet-header-bg: #0b2633;
    --link-hover-bg: #002e44;
    --error-input-bg: #190e0e;
    --flash-error-bg: #201112;
    --flash-notice-bg: #141100;
    --flash-success-bg: #151800;
    --text-muted: #676767;
    --link-text: #1a8fd4;
    --menu-hover-text: #004a7f;
    --portlet-title: #005786;
    --error-text-strong: #d44040;
    --error-border: #bd0000;
    --flash-error-text: #cc4c39;
    --flash-notice-text: #8d8052;
    --flash-success-text: #729955;
    --border-light: #3d3d3d;
    --accent-border: #0d1f29;
    --portlet-header-border: #004360;
    --flash-error-border: #3b1217;
    --flash-notice-border: #271e00;
    --flash-success-border: #222800;

    /* --- Bootstrap vendor dark values --- */
    --bs-white: #0b0b0b;
    --bs-table-stripe: #0e0e0e;
    --bs-code-bg: #100e0f;
    --bs-gray-lighter: #101010;
    --bs-navbar-bg-start: #0d0d0d;
    --bs-navbar-bg-end: #111111;
    --bs-gray-light: #131313;
    --bs-btn-hover-bg: #171717;
    --bs-divider: #353535;
    --bs-well-border: #454545;
    --bs-code-border: #19191e;
    --bs-border: #434343;
    --bs-btn-active-border: #3d3d3d;
    --bs-navbar-border: #3d3d3d;
    --bs-input-border: #494949;
    --bs-muted: #a0a0a0;
    --bs-navbar-text: #878787;
    --bs-text: #d2d2d2;
    --bs-body-text: #f1f1f1;
    --bs-navbar-inv-bg: #1e1e1e;
    --bs-btn-inv-active: #1a1a1a;
    --bs-navbar-inv-border: #141414;
    --bs-btn-inv-hover: #2a2a2a;
    --bs-navbar-inv-divider: #0e0e0e;
    --bs-navbar-inv-btn: #0c0c0c;
    --bs-btn-inv-active-bg: #080808;
    --bs-navbar-inv-btn-bg: #040404;
    --bs-black: #000000;
    --bs-primary: #3aa3e0;
    --bs-link-hover: #6dbde8;
    --bs-primary-hover: #2098d8;
    --bs-btn-primary: #0061b8;
    --bs-btn-primary-active: #1763ff;
    --bs-btn-primary-hover: #2c71ff;
    --bs-btn-primary-pressed: #3f7ffc;
    --bs-btn-primary-border: #538cf9;
    --bs-btn-danger: #b32325;
    --bs-btn-danger-hover: #c13331;
    --bs-btn-danger-active: #cf413d;
    --bs-btn-danger-border: #952020;
    --bs-alert-error-text: #a8262c;
    --bs-alert-error-bg: #221515;
    --bs-alert-error-border: #2a171b;
    --bs-btn-success: #157f1f;
    --bs-btn-success-hover: #278b2c;
    --bs-btn-success-active: #369739;
    --bs-btn-success-border: #176a1d;
    --bs-alert-success-text: #1c6f22;
    --bs-alert-success-bg: #0e1908;
    --bs-alert-success-border: #111e04;
    --bs-btn-warning: #915200;
    --bs-btn-warning-hover: #9e5e00;
    --bs-btn-warning-active: #aa6a00;
    --bs-btn-warning-border: #784500;
    --bs-warning: #915200;
    --bs-alert-text: #563b00;
    --bs-alert-bg: #120f02;
    --bs-alert-border: #1a1101;
    --bs-btn-info: #17687d;
    --bs-btn-info-hover: #277389;
    --bs-btn-info-active: #357f95;
    --bs-btn-info-border: #155567;
    --bs-alert-info-text: #005f83;
    --bs-alert-info-bg: #09181f;
    --bs-alert-info-border: #002026;
    --bs-btn-inv: #2e2e2e;
    --bs-code-text: #ab0031;

    /* --- Blueprint vendor dark values --- */
    --bp-heading: #dddddd;
    --bp-quiet: #808080;
    --bp-link: #0062c6;
    --bp-link-hover: #00497f;
    --bp-thead-bg: #0f1e3a;
    --bp-box-bg: #10151d;
    --bp-loud: #e8e8e8;
    --bp-highlight: #111100;
  }
}

/* --- Dark structural overrides ---
 * These apply when dark is actually active. JS sets data-dark="true"
 * on <html> when theme=dark OR theme=system + OS prefers dark.
 * This avoids the problem of structural overrides (filter:invert,
 * background-image:none) firing in system mode when OS is light.
 */

[data-dark="true"] body {
  color: var(--bs-text) !important;
  background: var(--page-bg) !important;
}

[data-dark="true"] a:not(.btn) {
  color: var(--bs-primary) !important;
}
[data-dark="true"] a:not(.btn):focus,
[data-dark="true"] a:not(.btn):hover {
  color: var(--bs-link-hover) !important;
}

[data-dark="true"] #mainmenu {
  background-image: linear-gradient(to bottom, #1a1a1a, #0b0b0b) !important;
}

[data-dark="true"] .btn,
[data-dark="true"] .btn-primary,
[data-dark="true"] .btn-danger,
[data-dark="true"] .btn-success,
[data-dark="true"] .btn-warning,
[data-dark="true"] .btn-info,
[data-dark="true"] .btn-inverse {
  background-image: none !important;
  text-shadow: none !important;
}

[data-dark="true"] .navbar .nav > li > a,
[data-dark="true"] .navbar .brand {
  text-shadow: none !important;
}

[data-dark="true"] .breadcrumb li,
[data-dark="true"] .alert,
[data-dark="true"] .nav-header,
[data-dark="true"] .nav-list > li > a,
[data-dark="true"] .nav-list .nav-header,
[data-dark="true"] .nav-list > .active > a,
[data-dark="true"] .input-prepend .add-on,
[data-dark="true"] .input-append .add-on,
[data-dark="true"] .close,
[data-dark="true"] .badge,
[data-dark="true"] .progress .bar,
[data-dark="true"] .bootstrap-widget-header {
  text-shadow: none !important;
}

[data-dark="true"] [class^="icon-"],
[data-dark="true"] [class*=" icon-"] {
  filter: invert(1) !important;
}
[data-dark="true"] .icon-white,
[data-dark="true"] .nav-tabs > .active > a > [class^="icon-"],
[data-dark="true"] .nav-tabs > .active > a > [class*=" icon-"],
[data-dark="true"] .nav-pills > .active > a > [class^="icon-"],
[data-dark="true"] .nav-pills > .active > a > [class*=" icon-"],
[data-dark="true"] .nav-list > .active > a > [class^="icon-"],
[data-dark="true"] .nav-list > .active > a > [class*=" icon-"],
[data-dark="true"] .navbar-inverse .nav > .active > a > [class^="icon-"],
[data-dark="true"] .navbar-inverse .nav > .active > a > [class*=" icon-"],
[data-dark="true"] .dropdown-menu > li > a:hover > [class^="icon-"],
[data-dark="true"] .dropdown-menu > li > a:hover > [class*=" icon-"],
[data-dark="true"] .dropdown-menu > .active > a > [class^="icon-"],
[data-dark="true"] .dropdown-menu > .active > a > [class*=" icon-"] {
  filter: none !important;
}

[data-dark="true"] .navbar-inner,
[data-dark="true"] .navbar-inverse .navbar-inner {
  background-image: none !important;
}

[data-dark="true"] ::-webkit-scrollbar {
  background-color: var(--page-bg);
}
[data-dark="true"] ::-webkit-scrollbar-thumb {
  background-color: var(--bs-input-border);
  border-radius: 4px;
}
[data-dark="true"] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-muted);
}

/* --- Mobile: prevent iOS auto-zoom on input focus (requires >= 16px) --- */
@media (max-width: 767px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* --- Mobile: disable double-tap zoom --- */
html {
  touch-action: manipulation;
}

/* ===== 3. Vendor selector overrides (both modes) =====
 *
 * These use var() + !important so they work in both light and dark modes.
 * Light mode values match the vendor originals (zero visual change).
 * Dark mode values come from the oklch remap.
 *
 * Note: colored button/label TEXT is NOT overridden here — Bootstrap's
 * native color:#fff is correct in both modes. The oklch remap of white
 * produces near-black, which would be unreadable on colored backgrounds.
 */

/* --- Typography (Blueprint) --- */

h1, h2, h3, h4, h5, h6 {
  color: var(--bp-heading) !important;
}

blockquote, .quiet, del, abbr, acronym {
  color: var(--bp-quiet) !important;
}

abbr, acronym {
  border-bottom-color: var(--bs-muted) !important;
}

.loud {
  color: var(--bp-loud) !important;
}

.muted {
  color: var(--bs-muted) !important;
}

/* --- Blueprint structural --- */

.box {
  background: var(--bp-box-bg) !important;
}

hr {
  background: var(--bs-border) !important;
  color: var(--bs-border) !important;
}

.border {
  border-right-color: var(--bs-border) !important;
}

.colborder {
  border-right-color: var(--bs-border) !important;
}

/* --- Tables --- */

thead th {
  background: var(--bp-thead-bg) !important;
  color: var(--bp-heading) !important;
}

caption {
  background: var(--bs-gray-lighter) !important;
  color: var(--bs-muted) !important;
}

.table {
  border-color: var(--bs-border) !important;
}

.table th, .table td {
  border-top-color: var(--bs-border) !important;
}

.table tbody tr td,
.table tbody tr th {
  background-color: var(--bs-white) !important;
}

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
  background-color: var(--bs-table-stripe) !important;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: var(--bs-btn-hover-bg) !important;
}

.table-bordered {
  border-color: var(--bs-border) !important;
}

.table-bordered th, .table-bordered td {
  border-color: var(--bs-border) !important;
}

/* Yii grid view */
.grid-view table.items tr.selected td {
  background: var(--bs-btn-hover-bg) !important;
}

.grid-view .filters input,
.grid-view .filters select {
  background-color: var(--bs-white) !important;
  border-color: var(--bs-input-border) !important;
  color: var(--bs-text) !important;
}

/* --- Forms --- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
.ui-autocomplete-input,
textarea,
select,
.uneditable-input {
  background-color: var(--bs-white) !important;
  border-color: var(--bs-input-border) !important;
  color: var(--bs-text) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--bs-primary) !important;
}

.input-prepend .add-on, .input-append .add-on {
  background-color: var(--bs-gray-light) !important;
  border-color: var(--bs-input-border) !important;
}

.form-actions {
  background-color: var(--bs-gray-lighter) !important;
  border-top-color: var(--bs-border) !important;
}

.help-block, .help-inline {
  color: var(--bp-quiet) !important;
}

/* --- jQuery UI autocomplete dropdown --- */

.ui-autocomplete.ui-widget-content {
  background-color: var(--surface) !important;
  background-image: none !important;
  border-color: var(--bs-border) !important;
}

.ui-autocomplete .ui-menu-item a {
  color: var(--bs-body-text) !important;
}

.ui-autocomplete .ui-menu-item a.ui-state-focus,
.ui-autocomplete .ui-menu-item a.ui-state-active {
  background-color: var(--bs-gray-lighter) !important;
  background-image: none !important;
  color: var(--bs-primary) !important;
  border-color: var(--bs-border) !important;
}

/* --- Buttons --- */

.btn {
  background-color: var(--bs-gray-lighter) !important;
  border-color: var(--bs-border) !important;
  color: var(--bs-body-text) !important;
}

.btn:hover, .btn:focus {
  background-color: var(--bs-btn-hover-bg) !important;
}

.btn:active, .btn.active {
  border-color: var(--bs-btn-active-border) !important;
}

/* Colored buttons: force white text to override .btn's body-text color. */

.btn-primary {
  color: #fff !important;
  background-color: var(--bs-btn-primary) !important;
  border-color: var(--bs-btn-primary-border) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--bs-btn-primary-hover) !important;
}

.btn-primary:active, .btn-primary.active {
  background-color: var(--bs-btn-primary-active) !important;
}

.btn-danger {
  color: #fff !important;
  background-color: var(--bs-btn-danger) !important;
  border-color: var(--bs-btn-danger-border) !important;
}

.btn-danger:hover, .btn-danger:focus {
  background-color: var(--bs-btn-danger-hover) !important;
}

.btn-danger:active, .btn-danger.active {
  background-color: var(--bs-btn-danger-active) !important;
}

.btn-success {
  color: #fff !important;
  background-color: var(--bs-btn-success) !important;
  border-color: var(--bs-btn-success-border) !important;
}

.btn-success:hover, .btn-success:focus {
  background-color: var(--bs-btn-success-hover) !important;
}

.btn-success:active, .btn-success.active {
  background-color: var(--bs-btn-success-active) !important;
}

.btn-warning {
  color: #fff !important;
  background-color: var(--bs-btn-warning) !important;
  border-color: var(--bs-btn-warning-border) !important;
}

.btn-warning:hover, .btn-warning:focus {
  background-color: var(--bs-btn-warning-hover) !important;
}

.btn-warning:active, .btn-warning.active {
  background-color: var(--bs-btn-warning-active) !important;
}

.btn-info {
  color: #fff !important;
  background-color: var(--bs-btn-info) !important;
  border-color: var(--bs-btn-info-border) !important;
}

.btn-info:hover, .btn-info:focus {
  background-color: var(--bs-btn-info-hover) !important;
}

.btn-info:active, .btn-info.active {
  background-color: var(--bs-btn-info-active) !important;
}

.btn-inverse {
  color: #fff !important;
  background-color: var(--bs-btn-inv) !important;
}

.btn-inverse:hover, .btn-inverse:focus {
  background-color: var(--bs-btn-inv-hover) !important;
}

.btn-inverse:active, .btn-inverse.active {
  background-color: var(--bs-btn-inv-active-bg) !important;
}

/* --- Navbar --- */

.navbar-inner {
  background-color: var(--bs-navbar-bg-start) !important;
  border-color: var(--bs-navbar-border) !important;
}

.navbar .brand {
  color: var(--bs-navbar-text) !important;
}

.navbar .nav > li > a {
  color: var(--bs-navbar-text) !important;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
  color: var(--bs-body-text) !important;
}

.navbar .divider-vertical {
  border-color: var(--bs-navbar-bg-end) !important;
}

.navbar-inverse .navbar-inner {
  background-color: var(--bs-navbar-inv-bg) !important;
  border-color: var(--bs-navbar-inv-border) !important;
}

/* Inverse navbar text: hardcoded like colored button text.
 * The navbar stays dark in both modes, so link colors must too —
 * var(--bs-muted) and var(--bs-white) get oklch-remapped and break readability. */
.navbar-inverse .brand {
  color: #999999 !important;
}

.navbar-inverse .nav > li > a {
  color: #999999 !important;
}

.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > li > a:focus {
  color: #ffffff !important;
}

.navbar-inverse .divider-vertical {
  border-left-color: var(--bs-navbar-inv-divider) !important;
}

/* --- Dropdowns --- */

.dropdown-menu {
  background-color: var(--bs-white) !important;
  border-color: var(--bs-border) !important;
}

.dropdown-menu > li > a {
  color: var(--bs-body-text) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

.dropdown-menu .divider {
  background-color: var(--bs-divider) !important;
  border-bottom-color: var(--bs-white) !important;
}

/* --- Nav tabs / Nav list --- */

.nav > li > a:hover,
.nav > li > a:focus {
  background-color: var(--bs-gray-light) !important;
}

.nav-tabs > li > a {
  border-color: var(--bs-border) !important;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
  border-color: var(--bs-border) !important;
  border-bottom-color: var(--bs-white) !important;
  color: var(--bs-text) !important;
  background-color: var(--bs-white) !important;
}

.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

/* --- Breadcrumbs --- */

.breadcrumb {
  background-color: var(--bs-gray-lighter) !important;
  border-color: var(--bs-border) !important;
}

.breadcrumb > .active {
  color: var(--bs-muted) !important;
}

/* --- Alerts --- */

.alert {
  background-color: var(--bs-alert-bg) !important;
  border-color: var(--bs-alert-border) !important;
  color: var(--bs-alert-text) !important;
}

.alert-error, .alert-danger {
  background-color: var(--bs-alert-error-bg) !important;
  border-color: var(--bs-alert-error-border) !important;
  color: var(--bs-alert-error-text) !important;
}

.alert-success {
  background-color: var(--bs-alert-success-bg) !important;
  border-color: var(--bs-alert-success-border) !important;
  color: var(--bs-alert-success-text) !important;
}

.alert-info {
  background-color: var(--bs-alert-info-bg) !important;
  border-color: var(--bs-alert-info-border) !important;
  color: var(--bs-alert-info-text) !important;
}

/* --- Wells --- */

.well {
  background-color: var(--bs-gray-lighter) !important;
  border-color: var(--bs-well-border) !important;
}

/* --- Modals --- */

.modal {
  background-color: var(--bs-white) !important;
  border-color: var(--bs-border) !important;
}

.modal-header {
  border-bottom-color: var(--bs-border) !important;
}

.modal-header h3 {
  color: var(--bp-heading) !important;
}

.modal-footer {
  background-color: var(--bs-gray-lighter) !important;
  border-top-color: var(--bs-border) !important;
}

.modal-backdrop {
  background-color: var(--bs-black) !important;
}

/* --- Pager --- */

.pager a,
.pager span {
  background-color: var(--bs-white) !important;
  border-color: var(--bs-border) !important;
  color: var(--bs-primary) !important;
}

.pager a:hover {
  background-color: var(--bs-gray-lighter) !important;
  color: var(--bs-link-hover) !important;
}

.pager .disabled a,
.pager .disabled a:hover,
.pager .disabled span {
  color: var(--bs-muted) !important;
  background-color: var(--bs-white) !important;
}

/* --- Pagination --- */

.pagination ul > li > a,
.pagination ul > li > span {
  background-color: var(--bs-white) !important;
  border-color: var(--bs-border) !important;
  color: var(--bs-primary) !important;
}

.pagination ul > li > a:hover {
  background-color: var(--bs-gray-lighter) !important;
}

.pagination ul > .active > a,
.pagination ul > .active > span {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}

.pagination ul > .disabled > a,
.pagination ul > .disabled > span {
  color: var(--bs-muted) !important;
  background-color: var(--bs-white) !important;
}

/* --- Code --- */

code, pre {
  background-color: var(--bs-code-bg) !important;
  border-color: var(--bs-code-border) !important;
  color: var(--bs-code-text) !important;
}

/* --- Labels / Badges --- */
/* Text color NOT overridden — Bootstrap's native #fff is correct in both modes */

.label-important, .badge-important {
  background-color: var(--bs-btn-danger) !important;
}

.label-warning, .badge-warning {
  background-color: var(--bs-warning) !important;
}

.label-success, .badge-success {
  background-color: var(--bs-btn-success) !important;
}

.label-info, .badge-info {
  background-color: var(--bs-btn-info) !important;
}

.label-inverse, .badge-inverse {
  background-color: var(--bs-body-text) !important;
}

/* --- Accordion --- */

.accordion-group {
  border-color: var(--bs-divider) !important;
}

.accordion-inner {
  border-top-color: var(--bs-divider) !important;
}

/* --- Bootstrap-Yii specific --- */

table.detail-view {
  background: var(--bs-white) !important;
}

table.detail-view th, table.detail-view td {
  border-color: var(--bs-border) !important;
}

table.detail-view tr.odd {
  background: var(--bs-table-stripe) !important;
}

table.detail-view tr.even {
  background: var(--bs-white) !important;
}

.detail-view .null {
  color: var(--bs-muted) !important;
}

.form-inline label.error,
.form-horizontal label.error,
.form-vertical label.error {
  color: var(--bs-alert-error-text) !important;
}

/* Bootstrap base text (for elements outside our main.css scope) */
.container, .container-fluid, .row, .row-fluid {
  color: var(--bs-body-text) !important;
}

/* Mobile: keep page frame at viewport width, scroll wide tables independently */
#page {
  overflow-x: hidden;
}

.grid-view {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  body {
    padding: 0 !important;
  }
  #page {
    margin: 0 !important;
    border: none !important;
  }
  #header {
    border-top: none !important;
    display: none !important;
  }
  .navbar .brand {
    display: none !important;
  }
  a, .btn, .navbar .nav > li > a {
    -webkit-tap-highlight-color: transparent;
  }

  /* Button groups: wrap on narrow screens */
  .btn-group {
    display: flex;
    flex-wrap: wrap;
  }

  /* Fix scroll trap: .grid-view overflow-x:auto (line 878) implicitly
     triggers overflow-y:auto — creating a scroller with ~20px of range
     that eats all touch scroll gestures on mobile */
  .grid-view {
    overflow: visible !important;
  }

  /* ── Responsive tables: card layout ──────────────────────────
     Transforms table.items (Yii CGridView) into stacked cards.
     Requires responsive-tables.js to stamp data-label attributes.
     ─────────────────────────────────────────────────────────── */

  /* Hide thead (column headers + filter row) */
  table.items thead {
    display: none;
  }

  /* Table becomes a vertical stack of cards */
  table.items {
    display: block;
    border: none !important;
    width: 100% !important;
  }
  table.items tbody {
    display: block;
  }
  table.items tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(128, 128, 128, 0.45);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
  }

  /* Remove Bootstrap striping — cards handle visual separation */
  table.items.table-striped tbody > tr:nth-child(odd) > td,
  table.items.table-striped tbody > tr:nth-child(even) > td {
    background: transparent !important;
  }

  /* Each cell becomes a flex row: label | value */
  table.items tbody td {
    display: flex;
    padding: 0.3rem 0;
    border: none !important;
    overflow-wrap: anywhere;
    align-items: baseline;
    width: 100% !important;
    color: var(--bs-text);
  }
  table.items tbody td::before {
    content: attr(data-label);
    flex-shrink: 0;
    width: 4.5rem;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--bp-quiet);
    margin-right: 0.5rem;
    word-break: normal;
  }

  /* Hide cells with no content (empty PWA Url, Aliases, etc.) */
  table.items tbody td:empty {
    display: none;
  }
  table.items tbody td:has(a:empty):not(:has(a:not(:empty))) {
    display: none;
  }

  /* Second cell: visual emphasis as card title */
  table.items tbody td:nth-child(2) {
    font-weight: 600;
    font-size: 1.05em;
    color: var(--bp-heading);
    padding-bottom: 0.3rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.35) !important;
  }

  /* ID column: small and muted */
  table.items tbody td:first-child {
    font-size: 0.8em;
    color: var(--text-muted);
  }

  /* Action/button column: icon row at card bottom */
  table.items tbody td.button-column,
  table.items tbody td:last-child:has(.icon-eye-open, .icon-pencil, .icon-trash) {
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(128, 128, 128, 0.35) !important;
  }
  table.items tbody td.button-column::before,
  table.items tbody td:last-child:has(.icon-eye-open, .icon-pencil, .icon-trash)::before {
    display: none;
  }
  /* Touch-friendly action icons (44×44 minimum target) */
  table.items tbody td.button-column a,
  table.items tbody td:last-child:has(.icon-eye-open) a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Remove nowrap that forces single-line on narrow screens */
  table.items tbody td[nowrap] {
    white-space: normal !important;
  }

  /* Pagination: compact on mobile */
  .pagination {
    flex-wrap: wrap;
  }
  .pagination li {
    margin-bottom: 0.25rem;
  }
}

/* ── Mobile navigation: hamburger + slide-down panel ──────────────
   Transforms the desktop float-based nav into a hamburger-toggled
   overlay on mobile. Follows Brian Swol's visibility+opacity+transform
   pattern (never display:none for animated elements). The toggler
   element is injected by mobile-nav.js (~10 lines).
   No HTML changes required. Desktop layout is completely unaffected.

   Patterns applied from css-rulebook-brian-swol.md:
   - §6c  Mobile menu: visibility + opacity + transform, not display
   - §7   Hamburger icon: CSS pseudo-elements, not SVG
   - §9a  Transition system: consistent 0.3s ease timing
   - §15  Dropdown: always-rendered, visibility-toggled
   - §18  Z-index scale: navbar 420, overlay 600, toggler 601
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── Header bar: sticky bar with brand + hamburger ── */
  .navbar.navbar-fixed-top {
    position: sticky !important;
    top: 0;
    z-index: 420;
    margin: 0 !important;
    width: 100% !important;
  }

  .navbar-inner {
    padding: 0 !important;
    min-height: 48px;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .navbar-inner > .container {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Unhide brand for mobile header */
  .navbar .brand {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-body-text, #f1f1f1) !important;
    text-shadow: none !important;
    flex-shrink: 0;
  }

  /* ── Hamburger toggler (element injected by mobile-nav.js) ── */
  .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 601;
    flex-shrink: 0;
    margin-left: auto !important;
    color: var(--bs-navbar-text, #999);
    -webkit-tap-highlight-color: transparent;
  }

  /* Hamburger bars — pseudo-element technique (Swol §7) */
  .navbar-toggler span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentcolor;
    position: relative;
    transition: background 0.3s ease;
  }
  .navbar-toggler span::before,
  .navbar-toggler span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentcolor;
    transition: top 0.3s ease, transform 0.3s ease;
  }
  .navbar-toggler span::before { top: -7px; }
  .navbar-toggler span::after { top: 7px; }

  /* Hamburger → X animation */
  html.navbar-open .navbar-toggler span {
    background: transparent;
  }
  html.navbar-open .navbar-toggler span::before {
    top: 0;
    transform: rotate(45deg);
  }
  html.navbar-open .navbar-toggler span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* ── Nav overlay: visibility+opacity+transform (Swol §6c, §15) ── */
  .navbar .nav {
    position: fixed !important;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    float: none !important;
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: var(--bs-navbar-inv-bg, #1e1e1e);
    border-top: 1px solid var(--bs-navbar-inv-border, #141414);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Brian's triple: visibility + opacity + transform */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
    transition: visibility 0s linear 0.3s, opacity 0.3s ease, transform 0.3s ease;
  }

  /* Open state — instant visibility, animated opacity+transform */
  html.navbar-open .navbar .nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: visibility 0s, opacity 0.3s ease, transform 0.3s ease;
  }

  /* ── Nav items: full-width stacked list ── */
  .navbar .nav > li {
    float: none !important;
    width: 100%;
    border-bottom: 1px solid var(--bs-navbar-inv-border, rgba(255, 255, 255, 0.08));
  }

  .navbar .nav > li > a {
    padding: 14px 20px !important;
    font-size: 15px;
    color: var(--bs-navbar-text, #999) !important;
  }

  .navbar .nav > li > a:hover,
  .navbar .nav > li > a:focus {
    color: var(--bs-body-text, #f1f1f1) !important;
    background: var(--bs-btn-inv-hover, rgba(255, 255, 255, 0.06)) !important;
  }

  .navbar .nav > li.active > a {
    color: var(--bs-primary, #3aa3e0) !important;
    background: transparent !important;
  }

  /* ── Dropdown "Other": expand inline on mobile ── */
  .navbar .nav > li.dropdown .dropdown-menu {
    position: static !important;
    display: block !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide Bootstrap dropdown arrow pseudo-elements */
  .navbar .nav > li.dropdown .dropdown-menu::before,
  .navbar .nav > li.dropdown .dropdown-menu::after {
    display: none !important;
  }

  .navbar .nav > li.dropdown .dropdown-menu > li > a {
    padding: 12px 20px 12px 36px !important;
    font-size: 14px;
    color: var(--bs-navbar-text, #999) !important;
  }

  .navbar .nav > li.dropdown .dropdown-menu > li > a:hover,
  .navbar .nav > li.dropdown .dropdown-menu > li > a:focus {
    color: var(--bs-body-text, #f1f1f1) !important;
    background: var(--bs-btn-inv-hover, rgba(255, 255, 255, 0.06)) !important;
  }

  /* Hide caret on mobile — submenu is always expanded */
  .navbar .nav > li.dropdown > a .caret {
    display: none;
  }

  /* Prevent body scroll when menu is open */
  html.navbar-open {
    overflow: hidden;
  }
  html.navbar-open body {
    overflow: hidden;
  }
}

/* Desktop: hide the toggler entirely */
@media (min-width: 768px) {
  .navbar-toggler {
    display: none !important;
  }
}

/* ── Admin header: title + action button on one line ──────────── */
.admin-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.admin-header h1 {
  margin: 0;
  flex-shrink: 0;
}
.btn-create-deployment {
  font-size: 0.85em;
  padding: 4px 12px;
  white-space: nowrap;
}

/* ── Filter drawer: collapsible panel (Swol §15 + §9a) ────────
   Always rendered, visibility-toggled with opacity+transform.
   ──────────────────────────────────────────────────────────── */
.filter-drawer-wrapper {
  margin-bottom: 1rem;
}

.filter-drawer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 14px;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--bs-text);
  background: var(--bs-gray-lighter);
  border: 1px solid var(--bs-border);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.filter-drawer-toggle:hover,
.filter-drawer-toggle:focus {
  background: var(--bs-btn-hover-bg);
  border-color: var(--bs-input-border);
  outline: none;
}
.filter-drawer-toggle[aria-expanded="true"] {
  background: var(--bs-btn-hover-bg);
  border-color: var(--bs-input-border);
}

.filter-drawer-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentcolor;
  transition: transform 0.3s ease;
  margin-left: 2px;
}
.filter-drawer-toggle[aria-expanded="true"] .filter-drawer-caret {
  transform: rotate(180deg);
}

.filter-drawer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.filter-drawer.open {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
}

.filter-drawer-inner {
  padding: 0.75rem 0;
}

.filter-drawer-inner .wide.form,
.filter-drawer-inner .wide.form form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: flex-end;
}
.filter-drawer-inner .wide.form .row {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 220px;
  clear: none !important;
  margin: 0;
}
.filter-drawer-inner .wide.form label {
  float: none;
  text-align: left;
  width: auto;
  margin-right: 0;
  display: block;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--bp-quiet);
  margin-bottom: 2px;
}
.filter-drawer-inner .wide.form input[type="text"] {
  width: 100% !important;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 0.9em;
  border: 1px solid var(--bs-input-border);
  border-radius: 3px;
  background: var(--bs-white);
  color: var(--bs-text);
  transition: border-color 0.3s ease;
  margin: 0;
}
.filter-drawer-inner .wide.form input[type="text"]:focus {
  border-color: var(--bs-primary);
  outline: none;
}
.filter-drawer-inner .wide.form .row.buttons {
  min-width: auto;
  max-width: none;
}
.filter-drawer-inner .wide.form .buttons,
.filter-drawer-inner .wide.form .hint {
  padding-left: 0;
  clear: none;
}
.filter-drawer-inner .wide.form .row.buttons input[type="submit"] {
  padding: 5px 16px;
  font-size: 0.9em;
  cursor: pointer;
}

/* ── Env badges: colored pills for environment labels ─────── */
.env-badge { display: inline-block; padding: 1px 5px; font-size: 10px; font-weight: 700; line-height: 1.4; border-radius: 3px; margin-right: 2px; text-decoration: none; white-space: nowrap; }
.env-badge-prod { background-color: #3a733b; color: #fff; }
.env-badge-stg { background-color: #9e6310; color: #fff; }
.env-badge-dev { background-color: #2d6a8a; color: #fff; }
.env-badge-working { background-color: #2563eb; color: #fff; animation: pulse-badge 1.5s ease-in-out infinite; }
.env-badge-failed { background-color: #b91c1c; color: #fff; }
.env-badge:hover { opacity: 0.85; }
@keyframes pulse-badge { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Repo columns: truncation + branch styling ───────────── */
.col-repo { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.repo-branch { color: var(--bp-quiet, #888); font-size: 0.9em; text-decoration: none; }
a.repo-branch:hover { text-decoration: underline; }

/* ── Summary line: left-aligned ────────────────────────────── */
.grid-view .summary {
  text-align: left;
  font-size: 0.85em;
  color: var(--bp-quiet);
  margin-bottom: 0.5rem;
}

/* ── Mobile filter drawer: stack vertically ────────────────── */
@media (max-width: 767px) {
  .admin-header h1 {
    font-size: 1.5em;
  }

  .filter-drawer-inner .wide.form {
    flex-direction: column;
    gap: 0.5rem;
  }
  .filter-drawer-inner .wide.form .row {
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  .filter-drawer-inner .wide.form input[type="text"] {
    font-size: 16px;
  }

  /* Widen card labels to fit "Aliases" without wrap */
  table.items tbody td::before {
    width: 3.5rem !important;
    font-size: 0.75em !important;
  }

  /* Hide cards' Aliases row when it only contains empty text */
  table.items tbody td[data-label="Aliases"]:not(:has(a)) {
    display: none;
  }

  /* ── Deployments admin: card ordering ──────────────────────── */
  #deployments-grid table.items tbody tr {
    display: flex !important;
    flex-wrap: wrap;
  }
  #deployments-grid table.items tbody td {
    flex: 0 0 100%;
  }
  #deployments-grid table.items tbody td.col-hostname {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    font-weight: 600;
    font-size: 1.05em;
    border-bottom: 1px solid rgba(128, 128, 128, 0.35) !important;
    padding-bottom: 0.3rem;
    margin-bottom: 0.2rem;
  }
  #deployments-grid table.items tbody td.col-hostname::before { display: none; }
  #deployments-grid table.items tbody td.col-env {
    order: 1;
    flex: 0 0 auto;
    width: auto !important;
    margin-left: auto;
    border-bottom: 1px solid rgba(128, 128, 128, 0.35) !important;
    padding-bottom: 0.3rem;
    margin-bottom: 0.2rem;
  }
  #deployments-grid table.items tbody td.col-env::before { display: none; }
  #deployments-grid table.items tbody td.col-core { order: 2; max-width: none; white-space: normal; }
  #deployments-grid table.items tbody td.col-siterepo { order: 3; max-width: none; white-space: normal; }
  #deployments-grid table.items tbody td.col-aliases { order: 4; }
  #deployments-grid table.items tbody td.col-id {
    order: 5;
    flex: 0 0 auto;
    width: auto !important;
    font-size: 0.8em;
    color: var(--text-muted);
  }
  #deployments-grid table.items tbody td.col-id::before { content: "#"; display: inline; width: auto !important; margin-right: 0; }
  #deployments-grid table.items tbody td:last-child { order: 6; }
  /* Override generic nth-child title styling — col-hostname handles it */
  #deployments-grid table.items tbody td:nth-child(2) {
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    padding-bottom: 0.3rem;
    margin-bottom: 0;
    border-bottom: none !important;
  }
}