/* ================= LARGE ================= */

@media(max-width:1400px){

    .main-content{

        padding:20px;
    }
}

/* ================= LAPTOP TABLE FIT ================= */

@media(min-width:1181px) and (max-width:1440px){

    .table thead th{

        padding:10px 8px;

        font-size:12px;

        letter-spacing:0.15px;
    }

    .table tbody td{

        padding:10px 8px;

        font-size:13px;
    }

    .table-compact thead th{

        padding:9px 8px;

        font-size:11.5px;
    }

    .table-compact tbody td{

        padding:8px;

        font-size:12.8px;
    }

    .table-kader{

        min-width:1360px;

        width:1360px;
    }

    .table-kader .col-name{

        width:190px;

        min-width:190px;

        max-width:190px;
    }

    .table-kader .col-role{

        width:220px;

        min-width:220px;

        max-width:220px;
    }

    .table-halaqah{

        min-width:780px;
    }

    .table-attendance{

        min-width:850px;
    }

    .table-position{

        min-width:1080px;
    }

    .table-action{

        gap:5px;
    }

    .btn-action,
    .btn-table-icon{

        width:30px;

        height:30px;

        min-width:30px;

        min-height:30px;

        flex-basis:30px;
    }

    .table-responsive > .table[style*="min-width"]{

        min-width:min(100%, 1040px) !important;
    }
}

/* ================= SMALL DESKTOP / IPAD LANDSCAPE ================= */

@media(min-width:993px) and (max-width:1180px){

    :root{

        --sidebar-width:240px;
    }

    .sidebar{

        padding:18px 12px;
    }

    .sidebar-link{

        padding:11px 12px;

        gap:10px;
    }

    .sidebar-icon{

        font-size:18px;
    }

    .brand-title{

        font-size:19px;
    }

    .main-content{

        padding:20px;
    }

    .topbar{

        padding:0 18px;
    }

    .card-box{

        padding:18px;
    }

    .dashboard-grid{

        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .dashboard-stat{

        min-height:96px;

        padding:14px;

        gap:10px;
    }

    .dashboard-stat-icon{

        width:38px;

        height:38px;

        border-radius:10px;

        font-size:19px;
    }

    .dashboard-stat-value{

        font-size:23px;
    }

    .dashboard-stat-note{

        font-size:12px;
    }

    .dashboard-metrics{

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

    .program-nav-grid{

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

    .page-header{

        margin-bottom:18px;
    }

    .table-kader{

        min-width:1360px;

        width:1360px;
    }

    .table-kader .col-role{

        width:220px;

        min-width:220px;

        max-width:220px;
    }

    .table-kader .col-name{

        width:190px;

        min-width:190px;

        max-width:190px;
    }

    .table-responsive > .table[style*="min-width"]{

        min-width:min(100%, 1040px) !important;
    }
}

/* ================= TABLET ================= */

@media(max-width:992px){

    :root{

        --sidebar-width:0px;
    }

    .sidebar{

        width:300px;

        max-width:86vw;

        z-index:1120;

        transform:translateX(-100%);

        transition:transform 0.18s ease;

        will-change:transform;
    }

    .sidebar-brand{

        gap:8px;

        margin-bottom:22px;
    }

    .menu-group{

        margin-bottom:9px;
    }

    .menu-title{

        border-radius:12px;

        font-size:11.5px;

        min-height:40px;

        padding:10px 12px;
    }

    .sidebar-menu{

        gap:4px;

        margin-left:6px;

        padding:4px 0 8px 12px;
    }

    .sidebar-link{

        border-radius:10px;

        font-size:14px;

        min-height:42px;

        padding:9px 10px;
    }

    .sidebar-icon{

        font-size:16px;

        min-width:19px;

        width:19px;
    }

    .brand-logo-wrap{

        width:40px;

        height:40px;

        flex-basis:40px;
    }

    .brand-title{

        font-size:19px;
    }

    .brand-subtitle{

        font-size:9.5px;
    }

    .sidebar.active{

        transform:translateX(0);
    }

    .sidebar-overlay{

        display:block;

        position:fixed;

        inset:0;

        background:rgba(15,23,42,0.28);

        opacity:0;

        visibility:hidden;

        z-index:1110;

        transition:opacity 0.15s ease;

        touch-action:manipulation;
    }

    .sidebar-overlay.active{

        opacity:1;

        visibility:visible;
    }

    .content-wrapper{

        margin-left:0;
    }

    .mobile-toggle{

        display:flex;
    }

    .topbar{

        padding:0 20px;

    }

    .main-content{

        padding:18px;
    }

    .page-header{

        flex-direction:row;

        align-items:center;

        flex-wrap:wrap;

        margin-bottom:18px;
    }

    .page-title{

        font-size:23px;
    }

    .card-box{

        padding:18px;
    }

    .dashboard-grid{

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

    .dashboard-metrics{

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

    .filter-card .row,
    .card-box .row{

        row-gap:12px;
    }

    .table-kader{

        min-width:1360px;

        width:1360px;
    }

    .table-kader .col-role{

        width:220px;

        min-width:220px;

        max-width:220px;
    }

    .table-kader .col-name{

        width:190px;

        min-width:190px;

        max-width:190px;
    }

    .table-halaqah{

        min-width:800px;
    }

    .table-attendance{

        min-width:880px;
    }
}

/* ================= MOBILE ================= */

@media(max-width:768px){

    .topbar{

        position:fixed;

        top:0;

        left:0;

        right:0;

        z-index:1100;

        height:auto;

        min-height:72px;

        padding:14px 16px;

        gap:14px;

        flex-wrap:nowrap;
    }

    .topbar-right{

        width:auto;

        justify-content:flex-end;
    }

    .main-content{

        padding:100px 14px 14px;
    }

    .card-box{

        padding:14px;

        box-shadow:none;
    }

    .dashboard-grid{

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

        gap:10px;
    }

    .dashboard-stat{

        align-items:flex-start;

        min-height:104px;

        padding:12px;

        gap:9px;
    }

    .dashboard-stat-icon{

        width:34px;

        height:34px;

        border-radius:9px;

        font-size:17px;
    }

    .dashboard-stat-label{

        font-size:11px;

        line-height:1.2;
    }

    .dashboard-stat-value{

        font-size:22px;
    }

    .dashboard-stat-note{

        font-size:11px;

        line-height:1.25;
    }

    .dashboard-metrics{

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

        gap:8px;
    }

    .dashboard-metric{

        min-height:76px;

        padding:11px;
    }

    .dashboard-metric strong{

        font-size:22px;
    }

    .dashboard-shortcuts{

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

        gap:8px;
    }

    .dashboard-shortcut{

        min-height:44px;

        padding:9px 10px;

        gap:7px;

        font-size:14px;
    }

    .dashboard-shortcut i{

        font-size:16px;
    }

    .dashboard-list-compact-grid{

        display:grid;

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

        gap:8px;
    }

    .dashboard-list-compact-grid .dashboard-list-row{

        min-height:44px;

        padding:9px 10px;
    }

    .program-nav-grid{

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

        gap:10px;
    }

    .program-nav-card{

        padding:11px;

        gap:9px;
    }

    .program-nav-icon{

        width:32px;

        height:32px;

        flex-basis:32px;

        font-size:16px;
    }

    .program-nav-title{

        font-size:14px;
    }

    .program-nav-text{

        font-size:12px;
    }

    .detail-card{

        padding:12px;
    }

    .page-title{

        font-size:21px;
    }

    .page-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .table thead th{

        font-size:12px;

        padding:11px 10px;
    }

    .table tbody td{

        padding:11px 10px;

        font-size:13px;
    }

    .btn{

        width:auto;
    }

    .table-filter-bar{

        flex-direction:column;

        align-items:stretch;
    }

    .pagination{

        justify-content:center;

        gap:6px;
    }

    .mobile-filter-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:8px;
    }

    .mobile-filter-body{

        display:none;

        margin-top:12px;
    }

    .mobile-filter-body.is-open{

        display:block;
    }

    .wow-summary-grid{

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

        gap:8px;
    }

    .wow-summary-card{

        min-height:86px;

        padding:11px;
    }

    .wow-summary-value{

        font-size:21px;
    }

    .wow-table-desktop{

        display:none !important;
    }

    .table-responsive.wow-table-desktop{

        display:none !important;
    }

    .wow-mobile-cards{

        display:block;
    }

    .detail-card-mobile-friendly .detail-table-desktop{

        display:none !important;
    }

    .detail-card-mobile-friendly .detail-mobile-cards{

        display:block;
    }

    .wow-workflow-strip{

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

@media(max-width:992px){

    .table-responsive.wow-table-desktop{

        display:none !important;
    }

    .wow-mobile-cards{

        display:block !important;
    }

    .detail-card-mobile-friendly .detail-table-desktop{

        display:none !important;
    }

    .detail-card-mobile-friendly .detail-mobile-cards{

        display:block;
    }
}

/* ================= SMALL MOBILE ================= */

@media(max-width:576px){

    .main-content{

        padding:96px 12px 12px;
    }

    .card-box{

        border-radius:10px;

        padding:12px;
    }

    .topbar{

        padding:12px;
    }

    .profile-info{

        display:none;
    }

    .page-title{

        font-size:19px;
    }

    .table{

        min-width:640px;
    }

    .table-attendance{

        min-width:920px;
    }

    .table-kader{

        min-width:1360px;

        width:1360px;
    }

    .table-kader .col-role{

        width:220px;

        min-width:220px;

        max-width:220px;
    }

    .table-kader .col-name{

        width:190px;

        min-width:190px;

        max-width:190px;
    }

    .btn{

        font-size:14px;

        min-height:42px;
    }

    .btn-table-icon{

        width:32px;

        height:32px;

        min-width:32px;

        min-height:32px;

        flex-basis:32px;

        font-size:14px;
    }

    .sidebar{

        width:260px;

        box-shadow:none;
    }

    .brand-logo-wrap{

        width:36px;

        height:36px;

        flex-basis:36px;
    }

    .brand-title{

        font-size:18px;
    }

    .brand-subtitle{

        font-size:8.8px;
    }

    .sidebar-link{

        padding:11px 12px;

        border-radius:8px;
    }

    .filter-card,
    .table-card{

        border-radius:10px;

        box-shadow:none;
    }
}

@media(max-width:430px){

    .program-nav-grid{

        grid-template-columns:1fr;
    }

    .program-flow-steps{

        grid-template-columns:1fr;
    }

    .dashboard-workflow-grid{

        grid-template-columns:1fr;
    }
}

@media(min-width:769px) and (max-width:1180px){

    .dashboard-workflow-grid{

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

@media(max-width:768px){

    .program-flow-steps{

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

    .program-flow-step{

        min-height:auto;

        padding:10px;
    }

    .dashboard-workflow-grid{

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

    .dashboard-workflow-card{

        min-height:144px;

        padding:12px;
    }

    .dashboard-quality-grid{

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

    .dashboard-health-score strong{

        font-size:29px;
    }
}

@media(max-width:380px){

    .dashboard-grid{

        gap:8px;
    }

    .dashboard-stat{

        min-height:100px;

        padding:10px;
    }

    .dashboard-stat-icon{

        width:32px;

        height:32px;
    }

    .dashboard-stat-value{

        font-size:21px;
    }

    .dashboard-metrics{

        grid-template-columns:1fr;
    }

    .dashboard-quality-grid{

        grid-template-columns:1fr;
    }
}

/* ================= MOBILE PERFORMANCE ================= */

@media(max-width:992px){

    html{

        scroll-behavior:auto;
    }

    body,
    button,
    a,
    input,
    select,
    textarea,
    summary{

        touch-action:manipulation;
    }

    .card-box,
    .dashboard-stat,
    .dashboard-workflow-card,
    .filter-card,
    .table-card,
    .report-card,
    .program-card,
    .meeting-card,
    .decision-card,
    .decision-unified-card,
    .followup-card,
    .sidebar,
    .topbar-profile-menu{

        box-shadow:none !important;
    }

    .dashboard-workflow-card,
    .btn,
    .action-btn,
    .sidebar-link,
    .nav-link,
    .page-help-trigger,
    .decision-card,
    .decision-unified-card{

        transition:background-color .08s ease, border-color .08s ease, color .08s ease !important;
        transform:none !important;
    }

    .dashboard-workflow-card:hover,
    .btn:hover,
    .action-btn:hover,
    .decision-card:hover,
    .decision-unified-card:hover{

        transform:none !important;
    }

    .table-responsive,
    .table-scroll,
    .data-table-wrap{

        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
    }

    .program-responsive-table{

        display:none;
    }

    .mobile-list-cards{

        display:block;

        padding:0 12px 12px;
    }

    .mobile-work-card-actions{

        grid-template-columns:1fr 1fr;
    }
}

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        transition:none !important;

        animation:none !important;
    }
}

@media(max-width:430px){

    .program-flow-steps{

        grid-template-columns:1fr;
    }
}