/* Raj E Panchayat — VDO Contact Directory module UI repair
   This file intentionally contains ONLY vdo_contact selectors.
   It consumes the global centralized theme variables and is loaded after the
   common header, so a stale/global selector cannot make the page unstyled. */

.vdo-page-bg {
  --vdo-primary: var(--rp-ui-primary, #0f766e);
  --vdo-primary-dark: var(--rp-ui-primary-dark, #0b5d57);
  --vdo-accent: var(--rp-ui-accent, #d4a72c);
  --vdo-bg: var(--rp-ui-bg, #f5f7f5);
  --vdo-surface: var(--rp-ui-surface, #ffffff);
  --vdo-surface-alt: var(--rp-ui-surface-alt, #f3f7f5);
  --vdo-text: var(--rp-ui-text, #20302a);
  --vdo-muted: var(--rp-ui-muted, #66736d);
  --vdo-border: var(--rp-ui-border, #d9e2dd);
  --vdo-radius: var(--rp-ui-card-radius, 18px);
  --vdo-input-radius: var(--rp-ui-input-radius, 12px);
  --vdo-button-radius: var(--rp-ui-button-radius, 11px);
  --vdo-shadow: var(--rp-ui-shadow, 0 12px 32px rgba(21, 55, 44, .08));
  min-height: 70vh;
  padding: clamp(12px, 2vw, 20px) 0 clamp(28px, 4vw, 44px);
  background: var(--vdo-bg) !important;
  color: var(--vdo-text);
}

.vdo-page-shell {
  width: min(var(--rp-ui-page-width, 1240px), calc(100% - 28px));
  margin: 0 auto 34px;
}

/* Hero */
.vdo-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(14px, 2vw, 20px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--vdo-border);
  border-radius: var(--vdo-radius);
  background: linear-gradient(135deg, var(--vdo-primary-dark), var(--vdo-primary));
  box-shadow: var(--vdo-shadow);
  color: #fff;
}
.vdo-hero::before,
.vdo-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255,255,255,.08);
}
.vdo-hero::before { width: 210px; height: 210px; right: -62px; top: -88px; }
.vdo-hero::after { width: 120px; height: 120px; right: 16%; bottom: -72px; }
.vdo-hero-inner { position: relative; z-index: 1; max-width: 930px; }
.vdo-kicker,
.vdo-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  font-weight: 800;
}
.vdo-kicker {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.11);
  font-size: 11px;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.vdo-hero h1 {
  margin: 10px 0 7px;
  color: inherit !important;
  font-size: clamp(28px, 4vw, 43px);
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -.035em;
}
.vdo-hero p { margin: 0; max-width: 760px; color: inherit !important; opacity: .88; font-size: 14px; line-height: 1.62; }
.vdo-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.vdo-pill { padding: 7px 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: inherit; font-size: 12px; }

/* Keep the hero aligned with the installed central theme personality. */
body.rp-hero-flat .vdo-hero,
body.rp-hero-outline .vdo-hero,
body.rp-hero-soft .vdo-hero,
body.rp-hero-glass .vdo-hero {
  color: var(--vdo-text);
}
body.rp-hero-flat .vdo-hero { background: var(--vdo-surface); box-shadow: none; }
body.rp-hero-outline .vdo-hero { background: transparent; border: 2px solid var(--vdo-border); box-shadow: none; }
body.rp-hero-soft .vdo-hero { background: var(--vdo-surface-alt); }
body.rp-hero-glass .vdo-hero { background: color-mix(in srgb, var(--vdo-surface) 76%, transparent); backdrop-filter: blur(16px) saturate(125%); }
body:is(.rp-hero-flat,.rp-hero-outline,.rp-hero-soft,.rp-hero-glass) .vdo-kicker,
body:is(.rp-hero-flat,.rp-hero-outline,.rp-hero-soft,.rp-hero-glass) .vdo-pill {
  border-color: var(--vdo-border);
  background: var(--vdo-surface-alt);
  color: var(--vdo-primary-dark);
}

/* Filter panel */
.vdo-panel,
.vdo-block,
.vdo-empty {
  margin-bottom: clamp(14px, 2vw, 20px);
  border: 1px solid var(--vdo-border) !important;
  border-radius: var(--vdo-radius) !important;
  background: var(--vdo-surface) !important;
  box-shadow: var(--vdo-shadow) !important;
}
.vdo-panel { padding: clamp(14px, 2vw, 22px); }
.vdo-panel-title {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 0 15px !important;
  color: var(--vdo-text) !important;
  font-size: clamp(17px, 2vw, 21px) !important;
  font-weight: 850 !important;
  line-height: 1.25;
}
.vdo-panel-title i { color: var(--vdo-primary); }

.vdo-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto !important;
  gap: 12px !important;
  align-items: end !important;
}
.vdo-search-field { grid-column: 1 / -1 !important; }
.vdo-field { min-width: 0; }
.vdo-field label {
  display: block !important;
  margin: 0 0 7px !important;
  color: var(--vdo-muted) !important;
  font-size: 12px !important;
  line-height: 1.2;
  font-weight: 800 !important;
}
.vdo-search-wrap { position: relative !important; display: block !important; width: 100% !important; }
.vdo-search-icon {
  position: absolute !important;
  z-index: 2;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  translate: none !important;
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  color: var(--vdo-primary) !important;
  background: transparent !important;
  pointer-events: none;
}
.vdo-search-input,
.vdo-select {
  width: 100% !important;
  min-height: var(--rp-ui-input-height, 48px) !important;
  border: 1px solid var(--rp-ui-select-border, var(--vdo-border)) !important;
  border-radius: var(--vdo-input-radius) !important;
  background-color: var(--rp-ui-select-bg, var(--vdo-surface)) !important;
  color: var(--rp-ui-select-text, var(--vdo-text)) !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.3;
  outline: none;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.vdo-search-input { padding: 0 46px 0 43px !important; }
.vdo-search-input::placeholder { color: color-mix(in srgb, var(--vdo-muted) 78%, transparent); }

/* Native select made visually consistent while keeping browser accessibility. */
.vdo-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 44px 0 14px !important;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--rp-ui-select-arrow, var(--vdo-primary)) 50%),
    linear-gradient(135deg, var(--rp-ui-select-arrow, var(--vdo-primary)) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}
.vdo-select option { background: var(--rp-ui-select-bg, var(--vdo-surface)); color: var(--rp-ui-select-text, var(--vdo-text)); }
.vdo-search-input:focus,
.vdo-select:focus {
  border-color: var(--rp-ui-select-focus, var(--vdo-primary)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rp-ui-select-focus, var(--vdo-primary)) 16%, transparent) !important;
}
.vdo-select:disabled { opacity: .56; cursor: not-allowed; background-color: var(--vdo-surface-alt) !important; }

.vdo-search-clear {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  translate: none !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--vdo-border) !important;
  border-radius: calc(var(--vdo-input-radius) - 2px) !important;
  background: var(--vdo-surface-alt) !important;
  color: var(--vdo-primary) !important;
  cursor: pointer;
  line-height: 1 !important;
}
.vdo-search-clear[hidden] { display: none !important; }

.vdo-btn,
.vdo-chip,
.vdo-mini-btn {
  font: inherit !important;
  text-decoration: none !important;
}
.vdo-btn {
  min-height: var(--rp-ui-button-height, 46px) !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: var(--vdo-button-radius) !important;
  font-weight: 800 !important;
  white-space: nowrap;
}
.vdo-btn-primary { background: var(--vdo-primary) !important; border: 1px solid var(--vdo-primary) !important; color: #fff !important; }
.vdo-btn-soft { background: var(--vdo-surface-alt) !important; border: 1px solid var(--vdo-border) !important; color: var(--vdo-primary-dark) !important; }
body.rp-button-gradient .vdo-btn-primary { background: linear-gradient(135deg, var(--vdo-primary-dark), var(--vdo-primary)) !important; border-color: transparent !important; }
body.rp-button-outline .vdo-btn-primary { background: transparent !important; color: var(--vdo-primary) !important; border: 1.5px solid var(--vdo-primary) !important; }
body.rp-button-soft .vdo-btn-primary { background: var(--vdo-surface-alt) !important; color: var(--vdo-primary-dark) !important; border: 1px solid var(--vdo-border) !important; }
body.rp-button-pill :is(.vdo-btn,.vdo-mini-btn,.vdo-chip) { border-radius: 999px !important; }

.vdo-filter-note {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}
.vdo-chip {
  min-height: 34px;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid var(--vdo-border) !important;
  border-radius: 999px !important;
  background: var(--vdo-surface-alt) !important;
  color: var(--vdo-text) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

/* Results */
.vdo-block { overflow: hidden; }
.vdo-block-band {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 12px 16px !important;
  background: var(--vdo-primary-dark) !important;
  color: #fff !important;
}
.vdo-block-title { font-size: 15px !important; font-weight: 850 !important; }
.vdo-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  gap: var(--rp-ui-grid-gap, 14px) !important;
  padding: clamp(12px, 2vw, 18px) !important;
}
.vdo-contact-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--vdo-border) !important;
  border-radius: var(--vdo-radius) !important;
  background: var(--vdo-surface) !important;
  color: var(--vdo-text) !important;
  box-shadow: var(--vdo-shadow) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vdo-contact-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--vdo-primary) 55%, var(--vdo-border)) !important; }
.vdo-contact-card-top { height: 4px; background: linear-gradient(90deg, var(--vdo-primary), var(--vdo-accent)); }
.vdo-contact-card-body { padding: clamp(13px, 1.8vw, 17px); }
.vdo-contact-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--vdo-border); }
.vdo-avatar {
  width: 48px; height: 48px; min-width: 48px;
  display: grid; place-items: center;
  border-radius: calc(var(--vdo-radius) * .72);
  color: #fff;
  background: linear-gradient(135deg, var(--vdo-primary-dark), var(--vdo-primary));
  font-weight: 900;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--vdo-primary) 20%, transparent);
}
.vdo-contact-title-wrap { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.vdo-name { max-width: 100%; color: var(--vdo-text) !important; font-size: 16px !important; font-weight: 850 !important; line-height: 1.25; overflow-wrap: anywhere; }
.vdo-role-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--vdo-primary) !important;
  background: color-mix(in srgb, var(--vdo-primary) 9%, var(--vdo-surface));
  border: 1px solid color-mix(in srgb, var(--vdo-primary) 18%, var(--vdo-border));
  font-size: 10px; font-weight: 800;
}
.vdo-location-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.vdo-location-item { min-width: 0; padding: 9px 10px; border: 1px solid var(--vdo-border); border-radius: calc(var(--vdo-radius) * .68); background: var(--vdo-surface-alt); }
.vdo-location-label { display: block; margin-bottom: 3px; color: var(--vdo-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.vdo-location-item strong { display: block; color: var(--vdo-text); font-size: 12px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.vdo-contact-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vdo-contact-meta-item { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--vdo-border); border-radius: calc(var(--vdo-radius) * .68); background: color-mix(in srgb, var(--vdo-surface) 84%, var(--vdo-surface-alt)); }
.vdo-contact-meta-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; color: var(--vdo-primary); background: color-mix(in srgb, var(--vdo-primary) 10%, var(--vdo-surface)); }
.vdo-contact-meta-item div { min-width: 0; }
.vdo-contact-meta-item small { display: block; color: var(--vdo-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.vdo-contact-meta-item strong { display: block; color: var(--vdo-text); font-size: 12px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.vdo-card-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--vdo-border); }
.vdo-mini-btn { flex: 1 1 110px; min-height: 38px; padding: 7px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--vdo-border) !important; border-radius: var(--vdo-button-radius) !important; background: var(--vdo-surface-alt) !important; color: var(--vdo-primary) !important; font-size: 12px !important; font-weight: 800 !important; }
.vdo-mini-btn:hover { border-color: var(--vdo-primary) !important; background: color-mix(in srgb, var(--vdo-primary) 8%, var(--vdo-surface)) !important; }

body.rp-card-flat .vdo-contact-card { box-shadow: none !important; border-width: 0 !important; }
body.rp-card-soft .vdo-contact-card { background: var(--vdo-surface-alt) !important; box-shadow: none !important; }
body.rp-card-glass .vdo-contact-card { background: color-mix(in srgb, var(--vdo-surface) 76%, transparent) !important; backdrop-filter: blur(16px) saturate(125%); }
body.rp-card-outlined .vdo-contact-card { box-shadow: none !important; border-width: 2px !important; }
body.rp-card-accent .vdo-contact-card { border-top: 3px solid var(--vdo-primary) !important; }

.vdo-table-wrap { overflow: auto; background: var(--vdo-surface); }
.vdo-table { min-width: 900px; }
.vdo-table .center { white-space: nowrap; }
.vdo-table-name { color: var(--vdo-primary); }
.vdo-empty { padding: clamp(24px, 4vw, 36px); text-align: center; color: var(--vdo-muted); }
.vdo-empty h2 { margin: 0 0 8px; color: var(--vdo-text); font-weight: 850; }
.alert-danger { border-radius: var(--vdo-radius); padding: 16px; background: #fff3f3; color: #a21d1d; border: 1px solid #efcaca; }

/* AJAX state. Keep the card UI visible while updating. */
.vdo-results-region { position: relative; min-height: 84px; transition: opacity .16s ease; }
.vdo-results-region.is-loading { opacity: .58; pointer-events: none; }
.vdo-filter-grid.is-ajax-loading,
#vdoFilterForm.is-ajax-loading { cursor: progress; }
#vdoSearchButton:disabled { opacity: .62; cursor: progress; }

@media (max-width: 1050px) {
  .vdo-filter-grid { grid-template-columns: 1fr 1fr !important; }
  .vdo-search-field { grid-column: 1 / -1 !important; }
  #vdoSearchButton { grid-column: 1 !important; }
  #vdoLoadAll { grid-column: 2 !important; }
}

@media (max-width: 760px) {
  .vdo-page-shell { width: calc(100% - 22px); }
  .vdo-hero { padding: 18px 16px; border-radius: min(var(--vdo-radius), 18px); }
  .vdo-hero h1 { font-size: 29px; }
  .vdo-panel { padding: 14px; }
  .vdo-panel-title { font-size: 18px !important; }
  .vdo-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .vdo-search-field,
  .vdo-filter-grid > .vdo-field { grid-column: 1 / -1 !important; }
  .vdo-filter-grid > .vdo-field select { width: 100% !important; }
  #vdoSearchButton { grid-column: 1 !important; width: 100% !important; }
  #vdoLoadAll { grid-column: 2 !important; width: 100% !important; }
  .vdo-filter-note { grid-column: 1 / -1 !important; }
  .vdo-card-grid { grid-template-columns: 1fr !important; padding: 11px !important; }
  .vdo-location-grid { grid-template-columns: 1fr !important; }
  .vdo-contact-meta { grid-template-columns: 1fr !important; }
  .vdo-table-wrap { display: none !important; }
}

@media (max-width: 420px) {
  .vdo-page-shell { width: calc(100% - 16px); }
  .vdo-hero { padding: 16px 14px; }
  .vdo-hero h1 { font-size: 27px; }
  .vdo-panel { padding: 12px; }
  .vdo-btn { padding-inline: 10px !important; font-size: 13px !important; }
  .vdo-chip { font-size: 11px !important; }
  .vdo-contact-card-body { padding: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .vdo-contact-card,
  .vdo-results-region { transition: none; }
}