/* Bootstrap Theme Customization - Fluent Up Application
 * This file overrides Bootstrap 5.3 CSS variables to match the app's design
 * Load this AFTER Bootstrap CSS but BEFORE base.css
 */

:root {
    /* Primary color palette - dark navy blue */
    --bs-primary: #003459;
    --bs-primary-rgb: 0, 52, 89;
    --bs-primary-bg-subtle: #e0e8ed;

    /* Secondary color - medium blue */
    --bs-secondary: #007ea7;
    --bs-secondary-rgb: 0, 126, 167;
    --bs-secondary-bg-subtle: #d9eef5;

    /* Success colors - teal-green that complements blue */
    --bs-success: #00a896;
    --bs-success-rgb: 0, 168, 150;
    --bs-success-bg-subtle: #d9f5f2;

    /* Warning colors - amber that complements blue */
    --bs-warning: #ffb347;
    --bs-warning-rgb: 255, 179, 71;
    --bs-warning-bg-subtle: #fff4e6;

    /* Danger/Error colors - coral-red that complements blue */
    --bs-danger: #ff6b6b;
    --bs-danger-rgb: 255, 107, 107;
    --bs-danger-bg-subtle: #ffe6e6;

    /* Info color - bright cyan-blue */
    --bs-info: #00a8e8;
    --bs-info-rgb: 0, 168, 232;
    --bs-info-bg-subtle: #d9f0fa;

    /* Body colors */
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #00171f;
    --bs-body-color-rgb: 0, 23, 31;

    /* Border radius */
    --bs-border-radius: 0.3rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;

    /* Shadows */
    --bs-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    /* Border color */
    --bs-border-color: #e0e8ed;

    /* Link color */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-secondary);

    /* Focus ring */
    --bs-focus-ring-color: rgba(0, 52, 89, 0.25);
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-width: 0.25rem;

    /* Spacing (Bootstrap default is 1rem) */
    --bs-spacer: 1rem;

    /* Font sizes (Bootstrap defaults) */
    --bs-font-size-base: 1rem;
    --bs-font-size-sm: 0.875rem;
    --bs-font-size-lg: 1.125rem;
    --bs-font-size-xl: 1.25rem;

    /* Font weights (Bootstrap defaults) */
    --bs-font-weight-normal: 400;
    --bs-font-weight-medium: 500;
    --bs-font-weight-semibold: 600;

    /* Z-index (Bootstrap defaults) */
    --bs-zindex-toast: 1080;
}

/* Dark mode using Bootstrap's data-bs-theme */
[data-bs-theme="dark"] {
    /* Primary color palette for dark mode - lighter navy blue */
    --bs-primary: #004d7a;
    --bs-primary-rgb: 0, 77, 122;
    --bs-primary-bg-subtle: #001a2e;

    /* Secondary color for dark mode - lighter medium blue */
    --bs-secondary: #0099cc;
    --bs-secondary-rgb: 0, 153, 204;
    --bs-secondary-bg-subtle: #002633;

    /* Success colors for dark mode - brighter teal-green */
    --bs-success: #00c4a3;
    --bs-success-rgb: 0, 196, 163;
    --bs-success-bg-subtle: #002a26;

    /* Warning colors for dark mode - brighter amber */
    --bs-warning: #ffc966;
    --bs-warning-rgb: 255, 201, 102;
    --bs-warning-bg-subtle: #332a1a;

    /* Danger/Error colors for dark mode - brighter coral-red */
    --bs-danger: #ff8080;
    --bs-danger-rgb: 255, 128, 128;
    --bs-danger-bg-subtle: #331a1a;

    /* Info color for dark mode - brighter cyan-blue */
    --bs-info: #00b8ff;
    --bs-info-rgb: 0, 184, 255;
    --bs-info-bg-subtle: #002633;

    /* Body colors for dark mode */
    --bs-body-bg: #00171f;
    --bs-body-bg-rgb: 0, 23, 31;
    --bs-body-color: #ffffff;
    --bs-body-color-rgb: 255, 255, 255;

    /* Border color for dark mode */
    --bs-border-color: #003459;

    /* Secondary text color for dark mode */
    --bs-secondary-color: #b3d9e6;
    --bs-heading-color: #ffffff;

    /* Shadows for dark mode */
    --bs-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.6);
}

/* Semi-transparent primary color for modern glassmorphism effect */
:root {
    --bs-primary-transparent: rgba(0, 52, 89, 0.85);
    --bs-primary-transparent-light: rgba(0, 52, 89, 0.7);
}

[data-bs-theme="dark"] {
    --bs-primary-transparent: rgba(0, 77, 122, 0.85);
    --bs-primary-transparent-light: rgba(0, 77, 122, 0.7);
}

/* Optimized navbar background - reduced blur */
.navbar.fixed-top {
    background: var(--bs-primary-transparent) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    /* Android safe area support */
    padding-top: calc(0.3rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(0.3rem + env(safe-area-inset-bottom, 0px));
}

/* Fallback for Android and browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(8px)) {
    .navbar.fixed-top {
        background: rgba(0, 52, 89, 0.95) !important;
    }
}

/* Android Chrome specific - ensure backdrop-filter works correctly */
@supports (-webkit-appearance: none) and (backdrop-filter: blur(8px)) {
    .navbar.fixed-top {
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        backdrop-filter: blur(8px) saturate(120%);
    }
}

/* Optimized footer background - reduced blur */
footer.fixed-bottom {
    background: var(--bs-primary-transparent) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    /* Android safe area support */
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* Fallback for Android and browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(8px)) {
    footer.fixed-bottom {
        background: rgba(0, 52, 89, 0.95) !important;
    }
}

/* Android Chrome specific - ensure backdrop-filter works correctly */
@supports (-webkit-appearance: none) and (backdrop-filter: blur(8px)) {
    footer.fixed-bottom {
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        backdrop-filter: blur(8px) saturate(120%);
    }
}

/* Body background - subtle solid color instead of gradient */
body {
    background: var(--bs-primary);
}

/* Bootstrap Button Styling - Ensure buttons use the new color scheme */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

.btn-info {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

.btn-warning {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #ffc966;
    border-color: #ffc966;
}

.btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #ff8080;
    border-color: #ff8080;
}

/* Outline Button Styling - Use same color variables */
.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
}

.btn-outline-secondary {
    color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: white;
}

.btn-outline-info {
    color: var(--bs-info);
    border-color: var(--bs-info);
    background-color: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
}

.btn-outline-success {
    color: var(--bs-success);
    border-color: var(--bs-success);
    background-color: transparent;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: white;
}

.btn-outline-warning {
    color: var(--bs-warning);
    border-color: var(--bs-warning);
    background-color: transparent;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: #ffc966;
    border-color: #ffc966;
    color: white;
}

.btn-outline-danger {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
    background-color: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: #ff8080;
    border-color: #ff8080;
    color: white;
}

/* ============================================
   Narrative Reader Theming
   ============================================ */

/* Sentence container active state - uses Bootstrap theme colors */
[data-sentence-index].active {
    background-color: var(--bs-secondary-bg);
    border-left-color: var(--bs-primary) !important;
    border-left-width: 4px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Sentence container hover state */
[data-sentence-index]:hover:not(.active) {
    background-color: var(--bs-secondary-bg);
    border-left-color: var(--bs-primary);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Cursor pointer for clickable sentence containers */
[data-sentence-index] {
    cursor: pointer;
}