/* =============================================================
   GLOBAL RESPONSIVE STYLES
   Applies to ALL list pages, form pages, and card layouts
   across the entire CRM application.
   Min-width support: 320px → Desktop
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   1. BASE — page layout overflow guard
   ───────────────────────────────────────────────────────────── */
.page-wrapper {
    min-width: 0 !important;
}

.page-content {
    min-width: 0 !important;
    overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────────────
   1.1 SIDEBAR HEADER — robust brand/logo layout
   ───────────────────────────────────────────────────────────── */
.sidebar-header {
    height: auto !important;
    min-height: 60px;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    /* Prevent app.css 'bottom: 0' from stretching header to full height */
    bottom: auto !important; 
}

.sidebar-header .logo-text {
    font-size: 1.05rem !important; 
    line-height: 1.2 !important;
    margin-left: 10px !important;
    margin-right: 5px !important;
    white-space: normal !important;
    word-break: break-word;
    flex: 1;
    /* Allow text to show fully without truncation unless it's extremely long */
    overflow: visible !important;
}

/* Ensure toggle arrow icon stays to the right and doesn't shrink */
.sidebar-header .toggle-icon {
    font-size: 20px !important;
    flex-shrink: 0;
    margin-left: auto;
}

/* ─── SIDEBAR COLLAPSED (Toggled) — Desktop Only ─── */
@media (min-width: 1025px) {
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-text {
        display: none !important;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        width: 70px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-icon {
        width: 35px !important;
        margin: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   2. CARD — allow button rows to render without clipping
   ───────────────────────────────────────────────────────────── */
.card {
    overflow: visible;
}

.card-body {
    overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────────
   3. CARD HEADER — global responsive stack pattern
   .card-header-responsive is added to ALL list page headers
   ───────────────────────────────────────────────────────────── */
.card-header-responsive {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 20px !important;
}

/* Title block */
.card-header-responsive .ch-title {
    flex: 1 1 180px;
    min-width: 0;
}

.card-header-responsive .ch-title h5 {
    font-size: 1rem;
    margin-bottom: 2px;
    word-break: break-word;
}

.card-header-responsive .ch-title small {
    font-size: 0.76rem;
    line-height: 1.3;
    display: block;
}

/* Buttons block */
.card-header-responsive .ch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

/* ── ≤575px: stack title → buttons ── */
@media (max-width: 575.98px) {
    .card-header-responsive {
        flex-direction: column !important;
        padding: 12px 14px !important;
        gap: 8px !important;
    }

    .card-header-responsive .ch-title {
        flex: 0 0 100% !important;
        width: 100%;
    }

    .card-header-responsive .ch-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .card-header-responsive .ch-actions .btn,
    .card-header-responsive .ch-actions .btn-group,
    .card-header-responsive .ch-actions .dropdown {
        flex: 1 1 auto;
        text-align: center;
    }

    .card-header-responsive .ch-actions .btn {
        font-size: 0.75rem !important;
        padding: 5px 8px !important;
    }

    .card-header-responsive .ch-actions .dropdown .btn {
        width: 100%;
        font-size: 0.82rem;
        padding: 6px 10px;
    }

    .card-header-responsive .ch-title h5 {
        font-size: 0.92rem;
    }
}

/* ── ≤380px extra compact ── */
@media (max-width: 380px) {
    .card-header-responsive {
        padding: 10px 10px !important;
    }

    .card-header-responsive .ch-actions .btn {
        font-size: 0.78rem;
        padding: 5px 8px;
    }
}

/* ─────────────────────────────────────────────────────────────
   4. CARD BODY — padding reduction on mobile
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .card-body.p-4 {
        padding: 1rem !important;
    }
}

@media (max-width: 360px) {
    .card-body.p-4 {
        padding: 0.65rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   5. DATATABLE BUTTONS ROW (Delete/Copy/Excel/CSV/PDF)
   Critical: DataTables applies negative margins that clip Delete
   ───────────────────────────────────────────────────────────── */
.dataTables_wrapper .dt-buttons {
    margin-left: 0 !important;
    padding-left: 0 !important;
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-width: 100% !important;
    overflow-x: visible !important;
}

.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons button {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   6. DATATABLE CONTROLS — length/search/pagination
   DOM structure: float-start > card-body py-3 > dataTables_length
                  float-end   > card-body py-3 > dataTables_filter + colvis btn
   ───────────────────────────────────────────────────────────── */

/* Table scrolls horizontally on mobile */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

/* ─────────────────────────────────────────────────────────────
   DATATABLE CONTROLS — global mobile layout fix
   ─────────────────────────────────────────────────────────────
   DataTables DOM structure (as rendered by column-visibility.js):
     .row > .col-sm-12
       .float-start > .card-body.py-3 > .dataTables_length
       .float-end   > .card-body.py-3 > .dataTables_filter
                                       #columnVisibilityContainer
   ───────────────────────────────────────────────────────────── */

/* Step 1: Remove excessive padding AND vertically center all controls */
.dataTables_wrapper .float-start>.card-body,
.dataTables_wrapper .float-end>.card-body,
.dataTables_wrapper .d-flex.align-items-center.justify-content-between>.card-body {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* ─── Tablet Optimization (Screen widths between mobile and full desktop) ─── */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .dataTables_wrapper .card-body.py-md-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Tighten export buttons */
    .dataTables_wrapper .dt-buttons {
        gap: 4px !important;
    }

    .dataTables_wrapper .dt-buttons .dt-button,
    .dataTables_wrapper .dt-buttons button {
        padding: 5px 10px !important;
        font-size: 0.85rem !important;
    }

    /* Shrink search box to fit on the same row as buttons if possible */
    .dataTables_wrapper .dataTables_filter input[type="search"] {
        max-width: 200px !important;
        height: 34px !important;
    }
    
    /* Make bulk actions row more compact */
    .card-body > .row.mb-3 {
        margin-bottom: 0.75rem !important;
    }

    /* Compact length menu for smaller tablets */
    @media (max-width: 1024.98px) {
        .dataTables_wrapper .dataTables_length label {
            font-size: 0 !important;
            color: transparent !important;
        }
        .dataTables_wrapper .dataTables_length label select {
            font-size: 0.85rem !important;
            color: initial !important;
        }
    }
}

/* dataTables_length label — inline centered */
.dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
}

/* dataTables_filter — inline flex so Columns + Search stay on same row */
.dataTables_wrapper .dataTables_filter {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto;
    min-width: 0;
}

.dataTables_wrapper .dataTables_filter label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

/* Search input stretches to fill */
.dataTables_wrapper .dataTables_filter input[type="search"] {
    flex: 1 1 auto;
    min-width: 50px;
    margin: 0 !important;
}

/* Columns visibility button — vertically centered */
#columnVisibilityContainer {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0;
    margin: 0 !important;
}



/* ─── ≤767px: clear floats → stacked rows ─── */
@media (max-width: 767.98px) {

    /* Clear Bootstrap floats so elements stack */
    .dataTables_wrapper .float-start,
    .dataTables_wrapper .float-end {
        float: none !important;
        display: block !important;
        width: 100% !important;
        clear: both;
    }

    .dataTables_wrapper .float-start>.card-body,
    .dataTables_wrapper .float-end>.card-body,
    .dataTables_wrapper .d-flex.flex-column>.card-body {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* Compact dataTables controls for narrow screens */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 0.75rem !important;
    }

    /* Smaller buttons for bulky actions */
    .btn-group .btn-sm,
    .dt-buttons .btn,
    .dt-buttons .dt-button {
        padding: 5px 8px !important;
        font-size: 0.75rem !important;
    }

    /* dataTables_filter label: inline flex so colvis + search are side by side */
    .dataTables_wrapper .dataTables_filter {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .dataTables_wrapper .dataTables_filter label {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* Search input expands to fill all remaining space */
    .dataTables_wrapper .dataTables_filter input[type="search"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 1px !important;
        margin: 0 !important;
        padding: 5px 10px !important;
        font-size: 0.85rem !important;
    }

    /* Colvis button: compact */
    #columnVisibilityContainer .column-visibility-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Show-entries row: compact, left-aligned */
    .dataTables_wrapper .dataTables_length {
        font-size: 0.85rem;
    }

    .dataTables_wrapper .dataTables_length select.form-select {
        font-size: 0.85rem !important;
        padding: 4px 22px 4px 8px !important;
    }

    /* Pagination */
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: left !important;
        float: none !important;
        display: block !important;
        font-size: 0.82rem;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 4px 8px !important;
        font-size: 0.78rem !important;
    }
}

/* ─── ≤575px: even more compact ─── */
@media (max-width: 575.98px) {

    .dataTables_wrapper .float-start>.card-body,
    .dataTables_wrapper .float-end>.card-body {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter label {
        font-size: 0.8rem !important;
    }

    .dataTables_wrapper .dataTables_length select.form-select {
        font-size: 0.8rem !important;
    }

    .dataTables_wrapper .dataTables_filter input[type="search"] {
        font-size: 0.8rem !important;
        padding: 4px 8px !important;
        height: 30px;
    }

    #columnVisibilityContainer .column-visibility-btn {
        font-size: 0.72rem !important;
        padding: 4px 6px !important;
        height: 28px !important;
    }
}


/* ── DataTables export buttons: evenly distributed, no orphans ── */
.dataTables_wrapper .dt-buttons {
    margin-left: 0 !important;
    padding-left: 0 !important;
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    padding: 4px 0 !important;
}

.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons button.dt-button {
    margin: 0 !important;
    flex: 1 1 auto;
    text-align: center;
}

@media (max-width: 575.98px) {

    /* Reduce gap to give more space */
    .dataTables_wrapper .dt-buttons {
        gap: 4px !important;
    }

    .dataTables_wrapper .dt-buttons .dt-button,
    .dataTables_wrapper .dt-buttons button.dt-button {
        font-size: 0.74rem !important;
        padding: 5px 2px !important;
        /* Force equal distribution for export buttons */
        flex: 1 1 0px !important;
        text-align: center;
        min-width: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Colvis dt-button (icon-type Columns button) — don't stretch */
    .dataTables_wrapper .dt-buttons .buttons-colvis {
        flex: 0 0 auto !important;
        max-width: none !important;
        padding: 5px 8px !important;
    }
}

@media (max-width: 380px) {
    .dataTables_wrapper .dt-buttons {
        gap: 3px !important;
    }

    .dataTables_wrapper .dt-buttons .dt-button,
    .dataTables_wrapper .dt-buttons button.dt-button {
        font-size: 0.7rem !important;
        padding: 4px 3px !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   7. TABLE CELL — font scaling on small screens
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    #datatable td,
    #datatable th {
        font-size: 0.82rem;
        padding: 0.4rem 0.5rem;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {

    #datatable td,
    #datatable th {
        font-size: 0.76rem;
        padding: 0.3rem 0.4rem;
    }
}

@media (max-width: 320px) {

    #datatable td,
    #datatable th {
        font-size: 0.7rem;
        padding: 0.25rem 0.3rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   8. GRID COLUMNS — all col-md-* go 100% on mobile
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .row.g-3>[class*="col-md-"]:not([class*="col-1"]):not([class*="col-2"]):not([class*="col-3"]):not([class*="col-4"]):not([class*="col-5"]):not([class*="col-6"]):not([class*="col-7"]):not([class*="col-8"]):not([class*="col-9"]) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   9. FORM FIELDS & SELECT2
   ───────────────────────────────────────────────────────────── */
.select2-container {
    max-width: 100% !important;
    width: 100% !important;
}

@media (max-width: 575.98px) {

    .form-control,
    .form-select {
        font-size: 0.88rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 0.88rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   10. SUBMIT / CLOSE BUTTONS (form footers)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .d-md-flex.d-grid.align-items-center.gap-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100%;
    }

    .d-md-flex.d-grid.align-items-center.gap-3 .btn {
        width: 100% !important;
        text-align: center;
    }
}

/* ─────────────────────────────────────────────────────────────
   11. BREADCRUMB
   ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .breadcrumb {
        font-size: 0.78rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 360px) {
    .breadcrumb {
        font-size: 0.7rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   12. NAV TABS (form pages)
   ───────────────────────────────────────────────────────────── */
.nav-tabs {
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .nav-tabs .nav-item .nav-link {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}

@media (max-width: 380px) {
    .nav-tabs .nav-item .nav-link {
        font-size: 0.72rem;
        padding: 5px 7px;
    }

    .nav-tabs .tab-title {
        display: none;
    }

    .nav-tabs .tab-icon i {
        font-size: 1.1rem;
        margin-right: 0 !important;
    }
}