/* Mobile First Responsive Design
 *
 * Target viewport breakpoints: 640px, 768px, 1024px, and 1280px.
 * Migrate one layout family at a time and verify each change with the
 * responsive overflow tests. Existing queries remain until their family is
 * migrated so this scale does not silently change established layouts.
 */

/* Global touch improvements */
@media (pointer: coarse) {
  /* Improve touch targets for coarse pointers (fingers) */
  .btn, .form-input, .form-select, .form-textarea {
    min-height: 44px;
  }

  /* Prevent text selection during touch interactions */
  .draggable, [draggable="true"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
  }

  /* Better touch feedback */
  .btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 768px) {
  :root {
    --header-height: 5.5rem;
    --sidebar-width: 100%;
    --footer-height: 4.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
  }

  .app {
    grid-template-rows: var(--header-height) 1fr auto;
  }

  /* Header adjustments - Simplified layout for mobile */
  .header {
    grid-template-columns: 1fr auto;
    grid-template-areas: "left right";
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-sm);
    min-height: var(--header-height);
    align-items: center;
  }

  .header-left {
    justify-self: start;
    gap: var(--spacing-sm);
  }

  .header-center {
    display: none; /* Hide center area since config selector moved to sidebar */
  }

  .header-right {
    justify-self: end;
    gap: var(--spacing-sm);
  }

  /* Hide app title on mobile to save space */
  .app-title {
    display: none;
  }

  /* Adjust logo size for mobile */
  .logo {
    width: 1.8rem;
    height: 1.8rem;
  }

  /* Config selector styles in sidebar for mobile */
  .sidebar-config-selector .config-selector {
    flex-direction: row;
    gap: var(--spacing-sm);
    align-items: center;
  }

  .sidebar-config-selector .config-select {
    flex: 1;
  }

  .sidebar-config-selector #new-config-btn {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    flex-shrink: 0;
  }

  .sidebar-config-selector #new-config-btn .icon {
    width: 1rem;
    height: 1rem;
  }

  .header-actions {
    gap: var(--spacing-xs);
  }


  /* Main content - stack sidebar and content */
  .main-content {
    display: block;
    padding-bottom: var(--footer-height); /* Add padding to account for sticky footer */
    overflow: visible;
  }

  .sidebar {
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0 !important;
    right: 0;
    bottom: var(--footer-height) !important;
    width: 100% !important;
    z-index: var(--z-fixed);
    transform: translateX(-100%) !important;
    transition: transform var(--transition-normal) !important;
    background-color: var(--sidebar-bg);
    border-right: none !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
  }

  .sidebar.show,
  .sidebar.open {
    transform: translateX(0) !important;
  }

  /* Override collapsed state in mobile - always show text when sidebar is open */
  .sidebar.show .nav-text,
  .sidebar.show .nav-title,
  .sidebar.show .validation-indicator {
    opacity: 1 !important;
    width: auto !important;
    margin-left: 0 !important;
    pointer-events: auto !important;
  }

  .sidebar.show .app-title,
  .sidebar.show .sidebar-header h3,
  .sidebar.show .sidebar-config-selector {
    display: block !important;
  }

  /* Mobile sidebar overlay */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-fixed) - 1);
    opacity: 0;
    transition: opacity var(--transition-normal);
  }

  .sidebar.show ~ .sidebar-overlay,
  .sidebar.open ~ .sidebar-overlay {
    display: block;
    opacity: 1;
  }

  .content {
    margin-left: 0 !important;
    width: 100%;
  }

  .sidebar-header {
    padding: var(--spacing-md);
  }

  .nav-link {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
  }

  /* Content adjustments */
  .content-header {
    padding: var(--spacing-md);
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }

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

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

  /* Footer adjustments */
  .footer {
    flex-direction: column;
    height: auto;
    justify-content: center;
    padding: var(--spacing-sm) 0;
    min-height: var(--footer-height);
    position: sticky;
    bottom: 0;
    width: 100%;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    justify-content: center;
  }

  .command-panel {
    /* Revert to default flex-direction (row) */
    align-items: center;
    gap: var(--spacing-sm);
  }

  .version-info {
    display: none;
  }

  /* YAML Preview - full screen on mobile */
  .yaml-preview {
    top: var(--header-height);
    right: 0;
    bottom: var(--footer-height);
    width: 100%;
    left: 0;
  }



  /* Modal adjustments */
  .modal-overlay {
    z-index: var(--z-modal-backdrop);
    padding: var(--spacing-sm);
  }

  .modal {
    width: 95%;
    max-width: none;
    max-height: 85vh;
    margin: auto;
    min-width: 0 !important; /* Override any component-specific min-width */
  }

  .modal-header,
  .modal-content,
  .modal-footer {
    padding: var(--spacing-md);
  }

  /* Ensure modal content is scrollable on small screens */
  .modal-content {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Specific adjustments for share limits modal on mobile */
  .share-limit-modal .modal {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Toast adjustments */
  .toast-container {
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    left: var(--spacing-sm);
    top: auto;
  }

  .toast {
    min-width: auto;
    max-width: none;
  }

  /* Button adjustments */
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .btn.btn-close-icon {
      min-height: auto;
      padding: 2px;
  }

  .btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

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

  .form-input,
  .form-select,
  .form-textarea {
    padding: var(--spacing-sm);
    font-size: var(--font-size-base);
  }

  /* Card adjustments */
  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-md);
  }

  .quick-actions-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .dry-run-toggle {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  :root {
    --sidebar-width: 14rem;
    --spacing-lg: 1.25rem;
  }

  .header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "left center right";
    padding: 0 var(--spacing-lg);
    gap: var(--spacing-md);
  }

  .header-left {
    justify-self: start;
  }

  .header-center {
    display: none; /* Hide center area since config selector moved to sidebar */
  }

  .header-right {
    justify-self: end;
  }

  .app-title {
    display: block;
    font-size: var(--font-size-lg);
  }

  .logo {
    width: 2rem;
    height: 2rem;
  }

  /* Config selector in sidebar for tablets */
  .sidebar-config-selector .config-selector {
    flex-direction: row;
    gap: var(--spacing-sm);
    align-items: center;
  }



  .main-content {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: var(--header-height);
    bottom: var(--footer-height);
    left: 0;
    width: var(--sidebar-width);
    transform: none;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    box-shadow: none;
    z-index: var(--z-fixed);
  }

  .content {
    margin-left: var(--sidebar-width);
    width: auto;
  }

  .sidebar-overlay {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: none;
  }

  .content-header {
    flex-direction: row;
    align-items: center;
  }

  .footer {
    flex-direction: row;
    height: var(--footer-height);
  }

  .footer-left,
  .footer-center,
  .footer-right {
    justify-content: flex-start;
  }

  .command-panel {
    flex-direction: row;
  }

  .version-info {
    display: block;
  }

  .yaml-preview {
    width: 60%;
  }

  .mobile-menu-toggle {
    display: none;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --sidebar-width: 15rem;
  }

  .yaml-preview {
    width: 50%;
  }

  .toast {
    min-width: 18rem;
    max-width: 22rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 992px) {
  :root {
    --sidebar-width: 16rem;
  }

  .header-center {
    max-width: 40rem;
  }

  .yaml-preview {
    width: 45%;
  }

  .modal {
    max-width: 40rem;
  }
}

/* Ultra wide screens */
@media (min-width: 1400px) {
  :root {
    --sidebar-width: 18rem;
    --spacing-xl: 2.5rem;
    --spacing-2xl: 4rem;
  }

  .header-center {
    max-width: 48rem;
  }

  .content-header {
    padding: var(--spacing-xl);
  }

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

  .yaml-preview {
    width: 40%;
  }

  .modal {
    max-width: 48rem;
  }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --header-height: 3rem;
    --footer-height: 3rem;
  }

  .sidebar-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .nav-link {
    padding: var(--spacing-xs) var(--spacing-md);
  }

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

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


}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .btn {
    min-height: 2.75rem;
    padding: var(--spacing-sm) var(--spacing-lg);
  }

  .btn-icon {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .nav-link {
    min-height: 3rem;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .form-input,
  .form-select,
  .form-textarea {
    min-height: 2.75rem;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem; /* Prevent zoom on iOS */
  }

  .checkbox-label {
    min-height: 2.75rem;
    padding: var(--spacing-sm) 0;
  }

  .checkmark {
    width: 1.25rem;
    height: 1.25rem;
  }

  .toggle {
    width: 3.5rem;
    height: 2rem;
  }

  .toggle-slider:before {
    height: 1.25rem;
    width: 1.25rem;
  }

  .toggle input:checked + .toggle-slider:before {
    transform: translateX(1.75rem);
  }

  /* Remove hover effects on touch devices */
  .btn:hover,
  .nav-link:hover,
  .dropdown-item:hover,
  .accordion-header:hover {
    background-color: initial;
    color: initial;
    border-color: initial;
  }

  /* Add active states for touch feedback */
  .btn:active {
    transform: scale(0.98);
  }

  .nav-link:active {
    background-color: var(--bg-accent);
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  .icon {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Reduced data mode */
@media (prefers-reduced-data: reduce) {
  /* Disable animations and transitions to save bandwidth */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Remove background images and gradients */
  .skeleton {
    background: var(--bg-accent);
  }
}

/* Print optimizations */
@media print {
  .app {
    grid-template-rows: auto 1fr auto;
  }

  .header {
    border-bottom: 2px solid #000;
    background: #fff !important;
    color: #000 !important;
  }

  .main-content {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .content-header {
    border-bottom: 1px solid #000;
  }

  .footer {
    border-top: 2px solid #000;
    background: #fff !important;
    color: #000 !important;
  }

  .btn {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
  }

  .form-input,
  .form-select,
  .form-textarea {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
  }

  /* Hide interactive elements */
  .yaml-preview,
  .modal-overlay,
  .toast-container,
  .dropdown-menu {
    display: none !important;
  }

  /* Expand collapsed content */
  .accordion-content {
    max-height: none !important;
  }

  .tab-pane {
    display: block !important;
  }

  /* Page breaks */
  .card {
    break-inside: avoid;
  }

  .form-group {
    break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    break-after: avoid;
  }
}

/* Accessibility improvements for small screens */
@media (max-width: 767.98px) {
  /* Ensure focus indicators are visible */
  *:focus {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
  }

  /* Improve text readability */
  body {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Ensure adequate spacing for touch targets */
  .nav-item + .nav-item {
    margin-top: 1px;
  }

  /* Make dropdowns full width on mobile */
  .dropdown-menu {
    left: 0;
    right: 0;
    width: auto;
    min-width: auto;
  }

  /* Stack form elements vertically */
  .input-group {
    flex-direction: column;
  }

  .input-group .form-input,
  .input-group .btn {
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    margin-bottom: 1px;
  }

  .input-group .form-input:last-child,
  .input-group .btn:last-child {
    margin-bottom: 0;
  }
}

/* Container queries for component-level responsiveness */
@supports (container-type: inline-size) {
  .card {
    container-type: inline-size;
  }

  @container (max-width: 300px) {
    .card-header {
      padding: var(--spacing-sm);
    }

    .card-body {
      padding: var(--spacing-sm);
    }

    .card-footer {
      padding: var(--spacing-sm);
    }
  }

  .form-group {
    container-type: inline-size;
  }

  @container (max-width: 250px) {
    .input-group {
      flex-direction: column;
    }

    .input-group .form-input,
    .input-group .btn {
      border-radius: var(--border-radius);
      border: 1px solid var(--border-color);
    }
  }
}

/* Mobile menu overlay */
@media (max-width: 768px) {
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-fixed) - 1);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
  }

  .sidebar.show + .sidebar-overlay,
  .sidebar.show ~ .sidebar-overlay,
  .sidebar.open + .sidebar-overlay,
  .sidebar.open ~ .sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }

  /* Mobile-specific utility classes */
  .mobile-hidden {
    display: none !important;
  }

  .mobile-visible {
    display: block !important;
  }

  .mobile-flex {
    display: flex !important;
  }

  .mobile-grid {
    display: grid !important;
  }
}

/* Tablet-specific utility classes */
@media (min-width: 576px) and (max-width: 991.98px) {
  .tablet-hidden {
    display: none !important;
  }

  .tablet-visible {
    display: block !important;
  }

  .tablet-flex {
    display: flex !important;
  }

  .tablet-grid {
    display: grid !important;
  }
}

/* Desktop-specific utility classes */
@media (min-width: 992px) {
  .desktop-hidden {
    display: none !important;
  }

  .desktop-visible {
    display: block !important;
  }

  .desktop-flex {
    display: flex !important;
  }

  .desktop-grid {
    display: grid !important;
  }
}

/* ==========================================================================
   Small-screen refinements (#1023 "Mobile friendly UI")
   Fills gaps below ~600px that the main 768px breakpoint didn't cover:
   - the 480-600px range, dropdown/select overflow, stacked category rows,
     and short/landscape viewport heights for tall drawers.
   ========================================================================== */

/* Compact phones in portrait (<= 600px) */
@media (max-width: 600px) {
  /* Header config selector was 12rem min-width; let it shrink */
  .config-select {
    min-width: 0;
  }

  /* Dropdown menus: never run off-screen, cap to viewport */
  .dropdown-menu {
    min-width: 0;
    max-width: calc(100vw - var(--spacing-md) * 2);
    overflow-x: auto;
  }

  .dropdown-menu .dropdown-item {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* A right-aligned dropdown near the edge can still overflow; clamp it */
  .dropdown-menu.right {
    right: 0;
    left: auto;
  }
}

/* Very small phones (<= 480px) */
@media (max-width: 480px) {
  /* Category name/path inputs sit side-by-side; stack them */
  .category-inputs .category-inputs-row {
    flex-direction: column;
  }

  .category-name-group,
  .category-path-group {
    min-width: 0;
    width: 100%;
  }
}

/* Short viewports (landscape phones, small tablets) — keep tall drawers/
   panels from eating the whole screen. */
@media (max-height: 600px) {
  .command-panel-drawer {
    height: 60vh;
    max-height: 60vh;
  }

  .accordion-item.active .accordion-content {
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* Touch devices: guarantee 44px tap targets on the small icon buttons that
   the generic touch rules don't already cover. */
@media (hover: none) and (pointer: coarse) {
  .remove-array-item,
  .remove-category-btn,
  .remove-complex-object-item,
  .remove-share-limit-group {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Header fit (#1023): the header is a grid whose cells default to
   min-width:auto, so a crowded action row can't shrink and stretches the
   whole .app column past the viewport (horizontal page scroll). Let the
   cells shrink, and scroll the action row internally on very narrow phones
   instead of breaking the page width. */
@media (max-width: 768px) {
  .header-left,
  .header-right {
    min-width: 0;
  }

  .header-actions {
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
  }

  .header-actions::-webkit-scrollbar {
    display: none; /* WebKit/Blink */
  }
}

/* iOS auto-zoom (#1023): Safari zooms the viewport when a focused input has a
   font-size < 16px. Our inputs use --font-size-sm (14px), so focusing any
   field on iPhone zooms the page. Force >= 16px for form controls on small
   screens to prevent the zoom while keeping the compact size on desktop. */
@media (max-width: 768px) {
  .form-input,
  .form-select,
  .form-textarea,
  .config-select,
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Preview YAML action (#1023): on desktop it's position:fixed top-right, which
   overlaps long section titles (e.g. "qBittorrent Connection") once they wrap
   on narrow screens. Put it back in the document flow on small screens so it
   stacks above the section instead of floating over the title. */
@media (max-width: 768px) {
  .main-content > .content-actions {
    position: static;
    justify-content: flex-end;
    padding: var(--spacing-md) var(--spacing-md) 0;
  }
}

/* Bottom-sheet modals on phones (#1023): centered dialogs are awkward to reach
   on mobile. Anchor modals to the bottom edge, full-width, and slide them up
   (thumb-friendly — NN/g & Material bottom-sheet pattern). Scoped to exclude
   the share-limits modal, which has its own flex layout + slide animation. */
@media (max-width: 768px) {
  .modal-overlay:not(.share-limit-modal) {
    align-items: flex-end;
    padding: 0;
  }

  .modal-overlay:not(.share-limit-modal) .modal {
    width: 100%;
    max-width: none;
    max-height: 90vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    transform: translateY(100%); /* slide up instead of scale */
  }

  .modal-overlay:not(.share-limit-modal):not(.hidden) .modal {
    transform: translateY(0);
  }

  /* Grab-handle affordance at the top of the sheet */
  .modal-overlay:not(.share-limit-modal) .modal-header {
    position: relative;
  }

  .modal-overlay:not(.share-limit-modal) .modal-header::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.25rem;
    height: 0.25rem;
    border-radius: 999px;
    background-color: var(--border-color);
  }

  /* Content fills the sheet and scrolls; header + footer stay pinned */
  .modal-overlay:not(.share-limit-modal) .modal-content {
    flex: 1 1 auto;
    max-height: none;
  }
}

/* Respect reduced-motion: no slide transition */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .modal-overlay:not(.share-limit-modal) .modal {
    transition: none;
  }
}

/* Fluid heading typography on phones/tablets (#1023): scale the large heading
   sizes down smoothly on smaller viewports instead of holding the full desktop
   size. Each clamp() reaches its max (the existing desktop value) at ~768px, so
   the >768px desktop scale is unchanged and the breakpoint is seamless. Body
   text (base/sm/xs) is intentionally left fixed so inputs stay >= 16px. */
@media (max-width: 768px) {
  :root {
    --font-size-xl: clamp(1.125rem, 0.95rem + 0.9vw, 1.25rem);
    --font-size-2xl: clamp(1.25rem, 0.9rem + 1.6vw, 1.5rem);
    --font-size-3xl: clamp(1.4rem, 0.9rem + 2.5vw, 1.875rem);
  }

  /* The section heading (h2.section-title) has no explicit size — it falls back
     to the browser default (1.5em = 24px). Give it the same fluid scale so the
     most prominent heading shrinks gracefully on phones (max stays 24px, so the
     desktop/breakpoint size is unchanged). */
  .section-title {
    font-size: clamp(1.25rem, 0.9rem + 1.6vw, 1.5rem);
  }
}