/* ============================================================================
   Farm Manager design tokens + component classes.
   Single source of truth ported from the claude.ai/design Farm Map mock.
   Loaded after Bootstrap in base.html so it overrides where it touches.
   ============================================================================ */

:root {
    /* Colour palette */
    --fm-bg:              #EEF0EC;
    --fm-surface:         #FFFFFF;
    --fm-surface-soft:    #F7F8F5;
    --fm-surface-alt:     #FBFBF9;
    --fm-chrome-dark:     #16241D;
    --fm-chrome-dark-2:   #1B2D24;
    --fm-text:            #16191B;
    --fm-text-2:          #27302B;
    --fm-text-muted:      #6B726B;
    --fm-text-muted-2:    #8A938B;
    --fm-text-muted-3:    #9AA29A;
    --fm-text-mono-muted: #737A73;
    --fm-text-on-dark:    #EAF0EC;
    --fm-text-on-dark-2:  #D7E0DA;
    --fm-text-on-dark-mu: #8FA897;
    --fm-border:          #E0E3DE;
    --fm-border-2:        #E2E4DE;
    --fm-border-3:        #DCDFD8;
    --fm-border-4:        #DDE0DA;
    --fm-border-soft:     #ECEEE9;
    --fm-divider:         #EEF0EC;
    --fm-row-sel-bg:      #F2F6F1;
    --fm-pill-bg:         #F0F1ED;
    --fm-chrome-rule:     rgba(255,255,255,.12);
    --fm-chrome-fill:     rgba(255,255,255,.04);
    --fm-accent:          #2E6B4C;
    --fm-accent-strong:   #1F4F37;
    --fm-accent-mint:     #9FE0B8;
    --fm-accent-mint-2:   #CFE3D6;
    --fm-accent-pink:     #C8458C;
    --fm-accent-cyan:     #2E8C8C;
    --fm-accent-blue:     #3E6DB0;
    --fm-status-bad:      #C8453B;
    --fm-status-bad-bg:   #FBEAE8;
    --fm-status-warn:     #9A6A12;
    --fm-status-warn-bg:  #F6EEDC;
    --fm-status-good:     #34703F;
    --fm-status-good-bg:  #E7F0E7;

    /* Typography */
    --fm-font:      'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --fm-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --fm-fs-9:    9px;
    --fm-fs-10:   10px;
    --fm-fs-10-5: 10.5px;
    --fm-fs-11:   11px;
    --fm-fs-11-5: 11.5px;
    --fm-fs-12:   12px;
    --fm-fs-12-5: 12.5px;
    --fm-fs-13:   13px;
    --fm-fs-13-5: 13.5px;
    --fm-fs-14:   14px;
    --fm-fs-15:   15px;
    --fm-fs-16:   16px;
    --fm-fs-19:   19px;
    --fm-fs-24:   24px;

    /* Spacing */
    --fm-sp-3:  3px;
    --fm-sp-4:  4px;
    --fm-sp-6:  6px;
    --fm-sp-7:  7px;
    --fm-sp-8:  8px;
    --fm-sp-9:  9px;
    --fm-sp-10: 10px;
    --fm-sp-13: 13px;
    --fm-sp-14: 14px;
    --fm-sp-16: 16px;
    --fm-sp-18: 18px;

    /* Radii */
    --fm-r-7:  7px;
    --fm-r-8:  8px;
    --fm-r-9:  9px;
    --fm-r-10: 10px;
    --fm-r-11: 11px;
    --fm-r-12: 12px;
    --fm-r-13: 13px;
    --fm-r-pill: 50%;

    /* Heights */
    --fm-h-navbar: 52px;
    --fm-h-rail:   54px;
    --fm-h-btn:    36px;
    --fm-h-btn-sm: 32px;
    --fm-w-rightpanel: 384px;

    /* Shadows */
    --fm-shadow-btn:      0 1px 2px rgba(0,0,0,.18);
    --fm-shadow-card:     0 4px 14px rgba(0,0,0,.20);
    --fm-shadow-mob:      0 7px 20px rgba(0,0,0,.32), 0 1px 0 rgba(0,0,0,.05);
    --fm-shadow-dropdown: 0 14px 40px rgba(20,30,24,.16);
    --fm-shadow-soft:     0 2px 6px rgba(0,0,0,.08);
}

/* ============================================================================
   Base typography + body — applies app-wide via base.html
   ============================================================================ */
body.fm-skin,
body[data-fm-skin="on"] {
    background-color: var(--fm-bg);
    color: var(--fm-text);
    font-family: var(--fm-font);
    -webkit-font-smoothing: antialiased;
}

/* Make the existing navbar pick up the design's chrome-dark colour.
   The base.html navbar already has class .navbar — we override it here
   so every page inherits the new chrome without restructuring. */
body.fm-skin .navbar,
body[data-fm-skin="on"] .navbar {
    background-color: var(--fm-chrome-dark) !important;
    min-height: var(--fm-h-navbar);
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,.18);
}

body.fm-skin .navbar-brand,
body[data-fm-skin="on"] .navbar-brand {
    color: #F4F8F5 !important;
    font: 700 16px var(--fm-font);
    letter-spacing: -.2px;
}

body.fm-skin .navbar .nav-link,
body[data-fm-skin="on"] .navbar .nav-link {
    color: var(--fm-text-on-dark-2) !important;
    font: 600 13px var(--fm-font);
}

body.fm-skin .navbar .nav-link:hover,
body[data-fm-skin="on"] .navbar .nav-link:hover {
    color: #F4F8F5 !important;
}

/* Offcanvas side nav: keep the existing dark green header */
body.fm-skin #farm-nav-panel .offcanvas-header,
body[data-fm-skin="on"] #farm-nav-panel .offcanvas-header {
    background: var(--fm-chrome-dark) !important;
}
body.fm-skin #farm-nav-panel .nav-link.active,
body[data-fm-skin="on"] #farm-nav-panel .nav-link.active {
    background: var(--fm-chrome-dark) !important;
    color: #fff !important;
}
body.fm-skin #farm-nav-panel .nav-link i,
body[data-fm-skin="on"] #farm-nav-panel .nav-link i {
    color: var(--fm-chrome-dark);
}

/* Floating suggestion FAB picks up the new accent too. */
body.fm-skin #suggest-fab,
body[data-fm-skin="on"] #suggest-fab {
    background: var(--fm-chrome-dark);
}

/* ============================================================================
   Component classes — reusable across Farm Manager pages.
   ============================================================================ */

/* Cards (white surface w/ subtle border + small shadow) */
.fm-card {
    background: var(--fm-surface);
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-r-12);
    box-shadow: 0 1px 3px rgba(20,30,24,.04);
}

.fm-card-soft {
    background: var(--fm-surface-soft);
    border: 1px solid #EAECE6;
    border-radius: var(--fm-r-11);
    padding: var(--fm-sp-13) var(--fm-sp-14);
}

/* Buttons */
.fm-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--fm-sp-7);
    height: var(--fm-h-btn);
    padding: 0 var(--fm-sp-13);
    border: 1px solid var(--fm-border-4);
    border-radius: var(--fm-r-9);
    background: var(--fm-surface);
    color: var(--fm-text-2);
    font: 600 13px var(--fm-font);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.fm-btn:hover {
    border-color: #C9CEC4;
    color: var(--fm-text);
}
.fm-btn-sm { height: var(--fm-h-btn-sm); padding: 0 var(--fm-sp-10); font-size: 12.5px; }
.fm-btn-icon { width: var(--fm-h-btn); padding: 0; justify-content: center; }
.fm-btn-icon.fm-btn-sm { width: var(--fm-h-btn-sm); }

.fm-btn-dark {
    border-color: transparent;
    background: var(--fm-chrome-dark);
    color: #F4F8F5;
}
.fm-btn-dark:hover { background: var(--fm-chrome-dark-2); color: #fff; }

.fm-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--fm-text-2);
}
.fm-btn-ghost:hover { background: var(--fm-pill-bg); }

.fm-btn-primary {
    background: var(--fm-accent);
    border-color: var(--fm-accent);
    color: #fff;
    box-shadow: var(--fm-shadow-btn);
}
.fm-btn-primary:hover { background: var(--fm-accent-strong); border-color: var(--fm-accent-strong); color: #fff; }

/* Segmented mode-switcher pill */
.fm-segmented {
    display: inline-flex;
    background: var(--fm-pill-bg);
    border: 1px solid var(--fm-border-2);
    border-radius: var(--fm-r-10);
    padding: var(--fm-sp-3);
    gap: 2px;
}
.fm-segmented .fm-seg-btn {
    font: 600 13px var(--fm-font);
    padding: 7px 15px;
    border: none;
    border-radius: var(--fm-r-8);
    cursor: pointer;
    line-height: 1;
    background: transparent;
    color: #56615A;
    transition: background .12s, color .12s;
    text-decoration: none;
}
.fm-segmented .fm-seg-btn:hover { color: var(--fm-text); }
.fm-segmented .fm-seg-btn.is-active {
    background: var(--fm-accent);
    color: #fff;
    box-shadow: var(--fm-shadow-btn);
}
.fm-segmented.fm-segmented-sm .fm-seg-btn {
    padding: 6px 0;
    flex: 1;
    font: 600 11.5px var(--fm-font);
}

/* Pills (small status labels) */
.fm-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--fm-r-7);
    font: 600 11px var(--fm-font-mono);
    white-space: nowrap;
}
.fm-pill-good { background: var(--fm-status-good-bg); color: var(--fm-status-good); }
.fm-pill-warn { background: var(--fm-status-warn-bg); color: var(--fm-status-warn); }
.fm-pill-bad  { background: var(--fm-status-bad-bg);  color: var(--fm-status-bad);  }
.fm-pill-mute { background: var(--fm-pill-bg);        color: var(--fm-text-muted-2); }
.fm-pill-solid-bad  { background: var(--fm-status-bad);  color: #fff; }
.fm-pill-solid-warn { background: var(--fm-status-warn); color: #fff; }
.fm-pill-solid-good { background: var(--fm-status-good); color: #fff; }

/* Dropdown panel */
.fm-dropdown {
    position: absolute;
    background: var(--fm-surface);
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-r-12);
    box-shadow: var(--fm-shadow-dropdown);
    padding: var(--fm-sp-8);
    z-index: 50;
}
.fm-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--fm-sp-10);
    width: 100%;
    padding: var(--fm-sp-8);
    border: none;
    background: transparent;
    border-radius: var(--fm-r-8);
    cursor: pointer;
    text-align: left;
    font: 600 13.5px var(--fm-font);
    color: var(--fm-text-2);
}
.fm-dropdown-item:hover { background: var(--fm-surface-soft); }
.fm-dropdown-item .fm-check {
    width: 18px; height: 18px; flex: 0 0 auto;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font: 700 11px var(--fm-font);
    border: 1px solid #CFD3CB; background: #fff; color: transparent;
}
.fm-dropdown-item.is-on .fm-check {
    border-color: var(--fm-accent);
    background: var(--fm-accent);
    color: #fff;
}
.fm-dropdown-item .fm-count {
    font: 500 11px var(--fm-font-mono);
    color: var(--fm-text-muted-3);
    margin-left: auto;
}

/* Section labels (the "MAP LAYERS" header style) */
.fm-section-label {
    font: 700 10.5px var(--fm-font);
    letter-spacing: .7px;
    color: var(--fm-text-muted-3);
    text-transform: uppercase;
}

/* Dividers */
.fm-divider { height: 1px; background: var(--fm-divider); }

/* Stat mono helper */
.fm-stat-mono {
    font: 500 11.5px var(--fm-font-mono);
    color: var(--fm-text-mono-muted);
}
.fm-stat-mono-strong {
    font: 600 13px var(--fm-font-mono);
    color: var(--fm-text);
}

/* Mob card visual (used on-map + in right panel) */
.fm-mob-card {
    display: inline-flex;               /* shrink to content — no stretched card */
    align-items: center;
    gap: 6px;
    background: var(--fm-surface);
    border: 1px solid #E4E1D9;
    border-radius: 10px;
    padding: 4px 7px;                   /* tighter than the old 7px 9px */
    box-shadow: var(--fm-shadow-mob);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.fm-mob-card .fm-mob-bubble {
    width: 22px; height: 22px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.12);
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.fm-mob-card .fm-mob-bubble img {
    width: 15px; height: 15px;
    object-fit: contain;
    filter: drop-shadow(0 0 1px rgba(255,255,255,0.65));
}
.fm-mob-card .fm-mob-text { flex: 0 1 auto; min-width: 0; text-align: left; }
/* Name row = name on the left, days-left badge on the right (justify-content:
   space-between). Row width is set by the meta line below, so the badge's
   right edge auto-aligns with the meta's right edge. */
.fm-mob-card .fm-mob-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.fm-mob-card .fm-mob-name { font: 700 12px var(--fm-font); color: var(--fm-text); line-height: 1.1; }
.fm-mob-card .fm-mob-meta { display:block; font: 500 9.5px var(--fm-font-mono); color: var(--fm-text-muted); margin-top: 1px; white-space: nowrap; }
.fm-mob-card .fm-mob-days { flex: 0 0 auto; }

/* Alert border tint — matches classic .mob-icon.alert-* */
.fm-mob-card.alert-overdue { border-color: #C8453B; border-width: 2px; }
.fm-mob-card.alert-snoozed { border-color: #E0A93C; border-width: 2px; }
.fm-mob-card.alert-warning { border-color: #F2C84B; border-width: 2px; }

/* Days-left pill — sits in the same row as the mob name, pushed to the
   right via the name-row's justify-content: space-between. Its right edge
   auto-aligns with the meta line's right edge below. Rendered on the
   BOTTOM mob of a stack only (idx===0 in renderViewModeMobs). */
.fm-mob-card .fm-mob-daysleft {
    flex: 0 0 auto;
    font: 700 9.5px var(--fm-font-mono);
    color: #fff;
    background: #0F1612;
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    white-space: nowrap;
}
.fm-mob-card .fm-mob-daysleft.is-amber { background: #C4892C; }
.fm-mob-card .fm-mob-daysleft.is-overdue { background: #C8453B; }

/* Zoomed-out compact form (kicks in at map zoom <= 14 so co-located cards
   stop overlapping each other across nearby paddocks). */
.fm-mob-card.zoomed-out {
    padding: 3px 5px;
    gap: 4px;
    border-radius: 8px;
}
.fm-mob-card.zoomed-out .fm-mob-bubble { width: 16px; height: 16px; }
.fm-mob-card.zoomed-out .fm-mob-bubble img { width: 11px; height: 11px; }
.fm-mob-card.zoomed-out .fm-mob-name { font-size: 9.5px; }
.fm-mob-card.zoomed-out .fm-mob-meta { font-size: 8.5px; }
.fm-mob-card.zoomed-out .fm-mob-daysleft { font-size: 8px; padding: 0 4px; }

/* Shared "Nd left" pill below a stack of co-located mob cards. The
   marker centroid sits below the bottom card; we anchor the pill to
   the right edge of the card stack (translateX shifts the whole pill
   from its left-edge-at-centre default to right-edge-at-centre minus
   a small inset so it visually hangs off the card's right corner). */
.fm-shared-daysleft {
    display: inline-block;
    background: #0F1612; color: #fff;
    font: 700 11px var(--fm-font-mono);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    white-space: nowrap;
    transform: translate(calc(50% - 12px), 6px);
    pointer-events: none;
}
.fm-shared-daysleft.is-overdue { background: #C8453B; }
.fm-shared-daysleft.is-amber { background: #C4892C; }

/* Pulse the days pill when urgent (<= 7 days) */
@keyframes fm-urg-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .85; transform: scale(1.05); }
}
.fm-pill.is-urgent { animation: fm-urg-pulse 2.2s infinite; }

/* Right panel mob list row (in the 384px aside) */
.fm-mob-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 13px 18px 14px;
    border: none;
    border-bottom: 1px solid #EFF0ED;
    background: transparent;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    color: inherit;
}
.fm-mob-row:hover { background: var(--fm-surface-soft); }
.fm-mob-row.is-selected {
    background: var(--fm-row-sel-bg);
    box-shadow: inset 3px 0 0 var(--fm-accent);
}
.fm-mob-row .fm-mob-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
}
.fm-mob-row .fm-mob-text { flex: 1 1 auto; min-width: 0; }
.fm-mob-row .fm-mob-name { display:block; font: 600 14px var(--fm-font); color: var(--fm-text); }
.fm-mob-row .fm-mob-meta { display:block; font: 500 11.5px var(--fm-font-mono); color: var(--fm-text-mono-muted); margin-top: 1px; }
.fm-mob-row .fm-mob-days-big {
    text-align: right; flex: 0 0 auto;
}
.fm-mob-row .fm-mob-days-big .num {
    font: 600 19px var(--fm-font-mono); line-height: 1;
}
.fm-mob-row .fm-mob-days-big .unit {
    font: 500 11px var(--fm-font-mono);
}
.fm-mob-row .fm-mob-days-big .sub {
    display: block;
    font: 500 10px var(--fm-font);
    color: #A1A8A1;
    margin-top: 2px;
}
.fm-mob-row .fm-mob-bar {
    position: absolute; left: 0; bottom: 0; height: 3px; opacity: .85;
}

/* Chrome rail (the 54px white bar below the navbar) */
.fm-rail {
    flex: 0 0 auto;
    height: var(--fm-h-rail);
    background: var(--fm-surface);
    border-bottom: 1px solid var(--fm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--fm-sp-18);
    position: relative;
    z-index: 30;
}

/* Right panel (384px aside) */
.fm-rightpanel {
    width: var(--fm-w-rightpanel);
    flex: 0 0 var(--fm-w-rightpanel);
    background: var(--fm-surface);
    border-left: 1px solid var(--fm-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    z-index: 10;
}
@media (max-width: 991px) {
    .fm-rightpanel {
        width: 320px;
        flex-basis: 320px;
    }
}
@media (max-width: 767px) {
    .fm-rightpanel {
        position: absolute;
        right: 0; top: 0; bottom: 0;
        transform: translateX(100%);
        transition: transform .2s ease-out;
        z-index: 1000;
        box-shadow: -8px 0 22px rgba(0,0,0,.18);
    }
    .fm-rightpanel.is-open { transform: translateX(0); }
}

/* Map overlay UI (zoom buttons, mode chip, shade legend) */
.fm-zoom-stack {
    position: absolute; top: 14px; left: 14px;
    display: flex; flex-direction: column;
    background: var(--fm-surface);
    border: 1px solid var(--fm-border-3);
    border-radius: var(--fm-r-10);
    overflow: hidden;
    box-shadow: var(--fm-shadow-card);
    z-index: 600;
}
.fm-zoom-stack button {
    width: 34px; height: 34px;
    border: none; background: var(--fm-surface);
    font: 400 19px var(--fm-font);
    color: #3A443D;
    cursor: pointer;
}
.fm-zoom-stack button + button { border-top: 1px solid var(--fm-border-soft); }

.fm-mode-chip {
    position: absolute; left: 14px; bottom: 14px;
    display: flex; align-items: center; gap: 8px;
    background: rgba(22,36,29,.82);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--fm-r-9);
    padding: 7px 12px;
    z-index: 600;
    color: var(--fm-text-on-dark);
    font: 600 12px var(--fm-font);
}
.fm-mode-chip .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--fm-accent-mint);
}

.fm-shade-legend {
    position: absolute; right: 14px; bottom: 14px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--fm-border-3);
    border-radius: var(--fm-r-10);
    padding: 9px 12px;
    box-shadow: var(--fm-shadow-card);
    z-index: 600;
    max-width: 230px;
}
.fm-shade-legend .label {
    font: 700 9.5px var(--fm-font);
    letter-spacing: .6px;
    color: var(--fm-text-muted-2);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.fm-shade-legend .bar {
    width: 168px; height: 9px; border-radius: 3px;
    background: linear-gradient(90deg,#bda35e,#a6ab5c,#7fa356,#5a8c49,#2f6b35);
}
.fm-shade-legend .ticks {
    display: flex; justify-content: space-between;
    margin-top: 4px;
    font: 500 10px var(--fm-font-mono);
    color: var(--fm-text-muted);
}
.fm-shade-legend .row-sw {
    display: flex; align-items: center; gap: 6px;
    margin: 2px 0;
    font: 500 11px var(--fm-font);
    color: var(--fm-text-2);
}
.fm-shade-legend .row-sw .sw {
    display: inline-block; width: 14px; height: 10px;
    border: 1px solid #555; flex-shrink: 0;
}
.fm-shade-legend .row-sw .sw.outline { background: transparent; }
.fm-shade-legend .note {
    font: 400 10px var(--fm-font);
    color: var(--fm-text-muted-2);
    margin-top: 4px;
}

/* Topo legend (bottom-left) — sibling of fm-shade-legend */
.fm-topo-legend {
    position: absolute; left: 14px; bottom: 14px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--fm-border-3);
    border-radius: var(--fm-r-10);
    padding: 9px 12px;
    box-shadow: var(--fm-shadow-card);
    z-index: 600;
}
.fm-topo-legend .label {
    font: 700 9.5px var(--fm-font);
    letter-spacing: .6px;
    color: var(--fm-text-muted-2);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.fm-topo-legend .row-sw {
    display: flex; align-items: center; gap: 6px;
    margin: 2px 0;
    font: 500 11px var(--fm-font);
    color: var(--fm-text-2);
}
.fm-topo-legend .row-sw .sw {
    display: inline-block; width: 14px; height: 10px;
    border: 1px solid #555; flex-shrink: 0;
}
.fm-topo-legend .note {
    font: 400 10px var(--fm-font);
    color: var(--fm-text-muted-2);
    margin-top: 4px;
}

/* Shade-by sub-selector — sits next to the mode segmented control */
.fm-shade-by-select {
    appearance: none;
    -webkit-appearance: none;
    font: 600 12.5px var(--fm-font);
    color: var(--fm-text-2);
    background: var(--fm-pill-bg);
    border: 1px solid var(--fm-border-2);
    border-radius: var(--fm-r-8);
    padding: 6px 28px 6px 12px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2346514B' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.fm-shade-by-select:hover { background-color: #E6E8E2; }
.fm-shade-by-wrap {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 10px;
}
.fm-shade-by-wrap .lbl {
    font: 600 11px var(--fm-font);
    color: var(--fm-text-muted-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Centroid value markers (per-paddock DM / SMI / nutrient letter — shade mode) */
.fm-paddock-value {
    color: #fff; font-weight: 700; white-space: nowrap;
    text-shadow: 0 0 3px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.95);
    transform: translateX(-50%);
    text-align: center; pointer-events: none;
    font: 700 14px var(--fm-font);
}
.fm-paddock-value .date {
    display: block; font-size: 9px; font-weight: 500;
    opacity: 0.85; margin-top: 1px;
}
.leaflet-div-icon.fm-value-divicon {
    background: none; border: none; padding: 0;
}

/* Leaflet paddock divIcon label — used for label markers */
.fm-paddock-label {
    text-align: center;
    pointer-events: none;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.fm-paddock-label .name {
    font: 600 12.5px var(--fm-font);
    letter-spacing: .1px;
}
.fm-paddock-label .dm-row {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 2px;
}
.fm-paddock-label .dm-row .swatch {
    width: 7px; height: 7px; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.fm-paddock-label .dm-row .dm {
    font: 500 11px var(--fm-font-mono);
    color: rgba(255,255,255,.94);
    text-shadow: 0 1px 2px rgba(0,0,0,.85);
}

/* Layout shell — used by the farm map page */
.fm-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--fm-bg);
    color: var(--fm-text);
}
.fm-shell .fm-shell-main {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    position: relative;
}
.fm-shell .fm-map-section {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.fm-shell .fm-map-section #farm-map {
    position: absolute; inset: 0;
    height: 100% !important;
    width: 100%;
    border-radius: 0;
}

/* Hide Leaflet's default zoom — we ship our own. */
.fm-shell .leaflet-control-zoom { display: none; }
.fm-shell .leaflet-control-attribution {
    background: rgba(255,255,255,.85);
    font: 500 10px var(--fm-font-mono);
    color: var(--fm-text-mono-muted);
}

/* When the v2 skin is active inside the map page, suppress the
   container.mt-4 that base.html adds (we own the layout). */
body.fm-shell-host .container { padding: 0; margin: 0 !important; max-width: 100%; }
body.fm-shell-host { overflow: hidden; }
body.fm-shell-host footer { display: none; }
body.fm-shell-host nav.navbar { display: none; }  /* v2 ships its own navbar inside .fm-shell */

/* Right panel scroll region */
.fm-rightpanel .fm-rp-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
.fm-rightpanel .fm-rp-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--fm-border);
    background: var(--fm-surface-alt);
    display: flex;
}
.fm-rightpanel .fm-rp-foot .fm-chip {
    flex: 1;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.fm-rightpanel .fm-rp-foot .fm-chip:hover { background: var(--fm-row-sel-bg); }
.fm-rightpanel .fm-rp-foot .fm-chip-sep {
    width: 1px; background: #E6E8E3;
}
.fm-rightpanel .fm-rp-foot .fm-chip .lbl {
    font: 600 12.5px var(--fm-font); color: var(--fm-text-2);
    display: block;
}
.fm-rightpanel .fm-rp-foot .fm-chip .sub {
    font: 500 10.5px var(--fm-font-mono); color: var(--fm-text-muted-2);
    display: block; margin-top: 1px;
}

/* Suggested next move card (dark surface inside white panel) */
.fm-suggest-card {
    margin-top: 14px;
    background: var(--fm-chrome-dark);
    border-radius: var(--fm-r-12);
    padding: 13px 14px;
    color: var(--fm-text-on-dark-2);
}
.fm-suggest-card .label {
    font: 600 10.5px var(--fm-font);
    letter-spacing: .5px;
    color: var(--fm-text-on-dark-mu);
    text-transform: uppercase;
}
.fm-suggest-card .row {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    font: 500 13px var(--fm-font);
}
.fm-suggest-card .row .target {
    font: 700 14px var(--fm-font); color: #F4F8F5;
}
.fm-suggest-card .row .dm {
    font: 500 11px var(--fm-font-mono); color: var(--fm-text-on-dark-mu);
}
.fm-suggest-card .actions {
    display: flex; gap: 8px; margin-top: 12px;
}
.fm-suggest-card .actions .fm-btn-light {
    flex: 1 1 auto;
    height: 36px; border-radius: 9px; border: none;
    background: #fff; color: var(--fm-chrome-dark);
    font: 700 13px var(--fm-font); cursor: pointer;
}
.fm-suggest-card .actions .fm-btn-outline-dark {
    flex: 0 0 auto;
    height: 36px; padding: 0 14px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    color: var(--fm-text-on-dark-2);
    font: 600 13px var(--fm-font); cursor: pointer;
}

/* ----------------------------------------------------------------------------
   Rotation mode helpers (used by map.html when MODE === 'rotation').
   Pulse animation on the mob's current paddock so it stands out as the origin.
   ---------------------------------------------------------------------------- */
@keyframes pulse-fill {
    0%   { fill-opacity: 0.20; }
    50%  { fill-opacity: 0.55; }
    100% { fill-opacity: 0.20; }
}
.fm-rotation-origin-pulse {
    animation: pulse-fill 2s ease-in-out infinite;
}

/* ----------------------------------------------------------------------------
   Light-touch: apply tokens to existing Bootstrap card / btn elements when the
   .fm-skin class is on body, without redesigning their internals. Other pages
   inherit body bg + font; cards keep their own structure.
   ---------------------------------------------------------------------------- */
body.fm-skin .card,
body[data-fm-skin="on"] .card {
    border-color: var(--fm-border);
    border-radius: var(--fm-r-12);
    box-shadow: 0 1px 3px rgba(20,30,24,.04);
}
body.fm-skin .card-header {
    background: var(--fm-surface-alt);
    border-bottom: 1px solid var(--fm-divider);
    font: 700 13px var(--fm-font);
    color: var(--fm-text);
    padding: 10px 14px;
}
body.fm-skin .card-body { padding: 14px 16px; }

/* Bootstrap form controls — pick up tokens */
body.fm-skin .form-label { font: 600 12px var(--fm-font); color: var(--fm-text-2); }
body.fm-skin .form-text { font: 500 11px var(--fm-font); color: var(--fm-text-muted); }
body.fm-skin .form-select,
body.fm-skin .form-control {
    font-family: var(--fm-font);
    color: var(--fm-text-2);
    border-color: var(--fm-border);
    border-radius: var(--fm-r-9);
}
body.fm-skin .form-select:focus,
body.fm-skin .form-control:focus {
    border-color: var(--fm-accent);
    box-shadow: 0 0 0 3px rgba(46,107,76,.12);
}
body.fm-skin .form-check-input:checked {
    background-color: var(--fm-accent);
    border-color: var(--fm-accent);
}
body.fm-skin .form-check-input:focus {
    border-color: var(--fm-accent);
    box-shadow: 0 0 0 3px rgba(46,107,76,.12);
}

/* Bootstrap btn classes — map to design palette where possible */
body.fm-skin .btn-primary {
    background-color: var(--fm-chrome-dark);
    border-color: var(--fm-chrome-dark);
}
body.fm-skin .btn-primary:hover,
body.fm-skin .btn-primary:focus {
    background-color: var(--fm-chrome-dark-2);
    border-color: var(--fm-chrome-dark-2);
}
body.fm-skin .btn-success {
    background-color: var(--fm-accent);
    border-color: var(--fm-accent);
}
body.fm-skin .btn-success:hover,
body.fm-skin .btn-success:focus {
    background-color: var(--fm-accent-strong);
    border-color: var(--fm-accent-strong);
}
body.fm-skin .btn-outline-secondary {
    color: var(--fm-text-2);
    border-color: var(--fm-border-4);
    background: var(--fm-surface);
}
body.fm-skin .btn-outline-secondary:hover {
    background: var(--fm-pill-bg);
    color: var(--fm-text);
    border-color: #C9CEC4;
}
body.fm-skin .btn-outline-primary {
    color: var(--fm-accent);
    border-color: var(--fm-accent);
    background: var(--fm-surface);
}
body.fm-skin .btn-outline-primary:hover {
    background: var(--fm-accent);
    border-color: var(--fm-accent);
    color: #fff;
}
body.fm-skin .btn-outline-success {
    color: var(--fm-status-good);
    border-color: var(--fm-status-good);
    background: var(--fm-surface);
}
body.fm-skin .btn-outline-success:hover {
    background: var(--fm-status-good);
    border-color: var(--fm-status-good);
    color: #fff;
}
body.fm-skin .btn-outline-danger {
    color: var(--fm-status-bad);
    border-color: var(--fm-status-bad);
    background: var(--fm-surface);
}
body.fm-skin .btn-outline-danger:hover {
    background: var(--fm-status-bad);
    border-color: var(--fm-status-bad);
    color: #fff;
}
body.fm-skin .btn-warning {
    background-color: var(--fm-status-warn);
    border-color: var(--fm-status-warn);
    color: #fff;
}
body.fm-skin .btn-warning:hover {
    background-color: #804f0c;
    border-color: #804f0c;
    color: #fff;
}
body.fm-skin .btn {
    font-family: var(--fm-font);
    font-weight: 600;
    border-radius: var(--fm-r-9);
}
body.fm-skin .btn-sm { font-size: 12.5px; }

/* Bootstrap tables — typography */
body.fm-skin .table {
    color: var(--fm-text-2);
    font: 500 13px var(--fm-font);
}
body.fm-skin .table thead th {
    font: 700 10.5px var(--fm-font);
    text-transform: uppercase;
    color: var(--fm-text-muted-3);
    letter-spacing: .7px;
    border-bottom: 1px solid var(--fm-divider);
    background: var(--fm-surface-alt);
}
body.fm-skin .table td {
    border-bottom-color: var(--fm-divider);
}

/* Bootstrap badges — soften */
body.fm-skin .badge.bg-light {
    background-color: var(--fm-pill-bg) !important;
    color: var(--fm-text-muted) !important;
    font-family: var(--fm-font-mono);
    font-weight: 600;
}
body.fm-skin .badge.bg-secondary {
    background-color: var(--fm-text-muted-2) !important;
    font-family: var(--fm-font-mono);
}
body.fm-skin .badge.bg-success { background-color: var(--fm-status-good) !important; font-family: var(--fm-font-mono); }
body.fm-skin .badge.bg-danger  { background-color: var(--fm-status-bad)  !important; font-family: var(--fm-font-mono); }
body.fm-skin .badge.bg-warning { background-color: var(--fm-status-warn) !important; font-family: var(--fm-font-mono); }
body.fm-skin .badge.bg-info    { background-color: var(--fm-accent-cyan) !important; color: #fff !important; font-family: var(--fm-font-mono); }

/* Bootstrap alerts — soften */
body.fm-skin .alert {
    border-radius: var(--fm-r-9);
    font: 500 13px var(--fm-font);
}
body.fm-skin .alert-success {
    background: var(--fm-status-good-bg);
    color: var(--fm-status-good);
    border-color: transparent;
}
body.fm-skin .alert-danger {
    background: var(--fm-status-bad-bg);
    color: var(--fm-status-bad);
    border-color: transparent;
}
body.fm-skin .alert-warning {
    background: var(--fm-status-warn-bg);
    color: var(--fm-status-warn);
    border-color: transparent;
}
body.fm-skin .alert-light {
    background: var(--fm-surface-soft);
    color: var(--fm-text-2);
    border-color: var(--fm-border);
}

/* Bootstrap modal — softer chrome */
body.fm-skin .modal-content {
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-r-12);
}
body.fm-skin .modal-header {
    border-bottom: 1px solid var(--fm-divider);
}
body.fm-skin .modal-footer {
    border-top: 1px solid var(--fm-divider);
}
body.fm-skin .modal-title {
    font: 700 15px var(--fm-font);
}

/* Progress bars */
body.fm-skin .progress {
    background: var(--fm-pill-bg);
    border-radius: 4px;
}
body.fm-skin .progress-bar.bg-success { background-color: var(--fm-accent) !important; }
body.fm-skin .progress-bar.bg-warning { background-color: var(--fm-status-warn) !important; }
body.fm-skin .progress-bar.bg-danger  { background-color: var(--fm-status-bad)  !important; }