/* ESPIN admin area.

   Layered on top of assets/styles.css, so every colour, radius, shadow, font
   and button here is the website's own. The aim is that the admin reads as
   another page of the site - warm, light, rounded, quietly colourful - rather
   than a control panel bolted onto it. Nothing is redefined that the public
   stylesheet already provides; this file only lays out the shell and dresses
   the admin-only pieces in the same language.

   Every selector below is load-bearing for the fourteen pages and admin.js.
   Rename nothing. */

body.admin{
  background:
    radial-gradient(60rem 40rem at -10% -10%, var(--lav-tint) 0%, transparent 60%),
    radial-gradient(50rem 36rem at 110% 0%, var(--gold-tint) 0%, transparent 55%),
    radial-gradient(48rem 40rem at 60% 120%, var(--teal-tint) 0%, transparent 58%),
    var(--paper);
  background-attachment:fixed;
  min-height:100dvh;
}

/* ---------- shell ---------- */
.admin-shell{display:grid;grid-template-columns:272px 1fr;min-height:100dvh;}
.admin-side{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-right:1px solid var(--line);
  color:var(--ink);
  padding:1.7rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:1.5rem;
  position:sticky;top:0;height:100dvh;overflow-y:auto;
}
.admin-side .brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem;font-family:var(--f-display);font-weight:700;font-size:1.65rem;letter-spacing:.06em;padding:0 .7rem;line-height:1;}
.admin-side .brand small{flex-basis:100%;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-top:.45rem;font-family:var(--f-body);}
.admin-side .brand .l1{color:var(--teal);}.admin-side .brand .l2{color:var(--coral);}
.admin-side .brand .l3{color:var(--gold);}.admin-side .brand .l4{color:var(--sky);}
.admin-side .brand .l5{color:var(--lav);}
.admin-tag{padding:0 .7rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--gold-deep);}

.admin-nav{display:flex;flex-direction:column;gap:.2rem;flex:1;}
.admin-nav a{
  position:relative;display:flex;align-items:center;gap:.75rem;
  padding:.66rem .85rem .66rem 1.1rem;border-radius:999px;
  font-family:var(--f-body);font-size:.94rem;font-weight:700;color:var(--ink-soft);
  transition:background .2s var(--ease),color .2s,transform .2s var(--ease);
}
.admin-nav a::before{content:"";position:absolute;left:.42rem;top:50%;width:6px;height:6px;border-radius:50%;background:transparent;transform:translateY(-50%);transition:background .2s;}
.admin-nav a:hover{background:rgba(47,59,86,.05);color:var(--ink);}
.admin-nav a.active{background:var(--teal-tint);color:var(--teal-deep);}
.admin-nav a.active::before{background:var(--teal);}
/* a little of the site's colour play: each section family gets its own dot */
.admin-nav a[href^="content"].active,.admin-nav a[href^="photos"].active,.admin-nav a[href^="testimonials"].active,
.admin-nav a[href^="announcements"].active,.admin-nav a[href^="banner"].active{background:var(--sky-tint);color:var(--sky-deep);}
.admin-nav a[href^="content"].active::before,.admin-nav a[href^="photos"].active::before,.admin-nav a[href^="testimonials"].active::before,
.admin-nav a[href^="announcements"].active::before,.admin-nav a[href^="banner"].active::before{background:var(--sky);}
.admin-nav a[href^="families"].active,.admin-nav a[href^="inquiries"].active{background:var(--coral-tint);color:var(--coral-ink);}
.admin-nav a[href^="families"].active::before,.admin-nav a[href^="inquiries"].active::before{background:var(--coral);}
.admin-nav a[href^="messages"].active,.admin-nav a[href^="notifications"].active{background:var(--gold-tint);color:var(--gold-deep);}
.admin-nav a[href^="messages"].active::before,.admin-nav a[href^="notifications"].active::before{background:var(--gold);}
.admin-nav a[href^="permissions"].active,.admin-nav a[href^="activity"].active,.admin-nav a[href^="settings"].active{background:var(--lav-tint);color:var(--lav-deep);}
.admin-nav a[href^="permissions"].active::before,.admin-nav a[href^="activity"].active::before,.admin-nav a[href^="settings"].active::before{background:var(--lav);}
.admin-nav svg{flex:0 0 auto;opacity:.85;}

.admin-side-foot{border-top:1px solid var(--line);padding-top:1rem;font-size:.85rem;}
.admin-side-foot .who{padding:0 .7rem .1rem;color:var(--ink);font-weight:700;line-height:1.35;word-break:break-word;}
.admin-side-foot .role{padding:0 .7rem .6rem;font-size:.78rem;}
.admin-side-foot a,.admin-side-foot button{display:block;width:100%;text-align:left;padding:.5rem .7rem;border-radius:999px;font-size:.88rem;font-weight:700;color:var(--ink-soft);background:none;border:0;font-family:var(--f-body);cursor:pointer;transition:background .2s,color .2s;}
.admin-side-foot a:hover,.admin-side-foot button:hover{background:rgba(47,59,86,.05);color:var(--ink);}

.admin-main{padding:clamp(1.6rem,3vw,3rem) clamp(1.2rem,3.4vw,3rem) 5rem;max-width:1120px;}
.admin-head{margin-bottom:clamp(1.6rem,2.4vw,2.4rem);}
.admin-head .eyebrow{margin-bottom:var(--gap-eyebrow);}
.admin-head h1{font-size:clamp(1.85rem,1.5rem + 1.5vw,2.5rem);margin:0 0 .5rem;line-height:1.12;}
.admin-head p{color:var(--ink-soft);max-width:62ch;margin:0;font-size:clamp(1rem,.96rem + .25vw,1.12rem);line-height:1.6;}

/* ---------- mobile ---------- */
.admin-bar{display:none;position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);color:var(--ink);align-items:center;justify-content:space-between;gap:.8rem;padding:calc(.7rem + env(safe-area-inset-top)) 1.1rem .7rem;}
.admin-bar .brand{font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:.04em;}
.admin-bar button{background:var(--teal-tint);border:0;color:var(--teal-deep);border-radius:999px;padding:.5rem .7rem;cursor:pointer;display:flex;}
@media(max-width:900px){
  .admin-shell{grid-template-columns:1fr;}
  .admin-bar{display:flex;}
  .admin-side{position:fixed;inset:0 auto 0 0;width:min(288px,84vw);z-index:70;transform:translateX(-102%);transition:transform .3s var(--ease);height:100dvh;background:#fff;}
  .admin-side.open{transform:none;box-shadow:var(--shadow);}
  .admin-scrim{position:fixed;inset:0;background:rgba(47,59,86,.38);z-index:65;opacity:0;pointer-events:none;transition:opacity .3s;}
  .admin-scrim.open{opacity:1;pointer-events:auto;}
  .admin-main{padding-top:1.4rem;}
}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;}
.a-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.7rem;box-shadow:var(--shadow-sm);}
.a-card h2{font-size:1.2rem;margin:0 0 .45rem;}
.a-card h3{font-size:1.05rem;margin:0 0 .35rem;}
.a-card p{color:var(--ink-soft);font-size:.94rem;margin:0;line-height:1.55;}
a.a-card{display:flex;flex-direction:column;gap:.35rem;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;}
a.a-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(87,179,160,.5);}
a.a-card .ico{width:44px;height:44px;border-radius:14px;background:var(--teal-tint);color:var(--teal-deep);display:grid;place-items:center;margin-bottom:.6rem;}
a.a-card:nth-child(3n+2) .ico{background:var(--coral-tint);color:var(--coral-ink);}
a.a-card:nth-child(3n) .ico{background:var(--gold-tint);color:var(--gold-deep);}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.1rem;margin-bottom:2.2rem;}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.5rem 1.2rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.stat::after{content:"";position:absolute;right:-18px;top:-18px;width:74px;height:74px;border-radius:50%;background:var(--teal-tint);opacity:.9;}
.stat:nth-child(2)::after{background:var(--coral-tint);}
.stat:nth-child(3)::after{background:var(--gold-tint);}
.stat:nth-child(4)::after{background:var(--lav-tint);}
.stat b{position:relative;display:block;font-family:var(--f-display);font-size:2.2rem;line-height:1;margin-bottom:.4rem;color:var(--ink);letter-spacing:-.02em;}
.stat span{position:relative;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:2.6rem 0 1.1rem;}
.section-head h2,.section-head h3{font-size:1.32rem;margin:0;}
.section-head p{color:var(--ink-soft);font-size:.92rem;margin:.25rem 0 0;max-width:60ch;}

/* ---------- forms ---------- */
.a-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.3rem,2.4vw,1.9rem);box-shadow:var(--shadow-sm);margin-bottom:1.3rem;}
.a-form h2,.a-form h3{margin-top:0;}
.a-form + .a-form{margin-top:1.1rem;}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;}
@media(max-width:640px){.row-2{grid-template-columns:1fr;}}
.field{margin-bottom:1rem;}
.field label{display:block;font-size:.82rem;font-weight:800;letter-spacing:.02em;color:var(--ink);margin-bottom:.4rem;}
.field input:not([type=checkbox]):not([type=file]),.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:.98rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:.72rem .95rem;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-tint);background:#fff;}
.field textarea{min-height:130px;resize:vertical;line-height:1.6;}
.field .help{display:block;font-size:.8rem;color:var(--ink-soft);font-weight:400;margin-top:.35rem;}
.check{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:.92rem;cursor:pointer;color:var(--ink);}
.check input{width:18px;height:18px;accent-color:var(--teal-deep);}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:.4rem;}
.btn--sm{padding:.62rem 1.15rem;font-size:.9rem;}
.btn--quiet{background:var(--cream);color:var(--ink);border-color:var(--line);box-shadow:none;}
.btn--quiet:hover{border-color:var(--teal);background:#fff;transform:translateY(-1px);}
.btn--danger{background:#fff;color:var(--coral-deep);border-color:rgba(196,69,54,.35);box-shadow:none;}
.btn--danger:hover{background:var(--coral-tint);border-color:var(--coral-deep);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}

/* ---------- lists ---------- */
.a-list{display:flex;flex-direction:column;gap:.75rem;}
.a-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.05rem 1.3rem;display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;box-shadow:0 8px 22px -18px rgba(47,59,86,.28);transition:border-color .2s,box-shadow .2s;}
.a-item:hover{border-color:rgba(47,59,86,.2);}
.a-item.unread{border-left:4px solid var(--coral);}
.a-item .who{font-family:var(--f-display);font-weight:600;font-size:1.04rem;color:var(--ink);}
.a-item .meta{font-size:.86rem;color:var(--ink-soft);margin-top:.2rem;line-height:1.5;}
.a-item .body{width:100%;color:var(--ink-soft);font-size:.94rem;margin-top:.7rem;white-space:pre-wrap;line-height:1.6;}
.a-item .acts{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}

.pill{display:inline-flex;align-items:center;gap:.38rem;font-family:var(--f-display);font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.32rem .68rem;border-radius:999px;line-height:1;border:1px solid transparent;}
.pill::before{content:"";width:.4em;height:.4em;border-radius:50%;background:currentColor;opacity:.75;flex:none;}
.pill-new{background:var(--coral-tint);color:var(--coral-ink);border-color:rgba(240,119,109,.4);}
.pill-read{background:var(--gold-tint);color:var(--gold-deep);border-color:rgba(244,182,62,.45);}
.pill-resolved,.pill-live{background:var(--teal-tint);color:var(--teal-deep);border-color:rgba(87,179,160,.45);}
.pill-off,.pill-hidden{background:var(--mist);color:var(--ink-soft);border-color:var(--line);}

/* ---------- photos ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;}
.photo-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);}
.photo-frame{background:var(--mist);aspect-ratio:4/3;position:relative;display:grid;place-items:center;overflow:hidden;}
.photo-frame img{width:100%;height:100%;object-fit:cover;}
.photo-frame .empty{color:var(--ink-soft);font-size:.85rem;font-weight:700;}
.photo-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
.photo-body h3{font-size:1rem;margin:0;}
.photo-body .hint{font-size:.84rem;color:var(--ink-soft);margin:0;flex:1;}
.photo-body .btn-row{margin-top:.6rem;}
input[type=file]{font-size:.88rem;}

/* ---------- misc ---------- */
.notice{border-radius:var(--radius-sm);padding:1rem 1.2rem 1rem 1.35rem;font-size:.94rem;margin-bottom:1.4rem;border:1px solid transparent;border-left-width:4px;line-height:1.55;}
.notice-info{background:var(--sky-tint);border-color:rgba(111,168,220,.35);border-left-color:var(--sky);color:var(--sky-deep);}
.notice-warn{background:var(--gold-tint);border-color:rgba(244,182,62,.4);border-left-color:var(--gold);color:var(--gold-deep);}
.notice-err{background:var(--coral-tint);border-color:rgba(240,119,109,.4);border-left-color:var(--coral);color:var(--coral-deep);}
.notice a{font-weight:800;text-decoration:underline;color:inherit;}
.notice ul{margin:.5rem 0 0;padding-left:1.2rem;}
.empty-state{background:rgba(255,255,255,.7);border:1.5px dashed rgba(47,59,86,.18);border-radius:var(--radius);padding:2.6rem 1.5rem;text-align:center;color:var(--ink-soft);}
.muted{color:var(--ink-soft);font-size:.9rem;}
.toast{position:fixed;left:50%;bottom:calc(1.4rem + env(safe-area-inset-bottom));transform:translate(-50%,140%);background:var(--ink);color:#fff;padding:.9rem 1.4rem;border-radius:999px;font-size:.92rem;font-weight:700;box-shadow:var(--shadow);z-index:200;transition:transform .35s var(--ease);max-width:92vw;text-align:center;}
.toast.show{transform:translate(-50%,0);}
.toast.err{background:var(--coral-deep);}
.loading{color:var(--ink-soft);font-size:.92rem;padding:1.4rem 0;}

.preview-box{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin-top:.4rem;background:var(--paper);padding:1rem 1.1rem;line-height:1.6;}
.preview-label{background:var(--mist);padding:.5rem .9rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}

/* Login page: a soft brand field, the card floating on it. */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:1.5rem;position:relative;overflow:hidden;
  background:radial-gradient(42rem 30rem at 15% 20%,var(--lav-tint),transparent 60%),radial-gradient(38rem 28rem at 88% 85%,var(--gold-tint),transparent 58%),radial-gradient(30rem 24rem at 80% 10%,var(--teal-tint),transparent 60%),var(--paper);}
.login-wrap::before,.login-wrap::after{content:"";position:absolute;border-radius:50%;pointer-events:none;}
.login-wrap::before{width:22rem;height:22rem;left:-8rem;bottom:-9rem;background:radial-gradient(closest-side,rgba(240,119,109,.28),transparent);}
.login-wrap::after{width:18rem;height:18rem;right:-6rem;top:-6rem;background:radial-gradient(closest-side,rgba(111,168,220,.3),transparent);}
.login-card{position:relative;width:min(440px,100%);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.8rem,4vw,2.6rem);box-shadow:var(--shadow);}
.login-card .brand{display:block;text-align:center;font-family:var(--f-display);font-weight:700;font-size:2.3rem;letter-spacing:.08em;margin-bottom:.15rem;line-height:1;}
.login-card .brand .l1{color:var(--teal);}.login-card .brand .l2{color:var(--coral);}
.login-card .brand .l3{color:var(--gold);}.login-card .brand .l4{color:var(--sky);}
.login-card .brand .l5{color:var(--lav);}
.login-card .sub{text-align:center;color:var(--ink-soft);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin-bottom:2rem;}
.login-card .login-lede{color:var(--ink-soft);font-size:.95rem;margin:0 0 1.2rem;line-height:1.55;}
.login-card .btn{width:100%;}
.login-err{display:none;background:var(--coral-tint);color:var(--coral-deep);border-radius:12px;padding:.7rem .9rem;font-size:.9rem;margin-bottom:1rem;}
.login-err.show{display:block;}
.login-alt{text-align:center;margin-top:1.2rem;font-size:.9rem;}
.login-alt button{background:none;border:0;color:var(--teal-deep);font-weight:800;font-family:var(--f-body);font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.login-foot{text-align:center;margin-top:1.6rem;font-size:.85rem;color:var(--ink-soft);}
.login-foot a{color:var(--teal-deep);font-weight:700;}

/* ---------- switches ---------- */
/* A checkbox dressed as a switch. The real input stays in the DOM for
   keyboard and screen-reader use; the track and knob are purely visual. */
.switch,.field label.switch{display:flex;align-items:center;gap:.7rem;margin:0;padding:.55rem .7rem;border-radius:14px;cursor:pointer;font-weight:700;font-size:.9rem;color:var(--ink);transition:background .2s;}
.switch:hover{background:rgba(47,59,86,.04);}
.switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.switch-track{display:inline-block;position:relative;flex:none;width:42px;height:24px;border-radius:999px;background:rgba(47,59,86,.18);transition:background .2s var(--ease);}
.switch-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(47,59,86,.28);transition:transform .22s var(--ease);}
.switch input:checked + .switch-track{background:var(--teal);}
.switch input:checked + .switch-track .switch-knob{transform:translateX(18px);}
.switch input:focus-visible + .switch-track{box-shadow:0 0 0 4px var(--teal-tint);}
.switch input:disabled + .switch-track{opacity:.45;}
.switch input:disabled ~ .switch-label{color:var(--ink-soft);}
.switch-label{line-height:1.3;}

.filter-btn.active{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep);}

@media(prefers-reduced-motion:reduce){
  .admin-nav a,.a-item,a.a-card,.btn--quiet,.toast,.admin-side,.admin-scrim{transition:none;}
}

/* Help: the "?" that sits on every page and opens help for that page. */
.help-fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: #2f3b56; color: #fff; text-decoration: none;
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem;
  box-shadow: 0 6px 18px rgba(24, 33, 54, .28);
  transition: transform .15s ease, background .15s ease;
}
.help-fab:hover, .help-fab:focus-visible { background: #3a9696; transform: translateY(-2px); }
@media (max-width: 720px) { .help-fab { bottom: 0.8rem; right: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .help-fab { transition: none; } }

/* Show / Hide inside a password box (see revealPasswords in admin.js). */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 4.4rem; }
.pw-toggle {
  position: absolute; top: 50%; right: .5rem; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .01em;
  color: #2f7f7f; padding: .35rem .5rem; border-radius: .45rem;
}
.pw-toggle:hover { background: rgba(58, 150, 150, .12); }
.pw-toggle:focus-visible { outline: 2px solid #3a9696; outline-offset: 1px; }