/*
 * EcoIlluminate — Global Design System (Modern)
 * Contemporary eco-institutional aesthetic with glassmorphism,
 * micro-animations, dark mode, and WCAG AA accessibility.
 *
 * Structure:
 *   1.  Design Tokens (:root)
 *   2.  Bootstrap / AdminLTE Variable Overrides
 *   3.  Global Base
 *   4.  Sidebar
 *   5.  Navbar (Glassmorphism)
 *   6.  Cards
 *   7.  Info-Box Widgets
 *   8.  Tables & DataTables
 *   9.  Buttons
 *   10. Badges & Status Indicators
 *   11. Forms
 *   12. Login / Auth Pages
 *   13. Micro-Animations
 *   14. Accessibility — Focus Rings
 *   15. Reduced Motion
 *   16. Dark Mode
 *   17. Responsive
 */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* --- Brand Palette --- */
  --eco-primary:       #1d5c4a;
  --eco-primary-rgb:   29, 92, 74;
  --eco-secondary:     #2e6b55;
  --eco-accent:        #3faa78;
  --eco-accent-rgb:    63, 170, 120;
  --eco-light:         #a8d5be;
  --eco-highlight:     #b4e0c8;
  --eco-uv:            #9b8fc9;

  /* --- Sidebar Gradient Stops --- */
  --sidebar-grad-top:  #0f2218;
  --sidebar-grad-mid:  #152d22;
  --sidebar-grad-bot:  #1a3829;

  /* --- Surfaces --- */
  --surface-body:      #f0f5f2;
  --surface-card:      #ffffff;
  --surface-sidebar:   #152d22;
  --surface-navbar:    rgba(255, 255, 255, 0.75);
  --surface-input:     #ffffff;

  /* --- Text --- */
  --text-primary:      #192e26;
  --text-secondary:    #3d5c4e;
  --text-muted:        #6b8c7e;
  --text-on-dark:      #e4ede9;
  --text-on-dark-muted: rgba(228, 237, 233, 0.65);

  /* --- Borders --- */
  --border-color:        #d8e8e2;
  --border-color-strong: #a8c4ba;

  /* --- Risk Semantic --- */
  --risk-low:      #1e7a4e;
  --risk-moderate: #a87200;
  --risk-high:     #b84e00;
  --risk-critical: #b02424;

  /* --- Spacing Scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* --- Border Radii --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill:  999px;

  /* --- Shadows (Multi-layer) --- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.04),
                  0 1px 4px rgba(29, 92, 74, 0.06);
  --shadow-md:    0 4px 8px rgba(0, 0, 0, 0.06),
                  0 8px 24px rgba(29, 92, 74, 0.10);
  --shadow-lg:    0 8px 16px rgba(0, 0, 0, 0.08),
                  0 20px 48px rgba(29, 92, 74, 0.14);
  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.05),
                  0 4px 16px rgba(29, 92, 74, 0.08);
  --shadow-card-hover:
                  0 4px 8px rgba(0, 0, 0, 0.07),
                  0 12px 32px rgba(29, 92, 74, 0.14);
  --shadow-glow:  0 0 0 3px rgba(63, 170, 120, 0.30);

  /* --- Glassmorphism --- */
  --glass-bg:      rgba(255, 255, 255, 0.75);
  --glass-border:  rgba(255, 255, 255, 0.60);
  --glass-blur:    12px;

  /* --- Transitions --- */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --transition-fast: 0.15s var(--ease-standard);
  --transition-base: 0.22s var(--ease-standard);
  --transition-slow: 0.35s var(--ease-decelerate);
}


/* ============================================================
   2. BOOTSTRAP / ADMINLTE VARIABLE OVERRIDES
   ============================================================ */
:root {
  --bs-tertiary-bg:    var(--surface-body);
  --bs-body-bg:        var(--surface-body);
  --bs-border-color:   var(--border-color);
  --bs-body-color:     var(--text-primary);
  --bs-link-color:     var(--eco-primary);
  --bs-link-hover-color: var(--eco-accent);
}


/* ============================================================
   3. GLOBAL BASE
   ============================================================ */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--surface-body) !important;
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection highlight */
::selection {
  background-color: var(--eco-light);
  color: var(--text-primary);
}

/* Thin branded scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--surface-body);
}
::-webkit-scrollbar-thumb {
  background-color: var(--eco-light);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--eco-secondary);
}

/* Links */
a {
  color: var(--eco-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--eco-accent);
}


/* ============================================================
   4. SIDEBAR
   ============================================================ */
.app-sidebar {
  /* Override AdminLTE --lte-* sidebar variables */
  --lte-sidebar-color:             var(--text-on-dark-muted);
  --lte-sidebar-hover-color:       var(--text-on-dark);
  --lte-sidebar-hover-bg:          transparent;
  --lte-sidebar-active-color:      #ffffff;
  --lte-sidebar-menu-active-color: #ffffff;
  --lte-sidebar-menu-active-bg:    transparent;
  --lte-sidebar-header-color:      rgba(228, 237, 233, 0.40);

  background: linear-gradient(
    180deg,
    var(--sidebar-grad-top) 0%,
    var(--sidebar-grad-mid) 50%,
    var(--sidebar-grad-bot) 100%
  ) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
              inset -1px 0 0 rgba(255, 255, 255, 0.03);
  position: relative;
}

/* Noise texture overlay for premium depth */
.app-sidebar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* Override AdminLTE's bg-body-secondary on sidebar */
.app-sidebar.bg-body-secondary {
  --bs-body-bg: var(--surface-sidebar);
  background: linear-gradient(
    180deg,
    var(--sidebar-grad-top) 0%,
    var(--sidebar-grad-mid) 50%,
    var(--sidebar-grad-bot) 100%
  ) !important;
}

/* Sidebar scrollbar */
.sidebar-wrapper {
  scrollbar-color: rgba(63, 170, 120, 0.30) transparent;
}

/* Sidebar content above noise overlay */
.app-sidebar .sidebar-brand,
.app-sidebar .sidebar-wrapper {
  position: relative;
  z-index: 1;
}

/* Brand area */
.app-sidebar .sidebar-brand {
  border-bottom: 1px solid rgba(228, 237, 233, 0.08);
  padding: var(--space-5) var(--space-4);
}

.app-sidebar .brand-text {
  color: var(--text-on-dark) !important;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.3px;
}

.app-sidebar .brand-image {
  opacity: 0.92 !important;
}

/* Section category headers */
.app-sidebar .sidebar-menu .nav-header {
  color: rgba(228, 237, 233, 0.38) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: var(--space-5) var(--space-4) var(--space-2);
  margin-top: var(--space-2);
}
.app-sidebar .sidebar-menu .nav-header:first-child {
  margin-top: 0;
  padding-top: var(--space-3);
}

/* Nav items — edge-to-edge gradient with left accent */
.app-sidebar .sidebar-menu .nav-link {
  color: var(--text-on-dark-muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.55rem 1rem;
  border-radius: 0 !important;
  margin: 1px 0 !important;
  border-left: 3px solid transparent;
  position: relative;
  z-index: 1;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.app-sidebar .sidebar-menu .nav-link:hover {
  background: linear-gradient(
    90deg,
    rgba(63, 170, 120, 0.12) 0%,
    rgba(63, 170, 120, 0.04) 100%
  ) !important;
  color: var(--text-on-dark) !important;
  border-left-color: rgba(63, 170, 120, 0.4);
}

.app-sidebar .sidebar-menu .nav-link.active {
  background: linear-gradient(
    90deg,
    rgba(63, 170, 120, 0.22) 0%,
    rgba(63, 170, 120, 0.08) 100%
  ) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-left: 3px solid var(--eco-accent) !important;
}

.app-sidebar .nav-icon {
  color: inherit;
  opacity: 0.80;
  margin-right: var(--space-2);
  font-size: 1rem;
  width: 1.5rem;
  min-width: 1.5rem;
  max-width: 1.5rem;
  text-align: center;
}

.app-sidebar .sidebar-menu .nav-link.active .nav-icon {
  opacity: 1;
}

/* Mini sidebar (collapsed) adjustments */
.sidebar-mini.sidebar-collapse .app-sidebar {
  transition: min-width 0.3s ease, max-width 0.3s ease;
}
.sidebar-mini.sidebar-collapse .app-sidebar .nav-link {
  border-left: 3px solid transparent;
  justify-content: center;
}
.sidebar-mini.sidebar-collapse .app-sidebar .nav-link.active {
  border-left-color: var(--eco-accent) !important;
}

/* Hover-expand: restore full sidebar styling */
.sidebar-mini.sidebar-collapse .app-sidebar:hover {
  transition: min-width 0.3s ease, max-width 0.3s ease;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
}
.sidebar-mini.sidebar-collapse .app-sidebar:hover .nav-link {
  justify-content: flex-start;
}


/* ============================================================
   5. NAVBAR (GLASSMORPHISM)
   ============================================================ */
.app-header {
  background-color: var(--glass-bg) !important;
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), var(--shadow-sm);
}

/* Override AdminLTE bg-body */
.app-header.bg-body,
.app-header.navbar-glass {
  --bs-body-bg: transparent;
  background-color: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .app-header.navbar-glass {
    background-color: rgba(255, 255, 255, 0.97) !important;
  }
}

/* Breadcrumb */
.breadcrumb {
  font-size: 0.82rem;
  margin-bottom: 0;
}
.breadcrumb-item a {
  color: var(--text-muted);
  text-decoration: none;
}
.breadcrumb-item a:hover {
  color: var(--eco-primary);
}
.breadcrumb-item.active {
  color: var(--eco-primary);
  font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
}

/* Page / Content header title */
.app-content-header h3,
.app-content-header h1,
.content-title {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}

/* Navbar icon hover */
.app-header .nav-link {
  transition: color var(--transition-fast);
}
.app-header .nav-link:hover {
  color: var(--eco-accent) !important;
}

/* Navbar icon buttons */
.app-header .nav-link {
  border-radius: var(--radius-md);
  margin: 0 2px;
  padding: 0.4rem 0.6rem;
}
.app-header .nav-link:hover {
  background-color: rgba(29, 92, 74, 0.06);
}

/* Theme toggle button group */
.theme-toggle.btn-group {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.theme-toggle .btn {
  padding: 0.2rem 0.45rem;
  border: none !important;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-radius: 0 !important;
  transition: all 0.2s var(--ease-standard);
}
.theme-toggle .btn:hover {
  color: var(--text-primary);
  background: rgba(29, 92, 74, 0.06);
}
.theme-toggle .btn.active {
  color: var(--eco-primary);
  background: rgba(29, 92, 74, 0.10);
}
html[data-bs-theme="dark"] .theme-toggle .btn.active {
  color: var(--eco-accent);
  background: rgba(63, 170, 120, 0.15);
}

/* Notification dropdown */
.app-header .dropdown-menu {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* User menu header gradient */
.dropdown-menu .user-header {
  background: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-accent) 100%) !important;
  padding: 1.5rem 1rem !important;
}
.dropdown-menu .user-header p {
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}
.dropdown-menu .user-header small {
  color: rgba(255,255,255,0.8) !important;
}

/* User footer */
.user-footer {
  background-color: var(--surface-card) !important;
  border-top: 1px solid var(--border-color);
  padding: 0.75rem 1rem !important;
}
.user-footer .btn {
  border-radius: var(--radius-md);
  font-weight: 500;
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--border-color);
  background-color: var(--surface-card);
  color: var(--text-primary);
}
.user-footer .btn:hover {
  background-color: var(--surface-body);
  color: var(--eco-primary);
}


/* ============================================================
   6. CARDS
   ============================================================ */
.card {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  background-color: var(--surface-card);
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Neutralize AdminLTE card-outline */
.card.card-outline,
.card.card-outline.card-primary,
.card.card-outline.card-success,
.card.card-outline.card-warning,
.card.card-outline.card-danger,
.card.card-outline.card-info {
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card);
}

.card-header {
  background-color: var(--surface-body) !important;
  border-bottom: 1px solid var(--border-color);
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: var(--text-primary);
  padding: var(--space-4) var(--space-6);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  background-color: var(--surface-body);
  border-top: 1px solid var(--border-color);
  padding: var(--space-4) var(--space-6);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Small/info stat cards (AdminLTE small-box fallback) */
.small-box {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  border: none !important;
}

.small-box .small-box-footer {
  background-color: rgba(0, 0, 0, 0.08) !important;
}


/* ============================================================
   7. INFO-BOX WIDGETS (Dashboard Stat Cards)
   ============================================================ */
.info-box {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  background-color: var(--surface-card);
  border: 1px solid var(--border-color) !important;
  transition: box-shadow var(--transition-base),
              transform var(--transition-base);
  overflow: hidden;
}

.info-box:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.info-box .info-box-icon {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  width: 70px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-box .info-box-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.info-box .info-box-number {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-primary);
}


/* ============================================================
   8. TABLES & DATATABLES
   ============================================================ */

/* Base table styling */
.table {
  color: var(--text-primary);
  border-color: var(--border-color);
  font-size: 0.88rem;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background-color: transparent !important;
  color: var(--text-muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-color) !important;
  border-top: none !important;
  white-space: nowrap;
  padding: 0.75rem 1rem;
}

/* Override Bootstrap table-light on thead */
.table thead.table-light th {
  background-color: transparent !important;
  color: var(--text-muted);
}

.table tbody tr {
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.table tbody td {
  border-color: rgba(0, 0, 0, 0.04);
  vertical-align: middle;
  padding: 0.78rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(29, 92, 74, 0.018);
}

.table-hover > tbody > tr {
  transition: all var(--transition-fast);
}
.table-hover > tbody > tr:hover > td {
  background-color: rgba(63, 170, 120, 0.06) !important;
}

.table-bordered {
  border-color: var(--border-color);
}

/* Rounded table in cards */
.card .table-responsive {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: visible;
}

/* DataTables wrapper */
.dataTables_wrapper {
  font-size: 0.88rem;
}

/* DataTables horizontal overflow (Bootstrap-style) */
.datatable-responsive {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.datatable-responsive table.dataTable th,
.datatable-responsive table.dataTable td {
  white-space: nowrap;
}
.card .table-responsive.datatable-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* DataTables controls layout (length + search) */
.dataTables_wrapper .row:first-child {
  align-items: center;
  row-gap: 0.6rem;
}
.dataTables_wrapper .row:first-child > div {
  display: flex;
  align-items: center;
}
.dataTables_wrapper .dataTables_length {
  display: flex;
  justify-content: flex-start;
}
.dataTables_wrapper .dataTables_filter {
  display: flex;
  justify-content: flex-end;
}

/* DataTables length + filter row */
.dataTables_length label,
.dataTables_filter label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin-bottom: 0 !important;
}

.dataTables_filter input[type="search"] {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  background-color: var(--surface-card);
  width: 14rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.dataTables_filter input[type="search"]:focus {
  border-color: var(--eco-accent);
  box-shadow: var(--shadow-glow);
}

.dataTables_length {
  position: relative;
  z-index: 2;
}

.dataTables_length select {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.3rem 2.2rem 0.3rem 0.6rem !important;
  font-size: 0.85rem;
  color: var(--text-primary);
  background-color: var(--surface-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16'%3E%3Cpath fill='%233faa78' d='M4.47 6.47a.9.9 0 0 1 1.27 0L8 8.73l2.26-2.26a.9.9 0 1 1 1.27 1.27l-2.9 2.9a.9.9 0 0 1-1.27 0l-2.9-2.9a.9.9 0 0 1 0-1.27z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.55rem center !important;
  background-size: 1rem 1rem !important;
  min-width: 4.5rem;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  margin: 0 0.2rem !important;
}

/* DataTables info text */
.dataTables_info {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* DataTables pagination */
.dataTables_paginate .paginate_button {
  padding: 0 !important;
  margin: 0 2px !important;
  border: none !important;
  background: transparent !important;
}
.dataTables_paginate .page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.3rem 0.6rem !important;
  font-size: 0.82rem !important;
  min-width: 2rem !important;
  color: var(--eco-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.dataTables_paginate .paginate_button:hover .page-link {
  background-color: var(--surface-body) !important;
  border-color: var(--border-color-strong) !important;
  color: var(--eco-primary) !important;
}
.dataTables_paginate .paginate_button.active .page-link,
.dataTables_paginate .paginate_button.active:hover .page-link {
  background: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-secondary) 100%) !important;
  border-color: var(--eco-primary) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: var(--radius-pill) !important;
}
.dataTables_paginate .paginate_button.disabled .page-link,
.dataTables_paginate .paginate_button.disabled:hover .page-link {
  opacity: 0.4;
  cursor: default;
  background: transparent !important;
}

/* DataTables small-screen footer compaction */
@media (max-width: 576px) {
  .dataTables_info { display: none !important; }
  div.dataTables_paginate { width: 100%; text-align: center; }
  .dataTables_paginate .page-link {
    padding: 0.25rem 0.5rem !important;
    min-width: 1.85rem !important;
    font-size: 0.85rem !important;
  }
}


/* ============================================================
   9. BUTTONS
   ============================================================ */

/* Shared button base */
.btn {
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  line-height: 1.5;
}
.btn i { font-size: 1em; }

/* Primary — eco-primary gradient */
.btn-primary {
  background: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-secondary) 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(29, 92, 74, 0.2);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--eco-secondary) 0%, var(--eco-accent) 100%);
  box-shadow: 0 4px 8px rgba(29, 92, 74, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
}
.btn-primary:active {
  background: var(--eco-primary);
  box-shadow: none;
  transform: translateY(1px);
}

/* Success — risk-low green */
.btn-success {
  background-color: var(--risk-low);
  border-color: var(--risk-low);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(30, 122, 78, 0.2);
}
.btn-success:hover,
.btn-success:focus {
  background-color: #175e3b;
  border-color: #175e3b;
  box-shadow: 0 4px 8px rgba(30, 122, 78, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Warning — risk-moderate amber */
.btn-warning {
  background-color: var(--risk-moderate);
  border-color: var(--risk-moderate);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(168, 114, 0, 0.2);
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: #8a5d00;
  border-color: #8a5d00;
  box-shadow: 0 4px 8px rgba(168, 114, 0, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Danger — risk-critical red */
.btn-danger {
  background-color: var(--risk-critical);
  border-color: var(--risk-critical);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(176, 36, 36, 0.2);
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: #8c1c1c;
  border-color: #8c1c1c;
  box-shadow: 0 4px 8px rgba(176, 36, 36, 0.3);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Secondary — outlined eco-primary */
.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--eco-primary);
  color: var(--eco-primary);
  box-shadow: none;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--eco-primary);
  border-color: var(--eco-primary);
  color: #ffffff;
}

/* Info */
.btn-info {
  background-color: #0077a8;
  border-color: #0077a8;
  color: #ffffff;
}
.btn-info:hover,
.btn-info:focus {
  background-color: #005f86;
  border-color: #005f86;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Auth button — login/register pages */
.btn-auth {
  background: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-secondary) 100%);
  border: none;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 8px rgba(29, 92, 74, 0.3);
  border-radius: var(--radius-md);
  transition: all 0.3s var(--ease-standard);
}
.btn-auth:hover {
  background: linear-gradient(135deg, var(--eco-secondary) 0%, var(--eco-accent) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(29, 92, 74, 0.4);
  color: #ffffff;
}
.btn-auth:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(29, 92, 74, 0.3);
}

/* Remove Bootstrap blue bleed from table action buttons */
.btn-default,
.btn-flat {
  color: var(--text-primary);
  background-color: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.btn-default:hover,
.btn-flat:hover {
  background-color: var(--surface-body);
  border-color: var(--border-color-strong);
  color: var(--eco-primary);
}

/* Small buttons */
.btn-sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  border-radius: var(--radius-md);
  gap: 0.3em;
}

/* Outline variants — modern soft style */
.btn-outline-primary {
  border-color: var(--eco-accent);
  color: var(--eco-primary);
  border-width: 1.5px;
}
.btn-outline-primary:hover {
  background: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-secondary) 100%);
  border-color: var(--eco-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(29, 92, 74, 0.25);
}


/* ============================================================
   10. BADGES & STATUS INDICATORS
   ============================================================ */

/* Modern pill badges with soft translucent backgrounds */
.badge {
  border-radius: var(--radius-pill) !important;
  padding: 0.35em 0.85em !important;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.badge.bg-primary {
  background-color: rgba(29, 92, 74, 0.12) !important;
  color: var(--eco-primary) !important;
  border-color: rgba(29, 92, 74, 0.20);
}
.badge.bg-success {
  background-color: rgba(30, 122, 78, 0.12) !important;
  color: #15713d !important;
  border-color: rgba(30, 122, 78, 0.20);
}
.badge.bg-warning {
  background-color: rgba(168, 114, 0, 0.12) !important;
  color: #8a5d00 !important;
  border-color: rgba(168, 114, 0, 0.20);
}
.badge.bg-danger {
  background-color: rgba(176, 36, 36, 0.12) !important;
  color: #991f1f !important;
  border-color: rgba(176, 36, 36, 0.20);
}
.badge.bg-secondary {
  background-color: rgba(107, 140, 126, 0.12) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(107, 140, 126, 0.20);
}
.badge.bg-info {
  background-color: rgba(0, 119, 168, 0.12) !important;
  color: #005f86 !important;
  border-color: rgba(0, 119, 168, 0.20);
}

/* Risk level badges (used in crop management) */
.badge-risk-low {
  background-color: var(--risk-low);
  color: #ffffff;
}
.badge-risk-moderate {
  background-color: var(--risk-moderate);
  color: #ffffff;
}
.badge-risk-high {
  background-color: var(--risk-high);
  color: #ffffff;
}
.badge-risk-critical {
  background-color: var(--risk-critical);
  color: #ffffff;
}

/* Role badges — distinct but harmonious */
.badge-role-admin {
  background-color: var(--eco-primary);
  color: #ffffff;
}
.badge-role-rcpc {
  background-color: #2b5f8a;
  color: #ffffff;
}
.badge-role-mao {
  background-color: #6a4e8a;
  color: #ffffff;
}
.badge-role-coop {
  background-color: #2e7a6b;
  color: #ffffff;
}
.badge-role-philrice {
  background-color: #7a6e2e;
  color: #ffffff;
}

/* Status indicator dots */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--space-1);
  vertical-align: middle;
}
.status-dot.active   {
  background-color: var(--risk-low);
  animation: pulse-dot 2.5s ease-in-out infinite;
}
.status-dot.inactive { background-color: var(--text-muted); }
.status-dot.warning  { background-color: var(--risk-moderate); }
.status-dot.danger   { background-color: var(--risk-critical); }


/* ============================================================
   11. FORMS
   ============================================================ */
.form-label,
label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.form-control,
.form-select {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  background-color: var(--surface-input);
  font-size: 0.88rem;
  padding: 0.5rem 0.9rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-select {
  padding-right: 2.2rem;
}

/* Small variant */
.form-control-sm,
.form-select-sm {
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-md);
}
.form-select-sm {
  padding-right: 2rem;
}

/* Eco focus ring */
.form-control:focus,
.form-select:focus {
  border-color: var(--eco-accent) !important;
  box-shadow: 0 0 0 3px rgba(63, 170, 120, 0.18) !important;
  outline: none;
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--surface-body);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.65;
}

/* Form text / helper */
.form-text {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Invalid state */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--risk-critical);
}
.invalid-feedback {
  color: var(--risk-critical);
  font-size: 0.8rem;
}

/* Valid state */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--risk-low);
}

/* Input groups */
.input-group-text {
  background-color: var(--surface-body);
  border-color: var(--border-color);
  color: var(--text-secondary);
  border-radius: var(--radius-lg);
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .input-group-text:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Checkboxes / radios */
.form-check-input:checked {
  background-color: var(--eco-primary);
  border-color: var(--eco-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(63, 170, 120, 0.18);
  border-color: var(--eco-accent);
}

/* Section headers inside forms (register page) */
.text-muted.fw-bold {
  color: var(--eco-primary) !important;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--eco-secondary);
  padding-bottom: var(--space-2);
}

/* --- Button Groups (filter tabs) --- */
.btn-group {
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.btn-group > .btn {
  border-radius: 0 !important;
}
.btn-group > .btn:first-child {
  border-top-left-radius: var(--radius-pill) !important;
  border-bottom-left-radius: var(--radius-pill) !important;
}
.btn-group > .btn:last-child,
.btn-group > label.btn:last-of-type {
  border-top-right-radius: var(--radius-pill) !important;
  border-bottom-right-radius: var(--radius-pill) !important;
}

/* btn-check checked state — eco gradient fill */
.btn-check:checked + .btn-outline-secondary {
  background: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-secondary) 100%) !important;
  border-color: var(--eco-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(29, 92, 74, 0.25);
}

/* --- Modals --- */
.modal-content {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: clip;
}
.modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: var(--space-5) var(--space-6);
}
.modal-header .modal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}
.modal-body {
  padding: var(--space-6);
}
.modal-body h5 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--eco-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-color);
}
.modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: var(--space-4) var(--space-6);
}

/* Dark mode: btn-group checked state */
html[data-bs-theme="dark"] .btn-check:checked + .btn-outline-secondary {
  background: linear-gradient(135deg, var(--eco-accent) 0%, var(--eco-primary) 100%) !important;
  border-color: var(--eco-accent) !important;
}

/* Dark mode: modals */
html[data-bs-theme="dark"] .modal-header {
  border-bottom-color: var(--border-color);
}
html[data-bs-theme="dark"] .modal-footer {
  border-top-color: var(--border-color);
}
html[data-bs-theme="dark"] .modal-body h5 {
  color: var(--eco-accent);
}


/* ============================================================
   12. LOGIN / AUTH PAGES
   ============================================================ */

/* --- Hide AdminLTE skip-links --- */
.skip-link,
.skip-link:focus {
  display: none !important;
}

/* --- Page background with blur --- */
.login-page,
body.login-page {
  position: relative;
  overflow: hidden;
  background-color: #0a1610 !important;
  border: none !important;
  outline: none !important;
  margin: 0 !important;
}

body.login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../img/login-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(6px) brightness(0.7);
  transform: scale(1.08);
  z-index: 0;
}

body.login-page > .container-fluid {
  position: relative;
  z-index: 1;
}

/* Override AdminLTE bg-body-secondary */
.login-page.bg-body-secondary {
  --bs-body-bg: transparent;
  background-color: transparent !important;
}

/* --- Glassmorphism Login Card --- */
.login-page .card {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--radius-xl) !important;
  background: rgba(10, 30, 22, 0.72) !important;
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
              0 2px 8px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  max-width: 440px;
  margin: 0 auto;
  color: #e4ede9;
}

.login-page .card-body {
  padding: 2.5rem !important;
}

/* --- Logo --- */
.logo-img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* --- System title --- */
.system-title {
  background: linear-gradient(135deg, var(--eco-light) 0%, var(--eco-accent) 50%, var(--eco-highlight) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0.5px;
  margin-bottom: 0 !important;
}

@supports not (-webkit-background-clip: text) {
  .system-title {
    color: var(--eco-light);
    -webkit-text-fill-color: unset;
  }
}

/* --- Subtitle text --- */
.login-page .text-muted {
  color: rgba(168, 213, 190, 0.7) !important;
}

/* --- Theme toggle button --- */
.theme-toggle-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(228, 237, 233, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s var(--ease-standard);
  z-index: 2;
  padding: 0;
}
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  transform: rotate(15deg);
}

/* --- Custom login form inputs --- */
.login-page .input-group {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s var(--ease-standard),
              box-shadow 0.3s var(--ease-standard),
              background 0.3s var(--ease-standard);
  overflow: hidden;
}
.login-page .input-group:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}
.login-page .input-group:focus-within {
  border-color: var(--eco-accent);
  box-shadow: 0 0 0 3px rgba(63, 170, 120, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.login-page .form-control {
  background: transparent !important;
  border: none !important;
  color: #e4ede9 !important;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  box-shadow: none !important;
}
.login-page .form-control::placeholder {
  color: rgba(168, 213, 190, 0.45) !important;
}
.login-page .form-control:focus {
  box-shadow: none !important;
}

.login-page .input-group-text {
  background: transparent !important;
  border: none !important;
  color: rgba(168, 213, 190, 0.5);
  padding-right: 1rem;
}

.login-page .toggle-password {
  background: transparent !important;
  border: none !important;
  color: rgba(168, 213, 190, 0.5);
  padding: 0.5rem 0.85rem;
  transition: color 0.2s ease;
}
.login-page .toggle-password:hover {
  color: var(--eco-accent);
}

/* --- Auth button — modern gradient with shimmer --- */
.login-page .btn-auth {
  width: 100%;
  padding: 0.8rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ffffff;
  justify-content: center;
  background: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-accent) 50%, var(--eco-secondary) 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(63, 170, 120, 0.35);
  transition: background-position 0.5s var(--ease-standard),
              transform 0.15s var(--ease-standard),
              box-shadow 0.3s var(--ease-standard);
}
.login-page .btn-auth:hover {
  background-position: 100% 50%;
  box-shadow: 0 6px 24px rgba(63, 170, 120, 0.45);
  transform: translateY(-2px);
  color: #ffffff;
}
.login-page .btn-auth:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(63, 170, 120, 0.3);
}
/* Shimmer sweep on hover */
.login-page .btn-auth::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.6s var(--ease-standard);
}
.login-page .btn-auth:hover::after {
  left: 100%;
}

/* --- Login alert --- */
.login-page .alert {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e4ede9 !important;
  border-radius: var(--radius-md);
}

/* --- Light theme overrides for login page --- */
html[data-theme="light"] body.login-page::before {
  filter: blur(6px) brightness(0.95);
}


html[data-theme="light"] .login-page .card {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18),
              0 2px 8px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  color: #1a2e26;
}

html[data-theme="light"] .login-page .text-muted {
  color: var(--text-secondary) !important;
}

html[data-theme="light"] .login-page .input-group {
  border: 1px solid rgba(29, 92, 74, 0.25);
  background: rgba(255, 255, 255, 0.6);
}
html[data-theme="light"] .login-page .input-group:hover {
  border-color: rgba(29, 92, 74, 0.35);
  background: rgba(255, 255, 255, 0.75);
}
html[data-theme="light"] .login-page .input-group:focus-within {
  border-color: var(--eco-accent);
  box-shadow: 0 0 0 3px rgba(63, 170, 120, 0.2);
  background: rgba(255, 255, 255, 0.85);
}

html[data-theme="light"] .login-page .form-control {
  color: #1a2e26 !important;
}
html[data-theme="light"] .login-page .form-control::placeholder {
  color: #3d5c4e !important;
  opacity: 0.8 !important;
}
html[data-theme="light"] .login-page .input-group-text {
  color: #4a6358;
}
html[data-theme="light"] .login-page .toggle-password {
  color: #4a6358;
}
html[data-theme="light"] .login-page .toggle-password:hover {
  color: var(--eco-primary);
}

html[data-theme="light"] .login-page .text-muted {
  color: #3d5c4e !important;
}

html[data-theme="light"] .system-title {
  background: linear-gradient(135deg, var(--eco-primary) 0%, #0d5235 50%, var(--eco-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

html[data-theme="light"] .theme-toggle-btn {
  border: 1px solid rgba(29, 92, 74, 0.2);
  background: rgba(255, 255, 255, 0.5);
  color: #3d5c4e;
}
html[data-theme="light"] .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--eco-primary);
  border-color: rgba(29, 92, 74, 0.35);
}

html[data-theme="light"] .login-page .btn-auth {
  box-shadow: 0 4px 16px rgba(29, 92, 74, 0.3);
}
html[data-theme="light"] .login-page .btn-auth:hover {
  box-shadow: 0 6px 24px rgba(29, 92, 74, 0.4);
}


/* ============================================================
   12b. SWEETALERT2 MODERNIZATION
   ============================================================ */

/* Backdrop blur */
.swal2-container {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Popup card */
.swal2-popup {
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2),
              0 4px 16px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--border-color);
  padding: 2rem 1.5rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Title */
.swal2-title {
  font-family: 'IBM Plex Sans Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  color: var(--text-primary) !important;
}

/* Content text */
.swal2-html-container {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.95rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
}

/* Custom icon colors */
.swal2-icon.swal2-success {
  border-color: var(--risk-low) !important;
  color: var(--risk-low) !important;
}
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
  background-color: var(--risk-low) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(30, 122, 78, 0.3) !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--risk-moderate) !important;
  color: var(--risk-moderate) !important;
}

.swal2-icon.swal2-error {
  border-color: var(--risk-critical) !important;
}
.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
  background-color: var(--risk-critical) !important;
}

/* Buttons */
.swal2-actions .swal2-styled {
  border-radius: var(--radius-md) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 0.6rem 1.8rem !important;
  transition: all 0.2s var(--ease-standard) !important;
}

.swal2-actions .swal2-confirm {
  background: linear-gradient(135deg, var(--eco-primary), var(--eco-accent)) !important;
  box-shadow: 0 2px 8px rgba(29, 92, 74, 0.3) !important;
}
.swal2-actions .swal2-confirm:hover {
  box-shadow: 0 4px 16px rgba(29, 92, 74, 0.4) !important;
  transform: translateY(-1px);
}

.swal2-actions .swal2-cancel {
  background-color: var(--risk-critical) !important;
  box-shadow: 0 2px 8px rgba(176, 36, 36, 0.2) !important;
}

.swal2-actions .swal2-deny {
  border-radius: var(--radius-md) !important;
}

/* Timer progress bar */
.swal2-timer-progress-bar {
  background: var(--eco-accent) !important;
}

/* Input in SweetAlert */
.swal2-input {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-color) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.swal2-input:focus {
  border-color: var(--eco-accent) !important;
  box-shadow: var(--shadow-glow) !important;
}


/* ============================================================
   13. MICRO-ANIMATIONS
   ============================================================ */

/* Card entrance animation */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-content .card,
.app-content .info-box {
  animation: card-enter 0.35s var(--ease-decelerate) both;
}

/* Staggered entrance for info-box grid items */
.app-content .info-box:nth-child(1) { animation-delay: 0.04s; }
.app-content .info-box:nth-child(2) { animation-delay: 0.08s; }
.app-content .info-box:nth-child(3) { animation-delay: 0.12s; }
.app-content .info-box:nth-child(4) { animation-delay: 0.16s; }
.app-content .info-box:nth-child(5) { animation-delay: 0.20s; }
.app-content .info-box:nth-child(6) { animation-delay: 0.24s; }

/* Status dot pulse animation */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 122, 78, 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(30, 122, 78, 0); }
}


/* ============================================================
   14. ACCESSIBILITY — FOCUS RINGS
   ============================================================ */

/* High-visibility focus ring for all interactive elements */
:focus-visible {
  outline: 2px solid var(--eco-accent);
  outline-offset: 2px;
}

/* Override Bootstrap's default focus ring with our branded one */
.btn:focus-visible {
  box-shadow: var(--shadow-glow) !important;
  outline: 2px solid var(--eco-accent);
  outline-offset: 2px;
}

/* Navigation link focus rings */
.app-sidebar .nav-link:focus-visible {
  outline: 2px solid rgba(63, 170, 120, 0.7);
  outline-offset: -2px;
  box-shadow: none;
}
.app-header .nav-link:focus-visible {
  outline: 2px solid var(--eco-accent);
  outline-offset: 2px;
}


/* ============================================================
   15. REDUCED MOTION (Accessibility)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .app-content .card,
  .app-content .info-box {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .status-dot.active {
    animation: none;
    box-shadow: none;
  }

  .app-sidebar .sidebar-menu .nav-link:hover {
    transform: none;
  }

  .info-box:hover,
  .btn-primary:hover,
  .btn-success:hover,
  .btn-warning:hover,
  .btn-danger:hover,
  .btn-info:hover,
  .btn-auth:hover {
    transform: none;
  }
}


/* ============================================================
   16. DARK MODE (data-bs-theme="dark")
   ============================================================ */
html[data-bs-theme="dark"] {
  --surface-body:      #0d1a14;
  --surface-card:      #132219;
  --surface-navbar:    rgba(13, 26, 20, 0.90);
  --surface-input:     #1a3329;
  --text-primary:      #dce8e3;
  --text-secondary:    #93b5a5;
  --text-muted:        #5f8a78;
  --border-color:        #1e3829;
  --border-color-strong: #2d5040;
  --glass-bg:      rgba(13, 26, 20, 0.90);
  --glass-border:  rgba(255, 255, 255, 0.06);
  --shadow-card:        0 1px 3px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.25);
  --shadow-card-hover:  0 4px 8px rgba(0,0,0,0.40), 0 12px 32px rgba(0,0,0,0.35);
  --bs-body-bg: var(--surface-body);
  --bs-body-color: var(--text-primary);
  --bs-tertiary-bg: var(--surface-body);
  --bs-border-color: var(--border-color);
  color-scheme: dark;
}

html[data-bs-theme="dark"] body {
  background-color: var(--surface-body) !important;
  color: var(--text-primary);
}

/* Navbar dark */
html[data-bs-theme="dark"] .app-header,
html[data-bs-theme="dark"] .app-header.bg-body,
html[data-bs-theme="dark"] .app-header.navbar-glass {
  background-color: var(--glass-bg) !important;
  border-bottom-color: var(--glass-border);
}

/* Cards dark */
html[data-bs-theme="dark"] .card {
  background-color: var(--surface-card);
  box-shadow: var(--shadow-card);
  border-color: var(--border-color) !important;
}
html[data-bs-theme="dark"] .card-header {
  background-color: rgba(255,255,255,0.03) !important;
  border-bottom-color: var(--border-color);
  color: var(--text-primary);
}
html[data-bs-theme="dark"] .card-footer {
  background-color: rgba(255,255,255,0.02);
}

/* Tables dark */
html[data-bs-theme="dark"] .table { color: var(--text-primary); border-color: var(--border-color); }
html[data-bs-theme="dark"] .table thead th {
  background-color: transparent !important;
  color: var(--text-muted);
  border-bottom-color: var(--border-color) !important;
}
html[data-bs-theme="dark"] .table tbody td {
  border-color: rgba(255, 255, 255, 0.04);
}
html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: rgba(255,255,255,0.02); }
html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td { background-color: rgba(63,170,120,0.06) !important; }

/* Badges dark */
html[data-bs-theme="dark"] .badge.bg-primary {
  background-color: rgba(63, 170, 120, 0.15) !important;
  color: var(--eco-light) !important;
  border-color: rgba(63, 170, 120, 0.25);
}
html[data-bs-theme="dark"] .badge.bg-success {
  background-color: rgba(30, 122, 78, 0.18) !important;
  color: #6fd6a0 !important;
  border-color: rgba(30, 122, 78, 0.30);
}
html[data-bs-theme="dark"] .badge.bg-warning {
  background-color: rgba(255, 193, 7, 0.15) !important;
  color: #ffc942 !important;
  border-color: rgba(255, 193, 7, 0.25);
}
html[data-bs-theme="dark"] .badge.bg-danger {
  background-color: rgba(220, 53, 69, 0.15) !important;
  color: #f47c8a !important;
  border-color: rgba(220, 53, 69, 0.25);
}
html[data-bs-theme="dark"] .badge.bg-secondary {
  background-color: rgba(147, 181, 165, 0.12) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(147, 181, 165, 0.20);
}
html[data-bs-theme="dark"] .badge.bg-info {
  background-color: rgba(13, 202, 240, 0.15) !important;
  color: #5dd9f5 !important;
  border-color: rgba(13, 202, 240, 0.25);
}

/* Buttons dark — outline variant */
html[data-bs-theme="dark"] .btn-outline-primary {
  border-color: var(--eco-accent);
  color: var(--eco-accent);
}

/* Forms dark */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .dataTables_filter input[type="search"],
html[data-bs-theme="dark"] .dataTables_length select {
  background-color: var(--surface-input); border-color: var(--border-color); color: var(--text-primary);
}
html[data-bs-theme="dark"] .dataTables_length select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16'%3E%3Cpath fill='%233faa78' d='M4.47 6.47a.9.9 0 0 1 1.27 0L8 8.73l2.26-2.26a.9.9 0 1 1 1.27 1.27l-2.9 2.9a.9.9 0 0 1-1.27 0l-2.9-2.9a.9.9 0 0 1 0-1.27z'/%3E%3C/svg%3E") !important;
}
html[data-bs-theme="dark"] .input-group-text {
  background-color: rgba(255,255,255,0.04); border-color: var(--border-color); color: var(--text-secondary);
}

/* Select2 dark */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--surface-input);
  border-color: var(--border-color);
  color: var(--text-primary);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
html[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--surface-card) !important;
  border-color: var(--border-color) !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search__field,
html[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--surface-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
  color: var(--text-primary);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: rgba(63,170,120,0.15);
  color: var(--text-primary);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--selected {
  background-color: rgba(63,170,120,0.25);
}

/* Info-box dark */
html[data-bs-theme="dark"] .info-box { background-color: var(--surface-card); border-color: var(--border-color) !important; }
html[data-bs-theme="dark"] .info-box .info-box-text { color: var(--text-secondary); }
html[data-bs-theme="dark"] .info-box .info-box-number { color: var(--text-primary); }

/* Dropdown dark */
html[data-bs-theme="dark"] .dropdown-menu { background-color: var(--surface-card); border-color: var(--border-color); }
html[data-bs-theme="dark"] .dropdown-item { color: var(--text-primary); }
html[data-bs-theme="dark"] .dropdown-item:hover { background-color: rgba(63,170,120,0.10); }

/* Notification dropdown dark */
html[data-bs-theme="dark"] .notification-item.bg-light {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-bs-theme="dark"] .notification-item p {
  color: var(--text-primary);
}
html[data-bs-theme="dark"] .notification-item .text-muted {
  color: var(--text-muted) !important;
}
html[data-bs-theme="dark"] .dropdown-header {
  color: var(--text-secondary);
}
html[data-bs-theme="dark"] #markAllAsReadBtn {
  color: var(--eco-accent);
}
html[data-bs-theme="dark"] #notificationBadge {
  background-color: #dc3545 !important;
  color: #ffffff !important;
}
#notificationDropdown {
  position: relative;
}

/* User footer dark */
html[data-bs-theme="dark"] .user-footer { background-color: var(--surface-card) !important; border-top-color: var(--border-color) !important; }
html[data-bs-theme="dark"] .user-footer .btn { background-color: var(--surface-input); border-color: var(--border-color); color: var(--text-primary); }

/* SweetAlert dark */
html[data-bs-theme="dark"] .swal2-popup { background-color: var(--surface-card) !important; color: var(--text-primary) !important; }
html[data-bs-theme="dark"] .swal2-title { color: var(--text-primary) !important; }
html[data-bs-theme="dark"] .swal2-html-container { color: var(--text-secondary) !important; }

/* Modal dark */
html[data-bs-theme="dark"] .modal-content { background-color: var(--surface-card); border-color: var(--border-color); color: var(--text-primary); }
html[data-bs-theme="dark"] .modal-header { border-bottom-color: var(--border-color); }
html[data-bs-theme="dark"] .modal-footer { border-top-color: var(--border-color); }

/* Footer dark */
html[data-bs-theme="dark"] .app-footer,
html[data-bs-theme="dark"] .main-footer {
  background-color: var(--surface-card) !important; border-top-color: var(--border-color) !important; color: var(--text-secondary);
}
html[data-bs-theme="dark"] .app-footer a,
html[data-bs-theme="dark"] .main-footer a { color: var(--eco-accent); }

/* Alerts dark */
html[data-bs-theme="dark"] .alert-info { background-color: rgba(0,119,168,0.15) !important; border-color: rgba(0,119,168,0.25) !important; color: var(--text-primary) !important; }
html[data-bs-theme="dark"] .alert-success { background-color: rgba(30,122,78,0.15) !important; border-color: rgba(30,122,78,0.25) !important; color: var(--text-primary) !important; }
html[data-bs-theme="dark"] .alert-warning { background-color: rgba(168,114,0,0.15) !important; border-color: rgba(168,114,0,0.25) !important; color: var(--text-primary) !important; }
html[data-bs-theme="dark"] .alert-danger { background-color: rgba(176,36,36,0.15) !important; border-color: rgba(176,36,36,0.25) !important; color: var(--text-primary) !important; }

/* Page title dark */
html[data-bs-theme="dark"] .app-content-header h3,
html[data-bs-theme="dark"] .app-content-header h1,
html[data-bs-theme="dark"] .content-title { color: var(--text-primary); }

/* DataTables dark */
html[data-bs-theme="dark"] .dataTables_info { color: var(--text-muted); }
html[data-bs-theme="dark"] .dataTables_length label,
html[data-bs-theme="dark"] .dataTables_filter label { color: var(--text-secondary); }
html[data-bs-theme="dark"] .dataTables_paginate .page-link { color: var(--eco-accent) !important; border-color: var(--border-color) !important; }


/* Log pre block (audit log details modal) */
.log-pre-block { background-color: #f8f9fa; color: #212529; }
html[data-bs-theme="dark"] .log-pre-block { background-color: var(--surface-input); color: var(--text-primary); }

/* ============================================================
   17. RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 768px) {
  .logo-img {
    width: 100px;
    height: 100px;
  }

  .system-title {
    font-size: 2rem;
  }

  .container-fluid {
    padding: 1rem;
  }

  .card {
    margin: 0.5rem;
  }

  .card-body {
    padding: var(--space-4);
  }

  /* Table horizontal scroll on mobile */
  .table-responsive-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* DataTables — wrap filter/length row */
  .dataTables_wrapper .row {
    flex-direction: column;
  }
  .dataTables_wrapper .row:first-child > div {
    width: 100%;
  }
  .dataTables_wrapper .dataTables_filter {
    justify-content: flex-start;
  }
  .dataTables_filter label {
    width: 100%;
    justify-content: space-between;
  }
  .dataTables_filter input[type="search"] {
    width: 100%;
  }
}

/* ============================================================
   18. DASHBOARD
   ============================================================ */

/* --- Welcome Banner --- */
.dashboard-welcome-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3);
}
.dashboard-welcome-banner h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: var(--text-primary);
}
.dashboard-welcome-banner p {
  font-size: 0.875rem;
}
.dashboard-welcome-banner .dashboard-tabs {
  border-bottom: none;
  margin-bottom: -2px;
}

/* --- Section Headers --- */
.dashboard-section-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--eco-primary), var(--eco-accent), transparent) 1;
}
.dashboard-section-header .section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0;
}
.dashboard-section-header .section-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
}

#stats-container {
  margin-bottom: 0;
}

/* --- Metric Cards --- */
.dashboard-metric-card {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-2) var(--space-3);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition-base) var(--ease-standard),
              transform var(--transition-base) var(--ease-standard);
  animation: card-enter 0.35s var(--ease-decelerate) both;
}
.dashboard-metric-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.row > [class*="col"]:nth-child(1) > .dashboard-metric-card { animation-delay: 0.04s; }
.row > [class*="col"]:nth-child(2) > .dashboard-metric-card { animation-delay: 0.08s; }
.row > [class*="col"]:nth-child(3) > .dashboard-metric-card { animation-delay: 0.12s; }
.row > [class*="col"]:nth-child(4) > .dashboard-metric-card { animation-delay: 0.16s; }
.row > [class*="col"]:nth-child(5) > .dashboard-metric-card { animation-delay: 0.20s; }
.row > [class*="col"]:nth-child(6) > .dashboard-metric-card { animation-delay: 0.24s; }

/* --- Metric Card Accent Borders (Visual Hierarchy - matches sparkline colors) --- */
.dashboard-metric-card[data-accent] {
  border-top: 3px solid transparent;
}
.dashboard-metric-card[data-accent="farmers"]   { border-top-color: #28a745; }
.dashboard-metric-card[data-accent="farms"]      { border-top-color: #0d6efd; }
.dashboard-metric-card[data-accent="devices"]    { border-top-color: #0dcaf0; }
.dashboard-metric-card[data-accent="rbb-count"]  { border-top-color: #ffc107; }
.dashboard-metric-card[data-accent="rbb-weight"] { border-top-color: #dc3545; }
.dashboard-metric-card[data-accent="users"]      { border-top-color: #6c757d; }

.metric-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}
.metric-icon {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 1.2rem;
  opacity: 0.45;
  color: var(--eco-accent);
  z-index: 0;
  transition: opacity var(--transition-base);
}
.dashboard-metric-card:hover .metric-icon {
  opacity: 0.6;
}
.metric-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.metric-value {
  font-family: 'IBM Plex Sans Condensed', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--text-primary);
  line-height: 1.15;
  display: inline;
}
.metric-value-row {
  display: flex;
  align-items: baseline;
  gap: 0;
}
.metric-unit {
  font-family: 'IBM Plex Sans Condensed', 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 1px;
}
.metric-value[title] {
  cursor: default;
  border-bottom: 1px dashed var(--border-color);
}
.metric-sparkline {
  height: 22px;
  margin-top: 2px;
}

/* ============================================================
   ANALYTICS TAB — Full Overhaul Styles
   ============================================================ */

/* --- Analytics Severity Banner --- */
.analytics-severity-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  margin-bottom: var(--space-3);
  border: 1px solid;
  animation: card-enter 0.35s var(--ease-decelerate) both;
}
.analytics-severity-banner--loading {
  background: var(--surface-card);
  border-color: var(--border-color);
  color: var(--text-muted);
}
.analytics-severity-banner--none {
  background: var(--surface-card);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.analytics-severity-banner--low {
  background: rgba(63, 170, 120, 0.08);
  border-color: rgba(63, 170, 120, 0.25);
  color: #1d5c4a;
}
.analytics-severity-banner--moderate {
  background: rgba(255, 193, 7, 0.08);
  border-color: rgba(255, 193, 7, 0.3);
  color: #7a6100;
}
.analytics-severity-banner--high {
  background: rgba(253, 126, 20, 0.08);
  border-color: rgba(253, 126, 20, 0.3);
  color: #8a4500;
}
.analytics-severity-banner--critical {
  background: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.3);
  color: #8b1a2b;
  animation: card-enter 0.35s var(--ease-decelerate) both, severity-pulse 2s ease-in-out infinite;
}
@keyframes severity-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.12); }
}
html[data-bs-theme="dark"] .analytics-severity-banner--low {
  background: rgba(63, 170, 120, 0.12);
  border-color: rgba(63, 170, 120, 0.3);
  color: #a8d5be;
}
html[data-bs-theme="dark"] .analytics-severity-banner--moderate {
  background: rgba(255, 193, 7, 0.10);
  border-color: rgba(255, 193, 7, 0.25);
  color: #ffd54f;
}
html[data-bs-theme="dark"] .analytics-severity-banner--high {
  background: rgba(253, 126, 20, 0.10);
  border-color: rgba(253, 126, 20, 0.25);
  color: #ffab76;
}
html[data-bs-theme="dark"] .analytics-severity-banner--critical {
  background: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.3);
  color: #f5a0a8;
}
.analytics-severity-icon {
  font-size: 1.5rem;
  width: 2.5rem;
  text-align: center;
  flex-shrink: 0;
}
.analytics-severity-badge {
  display: inline-block;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  background: currentColor;
  color: #fff !important;
}
.analytics-severity-banner--low .analytics-severity-badge    { background: #3faa78; }
.analytics-severity-banner--moderate .analytics-severity-badge { background: #ffc107; color: #333 !important; }
.analytics-severity-banner--high .analytics-severity-badge   { background: #fd7e14; }
.analytics-severity-banner--critical .analytics-severity-badge { background: #dc3545; }
.analytics-severity-banner--none .analytics-severity-badge   { background: var(--text-muted); }
.analytics-severity-trend {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.85;
}
.analytics-severity-message {
  font-size: 0.82rem;
  margin-top: 0.15rem;
  opacity: 0.9;
  line-height: 1.4;
}
.analytics-severity-stat {
  text-align: right;
  flex-shrink: 0;
  padding-left: var(--space-4);
  border-left: 1px solid currentColor;
  opacity: 0.7;
}
.analytics-severity-stat-value {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.1;
}
.analytics-severity-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- Analytics KPI Cards (overhauled) --- */
.analytics-kpi-card {
  transition: box-shadow var(--transition-base) var(--ease-standard),
              transform var(--transition-base) var(--ease-standard);
  animation: card-enter 0.35s var(--ease-decelerate) both;
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.analytics-kpi-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.analytics-kpi-card .card-body {
  padding: var(--space-3);
  position: relative;
}
.analytics-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.analytics-kpi-icon-wrap {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.analytics-kpi-icon--detections { background: rgba(255, 193, 7, 0.15); color: #ffc107 !important; }
.analytics-kpi-icon--weight    { background: rgba(220, 53, 69, 0.12); color: #dc3545 !important; }
.analytics-kpi-icon--avg       { background: rgba(13, 202, 240, 0.12); color: #0dcaf0 !important; }
.analytics-kpi-icon--peak      { background: rgba(63, 170, 120, 0.12); color: #3faa78 !important; }
.analytics-kpi-icon-wrap i { color: inherit !important; }
.analytics-kpi-value {
  font-family: 'IBM Plex Sans Condensed', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 0.1rem;
}
.analytics-kpi-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.analytics-sparkline {
  height: 32px;
  margin: 0 -8px -4px;
}

/* Delta badges */
.analytics-delta {
  display: inline-flex;
  align-items: center;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
.analytics-delta .delta-positive {
  color: #3faa78;
}
.analytics-delta .delta-negative {
  color: #dc3545;
}
.analytics-delta .delta-flat {
  color: var(--text-muted);
}
.analytics-delta i {
  margin-right: 0.2rem;
  font-size: 0.62rem;
}

/* Chart average badge next to chart title */
.analytics-chart-badge {
  display: inline-block;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(119, 93, 208, 0.12);
  color: #775DD0;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Chart subtitle (for pattern analysis charts) */
.analytics-chart-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 0.4rem;
}

/* Environmental summary pills */
.analytics-env-summary {
  display: flex;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.analytics-env-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface-body);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.analytics-env-pill i {
  font-size: 0.65rem;
  color: var(--eco-accent);
}

/* Correlation explorer controls */
.analytics-corr-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.analytics-corr-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.analytics-corr-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 3rem;
}
.analytics-corr-controls .btn-group .btn {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  letter-spacing: 0.01em;
}
.analytics-corr-controls .btn-group .btn.active {
  background: var(--eco-accent) !important;
  border-color: var(--eco-accent) !important;
  color: #fff !important;
}

/* Custom tooltip for scatter chart */
.apexcharts-tooltip-custom {
  padding: 0.5rem 0.75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  line-height: 1.6;
}

/* Section dividers */
.analytics-section-divider {
  margin: var(--space-4) 0 var(--space-3);
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: var(--space-2);
}
.analytics-section-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--eco-accent);
}
.analytics-section-label i {
  margin-right: 0.25rem;
}

/* --- Analytics Sub-Tabs --- */
.analytics-sub-tabs {
  border-bottom: 1px solid var(--border-color);
}
.analytics-sub-tabs .nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  border: none;
  padding: 0.5rem 1rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.analytics-sub-tabs .nav-link:hover {
  color: var(--text-primary);
  border-bottom-color: var(--border-color-strong);
}
.analytics-sub-tabs .nav-link.active {
  color: var(--eco-accent);
  border-bottom-color: var(--eco-accent);
  background: transparent;
}
.analytics-sub-tabs .nav-link i {
  margin-right: 0.3rem;
}

/* --- Conditional Cell Formatting (DataTable severity) --- */
.cell-severity-low {
  background-color: rgba(63, 170, 120, 0.10) !important;
  border-left: 2px solid #3faa78 !important;
}
.cell-severity-moderate {
  background-color: rgba(255, 193, 7, 0.12) !important;
  border-left: 2px solid #ffc107 !important;
}
.cell-severity-high {
  background-color: rgba(253, 126, 20, 0.12) !important;
  border-left: 2px solid #fd7e14 !important;
  font-weight: 600;
}
.cell-severity-critical {
  background-color: rgba(220, 53, 69, 0.10) !important;
  border-left: 2px solid #dc3545 !important;
  font-weight: 700;
  color: #dc3545;
}
.cell-env-warning {
  background-color: rgba(255, 193, 7, 0.08) !important;
}
.cell-env-critical {
  background-color: rgba(253, 126, 20, 0.10) !important;
  font-weight: 600;
}
html[data-bs-theme="dark"] .cell-severity-low {
  background-color: rgba(63, 170, 120, 0.15) !important;
}
html[data-bs-theme="dark"] .cell-severity-moderate {
  background-color: rgba(255, 193, 7, 0.15) !important;
}
html[data-bs-theme="dark"] .cell-severity-high {
  background-color: rgba(253, 126, 20, 0.15) !important;
  color: #ffab76;
}
html[data-bs-theme="dark"] .cell-severity-critical {
  background-color: rgba(220, 53, 69, 0.15) !important;
  color: #f5a0a8;
}
html[data-bs-theme="dark"] .cell-env-warning {
  background-color: rgba(255, 193, 7, 0.10) !important;
}
html[data-bs-theme="dark"] .cell-env-critical {
  background-color: rgba(253, 126, 20, 0.12) !important;
  color: #ffab76;
}

/* --- Top Hotspots Widget --- */
.analytics-hotspot-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.analytics-hotspot-title i {
  color: var(--eco-accent);
  margin-right: 0.3rem;
}
.analytics-hotspot-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hotspot-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  background: var(--surface-body);
  transition: background var(--transition-fast);
}
.hotspot-item:hover {
  background: var(--border-color);
}
.hotspot-rank {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  background: var(--eco-accent);
  color: #fff;
}
.hotspot-item:nth-child(1) .hotspot-rank { background: #ffc107; color: #333; }
.hotspot-item:nth-child(2) .hotspot-rank { background: #adb5bd; color: #333; }
.hotspot-item:nth-child(3) .hotspot-rank { background: #cd7f32; color: #fff; }
.hotspot-info {
  flex-grow: 1;
  min-width: 0;
}
.hotspot-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hotspot-location {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}
.hotspot-bar-track {
  height: 4px;
  border-radius: 2px;
  background: var(--border-color);
  overflow: hidden;
}
.hotspot-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s var(--ease-decelerate);
}
.hotspot-value {
  flex-shrink: 0;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
  min-width: 3.5rem;
  text-align: right;
}

/* --- Incident Status Banner --- */
.incident-status-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  margin-bottom: var(--space-3);
  border: 1px solid;
  animation: card-enter 0.35s var(--ease-decelerate) both;
}
.incident-status-banner--loading { background: var(--surface-card); border-color: var(--border-color); color: var(--text-muted); }
.incident-status-banner--none    { background: var(--surface-card); border-color: var(--border-color); color: var(--text-secondary); }
.incident-status-banner--clear   { background: rgba(63,170,120,0.08); border-color: rgba(63,170,120,0.25); color: #1d5c4a; }
.incident-status-banner--good    { background: rgba(13,202,240,0.08); border-color: rgba(13,202,240,0.25); color: #055160; }
.incident-status-banner--attention { background: rgba(255,193,7,0.08); border-color: rgba(255,193,7,0.3); color: #7a6100; }
.incident-status-banner--critical {
  background: rgba(220,53,69,0.08); border-color: rgba(220,53,69,0.3); color: #8b1a2b;
  animation: card-enter 0.35s var(--ease-decelerate) both, severity-pulse 2s ease-in-out infinite;
}
html[data-bs-theme="dark"] .incident-status-banner--clear    { background: rgba(63,170,120,0.12); color: #a8d5be; }
html[data-bs-theme="dark"] .incident-status-banner--good     { background: rgba(13,202,240,0.10); color: #9eeaf9; }
html[data-bs-theme="dark"] .incident-status-banner--attention { background: rgba(255,193,7,0.10); color: #ffd54f; }
html[data-bs-theme="dark"] .incident-status-banner--critical  { background: rgba(220,53,69,0.12); color: #f5a0a8; }
.incident-banner-icon { font-size: 1.5rem; width: 2.5rem; text-align: center; flex-shrink: 0; }
.incident-banner-badge {
  display: inline-block; font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.15rem 0.6rem; border-radius: 4px; color: #fff !important;
}
.incident-status-banner--clear .incident-banner-badge    { background: #3faa78; }
.incident-status-banner--good .incident-banner-badge     { background: #0dcaf0; color: #333 !important; }
.incident-status-banner--attention .incident-banner-badge { background: #ffc107; color: #333 !important; }
.incident-status-banner--critical .incident-banner-badge  { background: #dc3545; }
.incident-status-banner--none .incident-banner-badge      { background: var(--text-muted); }
.incident-banner-trend { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 0.78rem; font-weight: 600; opacity: 0.85; }
.incident-banner-message { font-size: 0.82rem; margin-top: 0.15rem; opacity: 0.9; line-height: 1.4; }
.incident-banner-stat { text-align: right; flex-shrink: 0; padding-left: var(--space-4); border-left: 1px solid currentColor; opacity: 0.7; }

/* --- Incident Channel Cards --- */
.incident-channel-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.75rem; border-radius: 8px;
  background: var(--surface-body); margin-bottom: 0.5rem;
  border: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}
.incident-channel-card:hover { background: var(--border-color); }
.incident-channel-icon { font-size: 1.1rem; flex-shrink: 0; width: 2rem; text-align: center; }
.incident-channel-info { flex-grow: 1; min-width: 0; }
.incident-channel-name {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: 0.82rem; color: var(--text-primary); margin-bottom: 0.1rem;
}
.incident-channel-stats {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.72rem; color: var(--text-muted);
}

/* --- Incident KPI Sub-label --- */
.analytics-kpi-sub {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.65rem; font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-body);
  padding: 0.1rem 0.4rem; border-radius: 8px;
}

/* --- Incident Table Enhancement --- */
.incident-table-enhanced tbody tr {
  transition: background-color var(--transition-fast);
}

/* --- Dashboard Chart Cards --- */
.dashboard-chart-card .card-header {
  border-bottom: 1px solid var(--border-color);
  padding: 0.4rem 0.75rem;
}
.dashboard-chart-card .card-header .card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.dashboard-chart-card .card-body {
  padding: 0.5rem 0.75rem;
}

/* --- Dashboard Tabs --- */
.dashboard-tabs {
  border-bottom: 2px solid var(--border-color);
  gap: var(--space-1);
  padding: 0 var(--space-1);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dashboard-tabs::-webkit-scrollbar { display: none; }
.dashboard-tabs .nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 0.6rem 1rem;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.dashboard-tabs .nav-link:hover {
  color: var(--eco-accent);
  border-bottom-color: var(--eco-light);
}
.dashboard-tabs .nav-link.active {
  color: var(--eco-primary);
  border-bottom-color: var(--eco-accent);
  background: transparent;
}
.dashboard-tabs .nav-link i {
  margin-right: 0.35rem;
}

/* --- Dashboard Global Filter Aside (right panel) --- */
.dashboard-filter-aside {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  position: sticky;
  top: 70px;
}
.df-aside-header {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.df-aside-header i {
  color: var(--eco-accent);
}
.df-aside-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.df-aside-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0;
}
.df-aside-group .form-select-sm {
  font-size: 0.78rem;
}
.df-aside-divider {
  margin: var(--space-3) 0;
  border-color: var(--border-color);
  opacity: 0.5;
}
.df-date-btn {
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
}
.df-date-btn.active {
  background-color: var(--eco-primary) !important;
  border-color: var(--eco-primary) !important;
  color: #fff !important;
}

/* --- Dashboard Filter User Info --- */
.df-user-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.df-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-color);
}
.df-user-details {
  min-width: 0;
}
.df-user-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.df-user-role {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--eco-accent);
}
.df-user-org {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Dashboard Metric Sub-text --- */
.metric-sub {
  display: block;
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 1px;
  min-height: 0.7rem;
  line-height: 1.2;
}

/* --- Dashboard Alerts List --- */
.overview-alerts-list {
  display: flex;
  flex-direction: column;
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.overview-alerts-list::-webkit-scrollbar { width: 3px; }
.overview-alerts-list::-webkit-scrollbar-track { background: transparent; }
.overview-alerts-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.alert-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid var(--border-color);
}
.alert-list-item:last-child {
  border-bottom: none;
}
.alert-list-item:hover {
  background: rgba(29, 92, 74, 0.04);
}
.alert-list-icon {
  font-size: 0.6rem;
  flex-shrink: 0;
  width: 0.6rem;
  text-align: center;
  margin-top: 0.25rem;
}
.alert-list-body {
  flex: 1;
  min-width: 0;
}
.alert-list-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.alert-list-message {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-list-severity {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.alert-list-detail {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
}
.alert-list-context {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.62rem;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-list-time {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.6rem;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.7;
}
.alert-list-item.severity-critical .alert-list-icon { color: #dc3545; }
.alert-list-item.severity-critical .alert-list-severity {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}
.alert-list-item.severity-high .alert-list-icon { color: #e67e00; }
.alert-list-item.severity-high .alert-list-severity {
  background: rgba(230, 126, 0, 0.12);
  color: #e67e00;
}
.alert-list-item.severity-warning .alert-list-icon { color: #d4a017; }
.alert-list-item.severity-warning .alert-list-severity {
  background: rgba(212, 160, 23, 0.12);
  color: #856404;
}

/* --- KPI Card Click Affordance --- */
.dashboard-metric-card[data-navigate] {
  cursor: pointer;
}
.dashboard-metric-card[data-navigate]::after {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  font-size: 0.5rem;
  opacity: 0;
  color: var(--eco-accent);
  transition: opacity var(--transition-fast);
}
.dashboard-metric-card[data-navigate]:hover::after {
  opacity: 0.5;
}

/* --- Overview Insights Row (Layer 4) --- */
#overview-insights-row {
  animation: card-enter 0.35s var(--ease-decelerate) both;
  animation-delay: 0.35s;
}


/* --- Overview Detail Row (Layer 5) --- */
#overview-detail-row {
  animation: card-enter 0.35s var(--ease-decelerate) both;
  animation-delay: 0.4s;
}

/* --- Recent Incidents List --- */
.overview-incident-list {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--eco-accent) transparent;
}
.overview-incident-list::-webkit-scrollbar { width: 4px; }
.overview-incident-list::-webkit-scrollbar-track { background: transparent; }
.overview-incident-list::-webkit-scrollbar-thumb {
  background: rgba(63, 170, 120, 0.3);
  border-radius: var(--radius-pill);
}
.incident-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
}
.incident-item:last-child {
  border-bottom: none;
}
.incident-item .incident-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
}
.incident-dot.status-pending  { background: #ffc107; }
.incident-dot.status-acknowledged { background: #28a745; }
.incident-item .incident-body {
  flex: 1;
  min-width: 0;
}
.incident-item .incident-farmer {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.incident-item .incident-location {
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.incident-item .incident-meta {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.incident-status-badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
}
.incident-status-badge.badge-pending {
  background: rgba(255, 193, 7, 0.15);
  color: #856404;
}
.incident-status-badge.badge-acknowledged {
  background: rgba(40, 167, 69, 0.15);
  color: #1e7a4e;
}
.incident-time {
  font-size: 0.58rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- Recent Activity Feed --- */
.overview-activity-feed {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--eco-accent) transparent;
}
.overview-activity-feed::-webkit-scrollbar { width: 4px; }
.overview-activity-feed::-webkit-scrollbar-track { background: transparent; }
.overview-activity-feed::-webkit-scrollbar-thumb {
  background: rgba(63, 170, 120, 0.3);
  border-radius: var(--radius-pill);
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
}
.activity-item:last-child {
  border-bottom: none;
}
.activity-item .activity-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}
.activity-icon.level-INFO {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.activity-icon.level-WARNING {
  background: rgba(255, 193, 7, 0.15);
  color: #a87200;
}
.activity-item .activity-body {
  flex: 1;
  min-width: 0;
}
.activity-item .activity-message {
  font-size: 0.68rem;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.activity-item .activity-time {
  font-size: 0.58rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Overview Section Title --- */
.overview-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.overview-section-title i {
  color: var(--eco-accent);
  margin-right: 0.2rem;
}

/* --- Overview Empty State --- */
.overview-empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-6) var(--space-3);
  font-size: 0.75rem;
}
.overview-empty i {
  display: block;
  font-size: 1.5rem;
  opacity: 0.3;
  margin-bottom: var(--space-2);
}

/* --- Dark Mode: Overview New Components --- */
html[data-bs-theme="dark"] .alert-list-item:hover {
  background: rgba(63, 170, 120, 0.06);
}
html[data-bs-theme="dark"] .alert-list-item.severity-critical .alert-list-icon { color: #f1aeb5; }
html[data-bs-theme="dark"] .alert-list-item.severity-critical .alert-list-severity { background: rgba(220, 53, 69, 0.2); color: #f1aeb5; }
html[data-bs-theme="dark"] .alert-list-item.severity-high .alert-list-icon { color: #ffc975; }
html[data-bs-theme="dark"] .alert-list-item.severity-high .alert-list-severity { background: rgba(230, 126, 0, 0.15); color: #ffc975; }
html[data-bs-theme="dark"] .alert-list-item.severity-warning .alert-list-icon { color: #ffe69c; }
html[data-bs-theme="dark"] .alert-list-item.severity-warning .alert-list-severity { background: rgba(255, 193, 7, 0.12); color: #ffe69c; }
html[data-bs-theme="dark"] .incident-status-badge.badge-pending {
  background: rgba(255, 193, 7, 0.2);
  color: #ffe69c;
}
html[data-bs-theme="dark"] .incident-status-badge.badge-acknowledged {
  background: rgba(40, 167, 69, 0.2);
  color: #a3cfbb;
}
html[data-bs-theme="dark"] .activity-icon.level-INFO {
  background: rgba(13, 110, 253, 0.15);
  color: #6ea8fe;
}
html[data-bs-theme="dark"] .activity-icon.level-WARNING {
  background: rgba(255, 193, 7, 0.15);
  color: #ffe69c;
}

/* --- Overview Charts Grid --- */
#overview-charts-container {
  animation: card-enter 0.35s var(--ease-decelerate) both;
  animation-delay: 0.3s;
}
#overview-charts-container .dashboard-chart-card {
  height: 100%;
}
.overview-chart-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.overview-chart-title i {
  color: var(--eco-accent);
  margin-right: 0.2rem;
}

/* --- Full-Height Map --- */
.dashboard-map-container {
  position: relative;
  width: 100%;
}
.dashboard-map-full {
  height: calc(100vh - 200px);
  min-height: 500px;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- Map Insights Panel --- */
/* --- Map Insight DataTable --- */
.map-insight-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.map-insight-table-wrap table.dataTable {
  width: 100% !important;
}
.map-insight-table-wrap table.dataTable tbody td,
.map-insight-table-wrap table.dataTable thead th {
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}
.map-insight-table-wrap table.dataTable thead th {
  font-size: 0.72rem;
}
.map-insight-table-wrap .dataTables_paginate .paginate_button.previous,
.map-insight-table-wrap .dataTables_paginate .paginate_button.next {
  font-size: inherit;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  min-width: 2.25rem;
  text-align: center;
  box-sizing: border-box;
}
.map-insight-table-wrap .dataTables_paginate .paginate_button.previous i,
.map-insight-table-wrap .dataTables_paginate .paginate_button.next i {
  font-size: 0.85rem;
  vertical-align: middle;
}

.map-overlay-bottom {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-md);
  backdrop-filter: blur(4px);
}
.map-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 800;
  transition: opacity 0.3s ease;
  border-radius: var(--radius-lg);
}

/* Map filter panel */
.map-filter-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 800;
}
.map-filter-toggle {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}
.map-filter-toggle:hover { background: var(--eco-light); }
.map-filter-body {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
}
.risk-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}

/* --- Tab Local Filters --- */
.tab-local-filters {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-color);
}

/* --- Dashboard Compact Overrides --- */
/* Tighten grid gaps and section margins inside dashboard tab content */
#dashboardTabContent .row.g-3 {
  --bs-gutter-y: 0.5rem;
  --bs-gutter-x: 0.5rem;
}
#dashboardTabContent .mt-3 { margin-top: 0.5rem !important; }
#dashboardTabContent .mt-4 { margin-top: 0.75rem !important; }
#dashboardTabContent .mt-1 { margin-top: 0.25rem !important; }
#dashboardTabContent .mb-3 { margin-bottom: 0.5rem !important; }
.dashboard-welcome-banner h3 { margin-bottom: 0; font-size: 1.3rem; }
.dashboard-welcome-banner p { font-size: 0.8rem; }
.app-content-header .container-fluid { padding-top: 0.5rem; padding-bottom: 0; }
.tab-content.mt-3 { margin-top: 0 !important; }

/* --- Dark mode: Dashboard-specific --- */
html[data-bs-theme="dark"] .dashboard-tabs .nav-link {
  color: var(--text-on-dark-muted);
}
html[data-bs-theme="dark"] .dashboard-tabs .nav-link:hover {
  color: var(--eco-light);
}
html[data-bs-theme="dark"] .dashboard-tabs .nav-link.active {
  color: var(--eco-accent);
}
html[data-bs-theme="dark"] .dashboard-filter-aside {
  background: var(--surface-card);
  border-color: var(--border-color);
}
html[data-bs-theme="dark"] .map-filter-toggle {
  background: var(--surface-card);
  color: var(--text-on-dark);
}
html[data-bs-theme="dark"] .map-filter-body {
  background: var(--surface-card);
}
html[data-bs-theme="dark"] .map-loading-overlay {
  background: rgba(13, 26, 20, 0.85);
}
html[data-bs-theme="dark"] .dashboard-metric-card {
  background-color: var(--surface-card);
  border-color: var(--border-color);
}
html[data-bs-theme="dark"] .metric-icon {
  color: var(--eco-accent);
  opacity: 0.4;
}
html[data-bs-theme="dark"] .dashboard-metric-card:hover .metric-icon {
  opacity: 0.55;
}
html[data-bs-theme="dark"] .dashboard-section-header {
  border-image: linear-gradient(90deg, var(--eco-accent), var(--eco-light), transparent) 1;
}
html[data-bs-theme="dark"] .apexcharts-tooltip {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-bs-theme="dark"] .apexcharts-tooltip .apexcharts-tooltip-title {
  background: rgba(255,255,255,0.04) !important;
  border-bottom-color: var(--border-color) !important;
}
html[data-bs-theme="dark"] .apexcharts-xaxistooltip,
html[data-bs-theme="dark"] .apexcharts-yaxistooltip {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html[data-bs-theme="dark"] .apexcharts-menu {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
}
html[data-bs-theme="dark"] .apexcharts-menu-item:hover {
  background: rgba(63,170,120,0.10) !important;
}
html[data-bs-theme="dark"] .apexcharts-legend-text {
  color: var(--text-secondary) !important;
}

/* --- Management Pages --- */
.management-toolbar {
  background: rgba(29, 92, 74, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

/* Icon-only button (circle) */
.btn-icon {
  width: 2rem;
  height: 2rem;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
}
.btn-icon i { margin: 0; font-size: 0.85em; }

/* Action button group in tables */
.action-btn-group {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.action-btn-group .btn {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  font-size: 0.78rem;
}
.action-btn-group .btn i { margin: 0; }

/* Dark mode: management toolbar */
html[data-bs-theme="dark"] .management-toolbar {
  background: rgba(63, 170, 120, 0.04);
  border-color: var(--border-color);
}

/* =============================================
   Management — Stats Cards (generic)
   ============================================= */

.mgmt-stat-card {
  background: rgba(29, 92, 74, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mgmt-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.mgmt-stat-card--total   { border-left-color: var(--accent); }
.mgmt-stat-card--active  { border-left-color: #22c55e; }
.mgmt-stat-card--new     { border-left-color: #3b82f6; }
.mgmt-stat-card--roles   { border-left-color: #a855f7; }
.mgmt-stat-card--regions { border-left-color: #a855f7; }
.mgmt-stat-card--cities  { border-left-color: #f59e0b; }

.mgmt-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.mgmt-stat-card--total .mgmt-stat-icon   { background: rgba(29, 92, 74, 0.12); color: var(--accent); }
.mgmt-stat-card--active .mgmt-stat-icon  { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.mgmt-stat-card--new .mgmt-stat-icon     { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.mgmt-stat-card--roles .mgmt-stat-icon   { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.mgmt-stat-card--regions .mgmt-stat-icon { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.mgmt-stat-card--cities .mgmt-stat-icon  { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }

.mgmt-stat-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mgmt-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.mgmt-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}
.mgmt-stat-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.mgmt-stat-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.mgmt-stat-roles .role-mini {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.role-mini--admin    { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.role-mini--rcpc     { background: rgba(204, 154, 0, 0.15); color: #cc9a00; }
.role-mini--mao      { background: rgba(10, 162, 192, 0.12); color: #0aa2c0; }
.role-mini--philrice { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }
.role-mini--coop     { background: rgba(108, 117, 125, 0.15); color: #6c757d; }

/* Dark mode: stat cards */
html[data-bs-theme="dark"] .mgmt-stat-card {
  background: rgba(63, 170, 120, 0.04);
  border-color: var(--border-color);
}
html[data-bs-theme="dark"] .mgmt-stat-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
html[data-bs-theme="dark"] .role-mini--admin    { background: rgba(220, 53, 69, 0.2); color: #f87171; }
html[data-bs-theme="dark"] .role-mini--rcpc     { background: rgba(204, 154, 0, 0.2); color: #fbbf24; }
html[data-bs-theme="dark"] .role-mini--mao      { background: rgba(10, 162, 192, 0.2); color: #22d3ee; }
html[data-bs-theme="dark"] .role-mini--philrice  { background: rgba(13, 110, 253, 0.2); color: #60a5fa; }
html[data-bs-theme="dark"] .role-mini--coop     { background: rgba(108, 117, 125, 0.2); color: #9ca3af; }

/* =============================================
   Management — Role Badges (soft)
   ============================================= */

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.role-badge i { font-size: 0.72rem; }

.role-badge--admin    { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.role-badge--rcpc     { background: rgba(204, 154, 0, 0.15); color: #cc9a00; }
.role-badge--mao      { background: rgba(10, 162, 192, 0.12); color: #0aa2c0; }
.role-badge--philrice { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }
.role-badge--coop     { background: rgba(108, 117, 125, 0.15); color: #6c757d; }

.role-badge-sub {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 4px;
}
.role-badge-sub--head { background: rgba(13, 202, 240, 0.15); color: #0aa2c0; }
.role-badge-sub--tech { background: rgba(108, 117, 125, 0.12); color: #6c757d; }

/* Dark mode: role badges */
html[data-bs-theme="dark"] .role-badge--admin    { background: rgba(220, 53, 69, 0.2); color: #f87171; }
html[data-bs-theme="dark"] .role-badge--rcpc     { background: rgba(204, 154, 0, 0.2); color: #fbbf24; }
html[data-bs-theme="dark"] .role-badge--mao      { background: rgba(10, 162, 192, 0.2); color: #22d3ee; }
html[data-bs-theme="dark"] .role-badge--philrice  { background: rgba(13, 110, 253, 0.2); color: #60a5fa; }
html[data-bs-theme="dark"] .role-badge--coop     { background: rgba(108, 117, 125, 0.2); color: #9ca3af; }
html[data-bs-theme="dark"] .role-badge-sub--head  { background: rgba(13, 202, 240, 0.2); color: #22d3ee; }
html[data-bs-theme="dark"] .role-badge-sub--tech  { background: rgba(108, 117, 125, 0.2); color: #9ca3af; }

/* =============================================
   Management — Status Dot Indicator
   ============================================= */

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot--active  { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }
.status-dot--deleted { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }

/* =============================================
   Management — Action Buttons (flat ghost)
   ============================================= */

.action-btn-group {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: nowrap;
}
.btn-action {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  transition: all 0.15s ease;
  cursor: pointer;
}
.btn-action:hover {
  background: rgba(29, 92, 74, 0.1);
  color: var(--accent);
}
.btn-action.btn-action-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.btn-action.btn-action-success:hover {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}
.btn-action i { margin: 0; }

/* Dark mode: action buttons */
html[data-bs-theme="dark"] .btn-action:hover {
  background: rgba(63, 170, 120, 0.15);
}
html[data-bs-theme="dark"] .btn-action.btn-action-danger:hover {
  background: rgba(239, 68, 68, 0.15);
}
html[data-bs-theme="dark"] .btn-action.btn-action-success:hover {
  background: rgba(34, 197, 94, 0.15);
}

/* =============================================
   User Management — Unified User Cell
   ============================================= */

.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-cell-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-color);
}
.user-cell-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 92, 74, 0.08);
  color: var(--text-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
  border: 2px solid var(--border-color);
}
.user-cell-info {
  min-width: 0;
}
.user-cell-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-cell-username {
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================
   MAO Management — MAO Cell
   ============================================= */

.mao-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mao-cell-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 162, 192, 0.1);
  color: #0aa2c0;
  font-size: 1rem;
  flex-shrink: 0;
}
.mao-cell-info {
  min-width: 0;
}
.mao-cell-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mao-cell-city {
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================
   User Management — Table Tweaks
   ============================================= */

#usersTable tbody tr {
  transition: background-color 0.15s ease;
}

#maosTable tbody tr {
  transition: background-color 0.15s ease;
}

@media (max-width: 768px) {
  .mgmt-stat-value { font-size: 1.3rem; }
  .mgmt-stat-icon { width: 36px; height: 36px; font-size: 1rem; }
  .mgmt-stat-card { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
}

/* =============================================
   Management — Form Modal (generic)
   ============================================= */

.mgmt-form-modal {
  border-radius: var(--radius-xl);
}
.mgmt-form-modal .modal-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* Header with accent underline */
.mgmt-form-header {
  border-bottom: 2px solid var(--accent);
}
.mgmt-form-header .modal-title {
  font-weight: 700;
  font-size: 1.1rem;
}

/* Avatar upload section */
.user-form-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5) 0 var(--space-3);
}
.user-form-avatar-upload {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
}
.user-form-avatar-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 92, 74, 0.08);
  border: 3px solid var(--border-color);
  color: var(--text-muted);
  font-size: 2rem;
}
.user-form-avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border-color);
}
.user-form-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.user-form-avatar-upload:hover .user-form-avatar-overlay {
  opacity: 1;
}
.user-form-avatar-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.user-form-avatar-remove {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  margin-top: var(--space-1);
}
.user-form-avatar-remove:hover {
  color: #dc3545;
  text-decoration: underline;
}

/* Section labels */
.mgmt-form-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mgmt-form-section-label i {
  font-size: 0.8rem;
  color: var(--accent);
}

/* Field group cards */
.mgmt-form-card {
  background: rgba(29, 92, 74, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-2);
}
.mgmt-form-card .form-label {
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 4px;
}

/* Footer */
.mgmt-form-footer {
  border-top: 1px solid var(--border-color);
}

/* Dark mode */
html[data-bs-theme="dark"] .mgmt-form-modal {
  border: 1px solid var(--border-color);
}
html[data-bs-theme="dark"] .user-form-avatar-placeholder {
  background: rgba(63, 170, 120, 0.08);
}
html[data-bs-theme="dark"] .mgmt-form-card {
  background: rgba(63, 170, 120, 0.03);
}

/* =============================================
   Management — View Detail Modal (generic)
   ============================================= */

.view-detail-modal {
  border: none;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.view-detail-modal .modal-body,
.view-detail-modal .modal-header,
.view-detail-modal .modal-footer { display: none; }

/* Close button */
.view-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.view-detail-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Hero header gradient */
.view-detail-hero {
  height: 120px;
  background: linear-gradient(135deg, #1d5c4a 0%, #2a7d64 40%, #1d5c4a 100%);
  position: relative;
}

/* Avatar wrapper — centered, overlapping hero */
.view-detail-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-top: -48px;
  position: relative;
  z-index: 5;
}
.view-detail-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--surface-card, #fff);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.view-detail-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-card, #fff);
  border: 4px solid var(--surface-card, #fff);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  color: var(--text-muted);
  font-size: 2.2rem;
}

/* Identity block */
.view-detail-identity {
  text-align: center;
  padding: var(--space-3) var(--space-5) 0;
}
.view-detail-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}
.view-detail-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.view-detail-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Info grid — 2 columns */
.view-detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: var(--space-5) var(--space-5) 0;
  background: var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.view-detail-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-4);
  background: var(--surface-card, #fff);
}
.view-detail-info-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 92, 74, 0.08);
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
}
.view-detail-info-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.view-detail-info-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.view-detail-info-value {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* Section label */
.view-detail-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: var(--space-5) var(--space-5) var(--space-2);
}

/* Organization card */
.view-detail-org-card {
  margin: 0 var(--space-5);
  background: rgba(29, 92, 74, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.view-detail-org-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-3) var(--space-4);
}
.view-detail-org-row:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}
.view-detail-org-row > i {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.view-detail-org-row > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.view-detail-org-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.view-detail-org-value {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* Dark mode: view user modal */
html[data-bs-theme="dark"] .view-detail-modal {
  border: 1px solid var(--border-color);
}
html[data-bs-theme="dark"] .view-detail-hero {
  background: linear-gradient(135deg, #1d5c4a 0%, #236b55 40%, #1a4f40 100%);
}
html[data-bs-theme="dark"] .view-detail-avatar {
  border-color: var(--surface-card, #1a1a2e);
}
html[data-bs-theme="dark"] .view-detail-avatar-placeholder {
  border-color: var(--surface-card, #1a1a2e);
  background: var(--surface-card, #1a1a2e);
}
html[data-bs-theme="dark"] .view-detail-org-card {
  background: rgba(63, 170, 120, 0.04);
}
html[data-bs-theme="dark"] .view-detail-info-icon {
  background: rgba(63, 170, 120, 0.25);
}

@media (max-width: 576px) {
  .view-detail-info-grid { grid-template-columns: 1fr; }
  .view-detail-hero { height: 90px; }
  .view-detail-avatar-wrap { margin-top: -40px; }
  .view-detail-avatar, .view-detail-avatar-placeholder { width: 80px; height: 80px; }
}

/* --- Responsive: Dashboard --- */
@media (max-width: 768px) {
  .dashboard-welcome-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .dashboard-welcome-banner .dashboard-tabs {
    width: 100%;
  }
  .metric-value {
    font-size: 1.4rem;
  }
  .dashboard-filter-aside {
    position: static;
    padding: var(--space-2);
  }
  .dashboard-tabs .tab-label {
    display: none;
  }
  .dashboard-tabs .nav-link {
    padding: 0.5rem 0.6rem;
    font-size: 1rem;
  }
  .dashboard-map-full {
    height: calc(100vh - 200px);
    min-height: 400px;
  }
}


/* Mobile */
@media (max-width: 480px) {
  .logo-img {
    width: 80px;
    height: 80px;
  }

  .system-title {
    font-size: 1.8rem;
  }

  .app-content-header h3,
  .app-content-header h1,
  .content-title {
    font-size: 1.3rem;
  }

  .btn {
    font-size: 0.82rem;
    padding: 0.35rem 0.7rem;
  }

  /* Sidebar holds its gradient on collapse */
  .app-sidebar {
    background: linear-gradient(
      180deg,
      var(--sidebar-grad-top) 0%,
      var(--sidebar-grad-mid) 50%,
      var(--sidebar-grad-bot) 100%
    ) !important;
  }
}

/* ============================================================
   Audit Log Level Badges
   ============================================================ */
.level-badge-DEBUG    { background-color: #6c757d !important; }
.level-badge-INFO     { background-color: #0d6efd !important; }
.level-badge-WARNING  { background-color: #ffc107 !important; color: #000 !important; }
.level-badge-ERROR    { background-color: #dc3545 !important; }
.level-badge-CRITICAL { background-color: #212529 !important; }

.log-message-truncated {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}