/* ============================================================
   DefectDojo dark theme for the DaaS portal
   ============================================================

   Loads after dd-theme.css (the light design-system layer) and
   re-points its shared tokens (--dd-page, --dd-surface, --dd-ink...)
   to dark values, so token-driven rules in that layer follow the
   theme automatically. Light mode is untouched: every rule below is
   scoped under html[data-dd-theme="dark"], which a pre-paint script
   in base.html stamps from localStorage ("dd-theme") or, absent a
   stored choice, from prefers-color-scheme. dd_theme.js wires any
   element carrying [data-dd-theme-toggle] to flip and persist the
   choice.

   Palette is the shared DefectDojo dark system used on
   trust.defectdojo.com and docs.defectdojo.com:
     page #0b1422 · surface #101d31 · raised #16253c · border #243449
     ink #e7edf6 · muted #93a3ba · link #4aa3e8 · navy chrome #0a1628
   ============================================================ */

/* ---- Toggle icon/label visibility helpers (theme-neutral) ---- */
.dd-theme-toggle-inline {
  margin-left: 0.875rem;
  cursor: pointer;
}

.dd-when-dark {
  display: none !important;
}

html[data-dd-theme="dark"] .dd-when-dark {
  display: revert !important;
}

html[data-dd-theme="dark"] .dd-when-light {
  display: none !important;
}

/* ============================================================
   Dark theme
   ============================================================ */

html[data-dd-theme="dark"] {
  color-scheme: dark; /* native widgets, scrollbars, date pickers */

  --dd-page: #0b1422;
  --dd-surface: #101d31;
  --dd-surface-2: #16253c;
  --dd-border: #243449;
  --dd-border-strong: #334761;
  --dd-ink: #e7edf6;
  --dd-muted: #93a3ba;
  --dd-link: #4aa3e8;
  --dd-link-hover: #7fc0f2;
  --dd-navy: #0a1628;
  --dd-icon-tile: rgba(23, 121, 197, 0.16);
  --dd-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px -10px rgba(0, 0, 0, 0.5);
  --dd-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 34px -12px rgba(0, 0, 0, 0.6);
}

html[data-dd-theme="dark"] body,
html[data-dd-theme="dark"] .body {
  background-color: var(--dd-page);
  color: var(--dd-ink);
}

/* ---- Typography ---- */
html[data-dd-theme="dark"] h1,
html[data-dd-theme="dark"] h2,
html[data-dd-theme="dark"] h3,
html[data-dd-theme="dark"] h4,
html[data-dd-theme="dark"] h5,
html[data-dd-theme="dark"] h6,
html[data-dd-theme="dark"] p,
html[data-dd-theme="dark"] li,
html[data-dd-theme="dark"] .label,
html[data-dd-theme="dark"] label,
html[data-dd-theme="dark"] .page-heading h2 {
  color: var(--dd-ink);
}

html[data-dd-theme="dark"] .hint,
html[data-dd-theme="dark"] .help-block,
html[data-dd-theme="dark"] .text-muted,
html[data-dd-theme="dark"] .slider-label {
  color: var(--dd-muted);
}

html[data-dd-theme="dark"] a {
  color: var(--dd-link);
}

html[data-dd-theme="dark"] a:hover {
  color: var(--dd-link-hover);
}

/* The light layer paints the add-subscription tile with the deep
   light-surface link blue via !important; repoint it to the
   dark-surface link blue for contrast on the dark chip. */
html[data-dd-theme="dark"] .tile a.subscription-add,
html[data-dd-theme="dark"] .tile a.subscription-add:visited,
html[data-dd-theme="dark"] .tile a.subscription-add .subscription-plus-text {
  color: var(--dd-link) !important;
}

html[data-dd-theme="dark"] .tile a.subscription-add:hover,
html[data-dd-theme="dark"] .tile a.subscription-add:hover .subscription-plus-text {
  color: var(--dd-link-hover) !important;
}

html[data-dd-theme="dark"] ::selection {
  background: rgba(23, 121, 197, 0.35);
}

html[data-dd-theme="dark"] hr {
  border-color: var(--dd-border);
}

/* ---- Unauthed layout (login / signup / password flows) ----
   Navy backdrop with the brand blueprint grid, card floats on top,
   the same treatment as the other DefectDojo properties. */
html[data-dd-theme="dark"] .single-layout {
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(23, 121, 197, 0.25), transparent 62%),
    linear-gradient(rgba(151, 180, 216, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 180, 216, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #0a1628 0%, #0e2440 100%);
  background-size: auto, 84px 84px, 84px 84px, auto;
}

/* The light layer paints a 300px navy hero band here; the full-page
   treatment above replaces it, so drop the band to avoid a doubled
   grid. Its sibling ::after hairline stays. */
html[data-dd-theme="dark"] .single-layout::before {
  background: none;
}

html[data-dd-theme="dark"] .single-layout-row,
html[data-dd-theme="dark"] .single-layout-col,
html[data-dd-theme="dark"] .single-layout-right {
  background-color: transparent;
}

/* Swap wordmark art per theme (second img added in unauthed base) */
html[data-dd-theme="dark"] .login-logo .dd-when-dark {
  display: inline-block !important;
}

html[data-dd-theme="dark"] .single-layout-right-content {
  background-color: var(--dd-surface);
  border: 1px solid var(--dd-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 60px -16px rgba(0, 0, 0, 0.6);
}

html[data-dd-theme="dark"] .single-layout-left-header-button a {
  color: var(--dd-muted);
}

html[data-dd-theme="dark"] .single-layout-left-header-button a:hover {
  color: var(--dd-ink);
}

/* ---- Authed app layout ---- */
html[data-dd-theme="dark"] .app-layout,
html[data-dd-theme="dark"] .app-main-layout-container,
html[data-dd-theme="dark"] .app-main-layout,
html[data-dd-theme="dark"] .app-main-layout-mask,
html[data-dd-theme="dark"] .app-main-layout-header {
  background-color: var(--dd-page);
}

/* ---- Sidebar: deep navy chrome, matching the other properties ---- */
html[data-dd-theme="dark"] .sidebar-navbar,
html[data-dd-theme="dark"] .sidebar-navbar-container,
html[data-dd-theme="dark"] .sidebar-navbar-menu,
html[data-dd-theme="dark"] .sidebar-navbar-body {
  background-color: var(--dd-navy);
}

html[data-dd-theme="dark"] .sidebar-navbar {
  background-image: linear-gradient(180deg, rgba(23, 121, 197, 0.1), rgba(23, 121, 197, 0) 30%);
  border-right: 1px solid rgba(151, 180, 216, 0.12);
}

html[data-dd-theme="dark"] .sidebar-navbar-link {
  color: #b7c5d9;
}

html[data-dd-theme="dark"] .sidebar-navbar-link:hover {
  color: #ffffff;
  background-color: rgba(151, 180, 216, 0.1);
}

html[data-dd-theme="dark"] .sidebar-navbar-link.w--current {
  color: #ffffff;
  background-color: rgba(23, 121, 197, 0.28);
}

html[data-dd-theme="dark"] .sidebar-navbar-heading,
html[data-dd-theme="dark"] .sidebar-navbar-footer {
  background-color: transparent;
}

/* ---- Cards / panels ---- */
html[data-dd-theme="dark"] .card {
  background-color: var(--dd-surface);
  border-color: var(--dd-border);
}

html[data-dd-theme="dark"] .card-heading-small {
  border-color: var(--dd-border);
}

/* ---- Forms ---- */
html[data-dd-theme="dark"] .form-control,
html[data-dd-theme="dark"] .w-input,
html[data-dd-theme="dark"] .w-select,
html[data-dd-theme="dark"] input[type="text"],
html[data-dd-theme="dark"] input[type="email"],
html[data-dd-theme="dark"] input[type="password"],
html[data-dd-theme="dark"] input[type="number"],
html[data-dd-theme="dark"] textarea,
html[data-dd-theme="dark"] select {
  background-color: var(--dd-surface-2);
  border-color: var(--dd-border-strong);
  color: var(--dd-ink);
}

html[data-dd-theme="dark"] .form-control:focus,
html[data-dd-theme="dark"] .w-input:focus,
html[data-dd-theme="dark"] .w-select:focus,
html[data-dd-theme="dark"] textarea:focus {
  border-color: #1779c5;
  box-shadow: 0 0 0 3px rgba(23, 121, 197, 0.25);
  background-color: var(--dd-surface-2);
  color: var(--dd-ink);
}

html[data-dd-theme="dark"] ::placeholder {
  color: var(--dd-muted);
  opacity: 0.8;
}

html[data-dd-theme="dark"] .invalid-feedback {
  color: #f28c8c;
}

/* Disabled / readonly */
html[data-dd-theme="dark"] .form-control[disabled],
html[data-dd-theme="dark"] .form-control[readonly] {
  background-color: var(--dd-page);
  color: var(--dd-muted);
}

/* ---- Chosen (jQuery multiselect) ---- */
html[data-dd-theme="dark"] .chosen-container .chosen-single,
html[data-dd-theme="dark"] .chosen-container .chosen-choices,
html[data-dd-theme="dark"] .chosen-container-active .chosen-single,
html[data-dd-theme="dark"] .chosen-container .chosen-drop {
  background: var(--dd-surface-2);
  border-color: var(--dd-border-strong);
  color: var(--dd-ink);
  box-shadow: none;
}

html[data-dd-theme="dark"] .chosen-container .chosen-results li {
  color: var(--dd-ink);
}

html[data-dd-theme="dark"] .chosen-container .chosen-results li.highlighted {
  background: #1779c5;
  color: #ffffff;
}

html[data-dd-theme="dark"] .chosen-container-multi .chosen-choices li.search-choice {
  background: var(--dd-surface);
  border-color: var(--dd-border-strong);
  color: var(--dd-ink);
  box-shadow: none;
}

html[data-dd-theme="dark"] .chosen-container .chosen-search input[type="text"] {
  background-color: var(--dd-surface);
  border-color: var(--dd-border-strong);
  color: var(--dd-ink);
}

/* ---- bootstrap-select ---- */
html[data-dd-theme="dark"] .bootstrap-select > .dropdown-toggle,
html[data-dd-theme="dark"] .bootstrap-select > .dropdown-toggle.btn-default {
  background: var(--dd-surface-2);
  border-color: var(--dd-border-strong);
  color: var(--dd-ink);
}

html[data-dd-theme="dark"] .dropdown-menu {
  background-color: var(--dd-surface);
  border-color: var(--dd-border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

html[data-dd-theme="dark"] .dropdown-menu > li > a,
html[data-dd-theme="dark"] .dropdown-menu .text {
  color: var(--dd-ink);
}

html[data-dd-theme="dark"] .dropdown-menu > li > a:hover,
html[data-dd-theme="dark"] .dropdown-menu > .active > a {
  background-color: rgba(23, 121, 197, 0.25);
  color: #ffffff;
}

html[data-dd-theme="dark"] .dropdown-menu .divider {
  background-color: var(--dd-border);
}

/* ---- External-services panel (onboarding / edit firewall) ----
   .dropdown-menu.daas ships as a Webflow light panel: its background is
   forced --off-white via !important, while the global dark rules above
   repaint its <p>/<label> text light — leaving near-invisible text on a
   still-light card. Same failure mode as the cookie banner below: give the
   panel a dark surface and let the (already-light) text read against it. */
html[data-dd-theme="dark"] .dropdown-menu.daas {
  background-color: var(--dd-surface) !important;
  border: 1px solid var(--dd-border-strong);
}

html[data-dd-theme="dark"] .dropdown-menu.daas .external-services-text {
  color: var(--dd-muted);
}

html[data-dd-theme="dark"] .dropdown-menu.daas .label.external {
  color: var(--dd-ink);
}

/* ---- Slider switches (settings toggles) ---- */
html[data-dd-theme="dark"] .slider-box-input {
  background-color: var(--dd-border-strong);
}

/* ---- Tables ---- */
html[data-dd-theme="dark"] .table,
html[data-dd-theme="dark"] table {
  color: var(--dd-ink);
}

html[data-dd-theme="dark"] .table > thead > tr > th,
html[data-dd-theme="dark"] .table > tbody > tr > td,
html[data-dd-theme="dark"] .table > tbody > tr > th {
  border-color: var(--dd-border);
}

html[data-dd-theme="dark"] .table > thead > tr > th {
  background-color: var(--dd-surface-2);
  color: var(--dd-muted);
}

html[data-dd-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(22, 37, 60, 0.5);
}

html[data-dd-theme="dark"] .table-hover > tbody > tr:hover {
  background-color: rgba(23, 121, 197, 0.12);
}

/* ---- Alerts (Bootstrap 3) ---- */
html[data-dd-theme="dark"] .alert-success {
  background-color: rgba(49, 186, 126, 0.14);
  border-color: rgba(49, 186, 126, 0.4);
  color: #7fdcae;
}

html[data-dd-theme="dark"] .alert-danger,
html[data-dd-theme="dark"] .alert-error {
  background-color: rgba(246, 79, 89, 0.12);
  border-color: rgba(246, 79, 89, 0.4);
  color: #f2938c;
}

html[data-dd-theme="dark"] .alert-warning {
  background-color: rgba(242, 173, 29, 0.12);
  border-color: rgba(242, 173, 29, 0.4);
  color: #f2c66b;
}

html[data-dd-theme="dark"] .alert-info {
  background-color: rgba(23, 121, 197, 0.14);
  border-color: rgba(23, 121, 197, 0.4);
  color: #9fd0f5;
}

/* ---- Modals (Bootstrap 3 + cookie banner) ---- */
html[data-dd-theme="dark"] .modal-content {
  background-color: var(--dd-surface);
  border: 1px solid var(--dd-border-strong);
}

html[data-dd-theme="dark"] .modal-header,
html[data-dd-theme="dark"] .modal-footer {
  border-color: var(--dd-border);
}

html[data-dd-theme="dark"] .close {
  color: var(--dd-ink);
  text-shadow: none;
  opacity: 0.6;
}

/* ---- Buttons: neutral/secondary variants (brand buttons keep color) ---- */
html[data-dd-theme="dark"] .btn-default {
  background-color: var(--dd-surface-2);
  border-color: var(--dd-border-strong);
  color: var(--dd-ink);
}

html[data-dd-theme="dark"] .btn-default:hover,
html[data-dd-theme="dark"] .btn-default:focus {
  background-color: var(--dd-border);
  border-color: var(--dd-border-strong);
  color: #ffffff;
}

/* ---- Pagination (Bootstrap 3) ---- */
html[data-dd-theme="dark"] .pagination > li > a,
html[data-dd-theme="dark"] .pagination > li > span {
  background-color: var(--dd-surface);
  border-color: var(--dd-border);
  color: var(--dd-link);
}

html[data-dd-theme="dark"] .pagination > .active > a,
html[data-dd-theme="dark"] .pagination > .active > span {
  background-color: #1779c5;
  border-color: #1779c5;
  color: #ffffff;
}

html[data-dd-theme="dark"] .pagination > .disabled > a,
html[data-dd-theme="dark"] .pagination > .disabled > span {
  background-color: var(--dd-page);
  border-color: var(--dd-border);
  color: var(--dd-muted);
}

/* ---- Popovers / tooltips (Bootstrap 3) ---- */
html[data-dd-theme="dark"] .popover {
  background-color: var(--dd-surface-2);
  border-color: var(--dd-border-strong);
}

html[data-dd-theme="dark"] .popover-content,
html[data-dd-theme="dark"] .popover-title {
  color: var(--dd-ink);
  background-color: var(--dd-surface-2);
}

html[data-dd-theme="dark"] .popover.right > .arrow:after {
  border-right-color: var(--dd-surface-2);
}

html[data-dd-theme="dark"] .popover.top > .arrow:after {
  border-top-color: var(--dd-surface-2);
}

/* ---- Footer ---- */
html[data-dd-theme="dark"] .footer {
  background-color: transparent;
}

/* ---- Cookie consent banner ----
   The banner ships its own light panel (.cookie-modal-content is painted
   --off-white with charcoal text in the Webflow export). The global dark
   rules above repaint that text light, leaving it near-invisible on the
   still-light panel. Give the panel a dark surface and restore readable
   text, links and the details table. */
html[data-dd-theme="dark"] .cookie-modal-content {
  background-color: var(--dd-surface);
  border: 1px solid var(--dd-border-strong);
  color: var(--dd-ink);
}

html[data-dd-theme="dark"] .cookie-modal-content h4,
html[data-dd-theme="dark"] .cookie-modal-content .cookie-text-bold,
html[data-dd-theme="dark"] .cookie-modal-content .cookie-text,
html[data-dd-theme="dark"] div.cookie-modal-content p {
  color: var(--dd-ink);
}

html[data-dd-theme="dark"] .cookie-modal-content a,
html[data-dd-theme="dark"] .cookie-modal-content .cookie-text-link,
html[data-dd-theme="dark"] .cookie-modal-content .cookie-text-link a {
  color: var(--dd-link);
}

html[data-dd-theme="dark"] .cookie-modal-content a:hover,
html[data-dd-theme="dark"] .cookie-modal-content .cookie-text-link a:hover {
  color: var(--dd-link-hover);
}

html[data-dd-theme="dark"] #cookiebannerForm table,
html[data-dd-theme="dark"] .cookie-footer-links .nav-item,
html[data-dd-theme="dark"] .cookie-footer-links .nav-link {
  color: var(--dd-muted);
}

/* ---- Scrollbars ---- */
html[data-dd-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html[data-dd-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--dd-page);
}

html[data-dd-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--dd-border-strong);
  border-radius: 6px;
  border: 3px solid var(--dd-page);
}