.waste-page{
    padding-bottom:60px;
}

/* Hlavička stránky */

.waste-page .page-header{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:32px;
}

.waste-page .page-header-icon{
    display:inline-flex;
    flex:0 0 64px;
    width:64px;
    height:64px;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    background:#eef5fb;
    color:var(--primary);

    font-size:1.8rem;
}

.waste-page h1{
    margin:0 0 6px;
    color:var(--primary);
}

.waste-page .page-header p{
    margin:0;
    color:#52606d;
}

/* Tlačidlo */

.waste-actions{
    display:flex;
    justify-content:flex-end;
    margin-bottom:24px;
}

.waste-print-button{
    gap:8px;
    border:0;
    cursor:pointer;
}

/* Legenda */

.waste-legend{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;

    gap:28px;

    margin:0 auto 30px;
    padding:18px 22px;

    border-radius:14px;
    background:#f8fafc;

    font-weight:600;
    text-align:center;
}

.waste-legend > span{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.waste-legend .waste-dot{
    margin-right:0;
}

/* Mriežka mesiacov */

.waste-months{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
}

/* Karta mesiaca */

.waste-month{
    padding:26px;
}

.waste-month h2{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 0 20px;

    color:var(--primary);
    text-align:center;
}

.month-title{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.month-title i{
    color:var(--secondary);
    font-size:.95em;
}

/* Aktuálny mesiac */

.current-month{
    border:2px solid var(--primary);
}

.current-month h2{
    margin:-26px -26px 20px;
    padding:16px 22px;

    border-radius:18px 18px 0 0;
    background:#eef5fb;
}

.current-month-badge{
    position:absolute;
    right:0;

    padding:5px 10px;

    border-radius:999px;

    background:var(--secondary);
    color:var(--white);

    font-size:.75rem;
    font-weight:700;
}

/* Zoznam vývozov */

.waste-list{
    list-style:none;
    margin:0;
    padding:0;
}

.waste-item{
    display:grid;
    grid-template-columns:70px minmax(0, 1fr);
    gap:18px;
    align-items:center;

    padding:12px 0;

    border-bottom:1px solid var(--gray);
}

.waste-item:last-child{
    border-bottom:0;
}

.waste-item time{
    color:#667085;
    font-weight:600;
}

.waste-type{
    display:flex;
    align-items:center;

    min-width:0;

    color:var(--primary);
    text-align:left;
    font-weight:700;
}

.waste-label{
    color:var(--primary);
}

/* Farebné názvy odpadu */

.waste-type.waste-municipal,
.waste-legend .waste-municipal{
    color:var(--waste-municipal);
}

.waste-type.waste-plastic,
.waste-legend .waste-plastic{
    color:var(--waste-plastic);
}

.waste-type.waste-glass,
.waste-legend .waste-glass{
    color:var(--waste-glass);
}

.waste-type.waste-paper,
.waste-legend .waste-paper{
    color:var(--waste-paper);
}

/* Farebné bodky */

.waste-dot{
    display:inline-block;
    flex:0 0 12px;

    width:12px;
    height:12px;
    margin-right:10px;

    border-radius:50%;
    background:var(--primary);
}

.waste-dot.waste-municipal{
    background:var(--waste-municipal);
}

.waste-dot.waste-plastic{
    background:var(--waste-plastic);
}

.waste-dot.waste-glass{
    background:var(--waste-glass);
}

.waste-dot.waste-paper{
    background:var(--waste-paper);
}

/* Tablet */

@media (max-width:768px){

    .waste-months{
        grid-template-columns:1fr;
    }

}

/* Mobil */

@media (max-width:480px){

    .waste-page .page-header{
        gap:14px;
    }

    .waste-page .page-header-icon{
        flex-basis:52px;
        width:52px;
        height:52px;
        font-size:1.45rem;
    }

    .waste-actions{
        justify-content:stretch;
    }

    .waste-print-button{
        width:100%;
        justify-content:center;
    }

    .waste-legend{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

    .waste-month h2{
        justify-content:flex-start;
        padding-right:80px;
    }

    .waste-item{
        grid-template-columns:64px minmax(0, 1fr);
        gap:12px;
    }

}

/* Tlač */

@media print{

    .topbar,
    .site-header,
    .main-navigation,
    .site-footer,
    .waste-actions{
        display:none !important;
    }

    body{
        background:#fff;
        color:#000;
    }

    .container{
        max-width:none;
        padding:0;
    }

    .waste-page{
        padding:0;
    }

    .waste-page .page-header{
        margin-bottom:20px;
    }

    .waste-legend{
        margin-bottom:16px;
        padding:10px;
        border:1px solid #bbb;
        background:#fff;
    }

    .waste-months{
        grid-template-columns:repeat(2, 1fr);
        gap:14px;
    }

    .waste-month{
        break-inside:avoid;
        padding:16px;
        border:1px solid #bbb;
        box-shadow:none;
    }

    .current-month{
        border-color:#777;
    }

    .current-month h2{
        margin:-16px -16px 14px;
        background:#fff;
    }

    .waste-item{
        padding:7px 0;
    }

}