/* EVA portal theme + custom layouts on top of Pico v2 (vendored). Portal only.
   BRAND.md: EVA Blue #2a3784, EVA Green #3bb54a. Each raw hue fails AA as UI text in
   one mode, so the interactive color SWITCHES: blue in light, green in dark; blue text
   on dark uses the derived #949bc1, green text on light the derived #24702d. */

/* ---- Pico primary override: light = EVA Blue ---------------------------- */
:root {
  --pico-primary: #2a3784;
  --pico-primary-background: #2a3784;
  --pico-primary-hover: #212c6a;
  --pico-primary-hover-background: #212c6a;
  --pico-primary-focus: rgba(42, 55, 132, 0.375);
  --pico-primary-inverse: #fff;                 /* text on a blue button (10.6:1) */
  --pico-primary-underline: rgba(42, 55, 132, 0.5);
  --pico-border-radius: 0.5rem;
}
/* ---- dark = EVA Green accent (dark text on green); links = derived blue --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --pico-primary: #949bc1;                    /* blue text/links on dark (6.8:1) */
    --pico-primary-background: #3bb54a;         /* green button */
    --pico-primary-hover: #b3b9d6;
    --pico-primary-hover-background: #319a3e;
    --pico-primary-focus: rgba(59, 181, 74, 0.375);
    --pico-primary-inverse: #1a1a1a;            /* dark text on a green button (6.5:1) */
    --pico-primary-underline: rgba(148, 155, 193, 0.5);
  }
}
[data-theme=dark] {
  --pico-primary: #949bc1;
  --pico-primary-background: #3bb54a;
  --pico-primary-hover: #b3b9d6;
  --pico-primary-hover-background: #319a3e;
  --pico-primary-focus: rgba(59, 181, 74, 0.375);
  --pico-primary-inverse: #1a1a1a;
  --pico-primary-underline: rgba(148, 155, 193, 0.5);
}

/* ---- legacy tokens mapped onto Pico (used by the components below) ------- */
:root {
  --line: var(--pico-muted-border-color);
  --muted: var(--pico-muted-color);
  --err: #b00020;
  --accent: var(--pico-primary);
  --fill: #3bb54a;            /* EVA Green fill */
  --fill-text: #1a1a1a;       /* dark text on green (BRAND: green fills never white text) */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --err: #ff6b6b; } }
[data-theme=dark] { --err: #ff6b6b; }

/* Dial the whole UI down a notch: Pico scales its base up to 131% on wide screens,
   which reads large. Flatten it (15px base) so text is smaller + denser throughout.
   Tune this one number to taste. */
:root { --pico-font-size: 93.75%; }

/* ---- EVA header banner (matches myeva.org: green/white logo on EVA Blue) - */
.eva-banner { background: #2a3784; }
.eva-banner-inner {
  max-width: 1040px; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; gap: .8rem; text-decoration: none;
}
.eva-logo { height: 46px; width: auto; display: block; }
.eva-banner-title { color: #fff; font-weight: 600; font-size: 1.45rem; letter-spacing: .01em; }
@media (max-width: 480px) {
  .eva-logo { height: 36px; }
  .eva-banner-title { font-size: 1.2rem; }
}

/* ---- photo gallery editor: one photo per row (thumb + roomy caption) ---- */
.photo-card { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: .6rem 0; }
/* image-orientation:none — trust the (already-baked) pixels, ignore the stale iOS EXIF tag,
   so previews match the no-rotate published derivative. No effect on the tag-free derivatives. */
.photo-thumb { width: 160px; height: 120px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; cursor: zoom-in; image-orientation: none; }
.photo-thumb.is-pending { opacity: .7; }
.photo-fields { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.photo-fields textarea { width: 100%; margin: 0; min-height: 68px; resize: vertical; }
.photo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.photo-actions .spacer { flex: 1; }

/* ---- lightbox: click any img[data-full] to view full-size --------------- */
#lightbox { position: fixed; inset: 0; z-index: 1000; padding: 20px; cursor: zoom-out;
  background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; }
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px;
  box-shadow: 0 6px 40px rgba(0,0,0,.55); image-orientation: none; }

/* ---- layout ------------------------------------------------------------- */
main.wrap { max-width: 480px; margin: 0 auto; padding: 1.5rem 1rem; }
main.wrap.wrap-wide { max-width: 1040px; }
.muted { color: var(--muted); }
.err { color: var(--err); }

/* ---- card / notice (Pico styles <article>; keep these for our .card divs) - */
.card {
  border: 1px solid var(--line); border-radius: var(--pico-border-radius);
  padding: 1rem; margin: 0.75rem 0; background: var(--pico-card-background-color);
}
.notice { background: var(--fill); border-radius: var(--pico-border-radius);
          padding: 0.75rem 1rem; margin: 0.75rem 0; }
.notice, .notice p, .notice .muted, .notice strong, .notice a { color: var(--fill-text); }

/* ---- status pills ------------------------------------------------------- */
.badge { display: inline-block; background: var(--fill); color: var(--fill-text);
         border-radius: 6px; padding: 2px 10px; font-size: .78rem; font-weight: 600; margin-top: 6px; }
.chip { display: inline-block; background: rgba(127,127,127,.16); color: var(--pico-color);
        border-radius: 6px; padding: 1px 7px; font-size: .75rem; line-height: 1.5;
        margin: 1px 3px 1px 0; white-space: nowrap; }

/* ---- roster: desktop table -> phone cards (Pico's table + our overrides) - */
.roster-wrap { overflow-x: auto; margin: .5rem 0; }
.roster-table { width: 100%; font-size: .92rem; }
.roster-table th, .roster-table td { padding: .5rem .6rem; vertical-align: middle; }
.roster-table td[data-label="Phone"] { white-space: nowrap; }
.roster-table .cap-col { text-align: center; }
.roster-overview td { min-height: 44px; }
.roster-overview .cap-on { color: var(--pico-primary); font-weight: 700; }
@media (max-width: 760px) {
  .roster-table thead { display: none; }
  .roster-table, .roster-table tbody, .roster-table tr, .roster-table td { display: block; width: 100%; }
  .roster-table tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; padding: 6px 12px; }
  .roster-table td { display: flex; align-items: center; gap: 10px; border: none; padding: 8px 0; min-height: 44px; }
  .roster-table td::before { content: attr(data-label); font-weight: 600; flex: 0 0 42%; color: var(--muted); }
  .roster-table .row-actions::before { content: none; }
  /* many Access chips overflowed the cell (horizontal scroll) — let them wrap */
  .roster-table td[data-label="Access"] { flex-wrap: wrap; align-items: flex-start; row-gap: 4px; }
}

/* Link-buttons (<a class="btn">) styled to match Pico's primary button. */
.btn {
  display: inline-block; padding: .55rem 1.1rem; border-radius: var(--pico-border-radius);
  background: var(--pico-primary-background); color: var(--pico-primary-inverse);
  font-weight: 600; text-decoration: none; text-align: center; border: none;
  cursor: pointer; line-height: 1.4;
}
.btn:hover, .btn:focus { background: var(--pico-primary-hover-background);
                         color: var(--pico-primary-inverse); }
button.danger, .btn.danger { background: var(--err); }

/* ---- edit views as a focused "card" over a grayed EVA-blue backdrop ------ */
main.wrap-modal { max-width: none; padding: 1.5rem 1rem 3rem;
  background: #2f3557; min-height: calc(100vh - 64px); }         /* grayed EVA blue */
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) main.wrap-modal { background: #191d31; } }
:root[data-theme=dark]  main.wrap-modal { background: #191d31; }
:root[data-theme=light] main.wrap-modal { background: #2f3557; }
.modal-inner { max-width: 480px; margin: 0 auto; position: relative; padding-top: .25rem; }
.modal-inner h1 { color: #fff; margin: .3rem 104px .4rem 0; }    /* room for the "✕ Close" pill */
.modal-inner .card { box-shadow: 0 12px 40px rgba(0,0,0,.32); }
.modal-close { position: absolute; top: 0; right: 0; height: 38px; padding: 0 15px;
  border-radius: 19px; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.16); color: #fff; text-decoration: none;
  font-size: .92rem; font-weight: 600; line-height: 1; transition: background .15s; }
.modal-close:hover, .modal-close:focus { background: rgba(255,255,255,.30); color: #fff; }
/* the "publish next" hint at the foot of an edit card */
.publish-hint { font-size: .85rem; margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line); color: var(--muted); }
/* per-field "awaiting EVA review" marker — so a leader SEES a sensitive change is
   captured and doesn't re-edit (which used to re-queue a duplicate). */
.pending-flag { font-size: .85rem; margin: 4px 0 0; font-weight: 600;
  color: var(--accent); }

/* ---- Resources library: browsable Drive tree (native <details>, no JS needed) - */
#res-filter { width: 100%; }
.res-top { margin: 2px 0; }
.res-list { list-style: none; margin: 2px 0 6px; padding-left: 20px;
  border-left: 1px solid var(--line); }
.res-list li { margin: 0; }
details.res-folder > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 9px 8px; min-height: 44px; border-radius: 8px; font-weight: 600;
}
details.res-folder > summary::-webkit-details-marker { display: none; }
details.res-folder > summary:hover { background: rgba(127,127,127,.10); }
.res-caret { color: var(--muted); font-size: .8rem; transition: transform .12s;
  display: inline-block; }
details.res-folder[open] > summary > .res-caret { transform: rotate(90deg); }
.res-fname { flex: 1 1 auto; min-width: 0; }
.res-count { color: var(--muted); font-weight: 400; font-size: .8rem;
  background: rgba(127,127,127,.14); border-radius: 10px; padding: 1px 9px; }
a.res-file { display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--pico-color); padding: 8px; min-height: 44px; border-radius: 8px; }
a.res-file:hover { background: rgba(127,127,127,.10); }
.res-icon { flex: 0 0 auto; font-size: 1.1rem; }
.res-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.res-size { flex: 0 0 auto; color: var(--muted); font-size: .8rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; }