/* ==========================================================================
   ElitePanel Admin - Responsive / Mobile-First Enhancements
   Handles: sidebar, header, tables, forms, modals, cards, buttons, dropdowns
   Breakpoints: xs <576 | sm 576-767 | md 768-991 | lg 992-1199 | xl 1200+
   ========================================================================== */

/* ============================================================
   1. GLOBAL overflow guards
   ============================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ============================================================
   2. PAGE HEADER wraps action buttons below title on mobile
   ============================================================ */
.page-header { flex-wrap: wrap; gap: .75rem; }
.page-header > div:last-child { flex-wrap: wrap; }

@media (max-width: 575.98px) {
  .page-header { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .page-header > div:last-child { width: 100%; justify-content: flex-start; }
  .page-header h1 { font-size: 1.2rem; }
  .breadcrumb { font-size: 12px; }
}

/* ============================================================
   3. TABLES horizontal scroll
   ============================================================ */
.table-responsive { -webkit-overflow-scrolling: touch; overflow-x: auto; }

@media (max-width: 767.98px) {
  .table th, .table td { font-size: 12px; padding: .5rem .6rem; white-space: nowrap; }
  .table { min-width: 600px; }
  .table-wide { min-width: 900px; }
  .table-xl   { min-width: 1100px; }
}
@media (max-width: 575.98px) {
  .table th, .table td { font-size: 11px; padding: .45rem .5rem; }
}

/* ============================================================
   4. STAT CARDS mobile
   ============================================================ */
@media (max-width: 575.98px) {
  .stat-card { padding: 1rem; }
  .stat-card .stat-icon { width: 40px; height: 40px; font-size: 18px; margin-bottom: .65rem; }
  .stat-card .stat-value { font-size: 1.35rem; }
}

/* ============================================================
   5. CARD HEADERS wrap
   ============================================================ */
.card-header { flex-wrap: wrap; gap: .5rem; }

@media (max-width: 575.98px) {
  .card-header.d-flex { flex-direction: column; align-items: flex-start !important; gap: .65rem; }
  .card-header .d-flex.gap-2 { flex-wrap: wrap; width: 100%; }
  .card-header.d-flex.justify-content-between { flex-direction: column; align-items: flex-start !important; }
}

/* ============================================================
   6. FORMS stacked on mobile
   ============================================================ */
@media (max-width: 767.98px) {
  .form-select, .form-control { font-size: 14px; }
  .card-body .row.g-2 > [class*="col-md-1"],
  .card-body .row.g-2 > [class*="col-md-2"],
  .card-body .row.g-2 > [class*="col-md-3"] { min-width: 50%; }
}
@media (max-width: 575.98px) {
  .form-label { font-size: 13px; margin-bottom: .3rem; }
  .form-select, .form-control { font-size: 13px; }
  .card-body .row.g-2 > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }
}

/* ============================================================
   7. BUTTONS touch targets
   ============================================================ */
@media (max-width: 575.98px) {
  .btn { min-height: 36px; }
  .btn .btn-text-sm { display: none; }
  .input-group { flex-wrap: wrap; }
  .input-group .btn { flex: 1; }
}

/* ============================================================
   8. MODALS full-width on mobile
   ============================================================ */
@media (max-width: 767.98px) {
  .modal-dialog.modal-xl,
  .modal-dialog.modal-lg {
    max-width: calc(100vw - 2rem);
    width: calc(100vw - 2rem);
    margin: 1rem auto;
  }
}
@media (max-width: 575.98px) {
  .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
  .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100vw - 1rem); width: calc(100vw - 1rem); }
  .modal-body { padding: 1rem; }
  .modal-header { padding: .85rem 1rem; }
  .modal-footer { padding: .75rem 1rem; flex-wrap: wrap; gap: .5rem; }
  .modal-footer .btn { flex: 1 1 auto; min-width: 100px; }
  .modal-body .row > [class*="col-md-"],
  .modal-body .row > [class*="col-sm-"] { flex: 0 0 100%; max-width: 100%; }
  .modal-body .row > .col-6 { flex: 0 0 50%; max-width: 50%; }
}

/* ============================================================
   9. NOTIFICATION & PROFILE DROPDOWNS
   ============================================================ */
@media (max-width: 575.98px) {
  .notif-dropdown { width: calc(100vw - 1.5rem) !important; max-width: 360px; right: 0 !important; left: auto !important; }
  .profile-dropdown { width: calc(100vw - 1.5rem) !important; max-width: 280px; right: 0 !important; left: auto !important; }
  .dropdown-menu-end { right: 0 !important; left: auto !important; }
}

/* ============================================================
   10. HEADER tiny screens
   ============================================================ */
@media (max-width: 400px) {
  .header-profile .profile-info { display: none; }
  .header-actions { gap: .25rem; }
  .header-action-btn { width: 36px; height: 36px; font-size: 16px; }
}

/* ============================================================
   11. SIDEBAR touch
   ============================================================ */
@media (max-width: 991.98px) {
  .app-sidebar { -webkit-overflow-scrolling: touch; }
  body.sidebar-open .sidebar-backdrop { cursor: pointer; }
}

/* ============================================================
   12. MAIN CONTENT PADDING
   ============================================================ */
@media (max-width: 767.98px) { .app-main { padding: 1rem .75rem; } }
@media (max-width: 575.98px) { .app-main { padding: .75rem .65rem; } .card-body { padding: 1rem .85rem; } }

/* ============================================================
   13. TYPOGRAPHY SCALE
   ============================================================ */
@media (max-width: 575.98px) {
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 1rem; }
  h4 { font-size: .95rem; }
  h5 { font-size: .9rem; }
  .card-title { font-size: 1rem; }
  .fs-4 { font-size: 1rem !important; }
  .fs-3 { font-size: 1.1rem !important; }
  .alert { font-size: 13px; padding: .75rem 1rem; }
}

/* ============================================================
   14. PAGINATION
   ============================================================ */
@media (max-width: 575.98px) {
  .pagination { flex-wrap: wrap; justify-content: center; gap: 2px; }
  .pagination .page-link { padding: .35rem .6rem; font-size: 13px; }
  .d-flex.justify-content-between.align-items-center.mt-3,
  .d-flex.justify-content-between.align-items-center.mt-4 { flex-direction: column; gap: .75rem; align-items: center !important; }
}

/* ============================================================
   15. TABS horizontal scroll
   ============================================================ */
.nav-tabs, .nav-pills {
  flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
.nav-pills.flex-wrap-allowed { flex-wrap: wrap; overflow-x: visible; }
.tab-content { overflow-x: hidden; }

@media (max-width: 575.98px) {
  .nav-tabs-fancy .nav-link { padding: .65rem .65rem; font-size: 12px; white-space: nowrap; }
}

/* ============================================================
   16. BREADCRUMB horizontal scroll
   ============================================================ */
@media (max-width: 575.98px) {
  .breadcrumb { font-size: 11px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .breadcrumb::-webkit-scrollbar { display: none; }
}

/* ============================================================
   17. BADGES
   ============================================================ */
.badge { white-space: nowrap; }

/* ============================================================
   18. AVATAR + NAME table cells
   ============================================================ */
@media (max-width: 767.98px) {
  .table .d-flex.align-items-center.gap-2 { min-width: 0; max-width: 160px; }
  .table .d-flex.align-items-center.gap-2 .fw-semibold,
  .table .d-flex.align-items-center.gap-2 .fs-12 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
}

/* ============================================================
   19. WELCOME CARD stack on mobile
   ============================================================ */
@media (max-width: 767.98px) {
  .welcome-card { flex-direction: column; padding: 1.25rem; min-height: auto; }
  .welcome-card .welcome-illustration { width: 120px; margin: 0 auto; }
  .welcome-card .welcome-text h3 { font-size: 1.2rem; }
}
@media (max-width: 575.98px) {
  .welcome-card .welcome-illustration { display: none; }
}

/* ============================================================
   20. FOOTER stack
   ============================================================ */
@media (max-width: 575.98px) {
  .app-footer { flex-direction: column; text-align: center; gap: .35rem; font-size: 12px; padding: .75rem 1rem; }
}

/* ============================================================
   21. SETTINGS / OFFCANVAS full width
   ============================================================ */
@media (max-width: 575.98px) {
  .settings-panel { width: 100vw !important; max-width: 100vw !important; }
  .offcanvas.offcanvas-end:not(.settings-panel),
  .offcanvas.offcanvas-start:not(.app-sidebar) { width: 100vw !important; }
}

/* ============================================================
   22. DROPDOWN MENUS mobile sizing
   ============================================================ */
@media (max-width: 767.98px) {
  .dropdown-menu { font-size: 13px; }
  .dropdown-item { padding: .45rem .85rem; font-size: 13px; }
}

/* ============================================================
   23. TABLE ACTION BUTTONS
   ============================================================ */
@media (max-width: 767.98px) {
  .table td .btn-sm { padding: .2rem .4rem; font-size: 11px; }
  .table td .d-flex.gap-1 { flex-wrap: wrap; max-width: 100px; }
}

/* ============================================================
   24. KYC MINI CELLS
   ============================================================ */
@media (max-width: 991.98px) {
  .d-flex.flex-column.gap-1[style*="min-width"] { min-width: 100px !important; }
}

/* ============================================================
   25. COLUMN VISIBILITY HELPERS
   ============================================================ */
@media (max-width: 767.98px) { .col-hide-sm { display: none !important; } }
@media (max-width: 575.98px) { .col-hide-xs { display: none !important; } }

/* ============================================================
   26. PROGRESS BARS
   ============================================================ */
@media (max-width: 575.98px) { .progress { height: 6px; border-radius: 3px; } }

/* ============================================================
   27. DASHBOARD CHARTS
   ============================================================ */
@media (max-width: 575.98px) { canvas { max-height: 220px !important; } }

/* ============================================================
   28. TIMELINE COMPONENT
   ============================================================ */
@media (max-width: 575.98px) { .timeline { padding-left: 1.5rem; } }

/* ============================================================
   29. DETAIL PAGE INFO ROWS
   ============================================================ */
@media (max-width: 767.98px) {
  .row.g-3 > [class*="col-md-"],
  .row.g-3 > [class*="col-lg-"],
  .row.g-4 > [class*="col-md-"],
  .row.g-4 > [class*="col-lg-"] { word-break: break-word; }
}

/* ============================================================
   30. RESPONSIVE UTILITY CLASSES
   ============================================================ */
.text-truncate-mobile { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) {
  .text-truncate-mobile { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
}
.metrics-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* ============================================================
   31. PRINT STYLES
   ============================================================ */
@media print {
  .app-sidebar, .app-header, .app-footer, .sidebar-backdrop, #settingsPanel { display: none !important; }
  .app-content { margin-left: 0 !important; max-width: 100% !important; }
  .app-main { padding: 0 !important; }
}

/* ============================================================
   32. TOUCH DEVICE IMPROVEMENTS
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .submenu-link { padding: .65rem .9rem; }
  .stat-card:hover { transform: none; }
  .property-card:hover { transform: none; }
  .menu-link { padding: .75rem .9rem; }
}