/* Mind Mend Custom Styles */

:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --info-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
}

/* Enhanced Body and Background */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Override Bootstrap container background */
.container, .container-fluid {
    background-color: transparent !important;
}

/* Beautiful Cards with Glassmorphism */
.card {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease;
    color: #fff !important;
}

.card-body {
    color: #fff !important;
}

/* Live chat in the transparent-glass theme: .card-body forces white text, but the AI side of
   the /session live chat renders on a near-white bubble (bg-light) - that turned AI messages
   white-on-light and unreadable. Restore dark text on the light bubble (and scope the selector
   to the chat interface so normal white-on-glass cards are untouched). */
.chat-interface .ai-message-bubble {
    color: #212529 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.chat-interface .ai-message-bubble .chat-sender-label {
    color: rgba(0, 0, 0, 0.6) !important;
}

.card-title {
    color: #fff !important;
}

.card-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* Dashboard layout: keep premium cards and their text in a predictable reading grid. */
.dashboard-page {
    min-width: 0;
}

.dashboard-page .card {
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

.dashboard-page .card:hover {
    transform: none;
}

.dashboard-page .card-header {
    min-height: 3.25rem;
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
}

.dashboard-page .card-header h5,
.dashboard-page .card-header h6 {
    margin: 0;
    line-height: 1.35;
}

.dashboard-page .card-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-page .list-group-item > .d-flex {
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.dashboard-page .list-group-item > .d-flex > :first-child {
    min-width: 0;
    flex: 1 1 14rem;
}

.dashboard-page .list-group-item > .d-flex > .text-end {
    flex: 0 1 auto;
    max-width: 100%;
}

.dashboard-page .btn {
    white-space: normal;
}

.dashboard-page .table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

.dashboard-page .modal .form-control,
.dashboard-page .modal .form-range {
    max-width: 100%;
}

@media (max-width: 576px) {
    .dashboard-page .card-body {
        padding: 1rem;
    }

    .dashboard-page .card-header .d-flex {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .dashboard-page .list-group-item > .d-flex > .text-end {
        flex-basis: 100%;
        text-align: left !important;
    }
}

/* Enhanced Navigation */
.navbar {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* backdrop-filter makes the navbar its own stacking context, so its dropdowns can only
       be as high as the navbar itself. Without a z-index, the glass cards further down the
       page (which also use backdrop-filter) were painted over the open menus. */
    position: relative;
    z-index: 1030;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Enhanced Buttons with Better Contrast */
.btn-primary {
    background: var(--primary-gradient);
    border: none;
    border-radius: 25px;
    padding: 10px 25px;
    font-weight: 700;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

.btn-warning {
    background: var(--warning-gradient);
    border: none;
    border-radius: 25px;
    color: #1a252f !important;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-success {
    background: var(--success-gradient);
    border: none;
    border-radius: 25px;
    color: #1a252f !important;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.btn-danger {
    background: var(--danger-gradient);
    border: none;
    border-radius: 25px;
    color: #1a252f !important;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.btn-info {
    background: var(--info-gradient);
    border: none;
    border-radius: 25px;
    color: #1a252f !important;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

/* Outline Buttons - Bootstrap's default outline styles (colored text/border on a transparent
   background) were never adapted for this dark, translucent-glass theme, so 16 templates using
   btn-outline-* inherited gray-on-gray or dark-on-dark combinations that can be nearly unreadable
   - e.g. premium.html's disabled "Current Plan" button (btn-outline-secondary, further faded by
   Bootstrap's default 0.65 disabled opacity on top of the .card's already-translucent background).
   Use light, theme-matching colors for text/border instead of Bootstrap's defaults. */
.btn-outline-primary {
    color: #b3c0f7 !important;
    border-color: #b3c0f7 !important;
}
.btn-outline-primary:hover {
    background: var(--primary-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.btn-outline-secondary {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.btn-outline-success {
    color: #7de3a8 !important;
    border-color: #7de3a8 !important;
}
.btn-outline-success:hover {
    background: var(--success-gradient) !important;
    color: #1a252f !important;
    border-color: transparent !important;
}

.btn-outline-danger {
    color: #ffa8c0 !important;
    border-color: #ffa8c0 !important;
}
.btn-outline-danger:hover {
    background: var(--danger-gradient) !important;
    color: #1a252f !important;
    border-color: transparent !important;
}

.btn-outline-warning {
    color: #ffe28f !important;
    border-color: #ffe28f !important;
}
.btn-outline-warning:hover {
    background: var(--warning-gradient) !important;
    color: #1a252f !important;
    border-color: transparent !important;
}

.btn-outline-info {
    color: #b6efec !important;
    border-color: #b6efec !important;
}
.btn-outline-info:hover {
    background: var(--info-gradient) !important;
    color: #1a252f !important;
    border-color: transparent !important;
}

.btn-outline-dark {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}
.btn-outline-dark:hover {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
}

.btn-outline-light {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}
.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* Bootstrap's default disabled-button opacity (0.65) is too aggressive on top of this theme's
   already-translucent glass surfaces - raise the floor so disabled text stays legible instead of
   fading into the background. */
.btn:disabled, .btn.disabled {
    opacity: 0.85 !important;
}

/* Enhanced Jumbotron/Hero Section */
.jumbotron {
    background: var(--primary-gradient);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Card Headers with Gradients */
.card-header.bg-primary {
    background: var(--primary-gradient) !important;
    border-radius: 15px 15px 0 0 !important;
}

.card-header.bg-danger {
    background: var(--danger-gradient) !important;
    color: #2c3e50 !important;
    border-radius: 15px 15px 0 0 !important;
}

.card-header.bg-success {
    background: var(--success-gradient) !important;
    color: #2c3e50 !important;
    border-radius: 15px 15px 0 0 !important;
}

.card-header.bg-info {
    background: var(--info-gradient) !important;
    color: #2c3e50 !important;
    border-radius: 15px 15px 0 0 !important;
}

.card-header.bg-warning {
    background: var(--warning-gradient) !important;
    color: #2c3e50 !important;
    border-radius: 15px 15px 0 0 !important;
}

/* Enhanced Form Controls */
.form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    backdrop-filter: blur(10px);
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    color: #fff;
}

.form-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
}

/* Enhanced Alerts */
.alert {
    border-radius: 15px;
    border: none;
    backdrop-filter: blur(10px);
}

.alert-info {
    background: linear-gradient(135deg, rgba(168, 237, 234, 0.8) 0%, rgba(254, 214, 227, 0.8) 100%);
    color: #2c3e50;
}

.alert-success {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.8) 0%, rgba(0, 242, 254, 0.8) 100%);
    color: #2c3e50;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.8) 0%, rgba(56, 249, 215, 0.8) 100%);
    color: #2c3e50;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(250, 112, 154, 0.8) 0%, rgba(254, 225, 64, 0.8) 100%);
    color: #2c3e50;
}

/* Enhanced Badges */
.badge {
    border-radius: 20px;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

/* Beautiful Footer */
footer {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animation Classes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Loading Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
    .jumbotron {
        padding: 2rem 1rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }

    body {
        background-attachment: scroll !important;
    }

    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 600px;
    }
}

/* Chat Interface Styling */
.chat-interface .card {
    border-radius: 20px;
}

.chat-message {
    max-width: 80%;
    margin-bottom: 1rem;
    padding: 12px 18px;
    border-radius: 18px;
    backdrop-filter: blur(10px);
}

.chat-message.user {
    background: var(--primary-gradient);
    margin-left: auto;
    border-bottom-right-radius: 5px;
}

.chat-message.ai {
    background: rgba(255, 255, 255, 0.1);
    border-bottom-left-radius: 5px;
}

/* Progress Bars */
.progress {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.progress-bar {
    background: var(--primary-gradient);
    border-radius: 10px;
}

/* Tables */
.table-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

/* Modal Enhancements */
.modal-content {
    background: rgba(33, 37, 41, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
}

/* Dropdown Menus */
.dropdown-menu {
    background: rgba(33, 37, 41, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gradient);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-gradient);
}

/* Additional Button Contrast Fixes */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Text Contrast Improvements */
.text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.text-dark {
    color: #1a252f !important;
}

/* Nav Link Contrast */
.nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
}

.nav-link:hover {
    color: #ffffff !important;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.9) !important;
}

.dropdown-item:hover {
    background: rgba(102, 126, 234, 0.8) !important;
    color: #ffffff !important;
}

/* Form Label Contrast */
.form-label {
    color: #ffffff !important;
    font-weight: 600;
}

/* Crisis Resources Styling */
.crisis-resources li {
    margin-bottom: 8px;
    padding: 4px 0;
}

.crisis-resources strong {
    color: #ffffff !important;
}
/* Base text colour. Bootstrap 5.3.0's dark theme sets body text to #adb5bd, which is what
   every heading and paragraph without its own colour inherited - page titles such as "Your
   Mental Health Dashboard" were grey on the purple gradient and close to invisible. Elements
   that set their own colour (alerts, light cards, the chat bubble) are unaffected. */
[data-bs-theme=dark] {
    --bs-body-color: #f1f3f5;
    --bs-body-color-rgb: 241, 243, 245;
}

/* Badges used as status pills sit in flex rows next to buttons; stretched to the row's
   height their text sat at the top of a tall coloured block. */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.d-flex > .badge {
    align-self: center;
}

/* Activity steppers start at 0%, which hid the "Step 0/N" label inside an empty bar. */
#progressBar {
    min-width: 5rem;
}

/* Colour helpers the activity pages use but nothing defined, so PMR and art therapy
   rendered with unstyled headers and invisible-on-glass buttons. */
.bg-teal { background: linear-gradient(135deg, #20c997 0%, #38f9d7 100%) !important; }
.bg-purple { background: linear-gradient(135deg, #8e6be8 0%, #c56cf0 100%) !important; color: #fff; }
.alert-teal { background: linear-gradient(135deg, rgba(32, 201, 151, 0.8) 0%, rgba(56, 249, 215, 0.8) 100%); color: #2c3e50; }
.alert-purple { background: linear-gradient(135deg, rgba(142, 107, 232, 0.85) 0%, rgba(197, 108, 240, 0.85) 100%); color: #fff; }
.btn-teal, .btn-purple {
    border: none;
    border-radius: 25px;
    font-weight: 700;
}
.btn-teal { background: linear-gradient(135deg, #20c997 0%, #38f9d7 100%); color: #1a252f !important; }
.btn-purple { background: linear-gradient(135deg, #8e6be8 0%, #c56cf0 100%); color: #fff !important; }
.btn-outline-teal { color: #7ff0d0 !important; border-color: #7ff0d0 !important; }
.btn-outline-purple { color: #d9c6ff !important; border-color: #d9c6ff !important; }
.btn-outline-teal:hover, .btn-outline-purple:hover { background: rgba(255, 255, 255, 0.15) !important; color: #fff !important; }

/* Fixed-size canvases (the individual-therapy emotion and biometric charts are 400px wide)
   pushed the page wider than a phone, which also dragged position:fixed widgets such as
   the speaking avatar off the right edge. */
canvas {
    max-width: 100%;
}
.card canvas:not([style*="height"]) {
    height: auto;
}

@media (max-width: 576px) {
    /* Button and badge groups in page headers wrap rather than squash their labels. */
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-wrap: wrap;
    }

    /* The floating speaking avatar is 108x175; at full size it covered form fields and
       buttons at the bottom right of every page that loads it. */
    .truekindred-avatar-container {
        transform: scale(0.7) !important;
        transform-origin: bottom right;
    }
}