.group-hover {
    filter: brightness(1.4);
}

.group-leave {
    filter: brightness(0.8);
}

.GrazingPlanContainer{
    width:100%;
}
.table-container {
    /*width: 80vw;*/
    display: flex;
    margin: 0 auto;
}

.fixed-table-container {
    flex: 0 0 auto;
    overflow: hidden; /* No scrolling for fixed table */
}

.scrollable-table-container {
    flex: 1 1 auto;
    overflow-x: auto; /* Scrollable table scrolls horizontally */
}

.fixed-table, .scrollable-table {
    border-collapse: collapse;
    table-layout: fixed;
}

    .fixed-table th, .fixed-table td,
    .scrollable-table th, .scrollable-table td {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        border: 1px solid #ddd; /* Default border for all cells */
    }

    .fixed-table tbody tr.row-hover td {
        background-color: #e3eafc !important;
        box-shadow: 0 2px 8px 0 rgba(25, 118, 210, 0.08);
        transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fixed-table th, .fixed-table td {
        background: #fff; /* For td */
    }

        .fixed-table th.fixed {
            background-color: #963634;
            color: white;
            border-color: #963634;
        }

        .fixed-table th.left-header-bottom-row {
            white-space: normal;
            word-break: break-word;
            overflow-wrap: break-word;
            min-height: 48px;
            vertical-align: middle;
        }

    /* Border styles */
    .fixed-table .bold_border-all {
        border: 2px solid black !important;
    }

    .fixed-table .bold_border-left {
        border-left: 2px solid black !important;
    }

    .fixed-table .bold_border-right {
        border-right: 2px solid black !important;
    }

    .fixed-table .bold_border-bottom {
        border-bottom: 2px solid black !important;
    }

    /* Row styling */
    .fixed-table tr.odd,
    .scrollable-table tr.odd {
        background-color: #f2f2f2;
    }

    .scrollable-table tbody tr.row-hover {
        background-color: #e3eafc !important;
        box-shadow: 0 2px 8px 0 rgba(25, 118, 210, 0.08);
        transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Fixed table column widths */
    .fixed-table th:nth-child(1), .fixed-table td:nth-child(1) {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
    }

    .fixed-table th:nth-child(2), .fixed-table td:nth-child(2) {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
    }

    .fixed-table th:nth-child(3), .fixed-table td:nth-child(3) {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
    }

    .fixed-table th:nth-child(4), .fixed-table td:nth-child(4) {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
    }

    .fixed-table th:nth-child(5), .fixed-table td:nth-child(5) {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
    }

    /* Scrollable table day columns */
    .scrollable-table td.day,
    .scrollable-table td.first_day {
        width: 45px;
        min-width: 45px;
        max-width: 45px;
        height:45px;
        min-height:45px;
        max-height:45px;
        cursor: pointer;
        position: relative;
    }
        /* Style planned herd moves */
        .scrollable-table td.day[data-planned-herd-count="0"],
        .scrollable-table td.first_day[data-planned-herd-count="0"] {
            background: transparent;
        }

        .scrollable-table td.day[data-planned-herd-count="1"],
        .scrollable-table td.first_day[data-planned-herd-count="1"] {
            background: var(--herdA);
        }

        .scrollable-table td.day[data-planned-herd-count="2"],
        .scrollable-table td.first_day[data-planned-herd-count="2"] {
            background: linear-gradient(135deg, var(--herdA) 0 50%, var(--herdB) 50% 100%);
        }

        /* Warning state for 3+ herds (indicates a bug) */
        .scrollable-table td.day[data-planned-herd-count="3"],
        .scrollable-table td.first_day[data-planned-herd-count="3"],
        .scrollable-table td.day[data-planned-herd-count]:not([data-planned-herd-count="0"]):not([data-planned-herd-count="1"]):not([data-planned-herd-count="2"]),
        .scrollable-table td.first_day[data-planned-herd-count]:not([data-planned-herd-count="0"]):not([data-planned-herd-count="1"]):not([data-planned-herd-count="2"]) {
            background: repeating-linear-gradient( 45deg, #dc3545, #dc3545 5px, #fff 5px, #fff 10px );
            border: 2px solid #dc3545 !important;
            animation: warningPulse 1.5s ease-in-out infinite;
        }

            /* Warning badge for 3+ herds */
            .scrollable-table td.day[data-planned-herd-count="3"]::before,
            .scrollable-table td.first_day[data-planned-herd-count="3"]::before,
            .scrollable-table td.day[data-planned-herd-count]:not([data-planned-herd-count="0"]):not([data-planned-herd-count="1"]):not([data-planned-herd-count="2"])::before,
            .scrollable-table td.first_day[data-planned-herd-count]:not([data-planned-herd-count="0"]):not([data-planned-herd-count="1"]):not([data-planned-herd-count="2"])::before {
                content: "!";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 28px;
                font-weight: 900;
                color: #fff;
                background: #dc3545;
                border-radius: 50%;
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                z-index: 4;
                pointer-events: none;
                box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
            }

            @@keyframes warningPulse {
                0%, 100% {
                    opacity: 1;
                }

                50% {
                    opacity: 0.85;
                }
            }

    /* Actual overlays: single X or corner X's. Place after prior actual rules. */
    .scrollable-table td[data-actual-herd-count] {
        position: relative;
    }

    /* One actual herd: centered X with your original styling */
    .scrollable-table td[data-actual-herd-count="1"]::after {
        content: "X";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        font-weight: bolder;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: rgba(0, 0, 0, 0.5);
        -webkit-text-fill-color: var(--actualA);
        color: var(--actualA); /* fallback */
        line-height: 1;
        z-index: 3;
        pointer-events: none;
        /* override any previous shape styles */
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        width: auto;
        height: auto;
    }

    /* Two actual herds: upper-left X = A, lower-right X = B */
    .scrollable-table td[data-actual-herd-count="2"]::before,
    .scrollable-table td[data-actual-herd-count="2"]::after {
        content: "X";
        position: absolute;
        font-size: 25px;
        font-weight: bolder;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: rgba(0, 0, 0, 0.5);
        line-height: 1;
        z-index: 3;
        pointer-events: none;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Upper-left X = first actual herd (A) */
    .scrollable-table td[data-actual-herd-count="2"]::before {
        top: 2px;
        left: 3px;
        -webkit-text-fill-color: var(--actualA);
        color: var(--actualA);
    }

    /* Lower-right X = second actual herd (B) */
    .scrollable-table td[data-actual-herd-count="2"]::after {
        right: 3px;
        bottom: 2px;
        -webkit-text-fill-color: var(--actualB);
        color: var(--actualB);
    }

    /* ============================================
       Departure Conflict — Herd Absent
       Amber hazard stripes on chart cells where an
       actual move exists but the herd is off the ranch.
       Applied via .has-departure-conflict class from
       _GrazingPlan_TableScrollable.cshtml.
       ============================================ */
    .scrollable-table td.has-departure-conflict {
        background: repeating-linear-gradient(
            -45deg,
            rgba(217, 119, 6, 0.25),
            rgba(217, 119, 6, 0.25) 4px,
            transparent 4px,
            transparent 8px
        ) !important;
        border: 2px solid #d97706 !important;
        box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.3);
    }

    /* Hover: intensify the stripes for visibility */
    .scrollable-table td.has-departure-conflict:hover {
        background: repeating-linear-gradient(
            -45deg,
            rgba(217, 119, 6, 0.4),
            rgba(217, 119, 6, 0.4) 4px,
            transparent 4px,
            transparent 8px
        ) !important;
        border-color: #b45309 !important;
    }

    /* ============================================
       #OverlayToggle — Mode visibility
       The chart always emits BOTH planned and actual data. Visibility of each
       layer is driven by the wrapper's data-show-planned / data-show-actual
       attributes, set by GrazingPlan.ui.js from mode + localStorage overlay
       preference. When the user toggles overlay off, the off-mode layer is
       hidden via the rules below.
       ============================================ */

    /* show-planned=false: suppress planned cell backgrounds (1, 2, and 3+ herds)
       and any animation/shadow that came with them. Border is handled separately
       below for the 3+ warning state — count=1/2 cells use the default cell
       border so no border reset is needed for them. */
    .grazing_plan_component[data-show-planned="false"] .scrollable-table td.day[data-planned-herd-count]:not([data-planned-herd-count="0"]),
    .grazing_plan_component[data-show-planned="false"] .scrollable-table td.first_day[data-planned-herd-count]:not([data-planned-herd-count="0"]) {
        background: transparent !important;
        animation: none !important;
        box-shadow: none !important;
    }

    /* show-planned=false: undo the 3+ herd warning state's 2px red border so
       hidden warning cells visually match a normal day cell. The fill rule at
       line ~160 sets `border: 2px solid #dc3545 !important`; that !important
       must be matched here. Top/left/bottom restore the default 1px #ddd grid
       border. border-right is intentionally left alone so the weekly-boundary
       2px darkgray inline separator (every 7th day-of-month) still shows. */
    .grazing_plan_component[data-show-planned="false"] .scrollable-table td.day[data-planned-herd-count]:not([data-planned-herd-count="0"]):not([data-planned-herd-count="1"]):not([data-planned-herd-count="2"]),
    .grazing_plan_component[data-show-planned="false"] .scrollable-table td.first_day[data-planned-herd-count]:not([data-planned-herd-count="0"]):not([data-planned-herd-count="1"]):not([data-planned-herd-count="2"]) {
        border-top: 1px solid #ddd !important;
        border-left: 1px solid #ddd !important;
        border-bottom: 1px solid #ddd !important;
        border-right: 1px solid #ddd !important;
    }

    /* show-planned=false: hide the 3+ herds warning badge (planned-only pseudo) */
    .grazing_plan_component[data-show-planned="false"] .scrollable-table td[data-planned-herd-count]:not([data-planned-herd-count="0"]):not([data-planned-herd-count="1"]):not([data-planned-herd-count="2"])::before {
        content: none !important;
    }

    /* show-actual=false: suppress the actual X overlays (count=1 and count=2) */
    .grazing_plan_component[data-show-actual="false"] .scrollable-table td[data-actual-herd-count="1"]::after,
    .grazing_plan_component[data-show-actual="false"] .scrollable-table td[data-actual-herd-count="2"]::before,
    .grazing_plan_component[data-show-actual="false"] .scrollable-table td[data-actual-herd-count="2"]::after {
        content: none !important;
    }

    /* show-actual=false: neutralize the conflict stripe overlay. Any planned
       background underneath must be re-declared here so it wins against the
       transparent override; otherwise cells would lose their planned fill too. */
    .grazing_plan_component[data-show-actual="false"] .scrollable-table td.has-departure-conflict {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .grazing_plan_component[data-show-actual="false"] .scrollable-table td.has-departure-conflict[data-planned-herd-count="1"] {
        background: var(--herdA) !important;
    }
    .grazing_plan_component[data-show-actual="false"] .scrollable-table td.has-departure-conflict[data-planned-herd-count="2"] {
        background: linear-gradient(135deg, var(--herdA) 0 50%, var(--herdB) 50% 100%) !important;
    }
    /* Also neutralize the conflict hover-brighten rule so users don't see stripes
       reappear on hover when the overlay is off. */
    .grazing_plan_component[data-show-actual="false"] .scrollable-table td.has-departure-conflict:hover {
        background: transparent !important;
        border-color: inherit !important;
    }
    .grazing_plan_component[data-show-actual="false"] .scrollable-table td.has-departure-conflict[data-planned-herd-count="1"]:hover {
        background: var(--herdA) !important;
    }
    .grazing_plan_component[data-show-actual="false"] .scrollable-table td.has-departure-conflict[data-planned-herd-count="2"]:hover {
        background: linear-gradient(135deg, var(--herdA) 0 50%, var(--herdB) 50% 100%) !important;
    }

    /* Legend conflict entries are emitted in pairs; show exactly one at a time
       based on whether the actual layer is currently visible. The companion
       template in _GrazingPlan_Legend.cshtml emits both list items when
       hasAnyConflicts is true; without these rules both would render. */
    .grazing_plan_component[data-show-actual="true"] .gp-legend__item--conflict-hidden,
    .grazing_plan_component[data-show-actual="false"] .gp-legend__item--conflict-shown {
        display: none !important;
    }

    .scrollable-table td.selected-start {
        border-left: 2px solid #1976d2 !important; /* Elegant blue border */
        border-top: 2px solid #1976d2 !important; /* Elegant blue border */
        border-bottom: 2px solid #1976d2 !important; /* Elegant blue border */
        background-color: #e3f2fd !important; /* Soft blue background */
        box-shadow: 0 0 6px 0 #1976d255; /* Subtle glow */
        color: #0d3056; /* Deep blue text */
        transition: background 0.2s, border 0.2s, box-shadow 0.2s;
    }

    .scrollable-table td.selected-mid {
        border-top: 2px solid #1976d2 !important; /* Elegant blue border */
        border-bottom: 2px solid #1976d2 !important; /* Elegant blue border */
        background-color: #e3f2fd !important; /* Soft blue background */
        box-shadow: 0 0 6px 0 #1976d255; /* Subtle glow */
        color: #0d3056; /* Deep blue text */
        transition: background 0.2s, border 0.2s, box-shadow 0.2s;
    }

    .scrollable-table td.selected-end {
        border-right: 2px solid #1976d2 !important; /* Elegant blue border */
        border-right: 2px solid #1976d2 !important; /* Elegant blue border */
        border-top: 2px solid #1976d2 !important; /* Elegant blue border */
        border-bottom: 2px solid #1976d2 !important; /* Elegant blue border */
        background-color: #e3f2fd !important; /* Soft blue background */
        box-shadow: 0 0 6px 0 #1976d255; /* Subtle glow */
        color: #0d3056; /* Deep blue text */
        transition: background 0.2s, border 0.2s, box-shadow 0.2s;
    }

    .scrollable-table td.first_day {
        /*width: 35px;
        min-width: 35px;
        max-width: 35px;*/
        border-left: 2px solid #000; /* Default border for all cells */
    }

        .scrollable-table td.first_day:first-child {
            border-left: 0; /* Remove left border for the first cell */
        }

    /* Month headers */
    .scrollable-table th.month-header {
        background: #f0f0f0;
        font-weight: bold;
        text-align: center;
    }

    /* Ensure headers stay above body */
    .fixed-table th, .scrollable-table th {
        background: #f8f8f8;
    }

.btn-group-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/*
    Grazing Plan Legend
*/
.gp-legend {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    color: #111827; /* gray-900 */
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.gp-legend__title {
    font-weight: 600;
    font-size: .95rem;
    color: #374151; /* gray-700 */
    letter-spacing: .2px;
}

.gp-legend__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gp-legend__item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .55rem;
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .2s ease, transform .02s ease;
}

    .gp-legend__item:hover {
        box-shadow: 0 2px 6px rgba(0,0,0,.08);
    }

.gp-legend__swatch {
    --swatch-color: #9CA3AF;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: var(--swatch-color);
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
    flex: 0 0 auto;
}

.gp-legend__label {
    font-size: .9rem;
    color: #111827; /* gray-900 */
    white-space: nowrap;
}

.gp-legend--empty {
    padding: .5rem 0;
    color: #6B7280; /* gray-500 */
    font-size: .9rem;
}

/* In Razor, escape CSS at-rules with @@ (e.g., @@media, @@keyframes, @@supports) */
@@media (prefers-color-scheme: dark) {
    .gp-legend__title {
        color: #d1d5db;
    }

    .gp-legend__item {
        background: #111827;
        border-color: #374151;
    }

    .gp-legend__label {
        color: #e5e7eb;
    }

    .gp-legend--empty {
        color: #9CA3AF;
    }
}

/* ============================================
   Legend — Conflict Swatch (Herd Absent)
   Amber hazard stripes matching the chart cells.
   ============================================ */

.gp-legend__swatch.gp-legend__swatch--conflict {
    background: repeating-linear-gradient( -45deg, rgba(217, 119, 6, 0.35), rgba(217, 119, 6, 0.35) 2px, #fff 2px, #fff 4px );
    border: 1.5px solid #d97706;
}

/* ============================================
   Legend — Transferred / Exited Herd Styling
   Both --transferred and --exited share the
   same visual treatment (dashed border, faded).
   ============================================ */

.gp-legend__item.gp-legend__item--exited,
.gp-legend__item.gp-legend__item--transferred {
    opacity: 0.65;
    background: #f9fafb;
    border-style: dashed;
    border-color: #d1d5db;
}

    /* Slightly faded swatch */
    .gp-legend__item.gp-legend__item--exited .gp-legend__swatch,
    .gp-legend__item.gp-legend__item--transferred .gp-legend__swatch {
        opacity: 0.7;
    }

    /* Muted label color - no strikethrough */
    .gp-legend__item.gp-legend__item--exited .gp-legend__label,
    .gp-legend__item.gp-legend__item--transferred .gp-legend__label {
        color: #9ca3af;
        font-style: italic;
    }

/* Exit / Transfer badge - small, subtle arrow */
.gp-legend__exit-badge,
.gp-legend__transfer-badge {
    font-size: 11px;
    color: #9ca3af;
    margin-left: 2px;
    line-height: 1;
}

/* Hover effect - restore full visibility for inspection */
.gp-legend__item.gp-legend__item--exited:hover,
.gp-legend__item.gp-legend__item--transferred:hover {
    opacity: 1;
    background: #ffffff;
    border-color: #e5e7eb;
    border-style: solid;
}

    .gp-legend__item.gp-legend__item--exited:hover .gp-legend__label,
    .gp-legend__item.gp-legend__item--transferred:hover .gp-legend__label {
        color: #6b7280;
    }

    .gp-legend__item.gp-legend__item--exited:hover .gp-legend__swatch,
    .gp-legend__item.gp-legend__item--transferred:hover .gp-legend__swatch {
        opacity: 1;
    }

    .gp-legend__item.gp-legend__item--exited:hover .gp-legend__exit-badge,
    .gp-legend__item.gp-legend__item--transferred:hover .gp-legend__transfer-badge {
        color: #6b7280;
    }

/* Tinted backgrounds + left accent (kept) */
:root {
    --gm-insert-rgb: 25,135,84; /* success */
    --gm-edit-rgb: 13,110,253; /* primary */
    --gm-conflict-rgb: 217,119,6; /* amber-600 for conflict rows */
}

#grazingmove-grid tbody tr.gm-row,
#grazingmove-planned-grid tbody tr.gm-row {
    position: relative;
    transition: background-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

#grazingmove-grid tbody tr.gm-inserted,
#grazingmove-planned-grid tbody tr.gm-inserted {
    background-image: linear-gradient(90deg, rgba(var(--gm-insert-rgb), .18) 0%, rgba(var(--gm-insert-rgb), .08) 55%, transparent 100%);
    box-shadow: inset 0 0 0 1px rgba(var(--gm-insert-rgb), .22), inset 5px 0 0 rgba(var(--gm-insert-rgb), 1);
}

#grazingmove-grid tbody tr.gm-edited,
#grazingmove-planned-grid tbody tr.gm-edited {
    background-image: linear-gradient(90deg, rgba(var(--gm-edit-rgb), .18) 0%, rgba(var(--gm-edit-rgb), .08) 55%, transparent 100%);
    box-shadow: inset 0 0 0 1px rgba(var(--gm-edit-rgb), .22), inset 5px 0 0 rgba(var(--gm-edit-rgb), 1);
}

/* ============================================
   Grid Row — Conflict (Herd Absent)
   Applied to actual move rows in the grid table
   when the move overlaps a herd absence period.
   Uses .gm-conflict class set by Default.cshtml.

   Velonic/Bootstrap uses a giant inset box-shadow
   on every <td> to paint the striped background:
     box-shadow: inset 0 0 0 9999px var(--tz-table-bg-type)
   We must neutralize that shadow so the <tr>
   gradient can show through.
   ============================================ */
#grazingmove-grid tbody tr.gm-conflict {
    position: relative;
    background-image: linear-gradient(90deg, rgba(var(--gm-conflict-rgb), .18) 0%, rgba(var(--gm-conflict-rgb), .08) 55%, transparent 100%);
}

    /* Kill the Velonic inset box-shadow stripe so the <tr> gradient shows */
    #grazingmove-grid tbody tr.gm-conflict > td {
        --tz-table-bg-type: transparent !important;
        --tz-table-accent-bg: transparent !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }

        /* Left amber accent bar on the first cell only */
        #grazingmove-grid tbody tr.gm-conflict > td:first-child {
            box-shadow: inset 5px 0 0 rgba(var(--gm-conflict-rgb), 1) !important;
        }

/* ============================================
   Grid Row — Lifecycle event (read-only)
   Applied to the DEPARTURE/RETURNED rows the Actual
   grid interleaves alongside real tr.datarow moves
   (Default.cshtml, A2). These rows are NOT editable/
   deletable, so they are muted and use a default
   cursor to signal that. Reuses the .move-out/
   .move-return modifiers already used for planned
   point-event rows.
   ============================================ */
#grazingmove-grid tbody tr.lifecycle-row {
    font-style: italic;
    color: #6b7280;
    cursor: default;
}

    #grazingmove-grid tbody tr.lifecycle-row > td {
        opacity: .85;
    }

/* Inline HTML badge style (rendered as a <span> in Default.cshtml) */
.gm-conflict-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background-color: rgba(var(--gm-conflict-rgb), 1);
    padding: .15rem .55rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Float tag: anchor to last cell, do not change widths */
#grazingmove-grid tbody tr.gm-row td:last-child,
#grazingmove-planned-grid tbody tr.gm-row td:last-child {
    position: relative; /* containing block for the tag */
    overflow: visible !important; /* let the tag overflow without clipping */
}

/* Clear any old first-cell badge rules */
#grazingmove-grid tbody tr.gm-row td:first-of-type::after,
#grazingmove-planned-grid tbody tr.gm-row td:first-of-type::after {
    content: none !important;
}

/* New Move pill */
#grazingmove-grid tbody tr.gm-inserted td:last-child::after,
#grazingmove-planned-grid tbody tr.gm-inserted td:last-child::after {
    content: "New Move";
    position: absolute;
    right: .25rem; /* inside the cell edge */
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background-color: rgba(var(--gm-insert-rgb), 1);
    padding: .15rem .55rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    pointer-events: none;
    z-index: 2;
}

/* Edited pill */
#grazingmove-grid tbody tr.gm-edited td:last-child::after,
#grazingmove-planned-grid tbody tr.gm-edited td:last-child::after {
    content: "Edited";
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background-color: rgba(var(--gm-edit-rgb), 1);
    padding: .15rem .55rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    pointer-events: none;
    z-index: 2;
}

/* Pulse (optional) */
@keyframes gmPulse {
    0% {
        filter: none;
    }

    50% {
        filter: brightness(1.1);
    }

    100% {
        filter: none;
    }
}

#grazingmove-grid tbody tr.gm-pulse,
#grazingmove-planned-grid tbody tr.gm-pulse {
    animation: gmPulse .9s ease-out 1;
}

/* Flash alert animation for component validation */
@keyframes flashAlert {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.flash-alert {
    animation: flashAlert 0.6s ease-in-out 2;
}

/* Validation error styling */
.validation-error-item {
    padding: 0.5rem 0;
    line-height: 1.6;
}

    .validation-error-item .pasture-name {
        font-weight: 600;
        color: #721c24;
    }

    .validation-error-item .error-date {
        font-weight: 500;
        white-space: nowrap;
    }

    .validation-error-item .herd-count {
        font-size: 0.85rem;
        padding: 0.25rem 0.5rem;
        margin: 0 0.25rem;
    }

    .validation-error-item .herd-list {
        font-style: italic;
        color: #495057;
    }

/* Ensure validation message is visible and properly styled */
#grazing_move_validation {
    margin-top: 1rem;
}

    #grazing_move_validation .alert {
        position: relative;
        padding-right: 3rem; /* Make room for close button */
    }

    #grazing_move_validation .btn-close {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

/* ============================================================================
   TABLE SORTING STYLES
   ============================================================================ */

/* Sortable header styling */
.sortable-header {
    user-select: none;
    transition: background-color 0.15s ease;
}

    .sortable-header:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .sortable-header.sorted {
        background-color: rgba(var(--bs-primary-rgb), 0.08);
    }

/* Sort indicator base */
.sort-indicator {
    display: inline-flex;
    align-items: center;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.sortable-header:hover .sort-indicator {
    opacity: 0.7;
}

.sort-indicator.sort-asc,
.sort-indicator.sort-desc {
    opacity: 1;
    color: var(--bs-primary);
}

/* Real icon element */
.sort-indicator i {
    font-size: 1rem;
    line-height: 1;
}

/* CRITICAL: never use pseudo-element glyph fallback */
.sortable-header .sort-indicator::after {
    content: none !important;
}

/* Row highlight on sort change */
@keyframes sort-highlight {
    0% {
        background-color: rgba(var(--bs-primary-rgb), 0.15);
    }

    100% {
        background-color: transparent;
    }
}

#grazingmove-grid tbody tr.datarow,
#grazingmove-planned-grid tbody tr.datarow {
    transition: transform 0.2s ease;
}

/* ============================================================================
   OFF-RANCH VIRTUAL ROWS (Departed/Planned Away)
   ============================================================================ */

/* Divider row separating off-ranch herds from regular pasture rows */
.fixed-table tbody tr.offranch-divider,
.scrollable-table tbody tr.offranch-divider {
   border-top: 2px solid #6b7280 !important;
   background-color: #f3f4f6;
}

/* Divider row label cell styling */
.fixed-table tbody tr.offranch-divider td,
.scrollable-table tbody tr.offranch-divider td {
   background-color: #f3f4f6 !important;
   font-size: 0.85rem;
   font-variant: small-caps;
   font-weight: 600;
   color: #6b7280;
   text-transform: capitalize;
}

/* Divider row label cell with icon */
.fixed-table tbody tr.offranch-divider td::before {
   content: "\eb03"; /* ri-home-4-line icon code */
   font-family: "remixicon";
   margin-right: 0.4rem;
   font-size: 0.95rem;
}

/* Off-ranch herd rows — warm gray/light-tan background */
.fixed-table tbody tr.offranch-row,
.scrollable-table tbody tr.offranch-row {
   background-color: #faf7f2 !important;
}

/* Off-ranch actual mark cells (X marks with herd color) */
.scrollable-table td.offranch-actual {
   position: relative;
}

/* Single off-ranch actual herd: centered X */
.scrollable-table td.offranch-actual::after {
   content: "X";
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   font-size: 30px;
   font-weight: bolder;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: rgba(0, 0, 0, 0.5);
   -webkit-text-fill-color: var(--herdA);
   color: var(--herdA);
   line-height: 1;
   z-index: 3;
   pointer-events: none;
   background: none !important;
   border: 0 !important;
   box-shadow: none !important;
   width: auto;
   height: auto;
}

/* Off-ranch planned cells — diagonal hatch in herd color over a soft tint.
   Stripe period is sized so the fixed 45px day-cell width tiles seamlessly:
   horizontal repeat = period × √2 ≈ 11.25px, and 45px = 4 × 11.25px, so the
   pattern phase matches across adjacent cells (keep in sync with the 45px
   td.day width rule above). */
.scrollable-table td.offranch-planned {
   background-color: color-mix(in srgb, var(--herdA) 18%, white);
   background-image: repeating-linear-gradient(45deg, var(--herdA) 0 3.2px, transparent 3.2px 7.95px);
   /* Fuse consecutive hatch cells into one continuous band: hide this cell's
      right border; the next cell in the run hides its left border below. */
   border-right-color: transparent;
}

/* Continuation cells (previous day covered by the same planned run): hide the
   left border so no seam slices the band. Month-boundary cells (.first_day)
   keep their 2px separator, matching how pasture rows render solid fills. */
.scrollable-table td.offranch-planned.offranch-run-cont:not(.first_day) {
   border-left-color: transparent;
}

/* Off-ranch rows are display-only — no day-click, so no pointer affordance */
.scrollable-table tr.offranch-row td {
   cursor: default;
}

/* Layer gating: hide off-ranch planned hatch when data-show-planned="false" */
.grazing_plan_component[data-show-planned="false"] .scrollable-table td.offranch-planned {
   background-color: transparent !important;
   background-image: none !important;
   border-right-color: #ddd;
}

.grazing_plan_component[data-show-planned="false"] .scrollable-table td.offranch-planned.offranch-run-cont:not(.first_day) {
   border-left-color: #ddd;
}

/* Layer gating: hide off-ranch actual marks when data-show-actual="false" */
.grazing_plan_component[data-show-actual="false"] .scrollable-table td.offranch-actual::after {
   content: none !important;
}

/* ============================================================================
   AUD BREAKDOWN POPOVER STYLES
   ============================================================================ */

.popover.aud-breakdown-popover {
    max-width: fit-content;
}

.aud-breakdown-popover .popover-body {
    padding: 0.75rem;
}

.aud-breakdown table.table-sm td,
.aud-breakdown table.table-sm th {
    padding: 0.15rem 0.35rem;
    font-size: 0.85rem;
    vertical-align: middle;
}

.aud-breakdown hr {
    border-color: #dee2e6;
}

.aud-value {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.aud-value:hover {
    color: var(--bs-primary);
}

.aud-value:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================================
   MOVE-TYPE SELECTOR — DISABLED-BUTTON TOOLTIPS
   Bootstrap sets pointer-events: none on the label of a disabled .btn-check,
   which suppresses hover entirely — so the "why is this disabled" tooltip
   (attached by setMoveTypeButtonState in GrazingPlan.moves.service.js) could
   never appear. Re-enable pointer events for these labels only; clicks stay
   inert because the underlying radio input is still disabled.
   ============================================================================ */
#add_grazing_move_offcanvas .move_type_select_div .btn-check:disabled + .btn,
#add_grazing_move_offcanvas .move_type_select_div .btn-check[disabled] + .btn {
    pointer-events: auto;
    cursor: not-allowed;
}