/**
 * responsive-engine-override.css
 * ──────────────────────────────────────────────────────────────────
 * Global responsive override for 180+ engine components that use
 * hardcoded inline styles (grid-template-columns, fixed widths,
 * overflow:hidden, etc.).
 *
 * Uses CSS attribute selectors with !important to override inline
 * styles without touching individual component files.
 *
 * Breakpoints (matching design-system.css):
 *   1440px — Wide desktop
 *   1024px — Tablet landscape / small desktop
 *    768px — Tablet portrait / large phone landscape
 *    480px — Phone portrait
 *
 * LyDian COSMION — Production CSS
 */

/* ============================================================
   BASE: Smooth transitions for responsive changes
   ============================================================ */

.content > div,
.content > section {
    transition: none;
}

/* ============================================================
   TABLET LANDSCAPE — ≤1024px
   Two-column grids collapse; right panels shrink
   ============================================================ */

@media (max-width: 1024px) {
    /* Three-column grid → two columns (drop right panel below) */
    div[style*="grid-template-columns:280px 1fr 3"],
    div[style*="grid-template-columns:300px 1fr 3"],
    div[style*="grid-template-columns:310px 1fr"],
    div[style*="grid-template-columns:340px 1fr 3"],
    div[style*="grid-template-columns:260px 1fr 3"],
    div[style*="grid-template-columns:240px 1fr"] {
        grid-template-columns: 240px 1fr !important;
    }

    /* Fixed right panels shrink */
    div[style*="width:320px"],
    div[style*="width:310px"],
    div[style*="width:300px"] {
        width: 240px !important;
        min-width: 200px !important;
    }

    /* Left sidebars shrink */
    div[style*="width:340px"],
    div[style*="min-width:340px"] {
        width: 280px !important;
        min-width: 240px !important;
    }
}

/* ============================================================
   TABLET PORTRAIT — ≤768px
   Everything stacks to single column
   ============================================================ */

@media (max-width: 768px) {
    /* ── Grid Layouts → Single Column ── */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Flex 3-Panel → Column Stack ── */
    div[style*="display:flex"][style*="height:100%"],
    div[style*="display:flex"][style*="height:calc(100vh"] {
        flex-direction: column !important;
    }

    /* ── Fixed Width Panels → Full Width ── */
    div[style*="width:220px"],
    div[style*="width:240px"],
    div[style*="width:250px"],
    div[style*="width:260px"],
    div[style*="width:280px"],
    div[style*="width:300px"],
    div[style*="width:310px"],
    div[style*="width:320px"],
    div[style*="width:340px"],
    div[style*="width:400px"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* ── Min-Width Constraints → Remove ── */
    div[style*="min-width:220px"],
    div[style*="min-width:240px"],
    div[style*="min-width:250px"],
    div[style*="min-width:260px"],
    div[style*="min-width:280px"],
    div[style*="min-width:300px"] {
        min-width: 0 !important;
    }

    /* ── Overflow Hidden → Scrollable ── */
    div[style*="overflow:hidden"] {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Height calc(100vh) → Auto with min ── */
    div[style*="height:calc(100vh"] {
        height: auto !important;
        min-height: calc(100vh - 60px) !important;
        min-height: calc(100dvh - 60px) !important;
    }

    /* ── Fixed Height Panels → Auto ── */
    div[style*="height:240px"],
    div[style*="height:320px"],
    div[style*="height:420px"],
    div[style*="height:600px"] {
        height: auto !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
    }

    /* ── Max-Height on Flex Lists → Larger on Mobile ── */
    div[style*="max-height:180px"],
    div[style*="max-height:200px"],
    div[style*="max-height:220px"] {
        max-height: 300px !important;
    }

    div[style*="max-height:260px"],
    div[style*="max-height:300px"],
    div[style*="max-height:340px"],
    div[style*="max-height:420px"] {
        max-height: 50vh !important;
    }

    /* ── Canvas → Fluid ── */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ── Position Fixed Toasts → Mobile-Friendly ── */
    div[style*="position:fixed"][style*="top:20px"][style*="right:20px"] {
        top: auto !important;
        bottom: 16px !important;
        right: 16px !important;
        left: 16px !important;
        max-width: none !important;
    }

    /* ── Touch Targets ── */
    button,
    a,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    select,
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }

    /* ── Tables → Scrollable ── */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Dialogs → Full Width ── */
    div[style*="max-width:400px"],
    div[style*="max-width:600px"] {
        max-width: calc(100vw - 32px) !important;
        width: calc(100vw - 32px) !important;
    }

    /* ── Gap Reduction ── */
    div[style*="gap:20px"],
    div[style*="gap:24px"] {
        gap: 12px !important;
    }

    /* ── Padding Reduction ── */
    div[style*="padding:20px"],
    div[style*="padding:24px"],
    div[style*="padding:30px"] {
        padding: 12px !important;
    }

    /* ── Font Size Floor ── */
    div[style*="font-size:10px"],
    div[style*="font-size:9px"],
    span[style*="font-size:10px"],
    span[style*="font-size:9px"] {
        font-size: 12px !important;
    }
}

/* ============================================================
   PHONE PORTRAIT — ≤480px
   Maximum compression, touch-first
   ============================================================ */

@media (max-width: 480px) {
    /* ── Further Padding Reduction ── */
    div[style*="padding:12px"],
    div[style*="padding:16px"] {
        padding: 8px !important;
    }

    /* ── Gap Minimum ── */
    div[style*="gap:12px"],
    div[style*="gap:16px"] {
        gap: 8px !important;
    }

    /* ── Max-Height Lists → Shorter ── */
    div[style*="max-height:300px"],
    div[style*="max-height:50vh"] {
        max-height: 40vh !important;
    }

    /* ── Dialogs Full Screen ── */
    div[style*="max-width:400px"],
    div[style*="max-width:600px"],
    div[style*="max-width:calc(100vw"] {
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* ── Border Radius Simplify ── */
    div[style*="border-radius:16px"],
    div[style*="border-radius:12px"] {
        border-radius: 8px !important;
    }
}

/* ============================================================
   SAFE AREA (iOS notch / Android gesture bar)
   ============================================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .content {
            padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
        }

        div[style*="position:fixed"][style*="bottom:"] {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
    }
}

/* ============================================================
   TOUCH DEVICE ENHANCEMENTS
   ============================================================ */

@media (pointer: coarse) {
    /* Larger hit targets on touch */
    button,
    [role="button"],
    a,
    select {
        min-height: 44px;
    }

    /* Remove hover-only effects */
    *:hover {
        transition-duration: 0s !important;
    }

    /* Scrollbar width for touch */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }
}

/* ============================================================
   REDUCED MOTION (accessibility)
   ============================================================ */

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

/* ============================================================
   LANDSCAPE PHONE — short viewport
   ============================================================ */

@media (max-height: 500px) and (orientation: landscape) {
    div[style*="height:calc(100vh"] {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    /* Reduce fixed panel heights */
    div[style*="height:240px"],
    div[style*="height:320px"] {
        height: 180px !important;
    }
}

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

@media print {
    div[style*="overflow:hidden"] {
        overflow: visible !important;
    }

    div[style*="height:calc(100vh"] {
        height: auto !important;
    }

    canvas {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}


/* ============================================================
   RTL SUPPORT (Arabic, Farsi)
   ============================================================ */

[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border-subtle);
}

[dir="rtl"] .content {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

[dir="rtl"] .header-left {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 768px) {
    [dir="rtl"] .content {
        margin-right: 0;
    }
}

/* ============================================================
   VIEWPORT UNIT FIX (dvh for mobile address bar)
   ============================================================ */

@supports (height: 100dvh) {
    .content,
    div[style*="height:100vh"] {
        height: 100dvh;
    }

    @media (max-width: 768px) {
        div[style*="height:calc(100vh"] {
            min-height: calc(100dvh - 60px) \!important;
        }
    }
}

/* ============================================================
   ENTERPRISE MICRO-INTERACTIONS
   ============================================================ */

/* Card hover lift effect */
.card,
div[style*="border-radius"][style*="background"] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .card:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }
}

/* Smooth scrollbar styling */
.content::-webkit-scrollbar {
    width: 6px;
}

.content::-webkit-scrollbar-track {
    background: transparent;
}

.content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Firefox scrollbar */
.content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* ============================================================
   HIGH DPI / 4K DISPLAY SUPPORT
   ============================================================ */

@media (min-width: 2560px) {
    .content {
        max-width: 2200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   DARK/LIGHT THEME TRANSITIONS
   ============================================================ */

body,
.header,
.sidebar,
.content,
.card {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}

/* ============================================================
   FOCUS MANAGEMENT (Keyboard Navigation)
   ============================================================ */

*:focus-visible {
    outline: 2px solid var(--accent-primary, #D4654A);
    outline-offset: 2px;
}

/* Hide focus ring for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================
   ULTRA-WIDE (>= 3440px) — Don't stretch too far
   ============================================================ */

@media (min-width: 3440px) {
    .content {
        max-width: 2800px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 48px;
        padding-right: 48px;
    }
}