/* Layout + form grids for the MudBlazor designer. Sizing is verified/tuned in-browser. */

:root {
    --appbar-h: 48px; /* MudAppBar Dense */

    /* Notch / home-indicator insets. Resolve to 0px on devices without a safe
       area (and on any browser where the viewport meta lacks `viewport-fit=cover`),
       so every rule below is a no-op except in a standalone PWA on a notched phone. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Keep the fixed app bar (and the content offset beneath it) clear of the status-bar
   notch, and inset its edges in landscape where the notch is on the side. */
.mud-appbar.mud-appbar-fixed-top {
    height: calc(var(--appbar-h) + var(--safe-top));
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    box-sizing: border-box;
}

.mud-main-content {
    padding-top: calc(var(--appbar-h) + var(--safe-top)) !important;
}

/* The right-anchored settings drawer spans full height: clear the notch at its
   top so the "Settings" header isn't tucked under the status bar. */
.mud-drawer { padding-top: var(--safe-top); }

/* Last drawer actions clear the home indicator. Fold the inset into the existing
   .pb-4 (16px) spacing with !important so utility-class load order can't drop it. */
.drawer-scroll { padding-bottom: calc(16px + var(--safe-bottom)) !important; }

/* Brand logo in the app bar, sized to the dense (48px) bar. */
.appbar-logo {
    height: 38px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Phones: shrink the logo so the Simulate button + settings icon are never cut off. */
@media (max-width: 600px) {
    .appbar-logo { height: 28px; }
}

/* Tooltips are mouse-over hints. On touch devices MudBlazor still fires a synthetic
   "hover" on every tap, so they pop up constantly and linger. Where there's no real
   hovering pointer, suppress them entirely (the global show-delay only helps a mouse). */
@media (hover: none) {
    .mud-tooltip { display: none !important; }
}

.designer-root {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    /* In landscape the notch sits on a side — inset the content past it. */
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
    box-sizing: border-box;
}

.designer-editor { min-width: 0; }

/* Compact the netlist editor: smaller type so more fits without scrolling. */
.designer-editor { font-size: 0.82rem; }
.designer-editor .mud-input-control,
.designer-editor .mud-input,
.designer-editor input,
.designer-editor .mud-select-input { font-size: 0.82rem; }
.designer-editor .mud-input-label { font-size: 0.8rem; }
.designer-editor .mud-chip { font-size: 0.72rem; height: 20px; }

.designer-plots {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Desktop: two independent scroll columns; the page itself never scrolls. */
@media (min-width: 960px) {
    .designer-root {
        flex-direction: row;
        align-items: stretch;
        height: calc(100dvh - var(--appbar-h) - var(--safe-top));
        overflow: hidden;
    }

    .designer-editor {
        flex: 0 0 380px;
        width: 380px;
        max-width: 460px;
        height: 100%;
        overflow-y: auto;
        padding-right: 4px;
    }

    .designer-plots {
        flex: 1 1 auto;
        height: 100%;
        overflow-y: auto;
    }
}

/* Mobile: plot pinned to the top, editor flows beneath, single body scroll. */
@media (max-width: 959.98px) {
    .designer-plots {
        order: -1; /* render the plot first (above the editor) */
        position: sticky;
        /* Pin the region ~60px above the app bar (= toolbar + paddings) so that as
           you scroll the netlist, the Output menu / plot toolbar slide up out of
           sight behind the app bar and ONLY the chart stays locked at the top.
           At rest (un-scrolled) the toolbar is still fully visible in normal flow;
           it only tucks away once scrolling begins. (--plot-toolbar-h is the lever
           if the toolbar height changes.) */
        --plot-toolbar-h: 60px;
        top: calc(var(--appbar-h) + var(--safe-top) - var(--plot-toolbar-h));
        z-index: 3;
        background: var(--mud-palette-background);
        padding-bottom: 8px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    }

    /* Single body scroll on mobile — let the last editor controls clear the
       home indicator. */
    .designer-root { padding-bottom: calc(12px + var(--safe-bottom)); }

    /* Tighter padding on mobile so the pinned plot uses the full width. */
    .designer-plots .plot-pane { padding: 4px !important; }

    /* Touch targets: MudBlazor's Size.Small icon buttons / checkboxes render at
       ~24-32px — below the 44px thumb minimum. Grow the HIT AREA (min-width/height
       + centered flex) without enlarging the glyph, so density/look is preserved
       while taps land. Scoped to the mobile layout so desktop stays compact. */
    .designer-editor .mud-icon-button,
    .designer-plots .mud-icon-button,
    .mud-tabs .mud-tab .mud-icon-button,
    .mud-menu > .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The per-element enable checkbox: pad the clickable wrapper out to 44px. */
    .designer-editor .mud-checkbox > .mud-button-root {
        min-width: 44px;
        min-height: 44px;
    }

    /* The per-element ⋮ (duplicate/remove) menu sat flush against the expansion
       chevron — two adjacent 44px targets, so reaching for "expand" often opened
       the menu. Insert a clear buffer so the gap between them is expand-only. */
    .designer-editor .mud-expand-panel-header .mud-menu { margin-right: 16px; }

    /* Settings drawer: the fixed 340px crowds narrow phones (only ~20px of the
       dimmed page peeks on a 360px screen). Cap to the viewport so a thumb-width
       strip of overlay always remains to tap-dismiss. */
    .mud-drawer {
        width: min(340px, 90vw) !important;
        --mud-drawer-width-right: min(340px, 90vw);
    }

    /* No zoom-on-tap: iOS Safari auto-zooms whenever a focused EDITABLE field's
       font is < 16px (ours are 0.82rem ≈ 13px for desktop density). Force 16px on
       fields you actually type into. Readonly inputs (MudSelect's display field)
       bring up no keyboard and don't trigger the zoom, so they're excluded — that
       lets the toolbar dropdowns stay compact (below). !important beats density. */
    input:not([readonly]),
    textarea {
        font-size: 16px !important;
    }

    /* Plot toolbar dropdowns are readonly (tap to open a list) — keep them compact
       to reclaim vertical space; the plot region is where it's most precious. */
    .designer-plots .mud-select input,
    .designer-plots .mud-select .mud-input-slot {
        font-size: 13px;
    }

    /* Tighten the plot toolbar: less gap between controls, smaller bottom margin. */
    .designer-plots .plot-pane > .d-flex.flex-wrap {
        gap: 6px !important;
        margin-bottom: 4px !important;
    }

    /* Kill double-tap-to-zoom in the form area (it also removes the 300ms tap
       delay). Inline-rename double-taps still fire as dblclick; the Plotly chart
       lives in .designer-plots and keeps its own touch gestures untouched. */
    .designer-editor { touch-action: manipulation; }
}

/* Compact, responsive field grids for the per-element editors. */
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 8px;
    align-items: start;
}

.field-grid.nodes {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}

/* Desktop: independently-configured plots reflow by available width. */
.plot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 12px;
}

.field-grid + .field-grid { margin-top: 8px; }

/* Dim a directivity plot whose curve is from a previous full run (stale). */
.stale-curve { opacity: 0.45; filter: grayscale(0.4); transition: opacity 120ms; }