/* =====================================================================
   Deep Quality Portal — Global Stylesheet
   --------------------------------------------------------------------
   Goals:
     - One source of truth for the dark theme.
     - Build on top of Bootstrap 5 instead of fighting it.
     - Avoid destructive selectors (no `* { color: ... !important }`).
     - Limit the use of !important to surgical overrides for Bootstrap.
   ===================================================================== */

/* ---------- Web fonts ----------------------------------------------
   Inter and JetBrains Mono used to be pulled from fonts.googleapis.com. The
   Content-Security-Policy allows stylesheets from ourselves and jsDelivr only,
   so the browser refused both on every page load and the site has been
   rendering in the fallback stack all along — the imports cost two blocked
   requests and bought nothing.

   Widening the CSP is the wrong fix: it would send every visitor's IP address
   to Google on every page, which is a third party the privacy policy does not
   name. The font stacks below fall back to the platform's own UI font, which
   is what everyone has been seeing anyway. To bring Inter back, self-host the
   woff2 files under static/fonts and declare @font-face here. */
@import url('list-pages.css');

/* ---------- Design tokens ------------------------------------------ */
:root {
  /* Surface colors */
  --bg-primary:   #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary:  #21262d;
  --bg-elevated:  #2d333b;

  /* Text colors */
  --text-primary:   #f0f6fc;
  --text-secondary: #c9d1d9;
  --text-muted:     #8b949e;
  --text-inverse:   #0d1117;

  /* Borders */
  --border-color:        #30363d;
  --border-color-strong: #3d444d;

  /* Brand & accents */
  --brand:               #4a90e2;
  --brand-glow:          rgba(74, 144, 226, 0.45);
  --accent-blue:         #1f6feb;
  --accent-blue-hover:   #1a5fcf;
  --accent-green:        #238636;
  --accent-green-hover:  #1f7a32;
  --accent-red:          #da3633;
  --accent-red-hover:    #c5302e;
  --accent-yellow:       #d29922;
  --accent-yellow-hover: #bf8700;
  --accent-purple:       #8b5cf6;
  --accent-orange:       #ea580c;

  /* Text weights of the semantic colors.

     The --accent-* values above are button fills: white sits on top of them.
     Bootstrap's .text-* utilities are a different job — colored text on the
     page's own ground — and its defaults are chosen for a white page. Every
     one of them was measured against all four of our surfaces by crawling
     152 pages; the defaults land between 2.94:1 and 4.20:1, under the 4.5
     that 14px text needs. These three clear 4.5 on all four, worst case:

       ground          #dc3545  ->  #ff7b72   #198754 -> #3fb950   #0d6efd -> #58a6ff
       --bg-primary     4.18        7.51       4.18      7.45       4.20      7.49
       --bg-secondary   3.82        6.86       3.82      6.81       3.84      6.85
       --bg-tertiary    3.36        6.04       3.36      5.99       3.38      6.03
       bg-body-tertiary 2.94        5.28       2.94      5.24       2.96      5.27
  */
  --text-danger:  #ff7b72;
  --text-success: #3fb950;
  --text-link:    #58a6ff;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Layout */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* Bootstrap overrides driven from our tokens */
  --bs-body-bg:          var(--bg-primary);
  --bs-body-color:       var(--text-primary);
  --bs-emphasis-color:   var(--text-primary);
  --bs-secondary-color:  var(--text-secondary);
  --bs-tertiary-color:   var(--text-muted);
  --bs-border-color:     var(--border-color);
  --bs-link-color:       var(--brand);
  --bs-link-hover-color: var(--accent-blue-hover);
}

/* ---------- Base elements ------------------------------------------ */
html, body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}
a:hover { color: var(--accent-blue-hover); }

code, pre, kbd { font-family: var(--font-mono); }

::selection { background: var(--brand-glow); color: var(--text-primary); }

/* Scrollbars (WebKit) */
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb  { background: var(--border-color-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---------- Top welcome / status bar ------------------------------- */
.qp-welcome-bar {
  background: linear-gradient(90deg, var(--bg-secondary), var(--bg-tertiary));
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 6px 0;
}
.qp-welcome-bar a { color: var(--brand); font-weight: 600; }
.qp-welcome-bar a:hover { color: var(--accent-blue-hover); }

/* ---------- "Acting as" banner (super admin viewing as a company) -- */
.qp-acting-banner {
  background: linear-gradient(90deg,
    rgba(210, 153, 34, 0.18),
    rgba(210, 153, 34, 0.06));
  border-bottom: 1px solid rgba(210, 153, 34, 0.55);
  color: var(--accent-yellow);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 0;
  position: relative;
  z-index: 5;
}
.qp-acting-banner strong  { color: #ffe7a8; margin-left: 4px; }
.qp-acting-banner .badge  { font-size: 0.7rem; }
.qp-acting-banner .btn-warning { font-weight: 600; }

/* ---------- Navbar -------------------------------------------------- */
/* Stay above page content so dropdowns receive clicks (Bootstrap menus use z-index ~1000). */
.navbar.sticky-top {
  z-index: 1035;
}
.navbar .dropdown-menu {
  z-index: 2000;
  font-size: 0.8rem; /* match tightened navbar type */
}

.navbar {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
.navbar-brand .qp-brand-easy {
  letter-spacing: 0.02em;
  font-size: 0.72rem;
  text-transform: uppercase;
}
.navbar-brand .qp-brand-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.navbar.qp-auth-navbar .navbar-brand {
  text-shadow: none;
}
.navbar-brand {
  color: var(--brand) !important;
  font-weight: 700;
  font-size: 1.12rem; /* was 1.4rem — ~20% smaller */
  letter-spacing: 0.3px;
  text-shadow: 0 0 18px var(--brand-glow);
}
.navbar-nav .nav-link,
.navbar-nav button.nav-link {
  color: var(--text-secondary) !important;
  font-weight: 500;
  font-size: 0.8rem; /* ~20% smaller than default 1rem */
  border-radius: var(--radius-sm);
  margin: 0 2px;
  padding: 0.45rem 0.85rem !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav button.nav-link:hover,
.navbar-nav button.nav-link:focus {
  color: var(--text-primary) !important;
  background-color: var(--bg-tertiary);
}
.navbar-nav .nav-link.active,
.navbar-nav button.nav-link.active {
  color: var(--brand) !important;
  background-color: var(--bg-tertiary);
}
.navbar-nav .nav-link i,
.navbar-nav button.nav-link i { margin-right: 6px; }

/* ---------- Cards --------------------------------------------------- */
.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.card-header {
  background-color: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-weight: 600;
}
.card-footer {
  background-color: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.card-title { color: var(--text-primary); }
.card-text  { color: var(--text-secondary); }

.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card.shadow,
.card.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* hover-lift utility used on landing tiles */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand);
}

/* ---------- Tables -------------------------------------------------- */
.table {
  --bs-table-bg:           var(--bg-secondary);
  --bs-table-color:        var(--text-primary);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg:   var(--bg-tertiary);
  --bs-table-hover-bg:     var(--bg-elevated);
  color: var(--text-primary);
}
.table thead th {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.table td, .table th {
  border-color: var(--border-color);
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

/* ---------- Forms --------------------------------------------------- */
.form-label { color: var(--text-primary); font-weight: 500; }
.form-control,
.form-select {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus,
.form-select:focus {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem var(--brand-glow);
}
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--bg-secondary);
  color: var(--text-muted);
}
/* Radios and checkboxes were the one control this file never themed, so they
   fell back to Bootstrap's own dark defaults: a transparent box with a
   border a shade off the card behind it. On a rating question that is five
   circles nobody can see well enough to aim at. Same treatment as the other
   controls — a filled box on a visible border, and the brand colour once
   it is chosen. */
.form-check-input {
  background-color: var(--bg-tertiary);
  /* Bright, because you have to aim at it. Bootstrap's dark default sits at
     2.3:1 against the card and the border variables are worse at 1.8:1,
     where WCAG asks 3:1 of a control. This is 14.6:1. */
  border: 1px solid #e6edf3;
}
.form-check-input:hover:not(:disabled):not(:checked) {
  border-color: var(--brand);
}
.form-check-input:checked {
  /* Brighter than --brand: 8.9:1 against the card, against 5.3:1, so the
     chosen one carries down a column of five. */
  background-color: #79c0ff;
  border-color: #79c0ff;
  box-shadow: 0 0 0 2px var(--brand-glow);
}
/* Bootstrap draws the tick and the dot in white, which on a fill this bright
   is 1.9:1 — the mark all but disappears at the moment it starts to matter.
   Same shapes, drawn dark: 9.7:1. */
.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='%230d1117' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.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='%230d1117'/%3e%3c/svg%3e");
}
.form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem var(--brand-glow);
}
/* Disabled here is almost always the builder's question preview, whose
   entire job is to be looked at — so it is drawn at full strength, not
   dimmed. Bootstrap fades both the control and its label (0.5 opacity on
   each), which put the border at 4.4:1 and the option text at 3.8:1 while
   the rest of the page sits at 14.6 and 11.2. Next to each other that reads
   as broken, not as read-only.

   What says "not yours to touch" is the cursor and the muted fill of a
   chosen option — never the fading. */
.form-check-input:disabled {
  background-color: var(--bg-secondary);
  border-color: #e6edf3;
  opacity: 1;
  cursor: default;
}
.form-check-input:disabled:checked {
  background-color: var(--text-secondary);
  border-color: var(--text-secondary);
  box-shadow: none;
}
.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
  color: var(--text-primary);
  opacity: 1;
  cursor: default;
}
/* The label is the bigger target of the two; make it look like one. */
.form-check-label { color: var(--text-primary); }
.form-check-input:not(:disabled) ~ .form-check-label { cursor: pointer; }

.form-text { color: var(--text-muted); }
.input-group-text {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-color: var(--border-color);
}

/* ---------- Buttons ------------------------------------------------- */
.btn { font-weight: 500; border-radius: var(--radius-sm); transition: all 0.15s ease; }

.btn-primary {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-blue-hover);
  border-color: var(--accent-blue-hover);
  color: #fff;
}

.btn-success         { background-color: var(--accent-green); border-color: var(--accent-green); color: #fff; }
.btn-success:hover   { background-color: var(--accent-green-hover); border-color: var(--accent-green-hover); color: #fff; }
.btn-danger          { background-color: var(--accent-red); border-color: var(--accent-red); color: #fff; }
.btn-danger:hover    { background-color: var(--accent-red-hover); border-color: var(--accent-red-hover); color: #fff; }
.btn-warning         { background-color: var(--accent-yellow); border-color: var(--accent-yellow); color: var(--text-inverse); }
.btn-warning:hover   { background-color: var(--accent-yellow-hover); border-color: var(--accent-yellow-hover); color: var(--text-inverse); }

.btn-secondary {
  background-color: var(--bg-elevated);
  border-color: var(--border-color-strong);
  color: var(--text-primary);
}
.btn-secondary:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
  background-color: transparent;
  color: var(--text-primary);
}
.btn-outline-primary   { border-color: var(--accent-blue); }
.btn-outline-primary:hover  { background-color: var(--accent-blue); color: #fff; }
.btn-outline-success   { border-color: var(--accent-green); }
.btn-outline-success:hover  { background-color: var(--accent-green); color: #fff; }
.btn-outline-danger    { border-color: var(--accent-red); }
.btn-outline-danger:hover   { background-color: var(--accent-red); color: #fff; }
.btn-outline-warning   { border-color: var(--accent-yellow); }
.btn-outline-warning:hover  { background-color: var(--accent-yellow); color: var(--text-inverse); }
.btn-outline-info      { border-color: var(--brand); }
.btn-outline-info:hover     { background-color: var(--brand); color: #fff; }
.btn-outline-secondary { border-color: var(--border-color-strong); color: var(--text-secondary); }
.btn-outline-secondary:hover { background-color: var(--bg-elevated); color: var(--text-primary); }

.btn-light {
  background-color: var(--bg-elevated);
  border-color: var(--border-color-strong);
  color: var(--text-primary);
}
.btn-light:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }

/* Disabled state */
.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Dropdowns ---------------------------------------------- */
.dropdown-menu {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.4rem 0;
}
.dropdown-header {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}
.dropdown-item {
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--accent-blue);
  color: #fff;
}
.dropdown-item i { margin-right: 0.5rem; }
.dropdown-divider { border-color: var(--border-color); }

/* ---------- Badges -------------------------------------------------- */
.badge { font-weight: 500; padding: 0.4em 0.7em; border-radius: var(--radius-sm); }
.badge.bg-primary   { background-color: var(--accent-blue) !important; color: #fff !important; }
.badge.bg-success   { background-color: var(--accent-green) !important; color: #fff !important; }
.badge.bg-danger    { background-color: var(--accent-red) !important; color: #fff !important; }
.badge.bg-warning   { background-color: var(--accent-yellow) !important; color: var(--text-inverse) !important; }
.badge.bg-info      { background-color: var(--brand) !important; color: var(--text-inverse) !important; }
.badge.bg-secondary { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; }
.badge.bg-light     { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; }

/* ---------- Alerts -------------------------------------------------- */
.alert { border: 1px solid transparent; border-radius: var(--radius-md); }
.alert-primary  { background-color: rgba(31, 111, 235, 0.12); border-color: rgba(31, 111, 235, 0.35); color: #a8c7ff; }
.alert-success  { background-color: rgba(35, 134, 54, 0.12); border-color: rgba(35, 134, 54, 0.35); color: #7ee2a8; }
.alert-danger   { background-color: rgba(218, 54, 51, 0.12); border-color: rgba(218, 54, 51, 0.35); color: #ff9b9b; }
.alert-warning  { background-color: rgba(210, 153, 34, 0.12); border-color: rgba(210, 153, 34, 0.35); color: #f0c669; }
.alert-info     { background-color: rgba(74, 144, 226, 0.12); border-color: rgba(74, 144, 226, 0.35); color: #8fbcef; }

/* ---------- Modals -------------------------------------------------- */
.modal-content {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--border-color); }
.modal-footer { border-top: 1px solid var(--border-color); }
.btn-close { filter: invert(1) brightness(1.2); opacity: 0.8; }
.btn-close:hover { opacity: 1; }

/* ---------- Notifications ------------------------------------------ */
#notificationDropdown {
  width: 360px;
  max-height: 420px;
  overflow-y: auto;
}
.notification-item {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.9rem;
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover      { background-color: var(--bg-elevated); }

/* ---------- Text utilities ----------------------------------------- */
.text-muted     { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-danger    { color: var(--text-danger) !important; }
.text-success   { color: var(--text-success) !important; }
.text-primary   { color: var(--text-link) !important; }

/* `bg-body-tertiary` (#2b3035) is the lightest ground the app puts text on,
   and the only one where --text-muted falls short — 4.33:1. */
.bg-body-tertiary .text-muted { color: var(--text-secondary) !important; }

/* ---------- Toast --------------------------------------------------- */
.toast { background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); }

/* ---------- Pagination --------------------------------------------- */
.page-link {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}
.page-link:hover {
  background-color: var(--bg-elevated);
  border-color: var(--border-color-strong);
  color: var(--text-primary);
}
.page-item.active .page-link {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
}
.page-item.disabled .page-link {
  background-color: var(--bg-secondary);
  color: var(--text-muted);
}

/* ---------- Animations --------------------------------------------- */
@keyframes qp-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qp-fade-in { animation: qp-fade-in 0.25s ease-out both; }

@keyframes qp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.05); }
}
.qp-pulse { animation: qp-pulse 2s ease-in-out infinite; }

/* ---------- Flash stack (optional bottom toast — e.g. Company Profile edit) ----- */
.qp-flash-stack-bottom {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  left: auto;
  width: min(100%, 420px);
  max-width: calc(100vw - 2rem);
  z-index: 1060;
  pointer-events: none;
}
.qp-flash-stack-bottom .alert {
  pointer-events: auto;
  margin-bottom: 0.5rem !important;
  box-shadow: 0 0.35rem 1.25rem rgba(0, 0, 0, 0.45);
}
.qp-flash-stack-bottom .alert:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 576px) {
  .qp-flash-stack-bottom {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: none;
  }
}
@media print {
  .qp-flash-stack-bottom {
    display: none !important;
  }
}

/* Company profile gallery — click-to-zoom lightbox */
.cp-lightbox .modal-content { background: rgba(0, 0, 0, 0.94); }
.cp-lightbox .cp-lightbox-img {
  max-width: min(100vw, 100%);
  max-height: calc(100vh - 110px);
  object-fit: contain;
  user-select: none;
}
.cp-lightbox .cp-lightbox-prev,
.cp-lightbox .cp-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.85;
}
.cp-lightbox .cp-lightbox-prev { left: 1.5rem; }
.cp-lightbox .cp-lightbox-next { right: 1.5rem; }
.cp-lightbox .cp-lightbox-prev:hover,
.cp-lightbox .cp-lightbox-next:hover { opacity: 1; }
.cp-lightbox .cp-lightbox-counter { font-weight: 500; }

/* Company profile edit — drag-and-drop reordering visual feedback */
.cp-manage-section-head {
  cursor: grab;
}
.cp-manage-section-head:active { cursor: grabbing; }
.cp-manage-q-card { cursor: grab; }
.cp-manage-q-card:active { cursor: grabbing; }
.cp-dnd-ghost {
  opacity: 0.35;
  background: rgba(13, 110, 253, 0.07) !important;
  outline: 2px dashed rgba(13, 110, 253, 0.5);
  outline-offset: -2px;
}
.cp-dnd-chosen {
  cursor: grabbing;
  box-shadow: 0 6px 18px -6px rgba(13, 110, 253, 0.45);
}
/* Don't show grab cursor over form fields inside cards */
.cp-manage-section-head input,
.cp-manage-section-head button,
.cp-manage-section-head form,
.cp-manage-q-card textarea,
.cp-manage-q-card input,
.cp-manage-q-card button,
.cp-manage-q-card a {
  cursor: auto;
}

/* Company profile edit — floating “View profile” (always visible while scrolling) */
.cp-manage-view-fab {
  position: fixed;
  bottom: 1.25rem;
  inset-inline-start: 1rem;
  z-index: 1045;
  max-width: calc(100vw - 2rem);
}
@media (max-width: 576px) {
  .cp-manage-view-fab {
    inset-inline-start: 0.75rem;
    bottom: 1rem;
    font-size: 0.9rem;
    padding-inline: 0.75rem !important;
  }
}

/* Company profile edit: two-column builder (sections) | suggestions */
.cp-manage-container {
  max-width: 1320px;
  padding-bottom: 5.5rem; /* avoid covering last controls with fixed View profile FAB */
}
.cp-manage-split .cp-suggestions-column {
  position: sticky;
  top: 1rem;
  align-self: flex-start;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding-right: 2px; /* room for scrollbar */
}
@media (max-width: 991.98px) {
  .cp-manage-split .cp-suggestions-column {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

/* Company profile VIEW — section accordion: dark surfaces + subtle accent border */
#cpSections .cp-profile-section {
  border: 1px solid var(--border-color);
  border-left: 3px solid rgba(74, 144, 226, 0.65);
  border-radius: var(--radius-md);
  background: rgba(22, 27, 34, 0.55);
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
}
#cpSections .cp-profile-section .accordion-button {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: none;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
#cpSections .cp-profile-section .accordion-button:not(.collapsed) {
  background: rgba(45, 51, 59, 0.95);
}
#cpSections .cp-profile-section .accordion-button::after {
  filter: brightness(1.15);
}
#cpSections .cp-profile-section .accordion-body {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

/* Company profile VIEW — Q&A boxes (neutral surfaces for dark theme; only used on view template) */
.cp-profile-q {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-left: 3px solid rgba(130, 170, 220, 0.55);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  color: var(--text-primary);
  font-weight: 600;
}

.cp-profile-a {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-left: 3px solid rgba(148, 163, 184, 0.45);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  color: var(--text-secondary);
  min-height: 2.5rem;
}

.cp-profile-a-empty {
  color: var(--text-muted);
  opacity: 0.85;
}

.cp-profile-qa-row:last-child {
  margin-bottom: 0 !important;
}

#cp-sections-workspace > .card-header {
  background: rgba(31, 111, 235, 0.1);
  border-bottom: 1px solid rgba(31, 111, 235, 0.28);
}

.cp-manage-section-block {
  padding: 0.65rem 0.85rem 0.85rem 1rem !important;
  margin-left: 0;
  background: rgba(22, 27, 34, 0.72);
  border: 1px solid var(--border-color);
  border-left: 3px solid rgba(74, 144, 226, 0.75);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Section title row (manage) — dark surface + clean border (no yellow) */
.cp-manage-section-head {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.6rem;
}

.cp-manage-section-head .form-control {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
.cp-manage-section-head .form-control::placeholder {
  color: var(--text-muted);
}
.cp-manage-section-head .form-control:focus {
  background: var(--bg-elevated) !important;
  border-color: rgba(74, 144, 226, 0.75) !important;
  box-shadow: 0 0 0 0.15rem rgba(74, 144, 226, 0.22);
  color: var(--text-primary);
}

/* After POST (reorder): anchor scroll lands here without jumping under fixed navbar */
.cp-manage-q-anchor,
[id^="cp-section-"] {
  scroll-margin-top: 5.5rem;
}

.cp-manage-q-card {
  background: rgba(13, 17, 23, 0.5) !important;
  border: 1px solid var(--border-color-strong) !important;
  border-left: 3px solid rgba(88, 166, 255, 0.75) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
}

.cp-manage-q-area {
  background: rgba(31, 111, 235, 0.08);
  border: 1px solid rgba(88, 166, 255, 0.5);
  border-left: 3px solid rgba(88, 166, 255, 0.65);
  border-radius: 0.375rem;
}

.cp-manage-a-area {
  background: rgba(35, 134, 54, 0.12);
  border: 1px solid rgba(46, 160, 67, 0.45);
  border-left: 3px solid rgba(46, 160, 67, 0.6);
  border-radius: 0.375rem;
}

.cp-manage-add-qa-box {
  background: rgba(74, 144, 226, 0.06);
  border: 1px solid rgba(74, 144, 226, 0.22) !important;
  border-radius: var(--radius-sm);
}

/* Question card: compact toolbar (Order | Save+Delete icons) */
.cp-manage-q-card--tight .cp-manage-q-toolbar {
  margin-top: 0.22rem;
  padding-top: 0.22rem;
  border-top: 1px solid var(--border-color);
}
.cp-manage-q-save-del {
  gap: 0.18rem !important;
}
.cp-manage-q-act {
  font-size: 0.62rem !important;
  line-height: 1;
  padding: 0.06rem 0.28rem !important;
  border-radius: 0.22rem;
}
.cp-manage-q-icon-btn {
  padding: 0.04rem 0.24rem !important;
  min-width: 0;
}
.cp-manage-q-icon-btn i {
  font-size: 0.85em;
  vertical-align: -0.05em;
}
.cp-manage-q-toolbar-meta {
  font-size: 0.58rem;
  margin-right: 0.12rem;
  white-space: nowrap;
}
.cp-manage-q-card--tight .btn-outline-secondary.cp-manage-q-act.cp-manage-q-icon-btn {
  padding: 0.03rem 0.2rem !important;
}
.cp-manage-q-card--tight .btn-primary.cp-manage-q-act.cp-manage-q-icon-btn {
  padding: 0.04rem 0.26rem !important;
}
.cp-manage-q-card--tight .btn-outline-danger.cp-manage-q-act.cp-manage-q-icon-btn {
  padding: 0.04rem 0.26rem !important;
}

/* Company profile manage — delete/outline-danger → blue border (no red) */
.cp-manage-container .btn-outline-danger.btn-sm,
.cp-manage-container .cp-manage-q-card .btn-outline-danger.cp-manage-q-act {
  color: #b8d9ff;
  border-color: rgba(88, 166, 255, 0.55);
  background: rgba(31, 111, 235, 0.12);
}
.cp-manage-container .btn-outline-danger.btn-sm:hover,
.cp-manage-container .btn-outline-danger.btn-sm:focus,
.cp-manage-container .cp-manage-q-card .btn-outline-danger.cp-manage-q-act:hover,
.cp-manage-container .cp-manage-q-card .btn-outline-danger.cp-manage-q-act:focus {
  color: #fff;
  background: rgba(31, 111, 235, 0.38);
  border-color: rgba(88, 166, 255, 0.78);
}

.cp-manage-container .cp-manage-q-card .btn-primary.cp-manage-q-act {
  background: rgba(31, 111, 235, 0.38);
  border-color: rgba(88, 166, 255, 0.48);
  color: #ddf4ff;
}
.cp-manage-container .cp-manage-q-card .btn-primary.cp-manage-q-act:hover,
.cp-manage-container .cp-manage-q-card .btn-primary.cp-manage-q-act:focus {
  background: rgba(31, 111, 235, 0.58);
  border-color: rgba(88, 166, 255, 0.72);
  color: #fff;
}

.cp-manage-logo-preview {
  max-height: 96px;
  max-width: 240px;
  object-fit: contain;
}

/* Company profile manage — minimize / expand each section body */
.cp-section-body-toggle .bi-chevron-up {
  display: inline-block;
  transition: transform 0.2s ease;
}
.cp-section-body-toggle.collapsed .bi-chevron-up {
  transform: rotate(180deg);
}

/* Gallery caption: under the image, no solid bar (transparent so the frame doesn’t mask the photo) */
.cp-gallery-caption-under {
  margin: 0;
  padding: 0.4rem 0.75rem 0.5rem;
  text-align: center;
  line-height: 1.45;
  color: var(--bs-secondary-color);
  background-color: transparent;
  border-top: none;
}

/* Company profile VIEW — same scale as global body; Q&A matches section titles */
.cp-profile-view-page {
  font-size: 1rem;
  line-height: 1.5;
}
.cp-profile-view-page .h5 {
  font-size: 1.15em;
}
.cp-profile-view-page h1.h3 {
  font-size: 1.35rem;
}
.cp-profile-view-page .lead {
  font-size: 1.05em;
}
.cp-profile-view-page .cp-profile-hero {
  padding: 0.75rem 0 1.35rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.cp-profile-view-page .cp-profile-hero-logo {
  padding: 0.35rem 0.5rem;
}
.cp-profile-view-page .cp-profile-logo-img {
  max-height: 6.25rem;
  max-width: min(100%, 280px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.cp-profile-view-page .cp-profile-hero-company {
  font-size: 1.08em;
  font-weight: 500;
  letter-spacing: 0.01em;
}
@media (min-width: 992px) {
  .cp-profile-view-page .cp-profile-hero {
    padding: 1rem 0 1.65rem;
    gap: 1.75rem !important;
  }
  .cp-profile-view-page .cp-profile-logo-img {
    max-height: 7rem;
    max-width: 300px;
  }
}
/* Compact actions: top of Q&A column, minimal footprint */
.cp-profile-view-page .cp-profile-view-sections .cp-profile-view-toolbar .btn {
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.12rem 0.4rem;
}
.cp-profile-view-page .cp-profile-view-sections .cp-profile-view-toolbar .btn i {
  font-size: 0.85em;
  vertical-align: -0.05em;
}
.cp-profile-view-page .cp-profile-q,
.cp-profile-view-page .cp-profile-a {
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.75rem 0.95rem;
  font-weight: 500;
}

/* Company profile VIEW — single column: intro full width, sections below */
.cp-profile-view-split {
  max-width: 1320px;
}
.cp-profile-view-sections {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  padding-top: 1.5rem;
}
@media (min-width: 992px) {
  .cp-profile-view-sections {
    margin-top: 2rem;
    padding-top: 1.75rem;
  }
}

@media print {
  /* Preserve tinted backgrounds in PDF/print for every account type */
  .cp-profile-view-page,
  .cp-profile-view-page * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  #cpSections .cp-profile-section,
  #cpSections .cp-profile-section .accordion-button {
    background: #e7f3ff !important;
    color: #052c65 !important;
    border: 1px solid #86b7fe !important;
    border-left: 3px solid #0d6efd !important;
  }
  #cpSections .cp-profile-section .accordion-body {
    background: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
  }
  .cp-profile-q {
    background: #e7f1ff !important;
    border: 1px solid #9ec5fe !important;
    border-left: 3px solid #0d6efd !important;
    color: #084298 !important;
  }
  .cp-profile-a {
    background: #f4fbf6 !important;
    border: 1px solid #a3cfbb !important;
    border-left: 3px solid #198754 !important;
    color: #0a3622 !important;
  }

  .cp-profile-view-page .card {
    background: #fff !important;
    border-color: #adb5bd !important;
    box-shadow: none !important;
  }
  .cp-profile-view-page .text-secondary {
    color: #495057 !important;
  }

  .cp-profile-view-page a[href^="mailto:"],
  .cp-profile-view-page a[href^="tel:"] {
    color: #0d6efd !important;
    text-decoration: underline !important;
  }
}

/* Company profile — compact UI (~30% smaller text, tighter cards, less scrolling) */
.cp-profile-ui-compact {
  font-size: 70%;
  line-height: 1.35;
}
.cp-profile-ui-compact .lead {
  font-size: 1.08em;
}
.cp-profile-ui-compact h1.h3 {
  font-size: 1.35rem;
}
.cp-profile-ui-compact .h5 {
  font-size: 1.15em;
}
.cp-profile-ui-compact .cp-manage-section-block {
  margin-bottom: 1rem !important;
  padding-bottom: 0.85rem !important;
}
.cp-profile-ui-compact .cp-manage-q-card {
  margin-bottom: 0.4rem !important;
}
.cp-profile-ui-compact .cp-manage-q-card .card-body {
  padding: 0.36rem 0.44rem !important;
}
.cp-profile-ui-compact .cp-manage-q-card--tight .card-body {
  padding: 0.3rem 0.38rem !important;
}
.cp-profile-ui-compact .cp-manage-q-area,
.cp-profile-ui-compact .cp-manage-a-area {
  padding: 0.28rem 0.36rem !important;
}
.cp-profile-ui-compact .cp-manage-q-card--tight .cp-manage-q-area,
.cp-profile-ui-compact .cp-manage-q-card--tight .cp-manage-a-area {
  padding: 0.22rem 0.3rem !important;
}
.cp-profile-ui-compact .cp-manage-q-area.mb-3 {
  margin-bottom: 0.32rem !important;
}
.cp-profile-ui-compact .cp-manage-a-area.mb-2 {
  margin-bottom: 0.28rem !important;
}
.cp-profile-ui-compact .cp-manage-q-card--tight .cp-manage-q-area.mb-2 {
  margin-bottom: 0.26rem !important;
}
.cp-profile-ui-compact #cp-sections-workspace > .card-header {
  padding: 0.4rem 0.65rem !important;
}
.cp-profile-ui-compact #cp-sections-workspace > .card-body {
  padding: 0.55rem 0.65rem !important;
}
.cp-profile-ui-compact .cp-manage-add-qa-box {
  padding: 0.55rem 0.65rem !important;
  margin-top: 0.5rem !important;
}
.cp-profile-ui-compact textarea.form-control-sm {
  font-size: inherit;
}
.cp-profile-ui-compact .cp-profile-q,
.cp-profile-ui-compact .cp-profile-a {
  padding: 0.45rem 0.55rem;
}
.cp-profile-ui-compact .cp-profile-qa-row {
  margin-bottom: 0.65rem !important;
}
.cp-preset-multi {
  max-height: 12rem;
  font-size: inherit;
  line-height: 1.3;
}
.cp-suggestions-column .card-header {
  padding: 0.45rem 0.65rem !important;
}
.cp-suggestions-column .card-body {
  padding: 0.55rem 0.65rem !important;
}
details.cp-suggestions-more > summary {
  cursor: pointer;
  list-style-position: outside;
}

/* ===== Action Plan — Trello task cards ================================= */
.task-card.ap-task-card {
  margin-bottom: 0.65rem !important;
  min-height: unset !important;
  max-height: none !important;
  border-radius: 0.5rem !important;
  overflow: visible !important;
  position: relative;
}

.ap-task-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-height: 2.1rem;
  padding: 0.25rem 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ap-task-card__head .ap-select-cell {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  display: none;
  line-height: 1;
}

/* Select mode: show checkboxes even when inline style was cleared */
body.ap-board-select-mode .ap-task-card__head .ap-select-cell {
  display: block !important;
}

body.ap-board-select-mode .task-card {
  cursor: pointer;
}

body.ap-board-select-mode .ap-edit-btn,
body.ap-board-select-mode .ap-cancel-btn,
body.ap-board-select-mode .ap-task-card__add-sub {
  display: none !important;
}

.ap-task-card__head .ap-cancel-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
  line-height: 1;
}

.ap-task-card__body {
  padding-top: 0.5rem !important;
  padding-bottom: 0.55rem !important;
}

.ap-task-card__meta-icon {
  opacity: 0.65;
  margin-right: 0.1rem;
}

.ap-task-card__assignee {
  color: rgba(255, 255, 255, 0.78);
  min-width: 0;
  max-width: 58%;
}

.ap-task-card__prio {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ap-task-card__due {
  color: rgba(255, 255, 255, 0.55);
}

.ap-task-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ap-task-card__title .ap-source-badge {
  font-size: 0.65rem;
  font-weight: 600;
  vertical-align: middle;
}

.task-card.ap-is-overdue {
  box-shadow: inset 3px 0 0 #dc3545;
}

.task-card.ap-overdue-flash {
  animation: ap-overdue-pulse 0.85s ease-in-out 3;
}

@keyframes ap-overdue-pulse {
  0%, 100% { outline: 2px solid transparent; background-color: inherit; }
  50% { outline: 2px solid rgba(220, 53, 69, 0.85); background-color: rgba(220, 53, 69, 0.12); }
}

.ap-board-filters .ap-board-filters__secondary {
  row-gap: 0.5rem;
}

.ap-task-card__desc {
  color: rgba(255, 255, 255, 0.62);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  margin-top: 0.15rem;
}

.ap-task-card__foot {
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ap-task-card__stats {
  color: rgba(255, 255, 255, 0.55);
}

.ap-task-card__stat-link {
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.1rem 0.15rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ap-task-card__stat-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}

.ap-task-card__add-sub {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

/* ---------- Responsive tweaks -------------------------------------- */
@media (max-width: 768px) {
  .navbar-brand { font-size: 0.92rem; } /* was 1.15rem — ~20% smaller */
  #notificationDropdown { width: 100vw; max-width: 360px; }
}

/* ---------- Responsive density (site-wide) -------------------------
   Tightens cards, headings, and spacing inside main content for phone
   and tablet — mirrors home-page density without editing every template.
   Scoped to main so navbar / modals / dropdowns stay untouched.
   Covers company (container-fluid) and auditor/cb (container) layouts.
   ------------------------------------------------------------------ */
main.container-fluid,
main.container {
  --qp-density-card-pad-y: 0.9rem;
  --qp-density-card-pad-x: 1rem;
}

main.container-fluid {
  margin-top: 1.25rem !important;
  margin-bottom: 2rem !important;
}

main.container-fluid .card-body,
main.container .card-body {
  padding: var(--qp-density-card-pad-y) var(--qp-density-card-pad-x);
}

main.container-fluid .card-header,
main.container-fluid .card-footer,
main.container .card-header,
main.container .card-footer {
  padding: 0.7rem var(--qp-density-card-pad-x);
}

main.container-fluid .card-title,
main.container .card-title {
  font-size: 1.05rem;
}

main.container-fluid .display-1,
main.container-fluid .display-2,
main.container-fluid .display-3,
main.container-fluid .display-4,
main.container-fluid .display-5,
main.container-fluid .display-6,
main.container .display-1,
main.container .display-2,
main.container .display-3,
main.container .display-4,
main.container .display-5,
main.container .display-6 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
}

/* Do not shrink form controls below comfortable touch targets */
main.container-fluid .form-control,
main.container-fluid .form-select,
main.container .form-control,
main.container .form-select {
  min-height: 2.35rem;
}

main.container-fluid .table > :not(caption) > * > *,
main.container .table > :not(caption) > * > * {
  padding: 0.55rem 0.65rem;
}

@media (max-width: 991.98px) {
  main.container-fluid,
  main.container {
    --qp-density-card-pad-y: 0.75rem;
    --qp-density-card-pad-x: 0.9rem;
  }

  main.container-fluid {
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  main.container {
    padding-top: 1rem !important;
    padding-bottom: 1.25rem !important;
  }

  main.container-fluid h1,
  main.container h1 { font-size: 1.45rem; }
  main.container-fluid h2,
  main.container h2 { font-size: 1.25rem; }
  main.container-fluid h3,
  main.container h3 { font-size: 1.1rem; }
  main.container-fluid h4,
  main.container h4 { font-size: 1.02rem; }

  main.container-fluid .lead,
  main.container .lead {
    font-size: 1rem;
  }

  main.container-fluid .btn-lg,
  main.container .btn-lg {
    padding: 0.4rem 0.85rem;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    min-height: 2.35rem;
  }

  main.container-fluid .mb-4,
  main.container .mb-4 {
    margin-bottom: 1rem !important;
  }

  main.container-fluid .mb-5,
  main.container .mb-5 {
    margin-bottom: 1.35rem !important;
  }

  main.container-fluid .gy-4,
  main.container .gy-4 {
    --bs-gutter-y: 1rem;
  }

  main.container-fluid .g-4,
  main.container .g-4 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }
}

@media (max-width: 575.98px) {
  main.container-fluid,
  main.container {
    --qp-density-card-pad-y: 0.65rem;
    --qp-density-card-pad-x: 0.75rem;
  }

  main.container-fluid {
    margin-top: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  main.container-fluid h1,
  main.container h1 { font-size: 1.3rem; }
  main.container-fluid h2,
  main.container h2 { font-size: 1.15rem; }
  main.container-fluid h3,
  main.container h3 { font-size: 1.05rem; }

  main.container-fluid .card-title,
  main.container .card-title {
    font-size: 0.98rem;
  }

  main.container-fluid .table > :not(caption) > * > *,
  main.container .table > :not(caption) > * > * {
    padding: 0.45rem 0.5rem;
    font-size: 0.875rem;
  }

  main.container-fluid .mb-3,
  main.container .mb-3 {
    margin-bottom: 0.75rem !important;
  }
}

/* ---- Regulatory News hub (Edge/MSN-inspired magazine) ---- */
.news-hub-empty {
  border: 1px dashed var(--border-color, #30363d);
  border-radius: 0.75rem;
  background: var(--bg-secondary, #161b22);
}
.news-hub-empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bg-elevated, #2d333b);
  color: var(--text-muted, #8b949e);
  font-size: 1.35rem;
}

.news-msn-title {
  font-size: 1.75rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text-primary, #f0f6fc);
  margin: 0;
}
.news-msn-chips {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}
.news-msn-chip {
  flex: 0 0 auto;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-color, #30363d);
  background: var(--bg-secondary, #161b22);
  color: var(--text-secondary, #c9d1d9);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.news-msn-chip:hover {
  border-color: rgba(31, 111, 235, 0.5);
  color: #f0f6fc;
}
.news-msn-chip.is-active {
  background: #f0f6fc;
  border-color: #f0f6fc;
  color: #0d1117;
}
.news-msn-filters .form-select,
.news-msn-filters .form-control {
  background: var(--bg-secondary, #161b22);
  border-color: var(--border-color, #30363d);
  color: var(--text-primary, #f0f6fc);
}
.news-msn-meta {
  font-size: 0.75rem;
  color: rgba(240, 246, 252, 0.62);
}
.news-msn-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 0.25rem;
  background: rgba(240, 246, 252, 0.14);
  color: #f0f6fc;
  margin-bottom: 0.4rem;
  margin-right: 0.25rem;
}
.news-msn-pill--alert {
  background: rgba(218, 54, 51, 0.85);
  color: #fff;
}

.news-msn-hero {
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--border-color, #30363d);
  background: #12171f;
}
.news-msn-hero-media {
  position: relative;
  min-height: 280px;
  height: clamp(260px, 42vw, 420px);
  background: #12171f;
}
.news-msn-hero-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-msn-hero-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 3rem;
  color: rgba(240, 246, 252, 0.35);
  background:
    radial-gradient(circle at 30% 20%, rgba(31, 111, 235, 0.3), transparent 55%),
    linear-gradient(145deg, #1a2332, #0d1117);
}
.news-msn-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(8, 12, 18, 0.92) 100%);
  pointer-events: none;
}
.news-msn-hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem 1.25rem 1.25rem;
  z-index: 1;
}
.news-msn-hero-title {
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 750;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 0.4rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.news-msn-hero:hover .news-msn-hero-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-msn-rail {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
}
.news-msn-rail-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.75rem;
  padding: 0.55rem;
  border-radius: 0.65rem;
  border: 1px solid var(--border-color, #30363d);
  background: var(--bg-secondary, #161b22);
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
  flex: 1 1 0;
  min-height: 0;
}
.news-msn-rail-item:hover {
  border-color: rgba(31, 111, 235, 0.45);
  background: var(--bg-tertiary, #21262d);
}
.news-msn-rail-thumb {
  position: relative;
  border-radius: 0.45rem;
  overflow: hidden;
  background: #12171f;
  height: 72px;
}
.news-msn-rail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-msn-rail-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(240, 246, 252, 0.35);
  background: linear-gradient(145deg, #1a2332, #12171f);
}
.news-msn-rail-title {
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text-primary, #f0f6fc);
  margin: 0 0 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-msn-section-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #f0f6fc);
  margin: 0;
}
.news-msn-card {
  border-radius: 0.75rem;
  border: 1px solid var(--border-color, #30363d);
  background: var(--bg-secondary, #161b22);
  overflow: hidden;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.news-msn-card:hover {
  transform: translateY(-2px);
  border-color: rgba(31, 111, 235, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.news-msn-card--alert {
  border-color: rgba(218, 54, 51, 0.4);
}
.news-msn-card-media {
  height: 150px;
  background: #12171f;
  overflow: hidden;
  position: relative;
}
.news-msn-card-media--wide {
  height: 220px;
}
.news-msn-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-msn-card-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  color: rgba(240, 246, 252, 0.35);
  background:
    radial-gradient(circle at 30% 20%, rgba(31, 111, 235, 0.25), transparent 55%),
    linear-gradient(145deg, #1a2332, #12171f);
}
.news-msn-card-body {
  padding: 0.85rem 0.95rem 1rem;
}
.news-msn-card-title {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text-primary, #f0f6fc);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-msn-card-summary {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary, #c9d1d9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-topic-badge {
  background: rgba(110, 118, 129, 0.18);
  color: var(--text-secondary, #c9d1d9);
  border: 1px solid var(--border-color, #30363d);
  font-weight: 500;
}
.news-detail-card {
  border: 1px solid var(--border-color, #30363d);
  border-radius: 0.75rem;
  background: var(--bg-secondary, #161b22);
  overflow: hidden;
}
.news-detail-cover {
  height: min(320px, 42vw);
  min-height: 180px;
  background: var(--bg-tertiary, #21262d);
  overflow: hidden;
}
.news-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-detail-cover--empty {
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  color: rgba(240, 246, 252, 0.4);
  background:
    radial-gradient(circle at 40% 30%, rgba(31, 111, 235, 0.22), transparent 55%),
    linear-gradient(145deg, #1a2332, #12171f);
}
.news-alert-banner {
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  background: rgba(218, 54, 51, 0.12);
  border: 1px solid rgba(218, 54, 51, 0.35);
  color: #ffb4ae;
  font-size: 0.875rem;
}
.news-detail-summary {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--text-secondary, #c9d1d9);
}

@media (min-width: 768px) {
  .news-msn-title { font-size: 2rem; }
}

/* Certificate alert rows used inline onmouseover/onmouseout to nudge and
   shadow themselves. That is styling, so it belongs here — and inline event
   attributes are what forces script-src 'unsafe-inline' in the CSP. */
.cert-alert-clickable {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cert-alert-clickable:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


/* ---------- Light islands ------------------------------------------ */
/* A handful of places put a white panel inside this dark app: an email
   preview, which has to look like the email; a couple of code blocks and
   inline forms. Text inside them must not inherit the page's light-on-dark
   colors — measured at 1.46:1 for .text-secondary on #f8f9fa before this.
   These are Bootstrap's own light-mode emphasis colors, 5.6:1 to 7.0:1 on
   #f8f9fa. */
/* `qp-light-panel` is the same island built by hand: it was an inline
   `background: rgba(255,255,255,0.95)`, which no selector could reach, so
   the spinner inside it stayed at 2.40:1 after everything else was fixed. */
.qp-light-panel { background-color: rgba(255, 255, 255, 0.95); }
.bg-light, .bg-white, .qp-light-panel { color: var(--text-inverse); }
.bg-light .text-danger, .bg-white .text-danger,
.qp-light-panel .text-danger { color: #b02a37 !important; }
.bg-light .text-success, .bg-white .text-success,
.qp-light-panel .text-success { color: #146c43 !important; }
.bg-light .text-primary, .bg-white .text-primary,
.qp-light-panel .text-primary { color: #0a58ca !important; }
.bg-light .text-muted,   .bg-white .text-muted,   .qp-light-panel .text-muted,
.bg-light .text-secondary, .bg-white .text-secondary, .qp-light-panel .text-secondary { color: #5c636a !important; }

/* ---------- Light badges ---------------------------------------------- */
/* `text-bg-light` paints a light background and its own dark text. Seven
   badges then add `text-secondary` or `text-muted` *on the same element* —
   both of which are pale greys chosen for the dark page behind them — and the
   later rule wins. Light grey on near-white: the "answers on the same
   connection" badge measured 1.4:1, which is not low contrast, it is
   invisible.
   The island rules above do not catch this. They are descendant selectors,
   written for text *inside* a light panel, and here the two classes sit on
   one element. Fixed here rather than in seven templates because the eighth
   is already being written somewhere. */
.badge.text-bg-light,
.badge.text-bg-light .text-secondary,
.badge.text-bg-light.text-secondary,
.badge.text-bg-light.text-muted,
.badge.text-bg-light.text-body-secondary { color: #5c636a !important; }

/* ---------- Bright fills -------------------------------------------- */
/* White on .bg-info is 1.96:1 and on .bg-warning 1.63:1 — the two worst
   readings in the app, and both were written deliberately as `bg-info
   text-white`. The fills are correct; it is the text that has to give.
   Near-black on them measures 9.66:1 and 11.61:1. */
.bg-info, .bg-warning,
.bg-info .text-white, .bg-warning .text-white,
.bg-info.text-white, .bg-warning.text-white { color: var(--text-inverse) !important; }

/* ---------- Password strength meter -------------------------------- */
/* The meter's own classes, kept because the message is not always an error:
   it prints the rule in the muted color, the missing piece in the danger
   color, and a confirmation in the success one. */
.qp-password-note--bad  { color: var(--text-danger) !important; }
.qp-password-note--good { color: var(--text-success) !important; }