/* ============================================================
   DocDairy overrides — loaded after theme.css to re-skin the
   (Zerion/AdminLTE) theme in dairy green and brand the sidebar.
   ============================================================ */

:root {
    /* Dairy green accent replaces the stock violet/blue gradient */
    --gradient-primary: linear-gradient(135deg, #1d6f5c 0%, #2e9e7f 55%, #7bd0b0 100%);
    --brand-teal: #1d6f5c;
}

[data-bs-theme="dark"] {
    --bs-link-color: #7bd0b0;
    --bs-link-hover-color: #a7e3cd;
}

[data-bs-theme="light"] {
    --bs-link-color: #1d6f5c;
    --bs-link-hover-color: #155446;
}

/* Sidebar brand: the round cow emblem (logo-mark.png) on a white rounded chip so it
   reads on the dark sidebar. The <img> IS the chip — fixed size so it never blows up. */
.sidebar-brand .brand-logo {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    object-fit: contain;
    background: #fff;
    padding: 3px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* Login logo: a clean white badge with a soft green ring — professional and prominent. */
.auth-logo {
    background: #fff;
    padding: 16px;
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 50%;
    border: 1px solid rgba(15, 40, 33, 0.06);
    box-shadow: 0 0 0 6px rgba(29, 111, 92, 0.06),
                0 18px 40px -16px rgba(15, 40, 33, 0.40);
}

/* Active sidebar item uses the green gradient */
.sidebar-menu .nav-link.active {
    background: var(--gradient-primary);
    color: #fff;
}

/* Profile header avatar */
.cow-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex: 0 0 auto;
}

/* Cow profile picture (first photo, or the default cow image). */
.cow-avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--surface-border);
}

/* ---------- Professional polish ---------- */

/* Consistent control heights so buttons line up with the inputs beside them.
   theme.css gives .btn a fixed padding (0.55rem) that (a) ignores .btn-sm and
   (b) differs from the form-control padding (0.7rem), so a button always ended
   up a different height than the field next to it. app.css loads last, so here
   we re-align button padding/line-height to the inputs at BOTH sizes. Inputs and
   buttons that share a padding-y + line-height + border render the same height. */
.btn { padding: 0.7rem 1.1rem; line-height: 1.5; }
.btn-sm,
.form-control-sm,
.form-select-sm { padding: 0.4rem 0.7rem; font-size: 0.875rem; line-height: 1.5; }
.input-group .btn { line-height: 1.5; }

/* A button column that sits next to labelled fields: this spacer reserves the
   label's height so the button aligns with the inputs (not taller/shorter). */
.field-spacer { display: block; height: 1.5em; margin-bottom: .25rem; }
@media (max-width: 767.98px) { .field-spacer { display: none; } }

/* Cards: cleaner, lighter, consistent */
.card { border-radius: 14px; }
.card-header { font-weight: 600; background: transparent; }

/* Tables: tidy header + comfortable rows */
.table > thead th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-secondary);
    border-bottom-width: 1px;
}
.table > tbody td { vertical-align: middle; }
.table-toolbar { margin-top: -0.25rem; }

/* Green focus ring on inputs/selects to match the brand */
.form-control:focus,
.form-select:focus {
    border-color: #2e9e7f;
    box-shadow: 0 0 0 0.2rem rgba(29, 111, 92, 0.18);
}

/* Page content header spacing */
.app-content-header { padding-block: 0.5rem; }
.app-content-header h3 { font-weight: 700; }

/* ---------- Denser layout — save real estate ----------
   Bootstrap/AdminLTE default to generous 1.5rem gaps and card padding. We tighten the
   whole vertical rhythm to a compact ~8–12px scale (the industry norm for data-dense
   dashboards) so pages show more without feeling cramped. This is applied globally and
   should be the baseline for new components too — prefer these gaps over ad-hoc large
   margins. Scoped to the main content so login/auth screens are untouched. */
.app-content { padding-top: 0.25rem; padding-bottom: 1rem; }
.app-content > .container-fluid,
.app-content-header > .container-fluid { padding-left: 1.1rem; padding-right: 1.1rem; }
.app-content .card-body { padding: 0.85rem 1rem; }
.app-content .card-header { padding-top: 0.55rem; padding-bottom: 0.55rem; }
/* Collapse the oversized spacing utilities to the compact scale (0.75rem major gap). */
.app-content .mb-4, .app-content .mb-5 { margin-bottom: 0.75rem !important; }
.app-content .mt-4, .app-content .mt-5 { margin-top: 0.75rem !important; }
.app-content .my-4, .app-content .my-5 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.app-content .mb-3 { margin-bottom: 0.6rem !important; }
.app-content .mt-3 { margin-top: 0.6rem !important; }
.app-content .g-4 { --bs-gutter-y: 0.75rem; --bs-gutter-x: 0.75rem; }
.app-content .g-3 { --bs-gutter-y: 0.6rem; --bs-gutter-x: 0.6rem; }
/* Rein in large block padding (empty states / "not applicable" panels don't need 3rem). */
.app-content .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.app-content .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.app-content .p-5 { padding: 1.5rem !important; }
.app-content .p-4 { padding: 1rem !important; }
/* Forms: trim the label→field gap so multi-field cards (e.g. feeding plans) stay compact. */
.app-content .form-label { margin-bottom: 0.2rem; }
.app-content form .text-muted.small { margin-bottom: 0.5rem; }
/* Bootstrap gives .alert a 1rem bottom margin that the compact scale missed, so info/notice banners
   left a big gap above the first card. Bring alerts into the ~8-12px scale, and drop the trailing
   margin on a card body's last <p> so note text never pads the bottom of its card. */
.app-content .alert { margin-bottom: 0.6rem; }
.app-content .card-body > p:last-child { margin-bottom: 0; }

/* Status / attribute helpers */
.row-due { background: rgba(245, 158, 11, 0.10); }
.row-overdue { background: rgba(220, 53, 69, 0.12); }
.row-ready { background: rgba(29, 111, 92, 0.10); }

/* Photo gallery thumbnails */
.photo-thumb { aspect-ratio: 1; object-fit: cover; width: 100%; cursor: zoom-in; transition: transform .12s ease; }
.photo-thumb:hover { transform: scale(1.03); }

/* Meta line on records */
.record-meta { font-size: .75rem; color: var(--text-muted); }

/* Keep the sidebar always visible while a long page scrolls. Sticky inside the AdminLTE
   CSS grid proved unreliable, so on desktop we take the sidebar out of flow (position:fixed,
   full viewport height) and reserve its width as a fixed grid column so nothing shifts under it.
   inset-inline-start handles both LTR (left) and RTL (right) automatically. */
@media (min-width: 992px) {
    .app-wrapper { grid-template-columns: var(--lte-sidebar-width) 1fr !important; }
    .app-sidebar {
        position: fixed !important;
        top: 0;
        inset-inline-start: 0;
        height: 100vh !important;
        max-height: none !important;
        width: var(--lte-sidebar-width);
        z-index: 1035;
        overflow: hidden;
    }
    /* Collapsed via the hamburger: reclaim the space (AdminLTE's negative margin slides it away). */
    .sidebar-collapse .app-wrapper { grid-template-columns: 0 1fr !important; }

    /* Fixed app-shell: cap the wrapper at the viewport height so the header stays put and only
       .app-main scrolls. This is what actually lets the top bar pin — position:sticky only sticks
       relative to its own scroll container, and before this .app-main grew with its content (the
       whole window scrolled), so the sticky top bar had nothing to stick to. */
    html, body { height: 100%; overflow: hidden; }
    .app-wrapper { height: 100vh; min-height: 100vh; overflow: hidden; }
    .app-main { overflow-y: auto; overflow-x: hidden; min-height: 0; }
}
/* Turn the scroll area into a flex column so the Help item pins to the bottom. */
.app-sidebar .sidebar-wrapper { display: flex; flex-direction: column; }
.app-sidebar .sidebar-wrapper > nav { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.app-sidebar .sidebar-menu { flex: 1 1 auto; }
.sidebar-help { border-top: 1px solid var(--surface-border); margin-top: auto; }

/* Line the sidebar brand bar up with the top header bar (same 3.5rem height + centred). */
.sidebar-brand {
    height: calc(3.5rem + 1px);
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

/* Flag glyph in the language menu */
.lang-flag { display: inline-block; width: 1.3em; text-align: center; }

/* Notification bell */
.app-header .nav-link { position: relative; }
.app-header .notif-badge-count { position: absolute; top: 0; right: -1px; font-size: .58rem; padding: .12rem .3rem; }
html[dir="rtl"] .app-header .notif-badge-count { right: auto; left: -1px; }
.notif-menu { width: 330px; max-height: 72vh; overflow-y: auto; }
.notif-item.notif-unread { background: rgba(29, 111, 92, 0.07); }
.notif-unread-row { background: rgba(29, 111, 92, 0.05); }

/* "soon" badge on a sidebar item (e.g. Accounting). AdminLTE pins .nav-badge
   absolutely to the right (right:1rem !important), which in RTL sits on top of
   the right-aligned label. Flip it to the left edge for RTL so it never overlaps. */
.sidebar-menu .nav-link > .nav-badge { font-size: .62rem; text-transform: uppercase; }
html[dir="rtl"] .sidebar-menu .nav-link > .nav-badge,
html[dir="rtl"] .sidebar-menu .nav-link > p > .nav-badge {
    right: auto !important;
    left: 1rem !important;
}

/* Treeview expand arrow (e.g. the Health submenu): AdminLTE also pins it to the right
   with no RTL handling. In RTL move it to the left edge and mirror its direction —
   collapsed points left (toward the edge), open points down (AdminLTE's rotate wins). */
html[dir="rtl"] .sidebar-menu .nav-link > .nav-arrow,
html[dir="rtl"] .sidebar-menu .nav-link > p > .nav-arrow {
    right: auto !important;
    left: 1rem !important;
    transform: translateY(-50%) rotate(180deg);
}
html[dir="rtl"] .sidebar-menu .menu-open > .nav-link .nav-arrow {
    transform: translateY(-50%) rotate(90deg);
}

/* Inline "record calving" disclosure inside the breeding table */
.calving-capture > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .3rem; }
.calving-capture > summary::-webkit-details-marker { display: none; }

/* Inline edit disclosure (e.g. correcting a milk record) — summary looks like a button, no marker */
.inline-edit > summary { cursor: pointer; list-style: none; }
.inline-edit > summary::-webkit-details-marker { display: none; }
.inline-edit[open] > summary { margin-bottom: .25rem; }

/* Brand: keep a clear gap between the logo and the name in both directions. */
.sidebar-brand .brand-link { gap: .5rem; }
.sidebar-brand .brand-logo { margin: 0 !important; }

/* Login password show/hide control reads as a clickable affordance. */
.input-group .pwd-toggle { cursor: pointer; }

/* Cow-profile collapsible sections (profile-collapse.js). Click the header to fold a section;
   the chevron shows state and sits at the trailing edge (RTL-aware). */
.card.dd-collapsible > .card-header {
    cursor: pointer;
    position: relative;
    padding-inline-end: 2.1rem;
}
.card.dd-collapsible > .card-header .dd-collapse-chevron {
    position: absolute;
    inset-inline-end: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.15s ease;
    opacity: 0.6;
}
.card.dd-collapsed > .card-header .dd-collapse-chevron {
    transform: translateY(-50%) rotate(-90deg);
}
/* RTL: the collapsed chevron must point the other way (toward the trailing edge, which is now the
   left) so it still reads as "expand". Without this it points the wrong direction in fa/ar. */
html[dir="rtl"] .card.dd-collapsed > .card-header .dd-collapse-chevron {
    transform: translateY(-50%) rotate(90deg);
}
.card.dd-collapsed > .card-body,
.card.dd-collapsed > .card-footer {
    display: none;
}

/* ---------- AI chat bubbles (ai/chat.html) ----------
   User turns hug the trailing edge, assistant turns the leading edge; logical
   properties (inline-start/end, margin-inline) flip automatically under RTL. */
.ai-chat-log { display: flex; flex-direction: column; gap: .5rem; max-height: 55vh; overflow-y: auto; }
.ai-bubble {
    max-width: 82%;
    padding: .5rem .8rem;
    border-radius: 14px;
    line-height: 1.35;
    font-size: .92rem;
    white-space: pre-wrap;
}
.ai-bubble.assistant {
    align-self: flex-start;
    background: var(--surface-muted, rgba(127, 127, 127, .12));
    border-end-start-radius: 4px;
}
.ai-bubble.user {
    align-self: flex-end;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-end-end-radius: 4px;
}
/* "Assistant is thinking…" indicator shown while the reply is in flight. */
.ai-bubble.ai-typing { display: inline-flex; align-items: center; gap: .4rem; opacity: .85; }
.ai-dots { display: inline-flex; gap: 3px; }
.ai-dots > span {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: .35;
    animation: aiDot 1s infinite ease-in-out;
}
.ai-dots > span:nth-child(2) { animation-delay: .15s; }
.ai-dots > span:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 60%, 100% { transform: translateY(0); opacity: .3; } 30% { transform: translateY(-3px); opacity: .9; } }

/* Compact photo gallery: small fixed thumbnails with caption + date. */
.photo-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.photo-card { width: 104px; }
.photo-card .photo-thumb {
    width: 104px; height: 104px; object-fit: cover; border-radius: 10px;
    border: 1px solid var(--surface-border); cursor: zoom-in; transition: transform .12s ease;
}
.photo-card .photo-thumb:hover { transform: scale(1.04); }
.photo-card .photo-cap { font-size: .72rem; line-height: 1.2; margin-top: .25rem; }
.photo-card .photo-date { font-size: .68rem; color: var(--text-muted); }

/* ---------- Sidebar: fit full menu labels, never truncate ----------
   Widen the sidebar and let labels wrap instead of being clipped with an
   ellipsis (AdminLTE's default is nowrap + text-overflow:ellipsis). This keeps
   long items like "Welfare & hoof health" and RTL fa/ar labels fully readable. */
:root { --lte-sidebar-width: 16.75rem; }
.sidebar-menu .nav-link { align-items: flex-start; }
.sidebar-menu .nav-link > p {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
    /* reserve room for the absolutely-positioned collapse arrow / "soon" badge */
    padding-inline-end: 1.25rem;
}

/* ---------- Animal flag colours ---------- */
.flag-RED { background: #dc3545 !important; color: #fff !important; }
.flag-ORANGE { background: #fd7e14 !important; color: #fff !important; }
.flag-YELLOW { background: #ffc107 !important; color: #000 !important; }
.flag-GREEN { background: #198754 !important; color: #fff !important; }
.flag-BLUE { background: #0d6efd !important; color: #fff !important; }
.flag-PURPLE { background: #6f42c1 !important; color: #fff !important; }
.flag-GRAY { background: #6c757d !important; color: #fff !important; }

/* ---------- Top category menu bar ---------- */
.app-topmenu {
    /* Opaque raised surface: it sits sticky over scrolling content, so a translucent --surface
       let text bleed through. --bg-elevated is fully opaque in both themes. A stronger border +
       shadow make the strip read as a distinct navigation bar rather than blending into content. */
    background: var(--bg-elevated);
    border-bottom: 2px solid var(--surface-border-strong);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.app-topmenu .container-fluid { padding-top: .45rem; padding-bottom: .45rem; }
/* Hide the horizontal scrollbar but keep it scrollable on small screens. */
.app-topmenu .container-fluid::-webkit-scrollbar { height: 0; }
.topmenu-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    padding: .4rem .9rem;
    border-radius: 10px;
    /* High-contrast, semibold labels so the bar is clearly legible in both light and dark themes. */
    color: var(--text-primary);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.topmenu-link i { color: var(--text-secondary); }
.topmenu-link:hover {
    background: var(--surface-2, rgba(0, 0, 0, .06));
    color: var(--text-primary);
}
.topmenu-link:hover i { color: var(--text-primary); }
/* Active category: filled brand pill, clearly dominant over the (now bolder) inactive items. */
.topmenu-link.active {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 91, 219, 0.35);
}
.topmenu-link.active i { color: #fff !important; }

/* KPI target editor: keep the numeric bound inputs compact. */
.kpi-target-input { width: 8.5rem; }

/* ---------- Print / PDF ----------
   Turn any page into a clean printable document: drop the app chrome (sidebar, header, top bar,
   buttons, toolbars) and lay the content out full-width in black-on-white, so a printed report is
   a proper document — not a screenshot of the screen. The .print-only document header (farm name,
   title, date) is revealed; .no-print elements are removed. */
.print-only { display: none; }
@media print {
    .app-sidebar, .app-header, .app-topmenu, .app-footer, .app-content-header,
    .no-print, .table-toolbar, .table-pagination,
    .btn, .navbar, .sidebar-help { display: none !important; }

    /* Undo the fixed app-shell so content flows and paginates across pages. */
    html, body, .app-wrapper, .app-main {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
    }
    .app-wrapper { grid-template-columns: 1fr !important; }
    .app-content, .app-content > .container-fluid { padding: 0 !important; margin: 0 !important; }

    /* Force readable black-on-white (the app's default theme is dark). */
    body, .card, .card-body, .card-header, table, th, td, p, span, div, h1, h2, h3, h4, small {
        color: #000 !important;
        background-color: transparent !important;
    }

    /* Cards become clean bordered blocks that don't split across a page break. */
    .card {
        border: 1px solid #999 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 12pt !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .card-header { border-bottom: 1px solid #999 !important; font-weight: 700; }

    /* Report tables: full width, ruled, with the header repeated on every printed page. */
    .report-table-wrap { max-height: none !important; overflow: visible !important; }
    table { width: 100% !important; border-collapse: collapse !important; }
    thead { display: table-header-group; }
    tr { page-break-inside: avoid; }
    th, td { border: 1px solid #bbb !important; padding: 3pt 5pt !important; }
    .badge { border: 1px solid #999 !important; padding: 0 2pt !important; font-weight: 600; }

    /* Document header shown only on the printout. */
    .print-only { display: block !important; }
    .report-doc-header {
        border-bottom: 2px solid #000;
        margin-bottom: 12pt;
        padding-bottom: 6pt;
    }
    .report-doc-header .rdh-farm { font-size: 15pt; font-weight: 700; }
    .report-doc-header .rdh-title { font-size: 11pt; }
    .report-doc-header .rdh-meta { font-size: 9pt; }

    @page { margin: 14mm; }
}