/* Diamond Agency — phone layout.
 *
 * The panel had no mobile rules at all: three hundred lines of custom styling
 * and not one media query. Everything below targets a breakage that exists on
 * a real narrow screen, not a precaution.
 *
 * !important is used deliberately and only where it has to be. The dashboards
 * and reports set `grid-template-columns: repeat(4, 1fr)` as INLINE styles, and
 * an inline style can only be beaten by an important declaration. Rewriting
 * every one of those files to auto-fit would fix today's screens and do nothing
 * about the next page somebody writes the same way; a rule here covers both.
 */

/* ── Never scroll sideways ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ── Fixed column grids collapse ──────────────────────────────────────────
 *
 * Matched on `display:grid` rather than on each column spelling.
 *
 * The first attempt at this listed the specs it knew about — repeat(4,1fr),
 * repeat(3,1fr) and so on — and missed the one layout that mattered most: the
 * dashboard's main row is `grid-template-columns: 3fr 2fr`, which no amount of
 * repeat() matching reaches. It stayed two columns wide on a phone, and the
 * cards in it were about 150px across, so every name, date and badge inside
 * them was clipped or broken one character per line.
 *
 * Enumerating spellings was the wrong shape of rule. Any inline grid collapses,
 * whatever its columns say and whoever writes the next one.
 *
 * minmax(0, 1fr) rather than 1fr: a grid track defaults to min-width:auto, so
 * it refuses to shrink below its content and the content overflows instead of
 * wrapping. That default is the other half of why the text was cut off.
 */
@media (max-width: 1024px) {
    .fi-main [style*="display:grid"],
    .fi-main [style*="display: grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    /* One across. Two cards side by side on a 360px phone leaves neither of
       them room for the numbers that are the entire point of the card. */
    .fi-main [style*="display:grid"],
    .fi-main [style*="display: grid"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Some grids take `display: grid` from Tailwind's class and then override the
 * columns inline — `class="grid grid-cols-2" style="grid-template-columns:
 * repeat(4,1fr)"`. The inline spec wins over the responsive class, so those
 * stayed four across on a phone while looking responsive in the markup.
 *
 * Scoped to elements that carry an inline column spec, so Filament's own
 * `grid-cols-1 md:grid-cols-2` layouts are left to do their job. */
@media (max-width: 1024px) {
    .fi-main .grid[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .fi-main .grid[style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ── Let text wrap instead of spilling ──────────────────────────────────── */
@media (max-width: 768px) {
    /* Grid and flex children both default to min-width:auto, which is what
       turns "Diamond Admin" into "AIF Admin" and stacks a date one word per line.
       Allowing them to shrink is what lets the text inside wrap normally. */
    .fi-main [style*="display:grid"] > *,
    .fi-main [style*="display: grid"] > *,
    .fi-main [style*="display:flex"] > *,
    .fi-main [style*="display: flex"] > * {
        min-width: 0;
    }

    /* Dates and names were breaking mid-word because the box was narrower than
       the word. With the boxes fixed they do not need to any more. */
    .fi-main {
        overflow-wrap: break-word;
    }
}

/* ── The Kanban board ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* The columns already scroll horizontally. On a phone they were still
       sized for a desktop, so a column was wider than the screen and no card
       was ever fully visible. One column, near enough full width, snapping
       into place as you swipe. */
    .kb-col,
    .kanban-column {
        min-width: 85vw !important;
        max-width: 85vw !important;
        scroll-snap-align: start;
    }

    .fi-main .flex.gap-4.overflow-x-auto {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Room for the next column's edge to peek in, which is what tells
           somebody there is more to swipe to. */
        padding-inline-end: 15vw;
    }
}

/* ── Filter and selector rows ───────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Selects carrying a desktop min-width — 160px on the CRM pipeline, 240px
       on the Gantt chart — sit in rows of two or three. On a 360px screen the
       row cannot hold them, so either it overflows or the controls squeeze into
       something unreadable. Each takes the full width instead and they stack. */
    .crm-select,
    .fi-main select[style*="min-width:240px"],
    .fi-main select[style*="min-width: 240px"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* The rows that hold them. */
    .fi-main .flex.items-center.gap-4.flex-wrap > * {
        min-width: 0;
    }

    .fi-main .flex-1.max-w-xs {
        max-width: none !important;
    }
}

/* ── The CRM pipeline ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Same treatment as the Kanban board: it is the same shape of problem. */
    .crm-col,
    .crm-stage-col {
        min-width: 85vw !important;
        max-width: 85vw !important;
        scroll-snap-align: start;
    }
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Wide tables scroll rather than squeezing every column to illegibility. */
    .fi-ta-table-wrp,
    .fi-ta-ctn {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Filament's own responsive table keeps its header sticky; ours should too,
       or you lose track of which column you are reading halfway down. */
    .fi-ta-header-cell {
        white-space: nowrap;
    }
}

/* ── Breathing room ─────────────────────────────────────────────────────
 *
 * Filament gives the page `px-4` on phones — 16px, which on a dense dashboard
 * of full-bleed gradient cards reads as content shoved against both edges.
 *
 * The two paddings pull in opposite directions and both matter:
 *
 *   the page gutter   is the distance from the card to the screen edge
 *   the card padding  is the distance from the text to the card edge
 *
 * An earlier revision of this file tightened the second one to fit more in,
 * which is the opposite of what a cramped screen needs. The gutter goes up, the
 * hero's oversized desktop padding comes down, and the cards keep theirs.
 *
 * !important on the gutter because `.fi-main` and Tailwind's `.px-4` have equal
 * specificity, so without it the winner depends on stylesheet order — and that
 * order is decided by render hooks firing in a sequence this file cannot see.
 */
@media (max-width: 768px) {
    .fi-main {
        padding-inline: 1.25rem !important;
    }
}

@media (max-width: 420px) {
    /* Narrower phones need the width back more than they need the margin. */
    .fi-main {
        padding-inline: 1rem !important;
    }
}

@media (max-width: 640px) {
    /* The decorative circles are positioned off the edge of their container.
       With overflow visible they add to the page width and produce the sideways
       scroll everything else here is trying to prevent. */
    .fi-main [style*="position:absolute"][style*="border-radius:50%"] {
        display: none;
    }

    /* 2rem of padding inside a card that is itself inset from the screen leaves
       the text about 250px to live in on a 360px phone. */
    .fi-main [style*="padding: 2rem"],
    .fi-main [style*="padding:2rem"] {
        padding: 1.25rem !important;
    }

    /* Big dashboard numbers were sized for a 1440px screen. */
    .fi-main [style*="font-size:2.5rem"],
    .fi-main [style*="font-size: 2.5rem"] {
        font-size: 1.75rem !important;
    }

    .fi-main [style*="font-size:2rem"],
    .fi-main [style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }

    /* Cards keep their inner padding — it is what stops the number touching the
       border — but the space BETWEEN them comes down, since every card is now
       full width and the gaps stack up into a lot of scrolling. */
    .fi-main [style*="gap:1rem"],
    .fi-main [style*="gap: 1rem"] {
        gap: 0.75rem !important;
    }

    /* Section headers and card corners, scaled to the smaller canvas. */
    .fi-main [style*="border-radius: 1rem"],
    .fi-main [style*="border-radius:1rem"] {
        border-radius: 0.875rem !important;
    }
}

/* ── Vertical rhythm ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* py-8 top and bottom costs a sixth of a phone screen before anything is
       read. Still generous, just not desktop-generous. */
    .fi-page > section {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
        gap: 1.25rem !important;
    }
}

/* ── Touch targets ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* 44px is the smallest reliably tappable target. Several of the icon
       buttons in the tables were 24. */
    .fi-ta-actions .fi-icon-btn,
    .fi-ac-icon-btn-action .fi-icon-btn {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }
}

/* ── Notifications dropdown ───────────────────────────────────────────────
 *
 * 380px of panel on a 360px phone hangs off whichever edge the language puts
 * it on — in Arabic, off the right, taking the heading with it.
 *
 * `position: fixed`, not absolute. The panel hangs off the bell button, which
 * is its nearest positioned ancestor, so insets measured from "the edges"
 * meant the edges of a 38px button. Fixed measures from the viewport, which is
 * the thing it actually has to fit inside.
 */
/* On a desktop the panel is a dropdown beside its button; dimming the whole
 * page behind it would be heavy-handed. Hidden here rather than inline, because
 * x-show owns the element's inline display and would clear anything set there
 * the first time it opens. */
@media (min-width: 641px) {
    .taif-notif-backdrop {
        display: none !important;
    }
}

@media (max-width: 640px) {
    /* The close button carries inline display:none and no x-show, so it is
       safe to reveal it from here. */
    .taif-notif-close {
        display: inline-flex !important;
    }

    .taif-notif-panel {
        position: fixed !important;
        top: 4rem !important;
        inset-inline: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        margin-top: 0 !important;
        /* Never taller than the screen it opens on. */
        max-height: calc(100vh - 5.5rem) !important;
        max-height: calc(100dvh - 5.5rem) !important;

        /* No !important on display, and the distinction is the whole feature.
         *
         * x-show hides by writing `display: none` as an INLINE style, and an
         * important declaration in a stylesheet outranks inline. `display: flex
         * !important` here meant the panel could not be hidden by anything:
         * the backdrop, the close button and Escape all set open = false, Alpine
         * wrote display:none, and this line overrode it every time. The panel
         * opened and then stayed open for good.
         *
         * Plain `display: flex` is the right strength: it applies while the
         * element has no inline display, and yields the moment x-show writes
         * one. Anything x-show controls has to be left this way. */
        display: flex;
        flex-direction: column;
    }

    /* The list is the part that scrolls; the header, tabs and footer stay put. */
    .taif-notif-panel > div[style*="max-height:420px"] {
        max-height: none !important;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* "Notifications", "mark this tab read" and "All" on one row needs about
       320px of Arabic. Let the buttons drop to their own line rather than
       pushing the heading off the panel. */
    .taif-notif-panel > div:first-of-type {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* ── Installed as an app ────────────────────────────────────────────────── */
@supports (padding: max(0px)) {
    @media (display-mode: standalone) {
        /* Without this the top bar sits under the notch and the bottom of the
           page under the home indicator. */
        .fi-topbar {
            padding-top: max(0px, env(safe-area-inset-top));
        }

        .fi-main {
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
            padding-inline-start: max(0px, env(safe-area-inset-left));
            padding-inline-end: max(0px, env(safe-area-inset-right));
        }
    }
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* iOS zooms the whole page in when a focused input is under 16px, and does
       not zoom back out. Anything the user types into has to be at least that. */
    .fi-input,
    .fi-select-input,
    textarea.fi-input {
        font-size: 16px !important;
    }

    /* Modal actions stack rather than overflowing their own footer. */
    .fi-modal-footer-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .fi-modal-footer-actions .fi-btn {
        width: 100%;
        justify-content: center;
    }
}