/* ============================================================================
   Entomology module — EN.2 (larval survey) styles
   Scoped entirely under `.entom-theme` so nothing here leaks into other pages.
   Palette: deep pine green + water blue + amber accent (per the EN.2 prototype).
   ============================================================================ */

.entom-theme {
    --en2-ink: #17211f;
    --en2-pine: #1f4d47;
    --en2-pine-soft: #2f6b62;
    --en2-pine-tint: #e4ece9;
    --en2-water: #256d86;
    --en2-water-tint: #dcecf1;
    --en2-amber: #c1852a;
    --en2-amber-tint: #f7ecd6;
    --en2-green: #3f7d4e;
    --en2-green-tint: #e2efe4;
    --en2-surface: #ffffff;
    --en2-surface-2: #f6f8f3;
    --en2-surface-3: #eef1ea;
    --en2-line: #d3d8cd;
    --en2-line-strong: #b9c0b2;
    --en2-muted: #5f6b63;
    --en2-radius: 14px;
    --en2-shadow: 0 1px 2px rgba(23, 33, 31, .05), 0 6px 20px rgba(23, 33, 31, .06);
    --en2-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ── Title crest ─────────────────────────────────────────────────────────── */
.entom-theme .en2-crest {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    color: var(--en2-pine);
    background: linear-gradient(135deg, var(--en2-amber-tint), var(--en2-pine-tint));
    box-shadow: inset 0 0 0 1.5px rgba(31, 77, 71, .18);
}
.entom-theme .en2-crest .mud-icon-root { color: var(--en2-pine); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.entom-theme .en2-card {
    border-radius: var(--en2-radius);
    border: 1px solid var(--en2-line);
    box-shadow: var(--en2-shadow);
    position: relative;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.entom-theme .en2-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--en2-pine), var(--en2-water));
}
.entom-theme .en2-card:hover { box-shadow: 0 2px 6px rgba(23, 33, 31, .08), 0 14px 34px rgba(23, 33, 31, .10); }

/* ── "Header saved" lock badge ───────────────────────────────────────────── */
.entom-theme .en2-locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--en2-green);
    background: var(--en2-green-tint);
    border: 1px solid #b8d6bf;
    border-radius: 999px;
    padding: 3px 12px;
}
.entom-theme .en2-locked-badge .mud-icon-root { font-size: 1rem; }

/* ── Section sub-heads ───────────────────────────────────────────────────── */
.entom-theme .en2-subhead {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 6px 0 2px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--en2-pine);
}
.entom-theme .en2-subhead::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--en2-line);
}
.entom-theme .en2-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--en2-water);
    flex: none;
}

/* ── Pill chips: MudRadio / MudCheckBox wrapped as selectable pills ───────── */
.entom-theme .en2-chip {
    margin: 0;
    padding: 4px 12px 4px 8px;
    border: 1.5px solid var(--en2-line-strong);
    border-radius: 999px;
    background: var(--en2-surface);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.entom-theme .en2-chip:hover { border-color: var(--en2-water); background: var(--en2-water-tint); }
/* Selected state (progressive enhancement via :has) */
.entom-theme .en2-chip:has(.mud-checked) {
    border-color: var(--en2-water);
    background: var(--en2-water-tint);
    box-shadow: 0 0 0 2px rgba(37, 109, 134, .12);
}
.entom-theme .en2-chip .mud-typography { font-weight: 500; }

/* Compact Yes/No segmented toggle (IsFishDistribution) — rounded pill pair instead of the
   default square-cornered MudButtonGroup. */
.entom-theme .en2-seg-toggle .mud-button-root {
    text-transform: none;
    min-width: 56px;
    padding: 2px 14px;
    font-size: .8rem;
}
.entom-theme .en2-seg-toggle .mud-button-root:first-child { border-radius: 999px 0 0 999px; }
.entom-theme .en2-seg-toggle .mud-button-root:last-child { border-radius: 0 999px 999px 0; }

/* ── Fish-distribution reveal block ──────────────────────────────────────── */
.entom-theme .en2-reveal {
    margin-top: 6px;
    padding: 14px;
    border: 1px dashed var(--en2-line-strong);
    border-radius: 11px;
    background: var(--en2-surface-2);
}

/* ── Locked gate placeholder ─────────────────────────────────────────────── */
.entom-theme .en2-gate {
    border-radius: var(--en2-radius);
    border: 1.5px dashed var(--en2-line-strong) !important;
    background: var(--en2-surface-2);
}

/* ── Dip-session accordion panels ────────────────────────────────────────── */
.entom-theme .en2-sess-panel {
    border-radius: 12px !important;
    border: 1px solid var(--en2-line);
    border-left: 5px solid var(--en2-water);
    overflow: hidden;
    transition: box-shadow .18s ease;
}
.entom-theme .en2-sess-panel:hover { box-shadow: var(--en2-shadow); }
.entom-theme .en2-sess-found { border-left-color: var(--en2-green); }
.entom-theme .en2-sess-empty { border-left-color: var(--en2-line-strong); }
.entom-theme .en2-sess-panel .mud-expand-panel-header { background: var(--en2-surface-2); }

/* ── Larva table ─────────────────────────────────────────────────────────── */
.entom-theme .en2-larva-table {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--en2-line);
}
.entom-theme .en2-larva-table th { background: var(--en2-surface-2); color: var(--en2-pine); font-weight: 600; }
.entom-theme .en2-larva-num {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    color: #fff;
    background: var(--en2-water);
    font-family: var(--en2-mono);
    font-size: .74rem;
    font-weight: 600;
}

/* ── Photo dropzone + gallery ────────────────────────────────────────────── */
.entom-theme .en2-dropzone {
    border: 2px dashed var(--en2-line-strong);
    border-radius: 11px;
    background: var(--en2-surface-2);
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.entom-theme .en2-dropzone:hover { border-color: var(--en2-amber); background: var(--en2-amber-tint); }
.entom-theme .en2-dz-main { font-weight: 600; color: var(--en2-pine); font-size: .9rem; }
.entom-theme .en2-dz-sub { font-size: .74rem; color: var(--en2-muted); margin-top: 3px; }

.entom-theme .en2-photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.entom-theme .en2-photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--en2-line);
    background: var(--en2-surface-2);
    cursor: zoom-in;
    box-shadow: var(--en2-shadow);
}
.entom-theme .en2-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}
.entom-theme .en2-photo-thumb:hover img { transform: scale(1.06); }
.entom-theme .en2-photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
}
.entom-theme .en2-photo-remove .mud-button-root { min-width: 0; padding: 2px; }

/* ── Sticky action bar with live stats ───────────────────────────────────── */
.entom-theme .en2-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), var(--en2-surface));
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--en2-line);
    box-shadow: 0 -6px 24px rgba(23, 33, 31, .08);
}
.entom-theme .en2-actionbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.entom-theme .en2-stat { display: flex; flex-direction: column; line-height: 1.15; }
.entom-theme .en2-stat .n { font-family: var(--en2-mono); font-weight: 600; font-size: 1.2rem; color: var(--en2-water); }
.entom-theme .en2-stat .l { font-size: .66rem; color: var(--en2-muted); text-transform: uppercase; letter-spacing: .05em; }
.entom-theme .en2-divider { width: 1px; height: 32px; background: var(--en2-line); }
.entom-theme .en2-spacer { flex: 1; }
/* Reserves space so the fixed bar never covers page content. */
.en2-actionbar-spacer { height: 76px; }

/* ── Map picker dialog coordinate readout ────────────────────────────────── */
.entom-theme .en2-pick-coord {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid var(--en2-line);
    border-radius: 9px;
    background: var(--en2-surface-2);
    font-family: var(--en2-mono);
    font-size: .86rem;
    color: var(--en2-ink);
}

/* ── Small responsive niceties ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .entom-theme .en2-actionbar-inner { gap: 10px; padding: 8px 12px; }
    .entom-theme .en2-stat .n { font-size: 1.05rem; }
}

/* ============================================================================
   ENTOM (parent survey) — shares the EN.2 palette; adds map / GIS layout bits.
   ============================================================================ */
.entom-theme {
    --entom-pine: var(--en2-pine);
    --entom-en1: #1565c0;   /* EN.1 markers (blue) */
    --entom-en2: #b71c1c;   /* EN.2 markers (red) */
    --entom-selected: #f9a825; /* selected marker (amber) */
}

/* Title crest (bug icon) — same treatment as the EN.2 crest */
.entom-theme .entom-crest {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    color: var(--en2-pine);
    background: linear-gradient(135deg, var(--en2-amber-tint), var(--en2-pine-tint));
    box-shadow: inset 0 0 0 1.5px rgba(31, 77, 71, .18);
}
.entom-theme .entom-crest .mud-icon-root { color: var(--en2-pine); }

/* Pill chips (area code) — reuse the EN.2 chip look */
.entom-theme .entom-chip {
    margin: 0;
    padding: 4px 12px 4px 8px;
    border: 1.5px solid var(--en2-line-strong);
    border-radius: 999px;
    background: var(--en2-surface);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.entom-theme .entom-chip:hover { border-color: var(--en2-water); background: var(--en2-water-tint); }
.entom-theme .entom-chip:has(.mud-checked) {
    border-color: var(--en2-water);
    background: var(--en2-water-tint);
    box-shadow: 0 0 0 2px rgba(37, 109, 134, .12);
}

/* Operation summary banner */
.entom-theme .entom-op-banner {
    border-radius: var(--en2-radius);
    border: 1px solid var(--en2-line);
    background: linear-gradient(135deg, var(--en2-pine-tint), var(--en2-surface));
    padding: 8px 16px !important;
    margin-bottom: 12px !important;
}
.entom-theme .entom-op-range { color: var(--en2-pine); }
.entom-theme .entom-op-metric { min-width: 68px; }
.entom-theme .entom-op-metric .v { font-family: var(--en2-mono); font-weight: 600; font-size: 1.25rem; color: var(--en2-pine); line-height: 1.1; }
.entom-theme .entom-op-metric .l { font-size: .68rem; color: var(--en2-muted); text-transform: uppercase; letter-spacing: .05em; }
.entom-theme .entom-op-divider { width: 1px; height: 30px; background: var(--en2-line); }

/* Locked gate placeholder (before the survey header is saved) */
.entom-theme .entom-gate {
    border-radius: var(--en2-radius);
    border: 1.5px dashed var(--en2-line-strong) !important;
    background: var(--en2-surface-2);
}

/* GIS two-panel layout: tables left, sticky map right */
.entom-theme .entom-gis-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.entom-theme .entom-gis-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.entom-theme .entom-gis-right { position: sticky; top: 12px; min-width: 0; }
.entom-theme .entom-table-scroll { max-height: 320px; overflow: auto; }
@media (max-width: 1100px) {
    .entom-theme .entom-gis-layout { grid-template-columns: 1fr; }
    .entom-theme .entom-gis-right { position: static; }
}

/* Interactive child tables (row click selects the matching map marker) */
.entom-theme .entom-interactive-table tbody tr { cursor: pointer; }
.entom-theme .entom-child-header th { background: var(--en2-surface-2); color: var(--en2-pine); font-weight: 600; }
.entom-theme .entom-row-active-en1 td { background: rgba(21, 101, 192, .12) !important; }
.entom-theme .entom-row-active-en2 td { background: rgba(183, 28, 28, .10) !important; }

/* ============================================================================
   EN.1 (adult-mosquito survey) — mirrors the EN.2 component styles.
   ============================================================================ */

/* Cards / crest / chips / subheads — same treatment as en2-* */
.entom-theme .en1-card { border-radius: var(--en2-radius); border: 1px solid var(--en2-line); }
.entom-theme .en1-crest {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    color: var(--en2-pine);
    background: linear-gradient(135deg, var(--en2-amber-tint), var(--en2-pine-tint));
    box-shadow: inset 0 0 0 1.5px rgba(31, 77, 71, .18);
}
.entom-theme .en1-chip {
    margin: 0;
    padding: 4px 12px 4px 8px;
    border: 1.5px solid var(--en2-line-strong);
    border-radius: 999px;
    background: var(--en2-surface);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.entom-theme .en1-chip:hover { border-color: var(--en2-water); background: var(--en2-water-tint); }
.entom-theme .en1-chip:has(.mud-checked) {
    border-color: var(--en2-water);
    background: var(--en2-water-tint);
    box-shadow: 0 0 0 2px rgba(37, 109, 134, .12);
}
.entom-theme .en1-subhead {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--en2-pine);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.entom-theme .en1-subhead::after { content: ""; flex: 1; height: 1px; background: var(--en2-line); }
.entom-theme .en1-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--en2-water); }
.entom-theme .en1-locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--en2-green);
    background: var(--en2-green-tint);
    border: 1px solid #b8d6bf;
    border-radius: 999px;
    padding: 3px 12px;
}
.entom-theme .en1-gate {
    border-radius: var(--en2-radius);
    border: 1.5px dashed var(--en2-line-strong);
    background: var(--en2-surface-2);
}
.entom-theme .en1-empty {
    border: 1.5px dashed var(--en2-line-strong);
    border-radius: 12px;
    background: var(--en2-surface-2);
    margin-top: 12px;
}

/* Time-slot accordion — status via left border, like en2 sessions */
.entom-theme .en1-timeslot-panel {
    border: 1px solid var(--en2-line);
    border-left: 5px solid var(--en2-muted);
    border-radius: 12px !important;
    overflow: hidden;
}
.entom-theme .en1-slot-st02 { border-left-color: var(--en2-green); }
.entom-theme .en1-slot-st03 { border-left-color: var(--en2-amber); }
.entom-theme .en1-slot-flagged { border-left-color: #a8342f; }
.entom-theme .en1-clock {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    color: var(--en2-water);
    background: var(--en2-water-tint);
}
.entom-theme .en1-slot-add { margin-top: 4px; }
.entom-theme .en1-env-group,
.entom-theme .en1-status-group,
.entom-theme .en1-mosquito-group { border-radius: 11px; }

/* Mosquito-status toggle buttons */
.entom-theme .en1-status-btn { border: 1.5px solid var(--en2-line-strong); color: var(--en2-muted); }
.entom-theme .en1-status-btn.on-catch { border-color: var(--en2-green); color: #fff; background: var(--en2-green); }
.entom-theme .en1-status-btn.on-nocatch { border-color: var(--en2-amber); color: #fff; background: var(--en2-amber); }

/* Mosquito table: grouped column tints + frozen species column */
.entom-theme .en1-mosquito-table th.en1-grp-ov { background: var(--en2-pine-tint); }
.entom-theme .en1-mosquito-table th.en1-grp-mg { background: var(--en2-water-tint); }
.entom-theme .en1-mosquito-table th.en1-grp-sg { background: var(--en2-amber-tint); }
.entom-theme .en1-mosquito-table .en1-sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--mud-palette-surface, #fff);
}
.entom-theme .en1-flag-cell .mud-input { color: #a8342f; font-weight: 700; }
.entom-theme .en1-pcr-wrap { background: var(--en2-surface-2); padding: 10px 14px; }
.entom-theme .en1-pcr-title { color: var(--en2-pine); }

/* Photos — same dropzone/gallery treatment as en2 */
.entom-theme .en1-dropzone {
    border: 2px dashed var(--en2-line-strong);
    border-radius: 11px;
    background: var(--en2-surface-2);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    margin-top: 8px;
}
.entom-theme .en1-dropzone:hover { border-color: var(--en2-amber); background: var(--en2-amber-tint); }
.entom-theme .en1-dz-main { font-weight: 600; color: var(--en2-pine); font-size: .9rem; }
.entom-theme .en1-dz-sub { font-size: .74rem; color: var(--en2-muted); margin-top: 3px; }
.entom-theme .en1-photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 9px;
    margin-top: 11px;
}
.entom-theme .en1-photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid var(--en2-line);
    background: var(--en2-surface-2);
    cursor: zoom-in;
}
.entom-theme .en1-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entom-theme .en1-photo-remove { position: absolute; right: 2px; top: 2px; }

/* ── Time slots: master–detail (slot list ↔ selected-slot detail) ── */
.entom-theme .en1-slot-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 560px;
    overflow: auto;
    padding-right: 4px;
}
.entom-theme .en1-slot-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--en2-line);
    border-left: 5px solid var(--en2-muted);
    border-radius: 11px;
    background: var(--en2-surface);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.entom-theme .en1-slot-card:hover { background: var(--en2-surface-2); }
.entom-theme .en1-slot-card.selected {
    border-color: var(--en2-water);
    background: var(--en2-water-tint);
    box-shadow: 0 0 0 2px rgba(37, 109, 134, .30);
}
.entom-theme .en1-slot-card.en1-slot-st02 { border-left-color: var(--en2-green); }
.entom-theme .en1-slot-card.en1-slot-st03 { border-left-color: var(--en2-amber); }
.entom-theme .en1-slot-card.en1-slot-flagged { border-left-color: #a8342f; }
.entom-theme .en1-slot-card-main { display: flex; align-items: center; gap: 10px; min-width: 0; }

.entom-theme .en1-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--en2-muted);
    border: 1.5px dashed var(--en2-line-strong);
    border-radius: 12px;
    background: var(--en2-surface-2);
}

/* Mosquito entry cards + grouped diagnostic sections */
.entom-theme .en1-mosq-card { border-radius: 12px; border: 1px solid var(--en2-line); }
.entom-theme .en1-mosq-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px 8px;
    border-bottom: 1px solid var(--en2-line);
    margin-bottom: 8px;
}
.entom-theme .en1-diag-group {
    border: 1px solid var(--en2-line);
    border-radius: 10px;
    padding: 8px 12px 12px;
    margin-top: 10px;
}
.entom-theme .en1-diag-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}
.entom-theme .en1-grp-ov-label { color: var(--en2-pine); }
.entom-theme .en1-grp-mg-label { color: var(--en2-water); }
.entom-theme .en1-grp-sg-label { color: var(--en2-amber); }
/* Combined midgut + salivary gland group, used only by the master-detail layout
   (AddEditEn1Dialog2) — the wizard keeps the two as separate boxes above. */
.entom-theme .en1-grp-mgsg-label { color: var(--en2-water); }

/* ── Wizard: stepper header, step intros, action bar ─────────────────────── */
.entom-theme .en1-stepper .mud-stepper-nav {
    border: 1px solid var(--en2-line);
    border-radius: var(--en2-radius);
    background: linear-gradient(135deg, var(--en2-pine-tint), var(--en2-surface));
    padding: 4px 8px;
}
/* MudStepper puts the state classes on the step root, not on the label. */
.entom-theme .en1-stepper .mud-step { padding: 16px 12px; border-radius: 10px; }
.entom-theme .en1-stepper .mud-step .mud-step-label-icon { background-color: var(--en2-line-strong); }
.entom-theme .en1-stepper .mud-step.active .mud-step-label-icon { background-color: var(--en2-pine); }
.entom-theme .en1-stepper .mud-step.mud-step-completed .mud-step-label-icon { background-color: var(--en2-green); }
.entom-theme .en1-stepper .mud-step.mud-step-error .mud-step-label-icon { background-color: #a8342f; }
.entom-theme .en1-stepper .mud-step-label-content-title {
    font-weight: 600;
    color: var(--en2-ink);
}
.entom-theme .en1-stepper .mud-step.mud-step-error .mud-step-label-content-title { color: #a8342f; }
/* Secondary text carries the live step summary — keep it quiet but readable. */
.entom-theme .en1-stepper .mud-step-label-content-secondary-text {
    color: var(--en2-muted);
    font-size: .74rem;
}
.entom-theme .en1-stepper .mud-stepper-nav-connector-line { border-color: var(--en2-line-strong); }
.entom-theme .en1-stepper .mud-stepper-content { padding: 18px 0 0; }
/* Back/Next/Save live in the dialog action bar — keep the stepper's own row out. */
.entom-theme .en1-stepper .mud-stepper-actions { display: none; }

.entom-theme .en1-step-intro {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.entom-theme .en1-wizard-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

/* ── Review step: summary cards + slot roll-up table ─────────────────────── */
.entom-theme .en1-rev-card { height: 100%; }
.entom-theme .en1-rev-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.entom-theme .en1-rev-head .en1-subhead { flex: 1; }
.entom-theme .en1-rev-list { margin: 0; }
.entom-theme .en1-rev-row {
    display: grid;
    grid-template-columns: minmax(110px, 34%) 1fr;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--en2-line);
}
.entom-theme .en1-rev-row:last-child { border-bottom: none; }
.entom-theme .en1-rev-row dt {
    font-size: .78rem;
    color: var(--en2-muted);
    margin: 0;
}
.entom-theme .en1-rev-row dd {
    font-size: .86rem;
    color: var(--en2-ink);
    font-weight: 500;
    margin: 0;
    overflow-wrap: anywhere;
}
.entom-theme .en1-rev-mono { font-family: var(--en2-mono); }

.entom-theme .en1-rev-table th {
    background: var(--en2-surface-2);
    color: var(--en2-pine);
    font-weight: 600;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.entom-theme .en1-rev-table td { font-size: .86rem; }
.entom-theme .en1-rev-row-flagged td { background: rgba(168, 52, 47, .07); }

/* ============================================================================
   EN.1 alternative layout (AddEditEn1Dialog2) — master–detail explorer.
   `en1x-` prefix so it cannot collide with the wizard's `en1-` styles, which it
   deliberately reuses for the shared field groups (chips, diag groups, photos).
   ============================================================================ */

/* ── Top panel: survey + site, spanning the full width above the split ───── */
.entom-theme .en1x-top-panel {
    border-radius: var(--en2-radius);
    border: 1px solid var(--en2-line);
    margin-bottom: 16px;
    overflow: hidden;
    /* Never let the fixed-height dialog column squeeze the expanded header below its
       content height — that would clip fields behind `overflow: hidden` with no way to
       reach them. Keeping its natural height lets the dialog body scroll instead. */
    flex-shrink: 0;
}
.entom-theme .en1x-top-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--en2-pine-tint), var(--en2-surface));
    transition: background .15s ease;
    /* Frozen title bar: sits above the scrolling body and never shrinks, so it — and the
       collapse toggle — stay reachable while the header fields scroll underneath. */
    flex-shrink: 0;
}
.entom-theme .en1x-top-head:hover { background: var(--en2-pine-tint); }
.entom-theme .en1x-top-head-text { min-width: 0; flex: 1; }
/* The collapsed one-liner can get long — keep it on a single line. */
.entom-theme .en1x-top-head-text .mud-typography-caption {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entom-theme .en1x-top-body {
    padding: 16px;
    border-top: 1px solid var(--en2-line);
    /* Scroll the header fields inside their own region so the frozen title bar above and the
       tree/detail panes below both stay put — the dialog body itself never has to scroll. */
    max-height: 46vh;
    overflow-y: auto;
}

/* Survey (left) / Site (right) side by side, instead of stacked, so the top panel's natural
   height roughly halves and the tree/detail split below gets the room back. */
.entom-theme .en1x-top-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.entom-theme .en1x-top-col-site {
    border-left: 1px solid var(--en2-line);
    padding-left: 20px;
}
@media (max-width: 900px) {
    .entom-theme .en1x-top-split { grid-template-columns: 1fr; gap: 0; }
    .entom-theme .en1x-top-col-site {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--en2-line);
        padding-top: 16px;
        margin-top: 16px;
    }
}

/* Mosquito detail: species/dissection fields (left) still get more room than the PCR codes
   (right) — unlike en1x-top-split, this one is deliberately unequal — but the PCR side gets a
   bit more than before now that it lays out two codes per row instead of one. */
.entom-theme .en1x-mosq-split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.entom-theme .en1x-mosq-col-pcr {
    border-left: 1px solid var(--en2-line);
    padding-left: 20px;
}
@media (max-width: 900px) {
    .entom-theme .en1x-mosq-split { grid-template-columns: 1fr; gap: 0; }
    .entom-theme .en1x-mosq-col-pcr {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--en2-line);
        padding-top: 16px;
        margin-top: 16px;
    }
}

/* Fill the whole dialog body: give the (globally max-height-capped) scroll container a
   definite height so its flex children can resolve one, then run a flex column down to the
   shell. Scoped with :has(.en1x-shell) so only THIS dialog is affected — every other dialog
   keeps MudBlazor's default content sizing. The chain is
   .mud-dialog-content → .entom-theme → <form> (EditForm) → .en1x-shell. */
.mud-dialog-content:has(.en1x-shell) {
    height: 74vh; /* just under the global 75vh cap that already fits inside the 90vh dialog */
    max-height: 74vh !important;
    display: flex;
    flex-direction: column;
}
.entom-theme:has(.en1x-shell),
.entom-theme:has(.en1x-shell) > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Two panes: fixed-width tree, fluid detail. The shell is the flex-fill child of the form,
   so it takes whatever height is left once the (collapsible) top panel has taken its own.
   The single row is an explicit `minmax(0, 1fr)` track rather than an implicit `auto` one:
   that gives the row a definite full-shell height, so `align-items: stretch` anchors each
   pane to the TOP of the row and stretches it down to fill — instead of a content-sized
   pane floating in the vertical middle when the implicit row fails to resolve a height.
   `align-content: start` keeps the track itself pinned to the top for good measure. */
.entom-theme .en1x-shell {
    display: grid;
    grid-template-columns: minmax(280px, 27%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    align-content: start;
    gap: 16px;
    flex: 1 1 auto;
    /* min-height: 0 (not a hard floor) so the shell yields whatever the expanded header needs
       and the dialog body never scrolls as a whole. Each pane scrolls internally instead, which
       keeps the tree head and detail breadcrumb frozen above their own scroll areas. */
    min-height: 0;
}
@media (max-width: 960px) {
    /* Stack the panes and hand height back to the natural document flow / dialog scroll. */
    .mud-dialog-content:has(.en1x-shell) { height: auto; max-height: 75vh !important; display: block; }
    .entom-theme:has(.en1x-shell),
    .entom-theme:has(.en1x-shell) > form { display: block; }
    .entom-theme .en1x-shell { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
}

.entom-theme .en1x-tree-pane,
.entom-theme .en1x-detail-pane {
    border-radius: var(--en2-radius);
    border: 1px solid var(--en2-line);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.entom-theme .en1x-tree-pane { background: var(--en2-surface-2); }

/* The <MudDivider/> between the tree head and the scroll renders as `mud-divider-fullwidth`,
   which MudBlazor gives `flex-grow: 1`. In this flex COLUMN that makes the <hr> grow vertically
   and split the free space with the scroll below it — pushing the node list down and leaving a
   gap above the tree. Pin it back to its 1px line so the scroll takes all the free space. */
.entom-theme .en1x-tree-pane .mud-divider { flex-grow: 0; }

.entom-theme .en1x-tree-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px 10px 14px;
}
.entom-theme .en1x-tree-head-text { min-width: 0; flex: 1; }
.entom-theme .en1x-tree-stats {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.entom-theme .en1x-tree-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    color: var(--en2-muted);
    white-space: nowrap;
}
.entom-theme .en1x-tree-stat::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stat-color, var(--en2-water));
    flex: none;
}
.entom-theme .en1x-tree-stat b {
    font-family: var(--en2-mono);
    color: var(--en2-ink);
    font-weight: 700;
    margin-right: 2px;
}

/* flex:1 + min-height:0, no max-height cap, so this genuinely fills whatever room the
   stretched pane above has — the point of the "full available height" ask. */
.entom-theme .en1x-tree-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 6px;
}
.entom-theme .en1x-tree-empty {
    margin: 8px 10px 8px 34px;
    padding: 10px;
    border: 1.5px dashed var(--en2-line-strong);
    border-radius: 9px;
    font-size: .86rem;
    color: var(--en2-muted);
    text-align: center;
}

/* ── Tree nodes ──────────────────────────────────────────────────────────── */
.entom-theme .en1x-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border-radius: 8px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}
.entom-theme .en1x-node:hover { background: var(--en2-pine-tint); }
.entom-theme .en1x-node.selected {
    background: var(--en2-water-tint);
    border-left-color: var(--en2-water);
}
.entom-theme .en1x-node.selected .en1x-node-title { color: var(--en2-pine); font-weight: 700; }
.entom-theme .en1x-node.flagged .en1x-node-icon { color: #a8342f; }

/* Indent guides make the slot → species relationship readable at a glance. */
.entom-theme .en1x-lvl1 { margin-left: 2px; }
.entom-theme .en1x-lvl2 { margin-left: 20px; }
.entom-theme .en1x-lvl1,
.entom-theme .en1x-lvl2 { border-left: 3px solid var(--en2-line); }
.entom-theme .en1x-lvl1.selected,
.entom-theme .en1x-lvl2.selected { border-left-color: var(--en2-water); }

.entom-theme .en1x-twisty { width: 26px; flex: none; display: inline-flex; }
.entom-theme .en1x-twisty-btn { padding: 3px; }
.entom-theme .en1x-node-icon { color: var(--en2-pine); flex: none; }
.entom-theme .en1x-node-text { min-width: 0; flex: 1; line-height: 1.35; }
.entom-theme .en1x-node-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--en2-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entom-theme .en1x-node-sub {
    font-size: .82rem;
    color: var(--en2-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.entom-theme .en1x-mono { font-family: var(--en2-mono); }

/* Row actions stay out of the way until the row is hovered or selected. */
.entom-theme .en1x-node-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.entom-theme .en1x-node:hover .en1x-node-actions,
.entom-theme .en1x-node.selected .en1x-node-actions { opacity: 1; }
.entom-theme .en1x-node-actions .mud-button-root { padding: 3px; }
.entom-theme .en1x-mini-chip { height: 21px; font-size: .72rem; margin: 0; }

/* Node icons default to Size.Small (~1.25rem); bump to match the larger text. */
.entom-theme .en1x-node-icon.mud-icon-root { font-size: 1.35rem; }
.entom-theme .en1x-twisty-btn .mud-icon-root { font-size: 1.35rem; }

/* ── Detail pane ─────────────────────────────────────────────────────────── */
.entom-theme .en1x-crumbs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: 9px 14px;
    background: var(--en2-surface-2);
    border-bottom: 1px solid var(--en2-line);
}
.entom-theme .en1x-crumb { font-size: .74rem; color: var(--en2-muted); }
.entom-theme .en1x-crumb.current { color: var(--en2-pine); font-weight: 700; }
.entom-theme .en1x-crumb-sep { color: var(--en2-line-strong); font-size: 1rem !important; }

.entom-theme .en1x-detail-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
}

/* PCR codes: one box per mosquito, generated from the catch amount. Tinted so the
   generated block reads as derived rather than hand-entered structure. Sits beside the
   species/dissection grid rather than stacked below something, so it doesn't need
   en1-diag-group's default top margin — pull it back up to align with that grid's top. */
.entom-theme .en1x-pcr-group {
    background: var(--en2-surface-2);
    border-color: var(--en2-line-strong);
    margin-top: 0;
}
.entom-theme .en1x-pcr-group .en1-diag-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--en2-water);
}
.entom-theme .en1x-pcr-label { cursor: pointer; user-select: none; }
.entom-theme .en1x-pcr-toggle { margin: -6px -4px -6px 0; }
.entom-theme .en1x-pcr-count {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--en2-water);
    color: #fff;
    font-family: var(--en2-mono);
    font-size: .66rem;
}

/* PCR table: one row per specimen instead of one box — stays scannable once a catch runs
   into double digits. Status reads as a cell tint rather than a separate column: an unfilled
   row sits under a light amber wash so the gaps are visible at a glance, and a duplicate code
   sits under a light red one — no extra column needed. */
.entom-theme .en1x-pcr-table {
    border: 1px solid var(--en2-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--en2-surface);
}
.entom-theme .en1x-pcr-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
}
.entom-theme .en1x-pcr-row + .en1x-pcr-row { border-top: 1px solid var(--en2-line); }
/* Two specimens per row: each cell keeps its own idx/input pair and status tint, and a
   divider between the pair mirrors the border the single-column table used to get for free. */
.entom-theme .en1x-pcr-cell {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
}
.entom-theme .en1x-pcr-cell:first-child { border-right: 1px solid var(--en2-line); }
.entom-theme .en1x-pcr-cell.empty { background: var(--en2-amber-tint); }
.entom-theme .en1x-pcr-cell.duplicate { background: #f6e2e1; }
.entom-theme .en1x-pcr-cell-empty { border-right: none; }
.entom-theme .en1x-pcr-head {
    background: var(--en2-surface-3);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--en2-muted);
}
.entom-theme .en1x-pcr-head .en1x-pcr-cell { padding: 6px 8px; }
.entom-theme .en1x-pcr-idx {
    font-family: var(--en2-mono);
    font-size: .78rem;
    color: var(--en2-muted);
}
.entom-theme .en1x-pcr-input .mud-input-slot { font-family: var(--en2-mono); font-size: .86rem; padding-top: 4px; padding-bottom: 4px; }
/* Scrolls once the list runs long, so a big catch doesn't push the dissection fields (or the
   photos below) further down the page than the table itself needs to be. */
.entom-theme .en1x-pcr-scroll { max-height: 340px; overflow-y: auto; }

.entom-theme .en1x-sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.entom-theme .en1x-inline-add {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
/* SaveSession and AddLarva sit in separate .en1x-inline-add rows with very different label
   lengths ("บันทึกรอบการจ้วง" vs "เพิ่มชนิดลูกน้ำ") — pin a shared minimum width so both
   buttons read as the same size instead of shrink-wrapping to their own text. */
.entom-theme .en1x-inline-add .mud-button-root {
    min-width: 168px;
}

/* Collapsible mosquito panels (right detail) */
.entom-theme .en1-mosq-panels { background: transparent; }
.entom-theme .en1-mosq-panel {
    border: 1px solid var(--en2-line);
    border-left: 4px solid var(--en2-water);
    border-radius: 11px !important;
    overflow: hidden;
    margin-bottom: 10px;
}
.entom-theme .en1-mosq-panel.positive { border-left-color: #a8342f; }
.entom-theme .en1-mosq-title-name { font-weight: 600; }
.entom-theme .en1-mosq-count {
    font-family: var(--en2-mono);
    font-weight: 600;
    color: var(--en2-water);
}
.entom-theme .en1-positive-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 600;
    color: #fff;
    background: #a8342f;
    border-radius: 999px;
    padding: 2px 9px;
}

/* ============================================================================
   ENTOM alternative layout (AddEditEntomDialog2) — vector-control (ค.3) section.
   `entom2-` prefix so it cannot collide with the primary dialog's `entom-` styles,
   which it deliberately reuses for the shared blocks (banner, chips, GIS layout).
   ============================================================================ */

/* Location (left) and Survey-info (right) as two equal side-by-side panels */
.entom-theme .entom2-survey-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 960px) {
    /* Stack the two panels on narrow screens. */
    .entom-theme .entom2-survey-split { grid-template-columns: 1fr; }
}

/* Collapsible measures panel: clickable header + folded body */
.entom-theme .entom2-measures {
    border-radius: var(--en2-radius);
    overflow: hidden;
}
.entom-theme .entom2-measures-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, var(--en2-amber-tint), var(--en2-surface));
    transition: background .15s ease;
}
.entom-theme .entom2-measures-head:hover { background: var(--en2-amber-tint); }
.entom-theme .entom2-measures-count { height: 22px; }
.entom-theme .entom2-measures-body {
    padding: 16px;
    border-top: 1px solid var(--en2-line);
    /* Two columns: DOM order 1,2,3,4 flows to left=1,3 / right=2,4. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}
@media (max-width: 960px) {
    /* Stack to a single column on narrow screens. */
    .entom-theme .entom2-measures-body { grid-template-columns: 1fr; }
}

/* One card per measure — status header row, then a field grid */
.entom-theme .entom2-measure-card {
    border: 1px solid var(--en2-line);
    border-left: 4px solid var(--en2-amber);
    border-radius: 11px;
    padding: 12px 14px 14px;
    background: var(--en2-surface);
}
.entom-theme .entom2-measure-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--en2-line);
}
.entom-theme .entom2-measure-name {
    font-size: .86rem;
    font-weight: 700;
    color: var(--en2-pine);
}

/* Amber-tinted "if stopped spraying" fields, echoing the mockup's highlight */
.entom-theme .entom2-amber-field .mud-input-slot { background: var(--en2-amber-tint); }