:root {
    --fp-appbar-height: 52px;
    --fp-sidebar-width: 240px;
    --fp-sidebar-mini-width: 62px;
}


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

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

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

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

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

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

/* ============================================
   MUDBLAZOR OVERRIDES
   ============================================ */

.mud-paper {
    border: 1px solid rgba(229,231,235, 0.85);
}

.mud-input-control .mud-input-root {
    border-radius: 14px;
}

.mud-input .mud-input-outlined-border {
    border-color: rgba(229,231,235, 1) !important;
}

.mud-button-root {
    border-radius: 14px !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

.mud-dialog:not(.mud-dialog-fullscreen), .mud-snackbar {
    border-radius: 16px !important;
}

/* Lock the page behind an open dialog. Applied globally so it covers the
   web on a mobile browser as well as the MAUI WebView. Exclude the
   mobile dialog-host page — its overlay-dialog is in the DOM but flattened
   into page layout, and the body must scroll so long forms can pan. */
html:has(.mud-overlay-dialog):not(:has(.mobile-dialog-host)),
body:has(.mud-overlay-dialog):not(:has(.mobile-dialog-host)) {
    overflow: hidden !important;
}

.mud-overlay-dialog {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.mud-toolbar {
    min-height: 52px;
}

/* ============================================
   PLAIN HTML SIDEBAR (no MudDrawer)
   ============================================ */

.fp-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--fp-sidebar-width);
    background: #FFFFFF;
    border-right: 1px solid #E7DDD3;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-sidebar--mini {
    width: var(--fp-sidebar-mini-width);
}

.fp-sidebar--mini .fp-sidebar-nav .mud-nav-link-text {
    display: none;
}

.fp-sidebar--mini .fp-farm-selector {
    display: none;
}

/* Brand header */
.fp-sidebar-brand {
    height: var(--fp-appbar-height);
    min-height: var(--fp-appbar-height);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 10px;
    flex-shrink: 0;
}

.fp-sidebar-title {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: #2B2420;
    white-space: nowrap;
}

/* Divider */
.fp-sidebar-divider {
    height: 1px;
    margin: 0 14px 8px;
    background: rgba(231, 221, 211, 0.6);
    flex-shrink: 0;
}

/* Nav area */
.fp-sidebar-nav {
    flex: 0 1 auto;
    overflow-y: auto;
    padding: 0 8px;
}

/* Spacer pushes footer to bottom */
.fp-sidebar-spacer {
    flex: 1 1 auto;
}

/* Footer with collapse toggle */
.fp-sidebar-footer {
    padding: 8px 12px 14px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================
   NAV CONTACT / SUPPORT
   ============================================ */

.fp-nav-contact {
    padding: 0 16px 8px;
    flex-shrink: 0;
}

.fp-nav-contact-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 4px;
}

.fp-nav-contact-text a {
    color: var(--mud-palette-primary);
    text-decoration: none;
    font-weight: 500;
}

.fp-nav-contact-text a:hover {
    text-decoration: underline;
}

.fp-sidebar--mini .fp-nav-contact {
    display: none;
}

/* ============================================
   MODERN NAV LINKS
   ============================================ */

.fp-sidebar .mud-navmenu {
    padding: 0;
}

.fp-sidebar .mud-nav-link {
    border-radius: 10px !important;
    margin: 2px 0;
    padding: 10px 14px !important;
    font-weight: 500;
    font-size: 0.9rem;
    color: #7A6F68;
    transition: all 150ms ease;
    gap: 12px;
}

.fp-sidebar .mud-nav-link:hover {
    background: rgba(176, 122, 58, 0.08);
    color: #2B2420;
}

.fp-sidebar .mud-nav-link.active {
    background: rgba(176, 122, 58, 0.12);
    color: #B07A3A;
    font-weight: 600;
}

.fp-sidebar .mud-nav-link .mud-nav-link-icon {
    color: inherit;
    opacity: 0.75;
}

.fp-sidebar .mud-nav-link.active .mud-nav-link-icon {
    opacity: 1;
}

/* ============================================
   APPBAR (plain <header>, sits right of sidebar)
   ============================================ */

header.fp-appbar {
    position: fixed;
    top: 0;
    left: var(--fp-sidebar-width);
    right: 0;
    height: var(--fp-appbar-height);
    background: #FFFCF7;
    border-bottom: 1px solid rgba(231, 221, 211, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1300;
    transition: left 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-sidebar--mini ~ header.fp-appbar {
    left: var(--fp-sidebar-mini-width);
}

.fp-toolbar {
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 10px;
    height: 100%;
}

.fp-toolbar-spacer {
    flex: 1 1 auto;
}

.fp-title {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #2B2420;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

main.fp-main {
    margin-left: var(--fp-sidebar-width);
    padding-top: var(--fp-appbar-height);
    min-height: 100vh;
    transition: margin-left 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

main.fp-main--sidebar-mini {
    margin-left: var(--fp-sidebar-mini-width);
}

/* MudMainContent inside MudLayout (for mobile) — no global padding-top override;
   mobile offset is handled by inline styles in MainLayout.razor */

/* ============================================
   HEADER COMPONENTS
   ============================================ */

.fp-icon .mud-icon-button {
    border-radius: 14px;
}

.alerts-badge .mud-badge-wrapper > .mud-badge {
    top: 6px !important;
    right: 6px !important;
}

.fp-cow-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}


.fp-brandmark {
    border-radius: 12px !important;
    background: rgba(176, 122, 58, 0.14);
    border: 1px solid rgba(231, 221, 211, 0.95);
    color: #2B2420;
}

.fp-brand-initial {
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
}

.fp-farm-name {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-search {
    width: min(420px, 44vw);
}

.fp-search .mud-input-outlined-border {
    border-color: rgba(231, 221, 211, 0.95);
}

.fp-search .mud-input-control {
    border-radius: 14px;
}

.fp-userchip {
    background: rgba(176, 122, 58, 0.14);
    border: 1px solid rgba(231, 221, 211, 0.95);
    color: #2B2420;
    border-radius: 999px;
}

.fp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Auto-collapse sidebar on tablets */
@media (max-width: 1024px) {
    .fp-sidebar.fp-sidebar--open {
        width: var(--fp-sidebar-mini-width);
    }
    .fp-sidebar.fp-sidebar--open .fp-sidebar-nav .mud-nav-link-text,
    .fp-sidebar.fp-sidebar--open .fp-sidebar-title,
    .fp-sidebar.fp-sidebar--open .fp-nav-contact,
    .fp-sidebar.fp-sidebar--open .fp-sidebar-brand span {
        display: none;
    }
    .fp-main.fp-main--sidebar-open {
        margin-left: var(--fp-sidebar-mini-width);
    }
    header.fp-appbar {
        left: var(--fp-sidebar-mini-width) !important;
    }
}

@media (max-width: 1100px) {
    .fp-search {
        width: 260px;
    }
}

@media (max-width: 820px) {
    .fp-search {
        display: none;
    }

    .fp-userchip {
        padding-inline: 6px;
    }

        .fp-userchip .mud-chip-label {
            display: none;
        }

        .fp-userchip .mud-avatar {
            margin-right: 0 !important;
        }
}


/* ============================================
   SHARED / UTILITY CLASSES
   ============================================ */

.page-wrap {
    background: var(--mud-palette-background-grey);
    min-height: calc(100vh - 64px);
}

.card {
    border-radius: 16px;
    padding: 16px;
    background: var(--mud-palette-surface);
}

.kpi {
    min-height: 92px;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

    .kpi:hover {
        transform: translateY(-2px);
    }

.kpi-value {
    margin-top: 8px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.muted {
    opacity: 0.75;
}

.icon-muted {
    opacity: 0.65;
}

.alert-list .alert-row {
    border-radius: 12px;
    cursor: pointer;
    margin: 4px 0;
}

    .alert-list .alert-row:hover {
        background: rgba(0,0,0,0.04);
    }


/* ========================================================================
   Mobile dialog host — renders a MudDialogContainer inline as a full page.

   PageDialogContainer inherits MudDialogContainer, which emits the usual
   backdrop + centered modal chrome. These overrides flatten everything
   to static/full-width so the dialog component looks like a normal page.

   SCROLL: the host itself is the scroll container (fixed-position, full
   viewport minus the fixed AppBar+MobileNav above). Body-level scroll is
   unreliable here — once MudLayout + fixed headers + the flattened
   MudDialog chrome stack up, the body grows but neither touch nor wheel
   moves it. Self-contained overflow-y:auto sidesteps all of that.
   ======================================================================== */
.mobile-dialog-host {
    position: fixed;
    top: var(--fp-mobile-header-offset, 128px);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: var(--mud-palette-surface);
    z-index: 1;
}

/* While a mobile dialog is open, hide the global add-calf/quick-event FAB
   to avoid two competing primary actions and accidental taps over the form. */
body:has(.mobile-dialog-host) .mobile-fab-container {
    display: none !important;
}

.mobile-dialog-host .mud-overlay,
.mobile-dialog-host .mud-overlay-dialog,
.mobile-dialog-host .mud-overlay-scrim {
    display: none !important;
}

.mobile-dialog-host .mud-dialog-container {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    pointer-events: auto !important;
}

.mobile-dialog-host .mud-dialog {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
    display: block !important;
    overflow: visible !important;
}

/* Our AppBar already shows the title; hide the dialog's own title bar. */
.mobile-dialog-host .mud-dialog-title {
    display: none !important;
}

.mobile-dialog-host .mud-dialog-content {
    padding: 8px 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.mobile-dialog-host .mud-dialog-actions {
    padding: 12px 0 !important;
}

.mobile-dialog-host__header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid #eee;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
}

.mobile-dialog-host__title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-dialog-host__content {
    padding: 8px 12px 80px; /* top gap is small; bottom breathing room */
}

/* Nested dialogs: lower stack items stay mounted but hidden so their state and
   awaiting async handlers survive while a nested dialog is on top. */
.mobile-dialog-host--hidden {
    display: none !important;
}


/* ========================================================================
   CONSULTANT REPORT — disease x month grid  (.fp-dgrid)

   A dense numeric table that has to stay readable while scrolling in two
   directions, so both the header row and the condition column are sticky
   and the corner cell is sticky in both axes. Z-index ladder, lowest first:
   body cells (auto) < sticky row head (2) < sticky header (3) < corner (4).

   Colour comes entirely from MudBlazor palette variables plus one alpha
   overlay for the heat shading, so light and dark themes both work without
   a second set of rules.
   ======================================================================== */

.fp-dgrid-wrap {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

table.fp-dgrid {
    border-collapse: separate; /* required: collapse drops borders on sticky cells */
    border-spacing: 0;
    width: 100%;
    /* Tabular figures so digits line up column-to-column; a proportional 1 in a
       count column is what makes a numeric table look hand-assembled. */
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
}

    .fp-dgrid th,
    .fp-dgrid td {
        padding: 7px 10px;
        white-space: nowrap;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .fp-dgrid thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--mud-palette-surface);
        font-weight: 600;
        font-size: 0.6875rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
        border-bottom: 2px solid var(--mud-palette-lines-default);
    }

/* Condition column — sticky left, and wide enough that no condition wraps. */
.fp-dgrid-rowhead {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
    min-width: 210px;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.fp-dgrid thead .fp-dgrid-rowhead {
    z-index: 4;
}

.fp-dgrid-num {
    text-align: right;
    min-width: 54px;
}

/* The right-hand summary block: separated by a rule rather than a gap so it
   reads as attached to the row it summarises, not as a second table. */
.fp-dgrid-sep {
    border-left: 2px solid var(--mud-palette-lines-default);
}

.fp-dgrid-strong {
    font-weight: 700;
}

.fp-dgrid-zero {
    color: var(--mud-palette-text-disabled);
}

.fp-dgrid tbody tr:hover td {
    background-color: var(--mud-palette-action-default-hover);
}

/* Heat overlay. --fp-heat is set per-cell inline as an alpha in [0,1]; the hue is
   fixed here so the whole grid shares one scale. Capped well below 1 so the
   figure on top never loses contrast in either theme. */
.fp-dgrid-heat {
    background-image: linear-gradient( rgba(239, 83, 80, var(--fp-heat, 0)), rgba(239, 83, 80, var(--fp-heat, 0)) );
}

/* Footer: the two summary rows. Raised above the body but below the header. */
.fp-dgrid tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--mud-palette-background-grey);
    font-weight: 600;
    border-top: 2px solid var(--mud-palette-lines-default);
    border-bottom: none;
}

.fp-dgrid tfoot .fp-dgrid-rowhead {
    z-index: 3;
    background: var(--mud-palette-background-grey);
}

/* Legend under the grid. */
.fp-heat-legend {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .fp-heat-legend span {
        width: 22px;
        height: 10px;
        border-radius: 2px;
        background: var(--mud-palette-lines-default);
    }

@media (max-width: 600px) {
    .fp-dgrid-rowhead {
        min-width: 150px;
    }

    table.fp-dgrid {
        font-size: 0.75rem;
    }
}