/**
 * Media queries y estilos responsivos
 */

/* ========================================
   Tablet (768px - 1024px)
   ======================================== */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 240px;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* ========================================
   Tablet Portrait / Large Phone
   ======================================== */
@media (max-width: 768px) {
    :root {
        --font-size-base: 15px;
        --header-height: 56px;
    }

    /* Header */
    .site-title {
        font-size: var(--font-size-base);
    }

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

    /* Sidebar navigation */
    .sidebar-nav {
        transform: translateX(-100%);
        width: 280px;
    }

    .sidebar-nav.open {
        transform: translateX(0);
    }

    .nav-overlay {
        display: block;
    }

    .sidebar-nav.open .nav-overlay {
        opacity: 1;
        z-index: -1;
    }

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

    .main-footer {
        margin-left: 0;
    }

    /* Grids */
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Typography */
    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-xl); }
    h3 { font-size: var(--font-size-lg); }

    /* Hero */
    .hero {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .hero h1 {
        font-size: var(--font-size-2xl);
    }

    /* Tables */
    .table th,
    .table td {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    /* Cards */
    .card-body {
        padding: var(--spacing-md);
    }

    /* Simulator specific */
    .simulator-container {
        grid-template-columns: 1fr;
    }

    .simulator-controls {
        position: static;
        order: 1;
    }

    .simulator-output {
        order: 2;
    }

    .chart-wrapper {
        height: 300px;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* EOQ */
    .eoq-result {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .eoq-result-item .value {
        font-size: var(--font-size-2xl);
    }
}

/* ========================================
   Phone (< 480px)
   ======================================== */
@media (max-width: 480px) {
    :root {
        --font-size-base: 14px;
        --spacing-lg: 1rem;
        --spacing-xl: 1.5rem;
    }

    /* Header */
    .logo {
        height: 32px;
    }

    .site-title {
        font-size: var(--font-size-sm);
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Content */
    .content-wrapper {
        padding: 0;
    }

    /* Cards */
    .card-grid {
        grid-template-columns: 1fr;
    }

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

    .card-header h3 {
        font-size: var(--font-size-base);
    }

    /* Tables */
    .table-responsive {
        margin: 0 calc(-1 * var(--spacing-md));
    }

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

    /* Metrics */
    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }

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

    .metric-value {
        font-size: var(--font-size-xl);
    }

    /* Sliders */
    .slider-group label {
        font-size: var(--font-size-sm);
    }

    /* Buttons */
    .control-buttons {
        flex-direction: column;
    }

    .btn-simulate,
    .btn-reset {
        width: 100%;
    }

    /* Bullwhip */
    .supply-chain {
        padding: var(--spacing-md);
    }

    .chain-node-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .chain-node-name {
        font-size: var(--font-size-sm);
    }

    .amplification-display {
        grid-template-columns: 1fr 1fr;
    }

    /* Breadcrumbs */
    .breadcrumbs ol {
        font-size: 12px;
    }

    /* Alerts */
    .alert {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .alert i {
        font-size: var(--font-size-base);
    }

    /* Principle cards */
    .principle-number {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-base);
    }

    /* Footer */
    .footer-content p {
        font-size: 12px;
    }
}

/* ========================================
   Print styles
   ======================================== */
@media print {
    .main-header,
    .sidebar-nav,
    .main-footer,
    .mobile-menu-toggle,
    .control-buttons,
    .slider-group {
        display: none !important;
    }

    .main-content {
        margin: 0;
        padding: 0;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .chart-wrapper {
        height: auto;
    }

    a {
        color: var(--color-dark);
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: var(--color-gray);
    }
}

/* ========================================
   Landscape phone
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: var(--spacing-lg);
    }

    .chart-wrapper {
        height: 250px;
    }

    .supply-chain {
        flex-direction: row;
    }

    .chain-arrow {
        transform: none;
    }
}

/* ========================================
   High resolution screens
   ======================================== */
@media (min-width: 1400px) {
    :root {
        --content-max-width: 1400px;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

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

    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   Dark mode support (optional)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    :root {
        --color-light: #1a1a2e;
        --color-white: #16213e;
        --color-dark: #e0e0e0;
        --color-gray: #a0a0a0;
    }

    body {
        background-color: #0f0f23;
    }

    .card,
    .simulator-controls,
    .chart-container {
        background: #16213e;
    }

    .table th {
        background: var(--color-primary-dark);
    }
    */
}

/* ========================================
   Touch device improvements
   ======================================== */
@media (hover: none) {
    /* Hover effects are automatically disabled on touch devices */

    .tooltip-trigger::after {
        display: none;
    }

    /* Larger touch targets */
    .nav-link,
    .submenu-link {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .btn {
        min-height: 44px;
    }
}