/* app.css — project overrides layered on top of the compiled Metronic bundle.
   assets/css/styles.css is a vendored build artifact (no Tailwind sources in the repo),
   so it must not be edited: anything custom belongs here. Loaded after styles.css. */

/* The search wrapper is a direct child of the header container, which is items-stretch. */
#global-search {
    align-self: center;
}

/* Cards are grid/flex items (detail pages stack them in a single-column grid). A grid track
   sized `auto` takes its item's min-content width, so one card holding a wide table drags the
   whole column past the viewport and the page scrolls sideways instead of the table scrolling
   in its own .kt-scrollable-x-auto / .overflow-x-auto. min-width:0 lets the track collapse.
   The layout's flex chain needs the same thing — see the min-w-0 classes in _Layout.cshtml. */
.kt-card {
    min-width: 0;
}

/* Mobile header: the global search sits on its own full-width row below the
   logo/menu row. Both the fixed header height and the matching kt-wrapper
   padding-top come from --header-height, so growing that one value keeps the
   page content clear of the taller header. Metronic's mobile value is 60px. */
@media (max-width: 1023.98px) {
    .demo1 {
        --header-height: 104px;
    }

    #headerContainer {
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        gap: 0.5rem;
        padding-block: 0.5rem;
    }

    /* Ordered after the user menu so it wraps onto a second, full-width row. */
    #global-search {
        order: 1;
        flex-basis: 100%;
        width: 100%;
    }

    #global-search .kt-input {
        width: 100%;
        height: 2.5rem;
    }

    /* 16px is a threshold, not a preference: iOS Safari zooms the page in when a focused
       input renders text below it (kt-input is 0.8125rem), and the zoomed-in viewport is
       what pushes the results panel off-screen. Keep this at or above 16px. */
    #global-search-input {
        font-size: 16px;
    }

    /* Results panel spans the whole search row instead of the narrow desktop
       dropdown. The #id prefix outranks the .gs-panel rules global-search.js
       injects at runtime (those land later in the document). */
    #global-search .gs-panel {
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
        /* Stay on screen on a short phone; dvh also accounts for the on-screen
           keyboard where it is supported, with the vh line as the fallback. */
        max-height: min(24rem, 60vh);
        max-height: min(24rem, 60dvh);
    }
}

/* Chrome that earns its space on desktop but not on a phone. Same 1024px boundary the
   rest of the mobile layout uses (sidebar drawer, breadcrumb, header search row). */
@media (max-width: 1023.98px) {
    /* Excel export/import buttons: they want a file dialog and a wide result table.
       The pages themselves stay reachable by URL. */
    [data-desktop-only] {
        display: none;
    }

    /* Leading id column of a listing table — the next column links to the same record.
       Targeted by position rather than per-cell markers because KTDataTable rebuilds
       tbody cells client-side and drops their attributes. :not(:last-child) spares a
       single-cell "no records" row. */
    table[data-hide-id-col] > thead > tr > th:first-child,
    table[data-hide-id-col] > tbody > tr > td:first-child:not(:last-child) {
        display: none;
    }
}

/* The compiled bundle has no lg: width utilities, so the desktop search width lives here. */
@media (min-width: 1024px) {
    #global-search .kt-input {
        width: 24rem;
    }
}