/* ═══════════════════════════════════════════════════════════════════════════
   AxiiDom Real Estate — Global Stylesheet
   Theme: Onyx Gold  ("The Expensive Look")
   ─────────────────────────────────────────────────────────────────────────
   Palette:
     Background    #0F0F11   — near-black page canvas
     Surface/Cards #1A1A1E   — elevated panels, drawer, appbar
     Accent        #D4AF37   — classic gold (buttons, active links, icons)
                              ► Used on ≈10% of the screen only
     Main Text     #F5F5F7   — white-smoke (crisp without full-white glare)
     Sub-Text      #A0A0B0   — muted blue-grey
     Border        #2A2A2E   — near-invisible separator
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ───────────────────────────────────────────────────
   THEME-AWARE: instead of hardcoding dark colors, bind our custom variables
   to MudBlazor's own palette variables. MudBlazor updates --mud-palette-*
   live whenever IsDarkMode flips, so every place that reads var(--text),
   var(--bg) etc. automatically tracks the active theme — no JS interop, no
   duplicate light/dark blocks to maintain.

   Why this matters: the OLD :root forced --mud-palette-text-primary to be
   light-grey via !important. When MudBlazor switched to its light palette
   the !important kept the text the wrong colour — producing "white text on
   white background" disappearing labels Yannis reported.

   The accent (gold) is intentionally fixed across both themes — it's the
   brand colour and works on dark or light surfaces.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    /* Surfaces & text — follow whichever palette MudBlazor is rendering */
    --bg:           var(--mud-palette-background);
    --surface:      var(--mud-palette-surface);
    --text:         var(--mud-palette-text-primary);
    --text-sub:     var(--mud-palette-text-secondary);
    --border:       var(--mud-palette-lines-default);

    /* Brand colours — same in both themes */
    --accent:       #D4AF37;
    --accent-dim:   #C8A020;
    --accent-glow:  rgba(212, 175, 55, 0.18);

    /* Emphatic status colours that look great on dark surfaces but
       "pop out" on white. These tokens carry the dark-mode value by
       default and get a deeper override under [data-theme="light"]
       below, so any place that wants a vivid status colour can read
       this token instead of hardcoding #4CAF50 / #F44336 / #FFC107
       etc. and still render legibly in both themes. */
    --success-emph: #4CAF50;
    --info-emph:    #2196F3;
    --warning-emph: #FFA726;
    --error-emph:   #E53935;

    /* Glass overlay tints — separate dark/light defaults so the appbar &
       drawer don't get a solid colour that breaks the floating-chrome
       effect. Overridden below for the light theme.
       AppBar and Drawer have separate tokens so light-mode can paint
       the AppBar in deep goldenrod (brand chrome) while keeping the
       Drawer light. In dark mode both resolve to the same value. */
    --glass-bg:        rgba(26, 26, 30, 0.80);
    --glass-bg-appbar: rgba(26, 26, 30, 0.80);
    --glass-bg-drawer: rgba(26, 26, 30, 0.80);
    --glass-blur:      blur(16px);

    /* Hero / map panel backgrounds — gradient seeds. Overridden below. */
    --hero-bg:       linear-gradient(160deg, #0F0F11 0%, #1a1710 50%, #0F0F11 100%);
    --map-panel-bg:  #12121A;
    --premium-bg-seed: #222228;   /* radial-gradient centre on .premium-bg */

    --radius:       10px;
    --transition:   0.2s ease;
}

/* ── Light-theme overrides ──────────────────────────────────────────────────
   A tiny JS helper (axiidom-theme.js) sets html[data-theme="light"] when
   the user toggles to light mode. We hook that attribute (NOT MudBlazor's
   internal class names, which can change between versions). Only the
   variables that don't auto-track MudBlazor need explicit light values —
   glass overlays, hero gradient, map panel background. */
html[data-theme="light"] {
    --glass-bg:        rgba(245, 245, 247, 0.85);
    /* AppBar carries the brand chrome in light mode: deep goldenrod with
       a touch of transparency so the glass-blur still feels alive. */
    --glass-bg-appbar: rgba(139, 105, 20, 0.95);
    --glass-bg-drawer: rgba(245, 245, 247, 0.85);
    --hero-bg:         linear-gradient(160deg, #F5F5F7 0%, #FAF7E8 50%, #F5F5F7 100%);
    --map-panel-bg:    #ECECF0;
    --premium-bg-seed: #FFFFFF;   /* whiter centre over light bg */

    /* Deeper status colours so they read on white without "popping out".
       Material-900 tones — still recognisably green/blue/orange/red but
       no longer burning the eye. Match the PaletteLight values in
       AppThemeService.cs. */
    --success-emph:    #1B5E20;
    --info-emph:       #01579B;
    --warning-emph:    #BF360C;
    --error-emph:      #B71C1C;

    /* NavGroup section-header band — sits between the deep gold AppBar
       on top and the white NavLink rows below, completing the three-
       layer brand hierarchy in light mode. Ivory-gold tint with
       goldenrod text echoes the same brand colour family. */
    --navgroup-band-bg:   #F5E9C8;   /* soft ivory-gold */
    --navgroup-band-text: #8B6914;   /* dark goldenrod   */
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html, body {
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    /* The document itself must NEVER scroll — .mud-main-content is the single scroll
       region (sized to the viewport below). Without this, MudMainContent's fixed-AppBar
       top offset pushed the layout ~64px past the viewport, so the BODY grew a second
       "outer" scrollbar (the gap on the far right) that shifted the whole screen when
       you wheeled over a grid. (outer-scrollbar / double-scroll fix, 2026-06) */
    height: 100%;
    overflow: hidden;
}

/* Premium radial gradient background for main content.
   var(--premium-bg-seed) is the colour at the centre of the gradient, slightly
   lighter than the body bg in dark mode and slightly darker than the surface
   in light mode — same visual "spotlight" effect on both themes. */
.premium-bg {
    background: radial-gradient(circle at 50% -20%, var(--premium-bg-seed) 0%, var(--bg) 70%);
    min-height: 100vh;
}

a, .btn-link {
    color: var(--accent);
    transition: color var(--transition);
}
a:hover {
    color: var(--accent-dim);
}

/* ── MudBlazor AppBar Override ───────────────────────────────────────────── */
/* The AppBar carries the brand chrome. In dark mode it's a glassy panel over */
/* the rich-midnight bg; in light mode it goes deep goldenrod so the          */
/* "AxiiDom / ERP SYSTEM" title and the right-side icons stay readable in     */
/* white. Uses its own --glass-bg-appbar token so the Drawer can stay light.  */
.mud-appbar {
    background: var(--glass-bg-appbar) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border) !important;
}

/* ── MudBlazor Drawer — Glassmorphism Sidebar ───────────────────────────── */
/* The sidebar is the main navigation surface. We give it the glass effect:   */
/* slightly transparent over the dark bg, with the blur for depth. In light   */
/* mode it stays light (separate --glass-bg-drawer token from the AppBar).    */
/*                                                                             */
/* Width: bumped to 280px (from MudBlazor's 240px default) so longer Greek    */
/* labels like "Δίκτυο Συνεργατών B2B" or "Ιστορικό Αλλαγής Τιμών" fit on a   */
/* single line. Items that still exceed the width wrap to a second line via   */
/* the .mud-nav-link rules below, instead of triggering a horizontal scroll   */
/* bar — which is suppressed with overflow-x: hidden as a final safety net.   */
/* IMPORTANT: scope to .axiidom-nav-drawer ONLY — these rules previously     */
/* targeted .mud-drawer globally and accidentally clamped every MudDrawer in */
/* the app (including the wide unit-edit side panels) down to 280px.        */
.axiidom-nav-drawer {
    background: var(--glass-bg-drawer) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    /* Thicker accent right-border so there's a clear visual separation
       between the drawer and the main content area (Yannis: "the menu is
       invading to the right"). 3px gold-tinted border reads as a brand
       separator rather than a hairline divider. */
    border-right: 3px solid rgba(212, 175, 55, 0.25) !important;
    width: 280px !important;
    overflow-x: hidden !important;
}

/* ── Main content gutter ─────────────────────────────────────────────────── */
/* Push the main content ~1cm to the right of the drawer so page icons and   */
/* leftmost grid columns aren't crowded against the drawer separator.        */
/* Yannis: "still invading and hiding part of the icons that start the       */
/* options of the main area".                                                */
.mud-main-content {
    padding-left: 36px !important;
    /* Make the main content the SINGLE scroll region (pinned to viewport height),
       so the document body never scrolls. This kills the second "outer" scrollbar
       and the jarring whole-page shift when scrolling a FixedHeader grid: grid pages
       scroll only inside the grid; taller pages scroll inside main-content. (2026-06) */
    height: 100vh;
    /* border-box so MudMainContent's fixed-AppBar top padding counts INSIDE the 100vh
       instead of adding to it — otherwise the element is 100vh + appbar tall and the
       body overflows by the appbar height (the outer scrollbar / gap). With border-box
       the scroll area is exactly the viewport minus the AppBar, fully reachable. */
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    /* App-shell: the content area is a flex column so a grid page can FILL it and let
       only the grid body scroll (filters/toolbar stay put), instead of the whole page
       scrolling. Non-grid pages still size naturally and scroll here if they're tall. */
    display: flex;
    flex-direction: column;
}

/* ── Grid app-shell ──────────────────────────────────────────────────────────
   AxiidomGenericGrid wraps its toolbar + data-grid in .axiidom-grid-shell. As a
   flex child of .mud-main-content (a flex column) it takes the space left after any
   content above it; the toolbar keeps its natural height and the grid body fills the
   rest and scrolls internally (the grid uses FixedHeader so its column header stays).
   min-height on the body is a safety net: on a page that nests the grid inside a
   non-flex wrapper (so flex:1 can't engage), the grid still gets a usable height
   instead of collapsing to zero. */
.axiidom-grid-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.axiidom-grid-body {
    flex: 1 1 auto;
    min-height: 55vh;   /* floor so the grid is never collapsed; flex grows it past this */
    overflow: hidden;   /* the MudDataGrid (height:100%) owns the inner scroll */
}

/* Drawer header area */
.mud-drawer-header {
    border-bottom: 1px solid var(--border);
}

/* ── Sidebar Navigation Links ────────────────────────────────────────────── */
/* Gold accent ONLY on active link — all others stay neutral.                 */
/* white-space: normal + word-break: normal allow long Greek labels to wrap   */
/* to a second line instead of overflowing horizontally. line-height tightens */
/* the inter-line gap when a 2-line label appears.                            */
.mud-nav-link {
    color: var(--text-sub) !important;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.2px;
    border-radius: 8px !important;
    transition: background var(--transition), color var(--transition), border-color var(--transition) !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.25;
    min-height: auto !important;
    /* Tighter vertical padding — 5px keeps the row compact for the
       common single-line case but still gives 2-line wrapped labels
       enough breathing room. Right padding 14px gives a clear gap
       between the label text and the drawer's right edge. */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-right: 14px !important;
}
.mud-nav-link .mud-nav-link-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    /* min-width: 0 inside a flex container is essential — without it,
       flex children refuse to shrink below their intrinsic content width,
       which is what was causing some parenthetical labels (Αδρανείς
       Αγοραστές (Ghosting alerts), Market Scraper (Classifieds), …)
       to overflow horizontally instead of wrapping. */
    min-width: 0 !important;
    flex: 1 1 auto;
    line-height: 1.25;
}
/* Belt-and-braces: every descendant of .mud-nav-link participates in the
   wrap. Catches MudBlazor variants that wrap the text in a nested span. */
.mud-nav-link *:not(.mud-icon-root):not(.mud-nav-link-icon) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-overflow: clip !important;
}
/* MudBlazor renders nav-link content as a flex ROW with the icon first.
   Keep flex-wrap NOWRAP so the icon stays beside the first line of text
   — the inner text span wraps internally instead, and the icon aligns
   with the FIRST line via align-items: flex-start. Without this, the
   icon would jump to its own line above the text (Yannis's screenshot). */
.mud-nav-link {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    min-width: 0;
}
/* Pin the icon to the top so when text wraps to 2 lines, the icon stays
   level with the first line rather than centring vertically between the
   two lines. */
.mud-nav-link .mud-nav-link-icon,
.mud-nav-link .mud-icon-root {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Active / current page — gold left bar, bright white text */
.mud-nav-link.active,
.mud-nav-link[aria-current="page"] {
    background-color: rgba(212, 175, 55, 0.06) !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 0 8px 8px 0 !important;
    color: var(--text) !important;
    font-weight: 700 !important;
}

/* Active text — ensure no separate text-decoration, the border does the job */
.mud-nav-link.active .mud-typography,
.mud-nav-link[aria-current="page"] .mud-typography {
    text-decoration: none !important;
    color: var(--text) !important;
}

/* ── MudTabs (Drawer Tab Strip) ─────────────────────────────────────────── */
/* The tab toolbar background is controlled per-caller via Color="Color.Primary"
   which renders it in the primary amber/gold. We therefore need DARK text.
   Single authoritative block — no patches, no overrides fighting each other.  */

/* Kill the default animated MudBlazor sliding indicator */
.mud-tabs .mud-tab-slider     { display: none !important; }

/* All inactive tabs: dark-on-gold, readable, not dominant */
.mud-tabs .mud-tab {
    color:       rgba(0, 0, 0, 0.55) !important;
    font-weight: 600;
    font-size:   0.75rem;
    letter-spacing: 0.25px;
    transition:  color 0.15s ease;
}

/* Active tab: bold + text-underline sitting under the letters.
   text-underline-offset lifts it away from the element's bottom edge,
   so it reads as "under the label" not "border of the toolbar".          */
.mud-tabs .mud-tab.mud-tab-active {
    color:                   rgba(0, 0, 0, 0.92) !important;
    font-weight:             800 !important;
    text-decoration:         underline !important;
    text-decoration-color:   rgba(0, 0, 0, 0.75) !important;
    text-decoration-thickness: 2.5px !important;
    text-underline-offset:   5px !important;
}

/* Hover on inactive — slight darkening */
.mud-tabs .mud-tab:not(.mud-tab-active):hover {
    color: rgba(0, 0, 0, 0.78) !important;
}

/* ── Light-theme tab-text overrides ────────────────────────────────────────
   In light mode MudBlazor's Primary palette is dark goldenrod #8B6914, and
   MudTabs with Color="Color.Primary" paints the toolbar in that colour.
   The dark-on-gold tab text above assumes the lighter dark-mode Primary
   (#E2B36D) — on the deeper light-mode Primary it becomes unreadable. So
   in light mode we flip to WHITE text on the dark-goldenrod tab strip.   */
html[data-theme="light"] .mud-tabs .mud-tab {
    color: rgba(255, 255, 255, 0.78) !important;
}
html[data-theme="light"] .mud-tabs .mud-tab.mud-tab-active {
    color:                 rgba(255, 255, 255, 1) !important;
    text-decoration-color: rgba(255, 255, 255, 0.9) !important;
}
html[data-theme="light"] .mud-tabs .mud-tab:not(.mud-tab-active):hover {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ══════════════════════════════════════════════════════════════════════════�
/* -- Sidebar Nav Link Hover ------------------------------------------------- */
.mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text) !important;
}

/* -- Nav Group Card Styling ------------------------------------------------ */
.mud-nav-group {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Group header: label stays at left edge */
.mud-nav-group > .mud-nav-group-header {
    color: var(--text-sub) !important;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

/* ── NavGroup header band — light theme only ─────────────────────────────
   In light mode we render the group title (e.g. "Το Γραφείο Μου",
   "Πελατολόγιο & Χαρτοφυλάκιο") as an ivory-gold band with goldenrod
   text. This sits visually between the deep goldenrod AppBar above
   and the white NavLink rows below — three-layer brand hierarchy.
   Dark mode is intentionally untouched here; the existing rule above
   applies and the band would clash with the dark drawer surface.    */
html[data-theme="light"] .mud-nav-group > .mud-nav-group-header {
    background-color: var(--navgroup-band-bg) !important;
    color: var(--navgroup-band-text) !important;
    border-radius: 6px;
    margin: 4px 6px;
    padding-left: 12px !important;
}
html[data-theme="light"] .mud-nav-group > .mud-nav-group-header .mud-nav-link-icon,
html[data-theme="light"] .mud-nav-group > .mud-nav-group-header .mud-icon-root {
    color: var(--navgroup-band-text) !important;
}
html[data-theme="light"] .mud-nav-group > .mud-nav-group-header .mud-nav-link-expand-icon {
    color: var(--navgroup-band-text) !important;
}


/* Sub-items: consistent padding directly on nav-link */
.mud-nav-group .mud-collapse-container > ul,
.mud-nav-group .mud-collapse-container > div {
    padding-left: 0 !important;
}

.mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 36px !important;
    margin: 1px 4px !important;
}

.mud-nav-group .mud-collapse-container .mud-nav-link.active,
.mud-nav-group .mud-collapse-container .mud-nav-link[aria-current='page'] {
    padding-left: 33px !important;
}

.mud-nav-group .mud-nav-link .mud-nav-link-icon {
    width: 26px !important;
    min-width: 26px !important;
    display: inline-flex !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.mud-nav-group .mud-badge-root {
    width: 100% !important;
    margin: 0 !important;
}

/* Nav icons � accent colour when active */
.mud-nav-link.active .mud-icon-root {
    color: var(--accent) !important;
}

/* -- MudIconButton overrides ----------------------------------------------- */
.mud-icon-button {
    transition: opacity var(--transition), background var(--transition);
}
.mud-icon-button:hover {
    background: rgba(212, 175, 55, 0.10) !important;
}

/* -- MudButton � Primary = Gold -------------------------------------------- */
.mud-button-root.mud-button-filled-primary {
    background-color: var(--accent) !important;
    color: #0F0F11 !important;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.25) !important;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.mud-button-root.mud-button-filled-primary:hover {
    background-color: var(--accent-dim) !important;
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35) !important;
    transform: translateY(-1px);
}

/* -- MudPaper / Cards ------------------------------------------------------ */
.mud-paper {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    transition: transform var(--transition), box-shadow var(--transition);
}
.mud-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.1) !important;
}

/* -- SaaS Panels ----------------------------------------------------------- */
.saas-panel {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1) !important;
    color: var(--text) !important;
    transition: transform var(--transition), box-shadow var(--transition);
}
.saas-panel:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

/* -- Tables ---------------------------------------------------------------- */
.mud-table-head .mud-table-cell {
    color: var(--text-sub) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    border-bottom: 1px solid var(--border) !important;
}
.mud-table-row:hover .mud-table-cell {
    background-color: rgba(212, 175, 55, 0.05) !important;
}
/* NOTE: previous rule here forced `overflow-y: hidden !important` on
   .mud-table-container in an attempt to suppress an outer scrollbar.
   That clipped every grid past the first ~6 rows because MudDataGrid's
   natural body-overflow stopped working — the "25 rows per page" combo
   selected 25 rows but only 6 were visually reachable. Removed on
   2026-05-29 (task #109). If a stray outer scrollbar reappears, treat
   it at the page-layout level, not by killing the grid's own overflow. */

/* -- Input Fields ---------------------------------------------------------- */
.mud-input-root { color: var(--text) !important; }
.mud-input-outlined .mud-notched-outline { border-color: var(--border) !important; }
.mud-input-outlined:hover .mud-notched-outline { border-color: rgba(212, 175, 55, 0.5) !important; }
.mud-input-outlined.mud-focused .mud-notched-outline { border-color: var(--accent) !important; border-width: 2px !important; }
/* Input labels — light grey on dark surfaces (default). Theme-aware
   override below makes them dark on light surfaces. */
.mud-input-label { color: #E0E0E0 !important; font-weight: 500; }
.mud-input-label.mud-input-label-inputcontrol.mud-input-label-animated.mud-focused { color: var(--accent) !important; }
html[data-theme="light"] .mud-input-label { color: #4A4A4A !important; }

/* -- Animations ------------------------------------------------------------- */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.spin-animation { animation: spin 2s linear infinite; }

/* -- MudDivider ------------------------------------------------------------ */
.mud-divider { border-color: var(--border) !important; }

/* -- MudChip --------------------------------------------------------------- */
/* Dark mode (default): pale-gold pill on the dark canvas reads as a soft
   accent — gold-on-near-black has plenty of contrast. */
.mud-chip.mud-chip-color-primary {
    background: var(--accent-glow) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* Light mode: the same pale-gold bg becomes a cream pill on white, and
   the gold text (#D4AF37) is too light against it — the "Επαγγελματικό"
   chip on the property slider header was the worst offender (task #120).
   Switch to the darker goldenrod we already use for the nav-group bands
   (--navgroup-band-text = #8B6914) and slightly saturate the background
   + border so the chip still reads as a gold accent, not a dimmer copy. */
html[data-theme="light"] .mud-chip.mud-chip-color-primary {
    background: rgba(212, 175, 55, 0.18) !important;
    color: var(--navgroup-band-text) !important;
    border: 1px solid rgba(139, 105, 20, 0.45) !important;
}

/* Outlined Warning chips have the same "yellow-on-white" pitfall in light
   mode — MudBlazor's default warning text is around #FFB300, which on a
   transparent (so effectively white) outlined chip reads as low-contrast
   pale orange. Force a darker amber for the text + a more visible border
   so badges like Pending / Σύνθετα stand out. */
html[data-theme="light"] .mud-chip.mud-chip-color-warning.mud-chip-outlined,
html[data-theme="light"] .mud-chip-outlined.mud-chip-color-warning {
    background: rgba(255, 152, 0, 0.10) !important;
    color: #8C5A00 !important;                     /* dark amber */
    border: 1px solid rgba(255, 152, 0, 0.55) !important;
}

/* Outlined Info chips too — MudBlazor's #2196F3 sky-blue text on white is
   readable but the outlined variant border is so faint that the chip
   visually disappears. Bump the border opacity for clearer chip edges. */
html[data-theme="light"] .mud-chip.mud-chip-color-info.mud-chip-outlined,
html[data-theme="light"] .mud-chip-outlined.mud-chip-color-info {
    background: rgba(33, 150, 243, 0.08) !important;
    color: #0D47A1 !important;                     /* navy — high contrast on white */
    border: 1px solid rgba(33, 150, 243, 0.55) !important;
}

/* -- Scrollbar styling (Webkit) -------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.4); }

/* -- Form validation colours ----------------------------------------------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #4CAF50; }
.invalid { outline: 1px solid #EF5350; }
.validation-message { color: #EF5350; }

/* -- Blazor error boundary -------------------------------------------------- */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* -- MudBlazor Error UI ---------------------------------------------------- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ── Theme-aware gold-tinted grid header (.axiidom-gold-grid) ──────────────
   Used by emphasis-grids that highlight headers + a "value" column in gold.
   In dark mode the gold (#D4AF37) reads beautifully on the dark surface.
   In light mode the same gold disappears against white/light surfaces, so
   we deepen it to dark goldenrod (#8B6914) and darken the tint a touch.
   Apply via `Class="axiidom-gold-grid"` on the table; tag value-emphasis
   cells with `class="gold-value"`. */
.axiidom-gold-grid thead tr {
    background: rgba(212, 175, 55, 0.10);
}
/* The 10%-opaque tint above is fine for a static header, but on a FIXED (sticky)
   header it lets body rows bleed through and "tangle" with the headers when you
   scroll back up. Paint the header CELLS opaque (surface) with the gold tint
   layered on top, and lift them above the body. (grid header tangle fix, 2026-06) */
.axiidom-gold-grid thead th,
.axiidom-gold-grid thead .mud-table-cell {
    color: var(--accent) !important;
    font-weight: 700;
    background-color: var(--mud-palette-surface);
    background-image: linear-gradient(rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.10));
    z-index: 3;
}
.axiidom-gold-grid td.gold-value .mud-typography,
.axiidom-gold-grid td.gold-value {
    color: var(--accent) !important;
}
html[data-theme="light"] .axiidom-gold-grid thead tr {
    background: rgba(139, 105, 20, 0.10);
}
html[data-theme="light"] .axiidom-gold-grid thead th,
html[data-theme="light"] .axiidom-gold-grid thead .mud-table-cell {
    color: #8B6914 !important;
    background-color: var(--mud-palette-surface);
    background-image: linear-gradient(rgba(139, 105, 20, 0.10), rgba(139, 105, 20, 0.10));
}
html[data-theme="light"] .axiidom-gold-grid td.gold-value .mud-typography,
html[data-theme="light"] .axiidom-gold-grid td.gold-value {
    color: #8B6914 !important;
}

/* Rent column header keeps its teal accent (color-coded distinct from sale). */
.axiidom-gold-grid thead th.rent-header { color: #4DB6AC !important; }
html[data-theme="light"] .axiidom-gold-grid thead th.rent-header { color: #00897B !important; }

/* ── GENERAL sticky/fixed-header fix (app-wide) ────────────────────────────
   Any MudTable (FixedHeader) or MudDataGrid sticky header must paint an OPAQUE
   surface background and sit above the body, otherwise body rows bleed through
   and "tangle" with the column labels when you scroll back up (worst on hover,
   where the row behind highlights and shows through). MudTable renders <thead>,
   MudDataGrid renders <thead class="mud-table-head"> incl. a column-filter row —
   we cover both, plus the filter row, with !important + a high z-index so a
   hovered/relative-positioned body row can never stack over the header.
   (2026-06; generalised from the earlier .axiidom-gold-grid-only fix.) */
/* Stick the WHOLE header (<thead>) as a single block and CANCEL MudBlazor's
   per-cell sticky. Per-cell sticky pins every header row at top:0 — so with
   MudDataGrid's two header rows (titles + column-filter row) the filter band
   slides up over the titles' 2nd line. As one block they keep their natural
   stacked positions and scroll together. Safe: these grids have no frozen
   (sticky-left) columns, so neutralising cell position can't break anything.
   Opaque cell + thead backgrounds stop body rows bleeding through; z-index
   lifts the block above the (possibly hover-highlighted) body. */
.mud-table-sticky-header thead,
.mud-table-sticky-header .mud-table-head {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--mud-palette-surface);
}
.mud-table-sticky-header thead th,
.mud-table-sticky-header thead td,
.mud-table-sticky-header thead .mud-table-cell,
.mud-table-sticky-header .mud-table-head th,
.mud-table-sticky-header .mud-table-head td,
.mud-table-sticky-header .mud-table-head .mud-table-cell {
    position: static !important;
    background-color: var(--mud-palette-surface) !important;
}

/* ── NavMenu — per-user reorder via CSS `order:` ──────────────────────────
   Each MenuGate emits a <div class="menu-gate" style="order:N">. For the
   `order:` property to actually reorder the visual stack, the parent
   container must be a flex column. MudBlazor's MudNavGroup renders its
   children inside a `.mud-collapse-container` (the expand/collapse body)
   which we flex-column here. Items the user hasn't customised fall back
   to their MenuKeys.All index, so the visual result is identical to the
   un-customised case. */
.mud-nav-group .mud-collapse-container > ul,
.mud-nav-group .mud-collapse-container > div {
    display: flex;
    flex-direction: column;
}
.menu-gate {
    /* Without an explicit display, some browsers ignore `order:` on inline
       elements. block + width:100% mimics the surrounding MudNavLink layout
       so the gate is transparent to MudBlazor's spacing rules.            */
    display: block;
    width: 100%;
}

/* -- Three-state menu access: SecurityManager selector row -------------- */
/* Holds the three access-level buttons (Visible / Locked / Hidden) inline
   with 4px gap. We don't use MudButtonGroup because its border styling
   relies on Color.Default which renders grey-on-grey in dark theme.    */
.mg-access-group {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    flex-wrap: nowrap;
}
.mg-access-group .mud-button-root { min-width: 0; }

/* -- Three-state menu access: Locked rendering --------------------------- */
/* When an admin sets a menu entry to "Locked" for a role, the link still
   renders so the user knows the feature exists, but it's greyed out and
   non-clickable, with a tooltip and lock-icon badge.

   The .menu-gate-locked-shield wrapper inside MenuGate.razor holds the
   actual <MudNavLink> as its first child plus a transparent click-eater
   overlay. We dim/desaturate just the link, not the click-eater.        */
.menu-gate-locked .menu-gate-locked-shield > :first-child {
    opacity: 0.45;
    filter: grayscale(0.6);
    pointer-events: none;
}
.menu-gate-locked .menu-gate-locked-shield > :first-child * {
    cursor: not-allowed !important;
}

/* -- Slider: Hand-rolled price pill (bypasses MudChip) -------------------- */
.axiidom-price-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 16px;
    background: #8B6914;
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.2;
    letter-spacing: 0.25px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}
html[data-theme="light"] .axiidom-price-pill {
    background: #8B6914;
    color: #FFFFFF !important;
}

/* -- Slider: Hide Spin Buttons + Fix Flex Stretch ------------------------- */
.mud-input-numeric-spin { display: none !important; }
.axiidom-slider-body .mud-tabs-panels .d-flex { align-items: flex-start !important; }
.axiidom-slider-body .mud-form-control,
.axiidom-slider-body .mud-input-control { align-self: flex-start !important; height: auto !important; }

/* ── Slider input height cap ────────────────────────────────────────────────
   MudBlazor 9.x outlined inputs default to a generous ~56px height + extra
   floating-label/helper-text padding-bottom. Inside the unit/property/owner
   sliders we have dozens of single-line fields (IDs, numbers, dates, selects,
   FK pickers) that visually inflate to look like multi-line textareas because
   that padding accumulates. This block caps the input *slot* to a tight
   single-line height and zeroes out the helper-text padding for non-textarea
   inputs. Multi-line `Lines="N"` textareas opt out via the textarea selector
   below.

   Affects every drawer/slider that uses AxiidomGenericSlider (Akinhta,
   Analakin, Idioktht, …) so the fix is one place. Selector specificity
   `.axiidom-slider-body .mud-input-outlined …` beats MudBlazor's defaults
   without `!important` battles.
   ─────────────────────────────────────────────────────────────────────────── */
.axiidom-slider-body .mud-input-control,
.axiidom-slider-body .mud-form-control {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    min-height: 0 !important;
}
.axiidom-slider-body .mud-input.mud-input-outlined {
    min-height: 0 !important;
}
/* Single-line inputs — tight standard 40-ish-px height */
.axiidom-slider-body .mud-input-outlined input.mud-input-slot,
.axiidom-slider-body .mud-input-outlined .mud-select-input,
.axiidom-slider-body .mud-input-outlined .mud-input-slot:not(textarea) {
    height: 1.4375em !important;
    min-height: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: content-box;
}
/* Allow real multi-line textareas (Lines="N") to keep their natural height */
.axiidom-slider-body .mud-input-outlined textarea.mud-input-slot {
    height: auto !important;
    min-height: 60px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box;
}
/* Helper-text slot below the input — kill its reserved vertical space when empty */
.axiidom-slider-body .mud-input-helper-text:empty {
    display: none !important;
}

/* ── NUCLEAR: cap every input wrapper inside the slider ────────────────────
   Specific selectors above weren't catching every variant (MudNumericField
   in particular kept inflating). Here we use `:has(textarea)` to detect the
   genuinely-multiline cases and exempt their wrappers; everything else gets
   a hard max-height. */
.axiidom-slider-body .mud-input-control:not(:has(textarea.mud-input-slot)),
.axiidom-slider-body .mud-form-control:not(:has(textarea.mud-input-slot)),
.axiidom-slider-body .mud-input:not(:has(textarea.mud-input-slot)),
.axiidom-slider-body .mud-input-outlined:not(:has(textarea.mud-input-slot)),
.axiidom-slider-body .mud-shrink:not(:has(textarea.mud-input-slot)),
.axiidom-slider-body .mud-select:not(:has(textarea.mud-input-slot)) {
    max-height: 56px !important;
    min-height: 0 !important;
}

/* Force the slot itself (the <input>) to a tight single-line height */
.axiidom-slider-body input.mud-input-slot,
.axiidom-slider-body .mud-input-slot[type="text"],
.axiidom-slider-body .mud-input-slot[type="number"],
.axiidom-slider-body .mud-input-slot[type="date"],
.axiidom-slider-body .mud-input-slot[type="datetime-local"] {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    line-height: 1.4 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    overflow: hidden !important;
}

/* Real multi-line textareas opt out completely */
.axiidom-slider-body textarea.mud-input-slot {
    height: auto !important;
    min-height: 80px !important;
    max-height: none !important;
}
.axiidom-slider-body .mud-input-control:has(textarea.mud-input-slot),
.axiidom-slider-body .mud-form-control:has(textarea.mud-input-slot) {
    max-height: none !important;
    min-height: 80px !important;
}

/* -- Login Page Language Buttons ------------------------------------------- */
.lang-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 8px; padding: 8px 20px; font-size: 0.9rem; font-weight: 600;
    letter-spacing: 0.5px; color: var(--text); background-color: var(--surface);
    border: 1.5px solid var(--border); cursor: pointer; transition: all var(--transition); text-decoration: none;
}
.lang-btn:hover { background-color: var(--accent-glow); border-color: var(--accent); transform: translateY(-1px); color: var(--accent); text-decoration: none; }
.lang-btn--active { background-color: var(--accent-glow); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2); }

/* -- AppBar Compact Language Switcher -------------------------------------- */
.appbar-lang-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 6px; background: transparent;
    border: 1.5px solid transparent; cursor: pointer; transition: all var(--transition); opacity: 0.65;
}
.appbar-lang-btn:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; }
.appbar-lang-btn--active { border-color: var(--accent); background: rgba(212, 175, 55, 0.15); opacity: 1; }

/* -- AXIIDOM Logo text in AppBar -------------------------------------------- */
.axiidom-logo-text { font-weight: 800; letter-spacing: 2px; color: var(--text) !important; }
.axiidom-logo-accent { color: var(--accent) !important; }

/* -- MudPopover (Selects, Autocompletes, Dropdowns) -----------------------
   The popover panel that appears under a MudSelect / MudAutocomplete.
   Without these rules, list-item text inherits an unset colour and ends
   up dark-on-dark (in light mode the panel is light grey but the items
   were rendering with dark mud-text-secondary, which looked like the
   "black bg + dark text" Yannis reported in the Search filter dropdowns).
   Pinning bg + text + hover state to palette tokens keeps it readable
   in both themes without forcing either palette. */
.mud-popover .mud-paper {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-primary) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}
.mud-popover .mud-list { background-color: transparent !important; }
.mud-popover .mud-list-item,
.mud-popover .mud-list-item-text {
    color: var(--mud-palette-text-primary) !important;
}
.mud-popover .mud-list-item:hover {
    background-color: var(--accent-glow) !important;
}
.mud-popover .mud-list-item.mud-selected-item {
    background-color: var(--accent-glow) !important;
    color: var(--mud-palette-primary) !important;
}

/* -- Perfect Nav Sub-item Alignment ---------------------------------------- */
/* Fix icon width so ALL item text starts at the exact same X position.       */
/* MudNavLink renders the icon inside a span.mud-nav-link-icon                */
.mud-nav-group .mud-nav-link .mud-nav-link-icon,
.mud-nav-group .mud-nav-link .mud-icon-root {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Force each sub-item to occupy its own full row � prevents flex wrapping */
.mud-nav-group .mud-collapse-container .mud-nav-item {
    display: block !important;
    width: 100% !important;
}
.mud-nav-group .mud-collapse-container .mud-nav-link {
    display: flex !important;
    width: 100% !important;
}

/* Fix: mud-collapse-wrapper-inner is a flex container.
   Force each nav-link to take 100% of the row width. */
.mud-nav-group .mud-collapse-wrapper-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   SearchBar.razor — AI search input (GLOBAL, intentionally unscoped)
   ─────────────────────────────────────────────────────────────────────────
   These rules used to live in Components/Pages/Search.razor.css. That was
   wrong: Search.razor.css is Blazor-SCOPED, so its rules can only target
   elements INSIDE Search.razor itself. <SearchBar> is a sibling component
   in Components/Shared/, and SearchBar.razor has NO scoped stylesheet — so
   the rules silently did not apply to its child elements.

   Moving them here makes them global and removes the invisibility cliff.
   See git log for the floor-vs-attribute / EPAGGELMATIKO saga that
   surfaced this.
   ═══════════════════════════════════════════════════════════════════════════ */
.search-bar-wrapper {
    width: 100%;
    max-width: 100%;
}
.search-bar-inner {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    /* Restrained padding + min-height — keeps the width gain from removing the
       1000px cap, but drops the previous "huge" dimensions Yannis flagged. */
    padding: 8px 10px 8px 16px;
    min-height: 52px;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-bar-inner:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.search-bar-ai-icon {
    flex-shrink: 0;
    margin-right: 10px;
    opacity: 0.92;
}
.search-bar-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    /* Slightly above default for readability, far short of the previous 1.45rem. */
    font-size: 1.05rem;
    line-height: 1.35;
    font-family: 'Inter', sans-serif;
    padding: 6px 0;
    min-width: 0;            /* needed for flex shrinking */
    caret-color: var(--accent);
}
.search-bar-input::placeholder {
    color: var(--text-sub);
    font-size: 0.95rem;
    opacity: 0.7;
}
.search-bar-btn {
    flex-shrink: 0;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: #0F0F11;
    width: 40px;
    height: 40px;
    margin-left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}
.search-bar-btn:hover:not(:disabled) {
    background: var(--accent-dim);
    transform: translateY(-1px);
}
.search-bar-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.search-bar-mic-btn--listening {
    background: #ff4444 !important;
    animation: search-bar-mic-pulse 1s infinite;
}
@keyframes search-bar-mic-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}
.search-bar-spinner {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}
.search-bar-hint {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--text-sub);
    text-align: center;
}
/* Compact variant (kept for callers that pass Compact="true") */
.search-bar--compact .search-bar-inner { min-height: 48px; padding: 6px 10px; }
.search-bar--compact .search-bar-input { font-size: 1rem; }

/* MudTooltip renders as a <span> (inline) which causes nav items to sit
   side-by-side. Force all tooltip wrapper spans inside nav groups to be block. */
.mud-nav-group .mud-collapse-wrapper-inner > span,
.mud-nav-group .mud-collapse-container span:not(.mud-nav-link-icon):not(.mud-nav-link-text):not(.mud-badge-content) {
    display: block !important;
    width: 100% !important;
}

/* -- Status cards (parity dashboards, diff summaries) -----------------------
   Used on Admin/SearchComparison and Admin/SearchParity to colour-code
   summary KPI tiles. Default values target dark mode (low-alpha tints on
   the dark canvas); light-mode override flips them to the original pastel
   palette so the same markup reads correctly in both themes. */
.status-card.status-card-success {
    background-color: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.4);
}
.status-card.status-card-error {
    background-color: rgba(229, 57, 53, 0.15);
    border: 1px solid rgba(229, 57, 53, 0.4);
}
.status-card.status-card-warning {
    background-color: rgba(255, 167, 38, 0.15);
    border: 1px solid rgba(255, 167, 38, 0.4);
}
.status-card.status-card-neutral {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-theme="light"] .status-card.status-card-success {
    background-color: #E7F6E7;
    border: 1px solid #93C893;
}
html[data-theme="light"] .status-card.status-card-error {
    background-color: #FDECEA;
    border: 1px solid #E57373;
}
html[data-theme="light"] .status-card.status-card-warning {
    background-color: #FFF4E5;
    border: 1px solid #FFB74D;
}
html[data-theme="light"] .status-card.status-card-neutral {
    background-color: #ECEFF1;
    border: 1px solid #B0BEC5;
}

/* ── Leaflet map popups — theme-aware (2026-05-28) ──────────────────────────
   The Leaflet stock CSS uses pure-white popup backgrounds with a slight grey
   shadow. The HTML injected by axiidom-map.js uses
   `color: var(--mud-palette-text-primary)` for body text, which in dark
   theme resolves to WHITE — producing white-on-white inside the popup.
   These overrides repaint the popup's background + tip + close button using
   MudBlazor theme variables so the popup follows the app's dark/light state.
   ──────────────────────────────────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

/* The little arrow/tip pointing from the popup to the marker. */
.leaflet-popup-tip {
    background: var(--mud-palette-surface) !important;
    box-shadow: none !important;
    border-left:   1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* The "×" close button in the popup top-right — needs theme-aware colour. */
.leaflet-popup-close-button {
    color: var(--mud-palette-text-secondary) !important;
}
.leaflet-popup-close-button:hover {
    color: var(--mud-palette-text-primary) !important;
}

/* The popup inner content scroll area — wallpaper if Leaflet ever adds a bg.  */
.leaflet-popup-content {
    color: var(--mud-palette-text-primary);
    margin: 8px 10px;
}

/* The horizontal divider in the popup HTML (axiidom-map.js line 179) uses
   `border-top: 1px solid rgba(0,0,0,0.06)` which is invisible on the dark
   surface. This selector targets that exact inline-styled element when its
   parent is inside a Leaflet popup. The JS could be patched too, but this
   CSS fix is non-invasive and won't bleed into other contexts. */
.leaflet-popup-content [style*="border-top:1px solid rgba(0,0,0"] {
    border-top-color: var(--mud-palette-lines-default) !important;
}

/* (Bottom-row cutoff band-aids removed on 2026-05-29 — the real fix was
   restoring the grid's natural overflow-y; see task #109. Adding extra
   padding here was treating a symptom of overflow-y:hidden, not the
   cause. If a real clipping issue appears, fix at the page-layout level.) */

/* ── Media manager: hover-zoom preview for image thumbnails (task #127) ──
   The 150px thumbnail expands to a 480px floating popover when the user
   hovers the card. The popover overlays the surrounding grid via fixed
   position + high z-index. Pure CSS, no JS interop — works offline, no
   layout reflow. Pointer events on the zoom layer are disabled so the
   click still falls through to the card's @onclick="OpenFile" handler. */

/* ── Media area: "stand out" container behind the drawer tabs ──
   A neutral white wash was invisible on the dark default (the panel already
   sits on an elevated surface). Switched to a faint on-brand GOLD tint with a
   defined gold border + soft shadow — reads clearly as a distinct card on
   BOTH dark and light, and matches the app's bronze/gold accent so it looks
   intentional rather than like a stray box. */
.axiidom-media-area {
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.30);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .axiidom-media-area {
    background: rgba(212, 175, 55, 0.09);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.axiidom-media-image-wrap {
    position: relative;
}

.axiidom-media-image-wrap .axiidom-media-zoom {
    /* Hidden by default. Becomes visible + positioned on hover. */
    display: none;
    position: fixed;
    z-index: 9999;
    pointer-events: none;     /* never block clicks on the underlying card */
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 6px;
    /* Placement is RELATIVE TO THE CONTAINING BLOCK. The media grid lives
       inside the edit-slider drawer, which uses a CSS `transform` for its
       slide animation — and a transformed ancestor becomes the containing
       block for `position: fixed`. So vw/left:50% would be measured against
       the (narrow, right-anchored) drawer, throwing a 85vw box off-screen to
       the left. Using % width + symmetric left/right insets keeps the popover
       INSIDE that block (drawer when slid-in, viewport otherwise) with a small
       margin — never clipped. */
    top:    50%;
    left:   2%;
    right:  2%;
    width:  96%;
    height: 92vh;
    transform: translateY(-50%);
    box-sizing: border-box;
}

.axiidom-media-image-wrap:hover .axiidom-media-zoom {
    display: block;
}

/* Force the previewed content to fill the big popover. width/height:100%
   makes even a small image scale UP so it's actually readable; object-fit
   keeps the aspect ratio so nothing is distorted. */
.axiidom-media-image-wrap .axiidom-media-zoom img,
.axiidom-media-image-wrap .axiidom-media-zoom embed {
    width:  100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border: 0;
}

/* Belt-and-braces: thumbnail itself is not draggable. The HTML attribute
   draggable="false" on the <img> covers most browsers, but Firefox needs
   an extra hand. This deters drag-to-desktop "save image". NOT security
   — see docs/SECURITY_BOUNDARIES.md. */
.axiidom-media-thumb {
    -webkit-user-drag: none;
    -khtml-user-drag:  none;
    -moz-user-drag:    none;
    -o-user-drag:      none;
    user-select: none;
}