/* ═══════════════════════════════════════════════════════════════════════════
   Gumla Forest Division · Land Resource Database
   Custom styles — style.css
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── THEME DEFINITIONS ─────────────────────────────────────────────────────
   4 carefully chosen themes:
   [forest]  Deep Forest Green  — original, calm authority
   [slate]   Stone Slate Blue   — professional government feel
   [ember]   Warm Teak Brown    — archival document warmth
   [indigo]  Deep Indigo        — refined and modern
   ─────────────────────────────────────────────────────────────────────────── */

/* DEFAULT / FOREST THEME */
:root,
[data-theme="forest"] {
  --brand:          #1a5c38;
  --brand-rgb:      26, 92, 56;
  --brand-dark:     #0e3a23;
  --brand-mid:      #2e7d52;
  --brand-light:    #e8f5ee;
  --brand-muted:    #5a8c6f;
  --brand-xlight:   #f0faf4;

  --page-bg:        #eff4f1;
  --page-bg-accent: #e2ede7;
  --card-bg:        #ffffff;
  --card-border:    #d1e2d9;
  --text-primary:   #0a1f14;
  --text-secondary: #2e7d52;
  --text-muted:     #6a8c7a;
  --input-bg:       #ffffff;
  --input-border:   #b8cebf;
  --table-head-bg:  #1a5c38;
  --table-head-txt: #ffffff;
  --table-hover:    #f2f9f5;
  --divider:        #dceae2;
  --shadow-sm:      0 2px 8px rgba(26,92,56,.08);
  --shadow-md:      0 8px 24px rgba(26,92,56,.12);
  --nav-bg:         #1a5c38;
  --nav-text:       #ffffff;
  --footer-bg:      #e2ede7;
  --scrollbar:      #a8cbb9;
  --badge-soft-bg:  #e8f5ee;
  --badge-soft-txt: #1a5c38;
}

[data-theme="slate"] {
  --brand:          #2b4c7e;
  --brand-rgb:      43, 76, 126;
  --brand-dark:     #162a4a;
  --brand-mid:      #3d64a0;
  --brand-light:    #e6edf8;
  --brand-muted:    #6884aa;
  --brand-xlight:   #f0f4fb;

  --page-bg:        #edf1f7;
  --page-bg-accent: #dfe6f1;
  --card-bg:        #ffffff;
  --card-border:    #ced8e6;
  --text-primary:   #0d1626;
  --text-secondary: #2b4c7e;
  --text-muted:     #7088b0;
  --input-bg:       #ffffff;
  --input-border:   #b0c1d6;
  --table-head-bg:  #2b4c7e;
  --table-head-txt: #ffffff;
  --table-hover:    #f3f6fa;
  --divider:        #d6e1ed;
  --shadow-sm:      0 2px 8px rgba(43,76,126,.08);
  --shadow-md:      0 8px 24px rgba(43,76,126,.12);
  --nav-bg:         #2b4c7e;
  --nav-text:       #ffffff;
  --footer-bg:      #dfe6f1;
  --scrollbar:      #90aad0;
  --badge-soft-bg:  #e6edf8;
  --badge-soft-txt: #2b4c7e;
}

[data-theme="ember"] {
  --brand:          #6b4226;
  --brand-rgb:      107, 66, 38;
  --brand-dark:     #3d2616;
  --brand-mid:      #8b5c38;
  --brand-light:    #f5ece5;
  --brand-muted:    #a07858;
  --brand-xlight:   #faf5f0;

  --page-bg:        #f7f2ed;
  --page-bg-accent: #f0e6dd;
  --card-bg:        #ffffff;
  --card-border:    #e6d8ce;
  --text-primary:   #21140d;
  --text-secondary: #6b4226;
  --text-muted:     #a07858;
  --input-bg:       #ffffff;
  --input-border:   #d6c2b0;
  --table-head-bg:  #6b4226;
  --table-head-txt: #ffffff;
  --table-hover:    #faf7f5;
  --divider:        #eddcd1;
  --shadow-sm:      0 2px 8px rgba(107,66,38,.08);
  --shadow-md:      0 8px 24px rgba(107,66,38,.12);
  --nav-bg:         #6b4226;
  --nav-text:       #ffffff;
  --footer-bg:      #f0e6dd;
  --scrollbar:      #c8a888;
  --badge-soft-bg:  #f5ece5;
  --badge-soft-txt: #6b4226;
}

[data-theme="indigo"] {
  --brand:          #3d3580;
  --brand-rgb:      61, 53, 128;
  --brand-dark:     #231e4a;
  --brand-mid:      #5248a8;
  --brand-light:    #eceaf8;
  --brand-muted:    #7870b8;
  --brand-xlight:   #f4f3fc;

  --page-bg:        #f1f0f7;
  --page-bg-accent: #e7e5f1;
  --card-bg:        #ffffff;
  --card-border:    #d6d4e6;
  --text-primary:   #121026;
  --text-secondary: #3d3580;
  --text-muted:     #7870b8;
  --input-bg:       #ffffff;
  --input-border:   #bdbad6;
  --table-head-bg:  #3d3580;
  --table-head-txt: #ffffff;
  --table-hover:    #f6f5fa;
  --divider:        #e5e3f0;
  --shadow-sm:      0 2px 8px rgba(61,53,128,.08);
  --shadow-md:      0 8px 24px rgba(61,53,128,.12);
  --nav-bg:         #3d3580;
  --nav-text:       #ffffff;
  --footer-bg:      #e7e5f1;
  --scrollbar:      #b0a8d8;
  --badge-soft-bg:  #eceaf8;
  --badge-soft-txt: #3d3580;
}

/* NIGHT THEME (dark, high contrast) */
[data-theme="night"] {
  --brand:          #92baa5;
  --brand-rgb:      146, 186, 165;
  --brand-dark:     #2c4a3b;
  --brand-mid:      #4f7a63;
  --brand-light:    #202c26;
  --brand-muted:    #b5d3c4;
  --brand-xlight:   #18221d;

  --page-bg:        #111312;
  --page-bg-accent: #191c1b;
  --card-bg:        #1e2220;
  --card-border:    rgba(143,168,155,.12);
  --text-primary:   #e1e8e5;
  --text-secondary: #92baa5;
  --text-muted:     #83998f;
  --input-bg:       rgba(0,0,0,.25);
  --input-border:   rgba(146,186,165,.20);
  --table-head-bg:  #18221d;
  --table-head-txt: #e1e8e5;
  --table-hover:    rgba(146,186,165,.08);
  --divider:        rgba(146,186,165,.12);
  --shadow-sm:      0 2px 10px rgba(0,0,0,.45);
  --shadow-md:      0 10px 30px rgba(0,0,0,.55);
  --nav-bg:         #0d0f0e;
  --nav-text:       #e1e8e5;
  --footer-bg:      #0d0f0e;
  --scrollbar:      rgba(146,186,165,.20);
  --badge-soft-bg:  rgba(146,186,165,.15);
  --badge-soft-txt: #92baa5;
}

/* AURORA THEME (fresh, modern) */
[data-theme="aurora"] {
  --brand:          #0aa7b8;
  --brand-rgb:      10, 167, 184;
  --brand-dark:     #06606a;
  --brand-mid:      #12c2d2;
  --brand-light:    #e3fbfd;
  --brand-muted:    #3e98a3;
  --brand-xlight:   #f0feff;

  --page-bg:        #eef7f8;
  --page-bg-accent: #dff1f2;
  --card-bg:        #ffffff;
  --card-border:    #cfe7e8;
  --text-primary:   #071a1d;
  --text-secondary: #0aa7b8;
  --text-muted:     #4d8c93;
  --input-bg:       #ffffff;
  --input-border:   #b9dde0;
  --table-head-bg:  #0a7f8d;
  --table-head-txt: #ffffff;
  --table-hover:    #f1fbfb;
  --divider:        #d3ecee;
  --shadow-sm:      0 2px 8px rgba(10,167,184,.08);
  --shadow-md:      0 8px 24px rgba(10,167,184,.12);
  --nav-bg:         #0a7f8d;
  --nav-text:       #ffffff;
  --footer-bg:      #dff1f2;
  --scrollbar:      #8dd3da;
  --badge-soft-bg:  #e3fbfd;
  --badge-soft-txt: #0a7f8d;
}

/* OPERA THEME — Classic Opera Mini red & white */
[data-theme="opera"] {
  --brand:          #c0003b;
  --brand-rgb:      192, 0, 59;
  --brand-dark:     #7a0025;
  --brand-mid:      #e0004a;
  --brand-light:    #ffeaef;
  --brand-muted:    #c4607a;
  --brand-xlight:   #fff5f7;

  --page-bg:        #fdf5f7;
  --page-bg-accent: #f5e0e6;
  --card-bg:        #ffffff;
  --card-border:    #f0c0cc;
  --text-primary:   #1a000a;
  --text-secondary: #c0003b;
  --text-muted:     #a06070;
  --input-bg:       #ffffff;
  --input-border:   #e8b0bc;
  --table-head-bg:  #c0003b;
  --table-head-txt: #ffffff;
  --table-hover:    #fff0f3;
  --divider:        #f5d0d8;
  --shadow-sm:      0 2px 8px rgba(192,0,59,.08);
  --shadow-md:      0 8px 24px rgba(192,0,59,.14);
  --nav-bg:         #b8003a;
  --nav-text:       #ffffff;
  --footer-bg:      #f5e0e6;
  --scrollbar:      #e8a0b0;
  --badge-soft-bg:  #ffeaef;
  --badge-soft-txt: #c0003b;
}


/* ── Base page ───────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
  background-color: var(--page-bg);
  background-image:
    radial-gradient(1100px 600px at 12% -10%, var(--page-bg-accent) 0%, transparent 55%),
    radial-gradient(900px 500px at 90% 110%, var(--page-bg-accent) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text-primary);
  transition: background-color .4s cubic-bezier(0.4,0,.2,1),
              color .4s cubic-bezier(0.4,0,.2,1);
  min-height: 100vh;
}

/* Refined selection */
::selection { background: var(--brand-light); color: var(--brand-dark); }

/* ── Utility colour classes ─────────────────────────────────────────────── */
.text-forest        { color: var(--text-secondary) !important; }
.bg-forest          { background-color: var(--nav-bg) !important; }
.bg-forest-light    { background-color: var(--brand-light) !important; }
.border-forest      { border-color: var(--brand) !important; }

/* ── Base Buttons ────────────────────────────────────────────────────────── */
.btn-forest {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  font-weight: 500;
  transition: all 0.2s;
}
.btn-forest:hover, .btn-forest:focus {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #ffffff;
}

/* ─── Segmented Control (vd-seg) ──────────────────────────── */
.vd-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--brand-rgb), 0.18);
  border-radius: 50px;
  padding: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), inset 0 1px 2px rgba(255,255,255,0.8);
  position: relative;
}
.vd-seg-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #555;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.22s ease;
  cursor: pointer;
  border: none;
  background: transparent;
  outline: none;
}
.vd-seg-item:hover:not(.active) {
  color: var(--brand);
  background: rgba(var(--brand-rgb), 0.07);
}
.vd-seg-item.active {
  color: #fff !important;
  font-weight: 600;
}
.vd-seg-item.active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 75%, #1a3a1f) 100%);
  box-shadow: 0 2px 10px rgba(var(--brand-rgb), 0.45);
  z-index: -1;
  animation: vd-seg-pop 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Color Variations */
.vd-seg-success.active::before {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45);
}
.vd-seg-success:hover:not(.active) { color: #10b981; background: rgba(16, 185, 129, 0.07); }

.vd-seg-danger.active::before {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.45);
}
.vd-seg-danger:hover:not(.active) { color: #ef4444; background: rgba(239, 68, 68, 0.07); }

.vd-seg-dark.active::before {
  background: linear-gradient(135deg, #374151 0%, #111827 100%);
  box-shadow: 0 2px 10px rgba(55, 65, 81, 0.45);
}
.vd-seg-dark:hover:not(.active) { color: #374151; background: rgba(55, 65, 81, 0.07); }

.vd-seg-item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes vd-seg-pop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ─── Separated Icon Buttons (vd-icon-btn) ──────────────────────────── */
.vd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  box-shadow: none;
  color: #888;
  transition: all 0.2s ease;
  cursor: pointer;
  outline: none;
  font-size: 1.15rem;
}
.vd-icon-btn:hover:not(.active):not(:disabled) {
  background: transparent;
  box-shadow: none;
  transform: scale(1.15);
}
.vd-icon-btn.active {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.vd-icon-success.active { color: #10b981 !important; }
.vd-icon-success:hover:not(.active):not(:disabled) { color: #10b981; }

.vd-icon-danger.active { color: #ef4444 !important; }
.vd-icon-danger:hover:not(.active):not(:disabled) { color: #ef4444; }

.vd-icon-dark.active { color: #374151 !important; }
.vd-icon-dark:hover:not(.active):not(:disabled) { color: #374151; }

.vd-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── Icons & Accents ────────────────────────────────────────────────────── */
i.bi { color: var(--brand-muted); }
.text-forest i.bi, .text-primary i.bi, .text-success i.bi, .text-warning i.bi, .text-danger i.bi, .text-info i.bi {
    color: inherit;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-forest {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 500;
  letter-spacing: .2px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}
.btn-forest:hover, .btn-forest:focus {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.btn-forest:active { transform: translateY(0) scale(.98); }

.btn-outline-forest {
  color: var(--brand);
  border-color: var(--brand);
  background: transparent;
  font-weight: 500;
}
.btn-outline-forest:hover {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.btn-soft-forest {
  background-color: var(--brand-light);
  border: 1px solid rgba(var(--brand-rgb), 0.12);
  color: var(--brand);
  font-weight: 500;
  letter-spacing: .2px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), 0.04);
}
.btn-soft-forest:hover, .btn-soft-forest:focus {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.12);
  transform: translateY(-1.5px);
}
.btn-soft-forest:active {
  transform: translateY(0) scale(.98);
}
.btn-soft-forest i.bi {
  color: inherit;
}

/* Icons inside any button should follow the button's text colour, not the
   global muted-brand default — otherwise a "+" on a coloured button renders
   in muted green-on-green and becomes nearly invisible. */
.btn i.bi { color: inherit; }

/* ── Standard "Add / Create" action button ──────────────────────────────────
   One consistent style for every primary create/add/register CTA across the
   app (e.g. "Register Case", "Add New Village", "Create New Backup"). Green
   reads as a positive "new" action and stays consistent across all themes.
   Usage: <button class="btn btn-action btn-sm">…</button>                    */
.btn-action {
  background-color: #2faa67;
  border-color: #2faa67;
  color: #fff;
  font-weight: 500;
  letter-spacing: .2px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}
.btn-action:hover, .btn-action:focus {
  background-color: #1a8a54;
  border-color: #1a8a54;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.btn-action:active { transform: translateY(0) scale(.98); box-shadow: none; }
/* Keep the leading "+" crisp, white and a touch bolder so the action reads
   at a glance — this is the icon that was previously obscured. */
.btn-action i.bi {
  color: #fff;
  font-weight: 500;
}


/* Generic ripple-ish focus ring on all interactive controls */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.28),
              0 0 0 1px var(--brand);
}

/* Extra-small button */
.btn-xs {
  padding: 1px 7px;
  font-size: .75rem;
  border-radius: .25rem;
  line-height: 1.4;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar.bg-forest {
  background: linear-gradient(135deg, var(--nav-bg) 0%, var(--brand-dark) 100%) !important;
  transition: background-color .25s ease, box-shadow .3s ease;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 18px rgba(0,0,0,0.10), 0 1px 0 rgba(255,255,255,0.04) inset;
  position: relative;
}
/* Subtle accent line at the very bottom of the navbar */
.navbar.bg-forest::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 28%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.18) 72%,
    transparent 100%);
  opacity: .55;
  pointer-events: none;
}

.navbar.bg-forest .navbar-brand {
  letter-spacing: .2px;
  transition: transform .25s cubic-bezier(0.34,1.3,0.64,1), opacity .2s ease;
}
.navbar.bg-forest .navbar-brand:hover { transform: translateY(-1px); }
.navbar.bg-forest .navbar-brand i.bi-tree-fill {
  color: #d8f1e2;
  text-shadow: 0 1px 4px rgba(0,0,0,.22);
}

/* ── Navbar logo hover — smooth scale-up ──────────────────── */
.nav-logo {
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.35s ease;
  will-change: transform;
}
.navbar-brand:hover .nav-logo {
  transform: scale(1.18);
  filter: drop-shadow(0 4px 12px rgba(255,255,255,0.28));
}

.navbar.bg-forest .navbar-brand .brand-title {
  line-height: 1.05;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .15px;
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
}
.navbar.bg-forest .navbar-brand .brand-subtitle {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .55px;
  opacity: .72;
  text-transform: uppercase;
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,0.82);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .15px;
  position: relative;
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
  transition: background-color .25s cubic-bezier(0.4,0,.2,1),
              color .2s ease,
              transform .25s cubic-bezier(0.34,1.2,0.64,1);
}
.navbar-dark .navbar-nav .nav-link i.bi {
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem;
  transition: transform .35s cubic-bezier(0.34,1.4,0.64,1);
}
.nav-active {
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10)) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.nav-active::after {
  content: '';
  position: absolute;
  left: 30%; right: 30%;
  bottom: -2px;
  height: 2px;
  background: #fff;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 8px rgba(255,255,255,0.65);
}
.navbar-dark .navbar-nav .nav-link:hover {
  background-color: rgba(255,255,255,0.10);
  color: #fff;
  transform: translateY(-1px);
}
.navbar-dark .navbar-nav .nav-link:hover i.bi {
  transform: scale(1.1);
}

/* Refined navbar toggler (hamburger) */
.navbar-toggler {
  padding: 6px 8px;
  border-radius: .5rem;
  transition: background-color .2s ease, transform .2s ease;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.20); }
.navbar-toggler:hover { background-color: rgba(255,255,255,0.10); }
.navbar-toggler:active { transform: scale(.95); }

/* Hamburger flush-left on mobile (closer to edge) */
@media (max-width: 991.98px) {
  .nav-container {
    padding-left: 8px !important;
    padding-right: 10px !important;
  }
  .nav-toggler-edge {
    margin-left: 0 !important;
    margin-right: 6px !important;
    padding: 5px 7px !important;
  }
  .nav-brand-mobile {
    margin-right: 0 !important;
    padding-left: 2px;
  }
  .nav-brand-mobile .brand-compact {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .8px;
  }
  /* Push the mobile search button comfortably to the right edge */
  .btn-mobile-search {
    margin-right: 0;
  }
}

/* Range selector pill inside navbar */
.range-select {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  font-size: .8rem;
  min-width: 130px;
}
.range-select option { background: var(--brand-dark); color: #fff; }
.range-select:focus  { box-shadow: none; border-color: rgba(255,255,255,.5); }

/* ── Theme Switcher ─────────────────────────────────────────────────────── */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  padding: 4px 10px;
}

/* Theme selector inside dropdown */
.theme-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
  flex-shrink: 0;
}
.theme-swatch[data-t="forest"] { background: linear-gradient(135deg,#1a5c38,#0e3a23); }
.theme-swatch[data-t="slate"]  { background: linear-gradient(135deg,#2b4c7e,#162a4a); }
.theme-swatch[data-t="ember"]  { background: linear-gradient(135deg,#6b4226,#3d2616); }
.theme-swatch[data-t="indigo"] { background: linear-gradient(135deg,#3d3580,#231e4a); }
.theme-swatch[data-t="night"]  { background: linear-gradient(135deg,#111312,#0d0f0e); }
.theme-swatch[data-t="aurora"] { background: linear-gradient(135deg,#0aa7b8,#06606a); }
.theme-swatch[data-t="opera"]  { background: linear-gradient(135deg,#e0004a,#7a0025); }

/* Translucent YES/NO pills (DFO/FSO) - Official Format */
.vd-pill-yes, .vd-pill-no, .vd-pill-na {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem !important;
  border-radius: 4px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.vd-pill-yes {
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}
.vd-pill-no {
  background-color: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}
.vd-pill-na {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}
.theme-switcher-label {
  color: rgba(255,255,255,.7);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .4px;
  white-space: nowrap;
}
.gfd-table tbody td {
  padding: .75rem .9rem !important;
  vertical-align: middle;
  border-bottom: 1px solid var(--divider) !important;
  font-size: .82rem;
  color: var(--text-primary);
  transition: background-color .2s ease;
  font-variant-numeric: tabular-nums;
}

.gfd-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Smooth row hover with subtle lift and depth */
.gfd-table.table-hover tbody tr {
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow .2s ease, 
              background-color .2s ease;
}

.gfd-table.table-hover tbody tr:hover {
  background-color: var(--table-hover) !important;
  transform: scale(1.002) translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  z-index: 2;
  position: relative;
}

.gfd-table.table-hover tbody tr:hover td {
  background-color: var(--table-hover) !important;
}
.theme-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  cursor: pointer;
  transition: transform .3s cubic-bezier(0.34,1.4,0.64,1),
              border-color .2s cubic-bezier(0.4,0,.2,1),
              box-shadow .2s cubic-bezier(0.4,0,.2,1);
  flex-shrink: 0;
}
.theme-dot:hover {
  transform: scale(1.35);
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 0 0 3px rgba(255,255,255,.28);
}
.theme-dot.active {
  border-color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(255,255,255,.4);
}
.theme-dot[data-t="forest"] { background: #1a5c38; }
.theme-dot[data-t="slate"]  { background: #2b4c7e; }
.theme-dot[data-t="ember"]  { background: #6b4226; }
.theme-dot[data-t="indigo"] { background: #3d3580; }
.theme-dot[data-t="night"]  { background: #111312; }
.theme-dot[data-t="aurora"] { background: #0aa7b8; }
.theme-dot[data-t="opera"]  { background: #c0003b; }

/* ── Table & Data Presentation ─────────────────────────────────────────── */
.table-forest,
.table-forest > :not(caption) > * > *,
.table-forest th {
  background-color: var(--table-head-bg) !important;
  background: linear-gradient(90deg, var(--brand-dark) 0%, var(--table-head-bg) 50%, var(--brand-mid) 100%) !important;
  color: var(--table-head-txt) !important;
}
.table-forest th {
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .35px;
  text-transform: uppercase;
}

/* Smooth row hover */
.table-hover tbody tr {
  transition: background-color .2s cubic-bezier(0.4,0,.2,1),
              transform .25s cubic-bezier(0.4,0,.2,1),
              box-shadow .2s ease;
}
.table-hover tbody tr:hover td { background-color: var(--table-hover) !important; }

/* Light theme table header (bootstrap .table-light) */
.table-light > :not(caption) > * > * {
  background-color: var(--brand-xlight) !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--divider) !important;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  border-radius: .85rem !important;
  border: 1px solid var(--card-border) !important;
  background-color: var(--card-bg) !important;
  box-shadow: var(--shadow-sm) !important;
  will-change: transform;
  overflow: hidden;
  transition: background-color .3s cubic-bezier(0.4,0,.2,1),
              box-shadow .35s cubic-bezier(0.4,0,.2,1),
              border-color .3s cubic-bezier(0.4,0,.2,1),
              transform .4s cubic-bezier(0.34,1.2,0.64,1);
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
}
.card-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.25)) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--divider);
  font-size: .88rem;
  padding: .7rem 1.15rem;
  font-weight: 600;
  letter-spacing: .15px;
  color: var(--text-secondary);
}
[data-theme="night"] .card-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
}

/* ── Stat cards ─────────────────────────────────────────────────────────── */
/* ── Stat cards ─────────────────────────────────────────────────────────── */
.stat-card-wrap {
  display: block;
  height: 100%;
  text-decoration: none;
}

.stat-card {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  position: relative;
  will-change: transform, box-shadow;
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: visible !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255,255,255,0.4) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateY(0) scale(1) translateZ(0);
}

[data-theme="night"] .stat-card, [data-theme="slate"] .stat-card {
  background: rgba(20, 25, 35, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

[data-theme="opera"] .stat-card {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(192, 0, 59, 0.12) !important;
  box-shadow: 0 4px 20px rgba(192, 0, 59, 0.06), inset 0 0 0 1px rgba(255,255,255,0.6) !important;
}

/* Subtle glowing border behind */
.stat-card:hover, .stat-card-wrap:hover .stat-card {
  transform: translateY(-6px) scale(1.02) translateZ(0);
  box-shadow: 0 22px 44px rgba(var(--brand-rgb), 0.15), 0 8px 16px rgba(0, 0, 0, 0.06) !important;
  border-color: var(--brand-light) !important;
}

.stat-card i.bi {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
}

.stat-card:hover i.bi, .stat-card-wrap:hover .stat-card i.bi {
  transform: scale(1.25) translateY(-4px);
  filter: drop-shadow(0 4px 6px rgba(var(--brand-rgb), 0.3));
}

.stat-num { 
  font-size: 1.9rem; 
  font-weight: 800; 
  line-height: 1.1; 
  letter-spacing: -0.5px; 
  transition: all 0.3s;
  background-image: linear-gradient(120deg, currentColor 0%, var(--brand) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-card:hover .stat-num {
  text-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.2);
}

.stat-label { 
  font-size: 0.72rem; 
  color: var(--text-muted); 
  font-weight: 700; 
  letter-spacing: 0.5px; 
  text-transform: uppercase; 
  margin-top: 5px;
}
.stat-card a, a:has(> .stat-card) { display: block; height: 100%; text-decoration: none; }

/* ── Badge overrides ────────────────────────────────────────────────────── */
.badge.bg-forest-light {
  background-color: var(--badge-soft-bg) !important;
  color: var(--badge-soft-txt) !important;
  border: 1px solid var(--divider);
}

/* ── DataTables integration ─────────────────────────────────────────────── */
div.dataTables_wrapper div.dataTables_filter input {
  border: 1px solid var(--input-border);
  border-radius: .375rem;
  padding: .25rem .5rem;
  margin-left: 4px;
  background: var(--input-bg);
  color: var(--text-primary);
}
div.dataTables_wrapper div.dataTables_length select {
  border-radius: .375rem;
  padding: .2rem .4rem;
  background: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
}
div.dataTables_paginate .paginate_button.current,
div.dataTables_paginate .paginate_button.current:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  border-radius: .25rem;
}
div.dataTables_paginate .paginate_button:hover {
  background: var(--brand-light) !important;
  border-color: var(--brand-light) !important;
  color: var(--brand) !important;
}
.dataTables_info, .dataTables_length, .dataTables_filter label {
  color: var(--text-muted) !important;
}

/* ── Import — drag-and-drop zone ─────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--input-border);
  border-radius: .5rem;
  background: var(--brand-xlight);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.drop-zone:hover,
.drop-zone.drop-active {
  border-color: var(--brand);
  background: var(--brand-light);
}
.drop-zone .drop-zone-inner { pointer-events: none; }

/* ── Accordion (notification list) ──────────────────────────────────────── */
.accordion-button:not(.collapsed) {
  background: var(--brand-light);
  color: var(--brand);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: none; }
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a5c38'%3e%3cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
  filter: none;
  background-size: 1rem;
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a5c38'%3e%3cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
  filter: none;
  transform: rotate(-180deg);
}
.accordion-button:hover::after {
  transform: scale(1.15);
}
.accordion-button:not(.collapsed):hover::after {
  transform: scale(1.15) rotate(-180deg);
}
.accordion-item { border-color: var(--divider) !important; }

/* ── Form controls ───────────────────────────────────────────────────────── */
.form-control, .form-select {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border-color: var(--input-border);
  border-radius: .55rem;
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.form-control:hover, .form-select:hover {
  border-color: var(--brand-muted);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 .22rem rgba(var(--brand-rgb), 0.18) !important;
}
.input-group-text {
  background-color: var(--brand-xlight);
  border-color: var(--input-border);
  color: var(--brand);
}

/* ── Alert flash messages ────────────────────────────────────────────────── */
.alert { border-radius: .4rem; }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb { font-size: .82rem; }
.breadcrumb-item.active { color: var(--text-muted); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
  font-size: .76rem;
  letter-spacing: .35px;
  background: linear-gradient(180deg, transparent, var(--footer-bg)) !important;
  border-color: var(--divider) !important;
  color: var(--text-muted) !important;
  transition: background-color .25s;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
footer i.bi-tree { color: var(--brand-mid); }

/* ── Scrollbar (webkit) ──────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color .2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-muted);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}
.modal-header.bg-forest {
  background: var(--nav-bg) !important;
}

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .stat-num  { font-size: 1.4rem; }
  .container-fluid { padding-left: 12px; padding-right: 12px; }
  .theme-switcher-label { display: none; }
}

/* ── Village Status Badges ────────────────────────────────────────────── */
.vd-status-review {
  background-color: #fff3cd !important;
  color: #856404 !important;
  border: 1px solid #ffeeba !important;
  font-weight: 600 !important;
}
.vd-status-verified {
  background-color: #d1e7dd !important;
  color: #0f5132 !important;
  border: 1px solid #badbcc !important;
  font-weight: 600 !important;
}
.vd-status-pending {
  background-color: #f8f9fa !important;
  color: #6c757d !important;
  border: 1px solid #dee2e6 !important;
  font-weight: 500 !important;
}

/* ── Compact Dropdowns ──────────────────────────────────────────────────── */
.dropdown-menu {
  padding: 0.4rem 0.3rem;
  border-color: rgba(0,0,0,0.06);
  border-radius: .7rem;
  box-shadow: 0 14px 40px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: gfd-dropdown-in .22s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: top center;
}
.dropdown-menu-dark {
  background: linear-gradient(180deg, #1a2331, #131a25);
}
@keyframes gfd-dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-item {
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  border-radius: .45rem;
  margin: 1px 2px;
  transition: background-color .2s cubic-bezier(0.4,0,.2,1),
              color .18s ease,
              padding-left .2s ease;
}
.dropdown-item:hover {
  background-color: var(--brand-light) !important;
  color: var(--brand) !important;
  padding-left: .95rem;
}
.dropdown-menu-dark .dropdown-item {
  color: rgba(255,255,255,.85);
}
.dropdown-menu-dark .dropdown-item:hover {
  background-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.dropdown-header { font-size: .68rem; letter-spacing: .8px; text-transform: uppercase; padding: .35rem .9rem; opacity: .8; }
.dropdown-divider { margin: .25rem .25rem; opacity: .35; }

/* ── Compact Alerts (Flash Messages) ────────────────────────────────────── */
.alert {
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.alert .btn-close {
  padding: 0.65rem 0.65rem;
  font-size: 0.5rem;
}

/* ── Entrance Animations ─────────────────────────────────────────────────── */
@keyframes gfd-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gfd-enter {
  animation: gfd-fade-up 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Button micro-interactions ──────────────────────────────────────────── */
.btn {
  transition: background-color .2s cubic-bezier(0.4,0,.2,1),
              border-color .2s cubic-bezier(0.4,0,.2,1),
              color .15s ease,
              transform .18s cubic-bezier(0.34,1.2,0.64,1),
              box-shadow .2s cubic-bezier(0.4,0,.2,1) !important;
}
.btn:active:not(:disabled) {
  transform: scale(0.96) !important;
}

/* ── Reduced-motion safety ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gfd-enter { animation: none !important; opacity: 1 !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Active filter tags (shared across list pages) ──────────────────────── */
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--brand-light);
  color: var(--brand);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  white-space: nowrap;
}
.filter-tag a { color: var(--brand); text-decoration: none; opacity: 0.7; }
.filter-tag a:hover { opacity: 1; }

/* ── Global search suggestion thana chip ───────────────────────────────── */
.search-thana-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--chip-border, var(--card-border));
  background: var(--chip-bg, var(--brand-light));
  color: var(--chip-text, var(--brand));
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── Notification forest category badges ───────────────────────────────── */
.forest-category-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.forest-category-badge[data-category="Protected Forest"] {
  background: #e7f6ee;
  border-color: #8dc7a4;
  color: #12613b;
}
.forest-category-badge[data-category="Reserved Forest"] {
  background: #b91c1c;
  border-color: #991b1b;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.25);
}
.forest-category-badge[data-category="CA Land"] {
  background: #fff4df;
  border-color: #e3bc6c;
  color: #7a5310;
}
.forest-category-badge[data-category="Other"] {
  background: #f1f3f5;
  border-color: #c7ced6;
  color: #4b5563;
}
.forest-category-badge[data-category="Deemed Forest"] {
  background: #fdf3f5;
  border-color: #eab8c6;
  color: #9e2a4a;
}
@keyframes badge-shine {
  from { transform: translate(-100%, -100%); }
  to { transform: translate(100%, 100%); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE & TABLET ENHANCEMENTS
   Primary device: Desktop. These styles improve mobile experience additively.
   All breakpoints use max-width so desktop layout is completely untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile Bottom Navigation Bar ────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none; /* hidden by default; enabled below lg */
}

@media (max-width: 991.98px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1035;
    /* safe-area for notched phones */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(to top, var(--brand-dark) 0%, var(--nav-bg) 100%);
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.22);
    min-height: 58px;
  }

  /* Push page content above the bottom nav */
  #mainContainer {
    padding-bottom: 72px !important;
  }
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  padding: 7px 4px 8px;
  gap: 3px;
  position: relative;
  transition: color .25s ease, background-color .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.mobile-nav-item i.bi {
  font-size: 1.22rem;
  color: inherit;
  transition: transform .32s cubic-bezier(0.34,1.5,0.64,1),
              filter .25s ease;
}

.mobile-nav-item span {
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .25s ease;
}

/* Active state: white + animated top accent pill + glow */
.mobile-nav-item.active {
  color: #fff;
}

.mobile-nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 28%;
  right: 28%;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.6), #fff, rgba(255,255,255,0.6));
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 12px rgba(255,255,255,0.55);
  animation: gfd-mobnav-pop .32s cubic-bezier(0.34,1.5,0.64,1);
}

@keyframes gfd-mobnav-pop {
  from { transform: scaleX(.2); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

.mobile-nav-item.active i.bi {
  transform: scale(1.22) translateY(-1px);
  filter: drop-shadow(0 2px 6px rgba(255,255,255,0.35));
}

.mobile-nav-item:not(.active):hover { color: rgba(255,255,255,0.85); }
.mobile-nav-item:not(.active):active {
  background: rgba(255,255,255,0.08);
  transform: scale(.97);
}

/* ── Mobile Search Overlay ────────────────────────────────────────────────── */
.mobile-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  /* visibility:hidden is more reliable than pointer-events:none across browsers */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s cubic-bezier(0.4,0,.2,1), visibility 0s .25s;
}

.mobile-search-overlay.mso-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transition: opacity .25s cubic-bezier(0.4,0,.2,1), visibility 0s 0s;
}

.mobile-search-overlay.mso-visible .mobile-search-header {
  transform: translateY(0);
  opacity: 1;
}
.mobile-search-overlay.mso-visible .mobile-search-results-panel {
  transform: translateY(0);
  opacity: 1;
}

.mobile-search-header {
  background: linear-gradient(135deg, var(--nav-bg), var(--brand-dark));
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transform: translateY(-18px);
  opacity: 0;
  transition: transform .32s cubic-bezier(0.22, 1, 0.36, 1), opacity .28s ease;
  position: relative;
  z-index: 20;
}

.mobile-search-header .form-control {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  border-radius: .5rem;
  font-size: .9rem;
}

.mobile-search-header .form-control::placeholder { color: rgba(255,255,255,0.55); }
.mobile-search-header .form-control:focus {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  box-shadow: none;
  color: #fff;
}

.mobile-search-results-panel {
  background: var(--card-bg);
  max-height: 60vh;
  overflow-y: auto;
  border-bottom: 1px solid var(--divider);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  transform: translateY(-10px);
  opacity: 0;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1) .04s,
              opacity .3s ease .04s;
  position: relative;
  z-index: 10;
}

.mobile-search-backdrop {
  flex: 1;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Mobile search trigger button (shown only on mobile in navbar) */
.btn-mobile-search {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: .375rem;
  color: rgba(255,255,255,0.9);
  padding: 5px 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  transition: background .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-mobile-search:hover,
.btn-mobile-search:focus {
  background: rgba(255,255,255,0.22);
  color: #fff;
  outline: none;
}

/* ── Navbar Collapse — Mobile Fixes ──────────────────────────────────────── */
@media (max-width: 991.98px) {

  /* Mobile Nav Backdrop */
  .nav-backdrop {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 56px);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
  }
  .nav-backdrop.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s;
  }

  /* ── Compact left-anchored flyout panel ── */
  #mainNav.navbar-collapse {
    /* Break out of the flex row; sit below the navbar bar */
    display: block !important;
    position: fixed !important;
    top: 56px !important; /* height of navbar */
    left: 0 !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 80vw !important;
    height: calc(100vh - 56px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Appearance */
    background: linear-gradient(160deg, var(--nav-bg) 0%, var(--brand-dark) 100%);
    border-radius: 0;
    border-right: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    box-shadow: 4px 10px 28px rgba(0,0,0,0.28);
    padding: 10px 8px 80px 8px;
    z-index: 1040;
    
    /* Smooth slide animation */
    visibility: hidden;
    transform: translateX(-105%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.35, 1), visibility 0.4s;
  }
  
  #mainNav.navbar-collapse.gfd-nav-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.35, 1), visibility 0s;
  }

  /* Nav links: icon + label in a row, compact */
  #mainNav .navbar-nav {
    align-items: flex-start !important;
    width: 100%;
  }

  #mainNav .navbar-nav .nav-item {
    width: 100%;
  }

  #mainNav .navbar-nav .nav-link {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 9px;
    align-items: center;
    padding: .5rem .75rem;
    border-radius: .45rem;
    white-space: nowrap;
    width: 100%;
  }

  #mainNav .navbar-nav .nav-link i.bi {
    font-size: .95rem;
    margin-bottom: 0 !important;
  }

  /* Hide the right-side tools (search/logout/theme) inside the collapse on mobile.
     These are already accessible via the mobile search button and bottom nav. */
  #mainNav > div.d-flex.align-items-center {
    display: none !important;
  }

  /* Tighten the navbar height a bit */
  .navbar.bg-forest {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  /* Keep position context on the nav so the absolute panel is scoped to it */
  .navbar.bg-forest {
    position: relative;
  }
}

/* ── Table Responsiveness ─────────────────────────────────────────────────── */
.mobile-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  /* Slightly smaller text in tables */
  .table.table-sm > tbody > tr > td,
  .table.table-sm > thead > tr > th {
    font-size: 0.73rem;
    padding: .25rem .35rem;
  }

  /* Reduce container horizontal padding */
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ── Stat Cards — Small Screens ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .stat-num { font-size: 1.45rem; }
  .stat-label { font-size: .67rem; }
  .stat-card .card-body {
    padding: .65rem .5rem !important;
  }
  .stat-card i.bi {
    font-size: 1.3rem !important;
  }
  .theme-switcher-label { display: none; }
}

/* ── Disable hover bounce on pure-touch devices ──────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .stat-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
    border-color: var(--divider) !important;
    background-color: var(--card-bg) !important;
  }
  .nav-link:hover {
    transform: none !important;
    background-color: transparent !important;
  }
  .btn:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOREST CRIME REGISTER STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section header — muted burgundy */
.crime-sec-header {
  background-color: #5d4037 !important; /* Muted brown-red fallback */
  background: linear-gradient(135deg, #4e342e 0%, #5d4037 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: .85rem;
  padding: .65rem 1rem;
  border-bottom: none;
}

.crime-sec-header .btn-outline-light {
  border-color: rgba(255,255,255,.4) !important;
  font-size: .72rem;
}

/* Static reddish chip for plots with crimes */
.vd-chip-crime {
  background: #fdf2f2 !important;
  color: #991b1b !important;
  border-color: #f87171 !important;
  font-weight: 700 !important;
  cursor: default;
}

.vd-chip-crime .crime-chip-icon {
  font-size: .58rem;
  margin-left: 4px;
  vertical-align: middle;
  opacity: .8;
}

/* Nature badge — muted */
.crime-nature-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  background: #f5ecec;
  color: #7f1d1d;
  border: 1px solid #e5c7c7;
  letter-spacing: .2px;
}

/* Crime status badges */
.crime-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid;
}
.crime-st-open          { background: #fff3cd; color: #856404; border-color: #ffeeba; }
.crime-st-investigating { background: #cfe2ff; color: #084298; border-color: #b6d4fe; }
.crime-st-court         { background: #e8d5ff; color: #5f1dab; border-color: #d0a5ff; }
.crime-st-convicted     { background: #d1e7dd; color: #0f5132; border-color: #badbcc; }
.crime-st-acquitted     { background: #f8d7da; color: #842029; border-color: #f5c2c7; }
.crime-st-compounded    { background: #f0f0f0; color: #555;    border-color: #ccc; }

/* Crime table */
.crime-table thead th { 
  background-color: #7f1d1d !important; 
  background: linear-gradient(90deg, #7f1d1d 0%, #991b1b 100%) !important; 
  color: #fff !important; 
  font-size: .78rem; 
  padding: 7px 10px; 
  font-weight: 600; 
  border: none; 
}
.crime-table td       { padding: 8px 10px; vertical-align: middle; font-size: .82rem; border-color: #fde0e0; }
.crime-table tbody tr:hover td { background: #fff5f5 !important; }

/* Add crime form panel */
.crime-form-panel {
  background: #fff8f8;
  border-bottom: 1px solid #fde0e0;
  padding: 1.1rem 1.25rem;
}

.crime-booked-details {
  background: #fff0f0;
  border: 1px solid #fde0e0;
  border-radius: .4rem;
  padding: .75rem 1rem;
  margin-top: .5rem;
}

/* Case booked pill toggle */
.crime-booked-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Touch targets — minimum 44 px ───────────────────────────────────────── */
@media (max-width: 991.98px) {
  .form-control,
  .form-select {
    min-height: 42px;
  }
  .btn:not(.btn-xs) {
    min-height: 38px;
  }
  .navbar-toggler {
    padding: 6px 9px;
    min-height: 38px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFESSIONAL POLISH & REFINEMENT (FINAL LAYER)
   Adds: heading typography, page transitions, refined chips, ribbon accents,
   refined alerts, modal polish, breadcrumb refinement, links micro-motion,
   smooth theme cross-fade, and additional aesthetic micro-details.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Headings — tighter tracking + crisp weight */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  letter-spacing: -.2px;
  color: var(--text-primary);
}
.text-forest {
  color: var(--text-secondary) !important;
  letter-spacing: -.15px;
}

/* Link micro-motion */
a {
  transition: color .18s ease, opacity .18s ease;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Refined breadcrumb */
.breadcrumb {
  font-size: .82rem;
  background: transparent;
  padding: .2rem 0;
  margin-bottom: .65rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  font-weight: 600;
  color: var(--text-muted);
  opacity: .6;
}
.breadcrumb-item a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb-item a:hover { color: var(--brand); }
.breadcrumb-item.active { color: var(--text-muted); }

/* Modal polish — smoother entrance, blurred backdrop */
.modal-backdrop.show { opacity: .55; }
.modal-backdrop {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-content {
  border-radius: 1rem !important;
  border: 1px solid var(--card-border);
  box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.06);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--divider);
  padding: .85rem 1.1rem;
}
.modal-header.bg-forest {
  background: linear-gradient(135deg, var(--nav-bg), var(--brand-dark)) !important;
  color: #fff;
}
.modal-footer { border-top: 1px solid var(--divider); padding: .75rem 1.1rem; }

/* Refined alerts */
.alert {
  border: 1px solid transparent;
  border-radius: .65rem !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  animation: gfd-fade-in .35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.alert-success {
  background: linear-gradient(180deg, #e9f7ef, #dff0e5);
  color: #0c5234;
  border-color: #cce6d6;
}
.alert-danger {
  background: linear-gradient(180deg, #fdecee, #fce0e3);
  color: #842029;
  border-color: #f3c8cd;
}
.alert-warning {
  background: linear-gradient(180deg, #fff8e1, #fff1c2);
  color: #6a4500;
  border-color: #f1d99a;
}
.alert-info {
  background: linear-gradient(180deg, #e8f4fb, #d9ecf8);
  color: #1c4e6c;
  border-color: #b9d8ea;
}
@keyframes gfd-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Refined badges */
.badge {
  font-weight: 600;
  letter-spacing: .25px;
  padding: .28em .55em;
  border-radius: .42rem;
}

/* Main content container — soft fade so it doesn't double-stack with child stagger.
   Use `backwards` (not `both`): `forwards`/`both` makes Windows Chrome retain the
   opacity compositing layer (a stacking context) after the animation ends, which
   pushes nested modals BELOW the body-level .modal-backdrop. `backwards` only
   primes the start state, then reverts to the natural (no-stacking-context) opacity:1. */
#mainContainer {
  animation: gfd-page-fade .35s ease-out backwards;
}
@keyframes gfd-page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Smooth theme transitions — extend to surfaces */
html, body, .card, .navbar, .dropdown-menu, .modal-content,
.form-control, .form-select, .table, footer, .mobile-bottom-nav {
  transition-property: background-color, background, color, border-color, box-shadow;
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(0.4,0,.2,1);
}

/* Mobile search trigger — refined */
.btn-mobile-search {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: .55rem;
  color: rgba(255,255,255,0.95);
  padding: 6px 11px;
  font-size: .9rem;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-mobile-search:hover,
.btn-mobile-search:focus {
  background: rgba(255,255,255,0.20);
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.14);
}
.btn-mobile-search:active { transform: scale(.94); }

/* Mobile bottom-nav: better safe-area + glass touch */
@media (max-width: 991.98px) {
  .mobile-bottom-nav {
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
  }
}

/* Pagination polish */
.pagination .page-link {
  color: var(--text-secondary);
  border-color: var(--divider);
  margin: 0 2px;
  border-radius: .45rem !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pagination .page-link:hover {
  background: var(--brand-light);
  color: var(--brand);
  border-color: var(--brand-light);
}
.pagination .page-item.active .page-link {
  background: linear-gradient(180deg, var(--brand-mid), var(--brand));
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* Accordion polish */
.accordion-item {
  border-radius: .6rem !important;
  overflow: hidden;
  margin-bottom: .35rem;
}
.accordion-button {
  border-radius: .6rem !important;
  font-weight: 600;
  transition: background-color .25s ease, color .2s ease, box-shadow .2s ease;
}

/* Refined small text */
.text-muted { color: var(--text-muted) !important; }
small, .small { letter-spacing: .15px; }

/* Brand subtitle scaling — only on >=md */
@media (min-width: 992px) {
  .brand-title    { font-size: 1rem !important; }
  .brand-subtitle { font-size: .68rem !important; }
}

/* Subtle staggered entry helper for grid items — opt-in via .gfd-stagger */
.gfd-stagger > [class*='col-'] {
  animation: gfd-fade-up .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gfd-stagger > [class*='col-']:nth-child(1) { animation-delay: .02s; }
.gfd-stagger > [class*='col-']:nth-child(2) { animation-delay: .05s; }
.gfd-stagger > [class*='col-']:nth-child(3) { animation-delay: .08s; }
.gfd-stagger > [class*='col-']:nth-child(4) { animation-delay: .11s; }
.gfd-stagger > [class*='col-']:nth-child(5) { animation-delay: .14s; }
.gfd-stagger > [class*='col-']:nth-child(6) { animation-delay: .17s; }
.gfd-stagger > [class*='col-']:nth-child(7) { animation-delay: .20s; }
.gfd-stagger > [class*='col-']:nth-child(8) { animation-delay: .23s; }

/* Theme dropdown — colored swatch ring on hover */
.theme-swatch {
  transition: transform .25s cubic-bezier(0.34,1.4,0.64,1),
              box-shadow .2s ease;
}
.dropdown-item:hover .theme-swatch {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.16), 0 0 0 1px rgba(0,0,0,.08) inset;
}

/* DataTables search input refinement */
div.dataTables_wrapper div.dataTables_filter input {
  border-radius: .5rem;
  padding: .35rem .65rem;
}
div.dataTables_wrapper div.dataTables_filter input:focus {
  outline: none;
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* Search suggestion dropdown — beautiful styling */
#searchSuggestions {
  border-radius: .8rem !important;
  border: 1px solid var(--divider) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
  padding: .35rem .3rem !important;
}
#searchSuggestions .dropdown-item {
  border-radius: .5rem;
  margin: 2px 0;
}
#searchSuggestions .dropdown-item:hover {
  background: var(--brand-light) !important;
  padding-left: .9rem;
}

/* Global search input refinement (desktop) */
#globalSearchInput {
  border-radius: .55rem 0 0 .55rem !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#globalSearchInput::placeholder { color: rgba(255,255,255,0.65); }
#globalSearchInput:focus {
  background: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.45) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10) !important;
  color: #fff !important;
}
#globalSearchForm .btn {
  border-radius: 0 .55rem .55rem 0 !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-left: 0 !important;
}

/* Right-side toolbar buttons (Logout / More) — glassy */
.navbar.bg-forest .btn-outline-light {
  border-radius: .55rem !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.10) !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.navbar.bg-forest .btn-outline-light:hover {
  background: rgba(255,255,255,0.20) !important;
  border-color: rgba(255,255,255,0.30) !important;
  transform: translateY(-1px);
}
.navbar.bg-forest .btn-outline-light:active { transform: translateY(0) scale(.97); }

/* Filter tag polish */
.filter-tag {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .72rem;
  background: var(--brand-light);
  border-color: var(--brand-light);
  color: var(--brand-dark);
  transition: background-color .2s ease, transform .2s ease;
}
.filter-tag:hover {
  background: var(--brand-xlight);
  transform: translateY(-1px);
}

/* Card body comfortable spacing */
.card-body { padding: 1rem 1.15rem; }

/* Search thana chip — slight refinement */
.search-thana-chip {
  font-weight: 700;
  letter-spacing: .2px;
}

/* Discrepancy / Issue status pill polish */
.vd-pill-yes, .vd-pill-no, .vd-pill-na {
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .72rem;
  letter-spacing: .25px;
}

/* Outline-secondary refinement */
.btn-outline-secondary {
  border-color: var(--divider);
  color: var(--text-muted);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-outline-secondary:hover {
  background: var(--brand-light);
  color: var(--brand);
  border-color: var(--brand-light);
}

/* Outline-danger refinement */
.btn-outline-danger {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-outline-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(220,53,69,.18);
}

/* Subtle nav-item separation on desktop */
@media (min-width: 992px) {
  .navbar.bg-forest .navbar-nav .nav-item + .nav-item .nav-link::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 30%;
    bottom: 30%;
    width: 1px;
    background: rgba(255,255,255,0.06);
  }
}

/* "Three-dot more" menu — small refinement */
.dropdown .btn .bi-three-dots-vertical { font-size: 1.05rem; }

/* Skeleton-like soft shimmer for empty states (future-proof) */
@keyframes gfd-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Reduced motion — keep all the polish but respect preference */
@media (prefers-reduced-motion: reduce) {
  .stat-card:hover { transform: none !important; }
  .btn:hover { transform: none !important; }
  .row.g-3 > [class*='col-'] { animation: none !important; opacity: 1 !important; }
  #mainContainer { animation: none !important; }
}

/* Minimalist, Elegant Tooltip Styling */
.tooltip {
  --bs-tooltip-bg: var(--page-bg-accent, #eef0f3);
  --bs-tooltip-color: var(--text-primary);
  --bs-tooltip-border-radius: 6px;
  --bs-tooltip-padding-x: 0.75rem;
  --bs-tooltip-padding-y: 0.45rem;
  opacity: 0.98 !important;
}

.tooltip-inner {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: italic;
  white-space: nowrap;
  max-width: none !important;
  color: var(--text-primary) !important;
  background-color: var(--page-bg-accent, #eef0f3) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: blur(8px);
}

.tooltip .tooltip-arrow {
  display: none !important;
}

/* ── Administration hierarchy custom classes ── */
.style-email {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.shadow-xs {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.bg-light-50 {
  background-color: rgba(248, 249, 250, 0.5) !important;
}
.max-width-500 {
  max-width: 500px;
}
.animate-zoom {
  animation: animateZoom 0.2s ease-out;
}
@keyframes animateZoom {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.range-collapse-icon {
  transition: transform 0.2s ease-in-out;
}
.range-header-toggle.collapsed .range-collapse-icon {
  transform: rotate(-90deg);
}
.range-header-toggle:not(.collapsed) .range-collapse-icon {
  transform: rotate(0deg);
}

/* ── Notification Number Colors ─────────────────────────────────────────── */
.notif-alpha { color: #d73a49; } /* Red for alphabets */
.notif-digit { color: #0366d6; } /* Blue for digits */
.notif-mixed { color: #6f42c1; } /* Purple for mixed */
.notif-slash { color: var(--text-muted); opacity: 0.6; margin: 0 1px; font-weight: normal; }

[data-theme="night"] .notif-alpha { color: #ff7b72; }
[data-theme="night"] .notif-digit { color: #79c0ff; }
[data-theme="night"] .notif-mixed { color: #d2a8ff; }

/* ── Personnel Profile Glow Dot ───────────────────────────────────────── */
.status-glow-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  --glow-color: #6b7280;
  --glow-rgba-start: rgba(107, 114, 128, 0.4);
  --glow-rgba-end: rgba(107, 114, 128, 0);
  background-color: var(--glow-color);
  box-shadow: 0 0 0 var(--glow-rgba-start);
  animation: pulse-glow 2s infinite;
}

.status-glow-dot.glow-duty {
  --glow-color: #10b981;
  --glow-rgba-start: rgba(16, 185, 129, 0.4);
  --glow-rgba-end: rgba(16, 185, 129, 0);
}

.status-glow-dot.glow-leave {
  --glow-color: #f59e0b;
  --glow-rgba-start: rgba(245, 158, 11, 0.4);
  --glow-rgba-end: rgba(245, 158, 11, 0);
}

.status-glow-dot.glow-deputation {
  --glow-color: #3b82f6;
  --glow-rgba-start: rgba(59, 130, 246, 0.4);
  --glow-rgba-end: rgba(59, 130, 246, 0);
}

.status-glow-dot.glow-suspended {
  --glow-color: #ef4444;
  --glow-rgba-start: rgba(239, 68, 68, 0.4);
  --glow-rgba-end: rgba(239, 68, 68, 0);
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 var(--glow-rgba-start); }
  70% { box-shadow: 0 0 0 6px var(--glow-rgba-end); }
  100% { box-shadow: 0 0 0 0 var(--glow-rgba-end); }
}