/* /Applications/MAMP/htdocs/reports/main.css
    Purpose: General styles for public/root pages (background, auth cards, forms, buttons, links)
    Notes: Keep images in /Applications/MAMP/htdocs/reports/images/ and adjust paths if moving file.
*/

/* =========================================================
    main.css - General Styles for Public/Root Pages
    ========================================================= */

/* --- 1. COLOR VARIABLES ---
    Define semantic color variables here so theme can be adjusted easily.
    Use descriptive names (accent vs main vs navy) to know intended usage.
*/
:root {
    --baby-blue: #68bbe3;
    /* Light/Accent Blue (used for highlights) */
    --blue-grotto: #0e86d4;
    /* Button/Interactive Blue (primary CTAs) */
    --blue-main: #055c9d;
    /* Mid Blue (borders / subtle accents) */
    --navy-blue: #003060;
    /* Dark Background Blue (deep background tones) */
    --text-light: #fff;
    /* Primary text color on dark backgrounds */
    --text-muted: rgba(255, 255, 255, 0.6);
    /* Secondary/muted text */
}

/* --- 2. GLOBAL BODY & BACKGROUND ---
    Background uses a dark gradient overlay to ensure text contrast when
    an image is present. background-attachment: fixed adds a parallax-like feel.
*/
body {
    /* Consistent dark background with image overlay for contrast */
    background: linear-gradient(rgba(55, 81, 107, 0.9),
            rgba(2, 78, 153, 0.85)),
        url('../images/img-1.jpg');
    /* Adjust path if image moved */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* Keep the image fixed on scroll */
    color: var(--text-light);
    min-height: 100vh;

    /* Center content for auth pages; for full sites remove flex if not desired */
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: Arial, sans-serif;
    /* System fallback for performance */
}

/* --- 3. REUSABLE CONTAINER STYLES (for login/register cards) ---
    .auth-container creates a "glass" card with slight border and shadow.
    Keep max-width for readability on large screens; width 100% for smaller ones.
*/
.auth-container {
    background: rgba(0, 0, 0, 0.4);
    /* translucent panel */
    border: 1px solid rgba(104, 187, 227, 0.3);
    /* subtle highlight */
    border-radius: 10px;
    padding: 30px;
    max-width: 550px;
    /* controls card width on wide viewports */
    width: 100%;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Header/title styling inside auth card */
.header-title {
    color: var(--baby-blue);
    /* prominent accent color for titles */
    margin-bottom: 1.5rem;
    text-align: center;
}

/* --- 4. FORM ELEMENT STYLING ---
    Use !important sparingly — here it's used to override Bootstrap defaults
    when necessary to maintain the dark theme.
*/
.form-control,
.input-group-text {
    border-color: var(--blue-main) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    /* very subtle input bg */
    color: var(--text-light) !important;
}

/* Focus state should use a visible ring for keyboard users (accessibility) */
.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(104, 187, 227, 0.5);
}

/* Ensure select option text is readable when the dropdown is opened */
select.form-control option {
    color: #333;
    /* dark text for native option lists */
}

/* Muted helper text should appear less prominent than main labels */
.form-text,
.text-muted {
    color: var(--text-muted) !important;
}

/* --- 5. BUTTON STYLING ---
    Primary CTA uses blue-grotto; on hover lighten to baby-blue for visual feedback.
*/
.btn-primary {
    background-color: var(--blue-grotto);
    border-color: var(--blue-grotto);
    font-weight: bold;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    /* smooth hover */
}

.btn-primary:hover {
    background-color: var(--baby-blue);
    border-color: var(--baby-blue);
}

/* --- 6. LINK STYLING ---
    Links with .link-primary match the theme and show a subtle hover state.
*/
a.link-primary {
    color: var(--baby-blue);
    transition: color 0.3s;
}

a.link-primary:hover {
    color: var(--blue-grotto);
    text-decoration: underline;
    /* explicit affordance for interactive text */
}


/* --- 7. INDEX PAGE ---
    Links with .link-primary match the theme and show a subtle hover state.
*/
:root {
    --baby-blue: #68bbe3;
    --blue-grotto: #0e86d4;
    --blue-main: #055c9d;
    --navy-blue: #003060;
}



html,
body {
    height: 100%;
    background-color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    display: -ms-flexbox;
    display: flex;
    color: #fff;
    text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);

    /* Background Image setup */
    background: linear-gradient(rgba(0, 48, 96, 0.75),
            rgba(0, 48, 96, 0.85)), url('../images/img-1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    /* Better for mobile performance than fixed */
}

.cover-container {
    max-width: 42em;
}

/* Header / Nav */
.masthead {
    margin-bottom: 2rem;
}

.masthead-brand {
    margin-bottom: 0;
    font-weight: bold;
    color: var(--baby-blue);
}

.nav-masthead .nav-link {
    padding: .25rem 0;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
    background-color: transparent;
    border-bottom: .25rem solid transparent;
    margin-left: 1rem;
    /* Reduced margin slightly for smaller screens */
    transition: color 0.3s;
}

/* Desktop specific nav margin */
@media (min-width: 48em) {
    .nav-masthead .nav-link {
        margin-left: 1.5rem;
    }

    .masthead-brand {
        float: left;
    }

    .nav-masthead {
        float: right;
    }
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
    border-bottom-color: rgba(255, 255, 255, .25);
    color: var(--baby-blue);
}

.nav-masthead .nav-link.active {
    color: #fff;
    border-bottom-color: #fff;
}

/* Main Content */
.cover {
    padding: 0 1.5rem;
}

/* Responsive Heading */
.cover-heading {
    font-weight: bold;
    color: #f58762;
    margin-bottom: 0rem !important;
    font-size: 2rem;
    /* Mobile default */
}

@media (min-width: 48em) {
    .cover-heading {
        font-size: 3rem;
        /* Desktop size */
    }
}

/* Info Cards Styling */
.info-box {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--baby-blue);
    border-radius: 8px;
    padding: 20px;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.time-label {
    color: var(--baby-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    font-weight: bold;
}

.time-value {
    font-size: 1.25rem;
    margin-bottom: 5px;
}

/* Buttons */
.btn-lg {
    padding: .75rem 1.25rem;
    border-radius: 30px;
    font-weight: 700;
    /* Mobile: buttons might need to stack or wrap */
    margin: 5px;
}

.btn-primary {
    background-color: var(--blue-grotto);
    border-color: var(--blue-grotto);
}

.btn-primary:hover {
    background-color: var(--baby-blue);
    border-color: var(--baby-blue);
    color: var(--navy-blue);
}

.btn-secondary {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
}

.btn-secondary:hover {
    background-color: #fff;
    color: var(--navy-blue);
}

.mastfoot {
    color: rgba(255, 255, 255, .5);
}