/* =============================================
   Responsive CSS - Click2Call Application
   Breakpoints:
     xs: < 480px  (mobile)
     sm: 480px – 767px  (large mobile / small tablet)
     md: 768px – 991px  (tablet)
     lg: ≥ 992px  (desktop – default layout)
   ============================================= */

/* -----------------------------------------------
   1. MAIN CONTENT AREA
   At < 480px the sidebar collapses to top (max-height:0),
   so remove its left margin from the content area.
----------------------------------------------- */
@media (max-width: 479px) {
  .main {
    margin-left: 0 !important;
    margin-top: 65px;
    padding: 0 8px;
  }
}

/* On tablets the sidebar is still 60 px wide – keep margin */
@media (min-width: 480px) and (max-width: 991px) {
  .main {
    margin-left: 60px;
    padding: 0 8px;
  }
}

/* -----------------------------------------------
   2. TOP NAVBAR
----------------------------------------------- */
@media (max-width: 479px) {
  .navbar-brand {
    font-size: 14px;
  }

  /* Balance / SMS / Email badges in navbar */
  .navbar-nav .nav-link {
    font-size: 12px;
    padding: 4px 6px;
  }
}

/* -----------------------------------------------
   3. LABELS & FORM ELEMENTS
   head.ejs sets label { white-space: nowrap } and
   form label { display: inline-block; width: 100px }
   – both break on narrow screens.
----------------------------------------------- */
@media (max-width: 767px) {
  label {
    white-space: normal !important;
  }

  form label {
    width: auto !important;
    display: block !important;
    margin-bottom: 2px;
  }
}

/* -----------------------------------------------
   4. CARD-HEADER FILTER ROWS (date pickers + buttons)
   .right-align uses flex; on mobile stack them vertically.
----------------------------------------------- */
@media (max-width: 767px) {
  .right-align {
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 6px;
  }

  .right-align label {
    display: inline !important;
    width: auto !important;
  }

  .right-align input,
  .right-align select,
  .right-align button {
    margin-left: 0 !important;
    margin-right: 4px;
  }

  /* Card header rows that contain filter controls */
  .card-header .row {
    flex-direction: column;
  }

  .card-header .row .col-sm-4,
  .card-header .row .col-sm-8,
  .card-header .row .col-sm-10,
  .card-header .row .col-sm-2 {
    max-width: 100%;
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 6px;
  }
}

/* -----------------------------------------------
   5. DATE INPUT & SEARCH INPUT WIDTHS
----------------------------------------------- */
@media (max-width: 767px) {
  .date_input_width {
    width: 100% !important;
  }

  .searchInput {
    width: 100% !important;
  }
}

/* -----------------------------------------------
   6. SETTINGS PAGE CARDS
   col-sm-2 gives 6 cards per row – too small on mobile.
   Force 2-per-row on xs, 3-per-row on sm.
----------------------------------------------- */
@media (max-width: 479px) {
  .settings-cards-row .col-sm-2,
  .col-sm-2.card-view {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .card-view {
    height: auto !important;
    min-height: 130px;
  }

  .legend-settings-desc {
    font-size: 11px !important;
    white-space: normal !important;
    margin-top: 10px !important;
    padding-bottom: 8px !important;
  }

  .legend-settings-value {
    font-size: 20px !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .col-sm-2.card-view {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  .card-view {
    height: auto !important;
    min-height: 150px;
  }

  .legend-settings-desc {
    white-space: normal !important;
    font-size: 12px !important;
  }
}

/* -----------------------------------------------
   7. HOME DASHBOARD STAT CARDS
   Already use col-xs-6 col-sm-6 col-md-4; improve mobile.
----------------------------------------------- */
@media (max-width: 479px) {
  .legend-value {
    font-size: 20px !important;
  }

  .legend-desc {
    font-size: 14px !important;
    padding-bottom: 10px !important;
  }
}

/* -----------------------------------------------
   8. TABLES
   Ensure all tables are horizontally scrollable on mobile.
----------------------------------------------- */
@media (max-width: 767px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tables without explicit .table-responsive wrapper */
  .card-body > table,
  .container-fluid > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 0.75rem !important;
  }

  th, td {
    white-space: nowrap;
    padding: 4px 6px !important;
  }
}

/* -----------------------------------------------
   9. BUTTONS & ACTION GROUPS IN TABLE CELLS
----------------------------------------------- */
@media (max-width: 767px) {
  .btn-sm {
    font-size: 0.7rem;
    padding: 2px 6px;
  }
}

/* -----------------------------------------------
  10. FOOTER
  Fixed footer overlaps content on short viewports – handled
  by .margin-bottom on .main, but ensure it on mobile too.
----------------------------------------------- */
@media (max-width: 479px) {
  .footer {
    font-size: 0.7rem;
    padding-top: 8px;
  }

  .main {
    margin-bottom: 50px;
  }
}

/* -----------------------------------------------
  11. MODALS
  Prevent modals from overflowing on very small screens.
----------------------------------------------- */
@media (max-width: 479px) {
  .modal-dialog {
    margin: 10px;
    max-width: calc(100% - 20px);
  }

  .modal-body {
    padding: 10px;
  }
}

/* -----------------------------------------------
  12. SNACKBAR
  Re-center the fixed snackbar on narrow screens.
----------------------------------------------- */
@media (max-width: 479px) {
  #snackbar {
    min-width: 80%;
    margin-left: -40%;
    font-size: 14px;
  }
}

/* -----------------------------------------------
  13. CARD BODY OVERFLOW
  Prevent page-level horizontal scroll.
----------------------------------------------- */
@media (max-width: 767px) {
  .card-body {
    overflow-x: auto;
  }

  .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* -----------------------------------------------
  14. CUSTOM FORM WIDTHS (addwebsite, addagent, etc.)
  Some pages use inline styles or explicit widths.
----------------------------------------------- */
@media (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea {
    max-width: 100%;
  }

  /* Force full-width for form-control inside col on mobile */
  .col-sm-4 .form-control,
  .col-sm-6 .form-control,
  .col-sm-8 .form-control {
    width: 100%;
  }
}

/* -----------------------------------------------
  15. LOGIN PAGE
  Already responsive (col-md-4) but improve on very small.
----------------------------------------------- */
@media (max-width: 479px) {
  #login .container #login-row #login-column #login-box {
    margin-top: 60px !important;
  }
}

/* -----------------------------------------------
  16. BACK BUTTON & TOP UTILITIES
----------------------------------------------- */
@media (max-width: 479px) {
  #backBtn {
    margin-top: 10px;
  }
}

/* -----------------------------------------------
  17. AGENT FOOTER / HEADER (same structure as main)
----------------------------------------------- */
@media (max-width: 479px) {
  .agentfooter,
  .agentfooter .footer {
    font-size: 0.7rem;
  }
}

/* -----------------------------------------------
  18. PREVENT BODY HORIZONTAL SCROLL
----------------------------------------------- */
body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
}