/* NOTE: Consolidated to /static/css/public_styles.css */
/* This app-level copy has been superseded by the central stylesheet. */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Allow body to scroll but prevent bounce */
body {
    min-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(120% 120% at 50% 0%, rgba(0,193,212,0.25), rgba(11,26,42,0.95)), #0b1a2a !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

h1 { text-align: center; }

h2 {
    text-align: center;
}

/* ========================== */
/*     General Page Styling Update   */
/* ========================== */

/* ========================== */
/*      Container Styling     */
/* ========================== */
.rc-form-container {
    /* Scoped narrow container for compact forms (use this instead of global .container) */
    max-width: 450px;
    margin: 40px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* ========================== */
/*       Form Styling         */
/* ========================== */
.form-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
}

.form-label {
    min-width: 120px;
    text-align: right;
    font-weight: bold;
}

/* 🔥 Fully unified form elements */
.input-field,
.dropdown-container select,
.form-box {
    width: 100%;
    max-width: 28rem; /* ~448px */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    color: #333;
    background-color: white;
    appearance: none;
    box-sizing: border-box;
    height: auto;
}

input[type="password"] {
    height: 30px !important;
    width: 240px !important;
    max-width: 240px !important;
    padding: 4px !important;
    border-radius: 8px !important;
    border: 1px solid #ccc !important;
    box-sizing: border-box !important;
    appearance: none !important;
}

/* ========================== */
/*     Dropdown Styling       */
/* ========================== */
.dropdown-container select {
    width: 100%;
}

/* ========================== */
/*      Button Styling        */
/* ========================== */
.button-container {
    text-align: center;
    margin-top: 15px;
}

.button {
    padding: 10px;
    background-color: #007bff;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

/* ========================== */
/*       Link Styling         */
/* ========================== */
.form-link {
    margin-top: 15px;
    font-size: 14px;
    text-align: center;
}

.link {
    color: #007bff;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

/* ========================== */
/*          Footer            */
/* ========================== */
footer {
    position: relative;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #666;
}

/* ========================== */
/*     Form Container         */
/* ========================== */
.form-container {
    max-width: 450px;
    margin: 40px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Standardized form-box */
.form-box {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    height: 35px;
}

/* ========================== */
/*      Container Styling     */
/* ========================== */
.container {
    max-width: 450px;
    margin: auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ========================== */
/*       Logo Styling         */
/* ========================== */
.logo-container {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 0;
}

.logo-container img {
    width: 250px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.logo {
    width: 250px;
    height: auto;
}

/* ========================== */
/*    Responsive Adjustments  */
/* ========================== */
@media screen and (max-width: 600px) {
    body {
        padding: 8px;
    }

    .container {
        max-width: 95%;
        padding: 18px;
        margin: auto;
        display: flex;
        flex-direction: column;
        max-height: 95vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .form-container {
        max-width: 100%;
        padding: 12px;
    }

    .logo-container {
        margin-bottom: 12px;
        margin-top: 0;
    }

    .logo-container img {
        width: 180px;
        height: auto;
    }

    .logo {
        width: 180px;
    }

    h2 {
        font-size: 1.1rem;
        margin: 3px 0;
    }

    h3 {
        font-size: 1rem;
        margin: 3px 0;
    }

    h4 {
        font-size: 0.9rem;
        margin: 3px 0 5px 0;
    }

    .form-group {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 6px;
        gap: 3px;
    }

    .form-label {
        min-width: auto;
        text-align: left;
        font-weight: 600;
        font-size: 0.85rem;
    }

    .input-field, .dropdown-container select {
        width: 100%;
        padding: 6px !important;
        font-size: 0.9rem;
    }

    .button-container {
        margin: 6px 0;
    }

    .button {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .form-link {
        font-size: 0.8rem;
        margin: 3px 0;
    }
}

/* Event card specific tweaks */
.events-viewer .list-group-item {
    word-break: break-word;
}
.events-viewer .list-group-item .fw-semibold {
    font-size: clamp(0.95rem, 1.4vw, 1rem);
}

/* ==================================== */
/* Admin Dashboard Specific Styles      */
/* ==================================== */

/* Static Sidebar for Desktop */
.static-sidebar {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 60px;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    width: 250px;
    overflow-y: auto;
}

/* Main Content Area for Dashboard */
.main-content {
    margin-left: 0;
    padding: 20px;
}

@media (min-width: 768px) {
    .main-content {
        margin-left: 250px;
    }
}

/* Accordion & Navbar Adjustments for Admin Panels */
.accordion-button {
    font-weight: bold;
    font-size: 1rem;
}

.nav-link {
    font-size: 0.95rem;
}

/* ========================== */
/*  Event card layout tweaks   */
/* ========================== */
/* Reduce the horizontal gap between screen edge and the outer event list
   and tighten the left/right padding inside each list item so cards
   feel denser on small screens. Scoped to `.events-viewer` for safety. */
.events-viewer {
    margin-left: 6px; /* small gap to viewport edge */
    margin-right: 6px;
}
@media (min-width: 576px) {
    .events-viewer {
        margin-left: 12px;
        margin-right: 12px;
    }
}
.events-viewer .list-group {
    margin-left: 0;
    margin-right: 0;
}
.events-viewer .list-group-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 6px !important;
    padding-bottom: 0 !important; /* remove padding below second line */
    margin: 6px 0 !important;
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.events-viewer .list-group-item .fw-semibold {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
}

/* compact typography for lists */
.events-viewer .list-group-item .small {
    font-size: 0.72rem;
    line-height: 1;
}

/* Member name and RSVP icons */
.member-row .member-name {
    font-size: 0.88rem; /* reduce name size */
    font-weight: 600;
}
.member-row .when {
    font-size: 0.72rem;
    color: #6c757d;
}
.status-icon { display: inline-block; vertical-align: middle; }
.status-icon svg { display: block; width: 18px; height: 18px; }

/* Small state dot for instance row */
.state-dot {
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    margin-left:6px;
    vertical-align:middle;
}
/* State->color mapping (use same names as State choices) */
.state-dot { background: #6c757d; }
.state-dot[data-state="pre_invitation"] { background: #6c757d; }
.state-dot[data-state="invitation_sent"] { background: #0d6efd; }
.state-dot[data-state="reminder"] { background: #ffc107; }
.state-dot[data-state="last_call"] { background: #fd7e14; }
.state-dot[data-state="captain_review"] { background: #6f42c1; }
.state-dot[data-state="locked"] { background: #dc3545; }

/* Compact time styling */
.ev-time { font-size: 0.86rem; white-space: nowrap; }
.ev-date { font-size: 0.72rem; color: #6c757d; margin-right: 6px; white-space: nowrap; }

/* map state-dot color using data-state attribute */
.state-dot[data-state="pre_invitation"] { background: #6c757d; }
.state-dot[data-state="invitation_sent"] { background: #0d6efd; }
.state-dot[data-state="reminder"] { background: #ffc107; }
.state-dot[data-state="last_call"] { background: #fd7e14; }
.state-dot[data-state="captain_review"] { background: #6f42c1; }
.state-dot[data-state="locked"] { background: #dc3545; }


.events-viewer .badge {
    font-size: 0.7rem;
    padding: 0.22rem 0.4rem;
    width: 22px;
    height: 22px;
}
/* allow the left content to grow and wrap naturally while keeping the right column tight */
.events-viewer .text-center {
    width: 86px; /* compact date block */
}
.events-viewer .state-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 86px;
    padding-right: 6px;
    text-align: left;
}
.events-viewer .ev-main {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.events-viewer .ev-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.events-viewer .ev-right {
    width: 18px; /* keep a small spacer */
    display: flex;
    align-items: center;
    justify-content: center;
}
.events-viewer .bi-chevron-right {
    font-size: 1rem;
    color: rgba(0,0,0,0.35);
}

/* compact RSVP inline overrides */
.events-viewer .rsvp-compact {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.events-viewer .rsvp-compact {
    width: 100%;
    display: block;
    text-align: left;
}
.events-viewer .rsvp-compact .badge {
    margin-left: .25rem;
}
.events-viewer .list-group-item .badge {
    display: inline-block;
    vertical-align: middle;
}

/* Hide the per-row "View" button so clicking the row opens the viewer.
   If you want to restore it later, remove this rule or scope it behind
   a toggle class. */
.events-viewer .list-group-item > a.btn {
    display: none !important;
}

/* Ensure direct child flex containers don't force large min-widths; keep our ev-right small */
.events-viewer .list-group-item > .d-flex { min-width: 0 !important; }
.events-viewer .list-group-item > .ev-right { min-width: 18px !important; }


/* State icon sizing and color mapping (SVGs use currentColor) */
.events-viewer .state-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 8px; color: #6c757d; font-size: 1.25rem; }
.events-viewer .state-icon i { line-height: 1; }
.events-viewer .state-icon[data-state="pre_invitation"] { color: #6c757d !important; }
.events-viewer .state-icon[data-state="invitation_sent"] { color: #0d6efd !important; }
.events-viewer .state-icon[data-state="reminder"] { color: #b38600 !important; }
.events-viewer .state-icon[data-state="last_call"] { color: #fd7e14 !important; }
.events-viewer .state-icon[data-state="captain_review"] { color: #6f42c1 !important; }
.events-viewer .state-icon[data-state="locked"] { color: #c82333 !important; }
/* Published state (visible before invitations are sent) */
.events-viewer .state-icon[data-state="published"] { color: #6c757d !important; }

/* Ensure inline SVGs inherit color from their container */
.events-viewer .state-icon svg { fill: currentColor !important; width: 22px; height: 22px; display: inline-block; }

/* Admin icon image sizing helper */
.admin-icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }

/* Ensure font-icons inherit color from their container and are not overridden */
.state-icon i, #ev-state-legend .bi, .events-viewer .member-row .bi, .events-viewer .status-accepted, .events-viewer .status-maybe, .events-viewer .status-declined, .events-viewer .status-noresponse {
    color: inherit !important;
}

/* Stronger specificity for RSVP status icons to guarantee RYG colors */
.events-viewer .status-accepted { color: #0b8457 !important; }
.events-viewer .status-maybe { color: #b38600 !important; }
.events-viewer .status-declined { color: #c82333 !important; }
.events-viewer .status-noresponse { color: #856404 !important; }

/* Legend should not wrap on larger screens; allow wrap on small screens */
.state-legend-wrap { flex-wrap: nowrap !important; }
@media (max-width: 576px) {
    .state-legend-wrap { flex-wrap: wrap !important; }
}

/* Ensure specific icon selectors get colored even if other styles override .bi */
.events-viewer i.bi.status-accepted, .events-viewer .bi.status-accepted { color: #0b8457 !important; }
.events-viewer i.bi.status-maybe, .events-viewer .bi.status-maybe { color: #b38600 !important; }
.events-viewer i.bi.status-declined, .events-viewer .bi.status-declined { color: #c82333 !important; }
.events-viewer i.bi.status-noresponse, .events-viewer .bi.status-noresponse { color: #856404 !important; }

/* Higher-specificity fallbacks: directly set svg fill for state icons in case
    vendor CSS overwrote color on the parent element. These target the
    list-group item -> .state-icon -> svg chain so they win common overrides. */
.events-viewer .list-group-item .state-icon[data-state="pre_invitation"] > svg { fill: #6c757d !important; }
.events-viewer .list-group-item .state-icon[data-state="invitation_sent"] > svg { fill: #0d6efd !important; }
.events-viewer .list-group-item .state-icon[data-state="reminder"] > svg { fill: #b38600 !important; }
.events-viewer .list-group-item .state-icon[data-state="last_call"] > svg { fill: #fd7e14 !important; }
.events-viewer .list-group-item .state-icon[data-state="captain_review"] > svg { fill: #6f42c1 !important; }
.events-viewer .list-group-item .state-icon[data-state="locked"] > svg { fill: #c82333 !important; }

/* Also set svg fill for published explicitly */
.events-viewer .list-group-item .state-icon[data-state="published"] > svg { fill: #6c757d !important; }

/* Inline state icon visible on small screens; hide on md+ */
.state-inline { margin-left: 8px; }
.state-inline i { font-size: 1rem; }
.d-md-none { display: none; }
@media (max-width: 767.98px) {
    .d-md-none { display: inline-flex !important; }
    .d-md-inline { display: none !important; }
}

/* Help button smaller on mobile to avoid overflow */
#ev-state-legend-toggle { font-size: 0.9rem; padding: 0 4px; }
@media (max-width: 576px) {
    #ev-state-legend-toggle { font-size: 0.78rem; padding: 0 3px; }
}

/* RSVP status icon colors (darker/more vibrant) */
.status-icon { display: inline-flex; align-items: center; justify-content: center; }
.status-accepted { color: #0b8457; }
.status-maybe { color: #b38600; }
.status-declined { color: #c82333; }
.status-noresponse { color: #856404; }

/* Legend card tweaks */
#ev-state-legend { border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; background: #fff; padding: 6px; }
.state-legend { opacity: 1; }

/* Make navbar sticky on top so mobile header always sits at screen top */
.navbar { position: sticky; top: 0; z-index: 1060; }


/* Ensure image-based SVG icons keep their baked-in colors and sizing
    (we use <img src="...svg"> for colored assets). Some vendor/admin
    CSS can unintentionally apply filters/opacity to images - override it. */
.events-viewer .state-icon img,
.events-viewer .state-icon > img,
.events-viewer .state-icon img.admin-icon {
    width: 24px !important;
    height: 24px !important;
     display: inline-block !important;
     vertical-align: middle !important;
     object-fit: contain !important;
     filter: none !important;
     -webkit-filter: none !important;
     opacity: 1 !important;
     background: transparent !important;
}

/* If an inline <svg> exists instead of an <img>, prefer currentColor fill
    so our per-state color rules still apply. */
.events-viewer .state-icon svg { fill: currentColor !important; }