/*
 * =======================================================================================
 * NAFA DAIRY FARM - THEME OVERRIDE LAYER
 * =======================================================================================
 * Loaded LAST, after css/main.css and after every page stylesheet.
 *
 * Its only job is to pull the older page stylesheets onto the violet palette defined in
 * main.css, without having to rewrite each of them. Because it loads last, equal-
 * specificity rules here win, and re-declaring another file's :root variables re-points
 * every rule that already uses them.
 * =======================================================================================
 */

/* ---------------------------------------------------------------------------------------
 * 1. RE-POINT PAGE-LEVEL VARIABLE SETS
 * --------------------------------------------------------------------------------------- */

/* livestock_list.css + livestock.css both define their own --ls-* palette. */
:root {
    --ls-primary:        var(--v-500);
    --ls-primary-hover:  var(--v-700);
    --ls-secondary:      var(--v-600);

    --ls-success: var(--success);
    --ls-warning: var(--warning);
    --ls-danger:  var(--danger);
    --ls-info:    var(--info);

    --ls-bg-body:  var(--page-bg);
    --ls-bg-card:  var(--card-bg);
    --ls-bg-input: var(--input-bg);
    --ls-bg:       var(--card-bg);
    --ls-input-bg: var(--input-bg);

    --ls-text-dark:  var(--text-strong);
    --ls-text-body:  var(--text-body);
    --ls-text-muted: var(--text-muted);
    --ls-text:       var(--text-strong);
    --ls-label:      var(--text-muted);

    --ls-border:       var(--border);
    --ls-border-light: var(--border-soft);

    --ls-shadow-sm: var(--shadow-xs);
    --ls-shadow-md: var(--shadow-sm);
    --ls-shadow-lg: var(--shadow-md);
    --ls-shadow:    var(--shadow-md);
    --ls-shadow-glow-primary: 0 0 15px rgba(124, 58, 237, 0.3);

    --ls-radius-sm:   var(--r-sm);
    --ls-radius-md:   var(--r-md);
    --ls-radius-lg:   var(--r-md);
    --ls-radius-xl:   var(--r-lg);
    --ls-radius-full: var(--r-full);
    --ls-radius:      var(--r-md);

    --ls-transition-fast:   var(--t-fast);
    --ls-transition-smooth: var(--t-med);
}

/* ---------------------------------------------------------------------------------------
 * 2. LIVESTOCK LIST - surfaces the older file painted with hardcoded values
 * --------------------------------------------------------------------------------------- */
.ls-container { background: transparent; }

.ls-top-header {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 20px;
}
.ls-top-header .page-title { color: var(--v-900); }
.ls-top-header .page-subtitle { color: var(--text-muted); }

.btn-create-new {
    background: linear-gradient(135deg, var(--v-500) 0%, var(--v-700) 100%);
    color: #fff;
    box-shadow: var(--shadow-brand);
    border-radius: var(--r-md);
}
.btn-create-new:hover { color: #fff; box-shadow: 0 10px 24px rgba(124, 58, 237, 0.36); }

.ls-stats-row .stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
}
.ls-stats-row .stat-value { color: var(--v-700); }
.ls-stats-row .stat-label { color: var(--text-muted); }

.ls-toolbar-card,
.ls-table-wrapper {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.ls-main-table thead th {
    background: var(--v-50);
    color: var(--v-700);
    border-bottom: 1px solid var(--border);
}
.ls-main-table tbody tr:hover { background: var(--v-50); }

.tag-badge { background: var(--v-100); color: var(--v-700); }
.meta-id { color: var(--text-muted); }
.animal-type { color: var(--text-strong); }

.toggle-btn.pending { background: var(--input-bg); color: var(--text-muted); border-color: var(--border); }
.toggle-btn.pending:hover { background: var(--v-100); color: var(--v-700); }

/* Row tints, restated in violet-compatible hues. */
.row-warning  { background: #fdf6e7 !important; }
.row-critical { background: #fdeeed !important; }
.row-birth-due{ background: #e9f9f3 !important; }

.pagination-list { background: var(--card-bg); border-color: var(--border-soft); }
.pagination-list li.active a { background: var(--v-500); box-shadow: var(--shadow-brand); }
.pagination-list li:not(.active) a:hover { background: var(--v-50); color: var(--v-600); }

.modal-box { background: var(--card-bg); border-radius: var(--r-lg); }
.modal-header { background: var(--v-50); border-bottom: 1px solid var(--border-soft); }
.modal-header h4 { color: var(--v-900); }
.btn-close-modal { background: var(--v-500); color: #fff; }

.btn-icon.edit-btn { background: var(--v-100); color: var(--v-600); }
.btn-icon.edit-btn:hover { background: var(--v-500); color: #fff; }
.btn-icon.log-btn { background: var(--info-soft); color: var(--info); }
.btn-icon.delete-btn { background: var(--danger-soft); color: var(--danger); }
.btn-icon.delete-btn:hover { background: var(--danger); color: #fff; }

/* ---------------------------------------------------------------------------------------
 * 3. DASHBOARD
 * --------------------------------------------------------------------------------------- */
.dash-container {
    background: transparent !important;
    padding: 0 !important;
    min-height: auto !important;
    font-family: inherit !important;
}

.d-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}
.d-card:hover { box-shadow: var(--shadow-md) !important; }

.alert-banner {
    background: linear-gradient(135deg, var(--v-600) 0%, var(--v-800) 100%) !important;
    box-shadow: var(--shadow-brand) !important;
    border-radius: var(--r-lg) !important;
}
.alert-actions .btn-white { color: var(--v-700) !important; border-radius: var(--r-full); font-weight: 700; }

.alert-box {
    background: var(--page-bg-soft);
    border-color: var(--border-soft);
    border-radius: var(--r-md);
}
.alert-box.active-warning { background: var(--warning-soft); border-color: #f8dfb2; }
.alert-box.active-danger  { background: var(--danger-soft);  border-color: #f9c9c6; }
.alert-box.active-success { background: var(--success-soft); border-color: #bcecdb; }

.bg-primary-soft { background: var(--v-100) !important; color: var(--v-600) !important; }
.bg-success-soft { background: var(--success-soft) !important; color: var(--success) !important; }
.bg-danger-soft  { background: var(--danger-soft) !important;  color: var(--danger) !important; }
.bg-warning-soft { background: var(--warning-soft) !important; color: var(--warning) !important; }

.date-badge {
    background: var(--card-bg-solid);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-xs);
    color: var(--v-800);
}

.activity-item { border-bottom-color: var(--border-soft); }
.act-icon { border-radius: var(--r-md); }

/* ---------------------------------------------------------------------------------------
 * 4. LOGIN PAGE
 * --------------------------------------------------------------------------------------- */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(160deg, #f3ecfc 0%, var(--page-bg) 50%, #dfd2f3 100%);
}

.login-container {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 40px !important;
    max-width: 420px;
    width: 100%;
    margin: 20px;
}
.login-container h1 { color: var(--v-900) !important; margin-bottom: 4px; }
.login-container .btn-primary { width: 100%; padding: 13px; font-size: 0.975rem; }

/* ---------------------------------------------------------------------------------------
 * 5. LEGACY COLOUR PATCHES
 * --------------------------------------------------------------------------------------- */
/* Old Bootstrap-blue primaries scattered through the page stylesheets. */
.summary-box, .stat-box, .report-header { border-color: var(--border) !important; }

.table th, .table thead th { border-color: var(--border) !important; }

/* Chart.js canvases sit on cards, so give them breathing room rather than a border. */
canvas { max-width: 100%; }

/* Form validation states. */
.is-invalid, .form-control.is-invalid { border-color: var(--danger) !important; }
.is-valid, .form-control.is-valid { border-color: var(--success) !important; }

/* ---------------------------------------------------------------------------------------
 * 6. SHARED DECORATIVE PIECES FROM THE DEMO
 * --------------------------------------------------------------------------------------- */
/* Centred page banner with a hairline under it. */
.page-banner {
    text-align: center;
    padding: 8px 0 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-strong);
}
.page-banner h1 {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--v-900);
    letter-spacing: -0.03em;
    margin: 0;
}

/* Soft icon tile used next to list rows. */
.icon-tile {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v-100);
    color: var(--v-600);
    font-size: 0.85rem;
}

/* Hollow ring bullet used by the demo's goal list. */
.goal-ring {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    border: 2px solid var(--v-400);
}