/* MOBILE FIXES V2 - Better balanced for desktop and mobile */

/* ========================================
   1. FRAMEWORK BUTTONS - RESPONSIVE SIZING
   ======================================== */

/* Desktop - Normal sizing */
@media (min-width: 768px) {
  .framework-options {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important;
    gap: 8px !important;
  }

  .framework-option {
    min-width: 90px !important;
    max-width: 120px !important;
    padding: 10px 8px !important;
    min-height: 60px !important;
  }

  .framework-option .framework-icon {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }

  .framework-option .framework-name {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

/* Mobile - Compact sizing */
@media (max-width: 767px) {
  .framework-options {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .framework-option {
    min-width: unset !important;
    max-width: unset !important;
    width: 100% !important;
    padding: 6px 2px !important;
    min-height: 48px !important;
    font-size: 9px !important;
  }

  .framework-option .framework-icon {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }

  .framework-option .framework-name {
    font-size: 8px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.3px !important;
    word-break: break-all !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .custom-badge {
    font-size: 6px !important;
    padding: 1px 2px !important;
  }
}

/* ========================================
   2. MODAL CLOSE BUTTON - MORE PROMINENT
   ======================================== */

/* Desktop modal close */
@media (min-width: 768px) {
  .modal__close {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
  }
}

/* Mobile modal close - VERY prominent */
@media (max-width: 767px) {
  .modal__content {
    padding-top: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
    height: auto !important;
  }

  /* Floating close button */
  .modal__close {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 100001 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    background: #ff3b30 !important; /* Red background */
    color: white !important;
    border: 2px solid white !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    font-size: 28px !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  .modal__close:hover {
    transform: scale(1.1) !important;
    background: #dc2626 !important;
  }

  /* Modal header adjustments */
  .modal__header {
    padding: 20px 20px 12px 20px !important;
    margin-top: 20px !important; /* Space for close button */
    position: sticky !important;
    top: 0 !important;
    background: var(--color-bg-secondary) !important;
    z-index: 100 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .modal__title {
    padding-right: 0 !important;
    font-size: 18px !important;
  }

  /* Modal body scrolling */
  .modal__body {
    padding: 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(90vh - 140px) !important;
  }

  /* Story editor specific */
  .story-editor-content {
    padding: 12px !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 160px) !important;
  }

  .story-editor-footer {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--color-bg-secondary) !important;
    border-top: 2px solid var(--color-border-primary) !important;
    padding: 12px !important;
    z-index: 100 !important;
  }
}

/* ========================================
   3. SORT DROPDOWN & BUTTON FIXES
   ======================================== */

/* Sort dropdown - prevent text overflow */
.filter-dropdown,
.sort-dropdown,
select {
  font-size: 12px !important;
  padding: 8px 24px 8px 8px !important; /* Space for arrow */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

@media (max-width: 767px) {
  .filter-dropdown,
  .sort-dropdown,
  select {
    font-size: 11px !important;
    padding: 6px 20px 6px 6px !important;
    width: 100% !important;
  }

  /* Make option text smaller */
  .filter-dropdown option,
  .sort-dropdown option,
  select option {
    font-size: 11px !important;
    padding: 4px !important;
  }

  /* Search bar container */
  .search-bar {
    width: 100% !important;
  }

  .search-bar__controls {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .search-bar__filters {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* Quick View and Import buttons */
@media (max-width: 767px) {
  .page-actions {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .page-actions .btn {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 10px !important;
    padding: 8px 4px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 36px !important;
  }

  /* Specific button text adjustments */
  .btn:contains("Quick View"),
  [data-action="quick-view"] {
    font-size: 10px !important;
  }

  .btn:contains("Import"),
  [data-action="import"] {
    font-size: 10px !important;
  }
}

/* ========================================
   4. HAMBURGER MENU FIXES
   ======================================== */

/* Ensure hamburger is visible and clickable */
.header__mobile-menu {
  display: none !important;
  background: transparent !important;
  border: none !important;
  font-size: 24px !important;
  padding: 8px !important;
  cursor: pointer !important;
  color: var(--color-text-primary) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  z-index: 10000 !important;
  position: relative !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

@media (max-width: 767px) {
  .header__mobile-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Add visual feedback on tap */
  .header__mobile-menu:active {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
  }

  /* Sidebar width adjustment for mobile */
  .sidebar {
    width: 80% !important;
    max-width: 280px !important;
  }
}

/* ========================================
   5. ADDITIONAL MOBILE IMPROVEMENTS
   ======================================== */

@media (max-width: 767px) {
  /* Header adjustments */
  .header {
    padding: 0 8px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .header__logo {
    flex: 1 !important;
  }

  .logo-text {
    font-size: 18px !important;
  }

  /* Theme toggle compact */
  .theme-toggle {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 6px !important;
  }

  .theme-toggle__text {
    display: none !important;
  }

  /* Main content */
  .main-content {
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    padding-top: var(
      --spacing-xs
    ) !important; /* Minimal top padding since header already handled */
    margin-top: 0 !important; /* Header spacing handled by layout-container */
  }

  /* Page containers - remove extra padding */
  .page-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Page-specific containers - remove extra top padding */
  .stories-page,
  .dashboard-page,
  .analytics-page,
  .practice-page,
  .question-bank-page,
  .guided-prep-page,
  .interview-companion-page,
  .interview-assistant-page {
    padding-top: 0 !important;
  }

  /* Page headers - reduce top margin/padding */
  .page-header,
  .stories-page .page-header,
  .dashboard-header,
  .analytics-header {
    margin-top: 0 !important;
    padding-top: var(--spacing-md) !important; /* Minimal padding */
  }

  /* Page title */
  .page-title {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }

  /* Form inputs - prevent zoom on iOS */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* FAB positioning */
  .fab {
    width: 56px !important;
    height: 56px !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 997 !important; /* Below modals */
  }
}

/* ========================================
   6. Z-INDEX HIERARCHY FIX
   ======================================== */

.header {
  z-index: 1001 !important;
}
.header__mobile-menu {
  z-index: 1002 !important;
}
.sidebar-overlay {
  z-index: 9998 !important;
}
.sidebar {
  z-index: 9999 !important;
}
.modal__backdrop {
  z-index: 10000 !important;
}
.modal__content {
  z-index: 10001 !important;
}
.modal__close {
  z-index: 100001 !important;
} /* Highest priority */
.fab {
  z-index: 997 !important;
}

/* ========================================
   7. DEBUG HELPERS
   ======================================== */

/* Add visible border to hamburger for testing */
@media (max-width: 767px) {
  .header__mobile-menu {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
}