/* ==========================================================================
   DILG-JONES RMS — DESIGN SYSTEM
   "Civic SaaS" — a government platform that reads like a modern enterprise
   product: deep navy chrome, slate/white working surfaces, a single blue
   accent for action, and restrained color reserved for status meaning
   (green = good, amber = pending, red = attention). Inter throughout,
   generous rounding, soft elevation instead of hard rules.
   ========================================================================== */

:root {
  --navy: #0b1730;
  --navy-soft: #14224a;
  --navy-softer: #1c2c56;

  --ink: #0f172a;
  --ink-soft: #334155;
  --paper: #ffffff;
  --paper-muted: #f8fafc;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --gray: #64748b;

  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-soft: #eff6ff;

  --signal: #dc2626;
  --signal-soft: #fef2f2;
  --good: #059669;
  --good-soft: #ecfdf5;
  --warn: #d97706;
  --warn-soft: #fffbeb;

  --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, monospace;

  --rms-ajax-bar-h: 3px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 10px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .05);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, .10), 0 4px 10px rgba(15, 23, 42, .06);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

html, body { background: var(--paper-muted); font-family: var(--font-sans); }

/* ---- Type ---------------------------------------------------------------*/
.font-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.012em; }
.font-mono    { font-family: var(--font-mono); }

/* ---- Signature hairline (kept as a quiet section divider) ---------------*/
.ink-rule {
  position: relative;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.ink-rule::after {
  content: '';
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  animation: draw-in 700ms cubic-bezier(.16,.84,.44,1) 80ms forwards;
  opacity: .5;
}
@keyframes draw-in { to { transform: scaleX(1); } }

/* ---- Count-up numerals ---------------------------------------------------*/
.count-up { font-variant-numeric: tabular-nums; }

/* ---- Fade/rise entrance, staggered via inline --delay --------------------*/
.enter {
  opacity: 0;
  transform: translateY(6px);
  animation: enter 480ms cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes enter { to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   GLOBAL RETHEME — remaps existing Tailwind utility classes used throughout
   the app onto the navy/slate/brand system, so every page inherits the new
   look without a page-by-page rewrite. Loaded after the Tailwind CDN sheet,
   so equal-specificity single-class rules here win the cascade.
   ========================================================================== */

body { background: var(--paper-muted) !important; }

.bg-slate-50 { background: var(--paper-muted) !important; }
.bg-white    { background: var(--paper) !important; }
.bg-slate-100, .bg-slate-200 { background: var(--paper-muted) !important; }

.border, .border-slate-200, .border-slate-100 { border-color: var(--line) !important; }

.rounded-lg, .rounded-md { border-radius: 0.65rem !important; }
.shadow, .shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }

.text-slate-900 { color: var(--ink) !important; }
.text-slate-800 { color: var(--ink) !important; }
.text-slate-700 { color: var(--ink-soft) !important; }
.text-slate-600, .text-slate-500 { color: var(--gray) !important; }
.text-slate-400 { color: var(--line-strong) !important; }

.text-blue-800 { color: var(--brand) !important; font-weight: 500; text-decoration: none; }
.text-blue-800:hover { color: var(--brand-hover) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Sidebar navy, wherever old bg-[#0b2545]/hover:bg-[#123468] arbitrary-value
   utilities still appear in older view markup. */
[class*="0b2545"] { background-color: var(--navy) !important; color: var(--paper) !important; }
[class*="123468"]:hover { background-color: var(--navy-soft) !important; }

.bg-slate-800 { background: var(--navy) !important; }
.bg-slate-800:hover { background: var(--navy-soft) !important; }

/* Status colors: soft pastel fill + saturated text — real color-coded
   badges, tuned to sit quietly next to the navy/blue chrome. */
.bg-green-100 { background: var(--good-soft) !important; }
.text-green-700, .text-green-800 { color: var(--good) !important; }
.bg-red-50, .bg-red-100 { background: var(--signal-soft) !important; }
.text-red-700, .text-red-800 { color: var(--signal) !important; }
.bg-amber-100 { background: var(--warn-soft) !important; }
.text-amber-700, .text-amber-800 { color: var(--warn) !important; }
.bg-blue-100 { background: var(--brand-soft) !important; }
.text-blue-700 { color: var(--brand) !important; }
.bg-purple-100 { background: #f5f3ff !important; }
.text-purple-700 { color: #7c3aed !important; }
.bg-indigo-100 { background: #eef2ff !important; }
.text-indigo-700 { color: #4f46e5 !important; }

table { font-variant-numeric: tabular-nums; }
th { font-family: var(--font-sans); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px !important; color: var(--gray); }
tbody tr { transition: background 150ms ease; }
tbody tr:hover { background: var(--paper-muted); }

button, a.button { transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, opacity 150ms ease; }
button:active { transform: translateY(1px); }

input, select, textarea {
  font-family: var(--font-sans) !important;
  border-color: var(--line-strong) !important;
  border-radius: 0.5rem !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-soft) !important;
}

/* ==========================================================================
   COMPONENTS — a small, reusable vocabulary so pages built outside the
   dashboard (forms, filter bars, tables) read as the same system instead
   of default Tailwind. Prefer these over ad-hoc slate/blue utilities.
   ========================================================================== */

.eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gray);
}

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .4rem;
}

.field-input {
  display: block;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: .875rem;
  line-height: 1.4;
  padding: .65rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: .55rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field-input::placeholder { color: #94a3b8; }
.field-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field-input:disabled { cursor: not-allowed; background: var(--paper-muted); }
select.field-input { appearance: none; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 14px;
}

/* Card — soft elevation, rounded corners, hover lift on interactive cards. */
.ink-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

/* Executive dashboard controls and summary cards. */
.dashboard-filter { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; padding:.8rem .9rem; background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:.85rem; box-shadow:0 1px 2px rgba(15,23,42,.03); }
.dashboard-filter__label { display:flex; align-items:center; gap:.7rem; color:var(--ink); }
.dashboard-filter__label > div { display:flex; flex-direction:column; line-height:1.25; }
.dashboard-filter__label span { font-size:.77rem; font-weight:700; }
.dashboard-filter__label small { margin-top:.15rem; color:var(--gray); font-size:.68rem; }
.dashboard-filter__icon { width:2rem; height:2rem; display:grid; place-items:center; border-radius:.55rem; color:var(--brand); background:var(--brand-soft); }
.dashboard-filter__controls { display:flex; align-items:center; gap:.65rem; }
.dashboard-select { position:relative; display:flex; align-items:center; min-width:13rem; color:var(--gray); }
.dashboard-select > svg:first-child { position:absolute; left:.75rem; pointer-events:none; }
.dashboard-select select { width:100%; appearance:none; padding:.58rem 2.3rem .58rem 2.25rem; border:1px solid var(--line-strong); border-radius:.6rem; background:var(--paper); color:var(--ink); font-size:.78rem; font-weight:600; cursor:pointer; }
.dashboard-select select:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); outline:none; }
.dashboard-select__chevron { position:absolute; right:.7rem; pointer-events:none; }
.dashboard-filter__clear { display:inline-flex; align-items:center; gap:.25rem; padding:.5rem .65rem; border-radius:.5rem; color:var(--gray); font-size:.72rem; font-weight:600; }
.dashboard-filter__clear:hover { color:var(--signal); background:var(--signal-soft); }
.dashboard-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.dashboard-stat { --stat:#2563eb; --stat-soft:#eff6ff; position:relative; overflow:hidden; min-height:9rem; padding:1.15rem 1.2rem 1rem; background:var(--paper); border:1px solid var(--line); border-radius:.9rem; box-shadow:0 1px 2px rgba(15,23,42,.04),0 5px 16px rgba(15,23,42,.035); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.dashboard-stat::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--stat); opacity:.85; }
.dashboard-stat:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--stat) 30%,var(--line)); box-shadow:0 10px 25px rgba(15,23,42,.08); }
.dashboard-stat__top,.dashboard-stat__footer { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.dashboard-stat__label { color:var(--gray); font-size:.68rem; font-weight:750; letter-spacing:.105em; text-transform:uppercase; }
.dashboard-stat__icon { width:2.25rem; height:2.25rem; display:grid; place-items:center; color:var(--stat); background:var(--stat-soft); border-radius:.65rem; }
.dashboard-stat__value { margin-top:.75rem; color:var(--ink); font-family:var(--font-display); font-size:2rem; font-weight:700; line-height:1; letter-spacing:-.035em; }
.dashboard-stat__footer { margin-top:.85rem; color:var(--gray); font-size:.66rem; }
.dashboard-stat__footer svg { color:var(--stat); opacity:0; transform:translate(-3px,3px); transition:.18s ease; }
.dashboard-stat:hover .dashboard-stat__footer svg { opacity:1; transform:none; }
.dashboard-stat--indigo { --stat:#4f46e5; --stat-soft:#eef2ff; }.dashboard-stat--slate { --stat:#475569; --stat-soft:#f1f5f9; }.dashboard-stat--amber { --stat:#d97706; --stat-soft:#fffbeb; }.dashboard-stat--violet { --stat:#7c3aed; --stat-soft:#f5f3ff; }.dashboard-stat--emerald { --stat:#059669; --stat-soft:#ecfdf5; }.dashboard-stat--cyan { --stat:#0891b2; --stat-soft:#ecfeff; }.dashboard-stat--red { --stat:#dc2626; --stat-soft:#fef2f2; }
.dashboard-stat--red .dashboard-stat__value { color:#dc2626; }
@media (max-width:1100px) { .dashboard-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .dashboard-filter { align-items:flex-start; flex-direction:column; }.dashboard-filter__controls,.dashboard-filter__controls form,.dashboard-select { width:100%; }.dashboard-stat-grid { grid-template-columns:1fr; }.dashboard-stat { min-height:auto; } }

/* Primary action — brand blue, the one thing a screen most wants you to do. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--brand);
  color: var(--paper) !important;
  font-size: .8125rem;
  font-weight: 600;
  padding: .65rem 1.15rem;
  border-radius: .6rem;
  border: 1px solid var(--brand);
  box-shadow: var(--shadow-sm);
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary i { width: 14px; height: 14px; }

/* Secondary action — outline, for the supporting move next to a primary
   button (Print vs Export, Cancel vs Save). */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--paper);
  color: var(--ink-soft) !important;
  border: 1px solid var(--line-strong);
  font-size: .8125rem;
  font-weight: 600;
  padding: .6rem 1.1rem;
  border-radius: .6rem;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.btn-secondary:hover { border-color: var(--brand); color: var(--brand) !important; background: var(--brand-soft); }
.btn-secondary:active { transform: translateY(1px); }
.btn-secondary i { width: 14px; height: 14px; }

/* Status / priority chip — soft tinted pill, tint derived from its own
   text color so any inline `color:` still yields a coherent badge. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid transparent;
  background: color-mix(in srgb, currentColor 12%, white);
}

/* Search / filter input with a leading icon. */
.icon-field { position: relative; }
.icon-field i {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: #94a3b8; pointer-events: none;
}
.icon-field input { padding-left: 2.15rem !important; }

/* Empty state inside a table or list — a quiet invitation, not an error. */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 3.5rem 1rem; color: var(--gray);
}
.empty-state i { width: 30px; height: 30px; color: var(--line-strong); }
.empty-state .headline { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.empty-state .sub { font-size: .8125rem; }

/* Numbered pagination pill. */
.page-pill {
  min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: .5rem; font-size: .8125rem; font-family: var(--font-mono); color: var(--ink-soft);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.page-pill:hover { border-color: var(--brand); color: var(--brand); }
.page-pill.is-current { background: var(--brand); border-color: var(--brand); color: var(--paper); }

/* ==========================================================================
   APP SHELL — collapsible sidebar + topbar
   ========================================================================== */

#sidebar { width: 264px; transition: width 200ms ease, transform 200ms ease; }
#sidebar .nav-label,
#sidebar .sidebar-brand-text,
#sidebar .user-block-text { transition: opacity 120ms ease; white-space: nowrap; }

#sidebar.sidebar-collapsed { width: 84px; }
#sidebar.sidebar-collapsed .nav-label,
#sidebar.sidebar-collapsed .sidebar-brand-text,
#sidebar.sidebar-collapsed .user-block-text { display: none; }
#sidebar.sidebar-collapsed nav a { justify-content: center; }
#sidebar.sidebar-collapsed .sidebar-footer { justify-content: center; }

nav .nav-label.px-3 { font-weight: 600; letter-spacing: .13em; }
nav .nav-label.px-3:not(:first-child) {
  margin-top: .35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
}

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border-radius: .6rem;
  font-size: .8125rem; font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}
.nav-item::before {
  content: '';
  position: absolute; left: -.75rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0; background: #fff;
  transition: height 150ms ease;
}
.nav-item.is-active::before { height: 60%; }
.nav-item i[data-lucide] {
  padding: 3px; border-radius: .4rem; box-sizing: content-box;
  transition: background 150ms ease;
}
.nav-item.is-active {
  background: rgba(37, 99, 235, .22);
  color: #fff;
}
.nav-item.is-active i[data-lucide] { background: var(--brand); }
.nav-item:not(.is-active) { color: rgba(255,255,255,.58); }
.nav-item:not(.is-active):hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item:not(.is-active):hover i[data-lucide] { background: rgba(255,255,255,.08); }

#sidebar.sidebar-collapsed .nav-item::before { left: -.4rem; }

/* Hide sidebar scrollbar while keeping it scrollable */
#sidebar nav {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
#sidebar nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* DILG seal logo in sidebar header */
.sidebar-logo {
  width: 40px; height: 40px; border-radius: 9999px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
  overflow: hidden; shrink-0;
}
.sidebar-logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-profile-link { transition:background .15s ease; }
.sidebar-profile-link:hover { background:rgba(255,255,255,.055); }
.sidebar-profile-link:hover > div:first-child { background:rgba(37,99,235,.55); }

#userMenu { box-shadow: var(--shadow-lg); }

/* ==========================================================================
   AJAX NAVIGATION — top progress bar + busy-state affordances
   Driven by assets/js/ajax.js, which swaps #app-main in place instead of
   doing full page reloads for links/forms inside the app shell.
   ========================================================================== */
.rms-ajax-bar {
  position: fixed;
  top: 0; left: 0;
  height: var(--rms-ajax-bar-h);
  width: 0%;
  background: var(--brand);
  z-index: 9999;
  transition: width .3s ease, opacity .2s ease;
  box-shadow: 0 0 8px rgba(37, 99, 235, .6);
}
.rms-ajax-bar.is-active { width: 70%; }
.rms-ajax-bar.is-done { width: 100%; opacity: 0; }
.rms-logout-overlay { position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:rgba(11,23,48,.48);backdrop-filter:blur(4px);animation:rms-fade-in .16s ease both; }
.rms-logout-card { min-width:220px;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1.75rem;border:1px solid rgba(255,255,255,.7);border-radius:1rem;background:#fff;box-shadow:0 22px 55px rgba(15,23,42,.24);color:var(--ink); }
.rms-logout-card strong { margin-top:.8rem;font-size:.86rem; }.rms-logout-card small { margin-top:.2rem;color:var(--gray);font-size:.68rem; }
.rms-app-spinner { width:28px;height:28px;border:3px solid #dbeafe;border-top-color:var(--brand);border-radius:50%;animation:rms-app-spin .7s linear infinite; }
@keyframes rms-app-spin { to { transform:rotate(360deg); } } @keyframes rms-fade-in { from { opacity:0 } to { opacity:1 } }

body.rms-ajax-loading #app-main {
  opacity: .55;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* Community Reports filter panel */
.report-filter-panel { overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:.9rem; box-shadow:0 1px 2px rgba(15,23,42,.04),0 7px 20px rgba(15,23,42,.035); }
.report-filter-panel__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1rem; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#fbfdff); }
.report-filter-panel__title,.report-filter-panel__actions { display:flex; align-items:center; gap:.7rem; }
.report-filter-panel__title > span { width:2rem; height:2rem; display:grid; place-items:center; border-radius:.55rem; color:var(--brand); background:var(--brand-soft); }
.report-filter-panel__title > div { display:flex; flex-direction:column; line-height:1.25; }
.report-filter-panel__title strong { color:var(--ink); font-size:.78rem; font-weight:750; }
.report-filter-panel__title small { margin-top:.12rem; color:var(--gray); font-size:.68rem; }
.report-filter-count { padding:.27rem .55rem; border-radius:999px; color:var(--brand); background:var(--brand-soft); font-size:.65rem; font-weight:700; }
.report-filter-reset { display:inline-flex; align-items:center; gap:.3rem; padding:.4rem .5rem; border-radius:.45rem; color:var(--gray); font-size:.7rem; font-weight:650; }
.report-filter-reset:hover { color:var(--signal); background:var(--signal-soft); }
.report-filter-grid { display:grid; grid-template-columns:minmax(15rem,1.35fr) repeat(4,minmax(9.5rem,1fr)) auto; align-items:end; gap:.75rem; padding:1rem; }
.report-filter-field { display:flex; min-width:0; flex-direction:column; gap:.38rem; }
.report-filter-field > span { color:var(--gray); font-size:.62rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.report-filter-control { position:relative; display:flex; align-items:center; color:#94a3b8; }
.report-filter-control > svg:first-child { position:absolute; left:.72rem; width:15px; height:15px; pointer-events:none; }
.report-filter-control input,.report-filter-control select { width:100%; height:2.6rem; min-width:0; padding:0 2rem 0 2.15rem; border:1px solid var(--line-strong); border-radius:.58rem; background:var(--paper); color:var(--ink); font-size:.76rem; transition:border-color .15s,box-shadow .15s; }
.report-filter-control input::placeholder { color:#94a3b8; }.report-filter-control select { appearance:none; cursor:pointer; }
.report-filter-control input:focus,.report-filter-control select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.report-filter-control .select-arrow { position:absolute; right:.65rem; width:14px; height:14px; pointer-events:none; }
.report-filter-submit { height:2.6rem; display:inline-flex; align-items:center; justify-content:center; gap:.42rem; padding:0 .9rem; border:1px solid var(--brand); border-radius:.58rem; background:var(--brand); color:#fff; font-size:.72rem; font-weight:700; white-space:nowrap; box-shadow:0 3px 8px rgba(37,99,235,.18); transition:.15s ease; }
.report-filter-submit:hover { background:var(--brand-hover); transform:translateY(-1px); }
.document-filter-grid { grid-template-columns:minmax(15rem,1.35fr) minmax(11rem,1fr) minmax(10rem,.8fr) minmax(9.5rem,.72fr) minmax(9.5rem,.72fr) auto; }

/* Reports & Analytics workspace */
.reporting-workspace-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.reporting-workspace-head h1 { margin:.22rem 0 .12rem; color:var(--ink); font-family:var(--font-display); font-size:1.35rem; font-weight:700; }
.reporting-workspace-head p { color:var(--gray); font-size:.75rem; }
.reporting-workspace-head__meta { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .7rem; border:1px solid #bbf7d0; border-radius:999px; background:#f0fdf4; color:#047857; font-size:.68rem; font-weight:700; }
.reporting-filter-card,.reporting-preview-card { overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:1rem; box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.04); }
.reporting-filter-card { padding:1.15rem; }
.reporting-filter-card__head { display:flex; align-items:center; gap:.7rem; margin:-1.15rem -1.15rem 1.15rem; padding:1rem 1.15rem; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#fbfdff); }
.reporting-filter-card__head > span { width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:.6rem;background:var(--brand-soft);color:var(--brand); }
.reporting-filter-card__head h2,.reporting-preview-toolbar h2 { color:var(--ink); font-family:var(--font-display); font-size:.9rem; font-weight:700; }
.reporting-filter-card__head p,.reporting-preview-toolbar p { margin-top:.1rem;color:var(--gray);font-size:.67rem; }
.reporting-field-group .field-label,.reporting-options-block .field-label { display:flex;align-items:center;gap:.35rem;font-size:.65rem;letter-spacing:.055em;text-transform:uppercase; }
.reporting-field-group .field-label svg,.reporting-options-block .field-label svg { width:13px;height:13px;color:var(--brand); }
.reporting-field-group .field-input { height:2.6rem;border-radius:.58rem;font-size:.76rem; }
.reporting-options-block { padding:.8rem;border:1px solid var(--line);border-radius:.7rem;background:var(--paper-muted); }
.reporting-check-option { display:flex;align-items:center;gap:.55rem;padding:.42rem .45rem;border-radius:.45rem;color:var(--ink-soft);font-size:.75rem;cursor:pointer; }
.reporting-check-option:hover { background:#fff;color:var(--ink); }
.reporting-preview-toolbar { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line); }
.reporting-live-badge { display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .48rem;border-radius:999px;background:#ecfdf5;color:#047857;font-size:.6rem;font-weight:750;text-transform:uppercase;letter-spacing:.04em; }
.reporting-live-badge svg { fill:#10b981;color:#10b981; }
.reporting-preview-stage { padding:1.75rem;background:#eef2f7;background-image:radial-gradient(#cbd5e1 0.6px,transparent 0.6px);background-size:12px 12px; }
.reporting-paper { position:relative;max-width:820px;margin:0 auto;padding:2rem;background:#fff;border:1px solid #dbe3ee;border-radius:.35rem;box-shadow:0 2px 4px rgba(15,23,42,.06),0 18px 45px rgba(15,23,42,.1); }
.reporting-paper::before { content:"OFFICIAL REPORT PREVIEW";position:absolute;top:.65rem;right:.8rem;color:#94a3b8;font-size:.48rem;font-weight:700;letter-spacing:.12em; }
.reporting-kpi { padding:.65rem;text-align:center;border:1px solid var(--line);border-top:2px solid var(--brand);border-radius:.55rem;background:#f8fafc; }
.reporting-kpi--danger { border-top-color:var(--signal);background:var(--signal-soft); }
.barangay-filter-panel { overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:.9rem;box-shadow:0 1px 2px rgba(15,23,42,.04),0 7px 20px rgba(15,23,42,.035); }
.barangay-filter-head { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fbfdff); }
.barangay-filter-grid { display:grid;grid-template-columns:minmax(16rem,1.4fr) minmax(10rem,.65fr) minmax(12rem,.8fr);gap:.75rem;padding:1rem;max-width:58rem; }
.barangay-stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:800px){.barangay-filter-head{align-items:flex-start;flex-direction:column}.barangay-filter-head>div:last-child{width:100%;flex-wrap:wrap}.barangay-filter-grid{grid-template-columns:1fr 1fr}.barangay-filter-search{grid-column:1/-1}.barangay-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.barangay-filter-grid,.barangay-stat-grid{grid-template-columns:1fr}.barangay-filter-search{grid-column:auto}}
@media(max-width:768px){.reporting-workspace-head{align-items:flex-start;flex-direction:column}.reporting-workspace-head__meta{display:none}.reporting-preview-toolbar{align-items:flex-start}.reporting-preview-stage{padding:.75rem}.reporting-paper{padding:1.1rem}.reporting-preview-toolbar .btn-primary,.reporting-preview-toolbar .btn-secondary{padding:.55rem .65rem;font-size:.7rem}}
@media (max-width:1280px) { .report-filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.report-filter-field--search { grid-column:span 2; } }
@media (max-width:768px) { .report-filter-panel__header { align-items:flex-start; flex-direction:column; }.report-filter-panel__actions { width:100%; flex-wrap:wrap; }.report-filter-panel__actions .btn-primary { margin-left:auto; }.report-filter-grid { grid-template-columns:1fr 1fr; }.report-filter-field--search { grid-column:1/-1; }.report-filter-submit { width:100%; } }
@media (max-width:520px) { .report-filter-grid { grid-template-columns:1fr; }.report-filter-field--search { grid-column:auto; } }
/* Keyboard and accessibility baseline. */
:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}