/* ==========================================================================
   DefectDojo design system — dojo-saas (Cloud Portal)
   Loaded LAST in base.html so every rule here wins the cascade over the
   Webflow export (dojo-saas.webflow.css) without editing generated files.
   Shared visual language with trust.defectdojo.com and docs.defectdojo.com.
   CSP: no inline styles anywhere; decorative art is CSS gradients/data URIs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted Work Sans (font-src 'self')
   -------------------------------------------------------------------------- */

@font-face {
  font-display: swap;
  font-family: 'Worksans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/worksans/work-sans-v19-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Worksans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/worksans/work-sans-v19-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Worksans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/worksans/work-sans-v24-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Worksans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/worksans/work-sans-v24-latin-700.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Design tokens
   Light reading canvas + navy brand chrome. Dark values live in
   dd-dark-theme.css, which re-points these tokens under
   html[data-dd-theme="dark"].
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --dd-navy: #0a1628;
  --dd-navy-2: #0e2440;
  --dd-blue: #1779c5;          /* Fuji Blue */
  --dd-blue-deep: #0f5e9e;     /* links on light */
  --dd-blue-bright: #4aa3e8;   /* accents, focus, dark-surface links */
  --dd-blue-hover: #204d87;    /* Fuji hue-03: primary hover */
  --dd-blue-active: #003864;   /* Fuji hue-04: primary active */
  --dd-orange: #f2561d;        /* Torii Orange, sparing accent + CTA */
  --dd-orange-hover: #f2762e;  /* Torii hue-02 */
  --dd-orange-deep: #c1230d;   /* Torii hue-03: danger / active */

  /* Light canvas */
  --dd-page: #f5f8fb;
  --dd-surface: #ffffff;
  --dd-surface-2: #f5f8fb;
  --dd-ink: #17222f;
  --dd-muted: #5a6b80;
  --dd-border: #e3e9f1;
  --dd-border-strong: #cfd9e6;
  --dd-link: var(--dd-blue-deep);
  --dd-icon-tile: #eaf3fb;

  /* Navy surfaces (chrome) — text on navy */
  --dd-hero-ink: #f2f6fc;
  --dd-hero-muted: #b7c5d9;
  --dd-hero-line: rgba(151, 180, 216, 0.16);
  --dd-hero-hairline: rgba(151, 180, 216, 0.14);

  /* Elevation */
  --dd-shadow-card: 0 1px 2px rgba(10, 22, 40, 0.05), 0 6px 20px -10px rgba(10, 22, 40, 0.1);
  --dd-shadow-card-hover: 0 2px 4px rgba(10, 22, 40, 0.06), 0 14px 34px -12px rgba(10, 22, 40, 0.18);

  /* Type */
  --dd-font: 'Worksans', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

body,
.body {
  font-family: var(--dd-font);
  background-color: var(--dd-page);
  color: var(--dd-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dd-font);
  font-weight: 600;
  color: inherit;
}

input, button, select, textarea {
  font-family: inherit;
}

/* The Webflow export paints every <p> and <form> off-white for the old dark
   cards; both must follow their surface now (ink on light, light on navy). */
p,
form {
  color: inherit;
}

a {
  color: var(--dd-link);
}

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

::selection {
  background: rgba(23, 121, 197, 0.22);
}

:focus-visible {
  outline: 2px solid var(--dd-blue-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   4. Top bar — navy brand band with the signature hairline
   .app-nav-layout is the fixed 54px strip across the top of the portal.
   -------------------------------------------------------------------------- */

.app-nav-layout {
  background:
    linear-gradient(180deg, rgba(23, 121, 197, 0.12), rgba(23, 121, 197, 0) 55%),
    var(--dd-navy);
  border-bottom: 1px solid var(--dd-hero-hairline);
}

.app-nav-layout::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--dd-blue) 0%, var(--dd-blue-bright) 55%, var(--dd-orange) 100%);
  z-index: 1;
}

/* The SVG wordmark has no intrinsic pixel size (width="100%"), so an
   explicit height is required or the image collapses to 0x0. */
.sidebar-navbar-brand-logo {
  height: 20px;
  width: auto;
  max-width: none;
}

/* The brand block painted its own (old) navy; the bar behind supplies it now */
.sidebar-navbar-heading {
  background-color: transparent;
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   5. Sidebar — navy rail, pill nav, faint blueprint grid
   -------------------------------------------------------------------------- */

.sidebar-navbar-menu {
  position: fixed;
  background: linear-gradient(180deg, var(--dd-navy) 0%, var(--dd-navy-2) 100%);
  border-right: 1px solid var(--dd-hero-hairline);
}

.sidebar-navbar-body-container {
  padding-left: 10px;
  padding-right: 10px;
}

.sidebar-navbar-link {
  height: auto;
  min-height: 39px;
  margin-bottom: 2px;
  padding: 9px 12px 9px 15px;
  border-radius: 8px;
  opacity: 1;
  color: var(--dd-hero-muted);
  transition: background-color 120ms ease-in-out, color 120ms ease-in-out;
}

.sidebar-navbar-link:hover {
  background-color: rgba(151, 180, 216, 0.12);
  color: #ffffff;
}

.sidebar-navbar-link.w--current {
  background-color: rgba(23, 121, 197, 0.28);
  color: #ffffff;
}

.sidebar-navbar-icon,
.sidebar-navbar-text {
  color: inherit;
}

.sidebar-navbar-text {
  font-weight: 500;
  font-size: 15px;
}

.sidebar-navbar-footer {
  background-color: rgba(10, 22, 40, 0.45);
  border-top: 1px solid var(--dd-hero-hairline);
  padding-left: 10px;
  padding-right: 10px;
}

.sidebar-navbar-menu-button {
  color: var(--dd-hero-ink);
}

/* Mobile: keep the open-state hamburger on brand (was orange) */
.w-nav-button.w--open {
  color: var(--dd-blue-bright);
}

/* Mobile: the collapsed menu overlay keeps the navy treatment */
.w-nav-overlay .sidebar-navbar-menu {
  position: absolute;
}

/* --------------------------------------------------------------------------
   6. Portal header band (page title + tabs) and content canvas
   -------------------------------------------------------------------------- */

.app-main-layout-header {
  background:
    radial-gradient(900px 240px at 82% -40%, rgba(23, 121, 197, 0.25), transparent 62%),
    linear-gradient(180deg, var(--dd-navy) 0%, var(--dd-navy-2) 100%);
  border-bottom: 1px solid var(--dd-hero-hairline);
}

.app-main-layout-header .page-heading h2 {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-main-layout,
.app-main-layout-container {
  background-color: var(--dd-page);
}

/* Tabs on the navy header band */
.page-tab-link {
  color: var(--dd-hero-muted);
  opacity: 1;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease-in-out, border-color 120ms ease-in-out;
}

.page-tab-link:hover {
  color: #ffffff;
}

.page-tab-link.w--current {
  border-bottom-color: var(--dd-blue-bright);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   7. Cards — white surfaces on the light canvas
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--dd-surface);
  border: 1px solid var(--dd-border);
  border-radius: 12px;
  box-shadow: var(--dd-shadow-card);
  color: var(--dd-ink);
}

.card-heading-small,
.card-heading-small h4 {
  color: var(--dd-ink);
}

.card .white,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  color: var(--dd-ink);
}

.card .hint {
  color: var(--dd-muted);
}

/* --------------------------------------------------------------------------
   8. Forms — labels, inputs, selects, sliders, help icons
   -------------------------------------------------------------------------- */

.label {
  color: var(--dd-ink);
  font-weight: 500;
  font-size: 15px;
}

/* The Webflow export sets `.form-control { border: none!important }` and
   orange focus borders with important shadows; counter at equal weight. */
.input,
.form-control,
textarea.input {
  border: 1px solid var(--dd-border-strong) !important;
  border-radius: 8px;
  background-color: var(--dd-surface);
  color: var(--dd-ink);
  font-weight: 400;
  box-shadow: none;
  transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

.input:hover,
.form-control:hover {
  border-color: var(--dd-blue-bright) !important;
}

.input:focus,
.form-control:focus {
  border-color: var(--dd-blue) !important;
  box-shadow: 0 0 0 3px rgba(23, 121, 197, 0.18) !important;
  outline: none;
}

.input::placeholder,
.form-control::placeholder {
  color: var(--dd-muted);
  opacity: 0.8;
}

.invalid-feedback {
  display: block;
  color: var(--dd-orange-deep);
  font-size: 14px;
  margin: 4px 0 10px;
}

/* Help "?" markers next to labels: quiet blue instead of alert orange.
   The Webflow export pins `.fas`/`.fa-solid-white` orange and
   `.fa-brands-dark` off-white with !important; counter both. */
.fa-solid-white,
.fas {
  color: var(--dd-blue) !important;
}

.fa-brands-dark,
.fa-brands,
.fab {
  color: inherit !important;
}

/* Toggle sliders (Use Server Label in Domain, firewall rules, …) */
.slider-box-input {
  background-color: var(--dd-border-strong);
}

.slider-input:hover .slider-box-input {
  background-color: var(--dd-muted);
}

input:checked + .slider-box-input {
  background-color: var(--dd-blue) !important;
}

.slider-input-group .slider-label {
  color: var(--dd-ink);
}

/* bootstrap-select dropdowns styled like inputs */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.btn-default {
  height: 44px;
  border: 1px solid var(--dd-border-strong);
  border-radius: 8px;
  background-color: var(--dd-surface);
  color: var(--dd-ink);
}

.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select > .dropdown-toggle:focus {
  background-color: var(--dd-surface);
  border-color: var(--dd-blue);
  color: var(--dd-ink);
}

.bootstrap-select .dropdown-menu {
  border: 1px solid var(--dd-border);
  border-radius: 8px;
  box-shadow: var(--dd-shadow-card-hover);
}

.bootstrap-select .dropdown-menu > .active > a,
.bootstrap-select .dropdown-menu > .active > a:hover {
  background-color: var(--dd-blue);
  color: #ffffff;
}

/* Bootstrap dropdown menus were forced dark with !important; counter. */
.dropdown-menu {
  background-color: var(--dd-surface) !important;
  border-color: var(--dd-border) !important;
  color: var(--dd-ink) !important;
  border-radius: 8px;
  box-shadow: var(--dd-shadow-card-hover);
}

.dropdown-menu > li > a {
  color: var(--dd-ink) !important;
}

.dropdown-menu > li > a:hover {
  color: var(--dd-blue-deep) !important;
  background-color: var(--dd-icon-tile);
}

.daas-select {
  background-color: var(--dd-surface);
  border: 1px solid var(--dd-border-strong);
  color: var(--dd-ink);
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   9. Buttons
   Primary/secondary = Fuji Blue. Orange stays reserved for true CTAs.
   -------------------------------------------------------------------------- */

.button {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 120ms ease-in-out, color 120ms ease-in-out,
    border-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

.button.button-primary,
.button.button-secondary {
  background-color: var(--dd-blue);
  color: #ffffff;
}

.button.button-primary:hover,
.button.button-secondary:hover {
  background-color: var(--dd-blue-hover);
  color: #ffffff;
}

.button.button-primary:active,
.button.button-secondary:active {
  background-color: var(--dd-blue-active);
}

/* True conversion CTAs (checkout, upgrade) keep Torii Orange */
.button.button-cta {
  background-color: var(--dd-orange);
  color: #ffffff;
}

.button.button-cta:hover {
  background-color: var(--dd-orange-hover);
  color: #ffffff;
}

.button.button-cta:active {
  background-color: var(--dd-orange-deep);
}

.button.button-operator {
  background-color: var(--dd-surface);
  border: 1px solid var(--dd-border-strong);
  color: var(--dd-ink);
}

.button.button-operator:hover {
  border-color: var(--dd-blue);
  background-color: var(--dd-icon-tile);
  color: var(--dd-blue-deep);
}

.button.button-danger {
  background-color: var(--dd-orange-deep);
  color: #ffffff;
}

.button.button-danger:hover {
  background-color: #a11d0b;
  color: #ffffff;
}

.button:disabled,
button[disabled] {
  background-color: var(--dd-border);
  color: var(--dd-muted);
}

/* OAuth provider buttons: neutral outline with brand icon */
.button.button-social,
.button.button-social.button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--dd-surface);
  border: 1px solid var(--dd-border-strong);
  color: var(--dd-ink);
}

.button.button-social:hover,
.button.button-social.button-primary:hover {
  background-color: var(--dd-surface-2);
  border-color: var(--dd-blue);
  color: var(--dd-blue-deep);
}

.button.button-social .fa-brands-dark {
  color: inherit;
}

/* --------------------------------------------------------------------------
   10. Alerts / flash messages
   -------------------------------------------------------------------------- */

.alert {
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 500;
}

.alert-danger,
.alert-error {
  background-color: #fdecea;
  border-color: #f6c8c1;
  color: #8a1f0f;
}

.alert-success {
  background-color: #e9f7ef;
  border-color: #bfe8d0;
  color: #10502e;
}

.alert-info {
  background-color: #eaf3fb;
  border-color: #c6ddf2;
  color: #0f4c7d;
}

.alert-warning {
  background-color: #fdf3e7;
  border-color: #f5d9b6;
  color: #7a4a10;
}

/* --------------------------------------------------------------------------
   11. Footer — quiet canvas footer
   -------------------------------------------------------------------------- */

.footer .hint,
.footer .copyright,
.footer .services {
  color: var(--dd-muted);
}

.footer a.hint {
  color: var(--dd-link);
  font-weight: 500;
}

.footer a.hint:hover {
  color: var(--dd-blue);
}

/* --------------------------------------------------------------------------
   12. Unauthed pages (login / signup / resets) — navy hero band + white card
   -------------------------------------------------------------------------- */

/* Navy hero band across the top, blueprint grid, page canvas below */
.single-layout {
  position: relative;
  min-height: 100vh;
  background: var(--dd-page);
}

/* Flat navy so the wordmark's navy-filled letter counters disappear into
   the band; a soft top wash and a faint blueprint grid keep it alive. */
.single-layout::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 300px;
  background:
    linear-gradient(rgba(151, 180, 216, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 180, 216, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(23, 121, 197, 0.1), rgba(23, 121, 197, 0) 45%),
    var(--dd-navy);
  background-size: 84px 84px, 84px 84px, auto, auto;
  z-index: 0;
}

.single-layout::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--dd-blue) 0%, var(--dd-blue-bright) 55%, var(--dd-orange) 100%);
  z-index: 2;
}

.single-layout-row,
.single-layout-col {
  position: relative;
  z-index: 1;
}

/* Columns painted their own opaque canvas; let the band show through */
.single-layout-col.left,
.single-layout-col.right {
  background-color: transparent;
}

/* Header row (home icon, "Don't have an account?") sits on navy */
.single-layout-left-header-button a {
  color: var(--dd-hero-muted);
  transition: color 120ms ease-in-out;
}

.single-layout-left-header-button a:hover {
  color: #ffffff;
}

.single-layout-right-header {
  color: var(--dd-hero-muted);
}

.single-layout-right-header a.link,
.single-layout-right-header a.link strong {
  color: #ffffff;
}

/* The auth card itself: white surface */
.single-layout-right-content {
  background-color: var(--dd-surface);
  border: 1px solid var(--dd-border);
  border-radius: 12px;
  box-shadow: var(--dd-shadow-card-hover);
  color: var(--dd-ink);
}

.single-layout-right-content h3,
.single-layout-right-content .label {
  color: var(--dd-ink);
}

.single-layout-right-content .hint,
.single-layout-right-content p {
  color: var(--dd-muted);
}

.single-layout-right-content a.link {
  color: var(--dd-link);
  font-weight: 500;
}

.single-layout-right-content a.link:hover {
  color: var(--dd-blue);
}

/* --------------------------------------------------------------------------
   13. Onboarding flow — navy step rail + white card
   -------------------------------------------------------------------------- */

.app-main-layout-mask.onboarding {
  background: linear-gradient(180deg, var(--dd-navy) 0%, var(--dd-navy-2) 100%);
  border-right: 1px solid var(--dd-hero-hairline);
}

.onboarding-steps {
  color: var(--dd-hero-muted);
  border-radius: 8px;
}

.onboarding-steps:hover {
  color: var(--dd-hero-ink);
}

.onboarding-steps .onboarding-text,
.onboarding-steps h6.white {
  color: inherit;
}

.onboarding-steps.w--current {
  color: #ffffff;
}

.onboarding-steps.w--current .text-large {
  color: var(--dd-blue-bright);
  font-weight: 600;
}

.onboarding-steps.passed {
  color: var(--dd-hero-muted);
}

.onboarding-logout a {
  color: var(--dd-hero-muted);
  text-decoration: none;
}

.onboarding-logout a:hover .sidebar-navbar-text,
.onboarding-logout a:hover .sidebar-navbar-icon {
  color: #ffffff;
}

.card.onboarding {
  background-color: var(--dd-surface);
}

/* Pricing plan cards (onboarding step 3, upgrade): white-card palette.
   Large price figures keep the Torii accent; small/normal-size accent text
   moves to AA-passing tones. */
.addl-feature,
.addl-feature a {
  color: var(--dd-muted);
}

.addl-feature a:hover {
  color: var(--dd-blue);
}

.listed-features-title-accent {
  color: var(--dd-link);
  font-weight: 500;
}

.server-spec-accent {
  color: var(--dd-orange-deep);
}

/* --------------------------------------------------------------------------
   14. Tables (management + subscription views)
   -------------------------------------------------------------------------- */

.card table,
.card .table {
  color: var(--dd-ink);
}

.card th,
.card thead td {
  background-color: var(--dd-surface-2);
  color: var(--dd-ink);
  border-bottom: 2px solid var(--dd-border-strong);
  font-weight: 600;
}

.card td {
  border-color: var(--dd-border);
}

.card tbody tr:hover {
  background-color: rgba(23, 121, 197, 0.05);
}

/* Bootstrap 3 pagination inside cards */
.pagination > li > a,
.pagination > li > span {
  color: var(--dd-link);
  border-color: var(--dd-border-strong);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  background-color: var(--dd-blue);
  border-color: var(--dd-blue);
  color: #ffffff;
}

/* Management toolbars: .daas-pagination/.daas-filters pin orange with
   !important in the Webflow export; counter at equal weight. */
.daas-pagination {
  background-color: transparent !important;
}

.daas-pagination > li > a,
.daas-pagination > li > span {
  color: #ffffff !important;
  background-color: var(--dd-blue) !important;
  border: 1px solid var(--dd-blue) !important;
}

.daas-pagination > li > a:hover {
  background-color: var(--dd-blue-hover) !important;
}

.daas-pagination > .active > a,
.daas-pagination > .active > a:focus,
.daas-pagination > .active > a:hover,
.daas-pagination > .active > span,
.daas-pagination > .active > span:focus,
.daas-pagination > .active > span:hover {
  background-color: var(--dd-blue-active) !important;
  border-color: var(--dd-blue-active) !important;
}

.daas-filters {
  color: #ffffff !important;
  background-color: var(--dd-blue) !important;
}

.daas-filters:hover {
  background-color: var(--dd-blue-hover) !important;
}

/* Subscription tiles on the manage page: quiet panels with a hover lift */
.tile {
  background-color: var(--dd-surface-2);
  border: 1px solid var(--dd-border);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.tile:hover {
  transform: translateY(-2px);
  border-color: var(--dd-border-strong);
  box-shadow: var(--dd-shadow-card-hover);
}

.tile,
.tile a,
.subscription-table {
  color: var(--dd-ink);
}

.tile a.subscription-add,
.tile a.subscription-add:visited,
.tile a.subscription-add .subscription-plus-text {
  color: var(--dd-blue-deep) !important;
}

.tile a.subscription-add:hover,
.tile a.subscription-add:hover .subscription-plus-text {
  color: var(--dd-blue) !important;
}

.subscription-add:hover {
  transform: none;
}

p.user-notes {
  background-color: var(--dd-icon-tile);
  color: var(--dd-ink);
}

/* Key/value summary tables (subscriptions, license policies, onboarding
   review): quiet label column instead of the old charcoal slabs */
.subscription-table-label,
.subscription-table-text,
.subscription-table.onboarding {
  background-color: transparent;
}

.subscription-table-label {
  color: var(--dd-muted);
  font-weight: 500;
}

.subscription-table-text,
.subscription-header {
  color: var(--dd-ink);
}

.subscription-table-link,
.subscription-table-link:link,
.subscription-table-link a {
  color: var(--dd-link);
}

.subscription-table-link:hover,
.subscription-table-link a:hover {
  color: var(--dd-blue);
}

.subscription-table tr + tr td {
  border-top: 1px solid var(--dd-border);
}

/* Management data tables: light panel instead of the old charcoal wrap */
.subs-manager-table-wrapper {
  background-color: var(--dd-surface);
  border: 1px solid var(--dd-border);
}

.subs-manager-table tr:nth-child(even) {
  background-color: var(--dd-surface-2);
}

.users-table.users-table-header {
  border-bottom: 1px solid var(--dd-border-strong);
}

/* --------------------------------------------------------------------------
   15. Utility/error pages (403, 404, 500)
   -------------------------------------------------------------------------- */

.utility-page-wrap {
  background-color: var(--dd-page);
}

.utility-page-content {
  color: var(--dd-ink);
}

.utility-page-content i.fa-solid {
  color: var(--dd-blue-bright);
}

.utility-page-content h4 {
  color: var(--dd-ink);
}

.utility-page-content p {
  color: var(--dd-muted);
}

/* --------------------------------------------------------------------------
   16. Leftover all-dark Webflow surfaces
   The Webflow export still paints a few components for the old all-dark UI:
   charcoal (#333) panels with off-white (#f9f9f9) text and light-blue
   (#1779c5) striped rows. The token-driven rules above cover most of them;
   these repoint the stragglers so they follow the light/dark surface in both
   themes (the tokens are re-pointed under html[data-dd-theme="dark"]).
   -------------------------------------------------------------------------- */

/* Subscription detail card (manager single-subscription view) — was --charcoal */
.management-tile {
  background-color: var(--dd-surface);
  border: 1px solid var(--dd-border);
}

/* Release-card titles on External Tools — were --off-white on a light card */
.subscription-header-white {
  color: var(--dd-ink);
}

/* Danger-zone header keeps white text on its red/black hazard band
   (must beat `.card h1..h6` from section 7) */
.card .danger-zone-header,
.danger-zone-header {
  color: #ffffff;
}

/* Management data tables (cloud/on-prem users + subscriptions, mass-message
   recipient pickers): text was --off-white on --charcoal / --light-blue rows.
   Follow the surface and use the same quiet stripe as the other tables. */
.users-table,
.users-table td,
.users-table th,
.subs-manager-table,
.subs-manager-table td,
.subs-manager-table th,
.daas-table,
.daas-table td {
  color: var(--dd-ink);
}

.users-table,
.users-table.users-table-row,
.subs-manager-table.subs-manager-table-row,
.daas-table,
.daas-table.daas-table-row,
.daas-table.daas-table-header {
  background-color: transparent;
}

tr.daas-table:nth-child(even),
.subs-manager-table tr:nth-child(even) {
  background-color: var(--dd-surface-2);
}

/* Alternating stripe applied by table_dropdowns.js (was a hard-coded #1779c5
   inline fill). A quiet surface tone keeps the ink/muted text legible. */
.daas-row-alt,
.daas-row-alt td {
  background-color: var(--dd-surface-2);
}

.users-table.users-table-header,
.subs-manager-table.subs-manager-table-header,
.daas-table.daas-table-header {
  color: var(--dd-muted);
}

.users-table a,
.subs-manager-table a,
.daas-table a {
  color: var(--dd-link);
}

/* Delete / danger-zone panels sit on the (now light/dark) card surface, so
   their body text and list must follow the ink token, not the old white. */
.panel-danger,
.panel-warning,
.panel-danger li,
.panel-warning li,
.danger-label {
  color: var(--dd-ink);
}