/* =========================================================
   ChemReg Theme — Bootstrap 5.3.3 Complete Override
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root,
[data-bs-theme="light"] {
    /* Brand Colors */
    --m8crc-primary: #CE1126; /* Bahrain Red */
    --m8crc-secondary: #4A4A4A; /* Charcoal */
    --m8crc-tertiary: #6B7280; /* Muted Gray */
    --m8crc-success: #15803D;
    --m8crc-info: #2563EB;
    --m8crc-warning: #D97706;
    --m8crc-danger: #A50F1C; /* Darkened Bahrain Red */
    /* Surfaces */
    --m8crc-surface-base: #FFFFFF;
    --m8crc-surface-raised: #F7F9FA;
    --m8crc-surface-overlay: #EEF2F6;
    /* Text Colors - Semantic naming */
    --m8crc-text-primary: var(--m8crc-primary); /* Primary = Red */
    --m8crc-text-secondary: var(--m8crc-secondary); /* Secondary = Charcoal */
    --m8crc-text-base: #2B2E34; /* Base body text */
    --m8crc-text-subdued: #6B7280; /* Less emphasis */
    --m8crc-text-muted: #9CA3AF; /* Lowest emphasis */
    --m8crc-text-on-primary: #FFFFFF; /* Text on red */
    --m8crc-text-on-secondary: #FFFFFF; /* Text on charcoal */
    /* Borders - Intensity levels */
    --m8crc-border-subtle: #E5E7EB; /* Lightest */
    --m8crc-border-medium: #CBD5E1; /* Medium */
    --m8crc-border-strong: var(--m8crc-tertiary); /* Strongest = Gray */
    --m8crc-border-primary: var(--m8crc-primary); /* Primary = Red */
    --m8crc-border-secondary: var(--m8crc-secondary); /* Secondary = Charcoal */
    /* ========== BOOTSTRAP OVERRIDES ========== */
    /* Color system */
    --bs-blue: #2563EB;
    --bs-indigo: #6366F1;
    --bs-purple: #A855F7;
    --bs-pink: #EC4899;
    --bs-red: var(--m8crc-primary);
    --bs-orange: var(--m8crc-warning);
    --bs-yellow: #EAB308;
    --bs-green: var(--m8crc-success);
    --bs-teal: #0D9488;
    --bs-cyan: var(--m8crc-info);
    --bs-black: #000000;
    --bs-white: #FFFFFF;
    --bs-gray: var(--m8crc-secondary);
    --bs-gray-dark: #1F2937;
    /* Theme colors */
    --bs-primary: var(--m8crc-primary);
    --bs-secondary: var(--m8crc-secondary);
    --bs-success: var(--m8crc-success);
    --bs-info: var(--m8crc-info);
    --bs-warning: var(--m8crc-warning);
    --bs-danger: var(--m8crc-danger);
    --bs-light: #F3F4F6;
    --bs-dark: #4A4A4A;
    /* Theme RGB values */
    --bs-primary-rgb: 206, 17, 38;
    --bs-secondary-rgb: 74, 74, 74;
    --bs-success-rgb: 21, 128, 61;
    --bs-info-rgb: 37, 99, 235;
    --bs-warning-rgb: 217, 119, 6;
    --bs-danger-rgb: 165, 15, 28;
    --bs-light-rgb: 243, 244, 246;
    --bs-dark-rgb: 74, 74, 74;
    /* Body */
    --bs-body-color: var(--m8crc-text-base);
    --bs-body-color-rgb: 43, 46, 52;
    --bs-body-bg: var(--m8crc-surface-base);
    --bs-body-bg-rgb: 255, 255, 255;
    /* Emphasis colors */
    --bs-emphasis-color: var(--m8crc-text-base);
    --bs-emphasis-color-rgb: 43, 46, 52;
    /* Bootstrap's "secondary" and "tertiary" text/bg */
    --bs-secondary-color: var(--m8crc-text-subdued);
    --bs-secondary-color-rgb: 107, 114, 128;
    --bs-secondary-bg: var(--m8crc-surface-raised);
    --bs-secondary-bg-rgb: 247, 249, 250;
    --bs-tertiary-color: var(--m8crc-text-muted);
    --bs-tertiary-color-rgb: 156, 163, 175;
    --bs-tertiary-bg: var(--m8crc-surface-overlay);
    --bs-tertiary-bg-rgb: 238, 242, 246;
    /* Links */
    --bs-link-color: var(--m8crc-text-primary);
    --bs-link-color-rgb: 206, 17, 38;
    --bs-link-decoration: none;
    --bs-link-hover-color: var(--m8crc-text-secondary);
    --bs-link-hover-color-rgb: 74, 74, 74;
    /* Borders */
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: var(--m8crc-border-subtle);
    --bs-border-color-translucent: rgba(229, 231, 235, 0.5);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    /* Headings */
    --bs-heading-color: var(--m8crc-text-base);
    /* Code */
    --bs-code-color: var(--m8crc-text-secondary);
    /* Highlight */
    --bs-highlight-color: var(--m8crc-text-base);
    --bs-highlight-bg: #FEF3C7;
    /* Forms */
    --bs-form-valid-color: var(--m8crc-success);
    --bs-form-valid-border-color: var(--m8crc-success);
    --bs-form-invalid-color: var(--m8crc-danger);
    --bs-form-invalid-border-color: var(--m8crc-danger);
}

[data-bs-theme="dark"] {
    /* Brand Colors */
    --m8crc-primary: #F05A5F; /* Lifted Bahrain Red */
    --m8crc-secondary: #94A3B8; /* Lighter Charcoal */
    --m8crc-tertiary: #CBD5E1; /* Muted Gray */
    --m8crc-success: #22C55E;
    --m8crc-info: #38BDF8;
    --m8crc-warning: #F59E0B;
    --m8crc-danger: #FB7185;
    /* Surfaces - CHARCOAL SHADES */
    --m8crc-surface-base: #1A1A1A; /* Dark charcoal base */
    --m8crc-surface-raised: #252525; /* Slightly lighter */
    --m8crc-surface-overlay: #333333; /* Even lighter charcoal */
    /* Text Colors - Semantic naming */
    --m8crc-text-primary: var(--m8crc-primary); /* Primary = Red */
    --m8crc-text-secondary: var(--m8crc-secondary); /* Secondary = Charcoal */
    --m8crc-text-base: #E5E7EB; /* Base body text */
    --m8crc-text-subdued: #CBD5E1; /* Less emphasis */
    --m8crc-text-muted: #94A3B8; /* Lowest emphasis */
    --m8crc-text-on-primary: #FFFFFF; /* Text on red */
    --m8crc-text-on-secondary: #FFFFFF; /* Text on charcoal */
    /* Borders - Intensity levels */
    --m8crc-border-subtle: #2D2D2D; /* Subtle charcoal border */
    --m8crc-border-medium: #404040; /* Medium charcoal */
    --m8crc-border-strong: var(--m8crc-tertiary); /* Strongest = Gray */
    --m8crc-border-primary: var(--m8crc-primary); /* Primary = Red */
    --m8crc-border-secondary: var(--m8crc-secondary); /* Secondary = Charcoal */
    /* ========== BOOTSTRAP OVERRIDES ========== */
    /* Color system */
    --bs-blue: #38BDF8;
    --bs-red: var(--m8crc-primary);
    --bs-orange: var(--m8crc-warning);
    --bs-green: var(--m8crc-success);
    --bs-teal: #14B8A6;
    --bs-cyan: var(--m8crc-info);
    --bs-gray: var(--m8crc-secondary);
    /* Theme colors */
    --bs-primary: var(--m8crc-primary);
    --bs-secondary: var(--m8crc-secondary);
    --bs-success: var(--m8crc-success);
    --bs-info: var(--m8crc-info);
    --bs-warning: var(--m8crc-warning);
    --bs-danger: var(--m8crc-danger);
    --bs-light: #333333; /* Lighter charcoal */
    --bs-dark: #0C0C0C; /* Darkest charcoal - NEW DARKER OPTION */
    /* Theme RGB values */
    --bs-primary-rgb: 240, 90, 95;
    --bs-secondary-rgb: 148, 163, 184;
    --bs-success-rgb: 34, 197, 94;
    --bs-info-rgb: 56, 189, 248;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger-rgb: 251, 113, 133;
    --bs-light-rgb: 51, 51, 51; /* Lighter charcoal RGB */
    --bs-dark-rgb: 12, 12, 12; /* Darkest charcoal RGB */
    /* Body */
    --bs-body-color: var(--m8crc-text-base);
    --bs-body-color-rgb: 229, 231, 235;
    --bs-body-bg: var(--m8crc-surface-base);
    --bs-body-bg-rgb: 26, 26, 26; /* Dark charcoal RGB */
    /* Emphasis colors */
    --bs-emphasis-color: var(--m8crc-text-base);
    --bs-emphasis-color-rgb: 229, 231, 235;
    /* Bootstrap's "secondary" and "tertiary" text/bg */
    --bs-secondary-color: var(--m8crc-text-subdued);
    --bs-secondary-color-rgb: 203, 213, 225;
    --bs-secondary-bg: var(--m8crc-surface-raised);
    --bs-secondary-bg-rgb: 37, 37, 37; /* Raised charcoal RGB */

    --bs-tertiary-color: var(--m8crc-text-muted);
    --bs-tertiary-color-rgb: 148, 163, 184;
    --bs-tertiary-bg: var(--m8crc-surface-overlay);
    --bs-tertiary-bg-rgb: 51, 51, 51; /* Overlay charcoal RGB */
    /* Links */
    --bs-link-color: var(--m8crc-text-primary);
    --bs-link-color-rgb: 240, 90, 95;
    --bs-link-hover-color: var(--m8crc-text-secondary);
    --bs-link-hover-color-rgb: 148, 163, 184;
    /* Borders */
    --bs-border-color: var(--m8crc-border-subtle);
    --bs-border-color-translucent: rgba(45, 45, 45, 0.5);
    /* Headings */
    --bs-heading-color: var(--m8crc-text-base);
    /* Code */
    --bs-code-color: var(--m8crc-text-secondary);
    /* Highlight */
    --bs-highlight-color: var(--m8crc-text-base);
    --bs-highlight-bg: #92400E;
    /* Forms */
    --bs-form-valid-color: var(--m8crc-success);
    --bs-form-valid-border-color: var(--m8crc-success);
    --bs-form-invalid-color: var(--m8crc-danger);
    --bs-form-invalid-border-color: var(--m8crc-danger);
}

/* ========== COMPONENT-SPECIFIC OVERRIDES ========== */

/* ===== BUTTONS ===== */

/* Primary Button */
.btn-primary {
    /* Base State */
    --bs-btn-color: var(--m8crc-text-on-primary);
    --bs-btn-bg: var(--m8crc-primary);
    --bs-btn-border-color: var(--m8crc-primary);
    /* Hover State */
    --bs-btn-hover-color: var(--m8crc-text-on-primary);
    --bs-btn-hover-bg: var(--m8crc-danger); /* Use your Darker Red here */
    --bs-btn-hover-border-color: var(--m8crc-danger);
    /* Active / Pressed State */
    --bs-btn-active-color: var(--m8crc-text-on-primary);
    --bs-btn-active-bg: var(--m8crc-danger);
    --bs-btn-active-border-color: var(--m8crc-danger);
    /* Focus Ring / Halo */
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(0.9);
}

/* Secondary Button */
.btn-secondary {
    --bs-btn-color: var(--m8crc-text-on-secondary);
    --bs-btn-bg: var(--m8crc-secondary);
    --bs-btn-border-color: var(--m8crc-secondary);
    --bs-btn-hover-color: var(--m8crc-text-on-secondary);
    --bs-btn-hover-bg: var(--m8crc-secondary);
    --bs-btn-hover-border-color: var(--m8crc-secondary);
    --bs-btn-focus-shadow-rgb: 74, 74, 74;
    --bs-btn-active-color: var(--m8crc-text-on-secondary);
    --bs-btn-active-bg: var(--m8crc-secondary);
    --bs-btn-active-border-color: var(--m8crc-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--m8crc-text-on-secondary);
    --bs-btn-disabled-bg: var(--m8crc-secondary);
    --bs-btn-disabled-border-color: var(--m8crc-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    filter: brightness(0.9);
}

/* Success Button */
.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--m8crc-success);
    --bs-btn-border-color: var(--m8crc-success);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--m8crc-success);
    --bs-btn-hover-border-color: var(--m8crc-success);
    --bs-btn-focus-shadow-rgb: 21, 128, 61;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--m8crc-success);
    --bs-btn-active-border-color: var(--m8crc-success);
}

.btn-success:hover,
.btn-success:focus {
    filter: brightness(0.9);
}

/* Info Button */
.btn-info {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--m8crc-info);
    --bs-btn-border-color: var(--m8crc-info);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--m8crc-info);
    --bs-btn-hover-border-color: var(--m8crc-info);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--m8crc-info);
    --bs-btn-active-border-color: var(--m8crc-info);
}

.btn-info:hover,
.btn-info:focus {
    filter: brightness(0.9);
}

/* Warning Button */
.btn-warning {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--m8crc-warning);
    --bs-btn-border-color: var(--m8crc-warning);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--m8crc-warning);
    --bs-btn-hover-border-color: var(--m8crc-warning);
    --bs-btn-focus-shadow-rgb: 217, 119, 6;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--m8crc-warning);
    --bs-btn-active-border-color: var(--m8crc-warning);
}

.btn-warning:hover,
.btn-warning:focus {
    filter: brightness(0.9);
}

/* Danger Button */
.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--m8crc-danger);
    --bs-btn-border-color: var(--m8crc-danger);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--m8crc-danger);
    --bs-btn-hover-border-color: var(--m8crc-danger);
    --bs-btn-focus-shadow-rgb: 165, 15, 28;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--m8crc-danger);
    --bs-btn-active-border-color: var(--m8crc-danger);
}

.btn-danger:hover,
.btn-danger:focus {
    filter: brightness(0.9);
}

/* Outline Buttons */
.btn-outline-primary {
    --bs-btn-color: var(--m8crc-text-primary);
    --bs-btn-border-color: var(--m8crc-border-primary);
    --bs-btn-hover-color: var(--m8crc-text-on-primary);
    --bs-btn-hover-bg: var(--m8crc-primary);
    --bs-btn-hover-border-color: var(--m8crc-border-primary);
    --bs-btn-focus-shadow-rgb: 206, 17, 38;
    --bs-btn-active-color: var(--m8crc-text-on-primary);
    --bs-btn-active-bg: var(--m8crc-primary);
    --bs-btn-active-border-color: var(--m8crc-border-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--m8crc-text-secondary);
    --bs-btn-border-color: var(--m8crc-border-secondary);
    --bs-btn-hover-color: var(--m8crc-text-on-secondary);
    --bs-btn-hover-bg: var(--m8crc-secondary);
    --bs-btn-hover-border-color: var(--m8crc-border-secondary);
    --bs-btn-focus-shadow-rgb: 74, 74, 74;
    --bs-btn-active-color: var(--m8crc-text-on-secondary);
    --bs-btn-active-bg: var(--m8crc-secondary);
    --bs-btn-active-border-color: var(--m8crc-border-secondary);
}

.btn-outline-success {
    --bs-btn-color: var(--m8crc-success);
    --bs-btn-border-color: var(--m8crc-success);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--m8crc-success);
    --bs-btn-hover-border-color: var(--m8crc-success);
}

.btn-outline-info {
    --bs-btn-color: var(--m8crc-info);
    --bs-btn-border-color: var(--m8crc-info);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--m8crc-info);
    --bs-btn-hover-border-color: var(--m8crc-info);
}

.btn-outline-warning {
    --bs-btn-color: var(--m8crc-warning);
    --bs-btn-border-color: var(--m8crc-warning);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--m8crc-warning);
    --bs-btn-hover-border-color: var(--m8crc-warning);
}

.btn-outline-danger {
    --bs-btn-color: var(--m8crc-danger);
    --bs-btn-border-color: var(--m8crc-danger);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--m8crc-danger);
    --bs-btn-hover-border-color: var(--m8crc-danger);
}

/* Text utilities */
.text-primary {
    color: var(--m8crc-text-primary) !important;
}

.text-secondary {
    color: var(--m8crc-text-secondary) !important;
}

.text-muted {
    color: var(--m8crc-text-muted) !important;
}

/* Border utilities */
.border {
    border-color: var(--m8crc-border-subtle) !important;
}

.border-primary {
    border-color: var(--m8crc-border-primary) !important;
}

.border-secondary {
    border-color: var(--m8crc-border-secondary) !important;
}

/* Alerts */
.alert-primary {
    --bs-alert-color: var(--m8crc-primary);
    --bs-alert-bg: rgba(206, 17, 38, 0.1);
    --bs-alert-border-color: var(--m8crc-border-primary);
}

.alert-secondary {
    --bs-alert-color: var(--m8crc-secondary);
    --bs-alert-bg: rgba(74, 74, 74, 0.1);
    --bs-alert-border-color: var(--m8crc-border-secondary);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--m8crc-primary) !important;
    color: var(--m8crc-text-on-primary) !important;
}

.badge.bg-secondary {
    background-color: var(--m8crc-secondary) !important;
    color: var(--m8crc-text-on-secondary) !important;
}