/*
 * =============================================================================
 * SHIELDIQ APP — BRAND THEME OVERRIDE
 * File: shieldiq-theme.css
 * =============================================================================
 *
 * PURPOSE
 * -------
 * This file aligns the visual appearance of the Shield IQ web app
 * (app.shieldiqcyber.com) with the redesigned marketing website
 * (www.shieldiqcyber.com).
 *
 * The app is a single-page application built with:
 *   - Vanilla JS/HTML (index.html, ~16,000 lines)
 *   - Bootstrap 5 for layout and components
 *   - Google Fonts: Playfair Display, Montserrat, Outfit (to be replaced)
 *   - A Flask API backend (not relevant to styling)
 *
 * HOW TO USE THIS FILE
 * --------------------
 * Load this file AFTER Bootstrap in index.html:
 *
 *   <link rel="stylesheet" href="bootstrap.min.css">
 *   <link rel="stylesheet" href="shieldiq-theme.css">   ← add this line
 *
 * By loading after Bootstrap, these rules override Bootstrap's defaults
 * without modifying the Bootstrap source file itself.
 *
 * DESIGN SYSTEM — TARGET LOOK & FEEL
 * ------------------------------------
 * The marketing site uses a dark cybersecurity SaaS aesthetic:
 *
 *   Background (deepest):    #080f1a  — near-black navy
 *   Background (surface):    #0d1829  — slightly lighter navy (cards, panels)
 *   Background (subtle):     #0a1420  — mid-tone for alternating sections
 *   Accent (primary):        #00c896  — emerald green (buttons, links, highlights)
 *   Accent (secondary):      #0099ff  — blue (secondary actions, charts)
 *   Border:                  rgba(255,255,255,0.06)  — very subtle white border
 *   Text (primary):          #f1f5f9  — near-white
 *   Text (secondary):        #94a3b8  — slate-400 (labels, metadata)
 *   Text (muted):            #475569  — slate-600 (placeholders, disabled)
 *   Danger/Error:            #ef4444  — red
 *   Warning:                 #f59e0b  — amber
 *   Success:                 #00c896  — same as accent green
 *   Font:                    Inter (replaces Playfair Display / Montserrat / Outfit)
 *
 * SCOPE OF THIS FILE (LEVEL 1 — BRAND ALIGNMENT)
 * ------------------------------------------------
 * This file handles the automated portion of the restyling:
 *
 *   ✅ Bootstrap 5 CSS variable overrides  →  affects all BS components globally
 *   ✅ Google Fonts swap  →  Inter replaces existing font stack
 *   ✅ Body and base element defaults
 *   ✅ Common Bootstrap utility class overrides (bg-white, bg-light, text-dark, etc.)
 *   ✅ Navbar / sidebar base styles
 *   ✅ Card, table, form, button, badge component overrides
 *   ✅ Modal, dropdown, tooltip styles
 *   ✅ Scrollbar styling
 *
 * WHAT THIS FILE DOES NOT HANDLE (REQUIRES MANUAL AUDIT)
 * -------------------------------------------------------
 * After applying this file, Claude Code should do a view-by-view pass of the
 * app to catch:
 *
 *   ⚠️  Hardcoded colour values in inline style="" attributes in index.html
 *   ⚠️  Custom CSS classes in index.html <style> blocks that override Bootstrap
 *   ⚠️  Bootstrap utility classes hardcoded in HTML that this file can't reach
 *       (e.g. class="bg-white", class="text-dark" in the HTML markup itself)
 *       These must be changed in the HTML to class="bg-body" / class="text-body"
 *       or removed so the CSS variables apply correctly.
 *   ⚠️  Chart.js / D3 / canvas-rendered colours — these are set in JS, not CSS,
 *       and must be updated in the JavaScript that initialises each chart.
 *   ⚠️  Any SVG fill/stroke colours hardcoded as attributes (not CSS)
 *
 * VIEWS TO AUDIT AFTER APPLYING THIS FILE
 * -----------------------------------------
 * Work through each major view in the app and screenshot before/after:
 *
 *   1.  Landing / login page
 *   2.  Registration page
 *   3.  Dashboard (main overview)
 *   4.  New Assessment / Assessment in progress
 *   5.  Previous Assessments list
 *   6.  Controls
 *   7.  Policies
 *   8.  Risks (risk register, heatmap)
 *   9.  Assets
 *   10. Vendors
 *   11. Incidents
 *   12. BCDR Tests
 *   13. Pen Tests
 *   14. ROPA (Art. 30)
 *   15. DPIA (Art. 35) wizard
 *   16. Network Scanner
 *   17. Actions / Kanban board
 *   18. Activity Feed
 *   19. Team management
 *   20. Organisation settings
 *   21. My Account
 *   22. Admin panel
 *   23. Compliance Calendar
 *   24. Modals (all types — create, edit, delete, confirm)
 *   25. Toasts / alert notifications
 *
 * =============================================================================
 */


/* =============================================================================
   1. GOOGLE FONTS — Replace Playfair Display / Montserrat / Outfit with Inter
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');


/* =============================================================================
   2. BOOTSTRAP 5 — CSS VARIABLE OVERRIDES
   These override Bootstrap's design tokens at the :root level, affecting every
   Bootstrap component that uses these variables.
   ============================================================================= */

:root {

  /* --- Typography --- */
  --bs-font-sans-serif:      'Inter', system-ui, -apple-system, sans-serif;
  --bs-body-font-family:     var(--bs-font-sans-serif);
  --bs-body-font-size:       0.9375rem;   /* 15px — slightly tighter than BS default 16px */
  --bs-body-font-weight:     400;
  --bs-body-line-height:     1.6;

  /* --- Colour palette --- */
  --bs-body-bg:              #080f1a;
  --bs-body-color:           #f1f5f9;

  --bs-primary:              #00c896;
  --bs-primary-rgb:          0, 200, 150;

  --bs-secondary:            #0099ff;
  --bs-secondary-rgb:        0, 153, 255;

  --bs-success:              #00c896;
  --bs-success-rgb:          0, 200, 150;

  --bs-danger:               #ef4444;
  --bs-danger-rgb:           239, 68, 68;

  --bs-warning:              #f59e0b;
  --bs-warning-rgb:          245, 158, 11;

  --bs-info:                 #38bdf8;
  --bs-info-rgb:             56, 189, 248;

  --bs-light:                #1e2d42;
  --bs-light-rgb:            30, 45, 66;

  --bs-dark:                 #0d1829;
  --bs-dark-rgb:             13, 24, 41;

  /* --- Surface / background tiers --- */
  --bs-secondary-bg:         #0d1829;     /* cards, panels, raised surfaces */
  --bs-tertiary-bg:          #0a1420;     /* alternating section backgrounds */

  /* --- Border --- */
  --bs-border-color:         rgba(255, 255, 255, 0.06);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.06);
  --bs-border-radius:        0.625rem;    /* 10px — slightly rounder than BS default */
  --bs-border-radius-sm:     0.375rem;
  --bs-border-radius-lg:     0.875rem;
  --bs-border-radius-xl:     1rem;
  --bs-border-radius-2xl:    1.25rem;

  /* --- Text colour tiers --- */
  --bs-secondary-color:      #94a3b8;     /* labels, metadata, secondary text */
  --bs-tertiary-color:       #475569;     /* placeholders, disabled, timestamps */

  /* --- Card --- */
  --bs-card-bg:              #0d1829;
  --bs-card-border-color:    rgba(255, 255, 255, 0.06);
  --bs-card-cap-bg:          rgba(255, 255, 255, 0.02);
  --bs-card-color:           #f1f5f9;
  --bs-card-box-shadow:      none;

  /* --- Navbar --- */
  --bs-navbar-color:         #94a3b8;
  --bs-navbar-hover-color:   #f1f5f9;
  --bs-navbar-active-color:  #00c896;
  --bs-navbar-brand-color:   #f1f5f9;
  --bs-navbar-brand-hover-color: #ffffff;

  /* --- Nav (tabs, pills) --- */
  --bs-nav-link-color:       #94a3b8;
  --bs-nav-link-hover-color: #f1f5f9;
  --bs-nav-tabs-border-color: rgba(255, 255, 255, 0.08);
  --bs-nav-tabs-link-active-color: #00c896;
  --bs-nav-tabs-link-active-bg:   transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent #00c896;

  /* --- Table --- */
  --bs-table-bg:             transparent;
  --bs-table-color:          #f1f5f9;
  --bs-table-border-color:   rgba(255, 255, 255, 0.06);
  --bs-table-striped-bg:     rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg:       rgba(0, 200, 150, 0.05);
  --bs-table-active-bg:      rgba(0, 200, 150, 0.08);

  /* --- Form controls --- */
  --bs-form-control-bg:          #0a1420;
  --bs-input-bg:                 #0a1420;
  --bs-input-color:              #f1f5f9;
  --bs-input-border-color:       rgba(255, 255, 255, 0.12);
  --bs-input-focus-border-color: #00c896;
  --bs-input-focus-box-shadow:   0 0 0 0.2rem rgba(0, 200, 150, 0.15);
  --bs-input-placeholder-color:  #475569;

  /* --- Dropdown --- */
  --bs-dropdown-bg:              #0d1829;
  --bs-dropdown-border-color:    rgba(255, 255, 255, 0.08);
  --bs-dropdown-color:           #f1f5f9;
  --bs-dropdown-link-color:      #94a3b8;
  --bs-dropdown-link-hover-color: #f1f5f9;
  --bs-dropdown-link-hover-bg:   rgba(0, 200, 150, 0.08);
  --bs-dropdown-link-active-color: #080f1a;
  --bs-dropdown-link-active-bg:  #00c896;
  --bs-dropdown-divider-bg:      rgba(255, 255, 255, 0.06);
  --bs-dropdown-header-color:    #475569;

  /* --- Modal --- */
  --bs-modal-bg:             #0d1829;
  --bs-modal-color:          #f1f5f9;
  --bs-modal-border-color:   rgba(255, 255, 255, 0.08);
  --bs-modal-header-border-color: rgba(255, 255, 255, 0.06);
  --bs-modal-footer-border-color: rgba(255, 255, 255, 0.06);
  --bs-modal-backdrop-bg:    #000000;
  --bs-modal-backdrop-opacity: 0.65;

  /* --- Toast --- */
  --bs-toast-bg:             #0d1829;
  --bs-toast-color:          #f1f5f9;
  --bs-toast-border-color:   rgba(255, 255, 255, 0.08);
  --bs-toast-header-bg:      rgba(255, 255, 255, 0.02);
  --bs-toast-header-color:   #94a3b8;

  /* --- Popover / Tooltip --- */
  --bs-popover-bg:           #0d1829;
  --bs-popover-border-color: rgba(255, 255, 255, 0.08);
  --bs-popover-body-color:   #f1f5f9;
  --bs-popover-header-bg:    #080f1a;
  --bs-popover-header-color: #f1f5f9;
  --bs-tooltip-bg:           #1e2d42;
  --bs-tooltip-color:        #f1f5f9;

  /* --- List group --- */
  --bs-list-group-bg:              #0d1829;
  --bs-list-group-color:           #f1f5f9;
  --bs-list-group-border-color:    rgba(255, 255, 255, 0.06);
  --bs-list-group-hover-bg:        rgba(0, 200, 150, 0.06);
  --bs-list-group-active-bg:       #00c896;
  --bs-list-group-active-color:    #080f1a;
  --bs-list-group-active-border-color: #00c896;
  --bs-list-group-action-color:    #94a3b8;
  --bs-list-group-action-hover-color: #f1f5f9;

  /* --- Pagination --- */
  --bs-pagination-color:           #94a3b8;
  --bs-pagination-bg:              #0d1829;
  --bs-pagination-border-color:    rgba(255, 255, 255, 0.08);
  --bs-pagination-hover-color:     #f1f5f9;
  --bs-pagination-hover-bg:        rgba(0, 200, 150, 0.08);
  --bs-pagination-hover-border-color: rgba(255, 255, 255, 0.12);
  --bs-pagination-active-color:    #080f1a;
  --bs-pagination-active-bg:       #00c896;
  --bs-pagination-active-border-color: #00c896;
  --bs-pagination-disabled-color:  #475569;
  --bs-pagination-disabled-bg:     #0a1420;

  /* --- Progress bars --- */
  --bs-progress-bg:          rgba(255, 255, 255, 0.06);
  --bs-progress-bar-bg:      #00c896;

  /* --- Accordion --- */
  --bs-accordion-bg:                 #0d1829;
  --bs-accordion-color:              #f1f5f9;
  --bs-accordion-border-color:       rgba(255, 255, 255, 0.06);
  --bs-accordion-button-bg:          #0d1829;
  --bs-accordion-button-color:       #f1f5f9;
  --bs-accordion-button-active-bg:   rgba(0, 200, 150, 0.08);
  --bs-accordion-button-active-color: #00c896;
  --bs-accordion-button-focus-box-shadow: 0 0 0 0.2rem rgba(0, 200, 150, 0.15);

  /* --- Offcanvas (side drawer) --- */
  --bs-offcanvas-bg:         #0d1829;
  --bs-offcanvas-color:      #f1f5f9;
  --bs-offcanvas-border-color: rgba(255, 255, 255, 0.08);

  /* --- Code / pre --- */
  --bs-code-color:           #00c896;
}


/* =============================================================================
   3. BASE ELEMENT DEFAULTS
   ============================================================================= */

html, body {
  background-color: #080f1a;
  color: #f1f5f9;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — tighter weight, no serif */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: -0.01em;
}

/* Links */
a {
  color: #00c896;
  text-decoration: none;
}
a:hover {
  color: #00e0aa;
  text-decoration: none;
}

/* HR / dividers */
hr {
  border-color: rgba(255, 255, 255, 0.06);
  opacity: 1;
}

/* Muted text */
.text-muted {
  color: #475569 !important;
}

/* Small / caption text */
small, .small {
  color: #94a3b8;
}


/* =============================================================================
   4. BOOTSTRAP UTILITY CLASS OVERRIDES
   These override hardcoded Bootstrap utility classes that may appear in the HTML.
   IMPORTANT FOR CLAUDE CODE: Where these utility classes appear directly in
   index.html markup (e.g. class="bg-white"), they should also be changed to
   semantic alternatives (class="bg-body-secondary") so the CSS variable applies
   naturally. This CSS provides a fallback for any that aren't caught.
   ============================================================================= */

.bg-white       { background-color: #0d1829 !important; }
.bg-light       { background-color: #0d1829 !important; }
.bg-body        { background-color: #080f1a !important; }
.bg-body-secondary { background-color: #0d1829 !important; }
.bg-body-tertiary  { background-color: #0a1420 !important; }

.text-dark      { color: #f1f5f9 !important; }
.text-black     { color: #f1f5f9 !important; }
.text-body      { color: #f1f5f9 !important; }
.text-body-secondary { color: #94a3b8 !important; }
.text-body-tertiary  { color: #475569 !important; }

.border         { border-color: rgba(255, 255, 255, 0.06) !important; }
.border-light   { border-color: rgba(255, 255, 255, 0.06) !important; }
.border-secondary { border-color: rgba(255, 255, 255, 0.08) !important; }

.shadow         { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important; }
.shadow-sm      { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; }
.shadow-lg      { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5) !important; }


/* =============================================================================
   5. BUTTONS
   ============================================================================= */

/* Primary button — accent green */
.btn-primary {
  background-color: #00c896;
  border-color: #00c896;
  color: #080f1a;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #00b888;
  border-color: #00b888;
  color: #080f1a;
  box-shadow: 0 0 0 0.2rem rgba(0, 200, 150, 0.25);
}
.btn-primary:active {
  background-color: #00aa80;
  border-color: #00aa80;
}

/* Outline primary */
.btn-outline-primary {
  color: #00c896;
  border-color: #00c896;
}
.btn-outline-primary:hover {
  background-color: #00c896;
  border-color: #00c896;
  color: #080f1a;
}

/* Secondary button */
.btn-secondary {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}
.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* Light button */
.btn-light {
  background-color: #1e2d42;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}
.btn-light:hover {
  background-color: #253650;
  color: #ffffff;
}

/* Dark button */
.btn-dark {
  background-color: #0a1420;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

/* Danger button */
.btn-danger {
  background-color: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}
.btn-outline-danger {
  color: #ef4444;
  border-color: #ef4444;
}
.btn-outline-danger:hover {
  background-color: #ef4444;
  color: #ffffff;
}

/* Warning */
.btn-warning {
  background-color: #f59e0b;
  border-color: #f59e0b;
  color: #080f1a;
  font-weight: 600;
}


/* =============================================================================
   6. CARDS
   ============================================================================= */

.card {
  background-color: #0d1829;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.875rem;
  color: #f1f5f9;
}

.card-header {
  background-color: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 600;
  font-size: 0.875rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-footer {
  background-color: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Hoverable card variant — add class="card card-hover" in HTML */
.card-hover {
  transition: border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.card-hover:hover {
  border-color: rgba(0, 200, 150, 0.3);
  transform: translateY(-2px);
}


/* =============================================================================
   7. NAVIGATION & SIDEBAR
   ============================================================================= */

/* Top navbar */
.navbar {
  background-color: #080f1a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
}

.navbar-brand {
  font-weight: 700;
  color: #f1f5f9 !important;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.nav-link {
  color: #94a3b8;
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.15s ease;
}
.nav-link:hover,
.nav-link:focus {
  color: #f1f5f9;
}
.nav-link.active {
  color: #00c896 !important;
}

/* Sidebar (Bootstrap list-group or custom nav used as sidebar) */
.sidebar,
.side-nav,
#sidebar,
[id*="sidebar"],
[class*="sidebar"] {
  background-color: #0a1420;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* Active sidebar item */
.sidebar .nav-link.active,
.side-nav .nav-link.active,
.list-group-item.active {
  background-color: rgba(0, 200, 150, 0.1);
  color: #00c896;
  border-color: transparent;
  font-weight: 600;
}

.sidebar .nav-link,
.side-nav .nav-link {
  color: #94a3b8;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 2px;
  font-size: 0.875rem;
  transition: background-color 0.15s, color 0.15s;
}
.sidebar .nav-link:hover,
.side-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.04);
  color: #f1f5f9;
}


/* =============================================================================
   8. TABLES
   ============================================================================= */

.table {
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.06);
  font-size: 0.875rem;
}

.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  padding: 0.75rem 1rem;
}

.table thead th,
.table > thead > tr > th {
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.015);
  color: #f1f5f9;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(0, 200, 150, 0.04);
  color: #f1f5f9;
}

.table-dark {
  --bs-table-bg: #0a1420;
  --bs-table-border-color: rgba(255, 255, 255, 0.06);
}


/* =============================================================================
   9. FORMS & INPUTS
   ============================================================================= */

.form-control,
.form-select {
  background-color: #0a1420;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  color: #f1f5f9;
  font-size: 0.875rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
  background-color: #0a1420;
  border-color: #00c896;
  color: #f1f5f9;
  box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.12);
  outline: none;
}

.form-control::placeholder {
  color: #475569;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: rgba(255, 255, 255, 0.03);
  color: #475569;
  border-color: rgba(255, 255, 255, 0.06);
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
  margin-bottom: 0.375rem;
}

.form-text {
  color: #475569;
  font-size: 0.75rem;
}

/* Checkboxes and radios */
.form-check-input {
  background-color: #0a1420;
  border-color: rgba(255, 255, 255, 0.2);
}
.form-check-input:checked {
  background-color: #00c896;
  border-color: #00c896;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.12);
  border-color: #00c896;
}
.form-check-label {
  color: #94a3b8;
  font-size: 0.875rem;
}

/* Range input */
.form-range::-webkit-slider-thumb {
  background: #00c896;
}
.form-range::-moz-range-thumb {
  background: #00c896;
}

/* Input group */
.input-group-text {
  background-color: #0a1420;
  border-color: rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 0.875rem;
}


/* =============================================================================
   10. BADGES
   ============================================================================= */

.badge {
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  border-radius: 0.375rem;
  padding: 0.3em 0.6em;
}

.badge.bg-primary   { background-color: rgba(0, 200, 150, 0.15) !important; color: #00c896 !important; }
.badge.bg-success   { background-color: rgba(0, 200, 150, 0.15) !important; color: #00c896 !important; }
.badge.bg-danger    { background-color: rgba(239, 68, 68, 0.15)  !important; color: #f87171 !important; }
.badge.bg-warning   { background-color: rgba(245, 158, 11, 0.15) !important; color: #fbbf24 !important; }
.badge.bg-info      { background-color: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; }
.badge.bg-secondary { background-color: rgba(255, 255, 255, 0.08) !important; color: #94a3b8 !important; }
.badge.bg-light     { background-color: rgba(255, 255, 255, 0.06) !important; color: #94a3b8 !important; }
.badge.bg-dark      { background-color: rgba(255, 255, 255, 0.06) !important; color: #94a3b8 !important; }


/* =============================================================================
   11. ALERTS
   ============================================================================= */

.alert {
  border-radius: 0.625rem;
  border: 1px solid;
  font-size: 0.875rem;
}
.alert-primary   { background-color: rgba(0, 200, 150, 0.08);  border-color: rgba(0, 200, 150, 0.2);  color: #00c896; }
.alert-success   { background-color: rgba(0, 200, 150, 0.08);  border-color: rgba(0, 200, 150, 0.2);  color: #00c896; }
.alert-danger    { background-color: rgba(239, 68, 68, 0.08);  border-color: rgba(239, 68, 68, 0.2);  color: #f87171; }
.alert-warning   { background-color: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.alert-info      { background-color: rgba(56, 189, 248, 0.08); border-color: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.alert-secondary { background-color: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: #94a3b8; }


/* =============================================================================
   12. MODALS
   ============================================================================= */

.modal-content {
  background-color: #0d1829;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  color: #f1f5f9;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.25rem 1.5rem;
}

.modal-title {
  font-weight: 600;
  font-size: 1rem;
  color: #f1f5f9;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1rem 1.5rem;
}

.btn-close {
  filter: invert(1) grayscale(1) brightness(0.7);
  opacity: 0.6;
}
.btn-close:hover {
  opacity: 1;
}


/* =============================================================================
   13. DROPDOWNS
   ============================================================================= */

.dropdown-menu {
  background-color: #0d1829;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  padding: 0.375rem;
  font-size: 0.875rem;
}

.dropdown-item {
  color: #94a3b8;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  transition: background-color 0.1s, color 0.1s;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(0, 200, 150, 0.08);
  color: #f1f5f9;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: #00c896;
  color: #080f1a;
}

.dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 0.25rem 0;
}

.dropdown-header {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.75rem 0.25rem;
}


/* =============================================================================
   14. PROGRESS BARS
   ============================================================================= */

.progress {
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  height: 0.5rem;
  overflow: hidden;
}

.progress-bar {
  background-color: #00c896;
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.progress-bar.bg-danger  { background-color: #ef4444; }
.progress-bar.bg-warning { background-color: #f59e0b; }
.progress-bar.bg-info    { background-color: #38bdf8; }
.progress-bar.bg-success { background-color: #00c896; }


/* =============================================================================
   15. LIST GROUPS
   ============================================================================= */

.list-group-item {
  background-color: #0d1829;
  border-color: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  font-size: 0.875rem;
  transition: background-color 0.15s;
}

.list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
  color: #ffffff;
}

.list-group-item.active {
  background-color: rgba(0, 200, 150, 0.1);
  border-color: rgba(0, 200, 150, 0.2);
  color: #00c896;
}

.list-group-item + .list-group-item {
  border-top-color: rgba(255, 255, 255, 0.04);
}


/* =============================================================================
   16. TOASTS
   ============================================================================= */

.toast {
  background-color: #0d1829;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  color: #f1f5f9;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.toast-header {
  background-color: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 0.8125rem;
  font-weight: 600;
}

.toast-body {
  font-size: 0.875rem;
}


/* =============================================================================
   17. PAGINATION
   ============================================================================= */

.page-link {
  background-color: #0d1829;
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 0.875rem;
  transition: background-color 0.15s, color 0.15s;
}
.page-link:hover {
  background-color: rgba(0, 200, 150, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}
.page-item.active .page-link {
  background-color: #00c896;
  border-color: #00c896;
  color: #080f1a;
}
.page-item.disabled .page-link {
  background-color: #0a1420;
  color: #475569;
  border-color: rgba(255, 255, 255, 0.04);
}


/* =============================================================================
   18. TABS & PILLS
   ============================================================================= */

.nav-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-tabs .nav-link {
  color: #94a3b8;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.625rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.15s, border-color 0.15s;
}
.nav-tabs .nav-link:hover {
  color: #f1f5f9;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.nav-tabs .nav-link.active {
  color: #00c896;
  background-color: transparent;
  border-bottom-color: #00c896;
}

.nav-pills .nav-link {
  color: #94a3b8;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
}
.nav-pills .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.04);
  color: #f1f5f9;
}
.nav-pills .nav-link.active {
  background-color: rgba(0, 200, 150, 0.12);
  color: #00c896;
}


/* =============================================================================
   19. ACCORDION
   ============================================================================= */

.accordion-item {
  background-color: #0d1829;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.625rem !important;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.accordion-button {
  background-color: #0d1829;
  color: #f1f5f9;
  font-weight: 500;
  font-size: 0.875rem;
}
.accordion-button:not(.collapsed) {
  background-color: rgba(0, 200, 150, 0.06);
  color: #00c896;
  box-shadow: none;
}
.accordion-button::after {
  filter: invert(1) brightness(0.6);
}
.accordion-button:not(.collapsed)::after {
  filter: invert(65%) sepia(70%) saturate(400%) hue-rotate(120deg);
}
.accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0, 200, 150, 0.2);
}

.accordion-body {
  background-color: #080f1a;
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1.7;
}


/* =============================================================================
   20. SCROLLBAR
   Custom scrollbar to match the dark theme.
   ============================================================================= */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #080f1a;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}


/* =============================================================================
   21. UTILITY / HELPER CLASSES
   Utility classes that can be added to existing HTML elements to apply
   Shield IQ brand styles without modifying the Bootstrap component itself.
   ============================================================================= */

/* Accent green text */
.text-accent   { color: #00c896 !important; }
.text-accent-blue { color: #0099ff !important; }

/* Glowing green button/element effect (used on primary CTAs) */
.glow-accent {
  box-shadow: 0 0 24px rgba(0, 200, 150, 0.2);
}

/* Gradient text (headlines) */
.gradient-text {
  background: linear-gradient(135deg, #00c896 0%, #0099ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Surface card (alternative to Bootstrap .card for non-card containers) */
.surface {
  background-color: #0d1829;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.875rem;
}
.surface-subtle {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 0.625rem;
}

/* Status dot indicators */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.status-dot.active   { background-color: #00c896; }
.status-dot.warning  { background-color: #f59e0b; }
.status-dot.danger   { background-color: #ef4444; }
.status-dot.inactive { background-color: #475569; }
.status-dot.info     { background-color: #38bdf8; }
.status-dot.pulse { animation: pulse-dot 2s infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* Score / percentage display blocks */
.score-display {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.score-high    { color: #00c896; }
.score-medium  { color: #f59e0b; }
.score-low     { color: #ef4444; }

/* Section header pattern (matches marketing site section labels) */
.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #00c896;
  margin-bottom: 0.5rem;
}


/* =============================================================================
   22. CHART.JS COLOUR VARIABLES
   These CSS variables are NOT automatically applied to Chart.js charts —
   Chart.js colours are set in JavaScript. This section documents the correct
   colour values that should be used when updating chart initialisations in JS.

   IMPORTANT FOR CLAUDE CODE:
   Search index.html for Chart.js initialisations (new Chart(...)) and update
   the colour arrays to match these values. Common locations to update:
     - datasets[].backgroundColor
     - datasets[].borderColor
     - scales.*.grid.color
     - scales.*.ticks.color
     - plugins.legend.labels.color
   ============================================================================= */

/*
  CHART COLOUR PALETTE (use in JS, not CSS):

  Grid lines:       rgba(255, 255, 255, 0.05)
  Tick labels:      #94a3b8
  Legend labels:    #94a3b8

  Dataset colours (in order):
    1. Primary green:   #00c896   (rgba: 0, 200, 150)
    2. Blue:            #0099ff   (rgba: 0, 153, 255)
    3. Purple:          #a78bfa   (rgba: 167, 139, 250)
    4. Amber:           #f59e0b   (rgba: 245, 158, 11)
    5. Red:             #ef4444   (rgba: 239, 68, 68)
    6. Pink:            #ec4899   (rgba: 236, 72, 153)
    7. Cyan:            #38bdf8   (rgba: 56, 189, 248)
    8. Orange:          #f97316   (rgba: 249, 115, 22)

  Fill (area charts) — use at 15% opacity:
    rgba(0, 200, 150, 0.15)

  Tooltip background: #0d1829
  Tooltip border:     rgba(255, 255, 255, 0.08)
  Tooltip title:      #f1f5f9
  Tooltip body:       #94a3b8
*/