/* hp_theme.css - "Night Water + Aqua": the same look as the surveys admin, for the association homepages.
   Loaded LAST by index.php, manage.php, catch.php, survey_coord.php, survey_register.php, survey_confirm.php,
   so it only re-maps the colour variables those pages already use and restyles the buttons.
   The pages keep their own (older) CSS underneath; delete the <link> to go back. One copy per homepage folder. */

:root {
  color-scheme: dark;
  --bg: #0c2a3a; --panel: rgba(6,30,44,.90); --panel-2: #0f3042;
  --line: rgba(150,210,225,.24); --line-soft: rgba(150,210,225,.16);
  --ink: #e6f1f5; --ink-dim: #a9c0cc; --ink-faint: #7f98a6; --placeholder: #7f98a6;
  /* --amber is the pages' accent colour: it is aqua now */
  --amber: #35d3dc; --amber-hover: #22b9c2; --amber-dark: #04141c; --cyan: #7fe3ea;
  --warn-c: #f5b041;                          /* real warnings stay amber */
  --field: rgba(255,255,255,.07); --th-bg: rgba(255,255,255,.07);
  --header-bg: rgba(6,30,44,.82); --header-ink: #ffffff;
  --ghost-bg: rgba(255,255,255,.05); --ghost-bg-hover: rgba(53,211,220,.14); --ghost-border: rgba(150,210,225,.35);
  --neutral-bg: rgba(255,255,255,.07);
  --row-hover: rgba(53,211,220,.07); --foot-bg: rgba(53,211,220,.07);
  --cyan-bg: rgba(53,211,220,.16); --cyan-bg-soft: rgba(53,211,220,.09); --cyan-border: rgba(53,211,220,.40);
  --ok: #3ddc97; --bad: #ff6b6b; --bad-bg: rgba(255,107,107,.16); --bad-bg-soft: rgba(255,107,107,.08); --bad-border: rgba(255,107,107,.42);
  --card-shadow: 0 6px 24px rgba(0,0,0,.28); --modal-shadow: 0 24px 60px rgba(0,0,0,.6);
  --panel-glass: rgba(6,30,44,.78);
  --overlay: rgba(2,12,20,.68); --toast-bg: #0b2635;
  --wash-1: rgba(6,30,44,.22); --wash-2: rgba(6,30,44,.40); --wash-3: rgba(6,30,44,.58);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eaf5f8; --panel: rgba(255,255,255,.96); --panel-2: #f2fafb;
  --line: #c9e0e7; --line-soft: rgba(201,224,231,.9);
  --ink: #12303c; --ink-dim: #4f6f7d; --ink-faint: #8aa5b1; --placeholder: #8aa5b1;
  --amber: #0b8f99; --amber-hover: #087a83; --amber-dark: #ffffff; --cyan: #0b6f87;
  --warn-c: #b45309;
  --field: #ffffff; --th-bg: #e8f3f6;
  --header-bg: rgba(255,255,255,.96); --header-ink: #12303c;
  --ghost-bg: rgba(11,143,153,.06); --ghost-bg-hover: rgba(11,143,153,.14); --ghost-border: rgba(18,48,60,.20);
  --neutral-bg: rgba(18,48,60,.06);
  --row-hover: rgba(11,143,153,.06); --foot-bg: rgba(11,143,153,.06);
  --cyan-bg: rgba(11,143,153,.12); --cyan-bg-soft: rgba(11,143,153,.07); --cyan-border: rgba(11,143,153,.32);
  --ok: #047857; --bad: #b91c1c;
  --card-shadow: 0 10px 30px -20px rgba(16,60,70,.45); --modal-shadow: 0 24px 60px rgba(16,60,70,.30);
  --panel-glass: rgba(255,255,255,.80);
  --overlay: rgba(16,40,50,.45); --toast-bg: #12303c;
  --wash-1: rgba(234,245,248,.30); --wash-2: rgba(234,245,248,.50); --wash-3: rgba(234,245,248,.68);
}

/* ---- buttons: outlined pills that fill with aqua on hover (header buttons, light buttons) ---- */
:root .hdr-btn, :root .hdr-btn.solid, :root .theme-toggle, :root .btn.light, :root .vb-btn.light,
:root .btn.ghost, :root .btn.secondary, :root .dash-card .dash-btn, :root a.btn.light,
:root .admin-login-btn, :root .admin-login-btn.is-admin, :root .manage-group-btn, :root .wv-nav-btn {
  background: transparent; border: 1px solid var(--amber); color: var(--amber); border-radius: 18px;
  transition: background .15s, color .15s;
}
:root .hdr-btn:hover, :root .hdr-btn.solid:hover, :root .theme-toggle:hover, :root .btn.light:hover, :root .vb-btn.light:hover,
:root .btn.ghost:hover, :root .btn.secondary:hover, :root .dash-card .dash-btn:hover, :root a.btn.light:hover,
:root .admin-login-btn:hover, :root .admin-login-btn.is-admin:hover, :root .manage-group-btn:hover, :root .wv-nav-btn:hover {
  background: var(--amber); color: var(--amber-dark); border-color: var(--amber);
}
/* ---- main actions: solid aqua pills ---- */
:root .btn, :root .vb-btn, :root .section-add-btn, :root .modal-actions .btn-save, :root .btn.primary {
  background: var(--amber); border-color: var(--amber); color: var(--amber-dark); border-radius: 18px;
}
:root .btn:hover, :root .vb-btn:hover, :root .section-add-btn:hover, :root .modal-actions .btn-save:hover, :root .btn.primary:hover {
  background: var(--amber-hover); border-color: var(--amber-hover); color: var(--amber-dark);
}
/* buttons that were already outlined keep that when disabled; red stays red */
:root .btn.danger { background: transparent; border: 1px solid var(--bad); color: var(--bad); }
:root .btn.danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
:root .btn:disabled, :root .hdr-btn:disabled { opacity: .45; }

/* ---- warnings stay amber (the accent colour is aqua now) ---- */
:root .vmod .vval.warn, :root .badge.partial, :root .vb-badge.warn, :root .tag.unsent, :root .msg.warn,
:root .status.pending, :root .pill.warn { color: var(--warn-c); }
:root .vbar span.warn, :root .bar.warn > span, :root .dot.off { background: var(--warn-c); }
:root .status-bar.pending, :root .entry.unsent, :root .msg.warn, :root .status.pending { border-color: var(--warn-c); }
:root .pill.warn { background: rgba(245,176,65,.16); border-color: var(--warn-c); }
:root .vb-badge.warn { border-color: rgba(245,176,65,.55); }
:root .badge.partial { background: rgba(245,176,65,.18); }

/* ---- small things that match the admin ---- */
:root :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]) { border-color: var(--line); }
:root :is(input,select,textarea):focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 2px rgba(53,211,220,.25); }
:root header { border-bottom-color: var(--line); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: rgba(150,210,225,.30); border-radius: 8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }