/* ============================================================
   emr FUSION 2.0 — EfGrid design tokens + base styles
   Import order: after infotim-global.css, before light/dark.
   ============================================================ */

/* ── Brand + semantic tokens ─────────────────────────────── */
:root {
  --ef-brand:#00A9E0; --ef-brand-600:#0090C2; --ef-brand-700:#0076A0;
  --ef-brand-300:#5BC5EB; --ef-brand-100:#D3F0FA; --ef-brand-050:#EAF8FD;
  --ef-positive:#1F9D55; --ef-positive-bg:#E3F4EA;
  --ef-warning-c:#C77700;  --ef-warning-bg:#FAEFD8;
  --ef-danger:#C8362C;   --ef-danger-bg:#FBE3E1;
  --ef-neutral-tag:#5A6B7B; --ef-neutral-bg:#EAEEF2;
  --ef-font-ui:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --ef-font-num:"IBM Plex Mono","SF Mono","Consolas",monospace;
  --ef-row-h:28px; --ef-row-h-grid:30px;
  --ef-radius:3px; --ef-radius-lg:6px;
  --ef-fs-xs:11px; --ef-fs-sm:12px; --ef-fs-md:13px; --ef-fs-lg:15px;
}

/* ── Light surface tokens ────────────────────────────────── */
:root, .ef-light {
  --ef-bg:#FFFFFF; --ef-bg-app:#F4F6F8; --ef-bg-panel:#FFFFFF;
  --ef-bg-subtle:#F7F9FB; --ef-bg-zebra:#F8FAFC;
  --ef-bg-row-hover:#EAF6FB; --ef-bg-row-sel:#D3F0FA;
  --ef-bg-header:#EEF2F5; --ef-bg-input:#FFFFFF;
  --ef-border:#DDE3E9; --ef-border-strong:#B9C3CD; --ef-divider:#E8ECF0;
  --ef-text:#14202E; --ef-text-2:#45556A; --ef-text-3:#7B8898;
  --ef-text-on-brand:#FFFFFF; --ef-link:#0076A0;
  --ef-focus-ring:0 0 0 2px rgba(0,169,224,.35);
  --ef-shadow-1:0 1px 0 rgba(20,32,46,.04),0 1px 2px rgba(20,32,46,.06);
  --ef-shadow-2:0 8px 28px rgba(20,32,46,.16),0 2px 6px rgba(20,32,46,.08);
}
/* ── Dark surface tokens ─────────────────────────────────── */
.ef-dark {
  --ef-bg:#1A1A1C; --ef-bg-app:#121214; --ef-bg-panel:#1E1E20;
  --ef-bg-subtle:#26262A; --ef-bg-zebra:#232327;
  --ef-bg-row-hover:#2A2A30; --ef-bg-row-sel:#34343A;
  --ef-bg-header:#25252A; --ef-bg-input:#1A1A1C;
  --ef-border:#33333A; --ef-border-strong:#46464E; --ef-divider:#2A2A2E;
  --ef-text:#ECECEE; --ef-text-2:#A8A8AD; --ef-text-3:#74747B;
  --ef-text-on-brand:#0B1A20; --ef-link:#5BC5EB;
  --ef-focus-ring:0 0 0 2px rgba(91,197,235,.45);
  --ef-shadow-1:0 1px 0 rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.4);
  --ef-shadow-2:0 10px 34px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5);
  /* Semantic tint overrides — semi-transparent so they read on dark surfaces */
  --ef-brand-050:rgba(0,169,224,.10); --ef-brand-100:rgba(0,169,224,.20);
  --ef-positive-bg:rgba(31,157,85,.18); --ef-warning-bg:rgba(199,119,0,.18);
  --ef-danger-bg:rgba(200,54,44,.20);  --ef-neutral-bg:rgba(166,181,197,.14);
}
/* Resize cursor helper */
body.fg-resizing,body.fg-resizing * { cursor:col-resize !important; user-select:none !important; }

/* ── Auto dark mode ──────────────────────────────────────────────────────── */
/* Three selectors cover all cases:                                            */
/*  1. link[href*="infotim-dark"]  — initial page load (TelerikThemeLink)     */
/*  2. link[id$="-dark"]           — LeptonX client-side switch to dark       */
/*  3. link[id$="-dim"]            — LeptonX client-side switch to dim        */
/* CSS :has() re-evaluates live on every DOM change — no JS needed.           */
:root:has(link[href*="infotim-dark"]) .efg-wrap,
:root:has(link[href*="infotim-dark"]) .ef-dp-wrap,
:root:has(link[href*="infotim-dark"]) .at-root,
:root:has(link[href*="infotim-dark"]) .wt-root,
:root:has(link[href*="infotim-dark"]) .ef-sp-wrap,
:root:has(link[href*="infotim-dark"]) .ef-img-wrap,
:root:has(link[href*="infotim-dark"]) .ef-confirm-wrap,
:root:has(link[href*="infotim-dark"]) .ef-page-fill,
:root:has(link[id$="-dark"]) .efg-wrap,
:root:has(link[id$="-dark"]) .ef-dp-wrap,
:root:has(link[id$="-dark"]) .at-root,
:root:has(link[id$="-dark"]) .wt-root,
:root:has(link[id$="-dark"]) .ef-sp-wrap,
:root:has(link[id$="-dark"]) .ef-img-wrap,
:root:has(link[id$="-dark"]) .ef-confirm-wrap,
:root:has(link[id$="-dark"]) .ef-page-fill,
:root:has(link[id$="-dim"]) .efg-wrap,
:root:has(link[id$="-dim"]) .ef-dp-wrap,
:root:has(link[id$="-dim"]) .at-root,
:root:has(link[id$="-dim"]) .wt-root,
:root:has(link[id$="-dim"]) .ef-sp-wrap,
:root:has(link[id$="-dim"]) .ef-img-wrap,
:root:has(link[id$="-dim"]) .ef-confirm-wrap,
:root:has(link[id$="-dim"]) .ef-page-fill {
  --dp-inrange-bg: rgba(0,169,224,.13);
  --ef-bg:#1A1A1C; --ef-bg-app:#121214; --ef-bg-panel:#1E1E20;
  --ef-bg-subtle:#26262A; --ef-bg-zebra:#232327;
  --ef-bg-row-hover:#2A2A30; --ef-bg-row-sel:#34343A;
  --ef-bg-header:#25252A; --ef-bg-input:#1A1A1C;
  --ef-border:#33333A; --ef-border-strong:#46464E; --ef-divider:#2A2A2E;
  --ef-text:#ECECEE; --ef-text-2:#A8A8AD; --ef-text-3:#74747B;
  --ef-text-on-brand:#0B1A20; --ef-link:#5BC5EB;
  --ef-focus-ring:0 0 0 2px rgba(91,197,235,.45);
  --ef-shadow-1:0 1px 0 rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.4);
  --ef-shadow-2:0 10px 34px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5);
  /* Semantic tint overrides */
  --ef-brand-050:rgba(0,169,224,.10); --ef-brand-100:rgba(0,169,224,.20);
  --ef-positive-bg:rgba(31,157,85,.18); --ef-warning-bg:rgba(199,119,0,.18);
  --ef-danger-bg:rgba(200,54,44,.20);  --ef-neutral-bg:rgba(166,181,197,.14);
}

/* ── EfComboBox ─────────────────────────────────────────────────────────────── */
.ef-combo { position:relative; width:100%; }
/* Right padding for the icon (chevron or clear button) */
.ef-combo input.ef-combo-inp { padding-right:24px; cursor:pointer; }
/* Editable when open */
.ef-combo.open input.ef-combo-inp { cursor:text; }
/* Chevron — pointer-events:none so it doesn't block clicks */
.ef-combo-chevron {
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--ef-text-3);
  transition:transform 120ms;
}
.ef-combo.open .ef-combo-chevron { transform:translateY(-50%) rotate(180deg); }
/* Clear button — same position as chevron (they toggle) */
.ef-combo-clr {
  position:absolute; right:3px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; display:grid; place-items:center;
  border:none; background:transparent; color:var(--ef-text-3);
  cursor:pointer; border-radius:2px; padding:0;
}
.ef-combo-clr:hover { background:var(--ef-bg-subtle); color:var(--ef-text); }

/* ── EfSelect custom dropdown ───────────────────────────────────────────────── */
.ef-select { position:relative; width:100%; }
.ef-select-trig { width:100%; height:26px; padding:0 6px; display:flex; align-items:center; justify-content:space-between; gap:4px; cursor:pointer; text-align:left; transition:border-color 80ms; }
.ef-select-trig:disabled { opacity:.55; cursor:not-allowed; }
.ef-select-trig:not(:disabled):hover { background:var(--ef-bg-subtle); }
.ef-select-trig:focus { outline:none; border-color:var(--ef-brand); box-shadow:var(--ef-focus-ring); }
.ef-select-val { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.ef-select-chevron { flex:0 0 auto; color:var(--ef-text-3); transition:transform 120ms; }
.ef-select.open .ef-select-chevron { transform:rotate(180deg); }
/* Clear (×) button inside the trigger — span so it can nest inside <button> */
.ef-select-clr { flex:0 0 auto; display:inline-grid; place-items:center; width:16px; height:16px; border-radius:2px; color:var(--ef-text-3); cursor:pointer; }
.ef-select-clr:hover { background:var(--ef-bg-subtle); color:var(--ef-text); }
/* Backdrop — blocks page while drop is open */
.ef-select-bd { position:fixed; inset:0; z-index:499; }
/* Drop list — fixed so it escapes overflow:auto parents */
.ef-select-drop { position:fixed; z-index:500; background:var(--ef-bg-panel); border:1px solid var(--ef-border-strong); border-radius:var(--ef-radius-lg); box-shadow:var(--ef-shadow-2); overflow-y:auto; max-height:220px; padding:4px; }
.ef-select-opt { padding:6px 8px; border-radius:var(--ef-radius); cursor:pointer; font-size:var(--ef-fs-sm); color:var(--ef-text); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.ef-select-opt:hover, .ef-select-opt.active { background:var(--ef-bg-subtle); }
.ef-select-opt.sel { background:color-mix(in srgb, var(--ef-brand) 16%, transparent); color:var(--ef-brand); font-weight:600; }
.ef-select-search { width:100%; margin-bottom:4px; box-sizing:border-box; }
.ef-select-noresults { padding:6px 8px; font-size:var(--ef-fs-sm); color:var(--ef-text-3); }

/* Height reserved for the app chrome above/below the page (LeptonX header + breadcrumb +
   content padding). Single knob for every full-height page wrapper — bump it if the editor
   drawer's footer is clipped below the viewport, lower it if a gap appears at the bottom. */
:root { --ef-app-chrome: 120px; }

/* Full-height page wrapper: lets the grid/detail panel fill the viewport so the auto
   page-size observer measures the real height instead of collapsing to min-content. */
.ef-page-fill { flex:1 1 auto; min-width:0; min-height:calc(100dvh - var(--ef-app-chrome)); display:flex; flex-direction:column; }

/* ── Editor form field layout ───────────────────────────────────────────────── */
/* .fg-field: right-aligned 104px label + flex input (matches design spec exactly) */
.fg-field { display:grid; grid-template-columns:104px 1fr; align-items:center; gap:8px; margin-bottom:7px; }
.fg-field > label { font-size:var(--ef-fs-sm); color:var(--ef-text-2); text-align:right; }
.fg-section-lbl { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ef-text-3); margin:14px 0 8px; padding-top:10px; border-top:1px solid var(--ef-divider); }
.fg-section-lbl.first { margin-top:0; padding-top:0; border-top:none; }

/* ── Input styles (used by EfTextBox / EfNumericBox / EfTextArea) ──────────── */
.fg-input { height:26px; width:100%; min-width:0; padding:0 8px; background:var(--ef-bg-input); border:1px solid var(--ef-border); border-radius:var(--ef-radius); color:var(--ef-text); font:400 var(--ef-fs-sm)/1 var(--ef-font-ui); box-sizing:border-box; transition:border-color 80ms; }
.fg-input:focus { outline:none; border-color:var(--ef-brand); box-shadow:var(--ef-focus-ring); }
.fg-input:disabled { opacity:.55; background:var(--ef-bg-subtle); cursor:not-allowed; }
.fg-input-mono { font-family:var(--ef-font-num); font-feature-settings:"tnum" 1; }
.fg-input-invalid, .fg-input-invalid:focus { border-color:var(--ef-danger); background:var(--ef-danger-bg); }
.fg-textarea { height:auto; min-height:60px; padding:5px 8px; resize:vertical; }

/* ── Button styles (global so fg-btn works in any component, not just EfGrid) ── */
.fg-btn { height:var(--ef-row-h); padding:0 10px; border-radius:var(--ef-radius); border:1px solid var(--ef-border-strong); background:var(--ef-bg-panel); color:var(--ef-text); font:600 var(--ef-fs-sm)/1 var(--ef-font-ui); display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; transition:background 80ms,border-color 80ms; }
.fg-btn:hover { background:var(--ef-bg-subtle); }
.fg-btn:disabled { opacity:.45; cursor:default; pointer-events:none; }
.fg-btn:disabled:hover { background:var(--ef-bg-panel); }
.fg-btn-primary { background:var(--ef-brand); border-color:var(--ef-brand-600); color:#fff; }
.fg-btn-primary:hover { background:var(--ef-brand-600); border-color:var(--ef-brand-700); }
.fg-btn svg { width:14px; height:14px; }
.fg-btn .del-ic { color:var(--ef-danger); }
/* Footer buttons: full-width, centered */
.fg-ed-foot .fg-btn { flex:1; justify-content:center; height:var(--ef-row-h); }

/* ── Global SVG size rules (fallback for MarkupString SVGs that lack Blazor scope attr) ── */
.fg-iconbtn { width:var(--ef-row-h); height:var(--ef-row-h); display:inline-grid; place-items:center; border:1px solid transparent; background:transparent; color:var(--ef-text-2); border-radius:var(--ef-radius); cursor:pointer; }
.fg-iconbtn:hover  { background:var(--ef-bg-subtle); color:var(--ef-text); }
.fg-iconbtn.active { border-color:var(--ef-brand); color:var(--ef-brand); }
.fg-iconbtn svg { width:15px; height:15px; }
.fg-iconbtn.spin svg { animation:fg-spin .6s linear; }
.fg-iconbtn:disabled { opacity:.4; cursor:default; pointer-events:none; }
/* Semantic icon colours used by EfEditorButtons */
.ef-ic-add { color:var(--ef-positive); }
.ef-ic-del { color:var(--ef-danger); }
.ef-ed-btns { display:inline-flex; align-items:center; gap:2px; }
.fg-btn     svg { width:14px; height:14px; }
.th-funnel  svg { width:14px; height:14px; }
.th-sort    svg { width:14px; height:14px; }
.fg-pop .mi svg { width:14px; height:14px; flex:0 0 auto; }
.fg-pg      svg { width:14px; height:14px; }
.fg-search .s-ico svg { width:14px; height:14px; }
.fg-search .clr  svg { width:12px; height:12px; }
.fg-title       svg { width:14px; height:14px; flex:0 0 auto; }
.fg-ed-head .ttl svg { width:15px; height:15px; flex:0 0 auto; }

/* ── Chart series palette (mirrors dashboard-charts design tokens) ──────── */
:root {
  --st-green:  #5cb85c;
  --st-blue:   #3a86c8;
  --st-cyan:   #19b3d3;
  --st-purple: #8e44ad;
  --st-magenta:#e6157f;
  --st-dark:   #3a3f44;
  --st-red:    #d9534f;
  --st-orange: #ef8c1f;
}

/* ── EfBadge — global so any component can render badges, not just EfGrid ── */
.ef-badge { display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:2px; font:600 10px/1 var(--ef-font-ui); letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
/* light mode */
.badge-pos     { background:var(--ef-positive-bg);  color:var(--ef-positive); }
.badge-warn    { background:var(--ef-warning-bg);   color:var(--ef-warning-c); }
.badge-bad     { background:var(--ef-danger-bg);    color:var(--ef-danger); }
.badge-info    { background:color-mix(in srgb, var(--ef-brand) 16%, transparent); color:var(--ef-brand); }
.badge-neutral { background:var(--ef-neutral-bg);   color:var(--ef-neutral-tag); }
/* dark mode — semi-transparent tints so the badge reads well on dark surfaces */
:root:has(link[href*="infotim-dark"]) .badge-pos,
:root:has(link[id$="-dark"]) .badge-pos,
:root:has(link[id$="-dim"]) .badge-pos    { background:rgba(31,157,85,.18);   color:#6FD79B; }
:root:has(link[href*="infotim-dark"]) .badge-warn,
:root:has(link[id$="-dark"]) .badge-warn,
:root:has(link[id$="-dim"]) .badge-warn   { background:rgba(199,119,0,.18);   color:#F2B85B; }
:root:has(link[href*="infotim-dark"]) .badge-bad,
:root:has(link[id$="-dark"]) .badge-bad,
:root:has(link[id$="-dim"]) .badge-bad    { background:rgba(200,54,44,.20);   color:#F08077; }
:root:has(link[href*="infotim-dark"]) .badge-info,
:root:has(link[id$="-dark"]) .badge-info,
:root:has(link[id$="-dim"]) .badge-info   { background:rgba(0,169,224,.18);   color:#5BC5EB; }
:root:has(link[href*="infotim-dark"]) .badge-neutral,
:root:has(link[id$="-dark"]) .badge-neutral,
:root:has(link[id$="-dim"]) .badge-neutral{ background:rgba(166,181,197,.14); color:#A6B5C5; }

/* Asset-coloured badge (WO infrastructure/custom types): same translucent-tint design as the
   variants above, driven by the --wo-asset hue. Dark theme lightens the text so any hue stays legible. */
.badge-asset { background:color-mix(in srgb, var(--wo-asset) 16%, transparent); color:var(--wo-asset); }
:root:has(link[href*="infotim-dark"]) .badge-asset,
:root:has(link[id$="-dark"]) .badge-asset,
:root:has(link[id$="-dim"]) .badge-asset { background:color-mix(in srgb, var(--wo-asset) 22%, transparent); color:color-mix(in srgb, var(--wo-asset), white 65%); }

/* EfBadge's Color-based tint (status/priority/reading-type/field-point-type badges, e.g. the
   WOrder status "New"/"Exported" badges on FieldPoints & FieldPointManagement): --badge-color
   carries the RAW hue (EfBadge.razor), not the light-mode-darkened text colour that's inlined for
   the base style — re-deriving from the raw hue here handles both extremes correctly (a near-white
   hue like New's #EBEBEB, and a near-black hue like Exported's #3D3D3D). !important is required
   because the light-mode colour is set inline (higher specificity than any class selector). */
:root:has(link[href*="infotim-dark"]) .ef-badge-tint,
:root:has(link[id$="-dark"]) .ef-badge-tint,
:root:has(link[id$="-dim"]) .ef-badge-tint { color:color-mix(in srgb, var(--badge-color), white 65%) !important; }

/* ── EfAreaChart ─────────────────────────────────────────────────────────── */
.ef-chart { width:100%; height:100%; position:relative; display:flex; flex-direction:column; }
.ef-chart-empty { flex:1 1 auto; display:flex; align-items:center; justify-content:center; color:var(--ef-text-3); font-size:var(--ef-fs-sm); }

/* ── EfBoolIcon / EfUser ─────────────────────────────────────────────────── */
.ef-boolicon { display:inline-flex; align-items:center; justify-content:center; }
.ef-boolicon.ok  { color:var(--ef-positive); }
.ef-boolicon.no  { color:var(--ef-danger); }
.ef-user { display:inline-flex; align-items:center; gap:5px; min-width:0; }
.ef-user svg { color:var(--ef-text-3); flex-shrink:0; }
.ef-user > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ef-user.muted { color:var(--ef-text-3); }

/* ── EfCheckBox ───────────────────────────────────────────────────────────── */
.ef-checkbox { width:15px; height:15px; accent-color:var(--ef-brand); cursor:pointer; }
.ef-checkbox:disabled { cursor:not-allowed; }

/* ── EfSwitch ─────────────────────────────────────────────────────────────── */
.ef-switch { display:inline-block; width:34px; height:18px; padding:0; border:none; border-radius:9px; background:var(--ef-border-strong); position:relative; vertical-align:middle; cursor:pointer; }
.ef-switch.on { background:var(--ef-brand); }
.ef-switch:disabled { cursor:not-allowed; }
.ef-switch-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s; }
.ef-switch.on .ef-switch-thumb { left:18px; }

/* ── EfProgressBar ───────────────────────────────────────────────────────── */
.ef-progress { height:8px; border-radius:4px; background:var(--ef-border); overflow:hidden; }
.ef-progress-fill { height:100%; border-radius:4px; transition:width .3s; }

/* ── Tile section headers (used in FieldPointDetail) ─────────────────────── */
.ef-tile-head { height:38px; display:flex; align-items:center; gap:8px; padding:0 12px; background:var(--ef-bg-header); border-bottom:1px solid var(--ef-border); flex-shrink:0; }
.ef-tile-title { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:var(--ef-fs-md); color:var(--ef-brand); white-space:nowrap; }
.ef-tile-title svg { width:15px; height:15px; flex-shrink:0; }
.ef-tile-head .fg-sep { margin:0 4px; }
.ef-tile-actions { margin-left:auto; display:inline-flex; align-items:center; gap:6px; }

/* ── CSS spinner (replaces TelerikLoaderContainer) ───────────────────────── */
.ef-spinner-wrap { display:flex; align-items:center; justify-content:center; }
.ef-spinner { width:36px; height:36px; border:3px solid var(--ef-border); border-top-color:var(--ef-brand); border-radius:50%; animation:ef-spin .7s linear infinite; }
@keyframes ef-spin { to { transform:rotate(360deg); } }

/* ── EfTabStrip ───────────────────────────────────────────────────────────── */
.ef-tabs { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.ef-tabs-strip { display:flex; border-bottom:1px solid var(--ef-border); background:var(--ef-bg-header); flex-shrink:0; overflow-x:auto; }
.ef-tabs-tab { height:36px; padding:0 16px; border:none; border-bottom:2px solid transparent; background:transparent; color:var(--ef-text-2); font:500 var(--ef-fs-sm)/1 var(--ef-font-ui); cursor:pointer; white-space:nowrap; transition:color 80ms,border-color 80ms; flex-shrink:0; }
.ef-tabs-tab:hover:not(:disabled) { color:var(--ef-text); background:var(--ef-bg-subtle); }
.ef-tabs-tab.active { color:var(--ef-brand); border-bottom-color:var(--ef-brand); }
.ef-tabs-tab.disabled,.ef-tabs-tab:disabled { opacity:.45; cursor:not-allowed; }
.ef-tabs-body { flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.ef-tabs-pane { display:none; }
.ef-tabs-pane.active { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; overflow:hidden; }
/* Scrollable wrapper used inside tabs whose content can exceed the pane height */
.ef-tab-scroll { flex:1 1 auto; min-height:0; overflow:auto; }

/* ── Tile grid layout (replaces TelerikTileLayout) ───────────────────────── */
.ef-tile-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; padding:6px; align-content:start; }
.ef-tile { position:relative; display:flex; flex-direction:column; background:var(--ef-bg-panel); border:1px solid var(--ef-border); border-radius:var(--ef-radius); overflow:hidden; min-height:0; }
.ef-tile-loading { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--ef-bg-panel) 55%, transparent); }
.ef-tile-body { flex:1 1 auto; min-height:0; overflow:auto; padding:8px; }
.ef-tile.tile-with-overflow .ef-tile-body { overflow:visible; }

/* ── EfMultiSelect ───────────────────────────────────────────────────────── */
.ef-msel { position:relative; width:100%; }
.ef-msel-trig { min-height:26px; height:auto; display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding:2px 24px 2px 6px; cursor:pointer; position:relative; }
.ef-msel-trig.disabled { opacity:.55; pointer-events:none; }
.ef-msel-tag { display:inline-flex; align-items:center; gap:3px; background:color-mix(in srgb, var(--ef-brand) 16%, transparent); color:var(--ef-brand); border-radius:var(--ef-radius); padding:0 5px; font-size:var(--ef-fs-xs); height:18px; flex-shrink:0; }
.ef-msel-tag-rm { border:none; background:transparent; color:inherit; cursor:pointer; padding:0; line-height:1; font-size:12px; opacity:.7; }
.ef-msel-tag-rm:hover { opacity:1; }
.ef-msel-more { font-size:var(--ef-fs-xs); color:var(--ef-text-3); background:var(--ef-bg-subtle); border-radius:var(--ef-radius); padding:0 5px; height:18px; display:inline-flex; align-items:center; }
.ef-msel-placeholder { color:var(--ef-text-3); font-size:var(--ef-fs-sm); flex:1; }
.ef-msel-right,.ef-msel-chevron { position:absolute; right:5px; top:50%; transform:translateY(-50%); color:var(--ef-text-3); display:grid; place-items:center; }
.ef-msel-right { width:16px; height:16px; border-radius:2px; cursor:pointer; }
.ef-msel-right:hover { background:var(--ef-bg-subtle); color:var(--ef-text); }
.ef-msel-opt { display:flex; align-items:center; gap:8px; }
.ef-msel.open .ef-msel-chevron { transform:translateY(-50%) rotate(180deg); }

/* ═════════  Field Points Map page (fpm-*)  ═════════ */

/* Toolbar (global copies of the EfGrid-scoped .fg-toolbar row so it works outside EfGrid) */
/* No overflow-x:auto here: it would also clip vertically (spec: auto on one axis forces the
   other), hiding the Status/Types/Layers dropdown panels that hang below the toolbar. */
.fpm-toolbar { display:flex; align-items:center; gap:5px; flex-wrap:nowrap; height:38px; flex:0 0 auto; min-width:0;
               padding:0 10px; background:var(--ef-bg-panel); border-bottom:1px solid var(--ef-border); }
.fpm-toolbar-sep { width:1px; height:18px; background:var(--ef-border); margin:0 3px; flex:0 0 auto; }
.fpm-toolbar-grow { flex:1 1 auto; }

/* Segmented control (Color by) */
.ef-seg { display:inline-flex; border:1px solid var(--ef-border); border-radius:var(--ef-radius); overflow:hidden; height:24px; background:var(--ef-bg-panel); }
.ef-seg-btn { height:22px; padding:0 9px; border:none; background:transparent; color:var(--ef-text-2); font:500 var(--ef-fs-xs)/1 var(--ef-font-ui); cursor:pointer; }
.ef-seg-btn + .ef-seg-btn { border-left:1px solid var(--ef-border); }
.ef-seg-btn.on { background:var(--ef-bg-row-sel); color:var(--ef-brand-700); font-weight:700; }

/* Layout */
/* Initial fallback height; the exact fill is measured/applied by FillToParentBottom (JS). */
.fpm-wrap { flex:1 1 auto; min-width:0; height:calc(100dvh - var(--ef-app-chrome)); display:flex; flex-direction:column; }
.fpm-body { flex:1; display:flex; min-height:0; }
.fpm-map { flex:1; position:relative; overflow:hidden; border-right:1px solid var(--ef-border); min-width:0; }
.fpm-map-canvas { width:100%; height:100%; position:absolute; inset:0; }

/* Toolbar bits */
/* Enabled-toggle shade (matches the ef-seg on-state). */
.fpm-btn-on { background:var(--ef-bg-row-sel); border-color:var(--ef-border-strong); }
.fpm-title { display:flex; align-items:center; gap:6px; font-weight:600; font-size:12px; color:var(--ef-brand); }
.fpm-count { color:var(--ef-text-3); font-size:11px; }
.fpm-colorby { display:flex; align-items:center; gap:6px; }

/* Filter popover (EfFilterPopover) */
.ef-fpop { position:relative; }
.ef-fpop-overlay { position:fixed; inset:0; z-index:18; }
.ef-fpop-panel { position:absolute; top:calc(100% + 6px); left:0; z-index:19; width:236px; background:var(--ef-bg-panel);
           border:1px solid var(--ef-border); border-radius:var(--ef-radius); box-shadow:var(--ef-shadow-2); padding:8px 0; }
.ef-fpop-panel.right { left:auto; right:0; width:280px; }
.ef-fpop-head { display:flex; align-items:center; justify-content:space-between; padding:0 12px 7px; margin-bottom:5px;
                border-bottom:1px solid var(--ef-divider); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ef-text-3); }
.ef-fpop-badge { margin-left:2px; color:var(--ef-text-3); }
.ef-fpop-link { border:none; background:none; padding:0 0 0 8px; cursor:pointer; font-size:11px; color:var(--ef-link); }
.ef-fpop-link.muted { color:var(--ef-text-3); }

/* Toggle row (EfToggleRow) */
.ef-trow { display:flex; align-items:center; gap:9px; padding:5px 12px; cursor:pointer; font-size:12px; color:var(--ef-text-2); }
.ef-trow-label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Empty state (EfEmptyState) */
.ef-empty { flex:1; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; padding:14px; text-align:center; color:var(--ef-text-3); font-size:12px; }
.ef-empty svg { color:var(--ef-border-strong); }
.ef-empty.compact { flex:none; display:block; padding:10px 12px; font-size:11px; }

/* Key–value row (EfKv) */
.ef-kv { display:grid; grid-template-columns:92px 1fr; gap:8px; font-size:12px; }
.ef-kv > span:first-child { color:var(--ef-text-3); }
.ef-kv > span:last-child { color:var(--ef-text); }

/* Swatches / asset-type chip (EfAssetTypeChip) */
.ef-swatch-dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.12) inset; }
.ef-swatch-sq { width:10px; height:10px; border-radius:2px; flex:0 0 auto; }
.ef-atchip { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:4px; color:#fff; flex:0 0 auto; }
.ef-atchip.sm { width:14px; height:14px; }
.ef-atchip svg { width:12px; height:12px; }
.ef-atchip.sm svg { width:10px; height:10px; }

/* Zoom / scale */
.fpm-zoom { position:absolute; top:10px; right:10px; display:flex; flex-direction:column; background:var(--ef-bg-panel);
            border:1px solid var(--ef-border); border-radius:var(--ef-radius); box-shadow:var(--ef-shadow-1); z-index:5; }
.fpm-zoom .fg-iconbtn { width:26px; height:26px; border-radius:0; }
.fpm-zoom .fg-iconbtn:first-child { border-bottom:1px solid var(--ef-border); }
/* Host for the OpenLayers ScaleLine control (neutralise OL's own absolute positioning). */
.fpm-scale { position:absolute; left:10px; bottom:10px; font-size:10px; z-index:5;
             color:var(--ef-text-2); background:var(--ef-bg-panel); padding:3px 8px; border-radius:3px; border:1px solid var(--ef-border); font-family:var(--ef-font-num); }
.fpm-scale:empty { display:none; }
.fpm-scale .ol-scale-line { position:static; background:transparent; padding:0; }
.fpm-scale .ol-scale-line-inner { border:1px solid var(--ef-text-2); border-top:none; color:var(--ef-text-2); font-size:10px; }

/* Legend */
.fpm-legend { position:absolute; left:10px; top:10px; background:var(--ef-bg-panel); border:1px solid var(--ef-border);
              border-radius:var(--ef-radius); padding:7px 9px; box-shadow:var(--ef-shadow-1); min-width:150px; z-index:5; }
.fpm-legend-h { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ef-text-3); margin-bottom:5px; }
.fpm-legend-sep { margin-top:8px; padding-top:6px; border-top:1px solid var(--ef-divider); }
.fpm-legend-row { display:flex; align-items:center; gap:6px; font-size:11px; padding:1px 0; cursor:pointer; color:var(--ef-text-2); }
.fpm-legend-row.off { opacity:.4; }
.fpm-legend-label { flex:1; white-space:nowrap; }

/* Side panel */
.fpm-side { width:320px; flex:0 0 320px; background:var(--ef-bg-panel); display:flex; flex-direction:column; min-height:0; }
.fpm-side-head { padding:10px 12px; border-bottom:1px solid var(--ef-border); display:flex; align-items:flex-start; gap:8px; }
.fpm-side-head-main { flex:1; min-width:0; }
.fpm-side-name { font-weight:700; font-size:13px; line-height:1.2; }
.fpm-side-code { font-size:11px; color:var(--ef-text-3); margin-top:2px; }
.fpm-side-badges { margin-top:5px; display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.fpm-side-body { flex:1; overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
/* Compact copy-value button next to GIS attribute values (id/uuid-looking ones only). */
.fpm-copy-btn { width:20px; height:20px; margin-left:6px; vertical-align:middle; }
.fpm-copy-btn svg { width:12px; height:12px; }
.fpm-side-sech { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ef-text-3); margin-bottom:2px; }
.fpm-side-sech.sep { margin-top:8px; padding-top:10px; border-top:1px solid var(--ef-divider); }
.fpm-side-sech-count { display:flex; align-items:center; justify-content:space-between; }
.fpm-side-empty-note { font-size:11px; color:var(--ef-text-3); }
.fpm-wo-row { display:flex; align-items:center; gap:7px; padding:5px 0; border-bottom:1px solid var(--ef-divider); font-size:11px; }
.fpm-wo-code { color:var(--ef-link); flex:0 0 auto; }
.fpm-wo-type { flex:1; min-width:0; }
/* Let a long WO-type label (e.g. "District heating check") wrap to show in full instead of clipping. */
.fpm-wo-type .ef-badge { white-space:normal; height:auto; min-height:18px; line-height:1.35; }
.fpm-side-foot { padding:8px 12px; border-top:1px solid var(--ef-border); display:flex; gap:6px; }
.fpm-open-card { flex:1; justify-content:center; }