/* ==========================================================================
   CipherPanel — Responsive / mobile styles
   --------------------------------------------------------------------------
   Loaded LAST (after app.css / certificate-list.css) so these rules win at
   equal specificity. Two tiers:

     • Tablet  : max-width 900px  — condensed, single column, hamburger nav
     • Phone   : max-width 576px  — tighter spacing, full-bleed dialogs/drawer

   Structural / shell rules live here. A few pages that use inline flex styles
   in their markup get small class hooks added to the .razor so they can be
   targeted from here.
   ========================================================================== */

/* ==========================================================================
   0. Hamburger toggle — hidden on desktop, shown <=900px (rule below).
   ========================================================================== */
.cp-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    cursor: pointer;
    border-radius: 50%; 
    flex: 0 0 auto;
}

    .cp-nav-toggle:hover {
        background: rgba(255, 255, 255, 0.24);
    }

    .cp-nav-toggle svg {
        width: 22px;
        height: 22px;
        display: block;
    }

/* ==========================================================================
   1. NAV COLLAPSE  (<= 1200px)  — header / navigation only
   --------------------------------------------------------------------------
   The horizontal menu carries 9 items and needs ~1250px to sit on one row, so
   it must fold into the hamburger well before the page-layout tablet tier
   (900px, next block) — otherwise it wraps onto a second line. This block owns
   ONLY the header collapse; page content stays desktop-width until 900px.
   ========================================================================== */
@media (max-width: 1199.98px) {

    /* Header / navigation — collapse the horizontal menu into an off-canvas
       panel toggled by our own .cp-nav-toggle hamburger (see MainLayout +
       app.js). Visibility is driven by the .cp-nav-open class on .app-header
       (not Radzen's responsive mode) so the hamburger stays fixed in the bar. */
    .app-header {
        position: relative;
    }

    /* Show our hamburger, hide the desktop-only "Product Support" button */
    .cp-nav-toggle {
        display: inline-flex !important;
    }

    .product-support-btn {
        display: none !important;
    }
    /* The anchor wrapping the product-support button collapses with it */
    a:has(> .product-support-btn) {
        display: none !important;
    }

    /* Turn the inline menu into a full-width dropdown panel under the header */
    .menu-container {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex: 0 0 auto;
        background: #1E1E1E;
        padding: 6px 0 10px;
        max-height: calc(100dvh - 56px);
        overflow-y: auto;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
        display: none; /* hidden until toggled */
        z-index: 10001;
    }

    .app-header.cp-nav-open .menu-container {
        display: block;
    }

    /* Stack the Radzen menu vertically and expand every submenu inline
       (accordion). Radzen renders the top menu as a flex row of <li>. */
    .app-header .main-menu.rz-menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .app-header .main-menu .rz-navigation-item {
        width: 100%;
        display: block;
    }

    /* Submenus: Radzen renders them with an inline style="display:none" and
       reveals them on hover via JS. On mobile there is no hover, so force them
       visible and inline (expanded accordion). !important beats the inline
       style; scoped to the media query so desktop hover behaviour is intact. */
    .app-header .main-menu .rz-navigation-menu {
        display: block !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding-left: 12px;
        min-width: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    /* Legible text on the dark panel */
    .app-header .main-menu .rz-navigation-item-link,
    .app-header .main-menu .rz-navigation-item-text,
    .app-header .main-menu .rz-navigation-item-icon {
        color: #FFFFFF !important;
    }

    .app-header .main-menu .rz-navigation-item-link {
        padding: 12px 16px !important;
        width: 100%;
        box-sizing: border-box;
    }

    .app-header .main-menu .rz-navigation-item-wrapper:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .navbar {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        gap: 8px;
    }

    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
}

/* ==========================================================================
   2. TABLET & BELOW  (<= 900px)  — page layout
   ========================================================================== */
@media (max-width: 900px) {

    :root {
        --layout-padding-left: 16px;
        --layout-padding-right: 16px;
        --layout-padding-top: 16px;
        --layout-padding-bottom: 8px;
    }

    /* Wide pages: full width (no cap, no side margin) with a tight gutter. */
    .page.page-wide {
        --cp-page-container: none;
        --cp-page-gutter: 16px;
        --cp-page-sidegap: 0px;
    }

    /* ---- Quick "Request Certificate" side tab: hide the rotated desktop
            affordance; list pages carry their own Request button ---- */
    .side-button {
        display: none !important;
    }

    /* ======================================================================
       Generic page patterns
       ====================================================================== */

    /* Two-column detail pages already collapse at 900 in app.css by HIDING the
       side column. Instead, stack it so its content stays reachable. */
    .page-content.page-content-two-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        overflow: visible !important;
    }

    .page-content.page-content-two-column.page-content-two-column-reverse {
        flex-direction: column-reverse !important;
    }

        .page-content.page-content-two-column .page-content-side {
            display: block !important;
            overflow: visible !important;
            width: 100% !important;
        }

        .page-content.page-content-two-column .page-content-main {
            overflow: visible !important;
            width: 100% !important;
        }

    /* ---- Dialogs: never exceed the viewport ---- */
    .rz-dialog {
        max-width: calc(100vw - 24px) !important;
        width: auto !important;
        box-sizing: border-box;
    }

    /* ======================================================================
       Data grids — horizontal-scroll strategy (chosen approach).
       Let wide tables swipe sideways inside their own scroll area with a
       momentum feel, instead of squashing columns.
       ====================================================================== */
    .rz-data-grid-data {
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Certificate List (and similar) header rows ----
       These rows use inline flex in the markup; hook classes were added so we
       can reflow them here. */

    /* Row 1: title + search → let the search drop below the title */
    .cp-list-headrow {
        flex-wrap: wrap !important;
    }

        .cp-list-headrow .cp-list-search {
            width: 100% !important;
            flex: 1 1 100% !important;
        }

            /* The search input is capped at 360px on desktop (.list-page-header
               .search-field). Lift that cap so it fills the row on tablet/phone. */
            .cp-list-headrow .cp-list-search .search-field {
                max-width: none !important;
            }

    /* Row 2: stats + action buttons → stack, buttons stretch */
    .cp-list-statsrow {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

        .cp-list-statsrow .cp-list-stats {
            flex-wrap: wrap !important;
            row-gap: 6px !important;
        }

        /* Import + Request Certificate span the row, side by side (per the 768 design). */
        .cp-list-statsrow .cp-list-actions > * {
            flex: 1 1 0 !important;
            min-width: 0 !important;
        }

        .cp-list-statsrow .cp-list-actions label {
            display: block !important;
            width: 100% !important;
        }

        .cp-list-statsrow .cp-list-actions .cp-button {
            width: 100% !important;
            box-sizing: border-box !important;
        }

    /* Row 3: filter bar → wrap the label + filters neatly */
    .cp-list-filterbar {
        flex-wrap: wrap !important;
        row-gap: 10px !important;
    }
}

/* ==========================================================================
   2. PHONE & BELOW  (<= 576px)
   ========================================================================== */
@media (max-width: 576px) {

    :root {
        --layout-padding-left: 12px;
        --layout-padding-right: 12px;
        --layout-padding-top: 12px;
    }

    /* Wide pages: keep full width from the tablet tier; just tighten the gutter. */
    .page.page-wide {
        --cp-page-gutter: 12px;
    }

    /* Certificate list filters → 2-column grid on phones (per the 425 design):
       Owner | Issuer, Internal/External | Source, Status | Expiration, then
       Subscribe spanning the full width. Each dropdown fills its cell. */
    .cp-list-filters {
        flex: 1 1 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

        .cp-list-filters > * {
            min-width: 0 !important;
        }

        .cp-list-filters .filter-dropdown,
        .cp-list-filters .filter-dropdown > * {
            width: 100% !important;
        }

        .cp-list-filters > .cp-button {
            grid-column: 1 / -1 !important; /* Subscribe: full width below */
            width: 100% !important;
        }

    /* Right-side certificate details drawer: take the full screen width */
    .cert-drawer {
        width: 100vw;
        top: 56px; /* below the app header */
    }

    .cert-drawer-overlay {
        top: 56px;
    }

    /* Drawer inner grids to single column */
    .cert-drawer-grid,
    .cert-drawer-grid--three {
        grid-template-columns: 1fr !important;
    }

    .cert-drawer-actions-row {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Dialogs go full-bleed on tiny screens */
    .rz-dialog {
        max-width: 100vw !important;
        min-width: 0 !important;
    }

    /* Grid pager: let the summary + page buttons wrap instead of overflowing */
    .page-content.list-page-content .rz-pager {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

        .page-content.list-page-content .rz-pager .rz-pager-summary {
            flex: 1 1 100% !important;
            text-align: center !important;
            margin: 0 !important;
        }

    /* ======================================================================
       Detail / form pages — the shared label+field pattern uses a fixed 300px
       label with a calc(100% - 300px) field, which is unusable on a phone.
       Stack the label above the field, full width. Fixes Certificate Details,
       Profile, User Details and Onboarding at once (all share these classes).
       ====================================================================== */
    .details-form-field-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2px !important;
    }

    .details-form-label {
        width: 100% !important;
    }

    .details-form-field {
        width: 100% !important;
    }

    /* Detail page headers (title + action buttons) stack on phones */
    .cp-details-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

        .cp-details-header .ca-header-title {
            font-size: 18px !important;
        }

        /* action-button clusters wrap and left-align */
        .cp-details-header .rz-stack {
            align-items: flex-start !important;
            flex-wrap: wrap !important;
        }

    /* Tab strips: let long tab bars scroll horizontally instead of overflowing */
    .rz-tabview-nav {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ======================================================================
       Request wizard StepBar — 4 labelled steps won't fit across a phone.
       Keep the numbered circles + connectors and show only the ACTIVE step's
       label, so it reads like "progress + current step name".
       ====================================================================== */
    .stepbar-list {
        padding: 10px 12px !important;
    }

    .stepbar-label {
        display: none;
    }

    .stepbar-item.is-active .stepbar-label {
        display: inline;
        font-size: 13px;
    }
}

@media (max-width: 768.98px) {
    .page-content.list-page-content .rz-frozen-cell {
        position: static !important;
    }
}