/* CattleTracker v17 - calm farm workspace redesign */
:root {
    --farm-forest-950: #102b25;
    --farm-forest-900: #173f35;
    --farm-forest-800: #205245;
    --farm-green-700: #2d6a4f;
    --farm-green-600: #3b7a57;
    --farm-green-500: #4e8d67;
    --farm-green-200: #cfe2d6;
    --farm-green-100: #e7f0ea;
    --farm-green-50: #f2f7f4;
    --farm-cream: #f7f7f2;
    --farm-sand: #f0e8dc;
    --farm-sand-dark: #d6c6af;
    --farm-amber: #bd742c;
    --farm-amber-soft: #fbf0df;
    --farm-blue: #3f708f;
    --farm-blue-soft: #e9f2f7;
    --farm-red: #b74c43;
    --farm-red-soft: #fbecea;
    --farm-ink: #1e2925;
    --farm-muted: #68736e;
    --farm-subtle: #88928d;
    --farm-line: #dce4df;
    --farm-line-strong: #cbd7d0;
    --farm-white: #ffffff;
    --farm-shadow-xs: 0 1px 2px rgba(16, 43, 37, 0.04);
    --farm-shadow-sm: 0 6px 18px rgba(16, 43, 37, 0.06);
    --farm-shadow-md: 0 16px 40px rgba(16, 43, 37, 0.09);
    --farm-shadow-lg: 0 30px 70px rgba(16, 43, 37, 0.16);
    --farm-radius-sm: 10px;
    --farm-radius: 16px;
    --farm-radius-lg: 22px;
    --farm-radius-xl: 30px;
    --sidebar-width: 276px;
    --topbar-height: 76px;
}

html {
    background: var(--farm-cream);
}

body {
    margin: 0;
    color: var(--farm-ink);
    background:
        linear-gradient(180deg, rgba(231, 240, 234, 0.62) 0, rgba(247, 247, 242, 0) 300px),
        var(--farm-cream);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
summary,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(59, 122, 87, 0.22);
    outline-offset: 2px;
}

button {
    color: inherit;
}

.ui-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex: 0 0 auto;
    fill: none;
    color: currentColor;
    vertical-align: middle;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.green { color: var(--farm-green-700) !important; }
.red { color: var(--farm-red) !important; }
.orange { color: var(--farm-amber) !important; }
.muted-text { color: var(--farm-muted) !important; }

/* Application shell */
.app-shell-v17 {
    min-height: 100vh;
    background: transparent;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 90;
    width: var(--sidebar-width);
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.78);
    background:
        radial-gradient(circle at 15% -5%, rgba(108, 169, 129, 0.22), transparent 34%),
        linear-gradient(180deg, var(--farm-forest-900), var(--farm-forest-950));
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 18px 0 45px rgba(16, 43, 37, 0.09);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar-brand-row {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.sidebar-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--farm-white);
    text-decoration: none;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--farm-forest-900);
    background: linear-gradient(145deg, #f7f0dc, #dcebdc);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.brand-mark .ui-icon {
    width: 28px;
    height: 28px;
}

.brand-mark-large {
    width: 58px;
    height: 58px;
    border-radius: 19px;
}

.brand-mark-large .ui-icon {
    width: 38px;
    height: 38px;
}

.sidebar-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.12;
}

.sidebar-brand-copy strong {
    color: var(--farm-white);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.sidebar-brand-copy small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-close {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 2px 24px;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-group-label {
    padding: 0 12px 7px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sidebar-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.68);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.sidebar-nav a .ui-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.52);
}

.sidebar-nav a span {
    min-width: 0;
    flex: 1;
}

.sidebar-nav a em {
    min-width: 24px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    color: rgba(255, 255, 255, 0.64);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.sidebar-nav a:hover {
    color: var(--farm-white);
    background: rgba(255, 255, 255, 0.075);
    transform: translateX(2px);
}

.sidebar-nav a.active {
    color: var(--farm-white);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: inset 3px 0 0 #a9d0af;
}

.sidebar-nav a.active .ui-icon {
    color: #cbe4cf;
}

.sidebar-nav a .nav-alert-count {
    color: #5d2a20;
    background: #f3c49f;
}

.nav-group-secondary {
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cloud-status-card,
.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
}

.cloud-status-card .ui-icon {
    width: 22px;
    height: 22px;
    color: #e3b97d;
}

.cloud-status-card.is-online .ui-icon {
    color: #9ad1a7;
}

.cloud-status-card > span,
.sidebar-user-card > span {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.cloud-status-card strong,
.sidebar-user-card strong {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cloud-status-card small,
.sidebar-user-card small {
    margin-top: 2px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.43);
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-avatar {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--farm-forest-900);
    background: #dcebdc;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 900;
}

.sidebar-user-card button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.sidebar-user-card button:hover {
    color: var(--farm-white);
    background: rgba(255, 255, 255, 0.09);
}

.sidebar-user-card button .ui-icon {
    width: 18px;
    height: 18px;
}

.sidebar-overlay {
    display: none;
}

.app-workspace {
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--sidebar-width);
}

.workspace-topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    min-height: var(--topbar-height);
    display: grid;
    grid-template-columns: minmax(150px, 0.55fr) minmax(300px, 640px) minmax(210px, 0.55fr);
    align-items: center;
    gap: 22px;
    padding: 12px clamp(18px, 2.5vw, 36px);
    background: rgba(250, 250, 247, 0.9);
    border-bottom: 1px solid rgba(203, 215, 208, 0.74);
    backdrop-filter: blur(18px) saturate(140%);
}

.topbar-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-menu-button {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: var(--farm-forest-900);
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: 13px;
    cursor: pointer;
}

.topbar-context {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.topbar-context small {
    color: var(--farm-subtle);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.topbar-context strong {
    margin-top: 5px;
    overflow: hidden;
    color: var(--farm-forest-900);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search {
    position: relative;
    min-width: 0;
}

.global-search > .ui-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    width: 19px;
    height: 19px;
    color: var(--farm-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.global-search input {
    width: 100%;
    height: 46px;
    padding: 0 48px 0 44px;
    color: var(--farm-ink);
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: 15px;
    box-shadow: var(--farm-shadow-xs);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.global-search input::placeholder {
    color: #929b96;
}

.global-search input:focus {
    background: var(--farm-white);
    border-color: #9bbca8;
    box-shadow: 0 0 0 4px rgba(59, 122, 87, 0.11), var(--farm-shadow-sm);
}

.global-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 4;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--farm-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transform: translateY(-50%);
}

.global-search-clear .ui-icon {
    width: 16px;
    height: 16px;
}

.global-search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 100;
    padding: 8px;
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: 18px;
    box-shadow: var(--farm-shadow-lg);
}

.global-search-results > a {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    color: var(--farm-ink);
    border-radius: 12px;
    text-decoration: none;
}

.global-search-results > a:hover {
    background: var(--farm-green-50);
}

.global-search-results > a > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.global-search-results > a strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-results > a small {
    margin-top: 2px;
    overflow: hidden;
    color: var(--farm-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-results > a .status {
    margin-left: auto;
}

.global-search-results .search-view-all {
    min-height: 42px;
    justify-content: center;
    margin-top: 5px;
    color: var(--farm-green-700);
    background: var(--farm-green-50);
    font-size: 12px;
    font-weight: 800;
}

.global-search-results .search-view-all .ui-icon {
    width: 16px;
    height: 16px;
}

.search-empty-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: var(--farm-muted);
}

.search-empty-result > .ui-icon {
    width: 26px;
    height: 26px;
    color: var(--farm-green-600);
}

.search-empty-result span {
    display: flex;
    flex-direction: column;
}

.search-empty-result strong {
    color: var(--farm-ink);
    font-size: 13px;
}

.search-empty-result small {
    margin-top: 2px;
    font-size: 11px;
}

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

.attention-topbar-button {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--farm-forest-900);
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: 14px;
    text-decoration: none;
    box-shadow: var(--farm-shadow-xs);
}

.attention-topbar-button span {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    color: var(--farm-white);
    background: var(--farm-red);
    border: 2px solid var(--farm-cream);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}

.create-menu,
.page-action-menu,
.row-action-menu,
.family-siblings-menu {
    position: relative;
}

.create-menu > summary,
.page-action-menu > summary,
.row-action-menu > summary,
.family-siblings-menu > summary {
    list-style: none;
}

.create-menu > summary::-webkit-details-marker,
.page-action-menu > summary::-webkit-details-marker,
.row-action-menu > summary::-webkit-details-marker,
.family-siblings-menu > summary::-webkit-details-marker {
    display: none;
}

.create-menu > summary {
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
}

.create-menu > summary .ui-icon:last-child {
    width: 15px;
    height: 15px;
    margin-left: 2px;
}

.create-menu[open] > summary .ui-icon:last-child {
    transform: rotate(180deg);
}

.create-menu-popover,
.page-action-popover,
.row-action-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 110;
    width: 320px;
    padding: 9px;
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: 18px;
    box-shadow: var(--farm-shadow-lg);
}

.create-menu-label {
    display: block;
    padding: 7px 10px 8px;
    color: var(--farm-subtle);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.create-menu-popover a,
.page-action-popover a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    color: var(--farm-ink);
    border-radius: 12px;
    text-decoration: none;
}

.create-menu-popover a:hover,
.page-action-popover a:hover {
    background: var(--farm-green-50);
}

.menu-action-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--farm-green-700);
    background: var(--farm-green-100);
    border-radius: 12px;
}

.create-menu-popover a > span:last-child,
.page-action-popover a > span:last-child {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.create-menu-popover strong,
.page-action-popover strong {
    font-size: 13px;
    font-weight: 800;
}

.create-menu-popover small,
.page-action-popover small {
    margin-top: 1px;
    color: var(--farm-muted);
    font-size: 11px;
    font-weight: 500;
}

.app-main {
    width: 100%;
    min-height: calc(100vh - var(--topbar-height));
}

.mobile-bottom-nav {
    display: none;
}

/* Login */
.login-page-v17 {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(circle at 15% 10%, rgba(135, 181, 145, 0.24), transparent 38%),
        linear-gradient(145deg, #edf2ec, #f8f5ee 55%, #edf1ea);
}

.login-shell {
    width: min(1060px, 100%);
    min-height: 620px;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.78fr);
    overflow: hidden;
    background: var(--farm-white);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 34px;
    box-shadow: 0 40px 100px rgba(16, 43, 37, 0.18);
}

.login-visual {
    position: relative;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    padding: 38px 42px;
    overflow: hidden;
    color: var(--farm-white);
    background:
        radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.15), transparent 26%),
        linear-gradient(145deg, #1c5143, #102f28);
}

.login-brand-row {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-brand-row > div:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.login-brand-row strong {
    color: var(--farm-white);
    font-size: 16px;
    font-weight: 850;
}

.login-brand-row span {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.login-visual-copy {
    position: relative;
    z-index: 3;
    max-width: 500px;
    margin-top: 96px;
}

.login-visual-copy h1 {
    margin: 14px 0 18px;
    color: var(--farm-white);
    font-size: clamp(42px, 5vw, 66px);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.login-visual-copy p {
    max-width: 430px;
    margin: 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 16px;
    line-height: 1.65;
}

.login-pasture {
    position: absolute;
    inset: auto 0 0;
    height: 270px;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

.login-hill {
    position: absolute;
    left: -15%;
    width: 130%;
    border-radius: 50% 50% 0 0;
}

.login-hill-one {
    bottom: -150px;
    height: 300px;
    background: #31624b;
    transform: rotate(-4deg);
}

.login-hill-two {
    bottom: -190px;
    left: 25%;
    height: 320px;
    background: #234f3d;
    transform: rotate(7deg);
}

.login-tree,
.login-cow,
.login-calf {
    position: absolute;
    z-index: 2;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.14));
}

.login-tree {
    left: 9%;
    bottom: 66px;
    width: 110px;
    height: 110px;
    color: #c6dbb9;
}

.login-cow {
    right: 22%;
    bottom: 48px;
    width: 125px;
    height: 125px;
    color: #f2ead4;
}

.login-calf {
    right: 8%;
    bottom: 39px;
    width: 82px;
    height: 82px;
    color: #dce8d2;
}

.login-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px 48px;
}

.login-form-copy h2 {
    margin: 10px 0 7px;
    color: var(--farm-forest-900);
    font-size: 32px;
    letter-spacing: -0.04em;
}

.login-form-copy p {
    margin: 0;
    color: var(--farm-muted);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 34px;
}

.login-form .form-group {
    margin: 0;
}

.input-with-icon {
    position: relative;
}

.input-with-icon > .ui-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 19px;
    height: 19px;
    color: var(--farm-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.input-with-icon .form-control {
    padding-left: 44px;
}

.login-form label {
    display: block;
    margin-bottom: 7px;
    color: var(--farm-ink);
    font-size: 12px;
    font-weight: 800;
}

.login-button {
    width: 100%;
    justify-content: space-between;
    margin-top: 4px;
}

.login-button .ui-icon {
    width: 18px;
    height: 18px;
}

.login-help {
    display: block;
    margin-top: 24px;
    color: var(--farm-subtle);
    text-align: center;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 12px 14px;
    color: #82372f;
    background: var(--farm-red-soft);
    border: 1px solid #f1c6c1;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 700;
}

.login-error .ui-icon {
    width: 18px;
    height: 18px;
}

.login-loading-card {
    width: min(390px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 38px;
    color: var(--farm-forest-900);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px;
    box-shadow: var(--farm-shadow-md);
}

.login-loading-card > span {
    font-size: 13px;
    font-weight: 750;
}

.loading-track {
    width: 100%;
    height: 5px;
    overflow: hidden;
    background: var(--farm-green-100);
    border-radius: 999px;
}

.loading-track i {
    width: 45%;
    height: 100%;
    display: block;
    background: var(--farm-green-600);
    border-radius: inherit;
    animation: loading-slide 1.2s ease-in-out infinite alternate;
}

@keyframes loading-slide {
    from { transform: translateX(0); }
    to { transform: translateX(122%); }
}

/* Shared page foundations */
.dashboard-page,
.dashboard-page.wide-page,
.finance-page {
    width: min(1640px, 100%);
    max-width: none;
    margin: 0 auto;
    padding: 30px clamp(18px, 3vw, 42px) 70px;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--farm-green-700);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.light-kicker {
    color: rgba(255, 255, 255, 0.7);
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.page-heading-copy {
    min-width: 0;
}

.page-heading h1 {
    margin: 8px 0 5px;
    color: var(--farm-forest-900);
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.page-heading p {
    max-width: 700px;
    margin: 0;
    color: var(--farm-muted);
    font-size: 14px;
}

.page-heading-actions,
.animal-profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.panel,
.panel-clean,
.form-main-panel,
.form-side-panel,
.document-large-card,
.finance-detail-card,
.health-card,
.metric-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--farm-line);
    border-radius: var(--farm-radius-lg);
    box-shadow: var(--farm-shadow-xs);
}

.panel,
.panel-clean {
    padding: 22px;
}

.panel + .panel,
.panel-clean + .panel-clean {
    margin-top: 18px;
}

.panel-header,
.section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.panel-header h3,
.section-heading-row h2,
.section-heading-row h3 {
    margin: 4px 0 3px;
    color: var(--farm-forest-900);
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.section-heading-row h2 {
    font-size: 21px;
}

.panel-header p,
.section-heading-row p {
    margin: 0;
    color: var(--farm-muted);
    font-size: 12px;
    line-height: 1.5;
}

.panel-header > a,
.text-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: var(--farm-green-700);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.text-action .ui-icon,
.panel-header > a .ui-icon {
    width: 15px;
    height: 15px;
}

.text-action:hover,
.panel-header > a:hover {
    color: var(--farm-forest-900);
}

.primary-button,
.secondary-button,
.danger-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.primary-button {
    color: var(--farm-white);
    background: linear-gradient(180deg, var(--farm-green-600), var(--farm-green-700));
    border: 1px solid var(--farm-green-700);
    box-shadow: 0 8px 20px rgba(45, 106, 79, 0.18);
}

.primary-button:hover {
    color: var(--farm-white);
    background: linear-gradient(180deg, #327657, #245a43);
    transform: translateY(-1px);
    box-shadow: 0 11px 26px rgba(45, 106, 79, 0.23);
}

.secondary-button {
    color: var(--farm-forest-900);
    background: var(--farm-white);
    border: 1px solid var(--farm-line-strong);
    box-shadow: var(--farm-shadow-xs);
}

.secondary-button:hover {
    color: var(--farm-forest-900);
    background: var(--farm-green-50);
    border-color: #aac5b5;
    transform: translateY(-1px);
}

.danger-button {
    color: var(--farm-red);
    background: var(--farm-red-soft);
    border: 1px solid #efc7c2;
    box-shadow: none;
}

.primary-button .ui-icon,
.secondary-button .ui-icon,
.danger-button .ui-icon {
    width: 17px;
    height: 17px;
}

.button-light {
    color: var(--farm-forest-900);
    background: #f7f3e9;
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.button-light:hover {
    color: var(--farm-forest-900);
    background: var(--farm-white);
}

.button-ghost {
    color: var(--farm-white);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.19);
    box-shadow: none;
}

.button-ghost:hover {
    color: var(--farm-white);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
}

.button-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.back-link,
.icon-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    color: var(--farm-green-700);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.icon-back-link .ui-icon {
    width: 16px;
    height: 16px;
}

.status {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status.alive {
    color: #256246;
    background: #e6f2e9;
    border-color: #c9e1d0;
}

.status.sold {
    color: #865219;
    background: var(--farm-amber-soft);
    border-color: #efd9b8;
}

.status.deceased {
    color: #8d3e37;
    background: var(--farm-red-soft);
    border-color: #efcac6;
}

.success-message,
.success-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    padding: 13px 15px;
    color: #245e43;
    background: #e6f2e9;
    border: 1px solid #c8e0ce;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 750;
}

.success-banner .ui-icon {
    width: 18px;
    height: 18px;
}

.empty-state,
.calm-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 170px;
    padding: 24px;
    color: var(--farm-muted);
    background: var(--farm-green-50);
    border: 1px dashed var(--farm-line-strong);
    border-radius: var(--farm-radius);
    text-align: left;
}

.empty-state {
    flex-direction: column;
    text-align: center;
}

.empty-state > span,
.calm-empty-state > span {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--farm-green-700);
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: 15px;
    font-size: 24px;
    box-shadow: var(--farm-shadow-xs);
}

.empty-state > span .ui-icon,
.calm-empty-state > span .ui-icon {
    width: 24px;
    height: 24px;
}

.empty-state strong,
.calm-empty-state strong {
    display: block;
    color: var(--farm-ink);
    font-size: 14px;
    font-weight: 850;
}

.empty-state p,
.calm-empty-state p {
    margin: 3px 0 0;
    color: var(--farm-muted);
    font-size: 12px;
}

.calm-empty-state.compact,
.compact-empty {
    min-height: 118px;
    padding: 18px;
}

.large-empty-state {
    min-height: 280px;
}

.large-empty-state > div {
    max-width: 520px;
}

.large-empty-state .button-row {
    margin-top: 16px;
}

/* Animal visual component */
.animal-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    color: var(--farm-green-700);
    background: linear-gradient(145deg, #f4f7f2, #e4eee6);
    border: 1px solid #d3e2d7;
    border-radius: 30%;
}

.animal-avatar.is-calf {
    color: var(--farm-blue);
    background: linear-gradient(145deg, #f1f7fa, #e2eef3);
    border-color: #d0e2eb;
}

.animal-avatar.is-bull {
    color: #765d3d;
    background: linear-gradient(145deg, #f7f2e9, #eee4d5);
    border-color: #e3d5c2;
}

.animal-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.animal-avatar .ui-icon {
    width: 58%;
    height: 58%;
}

.animal-avatar-tiny {
    width: 36px;
    height: 36px;
    border-radius: 11px;
}

.animal-avatar-small {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}

.animal-avatar-medium {
    width: 62px;
    height: 62px;
    border-radius: 18px;
}

.animal-avatar-large {
    width: 92px;
    height: 92px;
    border-radius: 24px;
}

.animal-avatar-xlarge {
    width: 126px;
    height: 126px;
    border-radius: 30px;
}

/* Forms and legacy page compatibility */
.form-hero,
.finance-hero,
.documents-hero,
.reports-hero,
.register-hero {
    min-height: 156px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin-bottom: 20px;
    padding: 26px 28px;
    color: var(--farm-ink);
    background:
        radial-gradient(circle at 88% 12%, rgba(78, 141, 103, 0.15), transparent 28%),
        linear-gradient(135deg, var(--farm-white), #f1f6f2);
    border: 1px solid var(--farm-line);
    border-radius: var(--farm-radius-xl);
    box-shadow: var(--farm-shadow-sm);
}

.form-hero h1,
.finance-hero h1,
.documents-hero h1,
.reports-hero h1,
.register-hero h1 {
    margin: 7px 0 5px;
    color: var(--farm-forest-900);
    font-size: clamp(30px, 3.3vw, 43px);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.form-hero p,
.finance-hero p,
.documents-hero p,
.reports-hero p,
.register-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--farm-muted);
    font-size: 13px;
}

.form-hero .eyebrow,
.finance-hero .eyebrow,
.documents-hero .eyebrow,
.reports-hero .eyebrow,
.register-hero .eyebrow {
    padding: 0;
    color: var(--farm-green-700);
    background: transparent;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.form-hero .back-link,
.finance-hero .back-link,
.documents-hero .back-link,
.reports-hero .back-link,
.register-hero .back-link {
    color: var(--farm-green-700);
}

.form-hero .primary-button,
.finance-hero .primary-button,
.documents-hero .primary-button,
.reports-hero .primary-button,
.register-hero .primary-button {
    color: var(--farm-white);
    background: linear-gradient(180deg, var(--farm-green-600), var(--farm-green-700));
}

.form-hero .secondary-button,
.finance-hero .secondary-button,
.documents-hero .secondary-button,
.reports-hero .secondary-button,
.register-hero .secondary-button {
    color: var(--farm-forest-900);
    background: var(--farm-white);
    border-color: var(--farm-line-strong);
}

.form-hero-icon {
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--farm-green-700);
    background: var(--farm-green-100);
    border: 1px solid var(--farm-green-200);
    border-radius: 25px;
    font-size: 42px;
}

.smart-form-layout {
    display: grid;
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.form-side-panel {
    position: sticky;
    top: calc(var(--topbar-height) + 20px);
    padding: 24px;
}

.form-side-panel h3 {
    margin: 14px 0 6px;
    color: var(--farm-forest-900);
    font-size: 20px;
    letter-spacing: -0.025em;
}

.form-side-panel > p {
    margin: 0;
    color: var(--farm-muted);
    font-size: 12px;
    line-height: 1.6;
}

.form-side-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--farm-green-700);
    background: var(--farm-green-100);
    border-radius: 17px;
    font-size: 28px;
}

.form-progress-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.form-progress-list > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--farm-muted);
    font-size: 12px;
}

.form-progress-list > div > span {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--farm-green-700);
    background: var(--farm-green-100);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 900;
}

.form-progress-list > div strong {
    color: var(--farm-ink);
    font-weight: 750;
}

.form-main-panel {
    padding: 0;
    overflow: hidden;
}

.form-section-card {
    margin: 0;
    padding: 26px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--farm-line);
    border-radius: 0;
    box-shadow: none;
}

.form-section-card:last-of-type {
    border-bottom: 0;
}

.form-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.form-section-header h3 {
    margin: 0 0 4px;
    color: var(--farm-forest-900);
    font-size: 17px;
    letter-spacing: -0.02em;
}

.form-section-header p {
    margin: 0;
    color: var(--farm-muted);
    font-size: 12px;
}

.modern-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group {
    min-width: 0;
}

.form-group label,
.compact-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #3b4742;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.01em;
}

.form-control,
.animal-search-input,
.finance-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--farm-ink);
    background: #fbfcfa;
    border: 1px solid var(--farm-line-strong);
    border-radius: 12px;
    box-shadow: inset 0 1px 1px rgba(16, 43, 37, 0.025);
    outline: none;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.form-control:hover,
.animal-search-input:hover,
.finance-select:hover {
    border-color: #b7c8be;
}

.form-control:focus,
.animal-search-input:focus,
.finance-select:focus {
    background: var(--farm-white);
    border-color: #8eb29d;
    box-shadow: 0 0 0 4px rgba(59, 122, 87, 0.1);
}

textarea.form-control,
.form-control.textarea {
    min-height: 112px;
    resize: vertical;
}

.full-span {
    grid-column: 1 / -1;
}

.validation-message {
    display: block;
    margin-top: 5px;
    color: var(--farm-red);
    font-size: 11px;
    font-weight: 700;
}

.validation-summary {
    margin: 0 0 16px;
    padding: 13px 15px;
    color: #843c35;
    background: var(--farm-red-soft);
    border: 1px solid #efc7c2;
    border-radius: 13px;
    font-size: 12px;
}

.modern-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 17px 24px;
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid var(--farm-line);
    backdrop-filter: blur(12px);
}

.status-alert-card.sold-card {
    background: #fffaf2;
}

.status-alert-card.deceased-card {
    background: #fff7f6;
}

.modern-info-box,
.calving-info-box {
    color: var(--farm-ink);
    background: var(--farm-blue-soft);
    border-color: #cfe0e9;
    border-radius: 14px;
}

/* Home dashboard */
.home-dashboard {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.home-hero {
    position: relative;
    min-height: 318px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    overflow: hidden;
    color: var(--farm-white);
    background:
        radial-gradient(circle at 78% 15%, rgba(218, 233, 205, .15), transparent 26%),
        linear-gradient(125deg, #173f35 0%, #235847 54%, #346d4f 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--farm-radius-xl);
    box-shadow: var(--farm-shadow-md);
}

.home-hero-copy {
    position: relative;
    z-index: 4;
    align-self: center;
    padding: 48px 22px 48px 50px;
}

.home-hero-copy h1 {
    max-width: 700px;
    margin: 7px 0 10px;
    color: var(--farm-white);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 780;
    letter-spacing: -.045em;
    line-height: 1.04;
}

.home-hero-copy > p {
    max-width: 660px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
    line-height: 1.65;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 27px;
}

.button-light {
    color: var(--farm-forest-900) !important;
    background: #f7f2e6 !important;
    border-color: rgba(255, 255, 255, .65) !important;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .13) !important;
}

.button-light:hover {
    color: var(--farm-forest-900) !important;
    background: var(--farm-white) !important;
}

.button-ghost {
    color: rgba(255, 255, 255, .9) !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.button-ghost:hover {
    color: var(--farm-white) !important;
    background: rgba(255, 255, 255, .14) !important;
}

.herd-landscape {
    position: relative;
    min-height: 318px;
    overflow: hidden;
}

.herd-landscape::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    height: 34%;
    background: linear-gradient(180deg, transparent, rgba(16, 43, 37, .21));
}

.landscape-hill {
    position: absolute;
    display: block;
    border-radius: 50% 50% 0 0;
}

.landscape-hill-back {
    right: -18%;
    bottom: -21%;
    width: 120%;
    height: 61%;
    background: #5d8f62;
    transform: rotate(-4deg);
}

.landscape-hill-front {
    right: -13%;
    bottom: -27%;
    z-index: 1;
    width: 115%;
    height: 60%;
    background: #467c55;
    transform: rotate(5deg);
}

.landscape-sun {
    position: absolute;
    top: 34px;
    right: 47px;
    width: 54px;
    height: 54px;
    background: #f7d990;
    border-radius: 50%;
    box-shadow: 0 0 0 12px rgba(247, 217, 144, .08), 0 0 50px rgba(247, 217, 144, .18);
}

.landscape-cloud {
    position: absolute;
    z-index: 1;
    height: 11px;
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

.landscape-cloud::before,
.landscape-cloud::after {
    content: "";
    position: absolute;
    bottom: 0;
    background: inherit;
    border-radius: 50%;
}

.landscape-cloud::before { left: 12px; width: 22px; height: 22px; }
.landscape-cloud::after { left: 28px; width: 17px; height: 17px; }
.landscape-cloud-one { top: 71px; left: 70px; width: 67px; }
.landscape-cloud-two { top: 109px; right: 95px; width: 45px; opacity: .65; transform: scale(.76); }

.landscape-tree,
.landscape-cow,
.landscape-calf,
.landscape-bull {
    position: absolute;
    z-index: 3;
    filter: drop-shadow(0 12px 14px rgba(14, 42, 30, .24));
}

.landscape-tree { right: 41px; bottom: 65px; width: 150px; height: 150px; color: #214d35; }
.landscape-cow { left: 53px; bottom: 52px; width: 112px; height: 112px; color: #f2e6cd; }
.landscape-calf { left: 169px; bottom: 49px; width: 72px; height: 72px; color: #e4cfa9; }
.landscape-bull { right: 138px; bottom: 43px; width: 98px; height: 98px; color: #d9b985; }

.landscape-stat {
    position: absolute;
    top: 31px;
    left: 36px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: rgba(15, 50, 39, .37);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.landscape-stat strong { color: var(--farm-white); font-size: 25px; line-height: 1; }
.landscape-stat span { margin-top: 4px; color: rgba(255, 255, 255, .64); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.farm-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: var(--farm-radius-lg);
    box-shadow: var(--farm-shadow-xs);
}

.farm-kpi-item {
    position: relative;
    min-width: 0;
    min-height: 106px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px 20px;
    color: var(--farm-ink);
    text-decoration: none;
    border-right: 1px solid var(--farm-line);
    transition: background 150ms ease, transform 150ms ease;
}

.farm-kpi-item:last-child { border-right: 0; }
.farm-kpi-item:hover { background: var(--farm-green-50); }
.farm-kpi-item.has-warning { background: linear-gradient(180deg, #fffdf8, #fffaf2); }
.farm-kpi-item > span:nth-child(2) { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.farm-kpi-item small { color: var(--farm-muted); font-size: 12px; font-weight: 680; }
.farm-kpi-item strong { margin-top: 2px; overflow: hidden; color: var(--farm-ink); font-size: clamp(19px, 2vw, 25px); font-weight: 800; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }

.kpi-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
}

.kpi-icon .ui-icon { width: 24px; height: 24px; }
.kpi-icon-green { color: var(--farm-green-700); background: var(--farm-green-100); }
.kpi-icon-amber { color: var(--farm-amber); background: var(--farm-amber-soft); }
.kpi-icon-blue { color: var(--farm-blue); background: var(--farm-blue-soft); }
.kpi-icon-red { color: var(--farm-red); background: var(--farm-red-soft); }
.kpi-chevron { width: 17px; height: 17px; color: #a9b1ad; }

.action-launcher {
    padding: 27px 28px 25px;
}

.action-launcher-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.launcher-action {
    min-width: 0;
    min-height: 126px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 17px;
    color: var(--farm-ink);
    background: #fafbf9;
    border: 1px solid var(--farm-line);
    border-radius: 16px;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.launcher-action:hover {
    color: var(--farm-ink);
    background: var(--farm-white);
    border-color: #bfd0c5;
    box-shadow: var(--farm-shadow-sm);
    transform: translateY(-2px);
}

.launcher-action > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.launcher-action strong { font-size: 14px; font-weight: 770; }
.launcher-action small { margin-top: 3px; color: var(--farm-muted); font-size: 11px; line-height: 1.45; }
.launcher-action > .ui-icon { width: 16px; height: 16px; margin: auto 0 0 auto; color: #9ba8a1; }
.launcher-icon { width: 39px; height: 39px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.launcher-icon .ui-icon { width: 22px; height: 22px; }
.icon-cow { color: var(--farm-green-700); background: var(--farm-green-100); }
.icon-health { color: #925f3e; background: #f4e8df; }
.icon-camp { color: var(--farm-blue); background: var(--farm-blue-soft); }
.icon-document { color: #6b5b8f; background: #f0ecf7; }
.icon-sale { color: var(--farm-amber); background: var(--farm-amber-soft); }

.home-primary-grid,
.home-secondary-grid {
    display: grid;
    gap: 22px;
    align-items: start;
}

.home-primary-grid { grid-template-columns: minmax(0, 1.22fr) minmax(350px, .78fr); }
.home-secondary-grid { grid-template-columns: minmax(310px, .83fr) minmax(0, 1.17fr); }
.attention-workbench,
.herd-composition-panel,
.camp-panel,
.recent-panel { padding: 27px 28px; }

.priority-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 19px;
}

.priority-item {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 13px;
    padding: 12px 13px;
    color: var(--farm-ink);
    background: #fbfcfa;
    border: 1px solid var(--farm-line);
    border-left: 3px solid var(--farm-amber);
    border-radius: 13px;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.priority-item:hover { color: var(--farm-ink); background: var(--farm-green-50); border-color: #c8d6ce; transform: translateX(2px); }
.priority-item.priority-high { border-left-color: var(--farm-red); }
.priority-item.priority-low { border-left-color: var(--farm-blue); }
.priority-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--farm-amber); background: var(--farm-amber-soft); border-radius: 12px; }
.priority-high .priority-icon { color: var(--farm-red); background: var(--farm-red-soft); }
.priority-low .priority-icon { color: var(--farm-blue); background: var(--farm-blue-soft); }
.priority-icon .ui-icon { width: 20px; height: 20px; }
.priority-copy { min-width: 0; display: flex; flex-direction: column; }
.priority-copy strong { overflow: hidden; font-size: 13px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.priority-copy small { margin-top: 2px; overflow: hidden; color: var(--farm-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.priority-meta { display: flex; flex-direction: column; align-items: flex-end; }
.priority-meta em { color: var(--farm-muted); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.priority-meta small { margin-top: 2px; color: var(--farm-subtle); font-size: 10px; }
.priority-item > .ui-icon { width: 16px; height: 16px; color: #a5aea9; }

.herd-composition-visual {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    margin-top: 27px;
}

.composition-donut {
    width: 148px;
    height: 148px;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--farm-green-700) 0 var(--cows, 0deg), #d8b783 var(--cows, 0deg) var(--calves, 0deg), #7e9fac var(--calves, 0deg) 360deg);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(16, 43, 37, .04);
}

.composition-donut::before {
    content: "";
    grid-area: 1 / 1;
    width: 94px;
    height: 94px;
    background: var(--farm-white);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .44);
}

.composition-donut > div { z-index: 1; grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; }
.composition-donut strong { color: var(--farm-ink); font-size: 28px; line-height: 1; }
.composition-donut span { margin-top: 5px; color: var(--farm-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.composition-legend { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.composition-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; color: var(--farm-ink); border-radius: 12px; text-decoration: none; }
.composition-row:hover { color: var(--farm-ink); background: var(--farm-green-50); }
.composition-row > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.composition-row strong { font-size: 12px; }
.composition-row small { color: var(--farm-muted); font-size: 10px; }
.composition-row em { color: var(--farm-ink); font-size: 17px; font-style: normal; font-weight: 800; }
.composition-symbol { width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; }
.composition-symbol .ui-icon { width: 21px; height: 21px; }
.composition-cows { color: var(--farm-green-700); background: var(--farm-green-100); }
.composition-calves { color: #9b6e37; background: #f6ecda; }
.composition-bulls { color: var(--farm-blue); background: var(--farm-blue-soft); }

.camp-bar-list { display: flex; flex-direction: column; gap: 15px; margin-top: 24px; }
.camp-bar-row { display: flex; flex-direction: column; gap: 7px; }
.camp-bar-label { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--farm-muted); font-size: 12px; }
.camp-bar-label > span { min-width: 0; display: inline-flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-bar-label .ui-icon { width: 16px; height: 16px; color: var(--farm-green-600); }
.camp-bar-label strong { color: var(--farm-ink); font-size: 12px; }
.farm-progress-track { height: 8px; overflow: hidden; background: var(--farm-green-50); border: 1px solid #e1e9e4; border-radius: 999px; }
.farm-progress-track i { display: block; min-width: 4px; height: 100%; background: linear-gradient(90deg, var(--farm-green-600), #76a47e); border-radius: inherit; }

.recent-switcher { margin-top: 16px; }
.recent-switcher > summary { display: none; }
.recent-switcher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.recent-column { min-width: 0; }
.recent-column-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--farm-muted); font-size: 11px; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
.recent-column-title .ui-icon { width: 16px; height: 16px; color: var(--farm-green-600); }
.recent-list { display: flex; flex-direction: column; gap: 7px; }
.recent-list-item { min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 10px; color: var(--farm-ink); background: #fbfcfa; border: 1px solid var(--farm-line); border-radius: 13px; text-decoration: none; }
.recent-list-item:hover { color: var(--farm-ink); background: var(--farm-green-50); border-color: #c8d7ce; }
.recent-list-item > span:not(.animal-avatar) { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.recent-list-item strong { overflow: hidden; font-size: 12px; font-weight: 730; text-overflow: ellipsis; white-space: nowrap; }
.recent-list-item small { margin-top: 2px; overflow: hidden; color: var(--farm-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.recent-list-item > .ui-icon { width: 15px; height: 15px; color: #a5aea9; }
.recent-event-icon { width: 35px; height: 35px; display: inline-flex !important; flex: 0 0 auto !important; align-items: center; justify-content: center; color: var(--farm-blue); background: var(--farm-blue-soft); border-radius: 10px; }
.recent-event-icon .ui-icon { width: 18px; height: 18px; }

/* Home activity and recent cattle */
.activity-panel,
.recent-cattle-panel {
    padding: 27px 28px;
}

.recent-activity-list,
.recent-cattle-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 19px;
}

.recent-activity-item,
.recent-cattle-item {
    min-width: 0;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    color: var(--farm-ink);
    background: #fbfcfa;
    border: 1px solid var(--farm-line);
    border-radius: 13px;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.recent-activity-item:hover,
.recent-cattle-item:hover {
    color: var(--farm-ink);
    background: var(--farm-green-50);
    border-color: #c6d5cc;
    transform: translateX(2px);
}

.activity-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--farm-blue);
    background: var(--farm-blue-soft);
    border-radius: 11px;
}

.activity-icon .ui-icon { width: 20px; height: 20px; }
.activity-copy,
.recent-cattle-item > span:nth-child(2) { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.activity-copy strong,
.recent-cattle-item strong { overflow: hidden; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy small,
.recent-cattle-item small { margin-top: 2px; overflow: hidden; color: var(--farm-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.recent-activity-item time { color: var(--farm-subtle); font-size: 10px; font-weight: 700; white-space: nowrap; }
.recent-cattle-item .status { margin-left: auto; }

/* Cattle register */
.cattle-register-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.register-control-panel {
    overflow: visible;
}

.register-status-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px;
    background: #f7f9f7;
    border-bottom: 1px solid var(--farm-line);
    border-radius: var(--farm-radius-lg) var(--farm-radius-lg) 0 0;
}

.register-status-tab {
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    color: var(--farm-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 13px;
    cursor: pointer;
    text-align: left;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.register-status-tab:hover { color: var(--farm-ink); background: rgba(255, 255, 255, .68); }
.register-status-tab.active { color: var(--farm-ink); background: var(--farm-white); border-color: var(--farm-line); box-shadow: var(--farm-shadow-xs); }
.register-status-tab > span:nth-child(2) { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.register-status-tab small { color: inherit; font-size: 11px; font-weight: 680; }
.register-status-tab strong { margin-top: 1px; color: var(--farm-ink); font-size: 20px; font-weight: 820; line-height: 1.1; }
.status-tab-icon { width: 37px; height: 37px; display: inline-flex; align-items: center; justify-content: center; color: var(--farm-green-700); background: var(--farm-green-100); border-radius: 12px; }
.status-tab-icon .ui-icon { width: 20px; height: 20px; }
.sold-icon { color: var(--farm-amber); background: var(--farm-amber-soft); }
.deceased-icon { color: var(--farm-red); background: var(--farm-red-soft); }

.register-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) minmax(145px, .65fr) minmax(145px, .65fr) minmax(155px, .7fr) auto;
    align-items: end;
    gap: 12px;
    padding: 19px 20px 15px;
}

.register-search-field {
    position: relative;
    min-width: 0;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    color: var(--farm-subtle);
    background: #fafbf9;
    border: 1px solid var(--farm-line-strong);
    border-radius: 13px;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.register-search-field:focus-within { color: var(--farm-green-700); background: var(--farm-white); border-color: #91b39e; box-shadow: 0 0 0 4px rgba(59, 122, 87, .09); }
.register-search-field > .ui-icon { width: 19px; height: 19px; }
.register-search-field input { min-width: 0; flex: 1; color: var(--farm-ink); background: transparent; border: 0; outline: 0; font-size: 13px; }
.register-search-field input::placeholder { color: #929b96; }
.register-search-field button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--farm-muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.register-search-field button:hover { color: var(--farm-ink); background: var(--farm-green-50); }
.register-search-field button .ui-icon { width: 15px; height: 15px; }

.filter-select-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-select-field > span { padding-left: 2px; color: var(--farm-muted); font-size: 10px; font-weight: 790; letter-spacing: .05em; text-transform: uppercase; }
.filter-select-field select {
    width: 100%;
    height: 46px;
    padding: 0 34px 0 11px;
    color: var(--farm-ink);
    background: #fafbf9;
    border: 1px solid var(--farm-line-strong);
    border-radius: 13px;
    outline: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}
.filter-select-field select:focus { background: var(--farm-white); border-color: #91b39e; box-shadow: 0 0 0 4px rgba(59, 122, 87, .09); }

.register-view-toggle {
    height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background: var(--farm-green-50);
    border: 1px solid var(--farm-line);
    border-radius: 13px;
}

.register-view-toggle button {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    color: var(--farm-muted);
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}
.register-view-toggle button.active { color: var(--farm-forest-900); background: var(--farm-white); box-shadow: var(--farm-shadow-xs); }
.register-view-toggle .ui-icon { width: 16px; height: 16px; }

.register-result-summary {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 21px 14px;
    color: var(--farm-muted);
    font-size: 11px;
}
.register-result-summary strong { color: var(--farm-ink); }
.clear-filter-button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--farm-green-700); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 720; }
.clear-filter-button:hover { background: var(--farm-green-50); }
.clear-filter-button .ui-icon { width: 14px; height: 14px; }
.register-empty-panel { padding: 32px; }

.cattle-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.cattle-register-card {
    min-width: 0;
    overflow: visible;
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: var(--farm-radius-lg);
    box-shadow: var(--farm-shadow-xs);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.cattle-register-card:hover { border-color: #c4d2c9; box-shadow: var(--farm-shadow-sm); transform: translateY(-2px); }
.cattle-card-primary { display: flex; align-items: center; gap: 14px; padding: 19px 19px 15px; color: var(--farm-ink); text-decoration: none; }
.cattle-card-primary:hover { color: var(--farm-ink); }
.cattle-card-visual { position: relative; flex: 0 0 auto; }
.cattle-card-visual .status { position: absolute; right: -7px; bottom: -4px; box-shadow: 0 0 0 3px var(--farm-white); }
.cattle-card-heading { min-width: 0; }
.cattle-card-heading h2 { margin: 2px 0 2px; overflow: hidden; color: var(--farm-ink); font-size: 19px; font-weight: 790; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.cattle-card-heading p { margin: 0; overflow: hidden; color: var(--farm-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cattle-card-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0 18px; padding: 10px 0 14px; border-top: 1px solid var(--farm-line); }
.cattle-card-facts > div { min-width: 0; display: flex; flex-direction: column; padding: 8px 9px; }
.cattle-card-facts span { display: inline-flex; align-items: center; gap: 5px; color: var(--farm-muted); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.cattle-card-facts span .ui-icon { width: 14px; height: 14px; color: var(--farm-green-600); }
.cattle-card-facts strong { margin-top: 3px; overflow: hidden; color: var(--farm-ink); font-size: 11px; font-weight: 710; text-overflow: ellipsis; white-space: nowrap; }
.cattle-card-footer { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 9px 15px 9px 19px; background: #fafbf9; border-top: 1px solid var(--farm-line); border-radius: 0 0 var(--farm-radius-lg) var(--farm-radius-lg); }

.cattle-table-panel { overflow: visible; }
.responsive-table-wrap { width: 100%; overflow-x: auto; border-radius: inherit; }
.cattle-register-table { min-width: 920px; }
.cattle-register-table th { padding: 13px 15px; color: var(--farm-muted); background: #f7f9f7; border-bottom: 1px solid var(--farm-line); font-size: 10px; font-weight: 820; letter-spacing: .065em; text-transform: uppercase; }
.cattle-register-table td { padding: 12px 15px; color: var(--farm-muted); border-bottom: 1px solid #e7ece9; font-size: 12px; vertical-align: middle; }
.cattle-register-table tbody tr:last-child td { border-bottom: 0; }
.cattle-register-table tbody tr { transition: background 150ms ease; }
.cattle-register-table tbody tr:hover { background: var(--farm-green-50); }
.cattle-register-table td > strong { color: var(--farm-ink); font-weight: 690; }
.register-animal-link { min-width: 240px; display: flex; align-items: center; gap: 10px; color: var(--farm-ink); text-decoration: none; }
.register-animal-link:hover { color: var(--farm-green-700); }
.register-animal-link > span:nth-child(2) { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.register-animal-link strong { overflow: hidden; font-size: 12px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.register-animal-link small { margin-top: 2px; overflow: hidden; color: var(--farm-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.register-animal-link .status { margin-left: 5px; }
.table-data-with-icon { display: inline-flex; align-items: center; gap: 6px; color: var(--farm-muted); white-space: nowrap; }
.table-data-with-icon .ui-icon { width: 15px; height: 15px; color: var(--farm-green-600); }
.record-count { display: inline-flex; align-items: center; gap: 5px; color: var(--farm-muted); white-space: nowrap; }
.record-count strong { color: var(--farm-ink); }
.record-count i { width: 3px; height: 3px; background: #aab4ae; border-radius: 50%; }
.action-col { width: 52px; text-align: right; }

.row-action-menu,
.page-action-menu,
.create-menu,
.family-siblings-menu {
    position: relative;
}
.row-action-menu > summary,
.page-action-menu > summary,
.create-menu > summary,
.family-siblings-menu > summary {
    list-style: none;
}
.row-action-menu > summary::-webkit-details-marker,
.page-action-menu > summary::-webkit-details-marker,
.create-menu > summary::-webkit-details-marker,
.family-siblings-menu > summary::-webkit-details-marker { display: none; }
.row-action-menu > summary { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--farm-muted); background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.row-action-menu > summary:hover,
.row-action-menu[open] > summary { color: var(--farm-ink); background: var(--farm-white); border-color: var(--farm-line); box-shadow: var(--farm-shadow-xs); }
.row-action-menu > summary .ui-icon { width: 18px; height: 18px; }
.row-action-popover { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 45; width: 190px; padding: 6px; background: var(--farm-white); border: 1px solid var(--farm-line); border-radius: 13px; box-shadow: var(--farm-shadow-md); }
.table-row-menu .row-action-popover { top: calc(100% + 6px); bottom: auto; }
.row-action-popover a,
.row-action-popover button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 8px 9px; color: var(--farm-ink); background: transparent; border: 0; border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 680; text-align: left; text-decoration: none; }
.row-action-popover a:hover,
.row-action-popover button:hover { color: var(--farm-ink); background: var(--farm-green-50); }
.row-action-popover .ui-icon { width: 16px; height: 16px; color: var(--farm-green-600); }
.row-action-popover .danger-menu-action { color: var(--farm-red); }
.row-action-popover .danger-menu-action .ui-icon { color: var(--farm-red); }

/* Animal profile and family tree */
.animal-profile-header {
    min-height: 176px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 24px 27px;
    background:
        radial-gradient(circle at 82% 5%, rgba(78, 141, 103, .13), transparent 28%),
        linear-gradient(135deg, var(--farm-white), #f5f8f5);
}

.animal-profile-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 22px;
}

.animal-profile-title { min-width: 0; }
.animal-profile-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.animal-profile-title h1 { margin: 4px 0 3px; overflow-wrap: anywhere; color: var(--farm-forest-900); font-size: clamp(29px, 3.8vw, 44px); font-weight: 800; letter-spacing: -.045em; line-height: 1.03; }
.animal-profile-title > p { margin: 0; color: var(--farm-muted); font-size: 13px; }
.animal-profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.animal-profile-meta span { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; color: var(--farm-muted); background: rgba(255, 255, 255, .72); border: 1px solid var(--farm-line); border-radius: 9px; font-size: 10px; font-weight: 700; }
.animal-profile-meta .ui-icon { width: 15px; height: 15px; color: var(--farm-green-600); }

.animal-profile-snapshot {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    margin: 16px 0 18px;
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: var(--farm-radius-lg);
    box-shadow: var(--farm-shadow-xs);
}

.profile-snapshot-item {
    min-width: 0;
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-right: 1px solid var(--farm-line);
}
.profile-snapshot-item:last-child { border-right: 0; }
.profile-snapshot-item > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.profile-snapshot-item small { color: var(--farm-muted); font-size: 10px; font-weight: 720; }
.profile-snapshot-item strong { margin-top: 2px; overflow: hidden; color: var(--farm-ink); font-size: 16px; font-weight: 810; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--farm-green-700); background: var(--farm-green-100); border-radius: 12px; }
.snapshot-icon .ui-icon { width: 20px; height: 20px; }
.snapshot-icon-income { color: var(--farm-green-700); background: var(--farm-green-100); }
.snapshot-icon-loss { color: var(--farm-red); background: var(--farm-red-soft); }
.snapshot-icon-health { color: #9b6139; background: #f4e7de; }
.snapshot-icon-records { color: var(--farm-blue); background: var(--farm-blue-soft); }

.profile-tabs-v17 {
    position: sticky;
    top: calc(var(--topbar-height) + 8px);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 18px;
    padding: 6px;
    overflow-x: auto;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--farm-line);
    border-radius: 15px;
    box-shadow: var(--farm-shadow-xs);
    backdrop-filter: blur(15px);
    scrollbar-width: none;
}
.profile-tabs-v17::-webkit-scrollbar { display: none; }
.profile-tabs-v17 .profile-tab { min-width: max-content; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; color: var(--farm-muted); background: transparent; border: 0; border-radius: 11px; cursor: pointer; font-size: 11px; font-weight: 760; }
.profile-tabs-v17 .profile-tab:hover { color: var(--farm-ink); background: var(--farm-green-50); }
.profile-tabs-v17 .profile-tab.active { color: var(--farm-white); background: var(--farm-forest-900); box-shadow: 0 6px 17px rgba(23, 63, 53, .16); }
.profile-tabs-v17 .profile-tab .ui-icon { width: 17px; height: 17px; }
.profile-tabs-v17 .profile-tab em { min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; color: var(--farm-muted); background: var(--farm-green-50); border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 820; }
.profile-tabs-v17 .profile-tab.active em { color: var(--farm-forest-900); background: rgba(255, 255, 255, .8); }

.profile-content-grid {
    display: grid;
    grid-template-columns: minmax(330px, .7fr) minmax(0, 1.3fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}
.profile-content-grid > .panel,
.profile-content-grid > .family-tree-panel { margin: 0; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--farm-line); border-radius: 14px; overflow: hidden; }
.detail-list > div { min-width: 0; min-height: 67px; display: flex; flex-direction: column; justify-content: center; padding: 11px 13px; background: #fbfcfa; border-right: 1px solid var(--farm-line); border-bottom: 1px solid var(--farm-line); }
.detail-list > div:nth-child(2n) { border-right: 0; }
.detail-list > div:nth-last-child(-n + 2) { border-bottom: 0; }
.detail-list span:not(.status) { color: var(--farm-muted); font-size: 9px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.detail-list strong { margin-top: 3px; overflow-wrap: anywhere; color: var(--farm-ink); font-size: 12px; font-weight: 700; }

.family-tree-panel {
    min-width: 0;
    overflow: hidden;
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: var(--farm-radius-lg);
    box-shadow: var(--farm-shadow-xs);
}

.family-tree-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 23px 17px;
    border-bottom: 1px solid var(--farm-line);
}
.family-tree-heading h3 { margin: 4px 0 3px; color: var(--farm-forest-900); font-size: 19px; letter-spacing: -.025em; }
.family-tree-heading p { margin: 0; color: var(--farm-muted); font-size: 11px; }
.family-tree-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #c7d5cc transparent; }
.family-tree-canvas { position: relative; min-width: 720px; min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 25px 24px 22px; background: radial-gradient(circle at 50% 50%, rgba(231, 240, 234, .82), rgba(255, 255, 255, 0) 57%); }
.family-generation { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; }
.family-grandparents { justify-content: space-around; }
.family-parents { gap: 98px; }
.family-children { justify-content: center; flex-wrap: nowrap; }
.family-tree-node { width: 138px; min-height: 82px; display: flex; align-items: center; gap: 9px; padding: 9px; color: var(--farm-ink); background: rgba(255, 255, 255, .96); border: 1px solid #cfdbd4; border-radius: 14px; box-shadow: 0 4px 15px rgba(16, 43, 37, .06); text-decoration: none; transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.family-tree-node:hover { color: var(--farm-ink); border-color: #9dbba8; box-shadow: var(--farm-shadow-sm); transform: translateY(-2px); }
.family-tree-node.is-current { width: 184px; min-height: 100px; padding: 13px; background: linear-gradient(145deg, var(--farm-forest-900), #275c4a); border-color: var(--farm-forest-900); box-shadow: 0 12px 28px rgba(23, 63, 53, .23); }
.family-tree-node.is-current .family-node-copy small,
.family-tree-node.is-current .family-node-copy em { color: rgba(255, 255, 255, .62); }
.family-tree-node.is-current .family-node-copy strong { color: var(--farm-white); }
.family-tree-node.is-current .animal-avatar { border-color: rgba(255, 255, 255, .28); box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
.family-tree-node.is-empty { color: var(--farm-subtle); background: rgba(247, 249, 247, .9); border-style: dashed; box-shadow: none; }
.family-node-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.family-node-copy small { color: var(--farm-green-700); font-size: 8px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.family-node-copy strong { margin-top: 2px; overflow: hidden; color: var(--farm-ink); font-size: 10px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.family-node-copy em { margin-top: 2px; overflow: hidden; color: var(--farm-muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.family-connector { position: absolute; z-index: 1; pointer-events: none; }
.family-connector::before,
.family-connector::after { content: ""; position: absolute; background: #b8cbbf; }
.family-connector-wide { top: 109px; left: 16%; right: 16%; height: 66px; border-top: 1px solid #b8cbbf; border-left: 1px solid #b8cbbf; border-right: 1px solid #b8cbbf; }
.family-connector-wide::before { top: 0; left: 50%; width: 1px; height: 66px; }
.family-connector-centre { top: 213px; left: 50%; width: 1px; height: 55px; background: #b8cbbf; }
.family-connector-children { top: 321px; left: 22%; right: 22%; height: 42px; border-top: 1px solid #b8cbbf; border-left: 1px solid #b8cbbf; border-right: 1px solid #b8cbbf; }
.family-connector-children::before { top: -32px; left: 50%; width: 1px; height: 32px; }
.family-more-count { position: relative; z-index: 2; margin: -9px 0 0; color: var(--farm-muted); font-size: 9px; font-weight: 700; }
.family-tree-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 18px; background: #fafbf9; border-top: 1px solid var(--farm-line); }
.family-tree-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.family-tree-summary span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--farm-muted); background: var(--farm-white); border: 1px solid var(--farm-line); border-radius: 8px; font-size: 9px; font-weight: 700; }
.family-tree-summary .ui-icon { width: 13px; height: 13px; color: var(--farm-green-600); }
.family-siblings-menu > summary { padding: 6px 9px; color: var(--farm-green-700); border-radius: 9px; cursor: pointer; font-size: 10px; font-weight: 780; }
.family-siblings-menu > summary:hover { background: var(--farm-green-50); }
.family-siblings-list { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 40; width: 235px; max-height: 260px; padding: 6px; overflow-y: auto; background: var(--farm-white); border: 1px solid var(--farm-line); border-radius: 13px; box-shadow: var(--farm-shadow-md); }
.family-siblings-list a { display: flex; align-items: center; gap: 9px; padding: 7px; color: var(--farm-ink); border-radius: 9px; text-decoration: none; }
.family-siblings-list a:hover { color: var(--farm-ink); background: var(--farm-green-50); }
.family-siblings-list a > span { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.family-siblings-list strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.family-siblings-list small { color: var(--farm-muted); font-size: 8px; }

/* Existing profile record sections refined */
.timeline { display: flex; flex-direction: column; gap: 10px; }
.timeline-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: flex-start; gap: 12px; padding: 14px; background: #fbfcfa; border: 1px solid var(--farm-line); border-radius: 14px; }
.timeline-icon { width: 39px; height: 39px; display: inline-flex; align-items: center; justify-content: center; color: var(--farm-green-700); background: var(--farm-green-100); border-radius: 11px; font-size: 18px; }
.timeline-item > div:nth-child(2) { min-width: 0; }
.timeline-item strong { color: var(--farm-ink); font-size: 12px; font-weight: 760; }
.timeline-item p { margin: 3px 0 0; color: var(--farm-muted); font-size: 11px; line-height: 1.5; }
.timeline-item small { display: block; margin-top: 4px; color: var(--farm-subtle); font-size: 9px; }
.timeline-date { color: var(--farm-subtle); font-size: 9px; font-weight: 710; white-space: nowrap; }
.health-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 18px; }
.health-card { min-height: 92px; display: flex; flex-direction: column; justify-content: center; padding: 15px; }
.health-card span { color: var(--farm-muted); font-size: 10px; font-weight: 780; text-transform: uppercase; letter-spacing: .055em; }
.health-card strong { margin-top: 5px; color: var(--farm-forest-900); font-size: 24px; line-height: 1; }
.profile-finance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.finance-summary-card { min-height: 102px; padding: 17px; background: #fbfcfa; border: 1px solid var(--farm-line); border-radius: 14px; }
.finance-summary-card span { color: var(--farm-muted); font-size: 10px; font-weight: 780; text-transform: uppercase; letter-spacing: .05em; }
.finance-summary-card strong { display: block; margin-top: 8px; color: var(--farm-forest-900); font-size: 22px; }

/* Secondary pages: lists, documents, finance and reports */
.eyebrow {
    color: var(--farm-green-700) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}

.form-hero-icon,
.form-side-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--farm-green-700);
    background: var(--farm-green-100);
    border: 1px solid #cfdfd4;
    box-shadow: none;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 20px;
}

.summary-card,
.finance-kpi-card {
    min-width: 0;
    min-height: 115px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--farm-white);
    border: 1px solid var(--farm-line);
    border-radius: var(--farm-radius-lg);
    box-shadow: var(--farm-shadow-xs);
}

.summary-card > div:not(.summary-icon),
.finance-kpi-card > div:not(.summary-icon) { min-width: 0; display: flex; flex-direction: column; }
.summary-card span:not(.summary-icon),
.finance-kpi-card span:not(.summary-icon) { color: var(--farm-muted); font-size: 10px; font-weight: 760; text-transform: uppercase; letter-spacing: .055em; }
.summary-card strong,
.finance-kpi-card strong { margin-top: 3px; overflow: hidden; color: var(--farm-forest-900); font-size: 24px; font-weight: 820; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.summary-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--farm-green-700); background: var(--farm-green-100); border-radius: 15px; }
.summary-icon .ui-icon { width: 24px; height: 24px; }
.red-bg { color: var(--farm-red) !important; background: var(--farm-red-soft) !important; }
.green-bg { color: var(--farm-green-700) !important; background: var(--farm-green-100) !important; }
.orange-bg { color: var(--farm-amber) !important; background: var(--farm-amber-soft) !important; }

.modern-data-table,
.finance-list-table,
.animal-data-table,
.document-data-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.modern-data-table thead th,
.finance-list-table thead th,
.animal-data-table thead th,
.document-data-table thead th {
    padding: 13px 15px;
    color: var(--farm-muted);
    background: #f7f9f7;
    border-bottom: 1px solid var(--farm-line);
    font-size: 10px;
    font-weight: 830;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

.modern-data-table tbody td,
.finance-list-table tbody td,
.animal-data-table tbody td,
.document-data-table tbody td {
    padding: 13px 15px;
    color: var(--farm-muted);
    border-bottom: 1px solid #e7ece9;
    font-size: 12px;
    vertical-align: middle;
}
.modern-data-table tbody tr:last-child td,
.finance-list-table tbody tr:last-child td,
.animal-data-table tbody tr:last-child td,
.document-data-table tbody tr:last-child td { border-bottom: 0; }
.modern-data-table tbody tr:hover,
.finance-list-table tbody tr:hover,
.animal-data-table tbody tr:hover,
.document-data-table tbody tr:hover { background: var(--farm-green-50); }
.finance-list-wrap,
.list-table-panel { overflow: hidden; border: 1px solid var(--farm-line); border-radius: 14px; }
.amount-col { text-align: right !important; }
.positive-money { color: var(--farm-green-700); font-weight: 800; }

.small-action-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 9px;
    color: var(--farm-green-700);
    background: var(--farm-green-50);
    border: 1px solid var(--farm-line);
    border-radius: 9px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 780;
    text-decoration: none;
}
.small-action-button:hover { color: var(--farm-forest-900); background: var(--farm-green-100); }
.link-button-danger { color: var(--farm-red) !important; background: transparent !important; border: 0 !important; cursor: pointer; font-size: 11px; font-weight: 750; text-decoration: none; }
.link-button-danger:hover { text-decoration: underline; }

.finance-control-panel,
.sticky-filter-panel { padding: 20px; }
.finance-control-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.finance-control-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; }
.finance-filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.finance-filter-chips button { padding: 6px 10px; color: var(--farm-muted); background: var(--farm-green-50); border: 1px solid var(--farm-line); border-radius: 999px; cursor: pointer; font-size: 10px; font-weight: 750; }
.finance-filter-chips button.active { color: var(--farm-white); background: var(--farm-forest-900); border-color: var(--farm-forest-900); }
.finance-period-pill,
.document-type-pill,
.finance-type-pill,
.finance-category-chip { display: inline-flex; align-items: center; padding: 5px 8px; color: var(--farm-green-700); background: var(--farm-green-100); border: 1px solid #cce0d3; border-radius: 999px; font-size: 9px; font-weight: 820; white-space: nowrap; }

.finance-dashboard-grid,
.reports-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; margin-bottom: 18px; }
.finance-chart-panel,
.finance-position-panel { min-width: 0; }
.finance-chart-legend { display: flex; align-items: center; gap: 14px; color: var(--farm-muted); font-size: 10px; }
.legend-swatch { width: 9px; height: 9px; display: inline-block; margin-right: 4px; border-radius: 3px; }
.spending-swatch { background: var(--farm-amber); }
.income-swatch { background: var(--farm-green-600); }
.finance-chart-scroll { overflow-x: auto; padding-bottom: 5px; }
.finance-month-chart { min-width: 650px; min-height: 260px; display: flex; align-items: stretch; gap: 9px; padding: 14px 4px 0; border-bottom: 1px solid var(--farm-line); }
.finance-month-column { min-width: 45px; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.finance-month-values { display: flex; flex-direction: column; align-items: center; color: var(--farm-subtle); font-size: 8px; }
.finance-month-bars { height: 180px; display: flex; align-items: flex-end; gap: 4px; }
.finance-month-bar { width: 13px; min-height: 2px; border-radius: 5px 5px 0 0; }
.spending-month-bar { background: linear-gradient(180deg, #d09a55, var(--farm-amber)); }
.income-month-bar { background: linear-gradient(180deg, #68a078, var(--farm-green-700)); }
.finance-month-column > span { color: var(--farm-muted); font-size: 9px; font-weight: 720; }
.finance-mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.finance-mini-metrics > div { min-height: 86px; display: flex; flex-direction: column; justify-content: center; padding: 13px; background: #fbfcfa; border: 1px solid var(--farm-line); border-radius: 13px; }
.finance-mini-metrics span { color: var(--farm-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.finance-mini-metrics strong { margin-top: 5px; color: var(--farm-forest-900); font-size: 18px; }
.finance-breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.finance-breakdown-list { display: flex; flex-direction: column; gap: 10px; }
.finance-breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.finance-breakdown-row > span { color: var(--farm-muted); font-size: 11px; }
.finance-breakdown-row > strong { color: var(--farm-ink); font-size: 11px; }
.finance-breakdown-bar-wrap { grid-column: 1 / -1; height: 6px; overflow: hidden; background: var(--farm-green-50); border-radius: 999px; }
.finance-breakdown-bar { height: 100%; background: var(--farm-green-600); border-radius: inherit; }
.finance-animal-cost-row { display: grid; grid-template-columns: minmax(120px, .5fr) minmax(150px, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--farm-line); }
.finance-animal-cost-row:last-child { border-bottom: 0; }
.animal-cost-bar { height: 7px; overflow: hidden; background: var(--farm-green-50); border-radius: 999px; }
.animal-cost-bar i { display: block; height: 100%; background: var(--farm-amber); border-radius: inherit; }

.view-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.view-toggle { display: inline-flex; padding: 4px; background: var(--farm-green-50); border: 1px solid var(--farm-line); border-radius: 12px; }
.view-toggle button { min-height: 34px; padding: 6px 10px; color: var(--farm-muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer; font-size: 10px; font-weight: 750; }
.view-toggle button.active { color: var(--farm-forest-900); background: var(--farm-white); box-shadow: var(--farm-shadow-xs); }
.document-search-panel { display: flex; flex-direction: column; gap: 12px; }
.document-filter-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.documents-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.document-modern-card,
.document-large-card { min-width: 0; overflow: hidden; background: var(--farm-white); border: 1px solid var(--farm-line); border-radius: var(--farm-radius-lg); box-shadow: var(--farm-shadow-xs); }
.document-modern-card { transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.document-modern-card:hover { border-color: #c4d3c9; box-shadow: var(--farm-shadow-sm); transform: translateY(-2px); }
.document-modern-content { padding: 17px; }
.document-modern-header,
.document-large-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.document-modern-header h3,
.document-large-header h3 { margin: 5px 0 2px; color: var(--farm-forest-900); font-size: 16px; }
.document-modern-header p,
.document-large-header p { margin: 0; color: var(--farm-muted); font-size: 10px; }
.document-compact-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.document-compact-meta-grid > div { min-width: 0; display: flex; flex-direction: column; padding: 8px; background: #fafbf9; border: 1px solid var(--farm-line); border-radius: 10px; }
.document-compact-meta-grid span { color: var(--farm-muted); font-size: 8px; font-weight: 780; text-transform: uppercase; }
.document-compact-meta-grid strong { margin-top: 3px; overflow: hidden; color: var(--farm-ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.document-modern-notes,
.document-notes { margin-top: 12px; padding: 10px; color: var(--farm-muted); background: var(--farm-green-50); border-radius: 10px; font-size: 10px; line-height: 1.5; }
.document-note-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.document-modern-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 15px; background: #fafbf9; border-top: 1px solid var(--farm-line); }
.document-file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.document-file-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; color: var(--farm-ink); background: #fafbf9; border: 1px solid var(--farm-line); border-radius: 10px; font-size: 10px; }
.document-file-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-detail-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 18px; }
.document-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.document-detail-grid > div { padding: 11px; background: #fafbf9; border: 1px solid var(--farm-line); border-radius: 11px; }
.document-detail-grid span { color: var(--farm-muted); font-size: 9px; font-weight: 760; text-transform: uppercase; }
.document-detail-grid strong { display: block; margin-top: 3px; color: var(--farm-ink); font-size: 11px; }
.document-detail-notes { margin-top: 12px; padding: 13px; color: var(--farm-muted); background: var(--farm-green-50); border-radius: 12px; font-size: 11px; }

.modern-list,
.attention-list { display: flex; flex-direction: column; gap: 8px; }
.modern-list-row,
.attention-list > a,
.attention-list > div { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px; color: var(--farm-ink); background: #fbfcfa; border: 1px solid var(--farm-line); border-radius: 13px; text-decoration: none; }
.modern-list-row:hover,
.attention-list > a:hover { color: var(--farm-ink); background: var(--farm-green-50); }
.row-avatar { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--farm-green-700); background: var(--farm-green-100); border-radius: 12px; font-size: 18px; }
.row-main { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.row-main strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.row-main small { margin-top: 2px; overflow: hidden; color: var(--farm-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.row-side { flex: 0 0 auto; color: var(--farm-muted); font-size: 10px; text-align: right; }
.report-bars { display: flex; flex-direction: column; gap: 14px; }
.finance-bar-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--farm-muted); font-size: 11px; }
.finance-bar-label strong { color: var(--farm-ink); }
.bar-track { height: 9px; overflow: hidden; margin-top: 6px; background: var(--farm-green-50); border-radius: 999px; }
.bar-fill { height: 100%; background: var(--farm-green-600); border-radius: inherit; }
.income-bar { background: var(--farm-green-600); }
.sold-report-bar { background: var(--farm-blue); }
.spending-bar { background: var(--farm-amber); }
.report-stat-list { display: flex; flex-direction: column; gap: 8px; }
.report-stat-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--farm-line); color: var(--farm-muted); font-size: 11px; }
.report-stat-list > div:last-child { border-bottom: 0; }
.report-stat-list strong { color: var(--farm-ink); }

/* Bulk selectors and uploads */
.bulk-animal-list { display: flex; flex-direction: column; gap: 8px; max-height: 430px; padding-right: 4px; overflow-y: auto; }
.bulk-animal-main { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 11px; color: var(--farm-ink); background: #fbfcfa; border: 1px solid var(--farm-line); border-radius: 12px; }
.bulk-animal-main:hover { background: var(--farm-green-50); border-color: #c7d6cc; }
.bulk-animal-main > span:not(.status) { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.bulk-animal-main strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.bulk-animal-main small { color: var(--farm-muted); font-size: 9px; }
.event-type-grid,
.cost-mode-grid,
.bulk-sale-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.event-type-grid label,
.cost-mode-grid label,
.bulk-sale-option-grid label { min-height: 78px; display: flex; align-items: center; gap: 9px; padding: 12px; color: var(--farm-ink); background: #fbfcfa; border: 1px solid var(--farm-line); border-radius: 12px; cursor: pointer; }
.event-type-grid label:has(input:checked),
.cost-mode-grid label:has(input:checked),
.bulk-sale-option-grid label:has(input:checked) { background: var(--farm-green-50); border-color: #92b49e; box-shadow: inset 0 0 0 1px #92b49e; }
.bulk-sale-calc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.calculated-field { background: var(--farm-green-50) !important; }
.upload-action-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.modern-upload-preview,
.modern-pdf-preview { min-height: 90px; display: flex; align-items: center; justify-content: center; padding: 13px; color: var(--farm-muted); background: #fafbf9; border: 1px dashed var(--farm-line-strong); border-radius: 12px; }
.modern-upload-preview img { max-width: 100%; max-height: 260px; border-radius: 9px; }
.health-form-card { padding: 15px; background: #f8fbf9; border: 1px solid var(--farm-line); border-radius: 14px; }
.split-actions { justify-content: space-between; }
.top-gap-small { margin-top: 9px; }
.top-gap-medium { margin-top: 16px; }
.no-margin { margin: 0 !important; }
.notes-after-options { margin-top: 12px; }

/* Responsive behaviour */
@media (max-width: 1380px) {
    .workspace-topbar {
        grid-template-columns: minmax(150px, .45fr) minmax(300px, 560px) minmax(190px, .45fr);
        gap: 15px;
    }

    .action-launcher-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cattle-card-grid,
    .documents-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .animal-profile-snapshot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-snapshot-item:nth-child(3) { border-right: 0; }
    .profile-snapshot-item:nth-child(-n + 3) { border-bottom: 1px solid var(--farm-line); }
    .profile-content-grid { grid-template-columns: minmax(300px, .78fr) minmax(500px, 1.22fr); }
}

@media (max-width: 1180px) {
    :root { --sidebar-width: 258px; }
    .workspace-topbar { grid-template-columns: auto minmax(270px, 1fr) auto; }
    .topbar-context small { display: none; }
    .home-hero { grid-template-columns: minmax(0, 1fr) 390px; }
    .home-hero-copy { padding-left: 36px; }
    .farm-kpi-strip { grid-template-columns: 1fr 1fr; }
    .farm-kpi-item:nth-child(2) { border-right: 0; }
    .farm-kpi-item:nth-child(-n + 2) { border-bottom: 1px solid var(--farm-line); }
    .home-primary-grid,
    .home-secondary-grid { grid-template-columns: 1fr; }
    .herd-composition-visual { grid-template-columns: 180px minmax(0, 1fr); }
    .register-filter-toolbar { grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(130px, .65fr)); }
    .register-view-toggle { grid-column: 1 / -1; width: max-content; }
    .profile-content-grid { grid-template-columns: 1fr; }
    .family-tree-canvas { min-height: 405px; }
    .finance-dashboard-grid,
    .reports-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1040px) {
    :root { --topbar-height: 72px; }

    .app-sidebar {
        width: min(320px, calc(100vw - 48px));
        transform: translateX(-104%);
        transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
        box-shadow: 30px 0 70px rgba(16, 43, 37, .27);
    }

    .sidebar-close { display: inline-flex; }
    .app-shell-v17.sidebar-is-open .app-sidebar { transform: translateX(0); }
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: block;
        visibility: hidden;
        background: rgba(8, 29, 24, .38);
        border: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease, visibility 180ms ease;
        backdrop-filter: blur(2px);
    }
    .app-shell-v17.sidebar-is-open .sidebar-overlay { visibility: visible; opacity: 1; pointer-events: auto; }
    .app-workspace { margin-left: 0; }
    .mobile-menu-button { display: inline-flex; }
    .workspace-topbar { grid-template-columns: minmax(150px, .45fr) minmax(260px, 1fr) auto; padding-inline: 20px; }
    .dashboard-page,
    .dashboard-page.wide-page,
    .finance-page { padding-inline: 24px; }
    .home-hero { grid-template-columns: minmax(0, 1fr) 380px; }
    .login-shell { grid-template-columns: 1fr 410px; }
}

@media (max-width: 860px) {
    body { font-size: 14px; }
    .workspace-topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
    .topbar-context { display: none; }
    .global-search { grid-column: 2; }
    .create-menu > summary span,
    .create-menu > summary .ui-icon:last-child { display: none; }
    .create-menu > summary { width: 44px; padding: 0; }
    .create-menu-popover { position: fixed; top: 72px; right: 14px; width: min(330px, calc(100vw - 28px)); }

    .dashboard-page,
    .dashboard-page.wide-page,
    .finance-page { padding: 21px 17px 94px; }

    .page-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
    .page-heading-actions { width: 100%; justify-content: flex-start; }
    .page-heading-actions > .primary-button { flex: 1; }
    .page-action-menu { flex: 1; }
    .page-action-menu > summary { width: 100%; }
    .page-action-popover { width: min(330px, calc(100vw - 34px)); }

    .home-hero { min-height: 480px; grid-template-columns: 1fr; }
    .home-hero-copy { padding: 34px 28px 225px; }
    .home-hero-copy h1 { font-size: 37px; }
    .herd-landscape { position: absolute; inset: auto 0 0; height: 230px; min-height: 0; }
    .landscape-stat { top: 13px; left: 24px; }
    .landscape-tree { width: 120px; height: 120px; right: 28px; bottom: 36px; }
    .landscape-cow { width: 88px; height: 88px; left: 35px; bottom: 28px; }
    .landscape-calf { width: 57px; height: 57px; left: 124px; bottom: 27px; }
    .landscape-bull { width: 77px; height: 77px; right: 110px; bottom: 23px; }
    .farm-kpi-strip { grid-template-columns: 1fr 1fr; }
    .action-launcher-grid { grid-template-columns: 1fr 1fr; }
    .launcher-action { min-height: 114px; }
    .herd-composition-visual { grid-template-columns: 145px minmax(0, 1fr); gap: 18px; }

    .register-status-tabs { grid-template-columns: 1fr 1fr; }
    .register-status-tab { min-height: 64px; }
    .register-filter-toolbar { grid-template-columns: 1fr 1fr; }
    .register-search-field { grid-column: 1 / -1; }
    .sort-field { grid-column: auto; }
    .register-view-toggle { grid-column: auto; align-self: end; width: 100%; }
    .register-view-toggle button { flex: 1; }
    .cattle-card-grid { grid-template-columns: 1fr; }

    .animal-profile-header { align-items: flex-start; flex-direction: column; }
    .animal-profile-actions { width: 100%; justify-content: flex-start; }
    .animal-profile-actions > .primary-button,
    .animal-profile-actions > .secondary-button,
    .animal-profile-actions > .page-action-menu { flex: 1; }
    .animal-profile-actions > .page-action-menu > summary { width: 100%; }
    .animal-profile-snapshot { grid-template-columns: 1fr 1fr; }
    .profile-snapshot-item:nth-child(n) { border-right: 1px solid var(--farm-line); border-bottom: 1px solid var(--farm-line); }
    .profile-snapshot-item:nth-child(2n) { border-right: 0; }
    .profile-snapshot-item:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
    .profile-tabs-v17 { top: calc(var(--topbar-height) + 4px); }

    .smart-form-layout { grid-template-columns: 1fr; }
    .form-side-panel { position: static; }
    .modern-form-grid,
    .finance-control-grid,
    .document-filter-row,
    .document-detail-layout { grid-template-columns: 1fr 1fr; }
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .documents-grid { grid-template-columns: 1fr; }
    .finance-breakdown-grid { grid-template-columns: 1fr; }
    .health-summary-grid { grid-template-columns: 1fr 1fr; }
    .event-type-grid,
    .cost-mode-grid,
    .bulk-sale-option-grid { grid-template-columns: 1fr 1fr; }

    .mobile-bottom-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: max(9px, env(safe-area-inset-bottom));
        z-index: 75;
        min-height: 62px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        padding: 5px 8px;
        background: rgba(255, 255, 255, .94);
        border: 1px solid var(--farm-line);
        border-radius: 20px;
        box-shadow: 0 16px 45px rgba(16, 43, 37, .2);
        backdrop-filter: blur(16px);
    }
    .mobile-bottom-nav a { position: relative; min-width: 0; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--farm-muted); border-radius: 13px; text-decoration: none; }
    .mobile-bottom-nav a.active { color: var(--farm-green-700); background: var(--farm-green-50); }
    .mobile-bottom-nav .ui-icon { width: 19px; height: 19px; }
    .mobile-bottom-nav small { font-size: 8px; font-weight: 760; }
    .mobile-bottom-nav .mobile-add { overflow: visible; color: var(--farm-forest-900); background: transparent !important; }
    .mobile-bottom-nav .mobile-add > span { width: 43px; height: 43px; display: inline-flex; align-items: center; justify-content: center; margin-top: -24px; color: var(--farm-white); background: var(--farm-green-700); border: 5px solid var(--farm-white); border-radius: 15px; box-shadow: 0 8px 18px rgba(45, 106, 79, .28); }
    .mobile-bottom-nav .mobile-add > span .ui-icon { width: 21px; height: 21px; }
}

@media (max-width: 640px) {
    .workspace-topbar { min-height: 68px; padding: 10px 12px; }
    .global-search input { height: 44px; padding-left: 40px; font-size: 12px; }
    .global-search > .ui-icon { left: 13px; }
    .attention-topbar-button { display: none; }
    .topbar-actions { gap: 0; }

    .login-page-v17 { padding: 0; }
    .login-shell { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
    .login-visual { min-height: 270px; padding: 25px 24px; }
    .login-visual-copy { margin-top: 36px; }
    .login-visual-copy h1 { font-size: 36px; }
    .login-visual-copy p { display: none; }
    .login-pasture { opacity: .72; transform: scale(.78); transform-origin: bottom right; }
    .login-form-panel { padding: 30px 23px 40px; }

    .dashboard-page,
    .dashboard-page.wide-page,
    .finance-page { padding-inline: 13px; }
    .page-heading h1 { font-size: 33px; }

    .home-hero { min-height: 520px; border-radius: 23px; }
    .home-hero-copy { padding: 29px 21px 245px; }
    .home-hero-copy h1 { font-size: 34px; }
    .home-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .home-hero-actions .primary-button { grid-column: 1 / -1; }
    .home-hero-actions .primary-button,
    .home-hero-actions .secondary-button { width: 100%; }
    .farm-kpi-strip { grid-template-columns: 1fr; }
    .farm-kpi-item:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--farm-line); }
    .farm-kpi-item:last-child { border-bottom: 0; }
    .farm-kpi-item { min-height: 87px; }
    .action-launcher,
    .attention-workbench,
    .herd-composition-panel,
    .camp-panel,
    .activity-panel,
    .recent-cattle-panel { padding: 21px 18px; }
    .action-launcher-grid { grid-template-columns: 1fr; }
    .launcher-action { min-height: 78px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
    .launcher-action > .ui-icon { margin: 0; }
    .herd-composition-visual { grid-template-columns: 1fr; justify-items: center; }
    .composition-legend { width: 100%; }
    .priority-item { grid-template-columns: auto minmax(0, 1fr) auto; }
    .priority-meta { display: none; }
    .section-heading-row { align-items: flex-start; flex-direction: column; gap: 9px; }

    .register-status-tabs { grid-template-columns: 1fr 1fr; }
    .register-status-tab { padding: 8px 9px; }
    .status-tab-icon { width: 34px; height: 34px; }
    .register-filter-toolbar { grid-template-columns: 1fr; padding-inline: 14px; }
    .register-search-field,
    .filter-select-field,
    .sort-field,
    .register-view-toggle { grid-column: 1; }
    .register-result-summary { padding-inline: 15px; }
    .cattle-card-facts { grid-template-columns: 1fr; }
    .cattle-card-facts > div { border-bottom: 1px solid var(--farm-line); }
    .cattle-card-facts > div:last-child { border-bottom: 0; }

    .animal-profile-header { padding: 20px; }
    .animal-profile-identity { align-items: flex-start; gap: 15px; }
    .animal-avatar-xlarge { width: 82px; height: 82px; border-radius: 21px; }
    .animal-profile-title h1 { font-size: 29px; }
    .animal-profile-meta span { width: 100%; }
    .animal-profile-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .animal-profile-actions > .primary-button { grid-column: 1 / -1; }
    .animal-profile-snapshot { grid-template-columns: 1fr; }
    .profile-snapshot-item:nth-child(n) { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--farm-line); }
    .profile-snapshot-item:last-child { border-bottom: 0; }
    .profile-tabs-v17 .profile-tab { padding-inline: 11px; }
    .detail-list { grid-template-columns: 1fr; }
    .detail-list > div:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--farm-line); }
    .detail-list > div:last-child { border-bottom: 0; }
    .family-tree-heading,
    .family-tree-footer { align-items: flex-start; flex-direction: column; }
    .family-tree-canvas { min-width: 680px; }

    .form-hero,
    .finance-hero,
    .documents-hero,
    .reports-hero,
    .register-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 22px 19px; border-radius: 22px; }
    .modern-form-grid,
    .finance-control-grid,
    .document-filter-row,
    .document-detail-layout,
    .document-detail-grid,
    .summary-grid,
    .health-summary-grid,
    .profile-finance-grid,
    .finance-mini-metrics,
    .event-type-grid,
    .cost-mode-grid,
    .bulk-sale-option-grid,
    .bulk-sale-calc-grid { grid-template-columns: 1fr; }
    .modern-form-actions { position: static; flex-direction: column-reverse; padding: 15px; }
    .modern-form-actions .primary-button,
    .modern-form-actions .secondary-button,
    .modern-form-actions .danger-button { width: 100%; }
    .finance-animal-cost-row { grid-template-columns: 1fr auto; }
    .finance-animal-cost-row .animal-cost-bar { grid-column: 1 / -1; }

    .responsive-table-wrap { margin-inline: -1px; }
    .timeline-item { grid-template-columns: auto minmax(0, 1fr); }
    .timeline-date { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .app-sidebar,
    .workspace-topbar,
    .mobile-bottom-nav,
    .page-heading-actions,
    .animal-profile-actions,
    .modern-form-actions { display: none !important; }
    .app-workspace { margin: 0 !important; }
    .dashboard-page,
    .dashboard-page.wide-page,
    .finance-page { width: 100%; padding: 0; }
    .panel,
    .panel-clean { box-shadow: none; break-inside: avoid; }
}

.file-row-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--farm-blue);
    background: var(--farm-blue-soft);
    border-radius: 9px;
}

.file-row-icon .ui-icon {
    width: 16px;
    height: 16px;
}