/* =========================================================
   Agrisense · Dark Green & Gold Design System
   ========================================================= */
:root {
    --ag-dark-green: #1B4332;
    --ag-mid-green: #2D6A4F;
    --ag-light-green: #E8F3EC;
    --ag-gold: #D4A017;
    --ag-gold-light: #F4C430;
    --ag-text-dark: #1B1B1B;
    --ag-text-light: #FFFFFF;
    --ag-alert-red: #B3261E;
    --ag-sidebar-w: 264px;
}

body {
    background-color: var(--ag-light-green);
    color: var(--ag-text-dark);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    min-height: 100vh;
}

a { text-decoration: none; }

/* ---------- Sidebar ---------- */
.ag-sidebar {
    background: linear-gradient(180deg, var(--ag-dark-green) 0%, #16382A 100%);
    width: var(--ag-sidebar-w);
}
@media (min-width: 992px) {
    .ag-sidebar { position: fixed; inset: 0 auto 0 0; height: 100vh; z-index: 1030; }
    .ag-content { margin-left: var(--ag-sidebar-w); }
}

.ag-brand { color: var(--ag-text-light); }
.ag-brand i { color: var(--ag-gold); font-size: 1.6rem; vertical-align: -0.25rem; margin-right: .4rem; }
.ag-brand span { font-size: 1.35rem; font-weight: 300; letter-spacing: .5px; }
.ag-brand b { font-weight: 700; color: var(--ag-gold-light); }
.ag-brand small { color: rgba(255,255,255,.55); font-size: .66rem; letter-spacing: .5px; line-height: 1.5; text-transform: uppercase; padding-left: 2.05rem; padding-right: .25rem; }

.ag-nav-label {
    font-size: .65rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,.38); margin: 1rem .75rem .35rem;
}
.ag-nav-link {
    display: flex; align-items: center; gap: .7rem;
    color: rgba(255,255,255,.78); font-size: .925rem;
    padding: .62rem .85rem; border-radius: .55rem; margin-bottom: .15rem;
    border-left: 3px solid transparent; transition: all .15s ease-in-out;
}
.ag-nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.ag-nav-link:hover { background: rgba(212,160,23,.14); color: var(--ag-gold-light); }
.ag-nav-link.active {
    background: var(--ag-gold); color: var(--ag-dark-green); font-weight: 600;
    border-left-color: var(--ag-gold-light);
}
.ag-pill { background: var(--ag-gold); color: var(--ag-dark-green); font-weight: 700; }
.ag-pill-dark { background: var(--ag-dark-green); color: var(--ag-gold-light); }

.ag-side-user {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09);
    border-radius: .7rem; padding: .8rem;
}
.ag-user-role { color: rgba(255,255,255,.5); font-size: .72rem; }
.ag-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ag-gold); color: var(--ag-dark-green); font-weight: 700;
    flex-shrink: 0;
}
.ag-avatar-sm { width: 30px; height: 30px; font-size: .8rem; }
.ag-btn-ghost { color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.18); }
.ag-btn-ghost:hover { background: rgba(212,160,23,.18); color: var(--ag-gold-light); border-color: var(--ag-gold); }

/* ---------- Topbar ---------- */
.ag-topbar {
    background: var(--ag-text-light);
    box-shadow: 0 1px 3px rgba(27,67,50,.08);
    height: 60px; position: sticky; top: 0; z-index: 1020;
}
.ag-page-title { font-size: 1.15rem; font-weight: 700; color: var(--ag-dark-green); }
.ag-burger { color: var(--ag-dark-green); }
.ag-clock { color: var(--ag-mid-green); font-size: .8rem; font-weight: 600; background: var(--ag-light-green); padding: .3rem .7rem; border-radius: 2rem; }

/* ---------- Cards & KPIs ---------- */
.ag-card { background: var(--ag-text-light); border: 1px solid rgba(27,67,50,.07); border-radius: .8rem; box-shadow: 0 2px 6px rgba(27,67,50,.05); }
.ag-card-header {
    background: transparent; border-bottom: 2px solid var(--ag-light-green);
    color: var(--ag-dark-green); font-weight: 700; font-size: .85rem;
    letter-spacing: .4px; text-transform: uppercase;
}
.ag-card-header i { color: var(--ag-gold); margin-right: .35rem; }

.ag-kpi { border-left: 5px solid var(--ag-gold); }
.ag-kpi .ag-kpi-value { font-size: 1.9rem; font-weight: 800; color: var(--ag-dark-green); line-height: 1.1; }
.ag-kpi .ag-kpi-unit { font-size: .9rem; font-weight: 600; color: var(--ag-mid-green); }
.ag-kpi .ag-kpi-label { font-size: .78rem; color: #5c6f66; text-transform: uppercase; letter-spacing: .5px; }
.ag-kpi-icon {
    width: 46px; height: 46px; border-radius: .8rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ag-light-green); color: var(--ag-mid-green); font-size: 1.3rem;
}
.ag-kpi-icon.alert { background: rgba(179,38,30,.1); color: var(--ag-alert-red); }

/* ---------- Buttons ---------- */
.btn-ag-gold { background: var(--ag-gold); color: var(--ag-dark-green); font-weight: 600; border: none; }
.btn-ag-gold:hover { background: var(--ag-gold-light); color: var(--ag-dark-green); }
.btn-ag-green { background: var(--ag-mid-green); color: #fff; font-weight: 600; }
.btn-ag-green:hover { background: var(--ag-dark-green); color: #fff; }
.btn-ag-outline { border: 1px solid var(--ag-mid-green); color: var(--ag-mid-green); font-weight: 500; }
.btn-ag-outline:hover,.btn-ag-outline.active { background: var(--ag-mid-green); color: #fff; }

/* ---------- Badges ---------- */
.ag-badge-critical { background: rgba(179,38,30,.12); color: var(--ag-alert-red); font-weight: 700; }
.ag-badge-warning { background: rgba(212,160,23,.15); color: #8a6a0d; font-weight: 700; }
.ag-badge-info { background: rgba(45,106,79,.12); color: var(--ag-mid-green); font-weight: 700; }
.ag-badge-open { background: rgba(179,38,30,.08); color: var(--ag-alert-red); }
.ag-badge-resolved { background: rgba(45,106,79,.1); color: var(--ag-mid-green); }
.ag-status-dot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.35rem; }
.ag-status-active { background:#2e9e5b; } .ag-status-inactive{background:#9aa7a1;} .ag-status-fault{background:var(--ag-alert-red);}

/* ---------- Tables ---------- */
.table-ag thead th {
    background: var(--ag-light-green); color: var(--ag-mid-green);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .6px;
    border-bottom: none; white-space: nowrap;
}
.table-ag td { vertical-align: middle; font-size: .9rem; }
.table-ag tbody tr:hover { background: rgba(232,243,236,.55); }

/* ---------- Alerts / misc ---------- */
.ag-alert-success { background: rgba(46,158,91,.12); color:#1d6b3c; border:1px solid rgba(46,158,91,.25); border-radius:.6rem; }
.ag-alert-info { background: rgba(45,106,79,.1); color: var(--ag-mid-green); border:1px solid rgba(45,106,79,.22); border-radius:.6rem; }
.ag-alert-critical { background: rgba(179,38,30,.09); color: var(--ag-alert-red); border:1px solid rgba(179,38,30,.25); border-radius:.6rem; }

.chart-box { position: relative; height: 320px; }
.chart-box-sm { position: relative; height: 260px; }

/* ---------- Login ---------- */
.ag-login-body {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 1.5rem;
    background:
        radial-gradient(circle at 15% 20%, rgba(212,160,23,.18) 0%, transparent 42%),
        radial-gradient(circle at 90% 85%, rgba(77,159,116,.25) 0%, transparent 45%),
        linear-gradient(150deg, var(--ag-dark-green) 0%, #123528 100%);
}
.ag-login-card { width: 100%; max-width: 430px; border-radius: 1rem; }
.ag-login-logo {
    width: 64px; height: 64px; border-radius: 50%; font-size: 1.9rem;
    background: linear-gradient(135deg, var(--ag-gold), var(--ag-gold-light));
    color: var(--ag-dark-green);
}
.ag-text-green { color: var(--ag-dark-green); }
.ag-text-gold { color: var(--ag-gold); }
.ag-login-footer { color: rgba(255,255,255,.45); font-size: .75rem; margin-top: 1.4rem; text-align:center; }
.form-control:focus { border-color: var(--ag-gold); box-shadow: 0 0 0 .2rem rgba(212,160,23,.18); }

/* ---------- Login back link ---------- */
.ag-back-home {
    position: absolute; top: 22px; left: 24px;
    color: rgba(255,255,255,.65); font-size: .85rem; text-decoration: none;
    display: inline-flex; align-items: center; gap: .2rem;
}
.ag-back-home i { font-size: 1.3rem; line-height: 1; transition: transform .2s ease; }
.ag-back-home:hover { color: var(--ag-gold-light); }
.ag-back-home:hover i { transform: translateX(-4px); }

@media (max-width: 991.98px) {
    .ag-sidebar { box-shadow: -8px 0 40px rgba(0,0,0,.4); }
}

/* ---------- Farm location maps ---------- */
.ag-map { height: 430px; width: 100%; background: #E8F3EC; }
.ag-map-sm { height: 300px; }
.leaflet-container { font: inherit; background: #E8F3EC; }
.leaflet-popup-content-wrapper { border-radius: .6rem; }
.leaflet-popup-content { margin: .7rem .9rem; }