/*
 * Mobile Responsive Styles
 *
 * Comprehensive mobile optimization for all pages.
 * Uses consistent breakpoints and touch-friendly patterns.
 *
 * Breakpoints:
 *   - Desktop: > 900px (default)
 *   - Tablet: 768px - 900px
 *   - Mobile: 480px - 768px
 *   - Small Mobile: < 480px
 *
 * Touch Target Guidelines:
 *   - Minimum touch target: 44px x 44px (Apple HIG recommendation)
 *   - Minimum spacing between targets: 8px
 *   - Important actions should be larger: 48px+
 */

/* ============================================
 * BREAKPOINT CUSTOM PROPERTIES
 * ============================================ */
:root {
  /* Mobile-specific spacing overrides */
  --space-page-margin-tablet: var(--space-6);  /* 24px */
  --space-page-margin-mobile: var(--space-4);  /* 16px */
  --space-page-margin-small: var(--space-3);   /* 12px */

  /* Touch-friendly minimum sizes */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  --touch-spacing-min: 8px;
}

/* ============================================
 * TOUCH-FRIENDLY BUTTON ENHANCEMENTS
 * ============================================ */

/* Ensure all buttons meet minimum touch target size */
@media (pointer: coarse) {
  .btn {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }

  .btn-sm {
    min-height: 38px;
  }

  .btn-lg {
    min-height: var(--touch-target-comfortable);
  }

  /* Increase tap area for icon buttons */
  .btn-icon {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }
}

/* ============================================
 * GLOBAL MOBILE LAYOUT ADJUSTMENTS
 * ============================================ */

/* Prevent horizontal overflow */
html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Improve touch scrolling on all scrollable areas */
.admin-table-container,
.markdown-content pre {
  -webkit-overflow-scrolling: touch;
}

/* ============================================
 * PAGE CONTAINER RESPONSIVE ADJUSTMENTS
 * ============================================ */

@media (max-width: 900px) {
  .admin-page,
  .issues-page,
  .dashboard-page,
  .issue-form-page {
    padding: var(--space-6) var(--space-page-margin-tablet);
  }
}

@media (max-width: 768px) {
  .admin-page,
  .issues-page,
  .dashboard-page,
  .issue-form-page {
    padding: var(--space-4) var(--space-page-margin-mobile);
  }
}

@media (max-width: 480px) {
  .admin-page,
  .issues-page,
  .dashboard-page,
  .issue-form-page {
    padding: var(--space-3) var(--space-page-margin-small);
  }
}

/* ============================================
 * AUTH PAGES MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 480px) {
  .auth-page {
    margin: var(--space-8) auto;
    padding: var(--space-4);
    max-width: none;
  }

  .auth-page h1 {
    font-size: 1.25rem;
    margin-bottom: var(--space-4);
  }

  .auth-form input[type="email"],
  .auth-form input[type="password"] {
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: var(--touch-target-min);
  }

  .auth-form .btn-primary {
    width: 100%;
    min-height: var(--touch-target-comfortable);
    font-size: 1rem;
  }
}

/* ============================================
 * DASHBOARD MOBILE ENHANCEMENTS
 * ============================================ */

@media (max-width: 768px) {
  .dashboard-grid {
    gap: var(--space-4);
  }

  .dashboard-card {
    padding: var(--space-4);
    min-height: auto;
  }

  .dashboard-card h2 {
    font-size: 0.9375rem;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
  }
}

@media (max-width: 480px) {
  .dashboard-grid {
    gap: var(--space-3);
    margin-top: var(--space-4);
  }

  .dashboard-card {
    padding: var(--space-3);
  }

  /* Make issue items more touch-friendly */
  .issue-item-compact {
    padding: var(--space-3);
    min-height: var(--touch-target-comfortable);
  }

  .issue-link {
    font-size: 0.9375rem;
  }

  .team-stat-item {
    padding: var(--space-3) var(--space-2);
    min-height: var(--touch-target-min);
  }

  .team-name {
    font-size: 0.875rem;
  }

  .team-count {
    font-size: 1rem;
    padding: var(--space-1-5) var(--space-2);
  }
}

/* ============================================
 * ADMIN TABLES MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 768px) {
  .admin-table-container {
    margin: 0 calc(-1 * var(--space-page-margin-mobile));
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .admin-table {
    font-size: 0.875rem;
  }

  .admin-table th,
  .admin-table td {
    padding: var(--space-3) var(--space-2);
  }

  /* Make action buttons more touch-friendly */
  .btn-action {
    padding: var(--space-2) var(--space-3);
    min-height: 36px;
  }

  .actions-cell {
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .admin-table-container {
    margin: 0 calc(-1 * var(--space-page-margin-small));
  }

  .admin-table th,
  .admin-table td {
    padding: var(--space-2-5) var(--space-2);
  }

  /* Stack user email and badge on mobile */
  .user-email {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  /* Compact role and status badges */
  .role-badge,
  .status-badge {
    font-size: 0.6875rem;
    padding: var(--space-0-5) var(--space-2);
  }
}

/* ============================================
 * FORM MOBILE ENHANCEMENTS
 * ============================================ */

@media (max-width: 768px) {
  /* Ensure form containers don't overflow */
  .admin-form-container,
  .issue-form-container {
    max-width: none;
  }

  /* Make inputs easier to tap */
  .form-input,
  .form-textarea,
  .form-select {
    min-height: var(--touch-target-min);
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Full-width form actions */
  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: var(--touch-target-comfortable);
  }

  /* Touch-friendly checkboxes and radios */
  .form-checkbox,
  .form-radio {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  .form-check {
    min-height: var(--touch-target-min);
    padding: var(--space-2) 0;
  }

  .team-checkbox,
  .label-checkbox {
    padding: var(--space-3);
    min-height: var(--touch-target-min);
  }
}

@media (max-width: 480px) {
  .form-label {
    font-size: 0.8125rem;
  }

  .form-hint,
  .form-error {
    font-size: 0.6875rem;
  }

  /* Stack checkbox/radio groups */
  .form-check-group-inline {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ============================================
 * CARD COMPONENT MOBILE ENHANCEMENTS
 * ============================================ */

@media (max-width: 480px) {
  .card {
    border-radius: 6px;
  }

  .card-header {
    padding: var(--space-3);
  }

  .card-title {
    font-size: var(--text-base);
  }

  .card-body {
    padding: var(--space-3);
  }

  .card-footer {
    padding: var(--space-3);
  }

  /* Make card actions touch-friendly */
  .card-header-actions .btn {
    min-height: 36px;
  }
}

/* ============================================
 * MODAL MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 768px) {
  .modal-dialog {
    width: 95%;
    max-width: none;
    margin: var(--space-4);
  }

  .modal-header {
    padding: var(--space-4);
  }

  .modal-body {
    padding: var(--space-4);
  }

  .modal-footer {
    padding: var(--space-3) var(--space-4);
    flex-direction: column-reverse;
    gap: var(--space-2);
  }

  .modal-footer .btn-modal-cancel,
  .modal-footer .btn-modal-confirm {
    width: 100%;
    min-height: var(--touch-target-min);
  }

  .delete-option {
    padding: var(--space-3);
  }
}

@media (max-width: 480px) {
  .modal-icon {
    width: 40px;
    height: 40px;
  }

  .modal-icon svg {
    width: 20px;
    height: 20px;
  }

  .modal-title {
    font-size: 1rem;
  }
}

/* ============================================
 * FLASH MESSAGES MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 768px) {
  .flash-notice,
  .flash-alert {
    margin: var(--space-3) var(--space-page-margin-mobile);
    padding: var(--space-3);
    border-radius: 6px;
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .flash-notice,
  .flash-alert {
    margin: var(--space-2) var(--space-page-margin-small);
  }
}

/* ============================================
 * PAGE HEADER MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .page-header h1 {
    font-size: 1.25rem;
    text-align: center;
  }

  .header-actions {
    justify-content: center;
  }

  .page-header--enhanced {
    padding: var(--space-4);
    gap: var(--space-4);
  }

  .page-header__title {
    font-size: var(--text-xl);
  }
}

@media (max-width: 480px) {
  .page-header {
    gap: var(--space-3);
  }

  .page-header h1 {
    font-size: 1.125rem;
  }

  .header-actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .header-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .workspace-status {
    text-align: center;
    width: 100%;
  }
}

/* ============================================
 * EMPTY STATE MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 480px) {
  .empty-state {
    padding: var(--space-6) var(--space-4);
  }

  .empty-state-inline {
    padding: var(--space-6) var(--space-3);
  }
}

/* ============================================
 * ISSUE DETAIL PAGE MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 768px) {
  .issue-detail-page {
    padding: var(--space-4) var(--space-page-margin-mobile);
  }

  .issue-breadcrumb {
    flex-wrap: wrap;
    gap: var(--space-1);
    font-size: var(--text-xs);
    margin-bottom: var(--space-4);
  }

  .issue-title-redesign {
    font-size: var(--text-xl);
  }

  .issue-meta-row {
    gap: var(--space-3);
  }

  .meta-item {
    font-size: var(--text-xs);
  }

  /* Comments area */
  .comment-item {
    gap: var(--space-2);
  }

  .comment-avatar-img,
  .comment-avatar-placeholder {
    width: 32px;
    height: 32px;
  }

  .comment-content {
    padding: var(--space-2-5) var(--space-3);
  }

  .comment-textarea {
    min-height: 100px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

@media (max-width: 480px) {
  .issue-detail-page {
    padding: var(--space-3) var(--space-page-margin-small);
  }

  .issue-badges {
    flex-wrap: wrap;
    gap: var(--space-1-5);
  }

  .issue-status-badge,
  .issue-priority-badge,
  .issue-id-badge {
    font-size: var(--text-xs);
    padding: var(--space-0-5) var(--space-2);
  }

  .issue-title-redesign {
    font-size: var(--text-lg);
  }

  /* Sidebar cards on mobile */
  .sidebar-card {
    padding: var(--space-3);
  }

  .detail-row {
    flex-direction: column;
    gap: var(--space-1);
  }

  .detail-row dd {
    text-align: left;
  }

  /* Content cards */
  .content-card-header {
    padding: var(--space-3) var(--space-4);
  }

  .content-card-body {
    padding: var(--space-4);
  }
}

/* ============================================
 * ISSUE LIST MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 768px) {
  .issue-card {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .issue-identifier {
    font-size: 0.6875rem;
    min-width: auto;
  }

  .issue-meta {
    gap: var(--space-2);
  }

  .issue-card--enhanced {
    padding: 0;
  }

  .issue-card__main {
    padding: var(--space-3);
  }

  .issue-card__header {
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .issue-card {
    padding: var(--space-2-5);
  }

  .issue-title {
    font-size: 0.875rem;
  }

  .issue-priority,
  .issue-status {
    font-size: 0.6875rem;
    padding: var(--space-0-5) var(--space-1-5);
  }
}

/* ============================================
 * FILTER CONTROLS MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 768px) {
  .filters-container {
    gap: var(--space-3);
  }

  .priority-filter,
  .status-filter {
    padding: var(--space-3);
  }

  .filter-label {
    width: 100%;
    margin-bottom: var(--space-2);
  }

  .priority-filter-options {
    width: 100%;
  }

  .priority-filter-option {
    padding: var(--space-2) var(--space-3);
    min-height: 36px;
  }
}

@media (max-width: 480px) {
  .priority-filter-options {
    flex-direction: column;
  }

  .priority-filter-option {
    width: 100%;
    justify-content: center;
    min-height: var(--touch-target-min);
  }

  .status-filter-toggle {
    min-height: var(--touch-target-min);
  }
}

/* ============================================
 * TEAM SECTIONS MOBILE OPTIMIZATION
 * ============================================ */

@media (max-width: 768px) {
  .teams-container {
    gap: var(--space-6);
  }

  .issues-container {
    border-radius: 8px;
  }

  .team-section--enhanced {
    border-radius: 8px;
  }

  .team-header--enhanced {
    padding: 0;
  }

  .team-header__content {
    padding: var(--space-3);
  }

  .team-header__name {
    font-size: var(--text-base);
  }
}

/* ============================================
 * SAFE AREA INSETS (for notched devices)
 * ============================================ */

@supports (padding: env(safe-area-inset-bottom)) {
  .main-nav__menu {
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }

  .modal-footer {
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }
}

/* ============================================
 * REDUCED MOTION PREFERENCES
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
 * PRINT STYLES (hide navigation on print)
 * ============================================ */

@media print {
  .main-nav,
  .main-nav__mobile-toggle,
  .flash-notice,
  .flash-alert {
    display: none !important;
  }

  .main-content {
    min-height: auto;
  }
}