/* ============================================================================
   WV Assessment Explorer — clean, modern design system
   White canvas · neutral zinc grays · one blue accent · Inter · hairline borders.
   Restraint over decoration. Re-skins every page via Bootstrap token overrides.
   ============================================================================ */

:root {
  /* Neutrals (zinc) */
  --bg:        #ffffff;
  --surface:   #ffffff;
  --surface-2: #fafafa;   /* subtle fills / hover */
  --ink:       #18181b;   /* primary text */
  --ink-2:     #3f3f46;
  --muted:     #71717a;   /* secondary text */
  --faint:     #a1a1aa;   /* captions */
  --line:      #e4e4e7;   /* hairline border */
  --line-2:    #f1f1f3;   /* faint divider */

  /* One accent */
  --accent:      #2563eb;
  --accent-2:    #1d4ed8;
  --accent-tint: #eff6ff;

  /* Semantic */
  --good-bg:#ecfdf3; --good-fg:#15803d;
  --warn-bg:#fff7ed; --warn-fg:#b45309;
  --bad-bg:#fef2f2;  --bad-fg:#b91c1c;
  --neutral-bg:#f4f4f5; --neutral-fg:#52525b;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(24,24,27,.05);
  --shadow: 0 1px 3px rgba(24,24,27,.06), 0 8px 24px -12px rgba(24,24,27,.12);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Bootstrap token overrides */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font);
  --bs-body-font-size: .9375rem;
  --bs-emphasis-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-2);
  --bs-primary: #18181b;
  --bs-primary-rgb: 24,24,27;
  --bs-secondary-color: var(--muted);
}

/* ---------- Base ---------- */
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.55;
  letter-spacing: -.005em;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.2;
}
h1, .h1 { font-weight: 700; letter-spacing: -.03em; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
.text-muted { color: var(--muted) !important; }
.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
hr { border-color: var(--line); opacity: 1; }
::selection { background: var(--accent-tint); }

.section-title { font-weight: 650; color: var(--ink); letter-spacing: -.02em; }

/* ---------- Top navigation ---------- */
.app-nav {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: .5rem; padding-bottom: .5rem;
}
.app-nav .navbar-brand {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
  color: var(--ink); display: inline-flex; align-items: center; gap: .45rem;
}
.app-nav .navbar-brand .bi { color: var(--accent); font-size: 1.1rem; }
.app-nav .navbar-brand .badge {
  font-weight: 600; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
  background: var(--neutral-bg) !important; color: var(--muted) !important;
  border: 1px solid var(--line); padding: .3em .55em; border-radius: 6px;
}
.app-nav .nav-link {
  color: var(--muted); font-weight: 500; font-size: .875rem;
  padding: .4rem .7rem; border-radius: var(--radius-sm);
  transition: color .12s ease, background .12s ease;
}
.app-nav .nav-link:hover { color: var(--ink); background: var(--surface-2); }
.app-nav .nav-link.active { color: var(--ink); font-weight: 600; background: var(--surface-2); }
.navbar-toggler { border-color: var(--line); padding: .35rem .5rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--accent-tint); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2318181b' stroke-width='2' stroke-linecap='round' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E");
}

/* Persistent nav search */
#navSearchForm .form-control {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .85rem;
}
#navSearchForm .form-control:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
#navSearchForm .bi { color: var(--faint); z-index: 4; }

/* Search result dropdowns */
#navSearchResults .list-group-item, #subjResults .list-group-item, #pinResults .list-group-item,
#gridResults .list-group-item, #repResults .list-group-item, #fairResults .list-group-item,
#homeResults .list-group-item { border-color: var(--line); }
.list-group-item-action:hover { background: var(--surface-2); }
.list-group-item.active, .list-group-item-action.active { background: var(--accent); border-color: var(--accent); }

/* Dropdowns */
.dropdown-menu {
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .35rem; background: #fff;
}
.dropdown-item { border-radius: var(--radius-sm); font-size: .875rem; padding: .45rem .65rem; color: var(--ink-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--ink); }
.dropdown-header { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.dropdown-divider { border-color: var(--line-2); }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: none;
}
.card-header {
  background: transparent; border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--ink); font-size: .9rem; padding: .8rem 1.1rem;
}
.card-body { padding: 1.1rem; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* Stat cards */
.stat-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
.stat-card .stat-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--faint);
}
.stat-card .stat-value {
  font-weight: 680; color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.02em; line-height: 1.1;
}
.subject-card { border: 1px solid var(--line); border-left: 3px solid var(--accent); }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 550; font-size: .875rem;
  letter-spacing: -.005em; padding: .5rem .9rem; transition: all .12s ease; }
.btn-sm { padding: .32rem .6rem; font-size: .8rem; border-radius: 6px; }
.btn-lg { padding: .65rem 1.1rem; font-size: .95rem; }
.btn-primary {
  --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000; --bs-btn-active-border-color: #000;
  --bs-btn-disabled-bg: var(--ink); --bs-btn-disabled-border-color: var(--ink);
}
.btn-outline-primary {
  --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line);
  --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--faint); --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--surface-2); --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: var(--faint);
}
.btn-outline-secondary {
  --bs-btn-color: var(--muted); --bs-btn-border-color: var(--line); --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--faint); --bs-btn-hover-color: var(--ink);
}
.btn-link { color: var(--accent); text-decoration: none; }
.btn-link:hover { color: var(--accent-2); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font-size: .9rem; padding: .5rem .7rem;
}
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.form-control::placeholder { color: var(--faint); }
.form-control-lg { padding: .65rem .85rem; font-size: 1rem; }
.form-label { font-size: .82rem; font-weight: 550; color: var(--ink-2); }
.form-range::-webkit-slider-thumb { background: var(--accent); }
.form-range::-moz-range-thumb { background: var(--accent); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-tint); border-color: var(--accent); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); border-color: var(--line); }
.table > :not(caption) > * > * { padding: .65rem .8rem; border-bottom-color: var(--line-2); }
.table thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--faint); font-weight: 600; border-bottom: 1px solid var(--line); background: transparent;
}
.table-hover > tbody > tr:hover > * { background: var(--surface-2); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #fafafa; }
table.dataTable td, table.dataTable th { font-size: .875rem; vertical-align: middle; }

/* Comparables / worksheet tables */
.comp-table th, .comp-table td { white-space: nowrap; font-size: .86rem; vertical-align: middle; }
.comp-table .subject-col { background: var(--accent-tint); }
.comp-table thead .subject-col { background: #dbeafe; }
.sim-bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; min-width: 60px; }
.sim-bar > span { display: block; height: 100%; background: var(--accent); }

/* DataTables chrome */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page-item.active .page-link { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.page-link { color: var(--ink-2); border-color: var(--line); }
.dataTables_filter input, .dataTables_length select { border: 1px solid var(--line) !important; border-radius: var(--radius-sm); }
.dataTables_wrapper { font-size: .875rem; color: var(--muted); }

/* ---------- Badges & equity pills ---------- */
.badge { font-weight: 600; letter-spacing: 0; border-radius: 6px; padding: .38em .6em; font-size: .72rem; }
.text-bg-primary { background: var(--ink) !important; color: #fff !important; }
.text-bg-light { background: var(--neutral-bg) !important; color: var(--ink-2) !important; }
.text-bg-secondary { background: var(--neutral-bg) !important; color: var(--neutral-fg) !important; }
.text-bg-success, .bg-success { background: var(--good-bg) !important; color: var(--good-fg) !important; }
.text-bg-warning, .bg-warning { background: var(--warn-bg) !important; color: var(--warn-fg) !important; }
.text-bg-danger, .bg-danger { background: var(--bad-bg) !important; color: var(--bad-fg) !important; }
.text-bg-info { background: var(--accent-tint) !important; color: var(--accent-2) !important; }

.equity-pill { font-size: .8rem; font-weight: 600; padding: .3rem .65rem; border-radius: 6px; }
.equity-under { background: var(--good-bg); color: var(--good-fg); }
.equity-over  { background: var(--bad-bg);  color: var(--bad-fg); }
.equity-fair  { background: var(--neutral-bg); color: var(--neutral-fg); }

/* ---------- Detail grids ---------- */
.detail-grid dt { color: var(--faint); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em; }
.detail-grid dd { font-weight: 500; margin-bottom: .7rem; color: var(--ink); }

a.parcel-link { color: var(--accent); font-weight: 500; }
a.parcel-link:hover { color: var(--accent-2); text-decoration: underline; }
.cursor-pointer { cursor: pointer; }

/* Alerts */
.alert { border: 1px solid var(--line); border-radius: var(--radius); }
.alert-info { background: var(--accent-tint); color: #1e40af; border-color: #bfdbfe; }
.alert-warning { background: var(--warn-bg); color: var(--warn-fg); border-color: #fed7aa; }
.alert-light { background: var(--surface-2); color: var(--ink-2); }

.how-popover { max-width: 420px; }
.popover { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Footer ---------- */
footer { color: var(--faint); border-top: 1px solid var(--line) !important; font-size: .8rem; }
footer a { color: var(--ink-2); }
footer a:hover { color: var(--accent); }

/* ---------- Global AJAX spinner ---------- */
#globalSpinner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 2000; background: #fff; border: 1px solid var(--line); border-radius: 100px;
  padding: .3rem .6rem; box-shadow: var(--shadow); display: none; }
#globalSpinner.on { display: block; }
.spinner-border { color: var(--accent) !important; }

/* ---------- Responsive ---------- */
.table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 576px) {
  .stat-card .stat-value { font-size: 1.35rem; }
  table.dataTable td, table.dataTable th { font-size: .82rem; }
  .navbar-brand .badge { display: none; }
  main.container-fluid { padding-left: .9rem; padding-right: .9rem; }
  #navSearchForm { max-width: 100% !important; }
}

@media print {
  .app-nav, footer, .no-print, #subjResults,
  .card.mb-3:has(#subjSearch), .card.mb-3:has(#cLimit), .card.mb-3:has(#weightPanel) { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  a[href]:after { content: ''; }
}