/**
 * @file
 * Dashboard mobile view styles.
 *
 * Mobile-only responsive styles for all dashboard pages (IOM, NGO, Landlord,
 * Beneficiary, Case Worker). Applied at max-width: 767px only.
 * Does NOT affect desktop or tablet views.
 */

/* Breadcrumb now contains header-right - flex layout for both desktop and mobile */
.header .breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
}

.header .breadcrumb .header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 767px) {
  /* Dashboard container */
  .dashboard-container {
    flex-direction: column !important;
    min-height: 100vh !important;
  }

  /* Sidebar - off-canvas on mobile */
  .sidebar {
    transform: translateX(-100%) !important;
    width: 280px !important;
    max-width: 85vw !important;
  }

  /* Sidebar opens when body has sidebar-open (JS toggles body, not .sidebar.open) */
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  /* Overlay: hidden by default, only visible when sidebar is open (body.sidebar-open) */
  /* Do NOT override overlay - let landlord-dashboard.css control it. */

  /* Main content - full width on mobile */
  .main-content,
  .iom-dashboard .main-content,
  .beneficiary-dashboard .main-content,
  .landlord-dashboard .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Header - responsive mobile layout */
  .header,
  .header.header--iom {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    min-height: auto !important;
    height: auto !important;
  }

  .header-left {
    flex: 0 0 auto !important;
  }

  .header-left .header-left-primary {
    margin: 0 !important;
  }

  /* On mobile: hide breadcrumb-content (title/subtitle), header-right stays in breadcrumb */
  .header .breadcrumb {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    order: 2 !important;
  }

  .header .breadcrumb-content {
    display: none !important;
  }

  .header .breadcrumb .header-right {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .header-right-inner {
    gap: 8px !important;
  }

  .header-left h1 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .search-box input {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Sidebar z-index above overlay so it appears when open */
  .sidebar {
    z-index: 1100 !important;
  }

  .sidebar .nav-menu {
    padding-top: 0.5rem !important;
  }

  .sidebar .nav-menu ul {
    padding: 0 !important;
  }

  .sidebar-overlay {
    z-index: 1099 !important;
  }

  /* Content areas */
  .iom-dashboard__content,
  .beneficiary-dashboard__content,
  .iom-dashboard .iom-dashboard__content {
    padding: 20px 16px 32px !important;
  }

  /* Stats grid - single column */
  .iom-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .iom-stat-card {
    min-width: 0 !important;
  }

  /* Dashboard grid - single column */
  .iom-dashboard__grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .iom-activity-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Dashboard cards */
  .dashboard-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .dashboard-cards--compact {
    grid-template-columns: 1fr !important;
  }

  .dashboard-card {
    min-width: 0 !important;
  }

  /* IOM cards */
  .iom-card {
    min-width: 0 !important;
  }

  .iom-card__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .iom-card__actions {
    width: 100% !important;
  }

  /* Tables - horizontal scroll wrapper */
  .iom-dashboard table,
  .beneficiary-dashboard table,
  .report-listing table,
  .iom-data-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .iom-dashboard__content table,
  .beneficiary-dashboard__content table {
    min-width: 600px !important;
  }

  /* Report listing */
  .reports-landing {
    padding: 0 !important;
  }

  .reports-export-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .report-export-card {
    min-width: 0 !important;
  }

  .report-listing__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .report-listing__actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Map containers */
  .iom-leaflet-map,
  .landlord-dashboard .iom-leaflet-map {
    min-height: 280px !important;
    width: 100% !important;
  }

  /* Profile/dropdown areas */
  .profile-btn span {
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Dropdown menus - mobile responsive positioning and visibility */
  .header .dropdown {
    position: relative !important;
  }

  .header .profile.dropdown.active .profile-dropdown,
  .header .profile.dropdown .profile-dropdown.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header .notifications.dropdown.active .notification-dropdown,
  .header .notification-dropdown.show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
  }

  /* Profile dropdown - ensure body and options are visible */
  .header .profile-dropdown .dropdown-header,
  .header .profile-dropdown .dropdown-body,
  .header .profile-dropdown .dropdown-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header .profile-dropdown {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .header .profile-dropdown .dropdown-header {
    padding: 16px !important;
  }

  .header .profile-dropdown .dropdown-header .profile-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .header .profile-dropdown .dropdown-body {
    padding: 8px 0 !important;
    overflow: visible !important;
  }

  .header .profile-dropdown .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    min-height: 44px !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-decoration: none !important;
    color: #374151 !important;
  }

  .header .profile-dropdown .dropdown-item i {
    flex-shrink: 0 !important;
    width: 20px !important;
    text-align: center !important;
  }

  .header .profile-dropdown .dropdown-item span {
    display: inline !important;
    visibility: visible !important;
  }

  .header .profile-dropdown .dropdown-footer {
    padding: 12px 16px !important;
  }

  .header .profile-dropdown .dropdown-footer .dropdown-item {
    display: flex !important;
  }

  /* Notification dropdown - ensure content visible */
  .header .notification-dropdown .dropdown-header,
  .header .notification-dropdown .dropdown-body,
  .header .notification-dropdown .dropdown-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header .notification-dropdown .dropdown-body {
    max-height: 280px !important;
    overflow-y: auto !important;
  }

  .header .notification-dropdown .notification-item {
    padding: 14px 16px !important;
    min-height: 44px !important;
  }

  /* Content wrapper */
  .content-wrapper {
    padding: 0 !important;
  }

  .dashboard-section {
    padding-top: 16px !important;
  }

  /* Interested properties / property grids */
  .interested-properties-grid,
  .properties-grid {
    grid-template-columns: 1fr !important;
  }

  /* Forms on dashboard */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  .form-actions {
    flex-direction: column !important;
  }

  .form-actions button,
  .form-actions .btn {
    width: 100% !important;
  }
}