/* speeddating_app/assets/css/style.css */

/* Google Fonts Import for Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Custom styles for the Speed Dating Matcher application */

:root {
    --bs-primary: #5A2C85; /* Dark Purple for primary actions */
    --bs-secondary: #FF4500; /* Bright Red/Orange for accent */
    --bs-success: #28a745;   /* Keep green for success, or pick a darker shade */
    --bs-danger: #DC143C;    /* Deeper Red for danger */
    --bs-warning: #FFD700;   /* Gold for warning */
    --bs-info: #00BFFF;      /* Deep Sky Blue for info */
    --bs-light: #F0F0F0;     /* Lighter gray for light elements */
    --bs-dark: #202020;      /* Darker gray for dark elements */
    --bs-body-color: #E0E0E0; /* Light gray text for dark background */
    --bs-font-sans-serif: 'Roboto', sans-serif; /* Changed to Roboto */
    /* --bs-font-serif: 'Playfair Display', serif; /* Removed serif font variable */
}

/* General Body Styling */
body {
    font-family: var(--bs-font-sans-serif); /* Apply Roboto to the body */
    background-image: url('https://static.wixstatic.com/media/c837a6_0a7bb11405ce4b8eaba4e1b3e5373f99~mv2.jpg/v1/fill/w_2880,h_1626,fp_0.50_0.43,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/allan-francis-rNlZFrzjexU-unsplash%20(1).jpg'); /* A subtle, dark abstract image */
    background-size: cover;          /* Cover the entire element */
    background-position: center center; /* Center the image */
    background-attachment: fixed;    /* Keep the image fixed when scrolling */
    color: var(--bs-body-color); /* General body text color for non-card elements (on dark background) */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Main content area */
main {
    flex-grow: 1;
}

/* Specific H1 styling for titles outside of cards */
main h1 {
    color: #FFFFFF; /* Changed to white */
}


/* Header Styling */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

/* Buttons */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    transition: all 0.3s ease;
    color: #FFFFFF !important; /* Ensure text is light/white */
    font-family: var(--bs-font-sans-serif); /* Keep Roboto for buttons for readability */
}
.btn-primary:hover {
    background-color: #4C246E !important; /* Slightly darker purple on hover */
    border-color: #4C246E !important;
    transform: translateY(-2px); /* Slight lift effect */
}
.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(90, 44, 133, 0.25) !important; /* Purple focus ring */
}

.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #FFFFFF !important; /* Ensure text is light/white */
    font-family: var(--bs-font-sans-serif); /* Keep Roboto for buttons */
}
.btn-success:hover {
    background-color: #218838; /* Darker green */
    border-color: #1e7e34;
}

.btn-outline-success {
    color: var(--bs-success);
    border-color: var(--bs-success);
    font-family: var(--bs-font-sans-serif); /* Keep Roboto for buttons */
}
.btn-outline-success:hover {
    background-color: var(--bs-success);
    color: #fff;
}
.btn-outline-success.active {
    background-color: var(--bs-success) !important;
    color: #fff !important;
    border-color: var(--bs-success) !important;
}

.btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #FFFFFF !important; /* Ensure text is light/white */
    font-family: var(--bs-font-sans-serif); /* Keep Roboto for buttons */
}
.btn-danger:hover {
    background-color: #B21232; /* Darker red */
    border-color: #A6102D;
}

.btn-outline-danger {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
    font-family: var(--bs-font-sans-serif); /* Keep Roboto for buttons */
}
.btn-outline-danger:hover {
    background-color: var(--bs-danger);
    color: #fff;
}
.btn-outline-danger.active {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
    border-color: var(--bs-danger) !important;
}


/* Card Styling */
.card {
    border-radius: 1rem; /* More rounded corners */
    overflow: hidden;
    background-color: #FFFDD0; /* Light creme color for card background - this will be overridden by .card-body for its area */
    color: #333333; /* Default dark text color for cards, for readability on creme */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.2)!important; /* Adjust shadow for light card */
}

/* Card Header - often uses primary color, so text should be light */
.card-header {
    border-bottom: none; /* Remove default border */
    color: #FFFFFF; /* Changed to white */
}

.card-title {
    color: #FFFFFF; /* Changed to white */
    font-family: var(--bs-font-sans-serif); /* Apply Roboto to card titles */
}

/* Text elements within card body, default to dark for readability on creme */
.card-text,
.card-body label, /* Labels within card bodies */
.card-footer p, /* Text in footer if any */
.card-footer small, /* Small text in footer */
.card-body a { /* Links inside card body */
    color: #333333; /* Darker text for better readability on creme background */
    font-family: var(--bs-font-sans-serif); /* Apply Roboto to general card text for readability */
}

/* Override specific text colors on cards (e.g., Bootstrap's text-muted) */
.card-body .text-muted {
    color: #555555 !important; /* Slightly lighter dark for muted text, adjust as needed */
}

/* Ensure the text within the "About Me" box on participant cards remains readable */
.participant-card .card-text.small.text-start.p-2.border.rounded-3.bg-light {
    background-color: #EEEEEE !important; /* Lighter background for about me box on creme card */
    border-color: #DDDDDD !important; /* Lighter border for about me box */
    color: #333333 !important; /* Dark text for readability */
}


/* Form Controls - inside cards */
.form-control, .form-select {
    border-radius: 0.5rem; /* Slightly rounded */
    padding: 0.75rem 1rem;
    border-color: #CCCCCC; /* Light border for inputs on creme background */
    background-color: #FFFFFF; /* White input background on creme card */
    color: #333333; /* Dark text for inputs */
    font-family: var(--bs-font-sans-serif); /* Apply Roboto to form inputs */
}

.form-control:focus, .form-select:focus {
    border-color: var(--bs-secondary); /* Bright red focus border */
    box-shadow: 0 0 0 0.25rem rgba(255, 69, 0, 0.25); /* Bright red focus shadow */
}

textarea.form-control {
    resize: vertical;
}

/* Image styling */
.rounded-circle {
    object-fit: cover; /* Ensures images fill their space without distortion */
    border: 3px solid var(--bs-secondary); /* Bright red border */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; /* More subtle shadow for light theme */
}

/* Specific styling for participant cards */
.participant-card .card-img-top {
    border: none; /* Override default image border */
}
.participant-card .card-body {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: #333333; /* Default text color for participant card body */
}
/* This rule exists already, but including for clarity if needed to override */
.participant-card .card-text.small {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #555555; /* Ensure muted small text is readable */
}


/* Alerts */
.alert-success {
    background-color: #D4EDDA; /* Light green background */
    border-color: #C3E6CB;
    color: #155724; /* Dark green text */
}
.alert-danger {
    background-color: #F8D7DA; /* Light red background */
    border-color: #F5C6CB;
    color: #721C24; /* Dark red text */
}
.alert-info {
    background-color: #D1ECF1; /* Light blue background */
    border-color: #BEE5EB;
    color: #0C5460; /* Dark blue text */
}
.alert-warning {
    background-color: #FFF3CD; /* Light yellow background */
    border-color: #FFEEDB;
    color: #856404; /* Dark yellow text */
}


/* Links */
a {
    color: var(--bs-secondary); /* Bright red links */
}
a:hover {
    color: #CC3700; /* A darker shade of FF4500 */
}

/* Footer */
footer {
    background-color: #F0F0F0 !important; /* Lighter footer background */
    color: #333333; /* Darker text for footer */
}


/* Utilities */
.object-fit-cover {
    object-fit: cover;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Specific styling for the registration page card body */
/* This targets the card on the registration page specifically */
#userRegistrationForm .card-body {
    background-color: #F8F8F8; /* Whiter, but not completely white */
    color: #333333; /* Ensure text remains dark for readability on lighter background */
}

/* New rule for overall card-body background */
.card-body {
    background-color: #e0e2eb; /* New background color for card-body */
}