/* ===========================================================================
   LIQUID GLASS
   ---------------------------------------------------------------------------
   Four things make glass read as glass rather than as a flat translucent box:

     1. Something behind it worth refracting  — the ambient aurora layer
     2. Blur WITH saturation                  — unsaturated blur looks like fog
     3. A specular edge                       — light catching the top rim
     4. Inner depth                           — an inset shadow giving thickness

   Applied to chrome and surfaces only. Blurring every table row would mean
   24 simultaneous backdrop-filter compositing layers, which stutters badly on
   the mid-range Android hardware field officers actually use.
   =========================================================================== */

:root {
  /* Glass tints — deliberately low alpha; the blur does the work */
  --glass-bg:          rgb(30 41 59 / 0.52);
  --glass-bg-strong:   rgb(30 41 59 / 0.72);
  --glass-bg-subtle:   rgb(30 41 59 / 0.34);
  --glass-bg-frost:    rgb(248 250 252 / 0.06);

  --glass-blur:        20px;
  --glass-blur-heavy:  36px;
  --glass-blur-light:  10px;
  --glass-saturate:    180%;

  /* The specular rim: bright at the top, fading away by the bottom */
  --glass-edge:        rgb(255 255 255 / 0.14);
  --glass-edge-bright: rgb(255 255 255 / 0.26);
  --glass-edge-dim:    rgb(255 255 255 / 0.06);

  /* Depth: outer drop + inner top highlight + inner bottom shade */
  --glass-shadow:
    0 8px 32px rgb(2 6 23 / 0.42),
    0 2px 8px rgb(2 6 23 / 0.28),
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    inset 0 -1px 0 rgb(0 0 0 / 0.20);

  --glass-shadow-raised:
    0 20px 48px rgb(2 6 23 / 0.52),
    0 6px 16px rgb(2 6 23 / 0.34),
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    inset 0 -1px 0 rgb(0 0 0 / 0.22);

  --glass-shadow-float:
    0 32px 72px rgb(2 6 23 / 0.60),
    0 12px 28px rgb(2 6 23 / 0.40),
    inset 0 1px 0 rgb(255 255 255 / 0.22);

  --glass-glow-green: 0 0 0 1px rgb(52 211 153 / 0.28), 0 8px 32px rgb(16 185 129 / 0.22);
}

/* ---------------------------------------------------------------------------
   1. AMBIENT BACKDROP
   Glass over a flat colour is just a grey box. This slow-drifting aurora gives
   the blur something to pick up, so surfaces shift subtly as content scrolls.
   --------------------------------------------------------------------------- */

body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42rem 42rem at 12% 8%,  rgb(16 185 129 / 0.34), transparent 62%),
    radial-gradient(38rem 38rem at 88% 18%, rgb(59 130 246 / 0.30), transparent 60%),
    radial-gradient(44rem 44rem at 72% 88%, rgb(139 92 246 / 0.26), transparent 62%),
    radial-gradient(34rem 34rem at 22% 78%, rgb(6 182 212 / 0.24), transparent 58%),
    radial-gradient(30rem 30rem at 50% 45%, rgb(236 72 153 / 0.14), transparent 60%);
  filter: blur(28px);
  animation: aurora-drift 48s ease-in-out infinite alternate;
}

/* A faint grain over the gradient stops wide blurred areas from banding. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(2%, -2.5%, 0) scale(1.06); }
  66%  { transform: translate3d(-2%, 1.5%, 0) scale(1.03); }
  100% { transform: translate3d(1%, 2%, 0) scale(1.07); }
}

/* ---------------------------------------------------------------------------
   2. GLASS PRIMITIVE
   --------------------------------------------------------------------------- */

.kpi-card,
.chart-card,
.admin-card-section,
.page-header-block,
.table-container,
.followup-item-card,
.modal-container,
.login-card,
.app-header,
.map-filter-toolbar,
.toast,
.leaflet-popup-content-wrapper,
.leaflet-control-layers,
.demo-user-card {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}

/*
  The specular sheen: a diagonal highlight across the top-left, as if a light
  source sits off-screen. This is the single detail that separates "glass"
  from "semi-transparent rectangle".
*/
.kpi-card::after,
.chart-card::after,
.admin-card-section::after,
.page-header-block::after,
.modal-container::after,
.login-card::after,
.followup-item-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.10) 0%,
    rgb(255 255 255 / 0.04) 22%,
    transparent 48%,
    transparent 100%
  );
  opacity: 0.9;
  transition: opacity var(--duration-normal) var(--ease-out);
}

/* Heavier blur for surfaces that float above everything. */
.modal-container,
.leaflet-popup-content-wrapper {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow-float);
  border-color: var(--glass-edge-bright);
}

.app-header {
  background: rgb(15 23 42 / 0.62);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: 0 4px 24px rgb(2 6 23 / 0.36), inset 0 -1px 0 rgb(255 255 255 / 0.06);
}

.sidebar, aside.sidebar, .app-sidebar {
  background: rgb(15 23 42 / 0.48);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-right: 1px solid var(--glass-edge);
}

.bottom-nav {
  background: rgb(15 23 42 / 0.76);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturate));
  border-top: 1px solid var(--glass-edge);
}

.modal-overlay {
  background: rgb(2 6 23 / 0.58);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

/* ---------------------------------------------------------------------------
   3. POINTER-TRACKED SPECULAR HIGHLIGHT
   --x/--y are written by js/glass.js on pointer move. A real highlight that
   follows the cursor is what makes the surface feel like a physical pane
   rather than a printed texture.
   --------------------------------------------------------------------------- */

.glass-interactive {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.glass-interactive::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(
    22rem 22rem at var(--x, 50%) var(--y, 50%),
    rgb(255 255 255 / 0.13),
    rgb(255 255 255 / 0.05) 36%,
    transparent 64%
  );
  transition: opacity var(--duration-normal) var(--ease-out);
}

.glass-interactive:hover::before { opacity: 1; }

/* ---------------------------------------------------------------------------
   4. GLASS CONTROLS
   --------------------------------------------------------------------------- */

.btn-secondary,
.btn-icon,
.form-control,
input[type="text"], input[type="password"], input[type="number"],
input[type="tel"], input[type="email"], input[type="search"],
select, textarea {
  background: var(--glass-bg-frost);
  -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur-light)) saturate(140%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 1px 2px rgb(2 6 23 / 0.2);
}

.btn-secondary:hover:not(:disabled),
.btn-icon:hover {
  background: rgb(248 250 252 / 0.12);
  border-color: var(--glass-edge-bright);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 4px 14px rgb(2 6 23 / 0.3);
}

.form-control:focus {
  background: rgb(2 6 23 / 0.5);
  border-color: rgb(52 211 153 / 0.6);
  box-shadow:
    0 0 0 3px rgb(16 185 129 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.10);
}

/* The primary action stays solid — a glass call-to-action reads as disabled. */
.btn-primary, .btn-new-plantation {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--green-400) 0%, var(--green-600) 60%, var(--green-700) 100%);
  border: 1px solid rgb(52 211 153 / 0.6);
  box-shadow:
    0 4px 16px rgb(16 185 129 / 0.3),
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 -1px 0 rgb(0 0 0 / 0.18);
}

/* A travelling gloss across the primary button on hover. */
.btn-primary::after, .btn-new-plantation::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.3) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform var(--duration-slow) var(--ease-out);
}
.btn-primary:hover::after, .btn-new-plantation:hover::after { transform: translateX(130%); }

.btn-primary:hover:not(:disabled), .btn-new-plantation:hover {
  box-shadow:
    0 8px 28px rgb(16 185 129 / 0.44),
    inset 0 1px 0 rgb(255 255 255 / 0.38);
}

/* ---------------------------------------------------------------------------
   5. GLASS BADGES & CHIPS
   --------------------------------------------------------------------------- */

.badge, .stat-chip, .nav-badge, .dept-tag {
  -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur-light)) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10);
}

/* ---------------------------------------------------------------------------
   6. GLASS TABLES
   The container is glass; the rows are not. A blurred row creates its own
   compositing layer, and 24 of those drops frame rate hard on mid-range
   phones. Rows get a translucent wash instead — same look, no blur cost.
   --------------------------------------------------------------------------- */

.data-table thead th {
  background: rgb(2 6 23 / 0.56);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: inset 0 -1px 0 var(--glass-edge);
}

.data-table tbody tr {
  background: transparent;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.data-table tbody tr:hover {
  background: linear-gradient(90deg,
    rgb(255 255 255 / 0.07) 0%,
    rgb(255 255 255 / 0.035) 60%,
    transparent 100%);
  box-shadow: inset 2px 0 0 var(--green-400);
}

/* ---------------------------------------------------------------------------
   7. SIDEBAR NAV
   --------------------------------------------------------------------------- */

.nav-item { border: 1px solid transparent; }

.nav-item:hover {
  background: rgb(255 255 255 / 0.06);
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  backdrop-filter: blur(var(--glass-blur-light));
  border-color: var(--glass-edge-dim);
}

.nav-item.active {
  background: linear-gradient(100deg, rgb(16 185 129 / 0.20) 0%, rgb(16 185 129 / 0.05) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur-light)) saturate(160%);
  border-color: rgb(52 211 153 / 0.26);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10), 0 2px 12px rgb(16 185 129 / 0.14);
}

/* ---------------------------------------------------------------------------
   8. KPI TILES
   --------------------------------------------------------------------------- */

.kpi-card { overflow: hidden; }

.kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green-400), transparent);
  opacity: 0.85;
  z-index: 2;
}
.kpi-card:nth-child(2)::before { background: linear-gradient(90deg, transparent, var(--blue-400), transparent); }
.kpi-card:nth-child(3)::before { background: linear-gradient(90deg, transparent, var(--green-300), transparent); }
.kpi-card:nth-child(4)::before { background: linear-gradient(90deg, transparent, var(--amber-400), transparent); }
.kpi-card:nth-child(5)::before { background: linear-gradient(90deg, transparent, var(--red-400), transparent); }

.kpi-card:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-edge-bright);
  box-shadow: var(--glass-shadow-raised);
}

/* ---------------------------------------------------------------------------
   9. ACCESSIBILITY FALLBACKS
   --------------------------------------------------------------------------- */

/*
  Respect the OS "Reduce transparency" setting (macOS/iOS accessibility, and
  Windows transparency effects). Users turn it on because translucency makes
  text genuinely hard to read for them — overriding that would be hostile.
*/
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg:        rgb(23 32 51 / 0.98);
    --glass-bg-strong: rgb(23 32 51 / 1);
    --glass-bg-subtle: rgb(23 32 51 / 0.96);
    --glass-bg-frost:  rgb(30 41 59 / 0.96);
  }
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body::before, body::after { display: none; }
  .app-header, .sidebar, .app-sidebar, .bottom-nav, .modal-overlay { background: var(--surface-default); }
}

/* No backdrop-filter support: fall back to opaque surfaces rather than
   leaving unreadable transparent panels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg:        rgb(23 32 51 / 0.97);
    --glass-bg-strong: rgb(23 32 51 / 0.99);
    --glass-bg-frost:  rgb(30 41 59 / 0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Blur is GPU-bound. On small screens, lighten it rather than ship jank. */
@media (max-width: 768px) {
  :root {
    --glass-blur:       14px;
    --glass-blur-heavy: 22px;
    --glass-blur-light: 8px;
  }
}