/* Responsive Overrides */

/* Mobile-first: Default styling applies to all devices */

/* Extra small (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  /* Body padding adjustments: reserve space for fixed header and bottom-nav */
  body {
    padding: 56px 0.5rem 56px; /* top, horizontal, bottom */
  }

  /* Header adjustments */
  .main-header .header-inner {
    padding: 0 1rem;
  }
  .main-header .header-logo {
    font-size: 1.6rem;
    margin-right: 1rem;
  }

  /* Search bar hidden on XS, use mobile search */
  .main-header .header-search {
    display: none;
  }

  /* Mobile bottom nav icon size */
  .mobile-bottom-nav a {
    flex: 1;
    text-align: center;
    font-size: 1.5rem;
    padding: 0.5rem 0;
  }

  /* Expand mobile bottom nav Post icon container width */
  .mobile-bottom-nav a[data-bs-target="#postModal"] {
    flex: 0 0 80px !important;
  }

  /* Content containers full width */
  .container {
    max-width: 100% !important;
    padding: 0 0.5rem !important;
  }
  
  /* Hide footer on mobile */
  footer.footer {
    display: none;
  }

  /* Custom mobile fixes for comment section layout */
  .comments-section .input-group .form-control,
  .comments-section .input-group .btn {
    width: auto !important;
    margin-bottom: 0 !important;
  }
  .comment-content .d-flex.justify-content-between.align-items-center {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    padding-right: 24px !important;
  }
  .comment-content .d-flex.justify-content-between.align-items-center .comment-timestamp,
  .comment-content .d-flex.justify-content-between.align-items-center .comment-username {
    margin-top: 0 !important;
    white-space: nowrap !important;
  }
  .comment-content .d-flex.justify-content-between.align-items-center .delete-comment-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    width: auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
}

/* Small (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .main-header .header-search {
    flex: 1;
    min-width: 200px;
  }
  .header-right {
    gap: 0.5rem;
  }
  
  /* Hide footer on mobile */
  footer.footer {
    display: none;
  }
}

/* Medium (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .main-header .header-inner {
    padding: 0 2rem;
  }
  .main-header .header-logo {
    margin-left: 100px;
  }
  /* Fix search bar width on tablets */
  .main-header .header-search {
    flex: 0 0 50px;
    max-width: 50px;
    margin-left: -55px;
  }
  /* Increase Post button width on tablets */
  .header-post-btn {
    width: 100px;
  }
}

/* Large and up: default Bootstrap grid applies */

/* Utility helper: fluid images */
img, .img-fluid {
  max-width: 100%;
  height: auto;
}

/* Ensure tables are responsive */
.table-responsive {
  overflow-x: auto;
}

/* Form controls full width on mobile */
@media (max-width: 575.98px) {
  .form-control,
  .btn {
    width: 100%;
    margin-bottom: 0;
  }
}

/* Custom overrides should be placed here to avoid conflicts with Bootstrap */

/* Profile cover flush under header on mobile */
@media (max-width: 767.98px) {
  body { padding-top: 0 !important; }
  .main-content > .container.my-4 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .profile-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .main-content {
    margin-top: 56px !important;
  }
  
  /* Common mobile profile header improvements */
  .profile-header-box {
    border-radius: 8px !important;
    padding: 70px 16px 24px 16px !important;
    width: 100% !important;
    margin-top: 0 !important;
    position: relative !important;
  }
  
  .profile-picture-large {
    width: 90px !important;
    height: 90px !important;
    position: absolute !important;
    left: 16px !important;
    top: -45px !important;
    transform: none !important;
    border: 3px solid #fff !important;
    z-index: 10 !important;
  }
  
  .profile-header-content {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: 100% !important;
    position: relative !important;
  }
  
  .profile-name {
    text-align: left !important;
    width: 100% !important;
    margin: 0 0 5px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    display: block !important;
    padding: 0 !important;
    word-break: break-word !important;
  }
  
  .profile-username {
    color: #888 !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
    width: 100% !important;
  }
  
  /* Ensure mobile actions are always properly displayed */
  .mobile-profile-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    position: absolute !important;
    top: 15px !important;
    right: 16px !important;
    width: auto !important;
    gap: 15px !important;
    z-index: 11 !important;
  }
  
  .mobile-profile-actions .btn {
    min-width: 36px !important;
    height: 36px !important;
    padding: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
    background-color: transparent !important;
    color: #1d6bf3 !important;
    border: none !important;
  }
  
  .mobile-profile-actions .btn i {
    font-size: 1.2rem !important;
  }
  
  .green-flags-count {
    margin: 15px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .profile-counts {
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    margin-bottom: 15px !important;
  }
  
  .profile-count-item {
    flex: 1 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  
  .profile-count-number {
    font-size: 1.5rem !important;
    margin-bottom: 3px !important;
  }
  
  .profile-count-label {
    font-size: 0.85rem !important;
  }
  
  /* Ensure desktop actions are hidden on mobile */
  .profile-actions-btns {
    display: none !important;
  }
  
  .profile-meta-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 16px !important;
    width: 100% !important;
  }
  
  .profile-meta-divider {
    display: none !important;
  }
  
  .profile-meta-item {
    min-width: unset !important;
    text-align: center !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    display: flex !important;
    margin-bottom: 3px !important;
  }
  
  .profile-meta-label {
    color: #777 !important;
    font-size: 0.9rem !important;
    text-align: left !important;
    margin-right: 10px !important;
  }
  
  .profile-meta-value {
    font-size: 0.9rem !important;
    text-align: right !important;
    color: #222 !important;
  }
  
  .relationship-status {
    text-align: center !important;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    color: #666 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .relationship-status i {
    margin-right: 5px !important;
  }
  
  .profile-header-content > .d-flex {
    flex-direction: column !important;
    width: 100% !important;
    align-items: center !important;
  }
}

/* Extremely small screens */
@media (max-width: 380px) {
  .profile-picture-large {
    width: 100px !important;
    height: 100px !important;
    top: -50px !important;
  }
  
  .profile-header-box {
    padding: 20px 8px 12px 8px !important;
  }
  
  .profile-name {
    font-size: 1.2rem !important;
  }
  
  .profile-count-number {
    font-size: 1.5rem !important;
  }
  
  .profile-meta-row {
    grid-template-columns: 1fr !important;
  }
  
  .profile-meta-item {
    text-align: center !important;
    width: 100% !important;
  }
}

/* Mobile dropdown submenu styles */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* Mobile specific dropdown submenu positioning */
@media (max-width: 767.98px) {
  .dropdown-submenu > .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin-top: 0.5rem;
    margin-left: 0;
    padding-left: 1rem;
    border: none;
    box-shadow: none;
    background-color: #f8f8f8;
    display: none;
  }
  
  /* Remove the default arrow character */
  .dropdown-submenu > a::after {
    display: none;
  }
  
  /* Style the chevron icon */
  .dropdown-submenu .fa-chevron-right {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
  }
  
  /* Rotate icon when submenu is open */
  .dropdown-submenu .fa-rotate-90 {
    transform: rotate(90deg);
  }
  
  .dropdown-submenu > .dropdown-item {
    white-space: normal;
  }
}

/* Mobile landscape orientation improvements */
@media (max-height: 500px) and (orientation: landscape) {
  .profile-picture-large {
    width: 90px !important;
    height: 90px !important;
    top: -45px !important;
  }
  
  .profile-header-content {
    margin-top: 50px !important;
  }
  
  .profile-header-box {
    padding: 16px 12px 12px 12px !important;
  }
  
  .profile-meta-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px !important;
  }
  
  .profile-meta-item {
    flex: 0 0 auto;
    min-width: unset !important;
    margin-right: 12px;
  }
  
  .profile-meta-divider {
    display: none !important;
  }
}

/* Additional mobile dropdown styling improvements */
@media (max-width: 767.98px) {
  .dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    white-space: normal;
  }
  
  .dropdown-submenu .dropdown-toggle {
    text-decoration: none;
    color: #212529;
  }
  
  .dropdown-submenu .dropdown-menu {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
  
  .dropdown-item:active, 
  .dropdown-item:focus, 
  .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #16181b;
  }
  
  .dropdown-submenu > a:hover {
    background-color: #f8f9fa;
  }
}