/* ====================================================
   FLASH MESSAGES
==================================================== */
.flash-success {
    background:#d4edda;
    padding:10px;
    border-radius:5px;
    color:#155724;
    margin-bottom:10px;
}


/* ====================================================
   NAVIGATION BUTTON CLUSTER (GLOBAL)
==================================================== */
.nav-cluster {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:20px auto;
    padding:10px 0;
}

.nav-cluster a {
    background:#0b3d0b;
    color:white;
    padding:10px 16px;
    border-radius:8px;
    text-decoration:none;
    font-size:0.95rem;
    font-weight:600;
    transition:0.2s;
}

.nav-cluster a:hover {
    background:#145214;
}


/* ====================================================
   ENTRY FORM LAYOUT
==================================================== */

/* Desktop: two columns */
.picks-grid {
    display:flex;
    gap:30px;
    margin-top:10px;
}

.picks-col {
    flex:1;
    min-width:240px;
}

/* Wrapper for input + dropdown */
.pick-wrapper {
    position:relative;
    margin-bottom:15px;
}

/* Dropdown: hidden until input is focused */
.pick-select {
    display:none;
    position:absolute;
    top:38px;
    left:0;

    /* Desktop behavior */
    width:max-content;      /* Auto-size to longest name */
    min-width:100%;         /* Never smaller than input */
    max-width:100%;         /* Never wider than input */

    max-height:180px;
    overflow-y:auto;

    background:white;
    border:1px solid #ccc;
    border-radius:6px;
    padding:4px;
    z-index:10;

    white-space:nowrap;     /* Keep names on one line */
}

/* Inputs + selects */
input[type="text"],
input[type="number"],
input[type="email"],
select {
    width:100%;
    max-width:240px;
    box-sizing:border-box;
}


/* ====================================================
   MOBILE OPTIMIZATION
==================================================== */
@media (max-width: 600px) {

    /* Stack picks vertically */
    .picks-grid {
        flex-direction:column;
        gap:10px;
    }

    .picks-col {
        min-width:100%;
    }

    /* Inputs full width */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    select {
        width:100%;
        max-width:100%;
        font-size:1rem;
        padding:10px;
    }

    /* Dropdown full width on mobile */
    .pick-select {
        width:100%;
        min-width:100%;
        max-width:100%;
        max-height:200px;
        font-size:1rem;
    }

    /* Labels */
    label {
        font-size:1rem;
        margin-bottom:4px;
        display:block;
    }

    /* Buttons */
    button,
    .btn,
    .btn-secondary {
        width:100%;
        padding:12px;
        font-size:1rem;
        margin-top:10px;
    }

    /* Container padding */
    .container {
        padding:12px;
    }

    /* Nav cluster spacing */
    .nav-cluster {
        gap:6px;
        margin:12px auto;
    }

    .nav-cluster a {
        padding:10px 12px;
        font-size:0.9rem;
    }
}