/* Mobile-Friendly Enhancements */

/* ========================================
   1. TOUCH-FRIENDLY TAP TARGETS
   ======================================== */

/* Minimum 44x44px tap targets for mobile */
@media (max-width: 768px) {
  /* Buttons */
  .btn {
    min-height: 44px;
    padding: 0.5rem 1rem;
  }

  .btn-sm {
    min-height: 38px;
    padding: 0.4rem 0.8rem;
  }

  /* Navigation links */
  .nav-link {
    min-height: 44px;
    padding: 0.75rem 1rem !important;
  }

  /* Dropdown items */
  .dropdown-item {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
  }

  /* Table action buttons */
  .table .btn,
  .table .dropdown-toggle {
    min-height: 44px;
    min-width: 44px;
  }

  /* Form controls */
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Checkboxes and radios */
  .form-check-input {
    min-width: 24px;
    min-height: 24px;
    margin-top: 0.125rem;
  }

  /* Toggle switches: restore proper pill shape — min-height breaks the handle */
  .form-switch .form-check-input {
    min-height: 0;
    min-width: 0;
    width: 2.5em;
    height: 1.25em;
    margin-top: 0.1875em;
  }

  /* Pagination */
  .pagination .page-link {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
  }

  /* Badge close buttons */
  .badge .btn-close {
    min-width: 24px;
    min-height: 24px;
  }
}

/* ========================================
   2. SWIPE ACTIONS FOR LIST ITEMS
   ======================================== */

@media (max-width: 768px) {
  /* Swipeable row container */
  .swipeable-row {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
  }

  /* Swipe actions background */
  .swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    background: linear-gradient(to left, #dc3545, #e35d6a);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .swipe-actions.left {
    left: 0;
    right: auto;
    background: linear-gradient(to right, #0d6efd, #3d8bfd);
  }

  /* Swipe action buttons */
  .swipe-action-btn {
    min-width: 60px;
    min-height: 44px;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.5rem;
  }

  .swipe-action-btn .swipe-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
  }

  /* Row content wrapper */
  .swipe-content {
    position: relative;
    background: var(--bs-body-bg);
    transition: transform 0.3s ease;
    z-index: 1;
  }

  /* Active swipe states */
  .swipeable-row.swiped-left .swipe-content {
    transform: translateX(-160px);
  }

  .swipeable-row.swiped-left .swipe-actions {
    transform: translateX(0);
  }

  .swipeable-row.swiped-right .swipe-content {
    transform: translateX(160px);
  }

  .swipeable-row.swiped-right .swipe-actions.left {
    transform: translateX(0);
  }

  /* Kanban card swipe */
  .kanban-card.swipeable-row {
    margin-bottom: 1rem;
  }

  .kanban-card .swipe-content {
    border-radius: 8px;
  }
}

/* ========================================
   3. MOBILE BOTTOM NAVIGATION
   ======================================== */

/* Base styles for mobile bottom nav (apply regardless of screen size when visible) */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1030;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .mobile-bottom-nav {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  text-decoration: none;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  gap: 0.25rem;
  min-height: 44px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}

.mobile-nav-item i {
  font-size: 1.5rem;
}

.mobile-nav-item.active {
  color: var(--bs-primary);
  font-weight: 600;
}

.mobile-nav-item:active {
  background: var(--bs-secondary-bg);
}

@media (max-width: 768px) {
  /* Hide desktop navigation on mobile */
  body.mobile-nav-enabled .navbar-expand-lg {
    display: none;
  }

  /* Adjust body padding for bottom nav */
  body.mobile-nav-enabled {
    padding-top: 0 !important;
    padding-bottom: 70px;
  }

  /* Mobile nav menu overlay */
  .mobile-nav-menu {
    position: fixed;
    bottom: 65px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 65px);
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 1029;
    overflow-y: auto;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }

  .mobile-nav-menu.show {
    transform: translateY(0);
  }

  .mobile-nav-menu-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--bs-body-bg);
    z-index: 1;
  }

  .mobile-nav-menu-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
  }

  .mobile-nav-menu-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--bs-body-color);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-nav-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-nav-menu-item {
    border-bottom: 1px solid var(--bs-border-color);
  }

  .mobile-nav-menu-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    color: var(--bs-body-color);
    text-decoration: none;
    min-height: 56px;
    transition: background 0.2s ease;
  }

  .mobile-nav-menu-link:active {
    background: var(--bs-secondary-bg);
  }

  .mobile-nav-menu-link i {
    font-size: 1.25rem;
    margin-right: 1rem;
    min-width: 24px;
  }

  /* Backdrop for menu */
  .mobile-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 65px;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1028;
  }

  .mobile-nav-backdrop.show {
    opacity: 1;
    visibility: visible;
  }
}

/* ========================================
   4. MOBILE FILTER BOTTOM SHEET
   ======================================== */

@media (max-width: 768px) {
  /* Hide desktop filter panel on mobile */
  #filterPanel.collapse {
    display: none !important;
  }

  /* Mobile filter button */
  .mobile-filter-btn {
    position: fixed;
    bottom: 80px;
    right: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    z-index: 1020;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .mobile-filter-btn:active {
    transform: scale(0.95);
  }

  .mobile-filter-btn .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    background: var(--bs-danger);
    color: white;
  }

  /* Filter bottom sheet */
  .mobile-filter-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: var(--bs-body-bg);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 1040;
    display: flex;
    flex-direction: column;
  }

  .mobile-filter-sheet.show {
    transform: translateY(0);
  }

  /* Filter sheet handle */
  .filter-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--bs-secondary-color);
    border-radius: 2px;
    margin: 12px auto 8px;
    opacity: 0.5;
  }

  /* Filter sheet header */
  .filter-sheet-header {
    padding: 0.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .filter-sheet-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
  }

  .filter-sheet-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--bs-body-color);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Filter sheet body */
  .filter-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
  }

  /* Filter sheet footer */
  .filter-sheet-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    gap: 0.75rem;
    background: var(--bs-body-bg);
  }

  .filter-sheet-footer .btn {
    flex: 1;
  }

  /* Filter backdrop */
  .mobile-filter-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1039;
  }

  .mobile-filter-backdrop.show {
    opacity: 1;
    visibility: visible;
  }
}

/* ========================================
   5. MOBILE TABLE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
  /* Stack table cells vertically on mobile */
  .table-mobile-cards .table thead {
    display: none;
  }

  .table-mobile-cards .table,
  .table-mobile-cards .table tbody,
  .table-mobile-cards .table tr,
  .table-mobile-cards .table td {
    display: block;
    width: 100%;
  }

  .table-mobile-cards .table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .table-mobile-cards .table td {
    text-align: left !important;
    padding: 0.75rem 1rem;
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    position: relative;
    padding-left: 45%;
  }

  .table-mobile-cards .table td:last-child {
    border-bottom: none;
  }

  /* Add labels before each cell */
  .table-mobile-cards .table td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    width: 40%;
  }

  /* Actions cell */
  .table-mobile-cards .table td:last-child {
    text-align: center !important;
    padding-left: 1rem;
  }

  .table-mobile-cards .table td:last-child::before {
    display: none;
  }
}

/* ========================================
   6. MOBILE KANBAN OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
  /* Single column kanban on mobile */
  .kanban-board {
    grid-template-columns: 1fr !important;
  }

  /* Kanban column headers sticky */
  .kanban-column-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-body-bg);
  }

  /* Kanban cards more compact */
  .kanban-card {
    font-size: 0.9rem;
  }

  .kanban-card-title {
    font-size: 1rem;
  }

  .kanban-card-meta {
    font-size: 0.85rem;
  }

  /* Drag handle for mobile */
  .kanban-card .mobile-drag-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    cursor: grab;
  }

  .kanban-card.dragging .mobile-drag-handle {
    cursor: grabbing;
  }
}

/* ========================================
   7. MOBILE FORM OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
  /* Full width form groups */
  .row > [class*="col-"] .form-group,
  .row > [class*="col-"] .mb-3 {
    margin-bottom: 1.5rem;
  }

  /* Larger labels */
  label {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
  }

  /* Stack form buttons */
  .form-actions .btn {
    width: 100%;
    margin-bottom: 0.75rem;
  }

  .form-actions .btn:last-child {
    margin-bottom: 0;
  }

  /* Better spacing for form sections */
  fieldset {
    padding: 1.5rem 1rem;
    margin-bottom: 1.5rem;
  }

  legend {
    font-size: 1.125rem;
    padding: 0 0.5rem;
  }

  /* Button rows in card forms: flex-wrap with gap so buttons never overflow
     or sit flush together. Covers all forms using ms-2 or d-flex gap-2
     without flex-wrap — no template changes needed. */
  .card form .col-12:has(> .btn),
  .card form .col-12:has(> a.btn),
  .card form .mt-3:has(> .btn),
  .card form .mt-3:has(> a.btn),
  .card form .mt-4:has(> .btn),
  .card form .mt-4:has(> a.btn) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Also handle d-flex containers that lack flex-wrap */
  .card form .d-flex:has(> .btn) {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Strip ms-2 from sibling buttons — gap handles spacing now */
  .card form .btn + .btn,
  .card form a.btn + .btn,
  .card form .btn + a.btn {
    margin-left: 0 !important;
  }

  /* Shrink form-floating labels so long labels (>30 chars) don't clip */
  .form-floating > label {
    font-size: 0.85rem;
  }

  /* Form toggle switch groups: 2 per row */
  .form-switch-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
  }
}

/* ========================================
   8. MOBILE MODAL OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
  /* Full screen modals on mobile */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100vh;
  }

  .modal-content {
    height: 100%;
    border-radius: 0;
    border: none;
  }

  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal headers sticky */
  .modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
  }

  /* Modal footers sticky */
  .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
  }
}

/* ========================================
   9. PULL-TO-REFRESH INDICATOR
   ======================================== */

@media (max-width: 768px) {
  .pull-to-refresh {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    padding: 1rem;
    background: var(--bs-primary);
    color: white;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pull-to-refresh.active {
    transform: translateX(-50%) translateY(0);
  }

  .pull-to-refresh .spinner-border {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
  }
}

/* ========================================
   10. MOBILE UTILITY CLASSES
   ======================================== */

@media (max-width: 768px) {
  /* Hide on mobile */
  .mobile-hide {
    display: none !important;
  }

  /* Show only on mobile */
  .mobile-only {
    display: initial !important;
  }
  
  /* Ensure mobile-bottom-nav uses flex even with mobile-only class */
  .mobile-bottom-nav.mobile-only {
    display: flex !important;
  }

  /* Mobile spacing utilities */
  .mobile-mt-0 { margin-top: 0 !important; }
  .mobile-mt-1 { margin-top: 0.25rem !important; }
  .mobile-mt-2 { margin-top: 0.5rem !important; }
  .mobile-mt-3 { margin-top: 1rem !important; }
  .mobile-mt-4 { margin-top: 1.5rem !important; }
  .mobile-mt-5 { margin-top: 3rem !important; }

  .mobile-mb-0 { margin-bottom: 0 !important; }
  .mobile-mb-1 { margin-bottom: 0.25rem !important; }
  .mobile-mb-2 { margin-bottom: 0.5rem !important; }
  .mobile-mb-3 { margin-bottom: 1rem !important; }
  .mobile-mb-4 { margin-bottom: 1.5rem !important; }
  .mobile-mb-5 { margin-bottom: 3rem !important; }

  .mobile-p-0 { padding: 0 !important; }
  .mobile-p-1 { padding: 0.25rem !important; }
  .mobile-p-2 { padding: 0.5rem !important; }
  .mobile-p-3 { padding: 1rem !important; }
  .mobile-p-4 { padding: 1.5rem !important; }
  .mobile-p-5 { padding: 3rem !important; }

  /* Mobile text utilities */
  .mobile-text-center { text-align: center !important; }
  .mobile-text-left { text-align: left !important; }
  .mobile-text-right { text-align: right !important; }
}

/* Force Mobile Mode (when user sets "always on") */
body.force-mobile-mode .mobile-only {
  display: initial !important;
}

body.force-mobile-mode .mobile-bottom-nav {
  display: flex !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
  justify-content: space-around;
  align-items: center;
  z-index: 1030;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

body.force-mobile-mode .mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  text-decoration: none;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  gap: 0.25rem;
  min-height: 44px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}

body.force-mobile-mode .mobile-nav-item i {
  font-size: 1.5rem;
}

body.force-mobile-mode .mobile-nav-item.active {
  color: var(--bs-primary);
  font-weight: 600;
}

body.force-mobile-mode .mobile-nav-item:active {
  background: var(--bs-secondary-bg);
}

body.force-mobile-mode .mobile-filter-btn,
body.force-mobile-mode .mobile-filter-sheet {
  display: flex !important;
}

body.force-mobile-mode {
  padding-bottom: 70px !important;
}

body.force-mobile-mode .navbar-expand-lg {
  display: none !important;
}

/* Desktop only */
@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }

  .mobile-bottom-nav,
  .mobile-filter-btn,
  .mobile-filter-sheet,
  .mobile-filter-backdrop,
  .mobile-nav-backdrop,
  .mobile-nav-menu {
    display: none !important;
  }
  
  /* Override force-mobile-mode when user sets "never" */
  body:not(.force-mobile-mode) .mobile-only,
  body:not(.force-mobile-mode) .mobile-bottom-nav,
  body:not(.force-mobile-mode) .mobile-filter-btn,
  body:not(.force-mobile-mode) .mobile-filter-sheet,
  body:not(.force-mobile-mode) .mobile-filter-backdrop,
  body:not(.force-mobile-mode) .mobile-nav-backdrop,
  body:not(.force-mobile-mode) .mobile-nav-menu {
    display: none !important;
  }
  
  body:not(.force-mobile-mode) {
    padding-bottom: 0 !important;
  }
  
  body:not(.force-mobile-mode) .navbar-expand-lg {
    display: flex !important;
  }

  /* Hide swipe actions on desktop */
  .swipe-actions {
    display: none !important;
  }

  /* Ensure swipe content is not transformed on desktop */
  .swipe-content {
    transform: none !important;
    position: static !important;
    background: transparent !important;
  }

  /* Remove swipeable styling on desktop */
  .swipeable-row {
    position: static !important;
    overflow: visible !important;
  }
}