/* =========================
   Base
========================= */

* {
    box-sizing: border-box;
}


body {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    margin:0;

    padding:24px;

    background:#eef2f8;

    color:#4a4f57;

}


a {

    color:#1976d2;

    text-decoration:none;

}


h1 {

    color:#1976d2;

    font-size:30px;

    margin:
        20px 0 8px;

}


h2 {

    font-size:22px;

    margin-bottom:20px;

}



/* =========================
   Weekly grid
========================= */


#week-editor {

    display:grid;

    grid-template-columns:
        repeat(4, minmax(280px, 1fr));

    gap:18px;

    max-width:1500px;

}


/* =========================
   Day cards
========================= */


.day-card {

    background:white;

    border:1px solid #d8e0eb;

    border-radius:8px;

    padding:14px 16px;

    box-shadow:
        0 1px 3px rgba(0,0,0,.08);

    min-height:220px;

}



.day-card h3 {

    margin:

        0 0 14px;

    font-size:18px;

    color:#555;

}


.day-card h4 {

    margin:

        8px 0 4px;

    font-size:14px;

    color:#777;

}



/* =========================
   Slider container
========================= */


.slider-container {

    margin-bottom:14px;

}



.slider-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    margin-bottom:5px;

}


.slider-header strong {

    font-size:14px;

    color:#555;

}



/* =========================
   Range slider
========================= */


.range-slider {

    position:relative;

    height:32px;

    width:100%;

    touch-action:none;

}


.track {

    position:absolute;

    top:13px;

    width:100%;

    height:6px;

    background:#d8dee8;

    border-radius:10px;

}



.selected-range {

    position:absolute;

    top:13px;

    height:6px;

    border-radius:10px;

}



.handle {

    position:absolute;

    top:4px;

    width:22px;

    height:22px;

    margin-left:-11px;

    background:white;

    border:3px solid #8491a3;

    border-radius:50%;

    cursor:pointer;

    touch-action:none;

    box-shadow:
        0 1px 3px rgba(0,0,0,.2);

}



.handle:hover {

    border-color:#1976d2;

}



/* =========================
   Buttons
========================= */


.disable-btn {

    background:#f4f6f9;

    color:#606770;

    border:

        1px solid #ccd5e2;

    padding:

        3px 10px;

    border-radius:5px;

    font-size:12px;

    cursor:pointer;

}



.disable-btn:hover {

    background:#e8edf5;

}


.save-container {

    display:flex;

    align-items:center;

    justify-content:center;

}

#save-week {

    padding:12px 35px;

    background:#1976d2;

    color:white;

    border:none;

    border-radius:6px;

    font-size:15px;

    cursor:pointer;

}


#save-week:hover {

    background:#1565c0;

}



/* =========================
   Disabled slider
========================= */


.disabled .selected-range {

    background:#b8c0cc !important;

}


.disabled .track {

    background:#e6e9ef;

}


.disabled .handle {

    background:#eef1f5;

    border-color:#b8c0cc;

}



/* =========================
   Drag protection
========================= */


.range-slider,
.range-slider *,
.slider-header,
.slider-header * {

    user-select:none;

    -webkit-user-select:none;

    -webkit-user-drag:none;

}


.range-slider.dragging {

    cursor:grabbing;

}


.range-slider.dragging * {

    cursor:grabbing;

}



/* =========================
   Responsive
========================= */


@media(max-width:1200px) {

    #week-editor {

        grid-template-columns:
            repeat(2, minmax(320px,1fr));

    }

}


@media(max-width:700px) {

    #week-editor {

        grid-template-columns:1fr;

    }

}





.people-card {

    background:white;

    border:1px solid #d8e0eb;

    border-radius:8px;

    padding:20px;

    max-width:700px;

}



.person-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px;

    border-bottom:
        1px solid #e5e9f0;

}



.person-row button {

    margin-left:10px;

    border:none;

    background:#dc3545;

    color:white;

    padding:5px 12px;

    border-radius:5px;

}



#add-person {

    margin-top:15px;

    background:#1976d2;

    color:white;

    border:none;

    padding:10px 20px;

    border-radius:6px;

}





.week-selector {

    display:flex;

    align-items:center;

    gap:15px;

    margin:

        15px 0 25px;

}



.week-selector button {

    width:35px;

    height:35px;

    border-radius:6px;

    border:

        1px solid #ccd5e2;

    background:white;

    cursor:pointer;

    font-size:18px;

}


.week-selector button:hover {

    background:#eef2f8;

}


#week-label {

    min-width:220px;

    text-align:center;

    color:#555;

}