/*
 * Responsive Design
 * Mobile and tablet adaptations for the visibility manager
 * All styles scoped to .pf2e-visioner to avoid conflicts
 */

.pf2e-visioner {
  /* Tablet and Mobile Breakpoints */
  @media (max-width: 700px) {
    .observer-info {
      flex-direction: column;
      text-align: center;
      gap: var(--spacing-md);
      padding: var(--spacing-lg);
      align-items: center;
    }

    .observer-image {
      width: 60px !important;
      height: 60px !important;
      min-width: 60px !important;
      min-height: 60px !important;
      max-width: 60px !important;
      max-height: 60px !important;
    }

    .observer-top-row {
      flex-direction: column;
      align-items: center;
      gap: var(--spacing-md);
    }

    .observer-header {
      flex-direction: column;
      gap: var(--spacing-sm);
      text-align: center;
    }

    .mode-toggle-container {
      justify-content: center;
    }

    .mode-toggle {
      min-width: 120px;
      height: 28px;
    }

    .bulk-actions {
      align-items: center;
      text-align: center;
      width: 100%;
    }

    .bulk-buttons {
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-sm);
      min-width: 280px;
      max-width: 100%;
    }

    .bulk-state {
      padding: var(--spacing-sm) var(--spacing-md);
      font-size: 12px;
      border: 2px solid var(--color-border-light-primary) !important;
    }

    .table-section-header {
      font-size: 12px;
      padding: var(--spacing-xs) 10px;
      gap: var(--spacing-xs);
      flex-wrap: wrap;
    }

    .table-section-header i {
      font-size: 14px;
    }

    .table-section-header .count {
      font-size: 10px;
      padding: 1px 4px;
    }

    .visibility-table-container {
      max-height: 250px;
      border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

    .visibility-table th,
    .visibility-table td {
      padding: var(--spacing-xs) var(--spacing-xs);
      font-size: 12px;
    }

    .token-image {
      width: 40px;
      text-align: center;
      vertical-align: middle;
    }

    .token-image img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      object-position: top;
      display: block;
      margin: 0 auto;
    }

    .token-name {
      min-width: 80px;
    }

    .token-name .actor-type,
    .token-name .disposition {
      display: none; /* Hide on mobile to save space */
    }

    .current-state,
    .new-state {
      min-width: 80px;
    }

    .mechanical-effects {
      min-width: 100px;
      font-size: 0.8em;
    }

    .effect-details {
      gap: 1px;
    }

    .flat-check,
    .concealed-effect,
    .undetected-effect,
    .no-effect {
      padding: 1px 4px;
      font-size: 10px;
      gap: 2px;
    }

    .state-badge {
      font-size: 10px !important;
      padding: 1px 4px !important;
    }

    .sheet-footer {
      gap: var(--spacing-sm);
      flex-wrap: wrap;
      justify-content: center;
    }

    .vm-action-button {
      padding: var(--spacing-xs) var(--spacing-md);
      font-size: 12px;
      min-width: 80px;
    }

    .vm-action-button i {
      font-size: 12px;
    }

    /* Simplify select dropdowns on mobile */
    .visibility-table select {
      font-size: 12px !important;
      padding: 2px 4px !important;
      min-width: 80px !important;
    }

    /* Hide some columns on very small screens */
    .visibility-table .mechanical-effects {
      display: none;
    }
  }

  /* Very small mobile devices */
  @media (max-width: 480px) {
    .observer-info {
      padding: var(--spacing-md);
      gap: var(--spacing-sm);
    }

    .observer-image {
      width: 50px !important;
      height: 50px !important;
      min-width: 50px !important;
      min-height: 50px !important;
      max-width: 50px !important;
      max-height: 50px !important;
    }

    .observer-details h3 {
      font-size: 14px;
    }

    .observer-details .hint {
      font-size: 11px;
    }

    .mode-toggle {
      min-width: 100px;
      height: 24px;
      font-size: 10px;
    }

    .toggle-option {
      padding: 3px 6px;
      height: 18px;
    }

    .toggle-option span {
      font-size: 10px;
    }

    .bulk-buttons {
      grid-template-columns: 1fr;
      min-width: 200px;
    }

    .bulk-state {
      padding: var(--spacing-xs) var(--spacing-sm);
      font-size: 11px;
    }

    .table-section-header {
      font-size: 11px;
      padding: var(--spacing-xs);
    }

    .visibility-table th,
    .visibility-table td {
      padding: var(--spacing-xs) 2px;
      font-size: 11px;
    }

    .token-image {
      width: 30px;
      text-align: center;
      vertical-align: middle;
    }

    .token-image img {
      width: 20px;
      height: 20px;
      object-fit: cover;
      object-position: top;
      display: block;
      margin: 0 auto;
    }

    .token-name {
      min-width: 60px;
    }

    .current-state,
    .new-state {
      min-width: 60px;
    }

    .visibility-table select {
      font-size: 11px !important;
      padding: 1px 2px !important;
      min-width: 60px !important;
    }

    .vm-action-button {
      padding: var(--spacing-xs);
      font-size: 11px;
      min-width: 60px;
    }

    /* Stack footer buttons vertically on very small screens */
    .sheet-footer {
      flex-direction: column;
      align-items: stretch;
    }

    .vm-action-button {
      width: 100%;
      justify-content: center;
    }
  }

  /* Large screen optimizations */
  @media (min-width: 1200px) {
    .observer-image {
      width: 140px !important;
      height: 140px !important;
      min-width: 140px !important;
      min-height: 140px !important;
      max-width: 140px !important;
      max-height: 140px !important;
    }

    .observer-details h3 {
      font-size: 18px;
    }

    .observer-details .hint {
      font-size: 14px;
    }

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

    .token-image {
      width: 60px;
      text-align: center;
      vertical-align: middle;
    }

    .token-image img {
      width: 40px;
      height: 40px;
      object-fit: cover;
      object-position: top;
      display: block;
      margin: 0 auto;
    }

    .token-name {
      min-width: 150px;
    }

    .current-state,
    .new-state {
      min-width: 140px;
    }

    .mechanical-effects {
      min-width: 180px;
    }

    .bulk-buttons {
      min-width: 240px;
    }
  }

  /* Print styles */
  @media print {
    .observer-info {
      border: 1px solid #000;
      background: white;
      color: black;
    }

    .mode-toggle,
    .bulk-actions,
    .sheet-footer {
      display: none;
    }

    .visibility-table {
      border: 1px solid #000;
    }

    .visibility-table th,
    .visibility-table td {
      border: 1px solid #000;
      background: white;
      color: black;
    }

    .token-image img {
      border: 1px solid #000;
      object-fit: cover;
      object-position: top;
      display: block;
      margin: 0 auto;
    }
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .visibility-table select {
      border-width: 2px !important;
    }

    .vm-action-button {
      border-width: 2px;
    }

    .mode-toggle {
      border-width: 3px;
    }

    .observer-image {
      border-width: 4px;
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    * {
      transition: none !important;
      animation: none !important;
    }

    .vm-action-button:hover {
      transform: none;
    }

    .mode-toggle:active {
      transform: none;
    }
  }

  /* 1440p and higher resolution optimizations */
  @media (min-width: 2560px) {
    .observer-name {
      font-size: 16px;
    }

    .observer-main .hint {
      font-size: 13px;
    }

    .mode-toggle {
      font-size: 14px;
      width: 100px;
      height: 22px;
    }

    .toggle-option i {
      font-size: 12px;
    }

    .toggle-option span {
      font-size: 12px;
    }

    .legend-title {
      font-size: 12px;
    }

    .legend-item {
      font-size: 11px;
    }

    .legend-item i {
      font-size: 11px;
    }

    .legend-item span {
      font-size: 11px;
    }
  }
} /* End .pf2e-visioner scope */