/* _content/AspireChatApp.Razor/Components/Chatbot/Walkthrough/AppTourOverlayComp.razor.rz.scp.css */
/* =================================================================
   AppTourOverlayComp — application-tour callout card styles.

   The dimmer panels + spotlight ring are painted by walkthrough_helper.js;
   this file styles only the Blazor-rendered callout that JS repositions.

   Deliberately a copy of WalkthroughOverlayComp.razor.css rather than a
   reference to it: Blazor scoped CSS is rewritten per component (each file
   gets its own b-<hash> attribute), so the per-tool tour's stylesheet does
   not apply to this component's markup. The one visual difference is the
   width — the application tour carries an extra Pause/Resume control, which
   does not fit the 340px tool callout without wrapping.
   ================================================================= */

/* Born centred, NOT at the static top corner.

   positionCallout() in walkthrough_helper.js assigns left/top, but it can only run
   after Blazor has rendered the element — so for one frame the browser laid the card
   out wherever the flow put it (top-RIGHT under RTL), and the first step visibly
   jumped to the middle. Centring here means the very first paint is already the
   resting place of step 1, which has no target and is centred anyway.

   Centred with negative MARGINS rather than translate(-50%,-50%) deliberately. A
   transform would keep applying after JS assigns real coordinates, shifting every
   positioned step half a card up and to the left — and JS cannot reliably undo it,
   because a step with no target never calls positionCallout at all. Margins are
   overridden by the inline left/top the helper writes, so the two cannot fight.

   transition:none is REQUIRED here, not tidiness. The card inherits
   "transition: margin 0.225s" from the surrounding theme, so when positionCallout
   zeroes the centring margins the browser ANIMATES them away: the first step popped
   in centred, then slid ~290px up to its real place over a quarter of a second.
   Excluding margin from transitions makes the correction instant.

   Centring alone still could not remove the jump, because step 1 is not a centred
   step — it targets the app bar with position BELOW, so its real home is under the
   top bar. Anything painted before positionCallout runs is therefore in the wrong
   place by definition. So the card starts INVISIBLE (visibility, not display: it must
   still have a measurable size for the placement maths) and the helper reveals it via
   the .gv-wt-placed class once coordinates are set. One paint, in the right spot. */
.gv-wt-callout[b-upfweme2fb] {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -190px; /* half of width below */
    margin-top: -100px;  /* ≈ half a typical card; exact value is not critical */
    transition: none;
    visibility: hidden;
    width: 380px;
    max-width: 92vw;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #e8eef7;
    border: 1px solid rgba(79, 195, 247, 0.6);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    padding: 14px 16px;
    z-index: 20001;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Added by positionCallout() the moment real coordinates are written. Until then the
   card is hidden, so the user never sees the pre-placement position. */
.gv-wt-callout.gv-wt-placed[b-upfweme2fb] {
    visibility: visible;
}

.gv-wt-callout-head[b-upfweme2fb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.gv-wt-step-index[b-upfweme2fb] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #16213e;
    background: #4fc3f7;
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
}

.gv-wt-title[b-upfweme2fb] {
    flex: 1;
    font-weight: 700;
    font-size: 1rem;
    color: #4fc3f7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gv-wt-close[b-upfweme2fb] {
    color: #90a4ae !important;
}

.gv-wt-group[b-upfweme2fb] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #90a4ae;
    margin-bottom: 6px;
}

.gv-wt-body[b-upfweme2fb] {
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 12px;
    color: #cfd8e3;
}

/* The four controls (Back / Pause / Skip / Next) are allowed to wrap onto a
   second row on a narrow phone rather than overflow the card. */
.gv-wt-controls[b-upfweme2fb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

/* The Next button's countdown fill now comes from the shared ButtonProgressComp
   (see Components/Common/ButtonProgressComp.razor). Its CSS lives app-wide in
   main.css rather than here, because the host is a MudButton — an element this
   component does not emit, so Blazor's scoped-CSS rewriting never matched it.
   The rules that used to sit here (.gv-apptour-next, -next-label, -countdown and
   their RTL/keyframes/reduced-motion variants) were removed with that move. */

/* NOTE: the Hebrew mirror of the Resume play triangle (.gv-apptour-play-rtl)
   is NOT defined here. The icon is rendered by the MudButton CHILD component,
   and Blazor scoped CSS only rewrites selectors against elements this
   component itself emits — the rule matched nothing from this file. It lives
   in the app-wide stylesheet instead; see app.css. */
/* _content/AspireChatApp.Razor/Components/Chatbot/Walkthrough/WalkthroughOverlayComp.razor.rz.scp.css */
/* =================================================================
   WalkthroughOverlayComp — callout card styles.
   The dimmer panels + spotlight ring are painted by walkthrough_helper.js;
   this file styles only the Blazor-rendered callout that JS repositions.
   ================================================================= */

.gv-wt-callout[b-ahrlnmn9sg] {
    position: fixed;
    width: 340px;
    max-width: 90vw;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #e8eef7;
    border: 1px solid rgba(79, 195, 247, 0.6);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    padding: 14px 16px;
    z-index: 20001;
    font-size: 0.9rem;
    line-height: 1.4;
}

.gv-wt-callout-head[b-ahrlnmn9sg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.gv-wt-step-index[b-ahrlnmn9sg] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #16213e;
    background: #4fc3f7;
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
}

.gv-wt-title[b-ahrlnmn9sg] {
    flex: 1;
    font-weight: 700;
    font-size: 1rem;
    color: #4fc3f7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gv-wt-close[b-ahrlnmn9sg] {
    color: #90a4ae !important;
}

.gv-wt-group[b-ahrlnmn9sg] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #90a4ae;
    margin-bottom: 6px;
}

.gv-wt-body[b-ahrlnmn9sg] {
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 12px;
    color: #cfd8e3;
}

.gv-wt-controls[b-ahrlnmn9sg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
/* _content/AspireChatApp.Razor/Components/Live/LiveLocationSettingsComp.razor.rz.scp.css */
/* =================================================================
                 LiveLocationSettingsComp.razor.css
   Location-sharing block (PROFILE tab, LIVE panel ME section).
   Native controls, MudBlazor palette variables (light and dark).
   ================================================================= */

.lloc[b-q6ea30pujn] {
    /* the PROFILE tab centres its text; these blocks read as paragraphs */
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
}

.lloc-title[b-q6ea30pujn] {
    margin: 0;
    font-size: 0.95rem;
}

.lloc-note[b-q6ea30pujn] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.lloc-status[b-q6ea30pujn] {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    border-inline-start: 4px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray, rgba(127, 127, 127, 0.08));
}

.lloc-status.on[b-q6ea30pujn] {
    border-inline-start-color: var(--mud-palette-success);
}

.lloc-status.sim[b-q6ea30pujn] {
    border-inline-start-color: var(--mud-palette-info);
}

.lloc-status.off[b-q6ea30pujn] {
    border-inline-start-color: var(--mud-palette-warning);
}

.lloc-sources[b-q6ea30pujn] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.lloc-radio[b-q6ea30pujn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.lloc-fields[b-q6ea30pujn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 6px;
}

.lloc-field[b-q6ea30pujn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.lloc-field input[b-q6ea30pujn] {
    min-width: 0;
    padding: 4px 6px;
    font-size: 0.85rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.lloc-error[b-q6ea30pujn] {
    color: var(--mud-palette-error);
    font-size: 0.78rem;
}

.lloc-actions[b-q6ea30pujn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lloc-btn[b-q6ea30pujn] {
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-primary);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
}

.lloc-btn.primary[b-q6ea30pujn] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.lloc-btn:disabled[b-q6ea30pujn] {
    opacity: 0.6;
    cursor: default;
}
/* _content/AspireChatApp.Razor/Components/Live/LivePanelComp.razor.rz.scp.css */
/* =================================================================
                     LivePanelComp.razor.css
   Compact native controls (no MudBlazor inputs) so the panel fits a
   simulator's left tab and a phone. Colours follow the MudBlazor
   palette variables, so light and dark themes both work.
   ================================================================= */

.live-panel[b-n3bigcag7w] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.live-note[b-n3bigcag7w] {
    color: var(--mud-palette-text-secondary);
    margin: 8px 0;
}

.live-hint[b-n3bigcag7w] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    margin: 4px 0 0;
}

.live-error[b-n3bigcag7w] {
    color: var(--mud-palette-error);
    font-size: 0.78rem;
}

.live-card[b-n3bigcag7w] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--mud-palette-surface);
}

.live-card h3[b-n3bigcag7w], .live-card h4[b-n3bigcag7w] {
    margin: 0;
    font-size: 0.95rem;
}

.live-card summary[b-n3bigcag7w] {
    cursor: pointer;
    font-weight: 600;
}

.live-consent ul[b-n3bigcag7w] {
    margin: 0;
    padding-inline-start: 18px;
}

.live-tabs[b-n3bigcag7w] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.live-tab[b-n3bigcag7w] {
    flex: 1 1 auto;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-primary);
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
}

.live-tab.active[b-n3bigcag7w] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.live-badge[b-n3bigcag7w] {
    display: inline-block;
    min-width: 16px;
    padding: 0 4px;
    margin-inline-start: 4px;
    border-radius: 8px;
    background: var(--mud-palette-error);
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
}

.live-share-strip[b-n3bigcag7w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
}

/* What my friends see of me: green = live GPS, blue = simulated position, amber = nothing */
.live-share-state[b-n3bigcag7w] {
    font-weight: 600;
    padding-inline-start: 8px;
    border-inline-start: 4px solid var(--mud-palette-warning);
}

.live-share-state.gps[b-n3bigcag7w] {
    border-inline-start-color: var(--mud-palette-success);
}

.live-share-state.sim[b-n3bigcag7w] {
    border-inline-start-color: var(--mud-palette-info);
}

/* A friend whose position is simulated (decided by the server from their profile) */
.live-sim-badge[b-n3bigcag7w] {
    border: 1px dashed var(--mud-palette-info);
    color: var(--mud-palette-info);
    border-radius: 8px;
    padding: 0 6px;
    font-size: 0.7rem;
}

.live-row[b-n3bigcag7w] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-row.wrap[b-n3bigcag7w] {
    flex-wrap: wrap;
}

.grow[b-n3bigcag7w] {
    flex: 1 1 auto;
    min-width: 0;
}

.live-field[b-n3bigcag7w] {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 6px;
}

.live-input[b-n3bigcag7w], .live-select[b-n3bigcag7w] {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 4px 6px;
    font: inherit;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

.live-select.small[b-n3bigcag7w] {
    padding: 2px 4px;
    font-size: 0.75rem;
}

.live-color[b-n3bigcag7w] {
    width: 44px;
    height: 26px;
    border: none;
    padding: 0;
    background: none;
}

.live-switch[b-n3bigcag7w], .live-check[b-n3bigcag7w] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.live-btn[b-n3bigcag7w] {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 4px;
    padding: 4px 10px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.live-btn:disabled[b-n3bigcag7w] {
    opacity: 0.5;
    cursor: default;
}

.live-btn.small[b-n3bigcag7w] {
    padding: 2px 8px;
    font-size: 0.75rem;
}

.live-btn.primary[b-n3bigcag7w] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.live-btn.danger[b-n3bigcag7w] {
    color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
}

.live-link[b-n3bigcag7w] {
    border: none;
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 0 2px;
}

.live-chip[b-n3bigcag7w] {
    border: 1px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: transparent;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.75rem;
    cursor: pointer;
}

.live-item[b-n3bigcag7w] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: start;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    color: inherit;
    font: inherit;
    width: 100%;
}

.live-item:last-child[b-n3bigcag7w] {
    border-bottom: none;
}

.live-item.column[b-n3bigcag7w] {
    flex-direction: column;
    align-items: stretch;
}

.live-item.clickable[b-n3bigcag7w] {
    cursor: pointer;
}

.live-dot[b-n3bigcag7w] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
}

.live-km[b-n3bigcag7w] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.live-sponsored[b-n3bigcag7w] {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 0 6px;
    border-radius: 8px;
    background: #f5c518;
    color: #222;
    font-size: 0.68rem;
    font-weight: 700;
}

.live-messages[b-n3bigcag7w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.live-msg[b-n3bigcag7w] {
    max-width: 85%;
    padding: 4px 8px;
    border-radius: 8px;
    word-wrap: break-word;
}

.live-msg.mine[b-n3bigcag7w] {
    align-self: flex-end;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.live-msg.theirs[b-n3bigcag7w] {
    align-self: flex-start;
    background: var(--mud-palette-background-gray);
}

.live-time[b-n3bigcag7w] {
    display: block;
    opacity: 0.7;
    font-size: 0.68rem;
    text-align: end;
}
/* _content/AspireChatApp.Razor/Components/Live/LivePrivacyNoticeComp.razor.rz.scp.css */
/* =================================================================
                  LivePrivacyNoticeComp.razor.css
   The one-time location privacy notice (MudBlazor palette variables).
   ================================================================= */

.lloc-notice[b-8y57ccdc9u] {
    /* the PROFILE tab centres its text; these blocks read as paragraphs */
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.82rem;
}

.lloc-notice h4[b-8y57ccdc9u] {
    margin: 0;
    font-size: 0.95rem;
}

.lloc-notice ul[b-8y57ccdc9u] {
    margin: 0;
    padding-inline-start: 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lloc-actions[b-8y57ccdc9u] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lloc-btn[b-8y57ccdc9u] {
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-primary);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
}

.lloc-btn.primary[b-8y57ccdc9u] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.lloc-btn:disabled[b-8y57ccdc9u] {
    opacity: 0.6;
    cursor: default;
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Cards/AssignmentCardComponent.razor.rz.scp.css */
/* ============================================================
   ASSIGNMENT CARD COMPONENT STYLES

   Scoped styles for assignment card display in the assignments panel.
   Migrated from PathPlanningComp.razor.css for proper CSS isolation.
   ============================================================ */

/* Main card container */
.assignment-card[b-upyskrccch] {
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 25, 35, 0.92) 100%);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 5px solid rgba(105, 240, 174, 0.6);
}

.assignment-card:hover[b-upyskrccch] {
    background: linear-gradient(135deg, rgba(40, 45, 55, 0.98) 0%, rgba(30, 35, 45, 0.95) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08), -3px 0 12px rgba(105, 240, 174, 0.3);
}

/* Header section */
.assignment-header[b-upyskrccch] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Assignment name */
.assignment-name[b-upyskrccch] {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.3px;
}

/* Match percentage */
.assignment-match[b-upyskrccch] {
    color: #4CAF50;
    font-weight: 600;
}

/* Edit button */
.edit-btn[b-upyskrccch] {
    opacity: 0.7;
    padding: 4px !important;
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: rgba(66, 165, 245, 0.1) !important;
    transition: all 0.2s ease !important;
}

.edit-btn:hover[b-upyskrccch] {
    opacity: 1;
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.25) 0%, rgba(33, 150, 243, 0.3) 100%) !important;
    box-shadow: 0 2px 8px rgba(66, 165, 245, 0.3);
    transform: scale(1.05);
}

.assignment-card:hover .edit-btn[b-upyskrccch] {
    opacity: 1;
}

/* Details row (team, distance, ETA) */
.assignment-details[b-upyskrccch] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.detail-separator[b-upyskrccch] {
    color: rgba(255, 255, 255, 0.3);
}

/* Tags container */
.assignment-tags[b-upyskrccch] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Visit order badge */
.visit-order-badge[b-upyskrccch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-right: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* Larger variant for assignment panel */
.visit-order-badge.visit-order-large[b-upyskrccch] {
    min-width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 12px;
    margin-right: 8px;
}

/* RTL Support - Flip border sides on cards */
:global([dir="rtl"]) .assignment-card[b-upyskrccch] {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 5px solid rgba(105, 240, 174, 0.6);
}

/* RTL - Flip text alignment and spacing */
:global([dir="rtl"]) .detail-separator[b-upyskrccch] {
    margin-left: 0;
    margin-right: 8px;
    padding-left: 0;
    padding-right: 8px;
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Cards/HazardCardComponent.razor.rz.scp.css */
/* ============================================================
   HAZARD CARD COMPONENT STYLES

   Scoped styles for hazard card display in the hazards panel.
   Migrated from PathPlanningComp.razor.css for proper CSS isolation.
   ============================================================ */

/* Main card container */
.hazard-card[b-uqp29di99o] {
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 25, 35, 0.92) 100%);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    border-left: 5px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hazard-card:hover[b-uqp29di99o] {
    background: linear-gradient(135deg, rgba(40, 45, 55, 0.98) 0%, rgba(30, 35, 45, 0.95) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Urgency color variants */
.hazard-card.urgency-critical[b-uqp29di99o] {
    border-left-color: #ff1744;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), -3px 0 12px rgba(255, 23, 68, 0.3);
}

.hazard-card.urgency-high[b-uqp29di99o] {
    border-left-color: #ff9800;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), -3px 0 12px rgba(255, 152, 0, 0.25);
}

.hazard-card.urgency-medium[b-uqp29di99o] {
    border-left-color: #ffd740;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), -3px 0 12px rgba(255, 215, 64, 0.25);
}

.hazard-card.urgency-low[b-uqp29di99o] {
    border-left-color: #69f0ae;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), -3px 0 12px rgba(105, 240, 174, 0.25);
}

/* Header section */
.hazard-header[b-uqp29di99o] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Entity icon - CRITICAL: constrain image size */
.hazard-header img.entity-icon[b-uqp29di99o],
.hazard-header .entity-icon[b-uqp29di99o] {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Fallback icon when image fails */
.hazard-icon[b-uqp29di99o] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Hazard name */
.hazard-name[b-uqp29di99o] {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.3px;
}

/* Edit button */
.edit-btn[b-uqp29di99o] {
    opacity: 0.7;
    padding: 4px !important;
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: rgba(66, 165, 245, 0.1) !important;
    transition: all 0.2s ease !important;
}

.edit-btn:hover[b-uqp29di99o] {
    opacity: 1;
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.25) 0%, rgba(33, 150, 243, 0.3) 100%) !important;
    box-shadow: 0 2px 8px rgba(66, 165, 245, 0.3);
    transform: scale(1.05);
}

.hazard-card:hover .edit-btn[b-uqp29di99o] {
    opacity: 1;
}

/* Location display */
.hazard-location[b-uqp29di99o] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

/* Tags container */
.hazard-tags[b-uqp29di99o] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Assignments container */
.hazard-assignments[b-uqp29di99o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Individual assignment row */
.hazard-assigned[b-uqp29di99o] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #4CAF50;
}

.hazard-assignments .hazard-assigned[b-uqp29di99o] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.hazard-assignments .hazard-assigned:not(:first-child)[b-uqp29di99o] {
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

/* Clickable assignment styles */
.clickable-assignment[b-uqp29di99o] {
    cursor: pointer;
    border-radius: 4px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background-color 0.2s ease;
}

.clickable-assignment:hover[b-uqp29di99o] {
    background: rgba(255, 255, 255, 0.1);
}

/* Visit order badge */
.visit-order-badge[b-uqp29di99o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-right: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* Hover effect for visit order badge */
.clickable-assignment:hover .visit-order-badge[b-uqp29di99o] {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

/* Assigned entity icon (smaller than main icon) */
.assigned-entity-icon[b-uqp29di99o] {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Assigned team name */
.assigned-team[b-uqp29di99o] {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ETA display */
.assigned-eta[b-uqp29di99o] {
    color: #2196F3;
    margin-left: auto;
}

/* RTL Support - Flip border sides on cards */
:global([dir="rtl"]) .hazard-card[b-uqp29di99o] {
    border-left: none;
    border-right: 4px solid transparent;
}

:global([dir="rtl"]) .hazard-card.urgency-critical[b-uqp29di99o] {
    border-right-color: #ff1744;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), 3px 0 12px rgba(255, 23, 68, 0.3);
}

:global([dir="rtl"]) .hazard-card.urgency-high[b-uqp29di99o] {
    border-right-color: #ff9800;
}

:global([dir="rtl"]) .hazard-card.urgency-medium[b-uqp29di99o] {
    border-right-color: #ffd740;
}

:global([dir="rtl"]) .hazard-card.urgency-low[b-uqp29di99o] {
    border-right-color: #69f0ae;
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Cards/RescueTeamCardComponent.razor.rz.scp.css */
/* ============================================================
   RESCUE TEAM CARD COMPONENT STYLES

   Scoped styles for rescue team card display in the teams panel.
   Migrated from PathPlanningComp.razor.css for proper CSS isolation.
   ============================================================ */

/* Main card container */
.unit-card[b-v8v08ze2uy] {
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 25, 35, 0.92) 100%);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    border-left: 5px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.unit-card:hover[b-v8v08ze2uy] {
    background: linear-gradient(135deg, rgba(40, 45, 55, 0.98) 0%, rgba(30, 35, 45, 0.95) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Availability color variants */
.unit-card.availability-available[b-v8v08ze2uy] {
    border-left-color: #69f0ae;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), -3px 0 12px rgba(105, 240, 174, 0.25);
}

.unit-card.availability-deployed[b-v8v08ze2uy] {
    border-left-color: #42a5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), -3px 0 12px rgba(66, 165, 245, 0.25);
}

.unit-card.availability-standby[b-v8v08ze2uy] {
    border-left-color: #ff9800;
}

.unit-card.availability-enroute[b-v8v08ze2uy] {
    border-left-color: #ff9800;
}

.unit-card.availability-busy[b-v8v08ze2uy] {
    border-left-color: #ff1744;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), -3px 0 12px rgba(255, 23, 68, 0.25);
}

/* Header section */
.unit-header[b-v8v08ze2uy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Entity icon - CRITICAL: constrain image size */
.entity-icon[b-v8v08ze2uy] {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Unit name */
.unit-name[b-v8v08ze2uy] {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.3px;
}

/* Edit button */
.edit-btn[b-v8v08ze2uy] {
    opacity: 0.7;
    padding: 4px !important;
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: rgba(66, 165, 245, 0.1) !important;
    transition: all 0.2s ease !important;
}

.edit-btn:hover[b-v8v08ze2uy] {
    opacity: 1;
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.25) 0%, rgba(33, 150, 243, 0.3) 100%) !important;
    box-shadow: 0 2px 8px rgba(66, 165, 245, 0.3);
    transform: scale(1.05);
}

.unit-card:hover .edit-btn[b-v8v08ze2uy] {
    opacity: 1;
}

/* Location display */
.unit-location[b-v8v08ze2uy] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

/* Details row (crew size, type) */
.unit-details[b-v8v08ze2uy] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.detail-separator[b-v8v08ze2uy] {
    color: rgba(255, 255, 255, 0.3);
}

/* Assignments container */
.team-assignments[b-v8v08ze2uy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Individual assignment row */
.unit-assignment[b-v8v08ze2uy] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #2196F3;
}

.team-assignments .unit-assignment[b-v8v08ze2uy] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.team-assignments .unit-assignment:not(:first-child)[b-v8v08ze2uy] {
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

/* Clickable assignment styles */
.clickable-assignment[b-v8v08ze2uy] {
    cursor: pointer;
    border-radius: 4px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background-color 0.2s ease;
}

.clickable-assignment:hover[b-v8v08ze2uy] {
    background: rgba(255, 255, 255, 0.1);
}

/* Visit order badge */
.visit-order-badge[b-v8v08ze2uy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-right: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* Hover effect for visit order badge */
.clickable-assignment:hover .visit-order-badge[b-v8v08ze2uy] {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

/* Assigned entity icon (smaller than main icon) */
.assigned-entity-icon[b-v8v08ze2uy] {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Hazard label and name styling */
.hazard-label[b-v8v08ze2uy] {
    color: #ff9800;
    font-weight: 500;
}

.assigned-hazard-name[b-v8v08ze2uy] {
    font-weight: 600;
    color: #ff9800;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* RTL Support - Flip border sides on cards */
:global([dir="rtl"]) .unit-card[b-v8v08ze2uy] {
    border-left: none;
    border-right: 4px solid transparent;
}

:global([dir="rtl"]) .unit-card.availability-available[b-v8v08ze2uy] {
    border-right-color: #69f0ae;
}

:global([dir="rtl"]) .unit-card.availability-deployed[b-v8v08ze2uy] {
    border-right-color: #42a5f5;
}

:global([dir="rtl"]) .unit-card.availability-standby[b-v8v08ze2uy] {
    border-right-color: #ff9800;
}

:global([dir="rtl"]) .unit-card.availability-enroute[b-v8v08ze2uy] {
    border-right-color: #ff9800;
}

:global([dir="rtl"]) .unit-card.availability-busy[b-v8v08ze2uy] {
    border-right-color: #ff1744;
}

/* RTL - Flip text alignment and spacing */
:global([dir="rtl"]) .detail-separator[b-v8v08ze2uy] {
    margin-left: 0;
    margin-right: 8px;
    padding-left: 0;
    padding-right: 8px;
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Cards/ZoneCardComponent.razor.rz.scp.css */
/* ============================================================
   ZONE CARD COMPONENT STYLES

   Scoped styles for zone card display in the zones panel.
   Migrated from PathPlanningComp.razor.css for proper CSS isolation.
   ============================================================ */

/* Main card container */
.zone-card[b-gk6r3zpswo] {
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 25, 35, 0.92) 100%);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    border-left: 5px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.zone-card:hover[b-gk6r3zpswo] {
    background: linear-gradient(135deg, rgba(40, 45, 55, 0.98) 0%, rgba(30, 35, 45, 0.95) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Zone type color variants */
.zone-card.zone-no-fly[b-gk6r3zpswo] {
    border-left-color: #ff1744;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), -3px 0 12px rgba(255, 23, 68, 0.3);
}

.zone-card.zone-no-drive[b-gk6r3zpswo] {
    border-left-color: #ff9800;
}

.zone-card.zone-safe[b-gk6r3zpswo] {
    border-left-color: #69f0ae;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), -3px 0 12px rgba(105, 240, 174, 0.25);
}

.zone-card.zone-buffer[b-gk6r3zpswo] {
    border-left-color: #9c27b0;
}

.zone-card.zone-main[b-gk6r3zpswo] {
    border-left-color: #42a5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), -3px 0 12px rgba(66, 165, 245, 0.25);
}

/* Header section */
.zone-header[b-gk6r3zpswo] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Zone name */
.zone-name[b-gk6r3zpswo] {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.3px;
}

/* Edit button */
.edit-btn[b-gk6r3zpswo] {
    opacity: 0.7;
    padding: 4px !important;
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: rgba(66, 165, 245, 0.1) !important;
    transition: all 0.2s ease !important;
}

.edit-btn:hover[b-gk6r3zpswo] {
    opacity: 1;
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.25) 0%, rgba(33, 150, 243, 0.3) 100%) !important;
    box-shadow: 0 2px 8px rgba(66, 165, 245, 0.3);
    transform: scale(1.05);
}

.zone-card:hover .edit-btn[b-gk6r3zpswo] {
    opacity: 1;
}

/* Details row (shape, radius) */
.zone-details[b-gk6r3zpswo] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
}

.detail-separator[b-gk6r3zpswo] {
    color: rgba(255, 255, 255, 0.3);
}

/* Location display */
.zone-location[b-gk6r3zpswo] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Zone type colors for chips */
.zone-type-no-fly[b-gk6r3zpswo] {
    background-color: rgba(244, 67, 54, 0.2) !important;
    color: #f44336 !important;
}

.zone-type-no-drive[b-gk6r3zpswo] {
    background-color: rgba(255, 152, 0, 0.2) !important;
    color: #ff9800 !important;
}

.zone-type-safe[b-gk6r3zpswo] {
    background-color: rgba(76, 175, 80, 0.2) !important;
    color: #4caf50 !important;
}

.zone-type-buffer[b-gk6r3zpswo] {
    background-color: rgba(156, 39, 176, 0.2) !important;
    color: #9c27b0 !important;
}

.zone-type-main[b-gk6r3zpswo] {
    background-color: rgba(33, 150, 243, 0.2) !important;
    color: #2196f3 !important;
}

/* RTL Support - Flip border sides on cards */
:global([dir="rtl"]) .zone-card[b-gk6r3zpswo] {
    border-left: none;
    border-right: 4px solid transparent;
}

:global([dir="rtl"]) .zone-card.zone-no-fly[b-gk6r3zpswo] {
    border-right-color: #ff1744;
}

:global([dir="rtl"]) .zone-card.zone-no-drive[b-gk6r3zpswo] {
    border-right-color: #ff9800;
}

:global([dir="rtl"]) .zone-card.zone-safe[b-gk6r3zpswo] {
    border-right-color: #69f0ae;
}

:global([dir="rtl"]) .zone-card.zone-buffer[b-gk6r3zpswo] {
    border-right-color: #9c27b0;
}

:global([dir="rtl"]) .zone-card.zone-main[b-gk6r3zpswo] {
    border-right-color: #2196f3;
}

/* RTL - Flip text alignment and spacing */
:global([dir="rtl"]) .detail-separator[b-gk6r3zpswo] {
    margin-left: 0;
    margin-right: 8px;
    padding-left: 0;
    padding-right: 8px;
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Common/LocationInputComponent.razor.rz.scp.css */
/* ============================================================
   LOCATION INPUT COMPONENT - SCOPED CSS
   This file contains all scoped styles for LocationInputComponent
   ============================================================ */

/* ============================================================
   Vertical Layout Container
   ============================================================ */

/* Vertical container for location options */
.location-input-vertical[b-o5hx9pfo9f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============================================================
   Location Option Containers
   ============================================================ */

/* Each location option container (radio + controls) */
.location-option-container[b-o5hx9pfo9f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease;
}

.location-option-container:hover[b-o5hx9pfo9f] {
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   Controls Row within Each Option
   ============================================================ */

.location-controls-row[b-o5hx9pfo9f] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 32px;
    flex-wrap: wrap;
}

/* Ensure address text field takes full available width */
.location-controls-row[b-o5hx9pfo9f]  .mud-text-field {
    flex: 1 1 auto;
    min-width: 250px;
    max-width: 100%;
}

/* ============================================================
   Location Success Indicator
   ============================================================ */

.location-success-indicator[b-o5hx9pfo9f] {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 4px;
}

.location-success-text[b-o5hx9pfo9f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ============================================================
   Legacy Location Input Rows Layout (if still used)
   ============================================================ */

.location-input-rows[b-o5hx9pfo9f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.location-input-row[b-o5hx9pfo9f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s ease;
}

.location-input-row:hover[b-o5hx9pfo9f] {
    background: rgba(255, 255, 255, 0.08);
}

[b-o5hx9pfo9f] .location-input-row .mud-button-root {
    white-space: nowrap;
}

/* ============================================================
   RTL Support
   ============================================================ */

/* Fix: Use :host-context([dir="rtl"]) for Blazor scoped CSS RTL support */
:host-context([dir="rtl"]) .location-controls-row[b-o5hx9pfo9f] {
    padding-left: 0;
    padding-right: 32px;
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Dialogs/AlgorithmDialogs.razor.rz.scp.css */
/* ================================================
   ALGORITHM DIALOGS - SCOPED CSS
   This file contains scoped styles for AlgorithmDialogs component
   ================================================ */

/* Dialog title bar styles */
.dialog-title-bar[b-5dw8f8tsc6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

[b-5dw8f8tsc6] .dialog-title-bar .mud-typography {
    flex: 1;
}

/* Draggable dialog styles */
[b-5dw8f8tsc6] .draggable-dialog .mud-dialog {
    /* DO NOT set position here - JavaScript controls it (position: fixed) */
    margin: 0 !important;
}

[b-5dw8f8tsc6] .draggable-dialog .mud-dialog-title {
    cursor: move;
    user-select: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    border-radius: 4px 4px 0 0;
}

[b-5dw8f8tsc6] .draggable-dialog .mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* RTL support */
:global([dir="rtl"]) .dialog-title-bar[b-5dw8f8tsc6] {
    flex-direction: row-reverse;
}

/* ============================================================
   USER-REQUESTED DIALOG FIXES
   ============================================================ */

/* Fix #1: Increase dialog input field heights */
[b-5dw8f8tsc6] .mud-dialog .mud-input-control .mud-input {
    min-height: 56px !important;
}

[b-5dw8f8tsc6] .mud-dialog .mud-input-outlined .mud-input {
    padding: 16px 14px !important;
}

[b-5dw8f8tsc6] .mud-dialog .mud-select .mud-input {
    min-height: 56px !important;
    padding: 16px 14px !important;
}

[b-5dw8f8tsc6] .mud-dialog .mud-input-control-input-container {
    min-height: 56px !important;
}

[b-5dw8f8tsc6] .mud-dialog .mud-input-outlined {
    min-height: 56px !important;
}

/* Fix #2: Dialog title - keep close button inline with title */
[b-5dw8f8tsc6] .mud-dialog-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
}

[b-5dw8f8tsc6] .mud-dialog-title > * {
    flex-shrink: 1 !important;
}

[b-5dw8f8tsc6] .mud-dialog-title .mud-icon-button {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-5dw8f8tsc6] .mud-dialog-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important; /* Buttons on right for LTR */
    padding: 16px 24px !important;
    gap: 12px !important;
}

[b-5dw8f8tsc6] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-5dw8f8tsc6]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Dialogs/AssignmentCandidatesDialog.razor.rz.scp.css */
/* ================================================
   Assignment Candidates Dialog Styles
   Shows candidate teams during auto-assignment
   ================================================ */

[b-6js3cix33g] .assignment-candidates-dialog {
    min-width: 700px;
}

[b-6js3cix33g] .candidates-table {
    max-height: 400px;
    overflow-y: auto;
}

[b-6js3cix33g] .selected-row {
    background-color: rgba(76, 175, 80, 0.15) !important;
}

[b-6js3cix33g] .selected-row:hover {
    background-color: rgba(76, 175, 80, 0.25) !important;
}

.dialog-title-bar[b-6js3cix33g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.title-left[b-6js3cix33g] {
    display: flex;
    align-items: center;
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Dialogs/AssignmentDialogs.razor.rz.scp.css */
/* ================================================
   ASSIGNMENT DIALOGS - SCOPED CSS
   This file contains scoped styles for AssignmentDialogs component
   ================================================ */

/* Dialog title bar styles */
.dialog-title-bar[b-jdtefnr6ab] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

[b-jdtefnr6ab] .dialog-title-bar .mud-typography {
    flex: 1;
}

/* Draggable dialog styles */
[b-jdtefnr6ab] .draggable-dialog .mud-dialog {
    /* DO NOT set position here - JavaScript controls it (position: fixed) */
    margin: 0 !important;
}

[b-jdtefnr6ab] .draggable-dialog .mud-dialog-title {
    cursor: move;
    user-select: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    border-radius: 4px 4px 0 0;
}

[b-jdtefnr6ab] .draggable-dialog .mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Dialog styles for location picking */
.dialog-picking-location[b-jdtefnr6ab] {
    position: fixed;
    top: 80px;
    left: 20px;
    z-index: 9999;
    pointer-events: none;
}

[b-jdtefnr6ab] .dialog-picking-location .mud-dialog-container {
    position: static !important;
    display: block !important;
    pointer-events: none !important;
}

[b-jdtefnr6ab] .dialog-picking-location .mud-overlay {
    display: none !important;
    pointer-events: none !important;
}

[b-jdtefnr6ab] .dialog-picking-location .mud-overlay-dialog {
    pointer-events: none !important;
    background: transparent !important;
}

[b-jdtefnr6ab] .dialog-picking-location .mud-dialog {
    margin: 0 !important;
    max-width: 420px !important;
    min-width: 380px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    border: 2px solid #2196f3 !important;
    border-radius: 8px !important;
    animation: slide-in-dialog-b-jdtefnr6ab 0.3s ease-out;
    pointer-events: auto !important;
}

@keyframes slide-in-dialog-b-jdtefnr6ab {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Edit dialog assignments section */
.edit-dialog-assignments[b-jdtefnr6ab] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.edit-assignment-item[b-jdtefnr6ab] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.assigned-entity-icon[b-jdtefnr6ab] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.assignment-entity-name[b-jdtefnr6ab] {
    flex: 1;
    font-weight: 500;
}

.select-item-icon[b-jdtefnr6ab] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* MudBlazor select item icons - deep selectors for internal rendering */
[b-jdtefnr6ab] .mud-select .select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

[b-jdtefnr6ab] .mud-select-item .select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

[b-jdtefnr6ab] .mud-input-control img {
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
}

[b-jdtefnr6ab] .mud-select img.select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* RTL support */
:global([dir="rtl"]) .dialog-title-bar[b-jdtefnr6ab] {
    flex-direction: row-reverse;
}

:global([dir="rtl"]) .edit-assignment-item[b-jdtefnr6ab] {
    flex-direction: row-reverse;
}

:global([dir="rtl"]) .dialog-picking-location[b-jdtefnr6ab] {
    left: auto;
    right: 20px;
}

:global([dir="rtl"]) @keyframes slide-in-dialog[b-jdtefnr6ab] {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to[b-jdtefnr6ab] {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================================
   USER-REQUESTED DIALOG FIXES
   ============================================================ */

/* Fix #1: Increase dialog input field heights */
[b-jdtefnr6ab] .mud-dialog .mud-input-control .mud-input {
    min-height: 56px !important;
}

[b-jdtefnr6ab] .mud-dialog .mud-input-outlined .mud-input {
    padding: 16px 14px !important;
}

[b-jdtefnr6ab] .mud-dialog .mud-select .mud-input {
    min-height: 56px !important;
    padding: 16px 14px !important;
}

[b-jdtefnr6ab] .mud-dialog .mud-input-control-input-container {
    min-height: 56px !important;
}

[b-jdtefnr6ab] .mud-dialog .mud-input-outlined {
    min-height: 56px !important;
}

/* Fix #2: Dialog title - keep close button inline with title */
[b-jdtefnr6ab] .mud-dialog-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
}

[b-jdtefnr6ab] .mud-dialog-title > * {
    flex-shrink: 1 !important;
}

[b-jdtefnr6ab] .mud-dialog-title .mud-icon-button {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-jdtefnr6ab] .mud-dialog-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important; /* Buttons on right for LTR */
    padding: 16px 24px !important;
    gap: 12px !important;
}

[b-jdtefnr6ab] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-jdtefnr6ab]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Dialogs/HazardDialogs.razor.rz.scp.css */
/* ================================================
   HAZARD DIALOGS - SCOPED CSS
   This file contains scoped styles for HazardDialogs component
   ================================================ */

/* Dialog title bar styles */
.dialog-title-bar[b-b1apsn0pd2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

[b-b1apsn0pd2] .dialog-title-bar .mud-typography {
    flex: 1;
}

/* Draggable dialog styles */
[b-b1apsn0pd2] .draggable-dialog .mud-dialog {
    /* DO NOT set position here - JavaScript controls it (position: fixed) */
    margin: 0 !important;
}

[b-b1apsn0pd2] .draggable-dialog .mud-dialog-title {
    cursor: move;
    user-select: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    border-radius: 4px 4px 0 0;
}

[b-b1apsn0pd2] .draggable-dialog .mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Dialog styles for location picking */
.dialog-picking-location[b-b1apsn0pd2] {
    position: fixed;
    top: 80px;
    left: 20px;
    z-index: 9999;
    pointer-events: none;
}

[b-b1apsn0pd2] .dialog-picking-location .mud-dialog-container {
    position: static !important;
    display: block !important;
    pointer-events: none !important;
}

[b-b1apsn0pd2] .dialog-picking-location .mud-overlay {
    display: none !important;
    pointer-events: none !important;
}

[b-b1apsn0pd2] .dialog-picking-location .mud-overlay-dialog {
    pointer-events: none !important;
    background: transparent !important;
}

[b-b1apsn0pd2] .dialog-picking-location .mud-dialog {
    margin: 0 !important;
    max-width: 420px !important;
    min-width: 380px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    border: 2px solid #2196f3 !important;
    border-radius: 8px !important;
    animation: slide-in-dialog-b-b1apsn0pd2 0.3s ease-out;
    pointer-events: auto !important;
}

@keyframes slide-in-dialog-b-b1apsn0pd2 {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Edit dialog assignments section */
.edit-dialog-assignments[b-b1apsn0pd2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.edit-assignment-item[b-b1apsn0pd2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   FIX CONTROL HEIGHTS IN DIALOGS
   Ensure all form controls have adequate height for content
   ============================================================ */

/* MudSelect - Fix dropdown height */
[b-b1apsn0pd2] .mud-select {
    min-height: 56px !important;
}

[b-b1apsn0pd2] .mud-select .mud-select-input {
    min-height: 56px !important;
    height: 56px !important;
    padding: 16px 14px !important;
    line-height: 24px !important;
}

[b-b1apsn0pd2] .mud-select .mud-input-slot {
    min-height: 56px !important;
    height: 56px !important;
}

[b-b1apsn0pd2] .mud-input-control .mud-select {
    min-height: 56px !important;
}

[b-b1apsn0pd2] .mud-select-input {
    min-height: 56px !important;
}

/* MudTextField - Fix text input height */
[b-b1apsn0pd2] .mud-text-field {
    min-height: 56px !important;
}

[b-b1apsn0pd2] .mud-text-field .mud-input-root {
    min-height: 56px !important;
    height: 56px !important;
}

[b-b1apsn0pd2] .mud-text-field input {
    min-height: 24px !important;
    height: 24px !important;
    padding: 16px 14px !important;
    line-height: 24px !important;
}

[b-b1apsn0pd2] .mud-input-outlined .mud-input-root {
    min-height: 56px !important;
}

/* MudNumericField - Fix numeric input height */
[b-b1apsn0pd2] .mud-input-control-input-container {
    min-height: 56px !important;
    height: 56px !important;
}

[b-b1apsn0pd2] .mud-input {
    min-height: 56px !important;
    height: 56px !important;
}

[b-b1apsn0pd2] .mud-input input {
    padding: 16px 14px !important;
    line-height: 24px !important;
}

[b-b1apsn0pd2] .mud-input-root {
    min-height: 56px !important;
}

/* Fix label positioning */
[b-b1apsn0pd2] .mud-input-label {
    transform: translateY(-9px) scale(0.75) !important;
}

[b-b1apsn0pd2] .mud-input-label-inputcontrol {
    top: -6px !important;
}

/* Dialog content padding */
[b-b1apsn0pd2] .mud-dialog-content {
    padding: 24px !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 180px) !important;
}

/* Dialog actions padding */
[b-b1apsn0pd2] .mud-dialog-actions {
    padding: 16px 24px !important;
}

/* Margin bottom for form fields */
[b-b1apsn0pd2] .mb-3 {
    margin-bottom: 16px !important;
}

/* Fix select items in dropdown */
[b-b1apsn0pd2] .mud-list-item {
    min-height: 56px !important;
    height: auto !important;
    padding: 12px 16px !important;
}

[b-b1apsn0pd2] .mud-list-item-text {
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    line-height: 1.1 !important;
}

[b-b1apsn0pd2] .mud-list-item-icon {
    min-width: 32px !important;
}

.assigned-entity-icon[b-b1apsn0pd2] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.assignment-entity-name[b-b1apsn0pd2] {
    flex: 1;
    font-weight: 500;
}

.select-item-icon[b-b1apsn0pd2] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* MudBlazor select item icons - deep selectors for internal rendering */
[b-b1apsn0pd2] .mud-select .select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

[b-b1apsn0pd2] .mud-select-item .select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

[b-b1apsn0pd2] .mud-input-control img {
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
}

[b-b1apsn0pd2] .mud-select img.select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* RTL support */
:global([dir="rtl"]) .dialog-title-bar[b-b1apsn0pd2] {
    flex-direction: row-reverse;
}

:global([dir="rtl"]) .edit-assignment-item[b-b1apsn0pd2] {
    flex-direction: row-reverse;
}

:global([dir="rtl"]) .dialog-picking-location[b-b1apsn0pd2] {
    left: auto;
    right: 20px;
}

:global([dir="rtl"]) @keyframes slide-in-dialog[b-b1apsn0pd2] {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to[b-b1apsn0pd2] {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================================
   USER-REQUESTED DIALOG FIXES
   Using :global() to escape CSS isolation since MudDialog
   renders in a portal outside the component tree.
   ============================================================ */

/* Fix #1: Increase dialog input field heights */
:global(.mud-dialog .mud-input-control .mud-input)[b-b1apsn0pd2] {
    min-height: 56px !important;
}

:global(.mud-dialog .mud-input-outlined .mud-input)[b-b1apsn0pd2] {
    padding: 16px 14px !important;
}

:global(.mud-dialog .mud-select .mud-input)[b-b1apsn0pd2] {
    min-height: 56px !important;
    padding: 16px 14px !important;
}

:global(.mud-dialog .mud-input-control-input-container)[b-b1apsn0pd2] {
    min-height: 56px !important;
}

:global(.mud-dialog .mud-input-outlined)[b-b1apsn0pd2] {
    min-height: 56px !important;
}

/* Fix #2: Dialog title - keep close button inline with title */
:global(.mud-dialog-title)[b-b1apsn0pd2] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
}

:global(.mud-dialog-title > *)[b-b1apsn0pd2] {
    flex-shrink: 1 !important;
}

:global(.mud-dialog-title .mud-icon-button)[b-b1apsn0pd2] {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Fix #3: Dialog actions - buttons on opposite sides */
:global(.mud-dialog-actions)[b-b1apsn0pd2] {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important; /* Buttons on right for LTR */
    padding: 16px 24px !important;
    gap: 12px !important;
}

:global(.mud-dialog-actions .mud-button)[b-b1apsn0pd2] {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"] .mud-dialog-actions)[b-b1apsn0pd2] {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Dialogs/ProjectDialogs.razor.rz.scp.css */
/* ================================================
   PROJECT DIALOGS - SCOPED CSS
   This file contains scoped styles for ProjectDialogs component
   ================================================ */

/* Dialog title bar styles */
.dialog-title-bar[b-xwujmqhy7y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

[b-xwujmqhy7y] .dialog-title-bar .mud-typography {
    flex: 1;
}

/* Draggable dialog styles */
[b-xwujmqhy7y] .draggable-dialog .mud-dialog {
    /* DO NOT set position here - JavaScript controls it (position: fixed) */
    margin: 0 !important;
}

[b-xwujmqhy7y] .draggable-dialog .mud-dialog-title {
    cursor: move;
    user-select: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    border-radius: 4px 4px 0 0;
}

[b-xwujmqhy7y] .draggable-dialog .mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* RTL support */
:global([dir="rtl"]) .dialog-title-bar[b-xwujmqhy7y] {
    flex-direction: row-reverse;
}

/* ============================================================
   USER-REQUESTED DIALOG FIXES
   ============================================================ */

/* Fix #1: Increase dialog input field heights */
[b-xwujmqhy7y] .mud-dialog .mud-input-control .mud-input {
    min-height: 56px !important;
}

[b-xwujmqhy7y] .mud-dialog .mud-input-outlined .mud-input {
    padding: 16px 14px !important;
}

[b-xwujmqhy7y] .mud-dialog .mud-select .mud-input {
    min-height: 56px !important;
    padding: 16px 14px !important;
}

[b-xwujmqhy7y] .mud-dialog .mud-input-control-input-container {
    min-height: 56px !important;
}

[b-xwujmqhy7y] .mud-dialog .mud-input-outlined {
    min-height: 56px !important;
}

/* Fix #2: Dialog title - keep close button inline with title */
[b-xwujmqhy7y] .mud-dialog-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
}

[b-xwujmqhy7y] .mud-dialog-title > * {
    flex-shrink: 1 !important;
}

[b-xwujmqhy7y] .mud-dialog-title .mud-icon-button {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-xwujmqhy7y] .mud-dialog-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important; /* Buttons on right for LTR */
    padding: 16px 24px !important;
    gap: 12px !important;
}

[b-xwujmqhy7y] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-xwujmqhy7y]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Dialogs/RescueTeamDialogs.razor.rz.scp.css */
/* ================================================
   RESCUE TEAM DIALOGS - SCOPED CSS
   This file contains scoped styles for RescueTeamDialogs component
   ================================================ */

/* Dialog title bar styles */
.dialog-title-bar[b-10u6ul9ld1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

[b-10u6ul9ld1] .dialog-title-bar .mud-typography {
    flex: 1;
}

/* Draggable dialog styles */
[b-10u6ul9ld1] .draggable-dialog .mud-dialog {
    /* DO NOT set position here - JavaScript controls it (position: fixed) */
    margin: 0 !important;
}

[b-10u6ul9ld1] .draggable-dialog .mud-dialog-title {
    cursor: move;
    user-select: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    border-radius: 4px 4px 0 0;
}

[b-10u6ul9ld1] .draggable-dialog .mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Dialog styles for location picking */
.dialog-picking-location[b-10u6ul9ld1] {
    position: fixed;
    top: 80px;
    left: 20px;
    z-index: 9999;
    pointer-events: none;
}

[b-10u6ul9ld1] .dialog-picking-location .mud-dialog-container {
    position: static !important;
    display: block !important;
    pointer-events: none !important;
}

[b-10u6ul9ld1] .dialog-picking-location .mud-overlay {
    display: none !important;
    pointer-events: none !important;
}

[b-10u6ul9ld1] .dialog-picking-location .mud-overlay-dialog {
    pointer-events: none !important;
    background: transparent !important;
}

[b-10u6ul9ld1] .dialog-picking-location .mud-dialog {
    margin: 0 !important;
    max-width: 420px !important;
    min-width: 380px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    border: 2px solid #2196f3 !important;
    border-radius: 8px !important;
    animation: slide-in-dialog-b-10u6ul9ld1 0.3s ease-out;
    pointer-events: auto !important;
}

@keyframes slide-in-dialog-b-10u6ul9ld1 {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Edit dialog assignments section */
.edit-dialog-assignments[b-10u6ul9ld1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.edit-assignment-item[b-10u6ul9ld1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   FIX CONTROL HEIGHTS IN DIALOGS
   Ensure all form controls have adequate height for content
   ============================================================ */

/* MudSelect - Fix dropdown height */
[b-10u6ul9ld1] .mud-select {
    min-height: 56px !important;
}

[b-10u6ul9ld1] .mud-select .mud-select-input {
    min-height: 56px !important;
    height: 56px !important;
    padding: 16px 14px !important;
    line-height: 24px !important;
}

[b-10u6ul9ld1] .mud-select .mud-input-slot {
    min-height: 56px !important;
    height: 56px !important;
}

[b-10u6ul9ld1] .mud-input-control .mud-select {
    min-height: 56px !important;
}

[b-10u6ul9ld1] .mud-select-input {
    min-height: 56px !important;
}

/* MudTextField - Fix text input height */
[b-10u6ul9ld1] .mud-text-field {
    min-height: 56px !important;
}

[b-10u6ul9ld1] .mud-text-field .mud-input-root {
    min-height: 56px !important;
    height: 56px !important;
}

[b-10u6ul9ld1] .mud-text-field input {
    min-height: 24px !important;
    height: 24px !important;
    padding: 16px 14px !important;
    line-height: 24px !important;
}

[b-10u6ul9ld1] .mud-input-outlined .mud-input-root {
    min-height: 56px !important;
}

/* MudNumericField - Fix numeric input height */
[b-10u6ul9ld1] .mud-input-control-input-container {
    min-height: 56px !important;
    height: 56px !important;
}

[b-10u6ul9ld1] .mud-input {
    min-height: 56px !important;
    height: 56px !important;
}

[b-10u6ul9ld1] .mud-input input {
    padding: 16px 14px !important;
    line-height: 24px !important;
}

[b-10u6ul9ld1] .mud-input-root {
    min-height: 56px !important;
}

/* Fix label positioning */
[b-10u6ul9ld1] .mud-input-label {
    transform: translateY(-9px) scale(0.75) !important;
}

[b-10u6ul9ld1] .mud-input-label-inputcontrol {
    top: -6px !important;
}

/* Dialog content padding */
[b-10u6ul9ld1] .mud-dialog-content {
    padding: 24px !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 180px) !important;
}

/* Dialog actions padding */
[b-10u6ul9ld1] .mud-dialog-actions {
    padding: 16px 24px !important;
}

/* Margin bottom for form fields */
[b-10u6ul9ld1] .mb-3 {
    margin-bottom: 16px !important;
}

/* Fix select items in dropdown */
[b-10u6ul9ld1] .mud-list-item {
    min-height: 56px !important;
    height: auto !important;
    padding: 12px 16px !important;
}

[b-10u6ul9ld1] .mud-list-item-text {
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    line-height: 1.1 !important;
}

[b-10u6ul9ld1] .mud-list-item-icon {
    min-width: 32px !important;
}

.assigned-entity-icon[b-10u6ul9ld1] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.assignment-entity-name[b-10u6ul9ld1] {
    flex: 1;
    font-weight: 500;
}

.select-item-icon[b-10u6ul9ld1] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* MudBlazor select item icons - deep selectors for internal rendering */
[b-10u6ul9ld1] .mud-select .select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

[b-10u6ul9ld1] .mud-select-item .select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

[b-10u6ul9ld1] .mud-input-control img {
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
}

[b-10u6ul9ld1] .mud-select img.select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* RTL support */
:global([dir="rtl"]) .dialog-title-bar[b-10u6ul9ld1] {
    flex-direction: row-reverse;
}

:global([dir="rtl"]) .edit-assignment-item[b-10u6ul9ld1] {
    flex-direction: row-reverse;
}

:global([dir="rtl"]) .dialog-picking-location[b-10u6ul9ld1] {
    left: auto;
    right: 20px;
}

:global([dir="rtl"]) @keyframes slide-in-dialog[b-10u6ul9ld1] {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to[b-10u6ul9ld1] {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================================
   USER-REQUESTED DIALOG FIXES
   ============================================================ */

/* Fix #1: Increase dialog input field heights */
[b-10u6ul9ld1] .mud-dialog .mud-input-control .mud-input {
    min-height: 56px !important;
}

[b-10u6ul9ld1] .mud-dialog .mud-input-outlined .mud-input {
    padding: 16px 14px !important;
}

[b-10u6ul9ld1] .mud-dialog .mud-select .mud-input {
    min-height: 56px !important;
    padding: 16px 14px !important;
}

[b-10u6ul9ld1] .mud-dialog .mud-input-control-input-container {
    min-height: 56px !important;
}

[b-10u6ul9ld1] .mud-dialog .mud-input-outlined {
    min-height: 56px !important;
}

/* Fix #2: Dialog title - keep close button inline with title */
[b-10u6ul9ld1] .mud-dialog-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
}

[b-10u6ul9ld1] .mud-dialog-title > * {
    flex-shrink: 1 !important;
}

[b-10u6ul9ld1] .mud-dialog-title .mud-icon-button {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-10u6ul9ld1] .mud-dialog-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important; /* Buttons on right for LTR */
    padding: 16px 24px !important;
    gap: 12px !important;
}

[b-10u6ul9ld1] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-10u6ul9ld1]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}

/* ============================================================
   FIX ADD BUTTON VISIBILITY IN HAZARD ASSIGNMENT SECTION
   Ensure the Add button remains visible when MudSelect is focused
   ============================================================ */

/* Container for the add hazard section */
.add-hazard-container[b-10u6ul9ld1] {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 56px !important;
    flex-wrap: nowrap !important;
}

/* Ensure the Add button is always visible */
.add-hazard-btn[b-10u6ul9ld1] {
    flex-shrink: 0 !important;
    min-width: 100px !important;
    height: 40px !important;
    z-index: 1 !important;
    position: relative !important;
}

/* MudSelect should not overflow */
.add-hazard-container[b-10u6ul9ld1]  .mud-select {
    flex: 1 !important;
    min-width: 0 !important;
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Dialogs/RoutePlanDialog.razor.rz.scp.css */
/* ================================================
   ROUTE PLAN DIALOG - SCOPED CSS
   This file contains scoped styles for RoutePlanDialog component
   Pattern: Matches RescueTeamDialogs.razor.css structure
   ================================================ */

/* ============================================================
   DIALOG TITLE BAR
   ============================================================ */

.dialog-title-bar[b-rmvqh7ipyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

.dialog-title-bar .title-left[b-rmvqh7ipyq] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.dialog-title-bar .title-left .mud-typography[b-rmvqh7ipyq] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialog-title-bar .title-buttons[b-rmvqh7ipyq] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}

.dialog-title-bar .title-buttons .mud-icon-button[b-rmvqh7ipyq] {
    color: rgba(255, 255, 255, 0.9) !important;
}

.dialog-title-bar .title-buttons .mud-icon-button:hover[b-rmvqh7ipyq] {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================================
   DRAGGABLE DIALOG BASE STYLES
   ============================================================ */

[b-rmvqh7ipyq] .draggable-dialog .mud-dialog {
    margin: 0 !important;
}

[b-rmvqh7ipyq] .draggable-dialog .mud-dialog-title {
    cursor: move;
    user-select: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    border-radius: 4px 4px 0 0;
}

[b-rmvqh7ipyq] .draggable-dialog .mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   RESIZABLE DIALOG STYLES
   ============================================================ */

[b-rmvqh7ipyq] .resizable .mud-dialog {
    resize: both;
    overflow: auto;
    min-width: 400px;
    min-height: 300px;
    max-width: 95vw;
    max-height: 90vh;
}

[b-rmvqh7ipyq] .resizable .mud-dialog-content {
    overflow: auto !important;
    flex: 1 1 auto;
}

/* ============================================================
   MAXIMIZED DIALOG STYLES
   ============================================================ */

[b-rmvqh7ipyq] .maximized .mud-dialog {
    width: 95vw !important;
    height: 90vh !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    resize: none;
}

[b-rmvqh7ipyq] .maximized .mud-dialog-content {
    max-height: calc(90vh - 180px) !important;
    overflow-y: auto !important;
}

/* ============================================================
   MINIMIZED DIALOG STYLES
   ============================================================ */

[b-rmvqh7ipyq] .minimized .mud-dialog {
    width: auto !important;
    min-width: 300px !important;
    max-width: 400px !important;
    resize: none;
}

[b-rmvqh7ipyq] .minimized .mud-dialog-content {
    display: none !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

[b-rmvqh7ipyq] .minimized .mud-dialog-actions {
    display: none !important;
    padding: 0 !important;
}

[b-rmvqh7ipyq] .minimized .mud-dialog-title {
    border-radius: 4px !important;
}

/* ============================================================
   DIALOG CONTENT AND ACTIONS
   ============================================================ */

[b-rmvqh7ipyq] .route-plan-dialog .mud-dialog-content {
    padding: 24px !important;
    overflow-y: auto !important;
    max-height: calc(90vh - 180px) !important;
}

[b-rmvqh7ipyq] .route-plan-dialog .mud-dialog-actions {
    padding: 16px 24px !important;
}

/* ============================================================
   DIALOG TITLE FIXES
   ============================================================ */

[b-rmvqh7ipyq] .route-plan-dialog .mud-dialog-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
}

[b-rmvqh7ipyq] .route-plan-dialog .mud-dialog-title > * {
    flex-shrink: 1 !important;
}

/* ============================================================
   TABLE STYLES
   ============================================================ */

[b-rmvqh7ipyq] .mud-table {
    background: transparent;
}

[b-rmvqh7ipyq] .mud-table-row:hover {
    background: rgba(33, 150, 243, 0.1) !important;
}

/* Clickable address buttons */
[b-rmvqh7ipyq] .mud-button-text {
    color: #42a5f5 !important;
}

[b-rmvqh7ipyq] .mud-button-text:hover {
    color: #90caf9 !important;
    text-decoration: underline !important;
}

/* ============================================================
   RTL SUPPORT
   ============================================================ */

:global([dir="rtl"]) .dialog-title-bar[b-rmvqh7ipyq] {
    flex-direction: row-reverse;
}

:global([dir="rtl"]) .dialog-title-bar .title-left[b-rmvqh7ipyq] {
    flex-direction: row-reverse;
}

:global([dir="rtl"]) .dialog-title-bar .title-buttons[b-rmvqh7ipyq] {
    margin-left: 0;
    margin-right: 8px;
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Dialogs/SceneDialogs.razor.rz.scp.css */
/* ================================================
   SCENE DIALOGS - SCOPED CSS
   This file contains scoped styles for SceneDialogs component
   ================================================ */

/* Dialog title bar styles */
.dialog-title-bar[b-yck8xuo1on] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

[b-yck8xuo1on] .dialog-title-bar .mud-typography {
    flex: 1;
}

/* Draggable dialog styles */
[b-yck8xuo1on] .draggable-dialog .mud-dialog {
    /* DO NOT set position here - JavaScript controls it (position: fixed) */
    margin: 0 !important;
}

[b-yck8xuo1on] .draggable-dialog .mud-dialog-title {
    cursor: move;
    user-select: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    border-radius: 4px 4px 0 0;
}

[b-yck8xuo1on] .draggable-dialog .mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* RTL support */
:global([dir="rtl"]) .dialog-title-bar[b-yck8xuo1on] {
    flex-direction: row-reverse;
}

/* ============================================================
   USER-REQUESTED DIALOG FIXES
   ============================================================ */

/* Fix #1: Increase dialog input field heights */
[b-yck8xuo1on] .mud-dialog .mud-input-control .mud-input {
    min-height: 56px !important;
}

[b-yck8xuo1on] .mud-dialog .mud-input-outlined .mud-input {
    padding: 16px 14px !important;
}

[b-yck8xuo1on] .mud-dialog .mud-select .mud-input {
    min-height: 56px !important;
    padding: 16px 14px !important;
}

[b-yck8xuo1on] .mud-dialog .mud-input-control-input-container {
    min-height: 56px !important;
}

[b-yck8xuo1on] .mud-dialog .mud-input-outlined {
    min-height: 56px !important;
}

/* Fix #2: Dialog title - keep close button inline with title */
[b-yck8xuo1on] .mud-dialog-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
}

[b-yck8xuo1on] .mud-dialog-title > * {
    flex-shrink: 1 !important;
}

[b-yck8xuo1on] .mud-dialog-title .mud-icon-button {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-yck8xuo1on] .mud-dialog-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important; /* Buttons on right for LTR */
    padding: 16px 24px !important;
    gap: 12px !important;
}

[b-yck8xuo1on] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-yck8xuo1on]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Dialogs/ViewDialogs.razor.rz.scp.css */
/* ================================================
   VIEW DIALOGS - SCOPED CSS
   This file contains scoped styles for ViewDialogs component
   ================================================ */

/* Dialog title bar styles */
.dialog-title-bar[b-zor1evfnn8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

[b-zor1evfnn8] .dialog-title-bar .mud-typography {
    flex: 1;
}

/* Draggable dialog styles */
[b-zor1evfnn8] .draggable-dialog .mud-dialog {
    /* DO NOT set position here - JavaScript controls it (position: fixed) */
    margin: 0 !important;
}

[b-zor1evfnn8] .draggable-dialog .mud-dialog-title {
    cursor: move;
    user-select: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    border-radius: 4px 4px 0 0;
}

[b-zor1evfnn8] .draggable-dialog .mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* RTL support */
:global([dir="rtl"]) .dialog-title-bar[b-zor1evfnn8] {
    flex-direction: row-reverse;
}

/* ============================================================
   USER-REQUESTED DIALOG FIXES
   ============================================================ */

/* Fix #1: Increase dialog input field heights */
[b-zor1evfnn8] .mud-dialog .mud-input-control .mud-input {
    min-height: 56px !important;
}

[b-zor1evfnn8] .mud-dialog .mud-input-outlined .mud-input {
    padding: 16px 14px !important;
}

[b-zor1evfnn8] .mud-dialog .mud-select .mud-input {
    min-height: 56px !important;
    padding: 16px 14px !important;
}

[b-zor1evfnn8] .mud-dialog .mud-input-control-input-container {
    min-height: 56px !important;
}

[b-zor1evfnn8] .mud-dialog .mud-input-outlined {
    min-height: 56px !important;
}

/* Fix #2: Dialog title - keep close button inline with title */
[b-zor1evfnn8] .mud-dialog-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
}

[b-zor1evfnn8] .mud-dialog-title > * {
    flex-shrink: 1 !important;
}

[b-zor1evfnn8] .mud-dialog-title .mud-icon-button {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-zor1evfnn8] .mud-dialog-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important; /* Buttons on right for LTR */
    padding: 16px 24px !important;
    gap: 12px !important;
}

[b-zor1evfnn8] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-zor1evfnn8]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/Dialogs/ZoneDialogs.razor.rz.scp.css */
/* ================================================
   ZONE DIALOGS - SCOPED CSS
   This file contains scoped styles for ZoneDialogs component
   ================================================ */

/* Dialog title bar styles */
.dialog-title-bar[b-7zj7ds0fe0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

[b-7zj7ds0fe0] .dialog-title-bar .mud-typography {
    flex: 1;
}

/* Draggable dialog styles */
[b-7zj7ds0fe0] .draggable-dialog .mud-dialog {
    /* DO NOT set position here - JavaScript controls it (position: fixed) */
    margin: 0 !important;
}

[b-7zj7ds0fe0] .draggable-dialog .mud-dialog-title {
    cursor: move;
    user-select: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    border-radius: 4px 4px 0 0;
}

[b-7zj7ds0fe0] .draggable-dialog .mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Dialog styles for location picking */
.dialog-picking-location[b-7zj7ds0fe0] {
    position: fixed;
    top: 80px;
    left: 20px;
    z-index: 9999;
    pointer-events: none;
}

[b-7zj7ds0fe0] .dialog-picking-location .mud-dialog-container {
    position: static !important;
    display: block !important;
    pointer-events: none !important;
}

[b-7zj7ds0fe0] .dialog-picking-location .mud-overlay {
    display: none !important;
    pointer-events: none !important;
}

[b-7zj7ds0fe0] .dialog-picking-location .mud-overlay-dialog {
    pointer-events: none !important;
    background: transparent !important;
}

[b-7zj7ds0fe0] .dialog-picking-location .mud-dialog {
    margin: 0 !important;
    max-width: 420px !important;
    min-width: 380px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    border: 2px solid #2196f3 !important;
    border-radius: 8px !important;
    animation: slide-in-dialog-b-7zj7ds0fe0 0.3s ease-out;
    pointer-events: auto !important;
}

@keyframes slide-in-dialog-b-7zj7ds0fe0 {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Edit dialog assignments section */
.edit-dialog-assignments[b-7zj7ds0fe0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.edit-assignment-item[b-7zj7ds0fe0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.assigned-entity-icon[b-7zj7ds0fe0] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.assignment-entity-name[b-7zj7ds0fe0] {
    flex: 1;
    font-weight: 500;
}

.select-item-icon[b-7zj7ds0fe0] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* MudBlazor select item icons - deep selectors for internal rendering */
[b-7zj7ds0fe0] .mud-select .select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

[b-7zj7ds0fe0] .mud-select-item .select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

[b-7zj7ds0fe0] .mud-input-control img {
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
}

[b-7zj7ds0fe0] .mud-select img.select-item-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* RTL support */
:global([dir="rtl"]) .dialog-title-bar[b-7zj7ds0fe0] {
    flex-direction: row-reverse;
}

:global([dir="rtl"]) .edit-assignment-item[b-7zj7ds0fe0] {
    flex-direction: row-reverse;
}

:global([dir="rtl"]) .dialog-picking-location[b-7zj7ds0fe0] {
    left: auto;
    right: 20px;
}

:global([dir="rtl"]) @keyframes slide-in-dialog[b-7zj7ds0fe0] {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to[b-7zj7ds0fe0] {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================================
   USER-REQUESTED DIALOG FIXES
   ============================================================ */

/* Fix #1: Increase dialog input field heights */
[b-7zj7ds0fe0] .mud-dialog .mud-input-control .mud-input {
    min-height: 56px !important;
}

[b-7zj7ds0fe0] .mud-dialog .mud-input-outlined .mud-input {
    padding: 16px 14px !important;
}

[b-7zj7ds0fe0] .mud-dialog .mud-select .mud-input {
    min-height: 56px !important;
    padding: 16px 14px !important;
}

[b-7zj7ds0fe0] .mud-dialog .mud-input-control-input-container {
    min-height: 56px !important;
}

[b-7zj7ds0fe0] .mud-dialog .mud-input-outlined {
    min-height: 56px !important;
}

/* Fix #2: Dialog title - keep close button inline with title */
[b-7zj7ds0fe0] .mud-dialog-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
}

[b-7zj7ds0fe0] .mud-dialog-title > * {
    flex-shrink: 1 !important;
}

[b-7zj7ds0fe0] .mud-dialog-title .mud-icon-button {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-7zj7ds0fe0] .mud-dialog-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important; /* Buttons on right for LTR */
    padding: 16px 24px !important;
    gap: 12px !important;
}

[b-7zj7ds0fe0] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-7zj7ds0fe0]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Razor/Components/PathPlanning/PathPlanningComp.razor.rz.scp.css */
    /* Visit Order Badge Styles */
    .visit-order-badge[b-7ukxw6jx0i] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        margin-right: 6px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-size: 11px;
        font-weight: 700;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        flex-shrink: 0;
    }

    /* Larger variant for assignment panel */
    .visit-order-badge.visit-order-large[b-7ukxw6jx0i] {
        min-width: 24px;
        height: 24px;
        font-size: 12px;
        border-radius: 12px;
        margin-right: 8px;
    }

    /* Hover effect */
    .clickable-assignment:hover .visit-order-badge[b-7ukxw6jx0i] {
        transform: scale(1.1);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
        transition: all 0.2s ease;
    }

    /* C4I Container Styles */
    .c4i-container[b-7ukxw6jx0i] {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto; /* CRITICAL: Use flex to fill MudMainContent instead of height: 100% */
        min-height: 0; /* CRITICAL: Allow flex to work properly */
        height: 100%; /* Fallback for non-flex parents */
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        color: #ffffff;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* NOTE: the former full-width top banner (.c4i-header / .header-left / .header-right /
       .header-menu / .header-title / .title-main / .title-sub / .header-icon) was REMOVED — the
       tool is now a pure 4-panel device-friendly layout. The clock (.system-time) that briefly
       lived on in the action bar has since been removed too. */

    /* Menu Bar Styles */
    .c4i-menubar[b-7ukxw6jx0i] {
        display: flex;
        align-items: center;
        padding: 4px 16px;
        background: rgba(0, 0, 0, 0.3);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        gap: 8px;
    }

    .c4i-menubar .menu-item[b-7ukxw6jx0i] {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.85rem !important;
    }

    .c4i-menubar .menu-item:hover[b-7ukxw6jx0i] {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .menubar-spacer[b-7ukxw6jx0i] {
        flex: 1;
    }

    .project-info-display[b-7ukxw6jx0i] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }

    .project-icon[b-7ukxw6jx0i] {
        color: #FFC107;
    }

    .project-name[b-7ukxw6jx0i] {
        font-size: 0.85rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
    }

    .project-timestamp[b-7ukxw6jx0i] {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.5);
        margin-left: 8px;
        padding-left: 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Content Area */
    .c4i-content[b-7ukxw6jx0i] {
        display: flex;
        flex: 1 1 auto; /* CRITICAL: Take all available flex space from parent (.c4i-container) */
        gap: 12px;
        padding: 12px;
        overflow: visible; /* Allow panel collapse buttons to be visible outside bounds */
        min-height: 0; /* CRITICAL: Allow flex to work */
        max-height: 100%; /* CRITICAL: Prevent overflow beyond available space */
    }

    /* Panel Base Styles */
    .c4i-panel[b-7ukxw6jx0i] {
        background: linear-gradient(135deg, rgba(13, 27, 42, 0.98) 0%, rgba(21, 34, 56, 0.95) 100%);
        border-radius: 12px;
        border: 1px solid rgba(66, 165, 245, 0.25);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        display: flex;
        flex-direction: column;
        overflow: visible; /* CRITICAL: Allow collapse buttons to extend outside panel bounds */
        min-height: 0; /* CRITICAL: Allow flex children to work properly */
        position: relative; /* CRITICAL: Required for absolute positioning of collapse buttons */
        backdrop-filter: blur(10px);
    }

    .panel-left[b-7ukxw6jx0i], .panel-right[b-7ukxw6jx0i] {
        width: 378px;
        min-width: 342px;
        position: relative;
        transition: width 0.3s ease, min-width 0.3s ease;
    }

        .panel-left.panel-collapsed[b-7ukxw6jx0i], .panel-right.panel-collapsed[b-7ukxw6jx0i] {
            width: 40px;
            min-width: 40px;
        }

    .panel-center[b-7ukxw6jx0i] {
        flex: 1;
        min-width: 400px; /* Ensure minimum width for map */
        background-color: #0a0a14; /* Debug: darker background to see if panel exists */
    }

    /* Panel Collapse Button */
    .panel-collapse-btn[b-7ukxw6jx0i] {
        position: absolute !important;
        top: 50% !important;
        right: -20px !important;
        transform: translateY(-50%) !important;
        z-index: 100 !important;
        background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%) !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }

    /* Additional specificity for left panel */
    .panel-left .panel-collapse-btn[b-7ukxw6jx0i] {
        position: absolute !important;
        top: 50% !important;
        right: -20px !important;
        transform: translateY(-50%) !important;
    }

    /* Additional specificity for right panel */
    .panel-right .panel-collapse-btn[b-7ukxw6jx0i] {
        position: absolute !important;
        top: 50% !important;
        left: -20px !important;
        right: auto !important;
        transform: translateY(-50%) !important;
    }

    .panel-collapse-btn-right[b-7ukxw6jx0i] {
        left: -20px !important;
        right: auto !important;
    }

        .panel-collapse-btn:hover[b-7ukxw6jx0i] {
            background: linear-gradient(135deg, #5ba3ff 0%, #4a90e2 100%);
            border-color: rgba(255, 255, 255, 0.6);
            box-shadow: 0 6px 16px rgba(74, 144, 226, 0.6);
            transform: translateY(-50%) scale(1.1);
        }

    .panel-header[b-7ukxw6jx0i] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 18px;
        min-height: 56px;
        background: linear-gradient(135deg, rgba(33, 150, 243, 0.12) 0%, rgba(21, 101, 192, 0.08) 100%);
        border-bottom: 1px solid rgba(66, 165, 245, 0.3);
        border-radius: 12px 12px 0 0;
        flex-wrap: nowrap;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .panel-title[b-7ukxw6jx0i] {
        font-weight: 600;
        flex: 1;
    }

    .panel-content[b-7ukxw6jx0i] {
        flex: 1 1 auto; /* Take available flex space */
        overflow-y: auto;
        padding: 12px;
        min-height: 0; /* CRITICAL: Allow flex to work properly */
        background: rgba(0, 0, 0, 0.15);
    }

    /* Map Content */
    .map-content[b-7ukxw6jx0i] {
        padding: 0 !important;
        position: relative !important; /* CRITICAL: For absolute positioning of picking overlay */
        flex: 1 1 auto !important; /* CRITICAL: Use flex instead of height: 100% to avoid circular dependency */
        display: flex !important; /* Use flex to ensure child takes full space */
        flex-direction: column !important;
        overflow: hidden !important; /* Override panel-content's overflow-y: auto */
        min-height: 0 !important; /* CRITICAL: Allow flex item to shrink below content size */
        max-height: 100% !important; /* CRITICAL: Prevent container from growing beyond available space */
    }

    /* the map container must take full space */
    #mapContainer[b-7ukxw6jx0i] {
        flex: 1 1 auto !important; /* CRITICAL: Take all available flex space */
        width: 100% !important;
        min-height: 0 !important; /* Allow flex to work - no minimum constraint */
        height: 100%; /* Explicitly set height to fill container */
        background-color: #1a1a2e; /* Fallback background to match container */
        position: relative;
        min-width: 0 !important; /* Allow flex item to shrink */
    }

    .map-legend[b-7ukxw6jx0i] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
    }

    /* Map Style Radio Button Styles */
    .map-style-radio[b-7ukxw6jx0i] {
        margin-bottom: 8px;
    }

    /* Panel Section (for right panel) */
    .panel-section[b-7ukxw6jx0i] {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
    }

    .panel-section:first-child[b-7ukxw6jx0i] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Dialog icon styles (shared) */
    .dialog-icon[b-7ukxw6jx0i] {
        width: 24px;
        height: 24px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .dialog-entity-image[b-7ukxw6jx0i] {
        width: 48px;
        height: 48px;
        object-fit: contain;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        padding: 4px;
        flex-shrink: 0;
    }

    /* Edit dialog assignments section */
    .edit-dialog-assignments[b-7ukxw6jx0i] {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: 150px;
        overflow-y: auto;
        padding: 8px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 4px;
    }

    .edit-assignment-item[b-7ukxw6jx0i] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
        transition: background 0.2s ease;
    }

    .edit-assignment-item:hover[b-7ukxw6jx0i] {
        background: rgba(255, 255, 255, 0.1);
    }

    .edit-assignment-item .assigned-entity-icon[b-7ukxw6jx0i] {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .edit-assignment-item .assignment-entity-name[b-7ukxw6jx0i] {
        flex: 1;
        font-size: 0.9em;
        color: rgba(255, 255, 255, 0.9);
    }

    .assignments-content[b-7ukxw6jx0i], .units-content[b-7ukxw6jx0i] {
        /* Full height within tab panel - no max-height limitation */
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Select item icon styles (for combo boxes with icons) */
    .select-item-icon[b-7ukxw6jx0i] {
        width: 24px;
        height: 24px;
        object-fit: contain;
        border-radius: 4px;
        flex-shrink: 0;
    }


    .add-label[b-7ukxw6jx0i] {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Scrollbar Styles */
    .panel-content[b-7ukxw6jx0i]::-webkit-scrollbar {
        width: 8px;
    }

    .panel-content[b-7ukxw6jx0i]::-webkit-scrollbar-track {
        background: rgba(13, 27, 42, 0.5);
        border-radius: 4px;
    }

    .panel-content[b-7ukxw6jx0i]::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, rgba(66, 165, 245, 0.4) 0%, rgba(33, 150, 243, 0.5) 100%);
        border-radius: 4px;
        border: 1px solid rgba(66, 165, 245, 0.2);
    }

    .panel-content[b-7ukxw6jx0i]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, rgba(66, 165, 245, 0.6) 0%, rgba(33, 150, 243, 0.7) 100%);
        box-shadow: 0 0 6px rgba(66, 165, 245, 0.5);
    }

    /* Edit button styles */
    .edit-btn[b-7ukxw6jx0i] {
        opacity: 0.6;
        padding: 2px !important;
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
    }

    .edit-btn:hover[b-7ukxw6jx0i] {
        opacity: 1;
            background: rgba(255, 255, 255, 0.1);
        }

        @keyframes pulse-border-b-7ukxw6jx0i {
        0%, 100% {
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(33, 150, 243, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(33, 150, 243, 0.4);
        }
        50% {
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(33, 150, 243, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 8px rgba(33, 150, 243, 0.2);
        }
    }

    /* Map picking mode - crosshair cursor */
    .map-picking-mode[b-7ukxw6jx0i] {
        cursor: crosshair !important;
    }

    .map-crosshair-cursor[b-7ukxw6jx0i],
    .map-crosshair-cursor canvas[b-7ukxw6jx0i] {
        cursor: crosshair !important;
    }

    /* Override any other cursor styles during picking mode */
    .map-picking-mode *[b-7ukxw6jx0i],
    .map-crosshair-cursor *[b-7ukxw6jx0i] {
        cursor: crosshair !important;
    }

    /* Panel Toggle Group Styles (replaced MudTabs) */
    .panel-toggle-header[b-7ukxw6jx0i] {
        padding: 10px 12px;
        background: linear-gradient(135deg, rgba(13, 27, 42, 0.95) 0%, rgba(21, 34, 56, 0.92) 100%);
        border-bottom: 1px solid rgba(66, 165, 245, 0.25);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .panel-toggle-group[b-7ukxw6jx0i] {
        width: 100%;
    }

    [b-7ukxw6jx0i] .panel-toggle-group .mud-toggle-group {
        width: 100%;
        display: flex;
    }

    [b-7ukxw6jx0i] .panel-toggle-group .mud-toggle-item {
        flex: 1;
        justify-content: center;
    }

    .toggle-item-content[b-7ukxw6jx0i] {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .toggle-count-chip[b-7ukxw6jx0i] {
        margin-inline-start: 4px;
        height: 18px !important;
        font-size: 0.65rem !important;
    }

    [b-7ukxw6jx0i] .toggle-count-chip .mud-chip-content {
        padding: 0 6px !important;
    }

    /* LTR Layout - Default left-to-right for English and other LTR languages */
    :global([dir="ltr"]) .c4i-content[b-7ukxw6jx0i],
    .c4i-content[b-7ukxw6jx0i] {
        flex-direction: row;
    }

    /* RTL Layout - Flip panels for Right-to-Left languages */
    :global([dir="rtl"]) .c4i-content[b-7ukxw6jx0i] {
        flex-direction: row-reverse;
    }

    /* RTL - Flip collapse button positions */
    :global([dir="rtl"]) .panel-left .panel-collapse-btn[b-7ukxw6jx0i] {
        position: absolute !important;
        top: 50% !important;
        right: auto !important;
        left: -20px !important;
        transform: translateY(-50%) !important;
    }

    :global([dir="rtl"]) .panel-right .panel-collapse-btn[b-7ukxw6jx0i] {
        position: absolute !important;
        top: 50% !important;
        left: auto !important;
        right: -20px !important;
        transform: translateY(-50%) !important;
    }

    /* RTL - Flip panel header layout */
    :global([dir="rtl"]) .panel-header[b-7ukxw6jx0i] {
        flex-direction: row-reverse;
    }

    /* ================================================
       SPLIT PANEL SYSTEM - In-Panel Editors
       ================================================ */

    /* Panel container with split view */
    .panel-split-container[b-7ukxw6jx0i] {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden; /* Ensure panel content is clipped, not the buttons */
    }

    /* Upper section - Entity list (50% height) */
    .panel-upper-section[b-7ukxw6jx0i] {
        flex: 0 0 50%;
        overflow-y: auto;
        border-bottom: 2px solid #1e88e5;
    }

    /* Lower section - Editor (50% height) */
    .panel-lower-section[b-7ukxw6jx0i] {
        flex: 0 0 50%;
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.3);
        border-top: 2px solid #1e88e5;
        padding: 12px;
    }

    /* Full height when no editor visible */
    .panel-upper-section.full-height[b-7ukxw6jx0i] {
        flex: 1 1 100%;
        border-bottom: none;
    }

    /* Editor container styling */
    .panel-editor[b-7ukxw6jx0i] {
        background: rgba(30, 30, 30, 0.95);
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Editor header */
    .panel-editor-header[b-7ukxw6jx0i] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #444;
        flex-shrink: 0;
    }

    .panel-editor-title[b-7ukxw6jx0i] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.95rem;
        font-weight: 600;
        color: #2196f3;
    }

    /* Editor close button */
    .panel-editor-close[b-7ukxw6jx0i] {
        color: #ccc;
        cursor: pointer;
        transition: color 0.2s;
    }

        .panel-editor-close:hover[b-7ukxw6jx0i] {
            color: #fff;
        }

    /* Editor content area */
    .panel-editor-content[b-7ukxw6jx0i] {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px 4px 0 0;
    }

        /* Compact form fields in editor */
        .panel-editor-content .mud-input-label[b-7ukxw6jx0i],
        .panel-editor-content .mud-select-label[b-7ukxw6jx0i] {
            font-size: 0.8rem;
        }

        .panel-editor-content .mud-input[b-7ukxw6jx0i],
        .panel-editor-content .mud-select[b-7ukxw6jx0i] {
            font-size: 0.85rem;
        }

        .panel-editor-content .mud-input-control[b-7ukxw6jx0i] {
            margin-top: 0 !important;
            margin-bottom: 8px !important;
        }

        .panel-editor-content .mb-3[b-7ukxw6jx0i] {
            margin-bottom: 8px !important;
        }

        .panel-editor-content .mb-2[b-7ukxw6jx0i] {
            margin-bottom: 6px !important;
        }

        .panel-editor-content .mud-typography-subtitle2[b-7ukxw6jx0i] {
            font-size: 0.85rem;
            margin-bottom: 4px;
        }

        .panel-editor-content .location-input-row[b-7ukxw6jx0i] {
            margin-bottom: 6px;
        }

        .panel-editor-content .mud-radio[b-7ukxw6jx0i] {
            font-size: 0.85rem;
        }

        .panel-editor-content .mud-button[b-7ukxw6jx0i] {
            font-size: 0.8rem;
            padding: 4px 10px;
            min-height: 32px;
        }

        .panel-editor-content .location-success-indicator[b-7ukxw6jx0i] {
            padding: 6px;
            margin-bottom: 6px !important;
        }

            .panel-editor-content .location-success-indicator .mud-typography[b-7ukxw6jx0i] {
                font-size: 0.8rem;
            }

    /* Vertical coordinate input layout */
    .location-input-row-vertical[b-7ukxw6jx0i] {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 8px;
    }

    .coordinates-fields-vertical[b-7ukxw6jx0i] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: 24px;
    }

    .address-field-vertical[b-7ukxw6jx0i] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: 24px;
    }

    /* Editor actions footer */
    .panel-editor-actions[b-7ukxw6jx0i] {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #444;
        flex-shrink: 0;
    }

        .panel-editor-actions .mud-button[b-7ukxw6jx0i] {
            font-size: 0.85rem;
            padding: 6px 16px;
            min-height: 36px;
        }

    /* Animation for editor slide-in */
    @keyframes slide-up-b-7ukxw6jx0i {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .panel-editor[b-7ukxw6jx0i] {
        animation: slide-up-b-7ukxw6jx0i 0.3s ease-out;
    }

/* ================================================
   DRAGGABLE DIALOG STYLES
   Styles for dialogs that can be dragged by their title bar
   ================================================ */

/* Dialog title bar - shared layout for all dialogs */
.dialog-title-bar[b-7ukxw6jx0i] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: move;
    user-select: none;
}

[b-7ukxw6jx0i] .dialog-title-bar .mud-typography {
    flex: 1;
}

/* Route Plan Dialog Title Structure - Container for title bar + buttons */
.route-plan-title-container[b-7ukxw6jx0i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Route Plan Dialog Title Buttons - Separate from draggable area */
.route-plan-title-buttons[b-7ukxw6jx0i] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Ensure buttons in title are clickable and above drag layer */
[b-7ukxw6jx0i] .route-plan-title-buttons .mud-icon-button {
    pointer-events: auto !important;
    z-index: 100 !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Draggable dialog base styles */
[b-7ukxw6jx0i] .draggable-dialog .mud-dialog {
    /* DO NOT set position here - JavaScript controls it (position: fixed) */
    margin: 0 !important;
}

[b-7ukxw6jx0i] .draggable-dialog .mud-dialog-title {
    cursor: move;
    user-select: none;
    background: linear-gradient(90deg, #1565c0, #1976d2);
    border-radius: 4px 4px 0 0;
}

[b-7ukxw6jx0i] .draggable-dialog .mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Route Plan dialog specific styles */
[b-7ukxw6jx0i] .draggable-dialog .mud-table {
    background: transparent;
}

[b-7ukxw6jx0i] .draggable-dialog .mud-table-row:hover {
    background: rgba(33, 150, 243, 0.1) !important;
}

/* Clickable address links in route plan */
[b-7ukxw6jx0i] .draggable-dialog .mud-link {
    cursor: pointer !important;
    color: #42a5f5 !important;
}

[b-7ukxw6jx0i] .draggable-dialog .mud-link:hover {
    color: #90caf9 !important;
    text-decoration: underline !important;
}

/* Clickable location links in route plan table */
.route-location-link[b-7ukxw6jx0i] {
    cursor: pointer !important;
    color: #42a5f5 !important;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.route-location-link:hover[b-7ukxw6jx0i] {
    color: #90caf9 !important;
}

/* ================================================
   RESCUE TEAM GROUPING STYLES
   ================================================ */

[b-7ukxw6jx0i] .team-groups {
    gap: 4px;
}

[b-7ukxw6jx0i] .team-groups .mud-expand-panel {
    background: transparent !important;
    border: 1px solid rgba(66, 165, 245, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

[b-7ukxw6jx0i] .team-groups .mud-expand-panel-header {
    padding: 8px 12px;
    min-height: 44px;
    background: rgba(33, 150, 243, 0.08);
    border-radius: 8px 8px 0 0;
}

[b-7ukxw6jx0i] .team-groups .mud-expand-panel.mud-panel-expanded .mud-expand-panel-header {
    border-bottom: 1px solid rgba(66, 165, 245, 0.2);
}

[b-7ukxw6jx0i] .team-groups .mud-expand-panel-content {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-group-header[b-7ukxw6jx0i] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.team-group-icon[b-7ukxw6jx0i] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.team-group-name[b-7ukxw6jx0i] {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-group-count[b-7ukxw6jx0i] {
    font-size: 0.7rem !important;
    height: 20px !important;
    flex-shrink: 0;
}

[b-7ukxw6jx0i] .team-group-count .mud-chip-content {
    padding: 0 6px !important;
}

.team-group-standby[b-7ukxw6jx0i] {
    font-size: 0.65rem !important;
    height: 18px !important;
    flex-shrink: 0;
}

[b-7ukxw6jx0i] .team-group-standby .mud-chip-content {
    padding: 0 5px !important;
}

/* ================================================
   MAP PANEL (panel 1) — command action bar along its
   bottom edge. The former horizontal top-header menu
   now lives below the map, INSIDE the map panel (not
   a separate display-mode panel).
   ================================================ */

/* Command action bar — hugs its content height along the bottom of the map panel. */
.c4i-actions-bar[b-7ukxw6jx0i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 2px;
    padding: 2px 6px;
    background: linear-gradient(135deg, rgba(13, 27, 42, 0.95) 0%, rgba(21, 101, 192, 0.25) 100%);
    border-top: 1px solid rgba(66, 165, 245, 0.3);
    border-radius: 0 0 12px 12px;
}

/* NOTE: `menu-item` lands on the MudMenu WRAPPER div, not on the <button> MudBlazor
   renders inside it. Styling the wrapper alone leaves MudBlazor's own 36px-tall,
   64px-min-width button untouched — the compacting rules must target the inner button. */
[b-7ukxw6jx0i] .c4i-actions-bar .menu-item {
    display: inline-flex;
}

/* Reuse the old header menu-item look for the relocated menu buttons, but compact:
   the bar steals height from the map, so keep it to a single slim row. */
[b-7ukxw6jx0i] .c4i-actions-bar .menu-item > button {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    background: rgba(33, 150, 243, 0.08) !important;
}

[b-7ukxw6jx0i] .c4i-actions-bar .menu-item > button:hover {
    background: rgba(33, 150, 243, 0.25) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* Shrink the menu buttons' leading/trailing icons and tighten their gap to the label. */
[b-7ukxw6jx0i] .c4i-actions-bar .menu-item .mud-icon-root {
    font-size: 0.95rem !important;
    width: 0.95rem !important;
    height: 0.95rem !important;
}

[b-7ukxw6jx0i] .c4i-actions-bar .menu-item .mud-button-label {
    gap: 3px;
}

[b-7ukxw6jx0i] .c4i-actions-bar .menu-item > button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

[b-7ukxw6jx0i] .c4i-actions-bar .menu-item > button:active {
    transform: translateY(0px);
    background: rgba(33, 150, 243, 0.35) !important;
}

[b-7ukxw6jx0i] .c4i-actions-bar .mud-menu {
    margin: 0;
}

/* RTL — actions flow right-to-left like the rest of the C4I UI. */
:global([dir="rtl"]) .c4i-actions-bar[b-7ukxw6jx0i] {
    flex-direction: row-reverse;
}

/* ================================================
   CHATBOT PANEL (panel 3) — the tool's dedicated AI
   assistant column, toggled from the app-bar chat
   button via ToolChatPanelService.
   ================================================ */

.c4i-chat-panel[b-7ukxw6jx0i] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties. */
.c4i-chat-panel.collapsed[b-7ukxw6jx0i] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-width: 0 !important;
    pointer-events: none;
}

.c4i-chat-host[b-7ukxw6jx0i] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ---- Restricted display modes (Laptop / Tablet / Phone) ----
   In a restricted mode the generic main.css relaxes every visible
   [data-gv-panel] to flex:1 1 0. The chat panel's desktop fixed width
   would fight that, so let it fill evenly like the other panels when
   it is the active tab (it is never .collapsed in a restricted mode
   because tabbing to it expands it). */
:global(body[data-display-mode="LAPTOP"]) .c4i-chat-panel[b-7ukxw6jx0i],
:global(body[data-display-mode="TABLET"]) .c4i-chat-panel[b-7ukxw6jx0i],
:global(body[data-display-mode="PHONE"]) .c4i-chat-panel[b-7ukxw6jx0i] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* ---- Device-friendly panel sizing (Laptop / Tablet / Phone) ----
   The desktop layout pins .panel-left/.panel-right to a 378px width with a
   342px minimum and .panel-center to a 400px minimum. Those are fine when all
   four panels have a wide window to share, but in a RESTRICTED display mode
   the generic main.css narrows the visible window to 3 / 2 / 1 panels and the
   fixed minima then overflow the viewport sideways (a 660px tablet cannot fit
   342 + 400). Relax them to an even flex share so each visible panel simply
   takes its slice of whatever width the device has.

   Rule (see the display-mode design): the WIDTH decides the MODE in JS; the
   MODE — never a raw width media query — decides the layout here. */
:global(body[data-display-mode="LAPTOP"]) .panel-left[b-7ukxw6jx0i],
:global(body[data-display-mode="LAPTOP"]) .panel-right[b-7ukxw6jx0i],
:global(body[data-display-mode="LAPTOP"]) .panel-center[b-7ukxw6jx0i],
:global(body[data-display-mode="TABLET"]) .panel-left[b-7ukxw6jx0i],
:global(body[data-display-mode="TABLET"]) .panel-right[b-7ukxw6jx0i],
:global(body[data-display-mode="TABLET"]) .panel-center[b-7ukxw6jx0i],
:global(body[data-display-mode="PHONE"]) .panel-left[b-7ukxw6jx0i],
:global(body[data-display-mode="PHONE"]) .panel-right[b-7ukxw6jx0i],
:global(body[data-display-mode="PHONE"]) .panel-center[b-7ukxw6jx0i] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* A user-collapsed side panel must still collapse to its 40px icon rail in a
   restricted mode — the blanket rule above would otherwise stretch it. */
:global(body[data-display-mode="LAPTOP"]) .panel-left.panel-collapsed[b-7ukxw6jx0i],
:global(body[data-display-mode="LAPTOP"]) .panel-right.panel-collapsed[b-7ukxw6jx0i],
:global(body[data-display-mode="TABLET"]) .panel-left.panel-collapsed[b-7ukxw6jx0i],
:global(body[data-display-mode="TABLET"]) .panel-right.panel-collapsed[b-7ukxw6jx0i],
:global(body[data-display-mode="PHONE"]) .panel-left.panel-collapsed[b-7ukxw6jx0i],
:global(body[data-display-mode="PHONE"]) .panel-right.panel-collapsed[b-7ukxw6jx0i] {
    flex: 0 0 40px !important;
    width: 40px !important;
    max-width: 40px !important;
}

/* On a phone a single panel owns the whole width, so the side panels' inline
   collapse chevrons (which hang 20px OUTSIDE the panel box) would sit off
   screen and add horizontal scroll. Pull them back inside. */
:global(body[data-display-mode="PHONE"]) .panel-collapse-btn[b-7ukxw6jx0i] {
    right: 0 !important;
    left: auto !important;
}

:global(body[data-display-mode="PHONE"]) :global([dir="rtl"]) .panel-collapse-btn[b-7ukxw6jx0i] {
    left: 0 !important;
    right: auto !important;
}

/* The map panel's action bar carries ~6 menu buttons plus the status strip. It
   already wraps; on narrow panels shrink the padding so a phone shows two rows
   instead of five. */
:global(body[data-display-mode="TABLET"]) .c4i-actions-bar[b-7ukxw6jx0i],
:global(body[data-display-mode="PHONE"]) .c4i-actions-bar[b-7ukxw6jx0i] {
    gap: 2px;
    padding: 2px 4px;
}

[b-7ukxw6jx0i] :global(body[data-display-mode="TABLET"]) .c4i-actions-bar .menu-item > button,
[b-7ukxw6jx0i] :global(body[data-display-mode="PHONE"]) .c4i-actions-bar .menu-item > button {
    padding: 2px 5px !important;
    font-size: 0.65rem !important;
    letter-spacing: 0 !important;
}

/* ---- Action-bar status strip (project name / scene name / clock) ----
   The remnant of the removed top banner. Pushed to the far end of the action
   bar on wide panels; wraps onto its own line when there is no room. */
.c4i-actions-status[b-7ukxw6jx0i] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
    min-width: 0;
}

.c4i-actions-status .project-info-display[b-7ukxw6jx0i] {
    min-width: 0;
    gap: 4px;
    padding: 2px 6px;
}

.c4i-actions-status .project-name[b-7ukxw6jx0i] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    font-size: 0.75rem;
}

/* On a phone the clock alone is worth the room; the project name is available
   from the Project menu. */
:global(body[data-display-mode="PHONE"]) .c4i-actions-status .project-info-display[b-7ukxw6jx0i] {
    display: none;
}
/* _content/AspireChatApp.Razor/Components/Tools/AdventureTool/AdventureToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                 AdventureToolComp.razor.css                        */
/*   Layout of the Adventure tool (RTL aware): left tabs | transport  */
/*   bar + globe | social and gauges | chat.                          */
/*                                                                    */
/*   A copy of the Walk simulator's layout rules: CSS isolation is    */
/*   per component, so the dstool-* rules cannot be inherited - they  */
/*   are duplicated here deliberately. The transports' toolbar items  */
/*   are rendered into this layout's sections, so their ::deep rules  */
/*   (camera group, the flight's menus) must live here too.           */
/*                                                                    */
/*   The HUDs and the control pads are built in JS by the simulators' */
/*   helpers; their rules are global (main.css).                      */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.dstool-container[b-mogtvikaqt] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, instruments on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction). Do NOT add flex-direction: row-reverse
   here: on an rtl container that reverses a SECOND time and cancels out,
   leaving the LTR layout. */
.dstool-container[dir="rtl"][b-mogtvikaqt] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / globe / instruments panels open at 25% / 50% / 25%
   (flex: 1 / 2 / 1, so the free space is split with the globe getting half).
   A splitter drag writes inline width/min/max, which overrides the flex basis
   and pins that panel — the others keep sharing the remainder. */
.dstool-left-panel[b-mogtvikaqt] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .dstool-left-panel[b-mogtvikaqt] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.dstool-left-panel.collapsed[b-mogtvikaqt] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-mogtvikaqt] .dstool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-mogtvikaqt] .dstool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-mogtvikaqt] .dstool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Glass-cockpit tab host — the PFD/MFD canvas fills its whole tab panel.
   Without an explicit flex chain the canvas wrapper collapses and the
   instrument is drawn into a sliver at the top of the panel.
   ::deep because MudTabPanel renders the wrapper this div sits in, so that
   wrapper never carries this component's scoped-CSS attribute — styling only
   the inner div leaves an unstretched parent between it and the panel, which
   is exactly what pinned the PFD to 237px inside a 730px tab. */
[b-mogtvikaqt] .dstool-tab-panel > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.dstool-display-host[b-mogtvikaqt] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* CHAT tab host — lets the embedded per-tool ChatBotComp fill the panel */
.dstool-chat-host[b-mogtvikaqt] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-mogtvikaqt] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-mogtvikaqt] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-mogtvikaqt] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-mogtvikaqt],
.panel-splitter:active[b-mogtvikaqt] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-mogtvikaqt] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                  CENTER PANEL (Globe + HUD)                        */
/* ----------------------------------------------------------------- */

.dstool-center-panel[b-mogtvikaqt] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    /* Sized by flex, never by its content, so it can be the query container
       the toolbar compacts against (the panel narrows with the splitters and
       the display mode, not just with the window). */
    container: adventure-center / inline-size;
}

.map-toolbar[b-mogtvikaqt] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
    /* The toolbar holds a button group and a hint chip; on a narrow panel it
       wraps rather than pushing the zoom buttons off the edge. */
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------- */
/*              CAMERA-MODE EXCLUSIVE TOGGLE GROUP                    */
/* ----------------------------------------------------------------- */

/* A hand-built segmented control rather than MudButtonGroup: the group
   normalises its children's variant/colour, which is exactly what has to
   DIFFER here — the active segment must read as pressed. Buttons are joined
   by collapsing the borders between them. */
.camera-mode-group[b-mogtvikaqt] {
    display: inline-flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: hidden;
}

/* ::deep — MudButton is a child component, so its rendered <button> never
   carries this component's scope attribute. */
[b-mogtvikaqt] .camera-mode-button {
    border-radius: 0;
    margin: 0;
    /* Collapse the shared border so the three read as one control. */
    margin-inline-start: -1px;
    min-width: 0;
    white-space: nowrap;
}

[b-mogtvikaqt] .camera-mode-group > *:first-child .camera-mode-button,
[b-mogtvikaqt] .camera-mode-button:first-child {
    margin-inline-start: 0;
    border-start-start-radius: 4px;
    border-end-start-radius: 4px;
}

[b-mogtvikaqt] .camera-mode-button:last-child {
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
}

/* The active segment sits above its neighbours so its filled edge is not
   clipped by the next button's outline. */
[b-mogtvikaqt] .camera-mode-button.active {
    position: relative;
    z-index: 1;
    font-weight: 700;
}

.map-area[b-mogtvikaqt] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* position: relative is load-bearing — the JS helper appends the absolutely
   positioned HUD overlay INSIDE this element, so this is what the HUD's
   inset: 0 resolves against. Without it the HUD would size to the page. */
.map-container[b-mogtvikaqt] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    /* No fixed floor: a 300 px minimum overflowed the globe out of its own
       area on a landscape phone, clipping the glasses frame and the controls. */
    min-height: 0;
    height: 100%;
    /* The globe takes keyboard focus so the flight controls work; the default
       focus ring around the whole 3D view is noise, and the HUD already makes
       it obvious the simulator is live. */
    outline: none;
}

/* ----------------------------------------------------------------- */
/*                  COMPACT TOOLBAR (narrow / touch)                  */
/* ----------------------------------------------------------------- */

/* The keyboard hint means nothing on a touch screen. */
@media (pointer: coarse) {
    [b-mogtvikaqt] .map-toolbar-keys-hint {
        display: none;
    }
}

/* A narrow globe panel: the toolbar wrapped to three rows, which on a
   landscape phone left the globe 179 px of a 290 px panel. Drop the hint and
   the dividers and make the labelled buttons icon-only, so it keeps to one
   row. The label stays in the DOM (font-size 0, not display: none), so the
   buttons keep their accessible names. */
@container adventure-center (max-width: 720px) {
    [b-mogtvikaqt] .map-toolbar-keys-hint,
    [b-mogtvikaqt] .map-toolbar-divider {
        display: none;
    }

    [b-mogtvikaqt] .map-toolbar-labelled {
        min-width: 0;
        padding-inline: 8px;
    }

    [b-mogtvikaqt] .map-toolbar-labelled .mud-button-label {
        font-size: 0;
    }

    [b-mogtvikaqt] .map-toolbar-labelled .mud-button-icon-start {
        margin: 0;
    }
}

/* Narrower still (a portrait phone): zoom and home give way too — the globe
   pinch-zooms on a touch screen. */
@container adventure-center (max-width: 400px) {
    [b-mogtvikaqt] .map-toolbar-zoom {
        display: none;
    }
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-mogtvikaqt]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                  INSTRUMENTS PANEL (host)                          */
/* ----------------------------------------------------------------- */

.dstool-side-panel[b-mogtvikaqt] {
    flex: 1 1 0;
    min-width: 280px; /* equal third alongside the editor and globe panels */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* The host between the panel and the instruments MUST be a bounded flex
   child. Without a rule of its own it sized to its content, and Plotly's
   responsive resize then grew the chart to fit the host that grew to fit the
   chart — an 11,800 px plot clipped by the panel, showing only its legend. */
.dstool-instruments-host[b-mogtvikaqt] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.dstool-chat-panel[b-mogtvikaqt] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate.
   !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.dstool-chat-panel.collapsed[b-mogtvikaqt] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .dstool-chat-panel.collapsed[b-mogtvikaqt] {
    border-right-width: 0;
}

[dir="rtl"] .dstool-chat-panel[b-mogtvikaqt] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ----------------------------------------------------------------- */
/*        RIGHT PANEL collapsed to a rail (its header button)         */
/* ----------------------------------------------------------------- */

/* The tabs stay MOUNTED (hidden), so the social lists and the journal chart
   keep their state; only the header's expand button shows on the rail. */
.dstool-side-panel[b-mogtvikaqt] {
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
}

.dstool-side-panel.collapsed[b-mogtvikaqt] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px !important;
    max-width: 48px;
}

.dstool-side-panel.collapsed > :not(.panel-header)[b-mogtvikaqt] {
    display: none !important;
}

.dstool-side-panel.collapsed .panel-title[b-mogtvikaqt],
.dstool-left-panel.collapsed .panel-title[b-mogtvikaqt] {
    display: none;
}

.dstool-side-panel.collapsed .panel-header[b-mogtvikaqt],
.dstool-left-panel.collapsed .panel-header[b-mogtvikaqt] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* ----------------------------------------------------------------- */
/*                    THE TRANSPORT BAR                               */
/* ----------------------------------------------------------------- */

/* Pedestrian / Driver / Pilot / Sailor: a dropdown (ToolbarPickerComp), its icon and name on its face. */
.adv-transport-group[b-mogtvikaqt] {
    display: inline-flex;
    align-items: center;
}

/* ----------------------------------------------------------------- */
/*        THE PILOT'S TOOLBAR MENUS AND COCKPIT DISPLAYS               */
/*   (rendered here from FlightSimulatorToolComp - see the header)     */
/* ----------------------------------------------------------------- */

.dstool-container[b-mogtvikaqt]  .fstool-toolbar-menu {
    display: inline-flex;
    align-items: center;
}

[b-mogtvikaqt] .fstool-toolbar-menu-button {
    min-width: 0;
    white-space: nowrap;
    text-transform: none;
}

[b-mogtvikaqt] .fstool-menu-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

[b-mogtvikaqt] .fstool-menu-glyph svg {
    width: 100%;
    height: 100%;
    display: block;
}

[b-mogtvikaqt] .fstool-toolbar-menu-button .fstool-menu-label {
    margin-inline-start: 6px;
}

/* The pilot's settings and instruments are a nested tab strip (PFD | FLIGHT, MFD | LOG). */
[b-mogtvikaqt] .adv-nested-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

[b-mogtvikaqt] .adv-nested-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-mogtvikaqt] .fstool-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

[b-mogtvikaqt] .fstool-display-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*        THE TRANSPORT JOURNEY'S STEP LIST (over the globe)          */
/* ----------------------------------------------------------------- */

.adv-journey[b-mogtvikaqt] {
    position: absolute;
    /* below the travel badge (sim_travel.js), which sits at the globe's top */
    top: 96px;
    inset-inline-start: 8px;
    z-index: 20;
    max-width: min(420px, calc(100% - 16px));
    max-height: calc(100% - 104px);
    overflow: auto;
    padding: 8px 10px;
    border-radius: 8px;
    background-color: rgba(13, 27, 42, 0.86);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.35;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}

.adv-journey-head[b-mogtvikaqt] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.adv-journey-title[b-mogtvikaqt] {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 0.85rem;
}

[b-mogtvikaqt] .adv-journey-cancel {
    flex: 0 0 auto;
    min-width: 0;
    padding: 2px 10px;
}

.adv-journey-sentence[b-mogtvikaqt] {
    margin: 4px 0 6px;
    opacity: 0.85;
}

.adv-journey-steps[b-mogtvikaqt] {
    margin: 0;
    padding-inline-start: 20px;
}

.adv-journey-steps li[b-mogtvikaqt] {
    margin: 1px 0;
}

.adv-journey-steps li.done[b-mogtvikaqt] {
    opacity: 0.6;
    text-decoration: line-through;
}

.adv-journey-steps li.now[b-mogtvikaqt] {
    font-weight: 700;
    color: #ffd54f;
}

.adv-journey-steps li.stopped[b-mogtvikaqt] {
    color: #ef9a9a;
}

/* ---- The 3D SCENE settings (AdventureToolComp.Scene.cs): a collapsible group above the
   transport's settings ---- */

.adv-scene[b-mogtvikaqt] {
    flex: 0 0 auto;
    margin: 4px 8px 2px;
    padding: 2px 6px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    font-size: .78rem;
}

.adv-scene-summary[b-mogtvikaqt] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    cursor: pointer;
    list-style-position: inside;
}

.adv-scene-title[b-mogtvikaqt] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.adv-scene-value[b-mogtvikaqt] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: end;
}

.adv-scene-body[b-mogtvikaqt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}

.adv-scene-label[b-mogtvikaqt] {
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.adv-scene-options[b-mogtvikaqt] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
}

.adv-scene-options-column[b-mogtvikaqt] {
    flex-direction: column;
}

.adv-scene-option[b-mogtvikaqt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.adv-scene-option input[b-mogtvikaqt] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
}

.adv-scene-note[b-mogtvikaqt] {
    margin-top: 2px;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

/* A phone: the list shrinks to the current step. */
@container adventure-center (max-width: 400px) {
    .adv-journey[b-mogtvikaqt] {
        max-width: calc(100% - 16px);
        font-size: 0.72rem;
    }

    .adv-journey-steps li.done[b-mogtvikaqt],
    .adv-journey-steps li.todo[b-mogtvikaqt],
    .adv-journey-sentence[b-mogtvikaqt] {
        display: none;
    }
}
/* _content/AspireChatApp.Razor/Components/Tools/AltitudeViewshedTool/AltitudeViewshedToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                AltitudeViewshedToolComp.razor.css                 */
/*   Layout styles for the altitude viewshed tool (RTL aware):       */
/*   left editor tabs | Cesium globe | top-view chart panel.         */
/*   Mirrors LosVisibilityToolComp.razor.css — the rules are         */
/*   repeated rather than shared because Blazor CSS isolation scopes */
/*   each component's stylesheet to its own generated attribute, so  */
/*   the class names are identical but the scope attribute is not.   */
/*   Editor styles live in LosVisibilityEditorComp.razor.css (reused */
/*   by AltitudeViewshedEditorComp) and chart styles in              */
/*   ViewshedTopViewChartComp.razor.css.                             */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-gv17be9nac] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-gv17be9nac] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-gv17be9nac] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-gv17be9nac] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-gv17be9nac] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-gv17be9nac] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-gv17be9nac] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-gv17be9nac] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-gv17be9nac] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-gv17be9nac] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-gv17be9nac] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-gv17be9nac],
.panel-splitter:active[b-gv17be9nac] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-gv17be9nac] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-gv17be9nac] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-gv17be9nac] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-gv17be9nac] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-gv17be9nac] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-gv17be9nac]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                TOP-VIEW CHART PANEL (host)                         */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-gv17be9nac] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.viewshed-chat-panel[b-gv17be9nac] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.viewshed-chat-panel.collapsed[b-gv17be9nac] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .viewshed-chat-panel.collapsed[b-gv17be9nac] {
    border-right-width: 0;
}

[dir="rtl"] .viewshed-chat-panel[b-gv17be9nac] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.viewshed-chat-host[b-gv17be9nac] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp so  */
/*   every globe offers the same toolbar options)                      */
/* ================================================================= */

.menu-exaggeration-row[b-gv17be9nac] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-gv17be9nac] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-gv17be9nac] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-gv17be9nac] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-gv17be9nac] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-gv17be9nac] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-gv17be9nac] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/AltitudeViewshedTool/Charts/ViewshedTopViewChartComp.razor.rz.scp.css */
/* ================================================================= */
/*              ViewshedTopViewChartComp.razor.css                   */
/*   Viewshed top-view chart: interactive Plotly plot (drag to pan,   */
/*   wheel to zoom) + the WPF-style control row underneath.           */
/*   Mirrors ProfileSideViewChartComp.razor.css — the rules are       */
/*   repeated rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute.      */
/*   Axis titles live inside the Plotly layout (its SVG text applies  */
/*   bidi, so Hebrew needs no HTML-title workaround).                 */
/* ================================================================= */

.chart-host[b-r4yfhm9imv] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.chart-plot-area[b-r4yfhm9imv] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (WPF ViewshedTopViewChart.xaml bottom DockPanel) */
.chart-toolbar[b-r4yfhm9imv] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.chart-toolbar-label[b-r4yfhm9imv] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

/* AXES EQUAL checkbox + caption */
.chart-toolbar-check[b-r4yfhm9imv] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.chart-projection-select[b-r4yfhm9imv] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    min-width: 110px;
}

/* Zoom / reset / save buttons (the WpfPlot right-click menu equivalents) */
.chart-toolbar-btn[b-r4yfhm9imv] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.chart-toolbar-btn:hover[b-r4yfhm9imv] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.chart-toolbar-btn:active[b-r4yfhm9imv] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/AltitudeViewshedTool/Editors/AltitudeViewshedEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             AltitudeViewshedEditorComp.razor.css                  */
/*   Compact WPF-AltitudeViewshedEditor-style rows: label | small    */
/*   editor, so the whole editor fits the panel.                     */
/*                                                                   */
/*   The class names and rules mirror LosVisibilityEditorComp.razor  */
/*   .css deliberately: both editors are ports of WPF editors that   */
/*   share the same LosEditor look. They cannot share ONE stylesheet  */
/*   because Blazor CSS isolation rewrites each component's rules to  */
/*   its own generated scope attribute — an unscoped or foreign-scope */
/*   rule simply never matches these elements.                       */
/* ================================================================= */

/* Scroll wrapper — this editor has more groups than the LOS one
   (sensor + grid factors + target altitude + LOS + both locations),
   so the scroll is load-bearing rather than a safety net. */
.los-editor-scroll[b-i1zhj0s1jn] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-i1zhj0s1jn] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-i1zhj0s1jn] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* ----------------------------------------------------------------- */
/*                    COLLAPSIBLE GROUPS                              */
/* ----------------------------------------------------------------- */
/* Read-mostly groups (sensor, grid factors, scanned fan) are native
   <details> expanders so the panel fits without scrolling. Native
   <details> is the whole mechanism — no JS, no component state, and the
   open/closed state survives re-renders on its own (a Blazor-managed
   bool would be reset by every recompute's StateHasChanged). */

/* A collapsed <details> must not keep the flex column's gap/padding
   reserved, so it overrides the .los-group display it also carries. */
.los-expander[b-i1zhj0s1jn] {
    display: block;
}

/* Only an OPEN expander lays its rows out as the flex column .los-group
   describes; collapsed, the rows are not rendered at all. */
.los-expander[open][b-i1zhj0s1jn] {
    display: flex;
    flex-direction: column;
}

/* `display: flex` must beat the UA stylesheet's `summary { display: list-item }`,
   which is what drops the marker AND makes margin-inline-start:auto work on the
   summary value. The element selector adds the specificity to win. */
summary.los-expander-title[b-i1zhj0s1jn] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    /* Replace the default disclosure triangle with one that follows the
       group-title color (::marker cannot be recolored reliably). */
    list-style: none;
    user-select: none;
}

.los-expander-title[b-i1zhj0s1jn]::-webkit-details-marker {
    display: none;
}

/* Custom disclosure triangle, rotating on open */
.los-expander-title[b-i1zhj0s1jn]::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--mud-palette-primary);
    transition: transform 0.15s ease;
}

.los-expander[open] > .los-expander-title[b-i1zhj0s1jn]::before {
    transform: rotate(90deg);
}

/* RTL: the triangle points the other way when collapsed */
[dir="rtl"] .los-expander-title[b-i1zhj0s1jn]::before {
    border-left: none;
    border-right: 5px solid var(--mud-palette-primary);
}

[dir="rtl"] .los-expander[open] > .los-expander-title[b-i1zhj0s1jn]::before {
    transform: rotate(-90deg);
}

/* The headline value kept visible on a COLLAPSED group, so the summary
   still reports what the group holds (e.g. the fan's coverage %).
   Pushed to the far end by the auto margin — which only resolves because the
   summary above is forced to `display: flex`. */
.los-expander-summary[b-i1zhj0s1jn] {
    margin-inline-start: auto;
    padding-inline-start: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

.los-expander-summary-ok[b-i1zhj0s1jn] {
    color: var(--mud-palette-success);
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-i1zhj0s1jn] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-i1zhj0s1jn] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette */
.los-input[b-i1zhj0s1jn] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.los-input:focus[b-i1zhj0s1jn] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Fields the current LOS mode computes: greyed out to read as outputs, but
   readonly rather than disabled so the value stays selectable and copyable.
   Both classes are needed in the selector — .los-input is declared earlier and
   would otherwise win on equal specificity and undo the grey. */
.los-input.los-input-computed[b-i1zhj0s1jn] {
    /* --mud-palette-background-grey is undefined in this theme and
       --mud-palette-text-disabled is only 20% white (illegible), so the
       greying uses the surface / secondary-text pair instead. */
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-divider);
    /* Text caret, not a "blocked" cursor — the value can be selected/copied */
    cursor: text;
    /* Keep computed numbers legible despite the dimmed palette */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* A readonly number input still renders spinners; they do nothing here */
.los-input-computed[b-i1zhj0s1jn]::-webkit-inner-spin-button,
.los-input-computed[b-i1zhj0s1jn]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Focusing a computed field (to select/copy it) must not make it look editable */
.los-input.los-input-computed:focus[b-i1zhj0s1jn] {
    outline: none;
    border-color: var(--mud-palette-divider);
}

.los-input-narrow[b-i1zhj0s1jn] {
    width: 82px;
}

/* Inline AGL/ASL radio pair */
.los-radio-inline[b-i1zhj0s1jn] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.los-radio-inline label[b-i1zhj0s1jn] {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

/* Computed readout values */
.los-readout-value[b-i1zhj0s1jn] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* Coverage chip / compute button / hint */
.los-verdict-chip[b-i1zhj0s1jn] {
    align-self: flex-start;
    margin-top: 2px;
}

.los-compute-button[b-i1zhj0s1jn] {
    margin: 4px 6px;
}

.los-hint[b-i1zhj0s1jn] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}
/* _content/AspireChatApp.Razor/Components/Tools/CameraDeploymentTool/CameraDeploymentToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                CameraDeploymentToolComp.razor.css                 */
/*   Layout styles for the camera-deployment tool (RTL aware):       */
/*   left editor tabs | Cesium globe | top-view chart panel.         */
/*   Mirrors PitchViewshedToolComp.razor.css — the rules are         */
/*   repeated rather than shared because Blazor CSS isolation scopes */
/*   each component's stylesheet to its own generated attribute, so  */
/*   the class names are identical but the scope attribute is not.   */
/*   Editor styles live in CameraDeploymentEditorComp.razor.css and  */
/*   chart styles in CameraDeploymentTopViewChartComp.razor.css.     */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-huey4xe6i1] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-huey4xe6i1] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-huey4xe6i1] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-huey4xe6i1] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-huey4xe6i1] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements never receive this component's CSS scope attribute — unscoped
   rules would silently not match and the editor content gets clipped. */
[b-huey4xe6i1] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-huey4xe6i1] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-huey4xe6i1] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-huey4xe6i1] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-huey4xe6i1] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-huey4xe6i1] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-huey4xe6i1],
.panel-splitter:active[b-huey4xe6i1] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-huey4xe6i1] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-huey4xe6i1] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-huey4xe6i1] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-huey4xe6i1] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-huey4xe6i1] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

.map-container[b-huey4xe6i1]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                TOP-VIEW CHART PANEL (host)                         */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-huey4xe6i1] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp)    */
/* ================================================================= */

.menu-exaggeration-row[b-huey4xe6i1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-huey4xe6i1] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-huey4xe6i1] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-huey4xe6i1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-huey4xe6i1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-huey4xe6i1] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-huey4xe6i1] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

/* ----------------------------------------------------------------- */
/*          RIGHT-MOST CHAT PANEL (dedicated ChatBot)                */
/* ----------------------------------------------------------------- */

.lostool-chat-panel[b-huey4xe6i1] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.lostool-chat-panel.collapsed[b-huey4xe6i1] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .lostool-chat-panel.collapsed[b-huey4xe6i1] {
    border-right-width: 0;
}

[dir="rtl"] .lostool-chat-panel[b-huey4xe6i1] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.lostool-chat-host[b-huey4xe6i1] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/CameraDeploymentTool/Charts/CameraDeploymentTopViewChartComp.razor.rz.scp.css */
/* ================================================================= */
/*           CameraDeploymentTopViewChartComp.razor.css              */
/*   Camera-deployment top-view chart: interactive Plotly plot (drag  */
/*   to pan, wheel to zoom) + the control row underneath. Mirrors     */
/*   PitchViewshedTopViewChartComp.razor.css — the rules are repeated */
/*   rather than shared because Blazor CSS isolation scopes each       */
/*   stylesheet to its own generated attribute. Axis titles live      */
/*   inside the Plotly layout (its SVG text applies bidi).            */
/* ================================================================= */

.chart-host[b-2x9v2tp300] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.chart-plot-area[b-2x9v2tp300] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row */
.chart-toolbar[b-2x9v2tp300] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* AXES EQUAL checkbox + caption */
.chart-toolbar-check[b-2x9v2tp300] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* Zoom / reset / save buttons */
.chart-toolbar-btn[b-2x9v2tp300] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.chart-toolbar-btn:hover[b-2x9v2tp300] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.chart-toolbar-btn:active[b-2x9v2tp300] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/CameraDeploymentTool/Editors/CameraDeploymentEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             CameraDeploymentEditorComp.razor.css                  */
/*   Compact WPF-CameraDeploymentEditor-style rows: label | small    */
/*   editor, so the whole editor fits the panel.                     */
/*                                                                   */
/*   The .los-* class names and rules mirror                         */
/*   LosVisibilityEditorComp.razor.css / PitchViewshedEditorComp     */
/*   .razor.css deliberately: all these editors are ports of WPF     */
/*   editors that share the same LosEditor look. They cannot share   */
/*   ONE stylesheet because Blazor CSS isolation rewrites each        */
/*   component's rules to its own generated scope attribute — an      */
/*   unscoped or foreign-scope rule simply never matches these        */
/*   elements. The .camera-* rules at the end are this tool's own.   */
/* ================================================================= */

/* Scroll wrapper — several groups, so the scroll is a safety net. */
.los-editor-scroll[b-4u31hrjz5h] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-4u31hrjz5h] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-4u31hrjz5h] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* ----------------------------------------------------------------- */
/*                    COLLAPSIBLE GROUPS                              */
/* ----------------------------------------------------------------- */
/* Read-mostly groups (resolution factors, azimuth axis, FOV) are native
   <details> expanders so the panel fits without scrolling. Native <details>
   is the whole mechanism — no JS, no component state, and the open/closed
   state survives re-renders on its own (a Blazor-managed bool would be reset
   by every recompute's StateHasChanged). */

.los-expander[b-4u31hrjz5h] {
    display: block;
}

.los-expander[open][b-4u31hrjz5h] {
    display: flex;
    flex-direction: column;
}

/* `display: flex` must beat the UA stylesheet's `summary { display: list-item }`,
   which is what drops the marker AND makes margin-inline-start:auto work on the
   summary value. The element selector adds the specificity to win. */
summary.los-expander-title[b-4u31hrjz5h] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.los-expander-title[b-4u31hrjz5h]::-webkit-details-marker {
    display: none;
}

/* Custom disclosure triangle, rotating on open */
.los-expander-title[b-4u31hrjz5h]::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--mud-palette-primary);
    transition: transform 0.15s ease;
}

.los-expander[open] > .los-expander-title[b-4u31hrjz5h]::before {
    transform: rotate(90deg);
}

/* RTL: the triangle points the other way when collapsed */
[dir="rtl"] .los-expander-title[b-4u31hrjz5h]::before {
    border-left: none;
    border-right: 5px solid var(--mud-palette-primary);
}

[dir="rtl"] .los-expander[open] > .los-expander-title[b-4u31hrjz5h]::before {
    transform: rotate(-90deg);
}

/* The headline value kept visible on a COLLAPSED group. Pushed to the far end
   by the auto margin — which only resolves because the summary above is forced
   to `display: flex`. */
.los-expander-summary[b-4u31hrjz5h] {
    margin-inline-start: auto;
    padding-inline-start: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

.los-expander-summary-ok[b-4u31hrjz5h] {
    color: var(--mud-palette-success);
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-4u31hrjz5h] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-4u31hrjz5h] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs styled to the Mud palette */
.los-input[b-4u31hrjz5h] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.los-input:focus[b-4u31hrjz5h] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed readout values */
.los-readout-value[b-4u31hrjz5h] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.los-compute-button[b-4u31hrjz5h] {
    margin: 4px 6px;
}

.los-hint[b-4u31hrjz5h] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

/* ----------------------------------------------------------------- */
/*             CAMERA-DEPLOYMENT-SPECIFIC RULES                       */
/* ----------------------------------------------------------------- */

/* The two polygon-edit toggle buttons share a row and split the width */
.camera-poly-buttons[b-4u31hrjz5h] {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.camera-poly-button[b-4u31hrjz5h] {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.68rem;
}

/* Full-width action button (CREATE FRIENDLY BUFFER) */
.camera-full-button[b-4u31hrjz5h] {
    margin: 6px 0 2px 0;
    width: 100%;
}

/* Active-draw hint row with a FINISH DRAWING link */
.camera-draw-hint[b-4u31hrjz5h] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: var(--mud-palette-warning);
    margin: 2px 0 4px 0;
    line-height: 1.2;
}

.camera-draw-done[b-4u31hrjz5h] {
    margin-inline-start: auto;
    flex: 0 0 auto;
}

/* Determinate deployment progress bar (real % from the engine) */
.camera-progress[b-4u31hrjz5h] {
    margin: 2px 8px 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.camera-progress-label[b-4u31hrjz5h] {
    font-size: 0.68rem;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
    text-align: center;
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/CameraTool/CameraToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                  CameraToolComp.razor.css                         */
/*   Layout styles for the Camera tool (RTL aware):                  */
/*   left editor tabs | Cesium globe | side-view chart panel.        */
/*   Mirrors LosVisibilityToolComp.razor.css — CSS isolation is      */
/*   per-component, so identical class names there do NOT apply here.*/
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.camtool-container[b-d3o41x4e6u] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.camtool-container[dir="rtl"][b-d3o41x4e6u] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.camtool-left-panel[b-d3o41x4e6u] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .camtool-left-panel[b-d3o41x4e6u] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.camtool-left-panel.collapsed[b-d3o41x4e6u] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements never receive this component's CSS scope attribute. */
[b-d3o41x4e6u] .camtool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-d3o41x4e6u] .camtool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-d3o41x4e6u] .camtool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-d3o41x4e6u] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-d3o41x4e6u] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-d3o41x4e6u] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-d3o41x4e6u],
.panel-splitter:active[b-d3o41x4e6u] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-d3o41x4e6u] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.camtool-center-panel[b-d3o41x4e6u] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-d3o41x4e6u] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-d3o41x4e6u] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-d3o41x4e6u] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

.map-container[b-d3o41x4e6u]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                SIDE-VIEW CHART PANEL (host)                        */
/* ----------------------------------------------------------------- */

.camtool-side-panel[b-d3o41x4e6u] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                DEDICATED CHATBOT PANEL (right-most)               */
/* ----------------------------------------------------------------- */

.camtool-chat-panel[b-d3o41x4e6u] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    /* Bound the height to the flex row, not to the content. Without this the
       panel keeps the default `min-height: auto`, grows to its natural content
       height and pushes the bot-panel button row below the fold, where it is
       unreachable because every ancestor is `overflow: hidden`. */
    height: 100%;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.camtool-chat-panel.collapsed[b-d3o41x4e6u] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .camtool-chat-panel.collapsed[b-d3o41x4e6u] {
    border-right-width: 0;
}

[dir="rtl"] .camtool-chat-panel[b-d3o41x4e6u] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.camtool-chat-host[b-d3o41x4e6u] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp)    */
/* ================================================================= */

.menu-exaggeration-row[b-d3o41x4e6u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-d3o41x4e6u] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-d3o41x4e6u] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-d3o41x4e6u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-d3o41x4e6u] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-d3o41x4e6u] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-d3o41x4e6u] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/CameraTool/Editors/CameraEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                  CameraEditorComp.razor.css                       */
/*   Compact WPF-CameraEditor-style rows: label | small editor, so   */
/*   the whole editor fits the panel without scrolling.              */
/*   Rules mirror LosVisibilityEditorComp.razor.css — CSS isolation  */
/*   is per-component, so identical class names in that stylesheet   */
/*   do NOT apply here; duplication is intentional.                  */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.cam-editor-scroll[b-ax450n8vaw] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.cam-group[b-ax450n8vaw] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cam-group-title[b-ax450n8vaw] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.cam-row[b-ax450n8vaw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.cam-row-label[b-ax450n8vaw] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette */
.cam-input[b-ax450n8vaw] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.cam-input:focus[b-ax450n8vaw] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.cam-input-narrow[b-ax450n8vaw] {
    width: 82px;
}

/* Inline AGL/ASL radio pair */
.cam-radio-inline[b-ax450n8vaw] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.cam-radio-inline label[b-ax450n8vaw] {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

/* Computed readout values */
.cam-readout-value[b-ax450n8vaw] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* Verdict chip / compute button / hint */
.cam-verdict-chip[b-ax450n8vaw] {
    align-self: flex-start;
    margin-top: 2px;
}

.cam-compute-button[b-ax450n8vaw] {
    margin: 4px 6px;
}

.cam-hint[b-ax450n8vaw] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}
/* _content/AspireChatApp.Razor/Components/Tools/ChangeDetectionTool/ChangeDetectionToolComp.razor.rz.scp.css */
/* ================================================================
   ChangeDetectionToolComp scoped styles.
   3-panel flex layout (left editor | center before/after viewers |
   right result list). CSS isolation is per-component, so these rules
   are deliberately self-contained (not shared with other tools).
   ================================================================ */

.cd-container[b-ktpxsfxuiz] {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ---- Panels ---- */
.cd-left-panel[b-ktpxsfxuiz] {
    width: 320px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-inline-end: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.cd-left-panel.collapsed[b-ktpxsfxuiz] {
    width: 44px;
    min-width: 44px;
}

.cd-center-panel[b-ktpxsfxuiz] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cd-right-panel[b-ktpxsfxuiz] {
    width: 300px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-inline-start: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.panel-header[b-ktpxsfxuiz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    flex: 0 0 auto;
}

.panel-title[b-ktpxsfxuiz] {
    display: flex;
    align-items: center;
}

.cd-splitter[b-ktpxsfxuiz] {
    width: 4px;
    flex: 0 0 auto;
    background: var(--mud-palette-lines-default, #e0e0e0);
    cursor: col-resize;
}

.cd-tabs[b-ktpxsfxuiz],
.cd-tab-panel[b-ktpxsfxuiz] {
    min-height: 0;
    overflow: auto;
}

/* ---- Center: before/after viewers ---- */
.cd-viewers[b-ktpxsfxuiz] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    background: #1e1e1e;
}

.cd-pane[b-ktpxsfxuiz] {
    position: relative;
    flex: 1 1 50%;
    min-width: 0;
    overflow: hidden;
    background: #2a2a2a;
    cursor: grab;
}

.cd-pane.cd-grabbing[b-ktpxsfxuiz] {
    cursor: grabbing;
}

.cd-pane-splitter[b-ktpxsfxuiz] {
    width: 4px;
    flex: 0 0 auto;
    background: #555;
}

.cd-img[b-ktpxsfxuiz] {
    display: block;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.cd-overlay[b-ktpxsfxuiz] {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

.cd-pane-caption[b-ktpxsfxuiz] {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    z-index: 3;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: none;
}

.cd-pane-placeholder[b-ktpxsfxuiz] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa7b5;
    font-style: italic;
    pointer-events: none;
    padding: 12px;
    text-align: center;
}

/* ---- Right: counts + result table ---- */
.cd-counts[b-ktpxsfxuiz] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    flex: 0 0 auto;
}

.cd-count[b-ktpxsfxuiz] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.cd-unchanged[b-ktpxsfxuiz] { background: #FF8C00; }
.cd-removed[b-ktpxsfxuiz]   { background: #FF4136; }
.cd-added[b-ktpxsfxuiz]     { background: #2ECC40; }
.cd-changed[b-ktpxsfxuiz]   { background: #FFD700; color: #333; }

.cd-result-table[b-ktpxsfxuiz] {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}

.cd-result-table th[b-ktpxsfxuiz] {
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface, #fff);
    z-index: 1;
}

.cd-result-table tr[b-ktpxsfxuiz] {
    cursor: pointer;
}

.cd-row-selected[b-ktpxsfxuiz] {
    outline: 2px solid var(--mud-palette-primary, #1976d2);
    outline-offset: -2px;
}

.cd-row-added[b-ktpxsfxuiz],
.cd-row-unchanged[b-ktpxsfxuiz],
.cd-row-removed[b-ktpxsfxuiz],
.cd-row-changed[b-ktpxsfxuiz],
.cd-row-modified[b-ktpxsfxuiz] {
    /* Left colour bar per verdict/type. */
    border-inline-start: 4px solid transparent;
}

.cd-row-added[b-ktpxsfxuiz]    { border-inline-start-color: #2ECC40; }
.cd-row-unchanged[b-ktpxsfxuiz]{ border-inline-start-color: #FF8C00; }
.cd-row-removed[b-ktpxsfxuiz]  { border-inline-start-color: #FF4136; }
.cd-row-changed[b-ktpxsfxuiz]  { border-inline-start-color: #FFD700; }
.cd-row-modified[b-ktpxsfxuiz] { border-inline-start-color: #FFB700; }

/* ---- Editor bits ---- */
.cd-editor[b-ktpxsfxuiz] {
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.cd-section-title[b-ktpxsfxuiz] {
    font-weight: 600;
}

.cd-image-slot[b-ktpxsfxuiz] {
    margin-top: 4px;
}

.cd-mode-toggle[b-ktpxsfxuiz] {
    width: 100%;
    margin-top: 4px;
}

.cd-sensitivity-row[b-ktpxsfxuiz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-sensitivity-value[b-ktpxsfxuiz] {
    min-width: 32px;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.cd-status[b-ktpxsfxuiz] {
    color: var(--mud-palette-primary, #1976d2);
}

/* Native <details> expander — force flex on the summary so the value can right-align. */
.cd-details[b-ktpxsfxuiz] {
    margin-top: 6px;
}

summary.cd-summary[b-ktpxsfxuiz] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    list-style-position: inside;
}

.cd-summary-value[b-ktpxsfxuiz] {
    margin-inline-start: auto;
    font-weight: 400;
    color: var(--mud-palette-text-secondary, #666);
}
/* _content/AspireChatApp.Razor/Components/Tools/ChangeDetectionTool/Editors/ChangeDetectionEditorComp.razor.rz.scp.css */
/* ================================================================
   ChangeDetectionEditorComp scoped styles.
   CSS isolation is per-component, so the editor duplicates the few
   classes it uses (they cannot inherit the parent tool's scoped rules).
   ================================================================ */

.cd-editor[b-neftvtne9j] {
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.cd-section-title[b-neftvtne9j] {
    font-weight: 600;
}

.cd-image-slot[b-neftvtne9j] {
    margin-top: 4px;
}

.cd-mode-toggle[b-neftvtne9j] {
    width: 100%;
    margin-top: 4px;
}

.cd-status[b-neftvtne9j] {
    color: var(--mud-palette-primary, #1976d2);
}

.cd-sample-list[b-neftvtne9j] {
    max-height: 180px;
    overflow: auto;
}

/* Sample-pairs <details> expander (a genuine collapsible group, not a numeric control). */
.cd-details[b-neftvtne9j] {
    margin-top: 6px;
}

summary.cd-summary[b-neftvtne9j] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    list-style-position: inside;
}

.cd-summary-label[b-neftvtne9j] {
    font-weight: 600;
}

/* ---- Compact single-row controls (mirrors LosVisibilityTool's los-row/los-input)
   so numeric/select fields take as little vertical space as possible instead of
   the tall MudBlazor Material controls. Label left (ellipsised), control right. ---- */
.cd-row[b-neftvtne9j] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.cd-row-label[b-neftvtne9j] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-input[b-neftvtne9j] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers/text in these compact fields always read left-to-right. */
    direction: ltr;
}

.cd-input:focus[b-neftvtne9j] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Compact inline slider row: flexible track + a fixed-width tabular value. */
.cd-slider[b-neftvtne9j] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.cd-slider-value[b-neftvtne9j] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}
/* _content/AspireChatApp.Razor/Components/Tools/ChartsCreationTool/ChartsCreationToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                ChartsCreationToolComp.razor.css                  */
/*   Left tabs (FILE / ANALYSIS / ABOUT), the grid host and the chart */
/*   pane under it. Univer's own styles ship with gv-sheets.css.      */
/*   Compact rows: own copies of the los-row / los-input pattern.     */
/* ================================================================= */

[b-xos11kb904] .na-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-xos11kb904] .na-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-xos11kb904] .na-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ---------------- analysis tab ---------------- */

.na-analysis[b-xos11kb904] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    font-size: .8rem;
}

.na-row[b-xos11kb904] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
}

.na-row-label[b-xos11kb904] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.na-range[b-xos11kb904] {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.na-input[b-xos11kb904] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
}

input.na-input[b-xos11kb904] {
    direction: ltr;
}

.na-input:focus[b-xos11kb904] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.na-check[b-xos11kb904] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.na-actions[b-xos11kb904] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.na-hint[b-xos11kb904] {
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    line-height: 1.3;
}

.na-stats-wrap[b-xos11kb904] {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

.na-stats[b-xos11kb904] {
    border-collapse: collapse;
    width: 100%;
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

.na-stats th[b-xos11kb904],
.na-stats td[b-xos11kb904] {
    padding: 2px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
    text-align: end;
}

.na-stats tbody th[b-xos11kb904] {
    text-align: start;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.na-stats thead th[b-xos11kb904] {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.na-regression[b-xos11kb904] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

/* ---------------- centre ---------------- */

.na-center[b-xos11kb904] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

[b-xos11kb904] .na-busy {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 20;
}

.na-grid-host[b-xos11kb904] {
    position: relative;
    flex: 1 1 auto;
    min-height: 200px;
    overflow: hidden;
}

.na-chart-pane[b-xos11kb904] {
    flex: 0 0 40%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.na-chart-header[b-xos11kb904] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-size: .82rem;
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.na-chart-title[b-xos11kb904] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.na-chart-area[b-xos11kb904] {
    flex: 1 1 auto;
    min-height: 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/AvalonEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                     AvalonEditorComp.razor.css                     */
/*   Scoped layout for the reusable Monaco code editor. The editor     */
/*   fills the host container; the toolbar is a fixed row above it.    */
/*   CSS isolation is per-component, so these rules are this           */
/*   component's own (not inherited by / from the host tool).          */
/* ================================================================= */

.avalon-editor-root[b-yy4r571chf] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Toolbar row (Run / Clear + host extras). */
.avalon-editor-toolbar[b-yy4r571chf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    flex: 0 0 auto;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    /* Editor code always reads left-to-right; keep the toolbar LTR too so Run
       stays on the leading edge under the RTL default culture. */
    direction: ltr;
}

/* Monaco host — fills the remaining space; position:relative anchors the
   loading fallback overlay. */
.avalon-editor-host[b-yy4r571chf] {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* The element Monaco mounts into. Monaco lays out to this box (automaticLayout). */
.avalon-editor-mount[b-yy4r571chf] {
    position: absolute;
    inset: 0;
    /* Code is LTR regardless of the app's RTL default. */
    direction: ltr;
    text-align: left;
}

/* Loading fallback shown until Monaco finishes its async AMD load. */
.avalon-editor-loading[b-yy4r571chf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
    font-size: .85rem;
    z-index: 1;
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/CircleEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                   CircleEditorComp.razor.css                    */
/*   Shared parametric shape-editor dialog styling (centre + size     */
/*   parameters), matching the compact Mud dark theme used by the     */
/*   sibling Point / Polyline / Polygon editors.                      */
/* ================================================================= */

.shape-editor[b-7usmrp9wo7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 320px;
    max-width: 440px;
}

.shape-editor-tabs[b-7usmrp9wo7] {
    width: 100%;
}

.shape-editor-tab-panel[b-7usmrp9wo7] {
    padding-top: 10px;
}

/* The title bar doubles as the drag handle. */
.shape-editor-drag-handle[b-7usmrp9wo7] {
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
}

.shape-editor-toolbar[b-7usmrp9wo7] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.shape-editor-field[b-7usmrp9wo7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shape-editor-field-label[b-7usmrp9wo7] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.shape-editor-input[b-7usmrp9wo7] {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 0.8rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.shape-editor-input:focus[b-7usmrp9wo7] {
    outline: none;
    border-color: var(--mud-palette-primary);
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/HelpTipComp.razor.rz.scp.css */
/* The "?" help button and its balloon (HelpTipComp.razor). */
.help-tip[b-op4lrefthz] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.help-tip-button[b-op4lrefthz] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-primary);
    background: transparent;
    color: var(--mud-palette-primary);
    font: 700 13px/1 Roboto, Helvetica, Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.help-tip-button:hover[b-op4lrefthz],
.help-tip-button.open[b-op4lrefthz] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Over the page, invisible: a press outside the balloon closes it. */
.help-tip-backdrop[b-op4lrefthz] {
    position: fixed;
    inset: 0;
    z-index: 29;
}

/* Under the button, toward the panel's middle (it sits at a row's end), with a pointer up to the button. */
.help-tip-balloon[b-op4lrefthz] {
    position: absolute;
    top: calc(100% + 9px);
    inset-inline-end: -6px;
    z-index: 30;
    width: max-content;
    max-width: min(300px, 78vw);
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
}

.help-tip-balloon[b-op4lrefthz]::before {
    content: "";
    position: absolute;
    top: -6px;
    inset-inline-end: 11px;
    width: 10px;
    height: 10px;
    background: var(--mud-palette-surface);
    /* Its top-left corner, turned 45 degrees, points up to the button - in either direction of the page. */
    border-left: 1px solid var(--mud-palette-primary);
    border-top: 1px solid var(--mud-palette-primary);
    transform: rotate(45deg);
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/OfficeFilePanelComp.razor.rz.scp.css */
/* ================================================================= */
/*                  OfficeFilePanelComp.razor.css                    */
/*   Compact FILE tab of the Work tools. Rows follow the los-row /   */
/*   los-input pattern (own copies — CSS isolation is per component). */
/*   ::deep reaches the action groups the tools pass as ChildContent. */
/* ================================================================= */

.ofp-root[b-fw1r54g3qq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    font-size: .8rem;
}

/* ---------------- draft banner ---------------- */

.ofp-draft[b-fw1r54g3qq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-warning);
    background: rgba(255, 152, 0, 0.08);
}

.ofp-draft-text[b-fw1r54g3qq] {
    flex: 1 1 auto;
    min-width: 0;
}

.ofp-draft-title[b-fw1r54g3qq] {
    font-weight: 600;
}

.ofp-draft-time[b-fw1r54g3qq] {
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
}

.ofp-draft-actions[b-fw1r54g3qq] {
    display: flex;
    gap: 4px;
}

/* ---------------- rows ---------------- */

.ofp-row[b-fw1r54g3qq] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
}

.ofp-row-label[b-fw1r54g3qq] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ofp-input[b-fw1r54g3qq] {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .8rem;
}

.ofp-input:focus[b-fw1r54g3qq] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.ofp-badge[b-fw1r54g3qq] {
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------- action groups (ChildContent) ---------------- */

[b-fw1r54g3qq] .ofp-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

[b-fw1r54g3qq] .ofp-group-title {
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mud-palette-text-secondary);
}

[b-fw1r54g3qq] .ofp-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-primary);
    background: rgba(25, 118, 210, 0.06);
}

[b-fw1r54g3qq] .ofp-hint {
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    line-height: 1.3;
}

[b-fw1r54g3qq] .ofp-select {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-size: .8rem;
}

/* ---------------- status / warnings ---------------- */

.ofp-status[b-fw1r54g3qq] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.ofp-warnings[b-fw1r54g3qq] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 4px 8px;
}

summary.ofp-warnings-title[b-fw1r54g3qq] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.ofp-warnings ul[b-fw1r54g3qq] {
    margin: 4px 0 0 0;
    padding-inline-start: 18px;
    color: var(--mud-palette-text-secondary);
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/OfficeToolShellComp.razor.rz.scp.css */
/* ================================================================= */
/*                 OfficeToolShellComp.razor.css                     */
/*   Frame of the Work tools: narrow FILE panel | wide editor | chat. */
/*   CSS isolation is per-component: these are this frame's own      */
/*   copies of the TributeToolComp panel / splitter / header rules.   */
/* ================================================================= */

.office-container[b-hiu4wmotm2] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* dir="rtl" alone reverses the flex row — no row-reverse. */

/* ---------------------- LEFT PANEL ---------------------- */

.office-left-panel[b-hiu4wmotm2] {
    flex: 0 0 280px;
    width: 280px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-inline-end: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, flex-basis 0.3s ease;
    overflow: hidden;
}

.office-left-panel.collapsed[b-hiu4wmotm2] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

.office-left-body[b-hiu4wmotm2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.office-title-text[b-hiu4wmotm2] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------- HEADER ---------------------- */

.panel-header[b-hiu4wmotm2] {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
    flex: 0 0 auto;
    min-height: 40px;
    box-sizing: border-box;
}

[b-hiu4wmotm2] .panel-title {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
    min-width: 0;
}

/* ---------------------- SPLITTERS ---------------------- */

.panel-splitter[b-hiu4wmotm2] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-hiu4wmotm2],
.panel-splitter:active[b-hiu4wmotm2] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-hiu4wmotm2] {
    display: none;
}

/* ---------------------- CENTER ---------------------- */

.office-center-panel[b-hiu4wmotm2] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* ---------------------- CHAT ---------------------- */

.office-chat-panel[b-hiu4wmotm2] {
    flex: 0 0 380px;
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, flex-basis 0.3s ease;
    overflow: hidden;
}

.office-chat-panel.collapsed[b-hiu4wmotm2] {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
}

.office-chat-host[b-hiu4wmotm2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ---------------------- NARROW SCREENS ---------------------- */

@media (max-width: 700px) {
    .office-center-panel[b-hiu4wmotm2] {
        min-width: 0;
    }
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/PointEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                    PointEditorComp.razor.css                      */
/*   Shared single-point editor dialog: lat/lon up-down editors,      */
/*   matching the compact Mud dark theme used across the tool         */
/*   editors and the sibling PolygonEditorComp / PolylineEditorComp.  */
/* ================================================================= */

.point-editor[b-qke8mx0f8z] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 320px;
    /* Wide enough for the STYLE tab's two-column grids (the layer style editor)
       while staying compact for the GEOMETRY-only case. */
    max-width: 440px;
}

/* Keep the tab strip tidy and let long tab content scroll rather than blow the
   dialog width out. */
.point-editor-tabs[b-qke8mx0f8z] {
    width: 100%;
}

.point-editor-tab-panel[b-qke8mx0f8z] {
    padding-top: 10px;
}

/* The title bar doubles as the drag handle (draggable_dialogs.js drags by the
   title bar); the grab cursor signals it. */
.point-editor-drag-handle[b-qke8mx0f8z] {
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
}

.point-editor-toolbar[b-qke8mx0f8z] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.point-editor-field[b-qke8mx0f8z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.point-editor-field-label[b-qke8mx0f8z] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.point-editor-input[b-qke8mx0f8z] {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 0.8rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.point-editor-input:focus[b-qke8mx0f8z] {
    outline: none;
    border-color: var(--mud-palette-primary);
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/PolygonEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                   PolygonEditorComp.razor.css                     */
/*   Shared polygon-editor dialog: numbered vertex list-view with     */
/*   lat/lon up-down editors, matching the compact Mud dark theme     */
/*   used across the tool editors.                                    */
/* ================================================================= */

.polygon-editor[b-fpcyzd835i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 360px;
    max-width: 460px;
}

/* Central GEOMETRY / STYLE tab control (the STYLE tab hosts the layer style
   editor supplied by the host). */
.polygon-editor-tabs[b-fpcyzd835i] {
    width: 100%;
}

.polygon-editor-tab-panel[b-fpcyzd835i] {
    padding-top: 8px;
}

/* The title bar doubles as the drag handle (draggable_dialogs.js drags by the
   title bar); the grab cursor signals it. */
.polygon-editor-drag-handle[b-fpcyzd835i] {
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
}

/* Validity chip + map-click hint row */
.polygon-editor-toolbar[b-fpcyzd835i] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Scrollable numbered vertex list */
.polygon-editor-list[b-fpcyzd835i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

.polygon-editor-empty[b-fpcyzd835i] {
    padding: 12px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* One vertex row: number | lat | lon | actions */
.polygon-editor-row[b-fpcyzd835i] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
}

.polygon-editor-row:nth-child(odd)[b-fpcyzd835i] {
    background: var(--mud-palette-background);
}

/* The 1..N vertex number badge */
.polygon-editor-num[b-fpcyzd835i] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.polygon-editor-field[b-fpcyzd835i] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 0;
    min-width: 0;
}

.polygon-editor-field-label[b-fpcyzd835i] {
    font-size: 0.62rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.polygon-editor-input[b-fpcyzd835i] {
    width: 100%;
    height: 26px;
    box-sizing: border-box;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.76rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.polygon-editor-input:focus[b-fpcyzd835i] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.polygon-editor-row-actions[b-fpcyzd835i] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.polygon-editor-add[b-fpcyzd835i] {
    margin-top: 2px;
}

/* Standalone entity-name field at the top of the editor (not part of a vertex
   row): full width with a little separation from the vertex list below. */
.polygon-editor-name-field[b-fpcyzd835i] {
    width: 100%;
    margin-bottom: 6px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/PolylineEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                  PolylineEditorComp.razor.css                     */
/*   Shared polyline (open line) editor dialog: numbered vertex       */
/*   list-view with lat/lon up-down editors, matching the compact Mud */
/*   dark theme used by the sibling PolygonEditorComp / PointEditorComp*/
/* ================================================================= */

.polyline-editor[b-vdyysp425o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 360px;
    max-width: 460px;
}

/* Central GEOMETRY / STYLE tab control (the STYLE tab hosts the layer style
   editor supplied by the host). */
.polyline-editor-tabs[b-vdyysp425o] {
    width: 100%;
}

.polyline-editor-tab-panel[b-vdyysp425o] {
    padding-top: 8px;
}

/* The title bar doubles as the drag handle (draggable_dialogs.js drags by the
   title bar); the grab cursor signals it. */
.polyline-editor-drag-handle[b-vdyysp425o] {
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
}

/* Validity chip + map-click hint row */
.polyline-editor-toolbar[b-vdyysp425o] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Scrollable numbered vertex list */
.polyline-editor-list[b-vdyysp425o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

.polyline-editor-empty[b-vdyysp425o] {
    padding: 12px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* One vertex row: number | lat | lon | actions */
.polyline-editor-row[b-vdyysp425o] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
}

.polyline-editor-row:nth-child(odd)[b-vdyysp425o] {
    background: var(--mud-palette-background);
}

/* The 1..N vertex number badge */
.polyline-editor-num[b-vdyysp425o] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.polyline-editor-field[b-vdyysp425o] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 0;
    min-width: 0;
}

.polyline-editor-field-label[b-vdyysp425o] {
    font-size: 0.62rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.polyline-editor-input[b-vdyysp425o] {
    width: 100%;
    height: 26px;
    box-sizing: border-box;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.76rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.polyline-editor-input:focus[b-vdyysp425o] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.polyline-editor-row-actions[b-vdyysp425o] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.polyline-editor-add[b-vdyysp425o] {
    margin-top: 2px;
}

/* Standalone entity-name field at the top of the editor (not part of a vertex
   row): full width with a little separation from the vertex list below. */
.polyline-editor-name-field[b-vdyysp425o] {
    width: 100%;
    margin-bottom: 6px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/RectangleEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                   RectangleEditorComp.razor.css                    */
/*   Shared parametric shape-editor dialog styling (centre + size     */
/*   parameters), matching the compact Mud dark theme used by the     */
/*   sibling Point / Polyline / Polygon editors.                      */
/* ================================================================= */

.shape-editor[b-wey2g3fo38] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 320px;
    max-width: 440px;
}

.shape-editor-tabs[b-wey2g3fo38] {
    width: 100%;
}

.shape-editor-tab-panel[b-wey2g3fo38] {
    padding-top: 10px;
}

/* The title bar doubles as the drag handle. */
.shape-editor-drag-handle[b-wey2g3fo38] {
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
}

.shape-editor-toolbar[b-wey2g3fo38] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.shape-editor-field[b-wey2g3fo38] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shape-editor-field-label[b-wey2g3fo38] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.shape-editor-input[b-wey2g3fo38] {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 0.8rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.shape-editor-input:focus[b-wey2g3fo38] {
    outline: none;
    border-color: var(--mud-palette-primary);
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/SimJournalComp.razor.rz.scp.css */
/* The journal fills whatever the instruments panel leaves below the tiles:
   a bounded flex column, so Plotly's responsive resize cannot grow the chart
   to fit a host that grows to fit the chart. */
.sj-host[b-j4wg6otxb7] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sj-title[b-j4wg6otxb7] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    padding: 6px 10px 2px;
}

/* A compact segmented tab row. One word per tab, so the two tabs always fit
   side by side on a phone. */
.sj-tabs[b-j4wg6otxb7] {
    display: flex;
    gap: 2px;
    margin: 2px 10px;
    padding: 2px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray, rgba(127, 127, 127, 0.12));
}

.sj-tabs-inner[b-j4wg6otxb7] {
    margin-top: 0;
    background: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: 0;
    padding: 0;
}

.sj-tab[b-j4wg6otxb7] {
    flex: 1 1 0;
    min-width: 0;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sj-tab:hover[b-j4wg6otxb7] {
    color: var(--mud-palette-text-primary);
}

.sj-tab.active[b-j4wg6otxb7] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

/* Inner tabs read as a sub-level: an underline, not a filled pill. */
.sj-tabs-inner .sj-tab[b-j4wg6otxb7] {
    border-radius: 0;
    height: 26px;
}

.sj-tabs-inner .sj-tab.active[b-j4wg6otxb7] {
    background: transparent;
    color: var(--mud-palette-primary);
    box-shadow: inset 0 -2px 0 var(--mud-palette-primary);
}

.sj-plot[b-j4wg6otxb7] {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/TriangleEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                   TriangleEditorComp.razor.css                    */
/*   Shared parametric shape-editor dialog styling (centre + size     */
/*   parameters), matching the compact Mud dark theme used by the     */
/*   sibling Point / Polyline / Polygon editors.                      */
/* ================================================================= */

.shape-editor[b-0fpx1gadgs] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 320px;
    max-width: 440px;
}

.shape-editor-tabs[b-0fpx1gadgs] {
    width: 100%;
}

.shape-editor-tab-panel[b-0fpx1gadgs] {
    padding-top: 10px;
}

/* The title bar doubles as the drag handle. */
.shape-editor-drag-handle[b-0fpx1gadgs] {
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
}

.shape-editor-toolbar[b-0fpx1gadgs] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.shape-editor-field[b-0fpx1gadgs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shape-editor-field-label[b-0fpx1gadgs] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.shape-editor-input[b-0fpx1gadgs] {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 0.8rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.shape-editor-input:focus[b-0fpx1gadgs] {
    outline: none;
    border-color: var(--mud-palette-primary);
}
/* _content/AspireChatApp.Razor/Components/Tools/Common/TwinFeaturePopupComp.razor.rz.scp.css */
/* The clicked 3D Tiles object's popup. Absolutely positioned: the host's globe container must be
   position: relative. */
.twin-feature-popup[b-rrzzw6nkpc] {
    position: absolute;
    z-index: 12;
    width: 316px;
    max-height: 326px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-top: 3px solid #ffd54f;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    font-size: 0.78rem;
}

.twin-feature-head[b-rrzzw6nkpc] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 6px 4px 10px;
}

.twin-feature-titles[b-rrzzw6nkpc] {
    flex: 1;
    min-width: 0;
}

.twin-feature-title[b-rrzzw6nkpc] {
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twin-feature-kind[b-rrzzw6nkpc] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.twin-feature-rows[b-rrzzw6nkpc] {
    overflow-y: auto;
    padding: 2px 10px 8px;
}

.twin-feature-row[b-rrzzw6nkpc] {
    display: flex;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.twin-feature-label[b-rrzzw6nkpc] {
    flex: 0 0 42%;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.twin-feature-value[b-rrzzw6nkpc] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.twin-feature-note[b-rrzzw6nkpc] {
    padding: 4px 10px 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-style: italic;
}
/* _content/AspireChatApp.Razor/Components/Tools/ConceptMassingTool/ConceptMassingToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                AltitudeViewshedToolComp.razor.css                 */
/*   Layout styles for the altitude viewshed tool (RTL aware):       */
/*   left editor tabs | Cesium globe | top-view chart panel.         */
/*   Mirrors LosVisibilityToolComp.razor.css — the rules are         */
/*   repeated rather than shared because Blazor CSS isolation scopes */
/*   each component's stylesheet to its own generated attribute, so  */
/*   the class names are identical but the scope attribute is not.   */
/*   Editor styles live in LosVisibilityEditorComp.razor.css (reused */
/*   by AltitudeViewshedEditorComp) and chart styles in              */
/*   ViewshedTopViewChartComp.razor.css.                             */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-cb0cgk2zmt] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-cb0cgk2zmt] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-cb0cgk2zmt] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-cb0cgk2zmt] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-cb0cgk2zmt] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-cb0cgk2zmt] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-cb0cgk2zmt] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-cb0cgk2zmt] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-cb0cgk2zmt] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-cb0cgk2zmt] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-cb0cgk2zmt] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-cb0cgk2zmt],
.panel-splitter:active[b-cb0cgk2zmt] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-cb0cgk2zmt] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-cb0cgk2zmt] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-cb0cgk2zmt] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-cb0cgk2zmt] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-cb0cgk2zmt] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-cb0cgk2zmt]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                TOP-VIEW CHART PANEL (host)                         */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-cb0cgk2zmt] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.viewshed-chat-panel[b-cb0cgk2zmt] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.viewshed-chat-panel.collapsed[b-cb0cgk2zmt] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .viewshed-chat-panel.collapsed[b-cb0cgk2zmt] {
    border-right-width: 0;
}

[dir="rtl"] .viewshed-chat-panel[b-cb0cgk2zmt] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.viewshed-chat-host[b-cb0cgk2zmt] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp so  */
/*   every globe offers the same toolbar options)                      */
/* ================================================================= */

.menu-exaggeration-row[b-cb0cgk2zmt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-cb0cgk2zmt] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-cb0cgk2zmt] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-cb0cgk2zmt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-cb0cgk2zmt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-cb0cgk2zmt] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-cb0cgk2zmt] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

/* Day-sequence frame picker in the map toolbar. */
.sunshadow-frame-label[b-cb0cgk2zmt] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-inline-end: 4px;
    align-self: center;
}
/* _content/AspireChatApp.Razor/Components/Tools/ConceptMassingTool/Editors/ConceptMassingEditorComp.razor.rz.scp.css */
/* Compact editor rows for the Concept Massing tool.

   These rules are a deliberate DUPLICATE of LosVisibilityEditorComp's los-* classes.
   Blazor CSS isolation scopes every stylesheet to its own generated attribute, so the
   originals cannot be inherited by class name however identical they look — each tool
   carries its own copy. */

.massing-editor-scroll[b-0xpg7k50yv] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.massing-group[b-0xpg7k50yv] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.massing-group-title[b-0xpg7k50yv] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor / readout sits at the end. */
.massing-row[b-0xpg7k50yv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.massing-row-label[b-0xpg7k50yv] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette. */
.massing-input[b-0xpg7k50yv] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers and dates always read left-to-right, even under the RTL default culture. */
    direction: ltr;
}

.massing-input:focus[b-0xpg7k50yv] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.massing-slider[b-0xpg7k50yv] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.massing-slider-value[b-0xpg7k50yv] {
    min-width: 44px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    direction: ltr;
}

.massing-readout-value[b-0xpg7k50yv] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.massing-check[b-0xpg7k50yv] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

/* Solstice / equinox shortcut chips. */
.massing-chiprow[b-0xpg7k50yv] {
    display: flex;
    gap: 4px;
}

.massing-chip[b-0xpg7k50yv] {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.7rem;
    cursor: pointer;
}

.massing-chip:hover[b-0xpg7k50yv] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.massing-chip:focus-visible[b-0xpg7k50yv] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* Collapsible group. The summary must be element-qualified to beat the user-agent
   `display: list-item`, otherwise the flex layout (and the right-aligned headline
   value) never applies. */
.massing-expander > *:not(summary)[b-0xpg7k50yv] {
    margin-top: 1px;
}

summary.massing-expander-title[b-0xpg7k50yv] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
}

summary.massing-expander-title[b-0xpg7k50yv]::-webkit-details-marker {
    display: none;
}

summary.massing-expander-title[b-0xpg7k50yv]::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}

[dir="rtl"] summary.massing-expander-title[b-0xpg7k50yv]::before {
    border-left: none;
    border-right: 4px solid currentColor;
}

details[open] > summary.massing-expander-title[b-0xpg7k50yv]::before {
    transform: rotate(90deg);
}

[dir="rtl"] details[open] > summary.massing-expander-title[b-0xpg7k50yv]::before {
    transform: rotate(-90deg);
}

.massing-expander-summary[b-0xpg7k50yv] {
    margin-inline-start: auto;
    font-weight: 600;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

.massing-generate-button[b-0xpg7k50yv] {
    margin: 4px 6px;
}

.massing-hint[b-0xpg7k50yv] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    summary.massing-expander-title[b-0xpg7k50yv]::before {
        transition: none;
    }
}

/* A readout that has broken its planning limit, and the note explaining it. */
.massing-readout-alert[b-0xpg7k50yv] {
    color: var(--mud-palette-error);
}

.massing-alert[b-0xpg7k50yv] {
    margin: 2px 0;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--mud-palette-error-hover);
    color: var(--mud-palette-error);
    font-size: 0.7rem;
}
/* _content/AspireChatApp.Razor/Components/Tools/CoordinateConverterTool/CoordinateConverterToolComp.razor.rz.scp.css */
/* ================================================================= */
/*             CoordinateConverterToolComp.razor.css                 */
/*   Layout styles for the coordinate converter tool (RTL aware):    */
/*   left editor tabs | Cesium globe | (optional chat).              */
/*   There is NO right-hand chart, so the globe takes the remainder. */
/*   Mirrors TerrainProfileToolComp.razor.css — the rules are        */
/*   repeated rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute.      */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-go9iynu7ws] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, globe on the left.
   The dir="rtl" attribute alone reverses the flex row, so the visual order
   becomes editor | map -> map | editor. Do NOT add flex-direction: row-reverse
   here: on an rtl container that reverses a SECOND time and cancels out. */
.lostool-container[dir="rtl"][b-go9iynu7ws] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor panel opens at ~1/3 (flex: 1) and the globe at ~2/3 (flex: 2). A
   splitter drag writes inline width/min/max, which overrides the flex basis and
   pins that panel — the other keeps the remainder. */
.lostool-left-panel[b-go9iynu7ws] {
    flex: 1 1 0;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-go9iynu7ws] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-go9iynu7ws] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements never receive this component's CSS scope attribute. */
[b-go9iynu7ws] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-go9iynu7ws] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudBlazor wraps each panel's content in an intermediate .mud-tab-panel div that
   defaults to min-height:auto and flex:0 1 auto — that link does NOT get PanelClass,
   so it grows to its content height and breaks the height chain, leaving the editor's
   own DETAILS scroll region unbounded (it renders at full content height, no scrollbar).
   Force that wrapper to be a bounded flex column so the constraint reaches the editor. */
[b-go9iynu7ws] .lostool-tabs .mud-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-go9iynu7ws] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* COORDINATES / ABOUT tab headers: icon and label side by side (horizontal),
   not stacked. The tab is a flex box (MudBlazor .mud-tab); a narrow tab lets the
   icon + Hebrew label wrap onto two rows. Force a single no-wrap row so the icon
   (.mud-tab-icon-text) stays inline with the text, centred as a group. */
[b-go9iynu7ws] .lostool-tabs .mud-tab {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

[b-go9iynu7ws] .lostool-tabs .mud-tab .mud-tab-icon-text {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-go9iynu7ws] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-go9iynu7ws] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-go9iynu7ws] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-go9iynu7ws],
.panel-splitter:active[b-go9iynu7ws] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-go9iynu7ws] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-go9iynu7ws] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-go9iynu7ws] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-go9iynu7ws] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-go9iynu7ws] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-go9iynu7ws]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*        RIGHT-MOST CHAT PANEL (dedicated ChatBot)                   */
/* ----------------------------------------------------------------- */

.lostool-chat-panel[b-go9iynu7ws] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties.
   !important: after a splitter drag the panel carries INLINE width/min/max
   styles, which would otherwise outrank this class. */
.lostool-chat-panel.collapsed[b-go9iynu7ws] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .lostool-chat-panel.collapsed[b-go9iynu7ws] {
    border-right-width: 0;
}

[dir="rtl"] .lostool-chat-panel[b-go9iynu7ws] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.lostool-chat-host[b-go9iynu7ws] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================================================================= */
/*   Goto dialog (ported from MapExplorerToolComp so every globe tool  */
/*   offers the same toolbar options)                                  */
/* ================================================================= */

.goto-dialog-compact[b-go9iynu7ws] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-go9iynu7ws] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-go9iynu7ws] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-go9iynu7ws] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/CoordinateConverterTool/Editors/CoordinateDetailsComp.razor.rz.scp.css */
/* ================================================================= */
/*             CoordinateDetailsComp.razor.css                       */
/*   DETAILS panel: per-system graphic, validity map and equations.  */
/*   The panel itself scrolls (its host sets overflow-y:auto); these  */
/*   rules only style the content.                                   */
/* ================================================================= */

.cc-details[b-wwia5e0wjx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 8px 12px 8px;
}

/* ----------------------------------------------------------------- */
/*        NESTED TAB-CONTROL (PRINCIPAL / VALIDITY AREA / EQUATIONS)  */
/*   ::deep everywhere — MudTabs is a child COMPONENT, so its         */
/*   rendered elements never carry this component's scope attribute.  */
/* ----------------------------------------------------------------- */

/* Compact tab bar so three tabs fit the narrow left panel. */
[b-wwia5e0wjx] .cc-details-tabs .mud-tabs-toolbar,
[b-wwia5e0wjx] .cc-details-tabs .mud-tab {
    min-height: 34px;
    height: 34px;
}

[b-wwia5e0wjx] .cc-details-tabs .mud-tab {
    font-size: 0.66rem;
    padding: 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 0;
}

/* Content of each aspect tab: graphic + text stacked with a small gap. */
[b-wwia5e0wjx] .cc-details-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 2px 2px 2px;
}

.cc-details-text[b-wwia5e0wjx] {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.cc-details-source[b-wwia5e0wjx] {
    margin: 2px 0 0 0;
    font-size: 0.66rem;
    font-style: italic;
    color: var(--mud-palette-text-disabled);
}

/* ----------------------------------------------------------------- */
/*                          GRAPHIC (SVG)                             */
/* ----------------------------------------------------------------- */

.cc-details-graphic[b-wwia5e0wjx] {
    display: flex;
    justify-content: center;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 6px;
}

.cc-svg[b-wwia5e0wjx] {
    width: 100%;
    max-width: 260px;
    height: auto;
    /* diagrams are LTR by construction regardless of UI culture */
    direction: ltr;
}

/* SVG text labels — targeted with ::deep because <text> lives inside the
   child SVG render fragment which does not carry this component's scope. */
[b-wwia5e0wjx] .cc-svg-lbl {
    font-size: 8px;
    fill: var(--mud-palette-text-secondary);
    font-family: inherit;
}

[b-wwia5e0wjx] .cc-svg-ok {
    fill: #3fb950;
    font-weight: 600;
}

[b-wwia5e0wjx] .cc-svg-warn {
    fill: #f85149;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                          EQUATIONS                                 */
/* ----------------------------------------------------------------- */

.cc-eq-wrap[b-wwia5e0wjx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 6px 8px;
}

.cc-eq-label[b-wwia5e0wjx] {
    margin-top: 4px;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    /* the "(GEO -> ECEF)" annotations read LTR */
    direction: ltr;
    text-align: start;
}

.cc-eq-label:first-child[b-wwia5e0wjx] {
    margin-top: 0;
}

/* Monospace so the maths lines up; always LTR. */
.cc-eq[b-wwia5e0wjx] {
    font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    text-align: start;
    white-space: nowrap;
    overflow-x: auto;
}

.cc-eq-note[b-wwia5e0wjx] {
    margin-top: 4px;
    font-size: 0.66rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    text-align: start;
    white-space: normal;
}
/* _content/AspireChatApp.Razor/Components/Tools/CoordinateConverterTool/Editors/CoordinatesTabEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             CoordinatesTabEditorComp.razor.css                    */
/*   Compact WPF-CoordTabEditor-style rows: label | small editor,    */
/*   inside a MudTabs strip (one tab per coordinate system).         */
/*                                                                   */
/*   The cc-* row classes mirror the LosVisibilityEditorComp los-*   */
/*   rules deliberately (same compact look), but are re-declared     */
/*   here because Blazor CSS isolation rewrites each component's      */
/*   rules to its own generated scope attribute — a foreign-scope    */
/*   rule simply never matches these elements.                       */
/* ================================================================= */

/* Editor column: the tab control sits at its natural height at the TOP, and the
   DETAILS panel below takes the remaining space and scrolls INDEPENDENTLY. So the
   wrapper itself must NOT scroll (overflow hidden) — otherwise the whole thing
   would scroll as one and the lower panel would not have its own scrollbar. */
.cc-editor-scroll[b-hq8pr788la] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ----------------------------------------------------------------- */
/*   MudTabs host: kept at NATURAL height at the top (flex: 0 0 auto)  */
/*   so the coordinate fields never steal the DETAILS panel's space.   */
/*   ::deep — MudTabs is a child COMPONENT, so its rendered elements  */
/*   never receive this component's CSS scope attribute.             */
/* ----------------------------------------------------------------- */

[b-hq8pr788la] .cc-tabs {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

[b-hq8pr788la] .cc-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

[b-hq8pr788la] .cc-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    padding: 4px 0;
}

/* ----------------------------------------------------------------- */
/*                 GROUP (WPF GroupBox look)                         */
/* ----------------------------------------------------------------- */

.cc-group[b-hq8pr788la] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cc-group-title[b-hq8pr788la] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* ----------------------------------------------------------------- */
/*                 COMPACT EDITOR ROW                                */
/* ----------------------------------------------------------------- */

.cc-row[b-hq8pr788la] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.cc-row-label[b-hq8pr788la] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette */
.cc-input[b-hq8pr788la] {
    width: 150px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.cc-input:focus[b-hq8pr788la] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* ----------------------------------------------------------------- */
/*                 DETAILS PANEL (lower, scrollable)                 */
/* ----------------------------------------------------------------- */

/* A slim header bar separating the tab control from the DETAILS panel. */
.cc-details-panel-header[b-hq8pr788la] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cc-details-panel-title[b-hq8pr788la] {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-primary);
}

/* THE lower panel scrollbar the user asked for: this region takes the remaining
   height and scrolls on its own, so the graphic / validity map / equations for a
   system are always reachable however tall they are.

   The flex chain up to the height-constrained left panel runs through several
   MudBlazor-generated wrappers; if any of them fails to propagate the height
   constraint the flex:1 alone would let this region grow to its content height and
   the scrollbar would never engage. A viewport-relative max-height is a hard cap
   that guarantees a scrollbar appears once the content is tall — independent of the
   flex chain. 42vh keeps roughly the top half of the panel for the tab control. */
.cc-details-scroll[b-hq8pr788la] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 42vh;
    overflow-y: auto;
    overflow-x: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/DocumentCreationTool/DocumentCreationToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                DocumentCreationToolComp.razor.css                   */
/*   Left tabs + the centre editor hosts. The editor's own styles     */
/*   ship with gv-docs.css / gv-pdf.css (prefixed gvd- / gvp-).        */
/* ================================================================= */

/* MudTabs must flex so the FILE panel can scroll inside the column. */
[b-udcmaw3il8] .wp-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-udcmaw3il8] .wp-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-udcmaw3il8] .wp-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.wp-dir-row[b-udcmaw3il8] {
    display: flex;
    gap: 4px;
}

.wp-dir-row[b-udcmaw3il8]  .mud-button-root {
    flex: 1 1 0;
}

/* ---------------- centre ---------------- */

.wp-center[b-udcmaw3il8] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

[b-udcmaw3il8] .wp-busy {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 20;
}

.wp-host[b-udcmaw3il8] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.wp-hidden[b-udcmaw3il8] {
    display: none;
}
/* _content/AspireChatApp.Razor/Components/Tools/DriveSimulatorTool/Charts/DriveInstrumentsComp.razor.rz.scp.css */
/* ================================================================= */
/*                 DriveInstrumentsComp.razor.css                    */
/*   Instruments panel: tiles and progress; the journal chart is SimJournalComp.        */
/* ================================================================= */

.dsi-host[b-2f42eji0go] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                     INSTRUMENT TILES                               */
/* ----------------------------------------------------------------- */

.dsi-tiles[b-2f42eji0go] {
    display: grid;
    /* Two columns rather than four in a row: the panel is a quarter of the
       screen, and four tiles side by side would clip their values. */
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
    flex: 0 0 auto;
}

.dsi-tile[b-2f42eji0go] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background);
    min-height: 62px;
}

.dsi-tile-label[b-2f42eji0go] {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dsi-tile-value[b-2f42eji0go] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    /* Tabular figures stop the value jittering as digits change width four
       times a second. */
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.dsi-tile-unit[b-2f42eji0go] {
    font-size: 0.6rem;
    color: var(--mud-palette-text-secondary);
}

/* A tile whose value has gone outside a safe band is tinted, so speeding or
   hard cornering reads at a glance without having to compare two numbers. */
.dsi-tile.over .dsi-tile-value[b-2f42eji0go] {
    color: var(--mud-palette-warning);
}

.dsi-tile.over[b-2f42eji0go] {
    border-color: var(--mud-palette-warning);
}

/* ----------------------------------------------------------------- */
/*                       JOURNEY PROGRESS                             */
/* ----------------------------------------------------------------- */

.dsi-progress[b-2f42eji0go] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 10px 2px;
    flex: 0 0 auto;
}

.dsi-progress-bar[b-2f42eji0go] {
    height: 6px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
    /* The bar fills left-to-right in both cultures: it represents distance
       along a journey, not text. */
    direction: ltr;
}

.dsi-progress-fill[b-2f42eji0go] {
    height: 100%;
    background: var(--mud-palette-primary);
    transition: width .3s ease;
}

.dsi-progress-text[b-2f42eji0go] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.dsi-arrived[b-2f42eji0go] {
    margin-inline-start: auto;
    color: var(--mud-palette-success);
    font-weight: 600;
}
/* _content/AspireChatApp.Razor/Components/Tools/DriveSimulatorTool/DriveSimulatorToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                DriveSimulatorToolComp.razor.css                  */
/*   Layout styles for the flight simulator (RTL aware):             */
/*   left editor tabs | Cesium globe + HUD | instruments panel.      */
/*                                                                    */
/*   Editor styles live in FlightSimulatorEditorComp.razor.css and   */
/*   instrument styles in FlightInstrumentsComp.razor.css.           */
/*                                                                    */
/*   The HUD overlay itself is NOT styled here: it is built in JS by  */
/*   flightsimulator_tool_cesium_helper.js, and Blazor's scoped CSS   */
/*   only matches elements Blazor rendered. Those rules live in the   */
/*   global main.css under the .gv-fs-hud-* prefix.                   */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.dstool-container[b-3s80lm6sfn] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, instruments on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction). Do NOT add flex-direction: row-reverse
   here: on an rtl container that reverses a SECOND time and cancels out,
   leaving the LTR layout. */
.dstool-container[dir="rtl"][b-3s80lm6sfn] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / globe / instruments panels open at 25% / 50% / 25%
   (flex: 1 / 2 / 1, so the free space is split with the globe getting half).
   A splitter drag writes inline width/min/max, which overrides the flex basis
   and pins that panel — the others keep sharing the remainder. */
.dstool-left-panel[b-3s80lm6sfn] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .dstool-left-panel[b-3s80lm6sfn] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.dstool-left-panel.collapsed[b-3s80lm6sfn] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-3s80lm6sfn] .dstool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-3s80lm6sfn] .dstool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-3s80lm6sfn] .dstool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Glass-cockpit tab host — the PFD/MFD canvas fills its whole tab panel.
   Without an explicit flex chain the canvas wrapper collapses and the
   instrument is drawn into a sliver at the top of the panel.
   ::deep because MudTabPanel renders the wrapper this div sits in, so that
   wrapper never carries this component's scoped-CSS attribute — styling only
   the inner div leaves an unstretched parent between it and the panel, which
   is exactly what pinned the PFD to 237px inside a 730px tab. */
[b-3s80lm6sfn] .dstool-tab-panel > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.dstool-display-host[b-3s80lm6sfn] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* CHAT tab host — lets the embedded per-tool ChatBotComp fill the panel */
.dstool-chat-host[b-3s80lm6sfn] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-3s80lm6sfn] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-3s80lm6sfn] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-3s80lm6sfn] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-3s80lm6sfn],
.panel-splitter:active[b-3s80lm6sfn] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-3s80lm6sfn] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                  CENTER PANEL (Globe + HUD)                        */
/* ----------------------------------------------------------------- */

.dstool-center-panel[b-3s80lm6sfn] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-3s80lm6sfn] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
    /* The toolbar holds a button group and a hint chip; on a narrow panel it
       wraps rather than pushing the zoom buttons off the edge. */
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------- */
/*              CAMERA-MODE EXCLUSIVE TOGGLE GROUP                    */
/* ----------------------------------------------------------------- */

/* A hand-built segmented control rather than MudButtonGroup: the group
   normalises its children's variant/colour, which is exactly what has to
   DIFFER here — the active segment must read as pressed. Buttons are joined
   by collapsing the borders between them. */
.camera-mode-group[b-3s80lm6sfn] {
    display: inline-flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: hidden;
}

/* ::deep — MudButton is a child component, so its rendered <button> never
   carries this component's scope attribute. */
[b-3s80lm6sfn] .camera-mode-button {
    border-radius: 0;
    margin: 0;
    /* Collapse the shared border so the three read as one control. */
    margin-inline-start: -1px;
    min-width: 0;
    white-space: nowrap;
}

[b-3s80lm6sfn] .camera-mode-group > *:first-child .camera-mode-button,
[b-3s80lm6sfn] .camera-mode-button:first-child {
    margin-inline-start: 0;
    border-start-start-radius: 4px;
    border-end-start-radius: 4px;
}

[b-3s80lm6sfn] .camera-mode-button:last-child {
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
}

/* The active segment sits above its neighbours so its filled edge is not
   clipped by the next button's outline. */
[b-3s80lm6sfn] .camera-mode-button.active {
    position: relative;
    z-index: 1;
    font-weight: 700;
}

.map-area[b-3s80lm6sfn] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* position: relative is load-bearing — the JS helper appends the absolutely
   positioned HUD overlay INSIDE this element, so this is what the HUD's
   inset: 0 resolves against. Without it the HUD would size to the page. */
.map-container[b-3s80lm6sfn] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
    /* The globe takes keyboard focus so the flight controls work; the default
       focus ring around the whole 3D view is noise, and the HUD already makes
       it obvious the simulator is live. */
    outline: none;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-3s80lm6sfn]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                  INSTRUMENTS PANEL (host)                          */
/* ----------------------------------------------------------------- */

.dstool-side-panel[b-3s80lm6sfn] {
    flex: 1 1 0;
    min-width: 280px; /* equal third alongside the editor and globe panels */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* The host between the panel and the instruments MUST be a bounded flex
   child. Without a rule of its own it sized to its content, and Plotly's
   responsive resize then grew the chart to fit the host that grew to fit the
   chart — an 11,800 px plot clipped by the panel, showing only its legend. */
.dstool-instruments-host[b-3s80lm6sfn] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.dstool-chat-panel[b-3s80lm6sfn] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate.
   !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.dstool-chat-panel.collapsed[b-3s80lm6sfn] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .dstool-chat-panel.collapsed[b-3s80lm6sfn] {
    border-right-width: 0;
}

[dir="rtl"] .dstool-chat-panel[b-3s80lm6sfn] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ----------------------------------------------------------------- */
/*        RIGHT PANEL collapsed to a rail (its header button)         */
/* ----------------------------------------------------------------- */

/* The tabs stay MOUNTED (hidden), so the social lists and the journal chart
   keep their state; only the header's expand button shows on the rail. */
.dstool-side-panel[b-3s80lm6sfn] {
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
}

.dstool-side-panel.collapsed[b-3s80lm6sfn] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px !important;
    max-width: 48px;
}

.dstool-side-panel.collapsed > :not(.panel-header)[b-3s80lm6sfn] {
    display: none !important;
}

.dstool-side-panel.collapsed .panel-title[b-3s80lm6sfn],
.dstool-left-panel.collapsed .panel-title[b-3s80lm6sfn] {
    display: none;
}

.dstool-side-panel.collapsed .panel-header[b-3s80lm6sfn],
.dstool-left-panel.collapsed .panel-header[b-3s80lm6sfn] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/DriveSimulatorTool/Editors/DriveSimulatorEditorComp.razor.rz.scp.css */
/* =================================================================
                DriveSimulatorEditorComp.razor.css

   Compact single-row parameter rows, so the whole editor fits the
   left panel without scrolling.

   These rules DUPLICATE the LosVisibilityTool's .los-* pattern under
   a .ds- prefix. That is deliberate and not an oversight: Blazor CSS
   isolation scopes every stylesheet to its own generated attribute,
   so the LOS editor's rules do not apply here however identical the
   class names are. Duplication is the only way to share the look.
   ================================================================= */

.ds-editor-scroll[b-ivlhekw7rh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px;
    /* The panel should not scroll, but a very small viewport must still
       reach every control rather than clipping it. */
    overflow-y: auto;
    max-height: 100%;
}

/* ---- Groups ---- */

.ds-group[b-ivlhekw7rh] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ds-group-title[b-ivlhekw7rh] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0;
}

/* ---- Rows ---- */

.ds-row[b-ivlhekw7rh] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.ds-row-label[b-ivlhekw7rh] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Inputs ---- */

.ds-input[b-ivlhekw7rh] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    /* Numbers and coordinates read left-to-right even under the RTL
       default culture, where they would otherwise render reversed. */
    direction: ltr;
}

.ds-input:focus[b-ivlhekw7rh] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.ds-checkbox[b-ivlhekw7rh] {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.ds-slider[b-ivlhekw7rh] {
    flex: 1;
    height: 24px;
    direction: ltr;
    accent-color: var(--mud-palette-primary);
}

.ds-slider-value[b-ivlhekw7rh] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
}

/* ---- Readouts ---- */

.ds-readout-value[b-ivlhekw7rh] {
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    text-align: end;
}

.ds-warn[b-ivlhekw7rh] {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

/* ---- Notices ---- */

.ds-notice[b-ivlhekw7rh] {
    font-size: .72rem;
    line-height: 1.35;
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning-hover);
    border: 1px solid var(--mud-palette-warning);
    border-radius: 4px;
    padding: 4px 6px;
    margin-bottom: 2px;
}

/* ---- Topic tabs ---- */

/* One word per tab; the grid wraps to a second row rather than squeezing a
   label, so every topic still fits a phone-width panel. */
.ds-sections[b-ivlhekw7rh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray, rgba(127, 127, 127, 0.12));
    flex: 0 0 auto;
}

.ds-section-tab[b-ivlhekw7rh] {
    min-width: 0;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-section-tab:hover[b-ivlhekw7rh] {
    color: var(--mud-palette-text-primary);
}

.ds-section-tab.active[b-ivlhekw7rh] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.ds-section-body[b-ivlhekw7rh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A group title with its headline value (friend count, favourites) aligned
   to the far end. */
.ds-summary[b-ivlhekw7rh] {
    display: flex;
    align-items: center;
}

.ds-empty[b-ivlhekw7rh] {
    padding: 12px 6px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.ds-summary-value[b-ivlhekw7rh] {
    margin-inline-start: auto;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: .72rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

/* ---- Keyboard reference ---- */

.ds-keys[b-ivlhekw7rh] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 0 2px;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.ds-keys kbd[b-ivlhekw7rh] {
    display: inline-block;
    min-width: 18px;
    padding: 1px 4px;
    margin-inline-end: 2px;
    text-align: center;
    font-family: inherit;
    font-size: .7rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
}

/* ---- Actions ---- */

.ds-actions[b-ivlhekw7rh] {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Charts/FlightChartComp.razor.rz.scp.css */
/* ================================================================= */
/*                  FlightChartComp.razor.css                        */
/*   Series-tab strip + Plotly canvas + run summary.                 */
/* ================================================================= */

.chart-host[b-fjcmvmpt73] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                       SERIES TABS                                  */
/* ----------------------------------------------------------------- */

/* The strip must not stretch to fill the column — it sizes to its
   content and the plot takes the rest. */
.chart-tabs[b-fjcmvmpt73] {
    flex: 0 0 auto !important;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.chart-tab[b-fjcmvmpt73] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.chart-tab:hover[b-fjcmvmpt73] {
    background: var(--mud-palette-action-default-hover);
}

.chart-tab.active[b-fjcmvmpt73] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                     PLOT/TABLE AREA                                */
/* ----------------------------------------------------------------- */

.chart-plot-area[b-fjcmvmpt73] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;

    /* Anchors the empty-state overlay, which sits on top of the axes rather
       than replacing them. */
    position: relative;
}

.chart-table-area[b-fjcmvmpt73] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Shown over an empty chart. Centred and non-interactive so it explains what
   to do without covering the axes it is drawn over or swallowing a click meant
   for the plot's own controls. */
.chart-empty-overlay[b-fjcmvmpt73] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    pointer-events: none;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* ----------------------------------------------------------------- */
/*                       RUN SUMMARY                                  */
/* ----------------------------------------------------------------- */

.chart-summary[b-fjcmvmpt73] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 6px 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.72rem;
}

.chart-summary-item[b-fjcmvmpt73] {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.chart-summary-label[b-fjcmvmpt73] {
    color: var(--mud-palette-text-secondary);
}

/* Numbers always read left-to-right, even under an RTL page. */
.chart-summary-value[b-fjcmvmpt73] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

/* ---------------- FUSION CHANNEL SUB-TABS ---------------- */
/* Nested one level under the series tabs, mirroring the desktop's nested
   plot tabs. Visually lighter than the parent row so the hierarchy reads. */
.chart-subtabs[b-fjcmvmpt73] {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 2px 6px 0 6px;
}

.chart-subtab[b-fjcmvmpt73] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 8px;
    white-space: nowrap;
}

.chart-subtab:hover[b-fjcmvmpt73] {
    color: var(--mud-palette-text-primary);
}

.chart-subtab.active[b-fjcmvmpt73] {
    border-bottom-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* The tier the displayed fusion came from. Small and quiet — it is a
   caveat, not a heading — but never hidden: a reader must not have to
   guess whether they are looking at real sensors or a simulation. */
.chart-source-note[b-fjcmvmpt73] {
    flex: 0 0 auto;
    padding: 2px 8px;
    font-size: 0.66rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* ---------------- MAXIMISE TOGGLE ---------------- */
/* Pushed to the end of the tab strip, so it reads as a control on the
   chart rather than another series to pick. */
.chart-maximise[b-fjcmvmpt73] {
    margin-inline-start: auto;
    background: none;
    border: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 6px;
}

.chart-maximise:hover[b-fjcmvmpt73] {
    color: var(--mud-palette-primary);
}

/* ----------------------------------------------------------------- */
/*                       DATA TABLE                                  */
/* ----------------------------------------------------------------- */

.chart-table-scroll[b-fjcmvmpt73] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
}

.chart-table[b-fjcmvmpt73] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.chart-table thead[b-fjcmvmpt73] {
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    border-bottom: 2px solid var(--mud-palette-lines-default);
    z-index: 1;
}

.chart-table th[b-fjcmvmpt73] {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.chart-table th:last-child[b-fjcmvmpt73] {
    border-right: none;
}

.chart-table tbody tr[b-fjcmvmpt73] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.chart-table tbody tr:hover[b-fjcmvmpt73] {
    background: var(--mud-palette-action-default-hover);
}

.chart-table td[b-fjcmvmpt73] {
    padding: 4px 8px;
    color: var(--mud-palette-text-primary);
    border-right: 1px solid var(--mud-palette-divider);
}

.chart-table td:last-child[b-fjcmvmpt73] {
    border-right: none;
}

.chart-table td.numeric[b-fjcmvmpt73] {
    text-align: right;
    font-family: Consolas, "Courier New", monospace;
}

/* ---- The IMU the shown flight was flown with (role tabs) ----
   One line, elided; the full text is the tooltip. Amber when the Sensors tab
   has changed since the flight - the desktop's #b26a00. */
.chart-flown-imu[b-fjcmvmpt73] {
    flex: 0 0 auto;
    padding: 1px 8px 2px 8px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-flown-imu.stale[b-fjcmvmpt73] {
    color: #b26a00;
    font-weight: 600;
}

/* ---- Legend: the desktop's LegendCheckBox panel ----
   A child of the plot, in the chart area's top-right corner below the title
   (top/right set from the plot margins inline). */
.chart-legend[b-fjcmvmpt73] {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 60%;
    padding: 3px 6px;
    /* the theme's surface, translucent, so the legend reads over the data in light and dark mode */
    background: color-mix(in srgb, var(--mud-palette-surface) 80%, transparent);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    pointer-events: auto;
}

.chart-legend-entry[b-fjcmvmpt73] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    text-align: start;
    max-width: 100%;
}

.chart-legend-box[b-fjcmvmpt73] {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    box-sizing: border-box;
    border: 2px solid;
    border-radius: 1px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chart-legend-entry:hover .chart-legend-box[b-fjcmvmpt73] {
    border-color: #333333 !important;
}

.chart-legend-box svg[b-fjcmvmpt73] {
    width: 9px;
    height: 9px;
    overflow: visible;
}

.chart-legend-box path[b-fjcmvmpt73] {
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-legend-text[b-fjcmvmpt73] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-legend-outage[b-fjcmvmpt73] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.chart-legend-swatch[b-fjcmvmpt73] {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 1px;
    opacity: 0.55;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/DroneFlightSimToolComp.razor.rz.scp.css */
/* ================================================================= */
/*              DroneFlightSimToolComp.razor.css                     */
/*   Three-panel tool layout: route editor | Cesium globe | waypoint */
/*   table. Mirrors AltitudeViewshedToolComp.razor.css so every      */
/*   Cesium tool's shell looks identical.                            */
/*                                                                   */
/*   The shared shell is duplicated rather than imported: Blazor CSS */
/*   isolation rewrites each component's rules to its own generated  */
/*   scope attribute, so an unscoped or foreign-scope rule simply    */
/*   never matches these elements.                                   */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-wv0tlclx7u] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL support — editor on the right, table on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction). Do NOT add flex-direction: row-reverse:
   on an rtl container that reverses a SECOND time and cancels out, leaving
   the LTR layout. */
.lostool-container[dir="rtl"][b-wv0tlclx7u] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* Editor / globe / table open at 25% / 50% / 25% (flex 1 / 2 / 1, so the free
   space is split with the globe getting half). A splitter drag writes inline
   width/min/max, which overrides the flex basis and pins that panel. */
.lostool-left-panel[b-wv0tlclx7u] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-wv0tlclx7u] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-wv0tlclx7u] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements never receive this component's CSS scope attribute — unscoped
   rules would silently not match and the editor gets clipped with no
   scrollbar. */
[b-wv0tlclx7u] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The strips are chrome too: a tab body taller than the column must not be
   paid for by the tabs that reach the other tabs. Both levels, since the ROUTE
   sub-tabs sit inside the main tab's own body and shrink with it. */
[b-wv0tlclx7u] .lostool-tabs > .mud-tabs-tabbar,
[b-wv0tlclx7u] .lostool-subtabs > .mud-tabs-tabbar {
    flex: 0 0 auto;
}

[b-wv0tlclx7u] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The main tab strip holds five tabs (ROUTE, SENSORS, ALGORITHMS, ABOUT, THEORY) in a
   ~460 px column. main.css gives every tab an equal share (flex 1 1 0, 16 px padding,
   all !important), which truncated ALGORITHMS: here each tab takes its label's width,
   compact as SurveyMissionSimulationTool's plan tabs - hence the !important too. */
[b-wv0tlclx7u] .dfs-main-tabs > .mud-tabs-tabbar .mud-tabs-tabbar-wrapper {
    gap: 2px !important;
}

[b-wv0tlclx7u] .dfs-main-tabs > .mud-tabs-tabbar .mud-tabs-tabbar-wrapper > .mud-tooltip-root {
    flex: 1 1 auto !important;
}

[b-wv0tlclx7u] .dfs-main-tabs > .mud-tabs-tabbar .mud-tab {
    padding: 2px 5px !important;
    letter-spacing: 0 !important;
    font-size: 0.72rem;
}

[b-wv0tlclx7u] .dfs-main-tabs > .mud-tabs-tabbar .mud-tab .mud-tab-icon-text {
    margin-right: 3px !important;
    margin-inline-end: 3px !important;
}

[b-wv0tlclx7u] .dfs-main-tabs > .mud-tabs-tabbar .mud-tab .mud-tab-icon-text.mud-icon-root,
[b-wv0tlclx7u] .dfs-main-tabs > .mud-tabs-tabbar .mud-tab .mud-tab-icon-text .mud-icon-root {
    font-size: 0.95rem !important;
    width: 0.95rem !important;
    height: 0.95rem !important;
}

/* A phone (PHONE display mode, down to 360 px) has no room for the icons: the
   five main tabs are text only there, which keeps THEORY inside the strip. The
   mode, not the width, decides (see the display-mode rule in main.css). */
body[data-display-mode="PHONE"] .lostool-container[b-wv0tlclx7u]  .dfs-main-tabs > .mud-tabs-tabbar .mud-tab .mud-tab-icon-text {
    display: none !important;
}

/* The nested strips (ROUTE's Parameters | Geography | Run | Project and its
   inner Parameters | Waypoints) share the column too: labels sized to their
   text and compact, so four sub-tabs fit a 390 px phone without the first one
   being cut off at the edge (measured: "PARAMETERS" lost its first letter). */
[b-wv0tlclx7u] .lostool-subtabs > .mud-tabs-tabbar .mud-tabs-tabbar-wrapper {
    gap: 2px !important;
}

[b-wv0tlclx7u] .lostool-subtabs > .mud-tabs-tabbar .mud-tabs-tabbar-wrapper > .mud-tooltip-root {
    flex: 1 1 auto !important;
}

[b-wv0tlclx7u] .lostool-subtabs > .mud-tabs-tabbar .mud-tab {
    padding: 2px 6px !important;
    letter-spacing: 0 !important;
    font-size: 0.74rem;
}

[b-wv0tlclx7u] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* EVERY TAB BODY SCROLLS. The active tab panel (main tabs and the nested
   ROUTE sub-tabs alike - both use PanelClass lostool-tab-panel) is itself a
   vertical scroll container, so whatever a tab holds stays reachable at any
   window height and in every display mode. It was not: the SENSORS tab's
   content was 677 px tall in a 486 px panel whose overflow:hidden clipped the
   noise seed and the VIO fusion fields with no scrollbar anywhere (measured,
   LAPTOP 1280x720). A tab body that has its own scroll region (the waypoint
   table, the RUN scroll) still fills the panel through the flex column, so the
   outer scrollbar only appears when the content really is taller. */
[b-wv0tlclx7u] .lostool-tab-panel > .mud-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* The NESTED MudTabs (ROUTE's Parameters | Geography | Run) needs the same
   treatment as .lostool-tabs above, and had none at all — the class was on the
   markup with no rule behind it. Without it the inner host is a plain block, so
   the height bound stops at the outer panel: the inner tab panel grows to its
   content and .lostool-tab-panel's overflow:hidden clips whatever does not fit,
   with nothing scrollable anywhere in the chain.

   That is what put the flight-events list off the bottom of a phone screen after
   a run, taking the replay controls below it out of reach. A scroll container is
   only honoured if every ancestor between it and the panel is a flex column that
   is allowed to shrink — hence min-height:0 on each. */
[b-wv0tlclx7u] .lostool-subtabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-wv0tlclx7u] .lostool-subtabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The RUN sub-tab scrolls as one region: the run panel, the flight events and
   the replay controls together. Its siblings (Parameters, Geography) scroll an
   inner region of their own instead. */
.dfs-run-scroll[b-wv0tlclx7u] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

/* flex: 0 0 auto — the header is a flex item of the panel column, and a tab
   body taller than the panel makes that column's free space negative, which
   every shrinkable sibling then pays for. The title row was squeezed to half
   its height by a long flight-events list (2026-09-20); it is chrome, so it
   keeps its size and the tab body below scrolls instead. */
.panel-header[b-wv0tlclx7u] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-wv0tlclx7u] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-wv0tlclx7u] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-wv0tlclx7u],
.panel-splitter:active[b-wv0tlclx7u] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-wv0tlclx7u] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-wv0tlclx7u] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-wv0tlclx7u] {
    display: flex;
    align-items: center;
    /* Wraps in a narrow map panel (LAPTOP / TABLET / PHONE) instead of letting
       the hint chip slide over the CAMERA button, which it covered there. */
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-wv0tlclx7u] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* RUN TRAJECTORY over the globe, bottom-centre.
   inset-inline rather than left/right so it stays centred under RTL, and clear
   of the camera overlay, which occupies the bottom INLINE-END corner. The bar
   itself ignores pointer events so it never steals a drag from the globe behind
   it; the button inside takes them back. */
.dfs-map-run-bar[b-wv0tlclx7u] {
    position: absolute;
    inset-block-end: 16px;
    inset-inline: 0;
    z-index: 21;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.dfs-map-run-bar[b-wv0tlclx7u]  .mud-button-root {
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* On a phone the camera overlay is capped at 45% width and sits in the same
   bottom strip, so the centred button is lifted clear of it rather than
   overlapping. */
@media (max-width: 660px) {
    .dfs-map-run-bar[b-wv0tlclx7u] {
        inset-block-end: 10px;
    }
}

.map-container[b-wv0tlclx7u] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it out of the way */
.map-container[b-wv0tlclx7u]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*              SYNTHESIZED CAMERA OVERLAY                            */
/* ----------------------------------------------------------------- */

/* Floats over the globe at a fixed corner. Anchored with inset-inline so
   it flips to the other side under RTL along with everything else. */
.camera-overlay[b-wv0tlclx7u] {
    position: absolute;
    inset-block-end: 28px;
    inset-inline-end: 12px;
    width: 320px;
    max-width: 45%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.camera-header[b-wv0tlclx7u] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 2px 8px;
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

.camera-title[b-wv0tlclx7u] {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 4:3, matching the default frame size, so the box does not jump when the
   first frame replaces the placeholder. */
.camera-body[b-wv0tlclx7u] {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    min-height: 120px;
}

.camera-frame[b-wv0tlclx7u] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.camera-status[b-wv0tlclx7u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.camera-error[b-wv0tlclx7u] {
    color: var(--mud-palette-error);
}

.camera-footer[b-wv0tlclx7u] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    padding: 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-lines-default);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- */
/*                 RIGHT PANEL (waypoint table)                       */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-wv0tlclx7u] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    /* Scrolls when the chart and the imagery do not fit their minimum heights
       (160 + 150 px plus their strips) - a short laptop or a phone - rather
       than clipping the imagery tabs and the gallery. */
    overflow-x: hidden;
    overflow-y: auto;
    /* Positioning context for the maximised chart, which fills this panel.
       Without it the chart's inset:0 would escape to the viewport and cover
       the map and editor too. */
    position: relative;
}

/* The chart takes the upper half of the results panel; the waypoint table
   takes the lower. Both scroll internally so the shell never does. */
.results-chart-host[b-wv0tlclx7u] {
    flex: 1 1 55%;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ----------------------------------------------------------------- */
/*                     FLIGHT IMAGERY                                 */
/* ----------------------------------------------------------------- */

/* The lower half of the results panel. The chart host above is flex 55%,
   so this takes the remainder; min-height keeps the strip usable rather
   than letting the charts squeeze it to a sliver on a short window. */
.results-imagery-host[b-wv0tlclx7u] {
    flex: 1 1 45%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* A plain button row rather than MudTabs: there are exactly two, they need
   no ripple or indicator animation, and this keeps the strip's own scroll
   container out of a MudTabs panel that would fight it for height. */
.imagery-tabs[b-wv0tlclx7u] {
    flex: 0 0 auto;
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.imagery-tab[b-wv0tlclx7u] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.imagery-tab:hover[b-wv0tlclx7u] {
    color: var(--mud-palette-text-primary);
}

.imagery-tab.active[b-wv0tlclx7u] {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

/* How many frames the gallery holds, so the count is readable without
   opening the tab. */
.imagery-count[b-wv0tlclx7u] {
    padding: 0 0.3rem;
    border-radius: 8px;
    background: var(--mud-palette-action-disabled-background);
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
}

.imagery-body[b-wv0tlclx7u] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #111;
}

/* The single sensor frame, fitted whole rather than cropped: the edges of
   a nadir frame are where a too-small mosaic shows up as black corners,
   and cropping them would hide exactly that. */
.imagery-frame[b-wv0tlclx7u] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.imagery-status[b-wv0tlclx7u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 100%;
    padding: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    text-align: center;
}

.imagery-error[b-wv0tlclx7u] {
    color: var(--mud-palette-warning);
}

/* auto-fill rather than auto-fit: an empty last row stays the same width as
   a full one, so thumbnails do not resize as the gallery fills in. */
.imagery-grid[b-wv0tlclx7u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 4px;
    padding: 4px;
}

.imagery-thumb[b-wv0tlclx7u] {
    position: relative;
    display: block;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 2px;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.imagery-thumb:hover[b-wv0tlclx7u],
.imagery-thumb:focus-visible[b-wv0tlclx7u] {
    border-color: var(--mud-palette-primary);
    outline: none;
}

.imagery-thumb img[b-wv0tlclx7u] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* The time into the flight, over the image. Every thumbnail needs it —
   an unlabelled strip of terrain says nothing about where in the sortie
   the trouble started. */
.imagery-thumb-caption[b-wv0tlclx7u] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1px 3px;
    background: rgba(0, 0, 0, 0.6);
    color: #eee;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

/* ----------------------------------------------------------------- */
/*                     PLAYBACK SCRUBBER                              */
/* ----------------------------------------------------------------- */

.playback-bar[b-wv0tlclx7u] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* The slider always runs left-to-right: it is a time axis, and mirroring
   it under RTL would put the start of the flight on the right. */
.playback-slider[b-wv0tlclx7u] {
    flex: 1 1 auto;
    min-width: 0;
    direction: ltr;
    accent-color: var(--mud-palette-primary);
}

.playback-time[b-wv0tlclx7u] {
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    min-width: 40px;
    text-align: end;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.droneflightsim-chat-panel[b-wv0tlclx7u] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
    transition: flex-grow 0.8s cubic-bezier(0.32, 0, 0.2, 1), flex-basis 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1);
}

/* Collapsed to zero rather than unmounted, so the conversation survives a
   re-open and the width transition has a live element to animate.

   This panel has no fixed width - it takes a SHARE of the row (flex-grow) - so the
   open/close animation is flex-grow easing between 1 and 0. Deliberately no
   `max-width: 0` here: max-width has no value to animate FROM on the open state, so
   it would snap to zero on frame one and clamp the whole transition away. flex-grow
   0 with flex-basis 0, min-width 0 and overflow hidden already collapses it. */
.droneflightsim-chat-panel.collapsed[b-wv0tlclx7u] {
    flex: 0 0 0;
    min-width: 0;
    border: none;
}

.droneflightsim-chat-host[b-wv0tlclx7u] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*            GNSS-DENIED ANALYSIS (the tool's conclusion)            */
/* ----------------------------------------------------------------- */

.analysis-bar[b-wv0tlclx7u] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
}

.analysis-running[b-wv0tlclx7u] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* Label | value pairs, one method per row. */
.analysis-grid[b-wv0tlclx7u] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px 10px;
    align-items: baseline;
    font-size: 0.74rem;
}

/* Each label carries its track's colour, so the number ties back to the
   line on the globe and in the chart without a separate legend. */
.analysis-label[b-wv0tlclx7u] {
    font-weight: 600;
    white-space: nowrap;
}

.analysis-ins[b-wv0tlclx7u] {
    color: #FF9800;
}

.analysis-vio[b-wv0tlclx7u] {
    color: #E91E63;
}

.analysis-fused[b-wv0tlclx7u] {
    color: #00BCD4;
}

/* Numbers always read left-to-right, even under an RTL page. */
.analysis-value[b-wv0tlclx7u] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    text-align: end;
}

.analysis-verdict[b-wv0tlclx7u] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mud-palette-success);
}

.analysis-hint[b-wv0tlclx7u] {
    font-size: 0.66rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.analysis-error[b-wv0tlclx7u] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--mud-palette-error);
}

/* The table scrolls inside its own panel — a long route must never make the
   whole tool shell scroll. */
.waypoint-table-scroll[b-wv0tlclx7u] {
    flex: 1 1 45%;
    min-height: 0;
    overflow: auto;
}

.waypoint-table[b-wv0tlclx7u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.waypoint-table th[b-wv0tlclx7u] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 4px 6px;
    text-align: start;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.waypoint-table td[b-wv0tlclx7u] {
    padding: 2px 6px;
    border-bottom: 1px solid var(--mud-palette-divider);
    white-space: nowrap;
}

.waypoint-table tbody tr[b-wv0tlclx7u] {
    cursor: pointer;
}

.waypoint-table tbody tr:hover[b-wv0tlclx7u] {
    background: var(--mud-palette-action-default-hover);
}

.waypoint-table tbody tr.selected[b-wv0tlclx7u] {
    background: var(--mud-palette-primary-hover);
}

/* Coordinates and numeric editors always read left-to-right, even under an
   RTL page. The page-root RTL rule sets text-align:right on inputs, so LTR
   fields must restate their alignment with !important to win. */
.waypoint-table .numeric[b-wv0tlclx7u] {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: start;
}

/* ---- Route CSV and "Transform route" under the waypoint table ---- */
.waypoint-tools[b-wv0tlclx7u] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 6px 6px 6px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.75rem;
}

.waypoint-tools-row[b-wv0tlclx7u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.waypoint-tools-title[b-wv0tlclx7u] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    margin-top: 2px;
}

.waypoint-tools-label[b-wv0tlclx7u] {
    color: var(--mud-palette-text-secondary);
    margin-inline-start: 4px;
}

.waypoint-tool-button[b-wv0tlclx7u] {
    min-width: 26px;
    height: 24px;
    padding: 0 4px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.waypoint-tool-button:hover:not(:disabled)[b-wv0tlclx7u] {
    border-color: var(--mud-palette-primary);
}

.waypoint-tool-button:disabled[b-wv0tlclx7u] {
    opacity: 0.45;
    cursor: default;
}

.waypoint-input[b-wv0tlclx7u] {
    width: 64px;
    height: 22px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 0.72rem;
    direction: ltr !important;
    text-align: left !important;
}

.waypoint-input:focus[b-wv0tlclx7u] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Empty state — shown before a route exists */
.waypoint-empty[b-wv0tlclx7u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 24px 12px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* ---------------- MAXIMISED CHART ---------------- */
/* The chart expands over the whole results panel rather than opening a
   window: a browser popup is a separate document with no Blazor circuit,
   so the chart inside it would be dead. Absolute within the panel, so the
   panel's own scroll position is untouched when it is restored. */
.results-chart-host.maximised[b-wv0tlclx7u] {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--mud-palette-surface);
}

/* ---- Mode toggle: SIMULATE | REPLAY -------------------------------------
   A segmented pair rather than a dropdown: there are exactly two, they are
   mutually exclusive, and which one is active should be readable without
   opening anything. */
/* flex: 0 0 auto for the same reason as .panel-header: SIMULATE|MONITOR|REPLAY
   changes what every tab means, so it must stay readable whatever a tab holds.
   It was the row that lost the most height to the flight-events list. */
.dfs-mode-toggle[b-wv0tlclx7u] {
    flex: 0 0 auto;
    display: flex;
    gap: 0;
    margin: 0.5rem 0.6rem 0.35rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
}

.dfs-mode-button[b-wv0tlclx7u] {
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    border: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dfs-mode-button:hover:not(:disabled)[b-wv0tlclx7u] {
    background: var(--mud-palette-action-default-hover);
}

.dfs-mode-button.active[b-wv0tlclx7u] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.dfs-mode-button:disabled[b-wv0tlclx7u] {
    opacity: 0.55;
    cursor: not-allowed;
}

.dfs-mode-button:focus-visible[b-wv0tlclx7u] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* ---- Replay loader ---------------------------------------------------- */
.dfs-replay-loader[b-wv0tlclx7u] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0.6rem 0.5rem;
}

.dfs-loaded-log[b-wv0tlclx7u] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    word-break: break-all;
}

/* ---- Monitor panel ------------------------------------------------------ */
.dfs-monitor-panel[b-wv0tlclx7u] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0.6rem 0.5rem;
}

.dfs-link-row[b-wv0tlclx7u] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
}

/* The dot is a redundant cue, not the only one: the state is spelled out
   beside it so the indicator does not depend on colour vision. */
.dfs-link-dot[b-wv0tlclx7u] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--mud-palette-text-disabled);
}

.dfs-link-dot.live[b-wv0tlclx7u] { background: #43A047; }
.dfs-link-dot.connecting[b-wv0tlclx7u] { background: #FDD835; }
.dfs-link-dot.stale[b-wv0tlclx7u] { background: #FB8C00; }
.dfs-link-dot.down[b-wv0tlclx7u] { background: #C1503A; }
.dfs-link-dot.idle[b-wv0tlclx7u] { background: var(--mud-palette-text-disabled); }

@media (prefers-reduced-motion: no-preference) {
    .dfs-link-dot.live[b-wv0tlclx7u],
    .dfs-link-dot.connecting[b-wv0tlclx7u] {
        animation: dfs-pulse-b-wv0tlclx7u 1.6s ease-in-out infinite;
    }
}

@keyframes dfs-pulse-b-wv0tlclx7u {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.dfs-health-grid[b-wv0tlclx7u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
}

.dfs-health-cell[b-wv0tlclx7u] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dfs-health-label[b-wv0tlclx7u] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.dfs-health-value[b-wv0tlclx7u] {
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dfs-health-value.warn[b-wv0tlclx7u] { color: #C1503A; }

.dfs-monitor-log[b-wv0tlclx7u] {
    max-height: 6.5rem;
    overflow-y: auto;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.dfs-monitor-line[b-wv0tlclx7u] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ----------------------------------------------------------------- */
/*                  SENSOR FRAME CROSS-FADE                           */
/* ----------------------------------------------------------------- */

/* Two stacked frames, alternating. The outgoing one stays painted until
   the incoming one has decoded, which is what removes the blank moment
   between frames during a streaming run. */
.imagery-frame-stack[b-wv0tlclx7u] {
    position: relative;
    width: 100%;
    height: 100%;
}

.imagery-frame-stack .imagery-frame[b-wv0tlclx7u] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;

    /* Hidden by opacity, not by display or visibility: a display:none image
       is not decoded until it is shown again, which would reinstate exactly
       the gap this is here to remove. */
    opacity: 0;
    transition: opacity 90ms linear;
}

.imagery-frame-stack .imagery-frame.visible[b-wv0tlclx7u] {
    opacity: 1;
}

/* An empty slot has src="" — never let that render as a broken-image icon
   over the frame underneath it. */
.imagery-frame-stack .imagery-frame[src=""][b-wv0tlclx7u] {
    opacity: 0;
}

/* The busy indicator sits OVER the picture rather than replacing it, so a
   render in progress is legible without the frame disappearing. */
.imagery-frame-busy[b-wv0tlclx7u] {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    z-index: 2;
    padding: 2px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    line-height: 0;
    pointer-events: none;
}

/* ----------------------------------------------------------------- */
/*                    FRAME DIAGNOSTIC OVERLAYS                       */
/* ----------------------------------------------------------------- */

/* Drawn over the frame, never intercepting the pointer: the image below
   is still what the user is inspecting. */
.imagery-overlay[b-wv0tlclx7u] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

/* Map-match landmarks, as the desktop's camera view draws them: a cyan
   ring with crosshair ticks and its running number on a dark plate - the
   globe's fix marker colour, so the same landmark reads as the same thing
   on both surfaces, and unlike the yellow flow points. */
.imagery-overlay .match-point[b-wv0tlclx7u] {
    fill: none;
    stroke: #00e5ff;
    stroke-width: 0.0035;
}

.imagery-overlay .match-point-ticks[b-wv0tlclx7u] {
    fill: none;
    stroke: #00e5ff;
    stroke-width: 0.0035;
}

.imagery-overlay .match-point-plate[b-wv0tlclx7u] {
    fill: rgba(0, 40, 48, 0.85);
}

/* The desktop camera view's head-up line and centre reticle */
.imagery-hud[b-wv0tlclx7u] {
    position: absolute;
    left: 6px;
    bottom: 4px;
    z-index: 2;
    color: #7fff7f;
    font: 11px/1.3 Consolas, monospace;
    text-shadow: 0 0 3px #000;
    pointer-events: none;
    white-space: pre;
}

.imagery-reticle[b-wv0tlclx7u] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 1px solid rgba(127, 255, 127, 0.6);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}

/* Optical flow, styled as the VNS Flight Analyzer's camera view:
   yellow track points with red pixel-motion vectors. Red, deliberately NOT
   the fix colour: both overlays are usually on together and the tracker's
   output must stay separable from the map-match landmarks at a glance. */
.imagery-overlay .flow-arrow[b-wv0tlclx7u] {
    stroke: #ff4d4d;
    stroke-width: 0.003;
    stroke-linecap: round;
}

.imagery-overlay .flow-arrow-head[b-wv0tlclx7u] {
    fill: #ff4d4d;
}

.imagery-overlay .flow-track-point[b-wv0tlclx7u] {
    fill: rgba(255, 235, 59, 0.9);
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 0.0015;
}

/* ---- the toggle row ---- */
.imagery-overlay-toggles[b-wv0tlclx7u] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    padding: 3px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.imagery-toggle[b-wv0tlclx7u] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    user-select: none;
}

.imagery-toggle input[b-wv0tlclx7u] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--mud-palette-primary);
}

/* A colour chip beside each label, so the checkbox says which marks on the
   frame it governs without the user toggling it to find out. */
.imagery-toggle-swatch[b-wv0tlclx7u] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* The swatches name the marks on the frame: cyan landmark rings, red flow arrows */
.imagery-toggle-swatch.match-swatch[b-wv0tlclx7u] {
    background: #00e5ff;
}

.imagery-toggle-swatch.flow-swatch[b-wv0tlclx7u] {
    background: #ff4d4d;
}

/* Why a ticked overlay is still empty — shown only until the analysis that
   fills it has run. */
.imagery-toggle-note[b-wv0tlclx7u] {
    font-size: 0.62rem;
    font-style: italic;
    color: var(--mud-palette-text-disabled);
}

/* ================================================================= */
/*                    NAVRECORD TABLE                                 */
/* ================================================================= */


/* ---------------- DRONE CAMERA VIEW ---------------- */
/* Compact native select in the map toolbar, matching the tool's 24px inputs. */
.drone-view-select[b-wv0tlclx7u] {
    height: 26px;
    padding: 1px 6px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    margin-inline-start: 8px;
}

.drone-view-select:focus[b-wv0tlclx7u] {
    outline: none;
    border-color: var(--mud-palette-primary);
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/AidingSensorEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             AidingSensorEditorComp.razor.css                      */
/*   Barometer / magnetometer: aid switch, noise SD, model read-out.  */
/*                                                                   */
/*   The compact row look is duplicated from the other editors        */
/*   rather than imported: Blazor CSS isolation rewrites each         */
/*   component's rules to its own generated scope attribute, so an    */
/*   unscoped or foreign-scope rule simply never matches these        */
/*   elements.                                                       */
/* ================================================================= */

/* Scroll wrapper — the route editor is short enough to fit, but the
   readouts grow with localization, so the scroll is the safety net. */
.los-editor-scroll[b-9r2ehd615w] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-9r2ehd615w] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-9r2ehd615w] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-9r2ehd615w] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-9r2ehd615w] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-9r2ehd615w] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-9r2ehd615w] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-9r2ehd615w] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-9r2ehd615w] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ----------------------------------------------------------------- */
/*                   COLLAPSIBLE GROUP                                */
/* ----------------------------------------------------------------- */
/* Read-mostly groups are native <details> expanders. Native is the whole
   mechanism — no JS, no component state — and the open/closed state
   survives re-renders on its own, where a Blazor-managed bool would be
   snapped shut by the StateHasChanged that fires on every run. */

/* A collapsed <details> must not keep the flex column's gap/padding
   reserved, so it overrides the .los-group display it also carries. */
.los-expander[b-9r2ehd615w] {
    display: block;
}

.los-expander-summary[b-9r2ehd615w] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: revert;
}

/* The headline value on the summary row, so the group can stay collapsed
   without hiding what it is set to. */
.los-expander-summary-value[b-9r2ehd615w] {
    margin-inline-start: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

/* ---------------- OUTAGE WINDOWS ---------------- */
/* Capped and scrolled rather than unbounded: a user can add many windows,
   and the accuracy row above must stay reachable without scrolling past
   a long list. */
.outage-list[b-9r2ehd615w] {
    max-height: 96px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 2px;
}

.outage-item[b-9r2ehd615w] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 2px;
}

.outage-range[b-9r2ehd615w] {
    flex: 1 1 auto;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    /* A time range reads left-to-right in every locale. */
    direction: ltr;
    text-align: start;
}

/* The add/clear pair shares the row evenly rather than inheriting the
   label-then-input geometry of a data row. */
.los-row .mud-button-root[b-9r2ehd615w] {
    flex: 1 1 0;
    min-width: 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/AlgorithmsEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             AlgorithmsEditorComp.razor.css                       */
/*   The Algorithms tab: pose method, feedback, detector, matcher      */
/*   thresholds.                                                       */
/*                                                                   */
/*   The compact row look is duplicated from the other editors        */
/*   rather than imported: Blazor CSS isolation rewrites each         */
/*   component's rules to its own generated scope attribute, so an    */
/*   unscoped or foreign-scope rule simply never matches these        */
/*   elements.                                                       */
/* ================================================================= */

/* Scroll wrapper — the route editor is short enough to fit, but the
   readouts grow with localization, so the scroll is the safety net. */
.los-editor-scroll[b-vaipqca0w5] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-vaipqca0w5] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-vaipqca0w5] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-vaipqca0w5] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-vaipqca0w5] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-vaipqca0w5] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-vaipqca0w5] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-vaipqca0w5] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-vaipqca0w5] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* A feedback checkbox with its label, the whole row clickable */
.dfs-feed-row[b-vaipqca0w5] {
    justify-content: flex-start;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

/* Selects share the input look but size to the column */
select.los-input[b-vaipqca0w5] {
    width: 170px;
    padding: 0 2px;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/CameraSensorEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             CameraSensorEditorComp.razor.css                      */
/*   Camera picker, physical optics, and the ground-resolution        */
/*   readout.                                                        */
/*                                                                   */
/*   The compact row look is duplicated from the other editors        */
/*   rather than imported: Blazor CSS isolation rewrites each         */
/*   component's rules to its own generated scope attribute, so an    */
/*   unscoped or foreign-scope rule simply never matches these        */
/*   elements.                                                       */
/* ================================================================= */

/* Scroll wrapper — the route editor is short enough to fit, but the
   readouts grow with localization, so the scroll is the safety net. */
.los-editor-scroll[b-pfdxlb2lsj] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-pfdxlb2lsj] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-pfdxlb2lsj] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-pfdxlb2lsj] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-pfdxlb2lsj] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-pfdxlb2lsj] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-pfdxlb2lsj] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-pfdxlb2lsj] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-pfdxlb2lsj] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ----------------------------------------------------------------- */
/*                   COLLAPSIBLE GROUP                                */
/* ----------------------------------------------------------------- */
/* Read-mostly groups are native <details> expanders. Native is the whole
   mechanism — no JS, no component state — and the open/closed state
   survives re-renders on its own, where a Blazor-managed bool would be
   snapped shut by the StateHasChanged that fires on every run. */

/* A collapsed <details> must not keep the flex column's gap/padding
   reserved, so it overrides the .los-group display it also carries. */
.los-expander[b-pfdxlb2lsj] {
    display: block;
}

.los-expander-summary[b-pfdxlb2lsj] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: revert;
}

/* The headline value on the summary row, so the group can stay collapsed
   without hiding what it is set to. */
.los-expander-summary-value[b-pfdxlb2lsj] {
    margin-inline-start: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

/* The add/remove pair sits on one row and shares the width evenly,
   rather than inheriting the label-then-input geometry of a data row. */
.los-row .mud-button-root[b-pfdxlb2lsj] {
    flex: 1 1 0;
    min-width: 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/DesktopRecordingReplayComp.razor.rz.scp.css */
/* ================================================================= */
/*            DesktopRecordingReplayComp.razor.css                   */
/*   Upload, status, summary, RMS table and chart of a desktop       */
/*   recording replay.                                               */
/*                                                                   */
/*   The group/row look is duplicated from the panels around it:     */
/*   Blazor CSS isolation rewrites each component's rules to its own */
/*   generated scope attribute, so a parent's rules never match.     */
/* ================================================================= */

.los-group[b-r7klnhit06] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.los-group-title[b-r7klnhit06] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

.los-row[b-r7klnhit06] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 22px;
}

.los-row-label[b-r7klnhit06] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.los-readout[b-r7klnhit06] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

.los-hint[b-r7klnhit06] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ---------------- RESULT ---------------- */

.recording-status[b-r7klnhit06] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
}

.recording-status.ok[b-r7klnhit06] {
    color: var(--mud-palette-success);
}

.recording-status.failed[b-r7klnhit06] {
    color: var(--mud-palette-warning);
}

.recording-error[b-r7klnhit06],
.recording-failure[b-r7klnhit06] {
    color: var(--mud-palette-error);
    font-size: 0.68rem;
    line-height: 1.25;
    /* failures name files and columns, which read left-to-right in every locale */
    direction: ltr;
    text-align: start;
    overflow-wrap: anywhere;
}

.recording-summary[b-r7klnhit06] {
    overflow-wrap: anywhere;
}

.recording-rms[b-r7klnhit06] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.recording-rms th[b-r7klnhit06] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    text-align: start;
    padding: 1px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.recording-rms td[b-r7klnhit06] {
    padding: 1px 4px;
}

.recording-rms td.numeric[b-r7klnhit06] {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: end;
}

/* Tall enough to read four crossing lines in a narrow side panel */
.recording-chart[b-r7klnhit06] {
    height: 220px;
    min-height: 220px;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/DroneFlightSimEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             DroneFlightSimEditorComp.razor.css                    */
/*   Compact WPF-editor-style rows: label | small editor, matching   */
/*   LosVisibilityEditorComp / AltitudeViewshedEditorComp so every   */
/*   tool's left panel looks identical.                              */
/*                                                                   */
/*   The shared look is duplicated rather than imported: Blazor CSS  */
/*   isolation rewrites each component's rules to its own generated  */
/*   scope attribute, so an unscoped or foreign-scope rule simply    */
/*   never matches these elements.                                   */
/* ================================================================= */

/* Scroll wrapper — the route editor is short enough to fit, but the
   readouts grow with localization, so the scroll is the safety net. */
.los-editor-scroll[b-uq8h1md05c] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-uq8h1md05c] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-uq8h1md05c] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-uq8h1md05c] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-uq8h1md05c] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-uq8h1md05c] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-uq8h1md05c] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-uq8h1md05c] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-uq8h1md05c] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ---------------- PLATFORM SELECTOR ---------------- */
/* Mirrors the SurveyMissionSimulationTool's selector. Two equal buttons: the
   airframe is one choice of two, and sizing them to their labels would make
   the shorter one read as secondary. Duplicated rather than imported because
   Blazor CSS isolation scopes each component's rules to itself. */
.platform-row[b-uq8h1md05c] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-bottom: 2px;
}

.platform-row[b-uq8h1md05c]  .mud-button-root {
    min-width: 0;
    padding: 3px 6px;
    font-size: 0.64rem;
    text-transform: none;
}

.platform-row[b-uq8h1md05c]  .mud-button-root .mud-icon-root {
    font-size: 0.95rem;
    margin-inline-end: 4px;
}

/* ---- Shape picker: every route shape with an icon of its outline ----
   A wrapping grid of compact buttons, the desktop Shape combo's icons. */
.shape-picker-label[b-uq8h1md05c] {
    font-size: 0.78rem;
    padding-top: 2px;
}

.shape-picker[b-uq8h1md05c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 3px;
    padding: 2px 0 3px 0;
}

.shape-option[b-uq8h1md05c] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 2px 4px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.72rem;
    cursor: pointer;
}

.shape-option:hover[b-uq8h1md05c] {
    border-color: var(--mud-palette-primary);
}

.shape-option.active[b-uq8h1md05c] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.shape-icon[b-uq8h1md05c] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.shape-option-text[b-uq8h1md05c] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/FlightEventsPanelComp.razor.rz.scp.css */
/* ================================================================= */
/*              FlightEventsPanelComp.razor.css                      */
/*   The flight-events list, in its own tab beside RUN.              */
/*                                                                   */
/*   The group/title/hint look is duplicated from the sibling        */
/*   editors rather than imported, for the same reason they all      */
/*   duplicate it: Blazor CSS isolation rewrites each component's    */
/*   rules to its own generated scope attribute, so a rule written   */
/*   in a sibling component's stylesheet never matches these         */
/*   elements. Splitting this panel out of the RUN panel therefore   */
/*   meant carrying its rules across with it.                        */
/* ================================================================= */

/* The panel fills the tab so the list below takes the whole height
   rather than a fixed slice of it — which is the point of the tab: the
   events are the only thing here, so they get the room. */
.los-editor[b-muu16uc98t] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-muu16uc98t] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-muu16uc98t] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* Explanatory one-liners under a group */
.los-hint[b-muu16uc98t] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* How many events the run produced, beside the title. A run that produced
   none at all is itself diagnostic, so the count is worth reading without
   scrolling the list. */
.sitl-log-count[b-muu16uc98t] {
    margin-inline-start: 0.35rem;
    padding: 0 0.3rem;
    border-radius: 8px;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    font-size: 0.65rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------- */
/*                      FLIGHT EVENTS                                 */
/* ----------------------------------------------------------------- */

/* The group claims the tab's height; nothing else is competing for it here. */
.dfs-events-group[b-muu16uc98t] {
    flex: 1 1 auto;
    min-height: 0;
}

/* No fixed cap any more: alone in its own tab the list takes the whole panel
   and scrolls inside itself, instead of the 240px (132px short-window) cap it
   needed on RUN to keep the replay controls below it reachable.

   flex-basis MUST be 0, not auto. With `1 1 auto` the basis is the content
   height — hundreds of event rows, ~6800px after a real flight — so the whole
   side panel's flex column went massively over-constrained: free space turned
   negative and EVERY shrinkable sibling above shrank to pay for it. The panel
   header and the SIMULATE|MONITOR|REPLAY row were squeezed to half height and
   the tab strips compressed with them. Observed 2026-09-20 on a 285-event run.

   With basis 0 the rows contribute nothing to the column's intrinsic height;
   the list is sized purely by the space left over, and the scroll happens
   inside it. min-height is the floor for the case where no ancestor resolves
   to a definite height — a short readable list rather than a collapsed one. */
.dfs-events-list[b-muu16uc98t] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 0;
    min-height: 140px;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 0.68rem;
}

/* flex: 0 0 auto — the rows are the scrolled content of a flex column, so
   without it they are shrinkable items that squeeze towards their text when
   the list is shorter than the run, instead of overflowing into the scroll. */
.dfs-event-row[b-muu16uc98t] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--mud-palette-background);
    line-height: 1.35;
}

.dfs-event-time[b-muu16uc98t] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 40px;
}

.dfs-event-kind[b-muu16uc98t] {
    font-weight: 700;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 0.62rem;
    line-height: 1.5;
}

.dfs-event-kind-pnp[b-muu16uc98t] {
    background: rgba(255, 235, 59, 0.22);
    color: #FBC02D;
}

.dfs-event-kind-vio[b-muu16uc98t] {
    background: rgba(0, 229, 255, 0.18);
    color: #00B8D4;
}

.dfs-event-text[b-muu16uc98t] {
    flex: 1;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
    text-align: left;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/FlightReplayPanelComp.razor.rz.scp.css */
/* ================================================================= */
/*              FlightReplayPanelComp.razor.css                      */
/*   Export / analyse / scrub, styled to match the RUN panel it sits */
/*   under.                                                          */
/*                                                                   */
/*   The group chrome and the analysis rules are duplicated from     */
/*   DroneFlightSimEditorComp and DroneFlightSimToolComp rather than */
/*   imported: Blazor CSS isolation rewrites every rule to its own   */
/*   component's generated scope attribute, so a rule living in      */
/*   another component's stylesheet never matches these elements.    */
/*   Moving this markup out of the results panel is exactly why it   */
/*   needed its own copy.                                            */
/* ================================================================= */

/* WPF GroupBox look: primary border + title, matching the RUN group */
.los-group[b-e1yvm4mzvl] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.los-group-title[b-e1yvm4mzvl] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}


/* ----------------------------------------------------------------- */
/*                  GNSS-DENIED ANALYSIS                              */
/* ----------------------------------------------------------------- */

.analysis-running[b-e1yvm4mzvl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* Method on the left, its accuracy right-aligned, so the three numbers
   form a column that can be compared at a glance. */
.analysis-grid[b-e1yvm4mzvl] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1px 10px;
    align-items: baseline;
    font-size: 0.74rem;
}

.analysis-label[b-e1yvm4mzvl] {
    font-weight: 600;
    white-space: nowrap;
}

/* The three method colours match the chart traces, so a row here and a
   line there are recognisably the same track. */
.analysis-ins[b-e1yvm4mzvl] {
    color: #FF9800;
}

.analysis-vio[b-e1yvm4mzvl] {
    color: #E91E63;
}

.analysis-fused[b-e1yvm4mzvl] {
    color: #00BCD4;
}

.analysis-value[b-e1yvm4mzvl] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    text-align: end;
}

.analysis-verdict[b-e1yvm4mzvl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mud-palette-success);
}

.analysis-hint[b-e1yvm4mzvl] {
    font-size: 0.66rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.analysis-error[b-e1yvm4mzvl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--mud-palette-error);
}


/* ----------------------------------------------------------------- */
/*                     PLAYBACK SCRUBBER                              */
/* ----------------------------------------------------------------- */

/* No bottom border here, unlike the copy in the results panel: this is
   the last thing in its group, and a rule would draw against the group's
   own border a few pixels below it. */
.playback-bar[b-e1yvm4mzvl] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.playback-slider[b-e1yvm4mzvl] {
    flex: 1 1 auto;
    min-width: 0;
    direction: ltr;
    accent-color: var(--mud-palette-primary);
}

.playback-time[b-e1yvm4mzvl] {
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    min-width: 40px;
    text-align: end;
}

/* ----------------------------------------------------------------- */
/*                        TRANSPORT                                   */
/* ----------------------------------------------------------------- */

/* Steps at the ends, play in the middle taking the slack, so the primary
   control is the biggest target and the row stays balanced whichever
   label PLAY/PAUSE is currently showing. */
.playback-transport[b-e1yvm4mzvl] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.playback-transport[b-e1yvm4mzvl]  .playback-play {
    flex: 1 1 auto;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/FlightRunPanelComp.razor.rz.scp.css */
/* ================================================================= */
/*               FlightRunPanelComp.razor.css                        */
/*   Compact WPF-editor-style rows: label | small editor, matching   */
/*   DroneFlightSimEditorComp so the RUN tab looks identical to the  */
/*   PARAMETERS tab beside it.                                       */
/*                                                                   */
/*   The shared look is duplicated rather than imported, for the     */
/*   same reason the other editors duplicate it: Blazor CSS          */
/*   isolation rewrites each component's rules to its own generated  */
/*   scope attribute, so a rule written in a sibling component's     */
/*   stylesheet simply never matches these elements. Splitting this  */
/*   panel out of the route editor therefore meant its rows lost     */
/*   every style they had been inheriting.                           */
/* ================================================================= */

/* The panel fills the tab so the log below can take the leftover height
   rather than overflowing the column. */
.los-editor[b-qk1s765mvz] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-qk1s765mvz] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-qk1s765mvz] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor at the end */
.los-row[b-qk1s765mvz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-qk1s765mvz] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native selects styled to the Mud palette.
   Native <select> rather than a MudBlazor field: a MudSelect renders
   ~89px tall and would not sit in a 26px row. */
.los-input[b-qk1s765mvz] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    /* The provider names are long ("Realistic (ArduCopter SITL)"), and a
       native select sizes to its widest option unless told not to. Without
       these it pushed past the panel edge instead of ellipsising. */
    min-width: 0;
    max-width: 100%;
    flex: 0 1 130px;
    text-overflow: ellipsis;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* The provider names are Latin ("ArduCopter SITL"), so the control
       reads left-to-right even under the RTL page. The page-root RTL rule
       sets text-align on form controls, so this must restate it with
       !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-qk1s765mvz] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* A row whose control needs the panel's full width: label on its own line
   above, control beneath. Used only where the value text is too long to
   read in a 130px control. */
.los-row-stacked[b-qk1s765mvz] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-height: 0;
}

/* The label stops stretching once it is on its own line. */
.los-row-stacked .los-row-label[b-qk1s765mvz] {
    flex: 0 0 auto;
}

.los-input-wide[b-qk1s765mvz] {
    width: 100%;
    flex: 0 0 auto;
}

/* Step time and speed factor share a row: two short labels and two narrow
   numbers, which cost two lines of a tab that has none to spare. `wrap` is what
   keeps that safe — drag the panel narrow, or run a language with longer labels,
   and the pair falls back to a line each instead of overflowing the column. */
.dfs-step-time-row[b-qk1s765mvz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* Step-time control group */
.dfs-step-time-group[b-qk1s765mvz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 0.78rem;
    margin-top: 4px;
}

/* Inside the shared row each control takes an equal half and the number shrinks
   before the label does, so neither reads as the odd one out. */
.dfs-step-time-row > .dfs-step-time-group[b-qk1s765mvz] {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}

.dfs-step-time-label[b-qk1s765mvz] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    font-weight: 500;
}

.dfs-step-time-input[b-qk1s765mvz] {
    width: 80px;
    height: 24px;
    box-sizing: border-box;
    flex: 0 1 80px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    direction: ltr !important;
    text-align: center !important;
}

.dfs-step-time-input:focus[b-qk1s765mvz] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Explanatory one-liners under a group */
.los-hint[b-qk1s765mvz] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}


/* ----------------------------------------------------------------- */
/*                     AUTOPILOT MESSAGE LOG                          */
/* ----------------------------------------------------------------- */

/* The log takes the room left under the RUN controls and scrolls inside
   itself, so a chatty flight cannot push the RUN button off the panel —
   which is the failure this tab exists to fix. */
/* Sized to its content, not to the leftover space. It used to be `1 1 auto` —
   the group that claimed the column's slack — which would have handed the log's
   halved height straight back to itself. The REPLAY panel below is what should
   get that room now. */
.sitl-log-group[b-qk1s765mvz] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 0 1 auto;
}

/* How many lines the run produced, beside the title. A run that says
   nothing at all is itself diagnostic, so the count is worth reading
   without opening anything. */
.sitl-log-count[b-qk1s765mvz] {
    margin-inline-start: 0.35rem;
    padding: 0 0.3rem;
    border-radius: 8px;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
    font-size: 0.65rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Half the height it used to have (min 80 -> 40, max 320 -> 160), to give the
   REPLAY panel below it the room instead. The log is still scrollable, so the
   only cost is seeing fewer lines at once — and the lines that matter most are
   the last few, which is where it already sits.

   flex must NOT grow here any more: with `1 1 auto` the list simply expanded to
   fill whatever the halved max-height freed up, and the panel below saw none of
   it. */
.sitl-log-list[b-qk1s765mvz] {
    flex: 0 1 auto;
    min-height: 40px;
    max-height: 160px;
    overflow-y: auto;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
}

.sitl-log-line[b-qk1s765mvz] {
    display: flex;
    gap: 0.4rem;
    padding: 2px 4px;
    font-size: 0.68rem;
    line-height: 1.35;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.sitl-log-line:last-child[b-qk1s765mvz] {
    border-bottom: none;
}

/* The ordinal, so a repeated line ("GPS fix=0 t=6s") is still countable
   and the reader can tell progress from a stuck loop.
   Fixed width and tabular figures keep the text column aligned. */
.sitl-log-index[b-qk1s765mvz] {
    flex: 0 0 auto;
    min-width: 1.6em;
    color: var(--mud-palette-text-disabled);
    font-variant-numeric: tabular-nums;
    text-align: end;
    user-select: none;
}

/* Monospace and LTR: these are ArduPilot's own strings — English, often
   with numbers and units — so they are left-to-right even when the rest
   of the panel is Hebrew. Without the override they render with the
   punctuation flipped to the wrong end and read as garbled.
   overflow-wrap rather than word-break: a long launch command line should
   fold at its spaces, not mid-token. */
.sitl-log-text[b-qk1s765mvz] {
    flex: 1 1 auto;
    min-width: 0;
    direction: ltr;
    text-align: left;
    font-family: Consolas, "Courier New", monospace;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

/* ---------------- FUSED SENSORS ---------------- */
/* Two columns: six sensors in three visual rows, so the whole selection is
   one glance under the run button rather than a scrolling list. */
.dfs-sensors-title[b-qk1s765mvz] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.72rem;
    margin-top: 4px;
}

.dfs-sensors-grid[b-qk1s765mvz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 8px;
}

.dfs-sensor-item[b-qk1s765mvz] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.dfs-sensor-item input[type=checkbox][b-qk1s765mvz] {
    margin: 0;
    accent-color: var(--mud-palette-primary);
}

/* ---- METRICS: label / value rows, the desktop tool's metrics block ---- */
.dfs-metrics-grid[b-qk1s765mvz] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 2px;
    font-size: 0.78rem;
}

.dfs-metric-label[b-qk1s765mvz] {
    opacity: 0.75;
    white-space: nowrap;
}

.dfs-metric-value[b-qk1s765mvz] {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    text-align: start;
}

.dfs-progress-detail[b-qk1s765mvz] {
    font-variant-numeric: tabular-nums;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/FlightSensorsEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             FlightSensorsEditorComp.razor.css                    */
/*   IMU error terms + run control. Same compact row look as the     */
/*   route editor, plus a collapsible <details> expander.             */
/*   tool's left panel looks identical.                              */
/*                                                                   */
/*   The shared look is duplicated rather than imported: Blazor CSS  */
/*   isolation rewrites each component's rules to its own generated  */
/*   scope attribute, so an unscoped or foreign-scope rule simply    */
/*   never matches these elements.                                   */
/* ================================================================= */

/* Scroll wrapper — the route editor is short enough to fit, but the
   readouts grow with localization, so the scroll is the safety net. */
.los-editor-scroll[b-vlu08mmleb] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-vlu08mmleb] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-vlu08mmleb] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-vlu08mmleb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-vlu08mmleb] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-vlu08mmleb] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-vlu08mmleb] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-vlu08mmleb] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-vlu08mmleb] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ----------------------------------------------------------------- */
/*                   COLLAPSIBLE GROUP                                */
/* ----------------------------------------------------------------- */
/* Read-mostly groups are native <details> expanders. Native is the whole
   mechanism — no JS, no component state — and the open/closed state
   survives re-renders on its own, where a Blazor-managed bool would be
   snapped shut by the StateHasChanged that fires on every run. */

/* A collapsed <details> must not keep the flex column's gap/padding
   reserved, so it overrides the .los-group display it also carries. */
.los-expander[b-vlu08mmleb] {
    display: block;
}

.los-expander-summary[b-vlu08mmleb] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: revert;
}

/* The headline value on the summary row, so the group can stay collapsed
   without hiding what it is set to. */
.los-expander-summary-value[b-vlu08mmleb] {
    margin-inline-start: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

/* ---------------- SUB-TAB SHELL ---------------- */
/* The panel now carries five sensor sub-tabs with RUN pinned beneath
   them, so the editor itself becomes the flex column and the tab body
   is what scrolls. */
.sensors-editor[b-vlu08mmleb] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ::deep, because the tab chrome is MudBlazor's markup, not this
   component's — isolation would otherwise not reach it. */
[b-vlu08mmleb] .sensors-tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

[b-vlu08mmleb] .sensors-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
}

[b-vlu08mmleb] .sensors-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Each sensor's page is a vertical scroll container: the IMU page (grade,
   datasheet, biases, noise, VIO fusion) is taller than the panel on any laptop
   screen, and .sensors-tabs .mud-tabs-panels clips (overflow:hidden). */
[b-vlu08mmleb] .sensors-tab-panel > .mud-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Five tabs in a narrow panel: shrink the labels rather than let the
   strip scroll, so every sensor stays reachable in one click. */
[b-vlu08mmleb] .sensors-tabs .mud-tab {
    min-width: 0;
    padding: 0 6px;
    font-size: 0.7rem;
}

/* RUN never scrolls away — it applies to every sensor. */
.sensors-run[b-vlu08mmleb] {
    flex: 0 0 auto;
    border-top: 1px solid var(--mud-palette-divider);
}

/* ---- IMU biases: each field's size against the grade's bias spec ---- */
.imu-bias-input[b-vlu08mmleb] {
    flex: 0 0 96px;
}

.imu-bias-ratio[b-vlu08mmleb] {
    flex: 0 0 66px;
    text-align: end;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 3x the spec or more: the filter is not expected to converge on it (the desktop's amber #b26a00) */
.imu-bias-ratio.beyond[b-vlu08mmleb] {
    color: #b26a00;
    font-weight: 700;
}

.imu-bias-state[b-vlu08mmleb] {
    margin-inline-start: 6px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/GeographyPanelComp.razor.rz.scp.css */
/* ================================================================= */
/*               GeographyPanelComp.razor.css                        */
/*   Compact WPF-editor-style rows matching the sibling editors.     */
/*                                                                   */
/*   The shared look is duplicated rather than imported: Blazor CSS  */
/*   isolation scopes each component's rules to its own generated    */
/*   attribute, so a sibling's stylesheet never matches here.        */
/* ================================================================= */

.los-editor[b-cqgw8jhqfx] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-cqgw8jhqfx] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.los-group-title[b-cqgw8jhqfx] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

.los-hint[b-cqgw8jhqfx] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.35;
}

/* ---------------- BOUNDS GRID ---------------- */
/* label | input, two pairs per row so all four edges fit one glance. */
.geo-bounds-grid[b-cqgw8jhqfx] {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 3px 6px;
    align-items: center;
}

.geo-bounds-label[b-cqgw8jhqfx] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* Native input, not MudTextField: the Mud editor is ~89px tall against
   this 24px row (see the compact-input house rule). */
.geo-bounds-input[b-cqgw8jhqfx] {
    width: 100%;
    height: 24px;
    padding: 1px 4px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: left;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
}

.geo-bounds-input:focus[b-cqgw8jhqfx] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* ---------------- RASTER RESULTS ---------------- */

.geo-raster-preview[b-cqgw8jhqfx] {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: #000;
}

.geo-raster-summary[b-cqgw8jhqfx] {
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    text-align: left;
    white-space: pre-line;
}

.geo-download-row[b-cqgw8jhqfx] {
    display: flex;
    gap: 4px;
}

.geo-download-row[b-cqgw8jhqfx]  .mud-button-root {
    flex: 1 1 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/GnssSensorEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             GnssSensorEditorComp.razor.css                        */
/*   GNSS receiver error model and VNS switch (outage windows: the     */
/*   shared SensorOutageEditorComp carries its own styles).            */
/*                                                                   */
/*   The compact row look is duplicated from the other editors        */
/*   rather than imported: Blazor CSS isolation rewrites each         */
/*   component's rules to its own generated scope attribute, so an    */
/*   unscoped or foreign-scope rule simply never matches these        */
/*   elements.                                                       */
/* ================================================================= */

/* Scroll wrapper — the route editor is short enough to fit, but the
   readouts grow with localization, so the scroll is the safety net. */
.los-editor-scroll[b-igqm0s69vj] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-igqm0s69vj] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-igqm0s69vj] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-igqm0s69vj] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-igqm0s69vj] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-igqm0s69vj] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-igqm0s69vj] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-igqm0s69vj] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-igqm0s69vj] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ----------------------------------------------------------------- */
/*                   COLLAPSIBLE GROUP                                */
/* ----------------------------------------------------------------- */
/* Read-mostly groups are native <details> expanders. Native is the whole
   mechanism — no JS, no component state — and the open/closed state
   survives re-renders on its own, where a Blazor-managed bool would be
   snapped shut by the StateHasChanged that fires on every run. */

/* A collapsed <details> must not keep the flex column's gap/padding
   reserved, so it overrides the .los-group display it also carries. */
.los-expander[b-igqm0s69vj] {
    display: block;
}

.los-expander-summary[b-igqm0s69vj] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: revert;
}

/* The headline value on the summary row, so the group can stay collapsed
   without hiding what it is set to. */
.los-expander-summary-value[b-igqm0s69vj] {
    margin-inline-start: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/ProjectPanelComp.razor.rz.scp.css */
/* ================================================================= */
/*                 ProjectPanelComp.razor.css                         */
/*   The Project tab: the project's fields and its file buttons.      */
/*                                                                   */
/*   The compact row look is duplicated from the other editors        */
/*   rather than imported: Blazor CSS isolation rewrites each         */
/*   component's rules to its own generated scope attribute.          */
/* ================================================================= */

.los-editor-scroll[b-rh13gnbxd4] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-rh13gnbxd4] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-rh13gnbxd4] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-rh13gnbxd4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-rh13gnbxd4] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-rh13gnbxd4] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-rh13gnbxd4] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-rh13gnbxd4] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-rh13gnbxd4] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* Text fields take the free width of the row */
.los-input-wide[b-rh13gnbxd4] {
    width: auto;
    flex: 2 1 160px;
    min-width: 0;
    direction: inherit !important;
    text-align: start !important;
}

.los-stacked-label[b-rh13gnbxd4] {
    flex: none;
    font-size: 0.78rem;
    padding-top: 2px;
}

.los-textarea[b-rh13gnbxd4] {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 4px 6px;
    font: inherit;
    font-size: 0.78rem;
}

.los-textarea:focus[b-rh13gnbxd4] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.dfs-project-buttons[b-rh13gnbxd4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneFlightSimTool/Editors/SensorOutageEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             SensorOutageEditorComp.razor.css                      */
/*   Outage windows of one aiding sensor: list, start/end, add/clear. */
/*                                                                   */
/*   The same group/row/input look as the sensor editors that host   */
/*   it (GnssSensorEditorComp, AidingSensorEditorComp). Duplicated   */
/*   rather than shared: Blazor CSS isolation rewrites each          */
/*   component's rules to its own generated scope attribute, so a    */
/*   parent's rules never reach these elements.                      */
/* ================================================================= */

/* WPF GroupBox look: primary border + title */
.los-group[b-nntpz96auh] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-nntpz96auh] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-nntpz96auh] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-nntpz96auh] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-nntpz96auh] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-nntpz96auh] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-nntpz96auh] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ---------------- OUTAGE WINDOWS ---------------- */
/* Capped and scrolled rather than unbounded: a user can add many windows,
   and the accuracy row above must stay reachable without scrolling past
   a long list. */
.outage-list[b-nntpz96auh] {
    max-height: 96px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 2px;
}

.outage-item[b-nntpz96auh] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 2px;
}

.outage-range[b-nntpz96auh] {
    flex: 1 1 auto;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    /* A time range reads left-to-right in every locale. */
    direction: ltr;
    text-align: start;
}

/* The add/clear pair shares the row evenly rather than inheriting the
   label-then-input geometry of a data row. */
.los-row .mud-button-root[b-nntpz96auh] {
    flex: 1 1 0;
    min-width: 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneTool/Charts/DroneRouteChartComp.razor.rz.scp.css */
/* ================================================================= */
/*                 DroneRouteChartComp.razor.css                     */
/*   Tabbed route chart: MudTabs host (side / top / telemetry), each  */
/*   an interactive Plotly plot (drag = pan, wheel = zoom).           */
/*   Rules mirror ViewshedTopViewChartComp.razor.css — repeated       */
/*   rather than shared because Blazor CSS isolation scopes each      */
/*   component's stylesheet to its own generated attribute.           */
/* ================================================================= */

.drone-chart-host[b-v71ka0kha3] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The MudTabs host must flex so the tab panels fill the column. ::deep
   because MudTabs is a child component — its rendered elements never
   receive this component's CSS scope attribute. */
[b-v71ka0kha3] .drone-chart-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-v71ka0kha3] .drone-chart-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-v71ka0kha3] .drone-chart-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* The plot always reads left-to-right regardless of UI culture */
.drone-chart-plot-area[b-v71ka0kha3] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Telemetry tab: plot grows, the metric picker sits fixed below it */
.drone-chart-telemetry-panel[b-v71ka0kha3] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The picker is separated from the plot above it: without the top margin the
   combo crowds the chart's x-axis title and reads as part of the figure. */
.drone-chart-telemetry-picker[b-v71ka0kha3] {
    flex: 0 0 auto;
    margin-top: 14px;
    padding: 2px 8px;
    max-width: 260px;
}

/* Compact "label | combo" row, matching the editor rows in LosVisibilityTool
   and the other globe tools. Repeated here rather than shared because Blazor
   CSS isolation scopes each component's stylesheet to its own attribute. */
.los-row[b-v71ka0kha3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-v71ka0kha3] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.los-input[b-v71ka0kha3] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
}

.los-input:focus[b-v71ka0kha3] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Save-PNG toolbar row */
.drone-chart-toolbar[b-v71ka0kha3] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
}

.drone-chart-toolbar-btn[b-v71ka0kha3] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.drone-chart-toolbar-btn:hover[b-v71ka0kha3] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneTool/DroneToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                    DroneToolComp.razor.css                        */
/*   Layout styles for the drone route/mission tool (RTL aware):     */
/*   left editor tabs | Cesium globe | tabbed route chart panel.     */
/*   Mirrors AltitudeViewshedToolComp.razor.css / LosVisibilityTool  */
/*   Comp.razor.css — the rules are repeated rather than shared      */
/*   because Blazor CSS isolation scopes each component's stylesheet */
/*   to its own generated attribute, so the class names are the same */
/*   but the scope attribute is not. Editor styles live in           */
/*   DroneRouteEditorComp.razor.css and chart styles in              */
/*   DroneRouteChartComp.razor.css.                                  */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-hvcdx92hj0] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-hvcdx92hj0] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-hvcdx92hj0] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-hvcdx92hj0] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-hvcdx92hj0] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll. ::deep
   everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements never receive this component's CSS scope attribute. */
[b-hvcdx92hj0] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-hvcdx92hj0] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-hvcdx92hj0] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-hvcdx92hj0] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-hvcdx92hj0] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-hvcdx92hj0] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-hvcdx92hj0],
.panel-splitter:active[b-hvcdx92hj0] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-hvcdx92hj0] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-hvcdx92hj0] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-hvcdx92hj0] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-hvcdx92hj0] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-hvcdx92hj0] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-hvcdx92hj0]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                      MISSION MODE                                  */
/* ----------------------------------------------------------------- */

/* Plan / Fly / Debrief selector, sitting in the globe panel header. */
.drone-mode-selector[b-hvcdx92hj0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Overlay shown for the two modes that are designed but not yet built.
   Covers the globe rather than replacing it, so the Cesium viewer keeps
   running (and its camera) underneath while the operator looks around. */
.drone-mode-placeholder[b-hvcdx92hj0] {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent);
    backdrop-filter: blur(2px);
    color: var(--mud-palette-text-primary);
}

.drone-mode-placeholder-text[b-hvcdx92hj0] {
    max-width: 420px;
    opacity: 0.75;
}

/* ----------------------------------------------------------------- */
/*                ROUTE CHART PANEL (host)                            */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-hvcdx92hj0] {
    flex: 1 1 0;
    min-width: 280px; /* equal third alongside the editor and map panels */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ================================================================= */
/*   Goto dialog (ported from MapExplorerToolComp so every globe      */
/*   offers the same toolbar options)                                 */
/* ================================================================= */

.goto-dialog-compact[b-hvcdx92hj0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-hvcdx92hj0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-hvcdx92hj0] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-hvcdx92hj0] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.lostool-chat-panel[b-hvcdx92hj0] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.lostool-chat-panel.collapsed[b-hvcdx92hj0] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .lostool-chat-panel.collapsed[b-hvcdx92hj0] {
    border-right-width: 0;
}

[dir="rtl"] .lostool-chat-panel[b-hvcdx92hj0] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.lostool-chat-host[b-hvcdx92hj0] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneTool/Editors/DroneNoFlyZoneEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*               DroneNoFlyZoneEditorComp.razor.css                  */
/*   No-fly-zone tab: draw/list controls + per-zone floor/ceiling.   */
/*                                                                   */
/*   Blazor CSS isolation rewrites each component's rules to its own */
/*   generated scope attribute, so the los-* / drone-* rules shared  */
/*   with DroneRouteEditorComp are re-declared here rather than      */
/*   inherited — the duplication is required, not accidental.        */
/* ================================================================= */

/* Scroll wrapper */
.los-editor-scroll[b-trrb82tu80] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-trrb82tu80] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-trrb82tu80] {
    display: flex;
    align-items: center;
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

.los-hint[b-trrb82tu80] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

/* Zone count chip on the group title */
.drone-wp-count[b-trrb82tu80] {
    margin-inline-start: auto;
    padding: 0 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border-radius: 8px;
    font-size: 0.7rem;
    min-width: 18px;
    text-align: center;
}

.drone-wp-actions[b-trrb82tu80] {
    display: flex;
    gap: 6px;
    margin: 3px 0;
    flex-wrap: wrap;
}

/* Compact native number input, matching the waypoint grid inputs. */
.drone-wp-input[b-trrb82tu80] {
    height: 22px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 3px;
    font-size: 0.72rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.drone-wp-input:focus[b-trrb82tu80] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.drone-wp-del-btn[b-trrb82tu80] {
    height: 20px;
    width: 20px;
    padding: 0;
    line-height: 1;
    background: transparent;
    color: var(--mud-palette-error);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.drone-wp-del-btn:hover[b-trrb82tu80] {
    border-color: var(--mud-palette-error);
}

/* ----------------------------------------------------------------- */
/*                      NO-FLY ZONE ROWS                              */
/* ----------------------------------------------------------------- */

.drone-nfz-row[b-trrb82tu80] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font-size: 0.74rem;
    cursor: pointer;
    border-radius: 4px;
}

.drone-nfz-row:hover[b-trrb82tu80] {
    background: var(--mud-palette-action-default-hover);
}

/* The zone currently in EDIT mode: a tinted row so it stands out from the rest. */
.drone-nfz-row-editing[b-trrb82tu80] {
    background: var(--mud-palette-primary-hover);
    outline: 1px solid var(--mud-palette-primary);
}

.drone-nfz-shape-icon[b-trrb82tu80] {
    flex: 0 0 auto;
    color: var(--mud-palette-error);
}

.drone-nfz-name[b-trrb82tu80] {
    flex: 1;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drone-nfz-area[b-trrb82tu80] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    direction: ltr;
}

.drone-nfz-verts[b-trrb82tu80] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* EDIT button on a zone row — compact text button; highlighted while active. */
.drone-nfz-edit-btn[b-trrb82tu80] {
    height: 20px;
    padding: 0 6px;
    line-height: 1;
    background: transparent;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
}

.drone-nfz-edit-btn:hover[b-trrb82tu80] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.drone-nfz-edit-active[b-trrb82tu80] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Floor / ceiling pair under each zone row — the band that gives the zone
   its extruded height on the globe. Indented so it reads as a child of the
   zone row above it. Compact label | input | label | input. */
.drone-nfz-alt-row[b-trrb82tu80] {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    padding: 0 0 6px 12px;
}

.drone-nfz-alt-label[b-trrb82tu80] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    white-space: nowrap;
}

.drone-nfz-alt-input[b-trrb82tu80] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Bundled Israel dataset layer toggle. */
.drone-nfz-dataset[b-trrb82tu80] {
    padding: 4px 0 2px;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 6px;
}

.drone-nfz-dataset[b-trrb82tu80]  .mud-checkbox label {
    font-size: 0.74rem;
}
/* _content/AspireChatApp.Razor/Components/Tools/DroneTool/Editors/DroneRouteEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                 DroneRouteEditorComp.razor.css                    */
/*   Compact WPF-style route/mission editor rows + waypoint table.   */
/*                                                                   */
/*   The los-* / los-expander-* rules mirror                         */
/*   LosVisibilityEditorComp.razor.css and                           */
/*   AltitudeViewshedEditorComp.razor.css deliberately: Blazor CSS   */
/*   isolation rewrites each component's rules to its own generated  */
/*   scope attribute, so a foreign-scope rule never matches these    */
/*   elements — the duplication is required, not accidental.         */
/* ================================================================= */

/* Scroll wrapper — this editor has more rows than the LOS one, so
   the scroll is load-bearing rather than a safety net. */
.los-editor-scroll[b-c6r6hik1oe] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-c6r6hik1oe] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-c6r6hik1oe] {
    display: flex;
    align-items: center;
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* ----------------------------------------------------------------- */
/*                    COLLAPSIBLE GROUPS                              */
/* ----------------------------------------------------------------- */
/* Native <details> expander for the read-mostly mission summary — the
   open/closed state survives the StateHasChanged that every recompute
   fires (a component-managed bool would snap it shut each time). */

.los-expander[b-c6r6hik1oe] {
    display: block;
}

.los-expander[open][b-c6r6hik1oe] {
    display: flex;
    flex-direction: column;
}

summary.los-expander-title[b-c6r6hik1oe] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.los-expander-title[b-c6r6hik1oe]::-webkit-details-marker {
    display: none;
}

.los-expander-title[b-c6r6hik1oe]::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--mud-palette-primary);
    transition: transform 0.15s ease;
}

.los-expander[open] > .los-expander-title[b-c6r6hik1oe]::before {
    transform: rotate(90deg);
}

[dir="rtl"] .los-expander-title[b-c6r6hik1oe]::before {
    border-left: none;
    border-right: 5px solid var(--mud-palette-primary);
}

[dir="rtl"] .los-expander[open] > .los-expander-title[b-c6r6hik1oe]::before {
    transform: rotate(-90deg);
}

.los-expander-summary[b-c6r6hik1oe] {
    margin-inline-start: auto;
    padding-inline-start: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

.los-expander-summary-ok[b-c6r6hik1oe] {
    color: var(--mud-palette-success);
}

.los-expander-summary-warn[b-c6r6hik1oe] {
    color: var(--mud-palette-warning);
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-c6r6hik1oe] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-c6r6hik1oe] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.los-input[b-c6r6hik1oe] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.los-input:focus[b-c6r6hik1oe] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.los-readout-value[b-c6r6hik1oe] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.los-hint[b-c6r6hik1oe] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

/* ----------------------------------------------------------------- */
/*                      WAYPOINT TABLE                                */
/* ----------------------------------------------------------------- */
/* Mirrors the WPF MissionPlannerControl DataGrid columns:
   # | Command | Lat | Lon | Alt(m) | delete. A CSS grid keeps the
   columns aligned across rows in the narrow panel. */

/* The waypoint count chip on the group title */
.drone-wp-count[b-c6r6hik1oe] {
    margin-inline-start: auto;
    padding: 0 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border-radius: 8px;
    font-size: 0.7rem;
    min-width: 18px;
    text-align: center;
}

.drone-wp-actions[b-c6r6hik1oe] {
    display: flex;
    gap: 6px;
    margin: 3px 0;
    flex-wrap: wrap;
}

.drone-wp-table[b-c6r6hik1oe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Numbers/columns always read left-to-right regardless of culture */
    direction: ltr;
}

.drone-wp-head[b-c6r6hik1oe],
.drone-wp-row[b-c6r6hik1oe] {
    display: grid;
    /* # | command | lat | lon | AGL (edit) | terrain MSL | ASL | delete.
       The command column gives up width to the three altitude columns, which
       are fixed so the numbers stay aligned down the route. */
    grid-template-columns: 18px minmax(62px, 1fr) 1fr 1fr 44px 40px 40px 20px;
    align-items: center;
    gap: 2px;
}

/* Show the first 5 waypoint rows, then scroll to the rest — a long route
   no longer stretches the whole panel. A row is a 22px input plus the 2px
   flex gap, so 5 rows ≈ 5 × 24px = 120px. */
.drone-wp-rows[b-c6r6hik1oe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
}

.drone-wp-head[b-c6r6hik1oe] {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.drone-wp-head .drone-wp-num[b-c6r6hik1oe],
.drone-wp-head .drone-wp-cmd[b-c6r6hik1oe] {
    text-align: center;
}

.drone-wp-seq[b-c6r6hik1oe] {
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.drone-wp-input[b-c6r6hik1oe] {
    height: 22px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 3px;
    font-size: 0.72rem;
}

.drone-wp-input:focus[b-c6r6hik1oe] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.drone-wp-num[b-c6r6hik1oe] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Computed altitude cells (terrain MSL, resulting ASL): plain text, no input
   chrome, so it is obvious at a glance which altitude column is editable. */
.drone-wp-readout[b-c6r6hik1oe] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding: 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The resulting flight altitude is the headline read-out of the pair */
.drone-wp-asl[b-c6r6hik1oe] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.drone-wp-del-btn[b-c6r6hik1oe] {
    height: 20px;
    width: 20px;
    padding: 0;
    line-height: 1;
    background: transparent;
    color: var(--mud-palette-error);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.drone-wp-del-btn:hover[b-c6r6hik1oe] {
    border-color: var(--mud-palette-error);
}

/* ----------------------------------------------------------------- */
/*                      NO-FLY ZONE ROWS                              */
/* ----------------------------------------------------------------- */

.drone-nfz-row[b-c6r6hik1oe] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 0.74rem;
}

.drone-nfz-name[b-c6r6hik1oe] {
    flex: 1;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drone-nfz-verts[b-c6r6hik1oe] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Floor / ceiling pair under each zone row — the band that gives the zone
   its extruded height on the globe. Indented so it reads as a child of the
   zone row above it. */
.drone-nfz-alt-row[b-c6r6hik1oe] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 6px 12px;
}

.drone-nfz-alt-row[b-c6r6hik1oe]  .mud-input-root {
    font-size: 0.74rem;
}

/* Bundled Israel dataset layer toggle. */
.drone-nfz-dataset[b-c6r6hik1oe] {
    padding: 4px 0 2px;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 6px;
}

.drone-nfz-dataset[b-c6r6hik1oe]  .mud-checkbox label {
    font-size: 0.74rem;
}

/* ----------------------------------------------------------------- */
/*                      A* PLAN STATUS                                */
/* ----------------------------------------------------------------- */

.drone-plan-status[b-c6r6hik1oe] {
    margin: 2px 8px 4px 8px;
    padding: 3px 6px;
    font-size: 0.7rem;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.drone-plan-ok[b-c6r6hik1oe] {
    color: var(--mud-palette-success-text);
    background: var(--mud-palette-success);
}

.drone-plan-fail[b-c6r6hik1oe] {
    color: var(--mud-palette-error-text);
    background: var(--mud-palette-error);
}

/* Leg-progress bar under the Plan button while a plan is running. */
.drone-plan-progress[b-c6r6hik1oe] {
    margin: 2px 8px 4px 8px;
}

/* ----------------------------------------------------------------- */
/*                      CLEARANCE WARNING                             */
/* ----------------------------------------------------------------- */

.drone-warn[b-c6r6hik1oe] {
    color: var(--mud-palette-warning);
}

.drone-clearance-warning[b-c6r6hik1oe] {
    margin-top: 3px;
    padding: 3px 6px;
    font-size: 0.68rem;
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning);
    border-radius: 4px;
}
/* _content/AspireChatApp.Razor/Components/Tools/FlightSimulatorTool/Charts/FlightInstrumentsComp.razor.rz.scp.css */
/* ================================================================= */
/*                 FlightInstrumentsComp.razor.css                    */
/*   Right panel: instrument tiles over the Plotly flight log.        */
/* ================================================================= */

.fsi-host[b-5xdrupmhnt] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                     INSTRUMENT TILES                               */
/* ----------------------------------------------------------------- */

.fsi-tiles[b-5xdrupmhnt] {
    display: grid;
    /* Two columns rather than four in a row: the panel is a quarter of the
       screen, and four tiles side by side would clip their values. */
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
    flex: 0 0 auto;
}

.fsi-tile[b-5xdrupmhnt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background);
    min-height: 62px;
}

.fsi-tile-label[b-5xdrupmhnt] {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.fsi-tile-value[b-5xdrupmhnt] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    /* Tabular figures stop the value jittering as digits change width four
       times a second. */
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.fsi-tile-unit[b-5xdrupmhnt] {
    font-size: 0.6rem;
    color: var(--mud-palette-text-secondary);
}

/* Vertical-speed tile is tinted by direction, so climb/descent reads at a
   glance without having to parse the sign. */
.fsi-tile.climbing .fsi-tile-value[b-5xdrupmhnt] {
    color: var(--mud-palette-success);
}

.fsi-tile.descending .fsi-tile-value[b-5xdrupmhnt] {
    color: var(--mud-palette-warning);
}

/* ----------------------------------------------------------------- */
/*                       FLIGHT LOG CHART                             */
/* ----------------------------------------------------------------- */

.fsi-chart-title[b-5xdrupmhnt] {
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

/* The plot fills whatever height is left below the tiles. min-height: 0 is
   required or the flex item refuses to shrink and the chart overflows. */
.fsi-plot[b-5xdrupmhnt] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 0 4px 6px 4px;
    box-sizing: border-box;
}
/* _content/AspireChatApp.Razor/Components/Tools/FlightSimulatorTool/Displays/GlassCockpitDisplayComp.razor.rz.scp.css */
/* ================================================================= */
/*               GlassCockpitDisplayComp.razor.css                    */
/*   One cockpit screen: an optional control strip over a canvas      */
/*   that fills the rest of the panel.                                */
/* ================================================================= */

.gc-host[b-rpzs61l9sn] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    background: #0B0F14;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      RANGE CONTROL (MFD)                           */
/* ----------------------------------------------------------------- */

.gc-toolbar[b-rpzs61l9sn] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(77, 255, 140, 0.25);
    /* The strip belongs to the instrument, not the app chrome, so it keeps the
       avionics palette rather than the MudBlazor surface colours. */
    background: #0B0F14;
    color: #4dff8c;
    font-family: "Consolas", "Menlo", monospace;
    font-size: 0.7rem;
}

.gc-toolbar-label[b-rpzs61l9sn] {
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.gc-toolbar-select[b-rpzs61l9sn] {
    height: 22px;
    box-sizing: border-box;
    background: #0B0F14;
    color: #4dff8c;
    border: 1px solid rgba(77, 255, 140, 0.45);
    border-radius: 3px;
    padding: 0 4px;
    font-family: inherit;
    font-size: 0.7rem;
    /* Ranges are numbers with a Latin unit — always left-to-right, even under
       the RTL default culture. */
    direction: ltr;
}

.gc-toolbar-select:focus[b-rpzs61l9sn] {
    outline: none;
    border-color: #4dff8c;
}

/* ----------------------------------------------------------------- */
/*                          CANVAS                                    */
/* ----------------------------------------------------------------- */

/* The wrapper owns the size; the canvas fills it and its backing store is
   matched to the device pixel ratio in JS. min-height: 0 is required or the
   flex item refuses to shrink and the canvas overflows the panel. */
.gc-canvas-wrap[b-rpzs61l9sn] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.gc-canvas[b-rpzs61l9sn] {
    display: block;
    width: 100%;
    height: 100%;
    /* Never mirror the instruments under RTL: an attitude ball or compass rose
       flipped left-to-right would be dangerously wrong. */
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/FlightSimulatorTool/Editors/FlightSimulatorEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*              FlightSimulatorEditorComp.razor.css                  */
/*   Compact rows: label | small native input, so the whole editor    */
/*   fits the left panel without scrolling.                          */
/*                                                                    */
/*   These duplicate the .los-* rules from LosVisibilityEditorComp    */
/*   under an .fs-* prefix ON PURPOSE. Blazor's CSS isolation scopes  */
/*   every stylesheet to its own generated attribute, so the LOS      */
/*   editor's rules cannot apply here even with identical class       */
/*   names — the duplication is the supported way to share a look.    */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.fs-editor-scroll[b-ltyyh29haq] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.fs-group[b-ltyyh29haq] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fs-group-title[b-ltyyh29haq] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.fs-row[b-ltyyh29haq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.fs-row-label[b-ltyyh29haq] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Aircraft type toggle: Fixed-wing vs Multi-rotor */
.fs-aircraft-toggle[b-ltyyh29haq] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.fs-toggle-btn[b-ltyyh29haq] {
    width: 32px;
    height: 32px;
    padding: 4px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fs-toggle-btn:hover[b-ltyyh29haq] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.fs-toggle-btn.active[b-ltyyh29haq] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.fs-toggle-btn:focus[b-ltyyh29haq] {
    outline: none;
}

/* Small native inputs / selects styled to the Mud palette */
.fs-input[b-ltyyh29haq] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under the RTL default culture */
    direction: ltr;
}

.fs-input:focus[b-ltyyh29haq] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed / live values: right-aligned, tabular so the digits do not
   jitter as the readout updates four times a second */
.fs-readout-value[b-ltyyh29haq] {
    min-width: 96px;
    text-align: end;
    font-weight: 600;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

/* Warning chips (stall / overspeed / GPWS / crash) */
.fs-chip-row[b-ltyyh29haq] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* Hints and action buttons */
.fs-hint[b-ltyyh29haq] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0 0 0;
    font-style: italic;
}

.fs-action-button[b-ltyyh29haq] {
    margin: 6px 6px 0 6px;
}

/* ----------------------------------------------------------------- */
/*                    KEYBOARD REFERENCE                              */
/* ----------------------------------------------------------------- */

.fs-controls-group[b-ltyyh29haq] {
    /* Pushed to the bottom of the panel so the flight parameters stay at
       the top where the user works. */
    margin-top: auto;
}

.fs-key-row[b-ltyyh29haq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding: 1px 0;
}

.fs-key-row kbd[b-ltyyh29haq] {
    /* Key caps read as keys, not as body text */
    min-width: 46px;
    text-align: center;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 1px 4px;
    font-family: "Consolas", "Menlo", monospace;
    font-size: 0.7rem;
    color: var(--mud-palette-text-primary);
    /* Key names are Latin and must not mirror under RTL */
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/FlightSimulatorTool/FlightSimulatorToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                FlightSimulatorToolComp.razor.css                  */
/*   Layout styles for the flight simulator (RTL aware):             */
/*   left editor tabs | Cesium globe + HUD | instruments panel.      */
/*                                                                    */
/*   Editor styles live in FlightSimulatorEditorComp.razor.css and   */
/*   instrument styles in FlightInstrumentsComp.razor.css.           */
/*                                                                    */
/*   The HUD overlay itself is NOT styled here: it is built in JS by  */
/*   flightsimulator_tool_cesium_helper.js, and Blazor's scoped CSS   */
/*   only matches elements Blazor rendered. Those rules live in the   */
/*   global main.css under the .gv-fs-hud-* prefix.                   */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.fstool-container[b-hc4m77epuo] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, instruments on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction). Do NOT add flex-direction: row-reverse
   here: on an rtl container that reverses a SECOND time and cancels out,
   leaving the LTR layout. */
.fstool-container[dir="rtl"][b-hc4m77epuo] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / globe / instruments panels open at 25% / 50% / 25%
   (flex: 1 / 2 / 1, so the free space is split with the globe getting half).
   A splitter drag writes inline width/min/max, which overrides the flex basis
   and pins that panel — the others keep sharing the remainder. */
.fstool-left-panel[b-hc4m77epuo] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .fstool-left-panel[b-hc4m77epuo] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.fstool-left-panel.collapsed[b-hc4m77epuo] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-hc4m77epuo] .fstool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-hc4m77epuo] .fstool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-hc4m77epuo] .fstool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Glass-cockpit tab host — the PFD/MFD canvas fills its whole tab panel.
   Without an explicit flex chain the canvas wrapper collapses and the
   instrument is drawn into a sliver at the top of the panel.
   ::deep because MudTabPanel renders the wrapper this div sits in, so that
   wrapper never carries this component's scoped-CSS attribute — styling only
   the inner div leaves an unstretched parent between it and the panel, which
   is exactly what pinned the PFD to 237px inside a 730px tab. */
[b-hc4m77epuo] .fstool-tab-panel > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.fstool-display-host[b-hc4m77epuo] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* CHAT tab host — lets the embedded per-tool ChatBotComp fill the panel */
.fstool-chat-host[b-hc4m77epuo] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-hc4m77epuo] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-hc4m77epuo] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-hc4m77epuo] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-hc4m77epuo],
.panel-splitter:active[b-hc4m77epuo] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-hc4m77epuo] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                  CENTER PANEL (Globe + HUD)                        */
/* ----------------------------------------------------------------- */

.fstool-center-panel[b-hc4m77epuo] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-hc4m77epuo] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
    /* The toolbar holds a button group and a hint chip; on a narrow panel it
       wraps rather than pushing the zoom buttons off the edge. */
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------- */
/*                    TOOLBAR DROPDOWN MENUS                          */
/* ----------------------------------------------------------------- */

/* The aircraft picker and the camera-view picker.

   These replaced a hand-built segmented control (three joined buttons, the
   active one filled). Two exclusive choices — one of which now has four
   options — cost more toolbar width than they were worth, and the aircraft
   half could only express the CATEGORY, leaving the specific airframe to the
   FLIGHT tab. A menu names the current selection on its face instead. */
.fstool-toolbar-menu[b-hc4m77epuo] {
    display: inline-flex;
    align-items: center;
}

/* ::deep — MudButton is a child component, so its rendered <button> never
   carries this component's scope attribute. */
[b-hc4m77epuo] .fstool-toolbar-menu-button {
    min-width: 0;
    white-space: nowrap;
    text-transform: none;
}

/* Both pickers show a glyph beside their label. The inline SVG has no
   intrinsic box the flex row can measure, so it is given one here. */
[b-hc4m77epuo] .fstool-menu-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

[b-hc4m77epuo] .fstool-menu-glyph svg {
    width: 100%;
    height: 100%;
    display: block;
}

[b-hc4m77epuo] .fstool-toolbar-menu-button .fstool-menu-label {
    margin-inline-start: 6px;
}

/* One menu row: glyph, label, and the check mark pushed to the far end. */
[b-hc4m77epuo] .fstool-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* margin-inline-start rather than margin-left so the check lands on the
   trailing edge in Hebrew too. */
[b-hc4m77epuo] .fstool-menu-check {
    margin-inline-start: auto;
    color: var(--mud-palette-primary);
}

.map-area[b-hc4m77epuo] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* position: relative is load-bearing — the JS helper appends the absolutely
   positioned HUD overlay INSIDE this element, so this is what the HUD's
   inset: 0 resolves against. Without it the HUD would size to the page. */
.map-container[b-hc4m77epuo] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
    /* The globe takes keyboard focus so the flight controls work; the default
       focus ring around the whole 3D view is noise, and the HUD already makes
       it obvious the simulator is live. */
    outline: none;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-hc4m77epuo]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                  INSTRUMENTS PANEL (host)                          */
/* ----------------------------------------------------------------- */

.fstool-side-panel[b-hc4m77epuo] {
    flex: 1 1 0;
    min-width: 280px; /* equal third alongside the editor and globe panels */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.fstool-chat-panel[b-hc4m77epuo] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate.
   !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.fstool-chat-panel.collapsed[b-hc4m77epuo] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .fstool-chat-panel.collapsed[b-hc4m77epuo] {
    border-right-width: 0;
}

[dir="rtl"] .fstool-chat-panel[b-hc4m77epuo] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ----------------------------------------------------------------- */
/*        RIGHT PANEL collapsed to a rail (its header button)         */
/* ----------------------------------------------------------------- */

/* The tabs stay MOUNTED (hidden), so the social lists and the journal chart
   keep their state; only the header's expand button shows on the rail. */
.fstool-side-panel[b-hc4m77epuo] {
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
}

.fstool-side-panel.collapsed[b-hc4m77epuo] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px !important;
    max-width: 48px;
}

.fstool-side-panel.collapsed > :not(.panel-header)[b-hc4m77epuo] {
    display: none !important;
}

.fstool-side-panel.collapsed .panel-title[b-hc4m77epuo],
.fstool-left-panel.collapsed .panel-title[b-hc4m77epuo] {
    display: none;
}

.fstool-side-panel.collapsed .panel-header[b-hc4m77epuo],
.fstool-left-panel.collapsed .panel-header[b-hc4m77epuo] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/FloorPlanGeneratorTool/Charts/FloorPlanViewChartComp.razor.rz.scp.css */
/* ================================================================= */
/*              FloorPlanViewChartComp.razor.css                     */
/*   The scale plan drawing, the option picker above it, and the     */
/*   score breakdown below.                                          */
/* ================================================================= */

.fpgen-plan-host[b-b3g2xydwgd] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                        OPTION PICKER                               */
/* ----------------------------------------------------------------- */

.fpgen-optionbar[b-b3g2xydwgd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.fpgen-optionbar-label[b-b3g2xydwgd] {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    margin-inline-end: 4px;
}

.fpgen-optionchip[b-b3g2xydwgd] {
    min-width: 26px;
    height: 24px;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    padding: 0 6px;
}

.fpgen-optionchip:hover[b-b3g2xydwgd] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.fpgen-optionchip.selected[b-b3g2xydwgd] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                          THE DRAWING                               */
/* ----------------------------------------------------------------- */

/* The drawing takes all the slack the panel has; the score bar below is fixed. */
.fpgen-plan-area[b-b3g2xydwgd] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overflow: hidden;
    background: var(--mud-palette-background);
}

/* A floor plan is a scale drawing, so the aspect ratio is preserved by the SVG's own
   preserveAspectRatio rather than by stretching to the panel. */
.fpgen-plan-svg[b-b3g2xydwgd] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* NOTE: the room labels are deliberately styled with SVG PRESENTATION ATTRIBUTES in
   FloorPlanViewChartComp.razor.cs, not from here.

   The labels are emitted through a MarkupString (Razor reserves <text> as a control
   keyword and rejects an SVG <text> carrying attributes), and injected markup never
   receives Blazor's b-xxxxx scope attribute — so any rule written here would silently
   fail to match. The text would then inherit the page's 14px, which inside a viewBox
   measured in METRES renders each label several times wider than the entire plan.

   Rules for those labels therefore do NOT belong in this file. */

/* ----------------------------------------------------------------- */
/*                       SCORE BREAKDOWN                              */
/* ----------------------------------------------------------------- */

.fpgen-scorebar[b-b3g2xydwgd] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.fpgen-scorerow[b-b3g2xydwgd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .74rem;
}

.fpgen-scorelabel[b-b3g2xydwgd] {
    flex: 0 0 90px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fpgen-scoretrack[b-b3g2xydwgd] {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.fpgen-scorefill[b-b3g2xydwgd] {
    height: 100%;
    background: var(--mud-palette-primary);
    border-radius: 3px;
}

.fpgen-scorevalue[b-b3g2xydwgd] {
    flex: 0 0 34px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/FloorPlanGeneratorTool/Editors/FloorPlanGeneratorEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*           FloorPlanGeneratorEditorComp.razor.css                  */
/*   Compact brief editor: site envelope, room programme, generate.  */
/*                                                                   */
/*   The fpgen-row / fpgen-input classes are a deliberate DUPLICATE  */
/*   of the los-row / los-input pattern from LosVisibilityTool.      */
/*   Blazor CSS isolation scopes each stylesheet to its own          */
/*   generated attribute, so the rules cannot be inherited even      */
/*   though the class names match — they must be repeated here.      */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                          SCROLL HOST                               */
/* ----------------------------------------------------------------- */

.fpgen-editor-scroll[b-t3b50lcez0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 8px 12px 8px;
    overflow-y: auto;
    min-height: 0;
}

/* ----------------------------------------------------------------- */
/*                            GROUPS                                  */
/* ----------------------------------------------------------------- */

.fpgen-group[b-t3b50lcez0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background-color: var(--mud-palette-surface);
}

.fpgen-group-title[b-t3b50lcez0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

/* ----------------------------------------------------------------- */
/*                        COMPACT ROWS                                */
/* ----------------------------------------------------------------- */

.fpgen-row[b-t3b50lcez0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.fpgen-row-label[b-t3b50lcez0] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* `direction: ltr` keeps numbers readable under the app's RTL default culture. */
.fpgen-input[b-t3b50lcez0] {
    width: 120px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    direction: ltr;
}

.fpgen-input:focus[b-t3b50lcez0] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* The room-name field is the row's primary content, so it takes the slack. */
.fpgen-input-name[b-t3b50lcez0] {
    flex: 1;
    width: auto;
    font-weight: 600;
}

.fpgen-check[b-t3b50lcez0] {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
}

/* ----------------------------------------------------------------- */
/*                          READ-OUTS                                 */
/* ----------------------------------------------------------------- */

.fpgen-readout[b-t3b50lcez0] {
    min-width: 90px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

/* The area read-out turns warning-coloured the moment the brief over-fills the site. */
.fpgen-readout.over[b-t3b50lcez0] {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.fpgen-warning[b-t3b50lcez0] {
    font-size: .72rem;
    line-height: 1.35;
    color: var(--mud-palette-warning);
    padding: 4px 0 2px 0;
}

.fpgen-empty[b-t3b50lcez0] {
    font-size: .74rem;
    color: var(--mud-palette-text-disabled);
    padding: 6px 0;
}

/* ----------------------------------------------------------------- */
/*                         ROOM CARDS                                 */
/* ----------------------------------------------------------------- */

.fpgen-roomcard[b-t3b50lcez0] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 6px;
    margin-bottom: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 5px;
    background-color: var(--mud-palette-background);
}

.fpgen-remove[b-t3b50lcez0] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 1rem;
    line-height: 1;
}

.fpgen-remove:hover[b-t3b50lcez0] {
    color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
}

/* ----------------------------------------------------------------- */
/*                            CHIPS                                   */
/* ----------------------------------------------------------------- */

.fpgen-chip[b-t3b50lcez0] {
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    padding: 1px 10px;
    font-size: .72rem;
    white-space: nowrap;
}

.fpgen-chip:hover[b-t3b50lcez0] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.fpgen-exportrow[b-t3b50lcez0] {
    gap: 6px;
    justify-content: flex-start;
    padding-top: 6px;
}
/* _content/AspireChatApp.Razor/Components/Tools/FloorPlanGeneratorTool/FloorPlanGeneratorToolComp.razor.rz.scp.css */
/* ================================================================= */
/*            FloorPlanGeneratorToolComp.razor.css                   */
/*   Layout styles for the floor plan generator (RTL aware):         */
/*   left brief editor | plan view.                                  */
/*                                                                   */
/*   The lostool-* class names are shared with the viewshed tools by */
/*   NAME only: Blazor CSS isolation scopes each stylesheet to its   */
/*   own generated attribute, so the rules cannot be inherited and   */
/*   are repeated here deliberately.                                 */
/*                                                                   */
/*   This tool has no Cesium globe — a schematic floor plan is not   */
/*   geolocated — so the map-container rules are dropped and the     */
/*   centre panel hosts the plan drawing instead.                    */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-z0oo3vumz2] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-z0oo3vumz2] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-z0oo3vumz2] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-z0oo3vumz2] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-z0oo3vumz2] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-z0oo3vumz2] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-z0oo3vumz2] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-z0oo3vumz2] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-z0oo3vumz2] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-z0oo3vumz2] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-z0oo3vumz2] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-z0oo3vumz2],
.panel-splitter:active[b-z0oo3vumz2] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-z0oo3vumz2] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-z0oo3vumz2] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-z0oo3vumz2] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

/* ----------------------------------------------------------------- */
/*                TOP-VIEW CHART PANEL (host)                         */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-z0oo3vumz2] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.viewshed-chat-panel[b-z0oo3vumz2] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.viewshed-chat-panel.collapsed[b-z0oo3vumz2] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .viewshed-chat-panel.collapsed[b-z0oo3vumz2] {
    border-right-width: 0;
}

[dir="rtl"] .viewshed-chat-panel[b-z0oo3vumz2] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.viewshed-chat-host[b-z0oo3vumz2] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp so  */
/*   every globe offers the same toolbar options)                      */
/* ================================================================= */

.menu-exaggeration-row[b-z0oo3vumz2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-z0oo3vumz2] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-z0oo3vumz2] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-z0oo3vumz2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-z0oo3vumz2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-z0oo3vumz2] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-z0oo3vumz2] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

/* Day-sequence frame picker in the map toolbar. */
.sunshadow-frame-label[b-z0oo3vumz2] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-inline-end: 4px;
    align-self: center;
}
/* _content/AspireChatApp.Razor/Components/Tools/GeoReferenceTool/Charts/GeoReferenceImageComp.razor.rz.scp.css */
/* ================================================================= */
/*                GeoReferenceImageComp.razor.css                    */
/*   The source-image panel: the raster with its pixel ruler on top,  */
/*   the control-point table underneath — mirroring the WPF right-    */
/*   hand imagePlot + control-point ListView split.                   */
/*   CSS isolation is per-component, so the georef-* rules in         */
/*   GeoReferenceEditorComp.razor.css do NOT apply here; the few      */
/*   shared-looking names are duplicated on purpose.                  */
/* ================================================================= */

.georef-image-panel[b-7iz1epw97v] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ---------------- Image area ---------------- */

/* Takes the free space; the table below keeps its own fixed share. */
.georef-image-area[b-7iz1epw97v] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 4px;
    background: var(--mud-palette-background-grey);
}

.georef-image-svg[b-7iz1epw97v] {
    width: 100%;
    height: 100%;
    /* The SVG carries its own coordinate system; never let the RTL page
       direction mirror it. */
    direction: ltr;
}

/* The transparent rect that captures control-point clicks */
.georef-click-surface[b-7iz1epw97v] {
    cursor: crosshair;
}

.georef-axis-text[b-7iz1epw97v] {
    fill: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.georef-image-empty[b-7iz1epw97v] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    text-align: center;
}

/* ---------------- Control-point table ---------------- */

/* Fixed share of the panel, scrolling internally — the image must not be
   squeezed away as points accumulate. */
.georef-table-wrapper[b-7iz1epw97v] {
    flex: 0 0 34%;
    min-height: 0;
    overflow: auto;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.georef-table[b-7iz1epw97v] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    direction: ltr;
}

.georef-table thead th[b-7iz1epw97v] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    text-align: center;
    padding: 3px 4px;
    white-space: nowrap;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.georef-table tbody td[b-7iz1epw97v] {
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.georef-num[b-7iz1epw97v] {
    font-variant-numeric: tabular-nums;
}

.georef-th-color[b-7iz1epw97v] {
    width: 22px;
}

.georef-th-delete[b-7iz1epw97v] {
    width: 26px;
}

/* The control point currently awaiting its globe click */
.georef-row-pending[b-7iz1epw97v] {
    background: var(--mud-palette-warning-hover);
}

.georef-color-chip[b-7iz1epw97v] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    vertical-align: middle;
}

.georef-delete-button[b-7iz1epw97v] {
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
}

.georef-delete-button:hover:not(:disabled)[b-7iz1epw97v] {
    color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
}

.georef-delete-button:disabled[b-7iz1epw97v] {
    opacity: 0.4;
    cursor: default;
}

.georef-table-empty[b-7iz1epw97v] {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    padding: 8px 4px !important;
}
/* _content/AspireChatApp.Razor/Components/Tools/GeoReferenceTool/Editors/GeoReferenceEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                GeoReferenceEditorComp.razor.css                   */
/*   Compact WPF-GeoReferenceTool-style rows: label | small editor,  */
/*   so the whole editor fits the panel without scrolling.           */
/*   Rules mirror CameraEditorComp.razor.css / LosVisibilityEditor-  */
/*   Comp.razor.css — CSS isolation is per-component, so identical   */
/*   class names in those stylesheets do NOT apply here; the         */
/*   duplication is intentional.                                     */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.georef-editor-scroll[b-ottqmvyf4y] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.georef-group[b-ottqmvyf4y] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.georef-group-title[b-ottqmvyf4y] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.georef-row[b-ottqmvyf4y] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.georef-row-label[b-ottqmvyf4y] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette */
.georef-input[b-ottqmvyf4y] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers and file names always read left-to-right */
    direction: ltr;
}

.georef-input:focus[b-ottqmvyf4y] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed readout values */
.georef-readout-value[b-ottqmvyf4y] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* Action buttons row (GEO-REFERENCE / Clear All) */
.georef-button-row[b-ottqmvyf4y] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* Hints under the control-point group */
.georef-hint[b-ottqmvyf4y] {
    margin: 2px 0 0 0;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

/* Active "click the globe now" hint — this is the tool's modal state, so it
   must read as live, not as passive help text. */
.georef-hint-active[b-ottqmvyf4y] {
    color: var(--mud-palette-warning);
    font-weight: 600;
}
/* _content/AspireChatApp.Razor/Components/Tools/GeoReferenceTool/GeoReferenceToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                GeoReferenceToolComp.razor.css                     */
/*   Layout styles for the GeoReference tool (RTL aware):            */
/*   left editor tabs | Cesium globe | source-image panel.           */
/*   Mirrors CameraToolComp.razor.css — CSS isolation is             */
/*   per-component, so identical class names there do NOT apply here.*/
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.georeftool-container[b-je5nru05ty] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, image panel on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | image -> image | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.georeftool-container[dir="rtl"][b-je5nru05ty] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / image panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline
   width/min/max, which overrides the flex basis and pins that panel — the others
   keep sharing the remainder. */
.georeftool-left-panel[b-je5nru05ty] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .georeftool-left-panel[b-je5nru05ty] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.georeftool-left-panel.collapsed[b-je5nru05ty] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements never receive this component's CSS scope attribute. */
[b-je5nru05ty] .georeftool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-je5nru05ty] .georeftool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-je5nru05ty] .georeftool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-je5nru05ty] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-je5nru05ty] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-je5nru05ty] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-je5nru05ty],
.panel-splitter:active[b-je5nru05ty] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-je5nru05ty] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.georeftool-center-panel[b-je5nru05ty] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-je5nru05ty] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-je5nru05ty] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-je5nru05ty] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

.map-container[b-je5nru05ty]  .cesium-viewer-bottom {
    z-index: 5;
}

/* Registered-image opacity slider, in the map toolbar where the hint chip sits
   before a registration exists (so the toolbar never grows). */
.georef-opacity-control[b-je5nru05ty] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 2px 10px;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
    font-size: 0.8rem;
}

.georef-opacity-label[b-je5nru05ty] {
    white-space: nowrap;
}

.georef-opacity-range[b-je5nru05ty] {
    width: 140px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.georef-opacity-value[b-je5nru05ty] {
    min-width: 3.2em;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- */
/*                SOURCE-IMAGE PANEL (host)                           */
/* ----------------------------------------------------------------- */

.georeftool-side-panel[b-je5nru05ty] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                DEDICATED CHATBOT PANEL (right-most)               */
/* ----------------------------------------------------------------- */

.georeftool-chat-panel[b-je5nru05ty] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    /* Bound the height to the flex row, not to the content. Without this the
       panel keeps the default `min-height: auto`, grows to its natural content
       height and pushes the bot-panel button row below the fold, where it is
       unreachable because every ancestor is `overflow: hidden`. */
    height: 100%;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.georeftool-chat-panel.collapsed[b-je5nru05ty] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .georeftool-chat-panel.collapsed[b-je5nru05ty] {
    border-right-width: 0;
}

[dir="rtl"] .georeftool-chat-panel[b-je5nru05ty] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.georeftool-chat-host[b-je5nru05ty] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp)    */
/* ================================================================= */

.menu-exaggeration-row[b-je5nru05ty] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-je5nru05ty] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-je5nru05ty] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-je5nru05ty] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-je5nru05ty] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-je5nru05ty] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-je5nru05ty] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/GreenBuildingTool/Charts/GreenBuildingChartComp.razor.rz.scp.css */
/* ================================================================= */
/*              GreenBuildingChartComp.razor.css                     */
/*   Green-building result chart: interactive Plotly plot + a          */
/*   control row underneath. Mirrors ViewshedTopViewChartComp.razor    */
/*   .css — the rules are duplicated because Blazor CSS isolation      */
/*   scopes each stylesheet to its own generated attribute.           */
/*   Axis titles live inside the Plotly layout (its SVG text applies   */
/*   bidi, so Hebrew needs no HTML-title workaround).                  */
/* ================================================================= */

.gb-chart-host[b-m4vz3es7ch] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.gb-chart-plot-area[b-m4vz3es7ch] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

.gb-chart-toolbar[b-m4vz3es7ch] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.gb-chart-toolbar-label[b-m4vz3es7ch] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.gb-chart-view-select[b-m4vz3es7ch] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    min-width: 140px;
}

.gb-chart-toolbar-btn[b-m4vz3es7ch] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

/* Monthly / hourly segmented toggle (psychrometric view only) */
.gb-chart-toggle[b-m4vz3es7ch] {
    display: inline-flex;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    overflow: hidden;
}

.gb-chart-toggle-btn[b-m4vz3es7ch] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border: none;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.6;
}

.gb-chart-toggle-btn:not(:last-child)[b-m4vz3es7ch] {
    border-right: 1px solid var(--mud-palette-lines-inputs);
}

.gb-chart-toggle-btn.active[b-m4vz3es7ch] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.gb-chart-toggle-btn:disabled[b-m4vz3es7ch] {
    opacity: 0.6;
    cursor: default;
}

.gb-chart-toolbar-btn:hover[b-m4vz3es7ch] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.gb-chart-toolbar-btn:active[b-m4vz3es7ch] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/GreenBuildingTool/Editors/GreenBuildingEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             GreenBuildingEditorComp.razor.css                     */
/*   Compact WPF-editor-style rows: label | small editor, so the     */
/*   whole editor fits the panel. The class names/rules mirror        */
/*   AltitudeViewshedEditorComp.razor.css deliberately — Blazor CSS   */
/*   isolation scopes each stylesheet to its own generated attribute, */
/*   so the rules must be duplicated here (identical class names do   */
/*   NOT share a scope).                                              */
/* ================================================================= */

.gb-editor-scroll[b-t781q3uep8] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.gb-group[b-t781q3uep8] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gb-group-title[b-t781q3uep8] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* ----------------------------------------------------------------- */
/*             COLLAPSIBLE GROUPS (animated expanders)               */
/*   Header row (.gb-expander-title) toggles the .open class on the   */
/*   group; the body animates its height via a grid-template-rows     */
/*   0fr -> 1fr transition (the reliable way to animate auto height). */
/* ----------------------------------------------------------------- */

.gb-expander[b-t781q3uep8] {
    display: flex;
    flex-direction: column;
}

.gb-expander-title[b-t781q3uep8] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    margin-bottom: 0;
}

/* Disclosure triangle — rotates 90° when the group is open. */
.gb-expander-title[b-t781q3uep8]::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--mud-palette-primary);
    transition: transform 0.2s ease;
}

.gb-expander.open > .gb-expander-title[b-t781q3uep8]::before {
    transform: rotate(90deg);
}

[dir="rtl"] .gb-expander-title[b-t781q3uep8]::before {
    border-left: none;
    border-right: 5px solid var(--mud-palette-primary);
}

[dir="rtl"] .gb-expander.open > .gb-expander-title[b-t781q3uep8]::before {
    transform: rotate(-90deg);
}

/* Animated body: collapsed = 0 rows, open = 1fr. The inner wrapper is
   min-height:0 + overflow:hidden so its content can be clipped mid-animation. */
.gb-expander-body[b-t781q3uep8] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
}

.gb-expander.open > .gb-expander-body[b-t781q3uep8] {
    grid-template-rows: 1fr;
}

.gb-expander-body-inner[b-t781q3uep8] {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Small gap between the header and the revealed rows, only while open. */
.gb-expander.open > .gb-expander-body > .gb-expander-body-inner[b-t781q3uep8] {
    padding-top: 1px;
}

.gb-expander-summary[b-t781q3uep8] {
    margin-inline-start: auto;
    padding-inline-start: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

.gb-expander-summary-ok[b-t781q3uep8] {
    color: var(--mud-palette-success);
    font-size: 0.95rem;
    letter-spacing: 1px;
}

/* ----------------------------------------------------------------- */
/*                         ROWS + INPUTS                              */
/* ----------------------------------------------------------------- */

.gb-row[b-t781q3uep8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.gb-row-label[b-t781q3uep8] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* The live value shown beside a slider label */
.gb-inline-value[b-t781q3uep8] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

.gb-input[b-t781q3uep8] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    direction: ltr;
}

.gb-input:focus[b-t781q3uep8] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.gb-input-narrow[b-t781q3uep8] {
    width: 82px;
}

/* Inline checkbox row (neighbour shadows) */
.gb-checkbox-row[b-t781q3uep8] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* Computed readout values */
.gb-readout-value[b-t781q3uep8] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    color: var(--mud-palette-text-primary);
}

/* Climate data-source footer */
.gb-source-footer[b-t781q3uep8] {
    font-size: 0.66rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    margin-top: 2px;
    white-space: normal;
}

/* Wh/m2 heatmap legend */
.gb-legend-row[b-t781q3uep8] {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.gb-legend-caption[b-t781q3uep8] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
}

.gb-legend[b-t781q3uep8] {
    display: flex;
    align-items: center;
    gap: 6px;
    direction: ltr;
}

.gb-legend-ramp[b-t781q3uep8] {
    flex: 1 1 auto;
    height: 12px;
    border-radius: 3px;
    /* blue -> cyan -> green -> yellow -> red, matching HeatColor in the tool */
    background: linear-gradient(to right,
        #0000FF 0%, #00C8FF 25%, #00C800 50%, #FFDC00 75%, #DC0000 100%);
}

.gb-legend-min[b-t781q3uep8],
.gb-legend-max[b-t781q3uep8] {
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* Compute button + hint */
.gb-compute-button[b-t781q3uep8] {
    margin: 4px 6px;
}

.gb-hint[b-t781q3uep8] {
    margin: 0 8px 6px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}
/* _content/AspireChatApp.Razor/Components/Tools/GreenBuildingTool/GreenBuildingToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                GreenBuildingToolComp.razor.css                    */
/*   Layout styles for the green-building tool (RTL aware):          */
/*   left editor tabs | Cesium globe | chart panel.                  */
/*   Mirrors AltitudeViewshedToolComp.razor.css — the rules are      */
/*   repeated rather than shared because Blazor CSS isolation scopes */
/*   each component's stylesheet to its own generated attribute, so  */
/*   the class names are identical but the scope attribute is not.   */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.gbtool-container[b-b6beh05tta] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.gbtool-container[dir="rtl"][b-b6beh05tta] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.gbtool-left-panel[b-b6beh05tta] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .gbtool-left-panel[b-b6beh05tta] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.gbtool-left-panel.collapsed[b-b6beh05tta] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll. ::deep because
   MudTabs is a child component and never receives this component's scope. */
[b-b6beh05tta] .gbtool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-b6beh05tta] .gbtool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-b6beh05tta] .gbtool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-b6beh05tta] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-b6beh05tta] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-b6beh05tta] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-b6beh05tta],
.panel-splitter:active[b-b6beh05tta] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-b6beh05tta] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.gbtool-center-panel[b-b6beh05tta] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-b6beh05tta] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-b6beh05tta] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-b6beh05tta] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

.map-container[b-b6beh05tta]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*        CENTER TABS (Map + CAD) — both kept mounted, CSS-hidden     */
/* ----------------------------------------------------------------- */

.gbtool-center-tabs[b-b6beh05tta] {
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #333);
    flex: 0 0 auto;
}

.gbtool-center-tabpanel[b-b6beh05tta] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

/* A hidden tab keeps its viewer alive (Cesium/Three) but takes no space. */
.gb-tab-hidden[b-b6beh05tta] {
    display: none;
}

.cad-area[b-b6beh05tta] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.cad-container[b-b6beh05tta] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* ----------------------------------------------------------------- */
/*                      CHART PANEL (host)                            */
/* ----------------------------------------------------------------- */

.gbtool-side-panel[b-b6beh05tta] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                 CHAT PANEL (dedicated ChatBot)                     */
/* ----------------------------------------------------------------- */

/* RIGHT-MOST panel: this tool's dedicated ChatBot, toggled by the app-bar
   chat button (ToolChatPanelService). */
.gbtool-chat-panel[b-b6beh05tta] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.gbtool-chat-panel.collapsed[b-b6beh05tta] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .gbtool-chat-panel.collapsed[b-b6beh05tta] {
    border-right-width: 0;
}

[dir="rtl"] .gbtool-chat-panel[b-b6beh05tta] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Chat host — lets the embedded per-tool ChatBotComp fill the panel */
.gbtool-chat-host[b-b6beh05tta] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Imaging/DeepLearningTool/DeepLearningToolComp.razor.rz.scp.css */
/* =================================================================
   DeepLearningToolComp.razor.css
   Four panels, like every other tool: workflow tabs | imagery | results | chat.

   The dl-row / dl-input classes are deliberate COPIES of the
   LosVisibilityTool's los-row pattern. Blazor CSS isolation is
   per-component, so rules cannot be inherited across components
   even with identical class names - duplicating them here is the
   supported way, not an oversight.
   ================================================================= */

.dl-container[b-r7j299incq] { display: flex; height: 100%; width: 100%; overflow: hidden; }

.dl-left-panel[b-r7j299incq] { display: flex; flex-direction: column; width: 460px; min-width: 320px;
                 border-inline-end: 1px solid var(--mud-palette-lines-default); overflow: hidden; }
.dl-left-panel.collapsed[b-r7j299incq] { width: 48px; min-width: 48px; }

.dl-center-panel[b-r7j299incq] { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.dl-right-panel[b-r7j299incq] { display: flex; flex-direction: column; width: 320px; min-width: 220px;
                  border-inline-start: 1px solid var(--mud-palette-lines-default); overflow: hidden; }

.dl-splitter[b-r7j299incq] { width: 4px; cursor: col-resize; background: var(--mud-palette-lines-default); opacity: .5; }

.panel-header[b-r7j299incq] { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                padding: 4px 8px; border-block-end: 1px solid var(--mud-palette-lines-default); }
.panel-title[b-r7j299incq] { display: flex; align-items: center; font-size: .85rem; }

/* Class= and PanelClass= land on elements MudTabs renders for ITSELF, which never
   carry this component's [b-hash] - so these two can only be reached through
   ::deep from an ancestor that IS in this file's markup. Written bare they
   compiled to .dl-tabs[b-hash] and matched nothing. Same trap as the tab-width
   block further down; see the note there. */
.dl-left-panel[b-r7j299incq]  .dl-tabs { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.dl-left-panel[b-r7j299incq]  .dl-tab-panel { padding: 8px; overflow-y: auto; }

/* The imagery pane. A placeholder rather than an empty box: an empty panel
   reads as broken, a labelled one reads as waiting. */
.dl-canvas-host[b-r7j299incq] { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
                  overflow: auto; background: var(--mud-palette-background-grey); }
.dl-preview[b-r7j299incq] { max-width: 100%; max-height: 100%; object-fit: contain; }
.dl-placeholder[b-r7j299incq] { display: flex; flex-direction: column; align-items: center; gap: 8px;
                  color: var(--mud-palette-text-secondary); }
.dl-image-caption[b-r7j299incq] { color: var(--mud-palette-text-secondary); font-size: .72rem; }

/* Compact single-row fields: the left panel must fit without scrolling, so a
   parameter takes one row, not the height of a Material field. */
.dl-row[b-r7j299incq] { display: flex; align-items: center; gap: 6px; padding: 1px 0; font-size: .78rem; min-height: 26px; }
.dl-row-label[b-r7j299incq] { flex: 1; color: var(--mud-palette-text-secondary); white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.dl-row-value[b-r7j299incq] { font-size: .76rem; direction: ltr; text-align: end; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.dl-input[b-r7j299incq] { width: 190px; height: 24px; box-sizing: border-box; background: var(--mud-palette-background);
            color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default);
            border-radius: 4px; padding: 0 6px; font-size: .78rem; direction: ltr; }
.dl-input:focus[b-r7j299incq] { outline: none; border-color: var(--mud-palette-primary); }
.dl-input-wide[b-r7j299incq] { width: 100%; }

.dl-pending[b-r7j299incq] { display: flex; flex-direction: column; gap: 4px; }

/* Results panel */
.dl-results[b-r7j299incq] { padding: 8px; overflow-y: auto; }
.dl-summary-row[b-r7j299incq] { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                  padding: 2px 0; font-size: .78rem; }
.dl-summary-label[b-r7j299incq] { color: var(--mud-palette-text-secondary); }
.dl-summary-value[b-r7j299incq] { font-variant-numeric: tabular-nums; direction: ltr; }
.dl-class-legend[b-r7j299incq] { display: flex; flex-direction: column; gap: 2px; }
.dl-legend-row[b-r7j299incq] { display: flex; align-items: center; gap: 6px; font-size: .78rem; }
.dl-legend-swatch[b-r7j299incq] { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto;
                    border: 1px solid var(--mud-palette-lines-default); }
.dl-legend-name[b-r7j299incq] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-status[b-r7j299incq] { display: block; margin-block-start: 8px; color: var(--mud-palette-text-secondary); }

/* Seven tabs in a ~440px panel. The numbers are part of the workflow - they say
   which step you are on - so the labels must not lose them, and the words must
   not be cut either ("EVALUAT" is not a word).

   The ancestor is .dl-left-panel, NOT .dl-tabs, and that is the whole trick.
   ::deep compiles to `<ancestor>[b-xxxxx] .mud-tab`, so the ancestor has to be an
   element Blazor stamped the scope attribute onto - which it only does for markup
   written in THIS component. Class="dl-tabs" lands on the root <div> MudTabs
   renders for itself, and that div never receives this component's attribute, so
   every rule written against .dl-tabs ::deep silently matched nothing. The tabs
   kept MudBlazor's own 14px font, 16px side padding and flex:1 1 0 and clipped
   to "PROJEC" / "EVALUAT". .dl-left-panel is in this file's markup, so it works.

   flex:0 0 auto is the fix itself: stretching tabs to share the strip equally
   gives each the AVERAGE width, and "5 Evaluate" needs more than the average
   while "6 Infer" wastes what it is given. Sized to their own content, all
   seven fit with room to spare. */
/* flex and padding carry !important because MudBlazor sets both from a selector
   this one does not outrank; font-size and the rest land without it. Measured:
   the seven labels need 338px of a 440px strip, so nothing is cut. */
.dl-left-panel[b-r7j299incq]  .mud-tab { flex: 0 0 auto !important; min-width: 0; max-width: none;
                                 padding: 4px 6px !important; font-size: .62rem;
                                 letter-spacing: 0; text-transform: none; white-space: nowrap; }
.dl-left-panel[b-r7j299incq]  .mud-tab-content { white-space: nowrap; overflow: visible; }
.dl-left-panel[b-r7j299incq]  .mud-tabs-toolbar { min-height: 38px; }
/* Each tab is wrapped in a .mud-tooltip-root div, and THAT wrapper is the flex
   item the toolbar stretches - so sizing the tab itself achieved nothing while
   its parent stayed pinned to an equal share (57px, one pixel short of
   "5 Evaluate"). The wrapper has to shrink-wrap too. */
.dl-left-panel[b-r7j299incq]  .mud-tabs-toolbar-inner > .mud-tooltip-root { flex: 0 0 auto !important; }

/* The RIGHT panel is tabbed as well - Results | About - so the tab strip is that
   panel's header and there is no separate header band. Everything here goes
   through ::deep off .dl-right-panel for the reason above: .dl-right-tabs and
   .dl-right-tab-panel are MudBlazor's own elements.
   Two short labels in 320px, so they are left at a readable size rather than
   squeezed like the six-step strip on the left. */
.dl-right-panel[b-r7j299incq]  .dl-right-tabs { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.dl-right-panel[b-r7j299incq]  .dl-right-tab-panel { padding: 0; overflow: hidden; }
.dl-right-panel[b-r7j299incq]  .mud-tabs { display: flex; flex-direction: column; min-height: 0; }
.dl-right-panel[b-r7j299incq]  .mud-tabs-panels { flex: 1 1 auto; min-height: 0; display: flex; }
.dl-right-panel[b-r7j299incq]  .mud-tabs-panels > .mud-tab-panel { flex: 1 1 auto; min-height: 0;
                                                           display: flex; flex-direction: column; }
.dl-right-panel[b-r7j299incq]  .mud-tab { flex: 0 0 auto !important; min-width: 0; max-width: none;
                                  padding: 4px 10px !important; font-size: .72rem;
                                  letter-spacing: 0; text-transform: none; white-space: nowrap; }
.dl-right-panel[b-r7j299incq]  .mud-tab .mud-icon-root { font-size: 1rem; margin-inline-end: 4px; }
.dl-right-panel[b-r7j299incq]  .mud-tabs-toolbar { min-height: 38px;
                                           border-block-end: 1px solid var(--mud-palette-lines-default); }
.dl-right-panel[b-r7j299incq]  .mud-tabs-toolbar-inner > .mud-tooltip-root { flex: 0 0 auto !important; }

/* Cutting tiles out of the orthophoto. Collapsed by default because it is run once
   at the start of a project and then rarely - but it has to be ON the Label tab,
   since on a new project there is nothing to label until it has run.
   summary needs display:flex with an element-qualified selector to beat the UA
   stylesheet's display:list-item, or the count cannot be pushed to the end. */
.dl-cut[b-r7j299incq] { border: 1px solid var(--mud-palette-lines-default); border-radius: 4px;
          padding: 4px 6px; margin-block-end: 6px; }
summary.dl-cut-title[b-r7j299incq] { display: flex; align-items: center; gap: 6px; cursor: pointer;
                       font-size: .78rem; color: var(--mud-palette-text-primary); }
.dl-cut-summary[b-r7j299incq] { margin-inline-start: auto; color: var(--mud-palette-text-secondary);
                  font-variant-numeric: tabular-nums; direction: ltr; }

/* The training console. A fixed height with its own scroll: the trainer emits
   hundreds of lines an epoch and an unbounded list would push every control
   in the panel off the screen. Monospace so the epoch tables line up. */
.dl-train[b-r7j299incq] { display: flex; flex-direction: column; gap: 2px; }
.dl-log[b-r7j299incq] { max-height: 180px; overflow-y: auto; margin-block-start: 6px; padding: 4px 6px;
          border: 1px solid var(--mud-palette-lines-default); border-radius: 4px;
          background: var(--mud-palette-background-grey); direction: ltr; }
.dl-log-line[b-r7j299incq] { font-family: Consolas, "Courier New", monospace; font-size: .68rem;
               white-space: pre-wrap; word-break: break-word;
               color: var(--mud-palette-text-secondary); }

/* Inline slider: flexible track, fixed-width tabular value so the number does not
   jiggle the row as it changes. ltr because a number reads left to right even
   when the page does not. */
.dl-slider[b-r7j299incq] { flex: 1; height: 24px; direction: ltr; }
.dl-slider-value[b-r7j299incq] { min-width: 34px; text-align: end; font-variant-numeric: tabular-nums;
                   font-size: .78rem; direction: ltr; }

/* =================================================================
   The parity rebuild: inner pages, lists, cards, charts, the canvas.
   ================================================================= */

.dl-hint[b-r7j299incq] { display: block; color: var(--mud-palette-text-secondary); font-size: .72rem; margin: 2px 0 4px; }
.dl-actions[b-r7j299incq] { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.dl-check[b-r7j299incq] { display: flex; align-items: center; gap: 6px; font-size: .78rem; padding: 2px 0; cursor: pointer; }
.dl-fieldset[b-r7j299incq] { border: 0; margin: 0; padding: 0; min-width: 0; }
.dl-fieldset[disabled][b-r7j299incq] { opacity: .6; }
.dl-link[b-r7j299incq] { font-size: .78rem; color: var(--mud-palette-primary); text-decoration: underline; cursor: pointer; }
.dl-file[b-r7j299incq] { font-size: .72rem; width: 100%; margin: 4px 0; }
.dl-group[b-r7j299incq] { border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; padding: 4px 6px; margin-block-start: 6px; }
summary.dl-group-title[b-r7j299incq] { cursor: pointer; font-size: .78rem; }
.dl-textarea[b-r7j299incq] { height: auto; padding: 4px 6px; resize: vertical; }
.dl-input-short[b-r7j299incq] { width: 90px; }

/* The header badge: where training and inference will run - CPU by default. */
.dl-badge[b-r7j299incq] { font-size: .68rem; color: var(--mud-palette-text-secondary); padding: 2px 8px;
            border-block-end: 1px solid var(--mud-palette-lines-default); direction: ltr; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }

/* Inner pages of a tab - the desktop tool's inner tab strips (Images | Footprints | ...). */
.dl-pages[b-r7j299incq] { display: flex; flex-wrap: wrap; gap: 2px; margin-block-end: 6px;
            border-block-end: 1px solid var(--mud-palette-lines-default); }
.dl-page[b-r7j299incq] { background: none; border: 0; border-block-end: 2px solid transparent; padding: 3px 7px;
           font-size: .72rem; color: var(--mud-palette-text-secondary); cursor: pointer; }
.dl-page.active[b-r7j299incq] { color: var(--mud-palette-primary); border-block-end-color: var(--mud-palette-primary); }

/* Image and shapefile lists. */
.dl-list[b-r7j299incq] { max-height: 330px; overflow-y: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; }
.dl-list-short[b-r7j299incq] { max-height: 120px; }
.dl-list-head[b-r7j299incq], .dl-list-row[b-r7j299incq] { display: flex; justify-content: space-between; gap: 8px; padding: 2px 6px; font-size: .74rem; }
.dl-list-head[b-r7j299incq] { color: var(--mud-palette-text-secondary); border-block-end: 1px solid var(--mud-palette-lines-default); position: sticky; top: 0;
                background: var(--mud-palette-surface); }
.dl-list-row[b-r7j299incq] { cursor: pointer; direction: ltr; }
.dl-list-row:hover[b-r7j299incq] { background: var(--mud-palette-action-default-hover); }
.dl-list-row.selected[b-r7j299incq] { background: var(--mud-palette-primary-hover); }
.dl-footprints[b-r7j299incq] { max-height: 300px; overflow-y: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; }
.dl-footprint-row[b-r7j299incq] { display: flex; gap: 6px; padding: 2px 6px; font-size: .74rem; cursor: pointer; }
.dl-footprint-row.selected[b-r7j299incq] { background: var(--mud-palette-primary-hover); }
.dl-footprint-area[b-r7j299incq], .dl-footprint-pts[b-r7j299incq] { margin-inline-start: auto; color: var(--mud-palette-text-secondary); direction: ltr; }
.dl-footprint-boxonly[b-r7j299incq] { color: var(--mud-palette-warning); }

/* Classes table. */
.dl-class-table[b-r7j299incq] { display: flex; flex-direction: column; gap: 4px; }
.dl-class-row[b-r7j299incq] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border-radius: 4px;
                border: 1px solid transparent; cursor: pointer; }
.dl-class-row.selected[b-r7j299incq] { border-color: var(--mud-palette-primary); }
.dl-class-id[b-r7j299incq] { width: 16px; font-size: .74rem; color: var(--mud-palette-text-secondary); }
.dl-colour[b-r7j299incq] { width: 28px; height: 24px; padding: 0; border: 0; background: none; }
.dl-class-row .dl-input[b-r7j299incq] { width: 140px; }
.dl-class-row .dl-input-short[b-r7j299incq] { width: 90px; }
.dl-class-row .dl-input-wide[b-r7j299incq] { width: 100%; }

/* The canvas: dl_canvas.js fills this div. */
/* Absolutely positioned in a min-height:0 host: a height:100% child of a flex item sizes the
   item by its own content, so the canvas grew past the panel and "fit" fitted the hidden part. */
.dl-canvas-host[b-r7j299incq] { position: relative; min-height: 0; align-items: stretch; justify-content: stretch; overflow: hidden; }
.dl-canvas[b-r7j299incq] { position: absolute; inset: 0; }
.dl-center-panel[b-r7j299incq] { min-height: 0; }
.dl-container[b-r7j299incq] { min-height: 0; }
.dl-layerbar[b-r7j299incq] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 2px 8px; font-size: .74rem;
               border-block-end: 1px solid var(--mud-palette-lines-default); }
.dl-legend-chip[b-r7j299incq] { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--mud-palette-text-secondary); }

/* Train centre: the validation preview (image | labels | prediction) and the curves. */
.dl-train-centre[b-r7j299incq] { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow-y: auto; }
.dl-triptych[b-r7j299incq] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dl-triptych-panel[b-r7j299incq] { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dl-triptych-panel img[b-r7j299incq] { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #000; image-rendering: pixelated; }
.dl-triptych-empty[b-r7j299incq] { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
                     background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); }
.dl-triptych-panel figcaption[b-r7j299incq] { font-size: .74rem; color: var(--mud-palette-text-secondary); }
.dl-charts[b-r7j299incq] { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px; }
.dl-chart[b-r7j299incq] { border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; padding: 4px 6px; }
.dl-chart svg[b-r7j299incq] { width: 100%; height: 180px; direction: ltr; }
.dl-chart-title[b-r7j299incq] { font-size: .76rem; margin-block-end: 2px; }
.dl-chart-bg[b-r7j299incq] { fill: var(--mud-palette-background-grey); }
.dl-chart-grid[b-r7j299incq] { stroke: var(--mud-palette-lines-default); stroke-width: 1; vector-effect: non-scaling-stroke; }
[b-r7j299incq] .dl-chart-axis, .dl-chart[b-r7j299incq]  text { fill: var(--mud-palette-text-secondary); font-size: 10px; }
.dl-chart-legend[b-r7j299incq] { display: flex; flex-wrap: wrap; gap: 10px; font-size: .7rem; color: var(--mud-palette-text-secondary); }
.dl-chart-legend > span[b-r7j299incq] { display: inline-flex; align-items: center; gap: 4px; }

/* Results: progress, metric cards, tables. */
.dl-progress[b-r7j299incq] { margin: 6px 0; }
.dl-stage[b-r7j299incq] { display: block; color: var(--mud-palette-text-secondary); direction: ltr; }
.dl-cards[b-r7j299incq] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-block-start: 6px; }
.dl-card[b-r7j299incq] { border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; padding: 6px; }
.dl-card-title[b-r7j299incq] { font-size: .7rem; color: var(--mud-palette-text-secondary); }
.dl-card-value[b-r7j299incq] { font-size: 1.05rem; font-variant-numeric: tabular-nums; direction: ltr; }
.dl-card-detail[b-r7j299incq] { font-size: .66rem; color: var(--mud-palette-text-secondary); direction: ltr; }
.dl-table-wrap[b-r7j299incq] { max-height: 240px; overflow: auto; border-block-start: 1px solid var(--mud-palette-lines-default); }
.dl-table-tall[b-r7j299incq] { max-height: 420px; }
.dl-table[b-r7j299incq] { width: 100%; border-collapse: collapse; font-size: .72rem; font-variant-numeric: tabular-nums; }
.dl-table th[b-r7j299incq], .dl-table td[b-r7j299incq] { padding: 2px 6px; text-align: start; border-block-end: 1px solid var(--mud-palette-lines-default); white-space: nowrap; }
.dl-table thead th[b-r7j299incq] { position: sticky; top: 0; background: var(--mud-palette-surface); color: var(--mud-palette-text-secondary); }
.dl-table tbody tr[b-r7j299incq] { cursor: pointer; }
.dl-table tbody tr:hover[b-r7j299incq] { background: var(--mud-palette-action-default-hover); }
.dl-table tbody tr.selected[b-r7j299incq] { background: var(--mud-palette-primary-hover); }
.dl-sortable[b-r7j299incq] { cursor: pointer; }
.dl-confusion td[b-r7j299incq], .dl-confusion th[b-r7j299incq] { text-align: center; }
.dl-model-info[b-r7j299incq] { margin-block-start: 4px; }
.dl-hit[b-r7j299incq] { background: rgba(46, 204, 113, .22); }
.dl-miss[b-r7j299incq] { background: rgba(231, 76, 60, .22); }
/* The results panel is narrow: nothing in it may widen it sideways. */
.dl-results[b-r7j299incq] { overflow-x: hidden; }
.dl-cards[b-r7j299incq] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-card-title[b-r7j299incq], .dl-card-detail[b-r7j299incq] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-left-panel[b-r7j299incq]  .dl-tab-panel { overflow-x: hidden; }

/* The tool's own ChatBot - the fourth panel, like every other tool's. Collapsed (zero width)
   until the app-bar chat button or its panel tab opens it. On narrow screens main.css's
   Display-Mode rules override these widths, so it fills the one or two visible slots. */
.dl-chat-panel[b-r7j299incq] { display: flex; flex-direction: column; flex: 0 0 auto; width: 380px; min-width: 300px; max-width: 520px;
                 height: 100%; min-height: 0; overflow: hidden;
                 border-inline-start: 1px solid var(--mud-palette-lines-default);
                 transition: width .25s ease, min-width .25s ease, opacity .2s ease; }
.dl-chat-panel.collapsed[b-r7j299incq] { width: 0 !important; min-width: 0 !important; max-width: 0 !important; opacity: 0;
                           border-inline-start-width: 0; pointer-events: none; }
.dl-chat-host[b-r7j299incq] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* _content/AspireChatApp.Razor/Components/Tools/Imaging/DeepLearningTool/Editors/DlClassesPanelComp.razor.rz.scp.css */
/* =================================================================
   DlClassesPanelComp.razor.css

   dl-row / dl-input duplicated from the parent on purpose: Blazor
   CSS isolation is per-component and cannot be inherited.
   ================================================================= */

.dl-classes[b-y6yk67vpl9] { display: flex; flex-direction: column; gap: 2px; }
.dl-hint[b-y6yk67vpl9] { color: var(--mud-palette-text-secondary); margin-block-end: 4px; }

.dl-row[b-y6yk67vpl9] { display: flex; align-items: center; gap: 6px; padding: 1px 0; font-size: .78rem; min-height: 26px; }
.dl-row-label[b-y6yk67vpl9] { flex: 1; color: var(--mud-palette-text-secondary); white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.dl-input[b-y6yk67vpl9] { width: 190px; height: 24px; box-sizing: border-box; background: var(--mud-palette-background);
            color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default);
            border-radius: 4px; padding: 0 6px; font-size: .78rem; direction: ltr; }
.dl-input:focus[b-y6yk67vpl9] { outline: none; border-color: var(--mud-palette-primary); }
.dl-input:disabled[b-y6yk67vpl9] { opacity: .55; }
.dl-input-wide[b-y6yk67vpl9] { width: 100%; }
.dl-textarea[b-y6yk67vpl9] { height: auto; padding: 4px 6px; resize: vertical; font-family: inherit; }

.dl-colour[b-y6yk67vpl9] { width: 48px; height: 24px; padding: 0; border: 1px solid var(--mud-palette-lines-default);
             border-radius: 4px; background: transparent; cursor: pointer; }
.dl-colour:disabled[b-y6yk67vpl9] { opacity: .55; cursor: default; }

.dl-class[b-y6yk67vpl9] { border-block-start: 1px solid var(--mud-palette-lines-default); padding-block-start: 4px;
            margin-block-start: 4px; }
/* Element-qualified to beat the user-agent display:list-item on <summary>. */
summary.dl-class-title[b-y6yk67vpl9] { display: flex; align-items: center; gap: 6px; cursor: pointer;
                         font-size: .78rem; padding: 2px 0; }
.dl-class-swatch[b-y6yk67vpl9] { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto;
                   border: 1px solid var(--mud-palette-lines-default); }
.dl-class-id[b-y6yk67vpl9] { font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary);
               min-width: 14px; direction: ltr; }
.dl-class-name[b-y6yk67vpl9] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dl-actions[b-y6yk67vpl9] { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
/* _content/AspireChatApp.Razor/Components/Tools/Imaging/DeepLearningTool/Editors/DlPathRow.razor.rz.scp.css */
/* =================================================================
   DlPathRow.razor.css

   DlPathRow is its own component, so it needs its own copy of the
   row rules: Blazor CSS isolation scopes every stylesheet to the
   component that declares it, and a child does NOT inherit the
   parent's rules even with identical class names.

   Without this file the nine path rows on the Project tab render
   unstyled - the raw input overlapping its own label - while the
   ground-resolution row next to them, which is declared inline in
   the parent, looks correct. That is what it looked like before
   this file existed.
   ================================================================= */

.dl-row[b-z73nmrwd2m] { display: flex; align-items: center; gap: 6px; padding: 1px 0; font-size: .78rem; min-height: 26px; }

.dl-row-label[b-z73nmrwd2m] { flex: 1 1 auto; min-width: 0; color: var(--mud-palette-text-secondary);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* direction:ltr keeps a Windows path readable under the RTL default culture. */
.dl-input[b-z73nmrwd2m] { flex: 0 0 190px; width: 190px; height: 24px; box-sizing: border-box;
            background: var(--mud-palette-background); color: var(--mud-palette-text-primary);
            border: 1px solid var(--mud-palette-lines-default); border-radius: 4px;
            padding: 0 6px; font-size: .78rem; direction: ltr; }
.dl-input:focus[b-z73nmrwd2m] { outline: none; border-color: var(--mud-palette-primary); }
/* _content/AspireChatApp.Razor/Components/Tools/Imaging/DeepLearningTool/Editors/DlProjectPanelComp.razor.rz.scp.css */
/* =================================================================
   DlProjectPanelComp.razor.css

   The dl-row / dl-input rules are duplicated from the parent
   component DELIBERATELY: Blazor CSS isolation is per-component, so
   a child cannot inherit them even with identical class names.
   ================================================================= */

.dl-project[b-h41lezbw9i] { display: flex; flex-direction: column; gap: 2px; }
.dl-hint[b-h41lezbw9i] { color: var(--mud-palette-text-secondary); margin-block-end: 4px; }

.dl-row[b-h41lezbw9i] { display: flex; align-items: center; gap: 6px; padding: 1px 0; font-size: .78rem; min-height: 26px; }
.dl-row-label[b-h41lezbw9i] { flex: 1; color: var(--mud-palette-text-secondary); white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }

/* direction:ltr keeps paths and numbers readable under the RTL default culture. */
.dl-input[b-h41lezbw9i] { width: 190px; height: 24px; box-sizing: border-box; background: var(--mud-palette-background);
            color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default);
            border-radius: 4px; padding: 0 6px; font-size: .78rem; direction: ltr; }
.dl-input:focus[b-h41lezbw9i] { outline: none; border-color: var(--mud-palette-primary); }
.dl-input-wide[b-h41lezbw9i] { width: 100%; }
.dl-textarea[b-h41lezbw9i] { height: auto; padding: 4px 6px; resize: vertical; font-family: inherit; }

.dl-actions[b-h41lezbw9i] { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }

/* Native <details>, not MudExpansionPanel: the open state then lives in the DOM and survives the
   StateHasChanged that fires on every edit, where a component-managed bool would snap it shut. */
.dl-group[b-h41lezbw9i] { border-block-start: 1px solid var(--mud-palette-lines-default); padding-block-start: 4px;
            margin-block-start: 4px; }
/* Element-qualified, to beat the user-agent display:list-item on <summary>. */
summary.dl-group-title[b-h41lezbw9i] { display: flex; align-items: center; cursor: pointer; font-size: .78rem;
                         font-weight: 600; padding: 2px 0; color: var(--mud-palette-text-primary); }

.dl-where[b-h41lezbw9i] { display: block; margin-block-start: 6px; color: var(--mud-palette-text-secondary);
            direction: ltr; word-break: break-all; font-size: .7rem; }
/* _content/AspireChatApp.Razor/Components/Tools/Imaging/FeatureMatchingTool/Editors/FeatureMatchingEditorComp.razor.rz.scp.css */
/* ================================================================
   FeatureMatchingEditorComp scoped styles.

   Blazor CSS isolation is PER-COMPONENT: the `fm-*` rules in
   FeatureMatchingToolComp.razor.css do NOT reach this component's
   markup even though the class names match, because each stylesheet
   is scoped to its own generated attribute. The row/input rules are
   therefore deliberately duplicated here rather than shared.

   The compact `fm-row` / `fm-input` pattern (a flex row with an
   ellipsised label and a right-aligned raw control) is the same one
   LosVisibilityTool uses: raw <input>/<select> rather than
   MudNumericField/MudSelect, so the left panel fits without scrolling.
   ================================================================ */

.fm-editor[b-jwxcfu8vvz] {
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.fm-section-title[b-jwxcfu8vvz] {
    font-weight: 600;
}

.fm-image-slot[b-jwxcfu8vvz] {
    margin-top: 4px;
}

/* ---- Compact parameter rows ---- */
.fm-row[b-jwxcfu8vvz] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.fm-row-label[b-jwxcfu8vvz] {
    flex: 1;
    color: var(--mud-palette-text-secondary, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-row-value[b-jwxcfu8vvz] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    /* Numbers read left-to-right even under the RTL default culture. */
    direction: ltr;
}

.fm-input[b-jwxcfu8vvz] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background, #fff);
    color: var(--mud-palette-text-primary, #000);
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    /* Numbers read left-to-right even under the RTL default culture. */
    direction: ltr;
}

.fm-input:focus[b-jwxcfu8vvz] {
    outline: none;
    border-color: var(--mud-palette-primary, #1976d2);
}

.fm-input:disabled[b-jwxcfu8vvz],
.fm-input option:disabled[b-jwxcfu8vvz] {
    opacity: .5;
}

/* ---- Status + readout ---- */
.fm-status[b-jwxcfu8vvz] {
    color: var(--mud-palette-primary, #1976d2);
    /* A long OpenCV failure message must wrap, not clip. */
    white-space: normal;
    word-break: break-word;
}

.fm-readout[b-jwxcfu8vvz] {
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    padding-top: 6px;
}

/* ---- Native <details> expander ----
   `display:flex` must be forced with an element-qualified selector to beat
   the user-agent's `display:list-item` on <summary>. */
.fm-details[b-jwxcfu8vvz] {
    margin-top: 6px;
}

summary.fm-summary[b-jwxcfu8vvz] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    list-style-position: inside;
}

.fm-sample-list[b-jwxcfu8vvz] {
    padding-top: 0;
    padding-bottom: 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/Imaging/FeatureMatchingTool/FeatureMatchingToolComp.razor.rz.scp.css */
/* ================================================================
   FeatureMatchingToolComp scoped styles.
   3-panel flex layout (left editor | centre input pair | right match
   overlay). CSS isolation is per-component, so these rules are
   deliberately self-contained and not shared with other tools.
   ================================================================ */

.fm-container[b-dnd7rkujyl] {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ---- Panels ---- */
.fm-left-panel[b-dnd7rkujyl] {
    width: 320px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-inline-end: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.fm-left-panel.collapsed[b-dnd7rkujyl] {
    width: 44px;
    min-width: 44px;
}

.fm-center-panel[b-dnd7rkujyl] {
    /* The two inputs stack in this column; the output beside it is a
       side-by-side composite of BOTH, so it gets the wider share (see
       .fm-right-panel). Mirrors the WPF grid's input-column : output ratio. */
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fm-right-panel[b-dnd7rkujyl] {
    /* The match overlay is a side-by-side composite of BOTH inputs, so it is
       roughly twice as wide as either one — give it the wider share. */
    flex: 1.4 1 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-inline-start: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.panel-header[b-dnd7rkujyl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    flex: 0 0 auto;
}

.panel-title[b-dnd7rkujyl] {
    display: flex;
    align-items: center;
}

.fm-splitter[b-dnd7rkujyl] {
    width: 4px;
    flex: 0 0 auto;
    background: var(--mud-palette-lines-default, #e0e0e0);
    cursor: col-resize;
}

.fm-tabs[b-dnd7rkujyl],
.fm-tab-panel[b-dnd7rkujyl] {
    min-height: 0;
    overflow: auto;
}

/* ---- Centre: the two input panes, STACKED VERTICALLY ----
   Column, not row: the centre panel is one narrow column of the 3-panel
   layout, so splitting it horizontally as well gave each input a ~246px
   sliver of a 614px-tall pane — the image then fitted to a ~170px band and
   fitPane's vertical centring translated it ~220px down, out of sight.
   Stacking matches the WPF tool, where "Input Image 1" sits above
   "Input Image 2" in a single column. */
.fm-inputs[b-dnd7rkujyl] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    background: #1e1e1e;
}

/* Horizontal divider between the stacked inputs (the stack is a column, so
   the splitter spans the width and takes a height). */
.fm-pane-splitter[b-dnd7rkujyl] {
    height: 4px;
    flex: 0 0 auto;
    background: #555;
}

/* ---- A viewer pane (all three share this) ----
   `flex-basis: 0` (not 50%) so the two stacked inputs split the column's
   HEIGHT evenly regardless of their intrinsic size; min-height:0 lets a pane
   shrink below its content, without which the flex items overflow the column. */
.fm-pane[b-dnd7rkujyl] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #2a2a2a;
    cursor: grab;
}

.fm-output-pane[b-dnd7rkujyl] {
    /* The output pane fills its panel rather than sharing a row. */
    flex: 1 1 auto;
}

.fm-pane.fm-grabbing[b-dnd7rkujyl] {
    cursor: grabbing;
}

/* The image fits its pane by CSS, not by a JS transform.
   `object-fit: contain` letterboxes it inside the pane at the correct aspect
   ratio and never upscales past its natural size, which is exactly what the
   old JS fitPane() computed — but it applies the instant the browser lays the
   element out, with no dependency on when Blazor commits the <img> or when the
   bytes finish decoding. The JS viewer still owns wheel-zoom and drag-pan, and
   its transform simply composes on top of this fitted base. */
.fm-img[b-dnd7rkujyl] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.fm-pane-caption[b-dnd7rkujyl] {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    z-index: 3;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: none;
}

.fm-pane-placeholder[b-dnd7rkujyl] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa7b5;
    font-style: italic;
    pointer-events: none;
    padding: 12px;
    text-align: center;
}
/* _content/AspireChatApp.Razor/Components/Tools/Imaging/PanoramaStitchingTool/Editors/PanoramaStitchingEditorComp.razor.rz.scp.css */
/* ================================================================
   PanoramaStitchingEditorComp scoped styles.
   CSS isolation is per-component, so these compact-row rules are a
   deliberate self-contained copy of the LosVisibilityTool `los-*`
   pattern (they cannot be inherited across components).
   ================================================================ */

.ps-editor[b-mite2dumwq] {
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.ps-section-title[b-mite2dumwq] {
    font-weight: 600;
}

.ps-image-slot[b-mite2dumwq] {
    margin-top: 4px;
}

.ps-status[b-mite2dumwq] {
    color: var(--mud-palette-primary, #1976d2);
    white-space: pre-wrap;
}

/* ---- Native <details> expander ---- */
.ps-details[b-mite2dumwq] {
    margin-top: 6px;
}

/* Element-qualified so it beats the UA `display: list-item`. */
summary.ps-summary[b-mite2dumwq] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    list-style-position: inside;
}

.ps-summary-label[b-mite2dumwq] {
    flex: 1;
}

.ps-sample-list[b-mite2dumwq] {
    padding-top: 2px;
}

/* ---- Result readout rows ---- */
.ps-readout[b-mite2dumwq] {
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    padding-top: 6px;
}

.ps-row[b-mite2dumwq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 22px;
}

.ps-row-label[b-mite2dumwq] {
    flex: 1;
    color: var(--mud-palette-text-secondary, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-row-value[b-mite2dumwq] {
    /* Pixel dimensions are numbers — always read them left-to-right, even under RTL. */
    direction: ltr;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
/* _content/AspireChatApp.Razor/Components/Tools/Imaging/PanoramaStitchingTool/PanoramaStitchingToolComp.razor.rz.scp.css */
/* ================================================================
   PanoramaStitchingToolComp scoped styles.
   3-panel flex layout (left editor | centre input pair | right
   panorama). CSS isolation is per-component, so these rules are
   deliberately self-contained and not shared with other tools.
   ================================================================ */

.ps-container[b-kntsv9frcf] {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ---- Panels ---- */
.ps-left-panel[b-kntsv9frcf] {
    width: 320px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-inline-end: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.ps-left-panel.collapsed[b-kntsv9frcf] {
    width: 44px;
    min-width: 44px;
}

.ps-center-panel[b-kntsv9frcf] {
    /* The two inputs get twice the width of the output, matching the WPF grid (2* : *). */
    flex: 2 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ps-right-panel[b-kntsv9frcf] {
    flex: 1 1 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-inline-start: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.panel-header[b-kntsv9frcf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    flex: 0 0 auto;
}

.panel-title[b-kntsv9frcf] {
    display: flex;
    align-items: center;
}

.ps-splitter[b-kntsv9frcf] {
    width: 4px;
    flex: 0 0 auto;
    background: var(--mud-palette-lines-default, #e0e0e0);
    cursor: col-resize;
}

.ps-tabs[b-kntsv9frcf],
.ps-tab-panel[b-kntsv9frcf] {
    min-height: 0;
    overflow: auto;
}

/* ---- Centre: the two input panes side by side ---- */
.ps-inputs[b-kntsv9frcf] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    background: #1e1e1e;

    /* LTR is FORCED here, never inherited from the page direction. "Left image" and
       "right image" name the photographs' physical positions in the panorama — which
       side of the scene each one shows — not reading order. Under the app's RTL default
       the flex row would reverse and put the LEFT input on the RIGHT of the screen,
       directly contradicting its own caption and the stitch order sent to the service. */
    direction: ltr;
}

.ps-pane-splitter[b-kntsv9frcf] {
    width: 4px;
    flex: 0 0 auto;
    background: #555;
}

/* ---- A viewer pane (all three share this) ---- */
.ps-pane[b-kntsv9frcf] {
    position: relative;
    flex: 1 1 50%;
    min-width: 0;
    overflow: hidden;
    background: #2a2a2a;
    cursor: grab;
}

.ps-output-pane[b-kntsv9frcf] {
    /* The output pane fills its panel rather than sharing a row. */
    flex: 1 1 auto;
}

.ps-pane.ps-grabbing[b-kntsv9frcf] {
    cursor: grabbing;
}

.ps-img[b-kntsv9frcf] {
    /* Absolutely positioned at the pane's top-LEFT so the JS pan/zoom transform has a
       direction-independent origin. Without this the image is laid out in flow, and under
       the app's RTL default its box starts at the pane's RIGHT edge — the natural-width
       image then extends leftward and the translate() computed by fitPane pushes it
       thousands of pixels off-screen (observed: x = -2620). Verified in he-IL. */
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.ps-pane-caption[b-kntsv9frcf] {
    position: absolute;
    top: 6px;
    /* Physical `left`, not `inset-inline-start`: the caption belongs to the pane it labels,
       and .ps-inputs forces LTR so the pair keeps its left/right meaning. The caption TEXT
       may be Hebrew, so `plaintext` lets the browser pick each label's own base direction
       from its first strong character — correct glyph order without moving the badge. */
    left: 6px;
    unicode-bidi: plaintext;
    z-index: 3;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    pointer-events: none;
}

.ps-pane-placeholder[b-kntsv9frcf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa7b5;
    font-style: italic;
    pointer-events: none;
    padding: 12px;
    text-align: center;
}
/* _content/AspireChatApp.Razor/Components/Tools/IsraelClimateProjectionTool/Charts/ClimateDataChartComp.razor.rz.scp.css */
/* ================================================================= */
/*                 ClimateDataChartComp.razor.css                    */
/*   The per-area climate data panel: an area header + description    */
/*   over an inner MudTabs hosting the Plotly trend chart and the     */
/*   heat-shaded forecast / heat-load tables (slide-style). Scoped    */
/*   to this component.                                               */
/* ================================================================= */

.climate-chart-host[b-i9srht318u] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.climate-chart-header[b-i9srht318u] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--mud-palette-primary);
    padding: 6px 8px 2px 8px;
    flex: 0 0 auto;   /* never squeezed by the flex column */
}

/* The deck description scrolls on its own only when it is genuinely long; it
   must not be squashed by the flex column (flex items default to shrinking,
   which clipped this block even when the panel had room). */
.climate-chart-desc[b-i9srht318u] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    padding: 0 8px 6px 8px;
    flex: 0 0 auto;
    max-height: 5.5em;
    overflow-y: auto;
}

/* The MudTabs host must flex so its panels can scroll (::deep — MudTabs
   renders child elements that never get this component's scope attribute). */
[b-i9srht318u] .climate-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Give the chart tab bar room for its tabs and centre them, exactly as the
   left panel's tab bar. Without the height the 32px tabs overflow the ~27px bar
   and MudBlazor decides the row does not fit, showing scroll arrows that eat
   the width and push the labels off-centre. */
[b-i9srht318u] .climate-tabs .mud-tabs-tabbar {
    display: flex;
    align-items: center;
    min-height: 40px !important;
    box-sizing: border-box;
}

[b-i9srht318u] .climate-tabs .mud-tabs-tabbar-wrapper,
[b-i9srht318u] .climate-tabs .mud-tabs-tabbar-inner {
    display: flex;
    align-items: center;
}

/* Icon + label on one row (MudBlazor stacks them in a column by default).
   With four tabs in a narrow panel the labels would wrap to a second line, so
   keep each header on ONE line and let the padding tighten instead. */
[b-i9srht318u] .climate-tabs .mud-tab {
    min-height: 32px;
    align-self: center;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
    min-width: 0;         /* allow the tab to shrink rather than wrap */
    font-size: 0.78rem;
}

[b-i9srht318u] .climate-tabs .mud-tab .mud-icon-root {
    margin: 0;
}

[b-i9srht318u] .climate-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Each tab's content scrolls vertically rather than being clipped. The TREND
   plot has a 260px floor and the FORECAST / HEAT tables are naturally tall, so
   on a short window (or once the left panel is widened) the content exceeds the
   panel; without this the overflow was simply cut off with no way to reach it. */
/* MudTabs' per-tab inner div is not reachable via PanelClass and defaults to
   display:block / min-height:auto, so it grows to its content height inside the
   bounded panels wrapper — the chart/table overflow was then clipped with no
   scrollbar. Constrain it and let it scroll. */
/* :not(.mud-tab) — MudBlazor puts both classes on the tab HEADER too, so a bare
   .mud-tab-panel rule would also restyle the header and stack its icon. */
[b-i9srht318u] .climate-tabs .mud-tab-panel:not(.mud-tab) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

[b-i9srht318u] .climate-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ----------------------------------------------------------------- */
/*                      TREND PLOT                                    */
/* ----------------------------------------------------------------- */

.climate-plot-area[b-i9srht318u] {
    /* flex-basis 260px + no shrink: inside a scrolling panel the chart keeps a
       usable height and the panel scrolls, rather than the chart collapsing. */
    flex: 1 0 260px;
    min-height: 260px;
    width: 100%;
    position: relative;
}

/* ----------------------------------------------------------------- */
/*                      TABLES (scroll)                              */
/* ----------------------------------------------------------------- */

/* The tables' own wrapper. The tab panel above it is the vertical scroller, so
   this one only handles HORIZONTAL overflow (the year grids are wide); leaving
   overflow-y auto here as well produced a nested second vertical scrollbar. */
.climate-scroll[b-i9srht318u] {
    flex: 0 0 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding: 6px;
}

.climate-banner[b-i9srht318u] {
    background: #1F3864;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    padding: 5px 8px;
    margin-bottom: 8px;
}

/* The two forecast tables side by side (wraps on a narrow panel). */
/* The mean and extreme grids now live in their own tabs (they were previously
   two boxes stacked in a shared .climate-tables-row wrapper, which has been
   removed along with this box's flex sizing — each table now owns its panel). */
.climate-table-box[b-i9srht318u] {
    width: 100%;
}

.climate-table-title[b-i9srht318u] {
    font-weight: 700;
    font-size: 0.8rem;
    color: #1F3864;
    text-align: center;
    margin-bottom: 4px;
}

.climate-table-footnote[b-i9srht318u] {
    font-size: 0.68rem;
    font-style: italic;
    color: #C00000;
    text-align: center;
    margin-top: 4px;
}

.climate-table[b-i9srht318u] {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.72rem;
}

.climate-th[b-i9srht318u] {
    background: #1F3864;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    padding: 3px 5px;
    border: 0.5px solid #B0B0B0;
    white-space: nowrap;
}

.climate-month[b-i9srht318u] {
    background: #D9D9D9;
    color: #595959;
    font-weight: 600;
    text-align: center;
    padding: 3px 6px;
    border: 0.5px solid #B0B0B0;
    white-space: nowrap;
}

.climate-val[b-i9srht318u] {
    text-align: center;
    padding: 3px 5px;
    border: 0.5px solid #B0B0B0;
    color: #222222;
    /* Numbers always read left-to-right even in the RTL table */
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

.climate-bold[b-i9srht318u] {
    font-weight: 700;
}

/* ----------------------------------------------------------------- */
/*                      HEAT-LOAD LEGEND                             */
/* ----------------------------------------------------------------- */

.climate-heat-legend[b-i9srht318u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-primary);
}

.climate-heat-swatch[b-i9srht318u] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #666666;
    margin-inline-start: 8px;
    vertical-align: middle;
}
/* _content/AspireChatApp.Razor/Components/Tools/IsraelClimateProjectionTool/Editors/ClimateAreasEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                 ClimateAreasEditorComp.razor.css                  */
/*   The Areas list panel: header + toggle + opacity slider + the    */
/*   22 selectable region rows, each with a colour swatch matching   */
/*   the region's map polygon. Scoped to this component.             */
/* ================================================================= */

.climate-areas-editor[b-u4prommztc] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 6px;
}

.climate-areas-header[b-u4prommztc] {
    color: var(--mud-palette-primary);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.climate-areas-hint[b-u4prommztc] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

/* ----------------------------------------------------------------- */
/*                    CONTROLS (toggle + opacity)                    */
/* ----------------------------------------------------------------- */

.climate-areas-controls[b-u4prommztc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.climate-check[b-u4prommztc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    cursor: pointer;
}

.climate-opacity-row[b-u4prommztc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
}

.climate-opacity-label[b-u4prommztc] {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.climate-opacity-slider[b-u4prommztc] {
    flex: 1 1 auto;
    min-width: 60px;
}

.climate-opacity-value[b-u4prommztc] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    min-width: 32px;
    text-align: end;
}

/* ----------------------------------------------------------------- */
/*                      THE AREAS LIST                               */
/* ----------------------------------------------------------------- */

.climate-areas-list[b-u4prommztc] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.climate-area-item[b-u4prommztc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
}

.climate-area-item:hover[b-u4prommztc] {
    background: var(--mud-palette-action-default-hover);
}

.climate-area-item.selected[b-u4prommztc] {
    background: var(--mud-palette-primary-hover);
    border-color: var(--mud-palette-primary);
}

.climate-area-swatch[b-u4prommztc] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #888888;
}

.climate-area-text[b-u4prommztc] {
    flex: 1 1 auto;
    min-width: 0;
}

.climate-area-title[b-u4prommztc] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.climate-area-station[b-u4prommztc] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/AspireChatApp.Razor/Components/Tools/IsraelClimateProjectionTool/IsraelClimateProjectionToolComp.razor.rz.scp.css */
/* ================================================================= */
/*             IsraelClimateProjectionToolComp.razor.css             */
/*   Layout styles for the Israel Climate Projection tool (RTL       */
/*   aware): left Areas/Layers/About tabs | Cesium globe | climate-  */
/*   data panel. Mirrors AltitudeViewshedToolComp.razor.css — the    */
/*   rules are repeated rather than shared because Blazor CSS        */
/*   isolation scopes each component's stylesheet to its own         */
/*   generated attribute, so the class names are identical but the   */
/*   scope attribute is not. The Areas editor and climate-data panel */
/*   carry their own scoped stylesheets.                             */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-6w58wr73mh] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-6w58wr73mh] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-6w58wr73mh] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-6w58wr73mh] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-6w58wr73mh] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-6w58wr73mh] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-6w58wr73mh] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Vertically centre the tab headers inside the tab bar.
   MudBlazor leaves the tab bar auto-height (~27px incl. its 4px padding) while
   each .mud-tab is min-height 32px, so the tabs overflowed their own container:
   ~5px clear above but ~10px spilling below, which read as labels sitting high
   in their rectangle. Give the bar a height that fits the tabs and centre the
   row. !important because MudBlazor's own .mud-tabs-tabbar rule is more
   specific than a plain ::deep selector and otherwise resets min-height to 0. */
[b-6w58wr73mh] .lostool-tabs .mud-tabs-tabbar {
    display: flex;
    align-items: center;
    min-height: 40px !important; /* 32px tab + 2 x 4px bar padding */
    box-sizing: border-box;
}

[b-6w58wr73mh] .lostool-tabs .mud-tabs-tabbar-wrapper,
[b-6w58wr73mh] .lostool-tabs .mud-tabs-tabbar-inner {
    display: flex;
    align-items: center;
}

/* Keep every tab the same height so none is nudged off-centre, and lay the
   icon and its label out SIDE BY SIDE. MudBlazor defaults .mud-tab to
   flex-direction: column, which stacks the icon above the text and makes each
   tab tall and narrow; a row keeps the header on one line. */
[b-6w58wr73mh] .lostool-tabs .mud-tab {
    min-height: 32px;
    align-self: center;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* The icon carries MudBlazor's stacked-layout margin (bottom spacing meant for
   the column layout); clear it so the row stays tight and vertically centred. */
[b-6w58wr73mh] .lostool-tabs .mud-tab .mud-icon-root {
    margin: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-6w58wr73mh] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* MudTabs renders an inner .mud-tab-panel div per tab that PanelClass does not
   reach; it defaults to display:block / min-height:auto, so it grew to its
   content height (e.g. 1071px of area rows) inside a 751px parent. The areas
   list then had no bounded ancestor and could not scroll — the lower regions
   were simply unreachable. Constrain it so the height chain is unbroken. */
/* NOTE the :not(.mud-tab): MudBlazor puts BOTH `mud-tab` and `mud-tab-panel`
   on the clickable tab header, so a bare `.mud-tab-panel` rule also matches the
   header and (being later in this file) overrode its flex-direction, stacking
   the icon above the label. Exclude the header so this only targets the
   content panel. */
[b-6w58wr73mh] .lostool-tabs .mud-tab-panel:not(.mud-tab) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-6w58wr73mh] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-6w58wr73mh] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-6w58wr73mh] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-6w58wr73mh],
.panel-splitter:active[b-6w58wr73mh] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-6w58wr73mh] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-6w58wr73mh] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-6w58wr73mh] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-6w58wr73mh] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-6w58wr73mh] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-6w58wr73mh]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                TOP-VIEW CHART PANEL (host)                         */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-6w58wr73mh] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp so  */
/*   every globe offers the same toolbar options)                      */
/* ================================================================= */

.menu-exaggeration-row[b-6w58wr73mh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-6w58wr73mh] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-6w58wr73mh] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-6w58wr73mh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-6w58wr73mh] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-6w58wr73mh] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-6w58wr73mh] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST CHAT PANEL — this tool's dedicated ChatBot           */
/* ----------------------------------------------------------------- */

.lostool-chat-panel[b-6w58wr73mh] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.lostool-chat-panel.collapsed[b-6w58wr73mh] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .lostool-chat-panel.collapsed[b-6w58wr73mh] {
    border-right-width: 0;
}

[dir="rtl"] .lostool-chat-panel[b-6w58wr73mh] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.lostool-chat-host[b-6w58wr73mh] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* =================================================================
                    MAX-TEMPERATURE HEAT MAP
   Controls for the projected max-temperature colormap drawn on the
   selected region polygon (time mode, month, year range, stepper,
   readout and colour bar).
   ================================================================= */

/* The AREAS tab wraps the editor in a plain div for the walkthrough anchor.
   Without an explicit flex chain that wrapper is auto-height, so the editor's
   own `flex: 1 1 auto; overflow-y: auto` list has no bounded parent to size
   against: the list grows past the panel instead of scrolling and the lower
   regions become unreachable. Pass the height constraint through. */
.climate-areas-host[b-6w58wr73mh] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* The Display tab's scroll host: the heat-map controls can outgrow a short
   panel (12 months + year range + stepper + colour bar), so scroll internally
   rather than clipping, exactly as the areas list does. */
.climate-display-panel[b-6w58wr73mh] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.climate-heatmap-box[b-6w58wr73mh] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 8px;
    margin: 8px;
}

.climate-heatmap-toggle[b-6w58wr73mh] {
    font-weight: 600;
}

/* Matches .climate-check in the areas editor (this markup lives in the
   tool component, so the scoped style cannot be inherited from there). */
.climate-check[b-6w58wr73mh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.climate-heatmap-controls[b-6w58wr73mh] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px;
}

/* Heat map off: the controls stay in place (so the panel does not jump and the
   chosen settings remain visible) but read clearly as inactive. The individual
   inputs also carry the `disabled` attribute, which is what actually blocks
   interaction - this is only the visual cue. */
.climate-heatmap-controls.disabled[b-6w58wr73mh] {
    opacity: 0.55;
}

.climate-heatmap-controls.disabled .climate-heatmap-readout[b-6w58wr73mh] {
    color: var(--mud-palette-text-secondary);
}

/* Native disabled inputs render almost identically to enabled ones in the dark
   theme, so make the inactive state unmistakable. */
.climate-heatmap-select:disabled[b-6w58wr73mh],
.climate-heatmap-input:disabled[b-6w58wr73mh] {
    cursor: default;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-action-disabled-background);
}

.climate-heatmap-slider:disabled[b-6w58wr73mh] {
    cursor: default;
    opacity: 0.5;
}

.climate-heatmap-row[b-6w58wr73mh] {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Fixed-width label column so the label sits on the SAME row as its control
   and every control below lines up on a common left edge. */
.climate-heatmap-label[b-6w58wr73mh] {
    flex: 0 0 78px;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.climate-heatmap-select[b-6w58wr73mh] {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    font-size: 0.78rem;
    padding: 0 4px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
}

/* Compact native input (a MudTextField is ~89px tall and far too heavy here). */
.climate-heatmap-input[b-6w58wr73mh] {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    font-size: 0.78rem;
    padding: 0 4px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    /* The year boxes are numeric: keep them LTR even in a Hebrew page. */
    direction: ltr;
    text-align: left;
}

/* START is the panel's primary action, so it is a solid GREEN button rather
   than another grey outline control like the pickers around it. */
.climate-heatmap-play[b-6w58wr73mh] {
    flex: 0 0 auto;
    min-width: 64px;
    height: 26px;
    padding: 0 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    color: #ffffff;
    background: var(--mud-palette-success, #2e7d32);
    border: 1px solid var(--mud-palette-success, #2e7d32);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: filter 0.15s, background 0.15s;
}

.climate-heatmap-play:hover:not(:disabled)[b-6w58wr73mh] {
    filter: brightness(1.12);
}

/* While running the button PAUSES, so it stops advertising itself as "go". */
.climate-heatmap-play.playing[b-6w58wr73mh] {
    background: var(--mud-palette-warning, #ed6c02);
    border-color: var(--mud-palette-warning, #ed6c02);
}

.climate-heatmap-play:disabled[b-6w58wr73mh] {
    cursor: default;
    opacity: 0.45;
    box-shadow: none;
    filter: grayscale(0.6);
}

.climate-heatmap-slider[b-6w58wr73mh] {
    flex: 1 1 auto;
    min-width: 0;
}

.climate-heatmap-readout[b-6w58wr73mh] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.climate-heatmap-colorbar[b-6w58wr73mh] {
    height: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 2px;
}

.climate-heatmap-ticks[b-6w58wr73mh] {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.climate-heatmap-note[b-6w58wr73mh] {
    font-size: 0.68rem;
    font-style: italic;
    color: var(--mud-palette-warning);
}

/* =================================================================
              ON-GLOBE HEAT-MAP OVERLAY (banner + colorbar)
   Mirrors the WeatherAnalysisTool overlay so both map tools present a
   coloured field the same way: a title banner above the shape and a
   vertical colorbar down the side, both painted from the SAME ramp and
   range as the polygon fill itself.
   ================================================================= */

.climate-title-banner[b-6w58wr73mh] {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    background: rgba(20, 22, 30, 0.55);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;   /* never steal a click meant for the globe */
    z-index: 15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.climate-globe-colorbar[b-6w58wr73mh] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(20, 22, 30, 0.5);
    border-radius: 6px;
    pointer-events: none;
    z-index: 15;
}

/* In Hebrew the globe's own controls sit left, so move the bar to the right. */
[dir="rtl"] .climate-globe-colorbar[b-6w58wr73mh] {
    left: auto;
    right: 12px;
}

.climate-globe-colorbar-caption[b-6w58wr73mh] {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.72rem;
    text-align: center;
    max-width: 90px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.climate-globe-colorbar-body[b-6w58wr73mh] {
    display: flex;
    flex-direction: row;
    gap: 5px;
    height: 200px;
}

.climate-globe-colorbar-gradient[b-6w58wr73mh] {
    width: 16px;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
}

/* Ticks run hottest-first down the bar; keep them LTR so the numbers and
   the minus sign read correctly inside the RTL page. */
.climate-globe-colorbar-ticks[b-6w58wr73mh] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    direction: ltr;
}

/* =================================================================
                    TRANSPORT BAR + KMZ EXPORT
   Mirrors the WeatherAnalysisTool animation controls so both tools
   drive a time series the same way: first / prev / stop / play /
   next / last, plus a loop toggle and the KMZ export.
   ================================================================= */

.climate-transport-row[b-6w58wr73mh] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 2px 0;
}

.climate-anim-btn[b-6w58wr73mh] {
    min-width: 34px;
    height: 26px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.climate-anim-btn:hover:not(:disabled)[b-6w58wr73mh] {
    border-color: var(--mud-palette-primary);
}

/* PLAY stays the emphasised green primary action of the panel. */
.climate-anim-btn-play[b-6w58wr73mh] {
    min-width: 60px;
    padding: 0 10px;
    font-weight: 700;
    color: #ffffff;
    background: var(--mud-palette-success, #2e7d32);
    border-color: var(--mud-palette-success, #2e7d32);
}

.climate-anim-btn-play:hover:not(:disabled)[b-6w58wr73mh] {
    filter: brightness(1.12);
}

/* While running the button pauses, so it stops advertising itself as "go". */
.climate-anim-btn-play.playing[b-6w58wr73mh] {
    background: var(--mud-palette-warning, #ed6c02);
    border-color: var(--mud-palette-warning, #ed6c02);
}

.climate-anim-btn:disabled[b-6w58wr73mh] {
    opacity: 0.4;
    cursor: default;
}

.climate-loop-check[b-6w58wr73mh] {
    font-size: 0.74rem;
    white-space: nowrap;
}

.climate-export-btn[b-6w58wr73mh] {
    min-width: 0;
    width: 100%;
    padding: 0 10px;
    font-weight: 600;
}
/* _content/AspireChatApp.Razor/Components/Tools/LiveTrafficTool/Dialogs/LocationNoticeDialog.razor.rz.scp.css */
/* The location privacy notice over the whole tool (see LocationNoticeDialog.razor) */
.ltn-scrim[b-jaizsp0egr] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 10, 20, 0.55);
}

.ltn-dialog[b-jaizsp0egr] {
    width: min(520px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 18px 20px 16px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.ltn-title[b-jaizsp0egr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.ltn-intro[b-jaizsp0egr] {
    margin: 0 0 8px;
    color: var(--mud-palette-text-secondary);
}

.ltn-points[b-jaizsp0egr] {
    margin: 0 0 12px;
    padding-inline-start: 20px;
    line-height: 1.45;
}

.ltn-points li + li[b-jaizsp0egr] {
    margin-top: 6px;
}

.ltn-error[b-jaizsp0egr] {
    margin-bottom: 10px;
    color: var(--mud-palette-error);
}

.ltn-actions[b-jaizsp0egr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ltn-btn[b-jaizsp0egr] {
    padding: 8px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ltn-btn.primary[b-jaizsp0egr] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.ltn-btn:disabled[b-jaizsp0egr] {
    opacity: 0.6;
    cursor: default;
}
/* _content/AspireChatApp.Razor/Components/Tools/LiveTrafficTool/LiveTrafficToolComp.razor.rz.scp.css */
/* ================================================================= */
/*               LiveTrafficToolComp.razor.css                    */
/*   Layout of the LiveTrafficTool (RTL aware): PLAN / OPTIONS /   */
/*   ABOUT | toolbar + globe | ROUTE / STOP | chat.                   */
/*                                                                    */
/*   The dstool-* panel rules are a copy of the Adventure tool's: CSS */
/*   isolation is per component, so they cannot be inherited - they   */
/*   are duplicated here deliberately. The planner's own rules (pt-*) */
/*   follow at the end.                                               */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.dstool-container[b-9v3mrgqzaf] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, instruments on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction). Do NOT add flex-direction: row-reverse
   here: on an rtl container that reverses a SECOND time and cancels out,
   leaving the LTR layout. */
.dstool-container[dir="rtl"][b-9v3mrgqzaf] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / globe / instruments panels open at 25% / 50% / 25%
   (flex: 1 / 2 / 1, so the free space is split with the globe getting half).
   A splitter drag writes inline width/min/max, which overrides the flex basis
   and pins that panel — the others keep sharing the remainder. */
.dstool-left-panel[b-9v3mrgqzaf] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .dstool-left-panel[b-9v3mrgqzaf] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.dstool-left-panel.collapsed[b-9v3mrgqzaf] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-9v3mrgqzaf] .dstool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-9v3mrgqzaf] .dstool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* EVERY TAB SCROLLS (user request 2026-10-18: "The tabs in the LiveTrafficTool all need vertical scroll bars to allow user
   scroll down and up"): a tab taller than its panel scrolls up and down in it, never sideways - it was clipped. */
[b-9v3mrgqzaf] .dstool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Glass-cockpit tab host — the PFD/MFD canvas fills its whole tab panel.
   Without an explicit flex chain the canvas wrapper collapses and the
   instrument is drawn into a sliver at the top of the panel.
   ::deep because MudTabPanel renders the wrapper this div sits in, so that
   wrapper never carries this component's scoped-CSS attribute — styling only
   the inner div leaves an unstretched parent between it and the panel, which
   is exactly what pinned the PFD to 237px inside a 730px tab. */
[b-9v3mrgqzaf] .dstool-tab-panel > div {
    display: flex;
    flex-direction: column;
    /* At least the panel's height (the MAP and MODEL views fill it), never shrunk below its content - so a long tab
       scrolls rather than being cut off. */
    flex: 1 0 auto;
    min-height: 0;
}

.dstool-display-host[b-9v3mrgqzaf] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* CHAT tab host — lets the embedded per-tool ChatBotComp fill the panel */
.dstool-chat-host[b-9v3mrgqzaf] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-9v3mrgqzaf] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-9v3mrgqzaf] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-9v3mrgqzaf],
.panel-splitter:active[b-9v3mrgqzaf] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-9v3mrgqzaf] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                  CENTER PANEL (Globe + HUD)                        */
/* ----------------------------------------------------------------- */

.dstool-center-panel[b-9v3mrgqzaf] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    /* Sized by flex, never by its content, so it can be the query container
       the toolbar compacts against (the panel narrows with the splitters and
       the display mode, not just with the window). */
    container: ptool-center / inline-size;
}

.map-toolbar[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
    /* The toolbar holds a button group and a hint chip; on a narrow panel it
       wraps rather than pushing the zoom buttons off the edge. */
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------- */
/*              CAMERA-MODE EXCLUSIVE TOGGLE GROUP                    */
/* ----------------------------------------------------------------- */

/* A hand-built segmented control rather than MudButtonGroup: the group
   normalises its children's variant/colour, which is exactly what has to
   DIFFER here — the active segment must read as pressed. Buttons are joined
   by collapsing the borders between them. */
.map-area[b-9v3mrgqzaf] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* position: relative is load-bearing — the JS helper appends the absolutely
   positioned HUD overlay INSIDE this element, so this is what the HUD's
   inset: 0 resolves against. Without it the HUD would size to the page. */
.map-container[b-9v3mrgqzaf] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    /* No fixed floor: a 300 px minimum overflowed the globe out of its own
       area on a landscape phone, clipping the glasses frame and the controls. */
    min-height: 0;
    height: 100%;
    /* The globe takes keyboard focus so the flight controls work; the default
       focus ring around the whole 3D view is noise, and the HUD already makes
       it obvious the simulator is live. */
    outline: none;
}

/* ----------------------------------------------------------------- */
/*                  COMPACT TOOLBAR (narrow / touch)                  */
/* ----------------------------------------------------------------- */

/* The keyboard hint means nothing on a touch screen. */
@media (pointer: coarse) {
    [b-9v3mrgqzaf] .map-toolbar-keys-hint {
        display: none;
    }
}

/* A narrow globe panel: the toolbar wrapped to three rows, which on a
   landscape phone left the globe 179 px of a 290 px panel. Drop the hint and
   the dividers and make the labelled buttons icon-only, so it keeps to one
   row. The label stays in the DOM (font-size 0, not display: none), so the
   buttons keep their accessible names. */
@container ptool-center (max-width: 720px) {
    [b-9v3mrgqzaf] .map-toolbar-keys-hint,
    [b-9v3mrgqzaf] .map-toolbar-divider {
        display: none;
    }

    [b-9v3mrgqzaf] .map-toolbar-labelled {
        min-width: 0;
        padding-inline: 8px;
    }

    [b-9v3mrgqzaf] .map-toolbar-labelled .mud-button-label {
        font-size: 0;
    }

    [b-9v3mrgqzaf] .map-toolbar-labelled .mud-button-icon-start {
        margin: 0;
    }
}

/* Narrower still (a portrait phone): zoom and home give way too — the globe
   pinch-zooms on a touch screen. */
@container ptool-center (max-width: 400px) {
    [b-9v3mrgqzaf] .map-toolbar-zoom {
        display: none;
    }
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-9v3mrgqzaf]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                  INSTRUMENTS PANEL (host)                          */
/* ----------------------------------------------------------------- */

.dstool-side-panel[b-9v3mrgqzaf] {
    flex: 1 1 0;
    min-width: 280px; /* equal third alongside the editor and globe panels */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* The host between the panel and the instruments MUST be a bounded flex
   child. Without a rule of its own it sized to its content, and Plotly's
   responsive resize then grew the chart to fit the host that grew to fit the
   chart — an 11,800 px plot clipped by the panel, showing only its legend. */
.dstool-instruments-host[b-9v3mrgqzaf] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.dstool-chat-panel[b-9v3mrgqzaf] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate.
   !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.dstool-chat-panel.collapsed[b-9v3mrgqzaf] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .dstool-chat-panel.collapsed[b-9v3mrgqzaf] {
    border-right-width: 0;
}

[dir="rtl"] .dstool-chat-panel[b-9v3mrgqzaf] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ----------------------------------------------------------------- */
/*        RIGHT PANEL collapsed to a rail (its header button)         */
/* ----------------------------------------------------------------- */

/* The tabs stay MOUNTED (hidden), so the social lists and the journal chart
   keep their state; only the header's expand button shows on the rail. */
.dstool-side-panel[b-9v3mrgqzaf] {
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
}

.dstool-side-panel.collapsed[b-9v3mrgqzaf] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px !important;
    max-width: 48px;
}

.dstool-side-panel.collapsed > :not(.panel-header)[b-9v3mrgqzaf] {
    display: none !important;
}

.dstool-side-panel.collapsed .panel-title[b-9v3mrgqzaf],
.dstool-left-panel.collapsed .panel-title[b-9v3mrgqzaf] {
    display: none;
}

.dstool-side-panel.collapsed .panel-header[b-9v3mrgqzaf],
.dstool-left-panel.collapsed .panel-header[b-9v3mrgqzaf] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* ----------------------------------------------------------------- */
/*                    THE TRANSPORT BAR                               */
/* ----------------------------------------------------------------- */

/* Pedestrian / Driver / Pilot: a segmented control of three icon buttons. */

/* ================================================================= */
/*                    THE PLANNER (pt-*)                              */
/* ================================================================= */

/* A click arms "pick on the globe": the cursor says so. */
.map-container.picking[b-9v3mrgqzaf] {
    cursor: crosshair;
}

.pt-pick-hint[b-9v3mrgqzaf] {
    margin-inline-start: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-plan[b-9v3mrgqzaf],
.pt-options[b-9v3mrgqzaf],
.pt-route[b-9v3mrgqzaf],
.pt-board[b-9v3mrgqzaf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.8rem;
}

/* ---- from / to ---- */
.pt-endpoint[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pt-endpoint-dot[b-9v3mrgqzaf] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #2e7d32;
}

.pt-endpoint-dot.to[b-9v3mrgqzaf] {
    border-color: #c62828;
    border-radius: 2px;
}

/* Compact native inputs (the left panel must fit without scrolling). */
.pt-input[b-9v3mrgqzaf] {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 0.8rem;
}

.pt-input:focus[b-9v3mrgqzaf] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.pt-time[b-9v3mrgqzaf] {
    flex: 0 0 110px;
    direction: ltr;
}

.pt-suggestions[b-9v3mrgqzaf] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    margin-inline-start: 16px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--mud-palette-surface);
}

.pt-suggestion[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: none;
    background: none;
    color: var(--mud-palette-text-primary);
    font-size: 0.78rem;
    text-align: start;
    cursor: pointer;
}

.pt-suggestion:hover[b-9v3mrgqzaf] {
    background: var(--mud-palette-action-default-hover);
}

.pt-suggestion.address[b-9v3mrgqzaf] {
    color: var(--mud-palette-primary);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pt-suggestion-name[b-9v3mrgqzaf] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-suggestion-code[b-9v3mrgqzaf] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
}

.pt-swap-row[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: 10px;
}

/* ---- when / how ---- */
.pt-section-title[b-9v3mrgqzaf] {
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pt-when[b-9v3mrgqzaf],
.pt-modes[b-9v3mrgqzaf] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pt-chip-toggle[b-9v3mrgqzaf] {
    flex: 1 1 0;
    min-width: 0;
    height: 28px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: none;
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-chip-toggle.on[b-9v3mrgqzaf] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.pt-mode[b-9v3mrgqzaf] {
    width: 40px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    opacity: 0.55;
}

.pt-mode.on[b-9v3mrgqzaf] {
    opacity: 1;
    color: #fff;
    background: var(--pt-mode-color);
    border-color: var(--pt-mode-color);
}

/* A mode button with its on/off checkbox centred underneath. */
.pt-mode-cell[b-9v3mrgqzaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pt-mode-check[b-9v3mrgqzaf] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

.pt-row[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
}

.pt-row-label[b-9v3mrgqzaf] {
    flex: 1 1 auto;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ROUTE panel's MAP tab: the top-down viewer fills the tab; its zoom / whole-route buttons over it */
.pt-topmap-wrap[b-9v3mrgqzaf] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 320px;
}

.pt-topmap[b-9v3mrgqzaf] {
    position: relative;
    flex: 1 1 auto;
    min-height: 320px;
    border-radius: 6px;
    overflow: hidden;
}

/* At the TOP LEFT in both languages (user, 2026-10-17): at the start side (the right, in Hebrew) they covered Cesium's
   own toolbar there - the base map and projection buttons. */
.pt-topmap-tools[b-9v3mrgqzaf] {
    position: absolute;
    top: 6px;
    left: 6px;
    right: auto;
    z-index: 5;
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(20, 20, 28, 0.75);
}

/* COMMUNITY tab: the location privacy notice's line under the safety alerts (confirmed / not, and its button) */
.pt-notice-ok[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-success);
}

.pt-notice-missing[b-9v3mrgqzaf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-warning);
}

.pt-notice-read[b-9v3mrgqzaf] {
    padding: 3px 10px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-primary);
    font: inherit;
    cursor: pointer;
}

/* The MAP tab's 2D / 3D and 3D Tiles (user, 2026-10-18): at the BOTTOM LEFT, over Cesium's attribution line */
.pt-topmap-modes[b-9v3mrgqzaf] {
    position: absolute;
    left: 6px;
    bottom: 30px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    direction: ltr;
}

.pt-topmap-seg[b-9v3mrgqzaf],
.pt-topmap-tiles[b-9v3mrgqzaf] {
    display: flex;
    padding: 2px;
    border-radius: 8px;
    background: rgba(20, 20, 28, 0.75);
}

.pt-topmap-seg button[b-9v3mrgqzaf],
.pt-topmap-tiles[b-9v3mrgqzaf] {
    border: 0;
    color: #e8e8f0;
    font: 600 12px/1 inherit;
    cursor: pointer;
}

.pt-topmap-seg button[b-9v3mrgqzaf] {
    min-width: 34px;
    padding: 6px 8px;
    border-radius: 6px;
    background: transparent;
}

.pt-topmap-seg button.on[b-9v3mrgqzaf] {
    background: var(--mud-palette-primary);
    color: #fff;
}

.pt-topmap-tiles[b-9v3mrgqzaf] {
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
}

.pt-topmap-tiles.on[b-9v3mrgqzaf] {
    background: var(--mud-palette-primary);
    color: #fff;
}

/* SIMULATE tab: the scenarios' toggle buttons (a sketch and its name), pressed in when chosen - as the mode toggles */
.pt-scenario-toggles[b-9v3mrgqzaf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 2px;
}

.pt-scenario-toggle[b-9v3mrgqzaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 6px 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
    color: inherit;
    cursor: pointer;
    transition: transform 0.08s ease;
}

.pt-scenario-toggle:hover[b-9v3mrgqzaf] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
}

.pt-scenario-toggle.on[b-9v3mrgqzaf] {
    transform: translateY(3px);
    background: linear-gradient(180deg, color-mix(in srgb, #1e88e5 70%, #000), #1e88e5);
    border-color: color-mix(in srgb, #1e88e5 60%, #fff);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.pt-scenario-toggle:disabled[b-9v3mrgqzaf] {
    opacity: 0.55;
    cursor: wait;
}

.pt-scenario-sketch[b-9v3mrgqzaf] {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    background: #23272f;
}

.pt-scenario-name[b-9v3mrgqzaf] {
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

/* A group's "?" (HelpTipComp) at the end of its head */
.pt-help-end[b-9v3mrgqzaf] {
    margin-inline-start: auto;
    display: inline-flex;
}

/* SIMULATE tab: the scenario's Start / Pause button */

.pt-scenario-start[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 10px;
    background: #2e7d32;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.pt-scenario-start.running[b-9v3mrgqzaf] {
    background: #ef6c00;
}

.pt-scenario-start:disabled[b-9v3mrgqzaf] {
    opacity: 0.55;
    cursor: wait;
}

/* PLAN tab: "travel by" - public transport or car, a two-button segmented choice */
.pt-travel-by[b-9v3mrgqzaf] {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.pt-travel-by-option[b-9v3mrgqzaf] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.pt-travel-by-option.on[b-9v3mrgqzaf] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* COMMUNITY tab: the "show other users" checkbox, its text wrapping instead of being cut */
.pt-row-label.pt-check[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.pt-check input[b-9v3mrgqzaf] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--mud-palette-primary);
}

.pt-row .pt-input:not(.pt-day):not(.pt-time)[b-9v3mrgqzaf] {
    flex: 0 0 150px;
}

.pt-feed-status[b-9v3mrgqzaf],
.pt-stats[b-9v3mrgqzaf],
.pt-source[b-9v3mrgqzaf] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.pt-source[b-9v3mrgqzaf] {
    padding: 0 12px 12px;
}

.pt-empty[b-9v3mrgqzaf] {
    padding: 16px 4px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* ---- option cards ---- */
.pt-card[b-9v3mrgqzaf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-align: start;
    cursor: pointer;
}

.pt-card.selected[b-9v3mrgqzaf] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.pt-card-head[b-9v3mrgqzaf],
.pt-card-foot[b-9v3mrgqzaf],
.pt-route-summary[b-9v3mrgqzaf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.pt-card-times[b-9v3mrgqzaf] {
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.pt-card-duration[b-9v3mrgqzaf] {
    font-weight: 600;
}

.pt-card-foot[b-9v3mrgqzaf] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.pt-card-chips[b-9v3mrgqzaf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

[b-9v3mrgqzaf] .pt-chip-sep {
    color: var(--mud-palette-text-secondary);
}

.pt-chip[b-9v3mrgqzaf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px 1px 4px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.pt-chip.ride[b-9v3mrgqzaf] {
    background: var(--pt-chip-color);
    color: #fff;
}

.pt-chip.foot[b-9v3mrgqzaf] {
    color: var(--mud-palette-text-secondary);
}

.pt-card-tags[b-9v3mrgqzaf] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pt-tag[b-9v3mrgqzaf] {
    font-size: 0.68rem;
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(126, 111, 255, 0.15);
    color: var(--mud-palette-primary);
}

/* ---- the route timeline ---- */
.pt-timeline[b-9v3mrgqzaf] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.pt-leg[b-9v3mrgqzaf] {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px;
    position: relative;
    padding-bottom: 10px;
}

.pt-leg-time[b-9v3mrgqzaf] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    direction: ltr;
}

.pt-leg-body[b-9v3mrgqzaf] {
    border-inline-start: 4px solid var(--pt-chip-color);
    padding-inline-start: 8px;
    min-width: 0;
}

.pt-leg.foot .pt-leg-body[b-9v3mrgqzaf] {
    border-inline-start-style: dotted;
}

.pt-leg.end .pt-leg-body[b-9v3mrgqzaf] {
    border-inline-start-color: transparent;
}

.pt-leg-from[b-9v3mrgqzaf] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pt-leg-what[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
}

.pt-leg-stops summary[b-9v3mrgqzaf] {
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--mud-palette-primary);
}

.pt-leg-stops ul[b-9v3mrgqzaf] {
    margin: 2px 0;
    padding-inline-start: 16px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- the stop board ---- */
.pt-board-title[b-9v3mrgqzaf] {
    font-weight: 700;
    font-size: 0.9rem;
}

.pt-board-actions[b-9v3mrgqzaf] {
    display: flex;
    gap: 4px;
}

.pt-board-row[b-9v3mrgqzaf] {
    display: grid;
    grid-template-columns: 44px auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pt-board-time[b-9v3mrgqzaf] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    direction: ltr;
}

.pt-board-headsign[b-9v3mrgqzaf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-board-in[b-9v3mrgqzaf] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- simulation HUD (over the globe; .map-area is position: relative) ---- */
.pt-sim-hud[b-9v3mrgqzaf] {
    /* At the bottom of the 3D view (user, 2026-10-16: "move the simulation time panel to the lower part, so it
       will not obscure the directions and the Protector's announcements"), on the left in both languages - the
       globe's compass and full-screen buttons hold the bottom right - above the imagery credits. */
    position: absolute;
    bottom: 34px;
    left: 10px;
    z-index: 10;
    width: min(440px, calc(100% - 20px));
    padding: 8px 10px 4px;
    border-radius: 10px;
    background: rgba(20, 20, 32, 0.84);
    color: #fff;
    font-size: 0.8rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
}

.pt-sim-row[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pt-sim-clock[b-9v3mrgqzaf] {
    flex: 0 0 auto;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.pt-sim-step[b-9v3mrgqzaf] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The time bar: click to jump the trip to that moment (a taller hit area than the 4 px it draws). */
/* The time line (user, 2026-10-14: "a coloured and clickable progress bar showing the simulation's
   progress; clicking it jumps all vehicles to that time"): the legs in their colours, bright where played
   and darkened ahead, a playhead; the bar itself takes the click - its parts let it through, so the
   click's offset is measured on the bar (seekSimulationAt). */
.pt-sim-bar[b-9v3mrgqzaf] {
    position: relative;
    margin: 6px 0 0;
    padding: 4px 0;
    cursor: pointer;
}

.pt-sim-bar-track[b-9v3mrgqzaf] {
    position: relative;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

.pt-sim-bar-seg[b-9v3mrgqzaf] {
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

/* The part still to come: darkened (the part played shows the legs' own colours). */
.pt-sim-bar-rest[b-9v3mrgqzaf] {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    background: rgba(10, 10, 20, 0.62);
    transition: inset-inline-start 0.4s linear;
    pointer-events: none;
}

.pt-sim-bar-head[b-9v3mrgqzaf] {
    position: absolute;
    top: -2px;
    width: 4px;
    height: 16px;
    margin-inline-start: -2px;
    border-radius: 2px;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
    transition: inset-inline-start 0.4s linear;
    pointer-events: none;
}

.pt-sim-bar:hover .pt-sim-bar-track[b-9v3mrgqzaf] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.pt-sim-bar-times[b-9v3mrgqzaf] {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    opacity: 0.8;
    margin-bottom: 2px;
}

/* Loading the trip and its simulated traffic: progress bars at the bottom of the 3D view,
   so the scene being loaded stays visible behind them. */
.pt-sim-loading[b-9v3mrgqzaf] {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    width: min(360px, calc(100% - 32px));
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(20, 20, 32, 0.88);
    color: #fff;
    font-size: 0.85rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.pt-sim-loading-row[b-9v3mrgqzaf] {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.pt-sim-hud .pt-sim-speed[b-9v3mrgqzaf] {
    flex: 0 0 120px;
    height: 26px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.pt-sim-hud[b-9v3mrgqzaf]  .mud-icon-button,
.pt-sim-hud[b-9v3mrgqzaf]  .mud-button-root {
    color: #fff;
}

/* ---- PLAN group boxes: where / when / how / preferences ----
   A bordered box per topic, its header an icon in the group's accent colour and a title,
   the accent repeated as a thin bar on the box's inline-start edge (mirrors under RTL). */
.pt-group[b-9v3mrgqzaf] {
    --pt-group-accent: var(--mud-palette-primary);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 8px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-inline-start: 3px solid var(--pt-group-accent);
    border-radius: 6px;
    background: var(--mud-palette-background-gray, rgba(127, 127, 127, 0.04));
}

.pt-group.where[b-9v3mrgqzaf] { --pt-group-accent: #2e7d32; }
.pt-group.when[b-9v3mrgqzaf] { --pt-group-accent: #ef6c00; }
.pt-group.how[b-9v3mrgqzaf] { --pt-group-accent: #1565c0; }
.pt-group.prefs[b-9v3mrgqzaf] { --pt-group-accent: #7b1fa2; }
.pt-group.you[b-9v3mrgqzaf] { --pt-group-accent: #00838f; }

/* ---- "You": how I move - four mutually exclusive toggle buttons, raised; the chosen one pressed in ---- */
.lt-transport-label[b-9v3mrgqzaf] {
    font-size: 12px;
    opacity: 0.75;
    margin: 6px 0 4px;
}

.lt-transport-toggles[b-9v3mrgqzaf] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 4px;
}

.lt-transport-toggle[b-9v3mrgqzaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 7px 2px 5px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    /* Raised: a lit top edge, a dark ledge under it. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
    transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}

.lt-transport-toggle:hover[b-9v3mrgqzaf] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
}

.lt-transport-toggle:active[b-9v3mrgqzaf],
.lt-transport-toggle.on[b-9v3mrgqzaf] {
    /* Pressed in: sunk by its ledge's height, shaded inside, in its mode's colour. */
    transform: translateY(3px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--lt-mode-color) 70%, #000), var(--lt-mode-color));
    border-color: color-mix(in srgb, var(--lt-mode-color) 60%, #fff);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5), 0 0 0 rgba(0, 0, 0, 0);
    color: #fff;
}

.lt-transport-icon[b-9v3mrgqzaf] {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lt-mode-color);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.lt-transport-toggle.on .lt-transport-icon[b-9v3mrgqzaf] {
    background: rgba(255, 255, 255, 0.22);
}

.lt-transport-name[b-9v3mrgqzaf] {
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

.pt-group-head[b-9v3mrgqzaf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
}

.pt-group-icon[b-9v3mrgqzaf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    background: var(--pt-group-accent);
    flex: 0 0 auto;
}

.pt-group-icon[b-9v3mrgqzaf]  .mud-icon-root {
    font-size: 0.95rem;
}

.pt-group-title[b-9v3mrgqzaf] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pt-group-accent);
}

/* MODEL tab: the traveller's car in 3D (live_traffic_vehicle_model.js) fills its tab. */
.pt-vehicle-model[b-9v3mrgqzaf] {
    position: relative;
    flex: 1 1 auto;
    min-height: 380px;
    border-radius: 8px;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/LosVisibilityTool/Charts/ProfileSideViewChartComp.razor.rz.scp.css */
/* ================================================================= */
/*             ProfileSideViewChartComp.razor.css                    */
/*   Base side-view profile chart: interactive Plotly plot (drag to   */
/*   pan, wheel to zoom) + the WPF-style control row underneath.      */
/*   Axis titles live inside the Plotly layout (its SVG text applies  */
/*   bidi, so Hebrew needs no HTML-title workaround).                 */
/* ================================================================= */

.chart-host[b-glumelff8n] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.chart-plot-area[b-glumelff8n] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (WPF ProfileSideViewChart.xaml bottom DockPanel) */
.chart-toolbar[b-glumelff8n] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.chart-toolbar-label[b-glumelff8n] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

/* AXES EQUAL checkbox + caption */
.chart-toolbar-check[b-glumelff8n] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.chart-projection-select[b-glumelff8n] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    min-width: 110px;
}

/* Zoom / reset / save buttons (the WpfPlot right-click menu equivalents) */
.chart-toolbar-btn[b-glumelff8n] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.chart-toolbar-btn:hover[b-glumelff8n] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.chart-toolbar-btn:active[b-glumelff8n] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/LosVisibilityTool/Charts/TerrainMapChartComp.razor.rz.scp.css */
/* ================================================================= */
/*                 TerrainMapChartComp.razor.css                     */
/*   Fills its MudTabs panel: the Plotly heatmap grows to the        */
/*   available space; the "no data" hint sits at the top.            */
/* ================================================================= */

.terrain-chart-host[b-65ho4uea1c] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

/* The plot area takes all remaining height; the ResizeObserver watches it so
   the chart follows the panel size (Plotly's Responsive flag only reacts to
   WINDOW resizes, not to the tool's own tab / splitter layout changes). */
.terrain-chart-plot-area[b-65ho4uea1c] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
}
/* _content/AspireChatApp.Razor/Components/Tools/LosVisibilityTool/Editors/LosVisibilityEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                LosVisibilityEditorComp.razor.css                  */
/*   Compact WPF-LosEditor-style rows: label | small editor, so the  */
/*   whole editor fits the panel without scrolling.                  */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.los-editor-scroll[b-i0xl1xglvk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-i0xl1xglvk] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-i0xl1xglvk] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-i0xl1xglvk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-i0xl1xglvk] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette */
.los-input[b-i0xl1xglvk] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.los-input:focus[b-i0xl1xglvk] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Fields the current LOS mode computes: greyed out to read as outputs, but
   readonly rather than disabled so the value stays selectable and copyable.
   Both classes are needed in the selector — .los-input is declared later and
   would otherwise win on equal specificity and undo the grey. */
.los-input.los-input-computed[b-i0xl1xglvk] {
    /* --mud-palette-background-grey is undefined in this theme and
       --mud-palette-text-disabled is only 20% white (illegible), so the
       greying uses the surface / secondary-text pair instead. */
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-divider);
    /* Text caret, not a "blocked" cursor — the value can be selected/copied */
    cursor: text;
    /* Keep computed numbers legible despite the dimmed palette */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* A readonly number input still renders spinners; they do nothing here */
.los-input-computed[b-i0xl1xglvk]::-webkit-inner-spin-button,
.los-input-computed[b-i0xl1xglvk]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.los-input.los-input-computed[b-i0xl1xglvk] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Focusing a computed field (to select/copy it) must not make it look editable */
.los-input.los-input-computed:focus[b-i0xl1xglvk] {
    outline: none;
    border-color: var(--mud-palette-divider);
}

.los-input-narrow[b-i0xl1xglvk] {
    width: 82px;
}

/* Inline AGL/ASL radio pair */
.los-radio-inline[b-i0xl1xglvk] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.los-radio-inline label[b-i0xl1xglvk] {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

/* Computed readout values */
.los-readout-value[b-i0xl1xglvk] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* Verdict chip / compute button / hint */
.los-verdict-chip[b-i0xl1xglvk] {
    align-self: flex-start;
    margin-top: 2px;
}

.los-compute-button[b-i0xl1xglvk] {
    margin: 4px 6px;
}

.los-hint[b-i0xl1xglvk] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}
/* _content/AspireChatApp.Razor/Components/Tools/LosVisibilityTool/LosVisibilityToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                  LosVisibilityToolComp.razor.css                  */
/*   Layout styles for the LOS visibility tool (RTL aware):          */
/*   left editor tabs | Cesium globe | side-view chart panel.        */
/*   Editor styles live in LosVisibilityEditorComp.razor.css and     */
/*   chart styles in LosVisibilitySideViewChartComp.razor.css.       */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-ju1xzpbjvc] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-ju1xzpbjvc] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-ju1xzpbjvc] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-ju1xzpbjvc] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-ju1xzpbjvc] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-ju1xzpbjvc] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-ju1xzpbjvc] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-ju1xzpbjvc] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* CHAT tab host — lets the embedded per-tool ChatBotComp fill the panel */
.lostool-chat-host[b-ju1xzpbjvc] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-ju1xzpbjvc] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-ju1xzpbjvc] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-ju1xzpbjvc] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-ju1xzpbjvc],
.panel-splitter:active[b-ju1xzpbjvc] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-ju1xzpbjvc] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-ju1xzpbjvc] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Center TabControl (MAP / TERRAIN / UNDULATION) fills the center panel.
   ::deep everywhere: MudTabs is a child COMPONENT, so its rendered elements
   never carry this component's scoped-CSS attribute — unscoped rules would
   silently not match and the globe / charts would collapse to zero height. */
[b-ju1xzpbjvc] .lostool-center-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

[b-ju1xzpbjvc] .lostool-center-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Each center panel stacks its content vertically (MAP: toolbar + globe;
   TERRAIN / UNDULATION: the Plotly chart) and fills the panels area. */
[b-ju1xzpbjvc] .lostool-center-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.map-toolbar[b-ju1xzpbjvc] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-ju1xzpbjvc] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-ju1xzpbjvc] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-ju1xzpbjvc]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                SIDE-VIEW CHART PANEL (host)                        */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-ju1xzpbjvc] {
    flex: 1 1 0;
    min-width: 280px; /* equal third alongside the editor and map panels */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.lostool-chat-panel[b-ju1xzpbjvc] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.lostool-chat-panel.collapsed[b-ju1xzpbjvc] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .lostool-chat-panel.collapsed[b-ju1xzpbjvc] {
    border-right-width: 0;
}

[dir="rtl"] .lostool-chat-panel[b-ju1xzpbjvc] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp so  */
/*   both globes offer the same toolbar options)                       */
/* ================================================================= */

.menu-exaggeration-row[b-ju1xzpbjvc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-ju1xzpbjvc] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-ju1xzpbjvc] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-ju1xzpbjvc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-ju1xzpbjvc] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-ju1xzpbjvc] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-ju1xzpbjvc] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/MapExplorerTool/MapExplorerToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                  MapExplorerToolComp.razor.css                    */
/*        Styles for the Cesium MapExplorerTool (RTL aware)          */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.mapexplorertool-container[b-imqqpsm4d2] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right of the map.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order editor | map
   becomes map | editor. Do NOT add flex-direction: row-reverse here: on an
   rtl container that reverses a SECOND time and cancels out, leaving the
   LTR layout. */
.mapexplorertool-container[dir="rtl"][b-imqqpsm4d2] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* Default proportions of the tree | properties | map row: 20% | 20% | 60%.
   The flex-grow weights (2 : 2 : 6) split the shared space in that ratio, so the
   two left panels are equal at 20% each and the map is 60% — independent of the
   chat panel (a fixed-width / zero-width sibling). A splitter drag writes inline
   width/min/max, which overrides the flex weight and pins that panel; the others
   keep sharing the remainder in the same ratio. */
.mapexplorertool-left-panel[b-imqqpsm4d2] {
    flex: 2 1 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .mapexplorertool-left-panel[b-imqqpsm4d2] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.mapexplorertool-left-panel.collapsed[b-imqqpsm4d2] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* Scroll wrapper so browser + tree + editors share one scrollbar */
.left-scroll[b-imqqpsm4d2] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* ----------------------------------------------------------------- */
/*     TOUCH ACTION PANEL (right-click substitute on touch devices)   */
/* ----------------------------------------------------------------- */

/* A tablet / phone has no right-click, so the tree context menus are
   unreachable there. On a touch device, selecting a tree row renders its
   actions here instead — pinned to the LOWER part of the left panel, below
   the scrolling trees, where a thumb reaches them easily.

   A sibling of .left-scroll (which takes flex: 1 1 auto), so it keeps its
   natural height at the bottom while the trees absorb the remaining space.
   Capped at 45% of the panel so a long action list can never squeeze the
   trees out of view; it scrolls internally past that. */
.touch-action-panel[b-imqqpsm4d2] {
    flex: 0 0 auto;
    max-height: 45%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    border-top: 2px solid var(--mud-palette-primary);
}

.touch-action-header[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 4px 8px;
    background-color: var(--mud-palette-background-gray);
}

/* The selected row's name. Truncates rather than wrapping, so the header
   stays one line however long a layer / service name is. */
.touch-action-subject[b-imqqpsm4d2] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.touch-action-list[b-imqqpsm4d2] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px 8px 8px;
}

/* Caption above a related run of actions (Export, Add feature). */
.touch-action-group-label[b-imqqpsm4d2] {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
}

/* Related actions share a wrapping row so a 6-button run (the geometry
   kinds) does not push the rest of the list off the panel. */
.touch-action-row[b-imqqpsm4d2] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.touch-action-row > *[b-imqqpsm4d2] {
    flex: 1 1 auto;
}

/* Touch targets: the Material minimum is 44px, and these buttons exist
   precisely because the user has no mouse. */
.touch-action-list[b-imqqpsm4d2]  .mud-button-root {
    min-height: 44px;
    justify-content: flex-start;
    text-align: start;
}

.touch-action-row[b-imqqpsm4d2]  .mud-button-root {
    justify-content: center;
}

/* ----------------------------------------------------------------- */
/*        PINNED EDITOR INSIDE THE TOUCH ACTION PANEL                 */
/* ----------------------------------------------------------------- */

/* An editor that opens as a floating MudDialog on a mouse device is the wrong
   shape on a phone: the window covers the map, is wider than the viewport and
   its buttons land off-screen. On touch the same editor body is pinned HERE
   instead, in the lower part of the left panel, so the user fills the fields
   and taps APPLY & CLOSE without ever chasing a floating window.

   While an editor is hosted the panel gets more room than the plain action
   list needs (the style editor carries four tabs of controls), and the action
   list underneath is suppressed rather than re-indented in the markup. */
.touch-action-panel.editor-open[b-imqqpsm4d2] {
    max-height: 70%;
}

.touch-action-panel.editor-open .touch-action-list[b-imqqpsm4d2] {
    display: none;
}

/* Scrolls internally: the panel keeps the header pinned at the top and the
   APPLY & CLOSE button pinned at the bottom however long the editor body is. */
.touch-editor-body[b-imqqpsm4d2] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 8px;
}

/* The pinned editor is width-constrained by the panel, not by the 340px the
   floating dialog assumes — let it use the full panel width on a phone. */
.touch-editor-body[b-imqqpsm4d2]  .style-dialog-compact {
    width: 100%;
}

/* Action bar, pinned below the scrolling editor body. */
.touch-editor-actions[b-imqqpsm4d2] {
    flex: 0 0 auto;
    padding: 6px 8px 8px 8px;
    border-top: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-background-gray);
}

.touch-editor-actions[b-imqqpsm4d2]  .mud-button-root {
    min-height: 44px;
}

/* ----------------------------------------------------------------- */
/*        RIGHT PANEL (this tool's dedicated ChatBot instance)        */
/* ----------------------------------------------------------------- */

.mapexplorertool-chat-panel[b-imqqpsm4d2] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.mapexplorertool-chat-panel.collapsed[b-imqqpsm4d2] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .mapexplorertool-chat-panel.collapsed[b-imqqpsm4d2] {
    border-right-width: 0;
}

[dir="rtl"] .mapexplorertool-chat-panel[b-imqqpsm4d2] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.mapexplorertool-chat-host[b-imqqpsm4d2] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.mapexplorertool-center-panel[b-imqqpsm4d2] {
    flex: 6 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*     PROPERTIES PANEL (properties of the selected tree node)        */
/* ----------------------------------------------------------------- */

/* The middle column between the tree (left) and the globe (center). Shares the
   tree | properties | map row at the 20% | 20% | 60% ratio (flex-grow 2 : 2 : 6),
   so it opens equal to the tree panel at 20%. Its splitter can still pin it to an
   inline width, and it collapses to a thin rail via the .collapsed class. */
.mapexplorertool-props-panel[b-imqqpsm4d2] {
    flex: 2 1 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
}

[dir="rtl"] .mapexplorertool-props-panel[b-imqqpsm4d2] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* Collapsed: a 48px rail showing only the header + expand button.
   !important beats any inline width the splitter drag left behind. */
.mapexplorertool-props-panel.collapsed[b-imqqpsm4d2] {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
}

.props-scroll[b-imqqpsm4d2] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
}

.props-section[b-imqqpsm4d2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.props-section-header[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    padding: 6px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.props-empty[b-imqqpsm4d2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 16px;
    text-align: center;
}

/* ---- Server property list ---- */
.props-list[b-imqqpsm4d2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.props-row[b-imqqpsm4d2] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.props-row-label[b-imqqpsm4d2] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.props-row-value[b-imqqpsm4d2] {
    font-size: 0.82rem;
    color: var(--mud-palette-text-primary);
    word-break: break-word;
}

.props-row-url[b-imqqpsm4d2] {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.props-row-url:hover[b-imqqpsm4d2] {
    text-decoration: underline;
}

.props-actions[b-imqqpsm4d2] {
    margin-top: 8px;
}

.props-actions-row[b-imqqpsm4d2] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ---- Inline feature geometry editor ---- */
.props-hint[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    color: var(--mud-palette-info);
    padding: 2px 0 6px;
}

.props-field[b-imqqpsm4d2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}

.props-field-label[b-imqqpsm4d2] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.props-input[b-imqqpsm4d2] {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.85rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

.props-vertices[b-imqqpsm4d2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.props-vertex-row[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.props-vertex-index[b-imqqpsm4d2] {
    flex: 0 0 18px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.props-input-coord[b-imqqpsm4d2] {
    flex: 1 1 0;
    min-width: 0;
}

/* Header above a derived, read-only vertex list (a circle's computed outline). */
.props-vertices-header[b-imqqpsm4d2] {
    margin: 8px 0 4px;
    color: var(--mud-palette-text-secondary);
}

/* A circle's outline points are DERIVED from its centre + radius: shown for
   reference, visibly inert, and never editable. */
.props-vertices-readonly .props-input-coord[b-imqqpsm4d2] {
    opacity: 0.65;
    cursor: default;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-imqqpsm4d2] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      GIS SERVER BROWSER                            */
/* ----------------------------------------------------------------- */

.browser-row[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    padding: 2px 8px;
}

.browser-name[b-imqqpsm4d2] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------------------------------------------------------- */
/*                      LAYER TOOLBAR                                 */
/* ----------------------------------------------------------------- */

.layer-toolbar[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
    gap: 2px;
}

/* ----------------------------------------------------------------- */
/*                      LAYER TREE VIEW                               */
/* ----------------------------------------------------------------- */

.layer-treeview-container[b-imqqpsm4d2] {
    overflow-x: hidden;
    padding: 2px 4px;
}

.treeview-item-content[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    min-height: 24px;
}

/* Compact rows: MudListItem/MudCheckBox default padding makes rows very tall */
.layer-treeview-container[b-imqqpsm4d2]  .mud-list-item {
    padding-top: 0;
    padding-bottom: 0;
    padding-inline-start: 4px;
    padding-inline-end: 4px;
    min-height: 26px;
}

.layer-treeview-container[b-imqqpsm4d2]  .mud-list-item-text {
    margin-top: 0;
    margin-bottom: 0;
}

.layer-treeview-container[b-imqqpsm4d2]  .mud-checkbox .mud-button-root,
.layer-treeview-container[b-imqqpsm4d2]  .mud-icon-button {
    padding: 2px;
}

.layer-treeview-container[b-imqqpsm4d2]  .mud-list-padding {
    padding-top: 0;
    padding-bottom: 0;
}

.layer-treeview-container[b-imqqpsm4d2]  .mud-chip {
    height: 18px;
    font-size: 0.7rem;
}

.treeview-item-content[b-imqqpsm4d2]  .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact native checkbox for one-line layer rows */
.layer-checkbox[b-imqqpsm4d2] {
    width: 14px;
    height: 14px;
    margin: 0 2px;
    cursor: pointer;
    accent-color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.selected-row[b-imqqpsm4d2] {
    background: var(--mud-palette-primary-hover);
}

/* ----------------------------------------------------------------- */
/*                DRAGGABLE PANEL SPLITTER                            */
/* ----------------------------------------------------------------- */

.panel-splitter[b-imqqpsm4d2] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-imqqpsm4d2],
.panel-splitter:active[b-imqqpsm4d2] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-imqqpsm4d2] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                COMPACT GO-TO-POINT DIALOG                          */
/* ----------------------------------------------------------------- */

/* Title bar holds the icon+label and a close button pushed to the far side */
.goto-dialog-title[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.goto-dialog-close[b-imqqpsm4d2] {
    margin: -6px -8px -6px 0;
}

.goto-dialog-compact[b-imqqpsm4d2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

/* Compact label + native input rows, matching the LOS tool styling */
.goto-row[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-imqqpsm4d2] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-imqqpsm4d2] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.goto-input:focus[b-imqqpsm4d2] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* ----------------------------------------------------------------- */
/*                COMPACT STYLE DIALOG                                */
/* ----------------------------------------------------------------- */

.style-dialog-compact[b-imqqpsm4d2] {
    width: 340px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Central geometry tab-control (POINTS / POLYLINES / POLYGONS / LABELS).
   Tighten MudTabs' default spacing so the compact style dialog stays small. */
.style-editor-tabs[b-imqqpsm4d2] {
    margin-top: 4px;
}

.style-editor-tabs[b-imqqpsm4d2]  .mud-tabs-tabbar {
    min-height: 34px;
}

.style-editor-tabs[b-imqqpsm4d2]  .mud-tab {
    min-width: 0;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

/* Tab body: a little breathing room, matches the compact rows inside. */
.style-editor-tabs[b-imqqpsm4d2]  .style-tab-panel {
    padding: 8px 2px 2px 2px;
    min-height: 96px;
}

/* One compact editor row: label stretches (pushing the editor to the far
   end), editor/color/checkbox sits at the row end. In RTL the dir wrapper
   flips the flex axis so the label lands on the right — like the LOS editor.
   Used for the full-width symbol header row (canvas + buttons). */
.style-row[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.style-row-label[b-imqqpsm4d2] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.style-row-label-strong[b-imqqpsm4d2] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Two controls per line — an explicit pair (symbol fields), each half an
   equal-width cell. */
.style-row-2[b-imqqpsm4d2] {
    display: flex;
    gap: 10px;
    padding: 1px 0;
}

/* Auto-flowing two-column grid for the layer fields, whose set varies with
   geometry (fill row only for polygons, line rows dropped for raster). The
   grid flows whatever cells are present two-per-row without hand-pairing. */
.style-grid[b-imqqpsm4d2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
    align-items: end;
}

/* One control cell: its own label stacked above the editor, so two cells sit
   side-by-side on a line while each still reads label→editor. */
.style-cell[b-imqqpsm4d2] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
}

/* A cell whose editor sits beside its label rather than under it (checkbox). */
.style-cell-inline[b-imqqpsm4d2] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.style-cell-label[b-imqqpsm4d2] {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native number inputs / selects styled to the Mud palette,
   matching LosVisibilityToolComp .los-input. Full-width inside a cell. */
.style-input[b-imqqpsm4d2] {
    width: 100%;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.style-input:focus[b-imqqpsm4d2] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* A <select> with long option text must clip, not grow a horizontal
   scrollbar; the fixed width + ellipsis keep the closed control tidy. */
select.style-input[b-imqqpsm4d2] {
    text-overflow: ellipsis;
    overflow: hidden;
    /* Leave room for the native dropdown arrow */
    padding-inline-end: 4px;
}

/* Color swatch fills its grid cell so it lines up with the number inputs in
   the adjacent column. */
.style-color-swatch[b-imqqpsm4d2] {
    width: 100%;
    height: 24px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

/* Symbol add/remove/move button cluster */
.style-symbol-buttons[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
}

/* Symbol-layers list (QGIS-style, topmost symbol shown first) */
.symbol-layers-list[b-imqqpsm4d2] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    max-height: 96px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 2px 0 4px 0;
}

.symbol-layer-row[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    cursor: pointer;
    min-height: 24px;
    font-size: 0.78rem;
}

.symbol-layer-row:hover[b-imqqpsm4d2] {
    background: var(--mud-palette-action-default-hover);
}

.symbol-layer-name[b-imqqpsm4d2] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.symbol-layer-size[b-imqqpsm4d2] {
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

.symbol-swatch[b-imqqpsm4d2] {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border-radius: 3px;
    border: 2px solid transparent;
}

.symbol-preview[b-imqqpsm4d2] {
    background:
        repeating-conic-gradient(var(--mud-palette-lines-default) 0% 25%, transparent 0% 50%)
        50% / 12px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* ----------------------------------------------------------------- */
/*                      STYLE / COORD EDITORS                         */
/* ----------------------------------------------------------------- */

.style-editor-container[b-imqqpsm4d2],
.coord-picker-container[b-imqqpsm4d2] {
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-grey);
}

.style-editor-content[b-imqqpsm4d2] {
    padding: 8px 12px;
}

.style-row[b-imqqpsm4d2] {
    margin-bottom: 12px;
}

.style-row:last-child[b-imqqpsm4d2] {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------- */
/*                      MAP TOOLBAR                                   */
/* ----------------------------------------------------------------- */

.map-toolbar[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.search-box[b-imqqpsm4d2] {
    max-width: 320px;
}

/* ----------------------------------------------------------------- */
/*                      MOUSE COORDINATES                             */
/* ----------------------------------------------------------------- */

.mouse-coordinates[b-imqqpsm4d2] {
    position: absolute;
    top: 56px;
    left: 10px;
    z-index: 100;
    padding: 4px 8px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    font-family: 'Roboto Mono', monospace;
    pointer-events: none;
}

[dir="rtl"] .mouse-coordinates[b-imqqpsm4d2] {
    left: auto;
    right: 10px;
}

[b-imqqpsm4d2] .mud-theme-dark .mouse-coordinates {
    background-color: rgba(30, 30, 30, 0.9);
    color: #ffffff;
}

/* ----------------------------------------------------------------- */
/*                      SEARCH RESULT BANNER                          */
/* ----------------------------------------------------------------- */

.search-result[b-imqqpsm4d2] {
    position: absolute;
    top: 56px;
    right: 10px;
    max-width: 40%;
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

[dir="rtl"] .search-result[b-imqqpsm4d2] {
    right: auto;
    left: 10px;
}

[b-imqqpsm4d2] .mud-theme-dark .search-result {
    background-color: rgba(30, 30, 30, 0.95);
    color: #ffffff;
}

/* ----------------------------------------------------------------- */
/*                      MAP CONTAINER (Cesium)                        */
/* ----------------------------------------------------------------- */

/* Positioning context for the globe and its on-map overlays */
.map-area[b-imqqpsm4d2] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-imqqpsm4d2] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-imqqpsm4d2]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*     TERRAIN CONTROLS (Height Exaggeration + OSM Buildings)         */
/* ----------------------------------------------------------------- */

/* Height-exaggeration editor row inside the Map Tools menu popover.
   Follows the MudBlazor theme (the popover is light or dark), unlike the
   fixed-dark on-map overlay. */
.menu-exaggeration-row[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-imqqpsm4d2] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-imqqpsm4d2] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

/* ----------------------------------------------------------------- */
/*                      RESPONSIVE ADJUSTMENTS                        */
/* ----------------------------------------------------------------- */

/* On narrow screens relax the floor equally on both left panels so the
   20% | 20% | 60% (2 : 2 : 6) ratio is preserved and the tree never grows
   wider than the properties panel. */
@media (max-width: 1200px) {
    .mapexplorertool-left-panel[b-imqqpsm4d2],
    .mapexplorertool-props-panel[b-imqqpsm4d2] {
        min-width: 180px;
    }
}

/* ----------------------------------------------------------------- */
/*                  NARROW-SCREEN PANE RESETS                         */
/* ----------------------------------------------------------------- */

/* Which panel is shown in a narrow window is handled by the shared Display-Mode
   system (app-bar selector + global main.css [data-gv-panel] rules). This tool
   no longer renders its own bottom tab bar or [data-mobile-pane] switcher — that
   was the duplicate second selector.

   Below this width the desktop columns cannot coexist: their combined min-widths
   (240 + 280 + 300px) overflow any phone viewport. These rules only relax the
   per-panel sizing so whichever pane the Display-Mode selector leaves visible
   fills the width; they do NOT decide visibility. */
@media (max-width: 900px) {

    /* Stack ONLY in PHONE mode, where exactly one pane is visible and it should
       take the full height.

       Deliberately NOT keyed on the media query alone: 660-980px resolves to
       TABLET, which legitimately shows TWO panes side-by-side, and a blanket
       flex-direction: column there stacks them vertically — the very layout the
       Display-Mode system exists to avoid. Width decides the MODE (in
       display_mode.js); the mode, not the width, decides the direction. */
    body[data-display-mode="PHONE"] .mapexplorertool-container[b-imqqpsm4d2],
    body[data-display-mode="PHONE"] .mapexplorertool-container[dir="rtl"][b-imqqpsm4d2] {
        flex-direction: column;
    }

    /* Every pane: drop the desktop min/max widths that caused the overflow in the
       first place, and let flex distribute what is left.

       width: AUTO, not 100% — in TABLET mode two panes sit side-by-side in a ROW,
       and a 100% basis makes each of them demand the entire width, so they
       overflow instead of sharing it. `flex: 1 1 auto` with an auto width gives a
       single visible pane the full width anyway (it is the only item), while two
       visible panes split it evenly. */
    .mapexplorertool-left-panel[b-imqqpsm4d2],
    .mapexplorertool-props-panel[b-imqqpsm4d2],
    .mapexplorertool-center-panel[b-imqqpsm4d2],
    .mapexplorertool-chat-panel[b-imqqpsm4d2] {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        min-height: 0;
        border-left: none;
        border-right: none;
        transition: none;
    }

    /* The left panel's desktop collapse pins it to a 48px rail; at full width
       that would leave a mostly-empty pane. */
    .mapexplorertool-left-panel.collapsed[b-imqqpsm4d2] {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    /* Same for the properties panel's desktop 48px collapse rail. */
    .mapexplorertool-props-panel.collapsed[b-imqqpsm4d2] {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Drag splitters are meaningless when panes do not share the screen, and
       they would otherwise show up as stray bars in the stack. The global
       Display-Mode rules in main.css already hide them in every restricted mode;
       this keeps them hidden for the width range regardless. */
    [b-imqqpsm4d2] .panel-splitter {
        display: none;
    }
}

/* ----------------------------------------------------------------- */
/*                      DIALOG STYLING                                */
/* ----------------------------------------------------------------- */

[b-imqqpsm4d2] .mud-dialog {
    min-width: 300px;
}

/* ----------------------------------------------------------------- */
/*                 GIS SERVER TREE (QGIS-style browser)               */
/* ----------------------------------------------------------------- */

.server-tree-header[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    padding: 6px 8px 2px 8px;
    color: var(--mud-palette-text-primary);
}

/* Layer-name search bar above the GIS-server tree */
.server-search-bar[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px 4px 6px;
}

/* Same metrics as the .los-input fields in LosVisibilityTool, so the box sits
   at the scale of the 24px tree rows instead of towering over them. */
.server-search-input[b-imqqpsm4d2] {
    flex: 1;
    min-width: 0;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
}

.server-search-input:focus[b-imqqpsm4d2] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.server-search-input[b-imqqpsm4d2]::placeholder {
    color: var(--mud-palette-text-disabled);
}

.server-search-status[b-imqqpsm4d2] {
    padding: 0 10px 4px 10px;
    opacity: 0.85;
}

/* A row whose own name matched the query (ancestors kept for the path do not
   get this — only real hits are highlighted). */
.server-tree-node.search-match-row[b-imqqpsm4d2] {
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    /* Start-edge bar so a hit is still findable when many rows are highlighted
       and when the row is also the selected one. */
    box-shadow: inset 2px 0 0 0 var(--mud-palette-warning);
}

[dir="rtl"] .server-tree-node.search-match-row[b-imqqpsm4d2] {
    box-shadow: inset -2px 0 0 0 var(--mud-palette-warning);
}

.server-tree-node.search-match-row .tree-node-name[b-imqqpsm4d2] {
    font-weight: 600;
    color: var(--mud-palette-warning-text);
}

.server-tree-container[b-imqqpsm4d2] {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.server-tree-node[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    user-select: none;
    min-height: 24px;
}

.server-tree-node:hover[b-imqqpsm4d2] {
    background: var(--mud-palette-action-default-hover);
}

.tree-expander[b-imqqpsm4d2] {
    width: 20px;
    min-width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tree-node-name[b-imqqpsm4d2] {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.tree-node-count[b-imqqpsm4d2] {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-inline-start: 4px;
}

/* ----------------------------------------------------------------- */
/*        Per-layer feature sub-tree (one row per GeoJSON feature)    */
/* ----------------------------------------------------------------- */

/* Compact leaf row: label stretches, edit/remove buttons sit at the row end.
   The action cluster only shows on hover so the tree stays uncluttered. */
.feature-tree-node[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    padding: 0 4px;
    border-radius: 4px;
    user-select: none;
    min-height: 22px;
}

.feature-tree-node:hover[b-imqqpsm4d2] {
    background: var(--mud-palette-action-default-hover);
}

.feature-row-icon[b-imqqpsm4d2] {
    opacity: 0.7;
    color: var(--mud-palette-text-secondary);
}

/* Action buttons: reserved space, revealed on row hover / keyboard focus so
   they never jump the layout but stay out of the way until wanted. */
.feature-row-actions[b-imqqpsm4d2] {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 4px;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

.feature-tree-node:hover .feature-row-actions[b-imqqpsm4d2],
.feature-row-actions:focus-within[b-imqqpsm4d2] {
    opacity: 1;
}

/* Shrink the MudIconButtons so two fit on a 22px-tall leaf row. */
.feature-row-actions[b-imqqpsm4d2]  .mud-icon-button {
    padding: 2px;
}

.feature-row-actions[b-imqqpsm4d2]  .mud-icon-button .mud-icon-root {
    font-size: 1rem;
}

/* ================================================================= */
/*              3D Model Transform Panel (gizmo + numbers)           */
/* ================================================================= */

/* Appears in the left column below the layer tree only while a placed 3D
   model is the selected layer. Kept compact so the MOVE/ROTATE/SCALE toggle
   and the seven numeric fields fit without pushing the tree off-screen. */
.model-transform-panel[b-imqqpsm4d2] {
    border-top: 1px solid var(--mud-palette-divider);
    padding: 6px 8px 10px;
}

/* The MOVE / ROTATE / SCALE mode toggle. Wraps on a very narrow panel rather
   than overflowing the column. */
.transform-mode-row[b-imqqpsm4d2] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 8px;
}

/* One numeric field per row keeps six-decimal lat/lon readable in the narrow
   left column; a two-column grid would truncate them. */
.transform-fields[b-imqqpsm4d2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ================================================================= */
/*                Building Levels Panel (modeler)                    */
/* ================================================================= */

/* Appears in the left column once a building exists. Lists the storeys and the
   active-level elevation editor. */
.building-levels-panel[b-imqqpsm4d2] {
    border-top: 1px solid var(--mud-palette-divider);
    padding: 6px 8px 10px;
}

.building-levels-list[b-imqqpsm4d2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 6px 0;
    max-height: 180px;
    overflow-y: auto;
}

/* One storey row — click to make it the active level. Mirrors the layer-tree
   row affordance so it feels the same as selecting a layer. */
.building-level-row[b-imqqpsm4d2] {
    display: flex;
    align-items: center;
    padding: 3px 4px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
}

.building-level-row:hover[b-imqqpsm4d2] {
    background: var(--mud-palette-action-default-hover);
}

.building-element-counts[b-imqqpsm4d2] {
    margin-top: 8px;
    opacity: 0.7;
}
/* _content/AspireChatApp.Razor/Components/Tools/Medical/CtScannerTool/CtScannerToolComp.razor.rz.scp.css */
/* =================================================================
   CtScannerToolComp.razor.css

   Three-panel tool shell: editor | centre (3D + reconstruction) | chat.

   These rules are deliberate DUPLICATES of the equivalent HumanModelTool /
   LosVisibilityTool layout rules, renamed to the ct- prefix. Blazor CSS
   isolation scopes each stylesheet to its own generated attribute, so a
   component can never inherit another component's classes.
   ================================================================= */

.ct-container[b-ngkf12yt8k] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* Panel ORDER stays left-to-right under RTL — the display-mode windowing in
   main.css addresses panels by index, so row-reverse would mismatch it. */
.ct-container[dir="rtl"][b-ngkf12yt8k] {
    flex-direction: row;
}

/* ---------------- left panel ---------------- */

.ct-left-panel[b-ngkf12yt8k] {
    flex: 1 1 0;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width .3s ease, min-width .3s ease, max-width .3s ease;
    overflow: hidden;
}

.ct-left-panel.collapsed[b-ngkf12yt8k] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* ::deep is required for anything MudTabs renders: a child component never
   receives this component's scope attribute. */
[b-ngkf12yt8k] .ct-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-ngkf12yt8k] .ct-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
}

[b-ngkf12yt8k] .ct-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------------- centre panel ---------------- */

.ct-center-panel[b-ngkf12yt8k] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.panel-header[b-ngkf12yt8k] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: .85rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.ct-header-spacer[b-ngkf12yt8k] {
    flex: 1;
}

[b-ngkf12yt8k] .ct-center-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs renders panel wrappers between .mud-tabs-panels and our panel content.
   Each one needs to be a full-height flex container, or the chain from the tool
   shell down to the three.js viewport is broken and the canvas collapses to a
   few pixels tall (measured: 25px and 1px) even though every ancestor panel is
   correctly sized. Forcing height:100% + flex on the intermediate wrappers is
   what gives the viewport a real basis to grow into. */
[b-ngkf12yt8k] .ct-center-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
}

[b-ngkf12yt8k] .ct-center-tabs .mud-tabs-panels > div {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

[b-ngkf12yt8k] .ct-center-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------------- 3D scene ---------------- */

.ct-scene-split[b-ngkf12yt8k] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    gap: 4px;
    padding: 4px;
    box-sizing: border-box;
}

.ct-scene-half[b-ngkf12yt8k] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
}

.ct-scene-caption[b-ngkf12yt8k] {
    flex: 0 0 auto;
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    padding: 3px 0;
    color: var(--mud-palette-text-primary);
}

/* three.js appends its canvas here. touch-action:none so a touch drag orbits
   the camera instead of scrolling the page. */
/* min-height is a floor, not a layout crutch: if an ancestor ever fails to
   propagate its height again, the scene stays usable instead of collapsing to a
   sliver. */
.ct-viewport[b-ngkf12yt8k] {
    flex: 1 1 auto;
    min-height: 220px;
    width: 100%;
    position: relative;
    overflow: hidden;
    touch-action: none;
}

.ct-viewport[b-ngkf12yt8k]  canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.ct-viewport-overlay[b-ngkf12yt8k] {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    z-index: 4;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(128, 128, 128, .5);
    border-radius: 4px;
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* The overlay sits on a light 3D scene in both themes, so keep its text dark. */
.ct-checkbox[b-ngkf12yt8k] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .74rem;
    color: #222;
    cursor: pointer;
    white-space: nowrap;
}

.ct-camera-row[b-ngkf12yt8k] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
}

.ct-camera-label[b-ngkf12yt8k] {
    font-size: .70rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.ct-slider[b-ngkf12yt8k] {
    flex: 1;
    height: 22px;
    direction: ltr;
    min-width: 50px;
}

/* ---------------- reconstruction triptych ---------------- */

.ct-recon-grid[b-ngkf12yt8k] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 200px;
    gap: 6px;
    padding: 6px;
    box-sizing: border-box;
}

.ct-recon-cell[b-ngkf12yt8k] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.ct-recon-caption[b-ngkf12yt8k] {
    flex: 0 0 auto;
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    padding-bottom: 3px;
    color: var(--mud-palette-text-primary);
}

.ct-recon-image[b-ngkf12yt8k] {
    flex: 1 1 auto;
    min-height: 0;
    background: #000;
    border: 1px solid #808080;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ct-recon-image img[b-ngkf12yt8k] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Slices are small maps blown up: keep the voxels crisp rather than
       letting the browser smooth away the reconstruction detail. */
    image-rendering: pixelated;
}

.ct-recon-slider-row[b-ngkf12yt8k] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 8px;
}

.ct-slice-readout[b-ngkf12yt8k] {
    min-width: 66px;
    text-align: end;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    color: var(--mud-palette-text-secondary);
}

.ct-results[b-ngkf12yt8k] {
    flex: 0 0 auto;
    padding: 4px 8px 8px;
    max-height: 96px;
    overflow-y: auto;
}

.ct-results-title[b-ngkf12yt8k] {
    font-size: .74rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    padding-bottom: 2px;
}

.ct-results-row[b-ngkf12yt8k] {
    display: flex;
    gap: 10px;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    color: var(--mud-palette-text-secondary);
    padding: 1px 0;
}

/* ---------------- splitters + chat ---------------- */

.panel-splitter[b-ngkf12yt8k] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background .15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-ngkf12yt8k],
.panel-splitter:active[b-ngkf12yt8k] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-ngkf12yt8k] {
    display: none;
}

.ct-chat-panel[b-ngkf12yt8k] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* !important: a splitter drag writes inline width/min-width/max-width, which
   would otherwise win over the collapsed state. */
.ct-chat-panel.collapsed[b-ngkf12yt8k] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

.ct-chat-host[b-ngkf12yt8k] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Medical/CtScannerTool/Editors/CtScannerEditorComp.razor.rz.scp.css */
/* =================================================================
   CtScannerEditorComp.razor.css

   Compact single-row parameter controls for the CT scanner editor.

   These are deliberate DUPLICATES of the LosVisibilityTool's .los-row /
   .los-input rules, renamed to the ct- prefix. Blazor CSS isolation scopes
   every stylesheet to its own generated attribute, so a component can never
   inherit another component's classes even when the names match — duplicating
   the rules is the correct move here, not a copy-paste smell.
   ================================================================= */

/* ---------------- tab shell ---------------- */

.ct-editor-root[b-v1rk24tgjs] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ::deep throughout: MudTabs renders its own DOM, which never carries this
   component's scope attribute. */
[b-v1rk24tgjs] .ct-editor-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

[b-v1rk24tgjs] .ct-editor-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
}

[b-v1rk24tgjs] .ct-editor-tabs .mud-tabs-panels > div {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

[b-v1rk24tgjs] .ct-editor-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Four tabs in a ~300 px panel: shrink the labels so they fit without the
   toolbar's scroll arrows stealing width from the content. */
[b-v1rk24tgjs] .ct-editor-tabs .mud-tab {
    min-width: 0;
    padding: 0 8px;
    font-size: .72rem;
    letter-spacing: 0;
}

.ct-editor-scroll[b-v1rk24tgjs] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px 10px;
}

/* ---------------- groups ---------------- */

.ct-group[b-v1rk24tgjs] {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ct-group:last-child[b-v1rk24tgjs] {
    border-bottom: none;
}

.ct-group-title[b-v1rk24tgjs] {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-primary);
    margin: 4px 0 4px;
}

/* Native <details> rather than MudExpansionPanel: the open state then lives in
   the DOM and survives the StateHasChanged that fires on every recompute, where
   a component-managed bool would snap the panel shut on each scan tick. */
.ct-details[b-v1rk24tgjs] {
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 6px;
}

/* Element-qualified so it beats the user-agent `display: list-item`, which
   would otherwise stop margin-inline-start from right-aligning the value. */
summary.ct-details-title[b-v1rk24tgjs] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-primary);
    padding: 3px 0;
    user-select: none;
}

.ct-details-value[b-v1rk24tgjs] {
    margin-inline-start: auto;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ---------------- compact rows ---------------- */

.ct-row[b-v1rk24tgjs] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.ct-row-label[b-v1rk24tgjs] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-input[b-v1rk24tgjs] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    /* Numbers must read left-to-right even under the RTL default culture. */
    direction: ltr;
}

.ct-input:focus[b-v1rk24tgjs] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.ct-slider[b-v1rk24tgjs] {
    flex: 1;
    height: 24px;
    direction: ltr;
    min-width: 60px;
}

.ct-slider-value[b-v1rk24tgjs] {
    min-width: 34px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
}

/* ---------------- picture choices (orientation / entry) ---------------- */

/* Two across: the diagrams are what make "left decubitus" instantly readable,
   so they get real space rather than being squeezed next to a combo box. */
.ct-choice-grid[b-v1rk24tgjs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 2px 0 4px;
}

.ct-choice[b-v1rk24tgjs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 5px;
    cursor: pointer;
    font-size: .72rem;
    text-align: center;
    transition: border-color .15s, background .15s;
}

.ct-choice:hover[b-v1rk24tgjs] {
    background: var(--mud-palette-action-default-hover);
}

.ct-choice.selected[b-v1rk24tgjs] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.ct-choice img[b-v1rk24tgjs] {
    width: 100%;
    max-height: 72px;
    object-fit: contain;
    /* The source diagrams are dark line art on white, so they would vanish
       against the dark theme without a light plate behind them. */
    background: #fff;
    border-radius: 3px;
}

.ct-patient-face[b-v1rk24tgjs] {
    display: flex;
    justify-content: center;
    padding: 4px 0 2px;
}

.ct-patient-face img[b-v1rk24tgjs] {
    max-width: 96px;
    max-height: 96px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background: #fff;
}

/* ---------------- tumor list ---------------- */

.ct-tumor-list[b-v1rk24tgjs] {
    max-height: 108px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    margin-bottom: 4px;
}

.ct-tumor-item[b-v1rk24tgjs] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    font-size: .74rem;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ct-tumor-item:last-child[b-v1rk24tgjs] {
    border-bottom: none;
}

.ct-tumor-item:hover[b-v1rk24tgjs] {
    background: var(--mud-palette-action-default-hover);
}

.ct-tumor-item.selected[b-v1rk24tgjs] {
    background: var(--mud-palette-primary-hover);
}

.ct-tumor-name[b-v1rk24tgjs] {
    flex: 0 0 auto;
    font-weight: 600;
}

.ct-tumor-pos[b-v1rk24tgjs] {
    flex: 1;
    text-align: end;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    color: var(--mud-palette-text-secondary);
}

.ct-tumor-radius[b-v1rk24tgjs] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    color: var(--mud-palette-text-secondary);
}

/* ---------------- buttons, status, hints ---------------- */

.ct-button-row[b-v1rk24tgjs] {
    display: flex;
    gap: 6px;
    padding: 4px 0;
    flex-wrap: wrap;
}

.ct-progress[b-v1rk24tgjs] {
    margin: 6px 0 4px;
}

.ct-status[b-v1rk24tgjs] {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    min-height: 1.1em;
}

.ct-hint[b-v1rk24tgjs] {
    font-size: .70rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    padding: 3px 0 1px;
}

.ct-hint-warn[b-v1rk24tgjs] {
    color: var(--mud-palette-warning);
}

.ct-warning[b-v1rk24tgjs] {
    font-size: .72rem;
    line-height: 1.35;
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning);
    border-radius: 4px;
    padding: 4px 6px;
    margin: 4px 0 2px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Mobile/DeviceSensorsTool/Charts/DeviceSensorChartComp.razor.rz.scp.css */
/* ================================================================= */
/*                 DeviceSensorChartComp.razor.css                    */
/*   The sensor chart: a series tab strip over one Plotly canvas,     */
/*   with the figures the plot cannot state underneath.               */
/* ================================================================= */

.dsc-host[b-z87pc8vg98] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* ----------------------------------------------------------------- */
/*                 GROUP TABS (outer)                                 */
/* ----------------------------------------------------------------- */

/* Three groups, so they share the width evenly and never scroll - the outer
   level must always be fully visible, because it is what tells the reader
   which family of series they are in. */
.dsc-groups[b-z87pc8vg98] {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dsc-group[b-z87pc8vg98] {
    flex: 1 1 0;
    padding: 7px 6px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: none;

    /* Underline AND colour: colour alone is the one cue a reader who cannot
       separate those hues has no access to. */
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.dsc-group:hover[b-z87pc8vg98] {
    color: var(--mud-palette-text-primary);
}

.dsc-group.active[b-z87pc8vg98] {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.dsc-group:focus-visible[b-z87pc8vg98] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* ----------------------------------------------------------------- */
/*                 SERIES TABS (inner)                                */
/* ----------------------------------------------------------------- */

/* At most five pills now that the series are grouped, so they WRAP rather than
   scroll: a wrapped second row is always fully visible, where a scroller can
   hide the selected pill off the edge - which is exactly what the flat
   eleven-button strip did. */
.dsc-tabs[b-z87pc8vg98] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 4px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dsc-tab[b-z87pc8vg98] {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.dsc-tab:hover[b-z87pc8vg98] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

/* The selected tab is marked by FILL, not by colour alone: a colour-only cue is invisible to
   a reader who cannot separate the two, and this strip has no other selected-state signal. */
.dsc-tab.active[b-z87pc8vg98] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.dsc-tab:focus-visible[b-z87pc8vg98] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ----------------------------------------------------------------- */
/*                      PLOT                                          */
/* ----------------------------------------------------------------- */

/* Plotly sizes itself to its container, so the container must resolve to a real height.
   min-height:0 lets this flex child shrink; without it the canvas keeps its content height
   and pushes the summary off the bottom of the panel. The floor keeps the plot readable when
   the panel is short — below about this it is axis labels and nothing else. */
.dsc-plot-area[b-z87pc8vg98] {
    flex: 1 1 auto;
    min-height: 220px;
    width: 100%;
    position: relative;
}

/* ----------------------------------------------------------------- */
/*                      SUMMARY                                       */
/* ----------------------------------------------------------------- */

.dsc-summary[b-z87pc8vg98] {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 6px 16px;
    padding: 6px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dsc-summary-item[b-z87pc8vg98] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.dsc-summary-label[b-z87pc8vg98] {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Tabular and LTR for the same reasons as the panel readouts: these counts change as samples
   arrive, and a bare number is a latin/numeric run that an rtl context would otherwise
   re-order. */
.dsc-summary-value[b-z87pc8vg98] {
    font-family: var(--mud-typography-default-family), monospace;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}
/* _content/AspireChatApp.Razor/Components/Tools/Mobile/DeviceSensorsTool/DeviceSensorsToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                DeviceSensorsToolComp.razor.css                     */
/*   Layout styles for the DeviceSensors tool (RTL aware):            */
/*   left readout tabs | three.js device viewport | ChatBot.          */
/*                                                                    */
/*   Mirrors RobotSimulationToolComp.razor.css — the rules are        */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names elsewhere would never match these          */
/*   elements. The centre column here is a three.js canvas showing    */
/*   the user's own device, not a Cesium globe.                       */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.dev-container[b-m702t88rwr] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;

    /* Sized to what is ACTUALLY LEFT below the tool's own top edge, not to a full viewport.
       MudBlazor's layout carries min-height:100vh, so when anything above the page eats height
       — a browser warning bar, an extension strip, the mobile app's own chrome — the layout
       still demands a whole viewport and the page runs past the bottom, putting the transport
       controls under the fold with no way to scroll to them.

       dvh, not vh: this tool is FOR phones, where the address bar collapses on scroll and vh
       is measured against the taller, pre-collapse window. The vh line before it is the
       fallback for engines without dvh. */
    height: 100%;
    max-height: calc(100vh - var(--gv-tool-top, 0px));
    max-height: calc(100dvh - var(--gv-tool-top, 0px));
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - readouts on the right. The dir="rtl" attribute alone reverses the flex row
   (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND time and
   cancels out, leaving the LTR layout. */
.dev-container[dir="rtl"][b-m702t88rwr] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The readouts open at 1/3 and the viewport takes the rest (flex 1 / 2): the 3-D device needs
   the room, and the readouts are compact. A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the other keeps the remainder. */
.dev-left-panel[b-m702t88rwr] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .dev-left-panel[b-m702t88rwr] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.dev-left-panel.collapsed[b-m702t88rwr] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered elements (root div,
   .mud-tabs-panels, panel divs) never receive this component's CSS scope attribute —
   unscoped rules would silently not match and the readouts get clipped with no scrollbar. */
[b-m702t88rwr] .dev-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-m702t88rwr] .dev-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The tab panels scroll internally: on a phone the SENSORS tab's four cards are taller than
   the panel, and without this they are clipped rather than scrollable. */
[b-m702t88rwr] .dev-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    gap: 8px;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-m702t88rwr] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-m702t88rwr] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------------------------------------------------------- */
/*                      READOUT CARDS                                 */
/* ----------------------------------------------------------------- */

.dev-card[b-m702t88rwr] {
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 10px;
    flex: 0 0 auto;
}

.dev-card-header[b-m702t88rwr] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

/* The "this is live" dot. Beats a spinner: it says data is arriving without implying the tool
   is busy or blocked. */
.dev-live-dot[b-m702t88rwr] {
    width: 8px;
    height: 8px;
    margin-inline-start: auto;
    border-radius: 50%;
    background: var(--mud-palette-success);
    animation: dev-pulse-b-m702t88rwr 1.6s ease-in-out infinite;
}

@keyframes dev-pulse-b-m702t88rwr {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* Respect a user who has asked for less motion: a pulsing dot is decoration, and for some
   readers it is a genuine barrier to using the panel at all. */
@media (prefers-reduced-motion: reduce) {
    .dev-live-dot[b-m702t88rwr] {
        animation: none;
    }
}

/* ---------- The three attitude angles, side by side ---------- */
.dev-readout-grid[b-m702t88rwr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.dev-readout[b-m702t88rwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    background: var(--mud-palette-surface);
    border-radius: 6px;
}

.dev-readout-row[b-m702t88rwr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    font-size: .8rem;
}

.dev-readout-label[b-m702t88rwr] {
    font-size: .7rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Every live number is tabular and LTR.

   tabular-nums: these values change several times a second, and proportional digits change
   width as they do, so the whole row jitters sideways while it updates.

   direction:ltr: a signed decimal is a latin/numeric run. On a Hebrew page the surrounding
   rtl context otherwise moves the minus sign to the right-hand end, so -12.5 renders as 12.5-
   and reads as a positive angle. */
.dev-readout-value[b-m702t88rwr] {
    font-family: var(--mud-typography-default-family), monospace;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    font-weight: 600;
    white-space: nowrap;
}

.dev-note[b-m702t88rwr] {
    margin-top: 6px;
    font-size: .7rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Axis legend in the INFO tab ---------- */
.dev-axis-row[b-m702t88rwr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: .78rem;
}

/* The chips carry the SAME colours as the arrows in the viewport and the traces on the chart.
   Hard-coded rather than themed for exactly that reason — see the colour constants in
   DeviceSensorChartComp. White text is legible on all three. */
.dev-axis-chip[b-m702t88rwr] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

/* ---------- Compact numeric input ----------
   A native input rather than MudTextField: MudTextField renders ~89 px tall, which pushes the
   card past the panel on a phone. This is the house 24 px control, matching .los-input. */
.dev-input-label[b-m702t88rwr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.dev-input[b-m702t88rwr] {
    width: 90px;
    height: 24px;
    padding: 0 6px;
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;

    /* !important, and scoped to this input: a page-level rtl rule sets text-align:right on
       every input, which right-aligns a number field that reads left-to-right. */
    direction: ltr !important;
    text-align: left !important;
}

.dev-input:focus[b-m702t88rwr] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* ----------------------------------------------------------------- */
/*                      CHART TAB                                     */
/* ----------------------------------------------------------------- */

/* The chart fills its tab. Plotly sizes itself to its container, so the container must have a
   real height — without min-height:0 on the flex chain the canvas collapses to zero and the
   plot renders as a blank strip. */
.dev-chart-wrap[b-m702t88rwr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The GRAPHS and THEORY panes must not scroll themselves: the chart sizes to
   its container, and ToolTheoryPanelComp hosts an iframe that manages its own
   scrolling. A wrapper scrollbar around either produces two nested scrollers. */
.dev-right-pane[data-testid="dev-graphs-pane"][b-m702t88rwr],
.dev-right-pane[data-testid="dev-theory-pane"][b-m702t88rwr] {
    overflow: hidden;
}

/* Theory fills its pane edge to edge - the iframe draws its own page margins. */
.dev-right-pane[data-testid="dev-theory-pane"][b-m702t88rwr] {
    padding: 0;
}

/* The chart does NOT. Zero padding here ran the plot's border box and its rotated
   Y-axis title flush into the panel edge, where the title was clipped. The side
   padding is what keeps the whole plot - box, ticks and titles - inside the panel
   it belongs to. */
.dev-right-pane[data-testid="dev-graphs-pane"][b-m702t88rwr] {
    padding: 4px 8px 8px;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-m702t88rwr] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-m702t88rwr],
.panel-splitter:active[b-m702t88rwr] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-m702t88rwr] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                 CENTRE PANEL (3D VIEWPORT)                         */
/* ----------------------------------------------------------------- */

.dev-viewport-panel[b-m702t88rwr] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.dev-viewport-header[b-m702t88rwr] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 40px;
    padding: 4px 10px;
    overflow: hidden;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.dev-viewport-title[b-m702t88rwr] {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The status DOT. All that is left of the status sentence: it says the tool has something to
   report without spending a line of a 360 px header on prose. The full text is on its
   tooltip, in data-status, and in aria-label. */
.dev-status-dot[b-m702t88rwr] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-inline-start: auto;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
    cursor: help;
}

.dev-status-dot.live[b-m702t88rwr] {
    background: var(--mud-palette-success);
    opacity: 1;
}

/* Positioning context for the viewport AND its overlay, so `bottom` on the overlay means the
   bottom of the rendered scene rather than the bottom of the panel (which is lower, by the
   height of the header). */
.dev-viewport-stack[b-m702t88rwr] {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
}

/* three.js appends its canvas here. min-height:0 lets the flex child actually shrink, and the
   explicit block sizing is what the ResizeObserver reads to keep the renderer in step with a
   splitter drag. */
.dev-viewport[b-m702t88rwr] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;

    /* The orbit control owns every gesture inside the canvas. Without this a drag to turn the
       device scrolls the page on a touch screen instead, which is the one interaction the
       viewport exists for. */
    touch-action: none;
}

.dev-viewport-overlay[b-m702t88rwr] {
    position: absolute;
    inset: 0;
    display: flex;

    /* 🔴 PINNED TO THE TOP, not centred.
       Centred, the hint sat exactly over the axis origin - the one part of the scene
       a user needs to read - so the text and the XYZ triad fought for the same pixels.
       The hint is secondary to the model, so it gets the empty space above it. */
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);

    /* Clicks fall THROUGH to the canvas: the overlay is a hint, and swallowing the drag that
       orbits the scene would make the viewport feel dead before the sensors are armed. */
    pointer-events: none;
    background: color-mix(in srgb, var(--mud-palette-surface) 78%, transparent);
}

/* ----------------------------------------------------------------- */
/*                      CHAT PANEL                                    */
/* ----------------------------------------------------------------- */

.dev-chat-panel[b-m702t88rwr] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1);
}

[dir="rtl"] .dev-chat-panel[b-m702t88rwr] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.dev-chat-panel.collapsed[b-m702t88rwr] {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    border: none;
}

.dev-chat-host[b-m702t88rwr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PHONE                                         */
/* ----------------------------------------------------------------- */

/* This tool's primary target. Below 560 px the three attitude readouts stay side by side —
   they are the tool's headline numbers and stacking them would push the IMU and GPS cards off
   the screen — but everything around them tightens. */
@media (max-width: 560px) {
    .dev-viewport-header[b-m702t88rwr] {
        gap: 4px;
        padding-inline: 6px;
    }

    [b-m702t88rwr] .dev-tab-panel {
        padding: 6px;
        gap: 6px;
    }

    .dev-card[b-m702t88rwr] {
        padding: 8px;
    }

    .dev-readout-value[b-m702t88rwr] {
        font-size: .78rem;
    }
}

/* ----------------------------------------------------------------- */
/*        THIRD PANEL: GRAPHS / CAMERA / 3D MODEL / THEORY            */
/* ----------------------------------------------------------------- */

/* PERMANENT, so it takes a share of the row unconditionally rather than
   collapsing to zero like the chat panel below. flex 1 against the viewport's
   flex 2: the 3-D view stays the largest surface, because it is the thing the
   attitude is read off, while the outputs still get enough width for a plot to
   be legible. A splitter drag writes inline width/min/max and pins it. */
.dev-output-panel[b-m702t88rwr] {
    flex: 1 1 0;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
}

[dir="rtl"] .dev-output-panel[b-m702t88rwr] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ----------------------------------------------------------------- */
/*              PANEL TAB STRIPS (output panel)                       */
/* ----------------------------------------------------------------- */

.dev-right-tabs[b-m702t88rwr] {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    overflow-x: auto;
    overflow-y: hidden;

    /* The strip is a horizontal scroller inside a vertical one: without this a
       sideways drag on it scrolls the pane instead. */
    touch-action: pan-x;
    scrollbar-width: thin;
}

/* flex-basis 0 with a floor: four tabs share the strip evenly until the panel
   gets narrow, at which point the strip scrolls sideways rather than shrinking
   the labels into ellipsis. */
.dev-right-tab[b-m702t88rwr] {
    flex: 1 1 0;
    min-width: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: none;

    /* The selected tab is marked by an underline AND a colour change. Colour
       alone would be the only cue, and it is the one a reader who cannot
       separate those two hues has no access to. */
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.dev-right-tab:hover[b-m702t88rwr] {
    color: var(--mud-palette-text-primary);
}

.dev-right-tab.active[b-m702t88rwr] {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.dev-right-tab:focus-visible[b-m702t88rwr] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Each pane fills what is left below the tab strip. */
.dev-right-pane[b-m702t88rwr] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    gap: 8px;
}

/* display:none, NOT removal from the DOM.

   The camera pane holds the <video> carrying the live MediaStream, and the chat
   pane holds a ChatBot with a conversation and a configured kernel. Unmounting
   either on a tab switch would drop the stream (re-prompting for the camera) or
   the conversation. Hiding costs nothing: a display:none subtree is not laid
   out or painted, and the video element keeps its track either way. */
.dev-right-pane.hidden[b-m702t88rwr] {
    display: none;
}

/* The chat pane must not scroll itself — ChatBotComp manages its own message
   scroller, and a second scroller around it produces two nested scrollbars and
   a message list that cannot be scrolled to the bottom. */
.dev-right-pane[data-testid="dev-chat-pane"][b-m702t88rwr] {
    overflow: hidden;
    padding: 0;
}

/* ----------------------------------------------------------------- */
/*                      CAMERA                                        */
/* ----------------------------------------------------------------- */

.dev-camera-card[b-m702t88rwr] {
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 10px;
    flex: 0 0 auto;
}

/* A fixed 4:3 box, so the card does not resize the instant the stream starts
   and the video reports its real dimensions. */
.dev-video-wrap[b-m702t88rwr] {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: #0b0f14;
}

.dev-video[b-m702t88rwr] {
    width: 100%;
    height: 100%;

    /* cover, not contain: the depth model is fed a CENTRE CROP of the frame, so
       showing the same crop here means the viewfinder frames exactly what is
       being mapped. contain would show borders the scan never sees. */
    object-fit: cover;
    display: block;
}

.dev-video-overlay[b-m702t88rwr] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);

    /* The overlay is a hint, not a control. */
    pointer-events: none;
}

/* Tracking state. Colour AND wording both change — "Locked" against
   "Searching..." carries the state on its own for a reader who cannot separate
   the two hues, so the colour is reinforcement rather than the only signal. */
.dev-track-ok[b-m702t88rwr] {
    color: var(--mud-palette-success);
}

.dev-track-lost[b-m702t88rwr] {
    color: var(--mud-palette-warning);
}

/* The device model, in the Sensors tab beside the angles it illustrates.
   A fixed height rather than a flex share: this sits in a scrolling column of
   cards, where a flex-sized canvas would collapse to nothing. */
.dev-device-viewport[b-m702t88rwr] {
    width: 100%;
    height: 200px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

/* Sub-tabs inside the Sensors tab. The panel scrolls; the strip does not. */
.dev-subtabs[b-m702t88rwr] {
    margin-bottom: 4px;
}

.dev-subtab-panel[b-m702t88rwr] {
    padding-top: 8px;
}

/* The Cesium map in the GPS sub-tab. A fixed height for the same reason as the
   device viewport: it sits in a scrolling column of cards, where a flex-sized
   canvas collapses to nothing. */
.dev-gps-map[b-m702t88rwr] {
    width: 100%;
    height: 260px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

/* An unavailable value, dimmed so it does not read as a measurement. */
.dev-readout-muted[b-m702t88rwr] {
    opacity: 0.6;
    font-style: italic;
}

/* Transport row: three equal buttons, so no single action reads as the default. */
.dev-transport[b-m702t88rwr] {
    display: flex;
    gap: 6px;
}

.dev-transport .mud-button-root[b-m702t88rwr] {
    flex: 1 1 0;
    min-width: 0;
}

/* The recording clock leads the Statistics tab, so it is set large and tabular -
   a proportional font makes the digits jitter as the seconds change. */
.dev-recording-clock[b-m702t88rwr] {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    padding: 6px 0 2px;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary);
}

/* The reconstruction-mode menu, in the viewport header beside the title. */
.dev-mode-menu[b-m702t88rwr] {
    margin-inline-start: auto;
    font-size: .75rem;
    text-transform: none;
}

/* ----------------------------------------------------------------- */
/*                      CAPTURED-FILE ROWS                            */
/* ----------------------------------------------------------------- */

/* One file per LINE: name on one side, size on the other.
   The shared .dev-readout is flex-direction:column, which stacks the label above
   the value - fine for a two-column grid of live figures, but for five files it
   doubled the height and pushed the transport controls off the panel. */
.dev-file-row[b-m702t88rwr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 4px;
    border-radius: 4px;
}

.dev-file-row:nth-child(even)[b-m702t88rwr] {
    background: var(--mud-palette-background-gray);
}

.dev-file-row .dev-readout-label[b-m702t88rwr] {
    font-size: .72rem;
    white-space: nowrap;
}

/* The size is the value being compared down the column, so it stays tabular and
   LTR even under a right-to-left page. */
.dev-file-row .dev-readout-value[b-m702t88rwr] {
    font-size: .74rem;
    white-space: nowrap;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

/* The card itself gets tighter, since it now holds five short lines. */
.dev-card .dev-file-row + .dev-file-row[b-m702t88rwr] {
    margin-top: 1px;
}

/* ----------------------------------------------------------------- */
/*             RECORDING TAB: FIT WITHOUT SCROLLING                   */
/* ----------------------------------------------------------------- */

/* The Recording sub-tab carries five cards - clock, files, transport, clip,
   export - and on a phone-height panel they ran past the bottom, hiding the very
   controls the tab exists for. These rules tighten only THIS tab; the other
   sub-tabs keep the roomier default. */
[data-testid="dev-subtab-recording"] .dev-card[b-m702t88rwr] {
    padding: 7px 9px;
}

[data-testid="dev-subtab-recording"] .dev-card + .dev-card[b-m702t88rwr] {
    margin-top: 6px;
}

/* The clock still leads, but a 2rem line plus its own padding cost more height
   than the reading is worth once five cards have to share the panel. */
[data-testid="dev-subtab-recording"] .dev-recording-clock[b-m702t88rwr] {
    font-size: 1.6rem;
    padding: 2px 0 0;
}

/* Measured at 466x726 - the panel width in the report - the five cards came to
   553 px against 505 px of room, so the export button sat below the fold. These
   trim the ~71 px of overflow without losing a figure. */

/* The clock's card header duplicates what the big numeral already says, so the
   numeral carries it alone. */
[data-testid="dev-subtab-recording"] .dev-recording-clock[b-m702t88rwr] {
    font-size: 1.5rem;
    padding: 0;
    line-height: 1.15;
}

[data-testid="dev-subtab-recording"] .dev-card[b-m702t88rwr] {
    padding: 6px 9px;
}

[data-testid="dev-subtab-recording"] .dev-card + .dev-card[b-m702t88rwr] {
    margin-top: 5px;
}

[data-testid="dev-subtab-recording"] .dev-card-header[b-m702t88rwr] {
    margin-bottom: 3px;
}

[data-testid="dev-subtab-recording"] .dev-file-row[b-m702t88rwr] {
    padding: 1px 4px;
}

/* The hint under the clip button repeats what the button says; at this height it
   costs a line that the export button needs. */
[data-testid="dev-subtab-recording"] .dev-note[b-m702t88rwr] {
    margin: 2px 0 0;
    font-size: .68rem;
    line-height: 1.25;
}

[data-testid="dev-subtab-recording"] .dev-transport .mud-button-root[b-m702t88rwr],
[data-testid="dev-subtab-recording"] .dev-card .mud-button-root[b-m702t88rwr] {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* The last 11 px. The clip card carries a hint that repeats its button, and the
   clear button a full-width row of its own; trimming both closes the gap and the
   whole tab fits with nothing hidden. */
[data-testid="dev-subtab-recording"] .dev-card + .dev-card[b-m702t88rwr] {
    margin-top: 4px;
}

[data-testid="dev-subtab-recording"] .dev-transport[b-m702t88rwr] {
    gap: 5px;
}

[data-testid="dev-subtab-recording"] .mud-button-root.mt-2[b-m702t88rwr] {
    margin-top: 4px !important;
}

/* ----------------------------------------------------------------- */
/*                 START STRIP (Attitude sub-tab)                    */
/* ----------------------------------------------------------------- */

.dev-start-card[b-m702t88rwr] {
    padding: 6px;
}

/* ----------------------------------------------------------------- */
/*                 PLAYBACK SUB-TAB                                  */
/* ----------------------------------------------------------------- */

/* Native <select>, sized to sit beside the two buttons without pushing
   them off a 360 px row: a fixed narrow width, the buttons take the rest. */
.dev-playback-speed[b-m702t88rwr] {
    flex: 0 0 64px;
    min-width: 0;
    height: 36px;
    padding: 0 4px;
    font: inherit;
    font-size: .85rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
}

/* The seek bar spans the card. A tall hit area, because on a phone the
   default 16 px track is hard to land a finger on. */
.dev-playback-slider[b-m702t88rwr] {
    display: block;
    width: 100%;
    height: 28px;
    margin: 8px 0 2px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.dev-playback-slider:disabled[b-m702t88rwr] {
    cursor: default;
    opacity: 0.5;
}

/* Tabular digits so the position does not jitter as it counts. */
.dev-playback-clock[b-m702t88rwr] {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The file picker is a <label> dressed as an outlined button: the real
   <input type=file> inside it is transparent and covers the label, so a
   tap anywhere on the button opens the picker on every platform. */
.dev-file-pick[b-m702t88rwr] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 10px;
    font-size: .85rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
}

.dev-file-pick.disabled[b-m702t88rwr] {
    opacity: 0.5;
    cursor: default;
}

.dev-file-pick[b-m702t88rwr]  .dev-file-input,
.dev-file-pick .dev-file-input[b-m702t88rwr] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ----------------------------------------------------------------- */
/*          SCROLLING: every panel and tab reaches all of its data    */
/* ----------------------------------------------------------------- */

/* 🔴 THE SUB-TABS MUST NOT SHRINK. MudTabs' root carries overflow:hidden, and a
   flex child with overflow:hidden has an automatic min-height of 0 - so inside
   the SENSORS tab (a flex column) the sub-tab block shrank to whatever height
   was left and CUT OFF the rest, while the tab panel around it - the actual
   scroller - saw nothing to scroll. Measured on a 740x360 landscape phone: 140
   of 629 px visible, with the readouts, the recording controls and playback
   unreachable. At its natural height the block overflows the tab panel, which
   then scrolls the whole tab as one. */
[b-m702t88rwr] .dev-subtabs {
    flex: 0 0 auto;
}

/* The chart pane scrolls too. It was overflow:hidden so the plot would size to
   it, but the plot has a 220 px floor, and on a short screen the summary and
   the empty-state line under the plot were cut off. The plot still fills the
   pane whenever the pane is taller than that floor. */
.dev-right-pane[data-testid="dev-graphs-pane"][b-m702t88rwr] {
    overflow-y: auto;
}

/* A permanently visible scrollbar on every scroller of the tool. The default
   one is an overlay that only appears while a finger is moving - on a phone it
   is invisible at rest, so a panel whose content ran past the bottom read as
   simply ending there. Mirrors .gv-auth-scroll in main.css. The theory pane is
   left alone: its iframe scrolls, and shows, its own bar. */
[b-m702t88rwr] .dev-tab-panel,
.dev-right-pane:not([data-testid="dev-theory-pane"]):not([data-testid="dev-chat-pane"])[b-m702t88rwr] {
    overflow-y: scroll;
    overscroll-behavior: contain;
}

[b-m702t88rwr] .dev-tab-panel::-webkit-scrollbar,
.dev-right-pane[b-m702t88rwr]::-webkit-scrollbar {
    width: 10px;
}

[b-m702t88rwr] .dev-tab-panel::-webkit-scrollbar-track,
.dev-right-pane[b-m702t88rwr]::-webkit-scrollbar-track {
    background: var(--mud-palette-action-default-hover, rgba(127, 127, 127, .12));
    border-radius: 5px;
}

[b-m702t88rwr] .dev-tab-panel::-webkit-scrollbar-thumb,
.dev-right-pane[b-m702t88rwr]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-primary, #7e6fff);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
    min-height: 32px;
}

/* 🔴 scrollbar-width / scrollbar-color are RESET to auto here, on purpose.
   App.razor sets `html, body * { scrollbar-width: thin }` for the whole app,
   and Chromium 121+ IGNORES every ::-webkit-scrollbar rule on an element whose
   scrollbar-width or scrollbar-color is not auto - it falls back to the native
   bar, which on a phone is an overlay that is invisible at rest (measured: a
   0 px bar at 390x844 with the rules above present). A @supports guard cannot
   route around it either: Chromium answers selector(::-webkit-scrollbar) as
   unsupported, so a "Firefox only" block applies in Chrome too. Firefox, which
   has no ::-webkit-scrollbar, shows its own always-present bar at auto. */
[b-m702t88rwr] .dev-tab-panel,
.dev-right-pane[b-m702t88rwr] {
    scrollbar-width: auto;
    scrollbar-color: auto;
}

/* _content/AspireChatApp.Razor/Components/Tools/Modeling/BimTool/BimToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                   BimToolComp.razor.css                           */
/*   Layout styles for the BIM tool (RTL aware):                     */
/*   left tree/property tabs | 3D model viewport | ChatBot.          */
/*                                                                    */
/*   Mirrors HumanModelToolComp.razor.css — the rules are REPEATED    */
/*   rather than shared because Blazor CSS isolation scopes each      */
/*   component's stylesheet to its own generated attribute, so        */
/*   identical class names elsewhere would never match these          */
/*   elements. The centre column here is a three.js canvas showing a  */
/*   building, not a Plotly chart or a Cesium globe.                  */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.bim-container[b-7sri7m872u] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.bim-container[dir="rtl"][b-7sri7m872u] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The tree/property panel opens at 1/3 and the viewport takes the rest
   (flex 1 / 2). A splitter drag writes inline width/min/max, which overrides
   the flex basis and pins that panel — the other keeps the remainder. */
.bim-left-panel[b-7sri7m872u] {
    flex: 1 1 0;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .bim-left-panel[b-7sri7m872u] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.bim-left-panel.collapsed[b-7sri7m872u] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements never receive this component's CSS scope attribute — unscoped
   rules would silently not match and the content gets clipped. */
[b-7sri7m872u] .bim-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-7sri7m872u] .bim-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-7sri7m872u] .bim-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-7sri7m872u] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-7sri7m872u] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*             CAMERA PRESET BUTTONS (the WPF View menu)              */
/* ----------------------------------------------------------------- */

/* Pushed to the header's trailing edge, wrapping before they crowd the title.
   These are raw buttons, not MudButtons: seven of them as Material buttons
   would double the header's height. */
.bim-view-buttons[b-7sri7m872u] {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.bim-view-button[b-7sri7m872u] {
    background: rgba(255, 255, 255, .15);
    color: var(--mud-palette-primary-text);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: .7rem;
    line-height: 1.35;
    cursor: pointer;
    white-space: nowrap;
}

.bim-view-button:hover[b-7sri7m872u] {
    background: rgba(255, 255, 255, .3);
}

.bim-view-button:active[b-7sri7m872u] {
    background: rgba(255, 255, 255, .45);
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-7sri7m872u] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-7sri7m872u],
.panel-splitter:active[b-7sri7m872u] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-7sri7m872u] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                 CENTRE PANEL (3D VIEWPORT)                         */
/* ----------------------------------------------------------------- */

.bim-center-panel[b-7sri7m872u] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

/* three.js appends its canvas here. min-height:0 lets the flex child actually
   shrink, and the explicit block sizing is what the ResizeObserver reads to
   keep the renderer in step with a splitter drag. */
.bim-viewport[b-7sri7m872u] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* The model is orbited by dragging; suppress the browser's own pan/zoom
       so a touch drag rotates the building instead of scrolling the page. */
    touch-action: none;
}

.bim-viewport[b-7sri7m872u]  canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Shown while a model is being parsed and tessellated. */
.bim-viewport-overlay[b-7sri7m872u] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

/* Shown for a PARAMETRIC IFC: the tree and properties loaded, but the 3D
   geometry needs the win-x64 OCCT engine. Deliberately not an error colour —
   the model is fine, only the rendering path is unavailable. */
.bim-viewport-notice[b-7sri7m872u] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
}

.bim-notice-body[b-7sri7m872u] {
    max-width: 460px;
    line-height: 1.5;
}

/* ----------------------------------------------------------------- */
/*            STATUS BAR (the WPF statusTextBlock)                    */
/* ----------------------------------------------------------------- */

.bim-status-bar[b-7sri7m872u] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 10px;
    font-size: .75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
}

.bim-status-text[b-7sri7m872u] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Counts are a latin/numeric run — keep them LTR and tabular under he-IL. */
.bim-status-counts[b-7sri7m872u] {
    flex: 0 0 auto;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/* ----------------------------------------------------------------- */

.bim-chat-panel[b-7sri7m872u] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone
   would otherwise hold the panel open at 300px and nothing would animate.
   !important: after a splitter drag the panel carries INLINE width/min/max
   styles, which would otherwise outrank this class. */
.bim-chat-panel.collapsed[b-7sri7m872u] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .bim-chat-panel.collapsed[b-7sri7m872u] {
    border-right-width: 0;
}

[dir="rtl"] .bim-chat-panel[b-7sri7m872u] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.bim-chat-host[b-7sri7m872u] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/BimTool/Editors/BimObjectsEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*               BimObjectsEditorComp.razor.css                       */
/*   Per-IFC-type visibility checkboxes + the X/Y/Z section sliders.  */
/*                                                                    */
/*   The .bim-row / .bim-input rules are DUPLICATED from the sibling  */
/*   BIM editors on purpose: Blazor CSS isolation scopes each         */
/*   component's stylesheet to its own generated attribute, so an     */
/*   identical class name in BimSpatialTreeComp.razor.css would never */
/*   match these elements. Copying is the correct fix here.           */
/*   The pattern itself is LosVisibilityTool's los-row / los-input.   */
/* ================================================================= */

.bim-editor-scroll[b-bisihgq32d] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- Group ---- */

.bim-group[b-bisihgq32d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bim-group-title[b-bisihgq32d] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 2px;
    margin-bottom: 2px;
}

.bim-button-row[b-bisihgq32d] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 2px 0;
}

/* ---- Compact single-row control (label | small raw input) ---- */

.bim-row[b-bisihgq32d] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.bim-row-label[b-bisihgq32d] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* IFC type names are latin; keep them LTR under he-IL. */
    direction: ltr;
    text-align: start;
}

.bim-checkbox[b-bisihgq32d] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* Element tally next to each IFC type. */
.bim-type-count[b-bisihgq32d] {
    flex: 0 0 auto;
    min-width: 26px;
    text-align: end;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

/* ---- Section sliders ---- */

.bim-slider[b-bisihgq32d] {
    flex: 1 1 auto;
    min-width: 60px;
    height: 24px;
    direction: ltr;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.bim-slider:disabled[b-bisihgq32d] {
    opacity: .4;
    cursor: default;
}

.bim-slider-value[b-bisihgq32d] {
    flex: 0 0 auto;
    min-width: 30px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: .72rem;
    direction: ltr;
    color: var(--mud-palette-text-primary);
}

.bim-tree-empty[b-bisihgq32d] {
    padding: 8px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    font-style: italic;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/BimTool/Editors/BimSamplesEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*               BimSamplesEditorComp.razor.css                       */
/*   Bundled sample buttons, the open-your-own control and the        */
/*   loaded-model summary rows.                                       */
/*                                                                    */
/*   The .bim-row / .bim-group rules are DUPLICATED from the sibling  */
/*   BIM editors on purpose: Blazor CSS isolation scopes each         */
/*   component's stylesheet to its own generated attribute, so an     */
/*   identical class name elsewhere would never match these elements. */
/*   Copying is the correct fix here.                                 */
/* ================================================================= */

.bim-editor-scroll[b-sps8i85lw5] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- Group ---- */

.bim-group[b-sps8i85lw5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bim-group-title[b-sps8i85lw5] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 2px;
    margin-bottom: 2px;
}

/* ---- Sample buttons — the WPF samplesTree rows as cards ---- */

.bim-sample-button[b-sps8i85lw5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    text-align: start;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: .78rem;
    transition: border-color .15s, background .15s;
}

.bim-sample-button:hover[b-sps8i85lw5] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

/* The sample currently loaded. */
.bim-sample-button.current[b-sps8i85lw5] {
    border-color: var(--mud-palette-primary);
    border-inline-start-width: 3px;
}

.bim-sample-name[b-sps8i85lw5] {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.bim-sample-desc[b-sps8i85lw5] {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

/* "Tree + properties only" marker on a parametric sample — informational, not
   an error: the file loads fine, only its 3D geometry needs the OCCT engine. */
.bim-sample-badge[b-sps8i85lw5] {
    margin-top: 2px;
    align-self: flex-start;
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--mud-palette-info);
    color: var(--mud-palette-info-text);
}

.bim-hint[b-sps8i85lw5] {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
    font-style: italic;
    padding-top: 2px;
}

/* ---- Compact single-row readout (label | value) ---- */

.bim-row[b-sps8i85lw5] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 24px;
}

.bim-row-label[b-sps8i85lw5] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* File names, schema ids and counts are latin/numeric runs — force LTR so they
   read correctly under the RTL default culture. */
.bim-readout[b-sps8i85lw5] {
    flex: 0 0 auto;
    max-width: 160px;
    text-align: end;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/BimTool/Editors/BimSpatialTreeComp.razor.rz.scp.css */
/* ================================================================= */
/*                BimSpatialTreeComp.razor.css                        */
/*   The spatial tree + property dock rows.                          */
/*                                                                    */
/*   The .bim-row / .bim-input rules are DUPLICATED from the sibling  */
/*   BIM editors on purpose: Blazor CSS isolation scopes each         */
/*   component's stylesheet to its own generated attribute, so an     */
/*   identical class name in BimObjectsEditorComp.razor.css would     */
/*   never match these elements. Copying is the correct fix here.     */
/*   The pattern itself is LosVisibilityTool's los-row / los-input.   */
/* ================================================================= */

.bim-editor-scroll[b-bpvputhcaw] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ---- Compact single-row control (label | small raw input) ---- */

.bim-row[b-bpvputhcaw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.bim-row-label[b-bpvputhcaw] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* direction:ltr keeps the filter text and any number readable under the
   RTL default culture. */
.bim-input[b-bpvputhcaw] {
    width: 150px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    direction: ltr;
}

.bim-input:focus[b-bpvputhcaw] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* ---- The spatial tree ---- */

/* Bounded height with its own scrollbar, so a 2900-row model cannot push the
   property dock below it off the panel. */
.bim-tree[b-bpvputhcaw] {
    flex: 0 1 auto;
    min-height: 120px;
    max-height: 42vh;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
    padding: 2px 0;
}

.bim-tree-row[b-bpvputhcaw] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 1px 4px;
    font-size: .75rem;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    /* An IFC type name and an element name are latin runs; keeping the row LTR
       stops "IfcWall house - outer wall" reordering under he-IL. */
    direction: ltr;
}

.bim-tree-row:hover[b-bpvputhcaw] {
    background: var(--mud-palette-action-default-hover);
}

.bim-tree-row.selected[b-bpvputhcaw] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.bim-tree-type[b-bpvputhcaw] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    flex: 0 0 auto;
}

.bim-tree-row.selected .bim-tree-type[b-bpvputhcaw] {
    color: var(--mud-palette-primary-text);
}

.bim-tree-name[b-bpvputhcaw] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.bim-tree-row.selected .bim-tree-name[b-bpvputhcaw] {
    color: var(--mud-palette-primary-text);
}

/* Isolate affordance, shown only on rows that actually carry geometry. */
.bim-tree-isolate[b-bpvputhcaw] {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-size: .7rem;
    padding: 0 3px;
    opacity: .45;
}

.bim-tree-row:hover .bim-tree-isolate[b-bpvputhcaw] {
    opacity: 1;
}

.bim-tree-row.selected .bim-tree-isolate[b-bpvputhcaw] {
    color: var(--mud-palette-primary-text);
    opacity: 1;
}

.bim-tree-empty[b-bpvputhcaw] {
    padding: 10px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

.bim-tree-footer[b-bpvputhcaw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    padding: 0 2px;
}

.bim-link-button[b-bpvputhcaw] {
    background: none;
    border: none;
    padding: 0;
    color: var(--mud-palette-primary);
    cursor: pointer;
    font-size: .7rem;
    text-decoration: underline;
}

/* ---- Property dock ---- */

.bim-props[b-bpvputhcaw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
}

.bim-props-header[b-bpvputhcaw] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 4px;
    background: var(--mud-palette-background);
    font-size: .78rem;
    direction: ltr;
    overflow: hidden;
}

.bim-props-type[b-bpvputhcaw] {
    color: var(--mud-palette-primary);
    font-weight: 700;
    flex: 0 0 auto;
}

.bim-props-name[b-bpvputhcaw] {
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bim-props-hint[b-bpvputhcaw] {
    padding: 8px 4px;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* Native <details> expanders: the open state lives in the DOM and therefore
   survives the StateHasChanged that fires on every selection, where a
   component-managed bool would snap every panel shut on each pick. */
.bim-expander[b-bpvputhcaw] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
    overflow: hidden;
}

/* summary.<class> — the element-qualified selector is REQUIRED to beat the
   UA's display:list-item, without which margin-inline-start:auto on the value
   cannot right-align it. */
summary.bim-expander-title[b-bpvputhcaw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    user-select: none;
}

summary.bim-expander-title[b-bpvputhcaw]::-webkit-details-marker {
    display: none;
}

summary.bim-expander-title[b-bpvputhcaw]::before {
    content: "▸";
    font-size: .65rem;
    color: var(--mud-palette-text-secondary);
}

details[open] > summary.bim-expander-title[b-bpvputhcaw]::before {
    content: "▾";
}

.bim-expander-value[b-bpvputhcaw] {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* Property table: three tight columns, values forced LTR because an IFC value
   is a number, a GUID or an English enum. */
.bim-prop-table[b-bpvputhcaw] {
    width: 100%;
    border-collapse: collapse;
    font-size: .7rem;
    direction: ltr;
    table-layout: fixed;
}

.bim-prop-table td[b-bpvputhcaw] {
    padding: 1px 5px;
    border-top: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bim-prop-group[b-bpvputhcaw] {
    width: 32%;
    color: var(--mud-palette-text-secondary);
}

.bim-prop-name[b-bpvputhcaw] {
    width: 32%;
    color: var(--mud-palette-text-primary);
}

.bim-prop-value[b-bpvputhcaw] {
    width: 36%;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/CadTool/CadToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                    CadToolComp.razor.css                          */
/*   Layout styles for the CAD tool (RTL aware):                     */
/*   left editor tabs | 3D workplane viewport | ChatBot.             */
/*                                                                    */
/*   Mirrors HumanModelToolComp.razor.css — the rules are REPEATED    */
/*   rather than shared because Blazor CSS isolation scopes each      */
/*   component's stylesheet to its own generated attribute, so        */
/*   identical class names elsewhere would never match these          */
/*   elements. The centre column here is a three.js canvas plus the   */
/*   toolbar that stands in for the WPF tool's classic Menu bar.      */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.cad-container[b-c8l20uc2sd] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.cad-container[dir="rtl"][b-c8l20uc2sd] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor opens at 1/3 and the workplane takes the rest (flex 1 / 2): the
   model needs the room, and the shape palette is compact. A splitter drag
   writes inline width/min/max, which overrides the flex basis and pins that
   panel — the other keeps the remainder. */
.cad-left-panel[b-c8l20uc2sd] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .cad-left-panel[b-c8l20uc2sd] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.cad-left-panel.collapsed[b-c8l20uc2sd] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-c8l20uc2sd] .cad-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-c8l20uc2sd] .cad-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-c8l20uc2sd] .cad-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-c8l20uc2sd] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-c8l20uc2sd] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* The status / selection readouts carried over from the WPF status bar. They
   shrink before the title does, and ellipsise rather than wrap the header. */
.cad-status[b-c8l20uc2sd] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-status:first-of-type[b-c8l20uc2sd] {
    margin-inline-start: auto;
}

.cad-status-value[b-c8l20uc2sd] {
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-c8l20uc2sd] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-c8l20uc2sd],
.panel-splitter:active[b-c8l20uc2sd] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-c8l20uc2sd] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                 CENTRE PANEL (3D WORKPLANE)                        */
/* ----------------------------------------------------------------- */

.cad-center-panel[b-c8l20uc2sd] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

/* The WPF tool's classic Menu bar, as a single toolbar row. It wraps rather
   than scrolls so a narrow display mode keeps every command reachable — a
   horizontally-scrolling toolbar hides its right-hand items with no affordance. */
.cad-toolbar[b-c8l20uc2sd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background);
    flex: 0 0 auto;
}

.cad-toolbar-sep[b-c8l20uc2sd] {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--mud-palette-lines-default);
}

/* Pushes the export group to the far end of the toolbar. */
.cad-toolbar-spacer[b-c8l20uc2sd] {
    flex: 1 1 auto;
}

/* The view-preset buttons are text labels ("Top", "Front"), so they need to be
   compact enough that five of them plus the icon buttons fit one row. */
[b-c8l20uc2sd] .cad-view-button {
    min-width: 0;
    padding: 2px 8px;
    font-size: .72rem;
    text-transform: none;
}

/* three.js appends its canvas here. min-height:0 lets the flex child actually
   shrink, and the explicit block sizing is what the ResizeObserver reads to
   keep the renderer in step with a splitter drag. */
.cad-viewport[b-c8l20uc2sd] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* The scene is orbited by dragging and shapes are dragged with the gizmo;
       suppress the browser's own pan/zoom so a touch drag reaches three.js
       instead of scrolling the page. */
    touch-action: none;
}

.cad-viewport[b-c8l20uc2sd]  canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Shown while a CSG boolean or a scene rebuild is in flight — the WPF tool
   shows a wait cursor at exactly the same points. */
.cad-viewport-overlay[b-c8l20uc2sd] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 78%, transparent);
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    /* Appears only when a build takes longer than 0.4 s. Every sketch click
       rebuilds; a cover flashing over the viewport on each one would be worse
       than no indicator at all. */
    opacity: 0;
    animation: cad-overlay-in-b-c8l20uc2sd 0.2s ease-out 0.4s forwards;
}

@keyframes cad-overlay-in-b-c8l20uc2sd {
    to { opacity: 1; }
}

/* Measure tool result card, top corner of the viewport. */
.cad-measure-card[b-c8l20uc2sd] {
    position: absolute;
    /* Below the title bar AND the toolbar, so the card never covers the
       Import / STEP / STL / OBJ buttons at the toolbar's end. */
    top: 92px;
    inset-inline-end: 12px;
    min-width: 220px;
    max-width: 360px;
    padding: 6px 10px 8px;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    font-size: 0.8rem;
    z-index: 5;
}

.cad-measure-title[b-c8l20uc2sd] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    margin-bottom: 4px;
}

.cad-measure-line[b-c8l20uc2sd] {
    direction: ltr;
    text-align: start;
    line-height: 1.5;
}

.cad-measure-line.strong[b-c8l20uc2sd] {
    font-weight: 700;
}

.cad-icon-btn[b-c8l20uc2sd] {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.cad-chat-panel[b-c8l20uc2sd] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.cad-chat-panel.collapsed[b-c8l20uc2sd] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .cad-chat-panel.collapsed[b-c8l20uc2sd] {
    border-right-width: 0;
}

[dir="rtl"] .cad-chat-panel[b-c8l20uc2sd] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.cad-chat-host[b-c8l20uc2sd] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/CadTool/Editors/CadAssemblyEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                CadAssemblyEditorComp.razor.css                    */
/*   ASSEMBLY tab: components, mates, exploded view, interference.    */
/*                                                                    */
/*   The .cad-group / .cad-row / .cad-input family is DUPLICATED from */
/*   CadPartEditorComp.razor.css on purpose: Blazor CSS isolation     */
/*   scopes every stylesheet to its own component.                    */
/* ================================================================= */

.cad-editor-scroll[b-c0j8m7avnj] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
}

.cad-group[b-c0j8m7avnj] {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cad-group:last-child[b-c0j8m7avnj] {
    border-bottom: none;
}

.cad-group-title[b-c0j8m7avnj] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.cad-group-subtitle[b-c0j8m7avnj] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 3px;
}

.cad-empty[b-c0j8m7avnj] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    padding: 4px 0;
}

.cad-intro[b-c0j8m7avnj] {
    line-height: 1.4;
}

.cad-button-row[b-c0j8m7avnj] {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}

[b-c0j8m7avnj] .cad-button-row .mud-button-root {
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 6px;
    font-size: .72rem;
    text-transform: none;
}

.cad-tool-grid[b-c0j8m7avnj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.cad-tool-btn[b-c0j8m7avnj] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 2px 6px;
    font-size: .72rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-tool-btn span[b-c0j8m7avnj] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-tool-btn:hover[b-c0j8m7avnj] {
    border-color: var(--mud-palette-primary);
}

.cad-tool-btn.active[b-c0j8m7avnj] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}

.cad-link-btn[b-c0j8m7avnj] {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: .72rem;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: underline;
}

.cad-icon-btn[b-c0j8m7avnj] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 1px;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    opacity: .75;
}

.cad-icon-btn:hover[b-c0j8m7avnj] {
    opacity: 1;
}

.cad-row[b-c0j8m7avnj] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.cad-input[b-c0j8m7avnj] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    direction: ltr;
}

.cad-input:focus[b-c0j8m7avnj] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.cad-unit[b-c0j8m7avnj] {
    flex: 0 0 auto;
    min-width: 18px;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

.cad-row > label[b-c0j8m7avnj] {
    flex: 0 0 96px;
    color: var(--mud-palette-text-secondary);
}

.cad-hint[b-c0j8m7avnj] {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    margin: 2px 0 4px;
    line-height: 1.35;
}

.cad-hint.warn[b-c0j8m7avnj] {
    color: var(--mud-palette-warning);
}

.cad-link-btn.active[b-c0j8m7avnj] {
    font-weight: 700;
}


.cad-check[b-c0j8m7avnj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cad-input-small[b-c0j8m7avnj] {
    width: 78px;
    flex: 0 0 auto;
}

.cad-range[b-c0j8m7avnj] {
    flex: 1;
    min-width: 0;
}

.cad-hint.picking[b-c0j8m7avnj] {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
}

.cad-hint.ok[b-c0j8m7avnj] {
    color: var(--mud-palette-success);
}

.cad-link-btn.danger[b-c0j8m7avnj] {
    color: var(--mud-palette-error);
}

.cad-icon-btn.on[b-c0j8m7avnj] {
    color: var(--mud-palette-primary);
    opacity: 1;
}

.cad-asm-row[b-c0j8m7avnj] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    min-height: 26px;
}

.cad-asm-row.bad[b-c0j8m7avnj] {
    color: var(--mud-palette-error);
}

.cad-asm-name[b-c0j8m7avnj] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cad-asm-mate[b-c0j8m7avnj] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 2px 6px;
    margin: 4px 0;
}

.cad-asm-mate.bad[b-c0j8m7avnj] {
    border-color: var(--mud-palette-error);
}

.cad-asm-mate.suppressed[b-c0j8m7avnj] {
    opacity: .55;
}

.cad-asm-mate-type[b-c0j8m7avnj] {
    font-weight: 600;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/CadTool/Editors/CadDrawingEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                CadDrawingEditorComp.razor.css                     */
/*   DRAWING tab: options, exports, BOM, mass properties.             */
/*                                                                    */
/*   The .cad-group / .cad-row / .cad-input family is DUPLICATED from */
/*   CadPartEditorComp.razor.css on purpose: Blazor CSS isolation     */
/*   scopes every stylesheet to its own component.                    */
/* ================================================================= */

.cad-editor-scroll[b-x6h1j2yqco] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
}

.cad-group[b-x6h1j2yqco] {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cad-group:last-child[b-x6h1j2yqco] {
    border-bottom: none;
}

.cad-group-title[b-x6h1j2yqco] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.cad-group-subtitle[b-x6h1j2yqco] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 3px;
}

.cad-empty[b-x6h1j2yqco] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    padding: 4px 0;
}

.cad-intro[b-x6h1j2yqco] {
    line-height: 1.4;
}

.cad-button-row[b-x6h1j2yqco] {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}

[b-x6h1j2yqco] .cad-button-row .mud-button-root {
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 6px;
    font-size: .72rem;
    text-transform: none;
}

.cad-tool-grid[b-x6h1j2yqco] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.cad-tool-btn[b-x6h1j2yqco] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 2px 6px;
    font-size: .72rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-tool-btn span[b-x6h1j2yqco] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-tool-btn:hover[b-x6h1j2yqco] {
    border-color: var(--mud-palette-primary);
}

.cad-tool-btn.active[b-x6h1j2yqco] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}

.cad-link-btn[b-x6h1j2yqco] {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: .72rem;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: underline;
}

.cad-icon-btn[b-x6h1j2yqco] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 1px;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    opacity: .75;
}

.cad-icon-btn:hover[b-x6h1j2yqco] {
    opacity: 1;
}

.cad-row[b-x6h1j2yqco] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.cad-input[b-x6h1j2yqco] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    direction: ltr;
}

.cad-input:focus[b-x6h1j2yqco] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.cad-unit[b-x6h1j2yqco] {
    flex: 0 0 auto;
    min-width: 18px;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

.cad-row > label[b-x6h1j2yqco] {
    flex: 0 0 96px;
    color: var(--mud-palette-text-secondary);
}

.cad-hint[b-x6h1j2yqco] {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    margin: 2px 0 4px;
    line-height: 1.35;
}

.cad-hint.warn[b-x6h1j2yqco] {
    color: var(--mud-palette-warning);
}

.cad-link-btn.active[b-x6h1j2yqco] {
    font-weight: 700;
}


.cad-row-top[b-x6h1j2yqco] {
    align-items: flex-start;
}

.cad-checks[b-x6h1j2yqco] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: .78rem;
    margin: 4px 0;
}

.cad-check[b-x6h1j2yqco] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cad-input-wide[b-x6h1j2yqco] {
    flex: 1;
    width: auto;
    min-width: 0;
}

.cad-notes[b-x6h1j2yqco] {
    height: auto;
    padding: 3px 6px;
    resize: vertical;
}

.cad-input-mat[b-x6h1j2yqco] {
    width: 118px;
    height: 22px;
    font-size: .72rem;
}

.cad-error[b-x6h1j2yqco] {
    font-size: .76rem;
    color: var(--mud-palette-error);
    margin: 4px 0;
}

.cad-table[b-x6h1j2yqco] {
    width: 100%;
    border-collapse: collapse;
    font-size: .74rem;
}

.cad-table th[b-x6h1j2yqco],
.cad-table td[b-x6h1j2yqco] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 2px 4px;
    text-align: start;
}

.cad-table th[b-x6h1j2yqco] {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.cad-mass[b-x6h1j2yqco] {
    font-size: .72rem;
    padding: 3px 0;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    font-variant-numeric: tabular-nums;
}

.cad-mass-name[b-x6h1j2yqco] {
    font-weight: 600;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/CadTool/Editors/CadPartEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                 CadPartEditorComp.razor.css                       */
/*   PART tab: sketch tools, constraints, feature tree, parameters.   */
/*                                                                    */
/*   The .cad-group / .cad-row / .cad-input family is DUPLICATED from */
/*   CadSceneEditorComp.razor.css on purpose: Blazor CSS isolation    */
/*   scopes every stylesheet to its own component, so the sibling's   */
/*   rules can never match these elements.                            */
/* ================================================================= */

.cad-editor-scroll[b-lva9mqcn9z] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
}

.cad-group[b-lva9mqcn9z] {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cad-group:last-child[b-lva9mqcn9z] {
    border-bottom: none;
}

.cad-group-title[b-lva9mqcn9z] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.cad-group-subtitle[b-lva9mqcn9z] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 3px;
}

.cad-empty[b-lva9mqcn9z] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    padding: 4px 0;
}

.cad-intro[b-lva9mqcn9z] {
    line-height: 1.4;
}

.cad-button-row[b-lva9mqcn9z] {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}

[b-lva9mqcn9z] .cad-button-row .mud-button-root {
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 6px;
    font-size: .72rem;
    text-transform: none;
}

/* ----------------------------------------------------------------- */
/*                 TOOL / FEATURE BUTTON GRID                         */
/* ----------------------------------------------------------------- */

/* Three icon+label buttons per row: twelve feature commands in four rows. */
.cad-tool-grid[b-lva9mqcn9z] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.cad-tool-btn[b-lva9mqcn9z] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 2px 6px;
    font-size: .72rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-tool-btn span[b-lva9mqcn9z] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-tool-btn:hover[b-lva9mqcn9z] {
    border-color: var(--mud-palette-primary);
}

.cad-tool-btn.active[b-lva9mqcn9z] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}

/* ----------------------------------------------------------------- */
/*                 SKETCH STATUS / SELECTION / CONSTRAINTS            */
/* ----------------------------------------------------------------- */

.cad-sketch-status[b-lva9mqcn9z] {
    font-size: .76rem;
    font-weight: 600;
    padding: 2px 0 4px;
}

.cad-sketch-status.full[b-lva9mqcn9z] {
    color: var(--mud-palette-success);
}

.cad-sketch-status.free[b-lva9mqcn9z] {
    color: var(--mud-palette-info);
}

.cad-sketch-status.over[b-lva9mqcn9z] {
    color: var(--mud-palette-error);
}

.cad-selection-row[b-lva9mqcn9z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 24px;
}

.cad-chip[b-lva9mqcn9z] {
    font-size: .7rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

.cad-link-btn[b-lva9mqcn9z] {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: .72rem;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: underline;
}

.cad-link-btn.danger[b-lva9mqcn9z] {
    color: var(--mud-palette-error);
}

.cad-constraint-grid[b-lva9mqcn9z] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
}

.cad-con-btn[b-lva9mqcn9z] {
    font-size: .7rem;
    min-height: 24px;
    padding: 1px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-con-btn:disabled[b-lva9mqcn9z] {
    opacity: .38;
    cursor: default;
}

.cad-con-btn:not(:disabled):hover[b-lva9mqcn9z] {
    border-color: var(--mud-palette-primary);
}

.cad-constraint-list[b-lva9mqcn9z] {
    margin-top: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.cad-constraint-row[b-lva9mqcn9z] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .74rem;
    min-height: 24px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.cad-constraint-row.conflict[b-lva9mqcn9z] {
    background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent);
}

.cad-con-kind[b-lva9mqcn9z] {
    flex: 0 0 auto;
    font-weight: 600;
}

.cad-con-refs[b-lva9mqcn9z] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

/* ----------------------------------------------------------------- */
/*                 FEATURE TREE                                       */
/* ----------------------------------------------------------------- */

.cad-feature-tree[b-lva9mqcn9z] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
    padding: 2px 0;
    max-height: 260px;
    overflow-y: auto;
}

.cad-feature-row[b-lva9mqcn9z] {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 26px;
    padding-inline: 6px 2px;
    font-size: .78rem;
    cursor: pointer;
    user-select: none;
}

.cad-feature-row:hover[b-lva9mqcn9z] {
    background: var(--mud-palette-action-default-hover);
}

.cad-feature-row.selected[b-lva9mqcn9z] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Suppressed, or below the rollback bar: in the history but not in the model. */
.cad-feature-row.inactive .cad-tree-name[b-lva9mqcn9z] {
    opacity: .5;
    text-decoration: line-through;
}

.cad-feature-row.error .cad-tree-name[b-lva9mqcn9z] {
    color: var(--mud-palette-error);
}

.cad-feature-row.selected.error .cad-tree-name[b-lva9mqcn9z] {
    color: inherit;
}

.cad-tree-icon[b-lva9mqcn9z] {
    flex: 0 0 auto;
}

.cad-tree-name[b-lva9mqcn9z] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-feature-flag[b-lva9mqcn9z] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    line-height: 16px;
}

.cad-feature-flag.error[b-lva9mqcn9z] {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.cad-feature-flag.warn[b-lva9mqcn9z] {
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

.cad-feature-dof[b-lva9mqcn9z] {
    flex: 0 0 auto;
    font-size: .68rem;
    min-width: 14px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.cad-feature-message[b-lva9mqcn9z] {
    font-size: .74rem;
    padding: 3px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.cad-feature-message.error[b-lva9mqcn9z] {
    background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent);
}

.cad-feature-message.warn[b-lva9mqcn9z] {
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, transparent);
}

/* The SolidWorks rollback bar: features below it are not evaluated. */
.cad-rollback-bar[b-lva9mqcn9z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 4px;
    padding: 1px 6px;
    font-size: .7rem;
    font-weight: 700;
    border-top: 3px solid var(--mud-palette-warning);
    color: var(--mud-palette-warning-darken, var(--mud-palette-text-secondary));
}

.cad-icon-btn[b-lva9mqcn9z] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 1px;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    opacity: .75;
}

.cad-icon-btn:hover[b-lva9mqcn9z] {
    opacity: 1;
}

/* ----------------------------------------------------------------- */
/*                 COMPACT ROWS                                       */
/* ----------------------------------------------------------------- */

.cad-row[b-lva9mqcn9z] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.cad-row-top[b-lva9mqcn9z] {
    align-items: flex-start;
}

.cad-row-label[b-lva9mqcn9z] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-input[b-lva9mqcn9z] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    direction: ltr;
}

.cad-input:focus[b-lva9mqcn9z] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.cad-input-expr[b-lva9mqcn9z] {
    width: 96px;
    font-family: Consolas, "Courier New", monospace;
}

.cad-unit[b-lva9mqcn9z] {
    flex: 0 0 auto;
    min-width: 18px;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

.cad-evaluated[b-lva9mqcn9z] {
    flex: 0 0 auto;
    font-size: .7rem;
    color: var(--mud-palette-info);
    direction: ltr;
}

.cad-checkbox[b-lva9mqcn9z] {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.cad-check-list[b-lva9mqcn9z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cad-check-item[b-lva9mqcn9z] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .76rem;
}

/* ----------------------------------------------------------------- */
/*                 PARAMETERS                                         */
/* ----------------------------------------------------------------- */

.cad-param-row[b-lva9mqcn9z] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    font-size: .78rem;
}

.cad-param-name[b-lva9mqcn9z] {
    width: 80px;
}

.cad-param-value[b-lva9mqcn9z] {
    flex: 1 1 auto;
    text-align: end;
    font-size: .74rem;
    direction: ltr;
    color: var(--mud-palette-text-secondary);
}

.cad-param-value.error[b-lva9mqcn9z] {
    color: var(--mud-palette-error);
    font-weight: 700;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/CadTool/Editors/CadSceneEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                 CadSceneEditorComp.razor.css                      */
/*   Scene tree + compact properties dock.                            */
/*                                                                    */
/*   The .cad-row / .cad-input family is DUPLICATED from              */
/*   CadShapesEditorComp.razor.css on purpose: Blazor CSS isolation   */
/*   scopes every stylesheet to its own generated attribute, so the   */
/*   sibling editor's identical rules can never match these elements. */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      SCROLL HOST + GROUPS                          */
/* ----------------------------------------------------------------- */

.cad-editor-scroll[b-qltrnrcjgh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
}

/* A WPF GroupBox: a titled block of rows. */
.cad-group[b-qltrnrcjgh] {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cad-group:last-child[b-qltrnrcjgh] {
    border-bottom: none;
}

.cad-group-title[b-qltrnrcjgh] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.cad-empty[b-qltrnrcjgh] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    padding: 6px 0;
}

/* ----------------------------------------------------------------- */
/*                      EDIT BUTTON ROWS                              */
/* ----------------------------------------------------------------- */

/* Two commands per row, each taking half the width — compact enough that the
   six Edit-menu commands cost three rows rather than six. */
.cad-button-row[b-qltrnrcjgh] {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

[b-qltrnrcjgh] .cad-button-row .mud-button-root {
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 6px;
    font-size: .72rem;
    text-transform: none;
}

/* ----------------------------------------------------------------- */
/*                      SCENE TREE                                    */
/* ----------------------------------------------------------------- */

/* The tree is the one part of this panel allowed to scroll on its own: a deep
   model would otherwise push the properties dock off the bottom, and the dock
   is what the user needs while editing the node they just picked. */
.cad-tree[b-qltrnrcjgh] {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
    padding: 2px 0;
}

.cad-tree-row[b-qltrnrcjgh] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-inline-end: 6px;
    font-size: .78rem;
    cursor: pointer;
    user-select: none;
}

.cad-tree-row:hover[b-qltrnrcjgh] {
    background: var(--mud-palette-action-default-hover);
}

.cad-tree-row.selected[b-qltrnrcjgh] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Groups are bold, matching the WPF HierarchicalDataTemplate's FontWeight. */
.cad-tree-row.group .cad-tree-name[b-qltrnrcjgh] {
    font-weight: 700;
}

.cad-tree-icon[b-qltrnrcjgh] {
    flex: 0 0 auto;
}

.cad-tree-name[b-qltrnrcjgh] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Marks a node that will be SUBTRACTED when its group merges. Without it a hole
   is indistinguishable from a solid in the tree. */
.cad-tree-badge[b-qltrnrcjgh] {
    flex: 0 0 auto;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

/* ----------------------------------------------------------------- */
/*                      COMPACT ROWS                                  */
/* ----------------------------------------------------------------- */

.cad-row[b-qltrnrcjgh] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.cad-row-label[b-qltrnrcjgh] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* direction:ltr because numbers read left-to-right even under the RTL
   default culture. */
.cad-input[b-qltrnrcjgh] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    direction: ltr;
}

.cad-input:focus[b-qltrnrcjgh] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* X / Y / Z on one line: three inputs sharing the width a single one would
   take, so Position, Size and Rotation cost one row each rather than nine. */
.cad-row-triple .cad-row-label[b-qltrnrcjgh] {
    flex: 1 1 0;
}

.cad-input-third[b-qltrnrcjgh] {
    width: 0;
    flex: 1 1 0;
    min-width: 40px;
    padding: 0 3px;
    text-align: end;
}

.cad-checkbox[b-qltrnrcjgh] {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* The native colour swatch, sized to the same 24px row height as the inputs. */
.cad-color[b-qltrnrcjgh] {
    width: 44px;
    height: 24px;
    padding: 0 2px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: pointer;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/CadTool/Editors/CadShapesEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                 CadShapesEditorComp.razor.css                     */
/*   Compact WPF-style rows for the shape palette and the workplane  */
/*   settings.                                                        */
/*                                                                    */
/*   The .cad-row / .cad-input family DUPLICATES the LosVisibility    */
/*   .los-row / .los-input rules on purpose, and is duplicated AGAIN  */
/*   in CadSceneEditorComp.razor.css: Blazor CSS isolation scopes     */
/*   every stylesheet to its own generated attribute, so neither the  */
/*   LosVisibility rules nor the sibling editor's can ever match      */
/*   these elements no matter how the classes are named.              */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      SCROLL HOST + GROUPS                          */
/* ----------------------------------------------------------------- */

.cad-editor-scroll[b-39xto4bpgq] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
}

/* A WPF GroupBox: a titled block of rows. */
.cad-group[b-39xto4bpgq] {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cad-group:last-child[b-39xto4bpgq] {
    border-bottom: none;
}

.cad-group-title[b-39xto4bpgq] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

/* ----------------------------------------------------------------- */
/*                      SHAPE PALETTE                                 */
/* ----------------------------------------------------------------- */

/* The WPF WrapPanel of card-style shape buttons. auto-fit keeps two columns at
   the panel's default width but collapses to one when a splitter drag makes it
   narrow, which the fixed WPF panel cannot do. */
.cad-shape-grid[b-39xto4bpgq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 4px;
}

.cad-shape-button[b-39xto4bpgq] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 4px 6px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-size: .75rem;
    text-align: start;
    cursor: pointer;
    overflow: hidden;
}

.cad-shape-button:hover:not(:disabled)[b-39xto4bpgq] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

/* Disabled while a CSG rebuild is running — queuing edits behind a boolean
   would apply them to a scene the user can no longer see. */
.cad-shape-button:disabled[b-39xto4bpgq] {
    opacity: .5;
    cursor: default;
}

.cad-shape-icon[b-39xto4bpgq] {
    flex: 0 0 auto;
}

.cad-shape-caption[b-39xto4bpgq] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------------- */
/*                      COMPACT ROWS                                  */
/* ----------------------------------------------------------------- */

.cad-row[b-39xto4bpgq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.cad-row-label[b-39xto4bpgq] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* direction:ltr because numbers read left-to-right even under the RTL
   default culture. */
.cad-input[b-39xto4bpgq] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    direction: ltr;
}

.cad-input:focus[b-39xto4bpgq] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.cad-checkbox[b-39xto4bpgq] {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.cad-readout-value[b-39xto4bpgq] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    max-width: 60%;
    text-align: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/CadTool/Editors/CadStudyEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                 CadStudyEditorComp.razor.css                      */
/*   SIMULATION tab: study setup, fixtures / loads, results.          */
/*                                                                    */
/*   The .cad-group / .cad-row / .cad-input family is DUPLICATED from */
/*   CadPartEditorComp.razor.css on purpose: Blazor CSS isolation     */
/*   scopes every stylesheet to its own component.                    */
/* ================================================================= */

.cad-editor-scroll[b-9f9qy6cc8h] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
}

.cad-group[b-9f9qy6cc8h] {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cad-group:last-child[b-9f9qy6cc8h] {
    border-bottom: none;
}

.cad-group-title[b-9f9qy6cc8h] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.cad-group-subtitle[b-9f9qy6cc8h] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 3px;
}

.cad-empty[b-9f9qy6cc8h] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    padding: 4px 0;
}

.cad-intro[b-9f9qy6cc8h] {
    line-height: 1.4;
}

.cad-button-row[b-9f9qy6cc8h] {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}

[b-9f9qy6cc8h] .cad-button-row .mud-button-root {
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 6px;
    font-size: .72rem;
    text-transform: none;
}

.cad-tool-grid[b-9f9qy6cc8h] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.cad-tool-btn[b-9f9qy6cc8h] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 2px 6px;
    font-size: .72rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-tool-btn span[b-9f9qy6cc8h] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cad-tool-btn:hover[b-9f9qy6cc8h] {
    border-color: var(--mud-palette-primary);
}

.cad-tool-btn.active[b-9f9qy6cc8h] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}

.cad-link-btn[b-9f9qy6cc8h] {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: .72rem;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: underline;
}

.cad-icon-btn[b-9f9qy6cc8h] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 1px;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    opacity: .75;
}

.cad-icon-btn:hover[b-9f9qy6cc8h] {
    opacity: 1;
}

.cad-row[b-9f9qy6cc8h] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.cad-input[b-9f9qy6cc8h] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    direction: ltr;
}

.cad-input:focus[b-9f9qy6cc8h] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.cad-unit[b-9f9qy6cc8h] {
    flex: 0 0 auto;
    min-width: 18px;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

.cad-row > label[b-9f9qy6cc8h] {
    flex: 0 0 96px;
    color: var(--mud-palette-text-secondary);
}

.cad-hint[b-9f9qy6cc8h] {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    margin: 2px 0 4px;
    line-height: 1.35;
}

.cad-hint.warn[b-9f9qy6cc8h] {
    color: var(--mud-palette-warning);
}

.cad-link-btn.active[b-9f9qy6cc8h] {
    font-weight: 700;
}

.cad-study-item[b-9f9qy6cc8h] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 3px 6px;
    margin-bottom: 4px;
}

.cad-study-item.picking[b-9f9qy6cc8h] {
    border-color: var(--mud-palette-warning);
    box-shadow: 0 0 0 1px var(--mud-palette-warning);
}

.cad-study-item-head[b-9f9qy6cc8h] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
}

.cad-study-item-title[b-9f9qy6cc8h] {
    font-weight: 600;
}

.cad-study-faces[b-9f9qy6cc8h] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
}

.cad-study-dot[b-9f9qy6cc8h] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.cad-study-dot.fixture[b-9f9qy6cc8h] {
    background: #2e9d4a;
}

.cad-study-dot.load[b-9f9qy6cc8h] {
    background: #8e3fd1;
}

.cad-study-axes[b-9f9qy6cc8h] {
    display: flex;
    gap: 10px;
    font-size: .78rem;
    padding: 2px 0;
}

.cad-check[b-9f9qy6cc8h] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.cad-vector[b-9f9qy6cc8h] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: .74rem;
    padding: 2px 0;
}

.cad-vector .cad-input[b-9f9qy6cc8h] {
    width: 64px;
    padding: 0 3px;
}

.cad-study-stage[b-9f9qy6cc8h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
}

.cad-study-error[b-9f9qy6cc8h] {
    font-size: .76rem;
    color: var(--mud-palette-error);
    margin: 4px 0;
}

.cad-study-table[b-9f9qy6cc8h] {
    width: 100%;
    border-collapse: collapse;
    font-size: .76rem;
    margin: 2px 0 6px;
}

.cad-study-table th[b-9f9qy6cc8h] {
    text-align: start;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    padding: 2px 4px 2px 0;
}

.cad-study-table td[b-9f9qy6cc8h] {
    text-align: end;
    padding: 2px 0;
    font-variant-numeric: tabular-nums;
}

.cad-study-table tr.bad td[b-9f9qy6cc8h] {
    color: var(--mud-palette-error);
    font-weight: 700;
}

.cad-study-mode-row[b-9f9qy6cc8h] {
    cursor: pointer;
}

.cad-study-mode-row:hover[b-9f9qy6cc8h],
.cad-study-mode-row.active[b-9f9qy6cc8h] {
    background: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/ModelReconstructionTool/Editors/ModelReconstructionEditorComp.razor.rz.scp.css */
/* =================================================================
                ModelReconstructionEditorComp.razor.css

   Scoped styles for the Engine editor.

   The .mr-row / .mr-row-label / .mr-input rules are DUPLICATED from
   LosVisibilityTool's .los-* pattern rather than inherited: Blazor CSS
   isolation scopes every stylesheet to its own generated attribute, so
   identical class names in another component do NOT apply here.
   ================================================================= */

.mr-editor[b-n37jkbpou4] {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
}

/* ---- Compact single-row field (label left, value/control right) ---- */
.mr-row[b-n37jkbpou4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.mr-row-label[b-n37jkbpou4] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mr-row-value[b-n37jkbpou4] {
    font-variant-numeric: tabular-nums;
    /* Numbers read left-to-right even under the RTL default culture. */
    direction: ltr;
    text-align: end;
}

.mr-ok[b-n37jkbpou4] {
    color: var(--mud-palette-success);
    font-weight: 600;
}

.mr-bad[b-n37jkbpou4] {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.mr-section-title[b-n37jkbpou4] {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

/* ---- MODEL QUALITY radio row (WPF: three radios on one line) ---- */
.mr-quality-row[b-n37jkbpou4] {
    display: flex;
    gap: 12px;
    padding: 2px 0 0;
}

.mr-quality-option[b-n37jkbpou4] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.mr-quality-option input[b-n37jkbpou4] {
    cursor: pointer;
    margin: 0;
}

/* ---- Progress bar + its numeric readout ---- */
.mr-progress[b-n37jkbpou4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mr-progress-bar[b-n37jkbpou4] {
    flex: 1;
    height: 10px;
}

.mr-progress-value[b-n37jkbpou4] {
    min-width: 34px;
    text-align: end;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    color: var(--mud-palette-text-secondary);
}

/* ---- Pipeline step list (WPF: the bordered ItemsControl rows) ---- */
.mr-steps[b-n37jkbpou4] {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
}

.mr-step[b-n37jkbpou4] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 2px;
    font-size: .74rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mr-step-icon[b-n37jkbpou4] {
    width: 14px;
    text-align: center;
    flex: 0 0 auto;
}

.mr-step-name[b-n37jkbpou4] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.mr-step-status[b-n37jkbpou4] {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 600;
}

/* Step state colours — the WPF StatusBrush values. */
.mr-step-icon.pending[b-n37jkbpou4],
.mr-step-status.pending[b-n37jkbpou4] {
    color: var(--mud-palette-text-disabled);
}

.mr-step-icon.running[b-n37jkbpou4],
.mr-step-status.running[b-n37jkbpou4] {
    color: var(--mud-palette-info);
}

.mr-step-icon.done[b-n37jkbpou4],
.mr-step-status.done[b-n37jkbpou4] {
    color: var(--mud-palette-success);
}

.mr-step-icon.failed[b-n37jkbpou4],
.mr-step-status.failed[b-n37jkbpou4] {
    color: var(--mud-palette-error);
}

.mr-status[b-n37jkbpou4] {
    color: var(--mud-palette-text-secondary);
    display: block;
}

.mr-readout[b-n37jkbpou4] {
    display: flex;
    flex-direction: column;
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/ModelReconstructionTool/Editors/ModelReconstructionImagesComp.razor.rz.scp.css */
/* =================================================================
                ModelReconstructionImagesComp.razor.css

   Scoped styles for the Images tab. Class rules are duplicated rather
   than shared with the sibling editor: Blazor CSS isolation scopes each
   stylesheet to its own generated attribute.
   ================================================================= */

.mr-images[b-6yrbuumlwb] {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    /* The tab body owns the scroll so the toolbar and count line stay put
       while a long thumbnail list scrolls under them. */
    min-height: 0;
    height: 100%;
}

.mr-images-toolbar[b-6yrbuumlwb] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

/* ---- Bundled sample datasets ---- */
.mr-details[b-6yrbuumlwb] {
    margin-top: 8px;
    flex: 0 0 auto;
}

/* Element-qualified so it beats the UA's display:list-item, which would
   otherwise stop the flex layout (and any margin-inline-start:auto) working. */
summary.mr-summary[b-6yrbuumlwb] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0;
    user-select: none;
}

.mr-summary-label[b-6yrbuumlwb] {
    font-weight: 600;
}

.mr-sample-list[b-6yrbuumlwb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 0;
}

.mr-sample[b-6yrbuumlwb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 5px 8px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: pointer;
    text-align: start;
    font: inherit;
    color: var(--mud-palette-text-primary);
}

.mr-sample:hover:not(:disabled)[b-6yrbuumlwb] {
    border-color: var(--mud-palette-primary);
}

.mr-sample:disabled[b-6yrbuumlwb] {
    opacity: .5;
    cursor: default;
}

.mr-sample-title[b-6yrbuumlwb] {
    font-size: .78rem;
    font-weight: 600;
}

.mr-sample-desc[b-6yrbuumlwb] {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- Image count line (WPF: imageCountText) ---- */
.mr-images-count[b-6yrbuumlwb] {
    margin-top: 8px;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

/* ---- Thumbnail list ---- */
.mr-image-list[b-6yrbuumlwb] {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.mr-image-item[b-6yrbuumlwb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
}

.mr-image-item:hover[b-6yrbuumlwb] {
    background: var(--mud-palette-action-default-hover);
}

.mr-image-item.selected[b-6yrbuumlwb] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.mr-image-thumb[b-6yrbuumlwb] {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 3px;
    flex: 0 0 auto;
}

.mr-image-meta[b-6yrbuumlwb] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mr-image-name[b-6yrbuumlwb] {
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
}

.mr-image-gps[b-6yrbuumlwb] {
    font-size: .66rem;
    color: var(--mud-palette-text-disabled);
    /* Coordinates read left-to-right even under the RTL default culture. */
    direction: ltr;
    text-align: start;
}

.mr-image-gps.has-gps[b-6yrbuumlwb] {
    color: var(--mud-palette-success);
}
/* _content/AspireChatApp.Razor/Components/Tools/Modeling/ModelReconstructionTool/ModelReconstructionToolComp.razor.rz.scp.css */
/* ================================================================
   ModelReconstructionToolComp scoped styles.
   3-panel flex layout (left editor | centre image preview | right 3D
   model viewport). CSS isolation is per-component, so these rules are
   deliberately self-contained and not shared with other tools.
   ================================================================ */

.mr-container[b-9d8nf22609] {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ---- Panels ---- */
.mr-left-panel[b-9d8nf22609] {
    width: 330px;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-inline-end: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.mr-left-panel.collapsed[b-9d8nf22609] {
    width: 44px;
    min-width: 44px;
}

.mr-center-panel[b-9d8nf22609] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mr-right-panel[b-9d8nf22609] {
    /* The reconstructed model is the tool's product, so it gets the wider
       share — mirroring the WPF grid, where the 3D viewport column is the
       one the user actually works in. */
    flex: 1.3 1 0;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-inline-start: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.panel-header[b-9d8nf22609] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    flex: 0 0 auto;
}

.panel-title[b-9d8nf22609] {
    display: flex;
    align-items: center;
}

.mr-panel-caption[b-9d8nf22609] {
    /* Pushed to the far edge of the header, after the title and any buttons. */
    margin-inline-start: auto;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Counts and dimensions read left-to-right even under the RTL culture. */
    direction: ltr;
}

.mr-splitter[b-9d8nf22609] {
    width: 4px;
    flex: 0 0 auto;
    background: var(--mud-palette-lines-default, #e0e0e0);
    cursor: col-resize;
}

/* The tab strip must keep its natural height; without this the MudTabs
   toolbar stretches and the panel body loses its scroll container. */
.mr-tabs[b-9d8nf22609] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.mr-tab-panel[b-9d8nf22609] {
    min-height: 0;
    overflow: auto;
}

/* ---- Centre: the selected image preview ---- */
.mr-pane[b-9d8nf22609] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #2a2a2a;
}

/* The image fits its pane by CSS: object-fit letterboxes it at the correct
   aspect ratio and never upscales past its natural size, applying the instant
   the browser lays the element out rather than depending on when Blazor
   commits the <img> or the bytes finish decoding. */
.mr-img[b-9d8nf22609] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---- Right: the three.js viewport ---- */
.mr-model-pane[b-9d8nf22609] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    /* Matches the WPF HelixViewport3D Background="#1A1A2E", so the panel reads
       the same before the renderer paints its own clear colour. */
    background: #1a1a2e;
}

/* The viewport element is always present so the renderer can be created once
   on first render and simply receive a model later. */
.mr-model-viewport[b-9d8nf22609] {
    position: absolute;
    inset: 0;
}

.mr-pane-placeholder[b-9d8nf22609] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa7b5;
    font-style: italic;
    pointer-events: none;
    padding: 12px;
    text-align: center;
}

/* Sits above the (empty) canvas until a model mounts. */
.mr-model-placeholder[b-9d8nf22609] {
    z-index: 2;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/DeepLearning/Common/DlMetricsPanel.razor.rz.scp.css */
/* =================================================================
                        DlMetricsPanel.razor.css
   ================================================================= */

.dlm-panel[b-eauw9slrvq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    font-size: 0.78rem;
    overflow-y: auto;
    min-height: 0;
}

.dlm-empty[b-eauw9slrvq] {
    color: var(--mud-palette-text-secondary);
    padding: 8px 4px;
}

.dlm-chips[b-eauw9slrvq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dlm-chip[b-eauw9slrvq] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 1px 8px;
    line-height: 20px;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.dlm-chip b[b-eauw9slrvq] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    margin-inline-end: 4px;
}

.dlm-chip-primary[b-eauw9slrvq] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
}

.dlm-tp[b-eauw9slrvq] { border-color: #2E7D32; }
.dlm-fp[b-eauw9slrvq] { border-color: #C62828; }
.dlm-fn[b-eauw9slrvq] { border-color: #EF6C00; }

.dlm-sub[b-eauw9slrvq] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

.dlm-section-title[b-eauw9slrvq] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-top: 8px;
}

/* Wide tables scroll inside their own box; the panel never scrolls sideways. */
.dlm-table-wrap[b-eauw9slrvq] {
    overflow-x: auto;
    max-width: 100%;
}

.dlm-table[b-eauw9slrvq] {
    border-collapse: collapse;
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.dlm-table th[b-eauw9slrvq],
.dlm-table td[b-eauw9slrvq] {
    padding: 2px 5px;
    text-align: end;
    border-bottom: 1px solid var(--mud-palette-divider);
    white-space: nowrap;
    direction: ltr;
}

.dlm-table th[b-eauw9slrvq] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.dlm-th-text[b-eauw9slrvq],
.dlm-td-text[b-eauw9slrvq] {
    text-align: start !important;
}

.dlm-confusion .dlm-cell[b-eauw9slrvq] {
    text-align: center;
    min-width: 34px;
}

.dlm-confusion .dlm-diag[b-eauw9slrvq] {
    font-weight: 600;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/DeepLearning/Common/DlModelCardComp.razor.rz.scp.css */
/* =================================================================
                       DlModelCardComp.razor.css
   ================================================================= */

.dlc-card[b-weem20e4jl] {
    margin-top: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 6px 8px;
    background: var(--mud-palette-surface);
    font-size: 0.76rem;
}

.dlc-head[b-weem20e4jl] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.dlc-title[b-weem20e4jl] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlc-ref[b-weem20e4jl] {
    font-family: var(--mud-typography-monospace-family, monospace);
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}

.dlc-table[b-weem20e4jl] {
    width: 100%;
    border-collapse: collapse;
}

.dlc-table td[b-weem20e4jl] {
    padding: 1px 0;
    color: var(--mud-palette-text-secondary);
    vertical-align: baseline;
}

.dlc-table td.dlc-value[b-weem20e4jl] {
    text-align: end;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    direction: ltr;
    padding-inline-start: 8px;
}

.dlc-classes[b-weem20e4jl] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 5px;
}

.dlc-classes-label[b-weem20e4jl] {
    color: var(--mud-palette-text-secondary);
    margin-inline-end: 2px;
}

.dlc-class[b-weem20e4jl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid;
    border-radius: 10px;
    padding: 0 6px;
    line-height: 18px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-primary);
}

.dlc-swatch[b-weem20e4jl] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/DeepLearning/Common/DlModelPicker.razor.rz.scp.css */
/* =================================================================
                        DlModelPicker.razor.css

   Compact registry list. CSS isolation is per component, so the
   rules live here even though the three tools all host this picker.
   ================================================================= */

.dlp-picker[b-z3cj6v3rrq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
}

.dlp-empty[b-z3cj6v3rrq] {
    color: var(--mud-palette-text-secondary);
    padding: 6px 4px;
}

.dlp-shelf[b-z3cj6v3rrq] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 6px 0 2px;
}

.dlp-row[b-z3cj6v3rrq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: pointer;
    background: var(--mud-palette-surface);
    min-height: 26px;
}

.dlp-row:hover[b-z3cj6v3rrq] {
    border-color: var(--mud-palette-primary);
}

.dlp-row.selected[b-z3cj6v3rrq] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
}

.dlp-name[b-z3cj6v3rrq] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}

.dlp-version[b-z3cj6v3rrq] {
    color: var(--mud-palette-text-secondary);
    margin-inline-start: 4px;
    font-variant-numeric: tabular-nums;
}

.dlp-badge[b-z3cj6v3rrq] {
    font-size: 0.64rem;
    padding: 0 5px;
    border-radius: 8px;
    line-height: 16px;
    white-space: nowrap;
    direction: ltr;
}

.dlp-badge-default[b-z3cj6v3rrq] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.dlp-badge-ok[b-z3cj6v3rrq] {
    background: rgba(46, 125, 50, 0.18);
    color: #2E7D32;
}

.dlp-badge-warn[b-z3cj6v3rrq] {
    background: rgba(239, 108, 0, 0.18);
    color: #EF6C00;
}

.dlp-badge-muted[b-z3cj6v3rrq] {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.dlp-metric[b-z3cj6v3rrq] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/DeepLearning/Common/DlPrCurvesChart.razor.rz.scp.css */
/* =================================================================
                       DlPrCurvesChart.razor.css
   ================================================================= */

.dlpr-chart[b-zpmv3nfhtt] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px;
}

.dlpr-empty[b-zpmv3nfhtt] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    padding: 8px 4px;
}

.dlpr-plot[b-zpmv3nfhtt] {
    flex: 1 1 auto;
    min-height: 260px;
}

.dlpr-plot[b-zpmv3nfhtt]  .js-plotly-plot,
.dlpr-plot[b-zpmv3nfhtt]  .plot-container {
    height: 100%;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/DeepLearning/Common/DlRasterPicker.razor.rz.scp.css */
/* =================================================================
                       DlRasterPicker.razor.css

   Compact row / input rules duplicated from the LosVisibilityTool
   editor (CSS isolation is per component; they cannot be inherited).
   ================================================================= */

.dlr-picker[b-cl8xui4tzr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dlr-row[b-cl8xui4tzr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.dlr-row-label[b-cl8xui4tzr] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlr-input[b-cl8xui4tzr] {
    width: 160px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
}

.dlr-input:focus[b-cl8xui4tzr] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

[b-cl8xui4tzr] .dlr-file {
    padding: 0;
    font-size: 0.7rem;
}

.dlr-info[b-cl8xui4tzr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0;
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/DeepLearning/EvaluatingImageRecognitionModelToolComp.razor.rz.scp.css */
/* =================================================================
          EvaluatingImageRecognitionModelToolComp.razor.css

   Four-panel tool shell: editors | Cesium globe | metrics | chat.

   The shell rules (.lostool-*, .panel-*) are DUPLICATED from the
   sibling Extracting tool rather than imported: Blazor CSS isolation
   rewrites every rule to this component's own scope attribute, so a
   rule living in another component's stylesheet never matches these
   elements. The compact row / input rules are likewise copied from
   the LosVisibilityTool editor under the dle- prefix.
   ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-56ofls6w8f] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL: the dir attribute alone reverses a flex row. Do NOT add
   row-reverse here - that reverses a second time. */
.lostool-container[dir="rtl"][b-56ofls6w8f] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL (editors)                          */
/* ----------------------------------------------------------------- */

.lostool-left-panel[b-56ofls6w8f] {
    flex: 0 0 360px;
    width: 360px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-56ofls6w8f] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-56ofls6w8f] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* ::deep throughout: MudTabs is a child COMPONENT, so its rendered
   elements never carry this component's scope attribute. */
[b-56ofls6w8f] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-56ofls6w8f] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-56ofls6w8f] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-56ofls6w8f] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-56ofls6w8f],
.panel-splitter:active[b-56ofls6w8f] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-56ofls6w8f] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTRE PANEL (globe)                          */
/* ----------------------------------------------------------------- */

.lostool-map-panel[b-56ofls6w8f] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.lostool-map[b-56ofls6w8f] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

.lostool-map[b-56ofls6w8f]  .cesium-viewer-bottom {
    z-index: 5;
}

.lostool-map-error[b-56ofls6w8f] {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    inset-inline-end: 12px;
    z-index: 20;
}

/* Verdict legend, top-end corner of the globe. */
.dle-legend[b-56ofls6w8f] {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 20;
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.74rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dle-legend-row[b-56ofls6w8f] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.dle-legend-name[b-56ofls6w8f] {
    flex: 1;
    white-space: nowrap;
}

.dle-legend-count[b-56ofls6w8f] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- */
/*                      REPORT OVERLAY                                */
/* ----------------------------------------------------------------- */

.dle-report[b-56ofls6w8f] {
    position: absolute;
    inset: 12px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
}

.dle-report-bar[b-56ofls6w8f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.dle-report-title[b-56ofls6w8f] {
    flex: 1;
    font-weight: 600;
    font-size: 0.82rem;
}

.dle-report-frame[b-56ofls6w8f] {
    flex: 1 1 auto;
    width: 100%;
    border: none;
    background: #fff;
}

/* ----------------------------------------------------------------- */
/*                      RIGHT PANEL (metrics)                         */
/* ----------------------------------------------------------------- */

.lostool-right-panel[b-56ofls6w8f] {
    flex: 0 0 400px;
    width: 400px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-right-panel[b-56ofls6w8f] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.lostool-right-panel.collapsed[b-56ofls6w8f] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* ----------------------------------------------------------------- */
/*                      CHAT PANEL                                    */
/* ----------------------------------------------------------------- */

.dle-chat-panel[b-56ofls6w8f] {
    flex: 0 0 380px;
    width: 380px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), flex-basis 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1);
}

[dir="rtl"] .dle-chat-panel[b-56ofls6w8f] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.dle-chat-panel.collapsed[b-56ofls6w8f] {
    /* No max-width here: it has no value to animate FROM on the open state, so it
       snaps to zero on frame one and clamps the flex-grow transition away. flex-grow 0
       with width/flex-basis/min-width 0 and overflow hidden already collapses it. */
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    border: none;
}

.dle-chat-host[b-56ofls6w8f] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-56ofls6w8f] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-56ofls6w8f] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      TAB BODIES + COMPACT ROWS                     */
/* ----------------------------------------------------------------- */

.dle-tab-body[b-56ofls6w8f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.dle-section-title[b-56ofls6w8f] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 2px;
}

.dle-row[b-56ofls6w8f] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.dle-row-label[b-56ofls6w8f] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dle-input[b-56ofls6w8f] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    direction: ltr;
}

.dle-input:focus[b-56ofls6w8f] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.dle-file[b-56ofls6w8f] {
    padding: 0;
}

.dle-textarea[b-56ofls6w8f] {
    width: 100%;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 4px 6px;
    font-family: monospace;
    font-size: 0.72rem;
    direction: ltr;
    resize: vertical;
}

.dle-slider[b-56ofls6w8f] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.dle-slider-value[b-56ofls6w8f] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

.dle-check[b-56ofls6w8f] {
    width: 16px;
    height: 16px;
    margin: 0 4px;
}

.dle-buttons[b-56ofls6w8f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
}

.dle-hint[b-56ofls6w8f] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0;
}

.dle-status[b-56ofls6w8f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    direction: ltr;
}

/* Native <details>: the open state lives in the DOM and survives the
   StateHasChanged that fires on every change. summary is forced to flex
   with an element-qualified selector to beat the UA display:list-item. */
.dle-details[b-56ofls6w8f] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 6px;
}

summary.dle-details-title[b-56ofls6w8f] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    min-height: 24px;
    list-style: none;
}

summary.dle-details-title[b-56ofls6w8f]::-webkit-details-marker {
    display: none;
}

.dle-swatch[b-56ofls6w8f] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------- */
/*                      SAVED EVALUATIONS                             */
/* ----------------------------------------------------------------- */

.dle-evaluations[b-56ofls6w8f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dle-evaluation[b-56ofls6w8f] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-size: 0.72rem;
}

.dle-evaluation-date[b-56ofls6w8f] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.dle-evaluation-headline[b-56ofls6w8f] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.dle-evaluation-source[b-56ofls6w8f] {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------------------------------------------------------- */
/*                      METRICS PANEL                                 */
/* ----------------------------------------------------------------- */

.dle-results[b-56ofls6w8f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    font-size: 0.78rem;
}

.dle-run-bar[b-56ofls6w8f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.dle-run-bar-status[b-56ofls6w8f] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

.dle-chart-host[b-56ofls6w8f] {
    height: 240px;
    min-height: 200px;
}

.dle-table-host[b-56ofls6w8f] {
    flex: 1 1 auto;
    min-height: 160px;
    overflow: auto;
}

[b-56ofls6w8f] .dle-table .mud-table-cell {
    padding: 2px 6px;
    font-size: 0.74rem;
}

/* Verdict colours on the error list, matching the map layers. */
[b-56ofls6w8f] .dle-table tr.dle-row-tp td:first-child {
    border-inline-start: 3px solid #2E7D32;
}

[b-56ofls6w8f] .dle-table tr.dle-row-fp td:first-child {
    border-inline-start: 3px solid #C62828;
}

[b-56ofls6w8f] .dle-table tr.dle-row-fn td:first-child {
    border-inline-start: 3px solid #EF6C00;
}

[b-56ofls6w8f] .dle-table tr.dle-row-selected td {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/DeepLearning/ExtractingImageRecognitionFeaturesToolComp.razor.rz.scp.css */
/* =================================================================
          ExtractingImageRecognitionFeaturesToolComp.razor.css

   Four-panel tool shell: editors | Cesium globe | results | chat.

   The shell rules (.lostool-*, .panel-*) are DUPLICATED from the
   other Cesium tools rather than imported: Blazor CSS isolation
   rewrites every rule to this component's own scope attribute, so a
   rule living in another component's stylesheet never matches these
   elements. The compact row / input rules are likewise copied from
   the LosVisibilityTool editor under the dlx- prefix.
   ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-wham4ck6dd] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL: the dir attribute alone reverses a flex row. Do NOT add
   row-reverse here - that reverses a second time. */
.lostool-container[dir="rtl"][b-wham4ck6dd] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL (editors)                          */
/* ----------------------------------------------------------------- */

.lostool-left-panel[b-wham4ck6dd] {
    flex: 0 0 360px;
    width: 360px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-wham4ck6dd] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-wham4ck6dd] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* ::deep throughout: MudTabs is a child COMPONENT, so its rendered
   elements never carry this component's scope attribute. */
[b-wham4ck6dd] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-wham4ck6dd] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-wham4ck6dd] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-wham4ck6dd] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-wham4ck6dd],
.panel-splitter:active[b-wham4ck6dd] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-wham4ck6dd] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTRE PANEL (globe)                          */
/* ----------------------------------------------------------------- */

.lostool-map-panel[b-wham4ck6dd] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.lostool-map[b-wham4ck6dd] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

.lostool-map[b-wham4ck6dd]  .cesium-viewer-bottom {
    z-index: 5;
}

.lostool-map-error[b-wham4ck6dd] {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    inset-inline-end: 12px;
    z-index: 20;
}

.dlx-map-hint[b-wham4ck6dd] {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    pointer-events: none;
}

/* Class legend, top-end corner of the globe. */
.dlx-legend[b-wham4ck6dd] {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 20;
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.74rem;
    max-height: 40%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dlx-legend-row[b-wham4ck6dd] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.dlx-legend-name[b-wham4ck6dd] {
    flex: 1;
    white-space: nowrap;
}

.dlx-legend-count[b-wham4ck6dd] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- */
/*                      RIGHT PANEL (results)                         */
/* ----------------------------------------------------------------- */

.lostool-right-panel[b-wham4ck6dd] {
    flex: 0 0 380px;
    width: 380px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-right-panel[b-wham4ck6dd] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.lostool-right-panel.collapsed[b-wham4ck6dd] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* ----------------------------------------------------------------- */
/*                      CHAT PANEL                                    */
/* ----------------------------------------------------------------- */

.dlx-chat-panel[b-wham4ck6dd] {
    flex: 0 0 380px;
    width: 380px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), flex-basis 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1);
}

[dir="rtl"] .dlx-chat-panel[b-wham4ck6dd] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.dlx-chat-panel.collapsed[b-wham4ck6dd] {
    /* No max-width here: it has no value to animate FROM on the open state, so it
       snaps to zero on frame one and clamps the flex-grow transition away. flex-grow 0
       with width/flex-basis/min-width 0 and overflow hidden already collapses it. */
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    border: none;
}

.dlx-chat-host[b-wham4ck6dd] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-wham4ck6dd] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-wham4ck6dd] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      TAB BODIES + COMPACT ROWS                     */
/* ----------------------------------------------------------------- */

.dlx-tab-body[b-wham4ck6dd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.dlx-section-title[b-wham4ck6dd] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 2px;
}

.dlx-row[b-wham4ck6dd] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.dlx-row-label[b-wham4ck6dd] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlx-input[b-wham4ck6dd] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    direction: ltr;
}

.dlx-input:focus[b-wham4ck6dd] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.dlx-slider[b-wham4ck6dd] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.dlx-slider-value[b-wham4ck6dd] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
}

.dlx-check[b-wham4ck6dd] {
    width: 16px;
    height: 16px;
    margin: 0 4px;
}

.dlx-buttons[b-wham4ck6dd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
}

.dlx-hint[b-wham4ck6dd] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0;
}

.dlx-status[b-wham4ck6dd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    direction: ltr;
}

/* Native <details>: the open state lives in the DOM and survives the
   StateHasChanged that fires on every change. summary is forced to flex
   with an element-qualified selector to beat the UA display:list-item. */
.dlx-details[b-wham4ck6dd] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 6px;
}

summary.dlx-details-title[b-wham4ck6dd] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    min-height: 24px;
    list-style: none;
}

summary.dlx-details-title[b-wham4ck6dd]::-webkit-details-marker {
    display: none;
}

.dlx-details-value[b-wham4ck6dd] {
    margin-inline-start: auto;
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.dlx-classes[b-wham4ck6dd] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 4px 0;
}

.dlx-class[b-wham4ck6dd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    cursor: pointer;
}

.dlx-swatch[b-wham4ck6dd] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------- */
/*                      RESULTS PANEL                                 */
/* ----------------------------------------------------------------- */

.dlx-results[b-wham4ck6dd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    font-size: 0.78rem;
}

.dlx-run-bar[b-wham4ck6dd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.dlx-run-bar-status[b-wham4ck6dd] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

.dlx-chips[b-wham4ck6dd],
.dlx-counts[b-wham4ck6dd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dlx-chip[b-wham4ck6dd] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 1px 8px;
    line-height: 20px;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.dlx-chip b[b-wham4ck6dd] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    margin-inline-end: 4px;
}

.dlx-chip-primary[b-wham4ck6dd] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
}

.dlx-table-host[b-wham4ck6dd] {
    flex: 1 1 auto;
    min-height: 160px;
    overflow: auto;
}

[b-wham4ck6dd] .dlx-table .mud-table-cell {
    padding: 2px 6px;
    font-size: 0.74rem;
}

[b-wham4ck6dd] .dlx-table tr.dlx-row-selected td {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/DeepLearning/TrainingImageRecognitionModelToolComp.razor.rz.scp.css */
/* =================================================================
          TrainingImageRecognitionModelToolComp.razor.css

   Four-panel tool shell: editors | registry table | model card | chat.
   The centre panel keeps the .lostool-map-panel class of the sibling
   Cesium tools so the splitters and the display-mode rules behave
   identically, even though there is no globe in it.

   The shell rules (.lostool-*, .panel-*) are DUPLICATED from the
   sibling tools rather than imported: Blazor CSS isolation rewrites
   every rule to this component's own scope attribute, so a rule
   living in another component's stylesheet never matches these
   elements. The compact row / input rules are likewise copied from
   the LosVisibilityTool editor under the dlt- prefix.
   ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-4qr1zin3ei] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL: the dir attribute alone reverses a flex row. Do NOT add
   row-reverse here - that reverses a second time. */
.lostool-container[dir="rtl"][b-4qr1zin3ei] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL (editors)                          */
/* ----------------------------------------------------------------- */

.lostool-left-panel[b-4qr1zin3ei] {
    flex: 0 0 360px;
    width: 360px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-4qr1zin3ei] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-4qr1zin3ei] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* ::deep throughout: MudTabs is a child COMPONENT, so its rendered
   elements never carry this component's scope attribute. */
[b-4qr1zin3ei] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-4qr1zin3ei] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-4qr1zin3ei] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-4qr1zin3ei] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-4qr1zin3ei],
.panel-splitter:active[b-4qr1zin3ei] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-4qr1zin3ei] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTRE PANEL (registry table)                 */
/* ----------------------------------------------------------------- */

.lostool-map-panel[b-4qr1zin3ei] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.dlt-centre[b-4qr1zin3ei] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    font-size: 0.8rem;
}

.dlt-callout-title[b-4qr1zin3ei] {
    font-weight: 600;
    margin-bottom: 2px;
}

.dlt-callout-body[b-4qr1zin3ei] {
    white-space: pre-line;
    margin-bottom: 4px;
}

/* ----------------------------------------------------------------- */
/*                      RIGHT PANEL (model card)                      */
/* ----------------------------------------------------------------- */

.lostool-right-panel[b-4qr1zin3ei] {
    flex: 0 0 380px;
    width: 380px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-right-panel[b-4qr1zin3ei] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.lostool-right-panel.collapsed[b-4qr1zin3ei] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* ----------------------------------------------------------------- */
/*                      CHAT PANEL                                    */
/* ----------------------------------------------------------------- */

.dlt-chat-panel[b-4qr1zin3ei] {
    flex: 0 0 380px;
    width: 380px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), flex-basis 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1);
}

[dir="rtl"] .dlt-chat-panel[b-4qr1zin3ei] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.dlt-chat-panel.collapsed[b-4qr1zin3ei] {
    /* No max-width here: it has no value to animate FROM on the open state, so it
       snaps to zero on frame one and clamps the flex-grow transition away. flex-grow 0
       with width/flex-basis/min-width 0 and overflow hidden already collapses it. */
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    border: none;
}

.dlt-chat-host[b-4qr1zin3ei] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-4qr1zin3ei] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-4qr1zin3ei] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      TAB BODIES + COMPACT ROWS                     */
/* ----------------------------------------------------------------- */

.dlt-tab-body[b-4qr1zin3ei] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.dlt-section-title[b-4qr1zin3ei] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 2px;
}

.dlt-row[b-4qr1zin3ei] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.dlt-row-label[b-4qr1zin3ei] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlt-input[b-4qr1zin3ei] {
    width: 150px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    direction: ltr;
}

.dlt-input:focus[b-4qr1zin3ei] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.dlt-file[b-4qr1zin3ei] {
    padding: 0;
}

.dlt-check[b-4qr1zin3ei] {
    width: 16px;
    height: 16px;
    margin: 0 4px;
}

.dlt-buttons[b-4qr1zin3ei] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 6px 0 2px;
}

.dlt-hint[b-4qr1zin3ei] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0;
}

.dlt-status[b-4qr1zin3ei] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* ----------------------------------------------------------------- */
/*                      CLASS EDITOR (ONNX import)                    */
/* ----------------------------------------------------------------- */

.dlt-classes[b-4qr1zin3ei] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dlt-class-row[b-4qr1zin3ei] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dlt-class-value[b-4qr1zin3ei] {
    width: 52px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.78rem;
    direction: ltr;
}

.dlt-class-name[b-4qr1zin3ei] {
    flex: 1;
    min-width: 0;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
}

.dlt-class-color[b-4qr1zin3ei] {
    width: 32px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: transparent;
}

/* ----------------------------------------------------------------- */
/*                      REGISTRY TABLE                                */
/* ----------------------------------------------------------------- */

.dlt-table-host[b-4qr1zin3ei] {
    flex: 1 1 auto;
    min-height: 200px;
    overflow: auto;
}

[b-4qr1zin3ei] .dlt-table .mud-table-cell {
    padding: 2px 6px;
    font-size: 0.74rem;
}

[b-4qr1zin3ei] .dlt-table tr.dlt-row-selected td {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

/* ----------------------------------------------------------------- */
/*                      MODEL CARD PANEL                              */
/* ----------------------------------------------------------------- */

.dlt-results[b-4qr1zin3ei] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    font-size: 0.78rem;
}

.dlt-evaluations[b-4qr1zin3ei] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dlt-evaluation[b-4qr1zin3ei] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-size: 0.72rem;
}

.dlt-evaluation-date[b-4qr1zin3ei] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.dlt-evaluation-headline[b-4qr1zin3ei] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.dlt-evaluation-source[b-4qr1zin3ei] {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The README is server-rendered HTML from the model package, so its
   elements carry no scope attribute - ::deep is required. */
.dlt-readme[b-4qr1zin3ei] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.74rem;
    overflow-x: auto;
}

[b-4qr1zin3ei] .dlt-readme h1,
[b-4qr1zin3ei] .dlt-readme h2,
[b-4qr1zin3ei] .dlt-readme h3 {
    font-size: 0.86rem;
    margin: 6px 0 2px;
}

[b-4qr1zin3ei] .dlt-readme p {
    margin: 2px 0;
}

[b-4qr1zin3ei] .dlt-readme code,
[b-4qr1zin3ei] .dlt-readme pre {
    font-family: monospace;
    font-size: 0.72rem;
    direction: ltr;
}

[b-4qr1zin3ei] .dlt-readme table {
    border-collapse: collapse;
}

[b-4qr1zin3ei] .dlt-readme td,
[b-4qr1zin3ei] .dlt-readme th {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 1px 4px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/GroundVisualNavigationTool/Charts/NavigationTrackChartComp.razor.rz.scp.css */
/* ===================================================================
   NavigationTrackChartComp.razor.css
   Right-panel chart host: plot fills the panel, toolbar pinned below.
   =================================================================== */

.gvn-chart-host[b-jwt7qj33b3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.gvn-chart-plot[b-jwt7qj33b3] {
    flex: 1;
    min-height: 0;
}

.gvn-chart-toolbar[b-jwt7qj33b3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 6px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/GroundVisualNavigationTool/Editors/GroundVisualNavEditorComp.razor.rz.scp.css */
/* ===================================================================
   GroundVisualNavEditorComp.razor.css

   Compact single-row parameter controls for the left panel.

   These .gvn-* rules are a DELIBERATE DUPLICATE of the LosVisibilityTool's
   .los-* pattern. Blazor CSS isolation scopes every stylesheet to its own
   generated attribute, so the .los-* rules genuinely do not apply here even
   though the class names would match — copying them is the correct move,
   not laziness. Keep them in step if the shared pattern changes.
   =================================================================== */

.gvn-editor[b-qiqfis6y1h] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px;
}

/* ---------------- compact parameter row ---------------- */

.gvn-row[b-qiqfis6y1h] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.gvn-row-label[b-qiqfis6y1h] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gvn-input[b-qiqfis6y1h] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    /* Numbers read left-to-right even under the RTL default culture. */
    direction: ltr;
}

.gvn-input:focus[b-qiqfis6y1h] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.gvn-file[b-qiqfis6y1h] {
    padding: 0;
    font-size: .68rem;
}

.gvn-check[b-qiqfis6y1h] {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
}

/* ---------------- run controls ---------------- */

.gvn-actions[b-qiqfis6y1h] {
    display: flex;
    gap: 6px;
    margin: 6px 0 4px;
}

.gvn-actions[b-qiqfis6y1h]  .mud-button {
    flex: 1;
    min-width: 0;
}

/* ---------------- live readouts ---------------- */

.gvn-readouts[b-qiqfis6y1h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    padding: 4px 0;
    border-block: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 4px;
}

.gvn-readout[b-qiqfis6y1h] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    font-size: .74rem;
    min-width: 0;
}

.gvn-readout-label[b-qiqfis6y1h] {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gvn-readout-value[b-qiqfis6y1h] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* ---------------- native <details> groups ---------------- */

.gvn-details[b-qiqfis6y1h] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 3px;
}

/* Element-qualified so it beats the user-agent display:list-item —
   without that, margin-inline-start:auto on the value never right-aligns. */
summary.gvn-details-summary[b-qiqfis6y1h] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    padding: 2px 0;
    color: var(--mud-palette-text-primary);
    list-style-position: inside;
}

.gvn-details-value[b-qiqfis6y1h] {
    margin-inline-start: auto;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

/* Evaluation-only model banner. Deliberately loud: these weights are not
   licensed for commercial distribution, so nobody should mistake this for a
   shippable configuration. */
.gvn-warning[b-qiqfis6y1h] {
    margin: 3px 0;
    padding: 4px 6px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning-text, var(--mud-palette-text-primary));
    font-size: .72rem;
    line-height: 1.25;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/GroundVisualNavigationTool/GroundVisualNavigationToolComp.razor.rz.scp.css */
/* ===================================================================
   GroundVisualNavigationToolComp.razor.css

   Three-panel layout: editor | video+overlay | chart. Mirrors the
   lostool-* geometry of the other tools, with gvn-* names because
   Blazor CSS isolation scopes each stylesheet to its own component
   (the lostool-* rules genuinely do not apply here).
   =================================================================== */

.gvn-container[b-agtgw5nn3e] {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

/* ---------------- panels ---------------- */

.gvn-left-panel[b-agtgw5nn3e] {
    display: flex;
    flex-direction: column;
    width: 320px;
    min-width: 0;
    flex-shrink: 0;
    border-inline-end: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

.gvn-left-panel.collapsed[b-agtgw5nn3e] {
    width: 44px;
}

.gvn-center-panel[b-agtgw5nn3e] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.gvn-right-panel[b-agtgw5nn3e] {
    display: flex;
    flex-direction: column;
    width: 380px;
    min-width: 0;
    flex-shrink: 0;
    border-inline-start: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

/* ---------------- headers / splitters ---------------- */

.panel-header[b-agtgw5nn3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
    min-height: 36px;
}

.panel-title[b-agtgw5nn3e] {
    display: flex;
    align-items: center;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-splitter[b-agtgw5nn3e] {
    width: 4px;
    flex-shrink: 0;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    opacity: .5;
}

.panel-splitter:hover[b-agtgw5nn3e] {
    opacity: 1;
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-agtgw5nn3e] {
    cursor: default;
}

/* ---------------- tabs ---------------- */

.gvn-tabs[b-agtgw5nn3e] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.gvn-tab-panel[b-agtgw5nn3e] {
    height: 100%;
    overflow-y: auto;
    padding: 0;
}

/* Pill styling targets .mud-tabs-tabbar — NOT -toolbar, which is a
   different element and silently does nothing. */
.gvn-tabs[b-agtgw5nn3e]  .mud-tabs-tabbar {
    min-height: 34px;
    background: var(--mud-palette-background-grey);
}

/* ---------------- video stage ---------------- */

.gvn-video-toolbar[b-agtgw5nn3e] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
    min-height: 32px;
}

.gvn-stat[b-agtgw5nn3e] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

/* The stage centres the video and lets it letterbox. The clip is
   PORTRAIT, so height is the binding dimension in a wide panel. */
.gvn-video-stage[b-agtgw5nn3e] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}

.gvn-video[b-agtgw5nn3e],
.gvn-overlay[b-agtgw5nn3e] {
    /* Both are laid out by the SAME rule so the overlay lands exactly on
       the video: object-fit:contain letterboxes the video, and matching
       max-width/max-height on a canvas whose backing store equals the
       video's intrinsic size reproduces the identical box. */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gvn-overlay[b-agtgw5nn3e] {
    position: absolute;
    inset: 0;
    margin: auto;
    pointer-events: none;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/SurveyMissionSimulationTool/Charts/NavigationGraphsComp.razor.rz.scp.css */
/* ================================================================= */
/*                  NavigationGraphsComp.razor.css                    */
/*   The navigation graphs, sized for the narrow right panel.         */
/* ================================================================= */

.nav-graphs[b-olufi7rd0n] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* A one-line notice ABOVE the tabs, not instead of them. The graphs are always
   present; this only says they have nothing on them yet, so it stays out of the
   way and lets the strip below keep its full height. */
.nav-graphs-empty[b-olufi7rd0n] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.66rem;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* ---------------- INNER TABS ---------------- */

/* Smaller than the right panel's own strip: these subdivide one tab of it,
   and matching that size would read as a second top-level strip. */
[b-olufi7rd0n] .nav-graph-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-olufi7rd0n] .nav-graph-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-olufi7rd0n] .nav-graph-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-olufi7rd0n] .nav-graph-tabs .mud-tab {
    min-width: 0;
    min-height: 28px;
    padding: 0 8px;
    font-size: 0.62rem;
    text-transform: none;
}

[b-olufi7rd0n] .nav-graph-tabs .mud-tab .mud-icon-root {
    font-size: 0.85rem;
    margin-inline-end: 3px;
}

/* ---------------- SECOND-LEVEL TABS ---------------- */

/* Position, velocity and attitude each subdivide again, so these sit one
   level below the strip above them and have to read that way -- smaller,
   and without the indicator bar competing with the parent's. */
[b-olufi7rd0n] .nav-graph-subtabs .mud-tab {
    min-height: 24px;
    font-size: 0.58rem;
    letter-spacing: 0.02em;
}

[b-olufi7rd0n] .nav-graph-subtabs .mud-tabs-toolbar {
    min-height: 24px;
}

/* The plot fills whatever the tab strip leaves. A minimum height keeps a
   trend readable even when the panel is short; without it Plotly collapses
   to a few pixels and draws axes with no room for the curve between them.

   Lower than the single-level case: two strips of tabs now sit above the
   plot, and holding 220px would push the curve off a short panel. */
.nav-graph-subtabs .nav-graph-plot[b-olufi7rd0n] {
    min-height: 180px;
}

.nav-graph-plot[b-olufi7rd0n] {
    flex: 1 1 auto;
    min-height: 220px;
    padding: 4px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/SurveyMissionSimulationTool/Editors/MissionPlanEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             MissionPlanEditorComp.razor.css                    */
/*   Compact WPF-editor-style rows: label | small editor, matching   */
/*   LosVisibilityEditorComp / AltitudeViewshedEditorComp so every   */
/*   tool's left panel looks identical.                              */
/*                                                                   */
/*   The shared look is duplicated rather than imported: Blazor CSS  */
/*   isolation rewrites each component's rules to its own generated  */
/*   scope attribute, so an unscoped or foreign-scope rule simply    */
/*   never matches these elements.                                   */
/* ================================================================= */

/* Scroll wrapper — the route editor is short enough to fit, but the
   readouts grow with localization, so the scroll is the safety net. */
.los-editor-scroll[b-oxgh55zlo3] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-oxgh55zlo3] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-oxgh55zlo3] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-oxgh55zlo3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-oxgh55zlo3] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-oxgh55zlo3] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-oxgh55zlo3] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-oxgh55zlo3] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-oxgh55zlo3] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ----------------------------------------------------------------- */
/*              PAYLOAD-ONLY ADDITIONS                                */
/* ----------------------------------------------------------------- */

/* A native checkbox rather than MudCheckBox, for the same reason the other
   compact controls here are native: MudBlazor's renders ~40px tall and would
   not sit on a 24px editor row. */
.los-checkbox[b-oxgh55zlo3] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* A hint that carries a caution rather than an explanation — an overlap below
   the documented minimum, or a truncated point cloud. Coloured, not just
   worded, so it is not missed while scanning the panel. */
.los-hint-warning[b-oxgh55zlo3] {
    color: var(--mud-palette-warning);
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/SurveyMissionSimulationTool/Editors/MissionRunEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             MissionRunEditorComp.razor.css                    */
/*   Compact WPF-editor-style rows: label | small editor, matching   */
/*   LosVisibilityEditorComp / AltitudeViewshedEditorComp so every   */
/*   tool's left panel looks identical.                              */
/*                                                                   */
/*   The shared look is duplicated rather than imported: Blazor CSS  */
/*   isolation rewrites each component's rules to its own generated  */
/*   scope attribute, so an unscoped or foreign-scope rule simply    */
/*   never matches these elements.                                   */
/* ================================================================= */

/* Scroll wrapper — the route editor is short enough to fit, but the
   readouts grow with localization, so the scroll is the safety net. */
.los-editor-scroll[b-a4hkhxwhlk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-a4hkhxwhlk] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-a4hkhxwhlk] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-a4hkhxwhlk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-a4hkhxwhlk] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-a4hkhxwhlk] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-a4hkhxwhlk] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-a4hkhxwhlk] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-a4hkhxwhlk] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ----------------------------------------------------------------- */
/*              PAYLOAD-ONLY ADDITIONS                                */
/* ----------------------------------------------------------------- */

/* A native checkbox rather than MudCheckBox, for the same reason the other
   compact controls here are native: MudBlazor's renders ~40px tall and would
   not sit on a 24px editor row. */
.los-checkbox[b-a4hkhxwhlk] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* A hint that carries a caution rather than an explanation — an overlap below
   the documented minimum, or a truncated point cloud. Coloured, not just
   worded, so it is not missed while scanning the panel. */
.los-hint-warning[b-a4hkhxwhlk] {
    color: var(--mud-palette-warning);
}

/* ---------------- PLATFORM SELECTOR ---------------- */

/* Two equal buttons: the airframe is one choice of two, and sizing them to
   their labels would make the shorter one read as secondary. */
.platform-row[b-a4hkhxwhlk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}

.platform-row .mud-button-root[b-a4hkhxwhlk] {
    min-width: 0;
    padding: 3px 6px;
    font-size: 0.64rem;
    text-transform: none;
}

.platform-row .mud-button-root .mud-icon-root[b-a4hkhxwhlk] {
    font-size: 0.95rem;
    margin-inline-end: 4px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/SurveyMissionSimulationTool/Editors/PayloadEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             PayloadEditorComp.razor.css                    */
/*   Compact WPF-editor-style rows: label | small editor, matching   */
/*   LosVisibilityEditorComp / AltitudeViewshedEditorComp so every   */
/*   tool's left panel looks identical.                              */
/*                                                                   */
/*   The shared look is duplicated rather than imported: Blazor CSS  */
/*   isolation rewrites each component's rules to its own generated  */
/*   scope attribute, so an unscoped or foreign-scope rule simply    */
/*   never matches these elements.                                   */
/* ================================================================= */

/* Scroll wrapper — the route editor is short enough to fit, but the
   readouts grow with localization, so the scroll is the safety net. */
.los-editor-scroll[b-iuzw888lb2] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-iuzw888lb2] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-iuzw888lb2] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-iuzw888lb2] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-iuzw888lb2] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-iuzw888lb2] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-iuzw888lb2] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-iuzw888lb2] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-iuzw888lb2] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ----------------------------------------------------------------- */
/*              PAYLOAD-ONLY ADDITIONS                                */
/* ----------------------------------------------------------------- */

/* A native checkbox rather than MudCheckBox, for the same reason the other
   compact controls here are native: MudBlazor's renders ~40px tall and would
   not sit on a 24px editor row. */
.los-checkbox[b-iuzw888lb2] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* A hint that carries a caution rather than an explanation — an overlap below
   the documented minimum, or a truncated point cloud. Coloured, not just
   worded, so it is not missed while scanning the panel. */
.los-hint-warning[b-iuzw888lb2] {
    color: var(--mud-palette-warning);
}

/* ----------------------------------------------------------------- */
/*              PAYLOAD SENSOR TABS                                   */
/* ----------------------------------------------------------------- */

/* The payload editor is a tab strip, one tab per instrument, rather than the
   four stacked groups it used to be. ::deep throughout because MudTabs is a
   child COMPONENT and its rendered elements never carry this component's
   scope attribute. */
.payload-editor[b-iuzw888lb2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

[b-iuzw888lb2] .payload-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-iuzw888lb2] .payload-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-iuzw888lb2] .payload-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Icon-and-label tabs at editor scale. The outer tool tabs are the primary
   navigation, so these read one step quieter to keep the hierarchy obvious. */
[b-iuzw888lb2] .payload-tabs .mud-tab {
    min-width: 0;
    padding: 4px 8px;
    font-size: 0.72rem;
    text-transform: none;
}

[b-iuzw888lb2] .payload-tabs .mud-tab .mud-icon-root {
    font-size: 1rem;
    margin-inline-end: 4px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/SurveyMissionSimulationTool/Editors/SurveyAreaEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             SurveyAreaEditorComp.razor.css                    */
/*   Compact WPF-editor-style rows: label | small editor, matching   */
/*   LosVisibilityEditorComp / AltitudeViewshedEditorComp so every   */
/*   tool's left panel looks identical.                              */
/*                                                                   */
/*   The shared look is duplicated rather than imported: Blazor CSS  */
/*   isolation rewrites each component's rules to its own generated  */
/*   scope attribute, so an unscoped or foreign-scope rule simply    */
/*   never matches these elements.                                   */
/* ================================================================= */

/* Scroll wrapper — the route editor is short enough to fit, but the
   readouts grow with localization, so the scroll is the safety net. */
.los-editor-scroll[b-whykh23itd] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-whykh23itd] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-whykh23itd] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-whykh23itd] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-whykh23itd] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette.
   Native <input>/<select> rather than MudBlazor fields: a MudTextField
   renders ~89px tall and several of these rows would not fit the panel. */
.los-input[b-whykh23itd] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right, even under an RTL page. The
       page-root RTL rule sets text-align:right on inputs, so LTR fields
       must restate their alignment with !important to win. */
    direction: ltr !important;
    text-align: left !important;
}

.los-input:focus[b-whykh23itd] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed plan readouts (waypoint count, length, duration) */
.los-readout[b-whykh23itd] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
}

/* Explanatory one-liners under a group (line half-length, edit hint) */
.los-hint[b-whykh23itd] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 2px 0 0 0;
}

/* ----------------------------------------------------------------- */
/*              PAYLOAD-ONLY ADDITIONS                                */
/* ----------------------------------------------------------------- */

/* A native checkbox rather than MudCheckBox, for the same reason the other
   compact controls here are native: MudBlazor's renders ~40px tall and would
   not sit on a 24px editor row. */
.los-checkbox[b-whykh23itd] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* A hint that carries a caution rather than an explanation — an overlap below
   the documented minimum, or a truncated point cloud. Coloured, not just
   worded, so it is not missed while scanning the panel. */
.los-hint-warning[b-whykh23itd] {
    color: var(--mud-palette-warning);
}

/* ----------------------------------------------------------------- */
/*              SHAPE PICKER                                          */
/* ----------------------------------------------------------------- */

/* A grid of shape buttons rather than a select. Shape is the decision this
   panel exists for, so it gets one tap instead of open-scroll-pick — which
   also matters on a touch controller, where a native select is a modal. */
.shape-grid[b-whykh23itd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.shape-button[b-whykh23itd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.shape-button:hover[b-whykh23itd] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

.shape-button:focus-visible[b-whykh23itd] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.shape-button.selected[b-whykh23itd] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* The glyph carries the meaning, so it is sized well above the label. */
.shape-glyph[b-whykh23itd] {
    font-size: 1.15rem;
    line-height: 1;
}

.shape-label[b-whykh23itd] {
    font-size: 0.62rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ----------------------------------------------------------------- */
/*              ROTATION SLIDER                                       */
/* ----------------------------------------------------------------- */

/* Native range rather than MudSlider, for the same reason the compact fields
   are native inputs: MudSlider brings its own 40px-tall layout wrapper. */
.shape-rotation-slider[b-whykh23itd] {
    width: 100%;
    margin: 2px 0 0;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* ----------------------------------------------------------------- */
/*              VERTEX TABLE                                          */
/* ----------------------------------------------------------------- */

/* Capped and scrolled: a circle is 36 vertices, and an uncapped table would
   push every control below it off the panel. */
/* Fills the panel down to the bottom rather than stopping at a fixed height:
   a 36-corner outline showed six rows in a 190 px box with two thirds of the
   panel empty beneath it, and the list is the thing being worked in.
   
   Sized against the VIEWPORT rather than by flex-growing. The enclosing
   .los-editor-scroll is itself a scroller, so a child set to `flex: 1 1 auto`
   grows to its content instead of being bounded by it -- the list reached
   1063 px and pushed the panel into scrolling rather than scrolling itself.
   Subtracting the controls above it leaves the list exactly the remainder. */
.vertex-table-scroll[b-whykh23itd] {
    max-height: calc(100vh - 430px);
    min-height: 140px;
    overflow-y: auto;
    overflow-x: hidden;
}

.vertex-table[b-whykh23itd] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.vertex-table th[b-whykh23itd] {
    text-align: start;
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 2px 3px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
}

.vertex-table td[b-whykh23itd] {
    padding: 1px 3px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.vertex-index[b-whykh23itd] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    width: 1.6rem;
}

/* Coordinates are long; they get the width and the table gets none to spare. */
.vertex-input[b-whykh23itd] {
    width: 100%;
    min-width: 0;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

/* ---------------- LOCATION PICKER ---------------- */

/* The candidate list is capped and scrolls: a fuzzy geocode for a common name
   returns up to ten hits, and letting them push the shape controls off the
   panel would trade one answered question for a lost one. */
.place-result-list[b-whykh23itd] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 8.5rem;
    overflow-y: auto;
    margin: 2px 0 4px 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    background: var(--mud-palette-surface);
}

.place-result[b-whykh23itd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 3px 6px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: 0.7rem;
    text-align: start;
    cursor: pointer;
}

.place-result:hover[b-whykh23itd],
.place-result:focus-visible[b-whykh23itd] {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.place-name[b-whykh23itd] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The country is the disambiguator between two towns of the same name, so it
   must stay readable even when the name above it is truncated. */
.place-country[b-whykh23itd] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.64rem;
}

/* ---------------- DEFINE / EDIT TABS ---------------- */

/* The editor's own tab strip, nested inside the tool's AREA tab. It has to
   flex to the panel height rather than the content height, or the vertex table
   loses its scroll and pushes the panel instead of scrolling inside it. */
[b-whykh23itd] .area-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-whykh23itd] .area-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

[b-whykh23itd] .area-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Smaller than the tool's own tabs: these are a subdivision of one tool tab,
   and matching the outer size would read as a second top-level strip. */
[b-whykh23itd] .area-tabs .mud-tab {
    min-width: 0;
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.68rem;
    text-transform: none;
}

[b-whykh23itd] .area-tabs .mud-tab .mud-icon-root {
    font-size: 0.95rem;
    margin-inline-end: 4px;
}

/* ---------------- CORNER SELECTION ---------------- */

.vertex-table tbody tr[b-whykh23itd] {
    cursor: pointer;
}

/* The selected row is marked by an inline-start bar and a tinted ground, not
   by a colour on the text: the row is mostly number inputs, and recolouring
   their text would fight the input styling and hurt legibility. The bar colour
   matches VERTEX_SELECTED_COLOR so the row and its handle on the globe read as
   the same thing. */
.vertex-table tbody tr.vertex-row-selected td[b-whykh23itd] {
    background: rgba(64, 196, 255, 0.14);
}

.vertex-table tbody tr.vertex-row-selected td:first-child[b-whykh23itd] {
    box-shadow: inset 3px 0 0 0 #40C4FF;
}

/* Two icon buttons in one narrow cell: keep them on one line and strip the
   default padding, or the corners table doubles in height. */
.vertex-actions[b-whykh23itd] {
    white-space: nowrap;
}

.vertex-actions .mud-icon-button[b-whykh23itd] {
    padding: 2px;
}

.vertex-actions .mud-icon-root[b-whykh23itd] {
    font-size: 0.95rem;
}

/* ---------------- TRANSFORM + HISTORY ---------------- */

/* Three gesture buttons sharing one row. Equal columns rather than content
   width, so no one gesture reads as the primary of the three. */
.transform-row[b-whykh23itd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}

.transform-row .mud-button-root[b-whykh23itd] {
    min-width: 0;
    padding: 3px 4px;
    font-size: 0.62rem;
    text-transform: none;
}

.transform-row .mud-button-root .mud-icon-root[b-whykh23itd] {
    font-size: 0.9rem;
    margin-inline-end: 3px;
}

.history-row[b-whykh23itd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}

.history-row .mud-button-root[b-whykh23itd] {
    min-width: 0;
    padding: 3px 4px;
    font-size: 0.62rem;
    text-transform: none;
}

.history-row .mud-button-root .mud-icon-root[b-whykh23itd] {
    font-size: 0.9rem;
    margin-inline-end: 3px;
}

.history-label[b-whykh23itd] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.64rem;
}
/* _content/AspireChatApp.Razor/Components/Tools/Photogrammetry/SurveyMissionSimulationTool/SurveyMissionSimulationToolComp.razor.rz.scp.css */
/* =================================================================
                SurveyMissionSimulationToolComp.razor.css

   Three-panel tool shell: editors | Cesium globe | mission summary,
   plus the summary panel's own tables and file listing.

   The shell rules are DUPLICATED from the other Cesium tools rather
   than imported. Blazor CSS isolation rewrites every rule to this
   component's own generated scope attribute, so a rule living in
   another component's stylesheet — or in an unscoped sheet — simply
   never matches these elements. Omitting them (the first version of
   this file did) leaves .lostool-container at its default
   display: block, and the three panels stack vertically down the
   page instead of sitting side by side.
   ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-spe5wgo7qz] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL: the dir attribute alone reverses a flex row, because a row lays its
   items along the writing direction. Do NOT add row-reverse here — that
   reverses a second time and cancels back to the LTR order. */
.lostool-container[dir="rtl"][b-spe5wgo7qz] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL (editors)                          */
/* ----------------------------------------------------------------- */

/* Editors / globe / summary open at 25% / 50% / 25% (flex 1 / 2 / 1). */
.lostool-left-panel[b-spe5wgo7qz] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-spe5wgo7qz] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-spe5wgo7qz] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* ::deep throughout: MudTabs is a child COMPONENT, so its rendered elements
   never carry this component's scope attribute and an unscoped rule would
   silently fail to match, clipping the editor with no scrollbar. */
[b-spe5wgo7qz] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-spe5wgo7qz] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-spe5wgo7qz] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      CENTRE PANEL (globe)                          */
/* ----------------------------------------------------------------- */

.lostool-map-panel[b-spe5wgo7qz] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.lostool-map[b-spe5wgo7qz] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium's own credit bar is noisy; keep it under the overlays. */
.lostool-map[b-spe5wgo7qz]  .cesium-viewer-bottom {
    z-index: 5;
}

.lostool-map-error[b-spe5wgo7qz] {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    inset-inline-end: 12px;
    z-index: 20;
}

/* RUN TRAJECTORY over the globe, bottom-centre. inset-inline rather than
   left/right so it stays centred under RTL. The bar ignores pointer events so it
   never steals a drag from the globe behind it; the button takes them back.
   Above the Cesium credit bar, which .lostool-map pins to z-index 5. */
.sms-map-run-bar[b-spe5wgo7qz] {
    position: absolute;
    inset-block-end: 16px;
    inset-inline: 0;
    z-index: 21;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.sms-map-run-bar[b-spe5wgo7qz]  .mud-button-root {
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

@media (max-width: 660px) {
    .sms-map-run-bar[b-spe5wgo7qz] {
        inset-block-end: 10px;
    }
}

/* ----------------------------------------------------------------- */
/*                      RIGHT PANEL (summary)                         */
/* ----------------------------------------------------------------- */

.lostool-right-panel[b-spe5wgo7qz] {
    flex: 1 1 0;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-right-panel[b-spe5wgo7qz] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.lostool-right-panel.collapsed[b-spe5wgo7qz] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-spe5wgo7qz] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-spe5wgo7qz] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ---------------- SUMMARY PANEL ---------------- */

.surveymissionsim-summary[b-spe5wgo7qz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
    height: 100%;
}

/* ---------------- SECTIONS ---------------- */

.surveymissionsim-section[b-spe5wgo7qz] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 8px 10px;
    background: var(--mud-palette-surface);
}

.surveymissionsim-section-title[b-spe5wgo7qz] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

/* ---------------- STATISTICS TABLE ---------------- */

.surveymissionsim-table[b-spe5wgo7qz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.surveymissionsim-table td[b-spe5wgo7qz] {
    padding: 3px 0;
    color: var(--mud-palette-text-secondary);
    vertical-align: baseline;
}

/* Figures line up in a column, so tabular digits stop the decimal
   point from wandering as values change during a run. */
.surveymissionsim-table td.surveymissionsim-value[b-spe5wgo7qz] {
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    padding-inline-start: 8px;
}

/* ---------------- WORKSPACE FILE LIST ---------------- */

.surveymissionsim-filelist[b-spe5wgo7qz] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
}

.surveymissionsim-filelist li[b-spe5wgo7qz] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.surveymissionsim-filelist li:last-child[b-spe5wgo7qz] {
    border-bottom: none;
}

/* Paths are the identifying part, so they keep their monospace shape
   and are allowed to shrink; the size never wraps. */
.surveymissionsim-filename[b-spe5wgo7qz] {
    font-family: var(--mud-typography-monospace-family, monospace);
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.surveymissionsim-filesize[b-spe5wgo7qz] {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ---------------- PLAN SUB-TABS ---------------- */

/* Flight and Payload nested inside the PLAN tab. Sized like the AREA editor's
   own strip so the two tools read as the same level of subdivision, and
   flexed so the inner editors keep their own scroll instead of growing the
   panel. */
[b-spe5wgo7qz] .plan-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-spe5wgo7qz] .plan-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-spe5wgo7qz] .plan-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-spe5wgo7qz] .plan-tabs .mud-tab {
    min-width: 0;
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.68rem;
    text-transform: none;
}

[b-spe5wgo7qz] .plan-tabs .mud-tab .mud-icon-root {
    font-size: 0.95rem;
    margin-inline-end: 4px;
}

/* ---------------- SCALE BAR ---------------- */

/* Bottom-left of the globe, clear of Cesium's own attribution strip on the
   right. ::deep because the element is created by the JS helper and so carries
   no scope attribute of its own. */
[b-spe5wgo7qz] .geo-scale-bar {
    position: absolute;
    left: 12px;
    bottom: 34px;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Dark halo rather than a panel: the bar sits over satellite imagery that is
   light in places and near-black in others, and a text shadow stays readable
   on both without covering the map. */
[b-spe5wgo7qz] .geo-scale-bar-label {
    color: #FFFFFF;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.8);
}

[b-spe5wgo7qz] .geo-scale-bar-line {
    height: 6px;
    border: 1px solid #FFFFFF;
    border-top: none;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.95);
    background: rgba(255, 255, 255, 0.18);
}

/* ---------------- SITL MONITOR ---------------- */

/* A console, so it reads like one: monospaced, left-aligned regardless of the
   page's direction, and scrolling within its own box. The autopilot's messages
   are English regardless of the UI language -- they come from ArduPilot, not
   from this product -- so the block is forced LTR even under Hebrew. */
.flight-monitor[b-spe5wgo7qz] {
    flex: 1 1 auto;
    min-height: 0;
    /* The monitor IS the right panel now, not a tab inside it, so it takes the
       whole height rather than whatever a tab panel left it. */
    height: 100%;
    overflow-y: auto;
    padding: 6px 8px;
    direction: ltr;
    text-align: left;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.66rem;
    line-height: 1.45;
    background: var(--mud-palette-background-grey);
}

.flight-monitor-line[b-spe5wgo7qz] {
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.flight-monitor-empty[b-spe5wgo7qz] {
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.7rem;
    padding: 8px 4px;
}

/* ----------------------------------------------------------------- */
/*                  RIGHT PANEL TABS — FILL THE PANEL                 */
/* ----------------------------------------------------------------- */

/*
   The right panel is a flex COLUMN 833px tall, but its MudTabs sized to its
   CONTENT (252px) and every descendant inherited that: the theory iframe ended
   up 157px tall in an 833px panel, showing the first paragraph and nothing
   else.

   MudBlazor does not stretch a tab strip to its parent -- the height has to be
   carried down explicitly, at EVERY level. The chain is
   .monitor-tabs -> .mud-tabs-panels -> .mud-tab-panel -> the tab body, and a
   single link left at auto height collapses the whole thing.

   min-height:0 on each level is what lets a flex child shrink below its content
   height; without it a long theory page pushes the panel taller than the
   viewport instead of scrolling inside its own frame.

   ::deep throughout: these are MudBlazor's own elements, not this component's
   markup, so a scoped selector alone would never match them.
*/
[b-spe5wgo7qz] .monitor-tabs {
    flex: 1 1 auto;
    min-height: 0;
}

[b-spe5wgo7qz] .monitor-tabs > .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

[b-spe5wgo7qz] .monitor-tabs > .mud-tabs-panels > .mud-tab-panel {
    height: 100%;
    min-height: 0;
}

/* The theory tab's own body. It sets height:100% in the global sheet, which
   only resolves once every ancestor above actually has a height -- which is
   what the rules above establish. */
[b-spe5wgo7qz] .monitor-tab-panel > .tool-theory-tab {
    height: 100%;
    min-height: 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/PitchViewshedTool/Charts/PitchViewshedTopViewChartComp.razor.rz.scp.css */
/* ================================================================= */
/*           PitchViewshedTopViewChartComp.razor.css                 */
/*   Pitch-viewshed top-view chart: interactive Plotly plot (drag to  */
/*   pan, wheel to zoom) + the WPF-style control row underneath.      */
/*   Mirrors ViewshedTopViewChartComp.razor.css — the rules are       */
/*   repeated rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute.      */
/*   Axis titles live inside the Plotly layout (its SVG text applies  */
/*   bidi, so Hebrew needs no HTML-title workaround).                 */
/* ================================================================= */

.chart-host[b-it35pmky19] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.chart-plot-area[b-it35pmky19] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (WPF ViewshedTopViewChart.xaml bottom DockPanel) */
.chart-toolbar[b-it35pmky19] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.chart-toolbar-label[b-it35pmky19] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

/* AXES EQUAL checkbox + caption */
.chart-toolbar-check[b-it35pmky19] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.chart-projection-select[b-it35pmky19] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    min-width: 110px;
}

/* Zoom / reset / save buttons (the WpfPlot right-click menu equivalents) */
.chart-toolbar-btn[b-it35pmky19] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.chart-toolbar-btn:hover[b-it35pmky19] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.chart-toolbar-btn:active[b-it35pmky19] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/PitchViewshedTool/Editors/PitchViewshedEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             PitchViewshedEditorComp.razor.css                     */
/*   Compact WPF-PitchViewshedEditor-style rows: label | small       */
/*   editor, so the whole editor fits the panel.                     */
/*                                                                   */
/*   The class names and rules mirror LosVisibilityEditorComp.razor  */
/*   .css / AltitudeViewshedEditorComp.razor.css deliberately: all   */
/*   three editors are ports of WPF editors that share the same      */
/*   LosEditor look. They cannot share ONE stylesheet because Blazor */
/*   CSS isolation rewrites each component's rules to its own         */
/*   generated scope attribute — an unscoped or foreign-scope rule   */
/*   simply never matches these elements.                            */
/* ================================================================= */

/* Scroll wrapper — this editor has several groups (sensor + grid factors +
   pitch accuracy + LOS + both locations), so the scroll is a safety net. */
.los-editor-scroll[b-z6x07zfp2i] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-z6x07zfp2i] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-z6x07zfp2i] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* ----------------------------------------------------------------- */
/*                    COLLAPSIBLE GROUPS                              */
/* ----------------------------------------------------------------- */
/* Read-mostly groups (sensor, grid factors, pitch accuracy, scanned fan)
   are native <details> expanders so the panel fits without scrolling. Native
   <details> is the whole mechanism — no JS, no component state, and the
   open/closed state survives re-renders on its own (a Blazor-managed
   bool would be reset by every recompute's StateHasChanged). */

/* A collapsed <details> must not keep the flex column's gap/padding
   reserved, so it overrides the .los-group display it also carries. */
.los-expander[b-z6x07zfp2i] {
    display: block;
}

/* Only an OPEN expander lays its rows out as the flex column .los-group
   describes; collapsed, the rows are not rendered at all. */
.los-expander[open][b-z6x07zfp2i] {
    display: flex;
    flex-direction: column;
}

/* `display: flex` must beat the UA stylesheet's `summary { display: list-item }`,
   which is what drops the marker AND makes margin-inline-start:auto work on the
   summary value. The element selector adds the specificity to win. */
summary.los-expander-title[b-z6x07zfp2i] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    /* Replace the default disclosure triangle with one that follows the
       group-title color (::marker cannot be recolored reliably). */
    list-style: none;
    user-select: none;
}

.los-expander-title[b-z6x07zfp2i]::-webkit-details-marker {
    display: none;
}

/* Custom disclosure triangle, rotating on open */
.los-expander-title[b-z6x07zfp2i]::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--mud-palette-primary);
    transition: transform 0.15s ease;
}

.los-expander[open] > .los-expander-title[b-z6x07zfp2i]::before {
    transform: rotate(90deg);
}

/* RTL: the triangle points the other way when collapsed */
[dir="rtl"] .los-expander-title[b-z6x07zfp2i]::before {
    border-left: none;
    border-right: 5px solid var(--mud-palette-primary);
}

[dir="rtl"] .los-expander[open] > .los-expander-title[b-z6x07zfp2i]::before {
    transform: rotate(-90deg);
}

/* The headline value kept visible on a COLLAPSED group, so the summary
   still reports what the group holds (e.g. the fan's coverage %).
   Pushed to the far end by the auto margin — which only resolves because the
   summary above is forced to `display: flex`. */
.los-expander-summary[b-z6x07zfp2i] {
    margin-inline-start: auto;
    padding-inline-start: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

.los-expander-summary-ok[b-z6x07zfp2i] {
    color: var(--mud-palette-success);
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-z6x07zfp2i] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-z6x07zfp2i] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette */
.los-input[b-z6x07zfp2i] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.los-input:focus[b-z6x07zfp2i] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Fields the current LOS mode computes: greyed out to read as outputs, but
   readonly rather than disabled so the value stays selectable and copyable.
   Both classes are needed in the selector — .los-input is declared earlier and
   would otherwise win on equal specificity and undo the grey. */
.los-input.los-input-computed[b-z6x07zfp2i] {
    /* --mud-palette-background-grey is undefined in this theme and
       --mud-palette-text-disabled is only 20% white (illegible), so the
       greying uses the surface / secondary-text pair instead. */
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-divider);
    /* Text caret, not a "blocked" cursor — the value can be selected/copied */
    cursor: text;
    /* Keep computed numbers legible despite the dimmed palette */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* A readonly number input still renders spinners; they do nothing here */
.los-input-computed[b-z6x07zfp2i]::-webkit-inner-spin-button,
.los-input-computed[b-z6x07zfp2i]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Focusing a computed field (to select/copy it) must not make it look editable */
.los-input.los-input-computed:focus[b-z6x07zfp2i] {
    outline: none;
    border-color: var(--mud-palette-divider);
}

.los-input-narrow[b-z6x07zfp2i] {
    width: 82px;
}

/* Inline AGL/ASL radio pair */
.los-radio-inline[b-z6x07zfp2i] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.los-radio-inline label[b-z6x07zfp2i] {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

/* Computed readout values */
.los-readout-value[b-z6x07zfp2i] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* Coverage chip / compute button / hint */
.los-verdict-chip[b-z6x07zfp2i] {
    align-self: flex-start;
    margin-top: 2px;
}

.los-compute-button[b-z6x07zfp2i] {
    margin: 4px 6px;
}

.los-hint[b-z6x07zfp2i] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}
/* _content/AspireChatApp.Razor/Components/Tools/PitchViewshedTool/PitchViewshedToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                PitchViewshedToolComp.razor.css                    */
/*   Layout styles for the pitch viewshed tool (RTL aware):          */
/*   left editor tabs | Cesium globe | top-view chart panel.         */
/*   Mirrors AltitudeViewshedToolComp.razor.css — the rules are      */
/*   repeated rather than shared because Blazor CSS isolation scopes */
/*   each component's stylesheet to its own generated attribute, so  */
/*   the class names are identical but the scope attribute is not.   */
/*   Editor styles live in PitchViewshedEditorComp.razor.css and     */
/*   chart styles in PitchViewshedTopViewChartComp.razor.css.        */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-jgnjsht5se] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-jgnjsht5se] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-jgnjsht5se] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-jgnjsht5se] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-jgnjsht5se] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-jgnjsht5se] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-jgnjsht5se] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-jgnjsht5se] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-jgnjsht5se] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-jgnjsht5se] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-jgnjsht5se] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-jgnjsht5se],
.panel-splitter:active[b-jgnjsht5se] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-jgnjsht5se] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-jgnjsht5se] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-jgnjsht5se] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-jgnjsht5se] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-jgnjsht5se] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-jgnjsht5se]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                TOP-VIEW CHART PANEL (host)                         */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-jgnjsht5se] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp so  */
/*   every globe offers the same toolbar options)                      */
/* ================================================================= */

.menu-exaggeration-row[b-jgnjsht5se] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-jgnjsht5se] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-jgnjsht5se] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-jgnjsht5se] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-jgnjsht5se] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-jgnjsht5se] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-jgnjsht5se] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.pitch-viewshed-chat-panel[b-jgnjsht5se] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.pitch-viewshed-chat-panel.collapsed[b-jgnjsht5se] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .pitch-viewshed-chat-panel.collapsed[b-jgnjsht5se] {
    border-right-width: 0;
}

[dir="rtl"] .pitch-viewshed-chat-panel[b-jgnjsht5se] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.pitch-viewshed-chat-host[b-jgnjsht5se] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/PresentationCreationTool/PresentationCreationToolComp.razor.rz.scp.css */
/* ================================================================= */
/*              PresentationCreationToolComp.razor.css                */
/*   Left tabs + the slide editor host. The editor's own styles ship  */
/*   with gv-slides.css (prefixed gvsl-).                             */
/* ================================================================= */

[b-850gkql71f] .pc-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-850gkql71f] .pc-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-850gkql71f] .pc-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.pc-center[b-850gkql71f] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

[b-850gkql71f] .pc-busy {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 20;
}

.pc-host[b-850gkql71f] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/HumanModel/HumanModelTool/Editors/HumanModelEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                HumanModelEditorComp.razor.css                     */
/*   Compact WPF-style rows for the clip picker and playback         */
/*   controls.                                                        */
/*                                                                    */
/*   The .human-row / .human-input family DUPLICATES the LosVisibility */
/*   .los-row / .los-input rules on purpose: Blazor CSS isolation      */
/*   scopes every stylesheet to its own generated attribute, so the    */
/*   LosVisibility rules can never match these elements no matter how  */
/*   the classes are named.                                           */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      SCROLL HOST + GROUPS                          */
/* ----------------------------------------------------------------- */

.human-editor-scroll[b-74x5r6guz5] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px;
}

/* A WPF GroupBox: a titled block of rows. */
.human-group[b-74x5r6guz5] {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.human-group:last-child[b-74x5r6guz5] {
    border-bottom: none;
}

.human-group-title[b-74x5r6guz5] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.human-empty[b-74x5r6guz5] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    padding: 6px 0;
}

/* ----------------------------------------------------------------- */
/*                      CLIP BUTTON GRID                              */
/* ----------------------------------------------------------------- */

/* The WPF UniformGrid Columns="2". auto-fit keeps two columns at the panel's
   default width but collapses to one when a splitter drag makes it narrow,
   which the fixed WPF grid cannot do. */
.human-clip-grid[b-74x5r6guz5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 4px;
}

.human-clip-button[b-74x5r6guz5] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 4px 6px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-size: .75rem;
    text-align: start;
    cursor: pointer;
    overflow: hidden;
}

.human-clip-button:hover[b-74x5r6guz5] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

/* The clip currently playing — the visual the WPF tool only gives through its
   "Clip:" label. */
.human-clip-button.active[b-74x5r6guz5] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
    font-weight: 600;
}

.human-clip-icon[b-74x5r6guz5] {
    flex: 0 0 auto;
}

.human-clip-caption[b-74x5r6guz5] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------------- */
/*                      COMPACT ROWS                                  */
/* ----------------------------------------------------------------- */

.human-row[b-74x5r6guz5] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.human-row-label[b-74x5r6guz5] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.human-checkbox[b-74x5r6guz5] {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* direction:ltr keeps the slider's low-to-high run left-to-right even under
   the RTL default culture, matching the numeric value beside it. */
.human-slider[b-74x5r6guz5] {
    flex: 1;
    height: 24px;
    direction: ltr;
    accent-color: var(--mud-palette-primary);
}

.human-slider-value[b-74x5r6guz5] {
    min-width: 42px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    direction: ltr;
}

.human-readout-value[b-74x5r6guz5] {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    max-width: 60%;
    text-align: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/HumanModel/HumanModelTool/HumanModelToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                 HumanModelToolComp.razor.css                      */
/*   Layout styles for the Human Model tool (RTL aware):             */
/*   left editor tabs | 3D character viewport | ChatBot.             */
/*                                                                    */
/*   Mirrors AStarToolComp.razor.css — the rules are REPEATED rather  */
/*   than shared because Blazor CSS isolation scopes each component's */
/*   stylesheet to its own generated attribute, so identical class    */
/*   names elsewhere would never match these elements. The centre     */
/*   column here is a three.js canvas, not a Plotly chart or a Cesium */
/*   globe: this tool shows a rigged character, not the Earth.        */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.human-container[b-9e8k7tvzl7] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.human-container[dir="rtl"][b-9e8k7tvzl7] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor opens at 1/3 and the viewport takes the rest (flex 1 / 2):
   the character needs the room, and the clip buttons are compact. A splitter
   drag writes inline width/min/max, which overrides the flex basis and pins
   that panel — the other keeps the remainder. */
.human-left-panel[b-9e8k7tvzl7] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .human-left-panel[b-9e8k7tvzl7] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.human-left-panel.collapsed[b-9e8k7tvzl7] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-9e8k7tvzl7] .human-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-9e8k7tvzl7] .human-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-9e8k7tvzl7] .human-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-9e8k7tvzl7] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-9e8k7tvzl7] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* The Status / Clip readouts carried over from the WPF top action bar. They
   shrink before the title does, and ellipsise rather than wrap the header. */
.human-status[b-9e8k7tvzl7] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.human-status:first-of-type[b-9e8k7tvzl7] {
    margin-inline-start: auto;
}

.human-status-label[b-9e8k7tvzl7] {
    opacity: .8;
}

.human-status-value[b-9e8k7tvzl7] {
    font-weight: 600;
}

/* The clip readout carries a time that changes several times a second —
   tabular figures stop the text jittering as the digits change width.
   direction:ltr because "Dancing t=1.25s" is a latin/numeric run. */
.human-clip-value[b-9e8k7tvzl7] {
    font-family: var(--mud-typography-default-family), monospace;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-9e8k7tvzl7] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-9e8k7tvzl7],
.panel-splitter:active[b-9e8k7tvzl7] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-9e8k7tvzl7] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                 CENTRE PANEL (3D VIEWPORT)                         */
/* ----------------------------------------------------------------- */

.human-center-panel[b-9e8k7tvzl7] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

/* three.js appends its canvas here. min-height:0 lets the flex child actually
   shrink, and the explicit block sizing is what the ResizeObserver reads to
   keep the renderer in step with a splitter drag. */
.human-viewport[b-9e8k7tvzl7] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* The scene is orbited by dragging; suppress the browser's own pan/zoom
       so a touch drag rotates the character instead of scrolling the page. */
    touch-action: none;
}

.human-viewport[b-9e8k7tvzl7]  canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Shown until the GLB has loaded and reported its clips. */
.human-viewport-overlay[b-9e8k7tvzl7] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.human-chat-panel[b-9e8k7tvzl7] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.human-chat-panel.collapsed[b-9e8k7tvzl7] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .human-chat-panel.collapsed[b-9e8k7tvzl7] {
    border-right-width: 0;
}

[dir="rtl"] .human-chat-panel[b-9e8k7tvzl7] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.human-chat-host[b-9e8k7tvzl7] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/AStarTool/AStarToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                   AStarToolComp.razor.css                         */
/*   Layout styles for the A* path-planning tool (RTL aware):        */
/*   left editor tabs | exploration plot | result plot | ChatBot.    */
/*                                                                    */
/*   Mirrors AltitudeViewshedToolComp.razor.css — the rules are       */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names elsewhere would never match these          */
/*   elements. The centre column here is a Plotly chart, not a        */
/*   Cesium globe: this tool plans on an abstract 2D metric grid.     */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.astar-container[b-ts8cpb7651] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.astar-container[dir="rtl"][b-ts8cpb7651] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / exploration / result panels open at 25% / 37.5% / 37.5%
   (flex 1 / 1.5 / 1.5): both plots want the same room, and the editor is
   compact. A splitter drag writes inline width/min/max, which overrides the
   flex basis and pins that panel — the others keep sharing the remainder. */
.astar-left-panel[b-ts8cpb7651] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .astar-left-panel[b-ts8cpb7651] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.astar-left-panel.collapsed[b-ts8cpb7651] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-ts8cpb7651] .astar-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-ts8cpb7651] .astar-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-ts8cpb7651] .astar-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-ts8cpb7651] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-ts8cpb7651] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-ts8cpb7651] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-ts8cpb7651],
.panel-splitter:active[b-ts8cpb7651] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-ts8cpb7651] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*         CENTRE PANEL (EXPLORATION) + RIGHT PANEL (RESULT)          */
/* ----------------------------------------------------------------- */

.astar-center-panel[b-ts8cpb7651] {
    flex: 1.5 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.astar-side-panel[b-ts8cpb7651] {
    flex: 1.5 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.astar-chat-panel[b-ts8cpb7651] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.astar-chat-panel.collapsed[b-ts8cpb7651] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .astar-chat-panel.collapsed[b-ts8cpb7651] {
    border-right-width: 0;
}

[dir="rtl"] .astar-chat-panel[b-ts8cpb7651] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.astar-chat-host[b-ts8cpb7651] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/AStarTool/Charts/AStarGridChartComp.razor.rz.scp.css */
/* ================================================================= */
/*                 AStarGridChartComp.razor.css                      */
/*   The A* grid plot: an interactive Plotly canvas (drag to pan,     */
/*   wheel to zoom) plus the WPF-style control row underneath.        */
/*   Mirrors ViewshedTopViewChartComp.razor.css — the rules are       */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names in another component's file would never    */
/*   match these elements. Class names carry an "astar-" prefix so    */
/*   the duplication is visible at the call site.                     */
/* ================================================================= */

.astar-chart-host[b-qj4g2dh3m4] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.astar-chart-plot-area[b-qj4g2dh3m4] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (the WpfPlot right-click menu equivalents) */
.astar-chart-toolbar[b-qj4g2dh3m4] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* AXES EQUAL checkbox + caption */
.astar-chart-toolbar-check[b-qj4g2dh3m4] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.astar-chart-toolbar-btn[b-qj4g2dh3m4] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.astar-chart-toolbar-btn:hover[b-qj4g2dh3m4] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.astar-chart-toolbar-btn:active[b-qj4g2dh3m4] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/AStarTool/Editors/AStarEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                   AStarEditorComp.razor.css                       */
/*   Compact WPF-settings-panel rows: label | small raw editor, so   */
/*   the whole editor fits the left panel without scrolling.         */
/*                                                                    */
/*   These rules DUPLICATE LosVisibilityEditorComp.razor.css's        */
/*   .los-* row/group/input styles under an "astar-" prefix. That is  */
/*   deliberate and not shareable: Blazor CSS isolation scopes each   */
/*   stylesheet to its own generated attribute, so the other          */
/*   component's identical class names would never match these        */
/*   elements.                                                        */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.astar-editor-scroll[b-wptlibzjvm] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.astar-group[b-wptlibzjvm] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.astar-group-title[b-wptlibzjvm] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.astar-row[b-wptlibzjvm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.astar-row-label[b-wptlibzjvm] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette */
.astar-input[b-wptlibzjvm] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.astar-input:focus[b-wptlibzjvm] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Inline slider: flexible track + fixed-width tabular value */
.astar-slider[b-wptlibzjvm] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.astar-slider-value[b-wptlibzjvm] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
}

/* Computed readouts (results group) */
.astar-readout-value[b-wptlibzjvm] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

.astar-readout-ok[b-wptlibzjvm] {
    color: var(--mud-palette-success);
}

.astar-readout-bad[b-wptlibzjvm] {
    color: var(--mud-palette-error);
}

/* ----------------------------------------------------------------- */
/*                     COLLAPSIBLE GROUPS                             */
/* ----------------------------------------------------------------- */

.astar-expander > summary[b-wptlibzjvm] {
    cursor: pointer;
    list-style: none;
}

.astar-expander > summary[b-wptlibzjvm]::-webkit-details-marker {
    display: none;
}

/* Element-qualified so it beats the UA's display:list-item on <summary>;
   without that the flex layout never applies and the summary value cannot
   be pushed to the end of the row. */
summary.astar-expander-title[b-wptlibzjvm] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.astar-expander-summary[b-wptlibzjvm] {
    margin-inline-start: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

/* ----------------------------------------------------------------- */
/*                      OBSTACLE LIST                                 */
/* ----------------------------------------------------------------- */

.astar-obstacle-row[b-wptlibzjvm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font-size: 0.75rem;
    min-height: 24px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.astar-obstacle-row:hover[b-wptlibzjvm] {
    background: var(--mud-palette-action-default-hover);
}

.astar-obstacle-selected[b-wptlibzjvm] {
    background: var(--mud-palette-primary-hover);
    outline: 1px solid var(--mud-palette-primary);
}

.astar-obstacle-shape[b-wptlibzjvm] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.astar-obstacle-pos[b-wptlibzjvm],
.astar-obstacle-size[b-wptlibzjvm] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

.astar-obstacle-remove[b-wptlibzjvm] {
    background: none;
    border: none;
    color: var(--mud-palette-error);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.astar-obstacle-remove:hover[b-wptlibzjvm] {
    color: var(--mud-palette-error-darken);
}

.astar-obstacle-actions[b-wptlibzjvm] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 4px;
}

/* ----------------------------------------------------------------- */
/*                      RUN BUTTON + STATUS                           */
/* ----------------------------------------------------------------- */

/* Blocked-endpoint banner: Start or Goal sits inside an obstacle, so no path
   can exist. Warning-coloured rather than error — the scene is editable, not broken. */
.astar-warning[b-wptlibzjvm] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 6px 0;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: 6px;
    background: rgba(255, 152, 0, 0.12);
    color: var(--mud-palette-warning);
    font-size: 0.75rem;
    line-height: 1.35;
}

.astar-run-button[b-wptlibzjvm] {
    margin: 8px 6px 4px;
}

.astar-status[b-wptlibzjvm] {
    margin: 0 8px 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/AStarTool/Editors/AStarObstaclesComp.razor.rz.scp.css */
/* ================================================================= */
/*                 AStarObstaclesComp.razor.css                      */
/*   The OBSTACLES tab: create toolbar + obstacle list-view with a    */
/*   selected-row geometry form.                                     */
/*                                                                    */
/*   The compact row/input rules duplicate AStarEditorComp's under an */
/*   "astar-obs-" prefix. That is deliberate: Blazor CSS isolation    */
/*   scopes each stylesheet to its own generated attribute, so the    */
/*   other component's identical class names would never match these  */
/*   elements.                                                        */
/* ================================================================= */

.astar-obstacles-scroll[b-a9fvfkahrv] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 4px 6px;
}

/* ----------------------------------------------------------------- */
/*                      CREATE TOOLBAR                                */
/* ----------------------------------------------------------------- */

.astar-obstacles-toolbar[b-a9fvfkahrv] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 6px;
}

.astar-obstacles-hint[b-a9fvfkahrv] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding: 0 2px 6px;
    line-height: 1.35;
}

.astar-obstacles-empty[b-a9fvfkahrv] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    padding: 12px 4px;
    text-align: center;
    font-style: italic;
}

/* ----------------------------------------------------------------- */
/*                        LIST-VIEW                                   */
/* ----------------------------------------------------------------- */

.astar-obstacles-list[b-a9fvfkahrv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.astar-obs-item[b-a9fvfkahrv] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    background: var(--mud-palette-surface);
    transition: border-color 0.15s, background 0.15s;
}

.astar-obs-item:hover[b-a9fvfkahrv] {
    background: var(--mud-palette-action-default-hover);
}

/* Selected row — matches the blue highlight the chart shape takes on */
.astar-obs-selected[b-a9fvfkahrv] {
    border-color: #42A5F5;
    background: rgba(66, 165, 245, 0.12);
}

/* EDIT row — matches the amber the chart handles are drawn in */
.astar-obs-editing[b-a9fvfkahrv] {
    border-color: #FFB300;
    background: rgba(255, 179, 0, 0.12);
}

.astar-obs-header[b-a9fvfkahrv] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    min-height: 26px;
    color: var(--mud-palette-text-primary);
}

.astar-obs-title[b-a9fvfkahrv] {
    font-weight: 600;
    white-space: nowrap;
}

.astar-obs-summary[b-a9fvfkahrv] {
    flex: 1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.72rem;
}

.astar-obs-btn[b-a9fvfkahrv] {
    background: none;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    color: var(--mud-palette-text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.astar-obs-btn:hover[b-a9fvfkahrv] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

/* EDIT engaged */
.astar-obs-btn-active[b-a9fvfkahrv] {
    background: #FFB300;
    border-color: #FFB300;
    color: #000;
}

.astar-obs-remove[b-a9fvfkahrv] {
    background: none;
    border: none;
    color: var(--mud-palette-error);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.astar-obs-remove:hover[b-a9fvfkahrv] {
    color: var(--mud-palette-error-darken);
}

/* ----------------------------------------------------------------- */
/*              SELECTED-ROW GEOMETRY FIELDS                          */
/* ----------------------------------------------------------------- */

.astar-obs-fields[b-a9fvfkahrv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0 2px;
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: 4px;
}

.astar-obs-row[b-a9fvfkahrv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.75rem;
    min-height: 24px;
}

.astar-obs-row-label[b-a9fvfkahrv] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.astar-obs-input[b-a9fvfkahrv] {
    width: 110px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.75rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.astar-obs-input:focus[b-a9fvfkahrv] {
    outline: none;
    border-color: var(--mud-palette-primary);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/CoveragePathPlannerTool/Charts/CoveragePathPlannerChartComp.razor.rz.scp.css */
/* ================================================================= */
/*            CoveragePathPlannerChartComp.razor.css                 */
/*   The coverage plan plot: an interactive Plotly canvas (drag to    */
/*   pan, wheel to zoom, click to draw the area) plus the WPF-style   */
/*   control row underneath.                                         */
/*   Mirrors RrtStarTreeChartComp.razor.css — the rules are           */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names in another component's file would never    */
/*   match these elements. Class names carry a "coverage-" prefix so  */
/*   the duplication is visible at the call site.                    */
/* ================================================================= */

.coverage-chart-host[b-bfkg73x0eq] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.coverage-chart-plot-area[b-bfkg73x0eq] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (the WpfPlot right-click menu equivalents) */
.coverage-chart-toolbar[b-bfkg73x0eq] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* AXES EQUAL checkbox + caption */
.coverage-chart-toolbar-check[b-bfkg73x0eq] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.coverage-chart-toolbar-btn[b-bfkg73x0eq] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.coverage-chart-toolbar-btn:hover[b-bfkg73x0eq] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.coverage-chart-toolbar-btn:active[b-bfkg73x0eq] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/CoveragePathPlannerTool/CoveragePathPlannerToolComp.razor.rz.scp.css */
/* ================================================================= */
/*            CoveragePathPlannerToolComp.razor.css                  */
/*   Layout styles for the coverage path-planning tool (RTL aware):   */
/*   left editor tabs | boundary plot | result plot | ChatBot.        */
/*                                                                    */
/*   Mirrors RrtStarToolComp.razor.css — the rules are REPEATED       */
/*   rather than shared because Blazor CSS isolation scopes each      */
/*   component's stylesheet to its own generated attribute, so        */
/*   identical class names elsewhere would never match these          */
/*   elements. The centre column here is a Plotly chart, not a        */
/*   Cesium globe: this tool plans on an abstract 2D metric plane.    */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.coverage-container[b-al1nvfu45c] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.coverage-container[dir="rtl"][b-al1nvfu45c] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / boundary / result panels open at 25% / 37.5% / 37.5%
   (flex 1 / 1.5 / 1.5): both plots want the same room, and the editor is
   compact. A splitter drag writes inline width/min/max, which overrides the
   flex basis and pins that panel — the others keep sharing the remainder. */
.coverage-left-panel[b-al1nvfu45c] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .coverage-left-panel[b-al1nvfu45c] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.coverage-left-panel.collapsed[b-al1nvfu45c] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-al1nvfu45c] .coverage-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-al1nvfu45c] .coverage-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-al1nvfu45c] .coverage-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-al1nvfu45c] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-al1nvfu45c] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-al1nvfu45c] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-al1nvfu45c],
.panel-splitter:active[b-al1nvfu45c] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-al1nvfu45c] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*         CENTRE PANEL (BOUNDARY) + RIGHT PANEL (RESULT)             */
/* ----------------------------------------------------------------- */

.coverage-center-panel[b-al1nvfu45c] {
    flex: 1.5 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.coverage-side-panel[b-al1nvfu45c] {
    flex: 1.5 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.coverage-chat-panel[b-al1nvfu45c] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.coverage-chat-panel.collapsed[b-al1nvfu45c] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .coverage-chat-panel.collapsed[b-al1nvfu45c] {
    border-right-width: 0;
}

[dir="rtl"] .coverage-chat-panel[b-al1nvfu45c] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.coverage-chat-host[b-al1nvfu45c] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/CoveragePathPlannerTool/Editors/CoveragePathPlannerAreaComp.razor.rz.scp.css */
/* ================================================================= */
/*           CoveragePathPlannerAreaComp.razor.css                   */
/*   Compact editable list-view of the boundary polygon's vertices:   */
/*   index | X | Y | EDIT | remove, one row per point.                */
/*                                                                    */
/*   These rules DUPLICATE PurePursuitWaypointsComp.razor.css's       */
/*   .ppw-* row/input styles under a "cva-" prefix. That is           */
/*   deliberate and not shareable: Blazor CSS isolation scopes each   */
/*   stylesheet to its own generated attribute, so the other          */
/*   component's identical class names would never match these        */
/*   elements.                                                       */
/* ================================================================= */

.cva-scroll[b-jv1j271k6a] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.cva-group[b-jv1j271k6a] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cva-group-title[b-jv1j271k6a] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

.cva-hint[b-jv1j271k6a] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    line-height: 1.35;
    padding: 2px 0 4px;
}

.cva-empty[b-jv1j271k6a] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    font-style: italic;
    padding: 6px 2px;
}

/* ----------------------------------------------------------------- */
/*                      LIST HEADER + ROWS                            */
/* ----------------------------------------------------------------- */

.cva-header-row[b-jv1j271k6a],
.cva-row[b-jv1j271k6a] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 1px 2px;
    border-radius: 4px;
}

.cva-header-row[b-jv1j271k6a] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}

/* Header captions line up over the two numeric columns below */
.cva-header-cell[b-jv1j271k6a] {
    flex: 1;
    min-width: 0;
    text-align: center;
    direction: ltr;
}

/* Reserve the widths of the row's EDIT and remove buttons, so the
   captions stay aligned over the numeric columns */
.cva-btn-spacer[b-jv1j271k6a] {
    width: 40px;
    flex: 0 0 40px;
}

.cva-remove-spacer[b-jv1j271k6a] {
    width: 20px;
    flex: 0 0 20px;
}

.cva-row[b-jv1j271k6a] {
    cursor: pointer;
}

.cva-row:hover[b-jv1j271k6a] {
    background: var(--mud-palette-action-default-hover);
}

/* Selected row — mirrors the cyan ring drawn on the boundary chart */
.cva-row-selected[b-jv1j271k6a] {
    background: var(--mud-palette-primary-hover);
    outline: 1px solid var(--mud-palette-primary);
}

/* Armed for dragging — mirrors the amber handle drawn on the chart */
.cva-row-editing[b-jv1j271k6a] {
    outline: 1px solid var(--mud-palette-warning);
}

.cva-index[b-jv1j271k6a] {
    width: 18px;
    flex: 0 0 18px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    direction: ltr;
}

/* Two coordinate boxes share the row, so each flexes rather than
   taking the editor's fixed 130px width */
.cva-input[b-jv1j271k6a] {
    flex: 1;
    min-width: 0;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.cva-input:focus[b-jv1j271k6a] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* ----------------------------------------------------------------- */
/*                      ROW BUTTONS                                   */
/* ----------------------------------------------------------------- */

.cva-btn[b-jv1j271k6a] {
    width: 40px;
    flex: 0 0 40px;
    height: 22px;
    box-sizing: border-box;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
}

.cva-btn:hover:not(:disabled)[b-jv1j271k6a] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

/* Armed: this vertex's handle is live on the chart */
.cva-btn-active[b-jv1j271k6a] {
    background: var(--mud-palette-warning);
    border-color: var(--mud-palette-warning);
    color: #000000;
}

.cva-btn:disabled[b-jv1j271k6a] {
    color: var(--mud-palette-text-disabled);
    border-color: var(--mud-palette-lines-default);
    cursor: default;
}

.cva-remove[b-jv1j271k6a] {
    width: 20px;
    flex: 0 0 20px;
    background: none;
    border: none;
    color: var(--mud-palette-error);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.cva-remove:disabled[b-jv1j271k6a] {
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

/* ----------------------------------------------------------------- */
/*                     ACTIONS + SUMMARY                              */
/* ----------------------------------------------------------------- */

.cva-actions[b-jv1j271k6a] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 6px;
}

/* Vertex-count / area readouts under the list */
.cva-summary-row[b-jv1j271k6a] {
    cursor: default;
    font-size: 0.78rem;
}

.cva-summary-row:hover[b-jv1j271k6a] {
    background: none;
}

.cva-summary-label[b-jv1j271k6a] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cva-summary-value[b-jv1j271k6a] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/CoveragePathPlannerTool/Editors/CoveragePathPlannerEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*           CoveragePathPlannerEditorComp.razor.css                 */
/*   Compact WPF-settings-panel rows: label | small raw editor, so   */
/*   the whole editor fits the left panel without scrolling.         */
/*                                                                    */
/*   These rules DUPLICATE RrtStarEditorComp.razor.css's .rrtstar-*   */
/*   row/group/input styles under a "coverage-" prefix. That is       */
/*   deliberate and not shareable: Blazor CSS isolation scopes each   */
/*   stylesheet to its own generated attribute, so the other          */
/*   component's identical class names would never match these        */
/*   elements.                                                        */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.coverage-editor-scroll[b-6hks1pxtee] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.coverage-group[b-6hks1pxtee] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.coverage-group-title[b-6hks1pxtee] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.coverage-row[b-6hks1pxtee] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.coverage-row-label[b-6hks1pxtee] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette */
.coverage-input[b-6hks1pxtee] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.coverage-input:focus[b-6hks1pxtee] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Inline slider: flexible track + fixed-width tabular value */
.coverage-slider[b-6hks1pxtee] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.coverage-slider-value[b-6hks1pxtee] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
}

/* Computed readouts (area + results groups) */
.coverage-readout-value[b-6hks1pxtee] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

.coverage-readout-ok[b-6hks1pxtee] {
    color: var(--mud-palette-success);
}

/* The WPF areaStatusText: a small wrapping hint under the readouts */
.coverage-hint[b-6hks1pxtee] {
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0 4px;
}

/* ----------------------------------------------------------------- */
/*                   BOUNDARY ACTION BUTTONS                          */
/* ----------------------------------------------------------------- */

.coverage-actions[b-6hks1pxtee] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 2px;
}

/* ----------------------------------------------------------------- */
/*                      RUN BUTTON + STATUS                           */
/* ----------------------------------------------------------------- */

/* Not-ready banner: the ring is open or too small, so no sweep can be planned.
   Warning-coloured rather than error — the boundary is editable, not broken. */
.coverage-warning[b-6hks1pxtee] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 6px 0;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: 6px;
    background: rgba(255, 152, 0, 0.12);
    color: var(--mud-palette-warning);
    font-size: 0.75rem;
    line-height: 1.35;
}

.coverage-run-button[b-6hks1pxtee] {
    margin: 8px 6px 4px;
}

.coverage-status[b-6hks1pxtee] {
    margin: 0 8px 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/DijkstraTool/Charts/DijkstraGridChartComp.razor.rz.scp.css */
/* ================================================================= */
/*                 DijkstraGridChartComp.razor.css                      */
/*   The Dijkstra grid plot: an interactive Plotly canvas (drag to pan,     */
/*   wheel to zoom) plus the WPF-style control row underneath.        */
/*   Mirrors ViewshedTopViewChartComp.razor.css — the rules are       */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names in another component's file would never    */
/*   match these elements. Class names carry an "dijkstra-" prefix so    */
/*   the duplication is visible at the call site.                     */
/* ================================================================= */

.dijkstra-chart-host[b-k030b4fnu7] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.dijkstra-chart-plot-area[b-k030b4fnu7] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (the WpfPlot right-click menu equivalents) */
.dijkstra-chart-toolbar[b-k030b4fnu7] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* AXES EQUAL checkbox + caption */
.dijkstra-chart-toolbar-check[b-k030b4fnu7] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.dijkstra-chart-toolbar-btn[b-k030b4fnu7] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.dijkstra-chart-toolbar-btn:hover[b-k030b4fnu7] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.dijkstra-chart-toolbar-btn:active[b-k030b4fnu7] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/DijkstraTool/DijkstraToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                   DijkstraToolComp.razor.css                         */
/*   Layout styles for the Dijkstra path-planning tool (RTL aware):        */
/*   left editor tabs | exploration plot | result plot | ChatBot.    */
/*                                                                    */
/*   Mirrors AltitudeViewshedToolComp.razor.css — the rules are       */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names elsewhere would never match these          */
/*   elements. The centre column here is a Plotly chart, not a        */
/*   Cesium globe: this tool plans on an abstract 2D metric grid.     */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.dijkstra-container[b-b18hukc75x] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.dijkstra-container[dir="rtl"][b-b18hukc75x] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / exploration / result panels open at 25% / 37.5% / 37.5%
   (flex 1 / 1.5 / 1.5): both plots want the same room, and the editor is
   compact. A splitter drag writes inline width/min/max, which overrides the
   flex basis and pins that panel — the others keep sharing the remainder. */
.dijkstra-left-panel[b-b18hukc75x] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .dijkstra-left-panel[b-b18hukc75x] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.dijkstra-left-panel.collapsed[b-b18hukc75x] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-b18hukc75x] .dijkstra-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-b18hukc75x] .dijkstra-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-b18hukc75x] .dijkstra-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-b18hukc75x] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-b18hukc75x] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-b18hukc75x] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-b18hukc75x],
.panel-splitter:active[b-b18hukc75x] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-b18hukc75x] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*         CENTRE PANEL (EXPLORATION) + RIGHT PANEL (RESULT)          */
/* ----------------------------------------------------------------- */

.dijkstra-center-panel[b-b18hukc75x] {
    flex: 1.5 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.dijkstra-side-panel[b-b18hukc75x] {
    flex: 1.5 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.dijkstra-chat-panel[b-b18hukc75x] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.dijkstra-chat-panel.collapsed[b-b18hukc75x] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .dijkstra-chat-panel.collapsed[b-b18hukc75x] {
    border-right-width: 0;
}

[dir="rtl"] .dijkstra-chat-panel[b-b18hukc75x] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.dijkstra-chat-host[b-b18hukc75x] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/DijkstraTool/Editors/DijkstraEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                   DijkstraEditorComp.razor.css                       */
/*   Compact WPF-settings-panel rows: label | small raw editor, so   */
/*   the whole editor fits the left panel without scrolling.         */
/*                                                                    */
/*   These rules DUPLICATE LosVisibilityEditorComp.razor.css's        */
/*   .los-* row/group/input styles under an "dijkstra-" prefix. That is  */
/*   deliberate and not shareable: Blazor CSS isolation scopes each   */
/*   stylesheet to its own generated attribute, so the other          */
/*   component's identical class names would never match these        */
/*   elements.                                                        */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.dijkstra-editor-scroll[b-yb59n3jvma] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.dijkstra-group[b-yb59n3jvma] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dijkstra-group-title[b-yb59n3jvma] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.dijkstra-row[b-yb59n3jvma] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.dijkstra-row-label[b-yb59n3jvma] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette */
.dijkstra-input[b-yb59n3jvma] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.dijkstra-input:focus[b-yb59n3jvma] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Inline slider: flexible track + fixed-width tabular value */
.dijkstra-slider[b-yb59n3jvma] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.dijkstra-slider-value[b-yb59n3jvma] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
}

/* Computed readouts (results group) */
.dijkstra-readout-value[b-yb59n3jvma] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

.dijkstra-readout-ok[b-yb59n3jvma] {
    color: var(--mud-palette-success);
}

.dijkstra-readout-bad[b-yb59n3jvma] {
    color: var(--mud-palette-error);
}

/* ----------------------------------------------------------------- */
/*                     COLLAPSIBLE GROUPS                             */
/* ----------------------------------------------------------------- */

.dijkstra-expander > summary[b-yb59n3jvma] {
    cursor: pointer;
    list-style: none;
}

.dijkstra-expander > summary[b-yb59n3jvma]::-webkit-details-marker {
    display: none;
}

/* Element-qualified so it beats the UA's display:list-item on <summary>;
   without that the flex layout never applies and the summary value cannot
   be pushed to the end of the row. */
summary.dijkstra-expander-title[b-yb59n3jvma] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dijkstra-expander-summary[b-yb59n3jvma] {
    margin-inline-start: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

/* ----------------------------------------------------------------- */
/*                      OBSTACLE LIST                                 */
/* ----------------------------------------------------------------- */

.dijkstra-obstacle-row[b-yb59n3jvma] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font-size: 0.75rem;
    min-height: 24px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.dijkstra-obstacle-row:hover[b-yb59n3jvma] {
    background: var(--mud-palette-action-default-hover);
}

.dijkstra-obstacle-selected[b-yb59n3jvma] {
    background: var(--mud-palette-primary-hover);
    outline: 1px solid var(--mud-palette-primary);
}

.dijkstra-obstacle-shape[b-yb59n3jvma] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dijkstra-obstacle-pos[b-yb59n3jvma],
.dijkstra-obstacle-size[b-yb59n3jvma] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

.dijkstra-obstacle-remove[b-yb59n3jvma] {
    background: none;
    border: none;
    color: var(--mud-palette-error);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.dijkstra-obstacle-remove:hover[b-yb59n3jvma] {
    color: var(--mud-palette-error-darken);
}

.dijkstra-obstacle-actions[b-yb59n3jvma] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 4px;
}

/* ----------------------------------------------------------------- */
/*                      RUN BUTTON + STATUS                           */
/* ----------------------------------------------------------------- */

/* Blocked-endpoint banner: Start or Goal sits inside an obstacle, so no path
   can exist. Warning-coloured rather than error — the scene is editable, not broken. */
.dijkstra-warning[b-yb59n3jvma] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 6px 0;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: 6px;
    background: rgba(255, 152, 0, 0.12);
    color: var(--mud-palette-warning);
    font-size: 0.75rem;
    line-height: 1.35;
}

.dijkstra-run-button[b-yb59n3jvma] {
    margin: 8px 6px 4px;
}

.dijkstra-status[b-yb59n3jvma] {
    margin: 0 8px 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/DijkstraTool/Editors/DijkstraObstaclesComp.razor.rz.scp.css */
/* ================================================================= */
/*                 DijkstraObstaclesComp.razor.css                      */
/*   The OBSTACLES tab: create toolbar + obstacle list-view with a    */
/*   selected-row geometry form.                                     */
/*                                                                    */
/*   The compact row/input rules duplicate DijkstraEditorComp's under an */
/*   "dijkstra-obs-" prefix. That is deliberate: Blazor CSS isolation    */
/*   scopes each stylesheet to its own generated attribute, so the    */
/*   other component's identical class names would never match these  */
/*   elements.                                                        */
/* ================================================================= */

.dijkstra-obstacles-scroll[b-hbacecuun7] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 4px 6px;
}

/* ----------------------------------------------------------------- */
/*                      CREATE TOOLBAR                                */
/* ----------------------------------------------------------------- */

.dijkstra-obstacles-toolbar[b-hbacecuun7] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 6px;
}

.dijkstra-obstacles-hint[b-hbacecuun7] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding: 0 2px 6px;
    line-height: 1.35;
}

.dijkstra-obstacles-empty[b-hbacecuun7] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    padding: 12px 4px;
    text-align: center;
    font-style: italic;
}

/* ----------------------------------------------------------------- */
/*                        LIST-VIEW                                   */
/* ----------------------------------------------------------------- */

.dijkstra-obstacles-list[b-hbacecuun7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dijkstra-obs-item[b-hbacecuun7] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    background: var(--mud-palette-surface);
    transition: border-color 0.15s, background 0.15s;
}

.dijkstra-obs-item:hover[b-hbacecuun7] {
    background: var(--mud-palette-action-default-hover);
}

/* Selected row — matches the blue highlight the chart shape takes on */
.dijkstra-obs-selected[b-hbacecuun7] {
    border-color: #42A5F5;
    background: rgba(66, 165, 245, 0.12);
}

/* EDIT row — matches the amber the chart handles are drawn in */
.dijkstra-obs-editing[b-hbacecuun7] {
    border-color: #FFB300;
    background: rgba(255, 179, 0, 0.12);
}

.dijkstra-obs-header[b-hbacecuun7] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    min-height: 26px;
    color: var(--mud-palette-text-primary);
}

.dijkstra-obs-title[b-hbacecuun7] {
    font-weight: 600;
    white-space: nowrap;
}

.dijkstra-obs-summary[b-hbacecuun7] {
    flex: 1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.72rem;
}

.dijkstra-obs-btn[b-hbacecuun7] {
    background: none;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    color: var(--mud-palette-text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.dijkstra-obs-btn:hover[b-hbacecuun7] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

/* EDIT engaged */
.dijkstra-obs-btn-active[b-hbacecuun7] {
    background: #FFB300;
    border-color: #FFB300;
    color: #000;
}

.dijkstra-obs-remove[b-hbacecuun7] {
    background: none;
    border: none;
    color: var(--mud-palette-error);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.dijkstra-obs-remove:hover[b-hbacecuun7] {
    color: var(--mud-palette-error-darken);
}

/* ----------------------------------------------------------------- */
/*              SELECTED-ROW GEOMETRY FIELDS                          */
/* ----------------------------------------------------------------- */

.dijkstra-obs-fields[b-hbacecuun7] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0 2px;
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: 4px;
}

.dijkstra-obs-row[b-hbacecuun7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.75rem;
    min-height: 24px;
}

.dijkstra-obs-row-label[b-hbacecuun7] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dijkstra-obs-input[b-hbacecuun7] {
    width: 110px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.75rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.dijkstra-obs-input:focus[b-hbacecuun7] {
    outline: none;
    border-color: var(--mud-palette-primary);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/RrtStarTool/Charts/RrtStarTreeChartComp.razor.rz.scp.css */
/* ================================================================= */
/*                 RrtStarTreeChartComp.razor.css                      */
/*   The RRT* grid plot: an interactive Plotly canvas (drag to pan,     */
/*   wheel to zoom) plus the WPF-style control row underneath.        */
/*   Mirrors ViewshedTopViewChartComp.razor.css — the rules are       */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names in another component's file would never    */
/*   match these elements. Class names carry an "rrtstar-" prefix so    */
/*   the duplication is visible at the call site.                     */
/* ================================================================= */

.rrtstar-chart-host[b-pn5qk2qsap] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.rrtstar-chart-plot-area[b-pn5qk2qsap] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (the WpfPlot right-click menu equivalents) */
.rrtstar-chart-toolbar[b-pn5qk2qsap] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* AXES EQUAL checkbox + caption */
.rrtstar-chart-toolbar-check[b-pn5qk2qsap] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.rrtstar-chart-toolbar-btn[b-pn5qk2qsap] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.rrtstar-chart-toolbar-btn:hover[b-pn5qk2qsap] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.rrtstar-chart-toolbar-btn:active[b-pn5qk2qsap] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/RrtStarTool/Editors/RrtStarEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                   RrtStarEditorComp.razor.css                       */
/*   Compact WPF-settings-panel rows: label | small raw editor, so   */
/*   the whole editor fits the left panel without scrolling.         */
/*                                                                    */
/*   These rules DUPLICATE LosVisibilityEditorComp.razor.css's        */
/*   .los-* row/group/input styles under an "rrtstar-" prefix. That is  */
/*   deliberate and not shareable: Blazor CSS isolation scopes each   */
/*   stylesheet to its own generated attribute, so the other          */
/*   component's identical class names would never match these        */
/*   elements.                                                        */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.rrtstar-editor-scroll[b-mwd4q7etao] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.rrtstar-group[b-mwd4q7etao] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rrtstar-group-title[b-mwd4q7etao] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.rrtstar-row[b-mwd4q7etao] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.rrtstar-row-label[b-mwd4q7etao] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette */
.rrtstar-input[b-mwd4q7etao] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.rrtstar-input:focus[b-mwd4q7etao] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Inline slider: flexible track + fixed-width tabular value */
.rrtstar-slider[b-mwd4q7etao] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.rrtstar-slider-value[b-mwd4q7etao] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
}

/* Computed readouts (results group) */
.rrtstar-readout-value[b-mwd4q7etao] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

.rrtstar-readout-ok[b-mwd4q7etao] {
    color: var(--mud-palette-success);
}

.rrtstar-readout-bad[b-mwd4q7etao] {
    color: var(--mud-palette-error);
}

/* ----------------------------------------------------------------- */
/*                     COLLAPSIBLE GROUPS                             */
/* ----------------------------------------------------------------- */

.rrtstar-expander > summary[b-mwd4q7etao] {
    cursor: pointer;
    list-style: none;
}

.rrtstar-expander > summary[b-mwd4q7etao]::-webkit-details-marker {
    display: none;
}

/* Element-qualified so it beats the UA's display:list-item on <summary>;
   without that the flex layout never applies and the summary value cannot
   be pushed to the end of the row. */
summary.rrtstar-expander-title[b-mwd4q7etao] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rrtstar-expander-summary[b-mwd4q7etao] {
    margin-inline-start: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

/* ----------------------------------------------------------------- */
/*                      OBSTACLE LIST                                 */
/* ----------------------------------------------------------------- */

.rrtstar-obstacle-row[b-mwd4q7etao] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font-size: 0.75rem;
    min-height: 24px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.rrtstar-obstacle-row:hover[b-mwd4q7etao] {
    background: var(--mud-palette-action-default-hover);
}

.rrtstar-obstacle-selected[b-mwd4q7etao] {
    background: var(--mud-palette-primary-hover);
    outline: 1px solid var(--mud-palette-primary);
}

.rrtstar-obstacle-shape[b-mwd4q7etao] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrtstar-obstacle-pos[b-mwd4q7etao],
.rrtstar-obstacle-size[b-mwd4q7etao] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

.rrtstar-obstacle-remove[b-mwd4q7etao] {
    background: none;
    border: none;
    color: var(--mud-palette-error);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.rrtstar-obstacle-remove:hover[b-mwd4q7etao] {
    color: var(--mud-palette-error-darken);
}

.rrtstar-obstacle-actions[b-mwd4q7etao] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 4px;
}

/* ----------------------------------------------------------------- */
/*                      RUN BUTTON + STATUS                           */
/* ----------------------------------------------------------------- */

/* Blocked-endpoint banner: Start or Goal sits inside an obstacle, so no path
   can exist. Warning-coloured rather than error — the scene is editable, not broken. */
.rrtstar-warning[b-mwd4q7etao] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 6px 0;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: 6px;
    background: rgba(255, 152, 0, 0.12);
    color: var(--mud-palette-warning);
    font-size: 0.75rem;
    line-height: 1.35;
}

.rrtstar-run-button[b-mwd4q7etao] {
    margin: 8px 6px 4px;
}

.rrtstar-status[b-mwd4q7etao] {
    margin: 0 8px 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/RrtStarTool/Editors/RrtStarObstaclesComp.razor.rz.scp.css */
/* ================================================================= */
/*                 RrtStarObstaclesComp.razor.css                      */
/*   The OBSTACLES tab: create toolbar + obstacle list-view with a    */
/*   selected-row geometry form.                                     */
/*                                                                    */
/*   The compact row/input rules duplicate RrtStarEditorComp's under an */
/*   "rrtstar-obs-" prefix. That is deliberate: Blazor CSS isolation    */
/*   scopes each stylesheet to its own generated attribute, so the    */
/*   other component's identical class names would never match these  */
/*   elements.                                                        */
/* ================================================================= */

.rrtstar-obstacles-scroll[b-24hj2esacr] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 4px 6px;
}

/* ----------------------------------------------------------------- */
/*                      CREATE TOOLBAR                                */
/* ----------------------------------------------------------------- */

.rrtstar-obstacles-toolbar[b-24hj2esacr] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 6px;
}

.rrtstar-obstacles-hint[b-24hj2esacr] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding: 0 2px 6px;
    line-height: 1.35;
}

.rrtstar-obstacles-empty[b-24hj2esacr] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    padding: 12px 4px;
    text-align: center;
    font-style: italic;
}

/* ----------------------------------------------------------------- */
/*                        LIST-VIEW                                   */
/* ----------------------------------------------------------------- */

.rrtstar-obstacles-list[b-24hj2esacr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rrtstar-obs-item[b-24hj2esacr] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    background: var(--mud-palette-surface);
    transition: border-color 0.15s, background 0.15s;
}

.rrtstar-obs-item:hover[b-24hj2esacr] {
    background: var(--mud-palette-action-default-hover);
}

/* Selected row — matches the blue highlight the chart shape takes on */
.rrtstar-obs-selected[b-24hj2esacr] {
    border-color: #42A5F5;
    background: rgba(66, 165, 245, 0.12);
}

/* EDIT row — matches the amber the chart handles are drawn in */
.rrtstar-obs-editing[b-24hj2esacr] {
    border-color: #FFB300;
    background: rgba(255, 179, 0, 0.12);
}

.rrtstar-obs-header[b-24hj2esacr] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    min-height: 26px;
    color: var(--mud-palette-text-primary);
}

.rrtstar-obs-title[b-24hj2esacr] {
    font-weight: 600;
    white-space: nowrap;
}

.rrtstar-obs-summary[b-24hj2esacr] {
    flex: 1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.72rem;
}

.rrtstar-obs-btn[b-24hj2esacr] {
    background: none;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    color: var(--mud-palette-text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.rrtstar-obs-btn:hover[b-24hj2esacr] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

/* EDIT engaged */
.rrtstar-obs-btn-active[b-24hj2esacr] {
    background: #FFB300;
    border-color: #FFB300;
    color: #000;
}

.rrtstar-obs-remove[b-24hj2esacr] {
    background: none;
    border: none;
    color: var(--mud-palette-error);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.rrtstar-obs-remove:hover[b-24hj2esacr] {
    color: var(--mud-palette-error-darken);
}

/* ----------------------------------------------------------------- */
/*              SELECTED-ROW GEOMETRY FIELDS                          */
/* ----------------------------------------------------------------- */

.rrtstar-obs-fields[b-24hj2esacr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0 2px;
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: 4px;
}

.rrtstar-obs-row[b-24hj2esacr] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.75rem;
    min-height: 24px;
}

.rrtstar-obs-row-label[b-24hj2esacr] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrtstar-obs-input[b-24hj2esacr] {
    width: 110px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.75rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.rrtstar-obs-input:focus[b-24hj2esacr] {
    outline: none;
    border-color: var(--mud-palette-primary);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathPlanning/RrtStarTool/RrtStarToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                   RrtStarToolComp.razor.css                         */
/*   Layout styles for the RRT* path-planning tool (RTL aware):        */
/*   left editor tabs | exploration plot | result plot | ChatBot.    */
/*                                                                    */
/*   Mirrors AltitudeViewshedToolComp.razor.css — the rules are       */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names elsewhere would never match these          */
/*   elements. The centre column here is a Plotly chart, not a        */
/*   Cesium globe: this tool plans on an abstract 2D metric grid.     */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.rrtstar-container[b-ug7zvxbz6p] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.rrtstar-container[dir="rtl"][b-ug7zvxbz6p] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / exploration / result panels open at 25% / 37.5% / 37.5%
   (flex 1 / 1.5 / 1.5): both plots want the same room, and the editor is
   compact. A splitter drag writes inline width/min/max, which overrides the
   flex basis and pins that panel — the others keep sharing the remainder. */
.rrtstar-left-panel[b-ug7zvxbz6p] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .rrtstar-left-panel[b-ug7zvxbz6p] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.rrtstar-left-panel.collapsed[b-ug7zvxbz6p] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-ug7zvxbz6p] .rrtstar-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-ug7zvxbz6p] .rrtstar-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-ug7zvxbz6p] .rrtstar-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-ug7zvxbz6p] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-ug7zvxbz6p] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-ug7zvxbz6p] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-ug7zvxbz6p],
.panel-splitter:active[b-ug7zvxbz6p] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-ug7zvxbz6p] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*         CENTRE PANEL (EXPLORATION) + RIGHT PANEL (RESULT)          */
/* ----------------------------------------------------------------- */

.rrtstar-center-panel[b-ug7zvxbz6p] {
    flex: 1.5 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.rrtstar-side-panel[b-ug7zvxbz6p] {
    flex: 1.5 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.rrtstar-chat-panel[b-ug7zvxbz6p] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.rrtstar-chat-panel.collapsed[b-ug7zvxbz6p] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .rrtstar-chat-panel.collapsed[b-ug7zvxbz6p] {
    border-right-width: 0;
}

[dir="rtl"] .rrtstar-chat-panel[b-ug7zvxbz6p] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.rrtstar-chat-host[b-ug7zvxbz6p] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/MpcControlTool/Charts/MpcControlPathChartComp.razor.rz.scp.css */
/* ================================================================= */
/*              MpcControlPathChartComp.razor.css                   */
/*   The MPC plan-view path plot: an interactive Plotly      */
/*   canvas (drag to pan, wheel to zoom) plus the WPF-style control   */
/*   row underneath.                                                  */
/*                                                                    */
/*   Mirrors AStarGridChartComp.razor.css — the rules are REPEATED    */
/*   rather than shared because Blazor CSS isolation scopes each      */
/*   component's stylesheet to its own generated attribute, so        */
/*   identical class names in another component's file would never    */
/*   match these elements. Class names carry a "mpc-" prefix so the    */
/*   duplication is visible at the call site.                         */
/* ================================================================= */

.mpc-chart-host[b-0o2kvq4x4c] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.mpc-chart-plot-area[b-0o2kvq4x4c] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (the WpfPlot right-click menu equivalents) */
.mpc-chart-toolbar[b-0o2kvq4x4c] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* AXES EQUAL checkbox + caption */
.mpc-chart-toolbar-check[b-0o2kvq4x4c] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.mpc-chart-toolbar-btn[b-0o2kvq4x4c] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.mpc-chart-toolbar-btn:hover[b-0o2kvq4x4c] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.mpc-chart-toolbar-btn:active[b-0o2kvq4x4c] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/MpcControlTool/Charts/MpcControlSignalsChartComp.razor.rz.scp.css */
/* ================================================================= */
/*             MpcControlSignalsChartComp.razor.css                 */
/*   The three stacked output signals (error / steering / velocity)   */
/*   as one Plotly figure, plus the WPF-style control row underneath. */
/*                                                                    */
/*   Mirrors MpcControlPathChartComp.razor.css — the rules are       */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names in another component's file would never    */
/*   match these elements.                                            */
/* ================================================================= */

.mpc-signals-host[b-b26c8q9f4l] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.mpc-signals-plot-area[b-b26c8q9f4l] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (the WpfPlot right-click menu equivalents) */
.mpc-signals-toolbar[b-b26c8q9f4l] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.mpc-signals-toolbar-btn[b-b26c8q9f4l] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.mpc-signals-toolbar-btn:hover[b-b26c8q9f4l] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.mpc-signals-toolbar-btn:active[b-b26c8q9f4l] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/MpcControlTool/Editors/MpcControlEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                 MpcControlEditorComp.razor.css                   */
/*   Compact WPF-settings-panel rows: label | small raw editor, so   */
/*   the whole editor fits the left panel without scrolling.         */
/*                                                                    */
/*   These rules DUPLICATE AStarEditorComp.razor.css's .astar-*       */
/*   row/group/input styles under a "mpc-" prefix. That is deliberate  */
/*   and not shareable: Blazor CSS isolation scopes each stylesheet   */
/*   to its own generated attribute, so the other component's         */
/*   identical class names would never match these elements.          */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.mpc-editor-scroll[b-0cy2ylhoxy] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.mpc-group[b-0cy2ylhoxy] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mpc-group-title[b-0cy2ylhoxy] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.mpc-row[b-0cy2ylhoxy] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.mpc-row-label[b-0cy2ylhoxy] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs styled to the Mud palette */
.mpc-input[b-0cy2ylhoxy] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.mpc-input:focus[b-0cy2ylhoxy] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Inline slider: flexible track + fixed-width tabular value */
.mpc-slider[b-0cy2ylhoxy] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.mpc-slider-value[b-0cy2ylhoxy] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
}

/* Computed readouts (results group) */
.mpc-readout-value[b-0cy2ylhoxy] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

/* The collapsible-group and waypoint-list rules that used to live here moved
   out with the waypoints themselves — they now have their own WAYPOINTS tab
   (MpcControlWaypointsComp.razor.css). */

/* ----------------------------------------------------------------- */
/*                      RUN BUTTON + STATUS                           */
/* ----------------------------------------------------------------- */

.mpc-run-button[b-0cy2ylhoxy] {
    margin: 8px 6px 4px;
}

.mpc-status[b-0cy2ylhoxy] {
    margin: 0 8px 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/MpcControlTool/Editors/MpcControlWaypointsComp.razor.rz.scp.css */
/* ================================================================= */
/*              MpcControlWaypointsComp.razor.css                   */
/*   Compact editable list-view of the reference waypoints:          */
/*   index | X | Y | remove, one row per waypoint.                   */
/*                                                                    */
/*   These rules DUPLICATE MpcControlEditorComp.razor.css's group/  */
/*   input styles under a "mpcw-" prefix. That is deliberate and not  */
/*   shareable: Blazor CSS isolation scopes each stylesheet to its   */
/*   own generated attribute, so the other component's identical     */
/*   class names would never match these elements.                   */
/* ================================================================= */

.mpcw-scroll[b-ria9ro5ueq] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.mpcw-group[b-ria9ro5ueq] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mpcw-group-title[b-ria9ro5ueq] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

.mpcw-hint[b-ria9ro5ueq] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    line-height: 1.35;
    padding: 2px 0 4px;
}

/* ----------------------------------------------------------------- */
/*                      LIST HEADER + ROWS                            */
/* ----------------------------------------------------------------- */

.mpcw-header-row[b-ria9ro5ueq],
.mpcw-row[b-ria9ro5ueq] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 1px 2px;
    border-radius: 4px;
}

.mpcw-header-row[b-ria9ro5ueq] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}

/* Header captions line up over the two numeric columns below */
.mpcw-header-cell[b-ria9ro5ueq] {
    flex: 1;
    min-width: 0;
    text-align: center;
    direction: ltr;
}

/* Reserves the width of the row's remove button, so the captions stay aligned */
.mpcw-remove-spacer[b-ria9ro5ueq] {
    width: 20px;
    flex: 0 0 20px;
}

.mpcw-row[b-ria9ro5ueq] {
    cursor: pointer;
}

.mpcw-row:hover[b-ria9ro5ueq] {
    background: var(--mud-palette-action-default-hover);
}

/* Selected row — mirrors the highlight ring drawn on the chart */
.mpcw-row-selected[b-ria9ro5ueq] {
    background: var(--mud-palette-primary-hover);
    outline: 1px solid var(--mud-palette-primary);
}

.mpcw-index[b-ria9ro5ueq] {
    width: 18px;
    flex: 0 0 18px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    direction: ltr;
}

/* Two coordinate boxes share the row, so each flexes rather than
   taking the editor's fixed 130px width */
.mpcw-input[b-ria9ro5ueq] {
    flex: 1;
    min-width: 0;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.mpcw-input:focus[b-ria9ro5ueq] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.mpcw-remove[b-ria9ro5ueq] {
    width: 20px;
    flex: 0 0 20px;
    background: none;
    border: none;
    color: var(--mud-palette-error);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.mpcw-remove:disabled[b-ria9ro5ueq] {
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

/* ----------------------------------------------------------------- */
/*                          ACTIONS                                   */
/* ----------------------------------------------------------------- */

.mpcw-actions[b-ria9ro5ueq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 6px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/MpcControlTool/MpcControlToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                MpcControlToolComp.razor.css                      */
/*   Layout styles for the MPC path-tracking tool (RTL       */
/*   aware): left editor tabs | path plot | signals plot | ChatBot.   */
/*                                                                    */
/*   Mirrors AStarToolComp.razor.css — the rules are REPEATED rather  */
/*   than shared because Blazor CSS isolation scopes each component's */
/*   stylesheet to its own generated attribute, so identical class    */
/*   names elsewhere would never match these elements. Both centre    */
/*   and right columns here are Plotly charts, not a Cesium globe:    */
/*   this tool tracks a course on an abstract 2D metric plane.        */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.mpc-container[b-d6lgrepg3m] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.mpc-container[dir="rtl"][b-d6lgrepg3m] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / path / signals panels open at 25% / 37.5% / 37.5%
   (flex 1 / 1.5 / 1.5): both plots want the same room, and the editor is
   compact. A splitter drag writes inline width/min/max, which overrides the
   flex basis and pins that panel — the others keep sharing the remainder. */
.mpc-left-panel[b-d6lgrepg3m] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .mpc-left-panel[b-d6lgrepg3m] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.mpc-left-panel.collapsed[b-d6lgrepg3m] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-d6lgrepg3m] .mpc-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-d6lgrepg3m] .mpc-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-d6lgrepg3m] .mpc-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-d6lgrepg3m] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-d6lgrepg3m] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-d6lgrepg3m] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-d6lgrepg3m],
.panel-splitter:active[b-d6lgrepg3m] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-d6lgrepg3m] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*           CENTRE PANEL (PATH) + RIGHT PANEL (SIGNALS)              */
/* ----------------------------------------------------------------- */

.mpc-center-panel[b-d6lgrepg3m] {
    flex: 1.5 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.mpc-side-panel[b-d6lgrepg3m] {
    flex: 1.5 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.mpc-chat-panel[b-d6lgrepg3m] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.mpc-chat-panel.collapsed[b-d6lgrepg3m] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .mpc-chat-panel.collapsed[b-d6lgrepg3m] {
    border-right-width: 0;
}

[dir="rtl"] .mpc-chat-panel[b-d6lgrepg3m] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.mpc-chat-host[b-d6lgrepg3m] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/PurePursuitTool/Charts/PurePursuitPathChartComp.razor.rz.scp.css */
/* ================================================================= */
/*              PurePursuitPathChartComp.razor.css                   */
/*   The Pure Pursuit plan-view path plot: an interactive Plotly      */
/*   canvas (drag to pan, wheel to zoom) plus the WPF-style control   */
/*   row underneath.                                                  */
/*                                                                    */
/*   Mirrors AStarGridChartComp.razor.css — the rules are REPEATED    */
/*   rather than shared because Blazor CSS isolation scopes each      */
/*   component's stylesheet to its own generated attribute, so        */
/*   identical class names in another component's file would never    */
/*   match these elements. Class names carry a "pp-" prefix so the    */
/*   duplication is visible at the call site.                         */
/* ================================================================= */

.pp-chart-host[b-57iut5dof0] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.pp-chart-plot-area[b-57iut5dof0] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (the WpfPlot right-click menu equivalents) */
.pp-chart-toolbar[b-57iut5dof0] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* AXES EQUAL checkbox + caption */
.pp-chart-toolbar-check[b-57iut5dof0] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.pp-chart-toolbar-btn[b-57iut5dof0] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.pp-chart-toolbar-btn:hover[b-57iut5dof0] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.pp-chart-toolbar-btn:active[b-57iut5dof0] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/PurePursuitTool/Charts/PurePursuitSignalsChartComp.razor.rz.scp.css */
/* ================================================================= */
/*             PurePursuitSignalsChartComp.razor.css                 */
/*   The three stacked output signals (error / steering / velocity)   */
/*   as one Plotly figure, plus the WPF-style control row underneath. */
/*                                                                    */
/*   Mirrors PurePursuitPathChartComp.razor.css — the rules are       */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names in another component's file would never    */
/*   match these elements.                                            */
/* ================================================================= */

.pp-signals-host[b-toqpse8rtr] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.pp-signals-plot-area[b-toqpse8rtr] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (the WpfPlot right-click menu equivalents) */
.pp-signals-toolbar[b-toqpse8rtr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.pp-signals-toolbar-btn[b-toqpse8rtr] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.pp-signals-toolbar-btn:hover[b-toqpse8rtr] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.pp-signals-toolbar-btn:active[b-toqpse8rtr] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/PurePursuitTool/Editors/PurePursuitEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                 PurePursuitEditorComp.razor.css                   */
/*   Compact WPF-settings-panel rows: label | small raw editor, so   */
/*   the whole editor fits the left panel without scrolling.         */
/*                                                                    */
/*   These rules DUPLICATE AStarEditorComp.razor.css's .astar-*       */
/*   row/group/input styles under a "pp-" prefix. That is deliberate  */
/*   and not shareable: Blazor CSS isolation scopes each stylesheet   */
/*   to its own generated attribute, so the other component's         */
/*   identical class names would never match these elements.          */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.pp-editor-scroll[b-5dto9mc0n8] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.pp-group[b-5dto9mc0n8] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pp-group-title[b-5dto9mc0n8] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.pp-row[b-5dto9mc0n8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.pp-row-label[b-5dto9mc0n8] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs styled to the Mud palette */
.pp-input[b-5dto9mc0n8] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.pp-input:focus[b-5dto9mc0n8] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Inline slider: flexible track + fixed-width tabular value */
.pp-slider[b-5dto9mc0n8] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.pp-slider-value[b-5dto9mc0n8] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
}

/* Computed readouts (results group) */
.pp-readout-value[b-5dto9mc0n8] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

/* The collapsible-group and waypoint-list rules that used to live here moved
   out with the waypoints themselves — they now have their own WAYPOINTS tab
   (PurePursuitWaypointsComp.razor.css). */

/* ----------------------------------------------------------------- */
/*                      RUN BUTTON + STATUS                           */
/* ----------------------------------------------------------------- */

.pp-run-button[b-5dto9mc0n8] {
    margin: 8px 6px 4px;
}

.pp-status[b-5dto9mc0n8] {
    margin: 0 8px 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/PurePursuitTool/Editors/PurePursuitWaypointsComp.razor.rz.scp.css */
/* ================================================================= */
/*              PurePursuitWaypointsComp.razor.css                   */
/*   Compact editable list-view of the reference waypoints:          */
/*   index | X | Y | remove, one row per waypoint.                   */
/*                                                                    */
/*   These rules DUPLICATE PurePursuitEditorComp.razor.css's group/  */
/*   input styles under a "ppw-" prefix. That is deliberate and not  */
/*   shareable: Blazor CSS isolation scopes each stylesheet to its   */
/*   own generated attribute, so the other component's identical     */
/*   class names would never match these elements.                   */
/* ================================================================= */

.ppw-scroll[b-iimzaflrsy] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.ppw-group[b-iimzaflrsy] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ppw-group-title[b-iimzaflrsy] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

.ppw-hint[b-iimzaflrsy] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    line-height: 1.35;
    padding: 2px 0 4px;
}

/* ----------------------------------------------------------------- */
/*                      LIST HEADER + ROWS                            */
/* ----------------------------------------------------------------- */

.ppw-header-row[b-iimzaflrsy],
.ppw-row[b-iimzaflrsy] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 1px 2px;
    border-radius: 4px;
}

.ppw-header-row[b-iimzaflrsy] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}

/* Header captions line up over the two numeric columns below */
.ppw-header-cell[b-iimzaflrsy] {
    flex: 1;
    min-width: 0;
    text-align: center;
    direction: ltr;
}

/* Reserves the width of the row's remove button, so the captions stay aligned */
.ppw-remove-spacer[b-iimzaflrsy] {
    width: 20px;
    flex: 0 0 20px;
}

.ppw-row[b-iimzaflrsy] {
    cursor: pointer;
}

.ppw-row:hover[b-iimzaflrsy] {
    background: var(--mud-palette-action-default-hover);
}

/* Selected row — mirrors the highlight ring drawn on the chart */
.ppw-row-selected[b-iimzaflrsy] {
    background: var(--mud-palette-primary-hover);
    outline: 1px solid var(--mud-palette-primary);
}

.ppw-index[b-iimzaflrsy] {
    width: 18px;
    flex: 0 0 18px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    direction: ltr;
}

/* Two coordinate boxes share the row, so each flexes rather than
   taking the editor's fixed 130px width */
.ppw-input[b-iimzaflrsy] {
    flex: 1;
    min-width: 0;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.ppw-input:focus[b-iimzaflrsy] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.ppw-remove[b-iimzaflrsy] {
    width: 20px;
    flex: 0 0 20px;
    background: none;
    border: none;
    color: var(--mud-palette-error);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.ppw-remove:disabled[b-iimzaflrsy] {
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

/* ----------------------------------------------------------------- */
/*                          ACTIONS                                   */
/* ----------------------------------------------------------------- */

.ppw-actions[b-iimzaflrsy] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 6px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/PurePursuitTool/PurePursuitToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                PurePursuitToolComp.razor.css                      */
/*   Layout styles for the Pure Pursuit path-tracking tool (RTL       */
/*   aware): left editor tabs | path plot | signals plot | ChatBot.   */
/*                                                                    */
/*   Mirrors AStarToolComp.razor.css — the rules are REPEATED rather  */
/*   than shared because Blazor CSS isolation scopes each component's */
/*   stylesheet to its own generated attribute, so identical class    */
/*   names elsewhere would never match these elements. Both centre    */
/*   and right columns here are Plotly charts, not a Cesium globe:    */
/*   this tool tracks a course on an abstract 2D metric plane.        */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.pp-container[b-x1dzey6lew] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.pp-container[dir="rtl"][b-x1dzey6lew] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / path / signals panels open at 25% / 37.5% / 37.5%
   (flex 1 / 1.5 / 1.5): both plots want the same room, and the editor is
   compact. A splitter drag writes inline width/min/max, which overrides the
   flex basis and pins that panel — the others keep sharing the remainder. */
.pp-left-panel[b-x1dzey6lew] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .pp-left-panel[b-x1dzey6lew] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.pp-left-panel.collapsed[b-x1dzey6lew] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-x1dzey6lew] .pp-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-x1dzey6lew] .pp-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-x1dzey6lew] .pp-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-x1dzey6lew] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-x1dzey6lew] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-x1dzey6lew] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-x1dzey6lew],
.panel-splitter:active[b-x1dzey6lew] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-x1dzey6lew] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*           CENTRE PANEL (PATH) + RIGHT PANEL (SIGNALS)              */
/* ----------------------------------------------------------------- */

.pp-center-panel[b-x1dzey6lew] {
    flex: 1.5 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.pp-side-panel[b-x1dzey6lew] {
    flex: 1.5 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.pp-chat-panel[b-x1dzey6lew] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.pp-chat-panel.collapsed[b-x1dzey6lew] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .pp-chat-panel.collapsed[b-x1dzey6lew] {
    border-right-width: 0;
}

[dir="rtl"] .pp-chat-panel[b-x1dzey6lew] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.pp-chat-host[b-x1dzey6lew] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/StanleyTool/Charts/StanleyPathChartComp.razor.rz.scp.css */
/* ================================================================= */
/*              StanleyPathChartComp.razor.css                   */
/*   The Stanley plan-view path plot: an interactive Plotly      */
/*   canvas (drag to pan, wheel to zoom) plus the WPF-style control   */
/*   row underneath.                                                  */
/*                                                                    */
/*   Mirrors AStarGridChartComp.razor.css — the rules are REPEATED    */
/*   rather than shared because Blazor CSS isolation scopes each      */
/*   component's stylesheet to its own generated attribute, so        */
/*   identical class names in another component's file would never    */
/*   match these elements. Class names carry a "st-" prefix so the    */
/*   duplication is visible at the call site.                         */
/* ================================================================= */

.st-chart-host[b-tczcy7tmn9] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.st-chart-plot-area[b-tczcy7tmn9] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (the WpfPlot right-click menu equivalents) */
.st-chart-toolbar[b-tczcy7tmn9] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* AXES EQUAL checkbox + caption */
.st-chart-toolbar-check[b-tczcy7tmn9] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.st-chart-toolbar-btn[b-tczcy7tmn9] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.st-chart-toolbar-btn:hover[b-tczcy7tmn9] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.st-chart-toolbar-btn:active[b-tczcy7tmn9] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/StanleyTool/Charts/StanleySignalsChartComp.razor.rz.scp.css */
/* ================================================================= */
/*             StanleySignalsChartComp.razor.css                 */
/*   The three stacked output signals (error / steering / velocity)   */
/*   as one Plotly figure, plus the WPF-style control row underneath. */
/*                                                                    */
/*   Mirrors StanleyPathChartComp.razor.css — the rules are       */
/*   REPEATED rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   identical class names in another component's file would never    */
/*   match these elements.                                            */
/* ================================================================= */

.st-signals-host[b-4by5c9a0yb] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.st-signals-plot-area[b-4by5c9a0yb] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (the WpfPlot right-click menu equivalents) */
.st-signals-toolbar[b-4by5c9a0yb] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.st-signals-toolbar-btn[b-4by5c9a0yb] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.st-signals-toolbar-btn:hover[b-4by5c9a0yb] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.st-signals-toolbar-btn:active[b-4by5c9a0yb] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/StanleyTool/Editors/StanleyEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                 StanleyEditorComp.razor.css                   */
/*   Compact WPF-settings-panel rows: label | small raw editor, so   */
/*   the whole editor fits the left panel without scrolling.         */
/*                                                                    */
/*   These rules DUPLICATE AStarEditorComp.razor.css's .astar-*       */
/*   row/group/input styles under a "st-" prefix. That is deliberate  */
/*   and not shareable: Blazor CSS isolation scopes each stylesheet   */
/*   to its own generated attribute, so the other component's         */
/*   identical class names would never match these elements.          */
/* ================================================================= */

/* Scroll wrapper (safety only — the compact layout fits without it) */
.st-editor-scroll[b-fn2z96wh07] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.st-group[b-fn2z96wh07] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.st-group-title[b-fn2z96wh07] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.st-row[b-fn2z96wh07] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.st-row-label[b-fn2z96wh07] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs styled to the Mud palette */
.st-input[b-fn2z96wh07] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.st-input:focus[b-fn2z96wh07] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Inline slider: flexible track + fixed-width tabular value */
.st-slider[b-fn2z96wh07] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.st-slider-value[b-fn2z96wh07] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
}

/* Computed readouts (results group) */
.st-readout-value[b-fn2z96wh07] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

/* The collapsible-group and waypoint-list rules that used to live here moved
   out with the waypoints themselves — they now have their own WAYPOINTS tab
   (StanleyWaypointsComp.razor.css). */

/* ----------------------------------------------------------------- */
/*                      RUN BUTTON + STATUS                           */
/* ----------------------------------------------------------------- */

.st-run-button[b-fn2z96wh07] {
    margin: 8px 6px 4px;
}

.st-status[b-fn2z96wh07] {
    margin: 0 8px 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/StanleyTool/Editors/StanleyWaypointsComp.razor.rz.scp.css */
/* ================================================================= */
/*              StanleyWaypointsComp.razor.css                   */
/*   Compact editable list-view of the reference waypoints:          */
/*   index | X | Y | remove, one row per waypoint.                   */
/*                                                                    */
/*   These rules DUPLICATE StanleyEditorComp.razor.css's group/  */
/*   input styles under a "stw-" prefix. That is deliberate and not  */
/*   shareable: Blazor CSS isolation scopes each stylesheet to its   */
/*   own generated attribute, so the other component's identical     */
/*   class names would never match these elements.                   */
/* ================================================================= */

.stw-scroll[b-ry2eexnqbs] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.stw-group[b-ry2eexnqbs] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.stw-group-title[b-ry2eexnqbs] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

.stw-hint[b-ry2eexnqbs] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    line-height: 1.35;
    padding: 2px 0 4px;
}

/* ----------------------------------------------------------------- */
/*                      LIST HEADER + ROWS                            */
/* ----------------------------------------------------------------- */

.stw-header-row[b-ry2eexnqbs],
.stw-row[b-ry2eexnqbs] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 1px 2px;
    border-radius: 4px;
}

.stw-header-row[b-ry2eexnqbs] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    min-height: 18px;
}

/* Header captions line up over the two numeric columns below */
.stw-header-cell[b-ry2eexnqbs] {
    flex: 1;
    min-width: 0;
    text-align: center;
    direction: ltr;
}

/* Reserves the width of the row's remove button, so the captions stay aligned */
.stw-remove-spacer[b-ry2eexnqbs] {
    width: 20px;
    flex: 0 0 20px;
}

.stw-row[b-ry2eexnqbs] {
    cursor: pointer;
}

.stw-row:hover[b-ry2eexnqbs] {
    background: var(--mud-palette-action-default-hover);
}

/* Selected row — mirrors the highlight ring drawn on the chart */
.stw-row-selected[b-ry2eexnqbs] {
    background: var(--mud-palette-primary-hover);
    outline: 1px solid var(--mud-palette-primary);
}

.stw-index[b-ry2eexnqbs] {
    width: 18px;
    flex: 0 0 18px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    direction: ltr;
}

/* Two coordinate boxes share the row, so each flexes rather than
   taking the editor's fixed 130px width */
.stw-input[b-ry2eexnqbs] {
    flex: 1;
    min-width: 0;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.stw-input:focus[b-ry2eexnqbs] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.stw-remove[b-ry2eexnqbs] {
    width: 20px;
    flex: 0 0 20px;
    background: none;
    border: none;
    color: var(--mud-palette-error);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.stw-remove:disabled[b-ry2eexnqbs] {
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

/* ----------------------------------------------------------------- */
/*                          ACTIONS                                   */
/* ----------------------------------------------------------------- */

.stw-actions[b-ry2eexnqbs] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 6px;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/PathTracking/StanleyTool/StanleyToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                StanleyToolComp.razor.css                      */
/*   Layout styles for the Stanley path-tracking tool (RTL       */
/*   aware): left editor tabs | path plot | signals plot | ChatBot.   */
/*                                                                    */
/*   Mirrors AStarToolComp.razor.css — the rules are REPEATED rather  */
/*   than shared because Blazor CSS isolation scopes each component's */
/*   stylesheet to its own generated attribute, so identical class    */
/*   names elsewhere would never match these elements. Both centre    */
/*   and right columns here are Plotly charts, not a Cesium globe:    */
/*   this tool tracks a course on an abstract 2D metric plane.        */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.st-container[b-gd2900imc0] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.st-container[dir="rtl"][b-gd2900imc0] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / path / signals panels open at 25% / 37.5% / 37.5%
   (flex 1 / 1.5 / 1.5): both plots want the same room, and the editor is
   compact. A splitter drag writes inline width/min/max, which overrides the
   flex basis and pins that panel — the others keep sharing the remainder. */
.st-left-panel[b-gd2900imc0] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .st-left-panel[b-gd2900imc0] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.st-left-panel.collapsed[b-gd2900imc0] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-gd2900imc0] .st-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-gd2900imc0] .st-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-gd2900imc0] .st-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-gd2900imc0] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-gd2900imc0] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-gd2900imc0] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-gd2900imc0],
.panel-splitter:active[b-gd2900imc0] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-gd2900imc0] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*           CENTRE PANEL (PATH) + RIGHT PANEL (SIGNALS)              */
/* ----------------------------------------------------------------- */

.st-center-panel[b-gd2900imc0] {
    flex: 1.5 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.st-side-panel[b-gd2900imc0] {
    flex: 1.5 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.st-chat-panel[b-gd2900imc0] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.st-chat-panel.collapsed[b-gd2900imc0] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .st-chat-panel.collapsed[b-gd2900imc0] {
    border-right-width: 0;
}

[dir="rtl"] .st-chat-panel[b-gd2900imc0] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.st-chat-host[b-gd2900imc0] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/RobotTraining/RobotTrainingToolComp/RobotTrainingToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                RobotTrainingToolComp.razor.css                     */
/*   Layout for the RobotTrainingTool (RTL aware):                    */
/*   left control tabs | live training viewport.                      */
/*                                                                    */
/*   Rules are REPEATED from the Simulation tool rather than shared:   */
/*   Blazor CSS isolation scopes each component's stylesheet to its    */
/*   own generated attribute, so identical class names elsewhere       */
/*   would never match these elements.                                 */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.rtt-container[b-ehuaou41f0] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;

    /* Sized to what is actually left below the tool's own top edge. MudBlazor's layout carries
       min-height:100vh, so anything above the page — a browser warning bar, an extension strip
       — pushes the bottom of the tool under the fold with no way to scroll to it.
       dvh tracks a phone's collapsing address bar; the vh line is the fallback. */
    height: 100%;
    max-height: calc(100vh - var(--gv-tool-top, 0px));
    max-height: calc(100dvh - var(--gv-tool-top, 0px));
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* The dir attribute alone reverses a flex row. Do NOT add row-reverse: on an rtl container
   that reverses a second time and cancels out, restoring the LTR layout. */
.rtt-container[dir="rtl"][b-ehuaou41f0] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

.rtt-left-panel[b-ehuaou41f0] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-inline-end: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-surface);
}

.rtt-left-panel.collapsed[b-ehuaou41f0] {
    flex: 0 0 auto;
    min-width: 0;
    width: 48px;
}

.panel-header[b-ehuaou41f0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex: 0 0 auto;
}

.panel-title[b-ehuaou41f0] {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    font-weight: 500;
}

/* ----------------------------------------------------------------- */
/*                          TABS                                      */
/* ----------------------------------------------------------------- */

.rtt-tabs[b-ehuaou41f0] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The tab strip must not stretch to fill the panel: without this the header row grows and
   swallows the content below it. */
.rtt-tabs[b-ehuaou41f0]  .mud-tabs-toolbar {
    flex: 0 0 auto !important;
}

.rtt-tab-panel[b-ehuaou41f0] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.rtt-section[b-ehuaou41f0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    min-height: 0;
}

/* PROGRESS can outgrow the panel once the chart is there, so it scrolls. */
.rtt-scroll[b-ehuaou41f0] {
    overflow-y: auto;
    max-height: 100%;
}

.rtt-section-title[b-ehuaou41f0] {
    margin-top: 4px;
    font-weight: 500;
}

.rtt-hint[b-ehuaou41f0] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

/* ----------------------------------------------------------------- */
/*                        COMPACT INPUTS                              */
/* ----------------------------------------------------------------- */

/* Native controls at 24px rather than MudBlazor fields at ~89px. The panel holds several of
   these and a stack of full-height Mud inputs pushes the transport off the bottom. */
.rtt-select[b-ehuaou41f0],
.rtt-input[b-ehuaou41f0] {
    height: 26px;
    padding: 0 6px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* An RTL page sets text-align:right on every input. These carry numbers and enum keys, which
   read left-to-right in any language, so the direction is pinned back — with !important,
   because the page-level rule is itself important. */
.rtt-container[dir="rtl"] .rtt-input[b-ehuaou41f0] {
    direction: ltr !important;
    text-align: left !important;
}

.rtt-select:disabled[b-ehuaou41f0],
.rtt-input:disabled[b-ehuaou41f0] {
    opacity: 0.55;
}

.rtt-check-row[b-ehuaou41f0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}

/* ----------------------------------------------------------------- */
/*                        TRANSPORT                                   */
/* ----------------------------------------------------------------- */

.rtt-transport[b-ehuaou41f0] {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.rtt-transport > *[b-ehuaou41f0] {
    flex: 1 1 0;
}

.rtt-status[b-ehuaou41f0] {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    min-height: 1.2em;
}

.rtt-alert[b-ehuaou41f0] {
    margin-top: 6px;
}

/* ----------------------------------------------------------------- */
/*                         READOUT                                    */
/* ----------------------------------------------------------------- */

.rtt-readout[b-ehuaou41f0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
}

.rtt-readout-row[b-ehuaou41f0] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.82rem;
}

.rtt-readout-row > span:first-child[b-ehuaou41f0] {
    color: var(--mud-palette-text-secondary);
}

/* Figures are tabular so the columns do not jitter as digits change four times a second. */
.rtt-readout-row > span:last-child[b-ehuaou41f0] {
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* ----------------------------------------------------------------- */
/*                          CHART                                     */
/* ----------------------------------------------------------------- */

.rtt-chart[b-ehuaou41f0] {
    width: 100%;
    height: 120px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    background-color: var(--mud-palette-background);
}

.rtt-chart-line[b-ehuaou41f0] {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 1.5;

    /* The polyline is drawn in the view box's own units and then stretched by
       preserveAspectRatio="none"; without this the stroke stretches with it and the line
       thickens toward one end. */
    vector-effect: non-scaling-stroke;
}

.rtt-chart-scale[b-ehuaou41f0] {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* ----------------------------------------------------------------- */
/*                        SPLITTER                                    */
/* ----------------------------------------------------------------- */

.panel-splitter[b-ehuaou41f0] {
    flex: 0 0 auto;
    width: 5px;
    cursor: col-resize;
    background-color: var(--mud-palette-divider);
    opacity: 0.5;
}

.panel-splitter:hover[b-ehuaou41f0] {
    opacity: 1;
    background-color: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-ehuaou41f0] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTRE PANEL                                  */
/* ----------------------------------------------------------------- */

.rtt-center-panel[b-ehuaou41f0] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.rtt-viewport-stack[b-ehuaou41f0] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.rtt-viewport[b-ehuaou41f0] {
    width: 100%;
    height: 100%;
    min-height: 0;

    /* The three.js canvas is placed by the helper; without this the container collapses to
       zero height and the renderer initialises at a 0x0 viewport. */
    position: absolute;
    inset: 0;
}

.rtt-viewport-overlay[b-ehuaou41f0] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
    background-color: var(--mud-palette-overlay-light);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/Ros2Sim/Ros2SimToolComp/Ros2SimToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                   Ros2SimToolComp.razor.css                        */
/*   Layout for the ROS 2 simulation tool (RTL aware):                */
/*   left tab panel | physics viewport.                               */
/*                                                                    */
/*   Mirrors RobotSimulationToolComp.razor.css. The rules are REPEATED */
/*   rather than shared because Blazor CSS isolation scopes each       */
/*   component's stylesheet to its own generated attribute, so an      */
/*   identical class name in another component's file does not reach   */
/*   this markup.                                                      */
/* ================================================================= */

.ros2-container[b-isbvmsbijq] {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ---------------- left panel ---------------- */

.ros2-left-panel[b-isbvmsbijq] {
    display: flex;
    flex-direction: column;
    width: 360px;
    min-width: 280px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-inline-end: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.ros2-left-panel.collapsed[b-isbvmsbijq] {
    width: 48px;
    min-width: 48px;
}

.panel-header[b-isbvmsbijq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.panel-title[b-isbvmsbijq] {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The tab strip must not stretch to fill the panel: without an explicit
   flex basis MudTabs grows its toolbar and pushes the content off the
   bottom of a laptop-height panel. */
.ros2-tabs[b-isbvmsbijq] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ros2-tabs[b-isbvmsbijq]  .mud-tabs-tabbar {
    flex: 0 0 auto !important;
}

.ros2-tab-panel[b-isbvmsbijq] {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    height: 100%;
}

/* ---------------- cards ---------------- */

.ros2-card[b-isbvmsbijq] {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
}

.ros2-hint[b-isbvmsbijq] {
    display: block;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

.ros2-warning[b-isbvmsbijq] {
    display: block;
    color: var(--mud-palette-warning-darken);
    margin-top: 2px;
}

.ros2-transport[b-isbvmsbijq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

/* ---------------- graph ---------------- */

.ros2-node[b-isbvmsbijq] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 0;
}

.ros2-table[b-isbvmsbijq] {
    font-size: 0.78rem;
}

/* A message type is long and secondary to the topic name it sits under. */
.ros2-type[b-isbvmsbijq] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* A JSON payload is machine text: it must stay LTR and monospaced even when the
   surrounding UI is Hebrew, or the braces and slashes reorder and the message
   becomes unreadable. Scrolls inside itself so a wide message cannot make the
   whole panel scroll sideways. */
.ros2-json[b-isbvmsbijq] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.35;
    margin: 6px 0 0;
    padding: 8px;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    border-radius: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

/* ---------------- viewport ---------------- */

.ros2-center-panel[b-isbvmsbijq] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

/* The three.js canvas is appended into this element by the helper, so it must
   have a real size before the first render — a zero-height host produces a
   canvas that renders nothing and looks like a failed load. */
.ros2-viewport[b-isbvmsbijq] {
    width: 100%;
    height: 100%;
    min-height: 320px;
    background: var(--mud-palette-background-grey);
}

/* ---------------- chat ---------------- */

.ros2-chat-panel[b-isbvmsbijq] {
    display: flex;
    flex-direction: column;
    width: 360px;
    min-width: 280px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-inline-start: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/Simulation/SimulationTool/Editors/SimulationEditorComp.razor.rz.scp.css */
/* =================================================================
   SimulationEditorComp.razor.css

   Compact single-row parameter controls. These classes duplicate the
   LosVisibilityTool los-row / los-input pattern rather than importing it:
   Blazor CSS isolation scopes every stylesheet to its own generated
   attribute, so rules from another component do NOT apply here even under
   identical class names. Duplicating is the correct move, not an oversight.
   ================================================================= */

.sim-editor[b-rv5u8eq60p] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
}

/* ---------- group heading ---------- */

.sim-group-title[b-rv5u8eq60p] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 2px;
}

.sim-group-title:first-child[b-rv5u8eq60p] {
    margin-top: 0;
}

/* ---------- world list ----------
   Cards rather than a <select>: the whole set is visible at once, each with its description,
   and one click loads it. */
.sim-world-list[b-rv5u8eq60p] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}

.sim-world-card[b-rv5u8eq60p] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    width: 100%;
    padding: 5px 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 5px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    text-align: start;
    cursor: pointer;
    font: inherit;
}

.sim-world-card:hover:not(:disabled)[b-rv5u8eq60p] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.sim-world-card:disabled[b-rv5u8eq60p] {
    opacity: .55;
    cursor: default;
}

/* The loaded world reads as selected without relying on colour alone. */
.sim-world-card.selected[b-rv5u8eq60p] {
    border-color: var(--mud-palette-primary);
    border-inline-start-width: 3px;
    background: var(--mud-palette-action-default-hover);
}

.sim-world-icon[b-rv5u8eq60p] {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--mud-palette-primary);
}

.sim-world-text[b-rv5u8eq60p] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sim-world-name[b-rv5u8eq60p] {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Two lines of description, then ellipsis: enough to tell the worlds apart without letting
   one card push the transport controls below the fold. */
.sim-world-desc[b-rv5u8eq60p] {
    font-size: .68rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sim-world-check[b-rv5u8eq60p] {
    flex: 0 0 auto;
    color: var(--mud-palette-success);
}

/* ---------- one parameter per row ---------- */

.sim-row[b-rv5u8eq60p] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.sim-row-label[b-rv5u8eq60p] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* direction:ltr keeps numbers readable under the RTL default culture. */
.sim-input[b-rv5u8eq60p] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    direction: ltr;
}

.sim-input:focus[b-rv5u8eq60p] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.sim-input:disabled[b-rv5u8eq60p] {
    opacity: .55;
}

.sim-slider[b-rv5u8eq60p] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.sim-slider-value[b-rv5u8eq60p] {
    min-width: 40px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
}

.sim-readout[b-rv5u8eq60p] {
    min-width: 60px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
}

/* ---------- transport row ---------- */

.sim-transport[b-rv5u8eq60p] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.sim-time[b-rv5u8eq60p] {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    color: var(--mud-palette-text-primary);
    direction: ltr;
}

.sim-action[b-rv5u8eq60p] {
    margin-top: 6px;
}

/* ---------- collapsible groups ----------
   summary needs display:flex forced with an ELEMENT-QUALIFIED selector to beat
   the user-agent's display:list-item, or margin-inline-start:auto on the value
   will not right-align it. */

.sim-details[b-rv5u8eq60p] {
    margin-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 4px;
}

summary.sim-summary[b-rv5u8eq60p] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0;
}

.sim-summary-value[b-rv5u8eq60p] {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    color: var(--mud-palette-text-primary);
}

.sim-validation-item[b-rv5u8eq60p] {
    font-size: .72rem;
    line-height: 1.35;
    padding: 3px 0;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px dotted var(--mud-palette-lines-default);
}
/* _content/AspireChatApp.Razor/Components/Tools/Robotics/Simulation/SimulationTool/RobotSimulationToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                 RobotSimulationToolComp.razor.css                      */
/*   Layout styles for the Simulation tool (RTL aware):             */
/*   left editor tabs | physics viewport | ChatBot.             */
/*                                                                    */
/*   Mirrors AStarToolComp.razor.css — the rules are REPEATED rather  */
/*   than shared because Blazor CSS isolation scopes each component's */
/*   stylesheet to its own generated attribute, so identical class    */
/*   names elsewhere would never match these elements. The centre     */
/*   column here is a three.js canvas, not a Plotly chart or a Cesium */
/*   globe: this tool shows a simulated robot, not the Earth.        */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.sim-container[b-ljr0vs0mlf] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;

    /* Sized to what is ACTUALLY LEFT below the tool's own top edge, not to a full viewport.
       MudBlazor's layout carries min-height:100vh, so when anything above the page eats height
       — a browser sandbox/warning bar, an extension strip, a translate banner — the layout
       still demands a whole viewport and the page runs past the bottom. Measured with a 56px
       banner: the container's bottom landed at 948 against a 900px window, putting the movement
       pad and the action combo 36px under the fold with no way to scroll to them. Reported as
       "the navigation controls are too low and can't be reached".

       dvh, not vh: on a phone it also tracks the browser's collapsing address bar. The vh line
       before it is the fallback for engines without dvh. */
    height: 100%;
    max-height: calc(100vh - var(--gv-tool-top, 0px));
    max-height: calc(100dvh - var(--gv-tool-top, 0px));
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right. The dir="rtl" attribute alone reverses the
   flex row (a flex row lays its items along the writing direction). Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a SECOND
   time and cancels out, leaving the LTR layout. */
.sim-container[dir="rtl"][b-ljr0vs0mlf] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor opens at 1/3 and the viewport takes the rest (flex 1 / 2):
   the simulation needs the room, and the controls are compact. A splitter
   drag writes inline width/min/max, which overrides the flex basis and pins
   that panel — the other keeps the remainder. */
.sim-left-panel[b-ljr0vs0mlf] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .sim-left-panel[b-ljr0vs0mlf] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.sim-left-panel.collapsed[b-ljr0vs0mlf] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-ljr0vs0mlf] .sim-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-ljr0vs0mlf] .sim-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-ljr0vs0mlf] .sim-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-ljr0vs0mlf] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-ljr0vs0mlf] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ---------- THE VIEWPORT HEADER ----------
   Title, two menus, transport, status dot — and it has to survive 360 px.

   The header this replaced put a title, a labelled world button, eleven icon buttons and a
   status SENTENCE in one row. At phone width the title wrapped to two lines, the icons were an
   undifferentiated smear, and the status ran off the edge mid-word ("Walking - ste").
   nowrap is what makes the failure LOUD instead of silent: nothing here may wrap, so anything
   that does not fit must be given a way to shrink below. */
.sim-header[b-ljr0vs0mlf] {
    flex-wrap: nowrap;
    /* The title is the only elastic item; everything else is fixed and must not be squeezed. */
    gap: 4px;
    /* The menus render a fixed-height button, so the header keeps ONE row height whatever is
       in it — a header that changes height as the robot's state changes resizes the canvas
       under it, and three.js re-frames the model on every resize. */
    min-height: 44px;
    padding: 4px 8px;
    overflow: hidden;
}

/* The title gives up its room first: it is the one thing on the header a user can identify
   from the tab they arrived on, so losing its tail costs nothing, while losing the play
   button costs the tool. */
.sim-header-title[b-ljr0vs0mlf] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.sim-header-name[b-ljr0vs0mlf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The two dropdowns. Fixed size, never shrink: a menu button that has been squeezed to
   half an icon is not a menu button. */
.sim-header-menu[b-ljr0vs0mlf] {
    flex: 0 0 auto;
}

/* The menu BUTTON is rendered by MudMenu, a child component, so it never carries this
   stylesheet's scope attribute — hence ::deep, or these rules silently do not apply and
   the buttons keep MudBlazor's default 48 px touch target and blow the header's width. */
[b-ljr0vs0mlf] .sim-header-menu .mud-button-root,
[b-ljr0vs0mlf] .sim-header-menu .mud-icon-button {
    color: inherit;
    /* 36 px: comfortably above the 24 px this used to be for a finger, and still two of
       them plus the transport fit in 360 px. */
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
}

[b-ljr0vs0mlf] .sim-header-menu .mud-button-root:hover,
[b-ljr0vs0mlf] .sim-header-menu .mud-icon-button:hover {
    background: rgba(255, 255, 255, .24);
}

/* A section heading inside a menu. Disabled so it cannot be clicked or focused, and styled
   so it does not merely look like a greyed-out ACTION — the difference matters when the item
   below it is a real one. */
[b-ljr0vs0mlf] .sim-menu-heading {
    /* MudBlazor dims a disabled item to ~38% opacity, which at this size is unreadable.
       !important because that opacity is set on .mud-list-item-disabled itself. */
    opacity: 1 !important;
    min-height: 26px;
    padding-top: 4px;
    padding-bottom: 2px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    cursor: default;
    pointer-events: none;
}

/* The status DOT. All that is left of the status sentence: it says the tool has something
   to report without spending a line of the header on prose. The full text is on its tooltip,
   in data-status, and in aria-label. */
.sim-status-dot[b-ljr0vs0mlf] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-inline-start: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
    cursor: help;
}

/* The clip readout carries a time that changes several times a second —
   tabular figures stop the text jittering as the digits change width.
   direction:ltr because "Dancing t=1.25s" is a latin/numeric run. */
.sim-clip-value[b-ljr0vs0mlf] {
    font-family: var(--mud-typography-default-family), monospace;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* ---------- PHONE ----------
   Under 560 px the title's own text goes, leaving its icon. Two menus, play, reset, the clock
   and a dot is what actually fits in 360 px, and the title is the only one of those a user
   can already name from the tab they came in on. */
@media (max-width: 560px) {
    .sim-header-name[b-ljr0vs0mlf] {
        display: none;
    }

    .sim-header[b-ljr0vs0mlf] {
        gap: 2px;
        padding-inline: 4px;
    }
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-ljr0vs0mlf] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-ljr0vs0mlf],
.panel-splitter:active[b-ljr0vs0mlf] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-ljr0vs0mlf] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                 CENTRE PANEL (3D VIEWPORT)                         */
/* ----------------------------------------------------------------- */

.sim-center-panel[b-ljr0vs0mlf] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

/* three.js appends its canvas here. min-height:0 lets the flex child actually
   shrink, and the explicit block sizing is what the ResizeObserver reads to
   keep the renderer in step with a splitter drag. */
/* Positioning context for the viewport AND its overlays, so `bottom` on an overlay means
   the bottom of the rendered scene rather than the bottom of the panel (which is lower, by
   the height of the header). */
.sim-viewport-stack[b-ljr0vs0mlf] {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
}

.sim-viewport[b-ljr0vs0mlf] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* The scene is orbited by dragging; suppress the browser's own pan/zoom
       so a touch drag rotates the character instead of scrolling the page. */
    touch-action: none;
}

.sim-viewport[b-ljr0vs0mlf]  canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Shown until the GLB has loaded and reported its clips. */
.sim-viewport-overlay[b-ljr0vs0mlf] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.sim-chat-panel[b-ljr0vs0mlf] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.sim-chat-panel.collapsed[b-ljr0vs0mlf] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .sim-chat-panel.collapsed[b-ljr0vs0mlf] {
    border-right-width: 0;
}

[dir="rtl"] .sim-chat-panel[b-ljr0vs0mlf] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.sim-chat-host[b-ljr0vs0mlf] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      ACTION BAR                                    */
/* ----------------------------------------------------------------- */

/* ---------- TRANSPORT IN THE VIEWPORT HEADER ----------
   Play/pause, reset and the clock, always reachable whatever the left panel is showing. Living
   only inside the SIMULATION tab meant that opening ROBOT or INFO took them off screen, which
   read as "the simulation is not running" while it was. */
.sim-header-transport[b-ljr0vs0mlf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: 8px;
    padding-inline: 6px;
    border-inline-start: 1px solid var(--mud-palette-lines-default);
}

.sim-header-clock[b-ljr0vs0mlf] {
    display: inline-flex;
    align-items: center;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    opacity: .9;
    min-width: 52px;      /* stops the header twitching as the digits change */
    justify-content: center;
    white-space: nowrap;
}

/* Paused reads as a STATE, not as a stuck number: a frozen clock beside a still robot is
   indistinguishable from a hung page, and was reported as one. */
.sim-header-clock.paused[b-ljr0vs0mlf] {
    color: var(--mud-palette-warning);
}

.sim-header-paused[b-ljr0vs0mlf] {
    margin-inline-start: 5px;
    padding: 0 5px;
    border-radius: 3px;
    background: var(--mud-palette-warning);
    color: #1a1a1a;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---------- INFO TAB ---------- */
.sim-info[b-ljr0vs0mlf] {
    padding: 10px 12px 18px;
    font-size: .8rem;
    /* Long file names and URLs must wrap rather than widen the panel — a horizontal
       scrollbar in a side panel is a layout failure, not a feature. */
    overflow-wrap: anywhere;

    /* SCROLLS VERTICALLY. The tab panel above is `overflow: hidden` so its children cannot
       push it taller, which meant everything past the file list was simply unreachable —
       the sources section existed but could not be read. This element owns the scroll: it
       needs its own height budget (flex + min-height:0) or the browser sizes it to its
       content and never scrolls it. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sim-info-title[b-ljr0vs0mlf] {
    margin: 14px 0 6px;
    font-weight: 600;
    font-size: .82rem;
    color: var(--mud-palette-primary);
}

.sim-info-title:first-child[b-ljr0vs0mlf] { margin-top: 0; }

.sim-info-lead[b-ljr0vs0mlf] {
    margin-bottom: 8px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.sim-info-row[b-ljr0vs0mlf] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sim-info-row > span:last-child[b-ljr0vs0mlf] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.sim-info-files[b-ljr0vs0mlf],
.sim-info-links[b-ljr0vs0mlf] {
    margin: 0;
    padding-inline-start: 18px;
    line-height: 1.6;
}

.sim-info-files li[b-ljr0vs0mlf],
.sim-info-links li[b-ljr0vs0mlf] { margin-bottom: 4px; }

.sim-info-file-note[b-ljr0vs0mlf] {
    display: block;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------- PART PICKER (Robot tab) ---------- */
.sim-parts-picker[b-ljr0vs0mlf] {
    flex: 0 0 auto;
    padding: 8px 10px 0;
}

.sim-parts-label[b-ljr0vs0mlf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

/* Compact, like the tool's other inputs. */
.sim-parts-select[b-ljr0vs0mlf] {
    flex: 1 1 auto;
    height: 26px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .76rem;
    text-overflow: ellipsis;
}

.sim-part-detail[b-ljr0vs0mlf] {
    flex: 0 0 auto;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .76rem;
    min-height: 62px;
}

.sim-part-hint[b-ljr0vs0mlf] {
    color: var(--mud-palette-text-secondary);
}

.sim-part-name[b-ljr0vs0mlf] {
    font-weight: 600;
    color: var(--mud-palette-primary);
    margin-bottom: 3px;
}

.sim-part-desc[b-ljr0vs0mlf] {
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
}

/* ---------- ROBOT PARTS CARD (left panel) ---------- */
/* Fills the ROBOT tab. The card is the only thing in that tab, so it takes the height rather
   than sitting in a 220px box with empty panel under it — a 3-D view of a standing figure is
   mostly vertical, and the space was there to use. The flex chain above (.sim-tabs ->
   .mud-tabs-panels -> .sim-tab-panel) already passes the constraint down this far; these two
   rules are what carry it the last step to the canvas. */
.sim-parts-card[b-ljr0vs0mlf] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.sim-parts-header[b-ljr0vs0mlf] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 6px 10px;
    font-size: .78rem;
    font-weight: 500;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* A fixed height, because the viewer sizes its canvas to this element: a height of
   `auto` would collapse to zero before the model arrives and the canvas would never
   be given a usable size. */
.sim-parts-viewport[b-ljr0vs0mlf] {
    position: relative;
    width: 100%;
    /* Grows into whatever the header and legend leave. The min-height matters: the viewer
       sizes its canvas to this element, and a flex child that collapses to zero before the
       model arrives would give three.js a 0x0 canvas it never recovers from. */
    flex: 1 1 auto;
    min-height: 180px;
    /* The widget owns its gestures. Without this a touch drag scrolls the LEFT PANEL instead of
       turning the robot, which on a phone makes the viewer impossible to interact with — the
       same reason the main viewport sets it. */
    touch-action: none;
    cursor: grab;
}

.sim-parts-viewport:active[b-ljr0vs0mlf] {
    cursor: grabbing;
}

.sim-parts-legend[b-ljr0vs0mlf] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    /* Never shrink: the chips are the control surface, and a flex row that gives them up to
       the canvas would leave the parts unselectable on a short panel. */
    flex: 0 0 auto;
}

/* ---------- a row inside either header menu ---------- */
/* min-width, not width: it sets a comfortable reading width on a desktop while still
   letting the row shrink on a 360 px screen, where a fixed 210 px plus the menu's own
   padding would push the popover off the right edge and clip every label. */
.sim-menu-row[b-ljr0vs0mlf] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min(210px, 60vw);
    max-width: 78vw;
}

.sim-menu-row > span[b-ljr0vs0mlf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The popover is a child component rendered into MudBlazor's own overlay layer — outside
   this component's DOM entirely — so ::deep is what reaches it. Without a cap it sizes to
   its widest item and hangs off a phone screen. */
[b-ljr0vs0mlf] .mud-popover .sim-menu-row {
    min-width: min(210px, 60vw);
}

/* The list's HEIGHT cap is NOT here — see main.css. ::deep compiles to
   "[b-<scope>] <selector>", which requires a scoped ANCESTOR, and MudBlazor renders every
   popover into a provider at the end of <body>, outside this component's DOM. The rule
   below works only because it styles .sim-menu-row itself, which this component authors;
   anything targeting the popover or the list AROUND it silently matches nothing. */


/* ----------------------------------------------------------------- */
/*                      OUTPUT PANEL                                  */
/* ----------------------------------------------------------------- */

/* The camera / sensors / SLAM column. Narrower than the viewport by design:
   the 3D scene is the thing being judged, this is the evidence beside it. */
.sim-output-panel[b-ljr0vs0mlf] {
    flex: 1 1 0;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
}

[dir="rtl"] .sim-output-panel[b-ljr0vs0mlf] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.sim-output-tabs[b-ljr0vs0mlf] {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    overflow-x: auto;
    overflow-y: hidden;

    /* A horizontal scroller inside a vertical one: without this a sideways drag
       on the strip scrolls the panel instead. */
    touch-action: pan-x;
    scrollbar-width: thin;
}

.sim-output-tab[b-ljr0vs0mlf] {
    flex: 1 1 0;
    min-width: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 6px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: none;

    /* Selected is marked by an underline AND a colour change - colour alone
       fails for anyone who cannot distinguish it. */
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.sim-output-tab:hover[b-ljr0vs0mlf] {
    color: var(--mud-palette-text-primary);
}

.sim-output-tab.active[b-ljr0vs0mlf] {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.sim-output-tab:focus-visible[b-ljr0vs0mlf] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/*
 * The tab body.
 *
 * display:flex, not block. The section inside it asks for `flex: 1 1 auto` so the SLAM
 * viewer and the theory iframe can fill the panel — and on a BLOCK parent that request is
 * simply ignored, because a block child is not a flex item. Measured before this: the
 * body was 805px tall while its section stopped at 583px, leaving the reconstruction
 * viewer stuck at its 220px min-height with 222px of empty column beneath it.
 */
.sim-output-body[b-ljr0vs0mlf] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.sim-output-section[b-ljr0vs0mlf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* The SLAM tab fills the panel so its reconstruction viewer can grow into it. The output
   body is already a flex column with min-height:0; this is the link between the two.
   
   The body's own scrolling is turned off for this tab: a flex child cannot stretch inside
   a scroll container that is free to grow, so with overflow-y:auto the viewer would keep
   its min-height and the column would scroll instead. The controls and counters around
   the viewer are a fixed set that fit; the viewer takes the remainder. */
.sim-output-body:has(> .sim-slam-section)[b-ljr0vs0mlf] {
    overflow-y: auto;
}

.sim-output-section.sim-slam-section[b-ljr0vs0mlf] {
    flex: 1 1 auto;
    min-height: 0;
}

/* Controls above and counters below keep their size; only the viewer grows. */
.sim-slam-section > .sim-scan-actions[b-ljr0vs0mlf],
.sim-slam-section > .sim-scan-scope[b-ljr0vs0mlf],
.sim-slam-section > .sim-scan-stats[b-ljr0vs0mlf],
.sim-slam-section > .sim-output-hint[b-ljr0vs0mlf] {
    flex: 0 0 auto;
}

/*
 * The THEORY tab must fill the panel, not sit at the iframe's default 150px.
 *
 * .tool-theory-tab sets height:100% in the global sheet (main.css), but a percentage
 * height only resolves once EVERY ancestor above it has a real height. The global sheet
 * establishes that chain for `.mud-tab-panel` / `.mud-tabs-panels` — the MudTabs case —
 * and this panel is neither: THEORY lives in a hand-rolled button strip whose body is a
 * plain scrolling div, so none of those selectors match and the chain stops here.
 *
 * These three rules are that missing chain. Same fix, and for the same reason, as
 * SurveyMissionSimulationTool's `.monitor-tab-panel > .tool-theory-tab` block.
 *
 * overflow-y on the body is turned off for THIS tab only: the iframe scrolls its own
 * content, and leaving the outer scroller on gives a second scrollbar that fights it.
 */
.sim-output-body:has(> .sim-theory-section)[b-ljr0vs0mlf] {
    overflow-y: hidden;
    padding: 0;
}

.sim-output-section.sim-theory-section[b-ljr0vs0mlf],
.sim-output-body > .sim-theory-section[b-ljr0vs0mlf] {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    gap: 0;
}

[b-ljr0vs0mlf] .sim-theory-section > .tool-theory-tab {
    height: 100%;
    min-height: 0;
}

.sim-output-hint[b-ljr0vs0mlf] {
    margin: 0;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

/* Rendered at the capture resolution and scaled up. image-rendering keeps the
   pixels crisp: this is a 160px diagnostic view, and smoothing it would hide
   exactly the texture detail the tracker works from. */
/*
 * The robot's camera feed.
 *
 * 16:9 to match the frame the scanner renders (PREVIEW_LONG_EDGE / PREVIEW_ASPECT), and
 * WITHOUT image-rendering: pixelated. That property was correct when the canvas held a
 * 160x160 tracker frame — it kept the upscale honest instead of smearing it — but the
 * source is now a 1440x810 render, so pixelated does nothing but re-block a sharp image.
 *
 * 🔴 max-width IS LOAD-BEARING, and is mirrored by PREVIEW_DISPLAY_WIDTH in
 * simulation_slam_scanner.js. three.js r128 cannot antialias an off-screen target, so the
 * smoothing comes entirely from rendering at 4x this width and letting the browser scale
 * it down. Widening this box without raising PREVIEW_LONG_EDGE re-introduces the stepped
 * edges the resolution bump was meant to remove.
 */
/* ----------------------------------------------------------------- */
/*                    NESTED SUB-TAB STRIPS                           */
/* ----------------------------------------------------------------- */

/*
 * Sub-tabs inside ROBOT (PARTS | SENSORS | INFO) and inside SENSORS (CAMERA | TRACES).
 *
 * 🔴 THE HEIGHT CHAIN CONTINUES HERE. The outer strip already stretches
 * .sim-tabs -> .mud-tabs-panels -> .sim-tab-panel, but a NESTED MudTabs starts the chain
 * over: its own root, panels wrapper and panel divs have no height of their own, so every
 * percentage and `flex: 1 1 auto` below them resolves against nothing. The visible symptom
 * is the three.js parts viewer collapsing to its 180px min-height instead of filling the
 * panel — the canvas is sized from its host element, so a host that never grew gives a
 * short canvas.
 *
 * These four rules are the same chain as the outer strip's, one level deeper. ::deep for
 * the same reason it is used there: MudTabs is a child COMPONENT, so its rendered elements
 * never carry this component's scope attribute and an unscoped rule would silently miss.
 */
[b-ljr0vs0mlf] .sim-subtabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 4px;
}

[b-ljr0vs0mlf] .sim-subtabs > .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-ljr0vs0mlf] .sim-subtab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 8px;
    /* Content taller than the panel scrolls INSIDE it (the INFO tab's spec list, the
       traces), rather than pushing the strip off the bottom of the column. */
    overflow-y: auto;
}

/* The parts card is the one sub-panel whose child must FILL rather than scroll: it hosts
   the three.js canvas, which has no intrinsic height to scroll to. */
[b-ljr0vs0mlf] .sim-subtab-panel > .sim-parts-card {
    flex: 1 1 auto;
    min-height: 0;
}

/*
 * Wrapper for the camera feed in the SENSORS > CAMERA sub-tab.
 *
 * Only a stacking context — the canvas keeps its own sizing, and in particular its
 * load-bearing max-width (see the note above), which this must not alter.
 */
.sim-camera-block[b-ljr0vs0mlf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/*
 * The two eyes, side by side.
 *
 * Wraps to a column on a narrow panel rather than shrinking both below legibility - at
 * the panel widths this tool runs in, two 360 px canvases do not fit side by side, and a
 * stacked pair is still a readable pair.
 */
/*
 * The two eyes, side by side.
 *
 * 🔴 direction:ltr IS LOAD-BEARING, NOT COSMETIC. The tool renders under dir="rtl" for
 * Hebrew, and a flex row inherits that — so the left eye, which comes first in the
 * markup, was being painted on the RIGHT of the pair. The images were correct and their
 * captions were correct; they were simply swapped on screen, which is the one mistake
 * that makes a stereo pair actively misleading rather than merely untidy.
 *
 * Forced to ltr because LEFT/RIGHT here are physical facts about the robot's head, not
 * reading order: the left eye is left of the right eye no matter which way the surrounding
 * text runs. The captions still translate; only the geometry is pinned.
 */
.sim-stereo-pair[b-ljr0vs0mlf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    direction: ltr;
}

.sim-eye[b-ljr0vs0mlf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    flex: 1 1 220px;
    min-width: 0;
}

/* Inside the pair each canvas shares the row, so the load-bearing 360 px cap below
   becomes a MAXIMUM rather than a fixed width. The supersampling argument still holds:
   the render is 1440 px wide either way, so a narrower box only oversamples further. */
.sim-eye .sim-camera-canvas[b-ljr0vs0mlf] {
    max-width: 100%;
}

.sim-camera-canvas[b-ljr0vs0mlf] {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 16 / 9;
    align-self: center;
    background: #000;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.sim-trace[b-ljr0vs0mlf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sim-trace-head[b-ljr0vs0mlf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.sim-trace-head b[b-ljr0vs0mlf] {
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.sim-trace-plot[b-ljr0vs0mlf] {
    width: 100%;
    height: 48px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
}

.sim-trace-plot polyline[b-ljr0vs0mlf] {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.sim-scan-actions[b-ljr0vs0mlf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* Not the default stretch: stretch sizes every button in the line to the tallest
       occupant, which is how the SCAN toggle ended up towering over its neighbour. */
    align-items: center;
}

/*
 * Every button in an action row at the standard small-button height, SHARING the
 * row equally. ::deep because MudButton is a child component, so its rendered
 * <button> never carries this stylesheet's scope attribute.
 *
 * 🔴 `min-width: 0` IS WHAT KEEPS THE ROW A ROW. A flex item will not shrink
 * below its min-content width by default, so three buttons whose labels total
 * more than the panel is wide push the third onto a second line however small
 * the font is - which is exactly what happened to BEGIN SCAN / AUTO-SCAN /
 * CLEAR MODEL in a 460 px panel. Allowing them below min-content lets the
 * labels ellipsize instead, and the row stays one row.
 *
 * flex-wrap on the container is kept as a last resort for a panel dragged
 * narrower than three icons will fit.
 */
.sim-scan-actions[b-ljr0vs0mlf]  .mud-button-root {
    height: 30px;
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 7px;
    font-size: .68rem;
    overflow: hidden;
    white-space: nowrap;
}

/* The label is the part that has to give; the icon beside it stays legible. */
.sim-scan-actions[b-ljr0vs0mlf]  .mud-button-label,
.sim-scan-actions[b-ljr0vs0mlf]  .mud-button-root > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ...but never squeeze the icon itself. */
.sim-scan-actions[b-ljr0vs0mlf]  .mud-icon-root {
    flex: 0 0 auto;
}

.sim-scan-stats[b-ljr0vs0mlf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
}

.sim-stat[b-ljr0vs0mlf] {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

.sim-stat span[b-ljr0vs0mlf] {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
}

.sim-stat b[b-ljr0vs0mlf] {
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.sim-scan-scope[b-ljr0vs0mlf] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sim-scope-select[b-ljr0vs0mlf] {
    width: 100%;
    padding: 5px 7px;
    font-size: .8rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* The reconstruction gets its own viewport so it can be judged on its own,
   before it is ever drawn over the ground truth. */
/*
 * The reconstruction viewer.
 *
 * Grows into whatever the scan controls above and the counters below leave, rather than
 * the fixed 220px it used to take: this is the panel's main output, and on a tall screen
 * a fixed box left most of the column empty while the point cloud rendered postage-stamp
 * sized. min-height for the same reason as the parts viewport — the viewer sizes its
 * canvas from this element, and a flex child that collapses to zero before the first
 * points arrive hands three.js a 0x0 canvas it never recovers from.
 */
/*
 * The SLAM tab's own tab strip.
 *
 * Deliberately QUIETER than the panel's outer strip (.sim-output-tab): smaller,
 * lighter, and marked with a pill rather than an underline. Two strips of equal
 * weight stacked on top of each other read as one confused four-tab row, and the
 * outer one has to stay the dominant piece of navigation because it is the one
 * that leaves the SLAM tab altogether.
 */
.sim-slam-tabs[b-ljr0vs0mlf] {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 3px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
}

.sim-slam-tab[b-ljr0vs0mlf] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 8px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.sim-slam-tab:hover[b-ljr0vs0mlf] {
    color: var(--mud-palette-text-primary);
}

/* Selected carries BOTH a filled pill and a colour change - colour alone fails
   for anyone who cannot distinguish it. */
.sim-slam-tab.active[b-ljr0vs0mlf] {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.sim-slam-tab:focus-visible[b-ljr0vs0mlf] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* The strip never scrolls away with the pane it switches. */
.sim-slam-section > .sim-slam-tabs[b-ljr0vs0mlf] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.sim-slam-view[b-ljr0vs0mlf] {
    width: 100%;
    flex: 1 1 auto;
    min-height: 220px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    /* Positioning context for the viewer's camera pad (built by
       simulation_slam_scanner.js and absolutely positioned inside this box). */
    position: relative;
}

.sim-slam-view canvas[b-ljr0vs0mlf] {
    display: block;
    width: 100%;
    height: 100%;
    /*
     * The viewer has drag-to-orbit, right-drag-to-pan and wheel-to-zoom
     * (wireViewerMouse in simulation_slam_scanner.js). touch-action must be none
     * or a drag on a touch screen scrolls this panel instead of turning the
     * camera, and the pointermove stream stops mid-gesture. The JS sets both of
     * these on the element too - belt and braces, because a scoped-CSS edit has
     * shipped stale here before.
     */
    touch-action: none;
    cursor: grab;
}

/*
 * The points / model / both switch under the reconstruction viewer.
 *
 * Shown only once a model exists, so it must not reserve space when it is
 * absent - hence no min-height and no margin of its own.
 */
.sim-recon-display[b-ljr0vs0mlf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sim-recon-display[b-ljr0vs0mlf]  .mud-button-root {
    height: 28px;
    font-size: .7rem;
}

.sim-slam-section > .sim-recon-display[b-ljr0vs0mlf] {
    flex: 0 0 auto;
}
/* _content/AspireChatApp.Razor/Components/Tools/SandboxTool/Editors/SandboxSamplesTreeComp.razor.rz.scp.css */
/* ================================================================= */
/*                 SandboxSamplesTreeComp.razor.css                  */
/*   Scoped styles for the samples tree. Full Assembly > Category >  */
/*   Topic > sample hierarchy with per-level indentation, animated   */
/*   expand/collapse (grid-template-rows 0fr/1fr), and toolbar        */
/*   expand-all / collapse-all buttons.                              */
/* ================================================================= */

.sbx-tree[b-2ujwbn9yog] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Compact single-row toolbar: search field + expand/collapse-all. */
.sbx-row[b-2ujwbn9yog] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 6px 4px;
    flex: 0 0 auto;
}

.sbx-row-icon[b-2ujwbn9yog] {
    color: var(--mud-palette-text-secondary);
}

.sbx-input[b-2ujwbn9yog] {
    flex: 1;
    height: 26px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 8px;
    font-size: .82rem;
}

.sbx-input:focus[b-2ujwbn9yog] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Expand-all / collapse-all buttons. */
.sbx-tool-btn[b-2ujwbn9yog] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.sbx-tool-btn:hover[b-2ujwbn9yog] {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

/* Scrollable tree body — the ONLY scroll region in the left panel. */
.sbx-tree-scroll[b-2ujwbn9yog] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
}

.sbx-empty[b-2ujwbn9yog] {
    padding: 12px 8px;
    color: var(--mud-palette-text-secondary);
    font-size: .82rem;
}

/* ---- Tree node (assembly / category / topic) ---- */
.sbx-node[b-2ujwbn9yog] {
    margin: 0;
}

.sbx-node-summary[b-2ujwbn9yog] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    white-space: nowrap;
}

.sbx-node-summary:hover[b-2ujwbn9yog] {
    background: var(--mud-palette-action-default-hover);
}

.sbx-chevron[b-2ujwbn9yog] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    transition: transform .18s ease;
}

.sbx-assembly-icon[b-2ujwbn9yog] {
    flex: 0 0 auto;
    color: var(--mud-palette-secondary);
}

.sbx-folder-icon[b-2ujwbn9yog] {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
}

.sbx-topic-icon[b-2ujwbn9yog] {
    flex: 0 0 auto;
    color: var(--mud-palette-tertiary, var(--mud-palette-primary));
    opacity: .85;
}

.sbx-node-name[b-2ujwbn9yog] {
    font-size: .83rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sbx-lvl-1 .sbx-node-name[b-2ujwbn9yog] { font-size: .82rem; }
.sbx-lvl-2 .sbx-node-name[b-2ujwbn9yog] { font-size: .8rem; font-weight: 500; }

/* ---- Animated expand/collapse body ----
   grid-template-rows 0fr -> 1fr is the modern height-auto animation: the row
   collapses to 0 and grows to content height, and the transition is smooth. */
.sbx-node-body[b-2ujwbn9yog] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
}

.sbx-node-body.open[b-2ujwbn9yog] {
    grid-template-rows: 1fr;
}

/* The inner wrapper must be overflow:hidden and min-height:0 for the 0fr row to
   actually clip its content during the animation. */
.sbx-node-body-inner[b-2ujwbn9yog] {
    overflow: hidden;
    min-height: 0;
}

/* ---- Per-level indentation ----
   Each deeper level shifts its rows right; RTL is handled by dir on the host. */
.sbx-lvl-1 > .sbx-node-summary[b-2ujwbn9yog] { padding-inline-start: 18px; }
.sbx-lvl-2 > .sbx-node-summary[b-2ujwbn9yog] { padding-inline-start: 34px; }
.sbx-sample.sbx-lvl-3[b-2ujwbn9yog]          { padding-inline-start: 52px; }

/* ---- Sample leaf ---- */
.sbx-sample[b-2ujwbn9yog] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 4px;
}

.sbx-sample:hover[b-2ujwbn9yog] {
    background: var(--mud-palette-action-default-hover);
}

.sbx-sample.selected[b-2ujwbn9yog] {
    background: var(--mud-palette-primary-hover);
}

.sbx-sample.selected .sbx-sample-name[b-2ujwbn9yog] {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.sbx-sample-icon[b-2ujwbn9yog] {
    color: #28a745; /* green code glyph, matching the WPF tool's Run accent */
    flex: 0 0 auto;
}

.sbx-sample-name[b-2ujwbn9yog] {
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}

/* Info button — pinned to the row end, dim until the row (or it) is hovered. */
.sbx-sample-info[b-2ujwbn9yog] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    opacity: 0;
    text-decoration: none;
    transition: opacity .12s ease, color .12s ease;
}

.sbx-sample:hover .sbx-sample-info[b-2ujwbn9yog] {
    opacity: .75;
}

.sbx-sample-info:hover[b-2ujwbn9yog] {
    opacity: 1;
    color: var(--mud-palette-info);
}
/* _content/AspireChatApp.Razor/Components/Tools/SandboxTool/SandboxToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                  SandboxToolComp.razor.css                        */
/*   Layout styles for the Sandbox (C# code sandbox) tool (RTL aware):*/
/*   left samples tree | code editor + output | ChatBot panel.        */
/*   Samples-tree styles live in SandboxSamplesTreeComp.razor.css.    */
/*   CSS isolation is per-component, so the panel/splitter/header     */
/*   rules below are this component's own copies (not inherited).     */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.sbxtool-container[b-g7m1gqt6bt] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support — tree on the right, chat on the left. dir="rtl" alone reverses the
   flex row; do NOT add flex-direction: row-reverse (it would reverse twice). */
.sbxtool-container[dir="rtl"][b-g7m1gqt6bt] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL (samples tree)                     */
/* ----------------------------------------------------------------- */

.sbxtool-left-panel[b-g7m1gqt6bt] {
    flex: 1 1 0;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .sbxtool-left-panel[b-g7m1gqt6bt] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.sbxtool-left-panel.collapsed[b-g7m1gqt6bt] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can host the scrolling tree.
   ::deep everywhere: MudTabs is a child COMPONENT, so its rendered elements
   never carry this component's scoped-CSS attribute. */
[b-g7m1gqt6bt] .sbxtool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-g7m1gqt6bt] .sbxtool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-g7m1gqt6bt] .sbxtool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* The individual active tab-panel div MudBlazor renders inside .mud-tabs-panels.
   By default it is display:block with no height bound, so with a tall samples tree
   it grows to fit ALL content and overflows the panel off-screen instead of letting
   the inner .sbx-tree-scroll scroll. Bound it to the panels host so the flex/overflow
   chain terminates and the samples tree gets a real scroll viewport. */
[b-g7m1gqt6bt] .sbxtool-tab-panel > .mud-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* SAMPLES tab host — header (count) + scrolling tree fill the panel. */
.sbxtool-tree-host[b-g7m1gqt6bt] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.sbxtool-tree-header[b-g7m1gqt6bt] {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sbxtool-tree-count[b-g7m1gqt6bt] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* ChatBot host — lets the embedded per-tool ChatBotComp fill the panel. */
.sbxtool-chat-host[b-g7m1gqt6bt] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-g7m1gqt6bt] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
    flex: 0 0 auto;
}

.panel-title[b-g7m1gqt6bt] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-g7m1gqt6bt] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-g7m1gqt6bt],
.panel-splitter:active[b-g7m1gqt6bt] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-g7m1gqt6bt] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                THEORY PANEL (sample info page)                    */
/*   flex:2 1 0 == the center panel's flex, so the Theory panel and  */
/*   the editor panel always render at EQUAL width.                  */
/* ----------------------------------------------------------------- */

.sbxtool-theory-panel[b-g7m1gqt6bt] {
    flex: 2 1 0;
    min-width: 360px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* The sample's info web-page fills the panel below its header. The iframe ELEMENT
   background follows the app theme (via the MudBlazor surface var) so the gap before the
   inner document paints is themed, not white. The inner page itself is themed by
   theory.css (html.theory-dark): on the INITIAL load the page's own inline head script
   applies the class from the ?dark=1 URL flag (set in SandboxInfoPage.ResolveUrl) before
   first paint — so a dark host shows no white flash; LIVE dark/light toggles (no reload)
   are then handled by applyIframeTheme in the JS helper. */
.sbxtool-theory-frame[b-g7m1gqt6bt] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border: none;
    background: var(--mud-palette-surface);
}

/* Shown before any sample is picked. */
.sbxtool-theory-empty[b-g7m1gqt6bt] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: .85rem;
}

/* Fixed (non-drag) divider between the Theory panel and the editor. */
.sbxtool-fixed-divider[b-g7m1gqt6bt] {
    flex: 0 0 1px;
    width: 1px;
    min-width: 1px;
    align-self: stretch;
    background: var(--mud-palette-lines-default);
}

/* ----------------------------------------------------------------- */
/*                CENTER PANEL (editor + output)                     */
/* ----------------------------------------------------------------- */

.sbxtool-center-panel[b-g7m1gqt6bt] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 360px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* Current-sample label shown in the editor toolbar's ToolbarEnd slot. */
.sbxtool-current-sample[b-g7m1gqt6bt] {
    font-weight: 600;
    font-size: .85rem;
    color: var(--mud-palette-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
}

/* Code editor area — hosts the reusable AvalonEditorComp (Monaco), which brings its
   own toolbar and fills this box (upper part of the center panel). */
.sbxtool-editor-area[b-g7m1gqt6bt] {
    flex: 3 1 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* Output console (lower half). */
.sbxtool-output-header[b-g7m1gqt6bt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.sbxtool-output-icon[b-g7m1gqt6bt] {
    color: var(--mud-palette-text-secondary);
}

.sbxtool-output-title[b-g7m1gqt6bt] {
    font-weight: 600;
    font-size: .82rem;
}

.sbxtool-output-area[b-g7m1gqt6bt] {
    flex: 2 1 0;
    min-height: 120px;
    display: flex;
    overflow: hidden;
    background: #101418; /* dark console backdrop, matches a terminal */
}

.sbxtool-output[b-g7m1gqt6bt] {
    flex: 1 1 auto;
    margin: 0;
    padding: 10px 12px;
    box-sizing: border-box;
    overflow: auto;
    font-family: Consolas, "Courier New", monospace;
    font-size: .82rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    color: #34c759; /* green console text, matching the WPF default foreground */
}

.sbxtool-output.error[b-g7m1gqt6bt] {
    color: #ff6060; /* red on compile/runtime error, matching the WPF error color */
}

/* ----------------------------------------------------------------- */
/*                      RIGHT PANEL (ChatBot)                         */
/* ----------------------------------------------------------------- */

.sbxtool-chat-panel[b-g7m1gqt6bt] {
    flex: 1 1 0;
    min-width: 280px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1);
    overflow: hidden;
}

[dir="rtl"] .sbxtool-chat-panel[b-g7m1gqt6bt] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.sbxtool-chat-panel.collapsed[b-g7m1gqt6bt] {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    border: none;
}
/* _content/AspireChatApp.Razor/Components/Tools/SatelliteCoordinatesTool/Charts/SatelliteTrackChartComp.razor.rz.scp.css */
/* ================================================================= */
/*              SatelliteTrackChartComp.razor.css                    */
/*   Satellite ground-track / altitude chart: interactive Plotly plot */
/*   (drag to pan, wheel to zoom) + a mode toggle underneath.         */
/*   Mirrors ViewshedTopViewChartComp.razor.css — the rules are       */
/*   repeated rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute.      */
/* ================================================================= */

.chart-host[b-l61kmymavd] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.chart-plot-area[b-l61kmymavd] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

.chart-toolbar[b-l61kmymavd] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.chart-toolbar-label[b-l61kmymavd] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.chart-projection-select[b-l61kmymavd] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    min-width: 130px;
}

.chart-toolbar-btn[b-l61kmymavd] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.chart-toolbar-btn:hover[b-l61kmymavd] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.chart-toolbar-btn:active[b-l61kmymavd] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/SatelliteCoordinatesTool/Editors/SatelliteCoordinatesEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*           SatelliteCoordinatesEditorComp.razor.css                */
/*   Compact WPF-SatelliteCoordinatesEditor-style rows: label |      */
/*   small editor, so the whole editor fits the panel.               */
/*                                                                   */
/*   The class names and rules mirror LosVisibilityEditorComp.razor  */
/*   .css / AltitudeViewshedEditorComp.razor.css deliberately: these  */
/*   editors are all ports of WPF editors sharing the same look. They */
/*   cannot share ONE stylesheet because Blazor CSS isolation rewrites */
/*   each component's rules to its own generated scope attribute — an  */
/*   unscoped or foreign-scope rule simply never matches these        */
/*   elements.                                                        */
/* ================================================================= */

.los-editor-scroll[b-y3o5fxpg4m] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-y3o5fxpg4m] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-y3o5fxpg4m] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* A sub-heading inside a group (e.g. the sub-satellite point block) */
.los-group-subtitle[b-y3o5fxpg4m] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    font-size: 0.7rem;
    margin: 4px 0 1px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------- */
/*                    COLLAPSIBLE GROUPS                              */
/* ----------------------------------------------------------------- */

.los-expander[b-y3o5fxpg4m] {
    display: block;
}

.los-expander[open][b-y3o5fxpg4m] {
    display: flex;
    flex-direction: column;
}

summary.los-expander-title[b-y3o5fxpg4m] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.los-expander-title[b-y3o5fxpg4m]::-webkit-details-marker {
    display: none;
}

.los-expander-title[b-y3o5fxpg4m]::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--mud-palette-primary);
    transition: transform 0.15s ease;
}

.los-expander[open] > .los-expander-title[b-y3o5fxpg4m]::before {
    transform: rotate(90deg);
}

[dir="rtl"] .los-expander-title[b-y3o5fxpg4m]::before {
    border-left: none;
    border-right: 5px solid var(--mud-palette-primary);
}

[dir="rtl"] .los-expander[open] > .los-expander-title[b-y3o5fxpg4m]::before {
    transform: rotate(-90deg);
}

.los-expander-summary[b-y3o5fxpg4m] {
    margin-inline-start: auto;
    padding-inline-start: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

/* ----------------------------------------------------------------- */
/*                          ROWS                                      */
/* ----------------------------------------------------------------- */

/* Like `.los-input` below, this reaches only the rows written in `.razor`
   markup. The coordinate rows are built in the code-behind and carry
   COORD_ROW_STYLE / COORD_ROW_LABEL_STYLE inline instead — keep them in sync. */
.los-row[b-y3o5fxpg4m] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-y3o5fxpg4m] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* NOTE: this rule reaches only the inputs written in `.razor` MARKUP (the
   coordinate-type select and the orbitals count). The per-element coordinate
   fields are emitted from a RenderTreeBuilder in the code-behind, which Blazor
   never stamps with this component's `b-*` scope attribute, so they cannot match
   here and carry the same declarations inline instead — see COORD_INPUT_STYLE.
   Keep the two in sync. */
.los-input[b-y3o5fxpg4m] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    /* Sit in one column against the panel edge opposite the labels, the way the
       RESULTS readouts do. `.los-row-label` shrink-wraps its text, so without
       this each field butts against the end of its own label at a different
       offset per row. */
    flex: 0 0 auto;
    margin-inline-start: auto;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
    /* Digits sit on the side AWAY from the label, matching the RESULTS
       readouts. `direction:ltr` alone is not enough: a type="number" input
       inherits the RTL page's text-align and pushes its digits back against
       the label, so the alignment has to be stated explicitly. */
    text-align: left;
}

.los-input:focus[b-y3o5fxpg4m] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Inline true/mean radio pair */
.los-radio-inline[b-y3o5fxpg4m] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.los-radio-inline label[b-y3o5fxpg4m] {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

/* ----------------------------------------------------------------- */
/*              COORDINATE PANELS (KEPLER / ECI / ECEF / GEO)         */
/* ----------------------------------------------------------------- */

/* The panel the user is DEFINING — emphasised the way the single enabled
   WPF panel is. */
.coord-group-active[b-y3o5fxpg4m] {
    border-width: 2px;
}

/* The three panels that are read-only conversions of the active one. */
.coord-group-readonly[b-y3o5fxpg4m] {
    border-color: var(--mud-palette-lines-default);
    opacity: 0.75;
}

.coord-group-readonly .los-group-title[b-y3o5fxpg4m] {
    color: var(--mud-palette-text-secondary);
}

/* A disabled input still has to stay legible: it is a computed READOUT, not an
   unavailable control, so keep full text contrast and only mute the frame.
   -webkit-text-fill-color is what actually greys the text in Chrome's UA
   stylesheet — plain `color` alone is overridden by it and the digits come out
   near-invisible on the dark theme. */
.los-input:disabled[b-y3o5fxpg4m] {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    -webkit-text-fill-color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
    opacity: 1;
    cursor: default;
}

/* ----------------------------------------------------------------- */
/*                 COORDINATE-FRAME TAB CONTROL                       */
/* ----------------------------------------------------------------- */

.coord-tabs[b-y3o5fxpg4m] {
    display: flex;
    flex-direction: column;
    margin: 4px 6px;
}

.coord-tab-strip[b-y3o5fxpg4m] {
    display: flex;
    gap: 4px;
    /* Frame names are acronyms and read left-to-right even in an RTL page. */
    direction: ltr;
}

.coord-tab[b-y3o5fxpg4m] {
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

.coord-tab:hover[b-y3o5fxpg4m] {
    color: var(--mud-palette-text-primary);
}

/* The tab currently OPEN (which may be a calculated frame). The INPUT tab's
   marker is applied inline on top of this. */
.coord-tab-visible[b-y3o5fxpg4m] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
}

/* Tab body — squared off at the top so it joins the strip above it. */
.coord-tab-body[b-y3o5fxpg4m] {
    margin: 0;
    border-radius: 0 0 6px 6px;
}

/* Computed readout values */
.los-readout-value[b-y3o5fxpg4m] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.los-hint[b-y3o5fxpg4m] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
}
/* _content/AspireChatApp.Razor/Components/Tools/SatelliteCoordinatesTool/SatelliteCoordinatesToolComp.razor.rz.scp.css */
/* ================================================================= */
/*             SatelliteCoordinatesToolComp.razor.css                */
/*   Layout styles for the satellite-coordinates tool (RTL aware):   */
/*   left editor tabs | Cesium globe | ground-track chart panel.     */
/*   Mirrors AltitudeViewshedToolComp.razor.css — the rules are      */
/*   repeated rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so  */
/*   the class names are identical but the scope attribute is not.   */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-ezhw4sz8wu] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left. The dir="rtl"
   attribute alone reverses the flex row; do NOT add row-reverse (it would
   reverse a second time and cancel out). */
.lostool-container[dir="rtl"][b-ezhw4sz8wu] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-ezhw4sz8wu] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-ezhw4sz8wu] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-ezhw4sz8wu] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll. ::deep everywhere:
   MudTabs is a child COMPONENT, so its rendered elements never receive this
   component's CSS scope attribute. */
[b-ezhw4sz8wu] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-ezhw4sz8wu] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-ezhw4sz8wu] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-ezhw4sz8wu] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-ezhw4sz8wu] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-ezhw4sz8wu] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-ezhw4sz8wu],
.panel-splitter:active[b-ezhw4sz8wu] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-ezhw4sz8wu] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-ezhw4sz8wu] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-ezhw4sz8wu] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

/* Coordinate-system toggle (ECEF / ECI) in the globe toolbar */
.coordsys-toggle[b-ezhw4sz8wu] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* The two frame names either side of the switch; the selected one is
   highlighted so the current frame reads at a glance. Frame names are acronyms
   and stay left-to-right even in an RTL layout. */
.coordsys-label[b-ezhw4sz8wu] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
    user-select: none;
}

.coordsys-label-active[b-ezhw4sz8wu] {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

/* The switch carries no label of its own, but MudBlazor still wraps it in a
   full-width input-control that reserves room for one. Left alone that wrapper
   overhangs the toolbar and pushes the trailing frame name out from between the
   two labels, so it is shrunk to just the switch. */
.coordsys-toggle[b-ezhw4sz8wu]  .mud-input-control {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}

.coordsys-toggle[b-ezhw4sz8wu]  .mud-switch {
    margin: 0;
}

.map-area[b-ezhw4sz8wu] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-ezhw4sz8wu] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

.map-container[b-ezhw4sz8wu]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                GROUND-TRACK CHART PANEL (host)                     */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-ezhw4sz8wu] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*             DEDICATED CHATBOT PANEL (right-most)                   */
/* ----------------------------------------------------------------- */

.lostool-chat-panel[b-ezhw4sz8wu] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.lostool-chat-panel.collapsed[b-ezhw4sz8wu] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .lostool-chat-panel.collapsed[b-ezhw4sz8wu] {
    border-right-width: 0;
}

[dir="rtl"] .lostool-chat-panel[b-ezhw4sz8wu] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.lostool-chat-host[b-ezhw4sz8wu] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/SatelliteLosTool/Editors/SatelliteLosEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*              SatelliteLosEditorComp.razor.css                     */
/*   Compact WPF-editor-style rows: label | small editor, so the     */
/*   whole editor fits the panel.                                     */
/*                                                                   */
/*   The class names and rules mirror LosVisibilityEditorComp.razor  */
/*   .css deliberately: these editors are all ports of WPF editors    */
/*   sharing the same look. They cannot share ONE stylesheet because  */
/*   Blazor CSS isolation rewrites each component's rules to its own  */
/*   generated scope attribute — an unscoped or foreign-scope rule    */
/*   simply never matches these elements.                            */
/* ================================================================= */

.los-editor-scroll[b-dado0l6war] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-dado0l6war] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-dado0l6war] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

.los-group-subtitle[b-dado0l6war] {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    font-size: 0.7rem;
    margin: 4px 0 1px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------- */
/*                    COLLAPSIBLE GROUPS                              */
/* ----------------------------------------------------------------- */

.los-expander[b-dado0l6war] {
    display: block;
}

.los-expander[open][b-dado0l6war] {
    display: flex;
    flex-direction: column;
}

summary.los-expander-title[b-dado0l6war] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.los-expander-title[b-dado0l6war]::-webkit-details-marker {
    display: none;
}

.los-expander-title[b-dado0l6war]::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--mud-palette-primary);
    transition: transform 0.15s ease;
}

.los-expander[open] > .los-expander-title[b-dado0l6war]::before {
    transform: rotate(90deg);
}

[dir="rtl"] .los-expander-title[b-dado0l6war]::before {
    border-left: none;
    border-right: 5px solid var(--mud-palette-primary);
}

[dir="rtl"] .los-expander[open] > .los-expander-title[b-dado0l6war]::before {
    transform: rotate(-90deg);
}

.los-expander-summary[b-dado0l6war] {
    margin-inline-start: auto;
    padding-inline-start: 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

.los-expander-summary-ok[b-dado0l6war] {
    color: var(--mud-palette-success);
}

.los-expander-summary-bad[b-dado0l6war] {
    color: var(--mud-palette-error);
}

/* ----------------------------------------------------------------- */
/*                          ROWS                                      */
/* ----------------------------------------------------------------- */

.los-row[b-dado0l6war] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

/* A row whose editor sits on its OWN line below the label (used for the
   long TLE lines, which are too wide to sit beside their label). */
.los-row-stack[b-dado0l6war] {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 2px;
}

.los-row-label[b-dado0l6war] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.los-row-stack .los-row-label[b-dado0l6war] {
    flex: 0 0 auto;
}

.los-input[b-dado0l6war] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

/* Full-width input for the name and TLE lines. */
.los-input-wide[b-dado0l6war] {
    width: 100%;
}

/* Monospace so the fixed-column TLE lines line up. */
.los-input-mono[b-dado0l6war] {
    font-family: ui-monospace, "Consolas", "Courier New", monospace;
    font-size: 0.68rem;
}

.los-input:focus[b-dado0l6war] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* ----------------------------------------------------------------- */
/*                 ORBIT TAB CONTROL (TLE / KEPLER)                   */
/*   Same look as the SatelliteCoordinatesEditor frame tabs — the two */
/*   editors are siblings and must read as one control family. The    */
/*   rules are duplicated rather than shared because Blazor CSS       */
/*   isolation scopes every rule to its own component.                */
/* ----------------------------------------------------------------- */

.coord-tabs[b-dado0l6war] {
    display: flex;
    flex-direction: column;
    margin: 4px 6px;
}

.coord-tab-strip[b-dado0l6war] {
    display: flex;
    gap: 4px;
    /* TLE / KEPLER are acronyms and read left-to-right even in an RTL page. */
    direction: ltr;
}

.coord-tab[b-dado0l6war] {
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    user-select: none;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

.coord-tab:hover[b-dado0l6war] {
    color: var(--mud-palette-text-primary);
}

.coord-tab-visible[b-dado0l6war] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
}

/* Tab body — squared off at the top so it joins the strip above it. */
.coord-tab-body[b-dado0l6war] {
    margin: 0;
    border-radius: 0 0 6px 6px;
}

/* ----------------------------------------------------------------- */
/*              SIMULATED-CLOCK TRANSPORT BUTTON ROW                  */
/* ----------------------------------------------------------------- */

/* Transport buttons read left-to-right (rewind | play | forward | reset)
   in every culture — mirroring them in RTL would put "forward" on the left. */
.los-time-buttons[b-dado0l6war] {
    display: flex;
    align-items: center;
    gap: 2px;
    direction: ltr;
}

/* The T+HH:MM:SS offset, pushed to the end of the button row. */
.los-time-buttons .los-readout-value[b-dado0l6war] {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.los-readout-value[b-dado0l6war] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.los-hint[b-dado0l6war] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
}
/* _content/AspireChatApp.Razor/Components/Tools/SatelliteLosTool/SatelliteLosToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                SatelliteLosToolComp.razor.css                     */
/*   Layout styles for the satellite-LOS tool (RTL aware):           */
/*   left editor tabs | Cesium globe | LOS side-view chart panel.    */
/*   Mirrors AltitudeViewshedToolComp.razor.css — the rules are      */
/*   repeated rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so  */
/*   the class names are identical but the scope attribute is not.   */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-tg5v6thze4] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left. The dir="rtl"
   attribute alone reverses the flex row; do NOT add row-reverse. */
.lostool-container[dir="rtl"][b-tg5v6thze4] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-tg5v6thze4] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-tg5v6thze4] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-tg5v6thze4] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* MudTabs is a child COMPONENT, so ::deep is needed to reach its elements. */
[b-tg5v6thze4] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-tg5v6thze4] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-tg5v6thze4] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-tg5v6thze4] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-tg5v6thze4] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-tg5v6thze4] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-tg5v6thze4],
.panel-splitter:active[b-tg5v6thze4] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-tg5v6thze4] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-tg5v6thze4] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-tg5v6thze4] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

/* ECEF / ECI frame selector in the map toolbar */
.coordsys-toggle[b-tg5v6thze4] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* The two frame names either side of the switch; the selected one is
   highlighted so the current frame reads at a glance. Frame names are acronyms
   and stay left-to-right even in an RTL layout. */
.coordsys-label[b-tg5v6thze4] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
    user-select: none;
}

.coordsys-label-active[b-tg5v6thze4] {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

/* The switch carries no label of its own, but MudBlazor still wraps it in a
   full-width input-control that reserves room for one. Left alone that wrapper
   overhangs the toolbar and pushes the trailing frame name out from between the
   two labels, so it is shrunk to just the switch. */
.coordsys-toggle[b-tg5v6thze4]  .mud-input-control {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}

.coordsys-toggle[b-tg5v6thze4]  .mud-switch {
    margin: 0;
}

.map-area[b-tg5v6thze4] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* ----------------------------------------------------------------- */
/*   TIME WIDGET (the WPF SimulatedDateTimeEditor) under the globe    */
/* ----------------------------------------------------------------- */

.time-widget[b-tg5v6thze4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    z-index: 10;
}

.time-widget-label[b-tg5v6thze4] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-inline-start: 6px;
}

/* Times and factors are numeric and always read left-to-right, even in RTL. */
.time-widget-input[b-tg5v6thze4] {
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.75rem;
    direction: ltr;
}

.time-widget-input:focus[b-tg5v6thze4] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.time-widget-input-narrow[b-tg5v6thze4] {
    width: 72px;
}

/* Offset from the TLE epoch, pinned to the far end of the bar. */
.time-widget-offset[b-tg5v6thze4] {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    white-space: nowrap;
}

.map-container[b-tg5v6thze4] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

.map-container[b-tg5v6thze4]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                LOS SIDE-VIEW CHART PANEL (host)                    */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-tg5v6thze4] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.lostool-chat-panel[b-tg5v6thze4] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.lostool-chat-panel.collapsed[b-tg5v6thze4] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .lostool-chat-panel.collapsed[b-tg5v6thze4] {
    border-right-width: 0;
}

[dir="rtl"] .lostool-chat-panel[b-tg5v6thze4] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* CHAT host — lets the embedded per-tool ChatBotComp fill the panel */
.lostool-chat-host[b-tg5v6thze4] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* _content/AspireChatApp.Razor/Components/Tools/SunShadowTool/Charts/SunShadowChartComp.razor.rz.scp.css */
/* ================================================================= */
/*              ViewshedTopViewChartComp.razor.css                   */
/*   Viewshed top-view chart: interactive Plotly plot (drag to pan,   */
/*   wheel to zoom) + the WPF-style control row underneath.           */
/*   Mirrors ProfileSideViewChartComp.razor.css — the rules are       */
/*   repeated rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute.      */
/*   Axis titles live inside the Plotly layout (its SVG text applies  */
/*   bidi, so Hebrew needs no HTML-title workaround).                 */
/* ================================================================= */

.chart-host[b-tgs4zza015] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* The plot always reads left-to-right regardless of UI culture */
.chart-plot-area[b-tgs4zza015] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

/* Control row (WPF ViewshedTopViewChart.xaml bottom DockPanel) */
.chart-toolbar[b-tgs4zza015] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.chart-toolbar-label[b-tgs4zza015] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

/* AXES EQUAL checkbox + caption */
.chart-toolbar-check[b-tgs4zza015] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.chart-projection-select[b-tgs4zza015] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    min-width: 110px;
}

/* Zoom / reset / save buttons (the WpfPlot right-click menu equivalents) */
.chart-toolbar-btn[b-tgs4zza015] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.chart-toolbar-btn:hover[b-tgs4zza015] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.chart-toolbar-btn:active[b-tgs4zza015] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/SunShadowTool/Editors/SunShadowEditorComp.razor.rz.scp.css */
/* Compact editor rows for the Sun & Shadow tool.

   These rules are a deliberate DUPLICATE of LosVisibilityEditorComp's los-* classes.
   Blazor CSS isolation scopes every stylesheet to its own generated attribute, so the
   originals cannot be inherited by class name however identical they look — each tool
   carries its own copy. */

.sunshadow-editor-scroll[b-xn16oofthb] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sunshadow-group[b-xn16oofthb] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sunshadow-group-title[b-xn16oofthb] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor / readout sits at the end. */
.sunshadow-row[b-xn16oofthb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.sunshadow-row-label[b-xn16oofthb] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs / selects styled to the Mud palette. */
.sunshadow-input[b-xn16oofthb] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers and dates always read left-to-right, even under the RTL default culture. */
    direction: ltr;
}

.sunshadow-input:focus[b-xn16oofthb] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.sunshadow-slider[b-xn16oofthb] {
    flex: 1;
    height: 24px;
    direction: ltr;
}

.sunshadow-slider-value[b-xn16oofthb] {
    min-width: 44px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    direction: ltr;
}

.sunshadow-readout-value[b-xn16oofthb] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.sunshadow-check[b-xn16oofthb] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

/* Solstice / equinox shortcut chips. */
.sunshadow-chiprow[b-xn16oofthb] {
    display: flex;
    gap: 4px;
}

.sunshadow-chip[b-xn16oofthb] {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.7rem;
    cursor: pointer;
}

.sunshadow-chip:hover[b-xn16oofthb] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.sunshadow-chip:focus-visible[b-xn16oofthb] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* Collapsible group. The summary must be element-qualified to beat the user-agent
   `display: list-item`, otherwise the flex layout (and the right-aligned headline
   value) never applies. */
.sunshadow-expander > *:not(summary)[b-xn16oofthb] {
    margin-top: 1px;
}

summary.sunshadow-expander-title[b-xn16oofthb] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
}

summary.sunshadow-expander-title[b-xn16oofthb]::-webkit-details-marker {
    display: none;
}

summary.sunshadow-expander-title[b-xn16oofthb]::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}

[dir="rtl"] summary.sunshadow-expander-title[b-xn16oofthb]::before {
    border-left: none;
    border-right: 4px solid currentColor;
}

details[open] > summary.sunshadow-expander-title[b-xn16oofthb]::before {
    transform: rotate(90deg);
}

[dir="rtl"] details[open] > summary.sunshadow-expander-title[b-xn16oofthb]::before {
    transform: rotate(-90deg);
}

.sunshadow-expander-summary[b-xn16oofthb] {
    margin-inline-start: auto;
    font-weight: 600;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}

.sunshadow-compute-button[b-xn16oofthb] {
    margin: 4px 6px;
}

.sunshadow-hint[b-xn16oofthb] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    summary.sunshadow-expander-title[b-xn16oofthb]::before {
        transition: none;
    }
}

/* Compliance verdict banner. The pass/fail split is carried by a mark AND by colour,
   never by colour alone — the verdict has to survive a monochrome print in a planning
   submission, and read for a colour-blind reviewer. */
.sunshadow-verdict[b-xn16oofthb] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sunshadow-verdict-mark[b-xn16oofthb] {
    font-size: 0.95rem;
    line-height: 1;
}

.sunshadow-verdict-pass[b-xn16oofthb] {
    background: var(--mud-palette-success-hover);
    color: var(--mud-palette-success);
}

.sunshadow-verdict-fail[b-xn16oofthb] {
    background: var(--mud-palette-error-hover);
    color: var(--mud-palette-error);
}

/* A caveat about the verdict itself — a rule needing solar time while the study runs on
   clock time, or a standard selected against a study that cannot answer it. */
.sunshadow-warning[b-xn16oofthb] {
    margin: 2px 0;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--mud-palette-warning-hover);
    color: var(--mud-palette-warning);
    font-size: 0.7rem;
}
/* _content/AspireChatApp.Razor/Components/Tools/SunShadowTool/SunShadowToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                AltitudeViewshedToolComp.razor.css                 */
/*   Layout styles for the altitude viewshed tool (RTL aware):       */
/*   left editor tabs | Cesium globe | top-view chart panel.         */
/*   Mirrors LosVisibilityToolComp.razor.css — the rules are         */
/*   repeated rather than shared because Blazor CSS isolation scopes */
/*   each component's stylesheet to its own generated attribute, so  */
/*   the class names are identical but the scope attribute is not.   */
/*   Editor styles live in LosVisibilityEditorComp.razor.css (reused */
/*   by AltitudeViewshedEditorComp) and chart styles in              */
/*   ViewshedTopViewChartComp.razor.css.                             */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-1diwb9sm46] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-1diwb9sm46] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-1diwb9sm46] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-1diwb9sm46] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-1diwb9sm46] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-1diwb9sm46] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-1diwb9sm46] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-1diwb9sm46] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-1diwb9sm46] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-1diwb9sm46] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-1diwb9sm46] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-1diwb9sm46],
.panel-splitter:active[b-1diwb9sm46] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-1diwb9sm46] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-1diwb9sm46] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-1diwb9sm46] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-1diwb9sm46] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-1diwb9sm46] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-1diwb9sm46]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                TOP-VIEW CHART PANEL (host)                         */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-1diwb9sm46] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.viewshed-chat-panel[b-1diwb9sm46] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.viewshed-chat-panel.collapsed[b-1diwb9sm46] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .viewshed-chat-panel.collapsed[b-1diwb9sm46] {
    border-right-width: 0;
}

[dir="rtl"] .viewshed-chat-panel[b-1diwb9sm46] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.viewshed-chat-host[b-1diwb9sm46] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp so  */
/*   every globe offers the same toolbar options)                      */
/* ================================================================= */

.menu-exaggeration-row[b-1diwb9sm46] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-1diwb9sm46] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-1diwb9sm46] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-1diwb9sm46] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-1diwb9sm46] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-1diwb9sm46] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-1diwb9sm46] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

/* Day-sequence frame picker in the map toolbar. */
.sunshadow-frame-label[b-1diwb9sm46] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-inline-end: 4px;
    align-self: center;
}

/* Scrubber bar over the globe.

   Sits on the map rather than in the left panel on purpose: scrubbing is a
   look-at-the-map act, and putting the control beside the parameters would make the
   user's eyes travel away from the thing that is moving. */
.sunshadow-scrubber[b-1diwb9sm46] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 12px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sunshadow-scrub-readout[b-1diwb9sm46] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    /* Times and dates read left-to-right even under the RTL default culture. */
    direction: ltr;
}

.sunshadow-scrub-clock[b-1diwb9sm46] {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary);
    line-height: 1.1;
}

.sunshadow-scrub-date[b-1diwb9sm46],
.sunshadow-scrub-elevation[b-1diwb9sm46] {
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.sunshadow-scrub-row[b-1diwb9sm46] {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
}

.sunshadow-scrub-slider[b-1diwb9sm46] {
    flex: 1;
    height: 20px;
    direction: ltr;
    accent-color: var(--mud-palette-warning);
    cursor: pointer;
}

.sunshadow-scrub-end[b-1diwb9sm46] {
    min-width: 42px;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.sunshadow-scrub-actions[b-1diwb9sm46] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Solar-potential readout, floating over the map at the probed point.

   Positioned absolutely inside .map-area so it sits ON the map: the reading belongs
   next to the point it describes, not in a panel across the screen from it. */
.sunshadow-probe-card[b-1diwb9sm46] {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 5;
    width: 240px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 4px 18px -6px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sunshadow-probe-title[b-1diwb9sm46] {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--mud-palette-secondary);
    margin-bottom: 2px;
}

.sunshadow-probe-row[b-1diwb9sm46] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

.sunshadow-probe-row b[b-1diwb9sm46] {
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    /* Figures and units read left-to-right under the RTL default culture. */
    direction: ltr;
}

.sunshadow-probe-loss[b-1diwb9sm46] {
    padding-top: 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sunshadow-probe-loss b[b-1diwb9sm46] {
    color: var(--mud-palette-warning);
}

.sunshadow-probe-hint[b-1diwb9sm46] {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

/* Twelve monthly bars. Chart convention is left-to-right January..December, so the
   row is forced LTR regardless of the page direction. */
.sunshadow-probe-bars[b-1diwb9sm46] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 54px;
    margin-top: 6px;
    direction: ltr;
}

.sunshadow-probe-bar[b-1diwb9sm46] {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
}

.sunshadow-probe-bar-fill[b-1diwb9sm46] {
    width: 100%;
    min-height: 2px;
    border-radius: 1px 1px 0 0;
    background: var(--mud-palette-warning);
}

.sunshadow-probe-bar-label[b-1diwb9sm46] {
    font-size: 0.55rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1;
}

/* The map area has to establish a containing block for the absolutely-positioned
   probe card above. */
.map-area[b-1diwb9sm46] {
    position: relative;
}
/* _content/AspireChatApp.Razor/Components/Tools/TeachingTool/Editors/TeachingCourseTreeComp.razor.rz.scp.css */
/* ================================================================= */
/*                 TeachingCourseTreeComp.razor.css                  */
/*   Scoped styles for the course tree. CSS isolation is per-        */
/*   component, so these `teach-*` rules are duplicated here rather   */
/*   than inherited from any other component's stylesheet.           */
/* ================================================================= */

.teach-tree[b-t487qry8ks] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Compact single-row search field (LosVisibilityTool `los-row` pattern, renamed). */
.teach-row[b-t487qry8ks] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 6px 4px;
    flex: 0 0 auto;
}

.teach-row-icon[b-t487qry8ks] {
    color: var(--mud-palette-text-secondary);
}

.teach-input[b-t487qry8ks] {
    flex: 1;
    height: 26px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 8px;
    font-size: .82rem;
}

.teach-input:focus[b-t487qry8ks] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Scrollable tree body — the ONLY scroll region in the left panel. */
.teach-tree-scroll[b-t487qry8ks] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
}

.teach-empty[b-t487qry8ks] {
    padding: 12px 8px;
    color: var(--mud-palette-text-secondary);
    font-size: .82rem;
}

/* Folder node (course root or nested part). */
.teach-folder[b-t487qry8ks] {
    margin: 0;
}

/* Force flex on <summary> (beats UA display:list-item) and hide the default marker. */
summary.teach-folder-summary[b-t487qry8ks] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: 4px;
}

summary.teach-folder-summary[b-t487qry8ks]::-webkit-details-marker {
    display: none;
}

summary.teach-folder-summary:hover[b-t487qry8ks] {
    background: var(--mud-palette-action-default-hover);
}

.teach-folder-icon[b-t487qry8ks] {
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.teach-folder-name[b-t487qry8ks] {
    font-weight: 600;
    font-size: .84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lesson leaf (PDF). */
.teach-lesson[b-t487qry8ks] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 4px;
}

.teach-lesson:hover[b-t487qry8ks] {
    background: var(--mud-palette-action-default-hover);
}

.teach-lesson.selected[b-t487qry8ks] {
    background: var(--mud-palette-primary-hover);
}

.teach-lesson.selected .teach-lesson-name[b-t487qry8ks] {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.teach-lesson-icon[b-t487qry8ks] {
    color: #e53935; /* PDF red, matching the WPF tool's document glyph */
    flex: 0 0 auto;
}

.teach-lesson-name[b-t487qry8ks] {
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/AspireChatApp.Razor/Components/Tools/TeachingTool/TeachingToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                  TeachingToolComp.razor.css                       */
/*   Layout styles for the Teaching (course-lecture) tool (RTL aware):*/
/*   left course tree | PDF viewer | ChatBot panel.                   */
/*   Course-tree styles live in TeachingCourseTreeComp.razor.css.     */
/*   CSS isolation is per-component, so the panel/splitter/header     */
/*   rules below are this component's own copies (not inherited).     */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.teachtool-container[b-rz8sx1sfvv] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support — tree on the right, chat on the left. The dir="rtl" attribute
   alone reverses the flex row; do NOT add flex-direction: row-reverse (it would
   reverse a second time and cancel out). */
.teachtool-container[dir="rtl"][b-rz8sx1sfvv] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL (course tree)                      */
/* ----------------------------------------------------------------- */

.teachtool-left-panel[b-rz8sx1sfvv] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .teachtool-left-panel[b-rz8sx1sfvv] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.teachtool-left-panel.collapsed[b-rz8sx1sfvv] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can host the scrolling tree.
   ::deep everywhere: MudTabs is a child COMPONENT, so its rendered elements
   never carry this component's scoped-CSS attribute. */
[b-rz8sx1sfvv] .teachtool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-rz8sx1sfvv] .teachtool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-rz8sx1sfvv] .teachtool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* COURSES tab host — header (count) + scrolling tree fill the panel. */
.teachtool-tree-host[b-rz8sx1sfvv] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.teachtool-tree-header[b-rz8sx1sfvv] {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.teachtool-tree-count[b-rz8sx1sfvv] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* ChatBot host — lets the embedded per-tool ChatBotComp fill the panel. */
.teachtool-chat-host[b-rz8sx1sfvv] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-rz8sx1sfvv] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
    flex: 0 0 auto;
}

.panel-title[b-rz8sx1sfvv] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-rz8sx1sfvv] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-rz8sx1sfvv],
.panel-splitter:active[b-rz8sx1sfvv] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-rz8sx1sfvv] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (PDF viewer)                     */
/* ----------------------------------------------------------------- */

.teachtool-center-panel[b-rz8sx1sfvv] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.teachtool-viewer-toolbar[b-rz8sx1sfvv] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    gap: 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    z-index: 10;
}

.teachtool-viewer-icon[b-rz8sx1sfvv] {
    color: #e53935; /* PDF red */
    flex: 0 0 auto;
}

.teachtool-viewer-title[b-rz8sx1sfvv] {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teachtool-viewer-area[b-rz8sx1sfvv] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    position: relative;
    background: #525659; /* neutral PDF-viewer backdrop, matches browser PDF chrome */
}

.teachtool-pdf-frame[b-rz8sx1sfvv] {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: none;
}

/* PDF.js host: a scrolling column of page canvases, styled to resemble the
   browser's own PDF chrome so the fallback does not look like a different
   application. ::deep because the canvases are created by JS and carry no
   scoped-CSS attribute. */
.teachtool-pdfjs-host[b-rz8sx1sfvv] {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 12px 0;
    box-sizing: border-box;
    text-align: center;
}

[b-rz8sx1sfvv] .pdfjs-page {
    display: block;
    margin: 0 auto 12px auto;
    max-width: calc(100% - 24px);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* Fallback shown INSIDE the <object> when the browser will not render the PDF
   inline. Paints its own background so the text is readable against the dark
   PDF-chrome backdrop of .teachtool-viewer-area. */
.teachtool-pdf-fallback[b-rz8sx1sfvv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    text-align: center;
    box-sizing: border-box;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
}

.teachtool-pdf-fallback-actions[b-rz8sx1sfvv] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.teachtool-placeholder[b-rz8sx1sfvv] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-background);
    text-align: center;
    padding: 24px;
}

/* ----------------------------------------------------------------- */
/*                      RIGHT PANEL (ChatBot)                         */
/* ----------------------------------------------------------------- */

.teachtool-chat-panel[b-rz8sx1sfvv] {
    flex: 1 1 0;
    min-width: 280px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1);
    overflow: hidden;
}

[dir="rtl"] .teachtool-chat-panel[b-rz8sx1sfvv] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.teachtool-chat-panel.collapsed[b-rz8sx1sfvv] {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    border: none;
}
/* _content/AspireChatApp.Razor/Components/Tools/TerrainProfileTool/Editors/TerrainProfileEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*             TerrainProfileEditorComp.razor.css                    */
/*   Compact WPF-TerrainProfileEditor-style rows: label | small      */
/*   editor, so the whole editor fits the panel.                     */
/*                                                                   */
/*   The class names and rules mirror LosVisibilityEditorComp.razor  */
/*   .css deliberately: both editors are ports of WPF editors that   */
/*   share the same LosEditor location-group look. They cannot share */
/*   ONE stylesheet because Blazor CSS isolation rewrites each        */
/*   component's rules to its own generated scope attribute — an      */
/*   unscoped or foreign-scope rule simply never matches these        */
/*   elements. Only the classes this editor actually uses are kept.  */
/* ================================================================= */

/* Scroll wrapper (safety net — this editor is short and normally fits) */
.los-editor-scroll[b-xpx9oao3az] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* WPF GroupBox look: primary border + title */
.los-group[b-xpx9oao3az] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-xpx9oao3az] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* One compact editor row: label stretches, editor/readout at the end */
.los-row[b-xpx9oao3az] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-xpx9oao3az] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small native inputs styled to the Mud palette */
.los-input[b-xpx9oao3az] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}

.los-input:focus[b-xpx9oao3az] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Computed readout values */
.los-readout-value[b-xpx9oao3az] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* Compute button / hint */
.los-compute-button[b-xpx9oao3az] {
    margin: 4px 6px;
}

.los-hint[b-xpx9oao3az] {
    margin: 0 8px 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}
/* _content/AspireChatApp.Razor/Components/Tools/TerrainProfileTool/TerrainProfileToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                TerrainProfileToolComp.razor.css                   */
/*   Layout styles for the terrain profile tool (RTL aware):         */
/*   left editor tabs | Cesium globe | side-view chart panel.        */
/*   Mirrors AltitudeViewshedToolComp.razor.css — the rules are      */
/*   repeated rather than shared because Blazor CSS isolation scopes  */
/*   each component's stylesheet to its own generated attribute, so   */
/*   the class names are identical but the scope attribute is not.    */
/*   Editor styles live in TerrainProfileEditorComp.razor.css and     */
/*   chart styles are inherited from ProfileSideViewChartComp.        */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-gf1170z8m0] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-gf1170z8m0] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-gf1170z8m0] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-gf1170z8m0] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-gf1170z8m0] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-gf1170z8m0] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* MudTabs' internal panels wrapper must pass the height constraint down */
[b-gf1170z8m0] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Tab panels host child editor components that scroll internally */
[b-gf1170z8m0] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-gf1170z8m0] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-gf1170z8m0] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-gf1170z8m0] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-gf1170z8m0],
.panel-splitter:active[b-gf1170z8m0] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-gf1170z8m0] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-gf1170z8m0] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-gf1170z8m0] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-gf1170z8m0] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-gf1170z8m0] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-gf1170z8m0]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                SIDE-VIEW CHART PANEL (host)                        */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-gf1170z8m0] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*        RIGHT-MOST CHAT PANEL (dedicated ChatBot)                   */
/* ----------------------------------------------------------------- */

.lostool-chat-panel[b-gf1170z8m0] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.lostool-chat-panel.collapsed[b-gf1170z8m0] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .lostool-chat-panel.collapsed[b-gf1170z8m0] {
    border-right-width: 0;
}

[dir="rtl"] .lostool-chat-panel[b-gf1170z8m0] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.lostool-chat-host[b-gf1170z8m0] {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================================================================= */
/*   Map-tools menu + Goto dialog (ported from MapExplorerToolComp so  */
/*   every globe offers the same toolbar options)                      */
/* ================================================================= */

.menu-exaggeration-row[b-gf1170z8m0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.menu-exaggeration-label[b-gf1170z8m0] {
    white-space: nowrap;
}

.menu-exaggeration-input[b-gf1170z8m0] {
    width: 64px;
    padding: 2px 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
}

.goto-dialog-compact[b-gf1170z8m0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 260px;
    max-width: 100%;
}

.goto-row[b-gf1170z8m0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.goto-row-label[b-gf1170z8m0] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goto-input[b-gf1170z8m0] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    /* Numbers always read left-to-right */
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/TributeTool/Editors/TributeSongTreeComp.razor.rz.scp.css */
/* ================================================================= */
/*                  TributeSongTreeComp.razor.css                    */
/*   Scoped styles for the album song tree. CSS isolation is per-    */
/*   component, so these `tribute-*` rules are duplicated here rather */
/*   than inherited from any other component's stylesheet (they are   */
/*   the TeachingCourseTreeComp `teach-*` rules, renamed).            */
/* ================================================================= */

.tribute-tree[b-zyfra5fv2o] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Compact single-row search field (LosVisibilityTool `los-row` pattern, renamed). */
.tribute-row[b-zyfra5fv2o] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 6px 4px;
    flex: 0 0 auto;
}

.tribute-row-icon[b-zyfra5fv2o] {
    color: var(--mud-palette-text-secondary);
}

.tribute-input[b-zyfra5fv2o] {
    flex: 1;
    height: 26px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 8px;
    font-size: .82rem;
}

.tribute-input:focus[b-zyfra5fv2o] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* Scrollable tree body — the ONLY scroll region in the left panel.
   When the songs list runs off-screen a vertical scrollbar appears here. */
.tribute-tree-scroll[b-zyfra5fv2o] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-default) transparent;
}

/* Slim custom scrollbar (WebKit) so the list scrolls cleanly when long. */
.tribute-tree-scroll[b-zyfra5fv2o]::-webkit-scrollbar {
    width: 8px;
}

.tribute-tree-scroll[b-zyfra5fv2o]::-webkit-scrollbar-track {
    background: transparent;
}

.tribute-tree-scroll[b-zyfra5fv2o]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}

.tribute-tree-scroll[b-zyfra5fv2o]::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}

.tribute-empty[b-zyfra5fv2o] {
    padding: 12px 8px;
    color: var(--mud-palette-text-secondary);
    font-size: .82rem;
}

/* Folder node (album root or disc). */
.tribute-folder[b-zyfra5fv2o] {
    margin: 0;
}

/* Force flex on <summary> (beats UA display:list-item) and hide the default marker. */
summary.tribute-folder-summary[b-zyfra5fv2o] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: 4px;
}

summary.tribute-folder-summary[b-zyfra5fv2o]::-webkit-details-marker {
    display: none;
}

summary.tribute-folder-summary:hover[b-zyfra5fv2o] {
    background: var(--mud-palette-action-default-hover);
}

/* Disclosure chevron — rotates when the folder opens (animated). The RTL layout
   flips it so it points inward toward the label on either side. */
.tribute-folder-chevron[b-zyfra5fv2o] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    transition: transform .18s ease;
    transform: rotate(-90deg);
}

.tribute-folder[open] > summary .tribute-folder-chevron[b-zyfra5fv2o] {
    transform: rotate(0deg);
}

/* Animate the folder body sliding open. `<details>` toggles instantly, so we
   run a short reveal animation on its content whenever the folder is open. */
.tribute-folder[open] > summary ~ *[b-zyfra5fv2o] {
    animation: tribute-reveal-b-zyfra5fv2o .18s ease;
}

@keyframes tribute-reveal-b-zyfra5fv2o {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tribute-folder-chevron[b-zyfra5fv2o],
    .tribute-folder[open] > summary ~ *[b-zyfra5fv2o] {
        transition: none;
        animation: none;
    }
}

/* Album / disc icons — memorial purple accent (matching the WPF #FF8E24AA / #FF5E35B1). */
.tribute-album-icon[b-zyfra5fv2o] {
    color: #8e24aa;
    flex: 0 0 auto;
}

.tribute-disc-icon[b-zyfra5fv2o] {
    color: #5e35b1;
    flex: 0 0 auto;
}

.tribute-folder-name[b-zyfra5fv2o] {
    font-weight: 600;
    font-size: .84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Song leaf (MP3). */
.tribute-song[b-zyfra5fv2o] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 4px;
}

.tribute-song:hover[b-zyfra5fv2o] {
    background: var(--mud-palette-action-default-hover);
}

.tribute-song.playing[b-zyfra5fv2o] {
    background: var(--mud-palette-primary-hover);
}

.tribute-song.playing .tribute-song-name[b-zyfra5fv2o] {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.tribute-song-icon[b-zyfra5fv2o] {
    color: #e53935; /* memorial red, matching the WPF song glyph */
    flex: 0 0 auto;
}

.tribute-song-name[b-zyfra5fv2o] {
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}

/* Inline start/stop buttons — pinned to the row's trailing edge. Hidden until the
   row is hovered (or is the currently-playing song), so the list stays uncluttered. */
.tribute-song-actions[b-zyfra5fv2o] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-inline-start: auto;
    opacity: 0;
    transition: opacity .15s ease;
}

.tribute-song:hover .tribute-song-actions[b-zyfra5fv2o],
.tribute-song.playing .tribute-song-actions[b-zyfra5fv2o] {
    opacity: 1;
}

/* Shrink the MudIconButtons so they fit a compact tree row. */
.tribute-song-actions[b-zyfra5fv2o]  .tribute-song-btn {
    width: 24px;
    height: 24px;
    padding: 2px;
}

.tribute-song-actions[b-zyfra5fv2o]  .tribute-song-btn .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.tribute-song-actions[b-zyfra5fv2o]  .tribute-song-btn-play {
    color: #43a047; /* memorial green — play */
}

.tribute-song-actions[b-zyfra5fv2o]  .tribute-song-btn-stop {
    color: #e53935; /* memorial red — stop */
}
/* _content/AspireChatApp.Razor/Components/Tools/TributeTool/TributeToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                   TributeToolComp.razor.css                       */
/*   Layout styles for the Tribute (memorial) tool (RTL aware):      */
/*   left album song tree | booklet PDF viewer | ChatBot panel.      */
/*   Song-tree styles live in TributeSongTreeComp.razor.css.         */
/*   CSS isolation is per-component, so the panel/splitter/header     */
/*   rules below are this component's own copies (not inherited) —    */
/*   they are the TeachingToolComp `teach-*` rules, renamed.          */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.tribute-container[b-1yudif1dl5] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support — tree on the right, chat on the left. The dir="rtl" attribute
   alone reverses the flex row; do NOT add flex-direction: row-reverse. */
.tribute-container[dir="rtl"][b-1yudif1dl5] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL (album tree)                       */
/* ----------------------------------------------------------------- */

.tribute-left-panel[b-1yudif1dl5] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .tribute-left-panel[b-1yudif1dl5] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.tribute-left-panel.collapsed[b-1yudif1dl5] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* "In loving memory" header: candle + portrait + Izkor link. */
.tribute-memory-header[b-1yudif1dl5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(142, 36, 170, 0.08); /* subtle memorial purple wash */
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.tribute-candle[b-1yudif1dl5] {
    font-size: 1.1rem;
    line-height: 1;
    flex: 0 0 auto;
}

.tribute-photo[b-1yudif1dl5] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--mud-palette-lines-default);
}

.tribute-izkor-link[b-1yudif1dl5] {
    font-weight: 600;
    font-size: .9rem;
    color: #8e24aa;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tribute-izkor-link:hover[b-1yudif1dl5] {
    text-decoration: underline;
}

/* The MudTabs host must flex so the tab panels can host the scrolling tree. */
[b-1yudif1dl5] .tribute-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-1yudif1dl5] .tribute-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-1yudif1dl5] .tribute-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* SONGS tab host — header (count) + scrolling tree + Liran links fill the panel. */
.tribute-tree-host[b-1yudif1dl5] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.tribute-tree-header[b-1yudif1dl5] {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tribute-tree-count[b-1yudif1dl5] {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* Liran Rosenblit links section — pinned below the tree. */
.tribute-liran[b-1yudif1dl5] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    background: rgba(94, 53, 177, 0.06);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.tribute-liran-header[b-1yudif1dl5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: .8rem;
    color: #5e35b1;
    margin-bottom: 2px;
}

.tribute-liran-icon[b-1yudif1dl5] {
    color: #5e35b1;
    flex: 0 0 auto;
}

.tribute-liran-link[b-1yudif1dl5] {
    font-size: .78rem;
    color: var(--mud-palette-primary);
    text-decoration: none;
    padding-inline-start: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tribute-liran-link:hover[b-1yudif1dl5] {
    text-decoration: underline;
}

/* ChatBot host — lets the embedded per-tool ChatBotComp fill the panel. */
.tribute-chat-host[b-1yudif1dl5] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-1yudif1dl5] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
    flex: 0 0 auto;
}

.panel-title[b-1yudif1dl5] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-1yudif1dl5] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-1yudif1dl5],
.panel-splitter:active[b-1yudif1dl5] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-1yudif1dl5] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (booklet PDF)                    */
/* ----------------------------------------------------------------- */

.tribute-center-panel[b-1yudif1dl5] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.tribute-viewer-toolbar[b-1yudif1dl5] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    gap: 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    z-index: 10;
}

.tribute-viewer-icon[b-1yudif1dl5] {
    color: #e53935; /* PDF red */
    flex: 0 0 auto;
}

.tribute-viewer-title[b-1yudif1dl5] {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
}

.tribute-nowplaying[b-1yudif1dl5] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    color: var(--mud-palette-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
}

.tribute-nowplaying-icon[b-1yudif1dl5] {
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.tribute-viewer-area[b-1yudif1dl5] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    position: relative;
    background: #525659; /* neutral PDF-viewer backdrop, matches browser PDF chrome */
}

.tribute-pdf-frame[b-1yudif1dl5] {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: none;
}

/* PDF.js host: a scrolling column of page canvases, styled to resemble the
   browser's own PDF chrome (dark backdrop, white pages with a drop shadow) so
   the fallback does not look like a different application. ::deep because the
   canvases are created by JS and carry no scoped-CSS attribute. */
.tribute-pdfjs-host[b-1yudif1dl5] {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 12px 0;
    box-sizing: border-box;
    text-align: center;
}

[b-1yudif1dl5] .pdfjs-page {
    display: block;
    margin: 0 auto 12px auto;
    max-width: calc(100% - 24px);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* Fallback shown INSIDE the <object> when the browser will not render the PDF
   inline. It has to paint its own background: the parent .tribute-viewer-area is
   the dark #525659 PDF-chrome backdrop, against which normal body text would be
   unreadable. */
.tribute-pdf-fallback[b-1yudif1dl5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 24px;
    text-align: center;
    box-sizing: border-box;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
}

.tribute-pdf-fallback-actions[b-1yudif1dl5] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.tribute-placeholder[b-1yudif1dl5] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-background);
    text-align: center;
    padding: 24px;
}

/* ----------------------------------------------------------------- */
/*                      RIGHT PANEL (ChatBot)                         */
/* ----------------------------------------------------------------- */

.tribute-chat-panel[b-1yudif1dl5] {
    flex: 1 1 0;
    min-width: 280px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1);
    overflow: hidden;
}

[dir="rtl"] .tribute-chat-panel[b-1yudif1dl5] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.tribute-chat-panel.collapsed[b-1yudif1dl5] {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    border: none;
}
/* _content/AspireChatApp.Razor/Components/Tools/WalkSimulationTool/Charts/WalkInstrumentsComp.razor.rz.scp.css */
/* ================================================================= */
/*                 WalkInstrumentsComp.razor.css                    */
/*   Instruments panel: tiles and progress; the journal chart is SimJournalComp.        */
/* ================================================================= */

.dsi-host[b-e0u06uond5] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                     INSTRUMENT TILES                               */
/* ----------------------------------------------------------------- */

.dsi-tiles[b-e0u06uond5] {
    display: grid;
    /* Two columns rather than four in a row: the panel is a quarter of the
       screen, and four tiles side by side would clip their values. */
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
    flex: 0 0 auto;
}

.dsi-tile[b-e0u06uond5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background);
    min-height: 62px;
}

.dsi-tile-label[b-e0u06uond5] {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dsi-tile-value[b-e0u06uond5] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    /* Tabular figures stop the value jittering as digits change width four
       times a second. */
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.dsi-tile-unit[b-e0u06uond5] {
    font-size: 0.6rem;
    color: var(--mud-palette-text-secondary);
}

/* A tile whose value has gone outside a safe band is tinted, so speeding or
   hard cornering reads at a glance without having to compare two numbers. */
.dsi-tile.over .dsi-tile-value[b-e0u06uond5] {
    color: var(--mud-palette-warning);
}

.dsi-tile.over[b-e0u06uond5] {
    border-color: var(--mud-palette-warning);
}

/* ----------------------------------------------------------------- */
/*                       JOURNEY PROGRESS                             */
/* ----------------------------------------------------------------- */

.dsi-progress[b-e0u06uond5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 10px 2px;
    flex: 0 0 auto;
}

.dsi-progress-bar[b-e0u06uond5] {
    height: 6px;
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
    /* The bar fills left-to-right in both cultures: it represents distance
       along a journey, not text. */
    direction: ltr;
}

.dsi-progress-fill[b-e0u06uond5] {
    height: 100%;
    background: var(--mud-palette-primary);
    transition: width .3s ease;
}

.dsi-progress-text[b-e0u06uond5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.dsi-arrived[b-e0u06uond5] {
    margin-inline-start: auto;
    color: var(--mud-palette-success);
    font-weight: 600;
}
/* _content/AspireChatApp.Razor/Components/Tools/WalkSimulationTool/Editors/WalkSimulationEditorComp.razor.rz.scp.css */
/* =================================================================
                WalkSimulationEditorComp.razor.css

   Compact single-row parameter rows, so the whole editor fits the
   left panel without scrolling.

   These rules DUPLICATE the LosVisibilityTool's .los-* pattern under
   a .ds- prefix. That is deliberate and not an oversight: Blazor CSS
   isolation scopes every stylesheet to its own generated attribute,
   so the LOS editor's rules do not apply here however identical the
   class names are. Duplication is the only way to share the look.
   ================================================================= */

.ds-editor-scroll[b-3ji65b07zo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px;
    /* The panel should not scroll, but a very small viewport must still
       reach every control rather than clipping it. */
    overflow-y: auto;
    max-height: 100%;
}

/* ---- Groups ---- */

.ds-group[b-3ji65b07zo] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ds-group-title[b-3ji65b07zo] {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0;
}

/* ---- Rows ---- */

.ds-row[b-3ji65b07zo] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: .78rem;
    min-height: 26px;
}

.ds-row-label[b-3ji65b07zo] {
    flex: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Inputs ---- */

.ds-input[b-3ji65b07zo] {
    width: 130px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: .78rem;
    /* Numbers and coordinates read left-to-right even under the RTL
       default culture, where they would otherwise render reversed. */
    direction: ltr;
}

.ds-input:focus[b-3ji65b07zo] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.ds-checkbox[b-3ji65b07zo] {
    width: 16px;
    height: 16px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.ds-slider[b-3ji65b07zo] {
    flex: 1;
    height: 24px;
    direction: ltr;
    accent-color: var(--mud-palette-primary);
}

.ds-slider-value[b-3ji65b07zo] {
    min-width: 28px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
}

/* ---- Readouts ---- */

.ds-readout-value[b-3ji65b07zo] {
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    text-align: end;
}

.ds-warn[b-3ji65b07zo] {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

/* ---- Notices ---- */

.ds-notice[b-3ji65b07zo] {
    font-size: .72rem;
    line-height: 1.35;
    color: var(--mud-palette-warning-text);
    background: var(--mud-palette-warning-hover);
    border: 1px solid var(--mud-palette-warning);
    border-radius: 4px;
    padding: 4px 6px;
    margin-bottom: 2px;
}

/* ---- Topic tabs ---- */

/* One word per tab; the grid wraps to a second row rather than squeezing a
   label, so six topics still fit a phone-width panel. */
.ds-sections[b-3ji65b07zo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray, rgba(127, 127, 127, 0.12));
    flex: 0 0 auto;
}

.ds-section-tab[b-3ji65b07zo] {
    min-width: 0;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-section-tab:hover[b-3ji65b07zo] {
    color: var(--mud-palette-text-primary);
}

.ds-section-tab.active[b-3ji65b07zo] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 600;
}

.ds-section-body[b-3ji65b07zo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A group title with its headline value (friend count, favourites) aligned
   to the far end. */
.ds-summary[b-3ji65b07zo] {
    display: flex;
    align-items: center;
}

.ds-empty[b-3ji65b07zo] {
    padding: 12px 6px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.ds-summary-value[b-3ji65b07zo] {
    margin-inline-start: auto;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: .72rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

/* ---- Keyboard reference ---- */

.ds-keys[b-3ji65b07zo] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 0 2px;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.ds-keys kbd[b-3ji65b07zo] {
    display: inline-block;
    min-width: 18px;
    padding: 1px 4px;
    margin-inline-end: 2px;
    text-align: center;
    font-family: inherit;
    font-size: .7rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
}

/* ---- Actions ---- */

.ds-actions[b-3ji65b07zo] {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

/* ----------------------------------------------------------------- */
/*   Favourite-category checkboxes: two compact columns, so eleven    */
/*   categories fit in a handful of rows instead of eleven.           */
/* ----------------------------------------------------------------- */

.ds-fav-grid[b-3ji65b07zo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    padding: 2px 0 4px 0;
}

.ds-fav-item[b-3ji65b07zo] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* ----------------------------------------------------------------- */
/*   Friends: two compact rows each — colour, name, live distance;    */
/*   then behaviour and the place / walk-to / remove buttons.         */
/* ----------------------------------------------------------------- */

.ds-friend[b-3ji65b07zo] {
    padding: 2px 0 2px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* The friend waiting to be placed by the next globe click. */
.ds-friend.placing[b-3ji65b07zo] {
    background: rgba(255, 171, 0, 0.12);
}

.ds-friend-swatch[b-3ji65b07zo] {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.ds-friend .ds-friend-name[b-3ji65b07zo] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.ds-friend .ds-friend-behaviour[b-3ji65b07zo] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.ds-friend-distance[b-3ji65b07zo] {
    flex: 0 0 56px;
    text-align: end;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
}
/* _content/AspireChatApp.Razor/Components/Tools/WalkSimulationTool/WalkSimulationToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                WalkSimulationToolComp.razor.css                  */
/*   Layout styles for the flight simulator (RTL aware):             */
/*   left editor tabs | Cesium globe + HUD | instruments panel.      */
/*                                                                    */
/*   Editor styles live in FlightSimulatorEditorComp.razor.css and   */
/*   instrument styles in FlightInstrumentsComp.razor.css.           */
/*                                                                    */
/*   The HUD overlay itself is NOT styled here: it is built in JS by  */
/*   flightsimulator_tool_cesium_helper.js, and Blazor's scoped CSS   */
/*   only matches elements Blazor rendered. Those rules live in the   */
/*   global main.css under the .gv-fs-hud-* prefix.                   */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.dstool-container[b-0z7uckk10u] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, instruments on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction). Do NOT add flex-direction: row-reverse
   here: on an rtl container that reverses a SECOND time and cancels out,
   leaving the LTR layout. */
.dstool-container[dir="rtl"][b-0z7uckk10u] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / globe / instruments panels open at 25% / 50% / 25%
   (flex: 1 / 2 / 1, so the free space is split with the globe getting half).
   A splitter drag writes inline width/min/max, which overrides the flex basis
   and pins that panel — the others keep sharing the remainder. */
.dstool-left-panel[b-0z7uckk10u] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .dstool-left-panel[b-0z7uckk10u] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.dstool-left-panel.collapsed[b-0z7uckk10u] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

/* The MudTabs host must flex so the tab panels can scroll.
   ::deep everywhere here: MudTabs is a child COMPONENT, so its rendered
   elements (root div, .mud-tabs-panels, panel divs) never receive this
   component's CSS scope attribute — unscoped rules would silently not match
   and the editor content gets clipped with no scrollbar. */
[b-0z7uckk10u] .dstool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-0z7uckk10u] .dstool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-0z7uckk10u] .dstool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Glass-cockpit tab host — the PFD/MFD canvas fills its whole tab panel.
   Without an explicit flex chain the canvas wrapper collapses and the
   instrument is drawn into a sliver at the top of the panel.
   ::deep because MudTabPanel renders the wrapper this div sits in, so that
   wrapper never carries this component's scoped-CSS attribute — styling only
   the inner div leaves an unstretched parent between it and the panel, which
   is exactly what pinned the PFD to 237px inside a 730px tab. */
[b-0z7uckk10u] .dstool-tab-panel > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.dstool-display-host[b-0z7uckk10u] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* CHAT tab host — lets the embedded per-tool ChatBotComp fill the panel */
.dstool-chat-host[b-0z7uckk10u] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-0z7uckk10u] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-0z7uckk10u] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-0z7uckk10u] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-0z7uckk10u],
.panel-splitter:active[b-0z7uckk10u] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-0z7uckk10u] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                  CENTER PANEL (Globe + HUD)                        */
/* ----------------------------------------------------------------- */

.dstool-center-panel[b-0z7uckk10u] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    /* Sized by flex, never by its content, so it can be the query container
       the toolbar compacts against (the panel narrows with the splitters and
       the display mode, not just with the window). */
    container: walksim-center / inline-size;
}

.map-toolbar[b-0z7uckk10u] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
    /* The toolbar holds a button group and a hint chip; on a narrow panel it
       wraps rather than pushing the zoom buttons off the edge. */
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------- */
/*              CAMERA-MODE EXCLUSIVE TOGGLE GROUP                    */
/* ----------------------------------------------------------------- */

/* A hand-built segmented control rather than MudButtonGroup: the group
   normalises its children's variant/colour, which is exactly what has to
   DIFFER here — the active segment must read as pressed. Buttons are joined
   by collapsing the borders between them. */
.camera-mode-group[b-0z7uckk10u] {
    display: inline-flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: hidden;
}

/* ::deep — MudButton is a child component, so its rendered <button> never
   carries this component's scope attribute. */
[b-0z7uckk10u] .camera-mode-button {
    border-radius: 0;
    margin: 0;
    /* Collapse the shared border so the three read as one control. */
    margin-inline-start: -1px;
    min-width: 0;
    white-space: nowrap;
}

[b-0z7uckk10u] .camera-mode-group > *:first-child .camera-mode-button,
[b-0z7uckk10u] .camera-mode-button:first-child {
    margin-inline-start: 0;
    border-start-start-radius: 4px;
    border-end-start-radius: 4px;
}

[b-0z7uckk10u] .camera-mode-button:last-child {
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
}

/* The active segment sits above its neighbours so its filled edge is not
   clipped by the next button's outline. */
[b-0z7uckk10u] .camera-mode-button.active {
    position: relative;
    z-index: 1;
    font-weight: 700;
}

.map-area[b-0z7uckk10u] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* position: relative is load-bearing — the JS helper appends the absolutely
   positioned HUD overlay INSIDE this element, so this is what the HUD's
   inset: 0 resolves against. Without it the HUD would size to the page. */
.map-container[b-0z7uckk10u] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    /* No fixed floor: a 300 px minimum overflowed the globe out of its own
       area on a landscape phone, clipping the glasses frame and the controls. */
    min-height: 0;
    height: 100%;
    /* The globe takes keyboard focus so the flight controls work; the default
       focus ring around the whole 3D view is noise, and the HUD already makes
       it obvious the simulator is live. */
    outline: none;
}

/* ----------------------------------------------------------------- */
/*                  COMPACT TOOLBAR (narrow / touch)                  */
/* ----------------------------------------------------------------- */

/* The keyboard hint means nothing on a touch screen. */
@media (pointer: coarse) {
    [b-0z7uckk10u] .map-toolbar-keys-hint {
        display: none;
    }
}

/* A narrow globe panel: the toolbar wrapped to three rows, which on a
   landscape phone left the globe 179 px of a 290 px panel. Drop the hint and
   the dividers and make the labelled buttons icon-only, so it keeps to one
   row. The label stays in the DOM (font-size 0, not display: none), so the
   buttons keep their accessible names. */
@container walksim-center (max-width: 720px) {
    [b-0z7uckk10u] .map-toolbar-keys-hint,
    [b-0z7uckk10u] .map-toolbar-divider {
        display: none;
    }

    [b-0z7uckk10u] .map-toolbar-labelled {
        min-width: 0;
        padding-inline: 8px;
    }

    [b-0z7uckk10u] .map-toolbar-labelled .mud-button-label {
        font-size: 0;
    }

    [b-0z7uckk10u] .map-toolbar-labelled .mud-button-icon-start {
        margin: 0;
    }
}

/* Narrower still (a portrait phone): zoom and home give way too — the globe
   pinch-zooms on a touch screen. */
@container walksim-center (max-width: 400px) {
    [b-0z7uckk10u] .map-toolbar-zoom {
        display: none;
    }
}

/* Cesium credit container is noisy; keep it small and out of the way */
.map-container[b-0z7uckk10u]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                  INSTRUMENTS PANEL (host)                          */
/* ----------------------------------------------------------------- */

.dstool-side-panel[b-0z7uckk10u] {
    flex: 1 1 0;
    min-width: 280px; /* equal third alongside the editor and globe panels */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* The host between the panel and the instruments MUST be a bounded flex
   child. Without a rule of its own it sized to its content, and Plotly's
   responsive resize then grew the chart to fit the host that grew to fit the
   chart — an 11,800 px plot clipped by the panel, showing only its legend. */
.dstool-instruments-host[b-0z7uckk10u] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.dstool-chat-panel[b-0z7uckk10u] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate.
   !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.dstool-chat-panel.collapsed[b-0z7uckk10u] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .dstool-chat-panel.collapsed[b-0z7uckk10u] {
    border-right-width: 0;
}

[dir="rtl"] .dstool-chat-panel[b-0z7uckk10u] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ----------------------------------------------------------------- */
/*        RIGHT PANEL collapsed to a rail (its header button)         */
/* ----------------------------------------------------------------- */

/* The tabs stay MOUNTED (hidden), so the social lists and the journal chart
   keep their state; only the header's expand button shows on the rail. */
.dstool-side-panel[b-0z7uckk10u] {
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
}

.dstool-side-panel.collapsed[b-0z7uckk10u] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px !important;
    max-width: 48px;
}

.dstool-side-panel.collapsed > :not(.panel-header)[b-0z7uckk10u] {
    display: none !important;
}

.dstool-side-panel.collapsed .panel-title[b-0z7uckk10u],
.dstool-left-panel.collapsed .panel-title[b-0z7uckk10u] {
    display: none;
}

.dstool-side-panel.collapsed .panel-header[b-0z7uckk10u],
.dstool-left-panel.collapsed .panel-header[b-0z7uckk10u] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
/* _content/AspireChatApp.Razor/Components/Tools/WeatherAnalysisTool/Charts/WeatherProfileChartComp.razor.rz.scp.css */
/* ================================================================= */
/*              WeatherProfileChartComp.razor.css                    */
/*   Weather profile chart: interactive Plotly plot (drag to pan,     */
/*   wheel to zoom) + a control row underneath. The rules are         */
/*   duplicated from ViewshedTopViewChartComp.razor.css because       */
/*   Blazor CSS isolation scopes each component's stylesheet to its   */
/*   own generated attribute. Axis titles live in the Plotly layout   */
/*   (its SVG text applies bidi, so Hebrew needs no HTML workaround).  */
/* ================================================================= */

.chart-host[b-lmshi8z9km] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* View selector row above the plot */
.weather-chart-view-row[b-lmshi8z9km] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 4px;
    flex: 0 0 auto;
}

.weather-chart-view-label[b-lmshi8z9km] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}

.weather-chart-view-select[b-lmshi8z9km] {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
}

.weather-chart-view-select:focus[b-lmshi8z9km] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* The plot always reads left-to-right regardless of UI culture */
.chart-plot-area[b-lmshi8z9km] {
    flex: 1 1 auto;
    min-height: 0;
    direction: ltr;
}

.chart-toolbar[b-lmshi8z9km] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 2px 2px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.chart-toolbar-btn[b-lmshi8z9km] {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 30px;
    cursor: pointer;
    line-height: 1.6;
}

.chart-toolbar-btn:hover[b-lmshi8z9km] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.chart-toolbar-btn:active[b-lmshi8z9km] {
    background-color: var(--mud-palette-action-default-hover);
}
/* _content/AspireChatApp.Razor/Components/Tools/WeatherAnalysisTool/Editors/WeatherEditorComp.razor.rz.scp.css */
/* ================================================================= */
/*                WeatherEditorComp.razor.css                        */
/*   Compact WPF-Weather-tab-style rows: label | small editor, so    */
/*   the whole editor fits the panel without scrolling.              */
/*   The .los-* row/group/input rules are DUPLICATED from            */
/*   LosVisibilityEditorComp.razor.css on purpose: Blazor CSS        */
/*   isolation scopes each stylesheet to its own generated           */
/*   attribute, so identical class names in another component's      */
/*   stylesheet do NOT apply here.                                   */
/* ================================================================= */

.los-editor-scroll[b-blbb8bxxo8] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.los-group[b-blbb8bxxo8] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.los-group-title[b-blbb8bxxo8] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

.los-row[b-blbb8bxxo8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.los-row-label[b-blbb8bxxo8] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The first label of a row stretches so the editor aligns at the end */
.los-row > .los-row-label:first-child[b-blbb8bxxo8] {
    flex: 1 1 auto;
}

.los-input[b-blbb8bxxo8] {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
    direction: ltr;
}

.los-input:focus[b-blbb8bxxo8] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.los-input-narrow[b-blbb8bxxo8] {
    flex: 0 0 auto;
    width: 64px;
}

.los-readout-value[b-blbb8bxxo8] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* The "ok"/highlight readout — the point value, coverage figure, etc. */
.los-expander-summary-ok[b-blbb8bxxo8] {
    color: var(--mud-palette-success);
}

.los-hint[b-blbb8bxxo8] {
    margin: 4px 8px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

/* ----------------------------------------------------------------- */
/*              WEATHER-SPECIFIC CONTROLS                              */
/* ----------------------------------------------------------------- */

/* A row of buttons (Load/Export, Prev/Play/Next/Loop) */
.los-button-row[b-blbb8bxxo8] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 3px 0;
}

/* Inline checkbox + label (loop, show-point, show-wind) */
.chart-toolbar-check[b-blbb8bxxo8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    white-space: nowrap;
}

/* When a checkbox+label doubles as a group title, keep the title weight */
.chart-toolbar-check.los-group-title[b-blbb8bxxo8] {
    color: var(--mud-palette-primary);
}

/* Load progress bar shown between the Load/Export buttons and the transport row */
.weather-load-progress[b-blbb8bxxo8] {
    margin: 4px 0 6px;
}

.weather-load-progress-label[b-blbb8bxxo8] {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* Transport bar: rewind / prev / stop / play / next / fast-forward + Loop, on one row */
.weather-transport-row[b-blbb8bxxo8] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 4px 0;
}

/* Rewind/Prev/Stop/Play/Next/FastForward transport buttons */
.weather-anim-btn[b-blbb8bxxo8] {
    min-width: 34px;
    height: 26px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.weather-anim-btn:hover:not(:disabled)[b-blbb8bxxo8] {
    border-color: var(--mud-palette-primary);
}

/* Play is the primary transport action — filled + labeled so it can never be
   confused with the single-step "Next" triangle next to it. */
.weather-anim-btn-play[b-blbb8bxxo8] {
    min-width: 60px;
    padding: 0 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
    font-weight: 600;
}

.weather-anim-btn-play:hover:not(:disabled)[b-blbb8bxxo8] {
    background: var(--mud-palette-primary-darken);
}

.weather-anim-btn:disabled[b-blbb8bxxo8] {
    opacity: 0.4;
    cursor: default;
}
/* _content/AspireChatApp.Razor/Components/Tools/WeatherAnalysisTool/WeatherAnalysisToolComp.razor.rz.scp.css */
/* ================================================================= */
/*                WeatherAnalysisToolComp.razor.css                  */
/*   Layout styles for the weather-analysis tool (RTL aware):        */
/*   left editor tabs | Cesium globe (raster + title + colorbar) |   */
/*   profile chart panel.                                            */
/*   The .lostool-* rules mirror AltitudeViewshedToolComp.razor.css  */
/*   — repeated rather than shared because Blazor CSS isolation      */
/*   scopes each component's stylesheet to its own generated         */
/*   attribute, so the class names are identical but the scope is    */
/*   not.                                                            */
/* ================================================================= */

/* ----------------------------------------------------------------- */
/*                      MAIN CONTAINER                                */
/* ----------------------------------------------------------------- */

.lostool-container[b-4t03ihex0i] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--mud-palette-background);
}

/* RTL Support - editor on the right, chart on the left.
   The dir="rtl" attribute alone reverses the flex row (a flex row lays its
   items along the writing direction), so the visual order becomes
   editor | map | chart -> chart | map | editor. Do NOT add
   flex-direction: row-reverse here: on an rtl container that reverses a
   SECOND time and cancels out, leaving the LTR layout. */
.lostool-container[dir="rtl"][b-4t03ihex0i] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      LEFT PANEL                                    */
/* ----------------------------------------------------------------- */

/* The editor / map / results panels open at 25% / 50% / 25% (flex: 1 / 2 / 1, so the
   free space is split with the map getting half). A splitter drag writes inline width/min/max, which
   overrides the flex basis and pins that panel — the others keep sharing the remainder. */
.lostool-left-panel[b-4t03ihex0i] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    overflow: hidden;
}

[dir="rtl"] .lostool-left-panel[b-4t03ihex0i] {
    border-right: none;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.lostool-left-panel.collapsed[b-4t03ihex0i] {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

[b-4t03ihex0i] .lostool-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-4t03ihex0i] .lostool-tabs .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

[b-4t03ihex0i] .lostool-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* CHAT tab host — lets the embedded per-tool ChatBotComp fill the panel */
.lostool-chat-host[b-4t03ihex0i] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*                      PANEL HEADER                                  */
/* ----------------------------------------------------------------- */

.panel-header[b-4t03ihex0i] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 8px;
}

.panel-title[b-4t03ihex0i] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* ----------------------------------------------------------------- */
/*                      SPLITTERS                                     */
/* ----------------------------------------------------------------- */

.panel-splitter[b-4t03ihex0i] {
    width: 5px;
    min-width: 5px;
    cursor: col-resize;
    background: var(--mud-palette-lines-default);
    touch-action: none;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
    align-self: stretch;
}

.panel-splitter:hover[b-4t03ihex0i],
.panel-splitter:active[b-4t03ihex0i] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-4t03ihex0i] {
    display: none;
}

/* ----------------------------------------------------------------- */
/*                      CENTER PANEL (Globe)                          */
/* ----------------------------------------------------------------- */

.lostool-center-panel[b-4t03ihex0i] {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.map-toolbar[b-4t03ihex0i] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 4px;
    z-index: 10;
}

.map-area[b-4t03ihex0i] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.map-container[b-4t03ihex0i] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    height: 100%;
}

.map-container[b-4t03ihex0i]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                PROFILE CHART PANEL (host)                          */
/* ----------------------------------------------------------------- */

.lostool-side-panel[b-4t03ihex0i] {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}

/* ----------------------------------------------------------------- */
/*   RIGHT-MOST PANEL (this tool's dedicated ChatBot instance).       */
/*   Toggled from the app-bar chat button (ToolChatPanelService).     */
/* ----------------------------------------------------------------- */

.lostool-chat-panel[b-4t03ihex0i] {
    width: 380px;
    min-width: 300px;
    max-width: 520px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    /* Animated open/close from the app-bar chat button. The element stays mounted and is
       collapsed to zero width, so both directions transition. */
    transition: width 0.8s cubic-bezier(0.32, 0, 0.2, 1), min-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), max-width 0.8s cubic-bezier(0.32, 0, 0.2, 1), opacity 0.5s ease;
}

/* Collapsed (chat closed): zero out ALL THREE width properties — min-width alone would
   otherwise hold the panel open at 300px and nothing would appear to animate. */
/* !important: after a splitter drag the panel carries INLINE width/min/max styles, which
   would otherwise outrank this class and leave the chat stuck open. */
.lostool-chat-panel.collapsed[b-4t03ihex0i] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0;
    border-left-width: 0;
    pointer-events: none;
}

[dir="rtl"] .lostool-chat-panel.collapsed[b-4t03ihex0i] {
    border-right-width: 0;
}

[dir="rtl"] .lostool-chat-panel[b-4t03ihex0i] {
    border-left: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ================================================================= */
/*   GLOBE OVERLAYS: title banner (top-center) + colorbar (left),     */
/*   mirroring the WPF Cesium weather overlays.                        */
/* ================================================================= */

.weather-title-banner[b-4t03ihex0i] {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    background: rgba(20, 22, 30, 0.55);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.weather-colorbar[b-4t03ihex0i] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(20, 22, 30, 0.5);
    border-radius: 6px;
    pointer-events: none;
    z-index: 15;
}

[dir="rtl"] .weather-colorbar[b-4t03ihex0i] {
    left: auto;
    right: 12px;
}

.weather-colorbar-caption[b-4t03ihex0i] {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.72rem;
    text-align: center;
    max-width: 90px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.weather-colorbar-body[b-4t03ihex0i] {
    display: flex;
    flex-direction: row;
    gap: 5px;
    height: 200px;
}

.weather-colorbar-gradient[b-4t03ihex0i] {
    width: 16px;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
}

.weather-colorbar-ticks[b-4t03ihex0i] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    direction: ltr;
}