/*
 * Responsive overrides shared by the admin, auth and public layouts.
 * Loaded after the theme and custom.css so these rules win.
 */

/* ---------- Fluid typography ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-size: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
    overflow-wrap: break-word;
}
h1, .h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); }
h3, .h3 { font-size: clamp(1.2rem, 1rem + 0.9vw, 1.75rem); }
h4, .h4 { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem); }
h5, .h5 { font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); }
h6, .h6 { font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); }

/* Keep secondary text (hints, badges, theme labels) at a readable 12px minimum. */
.text-xs { font-size: 0.75rem; }
small, .small { font-size: max(80%, 0.75rem); }
.badge { font-size: max(75%, 0.75rem); }

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

/* ---------- Admin: sidebar becomes a slide-in menu on phones/tablets ---------- */
@media (max-width: 767.98px) {
    #wrapper #content-wrapper {
        width: 100%;
        min-width: 0;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1045;
        width: 15rem !important;
        overflow-y: auto !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease-out;
        box-shadow: none;
    }
    .sidebar.toggled {
        width: 15rem !important;
        transform: translateX(0);
        overflow: visible;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25);
    }
    .sidebar .nav-item .nav-link,
    .sidebar.toggled .nav-item .nav-link {
        width: 100% !important;
        text-align: left !important;
        padding: 0.85rem 1.25rem !important;
    }
    .sidebar .nav-item .nav-link i,
    .sidebar.toggled .nav-item .nav-link i {
        font-size: 0.95rem !important;
        margin-right: 0.5rem;
        display: inline-block !important;
    }
    .sidebar .nav-item .nav-link span,
    .sidebar.toggled .nav-item .nav-link span {
        font-size: 0.95rem !important;
        display: inline !important;
    }
    .sidebar .nav-item .collapse,
    .sidebar.toggled .nav-item .collapse {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin: 0 1rem !important;
        z-index: 1 !important;
    }
    .sidebar .sidebar-brand,
    .sidebar.toggled .sidebar-brand {
        height: auto;
        padding: 1rem;
    }
    .sidebar #sidebarToggle { display: none; }
    body.sidebar-toggled::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1044;
    }

    /* Topbar: keep icons, drop long labels */
    .topbar { padding-left: 0.5rem; padding-right: 0.5rem; }
    .topbar .nav-link .topbar-label { display: none; }
}

/* ---------- Page headers (icon + title + action buttons) ---------- */
.container-fluid > .d-sm-flex:first-child {
    flex-wrap: wrap;
    gap: 0.75rem;
}
.container-fluid > .d-sm-flex:first-child > div {
    min-width: 0;
}
@media (max-width: 575.98px) {
    .container-fluid > .d-sm-flex:first-child > .d-flex:last-child {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .container-fluid > .d-sm-flex:first-child > .d-flex:last-child > .btn,
    .container-fluid > .d-sm-flex:first-child > .d-flex:last-child > a {
        margin-right: 0 !important;
    }
    .container-fluid > .d-sm-flex:first-child .rounded-circle[style*="60px"] {
        width: 44px !important;
        height: 44px !important;
    }
    .container-fluid > .d-sm-flex:first-child .rounded-circle[style*="60px"] i {
        font-size: 1.1rem !important;
    }
    .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
    .card-body { padding: 1rem; }
}

/* ---------- Forms & filter rows ---------- */
@media (max-width: 767.98px) {
    .card-body .row > [class*="col-md-"] {
        margin-bottom: 0.5rem;
    }
    .card-body .row > [class*="col-md-"].d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .card-footer .btn { margin-bottom: 0.25rem; }
    input[type="file"].form-control,
    input[type="file"] {
        max-width: 100%;
    }
}

/* ---------- Tables / DataTables ---------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}
/* When DataTables sits inside .table-responsive, scroll only the table, not the search/paging controls. */
.table-responsive:has(> .dataTables_wrapper) {
    overflow-x: visible;
}
.dataTables_wrapper > .row > [class*="col-"]:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 767.98px) {
    .table th,
    .table td {
        white-space: nowrap;
    }
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: left !important;
        margin-bottom: 0.5rem;
    }
    div.dataTables_wrapper div.dataTables_filter label {
        display: block;
        width: 100%;
        white-space: normal !important;
    }
    div.dataTables_wrapper div.dataTables_filter input {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0.25rem;
    }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }
    div.dataTables_wrapper div.dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* ---------- Modals ---------- */
@media (max-width: 575.98px) {
    .modal-dialog:not(.mufti-drawer .modal-dialog) {
        margin: 0.5rem;
    }
}