/* ── All hdr-area small buttons → pill with ghost style ── */
.hdr .btn:not(.btn-ink),
#clients-body .btn:not(.btn-ink),
#list-body .btn:not(.btn-ink) {
  border-radius: var(--btn-pill) !important;
  background: transparent !important;
  border: 1.5px solid var(--bg-sand-dark) !important;
  color: var(--brand-deep) !important;
}

.hdr .btn:not(.btn-ink):hover {
  border-color: var(--brand-deep) !important;
  background: var(--bg-sand) !important;
}

/* ════════════════════════════════════════════════════════════
 *  4. SEARCH BARS — always pill
 * ════════════════════════════════════════════════════════════ */

/* Global search bars */
.sec-search {
  border-radius: 9999px !important;
  background: var(--bg-cool) !important;
  border-color: var(--bg-sand-dark) !important;
  padding: 5px 5px 5px 14px !important;
}

.sec-search:focus-within {
  border-color: var(--brand-mid) !important;
  box-shadow: 0 0 0 2px rgba(6, 74, 207, .10) !important;
}

.sec-search input {
  color: var(--brand-deep) !important;
}

.sec-search input::placeholder {
  color: var(--bg-sand-dark) !important;
}

/* Floating map search bar */
#dsearchBar {
  border-radius: 9999px !important;
  border-color: var(--bg-sand-dark) !important;
}

#dsearchIn {
  color: var(--brand-deep) !important;
}

#dsearchIn::placeholder {
  color: var(--bg-sand-dark) !important;
}

/* ════════════════════════════════════════════════════════════
 *  5. LINES & SEPARATORS — bg-sand-dark everywhere
 * ════════════════════════════════════════════════════════════ */

/* Override the BD variable used everywhere for borders */
:root {
  --bd: var(--bg-sand-dark);
  --paper: var(--bg-warm);
  --card: var(--bg-cool);
}

/* Explicit separators within layout zones */
#dcp {
  border-bottom-color: var(--bg-sand-dark) !important;
}

#dsb {
  border-right-color: var(--bg-sand-dark) !important;
}

#drp {
  border-left-color: var(--bg-sand-dark) !important;
}

.dfc {
  border-color: var(--bg-sand-dark) !important;
}

.dfc.dash-active {
  border-color: var(--brand-deep) !important;
  box-shadow: var(--shadow-md) !important;
}

.dfc:hover {
  border-color: var(--brand-light) !important;
  box-shadow: var(--shadow) !important;
}

#e-left {
  border-right-color: var(--bg-sand-dark) !important;
}

.modal-body {
  border-color: var(--bg-sand-dark) !important;
}

.modal-footer {
  border-top-color: var(--bg-sand-dark) !important;
}

.modal-tabs {
  border-bottom-color: var(--bg-sand-dark) !important;
}

.face-hdr,
.exp-hdr,
.dfc .face-hdr,
.dfc .exp-hdr {
  border-bottom-color: var(--bg-sand-dark) !important;
}

.exp-write,
.art-write {
  border-top-color: var(--bg-sand-dark) !important;
}

#drp-head {
  border-bottom-color: var(--bg-sand-dark) !important;
}

#dsb-foot {
  border-top-color: var(--bg-sand-dark) !important;
}

.dvb {
  border-bottom-color: var(--bg-sand-dark) !important;
}

.d-row {
  border-color: var(--bg-sand-dark) !important;
}

.w-card {
  border-color: var(--bg-sand-dark) !important;
}

.pr-row {
  border-color: var(--bg-sand-dark) !important;
}

.mtp-row {
  border-color: var(--bg-sand-dark) !important;
}

.pt th,
.pt td {
  border-color: var(--bg-sand-dark) !important;
}

.client-tile {
  border-color: var(--bg-sand-dark) !important;
}

.cl-card {
  border-color: var(--bg-sand-dark) !important;
}

/* Top bars — KEEP brand-mid accent on bottom border */
.hdr {
  border-bottom: 2px solid var(--brand-mid) !important;
}

#dash-hdr {
  border-bottom: 2px solid var(--brand-mid) !important;
}

/* ════════════════════════════════════════════════════════════
 *  6. SUBTLE TEXT — sand-dark for secondary / info text
 * ════════════════════════════════════════════════════════════ */

.dfc-sub,
.dfc-nohl,
.dfc-val-lbl,
.dfc-sl-idx,
.c-tile-s,
.c-tile-meta,
.c-list-row .light,
.face-s,
.exp-s,
.art-s,
.dstLbl,
.dvbS,
.drMN,
.dslLbl,
.drCoords,
.card-label,
.lbl,
.drp-head h2,
#drp-head h2,
#dsb .dcard h3,
#s-dash .dcard h3,
.zone-lbl,
.ch-slider-name,
.dckItem .dckText,
.dzoom-bar-lbl,
.dov-panel-lbl,
#doverlay>p,
.dfc-kde-row label {
  color: var(--bg-sand-dark) !important;
}

/* ════════════════════════════════════════════════════════════
 *  7. BACKGROUNDS & FONT COLORS — surface hierarchy
 * ════════════════════════════════════════════════════════════ */

body {
  background: var(--bg-warm) !important;
}

/* Cool surface cards/panels: navy text */
.dfc,
.face,
.exp,
#e-left,
#dsb,
#drpInner,
#s-dash .dcard,
.modal-box,
#dash-src-panel,
.cl-card,
.client-tile,
#archive-panel {
  background: var(--bg-cool) !important;
  color: var(--brand-deep) !important;
}

/* Card/tile title text → navy */
.dfc-title,
.c-tile-t,
.client-tile-name,
.cl-card-company,
.face-t,
.exp-t,
.art-t,
.arc-tile-name,
.dstVal,
.hl-btn-val,
.dfc-val-num,
.fh-v,
.eh-v,
.ah .av {
  color: var(--brand-deep) !important;
}

/* Warm canvas areas: primary text */
#dash-hdr,
.hdr,
#doverlay,
#ddz strong {
  color: var(--brand-deep) !important;
}

/* Dark surfaces: cream text (unchanged) */
#admin-nav,
.art-hdr,
#dart-hdr,
.modal-hdr {
  color: #F4F1E8 !important;
}

/* Restore white on title/subtitle inside dark art header — overrides the navy rule above */
.art-hdr .art-t,
.art-hdr .art-s,
#dart-hdr #dart-t,
#dart-hdr #dart-s {
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════
 *  8. NAV & BRANDING — deep navy identity surface
 * ════════════════════════════════════════════════════════════ */

#admin-nav {
  background: var(--brand-deep) !important;
  width: 52px !important;
  min-width: 52px !important;
  border-right: none !important;
}

#admin-nav .nav-brand {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--brand-light) !important;
}

.nav-item {
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.nav-item.active {
  background: var(--brand-mid) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(6, 74, 207, 0.35) !important;
}

/* Brand wordmarks */
.hdr-brand,
#dash-hdr-brand {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--brand-deep) !important;
}

/* ════════════════════════════════════════════════════════════
 *  9. MODAL HEADERS — deep navy
 * ════════════════════════════════════════════════════════════ */

.modal-hdr {
  background: var(--brand-deep) !important;
  border-bottom: none !important;
}

.modal-hdr span {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.modal-hdr button {
  color: rgba(255, 255, 255, 0.5) !important;
}

.modal-hdr button:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Modal footer primary button */
.modal-footer .btn-ok,
.modal-footer .btn-ink {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  border-radius: var(--btn-pill) !important;
}

/* ════════════════════════════════════════════════════════════
 *  10. MISCELLANEOUS DS TOKENS
 * ════════════════════════════════════════════════════════════ */

/* Tabs (m-tab active) */
.m-tab.on {
  color: var(--brand-deep) !important;
  border-bottom-color: var(--brand-mid) !important;
  font-weight: 700 !important;
}

/* Agg tabs */
.agg-tab.on {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
}

/* Active toggles */
.toggle-switch input:checked+.toggle-track {
  background: var(--brand-mid) !important;
}

/* DFC resize/expand — icon-only style */
.dfc-resize-btn,
.dfc-expand-btn {
  border-radius: var(--btn-icon) !important;
}

.dfc-resize-btn:hover,
.dfc-expand-btn:hover {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #fff !important;
}

/* Card-action art buttons */
.dfc-art-btn {
  background: var(--brand-deep) !important;
  border-radius: 6px !important;
}

.dfc-art-btn:hover {
  opacity: .85 !important;
}

.dfc-face-art-btn:hover {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #fff !important;
}

/* Highlight tag pills */
.ch-tag.on {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
}

.ch-tag:hover:not(.on) {
  border-color: var(--brand-mid) !important;
  color: var(--brand-mid) !important;
}

/* MapLibre popup */
.maplibregl-popup-content {
  background: var(--bg-cool) !important;
  color: var(--brand-deep) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-lg) !important;
}

.ch-popup .ch-popup-t {
  font-family: var(--font-display) !important;
  color: var(--brand-deep) !important;
  border-bottom-color: var(--bg-sand-dark) !important;
}

/* Heatmap legend bar */
.dlgBar {
  background: linear-gradient(to right, #d7191c, #e85b3b, #f99d59, #fec980, #ffedaa, #ecf7b9, #c7e8ad, #9dd3a6, #64abb0, #2b83ba) !important;
}

/* Zoom pills */
.dzpill:hover {
  border-color: var(--brand-deep) !important;
  color: var(--brand-deep) !important;
}

.dzpill.active {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
}

/* GEO accents → brand */
.c-tile.geo,
.dfc.geo-dfc,
.c-list-row.geo {
  border-color: rgba(3, 31, 86, 0.2) !important;
  background: rgba(3, 31, 86, 0.025) !important;
}

.dfc-geo,
.geo-badge {
  background: var(--brand-deep) !important;
}

.c-tile.geo .c-tile-t {
  color: var(--brand-mid) !important;
}

/* Search-clear and icon */
.sec-search-icon {
  color: var(--bg-sand-dark) !important;
}

.sec-search-clear {
  color: var(--bg-sand-dark) !important;
}

.sec-search-clear:hover {
  color: var(--brand-mid) !important;
}

/* Stage badges — keep functional colors, just ensure pill shape */
.cl-stage-badge {
  border-radius: 9999px !important;
}

/* Stat values → display font */
.dstVal,
.hl-btn-val,
.dfc-val-num,
.fh-v,
.eh-v,
.ah .av,
.dfc-initials {
  font-family: var(--font-display) !important;
  color: var(--brand-deep) !important;
}

/* Premium purple stays */
.cl-addon-chip {
  color: var(--util-purple) !important;
  border-color: rgba(108, 60, 220, 0.25) !important;
}

.stage-inactive {
  color: var(--util-purple) !important;
}

/* Confirm green stays */
.data-saved {
  color: var(--util-green) !important;
}

.wgs-lock {
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: var(--util-green) !important;
}

#dash-live-status-bar.gl-live {
  background: rgba(34, 197, 94, 0.06) !important;
}

/* List client pill → deep navy */
#list-client-pill {
  background: var(--brand-deep) !important;
}

/* Mtp pills */
.mtp-pill {
  border-radius: 9999px !important;
}

.mtp-pill.mtp-pill-active {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
}

.mtp-pill:hover {
  border-color: var(--brand-deep) !important;
  color: var(--brand-deep) !important;
}

/* Time date pill */
.time-date-pill {
  background: var(--brand-deep) !important;
  border-radius: 9999px !important;
}

/* Article dark header */
.art-hdr {
  background: var(--ui-dark) !important;
}

.art-hdr.geo-hdr {
  background: var(--brand-deep) !important;
}

#dart-hdr {
  background: var(--ui-dark) !important;
}

#dart-hdr.dart-geo {
  background: var(--brand-deep) !important;
}

/* Overlay */
#doverlay h2 {
  font-family: var(--font-display) !important;
  color: var(--brand-deep) !important;
}

/* Archive panel header */
#archive-panel-hdr h3 {
  font-family: var(--font-display) !important;
  color: var(--brand-deep) !important;
}

#hard-warn-box h3 {
  font-family: var(--font-display) !important;
  color: var(--heat-high) !important;
}