@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

/* ===========================================================================
   Shared interface styling for the ICAR-CIRB milk yield estimation system.

   Everything here is namespaced `hui-` so it cannot collide with Bootstrap 3,
   jQuery UI, DataTables or the existing page CSS, all of which are still loaded
   on these pages. Nothing in this file touches the prediction pipeline — it is
   presentation only.
   =========================================================================== */

:root {
    /* Hal For Farmers palette, so this tool and halforfarmers.com read as one
       family. Deep green and cream replace the previous navy and grey; the
       gold is the same accent used across the main site. */
    --hui-green: #14472E;
    --hui-green-2: #1f7a48;
    --hui-green-3: #0F3A26;
    --hui-olive: #5f8740;
    --hui-gold: #d6a558;
    --hui-ink: #052e1b;
    --hui-muted: #4a6357;
    --hui-line: #e4dbc2;
    --hui-bg: #f5efe2;
    --hui-cream: #fffdf5;
    --hui-radius: 12px;
    /* Manrope for text, Space Grotesk for headings and figures. Poppins was
       doing the work before — a rounded geometric that has become the default
       look of generated interfaces. Manrope has tighter apertures and reads
       better at small sizes; Space Grotesk gives the numbers some character. */
    --hui-font: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --hui-display: "Space Grotesk", "Manrope", "Segoe UI", system-ui, sans-serif;
    --hui-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}


/* The page background sits on <html>, deliberately not on <body>: this
   stylesheet is pulled in from inside <body>, so a body rule here would win
   over each page's own <style> block and flatten the sign-in page's gradient. */
html {
    background: var(--hui-bg);
}

/* The pages set body margins of 10% inline, which wastes a fifth of a phone
   screen and stops the header running edge to edge. Reset it here and give the
   content its breathing room back through the wrappers below. */
body {
    margin: 0 !important;
    font-family: var(--hui-font);
    color: var(--hui-ink);
}

#body_one,
.hui-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 26px 20px 48px;
}

/* Contain the page's floats.
   The content on these pages is wrapped in Bootstrap 3 grid columns, and
   `.col-md-*` floats left above 992px. Nothing closed those floats, so they
   escaped `#body_one` and overlapped whatever came next. The footer felt it
   worst: a grid container establishes its own formatting context, so instead
   of ignoring the stray float it moved out of the way — which is why the
   footer columns were rendering squashed into the right-hand corner rather
   than spanning the page. */
#body_one::after,
.hui-main::after {
    content: "";
    display: block;
    clear: both;
}

/* --- the header as a whole ------------------------------------------------ */

/* The whole header pins, not just the nav row. A sticky element can only move
   within its own parent's box, so making the short <header> wrapper the sticky
   element (rather than the nav inside it) is what keeps the buttons on screen
   at all — otherwise they scroll away with the wrapper and the page content
   rides over them.
   z-index sits above their own `div.sticky` rule, which claims 10000. */
.hui-header {
    /* Pinned: the institute strip and the title stay in view while the page
       scrolls. Only the topbar and brand band live in here — the nav row is a
       sibling below, so it scrolls away as normal. A sticky element cannot
       travel outside its own parent, which is exactly why the nav had to move
       out rather than simply be un-stickied.
       z-index clears their own `div.sticky` rule, which claims 10000. */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 11000;
    background: var(--hui-cream);
    transition: box-shadow .2s ease;

    /* Explicit box metrics, because table/index_table.css styles the bare
       `header` element with `height:11vh; overflow:hidden`. This wrapper is a
       <div> now, but the guard is cheap and that rule cost a day once. */
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    width: auto;
    overflow: visible;
    float: none;
}

.hui-header.is-scrolled {
    box-shadow: 0 6px 22px rgba(13, 68, 44, .14);
}

/* Compact once scrolled, so the pinned bar keeps its presence without eating
   a sixth of the screen for the rest of the page. */
.hui-header.is-scrolled .hui-brand-in {
    padding: 7px 20px;
}

.hui-header.is-scrolled .hui-logo {
    height: 52px;
}

.hui-header.is-scrolled .hui-logo-icar {
    height: 0;
    opacity: 0;
}

.hui-header.is-scrolled .hui-title {
    font-size: clamp(13px, 1.5vw, 17px);
}

/* --- utility strip -------------------------------------------------------- */

.hui-topbar {
    background: linear-gradient(90deg, var(--hui-green), var(--hui-green-2));
    color: #fff;
}

.hui-topbar-in {
    max-width: 1240px;
    margin: 0 auto;
    padding: 7px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 12.5px;
}

.hui-orgs {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .78);
    letter-spacing: .01em;
}

.hui-orgs b {
    color: #fff;
    font-weight: 600;
}

.hui-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--hui-gold);
    flex: none;
}

.hui-session {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.hui-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hui-gold);
    color: var(--hui-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex: none;
}

.hui-user {
    color: rgba(255, 255, 255, .8);
}

.hui-user b {
    color: #f0d9a8;
    font-weight: 600;
}

.hui-since {
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
}

.hui-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff !important;
    border-radius: 999px;
    padding: 4px 13px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .18s ease;
}

.hui-logout:hover {
    background: rgba(255, 255, 255, .3);
}

/* --- brand band ----------------------------------------------------------- */

.hui-brand {
    background: var(--hui-cream);
    border-bottom: 1px solid var(--hui-line);
}

.hui-brand-in {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: padding .2s ease;
}

.hui-logo {
    height: 92px;
    width: auto;
    flex: none;
    transition: height .2s ease;
}

/* The ICAR mark is animated, so it keeps its own class — it is decorative and
   the first thing to go when the header compacts. */
.hui-logo-icar {
    height: 68px;
    width: auto;
    flex: none;
    transition: height .2s ease, opacity .2s ease;
}

.hui-titles {
    flex: 1;
    min-width: 0;
    text-align: center;
}

/* clamp() rather than the vw units used previously: those rendered the heading
   at roughly 7px on a phone and enormous on a wide monitor. */
.hui-title {
    font-family: var(--hui-display);
    margin: 0;
    font-size: clamp(15px, 2.1vw, 25px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--hui-green);
}

.hui-titles-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}


/* --- navigation ----------------------------------------------------------- */

/* The nav now lives inside the brand band, under the title, rather than as a
   strip of its own — so it drops the background and rules that separated it. */
.hui-nav {
    position: relative;
    z-index: 1;
    background: transparent;
    border: 0;
    margin-top: 12px;
}

.hui-nav-in {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hui-nav-in::-webkit-scrollbar {
    display: none;
}

.hui-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 17px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hui-ink) !important;
    text-decoration: none !important;
    white-space: nowrap;
    border: 1px solid var(--hui-line);
    background: rgba(255, 253, 245, .85);
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

.hui-link:active {
    transform: translateY(1px);
}

.hui-link:hover {
    background: #eaf0e6;
    color: var(--hui-green) !important;
    border-color: var(--hui-line);
}

.hui-link.is-active {
    background: linear-gradient(90deg, var(--hui-green), var(--hui-green-2));
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 8px 18px -8px rgba(13, 68, 44, .75);
}

/* Wrapper for the inline SVG icons. flex keeps the glyph optically centred
   against the label instead of sitting on the text baseline. */
.hui-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    line-height: 0;
}

.hui-ico svg {
    width: 17px;
    height: 17px;
}

.hui-logout .hui-ico svg,
.hui-lang .hui-ico svg {
    width: 14px;
    height: 14px;
}

.hui-back .hui-ico svg {
    width: 15px;
    height: 15px;
}

.hui-ext {
    margin-left: 2px;
    font-size: 11px;
    opacity: .5;
}

/* Pushes the back button to the right of the same row. */
.hui-nav-spacer {
    flex: 0 0 14px;
}

.hui-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--hui-line);
    background: var(--hui-cream);
    color: var(--hui-muted) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
}

.hui-back:hover {
    background: #eaf0e6;
    color: var(--hui-green) !important;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 820px) {
    .hui-brand-in {
        gap: 12px;
        padding: 14px 16px;
    }

    .hui-logo {
        height: 62px;
    }

    .hui-orgs {
        font-size: 11px;
    }

    .hui-since {
        display: none;
    }

    #body_one,
    .hui-main {
        padding: 18px 16px 36px;
    }
}

@media (max-width: 560px) {
    .hui-orgs span.hui-org-long {
        display: none;
    }

    .hui-logo {
        height: 48px;
    }

    .hui-logo-icar {
        display: none;
    }

    .hui-nav-in {
        padding: 0;
        gap: 8px;
        justify-content: flex-start;
    }

    /* Still a comfortable tap target — 44px tall — just less side padding so
       four buttons are reachable without much horizontal scrolling. */
    .hui-link {
        padding: 7px 13px;
        font-size: 13px;
    }
}

/* --- footer --------------------------------------------------------------- */

/* Mirrors the footer on halforfarmers.com: same deep-green band, same
   three-column grid, same darker copyright strip underneath. */
.hui-footer {
    /* text-align and padding are stated explicitly: several pages carry their
       own bare `footer {}` rules, which would otherwise centre these columns. */
    text-align: left;
    padding: 0;
    /* Belt and braces alongside the clearfix above: some pages float content
       outside `#body_one` entirely, and the footer must start on its own line
       whatever is left open above it. */
    clear: both;
    margin-top: 56px;
    background: var(--hui-green);
    color: #fff;
    font-family: var(--hui-font);
}

.hui-footer-grid {
    max-width: 1240px;
    margin: 0 auto;
    padding: 34px 20px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hui-footer h4 {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.hui-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hui-footer li {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

.hui-footer a {
    color: rgba(255, 255, 255, .9) !important;
    text-decoration: none !important;
    transition: color .18s ease;
}

.hui-footer a:hover {
    color: #fff !important;
}

.hui-footer-note {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .9);
}

.hui-footer-note b {
    color: #fff;
    font-weight: 600;
}

.hui-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hui-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .1);
    color: #fff !important;
    transition: background .2s ease, border-color .2s ease, transform .12s ease;
}

.hui-social a:hover {
    border-color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .2);
}

.hui-social a:active {
    transform: scale(.95);
}

.hui-sico {
    width: 20px;
    height: 20px;
}

.hui-footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 32px;
    padding: 10px 16px;
    background: var(--hui-green-3);
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

.hui-footer-bar b {
    color: #fff;
    font-weight: 600;
}

.hui-footer-sep {
    color: rgba(255, 255, 255, .35);
}

/* Four columns is too many below a laptop; pair them off first, then stack. */
@media (max-width: 1040px) {
    .hui-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .hui-footer-grid {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 26px 16px;
    }

    .hui-footer-sep {
        display: none;
    }

    .hui-footer-bar {
        flex-direction: column;
        gap: 4px;
    }
}

/* --- language switch ------------------------------------------------------ */

.hui-right { display: flex; align-items: center; gap: 14px; flex: none; }

.hui-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
}

.hui-lang .hui-ico { font-size: 13px; opacity: .9; }

.hui-lang select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8.5 2 4.5h8z'/%3E%3C/svg%3E") no-repeat right center/9px;
    border: 0;
    outline: none;
    padding: 3px 14px 3px 0;
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

/* The list itself renders in the OS palette, so it needs readable colours. */
.hui-lang select option { color: #16213f; background: #fff; }

/* Google injects a banner iframe that pushes the page down and covers the top
   bar. Suppress its chrome and keep only the translation itself.
   The iframe carries `.skiptranslate` (its class name changes between versions,
   so both selectors are listed), and it is always a direct child of <body> —
   which is why the widget container inside the header is not caught by it. */
iframe.skiptranslate,
body > .skiptranslate,
.goog-te-banner-frame,
.goog-te-gadget-icon,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover { display: none !important; }

.goog-text-highlight { background: none !important; box-shadow: none !important; }

body { top: 0 !important; }

#google_translate_element { display: none; }

@media (max-width: 560px) {
    .hui-right { gap: 8px; }
    .hui-lang { padding: 2px 8px 2px 9px; }
    .hui-lang select { font-size: 12px; }
}