:root {

  /* ── FourthQ Design Tokens ───────────────────────────────── */

  /* Brand colors */
  --4q-blue:        #0F5AAB;
  --4q-teal:        #077090;
  --4q-green:       #3EB684;
  --4q-aqua:        #65C9D0;
  --4q-amber:       #FCB03C;
  --4q-lavender:    #838BC5;
  --4q-grey:        #727C81;
  --4q-red:         #E74C67;

  /* Extended palette */
  --4q-blue-50:     #E8F0FA;
  --4q-blue-100:    #C4D9F0;
  --4q-blue-200:    #7FADD6;
  --4q-blue-600:    #0C4A8E;
  --4q-blue-800:    #083060;
  --4q-blue-900:    #051D3A;

  --4q-teal-50:     #E6F3F5;
  --4q-teal-100:    #B3DDE5;
  --4q-teal-600:    #055C75;

  --4q-green-50:    #EAF8F1;
  --4q-green-100:   #C5EDDA;
  --4q-green-600:   #2E9466;

  --4q-amber-50:    #FFF6E5;
  --4q-amber-100:   #FEE5B0;
  --4q-amber-600:   #D19020;

  --4q-red-50:      #FDE9ED;
  --4q-red-100:     #F9C4CE;
  --4q-red-600:     #C93A52;

  --4q-grey-50:     #F5F6F8;
  --4q-grey-100:    #E5E7EB;
  --4q-grey-200:    #D1D5DB;
  --4q-grey-300:    #9CA3AF;
  --4q-grey-400:    #727C81;
  --4q-grey-500:    #6B7280;
  --4q-grey-600:    #4B5563;
  --4q-grey-700:    #374151;
  --4q-grey-800:    #1F2937;
  --4q-grey-900:    #111827;

  /* Semantic foreground */
  --fg-primary:     #111827;
  --fg-secondary:   #4B5563;
  --fg-muted:       #6B7280;
  --fg-disabled:    #9CA3AF;
  --fg-inverse:     #FFFFFF;

  /* Semantic background */
  --bg-page:        #F5F6F8;
  --bg-surface:     #FFFFFF;
  --bg-sidebar:     #F7F7F7;
  --bg-overlay:     rgba(0,0,0,0.35);
  --bg-map-chrome:  rgba(255,255,255,0.96);

  /* Borders */
  --border-default: #E5E7EB;
  --border-subtle:  #F0F0F0;
  --border-strong:  #D1D5DB;
  --border-focus:   #0F5AAB;

  /* Status */
  --status-online:  #22C55E;
  --status-offline: #EF4444;
  --status-syncing: #FCB03C;
  --status-success: #3EB684;
  --status-warning: #FCB03C;
  --status-error:   #E74C67;

  /* Interactive */
  --action-primary:            #0F5AAB;
  --action-primary-hover:      #0C4A8E;
  --action-secondary-border:   #D1D5DB;
  --action-secondary-hover:    #F5F6F8;
  --action-destructive:        #E74C67;
  --action-destructive-hover:  #C93A52;

  /* Panel section header tints */
  --section-growth-bg:     #DFF3E7;
  --section-growth-fg:     #3F7F5F;
  --section-soil-bg:       #F6DCE6;
  --section-soil-fg:       #9A4F6A;
  --section-fertilizer-bg: #F4EBD7;
  --section-fertilizer-fg: #9A7A2F;
  --section-satellite-bg:  #E0F4F5;
  --section-satellite-fg:  #077090;

  /* Typography */
  --font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', 'SF Mono', 'Cascadia Code', monospace;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  30px;
  --text-5xl:  36px;

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* Spacing (4px base grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 14px rgba(0,0,0,0.15);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:    0 10px 30px rgba(0,0,0,0.25);
  --shadow-float: 0 6px 18px rgba(0,0,0,0.14);

  /* Transitions */
  --ease-default: 200ms ease;
  --ease-panel:   300ms ease;
  --ease-fast:    150ms ease;

  /* Z-index */
  --z-map-overlay: 1000;
  --z-panel:       1000;
  --z-sidebar:     1200;
  --z-fab:         1200;
  --z-modal:       2000;
  --z-toast:       2500;
  --z-overlay:     3000;

  /* ── App variables (existing, now aligned to design tokens) ── */

    /* ── Typography ─────────────────────────────────────────── */
    --app-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* ── Brand ──────────────────────────────────────────────── */
    --color-brand: #0F5AAB;
    --color-brand-link: #0C4A8E;
    /* ── Text ───────────────────────────────────────────────── */
    --color-text-dark: #1f2937; /* slate-900 – tooltips, toast buttons */
    --color-text-body: #222; /* headings, strong values             */
    --color-text-muted: #7a7a7a; /* subheadings, secondary icons        */
    --color-text-label: #555; /* form labels, nav item text          */
    /* ── Surface ────────────────────────────────────────────── */
    --color-surface: #f7f7f7; /* sidebar, top-row                    */
    --color-page-bg: #f0f0f0; /* login shell, map detail panel       */
    /* ── Feedback ───────────────────────────────────────────── */
    --color-error: #f9777f; /* = Radzen --rz-danger (pastel red)   */
    /* ── Utilities ──────────────────────────────────────────── */
    --color-border-subtle: rgba(0, 0, 0, 0.08);
    --color-focus-ring: rgba(59, 130, 246, 0.35);
    --color-shadow-card: rgba(0, 0, 0, 0.08);
    /* ── Layout ─────────────────────────────────────────────── */
    --sidebar-width-desktop: 92px;
    --side-panel-width: 350px;
    /* ── Breakpoints (reference — not usable inside @media) ────
       bp-sm: 640px   phone / login panel collapse
       bp-md: 768px   sidebar · detail panel · shell actions    */
    /* ── Shell ─────────────────────────────────────────────── */
    --shell-status-online: #22c55e;
    --shell-status-offline: #ef4444;
    /* Shared FarmSelector / DairySelector values; components keep their own layout rules. */
    --shell-selector-height: var(--space-12);
    --shell-selector-width: 13.25rem;
    --shell-selector-max-width: 15vw;
    --shell-selector-mobile-max-width: 45vw;
    --shell-selector-radius: var(--radius-xl);
    --shell-selector-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    --shell-selector-backdrop: blur(8px);
    --shell-selector-popup-font-size: 12px;
    --shell-selector-input-padding-block: var(--rz-input-padding-block);
    --shell-selector-input-padding-inline: var(--rz-input-padding-inline);
    --shell-selector-input-border: var(--rz-input-border);
    --shell-selector-input-background-color: var(--rz-input-background-color);
    --shell-selector-input-shadow: var(--rz-input-shadow);
    --shell-selector-input-line-height: var(--rz-input-line-height);
    --shell-selector-input-transition: var(--rz-input-transition);
    --shell-selector-input-hover-border: var(--rz-input-hover-border);
    --shell-selector-input-hover-background-color: var(--rz-input-hover-background-color);
    --shell-selector-input-hover-shadow: var(--rz-input-hover-shadow);
    --shell-selector-input-focus-border: var(--rz-input-focus-border);
    --shell-selector-input-focus-background-color: var(--rz-input-focus-background-color);
    --shell-selector-input-focus-shadow: var(--rz-input-focus-shadow);
    --shell-selector-icon-size: var(--rz-icon-size);
    --shell-selector-input-value-color: var(--rz-input-value-color);
    --shell-selector-input-placeholder-color: var(--rz-input-placeholder-color);
    --shell-selector-dropdown-trigger-icon-width: var(--rz-dropdown-trigger-icon-width);
    --shell-selector-dropdown-trigger-icon-margin-block: var(--rz-dropdown-trigger-icon-margin-block);
    --shell-selector-dropdown-trigger-icon-margin-inline: var(--rz-dropdown-trigger-icon-margin-inline);
    --shell-selector-dropdown-trigger-icon-height: var(--rz-dropdown-trigger-icon-height);
    --shell-selector-icon-font-family: var(--rz-icon-font-family);
    --shell-selector-icon-weight: var(--rz-icon-weight);
    --shell-selector-icon-fill: var(--rz-icon-fill);
    --shell-selector-icon-grade: var(--rz-icon-grade);
    --shell-selector-icon-optical-size: var(--rz-icon-optical-size);
    --shell-selector-input-disabled-border: var(--rz-input-disabled-border);
    --shell-selector-input-disabled-background-color: var(--rz-input-disabled-background-color);
    --shell-selector-input-disabled-shadow: var(--rz-input-disabled-shadow);
    --shell-selector-input-disabled-color: var(--rz-input-disabled-color);
    --shell-selector-dropdown-panel-padding: var(--rz-dropdown-panel-padding);
    --shell-selector-dropdown-panel-border: var(--rz-dropdown-panel-border);
    --shell-selector-dropdown-open-background-color: var(--rz-dropdown-open-background-color);
    --shell-selector-dropdown-panel-shadow: var(--rz-dropdown-panel-shadow);
    --shell-selector-dropdown-items-padding: var(--rz-dropdown-items-padding);
    --shell-selector-dropdown-filter-padding: var(--rz-dropdown-filter-padding);
    --shell-selector-dropdown-filter-border: var(--rz-dropdown-filter-border);
    --shell-selector-input-font-size: var(--rz-input-font-size);
    --shell-selector-dropdown-item-padding: var(--rz-dropdown-item-padding);
    --shell-selector-dropdown-item-transition: var(--rz-dropdown-item-transition);
    --shell-selector-dropdown-item-hover-background-color: var(--rz-dropdown-item-hover-background-color);
    --shell-selector-dropdown-item-hover-color: var(--rz-dropdown-item-hover-color);
    --shell-selector-dropdown-item-selected-background-color: var(--rz-dropdown-item-selected-background-color);
    --shell-selector-dropdown-item-selected-color: var(--rz-dropdown-item-selected-color);
    --shell-selector-dropdown-item-selected-shadow: var(--rz-dropdown-item-selected-shadow);
    /* ── Docker ─────────────────────────────────────────────── */
    --dock-surface: #f5f6f8;
    --dock-border: #d9dde3;
    --dock-tab-color: #4b5563;
    --dock-tab-hover-bg: #eef1f5;
    --dock-tab-active-bg: #e4edf7;
    --dock-tab-active-border: #c4d6eb;
    --dock-tab-active-color: #0f172a;
    --dock-tab-dark: #111827;
    --dock-empty-color: #6b7280;
    --dock-dirty: #d97706;
    --dock-kicker: #60758d;
    --dock-meta: #64748b;
    --dock-card-border: #e1e6ed;
    --dock-accent-green: #3f7f5f;
    --dock-accent-blue: #3b82b6;
    --dock-accent-gold: #b9822e;
    /* ── NavMenu-specific ───────────────────────────────────── */
    --nav-hover-bg: #ececec;
    --nav-active: var(--4q-blue); /* selected item text, icon and marker */
    --nav-active-bg: #EDF3FB; /* selected item fill */
    --nav-footer-border: #e0e0e0;
    --nav-logout-color: #888;
    --nav-danger: #c0392b;
    --nav-danger-bg: #fdecea;
    --nav-focus: #7ca8d9;
    /* ── Main Layout ────────────────────────────────────────── */
    --layout-border: #d6d5d5;
    --layout-backdrop: rgba(0, 0, 0, 0.18);
    /* ── Buttons (global .bq-btn) ───────────────────────────────
       Shaded button inspired by the NavMenu "Sign out" item:
       quiet at rest, intent shown on hover — danger / good / neutral. */
    --btn-shade-color: var(--color-text-label); /* resting label            */
    --btn-shade-bg: #ececec; /* resting fill for --shaded */
    --btn-neutral-hover-bg: #e0e0e0; /* neutral hover fill        */
    --btn-neutral-hover-color: #111; /* neutral hover label       */
    --btn-danger: var(--nav-danger); /* destructive hover text    */
    --btn-danger-bg: var(--nav-danger-bg); /* destructive hover fill    */
    --btn-good: #1b7a3d; /* positive hover text       */
    --btn-good-bg: #e7f6ec; /* positive hover fill       */
}

html, body {
    font-family: var(--app-font-family);
    border: 0;
    margin: 0;
    padding: 0;
}

    body * {
        font-family: var(--app-font-family);
    }

a, .btn-link {
    color: var(--color-brand-link);
}

.btn-primary {
    color: #fff;
    background-color: var(--color-brand);
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ── Global buttons (.bq-btn) ──────────────────────────────────────────────
   Reusable shaded button inspired by the NavMenu "Sign out" item
   (.dock-nav-logout): a rounded, transition-based control that is quiet at
   rest and reveals its intent on hover. Compose a base with an intent:
     .bq-btn                        neutral — darker on hover
     .bq-btn.bq-btn--danger         danger  — red on hover   (destructive)
     .bq-btn.bq-btn--good           good    — green on hover (positive)
   Add .bq-btn--shaded for a filled (always-shaded) resting state.           */
.bq-btn,
.bq-confirm-dialog .rz-dialog-confirm-buttons .rz-button,
.bq-edit-dialog .e-footer-content .e-btn,
.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content .e-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--btn-shade-color);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Filled resting state (still reveals intent on hover). */
.bq-btn--shaded,
.bq-confirm-dialog .rz-dialog-confirm-buttons .rz-button,
.bq-edit-dialog .e-footer-content .e-btn,
.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content .e-btn {
    background: var(--btn-shade-bg);
}

/* Neutral (default) — darker on hover. */
.bq-btn:hover:not(:disabled),
.bq-btn--neutral:hover:not(:disabled),
.bq-confirm-dialog .rz-dialog-confirm-buttons .rz-button:hover:not(:disabled),
.bq-edit-dialog .e-footer-content .e-btn:hover:not(:disabled),
.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content .e-btn:hover:not(:disabled) {
    background: var(--btn-neutral-hover-bg);
    color: var(--btn-neutral-hover-color);
}

/* Danger — red on hover (destructive actions). Ordered after neutral so it wins. */
.bq-btn--danger:hover:not(:disabled),
.bq-confirm-dialog .rz-dialog-confirm-buttons .rz-button.rz-primary:hover:not(:disabled) {
    background: var(--btn-danger-bg);
    color: var(--btn-danger);
}

/* Good — green on hover (positive actions). */
.bq-btn--good:hover:not(:disabled) {
    background: var(--btn-good-bg);
    color: var(--btn-good);
}

.bq-btn:focus-visible,
.bq-confirm-dialog .rz-dialog-confirm-buttons .rz-button:focus-visible,
.bq-edit-dialog .e-footer-content .e-btn:focus-visible,
.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content .e-btn:focus-visible {
    outline: 2px solid var(--nav-focus);
    outline-offset: 2px;
}

.bq-btn:disabled,
.bq-confirm-dialog .rz-dialog-confirm-buttons .rz-button:disabled,
.bq-edit-dialog .e-footer-content .e-btn:disabled,
.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content .e-btn:disabled {
    cursor: default;
    opacity: 0.55;
}

/* Icons (e.g. RadzenIcon => .rzi) follow the button's current colour. */
.bq-btn .rzi {
    font-size: 1.1em;
    color: inherit;
}

/* Radzen creates confirmation buttons internally, so an opt-in dialog class
   bridges them to the shared button system and modal footer alignment. */
.bq-confirm-dialog .rz-dialog-confirm-buttons {
    justify-content: flex-end;
}

.bq-confirm-dialog .rz-dialog-confirm-buttons .rz-button {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    letter-spacing: normal;
    text-transform: none;
    background-image: none;
    box-shadow: none;
}

.bq-confirm-dialog .rz-dialog-confirm-buttons .rz-button:hover:not(:disabled),
.bq-confirm-dialog .rz-dialog-confirm-buttons .rz-button:active:not(:disabled) {
    background-image: none;
    box-shadow: none;
}

/* Syncfusion creates edit-dialog and filter-popup buttons internally. These hooks
   bridge both to the shared button system without replacing their footers. */
.bq-edit-dialog .e-footer-content,
.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content {
    justify-content: flex-end;
}

.bq-edit-dialog .e-footer-content .e-btn,
.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content .e-btn {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    letter-spacing: normal;
    text-transform: none;
    background-image: none;
    box-shadow: none;
    background: var(--btn-shade-bg) !important;
    border-color: transparent !important;
    color: var(--btn-shade-color) !important;
}

.bq-edit-dialog .e-footer-content .e-btn:hover:not(:disabled),
.bq-edit-dialog .e-footer-content .e-btn:active:not(:disabled),
.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content .e-btn:hover:not(:disabled),
.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content .e-btn:active:not(:disabled) {
    background-image: none;
    box-shadow: none;
    background: var(--btn-neutral-hover-bg) !important;
    color: var(--btn-neutral-hover-color) !important;
}

.bq-edit-dialog .e-footer-content .e-btn.e-primary:hover:not(:disabled) {
    background: var(--btn-good-bg) !important;
    color: var(--btn-good) !important;
}

.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content .e-btn.e-primary:hover:not(:disabled) {
    background: var(--4q-blue-50) !important;
    color: var(--4q-blue) !important;
}

.gz-modal-body .e-filter-popup.e-checkboxfilter .e-footer-content .e-btn:not(.e-primary):hover:not(:disabled) {
    background: var(--btn-danger-bg) !important;
    color: var(--btn-danger) !important;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* The pre-Blazor offline status is outside #app, so these styles are global. */
.offline-preparation {
    position: fixed;
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    left: var(--space-4);
    width: min(24rem, calc(100vw - 2 * var(--space-4)));
    z-index: 1200;
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--space-2);
    background: var(--bg-surface);
    color: var(--fg-primary);
    box-shadow: var(--shadow-md);
    font: var(--text-sm)/1.5 var(--font-sans);
}

.offline-preparation p { margin: 0; }
.offline-preparation button {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--action-secondary-border);
    border-radius: var(--space-1);
    background: var(--bg-surface);
    color: var(--action-primary);
}
.offline-preparation button:focus-visible { outline: 2px solid var(--border-focus); }
@media print { .offline-preparation { display: none; } }

.app-startup-splash {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.app-startup-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.app-startup-icon {
    width: clamp(5.5rem, 18vw, 8rem);
    height: clamp(5.5rem, 18vw, 8rem);
    object-fit: contain;
    animation: app-startup-pulse 1.55s ease-in-out infinite;
    filter: drop-shadow(0 1rem 1.5rem rgba(3, 23, 61, 0.16));
}

.app-startup-progress {
    width: min(7.5rem, 42vw);
    height: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(3, 23, 61, 0.14);
}

.app-startup-progress-bar {
    display: block;
    width: var(--app-startup-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #62cdd1, #45bc91 48%, #ffb23f);
    transition: width 180ms ease;
}

.app-startup-status {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
}

@keyframes app-startup-pulse {
    0%, 100% {
        opacity: 0.74;
        transform: scale(0.94);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-startup-icon {
        animation: none;
    }
}

code {
    color: #c02d76;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.paddock-label {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--color-text-body);
    font-weight: 600;
}

.pwa-install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2000;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    backdrop-filter: blur(8px);
}

.pwa-install-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.2;
}

.pwa-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pwa-modal {
    width: min(520px, 100%);
    background: #fff;
    border-radius: 16px;
    padding: 14px 14px 12px 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.paddock-label-icon {
    background: transparent;
    border: none;
}

.paddock-label-icon span {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--color-text-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

/* Map pin marker with a short code in the head — see mapCore.buildGeoJsonLayer pointToLayer. */
.team-pin-icon {
    background: transparent;
    border: none;
    position: relative;
}

.team-pin-icon svg {
    display: block;
    /* No `fill` here: it is set per-marker on the <path>, so a team colour can override the
       #1d73f4 default (the same blue as the "my location" marker). */
    stroke: #ffffff;
    stroke-width: 1.5;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

.team-pin-icon span {
    position: absolute;
    top: 13px; /* centre of the pin head: viewBox (12,12) offset by the 1-unit margin */
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

/* MAP MODAL */
.map-container {
    position: relative; /* IMPORTANT */
}

.map-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.map-modal {
    width: min(900px, 95%);
    max-height: 90%;
    background: #fff;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.map-modal-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.map-modal-body {
    padding: 1rem;
    overflow: auto;
    max-height: calc(90vh - 60px);
}

.detail-item-wide {
    grid-column: 1 / -1;
}

.panel-section-expanded {
    transition: all 0.25s ease;
}

/* Page layout */
.page {
    display: flex;
    min-height: 100vh;
}

/* Fixed left sidebar that by default pushes content (no overlay) */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 1200;
    box-sizing: border-box;
}

/* Main content: leave space for the sidebar by default (push layout) */
main {
    flex: 1 1 auto;
    margin-left: var(--sidebar-width);
    transition: margin-left 200ms ease;
}

/* Overlay mode: sidebar floats on top of content (no push) */
.sidebar.overlay {
    z-index: 3000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* When overlay mode is enabled the main content should not be pushed */
.sidebar.overlay + main,
.sidebar.overlay + main > .content {
    margin-left: 0;
}

/* Small-screen behavior: keep overlay on small devices */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
    }

    main {
        margin-left: 0;
    }
}


.panel-more-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

    .panel-more-btn .rz-button-box {
        padding: 0 !important;
    }

    .panel-more-btn .rzi {
        font-size: 14px;
    }

/* Paddock capture entry point, in the details panel's own header opposite Close. Deliberately NOT
   .panel-more-btn: that class sizes every section's expand chevron at 24px, and this is the panel's
   one primary action, so it is larger and carries the brand green.

   30px is not arbitrary — .details-panel-header has min-height: 30px, and .details-panel-body sizes
   itself with height: calc(100% - 56px) against a non-flex panel. A taller button would grow the
   header past the 56px that calc assumes and push the body's bottom out of view.

   Lives here rather than in PaddockMap.razor.css because the rules reach RadzenButton's internal
   markup, which a parent component's scoped stylesheet cannot address. */
.paddock-capture-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    /* min-height matters as much as height: Radzen's size classes carry their own min-height, which
       beats a plain height and stretched this to 30x36 — and border-radius:50% on a non-square box
       is an ellipse, not the circle the collapse buttons render. */
    min-height: 30px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    /* Fill and mark colour are deliberately NOT set: this button carries the same
       rz-light/rz-shade-lighter classes as the collapse chevrons, so leaving both alone is what
       keeps them matching — one source of truth rather than a hardcoded copy of Radzen's grey.
       currentColor makes the ring track that same inherited colour, so the border and the icon can
       never drift apart, including if the Radzen theme changes.
       box-sizing is border-box on .rz-button, so the ring sits inside the 30px and the header height
       is unaffected. */
    border: 2px solid currentColor !important;
}

    .paddock-capture-btn .rz-button-box {
        padding: 0 !important;
    }

    /* Size only, exactly like .panel-more-btn — the colour comes from Radzen, same as the chevrons. */
    .paddock-capture-btn .rzi {
        font-size: 18px;
    }

/* ── Shell actions: panel-shift (desktop only) ──────────────────────────────
   When PaddockMap's detail panel is open AND it is the only tab, the overlaid
   actions shift left so they sit beside the panel rather than over it.
   :not(.has-tabs) ensures the shift is suppressed when multiple tabs are open
   (actions are then inline in the tab bar and should never move).
   Mobile is excluded because the panel slides from the bottom, not the right.
   transition is on the element in DockWorkspaceHost.razor.css.
   --side-panel-width is declared in global :root because this rule is outside
   PaddockMap's isolated stylesheet.                                      */

@media (min-width: 769px) {
    .dock-workspace-shell:has(.details-panel.open) .dock-top-bar:not(.has-tabs) .dock-bar-actions {
        right: var(--side-panel-width, 350px);
    }
}

/* ── Chart tooltips must never sit over a modal ─────────────────────────────
   Radzen appends chart tooltips to <body> at z-index 2000, above the overlay's
   1000, and opens them from a 100ms-throttled mousemove handler — so the tap
   that opens a modal raises the tooltip ~100ms later, after any JS the modal
   host could run. On touch nothing ever closes it again (no pointer leaves the
   chart), so it stays over the modal. CSS is used instead of JS because it does
   not care when the tooltip appears. ModalOverlayHost closes it for real once
   the modal is gone, before this rule stops applying.
   Global, not in ModalOverlayHost.razor.css: the popups are body children,
   outside that component's scoped-CSS subtree.                            */
body:has(.modal-overlay-backdrop) .rz-chart-tooltip,
body:has(.modal-overlay-backdrop) .e-chart [id$="_tooltip"] {
    display: none;
}

/* Syncfusion popups live under <body>, outside the selectors' scoped styles. */
.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) {
    padding: var(--shell-selector-dropdown-panel-padding, var(--rz-dropdown-panel-padding));
    border: var(--shell-selector-dropdown-panel-border, var(--rz-dropdown-panel-border));
    border-radius: var(--shell-selector-radius);
    background-color: var(--shell-selector-dropdown-open-background-color, var(--rz-dropdown-open-background-color));
    box-shadow: var(--shell-selector-dropdown-panel-shadow, var(--rz-dropdown-panel-shadow));
    font-family: var(--app-font-family);
    font-size: var(--shell-selector-popup-font-size);
}

.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-list-parent {
    padding: var(--shell-selector-dropdown-items-padding, var(--rz-dropdown-items-padding));
}

.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-filter-parent {
    padding: var(--shell-selector-dropdown-filter-padding, var(--rz-dropdown-filter-padding));
    border: 0;
    border-bottom: var(--shell-selector-dropdown-filter-border, var(--rz-dropdown-filter-border));
    box-shadow: none;
}

.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-filter-parent input.e-input-filter {
    color: var(--shell-selector-input-value-color, var(--rz-input-value-color));
    font-family: inherit;
    font-size: var(--shell-selector-input-font-size, var(--rz-input-font-size));
    line-height: var(--shell-selector-input-line-height, var(--rz-input-line-height));
}

.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-list-item,
.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-selectall-parent {
    height: auto;
    min-height: 0;
    padding: var(--shell-selector-dropdown-item-padding, var(--rz-dropdown-item-padding));
    color: var(--shell-selector-input-value-color, var(--rz-input-value-color));
    line-height: var(--shell-selector-input-line-height, var(--rz-input-line-height));
    text-indent: 0;
    transition: var(--shell-selector-dropdown-item-transition, var(--rz-dropdown-item-transition));
}

.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-list-item:hover,
.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-list-item.e-hover,
.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-list-item.e-item-focus {
    background-color: var(--shell-selector-dropdown-item-hover-background-color, var(--rz-dropdown-item-hover-background-color));
    color: var(--shell-selector-dropdown-item-hover-color, var(--rz-dropdown-item-hover-color));
}

.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-list-item.e-active,
.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-list-item.e-active.e-hover,
.e-ddl.e-popup:is(.farm-dropdown, .bq-dairy-dropdown) .e-list-item.e-active.e-item-focus {
    border-radius: 0;
    background-color: var(--shell-selector-dropdown-item-selected-background-color, var(--rz-dropdown-item-selected-background-color));
    color: var(--shell-selector-dropdown-item-selected-color, var(--rz-dropdown-item-selected-color));
    box-shadow: var(--shell-selector-dropdown-item-selected-shadow, var(--rz-dropdown-item-selected-shadow));
}

.fetch-tooltip .rz-tooltip-content {
    background-color: rgba(255, 255, 255, 0.96);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border-subtle);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* Print-only footer stamped by bqUtils in js/utilities.js — never shown on screen. */
.print-footer {
    display: none;
}

@media print {
    /* Bottom margin is wider than the rest: the footer is fixed, so it reserves no space in
       the flow, and this is the breathing room between the last content line and the stamp. */
    @page {
        margin: 12mm 12mm 12mm;
    }

    @page bq-landscape {
        size: landscape;
    }

    @page bq-portrait {
        size: portrait;
    }

    /* Name the document's first page before the browser reaches nested dock content. */
    body:has(.dock-pane.active .print-landscape),
    .print-landscape {
        page: bq-landscape;
    }

    body:has(.dock-pane.active .print-portrait),
    .print-portrait {
        page: bq-portrait;
    }

    /* The active dock pane is the print document; all app chrome is screen-only. */
    .sidebar,
    .mobile-menu-btn,
    .mobile-menu-backdrop,
    .dock-top-bar,
    .modal-overlay-backdrop,
    .pwa-install-banner,
    .pwa-modal-backdrop,
    #blazor-error-ui,
    .rz-popup,
    .rz-overlaypanel,
    .rz-dialog-mask,
    .rz-dialog-wrapper,
    .rz-context-menu,
    .rz-tooltip,
    .rz-chart-tooltip,
    .e-chart [id$="_tooltip"] {
        display: none !important;
    }

    /* Unwind the viewport-height scroll chain so the active pane can paginate. */
    html,
    body,
    #app,
    .page,
    main,
    .content,
    .dock-workspace-shell,
    .dock-content-surface,
    .dock-pane.active {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .page,
    .dock-workspace-shell {
        display: block !important;
    }

    main {
        margin-left: 0 !important;
    }

    body {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Shared conventions for pages that opt in to browser printing.
       Deliberately no break-inside: avoid here — a section is a page-sized unit, and any
       section taller than one sheet makes "never split me" and "start me on a new page"
       contradictory. Chromium resolves that by splitting anyway; Firefox keeps the section
       whole, overflows the sheet, and then drops the forced breaks for every section after
       it. Keeping content together is the job of the individual cards inside a section. */
    .print-section + .print-section {
        break-before: page;
        page-break-before: always;
    }

    .print-hide {
        display: none !important;
    }

    /* Repeats on every sheet: a fixed box is placed in the same position on every page in
       paged media (CSS Positioned Layout 3). That is the only footer mechanism all three
       engines support — the @page margin boxes (@bottom-left) are Chromium 131+ only, with
       no Firefox or Safari implementation.
       Full width and opaque, not just bottom-left text: a fixed box reserves no space in the
       flow, so on a page whose content runs to the bottom the two would otherwise overlap and
       the stamp would be the thing that loses. Colours are literal — do not swap in tokens,
       Chrome and Safari drop <body> backgrounds when printing.
       Negative offsets push it down into the page's bottom margin band, clear of the content
       area entirely, so it cannot collide with a chart that runs to the foot of the sheet.
       These two numbers are the placement knob — they must stay smaller than the matching
       @page margins above or the stamp falls off the paper. */
    .print-footer {
        display: block;
        position: fixed;
        left: 0mm;
        bottom: 0mm;
        width: 100%;
        padding-top: 2mm;
        background: #ffffff;
        color: #6b7280;
        font-size: 8pt;
    }
}