/* =====================================================
   RESPONSIVE
===================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

img,
svg{
    max-width:100%;
}

content{
    min-width:0;
}

table{
    min-width:46rem;
}

.table-responsive,
main content .page{
    scrollbar-width:thin;
}

header .search ~ .menu ul li:first-child{
    display:none;
}

header .menu a[aria-label="Menu"]{
    display:none;
}

/* Laptop kecil */
@media (max-width:75rem){
    main{
        padding:.9rem;
        gap:.9rem;
    }

    main aside{
        width:15.5rem;
    }

    .cardlist{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .cardlist .card:first-child{
        grid-column:span 2;
    }

    .analitik{
        gap:1rem;
    }

    .form{
        max-width:40rem;
        width:min(100%,40rem);
    }

}

/* Tablet: header dan menu mengikuti pola mobile, konten tetap lapang */
@media (max-width:64rem){
    html{
        font-size:0.938rem;
    }

    body{
        overflow:hidden;
    }

    header{
        flex-wrap:wrap;
        gap:.65rem;
        padding:.7rem 1rem;
        z-index:30;
    }

    header .title{
        min-width:0;
        flex:1;
    }

    header .search{
        display:none;
        position:static;
        transform:none;
        order:3;
        width:100%;
        flex-basis:100%;
    }

    header.search-open .search{
        display:flex;
    }

    header .menu{
        margin-left:0;
    }

    header .search ~ .menu ul li:first-child{
        display:list-item;
    }

    header .menu a[aria-label="Menu"]{
        display:flex;
    }

    header .menu .dropdown{
        right:0;
        width:min(20rem,calc(100vw - 2rem));
        z-index:50;
    }

    main{
        flex:1;
        min-height:0;
        overflow:hidden;
        padding:1rem;
    }

    main::before{
        content:"";
        position:fixed;
        inset:0;
        z-index:20;
        background:rgba(31,35,40,.28);
        opacity:0;
        pointer-events:none;
        transition:opacity .25s ease;
    }

    body.aside-open main::before{
        opacity:1;
        pointer-events:auto;
    }

    main aside{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        z-index:40;
        width:min(19rem,82vw);
        padding:1rem;
        gap:1rem;
        background:var(--light);
        border-right:.1rem solid var(--border);
        box-shadow:.35rem 0 1.5rem rgba(0,0,0,.14);
        transform:translateX(-105%);
        transition:transform .28s ease;
    }

    body.aside-open main aside{
        transform:translateX(0);
    }

    main aside .menu{
        flex:1;
        overflow-y:auto;
    }

    main aside .menu ul{
        display:flex;
        flex-direction:column;
        gap:.35rem;
    }

    main aside .menu li a{
        padding:.8rem 1rem;
    }


    main content{
        width:100%;
        min-width:0;
    }

    main content .wrapper{
        min-height:0;
    }

main content .tabs ul{
        overflow-x:visible;
        padding:0 .8rem;
        white-space:nowrap;
    }

    main content .tabs li{
        flex:0 0 auto;
    }

    main content .page{
        overflow:scroll;
    }

    .sfmenu{
        align-items:flex-start;
        gap:.75rem;
    }

    .sfmenu .search{
        flex:1 1 auto;
        min-width:0;
        max-width:100%;
    }

    .sfmenu .search.full{
        width:100%;
    }

    .sfmenu .filter{
        overflow-x:auto;
        max-width:100%;
    }

    .sfmenu .filter ul{
        white-space:nowrap;
    }

    .insert .flexbox{
        flex-wrap:wrap;
    }

    .insert .flexbox > *{
        min-width:14rem;
    }

    .daftar-laporan{
        width:calc(100% - 1.5rem);
    }

    .daftar-laporan .baris-header{
        display:none;
    }

    .daftar-laporan .baris-data{
        min-width:0;
        flex-direction:column;
        align-items:stretch;
        gap:.75rem;
        padding:1rem;
        border-bottom:none;
        margin-bottom:.85rem;
        border-radius:.6rem;
        border: 0.063rem solid var(--border);
        background: var(--light);
        box-shadow: 0 0.063rem 0.188rem rgba(0,0,0,.05);
    }

    .daftar-laporan .baris-data:last-child{
        margin-bottom:0;
    }

    .daftar-laporan .baris-data:hover{
        box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.08);
    }

    .daftar-laporan .kolom,
    .daftar-laporan .kol-id,
    .daftar-laporan .kol-tgl,
    .daftar-laporan .kol-tempo,
    .daftar-laporan .kol-pokok,
    .daftar-laporan .kol-denda{
        flex-basis:auto;
        width:100%;
        display:flex;
        flex-direction:column;
        gap:.25rem;
    }

    .daftar-laporan .kolom::before,
    .daftar-laporan .kol-id::before,
    .daftar-laporan .kol-tgl::before,
    .daftar-laporan .kol-tempo::before,
    .daftar-laporan .kol-pokok::before,
    .daftar-laporan .kol-denda::before{
        content: attr(data-label);
        font-size:.7rem;
        font-weight:600;
        color:var(--color);
        opacity:.75;
        text-transform:uppercase;
        letter-spacing:.03rem;
    }
}

/* Mobile */
@media (max-width:48rem){
    html{
        font-size:0.875rem;
    }

    header{
        padding:.65rem .8rem;
    }

    header .title{
        font-size:1.15rem;
    }

    header .title svg{
        width:1.6rem;
    }

    header .menu ul{
        gap:.25rem;
    }

    header .menu ul li a{
        width:2.35rem;
        height:2.35rem;
    }

    header .search{
        padding:.55rem .7rem;
    }

    main{
        padding:.75rem;
    }

    main aside{
        width:min(18.5rem,86vw);
        padding:.8rem;
    }

    main content{
        gap:.75rem;
    }

    main content .tabs li a{
        padding:.65rem .55rem;
        font-size:.95rem;
    }

    main content .tabs svg,
    main aside .user svg,
    main aside .menu li a svg{
        width:1.35rem;
        height:1.35rem;
    }

    .cardlist{
        grid-template-columns:1fr;
        gap:.75rem;
    }

    .cardlist .card:first-child{
        grid-column:auto;
    }

    .cardlist .card{
        padding:1rem;
        gap:.8rem;
    }

    .cardlist .card svg{
        width:2.6rem;
    }

    .cardlist .card .data h3{
        font-size:1.05rem;
    }

    .dataset{
        min-height:100%;
    }

    .sfmenu{
        flex-direction:column;
        align-items:stretch;
        padding:.75rem;
        width:100%;
        min-width:0;
    }

    .sfmenu .search,
    .sfmenu .search.full{
        display:flex;
        width:100%;
        min-width:0;
        max-width:100%;
    }

    .sfmenu .search form{
        display:flex;
        align-items:center;
        gap:.5rem;
        width:100%;
        min-width:0;
    }

    .sfmenu .search input{
        min-width:0;
        width:100%;
    }

    .sfmenu .filter{
        margin-left:0;
        width:100%;
    }

    .sfmenu .filter ul{
        gap:.4rem;
    }

    .tabs > form > .search,
    .tabs > form > .search input{
        min-width:0;
    }

    .tabs > form > .search{
        flex:1 1 100%;
        width:100%;
    }

    .tabs > form > .search input{
        width:100%;
    }

    .listdata{
        overflow-y:auto;
    }

    .listdata .item{
        flex-direction:column;
        gap:.75rem;
        padding:1rem;
    }

    .listdata .item .payment{
        width:100%;
        align-items:flex-start;
        text-align:left;
    }

    .formdata{
        padding:1rem;
    }

    .formdata h3{
        font-size:1.15rem;
    }

    .insert{
        padding:.75rem;
    }

    .insert .flexbox,
    .action,
    .actions,
    .card-header{
        flex-direction:column;
    }

    .insert .flexbox > *{
        min-width:0;
        width:100%;
    }

    .action,
    .actions,
    .card-header{
        gap:.75rem;
        align-items:stretch;
    }

    .card{
        padding:1rem;
        border-radius:.5rem;
    }

    .table-responsive,
    main content .page.active{
        overflow-x:auto;
    }

    main content .page.active::-webkit-scrollbar{
        width: 0;
        height: 0;
    }


    table{
        min-width:42rem;
    }

    .laporan,
    .analitik,
    .daftar-laporan{
        width:calc(100% - 1rem);
    }

    .laporan{
        margin:.75rem auto;
    }

    .laporan .box-konten,
    .laporan .shu-container{
        padding:1rem;
    }

    .laporan .rincian,
    .laporan .total,
    .laporan .shu-container{
        align-items:flex-start;
        flex-direction:column;
        gap:.45rem;
    }

    .laporan .rincian .nilai,
    .laporan .total .nilai,
    .laporan .shu-nilai{
        overflow-wrap:anywhere;
    }

    .analitik{
        flex-direction:column;
        margin:.75rem auto;
    }

    .analitik .cardData{
        border-radius:.5rem;
        padding:1rem;
    }

    .analitik .cardData .card-value{
        font-size:1.35rem;
        overflow-wrap:anywhere;
    }

    .daftar-laporan{
        border-radius:.5rem;
        border: none;
    }
}

/* HP kecil */
@media (max-width:36rem){
    .flash{
        width:calc(100% - 1rem);
        margin:.75rem auto .5rem;
        padding:.7rem .85rem;
        border-radius:.5rem;
        font-size:.95rem;
    }

    .flash-success{
        background: var(--success-soft);
        color: var(--success-800);
        border: 0.063rem solid rgba(16,185,129,.35);
    }

    .flash-error{
        background: var(--danger-soft);
        color: var(--danger-800);
        border: 0.063rem solid rgba(239,68,68,.35);
    }

    header .title{
        font-size:1rem;
    }

    header .menu svg{
        width:1.3rem;
    }

    header .menu ul li a{
        width:2.15rem;
        height:2.15rem;
    }

    header .menu .dropdown{
        right:-.25rem;
        width:calc(100vw - 1rem);
    }

    main{
        padding:.5rem;
    }

    main aside{
        width:min(17.5rem,88vw);
    }

    main aside .user .person{
        gap:.6rem;
    }

    main aside .user .username{
        font-size:1rem;
    }

    main aside .user .username span{
        font-size:.86rem;
    }

    main content .tabs ul{
        padding:0 .5rem;
    }

    main content .tabs li a span{
        max-width:10rem;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .form{
        width:100%;
        margin:1rem 0 auto;
        padding:1rem;
    }

    .form h1{
        font-size:1.45rem;
    }

    .search input,
    .insert textarea,
    .insert input,
    .form button,
    .action button{
        font-size:1rem;
    }

    .cardlist .card{
        align-items:flex-start;
    }

    .cardlist .card .data span,
    .listdata .item span,
    .listdata .item small,
    table td,
    .laporan .label,
    .laporan .nilai{
        overflow-wrap:anywhere;
    }

    .error{
        width:calc(100vw - 1rem);
        padding:1.5rem 1rem;
    }
}