/* ==========================================================================
   Wiser Lab - Custom Styling & Bootstrap Theme Overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Variables & Color System
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-primary: #007399;
    --bs-primary-rgb: 0, 115, 153;
    --bs-link-color: #007399;
    --bs-link-hover-color: #00506b;
    --bs-secondary-color: #555555;
    --bs-tertiary-color: #6c757d;
    --bs-code-color: #b82e6f;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #f8f9fa;
    --bs-tertiary-bg: #22252a;
    --bs-secondary-bg: #2d3238;
    --bs-border-color: #373b3e;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-primary: #3dbde2;
    --bs-primary-rgb: 61, 189, 226;
    --bs-primary-text-emphasis: #7ad7f0;
    --bs-primary-bg-subtle: rgba(61, 189, 226, 0.15);
    --bs-primary-border-subtle: rgba(61, 189, 226, 0.3);
    --bs-secondary-color: #adb5bd;
    --bs-tertiary-color: #8e959d;
    --bs-link-color: #7ad7f0;
    --bs-link-hover-color: #b3ebf8;
    --bs-code-color: #f18bba;
}

/* --------------------------------------------------------------------------
   2. Motion & Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .spinner-border, .spinner-grow {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   3. Base Layout & Utilities
   -------------------------------------------------------------------------- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

.nav-link {
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    font-weight: 700 !important;
}

/* Letter Spacing Utilities */
.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

/* Navbar Links Hover Effect & Brand */
.navbar-brand {
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    font-size: 1.15rem;
}

.navbar .nav-link {
    font-weight: 700 !important;
    letter-spacing: 0.05em;
}

.navbar .nav-link,
.navbar-brand {
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.navbar .nav-link:hover,
.navbar-brand:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   4. Components & Forms
   -------------------------------------------------------------------------- */
/* Dropdown Menus */
.dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
}

[data-bs-theme="dark"] .dropdown-menu {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

.dropdown-menu .dropdown-item {
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    padding: 0.55rem 1.25rem;
    color: var(--bs-body-color);
    font-size: 0.9rem;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.dropdown-menu .dropdown-header {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dropdown-menu .dropdown-item-text {
    font-weight: 600;
    font-size: 0.85rem;
}

/* Light mode dropdown hover & focus (Bootswatch Yeti style) */
.dropdown-menu .dropdown-item:hover:not(.disabled),
.dropdown-menu .dropdown-item:focus:not(.disabled) {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.dropdown-menu .dropdown-item:hover:not(.disabled) i,
.dropdown-menu .dropdown-item:hover:not(.disabled) span,
.dropdown-menu .dropdown-item:focus:not(.disabled) i,
.dropdown-menu .dropdown-item:focus:not(.disabled) span {
    color: #ffffff !important;
}

/* Light mode active dropdown item (Bootswatch Yeti style) */
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.dropdown-menu .dropdown-item.active i,
.dropdown-menu .dropdown-item.active span,
.dropdown-menu .dropdown-item.active small,
.dropdown-menu .dropdown-item:active i,
.dropdown-menu .dropdown-item:active span,
.dropdown-menu .dropdown-item:active small {
    color: #ffffff !important;
}

/* Dark mode dropdown hover, focus & active */
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover:not(.disabled),
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus:not(.disabled),
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:active {
    background-color: var(--bs-primary) !important;
    color: #1a1a1a !important;
    font-weight: 600;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover:not(.disabled) i,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover:not(.disabled) span,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus:not(.disabled) i,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus:not(.disabled) span,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.active i,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.active span,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:active i,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:active span {
    color: #1a1a1a !important;
}

/* Logout & Danger dropdown items */
.dropdown-menu .dropdown-item.text-danger {
    color: #dc3545 !important;
}

.dropdown-menu .dropdown-item.text-danger i {
    color: #dc3545 !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger {
    color: #ff8787 !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger i {
    color: #ff8787 !important;
}

.dropdown-menu .dropdown-item.text-danger:hover:not(.disabled),
.dropdown-menu .dropdown-item.text-danger:focus:not(.disabled),
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger:hover:not(.disabled),
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger:focus:not(.disabled) {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

.dropdown-menu .dropdown-item.text-danger:hover:not(.disabled) i,
.dropdown-menu .dropdown-item.text-danger:focus:not(.disabled) i,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger:hover:not(.disabled) i,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger:focus:not(.disabled) i {
    color: #ffffff !important;
}

/* Form Inputs (Light & Dark mode harmonization) */
[data-bs-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] textarea {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid #6c757d;
}

[data-bs-theme="dark"] input::placeholder,
[data-bs-theme="dark"] textarea::placeholder {
    color: var(--bs-secondary-color);
}

[data-bs-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-bs-theme="light"] select,
[data-bs-theme="light"] textarea,
[data-bs-theme="light"] .input-group-text {
    background-color: #ffffff;
    color: var(--bs-body-color);
    border: 1px solid #6c757d;
}

[data-bs-theme="light"] input::placeholder,
[data-bs-theme="light"] textarea::placeholder {
    color: #6c757d;
    opacity: 1;
}

[data-bs-theme="dark"] .form-check-input:not(:checked) {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

/* Accessible semantic text colors routing through theme-aware variables */
.text-info {
    color: var(--bs-info-text-emphasis) !important;
}

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

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

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

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

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

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

/* Form Validation & Alerts */
[data-bs-theme="dark"] .invalid-feedback {
    color: #ff8787;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    color: #ff8787;
    border-color: rgba(220, 53, 69, 0.3);
}

[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffda6a;
    border-color: rgba(255, 193, 7, 0.2);
}

[data-bs-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: #4dd4ac;
    border-color: rgba(25, 135, 84, 0.2);
}

[data-bs-theme="dark"] .alert-info {
    background-color: rgba(91, 192, 222, 0.12);
    color: #7ad7f0;
    border-color: rgba(91, 192, 222, 0.25);
}

[data-bs-theme="dark"] .alert-secondary {
    background-color: rgba(255, 255, 255, 0.05);
    color: #c0c5ca;
    border-color: rgba(255, 255, 255, 0.15);
}

.social-icon {
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.social-icon:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

.btn {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .btn:hover:not(:disabled) {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

/* Back to Top Button */
#backToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(20px);
    width: 45px;
    height: 45px;
}

#backToTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   6. Shared Sidebar Layout
   -------------------------------------------------------------------------- */
.sidebar-wrapper {
    top: 20px;
    z-index: 10;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.sidebar-header {
    top: 0;
    z-index: 2;
    position: sticky;
    letter-spacing: 0.05em;
}

.sidebar-nav-link {
    transition: color 0.15s ease-in-out;
}

.sidebar-nav-link.active-scroll {
    color: var(--bs-primary) !important;
    font-weight: 800 !important;
}

.active-header {
    color: var(--bs-primary) !important;
}

/* --------------------------------------------------------------------------
   7. Hero Background & Keyframe Animations
   -------------------------------------------------------------------------- */
.hero-animated-bg {
    background: linear-gradient(-45deg, #ffffff, #f1f5f9, #e2e8f0, #f8f9fa);
    background-size: 400% 400%;
    border-radius: 1rem;
}

[data-bs-theme="dark"] .hero-animated-bg {
    background: linear-gradient(-45deg, #1b1e22, #24282d, #2e333a, #202428);
}

.hero-animated-bg .btn-outline-primary {
    background-color: var(--bs-body-bg);
}

.hero-animated-bg .btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .hero-animated-bg .btn-outline-primary:hover {
    color: #1a1a1a !important;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-animated-bg {
        animation: gradientBG 15s ease infinite;
    }
}

@keyframes slideUpFadeIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    .slide-up-fade-in {
        animation: slideUpFadeIn 0.5s ease-out forwards;
    }
}

/* --------------------------------------------------------------------------
   8. AI Agent Cards
   -------------------------------------------------------------------------- */
.agent-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.agent-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.agent-icon-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   9. Status Indicator & Pulse Dot
   -------------------------------------------------------------------------- */
.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.7);
    vertical-align: middle;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pulse-dot {
        animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    }
}

/* --------------------------------------------------------------------------
   10. Code Blocks & Prism Syntax Highlighting Integration
   -------------------------------------------------------------------------- */
code:not(pre code) {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
    padding: 0.15em 0.35em;
    border-radius: 0.25rem;
    background-color: var(--bs-tertiary-bg);
}

pre[class*="language-"],
code[class*="language-"] {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    text-shadow: none !important;
}

.card-body pre[class*="language-"] {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.card-body code[class*="language-"] {
    background: transparent !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   11. Card Theme Harmonization & Readability
   -------------------------------------------------------------------------- */
/* Standard cards in dark theme */
[data-bs-theme="dark"] .card:not(.bg-dark):not(.bg-black) {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

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

[data-bs-theme="dark"] .card-header:not(.bg-dark):not(.bg-warning-subtle):not(.bg-primary) {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .card-footer:not(.bg-dark):not(.bg-primary) {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Dark cards & Code snippet containers - high contrast in both light & dark mode */
.card.bg-dark,
.card.text-white.bg-dark,
.card.bg-black {
    background-color: #2b2e33 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8f9fa !important;
}

.card.bg-dark .card-header,
.card.text-white.bg-dark .card-header,
.card.bg-black .card-header {
    background-color: #22252a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.card.bg-dark .card-body,
.card.text-white.bg-dark .card-body,
.card.bg-black .card-body {
    color: #f8f9fa !important;
}

.card.bg-dark .text-muted,
.card.bg-dark .text-secondary,
.card.bg-dark .text-body-secondary,
.card.bg-dark .text-white-50,
.card.text-white .text-muted,
.card.text-white .text-secondary,
.card.text-white .text-body-secondary,
.card.text-white .text-white-50,
.bg-dark .text-muted,
.bg-dark .text-secondary,
.bg-dark .text-white-50 {
    color: #c0c5ca !important;
}

.card.bg-dark .text-primary,
.card.bg-dark [style*="--bs-primary"],
.card.bg-dark [style*="--bs-primary-text-emphasis"],
.card.text-white .text-primary,
.card.text-white [style*="--bs-primary"],
.card.text-white [style*="--bs-primary-text-emphasis"],
.bg-dark .text-primary,
.bg-dark [style*="--bs-primary"],
.bg-dark [style*="--bs-primary-text-emphasis"],
[style*="background-color: #0d0d0d"] .text-primary {
    color: #7ad7f0 !important;
}

.card.bg-dark .text-success,
.card.text-white.bg-dark .text-success,
.card.bg-black .text-success,
.bg-dark .text-success {
    color: #4dd4ac !important;
}

.card.bg-dark .text-info,
.card.text-white.bg-dark .text-info,
.card.bg-black .text-info,
.bg-dark .text-info {
    color: #7ad7f0 !important;
}

.card.bg-dark .text-warning,
.card.text-white.bg-dark .text-warning,
.card.bg-black .text-warning,
.bg-dark .text-warning {
    color: #ffda6a !important;
}

.card.bg-dark .text-danger,
.card.text-white.bg-dark .text-danger,
.card.bg-black .text-danger,
.bg-dark .text-danger {
    color: #ff8787 !important;
}

.card.bg-dark code,
.card.bg-dark pre,
.card.text-white code,
.card.text-white pre {
    color: #f8f9fa;
}

.card.bg-dark .btn-outline-secondary,
.card.text-white .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #dee2e6 !important;
}

.card.bg-dark .btn-outline-secondary:hover,
.card.text-white .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
    12. WCAG AA Contrast Fixes (Light & Dark)
    -------------------------------------------------------------------------- */
/* Yeti compiles hardcoded component colors (#008cba) which only reach 3.85:1
   with white labels. Darken filled primary buttons to #007399 (5.4:1). */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #007399;
    --bs-btn-border-color: #007399;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00698c;
    --bs-btn-hover-border-color: #006282;
    --bs-btn-focus-shadow-rgb: 0, 115, 153;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #006282;
    --bs-btn-active-border-color: #00597a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #007399;
    --bs-btn-disabled-border-color: #007399;
}

.btn-outline-primary {
    --bs-btn-color: #007399;
    --bs-btn-border-color: #007399;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #007399;
    --bs-btn-hover-border-color: #007399;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #007399;
    --bs-btn-active-border-color: #007399;
    --bs-btn-focus-shadow-rgb: 0, 115, 153;
    --bs-btn-disabled-color: #007399;
}

/* Dark mode: light cyan surface with dark labels (7.9:1). */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #1a1a1a;
    --bs-btn-bg: #3dbde2;
    --bs-btn-border-color: #3dbde2;
    --bs-btn-hover-color: #1a1a1a;
    --bs-btn-hover-bg: #5ccbe4;
    --bs-btn-hover-border-color: #5ccbe4;
    --bs-btn-focus-shadow-rgb: 61, 189, 226;
    --bs-btn-active-color: #1a1a1a;
    --bs-btn-active-bg: #7ad7f0;
    --bs-btn-active-border-color: #7ad7f0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #1a1a1a;
    --bs-btn-disabled-bg: #3dbde2;
    --bs-btn-disabled-border-color: #3dbde2;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #3dbde2;
    --bs-btn-border-color: #3dbde2;
    --bs-btn-hover-color: #1a1a1a;
    --bs-btn-hover-bg: #3dbde2;
    --bs-btn-hover-border-color: #3dbde2;
    --bs-btn-active-color: #1a1a1a;
    --bs-btn-active-bg: #3dbde2;
    --bs-btn-active-border-color: #3dbde2;
    --bs-btn-focus-shadow-rgb: 61, 189, 226;
    --bs-btn-disabled-color: #3dbde2;
}

/* Yeti ghost-secondary labels are #eee (1.2:1 on white) - unreadable in light. */
[data-bs-theme="light"] .btn-outline-secondary {
    --bs-btn-color: #555555;
    --bs-btn-border-color: #6c757d;
}

/* White labels on filled primary surfaces (.badge, .progress-bar) in dark. */
[data-bs-theme="dark"] .bg-primary.text-white {
    color: #1a1a1a !important;
}

/* Focus indicators: Yeti's #80c6dd ring is ~1.7:1 on white (needs 3:1). */
[data-bs-theme="light"] .form-control:focus {
    border-color: #007399;
    box-shadow: 0 0 0 0.25rem rgba(0, 115, 153, 0.25);
}

[data-bs-theme="light"] .form-check-input:focus {
    border-color: #007399;
    box-shadow: 0 0 0 0.25rem rgba(0, 115, 153, 0.25);
}