/* file: public/css/global.css */

/* === GRID & LAYOUT RESPONSIVE === */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col-md-8,
.col-md-4 {
    padding: 0.5rem;
}

/* Stack vertikal di layar kecil */
@media (max-width: 768px) {

    .col-md-8,
    .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Tabs scrollable / dropdown */
    #profile-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* === TABEL RESPONSIVE === */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* === AVATAR RESPONSIVE === */
.avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .avatar {
        width: 70px;
        height: 70px;
    }
}

/* === BUTTON RESPONSIVE === */
.btn-sm {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
}

@media (max-width: 768px) {
    .btn-sm {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* === HIDE BAGIAN DI SMARTPHONE === */
.hide-mobile {
    display: block;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* === ROLE-BASED BORDERS === */
.border-member {
    border: 3px solid #6c757d;
    /* Gray */
}

.border-moderator {
    border: 3px solid #28a745;
    /* Green */
}

.border-admin {
    border: 3px solid #007bff;
    /* Blue */
}

.border-superadmin {
    border: 3px solid #dc3545;
    /* Red */
}