/* ============================================================================
   RESPONSIVE DESIGN - Mobile First Approach
   ============================================================================ */

/* ============================================================================
   SMALL SCREENS (Mobile - max-width: 640px)
   ============================================================================ */

@media (max-width: 640px) {
  :root {
    --spacing-lg: 12px;
    --spacing-xl: 16px;
  }

  body {
    padding-top: 70px;
    font-size: 15px;
  }

  .floating-navbar {
    top: 8px;
    left: 8px;
    right: 8px;
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .navbar-left {
    gap: var(--spacing-sm);
  }

  .navbar-right {
    gap: var(--spacing-xs);
  }

  .navbar-brand {
    gap: 4px;
    font-size: 0.95rem;
  }

  .navbar-brand i {
    font-size: 1.1rem;
  }

  .brand-text {
    display: inline;
  }

  .current-date {
    display: none;
  }

  .date-text {
    display: none;
  }

  .icon-btn {
    font-size: 0.95rem;
  }

  .btn-text {
    display: none;
  }

  .switch-label {
    width: 40px;
    height: 22px;
  }

  .switch-label::after {
    width: 18px;
    height: 18px;
  }

  .theme-switch input:checked + .switch-label::after {
    left: calc(100% - 20px);
  }

  /* Main Content */
  .main-content {
    padding: var(--spacing-md);
  }

  .container {
    padding: 0;
  }

  /* Cards */
  .card-section {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .card-header {
    margin-bottom: var(--spacing-md);
  }

  .section-title {
    font-size: 1.1rem;
  }

  /* Forms */
  .form-group {
    margin-bottom: var(--spacing-md);
  }

  .form-label {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
  }

  .form-input,
  .form-select {
    padding: 10px var(--spacing-md);
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Buttons */
  .btn {
    padding: 10px var(--spacing-md);
    font-size: 0.95rem;
    gap: var(--spacing-xs);
  }

  .btn-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }

  /* Grid Layout */
  .grid-2col {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  /* Table */
  .data-table {
    font-size: 0.85rem;
  }

  .data-table th,
  .data-table td {
    padding: var(--spacing-md);
  }

  /* Calendar */
  .calendar-legend {
    gap: var(--spacing-md);
    font-size: 0.8rem;
  }

  .calendar-grid {
    gap: 4px;
  }

  .calendar-day {
    padding: 4px;
    font-size: 0.8rem;
  }

  /* Task List */
  .task-item {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
  }

  /* Footer */
  .site-footer {
    padding: var(--spacing-lg);
    font-size: 0.85rem;
  }

  /* Visibility */
  .hide-mobile {
    display: none !important;
  }
}

/* ============================================================================
   MEDIUM SCREENS (Tablets - 641px to 1024px)
   ============================================================================ */

@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --spacing-lg: 14px;
    --spacing-xl: 20px;
  }

  body {
    padding-top: 75px;
  }

  .floating-navbar {
    top: 10px;
    left: 10px;
    right: 10px;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .navbar-brand {
    font-size: 1rem;
  }

  .current-date {
    display: flex;
    font-size: 0.9rem;
  }

  .date-text {
    display: inline;
    margin-left: var(--spacing-xs);
  }

  .icon-btn {
    font-size: 0.95rem;
  }

  .btn-text {
    display: none;
  }

  /* Main Content */
  .main-content {
    padding: var(--spacing-lg);
  }

  .container {
    padding: 0 var(--spacing-md);
  }

  /* Cards */
  .card-section {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }

  .section-title {
    font-size: 1.2rem;
  }

  /* Forms */
  .form-label {
    font-size: 0.95rem;
  }

  .form-input,
  .form-select {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  /* Buttons */
  .btn {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 0.95rem;
  }

  .btn-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  /* Grid Layout */
  .grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }

  /* Table */
  .data-table {
    font-size: 0.9rem;
  }

  .data-table th,
  .data-table td {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  /* Calendar */
  .calendar-legend {
    gap: var(--spacing-lg);
    font-size: 0.9rem;
  }

  .calendar-grid {
    gap: var(--spacing-sm);
  }

  /* Footer */
  .site-footer {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  /* Visibility */
  .hide-tablet {
    display: none !important;
  }
}

/* ============================================================================
   LARGE SCREENS (Desktop - min-width: 1025px)
   ============================================================================ */

@media (min-width: 1025px) {
  .floating-navbar {
    top: 12px;
    left: 12px;
    right: 12px;
  }

  .current-date {
    display: flex;
  }

  .date-text {
    display: inline;
  }

  .icon-btn {
    display: inline-flex;
  }

  .btn-text {
    display: inline;
  }

  .btn-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
  }

  .grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }

  .section-title {
    font-size: 1.3rem;
  }

  /* Visibility */
  .hide-desktop {
    display: none !important;
  }
}

/* ============================================================================
   EXTRA LARGE SCREENS (min-width: 1440px)
   ============================================================================ */

@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }

  .card-section {
    padding: var(--spacing-2xl);
  }

  .grid-2col {
    gap: var(--spacing-2xl);
  }
}

/* ============================================================================
   ORIENTATION SPECIFIC
   ============================================================================ */

@media (orientation: landscape) and (max-height: 600px) {
  body {
    padding-top: 65px;
  }

  .floating-navbar {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .main-content {
    padding: var(--spacing-md);
  }

  .card-section {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
  }
}

/* ============================================================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================================================ */

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

/* ============================================================================
   HIGH DPI DISPLAYS
   ============================================================================ */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* Adjust subtle shadows for better visibility on high DPI */
  .card-section {
    box-shadow: var(--shadow-sm);
  }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  .floating-navbar,
  .site-footer,
  .btn-icon,
  .theme-switch {
    display: none !important;
  }

  body {
    padding-top: 0;
  }

  .main-content {
    padding: 0;
  }

  .card-section {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid var(--border-color);
  }
}