/*
    BuckWild Collar Tracker Stylesheet

    This file controls the visual appearance of index.html.
    It does not load data and it does not talk to the database.
*/

/*
    Apply border-box sizing to every element.
    This makes width calculations easier because padding and borders are included.
*/
* {
    box-sizing: border-box;
}

/*
    Style the whole page.
    The dark background helps the map and data cards stand out.
*/
body {
    font-family: Arial, sans-serif;
    background-color: #0f172a;
    color: white;
    margin: 0;
    padding: 20px;
}

/*
    Keep the main heading close to the top and separated from the controls.
*/
h1 {
    margin-top: 0;
    margin-bottom: 20px;
}

/*
    Shared card styling for the controls and stats panels.
*/
#controls,
#simulationControls,
#stats {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 15px;
}

/*
    Put controls in a wrapping row so they work on both phones and desktops.
*/
#controls,
#simulationControls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/*
    Make labels slightly smaller but still readable.
*/
label {
    font-size: 14px;
    font-weight: bold;
}

/*
    Give form fields a consistent readable style.
*/
select,
input,
button {
    border: 1px solid #475569;
    border-radius: 6px;
    font-size: 15px;
    padding: 8px 10px;
}

/*
    Make normal input fields easy to read against the dark page.
*/
select,
input {
    background: #f8fafc;
    color: #0f172a;
}

/*
    Style buttons as obvious clickable actions.
*/
button {
    background: #22c55e;
    color: #052e16;
    cursor: pointer;
    font-weight: bold;
}

/*
    Slightly change the button when the mouse is over it.
*/
button:hover {
    background: #16a34a;
}

/*
    Status text is small helper text next to the controls.
*/
#statusText,
#simTimeLabel {
    color: #cbd5e1;
    font-size: 14px;
}

/*
    The hidden class is used by JavaScript to hide simulation controls in live mode.
*/
.hidden {
    display: none !important;
}

/*
    Leaflet needs an explicit height or the map will not appear.
*/
#map {
    width: 100%;
    height: 600px;
    border: 2px solid #444;
    border-radius: 8px;
    margin-bottom: 20px;
}

/*
    Make the stats text readable and not too large.
*/
#stats {
    font-size: 17px;
}

/*
    Remove extra spacing inside stats paragraphs.
*/
#stats p {
    margin: 6px 0;
}

/*
    Lay out collar cards in responsive columns.
*/
#collarList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

/*
    Style each device/card shown below the map.
*/
.collar-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    line-height: 1.5;
}

/*
    Make the range slider a reasonable width on desktop.
*/
#simSlider {
    min-width: 260px;
}

/*
    On small screens, stack form controls more comfortably.
*/
@media (max-width: 700px) {
    body {
        padding: 12px;
    }

    #map {
        height: 480px;
    }

    #controls,
    #simulationControls {
        align-items: stretch;
        flex-direction: column;
    }

    select,
    input,
    button,
    #simSlider {
        width: 100%;
    }
}