/* =========================================================================
   Analytics Explorer / Usage Explorer - query rail
   -------------------------------------------------------------------------
   The query rail is a fixed 392px column. Everything inside it must size from
   its CONTAINER, never the viewport: MudGrid's sm/md breakpoints read the
   window width, so on a wide screen a `md="2"` field collapses to a ~60px stub
   inside the rail. All field layouts here use container-driven CSS grids.
   ========================================================================= */

.ae-workspace {
    display: grid;
    grid-template-columns: 392px 1fr;
    gap: 20px;
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .ae-workspace { grid-template-columns: 1fr; }
}

.ae-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ae-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06);
}

.ae-card-head { display: flex; align-items: center; }

/* ---- Pinned results, scrolling rail -------------------------------------
   The app scrolls inside .main-container (utilities.css: height = 100dvh minus
   the app bar), NOT the body - so `position: sticky; top: 0` pins to the top of
   the visible page, and the 100dvh math below mirrors that container's own
   height calculation. Keep the two in sync. */

.ae-results {
    display: flex;
    flex-direction: column;
    min-height: 640px;
}

@media (min-width: 1201px) {
    .ae-rail,
    .ae-results {
        position: sticky;
        top: 0;
        /* 24px leaves MudContainer's py-6 bottom padding visible, so a pinned
           pane stops short of the viewport edge rather than bleeding off it. */
        max-height: calc(100dvh - var(--app-bar-offset, 60px) - 24px);
    }

    /* The rail is the long column, so it carries the scrollbar: the query
       controls scroll while the chart beside them stays put. The negative
       margin parks the scrollbar in the grid gap, keeping the cards at their
       full 392px. */
    .ae-rail {
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding-right: 10px;
        margin-right: -10px;
        scrollbar-width: thin;
        scrollbar-color: var(--mud-palette-table-lines) transparent;
    }

    .ae-rail::-webkit-scrollbar { width: 8px; }
    .ae-rail::-webkit-scrollbar-track { background: transparent; }

    .ae-rail::-webkit-scrollbar-thumb {
        background: var(--mud-palette-table-lines);
        border-radius: 999px;
    }

    .ae-rail::-webkit-scrollbar-thumb:hover { background: var(--mud-palette-text-secondary); }

    /* Drop the 640px floor once pinned so the card matches the visible height
       and the chart's flex:1 fills the pane exactly. */
    .ae-results {
        min-height: 0;
        overflow: auto;
    }
}

/* ---- Chart-type segmented control --------------------------------------- */

.ae-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.ae-seg-btn {
    border: 1px solid var(--mud-palette-table-lines);
    background: var(--mud-palette-surface);
    border-radius: 5px;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.ae-seg-btn.active { border-color: var(--mud-palette-secondary); background: rgba(21,93,252,.08); }

/* ---- KPI strip ----------------------------------------------------------- */

/* auto-fit, not repeat(3, 1fr): the Total tile is hidden for ratio and snapshot metrics, which
   left an empty third column. The remaining tiles now share the full width. */
.ae-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; }

.ae-kpi-tile { border: 1px solid var(--mud-palette-table-lines); border-radius: 5px; padding: 12px 14px; }

.ae-kpi-label {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.ae-kpi-value {
    font-size: 26px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-top: 5px;
    letter-spacing: -.01em;
}

.ae-kpi-sub { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 2px; }

.ae-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 999px;
    padding: 4px 10px;
}

.ae-trend-up { color: var(--mud-palette-success); background: rgba(0,126,51,.12); }
.ae-trend-down { color: var(--mud-palette-error); background: rgba(211,47,47,.12); }

/* ---- Collapsible query sections (Filters / More options) ----------------
   Each panel is a hairline card that sits flush in the rail. Gutters are
   disabled on the component (24px each side is a quarter of the rail) and
   replaced with a tighter 12px here. */

.ae-panels.mud-expansion-panels { background: transparent; }

.ae-panels .mud-expand-panel {
    background: transparent;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;
}

.ae-panels .mud-expand-panel:last-child { border-bottom: 1px solid var(--mud-palette-table-lines); }

.ae-panels .mud-expand-panel + .mud-expand-panel { margin-top: 8px; }

/* MudBlazor throws 16px of margin around an expanded panel; the rail reads
   better with the sections staying put as they open. */
.ae-panels .mud-expand-panel.mud-panel-expanded { margin: 0; }
.ae-panels .mud-expand-panel.mud-panel-expanded + .mud-expand-panel { margin-top: 8px; }

.ae-panels .mud-expand-panel .mud-expand-panel-header {
    min-height: 0;
    padding: 10px 12px;
    font-size: .875rem;
}

.ae-panels .mud-expand-panel.mud-panel-expanded > .mud-expand-panel-header {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.ae-panels .mud-expand-panel .mud-expand-panel-content { padding: 12px; }

.ae-panel-title { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* ---- Field grids --------------------------------------------------------
   auto-fit + minmax keeps a field readable (>=148px) at rail width and lets it
   spread out when the workspace collapses to a single wide column.
   min-width:0 on the cells stops long option text forcing an overflow. */

.ae-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 14px 12px;
}

.ae-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 16px 12px;
}

.ae-field-grid > *,
.ae-filter-grid > * { min-width: 0; }

/* Controls whose value text needs the full row (long labels, helper copy). */
.ae-field-wide { grid-column: 1 / -1; }

.ae-hint {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.ae-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
}

.ae-filter-head .form-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ae-filter-empty {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--mud-palette-table-lines);
    border-radius: 5px;
    color: var(--mud-palette-text-secondary);
    font-size: 12.5px;
    line-height: 1.45;
}