/**
 * ACCGES - Responsive CSS (shared across all layouts)
 * Breakpoints: 992px (sidebar), 768px (tablet), 576px (mobile), 400px (extra-small)
 * 
 * This file provides comprehensive responsive rules for:
 * - Modals (including tabbed modals, preview modals, fullscreen modals)
 * - Tables & DataTables
 * - Navigation tabs & pills
 * - Forms, buttons, inputs
 * - Cards, grids, flex containers
 * - Page headers & toolbars
 */

/* ============================================================
   BASE: Prevent horizontal overflow
   ============================================================ */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

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

/* ============================================================
   MODAL RESPONSIVE — All breakpoints
   ============================================================ */

/* --- Tablet (≤992px): Modal side-tabs become horizontal scrollable strip --- */
@media (max-width: 992px) {
    /* Tabbed modals: stack sidebar above content */
    .modal-body .row.g-0,
    .modal-body .row.g-0.h-100 {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }
    .modal-body .col-lg-3.border-end,
    .modal-body .col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0;
    }
    .modal-body .col-lg-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Nav pills inside modals: horizontal scrollable strip */
    .modal-body .nav.flex-lg-column,
    .modal-body .nav-pills {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin;
        padding: 8px !important;
        gap: 4px !important;
        position: relative !important;
    }
    .modal-body .nav-pills .nav-link,
    .modal-body .nav.flex-lg-column .nav-link {
        white-space: nowrap !important;
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Scrollbar styling for horizontal tabs */
    .modal-body .nav-pills::-webkit-scrollbar,
    .modal-body .nav.flex-lg-column::-webkit-scrollbar {
        height: 3px;
    }
    .modal-body .nav-pills::-webkit-scrollbar-thumb,
    .modal-body .nav.flex-lg-column::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
        border-radius: 10px;
    }
    
    /* Modal dialog sizing */
    .modal-xl, .modal-lg {
        max-width: calc(100% - 1rem) !important;
    }
    
    /* Fixed height containers in modals must become auto */
    .modal-body[style*="max-height: 70vh"],
    .modal-body[style*="max-height:70vh"] {
        max-height: none !important;
        overflow: visible !important;
    }
    .modal-body .row.g-0[style*="height: 70vh"],
    .modal-body .row.g-0[style*="height:70vh"] {
        height: auto !important;
    }
    .modal-body .col-lg-3[style*="max-height: 70vh"],
    .modal-body .col-lg-9[style*="max-height: 70vh"] {
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* --- Mobile (≤576px): Modals become near-fullscreen --- */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.25rem !important;
        max-width: calc(100% - 0.5rem) !important;
        max-height: calc(100dvh - 0.5rem) !important;
    }
    .modal-dialog.modal-dialog-centered {
        min-height: calc(100dvh - 0.5rem) !important;
    }
    .modal-content {
        max-height: calc(100dvh - 0.5rem) !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 1rem !important;
    }
    .modal-header {
        flex-shrink: 0 !important;
        padding: 0.75rem 1rem !important;
        border-radius: 1rem 1rem 0 0 !important;
    }
    .modal-header h4,
    .modal-header h5,
    .modal-header .modal-title {
        font-size: 0.95rem !important;
    }
    .modal-header .d-flex.gap-3 {
        gap: 0.5rem !important;
    }
    .modal-header .p-3.rounded-4,
    .modal-header .bg-white.bg-opacity-10.p-3 {
        padding: 0.5rem !important;
    }
    .modal-header .p-3.rounded-4 i.fs-2,
    .modal-header .bg-white.bg-opacity-10.p-3 i.fs-2 {
        font-size: 1.25rem !important;
    }
    .modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        padding: 0.75rem !important;
    }
    .modal-footer {
        flex-shrink: 0 !important;
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    /* Large/XL modals full-width */
    .modal-xl, .modal-lg {
        max-width: 100% !important;
    }
    
    /* Tab content padding reduce */
    .modal .tab-content {
        padding: 0.75rem !important;
    }
    .modal .tab-content .p-4,
    .modal .tab-content .p-lg-5 {
        padding: 0.75rem !important;
    }
    
    /* Modal nav-pills on mobile: smaller, tighter */
    .modal-body .nav-pills .nav-link,
    .modal-body .nav.flex-lg-column .nav-link {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
    
    /* Fixed-actions bar inside modals */
    .fixed-actions {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        padding: 15px 10px !important;
        background: #fff !important;
        backdrop-filter: none !important;
    }
}

/* ============================================================
   PREVIEW MODAL — Responsive iframe
   ============================================================ */
@media (max-width: 768px) {
    #modalPreview .modal-dialog {
        max-width: 100% !important;
        margin: 0 !important;
        height: 100dvh !important;
    }
    #modalPreview .modal-content {
        height: 100dvh !important;
        border-radius: 0 !important;
    }
    #modalPreview .modal-header {
        border-radius: 0 !important;
        padding: 0.5rem 0.75rem !important;
    }
    #modalPreview .modal-header h6 {
        font-size: 0.8rem !important;
    }
    #modalPreview .modal-body {
        flex: 1 !important;
        padding: 0 !important;
    }
    #modalPreview #previewIframe {
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================================
   TABLE RESPONSIVE
   ============================================================ */

/* Always wrap tables in scrollable containers */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

@media (max-width: 768px) {
    .table {
        font-size: 0.82rem;
    }
    .table th, .table td {
        padding: 0.5rem 0.4rem !important;
    }
    /* DataTables: control & info row stack */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        margin-bottom: 0.5rem;
    }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin-top: 0.5rem;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Prevent table cells from being too wide */
    .table td, .table th {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 576px) {
    .table {
        font-size: 0.78rem;
    }
    .table th, .table td {
        padding: 0.4rem 0.3rem !important;
        white-space: nowrap;
    }
    .table thead th {
        font-size: 0.65rem !important;
    }
    /* Premium table styles (used in RH) */
    .table-premium thead th {
        padding: 10px 12px !important;
        font-size: 0.6rem !important;
        letter-spacing: 0.5px !important;
    }
    .table-premium tbody td {
        padding: 10px 12px !important;
    }
}

/* ============================================================
   NAV TABS / NAV PILLS — Page-level (not modal)
   ============================================================ */
@media (max-width: 768px) {
    /* Premium tabs bar (used in perfil.php) */
    .premium-tabs-bar {
        margin: 15px 0 0 !important;
        padding: 0 5px !important;
        border-radius: 16px 16px 0 0 !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .nav-tabs-premium .nav-link {
        padding: 12px 14px !important;
        font-size: 0.7rem !important;
    }
    
    /* Pills premium (used in RH index pages) */
    .nav-pills-premium {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100%;
    }
    .nav-pills-premium .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        font-size: 0.75rem !important;
    }
    
    /* Standard nav-tabs-bordered */
    .nav-tabs-bordered {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .nav-tabs-bordered .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 576px) {
    .nav-tabs-premium .nav-link span.d-none {
        display: none !important;
    }
    .nav-tabs-premium .nav-link {
        padding: 10px 10px !important;
        font-size: 0.65rem !important;
    }
    .nav-pills-premium .nav-link {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
    }
}

/* ============================================================
   PAGE HEADER / TOOLBAR — Responsive
   ============================================================ */
@media (max-width: 768px) {
    /* Page title + action buttons row */
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    /* Button groups in headers */
    .d-flex.align-items-center.gap-3 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    /* Year selector fixed width override */
    select[style*="width:100px"],
    select[style*="width: 100px"] {
        width: auto !important;
        min-width: 80px !important;
    }
}

@media (max-width: 576px) {
    /* Stack page header buttons vertically */
    .d-flex.justify-content-between.align-items-center.mb-4 > .d-flex {
        width: 100%;
    }
    .d-flex.justify-content-between.align-items-center.mb-4 > .d-flex > .btn {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.75rem !important;
    }
}

/* ============================================================
   RH PONTO MODAL — Toolbar responsive
   ============================================================ */
@media (max-width: 992px) {
    /* Override fixed-width inputs in ponto modal */
    #modalPonto input[style*="width: 150px"],
    #modalPonto input[style*="width: 130px"],
    #modalPonto input[style*="width: 140px"],
    #modalPonto input[style*="width: 110px"],
    #modalPonto input[style*="width:150px"],
    #modalPonto input[style*="width:130px"],
    #modalPonto input[style*="width:140px"],
    #modalPonto input[style*="width:110px"] {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* KPI cards in ponto */
    #modalPonto div[style*="min-width: 140px"],
    #modalPonto div[style*="min-width:140px"] {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
}

@media (max-width: 768px) {
    /* Ponto toolbar: stack sections vertically */
    #modalPonto .d-flex.flex-wrap.gap-2 {
        flex-direction: column !important;
    }
    #modalPonto .d-flex.flex-wrap.gap-2 > .d-flex {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    /* KPI row: stack KPI cards */
    #modalPonto .d-flex.gap-3.justify-content-end {
        justify-content: stretch !important;
        width: 100%;
    }
    #modalPonto .d-flex.gap-3.justify-content-end > div {
        flex: 1 !important;
        min-width: 0 !important;
    }
    /* Labels in toolbar */
    #modalPonto label.text-nowrap {
        white-space: normal !important;
    }
}

@media (max-width: 576px) {
    #modalPonto .modal-body .bg-white.p-4 {
        padding: 0.75rem !important;
    }
    #modalPonto .modal-body .p-4 {
        padding: 0.75rem !important;
    }
    #modalPonto .d-flex.align-items-center.gap-2.border.rounded-3.p-2 {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        padding: 0.5rem !important;
    }
    #modalPonto .d-flex.align-items-center.gap-2.border.rounded-3.p-2 input {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    #modalPonto .d-flex.align-items-center.gap-2.border.rounded-3.p-2 .btn {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* ============================================================
   RH ESCALA MODAL — Premium responsive (styles in modal <style>)
   ============================================================ */
@media (max-width: 768px) {
    /* Monthly grid: 2 columns on tablet, 1 on mobile */
    #monthly_grid_container .col,
    #monthly_grid_container > div {
        min-width: 50% !important;
    }
}
@media (max-width: 576px) {
    #monthly_grid_container .col,
    #monthly_grid_container > div {
        min-width: 100% !important;
    }
}

/* ============================================================
   RH CONTRATO MODAL — Remove fixed heights
   ============================================================ */
@media (max-width: 992px) {
    #modalContrato .modal-body[style],
    #modalContrato .modal-body {
        max-height: none !important;
        overflow: visible !important;
    }
    #modalContrato .row.g-0[style] {
        height: auto !important;
    }
    #modalContrato .col-lg-3[style],
    #modalContrato .col-lg-9[style] {
        max-height: none !important;
        overflow-y: visible !important;
    }
    /* Nav pills: horizontal on tablet */
    #modalContrato .nav.flex-column {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #modalContrato .nav.flex-column .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 576px) {
    #modalContrato .tab-content {
        padding: 0.75rem !important;
    }
    #modalContrato .tab-content .p-4,
    #modalContrato .tab-content .p-lg-5 {
        padding: 0.75rem !important;
    }
}

/* ============================================================
   RH FUNCIONARIO MODAL — Tab stacking
   ============================================================ */
@media (max-width: 992px) {
    #modalAdmitir .modal-body .row.g-0 {
        display: flex !important;
        flex-direction: column !important;
    }
    #modalAdmitir .col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    #modalAdmitir .col-lg-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    #modalAdmitir .nav.flex-lg-column {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
    }
    #modalAdmitir .nav .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 576px) {
    #modalAdmitir .tab-content {
        padding: 0.75rem !important;
    }
    #modalAdmitir .tab-content .p-3,
    #modalAdmitir .tab-content .p-lg-5 {
        padding: 0.75rem !important;
    }
    #modalAdmitir .nav .nav-link {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }
}

/* ============================================================
   FORMS — Responsive
   ============================================================ */
@media (max-width: 768px) {
    /* Form rows stack on tablet */
    .row.g-3 > [class*="col-md-6"],
    .row.g-4 > [class*="col-md-6"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Input groups with fixed max-widths */
    .input-group[style*="max-width"] {
        max-width: 100% !important;
    }
    /* Touch-friendly inputs */
    .form-control, .form-select {
        min-height: 40px;
    }
    .form-check-input {
        width: 1.15em !important;
        height: 1.15em !important;
    }
}

@media (max-width: 576px) {
    /* Force all grid columns to full-width on phones */
    .modal .row > [class*="col-md-"],
    .modal .row > [class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Exception for half-width pairs */
    .modal .row > .col-md-6:has(+ .col-md-6),
    .modal .row > .col-6 {
        /* Keep 50% for explicit col-6 */
    }
    .form-control-lg {
        font-size: 0.95rem !important;
    }
}

/* ============================================================
   BUTTONS — Touch-friendly
   ============================================================ */
@media (max-width: 768px) {
    .btn-sm {
        min-height: 38px;
        padding: 0.4rem 0.75rem !important;
    }
    .btn-group .btn {
        min-height: 38px;
    }
    .badge {
        font-size: 0.7rem !important;
    }
    /* RH action buttons */
    .btn-rh {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 576px) {
    .btn {
        min-height: 42px;
    }
    .btn-sm {
        min-height: 38px;
        padding: 0.4rem 0.65rem !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================================
   CARDS — Responsive
   ============================================================ */
@media (max-width: 768px) {
    .card {
        min-width: 0 !important;
    }
}

@media (max-width: 576px) {
    .card-body {
        padding: 0.75rem !important;
    }
    .card-header {
        padding: 0.65rem 0.75rem !important;
    }
    /* Salary detail cards (RH) */
    .salary-detail-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    .salary-line {
        font-size: 0.78rem !important;
        padding: 6px 0 !important;
    }
}

/* ============================================================
   GRIDS — Force single column on small screens
   ============================================================ */
@media (max-width: 576px) {
    /* Stat card grids: 2-column on mobile */
    .row.g-4 > .col-xl-3.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 400px) {
    /* Extra small: single column stats */
    .row.g-4 > .col-xl-3.col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .btn-sm {
        font-size: 0.76rem !important;
    }
}

/* ============================================================
   HEADINGS — Scale down
   ============================================================ */
@media (max-width: 576px) {
    h2 { font-size: 1.2rem !important; }
    h4 { font-size: 1.05rem !important; }
    h5 { font-size: 0.95rem !important; }
    h6 { font-size: 0.85rem !important; }
}

/* ============================================================
   DROPDOWN — Prevent overflow
   ============================================================ */
@media (max-width: 768px) {
    .dropdown-menu {
        min-width: 0 !important;
        max-width: calc(100vw - 30px) !important;
    }
}

/* ============================================================
   PAGINATION — Touch-friendly
   ============================================================ */
@media (max-width: 576px) {
    .pagination .page-link {
        min-width: 38px;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
    }
}

/* ============================================================
   CHARTS — Max width
   ============================================================ */
@media (max-width: 768px) {
    canvas {
        max-width: 100% !important;
    }
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
@media (max-width: 576px) {
    .breadcrumb {
        font-size: 0.75rem;
    }
}

/* ============================================================
   FOOTER — Stack on mobile
   ============================================================ */
@media (max-width: 576px) {
    .footer .container-fluid {
        flex-direction: column !important;
        text-align: center;
        gap: 0.5rem;
    }
}

/* ============================================================
   FLEX CONTAINERS — Prevent overflow
   ============================================================ */
@media (max-width: 768px) {
    .d-flex.gap-2, .d-flex.gap-3 {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 576px) {
    .d-flex {
        max-width: 100%;
    }
}

/* ============================================================
   PROFILE PAGE — Responsive (admin/clientes/perfil.php)
   ============================================================ */
@media (max-width: 768px) {
    .profile-shell {
        padding: 0 !important;
    }
    .profile-header-banner {
        padding: 25px 15px 65px !important;
        border-radius: 0 0 20px 20px !important;
    }
    .profile-main-identity {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }
    .profile-avatar-island {
        width: 70px !important;
        height: 70px !important;
        font-size: 2rem !important;
        border-radius: 18px !important;
    }
    .profile-text-island h1 {
        font-size: 1.3rem !important;
    }
    .stats-floating-row {
        flex-direction: column !important;
        gap: 8px !important;
        margin: -35px 10px 0 !important;
    }
    .stat-glass-card {
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 14px !important;
    }
    .stat-icon-wrapper {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
    }
    .tab-pane-content {
        padding: 15px !important;
        margin: 0 0 15px !important;
        border-radius: 0 0 16px 16px !important;
        min-height: auto !important;
    }
    /* Contact buttons in header */
    .btn-contact-header {
        padding: 5px 10px !important;
        font-size: 0.68rem !important;
    }
}

@media (max-width: 576px) {
    .profile-header-banner {
        padding: 20px 10px 55px !important;
    }
    .profile-avatar-island {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.6rem !important;
    }
    .profile-text-island h1 {
        font-size: 1.1rem !important;
    }
    .island-badge {
        font-size: 0.6rem !important;
        padding: 4px 10px !important;
    }
}

/* ============================================================
   DASHBOARD PAGES — Stat cards, icons, display title
   ============================================================ */
@media (max-width: 768px) {
    /* Scale down large display titles */
    .display-4 {
        font-size: 1.75rem !important;
    }
    .display-5 {
        font-size: 1.5rem !important;
    }
    /* Dashboard icon boxes: scale down */
    .icon-box-premium,
    [class*="icon-box"] {
        width: 50px !important;
        height: 50px !important;
    }
    /* Inline-styled icon containers */
    div[style*="width: 52px"],
    div[style*="width:52px"],
    div[style*="width: 50px"],
    div[style*="width:50px"],
    div[style*="width: 48px"],
    div[style*="width:48px"] {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    div[style*="width: 70px"][class*="icon"],
    div[style*="width:70px"][class*="icon"] {
        width: 50px !important;
        height: 50px !important;
    }
}

@media (max-width: 576px) {
    .display-4 {
        font-size: 1.4rem !important;
    }
    .display-5 {
        font-size: 1.25rem !important;
    }
}

/* ============================================================
   FILTER TOOLBARS — max-width overrides for inputs
   ============================================================ */
@media (max-width: 768px) {
    /* Override fixed max-widths on filter inputs */
    input[style*="max-width: 240px"],
    input[style*="max-width:240px"],
    input[style*="max-width: 220px"],
    input[style*="max-width:220px"],
    input[style*="max-width: 280px"],
    input[style*="max-width:280px"],
    input[style*="max-width: 320px"],
    input[style*="max-width:320px"],
    select[style*="max-width: 240px"],
    select[style*="max-width:240px"],
    select[style*="max-width: 220px"],
    select[style*="max-width:220px"],
    select[style*="max-width: 280px"],
    select[style*="max-width:280px"],
    select[style*="min-width: 250px"],
    select[style*="min-width:250px"] {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    
    /* Card headers with flex toolbars */
    .card-header .d-flex.justify-content-between,
    .card-header .d-flex.align-items-center {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    /* All inline max-width inputs become full width */
    input[style*="max-width"],
    select[style*="max-width"] {
        max-width: 100% !important;
        width: 100% !important;
    }
    input[style*="min-width"],
    select[style*="min-width"] {
        min-width: 0 !important;
    }
}

/* ============================================================
   KANBAN BOARD — Responsive
   ============================================================ */
@media (max-width: 768px) {
    .kanban-board {
        flex-direction: column !important;
    }
    .kanban-board > .kanban-column,
    .kanban-board > div {
        min-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
   FATURAÇÃO TABLES — Column widths
   ============================================================ */
@media (max-width: 768px) {
    /* Override hardcoded column min-widths in tables */
    th[style*="min-width"],
    td[style*="min-width"] {
        min-width: 0 !important;
    }
    th[style*="width: 80px"],
    th[style*="width:80px"],
    td[style*="width: 80px"],
    td[style*="width:80px"],
    th[style*="width: 100px"],
    th[style*="width:100px"],
    td[style*="width: 100px"],
    td[style*="width:100px"],
    th[style*="width: 120px"],
    th[style*="width:120px"],
    td[style*="width: 120px"],
    td[style*="width:120px"] {
        width: auto !important;
    }
}

/* ============================================================
   ADMIN RH FORM — Tab overflow
   ============================================================ */
@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .nav-tabs .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    /* Scrollbar styling */
    .nav-tabs::-webkit-scrollbar {
        height: 3px;
    }
    .nav-tabs::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
        border-radius: 10px;
    }
}

/* ============================================================
   LEADS & BUSINESS INTEL — Toolbar & filters
   ============================================================ */
@media (max-width: 768px) {
    /* Dark card headers in leads pages */
    .card-header.bg-dark .d-flex,
    .card-header[style*="background"] .d-flex {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
}

/* ============================================================
   GENERAL — Prevent any inline width from breaking mobile
   ============================================================ */
@media (max-width: 576px) {
    /* Avatars in cards / lists */
    div[style*="width: 50px"][style*="height: 50px"],
    div[style*="width:50px"][style*="height:50px"] {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    /* Prevent overflow from any row > col combo */
    .row {
        margin-left: 0;
        margin-right: 0;
    }
}