@import './variables.css';

/* =============================================
 * AVENLO — Responsive Utility Layer
 * Mobile-first helpers and global responsive
 * safety rules. Load after theme.css.
 *
 * Breakpoints (also defined as vars):
 *   --bp-sm  480px
 *   --bp-md  768px
 *   --bp-lg  992px
 *   --bp-xl  1280px
 * ============================================= */

/* ---------------------------------------------
 * GLOBAL SAFETY
 * --------------------------------------------- */
img,
video,
canvas,
svg,
picture {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
}

/* Make tables horizontally scrollable on mobile by default.
   Opt-out with .table-fixed on a parent or the table itself. */
@media (max-width: 768px) {
    .table-scroll,
    .table-wrap,
    table:not(.table-fixed) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* Prevent horizontal page scroll from runaway widths */
html, body {
    overflow-x: hidden;
}

/* ---------------------------------------------
 * CONTAINERS
 * --------------------------------------------- */
.container,
.container-narrow,
.container-wide {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container         { max-width: 1200px; }
.container-narrow  { max-width: 760px; }
.container-wide    { max-width: 1440px; }

@media (min-width: 768px) {
    .container,
    .container-narrow,
    .container-wide {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }
}

/* ---------------------------------------------
 * RESPONSIVE GRID HELPER
 * --------------------------------------------- */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.grid-responsive-sm { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid-responsive-lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Stack on mobile */
@media (max-width: 768px) {
    .stack-mobile {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .stack-mobile > * {
        width: 100%;
    }
}

/* ---------------------------------------------
 * VISIBILITY UTILITIES
 * --------------------------------------------- */
.hide-mobile { display: initial; }
.hide-tablet { display: initial; }
.hide-desktop { display: none; }

@media (max-width: 767.98px) {
    .hide-mobile { display: none !important; }
    .hide-desktop { display: initial !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hide-tablet { display: none !important; }
}

/* ---------------------------------------------
 * TOUCH TARGETS (mobile)
 * --------------------------------------------- */
@media (max-width: 768px) {
    button,
    .btn,
    a.btn,
    .btn-icon,
    input[type="button"],
    input[type="submit"],
    [role="button"] {
        min-height: 40px;
    }

    /* Slightly larger tap area for icon-only buttons */
    .btn-icon,
    .theme-toggle {
        min-width: 40px;
    }

    /* Form controls need a comfortable touch height too. Opt out with
       .touch-compact on a control that must stay small (e.g. inline chips). */
    input:not([type="checkbox"]):not([type="radio"]):not(.touch-compact),
    select:not(.touch-compact),
    textarea:not(.touch-compact) {
        min-height: 44px;
    }
}

/* ---------------------------------------------
 * BODY SCROLL LOCK (sidebar / modal open)
 * --------------------------------------------- */
body.sidebar-open,
body.modal-open,
body.no-scroll {
    overflow: hidden;
}

/* ---------------------------------------------
 * MOBILE-FIRST TYPE TWEAKS
 * --------------------------------------------- */
@media (max-width: 480px) {
    h1 { font-size: var(--fs-2xl); }
    h2 { font-size: var(--fs-xl); }
    h3 { font-size: var(--fs-lg); }
    body { font-size: 0.95rem; }
}

/* ---------------------------------------------
 * SAFE-AREA INSETS (notched devices)
 * --------------------------------------------- */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* =============================================
 * MOBILE PRIMITIVES (opt-in)
 *
 * Everything below is either gated behind a class
 * or scoped inside a max-width query, so adding it
 * cannot change any desktop layout. Opt a page in
 * by adding the class to its markup.
 * ============================================= */

/* ---------------------------------------------
 * TABLE → CARD  (.table-cards)
 *
 * Turns a normal <table> into a stack of labelled
 * cards below 768px. Requires data-label="…" on
 * each <td>. Tables WITHOUT this class keep the
 * default horizontal-scroll behaviour above.
 * --------------------------------------------- */
@media (max-width: 768px) {
    table.table-cards {
        display: block;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        overflow: visible;        /* override the default table-scroll clip */
    }

    table.table-cards thead {
        /* Visually hidden but kept for assistive tech */
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    table.table-cards tbody,
    table.table-cards tr,
    table.table-cards td {
        display: block;
        width: 100%;
    }

    table.table-cards tr {
        margin-bottom: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }

    table.table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        border: 0;
        border-bottom: 1px solid var(--border-subtle);
        text-align: right;
        word-break: break-word;
    }

    table.table-cards td:last-child {
        border-bottom: 0;
    }

    table.table-cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: var(--space-3);
        color: var(--text-muted);
        font-weight: var(--fw-semibold);
        text-align: left;
        white-space: nowrap;
    }

    /* A td with no label (e.g. an actions cell) spans full width */
    table.table-cards td[data-label=""]::before,
    table.table-cards td:not([data-label])::before {
        content: none;
    }
}

/* ---------------------------------------------
 * MODAL → BOTTOM SHEET  (.modal-mobile-sheet)
 *
 * Apply to the modal CARD element (not the backdrop).
 * Below 480px it docks to the bottom as a full-width
 * sheet with its own scroll. Pair with body.modal-open
 * (scroll lock already defined above).
 * --------------------------------------------- */
@media (max-width: 480px) {
    .modal-mobile-sheet {
        position: fixed;
        inset: auto 0 0 0;
        width: 100%;
        max-width: none;
        max-height: 90vh;
        margin: 0;
        border-radius: var(--modal-sheet-radius) var(--modal-sheet-radius) 0 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* keep clear of the home-indicator on notched phones */
        padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    }
}

/* ---------------------------------------------
 * RESPONSIVE PADDING & FORMS
 * --------------------------------------------- */
@media (max-width: 480px) {
    .pad-responsive {
        padding: var(--card-pad-mobile) !important;
    }
}

/* Force multi-column form rows into a single column on small screens.
   Apply to the row/grid wrapper, not individual fields. */
@media (max-width: 600px) {
    .form-stack {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-3);
    }
    .form-stack > * {
        width: 100%;
    }
}

/* ---------------------------------------------
 * PORTRAIT SPLIT-PANE  (.split-pane-portrait)
 *
 * For two-pane fixed layouts (studio, editors).
 * Replaces a rigid 50/50 height split with a
 * content-sized top pane over a flexible bottom.
 * Add .pane-toggle to show ONE pane at a time on
 * phones (driven by mobile-panes.js).
 * --------------------------------------------- */
@media (max-width: 900px) {
    .split-pane-portrait {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }
    .split-pane-portrait > .pane-a {
        max-height: 45vh;
        /* Vertical scroll only — never let a wide child scroll the pane
           sideways (that shows as a horizontal "slide" + gap on the right).
           Nested scrollers (e.g. the timeline tracks) keep their own overflow. */
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .split-pane-portrait > .pane-b {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* The phone-only pane switcher bar is hidden by default. This base rule is
   declared BEFORE the ≤700px media query below so the media query wins on
   phones — both have equal specificity, so source order decides. (Putting this
   after the media query would hide the switcher at ALL widths, stranding the
   user on a single pane with no way to switch.) */
.pane-switcher {
    display: none;
}

/* Active segment highlight (mobile-panes.js toggles .active on the buttons).
   Specificity beats .btn-secondary so it wins on switchers styled as buttons. */
.pane-switcher-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Single-pane mode: below 700px show only the active pane full-height.
   mobile-panes.js sets data-active="a"|"b" on the .pane-toggle container. */
@media (max-width: 700px) {
    .pane-toggle {
        grid-template-rows: auto minmax(0, 1fr);
    }
    .pane-toggle[data-active="a"] > .pane-b,
    .pane-toggle[data-active="b"] > .pane-a {
        display: none;
    }
    .pane-toggle[data-active="a"] > .pane-a,
    .pane-toggle[data-active="b"] > .pane-b {
        max-height: none;
    }
    /* The switcher bar itself is only relevant on phones */
    .pane-switcher {
        display: flex;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }
    .pane-switcher-btn {
        flex: 1;
        min-height: 40px;
        font-size: var(--fs-mobile-tab);
    }
}

/* ---------------------------------------------
 * DECORATIVE LAYER GUARD
 *
 * Absolutely-positioned background decoration tends
 * to overflow narrow viewports (horizontal scroll)
 * and costs paint time on phones. Clip it, and drop
 * the heaviest layers entirely on small screens.
 * --------------------------------------------- */
.decor-clip {
    overflow: hidden;
    max-width: 100vw;
}

@media (max-width: 480px) {
    .bg-3d-container,
    .bg-effects,
    .decor-hide-mobile {
        display: none !important;
    }
}