/* LayerTrack Pro - shared styles */

:root {
    --ltp-primary: #1d6f42;
    --ltp-primary-dark: #14522f;
    --ltp-sidebar-bg: #ffffff;
    --ltp-sidebar-border: #eaece9;
    --ltp-sidebar-text: #5b655f;
    --ltp-sidebar-text-hover: #14532d;
    --ltp-sidebar-active-bg: #e9f6ee;
    --ltp-sidebar-active-text: #14663a;
    --ltp-sidebar-width: 260px;
    --ltp-navbar-height: 64px;
    --ltp-bg: #f6f7f6;
}

body {
    background-color: var(--ltp-bg);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* ===== Global motion polish ===== */
@keyframes ltpFadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.main-wrapper {
    animation: ltpFadeInUp 0.35s ease both;
}

a, .btn, .nav-link, .stat-icon, .form-control, .form-select {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease, filter 0.15s ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--ltp-primary);
    border-color: var(--ltp-primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--ltp-primary-dark);
    border-color: var(--ltp-primary-dark);
    box-shadow: 0 4px 12px rgba(29, 111, 66, 0.3);
}

/* ===== Sidebar ===== */
.sidebar {
    /* Bootstrap's ".offcanvas.offcanvas-start" (two classes, unconditional - no breakpoint) sets width:400px
       via --bs-offcanvas-width and outranks this single-class selector on specificity alone, at every screen
       size, regardless of load order - hence !important here. Same story for border-right: Bootstrap's
       ".offcanvas-lg" rule zeroes --bs-offcanvas-border-width at >=992px, and that same 2-class selector then
       wins the border-right property outright regardless of the (now-zero) custom property value. */
    width: var(--ltp-sidebar-width) !important;
    background-color: var(--ltp-sidebar-bg);
    color: var(--ltp-sidebar-text);
    border-right: 1px solid var(--ltp-sidebar-border) !important;
}

.sidebar .offcanvas-header {
    padding: 1rem 1rem 0.5rem 1rem;
}

.sidebar-brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ltp-primary-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-brand i {
    display: inline-block;
    animation: eggBounce 3s ease-in-out infinite;
}

.sidebar-nav {
    padding: 0.5rem 0.75rem;
}

.sidebar-nav-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    /* Bootstrap's base ".nav" class sets flex-wrap:wrap unconditionally; combined with flex-column and this
       element's now-bounded height (flex:1 1 auto inside a fixed-height sidebar), that wrap would flow
       overflowing items into a second column instead of just scrolling vertically. */
    flex-wrap: nowrap !important;
}

/* ----- Collapsible parent/child groups (Farm Operations, Finance & Reports) -----
   Only the group containing the current page auto-expands (see Site.Master.cs's IsSidebarGroupExpanded) -
   everything else starts collapsed, so the list stays short instead of showing all ~16 links at once. */
.sidebar-parent-link {
    cursor: pointer;
}

.sidebar-parent-link .sidebar-chevron {
    font-size: 0.75rem;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.sidebar-parent-link[aria-expanded="true"] .sidebar-chevron {
    transform: rotate(180deg);
}

.sidebar-parent-link[aria-expanded="true"] {
    background-color: #f4f6f4;
}

.sidebar-parent-link.active-parent {
    color: var(--ltp-sidebar-active-text);
}

.sidebar-submenu {
    padding: 0.15rem 0 0.35rem 0;
}

.sidebar-submenu .nav-link {
    font-size: 0.87rem;
    padding-left: 2.15rem;
}

.sidebar-submenu .nav-link i {
    font-size: 0.92rem;
}

.sidebar-submenu .nav-link.active::before {
    left: -0.75rem;
}

.sidebar-nav .nav-link {
    position: relative;
    color: var(--ltp-sidebar-text);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.94rem;
    transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}

.sidebar-nav .nav-link i {
    font-size: 1.05rem;
    width: 1.2rem;
    text-align: center;
    transition: transform 0.18s ease;
}

.sidebar-nav .nav-link:hover {
    background-color: #f4f6f4;
    color: var(--ltp-sidebar-text-hover);
    padding-left: 1.1rem;
}

.sidebar-nav .nav-link:hover i {
    transform: scale(1.12);
}

.sidebar-nav .nav-link.active {
    background-color: var(--ltp-sidebar-active-bg);
    color: var(--ltp-sidebar-active-text);
    font-weight: 600;
}

.sidebar-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    border-radius: 0 4px 4px 0;
    background: var(--ltp-primary);
}

.sidebar-nav .nav-link.disabled {
    color: #b8beb9;
    pointer-events: none;
}

.sidebar-user-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.9rem;
    border-top: 1px solid var(--ltp-sidebar-border);
    background: #fafbfa;
}

.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--ltp-sidebar-active-bg);
    color: var(--ltp-sidebar-active-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.sidebar-user-info {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-user-name {
    color: #1d2939;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    color: var(--ltp-text-muted, #667085);
    font-size: 0.72rem;
}

.sidebar-logout-btn {
    color: #8a938d;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.sidebar-logout-btn:hover {
    background-color: #eef1ee;
    color: var(--ltp-primary-dark);
}

@media (min-width: 992px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1030;
        /* Bootstrap's own ".offcanvas-lg" breakpoint reveal only fires when the offcanvas is nested inside a
           ".navbar-expand-lg" wrapper - used standalone (as here), the base ".offcanvas" class keeps it
           permanently hidden/translated off-screen until JS adds ".show", which the (deliberately lg-hidden)
           hamburger button can never trigger at this width. Force it visible/static ourselves instead. */
        visibility: visible !important;
        transform: none !important;
        display: flex !important;
        /* Bootstrap's ".offcanvas-lg" >=992px rule also forces the background to transparent (assuming it's
           being used inside a navbar, where the navbar supplies the background) and hides the offcanvas
           header entirely - both need to be restored for a standalone sidebar. */
        background-color: var(--ltp-sidebar-bg) !important;
    }

    .sidebar .offcanvas-header {
        display: flex !important;
    }

    .sidebar .offcanvas-body {
        background-color: transparent !important;
        /* Bootstrap's ".offcanvas-lg" >=992px rule sets flex-grow:0 (it expects the body to be a short strip
           inside a navbar) - here it needs to fill the full remaining sidebar height so the nav list can
           scroll independently while the user-footer stays pinned at the bottom. */
        flex-grow: 1 !important;
    }
}

/* ===== Top navbar ===== */
.top-navbar {
    height: var(--ltp-navbar-height);
    background-color: #fff;
    border-bottom: 1px solid var(--ltp-sidebar-border, #eaece9);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.btn-sidebar-toggle {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: var(--ltp-primary-dark);
}

.navbar-farm-name {
    font-weight: 600;
    color: var(--ltp-primary-dark);
    font-size: 1.05rem;
}

.farm-selector-wrap {
    min-width: 240px;
}

.user-menu-toggle {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.18s ease;
}

.user-menu-toggle:hover {
    color: var(--ltp-primary);
}

.dropdown-menu {
    animation: ltpFadeInUp 0.15s ease both;
}

.table-hover tbody tr {
    transition: background-color 0.15s ease;
}

@media (min-width: 992px) {
    .top-navbar {
        margin-left: var(--ltp-sidebar-width);
    }
}

/* On phones the navbar has to fit: hamburger + brand + farm selector + user menu, all on one fixed-height
   sticky row. The farm selector's 240px minimum alone is wider than a small phone screen, so it and the two
   text labels either get cut off or force the whole page to scroll horizontally. Shrink and drop labels
   instead of trying to cram everything in. */
@media (max-width: 575.98px) {
    .top-navbar {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .navbar-farm-name {
        display: none;
    }
    .farm-selector-wrap {
        min-width: 0;
        width: auto;
        flex: 1 1 auto;
    }
    .farm-selector-wrap .select2-container {
        width: 100% !important;
    }
    .top-navbar .ms-auto {
        gap: 0.5rem !important;
        min-width: 0;
        flex: 1 1 auto;
    }
    .user-menu-toggle span {
        display: none;
    }
}

/* Safety net: any flex row that doesn't explicitly opt out of wrapping (report/action button toolbars,
   filter bars, etc.) wraps onto multiple lines on narrow screens instead of overflowing and forcing the
   whole page to scroll horizontally. Never harmful when content already fits. */
@media (max-width: 575.98px) {
    .d-flex:not(.flex-nowrap) {
        flex-wrap: wrap;
    }
    .d-flex.justify-content-end:not(.flex-nowrap) {
        justify-content: flex-start !important;
    }
}

/* ===== Main content area ===== */
.main-wrapper {
    padding: 1.5rem;
}

/* ===== Shared Share-via-WhatsApp button (Prompt 17) ===== */
.btn-whatsapp {
    background-color: #25D366;
    border-color: #25D366;
    color: #fff;
}
.btn-whatsapp:hover {
    background-color: #1ebe5a;
    border-color: #1ebe5a;
    color: #fff;
}

/* ===== Print (used by every report's Print button) ===== */
@media print {
    .sidebar, .top-navbar, .btn-sidebar-toggle, .no-print {
        display: none !important;
    }
    .main-wrapper {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    body {
        background: #fff !important;
    }
    .dash-card {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }
}

@media (min-width: 992px) {
    .main-wrapper {
        margin-left: var(--ltp-sidebar-width);
    }
}

.page-header {
    animation: ltpFadeInUp 0.4s ease both;
}

.page-title {
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.15rem;
}

.page-title i {
    color: var(--ltp-primary);
}

/* Any card-style container reused across pages (Dashboard, reports, module screens) gets a gentle hover lift
   and a staggered entrance so pages feel less static without touching layout. */
.dash-card, .health-card, .feed-card, .ab-card, .cr-balance-card, .cr-stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: ltpFadeInUp 0.4s ease both;
}

.dash-card:hover, .ab-card:hover, .cr-balance-card:hover, .cr-stat-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* ===== Dashboard stat cards ===== */
.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: ltpFadeInUp 0.45s ease both;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.stat-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background-color: var(--ltp-primary);
    transition: transform 0.25s ease;
}

.stat-card:hover .stat-icon {
    transform: scale(1.08) rotate(-4deg);
}

.stat-card-mortality .stat-icon {
    background-color: #c0392b;
}

.stat-card-flocks .stat-icon {
    background-color: #2980b9;
}

.stat-card-stock .stat-icon {
    background-color: #d68910;
}

.stat-label {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.2rem;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #212529;
}

/* ===== Login page ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes floatY {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(6deg); }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28); }
    50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

@keyframes eggBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-4deg); }
}

@keyframes shakeX {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.login-spin {
    display: inline-block;
    animation: spin 0.8s linear infinite;
}

html, body.login-body {
    height: 100%;
}

.login-body {
    background: #f4f6f8;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

.login-shell {
    display: flex;
    min-height: 100vh;
}

/* ----- Left branding panel (hidden on narrow screens) ----- */
.login-brand-panel {
    position: relative;
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3rem;
    background: linear-gradient(135deg, #14532d 0%, #1d6f42 55%, #2e8b57 100%);
    background-size: 220% 220%;
    animation: gradientShift 14s ease infinite;
}

.login-brand-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.decor-egg, .decor-feather, .decor-coop {
    position: absolute;
    color: rgba(255, 255, 255, 0.14);
    animation: floatY 6.5s ease-in-out infinite;
}

.decor-egg-1 { top: 10%; left: 10%; font-size: 4rem; animation-delay: 0s; }
.decor-egg-2 { bottom: 14%; left: 18%; font-size: 2.4rem; animation-delay: 1.4s; }
.decor-egg-3 { top: 52%; right: 8%; font-size: 3.4rem; animation-delay: 2.8s; }
.decor-feather-1 { top: 22%; right: 18%; font-size: 2.6rem; animation-delay: 0.7s; }
.decor-feather-2 { bottom: 22%; right: 28%; font-size: 1.9rem; animation-delay: 2.1s; }
.decor-coop { bottom: -2rem; right: -2rem; font-size: 10rem; color: rgba(255, 255, 255, 0.06); animation: none; }

.login-brand-content {
    position: relative;
    z-index: 2;
    max-width: 420px;
    color: #fff;
    animation: fadeInUp 0.8s ease both;
}

.login-brand-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 1.25rem;
    animation: pulseGlow 3s ease-in-out infinite;
}

.login-brand-content h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.login-brand-content > p {
    font-size: 1.05rem;
    opacity: 0.92;
    margin-bottom: 1.75rem;
}

.login-brand-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.login-brand-points li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    opacity: 0.95;
}

.login-brand-points i {
    color: #8de3ad;
    font-size: 1.1rem;
}

/* ----- Right form panel ----- */
.login-form-panel {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8faf9;
    padding: 2rem 1rem;
}

.login-wrapper {
    width: 100%;
    padding: 1rem;
}

.login-card {
    max-width: 380px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.6s ease 0.1s both;
    transition: box-shadow 0.3s ease;
}

.login-card.login-shake {
    animation: shakeX 0.4s ease;
}

.login-card-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-card-header i {
    font-size: 2.5rem;
    color: var(--ltp-primary);
    display: inline-block;
    animation: eggBounce 2.6s ease-in-out infinite;
}

.login-card-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0.4rem 0 0.1rem 0;
    color: #212529;
}

.login-input-icon-wrap {
    position: relative;
}

.login-input-icon-wrap i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa5a1;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.login-input-icon-wrap .form-control {
    padding-left: 2.4rem;
}

.login-input-icon-wrap .form-control:focus + i,
.login-input-icon-wrap .form-control:focus ~ i {
    color: var(--ltp-primary);
}

.login-field .form-control {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.login-field .form-control:focus {
    border-color: var(--ltp-primary);
    box-shadow: 0 0 0 0.2rem rgba(29, 111, 66, 0.15);
    transform: translateY(-1px);
}

#btnLogin {
    background: linear-gradient(135deg, var(--ltp-primary), var(--ltp-primary-dark));
    border: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}

#btnLogin:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(29, 111, 66, 0.35);
    filter: brightness(1.05);
}

#btnLogin:active:not(:disabled) {
    transform: translateY(0);
}

.login-hint {
    text-align: center;
}

@media (max-width: 850px) {
    .login-brand-panel {
        display: none;
    }
    .login-form-panel {
        flex: 1 1 100%;
    }
}

/* =====================================================================
   Whole-app visual redesign pass. Every module page (Dashboard, Feed,
   Health, Accounts, Masters, AdvanceBookings, CashReports, etc.) defines
   its own near-identical "*-card" container class in its own <style>
   block, loaded AFTER this stylesheet - so the shared look below is
   applied with !important specifically on the handful of properties that
   would otherwise be silently overridden per-page. Everything else
   (typography, buttons, forms, tables, badges, modals) applies normally.
   ===================================================================== */

:root {
    --ltp-radius: 14px;
    --ltp-radius-sm: 10px;
    --ltp-shadow: 0 2px 10px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
    --ltp-shadow-hover: 0 10px 24px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.06);
    --ltp-border: rgba(16, 24, 40, 0.06);
    --ltp-text-muted: #667085;
}

body {
    background-color: var(--ltp-bg);
    color: #1d2939;
}

/* ----- Universal card treatment (every "*-card" container across every page) ----- */
.dash-card, .notif-card, .entry-card, .feed-card, .sales-card, .inventory-card, .health-card,
.assets-card, .rate-card, .flocks-card, .inv-card, .masters-card, .ob-card, .scan-card, .ab-card,
.acc-card, .cr-balance-card, .cr-stat-card, .cmp-summary-card, .cmp-mini-chart-card,
.report-summary-card, .stat-card {
    border-radius: var(--ltp-radius) !important;
    box-shadow: var(--ltp-shadow) !important;
    border: 1px solid var(--ltp-border) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.dash-card:hover, .entry-card:hover, .feed-card:hover, .sales-card:hover, .inventory-card:hover,
.health-card:hover, .assets-card:hover, .rate-card:hover, .flocks-card:hover, .inv-card:hover,
.masters-card:hover, .ob-card:hover, .ab-card:hover, .acc-card:hover, .cr-balance-card:hover,
.cr-stat-card:hover, .stat-card:hover {
    box-shadow: var(--ltp-shadow-hover) !important;
}

/* ----- Sidebar: the nav list scrolls internally on short viewports instead of clipping (the user-footer
   below it stays pinned in view), plus a touch of polish for the scrollbar itself. ----- */
.sidebar .offcanvas-body {
    overflow: hidden !important;
    min-height: 0;
}
.sidebar-nav-scroll {
    scrollbar-width: thin;
}
.sidebar-nav-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-nav-scroll::-webkit-scrollbar-thumb { background: #dfe3df; border-radius: 6px; }

/* ----- Buttons ----- */
.btn {
    border-radius: 9px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.btn-sm { border-radius: 7px; }
.btn-primary {
    box-shadow: 0 1px 2px rgba(29, 111, 66, 0.15);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-danger:hover {
    transform: translateY(-1px);
}
.btn-quick-add {
    border-radius: 9px !important;
}

/* ----- Forms ----- */
.form-control, .form-select {
    border-radius: 9px;
    border-color: #d7dce1;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ltp-primary);
    box-shadow: 0 0 0 0.2rem rgba(29, 111, 66, 0.13);
}
.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #344054;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 9px !important;
    border-color: #d7dce1 !important;
}

/* ----- Tables & DataTables -----
   Modern flat table treatment: no vertical cell borders (Bootstrap's plain .table already omits them, this
   just lightens the horizontal rule between rows), pill-shaped pagination instead of Bootstrap's boxy squares,
   and a search/length bar that matches the rest of the form-control styling instead of looking like raw
   unstyled inputs bolted onto a legacy admin grid. */
.table {
    --bs-table-border-color: var(--ltp-border);
}
.table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ltp-text-muted);
    font-weight: 600;
    border-bottom-width: 1px;
    background-color: #fbfcfb;
}
.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}
.table-hover tbody tr:hover {
    background-color: #f4f8f5;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 9px;
    border: 1px solid #d7dce1;
    padding: 0.35rem 0.7rem;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--ltp-primary);
    box-shadow: 0 0 0 0.2rem rgba(29, 111, 66, 0.13);
}
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
    color: var(--ltp-text-muted);
    font-size: 0.85rem;
}
.dataTables_wrapper .pagination {
    gap: 0.2rem;
}
.dataTables_wrapper .page-link {
    border-radius: 8px !important;
    margin: 0 1px;
    color: #475467;
    border-color: transparent;
    background-color: transparent;
    font-size: 0.86rem;
}
.dataTables_wrapper .page-link:hover {
    background-color: #f1f3f1;
    color: var(--ltp-primary-dark);
}
.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--ltp-sidebar-active-bg, #e9f6ee);
    color: var(--ltp-primary-dark);
    font-weight: 600;
}
.dataTables_wrapper .page-item.disabled .page-link {
    color: #c3c8cd;
    background-color: transparent;
}
.table-responsive {
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 575.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
        text-align: left !important;
        margin-bottom: 0.5rem;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0 !important;
    }
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
    }
}

/* ----- Badges ----- */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

/* ----- Modals -----
   Default Bootstrap backdrop is flat opaque black at 0.5 - against this app's light-gray body it reads as a
   dull "washed out" gray wash across the whole page (sidebar and navbar included, since the backdrop is a
   full-viewport layer above them in the stack). A soft blur + slightly lighter, brand-tinted backdrop plus a
   pop-in entrance on the dialog itself makes the dimming read as an intentional frosted-glass effect instead
   of a rendering glitch. */
.modal-backdrop {
    background-color: #10241c;
}
.modal-backdrop.show {
    opacity: 0.08;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
@keyframes ltpModalPop {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal.fade .modal-dialog {
    transition: none;
}
.modal.show .modal-dialog {
    animation: ltpModalPop 0.2s ease both;
}
.modal-content {
    border-radius: var(--ltp-radius) !important;
    border: none;
    box-shadow: 0 25px 60px rgba(16, 24, 40, 0.35), 0 2px 8px rgba(16, 24, 40, 0.1);
}
.modal-header {
    border-bottom: 1px solid var(--ltp-border);
    padding: 1.1rem 1.5rem;
}
.modal-header .modal-title {
    font-weight: 700;
    color: #1f2937;
}
.modal-body {
    padding: 1.5rem;
}
.modal-footer {
    border-top: 1px solid var(--ltp-border);
    padding: 1rem 1.5rem;
}

/* ----- Peti / Tray / Pcs compound quantity entry -----
   Shared across Production Entry and Egg Sales (and anywhere else eggs are counted/sold) so a "how many"
   field can be keyed in the way sheds and buyers actually think about eggs, not just as a raw piece count. */
.peti-tray-group {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.peti-tray-group input {
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.extra-grade-panel {
    background: #f8faf9;
    border: 1px dashed var(--ltp-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.extra-grade-panel .peti-tray-group {
    margin-top: 0;
}
.extra-grade-qty-hint {
    font-size: 0.78rem;
    color: var(--ltp-text-muted);
    margin-top: 0.3rem;
}

/* ----- Tabs ----- */
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ltp-text-muted);
    font-weight: 600;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-tabs .nav-link:hover {
    border-color: rgba(29, 111, 66, 0.35);
    color: var(--ltp-primary-dark);
}
.nav-tabs .nav-link.active {
    color: var(--ltp-primary);
    border-color: var(--ltp-primary);
    background: transparent;
}

/* ----- Top navbar polish ----- */
.top-navbar {
    backdrop-filter: saturate(1.1);
}
.navbar-farm-name i {
    color: var(--ltp-primary);
}

/* =====================================================================
   Prompt 30 Part B additions: breadcrumb, notification bell, sidebar
   collapse-to-icons, toasts, skeleton loaders, validation states.
   ===================================================================== */

/* ----- Breadcrumb ----- */
.breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid var(--ltp-sidebar-border, #eaece9);
    padding: 0.55rem 1.5rem;
}
.breadcrumb-bar .breadcrumb {
    font-size: 0.82rem;
}
.breadcrumb-bar .breadcrumb-item a {
    color: var(--ltp-text-muted);
    text-decoration: none;
}
.breadcrumb-bar .breadcrumb-item a:hover {
    color: var(--ltp-primary);
}
.breadcrumb-bar .breadcrumb-item.active {
    color: #1d2939;
    font-weight: 600;
}
@media (min-width: 992px) {
    .breadcrumb-bar {
        margin-left: var(--ltp-sidebar-width);
    }
}
@media (max-width: 575.98px) {
    .breadcrumb-bar {
        padding: 0.5rem 0.75rem;
    }
}

/* ----- Notification bell ----- */
.notif-bell-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #475467;
    font-size: 1.2rem;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.notif-bell-toggle:hover {
    background-color: #f4f6f4;
    color: var(--ltp-primary-dark);
}
.notif-bell-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
}
.notif-bell-menu {
    width: 340px;
    max-width: 90vw;
    padding: 0;
    overflow: hidden;
}
.notif-bell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ltp-border);
    font-weight: 700;
    font-size: 0.9rem;
    color: #1d2939;
}
.notif-bell-list {
    max-height: 380px;
    overflow-y: auto;
}
.notif-bell-empty {
    padding: 1.25rem 1rem;
    text-align: center;
}
.notif-item {
    display: flex;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--ltp-border);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}
.notif-item:hover {
    background-color: #f8faf9;
}
.notif-item:last-child {
    border-bottom: none;
}
.notif-item-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    background-color: #d68910;
}
.notif-item-icon.notif-danger { background-color: #c0392b; }
.notif-item-icon.notif-info { background-color: #2980b9; }
.notif-item-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d2939;
    margin-bottom: 0.1rem;
}
.notif-item-sub {
    font-size: 0.78rem;
    color: var(--ltp-text-muted);
}

/* ----- Sidebar collapse-to-icons (desktop only) ----- */
.btn-sidebar-collapse {
    background: transparent;
    border: none;
    color: var(--ltp-text-muted);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.25s ease;
}
.btn-sidebar-collapse:hover {
    background-color: #f4f6f4;
    color: var(--ltp-primary-dark);
}
@media (min-width: 992px) {
    body.sidebar-collapsed .sidebar {
        width: 76px !important;
    }
    body.sidebar-collapsed .main-wrapper,
    body.sidebar-collapsed .top-navbar,
    body.sidebar-collapsed .breadcrumb-bar {
        margin-left: 76px;
    }
    body.sidebar-collapsed .sidebar-brand-text,
    body.sidebar-collapsed .sidebar-user-info,
    body.sidebar-collapsed .sidebar-logout-btn,
    body.sidebar-collapsed .sidebar-chevron,
    body.sidebar-collapsed .sidebar-submenu {
        display: none !important;
    }
    body.sidebar-collapsed .btn-sidebar-collapse i {
        transform: rotate(180deg);
    }
    body.sidebar-collapsed .sidebar-nav .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        font-size: 0;
    }
    body.sidebar-collapsed .sidebar-nav .nav-link i {
        font-size: 1.15rem;
    }
    body.sidebar-collapsed .sidebar-nav .nav-link.active::before {
        display: none;
    }
    body.sidebar-collapsed .offcanvas-header {
        justify-content: center;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    body.sidebar-collapsed .sidebar-user-footer {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ----- Toasts (replaces browser alert() app-wide, see Scripts/toast.js) ----- */
.toast-stack {
    position: fixed;
    top: calc(var(--ltp-navbar-height, 64px) + 14px);
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 320px;
    max-width: calc(100vw - 2rem);
}
.ltp-toast {
    background: #fff;
    border-radius: var(--ltp-radius-sm, 10px);
    box-shadow: var(--ltp-shadow-hover, 0 10px 24px rgba(16,24,40,0.14));
    border-left: 4px solid var(--ltp-primary);
    padding: 0.8rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    animation: ltpToastIn 0.25s ease both;
}
.ltp-toast.hiding {
    animation: ltpToastOut 0.2s ease both;
}
.ltp-toast.toast-success { border-left-color: #1d6f42; }
.ltp-toast.toast-error { border-left-color: #c0392b; }
.ltp-toast.toast-warning { border-left-color: #d68910; }
.ltp-toast-icon {
    font-size: 1.15rem;
    margin-top: 0.05rem;
}
.ltp-toast.toast-success .ltp-toast-icon { color: #1d6f42; }
.ltp-toast.toast-error .ltp-toast-icon { color: #c0392b; }
.ltp-toast.toast-warning .ltp-toast-icon { color: #d68910; }
.ltp-toast.toast-info .ltp-toast-icon { color: #2980b9; }
.ltp-toast-body {
    flex: 1 1 auto;
    font-size: 0.85rem;
    color: #1d2939;
    line-height: 1.4;
}
.ltp-toast-close {
    background: transparent;
    border: none;
    color: #98a2b3;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.15rem;
}
.ltp-toast-close:hover {
    color: #475467;
}
@keyframes ltpToastIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes ltpToastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(24px); }
}
@media (max-width: 575.98px) {
    .toast-stack {
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        max-width: none;
    }
}

/* ----- Skeleton loading placeholders (DataTables refresh) ----- */
@keyframes ltpSkeletonPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
.ltp-skeleton-row td {
    padding: 0.85rem 1rem !important;
}
.ltp-skeleton-bar {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef0ee 25%, #e4e8e4 37%, #eef0ee 63%);
    background-size: 400% 100%;
    animation: ltpSkeletonPulse 1.1s ease-in-out infinite;
}

/* ----- Form validation states (icon + color, not just a browser alert) ----- */
.form-control.is-invalid, .form-select.is-invalid {
    border-color: #c0392b;
    background-image: none;
    padding-right: 0.75rem;
}
.form-control.is-valid, .form-select.is-valid {
    border-color: #1d6f42;
    background-image: none;
    padding-right: 0.75rem;
}
.invalid-feedback {
    color: #c0392b;
    font-size: 0.78rem;
}
.invalid-feedback::before {
    content: "\F33A";
    font-family: "bootstrap-icons";
    margin-right: 0.3rem;
}