/* mobile-custom.css — Mobile-specific overrides */

/* Global: prevent horizontal scroll from iframe previews */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Preview iframe container in details/document view */
#preview-container {
    max-width: 100vw;
    overflow: hidden;
    position: relative;
}

#preview-container iframe,
iframe#source-document {
    max-width: 100%;
}

/* Brand editor: on mobile stack vertically or use overlay */
@media (max-width: 1024px) {
    #editorCol {
        width: 100% !important;
        max-width: 100% !important;
    }
    #previewCol {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .sheet.A4,
    .sheet.Letter {
        width: 100% !important;
        min-height: unset !important;
        padding: 16px !important;
    }

    #preview-stage {
        padding: 8px 0;
    }

    /* Force tables to scroll horizontally */
    .table-container,
    div[class*="overflow-x"]:has(table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    /* Card grid: single column on mobile */
    .card-grid,
    div[class*="grid-cols-"]:not([class*="sm:grid-cols-"]):not([class*="md:grid-cols-"]):not([class*="lg:grid-cols-"]) {
        grid-template-columns: 1fr !important;
    }

    /* Ensure stat cards don't overflow */
    div[class*="stat"],
    div[class*="metric"],
    .stat-card {
        min-width: 0;
    }

    /* Widen modal dialogs on small screens */
    div[class*="max-w-lg"],
    div[class*="max-w-md"],
    div[class*="max-w-sm"]:not([class*="sm:max-w"]) {
        max-width: calc(100vw - 32px) !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }

    /* Full-width form controls */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        max-width: 100% !important;
    }

    /* Ensure button groups wrap */
    .btn-group,
    div[class*="flex"]:has(> .btn):not([class*="flex-wrap"]) {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .btn-group > .btn,
    div[class*="flex"]:has(> .btn) > .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Reduce padding in data panels */
    div[class*="p-6"],
    div[class*="p-8"] {
        padding: 1rem !important;
    }

    /* Stack filter/search bars */
    .filter-bar,
    div[class*="flex"][class*="gap"]:has(input):has(select):has(button) {
        flex-direction: column;
        align-items: stretch !important;
    }

    .filter-bar > *,
    div[class*="flex"][class*="gap"]:has(input):has(select):has(button) > * {
        width: 100%;
    }

    /* Reduce heading sizes */
    h1 { font-size: 1.125rem !important; }
    h2 { font-size: 1.0rem !important; }
    h3 { font-size: 0.875rem !important; }

    /* Ensure tabs don't overflow */
    .tabs,
    div[role="tablist"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .tabs > *,
    div[role="tablist"] > * {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Slide-out panels */
    div[class*="inset-y-0"][class*="right-0"] {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* Tablet overrides */
@media (min-width: 768px) and (max-width: 1024px) {
    .sheet.A4,
    .sheet.Letter {
        width: 100% !important;
        padding: 24px !important;
    }
}

/* Ensure grid-cols-1 xl:grid-cols-5 pattern (details.ejs) doesn't overflow */
.grid.grid-cols-1.xl\:grid-cols-5 {
    max-width: 100%;
    overflow: hidden;
}

/* Ensure quick comparison grid on mobile has proper spacing */
.grid.grid-cols-2.gap-4 > .relative.group {
    min-width: 0;
}

/* Small phones */
@media (max-width: 380px) {
    .sheet.A4,
    .sheet.Letter {
        padding: 8px !important;
    }

    div[class*="p-4"],
    div[class*="p-5"],
    div[class*="p-6"] {
        padding: 0.75rem !important;
    }
}

/* ── Carousel indicator dots — override all inherited sizing ── */
.carousel-dot {
    min-height: unset !important;
    min-width: unset !important;
    height: var(--dot-h, 6px);
    padding: 0 !important;
    border: none !important;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    /* Expand the clickable hit area without changing visual size */
    /* Uses padding trick to maintain 44x44px accessible target */
    position: relative;
}
/* Expand touch target while keeping visual size small */
.carousel-dot::before {
    content: '';
    position: absolute;
    inset: -14px -10px; /* generous touch target: ~34px tall, 26px wide */
}

/* ── Mobile document preview: A4-ratio viewport-aware scaling ── */
@media (max-width: 768px) {
    /* Full-bleed preview card on mobile */
    #preview-container {
        border-radius: 0 !important;
    }
    /* Zoom toolbar: compact on mobile */
    #zoom-out,
    #zoom-in {
        min-width: 40px !important;
        min-height: 40px !important;
    }
    /* Details page: sidebar comes below preview on mobile */
    .grid.grid-cols-1.xl\:grid-cols-5 {
        display: flex;
        flex-direction: column;
    }
}

/* ==========================================================================
   Viewport Architecture: Dedicated Media Queries for Floovioo Enterprise
   ========================================================================== */

/* ── 1. Mobile Devices (Screen width < 640px) ── */
@media (max-width: 639px) {
    /* Compact layouts with minimal gutters */
    .glass-card {
        padding: 0.625rem !important; /* tight padding */
        border-radius: 0.75rem !important;
    }
    /* Compact margin spacing to maximize above-the-fold content */
    .mb-5 {
        margin-bottom: 0.75rem !important;
    }
    .mt-6 {
        margin-top: 0.75rem !important;
    }
}

/* ── 2. Tablets & Small Viewports (640px <= Screen width < 1024px) ── */
@media (min-width: 640px) and (max-width: 1023px) {
    .glass-card {
        padding: 1rem !important;
        border-radius: 1rem !important;
    }
    .mb-5 {
        margin-bottom: 1.25rem !important;
    }
}

/* ── 3. Standard Desktop Viewports (1024px <= Screen width < 1280px) ── */
@media (min-width: 1024px) and (max-width: 1279px) {
    .glass-card {
        padding: 1.25rem !important;
        border-radius: 1.25rem !important;
    }
}

/* ── 4. Large Desktop Viewports (Screen width >= 1280px) ── */
@media (min-width: 1280px) {
    .glass-card {
        padding: 1.5rem !important;
        border-radius: 1.5rem !important;
    }
}