/* ============================================================
   GLOBAL MOBILE RESPONSIVE OVERRIDES
   All rules are scoped to max-width: 768px so desktop layout
   is completely unaffected.
   ============================================================ */

@media (max-width: 768px) {

  /* ----------------------------------------------------------
     CUSTOMER HEADER (R_Header)
  ---------------------------------------------------------- */

  /* Upgrade Credits button — smaller on mobile so it fits in the header */
  button.upgrade_credits {
    font-size: 11px !important;
    padding: 5px 12px !important;
    margin: 0 10px 0 0 !important;
  }

  /* Remove bottom margin that pushes profile image out of the 64px header */
  img.uploade-profile {
    margin: 0 1rem 0 0 !important;
  }

  /* Border line below header — strip the 16rem left margin (sidebar width on desktop) */
  .r_navbar_border {
    margin: 4px 1rem 8px 1rem !important;
  }

  /* Profile popup — keep it inside the screen on mobile */
  .profile-popup {
    right: 8px !important;
    width: min(250px, 90vw) !important;
  }

  /* ----------------------------------------------------------
     PREVENT PAGE-LEVEL HORIZONTAL OVERFLOW
     Both layout systems (admin + customer) must be clipped to
     the viewport width so wide children don't scroll the whole page.
  ---------------------------------------------------------- */
  .dashboard-content,
  .dashboard-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }


  /* ----------------------------------------------------------
     TABLES — horizontal scroll instead of overflowing viewport
  ---------------------------------------------------------- */

  /* Named table classes — horizontal scroll */
  .uploads-table,
  .results-table,
  .servers-table,
  .users-table,
  .api-history-table,
  .blocked-ips-table,
  .bounce-messages-table,
  .email-patterns-table,
  .email-finder-table,
  .logs-table,
  .roles-table,
  .audit-logs-table,
  .reports-table,
  .server-ips-table,
  .server-ip-details-table,
  .user-credits-table,
  .user-reports-table,
  .view-credit-history-table,
  .netbox-table,
  .system-event-logs-table,
  .error-logs-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* table-layout:fixed + percentage column widths means the table never
     grows past 100% of its container on its own, so the overflow-x:auto
     above never actually triggers — force a sane minimum width instead so
     columns get room to breathe and the container scrolls horizontally. */
  .results-table {
    min-width: 700px;
    table-layout: auto !important;
  }

  /* Shrink table font slightly so more columns fit */
  .uploads-table th, .uploads-table td,
  .results-table th, .results-table td,
  .servers-table th, .servers-table td,
  .users-table th, .users-table td {
    font-size: 0.8rem;
    padding: 0.4rem 0.5rem;
  }

  /* ----------------------------------------------------------
     FILTER BARS & TABLE CONTROLS — stack vertically
  ---------------------------------------------------------- */

  .table-controls,
  .filter-row,
  .filters-container,
  .right-filters,
  .date-filters-container,
  .search-row,
  .controls-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100%;
  }

  /* Make every filter input/select fill the row */
  .filter-select,
  .search-input,
  .date-picker,
  .filter-group,
  .search-group,
  .filter-select-container,
  .date-picker-container {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* ----------------------------------------------------------
     CARDS — reduce padding on small screens
  ---------------------------------------------------------- */

  .card,
  .bulk-email-verifier-container,
  .servers-list-container,
  .user-list-container,
  .email-finder-container,
  .bulk-email-finder-container,
  .verify-email-container,
  .logs-history-container,
  .admin-audit-logs-container,
  .user-audit-logs-container,
  .bounce-messages-container,
  .blocked-ips-container,
  .email-patterns-container,
  .api-history-container,
  .reports-container,
  .server-ips-container,
  .user-management-dashboard,
  .user-audit-logs-dashboard,
  .netbox-event-errors-dashboard,
  .plans-management-dashboard,
  .server-ip-details-page,
  .server-ip-list-2-page,
  .email-verifier-stats {
    padding: 0.75rem !important;
  }

  /* ----------------------------------------------------------
     MODALS — fit inside the screen
  ---------------------------------------------------------- */

  .modal-content,
  .modal-dialog,
  .modal-container {
    width: 95% !important;
    max-width: 95vw !important;
    margin: 10px auto !important;
    padding: 1rem !important;
  }

  /* Permissions box had min-width: 900px which broke mobile */
  .permissions-box {
    min-width: unset !important;
    width: 100% !important;
    overflow-x: auto;
  }

  .permission-list {
    flex-direction: column;
    gap: 8px;
  }

  /* ----------------------------------------------------------
     CARD HEADERS — smaller title text
  ---------------------------------------------------------- */

  .card-header h5,
  .card-header h4,
  .card-header h3 {
    font-size: 1rem !important;
  }

  /* ----------------------------------------------------------
     BUTTONS — wrap instead of overflow
  ---------------------------------------------------------- */

  .form-actions {
    flex-direction: column;
    gap: 8px;
  }

  .form-actions button {
    width: 100%;
  }

  .action-buttons,
  .btn-group {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* ----------------------------------------------------------
     CONTAINERS — remove large padding on small screens
  ---------------------------------------------------------- */

  [class$="-container"],
  [class*="-container "] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* ----------------------------------------------------------
     PROFILE PAGE
  ---------------------------------------------------------- */

  .profile-card,
  .profile-form {
    padding: 1rem !important;
  }

  /* ----------------------------------------------------------
     PAGINATION
  ---------------------------------------------------------- */

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  /* ----------------------------------------------------------
     STATS / REPORT CARDS — single column grid
  ---------------------------------------------------------- */

  .stats-grid,
  .report-stats-grid,
  .summary-cards {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }

  /* ----------------------------------------------------------
     VERIFY EMAIL / FINDER FORMS
  ---------------------------------------------------------- */

  .verify-email-form,
  .email-finder-form {
    flex-direction: column;
    gap: 8px;
  }

  .verify-email-form input,
  .verify-email-form button,
  .email-finder-form input,
  .email-finder-form button {
    width: 100%;
  }


  /* ----------------------------------------------------------
     EMAIL VERIFIER PAGE
  ---------------------------------------------------------- */

  /* Tabs row — constrain to screen width, scroll if tabs don't fit.
     !important needed because Vite injects component CSS after this file. */
  .email-tabs-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap;
  }

  /* Reduce tab font size so both tabs fit on screen */
  .email-tab {
    font-size: 14px !important;
    padding: 8px 0 !important;
  }

  /* Quick-verify card — expand to full width */
  .wrapper-back,
  .wrapper-back-1,
  .wrapper-back-details {
    max-width: 100% !important;
    width: 100% !important;
    padding: 14px !important;
  }

  /* Result card — stack email + status vertically */
  .single-result-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Confidence boxes side by side → stack */
  .confidance-box {
    width: 100% !important;
  }

  /* Pagination "Go to page" control — wrap below page numbers */
  .pagination-container {
    flex-wrap: wrap;
    gap: 6px;
  }

  .go-to-page {
    width: 100%;
    justify-content: center;
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-top: 1px solid #E5E7EB;
    padding-top: 8px;
  }

  /* Verification history box — reduce side padding */
  .verification-history {
    padding: 14px 16px !important;
  }

  /* ----------------------------------------------------------
     CREDIT LOGS & VERIFICATION LOGS — fix table overflow
  ---------------------------------------------------------- */

  /* These classes set overflow: visible in their own CSS,
     overriding .table-wrapper's overflow-x: auto.
     Force scroll on mobile so the table doesn't bleed out. */
  .credit-logs-table-wrapper,
  .verification-logs-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

   /* ----------------------------------------------------------
     MANAGE USERS PAGE
  ---------------------------------------------------------- */

  /* Search + Add User row — stack vertically instead of side by side */
  .user-management-box .d-flex.justify-content-between {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Search wrapper fills full width */
  .user-management-box .search-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Search input inside wrapper fills full width */
  .user-management-box .search-input {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0px 10px;
  }

  /* Add User button fills full row, text stays on one line */
  .user-management-box .add-users {
    width: 100% !important;
    justify-content: center !important;
    white-space: nowrap;
    padding: 8px 16px !important;
    margin: 0px 0px 10px;
  }

  /* Table inside user-management-box — horizontal scroll */
  .user-management-box .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Remaining credits row had gap: 77px — collapses on mobile */
  .remaining-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Fixed-width credit info box — expand to full width */
  .available {
    width: 100% !important;
    height: auto !important;
  }

  /* Popup modals have fixed widths — make them fit the screen */
  .popup-box,
  .remove-popup-box,
  .active-popup-box {
    width: 92vw !important;
    max-width: 92vw !important;
    padding: 20px 16px !important;
  }

  /* "Assign / Remove credits" row of buttons — wrap on mobile */
  .popup-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ----------------------------------------------------------
     CUSTOMER DASHBOARD — stack cards vertically
  ---------------------------------------------------------- */

  /* The 3-column card row: Email Verifier, Quick Verify, Credits/Help */
  .welcome-dashboard {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 4px;
  }

  .d-box {
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .d-box-column {
    width: 100% !important;
    flex-direction: column;
    gap: 12px;
  }

  .d-box-2 {
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Stats bar at the bottom */
  .details {
    margin: 12px 0 0 0 !important;
  }

  .details .stat-card-row {
    flex-direction: column;
    gap: 12px;
  }

  /* ----------------------------------------------------------
     GLOBAL TEXT SCALING (phones)
     Shrink headings/body across every page so copy fits narrow
     screens without horizontal overflow.
  ---------------------------------------------------------- */
  .app-content h1,
  .dashboard-content h1 { font-size: 1.5rem !important; }

  .app-content h2,
  .dashboard-content h2 { font-size: 1.3rem !important; }

  .app-content h3,
  .dashboard-content h3 { font-size: 1.15rem !important; }

  .app-content h4,
  .dashboard-content h4 { font-size: 1.05rem !important; }

  .app-content h5,
  .dashboard-content h5,
  .app-content h6,
  .dashboard-content h6 { font-size: 1rem !important; }

  /* Tables: nudge cell text down so more columns are readable */
  .app-content table th,
  .app-content table td,
  .dashboard-content table th,
  .dashboard-content table td {
    font-size: 0.8rem !important;
  }
}

/* =========================================================================
   TABLET (max-width: 1024px, above the 768px phone range)
   Sidebar is still visible here, so content is narrow — let wide elements
   scroll instead of overflowing, trim padding, and ease text down a notch.
   ========================================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Reclaim horizontal space from the page gutters */
  .app-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .dashboard-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Any data table can scroll horizontally rather than push the page wide */
  .app-content table,
  .dashboard-content table,
  .table-wrapper,
  .credit-logs-table-wrapper,
  .verification-logs-table-wrapper,
  .uploads-table,
  .results-table,
  .servers-table,
  .users-table,
  .api-history-table,
  .blocked-ips-table,
  .bounce-messages-table,
  .email-patterns-table,
  .email-finder-table,
  .logs-table,
  .roles-table,
  .audit-logs-table,
  .reports-table,
  .server-ips-table,
  .server-ip-details-table,
  .user-credits-table,
  .user-reports-table,
  .view-credit-history-table,
  .netbox-table,
  .system-event-logs-table,
  .error-logs-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Same table-layout:fixed issue as the phone breakpoint above — force a
     minimum width so the container actually has something to scroll. */
  .results-table {
    min-width: 700px;
    table-layout: auto !important;
  }

  /* Slightly smaller headings on tablet */
  .app-content h1,
  .dashboard-content h1 { font-size: 1.7rem !important; }

  .app-content h2,
  .dashboard-content h2 { font-size: 1.45rem !important; }

  /* Multi-column card grids drop to two columns */
  .stats-grid,
  .report-stats-grid,
  .summary-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Admin: the permissions matrix (900px min-width) can't fit a tablet
     beside the sidebar — let it scroll instead of pushing the page wide. */
  .permissions-box {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Admin: oversized modals fit within the tablet viewport */
  .add-role-modal-content,
  .modal-content,
  .modal-container {
    max-width: 92vw !important;
  }
}