@import '_content/AspireChatApp.Razor/AspireChatApp.Razor.76at15quh3.bundle.scp.css';
@import '_content/AuralizeBlazor/AuralizeBlazor.tf5u2o3oxg.bundle.scp.css';
@import '_content/Community.Blazor.MapLibre/Community.Blazor.MapLibre.vicrawpt6h.bundle.scp.css';
@import '_content/Nextended.Blazor/Nextended.Blazor.tkxqvq0zjw.bundle.scp.css';

/* _content/AspireChatApp.Web/Components/ApiSimulator/ApiSimulatorComp.razor.rz.scp.css */
/* ================================================================= */
/*                   ApiSimulatorComp.razor.css                       */
/*   Four side-by-side panels (RTL aware):                            */
/*     REQUEST | MAP | RESPONSE | ABOUT                               */
/*   Compact editor rows mirror LosVisibilityEditorComp so the whole  */
/*   request form fits the panel. The Desktop/Laptop/Tablet/Phone     */
/*   windowing lives globally in main.css (data-gv-panel), so this    */
/*   sheet only styles the desktop columns + compact rows.            */
/* ================================================================= */

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

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

/* On an rtl container the flex row already lays items right-to-left, which
   flips REQUEST|MAP|RESPONSE|ABOUT to ABOUT|RESPONSE|MAP|REQUEST. Do NOT add
   row-reverse — on rtl that would reverse a SECOND time and cancel out. */
.apisim-container[dir="rtl"][b-bho99219b1] {
    flex-direction: row;
}

/* ----------------------------------------------------------------- */
/*                      SHARED PANEL SHELL                            */
/* ----------------------------------------------------------------- */

.apisim-panel[b-bho99219b1] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 240px;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.apisim-panel-header[b-bho99219b1] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    gap: 6px;
    flex: 0 0 auto;
}

.apisim-panel-title[b-bho99219b1] {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------------- */
/*                 PANEL 0 : REQUEST (left)                           */
/* ----------------------------------------------------------------- */

.apisim-request-panel[b-bho99219b1] {
    flex: 1 1 0;
    width: 300px;
    border-right: 1px solid var(--mud-palette-lines-default);
}

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

.apisim-request-panel.collapsed[b-bho99219b1] {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
}

.apisim-scroll[b-bho99219b1] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
}

/* WPF GroupBox look: primary border + title (matches LosVisibilityEditor) */
.apisim-group[b-bho99219b1] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    margin: 4px 6px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.apisim-group-title[b-bho99219b1] {
    color: var(--mud-palette-primary);
    font-weight: 600;
    font-size: 0.75rem;
    margin-bottom: 2px;
}

/* One compact row: label stretches, editor/readout at the end */
.apisim-row[b-bho99219b1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    font-size: 0.78rem;
    min-height: 26px;
}

.apisim-row-label[b-bho99219b1] {
    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 */
.apisim-input[b-bho99219b1] {
    width: 148px;
    max-width: 148px;
    height: 24px;
    box-sizing: border-box;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.78rem;
}

/* Numbers always read left-to-right even under RTL */
.apisim-input-num[b-bho99219b1] {
    direction: ltr;
    text-align: start;
}

.apisim-input:focus[b-bho99219b1] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

select.apisim-input[b-bho99219b1] {
    cursor: pointer;
}

.apisim-checkbox[b-bho99219b1] {
    width: 18px;
    height: 18px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* Selected-endpoint metadata (method chip + route + description) */
.apisim-endpoint-meta[b-bho99219b1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

[b-bho99219b1] .apisim-method-chip {
    min-width: 44px;
    text-align: center;
    font-size: 10px;
    height: 18px;
    margin: 0;
}

.apisim-route[b-bho99219b1] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.7rem;
    color: var(--mud-palette-primary);
    direction: ltr;
    word-break: break-all;
}

.apisim-desc[b-bho99219b1] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

.apisim-actions[b-bho99219b1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px;
}

.apisim-status-row[b-bho99219b1] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 6px 6px 6px;
}

/* ----------------------------------------------------------------- */
/*                 PANEL 1 : MAP (center)                             */
/* ----------------------------------------------------------------- */

.apisim-map-panel[b-bho99219b1] {
    flex: 2 1 0;
    min-width: 260px;
}

.apisim-map-container[b-bho99219b1] {
    flex: 1 1 auto;
    position: relative;
    width: 100%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* Keep Cesium's credit line out of the way of the response splitter */
.apisim-map-container[b-bho99219b1]  .cesium-viewer-bottom {
    z-index: 5;
}

/* ----------------------------------------------------------------- */
/*                 PANEL 2 : RESPONSE                                 */
/* ----------------------------------------------------------------- */

.apisim-response-panel[b-bho99219b1] {
    flex: 1 1 0;
    width: 320px;
    border-left: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default);
}

.apisim-response-json[b-bho99219b1] {
    flex: 1 1 auto;
    margin: 0;
    padding: 8px;
    overflow: auto;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    /* JSON always reads left-to-right */
    direction: ltr;
    text-align: start;
}

/* ----------------------------------------------------------------- */
/*                 PANEL 3 : ABOUT                                    */
/* ----------------------------------------------------------------- */

.apisim-about-panel[b-bho99219b1] {
    flex: 1 1 0;
    width: 300px;
}

.apisim-about-body[b-bho99219b1] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

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

.panel-splitter[b-bho99219b1] {
    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-bho99219b1],
.panel-splitter:active[b-bho99219b1] {
    background: var(--mud-palette-primary);
}

.panel-splitter.collapsed[b-bho99219b1] {
    display: none;
}
/* _content/AspireChatApp.Web/Components/Layout/NavMenu.razor.rz.scp.css */
/* Keep tool / category names on a single line inside the (now wider) nav drawer.
   MudBlazor renders the label as .mud-nav-link-text; by default it wraps to a
   second line in a narrow drawer. */
[b-0fw2yri5bm] .mud-nav-link-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The "Menu" caption + expand-all / collapse-all toolbar sitting above the search box.
   The caption takes the slack (flex:1 on .nav-tree-title) and pushes both buttons to
   the end edge; that follows the writing direction, so it flips under [dir="rtl"]
   automatically. NOT space-between: with three children that would strand one button
   in the middle of the row. */
.nav-tree-toolbar[b-0fw2yri5bm] {
    display: flex;
    align-items: center;
    gap: 2px;
    /* Slightly more room on the end edge: the last button otherwise sits hard
       against the panel border once the row flips to RTL. */
    padding: 4px 12px 4px 8px;
}

[dir="rtl"] .nav-tree-toolbar[b-0fw2yri5bm] {
    padding: 4px 8px 4px 12px;
}

/* The purple "Menu" / "תפריט" caption. Uses --nav-purple (set on
   .nav-purple-scope) — deliberately a different token from the orange
   --nav-search-hit, so the caption stays purple while hits stand out. */
.nav-tree-title[b-0fw2yri5bm] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nav-purple);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The two labelled expand/collapse buttons. MudButton's defaults are sized for a
   form — 36px tall, 16px side padding and UPPERCASE — which is far too heavy for a
   caption row above 24px nav rows. Trimmed to sit at the scale of the menu.
   ::deep because the button renders inside MudButton's own component scope. */
[b-0fw2yri5bm] .nav-tree-toolbar-button {
    flex: 0 0 auto;
    min-width: 0;
    height: 24px;
    /* Logical padding, so it stays correct in RTL (a plain "0 4px 0 6px" would put
       the wider side on the wrong edge once the row flips). */
    padding-block: 0;
    padding-inline: 5px;
    font-size: 0.72rem;
    font-weight: 500;
    /* MudBlazor upper-cases button labels; "הרחב" is unaffected but "Expand"
       would shout next to the sentence-case caption. */
    text-transform: none;
    letter-spacing: 0;
}

/* Shrink the leading glyph and tighten its gap to the label — the default 20px
   icon plus 8px margin is wider than the word next to it. */
[b-0fw2yri5bm] .nav-tree-toolbar-button .mud-button-icon-start {
    margin-inline-end: 3px;
    margin-inline-start: 0;
}

[b-0fw2yri5bm] .nav-tree-toolbar-button .mud-button-icon-start .mud-icon-root {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

/* ---------------------------------------------------------------
   Name search over the menu (tools and pages). Mirrors the
   .server-search-bar / .server-search-input of MapExplorerTool.
   --------------------------------------------------------------- */

.nav-search-bar[b-0fw2yri5bm] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px 6px 8px;
}

/* The magnifier is decorative under live search — dim it so it reads as an
   affordance rather than a control the user is expected to press. */
.nav-search-bar[b-0fw2yri5bm]  .nav-search-icon {
    color: var(--mud-palette-text-disabled);
    flex: 0 0 auto;
}

/* Same metrics as MapExplorer's .server-search-input, so the box sits at the
   scale of the nav rows instead of towering over them like a form field. */
.nav-search-input[b-0fw2yri5bm] {
    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;
}

.nav-search-input:focus[b-0fw2yri5bm] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.nav-search-input[b-0fw2yri5bm]::placeholder {
    color: var(--mud-palette-text-disabled);
}

.nav-search-status[b-0fw2yri5bm] {
    padding: 0 12px 4px 12px;
    opacity: 0.85;
}

/* Purple for the "Menu" caption. Set explicitly rather than taken from
   --mud-palette-primary: that token is purple only in the dark theme (the light
   theme leaves MudBlazor's default blue). The dark value is lifted from the dark
   palette's own Primary so the caption sits in the theme. */
.nav-purple-scope[b-0fw2yri5bm] {
    --nav-purple: #6b3fd4;
}

@media (prefers-color-scheme: dark) {
    .nav-purple-scope[b-0fw2yri5bm] {
        --nav-purple: #7e6fff;
    }
}

/* MudBlazor stamps the chosen theme on the root, which must win over the OS
   preference in both directions when the user flips the in-app toggle. */
:root.mud-theme-dark .nav-purple-scope[b-0fw2yri5bm] {
    --nav-purple: #7e6fff;
}

:root.mud-theme-light .nav-purple-scope[b-0fw2yri5bm] {
    --nav-purple: #6b3fd4;
}

/* The search-hit highlight is NOT here: scoped CSS cannot reach MudNavMenu's
   generated rows at all (the marker class lands on a wrapper MudBlazor never
   stamps this component's scope id on, so every scoped rule was dead). It lives
   in wwwroot/css/main.css under "NAV-MENU SEARCH HIT", which documents why. */
/* _content/AspireChatApp.Web/Components/Pages/AboutPage.razor.rz.scp.css */
/* ============================================================
   About page — GeoSmart-IL company + GeoView platform.

   FOUR Display-Mode panels (Company / Platform / Capabilities / Contact), laid out as a
   non-wrapping flex row. Nothing here implements the show/hide: main.css does that
   generically from the data-gv-panel / data-gv-panels attributes, and also gives every
   visible panel its own touch scrolling. This file only has to lay the panels out side
   by side and let each one scroll independently.

   Deliberately NO viewport-width media queries for the panel row. How many panels are on
   screen is the app-bar Display-Mode selector's decision (Desktop 4 / Laptop 3 / Tablet 2 /
   Phone 1); a width rule here would fight the selector rather than follow it — the same
   rule the pricing page documents at the foot of its stylesheet.

   Culture-aware: all copy comes from IStringLocalizer, and RTL is inherited from
   <html dir="rtl"> when the he-IL culture is active. Layout uses logical properties /
   text-align:start so it flips correctly between LTR and RTL with no overrides.
   ============================================================ */

.about-page[b-97usxaahzi] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.5rem;
    /* Fill the main content area exactly; the PANELS scroll, not the page. Without this the
       page grew past the fold inside MudMainContent (which main.css pins to the viewport
       with overflow:hidden), and everything below it was simply unreachable — which is the
       bug this layout replaces. */
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-align: start;
}

/* Equal share of the row. min-width:0 is required — without it a long unbroken value (the
   deployment image tag) sets the flex base size and the panels stop being equal. */
.about-panel[b-97usxaahzi] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ::deep is REQUIRED here, not styling taste. This element is MudPaper's root, and Blazor
   stamps the scoped-CSS attribute (b-xxxxx) only on elements this component renders itself —
   never on a child component's root. Without ::deep the emitted selector becomes
   ".about-panel-inner.mud-paper[b-xxxxx]", which matches nothing, the element keeps MudPaper's
   display:block, and the panel collapses to its content height instead of filling the column
   (so the body below never becomes the scrolling element).
   .mud-paper is repeated to out-specify MudPaper's own class. */
.about-panel[b-97usxaahzi]  .about-panel-inner.mud-paper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
}

/* The one element that actually scrolls inside a panel. */
.about-panel-body[b-97usxaahzi] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    box-sizing: border-box;
}

/* ---------------- Current deployment ----------------
   A quiet strip at the top of the first panel: it must be findable but must not compete with
   the hero below it. Facts sit in a wrapping flex row rather than a fixed grid, so two or
   three of them read correctly at any width. */
.about-panel[b-97usxaahzi]  .about-deployment {
    border-radius: 12px;
    border-inline-start: 4px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-background-grey);
}

.about-deployment-head[b-97usxaahzi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.about-deployment-title[b-97usxaahzi] {
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

/* Muted via the palette variable, NOT MudBlazor's Color.Secondary — that is the theme's accent
   (pink here), which read as an error state on a status panel. */
.about-deployment-label[b-97usxaahzi] {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* Push the slot chip to the far end, whichever end that is under RTL. */
.about-panel[b-97usxaahzi]  .about-deployment-chip {
    margin-inline-start: auto;
}

.about-deployment-facts[b-97usxaahzi] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.about-deployment-fact[b-97usxaahzi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The version can be a long image tag; tabular digits keep it legible and overflow-wrap stops
   it forcing the panel wider than the column. */
.about-deployment-value[b-97usxaahzi] {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ---------------- Hero ---------------- */
.about-panel[b-97usxaahzi]  .about-hero {
    border-radius: 16px;
    background: linear-gradient(135deg,
        var(--mud-palette-primary) 0%,
        var(--mud-palette-secondary) 100%);
    color: #fff;
}

.about-panel[b-97usxaahzi]  .about-hero-eyebrow {
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.12em;
}

/* The hero title is a business name that must not be hyphenated mid-word when the panel is one
   phone-width column — "GeoSmart-IL" broke across two lines as "GeoSmart-" / "IL" at the old
   Typo.h2 size. A smaller heading plus break-word (not anywhere) keeps it whole. */
.about-panel[b-97usxaahzi]  .about-hero-title {
    color: #fff;
    font-weight: 700;
    margin-bottom: 4px;
    overflow-wrap: break-word;
    hyphens: none;
}

.about-panel[b-97usxaahzi]  .about-hero-subtitle {
    color: rgba(255, 255, 255, 0.92);
}

/* Keep the hero's filled button readable on the gradient. */
.about-panel[b-97usxaahzi]  .about-hero .mud-button-filled {
    background-color: #fff;
    color: var(--mud-palette-primary);
}

.about-panel[b-97usxaahzi]  .about-hero .mud-button-filled:hover {
    background-color: rgba(255, 255, 255, 0.88);
}

/* ---------------- Body copy ----------------
   No max-width in ch: a panel column already provides the measure, and a ch cap would leave a
   wide desktop panel with a ragged empty half. */
.about-panel[b-97usxaahzi]  .about-body {
    line-height: 1.7;
}

/* ---------------- Platform pillars (panel 1) ----------------
   A compact restatement of the four capabilities, so the Platform panel stands on its own when
   it is the only one on screen. */
.about-pillars[b-97usxaahzi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.about-pillar[b-97usxaahzi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background-color: var(--mud-palette-background-grey);
}

.about-pillar-name[b-97usxaahzi] {
    font-weight: 600;
    font-size: 0.9rem;
}

/* ---------------- Feature cards (panel 2) ----------------
   A stacked column, not a grid: a panel is one column wide by definition, and the panel body
   scrolls. This is what replaced the old 4-across grid plus its two width breakpoints. */
.about-features[b-97usxaahzi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-panel[b-97usxaahzi]  .about-feature {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
}

/* ---------------- Contact (panel 3) ---------------- */
.about-panel[b-97usxaahzi]  .about-contact {
    border-radius: 12px;
    border-inline-start: 4px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-background-grey);
}

.about-links[b-97usxaahzi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.about-panel[b-97usxaahzi]  .about-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* The address is Latin text inside an RTL page; isolate keeps "www.geosmarthub.com" from
       being reordered around the label's colon. */
    unicode-bidi: isolate;
}

.about-panel[b-97usxaahzi]  .about-link-icon {
    flex: 0 0 auto;
}

.about-panel[b-97usxaahzi]  .about-footer {
    margin-top: 16px;
}
/* _content/AspireChatApp.Web/Components/Pages/DiagnosticsPage.razor.rz.scp.css */
/* Diagnostics page — system health dashboard, four tabbed panels.
   Scoped styles (::deep only where MudBlazor owns the element).

   NOTE: nothing here implements the Display-Mode show/hide. main.css does that generically from
   the data-gv-panel / data-gv-panels attributes, so this file only has to lay the panels out
   side by side and let each one scroll on its own. */

.diagnostics-page[b-3xmgwwz2sl] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.5rem;
    /* Fill the main content area exactly; the PANELS scroll, not the page, so the tab strips
       stay put while a long detail list is scrolled. */
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* Equal share of the row. min-width:0 is required — without it a long unbroken value (an
   endpoint URL) sets the flex base size and the panels stop being equal. */
.diagnostics-panel[b-3xmgwwz2sl] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ::deep is REQUIRED here, not optional styling taste. This element is MudPaper's root, and
   Blazor stamps the scoped-CSS attribute (b-xxxxx) only on elements this component renders
   itself — never on a child component's root. Without ::deep the emitted selector becomes
   ".diagnostics-panel-inner.mud-paper[b-xxxxx]", which matches nothing, the element keeps
   MudPaper's display:block, and the panel collapses to its content height instead of filling
   the column (so the tab body never becomes the scrolling element).
   .mud-paper is also repeated to out-specify MudPaper's own class. */
.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-panel-inner.mud-paper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-header {
    border-bottom: 1px solid var(--mud-palette-divider);
    flex: 0 0 auto;
}

/* The tab container fills the panel and hands scrolling to the active tab body.
   ::deep for the same reason as above — this is MudTabs' root element, which carries no
   scoped-CSS attribute. */
.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-tabs.mud-tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.diagnostics-panel[b-3xmgwwz2sl]  .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-tab-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* The one element that actually scrolls. Rendered inside MudTabPanel's content, so it too sits
   below a child component and needs ::deep. */
.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-tab-body {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem;
    box-sizing: border-box;
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-placeholder {
    display: flex;
    align-items: center;
    padding: 1rem;
}

/* ---------------- Summary rows (Overview tab) ---------------- */
.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-summary-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-summary-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    /* These are English component names inside an RTL page; isolate keeps them intact. */
    unicode-bidi: isolate;
}

/* ---------------- Detail rows ----------------
   Two columns: a label and a value that takes the rest. The value can be long (an endpoint URL,
   a fix instruction), so it wraps and breaks rather than forcing sideways scrolling. */
.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-details {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-detail-row {
    display: grid;
    grid-template-columns: minmax(6rem, 38%) 1fr;
    gap: 0.5rem;
    align-items: start;
    font-size: 0.8rem;
    line-height: 1.4;
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-detail-label {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-detail-value {
    /* Values are identifiers, versions, URLs and timestamps — a monospace face makes two
       versions differing by one character actually comparable at a glance. */
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
    word-break: break-word;
    overflow-wrap: anywhere;

    /* Force LTR. These values are machine data — versions, URLs, "4665 MB", "0.0 s" — and under
       the Hebrew RTL page direction the bidi algorithm reorders a trailing unit to the front,
       rendering "4665 MB" as "MB 4665". direction+isolate pins each value to LTR without
       affecting the Hebrew label beside it. */
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* Latency readout — same RTL reordering issue ("11 ms" → "ms 11"). Rendered as plain text
   rather than a chip so it can be isolated without fighting MudBlazor's own chip styles. */
.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-latency-text {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

/* ---------------- Endpoint self-test rows ----------------
   Fixed-width status and method columns so the badges line up into a scannable column; the
   route takes the remaining space and ellipsises (full text is on the row's title tooltip).
   The whole row is LTR — routes, methods and status codes are machine data that the RTL bidi
   algorithm would otherwise reorder. */
.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-endpoint-row {
    display: grid;
    grid-template-columns: 3.2rem 3.4rem 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
    direction: ltr;
    unicode-bidi: isolate;
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-endpoint-status {
    font-weight: 700;
    font-size: 0.68rem;
    text-align: center;
    border-radius: 3px;
    padding: 0.1rem 0.2rem;
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-endpoint-pass {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-endpoint-fail {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent);
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-endpoint-skip {
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-endpoint-method {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
}

/* Ellipsis needs min-width:0 inside a grid track, or the cell refuses to shrink. */
.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-endpoint-route {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-endpoint-meta {
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    white-space: nowrap;
}

/* Keep the tab labels legible when four panels share a narrow desktop width. */
.diagnostics-panel[b-3xmgwwz2sl]  .mud-tab {
    min-width: auto;
    padding: 0 0.6rem;
    font-size: 0.78rem;
    text-transform: none;
}

/* ---------------- Narrow screens ----------------
   In PHONE/TABLET display modes main.css hides the out-of-window panels, so the survivors get
   the full width. Stack the label above the value: the two-column grid squeezes the value to
   unreadable width on a phone. */
@media (max-width: 600px) {
    .diagnostics-panel[b-3xmgwwz2sl]  .diagnostics-detail-row {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .diagnostics-page[b-3xmgwwz2sl] {
        padding: 0.25rem;
        gap: 0.25rem;
    }
}
/* _content/AspireChatApp.Web/Components/Pages/HomePage.razor.rz.scp.css */
/* The Home page is styled by the `.gv-*` landing-page block in
   wwwroot/css/main.css, not here: scoped-CSS edits do not reliably reach the
   browser after a rebuild (stale fingerprinted _content bundle), and the
   landing page is entirely layout-critical.

   Intentionally left with no rules. */
/* _content/AspireChatApp.Web/Components/Pages/PricingPage.razor.rz.scp.css */
/* ============================================================
   Pricing page — the four tier PANELS + tool tree-view.

   Each tier card is a Display-Mode PANEL (data-gv-panel), so how many are on screen is decided by
   the app-bar mode selector + panel tab strip, exactly like a tool:

     desktop → 4 across    laptop → 3    tablet → 2    phone → 1

   The cards live in a NON-wrapping flex row and share the available width via "flex: 1 1 0"; the
   ones outside the visible window are hidden by the generic [data-gv-panel] rules in main.css.
   (An earlier revision drove this by raw viewport width instead, which fought the selector — see
   the note at the foot of this file.)

   The tool list inside a panel is a CSS-only tree-view (<details>/<summary>) — the
   page is static SSR (its <form> POSTs to /Payment/Checkout), so no Blazor circuit
   is needed for expand/collapse.
   ============================================================ */

.pricing-page[b-mbgrhfrjbt] {
    /* Wide enough to hold four comfortable columns; centred with side gutters. */
    max-width: 1600px;
    margin: 24px auto;
    padding: 0 24px;

    /* This page MUST scroll itself. main.css pins ".mud-main-content" to the viewport with
       "overflow: hidden !important" — correct for a map tool, which manages its own internal
       scrolling, but it means a taller-than-viewport document page is simply CUT OFF with no way
       to reach the rest. A tier card runs ~650px+ (price block + the whole tool tree-view + the
       buy button), so on a laptop or a phone the bottom of every card — including the CTA the
       page exists for — was unreachable. Scrolling here rather than relaxing the global rule
       keeps every tool's layout untouched.

       min-height:0 is required for this to work at all: the generic
       ".mud-main-content > div:not(...)" rule gives this element "flex: 1 1 auto", and a flex
       item's default "min-height: auto" refuses to shrink below its content, so the overflow
       would never engage and the box would just grow past the fold again. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- The panel row. A NON-wrapping flex row: how many tier cards are on screen is
       decided by the Display-Mode window (the generic [data-gv-panel] rules in
       main.css hide the rest), not by wrapping. Wrapping here would fight the
       selector — a hidden 4th card must not push a visible one onto a second row. --- */
.pricing-cards[b-mbgrhfrjbt] {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: stretch;
    padding-bottom: 8px;
}

/* --- One tier panel. Wide-desktop default = 4 across: width = (100% - 3*16px)/4.
       flex-grow:1 lets a partial last row stretch to fill the width. --- */
/* NOTE: .pricing-card is a <MudPaper> COMPONENT, so Blazor's scoped-CSS scope
   attribute (b-xxxx) is NOT stamped onto its rendered <div> — a bare
   `.pricing-card { … }` scoped rule would never match it. We therefore reach it
   with `::deep` from the scoped .pricing-cards container (a plain <div> that DOES
   carry the scope attribute). Same reasoning for .pricing-card in the media
   queries below. */
/* Each card is a Display-Mode panel: main.css hides the ones outside the visible
   window, and the survivors SHARE the row evenly. `flex: 1 1 0` (not a 25% basis)
   is what lets one card fill the width in PHONE mode and two split it in TABLET —
   a hard 25% max-width would pin every card to a quarter of the row no matter how
   few are on screen. */
.pricing-cards[b-mbgrhfrjbt]  .pricing-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

/* .pricing-card--current is on the <MudPaper> too — reach it via ::deep (see note
   on .pricing-card above). */
.pricing-cards[b-mbgrhfrjbt]  .pricing-card--current {
    border: 2px solid var(--mud-palette-primary);
}

/* --- The heading / status notices (above) and the footnote (below) are
       constrained to ONE column's width so they sit over the first panel instead
       of stretching across the whole four-panel row (same width as a single card).
       RTL puts the first column on the right, so margin-inline-end:auto keeps the
       block hugging the start (first-column) side in both directions. --- */
/* A readable measure rather than a fraction of the row: the card row no longer has
   a fixed column count (the Display-Mode window decides it), so "one column wide"
   is no longer a stable quantity to track. A ch-based measure keeps the copy
   comfortable at every mode. */
.pricing-intro[b-mbgrhfrjbt],
.pricing-footnote[b-mbgrhfrjbt] {
    max-width: 46ch;
    margin-inline-end: auto;
}

/* Push the buy button to the bottom so CTAs align across panels of differing
   tool-list heights. */
.pricing-card-cta[b-mbgrhfrjbt] {
    margin-top: auto;
}

/* ============================================================
   Billing-period switch (Monthly / Yearly), one per tier card
   ============================================================ */

/* Segmented control: two equal halves of the card's width. grid (not flex) so the
   two segments stay exactly equal even though "Monthly"/"Yearly" — and their
   Hebrew equivalents — are different lengths; with flex the divider would sit at a
   different place on each of the four cards. */
.pricing-cycle[b-mbgrhfrjbt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-top: 10px;
    padding: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background-color: var(--mud-palette-background-grey);
}

/* Both periods are rendered server-side; exactly one is revealed. The DEFAULT — with
   no data-cycle-view attribute at all, i.e. before any JS has run and if JS never
   runs — is Monthly, so the card is correct on first paint and degrades to a plain
   monthly price rather than to a blank or double-priced card. */
.pricing-period--yearly[b-mbgrhfrjbt] {
    display: none;
}

.pricing-card[data-cycle-view="yearly"] .pricing-period--monthly[b-mbgrhfrjbt] {
    display: none;
}

.pricing-card[data-cycle-view="yearly"] .pricing-period--yearly[b-mbgrhfrjbt] {
    display: block;
}

.pricing-cycle-btn[b-mbgrhfrjbt] {
    padding: 5px 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    /* The pill is small and the label changes weight when selected; without this the
       text shifts by a pixel as the customer toggles back and forth. */
    text-align: center;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.pricing-cycle-btn:hover:not(.pricing-cycle-btn--active)[b-mbgrhfrjbt] {
    color: var(--mud-palette-text-primary);
}

.pricing-cycle-btn--active[b-mbgrhfrjbt] {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Keyboard focus must stay visible: this control is the only way to reach the
   yearly price, so it cannot be a mouse-only affordance. */
.pricing-cycle-btn:focus-visible[b-mbgrhfrjbt] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ============================================================
   Yearly price block (under the monthly price)
   ============================================================ */

/* VAT disclosure under the headline monthly price. Prices are quoted before VAT,
   so this block carries the two facts the customer needs: the rate excluded, and
   the resulting total. A foreign (zero-rated) customer sees only the export note. */
.pricing-vat[b-mbgrhfrjbt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin: 2px 0 6px 0;
}

/* Both spans must own their line — as inline elements they would otherwise run
   together into one unreadable "excl. VAT 18% total incl. VAT: ₪116.82" string. */
.pricing-vat-note[b-mbgrhfrjbt],
.pricing-vat .pricing-vat-total[b-mbgrhfrjbt] {
    display: block;
    width: 100%;
}

.pricing-vat-note[b-mbgrhfrjbt] {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* The gross figure is what actually gets charged, so it reads slightly stronger
   than the "excl. VAT" note above it without competing with the headline price. */
.pricing-vat-total[b-mbgrhfrjbt] {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.85;
}

/* Rendered only on the yearly period: the "instead of …" comparison and the saving
   pill. The headline price now lives above this block (it is whichever period the
   switch is on), so this is a stacked footnote rather than a row of figures. */
.pricing-yearly[b-mbgrhfrjbt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 2px 0 8px 0;
}

/* The undiscounted 12-month total, shown as an "(instead of … / year)" note
   under the yearly price so the saving reads as a clear phrase. */
.pricing-yearly-was[b-mbgrhfrjbt] {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* The "save N%" pill hugs its text rather than stretching. The parent is a column
   flex container, so align-items:flex-start already keeps it off full width; the
   max-content width stops a long localized label from overflowing the card.
   Its purple text colour is set inline on the MudChip (see PricingPage.razor) so
   it beats MudBlazor's default chip text colour without ::deep overrides. */
.pricing-yearly-chip[b-mbgrhfrjbt] {
    width: max-content;
    max-width: 100%;
    margin: 0;
}

/* ============================================================
   Tool tree-view
   ============================================================ */

/* Top bar above each panel's tree: the "Includes:" caption on one side,
   the Expand-all / Collapse-all buttons on the other. */
.pricing-tree-topbar[b-mbgrhfrjbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 8px 0 4px 0;
}

.pricing-tree-actions[b-mbgrhfrjbt] {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

/* Round, clearly-bordered icon buttons (unfold symbols). No interactive
   MudButton needed — the page is static SSR; the click is handled by the
   delegated document listener in App.razor. */
.pricing-tree-action-btn[b-mbgrhfrjbt] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;                              /* round */
    border: 1.5px solid var(--mud-palette-primary);  /* clear border */
    background: transparent;
    color: var(--mud-palette-primary);
    cursor: pointer;
    line-height: 0;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

/* Size the MudIcon <svg> inside the button. */
.pricing-tree-action-btn[b-mbgrhfrjbt]  .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.pricing-tree-action-btn:hover[b-mbgrhfrjbt] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.pricing-tree-action-btn:active[b-mbgrhfrjbt] {
    transform: translateY(0.5px);
}

.pricing-tree-action-btn:focus-visible[b-mbgrhfrjbt] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pricing-tree[b-mbgrhfrjbt] {
    flex: 1;
    margin: 0 0 8px 0;
}

/* One category branch. */
.pricing-tree-cat[b-mbgrhfrjbt] {
    border-radius: 6px;
    margin-bottom: 2px;
}

.pricing-tree-cat + .pricing-tree-cat[b-mbgrhfrjbt] {
    border-top: 1px solid var(--mud-palette-divider);
}

/* Category header (the clickable <summary>). */
.pricing-tree-cat-header[b-mbgrhfrjbt] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;                 /* hide the native disclosure triangle … */
    padding: 6px 4px;
    font-weight: 600;
    font-size: 0.9rem;
    user-select: none;
}

/* … including the WebKit default marker. */
.pricing-tree-cat-header[b-mbgrhfrjbt]::-webkit-details-marker {
    display: none;
}

.pricing-tree-cat-header:hover[b-mbgrhfrjbt] {
    background: var(--mud-palette-action-default-hover);
    border-radius: 6px;
}

/* Custom caret that rotates when the <details> is open. */
.pricing-tree-caret[b-mbgrhfrjbt] {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-inline-start: 6px solid currentColor;   /* RTL-aware: points inward */
    opacity: 0.7;
    transition: transform 0.12s ease;
    flex: 0 0 auto;
}

.pricing-tree-cat[open] > .pricing-tree-cat-header .pricing-tree-caret[b-mbgrhfrjbt] {
    transform: rotate(90deg);
}

/* ---- Smooth expand / collapse animation ----------------------------------
   Native <details> toggles content with an instant display:none, which cannot
   be transitioned. Modern engines expose the ::details-content pseudo-element
   plus `interpolate-size: allow-keywords`, which together let the block-size
   animate to/from the `auto` intrinsic height — a true open/close slide with
   NO JavaScript (this page is static SSR, so no Blazor circuit is available).
   Where ::details-content is unsupported, the section still opens/closes
   instantly (graceful degradation) and the keyframe fallback below animates
   the tool rows' entrance. */

/* `interpolate-size` inherits, so declaring it on the page root enables the
   height-to-`auto` animation for every tree below. (Set here, not on :root —
   scoped CSS would rewrite `:root` to `:root[b-xxx]`, which never matches.) */
.pricing-page[b-mbgrhfrjbt] {
    interpolate-size: allow-keywords;
}

.pricing-tree-cat[b-mbgrhfrjbt]::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        block-size 0.22s ease,
        content-visibility 0.22s ease allow-discrete,
        opacity 0.2s ease;
}

.pricing-tree-cat[open][b-mbgrhfrjbt]::details-content {
    block-size: auto;
    opacity: 1;
}

/* Fallback entrance animation for engines without ::details-content: when a
   category is open, fade + slide its tool list in. Harmless where the height
   transition above already runs. */
@keyframes pricing-tree-reveal-b-mbgrhfrjbt {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pricing-tree-cat[open] > .pricing-tree-tools[b-mbgrhfrjbt] {
    animation: pricing-tree-reveal-b-mbgrhfrjbt 0.2s ease;
}

/* Respect users who prefer reduced motion: drop all tree animations. */
@media (prefers-reduced-motion: reduce) {
    .pricing-tree-caret[b-mbgrhfrjbt],
    .pricing-tree-cat[b-mbgrhfrjbt]::details-content {
        transition: none;
    }

    .pricing-tree-cat[open] > .pricing-tree-tools[b-mbgrhfrjbt] {
        animation: none;
    }
}

/* A whole category the tier does not include: grey the header. */
.pricing-tree-cat--excluded > .pricing-tree-cat-header[b-mbgrhfrjbt] {
    opacity: 0.5;
}

/* Tool rows under a category. */
.pricing-tree-tools[b-mbgrhfrjbt] {
    list-style: none;
    margin: 0;
    padding: 0 0 4px 0;
}

.pricing-tree-tool[b-mbgrhfrjbt] {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Indent the tools under the caret. Logical padding so RTL indents on the
       correct side automatically. */
    padding: 3px 4px 3px 22px;
    font-size: 0.875rem;
}

.pricing-tree-tool-name[b-mbgrhfrjbt] {
    line-height: 1.3;
}

/* A tool the tier does not include: grey + strike-through, matching the
   original aligned-rows look. */
.pricing-tree-tool--excluded[b-mbgrhfrjbt] {
    opacity: 0.38;
}

.pricing-tree-tool--excluded .pricing-tree-tool-name[b-mbgrhfrjbt] {
    text-decoration: line-through;
}

/* ============================================================
   NO viewport-width breakpoints for the card row.

   How many tier cards are visible is now decided by the app-bar Display-Mode
   selector (Desktop 4 / Laptop 3 / Tablet 2 / Phone 1) through the generic
   [data-gv-panel] rules in main.css, and the survivors share the row via
   `flex: 1 1 0`. The former `@media (max-width: 1199px/599px)` blocks pinned the
   cards to 50%/100% by RAW WIDTH, which fought the selector: picking Phone on a
   wide screen still showed a quarter-width card, and a narrow window overrode a
   deliberately pinned Desktop. Rule: width decides the MODE (in JS); the MODE,
   not the width, decides the layout.
   ============================================================ */
/* _content/AspireChatApp.Web/Components/TargetAllocation/Cards/AssignmentCardComponent.razor.rz.scp.css */
/* ============================================================
   ASSIGNMENT CARD COMPONENT STYLES

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

/* Main card container */
.assignment-card[b-b5i2jrnvvb] {
    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-b5i2jrnvvb] {
    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-b5i2jrnvvb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Assignment name */
.assignment-name[b-b5i2jrnvvb] {
    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-b5i2jrnvvb] {
    color: #4CAF50;
    font-weight: 600;
}

/* Edit button */
.edit-btn[b-b5i2jrnvvb] {
    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-b5i2jrnvvb] {
    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-b5i2jrnvvb] {
    opacity: 1;
}

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

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

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

/* Visit order badge */
.visit-order-badge[b-b5i2jrnvvb] {
    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-b5i2jrnvvb] {
    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-b5i2jrnvvb] {
    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-b5i2jrnvvb] {
    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.Web/Components/TargetAllocation/Cards/HazardCardComponent.razor.rz.scp.css */
/* ============================================================
   HAZARD CARD COMPONENT STYLES

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

/* Main card container */
.hazard-card[b-9pdmwy1iks] {
    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-9pdmwy1iks] {
    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-9pdmwy1iks] {
    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-9pdmwy1iks] {
    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-9pdmwy1iks] {
    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-9pdmwy1iks] {
    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-9pdmwy1iks] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Entity icon - CRITICAL: constrain image size */
.hazard-header img.entity-icon[b-9pdmwy1iks],
.hazard-header .entity-icon[b-9pdmwy1iks] {
    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-9pdmwy1iks] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Hazard name */
.hazard-name[b-9pdmwy1iks] {
    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-9pdmwy1iks] {
    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-9pdmwy1iks] {
    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-9pdmwy1iks] {
    opacity: 1;
}

/* Location display */
.hazard-location[b-9pdmwy1iks] {
    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-9pdmwy1iks] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Assignments container */
.hazard-assignments[b-9pdmwy1iks] {
    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-9pdmwy1iks] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #4CAF50;
}

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

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

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

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

/* Visit order badge */
.visit-order-badge[b-9pdmwy1iks] {
    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-9pdmwy1iks] {
    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-9pdmwy1iks] {
    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-9pdmwy1iks] {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

:global([dir="rtl"]) .hazard-card.urgency-critical[b-9pdmwy1iks] {
    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-9pdmwy1iks] {
    border-right-color: #ff9800;
}

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

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

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

/* Main card container */
.unit-card[b-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    border-left-color: #ff9800;
}

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

.unit-card.availability-busy[b-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* Entity icon - CRITICAL: constrain image size */
.entity-icon[b-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    opacity: 1;
}

/* Location display */
.unit-location[b-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

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

/* Assignments container */
.team-assignments[b-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #2196F3;
}

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

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

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

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

/* Visit order badge */
.visit-order-badge[b-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    color: #ff9800;
    font-weight: 500;
}

.assigned-hazard-name[b-6nzuc8vfxm] {
    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-6nzuc8vfxm] {
    border-left: none;
    border-right: 4px solid transparent;
}

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

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

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

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

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

/* RTL - Flip text alignment and spacing */
:global([dir="rtl"]) .detail-separator[b-6nzuc8vfxm] {
    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.Web/Components/TargetAllocation/Cards/ZoneCardComponent.razor.rz.scp.css */
/* ============================================================
   ZONE CARD COMPONENT STYLES

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

/* Main card container */
.zone-card[b-ja0s9onlqt] {
    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-ja0s9onlqt] {
    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-ja0s9onlqt] {
    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-ja0s9onlqt] {
    border-left-color: #ff9800;
}

.zone-card.zone-safe[b-ja0s9onlqt] {
    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-ja0s9onlqt] {
    border-left-color: #9c27b0;
}

.zone-card.zone-main[b-ja0s9onlqt] {
    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-ja0s9onlqt] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Zone name */
.zone-name[b-ja0s9onlqt] {
    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-ja0s9onlqt] {
    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-ja0s9onlqt] {
    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-ja0s9onlqt] {
    opacity: 1;
}

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

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

/* Location display */
.zone-location[b-ja0s9onlqt] {
    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-ja0s9onlqt] {
    background-color: rgba(244, 67, 54, 0.2) !important;
    color: #f44336 !important;
}

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

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

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

.zone-type-main[b-ja0s9onlqt] {
    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-ja0s9onlqt] {
    border-left: none;
    border-right: 4px solid transparent;
}

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

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

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

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

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

/* RTL - Flip text alignment and spacing */
:global([dir="rtl"]) .detail-separator[b-ja0s9onlqt] {
    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.Web/Components/TargetAllocation/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-w7zu6almzf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

/* Each location option container (radio + controls) */
.location-option-container[b-w7zu6almzf] {
    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-w7zu6almzf] {
    background: rgba(255, 255, 255, 0.05);
}

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

.location-controls-row[b-w7zu6almzf] {
    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-w7zu6almzf]  .mud-text-field {
    flex: 1 1 auto;
    min-width: 250px;
    max-width: 100%;
}

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

.location-success-indicator[b-w7zu6almzf] {
    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-w7zu6almzf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

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

.location-input-row[b-w7zu6almzf] {
    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-w7zu6almzf] {
    background: rgba(255, 255, 255, 0.08);
}

[b-w7zu6almzf] .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-w7zu6almzf] {
    padding-left: 0;
    padding-right: 32px;
}
/* _content/AspireChatApp.Web/Components/TargetAllocation/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-8532ph8fkd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-8532ph8fkd] .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-8532ph8fkd] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-8532ph8fkd]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Web/Components/TargetAllocation/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-vpretegyqm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

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

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

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

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

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

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

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

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

[b-vpretegyqm] .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-vpretegyqm 0.3s ease-out;
    pointer-events: auto !important;
}

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

/* Edit dialog assignments section */
.edit-dialog-assignments[b-vpretegyqm] {
    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-vpretegyqm] {
    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-vpretegyqm] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

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

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

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

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

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

[b-vpretegyqm] .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-vpretegyqm] {
    flex-direction: row-reverse;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-vpretegyqm] .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-vpretegyqm] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-vpretegyqm]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Web/Components/TargetAllocation/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-p7tbakrwb3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

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

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

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

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

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

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

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

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

[b-p7tbakrwb3] .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-p7tbakrwb3 0.3s ease-out;
    pointer-events: auto !important;
}

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

/* Edit dialog assignments section */
.edit-dialog-assignments[b-p7tbakrwb3] {
    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-p7tbakrwb3] {
    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-p7tbakrwb3] .mud-select {
    min-height: 56px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[b-p7tbakrwb3] .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-p7tbakrwb3] {
    flex-direction: row-reverse;
}

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

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

:global([dir="rtl"]) @keyframes slide-in-dialog[b-p7tbakrwb3] {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to[b-p7tbakrwb3] {
        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-p7tbakrwb3] {
    min-height: 56px !important;
}

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

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

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

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

/* Fix #2: Dialog title - keep close button inline with title */
:global(.mud-dialog-title)[b-p7tbakrwb3] {
    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-p7tbakrwb3] {
    flex-shrink: 1 !important;
}

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

/* Fix #3: Dialog actions - buttons on opposite sides */
:global(.mud-dialog-actions)[b-p7tbakrwb3] {
    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-p7tbakrwb3] {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"] .mud-dialog-actions)[b-p7tbakrwb3] {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Web/Components/TargetAllocation/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-ztzav1wywl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-ztzav1wywl] .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-ztzav1wywl] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-ztzav1wywl]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Web/Components/TargetAllocation/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-khvv3rl9wv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

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

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

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

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

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

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

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

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

[b-khvv3rl9wv] .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-khvv3rl9wv 0.3s ease-out;
    pointer-events: auto !important;
}

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

/* Edit dialog assignments section */
.edit-dialog-assignments[b-khvv3rl9wv] {
    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-khvv3rl9wv] {
    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-khvv3rl9wv] .mud-select {
    min-height: 56px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[b-khvv3rl9wv] .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-khvv3rl9wv] {
    flex-direction: row-reverse;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-khvv3rl9wv] .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-khvv3rl9wv] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-khvv3rl9wv]  .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-khvv3rl9wv] {
    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-khvv3rl9wv] {
    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-khvv3rl9wv]  .mud-select {
    flex: 1 !important;
    min-width: 0 !important;
}
/* _content/AspireChatApp.Web/Components/TargetAllocation/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 styles */
.dialog-title-bar[b-7wbp68wcxd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:global([dir="rtl"])[b-7wbp68wcxd]  .mud-dialog-title .mud-icon-button {
    margin-left: 0 !important;
    margin-right: 8px !important;
}
/* _content/AspireChatApp.Web/Components/TargetAllocation/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-xu3ihd1ckb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-xu3ihd1ckb] .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-xu3ihd1ckb] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-xu3ihd1ckb]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Web/Components/TargetAllocation/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-ww49pignvy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-ww49pignvy] .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-ww49pignvy] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-ww49pignvy]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Web/Components/TargetAllocation/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-1gb1temucy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: move;
    user-select: none;
}

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

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

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

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

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

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

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

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

[b-1gb1temucy] .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-1gb1temucy 0.3s ease-out;
    pointer-events: auto !important;
}

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

/* Edit dialog assignments section */
.edit-dialog-assignments[b-1gb1temucy] {
    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-1gb1temucy] {
    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-1gb1temucy] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

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

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

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

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

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

[b-1gb1temucy] .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-1gb1temucy] {
    flex-direction: row-reverse;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Fix #3: Dialog actions - buttons on opposite sides */
[b-1gb1temucy] .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-1gb1temucy] .mud-dialog-actions .mud-button {
    flex-shrink: 0 !important;
}

/* RTL button layout */
:global([dir="rtl"])[b-1gb1temucy]  .mud-dialog-actions {
    flex-direction: row-reverse !important; /* Reverse for RTL */
    justify-content: flex-start !important; /* Buttons appear on right in RTL */
}
/* _content/AspireChatApp.Web/Components/TargetAllocation/TargetAllocationComp.razor.rz.scp.css */
    /* Visit Order Badge Styles */
    .visit-order-badge[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        min-width: 24px;
        height: 24px;
        font-size: 12px;
        border-radius: 12px;
        margin-right: 8px;
    }

    /* Hover effect */
    .clickable-assignment:hover .visit-order-badge[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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;
    }

    /* Header Styles */
    .c4i-header[b-6u4t0lbfow] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 24px;
        background: linear-gradient(135deg, rgba(13, 27, 42, 0.95) 0%, rgba(21, 101, 192, 0.25) 100%);
        border-bottom: 1px solid rgba(33, 150, 243, 0.4);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        min-height: 64px;
        backdrop-filter: blur(8px);
    }

    .header-left[b-6u4t0lbfow] {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 1;
        min-width: 0;
    }

    .header-menu[b-6u4t0lbfow] {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: 24px;
        padding-left: 24px;
        border-left: 1px solid rgba(33, 150, 243, 0.35);
    }

    [b-6u4t0lbfow] .header-menu .menu-item {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        padding: 8px 16px !important;
        border-radius: 6px !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        background: rgba(33, 150, 243, 0.08) !important;
    }

    [b-6u4t0lbfow] .header-menu .menu-item:hover {
        background: rgba(33, 150, 243, 0.25) !important;
        color: rgba(255, 255, 255, 1) !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
    }

    [b-6u4t0lbfow] .header-menu .menu-item:active {
        transform: translateY(0px);
        background: rgba(33, 150, 243, 0.35) !important;
    }

    [b-6u4t0lbfow] .header-menu .mud-menu {
        margin: 0 3px;
    }

    .header-icon[b-6u4t0lbfow] {
        color: #66BB6A;
        filter: drop-shadow(0 0 6px rgba(102, 187, 106, 0.6));
        font-size: 2rem !important;
    }

    .header-title[b-6u4t0lbfow] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        min-width: 0;
        flex-shrink: 0;
    }

    .title-main[b-6u4t0lbfow] {
        font-size: 1.25rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.98);
        white-space: nowrap;
        letter-spacing: 0.4px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        line-height: 1.3;
    }

    .title-sub[b-6u4t0lbfow] {
        font-size: 0.8125rem;
        font-weight: 500;
        color: rgba(33, 150, 243, 0.9);
        white-space: nowrap;
        letter-spacing: 0.3px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        line-height: 1.2;
    }

    .header-right[b-6u4t0lbfow] {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .system-time[b-6u4t0lbfow] {
        font-family: monospace;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.8);
    }

    /* Menu Bar Styles */
    .c4i-menubar[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.85rem !important;
    }

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

    .menubar-spacer[b-6u4t0lbfow] {
        flex: 1;
    }

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

    .project-icon[b-6u4t0lbfow] {
        color: #FFC107;
    }

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

    .project-timestamp[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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-6u4t0lbfow], .panel-right[b-6u4t0lbfow] {
        width: 378px;
        min-width: 342px;
        position: relative;
        transition: width 0.3s ease, min-width 0.3s ease;
    }

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

    .panel-center[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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-6u4t0lbfow] {
        position: absolute !important;
        top: 50% !important;
        right: -20px !important;
        transform: translateY(-50%) !important;
    }

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

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

        .panel-collapse-btn:hover[b-6u4t0lbfow] {
            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-6u4t0lbfow] {
        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-6u4t0lbfow] {
        font-weight: 600;
        flex: 1;
    }

    .panel-content[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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-6u4t0lbfow] {
        margin-bottom: 8px;
    }

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

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

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

    .dialog-entity-image[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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-6u4t0lbfow] {
        background: rgba(255, 255, 255, 0.1);
    }

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

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

    .assignments-content[b-6u4t0lbfow], .units-content[b-6u4t0lbfow] {
        /* 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-6u4t0lbfow] {
        width: 24px;
        height: 24px;
        object-fit: contain;
        border-radius: 4px;
        flex-shrink: 0;
    }


    .add-label[b-6u4t0lbfow] {
        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-6u4t0lbfow]::-webkit-scrollbar {
        width: 8px;
    }

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

    .panel-content[b-6u4t0lbfow]::-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-6u4t0lbfow]::-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-6u4t0lbfow] {
        opacity: 0.6;
        padding: 2px !important;
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
    }

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

        @keyframes pulse-border-b-6u4t0lbfow {
        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-6u4t0lbfow] {
        cursor: crosshair !important;
    }

    .map-crosshair-cursor[b-6u4t0lbfow],
    .map-crosshair-cursor canvas[b-6u4t0lbfow],
    .map-crosshair-cursor .maplibregl-canvas[b-6u4t0lbfow] {
        cursor: crosshair !important;
    }

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

    /* Panel Toggle Group Styles (replaced MudTabs) */
    .panel-toggle-header[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        width: 100%;
    }

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

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

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

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

    [b-6u4t0lbfow] .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-6u4t0lbfow],
    .c4i-content[b-6u4t0lbfow] {
        flex-direction: row;
    }

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

    /* RTL - Flip collapse button positions */
    :global([dir="rtl"]) .panel-left .panel-collapse-btn[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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-6u4t0lbfow] {
        flex-direction: row-reverse;
    }

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

    /* Panel container with split view */
    .panel-split-container[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        flex: 0 0 50%;
        overflow-y: auto;
        border-bottom: 2px solid #1e88e5;
    }

    /* Lower section - Editor (50% height) */
    .panel-lower-section[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        flex: 1 1 100%;
        border-bottom: none;
    }

    /* Editor container styling */
    .panel-editor[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
        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-6u4t0lbfow] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.95rem;
        font-weight: 600;
        color: #2196f3;
    }

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

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

    /* Editor content area */
    .panel-editor-content[b-6u4t0lbfow] {
        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-6u4t0lbfow],
        .panel-editor-content .mud-select-label[b-6u4t0lbfow] {
            font-size: 0.8rem;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* Editor actions footer */
    .panel-editor-actions[b-6u4t0lbfow] {
        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-6u4t0lbfow] {
            font-size: 0.85rem;
            padding: 6px 16px;
            min-height: 36px;
        }

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

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

    .panel-editor[b-6u4t0lbfow] {
        animation: slide-up-b-6u4t0lbfow 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-6u4t0lbfow] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: move;
    user-select: none;
}

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

/* Route Plan Dialog Title Structure - Container for title bar + buttons */
.route-plan-title-container[b-6u4t0lbfow] {
    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-6u4t0lbfow] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Ensure buttons in title are clickable and above drag layer */
[b-6u4t0lbfow] .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-6u4t0lbfow] .draggable-dialog .mud-dialog {
    /* DO NOT set position here - JavaScript controls it (position: fixed) */
    margin: 0 !important;
}

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

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

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

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

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

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

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

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