/*
Plugin Style: P2M Tryout Platform (v5.0)
Based on dark/neon theme provided by user.
*/

/* --- 1. CORE VARIABLES --- */
:root {
    --clr-panel: rgba(12, 26, 43, 0.7);
    --clr-panel-border: rgba(60, 100, 130, 0.4);
    --clr-text-light: #e2e8f0;
    --clr-text-medium: #94a3b8;
    --clr-cyan: #67e8f9;
    --clr-cyan-border: rgba(103, 232, 249, 0.2);
    --clr-pink: #f30dffed;
    --clr-blue: #00d8fac2;
    --clr-red: #f87171;
    --clr-green: #4ade80;
    --font-heading: 'Roboto Condensed', sans-serif;
    --font-mono: 'Libre Barcode 128 Text', cursive;
}

body { background: #020617; }

/* --- 2. GLOBAL WRAPPERS & PANELS --- */
.p2m-wrap {
    margin: 20px auto;
    max-width: 1200px;
    padding: 0 15px;
    font-family: var(--font-heading);
    color: var(--clr-text-light);
}

.p2m-panel {
    background-color: var(--clr-panel);
    border: 1px solid var(--clr-panel-border);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    margin-bottom: 20px;
}

.p2m-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--clr-cyan-border);
}

.p2m-title {
    font-size: 2rem;
    color: var(--clr-cyan);
    font-weight: 700;
    margin: 0;
    text-shadow: 0 0 5px rgba(103, 232, 249, 0.5);
}

/* --- 3. INPUTS & BUTTONS --- */
label { display: block; color: var(--clr-text-medium); font-size: 0.9em; margin-bottom: 5px; }

.input-dark, select.input-dark, textarea.input-dark {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--clr-panel-border);
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--clr-text-light);
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s;
    appearance: none;
}
.input-dark:focus { outline: none; border-color: var(--clr-cyan); box-shadow: 0 0 5px var(--clr-cyan-border); }

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-align: center;
}
.btn-attend { background: linear-gradient(90deg, var(--clr-pink), var(--clr-blue)); color: white; }
.btn-private { background: var(--clr-cyan); color: #020617; }
.btn-remove { background-color: var(--clr-red); color: white; padding: 8px 15px; font-size: 0.8em; }
.btn-manager-edit, .btn-expand {
    background: rgba(255, 255, 255, 0.1);
    color: var(--clr-cyan);
    border: 1px solid var(--clr-cyan-border);
    padding: 8px 15px;
    font-size: 0.8em;
}
.btn:hover { opacity: 0.85; transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }

/* --- 4. PUBLIC BOARD --- */
.p2m-marquee-box { overflow: hidden; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid var(--clr-pink); }
.item-row { border-bottom: 1px solid var(--clr-panel-border); transition: background-color 0.2s; padding: 0; }
.item-row:hover { background-color: rgba(0, 0, 0, 0.2); }

/* Desktop Grid Layout */
.p2m-row-main {
    display: grid;
    grid-template-columns: 2fr 0.7fr 1.8fr 1.5fr 0.5fr;
    align-items: center;
    padding: 15px 20px;
    gap: 10px;
}

.p2m-row-details {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    border-top: 1px dashed var(--clr-panel-border);
    display: none; /* JS Toggles this */
}

.col-badge {
    display: inline-block;
    background-color: var(--clr-pink);
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.8em;
    font-weight: bold;
}
.p2m-mobile-details { display: none; }

/* --- 5. MANAGER DASHBOARD --- */
.p2m-panel .p2m-row-main { padding: 10px 20px; font-size: 0.95rem; }
.p2m-manager-dashboard .p2m-row-main { grid-template-columns: 3fr 1fr 0.5fr; }

/* --- 6. MODAL --- */
.p2m-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8); display: none;
    justify-content: center; align-items: center; z-index: 1000;
}
.p2m-modal {
    background-color: var(--clr-panel); border: 1px solid var(--clr-pink);
    border-radius: 8px; padding: 30px; max-width: 450px; width: 90%;
    box-shadow: 0 0 20px rgba(243, 13, 255, 0.5); position: relative;
}
.p2m-close { position: absolute; top: 10px; right: 15px; color: var(--clr-text-medium); font-size: 24px; font-weight: bold; cursor: pointer; }

/* --- 7. RESPONSIVENESS --- */
@media (max-width: 900px) {
    .p2m-header { flex-direction: column; align-items: flex-start; }
    .p2m-header .p2m-title { margin-bottom: 10px; }
    .p2m-header > div:nth-child(2), .p2m-header > div:nth-child(3) {
        width: 100%; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px;
    }
    .p2m-header select.input-dark { flex-grow: 1; min-width: 120px !important; }
}

@media (max-width: 768px) {
    /* =========================================
       1. UNIFIED MOBILE ROW LAYOUT (Both Views)
       ========================================= */
    .p2m-row-main {
        display: block !important;     /* Force standard block layout */
        position: relative;            /* Anchor for absolute button */
        padding: 15px 60px 15px 15px;  /* Right padding reserves space for button */
        min-height: auto;              /* Allow height to grow with content */
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    /* --- SHARED: Team Name Styling (Always the 1st div) --- */
    .p2m-row-main > div:first-child {
        display: block;
        width: 100%;
        margin-bottom: 5px;
        padding: 0;
    }
    
    /* Ensure text is visible, wraps, and has correct color */
    .p2m-row-main > div:first-child h3,
    .p2m-row-main > div:first-child strong {
        display: block;
        font-size: 1.1rem;
        line-height: 1.3;
        color: white;
        white-space: normal !important; /* Force wrap */
        overflow-wrap: break-word;
    }

    /* Hide Organization Name (Small text) in 1st div to save space (Requested) */
    .p2m-row-main > div:first-child small {
        display: none !important;
    }


    /* =========================================
       2. UPCOMING TRYOUTS (Public Board)
       Structure: 1:Team, 2:Age, 3:Loc(Hide), 4:Date, 5:Btn
       ========================================= */
    
    /* Age Badge (2nd div) */
    .p2m-panel:not(.p2m-manager-dashboard) .p2m-row-main > div:nth-child(2) {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }

    /* Location (3rd div) - Hide in main row */
    .p2m-panel:not(.p2m-manager-dashboard) .p2m-row-main > div:nth-child(3) {
        display: none !important;
    }

    /* Date/Time (4th div) */
    .p2m-panel:not(.p2m-manager-dashboard) .p2m-row-main > div:nth-child(4) {
        display: inline-block;
        vertical-align: middle;
        color: var(--clr-cyan);
        font-size: 0.9rem;
    }

    /* Action Button (5th div) - Pinned Top Right */
    .p2m-panel:not(.p2m-manager-dashboard) .p2m-row-main > div:nth-child(5) {
        position: absolute;
        top: 50%;             /* Center vertically relative to row */
        transform: translateY(-50%);
        right: 15px;
        width: auto;
        margin: 0;
        padding: 0;
    }

    /* Mobile Details (Hidden Row) */
    .p2m-mobile-details {
        display: block !important;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.1);
        color: var(--clr-text-medium);
        font-size: 0.85em;
    }
    /* Clean up details items */
    .p2m-mobile-details span:nth-child(4) { display: none; } /* Hide duplicate date */


    /* =========================================
       3. MY ACCEPTED TRYOUTS (Manager Dashboard)
       Structure: 1:Team, 2:Status, 3:Btn
       ========================================= */

    /* Status Badge (2nd div) - Make Visible! */
    .p2m-manager-dashboard .p2m-row-main > div:nth-child(2) {
        display: inline-block !important; /* Un-hide it */
        margin-top: 5px;
    }

    /* Action Button (3rd div) - Pinned Top Right */
    .p2m-manager-dashboard .p2m-row-main > div:nth-child(3) {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        width: auto;
    }

    /* Reset Details Grid */
    .p2m-row-details > div {
        grid-template-columns: 1fr;
    }
}