/* ================================================================
   INKANYEZI CREATIONS - DARK THEME
   Brand-Aligned Dark Mode Implementation
   ================================================================ */

/* Dark Theme CSS Variables */
[data-theme="dark"] {
  /* Background Colors */
  --brand-white: #0D0D0D;
  --brand-black: #FFFFFF;
  --brand-grey: #2A2A2A;
  
  /* Dark-specific backgrounds */
  --bg-primary: #0D0D0D;
  --bg-secondary: #1A1A1A;
  --bg-tertiary: #2A2A2A;
  --bg-elevated: #1F1F1F;
  
  /* Text Colors */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-tertiary: rgba(255, 255, 255, 0.65);
  --text-muted: rgba(255, 255, 255, 0.45);
  
  /* Gold remains the same (brand color) */
  --brand-gold: #C9A14F;
  --brand-gold-90: rgba(201, 161, 79, 0.9);
  --brand-gold-70: rgba(201, 161, 79, 0.7);
  --brand-gold-50: rgba(201, 161, 79, 0.5);
  --brand-gold-30: rgba(201, 161, 79, 0.3);
  --brand-gold-10: rgba(201, 161, 79, 0.1);
  
  /* Grey Color Tints (inverted for dark mode) */
  --brand-grey-90: rgba(42, 42, 42, 0.9);
  --brand-grey-70: rgba(42, 42, 42, 0.7);
  --brand-grey-50: rgba(42, 42, 42, 0.5);
  --brand-grey-30: rgba(42, 42, 42, 0.3);
  --brand-grey-10: rgba(42, 42, 42, 0.1);
  
  /* Black/White Tints (inverted) */
  --brand-black-90: rgba(255, 255, 255, 0.9);
  --brand-black-70: rgba(255, 255, 255, 0.7);
  --brand-black-50: rgba(255, 255, 255, 0.5);
  --brand-black-30: rgba(255, 255, 255, 0.3);
  --brand-black-10: rgba(255, 255, 255, 0.1);
  
  /* Shadows (adjusted for dark theme) */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
  
  /* Border colors */
  --border-color: rgba(255, 255, 255, 0.12);
  --border-color-hover: rgba(255, 255, 255, 0.2);
}

/* ================================================================
   BASE STYLES OVERRIDE
   ================================================================ */
[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
  color: var(--text-primary);
}

[data-theme="dark"] p,
[data-theme="dark"] .body-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .text-muted {
  color: var(--text-muted) !important;
}

/* ================================================================
   NAVIGATION
   ================================================================ */
[data-theme="dark"] .navbar {
  background-color: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link.active {
  color: var(--brand-gold) !important;
}

[data-theme="dark"] .navbar-toggler {
  border-color: var(--border-color);
}

[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1);
}

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

[data-theme="dark"] .dropdown-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--bg-tertiary);
  color: var(--brand-gold);
}

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

/* ================================================================
   CARDS
================================================================ */
[data-theme="dark"] .card {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--border-color-hover);
}

[data-theme="dark"] .card-title {
  color: var(--text-primary);
}

[data-theme="dark"] .card-text {
  color: var(--text-secondary);
}

/* ================================================================
   SECTIONS
   ================================================================ */
[data-theme="dark"] .section-light {
  background-color: var(--bg-primary);
}

[data-theme="dark"] .section-dark {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .section-grey {
  background-color: var(--bg-tertiary);
}

/* Section-gold stays the same (brand color) */

/* ================================================================
   FORMS
   ================================================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--bg-tertiary);
border-color: var(--brand-gold);
  color: var(--text-primary);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] .form-label {
  color: var(--text-primary);
}

/* ================================================================
   GALLERY
   ================================================================ */
[data-theme="dark"] .gallery-item {
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .gallery-item:hover {
  border-color: var(--border-color-hover);
}

/* ================================================================
   FOOTER
   ================================================================ */
[data-theme="dark"] .footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .footer a {
  color: var(--brand-gold);
}

[data-theme="dark"] .footer a:hover {
  color: var(--brand-gold-70);
}

[data-theme="dark"] .text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ================================================================
   HERO SECTION
   ================================================================ */
[data-theme="dark"] .hero-content-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.8));
}

/* ================================================================
   TRUST INDICATORS
================================================================ */
[data-theme="dark"] .trust-indicator p {
  color: var(--text-secondary);
}

/* ================================================================
   VIDEO PLAYER
   ================================================================ */
[data-theme="dark"] .video-player {
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .vp-controls {
  background: rgba(0,0,0,.75);
  border-color: var(--border-color);
}

/* ================================================================
   BORDERS
   ================================================================ */
[data-theme="dark"] .border {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-bottom {
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .border-top {
  border-top-color: var(--border-color) !important;
}

/* ================================================================
   SHADOWS
   ================================================================ */
[data-theme="dark"] .shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-md {
  box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

/* ================================================================
   LOGO SWITCHING
   ================================================================ */
/* Hide full-color logo in dark mode */
[data-theme="dark"] .navbar-brand img[src*="FullColourLogo"] {
  content: url('/images/system/WhiteLogo.png');
}

[data-theme="dark"] .footer-logo[src*="WhiteLogo"] {
  /* White logo already correct for dark mode */
}

/* ================================================================
 UTILITIES
   ================================================================ */
[data-theme="dark"] .bg-white {
  background-color: var(--bg-elevated) !important;
}

[data-theme="dark"] .bg-light {
  background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .text-dark {
  color: var(--text-primary) !important;
}

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

/* ================================================================
   SMOOTH TRANSITIONS
   ================================================================ */
body,
.navbar,
.card,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.gallery-item {
  transition: background-color 0.3s ease, 
        color 0.3s ease, 
            border-color 0.3s ease;
}

/* ================================================================
   ACCORDION (FAQ PAGE)
   ================================================================ */
[data-theme="dark"] .accordion-item {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
}

[data-theme="dark"] .accordion-button {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--bg-tertiary);
  color: var(--brand-gold);
}

[data-theme="dark"] .accordion-button::after {
  filter: brightness(1.5);
}

[data-theme="dark"] .accordion-body {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* ================================================================
   BLOCKQUOTES (BLOG PAGES)
   ================================================================ */
[data-theme="dark"] blockquote,
[data-theme="dark"] .blockquote {
  color: var(--text-secondary);
}

[data-theme="dark"] .blockquote-footer {
  color: var(--text-muted);
}

[data-theme="dark"] .border-start {
  border-left-color: var(--brand-gold) !important;
}

/* ================================================================
   LISTS
   ================================================================ */
[data-theme="dark"] ul li,
[data-theme="dark"] ol li {
  color: var(--text-secondary);
}

/* ================================================================
   CODE ELEMENTS
   ================================================================ */
[data-theme="dark"] code {
  background-color: var(--bg-tertiary);
  color: var(--brand-gold);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
}

/* ================================================================
   BUTTONS ON GOLD BACKGROUNDS (DARK MODE)
   ================================================================ */
[data-theme="dark"] .btn-on-gold {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--bg-primary);
}

[data-theme="dark"] .btn-on-gold:hover {
  background-color: var(--brand-white);
  color: var(--bg-primary);
  border-color: var(--brand-white);
}

/* ================================================================
   OUTLINE BUTTONS ON DARK SECTIONS
   ================================================================ */
[data-theme="dark"] .section-dark .btn-outline-primary {
  color: var(--brand-gold);
  border-color: var(--brand-gold);
}

[data-theme="dark"] .section-dark .btn-outline-primary:hover {
  background-color: var(--brand-gold);
  color: var(--bg-primary);
}

/* ================================================================
   BADGES
   ================================================================ */
[data-theme="dark"] .badge.bg-gold {
  background-color: var(--brand-gold) !important;
  color: #000 !important;
}

/* ================================================================
   BORDER UTILITIES
   ================================================================ */
[data-theme="dark"] .border-gold {
  border-color: var(--brand-gold) !important;
}

/* ================================================================
   TOAST CONTAINER (BLOG SHARE)
   ================================================================ */
[data-theme="dark"] .toast {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

/* ================================================================
   CAROUSEL
   ================================================================ */
[data-theme="dark"] .carousel-indicators button {
  background-color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .carousel-indicators button.active {
  background-color: var(--brand-gold);
}

/* ================================================================
   STRONG/BOLD TEXT
   ================================================================ */
[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: var(--text-primary);
}

/* ================================================================
   LEAD TEXT
   ================================================================ */
[data-theme="dark"] .lead {
  color: var(--text-secondary);
}

/* ================================================================
   SMALL TEXT
   ================================================================ */
[data-theme="dark"] small,
[data-theme="dark"] .text-small,
[data-theme="dark"] .text-xs {
  color: var(--text-tertiary);
}

/* ================================================================
   LIST GROUP
   ================================================================ */
[data-theme="dark"] .list-group-item {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ================================================================
   ALERT COMPONENTS
   ================================================================ */
[data-theme="dark"] .alert {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ================================================================
   TABLES
   ================================================================ */
[data-theme="dark"] table,
[data-theme="dark"] .table {
  color: var(--text-primary);
}

[data-theme="dark"] .table > thead {
  border-color: var(--border-color);
}

[data-theme="dark"] .table > tbody > tr {
  border-color: var(--border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--bg-tertiary);
}

/* ================================================================
   MODAL
   ================================================================ */
[data-theme="dark"] .modal-content {
  background-color: var(--bg-elevated);
  border-color: var(--border-color);
  color: var(--text-primary);
}

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

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

[data-theme="dark"] .btn-close {
  filter: invert(1);
}

/* ================================================================
   SECTION GOLD TEXT OVERRIDE (REMAINS VISIBLE)
   ================================================================ */
[data-theme="dark"] .section-gold h1,
[data-theme="dark"] .section-gold h2,
[data-theme="dark"] .section-gold h3,
[data-theme="dark"] .section-gold h4,
[data-theme="dark"] .section-gold h5,
[data-theme="dark"] .section-gold h6,
[data-theme="dark"] .section-gold p,
[data-theme="dark"] .section-gold li {
  color: #FFFFFF;
}

/* Gold card within any section */
[data-theme="dark"] .card.bg-gold {
  background-color: var(--brand-gold) !important;
}

[data-theme="dark"] .card.bg-gold h1,
[data-theme="dark"] .card.bg-gold h2,
[data-theme="dark"] .card.bg-gold h3,
[data-theme="dark"] .card.bg-gold h4,
[data-theme="dark"] .card.bg-gold h5,
[data-theme="dark"] .card.bg-gold h6,
[data-theme="dark"] .card.bg-gold p {
  color: #FFFFFF !important;
}

/* ================================================================
   MARKDOWN/DOCS CONTENT
   ================================================================ */
[data-theme="dark"] .markdown-body {
  color: var(--text-secondary);
}

[data-theme="dark"] .markdown-body h1,
[data-theme="dark"] .markdown-body h2,
[data-theme="dark"] .markdown-body h3,
[data-theme="dark"] .markdown-body h4,
[data-theme="dark"] .markdown-body h5,
[data-theme="dark"] .markdown-body h6 {
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .markdown-body pre {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="dark"] .markdown-body code {
  background-color: var(--bg-tertiary);
  color: var(--brand-gold);
}

/* ================================================================
   PLACEHOLDER TEXT
   ================================================================ */
[data-theme="dark"] ::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

[data-theme="dark"] .form-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='%23C9A14F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ================================================================
   PAGINATION
   ================================================================ */
[data-theme="dark"] .page-link {
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  background-color: var(--bg-elevated);
}

[data-theme="dark"] .page-link:hover {
  color: var(--brand-gold);
  border-color: var(--brand-gold);
  background-color: var(--bg-tertiary);
}

[data-theme="dark"] .page-link:focus {
  box-shadow: 0 0 0 0.2rem var(--brand-gold-30);
}

[data-theme="dark"] .page-item.active .page-link {
  color: var(--bg-primary);
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
}

[data-theme="dark"] .page-item.disabled .page-link {
  color: var(--text-muted);
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}