/* ═══════════════════════════════════════════════════════════════
   R17  –  Church GuestAssist  –  Professional CSS patch
   ═══════════════════════════════════════════════════════════════ */

/* ── sidebar avatar (photo-aware) ──────────────────────────── */
.sb-av-wrap{width:38px;height:38px;border-radius:50%;
  border:2px solid var(--accent,#7b2fff);overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7b2fff22,#3d8bff22)}
.sb-av-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sb-av{width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#7b2fff,#3d8bff);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;color:#fff}

/* ── notification badge ─────────────────────────────────────── */
.notif-badge{background:#e53e3e;color:#fff;border-radius:10px;
  padding:1px 6px;font-size:.62rem;font-weight:700;margin-left:auto}

/* ── flash banner ──────────────────────────────────────────── */
.flash-banner{position:fixed;top:70px;left:50%;transform:translateX(-50%);
  z-index:9999;padding:12px 32px;border-radius:8px;min-width:260px;
  text-align:center;font-size:.875rem;font-weight:600;
  box-shadow:0 4px 24px rgba(0,0,0,.28);cursor:pointer;
  animation:fbIn .3s ease,fbOut .5s ease 3.5s forwards}
.flash-banner.success{background:#22c55e;color:#fff}
.flash-banner.error  {background:#ef4444;color:#fff}
.flash-banner.info   {background:#3d8bff;color:#fff}
@keyframes fbIn {from{opacity:0;top:40px}to{opacity:1;top:70px}}
@keyframes fbOut{to  {opacity:0;top:40px}}

/* ── overlay (close sidebar on tap) ───────────────────────── */
.sb-overlay{display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.52);z-index:199;cursor:pointer}
.sb-overlay.active,.sb-overlay.open{display:block!important}

/* ── hamburger (mobile only) ────────────────────────────────── */
.tb-hamburger{display:none;background:none;border:none;
  color:var(--tx-bright,#e8edf5);font-size:1.2rem;cursor:pointer;
  padding:6px 10px;border-radius:6px;margin-right:6px;transition:background .15s}
.tb-hamburger:hover{background:rgba(255,255,255,.08)}

/* ── profile avatar upload zone ─────────────────────────────── */
.avatar-upload-zone{display:flex;align-items:center;gap:20px;
  margin-bottom:24px;flex-wrap:wrap}
.avatar-preview-ring{width:84px;height:84px;border-radius:50%;
  border:3px solid #7b2fff;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7b2fff22,#3d8bff22)}
.avatar-preview-ring img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-preview-ring .av-init{font-size:2.2rem;font-weight:700;
  color:#7b2fff;user-select:none}
.avatar-upload-btn{background:rgba(123,47,255,.13);
  border:1px solid rgba(123,47,255,.4);color:#7b2fff;
  padding:9px 18px;border-radius:8px;cursor:pointer;
  font-size:.85rem;font-weight:600;display:inline-flex;
  align-items:center;gap:6px;transition:background .2s,border-color .2s}
.avatar-upload-btn:hover{background:rgba(123,47,255,.22);
  border-color:rgba(123,47,255,.7)}
#avatarFileInput{display:none}

/* ── per-contact message button ────────────────────────────── */
.btn-msg-c{background:linear-gradient(135deg,#7b2fff,#5a1fd1);
  color:#fff!important;border:none;padding:5px 13px;border-radius:6px;
  font-size:.78rem;font-weight:600;cursor:pointer;text-decoration:none!important;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  transition:opacity .15s;line-height:1.4}
.btn-msg-c:hover{opacity:.85;color:#fff!important}

/* ── remember-me row ────────────────────────────────────────── */
.remember-row{display:flex;align-items:center;
  justify-content:space-between;margin:10px 0 14px}
.remember-check{display:flex;align-items:center;gap:8px;
  font-size:.84rem;color:var(--tx-muted,#9aabc5);cursor:pointer}
.remember-check input[type=checkbox]{width:16px;height:16px;
  accent-color:#7b2fff;cursor:pointer;flex-shrink:0}

/* ── password toggle eye ────────────────────────────────────── */
.pw-group{position:relative}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  color:var(--tx-muted,#9aabc5);font-size:.9rem;padding:4px}
.pw-eye:hover{color:var(--tx-bright,#e8edf5)}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  ≤768px
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .tb-hamburger{display:flex}

  /* sidebar slides from left */
  .sidebar{position:fixed!important;left:-260px!important;top:0;
    height:100vh;width:240px!important;z-index:200;overflow-y:auto;
    transition:left .25s cubic-bezier(.4,0,.2,1)!important;box-shadow:none!important}
  .sidebar.open{left:0!important;
    box-shadow:6px 0 32px rgba(0,0,0,.45)!important}

  /* content fills width */
  .app-shell>.main-content,.main-content,.page-content,.content-area{
    margin-left:0!important;padding:12px 10px!important;width:100%!important}
  .topbar{left:0!important;width:100%!important;
    padding-left:8px!important;padding-right:8px!important}

  /* stat cards – 2 col */
  .stat-cards,.stats-row{display:grid!important;
    grid-template-columns:1fr 1fr!important;gap:10px!important}
  .stat-card{padding:14px 12px!important}

  /* dashboard lower panels – stack */
  .dash-panels,.dash-bottom-row{display:flex!important;
    flex-direction:column!important;gap:12px!important}

  /* broadcast – stack compose then preview */
  .broadcast-grid,.bcast-layout,.bcast-cols{
    display:flex!important;flex-direction:column!important;gap:12px!important}
  .live-preview-panel,.preview-panel,.compose-panel{width:100%!important;margin-top:0!important}

  /* buttons – wrap */
  .page-hdr-actions,.contact-actions,.page-actions{
    display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  .page-hdr-actions .btn,.contact-actions .btn,.page-actions .btn{
    flex:1 1 120px;text-align:center;justify-content:center}

  /* profile grid */
  .profile-grid{grid-template-columns:1fr!important}
  .profile-card{padding:16px 14px!important}

  /* availability form row */
  .avail-form-row,.slot-form-row{display:flex!important;
    flex-direction:column!important;gap:8px!important}
  .avail-form-row>*,.slot-form-row>*{width:100%!important}

  /* table scroll */
  .table-wrap,.tbl-wrap{overflow-x:auto!important;
    display:block!important;-webkit-overflow-scrolling:touch}

  /* 2-col form rows */
  .form-row-2col{grid-template-columns:1fr!important}

  /* search bar full-width */
  .search-bar-wrap,.search-bar-wrap input{width:100%!important}
}