:root{
    --admin-green:#198754;
    --admin-dark:#124d32;
    --admin-bg:#f3f6f4;
    --admin-border:#dfe8e2;
}

html,body{
    max-width:100%;
    overflow-x:hidden;
}

body{
    color:#24352d;
    background:var(--admin-bg) !important;
}

body > .container{
    width:calc(100% - 32px);
    max-width:1200px;
}

.card{
    overflow:hidden;
    border:1px solid var(--admin-border) !important;
    border-radius:14px !important;
    box-shadow:0 8px 24px rgba(21,70,45,.08) !important;
}

.card-header{
    min-height:62px;
    padding:16px 20px;
    border:0;
}

.card-header h3,.card-header h4{
    margin:0;
}

.card-body{
    padding:24px;
}

.form-label{
    color:#294638;
    font-weight:600;
}

.form-control,.form-select{
    min-height:46px;
    border-color:#ccd9d1;
    border-radius:9px;
}

textarea.form-control{
    min-height:140px;
}

.form-control:focus,.form-select:focus{
    border-color:#55a978;
    box-shadow:0 0 0 .2rem rgba(25,135,84,.12);
}

.btn{
    border-radius:8px;
}

.table{
    min-width:780px;
    margin-bottom:0;
}

.card-body:has(> .table){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.table th{
    white-space:nowrap;
}

.table td{
    vertical-align:middle;
}

.table img,.img-thumbnail{
    width:88px;
    height:68px;
    object-fit:cover;
    border-radius:8px;
}

.preview{
    max-width:100%;
    height:auto;
}

.admin-sidebar-toggle{
    display:none;
    width:44px;
    height:44px;
    color:#fff;
    background:var(--admin-green);
    border:0;
    border-radius:9px;
}

.admin-sidebar-overlay{
    display:none;
}

@media(max-width:767px){
    body > .container{
        width:calc(100% - 24px);
        margin-top:24px !important;
        margin-bottom:24px !important;
        padding:0;
    }

    .card-body{
        padding:18px;
    }

    .card-header{
        padding:15px 18px;
        flex-wrap:wrap;
        gap:10px;
    }

    .card-header h3,.card-header h4{
        width:100%;
        font-size:20px;
    }

    body > .container > .d-flex{
        align-items:stretch !important;
        flex-direction:column;
        gap:10px;
    }

    body > .container > .d-flex h3{
        margin-bottom:5px;
        font-size:24px;
    }

    body > .container > .d-flex .btn{
        width:100%;
    }

    .text-end{
        display:flex;
        flex-direction:column-reverse;
        gap:10px;
    }

    .text-end .btn{
        width:100%;
        margin:0;
    }

    .table{
        font-size:14px;
    }

    .login-box{
        width:calc(100% - 30px) !important;
        max-width:430px;
        padding:28px 22px !important;
        border-radius:15px !important;
    }

    body.admin-dashboard{
        overflow-x:hidden;
    }

    .admin-dashboard .sidebar{
        width:260px;
        z-index:1050;
        transform:translateX(-100%);
        transition:transform .25s ease;
        box-shadow:8px 0 25px rgba(0,0,0,.18);
    }

    .admin-dashboard .sidebar.is-open{
        transform:translateX(0);
    }

    .admin-dashboard .content{
        width:100%;
        margin-left:0;
    }

    .admin-dashboard .navbar{
        min-height:68px;
        padding:10px 14px !important;
    }

    .admin-dashboard .navbar .container-fluid{
        gap:12px;
        flex-wrap:nowrap;
    }

    .admin-dashboard .navbar h4{
        font-size:17px;
    }

    .admin-dashboard .navbar .admin-welcome{
        display:none;
    }

    .admin-sidebar-toggle{
        display:block;
        flex:0 0 44px;
    }

    .admin-sidebar-overlay{
        position:fixed;
        inset:0;
        z-index:1040;
        background:rgba(0,0,0,.35);
    }

    .admin-sidebar-overlay.is-open{
        display:block;
    }

    .admin-dashboard .content > .container{
        width:calc(100% - 24px);
        margin:20px auto !important;
        padding:0;
    }

    .admin-dashboard .content .col-md-3{
        width:100%;
    }

    .admin-dashboard .footer{
        margin-top:20px;
    }
}