html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Outfit', 'Segoe UI', -apple-system, sans-serif;
    font-feature-settings: 'ss01' on, 'cv11' on;
    -webkit-font-smoothing: antialiased;
    background: var(--tm-paper);
    color: var(--tm-ink);
}

#app {
    height: 100vh;
}

/* Pre-Blazor boot splash */
.loading-shell {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--tm-paper);
    color: var(--tm-forest);
}

.loading-mark { font-size: 4rem; }
.loading-text { font-size: 1rem; letter-spacing: .04em; }
.loading-hint {
    max-width: 30rem;
    padding: 0 1rem;
    text-align: center;
    font-size: .9rem;
    line-height: 1.45;
    color: #4A5645;
}
.loading-hint:empty { display: none; }
.loading-failed .loading-text { font-size: 1.2rem; font-weight: 600; color: #8A2A1B; }
.loading-retry {
    padding: .55rem 1.4rem;
    border: 0;
    border-radius: 6px;
    background: #2D4A2B;
    color: #fff;
    font: inherit;
    cursor: pointer;
}
.loading-retry:hover { background: #1F3520; }

/* Server reachability on the boot splash (js/boot-status.js). */
.boot-server {
    position: absolute;
    bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(45, 74, 43, .06);
    font-size: .82rem;
    color: #4A5645;
}
.boot-server-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: #B5A98A;
}
.boot-server[data-state="checking"] .boot-server-dot { animation: tm-boot-pulse 1.2s ease-in-out infinite; }
.boot-server[data-state="up"] .boot-server-dot { background: #3E8E41; }
.boot-server[data-state="down"] .boot-server-dot { background: #C0392B; }
@keyframes tm-boot-pulse { 50% { opacity: .3; } }

/* The map fills its host; MudBlazor main content has no padding so the map is edge-to-edge. */
.tm-map-host {
    position: relative;
    width: 100%;
    height: 100%;
}

.maplibregl-map { font-family: inherit; }

/* Ribbon: icon-over-text Office-style buttons */
.tm-ribbon-group {
    display: inline-flex;
    align-items: flex-start;
    gap: .25rem;
    padding: .25rem .5rem;
    border-right: 1px solid var(--mud-palette-divider);
    height: 100%;
}

.tm-ribbon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
}

.tm-ribbon-btn .mud-icon-root { font-size: 1.6rem; }
.tm-ribbon-btn .tm-ribbon-label { font-size: .7rem; margin-top: .15rem; }

.login-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #4CAF50 100%);
}

.tm-tool-active {
    border-left: 3px solid var(--mud-palette-secondary);
    background: var(--mud-palette-action-default-hover);
}

/* Notification bell panel (TREEMATRIX-82): unread = tinted + dot + bold title, read = greyed out. */
.tm-notif-panel {
    width: min(380px, calc(100vw - 32px));
    max-height: 520px;
    overflow-y: auto;
}

.tm-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
}

.tm-notif-muted { color: var(--mud-palette-text-secondary); }

.tm-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.5rem 1rem;
    color: var(--mud-palette-text-secondary);
}

.tm-notif-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem 1.75rem .6rem .75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid transparent;
    cursor: pointer;
}

.tm-notif-item:hover,
.tm-notif-item:focus-visible {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.tm-notif-item:focus-visible { box-shadow: inset 0 0 0 2px var(--mud-palette-primary); }

.tm-notif-unread {
    background: rgba(var(--mud-palette-primary-rgb), .08);
    border-left-color: var(--mud-palette-primary);
}

.tm-notif-read { color: var(--mud-palette-text-secondary); }
.tm-notif-read .tm-notif-title { font-weight: 400; }

.tm-notif-icon { margin-top: .15rem; flex: none; }
.tm-notif-main { min-width: 0; flex: 1; }

.tm-notif-meta {
    display: flex;
    gap: .3rem;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.tm-notif-title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.tm-notif-body {
    font-size: .8rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.tm-notif-link {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    color: var(--mud-palette-primary);
    margin-top: .15rem;
}

.tm-notif-dot {
    position: absolute;
    top: .85rem;
    right: .75rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20000;
    padding: .8rem 3rem .8rem 1.2rem;
    background: #ffefc2;
    color: #1F2A1C;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}

#blazor-error-ui .reload {
    margin-left: .8rem;
    font-weight: 600;
    color: #2D4A2B;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .8rem;
    top: .6rem;
}

/* ===========================================================================
   TreeMatrix shell — paper-and-ink / botanical editorial (Etap 1)
   Tokens & component CSS distilled from the mockup.
   See docs/mockups/treematrix-design-tokens.md. Classes are tm- prefixed.
   =========================================================================== */
:root {
    /* Paper / ink */
    --tm-paper: #FAF7F0;
    --tm-paper-deeper: #F2EDDF;
    --tm-paper-warm: #F5F0E1;
    --tm-ink: #1F2A1C;
    --tm-ink-soft: #4A5645;
    /* AA 4.5:1 na papierze i papierze głębszym (#F2EDDF); wcześniej #8B928A dawał ok. 3,1:1 (axe color-contrast). */
    --tm-ink-muted: #5F665E;
    --tm-ink-faded: #B5B5AA;
    --tm-rule: #DBD5C5;
    --tm-rule-soft: #E8E2D0;
    /* Botanical accents */
    --tm-forest: #2D4A2B;
    --tm-forest-deep: #1F3520;
    --tm-forest-glow: rgba(45, 74, 43, 0.08);
    --tm-moss: #6B7F4B;
    --tm-sage: #ABBFA0;
    /* Status (aged, not neon) */
    --tm-ochre: #B85842;   --tm-ochre-bg: #F4DDD3;
    --tm-mustard: #C89A3F; --tm-mustard-bg: #F4E8CB;
    --tm-olive: #7A8F5A;   --tm-olive-bg: #E5EAD3;
    /* Map */
    --tm-map-bg: #E8E4D4;
    /* Type */
    --tm-serif: 'Fraunces', Georgia, serif;
    --tm-sans: 'Outfit', -apple-system, sans-serif;
    --tm-mono: 'JetBrains Mono', monospace;
}

.tm-serif { font-family: var(--tm-serif); font-feature-settings: 'ss01', 'ss03'; }
.tm-mono { font-family: var(--tm-mono); }
.tm-italic-latin { font-family: var(--tm-serif); font-style: italic; font-weight: 400; }

/* Paper grain overlay — subtle, multiplied over everything */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' /%3E%3C/svg%3E");
}

/* === TOP BAR === */
.tm-topbar {
    height: 56px;
    background: var(--tm-paper);
    /* Color.Inherit icons (bell, theme switch) otherwise inherit body's colour, which sits outside the
       .tm-dark variable scope — dark glyphs on the dark bar. */
    color: var(--tm-ink);
    border-bottom: 0.5px solid var(--tm-rule);
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 36px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.tm-brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--tm-serif);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--tm-ink);
}
.tm-brand-mark {
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 3px;
}
.tm-brand sup {
    font-size: 10px;
    font-family: var(--tm-mono);
    color: var(--tm-ink-muted);
    letter-spacing: 0.05em;
    font-weight: 400;
    margin-left: -2px;
}
.tm-topnav {
    display: flex;
    gap: 28px;
    align-items: center;
    font-size: 13.5px;
    color: var(--tm-ink-soft);
    /* The sections shrink and scroll inside the bar instead of pushing the bell and the user menu
       (with "Wyloguj") off-screen on 1024-1440px laptops (hardening H-050). */
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    white-space: nowrap;
    align-self: stretch;
}
.tm-topnav::-webkit-scrollbar { display: none; }
@media (max-width: 1500px) { .tm-topbar { gap: 20px; padding: 0 20px; } .tm-topnav { gap: 18px; } }
.tm-top-actions, .tm-brand { flex-shrink: 0; }
/* The unread count sat 4px above the window's top edge (hardening H-062). */
.tm-top-actions .mud-badge.mud-badge-overlap { transform: translateY(8px); }
.tm-nav-toggle {
    display: none;
    background: none; border: 0; padding: 6px; margin-left: -6px;
    color: var(--tm-ink); cursor: pointer; flex-shrink: 0;
}
.tm-topnav a {
    color: var(--tm-ink-soft);
    text-decoration: none;
    padding: 4px 0;
    position: relative;
    transition: color 0.15s;
}
.tm-topnav a:hover { color: var(--tm-ink); }
.tm-topnav a.active { color: var(--tm-ink); font-weight: 500; }
/* Nav items for sections not yet built — visible for fidelity, non-navigating */
.tm-topnav a.tm-nav-soon { color: var(--tm-ink-muted); cursor: default; }
.tm-topnav a.tm-nav-soon:hover { color: var(--tm-ink-muted); }
/* Sections outside the tenant's plan: still clickable (they open an explanation), visibly unavailable */
.tm-topnav a.tm-nav-locked { color: var(--tm-ink-muted); display: inline-flex; align-items: center; gap: 4px; }
.tm-topnav a.tm-nav-locked:hover { color: var(--tm-ink-soft); }
.tm-nav-lock { flex: none; opacity: 0.8; }

/* Inline correction of a rejected import row (import detail page) */
.tm-row-fix { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-width: 360px; }
/* Links fill the bar's height so the active underline sits on its bottom edge inside the (scrolling) nav. */
.tm-topnav a { display: inline-flex; align-items: center; align-self: stretch; flex-shrink: 0; }
.tm-topnav a.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--tm-forest);
}
.tm-top-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* === PILLS === */
.tm-pill {
    background: var(--tm-ochre-bg);
    color: var(--tm-ochre);
    font-size: 11.5px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* One line, never taller than the bar: a long text wrapped into four lines (hardening H-068). */
    white-space: nowrap;
    flex-shrink: 0;
}
.tm-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--tm-ochre); }
.tm-pill-mustard { background: var(--tm-mustard-bg); color: var(--tm-mustard); }
.tm-pill-mustard::before { background: var(--tm-mustard); }
.tm-pill-olive { background: var(--tm-olive-bg); color: var(--tm-olive); }
.tm-pill-olive::before { background: var(--tm-olive); }

.tm-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--tm-forest);
    color: var(--tm-paper);
    font-size: 11.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tm-serif);
    letter-spacing: 0.02em;
    cursor: pointer;
}

/* Content region below the sticky top bar */
.tm-shell-body {
    height: calc(100vh - 56px);
    overflow: hidden;
}

/* Support session (operator inside a customer's data): a fixed-height strip under the top bar, so the
   body below can keep an exact height. */
.tm-support-session {
    height: 40px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFF3CD;
    color: #5C4200;
    border-bottom: 1px solid #E8C766;
    font-size: 13px;
    overflow: hidden;
}
.tm-support-session-emergency { background: #FBE3E1; color: #7A1D14; border-bottom-color: #E59A92; }
.tm-support-session-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-shell-body.tm-shell-body-with-banner { height: calc(100vh - 56px - 40px); }

/* Same box without the top bar, for a screen shown INSTEAD of the app: mandatory two-factor
   enrollment. .tm-page inside sizes itself at height:100%, so it needs a measured parent. */
.tm-locked-body {
    height: 100vh;
    overflow: hidden;
}

/* === APP LAYOUT (sidebar + map) === */
.tm-app-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: 100%;
}

/* === SIDEBAR === */
.tm-sidebar {
    background: var(--tm-paper);
    border-right: 0.5px solid var(--tm-rule);
    padding: 22px 22px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tm-sidebar-eyebrow {
    font-family: var(--tm-mono);
    font-size: 10.5px;
    color: var(--tm-ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.tm-sidebar-title {
    font-family: var(--tm-serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--tm-ink);
    margin: 0 0 16px;
}
.tm-sidebar-title em { font-style: italic; font-weight: 300; }

.tm-search-box { position: relative; margin-bottom: 16px; }
.tm-search-box input {
    width: 100%;
    background: var(--tm-paper-deeper);
    border: 0.5px solid var(--tm-rule);
    border-radius: 6px;
    padding: 9px 12px 9px 32px;
    font-family: inherit;
    font-size: 13px;
    color: var(--tm-ink);
    transition: border-color 0.15s;
}
.tm-search-box input::placeholder { color: var(--tm-ink-muted); }
.tm-search-box input:focus { outline: none; border-color: var(--tm-forest); }
.tm-search-box svg {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%); color: var(--tm-ink-muted);
}

.tm-filter-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 18px; }
.tm-chip {
    font-size: 11.5px;
    background: var(--tm-paper-warm);
    border: 0.5px solid var(--tm-rule);
    color: var(--tm-ink-soft);
    padding: 3px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tm-chip:hover { border-color: var(--tm-moss); }
.tm-chip.active { background: var(--tm-forest); color: var(--tm-paper); border-color: var(--tm-forest); }
.tm-chip-x { font-size: 13px; line-height: 1; margin-right: -2px; opacity: 0.7; }

/* Working filter dropdowns styled to match the chip row (species / health status) */
.tm-chip-select {
    font-size: 11.5px;
    font-family: inherit;
    background: var(--tm-paper-warm);
    border: 0.5px solid var(--tm-rule);
    color: var(--tm-ink-soft);
    padding: 3px 6px;
    border-radius: 999px;
    cursor: pointer;
    max-width: 130px;
}
.tm-chip-select:focus { outline: none; border-color: var(--tm-forest); }

/* Field object selector (W-05) — the primary sidebar control, full width, own row */
.tm-teren-select { display: block; width: 100%; max-width: none; margin-bottom: 12px; padding: 7px 10px; font-size: 12.5px; }

.tm-results-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--tm-rule);
    margin-bottom: 8px;
}
.tm-results-count { font-family: var(--tm-serif); font-size: 13px; color: var(--tm-ink-soft); }
.tm-results-count strong { color: var(--tm-ink); font-weight: 500; }
.tm-sort-toggle { font-size: 11.5px; color: var(--tm-ink-muted); cursor: pointer; font-family: var(--tm-mono); letter-spacing: 0.04em; }

.tm-tree-list {
    flex: 1;
    overflow-y: auto;
    margin: 0 -22px;
    padding: 0 22px 22px;
}
.tm-tree-list::-webkit-scrollbar { width: 6px; }
.tm-tree-list::-webkit-scrollbar-track { background: transparent; }
.tm-tree-list::-webkit-scrollbar-thumb { background: var(--tm-rule); border-radius: 3px; }

.tm-tree-card {
    padding: 13px 0;
    border-bottom: 0.5px solid var(--tm-rule-soft);
    cursor: pointer;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    align-items: start;
    transition: padding 0.2s;
}
.tm-tree-card:hover { padding-left: 4px; }
.tm-tree-card.selected {
    background: var(--tm-forest-glow);
    margin: 0 -22px;
    padding: 13px 22px;
    border-bottom-color: transparent;
    border-radius: 4px;
}
.tm-tree-card.selected:hover { padding-left: 22px; }

.tm-tree-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.tm-tree-dot.healthy { background: var(--tm-olive); }
.tm-tree-dot.observe { background: var(--tm-mustard); }
.tm-tree-dot.critical { background: var(--tm-ochre); }
/* Not assessed yet — the same grey the map draws for a tree without a health status. */
.tm-tree-dot.unassessed { background: #9E9E9E; }

.tm-tree-card-main { min-width: 0; }
.tm-tree-id { font-family: var(--tm-mono); font-size: 10.5px; color: var(--tm-ink-muted); letter-spacing: 0.05em; margin-bottom: 2px; }
.tm-tree-species { font-family: var(--tm-serif); font-style: italic; font-weight: 400; font-size: 14px; color: var(--tm-ink); line-height: 1.25; margin-bottom: 1px; }
.tm-tree-species-pl { font-size: 12px; color: var(--tm-ink-muted); }
.tm-tree-location { font-size: 11.5px; color: var(--tm-ink-soft); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.tm-tree-height { font-family: var(--tm-mono); font-size: 11px; color: var(--tm-ink-muted); text-align: right; line-height: 1.3; }
.tm-tree-height strong { color: var(--tm-ink-soft); font-weight: 500; }

/* === MAP AREA + overlays === */
.tm-map-area { position: relative; background: var(--tm-map-bg); overflow: hidden; }
.tm-map-legend {
    /* W-06: moved off the top-right corner, which the detail card now occupies.
       Then moved again: the bottom-right corner now holds three things, so they share it instead
       of stacking on top of each other - the help button keeps the corner itself, MapLibre's zoom
       control rides above it (.maplibregl-ctrl-bottom-right below), and the legend sits left of
       that control column, which is what stops it covering the zoom buttons. */
    position: absolute; bottom: 64px; right: 60px;
    background: var(--tm-paper);
    border: 0.5px solid var(--tm-rule);
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(31, 42, 28, 0.06);
    font-size: 11.5px;
    z-index: 5;
}
.tm-legend-title { font-family: var(--tm-mono); font-size: 10px; color: var(--tm-ink-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.tm-legend-item { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: var(--tm-ink-soft); }
.tm-legend-item:last-child { margin-bottom: 0; }
.tm-legend-dot { width: 9px; height: 9px; border-radius: 50%; }
/* Legend swatches = the marker colours in map.js (HEALTH_COLOR), not the muted UI palette - the legend
   used to show olive/mustard/ochre while the map drew bright green/amber/red. "Pilne" covers two map
   colours (Zły, Wymaga interwencji), hence the split swatch. */
.tm-legend-dot.tm-legend-good { background: #4CAF50; }
.tm-legend-dot.tm-legend-average { background: #FFC107; }
.tm-legend-dot.tm-legend-urgent { background: linear-gradient(90deg, #FF5722 50%, #D32F2F 50%); }
.tm-legend-dot.tm-legend-unassessed { background: #9E9E9E; }
.tm-legend-hint { color: var(--tm-ink-muted); }
.tm-legend-title-next { margin-top: 10px; }
.tm-legend-dot.tm-legend-tree { background: #9E9E9E; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--tm-rule); }
.tm-legend-dot.tm-legend-shrub { width: 7px; height: 7px; margin: 1px; background: #9E9E9E; box-shadow: 0 0 0 1.5px #1B5E20; }
.tm-legend-dot.tm-legend-crown { width: 11px; height: 11px; margin: -1px; background: rgba(158, 158, 158, 0.1); border: 1px solid rgba(46, 125, 50, 0.35); }
.tm-legend-dot.tm-legend-area { border-radius: 2px; background: rgba(76, 175, 80, 0.3); border: 1.5px solid #2E7D32; }

/* Sits above MapLibre's scale bar (ScaleControl, bottom-left: 10px margin + ~18px bar) - at bottom:16px it
   covered the scale completely (uwaga 2026-10-07 #1). */
.tm-map-context {
    position: absolute; bottom: 40px; left: 10px;
    background: var(--tm-paper);
    border: 0.5px solid var(--tm-rule);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--tm-mono);
    font-size: 11px;
    color: var(--tm-ink-soft);
    letter-spacing: 0.02em;
    display: flex;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(31, 42, 28, 0.06);
    z-index: 5;
}
.tm-map-context strong { color: var(--tm-ink); font-weight: 500; }
/* Phones: the bottom edge has room for the help button only. The legend moves under the tool bar and the
   "N drzew w widoku" bar above the help button (they covered each other — hardening H-052). */
@media (max-width: 600px) {
    .tm-map-legend { top: 240px; bottom: auto; right: 12px; padding: 8px 10px; font-size: 10.5px; max-height: calc(100% - 330px); overflow-y: auto; }
    /* Still above the scale bar (bottom-left, ~10-28px), which stays visible under it. */
    .tm-map-context { bottom: 72px; left: 10px; }
}
.tm-map-context-divider { color: var(--tm-ink-faded); }

/* Floating map tools panel (hosts the existing draw/edit/measure tools as a paper card) */
.tm-map-tools {
    position: absolute;
    top: 16px; left: 16px;
    background: var(--tm-paper);
    border: 0.5px solid var(--tm-rule);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(31, 42, 28, 0.06);
    z-index: 5;
    overflow: hidden;
}
.tm-map-tools .mud-nav-link { border-radius: 0; }

/* Map toolbar layout (uwaga 2026-10-07 #5). MudTooltip wraps every link in an inline-block root, so without
   an explicit flex layout the icons-only links lined up in a row. Collapsed = one column of icons;
   expanded = a row of labelled buttons that wraps, kept clear of the detail card on the right. */
.tm-map-toolbar.mud-navmenu { display: flex; }
.tm-map-toolbar .mud-tooltip-root { display: block; }
.tm-map-toolbar .mud-nav-link { margin: 0; }
.tm-map-toolbar.tm-toolbar-collapsed { flex-direction: column; padding: 4px 0; }
.tm-map-toolbar.tm-toolbar-collapsed .tm-map-toolbar-divider { margin: 4px 0; }
.tm-map-toolbar.tm-toolbar-expanded { flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 2px; }
.tm-map-toolbar.tm-toolbar-expanded .mud-nav-link {
    width: auto; white-space: nowrap; min-height: 40px; padding: 8px 12px; border-radius: 6px;
}
.tm-map-toolbar.tm-toolbar-expanded .mud-nav-link .mud-icon-root { margin-inline-end: 8px; }
.tm-map-toolbar.tm-toolbar-expanded .tm-map-toolbar-divider { margin: 6px 2px; }
.tm-map-tools:has(.tm-toolbar-expanded) { max-width: calc(100% - 32px); }
/* Detail card (380px at right:16px) open: the expanded row wraps before it instead of sliding under it. */
.tm-map-area:has(.tm-detail-card) .tm-map-tools:has(.tm-toolbar-expanded) { max-width: calc(100% - 428px); }
/* The live measurement readout sits top-centre, where the expanded row now runs - move it to the bottom. */
.tm-map-area:has(.tm-toolbar-expanded) .tm-measure-readout { top: auto; bottom: 84px; }
@media (max-width: 600px) {
    .tm-map-tools:has(.tm-toolbar-expanded) { max-width: calc(100% - 32px); }
    .tm-map-toolbar.tm-toolbar-expanded .mud-nav-link { min-height: 36px; padding: 6px 10px; font-size: 13px; }
    /* The card covers the whole map width on a phone - nothing to wrap around. */
    .tm-map-area:has(.tm-detail-card) .tm-map-tools:has(.tm-toolbar-expanded) { max-width: calc(100% - 32px); }
}

/* Collapsed (icons-only) map toolbar — labels hidden, icons centred (laptop workspace economy) */
.tm-toolbar-collapsed .mud-nav-link-text { display: none; }
.tm-toolbar-collapsed .mud-nav-link { justify-content: center; min-height: 40px; padding: 8px 12px; }
.tm-toolbar-collapsed .mud-nav-link .mud-icon-root { margin-inline-end: 0; }

/* Hover quick-preview over a map feature (label + health status from tile properties) */
.tm-map-tip {
    position: absolute;
    z-index: 15;
    pointer-events: none;
    display: none;
    background: var(--tm-paper);
    border: 0.5px solid var(--tm-rule);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(31, 42, 28, 0.18);
    padding: 6px 10px;
    font-size: 12px;
    color: var(--tm-ink);
    max-width: 240px;
}
.tm-map-tip strong { display: block; font-family: var(--tm-mono); font-size: 11px; letter-spacing: 0.04em; }
.tm-map-tip span { display: block; color: var(--tm-ink-muted); }

/* Measurement labels (HTML markers — no map glyphs needed) + live readout box */
.tm-measure-label {
    /* Must stay a .maplibregl-marker (absolute, top/left 0) - map.js only adds classes to the marker element. */
    pointer-events: none;
    white-space: nowrap;
    width: max-content;
    font-family: var(--tm-mono);
    font-size: 11.5px;
    color: var(--tm-ink);
    background: var(--tm-paper);
    border: 0.5px solid var(--tm-rule);
    border-radius: 4px;
    padding: 1px 5px;
    box-shadow: 0 1px 4px rgba(31, 42, 28, 0.18);
}
.tm-measure-label.tm-measure-total { font-weight: 600; font-size: 12.5px; border-color: var(--tm-forest); }
.tm-measure-readout {
    position: absolute;
    z-index: 15;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    display: none;
    background: var(--tm-paper);
    border: 0.5px solid var(--tm-rule);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(31, 42, 28, 0.18);
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--tm-ink-soft);
    text-align: center;
    /* left:50% leaves an absolutely positioned box only half the map to shrink-fit into, so on a narrow
       map the readout wrapped into a thin column. max-content + max-width keeps it one readable block. */
    width: max-content;
    max-width: min(420px, calc(100% - 32px));
    box-sizing: border-box;
}
.tm-measure-readout strong { display: block; font-family: var(--tm-mono); font-size: 14px; color: var(--tm-ink); }

/* Layers panel: expandable "Geoportal" basemap group */
.tm-geoportal-toggle { text-transform: none; padding-left: 6px; color: var(--tm-ink); }
.tm-geoportal-current { margin-left: 4px; color: var(--tm-ink-muted); font-size: 12px; }

/* ULDK parcel identify popup */
.tm-parcel-popup { font-size: 12.5px; color: var(--tm-ink); line-height: 1.45; padding-right: 12px; }
.tm-parcel-popup strong { display: block; font-family: var(--tm-mono); font-size: 13px; margin-bottom: 2px; }
.tm-parcel-popup span { color: var(--tm-ink-muted); }
.tm-parcel-popup small { display: block; margin-top: 4px; color: var(--tm-ink-faded); font-size: 11px; }
.tm-parcel-popup .tm-parcel-add { display: block; width: 100%; margin-top: 8px; }
/* Shift + click selection of several parcels (uwaga 2026-10-07 #4) */
.tm-parcel-popup .tm-parcel-list { margin: 4px 0 0; padding-left: 18px; max-height: 160px; overflow-y: auto; font-family: var(--tm-mono); font-size: 12px; }
.maplibregl-popup-content:has(.tm-parcel-popup) { background: var(--tm-paper); }
.maplibregl-popup-anchor-bottom:has(.tm-parcel-popup) .maplibregl-popup-tip { border-top-color: var(--tm-paper); }

/* Empty/placeholder state in the sidebar tree-list */
.tm-tree-list-empty {
    padding: 24px 4px;
    font-size: 12.5px;
    color: var(--tm-ink-muted);
    font-family: var(--tm-serif);
    font-style: italic;
}

/* D-04 / HP-239: what the panel filters do (and do not do) on the map */
.tm-map-filter-note {
    margin: 4px 0;
    font-size: 11.5px;
    color: var(--tm-ink-muted);
    font-style: italic;
}

/* === GENERIC PAGE SHELL (non-map views inside tm-shell-body) === */
.tm-page {
    height: 100%;
    overflow-y: auto;
    padding: 28px 32px 40px;
    background: var(--tm-paper);
}
.tm-page-narrow { max-width: 760px; margin: 0 auto; }
.tm-page-head { margin-bottom: 20px; }
.tm-page-eyebrow {
    font-family: var(--tm-mono);
    font-size: 10.5px;
    color: var(--tm-ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.tm-page-title {
    font-family: var(--tm-serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--tm-ink);
    margin: 0;
}
.tm-page-title em { font-style: italic; font-weight: 300; }
.tm-page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tm-page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

/* Secondary line inside a job-list table cell (file type, duration) */
.tm-job-sub {
    font-size: 11px;
    color: var(--tm-ink-muted);
    white-space: nowrap;
}

/* Clickable job row → import detail page */
.tm-row-link { cursor: pointer; }
.tm-row-link:hover { background: var(--tm-hover, rgba(0, 0, 0, .04)); }

/* Inspection register — an entry superseded by a correction stays listed, dimmed */
.tm-row-superseded td { opacity: .6; }

/* Import detail page — summary stat tiles (read / imported / skipped / failed) */
.tm-import-stat {
    text-align: center;
    padding: 8px 4px;
    border: 1px solid var(--tm-line, rgba(0, 0, 0, .12));
    border-radius: 8px;
}

.tm-import-stat-num {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

.tm-import-stat-num.tm-ok { color: var(--mud-palette-success, #2e7d32); }
.tm-import-stat-num.tm-warn { color: var(--mud-palette-warning, #ed6c02); }
.tm-import-stat-num.tm-err { color: var(--mud-palette-error, #d32f2f); }

/* Whole-job failure reason (W-07 follow-up) — truncated, full text on hover via title attribute */
.tm-job-error {
    font-size: 12px;
    color: var(--mud-palette-error, #d32f2f);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === DETAIL CARD — right-hand panel (W-06) === */
/* Was a floating top-center popup; now a fixed right panel so long content (history, future
   attachments) scrolls instead of being clipped. Shares its slot with LayersPanel: MudBlazor's
   Temporary drawer renders its own backdrop + drawer above this (z-index 20), so opening Layers
   naturally covers the card rather than fighting it for space — closing the drawer reveals the
   card again untouched. */
.tm-detail-card {
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 16px;
    left: auto;
    transform: none;
    width: 380px;
    max-width: calc(100% - 32px);
    background: var(--tm-paper);
    border: 0.5px solid var(--tm-rule);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(31, 42, 28, 0.12), 0 2px 8px rgba(31, 42, 28, 0.06);
    overflow-y: auto;
    z-index: 20;
}
.tm-detail-photo {
    height: 140px;
    background: linear-gradient(135deg, #4a5d3a 0%, #6b7f4b 50%, #8a9866 100%);
    position: sticky;
    top: 0;
    z-index: 1;
    overflow: hidden;
    flex-shrink: 0;
}
/* Dekoracja rysowana po przycisku × — bez pointer-events i z-index przykrywała go i zjadała kliknięcia. */
.tm-detail-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; pointer-events: none; }
.tm-detail-photo-meta {
    position: absolute; bottom: 10px; left: 14px;
    font-family: var(--tm-mono); font-size: 10px;
    color: rgba(250, 247, 240, 0.8); letter-spacing: 0.05em;
}
.tm-detail-photo-pill {
    position: absolute; top: 12px; right: 12px;
    background: var(--tm-ochre-bg); color: var(--tm-ochre);
    font-size: 11px; font-weight: 500; padding: 4px 10px;
    border-radius: 999px; letter-spacing: 0.02em;
    z-index: 2;
}
.tm-detail-photo-pill.observe { background: var(--tm-mustard-bg); color: var(--tm-mustard); }
.tm-detail-photo-pill.unassessed { background: rgba(158, 158, 158, 0.18); color: #6b6b6b; }
.tm-detail-photo-pill.healthy { background: var(--tm-olive-bg); color: var(--tm-olive); }
/* Area type, not a health assessment - neutral, so a green 'Park' is not read as 'Zdrowe'. */
.tm-detail-photo-pill.neutral { background: var(--tm-paper); color: var(--tm-ink-soft); border: 0.5px solid var(--tm-rule); }
.tm-detail-photo-close {
    position: absolute; top: 12px; left: 12px;
    width: 28px; height: 28px;
    background: rgba(31, 42, 28, 0.4);
    backdrop-filter: blur(4px);
    border: none; color: var(--tm-paper);
    border-radius: 50%; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.tm-detail-body { padding: 18px 20px 20px; }
.tm-detail-id { font-family: var(--tm-mono); font-size: 10.5px; color: var(--tm-ink-muted); letter-spacing: 0.08em; margin-bottom: 4px; }
/* Etykieta drzewa / krzewu — the name people know it by, so it stands out above the species. */
.tm-detail-label {
    display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; font-size: 13px; color: var(--tm-ink);
    background: rgba(255, 196, 0, 0.18); border: 1px solid rgba(255, 196, 0, 0.55);
    border-radius: 6px; padding: 2px 8px; margin-bottom: 6px;
}
.tm-detail-species-latin {
    font-family: var(--tm-serif); font-style: italic; font-weight: 400;
    font-size: 22px; color: var(--tm-ink); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1px;
}
.tm-detail-species-pl { font-size: 13px; color: var(--tm-ink-soft); margin: 0 0 14px; }
.tm-detail-land { font-size: 12.5px; color: var(--tm-ink-soft); margin: -8px 0 14px; }
.tm-detail-meta-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px;
    padding: 14px 0;
    border-top: 0.5px solid var(--tm-rule);
    border-bottom: 0.5px solid var(--tm-rule);
    margin-bottom: 14px;
}
.tm-meta-label { font-family: var(--tm-mono); font-size: 9.5px; color: var(--tm-ink-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.tm-meta-value { font-family: var(--tm-serif); font-size: 16px; font-weight: 400; color: var(--tm-ink); line-height: 1.1; }
.tm-meta-value.warn { color: var(--tm-ochre); }
.tm-meta-value-suffix { font-size: 11px; color: var(--tm-ink-muted); font-family: var(--tm-sans); margin-left: 2px; }
.tm-detail-history { padding: 0 0 14px; margin-bottom: 4px; }
.tm-history-row {
    display: grid; grid-template-columns: 14px 1fr auto; gap: 10px;
    align-items: start; padding: 6px 0; font-size: 12px; color: var(--tm-ink-soft);
}
.tm-history-tick { margin-top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--tm-sage); }
.tm-history-tick.now { background: var(--tm-ochre); }
.tm-history-date { font-family: var(--tm-mono); font-size: 10.5px; color: var(--tm-ink-muted); letter-spacing: 0.04em; white-space: nowrap; }
.tm-detail-actions { display: flex; gap: 8px; }
.tm-detail-empty { font-size: 12px; color: var(--tm-ink-muted); font-style: italic; padding: 4px 0 12px; }

/* === BUTTONS === */
.tm-btn {
    flex: 1;
    background: transparent;
    border: 0.5px solid var(--tm-rule);
    color: var(--tm-ink);
    font-family: inherit;
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.tm-btn:hover { border-color: var(--tm-forest); background: var(--tm-paper-deeper); }
.tm-btn-primary { background: var(--tm-forest); color: var(--tm-paper); border-color: var(--tm-forest); font-weight: 500; }
.tm-btn-primary:hover { background: var(--tm-forest-deep); border-color: var(--tm-forest-deep); }

/* ===========================================================================
   DARK MODE — redefine the paper-and-ink tokens so the custom shell follows the
   theme toggle (MudThemeProvider IsDarkMode only switches MudBlazor's own palette).
   The scope element is display:contents so it adds no box; it exists purely to
   carry the --tm-* overrides down to every shell descendant. Dark values track the
   PaletteDark in ThemeService (forest/ink) so MudBlazor and the shell stay in sync.
   =========================================================================== */
.tm-shell-scope { display: contents; }

.tm-dark {
    /* Paper / ink — inverted: "paper" becomes deep ink, "ink" becomes warm paper */
    --tm-paper: #1F2A1C;
    --tm-paper-deeper: #18211A;
    --tm-paper-warm: #243024;
    --tm-ink: #ECE7D8;
    --tm-ink-soft: #C2C9B6;
    --tm-ink-muted: #9AA298; /* AA na --tm-paper-warm (#243024): 5,3:1; #8B928A dawał 4,3:1 */
    --tm-ink-faded: #5C6557;
    --tm-rule: #38463A;
    --tm-rule-soft: #2C3A2D;
    /* Botanical accents — lifted for contrast on the dark ground */
    --tm-forest: #6B7F4B;
    --tm-forest-deep: #5A6B40;
    --tm-forest-glow: rgba(107, 127, 75, 0.16);
    --tm-moss: #8A9C68;
    --tm-sage: #6B7657;
    /* Status — keep the aged hues, darken the tint backgrounds */
    --tm-ochre: #D17358;   --tm-ochre-bg: #3C2620;
    --tm-mustard: #D4A94F; --tm-mustard-bg: #3A311C;
    --tm-olive: #9CB36F;   --tm-olive-bg: #2B3520;
    /* Map */
    --tm-map-bg: #2A2E24;
}

/* Responsive: collapse sidebar + nav on narrow viewports */
@media (max-width: 980px) {
    .tm-app-layout { grid-template-columns: 1fr; }
    .tm-sidebar { display: none; }
}

/* The full section list needs ~1400px next to the search and actions; below that it folds into the menu
   button rather than scrolling invisibly (Raporty/Słowniki/Ustawienia would be unreachable). */
@media (max-width: 1420px) {
    .tm-topnav { display: none; }
    .tm-nav-toggle { display: inline-flex; }
    /* Folded sections (hardening H-051): a full-width list under the bar. */
    .tm-topnav.tm-topnav-open {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: absolute; top: 56px; left: 0; right: 0;
        background: var(--tm-paper); border-bottom: 0.5px solid var(--tm-rule);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
        max-height: calc(100vh - 56px); overflow-y: auto; white-space: normal;
    }
    .tm-topnav.tm-topnav-open a { padding: 12px 20px; font-size: 15px; }
    .tm-topnav.tm-topnav-open a.active { background: rgba(0, 0, 0, 0.04); }
    .tm-topnav.tm-topnav-open a.active::after { display: none; }
}

/* === PLATFORM ADMIN SHELL (side-menu console, separate from the map's tm-app-layout) === */
.tm-admin-body {
    height: calc(100vh - 56px);
    display: flex;
    overflow: hidden;
}
.tm-admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--tm-paper);
    border-right: 0.5px solid var(--tm-rule);
    overflow-y: auto;
    transition: width 0.15s;
}
.tm-admin-sidebar.tm-toolbar-collapsed { width: 56px; }
.tm-admin-content {
    flex: 1;
    overflow: hidden;
    height: 100%;
}
.tm-admin-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    font-size: 12.5px;
    color: var(--tm-ink-soft);
    text-decoration: none;
    border-bottom: 0.5px solid var(--tm-rule);
}
.tm-admin-back:hover { color: var(--tm-ink); }
.tm-admin-sidebar.tm-toolbar-collapsed .tm-admin-back-label { display: none; }

/* Selektor pola docelowego w kroku mapowania kolumn importu (/io). */
.tm-map-select {
    width: 100%;
    min-width: 12rem;
    padding: .35rem .5rem;
    border: 1px solid var(--mud-palette-lines-inputs, #cfcfcf);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #1a1a1a);
    font: inherit;
}

/* === SUPPORT (customer-initiated help) ===
   The button owns the bottom-right corner on every page; map overlays yield to it (above). */
.tm-support-fab {
    position: fixed; bottom: 16px; right: 16px;
    z-index: 1100;
}
.tm-support-fab-button {
    border-radius: 999px;
    padding: 8px 18px;
    box-shadow: 0 4px 14px rgba(31, 42, 28, 0.18);
    text-transform: none;
    letter-spacing: 0.01em;
}

/* MapLibre puts its navigation control in the same corner - lift it above the help button. */
.tm-map-area .maplibregl-ctrl-bottom-right { bottom: 48px; }

/* A closed temporary drawer outside MudLayout still sat just past the right edge: every page was 440px wider
   than the window and its header swallowed clicks on the bell (hardening H-020/H-050). */
.tm-support-drawer.mud-drawer--closed { display: none; }
body { overflow-x: clip; }

.tm-support-drawer-body {
    padding: 0 16px 24px;
    overflow-y: auto;
    height: 100%;
}
.tm-support-empty { color: var(--tm-ink-muted); padding: 16px 4px; }
.tm-support-list-main { min-width: 0; }
.tm-support-list-subject { font-size: 13.5px; color: var(--tm-ink); display: flex; align-items: center; gap: 6px; }
.tm-support-list-meta { font-family: var(--tm-mono); font-size: 10.5px; color: var(--tm-ink-muted); margin-top: 2px; }
.tm-support-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tm-ochre); flex: 0 0 auto; }

.tm-support-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }

/* The consent card: deliberately the loudest thing in the panel - it is a decision, not a notice. */
.tm-support-consent {
    border: 1px solid var(--tm-mustard);
    background: var(--tm-mustard-bg);
    border-radius: 8px;
    padding: 12px 14px;
}
.tm-support-reason { font-style: italic; color: var(--tm-ink-soft); }

.tm-support-thread { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.tm-support-bubble {
    max-width: 88%;
    align-self: flex-start;
    background: var(--tm-paper-2, var(--tm-paper));
    border: 0.5px solid var(--tm-rule);
    border-radius: 10px;
    padding: 8px 12px;
}
.tm-support-mine {
    align-self: flex-end;
    background: var(--tm-olive-bg);
    border-color: var(--tm-olive);
}
.tm-support-bubble-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--tm-ink-muted); margin-bottom: 4px;
}
.tm-support-author { font-weight: 500; color: var(--tm-ink-soft); }
.tm-support-badge {
    font-family: var(--tm-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--tm-olive); color: #fff; border-radius: 4px; padding: 1px 5px;
}
.tm-support-body { font-size: 13px; color: var(--tm-ink); white-space: pre-wrap; word-break: break-word; }

/* System narration - status changes and access decisions, told inline so the thread is the whole story. */
.tm-support-system {
    display: flex; align-items: center; gap: 8px;
    align-self: center; text-align: center;
    font-size: 11.5px; color: var(--tm-ink-muted);
    background: transparent; padding: 2px 8px;
}
.tm-support-system time, .tm-support-bubble-head time { font-family: var(--tm-mono); font-size: 10px; }

.tm-support-composer { margin-top: 12px; border-top: 0.5px solid var(--tm-rule); padding-top: 12px; }

/* Operator console: the queue row and the thread column. */
.tm-support-queue-subject { display: flex; align-items: center; gap: 6px; }
.tm-support-ticket-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1100px) {
    .tm-support-ticket-grid { grid-template-columns: 1fr; }
}
.tm-support-side-card { border: 0.5px solid var(--tm-rule); border-radius: 8px; padding: 14px 16px; background: var(--tm-paper); }
.tm-support-context { font-family: var(--tm-mono); font-size: 10.5px; color: var(--tm-ink-muted); word-break: break-all; }

/* Multi-line text fields (TREEMATRIX-77): every MudTextField with Lines > 1 renders
   .mud-input > textarea.mud-input-root, which MudBlazor 8.5.1 pins with resize: none. Let the user drag it
   taller (vertical only, so it never widens a dialog), capped below the viewport so the drag cannot push a
   card's footer away; the form fields also use AutoGrow + MaxLines, which grows them with the text first.
   Read-only/disabled textareas keep MudBlazor's fixed size. */
.mud-input > textarea.mud-input-root:not([readonly]):not(:disabled) {
    resize: vertical;
    min-height: 1.5em;
    max-height: 60vh;
}
@media (pointer: coarse) {
    /* Touch: a resize grip is hard to hit (and absent on iOS) — AutoGrow does the work; keep the cap. */
    .mud-input > textarea.mud-input-root:not([readonly]):not(:disabled) { max-height: 50vh; }
}

/* One-time account links (invitation / password reset) shown for manual hand-over. Long unbreakable
   strings, so force wrapping and set them in the mono face used elsewhere for machine-readable values. */
.tm-link-field textarea {
    font-family: var(--tm-mono);
    font-size: 11.5px;
    word-break: break-all;
}

/* Audit-entry change list inside its tooltip: machine values, so the mono face, and left-aligned
   because the lines are indented key/value pairs rather than prose. */
.tm-audit-diff {
    font-family: var(--tm-mono);
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
    white-space: pre-wrap;
    max-width: 480px;
    max-height: 320px;
    overflow-y: auto;
}

/* Global search in the top bar. Sits between the nav and the actions, shrinking before either does. */
/* Shrinks long before the nav does (high shrink factor), so the sections only scroll as a last resort. */
.tm-topsearch { flex: 0 1000 280px; min-width: 140px; margin-left: auto; margin-right: 12px; }
.tm-topsearch-hit { display: flex; align-items: baseline; gap: 8px; }
.tm-topsearch-kind {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tm-ink-muted); flex: 0 0 auto;
}
.tm-topsearch-label { font-family: var(--tm-mono); font-size: 12px; }
.tm-topsearch-meta { font-size: 11.5px; color: var(--tm-ink-muted); }
.tm-topsearch-empty { padding: 8px 12px; font-size: 12px; color: var(--tm-ink-muted); }
@media (max-width: 900px) { .tm-topsearch { display: none; } }

/* MFA enrollment QR. Fixed size and a white ground so it scans on either theme. */
.tm-mfa-qr {
    display: block;
    width: 200px;
    height: 200px;
    padding: 8px;
    background: #fff;
    border: 0.5px solid var(--tm-rule);
    border-radius: 6px;
    image-rendering: pixelated;
}

/* Permission checkboxes: two columns so a role's full permission set fits without scrolling. */
.tm-scope-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 700px) { .tm-scope-list { grid-template-columns: 1fr; } }

/* Permission matrix (platform console) and the tenant roles screen — plan „uprawnienia per organizacja”. */
.tm-caption { font-size: 12px; color: var(--tm-ink-soft); }
.tm-caption code { font-size: 11px; }
.tm-perm-matrix { overflow-x: auto; }
.tm-perm-group td { background: var(--tm-paper-deeper); }
.tm-perm-changed { box-shadow: inset 0 0 0 2px var(--tm-mustard); border-radius: 4px; }
.tm-perm-savebar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--tm-rule); border-radius: 6px; background: var(--tm-paper); position: sticky; bottom: 12px; }
.tm-scope-blocked { display: flex; align-items: center; gap: 6px; color: var(--tm-ink-soft); }
/* Change preview and permission history (etap 8): what a save adds / takes away. */
.tm-diff-added { color: var(--tm-forest); }
.tm-diff-removed { color: var(--tm-ochre); }
.tm-perm-undone { opacity: 0.6; }

/* Subscription tiers (platform console): comparison table + one-level edit form. */
.tm-tier-compare { overflow-x: auto; }
.tm-tier-compare table { min-width: 640px; }
.tm-tier-compare th { vertical-align: top; min-width: 180px; }
.tm-tier-rowhead { width: 220px; color: var(--tm-ink-soft); }
.tm-tier-editing { box-shadow: inset 2px 0 0 var(--tm-mustard), inset -2px 0 0 var(--tm-mustard); }
.tm-tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; }
.tm-tier-limit { display: flex; align-items: center; gap: 8px; }
.tm-tier-limit .mud-input-control { flex: 1; min-width: 0; }
@media (max-width: 600px) { .tm-tier-grid { grid-template-columns: 1fr; } .tm-perm-savebar { flex-wrap: wrap; } }

/* Security policy (etap 6): MFA levels as cards, settings as rows. Stacks on narrow screens. */
.tm-sec-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tm-sec-level {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
    min-height: 120px; padding: 14px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--tm-rule); background: var(--tm-paper); color: var(--tm-ink); font: inherit;
}
.tm-sec-level:focus-visible { outline: 2px solid var(--tm-forest); outline-offset: 2px; }
.tm-sec-level-on { border: 2px solid var(--tm-forest); background: var(--tm-forest-glow); }
.tm-sec-level-below, .tm-sec-level:disabled { border-style: dashed; background: var(--tm-paper-deeper); cursor: not-allowed; opacity: 0.8; }
.tm-sec-level-pick { font-size: 12px; color: var(--tm-ink-soft); }
.tm-sec-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 200px 260px; gap: 16px; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--tm-rule-soft);
}
.tm-sec-ok { color: var(--tm-forest); }
.tm-sec-warn { color: var(--tm-ochre); }
@media (max-width: 800px) {
    .tm-sec-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tm-sec-row { grid-template-columns: minmax(0, 1fr); }
}

/* Inspection photos: queued in the dialog (previews) and stored on an entry (thumbnails from blob: URLs). */
.tm-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tm-photo-tile {
    position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden;
    border: 0.5px solid var(--tm-rule); display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.03);
}
.tm-photo-tile img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.tm-photo-file {
    all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px; font-size: 11px; text-align: center; overflow-wrap: anywhere; max-width: 100%;
}
.tm-photo-remove { position: absolute !important; top: 2px; right: 2px; background: rgba(255, 255, 255, 0.85) !important; }
.tm-photo-large { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 96vw; max-height: 94vh; }
.tm-photo-large img { max-width: 96vw; max-height: 82vh; object-fit: contain; border-radius: 4px; }
.tm-photo-large-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #fff; font-size: 13px; }
/* Inputs reached through their <label> buttons; kept focusable/clickable unlike display:none (old iOS). */
.tm-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0;
}

/* Quick choices under the date picker's calendar (TmDatePicker). */
/* width:0 + min-width:100% — the block fills the calendar's width but adds nothing to the popup's own
   width, so the choices wrap under the calendar instead of stretching it (TREEMATRIX-85). */
.tm-date-quick { display: flex; flex-direction: column; gap: 4px; width: 0; min-width: 100%; }
.tm-date-quick-options { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.tm-date-quick-options .mud-button-root { min-width: 0; }
.tm-date-quick-actions {
    display: flex; justify-content: flex-end; gap: 4px;
    border-top: 0.5px solid var(--tm-rule); padding-top: 4px;
}

/* Recommendation items: rows in the inspection dialog and their read-only lists. */
.tm-rec-row { border: 0.5px solid var(--tm-rule); border-radius: 6px; padding: 6px 10px 10px; margin-bottom: 8px; }
.tm-rec-row-head { display: flex; align-items: center; justify-content: space-between; }
.tm-rec-row-no { font-weight: 600; font-size: 12px; }
.tm-rec-list { margin: 2px 0 4px; padding-left: 18px; font-size: 13px; }
.tm-rec-list li { margin: 2px 0; }
.tm-rec-list-compact { font-size: 12px; padding-left: 14px; }
.tm-rec-due { margin-left: 6px; font-size: 11.5px; opacity: .8; white-space: nowrap; }
.tm-rec-overdue { color: var(--mud-palette-error); opacity: 1; font-weight: 600; }
.tm-rec-dismissed .tm-rec-text { text-decoration: line-through; opacity: .6; }
.tm-rec-general { font-size: 12px; margin-top: 2px; }
.tm-history-sub { display: block; font-size: 11.5px; opacity: .85; }

/* C3: warning before the session (access token) runs out, above open dialogs so it is seen mid-form. */
.tm-session-expiry {
    position: fixed; top: 64px; right: 16px; z-index: 1450; max-width: 420px;
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px; border-radius: 8px;
    background: #FFF3CD; color: #5C4200; border: 1px solid #E8C766;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18); font-size: 13.5px;
}
.tm-session-expiry-expired { background: #FBE3E1; color: #7A1D14; border-color: #E59A92; }
.tm-session-expiry-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* C3: offer to restore a form draft (form-drafts.js injects it at the top of the dialog content). */
.tm-draft-offer {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 8px 12px; margin-bottom: 12px; border-radius: 6px;
    background: #E3F0FB; color: #0D3A5C; border: 1px solid #A9CDEB; font-size: 13px;
}
.tm-draft-offer > span { flex: 1 1 240px; }

/* ---- Relocation: "Przesuń" / "Zmień kształt" from the edit dialogs ---- */
/* The edit dialog stays open (unsaved fields survive) but is hidden while the user picks on the map. */
.mud-dialog-container:has(.tm-dialog-hide-marker) { display: none !important; }
.tm-relocation-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-relocation-pending { font-size: 13px; color: var(--tm-ink-soft); flex: 1 1 260px; }
/* The detail card would cover the picked spot — hidden (not unmounted) during the pick. */
.tm-map-area.tm-relocation-active .tm-detail-card { display: none; }
.tm-relocate-bar {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 20;
    width: min(460px, calc(100% - 32px));
    background: var(--tm-paper); color: var(--tm-ink);
    border: 1px solid #FFC400; border-radius: 12px; padding: 12px 14px;
    box-shadow: 0 8px 32px rgba(31, 42, 28, 0.18);
    display: flex; flex-direction: column; gap: 6px;
}
.tm-relocate-title { font-weight: 600; }
.tm-relocate-hint { font-size: 13px; color: var(--tm-ink-soft); }
.tm-relocate-info { font-family: var(--tm-mono); font-size: 13px; }
.tm-relocate-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.tm-relocate-actions .tm-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.tm-relocating .maplibregl-canvas { cursor: crosshair !important; }
.tm-reloc-marker { display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.tm-reloc-dot { width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; }
.tm-reloc-caption {
    margin-top: 2px; padding: 1px 6px; border-radius: 4px; font-size: 11px; white-space: nowrap;
    background: rgba(250, 247, 240, 0.92); color: #1F2A1C;
}
.tm-reloc-old .tm-reloc-dot { background: rgba(158, 158, 158, 0.35); border: 2px dashed #616161; }
.tm-reloc-old .tm-reloc-caption { color: #616161; }
.tm-reloc-new { cursor: grab; }
.tm-reloc-new .tm-reloc-dot { background: #FFC400; border: 3px solid #E65100; box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.35); }
.tm-reloc-new .tm-reloc-caption { font-weight: 600; }

/* Karta drzewa (2026-10-01): mandatory fields still empty — bold, red label and a thick outline, so the gaps
   of a record saved incomplete are obvious when it is opened again. */
.tm-required-missing .mud-input-label,
.tm-required-missing .mud-typography-body2 { font-weight: 800 !important; color: var(--mud-palette-error) !important; }
.tm-required-missing .mud-input-outlined-border { border-width: 2px !important; border-color: var(--mud-palette-error) !important; }
.tm-required-missing .mud-input-helper-text { font-weight: 700; }
.tm-missing-alert strong { font-weight: 800; }

/* Pomiary: the statutory sum under the trunks at 1,3 m. */
.tm-statutory-sum {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    padding: 8px 12px; border-radius: 6px;
    background: var(--mud-palette-background-gray); border: 0.5px solid var(--tm-rule);
}
.tm-statutory-sum-label { font-weight: 600; }
.tm-statutory-sum-value { font-size: 1.15rem; font-weight: 700; }
.tm-statutory-sum-rule { font-size: 12px; opacity: .75; }

/* Inventory cards (tree / shrub / area edit dialogs), TREEMATRIX-81. MudDialog's own scroller is the whole
   .mud-dialog box (overflow-y: auto), so whenever the content outgrew it — fixed 100vh-based heights inside
   the content, 100vh being taller than the visible viewport on phones and tablets — the title and the
   Usuń/Anuluj/Zapisz footer scrolled away with the fields. Here the content is the only scroller: the dialog
   is a flex column (MudFocusTrap's wrappers are display: contents), the content may shrink to nothing and
   scrolls on its own, so the box is as tall as its content and never taller than the viewport allows. */
.mud-dialog:has(> .mud-focus-trap .tm-card-content) {
    --tm-card-max-h: calc(100vh - var(--mud-appbar-height));
    --tm-card-sheet-w: 440px;
    max-height: var(--tm-card-max-h);
    position: relative;
    overflow: visible;
}
@supports (height: 100dvh) {
    .mud-dialog:has(> .mud-focus-trap .tm-card-content) { --tm-card-max-h: calc(100dvh - var(--mud-appbar-height)); }
}
.mud-dialog .mud-dialog-content.tm-card-content {
    position: static; /* the sheet below is placed against the dialog box, not the scrolling content */
    flex: 1 1 auto;
    min-height: 0;
    /* Title (~64 px), footer (~53 px) and the content's margins: a cap that holds even without :has(). */
    max-height: calc(var(--tm-card-max-h, 100vh) - 136px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.tm-card-main { min-width: 0; }
@media (max-width: 599.98px) {
    /* Phone (390 px): MudBlazor leaves 32 px either side of a full-width dialog — give the fields that room. */
    .mud-dialog:has(> .mud-focus-trap .tm-card-content) {
        --tm-card-max-h: calc(100vh - 16px);
        width: calc(100% - 16px);
    }
    @supports (height: 100dvh) {
        .mud-dialog:has(> .mud-focus-trap .tm-card-content) { --tm-card-max-h: calc(100dvh - 16px); }
    }
    .mud-dialog .mud-dialog-content.tm-card-content { padding: 0 12px; }
}

/* The inspection protocol as a side-sheet of the tree card (TREEMATRIX-79). The card keeps its width; the
   sheet is docked to its right edge, same height, with its own scrolling body. Where the screen cannot hold
   card (960) + sheet (440) + margins, the sheet covers the card instead — full width and height of the
   dialog — and closing it uncovers the card exactly as it was. */
.tm-card-sheet {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 3; /* above the dialog title (z-index 1) */
    display: flex; flex-direction: column;
    min-width: 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    animation: tm-card-sheet-in .16s ease-out both;
}
.tm-card-sheet-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 12px 8px 24px;
    border-bottom: 1px solid var(--tm-rule);
}
.tm-card-sheet-body {
    flex: 1 1 auto; min-height: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 24px 0;
}
/* The protocol's Zapisz/Zamknij stay in view at the bottom of the sheet. */
.tm-card-sheet .tm-inspection-actions {
    position: sticky; bottom: 0; z-index: 1;
    margin: 12px -24px 0; padding: 10px 24px 12px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--tm-rule);
}
@keyframes tm-card-sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 1440px) {
    /* Docked: the card moves left by the sheet's width so the pair stays centred. */
    .mud-dialog:has(> .mud-focus-trap .tm-card-sheet) {
        margin-right: var(--tm-card-sheet-w);
        flex-shrink: 0;
        border-top-right-radius: 0; border-bottom-right-radius: 0;
    }
    .tm-card-sheet {
        left: 100%; right: auto;
        width: var(--tm-card-sheet-w);
        border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;
        border-left: 1px solid var(--tm-rule);
        box-shadow: 8px 11px 15px -7px rgba(0,0,0,.2), 8px 24px 38px 3px rgba(0,0,0,.14);
        animation-name: tm-card-sheet-dock;
    }
    @keyframes tm-card-sheet-dock { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 599.98px) {
    .tm-card-sheet-head { padding-left: 12px; }
    .tm-card-sheet-body { padding: 8px 12px 0; }
    .tm-card-sheet .tm-inspection-actions { margin: 12px -12px 0; padding: 10px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) { .tm-card-sheet { animation: none; } }
.tm-inspection-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Incomplete trees: the same magenta as the map halo (map.js INCOMPLETE_COLOR). */
.tm-legend-dot.tm-legend-incomplete { background: #D500F9; border: 2px solid #6A0080; box-shadow: 0 0 0 2px rgba(213, 0, 249, .35); } /* = the halo of map.js: magenta with a dark ring (U31-17) */
.tm-map-tip span.tm-map-tip-incomplete { display: block; color: #AA00C7; font-weight: 700; }
.tm-chip-incomplete { background: #D500F9 !important; color: #fff !important; }
.tm-detail-incomplete { padding: 6px 10px; border-radius: 6px; background: rgba(213, 0, 249, .12); border-left: 4px solid #D500F9; font-weight: 700; font-size: 13px; }

/* A select's resting label ran under its dropdown arrow in narrow filter fields ("Stan zdrowotny" over the
   caret, hardening H-053): keep it clear of the arrow and end it with an ellipsis. */
.mud-select .mud-input-label { max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Friendly replacement for a page that threw (Components/Shared/FriendlyErrorBoundary.razor). */
.tm-error-boundary {
    max-width: 36rem;
    margin: 4rem auto;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--tm-ink);
}
.tm-error-boundary-mark { font-size: 3rem; }
.tm-error-boundary h2 { margin: .5rem 0 .75rem; font-size: 1.35rem; font-weight: 600; }
.tm-error-boundary p { margin: 0 0 1.5rem; line-height: 1.5; color: var(--tm-ink-soft); }
.tm-error-boundary-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Application log entry (TREEMATRIX-22): message, exception and properties as preformatted text. */
.tm-log-pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8rem;
    background: var(--mud-palette-background-gray);
    padding: 8px 10px;
    border-radius: 4px;
    overflow: auto;
    margin: 0;
}

/* HP-135: zakładki, filtry i przełącznik listy w panelu „Obiekty” są przyciskami (klawiatura, czytnik ekranu). */
button.tm-chip { font-family: inherit; line-height: inherit; }
button.tm-sort-toggle { background: none; border: 0; padding: 0; }
.tm-chip:focus-visible, .tm-sort-toggle:focus-visible, .tm-tree-card:focus-visible,
.tm-detail-photo-close:focus-visible, .tm-panel-toggle:focus-visible, .tm-locate-btn:focus-visible {
    outline: 2px solid var(--tm-forest); outline-offset: 2px;
}

/* HP-134: poniżej 980 px panel „Obiekty” jest szufladą otwieraną przyciskiem na mapie. */
.tm-panel-toggle, .tm-sidebar-close { display: none; }
@media (max-width: 980px) {
    .tm-app-layout { position: relative; }
    .tm-sidebar.tm-sidebar-open {
        display: flex; position: absolute; inset: 0 auto 0 0; z-index: 30;
        width: min(360px, 100%); box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
        padding: 16px 16px 0;
    }
    .tm-sidebar.tm-sidebar-open .tm-tree-list { margin: 0 -16px; padding: 0 16px 16px; }
    .tm-sidebar-close {
        display: inline-flex; align-self: flex-end; align-items: center; justify-content: center;
        width: 36px; height: 36px; margin-bottom: -28px; font-size: 22px; line-height: 1;
        background: none; border: 0; color: var(--tm-ink-soft); cursor: pointer;
    }
    .tm-panel-toggle {
        display: inline-flex; align-items: center; position: absolute; top: 16px; right: 16px; z-index: 5;
        min-height: 36px; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px;
        background: var(--tm-paper); color: var(--tm-ink); border: 0.5px solid var(--tm-rule);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); cursor: pointer;
    }
}

/* HP-161: „Moja lokalizacja” — nad przyciskami przybliżenia MapLibre (prawy dolny róg). */
.tm-locate-btn {
    position: absolute; right: 10px; bottom: 118px; z-index: 4;
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--tm-paper); color: var(--tm-ink); border: 0.5px solid var(--tm-rule); border-radius: 6px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); cursor: pointer;
}
.tm-locate-btn:disabled { opacity: 0.6; cursor: progress; }
.tm-my-location {
    width: 16px; height: 16px; border-radius: 50%; background: #1a73e8;
    border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26, 115, 232, 0.25);
}

/* HP-134: poniżej 900 px wyszukiwarka z paska chowa się za ikoną, a nie znika. */
.tm-topsearch-toggle { display: none; }
@media (max-width: 900px) {
    .tm-topsearch-toggle {
        display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
        margin-left: auto; margin-right: 4px; background: none; border: 0; color: inherit; cursor: pointer;
    }
    .tm-topsearch.tm-topsearch-open {
        display: block; position: absolute; top: 56px; left: 0; right: 0; z-index: 40; margin: 0;
        padding: 8px 16px; background: var(--tm-paper); border-bottom: 0.5px solid var(--tm-rule);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }
}

/* U31-02: skala 1:x obok paska metrów w lewym dolnym rogu mapy. */
.maplibregl-ctrl-bottom-left { display: flex; flex-direction: row; align-items: flex-end; }
.maplibregl-ctrl-bottom-left .maplibregl-ctrl { float: none; }
.maplibregl-ctrl.tm-scale-ratio { min-width: 3.5em; text-align: center; }

/* U31-09: przyciski szybkiego wyboru kolejnego przeglądu pod polem daty (zawijają się na 390 px). */
.tm-next-inspection-quick { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tm-next-inspection-quick .tm-next-inspection-quick-btn { min-width: 0; padding: 0 8px; }

/* Przeglądy — one row per green object (U31-11...14) */
.tm-insp-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.tm-insp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.tm-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.tm-sortable:hover { background: var(--tm-hover, rgba(0, 0, 0, .04)); }
.tm-sortable:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.tm-sort-arrow { font-size: 14px; vertical-align: middle; margin-left: 2px; }
.tm-due-overdue { color: var(--mud-palette-error); font-weight: 600; }
.tm-insp-empty { color: var(--tm-ink-muted); }
.tm-insp-row-opened td { background: var(--tm-hover, rgba(0, 0, 0, .04)); }

/* Inspection history on the object cards (U31-10) */
.tm-history-toggle { margin: 6px 0; }
.tm-history-entries { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.tm-history-entry { border-top: 1px solid var(--tm-line, rgba(0, 0, 0, .12)); padding-top: 8px; }
.tm-history-entry-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.tm-history-text { font-size: 12.5px; white-space: pre-line; margin-top: 2px; }
.tm-link-button { background: none; border: 0; padding: 0; color: var(--mud-palette-primary); cursor: pointer; text-decoration: underline; font: inherit; }

/* U31-04: lista działek obiektu (karta, okno terenu, filtr Przeglądów) */
.tm-parcel-panel { margin-top: 8px; }
.tm-parcel-list { list-style: none; margin: 4px 0 0; padding: 0; }
.tm-parcel-list li { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; padding: 1px 0; }
.tm-parcel-remove { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1; color: inherit; opacity: 0.7; }
.tm-parcel-remove:hover, .tm-parcel-remove:focus-visible { opacity: 1; }
.tm-parcel-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tm-parcel-manual { display: grid; gap: 6px; margin-top: 6px; }
.tm-parcel-missing { font-weight: 600; }
.tm-parcel-filter-numbers { max-height: 220px; overflow: auto; padding-left: 28px; }

/* TREEMATRIX-118 / E4: formularz przeglądu drzewa wg „Inspekcji drzew” — sekcje, cechy, kierunki, pilność. */
.tm-inspection-sections .mud-expand-panel-header { min-height: 48px; }
.tm-section-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tm-section-count { height: 20px; min-width: 20px; }
.tm-finding-group { margin-bottom: 12px; }
.tm-finding-title { margin-top: 4px; }
.tm-finding-item { border-bottom: 0.5px solid var(--tm-rule); padding: 0 0 2px; }
.tm-finding-item.tm-finding-selected { background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); border-radius: 6px; }
.tm-finding-details { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 10px 32px; }
.tm-dir-picker { display: inline-grid; grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; gap: 4px; }
.tm-dir-cell { display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--tm-rule);
    border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; user-select: none; }
.tm-dir-cell input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tm-dir-cell.tm-dir-on { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); border-color: var(--mud-palette-primary); }
.tm-dir-cell:focus-within { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.tm-dir-center { border: 0; color: var(--mud-palette-text-disabled); cursor: default; }
.tm-severity-buttons, .tm-urgency-picker { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-severity-btn { text-transform: none; }
.tm-urgency-btn { min-width: 36px; padding: 2px 6px; }
.tm-rec-grid-row { border-bottom: 0.5px solid var(--tm-rule); padding: 4px 0; }
.tm-rec-grid-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tm-rec-grid-name { font-size: 14px; }
.tm-rec-grid-idle .tm-rec-grid-name { color: var(--mud-palette-text-secondary); }
.tm-rec-grid-details { padding: 4px 0 8px; }
/* W oknie dialogowym przyciski Zapisz/Anuluj zostają widoczne na dole przewijanej treści (stała stopka). */
.mud-dialog-content:not(.tm-card-content) .tm-inspection-actions {
    position: sticky; bottom: 0; z-index: 2;
    margin: 12px -24px 0; padding: 10px 24px 12px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--tm-rule);
}
@media (max-width: 599.98px) {
    .mud-dialog-content:not(.tm-card-content) .tm-inspection-actions { margin: 12px -16px 0; padding: 10px 16px 12px; }
    .tm-finding-details { padding-left: 8px; }
}

/* Telefon (390 px): pasek górny musi się zmieścić bez poziomego przewijania strony. Marka bez numeru wersji,
   mniejsze odstępy; pigułki w pasku (abonament, zaległe przeglądy) skracają się wielokropkiem zamiast
   rozpychać pasek. Test: AuditDimensionTests.Tenant_page_fits_a_390px_phone (E2E) i TopbarPhoneLayoutTests. */
@media (max-width: 600px) {
    .tm-topbar { gap: 6px; padding: 0 10px; }
    .tm-brand { gap: 6px; font-size: 18px; }
    .tm-brand sup { display: none; }
    .tm-top-actions { gap: 2px; flex-shrink: 1; min-width: 0; }
    .tm-top-actions .tm-pill { max-width: 96px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
    .tm-topsearch-toggle { margin-right: 0; }
    .tm-page { padding: 20px 16px 32px; }
    .tm-page-head-row { flex-wrap: wrap; align-items: flex-start; }
}

/* Nagłówek mapy dla telefonu: panel boczny jest tam szufladą (display:none), więc h1 z panelu znika z drzewa dostępności.
   Poza telefonem ukryty, na telefonie wizualnie ukryty (czytnik ekranu go czyta). */
.tm-phone-only-heading { display: none; }
@media (max-width: 980px) {
    .tm-phone-only-heading {
        display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

/* Kafelek ustawień sekcji spoza planu: widoczny, ale wyciszony (jak zablokowane sekcje paska górnego). */
.tm-tile-locked .mud-typography { color: var(--tm-ink-muted); } /* bez opacity: przezroczystość psuje kontrast AA */
.tm-tile-locked .mud-icon-root { opacity: 0.6; }

/* ---- Raporty: kafelki kategorii i kreator (uwagi 08.11.2026) ---- */
.tm-report-tile { display: flex; flex-direction: column; }
.tm-report-tile .tm-page-actions { margin-top: auto; }
.tm-report-tile-off { opacity: .65; background: var(--tm-paper-soft, transparent); }
.tm-report-tile-title { overflow-wrap: anywhere; }
.tm-report-wizard { min-width: 0; max-width: 100%; }
.tm-report-wizard-head { min-width: 0; position: sticky; top: 0; z-index: 3; background: var(--mud-palette-surface); padding: 4px 0 8px; margin-bottom: 8px; }
.tm-report-fieldset { border: 1px solid var(--tm-rule); border-radius: 8px; margin: 0 0 12px; padding: 4px 12px 8px; min-width: 0; }
.tm-report-fieldset > legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
.tm-report-groups-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 8px; }
.tm-report-variant { margin-bottom: 8px; }
.tm-report-variant-desc { margin-left: 32px; }
.tm-report-preview-list { margin: 0 0 8px; padding-left: 20px; font-size: 14px; }
.tm-report-preview-table { max-width: 100%; overflow-x: auto; }
.tm-report-preview-table .tm-num { text-align: right; }
.tm-report-presets { list-style: none; margin: 0; padding: 0; }
.tm-report-preset { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 4px 0; border-bottom: 1px solid var(--tm-rule); }
.tm-report-preset-name { min-width: 0; overflow-wrap: anywhere; }
.tm-report-wizard-map .tm-wo-map { height: min(55vh, 420px); }
@media (max-width: 600px) {
    .mud-dialog:has(.tm-report-wizard) { margin: 8px; max-height: calc(100dvh - 16px); width: calc(100vw - 16px); }
    .mud-dialog:has(.tm-report-wizard) .mud-dialog-actions { flex-wrap: wrap; gap: 4px; }
    .tm-report-groups-items { grid-template-columns: 1fr; }
}

/* Wybór zdjęć kontroli w kreatorze raportu (karta drzewa): miniatura jest przyciskiem przełączającym. */
.tm-report-photo { position: relative; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; }
.tm-report-photo-on { border-color: var(--mud-palette-primary, #2D4A2B); }
.tm-report-photo-check { position: absolute !important; top: 2px; right: 2px; background: #fff; border-radius: 50%; }
.tm-report-photo:focus-visible { outline: 3px solid var(--mud-palette-primary, #2D4A2B); outline-offset: 2px; }
.tm-report-preview-map { height: 180px; border-radius: 8px; overflow: hidden; border: 1px solid var(--tm-rule); margin-bottom: 8px; }
.tm-report-preview-map > div { width: 100%; height: 100%; }
.tm-report-field-error { color: var(--mud-palette-error, #b3261e); }