/* ========================================= */
/* MOBILE CONTENT (Tabs & Tables)            */
/* ========================================= */

@media (max-width: 1262px) {
  /* 13. STYLE "GERENCIAR FONTES" TABS (Mobile Alignment Fix Only) */
  /* User requested "Desktop Style" visuals but "Aligned" layout */

  #add-data-source-modal .nav-tabs.tabs-right {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    border-bottom: 1px solid var(--millenio-gray-border) !important;
    /* Restore standard border */
    padding: 0 !important;
    gap: 0 !important;
    /* Remove gap for standard tab look */
  }

  #add-data-source-modal .nav-tabs.tabs-right > li {
    float: none !important;
    margin-bottom: -1px !important;
    /* Overlap border */
    flex: 1 0 30% !important;
    /* Keep 3-column alignment */
    text-align: center !important;
  }

  #add-data-source-modal .nav-tabs.tabs-right > li > a {
    /* Revert to standard Bootstrap/Nifty styling */
    border: 1px solid transparent !important;
    border-radius: 4px 4px 0 0 !important;
    /* Top rounded only */
    background-color: transparent !important;
    color: var(--millenio-text-muted) !important;
    margin-right: 2px !important;
    padding: 10px 5px !important;
    font-weight: 600 !important;

    /* Keep Flexbox for internal centering */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Active state matching standard look */
  #add-data-source-modal .nav-tabs.tabs-right > li.active > a,
  #add-data-source-modal .nav-tabs.tabs-right > li.active > a:hover,
  #add-data-source-modal .nav-tabs.tabs-right > li.active > a:focus {
    color: var(--millenio-text-muted) !important;
    background-color: var(--millenio-white) !important;
    border: 1px solid var(--millenio-gray-border) !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    /* Remove shadow */
    cursor: default !important;
  }

  #add-data-source-modal .nav-tabs.tabs-right > li > a:hover {
    background-color: var(--millenio-gray-lighter) !important;
    border-color: var(--millenio-gray-lighter) var(--millenio-gray-lighter)
      var(--millenio-gray-border) !important;
  }

  #add-data-source-modal .nav-tabs.tabs-right > li > a i {
    display: block !important;
    font-size: var(--millenio-font-md) !important;
    margin-bottom: 4px !important;
  }

  /* 14. STYLE TABLES FOR MOBILE (Better text wrapping & readability) */
  #add-data-source-modal .bootstrap-table .fixed-table-body {
    overflow-x: auto !important;
    /* Ensure generic scroll if needed */
    max-height: 50vh !important;
    /* Limit height so pagination is visible */
  }

  #add-data-source-modal .table > tbody > tr > td {
    white-space: normal !important;
    /* Allow wrapping */
    word-break: break-all !important;
    /* Break long underscores/names */
    word-wrap: break-word !important;
    font-size: var(--millenio-font-xs) !important;
    /* Slightly smaller text */
    padding: 8px 5px !important;
    /* Comfortable touch padding */
    vertical-align: middle !important;
  }

  /* Fix Pagination Stack */
  #add-data-source-modal .fixed-table-pagination {
    text-align: center !important;
  }

  #add-data-source-modal .fixed-table-pagination .pagination {
    float: none !important;
    display: inline-flex !important;
    margin-top: 10px !important;
  }

  #add-data-source-modal .fixed-table-pagination .pagination-detail {
    float: none !important;
    display: block !important;
    margin-bottom: 5px !important;
  }

  /* 15. FIX "CONSULTAS" TAB LAYOUT (Stack Vertically) */
  /* The side-by-side layout breaks on mobile. We stack icons ON TOP of content. */
  #add-data-source-modal #demo-tabs-box-4 .media-left {
    display: none !important;
    /* Hide giant monitor icon on mobile to save space */
  }

  #add-data-source-modal #demo-tabs-box-4 .tab-stacked-left {
    display: flex !important;
    flex-direction: column !important;
  }

  #add-data-source-modal #demo-tabs-box-4 .tab-stacked-left .nav-tabs {
    float: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    border-right: none !important;
    border-bottom: 1px solid var(--millenio-gray-border) !important;
    margin-bottom: 15px !important;
  }

  #add-data-source-modal #demo-tabs-box-4 .tab-stacked-left .nav-tabs > li {
    float: none !important;
    margin: 0 5px !important;
  }

  #add-data-source-modal #demo-tabs-box-4 .tab-stacked-left .nav-tabs > li > a {
    margin-right: 0 !important;
    margin-bottom: 1.5rem !important;
    border: 1px solid var(--millenio-gray-border) !important;
    border-radius: 4px !important;
  }

  #add-data-source-modal #demo-tabs-box-4 .tab-stacked-left .tab-content {
    display: block !important;
    /* OVERRIDE 'table-cell' from theme */
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Fix Grid inside "User" tab (first tab) to prevent right-shift */
  #add-data-source-modal #demo-tabs-box-4 #demo-stk-lft-tab-1 .form-group {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Hide empty labels that act as spacers on desktop */
  #add-data-source-modal #demo-tabs-box-4 #demo-stk-lft-tab-1 label.col-md-3 {
    display: none !important;
  }

  /* Force input/table container to full width */
  #add-data-source-modal #demo-tabs-box-4 #demo-stk-lft-tab-1 .col-md-9 {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }
}