/* ===============================================
   Responsive Design for Flüstermail
   Mobile-First Approach
   =============================================== */

/* ===== MOBILE-FIRST BASE ===== */
/* Base styles are mobile (320px+) */

/* ===== SMALL TABLETS (640px+) ===== */
@media (min-width: 640px) {
  /* Typography adjustments */
  .sm\:text-base { font-size: var(--text-base); }
  .sm\:text-lg { font-size: var(--text-lg); }
  .sm\:text-xl { font-size: var(--text-xl); }
  .sm\:text-2xl { font-size: var(--text-2xl); }
  
  /* Layout */
  .sm\:flex { display: flex; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:grid { display: grid; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  
  /* Spacing */
  .sm\:gap-4 { gap: var(--space-4); }
  .sm\:gap-6 { gap: var(--space-6); }
  .sm\:p-6 { padding: var(--space-6); }
  .sm\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
  .sm\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  
  /* Container */
  .container {
    padding: 0 var(--space-6);
  }
  
  /* Buttons */
  .btn {
    padding: var(--space-3) var(--space-5);
  }
  
  .btn-sm {
    padding: var(--space-2) var(--space-4);
  }
  
  /* Cards */
  .card-body {
    padding: var(--space-6);
  }
  
  /* Modal adjustments */
  .modal {
    width: 85%;
    max-width: 600px;
  }
  
  /* Tables - Still card view but improved */
  .table-mobile {
    display: block;
  }
  
  .table-mobile-item {
    display: block;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
}

/* ===== TABLETS (768px+) ===== */
@media (min-width: 768px) {
  /* Typography */
  .md\:text-lg { font-size: var(--text-lg); }
  .md\:text-xl { font-size: var(--text-xl); }
  .md\:text-2xl { font-size: var(--text-2xl); }
  .md\:text-3xl { font-size: var(--text-3xl); }
  
  /* Layout */
  .md\:flex { display: flex; }
  .md\:flex-row { flex-direction: row; }
  .md\:grid { display: grid; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  
  /* Spacing */
  .md\:gap-6 { gap: var(--space-6); }
  .md\:gap-8 { gap: var(--space-8); }
  .md\:p-8 { padding: var(--space-8); }
  .md\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
  .md\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  
  /* Container */
  .container {
    padding: 0 var(--space-8);
  }
  
  /* Dashboard specific */
  .dashboard-layout {
    display: flex;
    height: 100vh;
  }
  
  .dashboard-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
  }
  
  .dashboard-main {
    flex: 1;
    overflow: hidden;
  }
  
  /* Show regular table on tablets */
  .table-mobile {
    display: none;
  }
  
  .table-container {
    display: block;
  }
  
  /* Modal adjustments */
  .modal {
    width: 80%;
    max-width: 700px;
  }
  
  /* Cards can be smaller with more columns */
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
  /* Typography */
  .lg\:text-xl { font-size: var(--text-xl); }
  .lg\:text-2xl { font-size: var(--text-2xl); }
  .lg\:text-3xl { font-size: var(--text-3xl); }
  .lg\:text-4xl { font-size: var(--text-4xl); }
  
  /* Layout */
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  
  /* Spacing */
  .lg\:gap-8 { gap: var(--space-8); }
  .lg\:p-8 { padding: var(--space-8); }
  .lg\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
  
  /* Modal adjustments */
  .modal {
    width: 60%;
    max-width: 800px;
  }
  
  /* Cards can be in 3 columns */
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
  
  /* Larger buttons on desktop */
  .btn-desktop {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
  }
}

/* ===== LARGE DESKTOP (1280px+) ===== */
@media (min-width: 1280px) {
  /* Container max width */
  .container {
    max-width: 1280px;
  }
  
  /* Layout */
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  
  /* Cards can be in 4 columns */
  .project-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Modal adjustments */
  .modal {
    width: 50%;
    max-width: 900px;
  }
}

/* ===== MOBILE-SPECIFIC COMPONENTS ===== */

/* Mobile Navigation */
@media (max-width: 767px) {
  .mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-light);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-4);
  }
  
  .mobile-sidebar {
    position: fixed;
    top: var(--header-height);
    left: -100%;
    width: 280px;
    height: calc(100vh - var(--header-height));
    background-color: var(--color-bg-primary);
    border-right: 1px solid var(--color-border-light);
    z-index: var(--z-modal);
    transition: left var(--transition-base);
    overflow-y: auto;
  }
  
  .mobile-sidebar.open {
    left: 0;
  }
  
  .mobile-overlay {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: var(--color-bg-overlay);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
  }
  
  .mobile-overlay.show {
    opacity: 1;
    visibility: visible;
  }
  
  .mobile-main {
    padding-top: var(--header-height);
    min-height: 100vh;
  }
  
  /* Mobile-friendly buttons */
  .btn {
    min-height: 44px; /* iOS touch target size */
    padding: var(--space-3) var(--space-4);
  }
  
  .btn-sm {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
  }
  
  /* Mobile cards */
  .card {
    margin-bottom: var(--space-4);
  }
  
  .card-body {
    padding: var(--space-4);
  }
  
  /* Mobile forms */
  .form-input {
    min-height: 44px;
    padding: var(--space-3);
    font-size: var(--text-base); /* Prevent zoom on iOS */
  }
  
  /* Mobile tables as cards */
  .table-container {
    display: none;
  }
  
  .table-mobile {
    display: block;
  }
  
  .table-mobile-item {
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
  }
  
  .table-mobile-header {
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
  }
  
  .table-mobile-content {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
  }
  
  .table-mobile-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  
  /* Mobile modals */
  .modal {
    width: 95%;
    max-width: none;
    margin: var(--space-4);
    max-height: calc(100vh - var(--space-8));
  }
  
  .modal-body {
    padding: var(--space-4);
    max-height: calc(70vh - 120px);
    overflow-y: auto;
  }
  
  /* Mobile dropdowns */
  .dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 50vh;
    overflow-y: auto;
  }
  
  /* Mobile breadcrumbs */
  .breadcrumb {
    font-size: var(--text-xs);
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: var(--space-2);
  }
  
  /* Mobile tabs */
  .tabs-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
  }
  
  .tabs-tab {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4);
  }
}

/* ===== TABLET-SPECIFIC OVERRIDES ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet sidebar */
  .dashboard-sidebar {
    width: 240px; /* Slightly narrower on tablets */
  }
  
  /* Tablet cards */
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
  
  /* Tablet forms */
  .form-group {
    margin-bottom: var(--space-5);
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  /* Hide interactive elements */
  .btn,
  .dropdown,
  .modal-backdrop,
  .modal,
  .mobile-nav,
  .dashboard-sidebar,
  .print\:hidden {
    display: none !important;
  }
  
  /* Optimize for print */
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }
  
  .card {
    border: 1px solid #000;
    box-shadow: none;
    break-inside: avoid;
  }
  
  .table {
    border-collapse: collapse;
  }
  
  .table th,
  .table td {
    border: 1px solid #000;
    padding: 4pt 8pt;
  }
  
  h1, h2, h3 {
    break-after: avoid;
  }
}

/* ===== ACCESSIBILITY ===== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --color-border-light: #000;
    --color-border-medium: #000;
    --color-text-secondary: #000;
    --color-text-tertiary: #000;
  }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
  /* Touch devices */
  .btn {
    min-height: 44px;
  }
  
  .form-input {
    min-height: 44px;
  }
  
  .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  .table-mobile-item {
    min-height: 60px;
  }
}

/* ===== LANDSCAPE PHONE OPTIMIZATIONS ===== */
@media (max-width: 767px) and (orientation: landscape) {
  .mobile-nav {
    height: 48px; /* Smaller header in landscape */
  }
  
  .mobile-sidebar {
    top: 48px;
    height: calc(100vh - 48px);
  }
  
  .mobile-main {
    padding-top: 48px;
  }
  
  .modal {
    max-height: calc(100vh - 32px);
    margin: var(--space-4) var(--space-2);
  }
}