/**
 * Responsive Styles for Interactive Org Chart
 * Mobile-first approach with progressive enhancement
 */

/* Mobile First - Base styles for mobile devices */
@media (max-width: 768px) {
    /* Header adjustments */
    .header-container {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    .header-brand {
        text-align: center;
    }
    
    .header-title {
        font-size: var(--font-size-xl);
    }
    
    .department-selector {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }
    
    .department-select {
        min-width: unset;
        width: 100%;
    }
    

    
    .control-group {
        justify-content: space-between;
        width: 100%;
    }
    
    /* Main layout - stack vertically on mobile */
    .main {
        flex-direction: column;
        padding: var(--spacing-md);
        gap: var(--spacing-md);
        min-height: calc(100vh - 160px);
    }
    
    /* Sidebar becomes full width */
    .sidebar {
        width: 100%;
        order: 2; /* Move sidebar below chart on mobile */
        max-height: none;
        padding: var(--spacing-md);
    }
    
    /* Chart container adjustments */
    .chart-container {
        order: 1;
        min-height: 400px;
        padding: var(--spacing-md);
    }
    
    .chart-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }
    
    .chart-title {
        text-align: center;
        font-size: var(--font-size-lg);
    }
    
    .chart-controls {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    
    .chart-controls .btn {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    /* SVG adjustments for mobile */
    .org-chart-svg {
        min-height: 350px;
        touch-action: manipulation;
    }
    
    /* Modal adjustments */
    .modal {
        padding: var(--spacing-md);
    }
    
    .modal-content {
        max-width: 100%;
        width: 100%;
        max-height: 95vh;
    }
    
    .modal-header,
    .modal-body {
        padding: var(--spacing-md);
    }
    
    /* Filter sections - collapsed by default on mobile */
    .filters-section .section-title {
        cursor: pointer;
        position: relative;
    }
    
    .filters-section .section-title::after {
        content: '\f107';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 0;
        transition: transform var(--transition-fast);
    }
    
    .filters-section.collapsed .section-title::after {
        transform: rotate(-90deg);
    }
    
    .filters-section .section-content {
        display: block;
    }
    
    .filters-section.collapsed .section-content {
        display: none;
    }
    
    /* Search input larger touch target */
    .search-input {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
    }
    
    /* Filter categories stack on mobile */
    .filter-categories {
        gap: var(--spacing-md);
    }
    
    /* Person detail adjustments */
    .person-details {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .detail-section {
        padding: var(--spacing-sm);
    }
    
    /* Buttons stack on mobile */
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .department-selector .btn {
        width: 100%;
    }
    
    /* Help button positioning */
    .help-btn {
        bottom: var(--spacing-md);
        right: var(--spacing-md);
        width: 44px;
        height: 44px;
    }
    
    /* Org chart nodes - larger for touch */
    .org-node {
        cursor: default;
    }
    
    .node-rect {
        rx: 6;
        ry: 6;
    }
    
    .node-expand-btn {
        r: 14;
    }
    
    /* Hide complex interactions on mobile */
    .tooltip {
        display: none;
    }
}

/* Small tablets and large phones */
@media (min-width: 481px) and (max-width: 768px) {
    .header-container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .department-selector {
        flex-direction: row;
        flex: 1;
    }
    

    
    .chart-header {
        flex-direction: row;
        align-items: center;
    }
    
    .chart-title {
        text-align: left;
    }
    
    /* Two-column layout for person details */
    .person-details {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-container {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .main {
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    .sidebar {
        width: 280px;
        padding: var(--spacing-md);
    }
    
    .chart-container {
        padding: var(--spacing-md);
    }
    
    /* Adjust font sizes for tablets */
    .header-title {
        font-size: var(--font-size-xl);
    }
    
    .section-title {
        font-size: var(--font-size-base);
    }
    
    /* Three-column layout for person details */
    .person-details {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Org chart nodes medium size */
    .node-text {
        font-size: 11px;
    }
    
    .node-name {
        font-size: 12px;
    }
}

/* Desktop and larger */
@media (min-width: 1025px) {
    /* Full layout capabilities */
    .main {
        max-width: 1800px;
        margin: 0 auto;
    }
    
    /* Sidebar with comfortable sizing */
    .sidebar {
        width: 320px;
    }
    
    /* Multi-column person details */
    .person-details {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Enable hover effects */
    .org-node:hover .node-rect {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }
    
    /* Show tooltips on desktop */
    .tooltip {
        display: block;
    }
    
    /* Larger org chart nodes */
    .node-text {
        font-size: 12px;
    }
    
    .node-name {
        fill: black;
        font-size: 14px;
    }
    
    /* Multiple columns for filter options when space allows */
    .filter-options {
        columns: 1;
    }
}

/* Large desktops */
@media (min-width: 1440px) {
    .main {
        gap: var(--spacing-xl);
        padding: var(--spacing-xl);
    }
    
    .sidebar {
        width: 360px;
        padding: var(--spacing-xl);
    }
    
    .chart-container {
        padding: var(--spacing-xl);
    }
    
    /* Three-column person details on large screens */
    .person-details {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    /* Larger modal on big screens */
    .modal-content {
        max-width: 800px;
    }
    
    /* Two columns for filter options when there's space */
    .filter-options {
        columns: 2;
        column-gap: var(--spacing-md);
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .main {
        max-width: 2000px;
    }
    
    .sidebar {
        width: 400px;
    }
    
    /* Four-column person details */
    .person-details {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Larger font sizes for ultra-wide */
    .node-text {
        font-size: 13px;
    }
    
    .node-name {
        font-size: 15px;
    }
}

/* High-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders and shadows for retina displays */
    .node-rect {
        stroke-width: 0.5;
    }
    
    .org-link {
        stroke-width: 1.5;
    }
    
    /* Crisper text rendering */
    .node-text {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .main {
        flex-direction: row;
        min-height: calc(100vh - 120px);
    }
    
    .sidebar {
        width: 300px;
        order: 1;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }
    
    .chart-container {
        order: 2;
        flex: 1;
        min-height: auto;
    }
    
    .org-chart-svg {
        min-height: 300px;
    }
}

/* Print-specific responsive adjustments */
@media print {
    @page {
        margin: 0.5in;
        size: landscape;
    }
    
    .main {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }
    
    .chart-container {
        width: 100%;
        height: auto;
        min-height: 7in;
        box-shadow: none;
        border: 1px solid #000;
        page-break-inside: avoid;
    }
    
    .org-chart-svg {
        max-height: 7in;
        width: 100%;
    }
    
    /* Ensure nodes are visible in print */
    .node-rect {
        fill: #fff !important;
        stroke: #000 !important;
        stroke-width: 1 !important;
    }
    
    .node-text {
        fill: #000 !important;
        font-size: 10px !important;
    }
    
    .org-link {
        stroke: #000 !important;
        stroke-width: 1 !important;
    }
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    
    .loading-spinner {
        animation: none;
    }
    
    /* Static loading indicator for reduced motion */
    .loading-spinner::after {
        content: 'Cargando...';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #0000ff;
        --color-bg-primary: #ffffff;
        --color-text-primary: #000000;
        --color-border-medium: #000000;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-xl: none;
    }
    
    .node-rect {
        stroke-width: 2 !important;
        stroke: #000000 !important;
    }
    
    .org-link {
        stroke: #000000 !important;
        stroke-width: 2 !important;
    }
    
    .btn {
        border-width: 2px !important;
    }
}

/* Focus visible enhancements for keyboard navigation */
@supports selector(:focus-visible) {
    .org-node:focus-visible .node-rect {
        stroke: var(--color-primary) !important;
        stroke-width: 3 !important;
        stroke-dasharray: 5 5 !important;
        animation: pulse 1s ease-in-out infinite;
    }
    
    .filter-option:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
    
    .search-result-item:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }
}

/* Container queries support for modern browsers */
@supports (container-type: inline-size) {
    .sidebar {
        container-type: inline-size;
        container-name: sidebar;
    }
    
    @container sidebar (max-width: 280px) {
        .filter-categories {
            gap: var(--spacing-sm);
        }
        
        .filter-category-content {
            padding: var(--spacing-sm);
        }
        
        .section-title {
            font-size: var(--font-size-sm);
        }
    }
    
    .chart-container {
        container-type: inline-size;
        container-name: chart;
    }
    
    @container chart (max-width: 600px) {
        .chart-header {
            flex-direction: column;
            gap: var(--spacing-sm);
        }
        
        .chart-controls {
            justify-content: center;
        }
        
        .org-chart-svg {
            min-height: 300px;
        }
    }
}

/* Flexible grid for statistics on different screen sizes */
.stats-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 380px) {
    .stats-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .stats-container {
        grid-template-columns: 1fr;
    }
}

/* Ensure touch targets are at least 44px on mobile */
@media (max-width: 768px) {
    .btn,
    .search-clear-btn,
    .modal-close,
    .filter-chip-remove,
    input[type="checkbox"],
    select,
    .search-input {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Exception for inline elements that don't need full 44px width */
    input[type="checkbox"] {
        min-width: 20px;
    }
}