/* Light mode. Loaded on every shell, but every rule under
   html[data-bs-theme="light"] is inert while the site stays dark.
   The dark tokens in app.css are not changed. */

.qp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  line-height: 1;
}
.qp-theme-toggle:hover,
.qp-theme-toggle:focus {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border-color: var(--border-color-strong);
}
.qp-theme-icon--to-dark { display: none; }
html[data-bs-theme="light"] .qp-theme-icon--to-light { display: none; }
html[data-bs-theme="light"] .qp-theme-icon--to-dark { display: inline; }

html[data-bs-theme="light"] {
  color-scheme: light;
  --bg-primary: #e7eef3;
  --bg-secondary: #f7fafc;
  --bg-tertiary: #e8eef3;
  --bg-elevated: #e4ebf1;
  --text-primary: #1c2833;
  --text-secondary: #4a5c6c;
  --text-muted: #475a6a; /* was #5c7082: 4.3:1 on cards, under the 4.5:1 floor */
  --text-inverse: #f7fafc;
  --border-color: rgba(28, 40, 51, 0.12);
  --border-color-strong: #8aa0b2;
  --brand: #3a5870;
  --brand-glow: rgba(62, 89, 108, 0.2);
  --accent-blue: #3e596c;
  --accent-blue-hover: #324a5b;
  --accent-green: #1f7a45;
  --accent-green-hover: #196339;
  --accent-red: #c0392b;
  --accent-red-hover: #a33226;
  --accent-yellow: #9a7209;
  --accent-yellow-hover: #7d5d07;
  --text-danger: #b42318;
  --text-success: #18753a;
  --text-link: #2f4d63;
  --shadow-sm: 0 2px 8px rgba(28, 40, 51, 0.06);
  --shadow-md: 0 10px 28px rgba(28, 40, 51, 0.08);
  --shadow-lg: 0 16px 40px rgba(28, 40, 51, 0.1);
  --bs-body-bg: #e7eef3;
  --bs-body-color: #1c2833;
  --bs-emphasis-color: #1c2833;
  --bs-secondary-color: #4a5c6c;
  --bs-tertiary-color: #475a6a;
  --bs-border-color: rgba(28, 40, 51, 0.12);
  --bs-link-color: #3a5870;
  --bs-link-hover-color: #2a4356;
}

html[data-bs-theme="light"],
html[data-bs-theme="light"] body {
  background: linear-gradient(180deg, #f7fafc 0%, #e7eef3 32%, #e4ebf1 100%);
  background-attachment: fixed;
  color: #1c2833;
}

html[data-bs-theme="light"] .navbar {
  background: #3e596c !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(28, 40, 51, 0.35);
  box-shadow: 0 2px 12px rgba(28, 40, 51, 0.16);
}
html[data-bs-theme="light"] .navbar-brand,
html[data-bs-theme="light"] .navbar-brand .qp-brand-role,
html[data-bs-theme="light"] .navbar-nav .nav-link,
html[data-bs-theme="light"] .navbar-nav button.nav-link {
  color: rgba(247, 250, 252, 0.9) !important;
}
html[data-bs-theme="light"] .navbar-nav .nav-link:hover,
html[data-bs-theme="light"] .navbar-nav .nav-link:focus,
html[data-bs-theme="light"] .navbar-nav button.nav-link:hover,
html[data-bs-theme="light"] .navbar-nav button.nav-link:focus,
html[data-bs-theme="light"] .navbar-nav .nav-link.active,
html[data-bs-theme="light"] .navbar-nav button.nav-link.active {
  color: #f7fafc !important;
  background-color: rgba(255, 255, 255, 0.12);
}
html[data-bs-theme="light"] .navbar .qp-theme-toggle {
  color: rgba(247, 250, 252, 0.9);
  border-color: rgba(247, 250, 252, 0.4);
}
html[data-bs-theme="light"] .navbar .qp-theme-toggle:hover,
html[data-bs-theme="light"] .navbar .qp-theme-toggle:focus {
  color: #f7fafc;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(247, 250, 252, 0.65);
}
html[data-bs-theme="light"] .navbar .navbar-toggler {
  border-color: rgba(247, 250, 252, 0.45);
}
html[data-bs-theme="light"] .navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2);
}

html[data-bs-theme="light"] .qp-welcome-bar {
  background: #314859;
  color: rgba(247, 250, 252, 0.88);
  border-bottom-color: rgba(0, 0, 0, 0.28);
}
html[data-bs-theme="light"] .qp-welcome-bar .text-light,
html[data-bs-theme="light"] .qp-welcome-bar .text-secondary,
html[data-bs-theme="light"] .qp-welcome-bar a,
html[data-bs-theme="light"] .qp-welcome-bar .btn-link,
html[data-bs-theme="light"] .qp-welcome-bar .btn-link:hover,
html[data-bs-theme="light"] .qp-welcome-bar .btn-link:focus {
  color: rgba(247, 250, 252, 0.92) !important;
}
html[data-bs-theme="light"] .qp-welcome-bar a:hover,
html[data-bs-theme="light"] .qp-welcome-bar a:focus {
  color: #ffffff !important;
}

html[data-bs-theme="light"] .card.bg-dark:not(.text-white) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(74, 102, 122, 0.14) !important;
  color: #1c2833 !important;
  border-color: rgba(74, 98, 118, 0.18) !important;
  box-shadow: 0 10px 26px rgba(28, 40, 51, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-bs-theme="light"] .card.bg-dark:not(.text-white) .text-light {
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .card,
html[data-bs-theme="light"] .auth-card,
html[data-bs-theme="light"] .modal-content,
html[data-bs-theme="light"] .list-group-item,
html[data-bs-theme="light"] .toast {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(74, 102, 122, 0.12);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  border-color: rgba(74, 98, 118, 0.18);
  box-shadow: 0 10px 26px rgba(28, 40, 51, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #1c2833;
}

/* Menus stay calm and nearly solid so the page behind them does not
   show through the words. The bell menu is the transparent one. */
html[data-bs-theme="light"] .dropdown-menu {
  background: rgba(232, 239, 245, 0.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(74, 98, 118, 0.22);
  box-shadow: 0 14px 32px rgba(28, 40, 51, 0.12);
  color: #1c2833;
}
html[data-bs-theme="light"] .navbar .dropdown-menu {
  font-size: 0.92rem;
}
html[data-bs-theme="light"] .dropdown-item {
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-item:focus {
  background: rgba(62, 89, 108, 0.12);
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .dropdown-item.active,
html[data-bs-theme="light"] .dropdown-item:active {
  background: #3e596c;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .dropdown-header {
  color: #3a5870;
}
html[data-bs-theme="light"] .dropdown-divider {
  border-color: rgba(74, 98, 118, 0.22);
  opacity: 1;
}
html[data-bs-theme="light"] #notificationDropdown {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 42%),
    rgba(214, 226, 236, 0.38);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-color: rgba(255, 255, 255, 0.45);
}
html[data-bs-theme="light"] #notificationDropdown .notification-item {
  color: #1c2833;
  background: transparent;
}
html[data-bs-theme="light"] #notificationDropdown .notification-item:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #1c2833;
}
html[data-bs-theme="light"] #notificationDropdown .text-muted,
html[data-bs-theme="light"] #notificationDropdown .dropdown-header {
  color: #3a5870 !important;
}

html[data-bs-theme="light"] .card-header,
html[data-bs-theme="light"] .card-footer,
html[data-bs-theme="light"] .modal-header,
html[data-bs-theme="light"] .modal-footer {
  background: transparent;
  border-color: rgba(28, 40, 51, 0.08);
}

html[data-bs-theme="light"] .btn-close {
  filter: none;
}

html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] .input-group-text {
  background-color: #eef3f7;
  border-color: rgba(28, 40, 51, 0.16);
}

html[data-bs-theme="light"] .form-check-input {
  border-color: #5d7386;
  background-color: #eef3f7;
}
html[data-bs-theme="light"] .form-check-input:checked {
  background-color: #3e596c;
  border-color: #3e596c;
}
html[data-bs-theme="light"] .form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23f7fafc' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
html[data-bs-theme="light"] .form-check-input:checked[type="radio"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23f7fafc'/%3e%3c/svg%3e");
}
html[data-bs-theme="light"] .form-check-input:disabled {
  border-color: #8aa0b2;
}

html[data-bs-theme="light"] .alert-primary { background: rgba(62, 89, 108, 0.1); border-color: rgba(62, 89, 108, 0.28); color: #243848; }
html[data-bs-theme="light"] .alert-success { background: rgba(31, 122, 69, 0.1); border-color: rgba(31, 122, 69, 0.28); color: #14532d; }
html[data-bs-theme="light"] .alert-danger  { background: rgba(192, 57, 43, 0.1); border-color: rgba(192, 57, 43, 0.28); color: #7f1d1d; }
html[data-bs-theme="light"] .alert-warning { background: rgba(154, 114, 9, 0.12); border-color: rgba(154, 114, 9, 0.3); color: #5c4810; }
html[data-bs-theme="light"] .alert-info    { background: rgba(62, 89, 108, 0.1); border-color: rgba(62, 89, 108, 0.28); color: #243848; }

html[data-bs-theme="light"] .qp-acting-banner strong { color: #5c4810; }

html[data-bs-theme="light"] .text-light {
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .bg-primary .text-light,
html[data-bs-theme="light"] .bg-success .text-light,
html[data-bs-theme="light"] .bg-danger .text-light,
html[data-bs-theme="light"] .bg-warning .text-light,
html[data-bs-theme="light"] .bg-info .text-light,
html[data-bs-theme="light"] .bg-dark .text-light,
html[data-bs-theme="light"] .cp-lightbox .text-light {
  color: #f7fafc !important;
}

html[data-bs-theme="light"] .btn-outline-light {
  --bs-btn-color: #243140;
  --bs-btn-border-color: #8aa0b2;
  --bs-btn-hover-color: #1c2833;
  --bs-btn-hover-bg: rgba(28, 40, 51, 0.06);
  --bs-btn-hover-border-color: #5d7386;
  color: #243140;
  border-color: #8aa0b2;
  background: transparent;
}
html[data-bs-theme="light"] .btn-outline-light:hover,
html[data-bs-theme="light"] .btn-outline-light:focus {
  color: #1c2833;
  border-color: #5d7386;
  background: rgba(28, 40, 51, 0.06);
}

html[data-bs-theme="light"] .auth-card .btn-primary:hover {
  box-shadow: 0 6px 18px rgba(62, 89, 108, 0.28);
}

html[data-bs-theme="light"] .table {
  --bs-table-bg: transparent;
}
html[data-bs-theme="light"] .table thead th {
  background: rgba(74, 102, 122, 0.1);
  color: #1c2833;
}

/* Company profile sections were painted with a fixed dark fill. */
html[data-bs-theme="light"] #cpSections .cp-profile-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 46%),
    rgba(74, 102, 122, 0.12);
  border-left-color: rgba(62, 89, 108, 0.45);
}
html[data-bs-theme="light"] #cpSections .cp-profile-section .accordion-button:not(.collapsed) {
  background: rgba(228, 235, 241, 0.9);
  color: #1c2833;
}
html[data-bs-theme="light"] #cpSections .cp-profile-section .accordion-button::after {
  filter: none;
}

/* Home: cool frosted glass. A lift (transform) on a blurred card blanks
   the numbers and titles in Chromium, so home cards stay still. Ads already
   slide with a transform, so they stay frosted without a blur filter. */
html[data-bs-theme="light"] .home-page .card,
html[data-bs-theme="light"] .home-page .home-ad {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 46%),
    rgba(74, 102, 122, 0.14);
  border: 1px solid rgba(74, 98, 118, 0.2);
  box-shadow: 0 10px 26px rgba(28, 40, 51, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #1c2833;
}
html[data-bs-theme="light"] .home-page .card {
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
html[data-bs-theme="light"] .home-page .home-ad {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-bs-theme="light"] .home-page .card-header,
html[data-bs-theme="light"] .home-page .card-footer {
  background: rgba(255, 255, 255, 0.16);
}
html[data-bs-theme="light"] .home-page .hover-lift,
html[data-bs-theme="light"] .home-page .hover-lift:hover {
  transform: none !important;
}
html[data-bs-theme="light"] .home-page .hover-lift:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 46%),
    rgba(74, 102, 122, 0.2);
  border-color: rgba(62, 89, 108, 0.34);
  box-shadow: 0 12px 28px rgba(28, 40, 51, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
html[data-bs-theme="light"] .home-page .hover-lift:hover .card-title,
html[data-bs-theme="light"] .home-page .hover-lift:hover .home-stat-value,
html[data-bs-theme="light"] .home-page .hover-lift:hover h6,
html[data-bs-theme="light"] .home-page a.text-body:hover,
html[data-bs-theme="light"] .home-page a.text-body:hover .card-title {
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .home-page .hover-lift:hover .card-text,
html[data-bs-theme="light"] .home-page .hover-lift:hover .text-muted,
html[data-bs-theme="light"] .home-page a.text-body:hover .card-text,
html[data-bs-theme="light"] .home-page a.text-body:hover .text-muted {
  color: #475a6a !important;
}
html[data-bs-theme="light"] .home-page .hover-lift:hover .text-secondary,
html[data-bs-theme="light"] .home-page a.text-body:hover .text-secondary {
  color: #4a5c6c !important;
}
html[data-bs-theme="light"] .home-page .home-ad::before,
html[data-bs-theme="light"] .home-page .home-ad--plans::before,
html[data-bs-theme="light"] .home-page .home-ad--community::before,
html[data-bs-theme="light"] .home-page .home-ad--news::before,
html[data-bs-theme="light"] .home-page .home-ad--sponsor::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(214, 226, 236, 0.28));
}
html[data-bs-theme="light"] .home-page .home-ad-label {
  color: #475a6a;
  border-color: rgba(28, 40, 51, 0.14);
}
html[data-bs-theme="light"] .home-page .home-ad-brand,
html[data-bs-theme="light"] .home-page .home-ad--plans .home-ad-brand,
html[data-bs-theme="light"] .home-page .home-ad--news .home-ad-brand,
html[data-bs-theme="light"] .home-page .home-ad--sponsor .home-ad-brand {
  color: #3e596c;
}
html[data-bs-theme="light"] .home-page .home-ad-title { color: #1c2833; }
html[data-bs-theme="light"] .home-page .home-ad-body { color: #4a5c6c; }
html[data-bs-theme="light"] .home-page .home-news-thumb-placeholder {
  background:
    radial-gradient(circle at 30% 20%, rgba(62, 89, 108, 0.16), transparent 55%),
    linear-gradient(145deg, #d5e1eb, #c5d4e0);
  color: #4a5c6c;
}
html[data-bs-theme="light"] .home-page .home-card-icon.text-primary,
html[data-bs-theme="light"] .home-page .home-card-icon.text-info,
html[data-bs-theme="light"] .home-page .home-card-icon.text-secondary,
html[data-bs-theme="light"] .home-page .home-section-title .text-primary,
html[data-bs-theme="light"] .home-page .home-section-title .text-warning,
html[data-bs-theme="light"] .home-page .card-header .text-warning {
  color: #3e596c !important;
}
html[data-bs-theme="light"] .home-page .home-card-icon.text-success {
  color: #1f7a45 !important;
}
html[data-bs-theme="light"] .home-page .home-card-icon.text-warning {
  color: #9a7209 !important;
}
html[data-bs-theme="light"] .home-page .home-card-icon.text-danger {
  color: #b42318 !important;
}
html[data-bs-theme="light"] .home-page .btn-outline-primary,
html[data-bs-theme="light"] .home-page .btn-outline-secondary,
html[data-bs-theme="light"] .home-page .btn-outline-info,
html[data-bs-theme="light"] .home-page .btn-outline-success,
html[data-bs-theme="light"] .home-page .btn-outline-warning,
html[data-bs-theme="light"] .home-page .btn-outline-primary *,
html[data-bs-theme="light"] .home-page .btn-outline-secondary *,
html[data-bs-theme="light"] .home-page .btn-outline-info *,
html[data-bs-theme="light"] .home-page .btn-outline-success *,
html[data-bs-theme="light"] .home-page .btn-outline-warning * {
  background: transparent !important;
  border-color: #5d7386 !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .home-page .btn-outline-primary:hover,
html[data-bs-theme="light"] .home-page .btn-outline-secondary:hover,
html[data-bs-theme="light"] .home-page .btn-outline-info:hover,
html[data-bs-theme="light"] .home-page .btn-outline-success:hover,
html[data-bs-theme="light"] .home-page .btn-outline-warning:hover,
html[data-bs-theme="light"] .home-page .btn-outline-primary:hover *,
html[data-bs-theme="light"] .home-page .btn-outline-secondary:hover *,
html[data-bs-theme="light"] .home-page .btn-outline-info:hover *,
html[data-bs-theme="light"] .home-page .btn-outline-success:hover *,
html[data-bs-theme="light"] .home-page .btn-outline-warning:hover * {
  background: #3e596c !important;
  border-color: #3e596c !important;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .home-page .btn-primary,
html[data-bs-theme="light"] .home-page .home-ad-cta {
  background: #3e596c !important;
  border-color: #3e596c !important;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .home-page .progress {
  background-color: rgba(62, 89, 108, 0.18);
}
html[data-bs-theme="light"] .home-page .progress-bar {
  background-color: #3e596c !important;
}

/* Policy pages (privacy, terms, refund, security, about, contact, help).
   The public header matches the slate navbar, and the article sits on the
   same frosted panel as Community. Dark mode keeps the plain shell. */
html[data-bs-theme="light"] .qp-legal-shell header {
  background: #3e596c;
  border-bottom-color: rgba(0, 0, 0, 0.28) !important;
}
html[data-bs-theme="light"] .qp-legal-shell header .btn-outline-secondary,
html[data-bs-theme="light"] .qp-legal-shell header .btn-outline-secondary:hover,
html[data-bs-theme="light"] .qp-legal-shell header .btn-outline-secondary:focus {
  background: transparent !important;
  border-color: rgba(247, 250, 252, 0.45) !important;
  color: rgba(247, 250, 252, 0.92) !important;
}
html[data-bs-theme="light"] .qp-legal-shell header .btn-outline-secondary:hover,
html[data-bs-theme="light"] .qp-legal-shell header .btn-outline-secondary:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
html[data-bs-theme="light"] .qp-legal-shell header .qp-theme-toggle {
  color: rgba(247, 250, 252, 0.92);
  border-color: rgba(247, 250, 252, 0.45);
}
html[data-bs-theme="light"] .qp-legal-shell header .qp-theme-toggle:hover,
html[data-bs-theme="light"] .qp-legal-shell header .qp-theme-toggle:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(247, 250, 252, 0.7);
}
html[data-bs-theme="light"] .qp-legal-page {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(74, 102, 122, 0.12);
  border: 1px solid rgba(74, 98, 118, 0.18);
  border-radius: 0.85rem;
  padding: 1.35rem 1.35rem 1.75rem;
  box-shadow: 0 10px 26px rgba(28, 40, 51, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-bs-theme="light"] .qp-legal-page a:not(.btn) {
  color: #1a6aa8 !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
html[data-bs-theme="light"] .qp-legal-page a:not(.btn):hover,
html[data-bs-theme="light"] .qp-legal-page a:not(.btn):focus {
  color: #145488 !important;
}
html[data-bs-theme="light"] .qp-legal-shell .card.bg-dark,
html[data-bs-theme="light"] .qp-help-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(74, 102, 122, 0.12) !important;
  border-color: rgba(74, 98, 118, 0.18) !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .qp-help-note {
  border-left-color: #9a7209;
  color: #1c2833;
}

/* Auditor and certification-body shells keep their dark look until light is chosen. */
html[data-bs-theme="light"] .qp-ext-portal {
  --qp-ext-bg: #e7eef3;
  --qp-ext-surface: rgba(226, 236, 244, 0.72);
  --qp-ext-surface-2: rgba(232, 239, 245, 0.94);
  --qp-ext-line: rgba(28, 40, 51, 0.12);
  --qp-ext-text: #1c2833;
  --qp-ext-muted: #475a6a;
  --qp-ext-amber: #3e596c;
  --qp-ext-amber-soft: rgba(62, 89, 108, 0.1);
  --qp-ext-teal: #3e596c;
  --qp-ext-teal-soft: rgba(62, 89, 108, 0.08);
  color: #1c2833;
  background: linear-gradient(180deg, #f7fafc 0%, #e7eef3 32%, #e4ebf1 100%);
}
html[data-bs-theme="light"] .qp-ext-portal > footer {
  background: rgba(244, 247, 250, 0.92);
}
html[data-bs-theme="light"] .qp-ext-portal > footer a:hover {
  color: #2a4356 !important;
}
html[data-bs-theme="light"] .qp-ext-nav {
  background: #3e596c !important;
}
html[data-bs-theme="light"] .qp-ext-nav .navbar-nav .nav-link {
  color: rgba(247, 250, 252, 0.9) !important;
}
html[data-bs-theme="light"] .qp-ext-nav .navbar-nav .nav-link:hover,
html[data-bs-theme="light"] .qp-ext-nav .navbar-nav .nav-link:focus,
html[data-bs-theme="light"] .qp-ext-nav .navbar-nav .nav-link.active {
  color: #f7fafc !important;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
html[data-bs-theme="light"] .qp-ext-nav .dropdown-menu {
  background: rgba(232, 239, 245, 0.97);
}
html[data-bs-theme="light"] .qp-ext-nav .dropdown-item {
  color: #1c2833;
}
html[data-bs-theme="light"] .qp-ext-nav .dropdown-item:hover,
html[data-bs-theme="light"] .qp-ext-nav .dropdown-item:focus {
  background: rgba(62, 89, 108, 0.08);
  color: #1c2833;
}
html[data-bs-theme="light"] .qp-ext-nav .qp-nav-account-btn,
html[data-bs-theme="light"] .qp-nav-msg-btn {
  background: transparent !important;
  color: rgba(247, 250, 252, 0.9) !important;
}
html[data-bs-theme="light"] .qp-ext-nav .qp-nav-account-btn:hover,
html[data-bs-theme="light"] .qp-ext-nav .qp-nav-account-btn:focus,
html[data-bs-theme="light"] .qp-nav-msg-btn:hover,
html[data-bs-theme="light"] .qp-nav-msg-btn:focus,
html[data-bs-theme="light"] .qp-nav-msg-btn.active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .qp-ext-hero {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 46%),
    rgba(74, 102, 122, 0.12);
}
html[data-bs-theme="light"] .navbar-dark .navbar-toggler-icon {
  filter: invert(1) grayscale(1);
}

html[data-bs-theme="light"] #qpMessagesDrawer.offcanvas {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 40%),
    rgba(226, 236, 244, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #1c2833;
  border-left-color: rgba(74, 98, 118, 0.2);
  box-shadow: -12px 0 40px rgba(28, 40, 51, 0.08);
}
html[data-bs-theme="light"] #qpMessagesDrawer .offcanvas-header {
  background: transparent;
  border-bottom-color: rgba(28, 40, 51, 0.1);
}

/* Sign-in card is painted with fixed dark fills in auth.css. */
html[data-bs-theme="light"] .login-page::before {
  background:
    radial-gradient(ellipse 70% 45% at 12% 0%, rgba(90, 122, 150, 0.16), transparent 55%);
}
html[data-bs-theme="light"] .login-auth-card {
  border-color: rgba(74, 98, 118, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 46%),
    rgba(74, 102, 122, 0.14);
  box-shadow: 0 10px 26px rgba(28, 40, 51, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-bs-theme="light"] .login-auth-card__accent {
  background: #3e596c;
}
html[data-bs-theme="light"] .login-brand__title,
html[data-bs-theme="light"] .login-ad-title { color: #1c2833; }
html[data-bs-theme="light"] .login-brand__sub,
html[data-bs-theme="light"] .login-label,
html[data-bs-theme="light"] .login-policy-ack__label,
html[data-bs-theme="light"] .login-ad-text { color: #4a5c6c; }
html[data-bs-theme="light"] .login-brand__company,
html[data-bs-theme="light"] .login-divider,
html[data-bs-theme="light"] .login-portals__label,
html[data-bs-theme="light"] .login-legal a { color: #475a6a; }
html[data-bs-theme="light"] .login-quiet-link,
html[data-bs-theme="light"] .login-policy-ack__label a { color: #3a5870; }
html[data-bs-theme="light"] .login-quiet-link:hover,
html[data-bs-theme="light"] .login-policy-ack__label a:hover,
html[data-bs-theme="light"] .login-legal a:hover { color: #2a4356; }
html[data-bs-theme="light"] .login-input {
  border-color: rgba(28, 40, 51, 0.16) !important;
  background: #eef3f7 !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .login-input::placeholder { color: #8aa0b2; }
html[data-bs-theme="light"] .login-input:focus {
  border-color: #3e596c !important;
  box-shadow: 0 0 0 0.2rem rgba(62, 89, 108, 0.18) !important;
  background: #eef3f7 !important;
}
html[data-bs-theme="light"] .login-field__icon,
html[data-bs-theme="light"] .login-eye { color: #475a6a; }
html[data-bs-theme="light"] .login-eye:hover {
  color: #1c2833;
  background: rgba(28, 40, 51, 0.06);
}
html[data-bs-theme="light"] .login-policy-ack {
  background: rgba(62, 89, 108, 0.06);
  border-color: rgba(62, 89, 108, 0.18);
}
html[data-bs-theme="light"] .login-divider::before,
html[data-bs-theme="light"] .login-divider::after {
  background: rgba(28, 40, 51, 0.14);
}
html[data-bs-theme="light"] .login-portals {
  border-top-color: rgba(28, 40, 51, 0.12);
}
html[data-bs-theme="light"] .login-portal-chip {
  border-color: rgba(28, 40, 51, 0.14);
  background: rgba(226, 236, 244, 0.55);
  color: #243140;
}
html[data-bs-theme="light"] .login-portal-chip:hover,
html[data-bs-theme="light"] .login-portal-chip--accent:hover {
  border-color: #8aa0b2;
  background: rgba(62, 89, 108, 0.08);
  color: #1c2833;
}
html[data-bs-theme="light"] .login-ad {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 46%),
    rgba(74, 102, 122, 0.12);
  border-color: rgba(74, 98, 118, 0.18);
}
html[data-bs-theme="light"] .login-ad::before,
html[data-bs-theme="light"] .login-ad--plans::before,
html[data-bs-theme="light"] .login-ad--news::before,
html[data-bs-theme="light"] .login-ad--sponsor::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(228, 235, 241, 0.45));
}
html[data-bs-theme="light"] .login-ad-label {
  color: #475a6a;
  border-color: rgba(28, 40, 51, 0.14);
}
html[data-bs-theme="light"] .login-ad-brand,
html[data-bs-theme="light"] .login-ad--plans .login-ad-brand,
html[data-bs-theme="light"] .login-ad--news .login-ad-brand,
html[data-bs-theme="light"] .login-ad--sponsor .login-ad-brand { color: #3e596c; }
html[data-bs-theme="light"] .login-news-card:hover { border-color: rgba(62, 89, 108, 0.35); }

/* Certificates and products paint their own black surfaces. In light mode
   they use the same frosted cards, slate text, and quiet tables as Community.
   These selectors outrank the page rules, which set #2d2d2d with !important. */
html[data-bs-theme="light"] main :is(.card, .stats-card, .search-container, .table-container, .filter-group, .page-header, .ct-stat-card, .ct-table-container):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(74, 102, 122, 0.12) !important;
  border-color: rgba(74, 98, 118, 0.18) !important;
  box-shadow: 0 10px 26px rgba(28, 40, 51, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] main .card-body,
html[data-bs-theme="light"] main .card-header,
html[data-bs-theme="light"] main .card-footer {
  background: transparent !important;
  color: #1c2833 !important;
  border-color: rgba(28, 40, 51, 0.08) !important;
}
html[data-bs-theme="light"] main .card:hover,
html[data-bs-theme="light"] main .stats-card:hover,
html[data-bs-theme="light"] #certificatesStats .card:hover {
  transform: none !important;
}
html[data-bs-theme="light"] main :is(h1, h2, h3, h4, h5, h6, p, .card-title, .card-text, .cert-row-link):not(.text-white) {
  color: #1c2833 !important;
  text-shadow: none;
}
html[data-bs-theme="light"] .page-header h1 {
  color: #1c2833 !important;
  background: none !important;
  -webkit-text-fill-color: #1c2833 !important;
  text-shadow: none !important;
}
html[data-bs-theme="light"] .page-header .btn,
html[data-bs-theme="light"] .page-header .btn:hover {
  background: transparent !important;
  color: #243140 !important;
  border-color: #8aa0b2 !important;
  box-shadow: none !important;
}
html[data-bs-theme="light"] main .text-muted,
html[data-bs-theme="light"] main .cert-compliance-muted {
  color: #475a6a !important;
}
html[data-bs-theme="light"] #certComplianceToggle,
html[data-bs-theme="light"] #certComplianceToggle h5,
html[data-bs-theme="light"] #certComplianceToggle i {
  color: #1c2833 !important;
}
html[data-bs-theme="light"] main .table,
html[data-bs-theme="light"] main .table th,
html[data-bs-theme="light"] main .table td {
  background: transparent !important;
  background-color: transparent !important;
  color: #1c2833 !important;
  border-color: rgba(28, 40, 51, 0.1) !important;
}
html[data-bs-theme="light"] main .table thead th,
html[data-bs-theme="light"] .qp-list-page .table thead th,
html[data-bs-theme="light"] .ct-table-container .table thead th {
  background: rgba(74, 102, 122, 0.14) !important;
  color: #1c2833 !important;
  border-color: rgba(28, 40, 51, 0.08) !important;
}
html[data-bs-theme="light"] main .cert-row-clickable:hover td {
  background-color: rgba(62, 89, 108, 0.1) !important;
}
html[data-bs-theme="light"] main .cert-row-clickable:hover .cert-row-link {
  color: #2f4d63 !important;
}
html[data-bs-theme="light"] main .form-control,
html[data-bs-theme="light"] main .form-select,
html[data-bs-theme="light"] main .input-group-text,
html[data-bs-theme="light"] .modal .form-control,
html[data-bs-theme="light"] .modal .form-select {
  background-color: #eef3f7 !important;
  color: #1c2833 !important;
  border-color: rgba(28, 40, 51, 0.16) !important;
}
html[data-bs-theme="light"] main .form-select,
html[data-bs-theme="light"] .modal .form-select {
  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='%231c2833' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
html[data-bs-theme="light"] main .form-control::placeholder,
html[data-bs-theme="light"] .modal .form-control::placeholder {
  color: #8aa0b2 !important;
}
html[data-bs-theme="light"] main .form-select option,
html[data-bs-theme="light"] .modal .form-select option {
  background-color: #eef3f7 !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] main .pagination .page-link {
  background-color: #eef3f7 !important;
  color: #1c2833 !important;
  border-color: rgba(28, 40, 51, 0.16) !important;
}
html[data-bs-theme="light"] main .pagination .page-item.active .page-link {
  background-color: #3e596c !important;
  border-color: #3e596c !important;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] #exportDropdownMenu,
html[data-bs-theme="light"] #manageDropdownMenu {
  background: rgba(232, 239, 245, 0.97) !important;
  border: 1px solid rgba(74, 98, 118, 0.22) !important;
  box-shadow: 0 14px 32px rgba(28, 40, 51, 0.12) !important;
}
html[data-bs-theme="light"] #exportDropdownMenu .dropdown-item,
html[data-bs-theme="light"] #manageDropdownMenu .dropdown-item {
  color: #1c2833 !important;
}
html[data-bs-theme="light"] #exportDropdownMenu .dropdown-item:hover,
html[data-bs-theme="light"] #exportDropdownMenu .dropdown-item:focus,
html[data-bs-theme="light"] #manageDropdownMenu .dropdown-item:hover,
html[data-bs-theme="light"] #manageDropdownMenu .dropdown-item:focus {
  background-color: rgba(62, 89, 108, 0.12) !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] #manageDropdownBtn.dropdown-toggle::after {
  border-top-color: #3a5870 !important;
}
html[data-bs-theme="light"] main :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-danger, .btn-outline-warning, .btn-link),
html[data-bs-theme="light"] main :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-danger, .btn-outline-warning, .btn-link) * {
  color: #3a5870 !important;
}
html[data-bs-theme="light"] main .btn-outline-danger,
html[data-bs-theme="light"] main .btn-outline-danger * { color: #b42318 !important; }
html[data-bs-theme="light"] main .btn-outline-warning,
html[data-bs-theme="light"] main .btn-outline-warning * { color: #6e5216 !important; }
html[data-bs-theme="light"] main .btn-outline-info,
html[data-bs-theme="light"] main .btn-outline-info * { color: #0a5a6c !important; }
html[data-bs-theme="light"] main .btn-outline-primary,
html[data-bs-theme="light"] main .btn-outline-primary * { color: #2f4d63 !important; }
/* Hover fills the button and turns its text *and* icon light, together.
   This rule used to set only the light text, and relied on each page to fill
   the button: where none did (app.css keeps outline hovers pale), the icon
   went white on a pale background and vanished while the label stayed dark. */
html[data-bs-theme="light"] main :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-info):is(:hover, :focus-visible) {
  background-color: #3e596c !important;
  border-color: #3e596c !important;
}
html[data-bs-theme="light"] main .btn-outline-danger:is(:hover, :focus-visible) {
  background-color: #9b3a32 !important; /* a muted brick, not alarm red */
  border-color: #9b3a32 !important;
}
html[data-bs-theme="light"] main .btn-outline-warning:is(:hover, :focus-visible) {
  background-color: #7a5a1c !important; /* a muted ochre */
  border-color: #7a5a1c !important;
}
html[data-bs-theme="light"] main :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-danger, .btn-outline-warning):is(:hover, :focus-visible),
html[data-bs-theme="light"] main :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-danger, .btn-outline-warning):is(:hover, :focus-visible) * {
  color: #f7fafc !important;
}
html[data-bs-theme="light"] main .btn-warning,
html[data-bs-theme="light"] main .btn-warning *,
html[data-bs-theme="light"] main .btn-info,
html[data-bs-theme="light"] main .btn-info * {
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .modal-content,
html[data-bs-theme="light"] .modal-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(226, 236, 244, 0.96) !important;
  color: #1c2833 !important;
  border-color: rgba(74, 98, 118, 0.22) !important;
}
html[data-bs-theme="light"] .modal-header,
html[data-bs-theme="light"] .modal-footer {
  background: transparent !important;
  color: #1c2833 !important;
  border-color: rgba(28, 40, 51, 0.1) !important;
}
html[data-bs-theme="light"] .modal-title,
html[data-bs-theme="light"] .modal-body .form-label,
html[data-bs-theme="light"] .modal-body .form-check-label {
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .modal-body .form-text {
  color: #475a6a !important;
}
html[data-bs-theme="light"] .modal .btn-close {
  filter: none !important;
}

/* Storage dashboard: same frosted panels as Community. Dark mode keeps the
   plain bordered boxes; these rules never match while the theme is dark. */
html[data-bs-theme="light"] .storage-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(74, 102, 122, 0.12);
  border-color: rgba(74, 98, 118, 0.18) !important;
  box-shadow: 0 10px 26px rgba(28, 40, 51, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #1c2833;
}
html[data-bs-theme="light"] .storage-page .progress {
  background-color: rgba(62, 89, 108, 0.18);
}

/* Certificate Studio header buttons were neon cyan and blue, and Export
   was white text on a clear background. Light mode only. */
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) a.btn-info,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) a.btn-info:hover,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) a.btn-info:focus,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) #exportDropdown,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) #exportDropdown:hover,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) #exportDropdown:focus {
  background-color: transparent !important;
  background-image: none !important;
  border-color: #3e596c !important;
  color: #1c2833 !important;
  box-shadow: none !important;
}
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) a.btn-info:hover,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) #exportDropdown:hover,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) #exportDropdown:focus {
  background-color: rgba(62, 89, 108, 0.1) !important;
}
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) a.btn-info *,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) #exportDropdown,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) #exportDropdown * {
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) a.btn-primary,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) a.btn-primary:hover,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) a.btn-primary:focus {
  background-color: #3e596c !important;
  background-image: none !important;
  border-color: #3e596c !important;
  color: #f7fafc !important;
  box-shadow: none !important;
}
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) a.btn-primary * {
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn * {
  background-color: transparent !important;
  border-color: #5d7386 !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn-outline-danger,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn-outline-danger * {
  color: #b42318 !important;
  border-color: #b42318 !important;
}
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn:hover,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn:hover *,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn:focus,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn:focus * {
  background-color: #3e596c !important;
  border-color: #3e596c !important;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn-outline-danger:hover,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn-outline-danger:hover *,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn-outline-danger:focus,
html[data-bs-theme="light"] .qp-list-page:has(#certificatesStats) .cert-row-actions .btn-outline-danger:focus * {
  background-color: #b42318 !important;
  border-color: #b42318 !important;
  color: #f7fafc !important;
}

/* News hub. The hero stays a dark photo card. Everything else uses the
   same frosted slate as Community. Dark rules in app.css are untouched. */
html[data-bs-theme="light"] .news-msn-chip {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(74, 98, 118, 0.22);
  color: #1c2833;
}
html[data-bs-theme="light"] .news-msn-chip:hover {
  background: rgba(62, 89, 108, 0.08);
  border-color: #3e596c;
  color: #1c2833;
}
html[data-bs-theme="light"] .news-msn-chip.is-active {
  background: #3e596c;
  border-color: #3e596c;
  color: #f7fafc;
}
html[data-bs-theme="light"] .news-msn-filters .form-select {
  background-color: #eef3f7 !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='%231c2833' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .news-hub-empty,
html[data-bs-theme="light"] .news-msn-rail-item,
html[data-bs-theme="light"] .news-msn-card,
html[data-bs-theme="light"] .news-detail-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(74, 102, 122, 0.12);
  border-color: rgba(74, 98, 118, 0.18);
  box-shadow: 0 10px 26px rgba(28, 40, 51, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #1c2833;
}
html[data-bs-theme="light"] .news-msn-card:hover,
html[data-bs-theme="light"] .news-msn-rail-item:hover {
  transform: none;
  border-color: rgba(62, 89, 108, 0.35);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 46%),
    rgba(74, 102, 122, 0.16);
  box-shadow: 0 10px 22px rgba(28, 40, 51, 0.08);
}
html[data-bs-theme="light"] .news-msn-rail-title,
html[data-bs-theme="light"] .news-msn-card-title,
html[data-bs-theme="light"] .news-msn-section-label,
html[data-bs-theme="light"] .news-detail-summary {
  color: #1c2833;
}
html[data-bs-theme="light"] .news-msn-card-summary,
html[data-bs-theme="light"] .news-msn-rail .news-msn-meta,
html[data-bs-theme="light"] .news-msn-card .news-msn-meta {
  color: #475a6a;
}
html[data-bs-theme="light"] main .news-msn-hero .news-msn-hero-title {
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
html[data-bs-theme="light"] .news-msn-rail .news-msn-pill:not(.news-msn-pill--alert),
html[data-bs-theme="light"] .news-msn-card .news-msn-pill:not(.news-msn-pill--alert),
html[data-bs-theme="light"] .news-topic-badge {
  background: rgba(62, 89, 108, 0.12);
  border-color: rgba(74, 98, 118, 0.2);
  color: #1c2833;
}
html[data-bs-theme="light"] .news-alert-banner {
  background: rgba(180, 35, 24, 0.08);
  border-color: rgba(180, 35, 24, 0.28);
  color: #8f1d14;
}

/* Files list. Same frosted panels as Community. table-dark stays dark
   when the theme is dark, because these rules never match then. */
html[data-bs-theme="light"] .files-page .files-filters,
html[data-bs-theme="light"] .files-page .card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(74, 102, 122, 0.12) !important;
  border: 1px solid rgba(74, 98, 118, 0.18) !important;
  border-radius: 0.75rem;
  box-shadow: 0 10px 26px rgba(28, 40, 51, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .files-page .files-filters {
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem !important;
}
html[data-bs-theme="light"] .files-page .nav-pills .nav-link {
  color: #3a5870;
  border-radius: 0.5rem;
}
html[data-bs-theme="light"] .files-page .nav-pills .nav-link:hover {
  background: rgba(62, 89, 108, 0.08);
  color: #1c2833;
}
html[data-bs-theme="light"] .files-page .nav-pills .badge {
  background: rgba(62, 89, 108, 0.12) !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .files-page .nav-pills .nav-link.active .badge {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}
html[data-bs-theme="light"] .files-page .table-dark {
  --bs-table-color: #1c2833;
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(28, 40, 51, 0.1);
  --bs-table-hover-color: #1c2833;
  --bs-table-accent-bg: transparent;
}
html[data-bs-theme="light"] .files-page thead.table-dark th {
  background: transparent !important;
  color: #475a6a !important;
  box-shadow: none !important;
  border-bottom-color: rgba(74, 98, 118, 0.22) !important;
}
html[data-bs-theme="light"] .files-page .table-hover > tbody > tr:hover > * {
  background-color: rgba(62, 89, 108, 0.08) !important;
  color: #1c2833 !important;
  box-shadow: none !important;
}

html[data-bs-theme="light"] .reports-page .border.rounded {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(74, 102, 122, 0.12);
  border-color: rgba(74, 98, 118, 0.18) !important;
  border-radius: 0.85rem !important;
  box-shadow: 0 10px 26px rgba(28, 40, 51, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html[data-bs-theme="light"] .reports-page .border-warning {
  border-color: rgba(154, 114, 9, 0.45) !important;
}
html[data-bs-theme="light"] .reports-page .border-danger {
  border-color: rgba(180, 35, 24, 0.4) !important;
}
html[data-bs-theme="light"] .reports-page .text-warning {
  color: #9a7209 !important;
}
html[data-bs-theme="light"] .reports-page .text-danger {
  color: #b42318 !important;
}
html[data-bs-theme="light"] .reports-page .btn-primary {
  background: #3e596c !important;
  border-color: #3e596c !important;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .reports-page .btn-outline-primary,
html[data-bs-theme="light"] .reports-page .btn-outline-secondary,
html[data-bs-theme="light"] .reports-page .btn-outline-info {
  background: transparent !important;
  border-color: #5d7386 !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .reports-page .btn-outline-primary:hover,
html[data-bs-theme="light"] .reports-page .btn-outline-secondary:hover,
html[data-bs-theme="light"] .reports-page .btn-outline-info:hover {
  background: #3e596c !important;
  border-color: #3e596c !important;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .reports-page .progress {
  background-color: rgba(62, 89, 108, 0.18);
}
html[data-bs-theme="light"] .reports-page .progress-bar.bg-info {
  background-color: #3e596c !important;
}
html[data-bs-theme="light"] .reports-page .progress-bar.bg-warning {
  background-color: #9a7209 !important;
}
html[data-bs-theme="light"] .reports-page .progress-bar.bg-danger {
  background-color: #b42318 !important;
}

/* Checklist library. The filter selects used a background shorthand, which
   reset the chevron to repeat and tiled it across the control. */
html[data-bs-theme="light"] .cl-library .cl-lib-filters {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    rgba(74, 102, 122, 0.12);
  border-color: rgba(74, 98, 118, 0.18);
}
html[data-bs-theme="light"] .cl-library .cl-lib-filters .form-select {
  background-color: #eef3f7 !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='%231c2833' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.65rem center !important;
  background-size: 16px 12px !important;
  color: #1c2833 !important;
  border-color: rgba(28, 40, 51, 0.16) !important;
}
html[data-bs-theme="light"] .cl-library .cl-lib-filters .form-control {
  background-color: #eef3f7 !important;
  background-image: none !important;
  color: #1c2833 !important;
  border-color: rgba(28, 40, 51, 0.16) !important;
}
html[data-bs-theme="light"] .cl-library .nav-pills .nav-link {
  color: #3a5870;
}
html[data-bs-theme="light"] .cl-library .nav-pills .nav-link:hover,
html[data-bs-theme="light"] .cl-library .nav-pills .nav-link:focus {
  background: rgba(62, 89, 108, 0.08);
  color: #1c2833;
}
html[data-bs-theme="light"] .cl-library .nav-pills .nav-link.active {
  background: #3e596c;
  color: #f7fafc;
}
html[data-bs-theme="light"] .qp-ext-portal .cl-library .btn-primary {
  --bs-btn-bg: #3e596c;
  --bs-btn-border-color: #3e596c;
  --bs-btn-hover-bg: #324a5b;
  --bs-btn-hover-border-color: #324a5b;
  --bs-btn-color: #f7fafc;
  --bs-btn-hover-color: #f7fafc;
  background-color: #3e596c !important;
  border-color: #3e596c !important;
  color: #f7fafc !important;
}


/* ---- Readability fixes found on the auditor pages, 2026-10-20 ----------
   Measured with the page's own colors: anything under 4.5:1 (3:1 for large
   text) against its background. */
/* Status badges kept their dark-mode pastel text (Verified was 1.07:1).
   Calm, glass-style: a frosted white chip that reads on any tinted card,
   with a muted dark tone per status instead of a saturated fill. */
html[data-bs-theme="light"] .qp-ext-badge {
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html[data-bs-theme="light"] .qp-ext-badge--ok {
  color: #1d5e3f;
  border-color: rgba(29, 94, 63, 0.28);
}
html[data-bs-theme="light"] .qp-ext-badge--warn {
  color: #6e5216;
  border-color: rgba(110, 82, 22, 0.28);
}
html[data-bs-theme="light"] .qp-ext-badge--danger {
  color: #8f2f28;
  border-color: rgba(143, 47, 40, 0.28);
}
html[data-bs-theme="light"] .qp-ext-badge--muted {
  color: #475a6a;
  border-color: rgba(28, 40, 51, 0.16);
}
/* Bootstrap's own grey (#6c757d) is 4:1 on these backgrounds. */
html[data-bs-theme="light"] .link-secondary {
  color: #4a5c6c !important;
}
html[data-bs-theme="light"] .link-secondary:hover {
  color: #1c2833 !important;
}

/* List rows hard-coded `bg-dark text-light` (the auditor workspace's module
   list, traceability alerts, audit findings). `.text-light` turns dark in
   this theme but `.bg-dark` stayed black, so the rows read as black boxes
   with dark text. Same calm glass as the dark-card override above. */
html[data-bs-theme="light"] .list-group-item.bg-dark {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 60%),
    rgba(74, 102, 122, 0.08) !important;
  color: #1c2833 !important;
  border-color: rgba(74, 98, 118, 0.16) !important;
}
html[data-bs-theme="light"] .list-group-item.bg-dark.list-group-item-action:hover,
html[data-bs-theme="light"] .list-group-item.bg-dark.list-group-item-action:focus-visible {
  background: rgba(62, 89, 108, 0.12) !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .list-group-item.bg-dark .text-light {
  color: #1c2833 !important;
}
/* A soft dark tint meant for the dark theme turns into a grey slab here. */
html[data-bs-theme="light"] .bg-dark.bg-opacity-25 {
  background-color: rgba(74, 102, 122, 0.08) !important;
}

/* Bootstrap's info cyan (#0dcaf0) is loud on the frosted surfaces and only
   1.6:1 on them; a calm teal that reads. */
html[data-bs-theme="light"] .text-info {
  color: #245f6f !important;
}

/* Success green and helper text fell just under 4.5:1 on the tinted cards
   (pricing, account settings). One step deeper, same calm hue. */
html[data-bs-theme="light"] .text-success {
  color: #155c34 !important;
}
html[data-bs-theme="light"] main .btn-outline-success,
html[data-bs-theme="light"] main .btn-outline-success * {
  color: #1d5e3f !important;
  border-color: rgba(29, 94, 63, 0.45) !important;
}
html[data-bs-theme="light"] main .btn-outline-success:is(:hover, :focus-visible),
html[data-bs-theme="light"] main .btn-outline-success:is(:hover, :focus-visible) * {
  background-color: #1d5e3f !important;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .qp-ext-portal .form-text {
  color: #44576a;
}

/* The warning button took the theme's deep ochre (--accent-yellow) as its
   fill while the rule above kept its text dark: 3.4:1. A calm, lighter
   honey fill keeps the dark text readable. */
html[data-bs-theme="light"] main .btn-warning {
  background-color: #e8c97a !important;
  border-color: #d9b45c !important;
}
html[data-bs-theme="light"] main .btn-warning:is(:hover, :focus-visible) {
  background-color: #dfbb62 !important;
  border-color: #cfa547 !important;
}

/* The auditor's strip above company modules was styled for dark only:
   white button text on bright cyan (1.96:1) and on pale blue (1.42:1),
   and ochre "Auditor workspace" at 3.1:1. Calm glass with the theme slate. */
html[data-bs-theme="light"] .qp-auditor-banner {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(62, 89, 108, 0.22) !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .qp-auditor-banner :is(span, strong, i) {
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .qp-auditor-banner .text-secondary {
  color: #475a6a !important;
}
html[data-bs-theme="light"] .qp-auditor-banner .btn-info,
html[data-bs-theme="light"] .qp-auditor-banner .btn-info * {
  background-color: #3e596c !important;
  border-color: #3e596c !important;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .qp-auditor-banner .btn-info:hover {
  background-color: #324a5b !important;
}
html[data-bs-theme="light"] .qp-auditor-banner .btn-outline-light,
html[data-bs-theme="light"] .qp-auditor-banner .btn-outline-light * {
  background-color: transparent !important;
  border-color: rgba(62, 89, 108, 0.45) !important;
  color: #2f4d63 !important;
}
html[data-bs-theme="light"] .qp-auditor-banner .btn-outline-light:hover,
html[data-bs-theme="light"] .qp-auditor-banner .btn-outline-light:hover * {
  background-color: rgba(62, 89, 108, 0.1) !important;
  color: #1c2833 !important;
}

/* Files tabs: the active pill kept Bootstrap's bright blue fill while the
   rule above set its text slate (1.7:1). The theme slate, with light text. */
html[data-bs-theme="light"] .files-page .nav-pills .nav-link.active {
  background: #3e596c !important;
  color: #f7fafc !important;
}
html[data-bs-theme="light"] .files-page .nav-pills .nav-link.active .badge {
  background: rgba(16, 24, 32, 0.28) !important;
  color: #f7fafc !important;
}

/* Field labels sat at 4.4:1 on the tinted filter panels. Labels name what a
   box is for, so they carry body-text weight rather than the muted grey. */
html[data-bs-theme="light"] main .form-label {
  color: #2b3d4c;
}


/* ---- Company pages, 2026-10-20 ------------------------------------------ */
/* Bootstrap's warning yellow (#ffc107) as a text colour: the stat numbers on
   Products, Certificates and the type pages were 1.2:1. Calm ochre. */
html[data-bs-theme="light"] .text-warning {
  color: #6e5216 !important;
}
/* Inline code in Bootstrap's pink was under 3:1 on the tinted panels. */
html[data-bs-theme="light"] code {
  color: #8a2f5a;
}
/* A warning badge with dark text: honey fill, dark text. */
html[data-bs-theme="light"] .badge.bg-warning,
html[data-bs-theme="light"] .badge.text-bg-warning {
  background-color: #e8c97a !important;
  color: #1c2833 !important;
}
/* Approval counters were solid Bootstrap blue/green/grey cards whose text
   the theme had already turned dark (3.3:1). Calm glass, slate accent. */
html[data-bs-theme="light"] .approval-stat-card {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(62, 89, 108, 0.18) !important;
  border-left: 3px solid #3e596c !important;
  color: #1c2833 !important;
}
html[data-bs-theme="light"] .approval-stat-card.bg-success { border-left-color: #1d5e3f !important; }
html[data-bs-theme="light"] .approval-stat-card.bg-secondary { border-left-color: #6b7f8f !important; }
html[data-bs-theme="light"] .approval-stat-card.bg-warning { border-left-color: #a07a2c !important; }
html[data-bs-theme="light"] .approval-stat-card.bg-danger { border-left-color: #9b3a32 !important; }
html[data-bs-theme="light"] .approval-stat-card.bg-info { border-left-color: #245f6f !important; }
html[data-bs-theme="light"] .approval-stat-card :is(.stat-label, .stat-value, .card-body) {
  color: #1c2833 !important;
}

/* Help centre cards sit on a darker tint than the page: step text and links
   fell to 4.4:1 and 3.6:1 there. */
html[data-bs-theme="light"] .qp-legal-page .qp-help-card,
html[data-bs-theme="light"] .qp-legal-page .qp-help-card :is(li, p) {
  color: #2b3d4c;
}
html[data-bs-theme="light"] .qp-legal-page .qp-help-card a {
  color: #24506e !important; /* the page's own link colour is set inline */
}
/* Links in the legal and help pages' body copy (inline blue, 4.2:1). */
html[data-bs-theme="light"] .qp-legal-page a:not(.btn) {
  color: #24506e !important;
}