/* Custom styles for AMARA */

/* ========================================
   FORM STYLES - Global (Placeholders & Input Text)
   ======================================== */
/* Placeholder text in grey */
::placeholder {
  color: #96a0aa !important;
  opacity: 1 !important;
}

::-webkit-input-placeholder {
  color: #96a0aa !important;
  opacity: 1 !important;
}

::-moz-placeholder {
  color: #96a0aa !important;
  opacity: 1 !important;
}

:-ms-input-placeholder {
  color: #96a0aa !important;
  opacity: 1 !important;
}

/* All form input text (typed values) and dropdown text in grey */
.form-control,
.form-select,
input.form-control,
textarea.form-control,
select.form-control,
select.form-select,
select.form-select option,
select.form-control option {
  color: #96a0aa !important;
}

/* Ensure all form inputs match button size */
.form-select,
.form-control {
  font-size: 1rem !important;
  font-weight: 400 !important;
  padding: 0.375rem 0.75rem !important;
  line-height: 1.5 !important;
}

/* Extra padding for dropdown arrow */
.form-select {
  padding-right: 2.25rem !important;
}

/* Force dropdown select elements to be grey - most specific selectors */
select[class*="form-select"],
select[class*="form-control"] {
  color: #96a0aa !important;
}

/* Override Bootstrap defaults for selects */
.form-select:focus,
.form-select:not(:focus) {
  color: #96a0aa !important;
}

/* ========================================
   CSS VARIABLES - Design System Foundation
   ======================================== */
:root {
  /* Spacing System - Consistent spacing throughout the app */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-xxl: 3rem;     /* 48px */
  
  /* Shadow System - Consistent elevation */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  
  /* Dark mode shadows (stronger for visibility) */
  --shadow-sm-dark: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --shadow-md-dark: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
  --shadow-lg-dark: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  --shadow-xl-dark: 0 1rem 2rem rgba(0, 0, 0, 0.6);
  
  /* Border Radius - Consistent corners */
  --radius-sm: 0.15rem;    /* ~2px */
  --radius-md: 0.25rem;    /* 4px */
  --radius-lg: 0.375rem;   /* 6px */
  --radius-xl: 0.5rem;     /* 8px */
  --radius-full: 50%;      /* Circles */
  
  /* Transitions - Consistent animations */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* Font Sizes - 8 Standard Sizes (2025-10-09) */
  --font-xs: 0.75rem;     /* 12px - Fine print, timestamps, small labels */
  --font-sm: 0.875rem;    /* 14px - Secondary text, table data, breadcrumbs */
  --font-base: 1rem;      /* 16px - Body text (default) */
  --font-md: 1.125rem;    /* 18px - Subheadings, emphasized text */
  --font-lg: 1.25rem;     /* 20px - Section headers, card titles */
  --font-xl: 1.5rem;      /* 24px - Page titles, large headings */
  --font-2xl: 2rem;       /* 32px - Hero text, large icons, emphasis */
  --font-3xl: 3rem;       /* 48px - Error pages, empty states, giant icons */

  /* Legacy variables (keep for backwards compatibility) */
  --font-size-xs: var(--font-xs);
  --font-size-sm: var(--font-sm);
  --font-size-base: var(--font-base);
  --font-size-lg: var(--font-md);
  --font-size-xl: var(--font-lg);
  --font-size-xxl: var(--font-xl);

  /* Line Heights - For better readability */
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Z-index layers - Prevent stacking conflicts */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Dark mode variable overrides */
[data-bs-theme="dark"] {
  /* Use stronger shadows in dark mode */
  --shadow-sm: var(--shadow-sm-dark);
  --shadow-md: var(--shadow-md-dark);
  --shadow-lg: var(--shadow-lg-dark);
  --shadow-xl: var(--shadow-xl-dark);
}

/* ========================================
   TYPOGRAPHY UTILITY CLASSES (2025-10-09)
   ======================================== */
/* Use these classes instead of inline styles */
/* Named .fs-* to avoid conflict with Bootstrap .text-* color classes */
.fs-xs {
  font-size: var(--font-xs) !important;
  line-height: var(--line-height-base);
}

.fs-sm {
  font-size: var(--font-sm) !important;
  line-height: var(--line-height-base);
}

.fs-base {
  font-size: var(--font-base) !important;
  line-height: var(--line-height-base);
}

.fs-md {
  font-size: var(--font-md) !important;
  line-height: var(--line-height-base);
}

.fs-lg {
  font-size: var(--font-lg) !important;
  line-height: var(--line-height-base);
}

.fs-xl {
  font-size: var(--font-xl) !important;
  line-height: var(--line-height-base);
}

.fs-2xl {
  font-size: var(--font-2xl) !important;
  line-height: var(--line-height-tight);
}

.fs-3xl {
  font-size: var(--font-3xl) !important;
  line-height: var(--line-height-tight);
}

/* Icon-led application headings use a hanging indent.  When a title wraps,
   each later line begins under the title text—not underneath its icon. */
main :is(h1, h2, h3):has(> :is(i.fal, svg.svg-inline--fa)) {
  padding-inline-start: 1.55em;
  text-indent: -1.55em;
}

.va-software-entry-form .btn {
    white-space: nowrap;
}

.container.va-page .va-component-card > summary {
    cursor: pointer;
    list-style: none;
}

.container.va-page .va-component-summary,
.container.va-page .va-component-name,
.container.va-page .va-component-meta {
    font-weight: 400;
}

/* VA relies on size, placement and colour—not bold weight—for routine content
   hierarchy. Page-level h2/h3 headings and actionable controls remain distinct. */
.container.va-page :is(
    .card-header,
    .alert,
    .alert strong,
    strong,
    .va-advanced-panel > summary,
    .list-group-item strong,
    h4,
    h5,
    h6,
    .modal-title,
    .table th
) {
    font-weight: 400 !important;
}

.container.va-page .va-basket-name {
    color: var(--bs-body-color) !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.container.va-page .va-component-name {
    font-family: inherit;
    font-size: var(--font-sm);
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.container.va-page .va-component-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.container.va-page .va-component-affected-count--alert {
    color: var(--bs-danger) !important;
}

html[data-bs-theme="dark"] .container.va-page .va-component-affected-count--alert {
    color: #f5c2c7 !important;
}

.container.va-page .va-installation-state--affected {
    color: var(--bs-danger) !important;
}

html[data-bs-theme="dark"] .container.va-page .va-installation-state--affected {
    color: #f5c2c7 !important;
}

#vulnerability .va-asset-va-summary-link {
    color: var(--bs-body-color);
    font-weight: 400;
}

#vulnerability a.va-asset-va-summary-link:hover,
#vulnerability a.va-asset-va-summary-link:focus-visible {
    color: var(--bs-primary);
}

#vulnerability .va-asset-va-summary-link--alert {
    color: var(--bs-danger) !important;
}

/* The Asset-level Environmental Score uses the same amara blue as the rest
   of the application rather than the browser's purple range-input default. */
#vaEnvironmentalFactor {
    accent-color: #6ea8fe;
    --bs-form-range-thumb-bg: #6ea8fe;
    --bs-form-range-thumb-active-bg: #6ea8fe;
}

#vaEnvironmentalFactor::-webkit-slider-thumb {
    background-color: #6ea8fe;
}

#vaEnvironmentalFactor::-moz-range-thumb {
    background-color: #6ea8fe;
    border-color: #6ea8fe;
}

html[data-bs-theme="dark"] #vulnerability .va-asset-va-summary-link--alert {
    color: #f5c2c7 !important;
}

#vulnerability .va-asset-software-name--affected {
    color: var(--bs-danger) !important;
}

html[data-bs-theme="dark"] #vulnerability .va-asset-software-name--affected {
    color: #f5c2c7 !important;
}

#vulnerability a.va-asset-software-name--affected:hover,
#vulnerability a.va-asset-software-name--affected:focus-visible {
    text-decoration: underline;
}

/* Security Scan results keep VA's confirmed affected campaigns visually
   aligned with the same alert red used throughout Vulnerability Assurance. */
.scanner-va-campaign-link {
    color: var(--bs-danger) !important;
    background-color: transparent !important;
    border: 1px solid currentColor;
    font-size: var(--font-sm);
    font-weight: 500;
}

html[data-bs-theme="dark"] .scanner-va-campaign-link {
    color: #f5c2c7 !important;
}

.scanner-va-campaign-link:hover,
.scanner-va-campaign-link:focus-visible {
    color: var(--bs-danger) !important;
    text-decoration: underline !important;
}

html[data-bs-theme="dark"] .scanner-va-campaign-link:hover,
html[data-bs-theme="dark"] .scanner-va-campaign-link:focus-visible {
    color: #f5c2c7 !important;
}

.scanner-nuclei-coverage {
    max-width: 52rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid #6ea8fe;
    border-radius: 0.25rem;
    background: rgba(110, 168, 254, 0.06);
    color: var(--bs-body-color);
    font-size: 0.875rem;
}

.scanner-nuclei-coverage details summary {
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.scanner-nuclei-cve {
    display: inline-block;
    margin: 0 0.3rem 0.3rem 0;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.2rem;
    color: var(--bs-body-color);
    font-size: 0.75rem;
}

#vulnerability .va-asset-va-summary-link--review {
    color: var(--amara-muted-text);
}

@media (max-width: 575.98px) {
    .container.va-page .va-component-heading {
        width: 100%;
        max-width: 100%;
    }
}

.container.va-page .va-card-title {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
}

.container.va-page .va-component-meta {
    min-width: 0;
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
}

.container.va-page .va-component-meta > span,
.container.va-page .va-component-chevron {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
}

/* Software Basket summaries use stable desktop columns so varying result copy
   cannot move Assets, status or Details sideways from one row to the next. */
@media (min-width: 576px) {
    .container.va-page .va-component-meta {
        display: grid !important;
        grid-template-columns: 9rem 10rem 5rem;
        column-gap: 1rem !important;
        align-items: center;
        flex: 0 0 26rem;
        width: 26rem;
    }

    .container.va-page .va-component-assigned-count {
        text-align: end;
        white-space: nowrap;
    }

    .container.va-page .va-component-status-column {
        text-align: start;
        white-space: nowrap;
    }

    .container.va-page .va-component-details {
        justify-content: flex-end;
        white-space: nowrap;
    }
}

.container.va-page.va-basket-page .form-control[type="file"]::file-selector-button {
    color: var(--amara-muted-text) !important;
    background-color: transparent !important;
    border-inline-end-color: var(--amara-muted-text) !important;
    font: inherit;
}

.container.va-page.va-basket-page .form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
    color: var(--bs-primary) !important;
    background-color: transparent !important;
    border-inline-end-color: var(--bs-primary) !important;
}

.container.va-page .va-case-action {
    font-size: 0.875rem;
}

/* The legacy global select override forces a browser menulist and strips
   Bootstrap's indicator. Restore the shared AMARA form-select treatment in
   Vulnerability Assurance so these controls match the rest of the app. */
.container.va-page select.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
}

.container.va-page .va-cve-catalog-count {
    display: flex;
    align-items: center;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.container.va-page .va-filter-dropdown .dropdown-menu {
    margin-top: 0.25rem;
}

/* Asset assignment is an application-rendered menu, not a browser-native
   select popup. Keep long workspace lists readable without breaking the form. */
.container.va-page .va-asset-assignment-picker .dropdown-menu {
    max-height: 18rem;
    overflow-y: auto;
}

.container.va-page .va-asset-assignment-picker .dropdown-item {
    white-space: normal;
}

.container.va-page .va-filter-dropdown .dropdown-item.active,
.container.va-page .va-filter-dropdown .dropdown-item.active:hover,
.container.va-page .va-filter-dropdown .dropdown-item.active:focus {
    color: var(--bs-body-color) !important;
    background-color: transparent !important;
    font-weight: 600;
}

.container.va-page .va-filter-dropdown .dropdown-item.active::after {
    content: '✓';
    float: right;
    color: var(--amara-muted-text);
}

/* Application-rendered filters avoid operating-system option panes while
   leaving native selects elsewhere untouched. */
.amara-filter-dropdown .dropdown-menu {
    min-width: 12rem;
    margin-top: 0.25rem;
}

.amara-filter-dropdown .dropdown-toggle,
.amara-filter-dropdown .dropdown-item {
    font-size: var(--font-sm) !important;
    font-weight: 400 !important;
    line-height: 1.5;
}

/* A closed dropdown value is supporting form state, not a headline. Opened
   option rows retain normal body text for readable selection. */
.amara-filter-dropdown .dropdown-toggle {
    color: var(--amara-muted-text) !important;
}

.amara-filter-dropdown .dropdown-item.active,
.amara-filter-dropdown .dropdown-item.active:hover,
.amara-filter-dropdown .dropdown-item.active:focus {
    color: var(--bs-body-color) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

.amara-filter-dropdown .dropdown-item.active::after {
    content: '✓';
    float: right;
    color: var(--amara-muted-text);
}

.amara-filter-dropdown.amara-asset-picker .dropdown-menu {
    max-height: 18rem;
    overflow-y: auto;
}

.amara-filter-dropdown.amara-asset-picker .dropdown-item {
    white-space: normal;
}

/* Vulnerability Assurance follows the shared three-tier application scale:
   14px routine copy, 16.8px card titles and 24px page/section headings.
   Keep this scoped: legacy typography elsewhere is deliberately out of scope. */
:is(.container.va-page, .va-modal) {
    font-size: var(--font-sm);
}

:is(.container.va-page, .va-modal) :is(
    .btn,
    .form-control,
    .form-select,
    .form-label,
    .form-text,
    .small,
    .text-muted,
    .va-supporting-copy,
    .va-component-meta,
    .va-component-counts,
    .va-component-details,
    .va-summary-stat-label,
    .va-summary-stat-value,
    .va-recommended-label,
    .va-case-action,
    .va-intake-method > summary,
    .va-advanced-panel > summary.va-card-title,
    .table :is(th, td),
    p,
    li,
    dt,
    dd,
    label,
    input,
    select,
    textarea,
    button
) {
    font-size: var(--font-sm) !important;
}

.container.va-page :is(
    h2,
    h3:not(.h5):not(.h6),
    .fs-xl
) {
    font-size: var(--font-xl) !important;
}

:is(.container.va-page, .va-modal) :is(
    .card-header,
    h3.h5,
    h3.h6,
    h4,
    h5,
    h6,
    .va-basket-name,
    .va-component-name,
    .va-card-title,
    .modal-title
) {
    font-size: 1.05rem !important;
}

/* The VA root is an orientation screen. These three linked, routine-status
   cards deliberately defer detail and action to their dedicated modules. */
.container.va-page .va-dashboard-status-rail {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.container.va-page .va-dashboard-status-step {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color) !important;
    text-decoration: none;
}

.container.va-page .va-dashboard-status-step:hover,
.container.va-page .va-dashboard-status-step:focus-visible {
    color: var(--bs-body-color) !important;
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.055);
}

.container.va-page .va-dashboard-status-title {
    color: #ffffff !important;
    font-size: var(--font-sm) !important;
    font-weight: 500;
    line-height: 1.2;
}

/* MG-annotated VA labels stay visually prominent through bright-white color,
   while using the application's routine 14px type tier. Keep this list
   intentionally scoped: unannotated page and section headings retain their
   established hierarchy. */
.container.va-page :is(
    .va-dashboard-charts h3.h5,
    .va-new-software-list > summary > span:first-child,
    #vaRecordedSoftwareHeading,
    .va-add-software-panel > summary .va-card-title,
    .va-component-summary .va-component-name:not(.va-installation-state--affected),
    .va-work-group > summary strong[id^="vaGroup"],
    .va-case-supporting-details > summary > span:first-child,
    #va-notices-current-title,
    .va-notice-titleline h4,
    .va-cve-action-group h3.h5,
    .va-cve-disclosure-title
) {
    color: #ffffff !important;
    font-size: var(--font-sm) !important;
}

/* “Where you stand” introduces the dashboard journey. It is a section
   heading, not routine reading copy, so it uses the next approved tier. */
.container.va-page #va-dashboard-journey-title {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    line-height: 1.2;
}

/* Annotated VA labels use the standard foreground in light mode.
   The established bright-white dark treatment and type tiers stay unchanged. */
html[data-bs-theme="light"] .container.va-page :is(
    .va-dashboard-status-title,
    #va-dashboard-journey-title,
    .va-dashboard-charts h3.h5,
    .va-new-software-list > summary > span:first-child,
    #vaRecordedSoftwareHeading,
    .va-add-software-panel > summary .va-card-title,
    .va-component-summary .va-component-name:not(.va-installation-state--affected),
    .va-work-group > summary strong[id^="vaGroup"],
    .va-case-supporting-details > summary > span:first-child,
    #va-notices-current-title,
    .va-notice-titleline h4,
    .va-cve-action-group h3.h5,
    .va-cve-disclosure-title
) {
    color: var(--bs-body-color) !important;
}

/* A confirmed affected product keeps the shared basket-title geometry but
   overrides the normal white title colour with the amara affected-state red. */
.container.va-page .va-component-summary .va-component-name.va-installation-state--affected {
    color: var(--bs-danger) !important;
    font-size: var(--font-sm) !important;
}

html[data-bs-theme="dark"] .container.va-page .va-component-summary .va-component-name.va-installation-state--affected {
    color: #f5c2c7 !important;
}

.container.va-page .va-dashboard-status-arrow {
    align-self: center;
    flex: 0 0 auto;
    color: var(--amara-muted-text);
    font-size: var(--font-sm) !important;
}

.container.va-page .va-dashboard-chart {
    position: relative;
    height: 16rem;
}

/* Both dashboard doughnuts use the same fixed heading and square plot. Chart.js
   legends remain outside the canvas so different label lengths cannot change
   the plotted diameter or lift one chart above the other. */
.container.va-page .va-dashboard-donut-card {
    display: flex;
    flex-direction: column;
}

.container.va-page .va-dashboard-donut-heading {
    flex: 0 0 7rem;
    height: 7rem;
}

.container.va-page .va-dashboard-donut-stage {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.container.va-page .va-dashboard-donut-plot {
    position: relative;
    flex: 0 0 10rem;
    width: 10rem;
    height: 10rem;
}

.container.va-page .va-dashboard-donut-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.6rem;
    width: 100%;
    margin-top: 0.5rem;
    color: var(--amara-muted-text);
    font-size: var(--font-sm);
    line-height: 1.25;
}

.container.va-page .va-dashboard-legend-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--amara-muted-text) !important;
    text-decoration: none;
}

.container.va-page a.va-dashboard-legend-label:hover,
.container.va-page a.va-dashboard-legend-label:focus-visible {
    color: var(--amara-text) !important;
    text-decoration: underline;
}

.container.va-page .va-dashboard-legend-dot {
    display: inline-block;
    flex: 0 0 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.container.va-page .va-dashboard-legend-dot--affected,
.container.va-page .va-dashboard-legend-dot--p1 {
    color: rgb(255, 99, 132);
    background: rgba(255, 99, 132, 0.5);
}

.container.va-page .va-dashboard-legend-dot--review,
.container.va-page .va-dashboard-legend-dot--p3 {
    color: rgb(255, 205, 86);
    background: rgba(255, 205, 86, 0.5);
}

.container.va-page .va-dashboard-legend-dot--clear,
.container.va-page .va-dashboard-legend-dot--p4 {
    color: rgb(75, 192, 192);
    background: rgba(75, 192, 192, 0.5);
}

.container.va-page .va-dashboard-legend-dot--p2 {
    color: rgb(255, 159, 64);
    background: rgba(255, 159, 64, 0.5);
}

.container.va-page .va-dashboard-legend-dot--blocked {
    color: rgb(150, 160, 170);
    background: rgba(150, 160, 170, 0.35);
}

@media (max-width: 767.98px) {
    .container.va-page .va-dashboard-status-rail {
        flex-direction: column;
    }

    .container.va-page .va-dashboard-status-arrow {
        transform: rotate(90deg);
    }
}

/* Card-header metadata and disclosures are supporting copy, rather than a
   second heading tier. Icon glyphs share the same 14px body tier. */
.container.va-page :is(
    .va-component-meta,
    .va-component-counts,
    .va-component-details,
    .va-panel-chevron,
    .va-component-chevron,
    .va-advanced-panel > summary.va-card-title,
    .va-intake-method > summary
) {
    font-size: var(--font-sm) !important;
}

.container.va-page :is(
    .text-uppercase,
    .va-recommended-label,
    .va-summary-stat-value,
    .fw-semibold
) {
    font-weight: 400 !important;
}

.container.va-page .va-next-action {
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--bs-primary-rgb), 0.62) !important;
    box-shadow:
        0 0 0 1px rgba(var(--bs-primary-rgb), 0.08),
        0 0.75rem 1.75rem rgba(var(--bs-primary-rgb), 0.08);
}

.container.va-page .va-next-action::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: rgba(var(--bs-primary-rgb), 0.72);
}

.container.va-page .va-next-action[data-action-kind='terminal'] {
    border-color: var(--bs-border-color) !important;
    box-shadow: none;
}

.container.va-page .va-next-action[data-action-kind='terminal']::before {
    display: none;
}

.container.va-page .va-case-action--recommended {
    border-color: rgba(var(--bs-primary-rgb), 0.72) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.09) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--bs-primary-rgb), 0.055) !important;
}

.container.va-page .va-table-disclosure-summary {
    display: inline-flex;
    justify-content: flex-start;
    gap: 0.35rem;
    width: auto;
}

.container.va-page .va-recommended-label {
    display: block;
    margin: 0 0 0.45rem 0.15rem;
    color: var(--amara-muted-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.container.va-page .va-component-card > summary::-webkit-details-marker {
    display: none;
}

.container.va-page .va-component-chevron {
    transition: transform 0.18s ease;
}

.container.va-page .va-component-card[open] .va-component-chevron {
    transform: rotate(180deg);
}

@media (max-width: 575.98px) {
  .container.va-page .va-component-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap: 0.75rem !important;
    align-items: center;
    width: 100%;
  }

  .container.va-page .va-scan-source-form > .btn,
  .container.va-page .va-scan-source-form > .form-select {
    width: 100%;
  }
}

/* Risk Phase Stepper Styles */
.risk-phase-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
}

.phase-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

.step-circle {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-bottom: var(--spacing-xs);
    transition: all var(--transition-base);
}

.phase-step.complete .step-circle {
    background-color: #28a745;
    color: white;
}

.phase-step.current .step-circle {
    background-color: #007bff;
    color: white;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

.phase-step.pending .step-circle {
    background-color: #e9ecef;
    color: #6c757d;
    border: 2px solid #dee2e6;
}

[data-bs-theme="dark"] .phase-step.pending .step-circle {
    background-color: #495057;
    color: #adb5bd;
    border: 2px solid #6c757d;
}

.step-label {
    text-align: center;
    min-height: 20px;
}

.step-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.step-status {
    font-size: 12px;
    color: #6c757d;
}

.phase-step.current .step-status {
    color: #007bff;
    font-weight: 500;
}

.phase-step.complete .step-status {
    color: #28a745;
}

.step-connector {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 100%;
    height: 2px;
    z-index: -1;
}

.step-connector.complete {
    background-color: #28a745;
}

.step-connector.pending {
    background-color: #dee2e6;
}

[data-bs-theme="dark"] .step-connector.pending {
    background-color: #6c757d;
}

/* CIA Assessment severity badge colors (matching Risk Management scale) */
.badge-cia-medium {
    background-color: #0d9488 !important;
    color: white !important;
}
.badge-cia-high {
    background-color: #d97706 !important;
    color: white !important;
}

/* CIA list table — prevent long rating text from causing horizontal overflow */
.cia-list-table td .badge {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* Fix alignment shift between dark/bright modes by ensuring consistent scrollbar space */
html {
    scrollbar-gutter: stable;
}

/* Ensure consistent font family across all themes */
html, body, * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* Reduce excessive whitespace in main content area */
.container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Moderate reduction of space between sidebar and main content */
.main-content {
    padding-left: 1.5rem !important;
}

/* A collapsed 60px icon rail should give its recovered space back to the
   page. Redistributing the existing 48px desktop padding shifts normal-flow
   content one design-system step toward the rail without changing its width. */
@media (min-width: 992px) {
    body.sidebar-collapsed main.main-content {
        padding-left: 0.5rem !important;
        padding-right: 2.5rem !important;
    }

    /* Keep one compact gutter beside the collapsed icon rail at every desktop
       width.  Anchor the capped root wrapper to the rail side, and move its
       unchanged 32px padding to the right; neither content width nor the 60px
       rail boundary changes. */
    body.sidebar-collapsed main.main-content > .container,
    body.sidebar-collapsed main.main-content > .container-fluid {
        margin-left: 0 !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 2rem !important;
    }
}

/* Enhanced table styling for better visibility */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075) !important;
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(0, 0, 0, 0.025);
}

/* Complete dark mode table override - force column backgrounds */
[data-bs-theme="dark"] .table-striped tbody tr,
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > td {
    background-color: transparent !important;
}

/* Force consistent alternating column backgrounds */
[data-bs-theme="dark"] .table-striped tbody td:nth-child(2),
[data-bs-theme="dark"] .table-striped tbody td:nth-child(4),
[data-bs-theme="dark"] .table-striped tbody td:nth-child(6),
[data-bs-theme="dark"] .table-striped tbody td:nth-child(8) {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .table-striped tbody td:nth-child(1),
[data-bs-theme="dark"] .table-striped tbody td:nth-child(3),
[data-bs-theme="dark"] .table-striped tbody td:nth-child(5),
[data-bs-theme="dark"] .table-striped tbody td:nth-child(7),
[data-bs-theme="dark"] .table-striped tbody td:nth-child(9) {
    background-color: transparent !important;
}

/* Header columns - force alternating backgrounds with maximum specificity */
html body [data-bs-theme="dark"] .table thead th {
    background-color: transparent !important;
    background: transparent !important;
}

html body [data-bs-theme="dark"] .table thead th:nth-child(2),
html body [data-bs-theme="dark"] .table thead th:nth-child(4),
html body [data-bs-theme="dark"] .table thead th:nth-child(6),
html body [data-bs-theme="dark"] .table thead th:nth-child(8) {
    background-color: rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

html body [data-bs-theme="dark"] .table thead th:nth-child(1),
html body [data-bs-theme="dark"] .table thead th:nth-child(3),
html body [data-bs-theme="dark"] .table thead th:nth-child(5),
html body [data-bs-theme="dark"] .table thead th:nth-child(7),
html body [data-bs-theme="dark"] .table thead th:nth-child(9) {
    background-color: transparent !important;
    background: transparent !important;
}

/* Subtle table borders for better separation in dark mode */
[data-bs-theme="dark"] .table td {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

[data-bs-theme="dark"] .table th {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Table row hover - highlight with box-shadow for top and bottom lines */
html body [data-bs-theme="dark"] .table-hover tbody tr:hover td {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

html body [data-bs-theme="dark"] .table-hover tbody tr:hover td:nth-child(1),
html body [data-bs-theme="dark"] .table-hover tbody tr:hover td:nth-child(3),
html body [data-bs-theme="dark"] .table-hover tbody tr:hover td:nth-child(5),
html body [data-bs-theme="dark"] .table-hover tbody tr:hover td:nth-child(7),
html body [data-bs-theme="dark"] .table-hover tbody tr:hover td:nth-child(9) {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

html body [data-bs-theme="dark"] .table-hover tbody tr:hover td:nth-child(2),
html body [data-bs-theme="dark"] .table-hover tbody tr:hover td:nth-child(4),
html body [data-bs-theme="dark"] .table-hover tbody tr:hover td:nth-child(6),
html body [data-bs-theme="dark"] .table-hover tbody tr:hover td:nth-child(8) {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

/* Light mode table borders */
.table td {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.table th {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

.dropdown-menu {
    min-width: 120px;
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-lg);
}

.dropdown-item {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.dropdown-item i {
    width: 16px;
    text-align: center;
}

.table-dark th,
.table-dark td {
    border-color: rgba(255, 255, 255, 0.1);
}

/* CIA Assessment icon colors */
.cia-icon {
    color: #000 !important;
}

[data-bs-theme="dark"] .cia-icon {
    color: #fff !important;
}

/* Remove all styling from badges - plain text only */
/* Excludes rounded-pill badges which are decorative */
.table .badge,
.table .badge.bg-primary,
.table .badge.bg-secondary,
.table .badge.bg-success,
.table .badge.bg-danger,
.table .badge.bg-warning,
.table .badge.bg-info,
.table .badge.bg-light,
.table .badge.bg-dark,
.card .badge,
.card .badge.bg-primary,
.card .badge.bg-secondary,
.card .badge.bg-success,
.card .badge.bg-danger,
.card .badge.bg-warning,
.card .badge.bg-info,
.card .badge.bg-light,
.card .badge.bg-dark,
.table .badge[class*="bg-opacity"],
.card .badge[class*="bg-opacity"],
/* General badge plain text style - excludes decorative rounded-pill badges */
.badge:not(.rounded-pill) {
    background-color: transparent !important;
    background-image: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-weight: normal !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline !important;
}

/* Color overrides for table badges */
.table .badge.bg-danger,
.card .badge.bg-danger {
    color: #c82333 !important;
    background-color: transparent !important;
}

.table .badge.bg-warning,
.card .badge.bg-warning {
    color: #fd7e14 !important;
    background-color: transparent !important;
}

.table .badge.bg-info,
.card .badge.bg-info {
    color: #6ea8fe !important;
    background-color: transparent !important;
}

.table .badge.bg-success,
.card .badge.bg-success {
    color: #198754 !important;
    background-color: transparent !important;
}

.table .badge.bg-secondary,
.card .badge.bg-secondary {
    color: #6c757d !important;
    background-color: transparent !important;
}

.table .badge.bg-primary,
.card .badge.bg-primary {
    color: #6ea8fe !important;
    background-color: transparent !important;
}

/* Universal badge reset - highest specificity */
span.badge,
.badge span,
span[class*="badge"],
[class*="bg-"]:not(.card):not(.navbar):not(.btn) {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Dark mode badge colors */
[data-bs-theme="dark"] .badge.bg-danger {
    color: #f5c2c7 !important;
}

[data-bs-theme="dark"] .badge.bg-warning {
    color: #ffda6a !important;
}

[data-bs-theme="dark"] .badge.bg-info {
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .badge.bg-success {
    color: #75b798 !important;
}

[data-bs-theme="dark"] .badge.bg-secondary {
    color: #adb5bd !important;
}

/* FontAwesome icon fixes */
.fas, .far, .fal, .fab {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Ensure FontAwesome icons display properly and inherit text color */
i.fas, i.far, i.fal, i.fab {
    color: inherit !important;
}

i.fas::before, i.far::before, i.fal::before, i.fab::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    color: inherit !important;
}

/* Global CSS overrides for color consistency - purple to blue conversion */
:root {
    /* Override Bootstrap colors */
    --bs-primary: #6ea8fe !important;       /* Ensure primary is blue, not purple (#6f42c1) */
    --bs-primary-rgb: 13, 110, 253 !important;  /* RGB version of blue */
    --bs-info: #6ea8fe !important;          /* Change info color from purple/teal to blue */
    --bs-info-rgb: 13, 110, 253 !important;  /* RGB version of blue */
    --bs-link-color: #6ea8fe !important;    /* Override breadcrumb link color */
    --bs-link-color-rgb: 13, 110, 253 !important;
    --bs-link-hover-color: #6ea8fe !important;
}

/* Dark mode specific CSS variables for dropdown highlights */
html[data-bs-theme="dark"] {
    --bs-primary: #6ea8fe !important;
    --bs-primary-rgb: 13, 110, 253 !important;
    --bs-body-bg: #212529 !important;
    --bs-body-color: #f8f9fa !important;
    /* Custom dropdown hover color - much more subtle */
    --dropdown-hover-bg: rgba(108, 117, 125, 0.3) !important;
    --bs-link-color: #6ea8fe !important;    /* Override breadcrumb link color in dark mode */
    --bs-link-color-rgb: 13, 110, 253 !important;
    --bs-link-hover-color: #6ea8fe !important;
}

html[data-bs-theme="light"] {
    --bs-link-color: #6ea8fe !important;    /* Override breadcrumb link color in light mode */
    --bs-link-color-rgb: 13, 110, 253 !important;
    --bs-link-hover-color: #6ea8fe !important;
}

/* Direct overrides for specific classes */
.bg-info,
.badge.bg-info,
.card-header.bg-info,
.btn-info,
.progress-bar.bg-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
}

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

.badge.bg-info.text-dark {
    color: white !important;
    background-color: var(--bs-info) !important;
}

/* Nav pills styling to match native Bootstrap tabs look */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--bs-primary) !important;
    border-radius: 0 !important;
    color: var(--bs-primary) !important;
    font-weight: 500 !important;
}

.nav-pills .nav-link {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--bs-secondary) !important;
    margin-right: 1rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 400 !important;
    transition: all 0.15s ease-in-out !important;
}

.nav-pills .nav-link:hover {
    background-color: transparent !important;
    color: var(--bs-primary) !important;
    border-bottom-color: rgba(13, 110, 253, 0.5) !important;
}

/* Dark mode support for nav pills */
[data-bs-theme="dark"] .nav-pills .nav-link {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link:hover {
    background-color: transparent !important;
    color: #6ea8fe !important;
    border-bottom-color: rgba(110, 168, 254, 0.5) !important;
}

[data-bs-theme="dark"] .nav-pills .nav-link.active {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #6ea8fe !important;
    color: #6ea8fe !important;
}

/* Asset form navigation tabs - match clean underlined style */
.nav-tabs .nav-link.active,
.nav-tabs .show > .nav-link {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--bs-primary) !important;
    border-radius: 0 !important;
    color: var(--bs-primary) !important;
    font-weight: 400 !important;
}

.nav-tabs .nav-link {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--bs-secondary) !important;
    margin-right: 1rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 400 !important;
    transition: all 0.15s ease-in-out !important;
}

.nav-tabs .nav-link:hover {
    background-color: transparent !important;
    color: var(--bs-primary) !important;
    border-bottom-color: rgba(13, 110, 253, 0.5) !important;
}

/* Dark mode support for nav-tabs */
[data-bs-theme="dark"] .nav-tabs .nav-link {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    background-color: transparent !important;
    color: #6ea8fe !important;
    border-bottom-color: rgba(110, 168, 254, 0.5) !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #6ea8fe !important;
    color: #6ea8fe !important;
    font-weight: 400 !important;
}

/* Card header pills (for forms) - match clean underlined style */
.card-header-pills .nav-link.active,
.card-header-pills .show > .nav-link {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--bs-primary) !important;
    border-radius: 0 !important;
    color: var(--bs-primary) !important;
    font-weight: 400 !important;
}

.card-header-pills .nav-link {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--bs-secondary) !important;
    margin-right: 1rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 400 !important;
    transition: all 0.15s ease-in-out !important;
}

.card-header-pills .nav-link:hover {
    background-color: transparent !important;
    color: var(--bs-primary) !important;
    border-bottom-color: rgba(13, 110, 253, 0.5) !important;
}

/* Dark mode support for card header pills */
[data-bs-theme="dark"] .card-header-pills .nav-link {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .card-header-pills .nav-link:hover {
    background-color: transparent !important;
    color: #6ea8fe !important;
    border-bottom-color: rgba(110, 168, 254, 0.5) !important;
}

[data-bs-theme="dark"] .card-header-pills .nav-link.active {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #6ea8fe !important;
    color: #6ea8fe !important;
    font-weight: 400 !important;
}

/* CIA Assessment icons styling - no colors, just black/white */
.cia-icon-missing,
.cia-icon-completed,
.cia-icon-progress {
    color: #000000 !important; /* Black in light mode */
}

/* White icons in dark mode */
[data-bs-theme="dark"] .cia-icon-missing,
[data-bs-theme="dark"] .cia-icon-completed,
[data-bs-theme="dark"] .cia-icon-progress {
    color: #ffffff !important;
}

/* Risk ID links - black text in light mode, white text in dark mode */
.table td a,
.risk-id-link {
    color: #000000 !important;
    text-decoration: none !important;
}

.table td a:hover,
.risk-id-link:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* Dark mode Risk ID links */
[data-bs-theme="dark"] .table td a,
[data-bs-theme="dark"] .risk-id-link {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .table td a:hover,
[data-bs-theme="dark"] .risk-id-link:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Remove black border from NIS2 relevance gauge */
.gauge-container,
.gauge-meter,
.gauge-svg,
svg.gauge,
.nis2-gauge,
.relevance-gauge {
    border: none !important;
    outline: none !important;
    stroke: none !important;
}

/* Remove black stroke from gauge paths */
.gauge-container svg path,
.gauge-meter svg path,
.nis2-gauge svg path,
.relevance-gauge svg path {
    stroke: none !important;
    stroke-width: 0 !important;
}

/* Remove any dark borders from gauge background */
.gauge-background,
.gauge-bg {
    stroke: none !important;
    fill: transparent !important;
}

/* Override any purple/violet colors in bootstrap */
.text-primary {
    color: var(--bs-primary) !important;
}

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

/* Ensure icons use blue color */
.text-primary i,
i.text-primary {
    color: var(--bs-primary) !important;
}

/* Standardized Font Size System 
 * ------------------------------
 * AMARA now uses a standardized font size system to maintain visual consistency:
 * - Small (0.85rem): Used for badges, captions, small text and supporting information
 * - Medium (1rem): Standard size for body text, form inputs, buttons
 * - Large (1.5rem): Used for headers, titles, and emphasis 
 */
:root {
    /* DEPRECATED - Use new font-size variables above instead */
    --font-size-small: var(--font-size-sm);    /* Use --font-size-sm */
    --font-size-medium: var(--font-size-base);  /* Use --font-size-base */
    --font-size-large: var(--font-size-xxl);    /* Use --font-size-xxl */
}

/* Font size utility classes */
.font-small {
    font-size: 1.05rem !important;  /* Match card headers for navbar prominence */
}

.font-medium {
    font-size: var(--font-size-medium) !important;
}

/* AMARA Logo - CSS Background approach to prevent flashing */
.brand-logo {
    background-image: url('/static/images/amara_logo_grey.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
}

/* Home icon color adjustments for both themes */
[data-bs-theme="light"] .brand-icon {
    color: #495057; /* Darker grey to better match the logo */
}

/* Dark mode - less white home icon */
[data-bs-theme="dark"] .brand-icon,
.brand-icon {
    color: #a0a0a0; /* Even more grey, closer to logo tone */
}

/* Bot icon on homepage - darker grey to match logo */
.bot-icon-homepage {
    color: #495057; /* Darker grey to match the AMARA logo */
}

[data-bs-theme="dark"] .bot-icon-homepage {
    color: #8a8a8a; /* Darker grey for dark theme to match logo */
}

/* Table header styling */
.table-header-sm {
    font-size: var(--font-size-small) !important;
    font-weight: bold !important; /* Changed from normal to bold */
}

.font-large {
    font-size: var(--font-size-large) !important;
}

/* Standard badge sizing */
.badge {
    font-size: var(--font-size-small);
    font-weight: normal !important;
}

/* Footer styling */
.footer {
    padding: 1rem 0;
    font-size: var(--font-size-small);
    color: var(--bs-gray-600);
    border-top: 1px solid var(--bs-gray-300);
    margin-top: 2rem;
}

/* Shared select baseline. Previous global "zigzag" workarounds forced every
   select into the operating-system menulist and removed Bootstrap's indicator,
   producing oversized, inconsistent menus. Ordinary one-value controls use
   the standard amara/Bootstrap field treatment; genuine multi-selects remain
   list boxes. */
select.form-select,
select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: var(--bs-form-select-bg-img) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

select.form-select[multiple],
select.form-select[size],
select.form-control[multiple],
select.form-control[size] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    background-image: none !important;
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Override Bootstrap's info color to be blue instead of purple */
:root {
    --bs-info: #6ea8fe !important;
    --bs-info-rgb: 13, 110, 253 !important;
}

/* Convert any remaining purple elements to blue */
html body [data-bs-theme="dark"] .bg-purple,
html body [data-bs-theme="dark"] [style*="background-color: #6f42c1"],
html body [data-bs-theme="dark"] [style*="background-color:#6f42c1"],
html body [data-bs-theme="dark"] [style*="background-color: rgb(111, 66, 193)"],
html body [data-bs-theme="dark"] [class*="purple"] {
    background-color: #6ea8fe !important;
    border-color: #6ea8fe !important;
}

/* Fix form input focus states - convert purple to blue - Maximum specificity */
html[data-bs-theme="dark"] body .form-control:focus,
html[data-bs-theme="dark"] body .form-select:focus,
html[data-bs-theme="dark"] body input:focus,
html[data-bs-theme="dark"] body input[type="text"]:focus,
html[data-bs-theme="dark"] body input[type="email"]:focus,
html[data-bs-theme="dark"] body input[type="password"]:focus,
html[data-bs-theme="dark"] body input[type="number"]:focus,
html[data-bs-theme="dark"] body input[type="date"]:focus,
html[data-bs-theme="dark"] body textarea:focus,
html[data-bs-theme="dark"] body select:focus,
html[data-bs-theme="dark"] body .container input:focus,
html[data-bs-theme="dark"] body .card input:focus,
html[data-bs-theme="dark"] body .card-body input:focus,
html[data-bs-theme="dark"] body form input:focus,
html[data-bs-theme="dark"] body form .form-control:focus,
html[data-bs-theme="dark"] body form .form-select:focus {
    border-color: #6ea8fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    background-color: inherit !important;
    outline: none !important;
}

/* Light mode form focus states - Maximum specificity */
html[data-bs-theme="light"] body .form-control:focus,
html[data-bs-theme="light"] body .form-select:focus,
html[data-bs-theme="light"] body input:focus,
html[data-bs-theme="light"] body input[type="text"]:focus,
html[data-bs-theme="light"] body input[type="email"]:focus,
html[data-bs-theme="light"] body input[type="password"]:focus,
html[data-bs-theme="light"] body input[type="number"]:focus,
html[data-bs-theme="light"] body input[type="date"]:focus,
html[data-bs-theme="light"] body textarea:focus,
html[data-bs-theme="light"] body select:focus,
html[data-bs-theme="light"] body .container input:focus,
html[data-bs-theme="light"] body .card input:focus,
html[data-bs-theme="light"] body .card-body input:focus,
html[data-bs-theme="light"] body form input:focus,
html[data-bs-theme="light"] body form .form-control:focus,
html[data-bs-theme="light"] body form .form-select:focus {
    border-color: #6ea8fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    background-color: inherit !important;
    outline: none !important;
}

/* Form-specific input focus override - only targets form elements */
form input:focus,
form textarea:focus,
form select:focus,
form .form-control:focus,
form .form-select:focus,
.card-body input:focus,
.card-body textarea:focus,
.card-body select:focus,
.card-body .form-control:focus,
.card-body .form-select:focus {
    border-color: #6ea8fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    outline: none !important;
}

/* Light mode purple to blue conversion */
html body [data-bs-theme="light"] .bg-purple,
html body [data-bs-theme="light"] [style*="background-color: #6f42c1"],
html body [data-bs-theme="light"] [style*="background-color:#6f42c1"],
html body [data-bs-theme="light"] [style*="background-color: rgb(111, 66, 193)"],
html body [data-bs-theme="light"] [class*="purple"] {
    background-color: #6ea8fe !important;
    border-color: #6ea8fe !important;
}

/* Absolutely specific selector for supplier approval template */
.card-body h5 + .progress .progress-bar,
.card-body h5:contains('Approval Process Progress') + .progress .progress-bar,
.card-body h5:contains('Approval Process Progress') + .progress div,
.progress:has(+ .row.small.text-muted) .progress-bar {
    background-color: #6ea8fe !important;
    color: white !important;
}

/* Universal hard override for ALL progress bars - most aggressive approach */
/* Target bg-info progress bars and purple elements ONLY — preserve bg-success/warning/danger */
.progress div.bg-info,
.progress .progress-bar.bg-info,
div.bg-info.progress-bar-striped,
div.bg-info.progress-bar-animated {
    background-color: #6ea8fe !important;
    color: white !important;
}

/* Fix for purple elements in supplier approval process */
.progress-bar-striped,
.progress-bar-animated,
.fas.fa-industry,
.bg-info.progress-bar-striped,
.bg-info.progress-bar-animated,
.badge.bg-info {
    background-color: #6ea8fe !important;
    color: white !important;
}

/* Fix for Medium badge in supplier approval and security games */
.badge.bg-info.text-dark,
.badge[class*="medium"],
.badge-medium,
.badge.bg-warning.text-dark,
.game-card .badge.bg-info,
.game-card .badge.bg-primary {
    background-color: #6ea8fe !important;
    color: white !important;
}

/* Fix for blue too dark in dark mode */
html[data-bs-theme="dark"] .badge.bg-info,
html[data-bs-theme="dark"] .progress-bar.bg-info,
html[data-bs-theme="dark"] .fas.fa-industry {
    opacity: 0.8;
}


/* Custom button style for Asset Management module */
.asset-module-btn {
    background-color: #6ea8fe;
    color: white !important;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.asset-module-btn:hover {
    background-color: #0b5ed7;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}


/* Progress bar dark mode adaptation */
html[data-bs-theme="dark"] .progress {
    background-color: #2c3136 !important;
}

/* Fix: progress bars invisible in dark mode — Bootstrap 5.3 CSS variable chain overrides background-color.
   Must override the variables themselves, not the computed property. */
html[data-bs-theme="dark"] .progress-bar.bg-success {
    --bs-success-rgb: 25, 135, 84;
    --bs-bg-opacity: 1;
    background-color: rgb(25, 135, 84) !important;
}
html[data-bs-theme="dark"] .progress-bar.bg-danger {
    --bs-danger-rgb: 220, 53, 69;
    --bs-bg-opacity: 1;
    background-color: rgb(220, 53, 69) !important;
}
html[data-bs-theme="dark"] .progress-bar.bg-warning {
    --bs-warning-rgb: 255, 193, 7;
    --bs-bg-opacity: 1;
    background-color: rgb(255, 193, 7) !important;
}
html[data-bs-theme="dark"] .progress-bar.bg-primary,
html[data-bs-theme="dark"] .progress-bar.bg-info {
    --bs-primary-rgb: 110, 168, 254;
    --bs-bg-opacity: 1;
    background-color: rgb(110, 168, 254) !important;
}
html[data-bs-theme="dark"] .progress-bar.bg-secondary {
    --bs-secondary-rgb: 108, 117, 125;
    --bs-bg-opacity: 1;
    background-color: rgb(108, 117, 125) !important;
}

/* More subtle colors for badges, progress bars and indicators (light mode only — dark mode handled above) */
.badge.bg-primary, html[data-bs-theme="light"] .progress-bar.bg-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.6) !important;
}

.badge.bg-success, html[data-bs-theme="light"] .progress-bar.bg-success {
    background-color: rgba(25, 135, 84, 0.8) !important;
}

.badge.bg-info, html[data-bs-theme="light"] .progress-bar.bg-info {
    background-color: #6ea8fe !important;
}

.badge.bg-warning, html[data-bs-theme="light"] .progress-bar.bg-warning {
    background-color: rgba(255, 193, 7, 0.8) !important;
}

.badge.bg-danger, html[data-bs-theme="light"] .progress-bar.bg-danger {
    background-color: rgba(220, 53, 69, 0.8) !important;
}

.badge.bg-secondary, html[data-bs-theme="light"] .progress-bar.bg-secondary {
    background-color: rgba(108, 117, 125, 0.8) !important;
}

/* Compliance level badges with consistent 0.6 opacity */
.badge-high, .compliance-high {
    background-color: rgba(25, 135, 84, 0.6) !important;
    color: white !important;
}

.badge-medium, .compliance-medium {
    background-color: rgba(255, 193, 7, 0.6) !important;
    color: white !important;
}

.badge-low, .compliance-low {
    background-color: rgba(220, 53, 69, 0.6) !important;
    color: white !important;
}

.badge-critical, .compliance-critical {
    background-color: rgba(220, 53, 69, 0.6) !important;
    color: white !important;
}

/* Pagination text visibility improvements */
.text-muted {
    color: #6c757d !important;
}

html[data-bs-theme="dark"] .text-muted {
    color: #adb5bd !important;
}

/* Pagination info text specific styling - more aggressive targeting */
.pagination-info,
.pagination-info .text-muted,
span.pagination-info,
div.text-muted.small,
.text-muted.small,
div.text-muted,
.text-muted {
    color: #6c757d !important;
    opacity: 1 !important;
}

/* Dark mode pagination text - extremely aggressive */
html[data-bs-theme="dark"] .pagination-info,
html[data-bs-theme="dark"] .pagination-info .text-muted,
html[data-bs-theme="dark"] span.pagination-info,
html[data-bs-theme="dark"] div.text-muted.small,
html[data-bs-theme="dark"] .text-muted.small,
html[data-bs-theme="dark"] div.text-muted,
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] body .text-muted,
html[data-bs-theme="dark"] .container .text-muted {
    color: #ffffff !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

/* Direct targeting for pagination text - force white/black colors */
.pagination-count-text,
div.pagination-count-text,
span.pagination-count-text,
.small.pagination-count-text,
div.small.pagination-count-text,
div[class*="pagination-count"],
.row .col-12 div.small {
    color: #212529 !important;
    font-size: 0.875rem !important;
    opacity: 1 !important;
}

html[data-bs-theme="dark"] .pagination-count-text,
html[data-bs-theme="dark"] div.pagination-count-text,
html[data-bs-theme="dark"] span.pagination-count-text,
html[data-bs-theme="dark"] .small.pagination-count-text,
html[data-bs-theme="dark"] div.small.pagination-count-text,
html[data-bs-theme="dark"] div[class*="pagination-count"],
html[data-bs-theme="dark"] .row .col-12 div.small {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Remove green badge styling for "Low" criticality - make it standard text */
.badge.bg-success {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 !important;
    font-weight: normal !important;
}

html[data-bs-theme="dark"] .badge.bg-success {
    background-color: transparent !important;
    color: #f8f9fa !important;
}

html[data-bs-theme="light"] .badge.bg-success {
    background-color: transparent !important;
    color: #212529 !important;
}

/* Softer risk indicators */
.rating-indicator {
    opacity: 0.7;
}

/* Theme-aware backgrounds */
.theme-aware-bg {
    background-color: transparent !important;
    color: inherit !important;
}

html[data-bs-theme="dark"] .theme-aware-bg {
    background-color: transparent !important;
    color: inherit !important;
}

/* Additional fix for white backgrounds throughout the app */
.card-body.bg-light, .card-header.bg-light, thead.bg-light,
.bg-white, .bg-light, .table-light, .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
    color: inherit !important;
}

/* Alert styling - scoped to dark mode */
html[data-bs-theme="dark"] .alert,
html[data-bs-theme="dark"] .alert-warning,
html[data-bs-theme="dark"] .alert-info,
html[data-bs-theme="dark"] .alert-success,
html[data-bs-theme="dark"] .alert-danger {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Light mode alert colors */
html[data-bs-theme="light"] .alert-warning { background-color: #fff3cd !important; color: #664d03 !important; }
html[data-bs-theme="light"] .alert-info    { background-color: #cfe2ff !important; color: #084298 !important; }
html[data-bs-theme="light"] .alert-success { background-color: #d1e7dd !important; color: #0f5132 !important; }
html[data-bs-theme="light"] .alert-danger  { background-color: #f8d7da !important; color: #842029 !important; }

html[data-bs-theme="dark"] .card-body.bg-light, 
html[data-bs-theme="dark"] .card-header.bg-light, 
html[data-bs-theme="dark"] thead.bg-light,
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .table-light,
html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
    color: inherit !important;
}

/* Dark mode alert styling with white text */
html[data-bs-theme="dark"] .alert,
html[data-bs-theme="dark"] .alert-warning,
html[data-bs-theme="dark"] .alert-info,
html[data-bs-theme="dark"] .alert-success,
html[data-bs-theme="dark"] .alert-danger {
    background-color: transparent !important;
    color: #ffffff !important;
}

table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

html[data-bs-theme="dark"] table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Special handling for the integrity questions section */
#integrity-questions[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
}

#integrity-questions[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
}

/* Fix white background in assessment sections */
.integrity-assessment, .integrity-detailed-questions, .integrity-assessment div,
#integrity-questions, #integrity-questions div, div[class*="integrity"] {
    background-color: transparent !important;
}

/* More targeted background handling - dark mode only */
html[data-bs-theme="dark"] .cia-section-card,
html[data-bs-theme="dark"] .bg-dark,
html[data-bs-theme="dark"] .phase-wrapper,
html[data-bs-theme="dark"] .details-container,
html[data-bs-theme="dark"] .timeline-item {
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* Light mode overrides for CIA/phase elements */
html[data-bs-theme="light"] .cia-section-card,
html[data-bs-theme="light"] .phase-wrapper,
html[data-bs-theme="light"] .details-container {
    color: #212529 !important;
}

/* Set light-mode default backgrounds */
.card, .card-body,
.table, .table tbody, .table thead, .table tr, .table th, .table td {
    background-color: white !important;
}

/* amara-branded table header
   - LIGHT mode: BRIGHT header — soft grey-blue bg with dark navy text
     (#eef1f5 bg + #2b3a55 text, WCAG AAA 11.4:1 contrast).
   - DARK mode: keep original behavior — header bg matches body so it "blends",
     only white text is visible. (MG direction 2026-04-18: dark-mode style preserved
     from original .table-dark appearance; light mode must NOT be dark.) */
:root {
    --amara-table-header-bg-light: #eef1f5;
    --amara-table-header-color-light: #2b3a55;
    --amara-table-header-bg-dark: #212529;
    --amara-table-header-color-dark: #ffffff;
    /* Theme-aware "amara muted" secondary text colour.
       Legacy literal `#96a0aa` has 2.88:1 contrast on white — WCAG AA fail.
       Light mode bumps to #5a6370 (7.0:1) while dark mode keeps the familiar
       #96a0aa (4.8:1 on near-black body bg). */
    --amara-muted-text: #96a0aa;
}
html[data-bs-theme="light"] {
    --amara-muted-text: #5a6370;
}
html[data-bs-theme="dark"] {
    --amara-muted-text: #96a0aa;
}

html[data-bs-theme="light"] .table thead.table-amara,
html[data-bs-theme="light"] .table thead.table-amara th,
.table thead.table-amara,
.table thead.table-amara th {
    background-color: var(--amara-table-header-bg-light) !important;
    color: var(--amara-table-header-color-light) !important;
    border-color: #dde3ea !important;
}

html[data-bs-theme="dark"] .table thead.table-amara,
html[data-bs-theme="dark"] .table thead.table-amara th {
    background-color: var(--amara-table-header-bg-dark) !important;
    color: var(--amara-table-header-color-dark) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Legacy .table-dark fallback — same treatment as .table-amara in both themes */
html[data-bs-theme="light"] .table thead.table-dark,
html[data-bs-theme="light"] .table thead.table-dark th,
.table thead.table-dark,
.table thead.table-dark th {
    background-color: var(--amara-table-header-bg-light) !important;
    color: var(--amara-table-header-color-light) !important;
    border-color: #dde3ea !important;
}

html[data-bs-theme="dark"] .table thead.table-dark,
html[data-bs-theme="dark"] .table thead.table-dark th {
    background-color: var(--amara-table-header-bg-dark) !important;
    color: var(--amara-table-header-color-dark) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Game difficulty badge background fix */
.difficulty-badge .badge {
    background-color: #212529 !important;
}

/* Set dark-mode backgrounds */
html[data-bs-theme="dark"] .card, 
html[data-bs-theme="dark"] .card-body,
html[data-bs-theme="dark"] .table, 
html[data-bs-theme="dark"] .table tbody, 
html[data-bs-theme="dark"] .table thead, 
html[data-bs-theme="dark"] .table tr, 
html[data-bs-theme="dark"] .table th, 
html[data-bs-theme="dark"] .table td {
    background-color: #212529 !important;
    color: #f8f9fa !important;
}

/* Ensure navbar has consistent background in both modes */
.navbar {
    background-color: #f8f9fa !important;
}

html[data-bs-theme="dark"] .navbar {
    background-color: #212529 !important;
}

/* Fix alert-warning in dark mode */
html[data-bs-theme="dark"] .alert-warning {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

/* Fix all alerts in dark mode to ensure white text */
html[data-bs-theme="dark"] .alert,
html[data-bs-theme="dark"] .alert-info,
html[data-bs-theme="dark"] .alert-success,
html[data-bs-theme="dark"] .alert-danger,
html[data-bs-theme="dark"] .alert-primary,
html[data-bs-theme="dark"] .alert-secondary {
    color: #ffffff !important;
}

/* Enhanced table hover effects */
.table-hover > tbody > tr:hover {
    background-color: rgba(0, 0, 0, 0.075) !important;
}

html[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: transparent !important;
    transition: border-color 0.2s ease;
}

html[data-bs-theme="dark"] .table-hover > tbody > tr:hover td {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

/* Enhanced table hover effect for all tables in the app */
.table > tbody > tr:hover,
.table-hover > tbody > tr:hover,
.table.table-hover > tbody > tr:hover,
table > tbody > tr:hover,
tr:hover {
    background-color: rgba(0, 0, 0, 0.075) !important;
    transition: background-color 0.2s ease;
}

/* Override table-success hover to match normal table rows */
tr.table-success:hover,
tr.table-success:hover > td {
    background-color: rgba(0, 0, 0, 0.075) !important;
}

html[data-bs-theme="dark"] tr.table-success:hover,
html[data-bs-theme="dark"] tr.table-success:hover > td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-bs-theme="dark"] .table > tbody > tr:hover,
html[data-bs-theme="dark"] .table-hover > tbody > tr:hover,
html[data-bs-theme="dark"] .table.table-hover > tbody > tr:hover,
html[data-bs-theme="dark"] table > tbody > tr:hover,
html[data-bs-theme="dark"] tr:hover {
    background-color: transparent !important;
    transition: border-color 0.2s ease;
}

html[data-bs-theme="dark"] .table > tbody > tr:hover td,
html[data-bs-theme="dark"] .table-hover > tbody > tr:hover td,
html[data-bs-theme="dark"] .table.table-hover > tbody > tr:hover td,
html[data-bs-theme="dark"] table > tbody > tr:hover td {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

/* Style specifically for integrity sections */
.integrity-assessment-table,
.integrity-summary-card,
.integrity-details-card {
    background-color: white !important;
}

html[data-bs-theme="dark"] .integrity-assessment-table,
html[data-bs-theme="dark"] .integrity-summary-card,
html[data-bs-theme="dark"] .integrity-details-card {
    background-color: #343a40 !important;
}

/* Global text color fixes */
body h1, body h2, body h3, body h4, body h5, body h6, body p, body div, body span {
    color: #f8f9fa !important;
}

html[data-bs-theme="light"] h1, 
html[data-bs-theme="light"] h2, 
html[data-bs-theme="light"] h3, 
html[data-bs-theme="light"] h4, 
html[data-bs-theme="light"] h5, 
html[data-bs-theme="light"] h6, 
html[data-bs-theme="light"] p, 
html[data-bs-theme="light"] div, 
html[data-bs-theme="light"] span {
    color: #212529 !important;
}

/* Specific card styling */
.card, .card-body, .card-header, .card-footer {
    background-color: #2c3034 !important;
    color: #f8f9fa !important;
    border-color: #495057 !important;
}

html[data-bs-theme="light"] .card,
html[data-bs-theme="light"] .card-body,
html[data-bs-theme="light"] .card-header,
html[data-bs-theme="light"] .card-footer {
    background-color: white !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

/* Stats card theme-specific styling */
.stats-card {
    background-color: #2c3034 !important;
    color: #f8f9fa !important;
}

html[data-bs-theme="light"] .stats-card {
    background-color: transparent !important;
    color: #212529 !important;
}

/* Specific styling for dark card headers in module pages */
.card-header.bg-dark {
    background-color: #212529 !important;
    color: #f8f9fa !important;
}

html[data-bs-theme="light"] .card-header.bg-dark {
    background-color: transparent !important;
    color: #212529 !important;
}

/* Keep card headers styled differently */
.card-header.bg-primary {
    background-color: #6ea8fe !important;
    color: white !important;
}

/* Risk Management specific styles */
.module-header-card.risk-management {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

/* Fix the Complete Data Entry Phase button */
.btn-primary {
    color: white !important;
    background-color: #6ea8fe !important;
    border-color: #6ea8fe !important;
}

.btn-primary:hover {
    color: white !important;
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

.btn-outline-primary {
    color: #6ea8fe !important;
    border-color: #6ea8fe !important;
}

.btn-outline-primary:hover {
    color: white !important;
    background-color: #6ea8fe !important;
    border-color: #6ea8fe !important;
}

/* Global styles */
.navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    min-height: 35px;
}

.navbar-brand {
    position: relative;
    width: 120px;
    height: 35px;
    padding: 0;
    margin: 0;
}

.brand-container {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin-top: 0;
}

.brand-icon {
    /* Removed absolute positioning - using flexbox from parent .brand-container */
    margin-left: 3px;  /* Align with sidebar icons */
    margin-right: 5px; /* Space before logo (reduced by 7px total to move logo left) */
    margin-top: 1px;
    transform: translateY(-0.5px);
}

.brand-text {
    position: absolute;
    left: 30px;  /* Move only the text a bit more to the right */
    top: 53%;   /* Moved further down */
    transform: translateY(-50%);
    font-weight: 600;
    font-size: var(--font-size-medium);
}

.navbar-nav .nav-link {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Mobile hamburger menu text labels */
.navbar-nav .nav-link span {
    color: #96a0aa !important;
}
body {
    padding-top: 48px;
}

/* The navbar collapses only while the desktop sidebar is also hidden. Keep its
   top row fixed and render the normal permitted navigation as an opaque drawer. The
   application never shows through the menu, and neither the logo nor the
   hamburger moves when the drawer opens. */
@media (max-width: 767.98px) {
    body {
        padding-top: 56px;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .navbar > .container-fluid {
        height: 48px !important;
        min-height: 48px;
    }

    .navbar .navbar-toggler:focus:not(:focus-visible) {
        box-shadow: none;
    }

    #mobileMenu {
        position: fixed;
        top: 56px;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: calc(100vh - 56px);
        height: calc(100dvh - 56px);
        min-width: 0;
        max-height: calc(100vh - 56px);
        max-height: calc(100dvh - 56px);
        overflow: hidden;
        overscroll-behavior: contain;
        padding: 0.5rem 1rem 1rem;
        background-color: #212529;
        border-top: 1px solid var(--bs-border-color);
        border-bottom: 1px solid var(--bs-border-color);
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
        box-sizing: border-box;
        z-index: 1039;
    }

    html[data-bs-theme="light"] #mobileMenu {
        background-color: #f8f9fa;
    }

    #mobileMenu.collapse.show {
        overflow-x: hidden;
        overflow-y: auto;
    }

    #mobileMenu.collapsing {
        overflow: hidden;
    }

    #mobileMenu > .navbar-nav {
        width: 100%;
        height: auto !important;
        align-items: stretch !important;
        margin-inline: 0 !important;
    }

    #mobileMenu > .mobile-primary-nav .nav-link {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0.625rem 0 0.625rem 0.1875rem !important;
        overflow-wrap: anywhere;
    }

    #mobileMenu > .mobile-utility-nav {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem !important;
        padding-top: 0.75rem;
        border-top: 1px solid var(--bs-border-color);
    }

    #mobileMenu > .mobile-utility-nav > .nav-item {
        width: auto;
        height: auto !important;
        min-height: 44px;
        margin-inline: 0 !important;
        justify-content: center;
    }

    #mobileMenu > .mobile-utility-nav > .mobile-account-item {
        flex: 1 0 calc(100% - 52px);
        justify-content: flex-start;
    }

    #mobileMenu > .mobile-utility-nav > .nav-item:last-child {
        flex: 0 0 44px;
    }

    #mobileMenu > .mobile-utility-nav .nav-link {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0.625rem 0.75rem !important;
        overflow-wrap: anywhere;
    }

    #mobileMenu .theme-toggle-pill {
        min-height: 44px;
    }

    #mobileMenu .language-toggle {
        height: 44px !important;
    }

    #mobileMenu .language-toggle .lang-option {
        min-width: 44px;
        height: 42px !important;
        justify-content: center;
    }

    #mobileMenu .dropdown-menu {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
    }

    #mobileMenu #mcpBellBadge {
        top: 50% !important;
        right: 0.75rem !important;
        transform: translateY(-50%) !important;
    }
}

/* At the compact desktop breakpoint the normal sidebar and top navigation are
   both visible. Account for the navbar's rendered 56px cage without invoking
   the mobile drawer. */
@media (min-width: 768px) and (max-width: 991.98px) {
    body {
        padding-top: 56px;
    }

    .sidebar {
        top: 56px !important;
    }
}

.sidebar {
    position: fixed;
    top: 48px;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0;
    border-right: 1px solid var(--bs-card-border-color);
    width: calc(16.66667% - 20px) !important; /* Reduce sidebar width by 20px on large screens */
}

/* Expanded navigation is a readable label rail. Keep the collapsed 60px rail
   untouched (defined in base.html) and move the content boundary with the
   expanded sidebar so labels never overlay the page. The 216px width leaves
   a restrained margin after the longest 14px label. */
@media (min-width: 992px) {
    body:not(.sidebar-collapsed) .sidebar {
        width: 216px !important;
    }

    body:not(.sidebar-collapsed) .sidebar .nav-link {
        max-width: 216px;
    }

    body:not(.sidebar-collapsed) .col-md-9.ms-sm-auto.col-lg-10 {
        width: calc(100% - 216px) !important;
        margin-left: 216px !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sidebar {
        width: calc(25% - 20px) !important; /* Reduce sidebar width by 20px on medium screens */
    }
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable; /* Reserve scrollbar space to prevent layout shift */
}

.sidebar .nav-link {
    font-weight: 500;
    color: #96a0aa !important; /* TEST: Slightly brighter grey */
    display: flex;
    align-items: center;
    font-size: 1.05rem !important; /* Slightly reduced font size for sidebar links */
    border-left: 3px solid transparent; /* Reserve space for consistent sizing */
    padding: 0.5rem 1rem 0.5rem 1rem !important; /* Aligned with sidebar headings (px-3) */
    border-radius: 0 !important; /* No rounded corners — prevents shift between states */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-left-color 0.2s ease-in-out; /* Explicit — excludes border-radius from animation */
    max-width: 240px; /* Cap hover bar width on wide screens */
    margin-top: 2px; /* Move down by 2px */
    /* The icon rail must not reflow when its text column is hidden. */
    height: 41px;
    min-height: 41px;
    box-sizing: border-box;
}

.nav-table {
    border-collapse: collapse;
    table-layout: fixed; /* Lock column widths — prevents icon/text shift */
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.nav-table tr, .nav-table td {
    border: none !important;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    position: relative;
    line-height: 1.5;
    background: transparent !important;
    pointer-events: none; /* Prevent table from intercepting hover */
}

.icon-cell {
    width: 28px;
    text-align: center;
    padding-right: 8px !important;
    vertical-align: middle;
}

.icon-cell i,
.icon-cell span {
    display: inline-block;
    width: 20px;
    text-align: center;
    font-size: 1.05rem !important;
}

/* Sidebar table icons - nuclear specificity */
.sidebar .nav-table .icon-cell i,
.sidebar .nav-table .icon-cell i.fal,
.sidebar td.icon-cell i {
    font-size: 1.05rem !important;
}

/* Icons directly in nav-links (Ask amara, Document Dialog, etc.) */
.sidebar .nav-link > i {
    font-size: 1.05rem !important;
}

/* Sidebar headings */
.sidebar-heading {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
}

/* Sidebar heading text color - override Bootstrap text-muted */
.sidebar .sidebar-heading,
.sidebar .sidebar-heading.text-muted,
.sidebar h6.sidebar-heading,
h6.sidebar-heading.text-muted,
.sidebar h6.text-muted {
    color: #96a0aa !important; /* TEST: Slightly brighter grey */
}

/* Extra specific override for sidebar section headers */
.sidebar .sidebar-heading span {
    color: #96a0aa !important; /* TEST: Slightly brighter grey */
}

/* All sidebar nav links - default transparent border to prevent shift */
.sidebar .nav-link {
    border-left: 3px solid transparent !important; /* Reserve space for active border */
}

/* Sidebar hover styling - grey shade, no full background */
.sidebar .nav-link:hover:not(.active) {
    background-color: rgba(108, 117, 125, 0.1) !important; /* Light grey shade */
    border-left-color: transparent !important; /* Keep border transparent on hover */
    color: #96a0aa !important; /* TEST: Slightly brighter grey */
    border-radius: 7px !important;
}

/* Sidebar active item styling - only left border highlighted */
.sidebar .nav-link.active {
    color: #96a0aa !important; /* TEST: Slightly brighter grey */
    background-color: transparent !important; /* No background */
    border-left: 3px solid #6c757d !important; /* Grey left border - straight, no rounding */
    border-radius: 0 !important; /* No rounded corners on active state */
    font-weight: 500; /* Same as default, no change */
}

/* Light mode specific active styling */
html[data-bs-theme="light"] .sidebar .nav-link.active {
    background-color: transparent !important; /* No background */
    color: #96a0aa !important; /* TEST: Slightly brighter grey */
    border-left: 3px solid #6c757d !important; /* Grey left border */
}

/* Light mode specific hover styling */
html[data-bs-theme="light"] .sidebar .nav-link:hover:not(.active) {
    color: #6c757d !important; /* Grey text on hover */
    background-color: rgba(108, 117, 125, 0.1) !important;
}

/* Dark mode specific sidebar styling */
html[data-bs-theme="dark"] .sidebar .nav-link.active {
    color: #96a0aa !important; /* TEST: Slightly brighter grey */
    border-left: 3px solid #6c757d !important; /* Grey left border */
    background-color: transparent !important;
}

html[data-bs-theme="dark"] .sidebar .nav-link:hover:not(.active) {
    color: #96a0aa !important; /* TEST: Slightly brighter grey */
    background-color: rgba(108, 117, 125, 0.1) !important; /* Light grey shade */
    border-left-color: transparent !important;
}

.main-content {
    padding: 1.5rem;
}

/* Phase indicators */
.phase-indicator {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-small);
    font-weight: 700;
    border-radius: 0.25rem;
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

/* Progress phase dots - removed global override to allow inline styles */

/* Phase dots with active state - removed global override to allow inline styles */

/* CIA assessment rating badges and phase indicators */
.badge.bg-info,
.badge.bg-purple, 
.badge-purple,
.bg-purple,
.bg-info,
.internal-badge,
.low-badge,
div.bg-purple,
span.bg-purple,
[style*="background-color: rgb(111, 66, 193)"],
[style*="background-color:#6f42c1"],
[style*="background-color: #6f42c1"],
[class*="current-phase"],
[class*="rating-badge"],
[class*="phase-badge"],
[class*="phase-indicator"],
.rating-badge-high, 
.badge-high,
div.badge-high, 
span.badge-high, 
.badge-public,
div.badge-public,
span.badge-public,
.badge-medium,
div.badge-medium,
span.badge-medium {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Progress bar and phase dots - target bg-info and purple ONLY (not bg-success/warning/danger) */
.progress-bar.bg-purple,
.progress-bar.bg-info,
.progress-bar.bg-info.progress-bar-striped,
.progress-bar.bg-info.progress-bar-animated,
.progress div[class*="bg-info"],
.progress div.progress-bar-striped,
.progress div.progress-bar-animated,
.progress div.bg-info,
div[class*="current-phase"],
div[style*="background-color:#6f42c1"],
div[style*="background-color: #6f42c1"],
div[style*="background-color: rgb(111, 66, 193)"],
.progress-phase-indicator,
.phase-progress-dot,
.card-body .progress div.bg-info {
    background-color: var(--bs-primary) !important;
}


/* Phase status indicators */
div[class*="current-phase"],
div[class*="phase-indicator"],
.current-phase-indicator {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Card customizations */
.card {
    margin-bottom: 1.5rem;
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
    background-color: var(--bs-dark);
    color: var(--bs-light);
    font-weight: 500;
}

/* Application disclosure standard for normal information cards. The header
   remains expanded by default; controls, tabs and modal headers opt out in
   app.js because they own a different interaction. */
.card > .card-header.amara-collapsible-card-header {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 1.05rem;
    font-weight: 500;
    gap: 0.75rem;
}

.card > .card-header.amara-collapsible-card-header > :is(h1, h2, h3, h4, h5, h6, .card-title) {
    color: inherit !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    margin-bottom: 0;
}

.card > .card-header.amara-collapsible-card-header .amara-card-header-chevron {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm);
    margin-left: auto;
    transition: transform 0.18s ease;
}

.card > .card-header.amara-collapsible-card-header.collapsed .amara-card-header-chevron {
    transform: rotate(-90deg);
}

.card > .card-header.amara-collapsible-card-header:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--bs-primary);
    outline-offset: 3px;
}

/* Dashboard stats */
.stats-card {
    text-align: center;
    padding: 1rem;
    height: 120px; /* Reduced height for stats cards */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-card .stats-number {
    font-size: var(--font-size-large);
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: inherit; /* Use theme-aware color */
}

.stats-card .stats-title {
    font-size: var(--font-size-medium);
    font-weight: 500;
    color: inherit; /* Use theme-aware color */
}

/* Ensure text is readable in light mode */
html:not([data-bs-theme="dark"]) .stats-card.bg-primary .stats-number,
html:not([data-bs-theme="dark"]) .stats-card.bg-primary .stats-title {
    color: white !important;
}

/* Form styles */
.form-label {
    font-weight: 500;
}

/* Shared list typography: routine navigation and data should be read in Amara
   gray. Bright white is reserved for page/section hierarchy, key links and
   semantic status colours rather than every label and column heading. */
.form-label,
.list-summary-count {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm);
    font-weight: 500;
}

.table-header-sm,
.table thead th {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0;
    text-transform: none;
}

.table tbody td {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm);
    font-weight: 400;
}

/* Table anchors remain deliberate reading anchors; status badges and explicit
   severity colours keep their existing semantic rules. */
.table tbody td > a {
    color: var(--bs-body-color) !important;
    font-weight: 500;
}

.table tbody td :is(.badge, [style*="color: rgb"]) {
    font-weight: 400 !important;
}

/* Keep the module glyph on the title baseline, at the title's own scale—not
   centred against the title plus its supporting subtitle. */
.risk-register-page .risk-register-title-icon {
    color: var(--bs-body-color);
    display: inline-block;
    font-size: 1em;
    line-height: 1;
    margin-right: 0.5rem;
    vertical-align: -0.08em;
}

.risk-register-page .risk-register-subtitle {
    margin-left: calc(1em + 0.5rem);
}

/* Risk Register: primary information panels use the standard card-title
   hierarchy and remain expanded until a user chooses to collapse them. */
.risk-register-page .risk-register-card-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.risk-register-page .risk-register-card-title {
    font-size: 1.05rem;
    font-weight: 500;
}

.risk-register-page .risk-register-card-header-meta {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.risk-register-page .risk-register-card-chevron {
    color: var(--amara-muted-text);
    font-size: var(--font-sm);
    transition: transform 0.18s ease;
}

.risk-register-page .risk-register-card-toggle.collapsed .risk-register-card-chevron {
    transform: rotate(-90deg);
}

.risk-register-page .risk-register-card-toggle:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--bs-primary);
    outline-offset: 3px;
}

/* Risk Detail reading hierarchy: labels stay scan-friendly white without the
   former heavy bold treatment; routine values recede to the Amara reading tier.
   Score/status badges remain semantic and card/page titles stay untouched. */
.risk-detail-page .risk-detail-label,
.risk-detail-page .timeline-entry-title {
    color: var(--bs-body-color);
    font-size: var(--font-sm);
    font-weight: 500;
}

.risk-detail-page .risk-information-card .card-body > .row.mb-3 > .col-md-8 {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm);
    font-weight: 400;
}

.risk-detail-page .risk-activity-timeline .text-muted,
.risk-detail-page .risk-activity-timeline .text-muted.small {
    color: var(--amara-muted-text) !important;
    font-weight: 400;
}

.risk-detail-page .step-title {
    color: var(--amara-muted-text) !important;
    font-weight: 400;
}

.risk-detail-page .phase-step.current .step-title {
    color: var(--bs-body-color) !important;
    font-weight: 500;
}

.risk-detail-page .phase-step.complete .step-status,
.risk-detail-page .phase-step.pending .step-status {
    color: var(--amara-muted-text) !important;
    font-weight: 400;
}

.risk-detail-page .phase-step.current .step-status {
    color: var(--bs-primary) !important;
    font-weight: 400;
}

/* Fixed height for approval status text to ensure alignment */
.row.text-center .mb-3 p.text-muted {
    height: 40px; /* Fixed height for phase description */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem !important;
}

.required-field::after {
    content: " *";
    color: var(--bs-danger);
}

/* Navigation breadcrumbs */
.breadcrumb {
    background-color: transparent;
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-gray-300);
}

/* Breadcrumb links - use default theme color (white/dark) */
.breadcrumb a,
.breadcrumb-item a,
.breadcrumb-item > a,
nav[aria-label="breadcrumb"] a,
nav[aria-label="breadcrumb"] .breadcrumb a,
nav[aria-label="breadcrumb"] .breadcrumb .breadcrumb-item a {
    color: inherit !important;
    text-decoration: none !important;
}

.breadcrumb a:hover,
.breadcrumb-item a:hover,
.breadcrumb-item > a:hover,
nav[aria-label="breadcrumb"] a:hover,
nav[aria-label="breadcrumb"] .breadcrumb a:hover,
nav[aria-label="breadcrumb"] .breadcrumb .breadcrumb-item a:hover {
    color: inherit !important;
    text-decoration: underline !important;
}

/* Custom utility classes */
.cursor-pointer {
    cursor: pointer;
}

.hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    transition: box-shadow 0.3s ease-in-out;
}

/* Module-specific colors - REMOVED thick left borders for clean hover effect */
/* 
.module-asset {
    border-left: 4px solid var(--bs-primary);
}

.module-cia {
    border-left: 4px solid var(--bs-warning);
}

.module-assessments {
    border-left: 4px solid var(--bs-warning);
}

.module-risk {
    border-left: 4px solid var(--bs-danger);
}

.module-nis2 {
    border-left: 4px solid var(--bs-info);
}

.module-supplier {
    border-left: 4px solid var(--bs-success);
}

.module-games {
    border-left: 4px solid var(--bs-secondary);
}
*/

/* Status styling - Very muted green for Active status */
.status-active {
    color: #7a9a7a !important;
    font-weight: 500;
}

.status-inactive {
    color: #6c757d !important;
}

.status-retired {
    color: #dc3545 !important;
}

.status-other {
    color: #6c757d !important;
}

/* Pagination text styling for dark mode only */
html body [data-bs-theme="dark"] .text-muted {
    color: #ffffff !important;
}

html body [data-bs-theme="dark"] .small {
    color: #ffffff !important;
}

/* Specific targeting for pagination text */
html body [data-bs-theme="dark"] .d-flex.justify-content-between .text-muted {
    color: #ffffff !important;
}

html body [data-bs-theme="dark"] .d-flex.justify-content-between .text-muted.small {
    color: #ffffff !important;
}

/* Submodule indicators with matching colors to parent modules - REMOVED for clean hover effect */
/*
.submodule-asset {
    border-left: 6px solid var(--bs-primary) !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
}

.submodule-cia {
    border-left: 6px solid var(--bs-warning) !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
}

.submodule-risk {
    border-left: 6px solid var(--bs-danger) !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
}

/* Maturity level text styling */
.maturity-level-text {
    color: #212529 !important;
}

html[data-bs-theme="dark"] .maturity-level-text {
    color: #ffffff !important;
}

/* Remaining submodule borders - commented out
.submodule-nis2 {
    border-left: 6px solid var(--bs-info) !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
}

.submodule-supplier {
    border-left: 6px solid var(--bs-success) !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
}

.submodule-games {
    border-left: 6px solid var(--bs-secondary) !important;
    margin-left: 10px !important;
    padding-left: 10px !important;
}
*/

/* Asset view field styling - subtle visual distinction */
.form-control-plaintext {
    background-color: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 4px !important;
    padding: 0.5rem 0.75rem !important;
    margin-top: 0.25rem !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

[data-bs-theme="dark"] .form-control-plaintext {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e9ecef !important;
}

/* Asset table links */
.asset-name-link, .assessment-name-link {
    text-decoration: none !important;
    color: inherit !important;
    transition: opacity 0.2s;
}

.asset-name-link:hover, .assessment-name-link:hover {
    opacity: 0.8;
    cursor: pointer;
}

/* ========================================
   THEME TOGGLE PILL
   Moon/Sun pill toggle in navbar
   ======================================== */
.theme-toggle-pill {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.theme-toggle-track {
    position: relative;
    width: 44px;
    height: 22px;
    border-radius: 11px;
    border: 1px solid #96a0aa;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    transition: border-color 0.2s;
}

.theme-toggle-pill:hover .theme-toggle-track {
    border-color: #c0c8d0;
}

.theme-toggle-pill:focus-visible {
    outline: 2px solid #96a0aa;
    outline-offset: 2px;
    border-radius: 11px;
}

.theme-icon-moon,
.theme-icon-sun {
    font-size: 11px;
    z-index: 2;
    position: relative;
    line-height: 1;
    transition: color 0.3s, opacity 0.3s;
}

/* Dark mode: moon bright, sun dim — both remain within AMARA grey. */
.theme-icon-moon { color: #96a0aa; opacity: 1; }
.theme-icon-sun  { color: #96a0aa; opacity: 0.4; }

/* Light mode: sun bright, moon dim */
html[data-bs-theme="light"] .theme-icon-moon { color: #96a0aa; opacity: 0.4; }
html[data-bs-theme="light"] .theme-icon-sun  { color: #96a0aa; opacity: 1; }

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #96a0aa;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Light mode: thumb slides right */
html[data-bs-theme="light"] .theme-toggle-thumb {
    left: 23px;
}

/* Light theme specific styles */
html[data-bs-theme="light"] {
    background-color: #f8f9fa;
}

/* Landing page header styling with theme support */
.landing-header {
    background-color: #212529;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html[data-bs-theme="light"] .landing-header {
    background-color: #e9ecef;
    color: #212529;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Module header card styling with theme support */
/* Basic module header card styles - will be overridden by specific module styles */
.module-header-card {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html[data-bs-theme="light"] .module-header-card {
    color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Asset management module headers - using the standardized blue from CIA assessment headers */
.asset-management-header {
    background-color: #6ea8fe; /* Full intensity blue matching the primary blue */
}

html[data-bs-theme="light"] .asset-management-header {
    background-color: #6ea8fe; /* Full intensity blue matching the primary blue */
    color: #ffffff;
}

/* CIA assessment module headers - optimally soft yellow/warning */
.cia-evaluation-header {
    background-color: rgba(255, 193, 7, 0.6); /* Balanced soft yellow */
}

html[data-bs-theme="light"] .cia-evaluation-header {
    background-color: rgba(255, 193, 7, 0.6); /* Balanced soft yellow */
}

/* Risk management module headers - optimally soft red/danger */
.risk-management-header {
    background-color: rgba(220, 53, 69, 0.6); /* Balanced soft red */
}

html[data-bs-theme="light"] .risk-management-header {
    background-color: rgba(220, 53, 69, 0.6); /* Balanced soft red */
    color: #ffffff;
}

/* NIS2 compliance module headers - optimally soft light blue/info */
.nis2-compliance-header {
    background-color: rgba(13, 202, 240, 0.6); /* Balanced soft light blue */
}

html[data-bs-theme="light"] .nis2-compliance-header {
    background-color: rgba(13, 202, 240, 0.6); /* Balanced soft light blue */
}

/* Supplier management module headers - optimally soft green/success */
.supplier-management-header {
    background-color: rgba(25, 135, 84, 0.6); /* Balanced soft green */
}

html[data-bs-theme="light"] .supplier-management-header {
    background-color: rgba(25, 135, 84, 0.6); /* Balanced soft green */
    color: #ffffff;
}

/* Security games module headers - optimally soft gray/secondary */
.security-games-header {
    background-color: rgba(108, 117, 125, 0.6); /* Balanced soft gray */
}

html[data-bs-theme="light"] .security-games-header {
    background-color: rgba(108, 117, 125, 0.6); /* Balanced soft gray */
    color: #ffffff;
}

/* Document Dialog module headers - soft indigo/purple */
.module-header-card.document-dialog {
    background-color: rgba(111, 66, 193, 0.6); /* Balanced soft purple */
}

html[data-bs-theme="light"] .module-header-card.document-dialog {
    background-color: rgba(111, 66, 193, 0.6); /* Balanced soft purple */
    color: #ffffff;
}

html[data-bs-theme="light"] .navbar {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6;
}

html[data-bs-theme="light"] .navbar-dark {
    background-color: #f8f9fa !important;
}

html[data-bs-theme="light"] .navbar-dark .navbar-brand,
html[data-bs-theme="light"] .navbar-dark .nav-link {
    color: #212529 !important;
}

html[data-bs-theme="light"] .sidebar {
    background-color: #f8f9fa !important;
    border-right: 1px solid #dee2e6;
}

html[data-bs-theme="light"] .sidebar .nav-link {
    color: #96a0aa !important; /* Standard AMARA grey */
}

html[data-bs-theme="light"] .card {
    border: 1px solid #dee2e6;
}

html[data-bs-theme="light"] .card-header {
    background-color: #e9ecef;
    color: #212529;
}

html[data-bs-theme="light"] .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
}

html[data-bs-theme="light"] .dropdown-item {
    color: #212529;
}

html[data-bs-theme="light"] .text-muted {
    color: #6c757d !important;
}

/* Ensure moduleborders are visible in light mode - REMOVED for clean hover effect */
/*
html[data-bs-theme="light"] .module-asset {
    border-left: 4px solid var(--bs-primary);
}

html[data-bs-theme="light"] .module-cia {
    border-left: 4px solid var(--bs-warning);
}

html[data-bs-theme="light"] .module-risk {
    border-left: 4px solid var(--bs-danger);
}

html[data-bs-theme="light"] .module-nis2 {
    border-left: 4px solid var(--bs-info);
}

html[data-bs-theme="light"] .module-supplier {
    border-left: 4px solid var(--bs-success);
}

html[data-bs-theme="light"] .module-games {
    border-left: 4px solid var(--bs-secondary);
}
*/

/* Ensure submodule borders are visible in light mode - REMOVED for clean hover effect */
/*
html[data-bs-theme="light"] .submodule-asset {
    border-left: 6px solid var(--bs-primary) !important;
}

html[data-bs-theme="light"] .submodule-cia {
    border-left: 6px solid var(--bs-warning) !important;
}

html[data-bs-theme="light"] .submodule-risk {
    border-left: 6px solid var(--bs-danger) !important;
}

html[data-bs-theme="light"] .submodule-nis2 {
    border-left: 6px solid var(--bs-info) !important;
}

html[data-bs-theme="light"] .submodule-supplier {
    border-left: 6px solid var(--bs-success) !important;
}

html[data-bs-theme="light"] .submodule-games {
    border-left: 6px solid var(--bs-secondary) !important;
}
*/

/* Dark theme specific styles */
html[data-bs-theme="dark"] .theme-icon-light {
    opacity: 0.5;
}

html[data-bs-theme="dark"] .theme-icon-dark {
    opacity: 1;
}


/* Fix for all the purple badges and elements in the CIA assessments in dark mode */
html[data-bs-theme="dark"] .badge-high,
html[data-bs-theme="dark"] .badge-medium,
html[data-bs-theme="dark"] .badge-public,
html[data-bs-theme="dark"] span.badge.bg-high,
html[data-bs-theme="dark"] span.badge.bg-medium, 
html[data-bs-theme="dark"] span.badge.bg-public,
html[data-bs-theme="dark"] div.badge.bg-high,
html[data-bs-theme="dark"] div.badge.bg-medium,
html[data-bs-theme="dark"] div.badge.bg-public,
html[data-bs-theme="dark"] .current-phase,
html[data-bs-theme="dark"] [class*="current-phase"],
html[data-bs-theme="dark"] [class*="badge-rating"],
html[data-bs-theme="dark"] [class*="rating-badge"] {
    background-color: #6ea8fe !important;
    border-color: #6ea8fe !important;
    color: white !important;
}

/* Fix for phase headers in dark mode */
html[data-bs-theme="dark"] .card-header.bg-purple,
html[data-bs-theme="dark"] h4.fw-bold.mb-3.text-purple,
html[data-bs-theme="dark"] h4.border-bottom.pb-2.mb-3,
html[data-bs-theme="dark"] h4.border-bottom.pb-2.mb-3.d-flex,
html[data-bs-theme="dark"] div.rounded-3.p-3.mb-3.bg-purple,
html[data-bs-theme="dark"] div[class*="bg-purple"],
html[data-bs-theme="dark"] .current-phase-text,
html[data-bs-theme="dark"] .badge span.current-phase-text,
html[data-bs-theme="dark"] div.badge .current-phase-text {
    background-color: #6ea8fe !important;
    color: white !important;
    border-color: #6ea8fe !important;
}

/* Ensure text is visible in all modes */
html[data-bs-theme="dark"] .card-body .fw-bold,
html[data-bs-theme="dark"] .card-body h6 {
    color: #fff !important;
}

/* Animation for theme switching */
.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Fix for text alignment in different themes */
.nav-table td:last-child {
    display: block;
    width: 100%;
    text-align: left;
    padding-left: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vulnerability Assurance: preserve white for decisions and headings, while
   keeping explanatory and reference information visually secondary.  The
   application-wide dark-mode compatibility rules make `.text-muted` white,
   so this scoped reset is intentional. */
html[data-bs-theme="dark"] .container.va-page .text-muted,
html[data-bs-theme="dark"] .container.va-page .small,
html[data-bs-theme="dark"] .container.va-page .form-label,
html[data-bs-theme="dark"] .container.va-page .form-text,
html[data-bs-theme="dark"] .container.va-page .table thead th,
html[data-bs-theme="dark"] .container.va-page .table tbody td:not(:first-child),
html[data-bs-theme="dark"] .container.va-page .va-supporting-copy {
    color: var(--amara-muted-text) !important;
}

html[data-bs-theme="dark"] .container.va-page .small strong,
html[data-bs-theme="dark"] .container.va-page .card-header,
html[data-bs-theme="dark"] .container.va-page h2,
html[data-bs-theme="dark"] .container.va-page h4,
html[data-bs-theme="dark"] .container.va-page h5,
html[data-bs-theme="dark"] .container.va-page .h3,
html[data-bs-theme="dark"] .container.va-page .display-6 {
    color: var(--bs-body-color) !important;
}

/* VA intake hierarchy: the explanatory copy stays secondary. Only the tenant
   identifier is foreground text, so it is easy to spot without turning the
   full introduction into a competing heading. */
.container.va-page .va-basket-intro,
.container.va-page .va-basket-intro .va-basket-intro-lead,
.container.va-page .va-basket-intro .small {
    color: var(--amara-muted-text) !important;
}

.container.va-page .va-basket-intro .va-basket-tenant-label {
    color: var(--bs-body-color) !important;
}

/* In the Tasks table, the action is primary; the recorded software is context. */
.container.va-page .va-case-software-name {
    color: var(--amara-muted-text) !important;
}

/* High and critical task urgency require an immediate visual cue. Lower
   priorities remain neutral so red retains its operational meaning. */
.container.va-page .va-case-urgency--alert {
    color: var(--bs-danger) !important;
}

html[data-bs-theme="dark"] .container.va-page .va-case-urgency--alert {
    color: #f5c2c7 !important;
}

/* The campaign title follows the same P1/P2 signal. This more specific rule
   intentionally wins over the shared VA heading colour above. */
.container.va-page h2.va-case-urgency--alert {
    color: var(--bs-danger) !important;
}

html[data-bs-theme="dark"] .container.va-page h2.va-case-urgency--alert {
    color: #f5c2c7 !important;
}

/* Priority is part of the campaign title, not a secondary metadata badge. */
.container.va-page .va-case-title-priority {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

.container.va-page .va-case-title-priority.va-case-urgency--alert {
    color: var(--bs-danger) !important;
}

html[data-bs-theme="dark"] .container.va-page .va-case-title-priority.va-case-urgency--alert {
    color: #f5c2c7 !important;
}

/* Server names in a confirmed campaign are affected instances, not neutral
   supporting metadata. */
.container.va-page .va-case-affected-servers {
    color: var(--bs-danger) !important;
}

html[data-bs-theme="dark"] .container.va-page .va-case-affected-servers {
    color: #f5c2c7 !important;
}

/* VA guidance: promote one current task and keep specialist branches available
   without placing every form in the operator's first view. */
.container.va-page .va-work-queue {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
}

.container.va-page .va-next-action {
    border-color: rgba(var(--bs-primary-rgb), 0.62) !important;
}

.container.va-page .va-next-action .card-header,
.container.va-page .va-work-queue .card-header {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

/* The dashboard queue is a compact disclosure: its count is useful at a
   glance, while the operational rows stay available without dominating the
   landing page. */
.container.va-page .va-work-queue > summary {
    cursor: pointer;
    list-style: none;
}

.container.va-page .va-work-queue > summary::-webkit-details-marker {
    display: none;
}

.container.va-page details[open].va-work-queue .va-panel-chevron {
    transform: rotate(180deg);
}

/* Guided task groups stay expanded on first visit, while their right-aligned
   chevron makes the optional collapse control explicit. */
.container.va-page .va-work-group > summary {
    cursor: pointer;
    list-style: none;
}

.container.va-page .va-work-group > summary::-webkit-details-marker {
    display: none;
}

.container.va-page details[open].va-work-group .va-panel-chevron {
    transform: rotate(180deg);
}

/* Dashboard totals are context, not a gallery of KPI cards. Pair the value
   directly with its label so it reads as one compact operational summary. */
.container.va-page .va-summary-metrics .card-body {
    padding-inline: 0.75rem;
}

.container.va-page .va-summary-stat {
    min-height: 3.25rem;
    padding: 0.5rem 0.75rem;
}

.container.va-page .va-summary-stat-icon {
    color: var(--amara-muted-text) !important;
}

.container.va-page .va-summary-stat-value {
    color: var(--bs-body-color);
}

/* Dashboard counts and their labels are routine status copy, not headings.
   Keep the two summary cards and the attention-queue metadata on one explicit
   AMARA text treatment rather than relying on competing legacy rules. */
.container.va-page :is(
    .va-summary-stat-value,
    .va-summary-stat-label,
    .va-work-queue-meta
) {
    font-size: var(--font-sm) !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

.container.va-page :is(
    .va-summary-stat-label,
    .va-work-queue-meta
) {
    color: var(--amara-muted-text) !important;
}

@media (min-width: 992px) {
    .container.va-page .va-summary-stat {
        border-inline-end: 1px solid var(--bs-border-color);
    }

    .container.va-page .va-summary-metrics .row > :nth-child(3n) .va-summary-stat {
        border-inline-end: 0;
    }

    .container.va-page .va-summary-metrics .row > :nth-child(n + 4) .va-summary-stat {
        border-top: 1px solid var(--bs-border-color);
    }
}

@media (max-width: 991.98px) {
    .container.va-page .va-summary-metrics .row > :not(:last-child) .va-summary-stat {
        border-bottom: 1px solid var(--bs-border-color);
    }
}

/* Attention-queue rows use the same horizontal hover cue as AMARA tables.
   Do not add a module-specific vertical accent bar. */
.container.va-page .va-work-item:hover,
.container.va-page .va-work-item:focus {
    border-left-color: transparent;
}

html[data-bs-theme="dark"] .container.va-page .va-work-item:hover,
html[data-bs-theme="dark"] .container.va-page .va-work-item:focus {
    background-color: transparent;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15);
}

.container.va-page .va-advanced-panel,
.container.va-page .va-more-actions {
    color: inherit;
}

.container.va-page .va-advanced-panel > summary,
.container.va-page .va-more-actions > summary {
    cursor: pointer;
    list-style: none;
}

.container.va-page .va-advanced-panel > summary {
    color: var(--amara-muted-text) !important;
}

html[data-bs-theme="dark"] .container.va-page .va-advanced-panel > summary.card-header {
    color: var(--amara-muted-text) !important;
}

html[data-bs-theme="dark"] .container.va-page .va-advanced-panel > summary.card-header > span {
    color: var(--amara-muted-text) !important;
}

/* Technical status is a dashboard section title, not supporting copy. Keep
   the title at the normal theme heading colour; only its status and chevron
   remain muted. */
.container.va-page .va-advanced-panel.va-dashboard-technical-status > summary.card-header > .va-dashboard-technical-title {
    color: var(--bs-body-color) !important;
    font-size: 14px !important;
}

/* Optional disclosures are supporting controls, not card titles. */
.container.va-page .va-advanced-panel > summary.va-card-title {
    font-size: var(--font-sm) !important;
    line-height: 1.35;
}

/* Case-linked Risk, Treatment and Jira references are routine supporting
   context, not a secondary title. */
.container.va-page .va-related-records > summary.card-header {
    font-size: 14px !important;
}

.container.va-page .va-advanced-panel > summary::-webkit-details-marker,
.container.va-page .va-more-actions > summary::-webkit-details-marker {
    display: none;
}

.container.va-page .va-advanced-panel > summary::before,
.container.va-page .va-more-actions > summary::before {
    content: '\f078';
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free';
    font-size: 0.75em;
    margin-right: var(--spacing-sm);
}

.container.va-page .va-advanced-panel > summary::before {
    content: none;
}

.container.va-page .va-panel-chevron {
    color: var(--amara-muted-text);
    font-size: 0.75rem;
    transition: transform 0.18s ease;
}

.container.va-page details[open].va-advanced-panel > summary .va-panel-chevron {
    transform: rotate(180deg);
}

/* Product-detail disclosure rows follow the same right-chevron rhythm as the
   app's card disclosures. The real Font Awesome element matches surrounding
   controls and reserves trailing space, so rows never shift when opened. */
.container.va-page summary.va-disclosure-summary {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--spacing-sm);
    text-align: start;
}

.container.va-page summary.va-disclosure-summary > .va-panel-chevron {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.container.va-page details[open].va-more-actions > summary::before {
    content: '\f077';
}

.container.va-page .va-more-actions > summary.card-header {
    display: block;
}

/* Guided VA disclosures keep optional paths out of the first view. */
.container.va-page .va-add-software-panel > summary,
.container.va-page .va-intake-method > summary,
.container.va-page .va-case-supporting-details > summary {
    cursor: pointer;
    list-style: none;
}

.container.va-page .va-add-software-panel > summary::-webkit-details-marker,
.container.va-page .va-intake-method > summary::-webkit-details-marker,
.container.va-page .va-case-supporting-details > summary::-webkit-details-marker {
    display: none;
}

.container.va-page .va-intake-method > summary {
    color: var(--bs-body-color);
    font-size: var(--font-sm);
}

.container.va-page .va-intake-method[open] > summary {
    background-color: rgba(var(--bs-primary-rgb), 0.055);
}

html[data-bs-theme] .container.va-page .va-intake-source-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px !important;
}

.container.va-page .va-software-list-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

.container.va-page .va-software-filter {
    flex: 0 1 24rem;
    max-width: 100%;
}

.container.va-page .va-software-filter .form-control,
.container.va-page .va-software-filter .input-group-text {
    font-size: var(--font-sm);
}

.container.va-page details[open].va-add-software-panel > summary .va-panel-chevron,
.container.va-page details[open].va-intake-method > summary .va-panel-chevron,
.container.va-page details[open].va-case-supporting-details > summary .va-panel-chevron {
    transform: rotate(180deg);
}

/* Every collapsible evidence subsection uses the same visible chevron and
   rotation as its parent panel. */
.container.va-page .va-case-supporting-details details[open] > summary .va-panel-chevron {
    transform: rotate(180deg);
}

/* Notices are a human change inbox, not a transport-status table. Keep the
   two available actions visually equal and let them stack cleanly on phones. */
.container.va-page .va-notice-titleline {
    column-gap: 0.5rem !important;
    row-gap: 0.125rem !important;
}

html[data-bs-theme] .container.va-page .va-notice-group h4 {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.container.va-page .va-notice-priority {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
}

/* Priority is the alert signal—not the whole finding row or its due date. */
.container.va-page .va-notice-priority--alert {
    color: var(--bs-danger) !important;
}

html[data-bs-theme="dark"] .container.va-page .va-notice-priority--alert {
    color: #f5c2c7 !important;
}

.container.va-page .va-notice-body {
    max-width: 68ch;
}

.container.va-page .va-notice-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);
    width: min(12rem, 100%);
}

.container.va-page .va-notice-actions > .btn,
.container.va-page .va-notice-actions > form,
.container.va-page .va-notice-actions > form > .btn {
    width: 100%;
}

.container.va-page .va-notice-actions--single {
    width: min(12rem, 100%);
}

.container.va-page .va-notice-details {
    max-width: 32rem;
}

.container.va-page .va-dashboard-nav-actions {
    width: 100%;
}

@media (min-width: 992px) {
    .container.va-page .va-dashboard-nav-actions {
        width: auto;
    }
}

@media (max-width: 575.98px) {
    .container.va-page .va-dashboard-nav-actions .btn,
    .container.va-page .va-candidate-review td:last-child .btn,
    .container.va-page .va-add-software-panel .btn {
        width: 100%;
    }

    .container.va-page .va-notice-actions {
        grid-template-columns: 1fr;
        width: 100%;
    }

    /* Keep the dashboard's technical-status label readable on phones while
       preserving the status + real chevron as one aligned disclosure cue. */
    .container.va-page .va-dashboard-technical-status > summary {
        flex-wrap: wrap;
    }

    .container.va-page .va-dashboard-technical-title,
    .container.va-page .va-dashboard-technical-meta {
        flex-basis: 100%;
        min-width: 0;
    }

    .container.va-page .va-dashboard-technical-meta {
        justify-content: space-between;
    }
}


/* Info icon circle style — dark mode default */
.info-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: #495057;
    border-radius: 50%;
    border: 1px solid #6c757d;
}

.info-icon-circle i {
    font-size: 10px;
    color: #e9ecef;
}

/* Light mode: visible circle against white cards */
html[data-bs-theme="light"] .info-icon-circle {
    background-color: #e9ecef;
    border-color: #ced4da;
}

html[data-bs-theme="light"] .info-icon-circle i {
    color: #6c757d;
}

/* Custom tooltip styles - theme-aware defaults */
.tooltip {
    z-index: 1080;
    pointer-events: none;
}

.tooltip.show {
    opacity: 1 !important;
}

/* Light mode tooltip styling */
html[data-bs-theme="light"] .tooltip {
    --bs-tooltip-bg: rgba(52, 58, 64, 0.95); /* Darker background for light mode */
    --bs-tooltip-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Style for the tooltip arrow in light mode */
html[data-bs-theme="light"] .tooltip .tooltip-arrow::before {
    border-top-color: rgba(52, 58, 64, 0.95);
    border-bottom-color: rgba(52, 58, 64, 0.95);
    border-left-color: rgba(52, 58, 64, 0.95);
    border-right-color: rgba(52, 58, 64, 0.95);
}

/* Dark mode tooltip styling */
html[data-bs-theme="dark"] .tooltip {
    --bs-tooltip-bg: rgba(66, 70, 74, 0.98);
    --bs-tooltip-color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Style for the tooltip arrow in dark mode */
html[data-bs-theme="dark"] .tooltip .tooltip-arrow::before {
    border-top-color: rgba(66, 70, 74, 0.98);
    border-bottom-color: rgba(66, 70, 74, 0.98);
    border-left-color: rgba(66, 70, 74, 0.98);
    border-right-color: rgba(66, 70, 74, 0.98);
}

/* Custom tooltip content style */
.tooltip-inner {
    max-width: 250px;
    padding: 8px 12px;
    text-align: left;
    font-size: 0.875rem;
}

/* Collapsed navigation labels: compact, native-style hover help. */
.tooltip.sidebar-nav-tooltip {
    border: 0 !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
}

.tooltip.sidebar-nav-tooltip .tooltip-arrow {
    display: none !important;
}

.tooltip.sidebar-nav-tooltip .tooltip-inner {
    max-width: 220px;
    padding: 4px 8px;
    background: #212529 !important;
    color: #c0c8d0 !important;
    border: 1px solid #6c757d;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: 0.875rem !important;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
}

html[data-bs-theme="light"] .tooltip.sidebar-nav-tooltip .tooltip-inner {
    background: #ffffff !important;
    color: #343a40 !important;
    border-color: #adb5bd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Easter egg element styling */
.egg-link {
    position: absolute;
    cursor: pointer;
}

.egg-link:hover {
    /* Keep invisible even on hover */
    opacity: 0 !important;
}

/* Easter egg content styling */
.easter-egg-content {
    display: block !important;
    visibility: visible !important;
    border: 2px solid #343a40;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Improved form control visibility in dark mode */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] input {
    background-color: #2c3034;
    color: #f8f9fa;
    border-color: #495057;
}

/* Improve dropdown visibility in dark mode */
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f8f9fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-color: #2c3034 !important;
    color: #f8f9fa !important;
    border: 1px solid #495057 !important;
}

/* Enhanced dropdown arrow and highlighting */
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] select:focus {
    border-color: #6ea8fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5) !important;
    outline: none;
}

/* Dropdown caret visibility in dark mode */
html[data-bs-theme="dark"] .dropdown-toggle::after {
    border-top-color: #f8f9fa !important;
}

/* Supplier Detail: reserve white for compact labels, not every field/value. */
html[data-bs-theme="dark"] .supplier-detail-page .card-body .fw-bold,
html[data-bs-theme="dark"] .supplier-detail-page .card-body h6 {
    color: var(--bs-body-color) !important;
    font-size: var(--font-sm) !important;
    font-weight: 500 !important;
}

html[data-bs-theme="dark"] .supplier-detail-page .supplier-info-value,
html[data-bs-theme="dark"] .supplier-detail-page .card-body > .row.mb-3 > .col-md-8,
html[data-bs-theme="dark"] .supplier-detail-page .card-body > p:not(.text-muted) {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
    font-weight: 400 !important;
}

html[data-bs-theme="dark"] .supplier-detail-page .supplier-approval-progress-card .list-group-item > span:first-child {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
    font-weight: 400;
}

/* Supplier Detail: information panels are expandable, but never hidden by default. */
.supplier-detail-page .supplier-card-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.supplier-detail-page .supplier-card-title {
    font-size: 1.05rem;
    font-weight: 500;
}

.supplier-detail-page .supplier-card-chevron {
    color: var(--amara-muted-text);
    font-size: var(--font-sm);
    transition: transform 0.18s ease;
}

.supplier-detail-page .supplier-card-toggle.collapsed .supplier-card-chevron {
    transform: rotate(-90deg);
}

.supplier-detail-page .supplier-card-toggle:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--bs-primary);
    outline-offset: 3px;
}

/* Top navigation uses the same muted 14px reading treatment as routine UI copy. */
html[data-bs-theme="dark"] .language-toggle .lang-option,
html[data-bs-theme="dark"] #navbarDropdown,
html[data-bs-theme="dark"] #navbarDropdown::after {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
    font-weight: 400;
}

html[data-bs-theme="dark"] #navbarDropdown::after {
    border-top-color: var(--amara-muted-text) !important;
}

/* Pagination styling - match button style (grey → blue hover, no fill) */
.pagination .page-item .page-link {
    background-color: transparent !important;
    border-color: #96a0aa !important;
    color: #96a0aa !important;
    transition: all 0.2s ease;
}

.pagination .page-item .page-link:hover {
    background-color: transparent !important;
    border-color: #6ea8fe !important;
    color: #6ea8fe !important;
}

.pagination .page-item.active .page-link {
    background-color: transparent !important;
    border-color: #6ea8fe !important;
    color: #6ea8fe !important;
    font-weight: 600;
}

.pagination .page-item.disabled .page-link {
    background-color: transparent !important;
    border-color: #96a0aa !important;
    color: #96a0aa !important;
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Pagination styling - dark mode - match breadcrumb blue (#6ea8fe) */
html[data-bs-theme="dark"] .pagination .page-item .page-link {
    background-color: transparent !important;
    border-color: #96a0aa !important;
    color: #96a0aa !important;
    transition: all 0.2s ease;
}

html[data-bs-theme="dark"] .pagination .page-item .page-link:hover {
    background-color: transparent !important;
    border-color: #6ea8fe !important;
    color: #6ea8fe !important;
}

html[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: transparent !important;
    border-color: #6ea8fe !important;
    color: #6ea8fe !important;
    font-weight: 600;
}

html[data-bs-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: transparent !important;
    border-color: #96a0aa !important;
    color: #96a0aa !important;
    opacity: 0.5;
}

/* Improve option visibility in dropdowns for dark mode */
html[data-bs-theme="dark"] select option,
html[data-bs-theme="dark"] .form-select option {
    background-color: #2c3034 !important;
    color: #f8f9fa !important;
}

/* Improve dropdown menu styling */
html[data-bs-theme="dark"] .dropdown-menu {
    background-color: #2c3034 !important;
    border-color: #495057 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

html[data-bs-theme="dark"] .dropdown-item {
    color: #f8f9fa !important;
}

html[data-bs-theme="dark"] .dropdown-item.text-danger {
    color: var(--bs-danger) !important;
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .dropdown-item.text-danger:hover,
html[data-bs-theme="dark"] .dropdown-item.text-danger:focus {
    color: #ff6b7a !important;
}

/* Ensure dropdown button styling is consistent */
html[data-bs-theme="dark"] .btn-outline-secondary.dropdown-toggle {
    color: #f8f9fa !important;
    border-color: #6c757d !important;
}

html[data-bs-theme="dark"] .btn-outline-secondary.dropdown-toggle:hover {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

/* Print-specific styles */
/* Page break styling removed */

/* ========================================
   ORGANIZED BOOTSTRAP OVERRIDES
   Moving scattered overrides here for maintainability
   ======================================== */

/* === BUTTONS === */
/* Standardized button system with consistent spacing and effects */

/*
 * Header/action clusters: adjacent outlined controls must read as separate
 * targets, never as one accidental compound box. This covers the common
 * Bootstrap page-header shape without changing deliberate .btn-group controls
 * (which intentionally share borders).
 */
.d-flex.justify-content-between.align-items-center > div:last-child:has(> .btn, > .dropdown) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.d-flex.justify-content-between.align-items-center > div:last-child:has(> .btn, > .dropdown) > .btn.me-2 {
    margin-right: 0 !important;
}

@media (max-width: 575.98px) {
    .d-flex.justify-content-between.align-items-center > div:last-child:has(> .btn, > .dropdown) {
        justify-content: flex-start;
    }
}

/* Base button styles */
.btn {
    padding: 0.375rem var(--spacing-md); /* Reduced height by 25% (was 0.5rem) */
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    border-width: 1px !important;
}

/* Primary button - solid blue for main actions */
.btn-primary {
    background-color: #6ea8fe !important;
    border-color: #6ea8fe !important;
    color: white !important;
    border-width: 1px !important;
}

.btn-primary:hover {
    background-color: #0a58ca !important;
    border-color: #0a58ca !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.btn-primary:focus,
.btn-primary:active {
    background-color: #0848a8 !important;
    border-color: #0848a8 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Outline buttons - consistent hover behavior */
[class*="btn-outline-"] {
    border-width: 1px !important;
    font-weight: 500;
}

[class*="btn-outline-"]:hover {
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.15);
}

/* Module-specific outline buttons with better hover states */
.btn-outline-primary:hover {
    background-color: #6ea8fe !important;
    border-color: #6ea8fe !important;
    color: white !important;
}

.btn-outline-success:hover {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: white !important;
}

.btn-outline-danger:hover {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

.btn-outline-warning:hover {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000 !important;
}

.btn-outline-info:hover {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #000 !important;
}

.btn-outline-secondary:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

/* Small buttons */
.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Large buttons */
.btn-lg {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-lg);
}

/* Dark mode button enhancements */
[data-bs-theme="dark"] .btn-outline-primary {
    color: #6ea8fe !important;
    border-color: #6ea8fe !important;
}

[data-bs-theme="dark"] .btn-outline-success {
    color: #75b798 !important;
    border-color: #75b798 !important;
}

[data-bs-theme="dark"] .btn-outline-danger {
    color: #ea868f !important;
    border-color: #ea868f !important;
}

[data-bs-theme="dark"] .btn-outline-warning {
    color: #ffda6a !important;
    border-color: #ffda6a !important;
}

[data-bs-theme="dark"] .btn-outline-info {
    color: #6edff6 !important;
    border-color: #6edff6 !important;
}

/* Light mode button overrides — #6ea8fe is too pale on white (2.4:1 contrast) */
/* Use standard Bootstrap blue #0d6efd for WCAG AA compliance (5.6:1) */
[data-bs-theme="light"] .btn-outline-primary {
    color: #0d6efd !important;
    border-color: #0d6efd !important;
}

[data-bs-theme="light"] .btn-outline-primary:hover {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

[data-bs-theme="light"] .btn-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

[data-bs-theme="light"] .btn-primary:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: #fff !important;
}

/* === DESTRUCTIVE ACTION BUTTON (amara style) === */
/* Add .btn-delete alongside .btn-outline-primary — only overrides hover/focus
   to the same amara alert red used by affected software and attention tasks. */
.btn-outline-primary.btn-delete {
    border-width: 1px !important;
}
.btn-outline-primary.btn-delete:hover,
.btn-outline-primary.btn-delete:focus-visible {
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    background-color: transparent !important;
}
/* Light mode: red fill + white text (matches light outline-primary hover pattern) */
[data-bs-theme="light"] .btn-outline-primary.btn-delete:hover,
[data-bs-theme="light"] .btn-outline-primary.btn-delete:focus-visible {
    color: #fff !important;
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

/* Dark mode uses the same readable alert red as tasks needing attention and
   confirmed affected software. */
html[data-bs-theme="dark"] .btn-outline-primary.btn-delete:hover,
html[data-bs-theme="dark"] .btn-outline-primary.btn-delete:focus-visible {
    color: #f5c2c7 !important;
    border-color: #f5c2c7 !important;
    background-color: transparent !important;
}

/* === CARDS === */
/* Consistent card styling with subtle shadows */
.card {
    border: 1px solid var(--bs-card-border-color);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

/* Admin panel hover effect for ALL cards - without movement */
/* HOVER EFFECTS DISABLED
.card:hover {
    border-color: #6ea8fe !important;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2) !important;
}
*/

/* Enhanced hover effect for DARK mode first */
/* HOVER EFFECTS DISABLED
[data-bs-theme="dark"] .card:hover {
    border-color: #6ea8fe !important;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4) !important;
    border-width: 1px !important;
}
*/

/* Stronger hover effect for light mode */
/* HOVER EFFECTS DISABLED
[data-bs-theme="light"] .card:hover,
html:not([data-bs-theme="dark"]) .card:hover {
    border-color: #6ea8fe !important;
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.3) !important;
    border-width: 1px !important;
}
*/

/* OVERRIDE all inline border-left styles on cards - match Bootstrap's default card border */
.card[style*="border-left"] {
    border-left: 1px solid var(--bs-card-border-color) !important;
}

/* Ensure ALL sides have consistent borders */
.card {
    border: 1px solid var(--bs-card-border-color) !important;
}

/* Module card hover effect (from admin panel) - apply globally */
.module-card {
    border: 1px solid #e9ecef;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

/* HOVER EFFECTS DISABLED
.module-card:hover {
    border-color: #6ea8fe;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
}
*/

[data-bs-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.125);
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .module-card {
    border-color: #495057;
}

/* HOVER EFFECTS DISABLED
[data-bs-theme="dark"] .module-card:hover {
    border-color: #6ea8fe;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}
*/

/* === TABLES === */
/* Standardized table styling */
.table {
    margin-bottom: 0;
}

.table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    letter-spacing: 0.5px;
}

/* === BADGES === */
/* Badge standardization - maintaining our plain text approach */
.badge {
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: var(--transition-fast);
}

/* === FORM CONTROLS === */
/* Consistent form styling */
.form-control,
.form-select {
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(13, 110, 253, 1);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* === NAVIGATION === */
/* Nav tabs consistency */
.nav-tabs .nav-link {
    transition: var(--transition-base);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
}

/* === MODALS === */
/* Modal refinements */
.modal-content {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* === ALERTS === */
/* Consistent alert styling */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}

/* ========================================
   MODULE-SPECIFIC PATTERNS
   Consistent patterns for module identification
   ======================================== */

/* Module header cards - removed special styling per user request */
/* They now use standard card styling */

/* Stats cards within modules */
.stats-card {
    text-align: center;
    padding: var(--spacing-md);
    transition: var(--transition-base);
}

.stats-card h3 {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.stats-card p {
    color: var(--bs-secondary);
    margin-bottom: 0;
}

/* Module sidebar items */
.module-sidebar-item {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.module-sidebar-item:hover {
    transform: translateX(4px);
}

/* ========================================
   LIGHT MODE FORM & TABLE FIXES
   ======================================== */

/* Form input text contrast fix for light mode */
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] input.form-control,
html[data-bs-theme="light"] textarea.form-control {
    color: #495057 !important;
}

html[data-bs-theme="light"] ::placeholder {
    color: #6c757d !important;
}

/* Light mode table striping */
html[data-bs-theme="light"] table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* Light mode table text — ensure readable on white bg */
html[data-bs-theme="light"] .table td,
html[data-bs-theme="light"] .table th {
    color: #212529;
}

/* Radio button & checkbox styling — light mode checked state fix */
html[data-bs-theme="light"] .form-check-input[type="radio"],
html[data-bs-theme="light"] .form-check-input[type="checkbox"] {
    background-color: #fff;
    border-color: #dee2e6;
}

html[data-bs-theme="light"] .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

html[data-bs-theme="light"] .form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ========================================
   DARK MODE OVERRIDES
   Centralized dark mode adjustments
   ======================================== */

[data-bs-theme="dark"] {
    /* Background adjustments */
    --bs-body-bg: #0f172a;
    --bs-secondary-bg: #1e293b;
    
    /* Text color adjustments */
    --bs-body-color: #f1f5f9;
    --bs-secondary-color: #94a3b8;
    
    /* Border adjustments */
    --bs-border-color: #334155;
}

/* ========================================
   UTILITY OVERRIDES
   Common utility class adjustments
   ======================================== */

/* Footer legal text - standard AMARA grey */
footer .text-secondary {
    color: #96a0aa !important;
}

/* Spacing utilities using our variables */
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }

.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Border radius utilities */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }

/* App-wide rendered single selects. A native OS option popup is not a
   controllable AMARA surface, so the real select remains the form value while
   this Bootstrap menu owns interaction. Multi-selects intentionally remain
   native list boxes. */
.amara-select {
    position: relative;
}

select.amara-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.amara-select .dropdown-menu {
    max-height: 18rem;
    overflow-y: auto;
    margin-top: 0.25rem;
}

/* A select's current value is routine form text, not a button headline. */
.amara-select .dropdown-toggle,
.amara-select .dropdown-item {
    font-size: var(--font-sm) !important;
    font-weight: 400 !important;
    line-height: 1.5;
}

.amara-select .dropdown-toggle {
    color: var(--amara-muted-text) !important;
}

/* The generic dark-theme outline-button rule is intentionally bright for
   actions. A select's closed value remains supporting form text. */
html[data-bs-theme="dark"] .amara-filter-dropdown .btn-outline-secondary.dropdown-toggle,
html[data-bs-theme="dark"] .amara-select .btn-outline-secondary.dropdown-toggle {
    color: var(--amara-muted-text) !important;
}

html[data-bs-theme="dark"] .amara-filter-dropdown .dropdown-toggle::after,
html[data-bs-theme="dark"] .amara-select .dropdown-toggle::after {
    border-top-color: var(--amara-muted-text) !important;
}

.amara-select .dropdown-item.active,
.amara-select .dropdown-item.active:hover,
.amara-select .dropdown-item.active:focus {
    color: var(--bs-body-color) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

.amara-select .dropdown-item.active::after {
    content: '✓';
    float: right;
    color: var(--amara-muted-text);
}

/* Bootstrap and the dark-theme compatibility rules paint a dropdown's
   current-value trigger grey while its menu is open. Keep AMARA form controls
   visually stable through hover, focus and open states. This rule belongs
   after those compatibility rules so the served cascade is deterministic. */
html[data-bs-theme="dark"] .amara-filter-dropdown .btn-outline-secondary.dropdown-toggle:hover,
html[data-bs-theme="dark"] .amara-filter-dropdown .btn-outline-secondary.dropdown-toggle:focus,
html[data-bs-theme="dark"] .amara-filter-dropdown .btn-outline-secondary.dropdown-toggle:active,
html[data-bs-theme="dark"] .amara-filter-dropdown .btn-outline-secondary.dropdown-toggle.show,
html[data-bs-theme="dark"] .amara-filter-dropdown .show > .btn-outline-secondary.dropdown-toggle,
html[data-bs-theme="dark"] .va-filter-dropdown .btn-outline-secondary.dropdown-toggle:hover,
html[data-bs-theme="dark"] .va-filter-dropdown .btn-outline-secondary.dropdown-toggle:focus,
html[data-bs-theme="dark"] .va-filter-dropdown .btn-outline-secondary.dropdown-toggle:active,
html[data-bs-theme="dark"] .va-filter-dropdown .btn-outline-secondary.dropdown-toggle.show,
html[data-bs-theme="dark"] .va-filter-dropdown .show > .btn-outline-secondary.dropdown-toggle,
html[data-bs-theme="dark"] .amara-select .btn-outline-secondary.dropdown-toggle:hover,
html[data-bs-theme="dark"] .amara-select .btn-outline-secondary.dropdown-toggle:focus,
html[data-bs-theme="dark"] .amara-select .btn-outline-secondary.dropdown-toggle:active,
html[data-bs-theme="dark"] .amara-select .btn-outline-secondary.dropdown-toggle.show,
html[data-bs-theme="dark"] .amara-select .show > .btn-outline-secondary.dropdown-toggle {
    color: var(--amara-muted-text) !important;
    background-color: transparent !important;
    border-color: var(--bs-secondary) !important;
    box-shadow: none !important;
}

/* Keep every select-like AMARA control stable in both themes. Some legacy VA
   filters are server-rendered rather than enhanced from a native <select>;
   they must use the same open/focus treatment as the shared app control. */
:is(.amara-select, .amara-filter-dropdown, .va-filter-dropdown)
    .btn-outline-secondary.dropdown-toggle:is(:hover, :focus, :active, .show),
:is(.amara-select, .amara-filter-dropdown, .va-filter-dropdown).show
    > .btn-outline-secondary.dropdown-toggle {
    color: var(--amara-muted-text) !important;
    background-color: transparent !important;
    border-color: var(--bs-secondary) !important;
    box-shadow: none !important;
}

.amara-select-group {
    padding: 0.4rem 1rem 0.2rem;
    color: var(--amara-muted-text);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Security Scanning dashboard hierarchy.
   The scan task is the primary surface; summary and evidence stay compact. */
.scanner-page,
.scanner-page .form-label,
.scanner-page .form-text,
.scanner-page .btn,
.scanner-page .badge,
.scanner-page .table {
    font-size: var(--font-sm) !important;
}

.scanner-card-title,
.scanner-step-label {
    color: var(--bs-body-color);
    font-size: var(--font-sm) !important;
    font-weight: 500;
    line-height: 1.5;
}

/* Scanner card headers use the shared application card-header hierarchy;
   scanner body labels remain on the compact 14px operational reading tier. */
.scanner-page .card-header .scanner-card-title {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    line-height: 1.2;
}

.scanner-primary-card {
    border-left: 2px solid var(--bs-primary);
}

.scanner-supporting-copy,
.scanner-page .form-text,
.scanner-page .form-text span,
.scanner-status-label,
.scanner-severity-count {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
    font-weight: 400;
}

.scanner-form-grid .form-label {
    color: var(--bs-body-color);
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.scanner-control-width {
    max-width: 100%;
    min-width: 22rem;
    width: 33.333333%;
}

.scanner-control-width .dropdown-toggle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scanner-control-width .dropdown-menu {
    max-width: 100%;
}

.scanner-control-width .dropdown-item {
    overflow-wrap: anywhere;
    white-space: normal;
}

.scanner-start-row {
    align-items: flex-start;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    padding-top: 1rem;
}

.scanner-legal-disclosure {
    color: var(--amara-muted-text);
    flex: 1 1 auto;
    font-size: var(--font-sm);
    max-width: 48rem;
}

.scanner-legal-disclosure summary {
    color: var(--amara-muted-text) !important;
    cursor: pointer;
    font-weight: 400;
}

/* Keep this binary context question compact without changing every CIA
   rating field. The mobile form still uses the full available width. */
.cia-environment-field .amara-select {
    width: 50%;
}

@media (max-width: 767.98px) {
    .cia-environment-field .amara-select {
        width: 100%;
    }
}

.scanner-start-action {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.4rem;
}

.scanner-status-card .card-body {
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
}

.scanner-status-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scanner-status-item {
    align-items: baseline;
    display: flex;
    gap: 0.5rem;
    min-width: 0;
    padding: 0 1rem;
}

.scanner-status-item:first-child {
    padding-left: 0;
}

.scanner-status-item + .scanner-status-item {
    border-left: 1px solid var(--bs-border-color);
}

.scanner-status-value {
    color: var(--bs-body-color);
    font-size: var(--font-sm);
    font-weight: 500;
}

.scanner-empty-findings .card-body {
    min-height: 5rem;
}

.scanner-empty-icon {
    color: #0d9488;
    font-size: var(--font-md);
}

.scanner-severity-table {
    border-collapse: separate;
    border-spacing: 0 0.5rem;
    font-size: var(--font-sm);
    width: 100%;
}

.scanner-severity-name {
    font-weight: 500;
    width: 25%;
}

.scanner-severity-track {
    background: rgba(150, 160, 170, 0.15);
    border-radius: 999px;
    height: 0.45rem;
    overflow: hidden;
}

.scanner-severity-track span {
    display: block;
    height: 100%;
}

.scanner-severity-count {
    text-align: right;
    width: 15%;
}

.scanner-overview-list {
    font-size: var(--font-sm);
    list-style: none;
    padding: 0;
}

.scanner-overview-list li {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.3rem 0;
}

.scanner-cve-list li > span:first-child {
    font-family: monospace;
}

.scanner-muted-badge {
    background-color: var(--amara-muted-text);
}

.scanner-live-progress {
    border-left: 2px solid var(--bs-primary);
}

.scanner-live-progress-icon {
    color: var(--bs-primary);
    font-size: var(--font-md);
    margin-top: 0.15rem;
}

.scanner-live-progress-title {
    color: var(--bs-body-color);
    font-size: var(--font-sm);
    font-weight: 500;
}

.scanner-live-progress-copy,
.scanner-live-progress-note {
    color: var(--amara-muted-text);
    font-size: var(--font-sm);
}

.scanner-progress-track {
    background-color: rgba(150, 160, 170, 0.18);
    height: 0.35rem;
    max-width: 36rem;
}

.scanner-progress-bar {
    background-color: var(--bs-primary);
    transition: width 0.35s ease;
}

.scanner-raw-output > summary {
    cursor: pointer;
    list-style: none;
}

.scanner-raw-output > summary::-webkit-details-marker {
    display: none;
}

.scanner-raw-output-chevron {
    color: var(--amara-muted-text);
    font-size: var(--font-sm);
    transition: transform 0.15s ease;
}

.scanner-raw-output[open] .scanner-raw-output-chevron {
    transform: rotate(180deg);
}

/* Scan History is a compact evidence index. Every summary value uses the
   routine 14px app tier; only a positive actionable count receives the same
   alert colour as attention tasks and affected software. */
.scanner-history-summary,
.scanner-history-summary :is(span, a, button, i, .badge) {
    font-size: var(--font-sm) !important;
}

.scanner-history-scan-id,
.scanner-history-total,
.scanner-history-summary > .d-flex:last-child > span,
.scanner-history-summary > .d-flex:last-child > i {
    color: var(--amara-muted-text);
}

.scanner-history-target,
.scanner-history-actionable {
    color: var(--bs-body-color);
    font-weight: 500;
}

.scanner-history-actionable--alert {
    color: var(--bs-danger) !important;
}

html[data-bs-theme="dark"] .scanner-history-actionable--alert {
    color: #f5c2c7 !important;
}

/* Recent scans is an evidence index: Scan # and Type are the two scan-friendly
   anchors; operational context is quiet. A non-zero actionable total is the
   only red data point, while state remains semantic. */
html[data-bs-theme="dark"] .scanner-page .scanner-recent-table tbody td {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
    font-weight: 400;
}

html[data-bs-theme="dark"] .scanner-page .scanner-recent-table .scanner-recent-anchor {
    color: var(--bs-body-color) !important;
    font-size: var(--font-sm);
    font-weight: 500;
    text-decoration: none;
}

html[data-bs-theme="dark"] .scanner-page .scanner-recent-table .scanner-recent-actionable {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm);
    font-weight: 500;
}

html[data-bs-theme="dark"] .scanner-page .scanner-recent-table .scanner-recent-actionable--alert {
    color: #f5c2c7 !important;
}

html[data-bs-theme="dark"] .scanner-page .scanner-recent-table .scanner-recent-total {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm);
    font-weight: 400;
}

html[data-bs-theme="dark"] .scanner-page .scanner-recent-table .scanner-recent-status .bg-success,
html[data-bs-theme="dark"] .scanner-page .scanner-recent-table .scanner-recent-status .scanner-muted-badge {
    color: var(--amara-muted-text) !important;
}

html[data-bs-theme="dark"] .scanner-page .scanner-recent-table .scanner-recent-status .bg-primary {
    color: var(--bs-primary) !important;
}

html[data-bs-theme="dark"] .scanner-page .scanner-recent-table .scanner-recent-status .bg-danger {
    color: #f5c2c7 !important;
}

/* CIA Assessment hub: phase-support lines are ordinary reading text, not
   status labels. Keep them on the standard Amara-gray 14px regular tier. */
.cia-phase-support {
    color: var(--amara-muted-text) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
}

/* User-approved dark-mode hierarchy corrections — keep labels and genuine
   titles distinct while returning ordinary explanatory copy to Amara gray. */
html[data-bs-theme="dark"] .supplier-criticality-scale {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
    font-weight: 400 !important;
}

html[data-bs-theme="dark"] .supplier-criticality-scale strong {
    color: #f8f9fa !important;
    font-weight: 500 !important;
}

html[data-bs-theme="dark"] .supplier-criticality-scale .mb-2 {
    color: var(--amara-muted-text) !important;
}

html[data-bs-theme="dark"] .assessment-empty-state {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
    font-weight: 400 !important;
}

/* Routine table headings are navigation/data labels, not foreground titles. */
html[data-bs-theme="dark"] .table-header-sm,
html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .table thead th.table-header-sm {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
    font-weight: 500 !important;
}

html[data-bs-theme="dark"] .iso-soa-summary-stats .card-title.text-muted {
    color: var(--amara-muted-text) !important;
}

html[data-bs-theme="dark"] .iso-soa-summary-stats .card-title.text-success {
    color: var(--bs-success) !important;
}

html[data-bs-theme="dark"] .iso-soa-summary-stats .card-title.text-warning {
    color: var(--bs-warning) !important;
}

html[data-bs-theme="dark"] .iso-soa-summary-stats .card-title.text-secondary {
    color: var(--bs-secondary-color) !important;
}

/* "What to do next" is an action-card title, not supporting copy. */
.container.va-page .va-next-action > .card-header,
.container.va-page .va-next-action > .card-body > h5 {
    color: #f8f9fa !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
}

html[data-bs-theme="dark"] .activity-log-detail .breadcrumb,
html[data-bs-theme="dark"] .activity-log-detail .breadcrumb-item,
html[data-bs-theme="dark"] .activity-log-detail .breadcrumb-item.active,
html[data-bs-theme="dark"] .activity-log-detail .breadcrumb-item > a {
    color: var(--amara-muted-text) !important;
}

html[data-bs-theme="dark"] .activity-log-detail .table-borderless > tbody > tr > td:first-child,
html[data-bs-theme="dark"] .activity-log-detail .table-borderless > tbody > tr > td:first-child strong,
html[data-bs-theme="dark"] .activity-log-detail .card-body .row > [class*="col-"] > p:first-child,
html[data-bs-theme="dark"] .activity-log-detail .card-body .row > [class*="col-"] > p:first-child strong {
    color: #f8f9fa !important;
    font-weight: 500 !important;
}

html[data-bs-theme="dark"] .activity-log-detail .table-borderless > tbody > tr > td:not(:first-child),
html[data-bs-theme="dark"] .activity-log-detail .card-body .row > [class*="col-"] > p:not(:first-child) {
    color: var(--amara-muted-text) !important;
    font-size: var(--font-sm) !important;
    font-weight: 400 !important;
}

/* The sparse ISP reference panel follows the readable policy-content measure
   rather than forming a full-width band when it has no linked references. */
.isp-reference-panel-container #mcp-references-card {
    width: 100%;
    max-width: none;
}

/* ISP overview table-of-contents tiles are compact cards, but their section
   names remain genuine card titles rather than muted supporting copy. */
html[data-bs-theme="dark"] .isp-toc-card-title,
html[data-bs-theme="dark"] .isp-toc-card-title .isp-section-link {
    color: #f8f9fa !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    .scanner-control-width {
        min-width: 0;
        width: 100%;
    }

    .scanner-start-row {
        align-items: stretch;
        flex-direction: column;
    }

    .scanner-start-action {
        align-items: stretch;
    }

    .scanner-status-rail {
        grid-template-columns: 1fr;
    }

    .scanner-status-item {
        padding: 0.55rem 0;
    }

    .scanner-status-item + .scanner-status-item {
        border-left: 0;
        border-top: 1px solid var(--bs-border-color);
    }
}