:root {
    /* Brand and semantic colors */
    --color-primary-500: #2e7d32;
    --color-primary-700: #1b5e20;
    --color-primary-subtle: #e8f5e9;
    --color-danger-500: #c62828;
    --color-danger-700: #8e0000;
    --color-info-500: #1565c0;
    --color-info-700: #0d47a1;
    --color-warning-500: #ef9f24;

    /* Text, surfaces, borders, and overlays */
    --color-text-primary: #243a27;
    --color-text-secondary: #526256;
    --color-text-muted: #6b786d;
    --color-text-inverse: white;
    --color-surface-page: #f0f2f5;
    --color-surface: white;
    --color-surface-subtle: #f8faf8;
    --color-border-default: #ddd;
    --color-border-control: #ccc;
    --color-border-primary: #2e7d32;
    --color-overlay-default: rgba(0, 0, 0, 0.45);
    --color-focus-ring: rgba(46, 125, 50, 0.24);

    /* Typography */
    --font-family-base: Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 15px;
    --font-size-xl: 16px;
    --font-size-heading-sm: 18px;
    --font-size-heading-md: 20px;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 10px;
    --space-5: 12px;
    --space-6: 14px;
    --space-7: 16px;
    --space-8: 20px;
    --space-9: 24px;
    --space-10: 32px;
    --space-11: 40px;

    /* Shape */
    --radius-none: 0;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-round: 50%;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-focus: 0 0 0 3px rgba(46, 125, 50, 0.16);
    --shadow-panel: -6px 0 20px rgba(0, 0, 0, 0.20);
    --shadow-card: 0 12px 35px rgba(0, 0, 0, 0.20);
    --shadow-modal: 0 22px 60px rgba(13, 45, 17, 0.3);

    /* Motion */
    --duration-instant: 0ms;
    --duration-fast: 0.14s;
    --duration-standard: 0.15s;
    --duration-emphasis: 0.16s;
    --duration-panel: 0.3s;

    /* Existing application layers */
    --z-panel: 5000;
    --z-editor: 9999;
    --z-modal: 10000;
    --z-tree-card: 10001;
    --z-photo-modal: 10002;
    --z-field-card: 10003;
    --z-confirmation: 10006;
    --z-overlay: 11000;
    --z-overlay-raised: 11100;
    --z-bulk: 12000;
    --z-auth: 20000;
    --z-loader: 20001;
    --z-notification: 21000;

    /* Application shell */
    --sidebar-width-collapsed: 72px;
    --sidebar-width-expanded: 248px;
    --sidebar-mobile-width: min(304px, calc(100vw - 48px));
    --z-sidebar-overlay: 8999;
    --z-sidebar: 9000;

    /* Button and form-control primitives */
    --control-height: 44px;
    --control-height-sm: 36px;
    --control-height-lg: 48px;
    --control-padding-x: 14px;
    --control-border: 1px solid var(--color-border-control);
    --control-focus-ring: 0 0 0 3px var(--color-focus-ring);
    --control-disabled-opacity: 0.58;
    --textarea-min-height: 104px;

    /* Card and structured-content foundation */
    --card-background: var(--color-surface);
    --card-background-subtle: var(--color-surface-subtle);
    --card-border-color: #dce8dd;
    --card-border: 1px solid var(--card-border-color);
    --card-radius: var(--radius-xl);
    --card-radius-strong: var(--radius-2xl);
    --card-padding: var(--space-7);
    --card-section-gap: var(--space-7);
    --card-content-gap: var(--space-4);
    --card-divider-color: rgba(82, 98, 86, 0.18);
    --card-shadow-subtle: 0 5px 16px rgba(35, 87, 40, 0.06);
    --card-shadow-dialog: var(--shadow-modal);
    --card-title-color: var(--color-text-primary);
    --card-label-color: var(--color-text-secondary);
    --card-value-color: var(--color-text-primary);
    --card-secondary-color: var(--color-text-muted);
    --card-hover-background: #fbfdfb;
    --card-hover-border-color: rgba(46, 125, 50, 0.32);
    --history-badge-background: var(--color-primary-subtle);
    --history-badge-color: var(--color-primary-700);
    --empty-state-border: 1px dashed #cbd8ce;

    /* UI polish and consistency */
    --ui-overlay-background: rgba(14, 35, 24, 0.62);
    --ui-dialog-header-background: linear-gradient(135deg, var(--color-primary-subtle), var(--color-surface) 72%);
    --ui-list-item-padding: var(--space-6);
    --ui-list-item-gap: var(--space-4);
    --ui-list-item-border: var(--card-border);
    --ui-list-item-radius: var(--card-radius);
    --ui-badge-padding-y: var(--space-1);
    --ui-badge-padding-x: var(--space-3);
    --ui-icon-size: 22px;
    --ui-scrollbar-size: 10px;
    --ui-scrollbar-track: rgba(220, 232, 221, 0.42);
    --ui-scrollbar-thumb: #b7cab9;
    --ui-scrollbar-thumb-hover: #8ead91;
}

/* IRR-4 irrigation workspace */
.irrigation-view {
    position: fixed;
    inset: 0 0 0 auto;
    width: clamp(420px, 36vw, 500px);
    z-index: 850;
    overflow-y: auto;
    background: var(--surface, #f6f7f4);
    padding: 24px 20px 48px;
    border-inline-start: 1px solid var(--border, #d9ddd6);
    box-shadow: -12px 0 32px rgb(20 40 25 / 12%);
}

.irrigation-open [id="container"] { margin-inline-end: clamp(420px, 36vw, 500px); }
.irrigation-view[hidden], .irrigation-dialog[hidden] { display: none; }
.irrigation-header, .irrigation-section-heading, .irrigation-sensor-card__header,
.irrigation-form-actions, .irrigation-session-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.irrigation-header { margin-bottom: 20px; }
.irrigation-header-actions { display: flex; gap: 8px; }
.irrigation-panel-toggle { display: none; }
.irrigation-header h2, .irrigation-section-heading h3 { margin: 0; }
.irrigation-eyebrow { margin: 0 0 4px; color: var(--text-muted, #667064); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.irrigation-field-control { display: grid; gap: 6px; max-width: 520px; margin-bottom: 18px; }
.irrigation-status { min-height: 28px; margin: 8px 0 18px; color: var(--text-muted, #667064); }
.irrigation-status[data-error="true"] { color: var(--danger, #a63b32); }
.irrigation-status .button { margin-inline-start: 10px; }
.irrigation-section-heading { align-items: flex-start; margin: 24px 0 14px; }
.irrigation-section-heading p { margin: 5px 0 0; color: var(--text-muted, #667064); }
.irrigation-sensor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.irrigation-sensor-card, .irrigation-active-card, .irrigation-start-form, .irrigation-management {
    border: 1px solid var(--border, #d9ddd6);
    border-radius: var(--radius-lg, 14px);
    background: var(--surface-raised, #fff);
    padding: 18px;
    box-shadow: 0 4px 18px rgb(30 50 30 / 5%);
}
.irrigation-sensor-card h4, .irrigation-active-card h4 { margin: 0; }
.irrigation-sensor-code, .irrigation-sensor-description, .irrigation-latest-reading span { display: block; color: var(--text-muted, #667064); }
.irrigation-sensor-description { margin: 10px 0; }
.irrigation-latest-reading { display: grid; gap: 4px; margin: 16px 0; }
.irrigation-sensor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.irrigation-measurement-form, .irrigation-management-form, .irrigation-dialog-form, .irrigation-start-form { display: grid; gap: 14px; }
.irrigation-measurement-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: end; }
.irrigation-measurement-form label, .irrigation-management-form label, .irrigation-dialog-form label,
.irrigation-start-form > label { display: grid; gap: 6px; }
.irrigation-measurement-form button { min-height: 44px; grid-column: 1 / -1; }
.irrigation-management { margin-bottom: 16px; }
.irrigation-management-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.irrigation-management-form .irrigation-form-actions { grid-column: 1 / -1; justify-content: flex-start; }
.irrigation-session-section { margin-top: 30px; }
.irrigation-start-form { max-width: 720px; }
.irrigation-start-form fieldset { display: flex; flex-wrap: wrap; gap: 18px; border: 0; padding: 0; margin: 0; }
.irrigation-start-form legend { width: 100%; font-weight: 700; margin-bottom: 6px; }
.irrigation-preview-result { min-height: 24px; font-weight: 650; color: var(--accent, #356b43); }
.irrigation-session-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; }
.irrigation-session-facts dt { color: var(--text-muted, #667064); }
.irrigation-session-facts dd { margin: 0; font-weight: 650; }
.irrigation-session-note { padding: 10px 12px; background: var(--surface-muted, #f2f4f0); border-radius: 10px; }
.irrigation-session-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 18px; }
.irrigation-empty { padding: 20px; border: 1px dashed var(--border, #d9ddd6); border-radius: 12px; color: var(--text-muted, #667064); }
.irrigation-dialog { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; padding: 20px; background: rgb(15 25 18 / 55%); }
.irrigation-dialog-card { width: min(480px, 100%); max-height: min(90dvh, 680px); overflow-y: auto; background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 20px 60px rgb(0 0 0 / 25%); }
.irrigation-dialog-card h3 { margin-top: 0; }
.irrigation-form-actions { justify-content: flex-end; flex-wrap: wrap; }
.button--danger { background: #9d3d35; border-color: #9d3d35; color: #fff; }
.irrigation-row-chooser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.irrigation-row-chooser details { position: relative; }
.irrigation-row-chooser summary { list-style: none; }
.irrigation-row-chooser summary::-webkit-details-marker { display: none; }
.irrigation-row-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; margin-top: 6px; padding: 10px; border: 1px solid var(--border, #d9ddd6); border-radius: 10px; background: #fff; }
.irrigation-row-option { display: flex; align-items: center; gap: 7px; min-height: 44px; }
.irrigation-row-summary, .irrigation-map-selection-hint { grid-column: 1 / -1; margin: 0; color: var(--text-muted, #667064); }
.irrigation-map-selection-hint { color: var(--accent, #356b43); font-weight: 650; }

@media (max-width: 700px) {
    .irrigation-open [id="container"] { margin-inline-end: 0; }
    .irrigation-view, .sidebar-expanded .irrigation-view { inset: auto 0 0; width: 100%; height: min(62dvh, 660px); padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); border-inline-start: 0; border-top: 1px solid var(--border, #d9ddd6); border-radius: 18px 18px 0 0; transition: height .2s ease; }
    .irrigation-panel-toggle { display: inline-flex; }
    .irrigation-panel-collapsed .irrigation-view { height: 86px; overflow: hidden; }
    .irrigation-map-selecting .irrigation-view { height: 150px; overflow: hidden; }
    .irrigation-sensor-grid { grid-template-columns: minmax(0, 1fr); }
    .irrigation-section-heading, .irrigation-sensor-card__header { align-items: stretch; flex-direction: column; }
    .irrigation-sensor-actions { justify-content: flex-start; }
    .irrigation-measurement-form, .irrigation-management-form { grid-template-columns: minmax(0, 1fr); }
    .irrigation-management-form .irrigation-form-actions { grid-column: auto; }
    .irrigation-view input, .irrigation-view select, .irrigation-view textarea,
    .irrigation-view button, .irrigation-dialog button, .irrigation-dialog input, .irrigation-dialog textarea { min-height: 44px; }
    .irrigation-session-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .irrigation-row-chooser { grid-template-columns: minmax(0, 1fr); }
    .irrigation-row-summary, .irrigation-map-selection-hint { grid-column: auto; }
    .irrigation-dialog { align-items: end; padding: 10px; }
    .irrigation-dialog-card { width: 100%; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* IRR-5B irrigation journal */
.irrigation-journal-view {
    position: fixed;
    inset: 0 0 0 var(--sidebar-width-collapsed, 76px);
    z-index: 820;
    overflow-y: auto;
    padding: 28px clamp(18px, 3vw, 44px) 48px;
    background: var(--color-surface-page, #f6f7f4);
}
.sidebar-expanded .irrigation-journal-view { inset-inline-start: var(--sidebar-width-expanded, 260px); }
.irrigation-journal-view[hidden] { display: none; }
.irrigation-journal-header, .irrigation-journal-month-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.irrigation-journal-header { margin-bottom: 24px; }
.irrigation-journal-header h2, .irrigation-journal-month-nav h3 { margin: 0; }
.irrigation-journal-eyebrow { margin: 0 0 4px; color: var(--color-text-muted, #667064); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.irrigation-journal-layout { display: grid; grid-template-columns: minmax(440px, 1.2fr) minmax(320px, .8fr); gap: 24px; align-items: start; }
.irrigation-journal-calendar-panel, .irrigation-journal-day-panel {
    min-width: 0; padding: 20px; border: 1px solid var(--card-border-color, #dce8dd); border-radius: var(--radius-xl, 16px); background: var(--color-surface, #fff); box-shadow: var(--card-shadow-subtle);
}
.irrigation-journal-day-panel { position: sticky; top: 24px; }
.irrigation-journal-status { min-height: 24px; margin: 10px 0; color: var(--color-text-muted, #667064); }
.irrigation-journal-status.is-error { color: var(--color-danger-500, #a63b32); }
.irrigation-journal-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.irrigation-journal-weekday { padding: 8px 2px; text-align: center; color: var(--color-text-muted, #667064); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.irrigation-journal-day { display: flex; min-width: 0; min-height: 112px; padding: 9px; flex-direction: column; align-items: flex-start; gap: 5px; border: 1px solid var(--card-border-color, #dce8dd); border-radius: 10px; background: #fff; color: inherit; text-align: start; }
.irrigation-journal-day.is-empty { border-color: transparent; background: transparent; }
.irrigation-journal-day.has-irrigation { border-color: #2d6fb7; background: #e7f1ff; }
.irrigation-journal-day.is-selected { outline: 3px solid #245f9f; outline-offset: 1px; }
.irrigation-journal-day:focus-visible { outline: 3px solid var(--color-focus, #79b88a); outline-offset: 2px; }
.irrigation-journal-day-number { font-size: 1rem; font-weight: 750; }
.irrigation-journal-day-indicator { overflow-wrap: anywhere; color: #194f87; font-size: .76rem; font-weight: 700; }
.irrigation-journal-weather { display: grid; gap: 2px; min-width: 0; color: var(--color-text-muted, #667064); font-size: .74rem; line-height: 1.2; }
.irrigation-journal-weather-temperature, .irrigation-journal-weather-condition { white-space: nowrap; }
.irrigation-journal-weather-missing { color: var(--color-text-muted, #667064); }
.irrigation-journal-weather-status { min-height: 20px; margin-top: 10px; color: var(--color-text-muted, #667064); font-size: .78rem; }
.irrigation-journal-weather-attribution { display: inline-block; margin-top: 3px; color: var(--color-text-muted, #667064); font-size: .74rem; }
.irrigation-journal-weather-attribution[hidden] { display: none; }
.irrigation-journal-day-cards { display: grid; gap: 14px; }
.irrigation-journal-card { padding: 17px; border: 1px solid var(--card-border-color, #dce8dd); border-radius: 12px; background: #fff; }
.irrigation-journal-card h4 { margin: 0 0 12px; }
.irrigation-journal-card h5 { margin: 14px 0 7px; }
.irrigation-journal-card ul { margin: 0; padding-inline-start: 20px; }
.irrigation-journal-fact { margin: 7px 0; overflow-wrap: anywhere; }
.irrigation-journal-empty { color: var(--color-text-muted, #667064); }
.irrigation-journal-more { width: 100%; min-height: 44px; margin-top: 14px; }

@media (max-width: 900px) {
    .irrigation-journal-layout { grid-template-columns: minmax(0, 1fr); }
    .irrigation-journal-day-panel { position: static; }
}

@media (max-width: 700px) {
    .irrigation-journal-view, .sidebar-expanded .irrigation-journal-view { inset: 0; padding: max(18px, env(safe-area-inset-top)) 10px max(28px, env(safe-area-inset-bottom)); }
    .irrigation-journal-calendar-panel, .irrigation-journal-day-panel { padding: 12px; }
    .irrigation-journal-calendar { gap: 3px; }
    .irrigation-journal-day { min-height: 88px; padding: 5px 3px; gap: 3px; }
    .irrigation-journal-day-indicator { font-size: .62rem; line-height: 1.15; }
    .irrigation-journal-weather { font-size: .61rem; letter-spacing: -.02em; }
    .irrigation-journal-weather-temperature { white-space: nowrap; }
    .irrigation-journal-weather-condition { overflow: hidden; max-width: 100%; text-overflow: clip; white-space: nowrap; }
    .irrigation-journal-view button { min-height: 44px; }
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    background: var(--color-surface-page);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.language-content-en {
    display: none;
}

html[lang="en"] .language-content-ru {
    display: none;
}

html[lang="en"] .language-content-en {
    display: inline;
}

button:not(:disabled) {
    cursor: pointer;
}

/* Design System primitives: buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--control-padding-x);
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    transition:
        background-color var(--duration-standard) ease,
        border-color var(--duration-standard) ease,
        color var(--duration-standard) ease,
        box-shadow var(--duration-standard) ease,
        transform var(--duration-fast) ease;
}

.button--primary {
    border-color: var(--color-primary-500);
    background: var(--color-primary-500);
    color: var(--color-text-inverse);
}

.button--primary:hover:not(:disabled):not(.is-loading) {
    border-color: var(--color-primary-700);
    background: var(--color-primary-700);
}

.button--secondary {
    border-color: var(--color-border-primary);
    background: var(--color-surface);
    color: var(--color-primary-500);
}

.button--secondary:hover:not(:disabled):not(.is-loading) {
    background: var(--color-primary-subtle);
}

.button--danger {
    border-color: var(--color-danger-500);
    background: var(--color-danger-500);
    color: var(--color-text-inverse);
}

.button--danger:hover:not(:disabled):not(.is-loading) {
    border-color: var(--color-danger-700);
    background: var(--color-danger-700);
}

.button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--color-primary-500);
}

.button--ghost:hover:not(:disabled):not(.is-loading) {
    background: var(--color-primary-subtle);
}

.button--icon {
    width: var(--control-height);
    min-width: var(--control-height);
    padding: 0;
    flex: 0 0 var(--control-height);
}

.button--sm {
    min-height: var(--control-height-sm);
    padding-inline: var(--space-4);
    font-size: var(--font-size-sm);
}

.button--md {
    min-height: var(--control-height);
}

.button--lg {
    min-height: var(--control-height-lg);
    padding-inline: var(--space-7);
    font-size: var(--font-size-lg);
}

.button--full {
    width: 100%;
}

.button:focus-visible {
    outline: none;
    box-shadow: var(--control-focus-ring);
}

.button:active:not(:disabled):not(.is-loading) {
    transform: translateY(1px);
}

.button:disabled,
.button.is-loading {
    cursor: not-allowed;
    opacity: var(--control-disabled-opacity);
}

.button.is-loading {
    pointer-events: none;
}

/* Design System primitives: form controls */
.form-control,
.form-select,
.form-textarea {
    width: 100%;
    min-height: var(--control-height);
    padding: 9px var(--space-5);
    box-sizing: border-box;
    border: var(--control-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: 1.35;
    transition:
        border-color var(--duration-standard) ease,
        box-shadow var(--duration-standard) ease,
        background-color var(--duration-standard) ease;
}

.form-select {
    padding-right: var(--space-10);
}

.form-textarea {
    min-height: var(--textarea-min-height);
    resize: vertical;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled),
.form-textarea:hover:not(:disabled):not([readonly]) {
    border-color: var(--color-border-primary);
}

.form-control:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: var(--control-focus-ring);
}

.form-control:disabled,
.form-select:disabled,
.form-textarea:disabled {
    cursor: not-allowed;
    opacity: var(--control-disabled-opacity);
    background: var(--color-surface-subtle);
}

.form-control[readonly],
.form-textarea[readonly] {
    background: var(--color-surface-subtle);
}

.form-control:user-invalid,
.form-select:user-invalid,
.form-textarea:user-invalid,
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
    border-color: var(--color-danger-500);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.form-help,
.form-error {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.form-help {
    color: var(--color-text-muted);
}

.form-error {
    color: var(--color-danger-500);
}

h1 {
    margin: 0;
    padding: 15px;
    text-align: center;
    background: var(--color-primary-500);
    color: var(--color-text-inverse);
}

#homeButton {
    margin: 10px;
    padding: 10px 16px;
    background: var(--color-primary-500);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
}

#homeButton:hover {
    background: var(--color-primary-700);
}

#container {
    position: relative;
    height: calc(100vh - 110px);
    height: calc(100svh - 110px);
    height: calc(100dvh - 110px);
}

#map {
    width: 100%;
    height: 100%;
}

#panel {
    position: fixed;

    top: 110px;
    right: 0;
    bottom: 0;

    width: 380px;
    max-width: 95vw;
    height: auto;

    background: var(--color-surface);
    border-left: 1px solid var(--color-border-default);

    padding: var(--space-8);
    box-sizing: border-box;
    overflow-y: auto;

    box-shadow: var(--shadow-panel);

    z-index: var(--z-panel);

    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;

    transition:
        transform var(--duration-panel) ease,
        visibility var(--duration-panel) ease;
}

#panel.panel-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

#panel h2 {
    margin-top: 0;
    color: var(--color-primary-500);
}

#panel label {
    display: block;
    margin-bottom: 5px;
    font-weight: var(--font-weight-bold);
}

#panel input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
}

#saveTree {
    width: 100%;
    padding: 12px;
    background: var(--color-primary-500);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.tree-editor-dialog {
    width: 350px;
    max-width: calc(100% - 32px);
    min-width: 0;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

.tree-marker-popup-content {
    width: min(300px, calc(100vw - 72px));
    min-width: 0;
    overflow-wrap: anywhere;
}

.tree-marker-popup-content table {
    width: 100%;
    table-layout: fixed;
}

.tree-marker-popup-content td {
    overflow-wrap: anywhere;
}

#saveTree:hover {
    background: var(--color-primary-700);
}

#bootstrapLoader {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(240, 242, 245, 0.98);
}

.bootstrap-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);

    color: var(--color-primary-500);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.bootstrap-loader-spinner {
    width: 34px;
    height: 34px;
    border: 4px solid #c8e6c9;
    border-top-color: var(--color-primary-500);
    border-radius: var(--radius-round);
    animation: bootstrap-loader-spin 0.8s linear infinite;
}

@keyframes bootstrap-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

body[data-application-state="loading"] > #bootstrapLoader {
    display: flex;
}

.authenticated-load-error-state {
    position: fixed;
    inset: 0;
    z-index: var(--z-auth);

    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    box-sizing: border-box;

    background: rgba(240, 242, 245, 0.98);
}

body[data-application-state="authenticated_load_error"] >
    #authenticatedLoadErrorState {
    display: flex;
}

.authenticated-load-error-card {
    width: 420px;
    max-width: 100%;
    padding: 30px;
    box-sizing: border-box;

    text-align: center;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.authenticated-load-error-card h2 {
    margin: 0 0 20px;
    color: var(--color-primary-500);
}

.authenticated-load-error-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

#loginScreen {
    position: fixed;
    inset: 0;
    z-index: var(--z-auth);

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(240, 242, 245, 0.98);
}

body[data-application-state="unauthenticated"] > #loginScreen {
    display: flex;
}

.invite-password-setup-screen {
    position: fixed;
    inset: 0;
    z-index: var(--z-auth);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    box-sizing: border-box;
    background: rgba(240, 242, 245, 0.98);
}

.invite-password-setup-screen[hidden] {
    display: none;
}

.invite-password-setup-card {
    width: 420px;
    max-width: 100%;
    padding: var(--space-8);
    box-sizing: border-box;
    background: var(--color-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.invite-password-setup-card h2 {
    margin: 0 0 var(--space-3);
    color: var(--color-primary-700);
}

.invite-password-setup-card .form-help {
    margin: 0 0 var(--space-6);
    color: var(--color-text-secondary);
}

.invite-password-setup-card .form-control {
    margin-bottom: var(--space-4);
}

#invitePasswordSetupMessage {
    min-height: 1.4em;
    margin-top: var(--space-3);
    color: var(--color-danger-700);
}

#passwordRecoverySetupMessage,
#passwordRecoveryRequestMessage {
    min-height: 1.4em;
    margin-top: var(--space-3);
    color: var(--color-danger-700);
}

#passwordRecoveryRequestForm[hidden] {
    display: none;
}

#passwordRecoveryRequestForm h3 {
    margin: var(--space-4) 0;
    color: var(--color-primary-700);
}

#invitePasswordSetupComplete {
    margin-bottom: var(--space-6);
}

#loginBox {
    width: 360px;
    max-width: calc(100vw - 40px);

    background: var(--color-surface);
    padding: 30px;
    box-sizing: border-box;

    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

#loginBox h2 {
    margin-top: 0;
    margin-bottom: 20px;

    text-align: center;
    color: var(--color-primary-500);
}

#loginBox input {
    width: 100%;

    padding: 12px;
    margin-bottom: 15px;
    box-sizing: border-box;

    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-lg);
}

#loginButton {
    width: 100%;
    padding: 12px;

    background: var(--color-primary-500);
    color: var(--color-text-inverse);

    border: none;
    border-radius: var(--radius-sm);

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: #526256;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
}

.language-switcher select {
    min-height: 34px;
    padding: 5px 26px 5px 8px;
    border: 1px solid #b9cbbb;
    border-radius: 7px;
    background: var(--color-surface);
    color: #244428;
    font: inherit;
}

.language-switcher-login {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 12px;
}

#loginButton:hover {
    background: var(--color-primary-700);
}

.login-invite-only-message {
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    text-align: center;
}

.field-row-direction {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.field-row-direction legend {
    padding: 0 var(--space-2);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.field-row-direction-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.field-row-direction-actions .is-selected {
    border-color: var(--color-primary-500);
    background: var(--color-primary-subtle);
    box-shadow: inset 0 0 0 1px var(--color-primary-500);
}

.field-preview-label {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary-700);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
}

.field-numbering-label {
    color: #132a1d;
    background: rgb(255 255 255 / 88%);
    border: 1px solid rgb(19 42 29 / 32%);
    min-width: 18px;
    padding: 0 2px;
    font-size: var(--font-size-xs);
    line-height: 16px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 28%);
    pointer-events: none;
}

#topButtons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-right: 10px;
}

.tree-search {
    position: relative;
    display: flex;
    min-width: 0;
    gap: var(--space-2);
}

.tree-search-chooser {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: var(--z-panel);
    width: min(340px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    padding: var(--space-3);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.tree-search-chooser[hidden] {
    display: none;
}

.tree-search-chooser__title {
    display: block;
    margin-bottom: var(--space-2);
}

.tree-search-chooser__list {
    display: grid;
    max-height: min(308px, 50vh);
    overflow-y: auto;
}

.tree-search-chooser__option {
    display: grid;
    grid-template-columns: minmax(52px, auto) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-bottom: 1px solid var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
}

.tree-search-chooser__option:last-child {
    border-bottom: 0;
}

.tree-search-chooser__option:is(:hover, :focus-visible) {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
    background: var(--color-primary-subtle);
}

.tree-search-chooser__field {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-user-info {
    display: grid;
    min-width: 170px;
    max-width: min(280px, 100%);
    margin: 7px 0 7px auto;
    padding: 7px 11px;
    box-sizing: border-box;
    border: 1px solid #c8ddca;
    border-radius: 9px;
    overflow-wrap: anywhere;
    background: #f4faf4;
    color: #244428;
    line-height: 1.25;
}

.current-user-info[hidden] {
    display: none;
}

.current-user-caption {
    color: #66776a;
    font-size: 0.72rem;
}

.current-user-info strong {
    margin-top: 2px;
    font-size: 0.92rem;
}

.current-user-role {
    margin-top: 2px;
    color: var(--color-primary-500);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
}

.language-switcher-app {
    margin: 7px 4px;
}

#loginError {
    display: none;

    margin-top: 15px;
    color: var(--color-danger-500);
    text-align: center;
}
#logoutButton {
    margin: 10px 10px 10px 0;
    padding: 10px 16px;

    background: var(--color-danger-500);
    color: var(--color-text-inverse);

    border: none;
    border-radius: var(--radius-sm);

    font-size: var(--font-size-md);
}

#logoutButton:hover {
    background: var(--color-danger-700);
}
.trash-window {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 620px;
    max-width: calc(100vw - 30px);
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
    z-index: var(--z-modal);
}

body[data-application-state="loading"] > h1,
body[data-application-state="loading"] > #topButtons,
body[data-application-state="loading"] > #container,
body[data-application-state="loading"] > #authenticatedEmptyState,
body[data-application-state="unauthenticated"] > h1,
body[data-application-state="unauthenticated"] > #topButtons,
body[data-application-state="unauthenticated"] > #container,
body[data-application-state="unauthenticated"] > #authenticatedEmptyState,
body[data-application-state="invite_password_setup"] > h1,
body[data-application-state="invite_password_setup"] > #topButtons,
body[data-application-state="invite_password_setup"] > #container,
body[data-application-state="invite_password_setup"] > #authenticatedEmptyState,
body[data-application-state="authenticated_load_error"] > h1,
body[data-application-state="authenticated_load_error"] > #topButtons,
body[data-application-state="authenticated_load_error"] > #container,
body[data-application-state="authenticated_load_error"] >
    #authenticatedEmptyState {
    display: none;
}

body[data-application-state="authenticated_empty"] > #container {
    display: none;
}

body[data-application-state="authenticated_empty"] #topButtons >
    :not(#mobileMenuButton) {
    display: none;
}

body[data-application-state="authenticated_empty"] .sidebar-tools {
    display: none;
}

@media (max-width: 700px) {
    #topButtons {
        padding: 6px;
    }

    .tree-search {
        max-width: calc(100% - 52px);
    }

    .tree-search-chooser {
        right: 0;
        left: auto;
        max-width: calc(100vw - 12px);
    }

    .current-user-info {
        order: -1;
        width: 100%;
        max-width: none;
        margin: 0 0 4px;
    }

    .language-switcher-app {
        margin: 0 0 4px auto;
    }
}

.authenticated-empty-state {
    min-height: calc(100vh - 120px);
    padding: 32px 20px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
}

.authenticated-empty-state[hidden] {
    display: none;
}

.authenticated-empty-card {
    width: min(520px, 100%);
    padding: 32px;
    box-sizing: border-box;
    border: 1px solid #dce8dd;
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: 0 12px 32px rgba(46, 125, 50, 0.12);
    text-align: center;
}

.authenticated-empty-card h2 {
    margin: 0 0 12px;
    color: var(--color-primary-500);
}

.authenticated-empty-card p {
    margin: 0;
    color: #526256;
    line-height: 1.6;
}

.invitation-status-panel {
    position: fixed;
    z-index: var(--z-notification);
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, calc(100vw - 32px));
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid #b9d8bc;
    border-radius: var(--radius-xl);
    background: #f4fbf4;
    box-shadow: 0 8px 24px rgba(24, 72, 28, 0.16);
    color: #244b28;
}

.invitation-status-panel[hidden] {
    display: none;
}

.invitation-status-panel p {
    margin: 0;
    line-height: 1.45;
}

#invitationAccountHelp {
    margin-top: 6px;
    color: #526256;
    font-size: var(--font-size-md);
}

.invitation-status-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.invitation-status-actions:empty {
    display: none;
}

.invitation-status-actions button {
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-primary-500);
    font-weight: var(--font-weight-semibold);
}

.invitation-status-actions button:hover:not(:disabled) {
    background: var(--color-primary-subtle);
}

.invitation-status-actions button:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.invitation-status-actions button:disabled {
    cursor: wait;
    opacity: 0.6;
}

@media (max-width: 600px) {
    .invitation-status-panel {
        top: 8px;
        width: calc(100vw - 16px);
    }

    .authenticated-empty-card {
        padding: 24px 18px;
    }
}

/* Phase 5.3: Field Card */
.field-card-modal {
    padding: var(--space-9);
    background: rgba(14, 35, 24, 0.62);
    backdrop-filter: blur(4px);
}

.field-card-dialog.card {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
    border: var(--card-border);
    border-radius: var(--card-radius-strong);
    background: var(--card-background-subtle);
    box-shadow: var(--card-shadow-dialog);
}

.field-card-header.card-header {
    position: sticky;
    z-index: 3;
    top: 0;
    align-items: center;
    padding: var(--space-8) var(--space-9);
    border-bottom: 1px solid var(--card-divider-color);
    background: linear-gradient(135deg, var(--color-primary-subtle), var(--color-surface) 72%);
}

.field-card-header .card-title {
    color: var(--color-primary-700);
    font-size: clamp(var(--font-size-heading-md), 2.2vw, 24px);
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.field-card-eyebrow {
    margin-bottom: var(--space-2);
    color: var(--color-primary-500);
}

.field-card-subtitle {
    margin-top: var(--space-2);
    color: var(--card-secondary-color);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.field-card-header-actions {
    align-self: flex-start;
}

.field-card-close {
    flex: 0 0 auto;
    border-color: transparent;
    border-radius: var(--radius-round);
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.72);
}

.field-card-close:hover:not(:disabled),
.field-card-close:focus-visible {
    border-color: transparent;
    color: var(--color-primary-700);
    background: var(--color-surface);
}

.field-card-content.card-body {
    gap: var(--card-section-gap);
    padding: var(--space-9);
}

.field-card-read-content.card-body {
    gap: var(--card-section-gap);
    padding: 0;
}

.field-card-section.card-section {
    display: block;
    padding: var(--space-8);
    border-color: var(--card-border-color);
    background: var(--card-background);
    box-shadow: var(--card-shadow-subtle);
}

.field-card-section .card-section-title {
    margin: 0 0 var(--space-7);
    color: var(--card-title-color);
    font-size: var(--font-size-heading-sm);
    letter-spacing: -0.01em;
}

.field-card-section-hint {
    margin: calc(var(--space-5) * -1) 0 var(--space-7);
    color: var(--card-secondary-color);
    line-height: 1.45;
}

.field-card-details.info-list {
    grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
    gap: 0;
    overflow: hidden;
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-background-subtle);
}

.field-card-details dt,
.field-card-details dd {
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--card-divider-color);
    line-height: 1.4;
}

.field-card-details dt {
    color: var(--card-label-color);
    background: rgba(232, 245, 233, 0.45);
    font-size: var(--font-size-sm);
}

.field-card-details dd {
    color: var(--card-value-color);
    background: var(--card-background);
    font-size: var(--font-size-md);
}

.field-card-details dt:last-of-type,
.field-card-details dd:last-of-type {
    border-bottom: 0;
}

.field-card-details dd small {
    margin-top: var(--space-1);
    color: var(--card-secondary-color);
}

.field-card-status-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--space-5);
}

.field-card-status {
    padding: var(--space-6);
    border: var(--card-border);
    border-top: 3px solid var(--color-text-muted);
    border-radius: var(--card-radius);
    background: var(--card-background-subtle);
    box-shadow: var(--card-shadow-subtle);
    transition: border-color var(--duration-standard) ease,
        box-shadow var(--duration-standard) ease,
        transform var(--duration-standard) ease;
}

.field-card-status:hover {
    border-right-color: var(--card-hover-border-color);
    border-bottom-color: var(--card-hover-border-color);
    border-left-color: var(--card-hover-border-color);
    box-shadow: var(--card-shadow-subtle);
    transform: translateY(-1px);
}

.field-card-status h4 {
    min-height: 0;
    margin: 0 0 var(--space-3);
    color: var(--card-label-color);
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.field-card-status strong {
    color: var(--card-value-color);
    font-size: var(--font-size-heading-md);
}

.field-card-status span {
    margin-top: var(--space-2);
    color: var(--card-secondary-color);
}

.field-card-work-grid {
    gap: var(--space-5);
}

.field-card-work {
    padding: var(--space-6);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-background-subtle);
    box-shadow: var(--card-shadow-subtle);
}

.field-card-work h4 {
    color: var(--card-label-color);
    font-size: var(--font-size-sm);
}

.field-card-work p {
    margin-top: var(--space-3);
    color: var(--card-value-color);
    font-size: var(--font-size-md);
}

.field-card-work small {
    margin-top: var(--space-2);
    color: var(--card-secondary-color);
}

.field-card-event-list.history-list {
    gap: var(--space-5);
}

.field-card-event {
    position: relative;
    padding: var(--space-7);
    border-color: var(--card-border-color);
    border-left: 3px solid var(--color-primary-500);
    background: var(--card-background);
    box-shadow: var(--card-shadow-subtle);
}

.field-card-history-more {
    width: 100%;
    margin-top: var(--space-5);
}

.field-card-history-actions {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
}

.field-card-history-actions summary {
    display: grid;
    width: 44px;
    min-height: 44px;
    place-items: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-lg);
    list-style: none;
}

.field-card-history-actions summary::-webkit-details-marker {
    display: none;
}

.field-card-history-actions summary:focus-visible,
.field-card-history-hide:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.field-card-history-hide {
    position: absolute;
    top: 46px;
    right: 0;
    width: max-content;
    max-width: min(260px, calc(100vw - 32px));
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
    border: var(--card-border);
    border-radius: var(--radius-md);
    background: var(--card-background);
    box-shadow: var(--card-shadow-dialog);
    color: var(--card-value-color);
    cursor: pointer;
    text-align: left;
}

@media (min-width: 769px) {
    .field-card-event:has(.field-card-history-actions) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-4);
    }

    .field-card-event:has(.field-card-history-actions) >
        :not(.field-card-history-actions) {
        grid-column: 1;
    }

    .field-card-history-actions {
        position: static;
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .field-card-history-hide {
        position: static;
        margin-top: var(--space-1);
    }
}

.field-card-event-header {
    align-items: center;
    gap: var(--space-4) var(--space-5);
}

.field-card-event-header strong {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--history-badge-color);
    background: var(--history-badge-background);
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.field-card-event-header time,
.field-card-event-meta,
.field-card-event-footer,
.field-card-truncated {
    color: var(--card-secondary-color);
}

.field-card-event-meta {
    margin-top: var(--space-3);
}

.field-card-event-note {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--card-divider-color);
    color: var(--card-value-color);
}

.field-card-event-footer,
.field-card-truncated {
    margin-top: var(--space-3);
}

.field-card-empty {
    padding: var(--space-7);
    border: var(--empty-state-border);
    border-radius: var(--card-radius);
    color: var(--card-secondary-color);
    background: var(--card-background-subtle);
}

.field-edit-form.card {
    padding: var(--space-8);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-background);
    box-shadow: var(--card-shadow-subtle);
}

.field-edit-heading h3 {
    color: var(--card-title-color);
    font-size: var(--font-size-heading-sm);
}

.field-edit-heading p,
.field-edit-control {
    color: var(--card-secondary-color);
}

.field-edit-grid {
    gap: var(--space-7);
    margin-top: var(--space-7);
}

.field-edit-actions,
.field-card-actions.card-footer {
    gap: var(--space-4);
    margin-top: var(--space-7);
    padding-top: var(--space-7);
    border-top: 1px solid var(--card-divider-color);
}

.field-card-feedback {
    color: var(--card-secondary-color);
}

.field-card-notice {
    margin: var(--space-5) var(--space-9) 0;
}

@media (max-width: 760px) {
    .field-card-modal {
        padding: 0;
    }

    .field-card-dialog.card {
        min-height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .field-card-header.card-header {
        padding: var(--space-7);
    }

    .field-card-content.card-body {
        padding: var(--space-6);
    }

    .field-card-section.card-section,
    .field-edit-form.card {
        padding: var(--space-6);
    }

    .field-card-notice {
        margin-right: var(--space-6);
        margin-left: var(--space-6);
    }
}

@media (max-width: 520px) {
    .field-card-header.card-header {
        align-items: flex-start;
        padding: var(--space-5);
    }

    .field-card-header-actions {
        gap: var(--space-2);
    }

    .field-card-content.card-body {
        padding: var(--space-4);
    }

    .field-card-section.card-section,
    .field-edit-form.card {
        padding: var(--space-5);
    }

    .field-card-details.info-list {
        grid-template-columns: 1fr;
    }

    .field-card-details dt {
        padding-bottom: var(--space-1);
        border-bottom: 0;
    }

    .field-card-details dd {
        padding-top: 0;
    }

    .field-card-status-grid,
    .field-card-work-grid,
    .field-edit-grid {
        grid-template-columns: 1fr;
    }

    .field-card-event {
        padding: var(--space-5);
    }

    .field-card-event-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .field-card-event-header time {
        white-space: normal;
    }

    .field-card-notice {
        margin-right: var(--space-4);
        margin-left: var(--space-4);
    }
}

/* Hybrid application sidebar */
.app-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.app-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width-collapsed);
    box-sizing: border-box;
    overflow: visible;
    border-right: 1px solid var(--color-border-default);
    background: var(--color-surface);
    transition:
        width var(--duration-emphasis) ease,
        transform var(--duration-emphasis) ease;
}

body.sidebar-expanded .app-sidebar {
    width: var(--sidebar-width-expanded);
}

.sidebar-brand {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    align-items: center;
    min-height: 64px;
    padding: 10px 8px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border-default);
}

.sidebar-brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-500);
    color: var(--color-text-inverse);
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-bold);
}

.sidebar-brand-name {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--duration-standard) ease;
}

.sidebar-toggle {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    justify-self: end;
    opacity: 0;
    pointer-events: none;
}

body.sidebar-expanded .sidebar-brand-name,
body.sidebar-expanded .sidebar-toggle {
    opacity: 1;
    pointer-events: auto;
}

body.sidebar-collapsed .sidebar-brand {
    grid-template-columns: 1fr;
    justify-items: center;
}

body.sidebar-collapsed .sidebar-brand-name,
body.sidebar-collapsed .sidebar-brand-name {
    display: none;
}

body.sidebar-collapsed .sidebar-brand {
    position: relative;
}

body.sidebar-collapsed .sidebar-toggle {
    position: absolute;
    right: -16px;
    bottom: -16px;
    display: inline-flex;
    width: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 1px solid var(--color-border-default) !important;
    border-radius: var(--radius-round) !important;
    background: var(--color-surface) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    opacity: 1;
    pointer-events: auto;
}

.sidebar-navigation {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
    overflow-x: hidden;
    overflow-y: auto;
}

button.sidebar-nav-item {
    position: relative;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: var(--space-4);
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    color: var(--color-text-secondary) !important;
    white-space: nowrap;
}

button.sidebar-nav-item[hidden] {
    display: none;
}

button.sidebar-nav-item:hover:not(:disabled),
button.sidebar-nav-item:focus-visible {
    background: var(--color-primary-subtle) !important;
    color: var(--color-primary-700) !important;
}

.sidebar-navigation button.sidebar-nav-item.is-active {
    background: var(--color-primary-subtle) !important;
    color: var(--color-primary-700) !important;
    font-weight: var(--font-weight-bold) !important;
}

.sidebar-navigation button.sidebar-nav-item.is-active::before {
    content: "";
    position: absolute;
    inset: 8px auto 8px 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-500);
}

button.sidebar-nav-item:disabled {
    color: var(--color-text-muted) !important;
    background: transparent !important;
    opacity: 0.48;
}

.sidebar-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity var(--duration-standard) ease;
}

body.sidebar-expanded .sidebar-label,
body.sidebar-mobile-open .sidebar-label {
    display: inline;
    opacity: 1;
}

body.sidebar-collapsed button.sidebar-nav-item {
    justify-content: center;
    padding-inline: 0 !important;
}

body.sidebar-collapsed .sidebar-navigation .sidebar-label,
body.sidebar-collapsed .sidebar-tools .sidebar-label,
body.sidebar-collapsed .sidebar-logout .sidebar-label {
    display: none;
}

.sidebar-tools {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--color-border-default);
}

.sidebar-section-title {
    margin: 0;
    padding: 0 12px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar-tools-list {
    display: grid;
    gap: var(--space-1);
}

body.sidebar-collapsed .sidebar-section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

button.sidebar-tool-item.is-open {
    border-color: var(--color-border-primary) !important;
    background: var(--color-primary-subtle) !important;
    color: var(--color-primary-700) !important;
    box-shadow: inset 0 0 0 1px var(--color-focus-ring);
}

button.sidebar-tool-item.is-open::before {
    content: "";
    position: absolute;
    inset: 8px auto 8px 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-500);
}

body.sidebar-collapsed button.sidebar-nav-item:not(:disabled)::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 2;
    max-width: 220px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(4px, -50%);
    transition:
        opacity var(--duration-fast) ease,
        transform var(--duration-fast) ease;
}

body.sidebar-collapsed button.sidebar-nav-item:not(:disabled):is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translate(0, -50%);
}

.sidebar-user-area {
    display: grid;
    gap: var(--space-2);
    margin-top: auto;
    padding: var(--space-3);
    border-top: 1px solid var(--color-border-default);
    background: var(--color-surface);
}

.sidebar-user-area .current-user-info {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 4px;
    border: 0;
    background: transparent;
}

.sidebar-user-area .current-user-info[hidden] {
    display: none;
}

.sidebar-user-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    background: var(--color-primary-subtle);
    color: var(--color-primary-700);
}

.sidebar-user-copy {
    display: grid;
    min-width: 0;
    padding-left: var(--space-3);
    overflow: hidden;
    opacity: 0;
}

.sidebar-user-copy > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.sidebar-expanded .sidebar-user-copy,
body.sidebar-mobile-open .sidebar-user-copy {
    opacity: 1;
}

.sidebar-user-area .language-switcher-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
    margin: 0;
}

.sidebar-language-compact {
    display: none;
}

.sidebar-user-area .language-switcher-app .form-select {
    min-width: 0;
    height: 40px;
    min-height: 40px !important;
    padding: 6px 30px 6px 10px !important;
}

body.sidebar-collapsed .sidebar-user-area .language-switcher-app {
    display: none;
}

body.sidebar-collapsed .sidebar-language-compact {
    display: block;
    width: 46px;
    min-height: 40px !important;
    justify-self: center;
    padding-inline: 7px !important;
    font-size: var(--font-size-xs) !important;
}

.sidebar-logout {
    color: var(--color-danger-500) !important;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-sidebar-overlay);
    border: 0;
    background: var(--color-overlay-default);
}

.sidebar-overlay[hidden] {
    display: none;
}

#mobileMenuButton {
    display: none;
}

body > h1,
body > #topButtons,
body > #container,
body > #authenticatedEmptyState {
    margin-left: var(--sidebar-width-collapsed);
    transition: margin-left var(--duration-emphasis) ease;
}

body.sidebar-expanded > h1,
body.sidebar-expanded > #topButtons,
body.sidebar-expanded > #container,
body.sidebar-expanded > #authenticatedEmptyState {
    margin-left: var(--sidebar-width-expanded);
}

body[data-application-state="loading"] > .app-sidebar,
body[data-application-state="unauthenticated"] > .app-sidebar,
body[data-application-state="invite_password_setup"] > .app-sidebar,
body[data-application-state="authenticated_load_error"] > .app-sidebar,
body[data-application-state="loading"] > .sidebar-overlay,
body[data-application-state="unauthenticated"] > .sidebar-overlay,
body[data-application-state="invite_password_setup"] > .sidebar-overlay,
body[data-application-state="authenticated_load_error"] > .sidebar-overlay {
    display: none;
}

@media (max-width: 700px) {
    body > h1,
    body > #topButtons,
    body > #container,
    body > #authenticatedEmptyState,
    body.sidebar-expanded > h1,
    body.sidebar-expanded > #topButtons,
    body.sidebar-expanded > #container,
    body.sidebar-expanded > #authenticatedEmptyState {
        margin-left: 0;
    }

    .app-sidebar,
    body.sidebar-expanded .app-sidebar {
        width: var(--sidebar-mobile-width);
        max-height: 100vh;
        max-height: 100dvh;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        overflow-y: auto;
        box-shadow: var(--shadow-panel);
        transform: translateX(-105%);
    }

    body.sidebar-mobile-open .app-sidebar {
        transform: translateX(0);
    }

    .sidebar-brand,
    body.sidebar-collapsed .sidebar-brand {
        grid-template-columns: 44px minmax(0, 1fr) 40px;
        justify-items: stretch;
    }

    body.sidebar-collapsed .sidebar-brand-name,
    body.sidebar-collapsed .sidebar-toggle {
        display: inline-flex;
        opacity: 1;
        pointer-events: auto;
    }

    body.sidebar-collapsed button.sidebar-nav-item,
    button.sidebar-nav-item {
        justify-content: flex-start;
        padding-inline: 12px !important;
    }

    body.sidebar-collapsed .sidebar-navigation .sidebar-label,
    body.sidebar-collapsed .sidebar-tools .sidebar-label,
    body.sidebar-collapsed .sidebar-logout .sidebar-label,
    body.sidebar-collapsed .sidebar-user-copy {
        display: inline;
        opacity: 1;
    }

    body.sidebar-collapsed .sidebar-toggle,
    .sidebar-toggle {
        position: static;
        width: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-color: transparent !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: none;
    }

    body.sidebar-collapsed button.sidebar-nav-item::after {
        display: none;
    }

    body.sidebar-collapsed .sidebar-user-area .language-switcher-app {
        display: grid;
    }

    body.sidebar-collapsed .sidebar-language-compact {
        display: none;
    }

    body.sidebar-collapsed .sidebar-section-title {
        position: static;
        width: auto;
        height: auto;
        padding: 0 12px;
        overflow: visible;
        clip: auto;
    }

    #mobileMenuButton {
        display: inline-flex;
        min-width: 44px;
        min-height: 44px;
    }

    #topButtons {
        flex-wrap: wrap;
        padding-top: max(6px, env(safe-area-inset-top));
        padding-right: max(6px, env(safe-area-inset-right));
        padding-left: max(6px, env(safe-area-inset-left));
    }

    body.mobile-overlay-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    #panel {
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: max(var(--space-8), env(safe-area-inset-top))
            max(var(--space-8), env(safe-area-inset-right))
            max(var(--space-8), env(safe-area-inset-bottom))
            max(var(--space-8), env(safe-area-inset-left));
        transform: translateX(-100%);
        overflow-x: clip;
        overflow-y: auto;
    }

    #panel.panel-open {
        transform: translateX(0);
    }
}

@media (max-width: 600px) {
    .tree-editor-dialog {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        padding: var(--space-6) !important;
    }

    .tree-marker-popup-content {
        width: min(260px, calc(100vw - 72px));
    }

    .treePopupActions .button {
        width: 100%;
        min-height: 44px;
    }

    .tree-filter-dialog {
        height: 100vh;
        height: 100dvh;
        padding-top: max(var(--space-6), env(safe-area-inset-top)) !important;
        padding-right: max(var(--space-6), env(safe-area-inset-right)) !important;
        padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)) !important;
        padding-left: max(var(--space-6), env(safe-area-inset-left)) !important;
        overflow-x: clip;
    }

    .tree-filter-header,
    .tree-filter-actions {
        min-width: 0;
        flex-wrap: wrap;
    }

    .tree-filter-header .button,
    #closePanelButton,
    .tree-card-close,
    .field-card-close {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .tree-card-modal,
    .field-card-modal,
    .team-modal,
    .bulk-preview-modal {
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
    }
}

#treeFilterButton.is-active:not(.is-open) {
    color: var(--color-primary-700) !important;
}

#treeFilterCount {
    display: inline-flex;
    min-width: 1.4em;
    min-height: 1.4em;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: #1b5e20;
    font-size: 0.8em;
}

#treeFilterCount[hidden] {
    display: none;
}

.tree-catalog-heading {
    display: grid;
    gap: var(--space-2);
    margin-bottom: 12px;
}

.tree-catalog-heading h2 {
    margin-bottom: 0;
}

.tree-catalog-list {
    display: grid;
    gap: var(--space-3);
}

.tree-catalog-item {
    width: 100%;
    padding: 10px;
    border: 1px solid #d8e2d8;
    border-radius: var(--radius-md);
    text-align: left;
    overflow-wrap: anywhere;
    background: #f8fbf8;
}

.tree-catalog-item strong,
.tree-catalog-item span {
    display: block;
}

.tree-catalog-item span {
    margin-top: 3px;
    color: #475569;
    font-size: 0.88rem;
}

.tree-catalog-empty {
    padding: 14px;
    border-radius: var(--radius-md);
    text-align: center;
    background: #f1f5f9;
}

#showMoreTreesButton {
    width: 100%;
    margin-top: var(--space-4);
}

.tree-panel-divider {
    margin: 22px 0;
    border: 0;
    border-top: 1px solid #ddd;
}

.tree-filter-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: none;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.35);
}

.tree-filter-modal[aria-hidden="false"] {
    display: flex;
}

.tree-filter-dialog {
    width: 460px;
    max-width: 100%;
    height: 100%;
    padding: var(--space-8);
    box-sizing: border-box;
    overflow-y: auto;
    background: var(--color-surface);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.22);
}

.tree-filter-header,
.tree-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.tree-filter-header h2 {
    margin: 0;
}

.tree-filter-actions {
    margin: 16px 0;
    flex-wrap: wrap;
}

.tree-filter-groups {
    display: grid;
    gap: var(--space-5);
}

.tree-size-editor {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
}

.tree-size-editor legend {
    padding: 0 var(--space-2);
    font-weight: var(--font-weight-semibold);
}

.tree-size-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
}

.nearby-tree-chooser {
    width: min(280px, calc(100vw - 48px));
    max-width: 100%;
}

.nearby-tree-chooser__title {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--color-text-primary);
}

.nearby-tree-chooser__list {
    display: grid;
    max-height: min(308px, 50vh);
    overflow-y: auto;
}

.nearby-tree-chooser__option {
    display: grid;
    grid-template-columns: minmax(52px, auto) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-bottom: 1px solid var(--color-border-secondary);
    color: var(--color-text-primary);
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
}

.nearby-tree-chooser__option:last-child {
    border-bottom: 0;
}

.nearby-tree-chooser__option:is(:hover, :focus-visible) {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
    background: var(--color-primary-subtle);
}

.nearby-tree-chooser__option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-card-section-title {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-secondary);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.tree-card-section-content {
    grid-column: 1 / -1;
}

.tree-card-size-details {
    margin: 0;
}

.tree-filter-group {
    margin: 0;
    padding: 10px;
    border: 1px solid #dbe4db;
    border-radius: var(--radius-md);
}

.tree-filter-dropdown {
    min-width: 0;
    padding: 0;
    overflow: clip;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.tree-filter-dropdown > summary {
    display: flex;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    align-items: center;
    gap: var(--space-2);
    box-sizing: border-box;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
    list-style: none;
    transition:
        background-color var(--motion-fast),
        border-color var(--motion-fast);
}

.tree-filter-dropdown > summary::-webkit-details-marker {
    display: none;
}

.tree-filter-dropdown > summary::after {
    width: 8px;
    height: 8px;
    margin-left: auto;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--color-text-secondary);
    content: "";
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--motion-fast), color var(--motion-fast);
}

.tree-filter-dropdown > summary:hover {
    background: var(--color-surface-hover);
}

.tree-filter-dropdown[open] > summary::after {
    color: var(--color-primary-700);
    transform: translateY(2px) rotate(225deg);
}

.tree-filter-dropdown > summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-primary-500);
}

.tree-filter-dropdown[open] > summary {
    border-bottom: 1px solid var(--color-border-secondary);
    background: var(--color-primary-subtle);
}

.tree-filter-dropdown-count {
    flex: 0 0 auto;
    color: var(--color-primary-700);
}

.tree-filter-dropdown-content,
.tree-filter-dropdown > .tree-filter-options {
    min-width: 0;
    padding: var(--space-4);
}

.tree-filter-group legend {
    font-weight: var(--font-weight-bold);
}

.tree-filter-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: 160px;
    overflow-y: auto;
}

.tree-filter-options label {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    overflow-wrap: anywhere;
}

.tree-filter-modes {
    display: grid;
    gap: var(--space-5);
    margin-top: 16px;
}

.tree-filter-modes label,
.tree-filter-date-row label {
    display: grid;
    gap: 5px;
    font-weight: var(--font-weight-bold);
}

.tree-filter-modes select,
.tree-filter-date-row input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.tree-filter-date-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: 12px;
}

.tree-filter-date-row[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .tree-filter-dialog {
        width: 100%;
    }

    .tree-filter-options,
    .tree-filter-date-row {
        grid-template-columns: 1fr;
    }
}

.trash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.trash-header h2 {
    margin: 0;
}

.trash-item {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
}

.trash-item p {
    margin: 4px 0;
}

.trash-item button {
    margin-top: 8px;
    padding: 7px 12px;
}

.trash-empty {
    color: #666;
}

.trash-error {
    color: var(--color-danger-500);
}

.team-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    padding: 24px;
    background: rgba(14, 35, 24, 0.58);
    backdrop-filter: blur(3px);
    box-sizing: border-box;
}

.team-dialog {
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    margin: 0 auto;
    border: 1px solid rgba(46, 125, 50, 0.16);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 22px 60px rgba(8, 38, 22, 0.28);
    box-sizing: border-box;
}

.team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex: 0 0 auto;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #e4eee7;
    background: linear-gradient(135deg, #f4fbf5 0%, #fff 70%);
}

.team-header h2 {
    margin: 0;
    color: #1f3a29;
    font-size: 23px;
    line-height: 1.25;
}

.team-close-button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-round);
    color: #46604f;
    background: transparent;
    font: inherit;
    font-size: var(--font-size-heading-md);
    appearance: none;
    transition: color var(--duration-emphasis) ease, background-color var(--duration-emphasis) ease;
}

.team-close-button:hover {
    color: #1b5e20;
    background: var(--color-primary-subtle);
}

.team-close-button:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.team-content {
    min-height: 0;
    padding: 20px 22px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.team-field-label {
    display: block;
    margin-bottom: 7px;
    color: #294b34;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
}

.team-control {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #b9cbbf;
    border-radius: 9px;
    color: #20372a;
    background-color: #fff;
    font: inherit;
    line-height: 1.25;
    box-sizing: border-box;
    appearance: none;
    transition: border-color var(--duration-emphasis) ease, box-shadow var(--duration-emphasis) ease,
        background-color var(--duration-emphasis) ease;
}

.team-select {
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, #486852 50%),
        linear-gradient(135deg, #486852 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 13px) 19px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

.team-control:hover:not(:disabled) {
    border-color: #6f9d7b;
}

.team-control:focus {
    border-color: var(--color-primary-500);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.16);
}

.team-control:disabled {
    color: #718078;
    background-color: #eef2ef;
    cursor: not-allowed;
}

.team-section {
    margin-top: 24px;
}

.team-section h3 {
    margin: 0 0 10px;
    color: #294b34;
    font-size: var(--font-size-xl);
    line-height: 1.3;
}

.team-list {
    display: grid;
    gap: 9px;
}

.team-entry {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 13px 14px;
    border: 1px solid #dce7df;
    border-radius: 11px;
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(32, 73, 45, 0.05);
}

.team-entry p {
    margin: 0;
    overflow-wrap: anywhere;
}

.team-entry-owner {
    border-color: #b9d9c0;
    background: linear-gradient(135deg, #f2faf3 0%, #fff 75%);
}

.team-entry-invitation {
    border-color: #ead9ad;
    background: #fffcf4;
}

.team-entry-name {
    grid-column: 1;
    color: #1f3527;
    font-weight: var(--font-weight-bold);
    line-height: 1.35;
}

.team-entry-email,
.team-entry-meta {
    grid-column: 1;
    color: #68766d;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.team-role-badge,
.team-invitation-status {
    grid-column: 2;
    justify-self: end;
    align-self: start;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    color: #285533;
    background: #e7f3e9;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    white-space: nowrap;
}

.team-role-badge-owner {
    color: #1b5e20;
    background: #dff0e2;
}

.team-invitation-status {
    align-self: end;
    color: #805b06;
    background: #fff0c7;
}

.team-entry-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: 7px;
    padding-top: 10px;
    border-top: 1px solid rgba(91, 117, 99, 0.16);
}

.team-empty {
    margin: 0;
    padding: 13px 14px;
    border: 1px dashed #cbd8ce;
    border-radius: var(--radius-lg);
    color: #68766d;
    background: #f8faf8;
    font-size: var(--font-size-md);
}

.team-status {
    margin: 14px 0 0;
    padding: 11px 13px;
    border: 1px solid #d6e2d9;
    border-radius: 9px;
    color: #405a48;
    background: #f1f6f2;
    font-size: var(--font-size-md);
    line-height: 1.4;
}

.team-status.team-status-error {
    color: #b71c1c;
    border-color: #ffcdd2;
    background: #ffebee;
}

.team-status.team-status-success {
    color: #1b5e20;
    border-color: #c8e6c9;
    background: var(--color-primary-subtle);
}

#showInvitationFormButton {
    margin-top: 24px;
}

.team-button {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    appearance: none;
    transition: transform var(--duration-fast) ease, border-color var(--duration-emphasis) ease,
        background-color var(--duration-emphasis) ease, box-shadow var(--duration-emphasis) ease;
}

.team-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.team-button:focus-visible {
    outline: 3px solid rgba(46, 125, 50, 0.22);
    outline-offset: 2px;
}

.team-button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
}

.team-button-primary {
    color: #fff;
    border-color: var(--color-primary-500);
    background: var(--color-primary-500);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.18);
}

.team-button-primary:hover:not(:disabled) {
    border-color: #246b29;
    background: #246b29;
}

.team-button-secondary {
    color: #285533;
    border-color: #aac6b1;
    background: #f4faf5;
}

.team-button-secondary:hover:not(:disabled) {
    border-color: #70a07b;
    background: var(--color-primary-subtle);
}

.team-button-danger {
    color: #a32626;
    border-color: #e1aaaa;
    background: #fff7f7;
}

.team-button-danger:hover:not(:disabled) {
    color: #8d1717;
    border-color: #c86666;
    background: #ffeded;
}

.team-button-danger:focus-visible {
    outline-color: rgba(198, 40, 40, 0.22);
}

.team-action-button {
    min-height: 36px;
    padding: 8px 12px;
    font-size: var(--font-size-sm);
}

.invitation-form {
    display: grid;
    gap: var(--space-3);
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #cfe0d3;
    border-radius: 11px;
    background: #f7fbf8;
}

.invitation-form[hidden] {
    display: none;
}

.invitation-form .team-field-label:not(:first-child) {
    margin-top: 6px;
}

.invitation-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

@media (max-width: 600px) {
    .team-modal {
        padding: 8px;
    }

    .team-dialog {
        max-height: calc(100vh - 16px);
        border-radius: 13px;
    }

    .team-header {
        padding: 16px 16px 13px;
    }

    .team-header h2 {
        font-size: var(--font-size-heading-md);
    }

    .team-content {
        padding: 16px;
    }

    .team-entry {
        grid-template-columns: minmax(0, 1fr);
    }

    .team-role-badge,
    .team-invitation-status {
        grid-column: 1;
        justify-self: start;
    }

    .invitation-form-actions .team-button {
        flex: 1 1 130px;
    }
}

.team-confirmation-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    background: rgba(14, 35, 24, 0.66);
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

.team-confirmation-modal[hidden] {
    display: none;
}

.team-confirmation-dialog {
    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    padding: 22px;
    border: 1px solid #ead1d1;
    border-radius: 14px;
    overflow-y: auto;
    background: var(--color-surface);
    box-shadow: 0 22px 60px rgba(40, 16, 16, 0.3);
    box-sizing: border-box;
}

.team-confirmation-dialog h2 {
    margin: 0;
    color: #5c2525;
    font-size: var(--font-size-heading-md);
    line-height: 1.3;
}

.team-confirmation-dialog p {
    margin: 13px 0 0;
    color: #4d3c3c;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.team-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
    margin-top: var(--space-8);
}

@media (max-width: 600px) {
    .team-entry-actions {
        justify-content: stretch;
    }

    .team-entry-actions .team-button {
        width: 100%;
    }

    .team-confirmation-modal {
        padding: 10px;
    }

    .team-confirmation-dialog {
        max-height: calc(100vh - 20px);
        padding: 18px;
    }

    .team-confirmation-actions .team-button {
        flex: 1 1 145px;
    }
}

.tree-card-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-tree-card);
    padding: 24px;
    overflow-y: auto;
    background: var(--color-overlay-default);
    box-sizing: border-box;
}

.field-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.openFieldCardButton,
.field-list-actions .deleteFieldButton {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
}

.openFieldCardButton {
    border: 1px solid var(--color-border-primary);
    background: #f4fbf4;
    color: #246428;
}

.openFieldCardButton:hover,
.openFieldCardButton:focus-visible {
    background: var(--color-primary-subtle);
}

.field-list-actions .deleteFieldButton {
    border: 1px solid #d7a0a0;
    background: #fff7f7;
    color: #a42626;
}

.field-list-actions .deleteFieldButton:hover,
.field-list-actions .deleteFieldButton:focus-visible {
    background: #fdeaea;
}

.field-card-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-field-card);
    padding: var(--space-8);
    overflow-y: auto;
    background: rgba(18, 35, 20, 0.56);
    box-sizing: border-box;
}

.field-card-dialog {
    width: min(920px, 100%);
    max-height: calc(100vh - 40px);
    margin: 0 auto;
    overflow-y: auto;
    border: 1px solid #d7e5d8;
    border-radius: 18px;
    background: #f7faf7;
    box-shadow: var(--shadow-modal);
    box-sizing: border-box;
}

.field-card-header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-7);
    padding: 22px 24px 18px;
    border-bottom: 1px solid #dce8dd;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
}

.field-card-eyebrow {
    margin: 0 0 5px;
    color: var(--color-primary-500);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.field-card-header h2 {
    margin: 0;
    color: #193d1d;
    font-size: clamp(23px, 4vw, 30px);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.field-card-subtitle {
    margin: 7px 0 0;
    color: #667469;
}

.field-card-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
}

.field-card-edit-button,
.field-edit-primary,
.field-edit-secondary,
.field-edit-danger {
    min-height: 42px;
    padding: 9px 16px;
    border-radius: var(--radius-lg);
    font: inherit;
    font-weight: var(--font-weight-bold);
    transition:
        border-color var(--duration-standard) ease,
        background-color var(--duration-standard) ease,
        color var(--duration-standard) ease,
        opacity var(--duration-standard) ease;
}

.field-card-edit-button {
    border: 1px solid #78a77c;
    background: #edf7ee;
    color: #285f2d;
}

.field-card-edit-button:hover,
.field-card-edit-button:focus-visible {
    border-color: var(--color-primary-500);
    background: #dff0e1;
}

.field-card-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid #ccdbcd;
    border-radius: 11px;
    background: var(--color-surface);
    color: #315c35;
    font-size: 19px;
}

.field-card-close:hover,
.field-card-close:focus-visible {
    border-color: #80ad84;
    background: #edf7ee;
}

.field-card-feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    min-height: 190px;
    padding: 28px;
    color: #526256;
    text-align: center;
}

.field-card-feedback[hidden] {
    display: none;
}

.field-card-feedback.is-error {
    flex-direction: column;
    color: #8d2f2f;
}

.field-card-feedback.is-error p {
    margin: 0;
}

#retryFieldCardButton {
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid var(--color-border-primary);
    border-radius: 9px;
    background: var(--color-surface);
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
}

#retryFieldCardButton:hover:not(:disabled),
#retryFieldCardButton:focus-visible {
    background: var(--color-primary-subtle);
}

#retryFieldCardButton:disabled {
    cursor: wait;
    opacity: 0.6;
}

.field-card-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #c9ddcb;
    border-top-color: var(--color-primary-500);
    border-radius: var(--radius-round);
    animation: field-card-spin 0.8s linear infinite;
}

@keyframes field-card-spin {
    to {
        transform: rotate(360deg);
    }
}

.field-card-content {
    display: grid;
    gap: var(--space-7);
    padding: 20px 24px 28px;
}

.field-card-content[hidden] {
    display: none;
}

.field-card-read-content {
    display: grid;
    gap: var(--space-7);
}

.field-card-read-content[hidden],
.field-edit-form[hidden],
.field-card-notice[hidden],
.field-edit-discard-modal[aria-hidden="true"] {
    display: none;
}

.field-card-notice {
    margin: 16px 24px 0;
    padding: 11px 14px;
    border: 1px solid #a9cbaa;
    border-radius: var(--radius-lg);
    background: #edf7ee;
    color: #285f2d;
    font-weight: var(--font-weight-semibold);
}

.field-card-notice.is-error {
    border-color: #e0b4b4;
    background: #fff2f2;
    color: #8d2f2f;
}

.field-edit-form {
    padding: 19px;
    border: 1px solid #cfe0d0;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(31, 78, 36, 0.08);
}

.field-edit-heading h3 {
    margin: 0;
    color: #285f2d;
    font-size: 19px;
}

.field-edit-heading p {
    margin: 6px 0 0;
    color: #6b786d;
    font-size: var(--font-size-sm);
}

.field-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
    margin-top: 18px;
}

.field-edit-control {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: #3e5541;
    font-weight: var(--font-weight-bold);
}

.field-edit-control.is-wide {
    grid-column: 1 / -1;
}

.field-edit-control input,
.field-edit-control textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #bdcfbf;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: #203823;
    font: inherit;
    box-sizing: border-box;
}

.field-edit-control input {
    min-height: 44px;
    padding: 10px 12px;
}

.field-edit-control textarea {
    min-height: 112px;
    padding: 11px 12px;
    resize: vertical;
}

.field-edit-control input:hover:not(:disabled),
.field-edit-control textarea:hover:not(:disabled) {
    border-color: #80ad84;
}

.field-edit-control input:focus-visible,
.field-edit-control textarea:focus-visible {
    border-color: var(--color-primary-500);
    outline: 3px solid rgba(46, 125, 50, 0.16);
}

.field-edit-control input:disabled,
.field-edit-control textarea:disabled {
    cursor: wait;
    opacity: 0.68;
}

.field-edit-message {
    min-height: 20px;
    margin: 13px 0 0;
    color: #a33b3b;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.field-edit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-4);
    margin-top: 14px;
}

.field-edit-primary {
    border: 1px solid var(--color-border-primary);
    background: var(--color-primary-500);
    color: #fff;
}

.field-edit-primary:hover:not(:disabled),
.field-edit-primary:focus-visible {
    background: #236527;
}

.field-edit-secondary {
    border: 1px solid #b9cbbb;
    background: var(--color-surface);
    color: #315c35;
}

.field-edit-secondary:hover:not(:disabled),
.field-edit-secondary:focus-visible {
    border-color: #78a77c;
    background: #edf7ee;
}

.field-edit-danger {
    border: 1px solid #b83b3b;
    background: #fff4f4;
    color: #9d2d2d;
}

.field-edit-danger:hover:not(:disabled),
.field-edit-danger:focus-visible {
    background: #ffe4e4;
}

.field-edit-primary:disabled,
.field-edit-secondary:disabled,
.field-edit-danger:disabled,
.field-card-edit-button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.field-edit-discard-modal {
    position: fixed;
    z-index: var(--z-confirmation);
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-8);
    background: rgba(18, 35, 20, 0.62);
}

.field-edit-discard-dialog {
    width: min(480px, 100%);
    padding: 22px;
    border: 1px solid #d7e5d8;
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-modal);
    box-sizing: border-box;
}

.field-edit-discard-dialog h2 {
    margin: 0;
    color: #283e2b;
    font-size: 21px;
}

.field-edit-discard-dialog p {
    margin: 10px 0 0;
    color: #5f6e62;
    line-height: 1.5;
}

.field-card-section {
    padding: 19px;
    border: 1px solid #dce8dd;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: 0 5px 16px rgba(35, 87, 40, 0.06);
}

.field-card-section h3 {
    margin: 0 0 15px;
    color: #285f2d;
    font-size: var(--font-size-heading-sm);
}

.field-card-section-hint {
    margin: -7px 0 15px;
    color: #6b786d;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.field-card-details {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
    gap: 10px 18px;
    margin: 0;
}

.field-card-details dt {
    color: #607064;
    font-weight: var(--font-weight-semibold);
}

.field-card-details dd {
    margin: 0;
    color: #243a27;
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}

.field-card-details dd small {
    display: block;
    margin-top: 3px;
    color: #718075;
    font-weight: var(--font-weight-regular);
}

.field-card-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: var(--space-4);
}

.field-card-status {
    min-width: 0;
    padding: 14px;
    border: 1px solid #dfe8e0;
    border-top: 4px solid #78927b;
    border-radius: 11px;
    background: #fafcfa;
}

.field-card-status h4 {
    min-height: 34px;
    margin: 0 0 7px;
    color: #536256;
    font-size: var(--font-size-sm);
    line-height: 1.25;
}

.field-card-status strong {
    display: block;
    color: #263d29;
    font-size: 24px;
    line-height: 1.1;
}

.field-card-status span {
    display: block;
    margin-top: 5px;
    color: #6c786e;
    font-size: var(--font-size-xs);
}

.field-card-status.is-healthy {
    border-top-color: var(--color-primary-500);
}

.field-card-status.is-inspection {
    border-top-color: #ef9f24;
}

.field-card-status.is-dead,
.field-card-status.is-fallout {
    border-top-color: var(--color-danger-500);
}

.field-card-status.is-fallout {
    background: #fff8f8;
}

.field-card-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.field-card-work {
    padding: 14px;
    border: 1px solid #dce6dd;
    border-radius: 11px;
    background: #f8faf8;
}

.field-card-work h4 {
    margin: 0;
    color: #394d3c;
    font-size: var(--font-size-md);
    line-height: 1.35;
}

.field-card-work p {
    margin: 10px 0 0;
    color: #243a27;
    font-weight: var(--font-weight-bold);
}

.field-card-work small {
    display: block;
    margin-top: 5px;
    color: #718075;
}

.field-card-event-list {
    display: grid;
    gap: var(--space-4);
}

.field-card-event {
    padding: 14px;
    border: 1px solid #dfe7df;
    border-radius: 11px;
    background: #fbfcfb;
}

.field-card-event-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
}

.field-card-event-header strong {
    color: #2e6833;
}

.field-card-event-header time,
.field-card-event-meta,
.field-card-event-footer,
.field-card-truncated {
    color: #6b786d;
    font-size: var(--font-size-sm);
}

.field-card-event-meta,
.field-card-event-note {
    margin: 7px 0 0;
}

.field-card-event-note {
    color: #314334;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.field-card-event-footer,
.field-card-truncated {
    display: block;
    margin-top: 7px;
}

.field-card-truncated {
    color: #9a661c;
}

.field-card-empty {
    margin: 0;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: #f5f7f5;
    color: #68756a;
    text-align: center;
}

.field-card-actions[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .field-card-modal {
        padding: 0;
    }

    .field-card-dialog {
        width: 100%;
        min-height: 100vh;
        max-height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .field-card-header {
        padding: 17px 16px 14px;
    }

    .field-card-header-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .field-card-edit-button {
        min-height: 40px;
        padding: 7px 10px;
    }

    .field-card-content {
        padding: 13px 12px 24px;
    }

    .field-card-notice {
        margin: 12px 12px 0;
    }

    .field-edit-grid {
        grid-template-columns: 1fr;
    }

    .field-edit-control.is-wide {
        grid-column: auto;
    }

    .field-edit-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .field-edit-primary,
    .field-edit-secondary,
    .field-edit-danger {
        width: 100%;
    }

    .field-card-section {
        padding: 15px;
    }

    .field-card-details {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .field-card-details dd {
        margin-bottom: 10px;
    }

    .field-card-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-card-work-grid {
        grid-template-columns: 1fr;
    }

    .field-card-event-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-1);
    }
}

.tree-card-dialog {
    width: min(620px, 100%);
    margin: 24px auto;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

.tree-card-header,
.tree-card-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.tree-card-header h2,
.tree-card-history-header h3 {
    margin: 0;
}

.tree-card-section {
    margin-top: var(--space-8);
}

.tree-card-details {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 8px 16px;
    margin: 0;
}

.tree-card-details dt {
    font-weight: var(--font-weight-bold);
}

.tree-card-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.tree-card-history {
    margin-top: 12px;
}

.tree-event-form {
    display: grid;
    gap: var(--space-3);
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: #f8f8f8;
}

.tree-event-form[hidden] {
    display: none;
}

.tree-event-form select,
.tree-event-form input,
.tree-event-form textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.tree-event-form textarea {
    resize: vertical;
}

.tree-event-form-actions {
    display: flex;
    gap: var(--space-3);
}

.tree-card-event {
    margin-top: var(--space-4);
    padding: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
}

.tree-card-event p {
    margin: 6px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tree-event-photo-actions {
    margin-top: var(--space-4);
}

.tree-event-photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.tree-event-photo-button {
    width: 92px;
    padding: 0;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #f3f3f3;
}

.tree-event-photo-button img {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: cover;
}

.tree-event-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    padding: 6px;
    box-sizing: border-box;
    color: #666;
    text-align: center;
}

.tree-event-photo-name {
    display: block;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-xs);
}

.tree-event-photo-status {
    margin-top: 8px;
    color: #666;
}

.tree-event-photo-status.is-error {
    color: var(--color-danger-500);
}

.tree-photo-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-photo-modal);
    padding: 24px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.75);
    box-sizing: border-box;
}

.tree-photo-dialog {
    width: min(900px, 100%);
    margin: 20px auto;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-sizing: border-box;
}

.tree-photo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: 10px;
}

.tree-photo-header p {
    margin: 0;
    overflow-wrap: anywhere;
}

#treePhotoImage {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    margin: 0 auto;
}

.tree-card-message {
    color: #666;
}

.tree-card-error {
    color: var(--color-danger-500);
}

.bulk-preview-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-bulk);
    display: none;
    pointer-events: none;
}

.bulk-preview-dialog {
    position: absolute;
    top: 16px;
    right: 16px;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: var(--space-8);
    border: 1px solid #d0d5dd;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.22);
    pointer-events: auto;
}

.bulk-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-7);
    margin-bottom: 18px;
}

.bulk-preview-header h2 {
    margin: 0;
}

.bulk-preview-modes {
    display: grid;
    gap: var(--space-4);
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid #d0d5dd;
    border-radius: var(--radius-md);
}

.bulk-preview-modes label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.bulk-preview-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-bottom: 18px;
}

.bulk-preview-controls[hidden] {
    display: none;
}

.bulk-preview-controls label {
    display: grid;
    gap: var(--space-2);
}

.bulk-preview-controls select,
.bulk-preview-controls button {
    min-height: 42px;
}

.bulk-rows-selector {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    min-width: 0;
}

.bulk-rows-header,
.bulk-rows-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.bulk-rows-header h3,
.bulk-rows-empty {
    margin: 0;
}

#bulkRowsSelectedCount {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.bulk-rows-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
}

.bulk-row-option {
    display: flex !important;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.bulk-row-option:hover,
.bulk-row-option:focus-within {
    background: var(--color-primary-subtle);
}

.bulk-row-option input {
    inline-size: 18px;
    block-size: 18px;
    margin: 0;
}

.bulk-rows-summary {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-primary-subtle);
    overflow-wrap: anywhere;
}

.bulk-rows-mobile-actions {
    display: none;
}

.bulk-manual-selector {
    grid-template-columns: 1fr;
}

.bulk-manual-instruction {
    margin: 0;
    color: var(--color-text-secondary);
}

.bulk-manual-summary {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-primary-subtle);
}

#bulkManualClearButton {
    justify-self: start;
}

.bulk-mobile-manual-bar {
    display: none;
}

.bulk-preview-message {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: #eff8ff;
    color: #175cd3;
}

.bulk-preview-message[hidden] {
    display: none;
}

.bulk-preview-message.is-error {
    background: #fef3f2;
    color: #b42318;
}

.bulk-preview-result {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #b2ddff;
    border-radius: var(--radius-md);
    background: #f5fbff;
}

.bulk-preview-result[hidden] {
    display: none;
}

.bulk-preview-result p {
    margin: 0;
}

.bulk-preview-result p + p {
    margin-top: 6px;
}

.bulk-preview-summary,
.bulk-preview-status-counts {
    display: grid;
    grid-template-columns: minmax(140px, 0.55fr) minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
}

.bulk-preview-summary dt,
.bulk-preview-status-counts dt {
    color: #475467;
    font-weight: var(--font-weight-semibold);
}

.bulk-preview-summary dd,
.bulk-preview-status-counts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

#bulkPreviewStatusSummary {
    margin-top: 16px;
}

#bulkPreviewStatusSummary h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.bulk-execute-section,
.bulk-execute-confirmation {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-xl);
    background: #f8fbff;
}

.bulk-execute-section h3,
.bulk-execute-confirmation h3 {
    margin: 0 0 12px;
}

.bulk-execute-section > label,
#bulkStatusFields label {
    display: grid;
    gap: var(--space-2);
    margin-bottom: 12px;
}

.bulk-execute-section select,
.bulk-execute-section input,
.bulk-execute-section textarea {
    width: 100%;
    box-sizing: border-box;
}

.bulk-metadata-fields {
    display: grid;
    gap: var(--space-4);
    margin: 0 0 12px;
    padding: 12px;
}

.bulk-metadata-fields label {
    display: grid;
    grid-template-columns: auto minmax(110px, 0.45fr) 1fr;
    align-items: center;
    gap: var(--space-3);
}

.bulk-metadata-fields p {
    margin: 0;
    color: #475569;
    font-size: 0.9rem;
}

.bulk-execute-confirmation-details {
    display: grid;
    grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0 0 14px;
}

.bulk-execute-confirmation-details dt {
    color: #475467;
    font-weight: var(--font-weight-semibold);
}

.bulk-execute-confirmation-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.bulk-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.bulk-preview-actions button {
    min-height: 42px;
}

@media (max-width: 600px) {
    .bulk-preview-dialog {
        top: 8px;
        right: 8px;
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 16px;
    }

    .bulk-preview-controls {
        grid-template-columns: 1fr;
    }

    .bulk-rows-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: min(42dvh, 320px);
    }

    .bulk-rows-toolbar {
        align-items: stretch;
    }

    .bulk-rows-toolbar .button,
    .bulk-rows-mobile-actions .button {
        min-height: 44px;
    }

    .bulk-rows-mobile-actions {
        position: sticky;
        bottom: 0;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
        padding-top: var(--space-3);
        background: var(--card-background);
    }

    .bulk-metadata-fields label {
        grid-template-columns: auto 1fr;
    }

    .bulk-metadata-fields label input[type="text"] {
        grid-column: 1 / -1;
    }

    .bulk-execute-confirmation-details {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .bulk-preview-summary,
    .bulk-preview-status-counts {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .bulk-preview-summary dd + dt,
    .bulk-preview-status-counts dd + dt {
        margin-top: 8px;
    }

    .bulk-execute-confirmation-details dd + dt {
        margin-top: 8px;
    }

    .bulk-preview-actions {
        display: grid;
    }
}

/* Primitive migration overrides legacy component selectors without removing
   their layout hooks. These declarations can lose !important as legacy
   visual rules are retired in later component phases. */
button.button {
    min-height: var(--control-height) !important;
    padding: 0 var(--control-padding-x) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-md) !important;
    font-weight: var(--font-weight-semibold) !important;
}

button.button--sm {
    min-height: var(--control-height-sm) !important;
    padding-inline: var(--space-4) !important;
    font-size: var(--font-size-sm) !important;
}

button.button--lg {
    min-height: var(--control-height-lg) !important;
    padding-inline: var(--space-7) !important;
    font-size: var(--font-size-lg) !important;
}

button.button--primary {
    border: 1px solid var(--color-primary-500) !important;
    background: var(--color-primary-500) !important;
    color: var(--color-text-inverse) !important;
}

button.button--primary:hover:not(:disabled):not(.is-loading) {
    border-color: var(--color-primary-700) !important;
    background: var(--color-primary-700) !important;
}

button.button--secondary {
    border: 1px solid var(--color-border-primary) !important;
    background: var(--color-surface) !important;
    color: var(--color-primary-500) !important;
}

button.button--secondary:hover:not(:disabled):not(.is-loading) {
    background: var(--color-primary-subtle) !important;
}

button.button--danger {
    border: 1px solid var(--color-danger-500) !important;
    background: var(--color-danger-500) !important;
    color: var(--color-text-inverse) !important;
}

button.button--danger:hover:not(:disabled):not(.is-loading) {
    border-color: var(--color-danger-700) !important;
    background: var(--color-danger-700) !important;
}

button.button--ghost {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--color-primary-500) !important;
}

button.button--ghost:hover:not(:disabled):not(.is-loading) {
    background: var(--color-primary-subtle) !important;
}

/* Unified card primitives */
.card {
    padding: var(--card-padding);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-background);
    box-shadow: var(--card-shadow-subtle);
    color: var(--color-text-primary);
    box-sizing: border-box;
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--card-content-gap);
}

.card-title {
    margin: 0;
    color: var(--card-title-color);
    font-size: var(--font-size-heading-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.card-subtitle,
.card-secondary,
.history-meta {
    color: var(--card-secondary-color);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.card-body {
    display: grid;
    gap: var(--card-section-gap);
}

.card-section {
    display: grid;
    gap: var(--card-content-gap);
}

.card-section + .card-section {
    margin-top: var(--card-section-gap);
}

.card-section-title {
    margin: 0;
    color: var(--card-title-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.35;
}

.card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--card-content-gap);
    padding-top: var(--card-section-gap);
    border-top: 1px solid var(--card-divider-color);
}

.card-divider {
    height: 1px;
    margin: var(--card-section-gap) 0;
    border: 0;
    background: var(--card-divider-color);
}

.card--interactive {
    transition: border-color var(--duration-standard) ease,
        background-color var(--duration-standard) ease,
        box-shadow var(--duration-standard) ease;
}

.card--interactive:hover {
    border-color: var(--card-hover-border-color);
    background: var(--card-hover-background);
}

.info-list {
    display: grid;
    gap: var(--space-4) var(--space-7);
    margin: 0;
}

.info-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-4);
}

.info-label {
    color: var(--card-label-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.info-value {
    min-width: 0;
    color: var(--card-value-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}

/* Shared history primitives */
.history-list {
    display: grid;
    gap: var(--card-content-gap);
}

.history-item {
    padding: var(--card-padding);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-background-subtle);
}

.history-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--card-content-gap);
}

.history-comment {
    margin: var(--space-3) 0 0;
    color: var(--card-value-color);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.history-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--history-badge-color);
    background: var(--history-badge-background);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.empty-state {
    margin: 0;
    padding: var(--card-padding);
    border: var(--empty-state-border);
    border-radius: var(--card-radius);
    color: var(--card-secondary-color);
    background: var(--card-background-subtle);
    font-size: var(--font-size-md);
    line-height: 1.45;
    text-align: center;
}

/* Existing component aliases onto the common foundation */
.team-dialog,
.field-card-dialog,
.tree-card-dialog,
.tree-filter-dialog,
.bulk-preview-dialog,
.tree-photo-dialog,
.team-confirmation-dialog,
.field-edit-discard-dialog,
.authenticated-empty-card {
    border-color: var(--card-border-color);
    border-radius: var(--card-radius-strong);
    background-color: var(--card-background);
    box-shadow: var(--card-shadow-dialog);
}

.field-card-section,
.tree-card-section,
.tree-filter-group,
.bulk-preview-modes,
.bulk-execute-section,
.bulk-execute-confirmation {
    border: var(--card-border);
    border-radius: var(--card-radius);
    background-color: var(--card-background);
    box-shadow: var(--card-shadow-subtle);
}

.tree-card-section {
    padding: var(--card-padding);
}

.field-card-section h3,
.tree-card-section h3,
.team-section h3,
.bulk-execute-section h3,
.bulk-execute-confirmation h3 {
    color: var(--card-title-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.35;
}

.field-card-details dt,
.tree-card-details dt,
.bulk-preview-summary dt,
.bulk-preview-status-counts dt,
.bulk-execute-confirmation-details dt {
    color: var(--card-label-color);
    font-weight: var(--font-weight-semibold);
}

.field-card-details dd,
.tree-card-details dd,
.bulk-preview-summary dd,
.bulk-preview-status-counts dd,
.bulk-execute-confirmation-details dd {
    color: var(--card-value-color);
    font-weight: var(--font-weight-semibold);
}

.field-card-event-list,
.tree-card-history,
.team-list {
    display: grid;
    gap: var(--card-content-gap);
}

.field-card-event,
.tree-card-event,
.trash-item {
    border: var(--card-border);
    border-radius: var(--card-radius);
    background-color: var(--card-background-subtle);
    box-shadow: none;
}

.team-entry {
    border-radius: var(--card-radius);
    box-shadow: none;
}

.field-card-event,
.tree-card-event {
    padding: var(--card-padding);
}

.field-card-event-header,
.tree-card-history-header {
    gap: var(--card-content-gap);
}

.field-card-event-header time,
.field-card-event-meta,
.field-card-event-footer,
.field-card-truncated,
.tree-card-event time,
.tree-card-event small {
    color: var(--card-secondary-color);
    font-size: var(--font-size-sm);
}

.field-card-event-note,
.tree-card-event p {
    color: var(--card-value-color);
    line-height: 1.5;
}

.tree-catalog-empty,
.trash-empty,
.team-empty,
.field-card-empty,
.tree-card-message {
    margin: 0;
    padding: var(--card-padding);
    border: var(--empty-state-border);
    border-radius: var(--card-radius);
    color: var(--card-secondary-color);
    background: var(--card-background-subtle);
    font-size: var(--font-size-md);
    line-height: 1.45;
    text-align: center;
}

.tree-panel-divider,
.team-entry-actions {
    border-color: var(--card-divider-color);
}

.card:focus-visible,
.card--interactive:focus-visible,
.history-item:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    :root {
        --card-padding: var(--space-5);
        --card-section-gap: var(--space-5);
    }

    .info-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .history-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Phase 5.2: Tree Card */
.tree-card-modal {
    padding: var(--space-9);
    background: rgba(14, 35, 24, 0.62);
    backdrop-filter: blur(4px);
}

.tree-card-dialog.card {
    position: relative;
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: var(--card-border);
    border-radius: var(--card-radius-strong);
    background: var(--card-background-subtle);
    box-shadow: var(--card-shadow-dialog);
}

.tree-card-header.card-header {
    position: sticky;
    z-index: 3;
    top: 0;
    align-items: center;
    padding: var(--space-8) var(--space-9) 64px;
    border-bottom: 1px solid var(--card-divider-color);
    background: linear-gradient(135deg, var(--color-primary-subtle), var(--color-surface) 72%);
}

.tree-card-header .card-title {
    color: var(--color-primary-700);
    font-size: clamp(var(--font-size-heading-md), 2.2vw, 24px);
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

#closeTreeCardButton {
    flex: 0 0 auto;
    border-color: transparent;
    border-radius: var(--radius-round);
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.72);
}

#closeTreeCardButton:hover:not(:disabled),
#closeTreeCardButton:focus-visible {
    color: var(--color-primary-700);
    background: var(--color-surface);
}

.tree-card-section.card-section {
    display: block;
    margin: var(--space-7) var(--space-9) 0;
    padding: var(--space-8);
    border-color: var(--card-border-color);
    background: var(--card-background);
}

.tree-card-section.card-section:last-child {
    margin-bottom: var(--space-9);
}

.tree-card-section .card-section-title,
.tree-card-history-header h3 {
    margin: 0 0 var(--space-7);
    color: var(--card-title-color);
    font-size: var(--font-size-heading-sm);
    letter-spacing: -0.01em;
}

.tree-card-details.info-list {
    grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr);
    gap: 0;
    overflow: hidden;
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-background-subtle);
}

.tree-card-details dt,
.tree-card-details dd {
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--card-divider-color);
    line-height: 1.4;
}

.tree-card-details dt {
    color: var(--card-label-color);
    background: rgba(232, 245, 233, 0.45);
    font-size: var(--font-size-sm);
}

.tree-card-details dd {
    background: var(--card-background);
    font-size: var(--font-size-md);
}

.tree-card-details dt:last-of-type,
.tree-card-details dd:last-of-type {
    border-bottom: 0;
}

/* Existing field and status values are visually promoted into the header. */
.tree-card-details > dt:nth-of-type(2),
.tree-card-details > dt:nth-of-type(10) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.tree-card-details > dd:nth-of-type(2) {
    position: absolute;
    z-index: 4;
    top: 72px;
    left: var(--space-9);
    max-width: calc(100% - 230px);
    padding: 0;
    overflow: hidden;
    border: 0;
    color: var(--color-primary-700);
    background: transparent;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-card-details > dd:nth-of-type(10) {
    position: absolute;
    z-index: 4;
    top: 62px;
    right: 76px;
    justify-self: start;
    align-self: center;
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-pill);
    color: var(--color-primary-700);
    background: var(--color-primary-subtle);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

/* Stronger dividers mark location, mycorrhiza, and additional-information groups. */
.tree-card-details > dt:nth-of-type(3),
.tree-card-details > dd:nth-of-type(3),
.tree-card-details > dt:nth-of-type(5),
.tree-card-details > dd:nth-of-type(5),
.tree-card-details > dt:nth-of-type(11),
.tree-card-details > dd:nth-of-type(11) {
    border-top: var(--card-border);
}

.tree-card-history-header {
    align-items: center;
    margin-bottom: var(--space-7);
}

.tree-card-history-header h3 {
    margin-bottom: 0;
}

.tree-card-history-actions,
.tree-photo-event-chooser-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.tree-photo-event-chooser {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-7);
    padding: var(--space-5);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-background-subtle);
}

.tree-photo-event-chooser[hidden] {
    display: none;
}

.tree-photo-event-chooser > p {
    margin: 0;
    line-height: 1.45;
}

.tree-photo-event-options {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.tree-photo-event-option {
    min-height: var(--control-height);
    padding: var(--space-3) var(--space-5);
    border: var(--control-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.tree-photo-event-option[aria-pressed="true"] {
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-focus);
}

.tree-photo-event-option:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.tree-event-form {
    gap: var(--space-4);
    margin: 0 0 var(--space-7);
    padding: var(--space-7);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-background-subtle);
    box-shadow: inset 3px 0 0 var(--color-primary-500);
}

.tree-event-form .form-label {
    color: var(--card-label-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.tree-event-form-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: var(--space-3);
}

.tree-card-history.history-list {
    margin-top: 0;
    gap: var(--space-5);
}

.tree-card-event {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-5);
    margin-top: 0;
    padding: var(--space-7);
    border-color: var(--card-border-color);
    border-left: 3px solid var(--color-primary-500);
    background: var(--card-background);
    box-shadow: var(--card-shadow-subtle);
}

.tree-card-event > strong {
    justify-self: start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--history-badge-color);
    background: var(--history-badge-background);
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

.tree-card-event > time {
    align-self: center;
    color: var(--card-secondary-color);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.tree-card-event > p,
.tree-event-photo-gallery,
.tree-event-photo-actions,
.tree-event-photo-status {
    grid-column: 1 / -1;
}

.tree-card-event > p {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--card-divider-color);
}

.tree-card-event > p + p {
    padding-top: 0;
    border-top: 0;
}

.tree-event-photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.tree-event-photo-button {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-color: var(--card-border-color);
    border-radius: var(--card-radius);
    background: var(--card-background-subtle);
    transition: border-color var(--duration-standard) ease,
        box-shadow var(--duration-standard) ease,
        transform var(--duration-standard) ease;
}

button.tree-event-photo-button:hover,
button.tree-event-photo-button:focus-visible {
    border-color: var(--card-hover-border-color);
    box-shadow: var(--shadow-focus);
    transform: translateY(-1px);
}

.tree-event-photo-button img,
.tree-event-photo-placeholder {
    width: 100%;
    height: 104px;
}

.tree-event-photo-placeholder {
    color: var(--card-secondary-color);
    background: var(--card-background-subtle);
}

.tree-event-photo-name {
    padding: var(--space-3);
    color: var(--card-secondary-color);
    background: var(--card-background);
}

.tree-event-photo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    min-width: 0;
}

.tree-event-photo-actions .button {
    min-height: var(--control-height);
    max-width: 100%;
    white-space: normal;
}

.tree-event-photo-status {
    margin: 0;
    color: var(--card-secondary-color);
    font-size: var(--font-size-sm);
}

.tree-card-message,
.tree-card-error {
    grid-column: 1 / -1;
}

.tree-card-error {
    margin: 0;
    padding: var(--space-5);
    border: 1px solid rgba(198, 40, 40, 0.24);
    border-radius: var(--card-radius);
    background: #fff7f7;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .tree-card-modal {
        padding: var(--space-5);
    }

    .tree-card-header.card-header {
        padding: var(--space-7) var(--space-7) 62px;
    }

    .tree-card-details > dd:nth-of-type(2) {
        top: 68px;
        left: var(--space-7);
    }

    .tree-card-details > dd:nth-of-type(10) {
        top: 58px;
        right: 68px;
    }

    .tree-card-section.card-section {
        margin-right: var(--space-5);
        margin-left: var(--space-5);
        padding: var(--space-6);
    }

    .tree-card-section.card-section:last-child {
        margin-bottom: var(--space-5);
    }
}

@media (max-width: 520px) {
    .tree-card-modal {
        padding: 0;
    }

    .tree-card-dialog.card {
        min-height: 100%;
        border: 0;
        border-radius: 0;
    }

    .tree-card-header.card-header {
        padding: var(--space-5) var(--space-5) 88px;
    }

    .tree-card-details > dd:nth-of-type(2) {
        top: 58px;
        right: var(--space-5);
        left: var(--space-5);
        max-width: none;
    }

    .tree-card-details > dd:nth-of-type(10) {
        top: 88px;
        right: auto;
        left: var(--space-5);
    }

    .tree-card-section.card-section {
        margin: var(--space-5) var(--space-4) 0;
        padding: var(--space-5);
    }

    .tree-card-section.card-section:last-child {
        margin-bottom: var(--space-5);
    }

    .tree-card-details.info-list {
        grid-template-columns: 1fr;
    }

    .tree-card-details dt {
        padding-bottom: var(--space-1);
        border-bottom: 0;
    }

    .tree-card-details dd {
        padding-top: 0;
    }

    .tree-card-details > dd:nth-of-type(10) {
        margin: 0;
        padding: var(--space-2) var(--space-4);
    }

    .tree-card-history-header {
        align-items: stretch;
        flex-direction: column;
    }

    .tree-card-history-actions,
    .tree-photo-event-chooser-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    #addTreeEventButton,
    #addTreePhotoButton,
    .tree-photo-event-chooser-actions .button,
    .tree-event-form-actions .button {
        width: 100%;
    }

    .tree-card-event {
        grid-template-columns: 1fr;
        padding: var(--space-5);
    }

    .tree-card-event > time {
        white-space: normal;
    }

    .tree-event-photo-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

button.button--icon {
    width: var(--control-height) !important;
    min-width: var(--control-height) !important;
    padding: 0 !important;
}

input.form-control,
select.form-select,
textarea.form-textarea {
    min-height: var(--control-height) !important;
    padding: 9px var(--space-5) !important;
    border: var(--control-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-md) !important;
}

select.form-select {
    padding-right: var(--space-10) !important;
}

textarea.form-textarea {
    min-height: var(--textarea-min-height) !important;
}

input.form-control:focus-visible,
select.form-select:focus-visible,
textarea.form-textarea:focus-visible,
button.button:focus-visible {
    outline: none !important;
    border-color: var(--color-primary-500) !important;
    box-shadow: var(--control-focus-ring) !important;
}

button.button.sidebar-nav-item {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--color-text-secondary) !important;
}

button.button.sidebar-nav-item:is(:hover, :focus-visible):not(:disabled),
.sidebar-navigation button.button.sidebar-nav-item.is-active,
button.button.sidebar-tool-item.is-open {
    background: var(--color-primary-subtle) !important;
    color: var(--color-primary-700) !important;
}

button.button.sidebar-logout {
    color: var(--color-danger-500) !important;
}

@media (max-width: 600px) {
    .invitation-form-actions .button,
    .team-confirmation-actions .button,
    .field-edit-actions .button,
    .tree-event-form-actions .button,
    .bulk-preview-actions .button {
        width: 100%;
    }
}

/* Phase 5.4: UI polish and consistency */

/* Dialog surfaces and layout */
.team-modal,
.tree-filter-modal,
.bulk-preview-modal,
.team-confirmation-modal,
.field-edit-discard-modal,
.tree-photo-modal,
.tree-card-modal,
.field-card-modal {
    background: var(--ui-overlay-background);
    backdrop-filter: blur(4px);
}

/* Keep the map readable while bulk selection is open. */
.bulk-preview-modal {
    background: rgba(14, 35, 24, 0.06);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

@media (max-width: 700px) {
    .bulk-preview-modal.is-mobile-manual-selection .bulk-preview-dialog {
        display: none;
    }

    .bulk-preview-modal.is-mobile-manual-selection .bulk-mobile-manual-bar {
        position: absolute;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        left: max(12px, env(safe-area-inset-left));
        display: grid;
        gap: var(--space-4);
        max-height: min(42dvh, 320px);
        padding: var(--space-5);
        border: var(--card-border);
        border-radius: var(--card-radius-strong);
        background: var(--card-background);
        box-shadow: var(--card-shadow-dialog);
        pointer-events: auto;
    }

    .bulk-mobile-manual-bar__summary {
        display: grid;
        gap: var(--space-1);
        min-width: 0;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
    }

    .bulk-mobile-manual-bar__summary strong {
        color: var(--color-text-primary);
        overflow-wrap: anywhere;
    }

    .bulk-mobile-manual-bar__actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .bulk-mobile-manual-bar__actions .button {
        min-height: 44px;
        min-width: 0;
        padding-inline: var(--space-2);
    }
}

.team-dialog,
.tree-filter-dialog,
.bulk-preview-dialog,
.team-confirmation-dialog,
.field-edit-discard-dialog,
.tree-photo-dialog,
.tree-card-dialog.card,
.field-card-dialog.card {
    border: var(--card-border) !important;
    border-radius: var(--card-radius-strong) !important;
    background: var(--card-background-subtle) !important;
    box-shadow: var(--card-shadow-dialog) !important;
}

.team-header,
.tree-filter-header,
.bulk-preview-header,
.tree-photo-header,
.tree-card-header.card-header,
.field-card-header.card-header,
.trash-header {
    min-height: var(--control-height);
    gap: var(--space-7);
    padding: var(--space-8) var(--space-9);
    border-bottom: 1px solid var(--card-divider-color);
    background: var(--ui-dialog-header-background);
}

.team-header h2,
.tree-filter-header h2,
.bulk-preview-header h2,
.tree-card-header .card-title,
.field-card-header .card-title,
.trash-header h2,
.team-confirmation-dialog h2,
.field-edit-discard-dialog h2 {
    margin: 0;
    color: var(--card-title-color);
    font-size: var(--font-size-heading-md);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.team-content,
.tree-filter-dialog,
.bulk-preview-dialog,
.team-confirmation-dialog,
.field-edit-discard-dialog {
    padding: var(--space-9) !important;
}

.team-header + .team-content {
    padding-top: var(--space-8) !important;
}

.team-confirmation-actions,
.field-edit-actions,
.bulk-preview-actions {
    gap: var(--space-4);
    margin-top: var(--space-7);
    padding-top: var(--space-7);
    border-top: 1px solid var(--card-divider-color);
}

/* Lists and repeated content */
.team-list,
.tree-catalog-list,
#trashContent section,
.tree-filter-options,
.field-card-event-list,
.tree-card-history {
    gap: var(--ui-list-item-gap);
}

.team-entry,
.tree-catalog-item,
.trash-item,
.field-card-event,
.tree-card-event,
.tree-filter-options label,
.bulk-preview-summary,
.bulk-preview-status-counts {
    border: var(--ui-list-item-border);
    border-radius: var(--ui-list-item-radius);
    background: var(--card-background);
    box-shadow: var(--card-shadow-subtle);
    transition: border-color var(--duration-standard) ease,
        background-color var(--duration-standard) ease,
        box-shadow var(--duration-standard) ease,
        transform var(--duration-standard) ease;
}

.team-entry,
.tree-catalog-item,
.trash-item {
    padding: var(--ui-list-item-padding);
}

.team-entry:hover,
.tree-catalog-item:hover,
.trash-item:hover,
.tree-filter-options label:hover {
    border-color: var(--card-hover-border-color);
    background: var(--card-hover-background);
    box-shadow: var(--card-shadow-subtle);
}

.tree-catalog-item:focus-visible,
.tree-filter-options label:focus-within,
.team-entry:focus-within,
.trash-item:focus-within {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-focus);
}

.tree-filter-options label {
    min-height: var(--control-height-sm);
    padding: var(--space-3) var(--space-4);
}

.tree-filter-options label:has(input:checked) {
    border-color: var(--color-border-primary);
    color: var(--color-primary-700);
    background: var(--color-primary-subtle);
}

.bulk-preview-summary,
.bulk-preview-status-counts {
    padding: var(--space-5);
}

#trashContent {
    display: grid;
    gap: var(--space-7);
}

#trashContent section {
    display: grid;
}

#trashContent section > h3 {
    margin: 0;
    color: var(--card-title-color);
    font-size: var(--font-size-heading-sm);
}

/* Empty-state primitive aliases */
.tree-catalog-empty,
.trash-empty,
.team-empty,
.field-card-empty,
.tree-card-message,
.bulk-preview-message:empty,
.tree-filter-groups:empty {
    min-height: 72px;
    padding: var(--card-padding);
    border: var(--empty-state-border);
    border-radius: var(--card-radius);
    color: var(--card-secondary-color);
    background: var(--card-background-subtle);
    font-size: var(--font-size-md);
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
}

.analytics-view {
    position: fixed;
    inset: 0 0 0 var(--sidebar-width-collapsed, 76px);
    z-index: 890;
    overflow: auto;
    padding: 28px clamp(18px, 4vw, 56px) 48px;
    color: var(--color-text-primary);
    background: var(--color-surface, #f5f7f4);
}

.analytics-view[hidden] {
    display: none;
}

.sidebar-expanded .analytics-view {
    inset-inline-start: var(--sidebar-width-expanded, 260px);
}

.analytics-header,
.analytics-filters,
.analytics-period-note,
.analytics-view > section {
    width: min(1120px, 100%);
    margin-inline: auto;
}

.analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.analytics-header h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.analytics-eyebrow {
    margin: 0 0 var(--space-1);
    color: var(--color-text-muted, #637066);
    font-size: var(--font-size-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.analytics-close {
    min-width: 44px;
    min-height: 44px;
}

.analytics-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 280px));
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--card-border);
    border-radius: var(--card-radius-strong);
    background: var(--card-background);
    box-shadow: var(--card-shadow-subtle);
}

.analytics-filters label {
    display: grid;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.analytics-filters .form-select {
    min-height: 44px;
}

.analytics-period-note {
    margin-top: var(--space-3);
    margin-bottom: var(--space-8);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.analytics-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.analytics-section-heading h3 {
    margin: 0;
    font-size: var(--font-size-heading-md);
}

.analytics-scope-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.analytics-status {
    min-height: 24px;
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
}

.analytics-status .button {
    margin-inline-start: var(--space-2);
}

.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.analytics-kpi {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-6);
    border: var(--card-border);
    border-radius: var(--card-radius-strong);
    background: var(--card-background);
    box-shadow: var(--card-shadow-subtle);
}

.analytics-kpi-label,
.analytics-kpi small {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.analytics-kpi-value {
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    line-height: 1.1;
}

.analytics-kpi--healthy { border-color: rgba(46, 125, 50, .3); }
.analytics-kpi--inspection { border-color: rgba(239, 108, 0, .35); }
.analytics-kpi--dead { border-color: rgba(198, 40, 40, .3); }
.analytics-kpi--primary,
.analytics-kpi--survival { border-color: var(--color-border-primary); }

.analytics-kpi--skeleton {
    border-color: transparent;
    background: linear-gradient(90deg, #f2f5f2 25%, #e8eee9 37%, #f2f5f2 63%);
    background-size: 400% 100%;
    animation: analytics-pulse 1.3s ease infinite;
}

@keyframes analytics-pulse {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

.analytics-status-summary {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: var(--card-border);
    border-radius: var(--card-radius);
    color: var(--color-text-secondary);
    background: var(--card-background-subtle);
}

.analytics-details {
    width: min(1120px, 100%);
    margin: var(--space-8) auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
}

.analytics-activity-section {
    margin-top: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-border, #dce6de);
    border-radius: var(--radius-lg, 16px);
    background: var(--color-surface, #fff);
}

.analytics-activity-section[hidden] { display: none; }
.analytics-activity-heading { align-items: flex-start; }
.analytics-activity-heading p { margin: 4px 0 0; color: var(--color-text-muted, #66756a); }
.analytics-help-text { margin: 0 0 var(--space-4); color: var(--color-text-muted, #66756a); font-size: .9rem; }
.analytics-activity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.analytics-activity-card {
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border, #dce6de);
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface-subtle, #f7faf7);
}
.analytics-activity-card--total { background: color-mix(in srgb, var(--color-primary, #26763b) 8%, white); }
.analytics-activity-card h4 { margin: 0 0 var(--space-2); }
.analytics-activity-card > strong { display: block; margin-bottom: var(--space-3); font-size: 1.15rem; }
.analytics-activity-card dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.analytics-activity-card dt { color: var(--color-text-muted, #66756a); }
.analytics-activity-card dd { margin: 0; font-weight: 700; }
.analytics-activity-empty { margin: 0; padding: var(--space-5); border-radius: var(--radius-md, 12px); background: var(--color-surface-subtle, #f7faf7); }

.analytics-attention-section,
.analytics-attention-detail {
    padding: var(--space-5);
    border: 1px solid var(--color-border-subtle, #dfe7df);
    border-radius: var(--radius-lg, 16px);
    background: var(--color-surface, #fff);
}
.analytics-attention-section[hidden], .analytics-attention-detail[hidden] { display: none; }
.analytics-attention-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.analytics-attention-card,
.analytics-attention-row,
.analytics-attention-tree {
    min-height: 44px;
    border: 1px solid var(--color-border-subtle, #dfe7df);
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface, #fff);
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.analytics-attention-card { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-2); padding: var(--space-4); }
.analytics-attention-card strong { font-size: 1.35rem; }
.analytics-attention-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.analytics-attention-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); align-items: center; padding: var(--space-3); }
.analytics-attention-card:hover, .analytics-attention-row:hover, .analytics-attention-tree:hover { border-color: var(--color-border-primary); }
.analytics-attention-card:focus-visible, .analytics-attention-row:focus-visible, .analytics-attention-tree:focus-visible { outline: 3px solid var(--color-focus, #79b88a); outline-offset: 2px; }
.analytics-attention-detail__header { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.analytics-attention-detail__header h3, .analytics-attention-detail__header p { margin: 0; }
.analytics-attention-list { display: grid; gap: var(--space-2); }
.analytics-attention-tree { display: grid; gap: 4px; width: 100%; padding: var(--space-3) var(--space-4); }
.analytics-attention-tree span { color: var(--color-text-muted, #66756a); }
.analytics-attention-more { margin-top: var(--space-4); min-height: 44px; }

.analytics-details[hidden],
.analytics-details section[hidden] {
    display: none;
}

.analytics-details > section {
    min-width: 0;
}

.analytics-details > section:nth-child(1),
.analytics-details > section:nth-child(2),
.analytics-details > section:nth-child(3) {
    grid-column: 1 / -1;
}

.analytics-detail-grid,
.analytics-completeness-grid,
.analytics-field-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.analytics-measurement-card,
.analytics-completeness-item,
.analytics-field-card,
.analytics-distribution {
    border: var(--card-border);
    border-radius: var(--card-radius-strong);
    background: var(--card-background);
    box-shadow: var(--card-shadow-subtle);
}

.analytics-measurement-card {
    padding: var(--space-5);
}

.analytics-measurement-card h4 {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-lg);
}

.analytics-measurement-card dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.analytics-measurement-card dt,
.analytics-measurement-counts,
.analytics-empty-inline {
    color: var(--color-text-muted);
}

.analytics-measurement-card dd {
    margin: 0;
    font-weight: 600;
    text-align: end;
}

.analytics-measurement-counts {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: var(--card-border);
    font-size: var(--font-size-sm);
}

.analytics-completeness-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.analytics-completeness-item {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4);
    color: var(--color-text-muted);
}

.analytics-completeness-item strong {
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
}

.analytics-field-card {
    width: 100%;
    min-height: 44px;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    color: var(--color-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.analytics-field-card:hover:not(:disabled) {
    border-color: var(--color-border-primary);
}

.analytics-field-card:focus-visible,
.analytics-material-tabs .button:focus-visible {
    outline: 3px solid var(--color-focus-ring, rgba(46, 125, 50, .35));
    outline-offset: 2px;
}

.analytics-field-card:disabled {
    cursor: default;
    opacity: .75;
}

.analytics-field-card__heading {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

.analytics-field-card__counts {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.analytics-status-bar {
    height: 10px;
    display: flex;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-surface-muted, #e7ebe7);
}

.analytics-status-summary .analytics-status-bar {
    margin-bottom: var(--space-3);
}

.analytics-status-bar__segment--healthy { background: #2e7d32; }
.analytics-status-bar__segment--inspection { background: #ef6c00; }
.analytics-status-bar__segment--dead { background: #c62828; }
.analytics-status-bar.is-empty { background: var(--color-surface-muted, #e7ebe7); }

.analytics-material-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.analytics-material-tabs .button {
    min-height: 44px;
}

.analytics-material-tabs .button.is-active {
    color: var(--color-on-primary, #fff);
    background: var(--color-primary, #2e7d32);
}

.analytics-distribution {
    min-height: 112px;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
}

.analytics-distribution-row {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: center;
}

.analytics-distribution-row > span:first-child {
    overflow-wrap: anywhere;
}

.analytics-distribution-track {
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-surface-muted, #e7ebe7);
}

.analytics-distribution-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary, #477a51);
}

.analytics-empty-inline {
    margin: 0;
}

.analytics-detail-skeleton {
    min-height: 112px;
    border-radius: var(--card-radius-strong);
    background: linear-gradient(90deg, #f2f5f2 25%, #e8eee9 37%, #f2f5f2 63%);
    background-size: 400% 100%;
    animation: analytics-pulse 1.3s ease infinite;
}

@media (max-width: 900px) {
    .analytics-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-completeness-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-attention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .analytics-view {
        inset: 0;
        padding: max(18px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
    }

    .analytics-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--space-4);
    }

    .analytics-kpi {
        min-height: 112px;
        padding: var(--space-5);
    }

    .analytics-details,
    .analytics-detail-grid,
    .analytics-field-comparison {
        grid-template-columns: 1fr;
    }

    .analytics-details > section {
        grid-column: 1;
    }

    .analytics-field-card {
        min-height: 44px;
    }

    .analytics-activity-section { padding: var(--space-4); }
}

@media (max-width: 420px) {
    .analytics-filters,
    .analytics-kpi-grid,
    .analytics-completeness-grid {
        grid-template-columns: 1fr;
    }

    .analytics-activity-grid { grid-template-columns: 1fr; }
    .analytics-attention-grid, .analytics-attention-compact { grid-template-columns: 1fr; }
    .analytics-attention-section, .analytics-attention-detail { padding: var(--space-4); }
    .analytics-attention-detail__header { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .analytics-kpi--skeleton {
        animation: none;
    }

    .analytics-detail-skeleton {
        animation: none;
    }
}

.activity-log-view {
    position: fixed;
    inset: 0 0 0 var(--sidebar-width-collapsed, 76px);
    z-index: 900;
    overflow: auto;
    padding: 28px clamp(18px, 4vw, 56px) 48px;
    background: var(--color-surface, #f5f7f4);
}
.sidebar-expanded .activity-log-view { inset-inline-start: var(--sidebar-width-expanded, 260px); }
.activity-log-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; margin: 0 auto 18px; }
.activity-log-header h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.activity-log-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.activity-log-close { min-width: 44px; min-height: 44px; font-size: 1.25rem; }
.activity-log-eyebrow { margin: 0 0 4px; color: var(--color-text-muted, #637066); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.activity-log-filters { max-width: 1120px; margin: 0 auto 14px; padding: 14px; display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)) auto; gap: 10px; align-items: end; background: white; border: 1px solid var(--color-border, #d8ded8); border-radius: 14px; }
.activity-log-filters label { display: grid; gap: 5px; min-width: 0; font-size: .78rem; color: var(--color-text-muted, #637066); }
.activity-log-tree-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.activity-log-tree-selection { color: var(--color-text, #203326); overflow-wrap: anywhere; }
.activity-log-tree-chooser { display: grid; gap: 4px; }
.activity-log-tree-chooser button { justify-content: flex-start; white-space: normal; }
.activity-log-custom-dates { grid-column: 1 / -1; display: flex; gap: 10px; }
.activity-log-custom-dates[hidden] { display: none; }
.activity-log-chips { max-width: 1120px; margin: 0 auto 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.activity-log-chip { padding: 5px 9px; border-radius: 999px; background: #eaf3eb; color: #31583a; font-size: .78rem; }
.activity-log-status { max-width: 1120px; margin: 12px auto; min-height: 24px; color: var(--color-text-muted, #637066); }
.activity-log-status .button { margin-inline-start: 8px; }
.activity-log-list { max-width: 1120px; margin: 0 auto; display: grid; gap: 10px; }
.activity-log-card { padding: 16px 18px; background: white; border: 1px solid var(--color-border, #d8ded8); border-radius: 14px; box-shadow: 0 4px 16px rgba(24, 56, 31, .06); }
.activity-log-card header { display: flex; justify-content: space-between; gap: 16px; color: var(--color-text-muted, #637066); font-size: .84rem; }
.activity-log-card header strong { overflow-wrap: anywhere; color: var(--color-text, #203326); }
.activity-log-card h3 { margin: 9px 0 5px; font-size: 1rem; }
.activity-log-facts, .activity-log-details p { margin: 4px 0; overflow-wrap: anywhere; }
.activity-log-details { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border, #d8ded8); }
.activity-log-entity-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.activity-log-more { display: block; margin: 18px auto 0; }
.activity-log-more[hidden] { display: none; }
#activityLogMobileFiltersButton { display: none; }
.activity-log-apply { display: none; }
.activity-log-skeleton { min-height: 112px; background: linear-gradient(90deg, #f2f5f2 25%, #e8eee9 37%, #f2f5f2 63%); background-size: 400% 100%; animation: activity-log-pulse 1.3s ease infinite; }
@keyframes activity-log-pulse { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (max-width: 700px) {
    .activity-log-view { inset: 0; padding: max(18px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom)); }
    #activityLogMobileFiltersButton { display: inline-flex; min-height: 44px; }
    .activity-log-header { align-items: flex-start; }
    .activity-log-header-actions { align-items: stretch; }
    .activity-log-close { min-width: 44px; min-height: 44px; }
    .activity-log-filters { display: none; position: fixed; inset: auto 0 0; z-index: 10001; max-height: 82dvh; overflow: auto; grid-template-columns: 1fr; border-radius: 18px 18px 0 0; padding: 18px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-shadow: 0 -12px 40px rgba(13, 45, 17, .24); }
    .activity-log-filters.is-mobile-open { display: grid; }
    .activity-log-apply { display: inline-flex; }
    .activity-log-custom-dates { grid-column: auto; display: grid; grid-template-columns: 1fr 1fr; }
    .activity-log-card { padding: 14px; }
    .activity-log-card header { align-items: flex-start; }
    .activity-log-card header strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .activity-log-card button { min-height: 44px; }
}

.tree-filter-groups:empty {
    display: grid;
    place-items: center;
}

/* Badge system */
.team-role-badge,
.team-invitation-status,
.history-badge,
.field-card-event-header strong,
.tree-card-event > strong,
#treeFilterCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 24px;
    padding: var(--ui-badge-padding-y) var(--ui-badge-padding-x);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-pill);
    color: var(--history-badge-color);
    background: var(--history-badge-background);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    box-sizing: border-box;
}

.team-invitation-status {
    border-color: rgba(21, 101, 192, 0.28);
    color: var(--color-info-700);
    background: rgba(21, 101, 192, 0.08);
}

#treeFilterCount {
    min-width: 24px;
    padding-right: var(--space-2);
    padding-left: var(--space-2);
}

/* Icon alignment */
.app-icon,
.sidebar-icon,
.button svg,
button svg {
    flex: 0 0 auto;
    width: var(--ui-icon-size);
    height: var(--ui-icon-size);
    vertical-align: middle;
}

.button:has(svg) {
    gap: var(--space-3);
}

.button--icon:has(svg) {
    gap: 0;
}

/* Consistent internal scrolling */
.app-sidebar,
.team-content,
.tree-filter-dialog,
.bulk-preview-dialog,
.tree-card-dialog,
.field-card-dialog,
.tree-photo-dialog,
.trash-window,
.tree-card-history,
.field-card-event-list {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
}

.app-sidebar::-webkit-scrollbar,
.team-content::-webkit-scrollbar,
.tree-filter-dialog::-webkit-scrollbar,
.bulk-preview-dialog::-webkit-scrollbar,
.tree-card-dialog::-webkit-scrollbar,
.field-card-dialog::-webkit-scrollbar,
.tree-photo-dialog::-webkit-scrollbar,
.trash-window::-webkit-scrollbar,
.tree-card-history::-webkit-scrollbar,
.field-card-event-list::-webkit-scrollbar {
    width: var(--ui-scrollbar-size);
    height: var(--ui-scrollbar-size);
}

.app-sidebar::-webkit-scrollbar-track,
.team-content::-webkit-scrollbar-track,
.tree-filter-dialog::-webkit-scrollbar-track,
.bulk-preview-dialog::-webkit-scrollbar-track,
.tree-card-dialog::-webkit-scrollbar-track,
.field-card-dialog::-webkit-scrollbar-track,
.tree-photo-dialog::-webkit-scrollbar-track,
.trash-window::-webkit-scrollbar-track,
.tree-card-history::-webkit-scrollbar-track,
.field-card-event-list::-webkit-scrollbar-track {
    background: var(--ui-scrollbar-track);
}

.app-sidebar::-webkit-scrollbar-thumb,
.team-content::-webkit-scrollbar-thumb,
.tree-filter-dialog::-webkit-scrollbar-thumb,
.bulk-preview-dialog::-webkit-scrollbar-thumb,
.tree-card-dialog::-webkit-scrollbar-thumb,
.field-card-dialog::-webkit-scrollbar-thumb,
.tree-photo-dialog::-webkit-scrollbar-thumb,
.trash-window::-webkit-scrollbar-thumb,
.tree-card-history::-webkit-scrollbar-thumb,
.field-card-event-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--ui-scrollbar-thumb);
    background-clip: padding-box;
}

.app-sidebar::-webkit-scrollbar-thumb:hover,
.team-content::-webkit-scrollbar-thumb:hover,
.tree-filter-dialog::-webkit-scrollbar-thumb:hover,
.bulk-preview-dialog::-webkit-scrollbar-thumb:hover,
.tree-card-dialog::-webkit-scrollbar-thumb:hover,
.field-card-dialog::-webkit-scrollbar-thumb:hover,
.trash-window::-webkit-scrollbar-thumb:hover {
    background: var(--ui-scrollbar-thumb-hover);
    background-clip: padding-box;
}

/* Motion and focus */
.team-dialog,
.tree-filter-dialog,
.bulk-preview-dialog,
.team-confirmation-dialog,
.field-edit-discard-dialog,
.tree-photo-dialog,
.tree-card-dialog,
.field-card-dialog,
.trash-window {
    animation: ui-dialog-enter var(--duration-emphasis) ease-out;
}

@keyframes ui-dialog-enter {
    from {
        opacity: 0;
        transform: translateY(var(--space-2));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.trash-window {
    animation-name: ui-centered-dialog-enter;
}

@keyframes ui-centered-dialog-enter {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + var(--space-2)));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 760px) {
    .team-header,
    .tree-filter-header,
    .bulk-preview-header,
    .tree-photo-header,
    .tree-card-header.card-header,
    .field-card-header.card-header,
    .trash-header {
        padding: var(--space-6);
    }

    .team-content,
    .tree-filter-dialog,
    .bulk-preview-dialog,
    .team-confirmation-dialog,
    .field-edit-discard-dialog {
        padding: var(--space-6) !important;
    }

    .team-header + .team-content {
        padding-top: var(--space-6) !important;
    }
}

@media (max-width: 520px) {
    .team-entry,
    .tree-catalog-item,
    .trash-item {
        padding: var(--space-5);
    }

    .team-confirmation-actions,
    .field-edit-actions,
    .bulk-preview-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-dialog,
    .tree-filter-dialog,
    .bulk-preview-dialog,
    .team-confirmation-dialog,
    .field-edit-discard-dialog,
    .tree-photo-dialog,
    .tree-card-dialog,
    .field-card-dialog,
    .trash-window,
    .team-entry,
    .tree-catalog-item,
    .trash-item,
    .tree-filter-options label {
        animation: none;
        transition-duration: var(--duration-instant);
    }
}