/* _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/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 */
    }

    /* MapLibre container must take full space */
    #maplibreContainer[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],
    .map-crosshair-cursor .maplibregl-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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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/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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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/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/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/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/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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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/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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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/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;
}

/* ----------------------------------------------------------------- */
/*                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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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/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;
}

.climate-chart-desc[b-i9srht318u] {
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    padding: 0 8px 6px 8px;
    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;
}

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

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

/* ----------------------------------------------------------------- */
/*                      TREND PLOT                                    */
/* ----------------------------------------------------------------- */

.climate-plot-area[b-i9srht318u] {
    flex: 1 1 auto;
    min-height: 260px;
    width: 100%;
    position: relative;
}

/* ----------------------------------------------------------------- */
/*                      TABLES (scroll)                              */
/* ----------------------------------------------------------------- */

.climate-scroll[b-i9srht318u] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    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). */
.climate-tables-row[b-i9srht318u] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.climate-table-box[b-i9srht318u] {
    flex: 1 1 260px;
    min-width: 240px;
}

.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;
}

/* 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;
}

/* ----------------------------------------------------------------- */
/*                      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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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;
}
/* _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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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 .3s ease, opacity .3s 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/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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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;
}

/* ----------------------------------------------------------------- */
/*   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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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/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/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/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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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/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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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/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.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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/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.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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.3s ease, min-width 0.3s ease, max-width 0.3s ease;
    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/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.3s ease, min-width 0.3s ease, max-width 0.3s ease, opacity 0.2s 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;
}