/* ===========================
   CREATORSBAY MOBILE RESPONSIVE FIX
   All overrides are additive — never remove existing styles
   =========================== */

/* ── 1. Global overflow prevention ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── 2. Admin topbar mobile fixes ── */
@media (max-width: 639px) {
  /* Topbar padding on very small screens */
  .cb-topbar {
    padding: 0 0.6rem !important;
    gap: 0.35rem !important;
    height: 52px !important;
  }
  /* Hide breadcrumb text on very small screens */
  .cb-topbar-breadcrumb {
    display: none !important;
  }
  /* Mobile sidebar toggle always visible */
  #mobile-sidebar-btn {
    display: flex !important;
  }
  /* Shrink profile button */
  .cb-topbar-profile-btn {
    padding: 0.2rem !important;
    gap: 0.25rem !important;
  }
  /* Page action bar wraps properly */
  #page-action-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
  }
  #page-action-btns {
    width: 100% !important;
  }
  /* Page header wraps on mobile */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.25rem !important;
  }
  /* Stat cards grid on small screens */
  .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 3. Brand/Influencer topbar mobile fixes ── */
@media (max-width: 639px) {
  .topbar {
    padding: 0 0.75rem !important;
    min-height: 52px !important;
  }
  .topbar .breadcrumb {
    display: none !important;
  }
}

/* ── 4. Main content: no margin-left on mobile ── */
@media (max-width: 1023px) {
  #admin-main,
  #main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── 5. Form inputs: 16px min to prevent iOS zoom ── */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select,
  textarea,
  .form--control,
  .cb-input,
  .pbl-input,
  .field-input {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
  /* Minimum touch target for buttons */
  .btn,
  .cb-btn,
  button[type="submit"],
  .pbl-submit {
    min-height: 44px !important;
  }
  /* Form rows go single column */
  .form-row,
  .row.form-group-row {
    flex-direction: column !important;
  }
  /* Ensure field groups are full-width */
  .form-row > [class*="col-"],
  .row.form-group-row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── 6. Table scrollability (fallback for pages not in card-view) ── */
@media (max-width: 767px) {
  /* Ensure table wrappers are scrollable */
  .cb-table-responsive,
  .table-responsive,
  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }
  /* Breadcrumb plugins (filter bars) wrap on mobile */
  .breadcrumb-plugins {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .breadcrumb-plugins .cb-input-group,
  .breadcrumb-plugins form {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── 7. Modal mobile fixes ── */
@media (max-width: 575px) {
  /* Bootstrap-compat modals */
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
  }
  .modal-content {
    border-radius: 0 !important;
    max-height: 95vh;
    overflow-y: auto;
  }
  .modal-footer {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .modal-footer .btn {
    width: 100% !important;
  }
  /* cb-modal (custom modals) */
  .cb-modal.show {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .cb-modal-dialog {
    max-width: 100% !important;
    margin: 0 !important;
  }
  .cb-modal-content {
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  .cb-modal-footer {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .cb-modal-footer .cb-btn {
    width: 100% !important;
  }
  /* modal-backdrop (custom confirm) */
  .modal-backdrop .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
  .modal-footer-group {
    flex-direction: column !important;
  }
}

/* ── 8. Dashboard stat tiles border fix ──
   On mobile with 2-column grid, right border on col-2 items overflows.
   We target the user/brand dashboard stat tile grid. ── */
@media (max-width: 767px) {
  /* User dashboard tiles - reset right border on right column items */
  [style*="border:2px solid #0A0A0A"] > a.border-r-2:nth-child(2n) {
    border-right-width: 0 !important;
  }
  /* Add bottom border between rows */
  [style*="border:2px solid #0A0A0A"] > a {
    border-bottom: 1px solid #0A0A0A !important;
  }
  [style*="border:2px solid #0A0A0A"] > a:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }
}

/* ── 9. Content card padding on mobile ── */
@media (max-width: 575px) {
  main.flex-1 {
    padding: 1rem !important;
  }
  #admin-main > main {
    padding: 1rem !important;
  }
}

/* ── 10. Notification dropdown width on mobile ── */
@media (max-width: 479px) {
  #user-notif-dd,
  #admin-notif-dd {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    right: 0 !important;
    left: auto !important;
  }
  #profile-dd,
  #admin-profile-dd {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    right: 0 !important;
  }
}

/* ── 11. Page titles on mobile ── */
@media (max-width: 639px) {
  .page-title {
    font-size: clamp(1rem, 6vw, 1.5rem) !important;
  }
  h1[style*="text-transform:uppercase"],
  h1[style*="text-transform: uppercase"] {
    font-size: clamp(1rem, 7vw, 1.5rem) !important;
  }
}

/* ── 12. Card grid responsive ── */
@media (max-width: 479px) {
  .grid.sm\:grid-cols-3,
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Card body padding */
  .card-body {
    padding: 0.875rem !important;
  }
}

/* ── 13. Ensure Tailwind sidebar open/close works correctly ── */
@media (max-width: 1023px) {
  #main-sidebar {
    overflow-y: auto;
  }
}

/* ── 14. Table action buttons wrap on mobile ── */
@media (max-width: 767px) {
  .button--group {
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
  }
}

/* ── 15. Profile setting forms ── */
@media (max-width: 767px) {
  .cb-grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ── 16. Admin stat cards on small screens ── */
@media (max-width: 479px) {
  /* Admin dashboard grid: 2 cols on xs, 4 cols only on lg */
  body.cb-admin-shell .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  body.cb-admin-shell .stat-card {
    padding: 1rem !important;
  }
  body.cb-admin-shell .stat-value {
    font-size: 1.25rem !important;
  }
}

/* ── 17. Long text word-break in table cells on mobile ── */
@media (max-width: 767px) {
  td, th {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}