/* Responsive media queries extracted from site.css */

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media (min-width:768px) {
    aside {
        border-right: 1px solid #ddd;
    }
}

@media (max-width:767.98px) {
    .admin-layout {
        flex-direction: column;
    }
}

@media (max-width:991.98px) {
    .user-display-name {
        display: none;
    }
}

/* Remove previous font-size shrinking of admin sidebar to keep stable sizing */
@media (max-width: 991.98px) {
    .admin-item {
        padding: .5rem .75rem;
    }
}

@media (max-width: 575.98px) {
    .login-form input.form-control-sm,
    .login-form button.btn-sm {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width:575.98px) {
    .login-card {
        box-shadow: none;
        border: 0;
        padding: 1.25rem 0;
    }
}

/* Users table responsive adjustments */
@media (max-width: 1400px) {
    .users-table .roles-cell {
        max-width: 200px;
    }
}

@media (max-width: 1200px) {
    .users-table .roles-cell {
        max-width: 160px;
    }
}

@media (max-width: 992px) {
    .users-table .col-email,
    .users-table .col-roles {
        display: none;
    }

    .users-table .truncate {
        max-width: 130px;
    }
}
/* On small screens keep columns stacked */
@media (max-width: 767.98px) {
    #contactsMasterDetail.detail-open .col-md-5,
    #contactsMasterDetail.detail-open .col-md-7,
    #contactsMasterDetail:not(.detail-open) .col-md-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* keep panel hidden by default on small screens to avoid cramped UI */
    #contactDetailPanel {
        display: none !important;
    }
}


/* small-screen: disable splitter and ensure detail stacks */
@media (max-width: 767.98px) {
    .contacts-splitter {
        display: none !important;
    }

    .col-md-7, .col-md-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #detailColumn {
        width: 100% !important;
    }
}
@media (max-width:576px) {
    /* Slightly larger tappable area on mobile */
    #mainNav .nav-link {
        padding: .5rem 0.75rem;
    }
}
/* Optional: Improve responsiveness on smaller screens */
@media (max-width: 575.98px) {
    .filter-row {
        flex-direction: column;
    }

    .search-col,
    .fixed-col,
    .action-col {
        width: 100%;
        min-width: 0;
    }
}